/* FlightDesk — readable working surfaces, retained evidence and generous touch controls.
   Legacy surface variable names are retained so every operational screen shares the theme. */
:root {
  color-scheme: light;
  --navy: #f5f4f0; --navy-2: #eeede9; --panel: #ffffff;
  --text: #20231f; --muted: #656961; --cream: #32382e;
  --orange: #a94c19; --orange-dim: #ca632b; --action: #ed8847;
  --green: #337052; --amber: #87570f; --red: #ab343b; --info: #356779;
  --line: #d8dad2; --divider: #e4e5de; --press: #e9ebe3;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --orange-soft: rgba(169,76,25,.08); --focus-ring: 0 0 0 3px rgba(169,76,25,.14);
  --shadow-elevated: 0 12px 36px rgba(24,28,20,.16);
  --radius: 9px; --tap: 56px; --maxw: 760px;
  --rail-surface: #22241f; --rail-text: #eeeee7; --rail-muted: #b5b9af;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #191b18; --navy-2: #2b2e28; --panel: #22251f;
  --text: #efefe8; --muted: #b2b8aa; --cream: #edeee4;
  --orange: #f3a16c; --orange-dim: #cb6d32; --action: #ed8847;
  --green: #87c9a4; --amber: #e2ba74; --red: #f49aa0; --info: #91c2d5;
  --line: #42473a; --divider: #34392e; --press: #32372c;
  --orange-soft: rgba(243,161,108,.1); --focus-ring: 0 0 0 3px rgba(243,161,108,.22);
  --shadow-elevated: 0 12px 36px rgba(0,0,0,.3);
  --rail-surface: #141612;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--navy);
  color: var(--text);
  font: 16px/1.45 var(--font-body);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.app { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.boot { padding: 40px; text-align: center; color: var(--muted); }

.screen { padding: 20px 18px 96px; flex: 1; }
.brand { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 22px; }
.brand .logo { width: auto; height: 20px; max-width: 100%; border-radius: 0; background: none; }
.brand h1 { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0; letter-spacing: .3px; }
.brand .sub { color: var(--muted); font-size: 13px; }

h2 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 14px; }
.card { background: var(--panel); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
label { display: block; font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: .01em; font-size: 13px; color: var(--muted); margin: 0 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; min-height: var(--tap); padding: 12px 14px; margin-bottom: 14px;
  background: var(--navy-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font-family: var(--font-body); font-size: 17px; /* 17px avoids iOS zoom-on-focus */
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); border-color: var(--orange); box-shadow: var(--focus-ring); }
button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--tap); border: none; border-radius: 10px;
  background: var(--orange); color: var(--navy);
  font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: .01em; font-size: 17px;
  cursor: pointer; padding: 0 18px;
}
.btn:active { background: var(--orange-dim); }
.btn:focus-visible { outline-color: var(--cream); }
.btn[disabled] { opacity: .5; }
.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.ghost { background: transparent; color: var(--muted); border: none; }

.msg { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.msg.err { background: rgba(224,97,106,.14); color: var(--red); border: 1px solid rgba(224,97,106,.4); }
.msg.ok  { background: rgba(76,175,125,.14); color: var(--green); border: 1px solid rgba(76,175,125,.4); }

.row { display: flex; gap: 12px; align-items: center; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.center { text-align: center; }
.footer-badge { text-align: center; font-family: var(--font-mono); color: var(--muted); font-size: 12px; padding: 20px 0; }

/* --- shell + tab bar --- */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.screen-host { flex: 1; }
.tabbar {
  position: sticky; bottom: 0; display: flex; gap: 2px;
  background: var(--navy-2); border-top: 1px solid var(--divider);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: transparent; border: none; color: var(--muted); font-family: var(--font-display); text-transform: none; letter-spacing: .01em; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 10px;
}
.tab .ic { font-size: 20px; line-height: 1; }
.tab.active { color: var(--orange); background: var(--orange-soft); }

/* --- section header with action --- */
.sec-head { display: flex; align-items: center; margin: 6px 0 14px; }
.sec-head h2 { margin: 0; }
.iconbtn { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--navy-2); color: var(--text); font-size: 22px; cursor: pointer; }

/* --- list rows --- */
.list { display: flex; flex-direction: column; gap: 10px; }
.rowcard { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 12px; padding: 14px 16px; min-height: var(--tap); cursor: pointer; border: none; width: 100%; text-align: left; color: var(--text); }
.rowcard:active { background: var(--press); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-2); display: grid; place-items: center; font-weight: 800; color: var(--orange); flex: none; }
.rowcard .main { flex: 1; min-width: 0; }
.rowcard .name { font-weight: 700; }
.rowcard .meta { color: var(--muted); font-size: 13px; }
.pill { font-family: var(--font-display); font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: .01em; padding: 3px 9px; border-radius: 999px; background: var(--navy-2); color: var(--muted); }
.pill.goal { color: var(--cream); }
.pill.stale { color: var(--amber); }

.thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--navy-2); flex: none; }
/* Native-button wrapper for a row thumbnail — the tap opens the lightbox reliably
   on iOS (a bare <img> click listener often doesn't fire on touch). */
.thumb-btn { flex: none; width: 48px; height: 48px; padding: 0; border: none; border-radius: 8px; background: var(--navy-2); overflow: hidden; cursor: zoom-in; }
.thumb-btn .thumb { display: block; width: 100%; height: 100%; }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.stub { text-align: center; color: var(--muted); padding: 48px 24px; }
.stub .big { font-size: 40px; margin-bottom: 10px; }

/* --- modal sheet --- */
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.sheet { background: var(--navy-2); width: 100%; max-width: var(--maxw); border-radius: 18px 18px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0,0,0,0.35); }
.sheet h2 { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--navy-2); color: var(--text); font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: .01em; cursor: pointer; }
.chip.on { background: var(--orange); color: var(--navy); border-color: var(--orange); }
.chip.sm { min-height: 38px; padding: 0 12px; font-size: 13px; }
.chip.mod { border-style: dashed; }
.chip.mod.on { border-style: solid; }
/* One-time (un-rostered) student: selected, but a dashed orange outline so it
   reads as distinct from a filled roster-student chip and from Other. */
.chip.onetime { background: var(--navy-2); color: var(--orange); border: 1px dashed var(--orange); }

/* --- badges / pill variants --- */
.pill.open { background: rgba(244,115,33,.18); color: var(--orange); }
.pill.tail { background: rgba(243,239,233,.14); color: var(--cream); font-family: var(--font-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pill.ok { background: rgba(76,175,125,.18); color: var(--green); }
.pill.info { background: rgba(93,173,226,.18); color: var(--info); }
.pill.warn { background: rgba(217,164,65,.18); color: var(--amber); }
.avatar.sm { width: 34px; height: 34px; font-size: 15px; position: relative; }
.solo-dot { position: absolute; right: -2px; bottom: -2px; color: var(--orange); font-size: 20px; line-height: 1; }
.rowcard.pinned { border: 1px solid var(--orange); }
.rowcard.sel { outline: 2px solid var(--orange); }
.rowactions { display: flex; flex-direction: column; gap: 4px; }
.linkbtn { background: none; border: none; color: var(--orange); font-family: var(--font-display); text-transform: none; letter-spacing: .01em; font-weight: 600; font-size: 13px; cursor: pointer; padding: 6px 8px; }

/* --- steppers --- */
.stepper, .ground-ctl { display: flex; align-items: center; gap: 6px; }
.stepbtn { min-width: 48px; min-height: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--navy-2); color: var(--text); font-size: 20px; font-weight: 800; cursor: pointer; }
.stepbtn:active { background: var(--press); }
.stepval { min-width: 46px; text-align: center; font-family: var(--font-mono); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.locked .stepbtn { opacity: .4; pointer-events: none; }
.locked .stepval { opacity: .5; }

/* --- capture-card header + aircraft switcher --- */
.log-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.log-head h2 { margin: 0; }
.acf-switch { margin-bottom: 0; flex-wrap: wrap; justify-content: flex-end; }
.acf-switch[hidden] { display: none; }
/* SIM tag inside an aircraft-switcher chip (blue, matches .pill.info palette). */
.pill.sim { margin-left: 6px; padding: 1px 6px; font-size: 10px; background: rgba(93,173,226,.22); color: var(--info); }

/* --- flight card --- */
.fcard { }
.route-evidence { margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--navy-2); overflow: hidden; }
.route-evidence > summary { min-height: var(--tap); padding: 0 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-display); font-weight: 700; list-style-position: inside; }
.route-evidence > summary > span:first-of-type { flex: 1; }
.route-evidence-status { color: var(--muted); font-size: 12px; font-weight: 600; }
.route-evidence-body { padding: 0 12px 14px; }
.route-empty { color: var(--muted); font-size: 13px; padding: 14px 4px; }
.route-window, .route-meta, .route-coverage, .route-source { color: var(--muted); font-size: 12px; margin: 8px 2px; }
.route-window strong { color: var(--text); }
.route-caution { color: var(--amber); font-size: 12px; padding: 8px 10px; margin: 8px 0; border-left: 3px solid var(--amber); background: rgba(217,164,65,.1); }
.route-candidates { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 10px; }
.route-candidates .chip { flex: none; min-height: 44px; }
.route-map { display: block; width: 100%; height: auto; min-height: 180px; background: var(--panel); border: 1px solid var(--divider); border-radius: 10px; }
.route-lines { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.route-place circle { fill: var(--text); }
.route-place text { fill: var(--muted); font: 8px var(--font-body); paint-order: stroke; stroke: var(--panel); stroke-width: 2px; }
.route-endpoints { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: 13px; font-weight: 700; }
.route-endpoints span:last-child { text-align: right; }
.route-coverage { line-height: 1.4; }
.route-source a { color: var(--orange); }
.route-import { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--divider); }
.route-import .btn { width: auto; }
.route-import-msg { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.route-import-msg strong { color: var(--text); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.field-grid > div { min-width: 0; }
.ldg-wrap { display: flex; flex-direction: column; gap: 6px; }
.dur-line { font-family: var(--font-mono); font-weight: 700; color: var(--orange); margin: 12px 0; font-size: 16px; }
.otherbox { margin-bottom: 12px; }
/* sim session-time field (replaces the Hobbs meter grid in sim mode) */
.sim-time { margin: 4px 0 14px; }

/* --- progressive-disclosure sub-sections (instrument split, holds/full-stop) --- */
.disc-box { margin: 0 0 8px; }
.disc-box[hidden] { display: none; }

/* --- derived (server-owned) read-only value, e.g. the approaches sum --- */
.derived-val { min-height: 48px; display: flex; align-items: center; font-family: var(--font-mono); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- approach detail rows --- */
.appr-detail { margin-bottom: 12px; }
.ar-list { display: flex; flex-direction: column; }
.approach-row {
  display: grid; gap: 8px; align-items: center; margin-bottom: 10px; padding-bottom: 10px;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "type count remove" "airport airport airport";
  border-bottom: 1px solid var(--divider);
}
.approach-row .ar-type { grid-area: type; margin-bottom: 0; min-height: 48px; }
.approach-row .ar-count { grid-area: count; }
.approach-row .ar-airport { grid-area: airport; margin-bottom: 0; }
.approach-row .ar-remove { grid-area: remove; min-width: 44px; min-height: 44px; color: var(--muted); }
.appr-add { width: auto; }

.hobbs-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.harrow { display: grid; place-items: center; color: var(--muted); font-size: 22px; }
.hfield { background: var(--navy-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 92px; }
.hfield.pending { border-color: var(--muted); }
.hfield.suggested { border-color: var(--amber); }
.hfield.confirmed { border-color: var(--green); }
.hf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-size: 11px; letter-spacing: .01em; text-transform: none; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.hf-cam { background: none; border: none; padding: 0 2px; font-size: 15px; line-height: 1; cursor: pointer; opacity: .75; -webkit-tap-highlight-color: transparent; }
.hf-cam:active { opacity: 1; transform: scale(0.94); }
.hf-body { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hf-crop { width: 100%; max-height: 60px; object-fit: cover; border-radius: 8px; background: var(--navy); }
.hf-val { font-family: var(--font-mono); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; background: none; border: none; color: var(--text); cursor: pointer; padding: 2px 0; }
.hf-val.amber { color: var(--amber); text-decoration: underline; }
.hf-val.green { color: var(--green); }
.hf-confirm { min-width: 44px; min-height: 44px; border-radius: 999px; border: none; background: var(--green); color: var(--navy); font-size: 20px; font-weight: 800; cursor: pointer; margin-left: auto; }
.hf-note { font-size: 11px; color: var(--muted); margin-top: 6px; }
.hf-input { width: 100%; min-height: var(--tap); padding: 10px 12px; background: var(--navy); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-family: var(--font-mono); font-size: 20px; font-weight: 700; }
.hf-actions { display: flex; flex-direction: column; gap: 8px; }
.hf-shimmer { color: var(--muted); font-style: italic; }
.btn.sm { min-height: 44px; font-size: 15px; }

/* --- banners --- */
.banners { }
.banner { border-radius: 10px; padding: 12px 14px; margin: 10px 0; font-size: 14px; }
.banner.block { background: rgba(224,97,106,.14); border: 1px solid rgba(224,97,106,.4); color: var(--red); }
.banner.warn { background: rgba(217,164,65,.14); border: 1px solid rgba(217,164,65,.4); color: var(--amber); }
.banner-msg { margin-bottom: 8px; }
.banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.banner-btn { min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid currentColor; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }

/* --- savebar (bottom-anchored primary action) --- */
/* Sticky above the ~64px tab bar (52px tabs + 12px padding + safe-area) so the
   Log/Save button clears it instead of overlapping the tab labels. */
.savebar { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.btn.danger { color: var(--red); }

/* --- month --- */
.monthnav { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.monthlabel { flex: 1; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.stat { background: var(--panel); border-radius: 12px; padding: 14px 10px; text-align: center; }
.stat-val { font-family: var(--font-mono); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-lbl { font-family: var(--font-display); text-transform: none; letter-spacing: .01em; font-size: 11px; color: var(--muted); margin-top: 4px; }
.meter-card { text-align: center; }
.meter-big { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--orange); }
.note-box { padding: 12px 14px; background: var(--navy-2); border-radius: 10px; font-size: 13px; margin: 14px 0; }

/* --- batch AIRPLANE control (put a whole day's flights on one airplane) --- */
/* Sits above the flight cards; one tap re-attributes every non-overridden flight,
   so two same-day flights can't sit on different meter chains and hide the gap. */
.batch-acf { background: var(--panel); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--line); }
.batch-acf-label { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .01em; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.batch-acf-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.batch-acf-sub { font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: .01em; font-size: 13px; color: var(--text); }
.batch-acf-row .chips { margin-bottom: 0; }
/* A mixed batch (flights split across airplanes) is exactly the bug — flag it. */
.batch-acf.mixed { border-color: rgba(217,164,65,.6); border-left: 4px solid var(--amber); }
.batch-acf-hint { margin-top: 10px; font-size: 13px; color: var(--amber); }
.batch-acf-hint[hidden] { display: none; }

/* --- pairing --- */
.pair-card { background: var(--panel); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.pair-rail { border-left: 3px solid var(--orange); padding-left: 12px; }
/* .pair-photo is a native <button> (iOS-reliable tap) that wraps the meter image
   AND its value — button chrome reset so it reads as the photo, not a control. */
.pair-photo { display: flex; align-items: center; gap: 8px; margin: 4px 0; width: 100%; padding: 0; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: zoom-in; }
.pair-photo span { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.pair-mid { font-size: 13px; color: var(--muted); margin: 6px 0; display: flex; align-items: center; gap: 10px; }
.studentpick { margin-top: 12px; }
/* per-card DATE (editable) + TIME (read-only, from the photo) */
.pair-datetime { display: flex; gap: 12px; margin-top: 12px; align-items: flex-start; }
.pair-datetime .pdt-date { flex: 1; min-width: 0; }
.pair-datetime .pdt-time { flex: none; }
.pair-datetime input[type=date] { margin-bottom: 0; }
.pair-time { min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.pair-time .hf-note { margin-top: 2px; }
.pair-note { margin-bottom: 4px; }
/* SELECT control — full-width toggle. Kept tap-friendly (≥50px) but lower-emphasis
   than the primary "Log selected" button so it doesn't dominate the card:
   unselected reads muted/secondary, selected lights orange. */
.selbtn { margin-top: 2px; min-height: 50px; font-size: 15px; letter-spacing: .05em; }
.selbtn:not(.on) { color: var(--muted); border-color: var(--line); font-weight: 600; }
.selbtn.on { background: var(--orange-soft); border-color: var(--orange); color: var(--orange); }
.pair-selecthint { font-size: 12px; color: var(--muted); margin-top: 6px; }
/* Select all / Clear affordance above the bottom "Log selected" button */
.pair-bulk { display: flex; gap: 16px; justify-content: center; }

/* Pairing photos: LARGE + tap-to-enlarge so the meter digits are readable. Scoped
   to .pair-photo so inbox/unpaired row .thumb (48px) stays compact. */
.pair-photo .pair-thumb { width: 104px; height: 104px; border-radius: 10px; cursor: zoom-in; }
.pair-photo .pair-thumb:active { opacity: .85; }
.pair-photo span { font-size: 20px; }

/* --- MANUAL (photoless gap-fill) card --- */
/* Same rail as a photo card, but the two Hobbs readings are editable inputs (typed
   entry) instead of meter photos. The rail flips amber and a dashed tag marks it as
   a no-photo entry so it's never mistaken for a photographed flight. */
.pair-rail.manual { border-left-color: var(--amber); }
.pair-manual-input { margin: 6px 0; }
.pair-manual-input label { margin-bottom: 4px; }
.pair-hobbs { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 20px; margin-bottom: 0; }
.manual-tag { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .01em; font-size: 12px; color: var(--amber); }
/* (The photoless card's old "Remove" link folded into the unified Delete below —
   it did exactly what Delete does, and one label per action beats two.) */

/* --- SPLIT LEG (photographed at one end, typed at the other) --- */
/* A leg is a real photographed flight at one end and a value Chris typed at the
   other, so it gets the orange rail (it is a photo flight) drawn DASHED (one end
   isn't). No new colour — the dash carries the difference. */
.pair-rail.split { border-left-style: dashed; }

/* --- per-card ACTIONS (Unpair / Split / Delete) --- */
/* Every action for a card lives in one predictable place: the .pair-mid line
   between the two readings. They wrap as a group so the duration never separates
   from the flight it describes. Delete is the destructive token (--red, the one
   sanctioned use) but stays a small text link — quieter than the Select button
   and far quieter than "Log selected", which is the primary flow. */
.pair-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.card-delete { color: var(--red); }

/* --- the SPLIT panel (type the intermediate Hobbs) --- */
.pair-split-slot:empty { display: none; }
.split-box { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--navy-2); border: 1px dashed var(--line); }
.split-box[hidden] { display: none; }
.split-chain { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 18px; margin-bottom: 8px; }
.split-chain .split-q { color: var(--orange); }
.split-box .split-mid { margin-bottom: 12px; }
.split-box .chips { margin-bottom: 0; }
.split-hint { font-size: 12px; color: var(--muted); margin-top: 10px; }
.split-err:empty { display: none; }
.split-err { color: var(--red); font-size: 13px; margin-top: 8px; }

/* --- LOGGED (locked, read-only) card --- */
/* A committed flight persists on the page so Chris can watch the day fill in.
   Dimmed with a green "✓ LOGGED" badge and a compact committed summary; no
   editable controls, no select checkbox. Its photos stay small + tap-to-enlarge. */
.pair-card.logged { opacity: .74; border: 1px solid rgba(76,175,125,.35); background: linear-gradient(0deg, rgba(76,175,125,.05), rgba(76,175,125,.05)), var(--panel); }
.pair-logged-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; }
.logged-badge { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .07em; font-size: 14px; color: var(--green); }
.logged-hobbs { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; color: var(--text); }
.pair-logged-body { display: flex; gap: 12px; align-items: flex-start; }
.logged-photos { display: flex; gap: 6px; flex: none; }
.logged-thumb-btn { padding: 0; border: none; background: none; cursor: zoom-in; flex: none; }
.logged-thumb { width: 52px; height: 52px; border-radius: 8px; }
.logged-meta { flex: 1; min-width: 0; font-size: 14px; }
.logged-line { margin: 2px 0; }
.logged-line.strong { font-weight: 700; }
.logged-line.muted { color: var(--muted); font-size: 13px; }
.logged-line.note { color: var(--muted); font-style: italic; }

/* --- all-logged done banner (bottom bar) --- */
.pair-alllogged { text-align: center; font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .07em; color: var(--green); padding: 4px 0; }

/* --- per-card DISCREPANCY banner (prominent — bigger/bolder than a chip) --- */
.pair-banner-slot:empty { display: none; }
.pair-banner { border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.pair-banner.warn { background: rgba(217,164,65,.18); border: 1.5px solid rgba(217,164,65,.55); color: var(--amber); }
.pair-banner.block { background: rgba(224,97,106,.18); border: 1.5px solid rgba(224,97,106,.6); color: var(--red); }
.pair-banner.ok { background: rgba(76,175,125,.16); border: 1px solid rgba(76,175,125,.5); color: var(--green); }
.pb-head { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .07em; font-size: 15px; margin-bottom: 4px; }
.pair-banner.ok .pb-head { margin-bottom: 0; }
.pb-msg { font-size: 14px; margin-bottom: 10px; }
.pb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-btn { min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid currentColor; background: transparent; color: inherit; font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .04em; font-size: 13px; cursor: pointer; }
.pb-btn:active { opacity: .8; }
.pb-reason { margin-top: 10px; }
.pb-reason[hidden] { display: none; }
.pb-reason-inp { margin-bottom: 8px; }
.pb-msg-err { color: var(--red); font-size: 13px; }

/* --- between-cards GAP MARKER (a likely MISSING flight) --- */
/* An inter-card separator, NOT a card: full-width amber block with generous
   vertical margin + a heavy left rail so it reads as a break in the timeline
   sitting between two flights. Flips green once the gap is waived. */
.gap-marker { margin: 4px 0 14px; padding: 12px 14px; border-radius: 10px; background: rgba(217,164,65,.14); border: 1px dashed rgba(217,164,65,.7); border-left: 4px solid var(--amber); color: var(--amber); }
.gap-marker.resolved { background: rgba(76,175,125,.14); border: 1px solid rgba(76,175,125,.5); border-left: 4px solid var(--green); color: var(--green); }
.gap-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.gap-badge { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .07em; font-size: 15px; color: var(--amber); }
.gap-badge.ok { color: var(--green); }
.gap-text { font-size: 14px; }
.gap-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gap-reason { margin-top: 10px; }
.gap-reason[hidden] { display: none; }
.gap-reason-inp { margin-bottom: 8px; }

/* --- pairing SUMMARY bar (what the engine found + the one-tap ACCEPT ALL) --- */
/* The headline of the screen: the count, the photo ledger that proves nothing
   vanished, and the primary Accept. Accept SELECTS — the note says so out loud,
   because committing hours to a logbook stays a deliberate second action. */
.pair-summary { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.ps-head { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .01em; font-size: 17px; }
.ps-ledger { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); margin-top: 4px; }
.ps-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.ps-side { font-size: 13px; color: var(--amber); }
.ps-note { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* --- DAY sections (the shape Chris thinks in: one heading per day flown) ---
   THE DAY IS ONE CARD. Chris, 2026-08-10: "the date and 'Set this day' at the
   top, and then everything down below — that should all be one card."
   It used to be a floating heading with a divider under it and detached
   .pair-cards below, so the header didn't visibly own its flights and a
   multi-flight day read as unrelated pieces. Now: the day is a bounded panel,
   the header is its header, and each flight is an inset block INSIDE it — so a
   one-flight day (the common case) reads as exactly one card, and a
   three-flight day reads as one day containing three. */
.day-sec {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2px 12px 12px;
  margin-bottom: 16px;
}
.day-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 12px 2px 10px; border-bottom: 1px solid var(--divider); }
/* min-width forces the ACTION BUTTONS to wrap as a group to the next line when
   things get tight, instead of the summary line breaking mid-Hobbs-range
   ("4695.5 →" / "4696.1"), which is unreadable. */
.day-titlewrap { flex: 1 1 auto; min-width: 200px; }
.day-title { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .07em; font-size: 15px; }
.day-sum { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.day-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.day-btn { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--navy-2); color: var(--text); font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: .01em; font-size: 13px; cursor: pointer; }
.day-btn.accept { background: var(--orange-soft); border-color: var(--orange); color: var(--orange); }
.day-btn:active { opacity: .8; }
.day-accepted { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .01em; font-size: 12px; color: var(--green); }
.day-body { padding-top: 12px; }
.batch-acf.day-batch { margin: 12px 0; }

/* A flight INSIDE a day card. It can't stay on --panel or it dissolves into the
   day card it now sits in, so it steps up to the raised surface with a border —
   the same "nested item" treatment the rest of the app uses for controls. The
   last one drops its trailing margin so the day card closes tight. */
.day-sec .pair-card {
  background: var(--navy-2);
  border: 1px solid var(--line);
}
.day-sec .day-body > :last-child { margin-bottom: 0; }

/* ONE FLIGHT THAT DAY = ONE CARD, FULL STOP. Chris asked for "the entire flight
   should be one card", and a lone flight boxed inside a day box is still two
   boxes. When it's the only thing in the day, the flight dissolves INTO the day
   card and the day card simply IS the flight card. A day with two or more keeps
   the inset treatment above, because there the boxes are carrying real meaning —
   they're telling you which reading belongs to which flight. */
.day-sec .day-body > .pair-card:only-child {
  background: transparent;
  border: none;
  padding: 0;
}

/* --- the CONFIDENCE strip (the engine explaining itself, on every card) --- */
/* Driven by timingClass, never hidden: green when the clock backs up the meter,
   amber when a photo was shot hours off, red when the pairing is impossible. */
.pair-conf-slot:empty { display: none; }
.pair-conf { border: 1px solid var(--line); background: var(--navy-2); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.pc-head { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .05em; font-size: 13px; }
.pc-msg { font-size: 13px; color: var(--muted); margin-top: 4px; }
.pair-conf.tight { background: rgba(76,175,125,.10); border-color: rgba(76,175,125,.35); }
.pair-conf.tight .pc-head { color: var(--green); }
.pair-conf.loose { background: rgba(217,164,65,.14); border-color: rgba(217,164,65,.5); }
.pair-conf.loose .pc-head { color: var(--amber); }
.pair-conf.loose .pc-msg { color: var(--amber); }
.pair-conf.impossible { background: rgba(224,97,106,.14); border-color: rgba(224,97,106,.5); }
.pair-conf.impossible .pc-head { color: var(--red); }
.pair-conf.impossible .pc-msg { color: var(--red); }
.pair-conf.unknown .pc-head, .pair-conf.hand .pc-head { color: var(--muted); }

/* --- Current Flight timer panels (ground-run protection, migration 0007) ---
   The shutdown page's Current Flight column measures THE FLIGHT; the meter
   delta measures METER MOVEMENT. These panels are where the difference —
   ground running that must never be billed to a student — gets said out loud:
   three plain numbers, the billing proposal, and the waive-as-maintenance
   escape hatch for the "0.2 with no timer" runup. */
.pair-timer-slot:empty { display: none; }
.timer-panels { margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.pair-timer { border-radius: 10px; padding: 10px 12px; border: 1px solid var(--line); background: var(--navy-2); }
.pt-head { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .05em; font-size: 13px; }
.pt-note { font-size: 13px; color: var(--muted); margin-top: 4px; }
.pt-nums { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13px; }
.pt-nums strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; }
.pt-bill { margin-top: 8px; }
.pt-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.pt-alt { font-size: 12px; color: var(--muted); }
.pair-timer.ok { background: rgba(76,175,125,.10); border-color: rgba(76,175,125,.35); padding: 8px 12px; }
.pair-timer.ok .pt-head { color: var(--green); }
.pair-timer.ground,
.pair-timer.suspect,
.pair-timer.short { background: rgba(217,164,65,.14); border-color: rgba(217,164,65,.5); }
.pair-timer.ground .pt-head,
.pair-timer.suspect .pt-head,
.pair-timer.short .pt-head { color: var(--amber); }
.pair-timer.ground .pt-nums { color: var(--amber); }
.pair-timer.ground .pt-note,
.pair-timer.suspect .pt-note,
.pair-timer.short .pt-note { color: var(--amber); }
.pair-timer.bad { background: rgba(224,97,106,.14); border-color: rgba(224,97,106,.5); }
.pair-timer.bad .pt-head { color: var(--red); }
.pair-timer.bad .pt-note { color: var(--red); }

/* Possible-overcharge list (auditBilledVsTimer) — billed hours vs the flight
   timer, side by side. Generic classes so the meter-audit screen (or any list
   over logged flights) can render the audit without new styling. */
.overcharge-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.overcharge-nums { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.overcharge-diff { color: var(--amber); font-weight: 700; }

/* --- collapsed retakes (a photo the engine folded away still has a link) --- */
.pair-dupe { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.pair-dupe .linkbtn { padding: 6px 4px; font-size: 12px; }

/* --- ORPHAN card (a photo with no flight, carrying the engine's diagnosis) --- */
.orphan-card { align-items: flex-start; }
.orphan-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.orphan-badge { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .01em; font-size: 12px; color: var(--muted); }
.orphan-badge.warn { color: var(--amber); }
.orphan-badge.bad { color: var(--red); }
.orphan-hobbs { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; }
.orphan-diag { font-size: 13px; color: var(--muted); margin: 4px 0; }
.orphan-card .meta { margin-top: 2px; }

/* --- per-card override pin (a hand-set Purpose/Student the batch must skip) --- */
.pin-tag { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; font-size: 11px; color: var(--orange); margin-left: 8px; }
.pin-reset { padding: 2px 6px; font-size: 11px; }

/* --- batch PURPOSE + STUDENT strip (mirrors the batch AIRPLANE control) --- */
.batch-who .batch-acf-row { margin-top: 8px; }
.batch-acf-hint.plain { color: var(--muted); }

/* --- full-size photo lightbox --- */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: var(--shadow-elevated); }
.lightbox-close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; min-width: 48px; min-height: 48px; border-radius: 999px; border: 1px solid rgba(243,239,233,.3); background: rgba(0,0,0,.45); color: var(--cream); font-size: 22px; cursor: pointer; }

/* --- reconcile --- */
.recon-sec { margin-bottom: 12px; }
.recon-head { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: var(--tap); background: var(--panel); border: none; border-radius: 12px; padding: 0 16px; color: var(--text); font-weight: 700; cursor: pointer; }
.recon-body { padding: 8px 4px; }
.recon-row { padding: 8px 4px; font-size: 13px; border-bottom: 1px solid var(--divider); }
.recon-title { font-weight: 800; margin: 18px 0 10px; font-size: 15px; }
.recon-card { background: var(--panel); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.recon-line { margin-bottom: 4px; }
.recon-hint { font-size: 12px; margin: 6px 0; }
.recon-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.recon-cands { display: flex; flex-direction: column; margin-top: 8px; }
.chev { color: var(--muted); }

/* --- offline sync banner --- */
.syncbar {
  position: relative; z-index: 1;
  background: rgba(217,164,65,.16); color: var(--amber);
  border-bottom: 1px solid rgba(217,164,65,.4);
  font-size: 13px; font-weight: 700; text-align: center;
  padding: 8px 14px;
}
.syncbar[hidden] { display: none; }
.syncbar-line { text-align: center; }
/* poison/skipped items — more urgent than the amber "waiting" line, so it reads
   as an error the user must act on (Retry / Discard). */
.syncbar-fail {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 12px; color: var(--red); font-weight: 700;
}
.syncbar-line + .syncbar-fail {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(217,164,65,.4);
}
.syncbar-fail .sf-actions { display: flex; gap: 8px; }
.syncbar-fail .btn.sm {
  width: auto; min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px;
  border: 1px solid rgba(224,97,106,.5);
}
.syncbar-fail .btn.sm[data-a="retry"] { color: var(--amber); }
.syncbar-fail .btn.sm[data-a="discard"] { color: var(--red); }
.legacy-photo-recovery { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; align-items:center; max-width:760px; margin:6px auto 0; padding-top:8px; border-top:1px solid rgba(217,164,65,.4); text-align:left; color:var(--text); font-weight:500; }
.legacy-photo-recovery strong { display:block; font-size:14px; }
.legacy-photo-recovery p, .legacy-photo-recovery li, .legacy-photo-status { margin:3px 0; color:var(--muted); font-size:14px; line-height:1.4; }
.legacy-photo-recovery .btn { width:auto; min-height:44px; white-space:nowrap; }
.legacy-photo-recovery details { grid-column:1/-1; }
.legacy-photo-recovery summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--amber); font-size:14px; }
.legacy-photo-recovery ul { margin:4px 0 4px 18px; padding:0; }
.legacy-photo-status { grid-column:1/-1; color:var(--red); }
@media (max-width:540px) { .legacy-photo-recovery { grid-template-columns:1fr; } .legacy-photo-recovery .btn, .legacy-photo-recovery details, .legacy-photo-status { grid-column:1; } }

/* --- add-to-home-screen coach card --- */
.a2hs { display: flex; align-items: center; gap: 12px; }
.a2hs .a2hs-body { flex: 1; min-width: 0; font-size: 14px; }
.a2hs .btn.ghost.sm { width: auto; flex: none; padding: 0 14px; }

/* --- toast --- */
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); background: var(--panel); color: var(--text); padding: 12px 18px; border-radius: 999px; border: 1px solid var(--green); box-shadow: var(--shadow-elevated); font-weight: 700; opacity: 0; transition: opacity .25s, transform .25s; z-index: 60; max-width: 90%; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- re-read control (inbox: backfill the OCR fields 0006 added) ---
   Deliberately quiet. It sits under the primary "Pair into flights" button and
   must never compete with it — this is the chore that makes pairing good, not
   the job itself. The progress bar is the one moving element, and it moves
   because a run that spends money should visibly be spending it. */
.reread { margin-bottom: 14px; }
.reread .btn { margin-top: 8px; }
.reread-line { font-size: 13px; color: var(--muted); line-height: 1.45; }
.reread-line.warn { color: var(--amber); }
.reread-bar { height: 4px; border-radius: 999px; background: var(--navy-2); overflow: hidden; margin-top: 8px; }
.reread-bar > span { display: block; height: 100%; background: var(--orange); border-radius: 999px; transition: width .25s ease; }
/* Cost block in the confirm sheet — the number Chris is agreeing to spend, so
   it gets the mono treatment every other real number in the app gets. */
.reread-est { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.reread-est .muted { font-size: 12px; }
.reread-guarantee { font-size: 12px; line-height: 1.5; }

/* --- respect reduced-motion (AOA calm-motion doctrine) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============================================================================
   DESKTOP / WIDE LAYOUT — everything below is additive and lives behind a
   min-width query. The phone layout above is untouched and pixel-identical.
   ----------------------------------------------------------------------------
   The brief is Chris's real desktop workflow: shoot Hobbs photos at the
   airplane on the phone, then sit at the Mac and bulk-reconcile a whole day.
   So the two screens that actually get better here are the photo INBOX and the
   PAIRING screen — more flights on screen, bigger meter photos, less scrolling.
   Everything else just has to stay calm and legible at width.
   No new colors, no new fonts — existing :root tokens only.
   ========================================================================= */
@media (min-width: 900px) {
  :root {
    --rail-w: 196px;      /* left nav rail (was the bottom tab bar) */
    --frame-w: 1360px;    /* the centred app frame */
    --content-w: 1080px;  /* readable cap for a screen inside the main column */
    --pad-x: 34px;        /* .screen horizontal padding at width */
    --pair-photo-w: 200px;/* meter-photo column inside a pairing card */
  }

  /* --- the frame ------------------------------------------------------ */
  .app { max-width: var(--frame-w); }

  /* Pre-auth: loginScreen() mounts a bare .screen straight into .app (there is
     no .shell yet). Keep it a narrow centred card, not a frame-wide form. */
  .app > .screen { max-width: 460px; margin: 0 auto; padding: 7vh 20px 60px; }

  /* Authed shell → nav rail + main column. Source order is
     syncbar / screen-host / tabbar, so placement is by named area. */
  .shell {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "rail sync"
      "rail main";
  }
  .syncbar { grid-area: sync; }
  .screen-host { grid-area: main; min-width: 0; }

  /* --- bottom tab bar → left vertical nav rail ------------------------ */
  /* Sticky + 100vh so the tabs stay put while a long pairing list scrolls. */
  .tabbar {
    grid-area: rail;
    position: sticky; top: 0; align-self: start; height: 100vh;
    flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 26px 12px;
    border-top: none;
    border-right: 1px solid var(--divider);
    overflow-y: auto;   /* very short windows keep every tab reachable */
  }
  .tab {
    flex: none; flex-direction: row; justify-content: flex-start;
    gap: 12px; min-height: 48px; padding: 0 14px; font-size: 13px;
  }
  .tab .ic { font-size: 19px; width: 22px; text-align: center; }
  .tab.active { box-shadow: inset 3px 0 0 var(--orange); }  /* AOA orange rail */

  /* --- main column ---------------------------------------------------- */
  /* The 96px bottom padding existed only to clear the phone tab bar. */
  .screen { max-width: var(--content-w); margin: 0 auto; padding: 26px var(--pad-x) 56px; }
  .brand { margin: 2px 0 26px; gap: 8px 14px; }
  .brand .logo { height: 24px; }   /* content-sized — never stretches */
  .brand h1 { font-size: 24px; }
  h2 { font-size: 19px; }

  /* --- savebar: the +70px offset existed to clear the bottom tab bar --- */
  .savebar { bottom: 0; }
  /* Pairing puts .savebar directly in .screen → make it a real action bar:
     bulk links left, primary button right, full-bleed to the screen edges. */
  .screen > .savebar {
    flex-direction: row; align-items: center; justify-content: flex-end; gap: 14px;
    margin: 24px calc(-1 * var(--pad-x)) 0;
    padding: 14px var(--pad-x);
    background: var(--navy);
    border-top: 1px solid var(--divider);
  }
  .screen > .savebar > .btn { width: auto; min-width: 260px; }
  .screen > .savebar > .pair-bulk,
  .screen > .savebar > .pair-alllogged { margin-right: auto; padding: 0; }
  /* The flight card's savebar lives INSIDE the card. Sticking it is a phone
     affordance; on desktop the card fits, so let the buttons sit naturally. */
  .fcard > .savebar { position: static; margin-top: 20px; }
  .fcard > .savebar > .btn { max-width: 320px; }

  /* ==================================================================== */
  /* PAIRING / RECONCILIATION — the priority screen                       */
  /* ==================================================================== */
  /* DELIBERATELY NOT a multi-column card grid. .gap-marker is a POSITIONAL
     signal — "a flight is missing between this card and the one above it" —
     and its meaning is carried entirely by sitting in the vertical chain. In a
     2-up grid the next card is to the RIGHT, so a marker either forces a row
     break (reads as unrelated) or sits in a cell (reads as a card). Reading
     the meter chain correctly beats column count, so instead: ONE wide column
     with the cards laid out HORIZONTALLY — meter photos left, everything else
     right. That roughly halves card height, which is the same win. */
  /* Tighter than other screens on purpose: the card's right column holds chips
     and short fields, so extra width would just be dead space beside them. */
  .screen:has(#batchacf) { max-width: 980px; }

  /* Summary bar: headline on its own line, ledger left, ACCEPT ALL hard right. */
  .pair-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 16px 20px; }
  .pair-summary .ps-head { flex-basis: 100%; font-size: 19px; }
  .pair-summary .ps-ledger { flex: 1; min-width: 260px; margin-top: 0; }
  .pair-summary .ps-actions { margin-top: 0; justify-content: flex-end; }
  .pair-summary .ps-note { flex-basis: 100%; margin-top: 2px; }
  .pair-summary .ps-accept { width: auto; min-width: 220px; }

  /* Day heading — a real section rule once there's width to give it. */
  .day-head { margin-top: 20px; padding: 14px 0 10px; gap: 8px 18px; }
  .day-sec:first-child .day-head { margin-top: 0; }
  .day-title { font-size: 17px; }
  .day-sum { font-size: 13px; }
  .day-body { padding-top: 14px; }

  /* Batch purpose/student: the same horizontal strip as the airplane control.
     Two-class selector so it beats the .batch-acf { align-items: center } below —
     the label belongs beside the FIRST row, not floating between two of them. */
  .batch-acf.batch-who, .batch-acf.day-batch { align-items: flex-start; }
  .batch-who-rows { flex: 1; min-width: 340px; }
  .batch-who .batch-acf-row { margin-top: 0; }
  .batch-who .batch-acf-row + .batch-acf-row { margin-top: 10px; }

  .pair-card {
    display: grid;
    grid-template-columns: var(--pair-photo-w) minmax(0, 1fr);
    column-gap: 24px;
    padding: 18px 20px;
    margin-bottom: 18px;
  }
  .pair-card > * { grid-column: 2; min-width: 0; }
  .pair-card > .pair-banner-slot { grid-column: 1 / -1; }   /* banner spans the top */
  /* The engine's verdict on the pairing reads across the whole card, above the
     photos it is talking about — never squeezed into the form column. */
  .pair-card > .pair-conf-slot { grid-column: 1 / -1; }
  .pair-card > .pair-rail { grid-column: 1; grid-row: span 24; align-self: start; }

  /* One line at width: verdict left, the engine's sentence filling the rest. */
  .pair-conf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 12px 16px; }
  .pc-head { font-size: 14px; }
  .pc-msg { flex: 1; min-width: 320px; margin-top: 0; }

  /* Orphan rows sit in the day chain now (not #loose) — same bigger thumb, since
     the whole point is that Chris can read the meter digits. */
  .orphan-card .thumb-btn, .orphan-card .thumb { width: 72px; height: 72px; }
  .orphan-diag { font-size: 14px; max-width: 78ch; }   /* readable measure, not full-bleed */

  /* The meter photos are the thing being read — make them big. */
  .pair-rail { border-left-width: 4px; padding-left: 16px; }
  .pair-photo { flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }
  .pair-photo .pair-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .pair-photo span { font-size: 26px; text-align: center; }
  .pair-mid { justify-content: center; margin: 10px 0; }

  /* Keep the form side scannable — single fields don't run 670px wide. */
  .pair-card .pair-datetime { max-width: 420px; }
  .pair-card .pair-note { max-width: 420px; }   /* flush with .pair-datetime */
  .pair-card .selbtn { max-width: 340px; }

  /* Logged (locked) cards keep their own compact layout — opting them out of
     the two-column grid, they only have two children. */
  .pair-card.logged { display: block; padding: 16px 20px; }
  .pair-logged-body { gap: 16px; }
  .logged-thumb { width: 72px; height: 72px; }

  /* GAP MARKER — unmistakable at width: heavier rail, more air above/below,
     actions pulled to the right, reason field wraps to its own line. */
  .gap-marker {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
    margin: 14px 0 20px; padding: 14px 18px; border-left-width: 6px;
  }
  .gap-marker.resolved { border-left-width: 6px; }
  .gap-line { flex: 1; min-width: 280px; }
  .gap-badge { font-size: 16px; }
  .gap-actions { margin-top: 0; }
  .gap-reason { flex-basis: 100%; margin-top: 2px; }

  /* Batch airplane control — a deliberate horizontal strip, not a stretched box. */
  .batch-acf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 14px 18px; }
  .batch-acf-label { margin-bottom: 0; flex: none; }
  .batch-acf-row { flex: 1; min-width: 320px; }
  .batch-acf-hint { flex-basis: 100%; margin-top: 0; }

  /* Loose (unpaired / unreadable) photo rows below the cards — still photos
     being read, so give them a bigger thumb than the phone's 48px. */
  #loose .rowcard .thumb { width: 72px; height: 72px; }

  /* ==================================================================== */
  /* PHOTO INBOX — denser grid, bigger thumbnails                         */
  /* ==================================================================== */
  .screen:has(#picker) > #list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
  }
  .screen:has(#picker) > #list > .empty,
  .screen:has(#picker) > #list > .msg { grid-column: 1 / -1; }
  .screen:has(#picker) > #list .thumb-btn,
  .screen:has(#picker) > #list .thumb { width: 84px; height: 84px; }
  .screen:has(#picker) > #list .rowcard { padding: 12px 14px; }
  .screen:has(#picker) > #list .name { font-size: 17px; }   /* reading badge stays legible */
  .screen:has(#picker) > #pairBar > .btn { width: fit-content; min-width: 300px; }

  /* ==================================================================== */
  /* FLY — capture card beside Recent flights                             */
  /* ==================================================================== */
  /* Rows are placed EXPLICITLY, not auto-flowed. Auto-flow puts the tall Log
     card in one row, which then sizes that row — leaving a dead gap under the
     inbox link in the right column. Instead the card spans rows 4-9 and row 9
     is `1fr`: per the grid spec a spanning item contributes no intrinsic size
     across a flexible track, so rows 4-8 hug the right column's content and
     the card's leftover height is absorbed by the empty flexible row. */
  .screen:has(#logCard) {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto auto auto 1fr;
    column-gap: 30px;
    align-items: start;
  }
  .screen:has(#logCard) > * { min-width: 0; }
  .screen:has(#logCard) > .brand        { grid-area: 1 / 1 / 2 / 3; }
  .screen:has(#logCard) > .a2hs         { grid-area: 2 / 1 / 3 / 3; }
  .screen:has(#logCard) > #openWrap     { grid-area: 3 / 1 / 4 / 3; }
  .screen:has(#logCard) > #logCard      { grid-area: 4 / 1 / 10 / 2; }
  .screen:has(#logCard) > #inboxLink    { grid-area: 4 / 2 / 5 / 3; }
  .screen:has(#logCard) > .sec-head     { grid-area: 5 / 2 / 6 / 3; }
  .screen:has(#logCard) > #recent       { grid-area: 6 / 2 / 7 / 3; }
  .screen:has(#logCard) > #logout       { grid-area: 7 / 2 / 8 / 3; }
  .screen:has(#logCard) > .footer-badge { grid-area: 8 / 2 / 9 / 3; }
  /* Log out is a chrome-less ghost .btn and base .btn is width:100% + centered.
     Stretched across the right column with no border or fill it stops reading as
     a control and becomes floating centred text in the column's dead space. At
     width, shrink it to its content and flush it to the column's left edge so it
     lines up with "Recent flights" and the rows above it; same for the build
     badge, which base CSS centres. Tap height (var(--tap)) is untouched. */
  .screen:has(#logCard) > #logout       { width: fit-content; padding-left: 0; }
  .screen:has(#logCard) > .footer-badge { text-align: left; }

  /* ==================================================================== */
  /* STUDENTS / MONTH — spend the width on rows, not on single fields      */
  /* ==================================================================== */
  /* Roster: the only other screen with a direct #list child (inbox has #picker). */
  .screen:has(#list):not(:has(#picker)) > #list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 10px;
  }
  .screen:has(#list):not(:has(#picker)) > #list > .empty { grid-column: 1 / -1; }
  /* Student detail */
  .screen:has(#totals) { max-width: 880px; }
  .screen:has(#totals) > #flights {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 10px;
  }
  /* Month */
  .screen:has(#mlabel) { max-width: 880px; }
  .screen:has(#mlabel) #body > .stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .screen:has(#mlabel) #body > .card:not(.meter-card) { max-width: 620px; }
  .screen:has(#mlabel) #body > .list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
  }
  .screen:has(#mlabel) #body > .btn { width: fit-content; min-width: 220px; }

  /* --- narrow utility screens ----------------------------------------- */
  .screen:has(#pills) { max-width: 780px; }     /* flight detail / edit */
  .screen:has(#recon),                          /* garmin reconcile */
  .screen:has(#ma-body) { max-width: 860px; }   /* meter audit */

  /* --- forms: cap field widths so a flight card stays scannable -------- */
  .card input[type=text], .card input[type=email], .card input[type=password],
  .card input[type=number], .card input[type=date], .card select { max-width: 520px; }
  .field-grid { max-width: 560px; }
  .hobbs-grid { max-width: 620px; }
  .hf-crop { max-height: 120px; }   /* meter crop in the flight card — readable */

  /* --- sheets / lightbox / toast at width ------------------------------ */
  .sheet-bg { align-items: center; padding: 24px; }
  .sheet { border-radius: 18px; padding: 24px; max-height: 86vh; overflow-y: auto; }
  .lightbox-img { max-width: min(100%, 1100px); }
  .toast { bottom: 32px; }
}

/* --- pointer affordances (desktop has a mouse; the phone doesn't) ------- */
@media (min-width: 900px) and (hover: hover) {
  .rowcard:hover { background: var(--press); }
  .tab:hover:not(.active) { background: rgba(243,239,233,.05); color: var(--text); }
  .btn:not([disabled]):hover { background: var(--orange-dim); }
  .btn.secondary:not([disabled]):hover,
  .btn.ghost:not([disabled]):hover { background: var(--navy-2); }
  .chip:hover:not(.on) { border-color: var(--muted); }
  .iconbtn:hover, .stepbtn:hover, .recon-head:hover { background: var(--press); }
  .day-btn:hover { border-color: var(--muted); }
  .day-btn.accept:hover { border-color: var(--orange); background: rgba(244,115,33,.18); }
  .linkbtn:hover, .pb-btn:hover, .banner-btn:hover { text-decoration: underline; }
  .thumb-btn:hover, .logged-thumb-btn:hover { outline: 2px solid var(--orange); outline-offset: 2px; }
  .pair-photo:hover .pair-thumb { outline: 2px solid var(--orange); outline-offset: 2px; }
}

/* --- roomier tier: a wider rail and bigger meter photos once there's space -- */
@media (min-width: 1200px) {
  :root { --rail-w: 228px; --pair-photo-w: 240px; }
}

/* --- very wide screens: hairlines so the frame reads as deliberate ------- */
@media (min-width: 1500px) {
  :root { --content-w: 1160px; }
  .app { box-shadow: 1px 0 0 var(--divider), -1px 0 0 var(--divider); }
  .screen:has(#batchacf) { max-width: 1020px; }
}

/* --- Attribution queue ("who flew these?") -------------------------------
   The screen that turns meter-ledger entries into logbook entries. Grouped by
   day because that is the unit Chris actually remembers, and because naming a
   whole day in one tap is what keeps this from becoming another backlog. */
.daygroup { background: var(--panel); border-radius: 14px; padding: 14px 16px 16px; margin-bottom: 14px; border: 1px solid var(--line); }
.daygroup.busy { opacity: .55; pointer-events: none; }
.dg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dg-day { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .01em; }
.dg-flights { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
/* A read-only row: the meter facts are settled and this screen cannot edit
   them, so it must not look tappable. */
.dg-flights .rowcard.static { cursor: default; background: var(--navy-2); padding: 10px 14px; min-height: 0; }
.dg-flights .rowcard.static .name { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.dg-actions { display: flex; flex-direction: column; gap: 8px; }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chiprow.subtle { padding-top: 2px; }
.chip.ghost { background: transparent; color: var(--muted); border-style: dashed; }
.chip .avatar.sm { width: 24px; height: 24px; font-size: 12px; margin-right: 8px; }

/* --- billing ------------------------------------------------------------- */
.billing-screen { max-width: 1100px; margin: 0 auto; }
.billing-filter-grid, .billing-form-grid { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
.billing-hint { color: var(--muted); font-size: 13px; margin: -4px 0 14px; }
.billing-filters .btn, .billing-operator > .btn { max-width: 300px; }
.billing-workspace { display: flex; flex-direction: column; gap: 16px; }
.billing-workspace > .card { margin-bottom: 0; }
.billing-incomplete { margin: 0; }
.billing-flight { padding: 14px 0; border-bottom: 1px solid var(--divider); }
.billing-flight:first-child { padding-top: 0; }
.billing-flight:last-child { border-bottom: 0; padding-bottom: 0; }
.billing-flight-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 10px; }
.billing-flight .btn { max-width: 240px; min-height: 44px; font-size: 14px; }
.billing-preview { margin-top: 10px; }
.billing-preview .msg { margin-bottom: 8px; }
.billing-warn { background: rgba(217,164,65,.14); color: var(--amber); border: 1px solid rgba(217,164,65,.4); }
.preview-line, .rate-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.preview-line small, .rate-row small, .statement-line small, .statement-amount small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.billing-preview > .btn { margin-top: 12px; max-width: 340px; }
.billing-time-review { background: var(--navy-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.billing-time-review h3 { margin: 0 0 8px; font-family: var(--font-display); text-transform: none; letter-spacing: .01em; font-size: 15px; }
.billing-time-review .billing-hint { margin: 0 0 12px; }
.billing-evidence { display: flex; flex-direction: column; gap: 3px; background: rgba(255,255,255,.035); border-left: 3px solid var(--orange); padding: 10px 12px; margin: 0 0 12px; font-size: 13px; }
.billing-evidence span, .billing-terms-grid small { color: var(--muted); }
.billing-time-grid { display: grid; grid-template-columns: 1fr; gap: 0 10px; }
.billing-terms-grid, .billing-ground-quote { display: grid; grid-template-columns: 1fr; gap: 0 10px; }
.billing-quote-toggle { display: flex; align-items: center; gap: 9px; margin: 6px 0 12px; }
.billing-quote-toggle input { width: auto; margin: 0; }
.billing-ground-quote.hidden { display: none; }
.billing-time-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.billing-time-actions .btn { width: auto; flex: 1 1 210px; }
.statement-brand { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--divider); }
.statement-brand img { width: 130px; }
.statement-brand h2 { margin: 0; }
.statement-warning { margin: 12px 0; padding: 10px; border: 2px solid var(--amber); color: var(--amber); font-weight: 800; }
.statement-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; color: var(--muted); font-size: 13px; padding: 12px 0; }
.statement-lines { border-top: 1px solid var(--divider); }
.statement-line { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.statement-line.void { opacity: .58; text-decoration: line-through; }
.statement-amount { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.statement-totals { margin-left: auto; max-width: 380px; padding-top: 14px; }
.statement-totals > div { display: flex; justify-content: space-between; gap: 30px; padding: 5px 0; }
.statement-totals .account-total { border-top: 2px solid var(--text); margin-top: 8px; padding-top: 10px; font-size: 18px; }
.billing-export-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.billing-entry-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.billing-entry-grid form { min-width: 0; }
.billing-entry-grid h3, .billing-history h3, .billing-corrections h3 { font-family: var(--font-display); text-transform: none; letter-spacing: .01em; font-size: 15px; margin: 8px 0 12px; }
.form-msg { margin-top: 10px; }
.billing-history, .billing-corrections { margin-top: 18px; }
.correction-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: 13px; }
.correction-row .linkbtn { flex: none; }
.correction-row small { display: block; color: var(--muted); }
.void-history { opacity: .72; }
.linkbtn.danger { color: var(--red); }
.square-evidence { padding: 0; overflow: hidden; }
.square-evidence > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; cursor: pointer; list-style: none; }
.square-evidence > summary::-webkit-details-marker { display: none; }
.square-evidence > summary span:first-child { display: flex; flex-direction: column; gap: 3px; }
.square-evidence > summary strong { font-family: var(--font-display); font-size: 18px; }
.square-evidence > summary small { color: var(--muted); }
.square-chevron { font-size: 22px; transition: transform .15s ease; }
.square-evidence[open] .square-chevron { transform: rotate(180deg); }
.square-body { border-top: 1px solid var(--divider); padding: 16px 20px 20px; }
.square-status-wrap { display: flex; align-items: flex-start; gap: 12px; }
.square-status-wrap > [data-square-status] { flex: 1; min-width: 0; }
.square-status-wrap > .linkbtn { flex: none; margin-top: 8px; }
.square-links { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.square-links h3, .square-links h4 { font-family: var(--font-display); text-transform: none; letter-spacing: .01em; }
.square-links h3 { margin: 0; font-size: 15px; }
.square-links h4 { margin: 14px 0 6px; font-size: 13px; }
.square-links-head p, .square-link-student small, .square-link-row small, .square-link-history small { display: block; color: var(--muted); font-size: 12px; margin: 3px 0 0; }
.square-link-student { padding: 10px 0; border-bottom: 1px solid var(--divider); }
.square-link-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.square-link-row.inactive { opacity: .7; }
.square-link-history { padding: 7px 0; border-bottom: 1px solid var(--divider); font-size: 12px; }
.square-link-review { margin-top: 12px; padding: 14px; border: 1px solid var(--orange); border-radius: 10px; background: var(--navy-2); }
.square-link-review > h4 { margin-top: 0; }
.square-identity-compare { display: grid; grid-template-columns: 1fr; gap: 10px; }
.square-identity-compare > div { padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.square-identity-compare span, .square-identity-compare small { display: block; color: var(--muted); font-size: 12px; }
.square-link-scope { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.square-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 10px 12px; border: 1px solid rgba(74,190,130,.35); background: rgba(74,190,130,.1); border-radius: 9px; }
.square-status span { color: var(--muted); font-size: 13px; }
.square-panes { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.square-panes[hidden] { display: none; }
.square-pane { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--navy-2); }
.square-pane h3 { margin: 0 0 8px; font-family: var(--font-display); text-transform: none; letter-spacing: .01em; font-size: 15px; }
.square-search-row, .square-date-row { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: end; }
.square-search-row .btn, .square-date-row .btn, .square-pane > .btn { min-height: 44px; font-size: 14px; }
.square-pane > [data-customer-more], .square-pane > [data-catalog-more], .square-pane > [data-payment-more] { margin-top: 10px; }
.square-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: 13px; }
.square-row > div { min-width: 0; }
.square-row small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.square-row code { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.square-coverage { color: var(--amber); font-size: 12px; padding: 9px 0 3px; }
.square-order { margin-top: 14px; padding: 12px; border: 1px solid var(--orange); border-radius: 9px; }
.square-order h4 { margin: 0 0 5px; }
.square-order-total { color: var(--muted); font-size: 12px; }
.square-receipts .sec-head { align-items: flex-start; }
.square-receipt-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.square-receipt-row > div { min-width: 0; }
.square-receipt-row small, .square-receipt-evidence small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.square-receipt-row.linked { opacity: .78; }
.square-receipt-review { margin-top: 14px; padding: 16px; border: 1px solid var(--orange); border-radius: 10px; background: var(--navy-2); }
.square-receipt-review h3, .square-receipt-review h4 { margin-top: 0; font-family: var(--font-display); text-transform: none; letter-spacing: .01em; }
.square-receipt-review fieldset { margin: 14px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.square-receipt-review label, .square-receipt-review legend { font-size: 14px; }
.square-receipt-review .check { display: flex; align-items: center; gap: 9px; min-height: 44px; margin: 4px 0; font-weight: 500; }
.square-receipt-review .check input { width: auto; margin: 0; }
.square-receipts .linkbtn { min-height: 44px; font-size: 14px; }
.square-receipt-evidence, .square-receipt-confirm { margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.square-receipt-review [hidden] { display: none; }
.square-receipt-review dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; font-size: 13px; }
.square-receipt-review dt { color: var(--muted); }
.statement-collection-hold { color: var(--amber); font-size: 12px; text-align: right; }

@media (min-width: 720px) {
  .billing-filter-grid { grid-template-columns: 2fr 1fr 1fr; }
  .billing-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .billing-entry-grid { grid-template-columns: 1fr 1fr; }
  .billing-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .billing-terms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-ground-quote { grid-template-columns: 1fr 1fr 2fr; }
  .square-search-row { grid-template-columns: 1fr 2fr auto; }
  .square-date-row { grid-template-columns: 1fr 1fr auto; }
  .square-identity-compare { grid-template-columns: 1fr 1fr; }
}

@media print {
  body { background: #fff; color: #111; font: 11pt/1.35 Arial, sans-serif; }
  #envmark, #envframe, .tabbar, .syncbar, .billing-screen > .brand, .billing-filters,
  .billing-incomplete, .billing-review, .billing-conflicts, .billing-export-actions, .billing-operator, #squareEvidence,
  .billing-workspace > .msg, #billingMsg { display: none !important; }
  .app, .shell, .screen-host, .billing-screen, .billing-workspace { display: block; max-width: none; min-height: 0; padding: 0; margin: 0; }
  .statement-print { display: block !important; background: #fff; color: #111; padding: 0; margin: 0; }
  .statement-brand, .statement-lines, .statement-line, .statement-totals .account-total { border-color: #aaa; }
  .statement-brand img { filter: none; }
  .muted, .statement-meta, .statement-line small, .statement-amount small { color: #444; }
  .statement-warning { color: #8a5100; border-color: #8a5100; }
  .statement-line { break-inside: avoid; }
}

/* Operational workspace: the same components on phone and desktop. */
@media screen {
  [hidden] { display: none !important; }
  body { line-height: 1.5; }
  .app { max-width: none; box-shadow: none; }
  .screen { padding: 28px 18px 108px; }
  .brand { margin: 0 0 25px; }
  .brand .logo { display: none; }
  .brand h1 { font-size: 32px; line-height: 1.15; letter-spacing: -.035em; }
  .brand .sub { margin-top: 7px; font-size: 14px; }
  .app > .screen { width: 100%; max-width: 440px; margin: 0 auto; padding-top: 9vh; }
  .app > .screen .brand .logo { display: block; height: 20px; margin-bottom: 16px; }
  .app > .screen .brand { display: block; }
  h2 { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
  label { font-size: 13px; font-weight: 600; letter-spacing: 0; }
  input, select, textarea { accent-color: var(--orange); }
  textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
  .btn { background: var(--action); color: #281d13; font-size: 15px; font-weight: 650; letter-spacing: 0; border-radius: 7px; }
  .btn.secondary { background: var(--navy-2); color: var(--text); }
  .btn.ghost { background: transparent; color: var(--muted); }
  .btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
  .btn[disabled] { cursor: not-allowed; }
  .card { border: 1px solid var(--line); }
  .chip { border-radius: 7px; font-size: 14px; }
  .chip.on { background: var(--press); border-color: var(--muted); color: var(--text); box-shadow: inset 0 -2px 0 var(--muted); }
  .pill { font-size: 12px; font-weight: 550; letter-spacing: 0; }
  .pill.tail { background: var(--navy-2); color: var(--text); }
  .linkbtn, .banner-btn { min-height: 44px; }
  .rowcard { border-radius: 7px; border: 1px solid var(--line); }
  .rowcard .name { font-weight: 650; }
  .avatar { background: var(--navy-2); color: var(--muted); }
  .hf-val { font-size: clamp(24px, 6vw, 34px); font-variant-numeric: tabular-nums; }
  .hf-crop { cursor: zoom-in; object-fit: contain; }
  .hf-note { font-size: 12px; }
  .dur-line { color: var(--text); padding: 10px 0 15px; border-bottom: 1px solid var(--divider); }
  .savebar { border-top: 1px solid var(--line); background: var(--panel); box-shadow: 0 -5px 18px rgba(20,28,12,.04); padding: 12px 0; }
  .fcard > .savebar { position: static; display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; }
  .fcard > .savebar .btn { flex: 1 1 130px; width: auto; }
  .fcard > .savebar .danger { flex: 1 1 100%; }
  .shell-topbar { display: flex; gap: 12px; align-items: center; padding: 6px 16px; border-bottom: 1px solid var(--divider); min-height: 55px; }
  .shell-topbar > strong { letter-spacing: -.025em; }
  .nav-tool { border: 0; background: transparent; color: inherit; font: inherit; text-align: left; min-height: 44px; padding: 7px 8px; cursor: pointer; font-size: 13px; }
  .account-menu { position: relative; font-size: 13px; }
  .account-menu summary { cursor: pointer; padding: 12px 0; }
  .account-menu > div { position: absolute; z-index: 30; right: 0; width: 230px; padding: 16px; background: var(--panel); box-shadow: var(--shadow-elevated); border: 1px solid var(--line); border-radius: 8px; overflow-wrap: anywhere; }
  .account-menu > div > span { display: block; }
  .tabbar { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; background: var(--rail-surface); color: var(--rail-text); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-color: transparent; }
  .nav-links { display: flex; width: 100%; gap: 4px; }
  .nav-brand, .nav-tools { display: none; }
  .tab { color: var(--rail-muted); min-width: 0; min-height: 55px; padding: 5px 2px; font-size: 11px; letter-spacing: 0; border-radius: 6px; }
  .tab .ic { width: 20px; height: 20px; flex: none; }
  .tab.active { color: var(--rail-text); background: #ffffff13; box-shadow: none; }
  .tab:focus-visible { outline: 2px solid #f3a16c; outline-offset: 1px; }
  .workspace-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-bottom: 30px; }
  .workspace-eyebrow, .workspace-kicker { font-size: 12px; font-weight: 650; color: var(--muted); margin: 0 0 7px; }
  .workspace-title { margin: 0; font-size: clamp(30px, 3.3vw, 38px); line-height: 1.1; letter-spacing: -.045em; font-weight: 700; }
  .workspace-subtitle { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
  .workspace-actions, .workspace-callout-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .workspace-actions .btn, .workspace-callout-actions .btn { width: auto; min-height: 48px; }
  .workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .workspace-panel { min-width: 0; margin-bottom: 26px; }
  .workspace-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 13px; }
  .workspace-panel-head h2 { margin: 0; }
  .workspace-panel-head .btn { width: auto; min-height: 44px; padding: 0 12px; }
  .workspace-list { border: 1px solid var(--line); background: var(--panel); border-radius: 9px; overflow: hidden; }
  .workspace-row { width: 100%; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--divider); }
  .workspace-row:last-child { border-bottom: 0; }
  button.workspace-row { cursor: pointer; }
  button.workspace-row:hover { background: var(--press); }
  .workspace-row-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .workspace-row-title { font-size: 16px; font-weight: 650; margin: 0; }
  .workspace-row-meta { color: var(--muted); font-size: 13px; margin-top: 5px; overflow-wrap: anywhere; }
  .workspace-row-action { flex: none; font-size: 13px; color: var(--orange); }
  .workspace-row .btn { width: auto; min-height: 44px; }
  .workspace-empty, .workspace-error { padding: 26px 20px; font-size: 14px; color: var(--muted); }
  .workspace-error { color: var(--red); }
  .workspace-toolbar { margin-bottom: 24px; }
  .workspace-search { width: 100%; }
  .workspace-filters { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
  .workspace-count { font-size: 13px; color: var(--muted); margin: 14px 0; }
  .workspace-load-more { margin: 20px 0; }
  .workspace-callout { border: 1px solid var(--line); border-left: 3px solid var(--action); background: var(--panel); border-radius: 9px; padding: 24px; margin-bottom: 30px; }
  .workspace-callout h2 { font-size: 25px; margin: 4px 0 12px; }
  .workspace-callout p { color: var(--muted); }
  .workspace-callout-actions { margin-top: 20px; }
  .workspace-stat { font-size: 28px; font-weight: 650; font-variant-numeric: tabular-nums; }
  .today-aircraft select { min-width: 150px; margin-bottom: 0; }
  .review-summary { margin-bottom: 25px; }
  .review-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
  .review-links .btn { width: auto; }
  .billing-screen .billing-filters, .billing-screen .billing-operator { background: transparent; }
  .billing-screen .billing-filters { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 24px; }
  .billing-screen details.billing-operator { margin-top: 24px; }
  .billing-screen details.billing-operator > summary { cursor: pointer; font-weight: 650; min-height: 44px; display: list-item; padding: 10px 0; }
  .billing-screen details.billing-operator > summary + div { padding-top: 16px; }
  .student-workspace { display: grid; gap: 28px; }
  .student-facts { display: flex; flex-wrap: wrap; gap: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; }
  .student-facts .stat { background: none; padding: 0; flex: 1 1 90px; }
  .student-notes { color: var(--text); white-space: pre-wrap; margin: 20px 0; }
  details.form-section { border-top: 1px solid var(--divider); padding: 14px 0; }
  details.form-section > summary { cursor: pointer; min-height: 44px; font-weight: 600; padding: 10px 0; }
  details.form-section[open] > summary { margin-bottom: 12px; }
  .record-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .record-summary strong { display: block; }
  .record-summary small { color: var(--muted); }
  @media (max-width: 480px) {
    .workspace-row { padding: 16px; gap: 12px; flex-wrap: wrap; }
    .workspace-row-main { flex-basis: calc(100% - 55px); }
    .workspace-row .btn { width: 100%; }
    .workspace-callout { padding: 20px; }
    .workspace-actions .btn, .workspace-callout-actions .btn { flex: 1 1 130px; }
    .workspace-title { font-size: 32px; }
    .field-grid { gap: 10px; }
    .ground-ctl { flex-wrap: wrap; }
    .shell-topbar { gap: 7px; }
  }
  @media (min-width: 700px) {
    .workspace-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 900px) {
    :root { --rail-w: 216px; --content-w: 1200px; --pad-x: 44px; }
    .shell-topbar { display: none; }
    .shell { min-height: 100vh; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
    .tabbar { position: sticky; left: auto; right: auto; top: 0; height: 100vh; border: 0; padding: 28px 14px 18px; }
    .nav-links { flex-direction: column; }
    .nav-brand { display: flex; flex-wrap: wrap; gap: 5px 10px; padding: 0 10px 34px; color: var(--rail-text); }
    .nav-brand img { width: 25px; height: 23px; object-fit: cover; object-position: left; }
    .nav-brand strong { font-size: 18px; letter-spacing: -.035em; }
    .nav-brand span { width: 100%; font-size: 11px; color: var(--rail-muted); }
    .nav-tools { display: flex; flex-direction: column; gap: 2px; padding: 18px 8px 0; margin-top: auto; color: var(--rail-muted); border-top: 1px solid #ffffff15; }
    #shellVersion { font-size: 11px; padding: 8px; }
    .tab { font-size: 14px; min-height: 48px; padding: 0 13px; justify-content: flex-start; }
    .tab.active { box-shadow: inset 3px 0 0 var(--action); }
    .screen { padding: 48px var(--pad-x) 64px; }
    .workspace-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
    .workspace-callout { padding: 30px; }
    .screen:has(#logCard) { display: block; max-width: 880px; }
    .screen:has(#pills) { max-width: 990px; }
    .screen:has(#list):not(:has(#picker)) > #list { grid-template-columns: 1fr; }
    .screen:has(#totals) > #flights { grid-template-columns: 1fr; }
    .fcard > .savebar { position: static; }
    .workspace-search { max-width: 500px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
}

@media screen {
  .flight-review-card { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 24px; }
  .flight-record-context { margin: 25px 0 22px; }
  .flight-record-context strong { display: block; font-size: 28px; letter-spacing: -.035em; line-height: 1.2; }
  .flight-record-context span { display: block; margin-top: 7px; color: var(--muted); font-size: 14px; }
  .flight-draft-state { color: var(--muted); font-size: 12px; margin-bottom: 20px; }
  .flight-draft-state.warn { color: var(--amber); border: 1px solid var(--amber); padding: 10px; border-radius: 6px; }
  .flight-evidence .hobbs-grid { max-width: none; }
  .flight-identity, .flight-training { border-top: 1px solid var(--divider); padding: 10px 0; }
  .flight-identity > summary, .flight-training > summary { cursor: pointer; padding: 12px 0; min-height: 48px; font-size: 14px; font-weight: 600; }
  .flight-summary-value { color: var(--muted); font-size: 13px; font-weight: 450; padding-left: 12px; }
  .flight-identity-fields, .flight-training-fields { padding: 14px 0 8px; }
  .flight-identity input[type=date] { max-width: 250px; }
  .flight-debrief { margin: 22px 0; }
  .flight-debrief label { font-size: 18px; font-weight: 650; color: var(--text); margin-bottom: 12px; }
  .flight-debrief textarea { margin-bottom: 5px; background: transparent; }
  .field-note { font-size: 12px; color: var(--muted); }
  .decimal-stepper { display: flex; flex-direction: column; gap: 10px; }
  .decimal-stepper input { max-width: 160px; margin-bottom: 0; }
  .hf-photo-open { display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); text-decoration: none; }
  .hf-photo-open:hover { color: var(--orange); text-decoration: underline; }
  .hf-evidence-image { width: 86px; height: 64px; object-fit: contain; border-radius: 4px; }
  .capture-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 24px; }
  .capture-head h1 { font-size: 30px; letter-spacing: -.035em; margin: 0; }
  .capture-head .btn { width: auto; }
  .capture-screen #logCard { border: 0; background: transparent; padding: 0; }
  .capture-screen .log-head { margin-bottom: 20px; }
  .capture-screen .log-head h2 { display: none; }
  .capture-screen .acf-switch { justify-content: flex-start; }
  .capture-screen .footer-badge { display: none; }
  .nav-brand { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nav-brand strong { order: 0; font-size: 22px; }
  .nav-brand img { order: 1; width: 142px; height: auto; object-fit: contain; }
  .nav-brand span { display: none; }
  input[type=search] { width: 100%; min-height: 56px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; color: var(--text); font: 16px var(--font-body); margin: 8px 0 16px; }
  .workspace-header > .btn { width: auto; }
  @media (max-width: 600px) {
    .flight-review-card { padding: 16px; }
    .flight-summary-value { display: block; padding: 5px 0 0 17px; }
    .hf-evidence-image { width: 64px; height: 55px; }
    .flight-evidence .hf-body { flex-wrap: wrap; }
    .flight-training-fields > .field-grid { grid-template-columns: 1fr; }
    .flight-record-context strong { font-size: 25px; }
  }
}

@media screen {
  #app > .screen { max-width: 500px; margin: 6vh auto; }
  #app > .screen .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  #app > .screen .brand .logo { display: block; width: 190px; height: auto; }
  .login-form { padding: 26px; }
  .student-roster, .student-detail { min-width: 0; }
  .student-detail { scroll-margin-top: 20px; }
  .student-detail-head { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 24px; }
  .student-detail-head h2 { font-size: 28px; letter-spacing: -.035em; margin: 6px 0 10px; }
  .student-detail-actions, .student-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .student-detail-actions .btn { width: auto; }
  .student-list .workspace-row[aria-current="true"] { background: var(--press); box-shadow: inset 3px 0 var(--action); }
  .student-status-filter { margin-bottom: 18px; }
  .student-mobile-back { margin-bottom: 20px; }
  @media (min-width: 900px) {
    .student-workspace { grid-template-columns: minmax(260px,.8fr) minmax(0,1.5fr); align-items: start; }
    .student-mobile-back { display: none; }
  }
  @media (max-width: 899px) {
    .students-screen .student-workspace.detail-open .student-roster { display: none; }
    .students-screen .student-workspace:not(.detail-open) .student-detail { display: none; }
  }
}

@media screen {
  .workspace-row-title, .workspace-row-meta { display: block; }
  .students-screen [aria-label="Student filters"] { display: grid; gap: 20px; grid-template-columns: minmax(0,1fr); align-items: end; }
  .students-screen [aria-label="Student filters"] label { margin: 0; }
  .students-screen [aria-label="Student filters"] input, .students-screen [aria-label="Student filters"] select { margin-bottom: 0; }
  .student-detail details > summary { min-height: 48px; cursor: pointer; font-weight: 600; padding: 12px 0; }
  .student-detail .stat { text-align: left; }
  .student-detail .stat-val { font-family: var(--font-body); font-size: 22px; font-style: normal; }
  @media (max-width:899px) {
    .students-screen [aria-label="Student filters"] { grid-template-columns: 1fr; gap: 8px; }
    .students-screen:has(.student-workspace.detail-open) [aria-label="Student filters"] { display:none; }
  }
}

@media screen {
  .stale-draft-review { color:var(--text); margin:12px 0; }
  .stale-draft-review > summary { cursor:pointer; font-size:14px; font-weight:600; min-height:44px; padding:10px 0; }
  .stale-draft-value { display:grid; grid-template-columns:minmax(90px,.4fr) minmax(0,1fr); gap:12px; padding:8px 0; border-top:1px solid var(--line); }
  .stale-draft-value span { white-space:pre-wrap; overflow-wrap:anywhere; }
}

@media screen {
  .invoice-drafts { margin-top: 28px; background: transparent; }
  .invoice-drafts .student-workspace { gap: 24px; margin-top: 24px; }
  .invoice-summary { display:flex; flex-wrap:wrap; gap:24px; border-bottom:1px solid var(--line); padding:16px 0; }
  .invoice-summary > div { flex:1 1 90px; }
  .invoice-summary span, .invoice-review-grid span { display:block; color:var(--muted); font-size:13px; margin-bottom:5px; }
  .invoice-summary strong { font-size:24px; font-variant-numeric:tabular-nums; }
  .invoice-review-grid > div { min-width: 130px; flex:1 1 130px; overflow-wrap:anywhere; }
  .invoice-drafts details > summary { cursor:pointer; min-height:44px; padding:12px 0; font-weight:600; }
  .invoice-drafts .workspace-row { gap:12px; flex-wrap:wrap; }
  .invoice-drafts .workspace-row > span:first-child { flex:1; min-width:0; }
  .invoice-drafts .selected { background:var(--press); }
  .invoice-recovery { margin:18px 0; }
  .invoice-recovery .btn { margin-top:12px; }
  .invoice-disabled { color:var(--muted); background:var(--navy-2); border-color:var(--line); }
  .invoice-create { min-width:0; }
  .invoice-create fieldset { margin:18px 0; padding:14px; border:1px solid var(--line); border-radius:10px; }
  .invoice-create legend { padding:0 6px; font-weight:650; }
  .invoice-create .check { display:flex; align-items:center; gap:10px; min-height:44px; margin:4px 0; font-size:14px; }
  .invoice-create .check input { width:auto; margin:0; flex:0 0 auto; }
  .invoice-charge-choice span { min-width:0; overflow-wrap:anywhere; }
  .invoice-tax-assignment { margin:4px 0 14px 30px; padding:12px; border-left:2px solid var(--orange); }
  .invoice-create-section { margin-top:22px; align-items:flex-start; }
  .invoice-create [data-tax-group] { background:var(--navy-2); }
  .invoice-create .linkbtn { min-height:44px; font-size:14px; }
  .invoice-create-confirm { margin-top:18px; padding:16px; border:1px solid var(--orange); border-radius:10px; }
  .invoice-create-pending { margin-top:8px; }
  .invoice-drafts > .sec-head { gap:16px; justify-content:space-between; }
  .invoice-drafts > .sec-head > [data-prepare] { width:auto; flex:0 0 auto; }
  @media(max-width:899px) { .invoice-drafts .student-workspace { display:block; } .invoice-detail { margin-top:28px; } }

  .invoice-publication-panel { border-top:1px solid var(--line); margin-top:24px; padding-top:24px; }
  .invoice-publication-panel label, .invoice-publication-panel .check { font-size:14px; }
  .invoice-publication-panel .check { min-height:44px; display:flex; align-items:center; gap:10px; }
  .invoice-publication-panel textarea { width:100%; }
  .invoice-publication-confirm { border:1px solid var(--line); border-radius:12px; margin-top:18px; padding:16px; }
  .invoice-publication-panel > .btn, .invoice-publication-confirm > .btn { min-height:44px; }
  .invoice-correction-panel { border-top:1px solid var(--line); margin-top:24px; padding-top:24px; }
  .invoice-correction-panel label { font-size:14px; }
  .invoice-correction-panel textarea { width:100%; }
  .invoice-correction-panel details > summary { min-height:44px; }
  .invoice-correction-panel > .btn, .invoice-correction-confirm > .btn { min-height:44px; }
  .invoice-correction-confirm { border:1px solid var(--line); border-radius:12px; margin-top:18px; padding:16px; }
  .invoice-correction-panel .invoice-summary span,
  .invoice-correction-panel .invoice-review-grid span,
  .invoice-correction-panel .workspace-row-meta,
  .invoice-correction-panel .invoice-review-grid small { font-size:14px; line-height:1.45; }
  .invoice-correction-panel .invoice-review-grid small { display:block; margin-top:4px; color:var(--muted); overflow-wrap:anywhere; }
  @media(max-width:520px) {
    .invoice-drafts > .sec-head, .invoice-create .sec-head { align-items:stretch; flex-direction:column; }
    .invoice-drafts > .sec-head .btn, .invoice-create .sec-head .btn { width:100%; }
    .invoice-tax-assignment { margin-left:0; }
  }
}

@media screen { .today-grid:has(>section[hidden]) { grid-template-columns:1fr; } }

@media screen and (max-width:480px) {
  .student-history .workspace-panel-head { align-items:flex-start; flex-direction:column; gap:8px; }
  .student-history .workspace-panel-head .workspace-actions { gap:16px; }
  .student-history .workspace-panel-head .btn { padding:0; min-height:44px; flex:0 0 auto; }
}

/* Student account overview: existing Students workspace, all-time statement data. */
.student-account { margin: 8px 0 28px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.student-account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.student-account-stat { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.student-account-stat dt { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.student-account-stat dd { margin: 0; font-size: clamp(18px, 2vw, 25px); font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.student-account-balance { border-color: var(--orange); }
.student-account-warning { border-left: 3px solid var(--orange); padding: 10px 14px; font-size: 14px; line-height: 1.55; }
.student-account-note { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 14px 0 20px; }
.student-account .workspace-panel-head { flex-wrap: wrap; gap: 12px; }
.student-account h3 { font-size: 15px; margin: 0; }
.student-account .btn { min-height: 44px; }
.student-account-transaction { display: flex; gap: 14px; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.student-account-transaction > div { min-width: 0; overflow-wrap: anywhere; }
.student-account-transaction > div:last-child { flex: 0 0 36%; text-align: right; font-variant-numeric: tabular-nums; }
.student-account-transaction span { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.student-account-transaction.void { opacity: .65; }
@media (max-width: 600px) { .student-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .student-account-stat { padding: 12px; } }

@media screen and (max-width:899px) {
  .tabbar { isolation:isolate; background-color:var(--rail-surface); box-shadow:0 -8px 24px rgba(0,0,0,.22); }
}

.syncbar-issues { max-width: 42rem; margin: 8px auto 0; text-align: left; overflow-wrap: anywhere; }
.syncbar-issues ul { max-height: 10rem; overflow-y: auto; padding-left: 1.4rem; }
.syncbar { font-size: 14px; }
.syncbar-issues summary { min-height: 44px; display: list-item; padding-block: 12px; cursor: pointer; }
.syncbar-fail .btn.sm { min-height: 44px; font-size: 14px; }

/* Private evidence review — one dated decision, generous controls on phones. */
.evidence-review-screen { max-width: 1040px; margin-inline: auto; }
.evidence-review-screen h1 { font-size: 24px; margin: 0; }
.evidence-review-screen .sec-head { gap: 14px; justify-content: flex-start; }
#review-progress { font-size: 16px; font-weight: 650; margin: 12px 0; }
.evidence-review-screen .sec-head > span { margin-left: auto; font-size: 13px; }
.evidence-review-options { margin-block: 8px 12px; }
.evidence-review-options > summary { min-height: 36px; padding-block: 8px; cursor: pointer; color: var(--muted); }
.evidence-scope-label { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.evidence-scope-label select { margin: 0; width: auto; min-width: 230px; }
.evidence-review-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.evidence-review-filters > label { flex: 1 1 250px; }
.evidence-review-filters select { margin-bottom: 0; }
.evidence-review-screen .chip { min-height: 48px; white-space: normal; }
.evidence-review-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 16px; }
.evidence-review-card { border: 1px solid var(--line); padding: clamp(16px,3vw,28px); }
.evidence-review-date { color: var(--orange); font-size: 21px; font-weight: 700; margin: 0 0 8px; }
.evidence-review-card h2 { font-size: 21px; line-height: 1.3; margin: 0 0 12px; }
.evidence-review-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.evidence-item-time { font-size: 13px; margin: 0; }
.evidence-review-factgrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; background: var(--navy-2); padding: 16px; border-radius: 10px; }
.evidence-review-factgrid span,.evidence-review-factgrid strong { display: block; overflow-wrap: anywhere; }
.evidence-review-factgrid span { color: var(--muted); font-size: 13px; margin-bottom: 5px; }
.evidence-review-card details { margin-block: 16px; }
.evidence-review-card summary { min-height: 44px; padding-block: 12px; cursor: pointer; }
.evidence-review-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.evidence-context-block { border-left: 3px solid var(--orange); padding: 12px 16px; margin-block: 16px; }
.evidence-context-block ul { padding-left: 20px; margin-bottom: 0; }
.evidence-review-media { display: block; }
.evidence-photo-source { padding-block: 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.evidence-review-media figure { margin: 0; min-width: 0; }
.evidence-review-media a { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--navy-2); }
.evidence-review-media img { display: block; width: 100%; height: 260px; object-fit: contain; }
.evidence-review-media figcaption { padding: 10px 0 18px; font-size: 13px; overflow-wrap: anywhere; }
.evidence-review-media figcaption span { display: block; color: var(--muted); margin-top: 6px; }
.evidence-review-answer { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.evidence-review-answer label { font-size: 14px; margin-top: 12px; }
.evidence-review-choices { margin-bottom: 12px; }
.evidence-confirm-summary { padding: 10px 12px; border-left: 3px solid var(--orange); background: var(--orange-soft); font-size: 14px; }
.evidence-review-save { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding-block: 8px; background: var(--panel); }
.evidence-review-save .btn { min-height: 48px; }
.evidence-review-error { margin-top: 16px; }
.evidence-review-work { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 24px; align-items: start; }
.evidence-review-work .evidence-review-answer { margin-top: 0; padding-top: 0; border-top: 0; min-width: 0; }
.evidence-review-primary { position: sticky; top: 16px; min-width: 0; }
.evidence-review-primary figure { margin: 0; }
.evidence-review-primary a { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--navy-2); }
.evidence-review-primary img { display: block; width: 100%; height: clamp(280px,48vh,420px); object-fit: contain; }
.evidence-review-primary figcaption { padding-block: 8px; font-size: 13px; }
.evidence-review-primary figcaption span { display: block; margin-top: 6px; color: var(--muted); }
.evidence-review-support { border-top: 1px solid var(--line); }
.evidence-review-brief { color: var(--muted); line-height: 1.5; }
.evidence-photo-navigation { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.evidence-photo-navigation .btn { font-size: 13px; min-height: 44px; padding: 8px; }
.evidence-photo-navigation span { font-size: 13px; white-space: nowrap; }
.evidence-meter-viewer { max-width: 580px; margin-block: 16px; }
.evidence-meter-viewer figure { margin: 0; }
.evidence-meter-viewer img { display: block; width: 100%; height: 300px; object-fit: contain; background: var(--navy-2); }
.evidence-meter-viewer figcaption { font-size: 13px; padding-block: 8px; }
.evidence-meter-viewer figcaption span { display: block; color: var(--muted); margin-top: 6px; }
.evidence-no-photo { min-height: 220px; display: flex; flex-direction: column; justify-content: center; border: 1px dashed var(--line); border-radius: 10px; padding: 24px; color: var(--muted); }
.evidence-no-photo strong { color: var(--text); }
.evidence-source-choices h4 { margin-bottom: 8px; }
.evidence-source-choices { margin-bottom: 16px; }
@media(max-width:700px) { .evidence-review-work { grid-template-columns: 1fr; gap: 18px; } .evidence-review-primary { position: static; } .evidence-review-primary img { height: clamp(190px,28vh,270px); } .evidence-review-brief { font-size: 13px; } .evidence-no-photo { min-height: 120px; padding: 16px; } }
@media(max-width:520px) { .evidence-review-media { grid-template-columns: 1fr; } .evidence-review-media img { height: 300px; } .evidence-review-factgrid { gap: 14px 10px; padding: 12px; } .evidence-review-navigation { gap: 8px; } }