/* Self-hosted, Latin subset of Mona Sans (OFL beside it), shared with the main pages. */
@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/mona-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  /* Rangka demo skin: the site's own tokens. Ground sage-stone, ink, raised panel, hairlines.
     The marking orange is for dimension lines on the main pages only, so the pad's pen
     accent is the same blue as its drag handles. Flat, square, no shadows. */
  --ink: #1F2320;                    /* default pen colour */
  --annotation: #1F6FB2;             /* second pen colour (matches the handles) */
  --paper: #E8E9E4;                  /* page + canvas background */
  --grid-line: #CFD1CA;              /* graph-paper lines */
  --scale-figure: #646862;           /* the scale reference */
  --accent: #1F2320;
  --accent-dark: #1F2320;
  --danger: #A23A2A;
  --danger-border: #CFD1CA;
  --success: #1F2320;
  --success-active: #000000;
  --panel: #F5F5F2;
  --border: #CFD1CA;
  --text: #1F2320;                   /* body copy colour */
  --text-muted: #646862;
  --text-secondary: #3B403C;
  --on-accent: #F2F2EE;
  --shadow-color: rgba(31, 35, 32, 0.2);
  --overlay-bg: rgba(245, 245, 242, 0.9);

  --piece-ink: #1F2320;
  --piece-halo: #F5F5F2;
  --piece-mirror: rgba(205, 226, 240, 0.6);
  --piece-shine: #ffffff;
  --select: #1F6FB2;                 /* selection box + resize handles */
  --chip-press: #DDDFD8;
  --shadow-soft: rgba(31, 35, 32, 0.1);
  --swatch-slash: var(--danger);
  --swatch-edge: #757973;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Typography */
  --font-sans: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Radii: square, like the buttons on the main site */
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-round: 50%;

  --space-1: 0.35rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 2rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Room for the shapes tray while it's open, so the form stays reachable behind it. */
  padding-bottom: var(--tray-space, 0px);
  /* Never let anything (a focused editor, the tray) make the page scroll sideways. */
  overflow-x: hidden;
  overflow-x: clip;
}

.topbar {
  padding: 0.9rem var(--space-4) 0.4rem;
}
.topbar h1 {
  margin: 0;
  font-size: 1.25rem;
}
.tagline {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Stage */
.stage {
  position: relative;
  width: 100%;
  height: 56vh;
  min-height: 320px;
  overflow: hidden;
  background: var(--paper);
  touch-action: none;
  border-bottom: 1px solid var(--border);
}

.graph-paper {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
}

.photo-underlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--paper);
}

.draw-canvas, .overlay-canvas, .piece-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.overlay-canvas, .piece-canvas { pointer-events: none; }

.silhouette {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 60px;
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  user-select: none;
  filter: drop-shadow(0 1px 1px var(--shadow-color));
}
.silhouette.dragging { cursor: grabbing; opacity: 0.85; }
.silhouette-svg {
  width: 100%;
  height: auto;
  display: block;
}
.silhouette-svg .fill-figure { fill: var(--scale-figure); }
.silhouette-svg .stroke-paper {
  fill: none;
  stroke: var(--paper);
  stroke-linecap: round;
}
.silhouette-label {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--scale-figure);
  margin-top: 2px;
}

/* Photo controls */
.photo-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.photo-controls label { flex-shrink: 0; }
.photo-controls input[type="range"] { flex: 1; }

/* Toolbar */
.toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}
.tool-group {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

button {
  font: inherit;
}

/* Six drawing tools share one row on a 390px phone, so the tool buttons are a little tighter. */
.tool-group:first-child { flex: 1 1 100%; flex-wrap: wrap; gap: 4px; }
.tool-group:first-child .tool-btn { flex: 1 1 auto; padding-left: 0.3rem; padding-right: 0.3rem; font-size: 0.78rem; white-space: nowrap; }
.tool-btn, .weight-btn, .ghost-btn {
  min-height: 40px;
  padding: var(--space-1) 0.65rem;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text);
}
.tool-btn.is-active, .weight-btn.is-active {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: var(--on-accent);
}
/* While the shapes tray (or its slim bar) is open it covers the lower screen. Everything
   under the canvas — the pen controls (weights, pen colours, Undo/Redo/Clear, Photo/Scale),
   the tool row, the photo slider and the form — is removed outright rather than left
   half-hidden, so nothing is clipped by the tray's top edge: the canvas sits on plain paper
   and the tray slides up under it. Undo and Done live in the tray header, and everything
   comes back when it closes. */
body.tray-open .photo-controls,
body.tray-open .toolbar,
body.tray-open .spec-form,
body.tray-open .send-area { display: none; }

/* Cabinets / preset shapes: its own full-width row under the drawing tools — a different
   kind of tool (drop in ready-made shapes), and it keeps the five drawing tools on one line. */
#piecesToolBtn,
.tool-btn[data-tool="eraser"] {
  flex: 1 1 40%;          /* Eraser and Cabinets share the second row */
  font-weight: 600;
}
.ghost-btn { color: var(--text-secondary); }
.ghost-btn.danger { color: var(--danger); border-color: var(--danger-border); }
.ghost-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent-dark);
}
.ghost-btn:disabled {
  opacity: 0.45;
}

.color-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  border: 2px solid var(--border);
  padding: 0;
}
/* Background colour for the two pen swatches is set by JS from the same
   --ink/--annotation tokens above, so it always matches the actual pen colour. */
.color-btn.is-active {
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 2px var(--accent);
}

button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

/* Spec form */
.spec-form {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.spec-form h2 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}
.field-row {
  display: flex;
  gap: var(--space-3);
}
.field-row .field { min-width: 0; }
label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}
input[type="text"], textarea, select {
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background: var(--panel);
  color: var(--text);
  width: 100%;
}
textarea { resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Send area */
.send-area {
  padding: var(--space-2) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
#sendPanel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.send-btn {
  min-height: 48px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--success);
  color: var(--on-accent);
  font-size: 1rem;
  font-weight: 700;
}
.send-btn:active { background: var(--success-active); }
a.send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  text-decoration: none;
}
.send-status {
  min-height: 1.1em;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.send-status.error { color: var(--danger); }

.send-note {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: pre-line;
}

.confirm-panel {
  padding: var(--space-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.confirm-panel p {
  margin: 0 0 var(--space-2);
  font-size: 0.9rem;
  color: var(--text);
  white-space: pre-line;
}
.confirm-panel { margin-top: var(--space-2); }
.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.confirm-actions .ghost-btn {
  flex: 1;
  min-width: 160px;
  text-align: center;
  text-decoration: none;
}

/* Inline editor for text and measurement labels: one small box where they tapped, with
   done / cancel beside it. 16px+ so iOS and Android never zoom the page on focus; it's
   kept inside the stage (clipped) so focusing it can't push the page sideways. */
.note-editor {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 4px;
  /* iOS won't type into an input whose ancestors are user-select:none */
  -webkit-user-select: text;
  user-select: text;
}
/* Specific enough to beat the page-wide input[type="text"] rule: the size here must stay
   16px or more, or iOS zooms the page when the box takes focus. */
.note-editor input.note-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 0.65rem;
  border: 1.5px solid var(--select);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: max(16px, 1rem);
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
  box-shadow: 0 2px 10px var(--shadow-soft);
}
.note-editor input.note-input:focus-visible { outline: none; }
.note-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-round);
  background: var(--panel);
  color: var(--text-secondary);
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: 0 2px 10px var(--shadow-soft);
  transition: transform 120ms var(--ease-out);
}
.note-btn.ok { background: var(--accent); border-color: var(--accent-dark); color: var(--on-accent); }
.note-btn.no { color: var(--danger); }
.note-btn:active { transform: scale(0.97); }

/* ---------- Preset shapes: selection, handles, floating bar ---------- */

/* Dragging handles / pieces must never start a text selection (or an iOS long-press callout). */
.stage, .selection-layer, .piece-bar, .tray, .toolbar {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Lives above everything in the stage but is pure DOM — it can never end up in the saved
   image, which is composited from canvases only. */
.selection-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}
.sel-box {
  position: absolute;
  left: 0;
  top: 0;
  border: 1.5px dashed var(--select);
  border-radius: 2px;
  pointer-events: none;
}

/* ~16px to look at, 44px to touch. */
.handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  pointer-events: auto;
  touch-action: none;
}
.handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: var(--panel);
  border: 2px solid var(--select);
  border-radius: 5px;
  box-shadow: 0 1px 3px var(--shadow-color);
  transition: transform 120ms var(--ease-out);
}
.handle.round::before {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background: var(--select);
  border-color: var(--panel);
  border-radius: var(--radius-round);
}
/* The scale handle (top-right corner): a bigger filled circle with a diagonal double-arrow,
   so it can't be mistaken for the little square stretch handles. */
.handle.scale::before {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}
.handle svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  fill: none;
  stroke: var(--on-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: transform 120ms var(--ease-out);
}
.handle.scale svg { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.handle:active::before { transform: scale(1.15); }
.handle:active svg { transform: scale(1.15); }
.handle[data-handle="left"], .handle[data-handle="right"] { cursor: ew-resize; }
.handle[data-handle="top"], .handle[data-handle="slope"] { cursor: ns-resize; }
.handle[data-handle="scale"] { cursor: nesw-resize; }

.piece-bar {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px var(--shadow-soft);
  pointer-events: auto;
  transform-origin: 50% 100%;
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.piece-bar.is-hidden {
  opacity: 0;
  transform: translateY(3px) scale(0.97);
  pointer-events: none;
}
.piece-bar button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 0;
  border-radius: calc(var(--radius-lg) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
}
.piece-bar button.danger { color: var(--danger); }
.piece-bar button:active { transform: scale(0.97); background: var(--chip-press); }

/* ---------- Preset shapes: the tray ---------- */

.tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  max-width: 760px;
  margin: 0 auto;
  max-height: 62vh;
  overflow-y: auto;
  padding: var(--space-2) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 28px var(--shadow-soft);
  transform: translateY(100%);
  transition: transform 240ms var(--ease-drawer);
}
.tray.is-open { transform: none; }

.tray-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.tray-tabs { display: flex; gap: var(--space-1); }
.tray-tab, .tray-done, .tray-add, .tray-undo {
  min-height: 44px;
  padding: 0 0.95rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
}
.tray-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
}
.tray-tab[aria-selected="true"] {
  background: var(--chip-press);
  border-color: var(--border);
  color: var(--text);
}
.tray-done {
  border: 1px solid var(--accent-dark);
  background: var(--accent);
  color: var(--on-accent);
}
/* The tray's own Undo, next to Done, because the page's Undo row is hidden while it's open. */
.tray-undo {
  margin-left: auto;
  min-width: 44px;
  padding: 0 0.8rem;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-secondary);
}
.tray-undo:disabled { opacity: 0.45; }
/* "+ Add another" lives in the slim bar and takes the tabs' place. */
.tray-add {
  border: 1px solid var(--accent);
  background: var(--panel);
  color: var(--accent-dark);
}
.tray-tab:active, .tray-done:active, .tray-add:active { transform: scale(0.97); }

.tray-hint {
  margin: var(--space-1) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--chip-press);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.chip-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding: 4px 2px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.chip {
  /* 3.5 chips fit the row, so on any phone the next one is cut off at the edge — the cue
     that the row scrolls. (Clamped so it stays sensible on a wide screen.) */
  flex: 0 0 clamp(88px, calc((100% - 3 * var(--space-2)) / 3.5), 124px);
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 0.72rem;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: transform 140ms var(--ease-out), background 140ms var(--ease-out);
}
.chip canvas { display: block; }
.chip:active { transform: scale(0.97); background: var(--chip-press); }

/* Stands where Finish and Colour will be until a shape is selected. Normal body contrast. */
.tray-prompt {
  margin: var(--space-2) 0 var(--space-1);
  padding: 0 2px;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text);
}
.tray-group { margin-top: var(--space-1); }
.tray-label {
  display: block;
  margin-bottom: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.pills, .swatches {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  padding: 2px;
}
.pills .pill { flex: 1 1 0; }
.pill {
  flex: 1 0 auto;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
}
.pill[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: var(--on-accent);
}
/* A swatch is one button (>= 44px wide and tall): the solid colour, with its name beneath. */
.swatch {
  flex: 1 1 0;
  min-width: 0;
  min-height: 64px;       /* room for a two-line label; every swatch is >= 44px wide at 360px+ */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 3px 0 2px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  transition: transform 120ms var(--ease-out);
}
.swatch-dot {
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-round);
  transition: box-shadow 120ms var(--ease-out);
}
.swatch-dot.light { border-color: var(--swatch-edge); }        /* white / grey: visible 1px edge */
.swatch-dot.none {
  border-color: var(--swatch-edge);
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--swatch-slash) calc(50% - 1px), var(--swatch-slash) calc(50% + 1px), transparent calc(50% + 1px)),
    var(--panel);
}
.swatch-label {
  max-width: 100%;
  font-size: 0.68rem;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;   /* "Light wood" wraps to two lines rather than pushing the row wider */
  color: var(--text);
}
.swatches { gap: 2px; padding: 2px 0; }
.swatch[aria-pressed="true"] .swatch-dot { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.swatch[aria-pressed="true"] .swatch-label { font-weight: 700; }
.pill:active, .swatch:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .chip:hover, .pill:not([aria-pressed="true"]):hover { background: var(--chip-press); }
}

@media (prefers-reduced-motion: reduce) {
  .tray { transform: none; opacity: 0; transition: opacity 120ms linear; }
  .tray.is-open { opacity: 1; }
  .piece-bar, .piece-bar.is-hidden { transform: none; }
}

@media (min-width: 700px) {
  .stage { height: 65vh; }
}

/* ---------- Rangka demo additions ---------- */
.demo-bar {
  padding: 9px var(--space-4);
  background: #DDDFD8;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: center;
}
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: -4px;
  padding: 0 4px;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-decoration: none;
}
.back-link:hover { color: var(--text); }
.topbar h1 { font-weight: 500; letter-spacing: -0.035em; }
.tray { border-radius: 0; box-shadow: none; border-top: 1px solid var(--border); }
.piece-bar, .note-input, .note-btn { box-shadow: none; }
.send-btn { min-height: 52px; font-weight: 500; }
.handle::before { border-radius: 0; box-shadow: none; }
.handle.round::before { border-radius: 50%; }
.silhouette { filter: none; }
input, textarea, select { font: inherit; }
input::placeholder, textarea::placeholder { font: inherit; }
/* Four tray tabs plus Undo and Done share one row on a 360px phone. */
.tray-head { gap: 4px; }
.tray-tabs { gap: 0; }
.tray-tab, .tray-done, .tray-add, .tray-undo { padding: 0 0.5rem; font-size: 0.85rem; }\n.tray-tab { padding: 0 0.4rem; }
.tray-undo { margin-left: auto; }