/* Light mode: a clear pearl surface over a cooler, lower-luminance canvas.
   The slight surface/canvas separation keeps white out of large page areas. */
html[data-theme="light"] {
  --canvas:#e9edf2;
  --surface:#f7f8fa;
  --surface-alt:#eaf0f5;
  --surface-raised:#fafbfd;
  --ink:#25303d;
  --secondary:#566477;
  --muted:#667386;
  --line:#d1d9e3;
  --chart-grid:#dce3eb;
  --chart-mask:#d8e1eb;
  --map-panel:#f5f8fbee;
  --map-panel-border:#c5d0dd;
  --map-panel-text:#34465c;
  --map-panel-muted:#61728a;
}
html[data-theme="light"][data-accent-style="frosted"] #product-workspace {
  --accent-glass:linear-gradient(135deg,#fafbfded,#eef3f9eb);
  --accent-glass-edge:#ffffffbd;
  --accent-glass-border:#cbd6e3;
  --accent-glass-shadow:0 4px 15px #2447670b,inset 0 1px 0 #ffffffb3;
  background:radial-gradient(ellipse at 88% 4%,#d7e5f775,transparent 46%),linear-gradient(145deg,#e6ebf2,#eff2f6 55%,#e3eaf2);
}
html[data-theme="light"] :is(.session-library-row,.drag-library-row,.review-dock) {
  border-color:var(--line);
  box-shadow:0 3px 12px #24476707,inset 0 1px 0 #ffffffa3;
}
html[data-theme="light"] :is(.map-wrap,.map-wrap[data-map-style="precision"]) {
  --map-sheet:#e8edf4;
  --map-edge:#aebdce;
  --map-road:#d0dbe7;
  background:radial-gradient(ellipse at 60% 35%,#f6f9fc99,transparent 70%),var(--map-sheet);
}
html[data-theme="light"] .map-wrap.layer-none,
html[data-theme="light"] .map-wrap[data-map-style="precision"].layer-none {
  background:linear-gradient(145deg,#edf2f8,#e7edf5);
}
html[data-theme="light"] :is(.catalog-gate-label,.catalog-corner-label) rect {fill:#f5f8fbed;stroke:#bfccd9}
html[data-theme="light"] :is(.map-small,.map-telemetry-readings,.map-lap-details,.event-legend,.map-option-toggles) {box-shadow:0 2px 8px #243c5410}
html[data-theme="light"] #review-dock .review-tool {background:#eef2f7;border-color:#c6d2df;box-shadow:inset 0 1px 0 #ffffff9e,0 2px 5px #243c5407}
html[data-theme="light"] #review-dock .review-tool:hover {background:#e5edf6;border-color:#a7b8ce}

/* Close controls use a geometric mark, not a font-dependent multiplication
   glyph. Existing SVG controls use the same centred grid and dimensions. */
:is(#exit-map-focus,#quick-stop-compare,#rail-stop-compare,#cancel-custom-sector,#development-close,.comparison-close,.modal-close,.close-chart,.review-close,[data-unpin],[data-tour-close],[data-demo-revoke],[data-custom-remove]) {
  display:inline-grid;
  place-items:center;
  align-content:center;
  justify-content:center;
  flex-shrink:0;
  padding:0!important;
  gap:0;
  line-height:1!important;
  text-align:center;
}
:is(#exit-map-focus,#quick-stop-compare,#rail-stop-compare,#cancel-custom-sector,#development-close,.comparison-close,.modal-close,.close-chart,[data-unpin],[data-tour-close],[data-demo-revoke],[data-custom-remove]):not(:has(svg.icon)) {
  font-size:0!important;
}
:is(#exit-map-focus,#quick-stop-compare,#rail-stop-compare,#cancel-custom-sector,#development-close,.comparison-close,.modal-close,.close-chart,[data-unpin],[data-tour-close],[data-demo-revoke],[data-custom-remove]):not(:has(svg.icon))::before {
  content:"";
  display:block;
  width:18px;
  height:18px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none;
}
:is(#exit-map-focus,#quick-stop-compare,#rail-stop-compare,#cancel-custom-sector,#development-close,.comparison-close,.modal-close,.close-chart,.review-close,[data-unpin],[data-tour-close],[data-demo-revoke],[data-custom-remove])>.icon {
  display:block;
  width:18px;
  height:18px;
  margin:0;
  flex:none;
  transform:none;
  stroke-width:1.8;
}
#map-focus-badge #exit-map-focus>.icon {width:20px;height:20px}
.development-topline #development-close>span {display:none}
.modal-close,#cancel-custom-sector,[data-tour-close] {width:32px;height:32px;min-width:32px}
.comparison-close {width:28px;height:28px;min-width:28px}
.chart-value-tooltip [data-unpin]>.icon,
.chart-value-tooltip [data-unpin]::before {width:13px;height:13px}
.video-overlay-button:not(:has(>span)) {display:inline-grid;place-items:center;padding:0;line-height:1}
.video-overlay-button>.icon {display:block;margin:0}

/* The exit action belongs directly below the Review heading, left aligned. */
#review-dock .review-heading-row {display:contents}
#review-dock .review-heading-row:has(.review-active-section:not([hidden])) {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  flex:1 0 100%;
  min-width:0;
  gap:8px;
}
#review-dock .review-heading-row:has(.review-active-section:not([hidden]))>h2 {flex:0 0 auto;margin:0;width:auto}
#review-dock .review-heading-row .review-active-section {
  margin:0;
  padding:0;
  min-width:0;
  gap:9px;
  justify-content:flex-start;
  align-items:center;
}
#review-dock .review-heading-row .review-active-section>span {min-width:0;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#review-dock #review-clear-selection {order:-1;flex:none;min-height:32px}

/* Creating a timing gate is an action; existing gates remain quiet readouts. */
#review-dock #create-sector {
  min-height:36px;
  padding:8px 12px;
  border:1px solid color-mix(in srgb,var(--red) 34%,var(--line));
  border-radius:7px;
  background:color-mix(in srgb,var(--red) 7%,var(--surface));
  color:color-mix(in srgb,var(--red) 78%,var(--ink));
  font-weight:650;
  font-size:11px;
  box-shadow:inset 0 1px 0 #ffffff10;
}
#review-dock #create-sector:hover {
  background:color-mix(in srgb,var(--red) 12%,var(--surface));
  border-color:color-mix(in srgb,var(--red) 65%,var(--line));
}
html[data-theme="dark"] #review-dock #create-sector {color:#f69a9d}
@media(max-width:560px) {
  #review-dock .review-heading-row .review-active-section {gap:7px}
  #review-dock .review-heading-row .review-active-section>span {max-width:85px;font-size:10px}
  #review-dock #review-clear-selection {font-size:10px;padding:7px 9px}
}