/* Urban QR generator: layout and page styles. Tokens: ds/tokens.css; components:
   ds/bundle.css. Layout and controls from design system/ui-handoff (one dark stage, light
   floating cards). Only tokens here, except the cards' stronger shadow (the token shadows are
   too soft on the dark stage, per the handoff) and the white plate behind the empty grid. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; padding: 0; background: var(--plate-100); }   /* (bundle.css pads the body) */
[hidden] { display: none !important; }
:where(button, a, input):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app { position: relative; height: 100vh; overflow: hidden; background: var(--plate-100); color: var(--ink);
       font-family: var(--font-sans); font-size: 16px; line-height: 24px; }
.viewer { position: absolute; inset: 0; }
.stagebox { position: absolute; inset: 0; background: var(--plate-100); }
.canvas { position: absolute; inset: 0; }
.canvas canvas { display: block; }
.stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
         padding: 80px 32px 32px 448px; pointer-events: none; color: var(--ink); }

.float { background: var(--plate-200); color: var(--ink); border-radius: var(--radius-2);
         box-shadow: 0 1px 0 0 rgba(0, 0, 0, .25), 0 20px 44px -16px rgba(0, 0, 0, .65); }
@keyframes uq-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the empty stage, before the first build */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; max-width: 420px; }
.empty-grid { padding: var(--space-4); border-radius: var(--radius-2); background: #f5f3ee; opacity: .22; }   /* the white plate */
.empty-title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink); }
.empty-text { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.empty-note { margin: 4px 0 0; font: var(--text-spec); color: var(--ink-faint); }   /* (the city tools: engine.js) */

/* ---------- the steps card ---------- */
.panel { position: absolute; z-index: 6; top: 16px; left: 16px; bottom: 16px; width: 400px;
         display: flex; flex-direction: column; overflow: hidden; }
.tabs { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 16px 16px 0; }
.tab { appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
       padding: 0 0 12px; border: 0; background: transparent; color: var(--ink-muted); font: inherit;
       text-align: left; cursor: pointer; }
.tab .tbar { align-self: stretch; height: 6px; background: var(--plate-000); box-shadow: inset 0 0 0 1px var(--line);
             transition: background-color 220ms var(--uq-ease-out); }
.tab .tnum { font: 700 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.tab .ttitle { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.tab .tsub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
             font: 400 11px/14px var(--font-mono); color: var(--ink-muted); }
.tab:hover .ttitle { color: var(--ink); }
.tab.done .tbar { background: var(--ink); box-shadow: none; }
.tab.done .ttitle { color: var(--ink); }
.tab.active .tbar { background: var(--block-orange); box-shadow: none; }
.tab.active .tnum { color: var(--block-orange-shade); }
.tab.active .ttitle { color: var(--ink); font-weight: 700; }
.tab.lock { cursor: not-allowed; opacity: .5; }
.tab.lock:hover .ttitle { color: var(--ink-muted); }
.pbody { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin;
         scrollbar-color: var(--line-strong) transparent; border-top: 1px solid var(--line); }
.pane { display: flex; flex-direction: column; gap: 20px; padding: 20px 12px 20px 20px;
        animation: uq-in-fwd 380ms var(--uq-ease-out) both; }
.pane.back { animation-name: uq-in-back; }
@keyframes uq-in-fwd { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes uq-in-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.loading { margin: 0; color: var(--ink-muted); font-size: 14px; }

/* the bottom bar: the change strip and the main button (or the loader) */
.pundo { flex: none; border-top: 1px solid var(--line); background: var(--plate-100); }
.pcta { display: flex; flex-direction: column; padding: 0 20px; }
.foot { margin: 16px 0 20px; animation: uq-fade 260ms var(--uq-ease-out) both; }
.cta .uq-btn { width: 100%; min-height: 52px; font-size: 16px; }
.loaderbox { display: flex; align-items: center; justify-content: center; min-height: 52px; }
.perror { margin: 16px 0 0; color: var(--danger); font-size: 14px; line-height: 20px; }
.changes { display: flex; align-items: center; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--line);
           background: color-mix(in srgb, var(--block-yellow) 18%, var(--plate-200));
           font: 400 13px/18px var(--font-mono); color: var(--ink); animation: uq-fade 260ms var(--uq-ease-out) both; }
.changes .dot { width: 6px; height: 6px; background: var(--block-yellow-shade); flex: none; }
.changes-text { flex: 1; min-width: 0; }
.undo { appearance: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; border: 0;
        background: transparent; padding: 8px 0; color: var(--link); font: 600 14px/20px var(--font-sans); cursor: pointer; white-space: nowrap; }
.undo:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- tab 01: scan info ---------- */
.scan-type { display: flex; flex-direction: column; gap: 8px; }
.qpicker { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--radius-1); background: var(--plate-000); }
.qchip { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 0;
         border-radius: 2px; background: transparent; color: var(--ink-muted); font: 600 13px/16px var(--font-sans);
         cursor: pointer; white-space: nowrap; }
.qchip:hover { color: var(--ink); }
.qchip.sel { background: var(--plate-200); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.glyph { display: grid; grid-template-columns: repeat(4, 3px); grid-auto-rows: 3px; gap: 1px; }
.c-blue { background: var(--block-blue); } .c-yellow { background: var(--block-yellow); }
.c-orange { background: var(--block-orange); } .c-red { background: var(--block-red); }
.c-green { background: var(--block-green); } .c-pink { background: var(--block-pink); }
.c-off { background: transparent; }
.qdesc { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.pane .uq-field { min-width: 0; }
.pw { position: relative; }
.pw input { padding-right: 52px; }
.pw-eye { position: absolute; right: 4px; top: 26px; width: 40px; height: 36px; display: grid; place-items: center;
          border: 0; border-radius: var(--radius-1); background: transparent; color: var(--ink-muted); cursor: pointer; }
.pw-eye:hover { color: var(--ink); background: var(--plate-000); }

/* ---------- settings rows (tab 02 and the layer panels) ---------- */
.srow { display: flex; flex-direction: column; gap: 6px; }
.slabel { font-size: 14px; line-height: 20px; font-weight: 600; }
.svalue { margin-left: auto; font: 400 13px/20px var(--font-mono); color: var(--ink-muted); }
.shint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.shead { color: var(--ink-muted); padding-top: 4px; }
.smono { font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.num-in { position: relative; }
.num-in input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 52px 10px 14px; background: var(--plate-200);
                color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--radius-1);
                font: 400 15px/20px var(--font-mono); }
.num-in input:hover { border-color: var(--ink-muted); }
.num-unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 400 13px/20px var(--font-mono);
            color: var(--ink-muted); pointer-events: none; }
.volume { display: flex; justify-content: space-between; gap: 12px; font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.seedrow { display: flex; align-items: flex-end; gap: 12px; }
.seedrow .srow { flex: 1; }
.seedrow .uq-btn { margin-bottom: 26px; flex: none; }
.level-field { position: relative; }
.label-row { display: flex; align-items: center; gap: 4px; }
button.info { display: grid; place-items: center; border: none; background: none; padding: 2px; color: var(--ink-muted);
              cursor: pointer; border-radius: var(--radius-1); }
button.info:hover { color: var(--ink); }
input[type=range] { width: 100%; margin: 0; height: 24px; accent-color: var(--ink); }
.slider { position: relative; display: flex; }
.slider .tick { position: absolute; bottom: -2px; width: 1px; height: 5px; background: var(--ink-muted);   /* the default step */
                left: calc(8px + (100% - 16px) * var(--at)); }
.ends { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.tip { display: none; position: absolute; z-index: 30; left: 0; right: 0; top: 26px; padding: 8px 10px; background: var(--ink);
       color: var(--on-ink); border-radius: var(--radius-1); font-size: 13px; line-height: 18px; box-shadow: var(--shadow-lift); }
.level-field.tip-open .tip { display: block; }
@media (hover: hover) { .label-row:has(.info:hover) ~ .tip { display: block; } }
.label-row:has(.info:focus-visible) ~ .tip { display: block; }

/* ---------- tab 03: the layers, each a split button with its settings inline ---------- */
.layers { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.litem { flex: none; border-radius: var(--radius-1); transition: background-color 200ms var(--uq-ease-out); }
.lrow { display: flex; align-items: stretch; gap: 2px; border-radius: var(--radius-1); }
.lrow:hover { background: var(--plate-100); }
.litem.on .lrow { background: var(--plate-000); }
.litem.tuning { background: var(--plate-100); box-shadow: inset 0 0 0 1px var(--line); }
.lmain { appearance: none; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px;
         border: 0; border-radius: var(--radius-1); background: transparent; color: var(--ink-muted);
         font: 600 14px/20px var(--font-sans); text-align: left; cursor: pointer; transition: color 160ms; }
.lmain:disabled { cursor: progress; }
.litem.on .lmain { color: var(--ink); }
.litem.on .lpx { color: var(--block-orange-shade); }
.lpx { flex: none; display: inline-flex; transition: transform 320ms var(--uq-ease-drop); }
.litem.on .lpx { transform: scale(1.1); }
.lname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltuned { width: 6px; height: 6px; background: var(--block-yellow-shade); flex: none; }
.larrow { appearance: none; flex: none; display: grid; place-items: center; width: 40px; border: 0; border-left: 1px solid var(--line);
          border-radius: 0 var(--radius-1) var(--radius-1) 0; background: transparent; color: var(--ink-muted); cursor: pointer;
          transition: background-color 160ms, color 160ms; }
.larrow:hover { color: var(--ink); background: var(--plate-000); }
.larrow.sel { background: var(--block-orange); color: var(--on-orange); border-left-color: transparent; }
.lset { display: flex; flex-direction: column; gap: 14px; padding: 8px 12px 16px; overflow: hidden;
        animation: uq-expand 380ms var(--uq-ease-out) both; }
@keyframes uq-expand { from { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } to { max-height: 2400px; opacity: 1; } }
.lset-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-muted); }
.lset-tools { display: flex; align-items: center; gap: 2px; }
.lreset { appearance: none; border: 0; background: transparent; padding: 8px; color: var(--link); font: 600 13px/16px var(--font-sans); cursor: pointer; }
.lclose { appearance: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-1);
          background: transparent; color: var(--ink); cursor: pointer; }
.lclose:hover { background: var(--plate-000); }
.swatches { display: grid; grid-template-columns: repeat(8, 28px); gap: 6px; padding-top: 4px; }   /* dark row over light row */
.swatch { appearance: none; width: 28px; height: 28px; padding: 0; border-radius: var(--radius-0); border: 2px solid transparent;
          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); cursor: pointer; }
.swatch.sel { border-color: var(--plate-200); box-shadow: 0 0 0 2px var(--ink); }

/* ---------- the colour key (beside the steps card) ---------- */
.legend { position: absolute; left: 432px; top: 16px; z-index: 3; max-width: 320px; padding: 12px 14px;
          animation: uq-fade 320ms var(--uq-ease-out) both; }
.legend-in { display: flex; flex-direction: column; gap: 8px; animation: uq-swap 320ms var(--uq-ease-out) both; }
@keyframes uq-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.key-title { color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lchip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; background: var(--plate-000);
         font: 700 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.lsw { width: 10px; height: 10px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.lcount { font-weight: 400; letter-spacing: 0; color: var(--ink-muted); }

/* ---------- the build card (bottom right) ---------- */
.actions { position: absolute; right: 16px; bottom: 16px; z-index: 5; width: 340px; display: flex;
           flex-direction: column; gap: 12px; padding: 16px 20px 20px; animation: uq-fade 320ms var(--uq-ease-out) both; }
/* the dock (bottom right): the thank-you after the first download above the build card */
.dock { position: absolute; right: 16px; bottom: 16px; z-index: 5; width: 340px; display: flex; flex-direction: column; gap: 12px; }
.dock .actions { position: static; width: auto; }
.thanks { display: flex; align-items: flex-start; gap: 8px; padding: 14px 12px 14px 20px; animation: uq-thanks-in 320ms var(--uq-ease-out) both; }
.thanks-text { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.thanks-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.thanks-ways { display: flex; gap: 8px; margin-top: 6px; }
.thanks-ways .uq-btn { text-decoration: none; }
.thanks-close { appearance: none; border: 0; background: none; color: var(--ink-muted); padding: 6px; cursor: pointer; border-radius: var(--radius-1); }
.thanks-close:hover, .thanks-close:focus-visible { color: var(--ink); }
@keyframes uq-thanks-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .thanks { animation: none; } }
.buildcard { display: flex; flex-direction: column; gap: 12px; }
.bc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--ink-muted); }
.bc-size { font: 400 12px/16px var(--font-mono); }
.bc-checks { display: flex; align-items: center; gap: 12px; }
.bcheck { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ok); }
.bcheck.bad { color: var(--danger); }
.buildcard.stale .bcheck { font-size: 14px; color: var(--ink-muted); }
.buildcard.stale .bcheck.bad { color: var(--danger); }
.binfo { position: relative; flex: none; }
.info-btn { appearance: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
            border: 1.5px solid var(--line-strong); background: var(--plate-200); color: var(--ink); cursor: help; }
.info-btn:hover, .info-btn:focus-visible { border-color: var(--ink); }
.ptip { display: none; position: absolute; left: -16px; bottom: calc(100% + 28px); width: 340px; padding: 16px;
        flex-direction: column; gap: 8px; background: var(--plate-200); color: var(--ink); border-radius: var(--radius-2);
        box-shadow: var(--shadow-lift), 0 0 0 1px var(--line); }
.ptip .uq-mono-label { color: var(--ink-muted); }
.ptip-sub { padding-top: 8px; }
.ptip .uq-specs dt, .ptip .uq-specs dd { padding: 5px 0; }   /* (denser: two lists) */
.ptip { max-height: calc(100vh - 140px); overflow-y: auto; }
.binfo:hover .ptip, .binfo:focus-within .ptip { display: flex; }
.dl { display: flex; flex-direction: column; gap: 8px; }
.dl .uq-btn { width: 100%; }
.dl-small { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dl-small .uq-btn { padding: 0 var(--space-2); white-space: nowrap; }

/* ---------- the camera (top right); below 1100 px one icon button with a menu ---------- */
.camwrap { position: absolute; top: 16px; right: 16px; z-index: 4; }
.cams-full { display: flex; gap: 4px; padding: 4px; }
.cams-mini { display: none; position: relative; }
.cam { appearance: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0;
       border-radius: var(--radius-1); background: transparent; color: var(--ink-muted); font: 600 14px/20px var(--font-sans);
       cursor: pointer; white-space: nowrap; }
.cam:hover { background: var(--plate-100); color: var(--ink); }
.cam.sel { background: var(--ink); color: var(--on-ink); }
.cam.menu { width: 100%; text-align: left; }
.cam-icon { appearance: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0;
            border-radius: var(--radius-2); color: var(--ink); cursor: pointer; }
.cam-menu { position: absolute; top: 52px; right: 0; display: flex; flex-direction: column; gap: 2px; min-width: 160px; padding: 4px; }
@media (max-width: 1100px) { .cams-full { display: none; } .cams-mini { display: block; } }
/* how to move the city: the "i" below the camera buttons, its list on hover, focus or a tap */
.camwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ctlinfo { position: relative; }
.ctlinfo .info-btn { box-shadow: var(--shadow-card); }
.ctltip { display: none; position: absolute; top: 40px; right: 0; width: 300px; padding: 16px; flex-direction: column; gap: 12px;
          background: var(--plate-200); color: var(--ink); border-radius: var(--radius-2); box-shadow: var(--shadow-lift), 0 0 0 1px var(--line); }
.ctlinfo:hover .ctltip, .ctlinfo:focus-within .ctltip, .ctlinfo.open .ctltip { display: flex; }
.ctlgroup { display: flex; flex-direction: column; gap: 4px; }
.ctlgroup .uq-mono-label { color: var(--ink-muted); }
.ctltip .uq-specs dt, .ctltip .uq-specs dd { padding: 5px 0; }
.ctlfoot { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
/* the touch hint (viewer.js): a one-finger swipe over the city */
.touch-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
              padding: 10px 16px; border-radius: 999px; background: rgba(29, 32, 36, 0.86); color: #f5f3ee;
              font: 600 15px/20px var(--font-sans); white-space: nowrap; opacity: 0; transition: opacity 220ms ease; }
.touch-hint.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .touch-hint { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .pane, .foot, .legend, .legend-in, .actions, .changes, .lset { animation: none; }
  .tab .tbar, .lpx, .larrow, .litem { transition: none !important; }
}

/* phones and narrow windows: the page scrolls; steps card, viewer, colour key, build card */
@media (max-width: 900px) {
  .app { height: auto; min-height: 100vh; overflow: visible; display: flex; flex-direction: column; }
  .panel { position: relative; order: -1; top: auto; left: auto; bottom: auto; width: auto; margin: 12px; }
  .pbody { overflow: visible; }
  .viewer { position: relative; inset: auto; display: flex; flex-direction: column; }
  .stagebox { position: relative; inset: auto; min-height: 70vh; }
  .stage { padding: 72px 16px 16px; }
  .legend { position: relative; left: auto; top: auto; margin: 0 16px 16px; max-width: none; }
  .actions { position: relative; right: auto; bottom: auto; width: auto; margin: 0 16px 16px; }
  .dock { position: relative; right: auto; bottom: auto; width: auto; margin: 0 16px 16px; }
  .dock .actions { margin: 0; }
}

/* a link-styled button (the error's "Fix scan info") */
.uq-link { appearance: none; border: 0; background: transparent; padding: 0; color: var(--link);
           font: 600 14px/20px var(--font-sans); cursor: pointer; }
.uq-link:hover { text-decoration: underline; text-underline-offset: 3px; }