/* ==========================================================================
   PROLES CONSULTING — SHOWCASE & DEMOS
   Loaded AFTER assets/mizu.css. Mizu owns the chrome (.nav, .wrap, .meta,
   .btn, .section); this file adds only the demo instruments.

   DESIGN DECISION, recorded so nobody re-derives it
   -------------------------------------------------
   The live public site speaks "Mizu" — cream editorial, Fraunces + Inter.
   The legacy dark P5 sheet (style.css) is used ONLY by the two portfolio
   pages. Forking a third language for the showcase would have made the site
   speak three ways at once, so the showcase is Mizu-cohesive and carries the
   p5-ui GRAMMAR instead of its palette:
     §1.1 aggressive geometry — every panel/button/chip has an angled edge
     §1.2 high contrast, red is MEANING (a broken chain, a refusal) never decor
     §1.3 loud display + tiny wide-tracked caps labels, nothing in between
     §1.4 fast, deliberate, punctuated motion — 80-300ms, ease-out, never linear
     §1.5 one dominant element per screen; body left-aligned, never centred
     §1.6 UI as character — stamps, hard edges, no soft shadows, no rounded corners
   The full p5-ui dark palette is available as a ONE-ATTRIBUTE SKIN SWAP:
   put data-skin="p5" on <html> and every token below flips. The site owner
   chooses; nothing else in the markup changes.
   ========================================================================== */

:root {
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* Roles, named by MEANING not by colour, so the skin swap cannot invert a
     signal. "valid" must read as valid in both skins. */
  --sc-page: var(--cream);
  --sc-panel: #FBF8F2;
  --sc-panel-2: #F3EDE2;
  --sc-text: var(--ink);
  --sc-muted: var(--ink-60);
  --sc-line: var(--hair);
  --sc-line-hard: rgba(22, 22, 22, 0.32);
  --sc-break: var(--strike);      /* a broken chain, a refusal, a failure */
  --sc-break-bg: rgba(194, 36, 27, 0.10);
  --sc-valid: #1F6B3A;            /* an intact chain, an approval */
  --sc-valid-bg: rgba(31, 107, 58, 0.09);
  --sc-hold: #8A6B08;             /* pending / declared / held — neither yet */
  --sc-hold-bg: rgba(232, 180, 20, 0.16);
  --sc-demo: #F5C518;             /* the DEMO label. Loud on purpose. */
  --sc-demo-ink: #1A1405;
  --sc-accent: var(--terra);
  --sc-edit: #1A5C8A;             /* the tamper affordance */
}

html[data-skin="p5"] {
  --cream: #070708; --ink: #E8E8F0; --tan: #1A1A1E; --sage: #3A3A42;
  --terra: #00C8DC; --crimson: #E60012; --strike: #FF2A36;
  --ink-60: #9A9AA3; --ink-40: #78787F;
  --hair: rgba(232, 232, 240, .16); --crimson-hair: rgba(230, 0, 18, .40);
  --sc-page: #070708; --sc-panel: #111115; --sc-panel-2: #1A1A1E;
  --sc-text: #E8E8F0; --sc-muted: #9A9AA3;
  --sc-line: rgba(232, 232, 240, .16); --sc-line-hard: rgba(232, 232, 240, .34);
  --sc-break: #FF2A36; --sc-break-bg: rgba(230, 0, 18, .14);
  --sc-valid: #FFCC00; --sc-valid-bg: rgba(255, 204, 0, .10);
  --sc-hold: #E8A020; --sc-hold-bg: rgba(232, 160, 32, .12);
  --sc-demo: #FFCC00; --sc-demo-ink: #14100A;
  --sc-accent: #00C8DC; --sc-edit: #00C8DC;
}
html[data-skin="p5"] body { background: var(--sc-page); color: var(--sc-text); }

/* ============================================================ THE DEMO LABEL
   client-site-pipeline Phase 6: demo data is labelled demo EVERYWHERE it
   appears. This bar is in the SERVED HTML of every demo page, never injected
   by script — a label a no-JS visitor cannot see is not a label, and a label
   the anonymity gate cannot read in the response body cannot be asserted.
   ============================================================================ */
/* Mizu's .nav is position:fixed, 64px tall, z-index 100 (mizu.css:79-96).
   The demo bar sits directly beneath it and MUST stay below it in z-order —
   the one label that must never be scrolled away is the demo label, so it is
   sticky, not static. Every showcase page carries .sc-page for the offset. */
.sc-page { padding-top: 64px; }

.demobar {
  position: sticky; top: 64px; z-index: 60;
  background: var(--sc-demo); color: var(--sc-demo-ink);
  border-bottom: 3px solid var(--sc-demo-ink);
}
.demobar__inner {
  max-width: var(--max); margin: 0 auto; padding: 9px var(--gutter);
  display: flex; gap: 8px 20px; align-items: baseline; flex-wrap: wrap;
}
.demobar b {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.demobar span { font-size: 13.5px; line-height: 1.45; }
.chip-demo {
  display: inline-block; background: var(--sc-demo); color: var(--sc-demo-ink);
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; padding: 4px 10px 3px;
  clip-path: polygon(7% 0%, 100% 0%, 93% 100%, 0% 100%);   /* p5-ui §3 parallelogram */
  vertical-align: middle;
}

/* ------------------------------------------------------------------ layout - */
.sc-hero { padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 48px); }
.sc-hero h1 {
  font-family: var(--serif); font-weight: 400; line-height: 1.02;
  font-size: clamp(38px, 7vw, 84px); letter-spacing: -0.025em; margin: 14px 0 22px;
}
.sc-hero h1 em { font-style: italic; color: var(--sc-accent); }
.sc-lede { font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; max-width: 60ch; color: var(--sc-text); }
.sc-body { max-width: 68ch; }
.sc-body p { margin: 0 0 1.05em; }
.sc-note { font-size: 13.5px; line-height: 1.6; color: var(--sc-muted); max-width: 74ch; }
.sc-stack > * + * { margin-top: clamp(22px, 3vw, 34px); }

/* p5-ui §1.5 — a step tag between two rules, structure you can scan */
.sc-steptag { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; }
.sc-steptag .meta { white-space: nowrap; }
.sc-steptag::before { content: ""; height: 2px; width: 30px; background: var(--crimson); flex: 0 0 auto; }
.sc-steptag::after { content: ""; height: 1px; background: var(--sc-line); flex: 1 1 auto; }

/* ------------------------------------------------------------------ panels - */
.sc-panel {
  background: var(--sc-panel); border: 1px solid var(--sc-line-hard);
  padding: clamp(20px, 3vw, 34px);
  /* p5-ui §1.1 — no plain rectangles. Torn-paper card, canonical clip. */
  clip-path: polygon(0% 0%, 99.2% 0%, 100% 2.6%, 100% 100%, 0.8% 100%, 0% 97.4%);
}
.sc-panel--quiet { background: var(--sc-panel-2); }
.sc-panel h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.015em; margin: 0 0 12px; }
.sc-panel h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.01em; margin: 0 0 10px; }

.sc-grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
@media (min-width: 780px) {
  .sc-grid.two { grid-template-columns: 1fr 1fr; }
  .sc-grid.three { grid-template-columns: repeat(3, 1fr); }
  .sc-grid.side { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}

/* --------------------------------------------------------- capability cards */
a.sc-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--sc-panel); border: 1px solid var(--sc-line-hard);
  padding: 24px 24px 22px;
  clip-path: polygon(0% 0%, 97.5% 0%, 100% 4.5%, 100% 100%, 2.5% 100%, 0% 95.5%);
  transition: transform 160ms cubic-bezier(.2, .9, .3, 1), border-color 160ms ease-out, background 160ms ease-out;
}
a.sc-card:hover, a.sc-card:focus-visible {
  transform: translate(-4px, -4px); border-color: var(--crimson);
  background: var(--sc-panel-2); outline: none;
}
.sc-card h3 { margin: 10px 0 9px; }
.sc-card p { font-size: 14.5px; line-height: 1.55; color: var(--sc-muted); margin: 0; flex: 1 1 auto; }
.sc-card .sc-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--crimson);
}
.sc-card .sc-go .ar { transition: transform 200ms ease-out; }
a.sc-card:hover .sc-go .ar { transform: translateX(6px); }
.sc-card--static { border-style: dashed; }
.sc-card--static .sc-go { color: var(--sc-muted); }

/* ----------------------------------------------------------------- buttons -
   p5-ui §3 shadow-slab: two layers, and on press BOTH land on the same point.
   80ms ease-out. Hard edges, no soft shadow, no rounded corner.            */
.sc-btn {
  position: relative; display: inline-block; cursor: pointer;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 13px 22px; border: 0; color: var(--cream); background: var(--strike);
  clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
  box-shadow: 5px 5px 0 var(--crimson);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out, background 80ms ease-out;
}
.sc-btn:hover { background: var(--crimson); }
.sc-btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--crimson); }
.sc-btn:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; }
.sc-btn[disabled] { background: var(--sc-panel-2); color: var(--sc-muted); box-shadow: 5px 5px 0 var(--sc-line); cursor: not-allowed; }
.sc-btn--ghost { background: transparent; color: var(--sc-text); border: 1px solid var(--sc-line-hard); box-shadow: 5px 5px 0 var(--sc-line); }
.sc-btn--ghost:hover { background: var(--sc-panel-2); border-color: var(--sc-text); color: var(--sc-text); }
.sc-btn--go { background: var(--sc-valid); box-shadow: 5px 5px 0 rgba(0, 0, 0, .35); color: var(--cream); }
html[data-skin="p5"] .sc-btn--go { color: #14100A; }
.sc-controls { display: flex; gap: 14px 16px; flex-wrap: wrap; align-items: center; margin: 22px 0 0; }

/* ------------------------------------------------------------------ tables - */
.sc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.sc-data { width: 100%; min-width: 660px; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
table.sc-data caption { text-align: left; padding: 0 0 10px; font-family: var(--sans); font-size: 13px; color: var(--sc-muted); }
table.sc-data th {
  text-align: left; font-weight: 700; font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sc-muted);
  border-bottom: 2px solid var(--sc-line-hard); padding: 9px 10px; white-space: nowrap;
}
table.sc-data td { padding: 9px 10px; border-bottom: 1px solid var(--sc-line); vertical-align: top; }
table.sc-data tr.is-broken td { background: var(--sc-break-bg); color: var(--sc-break); }
table.sc-data tr.is-tampered td { background: var(--sc-break-bg); box-shadow: inset 3px 0 0 var(--sc-break); }
table.sc-data tr.is-correction td { background: var(--sc-valid-bg); box-shadow: inset 3px 0 0 var(--sc-valid); }
table.sc-data tr.is-superseded td.supq { text-decoration: line-through; text-decoration-color: var(--sc-break); opacity: .7; }
.sc-hash { color: var(--sc-muted); }
.sc-hash.ok { color: var(--sc-valid); }
.sc-hash.bad { color: var(--sc-break); font-weight: 700; }
td.sc-edit { color: var(--sc-edit); cursor: text; font-weight: 700; }
td.sc-edit:hover { background: rgba(26, 92, 138, .08); }
td.sc-edit:focus { outline: 2px solid var(--sc-edit); outline-offset: -2px; background: rgba(26, 92, 138, .12); }
html[data-skin="p5"] td.sc-edit:hover { background: rgba(0, 200, 220, .10); }

/* ----------------------------------------------------------------- verdict - */
.sc-verdict {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 15px 18px; margin: 20px 0 0;
  border-left: 7px solid var(--sc-valid); background: var(--sc-valid-bg); color: var(--sc-valid);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
}
.sc-verdict .big { font-family: var(--serif); font-size: 21px; letter-spacing: -0.01em; }
.sc-verdict.is-bad { border-left-color: var(--sc-break); background: var(--sc-break-bg); color: var(--sc-break); }
.sc-verdict.is-hold { border-left-color: var(--sc-hold); background: var(--sc-hold-bg); color: var(--sc-hold); }

/* ------------------------------------------------------------------- stats - */
.sc-stats { display: flex; gap: 22px 40px; flex-wrap: wrap; margin: 18px 0 0; }
.sc-stat .n { font-family: var(--serif); font-size: clamp(28px, 4vw, 44px); line-height: 1; letter-spacing: -0.02em; }
.sc-stat .n.ok { color: var(--sc-valid); }
.sc-stat .n.bad { color: var(--sc-break); }
.sc-stat .n.hold { color: var(--sc-hold); }
.sc-stat .meta { display: block; margin-top: 7px; }

/* ------------------------------------------------------------------- forms - */
.sc-field { display: block; }
.sc-field .meta { display: block; margin-bottom: 6px; }
input.sc-in, select.sc-in {
  background: var(--sc-page); color: var(--sc-text);
  border: 1px solid var(--sc-line-hard); font-family: var(--mono); font-size: 14px;
  padding: 10px 12px; width: 100%; max-width: 230px; border-radius: 0;
}
input.sc-in:focus, select.sc-in:focus { outline: none; border-color: var(--crimson); }
input[type="range"].sc-range { width: 100%; max-width: 320px; accent-color: var(--strike); }

/* --------------------------------------------------------------- floorplan - */
svg.sc-plan { width: 100%; height: auto; display: block; background: var(--sc-panel-2); border: 1px solid var(--sc-line-hard); }
svg.sc-plan .shell { fill: none; stroke: var(--sc-line-hard); stroke-width: 2; }
svg.sc-plan .rack { fill: var(--sage); stroke: var(--sc-line-hard); stroke-width: .6; }
svg.sc-plan .rack.occ { fill: var(--crimson); }
svg.sc-plan .rack.sel { fill: var(--sc-demo); stroke: var(--sc-demo-ink); stroke-width: 1.4; }
svg.sc-plan .dock { fill: none; stroke: var(--sc-accent); stroke-width: 2.5; stroke-dasharray: 7 5; }
svg.sc-plan text { font-family: var(--mono); font-size: 7px; letter-spacing: .14em; fill: var(--sc-muted); }
svg.sc-plan text.big { font-size: 11px; fill: var(--sc-text); letter-spacing: .2em; }

/* ------------------------------------------------------------------- phone - */
.sc-phone {
  width: 302px; max-width: 100%; border: 2px solid var(--sc-line-hard);
  background: var(--sc-panel-2); padding: 13px;
  clip-path: polygon(0% 1.6%, 2.4% 0%, 100% 0%, 100% 98.4%, 97.6% 100%, 0% 100%);
}
.sc-phone .screen { background: var(--sc-page); border: 1px solid var(--sc-line); padding: 14px; min-height: 262px; font-family: var(--mono); font-size: 12px; }
.sc-phone .bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.netpill { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--sc-valid); color: var(--sc-valid); }
.netpill.off { border-color: var(--sc-break); color: var(--sc-break); }
.sc-queue { list-style: none; margin: 12px 0 0; padding: 0; }
.sc-queue li { border-left: 3px solid var(--sc-hold); padding: 5px 0 5px 10px; margin-bottom: 6px; font-size: 11px; color: var(--sc-muted); }
.sc-queue li.sent { border-left-color: var(--sc-valid); color: var(--sc-valid); }
.sc-queue li.refused { border-left-color: var(--sc-break); color: var(--sc-break); }
.scanline { font-size: 13px; font-weight: 700; color: var(--sc-text); word-break: break-all; }

/* -------------------------------------------------------------- bar charts - */
.sc-bars { display: flex; align-items: flex-end; gap: 7px; height: 160px; margin: 16px 0 10px; border-bottom: 2px solid var(--sc-line-hard); }
.sc-bars .b { flex: 1 1 0; min-width: 5px; background: var(--sage); position: relative; transition: height 220ms cubic-bezier(.2, .9, .3, 1); }
.sc-bars .b.hot { background: var(--strike); }
.sc-bars .b.soak { background: var(--sc-hold); }
.sc-bars .b.done { background: var(--sc-valid); }
.sc-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.sc-legend i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; }

/* ------------------------------------------------------- ledger detail box - */
.sc-kv { font-family: var(--mono); font-size: 11.5px; line-height: 1.7; word-break: break-all; }
.sc-kv b { color: var(--sc-muted); font-weight: 700; }
pre.sc-pre {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65; margin: 0;
  background: var(--sc-panel-2); border: 1px solid var(--sc-line);
  padding: 14px; overflow-x: auto; white-space: pre; color: var(--sc-text);
}

/* -------------------------------------------------------------------- misc - */
.sc-list { margin: 0; padding-left: 1.1em; }
.sc-list li { margin-bottom: .5em; }
.sc-footnote { border-top: 1px solid var(--sc-line); margin-top: clamp(40px, 6vw, 72px); padding: 26px 0 70px; }
:where(a, button, [tabindex], [contenteditable]):focus-visible { outline: 3px solid var(--crimson); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* p5-ui §1.4 motion is deliberate — and OPTIONAL. A dead animation is correct
   accessibility; every demo must stay fully operable with motion off. */
@media (prefers-reduced-motion: reduce) {
  .sc-bars .b, a.sc-card, .sc-btn, .sc-card .sc-go .ar { transition-duration: .001ms !important; }
}

@media (max-width: 640px) {
  table.sc-data { font-size: 11px; }
  table.sc-data td, table.sc-data th { padding: 7px 7px; }
  .sc-btn { padding: 12px 16px; font-size: 10px; letter-spacing: .14em; }
  .sc-stats { gap: 16px 26px; }
  .demobar span { font-size: 12.5px; }
}

/* ------------------------------------------------- horizontal schedule bars -
   Used by the soak-vs-backlog demo. The SOAK segment is the argument: it is
   drawn the same width on every row, so "more people" visibly fails to shorten
   it. A chart whose shape does not carry the claim is decoration. */
.sc-hrow { display: grid; grid-template-columns: 84px 1fr 118px; gap: 12px; align-items: center; margin-bottom: 8px; }
.sc-hrow .lab { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--sc-muted); text-align: right; }
.sc-hrow .track { position: relative; height: 24px; background: var(--sc-panel-2); border: 1px solid var(--sc-line); display: flex; }
.sc-hrow .seg { height: 100%; transition: width 220ms cubic-bezier(.2,.9,.3,1); }
.sc-hrow .seg.build { background: var(--crimson); }
.sc-hrow .seg.soak { background: var(--sc-hold); }
.sc-hrow .fin { font-family: var(--mono); font-size: 11.5px; font-weight: 700; }
.sc-hrow.is-target .lab { color: var(--sc-text); font-weight: 700; }
.sc-hrow .fin.miss { color: var(--sc-break); }
.sc-hrow .fin.hit { color: var(--sc-valid); }
.sc-target { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--sc-text); z-index: 2; }
.sc-target::after { content: "target"; position: absolute; top: -15px; left: -14px; font-family: var(--mono); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-text); }

/* ==========================================================================
   MOBILE HARDENING — measured at 390px, not assumed.
   Mizu sets `html,body{overflow-x:clip}` (mizu.css:27), so an element wider
   than the viewport does NOT produce a scrollbar: it is silently CUT OFF.
   That is worse than an overflow, because the page looks fine in a thumbnail
   and the missing column is invisible until somebody needs it. Measured at
   390px: the schedule chart's finish-date column and the ledger's preimage
   block were both being clipped away.
   Cause: grid and flex children default to `min-width:auto`, so a <pre> or a
   wide table forces its COLUMN to grow rather than scrolling inside itself.
   Cure is the column, not the content.
   ========================================================================== */
.sc-grid > *,
.sc-panel, .sc-body, .sc-stats, .sc-stat, .sc-verdict, .sc-hrow, .sc-hrow > * {
  min-width: 0;
}
pre.sc-pre { max-width: 100%; }
.sc-verdict { overflow-wrap: anywhere; }
/* The step tag carries a DEMO chip; it must wrap rather than push it off-panel. */
.sc-steptag { flex-wrap: wrap; row-gap: 8px; }
.sc-steptag::after { min-width: 20px; }

@media (max-width: 640px) {
  /* The finish date is the POINT of the schedule chart — never let it be the
     column that gets clipped. Narrower label + date, and the bar takes the rest. */
  .sc-hrow { grid-template-columns: 58px 1fr 84px; gap: 8px; }
  .sc-hrow .lab { font-size: 9.5px; letter-spacing: .04em; }
  .sc-hrow .fin { font-size: 9.5px; }
  .sc-hrow .track { height: 20px; }
  .sc-stat .n { font-size: clamp(24px, 8vw, 32px); }
  .sc-phone { width: 100%; }
}