/* ============================================================================
   Broadsheet -- framework-free primitives (@bim-pdf/ui-kit base.css)
   ----------------------------------------------------------------------------
   Ported from dash.bimisland.com's styles.css. Needs tokens.css loaded first.

   Rules of the kit (0.3.0 "essentialist"; 0.3.1 neutral light paper):
   - seven inks per theme (paper, tint, rule, grey, ink, alert, spot); neutral greys in both themes;
   - state by fill, edge and a label, never by hue and never by WEIGHT: a selected / current / pressed
     thing keeps its weight and takes the ink fill or a 2px ink edge (--bk-rule-medium);
   - one weight per edge: two rules never stack on one side of a box;
   - one newspaper red (--bk-alert), only redundant with a word (URGENT / DOWN / DELETE);
   - one per-property spot colour (--bk-spot), for the logo and markup ink only;
   - square (radius 0), hairline rules instead of boxes, no shadows;
   - serif headlines, mono tabular figures, sans chrome.

   Scoping: every class is prefixed bk-. Element defaults (body type, headings, links,
   code) apply ONLY inside an opt-in root -- `.bk-page` or `[data-bk]` -- so loading
   this file never restyles a host app (pdfmarkuptool loads it in Storybook only).

   Units: rem for type sizes, leading and text-adjacent spacing (--bk-space-*, --bk-type-*); px for rules,
   borders, the focus ring and the 44px touch floor (--bk-rule*, --bk-focus-ring, --bk-touch-min).

   Density: the default is "ledger" (0.8125rem = 13px base, dense rows). Put
   data-bk-density="reading" on the root (or any section) for marketing / docs pages:
   1.0625rem (17px) serif body, larger headlines, a 68ch measure. Control sizes do not change.

   Colours are read straight from the --bk-* colour tokens (the kit has no composite tokens: a
   var() inside a :root token resolves on :root), so a subtree that re-declares the colour
   tokens -- a theme preview panel, a dark band on a light page -- gets its own rules.

   Touch: control heights come from --bk-control-{sm,md,lg}: 24/28/34px on a fine
   pointer, 44/44/48px under (any-pointer: coarse) (tokens.css), and the same media query here floors
   the width of buttons, controls and nav tabs at --bk-touch-min: touch targets are >= 44px in both dimensions.
   Side padding is --bk-space-2 (8px = 0.5rem) on a control / button, --bk-space-1 (4px) on --sm and
   --bk-space-3 (12px) on --lg; it does not grow under touch (the height does).
   Hover styles sit inside @media (hover: hover), so a tap never leaves a sticky hover look.
   ============================================================================ */

/* ---------------------------------------------------------------- page root */
.bk-page,
[data-bk] {
  /* density aliases: what body / h1 / h2 / h3 read. Ledger by default. */
  --bk-body: var(--bk-type-body-md);
  --bk-h1: var(--bk-type-headline-lg);
  --bk-h2: var(--bk-type-headline-md);
  --bk-h3: var(--bk-type-headline-sm);
  --bk-h1-tracking: var(--bk-type-headline-lg-tracking);

  box-sizing: border-box;
  color-scheme: light dark;
  background: var(--bk-background);
  color: var(--bk-text);
  font: var(--bk-body);
  -webkit-font-smoothing: antialiased;
}
.bk-page {
  max-width: var(--bk-page-max);
  margin: 0 auto;
  padding: 0 var(--bk-space-4) var(--bk-space-6);
}
:root[data-theme="light"] :is(.bk-page, [data-bk]) { color-scheme: light; }
:root[data-theme="dark"] :is(.bk-page, [data-bk]) { color-scheme: dark; }

:is(.bk-page, [data-bk]) *,
:is(.bk-page, [data-bk]) *::before,
:is(.bk-page, [data-bk]) *::after { box-sizing: inherit; }

[data-bk-density="reading"] {
  --bk-body: var(--bk-type-reading-body);
  --bk-h1: var(--bk-type-reading-display);
  --bk-h2: var(--bk-type-reading-headline);
  --bk-h3: var(--bk-type-reading-subhead);
  --bk-h1-tracking: var(--bk-type-reading-display-tracking);
  font: var(--bk-body);
}

:is(.bk-page, [data-bk]) :is(h1, h2, h3, h4) { margin: 0 0 var(--bk-space-3); color: var(--bk-text); }
:is(.bk-page, [data-bk]) h1 { font: var(--bk-h1); letter-spacing: var(--bk-h1-tracking); }
:is(.bk-page, [data-bk]) h2 { font: var(--bk-h2); }
:is(.bk-page, [data-bk]) h3 { font: var(--bk-h3); }
:is(.bk-page, [data-bk]) h4 {
  font: var(--bk-type-label-sm); letter-spacing: var(--bk-type-label-sm-tracking);
  text-transform: uppercase; color: var(--bk-muted);
}
:is(.bk-page, [data-bk]) p { margin: 0 0 var(--bk-space-3); }
[data-bk-density="reading"] p,
[data-bk-density="reading"] li { max-width: var(--bk-measure); }
/* plain links only: a classed link (.bk-button) or a nav tab styles itself. :where() keeps the
   :not([class]) filter out of the specificity (0,1,1), so `.bk-nav a` (0,1,1, later in this file)
   still sets a classless nav tab's colour. */
:is(.bk-page, [data-bk]) a:where(:not([class])) { color: var(--bk-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: var(--bk-rule); }
@media (hover: hover) {
  :is(.bk-page, [data-bk]) a:where(:not([class])):hover { text-decoration-thickness: var(--bk-rule-medium); }
}
:is(.bk-page, [data-bk]) :is(code, kbd, samp) { font-family: var(--bk-font-mono); font-size: .92em; }
:is(.bk-page, [data-bk]) :not(pre) > code { padding: 0 var(--bk-space-0); background: var(--bk-panel); border: var(--bk-rule) solid var(--bk-line); }

/* ------------------------------------------------------------- focus ring */
/* One ring for everything focusable: 2px of --bk-focus (ink: >= 3:1 on every surface, both themes). */
:is(.bk-page, [data-bk]) :focus-visible,
.bk-control:focus-visible,
.bk-button:focus-visible {
  outline: var(--bk-focus-ring) solid var(--bk-focus);
  outline-offset: 2px;
}

/* ----------------------------------------------------------- ledger data */
/* The single source for tabular figures. */
.bk-num, .bk-mono, .bk-ledger td, .bk-tile-value, .bk-chip, .bk-dateline .bk-mono {
  font-family: var(--bk-font-mono);
  font-variant-numeric: tabular-nums;
}
.bk-num { text-align: right; }
.bk-muted { color: var(--bk-muted); }
.bk-faint { color: var(--bk-faint); }
.bk-label {
  font: var(--bk-type-label-sm); letter-spacing: var(--bk-type-label-sm-tracking);
  text-transform: uppercase; color: var(--bk-muted);
}

/* --------------------------------------------------------------- rules */
.bk-rule { height: 0; margin: var(--bk-space-4) 0; border: 0; border-top: var(--bk-rule) solid var(--bk-line); }
.bk-rule--strong { border-top: var(--bk-rule) solid var(--bk-border); }
.bk-rule--ink { border-top: var(--bk-rule-heavy) solid var(--bk-text); }

/* ------------------------------------------------------------- masthead */
.bk-masthead { margin: 0 0 var(--bk-space-4); }
.bk-nameplate {
  display: flex; align-items: center; gap: var(--bk-space-2);
  padding: var(--bk-space-3) 0 var(--bk-space-2);
  border-top: var(--bk-rule-heavy) solid var(--bk-text);
}
/* the logo is the property's spot colour -- the only hue in the masthead */
.bk-logo { color: var(--bk-spot); font: var(--bk-type-headline-lg); line-height: 1; }
.bk-logo svg { display: block; fill: currentColor; }
.bk-wordmark {
  flex: 1; margin: 0;
  font: var(--bk-type-masthead); letter-spacing: var(--bk-type-masthead-tracking);
  color: var(--bk-text);
}
/* An h1 wordmark: beat the root's heading defaults (:is(.bk-page, [data-bk]) h1 is 0,1,1) under BOTH roots. */
:is(.bk-page, [data-bk]) .bk-wordmark {
  margin: 0;
  font: var(--bk-type-masthead); letter-spacing: var(--bk-type-masthead-tracking);
  color: var(--bk-text);
}
.bk-dateline {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--bk-space-3);
  padding: var(--bk-space-1) 0;
  border-top: var(--bk-rule) solid var(--bk-line); border-bottom: var(--bk-rule) solid var(--bk-text);
  font: var(--bk-type-label-sm); letter-spacing: var(--bk-type-label-sm-tracking);
  text-transform: uppercase; color: var(--bk-muted);
}
.bk-dateline .bk-mono { text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------------ nav */
.bk-nav { display: flex; flex-wrap: wrap; gap: var(--bk-space-4); margin-bottom: var(--bk-space-4); border-bottom: var(--bk-rule) solid var(--bk-line); }
.bk-nav[role="tablist"] { flex-wrap: nowrap; margin-bottom: 0; }
/* Tabs: links, or buttons in a tablist. Sentence case at the label's one weight; the current tab's 2px ink
   underline sits over the nav hairline (margin: -1 rule), so that stretch of the edge carries one weight. */
.bk-nav a,
.bk-nav button[role="tab"] {
  display: inline-flex; align-items: center; min-height: var(--bk-control-md);
  padding: var(--bk-space-2) 0; margin: 0 0 calc(-1 * var(--bk-rule));
  color: var(--bk-muted); text-decoration: none; text-transform: none;
  font: var(--bk-type-label-md); letter-spacing: var(--bk-type-label-md-tracking);
  background: none; border: 0; border-radius: var(--bk-radius-none);
  border-bottom: var(--bk-rule-medium) solid transparent;
}
.bk-nav button[role="tab"] { cursor: pointer; }
.bk-nav a, :is(.bk-page, [data-bk]) .bk-nav a { text-decoration: none; }
@media (hover: hover) {
  .bk-nav a:hover,
  .bk-nav button[role="tab"]:hover { color: var(--bk-text); }
}
.bk-nav a.is-on,
.bk-nav a[aria-current="page"],
.bk-nav button[role="tab"][aria-selected="true"] { color: var(--bk-text); border-bottom-color: var(--bk-primary); }

/* -------------------------------------------------------------- controls */
/* Every clickable control shares one base. */
.bk-control,
.bk-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bk-space-1);
  min-height: var(--bk-control-md); margin: 0;
  padding: 0 var(--bk-space-2);
  font: var(--bk-type-label-md); letter-spacing: 0; text-transform: none;
  color: var(--bk-text); background: var(--bk-panel);
  border: var(--bk-rule) solid var(--bk-border); border-radius: var(--bk-radius-none);
  box-shadow: none; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.bk-control { justify-content: flex-start; cursor: auto; font-weight: 400; font-family: var(--bk-font-sans); }
select.bk-control, input[type="date"].bk-control { cursor: pointer; }
input.bk-control::placeholder { color: var(--bk-faint); }
/* Hover: the tint on paper; a control already sits on the tint, so its edge turns ink instead. */
@media (hover: hover) {
  .bk-control:hover,
  .bk-button:hover { border-color: var(--bk-focus); background: var(--bk-hover); color: var(--bk-text); }
}
.bk-button--sm { min-height: var(--bk-control-sm); padding: 0 var(--bk-space-1); }
.bk-button--lg { min-height: var(--bk-control-lg); padding: 0 var(--bk-space-3); }
/* a toggle that is on / the selected preset inverts to ink. The fill carries the state: the weight stays the
   label's 600, like every other button. */
.bk-button.is-on,
.bk-button[aria-pressed="true"],
.bk-button--primary {
  background: var(--bk-primary); color: var(--bk-on-primary); border-color: var(--bk-primary);
}
@media (hover: hover) {
  .bk-button.is-on:hover,
  .bk-button[aria-pressed="true"]:hover,
  .bk-button--primary:hover { background: var(--bk-muted); border-color: var(--bk-muted); color: var(--bk-on-primary); }
}
/* destructive: the red fill, and the label already says what it does */
.bk-button--alert { background: var(--bk-alert); color: var(--bk-on-alert); border-color: var(--bk-alert); }
@media (hover: hover) {
  .bk-button--alert:hover { background: var(--bk-text); border-color: var(--bk-text); color: var(--bk-background); }
}
.bk-button--ghost { background: transparent; border-color: transparent; color: var(--bk-muted); }
@media (hover: hover) {
  .bk-button--ghost:hover { background: var(--bk-hover); border-color: transparent; color: var(--bk-text); }
}
/* editorial preset pills: small caps */
.bk-button--preset {
  font: var(--bk-type-label-sm); letter-spacing: var(--bk-type-label-sm-tracking); text-transform: uppercase;
}
.bk-button:disabled,
.bk-button[aria-disabled="true"],
.bk-control:disabled { opacity: var(--bk-disabled-opacity); cursor: not-allowed; }

/* Touch WIDTH: tokens.css grows the control heights under a coarse pointer; this floors the width, so a short
   label ("Day", "7d", a glyph-only ghost button) is still a 44 x 44px target. Every tap target of the kit: buttons
   (all variants), controls and nav tabs. Chips are status labels, not tap targets. */
@media (any-pointer: coarse) {
  .bk-button,
  .bk-control,
  .bk-nav a,
  .bk-nav button[role="tab"] { min-width: var(--bk-touch-min); }
}

/* A field: the eyebrow label (its first span or label child) over the control. <label class="bk-field"><span>
   or <div class="bk-field"><label for>. */
.bk-field { display: inline-flex; flex-direction: column; gap: var(--bk-space-1); }
.bk-field > span:first-child,
.bk-field > label:first-child {
  font: var(--bk-type-label-sm); letter-spacing: var(--bk-type-label-sm-tracking);
  text-transform: uppercase; color: var(--bk-muted);
}

/* a toolbar / range bar row */
.bk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bk-space-1); margin-bottom: var(--bk-space-4); }
.bk-toolbar .bk-label { margin-right: var(--bk-space-1); }

/* ------------------------------------------------------- chips / status */
/* Status by lightness, EDGE and word (one weight: mono 400): ok = ink text + ink edge; warn and bad share the
   grey and differ by the edge -- dashed grey (warn), rule hairline (bad) -- and the word. --on fills ink, --alert
   fills red. */
.bk-chip {
  display: inline-block; vertical-align: middle;
  padding: 0 var(--bk-space-1);
  font: var(--bk-type-data-sm); letter-spacing: 0;
  color: var(--bk-text); background: var(--bk-background);
  border: var(--bk-rule) solid var(--bk-border); border-radius: var(--bk-radius-none);
  white-space: nowrap;
}
.bk-chip--ok { color: var(--bk-ok); border-color: var(--bk-ok); }
.bk-chip--warn { color: var(--bk-warn); border-color: var(--bk-warn); border-style: dashed; }
.bk-chip--bad { color: var(--bk-bad); border-color: var(--bk-line); }
.bk-chip--on { color: var(--bk-on-primary); background: var(--bk-primary); border-color: var(--bk-primary); }
.bk-chip--alert { color: var(--bk-on-alert); background: var(--bk-alert); border-color: var(--bk-alert); }

/* ------------------------------------------------------- section / card */
/* Sections are borderless editorial regions; the head carries a hairline rule. */
.bk-section { margin-bottom: var(--bk-space-5); }
.bk-section > h2,
.bk-section-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--bk-space-2);
  margin: 0 0 var(--bk-space-3); padding-bottom: var(--bk-space-2);
  border-bottom: var(--bk-rule) solid var(--bk-line);
  font: var(--bk-h2); color: var(--bk-text);
}
.bk-section-head .bk-label, .bk-section > h2 .bk-label { font-family: var(--bk-font-sans); }

/* two-column broadsheet grid with a vertical column rule */
.bk-columns { display: grid; grid-template-columns: 2fr 1fr; gap: 0 var(--bk-space-5); margin-bottom: var(--bk-space-5); }
.bk-columns > * + * { border-left: var(--bk-rule) solid var(--bk-line); padding-left: var(--bk-space-5); }
@media (max-width: 760px) {
  .bk-columns { grid-template-columns: 1fr; gap: var(--bk-space-5) 0; }
  .bk-columns > * + * { border-left: 0; padding-left: 0; border-top: var(--bk-rule) solid var(--bk-line); padding-top: var(--bk-space-4); }
}

/* ---------------------------------------------------------------- well */
.bk-well { padding: var(--bk-space-3); background: var(--bk-background); border: var(--bk-rule) solid var(--bk-line); border-radius: var(--bk-radius-none); }
.bk-panel { padding: var(--bk-space-3); background: var(--bk-panel); border: var(--bk-rule) solid var(--bk-line); }
pre.bk-code, .bk-code {
  margin: 0 0 var(--bk-space-3); padding: var(--bk-space-3);
  overflow-x: auto;
  font: var(--bk-type-code); color: var(--bk-text);
  background: var(--bk-panel); border: var(--bk-rule) solid var(--bk-line); border-left: var(--bk-rule-heavy) solid var(--bk-text);
}
.bk-code .bk-prompt { color: var(--bk-faint); user-select: none; }
.bk-code .bk-comment { color: var(--bk-muted); font-style: italic; }

/* -------------------------------------------------------- alert banner */
/* A notice is ONE mark: its 3px left rule. No box, no tint (a box + a rule + a tint said the same thing thrice). */
.bk-banner {
  display: flex; align-items: baseline; gap: var(--bk-space-2);
  padding: var(--bk-space-2) var(--bk-space-3); margin-bottom: var(--bk-space-4);
  border-left: var(--bk-rule-heavy) solid var(--bk-text);
}
.bk-banner > strong:first-child {
  font: var(--bk-type-label-sm); letter-spacing: var(--bk-type-label-sm-tracking); text-transform: uppercase;
}
.bk-banner--alert { border-left-color: var(--bk-alert); }
.bk-banner--alert > strong:first-child { color: var(--bk-alert); text-decoration: underline; text-decoration-thickness: var(--bk-rule-medium); }

/* --------------------------------------------------------- ledger table */
.bk-table-wrap { overflow-x: auto; }
.bk-ledger { width: 100%; border-collapse: collapse; }
.bk-ledger th,
.bk-ledger td {
  padding: var(--bk-space-1) var(--bk-space-3);
  text-align: left; white-space: nowrap;
  border: 0; border-bottom: var(--bk-rule) solid var(--bk-line);
  background: transparent; color: var(--bk-text);
}
.bk-ledger td { font-size: var(--bk-type-data-sm-size); line-height: 1.5; }
.bk-ledger th {
  font: var(--bk-type-label-sm); letter-spacing: var(--bk-type-label-sm-tracking);
  text-transform: uppercase; color: var(--bk-muted);
  border-bottom: var(--bk-rule) solid var(--bk-text);
}
.bk-ledger .bk-num { text-align: right; }
.bk-ledger td.bk-wrap { white-space: normal; font-family: var(--bk-font-sans); }
@media (hover: hover) {
  .bk-ledger tbody tr:hover { background: var(--bk-hover); }
}
/* a selected row: a 2px ink edge on its leading side, never bold */
.bk-ledger tbody tr:is(.is-on, [aria-selected="true"]) > :first-child { box-shadow: inset var(--bk-rule-medium) 0 0 var(--bk-text); }
.bk-ledger caption { caption-side: top; text-align: left; padding-bottom: var(--bk-space-2); }

/* ---------------------------------------------------------- stat tiles */
/* A KPI board drawn as one ruled grid (a stock table), not gapped boxes. */
.bk-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0; margin-bottom: var(--bk-space-4);
  border-top: var(--bk-rule) solid var(--bk-line); border-left: var(--bk-rule) solid var(--bk-line);
}
.bk-tile { display: flex; flex-direction: column; padding: var(--bk-space-3); border-right: var(--bk-rule) solid var(--bk-line); border-bottom: var(--bk-rule) solid var(--bk-line); }
.bk-tile-label { font: var(--bk-type-label-sm); letter-spacing: var(--bk-type-label-sm-tracking); text-transform: uppercase; color: var(--bk-muted); }
.bk-tile-value { margin-top: var(--bk-space-1); font: var(--bk-type-data-display); color: var(--bk-text); }
.bk-tile-sub { margin-top: auto; padding-top: var(--bk-space-1); font-size: var(--bk-type-label-sm-size); color: var(--bk-muted); }
.bk-tile--hero { box-shadow: inset 0 var(--bk-rule-heavy) 0 var(--bk-text); }

/* ---------------------------------------------------------- andon board */
.bk-andon {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--bk-space-4);
  padding: var(--bk-space-3) var(--bk-space-4); margin-bottom: var(--bk-space-4);
  background: var(--bk-panel); border: var(--bk-rule) solid var(--bk-border);
}
.bk-lamp { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--bk-muted); box-shadow: 0 0 0 var(--bk-rule) var(--bk-line); }
.bk-andon-status { font: var(--bk-type-headline-lg); }
.bk-andon-sub { margin-top: var(--bk-space-0); font-size: var(--bk-type-body-sm-size); color: var(--bk-muted); }
.bk-andon-wip { text-align: center; padding: 0 var(--bk-space-3); border-left: var(--bk-rule) solid var(--bk-line); }
.bk-andon-wip .bk-tile-value { margin: 0; }
.bk-andon--up { border-color: var(--bk-focus); }
.bk-andon--up .bk-lamp { background: var(--bk-ok); animation: bk-pulse 2s ease-in-out infinite; }
.bk-andon--idle { border-color: var(--bk-line); }
.bk-andon--idle .bk-lamp { background: var(--bk-warn); }
.bk-andon--idle .bk-andon-status { color: var(--bk-warn); }
.bk-andon--down { border-color: var(--bk-alert); box-shadow: inset 0 0 0 var(--bk-rule) var(--bk-alert); }
.bk-andon--down .bk-lamp { background: var(--bk-alert); box-shadow: 0 0 0 var(--bk-rule-heavy) var(--bk-text); }
.bk-andon--down .bk-andon-status { color: var(--bk-alert); text-decoration: underline; text-decoration-thickness: var(--bk-rule-medium); }
@keyframes bk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .bk-andon--up .bk-lamp { animation: none; } }

/* --------------------------------------------------------------- hero */
/* Marketing / reading pages: a serif hero between ink rules. */
.bk-hero { padding: var(--bk-space-6) 0 var(--bk-space-5); border-bottom: var(--bk-rule) solid var(--bk-line); margin-bottom: var(--bk-space-5); }
.bk-hero .bk-kicker { margin-bottom: var(--bk-space-3); }
.bk-lead { font: var(--bk-type-reading-lead); color: var(--bk-muted); max-width: var(--bk-measure); }
.bk-actions { display: flex; flex-wrap: wrap; gap: var(--bk-space-2); margin-top: var(--bk-space-4); }

/* ------------------------------------------------------------- footer */
.bk-footer {
  margin-top: var(--bk-space-5); padding-top: var(--bk-space-3);
  border-top: var(--bk-rule) solid var(--bk-line);
  font-size: var(--bk-type-body-sm-size); color: var(--bk-muted); text-align: center;
}