/* Claude for Friends: "Calm precision" design language.
   Two-view learning app: home (course path) and lesson (focus mode).
   Tokens are semantic and dual-mode; the accent is cobalt, locked
   page-wide; green appears only on completed states.
   Spec: docs/superpowers/specs/2026-07-05-redesign-calm-precision-design.md */

:root{
  --bg:#FAFAF9;
  --surface:#FCFCFC;
  --text:#1A1A1E;
  --text-soft:#55555E;
  --text-faint:#8A8A93;
  --line:#E6E6E4;
  --accent:#1D4ED8;
  --accent-strong:#1A44BE;
  --accent-soft:#EDF2FE;
  --ok:#15803D;
  --ok-soft:#E9F5EE;
  --err:#B3403A;
  --err-soft:#FBEDEC;
  --code-bg:#1C1C21;
  --code-text:#E6E6EA;
  --code-btn:#33333B;
  --sans:'Geist',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --r:10px;
  --ease:cubic-bezier(0.23,1,0.32,1);
  --shadow:0 1px 2px rgba(20,20,23,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141417;
    --surface:#1B1B1F;
    --text:#F2F2F4;
    --text-soft:#A6A6AF;
    --text-faint:#71717A;
    --line:#2A2A30;
    --accent:#8FA9FF;
    --accent-strong:#A7BCFF;
    --accent-soft:#20263B;
    --ok:#4CC38A;
    --ok-soft:#182B21;
    --err:#F2837C;
    --err-soft:#33201E;
    --code-bg:#101013;
    --code-text:#D9D9DF;
    --code-btn:#2C2C33;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--accent);text-underline-offset:3px}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono);font-size:12.5px;color:var(--text-faint)}

/* view transition: entry only, guarded */
@media (prefers-reduced-motion: no-preference){
  .view{animation:enter 180ms var(--ease)}
  @keyframes enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---------- shared column ---------- */
.col{max-width:680px;margin:0 auto;padding:0 24px}

/* ---------- primary button ---------- */
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--bg);border:0;border-radius:var(--r);font-family:var(--sans);font-size:15px;font-weight:560;padding:13px 22px;cursor:pointer;text-decoration:none;transition:background 150ms var(--ease),transform 160ms var(--ease)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--accent-strong)}}
.btn-primary:active{transform:scale(0.98)}

/* ================= HOME ================= */
.hero{padding:88px 0 64px}
.hero h1{font-size:clamp(34px,5.4vw,48px);font-weight:650;letter-spacing:-.022em;line-height:1.05;margin-bottom:16px}
.hero .lead{color:var(--text-soft);max-width:56ch;margin-bottom:28px}
.hero .meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:36px;font-family:var(--mono);font-size:12.5px;color:var(--text-faint)}
.hero .meta b{color:var(--text-soft);font-weight:500}
@media(max-width:640px){.hero{padding:56px 0 48px}}

/* ---------- course path ---------- */
.path{padding-bottom:48px}
.pmodule{padding:36px 0 8px}
.pmodule + .pmodule{border-top:1px solid var(--line)}
.pmodule-head{margin-bottom:20px}
.pmodule-head h2{font-size:22px;font-weight:620;letter-spacing:-.012em}
.pmodule-head .ptag{color:var(--text-faint);font-size:14px;margin-top:2px}
.pmodule-head .pintro{color:var(--text-soft);font-size:15px;margin-top:12px;max-width:60ch}
.plist{list-style:none;position:relative;margin:8px 0 24px}
.plist::before{content:"";position:absolute;left:10px;top:14px;bottom:14px;width:1.5px;background:var(--line)}
.pl{position:relative;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:14px;padding:11px 10px 11px 0;text-decoration:none;color:var(--text);border-radius:var(--r);transition:background 150ms var(--ease)}
@media (hover:hover) and (pointer:fine){.pl:hover{background:var(--surface)}}
.pl .node{position:relative;z-index:1;width:21px;height:21px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line);transition:background 300ms var(--ease),border-color 300ms var(--ease)}
.pl .pl-title{font-size:15.5px;font-weight:480;line-height:1.4}
.pl .pl-min{font-family:var(--mono);font-size:12px;color:var(--text-faint);white-space:nowrap}
.pl.done .node{background:var(--ok);border-color:var(--ok)}
.pl.done .node::after{content:"";position:absolute;left:6px;top:4.5px;width:5px;height:9px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pl.done .pl-title{color:var(--text-soft)}
.pl.next .node{border-color:var(--accent);border-width:2px}
.pl.next .node::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--accent)}
.pl.next .pl-title{font-weight:560}

/* ---------- graduation + footer ---------- */
.grad{border-top:1px solid var(--line);padding:44px 0 8px}
.grad h2{font-size:22px;font-weight:620;letter-spacing:-.012em;margin-bottom:12px}
.grad p{color:var(--text-soft);max-width:60ch;margin:10px 0;font-size:15.5px}
.grad p b{color:var(--text)}
.grad ul{margin:12px 0 0 20px;color:var(--text-soft);font-size:15.5px}
.grad li{margin:8px 0}
.savenote{font-family:var(--mono);font-size:12px;color:var(--text-faint);margin-top:20px}
footer{padding:36px 0 72px;color:var(--text-faint);font-size:13.5px}

/* ================= LESSON ================= */
.bar{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.bar .col{display:flex;align-items:center;justify-content:space-between;height:56px}
.bar .back{color:var(--text-soft);text-decoration:none;font-size:14px;font-weight:500}
@media (hover:hover) and (pointer:fine){.bar .back:hover{color:var(--text)}}
.progress{height:2px;background:var(--line)}
.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width 400ms var(--ease)}

.lesson-head{padding:52px 0 8px}
.crumb{font-size:14px;color:var(--text-faint);margin-bottom:10px}
.lesson-head h1{font-size:clamp(27px,4.4vw,34px);font-weight:640;letter-spacing:-.018em;line-height:1.15}
.lmeta{display:block;margin-top:12px}

.lesson-body{padding:8px 0 8px}
.lesson-body p{margin:16px 0;max-width:66ch}
.lesson-body ul,.lesson-body ol{margin:14px 0 16px 22px;max-width:64ch}
.lesson-body li{margin:8px 0}
.lesson-body b{font-weight:600}
.inline-code{font-family:var(--mono);font-size:14px;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 6px;white-space:nowrap}

/* practice block */
.practice{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:26px 0;box-shadow:var(--shadow)}
.practice .plabel{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.practice p{margin:10px 0}
.prompt{position:relative;background:var(--code-bg);color:var(--code-text);font-family:var(--mono);font-size:13px;line-height:1.6;border-radius:var(--r);padding:18px 20px;margin:14px 0 4px;white-space:pre-wrap}
.copy{position:absolute;top:10px;right:10px;background:var(--code-btn);color:var(--code-text);border:0;border-radius:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:6px 10px;cursor:pointer;transition:opacity 150ms var(--ease),transform 160ms var(--ease)}
@media (hover:hover) and (pointer:fine){.copy:hover{opacity:.85}}
.copy:active{transform:scale(0.96)}

.note{background:var(--accent-soft);border:1px solid transparent;border-radius:var(--r);padding:14px 18px;margin:20px 0;font-size:15px;color:var(--text-soft)}
.note b{color:var(--text)}

.donewhen{font-size:14.5px;color:var(--text-soft);border-top:1px dashed var(--line);margin-top:26px;padding-top:16px;max-width:66ch}
.donewhen b{color:var(--text)}

/* mark done */
.markdone{display:inline-flex;align-items:center;gap:10px;margin-top:24px;background:var(--accent);color:var(--bg);border:0;border-radius:var(--r);font-family:var(--sans);font-size:15px;font-weight:560;padding:13px 22px;cursor:pointer;transition:background 150ms var(--ease),transform 160ms var(--ease)}
@media (hover:hover) and (pointer:fine){.markdone:hover{background:var(--accent-strong)}}
.markdone:active{transform:scale(0.98)}
.markdone.on{background:var(--ok-soft);color:var(--ok)}

/* quiz */
.quiz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;margin-top:32px}
.quiz-title{font-size:17px;font-weight:620;letter-spacing:-.01em}
.quiz-sub{font-size:14px;color:var(--text-faint);margin-top:4px}
.qq{padding:18px 0 4px;margin-top:14px;border-top:1px solid var(--line)}
.qq-text{font-weight:530;font-size:15.5px;margin-bottom:12px}
.qq-opts{display:grid;gap:8px}
.qopt{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;font:inherit;font-size:14.5px;line-height:1.45;color:var(--text);cursor:pointer;transition:border-color 150ms var(--ease),background 150ms var(--ease),transform 160ms var(--ease)}
@media (hover:hover) and (pointer:fine){.qopt:not(:disabled):hover{border-color:var(--text-faint)}}
.qopt:not(:disabled):active{transform:scale(0.99)}
.qopt:disabled{cursor:default}
.qopt.ok{border-color:var(--ok);background:var(--ok-soft)}
.qopt.no{border-color:var(--err);background:var(--err-soft);opacity:.9}
.qopt.dim{opacity:.5}
.qq-why{font-size:13.5px;color:var(--text-soft);margin:10px 0 8px}
.quiz-status{margin-top:18px}
.quiz.passed .quiz-status{color:var(--ok);font-weight:500}

/* lesson footer nav */
.lnav{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);margin-top:40px;padding:24px 0 72px}
.lnav a{text-decoration:none;font-size:15px;border-radius:var(--r)}
.lnav .prev{color:var(--text-soft);font-weight:480}
@media (hover:hover) and (pointer:fine){.lnav .prev:hover{color:var(--text)}}
.lnav .nextl{color:var(--accent);font-weight:560}
@media (hover:hover) and (pointer:fine){.lnav .nextl:hover{color:var(--accent-strong)}}