/* QuickFlip — compact white + grey instrument panel ---------------------- */

:root {
  --bg: #e9ebee;
  --panel: #ffffff;
  --panel-soft: #f4f5f7;
  --line: #dfe2e6;
  --line-strong: #c8cdd4;
  --text: #1e2226;
  --muted: #767c84;
  --ink: #262a30;
  --danger: #b8403a;
  --radius: 4px;
  --tap: 28px;
  --frame-button-width: 60px;
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  background: var(--bg);
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;

  /* Which layer you are drawing on, as one colour. main.js sets data-layer, and
     everything that marks the working layer reads this: the ring around the
     paper, the brush cursor, the current frame in the strip, and the little
     stack on the layer button. */
  --layer-accent: var(--ink);
  --layer-accent-soft: rgba(30, 34, 38, 0.55);
}
body[data-layer="bottom"] {
  --layer-accent: #2f6fe0;
  --layer-accent-soft: rgba(47, 111, 224, 0.6);
}

button, input, select, output { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 1px;
}

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.icon { line-height: 1; font-size: 14px; }
.label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Header ---------------------------------------------------------------- */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: none;
  height: 36px;
  padding: 0 8px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-strong);
}

.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.brand h1 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-orientation="portrait"] { --frame-button-width: 34px; }
.brand h1 a { color: inherit; text-decoration: none; }
.brand p {
  margin: 0;
  color: var(--muted);
  font-family: var(--font);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-text::before {
  content: "";
  align-self: stretch;
  width: 1px;
  margin: 2px 0;
  background: var(--line);
  order: 1;
}
.brand p { order: 2; }
.brand h1 { order: 0; }

.actions { position: relative; display: flex; align-items: center; gap: 4px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--tap);
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  white-space: nowrap;
}
.button:hover:not(:disabled) { background: var(--panel-soft); }
.button:active:not(:disabled) { background: var(--line); }
.button:disabled { opacity: 0.45; cursor: default; }
.button-primary { color: #fff; background: var(--ink); border-color: var(--ink); }
.button-primary:hover:not(:disabled) { background: #343941; }
.button-danger { color: var(--danger); border-color: #ddc4c2; background: var(--panel); }
.button-danger:hover:not(:disabled) { background: #faf0ef; }

/* Export / import menu, hung under the Export button ---------------------- */

.menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 35;
  width: 220px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(30, 34, 38, 0.16);
}
.menu[hidden] { display: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 7px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  text-align: left;
}
.menu-item:hover:not(:disabled) { background: var(--panel-soft); }
.menu-item:disabled { opacity: 0.45; cursor: default; }
.menu-item .icon { flex: none; width: 14px; text-align: center; }
.menu-text {
  display: grid;
  gap: 1px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.menu-text small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}
.menu-rule { height: 0; margin: 4px 2px; border: 0; border-top: 1px solid var(--line); }

/* Stage ----------------------------------------------------------------- */

.stage {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: auto;
  padding: 10px;
  overscroll-behavior: contain;
}

/* .paper is sized in main.js to the largest 4:3 box that fits the stage. */
.paper {
  position: relative;
  display: flex;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line-strong);
  flex: 0 0 auto;
  margin: auto;
}

.zoom-controls {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: -106px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 12px rgba(30, 34, 38, 0.1);
}
.zoom-controls button,
.zoom-controls output { display: grid; place-items: center; height: 26px; border: 0; background: transparent; }
.zoom-controls button { width: 28px; cursor: pointer; }
.zoom-controls button:hover { background: var(--panel-soft); }
.zoom-controls output { width: 48px; border-inline: 1px solid var(--line); color: var(--muted); font-size: 9px; }

/* Working underneath: a soft ring around the sheet, wide enough to catch the
   corner of your eye while drawing without moving the paper edge. */
body[data-layer="bottom"] .paper {
  box-shadow: 0 0 0 1px var(--layer-accent), 0 0 0 5px rgba(47, 111, 224, 0.22);
}

#board {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.frame-label,
.watermark {
  position: absolute;
  color: rgba(30, 34, 38, 0.3);
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.08em;
  pointer-events: none;
  user-select: none;
}
.frame-label { left: 6px; bottom: 5px; }

/* Two tiny marks: black bottom-right for light art, white top-left so it
   still reads once something dark is drawn under it. */
.watermark { font-size: 8px; letter-spacing: 0.04em; }
.watermark-bottom { right: 6px; bottom: 5px; color: rgba(0, 0, 0, 0.65); }
.watermark-top { left: 6px; top: 5px; color: rgba(255, 255, 255, 0.95); }
.paper.no-watermark .watermark { display: none; }

.brush-cursor {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--layer-accent-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Filmstrip ------------------------------------------------------------- */

.filmstrip {
  position: relative;
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 5px 8px;
  background: var(--panel);
  border-top: 1px solid var(--line-strong);
}

/* One grid for the whole timeline: [layer button] [open/close] [frame strip].
   Both rows share the first two tracks, which is what keeps Top and Bottom the
   same width no matter what they say, and lets the toggle sit in a single cell
   spanning both of them. The rows stay as elements — main.js and the per-row
   accent rules need them — but hand their children straight to this grid. */
.timeline-stack {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 84px 40px minmax(0, 1fr);
  grid-template-rows: var(--timeline-row);   /* one row until the second opens */
  column-gap: 4px;
  row-gap: 3px;

  /* A frame button (45px) plus the strip's gutter for its scrollbar (3px). Rows
     are pinned to it rather than left to content so the toggle, which spans
     them, ends up exactly as tall as the two layer buttons it sits beside. */
  --timeline-row: 48px;
}
.filmstrip[data-mode="double"] .timeline-stack { grid-template-rows: var(--timeline-row) var(--timeline-row); }
.timeline-row { display: contents; }

.timeline-label { grid-column: 1; min-width: 0; display: flex; align-items: center; }
.timeline-row-active .timeline-label { grid-row: 1; }
.timeline-row-secondary .timeline-label { grid-row: 2; }
.timeline-row-active .strip { grid-column: 3; grid-row: 1; }
.timeline-row-secondary .strip { grid-column: 3; grid-row: 2; }

.timeline-layer-button,
.timeline-layer-static { width: 100%; height: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); cursor: pointer; }
.timeline-layer-button { min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 7px; padding: 0 7px; }
.timeline-layer-button:hover,
.timeline-layer-static:hover { background: var(--panel-soft); }
.timeline-layer-button[aria-pressed="true"],
.timeline-layer-static[aria-pressed="true"] { border-color: var(--layer-accent); box-shadow: inset 2px 0 0 var(--layer-accent); background: var(--panel-soft); }
.timeline-toggle { grid-column: 2; grid-row: 1 / -1; align-self: stretch; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); color: var(--muted); font-size: 9px; text-transform: uppercase; cursor: pointer; }
.timeline-toggle:hover { color: var(--text); background: var(--panel-soft); }
.timeline-row-secondary { display: none; }
.filmstrip[data-mode="double"] .timeline-row-secondary { display: contents; }
.timeline-layer-static { justify-content: flex-start; padding: 0 8px; gap: 7px; text-align: left; }
.layer-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: #2f6fe0; }
.timeline-row-secondary .strip { opacity: 0.82; }
.timeline-row-secondary[data-layer="bottom"] .frame-button.active { border-color: #2f6fe0; box-shadow: inset 0 0 0 2px #2f6fe0; }
/* In the open two-row timeline, each row keeps its own identity even while the
   global working-layer accent turns blue. Top stays black; Bottom stays blue. */
.filmstrip[data-mode="double"] .timeline-row-active .frame-button.active {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.filmstrip[data-mode="double"] #layer-button .layer-chip[data-active="1"] i:first-child {
  border-color: var(--ink);
  background: var(--ink);
}

.strip {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}
.strip-spacer { flex: 0 0 auto; height: 1px; pointer-events: none; }
.frame-drop-indicator {
  position: absolute;
  top: 0;
  bottom: 3px;
  z-index: 5;
  width: 3px;
  border-radius: 2px;
  background: var(--ink);
  pointer-events: none;
}
.strip::-webkit-scrollbar { height: 4px; }
.strip::-webkit-scrollbar-thumb { background: var(--line-strong); }

.frame-button,
.frame-add {
  position: relative;
  flex: 0 0 auto;
  width: var(--frame-button-width);
  height: 45px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.frame-button canvas { width: 100%; height: 100%; display: block; }
.frame-button span {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 2px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.85);
  font-family: var(--font);
  font-size: 9px;
}
.frame-button {
  cursor: grab;
  user-select: none;
  -webkit-touch-callout: none;
}
.frame-button.selected { border-color: #69727d; box-shadow: inset 0 0 0 1px #69727d; }
.frame-button.selected span { color: var(--text); }
/* The current frame carries the working layer's colour: black on the top layer,
   blue on the bottom one. */
.frame-button.active {
  border-color: var(--layer-accent);
  box-shadow: inset 0 0 0 2px var(--layer-accent);
}
.frame-button.active span { color: var(--text); background: rgba(255, 255, 255, 0.88); }
.frame-button.playing { border-color: #3f8f79; box-shadow: inset 0 0 0 1px #3f8f79; }
.frame-button.dragging {
  z-index: 1;
  cursor: grabbing;
  border-color: var(--ink);
  box-shadow: 0 3px 10px rgba(30, 34, 38, 0.28), inset 0 0 0 1px var(--ink);
  opacity: 0.9;
}

.frame-add {
  display: grid;
  place-items: center;
  border-style: dashed;
  color: var(--muted);
  background: var(--panel-soft);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1;
}
.frame-add:hover:not(:disabled) { color: var(--text); border-color: var(--ink); background: #fff; }
.frame-add:disabled { opacity: 0.4; cursor: default; }

#board.loading { cursor: progress; }

.debug-panel {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 1000;
  width: min(390px, calc(100vw - 16px));
  padding: 10px;
  border: 1px solid #555;
  border-radius: 6px;
  color: #e9edf1;
  background: rgba(22, 25, 29, 0.94);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.debug-panel pre { margin: 6px 0; white-space: pre-wrap; }
.debug-panel button { margin-right: 4px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--tap);
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover:not(:disabled) { background: var(--panel-soft); }
.chip:disabled { opacity: 0.4; cursor: default; }
.chip-danger:hover:not(:disabled) { color: var(--danger); border-color: #ddc4c2; background: #faf0ef; }

/* Toolbar --------------------------------------------------------------- */

.toolbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.tool-group { display: flex; align-items: center; gap: 4px; }
.tool-group-main { gap: 0; }

.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--tap);
  height: var(--tap);
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
}
.tool:hover:not(:disabled) { background: var(--panel-soft); }
.tool:active:not(:disabled) { background: var(--line); }
.tool:disabled { opacity: 0.35; cursor: default; }
.tool-danger:hover:not(:disabled) { color: var(--danger); border-color: #ddc4c2; background: #faf0ef; }
.tool[aria-pressed="true"] { color: #fff; background: var(--ink); border-color: var(--ink); }

.tool-wide {
  min-width: 96px;
  border-radius: var(--radius) 0 0 var(--radius);
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}
.tool-wide:hover { background: #343941; }
.tool-swatch {
  min-width: 40px;
  padding: 0 6px;
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}
.tool-swatch:hover { background: #343941; }
.tool-swatch .chevron { font-size: 8px; opacity: 0.75; }
#select-button { margin-left: 6px; }

/* While the select tool is active the paint pair steps back to plain grey. */
.tool-group-main.inactive .tool-wide,
.tool-group-main.inactive .tool-swatch {
  color: var(--text);
  background: var(--panel);
  border-color: var(--line-strong);
}
.tool-group-main.inactive .tool-wide:hover,
.tool-group-main.inactive .tool-swatch:hover { background: var(--panel-soft); }
.tool-group-main.inactive .swatch-preview { box-shadow: 0 0 0 1px rgba(30, 34, 38, 0.3); }

.swatch-preview {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background: #1f1f1f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}
.swatch-preview.eraser {
  background:
    linear-gradient(45deg, transparent 44%, #b6bcc4 44%, #b6bcc4 56%, transparent 56%),
    #fff;
}
/* The crosshatch chip shows what the brush actually lays down: lines in the
   working colour with the paper showing between them. The colour arrives as the
   element's `color`, so both gradients can pick it up as currentColor. */
.swatch-preview.hatch {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(45deg, currentColor 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(-45deg, currentColor 0 1.5px, transparent 1.5px 5px);
}

/* A little picture of the stack: two bars, the working one filled in and in the
   layer's colour. The icon carries the state on its own, because the text label
   next to it is hidden on narrow screens. */
.layer-chip { display: grid; gap: 2px; width: 13px; }
.layer-chip i {
  display: block;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 1px;
  opacity: 0.35;
}
.layer-chip[data-active="1"] i:first-child,
.layer-chip[data-active="0"] i:last-child {
  border-color: var(--layer-accent);
  background: var(--layer-accent);
  opacity: 1;
}
body[data-layer="bottom"] .filmstrip[data-mode="single"] #layer-button { border-color: var(--layer-accent); }

/* Page navigation ------------------------------------------------------- */

.page-navigation {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 3px 8px 4px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.page-navigation a,
.page-navigation span {
  color: var(--muted);
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.page-navigation > span { margin-left: auto; }
.page-navigation a:hover { color: var(--text); text-decoration: underline; }

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

.sheet {
  position: fixed;
  right: 8px;
  bottom: 62px;
  z-index: 30;
  width: min(292px, calc(100vw - 16px));
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(30, 34, 38, 0.16);
}
.tool-edge-trigger { display: none; }
@media (min-width: 761px) {
  .sheet { top: 50%; right: 8px; bottom: auto; width: min(214px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; transform: translateY(-50%); }
  .tool-edge-trigger { position: fixed; top: 18%; right: 0; bottom: 18%; z-index: 29; display: block; width: 12px; }
  .tool-edge-trigger::after { content: ""; position: absolute; top: 42%; right: 0; width: 3px; height: 16%; min-height: 34px; border-radius: 3px 0 0 3px; background: var(--line-strong); opacity: .45; transition: opacity .12s, width .12s; }
  .tool-edge-trigger:hover::after { width: 5px; opacity: .9; }
  .sheet .colors { grid-template-columns: repeat(6, 1fr); }
}
.sheet[hidden] { display: none; }
.sheet-handle { display: none; }

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.segment {
  height: 26px;
  border: 0;
  background: var(--panel-soft);
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.segment + .segment { border-left: 1px solid var(--line-strong); }
.segment[aria-pressed="true"] { color: #fff; background: var(--ink); }
.segmented-three { grid-template-columns: repeat(3, 1fr); }

.select-actions-title { margin-top: 10px; }
.select-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.select-actions .chip { justify-content: center; }

.sheet-block { margin-top: 10px; }
.sheet-block[hidden] { display: none; }
.sheet-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 5px;
  color: var(--muted);
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hint { font-family: var(--font); font-size: 9px; opacity: 0.8; }

.colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.color {
  position: relative;
  width: 24px;
  aspect-ratio: 1;   /* a swatch is a circle, so height only ever follows width */
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
}
.color i {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(30, 34, 38, 0.1);
}
.color[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--ink); }

.size-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.size-row input { flex: 1; height: 20px; accent-color: var(--ink); }
.size-output {
  min-width: 42px;
  padding: 3px 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-soft);
  text-align: center;
  font-family: var(--font);
  font-size: 10px;
}

.size-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.size-preset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 22px;
  padding: 0 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
}
.size-preset i { display: none; border-radius: 50%; background: var(--ink); }
.size-preset span { font-size: 8px; font-style: italic; color: var(--muted); }
.size-preset[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); }
.size-preset[aria-pressed="true"] span { color: #fff; font-weight: 700; }

.sheet-done { width: 100%; margin-top: 10px; }

/* Settings dialog ------------------------------------------------------- */

dialog {
  width: min(340px, calc(100% - 16px));
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 12px 36px rgba(30, 34, 38, 0.22);
}
dialog::backdrop { background: rgba(30, 34, 38, 0.3); }
.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.dialog-heading h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.close-button {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.setting { display: grid; gap: 6px; margin-top: 10px; }
.setting > span, .setting-row {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.setting output {
  float: right;
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-soft);
  font-family: var(--font);
  text-transform: none;
}
.setting input[type="range"] { width: 100%; accent-color: var(--ink); }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  border-top: 1px solid var(--line);
}
.setting-row span { display: flex; align-items: center; gap: 6px; }
.setting-row select {
  height: var(--tap);
  min-width: 56px;
  padding: 0 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  font-family: var(--font);
  font-size: 10px;
}
.dot { width: 6px; height: 6px; border-radius: 50%; }
.dot-before { background: #b8403a; }
.dot-after { background: #3f8f79; }

.switch { position: relative; display: inline-flex; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch-track {
  width: 34px;
  height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--panel-soft);
}
.switch-track::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: 1px;
  border-radius: 1px;
  background: var(--line-strong);
  transition: transform 0.12s ease, background 0.12s ease;
}
.switch input:checked + .switch-track { border-color: var(--ink); }
.switch input:checked + .switch-track::after { background: var(--ink); transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 1px solid var(--ink); outline-offset: 1px; }

.shortcuts { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.shortcuts summary {
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.shortcuts ul { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 5px; }
.shortcuts li { color: var(--muted); font-size: 11px; }
kbd {
  display: inline-block;
  min-width: 15px;
  padding: 0 3px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--panel-soft);
  color: var(--text);
  font-family: var(--font);
  font-size: 9px;
  text-align: center;
}

.dialog-actions { display: grid; gap: 6px; margin-top: 12px; }

/* New project dialog ---------------------------------------------------- */

.new-project-dialog {
  width: min(520px, calc(100% - 24px));
  padding: 18px;
}
.segment .ph { margin-right: 3px; font-size: 12px; vertical-align: -1px; }
.new-project-dialog::backdrop { background: rgba(30, 34, 38, 0.52); }
.new-project-heading { text-align: center; }
.new-project-heading .eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.new-project-heading h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.new-project-heading > p:last-child { margin: 7px auto 0; max-width: 390px; color: var(--muted); font-size: 12px; }
.orientation-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}
.orientation-options legend {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.orientation-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 104px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 2px);
  background: var(--panel-soft);
  cursor: pointer;
}
.orientation-card:hover { background: #fff; }
.orientation-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #fff; }
.orientation-card:has(input:focus-visible) { outline: 1px solid var(--ink); outline-offset: 2px; }
.orientation-card input { position: absolute; opacity: 0; pointer-events: none; }
.orientation-card > span:last-child { display: grid; gap: 3px; }
.orientation-card strong { font-size: 12px; }
.orientation-card small { color: var(--muted); font-size: 10px; }
.orientation-preview {
  display: block;
  place-self: center;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(30, 34, 38, 0.1);
}
.orientation-preview-landscape { width: 72px; aspect-ratio: 4 / 3; }
.orientation-preview-portrait { height: 72px; aspect-ratio: 3 / 4; }
.new-project-fps { margin-top: 16px; }
.new-project-note,
.new-project-status { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.new-project-status { padding: 8px; border: 1px solid #ddc4c2; background: #faf0ef; color: var(--danger); }
.new-project-status[hidden] { display: none; }
.new-project-start { width: 100%; height: 38px; margin-top: 14px; }
.new-project-dialog[data-blocked="true"] .orientation-options,
.new-project-dialog[data-blocked="true"] .new-project-fps,
.new-project-dialog[data-blocked="true"] .new-project-note,
.new-project-dialog[data-blocked="true"] .new-project-start { display: none; }

/* Toast ----------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 70px;
  z-index: 40;
  padding: 4px 9px;
  border-radius: var(--radius);
  color: #fff;
  background: rgba(30, 34, 38, 0.92);
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
}
.toast[hidden] { display: none; }

/* Touch: same layout, thumb-sized controls ------------------------------ */

@media (pointer: coarse), (max-width: 760px) {
  :root { --tap: 40px; --frame-button-width: 64px; }
  body[data-orientation="portrait"] { --frame-button-width: 36px; }

  /* Nothing here is text worth selecting, and a thumb resting on a label is far
     more likely to be reaching for a tool than quoting one — so the whole page is
     locked against selection, along with the long-press callout that comes with
     it. Form controls and the canvas are unaffected. */
  body {
    -webkit-user-select: none;         /* older iOS Safari needs the prefix */
    user-select: none;
    -webkit-touch-callout: none;
  }

  .actions .button .label { display: none; }
  .actions .button { padding: 0 11px; }
  .actions .button .icon { font-size: 13px; }
  .header { height: 48px; }
  .frame-button, .frame-add { height: 48px; }
  .frame-add { font-size: 18px; }
  .segment, .size-preset { height: var(--tap); }
  .color { width: var(--tap); }   /* width only — aspect-ratio keeps it round */
  .switch-track { width: 44px; height: 24px; }
  .switch-track::after { width: 20px; height: 20px; }
  .switch input:checked + .switch-track::after { transform: translateX(20px); }
}

@media (max-width: 760px) {
  .brand p { display: none; }
  .brand-text::before { display: none; }
  /* The sheet is white and so is the chrome floating over it, so the stage keeps
     the grey it has on desktop — without it the paper has no visible edge and
     you cannot tell where the drawable area stops. The hairline stays for the
     same reason, and it carries the working-layer ring along with it. */
  .stage { position: fixed; inset: 0; z-index: 0; padding: 0; overflow: hidden; background: var(--bg); }
  .paper { max-width: none; max-height: none; }
  .zoom-controls { display: none; }
  .header, .filmstrip, .toolbar, .page-navigation { position: relative; z-index: 2; }
  .header { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); }
  .filmstrip { margin-top: auto; flex-direction: column; gap: 4px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); }
  .timeline-stack { grid-template-columns: 76px 36px minmax(0, 1fr); }
  .timeline-layer-button { padding: 0 5px; }

  /* The full tool row is wider than a phone, so instead of shrinking the buttons
     or wrapping onto a second line it becomes a horizontal swipe track. Native
     scrolling does the work: the browser already cancels the click when a press
     on a button turns into a drag, so swiping across the bar never fires a tool. */
  .toolbar {
    gap: 5px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;               /* no vertical hijack, no pull-to-refresh */
    overscroll-behavior-x: contain;    /* the swipe never chains into browser back */
    -webkit-overflow-scrolling: touch; /* momentum on older iOS */
    scrollbar-width: none;             /* a scrollbar here would only add height */
    scroll-snap-type: x proximity;     /* settles on a group, never a half button */
    scroll-padding-inline: 8px;

    /* Edge shadows that appear only while there is more bar in that direction:
       the two covers ride along with the content (local) and sit on top of the
       shadows, which stay pinned to the visible box (scroll). */
    background-color: var(--panel);
    background-image:
      linear-gradient(to right, var(--panel), rgba(255, 255, 255, 0)),
      linear-gradient(to left, var(--panel), rgba(255, 255, 255, 0)),
      radial-gradient(farthest-side at 0 50%, rgba(30, 34, 38, 0.16), rgba(30, 34, 38, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(30, 34, 38, 0.16), rgba(30, 34, 38, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 26px 100%, 26px 100%, 11px 100%, 11px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar > .tool-group { flex: 0 0 auto; scroll-snap-align: start; }

  .tool .label { display: none; }
  /* Held at a fixed width so the paint pair keeps its size when the label flips
     between "Brush" and the wider "Eraser". */
  .tool-wide { min-width: 84px; }
  .tool-wide .label { display: inline; }

  .sheet {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 10px calc(12px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 0;
  }
  .sheet-handle {
    display: block;
    width: 34px;
    height: 3px;
    margin: 2px auto 8px;
    background: var(--line-strong);
  }
  .toast { bottom: auto; top: 58px; }
  .new-project-dialog { width: min(420px, calc(100% - 16px)); padding: 14px; }
  .orientation-card { grid-template-columns: 1fr; gap: 8px; min-height: 132px; padding: 10px; text-align: center; }
  .orientation-card > span:last-child { gap: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}