/* ============================================================================
   kit-compat.css — old scend.css token names, mapped onto the CS kit
   ============================================================================
   Load AFTER scend-client.css + cs.css, on any page migrated to the CS kit.

   WHY THIS EXISTS
   The office portal's 58 pages were written against scend.css's token names
   (--border, --red, --green, --amber, --text, --card, the --dp-* family...).
   The CS kit uses a different vocabulary (--line, --crit, --good, --warn, --ink,
   --canvas). Swapping the stylesheets therefore leaves 2,118 var() references
   across 46 token names resolving to NOTHING.

   That failure mode is nasty because it is SILENT and partial: an unresolved
   custom property makes the whole declaration invalid, so `border-bottom:1px
   solid var(--border)` doesn't fall back to a default border — the border simply
   disappears, and a tag's background colour vanishes while its text stays. The
   page keeps its layout and loses its definition, which is exactly what "looks
   terribly poor and all over the place" looks like. I shipped your-day.html in
   that state because I checked CLASS coverage and never checked TOKEN coverage.

   So: one shim, every page migrates cleanly, and no page's own CSS needs editing.

   These are aliases, not new colours — each maps to a kit token, so all of them
   inherit the kit's dark-mode overrides automatically. Nothing here should ever
   contain a literal colour except where the kit genuinely has no equivalent
   (--purple), and those carry a dark-mode value of their own below.
   ============================================================================ */

:root{
  /* ── structure ─────────────────────────────────────────────────────────── */
  --border:var(--line);
  --border-strong:var(--line);
  --border-soft:var(--line-2);
  --card:var(--canvas);
  --surface:var(--canvas);
  --surface2:var(--bg);
  --elev:var(--line-2);            /* hover/raised background */
  --shadow-card:var(--card-shadow);
  --shadow:var(--card-shadow);
  --font:var(--ff);

  /* ── text ──────────────────────────────────────────────────────────────── */
  --text:var(--ink);
  --text-soft:var(--ink-2);
  --muted-soft:var(--faint);
  --muted-light:var(--faint);

  /* ── semantic colour: office names -> kit names ────────────────────────── */
  --red:var(--crit);          --red-soft:var(--crit-soft);   --red-bg:var(--crit-soft);
  --green:var(--good);        --green-soft:var(--good-soft); --green-bg:var(--good-soft);
  --amber:var(--warn);        --amber-soft:var(--warn-soft); --amber-bg:var(--warn-soft);
  --blue:var(--accent);       --blue-bg:var(--accent-soft);
  --accent2:var(--accent-ink);
  --accent-bright:var(--accent);

  /* The kit has no purple. Kept as a literal, tuned to sit with teal #00B5B6
     rather than the old blue-era violet. Dark variant below. */
  --purple:#7C5CD6;           --purple-bg:#EFEAFB;

  /* ── the --dp-* family (dashboard/your-day surfaces, ~290 refs) ─────────── */
  --dp-page:var(--bg);
  --dp-body:var(--bg);
  --dp-card:var(--canvas);
  --dp-ink:var(--ink);
  --dp-muted:var(--muted);
  --dp-line:var(--line);
  --dp-line2:var(--line-2);
  --dp-pill:var(--line-2);
  --dp-accent:var(--accent);
  --dp-accent-soft:var(--accent-soft);
  --dp-accent-line:var(--line);
  --dp-crit:var(--crit);      --dp-crit-soft:var(--crit-soft);
  --dp-warn:var(--warn);      --dp-warn-soft:var(--warn-soft);
  --dp-ok:var(--good);        --dp-ok-soft:var(--good-soft);
}

/* Only the literals need a dark override — every alias above follows its kit
   token automatically. Matches the kit's own dark selector so the two agree. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --purple:#A78BFA; --purple-bg:#2A2140;
  }
}
:root[data-theme="dark"]{
  --purple:#A78BFA; --purple-bg:#2A2140;
}

/* ============================================================================
   CLASS carry-over
   ============================================================================
   The kit does not define these 20 classes, but 27 office pages use .spin, 13 use
   .green, 10 use the .preset pill row, and so on. Same silent-failure risk as the
   tokens: a loading spinner with no border renders as nothing, and a page looks
   hung rather than styled.

   Carried across from scend.css essentially verbatim — they resolve correctly here
   because the aliases above give them the old token names. Two deliberate edits:
   radii use the kit's --r/--r-sm scale instead of hardcoded 14px, and .btn.ghost /
   .preset take the kit's --canvas rather than a literal #fff so dark mode works.
   ============================================================================ */

@keyframes scend-spin{to{transform:rotate(360deg)}}
.spin{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:scend-spin .7s linear infinite;margin:40px auto}

/* KPI value tints.
   Kyle 26/08: "the colours aren't even the same". He is right, and the cause was a
   green (--good #12925A) success value sitting inches from a teal (--accent #00B5B6)
   chart — two colours close enough to look like a mistake rather than a distinction.
   Fixed by making colour mean EXCEPTION, not decoration: a good number is just ink, so
   the only coloured figures on a page are the ones that want acting on. That also stops
   a dashboard where nothing is wrong from looking like a Christmas tree.
   .green is kept as a selector rather than deleted — 13 pages still apply it, and it
   should quietly become a no-op, not an unstyled orphan. */
.kpi.green  .kpi-val{color:var(--ink)}
/* Bare .g is the TABLE-CELL version of the same idea and I missed it when I moved the
   tiles to ink — so KPI tiles were ink while table percentages stayed green, which is the
   inconsistency Kyle kept seeing. .a and .r stay tinted: they are the exceptions. */
.g{color:var(--ink)}
.kpi.red    .kpi-val{color:var(--crit)}
.kpi.amber  .kpi-val{color:var(--warn)}
.kpi.purple .kpi-val{color:var(--purple)}
.dt-val.g{color:var(--ink)}

/* Buttons the kit lacks */
.btn.secondary,.btn.ghost{background:var(--canvas);color:var(--accent);border:1px solid var(--line)}
.btn.secondary:hover,.btn.ghost:hover{border-color:var(--accent)}
.btn.amber{background:var(--warn);color:var(--canvas)}
.btn.green{background:var(--good);color:var(--canvas)}

/* Date/range preset pills — 10 pages */
.presets{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 14px}
.preset{background:var(--canvas);border:1px solid var(--line);color:var(--muted);font-size:12.5px;
  font-weight:600;padding:6px 13px;border-radius:999px;cursor:pointer;user-select:none;font-family:inherit}
.preset:hover{border-color:var(--accent);color:var(--accent)}
.preset.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}

label.fld{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  color:var(--muted);margin-bottom:5px}

.bar{height:7px;border-radius:4px;background:var(--line);overflow:hidden;min-width:80px}
.bar>span{display:block;height:100%;background:var(--good)}

/* Dashboard tiles (index.html) */
.dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.dash-tile{display:block;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--card-shadow);padding:18px 20px;text-decoration:none;color:inherit;
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.dash-tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.dash-tile.pos{position:relative}
.dash-tile .dt-head{display:flex;align-items:center;gap:9px;color:var(--muted)}
.dash-tile .dt-ico{width:34px;height:34px;border-radius:var(--r-sm);background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dash-tile .dt-ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.dash-tile .dt-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.dash-tile .dt-val{font-size:32px;font-weight:700;line-height:1.05;margin:14px 0 3px}
.dash-tile .dt-sub{font-size:12.5px;color:var(--muted)}
.dash-tile .dt-arrow{position:absolute;top:18px;right:18px;color:var(--faint)}
.dt-val.a{color:var(--warn)} .dt-val.r{color:var(--crit)}   /* .g -> ink, set above */

.controls{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0}

/* ============================================================================
   ELEMENT-LEVEL carry-over — tables, textareas
   ============================================================================
   Kyle 26/08: "you've made every page look awful", "nothing fits",
   "not one page looks nice". All one cause, and it was my omission.

   The CS kit styles CLASSES but barely touches raw ELEMENTS — its only table rule is
   `table{color:var(--muted)}`. scend.css carried `table{width:100%;border-collapse:collapse}`
   and `tbody td{padding:9px 12px;...}`. Moving 55 pages onto the kit therefore dropped every
   data table to BROWSER DEFAULTS: auto width instead of 100% (so a table shrank to its content
   and left a huge void to its right), no border-collapse (doubled borders and extra spacing),
   no cell padding, and browser-default centred headers. On a page like sla.html or the PO
   overview — dense tables in wide cards — that reads as a broken layout, which is exactly
   what it looked like.

   I missed it because I audited CLASS coverage and TOKEN coverage and never audited ELEMENT
   selectors. Three passes over the same migration, three different kinds of gap: tokens,
   then classes, then elements. The lesson is that "what did the old stylesheet provide that
   the new one does not" has to be asked about every selector KIND, not just the obvious one.
   ============================================================================ */

table{width:100%;border-collapse:collapse;font-size:13px;color:var(--ink)}
/* Data-table headers left-align. Browser default is centre, which is right for a spreadsheet
   and wrong for a list of orders — the eye scans a left edge. Numeric columns are aligned by
   the pages themselves where they need it. */
thead th{text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line);
  white-space:nowrap}
tbody td{padding:9px 12px;border-top:1px solid var(--line);white-space:nowrap}
tbody tr:hover{background:var(--accent-soft)}

textarea{background:var(--canvas);border:1px solid var(--line);color:var(--ink);
  font-family:inherit;font-size:13px;padding:8px 10px;border-radius:var(--r-sm);width:100%}
textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ============================================================================
   .panel — PADDING AND HEADINGS. This is the big one.
   ============================================================================
   Kyle 26/08, repeatedly: "nothing fits", "you've made every page look awful",
   "not one page looks nice", "honestly how". This is the answer, and it is one rule.

   scend.css:  .card,.panel{ ... padding:18px 20px; margin-bottom:16px }
   cs.css:     .panel   { ... overflow:hidden }        <- NO PADDING AT ALL

   The CS kit's .panel is a STRUCTURED component: it expects a `.panel-head` child that
   carries its own padding, so the panel itself has none. Every office page instead puts
   content directly inside .panel and relied on the panel's own padding. So after the
   migration, on all 55 pages, card content sat FLUSH AGAINST THE BORDER — measured 26
   elements at a 1px gap on the dashboard alone. And because the kit also sets
   overflow:hidden, anything that did spill got CLIPPED rather than overflowing, which is
   why text looked cut off while a scrollWidth-vs-clientWidth check said nothing overflowed.
   I ran that check and wrongly concluded the page was fine.

   Headings were the second half: scend.css styled `.panel h3` (12px, uppercase, muted);
   the kit styles `.panel-head` instead, so an office `<h3>` fell back to the browser
   default — ~1.17em bold black. Oversized titles above cramped, unpadded content is
   precisely the "cheap" look.

   `:has()` keeps both worlds working: a panel using the kit's own .panel-head keeps
   padding:0 so its head/body padding is not doubled.
   ============================================================================ */

.card,.panel{padding:18px 20px;margin-bottom:16px}
/* kit-structured panels padd their own head/body — don't double it */
.panel:has(> .panel-head){padding:0}

.panel > h2,.panel > h3,.card > h2,.card > h3{
  font-size:14px;font-weight:600;color:var(--ink);
  margin:0 0 13px;line-height:1.3;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel > h3 .h3-link,.card > h3 .h3-link{font-size:12.5px;font-weight:600;color:var(--accent);
  text-decoration:none;white-space:nowrap}