/* Sapient — color system v1
   Ivory backgrounds · Sapient Blue action · Kraft warm accent · Hanken Grotesk throughout
   (variable names retained from the prior system; values repointed to the brand palette:
    --ochre* slot = Sapient Blue / Blue Mist, --good* slot = Kraft) */

:root {
  --paper:        #FAFAF7;   /* Ivory Light — page background */
  --paper-deep:   #F0F0EB;   /* Ivory Medium — sidebar, recessed wells */
  --surface:      #FFFFFF;   /* raised card */
  --surface-2:    #FAFAF7;
  --ink:          #1E2227;   /* near-black, cool-neutral */
  --ink-2:        #565C63;   /* muted body */
  --ink-3:        #969CA3;   /* faint / metadata */
  --ink-4:        #C3C8CE;   /* hairline-ish text */
  --rule:         #E5E4DF;   /* Ivory Dark — hairline / divider */
  --rule-2:       #D6D5CE;   /* stronger rule */
  --ochre:        #256BC1;   /* Sapient Blue — buttons, links, progress, active */
  --ochre-ink:    #1E5BA8;   /* deeper blue for text/small elements */
  --ochre-soft:   #D4E4F7;   /* Blue Mist — hover, badges, selection */
  --ochre-soft-2: #E9F1FB;   /* lighter blue wash */
  --good:         #A66E40;   /* Kraft (deepened) — studied / streaks / celebration */
  --good-soft:    #F2E2D4;   /* Kraft wash */
  --ok:           #1F8A5B;   /* success / correct — harmonized green */
  --ok-soft:      #E2F1E9;   /* success wash */

  --serif: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

/* ---- base reset within artboards ---- */
.sap * { box-sizing: border-box; margin: 0; padding: 0; }
.sap {
  width: 100%; height: 100%;
  display: flex;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

/* small tracked label / kicker */
.kicker {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kicker-ochre { color: var(--ochre-ink); }

/* footnote-style method note */
.note {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.note a, .note-link {
  color: var(--ochre-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ochre-soft);
  cursor: pointer;
  font-weight: 500;
}

/* ============ SIDEBAR ============ */
.sb {
  width: 260px;
  flex: 0 0 260px;
  background: var(--paper-deep);
  border-right: 1px solid var(--rule);
  padding: 38px 30px 30px;
  display: flex;
  flex-direction: column;
}
.sb-mark {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
}
.sb-mark .mark { width: 26px; height: 26px; flex: 0 0 auto; object-fit: contain; }
.sb-mark .ix { font-size: 14px; color: var(--ink-3); font-weight: 400; }

.sb-course {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.sb-course .ttl {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sb-course .by { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.sb-course .meta { margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }

.sb-nav { margin-top: 34px; display: flex; flex-direction: column; gap: 2px; }
.sb-nav .lab { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 10px; }
.sb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0;
  font-size: 14.5px;
  color: var(--ink-2);
  position: relative;
  cursor: pointer;
}
.sb-item .ord { font-family: var(--sans); font-weight: 600; font-size: 12px; color: var(--ink-4); width: 14px; font-variant-numeric: tabular-nums; }
.sb-item.active { color: var(--ink); font-weight: 600; }
.sb-item.active .ord { color: var(--ochre-ink); }
.sb-item.active::before {
  content: ""; position: absolute; left: -30px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 17px; background: var(--ochre); border-radius: 0 2px 2px 0;
}
.sb-item .sub { margin-left: auto; font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.sb-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--rule); }
.sb-foot .ml { font-family: var(--sans); font-weight: 500; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.sb-foot .ml .arr { color: var(--ochre-ink); }
.sb-foot .who { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); }
.sb-foot .av { width: 24px; height: 24px; border-radius: 50%; background: var(--ochre-soft); color: var(--ochre-ink);
  font-family: var(--serif); font-size: 12px; display: flex; align-items: center; justify-content: center; }

/* ============ MAIN shell ============ */
.mn { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.mn-inner { padding: 46px 60px 50px; }

/* page head */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ph h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ph .sub { margin-top: 10px; font-size: 14px; color: var(--ink-2); max-width: 52ch; line-height: 1.55; }

/* source bar */
.src {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 13px 16px;
}
.src .sheet { width: 30px; height: 38px; border-radius: 2px; background: linear-gradient(160deg,#fff,#efe7d6);
  border: 1px solid var(--rule-2); position: relative; flex: 0 0 auto; }
.src .sheet::after { content: ""; position: absolute; top: 6px; right: 5px; width: 9px; height: 9px;
  border-left: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.src .nm { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.src .mt { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.src .st { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--good); }
.src .st .d { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.src .add { font-size: 12.5px; color: var(--ink-2); border: 1px solid var(--rule-2); border-radius: 3px;
  padding: 7px 12px; cursor: pointer; background: var(--paper); }

/* status pill */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; }
.pill .d { width: 6px; height: 6px; border-radius: 50%; }
.pill.not    { color: var(--ink-4); } .pill.not .d    { background: var(--ink-4); }
.pill.study  { color: var(--ochre-ink); } .pill.study .d  { background: var(--ochre); }
.pill.done   { color: var(--good); } .pill.done .d   { background: var(--good); }
.pill.gen    { color: var(--ochre-ink); }

/* kind tag */
.tag { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 2px; border: 1px solid var(--rule-2); color: var(--ink-2); white-space: nowrap; }
.tag.factual { color: var(--ink-2); }
.tag.explain { color: var(--ochre-ink); border-color: var(--ochre-soft); background: var(--ochre-soft-2); }
.tag.connect { color: var(--good); border-color: var(--good-soft); background: var(--good-soft); }

.grip { color: var(--ink-4); cursor: grab; display: flex; flex: 0 0 auto; }
.kebab { color: var(--ink-3); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; letter-spacing: 1px; }

.byline { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); }
.byline.you { color: var(--ochre-ink); }

/* spinner */
.spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ochre-soft);
  border-top-color: var(--ochre); display: inline-block; animation: sp 0.9s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* reorganize field */
.reorg { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--rule-2);
  border-radius: 3px; padding: 12px 15px; }
.reorg .ic { color: var(--ochre-ink); font-family: var(--sans); font-weight: 600; font-size: 13px; flex: 0 0 auto; }
.reorg input { flex: 1; border: none; background: transparent; font-family: var(--sans); font-size: 13.5px; color: var(--ink); outline: none; }
.reorg input::placeholder { color: var(--ink-3); }
.reorg .go { font-size: 12px; color: var(--ink-2); border: 1px solid var(--rule-2); border-radius: 3px; padding: 6px 12px; background: var(--paper); cursor: pointer; }
.reorg .go:hover { color: var(--ink); border-color: var(--ink-3); }

/* ============ committed full screen ============ */
.app { width: 100vw; height: 100vh; }
.mn-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.mn-scroll::-webkit-scrollbar { width: 9px; }
.mn-scroll::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 5px; border: 2px solid var(--paper); }
.wrap { max-width: 1000px; margin: 0 auto; padding: 44px 56px 80px; }

/* top bar */
.topbar { display: flex; align-items: center; gap: 16px; padding: 18px 56px; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 80%, transparent); backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20; }
.topbar .bc { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--ink); display: flex; align-items: baseline; gap: 9px; }
.topbar .bc .sep { color: var(--ink-4); font-weight: 400; }
.topbar .bc .cur { font-weight: 600; }
.topbar .actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tb-btn { font-size: 12.5px; color: var(--ink-2); border: 1px solid var(--rule-2); border-radius: 3px;
  padding: 7px 13px; background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.tb-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.tb-btn.prim { background: var(--ochre); color: #fff; border-color: var(--ochre); font-weight: 600; }
.tb-btn.prim:hover { background: var(--ochre-ink); border-color: var(--ochre-ink); }

/* unit card (option C) */
.ucard { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--rule);
  border-left: 1px solid var(--rule); border-radius: 3px; overflow: visible; transition: border-color .15s, box-shadow .15s; }
.ucard:hover { box-shadow: 0 1px 3px rgba(40,32,20,.05), 0 6px 22px rgba(40,32,20,.05); }
.ucard.active { border-color: var(--ochre-soft); border-left: 3px solid var(--ochre); }
.ucard.skipped { opacity: .55; }
.ucard .num { flex: 0 0 92px; display: flex; align-items: flex-start; justify-content: center; padding-top: 22px;
  border-right: 1px solid var(--rule); background: var(--surface-2); }
.ucard.active .num { background: var(--ochre-soft-2); }
.ucard .num span { font-family: var(--serif); font-size: 38px; line-height: 1; font-weight: 700; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.ucard.active .num span { color: var(--ochre-ink); }
.ucard .body { flex: 1; min-width: 0; padding: 20px 22px; }
.utitle { font-family: var(--serif); font-weight: 600; font-size: 21px; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; cursor: pointer; }
.usum { font-size: 13px; color: var(--ink-2); margin-top: 7px; line-height: 1.55; max-width: 64ch; }
.ufoot { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.chev { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3);
  transition: transform .2s; cursor: pointer; flex: 0 0 auto; }
.chev.open { transform: rotate(90deg); }
.opencards { font-size: 12.5px; color: var(--ochre-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.opencards:hover { color: var(--ink); }

/* ⋯ menu */
.menuwrap { position: relative; flex: 0 0 auto; }
.kebab-btn { width: 26px; height: 26px; border: none; background: transparent; border-radius: 4px; cursor: pointer;
  color: var(--ink-3); display: flex; align-items: center; justify-content: center; }
.kebab-btn:hover { background: var(--paper-deep); color: var(--ink); }
.menu { position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--surface); border-radius: 5px; min-width: 184px;
  box-shadow: 0 10px 34px rgba(40,32,20,.16), 0 0 0 1px var(--rule-2); padding: 5px; z-index: 40; }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 11px; border: 0; background: transparent;
  border-radius: 4px; font-family: var(--sans); font-size: 13px; color: var(--ink); cursor: pointer; text-align: left; }
.menu button:hover { background: var(--paper-deep); }
.menu button .gl { color: var(--ink-3); font-family: var(--sans); font-size: 14px; width: 16px; text-align: center; }
.menu hr { border: 0; border-top: 1px solid var(--rule); margin: 5px 4px; }
.menu .danger { color: var(--ochre-ink); }

/* expanded cards */
.ucards { padding: 4px 22px 22px 92px; }
.eccard { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--rule); align-items: flex-start; }
.eccard:first-child { border-top: 1px solid var(--rule-2); }
.eccol { flex: 1; min-width: 0; }
.ecq { font-size: 13.5px; color: var(--ink); line-height: 1.5; outline: none; border-radius: 3px; }
.eca { font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.5; outline: none; border-radius: 3px; padding-left: 11px; border-left: 2px solid var(--rule-2); }
.ecq[contenteditable]:focus, .eca[contenteditable]:focus { background: var(--ochre-soft-2); box-shadow: 0 0 0 4px var(--ochre-soft-2); }
.ecmeta { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding-top: 1px; }
.ecdel { color: var(--ink-4); cursor: pointer; font-size: 15px; line-height: 1; }
.ecdel:hover { color: var(--ochre-ink); }
.addcard { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12.5px; color: var(--ink-2);
  cursor: pointer; border: 1px dashed var(--rule-2); border-radius: 3px; padding: 8px 13px; background: transparent; }
.addcard:hover { border-color: var(--ochre); color: var(--ochre-ink); }
.addcard .pl { color: var(--ochre-ink); font-size: 14px; }

/* toast */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--ink); color: var(--paper); font-size: 13px; padding: 11px 18px; border-radius: 4px;
  box-shadow: 0 8px 30px rgba(40,32,20,.3); transition: opacity .25s, transform .25s; pointer-events: none; z-index: 80;
  display: flex; align-items: center; gap: 10px; }
.toast .em { font-family: var(--sans); font-weight: 700; color: var(--ochre-soft); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =================================================================
   REVIEW — focused, one-card-at-a-time session
   ================================================================= */
.rv-wrap { max-width: 760px; margin: 0 auto; padding: 42px 32px 110px; }

/* ---- AI / manual toggle in the top bar ---- */
.aimode { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); user-select: none; }
.aimode .lab { font-weight: 500; }
.aimode .mode { font-weight: 600; color: var(--ink); min-width: 54px; }
.switch { width: 38px; height: 22px; border-radius: 999px; background: var(--rule-2); position: relative; cursor: pointer;
  transition: background .18s; flex: 0 0 auto; }
.switch.on { background: var(--ochre); }
.switch i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: left .18s; box-shadow: 0 1px 3px rgba(30,34,39,.35); }
.switch.on i { left: 18px; }

/* ---- session header + progress ---- */
.rv-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rv-top h1 { font-family: var(--serif); font-weight: 700; font-size: 34px; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); }
.rv-count { font-size: 13px; color: var(--ink-2); text-align: right; padding-bottom: 3px; font-variant-numeric: tabular-nums; }
.rv-bar { margin-top: 22px; height: 5px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.rv-bar > i { display: block; height: 100%; background: var(--ochre); border-radius: 3px; transition: width .45s cubic-bezier(.4,0,.2,1); }
.rv-steps { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.rv-steps b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rv-steps .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

/* ---- the card ---- */
.rv-card { margin-top: 26px; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 30px 34px 30px; box-shadow: 0 1px 2px rgba(30,34,39,.03), 0 10px 34px rgba(30,34,39,.045); }
.rv-meta { display: flex; align-items: center; gap: 12px; }
.rv-unit { font-size: 12px; color: var(--ink-3); }
.rv-unit b { color: var(--ink-2); font-weight: 600; }
.rv-prompt { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.34; letter-spacing: -0.012em;
  color: var(--ink); margin-top: 15px; text-wrap: pretty; }

/* ---- answer field ---- */
.rv-field { margin-top: 22px; }
.rv-ta { width: 100%; min-height: 116px; resize: vertical; border: 1px solid var(--rule-2); border-radius: 5px;
  background: var(--paper); padding: 14px 16px; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink);
  outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.rv-ta:focus { border-color: var(--ochre); box-shadow: 0 0 0 4px var(--ochre-soft-2); background: var(--surface); }
.rv-ta::placeholder { color: var(--ink-3); }
.rv-hint { margin-top: 11px; font-size: 12.5px; color: var(--ink-3); }
.rv-hint .note-link { font-size: 12.5px; }

.rv-actions { margin-top: 18px; display: flex; align-items: center; gap: 12px; }

/* generic buttons (review-scoped) */
.btn { font-family: var(--sans); font-size: 14px; font-weight: 600; border-radius: 5px; padding: 11px 20px; cursor: pointer;
  border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; gap: 9px;
  transition: background .15s, border-color .15s, color .15s; }
.btn:hover { border-color: var(--ink-3); }
.btn.prim { background: var(--ochre); border-color: var(--ochre); color: #fff; }
.btn.prim:hover { background: var(--ochre-ink); border-color: var(--ochre-ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); padding: 11px 8px; }
.btn.ghost:hover { color: var(--ink); border-color: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- result / verdict ---- */
.rv-result { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.rv-label { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.rv-your-text { margin-top: 9px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); padding-left: 14px; border-left: 2px solid var(--rule-2); }

.rv-verdict { margin-top: 20px; display: flex; gap: 14px; align-items: flex-start; padding: 17px 19px; border-radius: 5px; }
.rv-verdict.pass { background: var(--ok-soft); }
.rv-verdict.fail { background: var(--paper-deep); border: 1px solid var(--rule-2); }
.rv-vmark { width: 27px; height: 27px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  color: #fff; }
.rv-verdict.pass .rv-vmark { background: var(--ok); }
.rv-verdict.fail .rv-vmark { background: var(--ink-4); }
.rv-vbody { flex: 1; min-width: 0; }
.rv-vbody h4 { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }
.rv-vbody .one { margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.rv-fb { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.rv-fb .k { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.rv-fb .k .d { width: 6px; height: 6px; border-radius: 50%; }
.rv-fb .k.right { color: var(--ok); } .rv-fb .k.right .d { background: var(--ok); }
.rv-fb .k.gap { color: var(--ochre-ink); } .rv-fb .k.gap .d { background: var(--ochre); }
.rv-fb .k.build { color: var(--ochre-ink); } .rv-fb .k.build .d { background: var(--ochre); }
.rv-fb p { font-size: 14px; line-height: 1.58; color: var(--ink); margin-top: 5px; max-width: 64ch; }

.rv-ref { margin-top: 20px; }
.rv-ref-text { margin-top: 8px; font-size: 14.5px; line-height: 1.58; color: var(--ink); background: var(--paper-deep);
  border-radius: 5px; padding: 14px 16px; max-width: 66ch; }

/* ---- grade row + interval ---- */
.rv-grade { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rv-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; }
.rv-chip.pass { background: var(--ok-soft); color: var(--ok); }
.rv-chip.fail { background: var(--paper-deep); color: var(--ink-2); border: 1px solid var(--rule-2); }
.rv-dots { display: inline-flex; gap: 4px; }
.rv-dots .gd { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); opacity: .4; }
.rv-dots .gd.on { opacity: 1; }
.rv-chip.pass .gd.on { background: var(--ok); } .rv-chip.fail .gd.on { background: var(--ink-3); }
.rv-when { font-size: 13.5px; color: var(--ink-2); }
.rv-when b { color: var(--ink); font-weight: 600; }
.rv-override { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rv-override .ol { font-size: 12px; color: var(--ink-3); }
.rv-adj { border: 1px solid var(--rule-2); background: var(--surface); border-radius: 5px; padding: 6px 11px; font-size: 12px;
  font-weight: 500; cursor: pointer; color: var(--ink-2); font-family: var(--sans); }
.rv-adj:hover { border-color: var(--ink-3); color: var(--ink); }

/* ---- tools: chat + passage ---- */
.rv-tools { margin-top: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-tool { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--rule-2); background: var(--surface); border-radius: 5px; padding: 8px 13px; cursor: pointer; }
.rv-tool:hover { border-color: var(--ink-3); color: var(--ink); }
.rv-tool.on { border-color: var(--ochre); color: var(--ochre-ink); background: var(--ochre-soft-2); }
.rv-tool svg { color: var(--ink-3); } .rv-tool.on svg { color: var(--ochre-ink); }

.rv-locked { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3);
  background: var(--paper-deep); border: 1px dashed var(--rule-2); border-radius: 5px; padding: 12px 15px; }
.rv-locked svg { color: var(--ink-4); flex: 0 0 auto; }

/* passage */
.rv-passage { margin-top: 14px; background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 5px; padding: 16px 18px; }
.rv-passage .pr { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.rv-passage p { margin-top: 9px; font-size: 13.5px; line-height: 1.62; color: var(--ink-2); max-width: 66ch; }

/* card chat */
.rv-chat { margin-top: 14px; border: 1px solid var(--rule-2); border-radius: 6px; overflow: hidden; background: var(--surface); }
.rv-chat-head { padding: 11px 16px; border-bottom: 1px solid var(--rule); font-size: 11.5px; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px; background: var(--surface-2); }
.rv-chat-head b { color: var(--ink-2); font-weight: 600; }
.rv-msgs { padding: 16px; display: flex; flex-direction: column; gap: 14px; max-height: 300px; overflow-y: auto; }
.rv-msg { font-size: 14px; line-height: 1.55; max-width: 88%; }
.rv-msg.u { align-self: flex-end; background: var(--ochre); color: #fff; padding: 9px 14px; border-radius: 13px 13px 4px 13px; }
.rv-msg.a { align-self: flex-start; color: var(--ink); }
.rv-msg.a .who { font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ochre-ink); font-weight: 700; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.rv-msg.a .who .spin { width: 10px; height: 10px; }
.rv-chat-input { display: flex; gap: 9px; padding: 12px; border-top: 1px solid var(--rule); }
.rv-chat-input input { flex: 1; border: 1px solid var(--rule-2); border-radius: 5px; padding: 9px 13px; font-family: var(--sans);
  font-size: 14px; color: var(--ink); outline: none; background: var(--paper); }
.rv-chat-input input:focus { border-color: var(--ochre); box-shadow: 0 0 0 3px var(--ochre-soft-2); }
.rv-send { border: none; background: var(--ochre); color: #fff; border-radius: 5px; padding: 0 16px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--sans); }
.rv-send:hover { background: var(--ochre-ink); }

/* ---- manual self-mark ---- */
.rv-selfmark { margin-top: 18px; display: flex; gap: 11px; flex-wrap: wrap; }
.rv-sm { flex: 1; min-width: 130px; border: 1px solid var(--rule-2); background: var(--surface); border-radius: 6px;
  padding: 14px 15px; cursor: pointer; text-align: left; font-family: var(--sans); transition: border-color .15s, background .15s; }
.rv-sm:hover { border-color: var(--ink-3); }
.rv-sm .smt { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--ink); }
.rv-sm .smt .d { width: 7px; height: 7px; border-radius: 50%; }
.rv-sm.missed .d { background: var(--ink-4); } .rv-sm.missed:hover { background: var(--paper-deep); }
.rv-sm.recalled .d { background: var(--ochre); } .rv-sm.recalled:hover { border-color: var(--ochre); background: var(--ochre-soft-2); }
.rv-sm.easy .d { background: var(--good); } .rv-sm.easy:hover { border-color: var(--good); background: var(--good-soft); }
.rv-sm .sms { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.rv-manual-note { margin-top: 13px; font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }

/* ---- next ---- */
.rv-foot { margin-top: 24px; display: flex; align-items: center; gap: 14px; }
.rv-foot .skip { margin-left: auto; }

/* ---- session complete (Kraft celebration) ---- */
.rv-done { margin-top: 36px; text-align: center; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 56px 34px 50px; box-shadow: 0 10px 34px rgba(30,34,39,.045); }
.rv-done .ring { width: 60px; height: 60px; margin: 0 auto; }
.rv-done .ring .mark { width: 100%; height: 100%; object-fit: contain; }
.rv-done h2 { font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--ink); margin-top: 22px; letter-spacing: -0.025em; }
.rv-done .lede { font-size: 14.5px; color: var(--ink-2); margin-top: 11px; max-width: 44ch; margin-left: auto; margin-right: auto; line-height: 1.55; }
.rv-stats { margin-top: 30px; display: flex; justify-content: center; gap: 48px; }
.rv-stat .v { font-family: var(--serif); font-weight: 700; font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-stat .v.kraft { color: var(--ok); }
.rv-stat .l { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.rv-done .actions { margin-top: 34px; display: flex; justify-content: center; gap: 12px; }

/* tweak: flat card surface */
.sap.flat .rv-card, .sap.flat .rv-done { box-shadow: none; }

/* "too easy" tool — confidence signal in the Kraft/achievement accent */
.rv-tool.good-tool.on { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.rv-tool.good-tool.on svg { color: var(--good); }
.rv-stretch { margin-top: 14px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--good);
  background: var(--good-soft); border-radius: 5px; padding: 11px 14px; }
.rv-stretch svg { flex: 0 0 auto; }

/* =================================================================
   HOME — logged-in library: all active courses + create new
   ================================================================= */
.home { width: 100vw; height: 100vh; flex-direction: column; background: var(--paper); }

/* top-level account chrome (no course sidebar) */
.home-top { display: flex; align-items: center; gap: 16px; padding: 20px 48px; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20; flex: 0 0 auto; }
.home-mark { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.home-mark .mark { width: 25px; height: 25px; object-fit: contain; }
.home-top .right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.home-top .howlink { font-size: 13px; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.home-top .howlink:hover { color: var(--ink); }
.home-top .howlink .arr { color: var(--ochre-ink); }
.home-acct { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; padding-left: 20px; border-left: 1px solid var(--rule); }
.home-acct .av { width: 30px; height: 30px; border-radius: 50%; background: var(--ochre-soft); color: var(--ochre-ink);
  font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }

.home-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.home-scroll::-webkit-scrollbar { width: 9px; }
.home-scroll::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 5px; border: 2px solid var(--paper); }
.home-wrap { max-width: 1120px; margin: 0 auto; padding: 52px 48px 96px; }

/* header */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.home-head h1 { font-family: var(--serif); font-weight: 700; font-size: 38px; letter-spacing: -0.025em; line-height: 1.04; color: var(--ink); }
.home-head .sub { margin-top: 11px; font-size: 14.5px; color: var(--ink-2); }
.home-head .sub b { color: var(--ink); font-weight: 600; }
.home-new { font-family: var(--sans); font-size: 14px; font-weight: 600; border-radius: 5px; padding: 12px 20px; cursor: pointer;
  border: 1px solid var(--ochre); background: var(--ochre); color: #fff; display: inline-flex; align-items: center; gap: 9px; transition: background .15s; }
.home-new:hover { background: var(--ochre-ink); }

.home-sec { margin-top: 38px; display: flex; align-items: baseline; gap: 12px; }
.home-sec .lab { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.home-sec .ct { font-size: 12px; color: var(--ink-4); }

/* course grid */
.home-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1000px) { .home-grid { grid-template-columns: repeat(2, 1fr); } }

.course-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 7px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; transition: border-color .16s, box-shadow .16s, transform .16s;
  box-shadow: 0 1px 2px rgba(30,34,39,.03); }
.course-card:hover { border-color: var(--rule-2); box-shadow: 0 2px 4px rgba(30,34,39,.05), 0 14px 32px rgba(30,34,39,.07); transform: translateY(-2px); }

/* cover — the Sapient mark as cover art (no category label) */
.cc-cover { height: 128px; position: relative; overflow: hidden; }
.cc-cover .wm { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 152px; height: 152px; opacity: .16; }
.cc-cover .wm .mark { width: 100%; height: 100%; display: block; object-fit: contain; }
.cc-cover.c-blue   { background: #233E5C; }
.cc-cover.c-kraft  { background: #6B4A2C; }
.cc-cover.c-green  { background: #28453A; }
.cc-cover.c-slate  { background: #2C2F35; }
.cc-cover.c-plum   { background: #44324C; }

.cc-body { padding: 17px 19px 19px; display: flex; flex-direction: column; flex: 1; }
.cc-title { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.cc-by { margin-top: 5px; font-size: 12.5px; color: var(--ink-3); }

.cc-prog { margin-top: 16px; }
.cc-prog .bar { height: 4px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.cc-prog .bar > i { display: block; height: 100%; background: var(--ochre); border-radius: 3px; }
.cc-prog .bar > i.done-bar { background: var(--good); }
.cc-prog .lbl { margin-top: 8px; font-size: 12px; color: var(--ink-2); display: flex; justify-content: space-between; }
.cc-prog .lbl b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.cc-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 10px; }
.cc-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.cc-status .d { width: 7px; height: 7px; border-radius: 50%; }
.cc-status.due   { color: var(--ochre-ink); } .cc-status.due .d   { background: var(--ochre); }
.cc-status.caught{ color: var(--good); }      .cc-status.caught .d{ background: var(--good); }
.cc-status.fresh { color: var(--ink-2); }     .cc-status.fresh .d { background: var(--ink-4); }
.cc-updated { margin-left: auto; font-size: 11.5px; color: var(--ink-4); }
.cc-arrow { color: var(--ink-4); transition: transform .16s, color .16s; }
.course-card:hover .cc-arrow { color: var(--ochre-ink); transform: translateX(2px); }

/* freshly created highlight */
.course-card.justnew { border-color: var(--ochre); box-shadow: 0 0 0 3px var(--ochre-soft-2); }

/* new-course tile */
.new-card { border: 1.5px dashed var(--rule-2); border-radius: 7px; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 290px;
  color: var(--ink-3); transition: border-color .16s, color .16s, background .16s; }
.new-card:hover { border-color: var(--ochre); color: var(--ochre-ink); background: var(--ochre-soft-2); }
.new-card .plus { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; }
.new-card .nt { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.new-card:hover .nt { color: var(--ochre-ink); }
.new-card .ns { font-size: 12px; max-width: 19ch; text-align: center; line-height: 1.45; }

/* ---- create modal ---- */
.modal-scrim { position: fixed; inset: 0; background: rgba(30,34,39,.32); backdrop-filter: blur(2px); z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 24px; animation: mfade .16s ease; }
@keyframes mfade { from { opacity: 0; } }
.modal { width: 540px; max-width: 100%; background: var(--surface); border-radius: 9px; border: 1px solid var(--rule-2);
  box-shadow: 0 24px 70px rgba(30,34,39,.3); padding: 30px 32px 28px; animation: mrise .2s cubic-bezier(.4,0,.2,1); }
@keyframes mrise { from { opacity: 0; transform: translateY(10px); } }
.modal .mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal h2 { font-family: var(--serif); font-weight: 700; font-size: 25px; letter-spacing: -0.02em; color: var(--ink); margin-top: 9px; }
.modal .mx { cursor: pointer; color: var(--ink-3); font-size: 20px; line-height: 1; padding: 2px; }
.modal .mx:hover { color: var(--ink); }
.modal .mlede { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-top: 9px; max-width: 46ch; }

.mfield { margin-top: 22px; }
.mfield .flab { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.drop { margin-top: 9px; border: 1.5px dashed var(--rule-2); border-radius: 6px; padding: 24px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; }
.drop:hover { border-color: var(--ochre); background: var(--ochre-soft-2); }
.drop.has { border-style: solid; border-color: var(--ochre); background: var(--ochre-soft-2); }
.drop .di { width: 34px; height: 34px; margin: 0 auto; color: var(--ink-3); }
.drop.has .di { color: var(--ochre-ink); }
.drop .dt { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.drop .dt b { color: var(--ink); font-weight: 600; }
.drop .ds { margin-top: 4px; font-size: 12px; color: var(--ink-4); }

.mor { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ink-4); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.mor::before, .mor::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.minput { width: 100%; border: 1px solid var(--rule-2); border-radius: 5px; padding: 11px 14px; font-family: var(--sans);
  font-size: 14.5px; color: var(--ink); outline: none; background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.minput:focus { border-color: var(--ochre); box-shadow: 0 0 0 3px var(--ochre-soft-2); background: var(--surface); }
.minput::placeholder { color: var(--ink-3); }

.mfoot { margin-top: 26px; display: flex; align-items: center; gap: 12px; justify-content: flex-end; }

/* building state */
.building { padding: 14px 4px 6px; }
.bstep { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 14px; color: var(--ink-3); }
.bstep + .bstep { border-top: 1px solid var(--rule); }
.bstep .bi { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--rule-2); }
.bstep.active { color: var(--ink); font-weight: 500; }
.bstep.done { color: var(--ink-2); }
.bstep.done .bi { background: var(--good); border-color: var(--good); color: #fff; }
.bstep.active .bi { border: none; }