/* ============================================================
   Vendor Console — Inglis Design System skin
   Light, white-space-driven, Inglis Blue hero. Built on the
   tokens in inglis-tokens.css (loaded first). Square corners,
   hairline borders, documentary restraint.
   ============================================================ */

:root {
  /* --- Compatibility aliases: map the old dashboard tokens onto
         Inglis semantic tokens so every component reads as light + blue. --- */
  --bg:            var(--bg-page);
  --bg-elev:       var(--light-grey);
  --card:          var(--white);
  --card-2:        var(--light-grey);
  --border:        var(--divider);
  --border-strong: var(--mid-grey);

  --ink:      var(--fg-1);
  --cream:    var(--fg-1);
  --ink-soft: var(--fg-2);
  --ink-mute: var(--fg-muted);
  --ink-dim:  var(--mid-grey);

  /* Inglis Blue does the brand work the gold used to do */
  --gold:   var(--inglis-blue);
  --gold-2: var(--inglis-blue-dark);
  --ribbon: var(--inglis-blue);

  --live: var(--positive);
  --warn: var(--race-gold);
  --info: var(--inglis-blue);

  --radius:    var(--radius-sm);
  --radius-sm: 2px;
  --radius-lg: 4px;

  --card-pad: 22px;
  --rail-w: 0px;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }

.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.06; }
.display-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inglis-blue);
  font-weight: 700;
}

/* ---- App shell: top header + content ----------------------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-page);
}

/* ---- Top header (white-on-blue, matches inglis.com.au) ----- */
.hdr {
  background: var(--inglis-blue);
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
  padding: 0 28px;
  flex: none;
}
.hdr-left { display: flex; align-items: center; gap: 34px; }
.hdr-logo { height: 28px; display: block; }
.hdr-nav { display: flex; gap: 4px; }
.hdr-nav button {
  display: flex; align-items: center; gap: 9px;
  color: #fff; opacity: 0.82;
  font-size: 14px; font-weight: 400;
  padding: 8px 16px;
  border-bottom: 2px solid transparent;
  transition: opacity .15s, border-color .15s;
}
.hdr-nav button svg { width: 18px; height: 18px; }
.hdr-nav button:hover { opacity: 1; }
.hdr-nav button.active { opacity: 1; font-weight: 700; border-bottom-color: #fff; }

.hdr-right { display: flex; align-items: center; gap: 18px; }
.realm-switcher {
  display: inline-flex; align-items: center;
  color: #fff; font-size: 12px; font-weight: 700;
}
.realm-switcher select {
  max-width: 180px; margin-left: 8px; padding: 7px 24px 7px 9px;
  border: 1px solid rgba(255,255,255,.45); border-radius: 2px;
  background: rgba(255,255,255,.12); color: #fff;
}
.realm-switcher option { color: var(--fg-1); background: var(--white); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hdr-user {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--inglis-blue);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  flex: none;
}

/* The signed-in name, and the two account controls that hang under it. */
.hdr-account { position: relative; }
.hdr-account-trigger {
  display: flex; align-items: center; gap: 9px;
  padding: 3px 6px 3px 3px; border-radius: 2px;
  color: #fff; font-size: 13px; font-weight: 700;
  opacity: .92; transition: opacity .15s;
}
.hdr-account-trigger:hover, .hdr-account-trigger.active { opacity: 1; }
.hdr-account-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-account-menu {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 40;
  min-width: 200px; padding: 6px 0;
  background: var(--white); border: 1px solid var(--divider); border-radius: 2px;
  box-shadow: 0 10px 28px rgba(16, 24, 48, .18);
}
.hdr-account-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 15px; font-size: 14px; font-weight: 700;
  color: var(--fg-1); text-align: left;
}
.hdr-account-item:hover { background: var(--bg-2, rgba(16, 24, 48, .05)); }

.live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 2px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
}
.live-pill .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.clock {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 17px; color: #fff; font-weight: 700;
  display: flex; align-items: baseline; gap: 7px;
}
.clock .meridian { font-size: 11px; opacity: 0.75; letter-spacing: 0.12em; font-weight: 400; }

/* ---- Sub-bar: page title + breadcrumb + actions ------------ */
.subbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px 18px;
  border-bottom: 1px solid var(--divider);
  background: var(--white);
  flex: none;
}
.subbar .title-block { display: flex; flex-direction: column; gap: 5px; }
.subbar .crumbs { display: flex; gap: 9px; align-items: center; color: var(--fg-muted); font-size: 12px; }
.subbar .crumbs .dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: .5; }
.subbar h1 {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 34px; line-height: 1.02; letter-spacing: -0.01em;
  color: var(--fg-1);
}

/* ---- Content scroll area ----------------------------------- */
.scroll {
  overflow-y: auto;
  padding: 28px 32px 64px;
  flex: 1;
  background: var(--bg-page);
}
.scroll::-webkit-scrollbar { width: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--mid-grey); border-radius: 0; }
.scroll::-webkit-scrollbar-track { background: var(--light-grey); }

/* ---- Cards -------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  padding: var(--card-pad, 22px);
}
.card.flush { padding: 0; }
.card-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.card-title h3 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 24px; letter-spacing: -0.005em; color: var(--inglis-blue);
}
.card-title .more {
  font-size: 13px; font-weight: 700;
  color: var(--inglis-blue);
  display: inline-flex; gap: 6px; align-items: center;
}
.card-title .more:hover { text-decoration: underline; }

/* ---- Buttons ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--fg-1);
  font-size: 14px; font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--light-grey); }
.btn.primary, .btn.gold {
  background: var(--inglis-blue); color: #fff; border-color: var(--inglis-blue);
}
.btn.primary:hover, .btn.gold:hover { background: var(--inglis-blue-dark); border-color: var(--inglis-blue-dark); }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.ghost:hover { background: var(--light-grey); }
.btn.lg { padding: 15px 26px; font-size: 15px; }
.btn.sm { padding: 9px 15px; font-size: 13px; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* ---- Misc --------------------------------------------------- */
.divider { height: 1px; background: var(--divider); margin: 16px 0; }
.row { display: flex; align-items: center; gap: 12px; }
.muted { color: var(--fg-muted); }
.soft { color: var(--fg-2); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; }
.mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---- Tags / badges ----------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  padding: 5px 11px; border-radius: 2px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid var(--border);
  color: var(--fg-2); background: var(--white);
}
.tag.gold { color: var(--inglis-blue); border-color: transparent; background: var(--inglis-blue-tint); }
.tag.live { color: #fff; border-color: transparent; background: var(--positive); }
.tag.warn { color: #fff; border-color: transparent; background: var(--race-gold); }
.tag.ribbon { color: #fff; border-color: transparent; background: var(--inglis-blue); }

/* helper grids */
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Inglis operations console */
.admin-console { max-width: 1280px; margin: 0 auto; }
.admin-console-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.admin-console-head h2 { margin: 4px 0 0; color: var(--inglis-blue); font-family: var(--font-display); font-size: 32px; font-weight: 400; }
.admin-subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--divider); margin-bottom: 20px; overflow-x: auto; }
.admin-subnav button { border: 0; border-bottom: 2px solid transparent; background: none; color: var(--fg-muted); padding: 10px 14px; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.admin-subnav button:hover, .admin-subnav button.active { color: var(--inglis-blue); border-bottom-color: var(--inglis-blue); }
.admin-stat-grid { margin-bottom: 18px; }
.admin-empty { padding: 18px 0; }
.admin-detail-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr); gap: 18px; align-items: start; }
.admin-list-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 4px; border: 0; border-bottom: 1px solid var(--divider); background: transparent; text-align: left; color: var(--fg-2); cursor: pointer; }
.admin-list-row:hover, .admin-list-row.selected { background: var(--light-grey); }
.admin-list-row small { display: block; margin-top: 4px; color: var(--fg-muted); }
.admin-allocation-grid { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 10px; margin: 10px 0 18px; }
.admin-area { display: flex; align-items: center; gap: 8px; border: 1px solid var(--divider); padding: 12px; cursor: pointer; }
.admin-area:has(input:checked) { border-color: var(--inglis-blue); background: var(--inglis-blue-tint); color: var(--inglis-blue); }
.admin-dirty { color: var(--race-gold); font-weight: 700; }
.success-text { color: var(--positive); font-weight: 700; }
.error-text { color: var(--negative); font-weight: 700; }
@media (max-width: 740px) {
  .admin-detail-grid { grid-template-columns: 1fr; }
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-allocation-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
}

/* ---- CCTV feed (video stays dark — a screen within the UI) -- */
.cctv {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, #2b3a4d, #0c1219 85%);
  overflow: hidden;
  border-radius: var(--radius-sm);
  color: #cbd5e1;
}
.cctv::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.05), transparent 32%),
    radial-gradient(circle at 80% 72%, rgba(255,255,255,0.035), transparent 32%);
  pointer-events: none;
}
.cctv .scanline {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: scan 6s linear infinite;
}
@keyframes scan { 0% { top: -2px; } 100% { top: 100%; } }
.cctv .hud {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px 12px;
  font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 10px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.06em;
  pointer-events: none;
}
.cctv .hud .row { justify-content: space-between; display: flex; }
.cctv .hud .rec { color: #fff; display: flex; align-items: center; gap: 6px; }
.cctv .hud .rec .dot { width: 6px; height: 6px; border-radius: 50%; background: #ff5252; animation: pulse 1.6s infinite; }
.cctv .horse-silhouette { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.5; }

/* Sparklines */
.spark { display: block; width: 100%; height: 36px; }

/* Section heading */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin: 0 0 20px;
}
.section-head h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 30px; letter-spacing: -0.005em; color: var(--inglis-blue);
}

/* table */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; padding: 13px 16px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700;
  border-bottom: 2px solid var(--inglis-blue);
}
.table td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--divider);
  font-size: 14.5px; color: var(--fg-2);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--light-grey); }
.table tr.click { cursor: pointer; }

/* big stat */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 38px; line-height: 1; color: var(--inglis-blue); }
.stat .v .delta { font-size: 13px; color: var(--positive); margin-left: 8px; font-weight: 700; }
.stat .v .delta.down { color: var(--negative); }
.stat .l { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); font-weight: 700; }

/* horse card */
.horse-card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .18s, transform .18s;
}
.horse-card:hover { box-shadow: var(--shadow-md); }
.horse-card .photo {
  height: 160px;
  background: var(--inglis-blue-tint);
  position: relative;
  display: grid; place-items: center;
  border-bottom: 1px solid var(--divider);
}
.horse-card .photo .lot {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--inglis-blue);
  padding: 4px 9px;
  color: #fff;
}
.horse-card .photo .pedigree-mark {
  font-family: var(--font-display); font-style: italic;
  font-size: 60px; color: rgba(56,88,167,0.22);
}
.horse-card .body { padding: 16px 18px; }
.horse-card .name { font-family: var(--font-display); font-size: 22px; line-height: 1.1; color: var(--fg-1); }
.horse-card .ped { font-size: 13px; color: var(--fg-muted); margin-top: 4px; }
.horse-card .mini { display: flex; gap: 20px; margin-top: 14px; }
.horse-card .mini .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; color: var(--inglis-blue); }
.horse-card .mini .l { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin-top: 2px; font-weight: 700; }

/* Inspection steps */
.steps { display: flex; gap: 0; margin-bottom: 28px; }
.steps .step {
  flex: 1; padding: 14px 0;
  border-bottom: 2px solid var(--divider);
  color: var(--fg-muted);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.steps .step.active { border-bottom-color: var(--inglis-blue); color: var(--inglis-blue); }
.steps .step.done { border-bottom-color: var(--inglis-blue); color: var(--inglis-blue); }
.steps .step .n {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid; place-items: center;
  font-family: var(--font-num); font-size: 12px;
}

/* Field */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
/* A field in a row may shrink below its input's natural width; without this
   the Inspections Time/Note row ran 7px past a 375px screen and let the page
   pan sideways (measured 24 September 2026). */
.fieldrow > .field { min-width: 0; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--fg-1); }
.field input, .field textarea, .field select {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--inglis-blue);
  box-shadow: 0 0 0 3px var(--inglis-blue-tint);
}
.field textarea { min-height: 100px; resize: vertical; }

/* Score buttons */
.score-row { display: flex; gap: 6px; }
.score-btn {
  flex: 1; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--fg-2);
  font-family: var(--font-num); font-weight: 700; font-size: 17px;
  transition: all .12s;
}
.score-btn:hover { border-color: var(--inglis-blue); color: var(--inglis-blue); }
.score-btn.sel { background: var(--inglis-blue); border-color: var(--inglis-blue); color: #fff; }

/* Channel chip */
.chan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chan {
  padding: 14px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--white);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  transition: border-color .15s, background .15s;
  text-align: left;
}
.chan:hover { border-color: var(--inglis-blue); }
.chan.sel { border-color: var(--inglis-blue); background: var(--inglis-blue-tint); }
.chan .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 22px; color: var(--inglis-blue); }
.chan .name { font-size: 12px; color: var(--fg-2); }

/* segmented */
.seg {
  display: inline-flex; padding: 3px; border-radius: var(--radius-sm);
  background: var(--light-grey); border: 1px solid var(--divider);
}
.seg button {
  padding: 8px 15px;
  font-size: 13px; font-weight: 700;
  color: var(--fg-muted); border-radius: 1px;
  transition: background .15s, color .15s;
}
.seg button.on { background: var(--inglis-blue); color: #fff; }

/* scroll-snap rail */
.h-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.h-rail::-webkit-scrollbar { height: 6px; }
.h-rail::-webkit-scrollbar-thumb { background: var(--mid-grey); }
.h-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* anim — dignified; transform-only so content is NEVER hidden by a stuck/throttled animation */
.fade-in { animation: fadeIn .22s ease both; opacity: 1; }
@keyframes fadeIn { from { transform: translateY(4px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }

/* ---- Hero ---- */
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; align-items: stretch; }
.qstat { flex: 1; padding: 16px 20px; border-right: 1px solid var(--divider); min-width: 150px; }
.qstrip { flex-wrap: wrap; }
.qstrip .qstat:last-child { border-right: 0; }

/* ---- Weather strip ---- */
.wx { display: grid; grid-template-columns: repeat(5, 1fr); }
.wx-day { padding: 2px 18px; }
.wx-day:first-child { padding-left: 0; }
.wx-short { display: none; }
@media (max-width: 720px) {
  .wx { grid-template-columns: repeat(5, 1fr); }
  .wx-day { padding: 0 4px; text-align: center; }
  .wx-day:first-child { padding-left: 4px; }
  .wx-long { display: none; }
  .wx-short { display: inline; }
  .wx-day .eyebrow { font-size: 9.5px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wx-ico { margin: 5px 0 3px !important; display: flex; justify-content: center; }
  .wx-ico svg { width: 20px !important; height: 20px !important; }
  .wx-temps { justify-content: center; gap: 4px !important; }
  .wx-max { font-size: 16px !important; }
  .wx-min { font-size: 12px !important; }
  .wx-text, .wx-meta { display: none; }
}

/* ---- Box snapshot (live-first: 5-min thumbnail, tap for live crop) ---- */
.boxsnap { position: relative; overflow: hidden; background: #14181f; border-radius: var(--radius-sm); }
.livechip { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font-family: var(--font-num); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #fff; background: rgba(200,16,46,0.92); border-radius: 2px; }
.livechip .pulse { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
.snapmeta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 10px; letter-spacing: 0.05em; color: rgba(255,255,255,0.88); background: linear-gradient(transparent, rgba(0,0,0,0.62)); }

/* ---- Toolbar / search ---- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.searchbox { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; width: 280px; max-width: 100%; }

/* ---- Live: lane switcher + player ---- */
.lane-switch { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.lane-switch button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 11px; color: var(--fg-muted); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: border-color .15s, background .15s; }
.lane-switch button .display { color: var(--fg-1); }
.lane-switch button.on { border-color: var(--inglis-blue); background: var(--inglis-blue-tint); color: var(--inglis-blue); }
.lane-switch button.on .display { color: var(--inglis-blue); }
.player { position: relative; aspect-ratio: 16/7; background: #14181f; overflow: hidden; }
.player-hud { position: absolute; inset: 0; padding: 12px 16px; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 11px; color: rgba(255,255,255,0.85); letter-spacing: 0.06em; background: linear-gradient(rgba(0,0,0,0.4), transparent 30%); pointer-events: none; }

/* ---- Box map ---- */
.boxrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.box { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; min-height: 62px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: left; transition: border-color .15s, background .15s; }
.box .bid { font-size: 10px; letter-spacing: 0.1em; font-weight: 700; color: var(--fg-muted); }
.box .blot { font-family: var(--font-display); font-size: 17px; color: var(--fg-1); }
.box .bfree { font-size: 11px; color: var(--fg-muted); }
.box.occ { background: var(--inglis-blue-tint); border-color: var(--inglis-blue); }
.box.occ .bid { color: var(--inglis-blue); }
.box.picked { outline: 2px solid var(--inglis-blue); outline-offset: 1px; }
.box.target { border-style: dashed; border-color: var(--inglis-blue); }
.box.target .bfree { color: var(--inglis-blue); font-weight: 700; }
.box .bactions { display: flex; gap: 10px; font-size: 10.5px; font-weight: 700; color: var(--inglis-blue); }
.box .bactions span:hover { text-decoration: underline; }
.placerow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border-top: 1px solid var(--divider); cursor: pointer; }
.placerow:first-of-type { border-top: 0; }
.placerow[data-picked] { background: var(--inglis-blue-tint); margin: 0 -10px; padding: 10px; width: calc(100% + 20px); }

/* ---- Inspections ---- */
.inspect-grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.horse-card.pick { text-align: left; cursor: pointer; }
.horse-card.pick[data-on] { border-color: var(--inglis-blue); box-shadow: 0 0 0 1px var(--inglis-blue); }
.pickmark { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--inglis-blue); color: #fff; display: grid; place-items: center; }
.ta-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: var(--white); border: 1px solid var(--border); border-top: 0; box-shadow: var(--shadow-md, 0 8px 20px rgba(33,52,95,0.12)); max-height: 260px; overflow-y: auto; }
.ta-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--divider); }
.ta-menu button:last-child { border-bottom: 0; }
.ta-menu button:hover, .ta-menu button.hi { background: var(--inglis-blue-tint); }

/* ---- TV ---- */
.tvpick { padding: 14px 18px; cursor: pointer; min-width: 240px; text-align: left; }
.tvpick[data-on] { border-color: var(--inglis-blue); background: var(--inglis-blue-tint); }
.tvscreen { position: relative; border-radius: var(--radius-sm); border: 1px solid var(--border); aspect-ratio: 16/9; overflow: hidden; display: grid; place-items: center; }
.spinner { width: 26px; height: 26px; margin: 0 auto; border: 2.5px solid rgba(255,255,255,0.25); border-top-color: #fff; border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Admin access grid ---- */
.acc { width: 26px; height: 26px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: #fff; display: inline-grid; place-items: center; transition: all .12s; }
.acc.on { background: var(--inglis-blue); border-color: var(--inglis-blue); }
.acc:disabled { opacity: 0.6; }
.access-table th { padding: 13px 8px; }

/* ---- Mobile shell ---- */
.burger { color: #fff; padding: 8px; display: inline-flex; }
.tabbar { flex: none; display: flex; background: var(--white); border-top: 1px solid var(--divider); padding-bottom: env(safe-area-inset-bottom, 0); }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 8px; font-size: 10.5px; font-weight: 700; color: var(--fg-muted); border-top: 2px solid transparent; }
.tabbar button.active { color: var(--inglis-blue); border-top-color: var(--inglis-blue); }
.sheet-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(33,52,95,0.4); display: flex; align-items: flex-end; }
.sheet { width: 100%; background: var(--white); padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0)); animation: sheetUp .22s ease; }
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
/* People tabs — the section is four lists with different lifetimes, and an
   Owner reading one of them should not be scrolling past the other three. */
.people-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 4px 0 18px; border-bottom: 1px solid var(--divider);
}
.people-tabs button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; margin-bottom: -1px;
  font-size: 13.5px; font-weight: 700; color: var(--fg-muted);
  border-bottom: 2px solid transparent;
}
.people-tabs button:hover { color: var(--fg-1); }
.people-tabs button.active { color: var(--inglis-blue); border-bottom-color: var(--inglis-blue); }
.people-tab-count {
  min-width: 20px; padding: 1px 6px; border-radius: 10px;
  background: rgba(16, 24, 48, .08); color: var(--fg-2);
  font-size: 11.5px; text-align: center;
}
.people-tabs button.active .people-tab-count { background: var(--inglis-blue); color: #fff; }

.sheet-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 4px; font-size: 15.5px; font-weight: 700; color: var(--fg-1); border-top: 1px solid var(--divider); }
.sheet-item.active { color: var(--inglis-blue); }

/* ---- Data-source banners (mock fixtures / unavailable modules) ---- */
.mockbar {
  flex: none;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 32px;
  background: var(--race-gold);
  color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.mockbar .mockbar-list { font-weight: 400; letter-spacing: 0.04em; text-transform: none; opacity: 0.95; }
.modulegate {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--light-grey);
  padding: 34px 30px;
  text-align: center;
}
.modulegate .display { font-size: 26px; color: var(--fg-1); }
.modulegate p { max-width: 460px; margin: 10px auto 0; color: var(--fg-muted); font-size: 13.5px; }
.modulegate .eyebrow { color: var(--fg-muted); }
.mocknote {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 2px;
  background: var(--race-gold); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  /* Once the realm picker and Profile are present, the full destination row
     no longer fits reliably at tablet widths. Keep the identity controls in
     the header and use the same reachable tabs/menu navigation as phones. */
  .hdr { padding: 0 18px; }
  .hdr-left { gap: 18px; }
  .hdr-right { min-width: 0; flex: 1; justify-content: flex-end; gap: 10px; }
  .hdr .live-pill, .hdr .clock { display: none; }
  .realm-switcher { min-width: 0; }
  .realm-switcher select { max-width: 180px; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    box-shadow: 0 -1px 12px rgba(33, 52, 95, 0.12);
  }
  .app.mobile .scroll { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .sheet { max-width: 460px; margin-left: auto; }
  /* iOS Safari zooms into a focused field whose text is under 16px and leaves
     the page zoomed and free to pan once the choice is made. Reported on the
     Inspections page, 24 September 2026. */
  .field input, .field textarea, .field select { font-size: 16px; }
}
@media (max-width: 1000px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .profile-cols { grid-template-columns: 1fr 1fr; }
  .profile-cols > .card { grid-column: span 2 !important; }
}
@media (max-width: 740px) {
  .hdr { height: 56px; padding: 0 16px; }
  /* A phone scrolls the document, not a box inside it. The shell was a 100vh
     flex column with overflow:hidden whose only scroller was .scroll, so the
     browser never collapsed its URL bar -- and 100vh is measured as though
     that bar were already gone, which left the tab bar sitting underneath it.
     Reported 18 September 2026 as "difficult to scroll" and "the bottom nav
     floats behind the url bar"; both symptoms are this one rule. */
  .app { height: auto; min-height: 100vh; overflow: visible; }
  /* dvh tracks the URL bar; vh above is the fallback where it is absent. */
  @supports (min-height: 100dvh) { .app { min-height: 100dvh; } }
  .scroll { flex: none; overflow: visible; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }
  /* The bar is out of flow now, so the page has to reserve its height. */
  .app.mobile .scroll { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }

  /* The header ran 92px past a 390px viewport and the shell's overflow:hidden
     clipped it, so the clock and "Return to Inglis" could not be reached at
     all. Only the realm control and the way back out of act-as belong here on
     a phone; the pill repeats what the realm select already says. */
  .hdr-right { min-width: 0; flex: 1; justify-content: flex-end; gap: 8px; }
  .hdr .live-pill, .hdr .clock { display: none; }
  .realm-switcher { min-width: 0; }
  .realm-switcher select { max-width: 138px; }
  .sheet { max-width: none; }
  .hdr-logo { height: 22px; }
  .mockbar { padding: 6px 16px; font-size: 10px; }
  .subbar { padding: 14px 18px 12px; }
  .subbar h1 { font-size: 26px; }
  .scroll { padding: 18px 16px 40px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .pickgrid { grid-template-columns: 1fr 1fr; }
  .grid.cols-2 { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,0.18); }
  .qstat { min-width: 40%; border-bottom: 1px solid var(--divider); }
  .lane-switch { grid-template-columns: repeat(3, 1fr); }
  .inspect-grid, .tv-grid, .admin-grid, .boxmap-grid { grid-template-columns: 1fr !important; }
  /* Grid and flex children default to min-width:auto, so a wide child (the
     inspection step rail) sizes the track past the viewport and gets clipped.
     Let these tracks shrink to the space actually available. */
  .inspect-grid > *, .tv-grid > *, .admin-grid > *, .boxmap-grid > * { min-width: 0; }
  /* On a narrow phone the note would shrink to a sliver beside the time; let
     it take its own line once the two no longer fit side by side. */
  .fieldrow { flex-wrap: wrap; row-gap: 0; }
  .fieldrow > .field { min-width: 160px; }
  .steps { max-width: 100% !important; }
  .steps .step { min-width: 0; }
  .hide-mobile { display: none !important; }
  .miniwrap { flex-wrap: wrap; gap: 14px !important; }
  .horse-card .mini { flex-wrap: wrap; gap: 12px; }
  .horse-card .mini .v { font-size: 16px; }
  .player { aspect-ratio: 16/10; }
  .table td, .table th { padding: 11px 10px; font-size: 13px; }
  .clock { font-size: 15px; }

  /* Inspections on a phone. Twenty lot chips at two columns pushed the one
     action anybody came for below ten rows of them, and the four-column card
     table wrapped "No result yet" onto three lines for every horse. These sit
     at the end of the block deliberately: the generic .pickgrid and .table
     rules above are the ones being overridden, and equal specificity would
     hand it back to whichever came last. */

  /* The save follows the list instead of sitting under it: on a phone the
     twenty lot chips pushed the only action anybody came for off the screen.
     Sticky rather than fixed, so it belongs to this card and leaves with it,
     and offset by the tab bar's height so the two never sit on top of one
     another. */
  .inspect-actions {
    position: sticky; z-index: 20;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap; gap: 8px 10px; align-items: center;
    margin: 14px calc(var(--card-pad, 22px) * -1) calc(var(--card-pad, 22px) * -1);
    padding: 9px var(--card-pad, 22px) 11px;
    background: var(--white); border-top: 1px solid var(--divider);
  }
  /* Two rows on purpose. The four controls want 317px and a 390px phone
     leaves this card 297, so every attempt at one line either clipped
     "Clear" to "Cle" or let the buttons slide back over it. Wrapping gives
     the save the full width instead, which is what a thumb wants anyway. */
  .inspect-count { display: flex; align-items: center; gap: 8px; flex: none; }
  .inspect-selected { white-space: nowrap; font-size: 12.5px; }
  .inspect-buttons { flex: 1 1 100%; gap: 8px; justify-content: flex-end; }
  .inspect-actions .btn { white-space: nowrap; }
  .inspect-actions .btn.lg { flex: 1; min-height: 46px; }
  .inspect-actions .btn.sm { min-height: 38px; padding-left: 11px; padding-right: 11px; }

  /* Each horse becomes two lines instead of four cramped columns. The labels
     are nouns, never counts, so nothing here can mis-pluralise a number. */
  table.inspect-card-table thead { display: none; }
  table.inspect-card-table, table.inspect-card-table tbody { display: block; }
  table.inspect-card-table tr {
    display: grid; grid-template-columns: 1fr auto; gap: 1px 12px;
    padding: 10px 0; border-top: 1px solid var(--divider);
  }
  table.inspect-card-table td { display: block; padding: 0; border: 0; font-size: 14px; }
  table.inspect-card-table td[data-col="lot"] { grid-area: 1 / 1; font-weight: 700; }
  table.inspect-card-table td[data-col="result"] { grid-area: 1 / 2;
    text-align: right; color: var(--fg-muted); font-size: 13px; }
  table.inspect-card-table td[data-col="inspections"] {
    grid-area: 2 / 1 / 2 / -1; font-size: 12px; color: var(--fg-muted);
  }
}

/* ---- Design canvas (the five-frame overview) ---- */
.canvas-body { position: relative; margin: 0; background: #F2F4F8; min-width: 3340px; min-height: 1020px; }
.frame { position: absolute; background: #fff; box-shadow: 0 10px 30px rgba(33,52,95,0.18); border: 1px solid #d8dde8; }
.frame .label { position: absolute; top: -28px; left: 0; font: 700 12px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #3858A7; }
.frame iframe { display: block; border: 0; width: 100%; height: 100%; }

/* ---- Boot states (before the bootstrap payload lands) ----
   The static bundle mounts before it has any data, so these two states are what
   a vendor sees while the host is answering, and if it never does. A failure is
   shown as a failure: never an empty dashboard that reads as "you have no lots". */
.boot-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 60vh; padding: 40px 24px;
  font: 400 15px/1.6 var(--font-body, system-ui, sans-serif);
  color: var(--fg-2); text-align: center;
}
.boot-state h1 {
  margin: 0; font: 700 22px/1.25 var(--font-display, system-ui, sans-serif); color: var(--fg-1);
}
.boot-state p { margin: 0; max-width: 46ch; }
.boot-state--error h1 { color: var(--negative); }
.boot-state__detail {
  font: 400 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--fg-muted); word-break: break-word;
}

@media (max-width: 740px) {
  .hdr-right { gap: 8px; }
  .realm-switcher select { max-width: 130px; }
}

/* Horse-to-box allocation. The boxes are the control: one tap opens the list of
   horses for that box, so the same gesture works with a mouse, a thumb in a
   barn, or the keyboard. */
.box-run { margin: 18px 0 0; }
.box-run h4 {
  margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--divider);
  font: 400 12px/1.2 var(--font-body, system-ui, sans-serif);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted);
}
.camera-panel.card { padding: 0; background: transparent; border: 0; box-shadow: none; }
.camera-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
/* The gateway's box stills are all 650x750, so the frame takes that shape and a
   still fills it exactly. The picture is letterboxed, never cropped to fill: the
   crop's edges are where a horse stands against a wall. */
.camera-grid--boxes { --camera-aspect-ratio: 13 / 15; }
.camera-tile { min-width: 0; overflow: hidden; border: 1px solid var(--border); background: var(--white); border-radius: var(--radius-lg); }
.camera-heading { padding: 12px 14px; }
.camera-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.camera-title h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.camera-box-label { flex-shrink: 0; font-size: 12px; color: var(--ink-mute); }
.camera-lot { margin-top: 4px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.camera-lot p { margin: 0; }
.camera-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; }
.camera-tabs .btn { min-height: 44px; white-space: normal; }
.camera-tabs .btn[aria-pressed="true"] { background: var(--inglis-blue); color: #fff; border-color: var(--inglis-blue); }
.camera-picture { display: block; width: 100%; padding: 0; border: 0; background: #15181d;
  color: #fff; aspect-ratio: var(--camera-aspect-ratio, 16 / 9); overflow: hidden; cursor: pointer; }
.camera-picture img, .camera-picture video { display: block; width: 100%; height: 100%;
  aspect-ratio: var(--camera-aspect-ratio, 16 / 9); object-fit: contain; pointer-events: none; }
.camera-picture:focus-visible { outline: 3px solid var(--inglis-blue); outline-offset: 3px; }
.camera-preview-stale { color: #885400; font-weight: 600; }
.camera-placeholder { display: grid; place-items: center; height: 100%; font: inherit; }
.camera-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
  padding: 10px 14px; font-size: 12px; line-height: 1.5; color: var(--ink-mute); }
.camera-fullscreen { border: 1px solid var(--border); background: var(--white); color: var(--inglis-blue);
  min-height: 44px; padding: 8px 12px; font: inherit; cursor: pointer; border-radius: var(--radius-sm); }
.camera-picture:fullscreen, .camera-picture.camera-expanded { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; outline: none; }
.camera-picture.camera-expanded { position: fixed; inset: 0; z-index: 2000; margin: 0; }
.camera-picture:fullscreen video, .camera-picture.camera-expanded video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.camera-breeding { color: var(--ink); }
.camera-session { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; font-size: 13px; }
.camera-session .btn { min-height: 44px; }
@media (max-width: 740px) {
  .camera-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .camera-heading { padding: 11px 12px; }
  .camera-caption { padding: 9px 12px; }
}
/* 156px is 60% of the former 260px box preview width. */
.camera-grid--boxes { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }
.camera-grid--boxes .camera-heading { padding: 8px; height: 112px; box-sizing: border-box; overflow: hidden; }
.camera-grid--boxes .camera-title { gap: 4px; flex-wrap: nowrap; height: 20px; }
.camera-grid--boxes .camera-title h3 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camera-description { margin: 2px 0 0; height: 17px; font-size: 12px; line-height: 17px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camera-grid--boxes .camera-breeding { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 33px; }
.camera-vendor { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camera-grid--boxes .camera-lot { margin-top: 3px; font-size: 12px; line-height: 1.35; }
.camera-grid--boxes .camera-lot p { font-size: inherit; line-height: inherit; }
.camera-grid--boxes .camera-caption { align-items: center; padding: 6px 8px; gap: 4px 8px; font-size: 11px; }
@media (max-width: 740px) {
  .camera-grid--boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.camera-popup { width: min(500px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto;
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.camera-popup::backdrop { background: rgb(0 0 0 / 65%); }
.camera-popup-content { padding: 20px; }
.camera-popup-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.camera-popup-header h2 { margin: 0; font-size: 22px; }
.camera-popup .btn { min-height: 44px; }
/* A live box stream is a rectangle around that box's crop, landscape for a box in
   the middle of a camera and portrait at its edge, so the pop-up takes the
   stream's own shape rather than forcing one frame on every box. */
.camera-popup-streams { --camera-aspect-ratio: auto; display: flex; align-items: start; justify-content: center; gap: 20px; }
.camera-popup-streams .camera-tile { flex: 0 1 auto; width: 100%; }
.camera-popup-streams .camera-picture img, .camera-popup-streams .camera-picture video {
  height: auto; max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); }
.camera-popup-streams .camera-heading { padding: 10px 12px; height: auto; overflow: visible; }
.camera-popup-streams .camera-title { height: auto; }
.camera-popup-streams .camera-description, .camera-popup-streams .camera-vendor { height: auto; white-space: normal; overflow: visible; }
.camera-popup-streams .camera-breeding { display: block; height: auto; overflow: visible; }
.camera-popup-streams .camera-title h3 { font-size: 18px; }
.camera-popup-streams .camera-caption { padding: 8px 12px; }
@media (max-width: 740px) {
  .camera-popup { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .camera-popup-content { padding: 12px; }
  .camera-popup-header h2 { font-size: 18px; }
  .camera-popup-streams { flex-direction: column; align-items: center; }
  .camera-popup-streams .camera-tile { flex: none; width: 100%; }
}

.box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.box-cell-wrap { position: relative; }
.box-cell {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  width: 100%; height: 100%; min-height: 108px; padding: 34px 12px 11px;
  background: var(--white); border: 1px solid var(--border);
  font: inherit; color: var(--fg-1); text-align: left; cursor: pointer;
}
.box-cell.empty { border-style: dashed; color: var(--fg-muted); }
.box-cell.feed { background: var(--light-grey); color: var(--fg-muted); cursor: default; }
.box-cell.open { border: 2px solid var(--inglis-blue); background: var(--inglis-blue-tint); }
.box-cell:focus-visible { outline: 2px solid var(--inglis-blue); outline-offset: 2px; }
.box-tag {
  position: absolute; top: 0; left: 0; padding: 3px 7px;
  font-size: 12px; letter-spacing: .06em; background: var(--inglis-blue); color: var(--white);
}
.box-cell.empty .box-tag, .box-cell.feed .box-tag { background: var(--light-grey); color: var(--fg-2); }
.box-lot { font-size: 13px; }
.box-picker {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  display: flex; flex-direction: column; width: 320px; max-width: 92vw; max-height: 60vh;
  overflow-y: auto; background: var(--white); border: 1px solid var(--warm-grey);
  box-shadow: var(--shadow-lg, 0 8px 28px rgba(33,52,95,0.14));
}
.box-picker > * { flex-shrink: 0; }
.box-picker-head {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 10px;
  border-bottom: 1px solid var(--divider);
}
.box-picker-find { padding: 12px 16px 8px; }
.box-picker-empty { padding: 10px 16px; }
.box-picker-foot { padding: 11px 16px; border-top: 1px solid var(--divider); }
.box-option {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 11px 16px;
  background: var(--white); border: 0; border-top: 1px solid var(--divider);
  font: inherit; color: var(--fg-1); text-align: left; cursor: pointer;
}
.box-option:hover { background: var(--bg-tint); }
.lot-identity { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.box-option { flex-direction: column; align-items: stretch; gap: 5px; }
.box-option-location { font-size: 11px; }
.box-option:focus-visible { outline: 2px solid var(--inglis-blue); outline-offset: -2px; }

@media (max-width: 640px) {
  .box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* On a phone the list is a sheet at the bottom of the screen, within reach. */
  .box-picker { position: fixed; z-index: 80; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: 62vh; max-height: 62dvh; }
}

/* Lot contacts. A list of people, not a grid: each row names one person, the
   horses they stand behind, and the three things a vendor can do about them.
   Nothing here sends anything, so nothing here looks like a send button. */
.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-row {
  padding: 14px 0; border-top: 1px solid var(--divider);
  display: flex; flex-direction: column; gap: 8px;
}
.contact-row:first-child { border-top: 0; }
.contact-person { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.contact-person .muted { font-size: 13px; overflow-wrap: anywhere; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-access {
  padding: 3px 7px; border: 1px solid var(--divider); border-radius: 999px;
  background: var(--inglis-blue-tint); color: var(--inglis-blue); font-size: 11px; font-weight: 700;
}
.contact-form, .contact-horses, .contact-confirm {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 4px; padding: 14px 16px;
  background: var(--bg-tint, var(--light-grey)); border: 1px solid var(--divider);
}
.contact-form h4, .contact-horses h4 { margin: 0; font-size: 14px; }
.contact-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.contact-form input {
  min-height: 44px; padding: 9px 11px;
  background: var(--white); border: 1px solid var(--border); font: inherit; color: var(--fg-1);
}
.contact-form input:focus-visible { outline: 2px solid var(--inglis-blue); outline-offset: -1px; }
.contact-horse { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; }
.contact-horse input { width: 18px; height: 18px; }
.contact-confirm p { margin: 0; }

/* People and account Profile. Access stays person-specific: each staff card
   owns its own section controls, while owners show the complete read-only set. */
.people-view, .account-profile { max-width: 1280px; margin: 0 auto; }
.people-layout, .account-profile-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 20px; align-items: start;
}
.people-layout > *, .account-profile-grid > * { min-width: 0; }
.people-toolbar, .profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.people-list { display: flex; flex-direction: column; }
.people-person { padding: 16px 0; border-top: 1px solid var(--divider); }
.people-person:first-child { border-top: 0; }
.people-person-head, .people-invite-head, .profile-membership-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
}
.people-person-head > div, .people-invite-head > div, .profile-membership-head > div {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.people-person-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.people-person small, .people-pending small, .people-link-row small,
.profile-membership-head span, .profile-form small,
.profile-preference summary small { display: block; color: var(--fg-muted); font-size: 12px; overflow-wrap: anywhere; }
.people-section-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin: 14px 0;
}
.people-section-grid label {
  display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 10px;
  border: 1px solid var(--divider); background: var(--white); font-size: 13px; cursor: pointer;
}
.people-section-grid label:has(input:checked) { border-color: var(--inglis-blue); background: var(--inglis-blue-tint); }
.people-section-grid label[data-readonly="1"] { cursor: default; }
.people-section-grid input { width: 18px; height: 18px; flex: none; }
.people-section-tags {
  display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0;
}
.people-confirm, .people-invite, .people-share {
  display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding: 16px;
  border: 1px solid var(--divider); background: var(--bg-tint, var(--light-grey));
}
.people-confirm p, .people-invite h4, .people-pending h4, .people-links h4 { margin: 0; }
/* Black on white whatever the page around it, so a camera reads it. */
.people-qr { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.people-qr .qr-code { display: block; max-width: 100%; height: auto; background: #fff; border: 1px solid var(--divider); }
.people-invite > label, .profile-form > label {
  display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700;
}
.people-invite select, .people-share input, .profile-form input {
  width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--border);
  background: var(--white); color: var(--fg-1); font: inherit;
}
.people-invite fieldset { margin: 0; padding: 0; border: 0; }
.people-invite legend { padding: 0; font-size: 13px; font-weight: 700; }
.people-share label { font-size: 12px; font-weight: 700; }
.people-pending, .people-links { margin-top: 18px; }
.people-pending > div, .people-link-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--divider);
}
/* A link row carries two actions as well as its name and status, so it wraps
   rather than squeezing them; the pending-invitation row has neither. */
.people-link-row { flex-wrap: wrap; }
.people-link-row > span:first-child { flex: 1 1 200px; }
.people-pending > div > span, .people-link-row > span { min-width: 0; overflow-wrap: anywhere; }
.people-links > .caption { margin: 6px 0 0; }
/* A live link's own section editor takes the row's full width below its name
   and actions (issue #31). */
.people-link-sections { flex: 1 1 100%; display: grid; gap: 8px; justify-items: start; }

.profile-form { display: flex; flex-direction: column; gap: 16px; }
.profile-form input[readonly], .profile-form input:disabled { background: var(--light-grey); color: var(--fg-muted); }
.profile-actions { margin: 0; }
.profile-memberships { display: flex; flex-direction: column; gap: 12px; }
.profile-membership { padding: 14px; border: 1px solid var(--divider); background: var(--white); }
.profile-sections { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.profile-preferences-grid { display: grid; gap: 12px; margin-top: 20px; }
.profile-preference { border: 1px solid var(--divider); background: var(--white); }
.profile-preference > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; padding: 12px 16px; cursor: pointer; list-style: none;
}
.profile-preference > summary::-webkit-details-marker { display: none; }
.profile-preference > summary > span:first-child { min-width: 0; }
.profile-disclosure { color: var(--inglis-blue); font-size: 12px; font-weight: 700; }
.profile-preference > .card { border: 0; border-top: 1px solid var(--divider); box-shadow: none; }
.notification-prompt {
  margin-bottom: 14px; padding: 12px; border: 1px solid var(--race-gold); background: #fff9e9;
}
.notification-prompt p { margin: 5px 0 10px; }
.notification-prompt-wrap {
  position: fixed; z-index: 100; inset: 0; display: grid; place-items: center;
  padding: 20px; background: rgba(19, 35, 67, .58);
}
.notification-prompt-dialog {
  width: min(520px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow-y: auto; padding: 26px; background: var(--white); box-shadow: 0 18px 60px rgba(18, 33, 65, .28);
}
.notification-prompt-dialog h2 { margin: 5px 0 8px; color: var(--inglis-blue); font-family: var(--font-display); font-weight: 400; }
.notification-prompt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.report-day-change {
  flex: 1 1 100%; padding: 12px; border: 1px solid var(--race-gold);
  background: #fff9e9; color: var(--fg-1);
}
.report-day-change p { margin: 0 0 10px; }

@media (max-width: 740px) {
  .people-layout, .account-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .people-person-head, .people-invite-head { flex-direction: column; }
  .people-section-grid { grid-template-columns: minmax(0, 1fr); }
  .people-person > .btn { width: 100%; min-height: 44px; justify-content: center; }
  .contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .contact-actions .btn { width: 100%; min-height: 44px; white-space: normal; }
  .people-person-head > .btn, .people-invite-head > .btn, .people-invite > .btn,
  .people-share > .btn, .profile-actions > .btn { width: 100%; justify-content: center; min-height: 44px; }
  .people-link-row > .btn { flex: 1 1 140px; justify-content: center; min-height: 44px; }
  .people-link-sections { justify-items: stretch; }
  .people-link-sections > .btn { justify-content: center; min-height: 44px; }
  .notification-prompt-wrap { align-items: end; padding: 0; }
  .notification-prompt-dialog { width: 100%; max-height: 88vh; max-height: 88dvh; padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .notification-prompt-actions .btn { flex: 1 1 180px; min-height: 44px; justify-content: center; }
}

/* Inspections: a horse is named by its breeding, not only by its number. A
   buyer in a barn says "the Snitzel colt", so the picker is a list of named
   horses rather than a grid of numbered chips. auto-fill does the responsive
   work: one column on a phone, as many as fit a sire and a dam elsewhere. */
.lotpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.lotpick-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 52px; padding: 9px 12px; text-align: left; cursor: pointer;
}
.lotpick-number { font-size: 14px; font-weight: 700; }
.lotpick-number .muted { font-weight: 400; }
.home-view { display: flex; flex-direction: column; gap: 20px; }
.book-add, .book-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--divider); }
.book-add label, .book-row > div:first-child { flex: 1; min-width: 180px; }
.book-editor { width: 100%; display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 12px; background: var(--light-grey); }
.book-editor label { flex: 1 1 240px; }
.book-editor input, .book-editor select, .book-add input { width: 100%; min-height: 44px; display: block; margin-top: 6px; }
.book-editor > [role="region"] { flex-basis: 100%; }
.inspect-views { flex-wrap: wrap; }
.home-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.home-hero { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--inglis-blue); color: white; }
.home-hero > div { padding: 28px; min-width: 0; }
.home-hero h2 { color: white; font-size: clamp(28px, 4vw, 42px); margin: 10px 0; }
.home-hero p, .home-hero .eyebrow, .home-hero .muted { color: white; }
.home-next { background: var(--inglis-blue-dark); }
.home-next p { margin: 8px 0 14px; }
.home-ring-time { font-size: 42px; font-family: var(--font-display); margin-top: 8px; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.home-actions .btn { background: white; color: var(--inglis-blue); min-height: 44px; }
.home-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--divider); background: white; }
.home-summary > div { display: flex; flex-direction: column; gap: 7px; padding: 18px; min-width: 0; }
.home-summary > div + div { border-left: 1px solid var(--divider); }
.home-summary strong { font-size: 30px; color: var(--inglis-blue); font-weight: 500; }
.home-summary p { font-size: 12px; }
.home-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.home-columns > * { min-width: 0; }
.home-ring-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--divider); }
.home-ring-row > div { display: flex; flex-direction: column; gap: 5px; }
.home-ring-row time { font-size: 20px; color: var(--inglis-blue); }
.home-inspection { display: flex; flex-direction: column; gap: 5px; padding: 14px 0; border-top: 1px solid var(--divider); overflow-wrap: anywhere; }
.home-repository { border: 0; }
@media (max-width: 740px) {
  .home-hero, .home-columns { grid-template-columns: minmax(0, 1fr); }
  .home-hero > div { padding: 20px; }
  .home-summary > div { padding: 12px 9px; }
  .home-summary strong { font-size: 25px; }
  .home-summary .caption { font-size: 11px; }
  .home-ring-row { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
  .home-actions .btn { flex: 1 1 140px; justify-content: center; }
  .box-picker-foot { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}
.lotpick-breeding { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
/* Tapped reads as filled, not as a one-pixel change of border. */
.horse-card.pick[data-on] { background: var(--inglis-blue-tint); }
.card-breeding {
  display: block; margin-top: 1px;
  font-weight: 400; font-size: 12px; line-height: 1.3; color: var(--fg-muted);
}

@media (max-width: 640px) {
  /* A thumb in a barn: the row's three actions stack rather than wrap oddly. */
  .contact-form, .contact-horses, .contact-confirm { padding: 12px; }
}
/* The parade board: one row per horse on a card, the tick or who ticked it
   sitting flush right so a second person reads status without hunting. */
.parade-lots{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.parade-lot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--divider);border-radius:4px;flex-wrap:wrap}
.parade-lot[data-seen]{background:var(--inglis-blue-tint)}
.parade-seen{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.parade-seen small{color:#63717c;font-size:11px}
/* Parade counts remain below the picture and never cover the live video. */
.activity-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:16px 0;color:var(--ink,#263647)}
.activity-toolbar>div{flex:1;min-width:210px}.activity-toolbar p{font-size:12px;margin:4px 0;color:#65717b}
.activity-toolbar label{display:flex;gap:8px;align-items:center;font-size:13px}.activity-toolbar input{min-height:40px;max-width:100%;padding:7px;border:1px solid #d7dce2;border-radius:4px;background:#fff;color:inherit}
.parade-activity{padding:14px;border-top:1px solid #e5e8ec;min-width:0}.activity-heading{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:13px}.activity-heading>span{font-size:11px;color:#63717c}
.activity-peaks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.activity-peaks>div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px}.activity-peaks span,.activity-peaks small{font-size:11px;color:#63717c}.activity-peaks strong{font-size:24px;font-weight:500;grid-row:span 2}.activity-peaks small{grid-column:1}
.activity-legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.activity-legend>span{font-size:10px;color:#63717c}.activity-legend button{background:transparent;border:1px solid currentColor;border-radius:4px;padding:6px 10px;min-height:36px;font:inherit;font-size:12px}.activity-legend button[aria-pressed="false"]{opacity:.45}
.activity-people{color:#395b9b}.activity-horses{color:#9c5225}.activity-chart{width:100%;height:auto;display:block;margin-top:8px;overflow:visible}.activity-chart text{font-size:11px;fill:#65717b}.activity-gridline{stroke:#e4e8ed;stroke-width:1}
.activity-footnote{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:10px;color:#63717c}.activity-footnote button{border:0;background:transparent;color:#395b9b;min-height:36px;font:inherit;text-decoration:underline}.activity-note{font-size:10px;line-height:1.5;color:#63717c;margin:4px 0 0}.activity-empty{font-size:12px;padding:18px 0;color:#63717c}.activity-readings{max-height:220px;overflow:auto;font-size:12px}.activity-readings table{width:100%;border-collapse:collapse}.activity-readings td,.activity-readings th{padding:6px;text-align:left;border-bottom:1px solid #e5e8ec}.activity-readings caption{padding:8px;text-align:left}

/* ============== Feedback ==============
   A pill in the bottom-right corner on every screen, and the dialog behind it.
   z-index sits above the mobile tab bar (50) and the menu sheet (60) but below
   the notification prompt (100), which is the one thing that must be answered
   before anything else on the screen is. On compact widths the pill lifts clear
   of the tab bar, which is fixed to the same corner. */
.feedback-pill {
  position: fixed; z-index: 70; right: 20px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 17px; border: 0; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: #fff; background: var(--inglis-blue); cursor: pointer;
  box-shadow: 0 6px 22px rgba(18, 33, 65, .26);
}
.feedback-pill:hover { background: var(--inglis-blue-dark); }
.feedback-wrap {
  position: fixed; z-index: 70; inset: 0; display: grid; place-items: center;
  padding: 20px; background: rgba(19, 35, 67, .58);
}
.feedback-dialog {
  width: min(540px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow-y: auto; padding: 26px; background: var(--white);
  box-shadow: 0 18px 60px rgba(18, 33, 65, .28);
}
.feedback-dialog h2 {
  margin: 5px 0 8px; color: var(--inglis-blue);
  font-family: var(--font-display); font-weight: 400;
}
.feedback-dialog p { margin: 5px 0 14px; }
.feedback-close { color: var(--fg-2); background: transparent; border: 0; cursor: pointer; padding: 2px; }
.feedback-close:disabled { opacity: .45; pointer-events: none; }
.feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.feedback-count { margin-left: auto; color: var(--fg-muted); }

@media (max-width: 740px) {
  .feedback-wrap { align-items: end; padding: 0; }
  .feedback-dialog {
    width: 100%; max-height: 88vh; max-height: 88dvh;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  }
  .feedback-actions .btn { flex: 1 1 180px; min-height: 44px; justify-content: center; }
  .feedback-count { flex: 1 1 100%; margin-left: 0; text-align: right; }
}

/* Stable horses (spec S3): photo cards, two to a row on a phone. */
.stable-tab { display: flex; flex-direction: column; gap: 14px; }
.stable-tab > .seg { align-self: flex-start; }
.horse-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.horse-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--divider); overflow: hidden; }
.horse-card-open {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 0;
  border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.horse-card-open > .lot-identity, .horse-card-open > .tag { margin: 0 12px; }
/* The card is a flex column: a tag keeps its own width rather than the card's. */
.horse-card-open > .tag { align-self: flex-start; }
.horse-card-open:focus-visible { outline: 2px solid var(--inglis-blue); outline-offset: -2px; }
.horse-card-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--light-grey); }
.horse-card-photo-open { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.horse-card-photo-open:focus-visible { outline: 2px solid var(--inglis-blue); outline-offset: -2px; }
.horse-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Paging a card's photos: arrows over the photo's edges, and a counter. */
.horse-card-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 44px;
  border: 0; background: rgba(0, 0, 0, .45); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.horse-card-nav.prev { left: 0; }
.horse-card-nav.next { right: 0; }
.horse-card-nav:disabled { opacity: .25; cursor: default; }
.horse-card-nav:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.horse-card-count { position: absolute; right: 8px; bottom: 8px; padding: 1px 7px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; }
.horse-card-nophoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--fg-muted); }
.horse-card-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; }
.horse-card-foot { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.box-badge {
  align-self: flex-start; min-height: 32px; padding: 4px 10px;
  border: 1px solid var(--inglis-blue); background: var(--white); color: var(--inglis-blue);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.box-badge.static { border-color: var(--divider); color: var(--fg-2); cursor: default; }
.horse-ticks { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.tick.no { color: var(--fg-muted); }
.tick.unknown { color: #8a5a00; }
/* The box list: a sheet over the page, at the bottom on a phone. */
.box-chooser-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(33, 52, 95, .28); }
.box-picker.box-chooser { position: relative; inset: auto; width: 360px; max-width: 92vw; max-height: 70vh; }
.box-chooser-group { margin: 0; padding: 10px 16px 4px; }
@media (max-width: 640px) {
  .horse-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .box-chooser-backdrop { align-items: flex-end; }
  .box-picker.box-chooser { width: 100%; max-width: none; max-height: 70dvh; }
}

/* Stable horse page (spec S5): one scrolling page. */
.stable-horse { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.stable-horse-head h2 { margin: 0 0 4px; }
.stable-horse h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.stable-gallery img { display: block; width: 100%; max-height: 60vh; object-fit: contain; background: var(--light-grey); }
.stable-gallery-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
/* One in-page player for the catalogue's videos, with a button per video. */
.stable-video { margin-top: 12px; }
.stable-video video { display: block; width: 100%; max-height: 60vh; background: #000; }
.stable-video-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lodged-list { margin: 0; padding: 0; list-style: none; }
.lodged-list li { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid var(--divider); }
.stable-horse-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stable-facts { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.stable-facts dt { color: var(--fg-muted); }
.stable-facts dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
/* A lot's result, as inglis.com.au's lot page shows it (owner, 26 Sep 2026). */
.lot-withdrawn {
  margin: 0; padding: 12px 16px; border-radius: 6px; background: var(--negative); color: #fff;
  font-size: 18px; font-weight: 700; text-align: center;
}
.sale-result { padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--inglis-blue-tint); }
.stable-horse .sale-result h3 { color: var(--inglis-blue); }
.sale-result dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; margin: 0; }
.sale-result dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.sale-result dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.horse-card-result { margin: 0 12px; font-size: 13px; font-weight: 700; }
.horse-card-result.sold { color: var(--positive); }
.horse-card-result.passed-in { color: var(--fg-muted); }
.tag.withdrawn { color: #fff; border-color: transparent; background: var(--negative); }
.horse-card-open > .tag.withdrawn { margin: 0 12px; }

/* Stats X-ray views (spec 2026-09-24 Part 2): the Repository portal's lots list
   and lot page. On a phone each table becomes stacked rows, one card per row
   with every cell carrying its header as a label, so nothing scrolls sideways. */
.xray-lots-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 18px; border-bottom: 1px solid var(--divider); }
.xray-lots-head .caption { margin: 0; flex: 1 1 320px; }
.xray-lots-head .searchbox { width: 220px; }
.xray-lots-head .searchbox input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-size: 16px; }
.xray-lots .lot-detail-link { padding: 0; border: 0; background: none; font: inherit; font-family: var(--font-display); font-size: 16px; color: var(--inglis-blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.xray-lots tr.quiet td { color: var(--fg-muted); }
.qstat-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); font-weight: 700; }
/* A figure never breaks across lines: "8m 45s" on two lines at 359px read as
   two numbers (dev, 24 Sep 2026). On a phone the tile is ~40% wide, so the
   figure steps down rather than wrapping. */
.stat-tile-value { margin-top: 6px; font-size: 34px; color: var(--inglis-blue); white-space: nowrap; }
/* A date is wider than a phone tile; it may wrap between its words. */
.stat-tile-value.small { font-size: 18px; white-space: normal; }
@media (max-width: 640px) {
  .stat-tile-value { font-size: 26px; }
  .stat-tile-value.small { font-size: 16px; }
}
.xray-lot:focus { outline: none; }
.xray-by-vet, .xray-activity { margin-top: 22px; }
.xray-by-vet h3, .xray-activity h3, .vet-actions h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.vet-toggle { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--inglis-blue); text-align: left; cursor: pointer; }
.vet-toggle::after { content: " ▸"; font-size: 11px; }
.vet-toggle[aria-expanded="true"]::after { content: " ▾"; }
.vet-toggle:focus-visible { outline: 2px solid var(--inglis-blue); outline-offset: 2px; }
.vet-actions-row > td { background: var(--light-grey); }
.table tr.vet-actions-row:hover td { background: var(--light-grey); }
.vet-actions { padding: 6px 0 8px 18px; }
.vet-actions .table { background: var(--white); }
@media (max-width: 640px) {
  .xray-lots-head .searchbox { width: 100%; }
  .stack-table thead { display: none; }
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
  .stack-table tr { padding: 8px 0; border-bottom: 1px solid var(--divider); }
  .stack-table tr:last-child { border-bottom: 0; }
  .stack-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 12px; border-bottom: 0; text-align: right !important; }
  .stack-table td::before { content: attr(data-label); flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); text-align: left; }
  .stack-table td.stack-full { display: block; text-align: left !important; }
  .stack-table td.stack-full::before { content: none; }
  .vet-actions { padding: 6px 0 4px; }
}

/* Stats in two tabs: the segmented control sits at the start of the page, as
   Stable's Horses | Boxes does, and appears only when both tabs can show. */
.stats-tabs > .seg { margin-bottom: 4px; }
.insp-activity tr.voided td { color: var(--fg-muted); }
.insp-activity tr.voided .tag { margin-left: 6px; }
.insp-by-inspector, .insp-activity { margin-top: 22px; }
.insp-by-inspector h3, .insp-activity h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.insp-lot:focus { outline: none; }

/* Stats: a vendor's horses against the whole sale (DECISIONS.md, 25 Sep 2026).
   One hue, stepped from solid Inglis Blue down to a dashed outline; every chip
   carries its words, so no band is told apart by colour alone. A stale band is
   greyed with the time it was last right, never hidden. */
.band-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 2px; border: 1px solid var(--border); font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.band-chip.large { padding: 6px 12px; font-size: 15px; }
.band-top10 { color: var(--white); background: var(--inglis-blue); border-color: var(--inglis-blue); }
.band-top25 { color: var(--inglis-blue-darker); background: var(--inglis-blue-tint); border-color: var(--inglis-blue); }
.band-tophalf { color: var(--inglis-blue); background: var(--white); border-color: var(--inglis-blue); }
.band-some { color: var(--fg-2); background: var(--white); border-color: var(--mid-grey); }
.band-none { color: var(--fg-muted); background: var(--light-grey); border-color: var(--hairline); }
.band-noxray { color: var(--fg-muted); background: var(--white); border: 1px dashed var(--mid-grey); }
.band-too_early { color: var(--fg-muted); background: var(--white); border-color: var(--hairline); }
.band-chip.stale { color: var(--fg-muted); background: var(--light-grey); border-color: var(--mid-grey); }
.standing-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.standing-up, .standing-new { font-size: 12px; font-weight: 700; color: var(--positive); }
.standing-was { font-size: 12px; color: var(--fg-muted); }
.standing-vets { font-size: 13px; color: var(--fg-2); }
.xray-lots th.standing-col { color: var(--inglis-blue); }
.standing-head { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--divider); }
.standing-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.standing-controls .caption { margin: 0; }
.standing-note { margin: 0; padding: 9px 12px; border-radius: 2px; font-size: 13px; line-height: 1.45; color: var(--inglis-blue-darker); background: var(--inglis-blue-tint); }
.standing-note.action { color: var(--fg-2); background: var(--white); border: 1px dashed var(--mid-grey); }
.by-band { display: flex; flex-direction: column; }
.by-band-rung { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--divider); }
.by-band-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.by-band-meaning { flex-basis: 100%; font-size: 12px; color: var(--fg-muted); }
.by-band-lots { display: flex; flex-wrap: wrap; gap: 8px; }
.by-band-lot { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--mid-grey); border-radius: 2px; background: var(--white); color: var(--inglis-blue-darker); text-align: left; cursor: pointer; }
.by-band-lot:hover { border-color: var(--inglis-blue); }
.by-band-lot:focus-visible { outline: 2px solid var(--inglis-blue); outline-offset: 2px; }
.by-band-number { font-family: var(--font-display); font-size: 17px; line-height: 1.1; }
.by-band-horse { font-size: 12px; color: var(--fg-muted); }
.band-legend { padding: 12px 18px 16px; border-top: 1px solid var(--divider); }
.band-legend-toggle { padding: 6px 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--inglis-blue); cursor: pointer; }
.band-legend-toggle::after { content: " ▸"; font-size: 11px; }
.band-legend-toggle[aria-expanded="true"]::after { content: " ▾"; }
.band-legend-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 28px; margin-top: 8px; }
.band-legend-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.band-legend-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-2); }
.band-legend-list .band-chip { min-width: 124px; justify-content: center; }
.band-legend-notes p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.standing-panel { margin: 0 0 18px; border: 1px solid var(--inglis-blue); border-radius: 2px; }
.standing-panel .band-legend { border-top: 1px solid var(--divider); }
.standing-panel-main { display: flex; flex-wrap: wrap; gap: 16px 28px; padding: 18px 20px; }
.standing-panel-band { flex: 1 1 360px; display: flex; flex-direction: column; gap: 8px; }
.standing-panel-band .caption { margin: 0; }
.standing-panel-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; }
.standing-sentence { margin: 0; font-size: 16px; line-height: 1.5; color: var(--fg-1); }
.standing-panel-since { flex: 0 1 300px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 2px; background: var(--light-grey); font-size: 14px; line-height: 1.45; }
.standing-history { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 16px; border-top: 1px solid var(--divider); }
.standing-history ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.standing-history li { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 12px; }
@media (max-width: 640px) {
  .stack-table td.standing-col .standing-cell { justify-content: flex-end; }
  .band-legend-body { grid-template-columns: minmax(0, 1fr); }
  .standing-history ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .standing-panel-since { flex-basis: 100%; }
}
/* Inglis admin: Repository stats, each horse against the whole sale. */
.admin-standing .card-title { padding: 18px 18px 0; }
.admin-standing-pick { display: inline-flex; align-items: center; gap: 8px; }
.admin-standing-pick select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); font: inherit; font-size: 14px; max-width: 260px; }
.admin-standing-panel > td { background: var(--light-grey); padding: 12px 16px; }
.table tr.admin-standing-panel:hover td { background: var(--light-grey); }
.admin-standing-panel .standing-panel { margin: 0; background: var(--white); }
/* Inglis admin: a past sale replayed from packaged history. */
.admin-sale-pick { margin: 0 0 12px; }
.admin-history .history-summary { margin-bottom: 8px; }
.admin-history .history-summary caption { text-align: left; padding: 12px 18px 4px; }
.stats-vendor-pick { margin-top: 4px; }