/* ════════════════════════════════════════════════════════════════
   dB Tech Rider Creator — tech-rider-app.css
   Extends the dB Records visual system (qc-app.css tokens).
   ════════════════════════════════════════════════════════════════ */

/* Gilroy is NOT self-hosted on purpose: it is commercial ("(c) 2016 Radomir
   Tinkov, all rights reserved") and serving the file publicly is a webfont grant
   the app/desktop licence does not carry. It stays first in --font-display, so a
   machine that has it installed still uses it; everyone else gets Jost, which is
   OFL and self-hosted below. See fonts/README.txt. */
@font-face { font-family:"Jost"; src:url("fonts/Jost-VariableFont_wght.ttf") format("truetype"); font-weight:100 900; font-display:swap }
@font-face { font-family:"Jost"; src:url("fonts/Jost-Italic-VariableFont_wght.ttf") format("truetype"); font-weight:100 900; font-style:italic; font-display:swap }

/* Selectable Ultimate-tier fonts (subset latin+latin-ext, full Polish glyphs). */
@font-face { font-family:"Manrope"; src:url("fonts/manrope-regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Manrope"; src:url("fonts/manrope-700.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"Montserrat"; src:url("fonts/montserrat-regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Montserrat"; src:url("fonts/montserrat-700.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"Outfit"; src:url("fonts/outfit-regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Outfit"; src:url("fonts/outfit-700.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"Poppins"; src:url("fonts/poppins-regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Poppins"; src:url("fonts/poppins-700.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"DM Sans"; src:url("fonts/dmsans-regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"DM Sans"; src:url("fonts/dmsans-700.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"Work Sans"; src:url("fonts/worksans-regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Work Sans"; src:url("fonts/worksans-700.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"Lexend"; src:url("fonts/lexend-regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Lexend"; src:url("fonts/lexend-700.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"Source Serif 4"; src:url("fonts/sourceserif-regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Source Serif 4"; src:url("fonts/sourceserif-700.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"Lora"; src:url("fonts/lora-regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Lora"; src:url("fonts/lora-700.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"EB Garamond"; src:url("fonts/ebgaramond-regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"EB Garamond"; src:url("fonts/ebgaramond-700.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"Space Grotesk"; src:url("fonts/spacegrotesk-regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Space Grotesk"; src:url("fonts/spacegrotesk-700.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"Sora"; src:url("fonts/sora-regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Sora"; src:url("fonts/sora-700.woff2") format("woff2"); font-weight:700; font-display:swap }

:root {
  --db-black:   #0A0A0B;
  --db-ink:     #141417;
  --db-graphite:#1F1F23;
  --db-slate:   #34343A;
  --db-steel:   #5A5A62;
  --db-silver:  #8A8A92;
  --db-mist:    #B6B6BC;
  --db-fog:     #DCDBD8;
  --db-paper:   #F4F3F0;
  --db-white:   #FFFFFF;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-pill:999px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --dur:        240ms;

  --font-display: "Gilroy","Jost","Futura","Century Gothic",system-ui,sans-serif;
  --font-sans:    "Jost","Futura","Century Gothic",system-ui,sans-serif;

  --bg:         var(--db-black);
  --surface:    var(--db-ink);
  --surface-2:  var(--db-graphite);
  --border:     var(--db-slate);
  --border-strong: #45454C;

  --fg1:        #F4F3F0;
  --fg2:        var(--db-mist);
  --fg3:        var(--db-silver);
  --fg-muted:   var(--db-steel);

  --accent:     #FFFFFF;
  --accent-fg:  #0A0A0B;

  --ok:   #6FCF97;
  --warn: #F2C94C;
  --fail: #EB5757;
  --info: #56A3D9;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; margin: 0; }
a { color: inherit; }

.eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg3); }
.section-no { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--fg-muted); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  padding: 9px 16px; cursor: pointer; background: transparent; color: var(--fg1);
  position: relative; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur), border-color var(--dur);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 40px rgba(255,255,255,.08); }
.btn--primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--sm { padding: 6px 12px; font-size: 12px; }
.btn--caps { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.btn--danger { color: var(--fail); border-color: rgba(235,87,87,.4); }
.btn--danger:hover { background: rgba(235,87,87,.1); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--fg3);
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.iconbtn:hover { background: var(--surface-2); color: var(--fg1); }
.iconbtn svg { width: 16px; height: 16px; }

/* ── Inputs ── */
.inp, .sel, .ta {
  width: 100%; font-family: var(--font-sans); font-size: 13px; color: var(--fg1);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px; outline: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.inp:focus, .sel:focus, .ta:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(255,255,255,.05); }
.inp::placeholder, .ta::placeholder { color: var(--fg-muted); }
.ta { resize: vertical; min-height: 80px; line-height: 1.5; }
.sel { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238A8A92' stroke-width='2'><polyline points='2 4 6 8 10 4'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); font-weight: 500; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fgrid--3 { grid-template-columns: 1fr 1fr 1fr; }
.field--wide { grid-column: 1 / -1; }

/* ── Toggle switch ── */
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.toggle input { display: none; }
.toggle__track { width: 38px; height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); position: relative; transition: background var(--dur), border-color var(--dur); }
.toggle__track::after { content:''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg3); transition: transform var(--dur) var(--ease), background var(--dur); }
.toggle input:checked + .toggle__track { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle__track::after { transform: translateX(16px); background: var(--accent-fg); }
.toggle__label { font-size: 13px; color: var(--fg2); }

.checkrow { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--fg2); }
.checkrow input { accent-color: var(--accent); width: 15px; height: 15px; }
.checkset { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.radiorow { display: inline-flex; gap: 16px; }

/* ── Appbar ── */
.appbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; background: rgba(10,10,11,.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.appbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.appbar__mark { height: 26px; }
.appbar__name { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.appbar__sep { color: var(--fg-muted); }
.appbar__rc { font-size: 10px; letter-spacing: .14em; color: var(--fg-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 6px; }
.appbar__spacer { flex: 1; }
.rider-switcher { display: flex; align-items: center; gap: 8px; }
.rider-switcher .sel { width: auto; min-width: 160px; }
/* Undo / redo pair in the appbar — discoverable for people who never learned Cmd+Z */
.undo-pair { display: flex; gap: 4px; align-items: center; margin-right: 4px; }
.undo-pair__btn { padding: 5px 8px; line-height: 0; }
.undo-pair__btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.save-status { font-size: 12px; color: var(--ok); min-width: 70px; text-align: right; }
.save-status.unsaved { color: var(--warn); }

/* ── App shell ── */
.shell { display: flex; min-height: calc(100vh - 53px); }
.sidebar { width: 220px; flex: none; border-right: 1px solid var(--border); padding: 16px 12px; background: var(--surface); }
.sidebar__title { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); padding: 4px 10px 12px; }
.step {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 11px; border-radius: var(--radius-md); border: none; background: transparent;
  color: var(--fg2); cursor: pointer; text-align: left; font-family: var(--font-sans); font-size: 13.5px;
  transition: all var(--dur) var(--ease); margin-bottom: 2px;
}
.step:hover { background: var(--surface-2); color: var(--fg1); }
.step.active { background: var(--surface-2); color: var(--fg1); }
.step.active .step__no { color: var(--fg1); }
.step__icon { width: 20px; height: 20px; flex: none; color: var(--fg3); display: flex; }
.step.active .step__icon { color: var(--accent); }
.step__icon svg { width: 100%; height: 100%; }
.step__no { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--fg-muted); flex: none; width: 12px; }
.step__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step__badge { flex: none; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.step__badge svg { width: 16px; height: 16px; }
.badge-empty { color: var(--fg-muted); }
.badge-partial { color: var(--warn); }
.badge-complete { color: var(--ok); }

/* ── Main editor ── */
.main { flex: 1; min-width: 0; padding: 28px 32px 80px; }
.editor { max-width: 920px; margin: 0 auto; }
.section { display: none; }
.section.active { display: block; animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.section__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.section__head h2 { font-size: 26px; }
.section__desc { color: var(--fg3); margin: 0 0 24px; font-size: 13.5px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 18px; }
.stack > * + * { margin-top: 16px; }

/* Collapsible sub-sections */
.collapse { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; overflow: hidden; background: var(--surface); }
.collapse__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; user-select: none; }
.collapse__head h3 { font-size: 15px; }
.collapse__chev { transition: transform var(--dur) var(--ease); color: var(--fg3); margin-left: auto; }
.collapse.open .collapse__chev { transform: rotate(90deg); }
.collapse__body { max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); }
.collapse.open .collapse__body { max-height: 3000px; }
.collapse__inner { padding: 0 16px 18px; }

/* ── Data tables ── */
.dtable-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.dtable { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; }
.dhead th { background: var(--surface-2); text-align: left; padding: 10px 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
.drow td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.drow:last-child td { border-bottom: none; }
.drow:hover { background: rgba(255,255,255,.015); }
/* Ghost row: an inviting, always-present placeholder row at the bottom of the
   input/output/studio-mic editors (Asana-style). It never carries data — it
   is not part of the rider JSON until the user types into it, at which point
   the editor materialises a real row and draws a fresh ghost below it. */
.drow.row-ghost { opacity: .55; }
.drow.row-ghost:hover { background: transparent; }
.drow.row-ghost .inp::placeholder, .drow.row-ghost .ta::placeholder { font-style: italic; color: var(--fg-muted); }
.drow.row-ghost .dcell--num { cursor: default; }
.drow.row-ghost [data-grip] { cursor: default; }
.dcell .inp, .dcell .sel { padding: 6px 8px; font-size: 12.5px; background: transparent; border-color: transparent; }
.dcell .inp:focus, .dcell .sel:focus { background: var(--surface-2); border-color: var(--border); }
.dcell--num { width: 42px; color: var(--fg-muted); text-align: center; font-family: var(--font-display); font-weight: 800; cursor: grab; }
.dcell--check { text-align: center; width: 48px; }
.dcell--act { width: 64px; text-align: center; white-space: nowrap; }
.dcell--num[data-grip] { cursor: grab; }
.dcell--num[data-grip]:hover { background: var(--surface2, rgba(127,127,127,.12)); }
/* Input-list grouping. The stand + notes cells are genuinely rowspanned over the
   run (one control, one value) — the same merge the PDF draws — and the shared
   value sits at the TOP of the span, level with the run's first channel, so it
   never reads as if it belonged to the middle row. A bracket down the run's left
   edge plus a channel count says which rows the value covers; a faint tint alone
   is not enough to survive the zebra striping. */
.drow.is-grp .dcell--grp { background: rgba(255,255,255,.05); vertical-align: top; position: relative; padding-top: 18px; padding-left: 16px; }
.drow.is-grp-start .dcell--grp { border-top: 1px solid var(--accent); }
.drow.is-grp-end .dcell--grp { border-bottom: 1px solid var(--accent); }
/* Group bracket: a rule down the span with a tick at each end. */
.grpspan { position: absolute; left: 5px; top: 6px; bottom: 6px; width: 5px;
  border: 1px solid var(--accent); border-right: none; border-radius: 2px 0 0 2px; opacity: .8; }
.grpspan__count { position: absolute; left: 16px; top: 4px; font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); font-weight: 600; pointer-events: none; }

/* …and the channels themselves are bracketed on the number column, so the run is
   visible even when the merged columns are scrolled out of view. */
.drow.is-grp .dcell--num { box-shadow: inset 3px 0 0 var(--accent); }
.drow.is-grp .dcell--num, .drow.is-grp .dcell { background: rgba(255,255,255,.02); }
.io-hint { color: var(--fg3); font-size: 12px; margin: 0 0 10px; max-width: 78ch; }
.row-flash { animation: flash 1s var(--ease); }
@keyframes flash { from { background: rgba(242,201,76,.18); } to { background: transparent; } }
.drow.dragging { opacity: .4; }
/* Move-selection: the rows a drag will carry. Deliberately NOT the accent (that
   is the grouping bracket's colour) and not a dim (that is "dragging") — a cool
   tint plus a bar on the number column, so all three states can be read at once. */
.drow.is-rowsel > td { background: rgba(86,163,217,.16); }
.drow.is-rowsel .dcell--num { box-shadow: inset 3px 0 0 var(--info); color: var(--fg1); }
.drow.is-rowsel.is-grp .dcell--grp { background: rgba(86,163,217,.16); }

.tabs { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--radius-pill); margin-bottom: 18px; }
.tab { padding: 7px 18px; border-radius: var(--radius-pill); border: none; background: transparent; color: var(--fg3); cursor: pointer; font-family: var(--font-sans); font-size: 13px; transition: all var(--dur); }
.tab.active { background: var(--accent); color: var(--accent-fg); }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.io-qty { width: 54px; padding: 6px 6px; border: 1px solid var(--border, #34343a); border-radius: 8px;
  background: var(--surface2, #1f1f23); color: inherit; font: inherit; text-align: center; }
.toolbar__spacer { flex: 1; }

.dropwrap { position: relative; display: inline-block; }
.dropmenu { position: absolute; top: calc(100% + 6px); left: 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); min-width: 180px; box-shadow: 0 8px 32px rgba(0,0,0,.4); z-index: 60; padding: 6px; display: none; }
.dropmenu.open { display: block; }
.dropmenu button { display: block; width: 100%; text-align: left; padding: 9px 12px; background: none; border: none; color: var(--fg2); font-family: var(--font-sans); font-size: 13px; border-radius: var(--radius-sm); cursor: pointer; }
.dropmenu button:hover { background: var(--surface-2); color: var(--fg1); }

/* ── Banner ── */
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; margin-bottom: 16px; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg2); }
.banner--info { border-color: rgba(86,163,217,.3); }

/* ── Photo / drag upload ── */
.upload {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md);
  padding: 28px; text-align: center; color: var(--fg3); cursor: pointer;
  transition: border-color var(--dur), background var(--dur);
}
.upload:hover, .upload.dragover { border-color: var(--accent); background: var(--surface-2); }
.upload img { max-width: 180px; max-height: 140px; border-radius: var(--radius-sm); display: block; margin: 0 auto 10px; }

/* repeatable link rows */
.linkrow { display: grid; grid-template-columns: 160px 1fr 36px; gap: 8px; align-items: center; margin-bottom: 8px; }

/* ── Contacts ── */
.contact-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; margin-bottom: 14px; background: var(--surface); }
.contact-card__header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.contact-card__role { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); background: var(--surface-2); padding: 4px 10px; border-radius: var(--radius-pill); }
.contact-card__primary { margin-left: auto; cursor: pointer; color: var(--fg-muted); font-size: 18px; transition: color var(--dur); }
.contact-card__primary.is-primary { color: var(--warn); }

/* ── Stage plan ── */
.stage-wrap { display: flex; gap: 16px; }
.icon-lib { width: 230px; flex: none; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 12px; max-height: 70vh; overflow-y: auto; }
.icon-lib__group { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); margin: 14px 4px 8px; }
.icon-lib__item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: grab; color: var(--fg2); font-size: 12.5px; transition: background var(--dur); user-select: none; }
.icon-lib__item:hover { background: var(--surface-2); color: var(--fg1); }
.icon-lib__item svg { width: 20px; height: 20px; flex: none; color: var(--fg3); }
.stage-side { flex: 1; min-width: 0; }
.stage-canvas {
  /* Was capped at 900px and only ever shrank; it now FILLS the column, up to
     1200px. Height stays a FALLBACK only: paintStage sets the real box via an
     inline aspect-ratio taken from widthM:depthM, which is what keeps the
     editor WYSIWYG with the PDF. Deliberately NO min-height — it would survive
     that inline `height:auto` and stretch a shallow 20x4 m stage to 600px,
     in the editor AND in the offscreen box the PDF capture measures. */
  position: relative; width: 100%; max-width: none; height: 600px;
  background: #ffffff; border: 2px solid #d0d0d4; border-radius: var(--radius-md);
  overflow: hidden; margin: 0 auto; user-select: none; touch-action: none;
  /* scope light-palette tokens so inline SVG shapes render correctly */
  --surface-2: #f5f5f7;
  --border-strong: #b8b8c0;
  --border: #dddde0;
  --stage-area-dark: #e8e8ec;
  /* Live canvas width / the 900px logical reference. Element boxes (icon,
     padding, label) are authored in logical px and multiplied by this, so the
     whole plan scales as ONE unit: a canvas squeezed to 674px and the 900px
     off-screen export canvas then produce identical normalized geometry.
     Without it the icons stayed a fixed pixel size while the positions
     scaled, so centre-to-centre distances changed with the window width. */
  --stage-scale: 1;
}
.stage-canvas.grid {
  background-image:
    linear-gradient(#e8e8ec 1px, transparent 1px),
    linear-gradient(90deg, #e8e8ec 1px, transparent 1px);
  /* 20px of the 900x600 LOGICAL space — snapping happens there, so a fixed
     20px would drift off the visible lines at any other canvas size.
     border-box: the % must resolve against the same box getBoundingClientRect
     reports (borders included), or the lines sit 2px off the snapped points. */
  background-origin: border-box; background-clip: border-box;
  background-size: calc(100% / 45) calc(100% / 30);
}
.stage-canvas.dragover { border-color: var(--accent); }
/* Mask layers (decision-stage-mask): two siblings over the full canvas box.
   `inset:0` resolves against the same padding box the elements' left/top
   percentages do, so routing an item into a layer moves nothing. The layers
   are click-through — the marquee still starts on the canvas background —
   and the items inside them are not. */
.stage-layer { position: absolute; inset: 0; pointer-events: none; }
.stage-layer > * { pointer-events: auto; }
/* Selection chrome rides above both content layers and is never clipped. */
.stage-layer--chrome { z-index: 5; }
/* The ghost is a CLONE of the real node — that is what makes its box identical
   to a box that is derived from content. Only the chrome is allowed to show:
   the dashed outline (on the ghost itself) and the handles. */
.stage-el--chrome > *:not(.stage-handle) { visibility: hidden; }
/* …except the label, which stays hit-testable (transparent) so a clipped
   element's label can still be dragged through the ghost (startLabelDrag). */
.stage-el--chrome > .stage-el__label { visibility: visible; opacity: 0; }
.stage-el--chrome { cursor: move; }
.stage-clip-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.stage-marquee { position: absolute; border: 1px solid #4a90d9; background: rgba(74,144,217,.12); pointer-events: none; z-index: 200; border-radius: 2px; }

/* ── 3D stage/studio viewer overlay ── */
.stage3d-overlay { position: fixed; inset: 0; z-index: 500; background: #0d0d10; }
.stage3d-overlay canvas { display: block; }
.stage3d-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--border); background: rgba(20,20,23,.85); color: var(--fg1);
  font-size: 16px; cursor: pointer; backdrop-filter: blur(6px); }
.stage3d-close:hover { border-color: var(--fg2); }
.stage3d-badge { position: absolute; top: 20px; left: 20px; z-index: 2; font-family: var(--font-display);
  font-weight: 700; letter-spacing: .06em; color: var(--fg1); font-size: 15px;
  background: rgba(20,20,23,.7); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; backdrop-filter: blur(6px); }
.stage3d-hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: var(--fg3); font-size: 12.5px; background: rgba(20,20,23,.7); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 16px; white-space: nowrap; backdrop-filter: blur(6px); }

/* Zone labels (UPSTAGE / FOH / SR / SL) — smaller, very subtle */
.stage-label {
  position: absolute; font-family: var(--font-display); font-weight: 700;
  font-size: 9px; letter-spacing: .18em; color: #b0b0b8; pointer-events: none;
}
.stage-label--up  { top: 8px;    left: 50%; transform: translateX(-50%); }
.stage-label--foh { bottom: 8px; left: 50%; transform: translateX(-50%); }
.stage-label--sr  { left: 8px;   top: 50%;  transform: translateY(-50%) rotate(-90deg); }
.stage-label--sl  { right: 8px;  top: 50%;  transform: translateY(-50%) rotate(90deg); }

/* Stage elements — near-black by default, colour overridden per-element via JS */
.stage-el {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; gap: calc(2px * var(--stage-scale)); cursor: move;
  color: #1a1a1f; padding: calc(4px * var(--stage-scale)); border-radius: var(--radius-sm);
}
/* Icon (and free-text) elements stack their children in ONE grid cell: the box
   is still as wide as the wider of icon and label, and the icon is still
   centred in it — the same geometry the old flex column produced — but the
   label is offset with a transform (see labelTransform in app.js) instead of by
   layout. That is what lets the label sit above / left / right of the icon, at
   an adjustable distance, WITHOUT moving the icon on the stage. */
.stage-el--icon { display: grid; grid-template-columns: auto; place-items: center; }
.stage-el--icon > * { grid-area: 1 / 1; }
.stage-el.selected { outline: 2px dashed #555; outline-offset: 2px; }
.stage-el__icon { display: flex; transition: transform var(--dur) var(--ease); }
.stage-el__icon svg { width: 100%; height: 100%; }
.stage-el__label { font-size: calc(10px * var(--stage-scale)); line-height: 1; color: #444; white-space: nowrap; text-align: center; font-weight: 500; cursor: grab; }
.stage-el__label:active { cursor: grabbing; }
/* Riser caption with a free `labelOffset`: pinned to the riser's centre and
   moved by a transform (riserLabelTransform in app.js), so the deck keeps its
   full box and the caption can sit anywhere — outside the deck included. */
.stage-el--riser .stage-el__label--free { position: absolute; left: 50%; top: 50%; }
.props-sub { font-weight: 400; color: var(--fg-muted); text-transform: none; letter-spacing: 0; }
input.inp.is-mixed { opacity: .6; }
/* Marked area (kind:"zone"): dashed outline + translucent fill (colours are
   set inline from the element), caption centred inside, rotates as one box.
   Shares .stage-el__icon so the resize/rotate handles find it. */
.stage-el__zone { box-sizing: border-box; border: 1.5px dashed #6a6a6a; border-radius: 4px; align-items: center; justify-content: center; overflow: hidden; }
.stage-el__zone-label { font-size: calc(10px * var(--stage-scale)); font-weight: 600; letter-spacing: .04em; white-space: nowrap; text-align: center; padding: 0 4px; }
/* Free text on the plan: inherits the element colour, sized from the element's
   own size preset (font-size is set inline). */
.stage-el__text { white-space: nowrap; text-align: center; font-weight: 600; line-height: 1.15; }
.stage-el.drop-bounce { animation: bounce .3s var(--ease); }
@keyframes bounce { 0% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Element colour picker */
.el-colors { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.el-color-swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent;
  transition: transform 120ms ease, border-color 120ms ease;
  flex: none;
}
.el-color-swatch:hover  { transform: scale(1.18); }
.el-color-swatch.active { border-color: var(--fg1); transform: scale(1.1); }

.stage-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* The pickers live in a rail BESIDE the stage, at its own height, and scroll
   with the page — stacked above the canvas they pushed the stage below the
   fold, which is the one thing this screen cannot afford. */
.stage-rail { width: 250px; flex: none; }
/* the two metre fields are fixed-width elsewhere; inside the rail they have to
   share whatever is left of 250px minus the panel padding */
.stage-rail .stage-dims { flex-wrap: wrap; }
.stage-rail .stage-dims .field { flex: 1 1 90px; min-width: 0; }
.stage-rail .stage-dims .inp { width: 100%; }
.stage-rail .stage-dims .btn { flex: 1 1 100%; }
/* The three "+ add" tools share one full-width row: riser, text, zone. */
.stage-dims__add { flex: 1 1 100%; display: flex; gap: 6px; flex-wrap: wrap; }
.stage-rail .stage-dims .stage-dims__add .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
/* B3: the whole left column folds away as one unit. The thin edge tab is the
   way back (the toolbar button toggles too). Independent of the per-panel
   <details> state and of the library's own collapse, which are left as-is. */
.stage-wrap--left-hidden > .icon-lib, .stage-wrap--left-hidden > .stage-rail { display: none; }
.stage-left-tab { flex: none; align-self: stretch; width: 18px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--fg-muted); cursor: pointer; font-size: 14px; line-height: 1; min-height: 120px; }
.stage-left-tab:hover { color: var(--fg1); background: var(--surface); }
/* Indeterminate slider (batch inspector, or a slider a free label offset has
   overridden): dimmed until the user takes it over. */
input[type="range"].is-mixed { opacity: .35; }
.seg.is-overridden { opacity: .55; }
.stage-rail .spanel:last-child { margin-bottom: 0; }

/* The sections nav folds to a strip of step numbers; on this screen every
   pixel of width is stage. */
.sidebar { position: relative; transition: width var(--dur); }
.sidebar__collapse { position: absolute; top: 10px; right: 8px; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
  color: var(--fg-muted); cursor: pointer; font-size: 11px; line-height: 1; z-index: 2; }
.sidebar__collapse::before { content: '‹'; }
.sidebar__collapse:hover { color: var(--fg1); }
.sidebar.is-collapsed {
  /* flex-basis + min-width:0 are load-bearing: a flex item's automatic minimum
     size is its MIN-CONTENT width, so the nav refused to go under ~220px no
     matter what `width` said — even an inline style computed back to 220. */
  width: 52px; flex: 0 0 52px; min-width: 0; overflow: hidden; padding: 16px 6px;
}
.sidebar.is-collapsed .sidebar__title,
.sidebar.is-collapsed .step__label,
.sidebar.is-collapsed .step__no { display: none; }
/* Only the icon survives the fold. The number and the completion badge are
   ~50px of extra content in a 52px strip: centred, they were cut off at BOTH
   ends. The badge comes back as a corner dot so the progress is still there. */
.sidebar.is-collapsed .step { position: relative; justify-content: center; gap: 0; padding: 10px 0; }
.sidebar.is-collapsed .step__badge { position: absolute; top: 3px; right: 4px; width: 9px; height: 9px; }
.sidebar.is-collapsed .step__badge svg { width: 9px; height: 9px; }
.sidebar.is-collapsed .sidebar__collapse { position: static; margin: 0 auto 10px; display: block; }
.sidebar.is-collapsed .sidebar__collapse::before { content: '›'; }

/* Collapsible editor panels. The pickers stacked above the canvas pushed the
   stage itself below the fold; each is now a <details> the browser remembers
   (state persisted in localStorage by the app). */
.spanel { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); margin-bottom: 10px; }
.spanel__h {
  cursor: pointer; list-style: none; padding: 10px 14px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted);
  display: flex; align-items: center; gap: 8px; user-select: none;
}
.spanel__h::-webkit-details-marker { display: none; }
.spanel__h::before { content: '▸'; font-size: 10px; transition: transform var(--dur); color: var(--fg3); }
.spanel[open] > .spanel__h::before { transform: rotate(90deg); }
.spanel__h:hover { color: var(--fg1); }
.spanel > *:not(.spanel__h) { padding: 0 14px 14px; }
.spanel .shape-picker, .spanel .preset-picker, .spanel .venue-picker,
.spanel .stage-dims, .spanel .stage-layers { margin: 0; border: 0; background: none; }

/* The icon library folds away to a narrow strip — 230px back to the canvas. */
.icon-lib { position: relative; }
.icon-lib__collapse { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
  color: var(--fg-muted); cursor: pointer; font-size: 11px; line-height: 1; }
.icon-lib__collapse::before { content: '‹'; }
.icon-lib__collapse:hover { color: var(--fg1); }
.icon-lib.is-collapsed { width: 38px; padding: 8px 6px; overflow: hidden;
  /* hug the button instead of stretching to the row height and leaving a tall
     empty strip beside the canvas */
  align-self: flex-start; max-height: none; }
.icon-lib.is-collapsed > *:not(.icon-lib__collapse) { display: none; }
.icon-lib.is-collapsed .icon-lib__collapse { position: static; }
.icon-lib.is-collapsed .icon-lib__collapse::before { content: '›'; }

/* Canvas and the element inspector sit SIDE BY SIDE: the inspector used to
   live under the canvas, so every selection meant scrolling 600px down and
   back up again. The canvas column keeps the remaining width (min-width:0 so
   it may shrink instead of overflowing), and the rail sticks while the page
   scrolls, so the panel stays with the element you are editing. */
/* The editor column is capped at 920px for readable form text, which is right
   for every other section — but the stage plan now needs icon library +
   canvas + inspector on one line, and inside 920px the canvas was squeezed to
   ~360px. Only this section opts out of the cap. */
/* The editor column is capped at 920px for readable form text. The stage plan
   needs every pixel instead, so the CAP ITSELF is lifted while that section is
   open — cleaner than the negative-margin breakout this replaced, which had to
   guess the parent's width and pushed the section off the left edge. */
.main.is-stage .editor { max-width: none; }
.stage-main { display: flex; gap: 16px; align-items: flex-start; }
.stage-main__canvas { flex: 1 1 auto; min-width: 0; }
.stage-inspector { flex: 0 0 300px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.stage-inspector .stage-props { margin-top: 0; }
@media (max-width: 1180px) {
  /* Too narrow for two columns: fall back to the old stacked layout rather
     than squeezing the canvas into a strip, and give up the breakout entirely
     so the section can never exceed its parent. */
  .section[data-sec="stagePlan"] { width: 100%; margin-left: 0; }
  /* align-items:flex-start is what makes the two columns top-align; once the
     flex axis flips to column it instead shrink-wraps each child, so the
     900px canvas kept its full width and pushed the page sideways. */
  .stage-main { flex-direction: column; align-items: stretch; }
  .stage-inspector { flex: none; width: 100%; position: static; max-height: none; }
  .stage-inspector .stage-props { margin-top: 16px; }
}
.stage-props { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; background: var(--surface); }
.stage-props.empty { color: var(--fg-muted); font-size: 13px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { background: transparent; border: none; color: var(--fg3); padding: 6px 11px; cursor: pointer; font-size: 12px; font-family: var(--font-sans); }
.seg button.active { background: var(--accent); color: var(--accent-fg); }

/* ── Preview (the server-rendered PDF, embedded) ──
   The old `.pg*` "print page" styles are gone with the HTML document builder they
   dressed: the preview no longer imitates the PDF, it shows it. */
.pv { display: flex; flex-direction: column; gap: 12px; }
.pv__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv__state { flex: 1; min-width: 200px; font-size: 13px; color: var(--fg3); }
.pv__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-muted); flex: none; }
.pv__dot--ok   { background: var(--ok); }
.pv__dot--busy { background: var(--accent); animation: pvpulse 1s var(--ease) infinite; }
.pv__dot--warn { background: var(--warn); }
.pv__dot--fail { background: var(--fail); }
@keyframes pvpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.pv__doc {
  min-height: 520px; height: 78vh; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pv__doc iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.pv__ph { padding: 32px; text-align: center; color: var(--fg-muted); font-size: 13px; max-width: 420px; }
.pv__note { font-size: 11px; color: var(--fg-muted); margin: 0; }

/* ── Toast ── */
.toast-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border-strong); color: var(--fg1); font-size: 13px; box-shadow: 0 8px 32px rgba(0,0,0,.4); animation: toastin .3s var(--ease); }
.toast--ok { border-left: 3px solid var(--ok); }
.toast--warn { border-left: 3px solid var(--warn); }
.toast--fail { border-left: 3px solid var(--fail); }
.toast--info { border-left: 3px solid var(--info); }
.toast.out { animation: toastout .3s var(--ease) forwards; }
@keyframes toastin { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastout { to { transform: translateX(40px); opacity: 0; } }

/* ── Modal ── */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 150; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-back.open { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 26px; width: 100%; max-width: 440px; }
.modal h3 { font-size: 19px; margin-bottom: 6px; }
.modal__desc { color: var(--fg3); font-size: 13px; margin-bottom: 18px; }
.modal__foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.fb-label { display: block; font-size: 12px; color: var(--fg3); margin: 12px 0 5px; }
.fb-input { width: 100%; background: var(--surface2, #1f1f23); color: var(--fg, #f4f3f0);
  border: 1px solid var(--border, #34343a); border-radius: 9px; padding: 9px 11px; font: inherit; }
textarea.fb-input { resize: vertical; min-height: 90px; }

/* ── User menu ── */
.user-menu { position: relative; }
.user-menu__trigger { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 6px 12px 6px 6px; cursor: pointer; color: var(--fg1); transition: border-color var(--dur) var(--ease); font-family: var(--font-sans); font-size: 13px; }
.user-menu__trigger:hover { border-color: var(--fg2); }
.user-menu__avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 10px; color: var(--fg1); flex: none; text-transform: uppercase; }
.user-menu__name { font-size: 13px; color: var(--fg1); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); min-width: 200px; box-shadow: 0 8px 32px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all var(--dur) var(--ease); z-index: 100; }
.user-menu__dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu__info { padding: 12px 14px; }
.user-menu__info-name { display: block; font-size: 13px; font-weight: 600; color: var(--fg1); }
.user-menu__info-email { display: block; font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
.user-menu__divider { height: 1px; background: var(--border); }
.user-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; background: none; border: none; font-family: var(--font-sans); font-size: 13px; color: var(--fg2); cursor: pointer; text-align: left; transition: background var(--dur), color var(--dur); }
.user-menu__item:hover { background: var(--surface-2); color: var(--fail); }
.user-menu__info-tier { display: inline-block; margin-top: 8px; font-family: var(--font-display); font-weight: 800; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg1); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 2px 7px; }
.user-menu__info-tier.tier-ultimate { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
.user-menu__version { padding: 9px 14px; font-size: 10px; letter-spacing: .08em; color: var(--fg-muted); text-align: center; }

/* ════════ Custom font picker (Ultimate export) ════════ */
.fontpick { position: relative; }
.fontpick__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 12px; cursor: pointer; color: var(--fg1); font-size: 14px; text-align: left; transition: border-color var(--dur) var(--ease); }
.fontpick__btn:hover:not(:disabled) { border-color: var(--border-strong); }
.fontpick__btn:focus-visible { outline: none; border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(255,255,255,.05); }
.fontpick__btn:disabled { cursor: not-allowed; opacity: .55; }
.fontpick__btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fontpick__caret { flex: none; color: var(--fg-muted); transition: transform var(--dur) var(--ease); }
.fontpick.open .fontpick__caret { transform: rotate(180deg); }
.fontpick__pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0,0,0,.45); z-index: 120; padding: 4px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); }
.fontpick.open .fontpick__pop { opacity: 1; visibility: visible; transform: translateY(0); }
.fontpick__opt { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); padding: 9px 11px; color: var(--fg1); cursor: pointer; font-size: 15px; transition: background var(--dur); }
.fontpick__opt:hover { background: var(--surface-2); }
.fontpick__opt[aria-selected="true"] { background: var(--surface-2); }
.fontpick__opt small { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); margin-top: 2px; }

/* ════════ Auth gate ════════ */
.auth-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 48px; background: var(--bg); position: relative; }
.auth-glow { position: absolute; inset: -40% 10% auto 10%; height: 480px; background: radial-gradient(50% 50% at 50% 40%, rgba(255,255,255,.055), transparent 70%); pointer-events: none; }
.auth-logo { height: 40px; margin-bottom: 20px; position: relative; }
.auth-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 4vw, 34px); letter-spacing: -.02em; color: var(--fg1); text-align: center; position: relative; }
.auth-sub { font-weight: 300; font-size: 14px; color: var(--fg3); margin-top: 8px; text-align: center; position: relative; }
.auth-card { width: 100%; max-width: 400px; margin-top: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.auth-tab { padding: 14px 12px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); text-align: center; cursor: pointer; border: none; background: transparent; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.auth-tab:hover { color: var(--fg1); background: var(--surface-2); }
.auth-tab.active { color: var(--fg1); border-bottom-color: var(--accent); background: var(--surface-2); }
.auth-body { padding: 28px 28px 32px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.auth-field:last-of-type { margin-bottom: 0; }
.auth-field__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); font-weight: 500; }
.auth-pw-wrap { position: relative; }
.auth-pw-wrap .inp { padding-right: 40px; }
.auth-pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--fg-muted); cursor: pointer; padding: 4px; display: flex; align-items: center; transition: color var(--dur); }
.auth-pw-toggle:hover { color: var(--fg2); }
.auth-pw-toggle svg { width: 16px; height: 16px; }
.auth-error { font-size: 12.5px; color: var(--fail); background: rgba(235, 87, 87, .1); border: 1px solid rgba(235, 87, 87, .25); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 16px; display: none; }
.auth-error.show { display: block; }
.auth-success { font-size: 12.5px; color: var(--ok); background: rgba(111, 207, 151, .1); border: 1px solid rgba(111, 207, 151, .25); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 16px; display: none; }
.auth-success.show { display: block; }
.auth-submit { width: 100%; margin-top: 20px; justify-content: center; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--fg-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-switch { text-align: center; font-size: 13px; color: var(--fg3); }
.auth-switch a { color: var(--fg1); text-decoration: underline; cursor: pointer; text-underline-offset: 2px; }
.auth-switch a:hover { color: var(--accent); }
.auth-forgot { text-align: right; margin-top: 8px; font-size: 11.5px; }
.auth-forgot a { color: var(--fg-muted); text-decoration: none; cursor: pointer; transition: color var(--dur); }
.auth-forgot a:hover { color: var(--fg2); }
/* ── Landing splash (non-logged-in visitors) — dB Records hero style ── */
.landing { position: fixed; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg); text-align: center; padding: 24px; }
.landing-glow { position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 900px; max-width: 140vw; height: 700px; background: radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,0) 70%); pointer-events: none; }
.landing-inner { position: relative; z-index: 1; max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: 22px; animation: landing-in .6s var(--ease); }
@keyframes landing-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.landing-lockup { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.landing-logo { height: 46px; width: auto; }
.landing-store { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg3); }
.landing-h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(30px, 5vw, 46px); line-height: 1.05; margin: 6px 0 0; max-width: 16ch; }
.landing-lead { font-weight: 300; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.55; color: var(--fg2); max-width: 48ch; margin: 0; }
.landing-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.landing-actions .btn { padding: 12px 26px; }
.landing-foot { margin-top: 18px; font-size: 11px; letter-spacing: .04em; color: var(--fg-muted); }

.auth-oauth { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.auth-oauth__btn { width: 100%; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg1); padding: 11px 16px; border-radius: var(--radius-md); font-size: 13px; cursor: pointer; }
.auth-oauth__btn:hover { border-color: var(--border-strong); }
.auth-guest { margin-top: 20px; background: none; border: 1px solid var(--border); color: var(--fg-2); font: inherit; font-size: 13px; letter-spacing: .02em; padding: 10px 20px; border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s; position: relative; }
.auth-guest:hover { color: var(--fg); border-color: var(--fg-2); }
.auth-guest-note { margin-top: 8px; font-size: 11px; color: var(--fg-muted); position: relative; }
.auth-footer { margin-top: 24px; font-size: 11px; color: var(--fg-muted); letter-spacing: .04em; position: relative; }
.auth-submit.loading .btn-label { opacity: 0; }
.auth-submit.loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid var(--accent-fg); border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .stage-canvas { width: 100%; }
}
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; display: flex; gap: 4px; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 10px; }
  .sidebar__title { display: none; }
  .step { width: auto; flex: none; white-space: nowrap; margin-bottom: 0; }
  .step__label { max-width: none; }
  .main { padding: 20px 16px 60px; }
  .fgrid, .fgrid--3 { grid-template-columns: 1fr; }
  .stage-wrap { flex-direction: column; }
  .icon-lib { width: 100%; max-height: 220px; }
  .pv__doc { height: 60vh; }
}

/* ── Print ──
   Printing no longer re-lays-out the app: "Print" opens the server PDF in the
   browser's own PDF viewer, which brings its own print dialog. All that is left
   here is hiding the editor chrome if someone hits Cmd+P on the app itself. */
@media print {
  .appbar, .sidebar, .stage-tools, .toolbar, .toast-wrap, .modal-back, .icon-lib, .stage-props { display: none !important; }
  .main { padding: 0; }
}

/* ── Brand select + product combobox (PATCH v1.2) ── */
.brand-select-wrap { display: flex; gap: 8px; align-items: center; }
.brand-select-wrap .sel { flex: 1; min-width: 0; }
.brand-select-wrap .inp { flex: 1; min-width: 0; }
.product-combobox-wrap { position: relative; }
.product-combobox-wrap .inp { width: 100%; }
input[list]::-webkit-calendar-picker-indicator { opacity: .4; cursor: pointer; }
input[list]:focus::-webkit-calendar-picker-indicator { opacity: .8; }
.field--combo .field__label::after { content: ' (list or custom)'; font-size: 10px; color: var(--fg-muted); font-weight: 300; letter-spacing: 0; text-transform: none; }

/* Aux quick-select chips */
.aux-quick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.btn--xs { padding: 3px 9px; font-size: 11px; }
.aux-quick .btn { padding: 3px 9px; font-size: 11px; }

/* PDF download button spinner (reuses auth-submit pattern) */
.btn.loading .btn-label { opacity: .4; }
.btn.loading { pointer-events: none; }

/* ════════ PATCH v1.3 ════════ */

/* S11 — dB Records logotype (image) in appbar */
.appbar__logo       { height: 22px; width: auto; flex: none; object-fit: contain; }
.appbar__sep--brand { margin: 0 6px; }
.appbar__name       { font-family: var(--font-sans); font-weight: 400; font-size: 13px; color: var(--fg3); letter-spacing: .01em; }
@media (max-width: 480px) {
  .appbar__name, .appbar__sep--brand { display: none; }
}

/* S1 — accepted consoles list */
.console-list { display: flex; flex-direction: column; gap: 8px; }
.console-row { display: grid; grid-template-columns: 22px 130px 1fr 1fr 30px; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.console-row--preferred { background: rgba(111,207,151,.1); border-color: rgba(111,207,151,.3); }
.console-row--minimum { background: rgba(242,201,76,.08); border-color: rgba(242,201,76,.25); }
.console-row.dragging { opacity: .4; }
.console-row__grip { cursor: grab; color: var(--fg-muted); text-align: center; user-select: none; }
.console-row .brand-select-wrap, .console-row .product-combobox-wrap { min-width: 0; }
@media (max-width: 860px){ .console-row{ grid-template-columns: 22px 1fr 30px; } }

/* S4 — snap controls */
.snap-control { display: inline-flex; align-items: center; gap: 4px; }
.snap-control__label { font-size: 11px; color: var(--fg-muted); margin-right: 2px; }
.snap-btn.active { background: var(--accent); color: var(--accent-fg); }

/* multi-stage tab bar */
.stage-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.stage-tab { padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; color: var(--fg3); font-size: 12px; transition: all var(--dur) var(--ease); }
.stage-tab:hover { border-color: var(--fg2); color: var(--fg1); }
.stage-tab.active { border-color: var(--accent); color: var(--fg1); background: var(--surface-2); }
.stage-tab--add { color: var(--fg2); }
.stage-tab-name { padding: 5px 10px; min-width: 140px; }
.stage-tab-del { padding: 5px 10px; }
.stage-tab-dup { padding: 5px 10px; }
.stage-tab[draggable="true"] { cursor: grab; }
.stage-tab.dragging { opacity: .5; cursor: grabbing; }
.stage-tab.drop-target { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* S2 — stage shape selector */
.shape-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.shape-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; color: var(--fg3); font-size: 10px; transition: all var(--dur) var(--ease); }
.shape-btn:hover { border-color: var(--fg2); color: var(--fg1); }
.shape-btn.active { border-color: var(--accent); color: var(--fg1); background: var(--surface-2); }
.shape-btn svg { width: 48px; height: 36px; }
/* The draw tile sits with the built-ins but is an action, not a shape — dashed. */
.shape-btn--draw { border-style: dashed; }

/* S2 — saved venues. Deliberately NOT .shape-btn: a venue is the user's own
   hall, not one of the nine built-in drawings, and it can be renamed/deleted. */
.venue-picker { margin-bottom: 12px; }
.venue-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.venue-picker__title { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); }
.venue-picker__msg { font-size: 12px; color: var(--fg3); line-height: 1.45; }
.venue-tile { display: flex; align-items: stretch; gap: 2px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 6px; overflow: hidden; }
.venue-tile.active { border-color: var(--accent); background: var(--surface-2); }
.venue-tile__apply { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 6px 8px; background: none; border: 0; cursor: pointer; color: var(--fg2); text-align: left; font-size: 12px; }
.venue-tile__apply:hover { color: var(--fg1); }
.venue-tile__apply svg { flex: none; width: 40px; height: 28px; }
.venue-tile__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue-tile__dims { flex: none; font-size: 10px; color: var(--fg3); }
.venue-tile__acts { display: flex; align-items: center; padding-right: 4px; }

/* S3 — ensemble presets. Same tile idiom as .shape-btn (a preset is a
   built-in preference, not a user-owned record like a saved venue). */
.preset-picker { margin-bottom: 12px; }
.preset-picker__head { margin-bottom: 6px; }
.preset-picker__title { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); }
.preset-picker__list { display: flex; flex-wrap: wrap; gap: 6px; }
.preset-tile { padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; color: var(--fg3); font-size: 11px; transition: all var(--dur) var(--ease); }
.preset-tile:hover { border-color: var(--fg2); color: var(--fg1); }
.preset-tile:active { border-color: var(--accent); background: var(--surface-2); color: var(--fg1); }
.venue-dlg__sum { margin-top: 10px; font-size: 12px; color: var(--fg3); }
.venue-dlg__err { color: var(--fail, #eb5757); font-size: 13px; margin-top: 8px; min-height: 17px; }

/* Outline drawer */
.modal--wide { max-width: 880px; }
.outline-draw { overflow: auto; max-height: 56vh; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.outline-draw svg { display: block; touch-action: none; cursor: crosshair; }
.outline-draw__bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.outline-draw__dims { font-size: 12px; color: var(--fg3); }

.stage-dims { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.stage-dims .field { width: 120px; }
.stage-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage-bg-svg .stage-module { pointer-events: auto; }
/* The deck SVG fills the node's content box regardless of what else the node
   holds (the caption is absolute) — identical in the editor and in html2canvas. */
.stage-el--riser .stage-el__riser-svg { position: absolute; inset: calc(4px * var(--stage-scale)); width: auto; height: auto; }

/* S5 — next-section footer */
.section-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 48px; padding: 20px 0 8px; border-top: 1px solid var(--border); }
.section-footer__progress { flex: 1; }
.section-footer__progress-label { font-size: 11px; color: var(--fg-muted); letter-spacing: .08em; margin-bottom: 6px; }
.section-footer__bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.section-footer__bar-fill { height: 100%; background: var(--ok); border-radius: 2px; transition: width 400ms var(--ease); }
.section-footer__next { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }

/* S9 — photo upload zone */
.photo-upload-zone { width: 100%; height: 200px; border: 1.5px dashed var(--border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.photo-upload-zone:hover, .photo-upload-zone.drag-over { border-color: var(--fg2); background: var(--surface-2); }
.photo-upload-zone.has-photo { border-style: solid; border-color: var(--border-strong); }
.upload-placeholder { text-align: center; color: var(--fg3); padding: 20px; }
.upload-placeholder p { margin: 8px 0 0; font-size: 13px; }
.photo-remove { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); border: none; color: #fff; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.photo-status { font-size: 12px; margin-top: 6px; min-height: 18px; }
.photo-status.ok { color: var(--ok); }
.photo-status.fail { color: var(--fail); }

/* S10 — onboarding */
#onboarding-overlay { position: fixed; inset: 0; z-index: 999; pointer-events: none; }
#onboarding-tooltip { position: fixed; z-index: 1000; width: 300px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 20px; box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px var(--border); animation: onb-in 240ms var(--ease); pointer-events: auto; }
@keyframes onb-in { from { opacity: 0; transform: scale(.95) translateY(4px);} to { opacity:1; transform: scale(1) translateY(0);} }
.onb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.onb-step { font-size: 11px; color: var(--fg-muted); letter-spacing: .06em; }
.onb-skip { font-size: 11px; color: var(--fg-muted); background: none; border: none; cursor: pointer; padding: 0; }
.onb-skip:hover { color: var(--fg2); }
.onb-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--fg1); margin: 0 0 8px; }
.onb-body { font-size: 13px; color: var(--fg2); line-height: 1.55; margin: 0 0 16px; }
.onb-footer { display: flex; justify-content: space-between; align-items: center; }
.sel--compact { padding: 6px 8px; font-size: 12px; }

/* ════════ PATCH v1.4 ════════ */
/* admin link in user menu — neutral hover (not the destructive red) */
#adminPanelLink:hover { background: var(--surface-2); color: var(--fg1); }


/* Stage selection handles (resize / rotate) */
.stage-handle { position: absolute; width: 18px; height: 18px; background: var(--accent); border-radius: 50%; display: none; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 0 0 2px var(--bg), 0 2px 6px rgba(0,0,0,.4); transition: transform 120ms ease; }
.stage-handle svg { stroke: var(--accent-fg); }
.stage-handle:hover { transform: scale(1.15); }
.stage-el.selected .stage-handle { display: flex; }
.stage-handle--resize { bottom: -9px; right: -9px; cursor: se-resize; }
.stage-handle--rotate { top: -9px; right: -9px; cursor: grab; }
.stage-handle--rotate:active { cursor: grabbing; }

/* Custom SVG icons in the library */
.icon-lib__upload { padding: 6px 4px 10px; }
.icon-lib__item { position: relative; }
.icon-lib__item.is-custom { padding-right: 22px; }
.icon-lib__remove { display: none; position: absolute; top: 4px; right: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface-2); border: none; color: var(--fail); font-size: 9px; cursor: pointer; align-items: center; justify-content: center; }
.icon-lib__item:hover .icon-lib__remove { display: flex; }
.props-section--danger { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.props-section--danger kbd { font-size: 10px; opacity: .6; border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; margin-left: 4px; }

/* Rider browser */
.modal.browser { max-width: 760px; width: 100%; padding: 0; max-height: 86vh; display: flex; flex-direction: column; position: relative; }
.browser__head { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.browser__head h3 { font-size: 18px; margin: 0; flex: none; }
.browser__search { flex: 1; }
.browser__body { overflow-y: auto; padding: 14px 22px 22px; }
.browser__empty { color: var(--fg-muted); font-size: 13px; text-align: center; padding: 30px; }
.bfolder { margin-bottom: 14px; }
.bfolder__head { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--border); cursor: default; }
.bfolder__chev { color: var(--fg3); cursor: pointer; transition: transform var(--dur) var(--ease); font-size: 11px; width: 14px; }
.bfolder.collapsed .bfolder__chev { transform: rotate(-90deg); }
.bfolder__name { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .02em; color: var(--fg1); }
.bfolder__name svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; color: var(--fg3); }
.bfolder__count { font-size: 11px; color: var(--fg-muted); }
.bfolder__spacer { flex: 1; }
.bfolder__head .iconbtn { opacity: 0; transition: opacity var(--dur); }
.bfolder__head:hover .iconbtn, .bfolder__head .iconbtn.is-open, .bfolder__head .iconbtn:focus-visible { opacity: 1; }
.bfolder__head .iconbtn svg { width: 14px; height: 14px; }
.bfolder__pencil { margin-left: -2px; }
.bfolder__riders { padding-top: 6px; }
.bfolder.collapsed .bfolder__riders { display: none; }
/* Inline create bar (folder / rider) — slides down */
.browser__create {
  display: block; max-height: 0; opacity: 0; overflow: hidden; padding: 0 22px;
  border-bottom: 1px solid transparent;
  transition: max-height .3s var(--ease), opacity .2s var(--ease), padding .3s var(--ease), border-color .3s var(--ease);
}
.browser__create.open { max-height: 110px; opacity: 1; padding: 14px 22px; border-bottom-color: var(--border); }
/* max-height is only the slide-down animation trick — it must comfortably exceed
   the tallest content (preset chips wrapped to two rows + the full section
   checkbox grid), or the second checkbox row gets CLIPPED by the divider. */
.browser__create.open.has-types.expanded { max-height: 1200px; }   /* 640 clipped the section grid's heading + rows on wide windows */
.browser__create-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; }
.browser__create-types { display: none; margin-top: 14px; }
.browser__create.has-types.expanded .browser__create-types { display: block; animation: createGlow .6s var(--ease); }
.bc-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); margin: 4px 0 8px; }
/* The dialog is ~756px wide at EVERY viewport, so chip sizing cannot key off a
   viewport media query: at the old 6px/12px metrics the seventh chip ("Sesja
   studyjna") always wrapped to a lonely second row. Slightly compact chips fit
   the full preset set on one row; if a translation ever pushes them over, the
   row still wraps with consistent gaps. */
.bc-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bc-preset { padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--fg2); font-size: 11.5px; cursor: pointer; transition: all var(--dur) var(--ease); white-space: nowrap; }
.bc-preset:hover { border-color: var(--fg2); color: var(--fg1); }
.bc-preset.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.bc-sections { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.bc-sections .checkrow { font-size: 12.5px; }
/* A section BOUND to the rider type (studio): visibly part of the rider but not
   a free toggle — checked, disabled, slightly dimmed, no lock icon. */
.checkrow.is-bound { opacity: .75; cursor: default; }
.checkrow.is-bound input:disabled { accent-color: var(--accent); }
.browser__create-ico { display: inline-flex; color: var(--fg3); }
.browser__create-ico svg { width: 18px; height: 18px; }
.browser__create .inp { animation: createGlow .9s var(--ease); }
@keyframes createGlow { 0% { box-shadow: 0 0 0 3px rgba(255,255,255,.12); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* newly added folder/rider flash */
.bfolder.just-added > .bfolder__head, .brow.just-added { animation: browFlash 1.1s var(--ease); }
@keyframes browFlash { 0% { background: rgba(111,207,151,.22); } 100% { background: transparent; } }
.brow.just-added { animation: browSlideIn .32s var(--ease), browFlash 1.1s var(--ease); }
@keyframes browSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.brow { display: flex; gap: 10px; align-items: center; padding: 8px 8px; border-radius: var(--radius-sm); transition: background var(--dur), opacity var(--dur); cursor: pointer; outline: none; }
.brow:hover { background: var(--surface-2); }
.brow.active { background: rgba(111,207,151,.09); box-shadow: inset 3px 0 0 var(--accent); }
.brow.kb { outline: 1px solid var(--accent); outline-offset: -1px; }
.brow.dragging { opacity: .4; }
.brow__grip { cursor: grab; color: var(--fg-muted); text-align: center; user-select: none; font-size: 13px; flex: none; }
.brow__grip:active { cursor: grabbing; }
.brow__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.brow__titlerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brow__title { font-size: 13.5px; color: var(--fg1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow:hover .brow__title { color: var(--accent); }
.brow__pill { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-fg); }
.brow__meta { font-size: 11px; color: var(--fg-muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.brow__meta svg { width: 12px; height: 12px; vertical-align: -2px; }
.brow__dot::before { content: '·'; }
.brow__rename { font-size: 13.5px; padding: 3px 7px; max-width: 320px; }
.brow__actions { display: flex; align-items: center; gap: 2px; flex: none; }
.brow__actions .iconbtn { opacity: .55; }
.brow:hover .brow__actions .iconbtn, .brow.kb .brow__actions .iconbtn, .brow__actions .iconbtn.is-open { opacity: 1; }
.iconbtn--more { font-size: 16px; font-weight: 700; letter-spacing: -1px; }
.brow .iconbtn svg { width: 15px; height: 15px; }
/* drop target highlight */
.bfolder { border-radius: var(--radius-sm); transition: background var(--dur), box-shadow var(--dur); }
.bfolder.drop-hover { background: rgba(111,207,151,.07); box-shadow: inset 0 0 0 1.5px rgba(111,207,151,.5); }
/* double-click-to-rename */
.bfolder__name[data-renamefolder] { cursor: text; }
.bfolder__rename { font-family: var(--font-display); font-weight: 800; font-size: 13px; padding: 3px 7px; max-width: 240px; }

/* ════ Startup splash (logo + fade, every login) ════ */
.splash { position: fixed; inset: 0; z-index: 500; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity 520ms var(--ease), visibility 520ms; }
.splash.is-hiding { opacity: 0; visibility: hidden; pointer-events: none; }
.splash__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; animation: splashIn 620ms var(--ease); }
.splash__logo { width: clamp(150px, 26vw, 240px); height: auto; opacity: .96; }
.splash__bar { width: 140px; height: 3px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.splash__bar span { display: block; height: 100%; width: 40%; border-radius: 999px; background: var(--accent); animation: splashBar 1.15s var(--ease) infinite; }
@keyframes splashIn { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes splashBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* ════ Home / welcome dashboard ════ */
.modal.home { max-width: 560px; animation: homeIn 320ms var(--ease); }
@keyframes homeIn { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
.home__head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.home__logo { width: 56px; height: 56px; flex: none; }
.home__greet { font-size: 21px; margin: 0 0 2px; }
.home__sub { color: var(--fg3); font-size: 13.5px; margin: 0; }
.home__actions { display: flex; gap: 10px; margin-bottom: 22px; }
.home__actions .btn { flex: 1; }
.home__recent-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; }
.home__recent { display: flex; flex-direction: column; gap: 6px; }
.home__empty { color: var(--fg-muted); font-size: 13px; padding: 14px 2px; }
.home-rider { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--fg1); cursor: pointer; transition: border-color var(--dur), background var(--dur); }
.home-rider:hover { border-color: var(--border-strong); }
.home-rider__name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-rider__meta { font-size: 11.5px; color: var(--fg-muted); flex: none; }

/* ════ First-time welcome modal ════ */
.modal.welcome { max-width: 480px; text-align: center; animation: homeIn 320ms var(--ease); }
.welcome__logo { width: 60px; height: 60px; margin: 0 auto 14px; display: block; }
.welcome__lead { color: var(--fg3); font-size: 13.5px; line-height: 1.6; margin: 6px 0 18px; }
.welcome__list { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding: 0; }
.welcome__list li { position: relative; padding-left: 26px; font-size: 13.5px; color: var(--fg2); }
.welcome__list li::before { content: '✓'; position: absolute; left: 0; top: -1px; color: var(--accent); font-weight: 700; }
.welcome__foot { justify-content: space-between; }

/* ════ Multi-select bulk-delete bar + row checkbox ════ */
.brow.selected { background: rgba(255,255,255,.05); outline: 1px solid var(--border-strong); }
.brow__check { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex: none; }
/* Selection bar floats over the list bottom instead of being inserted above
   it — inserting pushed the whole list down, so the row you had just ticked
   jumped away from the pointer. */
.browser__selbar { position: absolute; left: 22px; right: 22px; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); box-shadow: 0 10px 30px rgba(0,0,0,.45); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.browser__selbar.open { opacity: 1; transform: none; pointer-events: auto; }
.browser__body { padding-bottom: 70px; }
.selbar__count { font-size: 13px; color: var(--fg2); font-weight: 500; }
.selbar__spacer { flex: 1; }

/* ════ Auth-screen language toggle ════ */
.auth-lang { position: absolute; top: 20px; right: 20px; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); z-index: 2; }
.auth-lang__btn { border: none; background: transparent; color: var(--fg3); font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; padding: 5px 11px; border-radius: var(--radius-pill); cursor: pointer; transition: color var(--dur), background var(--dur); }
.auth-lang__btn:hover { color: var(--fg1); }
.auth-lang__btn.active { background: var(--accent); color: var(--accent-fg); }

/* ── Rider sharing (0011) ─────────────────────────────────────────────── */
/* View/comment lock: the section forms become non-interactive; nav, rider
   switching and export stay live (they're outside .editor .section). */
body.share-readonly .editor .section input,
body.share-readonly .editor .section textarea,
body.share-readonly .editor .section select,
body.share-readonly .editor .section button:not([data-open]):not([data-dlpdf]),
body.share-readonly .editor .section .stage-canvas,
body.share-readonly .editor .section [contenteditable]{
  pointer-events:none !important;
}
body.share-readonly .editor .section{ opacity:.92; }
.share-banner{
  position:sticky; top:0; z-index:6; margin:-4px 0 14px; padding:9px 14px;
  border-radius:10px; font-size:13px; display:flex; align-items:center; gap:10px;
  background:rgba(242,201,76,.12); border:1px solid rgba(242,201,76,.4); color:var(--fg,#f4f3f0);
}
.share-banner.mode-edit{ background:rgba(90,200,120,.12); border-color:rgba(90,200,120,.4); }
.share-banner b{ text-transform:uppercase; letter-spacing:.4px; font-size:11px; }
.brow__rolebadge{
  display:inline-block; padding:1px 7px; border-radius:6px; font-size:10px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase; vertical-align:middle;
  background:rgba(255,255,255,.08); border:1px solid var(--border,#34343a);
}
.brow__rolebadge.role-editor{ background:rgba(90,200,120,.16); }
.brow__rolebadge.role-commenter{ background:rgba(90,150,240,.16); }
.bfolder--shared .bfolder__label{ color:var(--accent,#fff); }
/* Share dialog reuses the modal shell; role picker */
.share-role{ display:flex; gap:8px; margin:10px 0; }
.share-role label{ flex:1; text-align:center; padding:8px; border:1px solid var(--border,#34343a);
  border-radius:8px; cursor:pointer; font-size:13px; }
.share-role input{ display:none; }
.share-role input:checked + span{ font-weight:700; }
.share-role label:has(input:checked){ border-color:var(--fg2,#b6b6bc); background:rgba(255,255,255,.06); }
.share-list__row{ display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--border,#34343a); font-size:13px; }
.share-list__row .grow{ flex:1; }

/* ── Comments panel (rider sharing) ───────────────────────────────────────── */
.cm-toggle{position:fixed;right:20px;bottom:20px;z-index:70;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--fg1);font-size:22px;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s ease}
.cm-toggle:hover{transform:translateY(-2px)}
.comments{position:fixed;top:0;right:0;z-index:80;width:min(380px,92vw);height:100vh;display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--border);box-shadow:-8px 0 28px rgba(0,0,0,.35);
  transform:translateX(105%);transition:transform .22s ease;pointer-events:none}
.comments.open{transform:none;pointer-events:auto}
.comments__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.comments__list{flex:1;overflow-y:auto;padding:8px 12px}
.comments__new{border-top:1px solid var(--border);padding:12px}
.comments__new textarea{width:100%;resize:vertical;margin-bottom:8px}
.comments__anchor{font-size:12px;opacity:.7;margin-bottom:6px}
.cm{padding:10px 12px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px}
.cm.resolved{opacity:.5}
.cm.resolved .cm__body{text-decoration:line-through}
.cm__meta{font-size:11px;opacity:.75;margin-bottom:4px}
.cm__sec{color:var(--accent)}
.cm__body{font-size:14px;white-space:pre-wrap;word-break:break-word}
.cm__resolve{margin-top:6px;background:none;border:0;padding:0;color:var(--accent);font-size:12px;cursor:pointer}
/* the read-only overlay must not swallow clicks in the comments panel */
body.share-readonly .comments,body.share-readonly .cm-toggle{pointer-events:auto}

/* ── Public-link dialog ─────────────────────────────────────────────────── */
/* Section toggles. The ones that publish personal data are marked, because the
   difference between "my PA spec is public" and "my tour manager's phone number
   is public" is the whole risk of this feature. */
.pub-secs { display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:6px 12px; margin-top:6px }
.pub-sec { display:flex; align-items:center; gap:.5rem; font-size:14px; cursor:pointer; padding:4px 0 }
.pub-sec input { flex:none; accent-color:var(--fg1,#f4f3f0) }
.pub-sec em { font-style:normal; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
              color:var(--warn,#e0a33e); white-space:nowrap }
.pub-sec--warn span { color:var(--warn,#e0a33e) }

.pub-embed { margin-top:14px; border-top:1px solid var(--border,#2a2a30); padding-top:12px }
.pub-embed summary { cursor:pointer; font-size:14px; font-weight:600; margin-bottom:6px }
.pub-embed textarea { width:100%; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; resize:vertical }

#pubUrl { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px }

/* ── Stage layers panel ─────────────────────────────────────────────────
   Editor-only visibility + z-order. Rows are compact because a busy plan can
   easily run to 40 entries and the panel sits under the canvas, not beside it. */
.stage-layers { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.stage-layers__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.stage-layers__title { font-size: 12px; font-weight: 600; color: var(--fg1); letter-spacing: .02em; }
.stage-layers__count { font-size: 11px; color: var(--fg3); }
.stage-layers__spacer { flex: 1; }
.stage-layers__list { max-height: 260px; overflow-y: auto; }
.stage-layers__empty { padding: 12px; font-size: 12px; color: var(--fg3); }
.layer-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--fg2); }
.layer-row:last-child { border-bottom: 0; }
.layer-row:hover { background: var(--surface-2); }
.layer-row.is-selected { background: color-mix(in oklab, var(--accent) 14%, transparent); }
.layer-row.is-hidden .layer-row__name, .layer-row.is-hidden .layer-row__icon { opacity: .38; }
.layer-row__icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--fg2); }
.layer-row__icon svg { width: 100%; height: 100%; }
.layer-row__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.layer-row__kind { font-size: 10px; color: var(--fg3); text-transform: uppercase; letter-spacing: .04em; }
.layer-btn { border: 0; background: none; cursor: pointer; color: var(--fg3); padding: 2px 4px; border-radius: 4px; font-size: 12px; line-height: 1; }
.layer-btn:hover { background: var(--surface-2); color: var(--fg1); }
.layer-btn:disabled { opacity: .25; cursor: default; }
.layer-btn:disabled:hover { background: none; color: var(--fg3); }
/* Per-layer mask override — one glyph, three readable states. */
.layer-btn--clip { font-size: 11px; }
.layer-btn--clip.is-inherit { opacity: .32; }
.layer-btn--clip.is-on { color: var(--accent); opacity: 1; }
.layer-btn--clip.is-off { color: #d06a6a; opacity: 1; text-decoration: line-through; }
.stage-dims__clip { grid-column: 1 / -1; margin-top: 2px; }
.stage-dims__opacity { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); }
.stage-dims__opacity input[type=range] { flex: 1; }
/* Input-list toolbar (add / template / group / duplicate / move / paste) rides
   along while the list scrolls, tucked under the sticky app bar. The io-hint
   below it is part of the same sticky block so the shortcuts stay readable. */
#ioInput > .toolbar { position: sticky; top: 62px; z-index: 20; background: var(--bg); padding: 8px 0; margin-bottom: 8px; box-shadow: 0 8px 12px -10px rgba(0,0,0,.6); }
/* Renumber popover + selection shortcut hint on the input-list toolbar */
.renum-pop { padding: 10px 12px; min-width: 220px; }
.renum-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.renum-row:last-child { margin-bottom: 0; }
.renum-preview { color: var(--fg-muted); }
.renum-actions { gap: 6px; }
.io-selhint { font-size: 12px; color: var(--fg-muted); margin-left: 4px; }
.renum-title { font-size: 12px; color: var(--fg-muted); max-width: 240px; }
/* Equipment summary under the input list (derived; also printed in the PDF) */
.io-sum { margin: 6px 0 18px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.io-sum:empty { display: none; }
.io-sum__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.io-sum__title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); }
.io-sum__row { display: grid; grid-template-columns: 110px 1fr; align-items: start; gap: 6px; margin: 4px 0; }
.io-sum__lbl { font-size: 11px; color: var(--fg-muted); padding-top: 4px; }
.io-sum__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.io-sum__chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--fg2); }
.io-sum__chip b { color: var(--fg1); font-weight: 600; }
/* Row tint (inputList[].color): a translucent wash so the text keeps contrast */
.drow.has-tint > td { background: color-mix(in srgb, var(--row-tint) 16%, transparent); }
.drow.has-tint.is-rowsel > td { background: color-mix(in srgb, var(--row-tint) 30%, var(--accent) 12%); }
.iconbtn--color { padding: 0 4px; }
.row-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border-strong); vertical-align: middle; }
.row-color-pop { position: fixed; top: 0; left: 0; padding: 8px; }
.row-color-grid { display: grid; grid-template-columns: repeat(4, 26px); gap: 6px; }
.row-color-sw { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); cursor: pointer; }
.row-color-sw--none { background: transparent; color: var(--fg-muted); font-size: 12px; }
.dcell--act { width: 88px; }
/* Source picker: inline suggestions + catalogue dialog */
.src-suggest { position: fixed; z-index: 200; display: none; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 10px 32px rgba(0,0,0,.5); padding: 4px; max-width: 420px; }
.src-suggest.open { display: block; }
.src-suggest__item { padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--fg2); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.src-suggest__item b { color: var(--fg1); }
.src-suggest__item.is-hi, .src-suggest__item:hover { background: var(--surface-2); }
.src-suggest__brand { color: var(--fg3); }
.src-suggest__meta { flex-basis: 100%; font-size: 11px; color: var(--fg-muted); }
.src-suggest__hint { font-size: 10.5px; color: var(--fg-muted); padding: 4px 10px 2px; border-top: 1px solid var(--border); margin-top: 2px; }
.modal.src-cat { max-width: 860px; padding: 20px; }
.src-cat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.src-cat__top .modal__desc { margin-bottom: 10px; }
.src-cat__q { width: 100%; margin-bottom: 10px; }
.src-cat__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.src-cat__cats .chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--fg2); cursor: pointer; }
.src-cat__cats .chip.is-on { background: var(--fg1); color: var(--bg); border-color: var(--fg1); }
.src-cat__body { display: grid; grid-template-columns: 220px 1fr; gap: 12px; height: min(60vh, 560px); }
.src-cat__brands { overflow-y: auto; border-right: 1px solid var(--border); padding-right: 8px; }
.src-cat__brand { display: flex; justify-content: space-between; width: 100%; text-align: left; padding: 6px 8px; border: 0; background: transparent; color: var(--fg2); border-radius: 6px; cursor: pointer; font-size: 13px; }
.src-cat__brand span { color: var(--fg-muted); font-size: 11px; }
.src-cat__brand.is-on, .src-cat__brand:hover { background: var(--surface-2); color: var(--fg1); }
.src-cat__list { overflow-y: auto; }
.src-cat__gh { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); margin: 10px 0 4px; position: sticky; top: 0; background: var(--surface); padding: 4px 0; }
.src-cat__item { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--fg2); cursor: pointer; font-size: 13px; }
.src-cat__item b { color: var(--fg1); font-weight: 600; }
.src-cat__item:hover { background: var(--surface-2); }
.src-cat__brandsm { color: var(--fg3); font-size: 12px; }
.src-cat__meta { grid-column: 1 / -1; font-size: 11px; color: var(--fg-muted); }
.src-cat__meta em { font-style: normal; color: var(--fg2); }
.src-cat__empty { color: var(--fg-muted); padding: 20px; text-align: center; }
@media (max-width: 720px) { .src-cat__body { grid-template-columns: 1fr; } .src-cat__brands { display: none; } }
/* Input-list help: one line visible, the rest folded */
.io-tips { display: inline-block; margin-left: 8px; }
.io-tips summary { cursor: pointer; color: var(--fg2); font-size: 12px; list-style: none; }
.io-tips summary::before { content: '▸ '; }
.io-tips[open] summary::before { content: '▾ '; }
.io-tips ul { margin: 6px 0 0; padding-left: 18px; color: var(--fg3); font-size: 12px; line-height: 1.5; max-width: 78ch; }
.io-tips li { margin: 2px 0; }
/* Combobox: text field + list button (stand type) */
.combo { display: flex; align-items: stretch; width: 100%; }
.combo .inp--combo { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Inside the table the field is borderless until focused, so the button is a
   bare glyph too — the boxed version read as a separate control. */
.combo__btn { flex: 0 0 22px; border: 0; background: transparent; color: var(--fg3); cursor: pointer; font-size: 10px; padding: 0; }
.combo__btn:hover, .combo:focus-within .combo__btn { color: var(--fg1); }
.dcell .combo .inp--combo:focus { border-top-right-radius: var(--radius-sm, 6px); border-bottom-right-radius: var(--radius-sm, 6px); }
/* DI box row: the stand is moot, so the field is dimmed (still editable) */
.combo.is-di .inp--combo, .combo.is-di .combo__btn { opacity: .38; }
.combo.is-di .inp--combo:focus { opacity: 1; }

/* ════ Rider browser: row/folder “⋯” popover, create-bar extras ════ */
.bmenu { position: absolute; top: 0; left: 0; min-width: 200px; z-index: 40; }
.bmenu .bmenu__title { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); padding: 6px 12px 4px; }
.bmenu .bmenu__sep { height: 1px; background: var(--border); margin: 5px 4px; }
.bmenu button.is-danger { color: #e7716b; }
.bmenu button.is-danger:hover { background: rgba(231,113,107,.12); color: #ff8a84; }
.bmenu button.is-current { color: var(--fg1); font-weight: 600; }
.bmenu button.is-current::after { content: '✓'; float: right; color: var(--accent); }
.bmenu button .bmenu__arrow { float: right; color: var(--fg-muted); }
.browser__create-sub { display: none; align-items: center; gap: 12px; margin-top: 8px; min-height: 20px; }
.browser__create.has-types .browser__create-sub { display: flex; }
.bc-more { background: none; border: none; color: var(--fg3); font-family: var(--font-sans); font-size: 12px; padding: 2px 0; cursor: pointer; }
.bc-more:hover { color: var(--fg1); }
.bc-folderchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg2); padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); }
.bc-folderchip svg { width: 12px; height: 12px; color: var(--fg3); }
.bc-folderchip[hidden] { display: none; }
.bc-folderchip button { background: none; border: none; color: var(--fg-muted); cursor: pointer; padding: 0 0 0 2px; font-size: 12px; line-height: 1; }
.bc-folderchip button:hover { color: var(--fg1); }