/* GENERATED from lib/machine-card/machine-card.css — edit THERE, then run: node lib/machine-card/build-machine-card.mjs */
/* lib/machine-card/machine-card.css — the shared machine card (renderMachineCard / createMachineCard).
   Clean Steel (docs/DESIGN.md): a calm panel with dense ruled rows inside, the safety state as a SQUARED physical
   tag, status chips squared, monospace for times / counts / ids, stencil caps only in the drawer's title bar.
   EVERY class is prefixed ksgmc: steel.css restyles bare .tag / .foot / .btn / .row / .overlay, so none is used.
   THEME: the portal's own tokens (--panel, --ink, --line, --red, ...) with literal Clean Steel LIGHT fallbacks, so
   the card follows the portal's data-theme toggle in both modes and still reads on a portal with no tokens. The
   tokens a portal may NOT define get a per-theme fallback below (the --ksgmc-* block).
   Edit HERE, then run: node lib/machine-card/build-machine-card.mjs */

body.ksgmc-open { overflow: hidden; }

/* CARD-SCOPED THEME TOKENS (red team 2026-09-11: on the planner's DARK theme the tag-out reason line measured 1.31:1
   and the WO / Google links 1.94:1). A token the portal's sheet does not define used to fall back to its LIGHT
   literal whatever the theme - the planner's steel.css defines none of --info, --tagbg, --tagrule, --amber2,
   --red-ink, --ok-ink - so a pale tag sat under the dark theme's pale ink. Each one now reads the portal's token
   first and falls back PER THEME: Clean Steel light by default, the brand dark values (lib/brand/steel.css; --info
   #9BB8D6 per docs/DESIGN.md) under html[data-theme="dark"] - so the tag's ground and the drawer's ink always come
   from the same theme. On both the drawer and the card root, so a sheet that embeds the card body reads the same.
   lib/test/machine-card.test.mjs computes the contrast of every text pair against the planner's and the brand's
   token sets in both themes. (A page that is dark with NO data-theme and none of these tokens gets the light
   fallbacks - every Steel portal stamps data-theme; the brand sheet defines all but --info.) */
.ksgmc-drawer, .ksgmc-card {
  --ksgmc-info: var(--info, #33608C);
  --ksgmc-tagbg: var(--tagbg, #FDF6F5);
  --ksgmc-tagrule: var(--tagrule, #D9B8B4);
  --ksgmc-amber2: var(--amber2, #A8651A);
  --ksgmc-red-ink: var(--red-ink, #B23B3B);
  --ksgmc-ok-ink: var(--ok-ink, #277A4C);
}
html[data-theme="dark"] .ksgmc-drawer, html[data-theme="dark"] .ksgmc-card {
  --ksgmc-info: var(--info, #9BB8D6);
  --ksgmc-tagbg: var(--tagbg, #332a2a);
  --ksgmc-tagrule: var(--tagrule, #5c4340);
  --ksgmc-amber2: var(--amber2, #E9B45A);
  --ksgmc-red-ink: var(--red-ink, #e8807a);
  --ksgmc-ok-ink: var(--ok-ink, #6cbb8f);
}

.ksgmc-scrim {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(20, 30, 45, .42);
  display: flex; justify-content: flex-end; align-items: stretch;
}
.ksgmc-drawer {
  box-sizing: border-box;
  width: min(560px, 92vw); max-width: 100vw; height: 100%;
  display: flex; flex-direction: column;
  background: var(--panel, #FBFCFD); color: var(--ink, #1C2530);
  border-left: 1px solid var(--line, #D4DAE0);
  box-shadow: 0 10px 34px rgba(20, 30, 45, .22);
  font-family: var(--sans, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif);
  font-size: 14px; line-height: 1.45;
}
.ksgmc-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  background: var(--sechead, #F3F5F8);
  border-bottom: 1px solid var(--line, #D4DAE0);
}
.ksgmc-bartitle {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--steel-cond, "Arial Narrow", sans-serif); font-weight: 800; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
}
.ksgmc-close {
  flex: none; min-height: 40px; min-width: 76px; padding: 0 14px;
  border: 1px solid var(--btnline, #B8C0C9); border-radius: 6px;
  background: transparent; color: var(--ink, #1C2530);
  font: inherit; font-size: 14px; cursor: pointer;
}
.ksgmc-close:hover { background: var(--hover, #EDF0F3); }
.ksgmc-close:focus-visible { outline: 2px solid var(--ksgmc-info); outline-offset: 2px; }
.ksgmc-body {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 14px 16px 22px;
}

.ksgmc-card { min-width: 0; }
.ksgmc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.ksgmc-unit {
  font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); font-variant-numeric: tabular-nums;
  font-size: 20px; font-weight: 700; overflow-wrap: anywhere;
}
.ksgmc-chip {
  border: 1px solid currentColor; border-radius: 0; padding: 0 6px;
  font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ksgmc-info);
}
.ksgmc-desc { flex-basis: 100%; color: var(--muted, #5A6675); overflow-wrap: anywhere; }

.ksgmc-row {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 12px;
  padding: 10px 0; border-top: 1px solid var(--hair, #E4E8ED);
}
.ksgmc-k {
  font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); font-size: 11px;
  letter-spacing: .08em; color: var(--muted, #5A6675); padding-top: 2px;
}
.ksgmc-v { min-width: 0; overflow-wrap: anywhere; }
.ksgmc-v small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted, #5A6675); }
.ksgmc-bad { color: var(--ksgmc-red-ink); }
.ksgmc-ok { color: var(--ksgmc-ok-ink); }
.ksgmc-st {
  display: inline-block; border: 2px solid currentColor; border-radius: 0; padding: 1px 7px;
  font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); font-size: 12px; font-weight: 700;
}
.ksgmc-foot {
  margin-top: 5px; font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace));
  font-size: 10px; letter-spacing: .1em; color: var(--dim, #8A93A0);
}

/* the physical safety tag: squared, 2px danger border, a solid stencil header, a dashed rule, a mono meta line */
.ksgmc-tag { border: 2px solid var(--red, #B23B3B); border-radius: 0; background: var(--ksgmc-tagbg); }
.ksgmc-taghead {
  background: var(--red, #B23B3B); color: #fff; padding: 3px 8px;
  font-family: var(--steel-cond, "Arial Narrow", sans-serif); font-weight: 800; font-size: 12px; letter-spacing: .1em;
}
.ksgmc-tagline {
  padding: 6px 8px 7px; border-top: 1px dashed var(--ksgmc-tagrule);
  font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); font-size: 12px;
}

/* the map pane - isolated so Leaflet's own z-indexed panes and controls never climb over the drawer's bar */
.ksgmc-mapblock { padding: 0 0 12px; }
.ksgmc-map {
  position: relative; z-index: 0; isolation: isolate;
  height: 260px; border: 1px solid var(--line, #D4DAE0); border-radius: 10px; overflow: hidden;
  background: var(--sechead, #F3F5F8); color: var(--muted, #5A6675);   /* --hair under --muted was 4.15:1 in dark */
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); font-size: 12px; letter-spacing: .06em;
}
.ksgmc-nomap { height: auto; min-height: 64px; padding: 14px; box-sizing: border-box; }
.ksgmc-fix, .ksgmc-fence {
  margin-top: 6px; font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); font-size: 12px;
  overflow-wrap: anywhere;
}
.ksgmc-fence { color: var(--muted, #5A6675); }
.ksgmc-stale { color: var(--ksgmc-amber2); }
.ksgmc-note { margin-top: 2px; font-size: 12px; color: var(--muted, #5A6675); }
.ksgmc-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 13px; }
.ksgmc-glink, .ksgmc-wolink { color: var(--ksgmc-info); }

/* extra links - a caller-supplied deep-link row (opts.extraLinks), e.g. PLAN A LIFT into Dave Porter's crane
   planner (keymaps wave 1). Sits with the map's own links (the fix line's Google Maps link uses --ksgmc-info too)
   but as a bordered button rather than an inline link, so a deep link off this card reads as an ACTION. */
.ksgmc-extralinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.ksgmc-extralink {
  display: inline-block; border: 1px solid var(--ksgmc-info); border-radius: 4px; padding: 5px 10px;
  color: var(--ksgmc-info); text-decoration: none;
  font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.ksgmc-extralink:hover { background: var(--hover, #EDF0F3); }

.ksgmc-wo { padding: 2px 0; }
.ksgmc-wo + .ksgmc-wo { border-top: 1px solid var(--hair, #E4E8ED); padding-top: 4px; margin-top: 2px; }
.ksgmc-wolink { font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); }

/* utilization: the planner's fleet bars, taller - seven 14px columns, one per day */
.ksgmc-bars { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin: 2px 0 6px; }
.ksgmc-bars i { display: inline-block; width: 14px; background: var(--ksgmc-info); border-radius: 2px 2px 0 0; }
.ksgmc-util, .ksgmc-hrs { font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); font-size: 12px; font-variant-numeric: tabular-nums; }

.ksgmc-asof {
  margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--hair, #E4E8ED);
  font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); font-size: 11px;
  letter-spacing: .06em; color: var(--dim, #8A93A0);
}
.ksgmc-empty { margin-top: 4px; font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); font-size: 11px; color: var(--ksgmc-amber2); }
.ksgmc-msg { padding: 18px 2px; font-family: var(--mono, var(--steel-mono, "SF Mono", Consolas, monospace)); letter-spacing: .04em; overflow-wrap: anywhere; }

/* PHONE (390px): a full-width sheet - nothing overflows sideways, the rows stack, the Close button sits in the bar
   at the top of the sheet and is reachable without scrolling (the body scrolls under it, the bar never moves). */
@media (max-width: 640px) {
  .ksgmc-drawer { width: 100vw; border-left: 0; box-shadow: none; }
  .ksgmc-body { padding: 12px 12px 20px; }
  .ksgmc-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .ksgmc-map { height: 220px; }
}

@media print { .ksgmc-scrim { display: none !important; } }