/* ══════════════════════════════════════════════════════════════════════
   Evicue — foundation
   Tokens, reset, typography, application shell, and primitives.
   ══════════════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────────────── */

:root {
  --brand-blue: #4f97ed;
  --brand-navy: #021930;
  --paper: #fafaf8;
  --surface: #ffffff;
  --surface-2: #f3f4f7;
  --surface-3: #eaecf1;
  --ink: #101f33;
  --ink-2: #3a4a60;
  --ink-3: #6c7b8e;
  --ink-4: #929dad;
  --rule: #e4e7ec;
  --rule-2: #cfd5de;
  --blue: #14549c;
  --blue-2: #1d6bc4;
  --blue-deep: #0d3a6b;
  --blue-tint: #edf3fb;
  --blue-tint-2: #dce8f7;
  --green: #126640;
  --green-tint: #e6f3ec;
  --red: #9e2f24;
  --red-tint: #fbecea;
  --amber: #8a6212;
  --amber-tint: #fbf2df;

  --hl-yellow: rgba(250, 204, 21, .38);
  --hl-blue: rgba(59, 130, 246, .24);
  --hl-green: rgba(34, 197, 94, .28);
  --hl-pink: rgba(236, 72, 153, .22);

  --shadow-1: 0 1px 2px rgba(16, 31, 51, .05);
  --shadow-2: 0 4px 14px -4px rgba(16, 31, 51, .14), 0 1px 3px rgba(16, 31, 51, .06);
  --shadow-3: 0 18px 48px -12px rgba(16, 31, 51, .28), 0 2px 8px rgba(16, 31, 51, .08);

  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  --prose: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --rail-w: 226px;
  --topbar-h: 58px;
  --measure: 74ch;
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;
  --ease: cubic-bezier(.32, .72, .32, 1);
  --t: 150ms var(--ease);
}

[data-theme="dark"] {
  --paper: #0c1218;
  --surface: #121a24;
  --surface-2: #18222e;
  --surface-3: #202c3a;
  --ink: #e9eef5;
  --ink-2: #b3c0d0;
  --ink-3: #8493a6;
  --ink-4: #66748a;
  --rule: #24313f;
  --rule-2: #334355;
  --blue: #67a6ee;
  --blue-2: #8cbef5;
  --blue-deep: #a9d0fa;
  --blue-tint: #142640;
  --blue-tint-2: #1b3352;
  --green: #5dbf8f;
  --green-tint: #12291f;
  --red: #e88478;
  --red-tint: #2b1815;
  --amber: #d8ab56;
  --amber-tint: #2a2011;

  --hl-yellow: rgba(250, 204, 21, .30);
  --hl-blue: rgba(96, 165, 250, .32);
  --hl-green: rgba(52, 211, 153, .26);
  --hl-pink: rgba(244, 114, 182, .28);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 4px 14px -4px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-3: 0 18px 48px -12px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4);
}

/* ── reset ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; height: 100%; overflow: hidden; }

body {
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; }
[hidden] { display: none !important; }

::selection { background: var(--blue-tint-2); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--blue-2);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── scrollbars ─────────────────────────────────────────────────────── */

.scroll { overflow-y: auto; overscroll-behavior: contain; }
.scroll::-webkit-scrollbar { width: 11px; height: 11px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb {
  background: var(--rule-2);
  border: 3px solid var(--paper);
  border-radius: 99px;
}
.scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ── typography helpers ─────────────────────────────────────────────── */

.label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.prose { font-family: var(--prose); }
.h1 { font-size: 25px; font-weight: 660; letter-spacing: -.021em; }
.h2 { font-size: 18px; font-weight: 640; letter-spacing: -.013em; }
.h3 { font-size: 14.5px; font-weight: 640; letter-spacing: -.006em; }
.sm { font-size: 13px; }
.xs { font-size: 12px; }

/* ── boot & noscript ────────────────────────────────────────────────── */

.boot {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--paper);
}
.brand-art { display:block; width:138px; aspect-ratio:1170.51 / 268.97; flex:none; }
.brand-art img { width:100%; height:100%; object-fit:contain; }
.brand-art__dark { display:none; }
[data-theme="dark"] .brand-art__light { display:none; }
[data-theme="dark"] .brand-art__dark { display:block; }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .brand-art__light { display:none; }
  [data-theme="auto"] .brand-art__dark { display:block; }
}
.boot__mark { width:168px; }
.boot__text { font-size: 13px; color: var(--ink-3); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
.boot--gone { opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }

.noscript {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-content: center; padding: 40px;
  background: var(--paper); text-align: center; font-size: 15px;
}

/* ── shell ──────────────────────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  /* An implicit auto row would size to content and push the shell past the
     viewport, letting the document itself scroll. Pin it instead. */
  grid-template-rows: minmax(0, 1fr);
  transition: grid-template-columns .22s var(--ease);
  height: 100vh; height: 100dvh;
  overflow: hidden;
}

/* The shell's children are placed explicitly rather than left to flow. An
   overlay that claims a cell — the reading sheet does — would otherwise push
   whatever auto-placement had put there into a row of its own. */
.rail { grid-column: 1; grid-row: 1; }

.main {
  grid-column: 2; grid-row: 1;
  display: grid;
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: var(--paper);
}

.view {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-width: 0;
  scrollbar-gutter: stable;
}
.view::-webkit-scrollbar { width: 12px; }
.view::-webkit-scrollbar-track { background: transparent; }
.view::-webkit-scrollbar-thumb {
  background: var(--rule-2); border: 3.5px solid var(--paper); border-radius: 99px;
}
.view::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
.view:focus { outline: none; }
/* Views that manage their own internal scrolling (runner, notebook, reader). */
.view--fixed { overflow: hidden; }

.app--panel { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--panel-w, 380px); }

/* Too narrow to give the panel a column of its own: slide it over the page
   instead of squeezing the question into nothing. */
@media (max-width: 1040px) {
  .app--panel { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .app--panel aside.panel {
    position: fixed; inset: 0 0 0 auto; z-index: 40;
    width: min(var(--panel-w, 380px), 92vw);
    box-shadow: var(--shadow-3);
    animation: panel-in .22s var(--ease);
  }
  .app--panel .panel__grip { display: none; }
}
@keyframes panel-in { from { transform: translateX(14px); opacity: .6 } }

@media (max-width: 1000px) {
  .app--panel aside.panel { top: 0; }
}

.wrap { max-width: 1180px; padding: 26px 32px 72px; margin: 0 auto; }
.wrap--wide { max-width: 1440px; }
.wrap--narrow { max-width: 860px; }

/* ── rail ───────────────────────────────────────────────────────────── */

.rail {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--rule);
  padding: 14px 12px 12px;
  overflow-y: auto;
}

.rail__brand {
  display:grid; justify-items:start; gap:6px; flex:none;
  padding:8px 8px 18px;
}
.rail__descriptor { padding-left:30px; font-size:11px; line-height:1.2; font-weight:500; color:var(--ink-3); }

.rail__group { display: grid; gap: 1px; margin-bottom: 16px; }
.rail__label { padding: 0 8px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }

.rail__link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: var(--r);
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  transition: background var(--t), color var(--t);
}
.rail__link:hover { background: var(--surface-2); color: var(--ink); }
.rail__link[aria-current="page"] {
  background: var(--blue-tint); color: var(--blue);
  font-weight: 600;
}
[data-theme="dark"] .rail__link[aria-current="page"] { color: var(--blue-2); }
.rail__link--quiet { font-size: 13px; color: var(--ink-3); }

/* Mid-question these open a tab of their own. The mark appears only then, so
   the rail is not permanently decorated with something usually untrue. */
.rail__link--away::after {
  content: ""; margin-left: auto; width: 11px; height: 11px; flex: none;
  opacity: 0; background: currentColor;
  -webkit-mask: var(--ico-away) center / 11px no-repeat;
  mask: var(--ico-away) center / 11px no-repeat;
  --ico-away: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5H5v14h14v-5'/%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-8 8'/%3E%3C/svg%3E");
  transition: opacity var(--t);
}
.rail__link--away:hover::after, .rail__link--away:focus-visible::after { opacity: .55; }
.rail__link--away .rail__count { margin-left: 0; }

.rail__ico {
  width: 16px; height: 16px; flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center / 16px no-repeat;
  mask: var(--ico) center / 16px no-repeat;
  opacity: .82;
}
.rail__link[aria-current="page"] .rail__ico { opacity: 1; }

.rail__count {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.rail__count:empty { display: none; }

.rail__spacer { flex: 1; min-height: 12px; }
.rail__foot { border-top: 1px solid var(--rule); padding-top: 10px; display: grid; gap: 4px; }

.rail__progress { padding: 4px 8px 10px; display: grid; gap: 6px; }
.rail__progress .label { font-size: 10px; }
.rail__progress b { font-size: 12.5px; font-weight: 600; }

[data-ico="home"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3.4l9 7.2'/%3E%3Cpath d='M5.6 9.6V20.6h12.8V9.6'/%3E%3C/svg%3E"); }
[data-ico="plus"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
[data-ico="list"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5h16M4 12h16M4 17.5h11'/%3E%3C/svg%3E"); }
[data-ico="book"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h6a3 3 0 0 1 3 3v12a2.4 2.4 0 0 0-2.4-2.4H4z'/%3E%3Cpath d='M20 4.5h-6a3 3 0 0 0-3 3v12a2.4 2.4 0 0 1 2.4-2.4H20z'/%3E%3C/svg%3E"); }
[data-ico="mark"]   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 4.5h13v15l-6.5-4.2-6.5 4.2z'/%3E%3C/svg%3E"); }
/* Spines on a shelf — a book set, distinct from the single open book Notes uses. */
[data-ico="library"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='4.6' height='16' rx='1'/%3E%3Crect x='10.1' y='4' width='4.6' height='16' rx='1'/%3E%3Cpath d='m17.2 5.2 3.3.9-3.4 13.4-2.6-.7z'/%3E%3C/svg%3E"); }
[data-ico="chart"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4'/%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M8 20v-6M12.7 20V8.5M17.3 20v-9'/%3E%3C/svg%3E"); }
[data-ico="clock"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 7.4V12l3.2 2'/%3E%3C/svg%3E"); }
[data-ico="gear"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3Cpath d='M19.2 14.6a1.6 1.6 0 0 0 .32 1.76l.06.06a1.9 1.9 0 1 1-2.7 2.7l-.06-.06a1.6 1.6 0 0 0-1.76-.32 1.6 1.6 0 0 0-.97 1.47V20.4a1.9 1.9 0 1 1-3.8 0v-.1a1.6 1.6 0 0 0-1.05-1.46 1.6 1.6 0 0 0-1.76.32l-.06.06a1.9 1.9 0 1 1-2.7-2.7l.06-.06a1.6 1.6 0 0 0 .32-1.76 1.6 1.6 0 0 0-1.47-.97H3.6a1.9 1.9 0 1 1 0-3.8h.1a1.6 1.6 0 0 0 1.46-1.05 1.6 1.6 0 0 0-.32-1.76l-.06-.06a1.9 1.9 0 1 1 2.7-2.7l.06.06a1.6 1.6 0 0 0 1.76.32h.08A1.6 1.6 0 0 0 10.3 3.7V3.6a1.9 1.9 0 1 1 3.8 0v.1a1.6 1.6 0 0 0 .97 1.47 1.6 1.6 0 0 0 1.76-.32l.06-.06a1.9 1.9 0 1 1 2.7 2.7l-.06.06a1.6 1.6 0 0 0-.32 1.76v.08a1.6 1.6 0 0 0 1.47.97h.1a1.9 1.9 0 1 1 0 3.8h-.1a1.6 1.6 0 0 0-1.47.97z'/%3E%3C/svg%3E"); }

/* ── topbar ─────────────────────────────────────────────────────────── */

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 32px;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  min-width: 0;
}
.topbar__title { display: grid; gap: 1px; min-width: 0; }
.topbar__title h1 {
  font-size: 16px; font-weight: 640; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__title p { font-size: 12px; color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

/* ── buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 13px;
  border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 550; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t), opacity var(--t);
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-4); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .42; pointer-events: none; }

.btn--primary {
  background:var(--brand-blue); border-color:var(--brand-blue); color:var(--brand-navy);
}
.btn--primary:hover { background:color-mix(in srgb,var(--brand-blue) 88%,white); border-color:color-mix(in srgb,var(--brand-blue) 88%,white); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--ink); }

.btn--danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 34%, var(--rule)); }
.btn--danger:hover { background: var(--red-tint); border-color: var(--red); }

.btn--lg { height: 38px; padding: 0 18px; font-size: 14px; }
.btn--sm { height: 27px; padding: 0 9px; font-size: 12.5px; }
.btn--block { width: 100%; }
.btn--icon { width: 32px; padding: 0; }
.btn--icon.btn--sm { width: 27px; }

.btn__ico {
  width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: var(--ico) center / 15px no-repeat;
  mask: var(--ico) center / 15px no-repeat;
}

/* ── form controls ──────────────────────────────────────────────────── */

.field { display: grid; gap: 6px; }
.field > .label { margin-bottom: -1px; }
.field__hint { font-size: 11.5px; color: var(--ink-4); }

.input, .select, .textarea {
  width: 100%; height: 32px; padding: 0 10px;
  border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font-size: 13.5px;
  transition: border-color var(--t), box-shadow var(--t);
}
.textarea { height: auto; padding: 9px 11px; line-height: 1.55; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blue-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-2) 18%, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }

.select {
  appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236c7b8e' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m3 4.6 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 12px;
}

.search {
  position: relative; display: flex; align-items: center;
}
.search .input { padding-left: 30px; }
.search::before {
  content: ""; position: absolute; left: 10px; width: 14px; height: 14px;
  background: var(--ink-4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.4'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.4'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  pointer-events: none;
}

.check {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13.5px; user-select: none;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 16px; height: 16px; flex: none; border-radius: var(--r-sm);
  border: 1.5px solid var(--rule-2); background: var(--surface);
  display: grid; place-content: center;
  transition: background var(--t), border-color var(--t);
}
.check__box::after {
  content: ""; width: 10px; height: 10px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.3 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 10px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.3 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 10px no-repeat;
  transform: scale(0); transition: transform var(--t);
}
.check:hover .check__box { border-color: var(--ink-4); }
.check input:checked + .check__box { background: var(--blue); border-color: var(--blue); }
.check input:checked + .check__box::after { transform: scale(1); }
[data-theme="dark"] .check input:checked + .check__box::after { background: #08121e; }
.check input:focus-visible + .check__box {
  outline: 2px solid var(--blue-2); outline-offset: 2px;
}

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 34px; height: 20px; border-radius: 99px; flex: none;
  background: var(--rule-2); position: relative;
  transition: background var(--t);
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--t);
}
.switch input:checked + .switch__track { background: var(--blue); }
.switch input:checked + .switch__track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--blue-2); outline-offset: 2px; }

.range { width: 100%; appearance: none; height: 20px; background: none; cursor: pointer; }
.range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px;
  background: linear-gradient(to right, var(--blue) var(--fill, 50%), var(--surface-3) var(--fill, 50%));
}
.range::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; border-radius: 50%; margin-top: -6px;
  background: var(--surface); border: 1.5px solid var(--blue);
  box-shadow: var(--shadow-1); transition: transform var(--t);
}
.range::-webkit-slider-thumb:hover { transform: scale(1.14); }
.range::-moz-range-track { height: 4px; border-radius: 99px; background: var(--surface-3); }
.range::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--blue); }
.range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--blue);
}

/* segmented control */
.seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--r); flex: none;
}
.seg button {
  padding: 0 12px; height: 26px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 550; color: var(--ink-3);
  transition: background var(--t), color var(--t);
  white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-1); font-weight: 600;
}
.seg--block { display: flex; }
.seg--block button { flex: 1; }

/* chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--rule-2); border-radius: 99px;
  background: var(--surface); color: var(--ink-2);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.chip:hover { border-color: var(--ink-4); color: var(--ink); }
.chip:disabled { opacity: .45; pointer-events: none; }
.chip[aria-pressed="true"] {
  background: var(--blue-tint); border-color: var(--blue-2); color: var(--blue);
  font-weight: 600;
}
[data-theme="dark"] .chip[aria-pressed="true"] { color: var(--blue-2); }
.chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip__n { font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__n { color: inherit; opacity: .75; }

/* ── surfaces ───────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.card--pad { padding: 18px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.panel__head h2 { font-size: 13.5px; font-weight: 640; letter-spacing: -.005em; }
.panel__head .label { margin-right: auto; }
.panel__head > *:first-child:not(.label) { margin-right: auto; }
.panel__act { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.panel__body { padding: 16px; }
.panel__body--flush { padding: 0; }

.divider { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ── badges & tags ──────────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 7px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  background: var(--surface-2); color: var(--ink-2);
  white-space: nowrap;
}
.badge--blue { background: var(--blue-tint); color: var(--blue); }
.badge--green { background: var(--green-tint); color: var(--green); }
.badge--red { background: var(--red-tint); color: var(--red); }
.badge--amber { background: var(--amber-tint); color: var(--amber); }
.badge--outline { background: transparent; border: 1px solid var(--rule-2); color: var(--ink-3); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }

.kbd {
  display: inline-grid; place-content: center; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: var(--r-sm);
  border: 1px solid var(--rule-2); border-bottom-width: 2px;
  background: var(--surface); color: var(--ink-3);
  font-family: var(--ui); font-size: 10.5px; font-weight: 600;
}

/* difficulty pips */
.diff { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.diff__pips { display: inline-flex; gap: 2px; }
.diff__pip { width: 4px; height: 11px; border-radius: 1px; background: var(--surface-3); }
.diff__pip.on { background: var(--lvl); }
.diff__name { font-size: 11.5px; font-weight: 550; color: var(--ink-3); }
[data-lvl="foundational"] { --lvl: #3f8f5f; }
[data-lvl="standard"] { --lvl: #3c7ec4; }
[data-lvl="challenging"] { --lvl: #c08a2a; }
[data-lvl="rigorous"] { --lvl: #b45445; }

/* ── data table ─────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
.dtable { font-size: 13px; }
.dtable th {
  position: sticky; top: 0; z-index: 1;
  padding: 9px 12px; text-align: left;
  font-size: 10.5px; font-weight: 700; letter-spacing: .075em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--surface); border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.dtable td {
  padding: 10px 12px; border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.dtable tbody tr { transition: background var(--t); }
.dtable tbody tr:hover { background: var(--surface-2); }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable .r { text-align: right; }
.dtable .c { text-align: center; }
.dtable th.sortable { cursor: pointer; user-select: none; }
.dtable th.sortable:hover { color: var(--ink); }
.dtable th[aria-sort]::after {
  content: "↑"; margin-left: 4px; font-size: 10px; opacity: .8;
}
.dtable th[aria-sort="descending"]::after { content: "↓"; }

/* ── meters ─────────────────────────────────────────────────────────── */

.meter {
  height: 6px; border-radius: 99px; background: var(--surface-3);
  overflow: hidden; position: relative;
}
.meter__fill {
  height: 100%; border-radius: 99px; background: var(--blue);
  transition: width .45s var(--ease);
}
.meter--sm { height: 4px; }
.meter--tall { height: 9px; }

.stat { display: grid; gap: 3px; }
.stat__v {
  font-size: 26px; font-weight: 620; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat__k { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.stat__d { font-size: 11.5px; font-weight: 600; }
.stat__d--up { color: var(--green); }
.stat__d--down { color: var(--red); }

/* ── empty state ────────────────────────────────────────────────────── */

.empty {
  display: grid; place-items: center; gap: 10px;
  padding: 56px 24px; text-align: center;
}
/* Inside a panel the surrounding chrome already gives the state room. */
.panel__body > .empty, .panel > .empty { padding: 30px 20px; }
.empty__mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--rule);
  display: grid; place-content: center; color: var(--ink-4);
  font-size: 18px; font-weight: 600;
}
.empty h3 { font-size: 14.5px; font-weight: 620; }
.empty p { font-size: 13px; color: var(--ink-3); max-width: 42ch; }

/* ── toasts ─────────────────────────────────────────────────────────── */

.overlays { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.overlays > * { pointer-events: auto; }

.toasts {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: grid; gap: 8px; justify-items: center; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 99px;
  background: var(--ink); color: var(--paper);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-3);
  animation: toast-in .28s var(--ease);
  pointer-events: auto;
}
.toast--out { animation: toast-out .22s var(--ease) forwards; }
.toast b { font-weight: 640; }
.toast button {
  color: var(--paper); opacity: .7; font-size: 12.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.toast button:hover { opacity: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97) } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.97) } }

/* ── modal ──────────────────────────────────────────────────────────── */

.modal {
  position: absolute; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  backdrop-filter: blur(3px);
  animation: fade .18s var(--ease);
}
@keyframes fade { from { opacity: 0 } }
.modal__box {
  width: min(520px, 100%); max-height: 86vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; box-shadow: var(--shadow-3);
  animation: pop .22s var(--ease);
}
.modal__box--wide { width: min(760px, 100%); }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(8px) } }
.modal__head { padding: 18px 20px 0; display: grid; gap: 4px; }
.modal__head h2 { font-size: 16px; font-weight: 640; letter-spacing: -.015em; }
.modal__head p { font-size: 13px; color: var(--ink-3); }
.modal__body { padding: 16px 20px; display: grid; gap: 14px; }
.modal__foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid var(--rule);
  background: var(--surface-2);
  border-radius: 0 0 12px 12px;
}

/* ── command palette ────────────────────────────────────────────────── */

.palette {
  position: absolute; inset: 0; z-index: 70;
  display: grid; justify-items: center; align-content: start;
  padding: 12vh 24px 24px;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  backdrop-filter: blur(3px);
  animation: fade .16s var(--ease);
}
.palette__box {
  width: min(600px, 100%);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; box-shadow: var(--shadow-3); overflow: hidden;
  animation: pop .2s var(--ease);
}
.palette__input {
  width: 100%; height: 48px; padding: 0 18px; border: 0;
  background: none; font-size: 15px; color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.palette__input:focus { outline: none; }
.palette__list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.palette__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px; border-radius: var(--r); text-align: left;
  font-size: 13.5px; color: var(--ink-2);
}
.palette__item[aria-selected="true"] { background: var(--blue-tint); color: var(--blue); }
.palette__item small { margin-left: auto; font-size: 11.5px; color: var(--ink-4); }
.palette__item[aria-selected="true"] small { color: inherit; opacity: .75; }
.palette__sec { padding: 10px 12px 4px; }

/* ── selection popover ──────────────────────────────────────────────── */

.sel-pop {
  position: absolute; z-index: 65;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--ink); border-radius: 8px;
  box-shadow: var(--shadow-3);
  animation: pop .14s var(--ease);
}
.sel-pop::after {
  content: ""; position: absolute; bottom: -5px; left: var(--arrow, 50%);
  margin-left: -5px; width: 10px; height: 10px;
  background: var(--ink); transform: rotate(45deg); border-radius: 1px;
}
.sel-pop__sw {
  width: 24px; height: 24px; border-radius: 5px; border: 1.5px solid transparent;
  transition: transform var(--t), border-color var(--t);
}
.sel-pop__sw:hover { transform: scale(1.12); border-color: rgba(255,255,255,.5); }
.sel-pop__btn {
  height: 24px; padding: 0 9px; border-radius: 5px;
  color: #fff; font-size: 12px; font-weight: 550; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.sel-pop__btn:hover { background: rgba(255,255,255,.14); }
.sel-pop__sep { width: 1px; height: 16px; background: rgba(255,255,255,.2); margin: 0 3px; }

/* ── highlights ─────────────────────────────────────────────────────── */

mark.hl {
  background: var(--hl-yellow); color: inherit;
  border-radius: 2px; padding: .06em 0;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  cursor: pointer;
  transition: filter var(--t);
}
mark.hl:hover { filter: brightness(.94) saturate(1.2); }
[data-theme="dark"] mark.hl:hover { filter: brightness(1.25); }
mark.hl[data-c="yellow"] { background: var(--hl-yellow); }
mark.hl[data-c="blue"] { background: var(--hl-blue); }
mark.hl[data-c="green"] { background: var(--hl-green); }
mark.hl[data-c="pink"] { background: var(--hl-pink); }
mark.hl[data-note="1"] {
  border-bottom: 2px solid color-mix(in srgb, currentColor 34%, transparent);
}

/* ── utilities ──────────────────────────────────────────────────────── */

.row { display: flex; align-items: center; gap: 10px; }
.row--wrap { flex-wrap: wrap; }
.col { display: grid; gap: 10px; }
.push { margin-left: auto; }
.grow { flex: 1; min-width: 0; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack-2 { display: grid; gap: 2px; }
.stack-4 { display: grid; gap: 4px; }
.stack-6 { display: grid; gap: 6px; }
.stack-8 { display: grid; gap: 8px; }
.stack-12 { display: grid; gap: 12px; }
.stack-16 { display: grid; gap: 16px; }
.stack-24 { display: grid; gap: 24px; }

/* ── responsive shell ───────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .rail { grid-column: 1; grid-row: 1; }
  .main { grid-column: 1; grid-row: 2; }
  .rail {
    flex-direction: row; align-items: center; gap: 4px;
    border-right: 0; border-bottom: 1px solid var(--rule);
    padding: 8px 12px; overflow-x: auto; overflow-y: hidden;
  }
  .rail__brand { padding: 0 12px 0 0; }
  .rail__brand .brand-art { width:112px; }
  .rail__descriptor { display:none; }
  .rail__group { display: flex; margin: 0; gap: 2px; }
  .rail__label, .rail__progress, .rail__spacer { display: none; }
  .rail__foot { border: 0; padding: 0; display: flex; }
  .rail__link { white-space: nowrap; }
  .wrap { padding: 20px 18px 64px; }
  .topbar { padding: 0 18px; }
}

/* Below this width the title and its actions cannot share a row without the
   title collapsing to an ellipsis, so give each its own. */
@media (max-width: 760px) {
  .main { grid-template-rows: auto minmax(0, 1fr); }
  .topbar {
    flex-wrap: wrap; align-items: center;
    padding: 8px 16px; row-gap: 8px; min-height: var(--topbar-h);
  }
  .topbar__title { flex: 1 0 100%; }
  .topbar__title p { display: none; }
  .topbar__actions {
    margin-left: 0; width: 100%;
    overflow-x: auto; scrollbar-width: none;
  }
  .topbar__actions::-webkit-scrollbar { display: none; }
  .runner__inner { padding: 20px 18px 40px; }
  .runner__bar { padding: 8px 16px; }
  .runner__foot { padding: 10px 16px; }
}