/* components.css — buttons, header, meta, sections, examples, code, modal */

/* ---------- buttons ---------- */
.ghost-btn {
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text-2); font-size: 12.5px; font-weight: 600;
  padding: 7px 11px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.ghost-btn:hover { border-color: var(--brand); color: var(--text); text-decoration: none; }
.ghost-btn.danger:hover { border-color: var(--red); color: var(--red); }
.icon-btn { background: none; border: none; color: var(--text-2); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.icon-btn:hover { background: var(--bg-3); color: var(--text); }

/* ---------- problem header ---------- */
.prob-header {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-1) 70%, rgba(14,20,32,.92));
  border-bottom: 1px solid var(--border);
  padding: 18px 34px 14px;
  backdrop-filter: blur(6px);
}
.ph-top { display: flex; align-items: center; gap: 12px; font-size: 12.5px; flex-wrap: wrap; }
.ph-lc { font-family: var(--mono); color: var(--muted); font-weight: 700; }
.ph-diff { font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor; }
.ph-diff.d-easy { color: var(--easy); } .ph-diff.d-medium { color: var(--medium); } .ph-diff.d-hard { color: var(--hard); }
.ph-cat { color: var(--text-2); font-weight: 600; }
.ph-link { margin-left: auto; color: var(--brand-2); font-weight: 600; }
.ph-title { font-size: 27px; font-weight: 750; margin: 8px 0 0; letter-spacing: -.4px; }

.ph-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.status-group { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
.status-btn { background: none; border: none; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 7px; cursor: pointer; }
.status-btn:hover { color: var(--text); }
.status-btn.sel.st-solved { background: rgba(52,211,153,.16); color: var(--green); }
.status-btn.sel.st-learning { background: rgba(251,191,36,.16); color: var(--amber); }
.status-btn.sel.st-not-started { background: var(--bg-3); color: var(--text); }
.chip-btn { background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.chip-btn:hover { border-color: var(--brand); color: var(--text); }
.chip-btn.on { background: var(--brand-glow); border-color: var(--brand); color: var(--text); }
.chip-btn.disabled { opacity: .5; cursor: default; pointer-events: none; }
/* study-loop CTAs */
.chip-btn.cta-next { background: color-mix(in srgb, var(--success) 16%, var(--bg-2)); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); color: var(--success-2); font-weight: 700; }
.chip-btn.cta-next:hover { border-color: var(--success); }
.chip-btn.cta-due { background: color-mix(in srgb, var(--brand) 15%, var(--bg-2)); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); color: var(--text); font-weight: 700; }
/* keyboard cheatsheet */
.kbd-list { display: flex; flex-direction: column; gap: 2px; }
.kbd-row { display: flex; align-items: center; gap: 14px; padding: 9px 6px; border-bottom: 1px solid var(--border-soft); }
.kbd-row:last-child { border-bottom: none; }
.kbd-row kbd { flex: 0 0 auto; min-width: 84px; text-align: center; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); background: var(--bg-3); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; padding: 4px 8px; }
.kbd-row span { color: var(--text-2); font-size: 13.5px; }

/* ---------- meta box ---------- */
.meta-box {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px; background: var(--border-soft);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin: 22px 34px 0;
}
.meta-cell { background: var(--bg-1); padding: 12px 14px; }
.meta-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.meta-v { font-size: 14px; color: var(--text); font-weight: 600; }
.pattern-link { background: none; border: none; padding: 0; color: var(--brand-2); font-weight: 600; font-size: 14px; cursor: pointer; text-align: left; }
.pattern-link:hover { text-decoration: underline; }

/* ---------- sections ---------- */
.prob-section { margin: 20px 34px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-1); box-shadow: inset 3px 0 0 var(--stripe-neutral); }
/* left-edge accent stripes give each section a scannable identity */
.prob-section[data-key="logic"]      { box-shadow: inset 3px 0 0 var(--stripe-logic); }
.prob-section[data-key="code"]       { box-shadow: inset 3px 0 0 var(--stripe-code); }
.prob-section[data-key="complexity"] { box-shadow: inset 3px 0 0 var(--stripe-complexity); }
.prob-section[data-key="recognize"]  { box-shadow: inset 3px 0 0 var(--stripe-recognize); }
.prob-section[data-key="recall"]     { box-shadow: inset 3px 0 0 var(--stripe-recall); }
.prob-section[data-key="srs"]        { box-shadow: inset 3px 0 0 var(--stripe-srs); }
.sec-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; background: var(--bg-2); border: none; cursor: pointer;
  color: var(--text); font-size: 15px; font-weight: 700; text-align: left;
}
.sec-head:hover { background: var(--bg-3); }
.sec-caret { color: var(--muted); font-size: 11px; width: 12px; transition: transform var(--dur-cat) var(--ease-cat); transform-origin: 50% 50%; display: inline-block; }
.prob-section.collapsed .sec-caret { transform: rotate(-90deg); }
.sec-title { flex: 1; }
.sec-badge { font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--bg-0); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; font-weight: 600; }
/* animated collapse via explicit pixel height (see animateCollapse) — smooth in
   every browser, unlike a grid-fr transition which Safari snaps. */
.sec-body-outer { overflow: hidden; transition: height var(--dur-cat) var(--ease-cat); }
.sec-body { padding: 18px 20px; }

.subhead { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 700; margin: 14px 0 6px; }
.constraints ul, .notes-block ul { margin-left: 20px; }
.constraints li, .notes-block li { color: var(--text-2); margin: 3px 0; }
.notes-block { border-left: 3px solid var(--amber); background: var(--bg-2); padding: 4px 14px 8px; border-radius: 0 8px 8px 0; margin-top: 12px; }

/* ---------- examples ---------- */
.examples { display: flex; flex-direction: column; gap: 14px; }
.example-card { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 14px 16px; }
.ex-num { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--brand-2); font-weight: 800; margin-bottom: 8px; }
.ex-io { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ex-row { display: flex; gap: 10px; align-items: baseline; }
.ex-label { font-size: 11px; font-weight: 700; color: var(--muted); width: 52px; flex: 0 0 52px; text-transform: uppercase; }
.ex-row code { background: var(--bg-0); color: var(--text); white-space: pre-wrap; }
.ex-reason { font-size: 13.5px; }
.ex-visual { margin-top: 8px; }

/* ---------- approaches ---------- */
.approach-area { margin-top: 20px; }
.approach-switch { display: flex; gap: 8px; margin: 0 34px 4px; flex-wrap: wrap; }
.app-tab {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text-2); padding: 8px 16px; border-radius: 10px 10px 0 0;
  cursor: pointer; font-size: 13.5px; font-weight: 700;
}
.app-tab:hover { color: var(--text); }
.app-tab.active { background: var(--bg-1); border-bottom-color: var(--bg-1); color: var(--brand-2); box-shadow: inset 0 2px 0 var(--brand); }
.app-cx { font-family: var(--mono); font-size: 10.5px; color: var(--muted); font-weight: 600; }

/* ---------- code ---------- */
.code-area .code-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ct-btn { background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 8px; cursor: pointer; }
.ct-btn:hover { color: var(--text); }
.ct-btn.active { background: var(--brand); border-color: var(--brand); color: #06111f; }
.code-hint { font-size: 12px; color: var(--muted); font-style: italic; }

.code-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--code-bg); position: relative; }
html[data-theme="light"] .code-wrap { box-shadow: 0 2px 12px rgba(40, 35, 25, .10); }
.code-bar { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--border); }
.code-lang { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.copy-btn { background: var(--bg-3); border: 1px solid var(--border); color: var(--text-2); font-size: 11.5px; font-weight: 600; padding: 3px 12px; border-radius: 6px; cursor: pointer; }
.copy-btn:hover { border-color: var(--brand); color: var(--text); }
/* Code toolbar actions: edited badge, Reset, lock/unlock, Copy */
.code-actions { display: flex; align-items: center; gap: 8px; }
.code-mini { background: var(--bg-3); border: 1px solid var(--border); color: var(--text-2); font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.code-mini:hover { border-color: var(--brand); color: var(--text); }
.code-mini.lock.on { background: rgba(96,165,250,.16); border-color: var(--brand); color: var(--text); }
.code-edited { font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--medium); background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); padding: 2px 7px; border-radius: 999px; }
.code-pre { margin: 0; padding: 16px 18px; overflow-x: auto; }
.code-pre code { font-family: var(--mono); font-size: 13px; line-height: 1.6; background: none; border: none; padding: 0; white-space: pre; }
/* Vertical indentation guides (VS-Code style). Inset shadow => zero added width, so code stays aligned. */
.code-pre code .ind-g { display: inline-block; box-shadow: inset 1px 0 0 var(--indent-guide); }
/* Editable code (unlocked). Matches .code-pre metrics so locked<->unlocked don't jump. */
.code-edit { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 16px 18px; border: none; outline: none; resize: none; overflow-x: auto; background: transparent; color: var(--text); font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: pre; tab-size: 4; -moz-tab-size: 4; box-shadow: inset 0 0 0 2px rgba(96,165,250,.35); }
.code-edit:focus { box-shadow: inset 0 0 0 2px var(--brand); }

.when-use { margin-top: 12px; font-size: 13px; color: var(--text-2); background: var(--bg-2); border-radius: 8px; padding: 10px 14px; border: 1px solid var(--border-soft); }
.when-use strong { color: var(--text); }

/* blur-to-recall */
.blurred { position: relative; }
.blurred > .md, .blurred.md { filter: blur(7px); user-select: none; pointer-events: none; }
.code-wrap.blurred .code-pre { filter: blur(7px); user-select: none; }
.logic.blurred { filter: blur(7px); user-select: none; }
.reveal-overlay {
  position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content;
  z-index: 5; background: var(--brand); color: #06111f; border: none;
  padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: var(--shadow);
}
.reveal-overlay:hover { filter: brightness(1.08); }

/* complexity table */
.cx-table { display: flex; flex-direction: column; gap: 8px; }
.cx-row { display: flex; align-items: center; gap: 16px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 14px; flex-wrap: wrap; }
.cx-name { font-weight: 700; flex: 1; min-width: 160px; }
.cx-time, .cx-space { font-size: 13px; color: var(--muted); }

/* cue lists */
.cue-list { margin-left: 20px; }
.cue-list li { color: var(--text-2); margin: 7px 0; }
.cue-list.recall li::marker { color: var(--amber); }

/* notes */
.note-area { width: 100%; min-height: 100px; resize: vertical; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: var(--font); font-size: 14px; padding: 12px 14px; line-height: 1.6; }
.note-area:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.note-hint { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--green); }

/* animation / visualization links */
.links-wrap { display: flex; flex-direction: column; gap: 10px; }
.links-hint { font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.link-name { flex: 0 0 170px; }
.link-url { flex: 1 1 260px; min-width: 180px; }
.link-name, .link-url {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: var(--font); font-size: 13.5px; padding: 9px 12px;
}
.link-name:focus, .link-url:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.link-open {
  flex: 0 0 auto; padding: 9px 16px; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--border); color: var(--muted);
  font-size: 13px; font-weight: 700; cursor: not-allowed; text-decoration: none; white-space: nowrap;
}
.link-open.active { background: var(--brand); border-color: var(--brand); color: #06111f; cursor: pointer; }
.link-open.active:hover { filter: brightness(1.08); text-decoration: none; }

/* prev/next */
.prob-nav { display: flex; justify-content: space-between; gap: 12px; margin: 28px 34px 0; }
.nav-btn { flex: 1; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font-size: 13.5px; font-weight: 600; padding: 14px 18px; border-radius: var(--radius-sm); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-btn:hover:not(.disabled) { border-color: var(--brand); background: var(--bg-3); }
.nav-btn.disabled { opacity: .4; cursor: default; }

/* ---------- modal / revision grid ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100; background: rgba(4,7,13,.7);
  display: grid; place-items: center; padding: 30px;
  opacity: 0; backdrop-filter: blur(0px);
  transition: opacity var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.modal.hidden { display: none; }
.modal.open { opacity: 1; backdrop-filter: blur(3px); }
.modal-card {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius);
  width: 100%; max-width: 1050px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow);
  transform: translateY(10px) scale(.985); opacity: .4;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.modal.open .modal-card { transform: none; opacity: 1; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 17px; }
.modal-body { overflow: auto; padding: 4px 0; }
.grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid-table th { position: sticky; top: 0; background: var(--bg-2); color: var(--muted); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.grid-row td { padding: 9px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); }
.grid-row:hover { background: var(--bg-2); cursor: pointer; }
.grid-row .g-title { color: var(--text); font-weight: 600; }
.grid-table code { font-size: 11.5px; }

@media (max-width: 900px) {
  .prob-header, .meta-box, .prob-section, .approach-switch, .prob-nav { margin-left: 14px; margin-right: 14px; }
  .prob-header { padding-left: 16px; padding-right: 16px; }
  .ph-title { font-size: 22px; }
}

/* ============================================================= SPACED REPETITION */
/* compact review-due chip (sits inline in the progress head) */
.review-due-chip {
  flex: 0 0 auto; background: var(--bg-3); border: 1px solid var(--border);
  color: var(--muted); font-size: 11.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.review-due-chip:disabled { opacity: 0; pointer-events: none; }  /* hidden entirely when nothing is due */
.review-due-chip.has-due {
  opacity: 1; color: #06111f; background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-color: transparent; box-shadow: 0 3px 12px var(--brand-glow);
}
.review-due-chip.has-due:hover { transform: translateY(-1px); }
.review-due-chip .rd-count { font-family: var(--mono); }

.srs-wrap { padding: 4px 2px; }
.srs-status { font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srs-status .srs-when { color: var(--text); }
.srs-badge {
  display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; padding: 3px 9px; border-radius: 999px;
}
.srs-badge.srs-new  { background: var(--bg-3); color: var(--muted); border: 1px solid var(--border); }
.srs-badge.srs-ok   { background: rgba(52,211,153,.16); color: var(--green); }
.srs-badge.srs-due  { background: var(--brand-glow); color: var(--brand-2); border: 1px solid var(--brand); }
.srs-hint { font-size: 12.5px; margin: 10px 0 12px; }
.srs-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.srs-grade {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; cursor: pointer; text-align: left; transition: all .12s ease;
}
.srs-grade:hover { transform: translateY(-2px); border-color: var(--brand); }
.srs-grade .sg-label { font-size: 14px; font-weight: 800; color: var(--text); }
.srs-grade .sg-hint { font-size: 11px; color: var(--muted); font-weight: 500; }
.srs-grade.g-again { border-left: 3px solid var(--hard); }
.srs-grade.g-hard  { border-left: 3px solid var(--medium); }
.srs-grade.g-good  { border-left: 3px solid var(--brand); }
.srs-grade.g-easy  { border-left: 3px solid var(--easy); }
.srs-grade.g-again:hover { border-color: var(--hard); }
.srs-grade.g-hard:hover  { border-color: var(--medium); }
.srs-grade.g-easy:hover  { border-color: var(--easy); }

/* transient toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--bg-3); color: var(--text); border: 1px solid var(--border);
  padding: 11px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================= DASHBOARD */
.dash-body { padding: 20px 22px 26px; }
.db-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 8px; }
.db-stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; position: relative; overflow: hidden; }
.db-stat-v { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; }
/* achievement accent: Solved gets an emerald wash, streak gets a warm flame */
.db-stat.stat-solved { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: linear-gradient(180deg, var(--success-glow), transparent 70%), var(--bg-2); }
.db-stat.stat-solved .db-stat-v { color: var(--success-2); }
.db-stat.stat-streak { border-color: color-mix(in srgb, var(--flame-1) 45%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--flame-1) 16%, transparent), transparent 70%), var(--bg-2); }
.db-stat.stat-streak .db-stat-v { background: linear-gradient(135deg, var(--flame-1), var(--flame-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.db-stat-k { font-size: 12px; font-weight: 700; color: var(--text-2); margin-top: 4px; }
.db-stat-sub { font-size: 11px; margin-top: 2px; }
.db-block { margin-top: 26px; }
.db-block h3 { font-size: 14px; color: var(--text); margin-bottom: 12px; font-weight: 700; }
.db-bar-row { display: grid; grid-template-columns: 190px 1fr 58px; align-items: center; gap: 12px; margin-bottom: 7px; }
.db-bar-label { font-size: 12.5px; color: var(--text-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-bar-track { height: 10px; background: var(--bg-3); border-radius: 6px; overflow: hidden; }
.db-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 6px; transition: width .4s ease; }
.db-bar-fill.d-fill-easy { background: var(--easy); }
.db-bar-fill.d-fill-medium { background: var(--medium); }
.db-bar-fill.d-fill-hard { background: var(--hard); }
.db-bar-val { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; }
.db-bar-row.db-weak .db-bar-label { color: var(--hard); font-weight: 700; }

/* activity heatmap */
.heat-grid { overflow-x: auto; }
.heat-cols { display: flex; gap: 3px; padding-bottom: 8px; }
.heat-col { display: flex; flex-direction: column; gap: 3px; }
.heat-cell { width: 11px; height: 11px; border-radius: 2px; background: var(--bg-3); display: inline-block; }
.heat-cell.l0 { background: var(--bg-3); }
.heat-cell.l1 { background: rgba(79,140,255,.35); }
.heat-cell.l2 { background: rgba(79,140,255,.55); }
.heat-cell.l3 { background: rgba(79,140,255,.78); }
.heat-cell.l4 { background: var(--brand); }
.heat-cell.heat-future { opacity: 0; }
.heat-legend { display: flex; align-items: center; gap: 4px; font-size: 11px; margin-top: 4px; }
.heat-legend .heat-cell { width: 10px; height: 10px; }

/* ============================================================= REVIEW SESSION */
.modal-card-sm { max-width: 560px; }
.review-body { padding: 22px 24px 26px; }
.rv-progress { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); font-family: var(--mono); margin-bottom: 18px; }
.rv-track { flex: 1; height: 6px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.rv-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .3s ease; }
.rv-meta { display: flex; gap: 12px; align-items: center; font-size: 12.5px; margin-bottom: 6px; }
.rv-title { font-size: 22px; margin-bottom: 6px; }
.rv-reveal {
  width: 100%; margin: 16px 0; background: var(--bg-2); border: 1px dashed var(--border);
  color: var(--text-2); font-size: 13.5px; font-weight: 700; padding: 14px; border-radius: var(--radius-sm); cursor: pointer;
}
.rv-reveal:hover { border-color: var(--brand); color: var(--text); }
.rv-answer { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin: 16px 0; transition: filter .2s ease; }
.rv-answer.blurred { filter: blur(9px); pointer-events: none; user-select: none; }
.rv-a-row { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.rv-a-row:last-child { border-bottom: none; }
.rv-a-k { color: var(--muted); font-weight: 600; }
.rv-a-v { color: var(--text); font-weight: 600; }
.rv-a-v.mono { font-family: var(--mono); font-size: 12.5px; }
.rv-open { background: none; border: none; color: var(--brand-2); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 16px; }
.rv-grades.show, .rv-grades { display: grid; }
.rv-done { text-align: center; padding: 20px 10px; }
.rv-done-emoji { font-size: 42px; color: var(--green); }
.rv-done h3 { font-size: 18px; margin: 8px 0; }
.rv-done p { margin-bottom: 16px; }

@media (max-width: 560px) {
  .srs-grades { grid-template-columns: repeat(2, 1fr); }
  .db-bar-row { grid-template-columns: 120px 1fr 50px; }
}

/* ============================================================= MOTION & POLISH */
/* consistent transitions on all interactive controls */
.ghost-btn, .chip-btn, .icon-btn, .nav-tool-btn, .set-btn, .ct-btn, .app-tab,
.copy-btn, .nav-btn, .review-due-btn, .status-btn, .clear-btn, .link-open,
.reveal-overlay, .cat-header, .nav-item, .sec-head, .pattern-link, .rv-reveal,
.rv-open, .status-group, .link-name, .link-url, .note-area, .search-box input, .filters select {
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
/* hover lift on the main pill buttons */
.ghost-btn:hover, .chip-btn:hover, .nav-tool-btn:hover, .review-due-btn.has-due:hover {
  transform: translateY(-1px); box-shadow: var(--lift);
}
/* tactile press feedback */
.ghost-btn:active, .chip-btn:active, .nav-tool-btn:active, .ct-btn:active, .app-tab:active,
.set-btn:active, .nav-btn:active, .copy-btn:active, .review-due-btn:active, .status-btn:active,
.icon-btn:active, .clear-btn:active, .srs-grade:active, .rv-reveal:active, .nav-btn:not(.disabled):active {
  transform: translateY(1px) scale(.99);
}
/* nav items slide slightly toward the reader on hover */
.nav-item:hover { transform: translateX(3px); }
.cat-caret { transition: transform var(--dur) var(--ease); transform-origin: 50% 50%; }
/* status glyph + selection settle smoothly */
.status-btn.sel { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }

/* keyboard focus rings (mouse clicks stay clean) */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* reading-pane cross-fade on problem navigation */
.main.nav-enter { animation: navFade var(--dur-slow) var(--ease); }
@keyframes navFade { from { opacity: 0; } to { opacity: 1; } }

/* sidebar fade when the study set changes */
.nav.nav-flip { animation: navFade var(--dur) var(--ease); }

/* copy button confirm pulse */
.copy-btn:active { filter: brightness(1.1); }

/* icon buttons get a subtle rotate on the menu toggle press */
#menuBtn:active { transform: scale(.9); }

/* ============================================================= IMPORTANCE TIERS */
/* tier colors: essential = gold, common = cyan/brand-2, occasional = muted */
.imp-essential { color: var(--amber); }
.imp-common    { color: var(--brand-2); }
.imp-occasional{ color: var(--muted); }

/* header pill next to difficulty */
.ph-imp {
  font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: 11px;
  padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor;
}
/* meta cell value keeps tier color but normal weight sizing */
.meta-v.imp-essential, .meta-v.imp-common, .meta-v.imp-occasional { font-weight: 700; }

/* sidebar dot */
.ni-imp { font-size: 8px; line-height: 1; }

/* dashboard bars */
.db-bar-fill.imp-fill-essential  { background: var(--amber); }
.db-bar-fill.imp-fill-common     { background: var(--brand-2); }
.db-bar-fill.imp-fill-occasional { background: var(--muted); }

/* revision-grid importance cell */
.grid-table td.imp-essential, .grid-table td.imp-common, .grid-table td.imp-occasional { font-weight: 700; letter-spacing: 1px; }