/* ============================================================================
   Band Stand — Monmouthshire Show 2026
   Show-branded (deep agricultural green + gold on warm cream), built big and
   high-contrast for reading on a bright field.
   ============================================================================ */

:root {
  --green-900:#0f3d26; --green-800:#13492e; --green-700:#15512f; --green-600:#1f6b46;
  --green-500:#2f8a5f; --green-300:#7cc09a;
  --gold-600:#b9851d;  --gold-500:#d8a32a;  --gold-300:#e7b84b; --gold-100:#f3e2b4;
  --cream:#f6f3ea; --paper:#fffdf8; --paper-2:#fbf8ef;
  --ink:#16241c; --ink-2:#33433a; --muted:#62716a; --line:#e6e1d2; --line-2:#efeadd;
  --danger:#b3372b; --danger-bg:#fbeae7;
  --behind:#c2491f; --ahead:#1f7a4d; --ontime:#5d6b62;
  --radius:16px; --radius-sm:11px; --radius-lg:22px;
  --shadow:0 1px 2px rgba(20,60,38,.06), 0 8px 22px rgba(20,60,38,.07);
  --shadow-lg:0 10px 40px rgba(15,61,38,.18);
  --safe-b:env(safe-area-inset-bottom,0px);
  --tabbar-h:62px;
  font-size:17px;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--cream); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
button { font-family:inherit; cursor:pointer; }
a { color:inherit; }
h1,h2,h3 { margin:0; }
input,textarea,select { font-family:inherit; }
:where(a, button, input, select, textarea, [role="switch"], summary):focus-visible {
  outline:3px solid var(--gold-500); outline-offset:2px; border-radius:4px;
}

/* ── App frame ─────────────────────────────────────────────────────────────── */
.app { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }

.topbar {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;
  background:linear-gradient(180deg,var(--green-700),var(--green-800));
  color:#fff; box-shadow:0 2px 14px rgba(15,61,38,.25);
}
.topbar-l { display:flex; align-items:center; gap:10px; }
.topbar-mark { width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:var(--gold-300); border:1px solid rgba(231,184,75,.4); }
.topbar-title { display:flex; flex-direction:column; line-height:1.1; }
.topbar-title strong { font-size:1.18rem; font-weight:800; letter-spacing:-.02em; }
.topbar-title span { font-size:.72rem; opacity:.8; font-weight:500; }
.topbar-r { display:flex; align-items:center; gap:10px; }

.sync-dot { display:flex; align-items:center; gap:6px; font-size:.7rem; font-weight:600;
  background:rgba(255,255,255,.13); padding:5px 9px; border-radius:999px; color:#fff; }
.sync-dot .dot { width:8px; height:8px; border-radius:50%; }
.sync-ok .dot { background:var(--green-300); box-shadow:0 0 0 3px rgba(124,192,154,.3); }
.sync-pending .dot { background:var(--gold-300); animation:pulse 1.2s infinite; }
.sync-offline { background:rgba(179,55,43,.85); }
.sync-label { white-space:nowrap; }
@media (max-width:360px){ .sync-label{ display:none; } }

.me-badge { border:none; background:transparent; padding:0; }
.me-avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-300); color:var(--green-900); font-weight:800; font-size:.95rem;
  border:2px solid rgba(255,255,255,.5); }

.content { flex:1; padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px); }

/* ── Bottom tab bar ────────────────────────────────────────────────────────── */
.tabbar {
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--paper); border-top:1px solid var(--line);
  padding-bottom:var(--safe-b); box-shadow:0 -2px 16px rgba(15,61,38,.06);
}
.tab { border:none; background:none; padding:9px 2px 8px; display:flex; flex-direction:column;
  align-items:center; gap:3px; color:var(--muted); font-size:.66rem; font-weight:600; height:var(--tabbar-h); }
.tab svg { stroke-width:1.9; }
.tab.active { color:var(--green-700); }
.tab.active svg { stroke-width:2.4; }

/* ── More sheet ────────────────────────────────────────────────────────────── */
.sheet-backdrop { position:fixed; inset:0; z-index:50; background:rgba(15,40,28,.42);
  display:flex; align-items:flex-end; animation:fade .15s ease; }
.sheet { width:100%; background:var(--paper); border-radius:22px 22px 0 0; padding:8px 12px;
  padding-bottom:calc(var(--safe-b) + 14px); box-shadow:var(--shadow-lg); animation:slideUp .22s ease; }
.sheet-handle { width:40px; height:4px; background:var(--line); border-radius:99px; margin:8px auto 10px; }
.sheet-grid { display:flex; flex-direction:column; gap:2px; }
.sheet-item { display:flex; align-items:center; gap:13px; padding:13px 10px; border:none; background:none;
  border-radius:12px; text-align:left; color:var(--ink); }
.sheet-item.active { background:var(--paper-2); }
.sheet-ico { width:38px; height:38px; border-radius:11px; background:rgba(31,107,70,.1); color:var(--green-700);
  display:grid; place-items:center; flex-shrink:0; }
.sheet-text { display:flex; flex-direction:column; flex:1; }
.sheet-text strong { font-size:.98rem; font-weight:700; }
.sheet-text span { font-size:.76rem; color:var(--muted); }
.sheet-go { color:var(--line); }

/* ── Viewer picker ─────────────────────────────────────────────────────────── */
.picker { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 22px; text-align:center; background:radial-gradient(120% 80% at 50% 0%, #1c6342 0%, var(--green-800) 55%, var(--green-900) 100%); color:#fff; }
.picker-badge { width:78px; height:78px; border-radius:22px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:var(--gold-300); border:1px solid rgba(231,184,75,.45); margin-bottom:18px; }
.picker-title { font-size:2.1rem; font-weight:900; letter-spacing:-.03em; }
.picker-sub { opacity:.8; margin:6px 0 0; font-size:.9rem; }
.picker-q { margin:34px 0 12px; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; opacity:.7; font-weight:700; }
.picker-cards { width:100%; max-width:380px; display:flex; flex-direction:column; gap:11px; }
.picker-card { display:flex; align-items:center; gap:14px; padding:15px 16px; border-radius:var(--radius);
  background:rgba(255,255,255,.96); border:none; color:var(--ink); box-shadow:var(--shadow); text-align:left; }
.picker-avatar { width:46px; height:46px; border-radius:50%; background:var(--green-700); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:1.2rem; }
.picker-info { flex:1; display:flex; flex-direction:column; }
.picker-info strong { font-size:1.1rem; font-weight:800; }
.picker-info span { font-size:.82rem; color:var(--muted); }
.picker-go { color:var(--line); }

/* ── Page scaffolding ──────────────────────────────────────────────────────── */
.page { padding:16px 14px 8px; max-width:640px; margin:0 auto; animation:fade .18s ease; }
.page-sub { margin:2px 2px 14px; color:var(--muted); font-size:.85rem; line-height:1.45; }
.section-title { display:flex; align-items:center; justify-content:space-between; margin:2px 2px 4px; }
.section-title h2 { font-size:1.5rem; font-weight:900; letter-spacing:-.02em; }
.sub-head { font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-600);
  font-weight:800; margin:18px 4px 8px; }
.title-actions { display:flex; gap:7px; }

.icon-pill { width:36px; height:36px; border-radius:11px; border:1px solid var(--line); background:var(--paper);
  color:var(--green-700); display:grid; place-items:center; text-decoration:none; }
.icon-pill.primary { background:var(--green-700); border-color:var(--green-700); color:#fff; }

.link-btn { border:none; background:none; color:var(--green-600); font-weight:700; font-size:.82rem;
  display:inline-flex; align-items:center; gap:4px; padding:0; }
.link-row { width:100%; display:flex; align-items:center; gap:8px; justify-content:center; margin:12px 0;
  padding:13px; border:1px solid var(--line); background:var(--paper); border-radius:var(--radius);
  color:var(--green-700); font-weight:700; font-size:.9rem; }
.link-row svg:last-child { margin-left:auto; color:var(--line); }
.big-ghost-btn { width:100%; margin:18px 0 8px; padding:15px; border:1.5px dashed var(--green-300);
  background:rgba(47,138,95,.06); color:var(--green-700); border-radius:var(--radius); font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px; }

/* ── Cards & mini lists ────────────────────────────────────────────────────── */
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:14px;
  margin-bottom:12px; box-shadow:var(--shadow); }
.card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.card-head h3 { font-size:1rem; font-weight:800; }
.mini-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.mini-list li { display:flex; align-items:flex-start; gap:9px; font-size:.92rem; line-height:1.35; }
.mini-dot { width:8px; height:8px; border-radius:50%; background:var(--green-500); margin-top:6px; flex-shrink:0; }
.mini-dot.warn { background:var(--gold-500); }
.mini-tag { font-style:normal; font-size:.72rem; color:var(--muted); background:var(--paper-2);
  border:1px solid var(--line); padding:1px 7px; border-radius:99px; margin-left:7px; }

/* ── Build-up countdown ────────────────────────────────────────────────────── */
.countdown-hero { background:linear-gradient(160deg,var(--green-700),var(--green-900)); color:#fff;
  border-radius:var(--radius-lg); padding:26px 20px; text-align:center; box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden; margin-bottom:14px; }
.countdown-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 80% -10%, rgba(231,184,75,.22), transparent 70%); }
.countdown-num { font-size:4.6rem; font-weight:900; line-height:.95; letter-spacing:-.04em; position:relative; }
.countdown-unit { font-size:1rem; font-weight:700; opacity:.85; margin-top:2px; position:relative; }
.countdown-clock { margin-top:14px; font-variant-numeric:tabular-nums; font-size:1.15rem; font-weight:800;
  color:var(--gold-300); position:relative; }
.countdown-clock span { font-size:.7rem; opacity:.7; margin-right:6px; font-weight:600; }
.countdown-date { margin-top:12px; font-size:.8rem; opacity:.8; position:relative; }

.focus-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.focus-card { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:14px;
  border-radius:var(--radius); border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow); text-align:left; }
.focus-ico { color:var(--muted); }
.focus-n { font-size:2rem; font-weight:900; line-height:1; letter-spacing:-.03em; }
.focus-l { font-size:.78rem; color:var(--muted); font-weight:600; }
.focus-warn { background:linear-gradient(180deg,#fff,rgba(216,163,42,.07)); border-color:var(--gold-100); }
.focus-warn .focus-n { color:var(--gold-600); }
.focus-warn .focus-ico { color:var(--gold-500); }
.focus-ok .focus-n { color:var(--green-600); }

/* ── Live show-day board ───────────────────────────────────────────────────── */
.live { max-width:560px; }
.preview-strip { display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--gold-100); border:1px solid var(--gold-300); color:var(--green-900);
  border-radius:12px; padding:8px 12px; font-size:.8rem; font-weight:700; margin-bottom:12px; }
.preview-strip span { display:inline-flex; align-items:center; gap:6px; }
.preview-strip button { border:none; background:var(--green-700); color:#fff; border-radius:8px; padding:4px 11px; font-weight:700; font-size:.76rem; }
.live-clock { text-align:center; font-variant-numeric:tabular-nums; font-weight:800; font-size:1.05rem;
  color:var(--muted); letter-spacing:.04em; margin-bottom:8px; }
.live-clock .live-secs { opacity:.5; font-size:.85em; }

.live-now { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px 18px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.live-now.gap { background:linear-gradient(180deg,#fff,var(--danger-bg)); border-color:#f0c9c2; }
.live-now.waiting { text-align:center; }
.live-now.overrun { border-color:var(--behind); box-shadow:0 0 0 2px rgba(194,73,31,.16),var(--shadow); }
.overrun-banner { display:flex; align-items:center; gap:8px; background:var(--behind); color:#fff;
  margin:-20px -18px 16px; padding:11px 18px; font-weight:800; font-size:.92rem; }
.live-now-label { display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em; color:var(--green-600); }
.live-now-label .pulse, .pulse { width:9px; height:9px; border-radius:50%; background:var(--green-500); animation:pulse 1.4s infinite; }
.live-now-name { font-size:2.5rem; font-weight:900; letter-spacing:-.03em; line-height:1.02; margin:7px 0 3px; }
.live-now-window { color:var(--muted); font-weight:600; font-size:.92rem; }

.live-count { margin:18px 0 12px; display:flex; flex-direction:column; align-items:center; }
.live-count .cnum { font-size:4.2rem; font-weight:900; line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; color:var(--green-700); }
.live-count .csep { opacity:.4; }
.live-count.soon .cnum { color:var(--gold-600); }
.live-count.over .cnum { color:var(--behind); }
.live-count.open .cnum { font-size:3rem; }
.live-count .clbl { font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; margin-top:2px; }

.drift-pill { display:inline-block; font-size:.78rem; font-weight:800; padding:4px 11px; border-radius:99px; }
.drift-pill.sm { font-size:.68rem; padding:2px 8px; }
.drift-ontime { background:rgba(93,107,98,.12); color:var(--ontime); }
.drift-ahead { background:rgba(31,122,77,.13); color:var(--ahead); }
.drift-behind { background:rgba(194,73,31,.13); color:var(--behind); }

.gap-note { display:flex; gap:8px; align-items:flex-start; color:var(--danger); font-weight:600; font-size:.9rem;
  margin:14px 0; line-height:1.4; }

.needs { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.needs.compact { margin-top:8px; }
.need-chip { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:700;
  background:var(--paper-2); border:1px solid var(--line); color:var(--ink-2); padding:4px 9px; border-radius:99px; }
.need-chip svg { color:var(--muted); }
.need-chip.warn { background:rgba(216,163,42,.12); border-color:var(--gold-100); color:var(--gold-600); }
.need-chip.warn svg { color:var(--gold-600); }

.live-action { width:100%; margin-top:16px; padding:15px; border:none; border-radius:14px; font-weight:800;
  font-size:1.02rem; display:flex; align-items:center; justify-content:center; gap:9px; }
.live-action.start { background:var(--green-700); color:#fff; }
.live-action.finish { background:var(--paper-2); color:var(--green-800); border:1.5px solid var(--green-300); }
.live-action.sm { padding:11px; font-size:.9rem; margin-top:12px; }

.live-next { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;
  margin-top:12px; box-shadow:var(--shadow); }
.live-next-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.live-next-label { font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:var(--gold-600); }
.live-next-name { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin-top:2px; }

.live-done { text-align:center; padding:46px 20px; color:var(--green-700); }
.live-done svg { color:var(--gold-500); }
.live-done h2 { font-size:1.8rem; font-weight:900; margin:10px 0 4px; }
.live-done p { color:var(--muted); margin:0; }

.live-mini { margin-top:18px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.live-mini-row { display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid var(--line-2); font-size:.92rem; }
.live-mini-row:last-child { border-bottom:none; }
.live-mini-row .lm-time { font-variant-numeric:tabular-nums; font-weight:700; color:var(--muted); width:46px; }
.live-mini-row .lm-dot { width:8px; height:8px; border-radius:50%; background:var(--line); flex-shrink:0; }
.live-mini-row .lm-name { flex:1; font-weight:600; }
.live-mini-row .lm-name em { font-style:normal; color:var(--danger); font-size:.8rem; }
.live-mini-row.done { color:var(--muted); }
.live-mini-row.done .lm-name { text-decoration:line-through; }
.live-mini-row.done .lm-check { color:var(--green-500); }
.live-mini-row.now { background:rgba(47,138,95,.08); }
.live-mini-row.now .lm-dot { background:var(--green-500); }
.live-mini-row.next .lm-dot { background:var(--gold-400,var(--gold-500)); }
.lm-tag { font-size:.6rem; font-weight:900; letter-spacing:.08em; padding:2px 6px; border-radius:5px; }
.lm-tag.now { background:var(--green-600); color:#fff; }
.lm-tag.next { background:var(--gold-100); color:var(--gold-600); }
.lm-drift { font-size:.68rem; font-weight:800; }
.lm-drift.behind { color:var(--behind); }
.lm-drift.ahead { color:var(--ahead); }

/* ── Running order ─────────────────────────────────────────────────────────── */
.order-list { display:flex; flex-direction:column; gap:8px; }
.order-row { display:flex; gap:6px; align-items:stretch; }
.order-rail { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:26px; }
.reorder { border:none; background:none; color:var(--line); padding:2px; line-height:0; }
.reorder:disabled { opacity:.35; }
.reorder .flip { transform:rotate(180deg); }
.order-dot { width:11px; height:11px; border-radius:50%; background:var(--line); border:2px solid var(--paper); }
.order-dot.now { background:var(--green-500); box-shadow:0 0 0 3px rgba(47,138,95,.25); }
.order-dot.done { background:var(--green-300); }
.order-main { flex:1; display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--line);
  background:var(--paper); border-radius:var(--radius); text-align:left; box-shadow:var(--shadow); }
.order-row.now .order-main { border-color:var(--green-300); background:linear-gradient(180deg,#fff,rgba(47,138,95,.05)); }
.order-row.done .order-main { opacity:.66; }
.order-row.gap .order-main { background:var(--paper-2); border-style:dashed; }
.order-time { display:flex; flex-direction:column; align-items:center; min-width:52px; }
.order-time strong { font-size:1.1rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.order-time span { font-size:.72rem; color:var(--muted); }
.order-body { flex:1; min-width:0; }
.order-name { font-weight:700; font-size:1.02rem; display:flex; align-items:center; gap:6px; }
.order-name .gap-ico { color:var(--danger); }
.order-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:3px; }
.planned-was { font-size:.72rem; color:var(--muted); text-decoration:line-through; }
.row-tag { font-size:.62rem; font-weight:900; letter-spacing:.06em; padding:2px 7px; border-radius:6px; text-transform:uppercase; }
.row-tag.now { background:var(--green-600); color:#fff; }
.row-tag.done { background:var(--line-2); color:var(--muted); }
.row-tag.open { background:var(--gold-100); color:var(--gold-600); }
.order-edit { color:var(--line); flex-shrink:0; }

.plan-reset { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.8rem;
  color:var(--muted); background:var(--paper-2); border:1px solid var(--line); border-radius:11px; padding:9px 12px; margin:6px 0; }
.running-late { margin-top:10px; border-top:1px solid var(--line); padding-top:12px; }
.rl-label { display:flex; align-items:center; gap:7px; font-weight:700; font-size:.85rem; margin-bottom:9px; }
.rl-btns { display:flex; gap:8px; flex-wrap:wrap; }
.rl-btn { border:1px solid var(--green-300); background:rgba(47,138,95,.08); color:var(--green-700);
  font-weight:800; padding:9px 14px; border-radius:10px; }
.rl-btn.neg { border-color:var(--line); background:var(--paper-2); color:var(--muted); }

/* ── Acts ──────────────────────────────────────────────────────────────────── */
.act-list { display:flex; flex-direction:column; gap:10px; }
.act-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:14px;
  box-shadow:var(--shadow); }
.act-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.act-card-name { font-size:1.12rem; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.confirm-tick { width:18px; height:18px; border-radius:50%; background:var(--green-500); color:#fff; display:grid; place-items:center; }
.confirm-no { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--gold-600);
  background:var(--gold-100); padding:2px 7px; border-radius:99px; }
.act-card-sub { color:var(--muted); font-size:.82rem; margin:4px 0 0; display:flex; gap:5px; flex-wrap:wrap; }
.status-btn { border:none; background:none; padding:0; }

.status-pill { font-size:.7rem; font-weight:800; padding:5px 11px; border-radius:99px; white-space:nowrap; display:inline-block; }
.st-expected { background:var(--line-2); color:var(--muted); }
.st-arrived { background:#e2eefb; color:#2563a8; }
.st-setup { background:#fdeccd; color:#a9711a; }
.st-soundchecked { background:#e6e2fb; color:#5b46c0; }
.st-performing { background:var(--green-600); color:#fff; }
.st-done { background:rgba(47,138,95,.14); color:var(--green-700); }

/* Act detail */
.act-detail { display:flex; flex-direction:column; gap:6px; }
.status-stepper { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.status-stepper .step { border:1px solid var(--line); background:var(--paper); color:var(--muted);
  font-size:.72rem; font-weight:700; padding:7px 10px; border-radius:9px; }
.status-stepper .step.past { color:var(--green-600); border-color:var(--green-300); background:rgba(47,138,95,.06); }
.status-stepper .step.on { background:var(--green-700); color:#fff; border-color:var(--green-700); }
.contact-actions { display:flex; gap:8px; margin:4px 0 12px; }
.ca-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:11px; border-radius:11px;
  background:var(--green-700); color:#fff; font-weight:700; font-size:.85rem; text-decoration:none; }
.ca-btn:nth-child(2){ background:var(--green-600); }
.ca-btn:last-child { background:var(--paper-2); color:var(--green-800); border:1px solid var(--green-300); }

details.acc { border:1px solid var(--line); border-radius:12px; padding:4px 12px; margin-bottom:8px; background:var(--paper); }
details.acc > summary { font-weight:800; font-size:.9rem; padding:9px 0; cursor:pointer; list-style:none; color:var(--ink); }
details.acc > summary::-webkit-details-marker { display:none; }
details.acc > summary::after { content:"+"; float:right; color:var(--muted); font-weight:700; }
details.acc[open] > summary::after { content:"–"; }

.channels { padding:4px 0 8px; }
.channel-row, .channel-add { display:flex; align-items:center; gap:7px; padding:5px 0; }
.ch-no { width:24px; height:24px; border-radius:7px; background:var(--green-700); color:#fff; font-size:.72rem; font-weight:800;
  display:grid; place-items:center; flex-shrink:0; }
.ch-in { border:1px solid var(--line); border-radius:8px; padding:8px 9px; font-size:.85rem; background:var(--paper); min-width:0; }
.ch-in.src { flex:1; } .ch-in.typ { width:88px; }
.ch-del, .ch-add-btn { border:none; background:var(--paper-2); width:30px; height:30px; border-radius:8px;
  display:grid; place-items:center; color:var(--muted); flex-shrink:0; }
.ch-add-btn { background:var(--green-700); color:#fff; }
.muted-sm { color:var(--muted); font-size:.82rem; margin:4px 0; }

.detail-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line); }

/* ── Contacts ──────────────────────────────────────────────────────────────── */
.contact-list { display:flex; flex-direction:column; gap:9px; }
.contact-row { display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow); }
.contact-main { flex:1; border:none; background:none; text-align:left; padding:0; min-width:0; }
.contact-name { font-weight:800; font-size:1.02rem; }
.contact-role { color:var(--muted); font-size:.8rem; margin-top:1px; }
.contact-note { color:var(--ink-2); font-size:.8rem; margin-top:4px; line-height:1.35; }
.contact-quick { display:flex; gap:6px; flex-shrink:0; }
.contact-quick a { width:38px; height:38px; border-radius:11px; background:var(--paper-2); border:1px solid var(--line);
  color:var(--green-700); display:grid; place-items:center; }

/* ── Checklists (tasks + chase) ────────────────────────────────────────────── */
.chips { display:flex; gap:7px; margin-bottom:12px; flex-wrap:wrap; }
.chip { border:1px solid var(--line); background:var(--paper); color:var(--muted); font-weight:700; font-size:.8rem;
  padding:7px 14px; border-radius:99px; }
.chip.on { background:var(--green-700); color:#fff; border-color:var(--green-700); }

.task-group, .chase-group { margin-bottom:6px; }
.check-row { display:flex; align-items:center; gap:11px; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:11px 13px; margin-bottom:7px; box-shadow:var(--shadow); }
.check-row.done { opacity:.6; }
.checkbox { width:25px; height:25px; border-radius:8px; border:2px solid var(--line); background:var(--paper);
  display:grid; place-items:center; color:#fff; flex-shrink:0; }
.checkbox.on { background:var(--green-600); border-color:var(--green-600); }
.check-main { flex:1; border:none; background:none; text-align:left; padding:0; min-width:0; }
.check-label { font-weight:600; font-size:.95rem; line-height:1.3; display:block; }
.check-row.done .check-label { text-decoration:line-through; }
.check-meta { display:flex; gap:6px; align-items:center; margin-top:4px; }
.who { font-size:.66rem; font-weight:800; padding:2px 8px; border-radius:99px; }
.who-dan { background:#e2eefb; color:#2563a8; }
.who-jacob { background:#ece2fb; color:#6b46c0; }
.who-steph { background:#fbe2ef; color:#a8266f; }
.due { font-size:.72rem; color:var(--muted); }
.row-del { border:none; background:none; color:var(--line); padding:4px; flex-shrink:0; }
.check-row:hover .row-del { color:var(--muted); }

.add-box { display:flex; gap:7px; margin-bottom:12px; flex-wrap:wrap; align-items:center; }
.add-input { flex:1; min-width:140px; border:1px solid var(--line); border-radius:10px; padding:11px 12px; font-size:.9rem; }
.add-select { border:1px solid var(--line); border-radius:10px; padding:11px 10px; font-size:.85rem; background:var(--paper); }

/* ── Walk-around notes ─────────────────────────────────────────────────────── */
.note-compose { display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.note-input { border:1px solid var(--line); border-radius:12px; padding:12px; font-size:.92rem; resize:vertical; background:var(--paper); }
.note-list { display:flex; flex-direction:column; gap:9px; }
.note-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px; box-shadow:var(--shadow); }
.note-body { font-size:.94rem; line-height:1.45; white-space:pre-wrap; }
.note-foot { display:flex; align-items:center; justify-content:space-between; margin-top:9px; color:var(--muted); font-size:.74rem; }

/* ── Site map ──────────────────────────────────────────────────────────────── */
.sitemap { position:relative; aspect-ratio:1.35/1; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:12px; }
.sitemap.placing { outline:3px solid var(--gold-300); outline-offset:-3px; }
.sitemap-grass { position:absolute; inset:0; background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,transparent 1px 26px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 26px),
  linear-gradient(160deg,#cfe6cf,#bcdcc0); }
.map-pin { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px;
  border:none; background:none; color:#fff; }
.map-pin > svg { width:30px; height:30px; padding:7px; border-radius:50%; background:var(--green-700); box-shadow:0 2px 6px rgba(0,0,0,.3); }
.map-pin.cat-stage > svg { background:var(--green-700); }
.map-pin.cat-facility > svg { background:#3f7fb5; }
.map-pin.cat-access > svg { background:var(--gold-600); }
.map-pin.cat-safety > svg { background:var(--danger); }
.map-pin.cat-place > svg { background:#5d6b62; }
.map-pin.sel > svg { outline:3px solid #fff; outline-offset:1px; }
.pin-label { font-size:.62rem; font-weight:800; color:var(--green-900); background:rgba(255,255,255,.85);
  padding:1px 6px; border-radius:6px; white-space:nowrap; }
.map-detail { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; box-shadow:var(--shadow); margin-bottom:12px; }
.map-detail-head { display:flex; align-items:flex-start; justify-content:space-between; }
.map-detail-head strong { font-size:1.05rem; font-weight:800; }
.cat-tag { font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:99px; margin-left:8px; color:#fff; }
.cat-tag.cat-stage { background:var(--green-700); } .cat-tag.cat-facility { background:#3f7fb5; }
.cat-tag.cat-access { background:var(--gold-600); } .cat-tag.cat-safety { background:var(--danger); } .cat-tag.cat-place { background:#5d6b62; }
.map-notes { color:var(--ink-2); font-size:.88rem; line-height:1.45; margin:8px 0; }
.map-detail-actions { display:flex; gap:8px; }
.loc-list { display:flex; flex-direction:column; gap:2px; }
.loc-row { display:flex; align-items:center; gap:10px; padding:11px 8px; border:none; background:none; border-bottom:1px solid var(--line-2); text-align:left; width:100%; }
.loc-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.loc-dot.cat-stage { background:var(--green-700); } .loc-dot.cat-facility { background:#3f7fb5; }
.loc-dot.cat-access { background:var(--gold-600); } .loc-dot.cat-safety { background:var(--danger); } .loc-dot.cat-place { background:#5d6b62; }
.loc-name { font-weight:700; font-size:.92rem; }
.loc-note { color:var(--muted); font-size:.78rem; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Scratchpad ────────────────────────────────────────────────────────────── */
.scratchpad { width:100%; min-height:54vh; border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  font-size:1rem; line-height:1.55; resize:vertical; background:var(--paper); box-shadow:var(--shadow); }
.saved-tag { color:var(--green-600); font-weight:700; }
.saving-tag { color:var(--gold-600); font-weight:700; }

/* ── Emails ────────────────────────────────────────────────────────────────── */
.email-list { display:flex; flex-direction:column; gap:8px; }
.email-row { text-align:left; border:1px solid var(--line); background:var(--paper); border-radius:var(--radius);
  padding:13px 14px; box-shadow:var(--shadow); }
.email-subj { font-weight:800; font-size:.98rem; }
.email-snip { color:var(--ink-2); font-size:.83rem; margin:4px 0; line-height:1.4; max-height:2.8em; overflow:hidden; }
.email-meta { color:var(--muted); font-size:.72rem; }
.thread { display:flex; flex-direction:column; gap:12px; }
.msg { border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--paper-2); }
.msg-head { display:flex; justify-content:space-between; gap:8px; font-size:.78rem; margin-bottom:7px; }
.msg-head strong { color:var(--green-800); }
.msg-head span { color:var(--muted); }
.msg-body { font-size:.86rem; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.thread-offline { text-align:center; color:var(--muted); padding:20px; }
.thread-offline blockquote { margin:10px 0 0; font-style:italic; color:var(--ink-2); }

/* ── Settings ──────────────────────────────────────────────────────────────── */
.seg { display:flex; gap:6px; background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:4px; }
.seg-btn { flex:1; border:none; background:none; padding:10px; border-radius:9px; font-weight:700; color:var(--muted); }
.seg-btn.on { background:var(--green-700); color:#fff; }
.kv { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line-2); font-size:.9rem; }
.kv:last-of-type { border-bottom:none; }
.kv span { color:var(--muted); }
.kv strong.ok { color:var(--green-600); } .kv strong.bad { color:var(--danger); }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.92rem; font-weight:600; padding:4px 0; }
.btn-row { display:flex; gap:9px; flex-wrap:wrap; }
.btn-row .btn-secondary { flex:1; text-decoration:none; justify-content:center; }
.btn-danger-outline { border:1.5px solid #e6b8b2; background:var(--danger-bg); color:var(--danger); font-weight:700;
  padding:11px 14px; border-radius:11px; display:inline-flex; align-items:center; gap:8px; }
.app-foot { text-align:center; color:var(--muted); font-size:.74rem; margin:20px 0 8px; }

/* ── Buttons (shared) ──────────────────────────────────────────────────────── */
.btn-primary { background:var(--green-700); color:#fff; border:none; border-radius:11px; padding:12px 18px;
  font-weight:800; font-size:.92rem; display:inline-flex; align-items:center; gap:7px; justify-content:center; }
.btn-primary.sm { padding:10px 14px; font-size:.85rem; }
.btn-primary:disabled { opacity:.5; }
.btn-secondary { background:var(--paper); color:var(--green-800); border:1px solid var(--line); border-radius:11px;
  padding:12px 16px; font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:7px; }
.btn-secondary.sm { padding:8px 12px; font-size:.82rem; }
.btn-danger { background:none; border:none; color:var(--danger); font-weight:700; padding:6px 0; }

/* ── Drawer (bottom sheet for editing) ─────────────────────────────────────── */
.drawer-overlay { position:fixed; inset:0; z-index:60; background:rgba(15,40,28,.45); display:flex; align-items:flex-end;
  animation:fade .15s ease; }
.drawer-sheet { width:100%; max-width:640px; margin:0 auto; background:var(--cream); border-radius:22px 22px 0 0;
  max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); animation:slideUp .24s ease; }
.drawer-handle { width:40px; height:4px; background:var(--line); border-radius:99px; margin:9px auto 4px; flex-shrink:0; }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:6px 16px 10px; border-bottom:1px solid var(--line); }
.drawer-title { font-size:1.2rem; font-weight:800; letter-spacing:-.01em; }
.drawer-close { width:32px; height:32px; border-radius:9px; border:none; background:var(--paper-2); color:var(--muted); display:grid; place-items:center; }
.drawer-body { padding:14px 16px; overflow-y:auto; }
.drawer-footer { padding:12px 16px calc(12px + var(--safe-b)); border-top:1px solid var(--line); background:var(--paper); }
.drawer-footer-btns { display:flex; align-items:center; gap:8px; }

.form-field { margin-bottom:12px; }
.form-label-text { display:block; font-size:.76rem; font-weight:700; color:var(--ink-2); margin-bottom:5px; }
.form-input-field { width:100%; border:1px solid var(--line); border-radius:11px; padding:12px 13px; font-size:.95rem;
  background:var(--paper); color:var(--ink); }
.form-input-field:focus { outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px rgba(47,138,95,.15); }
.form-textarea { resize:vertical; min-height:64px; }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2362716a' stroke-width='2'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; }
.form-hint { font-size:.74rem; color:var(--muted); margin:5px 0 0; }
.form-error { background:var(--danger-bg); color:var(--danger); padding:9px 12px; border-radius:10px; font-size:.84rem; font-weight:600; margin-bottom:12px; }
.form-section-title { font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-600); font-weight:800; margin:14px 0 8px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }

.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; margin-bottom:6px; }
.toggle-label { font-weight:600; font-size:.92rem; }
.toggle-btn { width:48px; height:28px; border-radius:99px; border:none; background:var(--line); position:relative; padding:0; flex-shrink:0; transition:background .15s; }
.toggle-btn.on { background:var(--green-600); }
.toggle-thumb { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
.toggle-btn.on .toggle-thumb { transform:translateX(20px); }

/* ── Misc ──────────────────────────────────────────────────────────────────── */
.spinner-wrap { display:grid; place-items:center; padding:48px; }
.spinner { width:30px; height:30px; border:3px solid var(--line); border-top-color:var(--green-600); border-radius:50%; animation:spin .8s linear infinite; }
.empty-state { text-align:center; color:var(--muted); padding:40px 20px; }
.empty-state svg { color:var(--green-300); margin-bottom:10px; }
.empty-state p { margin:0; font-size:.9rem; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { transform:translateY(18px); opacity:.6; } to { transform:translateY(0); opacity:1; } }

@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* ── Print: clean one-page run-sheet ───────────────────────────────────────── */
@media print {
  .topbar, .tabbar, .sheet-backdrop, .title-actions, .order-rail, .order-edit, .page-sub, .reorder { display:none !important; }
  body { background:#fff; font-size:12pt; }
  .content { padding:0; }
  .page { max-width:none; }
  .section-title h2::after { content:" — Monmouthshire Show, Sunday 16 August 2026"; font-size:.7em; font-weight:600; color:#555; }
  .order-row { break-inside:avoid; }
  .order-main { box-shadow:none; border-color:#bbb; }
  .live-mini, .focus-grid, .countdown-hero, .big-ghost-btn, .link-row { display:none !important; }
}