/* ── gitm.css — Phosphor, the Ghost in the Markets design system ─────────────
   One stylesheet every family site loads from /brand/gitm.css (served out of
   lib/brand/assets by each app, see lib/brand/__init__.py).

   Tokens first: dark is the brand's home and lives on :root; light is designed,
   not inverted, and is applied under prefers-color-scheme and the data-theme
   stamp. Components read tokens only — no component knows which theme it is in.
   Then the chrome every site shares: the bar (brand · tabs · global cluster in
   a fixed order), the toolbar, the two-pane body, the footer, and the phone
   rules. Radii: 4 chips, 6 controls, 8 cards — nothing rounder.
   ─────────────────────────────────────────────────────────────────────────── */

@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("fonts/jost.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/instrument-sans.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("fonts/jetbrains-mono.woff2") format("woff2"); }

:root {
  /* ground */
  --ink: #07080C; --surface: #12151D; --raised: #1A1E28; --line: #262B38; --line-strong: #343A4A;
  /* text */
  --bone: #E6E8EC; --muted: #8A90A0; --faint: #5A6070;
  /* the accent — spent on one thing per screen */
  --phosphor: #7FE8C8; --phosphor-bright: #B9F5E2; --phosphor-ink: #07080C;
  --glow: rgba(127,232,200,.16); --glow-strong: rgba(127,232,200,.34);
  /* semantic — colours data, never chrome */
  --up: #3CDC8C; --down: #FF5E6B; --warn: #FFC247; --info: #7CC4FF;
  /* legacy aliases, so an app's old variable names keep resolving while it migrates */
  --bg: var(--ink); --panel: var(--surface); --grid: var(--line); --text: var(--bone); --dim: var(--muted);
  --amber: var(--warn); --flat: var(--muted); --accent: var(--phosphor);
  /* type */
  --display: "Jost", "Futura", "Avenir Next", "Instrument Sans", system-ui, sans-serif;
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* shape */
  --r-chip: 4px; --r-ctl: 6px; --r-card: 8px; --r-pill: 999px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink: #F3F4F7; --surface: #FFFFFF; --raised: #FFFFFF; --line: #DDE1E8; --line-strong: #C4CAD6;
    --bone: #151821; --muted: #5B6170; --faint: #8A90A0;
    --phosphor: #0F7A63; --phosphor-bright: #0F7A63; --phosphor-ink: #FFFFFF;
    --glow: rgba(15,122,99,.10); --glow-strong: rgba(15,122,99,.22);
    --up: #168A52; --down: #D23B4A; --warn: #B07A00; --info: #1E6FB8;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ink: #F3F4F7; --surface: #FFFFFF; --raised: #FFFFFF; --line: #DDE1E8; --line-strong: #C4CAD6;
  --bone: #151821; --muted: #5B6170; --faint: #8A90A0;
  --phosphor: #0F7A63; --phosphor-bright: #0F7A63; --phosphor-ink: #FFFFFF;
  --glow: rgba(15,122,99,.10); --glow-strong: rgba(15,122,99,.22);
  --up: #168A52; --down: #D23B4A; --warn: #B07A00; --info: #1E6FB8;
  color-scheme: light;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--ui); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
h1 { font-size: 28px; line-height: 1.1; } h2 { font-size: 20px; line-height: 1.15; }
h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--phosphor); font-family: var(--mono); font-weight: 500; }
a { color: var(--phosphor); }
p { margin: 0; }
code, pre, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.up { color: var(--up); } .down { color: var(--down); } .warn { color: var(--warn); }
:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }
::selection { background: var(--glow-strong); }
main { flex: 1 1 auto; min-height: 0; }

/* ── controls ─────────────────────────────────────────────────────────────── */
button, .btn { font-family: var(--ui); font-size: 13px; font-weight: 500; line-height: 1; padding: 8px 12px; border-radius: var(--r-ctl);
  border: 1px solid var(--line-strong); background: var(--raised); color: var(--bone); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
button:hover, .btn:hover { border-color: var(--phosphor); }
button:disabled, .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; border-color: var(--line-strong); }
button.primary, .btn.primary { background: var(--phosphor); color: var(--phosphor-ink); border-color: var(--phosphor); font-weight: 600; }
button.primary:hover, .btn.primary:hover { box-shadow: 0 0 0 3px var(--glow); }
button.quiet, .btn.quiet, button.ghost, .btn.ghost { background: none; border-color: transparent; color: var(--muted); }
button.quiet:hover, .btn.quiet:hover, button.ghost:hover, .btn.ghost:hover { color: var(--bone); border-color: var(--line); }
button.danger, .btn.danger { background: none; color: var(--down); border-color: color-mix(in srgb, var(--down) 55%, transparent); }
button.sm, .btn.sm { padding: 5px 9px; font-size: 12px; }
button.active, .btn.active { color: var(--phosphor); border-color: var(--phosphor); }
button svg, .btn svg { width: 14px; height: 14px; }
.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ibtn { position: relative; width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; border-radius: var(--r-ctl);
  border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.ibtn:hover { color: var(--bone); border-color: var(--line-strong); background: var(--raised); }
.ibtn.ai, .ibtn.on { color: var(--phosphor); border-color: color-mix(in srgb, var(--phosphor) 45%, transparent); }
.ibtn.slot { visibility: hidden; pointer-events: none; }
.ibtn .badge { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--down); border: 2px solid var(--surface); }

input, select, textarea, .input { font-family: var(--ui); font-size: 13px; color: var(--bone); background: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 7px 10px; }
input.mono, textarea.mono, .input.mono { font-family: var(--mono); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--phosphor); box-shadow: 0 0 0 3px var(--glow); }
input::placeholder, textarea::placeholder { color: var(--faint); }
select { padding-right: 24px; }
.field { display: grid; gap: 4px; }
.field > label, label.lab { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.chip, .g-chip, .r-chip { font-family: var(--mono); font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: var(--r-chip);
  border: 1px solid var(--line-strong); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.chip.live, .chip.run, .r-chip.run { color: var(--phosphor); border-color: var(--phosphor); }
.chip.up, .chip.ok, .r-chip.ok { color: var(--up); border-color: color-mix(in srgb, var(--up) 60%, transparent); }
.chip.down, .chip.bad, .r-chip.bad { color: var(--down); border-color: color-mix(in srgb, var(--down) 60%, transparent); }
.chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.chip.info { color: var(--info); border-color: color-mix(in srgb, var(--info) 60%, transparent); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill { border-radius: var(--r-pill); }

/* ── surfaces ─────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.kpi { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.kpi .v { font-family: var(--mono); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kpi .d { font-size: 12px; }
.empty { border: 1px dashed var(--line-strong); border-radius: var(--r-card); padding: 22px; text-align: center; color: var(--muted); font-size: 13px;
  display: grid; gap: 8px; justify-items: center; }
.toast { background: var(--raised); border: 1px solid var(--line-strong); border-left: 3px solid var(--phosphor); border-radius: var(--r-ctl);
  padding: 10px 12px; font-size: 13px; display: flex; gap: 10px; align-items: center; max-width: 360px; color: var(--bone); }
.toast.err, .toast.alert, .toast.error { border-left-color: var(--down); }
.toast.warn { border-left-color: var(--warn); }
.cmd { display: flex; align-items: center; gap: 10px; background: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  padding: 7px 12px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.cmd b { color: var(--phosphor); font-weight: 500; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left;
  padding: 7px 10px; border-bottom: 1px solid var(--line-strong); font-weight: 500; }
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:hover td { background: color-mix(in srgb, var(--phosphor) 5%, transparent); }
.tbl .num, .tbl th.num, td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > .tab, .tabs > button { font-family: var(--ui); font-size: 13px; font-weight: 500; color: var(--muted); background: none; border: 0; border-radius: 0;
  border-bottom: 2px solid transparent; padding: 10px 12px; cursor: pointer; white-space: nowrap; }
.tabs > .tab:hover, .tabs > button:hover { color: var(--bone); border-color: transparent; border-bottom-color: var(--line-strong); }
.tabs > .tab.active, .tabs > .tab.on, .tabs > button.active { color: var(--bone); border-bottom-color: var(--phosphor); }

/* ── the chrome every site shares ─────────────────────────────────────────── */
.gitm-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 14px;
  border-bottom: 1px solid var(--line); background: var(--surface); position: relative; z-index: 5; }
.gitm-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--bone); white-space: nowrap; }
.gitm-brand .gitm-mark { width: 24px; height: 24px; color: var(--phosphor); --eye: var(--phosphor-bright); overflow: visible;
  filter: drop-shadow(0 0 3px var(--glow-strong)); }
.gitm-brand .gitm-word { font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; }
.gitm-brand .gitm-word .o { color: var(--phosphor); font-weight: 300; }
.gitm-brand .gitm-app { font-family: var(--ui); font-weight: 500; font-size: 14px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.gitm-brand .gitm-app::before { content: "/"; margin: 0 7px 0 2px; color: var(--faint); }
.gitm-bar .tabs { flex: 1 1 auto; min-width: 0; }
.gitm-bar .gitm-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
.gitm-globals { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.gitm-globals .sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 6px; }
.gitm-globals a.ibtn { text-decoration: none; }
.gitm-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.gitm-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); display: inline-block; }
.gitm-status.live i, .gitm-status.online i { background: var(--phosphor); box-shadow: 0 0 8px var(--glow-strong); }
.gitm-status.bad i { background: var(--down); }

/* the rail (2026-09-09): a console's views down the LEFT instead of across the
   bar, for a console whose views outgrew the strip (argus's eleven wrapped to
   two lines on a 1440-px MacBook). Markup from lib.brand.rail(): under the bar
   a .gitm-frame holds the rail and the .gitm-stage the views fill. Desktop:
   the rail is always there — ☰ (rail_toggle(), first in the bar) collapses it
   to html[data-rail="hidden"], remembered per browser by rail.js. Phone: the
   same element is a drawer over a veil (html[data-rail-open]). */
.gitm-frame { flex: 1 1 auto; display: flex; min-height: 0; }
.gitm-stage { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.gitm-rail { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding: 8px 5px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; background: var(--surface); border-right: 1px solid var(--line); }
.gitm-rail::-webkit-scrollbar { display: none; }
.gitm-rail > .tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 62px; padding: 8px 2px 7px;
  font-family: var(--ui); font-size: 10px; font-weight: 500; line-height: 1.15; letter-spacing: .01em; color: var(--muted); background: none;
  border: 0; border-radius: var(--r-ctl); cursor: pointer; text-align: center; white-space: normal; }
.gitm-rail > .tab .icon { width: 20px; height: 20px; stroke-width: 1.6; }
.gitm-rail > .tab .lbl { max-width: 100%; }
.gitm-rail > .tab:hover { color: var(--bone); background: color-mix(in srgb, var(--bone) 6%, transparent); }
.gitm-rail > .tab.active { color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 10%, transparent); }
.gitm-rail > .tab.active::before { content: ""; position: absolute; left: -5px; top: 9px; bottom: 9px; width: 2px; border-radius: 0 2px 2px 0;
  background: var(--phosphor); }
.gitm-rail-toggle { order: -1; }
.gitm-veil { display: none; }
@media (min-width: 741px) { html[data-rail="hidden"] .gitm-rail { display: none; } }

.gitm-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.gitm-toolbar .group { display: inline-flex; gap: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
.gitm-toolbar .primary-slot { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.gitm-body { flex: 1 1 auto; display: flex; min-height: 0; }
.gitm-list { flex: 0 0 330px; overflow-y: auto; border-right: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.gitm-detail { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gitm-detail > * { flex: 0 0 auto; }
.gitm-foot { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 12px; padding: 7px 14px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--faint); }
.gitm-item { display: grid; gap: 3px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface);
  font-size: 13px; text-align: left; width: 100%; color: var(--bone); }
.gitm-item.sel, .gitm-item.active { border-color: var(--phosphor); }
.gitm-item .m { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.phone-only { display: none; }

/* ── the open-positions component (positions.js) — one table for every book ── */
.pos-table { width: 100%; }
.pos-table th { white-space: nowrap; }
.pos-table td { vertical-align: top; }
.pos-row { cursor: pointer; }
.pos-row td { font-variant-numeric: tabular-nums; }
.pos-row.open td { background: color-mix(in srgb, var(--phosphor) 7%, transparent); box-shadow: inset 2px 0 0 var(--phosphor); }
.pos-sub { display: block; font-size: 11px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.pos-venue { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pos-stale { color: var(--muted); margin-left: 2px; }
.pos-detail-row > td { padding: 0 0 12px; background: var(--bg); white-space: normal; }
.pos-detail-row:hover > td { background: var(--bg); }
.pos-detail { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-card) var(--r-card); padding: 12px 14px;
  display: grid; gap: 10px; background: var(--surface); }
/* the ground is --bg, not --ink: the consoles' own palettes reuse --ink for TEXT (haruspex/auspex), --bg is the ground in every palette */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 18px; }
.pos-charts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px 18px; align-items: start; }
.pos-chart-box { display: grid; gap: 4px; min-width: 0; }
.pos-sec { min-width: 0; display: grid; gap: 6px; align-content: start; }
.pos-sec h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--phosphor);
  font-weight: 500; margin: 2px 0 0; }
.pos-kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: 12px; margin: 0; }
.pos-kv dt { color: var(--muted); }
.pos-kv dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.pos-leg { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 8px 10px; display: grid; gap: 6px; background: var(--bg); }
.pos-leg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pos-leg-pnl { font-family: var(--mono); font-variant-numeric: tabular-nums; margin-left: auto; }
.pos-depth { display: flex; gap: 14px; font-size: 11px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pos-depth > div { flex: 1; display: grid; gap: 1px; }
.pos-depth b { color: var(--muted); font-weight: 500; }
svg.pos-chart { display: block; border-bottom: 1px solid var(--line); }
svg.pos-chart .pos-line { fill: none; stroke: var(--phosphor); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
svg.pos-chart .pos-zero { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
svg.pos-chart .pos-mark { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
svg.pos-chart .pos-mark.spot { stroke: var(--phosphor); stroke-dasharray: none; }
svg.pos-chart .pos-mark.entry { stroke: var(--info); stroke-dasharray: 1 3; }
svg.pos-chart .pos-area.up { fill: var(--up); opacity: .14; }
svg.pos-chart .pos-area.down { fill: var(--down); opacity: .14; }
svg.pos-chart .pos-dot { fill: var(--phosphor); }
svg.pos-chart .pos-cross { stroke: var(--phosphor); opacity: .5; vector-effect: non-scaling-stroke; }
svg.pos-chart .pos-hover { fill: var(--phosphor); }
.pos-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pos-key { display: inline-block; width: 10px; height: 0; border-top: 2px solid var(--phosphor); margin-right: 4px; vertical-align: middle; }
.pos-key.entry { border-top-style: dotted; border-color: var(--info); }
.pos-note { font-size: 12px; }
.pos-actions { display: flex; gap: 8px; align-items: center; }
.pos-actions .pos-id { margin-left: auto; font-family: var(--mono); font-size: 10px; }
#pos-tip { position: fixed; display: none; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  padding: 6px 9px; font-size: 12px; pointer-events: none; z-index: 60; font-variant-numeric: tabular-nums; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.live-note { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.live-note.down { color: var(--down); }

/* ── the book time machine (bookreplay.js) ────────────────────────────────── */
.rp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.rp-head .rp-range { flex: 1 1 200px; min-width: 120px; accent-color: var(--phosphor); padding: 0; }
.rp-when { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
svg.rp-chart { display: block; border-bottom: 1px solid var(--line); }
svg.rp-chart .rp-line { fill: none; stroke: var(--phosphor); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
svg.rp-chart .rp-line.faint { opacity: .22; }
svg.rp-chart .rp-ev { stroke-width: 2; vector-effect: non-scaling-stroke; stroke: var(--info); }
svg.rp-chart .rp-ev.bad { stroke: var(--down); }
svg.rp-chart .rp-ev.warn { stroke: var(--warn); }
svg.rp-chart .rp-ev.ok { stroke: var(--up); }
svg.rp-chart .rp-ev.future { opacity: .3; }
svg.rp-chart .rp-cursor { stroke: var(--phosphor); opacity: .6; vector-effect: non-scaling-stroke; }
svg.rp-chart .rp-dot { fill: var(--phosphor); }
.rp-readout { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--mono); font-size: 12px; margin: 6px 0;
  font-variant-numeric: tabular-nums; }
.rp-readout span > i { font-style: normal; color: var(--muted); margin-right: 5px; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.rp-events { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.rp-event.latest { color: var(--bone); }
.rp-event > i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--info); }
.rp-event > i.bad { background: var(--down); }
.rp-event > i.warn { background: var(--warn); }
.rp-event > i.ok { background: var(--up); }
.rp-note { font-size: 12px; }
details.rp-card > summary { cursor: pointer; }

/* the hem as a loading line: draws itself left to right */
.gitm-hem { width: 40px; height: 16px; color: var(--phosphor); }
.gitm-hem path { stroke-dasharray: 80; stroke-dashoffset: 0; animation: gitm-draw 1.2s ease-out infinite; }
@keyframes gitm-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .gitm-hem path { animation: none; } }

/* ── phone ────────────────────────────────────────────────────────────────── */
@media (max-width: 740px) {
  body { font-size: 13px; }
  .gitm-bar { height: auto; flex-wrap: wrap; padding: 8px 10px 0; gap: 6px 10px; }
  .gitm-bar .tabs { flex-basis: 100%; order: 10; margin: 0 -10px; padding: 0 10px; }
  .gitm-bar .gitm-meta { display: none; }
  .gitm-globals { margin-left: auto; }
  .gitm-globals .ibtn.command, .gitm-globals .ibtn.home, .gitm-globals .sep { display: none; }
  /* the rail is a drawer: off-canvas until ☰, over a veil that closes it */
  .gitm-rail { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 45; padding: 12px 8px;
    border-right: 1px solid var(--line-strong); box-shadow: 0 0 40px rgba(0, 0, 0, .5);
    transform: translateX(-102%); transition: transform .18s ease; }
  .gitm-rail > .tab { flex-direction: row; justify-content: flex-start; width: auto; gap: 12px; padding: 10px 12px; font-size: 14px; }
  .gitm-rail > .tab .icon { width: 18px; height: 18px; }
  .gitm-rail > .tab.active::before { left: -8px; top: 8px; bottom: 8px; }
  html[data-rail-open] .gitm-rail { transform: none; }
  .gitm-veil { position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .5); }
  html[data-rail-open] .gitm-veil { display: block; }
  @media (prefers-reduced-motion: reduce) { .gitm-rail { transition: none; } }
  .gitm-toolbar { padding: 6px 8px; gap: 6px; }
  .gitm-toolbar .primary-slot { margin-left: 0; flex-basis: 100%; }
  .gitm-body { flex-direction: column; flex: 0 0 auto; }
  .gitm-list { flex: 0 0 auto; overflow: visible; border-right: 0; border-bottom: 2px solid var(--line); }
  .gitm-detail { flex: 0 0 auto; overflow: visible; padding: 12px 12px 18px; }
  main { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  input, select, textarea { font-size: 16px; }
  .phone-only { display: inline-flex; }
  table.tbl { display: block; overflow-x: auto; max-width: 100%; }
  .tbl th, .tbl td { white-space: nowrap; }
  .toast { max-width: none; }
  .pos-table .xw { display: none; }
  .pos-grid, .pos-charts { grid-template-columns: 1fr; }
  .pos-detail { padding: 10px; }
  .pos-detail-row > td { white-space: normal; }
  .pos-actions { flex-wrap: wrap; }
}