/* ====================================================================
   APP-RETRO.CSS — Pass 1 re-skin for the seat map page (index.html).
   Loaded AFTER app.css. Overrides colors/fonts/borders only.
   No layout, structure, or functionality changes — every selector
   below targets an existing class/ID, same DOM, same JS behavior.
   Layout reorganization is a separate follow-up pass.
   ==================================================================== */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

/* ── Top nav ── */
#topnav {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  user-select: none;
}
#nav-back { color: var(--stub); }
#nav-title, #nav-title-input {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--stub);
  text-transform: uppercase;
  letter-spacing: .01em;
}
#nav-subtitle {
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
#nav-save, #nav-add, #nav-shade { color: var(--stub) !important; }
#nav-back, #nav-save {
  display: block !important;
  font-weight: 700;
  min-height: 36px;
  min-width: 36px;
}
#nav-subtitle {
  display: none !important;
}

/* ── Macro mode bar (search / past seats / trip history / save / compass / cost log / edit) ── */
#macro-mode-bar {
  top: 28px;
  left: 28px;
  width: calc(100% - 56px);
  max-width: calc(100% - 56px);
  box-sizing: border-box;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 0;
  box-shadow: 2px 3px 0 rgba(42,38,32,.15);
}
/* When a panel is actually expanded, force the explicit full width so its
   width:100% children resolve against a definite value rather than the
   ambiguous "100% of a shrink-to-fit auto-width parent" case. */
#macro-mode-bar.macro-gear-open,
#macro-mode-bar.macro-edit-open,
#macro-mode-bar.macro-search-open {
  width: calc(100% - 56px);
}
.macro-mode-btn {
  background: var(--card);
  color: var(--stub);
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-right: 1px solid var(--line);
  border-radius: 0;
}
.macro-mode-btn.active {
  background: var(--stub);
  color: #fff;
}
#btn-macro-search-panel.active {
  background: var(--stub);
  color: #fff;
}
.macro-search-icon::before,
.macro-search-icon::after { background: currentColor; }
.macro-search-icon::before { background: transparent; }

/* ── Search panel (Section / Row / Seat inputs + Find Seat) ── */
.macro-seat-search {
  border: 1.5px solid var(--line);
  border-radius: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
}
.macro-seat-search:focus { border-color: var(--stub); }
.macro-search-field span {
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 10px;
}
#btn-macro-seat-search {
  background: var(--stub);
  color: #fff;
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 0;
}

/* ── Pass 2: two-row button grouping (page tabs vs map tools) ── */
#macro-mode-bar .macro-mode-row {
  border-radius: 0;
}
.macro-tools-row {
  border-top: 1px dashed var(--line);
  margin-top: 2px;
  padding-top: 2px;
}
.macro-tabs-row .macro-mode-btn:not(.macro-save-icon-only) {
  flex: 1;
  justify-content: center;
}
.macro-tools-row .macro-mode-btn {
  flex: 1;
}

/* ── Pass 2: Section# / Row# / Seat# in a single 3-column row ── */
#macro-seat-search-row.macro-seat-search-grid {
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: end;
}
.macro-search-field {
  grid-template-columns: 1fr !important;
  gap: 2px !important;
}
#btn-macro-seat-search {
  grid-column: 1 / -1;
}
#macro-seat-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 0;
}
.macro-seat-card-title { color: var(--stub); font-family: var(--font-display); }
.macro-seat-card-line.ok { color: var(--green); }
.macro-seat-card-line.bad { color: var(--red); }

/* ── Gear panel sub-tabs (Shade / Colors / Dot Sizes / Section# Edit) ── */
#macro-gear-panel .macro-edit-tool-btn {
  background: #fff;
  color: var(--stub);
  border: 1.5px solid var(--line);
  border-radius: 0;
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
#macro-gear-panel .macro-edit-tool-btn.active {
  background: var(--stub);
  color: #fff;
  border-color: var(--stub);
}
#macro-gear-panel .macro-utility-btn {
  background: #fff;
  color: var(--stub);
  border: 1.5px solid var(--line);
  border-radius: 0;
}
#macro-gear-panel .macro-utility-btn.active {
  background: var(--stub);
  color: #fff;
}

/* ── Shade row (Pan / Paint / Erase / Brush stepper) ── */
#macro-full-shade-row .macro-mode-btn {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 0;
}
#macro-full-shade-row .macro-mode-btn.active {
  background: var(--stub);
  color: #fff;
}
.macro-stepper-btn {
  background: #fff;
  color: var(--stub);
  border: 1.5px solid var(--line);
  border-radius: 0;
}
.macro-shade-slot-btn {
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--stub);
  border-radius: 0;
  font-family: var(--font-cond);
}
.macro-shade-slot-btn.active {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

/* ── Color labels / chips ── */
.macro-color-label {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--font-cond);
}

/* ── Label tools (mini directional buttons) ── */
.macro-mini-btn {
  background: #fff;
  color: var(--stub);
  border: 1.5px solid var(--line);
  border-radius: 0;
}

/* ── Slim edit toolbar + add-seat toolbar (index.html static) ── */
#edit-toolbar {
  background: var(--stub);
  color: #fff;
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
#edit-toolbar button {
  background: none;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
}
.add-tool-btn {
  background: #fff;
  color: var(--stub);
  border: 1.5px solid var(--line);
  border-radius: 0;
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.add-tool-btn.active { background: var(--stub); color: #fff; }
.add-tool-btn.delete-btn { color: var(--red); border-color: var(--red); }
.add-tool-btn.done-btn { background: var(--green); color: #fff; border-color: var(--green); }

/* ── Native form control accents (checkbox, range sliders) — these
   default to browser blue regardless of theme unless accent-color is
   set explicitly. ── */
.macro-color-opacity-block input[type="checkbox"] {
  accent-color: var(--stub);
}
.macro-opacity-label input[type="range"],
.macro-color-opacity {
  accent-color: var(--stub) !important;
}

/* ── Micro view: Admin / Edit Seats panel ── */
#admin-panel {
  background: var(--card);
  border-top: 2px solid var(--stub);
  border-radius: 0;
}
#admin-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--stub);
  text-transform: uppercase;
}
#admin-status { color: var(--muted); }
#admin-close { color: var(--muted); }
.admin-label {
  font-family: var(--font-cond);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
}
.admin-val { font-family: var(--font-display); font-weight: 800; color: var(--red); }
.admin-hint { color: var(--muted); }
.admin-step {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 0;
  color: var(--stub);
}
.admin-step:active { background: var(--paper); }
.admin-toggle-btn {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 0;
  color: var(--stub);
}
.admin-toggle-btn.active { background: var(--stub); color: #fff; border-color: var(--stub); }
.admin-action-btn {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 0;
  color: var(--stub);
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.admin-action-btn.primary { background: var(--stub); color: #fff; border-color: var(--stub); }
.admin-action-btn.danger { color: var(--red); border-color: var(--red); }
.admin-action-btn:active { opacity: .7; }

/* ── Micro view: Shade Painter panel (has inline bg/radius — needs !important) ── */
#shade-panel {
  background: var(--card) !important;
  border-radius: 0 !important;
  border-top: 2px solid var(--stub);
}
#shade-panel > div:first-child > div:first-child {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: var(--stub) !important;
  text-transform: uppercase;
}
#btn-shade-close { color: var(--muted) !important; }
#shade-hint { color: var(--muted) !important; }
#shade-brush-display { color: var(--stub) !important; font-family: var(--font-display) !important; }
#btn-shade-erase {
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--stub) !important;
}
#btn-brush-dec, #btn-brush-inc {
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--stub) !important;
}
.shade-slot-btn {
  border-radius: 0 !important;
  background: #fff !important;
  font-family: var(--font-cond) !important;
}
.shade-slot-del { color: var(--muted) !important; }
.shade-slot-del:hover { color: var(--red) !important; background: rgba(139,46,38,.1) !important; }
.shade-global-color-row { color: var(--ink); font-family: var(--font-cond); }


/* ── Color picker popover (used by Seat/Shade/Polygon/Past-seat/
   Favorite/Avoid color swatches) — was unstyled native-iOS white/blue,
   now matches the retro card system. Many rules here use !important
   because the source CSS also uses !important on the same properties. ── */
.macro-color-picker-popover {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  background: transparent !important;
  padding: 0 !important;
  padding-top: 82px !important;
  padding-left: 28px !important;
}
.macro-color-picker-card {
  background: var(--card) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: 3px 4px 0 rgba(42,38,32,.2) !important;
  width: calc(100vw - 56px) !important;
  max-width: none !important;
  max-height: 70dvh !important;
  padding: 6px !important;
}
.macro-color-picker-head { margin-bottom: 2px !important; }
.macro-color-picker-title { font-size: 13px !important; }
.macro-color-opacity-block { margin: 2px 0 !important; }
.macro-color-opacity-label { font-size: 10px !important; margin-bottom: 1px !important; }
.macro-color-picker-bottom { margin: 4px 0 !important; gap: 5px !important; }
.macro-color-selected-preview {
  width: 30px !important;
  height: 30px !important;
  border-radius: 0 !important;
}
.macro-color-preset {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  border-radius: 0 !important;
}
.macro-color-rgb-row { gap: 2px !important; margin-top: 4px !important; }
.macro-color-rgb-item { gap: 0 !important; }
.macro-color-rgb-label { font-size: 9px !important; }
.macro-color-shade-row { margin-top: 4px !important; padding-top: 4px !important; }
.macro-color-picker-hex-row { margin-top: 4px !important; }
.macro-color-picker-head {
  grid-template-columns: 1fr 36px !important;
}
.macro-color-picker-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: var(--stub) !important;
  text-transform: uppercase;
}
.macro-color-picker-icon,
.macro-color-picker-close {
  background: var(--paper) !important;
  color: var(--stub) !important;
  border-radius: 0 !important;
}
.macro-color-picker-grid {
  border-color: var(--line) !important;
  border-radius: 0 !important;
}
.macro-color-grid-cell.selected {
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 5px var(--stub) !important;
}
.macro-color-opacity-label {
  color: var(--muted) !important;
  font-family: var(--font-cond) !important;
}
.macro-color-opacity {
  accent-color: var(--stub) !important;
}
.macro-color-picker-bottom {
  border-color: var(--line) !important;
}
.macro-color-selected-preview {
  border-radius: 0 !important;
  border-color: var(--line) !important;
}
.macro-color-preset {
  border-radius: 0 !important;
}
.macro-color-preset.active {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201,138,44,.25) !important;
}
.macro-color-plus {
  background: var(--paper) !important;
  color: var(--stub) !important;
}
.macro-color-hex {
  border-color: var(--line) !important;
  border-radius: 0 !important;
  font-family: var(--font-body);
}
.macro-color-apply {
  background: var(--stub) !important;
  border-radius: 0 !important;
  font-family: var(--font-cond) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.macro-color-rgb-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.macro-color-rgb-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.macro-color-rgb-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.macro-color-rgb-label b {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
}
/* ── Legacy "Edit Seats" admin-panel system, permanently disabled.
   Hiding via CSS rather than deleting the elements/scripts, since other
   legacy files (03-section-navigation.js) reference #nav-gear without
   null-checks — removing the element outright would throw errors there. ── */
#nav-gear, #admin-panel {
  display: none !important;
}
.macro-color-rgb-row input[type="range"] {
  width: 100%;
  accent-color: var(--stub);
}
.macro-color-shade-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.macro-color-shade-row .macro-color-rgb-label {
  justify-content: space-between;
}
.macro-color-shade-row .macro-color-rgb-label b {
  color: var(--red);
}
.macro-color-shade {
  width: 100%;
  accent-color: var(--stub);
}

/* ── Round 2 sweep: every remaining hardcoded old-blue (#003f8f /
   #026CDF) selector found in app.css. Several of these use !important
   or higher specificity (ID selectors) than my earlier overrides, so
   they were winning the cascade despite loading first. Matching with
   !important here to guarantee the win regardless of source order. ── */
.macro-size-step {
  background: var(--card) !important;
  color: var(--stub) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
}
.macro-timeline-btn {
  border-color: var(--line) !important;
  color: var(--stub) !important;
  background: #fff !important;
}
.macro-timeline-btn.active {
  background: var(--stub) !important;
  color: #fff !important;
}
#macro-seat-more-info {
  border-color: var(--line) !important;
  color: var(--stub) !important;
}
#macro-full-shade-row.painting .macro-full-shade-status {
  color: var(--stub) !important;
}
#macro-mode-bar.macro-shade-ready .macro-shade-slot-btn.active {
  background: var(--gold) !important;
  color: #fff !important;
  border-color: var(--gold) !important;
}
.macro-palette-color:hover,
.shade-palette-color:hover {
  border-color: var(--stub) !important;
}
.macro-seat-info-fab {
  background: var(--card) !important;
  color: var(--stub) !important;
}
#macro-gear-panel .macro-edit-tool-btn.active {
  background: var(--stub) !important;
  color: #fff !important;
  border-color: var(--stub) !important;
}
#btn-macro-jump-section.active {
  background: var(--stub) !important;
  color: #fff !important;
}
#btn-macro-jump-section:not(.active) {
  background: var(--card) !important;
  color: var(--muted) !important;
}
.macro-debug-dock-btn.active {
  color: var(--stub) !important;
  background: rgba(29,53,87,.08) !important;
}


/* ── Round 3 sweep: every remaining rounded pill / white-background
   control across Shade, Colors, Dot Sizes, and Section# Edit tabs.
   Using #macro-mode-bar-prefixed selectors + !important everywhere to
   guarantee these win regardless of any other rule's specificity. ── */
#macro-mode-bar .macro-edit-tool-btn {
  background: var(--card) !important;
  color: var(--stub) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
}
#macro-mode-bar .macro-edit-tool-btn.active {
  background: var(--stub) !important;
  color: #fff !important;
  border-color: var(--stub) !important;
}
#macro-mode-bar .macro-brush-stepper {
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--card) !important;
  color: var(--ink) !important;
}
#macro-mode-bar .macro-stepper-btn {
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--stub) !important;
}
#macro-mode-bar .macro-label-section-input {
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--ink) !important;
}
#macro-mode-bar .macro-mini-btn {
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--stub) !important;
}
#macro-mode-bar .macro-opacity-label {
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  font-family: var(--font-cond) !important;
}
#macro-mode-bar .macro-stepper-control {
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--card) !important;
  color: var(--ink) !important;
}
#macro-mode-bar .macro-size-step {
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--stub) !important;
}

/* ── Header consistency: keep the title size matching trip-history/
   cost-log even though the seat map page used to shrink it. Subtitle
   is intentionally hidden everywhere now (see #nav-subtitle above). ── */
body.macro-view-active #nav-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: normal !important;
  color: var(--stub) !important;
}
body.macro-view-active #topnav {
  height: 52px !important;
  padding: 0 14px !important;
}

/* ── Fix: .macro-shade-slot-btn is shared between the shade-painter's
   time-slot list AND the main 1pm/6pm/7pm filter pills. An earlier gold
   override meant for the shade-painter context leaked onto the filter
   pills too. Back to navy for both, consistent with every other active
   state in the app. ── */
#macro-mode-bar.macro-shade-ready .macro-shade-slot-btn.active {
  background: var(--stub) !important;
  color: #fff !important;
  border-color: var(--stub) !important;
}

/* ── Square corners on the remaining rounded swatches ── */
.macro-color-swatch,
.shade-color-swatch,
.shade-slot-color {
  border-radius: 0 !important;
}

/* ── Vintage north indicator ──
   Fixed to the viewport (not absolute within #map-area) so it sits in a
   true screen corner regardless of how much empty margin the map itself
   has — previously it was positioned relative to map-area's full box,
   which could land it in empty letterbox space rather than near visible
   map content. */
#north-badge {
  position: fixed;
  bottom: 72px;
  right: 28px;
  z-index: 75;
  width: 67px;
  height: 67px;
  pointer-events: none;
  opacity: 0.55;
}
#north-badge svg { width: 100%; height: 100%; display: block; }
/* The source SVGs use vector-effect:non-scaling-stroke, which keeps stroke
   width fixed in absolute screen pixels regardless of how small the SVG is
   scaled — overriding it lets strokes scale down proportionally instead. */
#north-badge .ink { vector-effect: none; }
#north-badge .fill { vector-effect: none; }
#north-badge .white { vector-effect: none; }

/* Subtle, blended-into-the-background look — a muted tone just a touch
   darker than the paper background, not a bold UI-color navy accent. */
#north-badge .ink { stroke: var(--muted); fill: none; }
#north-badge .fill { fill: var(--muted); stroke: var(--muted); }
#north-badge .white { fill: var(--paper); stroke: var(--muted); }
#north-badge text { fill: var(--muted); font-family: var(--font-display); }

/* ── Default view editor (manual pan/zoom crop) ── */
.macro-north-pos-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ── Simple vintage paper border frame around the map viewport.
   A pseudo-element overlay (not a real border on #map-area) so it doesn't
   shift the canvas, which is absolutely positioned to fill its parent. ── */
#map-area::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(90,75,45,.55);
  outline: 1px solid rgba(90,75,45,.3);
  outline-offset: -8px;
  pointer-events: none;
  z-index: 15;
}
#btn-shade-add-slot {
  background: var(--stub) !important;
  border-radius: 0 !important;
}
#btn-shade-clear {
  background: var(--card) !important;
  color: var(--red) !important;
  border: 1.5px solid var(--red) !important;
  border-radius: 0 !important;
}
#btn-shade-export {
  background: var(--card) !important;
  color: var(--stub) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
}

/* ── Fill-confirm bar / label modal / place-seat modal ── */
#fill-confirm-bar {
  background: var(--stub);
}
#admin-label-inner, #place-seat-modal > div {
  background: var(--card) !important;
  border-radius: 0 !important;
}

/* ── Trip picker (tap a past-visit seat with multiple games logged) ── */
.macro-trip-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(29, 53, 87, 0.35);
}
.macro-trip-picker-card {
  width: min(360px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 0;
  box-shadow: 2px 4px 0 rgba(42,38,32,.2);
}
.macro-trip-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--stub);
}
.macro-trip-picker-close {
  background: none;
  border: none;
  color: var(--stub);
  font-size: 16px;
  padding: 2px 4px;
  cursor: pointer;
  min-height: auto;
}
.macro-trip-picker-list {
  display: flex;
  flex-direction: column;
}
.macro-trip-picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 12px;
  cursor: pointer;
  min-height: auto;
}
.macro-trip-picker-item:last-child { border-bottom: none; }
.macro-trip-picker-item:hover, .macro-trip-picker-item:active { background: var(--paper); }
.macro-trip-picker-date {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
}
.macro-trip-picker-teams {
  font-family: 'Rokkitt', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--stub);
}

/* ── Visibility heat map painter ── */
#macro-visibility-row {
  flex-wrap: wrap !important;
}
.macro-visibility-color-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: 6px;
}
.macro-visibility-polygon-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}
.macro-visibility-polygon-controls span {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.macro-visibility-polygon-controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#btn-macro-visibility-apply {
  background: var(--stub);
  color: #fff;
}
#btn-macro-visibility-apply:disabled {
  background: var(--card);
  color: var(--muted);
}
#btn-macro-visibility-clear {
  background: var(--card);
  color: var(--red);
  border-color: var(--red);
}
#btn-macro-visibility-clear:disabled {
  color: var(--muted);
  border-color: var(--line);
}
.macro-visibility-swatch {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(0,0,0,0.25);
  border-radius: 50%;
  padding: 0;
  min-height: auto;
  cursor: pointer;
}
.macro-visibility-swatch.active {
  border-color: var(--stub);
  box-shadow: 0 0 0 2px var(--card);
  transform: scale(1.12);
}
#macro-visibility-row.painting #btn-macro-visibility-paint,
#macro-visibility-row.erasing #btn-macro-visibility-erase {
  background: var(--stub);
  color: #fff;
}
#btn-macro-visibility-overlay-toggle.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.macro-visibility-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.2);
}

/* ── Visibility gradient tool anchors (micro view) ── */
.gradient-anchor-mark {
  stroke-width: 2.5;
}
.gradient-anchor-avoid {
  fill: #111827;
  stroke: #FBF7EC;
}
.gradient-anchor-great {
  fill: #16a34a;
  stroke: #FBF7EC;
}
.gradient-anchor-line {
  stroke: #C98A2C;
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

/* ── Diagnostic overlay modal ── */
#diagnostic-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
#diagnostic-overlay.visible {
  display: flex;
}
.diagnostic-modal {
  background: var(--card);
  border: 2px solid var(--stub);
  border-radius: 0;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
.diagnostic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 2px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--stub);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.9em;
  user-select: none;
  gap: 12px;
}
.diagnostic-header > span {
  flex: 1;
  min-width: 0;
}
#diagnostic-close {
  background: none;
  border: none;
  color: var(--stub);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#diagnostic-close:hover {
  background: rgba(0,0,0,0.1);
}
.diagnostic-content {
  padding: 16px;
  font-size: 0.85em;
  line-height: 1.5;
}
.diagnostic-section {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.diagnostic-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.diagnostic-label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--stub);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 0.8em;
  margin-bottom: 6px;
}
.diagnostic-value {
  color: var(--muted);
  padding: 8px 12px;
  background: rgba(0,0,0,0.05);
  border-left: 2px solid var(--line);
}
#diagnostic-export {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--stub);
  color: var(--paper);
  border: 2px solid var(--stub);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s;
}
#diagnostic-export:active {
  background: rgba(0,0,0,0.2);
  color: var(--stub);
}

/* linked theme swatches (Past Seats / Favorite) — not clickable, just a preview */
.macro-color-swatch-linked { cursor: default !important; display: inline-block !important; }