:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --line: #e2e4e9;
  --text: #1c2024;
  --muted: #6b7280;
  --accent: #2f6df6;
  --accent-soft: #e7eefe;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- Toolbar ---- */
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index: 5;
}

.group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand {
  font-weight: 650;
  letter-spacing: .2px;
}

.lbl, .group > label {
  color: var(--muted);
  font-size: 13px;
}

.tip {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}

/* Buttons */
button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  user-select: none;
}

button:hover { background: #f7f8fa; }
button:disabled { opacity: .45; cursor: not-allowed; }

input[type="range"] {
  width: 130px;
  accent-color: var(--accent);
}

/* ---- Stage ---- */
.stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* long-press etc. must reach us, not scroll the page */
  -webkit-touch-callout: none; /* no iOS save-image sheet on long-press */
  background:
    linear-gradient(45deg, #eceef1 25%, transparent 25%) -10px 0,
    linear-gradient(-45deg, #eceef1 25%, transparent 25%) -10px 0,
    linear-gradient(45deg, transparent 75%, #eceef1 75%),
    linear-gradient(-45deg, transparent 75%, #eceef1 75%);
  background-size: 20px 20px;
  background-color: #f8f9fb;
}

/* Plan layers — one per plan, interleaved img + per-plan area svg, back-to-
   front. Containers are click-through; only the images and box shapes are hit
   targets, so an upper layer doesn't swallow clicks meant for a lower one. */
#layers { position: absolute; inset: 0; pointer-events: none; }
.layer { position: absolute; inset: 0; pointer-events: none; }

/* Per-plan opacity card (opacity slider + remove button). */
#cards { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.card {
  position: absolute;
  display: none;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
  pointer-events: none; /* children opt back in */
}
.card.show { display: flex; }
.card-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
}
.card-total {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.card-recal,
.card-show {
  pointer-events: auto;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.6;
}
.card-del {
  pointer-events: auto;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
  color: #e5484d;
}
.card-lock {
  pointer-events: auto;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
}
.card-lock.locked {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.card-save {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.6;
  color: #92560c;
  border-color: #e0a458;
  background: #fff7ed;
}
.card-save:hover { background: #ffedd5; }
.card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e2860d;
}
/* Plan selection UI: dashed border + rotate handle, above the plans. */
#plan-ui {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.plan-border {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 7 5;
  pointer-events: none;
}
/* Floating toolbars on the canvas. The tools stack vertically so they stay
   compact on narrow screens. */
.tools-toolbar {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 160px;
  gap: 6px;
}
.tools-toolbar button {
  box-shadow: var(--shadow);
  text-align: left;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tools-toolbar button svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none; /* keep e.target === the button for outside-click checks */
}
.tools-toolbar button span { pointer-events: none; } /* ditto */

/* "＋ Add plan" — the toolbar's primary action, with its dropdown menu of
   every way to get a plan in (file / library / Rightmove grab). */
.add-wrap { position: relative; display: flex; }
.add-plan { flex: 1; }
.add-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 7;
  width: 230px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(16, 24, 40, .14);
}
.tools-toolbar .add-menu button {
  border: none;
  box-shadow: none;
  background: none;
  padding: 8px 10px;
  border-radius: 6px;
}
.tools-toolbar .add-menu button:hover { background: var(--accent-soft); }
.add-hint {
  margin: 4px 10px 6px;
  color: var(--muted);
  font-size: 12px;
}

.zoom-toolbar {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zoom-toolbar button {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom-toolbar button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.card-opacity {
  width: 64px;
  pointer-events: auto;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Dynamic map-style scale bar (bottom, left of the zoom buttons): one shared
   baseline with a metric tick + label above and an imperial tick + label below,
   both measured from the shared right-hand origin. Widths/offsets set in JS. */
.scale-bar {
  position: absolute;
  right: 64px;
  bottom: 16px;
  z-index: 5;
  pointer-events: none;
  color: var(--text);
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9));
}
.scale-track {
  position: absolute;
  right: 0;
  bottom: 19px;
  height: 2px;
  background: currentColor;
}
.scale-tick {
  position: absolute;
  width: 2px;
  background: currentColor;
}
.scale-tick-origin { right: 0; bottom: 13px; height: 14px; }
.scale-tick-metric { bottom: 20px; height: 7px; }   /* up; right set in JS */
.scale-tick-imperial { bottom: 13px; height: 7px; }  /* down; right set in JS */
.scale-metric-label,
.scale-imperial-label {
  position: absolute;
  right: 0;
  text-align: center;
  white-space: nowrap;
  font: 600 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.scale-metric-label { bottom: 28px; }
.scale-imperial-label { bottom: 0; }

/* Plan images */
.layer img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto; /* the image is draggable / occludes boxes below */
}
.stage.dragover { outline: 2px dashed var(--accent); outline-offset: -6px; }

/* Guided onboarding message */
.guide {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  max-width: 420px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
  pointer-events: none;
}
.guide-title { margin: 0 0 4px; font-weight: 650; font-size: 15px; }
.guide-body { margin: 0; color: var(--muted); }
#guide-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
#guide-add-row button { pointer-events: auto; }
.guide-paste {
  flex-basis: 100%;
  margin: 0 0 2px;
  font-size: 15px;
}
.guide-or {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.guide-rm {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 13px;
}
.guide-rm a { color: var(--muted); pointer-events: auto; }
.guide-rm a:hover { color: var(--accent); }
#guide-file {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
#guide-file:hover { background: #235ad6; }

#save-lib-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  pointer-events: auto;
  cursor: pointer;
}
#save-lib-row input { pointer-events: auto; cursor: pointer; }
#save-lib-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
#save-lib-note a {
  pointer-events: auto;
  color: var(--accent);
  font-weight: 600;
}

#confirm-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
#confirm-row button { pointer-events: auto; }
#confirm-yes {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
#confirm-yes:hover { background: #235ad6; }

/* Area-measuring overlays. Each box (outline, labels, handles, delete) renders
   on its own plan's layer, just above that plan's image, so the plan on top
   occludes it both visually and for clicks. The top layer only shows the live
   drawing preview and captures clicks while the tool is active. */
.area-plan,
.area-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.area-layer { z-index: 2; }
.area-layer.active { pointer-events: auto; cursor: crosshair; }

.area-plan polygon,
.area-layer polygon {
  fill: rgba(47, 109, 246, .12);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.area-plan polygon { pointer-events: all; cursor: move; } /* box is clickable */
.area-layer polygon { pointer-events: none; } /* preview only */

.area-plan text,
.area-layer text {
  fill: var(--text);
  font: 650 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.area-plan text.area,
.area-layer text.area { font-size: 14px; fill: var(--accent); }

/* Furniture pieces: warmer fill + top-down schematic + name/dimension labels. */
.area-plan polygon.furn,
.area-layer polygon.furn {
  fill: rgba(20, 140, 110, .12);
  stroke: #128a6e;
}
.furn-icon,
.furn-ic {
  fill: none;
  stroke: #0f7a62;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.furn-icon { pointer-events: none; }
/* vector-effect isn't inherited, so it must sit on the shapes themselves. */
.furn-icon *,
.furn-ic * { vector-effect: non-scaling-stroke; }
.area-plan text.furn-name,
.area-layer text.furn-name { fill: #0f6b56; }
.area-plan text.furn-dim,
.area-layer text.furn-dim { font-size: 11px; fill: var(--muted); }

/* Tape-measure lines: a fat invisible hit line under a visible one. */
.tape {
  stroke: #b42318;
  stroke-width: 2;
  pointer-events: none;
}
.tape-hit {
  stroke: transparent;
  stroke-width: 14;
  pointer-events: all;
  cursor: move;
}
.area-layer .tape-hit { pointer-events: none; } /* preview / while dragging */
.tape-arrow {
  stroke: #b42318;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  pointer-events: none;
}
.tape-end {
  fill: #fff;
  stroke: #b42318;
  stroke-width: 1.5;
  pointer-events: all;
  cursor: move;
}
.area-plan text.tape-label,
.area-layer text.tape-label { fill: #b42318; }

.handle {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 1.5;
  pointer-events: all;
}
.del {
  fill: #fff;
  stroke: #e5484d;
  stroke-width: 1.5;
  cursor: pointer;
  pointer-events: all;
}
.rot {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 1.5;
  cursor: grab;
  pointer-events: all;
}
.rot:active { cursor: grabbing; }
.rot-stem {
  stroke: var(--accent);
  stroke-width: 1.5;
  pointer-events: none;
}
.del-x {
  stroke: #e5484d;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

#area-btn.active,
#dist-btn.active,
#furniture-btn.active,
#library-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* While placing a furniture piece, the canvas is a drop target. */
.stage.placing { cursor: crosshair; }

/* Calibration overlay */
.calib {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  cursor: crosshair;
}
/* Read-only display of a stored calibration line (not measuring). */
.calib.readonly { pointer-events: none; cursor: default; }
.stage.measuring,
.stage.measuring * { cursor: crosshair !important; }
/* During the confirm step the canvas pans, so use a grab cursor instead. */
.stage.measuring.confirming,
.stage.measuring.confirming * { cursor: grab !important; }
.stage.measuring #guide button,
.stage.measuring #guide a { cursor: pointer !important; }
.calib line { stroke: var(--accent); stroke-width: 2.5; }
.calib circle { fill: var(--accent); }
.calib marker path { fill: var(--accent); }
.calib-label {
  fill: var(--accent);
  font: 700 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* Magnifying loupe shown while placing calibration points. clip-path (not
   just border-radius + overflow) so the compositor keeps the magnified,
   constantly-transforming content clipped to the circle without flicker. */
.loupe {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  clip-path: circle(50%);
  pointer-events: none;
  z-index: 5;
}
#loupe-content {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
#loupe-content img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  max-width: none;
}
/* Mirror of the calibration overlay inside the loupe (scaled with it). */
.loupe-calib {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}
.loupe-calib line { stroke: var(--accent); stroke-width: 2.5; }
.loupe-calib circle { fill: var(--accent); }
.loupe-calib marker path { fill: var(--accent); }
.loupe-calib text { display: none; }

.hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 32px));
  background: var(--text);
  color: #fff;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  z-index: 6;
  box-shadow: var(--shadow);
  pointer-events: none;
}

/* Undo toast: like a hint, plus an action button. */
.undo-toast {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--text);
  color: #fff;
  padding: 6px 8px 6px 16px;
  border-radius: 16px;
  font-size: 13px;
  z-index: 6;
  box-shadow: var(--shadow);
}
.undo-toast button {
  padding: 3px 10px;
  border-radius: 10px;
  background: transparent;
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
  font-weight: 600;
}
.undo-toast button:hover { background: rgba(255, 255, 255, .12); }

/* Help popover + bookmarklet */
.help-pop {
  position: absolute;
  top: 56px;
  right: 16px;
  z-index: 10;
  width: 400px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(16, 24, 40, .14);
  padding: 18px 20px;
}
.help-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.help-head strong { margin-right: auto; }
.help-pop ol { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.5; }
.help-pop li { margin: 10px 0; }

.bm {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  cursor: grab;
}
.mini {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
}
kbd {
  font: inherit;
  background: #f1f2f5;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--text);
}

/* Library panel */
.library {
  position: absolute;
  top: 64px;
  right: 16px;
  z-index: 11;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(16, 24, 40, .16);
  overflow: hidden;
}
.library-head,
.library-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.library-foot { border-bottom: none; border-top: 1px solid var(--line); }
.library-head strong { margin-right: auto; }
.library-foot #lib-usage { margin-right: auto; color: var(--muted); font-size: 13px; }

.lib-grid {
  display: grid;
  /* minmax(0, …): let a card shrink below its content so long names ellipsise
     instead of widening their column past the other one. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  overflow-y: auto;
}
.lib-empty { grid-column: 1 / -1; margin: 12px 4px; color: var(--muted); }
.lib-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lib-thumb {
  width: 100%;
  height: 90px;
  object-fit: contain;
  background: #f1f2f5;
  border-radius: 5px;
}
.lib-thumb-blank { display: block; }
.lib-name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-actions { display: flex; gap: 4px; }
.lib-actions button { padding: 3px 7px; font-size: 12px; border-radius: 6px; }

/* Furniture palette — same placement/behaviour as the Library panel. */
.furniture {
  position: absolute;
  top: 64px;
  right: 16px;
  z-index: 11;
  width: 280px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(16, 24, 40, .16);
  overflow: hidden;
}
.furniture-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.furniture-head strong { margin-right: auto; }
.furn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
}
.furn-cat {
  grid-column: 1 / -1;
  margin: 4px 2px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.furn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  text-align: center;
}
.furn-ic {
  width: 40px;
  height: 40px;
}
.furn-item-name { font-size: 12px; font-weight: 600; line-height: 1.2; }
.furn-item-dim { font-size: 11px; color: var(--muted); }

/* Per-plan tint picker on the card: a dot showing the tint + a swatch row. */
.card-tint {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  padding: 0;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.card-tint-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}
.swatch {
  width: 16px;
  height: 16px;
  padding: 0;
  flex: none;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .12);
  cursor: pointer;
}
.swatch.on { border-color: var(--text); }
.swatch.none {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}
.swatch.none.on { border: 2px solid var(--text); }

/* About modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 24, 40, .45);
}
.modal-card {
  position: relative;
  width: 440px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 14px 44px rgba(16, 24, 40, .3);
}
.modal-card h2 { margin: 0 0 12px; font-size: 18px; }
.modal-card p { margin: 0 0 10px; line-height: 1.5; }
.modal-card p:last-child { margin-bottom: 0; }
.modal-card a { color: var(--accent); }
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
}

.hidden { display: none !important; }

/* ---- Touch devices ---- */
.guide-paste-touch,
.add-hint-touch { display: none; }
@media (pointer: coarse) {
  .guide-paste-kbd,
  .add-hint-kbd { display: none; }
  .guide-paste-touch,
  .add-hint-touch { display: block; }
  .tape-hit { stroke-width: 24; } /* finger-sized grab line */
}

/* ---- Small screens ---- */
@media (max-width: 720px) {
  .tip { display: none; } /* keyboard advice; the About modal still covers it */
  #about-btn { margin-left: auto; } /* the hidden tip was the spacer */
  /* Icon-only tools toolbar; the labels stay for screen readers. */
  .tools-toolbar { width: auto; }
  .tools-toolbar button {
    justify-content: center;
    padding: 10px;
  }
  .tools-toolbar button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tools-toolbar button svg {
    width: 18px;
    height: 18px;
  }
  .guide { max-width: calc(100vw - 120px); } /* clear the icon toolbar */
  /* Slim plan cards: name + opacity + remove. Selecting the plan (a tap)
     reveals the full controls, wrapping instead of overflowing. */
  .card { flex-wrap: wrap; max-width: min(240px, 60vw); }
  .card:not(.sel) .card-total,
  .card:not(.sel) .card-recal,
  .card:not(.sel) .card-show,
  .card:not(.sel) .card-save,
  .card:not(.sel) .card-tint,
  .card:not(.sel) .card-lock:not(.locked) { display: none; } /* a locked plan can't be selected — keep its padlock reachable */
}