/* Mental Game platform chrome.
   Same tokens as the course pages so the application and the content
   read as one product. */

:root{
  --paper:#f7f9f5;
  --raised:#ffffff;
  --sunk:#eef1ec;
  --ink:#16221f;
  --ink-soft:#3a4a44;
  --ink-mute:#6b7a72;
  --line:#d9e0d8;
  --line-soft:#e7ebe4;

  --accent:#2f7c50;
  --accent-bg:#e9f2ed;
  --accent-ink:#0f2e1c;

  --danger:#b3392c;
  --danger-bg:#f4e9e7;

  --shadow:0 1px 2px rgba(22,34,31,.05), 0 10px 26px -16px rgba(22,34,31,.22);
  --radius:12px;

  --display:'Bricolage Grotesque','Georgia',serif;
  --body:'Karla','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#131a17; --raised:#1a2320; --sunk:#101613;
    --ink:#eef3ef; --ink-soft:#c3cec7; --ink-mute:#8a988f;
    --line:#2c3733; --line-soft:#212b27;
    --accent:#4dc480; --accent-bg:#1e2f25; --accent-ink:#c5decf;
    --danger:#df7266; --danger-bg:#2a1d1b;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#131a17; --raised:#1a2320; --sunk:#101613;
  --ink:#eef3ef; --ink-soft:#c3cec7; --ink-mute:#8a988f;
  --line:#2c3733; --line-soft:#212b27;
  --accent:#4dc480; --accent-bg:#1e2f25; --accent-ink:#c5decf;
  --danger:#df7266; --danger-bg:#2a1d1b;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -16px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 28px; background:var(--paper); border-bottom:1px solid var(--line);
}
.brand{
  display:flex; flex-direction:column; gap:1px;
  font-family:var(--display); font-weight:800; font-size:16px;
  color:var(--ink); text-decoration:none;
}
.brand small{
  font-family:var(--mono); font-weight:500; font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-mute);
}
.topbar-right{ display:flex; align-items:center; gap:14px; }
.who{ font-family:var(--mono); font-size:11.5px; color:var(--ink-mute); }
.linkbtn{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-mute);
  background:none; border:none; padding:0; cursor:pointer; text-decoration:underline;
}
.linkbtn:hover{ color:var(--ink); }

/* ---------- layout ---------- */
.page{ max-width:760px; margin:0 auto; padding:40px 28px 80px; }
.page-narrow{ max-width:440px; margin:0 auto; padding:64px 28px 80px; }

h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(26px,4.4vw,36px); line-height:1.1;
  letter-spacing:-.01em; text-wrap:balance; margin:0 0 10px; color:var(--ink);
}
h2{ font-family:var(--display); font-weight:700; font-size:19px; margin:34px 0 12px; color:var(--ink); }
p{ margin:0 0 14px; color:var(--ink-soft); font-size:15px; max-width:66ch; }
.dek{ color:var(--ink-soft); font-size:15.5px; margin-bottom:26px; }

/* ---------- cards ---------- */
.card{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow);
}
.card + .card{ margin-top:14px; }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
label{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);
}
input[type="text"], input[type="email"], input[type="password"]{
  font-family:var(--body); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:9px; padding:11px 13px; width:100%;
}
input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-bg); }
.hint{ font-size:12.5px; color:var(--ink-mute); margin:0; }

.btn{
  font-family:var(--body); font-weight:700; font-size:15px;
  color:var(--paper); background:var(--ink); border:1px solid var(--ink);
  border-radius:999px; padding:11px 22px; cursor:pointer; width:100%;
}
.btn:hover{ opacity:.9; }

.alert{
  border-radius:9px; padding:11px 14px; margin-bottom:18px;
  font-size:14px; border:1px solid;
  color:var(--danger); background:var(--danger-bg);
  border-color:color-mix(in srgb, var(--danger) 30%, transparent);
}

/* ---------- dashboard bits ---------- */
.badge{
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent-bg);
  border-radius:999px; padding:4px 11px; margin-right:6px;
}
.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:14.5px; }
.kv dt{ font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute); padding-top:3px; }
.kv dd{ margin:0; color:var(--ink); }

.perm-list{ list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.perm-list li{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);
  padding:6px 0; border-top:1px solid var(--line-soft);
}
.perm-list li:first-child{ border-top:none; }
.perm-list .pk{ color:var(--ink-mute); }

.phase-note{
  margin-top:26px; padding:16px 20px;
  background:var(--sunk); border:1px dashed var(--line);
  border-radius:var(--radius); font-size:14px; color:var(--ink-soft);
}
.phase-note strong{ color:var(--ink); }
.phase-note ul{ margin:8px 0 0; padding-left:20px; }
.phase-note li{ margin-bottom:4px; }

footer.site{
  border-top:1px solid var(--line); margin-top:60px; padding:20px 28px 40px;
  font-family:var(--mono); font-size:11px; color:var(--ink-mute); text-align:center;
}

/* ---------- course navigation (phase 2) ---------- */
.topbar-nav{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--ink-mute); text-decoration:none;
}
.topbar-nav:hover{ color:var(--ink); text-decoration:underline; }

.pillar-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:26px 0 8px; }
@media (max-width:680px){ .pillar-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .pillar-cards{ grid-template-columns:1fr; } }
.pcard{
  display:block; text-decoration:none; padding:16px 16px 18px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card-bg, var(--raised));
  transition:transform .12s ease, box-shadow .12s ease;
}
.pcard:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.pcard-dot{ display:block; width:10px; height:10px; border-radius:50%;
  margin-bottom:10px; background:var(--card-accent, var(--ink)); }
.pcard-name{ font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:3px; }
.pcard-fw{ font-size:12.5px; color:var(--ink-soft); margin-bottom:8px; }
.pcard-level{
  font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute);
}

.level-list{ display:grid; gap:10px; margin:8px 0 4px; }
.level-row{
  display:grid; grid-template-columns:38px 1fr auto; gap:16px; align-items:center;
  padding:16px 18px; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--raised);
}
a.level-row:hover{ border-color:var(--accent); }
.level-row.is-locked{ background:var(--sunk); border-style:dashed; opacity:.72; }
.level-n{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:14px; font-weight:600;
  background:var(--accent-bg); color:var(--accent-ink);
}
.level-row.is-locked .level-n{ background:var(--line-soft); color:var(--ink-mute); }
.level-name{ font-family:var(--display); font-weight:800; font-size:16px; color:var(--ink); }
.level-fw{ font-size:13.5px; color:var(--ink-soft); margin-top:1px; }
.level-desc{ font-size:12.5px; color:var(--ink-mute); margin-top:3px; }
.level-state{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap;
}
.level-state.is-open{ color:var(--accent); }

.ws-note{
  font-size:13.5px; color:var(--ink-mute); font-style:italic;
  margin:0 0 16px; padding-left:12px; border-left:2px solid var(--line);
}

.btn-inline{
  display:inline-block; font-weight:700; font-size:14.5px; text-decoration:none;
  color:var(--paper); background:var(--ink); border-radius:999px; padding:10px 20px;
}
.btn-inline:hover{ opacity:.9; }

/* ---------- the assessment (phase 3) ---------- */
.scale-key{
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:20px 0 24px;
  font-family:var(--mono); font-size:11.5px; text-align:center; color:var(--ink-mute);
}
.scale-key > div{
  padding:10px 6px; background:var(--raised);
  border:1px solid var(--line); border-radius:10px;
}
.scale-key b{ display:block; color:var(--ink); font-size:13px; }
.scale-key span{ display:block; margin-top:3px; font-size:10.5px; }

.q-pillar{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px 6px; margin:0 0 18px; background:var(--raised);
}
.q-pillar legend{
  display:flex; align-items:center; gap:9px; padding:0 6px;
  font-family:var(--display); font-weight:800; font-size:17px; color:var(--ink);
}
.q-dot{ width:11px; height:11px; border-radius:50%; background:var(--accent); flex:none; }
.q-lead{ color:var(--ink-mute); font-size:13.5px; margin:6px 0 14px; }

.q-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; padding:13px 0; border-top:1px solid var(--line-soft);
}
.q-row:first-of-type{ border-top:none; }
.q-statement{ flex:1 1 320px; font-size:14.5px; color:var(--ink); margin:0; max-width:none; }
.q-scale{ display:flex; gap:14px; flex:none; }
.q-opt{ display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; }
.q-opt input{ width:17px; height:17px; accent-color:var(--accent); cursor:pointer; }
.q-opt span{ font-family:var(--mono); font-size:10.5px; color:var(--ink-mute); }

.q-actions{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin:10px 0 40px; padding:14px 18px;
  position:sticky; bottom:14px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:999px; box-shadow:var(--shadow);
}
.q-progress{ font-family:var(--mono); font-size:12px; color:var(--ink-mute); }
.q-progress.is-complete{ color:var(--accent); font-weight:600; }
.btn-auto{ width:auto; }

/* ---------- results ---------- */
.result-table{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:8px 0 4px; }
.result-row{
  display:grid; grid-template-columns:1.5fr 0.7fr 1.6fr; gap:16px; align-items:start;
  padding:13px 18px; border-top:1px solid var(--line-soft); background:var(--raised);
  font-size:14.5px;
}
.result-row:first-child{ border-top:none; }
.result-row.is-head{
  background:var(--sunk); font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);
}
.result-pillar{ display:flex; align-items:center; gap:9px; font-weight:600; color:var(--ink); }
.result-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); flex:none; }
.result-score{ font-family:var(--mono); }
.result-score .of{ color:var(--ink-mute); font-size:12px; }
.result-level{ font-weight:600; }
.result-note{ font-size:12.5px; color:var(--ink-mute); margin-top:4px; }
.n{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- profile ---------- */
.saved-note{
  background:var(--accent-bg); color:var(--accent-ink);
  border-radius:9px; padding:10px 14px; margin-bottom:18px; font-size:14px;
}
.due-card{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding:18px 22px; margin:6px 0 10px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.due-card.is-attention{ border-left:3px solid var(--accent); }
.due-state{ font-family:var(--display); font-weight:800; font-size:17px; color:var(--ink); }
.due-detail{ font-size:13.5px; color:var(--ink-soft); margin-top:3px; max-width:56ch; }

.pillar-rows{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.prow{
  display:grid; grid-template-columns:1.3fr 0.8fr 1fr 1fr; gap:16px; align-items:center;
  padding:13px 18px; border-top:1px solid var(--line-soft); background:var(--raised);
}
.prow:first-child{ border-top:none; }
@media (max-width:700px){
  .prow{ grid-template-columns:1fr 1fr; row-gap:10px; }
}
.prow-name{ display:flex; align-items:center; gap:9px; font-size:14.5px; }
.prow-name a{ color:var(--ink); text-decoration:none; font-weight:600; }
.prow-name a:hover{ text-decoration:underline; }
.prow-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); flex:none; }
.prow-score{ font-family:var(--mono); font-size:14px; color:var(--ink); }
.prow-score .of{ color:var(--ink-mute); font-size:11.5px; }
.prow-score .ps-none{ color:var(--ink-mute); }
.delta{ margin-left:8px; font-size:11.5px; }
.delta.up{ color:#2f7c50; }
.delta.down{ color:#b3392c; }
.delta.flat{ color:var(--ink-mute); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .delta.up{ color:#4dc480; }
  :root:not([data-theme="light"]) .delta.down{ color:#df7266; }
}

/* sparkline: one series per pillar, fixed 6-30 y-scale so the nine
   small multiples are comparable at a glance. */
.prow-trend svg{ display:block; overflow:visible; }
.spark-base{ stroke:var(--line); stroke-width:1; }
.spark-line{
  fill:none; stroke:var(--spark-l); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.spark-end{ fill:var(--spark-l); stroke:var(--raised); stroke-width:2; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .spark-line{ stroke:var(--spark-d); }
  :root:not([data-theme="light"]) .spark-end{ fill:var(--spark-d); }
}
:root[data-theme="dark"] .spark-line{ stroke:var(--spark-d); }
:root[data-theme="dark"] .spark-end{ fill:var(--spark-d); }
.trend-none{ font-family:var(--mono); font-size:10.5px; color:var(--ink-mute); }

.prow-level select{
  font-family:var(--body); font-size:13.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:8px; padding:7px 10px; width:100%; max-width:170px;
}
.prow-unlocked{ font-family:var(--mono); font-size:10px; color:var(--ink-mute); margin-top:4px; }
.prow-fixed{ font-size:13.5px; color:var(--ink-soft); }
.sr-label{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); margin:8px 0; }
table.history{ border-collapse:collapse; width:100%; font-size:13.5px; min-width:560px; }
table.history th{
  text-align:left; font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);
  background:var(--sunk); padding:9px 12px; border-bottom:1px solid var(--line);
}
table.history td{
  padding:10px 12px; border-bottom:1px solid var(--line-soft);
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
table.history tr:last-child td{ border-bottom:none; }

/* ======================================================================
   PHASE 4 -- The Playbook
   Everything below styles the athlete's own writing. It uses the same
   tokens as the rest of the app, so it flips with the theme for free.
   ====================================================================== */

/* --- utilities the Playbook pages need outside the course stylesheet -- */

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.tablewrap{ overflow-x:auto; margin:14px 0; }
.btn-quiet{
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--line);
}
.btn-quiet:hover{ border-color:var(--ink-mute); color:var(--ink); }
.linkbtn.danger{ color:var(--danger); }

.page .breadcrumb{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:.84rem; color:var(--ink-mute); margin-bottom:18px;
}
.page .breadcrumb .sep{ opacity:.5; }

.pb-meter{
  display:block; height:4px; border-radius:99px;
  background:var(--sunk); overflow:hidden;
}
.pb-meter > span{
  display:block; height:100%; background:var(--accent); border-radius:99px;
}

/* --- the controls themselves ---------------------------------------- */

.pb-in{
  font:inherit; font-weight:600;
  color:var(--ink); background:var(--raised);
  border:0; border-bottom:2px solid var(--accent);
  border-radius:3px 3px 0 0;
  padding:2px 6px; min-width:8ch;
  transition:background .12s, border-color .12s;
}
.pb-in:hover{ background:var(--accent-bg); }
.pb-in:focus{ outline:none; background:var(--accent-bg); border-bottom-color:var(--ink); }
.pb-in.is-bad{ border-bottom-color:var(--danger); background:var(--danger-bg); }

textarea.pb-in{
  display:inline-block; vertical-align:bottom;
  width:min(100%, 40ch); resize:vertical;
  line-height:1.5; overflow:hidden;
}
/* Commitment blanks sit inside a sentence, so they stay narrow enough
   for the sentence to survive around them. */
textarea.pb-roomy-sm{ width:min(100%, 24ch); }
.pb-cell{ width:100%; min-width:6ch; font-weight:500; }
.pb-num{ width:5.5ch; text-align:center; }
.pb-outof{ color:var(--ink-mute); font-size:.85em; margin-left:6px; }

.pb-p{ margin:10px 0; line-height:2.1; }
.pb-list{ margin:10px 0; padding-left:20px; }
.pb-list li{ margin:9px 0; line-height:2.1; }

.pb-error{
  display:block; margin-top:4px;
  font-size:.8rem; color:var(--danger); font-weight:600;
}

.pb-written{
  font-weight:600; color:var(--ink);
  border-bottom:2px solid var(--accent); padding:0 3px;
}
.pb-unfilled{ color:var(--ink-mute); }
.pb-unfilled-block{ color:var(--ink-mute); font-style:italic; margin:10px 0; }

/* --- tables: rating grids, audits, logs ------------------------------ */

.pb-table, .pb-log{
  width:100%; border-collapse:collapse; font-size:.92rem;
  min-width:440px;
}
.pb-table th, .pb-table td, .pb-log th, .pb-log td{
  padding:9px 10px; border-bottom:1px solid var(--line-soft);
  text-align:left; vertical-align:middle;
}
.pb-table thead th, .pb-log thead th{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-mute); background:var(--sunk);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.pb-statement{ font-weight:500; color:var(--ink); max-width:34ch; }

.pb-radio{ text-align:center; width:3.2rem; padding:6px 4px; }
.pb-radio label{
  display:grid; place-items:center; gap:3px; cursor:pointer;
  padding:5px 0; border-radius:7px;
}
.pb-radio label:hover{ background:var(--accent-bg); }
.pb-radio input{ margin:0; accent-color:var(--accent); }
.pb-radio span{ font-family:var(--mono); font-size:.72rem; color:var(--ink-mute); }
.pb-radio input:checked + span{ color:var(--accent); font-weight:600; }
.pb-rating-read, .pb-score-read{
  font-family:var(--mono); font-weight:600; color:var(--accent);
  white-space:nowrap;
}

.pb-logwrap{ margin:14px 0; }
.pb-log-x{ width:2.4rem; text-align:center; }
.pb-rowx{
  border:0; background:transparent; cursor:pointer;
  color:var(--ink-mute); font-size:1.1rem; line-height:1;
  padding:2px 6px; border-radius:5px;
}
.pb-rowx:hover{ color:var(--danger); background:var(--danger-bg); }
.pb-addrow{
  font:inherit; font-size:.85rem; font-weight:600;
  color:var(--accent); background:transparent;
  border:1px dashed var(--line); border-radius:8px;
  padding:7px 14px; cursor:pointer;
}
.pb-addrow:hover{ border-color:var(--accent); background:var(--accent-bg); }

/* --- worksheet chrome on the module page ----------------------------- */

.ws-head{
  display:flex; gap:20px; justify-content:space-between;
  align-items:flex-start; flex-wrap:wrap; margin-bottom:8px;
}
.ws-status{
  display:flex; align-items:baseline; gap:6px;
  font-size:.85rem; color:var(--ink-mute); white-space:nowrap;
}
.ws-count{ font-family:var(--mono); font-weight:600; color:var(--ink); font-size:1.05rem; }
.ws-saved{ font-size:.78rem; font-weight:600; min-width:6.5ch; }
.ws-saved.is-saving{ color:var(--ink-mute); }
.ws-saved.is-ok{ color:var(--accent); }
.ws-saved.is-error{ color:var(--danger); }

.ws-trends{
  margin:22px 0 6px; padding:16px 18px;
  background:var(--sunk); border-radius:var(--radius);
}
.ws-trend-note{ font-size:.88rem; color:var(--ink-mute); margin:6px 0 14px; }
.ws-trend-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.ws-trend{
  background:var(--raised); border:1px solid var(--line-soft);
  border-radius:9px; padding:10px 12px;
}
.ws-trend-label{
  font-size:.78rem; color:var(--ink-soft); line-height:1.35;
  min-height:2.7em; margin-bottom:6px;
}
.ws-spark{ display:block; width:100%; height:24px; overflow:visible; }
.ws-spark polyline{
  fill:none; stroke:var(--accent); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ws-spark-end{
  stroke:var(--accent); stroke-width:6; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.ws-trend-now{ display:flex; align-items:baseline; gap:5px; margin-top:6px; }
.ws-trend-now b{ font-family:var(--mono); font-size:1.05rem; }
.ws-trend-now span{ font-size:.78rem; color:var(--ink-mute); }
.ws-delta{ font-family:var(--mono); font-size:.75rem; font-weight:600; }
.ws-delta.up{ color:var(--accent); }
.ws-delta.down{ color:var(--danger); }

.ws-complete{
  display:flex; gap:20px; justify-content:space-between; align-items:center;
  flex-wrap:wrap; margin-top:26px; padding:18px 20px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--raised);
}
.ws-complete.is-done{ background:var(--accent-bg); border-color:var(--accent); }
.ws-complete-title{ font-family:var(--display); font-weight:700; font-size:1.05rem; }
.ws-complete p{ margin:5px 0 0; font-size:.9rem; color:var(--ink-soft); max-width:58ch; }

/* --- the Playbook index ---------------------------------------------- */

.pb-stats{
  display:flex; gap:14px; flex-wrap:wrap; align-items:stretch;
  margin:26px 0 30px;
}
.pb-stat{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 18px; min-width:150px;
}
.pb-stat-n{ font-family:var(--mono); font-size:1.7rem; font-weight:600; }
.pb-stat-n span{ font-size:.9rem; color:var(--ink-mute); margin-left:4px; }
.pb-stat-l{
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:3px;
}
.pb-stat-links{
  display:flex; flex-direction:column; gap:5px; justify-content:center;
  flex:1 1 220px; font-size:.9rem; font-weight:600;
}

.pb-pillars{ display:flex; flex-direction:column; gap:16px; }
.pb-pillar{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px 18px;
}
.pb-pillar-head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.pb-pillar-head h2{ font-size:1.08rem; margin:0; flex:1; }
.pb-pillar-count{
  font-family:var(--mono); font-size:.75rem; color:var(--ink-mute);
}
.pb-dot{
  width:10px; height:10px; border-radius:99px;
  background:var(--accent); flex:none;
}
/* Four levels, so four columns where there is room -- a pillar reads as
   one run from Beginner to Elite, not three and a leftover. */
.pb-modules{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.pb-module{
  display:flex; flex-direction:column; gap:5px;
  padding:11px 13px; border-radius:9px; text-decoration:none;
  border:1px solid var(--line-soft); background:var(--paper);
  color:var(--ink);
}
.pb-module:hover{ border-color:var(--accent); background:var(--accent-bg); }
.pb-module.is-filed{ border-color:var(--accent); }
.pb-level{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
}
.pb-heading{ font-size:.9rem; font-weight:600; line-height:1.35; }
.pb-progress{ font-family:var(--mono); font-size:.72rem; color:var(--ink-mute); }
.pb-module.is-filed .pb-progress{ color:var(--accent); font-weight:600; }

/* --- collections: field cards, commitments --------------------------- */

.pb-collection-actions{ margin:20px 0 24px; }
.pb-card{
  background:var(--raised); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:16px 20px 18px; margin-bottom:14px;
}
.pb-card-head{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.pb-card-head h2{ font-size:1.05rem; margin:2px 0 0; }
.pb-card-head .pb-dot{ margin-top:6px; }
.pb-card-eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
}
.pb-card-edit{ margin-left:auto; font-size:.82rem; font-weight:600; white-space:nowrap; }
.pb-entry{ padding:9px 0; border-bottom:1px solid var(--line-soft); }
.pb-entry:last-child{ border-bottom:0; }
.pb-entry-anchor{ font-size:.8rem; color:var(--ink-mute); margin-bottom:3px; }
.pb-entry-value{ font-weight:600; white-space:pre-wrap; }

.pb-contract{
  border:1px solid var(--accent); background:var(--accent-bg);
  border-radius:var(--radius); padding:20px 22px; margin:22px 0 26px;
}
.pb-contract h2{ margin:6px 0 8px; }
.pb-contract p{ margin:0; color:var(--ink-soft); max-width:62ch; }
.pb-contract-progress{ margin:22px 0 26px; }
.pb-contract-progress p{ font-size:.88rem; color:var(--ink-mute); margin:8px 0 0; }

.pb-empty{
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:28px 24px; text-align:center; color:var(--ink-mute);
  display:flex; flex-direction:column; gap:14px; align-items:center;
  margin:24px 0;
}

/* --- sharing ---------------------------------------------------------- */

.pb-share-current, .pb-share-new{ margin:30px 0; }
.pb-share-current h2, .pb-share-new h2{ font-size:1.15rem; margin:0 0 12px; }
.pb-share-none{ color:var(--ink-mute); font-size:.92rem; }
.pb-share-rows{ display:flex; flex-direction:column; gap:8px; }
.pb-share-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:9px; padding:12px 16px;
}
.pb-share-who{ font-weight:600; }
.pb-share-scope{ font-size:.82rem; color:var(--ink-mute); margin-top:2px; }

.pb-share-form{ display:flex; flex-direction:column; gap:18px; max-width:52ch; }
.pb-share-form > button{ align-self:flex-start; }
.pb-scope{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:flex; flex-direction:column; gap:12px;
}
.pb-scope legend{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute); padding:0 6px;
}
/* These options are <label> elements, and the global label rule sets
   mono uppercase for form field names. That is right for "Share with"
   and wrong for a sentence, so it is undone here. */
.pb-scope-opt{
  display:grid; grid-template-columns:auto 1fr; gap:6px 10px;
  align-items:center;
  font-family:var(--body); font-size:15px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink);
}
.pb-scope-opt select{ grid-column:2; }
.pb-scope-title{ font-weight:600; }
.pb-scope-note{ grid-column:2; font-size:.82rem; color:var(--ink-mute); }

.pb-shared-in{ margin:24px 0; }
.pb-shared-rows, .pb-shared-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.pb-shared-row, .pb-shared-module{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:var(--raised); border:1px solid var(--line);
  border-radius:9px; padding:12px 16px; color:var(--ink);
}
.pb-shared-row:hover, .pb-shared-module:hover{ border-color:var(--accent); }
.pb-shared-who{ font-weight:600; }
.pb-shared-scope{ margin-left:auto; font-size:.82rem; color:var(--ink-mute); }
.pb-shared-body{ display:flex; flex-direction:column; gap:2px; flex:1; }
.pb-shared-heading{ font-weight:600; font-size:.95rem; }

/* --- print view ------------------------------------------------------- */

.pb-print-bar{
  display:flex; gap:18px; justify-content:space-between; align-items:center;
  flex-wrap:wrap; background:var(--sunk); border-radius:var(--radius);
  padding:14px 18px; margin-bottom:26px; font-size:.9rem;
}
.pb-print-bar-actions{ display:flex; gap:14px; align-items:center; }
.pb-print-head{ margin-bottom:30px; }
.pb-print-module{
  border-top:2px solid var(--accent); padding-top:16px; margin-bottom:34px;
  break-inside:auto; page-break-inside:auto;
}
.pb-print-module-head{ margin-bottom:14px; }
.pb-print-module-head h2{ margin:4px 0 0; font-size:1.25rem; }
.pb-filed-tag{
  display:inline-block; margin-top:6px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
  background:var(--accent-bg); border-radius:99px; padding:3px 10px;
}

@media print{
  .topbar, footer.site, .no-print, .pb-card-edit{ display:none !important; }
  body{ background:#fff; color:#000; }
  .page{ max-width:none; padding:0; }
  .pb-print-module{ page-break-before:auto; }
  .pb-print-module-head, .ws-group-title{ page-break-after:avoid; }
  a{ color:#000; text-decoration:none; }
}

@media (max-width:640px){
  .ws-complete{ flex-direction:column; align-items:stretch; }
  .pb-stat-links{ flex:1 1 100%; }
}

/* ======================================================================
   PHASE 5 -- Administration, roles, squads, logs, coach views
   ====================================================================== */

.admin-nav{
  display:flex; gap:4px; flex-wrap:wrap;
  margin-bottom:26px; padding-bottom:2px;
  border-bottom:1px solid var(--line);
}
.admin-nav a{
  padding:8px 14px; border-radius:8px 8px 0 0;
  font-size:.9rem; font-weight:600; text-decoration:none;
  color:var(--ink-mute); border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.admin-nav a:hover{ color:var(--ink); background:var(--sunk); }
.admin-nav a.is-here{ color:var(--accent); border-bottom-color:var(--accent); }

.alert.is-ok{
  background:var(--accent-bg); color:var(--accent-ink);
  border:1px solid var(--accent);
}

/* --- tiles ------------------------------------------------------------ */

.admin-tiles{
  display:grid; gap:12px; margin:26px 0 32px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.admin-tile{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px;
}
.admin-tile:hover{ border-color:var(--accent); }
.admin-tile-n{ font-family:var(--mono); font-size:1.9rem; font-weight:600; line-height:1; }
.admin-tile-l{
  font-family:var(--display); font-size:1.1rem; font-weight:700; margin-top:6px;
}
.admin-tile p{ font-size:.88rem; color:var(--ink-mute); margin:8px 0 0; }

/* --- tables ----------------------------------------------------------- */

.admin-table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:620px; }
.admin-table th, .admin-table td{
  text-align:left; padding:11px 14px;
  border-bottom:1px solid var(--line-soft); vertical-align:top;
}
.admin-table thead th{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
  background:var(--sunk); border-bottom:1px solid var(--line); white-space:nowrap;
}
.admin-table tr:last-child td{ border-bottom:0; }
.admin-empty{ color:var(--ink-mute); text-align:center; padding:26px 14px; }
.mono{ font-family:var(--mono); font-size:.85em; }

.tag{
  display:inline-block; font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; margin-right:5px;
  background:var(--sunk); color:var(--ink-mute); white-space:nowrap;
}
.tag-active{ background:var(--accent-bg); color:var(--accent); }
.tag-disabled{ background:var(--danger-bg); color:var(--danger); }
.tag-invited{ background:var(--sunk); color:var(--ink-soft); }
.tag-minor{ background:var(--danger-bg); color:var(--danger); }

/* --- forms ------------------------------------------------------------ */

.admin-filter{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 18px;
}
.admin-filter input[type="text"]{ width:auto; min-width:220px; }

.admin-form-block{
  margin:32px 0; padding:20px 22px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius);
}
.admin-form-block h2{ font-size:1.15rem; margin:0 0 6px; }
.admin-form{ display:flex; flex-direction:column; gap:14px; max-width:56ch; }
.admin-form-wide{ max-width:none; }
.admin-form > button{ align-self:flex-start; }
.admin-cols{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  align-items:start;
}
.admin-cols .admin-form-block{ margin:0; }
.admin-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.danger-block{ border-color:var(--danger); }
.danger-block h2{ color:var(--danger); }

.checkline{
  display:flex; align-items:baseline; gap:9px;
  font-family:var(--body); font-size:.93rem; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink);
  padding:5px 0; cursor:pointer;
}
.checkline input{ margin:0; accent-color:var(--accent); flex:none; }
.checkline b{ font-weight:600; }
.checkline .hint{ font-size:.82rem; }

.perm-group{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 16px 14px; margin:0;
}
.perm-group legend{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
  padding:0 6px;
}
.admin-details{ margin-top:14px; }
.admin-details summary{
  cursor:pointer; font-size:.86rem; font-weight:600; color:var(--ink-mute);
}
.plain-list{ list-style:none; margin:0; padding:0; }
.plain-list li{ padding:7px 0; border-bottom:1px solid var(--line-soft); }
.plain-list li:last-child{ border-bottom:0; }

/* --- roles and squads ------------------------------------------------- */

.role-cards, .squad-cards{
  display:grid; gap:12px; margin:24px 0;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.role-card, .squad-card{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px;
}
.role-card:hover, .squad-card:hover{ border-color:var(--accent); }
.role-card-head{ display:flex; align-items:center; gap:8px; }
.role-card h2, .squad-card h2{ font-size:1.05rem; margin:0; }
.role-card p, .squad-card p{ font-size:.86rem; color:var(--ink-mute); margin:7px 0 0; }
.role-card-foot, .squad-card-foot{
  display:flex; gap:14px; margin-top:12px;
  font-family:var(--mono); font-size:.72rem; color:var(--ink-mute);
}

/* --- logs -------------------------------------------------------------- */

.log-tabs{ display:flex; gap:6px; margin:20px 0 16px; }
.log-tabs a{
  padding:7px 14px; border-radius:99px; font-size:.86rem; font-weight:600;
  text-decoration:none; color:var(--ink-mute); border:1px solid var(--line);
}
.log-tabs a.is-here{
  color:var(--accent); border-color:var(--accent); background:var(--accent-bg);
}

/* ======================================================================
   PHASE 6 -- Level approval
   ====================================================================== */

.nav-badge{
  display:inline-block; min-width:18px; padding:1px 6px;
  border-radius:99px; background:var(--accent); color:var(--paper);
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  text-align:center; vertical-align:1px;
}

/* --- the coach's queue ------------------------------------------------ */

.approve-block{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px 20px; margin-bottom:18px;
}
.approve-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:14px;
}
.approve-head h2{ font-size:1.15rem; margin:0; }
.approve-head p{ margin:4px 0 0; }

.approve-row{
  display:grid; gap:8px 16px; align-items:center;
  grid-template-columns:minmax(180px, 1.4fr) auto minmax(130px, .6fr);
  padding:14px 0; border-top:1px solid var(--line-soft);
}
.approve-note{ grid-column:1 / -1; }
.approve-row:first-of-type{ border-top:0; }
.approve-pillar{ display:flex; align-items:center; gap:9px; }
.approve-name{ font-weight:600; font-size:.95rem; line-height:1.3; }
.approve-move{
  font-family:var(--mono); font-size:.76rem; color:var(--ink-mute); margin-top:2px;
}
.approve-move b{ color:var(--accent); }
.approve-choice{ display:flex; gap:12px; flex-wrap:wrap; }
.approve-choice .checkline{ padding:0; gap:6px; font-size:.88rem; }
.approve-level select{ width:100%; }

.approve-block > button{ margin-top:16px; }

/* --- the athlete's side ---------------------------------------------- */

.waiting-card{
  border:1px solid var(--accent); background:var(--accent-bg);
  border-radius:var(--radius); padding:18px 22px 20px; margin:26px 0 30px;
}
.waiting-card h2{ margin:6px 0 8px; font-size:1.15rem; }
.waiting-card p{ margin:0; color:var(--ink-soft); max-width:62ch; }
.waiting-list{ list-style:none; margin:14px 0 0; padding:0; display:flex;
  flex-direction:column; gap:7px; }
.waiting-list li{ display:flex; align-items:center; gap:9px; font-size:.92rem; }

.prow-waiting{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent); margin-top:4px;
  white-space:nowrap;
}
.result-level.is-waiting{ color:var(--ink-mute); }

@media (max-width:720px){
  .approve-row{ grid-template-columns:1fr; }
}


/* --- the account block on the profile -------------------------------- */

.account-grid{
  display:grid; gap:16px; margin:16px 0 40px;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  align-items:start;
}
.account-grid .card{ margin:0; }
.account-grid h3{
  font-family:var(--display); font-size:1.05rem; font-weight:700; margin:0 0 14px;
}
.account-grid .field:last-of-type{ margin-bottom:20px; }

/* ======================================================================
   Tabs
   The tablist is hidden until tabs.js marks the container `is-tabbed`,
   so with scripting off the page stays one long readable list rather
   than a row of buttons that do nothing.
   ====================================================================== */

.tabs > .tablist{ display:none; }
.tabs.is-tabbed > .tablist{
  display:flex; gap:2px; flex-wrap:wrap;
  margin:30px 0 4px; padding-bottom:2px;
  border-bottom:1px solid var(--line);
}

.tablist [role="tab"]{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-size:.95rem; font-weight:600;
  letter-spacing:0; text-transform:none;
  color:var(--ink-mute); background:transparent;
  border:0; border-bottom:2px solid transparent;
  padding:11px 16px; margin-bottom:-1px;
  border-radius:8px 8px 0 0; cursor:pointer;
  transition:color .12s, background .12s;
}
.tablist [role="tab"]:hover{ color:var(--ink); background:var(--sunk); }
.tablist [role="tab"][aria-selected="true"]{
  color:var(--accent); border-bottom-color:var(--accent);
}
.tablist [role="tab"]:focus-visible{
  outline:2px solid var(--accent); outline-offset:-2px;
}

.tab-badge, .tab-count{
  display:inline-block; min-width:19px; padding:1px 7px;
  border-radius:99px; font-family:var(--mono); font-size:.68rem;
  font-weight:600; text-align:center;
}
/* Something is waiting on somebody else -- worth the accent. */
.tab-badge{ background:var(--accent); color:var(--paper); }
/* Just a count, not a call to action. */
.tab-count{ background:var(--sunk); color:var(--ink-mute); }
[aria-selected="true"] .tab-count{ background:var(--accent-bg); color:var(--accent); }

.tabs.is-tabbed > .tabpanel{ padding-top:22px; }
.tabs.is-tabbed > .tabpanel[hidden]{ display:none; }
.tabpanel:focus{ outline:none; }
.tabpanel > h2:first-child{ margin-top:0; }

/* Un-tabbed fallback: keep the old vertical rhythm between sections. */
.tabs:not(.is-tabbed) > .tabpanel{ margin-top:34px; }

@media (max-width:560px){
  .tablist [role="tab"]{ padding:10px 12px; font-size:.9rem; }
}