/* Map workspace and track overview. The map stays in viewport coordinates. */
:root {
  --paper: #f3f2e9;
  --paper-alt: #e7e8dd;
  --ink: #20251f;
  --ink-muted: #596052;
  --rule: #cbd0c1;
  --signal: #d3f552;
  --gas-ink: #42651c;
  --brake-ink: #a43f28;
  --charcoal: #1c211f;
  --chrome-line: #424944;
  --light-ink: #f4f4eb;
  --acid: var(--signal);
  --bar-h: 66px;
  --edge: clamp(14px, 1.65vw, 26px);
  --brief-width: clamp(228px, 18.2vw, 264px);
}
#atlas-bar {
  background: var(--charcoal);
  border-color: var(--chrome-line);
  box-shadow: 0 2px 10px #1117123b;
  color: var(--light-ink);
  gap: clamp(14px, 2.4vw, 40px);
}
.brand {gap: 10px; color: var(--light-ink); font-size: 34px; letter-spacing: -.032em}
.brand svg {width: 34px; height: 26px; color: var(--signal)}
.brand-light {margin-left: 3px; color: var(--light-ink)}
.vehicle-group {gap: 0; border-left: 1px solid var(--chrome-line); padding-left: clamp(13px, 1.8vw, 28px)}
#atlas-bar .car-select {
  padding: 3px 11px 3px 10px; gap: 10px; width: clamp(205px, 22vw, 315px); height: 44px;
  border: 1px solid #525a52; border-radius: 4px; color: var(--light-ink); background: #2a302c;
}
#atlas-bar .car-select:hover {background: #343c34; border-color: #8a957e}
#atlas-bar .car-select:focus-within {outline: 2px solid var(--signal); outline-offset: 2px}
#header-car-model {object-fit: contain; width: 19px; height: 34px; flex: none; filter: drop-shadow(0 1px 2px #080b08)}
.header-choice, .atlas-time>span {display: flex; flex-direction: column; gap: 2px; min-width: 0}
.header-choice small, .atlas-time small {font: 500 10px/1.15 var(--cn); color: #b9c1b6}
.header-choice strong {font: 600 17px/1.1 var(--cond),var(--cn); letter-spacing: .015em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
#atlas-bar .car-select>.small {margin-left: auto; width: 13px; color: #d3ddc7}
#atlas-bar .car-select select {position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; max-width: none; opacity: 0}
#lap-source-link {gap: 8px; margin-left: clamp(12px, 1.5vw, 22px); color: var(--light-ink)}
#lap-source-link .clock-icon {width: 17px; height: 17px; color: #a1ad9a}
#lap-source-link .small {width: 10px; color: #9ca697; align-self: flex-end; margin-bottom: 2px}
#lap-time {font: 600 21px/1.05 var(--cond); letter-spacing: .035em; font-variant-numeric: tabular-nums}
#atlas-bar nav {gap: 7px}
#atlas-bar nav button {background: transparent; color: var(--light-ink); border-color: #525952; border-radius: 4px; height: 38px}
#atlas-bar nav .iconbtn {width: 38px}
#atlas-bar nav .search-launch {gap: 9px; padding: 0 14px; font-weight: 600}
#atlas-bar nav button:hover, #atlas-bar nav button:focus-visible {background: #354034; border-color: #9aa88e}

#map-stage {background: #29332e}
#atlas-shell[data-view=overview] #map-photo {opacity: .77}
#atlas-shell[data-view=overview] #map-raceline path {stroke-width: 3.5px}
#atlas-shell .turn-pin {
  background: #242b28f5; color: #f2f4ec; border-color: #90978b; border-radius: 3px;
  box-shadow: 0 1px 3px #10151075;
}
#atlas-shell .turn-pin.major {color: var(--ink); border-color: #67705b; background: #efeedd}
#atlas-shell .turn-pin.major .pin-caption b {color: #3b5727}
#atlas-shell .turn-pin:hover, #atlas-shell .turn-pin:focus-visible {color: var(--ink); border-color: #24301f; background: #edfac2; z-index: 3}
#atlas-shell .turn-pin[aria-expanded=true] {background: var(--signal); color: #17210e; border-color: #29341e; z-index: 3}
#atlas-shell .turn-pin.has-low-speed::after {background: #ffb876; color: #291906}
.pin-guide {stroke: #e0e4d8}
#atlas-shell #map-heading {
  position: absolute; z-index: 3; left: var(--edge); top: calc(var(--bar-h) + var(--edge));
  width: var(--brief-width); max-height: calc(100% - var(--bar-h) - 92px); overflow: auto;
  padding: 18px; border-radius: 5px; border: 1px solid #c4c8bb; background: var(--paper);
  box-shadow: 0 4px 18px #10171138; color: var(--ink); text-shadow: none;
  pointer-events: auto; scrollbar-width: thin; scrollbar-color: #a9ae9e var(--paper);
}
.brief-head {position: relative}
#map-heading .map-eyebrow {
  padding-right: 20px; font: 600 10px/1.15 var(--cond); letter-spacing: .11em; color: #596352;
}
.map-eyebrow span {color: #87967c; padding: 0 1px}
#atlas-shell #map-heading h1 {
  font: 770 clamp(26px, 2.15vw, 34px)/1.22 var(--cn);
  letter-spacing: -.065em; margin: 7px 0 12px; color: var(--ink);
}
#brief-toggle {position: absolute; right: -6px; top: -7px; width: 32px; height: 32px; display: grid; place-items: center; color: #4a5444; border-radius: 4px}
#brief-toggle:focus-visible, #map-heading a:focus-visible {outline-color: #3b6828; outline-offset: 1px}
#brief-toggle:hover {background: #e2e5d7}
#brief-toggle .icon {width: 15px; height: 15px}
#brief-toggle[aria-expanded=true] .icon {transform: rotate(180deg)}
#map-summary {display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 15px}
.brief-stat {display: flex; align-items: baseline; gap: 4px}
.brief-stat b {font: 600 26px/1 var(--cond); font-variant-numeric: tabular-nums; letter-spacing: -.025em}
.brief-stat span {color: var(--ink-muted); font: 500 11px var(--cn)}
#slow-key {padding: 2px 5px; border-radius: 3px; background: #f3dcc1; color: #743e17; font: 600 10px/1.4 var(--cn)}
#slow-key b {display: inline; margin: 0 2px 0 0; background: none; color: inherit; font-weight: 800}
#brief-details {margin-top: 15px; border-top: 1px solid var(--rule)}
.brief-elevation {padding: 12px 0 8px}
.brief-elevation>div, .brief-section-title, .brief-short, .quick-caption {display: flex; align-items: center; justify-content: space-between; gap: 8px}
.brief-elevation span, .brief-section-title h2 {font: 650 12px/1.4 var(--cn); color: var(--ink)}
.brief-elevation b {color: #495543; font: 600 15px var(--cond); font-variant-numeric: tabular-nums}
.brief-elevation small {font: 500 10px var(--cn)}
#overview-elevation {width: 100%; height: 38px; margin-top: 6px}
.elev-fill {fill: #dce3cb}
.elev-line {fill: none; stroke: #657b4e; stroke-width: 1.4; vector-effect: non-scaling-stroke}
.brief-turns {padding-top: 12px; border-top: 1px solid var(--rule)}
.brief-section-title {margin-bottom: 8px}
.brief-credit {color: var(--ink-muted); font-size: 10px; text-underline-offset: 2px}
.brief-credit:hover {text-decoration: underline}
.brief-feature {display: block; position: relative; height: clamp(117px, 16vh, 155px); overflow: hidden; border-radius: 3px; background: #283428; color: #fff}
.brief-feature::after {content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 33%,#1016115c 58%,#0c110cea)}
.brief-feature img {width: 100%; height: 100%; object-fit: cover; object-position: center 54%}
.quick-caption {position: absolute; inset: auto 11px 9px; z-index: 1; align-items: flex-end; color: #fff}
.quick-caption small, .quick-caption strong {display: block}
.quick-caption small {font: 600 12px/1.3 var(--cond); color: #edf6d6; letter-spacing: .065em}
.quick-caption i {font-style: normal}
.quick-caption strong {font: 700 17px/1.35 var(--cn)}
.quick-caption svg, .brief-short svg {width: 15px; height: 15px; flex: none}
.brief-feature:hover .quick-caption strong, .brief-feature:focus-visible .quick-caption strong {text-decoration: underline; text-underline-offset: 4px}
.brief-short {justify-content: flex-start; min-height: 39px; margin-top: 4px; color: var(--ink); font: 550 12px var(--cn)}
.brief-short b {color: #45583a; font: 600 14px var(--cond)}
.brief-short svg {margin-left: auto}
.brief-short:hover {background: var(--paper-alt)}
#atlas-shell #map-heading[data-state=compact] {padding: 11px 14px}
#map-heading[data-state=compact] .map-eyebrow {font-size: 9px}
#atlas-shell #map-heading[data-state=compact] h1 {font-size: 23px; margin: 4px 0}
#map-heading[data-state=compact] .brief-stat b {font-size: 17px}
#atlas-shell #map-near-note {display: block; color: var(--ink-muted); font: 11px/1.45 var(--cn)}

#map-layers {display: block; top: calc(var(--bar-h) + var(--edge)); z-index: 5}
#layer-toggle, #zoom-tools {
  color: var(--light-ink); background: #212724f5; border: 1px solid #7c867a; border-radius: 4px;
  box-shadow: 0 2px 9px #0b100c55;
}
#layer-toggle {display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 10px; font: 600 12px var(--cn)}
#layer-toggle .icon {width: 16px; height: 16px}
#layer-toggle .small {width: 11px}
#layer-toggle:hover, #layer-toggle[aria-expanded=true] {background: #30392f; border-color: #c7d3b5}
#layer-toggle[aria-expanded=true] .small {transform: rotate(180deg)}
#layer-panel {
  position: absolute; z-index: 1; top: calc(100% + 6px); right: 0; padding: 8px; width: 164px;
  border-radius: 5px; border: 1px solid #8c9385; color: var(--ink); background: var(--paper);
  box-shadow: 0 5px 20px #0e140e55;
}
#layer-panel .base-switch {width: 100%; padding: 2px; gap: 2px; background: var(--paper-alt); border-color: var(--rule); box-shadow: none}
#layer-panel .base-switch button {width: 50%; height: 33px; font-size: 13px; color: var(--ink-muted)}
#layer-panel .base-switch [aria-pressed=true] {background: var(--charcoal); color: var(--signal)}
#layer-panel .line-switch {display: grid; margin-top: 5px; box-shadow: none; background: transparent; border: 0}
#layer-panel .line-switch button {min-height: 36px; padding: 4px 7px; gap: 8px; opacity: 1; color: var(--ink); text-decoration: none; border: 0; border-radius: 2px}
#layer-panel .line-switch i {display: none}
#layer-panel .line-switch button::before {content: ''; width: 13px; height: 13px; line-height: 13px; font: bold 12px/13px var(--cn); border-radius: 2px; border: 1px solid #8d9686}
#layer-panel .line-switch button[aria-pressed=true]::before {content: '✓'; background: var(--signal); border-color: #767f51; color: #223019}
#layer-panel .line-switch button:hover {background: var(--paper-alt)}
#layer-panel button:focus-visible {outline-color: #416b2a; outline-offset: 1px}
#zoom-tools {width: 40px; border-color: #788276}
#zoom-tools button {height: 37px; color: var(--light-ink)}
#zoom-tools button:hover:not(:disabled) {background: #3e493c}
#zoom-tools button:focus-visible {outline-offset: -3px}
#zoom-level {color: #d3dccb; font-size: 10px}
#map-north {color: #ecf1df}
#map-scale {background: #222923dc}
#map-foot {min-height: 44px; color: #c4cbc0; background: var(--charcoal); border-color: var(--chrome-line); gap: 20px}
#map-foot .small-map-help {display: none}
.speed-key>span {color: var(--light-ink)}
.speed-key>span small, .speed-key b {color: #c7d1c1}
.speed-key b {font-size: 9px}
.map-credits {color: #c0cabd}
#map-tip, #map-load, #photo-status, #kerb-bar {background: #202723f8; border-color: #87977b; color: var(--light-ink)}
#tip-speed {color: var(--signal); font-size: 33px}
#tip-name, #tip-unit, #tip-station {color: #dde4d5}

#drive-panel {background: #202622fa; border: 1px solid #808c79; border-radius: 5px; width: 213px; padding: 9px 11px; box-shadow: 0 6px 21px #0b110b66}
#drive-title {color: var(--light-ink); font-size: 13px; letter-spacing: .025em}
#drive-close {background: transparent; border: 0; color: #c6d0c0; width: 26px; height: 26px}
.drive-main {gap: 12px; padding-bottom: 7px; margin: 1px 0 6px; border-color: #465044}
#drive-preview {width: 28px; height: 48px}
#drive-name {font: 600 13px/1.15 var(--cond); color: #d2dccc; letter-spacing: .015em}
.drive-speed b {font-size: 42px; color: var(--light-ink)}
.drive-speed span, .drive-meta {color: #bdc9b9}
.drive-pedals {gap: 5px}
.drive-pedals>div {color: #e0e7dc}
.drive-pedals meter {--fill: var(--signal); height: 6px; background: #485145}
.drive-pedals meter::-webkit-meter-bar {background: #485145}
.drive-pedals #drive-brake {--fill: #ff997a}
.drive-meta {margin-top: 8px}
#drive-progress {width: 100%; display: block; height: 3px; margin: 3px 0 5px; border: 0; appearance: none; background: #485145; color: #a0b591}
#drive-progress::-webkit-progress-bar {background: #485145}
#drive-progress::-webkit-progress-value {background: #a0b591}
#drive-progress::-moz-progress-bar {background: #a0b591}
#drive-next {color: #d5ded0}
#drive-play, #kerb-play {border-radius: 3px; background: var(--signal); color: #20291a; border: 1px solid var(--signal); min-height: 33px; font-weight: 700}
#drive-follow {border-color: #707e69; border-radius: 3px}
#drive-follow[aria-pressed=true] {color: #e0eacb; background: #343e31}

@media (max-width: 1079px), (max-height: 589px) {
  :root {--brief-width: 206px}
  #atlas-shell #map-heading {padding: 12px 14px}
  #atlas-shell #map-heading h1 {font-size: 25px; margin: 4px 0 6px}
  .brief-stat b {font-size: 20px}
  #map-heading[data-state=open] {z-index: 6}
  .brief-feature {height: 112px}
}
@media (max-width: 820px) {
  :root {--edge: 12px; --bar-h: 90px}
  #atlas-bar {display: grid; grid-template-columns: 1fr auto; grid-template-rows: 41px 45px; gap: 0 9px}
  .brand {font-size: 28px; width: max-content; grid-column: 1; grid-row: 1; gap: 7px}
  .brand svg {width: 27px; height: 22px}
  #atlas-bar nav {grid-row: 1; grid-column: 2; gap: 4px}
  #atlas-bar nav button {height: 33px; border-color: transparent}
  #atlas-bar nav .search-launch {padding: 0 6px; gap: 5px}
  #atlas-bar nav .iconbtn {width: 33px}
  .vehicle-group {grid-column: 1 / -1; grid-row: 2; border: 0; padding: 0; height: 100%}
  #atlas-bar .car-select {height: 38px; width: auto; flex: 1; padding: 3px 9px; gap: 7px}
  #header-car-model {height: 29px; width: 16px}
  .header-choice strong {font-size: 16px}
  .header-choice small, .atlas-time small {font-size: 9px}
  #lap-source-link {min-width: 95px; margin-left: 12px; gap: 5px}
  #lap-time {font-size: 18px}
  #map-foot {gap: 10px}
}
@media (max-width: 640px) {
  :root {--edge: 9px; --brief-width: 168px}
  #atlas-shell #map-heading {padding: 9px 10px; top: calc(var(--bar-h) + 9px)}
  #atlas-shell #map-heading h1 {font-size: 21px; margin: 4px 0}
  #map-heading .map-eyebrow {font-size: 8px; letter-spacing: .08em}
  #brief-toggle {width: 29px; height: 29px; top: -5px; right: -5px}
  #map-heading[data-state=open] {width: min(225px, 69vw)}
  #atlas-shell #map-heading[data-state=compact] {padding: 7px 9px}
  #atlas-shell #map-heading[data-state=compact] h1 {font-size: 18px; margin: 3px 0}
  #atlas-shell #map-near-note {font-size: 10px}
  .brief-stat b {font-size: 18px}
  .brief-stat span {font-size: 10px}
  #map-layers {top: calc(var(--bar-h) + 9px)}
  #layer-toggle {height: 36px}
  #zoom-tools {width: 34px}
  #zoom-tools button {height: 32px}
  #map-foot {min-height: 37px; padding-top: 5px; padding-bottom: max(5px,env(safe-area-inset-bottom)); gap: 6px}
  #map-foot>p {display: none}
  #map-foot .small-map-help {display: block; font-size: 9px; white-space: nowrap}
  .map-credits {display: grid; grid-template-columns: auto auto; grid-template-rows: repeat(2,10px); align-items: center; justify-items: end; gap: 1px 4px; font-size: 8px; line-height: 10px}
  .map-credits a {grid-column: 2}
  .map-credits #shot-credits {grid-column: 1; grid-row: 1 / span 2}
  .speed-key {gap: 6px}
  .speed-key>div {width: 49px}
  .speed-key b {font-size: 8px}
  #drive-panel {width: 178px; padding: 6px 8px 7px}
  #drive-preview {width: 23px; height: 36px}
  .drive-main {gap: 9px; padding-bottom: 4px}
  .drive-speed b {font-size: 32px}
  .drive-pedals {gap: 3px}
  .drive-meta {margin-top: 5px}
  #drive-play {min-height: 31px}
}
@media (max-height: 510px) {
  :root {--bar-h: 43px}
  #atlas-bar {display: flex; gap: 10px}
  .brand {font-size: 22px; gap: 5px}
  .brand svg {width: 22px}
  .vehicle-group {flex: 1; border: 0; padding: 0}
  #atlas-bar .car-select {max-width: 260px; min-width: 76px; height: 33px}
  #lap-source-link {min-width: 0; margin-left: 8px}
  #atlas-bar nav {gap: 1px}
  #atlas-bar nav .iconbtn {width: 27px}
  #atlas-bar nav .search-launch {padding: 0 4px}
  #atlas-shell #map-heading {padding: 6px 9px}
  #atlas-shell #map-heading h1 {font-size: 18px; margin: 1px 0 4px}
  #map-heading .map-eyebrow {display: none}
  #brief-toggle {top: -3px}
  #brief-details {margin-top: 6px}
  #drive-panel {max-height: calc(100dvh - var(--bar-h) - 54px)}
}