:root{
  --paper:#0A131A;
  --paper-alt:#142530;
  --card:#101E29;
  --ink:#EAF3FA;
  --ink-soft:#7E9AAC;
  --accent:#3B9EFF;
  --accent-dark:#1C7ED6;
  --cyan:#22D3EE;
  --cyan-dark:#0FB8C9;
  --grad-accent: linear-gradient(135deg, var(--accent), var(--cyan));
  --grad-accent-hover: linear-gradient(135deg, var(--accent-dark), var(--cyan-dark));
  --signal:#34D399;
  --seal:#FF6B6B;
  --warn:#F5A524;
  --line: rgba(180,215,240,0.14);
  --shadow: rgba(0,0,0,0.45);
  --glow: rgba(59,158,255,0.22);
  --radius: 3px;
  --radius-lg: 10px;
  --paper-deep:#060B10;
  --wash-1: rgba(59,158,255,0.16);
  --wash-2: rgba(34,211,238,0.10);
  --glow-1: rgba(59,158,255,0.12);
  --glow-2: rgba(34,211,238,0.05);
  --hover-tint: rgba(59,158,255,0.14);
  --row-selected: rgba(59,158,255,0.32);
}

:root[data-theme="light"]{
  --paper:#F3F8FC;
  --paper-alt:#E5F0F8;
  --paper-deep:#FFFFFF;
  --card:#FFFFFF;
  --ink:#0B2A3D;
  --ink-soft:#5C7A8C;
  --accent:#1C6FC9;
  --accent-dark:#0F4E92;
  --cyan:#0EA5B7;
  --cyan-dark:#0B8593;
  --line: rgba(15,60,90,0.14);
  --shadow: rgba(15,60,90,0.10);
  --glow: rgba(28,111,201,0.16);
  --wash-1: rgba(28,111,201,0.10);
  --wash-2: rgba(14,165,183,0.08);
  --glow-1: rgba(28,111,201,0.10);
  --glow-2: rgba(14,165,183,0.06);
  --hover-tint: rgba(28,111,201,0.12);
  --row-selected: #CFE8FB;
  --signal:#047857;
  --seal:#B91C1C;
  --warn:#92400E;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(1100px 650px at 92% -8%, var(--wash-1), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, var(--wash-2), transparent 55%),
    linear-gradient(180deg, var(--paper), var(--paper-deep) 60%);
  color:var(--ink);
  font-family:'Public Sans', system-ui, sans-serif;
  line-height:1.35;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

a{ color:var(--accent); }
code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:0.92em; padding:1px 6px; background:var(--paper-alt);
  border:1px solid var(--line); border-radius:var(--radius); color:var(--ink);
}

/* ---------- Titlebar ---------- */
.titlebar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
  position:relative;
}
.titlebar::before{
  content:"";
  position:absolute;
  top:50%; left:120px;
  transform:translateY(-50%);
  width:260px; height:110px;
  background:radial-gradient(ellipse closest-side, var(--glow-1), var(--glow-2) 55%, transparent 75%);
  filter:blur(16px);
  pointer-events:none;
}
.titlebar-logo{ height:30px; width:auto; position:relative; z-index:1; }
.titlebar-title{
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:15px;
  position:relative;
  z-index:1;
}
.titlebar-title .kicker{
  display:block;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
}
.titlebar-spacer{ flex:1 1 auto; }
.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  font-family:'Public Sans', sans-serif;
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
  position:relative; z-index:1;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--ink); }
.theme-toggle .theme-icon{ width:13px; height:13px; flex-shrink:0; color:currentColor; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

/* ---------- Menu bar ---------- */
.menubar{
  display:flex;
  align-items:center;
  gap:2px;
  padding:0 8px;
  background:var(--paper-alt);
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
  position:relative;
  z-index:30;
}
.menu{ position:relative; }
.menu-btn{
  background:none; border:none; color:var(--ink-soft);
  font-family:'Public Sans', sans-serif; font-size:12.5px; font-weight:600;
  padding:8px 12px; cursor:pointer; border-radius:var(--radius);
}
.menu-btn:hover{ color:var(--ink); background:var(--hover-tint); }
.menu.open .menu-btn{ color:var(--ink); background:var(--hover-tint); }
.menu-dropdown{
  display:none;
  position:absolute; top:100%; left:0;
  min-width:220px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 10px 28px var(--shadow);
  padding:6px;
  flex-direction:column;
}
.menu.open .menu-dropdown{ display:flex; }
.menu-dropdown button, .menu-item{
  display:block; width:100%; text-align:left;
  background:none; border:none; color:var(--ink);
  font-family:'Public Sans', sans-serif; font-size:12.5px;
  padding:7px 10px; border-radius:var(--radius); cursor:pointer;
}
/* .menu-item alone (not ".menu-dropdown button") covers the Help menu's
   plain <a class="menu-item"> entries (Donate!/Help & Documentation/View
   Changelog) -- those aren't <button>s, so the button-only hover rule
   never matched them and they sat there dead on hover. */
.menu-dropdown button:hover, .menu-item:hover{ background:var(--hover-tint); }
.menu-dropdown button:disabled{ opacity:0.4; cursor:not-allowed; }
.menu-dropdown button:disabled:hover{ background:none; }
.menu-sep{ height:1px; background:var(--line); margin:5px 2px; }
.menu-recent-label{ font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); padding:6px 10px 2px; }
.menu-empty{ font-size:11.5px; color:var(--ink-soft); padding:4px 10px 6px; }
/* A .menu nested inside another .menu-dropdown (e.g. Tools > Validate...)
   -- flies out to the right instead of dropping below, per explicit
   request. Reuses the same .menu/.menu-dropdown open-toggle mechanics as
   every top-level menu (see wireMenus()'s submenu branch for why a click
   here doesn't collapse the parent menu the way opening a sibling
   top-level menu does). */
.submenu-btn{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.submenu-caret{ width:10px; height:10px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0.6; }
/* left:100% with NO margin -- a real bug once, caught by explicit user
   report: a few px of margin-left here put a dead strip between the
   trigger's box and the dropdown that isn't covered by either one, and
   the flyout is a DOM child of .menu.submenu, so wireMenus()'s
   mouseenter/mouseleave pair (see its own comment) only stays open while
   the cursor is somewhere inside that box or its descendants -- crossing
   the gap put the cursor over the *ancestor* Tools dropdown instead (not
   a descendant), which fired a real mouseleave and closed the flyout
   before the cursor ever reached it. Flush against the trigger avoids the
   dead strip entirely instead of trying to widen the hoverable area. */
.menu.submenu > .submenu-dropdown{ top:-6px; left:100%; min-width:140px; }
/* .menu.open .menu-dropdown{display:flex} (above) is a descendant
   selector -- it also matches the submenu-dropdown just because it sits
   inside the *ancestor* Tools menu's own (open) .menu-dropdown, regardless
   of whether the submenu itself has been clicked open. That showed
   Validate's flyout the instant Tools opened, before any click on
   "Validate...". !important here isn't fighting a framework, just
   overriding this file's own lower-specificity ancestor rule on purpose. */
.submenu-dropdown{ display:none !important; }
.menu.submenu.open > .submenu-dropdown{ display:flex !important; }
/* Same descendant-selector problem as the display rule right above, but
   for the "open" highlight instead of visibility: .menu.open .menu-btn
   (near the top of this section) matches the submenu's OWN trigger
   button too, since it's a .menu-btn sitting inside the *ancestor* Tools
   menu's .menu-dropdown -- so "Validate..." looked permanently
   highlighted the instant Tools opened, with the mouse nowhere near it.
   Same !important-pair fix, scoped to the submenu's own open state.
   Idle color is var(--ink), NOT var(--ink-soft) -- .submenu-btn is a
   dropdown LIST ITEM (sits among plain siblings like "Add Column...",
   "Statistics...", all styled by ".menu-dropdown button{color:var(--ink)}")
   even though it also carries the .menu-btn class for its open/close
   mechanics; that class's own idle color (ink-soft, correct for the
   top-level File/Edit/Tools/... menu-bar buttons that dim until hovered)
   doesn't apply here. Using ink-soft made "Validate..." visibly dimmer
   than its own siblings when idle, and, combined with the shared
   ".menu-dropdown button:disabled{opacity:0.4}" rule, doubly-dim (instead
   of matching) when the whole Tools menu is disabled on an empty log. */
.submenu-btn{ color:var(--ink) !important; background:none !important; }
.menu.submenu.open > .submenu-btn{ color:var(--ink) !important; background:var(--hover-tint) !important; }
.submenu-btn:hover{ color:var(--ink) !important; background:var(--hover-tint) !important; }

/* ---------- Toolbar ---------- */
.toolbar{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:6px 10px; background:var(--card); border-bottom:1px solid var(--line);
  flex:0 0 auto; position:relative; z-index:25;
}
.toolbar button{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid transparent; color:var(--ink-soft);
  font-family:'Public Sans', sans-serif; font-size:11.5px; font-weight:600;
  padding:6px 9px; border-radius:var(--radius); cursor:pointer;
}
.toolbar button:hover{ border-color:var(--line); color:var(--ink); background:var(--hover-tint); }
.toolbar button:disabled{ opacity:0.35; cursor:not-allowed; }
.toolbar button:disabled:hover{ border-color:transparent; color:var(--ink-soft); background:transparent; }
/* The Validate split button reuses the menu-bar's .menu/.menu-dropdown
   click-to-toggle mechanics (and wireMenus()'s generic wiring) rather
   than a bespoke dropdown, styled here to look like the other toolbar
   buttons instead of a menu-bar item. */
.toolbar .menu{ position:relative; }
.toolbar .menu-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid transparent; color:var(--ink-soft);
  font-family:'Public Sans', sans-serif; font-size:11.5px; font-weight:600;
  padding:6px 9px; border-radius:var(--radius); cursor:pointer;
}
.toolbar .menu-btn:hover, .toolbar .menu.open .menu-btn{
  border-color:var(--line); color:var(--ink); background:var(--hover-tint);
}
.toolbar .menu-dropdown{ min-width:160px; top:calc(100% + 4px); }
.tbi-caret{ width:9px; height:9px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0.7; }
.toolbar .sep{ width:1px; align-self:stretch; background:var(--line); margin:2px 4px; }
.tbi{ width:15px; height:15px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Grid area ---------- */
.grid-wrap{
  flex:1 1 auto;
  min-height:0;
  position:relative;
  padding:10px;
}
.grid-wrap.drag-over::after{
  content:"Drop to open";
  position:absolute; inset:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(59,158,255,0.12);
  border:2px dashed var(--accent);
  border-radius:var(--radius-lg);
  font-family:'Spectral', serif; font-size:20px; color:var(--accent);
  z-index:20; pointer-events:none;
}
#grid{ height:100%; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); }

.row-num-col{ color:var(--ink-soft); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px; background:var(--paper-alt) !important; }
.tabulator-cell.cell-active{ outline:2px solid var(--accent); outline-offset:-2px; background:var(--hover-tint); }
/* Per-cell validation highlighting (replaces an earlier dedicated flag
   column, per explicit request) -- applyIssueHighlights() in app.js
   toggles these directly on the affected field's own cell. */
.tabulator-cell.cell-issue-error{ background:rgba(255,107,107,0.20); box-shadow:inset 0 0 0 1px var(--seal); }
.tabulator-cell.cell-issue-warn{ background:rgba(255,201,64,0.20); box-shadow:inset 0 0 0 1px var(--warn); }

/* ---------- Status bar ---------- */
.statusbar{
  display:flex; align-items:center; gap:16px;
  padding:6px 14px; background:var(--paper-alt); border-top:1px solid var(--line);
  font-size:11px; color:var(--ink-soft); flex:0 0 auto;
}
.statusbar .spacer{ flex:1 1 auto; }
#status-errors{ color:var(--warn); font-weight:600; }
#status-errors.clickable{ cursor:pointer; }
#status-errors.clickable:hover{ text-decoration:underline; }
#status-errors.ok{ color:var(--signal); }
#status-valmode.clickable{ cursor:pointer; }
#status-valmode.clickable:hover{ text-decoration:underline; }
#status-selected{ color:var(--accent); font-weight:600; }
.status-spec-btn{
  background:none; border:1px solid var(--line); color:var(--ink-soft);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10.5px; padding:2px 8px; border-radius:999px; cursor:pointer;
}
.status-spec-btn:hover{ border-color:var(--accent); color:var(--ink); }
.status-donate-btn{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--grad-accent); border:1px solid transparent; color:#04141F;
  font-family:'Public Sans', sans-serif; font-weight:700;
  font-size:10.5px; padding:3px 10px; border-radius:999px;
  text-decoration:none; cursor:pointer;
}
.status-donate-btn:hover{ background:var(--grad-accent-hover); }
.status-donate-btn svg{ width:11px; height:11px; flex-shrink:0; fill:currentColor; }

/* ---------- Toast ---------- */
#toast{
  position:fixed; left:50%; bottom:44px; transform:translate(-50%, 12px);
  background:var(--card); border:1px solid var(--line); color:var(--ink);
  padding:9px 16px; border-radius:999px; font-size:12px; box-shadow:0 8px 22px var(--shadow);
  opacity:0; pointer-events:none; transition:opacity 0.18s ease, transform 0.18s ease;
  z-index:200;
}
#toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ---------- Modal ---------- */
#modal-backdrop{
  display:none;
  position:fixed; inset:0; background:rgba(0,0,0,0.55);
  align-items:center; justify-content:center; z-index:100; padding:20px;
}
#modal-backdrop.open{ display:flex; }
#modal{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 20px 50px var(--shadow); width:min(560px, 100%); max-height:85vh;
  display:flex; flex-direction:column; overflow:hidden;
}
#modal.wide{ width:min(900px, 100%); }
/* Reserved for the paper-log image review table (openImageReviewDialog())
   -- .wide's 900px is sized for the unrelated Validation Results dialog's
   own content, not for up to 18 content-sized columns. 96vw keeps it from
   ever exceeding the viewport; #modal-body's own overflow-x:auto below
   stays as a fallback for a viewport too narrow to fit every column, or
   an outlier value (e.g. an unusually long handwritten comment) even at
   this width -- accepted, not solved further. */
#modal.xwide{ width:min(2200px, 98vw); }
#modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line);
}
#modal-title{ font-family:'Spectral', serif; font-weight:600; font-size:16px; margin:0; }
#modal-close{ background:none; border:none; color:var(--ink-soft); font-size:18px; cursor:pointer; line-height:1; }
#modal-close:hover{ color:var(--ink); }
#modal-body{ padding:16px 18px; overflow-y:auto; overflow-x:auto; }
#modal-body label{ display:block; font-size:11.5px; color:var(--ink-soft); margin-bottom:10px; }
#modal-body label.chk{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink); }
#modal-body input[type=text], #modal-body input:not([type]), #modal-body select, #modal-body textarea{
  display:block; width:100%; margin-top:4px;
  background:var(--paper); border:1px solid var(--line); color:var(--ink);
  padding:7px 9px; border-radius:var(--radius); font-family:inherit; font-size:12.5px;
}
#modal-body p{ font-size:12.5px; color:var(--ink); margin:0 0 10px; }
#modal-body p.dim{ color:var(--ink-soft); font-size:11.5px; }
#modal-footer{ display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--line); }
#modal-footer:empty{ display:none; }
.btn{
  background:var(--paper-alt); border:1px solid var(--line); color:var(--ink);
  font-family:'Public Sans', sans-serif; font-size:12px; font-weight:600;
  padding:8px 14px; border-radius:var(--radius); cursor:pointer;
}
.btn:hover{ border-color:var(--accent); }
.btn.primary{ background:var(--grad-accent); border:none; color:#04141F; }
.btn.primary:hover{ background:var(--grad-accent-hover); }
.btn.danger{ background:var(--seal); border:none; color:#2B0000; }

.raw-view{
  width:100%; min-height:50vh; resize:vertical;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px;
  white-space:pre; background:var(--paper); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--radius); padding:9px;
}

.val-table{ width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; }
.val-table th{ text-align:left; color:var(--ink-soft); font-size:10.5px; text-transform:uppercase; padding:4px 8px; border-bottom:1px solid var(--line); }
.val-table td{ padding:6px 8px; border-bottom:1px solid var(--line); }
.chip{
  display:inline-block; padding:2px 11px; border-radius:999px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  line-height:1.6;
}
.img-caveats{ margin:0 0 6px; padding-left:20px; font-size:12.5px; line-height:1.5; }
.img-caveats li{ margin-bottom:8px; }
.img-caveats a{ color:var(--accent); }
.img-wait{ display:flex; align-items:center; gap:12px; }
.img-spinner{
  flex:none; width:22px; height:22px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent);
  animation:img-spin 0.8s linear infinite;
}
@keyframes img-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .img-spinner{ animation-duration:2.4s; } }
/* Tighter than .val-table td's base 6px/8px -- this table can have up to
   18 columns, so per-column chrome adds up fast; verified by measuring a
   real rendered table (see Verification in the plan) rather than guessed. */
.img-review td{ padding:4px 5px; }
.img-review input[type=text]{ padding:2px 4px; font-size:12px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; box-sizing:content-box; field-sizing:content; min-width:4ch; }
.img-review tr.img-low td{ background:rgba(255,201,64,0.16); }
.img-review tr.img-medium td{ background:rgba(255,201,64,0.07); }
/* The one non-<input> cell in this table (confidence chip + AI note) --
   left in normal flow so it wraps instead of forcing the table wider;
   every other column is an <input> sized to its own content and stays
   under .val-table's base white-space:nowrap (see openImageReviewDialog()). */
.img-review td.img-note{ white-space:normal; word-break:break-word; }
.img-optional-fields{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.img-optional-fields label{ flex:1 1 160px; }
/* Live "this is required" cue for a blank Station Callsign top field --
   same error color (--seal) as .chip-error/.tabulator-cell.cell-issue-error
   elsewhere in this file, not a bespoke red. */
.img-optional-fields input.img-blank-error{ border-color:var(--seal); box-shadow:inset 0 0 0 1px var(--seal); background:rgba(255,107,107,0.12); }
/* My State, locked read-only when an unambiguous single-state park
   already answered it (see render()'s own note) -- same dimmed look as
   .toolbar button:disabled elsewhere, not a distinct convention. */
.img-optional-fields input[readonly]{ opacity:0.6; cursor:not-allowed; }
.chip-error{ background:rgba(255,107,107,0.18); color:var(--seal); }
.chip-warn{ background:rgba(255,201,64,0.22); color:var(--warn); }
/* Same translucent-background-plus-solid-text pattern as the two above,
   using --signal (the site's existing "OK"/good-state green, see
   #status-errors.ok) -- for a CONFIDENCE chip that isn't a warning. */
.chip-ok{ background:rgba(52,211,153,0.18); color:var(--signal); }

.dup-group{ margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.dup-group-title{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; margin-bottom:6px; }
.dup-row{ display:flex; align-items:center; gap:8px; font-size:12px; padding:3px 0; }

.col-toggle{ display:flex !important; align-items:center; gap:8px; font-size:12.5px !important; color:var(--ink) !important; }

.stat-summary{ display:flex; gap:18px; margin-bottom:14px; }
.stat-summary > div{ text-align:center; }
.stat-num{ display:block; font-family:'Spectral', serif; font-size:24px; font-weight:600; color:var(--accent); }
.stat-label{ font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; }
.stat-cols{ display:flex; gap:20px; flex-wrap:wrap; }
.stat-cols > div{ flex:1 1 160px; }
.stat-cols h4{ font-size:11px; text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.stat-table{ width:100%; border-collapse:collapse; font-size:12px; }
.stat-table td{ padding:3px 4px; border-bottom:1px solid var(--line); }
.stat-table td:last-child{ text-align:right; color:var(--ink-soft); }

/* Tabulator overrides to match the site palette instead of its bundled theme */
/* font-family goes through this custom property (set via JS on #grid-wrap,
   an ancestor) rather than a plain value here, because a plain value set
   directly on .tabulator would always win over anything the View menu's
   Grid Font <select> set as an inline style on an ancestor -- an
   element's own explicit CSS property beats an inherited one regardless
   of specificity, so the font picker silently had no visible effect.
   Custom properties inherit normally and can be overridden by an
   ancestor's inline style, so this actually responds to it. */
#grid-wrap{ --grid-font:'Public Sans', system-ui, sans-serif; }
.tabulator{ background:var(--card); border:none; font-family:var(--grid-font); font-size:12.5px; }
.tabulator .tabulator-header{ background:var(--paper-alt); border-bottom:1px solid var(--line); color:var(--ink); }
/* Bundled theme sets this column-cell background via the more specific
   ".tabulator .tabulator-header .tabulator-col" (background:#333) --
   a bare ".tabulator .tabulator-col" here loses to it, so header cells
   stayed near-black regardless of theme. In dark mode that happened to
   look right by coincidence; in light mode it left dark ink-colored text
   on a still-dark background -- unreadable column header names. Match
   the bundled selector's own path to actually win. */
.tabulator .tabulator-header .tabulator-col{ background:var(--paper-alt); border-right:1px solid var(--line); }
/* Bundled theme hardcodes a near-black hover background on sortable
   column headers via this exact 6-class/pseudo-class selector chain --
   matched here so ours actually wins; without it, hovering any sortable
   header (i.e. nearly all of them) went black-on-navy-text in light
   mode. */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{ background:var(--hover-tint); }
.tabulator .tabulator-headers .tabulator-col-title{ color:var(--ink); font-weight:600; font-size:11px; }
.tabulator-row{ background:var(--card); color:var(--ink); border-bottom:1px solid var(--line); }
.tabulator-row.tabulator-row-even{ background:var(--paper); }
.tabulator-row.tabulator-selected{ background:var(--row-selected) !important; }
.tabulator-row:hover{ background:var(--hover-tint); }
/* Bundled theme's own row-hover rule is scoped ".tabulator-row.tabulator-selectable:hover"
   (3 classes) -- more specific than the plain ".tabulator-row:hover" above,
   so it kept winning with a flat gray #999 regardless of theme. Rows here
   are always selectableRows:true, so this is the one that actually applies. */
.tabulator-row.tabulator-selectable:hover{ background:var(--hover-tint); }
.tabulator .tabulator-cell{ border-right:1px solid var(--line); }
/* Bundled theme's ".tabulator-table" (the scrollable row-holder,
   positioned directly behind every row) has its own hardcoded
   background:#666 that neither ".tabulator-row" nor ".tabulator-cell"
   override even after the fixes above -- cells are transparent, so any
   semi-transparent row background (hover, this file's --hover-tint
   tokens) composited against that unthemed gray instead of the actual
   card surface, rendering far darker than intended ("row hover ...
   too dark"). Opaque row backgrounds (.tabulator-row itself) fully hide
   this normally; only alpha-blended states expose it. */
.tabulator .tabulator-tableholder .tabulator-table{ background:var(--card); color:var(--ink); }
/* The cell currently being edited (Tabulator's own .tabulator-editing
   class) gets a stronger, darker-blue treatment than the plain
   .cell-active "last clicked" marker below, so it's unambiguous which
   cell has an open editor. Matches the bundled theme's own
   ".tabulator-row .tabulator-cell.tabulator-editing" selector path
   (which otherwise hardcodes outline:none/border:#999 at higher
   specificity than a bare ".tabulator-cell.tabulator-editing" would have). */
.tabulator-row .tabulator-cell.tabulator-editing{
  outline:2px solid var(--accent-dark); outline-offset:-2px;
  background:var(--row-selected); border-color:var(--accent-dark);
}
/* The bundled theme's editing-cell input/select rule sets background:
   transparent but no color at all, so the browser's UA-default black
   form-control text shows through -- fine by coincidence in light mode,
   unreadable black-on-dark in dark mode ("editing a cell in dark mode,
   the text is black and hard to read"). */
.tabulator-cell.tabulator-editing input,
.tabulator-cell.tabulator-editing select,
.tabulator-cell.tabulator-editing textarea{ color:var(--ink); background:transparent; }
/* Tabulator's row/header right-click context menu (.tabulator-menu) is a
   separate popup module from our own hand-rolled .menu/.menu-dropdown
   bar -- it wasn't themed at all, so it fell back to the bundled
   theme's flat gray #666 background (.tabulator-popup-container) under
   inherited dark-ink text from our own body{color} rule: low-contrast,
   reported unreadable in light mode. */
.tabulator-popup-container.tabulator-menu{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 10px 28px var(--shadow); color:var(--ink);
}
.tabulator-menu .tabulator-menu-item{ color:var(--ink); }
/* Must match the bundled theme's exact selector, :not() clause included --
   ".tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover"
   is more specific (0,4,0) than a plain "...item:hover" (0,3,0) would be,
   so the shorter form silently lost and hover stayed the hardcoded #444
   regardless of theme ("right-click popup hover ... too dark"). */
.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{ background:var(--hover-tint); cursor:pointer; }
.tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled{ color:var(--ink-soft); }
.tabulator-menu .tabulator-menu-separator{ border-top:1px solid var(--line); }
.tabulator-edit-list{ background:var(--card); border:1px solid var(--line); color:var(--ink); }
/* tabulator_midnight.min.css's own item text color is tuned for a
   permanently-dark grid and isn't overridden by our light theme --
   without this, list-editor items (MODE, BAND, etc.) render unreadably
   light-on-white in light mode. */
/* Matches the bundled theme's own ".tabulator-edit-list .tabulator-edit-list-item"
   selector specificity (0,2,0) -- a bare ".tabulator-edit-list-item" rule
   here loses to it regardless of source order. */
.tabulator-edit-list .tabulator-edit-list-item{ color:var(--ink); }
.tabulator-edit-list .tabulator-edit-list-item:hover{ background:var(--hover-tint); color:var(--ink); }
.tabulator-edit-list-item.active{ background:var(--accent); color:#04141F; }
.tabulator .tabulator-footer{ background:var(--paper-alt); border-top:1px solid var(--line); color:var(--ink-soft); }
.tabulator .tabulator-placeholder{ color:var(--ink-soft); }

@media (max-width:720px){
  .toolbar button span.lbl, .toolbar .menu-btn span.lbl{ display:none; }
  .titlebar-title .kicker{ display:none; }
}