/* Lens Height — phone-first, dark-room-friendly. */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-alt: #ebedf0;
  --text: #14151a;
  --text-secondary: #53565e;
  --border: #d4d7dc;
  --accent: #1e5fd8;
  --accent-soft: #e3ebfb;
  --accent-contrast: #ffffff;
  --success: #167a3f;
  --success-bg: #e3f6ea;
  --danger: #b3261e;
  --danger-bg: #fbe6e4;
  --warning: #8a5a00;
  --warning-bg: #fdedcf;

  /* Three kinds of piece, told apart by pattern as well as color. */
  --fixed: #6b7383;
  --adjustable: #2a8f82;
  --moveable: #d9822b;
  --moveable-alt: #f3b676;
  --reach: #c3cad6;

  /* The drawing's height, in pixels; the drawing area measures itself and
     hands its size to stackLayout. */
  --plot-height: 520px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0b0d;
    --surface: #17181c;
    --surface-alt: #1f2127;
    --text: #f2f3f5;
    --text-secondary: #a9adb6;
    --border: #2c2f36;
    --accent: #5c8fff;
    --accent-soft: #1a2846;
    --accent-contrast: #071022;
    --success: #3ecb7b;
    --success-bg: #103621;
    --danger: #ff7a70;
    --danger-bg: #3a1512;
    --warning: #ffc35c;
    --warning-bg: #3a2c05;

    --fixed: #8b93a3;
    --adjustable: #4fc3b3;
    --moveable: #ffb04d;
    --moveable-alt: #a35d12;
    --reach: #3f4657;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.4;
}

.app-header {
  padding: max(12px, env(safe-area-inset-top, 0px)) 0 8px;
}

.app-header h1 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.notice {
  padding: 16px;
  color: var(--text-secondary);
}

h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
}

h3 {
  margin: 18px 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* --- Target, compact --------------------------------------------------- */

.target {
  display: flex;
  gap: 8px;
  align-items: center;
}

.segmented {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px;
}

.segmented-btn {
  min-height: 42px;
  padding: 6px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
}

.segmented-btn.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
}

.target-fields {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 6px;
  align-items: center;
}

.unit {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

input[type="number"],
select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 8px 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
}

/* --- Verdict ------------------------------------------------------------- */

.verdict {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 10px -16px 0;
  padding: 10px 16px;
  background: var(--bg);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-secondary);
}

.verdict-icon {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
}

.verdict[data-state="feasible"] {
  color: var(--success);
}

.verdict[data-state="infeasible"] {
  color: var(--danger);
}

/* Plain-language "why did that change" notes: a toast over the bottom of
   the screen, so the drawing doesn't move. */
.notes {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 20;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 540px;
  margin: 0 auto;
  padding: 10px 6px 10px 14px;
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  font-size: 0.84rem;
}

.notes ul {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.notes li + li {
  margin-top: 4px;
}

.notes-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: -8px 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
}

/* --- The drawing ----------------------------------------------------------- */

.rig {
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: 14px;
  padding: 10px 8px;
}

.rig[data-state="feasible"] {
  border-color: var(--success);
}

.rig[data-state="infeasible"] {
  border-color: var(--danger);
}

.plot {
  position: relative;
  height: var(--plot-height);
}

.plot > * {
  position: absolute;
}

/* The rail: every height the rig reaches, and what the moveable part sweeps. */
.rail {
  left: 1%;
  width: 8px;
  top: 0;
  bottom: 0;
}

.band {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 2px;
  border-radius: 4px;
}

.band-reach {
  background: var(--reach);
}

/* Where the reach runs past the drawing: a fading, open end. */
.band-reach.continues-above {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px);
  mask-image: linear-gradient(to bottom, transparent, #000 18px);
}

.band-reach.continues-below {
  -webkit-mask-image: linear-gradient(to top, transparent, #000 18px);
  mask-image: linear-gradient(to top, transparent, #000 18px);
}

.rail-label {
  left: calc(1% + 12px);
  z-index: 4;
  padding: 0 3px;
  border-radius: 4px;
  background: var(--surface);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

/* Both hang just under their edge, so they stay apart even when the rail is short. */
.rail-top,
.rail-bottom {
  transform: translateY(100%);
}

.band-moveable {
  left: 2px;
  right: 2px;
  background: repeating-linear-gradient(45deg, var(--moveable) 0 4px, var(--moveable-alt) 4px 8px);
}

.floor {
  left: 0;
  right: 0;
  height: 3px;
  background: var(--text);
  transform: translateY(50%);
}

/* The target: a line, or a band for a move, across the full width. */
/* The target line (or move band): the one strong line in the drawing. */
.target-mark {
  z-index: 3;
  left: 0;
  right: 0;
  border-top: 3px solid var(--accent);
  transform: translateY(-1px);
  pointer-events: none;
}

.target-mark.is-range {
  z-index: 0;
  border-bottom: 3px solid var(--accent);
  background: var(--accent-soft);
  transform: none;
}

/* The drawing area: an SVG sized by stackLayout's frame, the full width. */
.drawing {
  left: 5%;
  width: 95%;
  top: 0;
  height: 100%;
  overflow: visible;
}




/* Outlines (src/outlines.js): one kind per gear, fills by adjustability. */
.drawing .o {
  stroke: var(--text);
  stroke-width: 1.4;
  stroke-linejoin: round;
  fill: none;
}

.drawing .k-fixed { fill: var(--fixed); }
.drawing .k-adjustable { fill: url(#fill-adjustable); }
.drawing .k-moveable { fill: url(#fill-moveable); }

.pat-moveable-bg { fill: var(--moveable-alt); }
.pat-moveable { fill: var(--moveable); }
.pat-adjustable-bg { fill: var(--adjustable); }
.pat-adjustable { fill: var(--surface); opacity: 0.7; }

/* Tripod legs and the Fisher beam are strokes: their fill is their stroke. */
.drawing .leg,
.drawing .beam,
.drawing .beam-ghost {
  stroke-linecap: round;
  fill: none;
}

.drawing .leg { stroke-width: 5; }
/* The LHE's bent arm, and the SLE cage's struts (5.8). */
.drawing .lhe-arm {
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.drawing .sle-strut { stroke-width: 1; }
.drawing .leg.k-adjustable { stroke: var(--adjustable); }
.drawing .leg.k-fixed { stroke: var(--fixed); }
.drawing .leg.k-moveable { stroke: var(--moveable); }
.drawing .beam { stroke: url(#fill-moveable); stroke-width: 8; }
.drawing .beam-ghost {
  stroke: var(--moveable);
  stroke-width: 6;
  stroke-opacity: 0.22;
}

.drawing .hole,
.drawing .hub { fill: var(--surface); }
.drawing .tire,
.drawing .track-wheel,
.drawing .skate-wheel { fill: var(--text-secondary); }
.drawing .flange { fill: none; stroke-dasharray: 2 2; }
.drawing .spare { opacity: 0.4; }
.drawing .in-use { fill: var(--accent); }
.drawing .body { fill: var(--fixed); }
.drawing .lens { fill: var(--surface-alt); }
.drawing .lens-cone {
  fill: var(--text);
  stroke: var(--surface);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* The whole drawing takes taps; src/outlines.js's pieceAt says which piece. */
.drawing .tap-surface {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}

/* Placing an item: its legal attach points, 44px tap targets. */
.drawing .marker-hit {
  fill: var(--accent);
  fill-opacity: 0.18;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  cursor: pointer;
}

.drawing .marker-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 2;
  pointer-events: none;
}

/* A flip button beside a piece that can flip (7.2): a 44px tap target. */
.drawing .flip { cursor: pointer; }

.drawing .flip-hit {
  fill: transparent;
}

.drawing .flip-disc {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 1.5;
}

.drawing .flip-arrows {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.plot.is-placing .piece { opacity: 0.55; }

.placing-hint {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
}

.drawing .groove { fill: var(--surface); }
.drawing .post { stroke-width: 1; }
.drawing .camera { fill: var(--fixed); }

/* Under the drawing: the key, and the stacking cap. */
.rig-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 2px 0;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}


.key-warning {
  color: var(--warning);
  font-weight: 700;
}

.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.swatch.kind-fixed {
  background: var(--fixed);
}

.swatch.kind-adjustable {
  background: var(--adjustable);
  outline: 1px dotted var(--surface);
  outline-offset: -3px;
}

.swatch.kind-moveable {
  background: repeating-linear-gradient(45deg, var(--moveable) 0 3px, var(--moveable-alt) 3px 6px);
}

.empty-slot {
  padding: 8px;
}

/* --- The sheet ------------------------------------------------------------ */

.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  margin: auto auto 0;
  padding: 0;
  border: none;
  border-radius: 18px 18px 0 0;
  background: var(--surface);
  color: var(--text);
}

.sheet::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.sheet-body {
  padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
}

.sheet-sub {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
}

.option:active,
.choice-btn:active,
.add-button:active {
  opacity: 0.8;
}

.option-rise {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The camera block's pieces in its sheet (SPEC.md 7.2): a plain list, top to bottom. */
.block-pieces {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.block-pieces li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.remove,
.sheet-done {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
}

.remove {
  border: 1px solid var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}

.sheet-done {
  margin-top: 10px;
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
}

.mode-static {
  margin: 0;
  padding: 10px 12px;
  background: var(--surface-alt);
  border-radius: 10px;
  font-size: 0.95rem;
}

/* A sheet's modes (a full apple's faces, a dolly's wheels): one tap each, no dropdown. */
.choice {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.choice-btn {
  flex: 1;
  min-height: 48px;
  padding: 6px 4px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
}

.choice-btn[aria-checked="true"] {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* One Add button, under the drawing. */
.add-button {
  width: 100%;
  min-height: 52px;
  margin-top: 10px;
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-weight: 800;
}


/* The version note (SPEC.md 7): small and quiet, at the very bottom. */
.version-note {
  margin: 24px 2px 12px;
  font-size: 0.7rem;
  color: var(--text-secondary);
  opacity: 0.7;
  text-align: center;
}