/* 08 · FUNDERREPORT — the console that runs on the landing page.
   ------------------------------------------------------------------------
   index.html now runs the real tool inside the "How to use" section instead
   of describing it on a stack of cards. The tool's own markup (report.js,
   the .aq-* rules at the foot of soul.css) was written against
   indivesta-spine.css — but this page must not load the spine, because its
   class names (.btn, .hero, .section) collide with soul.css's.

   So this file does two things and nothing else:
     1. declares the handful of spine tokens the .aq-* rules read, scoped to
        the console, in this page's own palette;
     2. ports the spine primitives the tool's markup uses — .panel, .tbl,
        .chip, .label, .audit, .signoff, .flag, .btn, .contract — every rule
        prefixed with #aqConsole so nothing here can reach the landing page.

   Loaded after /assets/css/walkthrough.css so the three accent overrides at
   the foot of this file win. Palette rule inherited from soul.css and not
   negotiable: the accent green only clears 1.88:1 on white, so anything
   sitting on a green fill is BLACK, never white.                          */

/* ---------- tokens the ported rules read -------------------------------- */
#aqConsole{
  --paper:#FFFFFF;
  --card:#FFFFFF;
  --surface:#FAFAF9;
  --surface-2:#F1F1F0;
  --line:#E5E5E5;
  --line-soft:#EFEFEF;
  --faint:rgba(0,0,0,0.58);

  /* Safety signals — the spine's constants, deliberately not themed.
     "Unmet" must not read as the same green as "met", which is what
     soul.css's --amber:#60D38D would have made it. */
  --green:#3F6B4C;
  --amber:#8A5A12;
  --amber-rgb:138,90,18;
  --red:#A33B2E;

  --accent:#60D38D;
  --accent-rgb:96,211,141;

  --radius:12px;
  --radius-sm:8px;
  --t-h3:1.05rem;
  --t-small:.8125rem;
  --t-micro:.6875rem;
  --dur-fast:120ms;
  --dur:180ms;
  --ease-out:cubic-bezier(0.23,1,0.32,1);

  /* the shared walkthrough furniture takes its palette from these */
  --wt-c-ink:var(--ink);
  --wt-c-paper:#FFFFFF;
  --wt-c-line:var(--border);
  --wt-c-muted:var(--muted);
  --wt-c-accent:var(--accent);
  --wt-c-accent-rgb:96,211,141;
  --wt-c-mono:var(--font-mono);

  border:1px solid var(--border);
  border-radius:16px;
  background:#FFFFFF;
  padding:16px;
  margin-top:40px;
}
@media (min-width:768px){ #aqConsole{ padding:20px; } }

/* ---------- the console's own furniture --------------------------------- */
#aqConsole .aq-top{
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line);
}
#aqConsole .aq-who{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--t-micro);
  color:var(--faint);text-align:right;line-height:1.55;
}
#aqConsole .aq-who b{color:var(--ink);font-weight:500;}

#aqConsole .aq-grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);}
@media (min-width:900px){
  #aqConsole .aq-grid{grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);gap:1.25rem;}
}
#aqConsole .aq-col{display:grid;gap:1rem;align-content:start;}
@media (max-width:899.98px){
  /* no viewport cap down here, so keep the section from running to four
     thousand pixels: each column gets its own scroller instead. */
  #aqConsole .aq-col{max-height:76vh;overflow-y:auto;}
}

/* ---------- ported spine primitives ------------------------------------- */
#aqConsole .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
#aqConsole .label{
  font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
#aqConsole .cluster{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;}
#aqConsole .is-hidden{display:none !important;}

#aqConsole .panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
#aqConsole .panel__head{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;
  padding:.7rem 1rem;border-bottom:1px solid var(--line);background:var(--surface);
}
#aqConsole .panel__head--mid{border-top:1px solid var(--line);}
#aqConsole .panel__head .label{color:var(--muted);}
#aqConsole .panel__body{padding:1rem;}

#aqConsole .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.6rem 1.05rem;border-radius:var(--radius-sm);
  border:1px solid var(--ink);background:var(--ink);color:#FFFFFF;
  font-family:var(--font-body);font-size:var(--t-small);font-weight:500;
  letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out);
}
#aqConsole .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);}
#aqConsole .btn--ghost:hover{border-color:var(--ink);}
/* black on the green fill — never white (1.88:1) */
#aqConsole .btn--accent{background:var(--accent);border-color:var(--accent);color:#000000;}
#aqConsole .btn[disabled]{
  cursor:not-allowed;background:var(--surface-2);border-color:var(--line);color:var(--faint);
}

#aqConsole .chip{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:var(--t-micro);
  padding:.16rem .44rem;border-radius:4px;
  background:var(--surface-2);color:var(--muted);
  border:1px solid var(--line-soft);white-space:nowrap;
}
#aqConsole .chip--src{
  background:rgba(var(--accent-rgb),.16);
  border-color:rgba(var(--accent-rgb),.5);
  color:#14361F;
}
#aqConsole .chip--pulse{animation:aqChipPulse 700ms var(--ease-out);}
@keyframes aqChipPulse{
  0%{background:rgba(var(--accent-rgb),.85);}
  100%{background:rgba(var(--accent-rgb),.16);}
}

#aqConsole .flag{
  display:flex;gap:.55rem;align-items:flex-start;
  font-size:var(--t-small);line-height:1.5;
  padding:.6rem .7rem;border-radius:var(--radius-sm);
  background:rgba(var(--amber-rgb),.08);
  border:1px solid rgba(var(--amber-rgb),.3);
  color:#5E3D0C;
}
#aqConsole .flag__mark{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;padding-top:.14rem;flex:none;
}

#aqConsole .tbl{width:100%;border-collapse:collapse;font-size:var(--t-small);}
#aqConsole .tbl th{
  text-align:left;font-family:var(--font-mono);font-weight:500;
  font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding:.55rem .7rem;border-bottom:1px solid var(--ink);
  background:var(--surface);position:sticky;top:0;z-index:2;
}
#aqConsole .tbl td{padding:.5rem .7rem;border-bottom:1px solid var(--line-soft);vertical-align:top;}
#aqConsole .tbl tbody tr:last-child td{border-bottom:0;}
#aqConsole .tbl .n{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap;
}
#aqConsole .tbl td.over{color:var(--amber);}
#aqConsole .tbl td.under{color:var(--green);}
#aqConsole .tbl tr.is-linked{background:rgba(var(--accent-rgb),.22);}

#aqConsole .signoff{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  padding:1rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
}
#aqConsole .signoff__check{
  display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;
  font-size:var(--t-small);line-height:1.5;color:var(--muted);max-width:44ch;
}
#aqConsole .signoff__check input{
  margin-top:.28rem;accent-color:var(--accent);width:15px;height:15px;flex:none;cursor:pointer;
}
#aqConsole .signoff__who{
  font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);
  margin-left:auto;text-align:right;line-height:1.5;
}

#aqConsole .audit{
  list-style:none;margin:0;padding:0;font-family:var(--font-mono);font-size:var(--t-micro);
}
#aqConsole .audit li{
  display:flex;gap:.75rem;padding:.4rem 0;border-bottom:1px dashed var(--line-soft);color:var(--muted);
}
#aqConsole .audit li:last-child{border-bottom:0;}
#aqConsole .audit time{color:var(--faint);flex:none;}
#aqConsole .audit b{font-weight:500;color:var(--ink);}
#aqConsole .audit__empty{color:var(--faint);}

#aqConsole .wb__note{font-size:var(--t-small);line-height:1.55;color:var(--faint);max-width:64ch;}
#aqConsole .aq-prog{font-weight:600;font-size:var(--t-small);}
#aqConsole .aq-agree{display:grid;gap:.4rem;}
#aqConsole .aq-approved{
  margin:0;font-family:var(--font-mono);font-size:var(--t-micro);color:var(--green);
}

/* the five-stage bar, ported from the spine */
#aqConsole .contract{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;}
#aqConsole .contract__step{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
  padding:.3rem .55rem;border-radius:4px;border:1px solid transparent;background:none;
  transition:color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
#aqConsole .contract__step[data-done="1"]{color:var(--muted);}
#aqConsole .contract__step[aria-current="step"]{
  color:var(--ink);background:var(--card);border-color:var(--ink);
}
#aqConsole .contract__step i{width:5px;height:5px;border-radius:50%;background:var(--line);flex:none;}
#aqConsole .contract__step[data-done="1"] i{background:var(--green);}
#aqConsole .contract__step[aria-current="step"] i{background:var(--accent);}
#aqConsole .contract__arrow{color:var(--line);font-family:var(--font-mono);font-size:var(--t-micro);}

/* ---------- fitting the tool onto one screen ----------------------------- */
/* wt-console--fit caps the console at the viewport and lets .wt-panes'
   children scroll. Anything inside with a height in rem has to give, or it is
   clipped rather than scrolled. */
@media (min-width:900px){
  /* the cap turns the console into a flex column: the header and the controls
     keep their own height, and only the pane row takes what is left */
  #aqConsole.wt-console--fit > .aq-top,
  #aqConsole.wt-console--fit > #aqWalk{flex:none;}
  #aqConsole.wt-console--fit .aq-out{min-height:6.5rem;}
  #aqConsole.wt-console--fit .aq-fill{min-height:3.6rem;}
}

/* ---------- three overrides on the shared walkthrough furniture ---------- */
/* Everything else in walkthrough.css is fine on this palette; these three put
   text ON the accent green, which on this page is always black. */
#aqConsole .wt-say__count{color:#000000;}
#aqConsole .wt-say__stage{color:var(--ink);}
#aqConsole .wt-play-btn.paused{color:var(--ink);border-color:var(--ink);}

/* The menu is fixed to the top of the window on this page, so the one-screen
   console in /assets/css/walkthrough.css is capped against the room left under
   it, not the whole window. 57px of stuck bar (20px mark + 2x18px padding +
   1px hairline) plus the sheet's own 40px margin. This sheet is loaded after
   walkthrough.css, which only ever reads the token. */
:root{ --wt-headroom:98px; }