/* agentpad13 configurator — the device's design language, nothing more.
   Warm off-white matte ground, near-black ink, ONE accent (black on light,
   white on dark). One family, two sizes, regular + one bold. One radius.
   Spacing is a strict 4 px grid. */

:root {
  --ground: #F4F1EA;
  --ground-2: #EDE9E0;
  --ink: #17171A;
  --ink-2: #17171A99;
  --ink-3: #17171A5C;
  --accent: #0E0E10;
  --on-accent: #F7F5F0;
  --hair: #17171A1F;
  --sunk: #17171A0D;
  --elev: 0 -1px 40px #17171A1F;
  --pop: #FCFBF8;
  --drop: 0 10px 28px #17171A2E;

  --r: 9px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 20px; --s5: 28px;
  --t-s: 13px;
  --t-m: 15px;
  --rail: 320px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #131211;
    --ground-2: #1B1A18;
    --ink: #EFECE6;
    --ink-2: #EFECE699;
    --ink-3: #EFECE65C;
    --accent: #F5F3EF;
    --on-accent: #131211;
    --hair: #EFECE626;
    --sunk: #EFECE60F;
    --elev: 0 -1px 40px #00000073;
    --pop: #262523;
    --drop: 0 10px 28px #000000A6;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* beats the flex/grid rules below */

html, body {
  height: 100%;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--t-s)/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  display: grid;
  grid-template-columns: 1fr var(--rail);
  height: 100dvh;
  overflow: hidden;
}

/* ---------------------------------------------------------------- stage */

#stage { position: relative; min-width: 0; }
#view { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#view:active { cursor: grabbing; }

/* ----------------------------------------------------------------- rail */

#rail {
  border-left: 1px solid var(--hair);
  padding: var(--s5) var(--s4) calc(var(--s5) + 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  scrollbar-width: thin;
}

.group { display: flex; flex-direction: column; gap: var(--s2); }
.group[hidden] { display: none; }
.label { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); letter-spacing: 0.01em; }

/* segmented control: one track, N cells, no chrome */
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  background: var(--sunk);
  border-radius: var(--r);
}
.seg > button {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  border: 0;
  padding: 6px 8px;
  border-radius: calc(var(--r) - 2px);
  background: transparent;
  color: var(--ink-2);
  font: 400 var(--t-s)/1.3 var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.seg > button:hover { color: var(--ink); background: var(--sunk); }
.seg > button[aria-checked="true"] {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* colour: the current value as a chip + its name, and a GRID of swatches.
   One control, one shared palette, every colourable part. */
.pick { position: relative; }
.pick-btn {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  appearance: none;
  border: 0;
  padding: 6px var(--s2) 6px 6px;
  border-radius: var(--r);
  background: var(--sunk);
  color: var(--ink);
  font: 400 var(--t-s)/1.3 var(--font);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}
.pick-btn:hover { background: var(--hair); }
/* the caret is the control's shape, not an icon: two borders, no glyph */
.pick-btn::after {
  content: "";
  flex: none;
  margin: -3px 2px 0 auto;
  width: 5px; height: 5px;
  border: solid var(--ink-3);
  border-width: 0 1.25px 1.25px 0;
  transform: rotate(45deg);
}
.pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip {
  flex: none;
  width: 15px; height: 15px;
  border-radius: 4px;
  /* a mid-ink hairline, so a black chip still reads on a dark ground and a
     white one still reads on a light one */
  border: 1px solid var(--ink-3);
}

.menu {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + var(--s1));
  z-index: 20;
  max-height: min(340px, 46dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: var(--s1);
  border-radius: var(--r);
  border: 1px solid var(--hair);
  background: var(--pop);
  box-shadow: var(--drop);
}
.pick[data-drop="up"] > .menu { top: auto; bottom: calc(100% + var(--s1)); }

/* the swatch grid — 8 columns, and the 8 is ui.js SWATCH_COLS: the arrow keys
   step by exactly one row, so the two numbers are one number */
.menu[data-grid] {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--s1);
  padding: var(--s2);
}
.swatch {
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 5px;
  /* a mid-ink hairline, so a black swatch still reads on a dark ground and a
     white one still reads on a light one */
  box-shadow: inset 0 0 0 1px var(--ink-3);
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.swatch:hover { transform: scale(1.14); box-shadow: inset 0 0 0 1px var(--ink-2), var(--drop); }
/* the selected colour is OUTLINED, not ticked: a glyph on a swatch would hide
   the colour it is there to show */
.swatch[aria-selected="true"] {
  box-shadow: inset 0 0 0 1.5px var(--pop), 0 0 0 2px var(--accent);
}
/* Rainbow is a gradient, not a colour: give it the one shape difference in the
   grid so it never reads as "some pinkish swatch" */
.swatch[data-css] { border-radius: 50%; }

/* booleans: one box, one word, one row — identical everywhere in the rail */
.checks { display: flex; flex-direction: column; gap: 1px; }
.check {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px 6px;
  border-radius: calc(var(--r) - 3px);
  color: var(--ink-2);
  cursor: pointer;
}
.check:hover { background: var(--sunk); color: var(--ink); }
.check:has(> input:checked) { color: var(--ink); }
.check > input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  margin: 0;
  width: 15px; height: 15px;
  display: grid;
  place-content: center;
  border: 1px solid var(--ink-3);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.check > input:checked { background: var(--accent); border-color: var(--accent); }
.check > input:checked::after {
  content: "";
  width: 4px; height: 8px;
  margin-top: -2px;
  border: solid var(--on-accent);
  border-width: 0 1.75px 1.75px 0;
  transform: rotate(43deg);
}
/* the one hint the rules engine can give a checkbox (rules.json
   led_on_band_suggest) — a ring on the box, never a word */
.check[data-suggest] > input { border-color: var(--accent); box-shadow: 0 0 0 3px var(--sunk); }

:where(button, input, [role="option"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* inside the panel the ring turns in, so it never bleeds over the edge */
.menu > [role="option"]:focus-visible { outline-offset: -2px; }
/* ...except a swatch, which is 26 px square: an inset ring would swallow the
   colour, so this one sits just outside and the gap gives it room */
.swatch:focus-visible { outline-offset: 1px; }

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

#sheet {
  position: fixed;
  left: 0;
  bottom: 0;
  width: calc(100% - var(--rail));
  max-height: 76dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground-2);
  border-top: 1px solid var(--hair);
  border-radius: var(--r) var(--r) 0 0;
  box-shadow: var(--elev);
  transform: translateY(calc(100% - 48px));
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}
#sheet[data-open="true"] { transform: translateY(0); }

#sheet-handle {
  flex: 0 0 48px;
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  height: 48px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: var(--r) var(--r) 0 0;
}
#sheet-handle > span {
  display: block;
  width: 44px; height: 4px;
  border-radius: var(--r);
  background: var(--ink-3);
  transition: background 140ms ease, width 140ms ease;
}
#sheet-handle:hover > span { background: var(--ink-2); width: 60px; }

#sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--s5) var(--s5);
}

.sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s5);
  padding-bottom: var(--s4);
}
.sheet-grid h2 {
  margin: 0 0 var(--s3);
  font-size: var(--t-m);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sheet-grid ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.sheet-grid li { display: flex; gap: var(--s2); align-items: baseline; }
.sheet-grid li > .k { color: var(--ink-3); }
.sheet-grid li > .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sheet-grid li > .price { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sheet-grid li.note { color: var(--ink-2); }
/* The single estimates caveat, between the grid and the firmware footer. */
.sheet-costs { color: var(--ink-3); padding-bottom: var(--s4); }

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair); }
a:hover { border-bottom-color: var(--accent); }

.sheet-foot {
  border-top: 1px solid var(--hair);
  padding-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
}
.cmd {
  padding: 6px var(--s3);
  border-radius: var(--r);
  background: var(--sunk);
  color: var(--ink-2);
  user-select: all;
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}

/* --------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; grid-template-rows: 46dvh 1fr; }
  #rail { border-left: 0; border-top: 1px solid var(--hair); padding: var(--s4) var(--s4) 96px; }
  #sheet { width: 100%; max-height: 88dvh; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}