/* Puff Geeks operator console — redesigned to the marketing-site design
   language (see Software.dc.html): deep-space ink + galaxy glow, Manrope 800
   display / Roboto body / Roboto Mono labels, glass panels, purple & cyan
   accents, pill actions. Every selector the views rely on is preserved —
   this file is presentation only. */
:root {
  --ink: #030308;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-high: #14151f;
  --line: rgba(255, 255, 255, 0.09);
  --purple: #8b5cf6;
  --purple-dim: #7c4fe0;
  --purple-soft: #c4b5fd;
  --cyan: #22d3ee;
  --cyan-soft: #67e8f9;
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
  --text: #ede8dc;
  --bright: #f5f1e6;
  --dim: #b0ab9e;
  --faint: #6b6658;
  --display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  position: relative;
}
/* Galaxy backdrop — static, sits behind everything. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 50% -14%, rgba(139, 92, 246, 0.15), transparent 68%),
    radial-gradient(900px 540px at 92% 110%, rgba(34, 211, 238, 0.07), transparent 68%),
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 33% 58%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1.5px 1.5px at 58% 12%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1px 1px at 79% 38%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1.5px 1.5px at 91% 72%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1px 1px at 22% 84%, rgba(255, 255, 255, 0.18), transparent),
    var(--ink);
}
a { color: var(--cyan-soft); text-decoration: none; }
a:hover { color: var(--purple-soft); }

.boot { padding: 80px; text-align: center; color: var(--dim); font-size: 15px; font-family: var(--mono); letter-spacing: 1px; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 244px; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border-right: 1px solid var(--line); padding: 22px 16px;
  display: flex; flex-direction: column; gap: 3px;
  position: sticky; top: 0; height: 100vh;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; }
.brand-tile {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid rgba(237, 232, 220, 0.35);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--bright);
  background: linear-gradient(160deg, rgba(139,92,246,.25), rgba(34,211,238,.12));
}
.brand-name { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -0.3px; color: var(--bright); line-height: 1.15; }
.brand-name small, .brand small { display: block; font-family: var(--mono); color: var(--faint); font-weight: 400; font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase; margin-top: 2px; }
.nav-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--faint); padding: 4px 12px 8px; }
.nav-item {
  display: block; padding: 10px 14px; border-radius: 12px; color: var(--dim);
  font-weight: 500; cursor: pointer; font-size: 14px;
  border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.05); color: var(--text); text-decoration: none; }
.nav-item.active {
  background: linear-gradient(120deg, rgba(139,92,246,.28), rgba(139,92,246,.14));
  border-color: rgba(139,92,246,.45);
  color: #fff; font-weight: 700;
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.22);
}
.sidebar .spacer { flex: 1; }
.whoami { padding: 14px 12px 4px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--dim); line-height: 1.7; }
.whoami b { color: var(--bright); display: block; font-family: var(--display); font-weight: 700; font-size: 13.5px; }

.main { flex: 1; min-width: 0; padding: 34px 40px 60px; max-width: 1280px; background: transparent; }

/* customer topbar variant */
.topbar {
  display: flex; align-items: center; gap: 20px; padding: 14px 30px;
  background: rgba(3, 3, 8, 0.75); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.topbar .brand { padding: 0; }
.topbar .nav-item { padding: 8px 14px; }
.topbar .spacer { flex: 1; }
.page { padding: 30px; max-width: 1100px; margin: 0 auto; min-width: 0; }

/* ---------- components ---------- */
h1 { font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -0.9px; color: var(--bright); margin-bottom: 5px; }
h2 { font-family: var(--display); font-size: 16.5px; font-weight: 800; letter-spacing: -0.3px; color: var(--bright); margin-bottom: 12px; }
h2::before { content: '// '; font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--cyan-soft); letter-spacing: 1px; vertical-align: 1px; }
.sub { color: var(--dim); margin-bottom: 26px; font-size: 14.5px; line-height: 1.6; }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.35);
  padding: 22px; margin-bottom: 20px;
  overflow-x: auto;
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  padding: 16px 18px;
}
.kpi .label { color: var(--dim); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; }
.kpi .value { font-family: var(--display); font-size: 25px; font-weight: 800; letter-spacing: -0.8px; margin-top: 6px; color: var(--bright); }
.kpi .value.good { color: var(--green); }
.kpi .value.bad { color: var(--red); }
.kpi .value.warn { color: var(--amber); }
.kpi .value.accent { color: var(--cyan-soft); }

.thumb-wrap { display: inline-block; cursor: pointer; vertical-align: middle; margin-right: 10px; }
.thumb {
  width: 36px; height: 36px; border-radius: 11px; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); vertical-align: middle;
}
.thumb-emoji { font-size: 18px; }
.thumb-wrap:hover .thumb { border-color: var(--purple); box-shadow: 0 0 14px rgba(139,92,246,.3); }
.thumb-wrap.no-edit { cursor: default; }
.thumb-wrap.no-edit:hover .thumb { border-color: var(--line); box-shadow: none; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--faint); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 500; padding: 9px 10px; border-bottom: 1px solid var(--line); }
td { padding: 11px 10px; border-bottom: 1px solid rgba(255,255,255,.055); vertical-align: middle; font-size: 14px; }
tr:last-child td { border-bottom: none; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: rgba(255,255,255,.04); }
td b { color: var(--bright); }

.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; font-family: var(--display); border: 1px solid transparent; letter-spacing: 0.2px; }
.badge.ok { background: rgba(34,197,94,.1); color: var(--green); border-color: rgba(34,197,94,.35); }
.badge.bad { background: rgba(239,68,68,.1); color: var(--red); border-color: rgba(239,68,68,.35); }
.badge.warn { background: rgba(245,158,11,.1); color: var(--amber); border-color: rgba(245,158,11,.35); }
.badge.info { background: rgba(34,211,238,.09); color: var(--cyan-soft); border-color: rgba(34,211,238,.35); }
.badge.dim { background: rgba(176,171,158,.08); color: var(--dim); border-color: rgba(176,171,158,.25); }

button, .btn {
  background: var(--purple); color: #fff; border: 1px solid transparent; border-radius: 999px;
  padding: 10px 20px; font-weight: 700; font-size: 13.5px; cursor: pointer;
  font-family: var(--display); letter-spacing: 0.1px;
  transition: background .15s, box-shadow .15s;
}
button:hover { background: var(--purple-dim); box-shadow: 0 0 22px rgba(139, 92, 246, 0.4); }
button.ghost { background: rgba(255,255,255,.055); color: var(--text); border-color: rgba(255,255,255,.14); box-shadow: none; }
button.ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(34,211,238,.4); color: var(--cyan-soft); box-shadow: none; }
button.danger { background: rgba(239,68,68,.14); color: var(--red); border-color: rgba(239,68,68,.45); }
button.danger:hover { background: rgba(239,68,68,.24); box-shadow: 0 0 18px rgba(239, 68, 68, 0.25); }
button.small { padding: 5px 14px; font-size: 12px; }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

input, select, textarea {
  background: rgba(0, 0, 0, 0.35); color: var(--bright); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 10px 13px; font-size: 14px; font-family: 'Roboto', sans-serif; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(34, 211, 238, 0.6); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1); }
label { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-bottom: 6px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; }

/* Machine-grant checklists (Team view) */
label.checkline {
  display: flex; align-items: center; gap: 9px; font-family: 'Roboto', sans-serif; font-size: 14px; color: var(--text);
  font-weight: 400; padding: 6px 2px; margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0;
}
label.checkline input[type="checkbox"] { width: auto; accent-color: var(--purple); }
/* Support desk chooser + kiosk picker (views/support.js).
   The two desks are laid out as equal-weight cards rather than a dropdown:
   this pick decides who reads the customer's report, so it should not look
   like an afterthought the way a collapsed <select> does. */
.desk-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.desk-option {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer;
  font-family: 'Roboto', sans-serif; font-size: 13.5px; color: var(--text); font-weight: 400;
  text-transform: none; letter-spacing: 0; line-height: 1.45;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.desk-option:hover { border-color: rgba(255,255,255,.2); }
.desk-option input[type="radio"] { width: auto; margin-top: 3px; accent-color: var(--cyan); flex: none; }
.desk-option:has(input:checked) { border-color: rgba(34, 211, 238, .55); background: rgba(34, 211, 238, .06); }
.desk-option .muted { font-size: 12px; }

.picker-list {
  max-height: 260px; overflow-y: auto; margin-top: 8px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.22);
}
.picker-row {
  display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer;
  font-family: 'Roboto', sans-serif; font-size: 13.5px; color: var(--text); font-weight: 400;
  text-transform: none; letter-spacing: 0; padding: 9px 13px; border-bottom: 1px solid var(--line);
}
.picker-row:last-child { border-bottom: none; }
.picker-row:hover { background: rgba(255,255,255,.04); }
.picker-row input[type="radio"] { width: auto; accent-color: var(--cyan); flex: none; }
.picker-main { flex: 1; min-width: 0; }
/* Tabular figures so a column of distances lines up on the decimal. */
.picker-dist { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* "Where you're signed in" (views/privacy.js). The device you are reading on
   is tinted rather than merely labelled, so the one row without a Sign out
   button is obviously the one you're using and not a broken control. */
.session-row {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--panel); margin-bottom: 8px; font-size: 13.5px;
}
.session-row.current { border-color: rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .06); }
.session-main { min-width: 0; line-height: 1.55; }
.session-row button { flex: none; }

.field { margin-bottom: 14px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.row .field { flex: 1; min-width: 150px; margin-bottom: 0; }
.inline-input { width: 80px; padding: 5px 9px; border-radius: 9px; }
.pricing-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pricing-cell label.mini { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 10px; color: var(--dim); font-weight: 500; }
.pricing-cell label.mini .inline-input { width: 66px; }
form .actions { margin-top: 16px; display: flex; gap: 10px; }

.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; position: relative; }
.auth-wrap::before {
  content: ''; position: absolute; left: 50%; top: -260px; width: 720px; height: 520px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(139,92,246,.22), transparent 70%);
  filter: blur(30px);
}
.auth-card {
  width: 410px; position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 36px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 90px rgba(0, 0, 0, 0.65);
}
.auth-card h1 { color: var(--bright); text-align: center; letter-spacing: -1px; }
.auth-card .sub { text-align: center; }
.auth-card button { width: 100%; padding: 13px; font-size: 14.5px; }
.auth-alt { text-align: center; margin-top: 18px; color: var(--dim); font-size: 13.5px; }
.error-box { background: rgba(239,68,68,.1); color: var(--red); border: 1px solid rgba(239,68,68,.3); border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; font-size: 13.5px; }
.hint-box { background: rgba(34,211,238,.05); border: 1px solid rgba(34,211,238,.18); color: var(--dim); border-radius: 12px; padding: 11px 14px; margin-top: 18px; font-size: 12px; line-height: 1.75; }

/* product grid (customer shop) */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.prod-card {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 20px 18px; text-align: center;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color .2s, transform .2s;
}
.prod-card:hover { border-color: rgba(139,92,246,.45); transform: translateY(-2px); }
.prod-card .emoji { font-size: 42px; }
.prod-card .name { font-family: var(--display); font-weight: 800; margin: 10px 0 2px; color: var(--bright); }
.prod-card .price { color: var(--cyan-soft); font-family: var(--display); font-weight: 800; font-size: 17px; }
.prod-card .meta { color: var(--dim); font-size: 12px; margin-top: 6px; }

.ad-banner {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(120deg, rgba(139,92,246,.16), rgba(34,211,238,.06));
  border: 1px solid rgba(139,92,246,.4); border-radius: 18px; padding: 14px 20px; margin-bottom: 20px; cursor: pointer;
}
.ad-banner .tag { font-family: var(--mono); font-size: 9px; color: var(--purple-soft); border: 1px solid rgba(139,92,246,.4); padding: 3px 9px; border-radius: 999px; letter-spacing: 1.5px; }
.ad-banner .title { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--bright); }
.ad-banner .by { color: var(--dim); font-size: 12.5px; }

/* ticket thread */
.thread { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.msg { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 12px 16px; max-width: 640px; }
.msg.staff { border-left: 3px solid var(--cyan); }
.msg.customer { border-left: 3px solid var(--purple); }
.msg .who { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.8px; color: var(--faint); margin-bottom: 5px; }

.muted { color: var(--dim); }
.mt { margin-top: 16px; }
.mb0 { margin-bottom: 0; }
.right { text-align: right; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Main content + a right rail — the commission statement's venue payout
   history. `minmax(0, 1fr)` and not `1fr`: a grid track's default min-width is
   auto, so one wide table inside the main column would push the rail off the
   page instead of scrolling inside its own card.
   Below 1000px the rail STACKS UNDER the content rather than narrowing. The
   page is 1100px wide at most, so a squeezed two-column layout would leave the
   main column around 380px — narrower than the KPI row and the statement
   tables need — and help nobody. Source order puts the rail last, so stacking
   it puts the history below the statement, which is the right reading order. */
.with-rail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 20px; align-items: start; }
@media (max-width: 1000px) { .with-rail { grid-template-columns: minmax(0, 1fr); } }

/* One period in the venue payout history rail. */
.rail-entry { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.rail-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.rail-entry .rail-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rail-entry .rail-amount { font-family: var(--display); font-weight: 800; color: var(--bright); }
.rail-entry .rail-period { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .3px; }
.rail-entry .rail-meta { color: var(--dim); font-size: 12px; margin-top: 4px; line-height: 1.5; }
.rail-entry.is-current { border-left: 2px solid var(--cyan-soft); padding-left: 10px; margin-left: -12px; }

details.creator { margin-bottom: 20px; }
details.creator summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--cyan-soft); padding: 6px 0; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(3, 3, 8, 0.72); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-box {
  background: var(--panel-high); border: 1px solid var(--line); border-radius: 18px;
  padding: 30px; max-width: 580px; width: 100%; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.modal-box h2 { margin-top: 0; }
.modal-box ul { padding-left: 20px; }

#toasts { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 100; }
.toast {
  background: rgba(16, 17, 26, 0.88); border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: 14px; padding: 13px 18px; min-width: 240px; font-size: 13.5px;
  box-shadow: 0 12px 36px rgba(0,0,0,.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.toast.ok { border-left-color: var(--green); }
.toast.bad { border-left-color: var(--red); }

/* Kiosk Preview tab: embedded customer-facing kiosk. Fills the viewport below
   the picker — the kiosk column sizes itself to the frame, so no black
   letterboxing/cutoff for the operator. */
.kiosk-frame {
  width: 100%; height: calc(100vh - 250px); min-height: 620px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--ink); display: block;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

.timeline { font-size: 13px; }
.timeline .step { padding: 6px 0 6px 18px; border-left: 2px solid rgba(139,92,246,.3); position: relative; }
.timeline .step::before { content: ''; position: absolute; left: -5px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 10px rgba(139,92,246,.6); }

/* Restock route map (MapLibre). Dark card frame; pins are numbered visit-order
   discs colored by priority level. */
.rs-map {
  width: 100%; height: 420px; margin: 14px 0;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: var(--panel-high);
}
.rs-pin {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px; font-family: var(--display);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  cursor: pointer;
}
.rs-pin-start { background: #16A34A; font-size: 16px; }
.rs-pin-live { font-size: 15px; animation: rsLivePulse 2s ease-in-out infinite; z-index: 5; }
@keyframes rsLivePulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 0 0 rgba(34,211,238,.55); }
  50% { box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 0 8px rgba(34,211,238,0); }
}
.maplibregl-popup-content { color: #1F1F1F; font-size: 13px; line-height: 1.5; border-radius: 12px; }
.maplibregl-popup-content a { color: #6D28D9; font-weight: 700; }
.btn-link {
  display: inline-block; background: var(--purple); color: #fff !important;
  padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 12.5px;
  font-family: var(--display);
  text-decoration: none; white-space: nowrap;
}
.btn-link:hover { filter: brightness(1.12); text-decoration: none; }

/* Shift budget bar on the route card. */
.rs-budget { margin: 10px 0 4px; }
.rs-budget-bar { height: 9px; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid var(--line); overflow: hidden; margin-bottom: 6px; }
.rs-budget-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--cyan)); border-radius: 6px; }

/* Language picker (sidebar footer / topbar / auth card). */
.lang-picker {
  margin: 8px 12px 0;
  padding: 6px 10px;
  font-size: 12px;
  background: rgba(255,255,255,.05);
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.lang-picker:hover { color: var(--bright); }
.topbar .lang-picker { margin: 0 10px 0 0; }
.auth-card .lang-picker { margin: 0; }

/* Scout tab (location scouting) */
.sc-card { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; }
.sc-card:hover { border-color: var(--purple-dim); }
.sc-score { min-width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #0b0b0b; font-size: 13px; }
.sc-pin { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #0b0b0b; font-size: 11px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: pointer; }
.sc-track { height: 7px; background: var(--panel-high); border-radius: 4px; overflow: hidden; margin-top: 2px; }
/* The hidden attribute must always win, even against display:flex utility
   classes (.row etc.) — without this, [hidden] rows like Scout's owner tabs
   render anyway because an author display rule beats the UA's [hidden]. */
[hidden] { display: none !important; }

/* ---- Scout full-bleed workspace -------------------------------------------
   Scout is a map tool, not a document: it opts out of .main's reading-column
   layout (1280px cap, generous padding) and fills the viewport — controls bar
   on top, results rail on the left, the map taking everything else, and the
   venue detail floating over the map like the standalone LocationScout app. */
.main.sc-full {
  max-width: none;
  padding: 16px 18px 18px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.sc-title { font-size: 22px; margin: 0 14px 4px 0; align-self: center; cursor: help; }
.sc-controls { margin: 0; padding: 12px 16px; flex: 0 0 auto; }
.sc-body { display: flex; gap: 12px; flex: 1; min-height: 0; }
.sc-side {
  flex: 0 0 350px; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; padding-right: 4px;
}
.sc-dash { grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; }
.sc-dash .kpi { padding: 10px 12px; }
.sc-dash .kpi .value { font-size: 19px; margin-top: 3px; }
.sc-maparea { position: relative; flex: 1; min-width: 0; }
.sc-maparea .rs-map { position: absolute; inset: 0; height: auto; margin: 0; }
.sc-pinbtn { position: absolute; top: 12px; left: 12px; z-index: 20; }
/* !important: MapLibre inlines grab/pointer cursors on its canvas. */
.sc-pin-armed .maplibregl-canvas-container, .sc-pin-armed .maplibregl-canvas { cursor: crosshair !important; }
.sc-detail {
  position: absolute; top: 12px; right: 12px; bottom: 12px;
  width: min(390px, 46%); overflow-y: auto; z-index: 25; margin: 0;
  box-shadow: 0 10px 32px rgba(0,0,0,.55);
  /* The glass .card gradient is tuned for the app's dark backdrop; floating
     over a LIGHT map it goes see-through and the text drowns. Solid ink. */
  background: #101018;
}
.sc-favcard { flex: 0 0 auto; }
@media (max-width: 1000px) {
  .main.sc-full { height: auto; overflow: visible; }
  .sc-body { flex-direction: column; }
  .sc-side { flex: none; max-height: none; overflow: visible; order: 2; }
  .sc-maparea { order: 1; min-height: 420px; }
  .sc-detail { position: static; width: auto; }
}

.sc-catdd { position: relative; }
.sc-catdd summary { list-style: none; display: inline-block; }
.sc-catdd summary::-webkit-details-marker { display: none; }
.sc-catpanel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 4px 14px; max-height: 280px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.sc-catpanel label { display: flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; cursor: pointer; }
.sc-fill { height: 100%; background: var(--purple); }