/*
SPDX-License-Identifier: AGPL-3.0-or-later
Copyright (C) 2026 Mehedi Maruf. Licence contact: license@mehedimaruf.com
Can't reach license@mehedimaruf.com?
The domain probably expired because HE's TOO BROKE TO RENEW IT.
Please don't take it personally. Try blessedevil@duck.com or mehedimaruf@duck.com instead,
and maybe BUY HIM a COFFE or a DOMAIN. Thank you... :')
Licensed under the GNU AGPL v3 or any later version; see <https://www.gnu.org/licenses/>. No warranty.
The mark images in site/assets/ are proprietary artwork (see LICENSE-ASSETS.md) and are not covered by the AGPL.
*/
/* ============================================================================
   1. DESIGN TOKENS
   Light is the base. Dark is applied when the system asks for it (unless the
   user has explicitly chosen light), and again when the user explicitly picks
   dark, so the toggle wins in both directions.
   ========================================================================== */
:root {
  --bg:            #f6efe3;
  --stage:         #ebe0cf;
  --surface:       #fffaf0e0;
  --surface-solid: #fffaf0;
  --border:        #00000014;
  --border-strong: #0000002e;
  --text:          #2a1117;
  --text-dim:      #6b5459;
  --text-faint:    #98868a;
  --accent:        #7a0f24;
  --accent-hover:  #5f0b1c;
  --accent-fg:     #ffffff;
  --accent-soft:   #7a0f241f;
  --ring:          #7a0f24;
  --outline:          #a8832e;
  --scrim:         rgba(246,239,227,.72);
  --track:         #00000014;
  --danger:        #d92d20;
  --danger-soft:   #d92d201a;
  --shadow-sm:     0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-lg:     0 8px 12px -4px rgba(16,24,40,.08), 0 20px 40px -8px rgba(16,24,40,.16);
  --shadow-xl:     0 16px 24px -8px rgba(16,24,40,.16), 0 32px 64px -12px rgba(16,24,40,.28);
  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     16px;
  --panel-w:       302px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0d0609;
    --stage:         #150a0f;
    --surface:       #1d1015f2;
    --surface-solid: #1d1015;
    --border:        #ffffff14;
    --border-strong: #ffffff2e;
    --text:          #f3eae4;
    --text-dim:      #bba9ad;
    --text-faint:    #806e74;
    --accent:        #d8b478;
    --accent-hover:  #e6c58f;
    --accent-fg:     #1a1208;
    --accent-soft:   #d8b4782b;
    --ring:          #d8b478;
    --outline:          #d8b478;
    --scrim:         rgba(13,6,9,.74);
    --track:         #ffffff1a;
    --danger:        #ff6b5e;
    --danger-soft:   #ff6b5e1f;
    --shadow-sm:     0 1px 2px rgba(0,0,0,.4);
    --shadow-lg:     0 8px 12px -4px rgba(0,0,0,.4), 0 20px 40px -8px rgba(0,0,0,.55);
    --shadow-xl:     0 16px 24px -8px rgba(0,0,0,.5), 0 32px 64px -12px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:            #0d0609;
  --stage:         #150a0f;
  --surface:       #1d1015f2;
  --surface-solid: #1d1015;
  --border:        #ffffff14;
  --border-strong: #ffffff2e;
  --text:          #f3eae4;
  --text-dim:      #bba9ad;
  --text-faint:    #806e74;
  --accent:        #d8b478;
  --accent-hover:  #e6c58f;
  --accent-fg:     #1a1208;
  --accent-soft:   #d8b4782b;
  --ring:          #d8b478;
  --outline:          #d8b478;
  --scrim:         rgba(13,6,9,.74);
  --track:         #ffffff1a;
  --danger:        #ff6b5e;
  --danger-soft:   #ff6b5e1f;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:     0 8px 12px -4px rgba(0,0,0,.4), 0 20px 40px -8px rgba(0,0,0,.55);
  --shadow-xl:     0 16px 24px -8px rgba(0,0,0,.5), 0 32px 64px -12px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ============================================================================
   2. RESET / BASE
   ========================================================================== */
* { box-sizing: border-box; }
/* Class rules below set `display`, which would otherwise beat the [hidden]
   attribute. Keep the attribute authoritative. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  font: 400 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================================
   3. STAGE + TOP BAR
   ========================================================================== */
#stage {
  position: fixed; inset: 0;
  /* Explicit size is required, not cosmetic: <canvas> is a replaced element,
     so `width:auto` with inset:0 resolves to the intrinsic (attribute) size
     rather than stretching. Without this, writing stage.width from
     clientWidth grows the element and the ResizeObserver feeds back on
     itself, exploding the layout on any display where DPR is not 1. */
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  background: var(--stage);
}

.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: linear-gradient(var(--scrim), transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand { position: relative; margin-right: auto; min-width: 0; }

/* A real <button> for keyboard and screen-reader access, but visually inert
   until interaction so it does not compete with the actual actions. */
.brand-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 8px 5px 6px; min-width: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s;
}
.brand-btn:hover, .brand-btn[aria-expanded="true"] {
  background: var(--surface-solid); border-color: var(--border-strong);
}
.brand-mark { display: block; flex: none; border-radius: 6px; }
.brand-name { font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.brand-credit {
  font-size: 10px; color: var(--text-faint); opacity: .82;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .01em;
}
.brand-credit i { font-style: normal; opacity: .55; margin: 0 1px; }
.brand-chev {
  flex: none; color: var(--text-faint);
  opacity: 0; transition: opacity .15s, transform .2s;
}
.brand-btn:hover .brand-chev, .brand-btn[aria-expanded="true"] .brand-chev { opacity: .8; }
.brand-btn[aria-expanded="true"] .brand-chev { transform: rotate(180deg); }

/* The padding-top is a deliberate transparent bridge: the menu sits inside
   .brand, so the pointer never leaves the hover region crossing the gap and
   the menu cannot flicker shut mid-transit. */
.brand-menu { position: absolute; z-index: 45; top: 100%; left: 0; padding-top: 6px; }
.brand-menu-inner {
  min-width: 232px; padding: 6px;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  animation: pop .13s ease-out;
}
.brand-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 7px;
  color: inherit; text-decoration: none; font-size: 13px;
  cursor: pointer; transition: background .12s;
}
.brand-item:hover { background: var(--track); }
.brand-item svg { flex: none; color: var(--text-faint); }
.brand-item:hover svg { color: var(--accent); }
.brand-item b { display: block; font-weight: 500; }
.brand-item small { display: block; color: var(--text-faint); font-size: 11px; }

/* ============================================================================
   4. GENERIC COMPONENTS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  font-weight: 500; font-size: 13px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s, border-color .15s, transform .06s, opacity .15s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--text-faint); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary {
  background: var(--accent); border-color: transparent; color: var(--accent-fg);
  font-weight: 600;
}
.btn.primary:hover { background: var(--accent-hover); }
.btn.icon { width: 36px; padding: 0; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--track); border-color: transparent; }

.readout { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.field + .field { margin-top: 14px; }
.field-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 7px; font-size: 13px; color: var(--text-dim);
}
.field-label b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.hint { font-size: 11px; color: var(--text-faint); margin: 7px 0 0; line-height: 1.4; }
.hint.warn { color: var(--danger); }

/* --- Slider ------------------------------------------------------------- */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; margin: 0;
  background: transparent; cursor: pointer; display: block;
}
.slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background:
    linear-gradient(var(--accent), var(--accent)) left center / var(--fill, 50%) 100% no-repeat,
    var(--track);
}
.slider::-moz-range-track { height: 6px; border-radius: 99px; background: var(--track); }
.slider::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--accent); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px;
  border-radius: 50%; background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .12s;
}
.slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface-solid); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.slider:hover::-webkit-slider-thumb { transform: scale(1.12); }
.slider:active::-webkit-slider-thumb { transform: scale(1.02); box-shadow: 0 0 0 5px var(--accent-soft); }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--accent-soft); }
.slider:disabled { opacity: .4; cursor: not-allowed; }

/* --- Segmented control -------------------------------------------------- */
.seg { display: flex; gap: 2px; padding: 3px; background: var(--track); border-radius: var(--radius-sm); }
.seg.wrap { flex-wrap: wrap; }
.seg button {
  flex: 1; height: 28px; min-width: 0; padding: 0 6px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--text-dim); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: background .14s, color .14s;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] {
  background: var(--surface-solid); color: var(--text);
  font-weight: 600; box-shadow: var(--shadow-sm);
}
.seg button svg { flex: none; }

/* --- Number inputs / ratio pair ----------------------------------------- */
.num {
  width: 100%; min-width: 0; height: 38px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-solid); text-align: center;
  font-variant-numeric: tabular-nums;
}
.num:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* The Horizontal / [link] / Vertical trio. */
.dim-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.dim-pair .cap { font-size: 11px; color: var(--text-dim); margin-bottom: 5px; display: block; }
.link-btn {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-solid); color: var(--text-faint);
  cursor: pointer; transition: all .15s;
}
.link-btn:hover { border-color: var(--text-faint); color: var(--text); }
.link-btn[aria-pressed="true"] {
  background: var(--accent); border-color: transparent; color: var(--accent-fg);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- Mismatch chooser ---------------------------------------------------- */
.notice {
  margin-top: 12px; padding: 10px 11px;
  border: 1px solid var(--danger); border-radius: var(--radius-sm);
  background: var(--danger-soft);
}
.notice p { margin: 0 0 9px; font-size: 12px; color: var(--text); line-height: 1.4; }
.notice .seg { background: var(--surface-solid); }

/* --- Chips --------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 28px; padding: 0 11px; border-radius: 99px;
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: all .14s;
}
.chip[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}
:root[data-theme="dark"] .chip[aria-pressed="true"] { color: var(--accent-hover); }

/* --- Custom select ------------------------------------------------------- */
.select { position: relative; }
.select-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 44px;
  padding: 0 12px; cursor: pointer; text-align: left;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-solid); box-shadow: var(--shadow-sm);
  transition: border-color .15s;
}
.select-btn:hover { border-color: var(--text-faint); }
.select-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select-btn .tag {
  flex: none; min-width: 42px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
:root[data-theme="dark"] .select-btn .tag { color: var(--accent-hover); }
.select-btn .txt { flex: 1; min-width: 0; }
.select-btn .txt small { display: block; color: var(--text-faint); font-size: 11px;
                         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-btn .caret { flex: none; color: var(--text-faint); transition: transform .18s; }
.select-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Reparented to <body> and positioned in JS (positionFormatList) rather than
   anchored via CSS top/left — it lives inside a scrolling popover section, and
   an absolutely-positioned dropdown gets clipped by that ancestor's own
   scrollbox instead of floating above it. Fixed positioning + a body-level
   parent escapes that clipping entirely, regardless of any ancestor's
   overflow or stacking context. */
.select-list {
  position: fixed; z-index: 45;
  margin: 0; padding: 6px; list-style: none;
  max-height: min(360px, calc(100dvh - 90px)); overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  animation: pop .13s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.select-list li { display: flex; align-items: center; gap: 10px; padding: 10px 10px;
                  border-radius: 7px; cursor: pointer; }
.select-list li[aria-selected="true"] { background: var(--accent-soft); }
.select-list li.active { background: var(--track); }
.select-list li[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.select-list .tag {
  flex: none; min-width: 42px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--track); color: var(--text-dim);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
.select-list li[aria-selected="true"] .tag { background: var(--accent); color: var(--accent-fg); }
.select-list .txt { flex: 1; min-width: 0; font-size: 13px; }
.select-list .txt small { display: block; color: var(--text-faint); font-size: 11px; }

/* --- Colour swatch ------------------------------------------------------- */
.swatches { display: flex; align-items: center; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
          border: 1px solid var(--border-strong); padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 4px var(--accent); }
.swatch.custom { position: relative; overflow: hidden; display: inline-block; }
.swatch.custom input { position: absolute; inset: -6px; width: 200%; height: 200%;
                       border: 0; padding: 0; cursor: pointer; opacity: 0; }

/* ============================================================================
   5. DOCK CARDS  — collapsible, draggable panels
   ========================================================================== */
.dock {
  position: fixed; z-index: 15;
  width: var(--panel-w);
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: box-shadow .18s;
}
.dock.dragging { box-shadow: var(--shadow-xl); z-index: 25; transition: none; }
.dock.floating { border-color: var(--border-strong); }

.dock-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px;
  cursor: grab; user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.dock.dragging .dock-head { cursor: grabbing; }
.dock-head .grip { color: var(--text-faint); flex: none; opacity: .75; }
.dock-head h3 {
  flex: 1; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
}
.dock-head .readout { flex: none; }
.dock-head .chev { flex: none; color: var(--text-faint); transition: transform .2s; }
.dock[data-open="0"] .dock-head .chev { transform: rotate(-90deg); }
.dock[data-open="0"] .dock-head { padding-bottom: 11px; }
.dock-body { padding: 0 14px 14px; }
/* Collapsed hides the body — unless the card is being hover-peeked, which is a
   transient view that never touches the persisted data-open state. The chevron
   deliberately keeps pointing "collapsed" during a peek, so the card still
   reads as closed and the peek reads as temporary. */
.dock[data-open="0"]:not([data-peek="1"]) .dock-body { display: none; }
.dock[data-peek="1"] { border-color: var(--accent); }

/* A "flat" dock lives inside another container (the export popover) instead
   of floating free on the canvas: no position/shadow/blur/drag of its own,
   just a collapsible section with a border for separation. */
.dock.flat {
  position: static; width: auto;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-radius: 0; box-shadow: none;
}
.dock.flat + .dock.flat { border-top: 1px solid var(--border); }
.dock.flat .dock-head { cursor: pointer; touch-action: auto; }

/* ============================================================================
   6. EXPORT POPOVER
   ========================================================================== */
.export-pop {
  position: fixed; z-index: 35;
  top: 66px; right: 14px;
  width: var(--panel-w);
  max-height: calc(100dvh - 78px);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: pop .14s ease-out;
}
.pop-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 8px 12px 16px; border-bottom: 1px solid var(--border);
}
.pop-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
/* One scroll region for both sections, not one each — independent per-section
   scrollboxes were what clipped the format dropdown in the first place. */
.pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pop-body .dock.flat { flex: none; }
.pop-body .dock.flat .dock-body { padding: 12px 16px 16px; }
.pop-body .dock.flat .dock-head { padding: 12px 16px; }
.pop-foot {
  flex: none; padding: 14px 16px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.pop-foot .hint { margin: 0; }

/* ============================================================================
   7. ZOOM PILL / THEME DOCK / EMPTY STATE / TOAST
   ========================================================================== */
.zoombar {
  position: fixed; z-index: 15;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: 99px;
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.zoombar { left: 14px; bottom: 44px; }
.zoombar button {
  height: 32px; min-width: 32px; padding: 0 10px;
  border: 0; border-radius: 99px; background: transparent;
  color: var(--text-dim); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background .14s, color .14s;
}
.zoombar button:hover { background: var(--track); color: var(--text); }
.zoombar .level { min-width: 62px; font-variant-numeric: tabular-nums;
                  color: var(--text); font-weight: 600; }
.zoombar .sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 4px; }

.empty-state {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  text-align: center; padding: 24px; pointer-events: none;
}
.empty-state .ring {
  width: 132px; height: 132px; margin-bottom: 18px; border-radius: 50%;
  border: 2px dashed var(--text-faint);
  display: grid; place-items: center; color: var(--text-faint);
  transition: border-color .2s, color .2s, transform .2s;
}
.empty-state h1 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.empty-state p { margin: 0; color: var(--text-dim); font-size: 13px; }
.empty-state .btn { pointer-events: auto; margin-top: 16px; }
.empty-state kbd { font: inherit; font-size: 11px; padding: 1px 5px; border-radius: 4px;
                   border: 1px solid var(--border-strong); background: var(--track); }
body.dragover .empty-state .ring { border-color: var(--accent); color: var(--accent); transform: scale(1.05); }
.drop-veil {
  position: fixed; inset: 0; z-index: 50; display: none;
  border: 2px dashed var(--accent); border-radius: 4px;
  background: var(--accent-soft); pointer-events: none;
}
body.dragover .drop-veil { display: block; }

.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 60;
  transform: translate(-50%, 12px);
  display: flex; align-items: center; gap: 9px;
  padding: 10px 15px; max-width: min(440px, calc(100vw - 28px));
  font-size: 13px; opacity: 0; pointer-events: none;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { color: var(--danger); border-color: var(--danger); }

/* ============================================================================
   8. NARROW SCREENS — cards collapse into one scrolling sheet, no dragging
   ========================================================================== */
@media (max-width: 820px), (max-height: 620px) {
  #docks {
    position: fixed; left: 8px; right: 8px; bottom: 38px; z-index: 15;
    max-height: 58dvh; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 8px;
  }
  .dock { position: static !important; width: auto !important; }
  .dock-head { cursor: pointer; }
  .dock-head .grip { display: none; }
  .zoombar { bottom: auto; top: 62px; left: 8px; }
  .export-pop {
    left: 8px !important; right: 8px !important; top: auto !important; bottom: 38px !important;
    width: auto; max-height: 70dvh;
  }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================================
   9. BRAND UI (v0.3.0): logo-as-theme-button, living empty state
   ========================================================================== */
.brand { display: flex; align-items: center; gap: 2px; }
.logo-btn {
  position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.logo-btn:hover { background: var(--surface-solid); border-color: var(--border-strong); }
.logo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.logo-stack { position: relative; display: block; width: 28px; height: 28px; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.logo-btn:hover .logo-stack { transform: rotate(-10deg) scale(1.08); }
.logo-btn:active .logo-stack { transform: rotate(-24deg) scale(.92); }
.logo-stack .brand-mark { position: absolute; inset: 0; width: 28px; height: 28px; object-fit: contain; border-radius: 0; }
.theme-badge {
  position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent);
  background: var(--surface-solid); border: 1px solid var(--border-strong);
}
.theme-badge svg { width: 10px; height: 10px; }
.logo-btn[data-mode="dark"] .theme-badge { color: var(--outline); }

.empty-state .ring { position: relative; border: 0; width: 132px; height: 132px; color: var(--text-faint); }
.ring-spin { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--text-faint); opacity: .75;
  animation: ring-turn 22s linear infinite; transition: border-color .2s; }
/* The processing comet: a crimson-to-gold arc that circles the dashed ring. */
.ring-comet { position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 60%, #b01b33 88%, #d8b478 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: ring-turn 2.6s linear infinite; }
.ring-core { position: relative; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(176,27,51,.28), transparent 70%); animation: ring-glow 3.2s ease-in-out infinite; }
.ring-core > svg, .ring-core > img { grid-area: 1 / 1; }
.ring-core svg { width: 42px; height: 42px; }
.ring-tray { color: var(--text-faint); }
.ring-arrow { color: var(--accent); animation: ring-up 2.2s ease-in-out infinite; }
.ring-logo { display: none; width: 60px; height: auto; animation: ring-breathe 3.2s ease-in-out infinite; }
.ring[data-inside="logo"] .ring-logo { display: block; }
.ring[data-inside="logo"] .ring-tray, .ring[data-inside="logo"] .ring-arrow { display: none; }
body.dragover .ring-spin { border-color: var(--accent); animation-duration: 5s; }
body.dragover .ring-comet { animation-duration: .9s; }
body.dragover .ring-arrow { animation-duration: .9s; }
@keyframes ring-turn { to { transform: rotate(1turn); } }
@keyframes ring-glow { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes ring-up { 0% { transform: translateY(9px); opacity: 0; } 28% { opacity: 1; } 72% { opacity: 1; } 100% { transform: translateY(-9px); opacity: 0; } }
@keyframes ring-breathe { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .ring-spin, .ring-comet, .ring-core, .ring-arrow, .ring-logo { animation: none; }
}

/* Credit line: version, licence holder and a link to the author's site. Sits under the name, outside the menu button
   (a link cannot live inside a button). */
.brand-id { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; }
.brand-id .brand-btn { padding: 3px 8px 0 6px; }
.brand-id .brand-name { font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
a.brand-credit { display: block; max-width: 100%; padding: 1px 8px 3px 6px; text-decoration: none; border-radius: 4px;
  color: var(--text-faint); transition: color .15s; }
a.brand-credit:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a.brand-credit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Footer: a slim translucent strip with the mark, a status line and the Credits button. The zoom pill and toast sit above it. */
.statusbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;   /* above the cards (15) and the export panel (35), so its popups are never covered */ height: 30px; padding: 0 12px;
  display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--text-dim);
  background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-top: 1px solid var(--border); }
.foot-mark { width: 16px; height: 16px; object-fit: contain; flex: none; }
.status-line { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credit-wrap { position: relative; flex: none; }
#credit-btn { height: 22px; padding: 0 10px; border: 0; border-radius: 99px; background: transparent; cursor: pointer;
  color: var(--text-dim); font-size: 11.5px; font-weight: 500; transition: background .14s, color .14s; }
#credit-btn:hover, #credit-btn[aria-expanded="true"] { background: var(--track); color: var(--text); }
.credit-pop { position: absolute; right: 0; bottom: calc(100% + 9px); width: 300px; padding: 14px 16px; text-align: left;
  background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-xl);
  font-size: 13px; color: var(--text-dim); }
.credit-pop p { margin: 0 0 8px; } .credit-pop p:last-child { margin-bottom: 0; }
.credit-pop b { color: var(--text); }
.credit-title { color: var(--text); font-weight: 600; font-size: 14px; }
.credit-title span { color: var(--text-faint); font-weight: 400; font-size: 12px; margin-left: 4px; }
.credit-links { display: flex; flex-direction: column; gap: 3px; }
.credit-pop a { color: var(--accent); text-decoration: none; cursor: pointer; }
.credit-links a { width: fit-content; }
.credit-pop a:hover { text-decoration: underline; text-underline-offset: 2px; }
.credit-joke { font-size: 11.5px; line-height: 1.5; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--track); }
.credit-fine { font-size: 11px; color: var(--text-faint); line-height: 1.45; }
.toast { bottom: 46px; }

/* ============================================================================
   10. v0.3.0 additions: Govt. form button, Rotate card, live status line, clickable circle
   ========================================================================== */
.govt-wrap { position: relative; }
.govt-btn svg { color: var(--accent); }
.govt-btn.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.govt-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 270px; padding: 6px;
  display: grid; gap: 4px; background: var(--surface-solid); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-xl); }
.govt-menu[hidden] { display: none; }
.govt-menu button { display: grid; gap: 2px; text-align: left; padding: 9px 11px; border: 1px solid transparent;
  border-radius: var(--radius-sm); background: transparent; cursor: pointer; color: var(--text); font: inherit; }
.govt-menu button:hover, .govt-menu button:focus-visible { background: var(--accent-soft); border-color: var(--accent); outline: none; }
.govt-menu b { font-size: 13.5px; }
.govt-menu span { font-size: 11.5px; line-height: 1.45; color: var(--text-dim); }
@media (max-width: 560px) { .govt-btn .lbl { display: none; } }

.govt-note { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent-soft); }
.govt-note p { margin: 0 0 6px; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.govt-note b { color: var(--text); }
.govt-note .govt-result { color: var(--text); font-variant-numeric: tabular-nums; }
.govt-note .btn { height: 28px; padding: 0 10px; font-size: 12px; }

/* The empty-state circle is a button. */
.empty-state .ring { pointer-events: auto; cursor: pointer; border-radius: 50%; transition: transform .2s; }
.empty-state .ring:hover { transform: scale(1.05); }
.empty-state .ring:hover .ring-comet, .empty-state .ring:focus-visible .ring-comet { animation-duration: 1.2s; }
.empty-state .ring:hover .ring-arrow { animation-duration: 1.2s; }
.empty-state .ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* Footer: translucent, a branded Credits pill, a linked logo and a status line that changes colour with its level. */
.statusbar { background: color-mix(in srgb, var(--surface-solid) 42%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.foot-logo { display: grid; place-items: center; flex: none; border-radius: 50%; line-height: 0; transition: transform .25s; }
.foot-logo:hover { transform: rotate(-10deg) scale(1.15); }
.foot-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.status-line::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  vertical-align: 1px; background: var(--text-faint); }
.statusbar[data-level="ok"] .status-line::before { background: var(--accent); }
.statusbar[data-level="info"] .status-line::before { background: var(--outline); }
.statusbar[data-level="warn"] .status-line { color: var(--danger); font-weight: 500; }
.statusbar[data-level="warn"] .status-line::before { background: var(--danger); }
#credit-btn { background: var(--accent-soft); color: var(--accent); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
#credit-btn:hover, #credit-btn[aria-expanded="true"] { background: var(--accent); color: var(--accent-fg); }

/* "How to use": deliberately quiet, like the Open button's ghost sibling; sits left of the branded Credits pill. */
.help-wrap { position: relative; flex: none; }
#help-btn { height: 22px; padding: 0 10px; border: 0; border-radius: 99px; background: transparent; cursor: pointer;
  color: var(--text-faint); font-size: 11.5px; font-weight: 500; transition: background .14s, color .14s; }
#help-btn:hover, #help-btn[aria-expanded="true"] { background: var(--track); color: var(--text); }
.help-pop { width: 340px; max-width: calc(100vw - 24px); }
.help-steps { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.help-steps li { margin-bottom: 6px; } .help-steps b { color: var(--text); }

/* How to use: a tidy shortcut grid instead of a run-on line. */
.help-pop { max-height: calc(100dvh - 60px); overflow-y: auto; width: 450px; }
.keys { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.keys-title { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.keys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; margin: 0; }
.key-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.key-row dt { display: flex; gap: 3px; flex: none; width: 88px; }
.key-row dd { margin: 0; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.keys kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px;
  border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--track); color: var(--text);
  font: 600 11px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; }
@media (max-width: 460px) { .keys-grid { grid-template-columns: 1fr; } }

/* Visible author link in the footer (hidden on narrow screens; the Credits card carries it too). */
.foot-by { flex: none; color: var(--text-faint); font-size: 11.5px; text-decoration: none; white-space: nowrap; }
.foot-by:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.credit-pop b a { color: var(--text); text-decoration: none; }
.credit-pop b a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .foot-by { display: none; } }