/* ==========================================================================
   CONSOLE — DEMO INTERIORS ONLY  (CSITE-49)

   Owns the inside of `.el__demo` and nothing else. The shell owns the page,
   the `.el` block and every design token; this file consumes those tokens and
   redefines none of them. Everything here is prefixed `d-` or scoped to `.d`,
   which is the wrapper each demo interior opens with.

   Grammar lifted from prototypes/lcars-primitives/primitives.css and adapted:
   chrome is round (radius = exactly half the cross-axis extent), glass is
   square (tables, wells, fields, panels all radius 0), one 4px gap between
   members, two type weights.

   Three rules from docs/lcars-extraction.md §4.2 are load-bearing here and are
   the reason several of these look different from the kit:
     · no control state is ever encoded with opacity alone — the kit's toggle
       off-track measures 2.23:1 and its focused option 1.44:1;
     · every focus indicator is a real 2px outline, never a colour shift;
     · reduced motion leaves a CORRECT STATIC END STATE, not a paused one.

   Hue numbering assumed from the kit's own token order (1 orange, 2 peach,
   3 lavender, 4 blue, 5 red, 6 yellow, 7 ice, 8 violet, 9 beige). Only 1, 4,
   5 and 6 are used, each through a local alias below, so a different mapping
   is a four-line change.
   ========================================================================== */

.d{
  /* Local derivations. Ratios measured on --c-void #1B1726. */
  --d-key:  var(--c-hue-1, #FF9900);  /* primary interactive          8.19:1 */
  --d-data: var(--c-hue-4, #9999FF);  /* information / data           6.98:1 */
  --d-bad:  var(--c-hue-5, #CC6666);  /* alert / refusal              4.73:1 */
  --d-warn: var(--c-hue-6, #FFFF99);  /* caution                     16.72:1 */
  --d-ok:   #7ADB86;                  /* nominal. the nine carry no green.
                                                                     10.28:1 */
  --d-ink:  var(--c-ink, #F2EFE6);
  --d-dim:  var(--c-dim, #ADA6BE);
  --d-hair: var(--c-hair, #3A3348);
  --d-well: var(--c-panel, #241E33);
  --d-on:   var(--c-on-hue, #16121F);
  --d-ring: var(--c-edge, #F2EFE6);
  --d-fast: var(--c-fast, 120ms);
  --d-g:    var(--c-gap, 4px);
  /* a line that must be SEEN — 3:1 against the well, unlike the hairline */
  --d-lit:  #6B6480;
  --d-lit:  color-mix(in srgb, var(--d-hair) 45%, var(--d-dim));
  /* row hover / pressed well */
  --d-hi:   #2F2841;
  --d-hi:   color-mix(in srgb, var(--d-well) 86%, var(--d-ink));

  font-size: .9375rem;
  line-height: 1.45;
  color: var(--d-ink);
}

/* [hidden] must beat every display: rule below it — .d-btn is display:inline-flex,
   which silently outranks the user-agent's [hidden]{display:none} and leaves
   "undo" and "retry" buttons on screen before anything has happened. */
.d [hidden]{ display:none !important }

/* ---- layout ------------------------------------------------------------ */
.d-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.d-row.is-tight{ gap:var(--d-g) }
.d-col{ display:flex; flex-direction:column; gap:8px }
.d-grid{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)) }
.d-grid.is-wide{ grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)) }
.d-sc{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.d-sp{ margin-top:10px }
.d > * + *{ margin-top:10px }

/* ---- type -------------------------------------------------------------- */
.d-lbl{
  display:block; font-weight:600; font-size:.6875rem; line-height:1.3;
  text-transform:uppercase; letter-spacing:.08em; color:var(--d-dim);
}
.d-note{ font-size:.75rem; line-height:1.4; color:var(--d-dim); margin:0 }
.d-note b{ color:var(--d-warn); font-weight:600 }
.d-out{
  font-size:.8125rem; line-height:1.4; color:var(--d-ink);
  background:var(--d-well); border:1px solid var(--d-hair);
  padding:8px 10px; margin:0; min-height:2.6em;
}
.d-out em{ color:var(--d-dim); font-style:normal }
.d-num{ font-variant-numeric:tabular-nums }
.d-pre{
  margin:0; padding:8px 10px; background:var(--d-well);
  border:1px solid var(--d-hair); color:var(--d-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.75rem; line-height:1.5; white-space:pre; overflow-x:auto;
}

/* ---- controls. a button is a bar; the cap is half its height. ----------- */
.d button, .d input, .d select, .d textarea{ font-family:inherit }
.d-btn{
  --h:30px; --r:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  height:var(--h); min-width:var(--h); padding-inline:var(--r);
  border:0; border-radius:var(--r);
  background:var(--d-key); color:var(--d-on);
  font-weight:600; font-size:.75rem; line-height:1;
  text-transform:uppercase; letter-spacing:.045em;
  max-width:100%; white-space:nowrap; cursor:pointer; user-select:none;
  transition:background-color var(--d-fast) ease-in-out;
}
.d-btn:hover{ background:color-mix(in srgb, var(--d-key) 78%, #FFF) }
.d-btn:active{ background:color-mix(in srgb, var(--d-key) 84%, var(--c-void,#1B1726)) }
.d-btn.is-quiet{ background:transparent; color:var(--d-ink); box-shadow:inset 0 0 0 2px var(--d-lit) }
.d-btn.is-quiet:hover{ background:var(--d-hi) }
.d-btn.is-bad{ background:var(--d-bad) }
.d-btn.is-sq{ border-radius:0; padding-inline:12px }
/* disabled reads as a HOLE, never as a dimmed member (LCARS-6). */
.d-btn:disabled, .d-btn[aria-disabled="true"]{
  background:transparent; color:var(--d-dim);            /* 7.50:1, not the kit's 2.23:1 */
  box-shadow:inset 0 0 0 2px var(--d-lit); cursor:not-allowed;
}
.d-btn[aria-pressed="true"]{ background:var(--d-ink); color:var(--c-void,#1B1726) }

/* focus is an outline. every time, everywhere, no exceptions. */
.d :focus-visible{ outline:2px solid var(--d-ring); outline-offset:2px }
.d .d-tbl tr:focus-visible, .d .d-opt:focus-visible{ outline-offset:-2px }

/* chips: a strip of capped bars, only the run's outer ends capped */
.d-chip{
  --h:26px; --r:13px;
  display:inline-flex; align-items:center; height:var(--h); padding-inline:12px;
  border:0; border-radius:0; background:transparent; color:var(--d-ink);
  box-shadow:inset 0 0 0 1px var(--d-lit);
  font-weight:600; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em;
  cursor:pointer; white-space:nowrap;
  transition:background-color var(--d-fast) ease-in-out;
}
.d-strip{ display:flex; gap:var(--d-g); flex-wrap:wrap }
.d-strip > .d-chip:first-child{ border-radius:var(--r) 0 0 var(--r); padding-left:var(--r) }
.d-strip > .d-chip:last-child{ border-radius:0 var(--r) var(--r) 0; padding-right:var(--r) }
.d-chip:hover{ background:var(--d-hi) }
.d-chip[aria-pressed="true"]{ background:var(--d-key); color:var(--d-on); box-shadow:none }

/* fields: dark well, a 3px rail underneath, no box and no radius */
.d-fld{ display:flex; flex-direction:column; gap:5px; min-width:0 }
.d-inp, .d-ta, .d-nat{
  width:100%; min-width:0; padding:7px 10px;
  background:var(--d-well); color:var(--d-ink);
  border:0; border-bottom:3px solid var(--d-lit); border-radius:0;
  font-size:.875rem; line-height:1.35;
  transition:border-color var(--d-fast) ease-in-out;
}
.d-inp:focus-visible, .d-ta:focus-visible, .d-nat:focus-visible{ border-bottom-color:var(--d-ink) }
.d-inp::placeholder, .d-ta::placeholder{ color:var(--d-dim); opacity:1 }
.d-ta{ resize:vertical; min-height:4.5em; font-family:inherit }
.d-nat{ height:34px; padding-block:0 }
.d-fld.is-bad .d-inp, .d-fld.is-bad .d-ta{ border-bottom-color:var(--d-bad) }
.d-err{ font-size:.75rem; line-height:1.35; color:var(--d-bad); font-weight:600 }
.d-err:empty{ display:none }
.d-hint{ font-size:.75rem; line-height:1.35; color:var(--d-dim) }
.d-cbx{ display:flex; align-items:flex-start; gap:8px; font-size:.8125rem; line-height:1.35 }
.d-cbx input{ margin:2px 0 0; accent-color:var(--d-key); width:16px; height:16px; flex:0 0 auto }

/* ---- table: the header row IS a thin bar. rows square, hairline between. - */
.d-tbl{ width:100%; border-collapse:collapse; font-size:.8125rem; line-height:1.35 }
.d-tbl thead tr{ background:var(--d-key) }
.d-tbl th{
  padding:5px 10px; text-align:left; white-space:nowrap; color:var(--d-on);
  font-weight:700; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em;
}
.d-tbl td:first-child{ white-space:nowrap }
.d-tbl td{ padding:6px 10px; border-bottom:1px solid var(--d-hair); vertical-align:middle }
.d-tbl tbody tr:last-child td{ border-bottom:0 }
.d-tbl .num{ text-align:right; font-variant-numeric:tabular-nums }
.d-tbl-wrap{ border:1px solid var(--d-hair); overflow-x:auto }
.d-tbl tbody tr.is-on{ background:var(--d-hi) }
.d-tbl tbody tr.is-hit td{ background:var(--d-hi) }
/* a sortable header is a button filling the cell, not a click handler on a th */
.d-sort{
  display:flex; align-items:center; gap:5px; width:100%; padding:0;
  background:none; border:0; color:inherit; font:inherit; cursor:pointer;
  text-transform:inherit; letter-spacing:inherit;
}
.d-sort .d-ar{ font-size:.8em; opacity:0 }
th[aria-sort="ascending"] .d-ar, th[aria-sort="descending"] .d-ar{ opacity:1 }
.d-tbl th:has(.d-sort){ padding:0 }
.d-sort{ padding:5px 10px }
th.num .d-sort{ justify-content:flex-end }

/* editable cell */
.d-cell{
  display:block; width:100%; padding:2px 6px; margin:-2px -6px;
  background:none; border:0; border-bottom:1px dashed var(--d-lit);
  color:inherit; font:inherit; text-align:inherit; cursor:text;
}
.d-cell:hover{ background:var(--d-hi) }
td.num .d-cell{ text-align:right }

/* ---- readout: label above, value large, unit on the baseline ------------ */
.d-ro{ background:var(--d-well); border:1px solid var(--d-hair); padding:8px 10px; min-width:0 }
.d-ro .rl{ display:block; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; color:var(--d-dim) }
.d-ro .rv{ font-weight:800; font-size:1.6rem; line-height:1.15; color:var(--d-data); font-variant-numeric:tabular-nums }
.d-ro .ru{ font-size:.75rem; color:var(--d-dim) }
.d-ro .rd{ font-size:.75rem; font-weight:600 }
.d-ro .rd.up{ color:var(--d-ok) } .d-ro .rd.dn{ color:var(--d-bad) }

/* ---- status: a dot AND a written word. colour never carries it alone. --- */
.d-st{ display:inline-flex; align-items:center; gap:7px; font-size:.75rem;
       text-transform:uppercase; letter-spacing:.06em; font-weight:600 }
.d-st .dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; background:var(--d-lit);
             /* a ring on every dot, so the component is perceivable whatever ground it
                lands on. the colour is then a second signal and never the only one —
                the written word beside it is mandatory. */
             box-shadow:0 0 0 1px var(--d-lit) }
.d-st[data-s="ok"] .dot{ background:var(--d-ok) }
.d-st[data-s="warn"] .dot{ background:var(--d-warn) }
.d-st[data-s="bad"] .dot{ background:var(--d-bad) }
.d-st[data-s="busy"] .dot{ background:var(--d-data) }
.d-st[data-s="off"] .dot{ background:transparent; box-shadow:inset 0 0 0 2px var(--d-lit) }

/* ---- progress: square segments, empty ones OUTLINED not tinted ---------- */
.d-pg{ display:flex; align-items:center; gap:8px }
.d-pg .tr{ flex:1; display:flex; gap:2px; height:12px; min-width:80px }
.d-pg .sg{ flex:1; border-radius:1px; box-shadow:inset 0 0 0 1px var(--d-lit) }
.d-pg .sg.on{ background:var(--d-key); box-shadow:none }
.d-pg .pv{ font-size:.75rem; font-weight:600; min-width:4ch; text-align:right; font-variant-numeric:tabular-nums }

/* ---- chart: inline svg, no library. dasharray lives in CSS so the reduced
   -motion rule can actually beat it (the kit sets it inline; LCARS-4). ----- */
.d-chart{ background:var(--d-well); border:1px solid var(--d-hair); padding:6px }
.d-chart svg{ display:block; width:100%; height:auto }
.d-chart .g{ stroke:var(--d-lit); stroke-width:1 }
.d-chart .ax{ font-size:9px; fill:var(--d-dim) }
.d-chart .ln{ fill:none; stroke:var(--d-data); stroke-width:2; stroke-linecap:round;
              stroke-linejoin:round; stroke-dasharray:1400; stroke-dashoffset:0 }
.d-chart .ar{ fill:var(--d-data); opacity:.2 }
.d-chart .br{ fill:var(--d-key) }
.d-chart .br2{ fill:var(--d-lit) }
@keyframes d-draw{ from{ stroke-dashoffset:1400 } to{ stroke-dashoffset:0 } }
@keyframes d-grow{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
.d-chart.go .ln{ animation:d-draw 900ms ease-in-out both }
.d-chart.go .br{ transform-box:fill-box; transform-origin:bottom;
                 animation:d-grow 600ms ease-out both }
/* a bar you can click is a real button wrapping the rect */
.d-chart .hit{ cursor:pointer }
.d-chart .hit:focus-visible{ outline:2px solid var(--d-ring); outline-offset:1px }
.d-chart .hit[aria-pressed="true"] .br{ fill:var(--d-warn) }

/* ---- steps ------------------------------------------------------------- */
.d-steps{ display:flex; gap:var(--d-g); list-style:none; margin:0; padding:0 }
.d-steps li{
  flex:1; min-width:0; padding:4px 8px; background:transparent;
  box-shadow:inset 0 0 0 1px var(--d-lit); color:var(--d-dim);
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.d-steps li:first-child{ border-radius:13px 0 0 13px; padding-left:13px }
.d-steps li:last-child{ border-radius:0 13px 13px 0; padding-right:13px }
.d-steps li[aria-current="step"]{ background:var(--d-key); color:var(--d-on); box-shadow:none }
.d-steps li.done{ background:var(--d-hi); color:var(--d-ink) }

/* ---- option lists (typeahead, search, saved views) ---------------------- */
.d-listw{ position:relative }
.d-list{ list-style:none; margin:0; padding:0; background:var(--d-well);
         border:1px solid var(--d-hair); max-height:11rem; overflow-y:auto }
.d-list[hidden]{ display:none }
.d-listw .d-list{ position:absolute; left:0; right:0; top:100%; z-index:5;
                  border-top:0; border-color:var(--d-key); border-width:2px }
.d-opt{ display:flex; align-items:baseline; gap:8px; padding:6px 10px;
        border-left:3px solid transparent; cursor:pointer; font-size:.8125rem }
.d-opt small{ color:var(--d-dim); font-size:.75rem }
/* focus is a full inversion, not a 20% tint (the kit's measures 1.44:1) */
.d-opt.is-cur{ background:var(--d-key); color:var(--d-on); border-left-color:var(--d-on) }
.d-opt.is-cur small{ color:var(--d-on) }
.d-opt[aria-selected="true"]{ border-left-color:var(--d-key); font-weight:600 }
.d-opt mark{ background:transparent; color:var(--d-warn); font-weight:700 }
.d-opt.is-cur mark{ color:var(--d-on); text-decoration:underline }
.d-empty{ padding:10px; font-size:.8125rem; color:var(--d-dim) }

/* ---- key/value ledger -------------------------------------------------- */
.d-kv{ margin:0; font-size:.8125rem; display:grid; grid-template-columns:auto 1fr; gap:2px 10px }
.d-kv dt{ color:var(--d-dim); white-space:nowrap }
.d-kv dd{ margin:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }

/* ---- panels ------------------------------------------------------------ */
.d-panel{ background:var(--d-well); border:1px solid var(--d-hair); padding:10px }
.d-panel[hidden]{ display:none }
.d-rail{ border-left:3px solid var(--d-key); padding-left:10px }
.d-rail.is-bad{ border-left-color:var(--d-bad) }
.d-rail.is-warn{ border-left-color:var(--d-warn) }

/* ---- signature pad ----------------------------------------------------- */
.d-pad{ display:block; width:100%; height:110px; background:var(--d-well);
        border:1px solid var(--d-hair); border-bottom:3px solid var(--d-key);
        touch-action:none; cursor:crosshair }

/* ---- the no-JS preview well ------------------------------------------- */
.d-plain{ border:1px dashed var(--d-lit); padding:10px }
.d-plain h4{ margin:0 0 2px; font-size:.9375rem; font-weight:800 }
.d-plain p{ margin:0 0 6px; font-size:.8125rem; color:var(--d-dim) }

/* ---- narrow ------------------------------------------------------------ */
@media (max-width:26rem){
  /* Last resort only: a label that genuinely cannot fit 360px wraps rather than
     pushing the page sideways. The cap stops being a true semicircle when it
     does, which is a smaller sin than a horizontally scrolling page — and the
     labels are written short enough that it should never fire. */
  .d-btn{ white-space:normal; height:auto; min-height:var(--h); padding-block:6px; text-align:center }
  .d-grid{ grid-template-columns:1fr }
  .d-steps{ flex-wrap:wrap }
  .d-steps li{ flex:1 1 45% }
  .d-steps li:first-child, .d-steps li:last-child{ border-radius:0; padding-inline:8px }
  .d-ro .rv{ font-size:1.35rem }
}

/* ==========================================================================
   REDUCED MOTION — each guard leaves the CORRECT STATIC END STATE.
   Not animation-play-state (LCARS-3 leaves the marquee off-screen) and not a
   rule an inline attribute can defeat (LCARS-4 leaves the charts blank).
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .d *, .d *::before, .d *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .d-chart .ln, .d-chart.go .ln{
    animation:none !important; stroke-dasharray:none; stroke-dashoffset:0;   /* FULLY DRAWN */
  }
  .d-chart.go .br{ animation:none !important; transform:none }               /* FULL HEIGHT */
}