@import url('./tokens.css');
@import url('./notes.css');

/* ==========================================================================
   RevisionHall — the workbench.

   A pale neutral canvas under the rail and every page; white paper for the
   things being worked on; navy ink; one marigold action per page; and a
   blue that only ever means "you can go here" or "you are here". Subjects
   are told apart by their emblems and tags, never by tinting the interface
   around them.
   ========================================================================== */

*{box-sizing:border-box}
html{scrollbar-gutter:stable;scroll-behavior:smooth}
body{margin:0;color:var(--text);background:var(--canvas);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.2;font-weight:600;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2rem,3vw,2.6rem);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.note-section__title{font-weight:600}
h2{font-size:1.3rem;letter-spacing:-.02em}
h3{font-size:1rem;letter-spacing:-.01em}
p{margin:0 0 1em}
svg.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon__solid{opacity:.1;fill:currentColor;stroke:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
button,input,select,textarea{border-radius:var(--radius-sm)}
input,select,textarea{min-width:0;max-width:100%;border:1px solid var(--hairline);background:var(--paper);color:var(--text);padding:9px 12px}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--faint)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:15px;top:-70px;z-index:100;background:var(--paper);color:var(--ink);padding:12px;border:2px solid var(--ink)}
.skip-link:focus{top:12px}

/* Buttons. Quiet and square by default; the marigold primary is the one
   thing on a page asking to be pressed. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--hairline-strong);border-radius:var(--radius-pill);background:var(--paper);color:var(--ink);padding:9px 18px;min-height:42px;font-weight:600;font-size:.875rem;line-height:1.2;transition:background-color var(--dur-press) var(--ease-out),border-color var(--dur-press) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.btn:hover{text-decoration:none;background:var(--canvas-deep);border-color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--cta);border-color:var(--cta-edge);color:var(--cta-ink)}
.btn--primary:hover{background:var(--cta-hover);border-color:var(--cta-edge)}
.btn[disabled],.btn[aria-busy=true]{opacity:.6;cursor:not-allowed;transform:none}
.btn .icon{width:18px;height:18px}
.text-link{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600}
.quiet{font-size:.875rem;color:var(--muted)}
.eyebrow{color:var(--muted);font-size:.8125rem;font-weight:500;margin:0 0 8px}
.pill{display:inline-flex;align-items:center;border-radius:var(--radius-pill);padding:2px 9px;font-size:.75rem;font-weight:550;white-space:nowrap;color:var(--muted);background:var(--canvas-deep)}
.pill.available{color:var(--ok);background:var(--ok-soft)}
.pill.draft{color:var(--warn);background:var(--warn-soft)}
.accent-violet{color:var(--accent-violet);background:var(--accent-violet-soft)}.accent-sky{color:var(--accent-sky);background:var(--accent-sky-soft)}.accent-teal{color:var(--accent-teal);background:var(--accent-teal-soft)}

/* Subject identity: a small mark showing the subject's logo (cubes, chip,
   atom) and a tag that carries it. A picture as well as a hue, so the three
   stay distinct in greyscale and for colour-blind readers. */
.mark{display:inline-block;width:16px;height:16px;flex-shrink:0;background:center/contain no-repeat}
.mark--mathematics{background-image:url(../img/subjects/mathematics.svg)}
.mark--computer-science{background-image:url(../img/subjects/computer-science.svg)}
.mark--physics{background-image:url(../img/subjects/physics.svg)}
.subject-tag .mark{width:14px;height:14px}
.rail-dot .mark{width:18px;height:18px}
.subject-tag{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-xs);padding:1px 7px;font-size:.75rem;font-weight:600;white-space:nowrap}
.subject-tag--mathematics{color:var(--subject-mathematics-ink);background:var(--subject-mathematics-soft)}
.subject-tag--computer-science{color:var(--subject-computer-science-ink);background:var(--subject-computer-science-soft)}
.subject-tag--physics{color:var(--subject-physics-ink);background:var(--subject-physics-soft)}

/* Emblems. Each subject's logo (cubes, chip, atom) is an image in its own
   hue with the site's black outline; it sizes to its container. */
.emblem{display:block;width:100%;height:auto;overflow:visible}

/* Section icons: Learn a light bulb, Practice a target, Reference an index
   card. Black line icons with one bright accent each, and a small movement
   on hover and keyboard focus (off under the reduced-motion rule). */
.section-icon .si-fill{stroke:none}
.section-icon--learn .si-glass{fill:var(--section-learn)}
.section-icon--learn .si-rays{stroke:var(--section-learn-ray);transform-box:fill-box;transform-origin:center}
.section-icon--practice .si-ring{fill:var(--section-practice-soft)}
.section-icon--practice .si-core,.section-icon--reference .si-body{fill:var(--paper)}
.section-icon--practice .si-bull{fill:var(--section-practice);transform-box:fill-box;transform-origin:center}
.section-icon--reference .si-strip{fill:var(--section-reference)}
.section-icon--reference .si-card{transition:transform var(--dur-control) var(--ease-out)}
@keyframes rh-bulb{0%{opacity:.25;transform:scale(.7)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes rh-bullseye{0%,100%{transform:scale(1)}45%{transform:scale(1.5)}}
:is(a,button):is(:hover,:focus-visible) .section-icon--learn .si-rays{animation:rh-bulb var(--dur-enter) var(--ease-out)}
:is(a,button):is(:hover,:focus-visible) .section-icon--practice .si-bull{animation:rh-bullseye var(--dur-enter) var(--ease-out)}
:is(a,button):is(:hover,:focus-visible) .section-icon--reference .si-card{transform:translateY(-1.5px)}
/* Rail icons: Home an archway whose doorway grows, All subjects catalogue
   tiles (one pale blue, the rest white) that pop in turn, Settings a gear
   that turns. */
.section-icon--home .si-arch{fill:var(--subject-mathematics-soft)}
.section-icon--home .si-doorway,.section-icon--settings .si-wheel{fill:var(--paper)}
.section-icon--home .si-door{transform-box:fill-box;transform-origin:50% 100%;transition:transform var(--dur-control) var(--ease-out)}
.section-icon .si-tile{fill:var(--paper);transform-box:fill-box;transform-origin:center}
.section-icon .si-tile--accent{fill:var(--subject-mathematics-soft)}
.section-icon .si-tile:nth-of-type(2){animation-delay:60ms}
.section-icon .si-tile:nth-of-type(3){animation-delay:120ms}
.section-icon .si-tile:nth-of-type(4){animation-delay:180ms}
.section-icon--settings .si-teeth{stroke-width:3.4;stroke-linecap:butt}
.section-icon--settings .si-hub{fill:var(--section-reference)}
.section-icon--settings .si-gear{transform-box:fill-box;transform-origin:center;transition:transform var(--dur-enter) var(--ease-out)}
@keyframes rh-tile{0%,100%{transform:scale(1)}45%{transform:scale(1.18)}}
:is(a,button):is(:hover,:focus-visible) .section-icon--home .si-door{transform:scale(1.14)}
:is(a,button):is(:hover,:focus-visible) .section-icon .si-tile{animation-name:rh-tile;animation-duration:var(--dur-enter);animation-timing-function:var(--ease-out);animation-fill-mode:backwards}
:is(a,button):is(:hover,:focus-visible) .section-icon--settings .si-gear{transform:rotate(45deg)}
/* On the selected (black) tab the outline turns white, so the pale fills
   step aside and the white lines and bright accents carry the icon. */
.subject-tab.is-active .section-icon--practice :is(.si-ring,.si-core),.subject-tab.is-active .section-icon--reference .si-body{fill:none}

/* Course badges (calculus, linear algebra, complex numbers): the course's
   notation on a pale subject tile. Courses without one show their subject
   logo at the same size. */
.course-icon{display:inline-block;width:24px;height:24px;flex-shrink:0}
.course-icon .ci-tile{fill:var(--subject-mathematics-soft)}
.course-icon .ci-glyph{fill:none;stroke:var(--subject-mathematics);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.course-icon .ci-mark{fill:var(--subject-mathematics)}
.course-icon .ci-dot{fill:var(--ink)}
.home-course .course-icon{width:26px;height:26px}
.rail-dot .course-icon{width:18px;height:18px}

/* Rail. It sits on the canvas; the current page is a sheet of paper. */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);background:var(--canvas);border-right:1px solid var(--hairline);padding:20px 12px 16px;z-index:40;display:flex;flex-direction:column;overflow-y:auto}
.rail-brand{display:flex;align-items:center;gap:9px;padding:0 8px 24px;font-family:var(--font-display);font-size:1.05rem;color:var(--ink);letter-spacing:-.03em}
.rail-brand img{width:26px;height:26px}
.rail-brand:hover{text-decoration:none}
/* The top of the rail holds the wordmark and main links on the left and
   the vertical account pill on the right, as one block. */
.rail-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:start;margin-bottom:4px}
.rail-top__main{min-width:0}
.rail-top .rail-brand{padding-bottom:18px}
.rail-account:empty{display:none}
.rail-link{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 10px;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--muted);font-size:.875rem;font-weight:500;margin:1px 0;transition:background-color var(--dur-press) var(--ease-out),color var(--dur-press) var(--ease-out)}
.rail-link .icon{width:18px;height:18px}
.rail-link:hover{background:var(--canvas-deep);text-decoration:none;color:var(--ink)}
.rail-link.current{background:var(--canvas-deep);color:var(--ink);font-weight:600}
.rail-label{font-size:.75rem;font-weight:600;color:var(--faint);margin:22px 10px 6px}
.rail-dot{display:grid;place-items:center;width:18px;height:18px;flex-shrink:0}
.current-dot{display:none}
.rail-sections{border-left:1px solid var(--hairline);margin:4px 0 10px 19px;padding-left:8px}
.rail-sections .rail-link{min-height:32px;padding:4px 10px;font-size:.8125rem}
.rail-sections .icon{width:16px;height:16px}
.rail-link.active-section{color:var(--ink);font-weight:600;background:var(--canvas-deep)}
.rail-bottom{margin-top:auto;padding-top:28px}
.rail-bottom p{display:none}
.rail-close{display:none}
/* The page column is a full-height stack, so the footer always sits at the
   bottom of the window on short pages instead of floating above a gap. */
.app__layout{margin-left:var(--rail);min-width:0;display:flex;flex-direction:column;min-height:100vh}
.topbar{height:var(--topbar);display:flex;align-items:center;gap:16px;padding:0 20px;border-bottom:1px solid var(--hairline);background:var(--canvas);position:relative;z-index:20}
.topbar-context{font-size:.8125rem;color:var(--muted);white-space:nowrap}
.search-wrap{max-width:330px;flex:1;position:relative;margin-left:auto}
.search-wrap input{width:100%;height:36px;font-size:.8125rem;padding-right:40px}
.search-wrap kbd{position:absolute;right:12px;top:8px;color:var(--faint);font-family:inherit;font-size:.75rem;border:1px solid var(--hairline);padding:0 5px;border-radius:var(--radius-xs);pointer-events:none}
.device-label{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--muted);white-space:nowrap}
.device-label .icon{width:15px;height:15px}
.menu-toggle{display:none}
.search-results{position:absolute;top:44px;right:0;width:380px;max-width:85vw;max-height:400px;overflow:auto;background:var(--paper);border:1px solid var(--hairline);box-shadow:var(--shadow-md);border-radius:var(--radius-lg);padding:6px;z-index:50}
.search-results a{display:block;padding:9px 12px;border-radius:var(--radius-sm);color:var(--ink);font-size:.875rem}
.search-results a:hover,.search-results a[aria-selected=true]{background:var(--accent-tint);text-decoration:none}
.search-results small{display:block;color:var(--muted);font-size:.75rem}
.search-results p{padding:16px;font-size:.875rem;margin:0}

/* Page header: breadcrumb, a heavy title, the subject's emblem, and the
   section switcher. It sits straight on the canvas — no band behind it. */
.app__main{padding:var(--main-pad-top) var(--main-pad-x) 64px;flex:1 0 auto}
.app__inner{max-width:1240px;margin:0 auto}
.subject-head,.page-head{position:relative;margin:0 0 28px;padding:0}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.8125rem;margin:0 0 22px;color:var(--faint)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb [aria-current]{color:var(--ink);font-weight:500}
.subject-heading{display:flex;align-items:center;justify-content:space-between;gap:32px}
.subject-heading>div:first-child{min-width:0}
.page-subtitle{max-width:62ch;color:var(--muted);font-size:.9375rem;line-height:1.65;margin:12px 0 0}
.page-subtitle:empty{display:none}
#subject-emblem{flex-shrink:0;width:132px}
#subject-emblem:empty{display:none}
#subject-emblem .course-icon{display:block;width:100%;height:auto}
.subject-plate{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-lg);flex-shrink:0}
.subject-plate .icon{width:28px;height:28px}

/* The section switcher. Outlined segments with the current one filled in
   ink: the shape says "one of three", and it reads at a glance. */
.subject-tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}
.subject-tab{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:36px;background:transparent;border:2px solid var(--ink);border-radius:var(--radius-pill);padding:5px 16px 5px 12px;font-size:.875rem;font-weight:600;color:var(--ink);white-space:nowrap}
.subject-tab .icon{width:17px;height:17px}
.subject-tab:hover{background:var(--canvas-deep);text-decoration:none}
.subject-tab.is-active{background:var(--ink);color:var(--white)}

/* Lists of work sit on paper. */
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px}
.section-heading .eyebrow{margin-bottom:4px}
.section-heading h2{font-size:1.15rem}
.section-intro{font-size:.875rem;color:var(--muted);margin-bottom:18px}
.learn-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px}
.unit-outline{min-width:0}
.unit-list{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden}
.unit-list>*+*{border-top:1px solid var(--hairline-soft)}
.module-row{border-bottom:1px solid var(--hairline-soft)}
.module-row__head{display:flex;align-items:center;gap:16px;list-style:none;cursor:pointer;padding:18px 16px}
.module-row__head::-webkit-details-marker{display:none}
.module-row__head:hover .module-row__body strong{color:var(--accent)}
.module-row__body{display:block;flex:1;min-width:0}
.module-row__body strong{display:block;font-weight:600;color:var(--ink);font-size:1rem}
.module-row__meta{display:block;color:var(--faint);font-size:.75rem;margin-top:4px}
.chevron{color:var(--muted);transform:rotate(90deg);transition:transform .2s}
.module-row[open] .chevron{transform:rotate(-90deg)}
.module-row__panel{padding-left:29px}
.topic-row{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--text);font-size:.875rem}
.topic-row:hover{background:var(--accent-tint);text-decoration:none}
.topic-label{flex:1;min-width:0}
.topic-bullet{width:5px;height:5px;border-radius:50%;background:var(--faint);flex-shrink:0}
.row-evidence{font-size:.75rem;color:var(--muted)}
.topic-row>.icon{width:16px;height:16px;color:var(--faint)}
.unit-footer{padding:12px 16px 18px}
.study-summary{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:20px;height:fit-content}
.study-summary h2{font-size:1rem;margin:12px 0 8px}
.study-summary p{font-size:.8125rem;color:var(--muted);line-height:1.7}
.summary-icon{display:grid;place-items:center;width:36px;height:36px;background:var(--canvas-deep);color:var(--ink);border-radius:var(--radius-sm)}
.summary-note{border-top:1px solid var(--hairline-soft);padding-top:14px;margin-top:18px;display:flex;gap:9px;color:var(--muted);font-size:.75rem}
.summary-note .icon{width:16px;height:16px;margin-top:2px}

/* An empty section is a deliberate surface, not a gap. */
.empty-state{max-width:560px;margin:0 auto;text-align:center;padding:52px 24px 60px;display:flex;flex-direction:column;align-items:center}
.tab-panel>.empty-state,#content>.empty-state{max-width:none;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg)}
.empty-icon{display:grid;place-items:center;background:var(--canvas-deep);color:var(--ink);width:52px;height:52px;border-radius:var(--radius-lg);margin-bottom:18px}
.empty-icon .icon{width:26px;height:26px}
.empty-state h3{font-size:1.15rem;margin-bottom:10px}
.empty-state p{color:var(--muted);font-size:.9rem;max-width:46ch;line-height:1.7;margin-bottom:18px}
.workspace-footer{padding:18px var(--main-pad-x);color:var(--faint);border-top:1px solid var(--hairline);font-size:.75rem;display:flex;justify-content:space-between;gap:20px}

/* Subject picker: three tall cards, each tinted in its subject's pale hue,
   with the logo large and only the subject's name beneath it. The card is
   a link; its arrow button carries the subject's full hue. */
.subject-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.subject-card{position:relative;display:flex;flex-direction:column;min-height:clamp(380px,calc(100vh - 260px),640px);border:1px solid transparent;border-radius:var(--radius-lg);background:var(--paper);color:var(--ink);overflow:hidden;transition:border-color .15s}
.subject-card--mathematics{background:var(--subject-mathematics-soft)}
.subject-card--computer-science{background:var(--subject-computer-science-soft)}
.subject-card--physics{background:var(--subject-physics-soft)}
.subject-card:hover{text-decoration:none;border-color:var(--ink)}
.subject-grid .subject-card__art{display:grid;place-items:center;flex:1;padding:36px 28px 8px}
.subject-grid .subject-card__art .emblem{width:min(70%,230px)}
.subject-card__body{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 24px 24px}
.subject-card h3{font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.1;margin:0;letter-spacing:-.03em}
.subject-grid .card-arrow{position:static;display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border:1.5px solid var(--ink);border-radius:50%;color:#fff;transition:transform var(--dur-control) var(--ease-out)}
.subject-card--mathematics .card-arrow{background:var(--subject-mathematics)}
.subject-card--computer-science .card-arrow{background:var(--subject-computer-science)}
.subject-card--physics .card-arrow{background:var(--subject-physics)}
.subject-card:hover .card-arrow{transform:translateX(3px)}
@media(max-width:780px){.subject-grid .subject-card{min-height:250px}.subject-grid .subject-card__art{padding:24px 20px 0}.subject-grid .subject-card__art .emblem{width:128px}.subject-card__body{padding:16px 18px 18px}}
.card-meta{font-family:var(--font-mono);font-size:.75rem;color:var(--faint);margin-top:auto;padding-right:28px}
.card-arrow{position:absolute;right:18px;bottom:17px;color:var(--ink)}
.card-arrow .icon{width:18px;height:18px}

/* Reading. */
.reading-layout{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:42px}
.reading-content{min-width:0;max-width:78ch}
.reading-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.75rem;color:var(--muted);padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--hairline-soft)}
.reading-sidebar{min-width:0}
.toc{border-bottom:1px solid var(--hairline-soft);padding-bottom:16px;margin-bottom:20px}
.toc summary{font-size:.8125rem;font-weight:650;color:var(--ink);cursor:pointer;min-height:30px}
.toc nav{padding-top:12px}
.toc a{display:flex;gap:9px;color:var(--muted);font-size:.75rem;line-height:1.5;padding:8px;border-radius:var(--radius-sm)}
.toc a:hover,.toc a.current{color:var(--ink);background:var(--accent-tint);text-decoration:none}
.toc a span{color:var(--faint);font-size:.6875rem}
.related-material h3{font-size:.875rem;margin:20px 0 10px}
.related-material p{font-size:.75rem;color:var(--muted);margin-top:8px}
.related-material .text-link{font-size:.8125rem}
.note-section{scroll-margin-top:24px}
.note-steps__text,.note-sub,.note-callout__body{font-size:1rem;line-height:var(--note-leading)}
.note-math,.katex-display{overflow-x:auto;overflow-y:hidden;max-width:100%}
.prose{max-width:75ch}
.prose h2{margin:30px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--muted);line-height:1.8}
.storage-notice{position:fixed;bottom:16px;left:calc(var(--rail) + 16px);right:16px;z-index:60;max-width:650px;background:var(--warn-soft);color:var(--warn);padding:14px 18px;border:1px solid var(--warn);border-radius:var(--radius-lg);font-size:.875rem}

/* Motion. Entrances play once, when a page is first drawn: the page head
   and the first groups of content rise a few pixels into place, and small
   groups of cards follow each other by a beat. Long notes are never held
   back, and nothing replays when progress syncs in the background. */
@keyframes rh-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes rh-fade{from{opacity:0}to{opacity:1}}
@keyframes rh-pop{from{opacity:0;transform:translateY(var(--rise-sm)) scale(.98)}to{opacity:1;transform:none}}
.subject-head{animation:rh-rise var(--dur-enter) var(--ease-out) both}
.stagger>*{animation:rh-rise var(--dur-enter) var(--ease-out) both}
.stagger>:nth-child(2){animation-delay:var(--stagger)}
.stagger>:nth-child(3){animation-delay:calc(var(--stagger)*2)}
.stagger>:nth-child(4){animation-delay:calc(var(--stagger)*3)}
.stagger>:nth-child(5){animation-delay:calc(var(--stagger)*4)}
.stagger>:nth-child(n+6){animation-delay:calc(var(--stagger)*5)}
.tab-panel:not([hidden]){animation:rh-fade var(--dur-control) var(--ease-out)}
.topic-page .reading-content{animation:rh-fade var(--dur-enter) var(--ease-out) both}
.topic-row,.subject-tab{transition:background-color var(--dur-press) var(--ease-out),color var(--dur-press) var(--ease-out)}
.subject-card{transition:border-color var(--dur-control) var(--ease-out),transform var(--dur-control) var(--ease-out)}
.subject-card:hover{transform:translateY(-2px)}
.subject-card:active{transform:translateY(0)}

/* Tooltips, shown on hover and on keyboard focus alike. The accessible
   name lives on the control; the tooltip only repeats it for sight. */
.has-tip{position:relative}
.tip{position:absolute;z-index:70;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,var(--rise-sm));opacity:0;pointer-events:none;white-space:nowrap;background:var(--ink);color:var(--white);font-size:.75rem;font-weight:500;letter-spacing:0;line-height:1.3;padding:5px 9px;border-radius:var(--radius-xs);transition:opacity var(--dur-press) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.has-tip:hover>.tip,.has-tip:focus-visible>.tip{opacity:1;transform:translate(-50%,0)}
.tip--left{left:auto;right:calc(100% + 10px);bottom:auto;top:50%;transform:translate(var(--rise-sm),-50%)}
.has-tip:hover>.tip--left,.has-tip:focus-visible>.tip--left{transform:translate(0,-50%)}
/* Anchored to the control's right edge, for controls near the right side of
   the screen: a centred tooltip there would stick out past the viewport and,
   even while invisible, make the page scroll sideways on a phone. */
.tip--end{left:auto;right:0;transform:translateY(var(--rise-sm))}
.has-tip:hover>.tip--end,.has-tip:focus-visible>.tip--end{transform:translateY(0)}

@media(min-width:1500px){.app__main{--main-pad-x:48px}.learn-layout{gap:36px;grid-template-columns:minmax(0,1fr) 280px}.reading-layout{gap:65px;grid-template-columns:minmax(0,1fr) 260px}}
@media(max-width:1100px){.device-label{display:none}.learn-layout{grid-template-columns:minmax(0,1fr)}.study-summary{max-width:none}.reading-layout{grid-template-columns:minmax(0,1fr)}.reading-sidebar{order:-1}.reading-sidebar .toc[open] nav{max-height:190px;overflow:auto}.related-material{display:grid;grid-template-columns:1fr 1fr;gap:5px 20px}.related-material h3,.related-material p{display:none}.subject-grid{gap:12px}.subject-card__art .emblem{width:120px}#subject-emblem{width:104px}}
@media(max-width:780px){.rail{transform:translateX(-100%);width:272px;transition:transform .2s}.rail-open .rail{transform:translateX(0)}.rail-open .rail-close{display:block;position:absolute;right:10px;top:12px;background:transparent;border:0;font-size:1.5rem;color:var(--muted);padding:6px 10px}.rail__scrim{position:fixed;inset:0;background:rgba(10,34,70,.3);z-index:30;border:0;border-radius:0}.app__layout{margin-left:0}.menu-toggle{display:flex;align-items:center;justify-content:center;border:1px solid var(--hairline);background:var(--paper);min-height:36px;min-width:36px;color:var(--ink)}.topbar{padding:0 16px;gap:12px}.topbar-context{display:none}.search-wrap{max-width:none}.app__main{--main-pad-x:18px;--main-pad-top:22px}.breadcrumb{margin-bottom:16px}.subject-heading{gap:16px;align-items:flex-start}#subject-emblem{width:68px}.page-subtitle{font-size:.875rem}.subject-grid{grid-template-columns:1fr}.subject-card p{max-width:55ch}.module-row__head{gap:12px}.module-row__panel{padding-left:0}.topic-row{flex-wrap:wrap;gap:8px;padding:13px 12px}.topic-label{flex-basis:calc(100% - 30px)}.topic-row>.icon{margin-left:auto}.workspace-footer{flex-direction:column;gap:4px;padding:18px}.storage-notice{left:16px}.section-heading{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}