/* employeeCam back office.
   Self-contained: no webfonts, no CDN, no network at render time. The page
   has to open on a back-office machine behind a restrictive firewall, and on
   the manager's phone in the stockroom.

   One stylesheet, one token set, one shell. The shell is an app: a sticky top
   bar with the store and the period, section tabs that become a bottom tab
   bar on a phone, and cards that carry their own coverage. Hebrew is the
   default language, so every horizontal rule below is a logical one. */

:root {
  color-scheme: light;

  /* Cool, faintly teal paper: an instrument, not stationery. The teal is
     the one accent; everything else is a grey with a little of it in. */
  --ground: #eef2f3;
  --panel: #ffffff;
  --panel-2: #f6f8f9;
  --rule: #dbe4e7;
  --rule-strong: #bccad0;

  --ink: #14262e;
  --ink-2: #4d6470;
  --ink-3: #6d838d;

  --accent: #087f8c;
  --accent-ink: #ffffff;
  --accent-deep: #125963;
  --accent-soft: #e2f1f2;

  /* Data-viz slots. Three categorical series, validated as a set; the
     status colours are reserved for state and never reused for a series. */
  --series-1: #087f8c; /* customers */
  --series-2: #eb6834; /* staff */
  --series-3: #1baf7a; /* transactions */
  --grid-ink: #087f8c;

  --ok: #2e7d32;
  --warn: #b45309;
  --alarm: #b22a28;
  --alarm-soft: #fbe9e8;
  --warn-soft: #fdf1e3;
  --ok-soft: #e5f3e6;

  /* Hebrew first in the stack, because Hebrew is the default language and a
     Latin-only face would fall back to whatever the OS picks. No webfont:
     the page must render with no outbound network. */
  --sans: "Segoe UI", "Arial Hebrew", Alef, ui-sans-serif, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans);

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(20, 38, 46, 0.06), 0 8px 24px -16px rgba(20, 38, 46, 0.18);
  --topbar-h: 56px;
  --tabbar-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0f1e25;
    --panel: #172b34;
    --panel-2: #1d333d;
    --rule: #2a4550;
    --rule-strong: #48656f;
    --ink: #eef8fa;
    --ink-2: #b7ccd3;
    --ink-3: #93adb6;
    --accent: #42bfca;
    --accent-ink: #072226;
    --accent-deep: #1e5e68;
    --accent-soft: #1b3d45;
    --series-1: #42bfca;
    --series-2: #f08a5d;
    --series-3: #3ec48f;
    --grid-ink: #42bfca;
    --ok: #6fcf74;
    --warn: #e6a93c;
    --alarm: #f07b78;
    --alarm-soft: #45262a;
    --warn-soft: #43351f;
    --ok-soft: #21402a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -16px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0f1e25;
  --panel: #172b34;
  --panel-2: #1d333d;
  --rule: #2a4550;
  --rule-strong: #48656f;
  --ink: #eef8fa;
  --ink-2: #b7ccd3;
  --ink-3: #93adb6;
  --accent: #42bfca;
  --accent-ink: #072226;
  --accent-deep: #1e5e68;
  --accent-soft: #1b3d45;
  --series-1: #42bfca;
  --series-2: #f08a5d;
  --series-3: #3ec48f;
  --grid-ink: #42bfca;
  --ok: #6fcf74;
  --warn: #e6a93c;
  --alarm: #f07b78;
  --alarm-soft: #45262a;
  --warn-soft: #43351f;
  --ok-soft: #21402a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -16px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 64px); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding-inline: clamp(16px, 3vw, 40px);
  padding-block: 0 40px;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- the shell: top bar, masthead, tabs ------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-inline: calc(-1 * clamp(16px, 3vw, 40px));
  padding-inline: clamp(16px, 3vw, 40px);
  padding-top: env(safe-area-inset-top, 0px);
  /* Opaque, no blur: a backdrop filter over a page of SVG charts stalls a
     low-end tablet's compositor. */
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  min-height: var(--topbar-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.brand span span { color: var(--accent); }
.brand-icon {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 10px 10px 4px 10px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 22px;
}

.demo-badge {
  color: var(--ink-2); font-size: 12px;
  border: 1px solid var(--rule-strong); padding: 3px 10px; border-radius: 30px;
  white-space: nowrap;
}

.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-inline-start: auto; }

select, button, input[type="text"], input[type="number"], input[type="date"] {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  min-height: 42px;
  max-width: 100%;
}
select { font-weight: 600; border-color: var(--accent); padding-inline-end: 32px; }
button { cursor: pointer; }
button:hover { background: var(--panel-2); border-color: var(--ink-2); }
button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
button.danger { border-color: var(--alarm); color: var(--alarm); }
button.export { font-size: 12px; padding: 4px 10px; min-height: 30px; align-self: flex-start; }
button[type="submit"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button[type="submit"]:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
button:disabled, input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }

:is(select, button, input, a, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.masthead { align-items: flex-end; padding-block: 18px 6px; min-height: 0; }
.masthead h1 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 750; letter-spacing: -0.8px; margin: 0; line-height: 1.15; text-wrap: balance; }
.masthead .sub { color: var(--ink-2); font-size: 14px; margin: 4px 0 0; }

.session-bar { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }

/* Section tabs: an underline row under the masthead. */
.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-inline: -4px;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  flex: none;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px 12px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.tabs a .badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--alarm); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center; line-height: 1;
}

/* Only the active tab's sections show. The attribute lives on <main>, so a
   section's own `hidden` (not measured) still wins. */
main { padding-top: 22px; display: grid; gap: 20px; align-content: start; }
main > [data-tab] { margin: 0; }
/* One selector per tab, because CSS cannot compare an attribute with
   another attribute. A tab missing from this list hides nothing, and the
   page then stacks every section on top of the one that was asked for -
   which is exactly what the four gym tabs did when they were added to the
   markup and forgotten here. */
main[data-active="now"] > [data-tab]:not([data-tab="now"]),
main[data-active="stations"] > [data-tab]:not([data-tab="stations"]),
main[data-active="stay"] > [data-tab]:not([data-tab="stay"]),
main[data-active="service"] > [data-tab]:not([data-tab="service"]),
main[data-active="overview"] > [data-tab]:not([data-tab="overview"]),
main[data-active="live"] > [data-tab]:not([data-tab="live"]),
main[data-active="floor"] > [data-tab]:not([data-tab="floor"]),
main[data-active="staff"] > [data-tab]:not([data-tab="staff"]),
main[data-active="forecast"] > [data-tab]:not([data-tab="forecast"]),
main[data-active="alerts"] > [data-tab]:not([data-tab="alerts"]),
main[data-active="devices"] > [data-tab]:not([data-tab="devices"]) { display: none; }

/* --- cards -------------------------------------------------------------- */

.strip, .panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  min-width: 0;
  box-shadow: var(--shadow);
}
.panel { overflow: auto; }

.strip h2, .panel h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 2px; line-height: 1.3; }
.strip h3, .panel h3 { font-size: 15px; font-weight: 650; margin: 0 0 6px; }

.note { color: var(--ink-2); font-size: 13px; line-height: 1.65; margin: 0 0 16px; max-width: 72ch; }

.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap; }
.head > div { min-width: 0; flex: 1 1 320px; }
.head .note { margin-bottom: 8px; }
.head form, .head .legend { margin-bottom: 12px; }

.export-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: -10px 0 0; }

.grid-scroll { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }

/* --- KPI tiles ---------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.stat:first-child { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }
.stat:first-child .label, .stat:first-child .coverage, .stat:first-child .delta { color: #d0e9e9; }
.stat .label { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.stat .value {
  font-size: 32px; font-weight: 700; letter-spacing: -1px;
  line-height: 1.1; font-variant-numeric: tabular-nums;
  margin: 6px 0 4px; text-align: start;
}
.stat .value.muted { color: var(--ink-3); font-size: 20px; letter-spacing: 0; }
.stat:first-child .value.muted { color: #d0e9e9; }

.tiles .stat:first-child { background: var(--panel); color: var(--ink); border-color: var(--rule); }
.tiles .stat:first-child .label, .tiles .stat:first-child .coverage { color: var(--ink-2); }
.strip .stats { margin-bottom: 16px; }
.strip .stats .stat { box-shadow: none; background: var(--panel-2); }

.coverage { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.coverage.partial { color: var(--warn); }
.coverage .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.delta { font-size: 12px; color: var(--ink-2); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.delta .up { color: var(--ok); }
.delta .down { color: var(--warn); }
.delta .flat { color: var(--ink-3); }

/* --- the trading week: the hero ---------------------------------------- */

.hero { border-color: var(--accent-soft); }

table.weekgrid {
  border-collapse: separate;
  border-spacing: 4px; /* the surface gap between fills */
  font-size: 12px;
  width: 100%;
  min-width: 640px;
}
table.weekgrid th { color: var(--ink-3); font-weight: 500; font-size: 11px; text-align: center; padding: 0 0 6px; }
table.weekgrid th.day {
  text-align: end; padding-inline-end: 8px; width: 30px;
  color: var(--ink-2); font-weight: 600; font-size: 13px; vertical-align: middle;
}
/* What happened that day, under its name: a holiday, a campaign, a closure.
   Text, so it survives print and forced colours; the kind is a rule style. */
table.weekgrid th.day .ctx {
  display: block; font-size: 10px; font-weight: 400; color: var(--ink-3);
  max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-inline-start: auto;
}
table.weekgrid th.day .ctx-holiday { border-inline-end: 2px solid var(--ink-3); padding-inline-end: 4px; }
table.weekgrid th.day .ctx-campaign { border-inline-end: 2px dotted var(--ink-3); padding-inline-end: 4px; }
table.weekgrid th.day .ctx-closure { text-decoration: line-through; }

table.weekgrid td {
  height: 38px; padding: 0; position: relative;
  border-radius: 5px; background: var(--panel-2); border: 1px solid var(--rule);
}
table.weekgrid td .fill { position: absolute; inset: 0; border-radius: 4px; background: var(--grid-ink); }
table.weekgrid td .val {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600;
}
table.weekgrid td .val.no-data { color: var(--ink-3) !important; }
/* A stretched hour is marked by a rule, not by hue alone. */
table.weekgrid td.stretched { border: 2px solid var(--alarm); }
table.weekgrid td:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.forecast-grid td.cell { text-align: center; font-variant-numeric: tabular-nums; }
.forecast-grid td.cell .staff { display: block; font-size: 11px; color: var(--ink-2); }
.forecast-grid td.cell.thin { color: var(--ink-3); }

/* --- the chain overview --------------------------------------------------- */

#overview-table th[data-sort] { cursor: pointer; user-select: none; }
#overview-table th[data-sort][aria-sort="descending"]::after { content: " \25BE"; }
#overview-table th[data-sort][aria-sort="ascending"]::after { content: " \25B4"; }
#overview-table td.muted { color: var(--ink-3); }
#overview-table td.store a { color: inherit; text-decoration: underline dotted; }

/* --- power hours ----------------------------------------------------------- */

.power-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.power-list li { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--panel-2); }
.power-list .when { font-weight: 600; }
.power-list .bar { height: 6px; border-radius: 3px; background: var(--rule); margin: 8px 0 6px; overflow: hidden; }
.power-list .bar span { display: block; height: 100%; background: var(--accent); }
.power-list .count { font-size: 12px; color: var(--ink-2); }

/* --- live ------------------------------------------------------------------ */

.live-strip {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 4px 0 16px; padding: 16px 18px;
  background: var(--accent-soft); border-radius: var(--radius-sm);
}
.live-now { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.live-now .big { font-size: 34px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.live-now .stop { color: var(--alarm); font-weight: 700; }
.live-now .queue { padding: 3px 10px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--panel); font-size: 13px; }
.live-now .queue.alert { border-color: var(--alarm); color: var(--alarm); }
.live-settings { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.live-settings label { display: inline-flex; align-items: center; gap: 6px; }
.live-settings input { width: 84px; }

.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend-peak { background: var(--series-1); opacity: .25; }
.legend-unknown {
  background: repeating-linear-gradient(135deg, var(--rule-strong) 0 2px, transparent 2px 6px);
  border: 1px solid var(--rule-strong);
}
.occupancy-unknown { fill: url(#hatch); }
.occupancy-line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; }
.occupancy-peak { fill: var(--series-1); opacity: .18; }
.occupancy-point { fill: var(--series-1); }
.day-rule { stroke: var(--rule-strong); }

/* --- floor ------------------------------------------------------------------ */

.analysis-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; }
#staffing-chart { overflow-x: auto; padding-bottom: 8px; }
#staffing-chart svg { min-width: 700px; }
#zones-chart { padding-top: 8px; }

.heat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.heat-camera h3 { margin: 0 0 6px; }
.heat-camera svg { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); background: var(--rule); }
.heat-camera .count { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- charts ----------------------------------------------------------------- */

svg { display: block; width: 100%; height: auto; overflow: visible; }
/* The class is set on the <text> elements themselves, so a descendant
   selector matched nothing and every axis label kept SVG's default black
   fill - invisible on the dark surface. */
text.axis, .axis text { fill: var(--ink-3); font-size: 12px; font-family: var(--sans); }
line.axis, .axis line, .axis path { stroke: var(--rule); }
.gridline { stroke: var(--rule); stroke-dasharray: 2 3; }
.mark-label { fill: var(--ink); font-size: 12px; font-weight: 600; font-family: var(--sans); font-variant-numeric: tabular-nums; }

/* --- tables ------------------------------------------------------------------ */

table.data { border-collapse: collapse; width: 100%; font-size: 13px; margin-top: 12px; }
table.data th, table.data td {
  text-align: end; padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
table.data th:first-child, table.data td:first-child { text-align: start; }
table.data th { color: var(--ink-2); font-weight: 600; font-size: 12px; }
table.data tr:last-child td { border-bottom: 0; }

/* --- flags and alerts ----------------------------------------------------------- */

.flags { display: grid; gap: 8px; background: none; border: 0; padding: 0; box-shadow: none; }
.flag {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--warn); color: var(--ink); background: var(--warn-soft);
  font-size: 14px; line-height: 1.6;
}
.flag .flag-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); flex: none; margin-top: 7px; }
.flag b { color: var(--warn); font-weight: 700; }

.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alert-item {
  display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--panel-2);
}
.alert-item::before { content: ""; grid-row: 1 / span 2; align-self: stretch; border-radius: 2px; background: var(--ink-3); }
.alert-item.alert-queue::before, .alert-item.alert-occupancy_limit::before { background: var(--warn); }
.alert-item.alert-camera_down::before, .alert-item.alert-drift::before { background: var(--alarm); }
.alert-item.alert-weekly_summary::before { background: var(--accent); }
.alert-item .alert-kind { font-weight: 650; }
.alert-item .alert-detail { grid-column: 2; color: var(--ink-2); font-size: 13px; }
.alert-item .alert-when { grid-column: 3; grid-row: 1 / span 2; text-align: end; font-size: 12px; color: var(--ink-2); display: grid; gap: 4px; justify-items: end; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--rule-strong); color: var(--ink-2); white-space: nowrap;
}
.chip.ok { color: var(--ok); border-color: transparent; background: var(--ok-soft); }
.chip.pending { color: var(--warn); border-color: transparent; background: var(--warn-soft); }

/* --- devices ---------------------------------------------------------------- */

.device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.device {
  border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--panel-2);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline;
}
.device.stale { border-color: var(--alarm); background: var(--alarm-soft); }
.device .device-name { font-weight: 700; }
.device .device-site { color: var(--ink-2); font-size: 13px; }
.device .device-seen { font-size: 13px; color: var(--ink-2); text-align: end; }
.device.stale .device-seen { color: var(--alarm); font-weight: 600; }
.device .cameras { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.camera-chip {
  font-size: 12px; padding: 4px 10px; border-radius: 30px;
  border: 1px solid var(--rule-strong); color: var(--ink-2); background: var(--panel);
  display: inline-flex; gap: 6px; align-items: center;
}
.camera-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--series-3); }
.camera-chip.stale { border-color: var(--alarm); color: var(--alarm); }
.camera-chip.stale .dot { background: var(--alarm); }
.camera-chip.partial .dot { background: var(--warn); }

.device-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.device-actions button, .dvr-form button { font-size: 13px; padding: 6px 12px; min-height: 36px; }
.device-actions button:hover, .dvr-form button:hover { border-color: var(--accent); }
.dvr-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dvr-form input { font: inherit; font-size: 13px; padding: 6px 10px; min-height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--rule-strong); background: var(--panel); color: var(--ink); min-width: 120px; }
.command-log { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 8px; }
.command { border-top: 1px solid var(--rule); padding-top: 6px; font-size: 13px; }
.command-head { color: var(--ink-2); }
.command-failed .command-head { color: var(--alarm); }
.command-error { color: var(--alarm); }
.command-result { display: grid; gap: 4px; margin-top: 4px; }
.command-result .found { font-weight: 600; }
.command-result .channel { display: flex; justify-content: space-between; gap: 10px; align-items: center; }

.button-link {
  display: inline-flex; align-items: center; min-height: 42px; padding: 8px 14px;
  border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--accent);
  text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.button-link:hover { background: var(--accent-soft); }

/* --- staff (opt-in) and notifications -------------------------------------- */

.staff-add, .staff-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.staff-add input, .staff-form input, .staff-form select { min-width: 0; flex: 1 1 160px; }
.staff-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.staff-list .member { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--panel-2); }
.staff-list .member.no-consent { color: var(--ink-3); }
.staff-list .member-name { font-weight: 600; }
.staff-list .member-status { color: var(--ink-3); font-size: 13px; flex: 1 1 auto; }
.staff-list .empty { color: var(--ink-3); }

/* --- the clip view ----------------------------------------------------------- */

.clip .clip-head { margin-block-end: 12px; }
.clip .clip-head h2 { margin: 0 0 4px; }
.clip .provenance { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.clip .provenance b { color: var(--ink); font-weight: 600; }
/* The authorized public sample is a separate, password-protected demo asset. */
.demo-player { margin-block-start: 24px; padding-block-start: 20px; border-top: 1px solid var(--rule); }
.demo-player video { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: #191f28; border-radius: var(--radius); margin-block: 14px; }

/* --- states: empty, loading, error ------------------------------------------- */

.empty { color: var(--ink-2); padding: 20px 0; }
.error {
  color: var(--alarm); background: var(--alarm-soft);
  border: 1px solid var(--alarm); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-top: 16px; max-width: 70ch;
}

/* While the first load is in flight the cards keep their shape. */
main.loading .strip:not([hidden]) > :not(.head):not(h2):not(.note), main.loading .stats:empty {
  min-height: 120px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--rule) 50%, var(--panel-2) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* --- tooltip -------------------------------------------------------------------- */

#tip {
  position: fixed; pointer-events: none;
  background: var(--ink); color: var(--ground);
  padding: 10px 14px; border-radius: 10px;
  font-size: 12px; line-height: 1.7; max-width: 260px; z-index: 40;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
#tip b { font-variant-numeric: tabular-nums; }

footer {
  margin-top: 36px; padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3); font-size: 12px; line-height: 1.8; max-width: 95ch;
}

/* --- direction ----------------------------------------------------------------- */

/* Numbers keep their own direction inside Hebrew text. Hebrew writes digits
   left to right, so a figure that inherits RTL can render its parts in the
   wrong order. */
.stat .value, table.weekgrid td .val, .mark-label, .live-now .big { direction: ltr; unicode-bidi: isolate; }
/* The hour header is a clock time, not prose. */
table.weekgrid th[scope="col"] { direction: ltr; unicode-bidi: isolate; }
/* The language button always shows the language it switches TO, in that
   language, so it reads correctly whichever way round the page is. */
#toggle-lang { font-variant-numeric: normal; }

/* --- responsive ----------------------------------------------------------------- */

@media (max-width: 1000px) {
  .analysis-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  :root { --topbar-h: 52px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  /* The header scrolls away on a phone: the bottom bar is the navigation
     that stays, and a sticky three-row header would eat half the screen. */
  .topbar { position: static; }
  .wrap { padding-block-end: 24px; }
  .topbar-row { gap: 8px 12px; }
  .brand { font-size: 17px; }
  .brand-icon { width: 28px; height: 28px; font-size: 19px; border-radius: 8px 8px 3px 8px; }
  .demo-badge { display: none; }
  .controls { flex: 1 1 100%; margin-inline-start: 0; }
  .controls select { flex: 1 1 100%; }
  .controls button { flex: 1 1 auto; font-size: 13px; padding-inline: 10px; }
  .session-bar { flex: 1 1 100%; justify-content: space-between; }
  .masthead { padding-block: 12px 10px; }
  .masthead h1 { font-size: 24px; }
  .masthead .sub { font-size: 13px; }
  main { padding-top: 16px; gap: 14px; }

  /* The tabs become a bottom bar the thumb can reach. */
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    margin: 0; gap: 0;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--panel); border-top: 1px solid var(--rule);
    box-shadow: 0 -6px 20px -14px rgba(0, 0, 0, 0.35);
    scroll-snap-type: x proximity;
  }
  .tabs a {
    flex: 1 1 0; min-width: 0; justify-content: center;
    font-size: 11px; padding: 0 4px; margin: 0;
    border-bottom: 0; border-top: 2px solid transparent;
    overflow: hidden; text-overflow: ellipsis;
    scroll-snap-align: center;
  }
  .tabs a .badge { min-width: 16px; height: 16px; font-size: 10px; }
  .tabs a[aria-current="page"] { border-top-color: var(--accent); background: var(--accent-soft); }

  .strip, .panel { padding: 18px 14px; border-radius: 12px; }
  .stat { padding: 14px 14px; }
  .stat .value { font-size: 30px; }
  .stat .label { font-size: 12px; }
  .coverage { font-size: 11px; }
  .strip h2, .panel h2 { font-size: 18px; }
  .note { margin-bottom: 14px; }
  .analysis-grid { gap: 14px; }
  .live-strip { padding: 14px; }
  .live-settings label { flex: 1 1 100%; justify-content: space-between; }
  .device { grid-template-columns: 1fr; }
  .device .device-seen { text-align: start; }
  .alert-item { grid-template-columns: 4px minmax(0, 1fr); }
  .alert-item .alert-when { grid-column: 2; grid-row: auto; justify-items: start; text-align: start; }
  .head form { width: 100%; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  main.loading .strip:not([hidden]) > :not(.head):not(h2):not(.note) { animation: none; }
}

/* --- print --------------------------------------------------------------------- */

@media print {
  :root { --ground: #fff; --panel: #fff; --panel-2: #fff; --shadow: none; }
  .topbar { position: static; background: none; }
  .controls, .tabs, #tip, .export-bar, button.export, .button-link { display: none !important; }
  /* Every tab on paper - but a section the API said was not measured
     stays hidden, and the export bars stay out. */
  main[data-active] > [data-tab]:not([hidden]):not(.export-bar) { display: block !important; break-inside: avoid; }
  .strip, .panel, .stat { border-color: #bbb; break-inside: avoid; }
}