/* Eye Simulation. PC only (1366×768 to 1920×1080). Dark stage for the eye, light panels around it.
   Selected states always add a thick outline and a check mark, never color alone. */

:root {
  --page: #e9e7e1;
  --panel: #ffffff;
  --ink: #15171c;
  --muted: #4a4f5a;
  --line: #c9c6be;
  --accent: #1f56a8;
  --stage: #0d0f14;
  --stage-ink: #e8e6e0;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-width: 1280px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--page);
  color: var(--ink);
  font: 16px/1.4 var(--font);
}
h2 { margin: 0 0 12px; font-size: 18px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.placeholder { margin: 0; color: var(--muted); font-size: 15px; }

/* Top: eye type buttons */
.eye-bar {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.eye-pick { flex: 1; min-width: 0; display: grid; gap: 8px; }
.eye-buttons { display: flex; gap: 8px; min-width: 0; padding-right: 130px; }
.eye-button {
  position: relative; flex: 0 1 160px; min-width: 130px; height: 84px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius);
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.eye-button:hover { border-color: var(--muted); }
.eye-button[aria-pressed="true"] { border: 4px solid var(--ink); font-weight: 800; }
.eye-button[aria-pressed="true"]::after {
  content: "✓"; position: absolute; top: 4px; right: 8px; font-size: 18px; font-weight: 800;
}
.example-pick { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.example-pick span { cursor: help; text-decoration: underline dotted 1.5px; text-underline-offset: 3px; }
.example-pick select {
  min-width: 200px; height: 40px; padding: 0 10px;
  background: var(--panel); border: 2px solid var(--ink); border-radius: 8px;
  font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
}
.pick-row { display: flex; align-items: center; gap: 24px; min-width: 0; }
.example-pick { flex: none; }

/* Light spectrum bar, right of the Example dropdown. Its labels get a few pixels of air under the bar. */
.spectrum { position: relative; flex: 1; min-width: 0; height: 47px; display: flex; align-items: center; gap: 12px; }
.spectrum-label { flex: none; display: grid; line-height: 1.15; }
.spectrum-title {
  font-size: 16px; font-weight: 700; cursor: help;
  text-decoration: underline dotted 1.5px; text-underline-offset: 3px;
}
.spectrum-range { font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; cursor: help; }
.spectrum-svg { flex: 1; min-width: 0; display: block; overflow: visible; touch-action: none; }
.spectrum-svg text { font: 600 12px var(--font); fill: var(--muted); pointer-events: none; }
.spectrum-zone { cursor: help; }
.spectrum-svg .spectrum-pigment { fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.spectrum-handle { cursor: ew-resize; outline: none; }
.spectrum-handle:focus-visible rect:nth-child(2) { stroke: var(--accent); stroke-width: 3; }
.spectrum-note {
  position: absolute; top: calc(100% + 18px); left: 0; z-index: 5; margin: 0; padding: 6px 12px;
  background: var(--ink); color: #fff; border-radius: 8px; font-size: 15px; font-weight: 700; pointer-events: none;
}
.spectrum-note[hidden] { display: none; }
/* Credits and Reset sit in the top right corner, so the spectrum row can run the full width. */
.bar-actions { position: absolute; top: 12px; right: 16px; z-index: 20; display: flex; gap: 8px; }
.reset-button, .credits-button {
  display: flex; align-items: center;
  height: 48px; padding: 0 18px;
  background: var(--panel); border: 2px solid var(--ink); border-radius: var(--radius);
  font-size: 16px; font-weight: 700; cursor: pointer;
}
.credits { position: relative; }
.credits-button { list-style: none; }
.credits-button::-webkit-details-marker { display: none; }
.credits-pop {
  position: absolute; top: calc(100% + 6px); right: 0; margin: 0; padding: 10px 14px; white-space: nowrap;
  background: var(--panel); border: 2px solid var(--ink); border-radius: var(--radius); font-size: 15px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.2);
}
.credits-pop a { color: var(--accent); font-weight: 700; }
.credits-pop small { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

/* Settings panel */
.settings { display: grid; gap: 14px; align-content: start; }
.setting[hidden] { display: none; }
.setting-group {
  display: grid; gap: 14px; padding: 12px 0 14px;
  border-top: 2px solid var(--line); border-bottom: 2px solid var(--line);
}
.setting-group h3 { margin: 0; font-size: 17px; }
.setting-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; margin-bottom: 6px; }
.setting-head .setting-value { margin-left: auto; }
.setting-name {
  font-size: 16px; font-weight: 700; cursor: help;
  text-decoration: underline dotted 1.5px; text-underline-offset: 3px;
}
.setting-value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.setting input[type="range"] { width: 100%; height: 28px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.setting-ends { display: flex; justify-content: space-between; font-size: 15px; color: var(--muted); }
.choices { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 6px; }
.choice {
  position: relative; min-height: 44px; padding: 6px 8px; line-height: 1.2;
  background: var(--panel); border: 2px solid var(--line); border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.choice:hover { border-color: var(--muted); }
.choice[aria-pressed="true"] { border: 4px solid var(--ink); padding: 4px 6px; font-weight: 800; }
.choice[aria-pressed="true"]::before { content: "✓ "; }

/* How it sees: scene buttons, the view, the Light slider */
.sight { display: grid; gap: 8px; }
.scene-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.scene-button {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 44px; padding: 4px;
  background: var(--panel); border: 2px solid var(--line); border-radius: 8px;
  font-size: 15px; font-weight: 600; line-height: 1.15; cursor: pointer;
}
.scene-button:hover { border-color: var(--muted); }
.scene-button canvas { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 4px; }
/* The own-image button fills the last two slots, so its longer name fits on one line. */
.scene-button--own { grid-column: span 2; }
.scene-button--own canvas { aspect-ratio: 32 / 10; }
.scene-button[aria-pressed="true"] { border: 4px solid var(--ink); padding: 2px; font-weight: 800; }
.scene-button[aria-pressed="true"] span::before { content: "✓ "; }
.sight-view { position: relative; background: var(--stage); border-radius: var(--radius); overflow: hidden; }
.sight-view canvas { display: block; width: 100%; aspect-ratio: 16 / 10; }
.sight-view canvas[hidden] { display: none; }
/* A person's two eyes: left and right pictures side by side, each named at its bottom. */
.sight-view--pair { display: flex; gap: 2px; }
.sight-view--pair canvas { flex: 1 1 0; min-width: 0; }
/* A mirror eye's two retinas: the proximal picture over the distal one, cut at a divider that drags sideways. */
.sight-view--split .sight-second { position: absolute; inset: 0; height: 100%; }
/* Enlarged: over the 3D eye's stage (placed by sightPanel.js), on a backdrop the size of the stage. */
.sight-view--big { position: fixed; z-index: 6; box-shadow: 0 6px 24px rgb(0 0 0 / 0.45); }
.sight-backdrop { position: fixed; z-index: 5; background: var(--stage); border-radius: var(--radius); }
.sight-backdrop[hidden] { display: none; }
/* Zoom and Enlarge, top right of the view. */
.sight-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.sight-zoom { display: flex; background: rgb(255 255 255 / 0.94); border-radius: 6px; }
.sight-enlarge, .sight-zoom button {
  height: 30px; padding: 0 10px; cursor: pointer;
  font: 700 14px var(--font); color: var(--ink); background: rgb(255 255 255 / 0.94);
  border: 2px solid transparent; border-radius: 6px;
}
.sight-zoom button { padding: 0 7px; background: none; }
.sight-enlarge:hover, .sight-zoom button:hover { border-color: var(--ink); }
.sight-zoom button[aria-pressed="true"] { background: var(--ink); color: #fff; }
/* Zoomed in, the picture can be dragged around. */
.sight-view--zoomed canvas { cursor: grab; touch-action: none; }
.sight-view--dragging canvas { cursor: grabbing; }
.sight-tag {
  position: absolute; padding: 1px 8px; font-size: 15px; font-weight: 600; line-height: 22px; white-space: nowrap;
  background: rgb(255 255 255 / 0.94); color: var(--ink); border-radius: 4px; cursor: help;
}
.sight-tag[hidden] { display: none; }
.sight-tag--blind { transform: translateX(-50%); }
.sight-tag--eye { bottom: 6px; transform: translateX(-50%); cursor: default; }
.sight-tag--eye[data-eye="left"] { left: 25%; }
.sight-tag--eye[data-eye="right"] { left: 75%; }
.sight-tag--made-up { top: 8px; left: 8px; border: 2px dashed var(--ink); }
/* Short notes laid over the bottom of the view, so the tight panel doesn't grow. */
.sight-notes {
  position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; justify-items: start; gap: 4px;
  pointer-events: none;
}
.sight-notes span {
  padding: 1px 7px; font-size: 13px; font-weight: 600; line-height: 19px;
  background: rgb(255 255 255 / 0.9); color: var(--ink); border-radius: 4px;
}
.sight-missing {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center;
  color: var(--stage-ink); font-size: 16px; font-weight: 600;
}
.sight-missing[hidden] { display: none; }
/* Light and Focus side by side; Light takes the whole row when the eye has no focus. */
/* Two columns, filled row by row: Light and Focus side by side, Eyes under Light. */
.sight-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.sight-settings { display: contents; }
.sight-settings:empty { display: none; }
/* Sharpness readout under the sliders: name left, value right, like a setting's head row. */
.sharpness { display: grid; gap: 6px; margin: 4px 0 0; padding-top: 10px; border-top: 2px solid var(--line); }
.sharpness[hidden] { display: none; }
.sharpness div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sharpness dt, .sharpness dd { margin: 0; }

/* Main: settings | 3D eye | how it sees */
.layout {
  display: grid; min-height: 0; gap: 12px; padding: 12px 16px 16px;
  grid-template-columns: clamp(280px, 18vw, 340px) minmax(0, 1fr) clamp(380px, 27vw, 540px);
}
.panel {
  min-height: 0; overflow-y: auto; padding: 16px;
  /* Rows that appear or hide must not scroll the panel away from the button just clicked. */
  overflow-anchor: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
/* Panel title row with its fold button. The row stays at the top while the panel scrolls, so the button never scrolls away. */
.panel-head {
  position: sticky; top: -16px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -16px -16px 12px; padding: 12px 12px 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.panel-head h2 { margin: 0; }
.panel-fold, .panel-strip { color: var(--ink); background: var(--panel); cursor: pointer; }
.panel-fold {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--line); border-radius: var(--radius);
}
.panel-fold:hover, .panel-strip:hover { border-color: var(--ink); background: #f3f2ee; }
:is(.panel-fold, .panel-strip) svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.panel-fold svg { width: 28px; height: 28px; }
/* A folded panel is a narrow strip: one big button with the open arrow and the panel's icon, read left to right. */
.panel-strip { display: none; }
.layout.settings-folded { grid-template-columns: 64px minmax(0, 1fr) clamp(380px, 27vw, 540px); }
.layout.sight-folded { grid-template-columns: clamp(280px, 18vw, 340px) minmax(0, 1fr) 64px; }
.layout.settings-folded.sight-folded { grid-template-columns: 64px minmax(0, 1fr) 64px; }
.panel.is-folded { padding: 0; overflow: hidden; }
.panel.is-folded > :not(.panel-strip) { display: none; }
.panel.is-folded > .panel-strip {
  display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; height: 100%; padding: 14px 0;
  border: 2px solid transparent; border-radius: var(--radius);
}
.panel-strip svg { width: 32px; height: 32px; }
.panel-strip svg + svg { width: 28px; height: 28px; stroke-width: 1.9; color: var(--muted); }
.eye-stage {
  position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  background: var(--stage); color: var(--stage-ink); border-radius: var(--radius);
}
.eye-view { position: relative; flex: 1; min-height: 0; }
.eye-view[hidden] { display: none; }
.stage-top { display: grid; gap: 8px; padding: 10px 16px 0; }
.stage-row { display: flex; align-items: center; gap: 14px; }
.ray-buttons { display: flex; gap: 6px; }
.ray-buttons[hidden] { display: none; }
.ray-button {
  height: 30px; min-width: 44px; padding: 0 10px; border-radius: 6px; cursor: pointer;
  font: 700 14px var(--font); color: var(--ink); background: var(--panel); border: 2px solid transparent;
}
.ray-button[aria-pressed="true"] { border-color: currentColor; }
.ray-button--uv[aria-pressed="true"] { color: #5a2cc0; }
.ray-button--ir[aria-pressed="true"] { color: #b8231a; }
.side-buttons { margin-left: 12px; }
.side-buttons .ray-button { white-space: nowrap; }
.eye-view canvas { display: block; cursor: grab; }
.eye-view canvas:active { cursor: grabbing; }
.eye-missing {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  font-size: 18px; font-weight: 600; pointer-events: none;
}
.eye-missing[hidden] { display: none; }
.eye-note {
  margin: 0; padding: 6px 12px; justify-self: start; display: grid; gap: 2px;
  background: var(--panel); color: var(--ink); border-radius: var(--radius);
  font-size: 15px; font-weight: 700;
}
.eye-note[hidden] { display: none; }
.stage-hint { margin: 0; font-size: 15px; opacity: 0.85; }

/* 3D labels: a dot on the part, the name beside it */
/* z-index 0 keeps the labels' own depth order inside the view, so the hover box stays on top. */
.eye-labels { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.eye-label { width: 0; height: 0; }
.eye-label::before {
  content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; border: 2px solid var(--stage);
}
.eye-label-text {
  position: absolute; top: calc(-14px * var(--label-size, 1)); white-space: nowrap; pointer-events: auto; cursor: help;
  padding: 2px calc(8px * var(--label-size, 1)); font-size: calc(15px * var(--label-size, 1));
  font-weight: 600; line-height: calc(22px * var(--label-size, 1));
  background: rgb(255 255 255 / 0.94); color: var(--ink); border-radius: 4px;
}
.eye-label--right .eye-label-text { left: 10px; }
.eye-label--left .eye-label-text { right: 10px; }

/* Cut open + labels, on a light bar at the bottom of the stage */
.stage-tools {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px; padding: 8px 14px;
  background: var(--panel); color: var(--ink); border-radius: var(--radius); box-shadow: 0 4px 16px rgb(0 0 0 / 0.35);
}
.cut-control { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.cut-control input { width: 220px; height: 28px; accent-color: var(--accent); }
.cut-control output { min-width: 3.2em; font-variant-numeric: tabular-nums; }
.label-size-control input { width: 110px; }
/* A narrow 3D view: the bar wraps onto two rows and its sliders give up width, so nothing is cut off. */
.stage-tools {
  left: 14px; right: 14px; width: fit-content; margin: 0 auto; transform: none;
  flex-wrap: wrap; justify-content: center; row-gap: 6px;
}
.stage-tools .cut-control { flex: 1 1 auto; min-width: 0; }
.stage-tools .cut-control input { flex: 1 1 auto; min-width: 70px; }
/* Label size sits in a small menu above its button, so the bar shows only Cut and Labels. */
.label-tools { display: flex; align-items: center; gap: 8px; }
.label-menu { position: relative; }
.label-menu[hidden] { display: none; }
.toggle-button.label-menu-button { min-width: 44px; padding: 0 12px; }
.label-menu-button[aria-expanded="true"] { border: 4px solid var(--ink); }
.label-menu-pop {
  position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 5; padding: 8px 14px;
  background: var(--panel); border-radius: var(--radius); box-shadow: 0 4px 16px rgb(0 0 0 / 0.35);
}
.label-menu-pop[hidden] { display: none; }
.stage-tools .label-menu-pop .cut-control { flex: none; }
.stage-tools .label-menu-pop .cut-control input { flex: none; width: 140px; }
.stage-tools .label-menu-pop .cut-control output { display: inline; }
.toggle-button {
  height: 44px; padding: 0 16px; min-width: 110px;
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius);
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.toggle-button[aria-pressed="true"] { border: 4px solid var(--ink); font-weight: 800; }
.toggle-button[aria-pressed="true"]::before { content: "✓ "; }
.toggle-button[aria-pressed="false"]::before { content: "○ "; }

.tooltip {
  position: fixed; pointer-events: none; z-index: 10; max-width: 300px; padding: 8px 12px; font-size: 15px;
  background: var(--ink); color: var(--panel); border-radius: 6px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.3);
}

/* Phone-only pieces, hidden on wider screens. */
.hint-phone, .eye-type-toggle, .eye-hint, .phone-tabs, .eye-menu-backdrop, .compare-chips, .compare-handle { display: none; }

/* Phones and narrow windows (js/ui/phoneMenus.js): a fixed screen that never scrolls sideways. A short header,
   one section at a time in the middle, and a tab bar at the bottom. Sizes follow the usual phone guidelines:
   everything tappable at least 44px, text at least 14px, and 16px in form fields so phones don't zoom in. */
@media (max-width: 1279.98px) {
  html, body { height: 100%; }
  body {
    min-width: 0; height: 100dvh; overflow: hidden;
    /* The one column is the screen's width, never wider, whatever is drawn inside it. */
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  }
  button, select, input { touch-action: manipulation; }

  /* Header: the eye type and Reset on one row, the example under them. */
  .eye-bar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; z-index: 30;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
    grid-template-areas: "type reset" "example example";
  }
  .eye-pick, .pick-row { display: contents; }
  .eye-type-toggle {
    grid-area: type; display: flex; align-items: center; gap: 10px; min-width: 0; height: 48px; padding: 0 40px 0 12px;
    position: relative; background: var(--panel); border: 2px solid var(--ink); border-radius: var(--radius);
    font-size: 17px; font-weight: 800; cursor: pointer;
  }
  .eye-type-toggle svg { flex: none; height: 28px; width: auto; }
  .eye-type-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .eye-type-toggle::after {
    content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
    border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform 0.15s;
  }
  .eye-type-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
  .bar-actions { grid-area: reset; position: static; }
  .reset-button, .credits-button { height: 48px; padding: 0 14px; }
  .example-pick { grid-area: example; min-width: 0; font-size: 16px; }
  .example-pick select { flex: 1; min-width: 0; height: 44px; font-size: 16px; }

  /* The eye type list: drops down over the page, one row per type with its one-line description. */
  .eye-buttons {
    position: absolute; top: calc(100% + 4px); left: 12px; width: min(480px, calc(100% - 24px)); z-index: 30; padding: 6px;
    display: none; gap: 4px; max-height: calc(100dvh - 140px); overflow-y: auto;
    background: var(--panel); border-radius: var(--radius); box-shadow: 0 12px 32px rgb(0 0 0 / 0.3);
  }
  .eye-buttons.is-open { display: grid; }
  .eye-button, .eye-button[aria-pressed="true"] {
    flex: none; min-width: 0; height: auto; min-height: 64px; padding: 8px 40px 8px 10px;
    display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px;
    align-items: center; justify-items: start; text-align: left;
    border: 2px solid transparent; font-size: 17px; font-weight: 700;
  }
  .eye-button svg { grid-row: span 2; justify-self: center; height: 32px; width: auto; }
  .eye-button[aria-pressed="true"] { background: #eef3fa; border-color: var(--accent); }
  .eye-button[aria-pressed="true"]::after { top: 50%; right: 14px; transform: translateY(-50%); color: var(--accent); }
  .eye-hint { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--muted); }
  .eye-menu-backdrop { display: block; position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / 0.35); }
  .eye-menu-backdrop[hidden] { display: none; }

  /* Middle: the section picked in the tab bar, filling the space. */
  .layout { display: block; min-height: 0; padding: 0; }
  .layout > * { display: none; height: 100%; }
  body[data-tab="eye"] .eye-stage, body[data-tab="sight"] .sight-panel, body[data-tab="settings"] .settings-panel { display: flex; }
  .eye-stage { border-radius: 0; }
  .panel { flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 24px; border: 0; border-radius: 0; }
  .panel-head { display: none; }
  /* On a tablet the content keeps a readable width, centered. */
  .panel > * { width: 100%; max-width: 760px; margin-inline: auto; }

  /* 3D eye */
  .stage-top { padding: 10px 12px 0; }
  .ray-button { height: 44px; min-width: 52px; font-size: 15px; }
  .stage-hint { font-size: 14px; }
  .hint-wide { display: none; }
  .hint-phone { display: inline; }
  /* Smaller labels on a small screen, so they cover less of the eye. */
  .eye-label-text {
    font-size: calc(12px * var(--label-size, 1)); line-height: calc(17px * var(--label-size, 1));
    padding: 1px calc(6px * var(--label-size, 1)); top: calc(-10px * var(--label-size, 1));
  }
  /* One slim row along the bottom: short names, no percentages. */
  .stage-tools {
    left: 8px; right: 8px; bottom: 8px; width: auto; max-width: 520px; margin: 0 auto; transform: none;
    flex-wrap: nowrap; gap: 8px; padding: 0 6px 0 10px;
  }
  .stage-tools .cut-control { flex: 1 1 0; min-width: 0; gap: 6px; font-size: 15px; }
  .stage-tools .cut-control input { width: auto; flex: 1; min-width: 0; height: 44px; }
  .stage-tools .cut-control output { display: none; }
  .toggle-button { min-width: 0; height: 44px; padding: 0 10px; font-size: 15px; border-width: 2px; }
  .credits-pop small { font-size: 14px; }
  .spectrum-svg text { font-size: 14px; }
  .credits-pop a { display: inline-flex; align-items: center; min-height: 44px; }
  .toggle-button[aria-pressed="true"] { border-width: 3px; }

  /* How it sees: the view and its sliders first, then the scenes, three to a row, with the own-image button
     as one slim row under them. The zoom buttons are big enough to tap. */
  .sight { gap: 14px; }
  .sight-view { order: -3; }
  .sight-controls { order: -2; }
  .sharpness { order: -1; margin: 0; padding: 10px 0 0; }
  .scene-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 14px; border-top: 2px solid var(--line); }
  .scene-button { font-size: 14px; }
  .scene-button--own { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; padding: 4px 12px 4px 4px; }
  .scene-button--own canvas { flex: none; width: 72px; aspect-ratio: 16 / 10; }
  .scene-button--own span { text-align: left; }
  .sight-zoom button { height: 40px; min-width: 44px; font-size: 15px; }
  .sight-enlarge { display: none; }
  .sight-notes span { font-size: 14px; }

  /* Settings, with the spectrum bar at the top (moved there by phoneMenus.js). */
  /* Held to the panel's width: drawn while the panel is hidden, it would otherwise keep its 600px default. */
  .settings-panel .spectrum {
    flex: none; width: 100%; min-width: 0; height: auto; margin-bottom: 16px;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
  }
  .settings-panel .spectrum-label { display: flex; align-items: baseline; gap: 10px; }
  .settings-panel .spectrum-svg { width: 100%; }
  .setting input[type="range"] { height: 44px; }
  .choice { font-size: 16px; min-height: 48px; }

  /* Compare: the 3D eye with the view as a small window in its corner, then a sheet: its handle, one setting and
     the chips that pick it. Closing the sheet leaves only the handle, so the 3D eye fills the space.
     The panels and their groups step aside (display: contents) so their pieces can sit in this grid. */
  body[data-tab="eye"] .layout { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto; height: 100%; }
  body[data-tab="eye"] .eye-stage { display: flex; grid-area: 1 / 1; height: auto; min-height: 0; }
  /* The UV and IR buttons float over the 3D view, like the cut bar, so the eye gets the stage's full height. */
  body[data-tab="eye"] .stage-top { position: absolute; inset: 0; z-index: 2; pointer-events: none; align-content: start; }
  /* The eye's notes sit at the bottom, just above the tool row, clear of the picture of what it sees. */
  body[data-tab="eye"] .eye-note {
    position: absolute; left: 8px; right: 8px; bottom: 62px; justify-self: auto; width: fit-content; max-width: calc(100% - 16px);
    padding: 3px 8px; font-size: 10.5px; /* 70% of the full-size note */
  }
  body[data-tab="eye"] .ray-buttons { pointer-events: auto; }
  body[data-tab="eye"] :is(.settings-panel, .sight-panel, .settings, .setting-group, .sight, .sight-controls, .sight-settings) { display: contents; }
  body[data-tab="eye"] :is(.panel-head, .setting-group > h3, .spectrum:not(.is-focus), .scene-picker, .sharpness, .sight-notes, .placeholder, .setting:not(.is-focus), .setting-ends, .stage-hint) { display: none; }
  body[data-tab="eye"] .sight-view {
    grid-area: 1 / 1; align-self: start; justify-self: end; z-index: 3; margin: 10px; width: min(44%, 240px);
    border: 2px solid #fff; box-shadow: 0 4px 14px rgb(0 0 0 / 0.45); cursor: pointer;
  }
  body[data-tab="eye"] .sight-tools { display: none; }
  body[data-tab="eye"] .compare-handle {
    grid-area: 2 / 1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px;
    background: var(--panel); border: 0; border-top: 1px solid var(--line); color: var(--accent); font: 700 15px var(--font);
    cursor: pointer; touch-action: none;
  }
  .compare-grip { width: 36px; height: 5px; border-radius: 3px; background: var(--line); }
  body.sheet-closed[data-tab="eye"] :is(.sight-view, .is-focus, .compare-chips) { display: none; }
  body[data-tab="eye"] :is(.setting, .spectrum).is-focus { grid-area: 3 / 1; max-width: none; padding: 4px 16px 0; margin: 0; background: var(--panel); }
  /* Choices side by side in one row, so a setting with three options stays as short as a slider. */
  body[data-tab="eye"] .setting.is-focus .choices { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  body[data-tab="eye"] .setting.is-focus .choice { padding-inline: 4px; font-size: 15px; line-height: 1.15; }
  /* Five or more choices don't fit one row with their full names (Tetrachromacy): three to a row instead. */
  body[data-tab="eye"] .setting.is-focus .choices:has(.choice:nth-child(5)) {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-tab="eye"] .setting.is-focus .choices:has(.choice:nth-child(5)) .choice { font-size: 14px; min-height: 44px; }
  body[data-tab="eye"] .compare-chips {
    grid-area: 4 / 1; display: flex; gap: 8px; padding: 8px 12px 10px; overflow-x: auto; scrollbar-width: none;
    background: var(--panel);
  }
  .compare-chips::-webkit-scrollbar { display: none; }
  .compare-chips button {
    flex: none; height: 40px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--panel);
    color: var(--ink); font: 600 15px var(--font); white-space: nowrap; cursor: pointer;
  }
  .compare-chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
  .compare-chips .compare-all { color: var(--accent); border-color: var(--accent); }

  /* Tab bar */
  .phone-tabs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 8px env(safe-area-inset-bottom); background: var(--panel); border-top: 1px solid var(--line);
  }
  .phone-tabs button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 60px;
    background: none; border: 0; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .phone-tabs svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .phone-tabs button[aria-pressed="true"] { color: var(--accent); font-weight: 800; }
  .phone-tabs button[aria-pressed="true"] svg { stroke-width: 2.4; }
}

/* A phone turned sideways: little height, so the header takes one row and the tab bar is slimmer. */
@media (max-width: 1279.98px) and (max-height: 520px) {
  .eye-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "type example reset";
    padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px;
    padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  }
  .eye-type-toggle, .reset-button, .credits-button { height: 44px; }
  .phone-tabs button { flex-direction: row; gap: 8px; height: 48px; }
  .phone-tabs svg { width: 22px; height: 22px; }
  /* Compare sideways: the 3D eye on the left; the handle, view, setting and chips on the right. Closed, the eye
     takes the whole width and the handle floats in its top right corner. */
  body[data-tab="eye"] .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); }
  body[data-tab="eye"] .eye-stage { grid-area: 1 / 1 / 5 / 2; }
  body[data-tab="eye"] .compare-handle { grid-area: 1 / 2; border-top: 0; }
  body[data-tab="eye"] .sight-view {
    grid-area: 2 / 2; align-self: auto; justify-self: center; margin: 0; width: min(100%, calc(32dvh * 1.6));
    border: 0; box-shadow: none; z-index: auto;
  }
  body[data-tab="eye"] :is(.setting, .spectrum).is-focus { grid-area: 3 / 2; }
  body[data-tab="eye"] .compare-chips { grid-area: 4 / 2; align-self: end; }
  body.sheet-closed[data-tab="eye"] .eye-stage { grid-column: 1 / -1; }
  body.sheet-closed[data-tab="eye"] .compare-handle {
    grid-area: 1 / 2; justify-self: end; z-index: 3; margin: 8px; padding: 0 14px; border-radius: 22px;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
  }
}