/* APC AI Readiness Plan
   Direction: a navigational chart. Cool chart-paper ground, deep harbor ink,
   sea-glass for progress, buoy amber reserved for things that need attention.
   The one bold element is the roadmap drawn as a charted route. */

:root {
  --paper: #eef2f1;
  --paper-2: #e2e9e8;
  --surface: #ffffff;
  --ink: #142a33;
  --ink-2: #4a6068;
  --ink-3: #7d9098;
  --line: #c9d5d4;
  --sea: #2e8c83;
  --sea-deep: #1d5e58;
  --sea-tint: #d5ebe8;
  --buoy: #e3a21a;
  --buoy-tint: #fbf0d6;
  --alert: #b8452f;
  --alert-tint: #f6e0da;
  --grid: rgba(20, 42, 51, 0.045);
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --r-sm: 4px;
  --r-md: 8px;
  --focus: 0 0 0 3px rgba(46, 140, 131, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1d22; --paper-2: #16272d; --surface: #182b31; --ink: #e4eeec; --ink-2: #a9bcbd; --ink-3: #7d9298;
    --line: #2b434a; --sea: #4fb3a8; --sea-deep: #7fd0c6; --sea-tint: #1d3b3a; --buoy: #f0b33a; --buoy-tint: #3a3018;
    --alert: #e3826d; --alert-tint: #3d2520; --grid: rgba(228, 238, 236, 0.035);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--body); font-size: 16px; line-height: 1.5; color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 0.4em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 0.8em; max-width: 72ch; }
a { color: var(--sea-deep); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.muted { color: var(--ink-2); }
.small { font-size: 0.875rem; }
.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px; padding: 12px 24px;
  background: var(--ink); color: var(--paper);
}
:root:not([data-theme="light"]) .topbar { color: #eef2f1; }
@media (prefers-color-scheme: dark) { .topbar { background: #0a1519; } }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand svg { flex: none; }
.brand b { font-family: var(--display); font-size: 1.05rem; font-weight: 700; }
.brand span { opacity: 0.7; font-size: 0.9rem; }
.topnav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.topnav a { color: inherit; text-decoration: none; padding: 6px 12px; border-radius: var(--r-sm); opacity: 0.8; }
.topnav a:hover, .topnav a.on { opacity: 1; background: rgba(255,255,255,0.1); }
.who { font-size: 0.85rem; opacity: 0.7; margin-left: 12px; }

main { padding: 28px 24px 80px; max-width: 1320px; margin: 0 auto; }

/* ---------- Generic controls ---------- */
.btn {
  font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer;
  padding: 9px 16px; border-radius: var(--r-md); border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper); text-decoration: none; display: inline-flex; gap: 8px; align-items: center;
}
.btn:hover { background: var(--sea-deep); border-color: var(--sea-deep); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--paper-2); }
.btn.sea { background: var(--sea); border-color: var(--sea); color: #fff; }
.btn.sea:hover { background: var(--sea-deep); border-color: var(--sea-deep); }
.btn.small { padding: 5px 10px; font-size: 0.85rem; }
.btn.danger { background: transparent; color: var(--alert); border-color: var(--alert); }
.btn[disabled] { opacity: 0.5; cursor: progress; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--sea-deep); cursor: pointer; text-decoration: underline; }

label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; }
label.field > small { display: block; color: var(--ink-2); font-size: 0.82rem; margin-top: 3px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], input[type=url], select, textarea {
  font: inherit; color: var(--ink); width: 100%; padding: 8px 10px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
input:focus, select:focus, textarea:focus { border-color: var(--sea); box-shadow: var(--focus); outline: none; }
textarea { min-height: 76px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.checks label {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1.5px solid var(--line);
  border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 0.9rem;
}
.checks input { accent-color: var(--sea); }
.checks label:has(input:checked) { border-color: var(--sea); background: var(--sea-tint); }

.panel { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; margin-bottom: 18px; }
.panel > h3:first-child { margin-top: 0; }
.panel.flat { background: transparent; border-style: dashed; }

table.t { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
table.t th { text-align: left; font-weight: 700; color: var(--ink-2); font-size: 0.82rem; padding: 6px 8px; border-bottom: 1.5px solid var(--ink); }
table.t td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t td.r, table.t th.r { text-align: right; }
table.t tr.click { cursor: pointer; }
table.t tr.click:hover td { background: var(--paper); }
.tablewrap { overflow-x: auto; }

.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.tag.sea { background: var(--sea-tint); color: var(--sea-deep); }
.tag.buoy { background: var(--buoy-tint); color: #7a5205; }
.tag.alert { background: var(--alert-tint); color: var(--alert); }
@media (prefers-color-scheme: dark) { .tag.buoy { color: var(--buoy); } }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: var(--r-md); font-weight: 700; z-index: 50; }
.empty { padding: 40px; text-align: center; color: var(--ink-2); }
.pagehead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.pagehead .grow { flex: 1; min-width: 240px; }
.pagehead p { margin: 0; }

/* ---------- Dashboard ---------- */
.dash-stats { display: flex; gap: 40px; flex-wrap: wrap; margin: 0 0 24px; }
.dash-stats div b { display: block; font-family: var(--display); font-size: 2rem; font-weight: 700; }
.dash-stats div span { color: var(--ink-2); font-size: 0.9rem; }
.scorechip { display: inline-flex; align-items: baseline; gap: 6px; }
.scorechip b { font-family: var(--display); font-size: 1.15rem; }
.meter { height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; min-width: 80px; }
.meter i { display: block; height: 100%; background: var(--sea); }

/* ---------- Workshop layout ---------- */
.workshop { display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.rail { position: sticky; top: 16px; }
.rail ol { list-style: none; margin: 0; padding: 0; position: relative; }
.rail ol::before { content: ''; position: absolute; left: 13px; top: 14px; bottom: 14px; border-left: 2px dashed var(--line); }
.rail li a {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 0;
  text-decoration: none; color: var(--ink-2); font-weight: 700; font-size: 0.95rem;
}
.rail li a .wp {
  width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--line); background: var(--paper);
  display: grid; place-items: center; font-size: 0.78rem; font-family: var(--display); color: var(--ink-3);
}
.rail li a.done .wp { border-color: var(--sea); color: var(--sea-deep); background: var(--sea-tint); }
.rail li a.on { color: var(--ink); }
.rail li a.on .wp { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.rail .client { margin-bottom: 16px; }
.rail .client b { display: block; font-family: var(--display); font-size: 1.1rem; line-height: 1.2; }
.rail .client small { color: var(--ink-3); }
.savestate { font-size: 0.8rem; color: var(--ink-3); margin-top: 14px; }

.stephead { margin-bottom: 18px; }
.stephead .kicker { color: var(--sea-deep); font-weight: 700; font-size: 0.9rem; }
.stephead h1 { margin: 2px 0 6px; }
.stepnav { display: flex; justify-content: space-between; margin-top: 24px; gap: 12px; }

/* Scored questions */
.q { padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.q:last-child { border-bottom: 0; }
.q .qt { font-weight: 700; margin-bottom: 10px; display: flex; gap: 10px; align-items: baseline; }
.q .qt .tag { flex: none; }
.opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.opt {
  font: inherit; font-size: 0.85rem; line-height: 1.3; text-align: left; cursor: pointer;
  padding: 9px 10px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  position: relative; min-height: 56px;
}
.opt:hover { border-color: var(--ink-3); }
.opt.on { border-color: var(--sea); background: var(--sea-tint); box-shadow: inset 0 -3px 0 var(--sea); }
.opt.prev::after { content: 'Last time'; position: absolute; top: -8px; right: 6px; font-size: 0.68rem; background: var(--buoy); color: #3b2800; padding: 0 5px; border-radius: 3px; font-weight: 700; }

/* AI follow-ups */
.followups { border: 1.5px solid var(--sea); border-radius: var(--r-md); padding: 16px 18px; background: var(--surface); margin-top: 22px; }
.followups header { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.followups header h3 { margin: 0; flex: 1; }
.fq { padding: 12px 0; border-top: 1px solid var(--line); }
.fq .fqt { font-weight: 700; }
.fq .why { font-size: 0.82rem; color: var(--ink-2); margin: 2px 0 6px; }
.fq textarea { min-height: 54px; }
.fq .rm { float: right; font-size: 0.8rem; }

/* Tasks */
.workshop.wide { grid-template-columns: 220px minmax(0, 1fr); }
.tasks { display: grid; gap: 10px; }
.taskcard {
  display: grid; grid-template-columns: 2.2fr 1fr 0.8fr 0.8fr 1fr; gap: 8px 12px; align-items: end;
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper);
}
.taskcard label span, .tc-val span { display: block; font-size: 0.76rem; font-weight: 700; color: var(--ink-2); margin-bottom: 2px; }
.taskcard input, .taskcard select { padding: 6px 8px; font-size: 0.92rem; }
.tc-task { grid-column: 1 / 3; }
.tc-val { grid-column: 4 / 6; text-align: right; }
.tc-val b { font-family: var(--display); font-size: 1.4rem; color: var(--sea-deep); }
.taskcard > label:nth-child(2) { grid-column: 3 / 4; }
.tc-type { grid-column: 1 / 2; }
.tc-sys { grid-column: 1 / 4; }
.tc-rm { grid-column: 5 / 6; justify-self: end; align-self: center; }
@media (max-width: 760px) { .taskcard { grid-template-columns: 1fr 1fr; } .tc-task, .tc-sys, .tc-val, .taskcard > label:nth-child(2), .tc-type, .tc-rm { grid-column: auto; } .tc-task, .tc-sys { grid-column: 1 / -1; } .tc-val { text-align: left; } }
.tasktable input, .tasktable select { padding: 5px 6px; font-size: 0.88rem; }
.tasktable td { padding: 6px 4px; }
.tasktable .val { font-weight: 700; color: var(--sea-deep); white-space: nowrap; }
.suggest { display: grid; gap: 8px; margin-top: 10px; }
.suggest div { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: var(--paper); border-radius: var(--r-sm); }
.suggest div span { flex: 1; }
.totals { display: flex; gap: 32px; flex-wrap: wrap; padding: 14px 0 0; }
.totals div b { display: block; font-family: var(--display); font-size: 1.5rem; }
.totals div span { font-size: 0.85rem; color: var(--ink-2); }
.applist { display: grid; gap: 6px; }
.approw { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1.1fr auto; gap: 6px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.chips button { font: inherit; font-size: 0.82rem; padding: 3px 10px; border-radius: 999px; border: 1.5px dashed var(--line); background: transparent; color: var(--ink-2); cursor: pointer; }
.chips button:hover { border-color: var(--sea); color: var(--sea-deep); }

/* Readout (live score) */
.readout { position: sticky; top: 16px; }
.readout .panel { padding: 16px; }
.gauge { display: block; margin: 0 auto 6px; }
.readout .lvl { text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.readout .lvlb { text-align: center; font-size: 0.82rem; color: var(--ink-2); margin-bottom: 12px; }
.pbar { margin: 8px 0; font-size: 0.82rem; }
.pbar div:first-child { display: flex; justify-content: space-between; }
.readout .money b { font-family: var(--display); font-size: 1.5rem; display: block; }
.blockers { margin-top: 10px; padding: 10px 12px; background: var(--buoy-tint); border-left: 4px solid var(--buoy); border-radius: var(--r-sm); font-size: 0.85rem; }

/* Model comparison */
.models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.model { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.model.rec { border-color: var(--sea); box-shadow: inset 0 4px 0 var(--sea); }
.model h3 { font-size: 1rem; margin: 0; }
.model .big { font-family: var(--display); font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.model dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 0.84rem; }
.model dt { color: var(--ink-2); }
.model dd { margin: 0; text-align: right; font-weight: 700; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--sea); }
.sensmatrix td.yes { color: var(--sea-deep); font-weight: 700; }
.sensmatrix td.cond { color: #8a5d00; font-weight: 700; }
.sensmatrix td.no { color: var(--alert); font-weight: 700; }
@media (prefers-color-scheme: dark) { .sensmatrix td.cond { color: var(--buoy); } }

/* ---------- Plan ---------- */
.planhero { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; }
.route { width: 100%; height: auto; display: block; margin: 8px 0 4px; }
.phase { margin-bottom: 18px; }
.phase > header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1.5px solid var(--ink); padding-bottom: 6px; margin-bottom: 4px; }
.phase > header h3 { margin: 0; }
.phase > header .muted { font-size: 0.88rem; }
.pi { display: grid; grid-template-columns: 1fr 120px 130px; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.pi .pt { font-weight: 700; }
.pi .pd { font-size: 0.88rem; color: var(--ink-2); }
.pi select { padding: 4px 6px; font-size: 0.85rem; }
.pi.done .pt { text-decoration: line-through; text-decoration-color: var(--sea); color: var(--ink-2); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
ul.clean { margin: 0; padding-left: 18px; }
ul.clean li { margin-bottom: 6px; }
.cadence { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; font-size: 0.92rem; }
.cadence b { color: var(--sea-deep); }
.sharebox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sharebox input { flex: 1; min-width: 240px; }

/* Share (client) view */
.sharepage main { max-width: 1040px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .workshop, .workshop.wide { grid-template-columns: 200px minmax(0, 1fr); }
  .readout { grid-column: 1 / -1; position: static; order: 3; }
  .models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  main { padding: 18px 16px 60px; }
  .topbar { padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
  .who { display: none; }
  .workshop, .workshop.wide { grid-template-columns: 1fr; }
  .rail { position: static; }
  .rail ol { display: flex; overflow-x: auto; gap: 4px; }
  .rail ol::before { display: none; }
  .rail li a span.lbl { display: none; }
  .grid2, .grid3, .cols2, .planhero { grid-template-columns: 1fr; }
  .opts { grid-template-columns: 1fr; }
  .opt { min-height: 0; }
  .models { grid-template-columns: 1fr; }
  .approw { grid-template-columns: 1fr 1fr; }
  .pi { grid-template-columns: 1fr; }
  h1 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Print (plan export) ---------- */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .topbar, .rail, .stepnav, .noprint, .readout, .btn, .sharebox { display: none !important; }
  .workshop { display: block; }
  main { padding: 0; max-width: none; }
  .panel { border-color: #bbb; break-inside: avoid; }
  .phase { break-inside: avoid; }
  .pi select { border: 0; appearance: none; padding: 0; }
}

/* ---------- Sign-in page ---------- */
.loginpage main { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.logincard { width: 100%; max-width: 420px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 28px; }
.logincard > svg { color: var(--ink); margin-bottom: 8px; }
.logincard h1 { font-size: 1.5rem; }
.btn.block { width: 100%; justify-content: center; margin-top: 4px; }
.loginerr { background: var(--alert-tint); color: var(--alert); border-left: 4px solid var(--alert); padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: 14px; font-size: 0.92rem; }
.emergency { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.emergency summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.emergency form { margin-top: 10px; }

/* ---------- Break-glass session banner ---------- */
.bgbanner { background: var(--buoy); color: #2b1d00; padding: 8px 24px; font-size: 0.92rem; text-align: center; }

/* ---------- Admin ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--ink); margin-bottom: 20px; overflow-x: auto; }
.tabs a { padding: 9px 14px; text-decoration: none; color: var(--ink-2); font-weight: 700; border-radius: var(--r-sm) var(--r-sm) 0 0; white-space: nowrap; }
.tabs a:hover { color: var(--ink); background: var(--paper-2); }
.tabs a.on { background: var(--ink); color: var(--paper); }
.field .tag { margin-left: 6px; vertical-align: 1px; }
label.checkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
label.checkrow > span { display: inline; margin: 0; }
label.checkrow input { width: 18px; height: 18px; accent-color: var(--sea); }
label.checkrow small { flex-basis: 100%; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bgnew { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; }
.bgnew .field { margin: 0; min-width: 240px; }
.credpanel { border-color: var(--buoy); box-shadow: inset 4px 0 0 var(--buoy); }
.credgrid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.credgrid .qr { background: #fff; padding: 8px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.credgrid .qr svg { display: block; width: 100%; height: auto; }
input.mono, code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
code { font-size: 0.85em; background: var(--paper-2); padding: 1px 5px; border-radius: 3px; word-break: break-all; }
tr.warnrow td { background: var(--buoy-tint); }
@media (max-width: 760px) { .credgrid { grid-template-columns: 1fr; } .credgrid .qr { max-width: 220px; } }