/* Load last. One hue per palette; photographic artwork/navigation stays intact. */
:root {
  --palette-field: #bd3028;
  --palette-ink: #ffffff;
  --palette-soft: #ff9e94;
  --palette-link: #a32620;
  --palette-pale: #fff5f3;
}
:root[data-palette="red"] {
  --palette-field: #bd3028;
  --palette-ink: #ffffff;
  --palette-soft: #ff9e94;
  --palette-link: #a32620;
  --palette-pale: #fff5f3;
}
:root[data-palette="orange"] {
  --palette-field: #a8400d;
  --palette-ink: #ffffff;
  --palette-soft: #ffb17e;
  --palette-link: #983b0c;
  --palette-pale: #fff6ef;
}
:root[data-palette="amber"] {
  --palette-field: #e7b53b;
  --palette-ink: #191c1d;
  --palette-soft: #efca72;
  --palette-link: #715200;
  --palette-pale: #fff9e9;
}
:root[data-palette="olive"] {
  --palette-field: #929b35;
  --palette-ink: #191c1d;
  --palette-soft: #c8d17a;
  --palette-link: #515a0f;
  --palette-pale: #f8faec;
}
:root[data-palette="green"] {
  --palette-field: #20734c;
  --palette-ink: #ffffff;
  --palette-soft: #94d8b0;
  --palette-link: #18613e;
  --palette-pale: #f0faf4;
}
:root[data-palette="teal"] {
  --palette-field: #096d68;
  --palette-ink: #ffffff;
  --palette-soft: #85d7cc;
  --palette-link: #085e59;
  --palette-pale: #effaf8;
}
:root[data-palette="cyan"] {
  --palette-field: #08768b;
  --palette-ink: #ffffff;
  --palette-soft: #8bd7e9;
  --palette-link: #086579;
  --palette-pale: #f0fafd;
}
:root[data-palette="blue"] {
  --palette-field: #245bce;
  --palette-ink: #ffffff;
  --palette-soft: #a9c4ff;
  --palette-link: #204daf;
  --palette-pale: #f3f7ff;
}
:root[data-palette="violet"] {
  --palette-field: #7446c8;
  --palette-ink: #ffffff;
  --palette-soft: #cdb2ff;
  --palette-link: #6535b3;
  --palette-pale: #f9f4ff;
}
:root[data-palette="magenta"] {
  --palette-field: #ad2871;
  --palette-ink: #ffffff;
  --palette-soft: #efa4cc;
  --palette-link: #982162;
  --palette-pale: #fff3f9;
}
/* Repeated :root deliberately outranks the legacy theme/palette combinations.
   --second is a compatibility alias, never a second accent or an accent mode. */
:root:root,
:root:root[data-theme] {
  --bg: #121314;
  --surface: #202224;
  --ink: #f4f4f1;
  --muted: #bdc0c2;
  --input: #2d3032;
  --line: #72787c;
  --field: var(--palette-field);
  --field-ink: var(--palette-ink);
  --accent: var(--palette-soft);
  --second: var(--accent);
  --link: var(--accent);
  --link-hover: var(--ink);
  --focus: var(--accent);
  --photo-accent: var(--palette-soft);
  --pale: var(--palette-pale);
  --pale-ink: #191c1d;
  color-scheme: dark;
}
:root:root[data-theme="light"] {
  --bg: #f0f1ef;
  --surface: #ffffff;
  --ink: #191c1d;
  --muted: #555c60;
  --input: #e3e6e4;
  --line: #747b7e;
  --accent: var(--palette-link);
  --link-hover: var(--ink);
  color-scheme: light;
}
html { background: var(--bg); scrollbar-color: var(--muted) var(--bg); }
body { background: var(--bg); color: var(--ink); }
::selection { background: var(--field); color: var(--field-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
input, select, textarea { accent-color: var(--field); caret-color: var(--link); }
.closer { background: var(--surface); color: var(--ink); }
/* The light theme changes the page, not the lighting of the photographs. */
.hero { background: #151718; color: #ffffff; --focus: var(--palette-soft); }
.hero h1, .hero-title p, .hero-caption { color: #ffffff; }
.hero-link, .primary { background: var(--field); color: var(--field-ink); }
.hero-link:focus-visible, .primary:focus-visible { outline-color: var(--ink); }
.hero .hero-link:focus-visible { outline-color: #ffffff; }
.text-link, label.attachment, .summary-heading button,
.region-actions button, .region-actions .region-details,
.region-chosen button, .region-evidence a { color: var(--link); }
.visual-attachment { border-bottom-color: var(--line) !important; }
.region-chosen li { border-bottom-color: var(--line); }
.visual-attachment:hover, .visual-attachment:focus-visible,
.region-evidence summary:hover, .region-evidence summary:focus-visible,
.region-actions button:hover, .region-chosen button:hover,
.text-link:hover, .text-link:focus-visible { color: var(--link); text-decoration: underline; text-underline-offset: 5px; }
.region-actions button:focus-visible, .region-chosen button:focus-visible,
.region-context img:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.route-picker button[aria-pressed="true"], .options button[aria-pressed="true"],
.layer-parts button[aria-pressed="true"], .region-actions button[aria-pressed="true"] {
  background: var(--field); color: var(--field-ink);
}
/* Target selection contours only: nav arrows, generated lighting and photos retain
   their authored colors. Bright same-hue strokes remain visible on the dark art. */
.region-picture path[data-selection-key] { fill: var(--field); fill-opacity: .02; stroke: #f7f7f1; stroke-opacity: .2; }
.region-picture path[data-selection-key].selected,
.region-picture path[data-selection-key]:focus-visible {
  fill: var(--field); fill-opacity: .3; stroke: var(--photo-accent); stroke-opacity: 1; stroke-width: 3;
}
.region-picture path[data-selection-key].focused:not(.selected) {
  fill: var(--field); fill-opacity: .1; stroke: var(--photo-accent); stroke-opacity: 1; stroke-width: 3;
}
.car-stage path[aria-pressed="true"] { fill: var(--field); stroke: var(--photo-accent); }
.car-stage path:focus-visible { stroke: var(--photo-accent); }
.region-picture .region-inset-back:focus-visible {
  outline: 3px solid var(--photo-accent); outline-offset: -3px; border-color: var(--photo-accent);
}
.region-picture .generated-targets .hit:focus-visible { stroke: var(--photo-accent); }
.mechanical-layer:focus-visible { outline-color: var(--photo-accent); }
/* Direct contact: two equal editorial fields, not a grid of nested cards. */
.contact-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.contact-band.single-channel { grid-template-columns: minmax(0, 1fr); }
.contact-band > div { min-width: 0; padding: clamp(36px, 4vw, 60px) var(--pad); }
.contact-band .call-panel { background: var(--field); color: var(--field-ink); --focus: var(--field-ink); }
.contact-band .write-panel { background: var(--pale); color: var(--pale-ink); --focus: var(--palette-link); }
.contact-band h2 { font-size: clamp(32px, 3.2vw, 44px); }
.contact-band p { margin-top: 20px; max-width: 44ch; font-size: 16px; }
.contact-band a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding-block: 8px; font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; overflow-wrap: anywhere; }
.contact-band .call-panel a { color: var(--field-ink); }
.contact-band .write-panel a { color: var(--palette-link); }
.contact-band .contact-number { font-size: clamp(20px, 2.4vw, 32px); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.contact-band .contact-number a { font-size: inherit; }
.channel-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 20px; min-width: 0; }
.channel-links a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; color: var(--link); text-decoration: underline; text-underline-offset: 5px; overflow-wrap: anywhere; }
.contact-band [hidden] { display: none !important; }
/* Bottom handoff is a sequence separated by rules; no additional card shells. */
.ticket-panel, .contact-actions { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); min-width: 0; }
.ticket-panel h3 { font-size: clamp(24px, 2.4vw, 30px); }
.ticket-panel > p { margin-top: 14px; }
.ticket-panel .primary { justify-content: center; }
.contact-actions > button, .ticket-result button { min-height: 44px; padding: 10px 0; color: var(--link); text-decoration: underline; text-underline-offset: 5px; text-align: left; }
.contact-actions > p, .ticket-result > p { margin-top: 16px; overflow-wrap: anywhere; }
.contact-actions > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); text-decoration: underline; text-underline-offset: 5px; }
.contact-actions .contact-number { font-size: clamp(20px, 2vw, 28px); font-weight: 700; }
.contact-guidance, [data-contact-guidance] { color: var(--ink); max-width: 58ch; }
/* Intake copy: one readable body colour, no muted explanatory tier. */
#atlas .atlas-selection-intro, #atlas .region-status, #atlas .description-column p,
#contact p, #contact summary { color: var(--ink); }
#contact #description-privacy { font-size: 16px; }
#atlas .region-status:empty, #contact p:empty { display: none; }
#contact [data-booking-panel][hidden] { display: none !important; }
.ticket-result { margin-top: 20px; padding-block: 4px; overflow-wrap: anywhere; }
.ticket-result [role="status"] { white-space: pre-line; }
.ticket-panel [hidden], .contact-actions [hidden] { display: none !important; }
button:disabled { cursor: not-allowed; }
.ticket-panel .primary:disabled { background: var(--input); color: var(--muted); opacity: 1; transform: none; filter: none; }
@media (hover: hover) and (pointer: fine) {
  .region-picture path[data-selection-key]:hover { fill: var(--field); fill-opacity: .3; stroke: var(--photo-accent); stroke-opacity: 1; stroke-width: 3; }
  .region-picture .region-inset-back:hover { border-color: var(--photo-accent); }
  .route-picker button:not([aria-pressed="true"]):hover,
  .options button:not([aria-pressed="true"]):hover { color: var(--link); outline: 1px solid currentColor; outline-offset: -1px; }
  .contact-band a:hover, .channel-links a:hover,
  .contact-actions > button:hover, .ticket-result button:hover { text-decoration-thickness: 2px; }
  .hero-link:hover, .primary:not(:disabled):hover { filter: none; text-decoration: underline; text-underline-offset: 5px; }
}
@media (max-width: 760px) {
  .contact-band { grid-template-columns: minmax(0, 1fr); }
  .contact-band > div { padding-block: 36px; }
  .channel-links { column-gap: 20px; }
}