/* MaiCoach.io — /assess
   Four states on one route: intro · assessing · generating · program.
   Values match the v1 design canvas README § Design Tokens. */

/* semantic answer colours — NOT interactive; cyan is the only interactive accent */
:root {
  --a-good-edge: #00EF70; --a-good-fill: rgba(0,239,112,0.14);   --a-good-fg: #8CF7BF;
  --a-inc-edge:  #C79A4B; --a-inc-fill:  rgba(199,154,75,0.16);  --a-inc-fg:  #E4C58C;
  --a-bad-edge:  #C4737A; --a-bad-fill:  rgba(196,115,122,0.16); --a-bad-fg:  #E7AFB3;
  --a-uns-edge:  #8FA3BC; --a-uns-fill:  rgba(143,163,188,0.16); --a-uns-fg:  #DCE6F1;
}

[hidden] { display: none !important; }

.assess-main { padding-bottom: 140px; }
.col { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.col-narrow { max-width: 1000px; margin: 0 auto; padding: 0 40px; }

/* ------------------------------------------------------------- state A */

.intro { padding: 88px 0 96px; text-align: left; }
.intro h1 { font: 800 clamp(32px,4.4vw,44px)/1.1 var(--font-heading); letter-spacing:-0.03em;
            text-wrap: balance; margin: 0 0 20px; max-width: 720px; }
.intro .lead { margin-bottom: 28px; }

.honesty {
  max-width: 620px; border-radius: 10px; padding: 18px 22px; margin: 0 0 32px;
  border: 1px solid rgba(0,239,112,0.3); background: rgba(0,239,112,0.06);
  font: 500 17px/1.55 var(--font-body); color: var(--text-2);
}
.honesty b { color: var(--green); font-weight: 600; }

/* ------------------------------------------------- sticky progress bar */

.progress-bar {
  position: sticky; top: 76px; z-index: 25;
  padding: 14px 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: rgba(27,42,65,0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.progress-bar .count {
  font: 600 13px/1 var(--font-mono); font-variant-numeric: tabular-nums;
  min-width: 78px; color: var(--text);
}
.track { flex: 1 1 220px; height: 4px; border-radius: 2px; background: rgba(143,163,188,0.18); }
.track span { display: block; height: 100%; width: 0; border-radius: 2px;
              background: var(--cyan); transition: width 260ms ease-out; }
.progress-bar .tallies { display: flex; gap: 18px; font: 500 12px/1 var(--font-body); color: var(--muted); }

/* --------------------------------------------------------- section head */

.sec-head { display: flex; align-items: center; gap: 14px; margin: 40px 0 6px; }
.sec-head h2 { font: 600 12px/1 var(--font-body); letter-spacing: .2em;
               text-transform: uppercase; color: var(--text); margin: 0; white-space: nowrap; }
.sec-head .range { font: 400 12px/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.sec-head .fill { flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, rgba(143,163,188,.22) 0,
              rgba(143,163,188,.22) calc(100% - 48px), rgba(143,163,188,0) 100%); }
.sec-blurb { font: 400 14px/1.6 var(--font-body); color: var(--muted); margin: 0 0 18px; max-width: 760px; }

/* -------------------------------------------------------- the skill card */

.cards { display: flex; flex-direction: column; gap: 16px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 24px; display: flex; flex-direction: column; gap: 20px;
}
.card[data-answered="true"] { border-left: 2px solid var(--ans-edge, var(--line)); }

.card-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.card-head .left { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.card-num { font: 500 13px/1 var(--font-mono); color: var(--muted); }
.card-name, .card-sec {
  font: 600 11px/1.3 var(--font-body); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.card-sec { white-space: nowrap; }
.card-tag {
  padding: 4px 9px; border-radius: 5px; border: 1px solid rgba(143,163,188,0.4);
  background: rgba(143,163,188,0.1); font: 600 10px/1 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}

.card-body { display: flex; gap: 22px; align-items: flex-start; }
.card-copy { flex: 1 1 auto; min-width: 0; }
.q { font: 600 21px/1.35 var(--font-heading); letter-spacing: -0.01em;
     text-wrap: pretty; color: var(--text); margin: 0 0 14px; }
.prime { font: italic 400 14px/1.55 var(--font-body); color: var(--text-3); margin: 0; }

/* animation slot — the state most cards will be in for weeks */
.slot {
  flex: 0 0 240px; width: 240px; height: 240px; border-radius: 8px;
  border: 1px solid rgba(143,163,188,0.28);
  background: repeating-linear-gradient(135deg,
    rgba(43,62,92,0.55) 0 6px, rgba(34,51,77,0.55) 6px 12px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px; text-align: center;
}
.slot .ring {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(143,163,188,0.5);
  display: flex; align-items: center; justify-content: center;
  font: 400 12px/1 var(--font-mono); color: var(--muted);
}
.slot .kick { font: 600 10px/1 var(--font-body); letter-spacing: .18em;
              text-transform: uppercase; color: var(--muted); }
.slot .slug { font: 400 12px/1.3 var(--font-mono); color: var(--text-3); word-break: break-all; }
.slot .desc { font: 400 11px/1.45 var(--font-body); color: var(--muted); }

/* answers */
.answers { display: flex; gap: 8px; }
.ans {
  flex: 1 1 auto; min-width: 0; min-height: 50px; padding: 12px 14px;
  border-radius: 8px; border: 1px solid rgba(143,163,188,0.28);
  background: rgba(43,62,92,0.5); color: var(--text-2);
  font: 500 14px/1.2 var(--font-body); cursor: pointer; text-align: center;
  transition: background 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}
.ans:hover { background: rgba(43,62,92,0.9); border-color: rgba(143,163,188,0.5); }
/* "I'm not sure" — distinct but NOT diminished: same size, weight, position */
.ans[data-v="not_sure"] { border-style: dashed; border-color: rgba(143,163,188,0.45); background: transparent; }
.ans[data-v="not_sure"]:hover { background: rgba(43,62,92,0.5); }

.ans[aria-checked="true"] { border-width: 1.5px; font-weight: 600; }
.ans[data-v="good"][aria-checked="true"]        { border-color: var(--a-good-edge); background: var(--a-good-fill); color: var(--a-good-fg); }
.ans[data-v="inconsistent"][aria-checked="true"]{ border-color: var(--a-inc-edge);  background: var(--a-inc-fill);  color: var(--a-inc-fg); }
.ans[data-v="bad"][aria-checked="true"]         { border-color: var(--a-bad-edge);  background: var(--a-bad-fill);  color: var(--a-bad-fg); }
.ans[data-v="not_sure"][aria-checked="true"]    { border-color: var(--a-uns-edge);  background: var(--a-uns-fill);  color: var(--a-uns-fg); border-style: solid; }

.ans-note { font: 400 12px/1.5 var(--font-body); color: var(--muted); margin: -8px 0 0; }
.ans-note code { font: 400 12px/1 var(--font-mono); color: var(--text-3); }

/* drawers */
.drawers { display: flex; flex-direction: column; gap: 10px; padding-top: 4px;
           border-top: 1px solid rgba(143,163,188,0.14); }
.dr-btn {
  align-self: flex-start; background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 500 14px/1 var(--font-body); color: var(--cyan);
}
.dr-btn.tech { font: 500 12px/1 var(--font-mono); color: var(--muted); }
.dr-btn.tech:hover { color: var(--text-3); }
.dr-why { border-left: 2px solid rgba(14,212,249,0.35); padding: 4px 0 4px 16px;
          font: 400 15px/1.65 var(--font-body); color: var(--text-2); max-width: 760px; }
.dr-how { border: 1px solid rgba(143,163,188,0.18); background: rgba(16,27,43,0.6);
          border-radius: 8px; padding: 14px 16px;
          font: 400 13px/1.6 var(--font-mono); color: var(--text-3); }

/* compact answered — the page visibly shrinks as you work */
.card.compact { flex-direction: row; align-items: center; gap: 14px;
                padding: 14px 18px; background: rgba(34,51,77,0.6); }
.card.compact .card-num { width: 22px; flex: none; }
.card.compact .cname { flex: 1 1 auto; min-width: 0; font: 600 12px/1.3 var(--font-body);
                       letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.chip { padding: 6px 12px; border-radius: 6px; font: 500 13px/1 var(--font-body);
        white-space: nowrap; border: 1px solid; }
.chip[data-v="good"]        { border-color: rgba(0,239,112,0.55);   background: var(--a-good-fill); color: var(--a-good-fg); }
.chip[data-v="inconsistent"]{ border-color: rgba(199,154,75,0.55);  background: var(--a-inc-fill);  color: var(--a-inc-fg); }
.chip[data-v="bad"]         { border-color: rgba(196,115,122,0.55); background: var(--a-bad-fill);  color: var(--a-bad-fg); }
.chip[data-v="not_sure"]    { border-color: rgba(143,163,188,0.5);  background: var(--a-uns-fill);  color: var(--a-uns-fg); }
.change { background: none; border: 0; cursor: pointer; font: 500 13px/1 var(--font-body);
          color: var(--muted); padding: 6px 2px; }
.change:hover { color: var(--cyan); }

/* -------------------------------------------------------- sticky CTA */

.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 16px 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: rgba(27,42,65,0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.cta-bar .hint { flex: 1 1 260px; font: 400 13px/1.5 var(--font-body); color: var(--muted); }
.build {
  padding: 14px 22px; border-radius: 8px; font: 700 15px/1 var(--font-body);
  border: 1px solid rgba(143,163,188,0.3); background: transparent;
  color: var(--muted); cursor: not-allowed; transition: all 200ms ease-out;
}
.build.on { border-color: var(--cyan); background: rgba(14,212,249,0.10);
            color: var(--cyan); cursor: pointer; }
.build.on:hover { background: rgba(14,212,249,0.18); }

/* --------------------------------------------------------- state C */

.gen { padding: 100px 0; display: flex; flex-direction: column; gap: 32px; max-width: 620px; }
.step-line { display: flex; align-items: baseline; gap: 12px;
             font: 400 16px/1.4 var(--font-mono); color: rgba(143,163,188,0.5); }
.step-line .g { width: 14px; flex: none; }
.step-line .r { margin-left: auto; font-size: 13px; }
.step-line.done { color: var(--muted); }
.step-line.done .g { color: var(--green); }
.step-line.now { color: var(--text); font-weight: 500; }
.step-line.now .g { color: var(--cyan); animation: mc-pulse 1.4s ease-in-out infinite; }
.step-line.now .r { color: var(--cyan); }
@keyframes mc-pulse { 0%,100% { opacity:.35 } 50% { opacity:.9 } }
.gen-note { font: 400 13px/1.6 var(--font-body); color: var(--muted); max-width: 560px; }

/* --------------------------------------------------------- state D */

.prog { padding: 56px 0 40px; display: flex; flex-direction: column; gap: 44px; }
.prog h1 { font: 800 clamp(32px,4vw,52px)/1.05 var(--font-heading);
           letter-spacing: -0.03em; text-transform: uppercase; margin: 0; }
.tally { display: flex; flex-wrap: wrap;
         border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tally div { flex: 1 1 0; min-width: 150px; padding: 22px 24px; border-left: 1px solid var(--line); }
.tally div:first-child { border-left: 0; }
.tally .n { display: block; font: 600 40px/1.05 var(--font-mono);
            font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.tally .l { font: 600 11px/1.3 var(--font-body); letter-spacing: .16em;
            text-transform: uppercase; color: var(--muted); }
.tally .n.assessed { color: var(--text); }
.tally .n.flagged  { color: var(--a-inc-fg); }
.tally .n.unknown  { color: var(--muted); }

.summary { font: 400 19px/1.6 var(--font-body); color: var(--text-2); max-width: 760px; margin: 0; }
.honest-note { border: 1px solid rgba(143,163,188,0.25); background: rgba(34,51,77,0.5);
               border-radius: 10px; padding: 18px 20px;
               font: 400 14px/1.6 var(--font-body); color: var(--muted); max-width: 820px; }

.focus { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.focus .f { background: var(--surface); border: 1px solid var(--line);
            border-radius: 10px; padding: 22px; }
.focus .f .n { font: 500 13px/1 var(--font-mono); color: var(--cyan); }
.focus .f h3 { font: 600 17px/1.3 var(--font-heading); margin: 10px 0 8px; }
.focus .f p { font: 400 14px/1.55 var(--font-body); color: var(--text-3); margin: 0; }

.phase { border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
         background: var(--surface); margin-bottom: 12px; }
.phase-btn { width: 100%; padding: 20px 22px; background: none; border: 0; cursor: pointer;
             display: flex; align-items: center; gap: 18px; text-align: left;
             transition: background 200ms ease-out; }
.phase-btn:hover { background: rgba(43,62,92,0.45); }
.phase-btn .p { font: 500 12px/1 var(--font-mono); color: var(--muted); min-width: 110px; }
.phase-btn h3 { font: 600 20px/1.2 var(--font-heading); margin: 0; color: var(--text); }
.phase-btn .theme { flex: 1 1 auto; font: 400 14px/1.4 var(--font-body); color: var(--muted); }
.phase-btn .car { font: 400 12px/1 var(--font-body); color: var(--cyan); }
.phase-body { padding: 0 22px 8px; }
.wk { display: flex; gap: 18px; padding: 14px 0; border-top: 1px solid rgba(143,163,188,0.16); }
.wk .lab { min-width: 76px; font: 500 12px/1.5 var(--font-mono);
           text-transform: uppercase; color: var(--muted); }
.wk .list { font: 400 15px/1.5 var(--font-body); color: var(--text-2); }
.wk .dose { font: 400 13px/1.5 var(--font-body); color: var(--muted); margin-top: 4px; }

.drill { background: var(--surface); border: 1px solid var(--line);
         border-radius: 10px; padding: 26px; }
.drill-head { display: flex; justify-content: space-between; gap: 20px;
              align-items: flex-start; flex-wrap: wrap; }
.drill h3 { font: 700 26px/1.2 var(--font-heading); margin: 0 0 12px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.schip { padding: 5px 10px; border-radius: 5px; font: 400 12px/1 var(--font-mono);
         border: 1px solid rgba(14,212,249,0.35); background: rgba(14,212,249,0.08); color: var(--cyan); }
.schip.sec { border-color: rgba(143,163,188,0.3); background: rgba(143,163,188,0.08); color: var(--muted); }
.drill-body { display: grid; grid-template-columns: 1fr 260px; gap: 28px; }
.drill ol { margin: 0; padding-left: 20px; font: 400 15px/1.6 var(--font-body); color: var(--text-2); }
.drill ol li { margin-bottom: 10px; }
.rail h4 { font: 600 11px/1 var(--font-body); letter-spacing: .16em;
           text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.rail p { font: 400 14px/1.6 var(--font-body); color: var(--text-3); margin: 0 0 20px; }

.unknown-block {
  border: 1px solid rgba(143,163,188,0.3); border-left: 2px solid var(--muted);
  background: rgba(34,51,77,0.45); border-radius: 10px; padding: 28px; max-width: 860px;
}
.unknown-block h3 { font: 700 24px/1.25 var(--font-heading); margin: 0 0 16px; }
.unknown-block p { font: 400 16px/1.65 var(--font-body); color: var(--text-2); margin: 16px 0; }

.actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
           padding-top: 28px; border-top: 1px solid var(--line); }
.actions .spacer { flex: 1 1 auto; }
.actions .note { font: 400 12px/1.5 var(--font-mono); color: var(--muted); }
.btn-2 { padding: 13px 20px; border-radius: 8px; background: none; cursor: pointer;
         border: 1px solid rgba(143,163,188,0.35); color: var(--text-2);
         font: 600 14px/1 var(--font-body); transition: background 200ms ease-out; }
.btn-2:hover { background: rgba(255,255,255,0.06); }
.btn-bare { background: none; border: 0; cursor: pointer; color: var(--muted);
            font: 500 14px/1 var(--font-body); padding: 13px 4px; }
.btn-bare:hover { color: var(--cyan); }

/* ------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .focus { grid-template-columns: 1fr; }
  .drill-body { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .col, .col-narrow { padding: 0 20px; }
  .progress-bar { top: 0; padding: 12px 20px; gap: 12px; }
  .progress-bar .tallies { width: 100%; gap: 14px; }
  .cta-bar { padding: 14px 20px; }
  .card { padding: 18px; }
  .card-body { flex-direction: column; }
  .q { font-size: 19px; }
  .slot { flex: none; width: 100%; height: auto; aspect-ratio: 1/1; }
  /* 2x2 so "Inconsistently" sets the row height instead of squeezing its neighbours */
  .answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ans { min-height: 56px; padding: 10px; font-size: 14px; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .tally div { border-left: 0; border-top: 1px solid var(--line); }
  .tally div:first-child { border-top: 0; }
  .phase-btn { flex-wrap: wrap; gap: 10px; }
  .phase-btn .theme { flex: 1 1 100%; }
}

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

@media print {
  .site-header, .progress-bar, .cta-bar, .actions, .site-footer { display: none !important; }
  body { background: #fff; color: #111; }
  .prog { padding: 0; }
  .phase-body { display: block !important; }
  .drill, .phase, .unknown-block, .honest-note, .focus .f {
    break-inside: avoid; background: #fff; border-color: #bbb; color: #111;
  }
  .prog h1, .drill h3, .phase-btn h3, .unknown-block h3, .focus .f h3 { color: #111; }
  .summary, .wk .list, .drill ol, .unknown-block p { color: #222; }
  .tally .n.assessed, .tally .n.flagged, .tally .n.unknown { color: #111; }
  a { color: #111; text-decoration: underline; }
}

/* ------------------------------------------- drill reference cards (v1) */

.drills { display: flex; flex-direction: column; gap: 16px; }

/* Sticky header is 76px; keep an anchored card clear of it. */
.drill { scroll-margin-top: 96px; }
.drill h3 .dord { color: var(--cyan); margin-right: 4px; font-size: 20px; font-weight: 500; }

/* Drill names inside the weekly readout jump to that drill's card below. */
.wk .list a.dlink {
  color: var(--text-2); text-decoration: none;
  border-bottom: 1px solid rgba(14,212,249,0.35);
  transition: color 200ms ease-out, border-color 200ms ease-out;
}
.wk .list a.dlink:hover { color: var(--cyan); border-bottom-color: var(--cyan); }

/* Brief highlight so it's obvious which card you landed on. */
.drill:target { border-color: rgba(14,212,249,0.5); }
.drill:target h3 { color: var(--cyan); }

@media (prefers-reduced-motion: no-preference) {
  .drill:target { animation: mc-land 1.4s ease-out 1; }
  @keyframes mc-land {
    0%   { background: rgba(14,212,249,0.10); }
    100% { background: var(--surface); }
  }
}

@media print {
  .wk .list a.dlink { border-bottom: 0; color: #111; }
  .drill h3 .dord { color: #111; }
}