/* ============================================================================
   style.css — shared · Public Persuasion (MSC 482)
   Prior-course design system: Inter, warm-stone + teal. Two-column layout with
   a left sidebar (brand · week dropdown · progress · section nav), a hero with
   live pills, sticky-column checklist table (desktop) + cards (mobile), and a
   mobile drawer + bottom bar.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&display=swap');

:root {
  --ink:#342f2e; --ink2:#4a4443; --muted:#716c6b;
  --bg:#faf9fc; --surface:#ffffff; --surface2:#f5f3f9; --surface3:#ece7f3;
  --line:#e4e0eb; --line2:#cbc5d8;
  --accent:#836eaa; --accent-light:#e4e0ee; --accent-mid:#b6acd1; --accent-deep:#4e2a84;
  --amber:#92560e; --amber-light:#fdf3e3; --amber-mid:#f0c57a;
  --sage:#4f7a55; --sage-light:#edf3ed;
  --rose:#8b3a3a; --rose-light:#fdf0ef;
  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --shadow-sm:0 1px 3px rgba(52,47,46,.06),0 1px 2px rgba(52,47,46,.04);
  --shadow-md:0 4px 16px rgba(52,47,46,.08),0 1px 4px rgba(52,47,46,.04);
  --shadow-lg:0 12px 40px rgba(52,47,46,.12),0 2px 8px rgba(52,47,46,.06);
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --sidebar-w:272px;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:15px; line-height:1.5; font-weight:450; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
h1,h2 { letter-spacing:-.01em; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.layout { display:flex; align-items:flex-start; }
.main { flex:1; min-width:0; padding:22px 32px 100px; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar { width:var(--sidebar-w); flex-shrink:0; position:sticky; top:0; align-self:flex-start;
  height:100vh; overflow-y:auto; background:var(--surface); border-right:1px solid var(--line); }
.sidebar-inner { padding:22px 18px; display:flex; flex-direction:column; gap:20px; position:relative; }
.sb-collapse,.sb-show { position:fixed; z-index:30; width:26px; height:26px; border-radius:7px;
  border:1px solid var(--line2); background:var(--surface); color:var(--muted); cursor:pointer;
  font-size:15px; line-height:1; box-shadow:var(--shadow-sm); }
.sb-collapse { top:16px; left:calc(var(--sidebar-w) - 30px); }
.sb-show { top:16px; left:12px; display:none; }
body.sb-hidden .sidebar { display:none; }
body.sb-hidden .sb-show { display:block; }
.sb-course { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.sb-name { font-size:20px; font-weight:700; margin:2px 0 8px; }
.sb-titleline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sb-dash { font-size:12px; color:var(--muted); font-weight:500; }
.week-select { font-family:var(--font); font-size:12.5px; font-weight:600; color:#fff; background:var(--accent);
  border:1px solid var(--accent); border-radius:8px; padding:4px 26px 4px 10px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; }

.sb-label { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.sb-block { border-top:1px solid var(--line); padding-top:16px; }

.sb-progress { background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 13px; }
.sbp-top { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--ink2); font-weight:500; }
.sbp-top b { color:var(--ink); font-weight:700; } .sbp-pct { color:var(--accent); font-weight:700; }
.sbp-track { height:7px; margin:8px 0; border-radius:99px; background:var(--surface3); overflow:hidden; }
.sbp-fill { height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--accent-mid),var(--accent)); transition:width .4s ease; }
.sbp-time { font-size:11px; color:var(--muted); }
.sbp-sync { font-size:10px; color:var(--muted); opacity:0; transition:opacity .25s; }
.sbp-actions { display:flex; gap:6px; margin-top:10px; }

.zone-toggles { display:flex; flex-direction:column; gap:6px; }
.zone-btn { text-align:left; font-family:var(--font); font-size:12.5px; font-weight:500; color:var(--ink2);
  background:var(--surface2); border:1px solid var(--line); border-radius:8px; padding:7px 10px; cursor:pointer;
  transition:opacity .15s; }
.zone-btn.off { opacity:.42; text-decoration:line-through; }
.zone-btn:hover { border-color:var(--accent-mid); }

.nav-list { display:flex; flex-direction:column; gap:1px; }
.nav-zlabel { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  padding:8px 8px 4px; }
.nav-link { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; color:var(--ink2);
  font-size:13px; font-weight:500; }
.nav-link:hover { background:var(--surface2); text-decoration:none; }
.nav-link.active { background:var(--accent-light); color:var(--accent-deep); }
.nav-ic { font-size:14px; width:18px; text-align:center; }
.nav-entry { display:flex; align-items:center; gap:2px; border-radius:8px; }
.nav-entry .nav-link { flex:1; }
.nav-entry.dragging { opacity:.45; }
.nav-entry.drag-over { box-shadow:inset 0 2px 0 var(--accent); }
.nav-entry.is-hidden .nav-link { opacity:.42; text-decoration:line-through; }
.drag-handle { cursor:grab; color:var(--line2); font-size:12px; padding:0 3px; user-select:none; line-height:1; }
.drag-handle:active { cursor:grabbing; }
.nav-eye { background:none; border:0; color:var(--muted); cursor:pointer; padding:4px; border-radius:6px; display:flex; align-items:center; opacity:.55; }
.nav-eye:hover { background:var(--surface2); opacity:1; }
.section-card.section-hidden { display:none; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { font-family:var(--font); font-size:13px; font-weight:500; color:var(--ink2); background:var(--surface);
  border:1px solid var(--line2); border-radius:9px; padding:7px 12px; cursor:pointer; transition:background .15s,border-color .15s; }
.btn:hover { background:var(--surface2); border-color:var(--accent-mid); }
.btn.sm { font-size:12px; padding:5px 10px; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-deep); }
.btn.ghost { background:transparent; border-color:transparent; color:var(--muted); }
.btn.ghost:hover { color:var(--rose); background:var(--rose-light); }

/* ── Hero + pills ───────────────────────────────────────────────────────── */
.hero { position:sticky; top:0; z-index:40; margin-bottom:18px;
  background:linear-gradient(135deg,#faf8fc 0%,#f1ecf7 55%,#eae2f2 100%);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  padding:22px 26px 20px; transition:padding .22s ease,border-radius .22s ease,box-shadow .22s ease; }
.hero.is-stuck { padding:11px 22px 10px; border-radius:var(--r-md); box-shadow:var(--shadow-md); }
.hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hero-week { display:flex; align-items:center; gap:8px; }
.hero-dash { font-size:12px; color:var(--muted); font-weight:500; }
.hero-eyebrow { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); transition:opacity .15s; }
.hero.is-stuck .hero-eyebrow { display:none; }
.hero-title { font-size:clamp(23px,3.6vw,32px); font-weight:700; line-height:1.1; margin:6px 0 4px; }
.hero.is-stuck .hero-title { font-size:16px; margin:0; }
.hero-sub { font-size:13px; color:var(--muted); font-weight:500; margin:0 0 12px; }
.hero.is-stuck .hero-sub { display:none; }
.hero.is-stuck .pill-row { margin-top:6px; }
.pill-row { display:flex; gap:8px; flex-wrap:wrap; }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink2);
  background:var(--surface); border:1px solid var(--line2); border-radius:99px; padding:5px 12px; }
.pill-accent { background:var(--accent-light); border-color:var(--accent-mid); color:var(--accent-deep); }
.pill-amber { background:var(--amber-light); border-color:var(--amber-mid); color:var(--amber); }
.pill-next { cursor:pointer; } .pill-next:hover { border-color:var(--accent); }
.pill-prog { cursor:pointer; }
.pill-prog-track { width:34px; height:6px; border-radius:99px; background:var(--surface3); overflow:hidden; }
.pill-prog-fill { display:block; height:100%; width:0; background:var(--accent); transition:width .4s ease; }

/* ── Section cards ──────────────────────────────────────────────────────── */
.section-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); margin-top:18px; overflow:hidden; scroll-margin-top:16px; }
.section-card.zone-off { display:none; }
.section-head { padding:15px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.section-head h2 { margin:0; font-size:15px; font-weight:700; }
.section-head .sh-emoji { font-size:16px; }
.head-tools { margin-left:auto; }
.section-body { padding:16px 20px; } .section-body.flush { padding:0; }
.placeholder { padding:22px 20px; color:var(--muted); font-size:13.5px; line-height:1.55; }
.placeholder b { color:var(--ink2); font-weight:600; }
.phase-tag { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--amber);
  background:var(--amber-light); border:1px solid var(--amber-mid); border-radius:6px; padding:2px 7px; margin-left:auto; }
.section-head .phase-tag + .head-tools,.section-head .head-tools:not(:last-child){margin-left:10px;}

/* ── Deliverables ───────────────────────────────────────────────────────── */
.deliv-empty { padding:16px 20px; font-size:13.5px; color:var(--ink2); line-height:1.55; }
.deliv-empty a { font-weight:600; }
.deliv-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.deliv-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  font-weight:600; padding:10px 20px; background:var(--surface2); }
.deliv-table td { padding:12px 20px; border-top:1px solid var(--line); }
.deliv-pts { font-weight:700; color:var(--accent); white-space:nowrap; }

/* ── Checklist: desktop table ───────────────────────────────────────────── */
.check-wrap { overflow-x:auto; }
.check-table { min-width:900px; width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.check-table thead th { position:sticky; top:0; z-index:3; background:var(--surface3); text-align:left;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700;
  padding:9px 12px; border-bottom:1px solid var(--line2); white-space:nowrap; }
.check-table td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.check-table th:nth-child(1),.check-table td:nth-child(1){ position:sticky; left:0; z-index:2; width:40px; text-align:center; background:var(--surface); }
.check-table th:nth-child(2),.check-table td:nth-child(2){ position:sticky; left:40px; z-index:2; width:30px; text-align:center; color:var(--muted); background:var(--surface); font-variant-numeric:tabular-nums; }
.check-table th:nth-child(3),.check-table td:nth-child(3){ position:sticky; left:70px; z-index:2; min-width:200px; max-width:250px; background:var(--surface); }
.check-table thead th:nth-child(-n+3){ z-index:4; background:var(--surface3); }
.check-table tbody tr:hover td { background:var(--surface2); }
.grp-row td { background:var(--accent-light) !important; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-deep); padding:7px 12px; position:sticky; left:0; }
.grp-row.completed td { background:var(--sage-light) !important; color:var(--sage); }
.ck { appearance:none; -webkit-appearance:none; width:19px; height:19px; border:1.5px solid var(--line2);
  border-radius:5px; background:var(--surface); cursor:pointer; position:relative; vertical-align:middle; transition:background .15s,border-color .15s; }
.ck:hover { border-color:var(--accent); }
.ck:checked { background:var(--accent); border-color:var(--accent); }
.ck:checked::after { content:''; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg); }
.ck:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.task-cell .t-emoji { margin-right:6px; }
.task-cell a { font-weight:600; color:var(--accent); line-height:1.3; }
.task-cell .t-note { font-size:11px; color:var(--muted); margin-top:3px; }
.task-cell .t-nolink { color:var(--ink2); font-weight:600; }
.task-cell .t-nolink-tag { font-size:10px; color:var(--muted); font-style:italic; margin-left:4px; }
.cap-cell { color:var(--ink2); max-width:220px; }
.when-cell { white-space:nowrap; color:var(--ink2); }
.why-cell { color:var(--muted); max-width:200px; font-size:12.5px; }
.eff-cell { white-space:nowrap; color:var(--ink2); font-variant-numeric:tabular-nums; }
.mode-cell { text-align:center; }
.mode-badge { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; font-size:13px; }
.mode-desk { background:#e4e8ed; } .mode-move { background:#f0ede8; } .mode-flex { background:#dce8f0; }
.check-table tr.done td:nth-child(n+3){ opacity:.55; }
.check-table tr.done .task-cell a,.check-table tr.done .task-cell .t-nolink { text-decoration:line-through; color:var(--muted); font-weight:500; }
.check-table tfoot td { position:static; width:auto; min-width:0; max-width:none; left:auto;
  padding:12px; border-top:2px solid var(--line2); background:var(--surface2); font-size:12.5px; }
.check-table tfoot td:last-child { text-align:right; }
.check-table tfoot .foot-total td { font-weight:700; color:var(--ink); }
.check-table tfoot .foot-remain td { color:var(--accent-deep); font-weight:600; }
.check-footer { display:flex; justify-content:space-between; gap:16px; padding:12px 14px;
  border-top:2px solid var(--line2); background:var(--surface2); }
.check-footer span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.check-footer b { font-size:14px; color:var(--ink); }
.check-footer div:last-child { text-align:right; }
.check-footer div:last-child b { color:var(--accent-deep); }

/* ── Checklist: mobile cards ────────────────────────────────────────────── */
.check-cards { display:none; }
.grp-card { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-light); padding:8px 14px; }
.grp-card.completed { background:var(--sage-light); color:var(--sage); }
.ccard { display:grid; grid-template-columns:26px 1fr 28px; gap:10px; align-items:start; padding:13px 14px; border-bottom:1px solid var(--line); background:var(--surface); }
.ccard.done { background:var(--surface2); }
.ccard .ck { margin-top:1px; }
.ccard-body { min-width:0; }
.ccard-task { font-size:13.5px; font-weight:600; color:var(--accent); line-height:1.35; }
.ccard.done .ccard-task { color:var(--muted); text-decoration:line-through; font-weight:500; }
.ccard-cap { font-size:12px; color:var(--ink2); margin-top:3px; line-height:1.35; }
.ccard-meta { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:5px; font-size:10.5px; color:var(--muted); }
.ccard-meta .dot { width:2px; height:2px; border-radius:50%; background:var(--line2); }
.ccard .mode-badge { width:24px; height:24px; margin-top:1px; }

/* ── Mobile drawer + bottom bar ─────────────────────────────────────────── */
.m-backdrop { position:fixed; inset:0; background:rgba(28,25,23,.4); z-index:70; opacity:0; pointer-events:none; transition:opacity .25s; }
.m-backdrop.show { opacity:1; pointer-events:auto; }
.m-drawer { position:fixed; top:0; left:0; bottom:0; width:80%; max-width:300px; background:var(--surface); z-index:71;
  transform:translateX(-105%); transition:transform .3s cubic-bezier(.4,0,.2,1); overflow-y:auto; box-shadow:var(--shadow-lg); padding:18px; }
.m-drawer.show { transform:translateX(0); }
.m-drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.m-drawer-head .sb-name { margin:0; }
.m-close { width:30px; height:30px; border-radius:8px; border:1px solid var(--line2); background:var(--surface); font-size:18px; cursor:pointer; color:var(--muted); }
.m-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:40; background:var(--surface);
  border-top:1px solid var(--line); box-shadow:0 -2px 10px rgba(28,25,23,.05); padding:6px 4px env(safe-area-inset-bottom); }
.m-bar-btn { flex:1; background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 0; cursor:pointer; color:var(--ink2); font-family:var(--font); }
.m-bar-ic { font-size:18px; } .m-bar-lb { font-size:10px; font-weight:600; }

/* ── Hub (index.html) ───────────────────────────────────────────────────── */
.wk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.wk-card { display:block; padding:14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow-sm); transition:border-color .15s,transform .1s; }
.wk-card:hover { border-color:var(--accent-mid); text-decoration:none; transform:translateY(-1px); }
.wk-card.current { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.wk-card.complete { background:var(--accent-light); }
.wk-card-top { display:flex; align-items:center; justify-content:space-between; }
.wk-num { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.wk-now { font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--accent); border-radius:99px; padding:2px 7px; }
.wk-card-title { font-size:14px; font-weight:700; line-height:1.25; margin:7px 0 3px; color:var(--ink); }
.wk-card-range { font-size:11.5px; color:var(--muted); }
.wk-card-bar { height:6px; border-radius:99px; background:var(--surface3); overflow:hidden; margin:10px 0 8px; }
.wk-card-bar > span { display:block; height:100%; background:linear-gradient(90deg,var(--accent-mid),var(--accent)); border-radius:99px; }
.wk-card.complete .wk-card-bar > span { background:var(--sage); }
.wk-card-foot { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:11px; color:var(--ink2); }
.wk-card-deliv { color:var(--accent-deep); font-weight:600; }

.sched-table { width:100%; border-collapse:collapse; font-size:13px; }
.sched-table td { padding:11px 14px; border-top:1px solid var(--line); vertical-align:top; }
.sched-table tr:first-child td { border-top:0; }
.sched-table tr.done { opacity:.5; }
.sched-icon { width:24px; font-size:15px; }
.sched-date { white-space:nowrap; font-weight:600; color:var(--ink); }
.sched-real { font-weight:400; color:var(--muted); font-size:11px; }
.sched-label { font-weight:500; }
.sched-wk { font-size:10px; font-weight:700; color:var(--muted); background:var(--surface2); border-radius:5px; padding:1px 5px; margin-left:4px; }
.sched-kind { text-align:right; white-space:nowrap; color:var(--accent-deep); font-weight:700; font-size:12px; }

.pin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.pin-card { display:block; padding:16px; border:1px solid var(--accent-mid); border-radius:var(--r-md); background:var(--accent-light); box-shadow:var(--shadow-sm); transition:transform .1s,box-shadow .15s; }
a.pin-card:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); text-decoration:none; }
.pin-card.pin-done { border-color:var(--sage); background:var(--surface2); opacity:.75; }
.pin-card.pin-soon { background:var(--surface2); border-style:dashed; }
.pin-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.pin-badge { font-size:13px; font-weight:700; color:var(--accent-deep); }
.pin-count { font-size:11px; font-weight:700; color:#fff; background:var(--accent); border-radius:99px; padding:3px 9px; white-space:nowrap; }
.pin-card.pin-soon .pin-count { background:var(--muted); }
.pin-check { font-size:11px; font-weight:700; color:#fff; background:var(--sage); border-radius:99px; padding:3px 9px; white-space:nowrap; }
.pin-target { font-size:15px; font-weight:700; color:var(--ink); margin-top:9px; }
.pin-real { font-size:11.5px; color:var(--ink2); margin-top:3px; }
.pin-links { display:flex; gap:12px; margin-top:9px; }
.pin-links a { font-size:12px; font-weight:700; color:var(--accent-deep); }

/* ── Phase 2 narrative content ──────────────────────────────────────────── */
.approach-body { padding:20px 22px 22px; }
.approach-body > p { font-size:13.5px; line-height:1.6; color:var(--ink2); margin:0 0 12px; }
.approach-body > p:last-of-type { margin-bottom:16px; }
.approach-body b { color:var(--ink); }

.callout { border-left:3px solid var(--accent); background:var(--accent-light); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:13px 16px; margin:14px 0; font-size:13px; color:var(--ink2); line-height:1.55; }
.callout b { color:var(--accent-deep); }
.callout-warn { border-left-color:var(--amber); background:#fbf3e6; }
.callout-warn b { color:#7a4d0c; }
.callout-title { display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:5px; }
.callout-warn .callout-title { color:#7a4d0c; }

.pillar-row { display:flex; gap:12px; margin:12px 0; flex-wrap:wrap; }
.pillar { flex:1 1 200px; border:1px solid var(--line2); border-radius:var(--r-sm); padding:12px 14px; background:var(--surface); }
.pillar h5 { margin:0 0 5px; font-size:13px; font-weight:700; color:var(--accent-deep); }
.pillar p { margin:0; font-size:12px; color:var(--ink2); line-height:1.5; }

.order-list { list-style:none; margin:14px 0 0; padding:0; counter-reset:ord; }
.order-list li { counter-increment:ord; position:relative; padding:8px 0 8px 32px; font-size:13px; color:var(--ink2); line-height:1.5; border-top:1px solid var(--line); }
.order-list li:first-child { border-top:0; }
.order-list li::before { content:counter(ord); position:absolute; left:0; top:8px; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.order-list b { color:var(--ink); }

.idea-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; padding:20px 22px 22px; }
.idea-card { border:1px solid var(--line2); border-radius:var(--r-md); padding:15px 16px; background:var(--surface); }
.idea-card h4 { margin:0 0 7px; font-size:14px; font-weight:700; color:var(--ink); line-height:1.3; }
.idea-card p { margin:0; font-size:12.5px; color:var(--ink2); line-height:1.55; }
.src-tag { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:99px; padding:2px 8px; margin-bottom:8px; }
.src-tag.src-lecture { background:var(--accent-light); color:var(--accent-deep); }
.src-tag.src-reading { background:#e7f0e8; color:#2f5c34; }
.src-tag.src-live { background:#fbf3e6; color:#7a4d0c; }

.notes-block { padding:20px 22px 22px; }
.concept { padding:16px 0; border-top:1px solid var(--line); }
.concept:first-child { border-top:0; padding-top:0; }
.concept h4 { margin:0 0 8px; font-size:14.5px; font-weight:700; color:var(--ink); }
.concept-row { display:grid; grid-template-columns:120px 1fr; gap:4px 12px; margin-bottom:6px; font-size:12.5px; line-height:1.55; }
.concept-row dt { font-weight:700; color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding-top:2px; }
.concept-row dd { margin:0; color:var(--ink2); }

.copy-wrap { padding:20px 22px 22px; display:flex; flex-direction:column; gap:14px; }
.copybox { border:1px solid var(--line2); border-radius:var(--r-md); overflow:hidden; background:var(--surface); }
.copyhead { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:12px 14px; background:var(--surface2); border-bottom:1px solid var(--line); }
.copyhead strong { font-size:13px; color:var(--ink); }
.copyhead .meta-desc { font-size:11.5px; color:var(--muted); margin-top:2px; }
.copybody { margin:0; padding:14px; font-family:var(--font); font-size:12px; line-height:1.6; color:var(--ink2); white-space:pre-wrap; word-wrap:break-word; max-height:260px; overflow-y:auto; }
.copy-btn.copied { background:var(--sage); border-color:var(--sage); color:#fff; }

/* ── Celebration ────────────────────────────────────────────────────────── */
#confetti { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:60; display:none; }
#banner { position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-160%);
  background:linear-gradient(135deg,var(--accent),var(--accent-deep)); color:#fff; padding:14px 26px; border-radius:14px;
  box-shadow:0 12px 40px rgba(61,107,110,.4); text-align:center; z-index:72; transition:transform .5s cubic-bezier(.2,.9,.3,1.2); }
#banner.show { transform:translateX(-50%) translateY(0); }
#banner .bt { font-size:17px; font-weight:700; } #banner .bs { font-size:12.5px; opacity:.9; margin-top:2px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .sidebar,.sb-collapse,.sb-show { display:none !important; }
  .main { padding:16px 18px 90px; }
  .hero-mtitle { display:flex; }
  .m-bar { display:flex; }
}
@media (max-width:600px) {
  .check-wrap { display:none; } .check-cards { display:block; }
}
@media (prefers-reduced-motion:reduce){ *,.sbp-fill,.bar>span{ transition:none !important; } }