/* ARIA's mark, and the motion that carries a student from one screen to the next.

   The mark is an open book left face down: two pages make the A (blue and coral),
   and the dot under the fold is the student. aria-brand.js draws it inline into any
   [data-aria-logo] so it can move; everything that used the old spinning asterisk
   (.ag-spark) now shows the mark too, with the dot bobbing while ARIA thinks.

   Page transitions are tagged with the "aria-nav" type, so they never touch the
   light/dark circle reveal, which runs its own view transition without a type. */

:root {
  --aria-blue: #0a7cff;
  --aria-coral: #ff6a3d;
  --aria-tile: #0b0b0f;
  --aria-tile-edge: transparent;
  --aria-dot: #ffffff;
  --aria-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --aria-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --aria-spark-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='18' fill='%230b0b0f'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M15 51 L32 13' stroke='%230a7cff' stroke-width='10.5'/%3E%3Cpath d='M49 51 L32 13' stroke='%230b0b0f' stroke-width='13'/%3E%3Cpath d='M49 51 L32 13' stroke='%23ff6a3d' stroke-width='10.5'/%3E%3C/g%3E%3C/svg%3E");
  --aria-spark-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='.75' y='.75' width='62.5' height='62.5' rx='17.4' fill='%2316161c' stroke='%23ffffff' stroke-opacity='.1' stroke-width='1.5'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M15 51 L32 13' stroke='%233d95ff' stroke-width='10.5'/%3E%3Cpath d='M49 51 L32 13' stroke='%2316161c' stroke-width='13'/%3E%3Cpath d='M49 51 L32 13' stroke='%23ff7d55' stroke-width='10.5'/%3E%3C/g%3E%3C/svg%3E");
  --aria-spark-img: var(--aria-spark-light);
}
html[data-theme="dark"] {
  --aria-blue: #3d95ff;
  --aria-coral: #ff7d55;
  --aria-tile: #16161c;
  --aria-tile-edge: rgba(255, 255, 255, 0.1);
  --aria-spark-img: var(--aria-spark-dark);
}

/* ---- The mark ------------------------------------------------------------ */
.aria-logo { display: inline-block; flex: none; width: var(--aria-logo-size, 36px); height: var(--aria-logo-size, 36px); line-height: 0; }
.aria-logo > img, .aria-logo > svg { display: block; width: 100%; height: 100%; }
.aria-mark { overflow: visible; }
.aria-mark .m-tile { fill: var(--aria-tile); stroke: var(--aria-tile-edge); stroke-width: 1.5; }
.aria-mark .m-l, .aria-mark .m-gap, .aria-mark .m-r { fill: none; stroke-linecap: round; stroke-width: 10.5; }
.aria-mark .m-l { stroke: var(--aria-blue); }
.aria-mark .m-gap { stroke: var(--aria-tile); stroke-width: 13; }
.aria-mark .m-r { stroke: var(--aria-coral); }
.aria-mark .m-dot { fill: var(--aria-dot); transform-box: fill-box; transform-origin: 50% 50%; }

/* First visit in a session: the pages draw up from the desk, then the dot lands. */
.aria-mark.is-drawing .m-l, .aria-mark.is-drawing .m-gap, .aria-mark.is-drawing .m-r { stroke-dasharray: 100; animation: aria-draw 0.7s var(--aria-ease) both; }
.aria-mark.is-drawing .m-gap, .aria-mark.is-drawing .m-r { animation-delay: 0.14s; }
.aria-mark.is-drawing .m-dot { animation: aria-land 0.5s 0.62s var(--aria-spring) both; }
@keyframes aria-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes aria-land { from { transform: translateY(-14px) scale(0.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* Pointing at the logo makes the dot hop. */
.aria-lockup:hover .aria-mark .m-dot, .aria-logo:hover .aria-mark .m-dot { animation: aria-hop 0.6s var(--aria-spring); }
@keyframes aria-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-7px); } 70% { transform: translateY(1px) scale(1.08, 0.92); } }

/* Logo and name together, top left of every app screen. */
.aria-lockup { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: inherit; text-decoration: none; }
.aria-lockup:focus-visible { outline: 2px solid var(--aria-blue); outline-offset: 4px; border-radius: 12px; }
.aria-word { display: block; min-width: 0; font: 700 20px/1 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -0.035em; white-space: nowrap; }
/* Beats page rules like ".edu-brand span" that would shrink the name. */
.aria-lockup > .aria-word { font-size: 20px; color: inherit; }
.aria-word small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; font: 500 12.5px/1.2 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0; color: var(--ag-text-3, #6f6f6f); }

/* ---- The mark in place of the old asterisk ------------------------------- */
.ag-spark { border-radius: 28%; }
.ag-spark > i { display: none !important; }
.ag-spark::before { content: ""; position: absolute; inset: 0; background: var(--aria-spark-img) center / 100% 100% no-repeat; }
.ag-spark::after { content: ""; position: absolute; left: 50%; top: 67.2%; width: 15.6%; height: 15.6%; margin: -7.8% 0 0 -7.8%; border-radius: 50%; background: var(--aria-dot); }
.ag-spark.is-live::after, .ag-thinking .ag-spark::after { animation: aria-think 1.05s ease-in-out infinite; }
@keyframes aria-think { 0%, 100% { transform: translateY(-0.05em); } 50% { transform: translateY(0.1em) scale(1.12, 0.88); } }

/* ---- A colour for every place in the menu -------------------------------- */
:root[data-theme] #sidebar :is(.side-link, .es-nav-link) > .material-symbols-outlined { color: var(--ic, currentColor) !important; transition: transform 0.35s var(--aria-spring); }
:root[data-theme] #sidebar :is(.side-link, .es-nav-link):hover > .material-symbols-outlined { transform: scale(1.12) rotate(-6deg); }
:root[data-theme] #sidebar :is(.side-link.is-active, .es-nav-link.is-current) > .material-symbols-outlined { font-variation-settings: 'wght' 450, 'FILL' 1; }
:root[data-theme] #nav-hub, :root[data-theme] #sidebar a[href="student.html"] { --ic: var(--hue-blue); }
:root[data-theme] #nav-chat, :root[data-theme] #sidebar a[href="student.html?chat=true"] { --ic: var(--aria-coral); }
:root[data-theme] #sidebar a[href="resources.html"] { --ic: var(--hue-green); }
:root[data-theme] #sidebar a[href="exam-studio.html"] { --ic: var(--hue-red); }
:root[data-theme] #sidebar a[href="study-room.html"] { --ic: var(--hue-purple); }
:root[data-theme] #sidebar a[onclick*="promptJoinClassroom"] { --ic: var(--hue-teal); }
:root[data-theme] #sidebar a[href="educator.html"] { --ic: var(--hue-amber); }

/* ---- Moving between screens --------------------------------------------- */
@view-transition { navigation: auto; types: aria-nav; }
html:active-view-transition-type(aria-nav) #sidebar { view-transition-name: aria-side; }
html:active-view-transition-type(aria-nav) .ag-tabbar { view-transition-name: aria-tabbar; }
html:active-view-transition-type(aria-nav) #sidebar .side-link.is-active,
html:active-view-transition-type(aria-nav) #sidebar .es-nav-link.is-current { view-transition-name: aria-pill; }
html:active-view-transition-type(aria-nav)::view-transition-old(root) { animation: aria-leave 0.2s ease both; }
html:active-view-transition-type(aria-nav)::view-transition-new(root) { animation: aria-enter 0.42s var(--aria-ease) both; }
html:active-view-transition-type(aria-nav)::view-transition-old(aria-side),
html:active-view-transition-type(aria-nav)::view-transition-new(aria-side),
html:active-view-transition-type(aria-nav)::view-transition-old(aria-tabbar),
html:active-view-transition-type(aria-nav)::view-transition-new(aria-tabbar) { animation: none; }
html:active-view-transition-type(aria-nav)::view-transition-group(aria-pill) { animation-duration: 0.45s; animation-timing-function: var(--aria-ease); }
@keyframes aria-leave { to { opacity: 0; } }
@keyframes aria-enter { from { opacity: 0; transform: translateY(12px); } }

/* Sections arrive one after another as the page opens. */
.aria-rise { animation: aria-rise 0.6s var(--aria-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes aria-rise { from { opacity: 0.001; transform: translateY(14px); } }

/* Everything pressable gives a little under the finger. */
:root[data-theme] .ag-btn, :root[data-theme] .dash-pill, :root[data-theme] .side-link, :root[data-theme] .chat-chip, :root[data-theme] .mono-send { transition-property: transform, background-color, border-color, color, opacity; transition-duration: 0.2s; transition-timing-function: var(--aria-ease); }
:root[data-theme] .ag-btn:active, :root[data-theme] .dash-pill:active, :root[data-theme] .side-link:active, :root[data-theme] .chat-chip:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .aria-mark .m-l, .aria-mark .m-gap, .aria-mark .m-r, .aria-mark .m-dot, .ag-spark::after, .aria-rise { animation: none !important; }
  :root[data-theme] .ag-btn:active, :root[data-theme] .dash-pill:active, :root[data-theme] .side-link:active, :root[data-theme] .chat-chip:active { transform: none; }
}