/* 09 · SUPPLIERESG — the embedded walkthrough console.
   The landing page used to show a deck of five description cards, most of them
   drawn at opacity 0, which read as a blank block. This is the tool itself,
   running in the page: the same Collect → Process → Review → Approve → Export
   flow as tool.html, driven by the shared engine in /assets/js/walkthrough.js.

   Two things this file exists to do:

   1. Give the console the handful of spine primitives the tool's own markup
      needs. tool.html gets .panel / .chip / .dot / .tbl / .signoff / .audit /
      .contract from indivesta-spine.css. The Trace-family landing page cannot
      load the spine — its class names collide — so the primitives are ported
      here, scoped to #scConsole, in this page's own palette.

   2. Declare the spine's tokens on #scConsole. soul.css's .sc-* rules (written
      for tool.html) resolve --line / --card / --faint / --t-small and friends
      from the nearest ancestor that defines them, so declaring them on the
      console makes those rules work here without touching soul.css.

   Layout rule: on desktop the console is capped to the viewport by
   .wt-console--fit and its two panes scroll INSIDE it, so following the ghost
   cursor never means scrolling the page. Below 900px the cap is off and the
   page scrolls, as it always did. */

#scConsole{
  /* ---- spine tokens, mapped to this page's palette ---- */
  --card:#ffffff;
  --surface:#f8f7fb;
  --surface-2:#f1eff9;
  --line:var(--border);
  --line-soft:#eeecf5;
  --faint:#6B649A;
  --green:#2F6F4F;
  --amber-rgb:95,1,251;
  --accent-rgb:95,1,251;
  --t-small:.8125rem;
  --t-micro:.6875rem;
  --radius:12px;
  --radius-sm:6px;

  /* ---- palette for the shared walkthrough furniture ---- */
  --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:95,1,251;
  --wt-c-mono:var(--font-mono);

  margin-top:36px;
  color:var(--ink);
  font-family:var(--font-body);
}

/* ---------------------------------------------------------------- shell -- */
/* The engine inserts its controls and narration band as the console's first
   children, so the framed part of the console is the top bar plus the panes.
   They are siblings (the panes row has to be a direct flex child for the
   viewport cap to work), so the frame is drawn across the two of them. */
.scc__top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;
  padding:12px 18px;background:var(--surface);
  border:1px solid var(--border);border-radius:16px 16px 0 0;
}
.scc__who{
  margin:0;font-family:var(--font-mono);font-size:11px;line-height:1.55;color:var(--muted);
  text-align:right;
}
.scc__who b{color:var(--ink);font-weight:600;}

.scc__panes{
  display:grid;grid-template-columns:300px minmax(0,1fr);min-width:0;
  background:var(--card);
  border:1px solid var(--border);border-top:0;border-radius:0 0 16px 16px;
  overflow:hidden;
}
.scc__side{border-right:1px solid var(--border);background:#fcfbfe;min-width:0;}
.scc__main{min-width:0;display:flex;flex-direction:column;gap:12px;padding:12px;}
.scc__side > .panel{border:0;border-bottom:1px solid var(--border);border-radius:0;}
.scc__side > .panel:last-child{border-bottom:0;}

@media (max-width:899px){
  .scc__panes{grid-template-columns:minmax(0,1fr);}
  .scc__side{border-right:0;border-bottom:1px solid var(--border);}
  .scc__who{text-align:left;}
}

/* ---- the five-stage contract bar ---- */
#scConsole .contract{display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
#scConsole .contract__step{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:4px 7px;border-radius:5px;border:1px solid transparent;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
#scConsole .contract__step[data-done="1"]{color:var(--muted);}
#scConsole .contract__step[aria-current="step"]{color:var(--ink);background:var(--card);border-color:var(--border);}
#scConsole .contract__step i{width:5px;height:5px;border-radius:50%;background:var(--border);flex:none;}
#scConsole .contract__step[data-done="1"] i{background:var(--green);}
#scConsole .contract__step[aria-current="step"] i{background:var(--accent);}
#scConsole .contract__arrow{color:#cdc8dd;font-family:var(--font-mono);font-size:10px;}

/* ------------------------------------------------------- spine primitives -- */
#scConsole .panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
}
#scConsole .panel__head{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  padding:9px 14px;border-bottom:1px solid var(--border);background:var(--surface);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
}
#scConsole .panel__head .label{color:var(--muted);}
#scConsole .panel__head > .chip,
#scConsole .panel__head > .sc-stamp,
#scConsole .panel__head > .scc-state{margin-left:auto;}
#scConsole .panel__body{padding:14px;}
#scConsole .panel__body--tight{padding:12px;border-top:1px solid var(--border);}

#scConsole .chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.02em;text-transform:none;
  padding:2px 7px;border-radius:4px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--line-soft);white-space:nowrap;
}
#scConsole .chip--src{
  background:rgba(var(--accent-rgb),.07);border-color:rgba(var(--accent-rgb),.22);color:#4A02C4;
}
#scConsole .chip--none{
  background:rgba(var(--accent-rgb),.09);border-color:rgba(var(--accent-rgb),.3);color:#4A02C4;
}

#scConsole .dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;}
#scConsole .dot--hi{background:var(--green);}
#scConsole .dot--lo{background:var(--accent);}

#scConsole .flag{
  display:flex;gap:9px;align-items:flex-start;
  font-size:var(--t-small);line-height:1.5;
  padding:10px 12px;border-radius:var(--radius-sm);
  background:rgba(var(--accent-rgb),.06);
  border:1px solid rgba(var(--accent-rgb),.26);
  color:#3E0FA0;
}
#scConsole .flag__mark{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;padding-top:2px;flex:none;
}

#scConsole .tbl{width:100%;border-collapse:collapse;font-size:var(--t-small);}
#scConsole .tbl th{
  text-align:left;font-family:var(--font-mono);font-weight:500;
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:8px 10px;border-bottom:1px solid var(--border);
  background:var(--surface);position:sticky;top:0;z-index:2;
}
#scConsole .tbl td{padding:7px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.5;}
#scConsole .tbl tbody tr:last-child td{border-bottom:0;}
#scConsole .tbl .n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
#scConsole .tbl__scroll{max-height:var(--tbl-h,420px);overflow:auto;}

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

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

/* --------------------------------------------------------------- widgets -- */
#scConsole .scc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:10px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-family:var(--font-body);font-size:var(--t-small);font-weight:500;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
#scConsole .signoff .scc-btn{width:auto;}
#scConsole .scc-btn--ghost{background:transparent;color:var(--ink);border-color:var(--border);}
#scConsole .scc-btn[disabled]{
  cursor:not-allowed;background:var(--surface-2);border-color:var(--border);color:var(--faint);
}
#scConsole .scc-btn.is-done{background:var(--accent);border-color:var(--accent);color:#fff;}
#scConsole .scc-state{font-family:var(--font-mono);font-size:10.5px;color:var(--faint);text-transform:none;letter-spacing:0;}
#scConsole .scc-note{
  margin:10px 0 0;font-family:var(--font-mono);font-size:var(--t-micro);line-height:1.7;color:var(--faint);
}
#scConsole .scc-export{display:grid;gap:11px;}
#scConsole .scc-approved{margin:0;font-family:var(--font-mono);font-size:var(--t-micro);color:var(--green);}
#scConsole .scc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
#scConsole .scc-open{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--muted);}
#scConsole .scc-open:hover{color:var(--ink);}
#scConsole .is-hidden{display:none;}
#scConsole .sc-out{min-height:8rem;}
#scConsole .sc-fill{min-height:3.4rem;}

.scc-caption{
  margin:16px 0 0;font-family:var(--font-mono);font-size:11.5px;line-height:1.6;color:var(--muted);
}
.scc-caption a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}

/* ------------------------------------------------------- fit to one screen -- */
/* .wt-console--fit gives each pane its own scrollbar. The two scrollers the
   tool's markup carries inside the right-hand pane (--tbl-h, in rem) would be
   clipped by that cap and would fight the pane's own scrolling, so inside the
   cap they stop being scrollers and let the pane scroll instead. The sticky
   table headers then stick to the pane, which is what you want anyway. */
@media (min-width:900px){
  /* One row, exactly the height the cap leaves. Without this the row is sized
     by its content, the panes are stretched to that and never scroll, and the
     bottom of the console is simply clipped off. */
  #scConsole.wt-console--fit .scc__panes{grid-template-rows:minmax(0,1fr);}
  #scConsole.wt-console--fit .tbl__scroll{max-height:none;overflow:visible;}
  #scConsole.wt-console--fit .sc-out{min-height:6.5rem;}
}

/* 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; }