:root {
  --col-a: #27374d;
  --col-b: #f1e7cf;
  --bg: #f7f7f9;
  --panel: #ffffff;
  --ink: #1d2430;
  --muted: #6b7585;
  --line: #e2e5ec;
  --accent: #27374d;
  --cur: #e53935;
  --done: #228848;
  --dc: #4a6fa5;
  --sc: #8a93a3;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
/* app-like feel: no text selection / long-press callout anywhere by default… */
html {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* …except where the user actually edits or needs to select text */
input, textarea, [contenteditable] {
  -webkit-user-select: text; -moz-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}
/* ---- range sliders: large, touch-friendly thumbs, themed consistently across
   settings + the creator (native thumbs are far too small for touch). ---- */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 30px; background: transparent; cursor: pointer; vertical-align: middle;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--line); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--line); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -11px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
input[type="range"]:active::-webkit-slider-thumb { background: #1c5fa8; }
input[type="range"]:active::-moz-range-thumb { background: #1c5fa8; }

html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}

/* ---- app bar ---- */
.appbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* pad below the iOS status bar (notch / dynamic island) so it doesn't
     overlap the title in standalone fullscreen; viewport-fit=cover is set */
  padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
           8px calc(14px + env(safe-area-inset-left));
  background: var(--accent);
  color: #fff;
}
/* primary row: title block · primary tabs (left) ···· tools group (right) */
.appbar-main { display: flex; align-items: center; gap: 14px; }
/* fixed-width so the primary menu after it keeps a constant left position
   whatever the subtitle says (pattern name in Creator vs name + progress while
   tracking); the subtitle truncates rather than reflowing the menu */
.appbar-titles { flex: 0 0 auto; width: 210px; min-width: 0; }
/* utility cluster pinned to the right; the creator sub-menu lives in here so it
   never pushes the primary menu when it appears */
.appbar-tools { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
.appbar-titles h1 { margin: 0; font-size: 20px; letter-spacing: 1px; }
.appbar-titles p { margin: 1px 0 0; font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- progress ---- */
/* shown inline in the subtitle, right after the pattern name (no separate bar) */
.progress-text { opacity: .85; }

/* ---- primary tabs (in the app bar, right of the title, left of the gear) ---- */
.tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  flex: 0 0 auto; justify-content: flex-start;
  background: none; border: 0;
}
.tab {
  flex: 0 0 auto; padding: 7px 12px; border: 0; border-radius: 999px;
  background: none; color: rgba(255, 255, 255, .8); font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
/* selected primary tab: filled light pill (see AskUserQuestion decision) */
.tab.active { background: #fff; color: var(--accent); }
/* the Admin icon button lights up the same way when its view is active */
#open-admin.active { background: #fff; color: var(--accent); }

/* ---- layout ---- */
.main { flex: 1; min-height: 0; position: relative; }
.view { position: absolute; inset: 0; overflow: auto; }
.view.hidden { display: none; }

/* ---- chart ---- */
.chart-wrap { position: absolute; inset: 0; background: #fff; }
#chart-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.chart-controls { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.legend {
  position: absolute; left: 12px; top: 48px; background: rgba(255,255,255,.94);
  border: 1px solid var(--line); border-radius: 10px; font-size: 12px; max-width: 240px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); touch-action: none;
}
.legend.dragging, .cell-info.dragging { box-shadow: 0 6px 18px rgba(0,0,0,.22); cursor: grabbing; }
.legend summary { cursor: pointer; padding: 8px 12px; font-weight: 600; list-style: none; }
.legend summary::-webkit-details-marker { display: none; } /* drop the disclosure caret */
.legend summary::marker { content: ""; }
.legend ul { list-style: none; margin: 0; padding: 0 12px 6px; }
.legend li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.legend-tip { margin: 0; padding: 6px 12px 10px; color: var(--muted); }
.lg-x { display: inline-block; width: 16px; text-align: center; color: var(--ink); font-weight: 700; }
.lg-empty { width: 16px; height: 16px; border: 1px solid var(--line); background: #fff; display: inline-block; }
.lg-cur { width: 16px; height: 16px; border: 2px solid var(--cur); display: inline-block; }
.lg-done { width: 16px; height: 16px; background: rgba(34,120,72,.34); display: inline-block; }
.lg-mark { width: 16px; height: 16px; border-left: 3px solid rgba(0,0,0,.5); display: inline-block; }

/* ---- swatch ---- */
.swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); display: inline-block; vertical-align: middle; }
.swatch[data-colour="A"] { background: var(--col-a); }
.swatch[data-colour="B"] { background: var(--col-b); }

/* ---- counter ---- */
.counter { max-width: 560px; margin: 0 auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.cnt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cnt-rowinfo { text-align: center; }
.cnt-rownum { font-size: 18px; }
.cnt-rownum b { font-size: 22px; }
.cnt-rownum span { color: var(--muted); font-size: 13px; }
.cnt-colour { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; justify-content: center; }

.cnt-segments { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chip {
  font-size: 13px; padding: 5px 9px; border-radius: 14px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer; transition: all .1s;
}
.chip[data-kind="DC"] { border-color: var(--dc); color: var(--dc); }
.chip[data-kind="BS"] { background: #f0f1f4; color: var(--muted); }
.chip.done { opacity: .42; }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.06); box-shadow: 0 2px 6px rgba(0,0,0,.2); }

.cnt-next { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; }
.cnt-next.done { background: #eafaf0; border-color: #b9e6c9; }
.cnt-next-label { font-size: 11px; letter-spacing: 2px; color: var(--muted); }
.cnt-next-stitch { font-size: 52px; font-weight: 800; line-height: 1.05; }
.cnt-next-stitch[data-kind="DC"] { color: var(--dc); }
.cnt-next-stitch[data-kind="SC"] { color: var(--ink); }
.cnt-next-stitch[data-kind="BS"] { color: var(--muted); }
.cnt-next-desc { font-size: 14px; color: var(--ink); margin-top: 2px; }
.cnt-next-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }

.tapbtn {
  border: 0; border-radius: 16px; padding: 26px; font-size: 20px; font-weight: 800; letter-spacing: 1px;
  color: #fff; background: var(--accent); cursor: pointer; user-select: none;
  box-shadow: 0 4px 0 rgba(0,0,0,.18); -webkit-tap-highlight-color: transparent;
}
.tapbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }

.cnt-controls { display: flex; gap: 8px; }
.cnt-controls .btn { flex: 1; }

/* ---- buttons ---- */
.btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px;
  padding: 11px 12px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn:active { background: #eef0f4; }
.btn.ghost { border-color: transparent; background: rgba(255,255,255,.15); color: inherit; }
.btn.icon { font-size: 18px; padding: 8px 12px; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.danger { color: #c62828; border-color: #f0c4c4; background: #fdf3f3; }
.btn.round {
  width: 44px; height: 44px; border-radius: 50%; padding: 0; font-size: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15); background: #fff;
}
/* undo shares the round-button shape but takes the accent colour so it reads as
   an action, not a zoom control; hidden when there's nothing to revert */
.btn.round.undo-round { background: var(--cur); color: #fff; border-color: var(--cur); font-size: 22px; }
.btn.round.undo-round[hidden] { display: none; }

/* ---- row list ---- */
.rl { margin: 0 auto; }
.rl-row { display: flex; align-items: stretch; gap: 8px; padding: 4px 12px; border-bottom: 1px solid var(--line); }
.rl-row.current { background: #fff6f5; box-shadow: inset 3px 0 0 var(--cur); }
.rl-row.done .rl-txt { color: var(--muted); }
/* cross out individual stitch tokens (never the commas/periods between them) */
.rl-seg { cursor: pointer; border-radius: 3px; }
.rl-seg:hover { background: rgba(0,0,0,0.06); }
.rl-seg.struck { text-decoration: line-through; color: var(--muted); }
/* the upcoming stitch — bold + red, matching the chart's current-stitch outline */
.rl-seg.next { font-weight: 800; color: var(--cur); }
.rl-seg.next.struck { color: var(--cur); text-decoration: none; }
.rl-cb { width: 22px; height: 22px; align-self: center; flex: 0 0 auto; }
.rl-tap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; padding: 8px 0; }
.rl-num { width: 34px; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.rl-txt { font-size: 13px; font-family: ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; }
.rl-grp { white-space: nowrap; }

/* floating undo — pinned to the bottom of the Rows view, above the tab bar.
   Lets a stray tap (which loses your place) be reverted; the time tells you
   whether the change it would undo was just now or a while ago. */
.undo-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 13px; border: none; border-radius: 24px;
  background: var(--cur); color: #fff; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  font: inherit; -webkit-tap-highlight-color: transparent;
}
.undo-btn[hidden] { display: none; }
.undo-btn:active { transform: translateY(1px); }
.undo-btn .undo-ic { font-size: 20px; line-height: 1; }
.undo-btn .undo-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.undo-btn .undo-lbl { font-weight: 700; font-size: 15px; }
.undo-btn .undo-ago { font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; }
.undo-btn .undo-ago:empty { display: none; }

/* ---- settings dialog ---- */
/* header / scrollable body / footer frame: rounded corners stay clean even if
   the body ever scrolls (the scrollbar lives inside, not over the corner). */
.settings {
  border: 0; border-radius: 16px; padding: 0; width: min(760px, 92vw); max-height: 90vh;
  box-shadow: 0 10px 40px rgba(0,0,0,.3); overflow: hidden; background: var(--bg);
}
/* only lay out (and thus show) when the dialog is open — otherwise an author
   `display` would override the UA `dialog:not([open]) { display:none }` and the
   panel would render on page load without showModal(). */
.settings[open] { display: flex; flex-direction: column; }
.settings::backdrop { background: rgba(0,0,0,.45); }
.settings h2 { margin: 0; padding: 18px 22px 8px; font-size: 20px; flex: 0 0 auto; }
.set-grid {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 6px 22px 16px;
  align-content: start;
}
@media (max-width: 380px) { .set-grid { grid-template-columns: 1fr; } }
.set-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); }
.set-card h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 15px; white-space: nowrap; }
.set-row input[type="color"] { width: 48px; height: 32px; border: 1px solid var(--line); border-radius: 6px; background: none; }
.set-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.settings .btn { width: 100%; margin-top: 8px; }
.set-card select { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.set-footer {
  flex: 0 0 auto; padding: 12px 22px; border-top: 1px solid var(--line);
  text-align: right; background: var(--panel);
}
.set-footer .btn { width: auto; margin: 0; min-width: 120px; }

/* marker-lines stepper (iOS-friendly: slider + −/+ buttons, no number field) */
.set-stepper { display: flex; align-items: center; gap: 8px; }
.set-stepper input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.set-stepper .btn { width: 40px; flex: 0 0 auto; margin: 0; padding: 6px 0; font-size: 18px; font-weight: 700; }
.set-val { min-width: 30px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- legend abbreviations ---- */
.lg-abbr {
  display: inline-block; min-width: 26px; text-align: center; font-size: 11px;
  padding: 1px 4px; border-radius: 4px; background: #eef0f4; color: var(--ink);
  font-family: ui-monospace, Menlo, monospace; flex: 0 0 auto;
}

/* ---- patterns library ---- */
.pl { max-width: 760px; margin: 0 auto; padding: 16px; }
.pl-note {
  font-size: 12px; color: #8a5a00; background: #fff8e6; border: 1px solid #f0e0b0;
  border-radius: 8px; padding: 8px 10px; margin-bottom: 12px;
}
.pl-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pl-status { font-size: 12px; color: var(--muted); }
.pl-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 24px; }
.pl-list { display: flex; flex-direction: column; gap: 12px; }
.pl-card {
  display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; overflow: hidden;
}
.pl-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pl-cover { width: 96px; height: 96px; object-fit: cover; flex: 0 0 auto; background: #eef0f4; }
.pl-body { padding: 10px 12px; flex: 1; min-width: 0; }
.pl-name { font-weight: 700; font-size: 15px; }
.pl-badge {
  font-size: 10px; font-weight: 700; color: #fff; background: var(--accent);
  border-radius: 999px; padding: 1px 7px; vertical-align: middle;
}
.pl-meta { font-size: 12px; color: var(--muted); margin: 2px 0 9px; }
.pl-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-acts .btn { padding: 6px 10px; font-size: 12px; }

/* ---- creator view (placeholder) ---- */
.cv {
  max-width: 460px; margin: 0 auto; padding: 48px 24px; text-align: center; color: var(--ink);
}
.cv-badge {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent);
  background: #eef0f4; border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px;
}
.cv h2 { margin: 18px 0 8px; font-size: 22px; }
.cv p { margin: 8px 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.cv .cv-soon { margin-top: 16px; font-weight: 700; color: var(--ink); }

/* ---- creator workspace ---- */
/* whole app bar tints blue while authoring; the tracker keeps its normal accent */
body.creator-mode .appbar { background: #1c5fa8; }

/* 2nd-level nav (creator sub-tabs): inline on the right of the primary row,
   revealed only while authoring, set off from the primary tabs by a divider */
.appbar-sub { display: none; }
body.creator-mode .appbar-sub {
  display: flex; flex: 0 1 auto;
  padding-right: 12px; border-right: 1px solid rgba(255, 255, 255, .28);
}
.cr-tabs { display: flex; flex-wrap: wrap; gap: 4px; background: none; border: 0; flex: 0 1 auto; }
.cr-tab {
  flex: 0 0 auto; padding: 5px 10px; border: 0; border-radius: 999px;
  background: none; color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.cr-tab.active { background: rgba(255, 255, 255, .92); color: #1c5fa8; }

#view-creator { overflow: hidden; } /* the workspace manages its own scroll */
.cr { display: flex; flex-direction: column; height: 100%; }
.cr-panels { flex: 1; min-height: 0; position: relative; }
.cr-panel { position: absolute; inset: 0; overflow: auto; padding: 14px; }
.cr-panel.hidden { display: none; }
.cr-lead { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.cr-note { margin: 0 0 10px; font-size: 13px; color: var(--done); font-weight: 600; }
.cr-note.warn { color: #b26a00; }

/* Design: toolbar + full-bleed canvas */
/* Design: tool panel on the left (stacked rows), canvas on the right.
   overflow:hidden pins the row so it can't be dragged sideways — the tool panel
   scrolls vertically on its own, the canvas fills the rest. */
.cr-panel[data-cr="design"] { display: flex; flex-direction: row; padding: 0; overflow: hidden; }
.cr-panel[data-cr="design"].hidden { display: none; }
.cr-toolbar {
  display: flex; flex-direction: column; gap: 14px; align-items: stretch; padding: 12px 15px;
  border-right: 1px solid var(--line); background: var(--panel);
  flex: 0 0 auto; width: 244px;
  /* explicit overflow-x:hidden — with only overflow-y set, the x axis computes to
     'auto' and the panel becomes draggable sideways */
  overflow-x: hidden; overflow-y: auto;
}
.cr-toolbar .btn { margin: 0; }
.cr-toolbar .btn.active { background: #1c5fa8; border-color: #1c5fa8; color: #fff; }
.cr-toolbar > .btn.primary { width: 100%; }
.cr-tool-status { margin: 0; font-size: 12px; color: var(--muted); min-height: 14px; }
.cr-tool-row { display: flex; flex-direction: column; gap: 6px; }
.cr-tool-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cr-tool-grp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cr-region-grp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cr-bsize { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.cr-bsize-l { font-size: 15px; color: var(--muted); line-height: 1; }
.cr-bsize input[type="range"] { flex: 1; min-width: 60px; }
.cr-bsize-v { min-width: 1.4em; text-align: right; font-size: 13px; font-weight: 600; color: var(--muted); }
.cr-canvas-wrap { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; background: var(--bg); }
.cr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.cr-brush {
  width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--line);
  font-weight: 800; cursor: pointer; line-height: 1;
}
.cr-brush.active { border-color: var(--cur); box-shadow: 0 0 0 2px rgba(229,57,53,.25); }

/* Config: two columns — settings + source image (left), save/export (right) */
.cr-config-cols { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.cr-config-left { flex: 1 1 400px; min-width: 300px; }
.cr-config-right { flex: 1 1 300px; min-width: 280px; }
.cr-config-left .cr-form { max-width: none; }
.cr-config-left .cr-conv-h { margin-top: 22px; }
.cr-config-right .cr-conv-h { margin-top: 0; }
/* save/export actions, each unpacked as a card with a description */
.cr-actions { display: flex; flex-direction: column; gap: 12px; }
.cr-action { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); }
.cr-action .btn { margin: 0 0 8px; width: 100%; }
.cr-action-desc { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* Config form */
.cr-form { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.cr-field { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.cr-flabel { font-size: 14px; font-weight: 600; flex: 0 0 auto; }
.cr-in {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
  min-width: 160px; background: var(--panel); color: var(--ink);
}
/* name / designer: let the text field grow to fill the row for longer names */
.cr-in[type="text"] { flex: 1 1 auto; min-width: 220px; }
.cr-in[type="color"] { padding: 2px; height: 36px; min-width: 56px; flex: 0 0 auto; }

/* Script preview */
.cr-script { display: flex; flex-direction: column; }
.cr-script-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cr-script-row .rl-num { min-width: 34px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cr-script-row .rl-txt { flex: 1; line-height: 1.5; }

/* Estimate */
.cr-est { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cr-est-card { flex: 1; min-width: 160px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--panel); }
.cr-est-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cr-est-line { font-size: 20px; font-weight: 800; }
.cr-est-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cr-est-total { margin-top: 12px; font-size: 16px; font-weight: 700; }

/* Export bar */
.cr-export { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--panel); flex: 0 0 auto; flex-wrap: wrap; }
.cr-export .btn { margin: 0; }
.cr-status { font-size: 12px; color: var(--muted); }

/* Images: source library + conversion */
.cr-img-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cr-img-bar .btn { margin: 0; }
.cr-img-lib { display: flex; flex-direction: column; gap: 8px; }
.cr-img-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--panel); }
.cr-img-card.active { border-color: #1c5fa8; box-shadow: 0 0 0 2px rgba(28,95,168,.18); }
.cr-img-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); flex: 0 0 auto; }
.cr-img-meta { flex: 1; min-width: 0; }
.cr-img-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-img-dim { font-size: 12px; color: var(--muted); }
.cr-img-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.cr-img-acts .btn { margin: 0; padding: 6px 10px; font-size: 12px; }
.cr-convert.hidden { display: none; }
.cr-conv-h { margin: 0 0 10px; font-size: 16px; }
/* Adjust-tab empty state (no source image) */
.cr-adjust-empty { max-width: 460px; }
.cr-adjust-empty.hidden { display: none; }
.cr-adjust-lead { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
/* the backing store is sized to the grid's aspect (see recompute), so it fills
   the full right-column width with no internal letterbox */
.cr-preview { display: block; width: 100%; height: auto; background: var(--bg); image-rendering: pixelated; }
/* tall patterns: a fixed-height, vertically-scrollable window over the preview */
.cr-preview-scroll {
  max-height: 64vh; overflow-y: auto; overflow-x: hidden;
  margin: 0 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
/* the primary commit action, full-width under the preview */
.cr-conv-right > .btn.primary { width: 100%; margin-top: 4px; }
/* two-column convert layout: controls left, live preview right */
.cr-conv-cols { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.cr-conv-left { flex: 1 1 260px; min-width: 240px; }
/* the preview column grows to take the remaining width on the right */
.cr-conv-right { flex: 1 1 380px; min-width: 300px; position: sticky; top: 8px; }
.cr-conv-left .cr-form { max-width: none; }
.cr-convert input[type="range"] { flex: 1; min-width: 120px; }
.cr-sval { font-size: 12px; color: var(--muted); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.cr-hint { margin: -4px 0 6px; font-size: 12px; color: var(--muted); line-height: 1.4; }

/* dimension control: range slider + number box */
.cr-range { flex: 1; min-width: 110px; }
.cr-num { width: 64px; min-width: 0; padding: 6px 8px; flex: 0 0 auto; }

/* composable CV layers */
.cr-sec { border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; overflow: hidden; }
.cr-sec-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #eef2f7; font-weight: 600; cursor: pointer; }
.cr-sec-title { font-size: 14px; }
.cr-sec-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
/* a disabled layer is dimmed but still adjustable — touching a control inside
   re-enables the layer (see ui.ts), so the sliders are never "dead" */
.cr-sec-body.off { opacity: .6; }

/* Design tab: compare-with-original slider in the toolbar */
.cr-compare { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.cr-compare-l { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cr-compare input[type="range"] { flex: 1; min-width: 60px; }
/* keep the big slider thumbs clear of the panel's clipped edges */
.cr-toolbar .cr-bsize, .cr-toolbar .cr-compare { padding: 0 14px; }
.cr-toolbar .cr-tool-grp { min-width: 0; }

/* ---- progress view ---- */
.pv { max-width: 560px; margin: 0 auto; padding: 16px; }
.pv-stats { text-align: center; }
.pv-pct { font-size: 46px; font-weight: 800; color: var(--accent); line-height: 1; }
.pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pv-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 6px; }
.pv-stat-v { font-weight: 700; font-size: 15px; }
.pv-stat-l { font-size: 11px; color: var(--muted); margin-top: 2px; }

.pv-board { display: flex; gap: 12px; height: 48vh; margin-top: 18px; }
.pv-axis { display: flex; flex-direction: column-reverse; width: 84px; }
.pv-band { display: flex; align-items: center; justify-content: flex-end; border-top: 1px solid var(--line); padding-right: 6px; }
.pv-band:first-child { border-top: 0; }
.pv-band-label { font-size: 11px; color: var(--muted); }
.pv-track { position: relative; flex: 1; background: var(--line); border-radius: 10px; }
.pv-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(0deg, var(--done), #4ec27e); border-radius: 10px;
  transition: height .2s ease;
}
.pv-marker { position: absolute; left: -3px; right: -3px; height: 0; border-top: 2px dashed var(--cur); transition: bottom .2s ease; }
.pv-marker::after {
  content: attr(data-label); position: absolute; right: 2px; top: -17px;
  font-size: 11px; font-weight: 700; color: var(--cur); background: rgba(255,255,255,.9);
  padding: 0 5px; border-radius: 4px;
}
.pv-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 14px; }

/* ---- version badge in header ---- */
.appbar-titles h1 { display: flex; align-items: baseline; gap: 7px; }
.version { font-size: 11px; font-weight: 600; opacity: .65; letter-spacing: 0; }
.version.update-ready { opacity: 1; color: #ffd166; font-weight: 700; cursor: help; }

/* ---- selected-cell info overlay ---- */
.cell-info {
  position: absolute; top: 92px; left: 12px; width: 184px;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 10px; font-size: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1); pointer-events: auto; touch-action: none;
}
.cell-info { cursor: pointer; } /* whole panel taps to toggle the progress stats */
.cell-info .ci-head { display: flex; align-items: center; gap: 6px; }
.cell-info .ci-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.cell-info .ci-l { color: var(--muted); }
.cell-info b { font-variant-numeric: tabular-nums; font-weight: 700; }
.cell-info .ci-type[data-kind="DC"] { color: var(--dc); }
.cell-info .ci-type[data-kind="BS"] { color: var(--muted); }

/* ---- progress stats (collapsible, inside cell-info) ---- */
.ci-stats { margin-top: 8px; }
.ci-stats.hidden { display: none; }
.ci-stats .cs-pct {
  font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1;
  text-align: center; font-variant-numeric: tabular-nums;
}
.ci-stats .cs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px;
}
.ci-stats .cs-stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 4px; text-align: center;
}
.ci-stats .cs-v { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.ci-stats .cs-l { font-size: 9px; color: var(--muted); margin-top: 1px; }
.ci-stats .cs-cheer {
  margin-top: 8px; text-align: center; font-size: 11px; font-weight: 700;
  color: var(--done); background: #eef7f0; border: 1px solid #cfe6d6;
  border-radius: 7px; padding: 5px 6px;
}

/* ---- current-row overlay (wide, collapsible) ---- */
.row-overlay {
  position: absolute; top: 156px; left: 12px; max-width: 95%;
  display: flex; align-items: stretch; gap: 6px;
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 10px; font-size: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1); pointer-events: auto; touch-action: none;
}
/* row label sits in a left bar next to the grip (not stacked above the stitches),
   so the strip stays short; tapping it toggles collapse */
.row-overlay .ro-head {
  flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; padding: 0 10px;
  cursor: pointer; border-radius: 5px; background: rgba(0,0,0,.05);
}
/* visible left grip — a one-finger drag handle running the full panel height */
.row-overlay .ro-grip {
  flex: 0 0 auto; align-self: stretch; width: 18px; min-height: 22px; cursor: grab;
  border-radius: 5px; background: rgba(0,0,0,.05); touch-action: none;
  background-image: radial-gradient(circle, var(--muted) 1.5px, transparent 1.7px);
  background-size: 6px 6px; background-position: center;
}
.row-overlay.dragging .ro-grip { cursor: grabbing; }
.row-overlay .ro-label { font-weight: 700; white-space: nowrap; }
.row-overlay .ro-body {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding-bottom: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 24px;
  touch-action: pan-x;                 /* allow swipe-scroll (panel itself is touch-action:none) */
  overscroll-behavior-x: contain;
  scrollbar-width: auto;               /* Firefox: normal-width bar with a visible thumb */
  scrollbar-color: rgba(0,0,0,.5) rgba(0,0,0,.08);
}
/* a thick, easy-to-grab horizontal scrollbar handle (Chrome/Safari/Android) */
.row-overlay .ro-body::-webkit-scrollbar { height: 24px; }
.row-overlay .ro-body::-webkit-scrollbar-track { background: rgba(0,0,0,.07); border-radius: 11px; }
.row-overlay .ro-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.45); border-radius: 11px; min-width: 72px;
  border: 4px solid transparent; background-clip: padding-box;
}
.row-overlay .ro-body::-webkit-scrollbar-thumb:active,
.row-overlay .ro-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.65); }
.row-overlay.collapsed .ro-body { display: none; }

/* ---- account gate (login / pending / blocked) ---- */
/* when gated, hide the whole app chrome so only the gate shows */
body.gated > .appbar,
body.gated > .main { display: none; }

.gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--accent); color: var(--ink);
  overflow: auto;
}
.gate[hidden] { display: none; }
.gate-card {
  width: 100%; max-width: 360px; background: var(--panel);
  border-radius: 16px; padding: 24px; box-shadow: 0 14px 40px rgba(0,0,0,.3);
}
.gate-logo { display: block; width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 16px; }
.gate-title { margin: 0 0 14px; font-size: 22px; letter-spacing: .5px; color: var(--accent); }
.gate-body { display: flex; flex-direction: column; }
.gate-msg { margin: 0 0 14px; line-height: 1.45; color: var(--ink); }
.gate-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.gate-err { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px;
  background: #fdf3f3; color: #c62828; border: 1px solid #f0c4c4; }
.gate-form { display: flex; flex-direction: column; }
.gate-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.gate-field input {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 16px; color: var(--ink); background: #fff;
}
.gate-form .btn { width: 100%; margin-top: 4px; }
.gate-actions { display: flex; gap: 8px; margin-top: 6px; }
.gate-actions .btn { flex: 1; }
.gate-link {
  margin-top: 12px; background: none; border: 0; color: var(--accent);
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline;
}

/* ---- admin (user approval + roles) ---- */
.adm { padding: 14px; max-width: 640px; margin: 0 auto; }
.adm-intro { margin: 0 0 16px; }
.adm-title { margin: 0 0 6px; font-size: 18px; }
.adm-intro p { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.adm-legend { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.adm-legend b { color: var(--ink, inherit); text-transform: capitalize; }
.adm-addbar { margin: 0 0 16px; }
.adm-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-in {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font-size: 13px; min-width: 140px; flex: 1 1 140px;
}
.adm-formmsg { color: #b00; font-size: 12px; flex-basis: 100%; }
.adm-status { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.adm-list { display: flex; flex-direction: column; gap: 10px; }
.adm-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  background: var(--panel); display: flex; flex-direction: column; gap: 10px;
}
.adm-card.pending { border-color: #e0b04a; background: #fffaf0; }
.adm-head { display: flex; align-items: center; gap: 10px; }
.adm-name { font-weight: 600; }
.adm-pill { font-size: 11px; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .5px; }
.adm-pill.approved { background: rgba(34,120,72,.14); color: var(--done); }
.adm-pill.pending { background: rgba(224,176,74,.2); color: #a06a00; }
.adm-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-acts .btn { padding: 6px 10px; font-size: 12px; }
.adm-role { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13px; }