/* AutoSharpener screen prototypes — shared base.
   Tokens mirror lib/Display/Color.h (gfx::palette). Fonts are the panel's:
   Roboto at the pixel sizes tools/make_fonts.py rasterises (11 / 15 / 24 /
   44 px) and Phosphor Bold for the icons, so what the browser shows is
   within a pixel or two of what the panel draws. The panel is a 1.9"
   ST7789, 320 x 170 in landscape, dark only — there is no light theme to
   toggle, only a zoom. */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@import url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css");

:root {
  /* gfx::palette — RGB565 on the panel, shown here as the 8-bit source */
  --bg:          #0A0C10;   /* kBackground rgb(10,12,16)   */
  --surface:     #1A1E26;   /* kSurface    rgb(26,30,38)   */
  --surface-alt: #282E3A;   /* kSurfaceAlt rgb(40,46,58)   */
  --border:      #464E5E;   /* kBorder     rgb(70,78,94)   */
  --text:        #ECF0F6;   /* kText       rgb(236,240,246)*/
  --text-dim:    #8C96A6;   /* kTextDim    rgb(140,150,166)*/
  --accent:      #00AAFF;   /* kAccent     rgb(0,170,255)  */
  --accent-dim:  #005A8C;   /* kAccentDim  rgb(0,90,140)   */
  --running:     #28C878;   /* kRunning    rgb(40,200,120) */
  --stopped:     #E65A46;   /* kStopped    rgb(230,90,70)  */
  --warning:     #F0B428;   /* kWarning    rgb(240,180,40) */

  /* page chrome, outside the device */
  --page-bg: #101014;
  --page-text: #9a9aa6;
  --page-strong: #e6e6ee;
  --bezel: #16181c;
  --board: #1d2a22;         /* the green of the ideaspark PCB, roughly */

  --zoom: 2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  background: var(--page-bg);
  color: var(--page-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 64px 24px 48px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- page chrome (outside the device) ---------- */

.pagenav {
  position: fixed;
  top: 14px; left: 16px; right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
  font-size: 13px;
}
.pagenav a, .pagenav button {
  color: var(--page-text);
  background: rgba(128, 128, 140, 0.14);
  border: 1px solid rgba(128, 128, 140, 0.25);
  text-decoration: none;
  font: inherit;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.pagenav a:hover, .pagenav button:hover { color: var(--page-strong); }
.pagenav .zoom { display: flex; gap: 4px; }
.pagenav .zoom button.on { color: var(--page-strong); background: rgba(128, 128, 140, 0.32); }

.page-title { margin-bottom: 22px; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; }

/* Embedded inside an iframe (index thumbnails): no chrome, no board, just
   the panel at 1x filling the frame. */
html.embedded body { padding: 0; background: transparent; display: block; }
html.embedded .pagenav, html.embedded .page-title, html.embedded .notes,
html.embedded .panel { display: none; }
html.embedded .device, html.embedded[data-zoom] .device { zoom: 1 !important; }
html.embedded .lcd { outline: none; box-shadow: none; border-radius: 0; }

/* ---------- the device ---------- */

/* The whole board face zooms together, so the knob keeps its size
   relative to the screen at every zoom level. */
.device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  zoom: var(--zoom);
}
html[data-zoom="1"] .device { zoom: 1; }
html[data-zoom="2"] .device { zoom: 2; }
html[data-zoom="3"] .device { zoom: 3; }

.lcd {
  position: relative;
  width: 320px;
  height: 170px;
  flex: none;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  outline: 5px solid var(--bezel);
  border-radius: 2px;
  box-shadow: 0 0 0 6px #0c0c0e, 0 10px 30px rgba(0, 0, 0, 0.6);
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 16px;
}

/* ---------- the control panel under the screen ----------
   One EC11 rotary encoder with a push switch (ENC1 on the ordered board).
   Injected by sharpener.js; the legend reads from <body data-turn/
   data-push/data-hold>. */
.panel {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 330px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--board);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  color: #c9d4cc;
  font-size: 7px;
  line-height: 9px;
}
.panel .knob { flex: none; width: 34px; height: 34px; }
.panel .legend { flex: 1; display: grid; grid-template-columns: 26px 1fr; gap: 1px 6px; }
.panel .legend b { color: #eef3ef; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.panel .legend span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .legend span.none { opacity: .45; }
.panel .ref { flex: none; font-size: 6px; opacity: .55; text-align: right; line-height: 8px; }

/* ---------- the widget library, in CSS ----------
   Class names follow lib/UI: VStack/HStack/Text/Button/Slider/ProgressBar/
   Spacer/Divider. Sizes come from the modifiers used in main.cpp, so a
   screen file reads much like buildUi(). */

.vstack { display: flex; flex-direction: column; }
.hstack { display: flex; flex-direction: row; }
.flex   { flex: 1 1 0; min-width: 0; min-height: 0; }
.spacer { flex: 1 1 0; }

.text {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  flex: none;
}
.text.left   { justify-content: flex-start; }
.text.center { justify-content: center; }
.text.right  { justify-content: flex-end; }

/* Font::Small = Roboto 11 px, Body = Roboto 15 px, Title = Roboto Medium
   24 px, Huge = Roboto Bold 44 px (digits only) — the sizes in
   lib/Display/fonts/FontTable.cpp */
.small { font-size: 11px; line-height: 11px; }
.body  { font-size: 15px; line-height: 16px; }
.title { font-size: 24px; line-height: 26px; font-weight: 500; }
.huge  { font-size: 44px; line-height: 48px; font-weight: 700; font-variant-numeric: tabular-nums; }

.dim  { color: var(--text-dim); }
.ok, .running-ink { color: var(--running); }
.stop { color: var(--stopped); }
.warn { color: var(--warning); }
.accent { color: var(--accent); }

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
}
/* Button::draw: a focused button fills with its tint and inks the label in
   kBackground. The tint is otherwise invisible — kSurface with a kBorder
   outline — which is why a non-selectable button's tint never shows. */
.button.focused { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.button.focused.run { background: var(--running); border-color: var(--running); }
.button.disabled { color: var(--text-dim); }

.divider { height: 1px; flex: none; background: var(--border); }

.slider.flex { flex: 1 1 0; }
.slider { height: 34px; flex: none; display: flex; flex-direction: column; justify-content: space-between; }
.slider .label { font-size: 15px; line-height: 14px; color: var(--text-dim); }
.slider.focused .label { color: var(--text); }
.slider .track { position: relative; height: 6px; border-radius: 3px; background: var(--surface-alt); }
.slider .track i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; background: var(--accent); }
.slider .track b {
  position: absolute; top: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.slider.focused .track b { width: 14px; height: 14px; background: #fff; }

.progress { height: 8px; flex: none; border-radius: 4px; background: var(--surface-alt); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.progress.run i { background: var(--running); }

/* ---------- annotation tracker ----------
   Columns: Tag (grep-able slug), Date, Description,
   Status (New | Done | Cancelled). Hidden when embedded. */
.notes { max-width: 960px; width: 100%; margin: 34px auto 0; font-size: 12.5px; line-height: 1.5; }
.notes p { margin: 0 0 10px; }
.notes b { color: var(--page-strong); font-weight: 600; }
.notes code { font-size: 11.5px; color: var(--page-strong); }
table.annotations { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.annotations th, table.annotations td {
  text-align: left; vertical-align: top; padding: 7px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--page-text) 18%, transparent);
}
table.annotations thead th {
  font-weight: 700; color: var(--page-text); white-space: nowrap;
  border-bottom: 2px solid color-mix(in srgb, var(--page-text) 34%, transparent);
}
table.annotations td.tag { white-space: nowrap; }
table.annotations td.date { white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .75; }
table.annotations td.desc b { color: var(--page-strong); }
table.annotations td.status { white-space: nowrap; }
.status-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 9px; border-radius: 11px;
}
.status-tag.new { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.status-tag.done { color: var(--running); background: color-mix(in srgb, var(--running) 16%, transparent); }
.status-tag.cancelled { color: var(--page-text); background: rgba(128, 128, 140, 0.22); text-decoration: line-through; }

/* ======================================================================
   Encoder-first screens (2026-09-02 revamp).
   A 3D-printer style UI: one header bar, a list of rows the knob walks
   through with an inverted highlight, a hint line for the three gestures.
   Every shape is drawable with lib/Display primitives: rows are fillRect,
   icons are a few lines or a triangle, chevrons and ticks are drawLine.
   The TFT fonts are ASCII only, so no glyph below is a font character.
   ====================================================================== */

/* header bar: 22 px, title left, machine status right */
.bar {
  height: 22px; flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 0 6px;
  border-bottom: 1px solid var(--border);
  font-size: 15px; line-height: 16px;
}
/* HeaderBar::draw: Font::Body (Roboto Regular 15), uppercased by setTitle() */
.bar .t { font-weight: 400; text-transform: uppercase; white-space: nowrap; }
.bar .s { margin-left: auto; white-space: nowrap; color: var(--text-dim); }
/* statusInk() (src/screens/StatusInk.h): RUNNING/HOMING kRunning, STALL
   kStopped, NOT HOMED/PAUSED kWarning, READY/STOPPED kTextDim. Qualified
   with .s so they out-rank `.bar .s` above. */
.bar .s.ok   { color: var(--running); }
.bar .s.stop { color: var(--stopped); }
.bar .s.warn { color: var(--warning); }

/* hint line: 18 px, Font::Small, one entry per gesture that does something */
.hint {
  height: 18px; flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 6px;
  border-top: 1px solid var(--surface-alt);
  font-size: 11px; line-height: 11px;
  color: var(--text-dim);
}
.hint b { color: var(--text); font-weight: 400; }
.hint .stop { color: var(--stopped); }
.hint .stop b { color: var(--stopped); }
.hint .r { margin-left: auto; }

/* the list */
.menu { flex: 1; display: flex; flex-direction: column; position: relative; min-height: 0; overflow: hidden; }
.menu.scrolls { padding-right: 6px; }
.menu .scroll { position: absolute; right: 1px; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--surface-alt); }
.menu .scroll i { position: absolute; left: 0; width: 100%; border-radius: 2px; background: var(--text-dim); }

.row {
  height: 26px; flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px;
  font-size: 15px; line-height: 16px;
  white-space: nowrap;
}
.row.h21 { height: 21px; }
.row .glyph { width: 16px; height: 16px; flex: none; }
.row .glyph i, .row .chev i, .row .tick i, .row .value i {
  display: block; width: 16px; height: 16px; line-height: 16px;
  text-align: center; font-size: 15px;
}
.row .value i { width: 10px; font-size: 10px; }
.row .label { flex: 1; min-width: 0; overflow: hidden; white-space: pre; }
.row .value { color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* MenuItem::valueInk: a value can carry its own colour (self-test OK in
   kRunning, FAIL in kStopped, "not homed" in kWarning). Must out-rank
   `.row .value` above, so the ink classes are qualified with .value. */
.row .value.ok   { color: var(--running); }
.row .value.stop { color: var(--stopped); }
.row .value.warn { color: var(--warning); }
.row .chev, .row .tick { width: 16px; height: 16px; flex: none; color: var(--text-dim); }
.row .tick { color: var(--running); }
/* ItemKind::Back: icon and label in kTextDim */
.row.dim, .row.dim .label, .row.dim .value { color: var(--text-dim); }

/* the highlight: the one thing the knob moves */
.row.focused { background: var(--accent); color: var(--bg); }
.row.focused .value, .row.focused .chev, .row.focused .tick { color: var(--bg); }
.row.focused.dim, .row.focused.dim .label, .row.focused.dim .value { color: var(--bg); }

/* editing a value: row stays framed in accent, the value itself inverts */
.row.editing { background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--accent); }
.row.editing .value {
  display: flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 5px; border-radius: 2px;
  background: var(--accent); color: var(--bg);
}

/* dialogs: full-screen replacement, not an overlay (no alpha on the panel) */
.dialog {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 4px 12px;
}
.dialog .dtitle { font-size: 24px; line-height: 26px; font-weight: 500; }
.dialog .msg { font-size: 15px; line-height: 16px; color: var(--text); white-space: pre; }
.dialog .msg.dim { color: var(--text-dim); }
.dialog .actions { display: flex; gap: 10px; width: 100%; }
.dialog .actions .button { flex: 1; height: 28px; }

/* the running screen's big number: Font::Huge, digits only */
.readout { display: flex; align-items: baseline; gap: 6px; }
.readout .huge { font-size: 44px; line-height: 48px; font-weight: 700; font-variant-numeric: tabular-nums; }
.readout .unit { font-size: 15px; line-height: 16px; color: var(--text-dim); }
.kv { display: flex; gap: 6px; font-size: 15px; line-height: 16px; white-space: nowrap; }
.kv .k { color: var(--text-dim); width: 60px; flex: none; }
.kv .v { font-variant-numeric: tabular-nums; }

/* axis rows on the homing screen */
.axis { display: flex; align-items: center; gap: 8px; height: 22px; font-size: 15px; }
.axis .name { width: 20px; }
.axis .state { color: var(--text-dim); }
.axis.active .state { color: var(--accent); }
.axis.done .state { color: var(--running); }