:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --line: #e3e5e9;
  --line-strong: #d0d4da;
  --text: #16181d;
  --muted: #6b7280;
  --accent: #2f7d4f;
  --accent-soft: #e7f3ec;
  --danger: #d4383d;
  --stage: #4c4c50;
  --stage-2: #2b2b2e;
  --grid: #e8eaee;
  --panel-fill: #ffffff;
  --dim: #2f7d4f;
  /* The 3D dimension overlay. It is drawn over the stage, whose gradient is the
     same dark grey in both themes, so the ink is white in both - these are not
     duplicated in the dark block below, and they must not be, or the witness
     lines would go black on a dark backdrop. */
  --dim-ink: #ffffff;
  --dim-halo: rgba(0, 0, 0, .55);
  --dim-soft: rgba(255, 255, 255, .45);
  --shadow: 0 1px 2px rgba(16, 18, 21, .06), 0 8px 24px rgba(16, 18, 21, .06);
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c;
    --surface: #1e2126;
    --surface-2: #23262c;
    --line: #2e323a;
    --line-strong: #3a3f48;
    --text: #e8eaed;
    --muted: #9aa1ad;
    --accent: #4ade80;
    --accent-soft: #1c2f24;
    --danger: #f87171;
    --stage: #4c4c50;
    --stage-2: #2b2b2e;
    --grid: #262a31;
    --panel-fill: #1a1d21;
    --dim: #4ade80;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; flex-direction: column; height: 100%; }

/* ---------- top bar ---------- */
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { color: var(--accent); font-size: 18px; }

.name-input {
  font: 600 15px/1.2 inherit;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  max-width: 230px;
}
.name-input:hover { border-color: var(--line); }
.name-input:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }

.status { color: var(--muted); font-size: 12px; white-space: nowrap; }
.status.busy { color: var(--accent); }

.actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

button { font-family: inherit; }

.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); border-radius: 8px; cursor: pointer; font-size: 15px;
}
.icon-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); }
.icon-btn:disabled { opacity: .35; cursor: default; }

.primary {
  border: 0; background: var(--accent); color: #fff;
  font: 600 13px/1 inherit; padding: 9px 16px; border-radius: 8px; cursor: pointer;
}
@media (prefers-color-scheme: dark) { .primary { color: #0b1410; } }
.primary:hover { filter: brightness(1.06); }

.ghost {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 600 13px/1 inherit; padding: 9px 14px; border-radius: 8px; cursor: pointer;
}
.ghost:hover { background: var(--surface-2); }

/* ---------- layout ---------- */
.layout { flex: 1; display: flex; min-height: 0; }

.tools[hidden] { display: none; }
.tools {
  width: 68px; flex: none;
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: stretch; padding: 8px 6px; gap: 2px;
}
.tool {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; background: transparent; color: var(--muted);
  font: 500 10px/1 inherit; padding: 9px 2px; border-radius: 8px; cursor: pointer;
}
.tool span { font-size: 17px; line-height: 1; }
.tool:hover { background: var(--surface-2); color: var(--text); }
.tool.danger:hover { color: var(--danger); }
.tool-spacer { flex: 1; }

.stage {
  position: relative; flex: 1; min-width: 0;
  background: radial-gradient(125% 105% at 28% 18%, var(--stage) 0%, var(--stage-2) 78%);
  /* The dimension witnesses are drawn outside the tag, so they leave the
     stage as soon as you zoom in - and the first thing anyone does in a 3D
     view is zoom. Unclipped they painted the width label over the toolbar,
     on top of the view tabs, and then off the window entirely. The phone
     rule already clipped; the desktop one never did. */
  overflow: hidden;
}
/* The preview backdrop is the viewer's choice, independent of the UI theme. */
/* Two swatches at the top-left of the stage, the same control the Box Maker,
   Stand Nama and Cake Topper all carry. */
.backdrop-pick {
  position: absolute; top: 14px; left: 14px; z-index: 5;
  display: flex; gap: 3px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
}
.backdrop-pick[hidden] { display: none; }
.backdrop-pick button {
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 7px;
}
.backdrop-pick button:hover { border-color: var(--muted); }
.backdrop-pick button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.stage[data-backdrop="light"] {
  --stage: #ffffff;
  --stage-2: #dde1e8;
  --dim-ink: #23272e;
  --dim-halo: rgba(255, 255, 255, .75);
  --dim-soft: rgba(35, 39, 46, .45);
}
.stage[data-backdrop="dark"] {
  --dim-ink: #ffffff;
  --dim-halo: rgba(0, 0, 0, .55);
  --dim-soft: rgba(255, 255, 255, .45);
}

.stage-pane { position: absolute; inset: 0; }
.stage-pane[hidden] { display: none; }
#stage2d { background: var(--bg); }
#stage3d canvas { display: block; }

.dim-overlay { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.dim-line { stroke: var(--dim-ink); stroke-width: 1.1; opacity: .85; }
.dim-ext { stroke: var(--dim-soft); stroke-width: 1; }
.dim-head { fill: var(--dim-ink); opacity: .85; }
.dim-text {
  fill: var(--dim-ink); font: 500 13px/1 ui-sans-serif, system-ui, sans-serif;
  text-anchor: middle; paint-order: stroke;
  stroke: var(--dim-halo); stroke-width: 3px; stroke-linejoin: round;
}

.editor-svg { display: block; touch-action: none; user-select: none; }
.editor-svg .handle { cursor: grab; }
.editor-svg .obj { cursor: move; }

.faces {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
}
.face {
  border: 0; background: transparent; border-radius: 9px;
  font: 500 11px/1.2 inherit; padding: 5px 7px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 52px;
  transition: background .12s ease;
}
.face-ico {
  position: relative;
  width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--text); opacity: .68;
  transition: opacity .12s ease, color .12s ease;
}
.face-ico svg { display: block; width: 26px; height: 26px; }
.face:hover { background: var(--surface-2); }
.face:hover .face-ico { opacity: 1; }
.face[aria-pressed="true"] { background: var(--accent-soft); }
.face[aria-pressed="true"] .face-ico { color: var(--accent); opacity: 1; }
.face-label { color: var(--muted); }
.face[aria-pressed="true"] .face-label { color: var(--accent); font-weight: 600; }
.face-sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 6px; }
.face .badge {
  position: absolute; top: -1px; right: -1px;
  background: var(--accent); color: var(--surface); border-radius: 999px;
  font-size: 9px; font-weight: 700; padding: 0 4px; line-height: 13px;
}

/* ---------- inspector ---------- */
.inspector {
  width: 296px; flex: none; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line);
  padding: 12px 14px 40px;
}
.insp-title { font: 600 13px/1 inherit; color: var(--muted); margin: 4px 0 12px; letter-spacing: .02em; }

.group { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.group > summary {
  list-style: none; cursor: pointer; padding: 11px 12px;
  font: 600 13px/1 inherit; display: flex; justify-content: space-between; align-items: center;
  background: var(--surface-2);
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary::after { content: "⌄"; color: var(--muted); transition: transform .15s; }
.group[open] > summary::after { transform: rotate(180deg); }
.group-body { padding: 12px; display: grid; gap: 12px; }

.field { display: grid; gap: 6px; }
.field > label { font-size: 12px; color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { min-width: 0; }

input[type="text"], input[type="number"], select, textarea {
  width: 100%; padding: 7px 9px; font: inherit; font-size: 13px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 7px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { resize: vertical; min-height: 58px; }

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

.num { display: flex; align-items: center; gap: 6px; }
.num input { text-align: right; }
.num .unit { font-size: 11px; color: var(--muted); }

.seg { display: flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg button {
  flex: 1; border: 0; background: var(--surface); color: var(--muted);
  font: 500 12px/1 inherit; padding: 8px 4px; cursor: pointer; white-space: nowrap;
}
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.card {
  border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  padding: 6px 5px 7px; cursor: pointer; text-align: center;
  font: 500 10.5px/1.25 inherit; color: var(--muted);
  min-width: 0;
}
.card .art {
  display: block; border-radius: 7px; background: var(--surface-2);
  padding: 3px 2px; margin-bottom: 7px;
}
.card svg { display: block; width: 100%; height: 46px; }
.card:hover { border-color: var(--muted); }
.card[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.card[aria-pressed="true"] .art { background: var(--accent-soft); }

.swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.18); flex: none; }

.hint, .muted { color: var(--muted); font-size: 12px; }
.hint { margin: -4px 0 0; }
.warn { color: var(--danger); font-size: 12px; }

.tick-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }

.stat { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.stat b { color: var(--text); font-weight: 600; }

.link { background: none; border: 0; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------- popovers ---------- */
.popover {
  position: fixed; z-index: 40; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px; max-width: 320px;
}
.popover[hidden] { display: none; }
.pop-title { font: 600 13px/1 inherit; margin: 2px 4px 10px; }
.shape-list { display: grid; gap: 2px; min-width: 160px; }
.shape-list button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; padding: 8px 9px; border-radius: 7px; cursor: pointer; text-align: left;
}
.shape-list button:hover { background: var(--surface-2); }
/* ---------- clipart picker ---------- */
.clip-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  max-height: 260px; overflow-y: auto; margin-top: 6px;
}
.clip-grid button {
  border: 1px solid transparent; background: transparent; color: var(--text);
  padding: 5px; border-radius: 7px; cursor: pointer;
}
.clip-grid button:hover { border-color: var(--accent); background: var(--accent-soft); }
.clip-art { display: block; }
.clip-art svg { display: block; width: 100%; height: 30px; }
.drop {
  border: 1.5px dashed var(--line-strong); border-radius: 9px;
  padding: 22px 16px; text-align: center; color: var(--muted); font-size: 12px;
}
.drop.over { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---------- dialogs ---------- */
.dlg { border: 0; border-radius: 14px; padding: 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow); max-width: 480px; width: calc(100% - 32px); }
.dlg::backdrop { background: rgba(10, 12, 15, .5); }
.dlg-body { padding: 20px; display: grid; gap: 14px; }
.dlg h2 { margin: 0; font-size: 17px; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.layer-key { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.layer-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.note { font-size: 12px; color: var(--accent); margin: 0; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.steps li { color: var(--text); }
.steps li span { color: var(--muted); }

@media (max-width: 900px) {
  .inspector { width: 250px; }
  .topbar { grid-template-columns: auto 1fr auto; }
  .name-input { max-width: 130px; }
}

/* ---- saved designs ------------------------------------------------------ */
/* A list of things you made, not a control panel: the name leads, the date
   trails behind it quietly, and the delete stays out of the way until the row
   is under the pointer. */
.row-actions { display: flex; gap: 6px; }
.row-actions .wide { flex: 1; }

.design-list {
  list-style: none; margin: 2px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.design {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
}
.design:hover { border-color: var(--line-strong); }
.design.open { border-color: var(--accent); background: var(--accent-soft); }

.design-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 4px 7px 9px; text-align: left; font: inherit; color: inherit;
}
.design-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.design-when { font-size: 11px; color: var(--muted); }

.design .icon-btn { opacity: 0; margin-right: 4px; }
.design:hover .icon-btn, .design .icon-btn:focus-visible { opacity: 1; }

.warn-line {
  margin: 0; font-size: 12px; color: var(--danger);
}

/* ---- save dialog -------------------------------------------------------- */
.field-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.name-field {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
  border: 1.5px solid var(--line-strong); border-radius: 9px;
  background: var(--surface); color: var(--text);
}
.name-field:focus { outline: none; border-color: var(--accent); }

/* The gallery can hold a lot of rows; the dialog scrolls rather than growing
   past the bottom of the screen. */
#filesDlg .design-list { max-height: 46vh; overflow-y: auto; }

/* ---- three actions, three weights --------------------------------------- */
/* Export, Save and the gallery are not equal, so they must not look equal.
   Export is the finish line and keeps the filled accent. Save is the same
   family one step down - clearly related, clearly not the main event. The
   gallery is navigation rather than an action, so it stays quietest of all.
   One hue throughout: a second colour here would be three shouting at once. */
.soft {
  border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--accent);
  font: 600 13px/1 inherit; padding: 9px 14px; border-radius: 8px; cursor: pointer;
}
.soft:hover { filter: brightness(0.97); }

.quiet { display: inline-flex; align-items: center; gap: 6px; }
.quiet svg { width: 14px; height: 14px; opacity: 0.75; }

/* ---- three actions, three weights --------------------------------------- */
/* Export, Save and the gallery are not equal, so they must not look equal.
   Export is the finish line and keeps the filled accent. Save is the same
   family one step down. The gallery is navigation rather than an action, so it
   stays quietest. One hue throughout: a second colour would be three shouting
   at once. */
.soft {
  border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--accent);
  font: 600 13px/1 inherit; padding: 9px 14px; border-radius: 8px; cursor: pointer;
}
.soft:hover { filter: brightness(0.97); }

.quiet { display: inline-flex; align-items: center; gap: 6px; }
.quiet svg { width: 14px; height: 14px; opacity: 0.75; }

/* ---------- phone ---------- */
/* The side-by-side layout stops working well below 640px: the stage collapses
   to a sliver and the top bar's three columns run off the edge. So stack it -
   preview on top at the full width of the screen, settings in a scrolling
   panel underneath - and give the top bar two rows so nothing collides.
   Nothing here touches the tablet (900px) or desktop layout. */
@media (max-width: 640px) {
  /* top bar: brand and view tabs share row one, the buttons take row two. */
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand   mid"
      "actions actions";
    gap: 6px 8px;
    padding: 6px 10px;
  }
  .brand { grid-area: brand; gap: 6px; }
  .midbar { grid-area: mid; }
  .actions { grid-area: actions; flex-wrap: wrap; row-gap: 6px; gap: 6px; }

  .logo { font-size: 16px; }
  /* 16px, not 14. Safari zooms the whole page when a field under 16px takes
     focus, and the layout that was just fitted into 375px is then wider than
     the screen. This field is written with no type attribute, so the
     input[type=text] rule that carries 16px never reached it. */
  .name-input { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 16px; }
  /* The autosave indicator - Saving... / Saved. Dropped on a phone for room,
     and that is a real loss rather than a duplicate of the Save button: Save
     only opens the dialog and never reports autosave state. The top bar is
     already two rows tall here, so the room wins. */
  .status { display: none; }


  .icon-btn { width: 38px; height: 38px; font-size: 16px; }
  .primary, .ghost, .soft { padding: 11px 14px; }

  /* Icon only - the label "Reka bentuk saya" is the widest thing in the row
     and the folder icon carries the same meaning. */
  #filesBtn {
    width: 38px; height: 38px; padding: 0;
    justify-content: center; font-size: 0;
  }
  #filesBtn svg { width: 18px; height: 18px; }

  /* ---- stacked layout ---- */
  .layout { flex-direction: column; }

  /* The tool rail becomes a strip across the top of the preview. */
  .tools {
    width: auto; flex: none; flex-direction: row; align-items: center;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 4px 8px; gap: 4px; overflow-x: auto;
  }
  .tool { flex: none; min-width: 54px; padding: 7px 4px; }
  .tool-spacer { flex: 1 0 8px; }

  /* The size is already spelled out in the top bar - "51 x 90 mm, Falcata 3 mm"
     - so on a phone the witness lines are a second copy of a number that is
     already on screen, and they land on the hint box telling people the contact
     details are on the back. That hint is worth more: it is the only thing that
     says the tag turns round. */
  .dim-overlay { display: none; }


  .stage {
    flex: 5 1 0;
    min-height: 240px;
    /* dimension arrows are drawn outside the drawing box; on a phone the
       settings panel is directly below them, so clip. */
    overflow: hidden;
  }

  /* The face picker is wider than a phone; let it scroll inside the stage
     rather than pushing the page sideways. */
  .faces {
    left: 8px; right: 8px; transform: none;
    max-width: none; justify-content: flex-start;
    overflow-x: auto; border-radius: 10px;
  }
  /* Compact enough that a lidded box's seven faces still fit without a
     sideways scroll inside the strip. */
  .face { flex: none; min-width: 44px; padding: 5px 4px 6px; gap: 4px; font-size: 10px; }
  .face-ico { width: 24px; height: 24px; }
  .face-ico svg { width: 22px; height: 22px; }
  .face-sep { margin: 4px 3px; }
  /* Bottom-centre puts the hint straight over the box and its dimension
     labels once the stage is only phone-wide, so it moves to the top left,
     under the backdrop picker and clear of the lid button. */
  .inspector {
    flex: 4 1 0;
    width: auto;
    min-height: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 10px 12px 28px;
    -webkit-overflow-scrolling: touch;
  }
  .insp-title { margin: 2px 0 8px; }

  /* ---- finger-sized controls ---- */
  .group > summary { padding: 14px 12px; }
  input[type="text"], input[type="number"], select, textarea {
    /* 16px also stops iOS zooming the page when a field takes focus. */
    font-size: 16px; padding: 10px 11px;
  }
  .seg button { padding: 12px 4px; font-size: 13px; }
  .cat-tabs button { padding: 9px 13px; }
  .face-opt { min-height: 48px; }
  input[type="range"] { height: 28px; }

  /* The popover is placed to the right of its tool button, which worked while
     the tools were a left-hand rail; in a top strip it lands off the screen.
     On a phone it becomes a sheet across the bottom instead - the inline
     left/top the script writes have to be overridden for that. */
  .popover {
    left: 8px !important;
    right: 8px;
    top: auto !important;
    bottom: 8px;
    max-width: none;
    max-height: 55vh;
    overflow-y: auto;
  }
  .shape-list button { padding: 11px 9px; }

  /* ---- dialogs ---- */
  /* A row of four or five export buttons is wider than the screen, so the row
     wraps into pairs instead of pushing the primary action off the edge. */
  .dlg-body { padding: 16px; gap: 12px; }
  .dlg-actions { flex-wrap: wrap; gap: 8px; }
  .dlg-actions button { flex: 1 1 42%; min-width: 0; }
  .dlg-actions .ghost.wide { padding: 11px 12px; }
  .layer-key { flex-wrap: wrap; gap: 6px 14px; }
  #filesDlg .design-list { max-height: 40vh; }
}


/* ---------- tag generator ---------- */

/* The centre of the top bar carries the view tabs, with the size readout beside
   them - the one number somebody checks over and over while they work. */
.midbar { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }

.viewtoggle {
  display: inline-flex; flex: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
}
.vt {
  border: 0; background: transparent; color: var(--muted);
  font: 600 13px/1 inherit; padding: 7px 14px; border-radius: 6px; cursor: pointer;
  white-space: nowrap;
}
.vt[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.vt[hidden] { display: none; }

/* The one place the tool says the back of the tag is reachable. Top left, clear
   of the dimension labels and of the Front / Back strip along the bottom. */
.stage-hint {
  /* Clear of the backdrop swatches, which sit at left: 14px and are about 68px
     wide. They were added after this hint and landed straight on top of its
     first words. */
  position: absolute; left: 92px; top: 10px; margin: 0;
  max-width: min(280px, calc(100% - 104px));
  font: 500 11.5px/1.35 inherit; color: var(--muted);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px;
  pointer-events: none;
}
.stage-hint[hidden] { display: none; }

.readout {
  font: 600 12px/1 inherit; color: var(--muted); white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px;
  /* The centre column is the one that has to give: the project name and the
     buttons either side of it are both interactive, and a pill that grows
     until it slides underneath them is worse than one that is clipped. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* Under about a laptop width there is genuinely no room for the readout beside
   the tabs, and the same two numbers are in the Numbers panel a scroll away.
   The tabs stay: they are the only way to change view. */
@media (max-width: 1000px) { .readout { display: none; } }
@media (max-width: 640px) { .readout { display: block; } }

/* Eight shapes want narrower cards than the three the Box Maker shows. */
.cards.cards-6 { grid-template-columns: repeat(4, 1fr); gap: 5px; }
.cards.cards-6 .card { padding: 5px 3px 6px; font-size: 10.5px; gap: 3px; }
.cards.cards-6 .card svg { height: 40px; }

/* Five ready designs, three across. Taller art than the shape cards, because
   these are drawn at their own proportions - a 90 x 55 staff tag and a 65 x 105
   travel tag have to be told apart at a glance, and a squat box flattens that
   difference to nothing. The label wraps rather than being cut: "Save the date"
   is three words and abbreviating it would lose which of the five it is. */
.cards.presets { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cards.presets .card { padding: 5px 4px 7px; font-size: 11px; line-height: 1.25; }
.cards.presets .card svg { height: 52px; }
.cards.presets .card .art { padding: 4px 3px; margin-bottom: 6px; }

.stat b.bad { color: var(--danger); }

/* Front / Back. Two of them, so they get room rather than being squeezed into
   the seven-across strip a lidded box needs. */
.faces .face { min-width: 78px; }

@media (max-width: 640px) {
  /* Three rows on a phone: the readout is 25 characters and will not share a
     line with the project name without one of them being cut off. */
  .topbar {
    grid-template-areas:
      "brand   brand"
      "mid     mid"
      "actions actions";
  }
  /* The tabs and the readout share the middle row: two compact tabs plus a
     pill of about twenty-five characters comes to roughly 320px, which fits
     the 355px a 375px phone leaves once the bar is padded. The readout is the
     half that gives if it does not - it is information, the tabs are a
     control. */
  .midbar { justify-content: flex-start; gap: 8px; }
  .vt { padding: 9px 10px; font-size: 12px; }
  .readout { font-size: 11px; padding: 5px 9px; min-width: 0; flex: 0 1 auto; }
  /* Under half the stage, so it stops short of the middle - which is where the
     width dimension puts its label, the tag being centred in the pane. It is a
     hint, not a banner across the preview. */
  .stage-hint {
    /* Under the backdrop swatches, not beside them. The swatch control sits at
       the top-left and on a phone there is not enough room left over for a
       sentence next to it - the hint lost its first words behind them. */
    left: 12px; top: 52px; font-size: 11px; padding: 4px 8px;
    max-width: calc(100% - 24px);
  }
  .cards.cards-6 { grid-template-columns: repeat(4, 1fr); }
  .clip-grid { grid-template-columns: repeat(6, 1fr); max-height: none; }
  .clip-art svg { height: 34px; }
  .faces .face { min-width: 66px; }
}