/* The Scottish Frogs — brand layer.
   Tokens defined ONCE here (§2 of SPEC) and reused across the portal so it
   feels like one brand with the marketing site. */

:root {
  /* Brand palette (§2) */
  --scot-dark: #0B132B;       /* dark sections, hero, footer */
  --scot-navy: #1C2541;       /* mid-dark surfaces */
  --scot-gold: #E0A96D;       /* accent — labels, CTAs, rules */
  --scot-light-gold: #F5E6CC; /* light accent text on dark */
  --page-bg: #FCFAF7;         /* light background */
  --ink: #1a1a1a;
  --muted: #5b6173;

  /* Typography */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --maxw: 880px;
  --radius: 12px;

  /* Height of an admin page's header band (.hero). The sidebar's logo block
     is sized to match it so the first nav item lines up with where the page
     content begins, just under the header. Keep in sync if .hero padding or
     title size changes. */
  --admin-header-h: 174px;
}

* { box-sizing: border-box; }

/* Author `display` rules always beat the UA's default [hidden] rule,
   regardless of selector specificity — so any component that sets its own
   display (flex/grid/etc.) silently defeats the native hidden attribute
   unless we re-assert it here, once, for everything. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--page-bg);
  line-height: 1.6;
}
/* Sticky footer: on short pages (e.g. the dashboard with few events) the
   footer would otherwise sit right after the content instead of pinned to
   the bottom of the viewport. main grows to fill the gap; footer keeps its
   natural height. No effect on tall pages. Lives on .page-body (main +
   footer's wrapper) rather than body directly, since body's other admin-page
   children (sidebar, mobile topbar) shouldn't be part of this flow. */
.page-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 0.4em;
}

a { color: var(--scot-navy); }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Top nav (brand bar) — sits seamlessly above the hero (same dark bg) */
.topnav { background: var(--scot-dark); }
.topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* vertical only — keep .container's horizontal padding */
  padding-top: 0.9rem;
  padding-bottom: 0.3rem;
}
.brand-logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.brand-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}
.brand-sub {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--scot-gold);
  margin-top: 2px;
}
.topnav-actions { display: flex; align-items: center; gap: 0.6rem; }
.topnav-actions .btn { text-decoration: none; }

/* Admin sidebar nav — persistent on desktop, off-canvas drawer on mobile.
   Replaces the old horizontal admin topnav entirely (login still uses the
   plain brand-only .topnav above; customer pages use neither). */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background: var(--scot-dark);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: transform 0.25s ease;
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.1rem 1rem 0.9rem;
}
.sidebar-head .brand-logo { padding: 0; }
.sidebar-close {
  display: none;
  align-items: center;
  background: none;
  border: 0;
  color: var(--scot-light-gold);
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
}
.sidebar-close svg { width: 18px; height: 18px; display: block; }
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 0.65rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-row { display: flex; align-items: center; gap: 4px; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: var(--scot-light-gold);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}
.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--scot-gold); }
.sidebar-link:hover, .sidebar-link.active { background: rgba(224, 169, 109, 0.15); }
.sidebar-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  color: var(--scot-gold);
  text-decoration: none;
}
.sidebar-add svg { width: 15px; height: 15px; }
.sidebar-add:hover { background: rgba(224, 169, 109, 0.15); }
/* The settings group (Customer layout / Bank of remarks) sinks to the
   bottom of the nav, just above Logout — they're occasional housekeeping,
   not part of the day-to-day Events/Frogs/Dances flow up top. margin-top
   collapses harmlessly back to normal flow if the events list ever grows
   tall enough to fill the column. */
.sidebar-settings { margin-top: auto; }
.sidebar-divider { height: 1px; background: rgba(245, 230, 204, 0.15); margin: 0.6rem 0.6rem; }
.sidebar-events { list-style: none; margin: 2px 0 6px 26px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sidebar-event { display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px; border-radius: 7px; text-decoration: none; }
.sidebar-event:hover { background: rgba(245, 230, 204, 0.08); }
.sidebar-event-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tl-c); flex-shrink: 0; margin-top: 5px; }
.sidebar-event-text { overflow: hidden; min-width: 0; }
.sidebar-event-name { display: block; font-size: 0.78rem; color: var(--scot-light-gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-event-date { display: block; font-size: 0.68rem; color: #9aa0b0; }
.sidebar-footer { flex-shrink: 0; padding: 0.6rem; border-top: 1px solid rgba(245, 230, 204, 0.12); }
.sidebar-logout { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; }

.mobile-topbar {
  display: none;
  align-items: center;
  gap: 0.7rem;
  background: var(--scot-dark);
  padding: 0.7rem 1rem;
  position: sticky;
  top: 0;
  z-index: 45;
}
.mobile-topbar-brand { font-family: var(--font-display); font-style: italic; color: #fff; font-size: 1rem; }
.sidebar-toggle { display: flex; align-items: center; background: none; border: 0; color: var(--scot-gold); padding: 4px; cursor: pointer; }
.sidebar-toggle svg { width: 22px; height: 22px; display: block; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(11, 19, 43, 0.55); z-index: 40; }

body.has-sidebar .page-body { margin-left: 240px; }

/* Desktop only: the logo sits at the top of a band as tall as the page
   header, so the nav below it starts level with the page content (the
   "safe space" the logo doesn't fill). On mobile the drawer's head stays
   its natural height — a tall band there would just waste space. */
@media (min-width: 881px) {
  .sidebar-head { min-height: var(--admin-header-h); align-items: flex-start; }
}

@media (max-width: 880px) {
  .mobile-topbar { display: flex; }
  .sidebar-close { display: flex; }
  .sidebar { transform: translateX(-100%); box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25); }
  .sidebar.open { transform: translateX(0); }
  body.has-sidebar .page-body { margin-left: 0; }
}

/* Customer banner — "The Scottish Frogs & [client]", one layer */
.cust-banner {
  background: var(--scot-dark);
  color: var(--scot-light-gold);
  padding: 2.75rem 0 2.25rem;
}
.cust-banner-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* keeps the & centred on the page */
  align-items: center;
  gap: 1.25rem 1.75rem;
}
.cust-banner .band-logo {
  justify-self: start;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.cust-banner .brand-title {
  font-size: 1.875rem; /* 25% larger than the nav logo's 1.5rem */
}
.cust-banner .amp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--scot-gold);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
}
.cust-banner .client-name {
  justify-self: start;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: #fff;
  font-size: clamp(1.7rem, 4.5vw, 2.9rem);
  line-height: 1.05;
}
.cust-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  justify-content: center;
  align-items: baseline;
  margin: 1.1rem 0 0;
}
.cust-meta .date { color: #fff; font-weight: 600; }
.cust-meta .countdown {
  color: var(--scot-gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
}
.cust-meta .countdown.muted { color: var(--scot-light-gold); font-size: 1rem; }
.cust-banner .badge { display: block; width: fit-content; margin: 0.9rem auto 0; }

@media (max-width: 640px) {
  .cust-banner-row { grid-template-columns: 1fr; justify-items: center; gap: 0.4rem; }
  .cust-banner .band-logo { justify-self: center; text-align: center; }
  .cust-banner .client-name { justify-self: center; text-align: center; }
  .cust-banner .amp { font-size: 2.2rem; }
}

/* Hero — navy with gold accents */
.hero {
  background: var(--scot-dark);
  color: var(--scot-light-gold);
  padding: 1.5rem 0 2.5rem;
}
.hero h1 {
  color: #fff;
  font-style: italic;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
}
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--scot-gold);
  margin-bottom: 0.6rem;
}

/* Admin page header: drop the dark band (the customer pages keep it) and
   sit on the page background with a dark-blue title — the sidebar already
   supplies the dark brand colour right beside it, so a second dark block
   was visually heavy. The header bar spans the full content width so the
   title sits hard left and any header action (e.g. "View page") is pinned
   to the right edge of the window; the page content below keeps its normal
   centred column. */
body.has-sidebar .hero,
body.bare .hero {
  background: var(--page-bg);
  color: var(--ink);
}
body.has-sidebar .hero h1,
body.bare .hero h1 { color: var(--scot-dark); }
body.has-sidebar .hero .container,
body.bare .hero .container { max-width: none; }

/* Section label rule */
.label {
  color: var(--scot-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Optional second line under a block's title — admin-set per block, see
   ROADMAP.md #16 Phase 1. Sits right under .label, so no top margin. */
.block-subtitle { margin: 0.2rem 0 0.8rem; color: var(--muted); font-size: 0.85rem; }

.card {
  background: #fff;
  border: 1px solid #ece6db;
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin: 1rem 0;
}

.btn {
  display: inline-block;
  background: var(--scot-gold);
  color: var(--scot-dark);
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: baseline;
  margin: 0.4rem 0 0;
  font-size: 1.05rem;
}
.hero-meta .date { color: #fff; font-weight: 600; }
.hero-meta .countdown {
  color: var(--scot-gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
}
.hero-meta .countdown.muted { color: var(--scot-light-gold); font-size: 1rem; }
.badge {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--scot-gold);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scot-gold);
}

.content { padding-top: 1.5rem; }

/* Open-items checklist — the headline value */
.checklist-card { border-color: var(--scot-gold); }
.checklist-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.checklist-head .progress {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--scot-navy);
}
.checklist { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.checklist li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-top: 1px solid #f0ebe1;
}
.checklist li:first-child { border-top: 0; }

.brief-title {
  font-style: italic;
  font-size: 1.6rem;
  margin: 2rem 0 0.4rem;
}

/* Brief fields */
/* Fields stack label-above-value so the value gets the card's full width —
   long names, addresses and the ceilidh format wrap freely instead of being
   clipped by a single-line input or squeezed into a narrow second column. */
.fields { display: grid; gap: 0; }
.field {
  padding: 0.4rem 0;
  border-top: 1px solid #f4efe6;
}
.field:first-child { border-top: 0; padding-top: 0.1rem; }
.field .k {
  display: block;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 0.12rem;
}
.field .v { display: block; color: var(--ink); line-height: 1.45; }
.field .v.muted { color: #9aa0b0; font-style: italic; }
.dances { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.dances li { margin: 0.15rem 0; }

/* Standard fixed blocks */
.note {
  border-radius: var(--radius);
  padding: 1rem 1.3rem;
  margin: 1rem 0;
  background: var(--scot-navy);
  color: var(--scot-light-gold);
}
.note p:last-child { margin-bottom: 0; }
.note .label { color: var(--scot-gold); }
.note-item + .note-item { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(245, 230, 204, 0.2); }

.band .v { font-variant-numeric: tabular-nums; }

/* Editable inputs — styled to sit inline like the read-only text */
.v-input {
  font: inherit;
  color: var(--ink);
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid #e4ddcf;
  border-radius: 7px;
  background: #fffdf9;
}
.v-input:focus {
  outline: none;
  border-color: var(--scot-gold);
  box-shadow: 0 0 0 3px rgba(224, 169, 109, 0.2);
}
.v-input:read-only {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
}
textarea.v-input { resize: vertical; line-height: 1.5; }

/* Edit-code unlock bar */
/* Customer-facing highlight note — admin-authored, manual on/off, shown at
   the top of the page (e.g. something needing attention mid-sales-
   conversation). pre-line preserves the manual line breaks from the admin's
   textarea without needing to convert them to markup. */
.cust-highlight {
  background: var(--scot-light-gold);
  border-left: 4px solid var(--scot-gold);
  border-radius: var(--radius);
  padding: 0.8rem 1.1rem;
  margin: 1rem 0;
}
.cust-highlight .label { margin-bottom: 0.3rem; color: var(--scot-navy); }
.cust-highlight-text { margin: 0; white-space: pre-line; }

/* Unlock control, in the sticky header (when the page is gated + editable).
   data-lockbar / data-unlock-form / data-edit-code keep the existing JS. */
.cust-unlock { margin: 0.9rem auto 0; width: fit-content; }
.cust-unlock-form { display: flex; align-items: center; gap: 0.45rem; }
.cust-unlock-icon { display: inline-flex; color: var(--scot-gold); }
.cust-unlock-icon svg { width: 16px; height: 16px; }
.cust-unlock-input {
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(245, 230, 204, 0.35);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  width: 11rem;
  max-width: 42vw;
}
.cust-unlock-input::placeholder { color: rgba(245, 230, 204, 0.55); }
.cust-unlock-input:focus { outline: none; border-color: var(--scot-gold); }
.cust-unlock-input.shake { animation: shake 0.4s; }
.cust-unlock .btn { padding: 0.4rem 0.9rem; }
.cust-unlock.unlocked { color: var(--scot-light-gold); }
.lockbar-ok {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 600;
}
.lockbar-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.9rem;
}
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* Checkbox styled as the gold box */
.box-label { position: relative; display: inline-flex; flex: 0 0 auto; }
.box-label input {
  position: absolute;
  opacity: 0;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  cursor: pointer;
}
.checklist .box {
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid var(--scot-gold);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
/* A ticked gate goes green (a reached milestone), not gold — and the label
   stays full-strength, no strike-through: these are achievements to keep
   legible, not tasks to scratch off. */
.box-label input:checked + .box {
  background: #4f8b5b;
  border-color: #4f8b5b;
}
.box-label input:checked + .box::after {
  content: "✓";
  font-size: 0.85rem;
  color: #fff;
}
.box-label input:focus-visible + .box {
  box-shadow: 0 0 0 3px rgba(224, 169, 109, 0.35);
}
.box-label input:disabled { cursor: default; }

/* Save status toast */
.save-status {
  position: fixed;
  bottom: 1.1rem;
  right: 1.1rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.save-status.show { opacity: 1; transform: translateY(0); }
.save-status.ok { background: #2f6b3f; }
.save-status.err { background: #9c3434; }

/* ---- Admin ---- */
.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--scot-gold);
  color: var(--scot-gold);
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
}
.btn-ghost:hover { background: rgba(224, 169, 109, 0.12); }

.admin-login { max-width: 420px; }
.login-card { display: grid; gap: 0.8rem; margin-top: 2rem; }
.login-card .btn { justify-self: start; }
.form-error {
  margin: 0;
  color: #9c3434;
  font-size: 0.9rem;
}

/* Dashboard timeline: next-6-months strip of active (inquiry/quoted/
   confirmed) dated events, laid out client-side (internal/assets/static/app.js)
   since the math depends on rendered pixel width. Fixed track width on
   purpose — the wrapper scrolls horizontally on narrow screens instead of
   squeezing dates illegibly small. */
.timeline-wrap { overflow-x: auto; margin: 0 0 1.5rem; padding-bottom: 0.25rem; }
.timeline { position: relative; width: 780px; min-width: 780px; height: 150px; }
.tl-axis { position: absolute; height: 1px; background: #e7e0d3; }
.tl-tick { position: absolute; width: 1px; height: 8px; background: #e7e0d3; }
.tl-tick-label { position: absolute; font-size: 0.7rem; color: var(--muted); transform: translateX(-50%); }
.tl-year-tick { width: 2px; background: var(--scot-gold); }
.tl-year-label { font-weight: 700; color: var(--scot-navy); }
.tl-today-line { position: absolute; width: 0; border-left: 1px dashed #c8bfa8; }
.tl-today-label { position: absolute; font-size: 0.68rem; color: var(--muted); transform: translateX(-50%); }
.tl-stem { position: absolute; width: 1px; background: #e7e0d3; }
.tl-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); }
.tl-card {
  position: absolute;
  transform: translateX(-50%);
  min-width: 92px;
  max-width: 140px;
  border-radius: 9px;
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  display: block;
  border: 1px solid transparent;
}
.tl-card .tl-name {
  display: block;
  font-weight: 600;
  font-family: var(--font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-card .tl-date { display: block; opacity: 0.85; }
.tl-badge {
  position: absolute;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px dashed;
  background: none;
  font-family: var(--font-body);
}
.tl-cluster-list {
  /* fixed, not absolute: it must escape .timeline-wrap's clipping box (that
     wrapper needs overflow-x:auto for the mobile scroll, which forces
     overflow-y:auto too per the CSS overflow spec — anything absolutely
     positioned inside it gets clipped). Position is computed in app.js from
     the badge's getBoundingClientRect() at click time. */
  position: fixed;
  display: none;
  background: #fff;
  border: 1px solid #e7e0d3;
  border-radius: 9px;
  padding: 0.4rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 5;
  min-width: 160px;
}
.tl-cluster-list.open { display: block; }
.tl-cluster-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.3rem; font-size: 0.78rem; border-radius: 6px; }
.tl-cluster-item:hover { background: #f3eee4; }
.tl-cluster-dot { width: 7px; height: 7px; min-width: 7px; border-radius: 50%; background: var(--tl-c); }
.tl-status-inquiry { --tl-c: #8d8d85; --tl-tint: #8d8d8514; --tl-text: #54534c; }
.tl-status-quoted { --tl-c: #d2791e; --tl-tint: #d2791e16; --tl-text: #8a4e12; }
.tl-status-confirmed { --tl-c: #4f8b5b; --tl-tint: #4f8b5b16; --tl-text: #355f3d; }
.tl-dot.tl-status-inquiry, .tl-dot.tl-status-quoted, .tl-dot.tl-status-confirmed { background: var(--tl-c); }
.tl-card.tl-status-inquiry, .tl-card.tl-status-quoted, .tl-card.tl-status-confirmed {
  background: var(--tl-tint);
  border-color: var(--tl-c);
  color: var(--tl-text);
}
.tl-badge { border-color: #b6ab97; color: var(--muted); }
.tl-badge:hover, .tl-card:hover { border-color: var(--scot-gold); }

.board-total { color: var(--muted); font-size: 0.9rem; margin: 0.5rem 0 1rem; }
.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: start;
}
.board-col-stack { display: flex; flex-direction: column; gap: 1rem; }
.board-col {
  background: #f3eee4;
  border-radius: var(--radius);
  padding: 0.7rem;
  min-height: 4rem;
}
.board-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.8rem;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--scot-navy);
  padding: 0.2rem 0.3rem 0.6rem;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.board-col-head span:nth-child(2) { flex: 1; } /* title grows; chevron and count stay put */
.board-col-chevron {
  display: inline-block;
  transition: transform 0.15s;
  color: var(--scot-gold);
  font-size: 1.1rem;
}
.board-col.collapsed .board-col-chevron { transform: rotate(-90deg); }
.board-col.collapsed .board-col-body { display: none; }
.board-col-head .count {
  background: var(--scot-navy);
  color: #fff;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.75rem;
}
/* The count badge picks up the status colour code — grey / orange / green —
   matching the timeline dots and sidebar so the board reads at a glance.
   Done & cancelled keep the neutral navy badge. */
.board-col[data-col-key="inquiry"] .count { background: #8d8d85; }
.board-col[data-col-key="quoted"] .count { background: #d2791e; }
.board-col[data-col-key="confirmed"] .count { background: #4f8b5b; }
.ev-card {
  display: grid;
  gap: 0.15rem;
  background: #fff;
  border: 1px solid #e7e0d3;
  border-radius: 9px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: var(--ink);
}
.ev-card:hover { border-color: var(--scot-gold); }
.ev-card.archived { opacity: 0.55; }
.ev-name { font-weight: 600; font-family: var(--font-display); }
.ev-meta { font-size: 0.8rem; color: var(--muted); }
.ev-prog { font-size: 0.75rem; color: var(--scot-gold); font-weight: 600; }
.board-empty { color: #b6ab97; text-align: center; margin: 0.5rem 0; }

@media (max-width: 760px) {
  .board { grid-template-columns: repeat(2, 1fr); }
}

/* Frogs roster (admin list + the picker reused on event/customer pages) */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}
.roster-card {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid #e7e0d3;
  border-radius: var(--radius);
  padding: 1rem;
  text-decoration: none;
  color: var(--ink);
}
.roster-card:hover { border-color: var(--scot-gold); }
.roster-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e7e0d3;
  background: #f3eee4;
}
.roster-photo-placeholder { display: block; }
.roster-name { font-family: var(--font-display); font-weight: 700; }
.roster-instrument { font-size: 0.85rem; color: var(--muted); }

/* Dances catalog management */
.dance-catalog-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0;
  border-top: 1px solid #f0ebe1;
}
.dance-catalog-row:first-child { border-top: 0; }
.dance-rename { display: flex; gap: 0.5rem; flex: 1; align-items: center; }
.dance-rename .v-input { flex: 1; }

.admin-bar-actions { display: flex; gap: 0.6rem; align-items: center; }
.admin-bar-actions .btn { text-decoration: none; }

.admin-form { max-width: 640px; }
.admin-form .label { margin-top: 1.4rem; }
.admin-form .card > .label:first-child { margin-top: 0; }
.form-row { display: grid; gap: 0.3rem; margin: 0.6rem 0; }
.form-row label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.form-row .hint { font-weight: 400; color: #9aa0b0; }
select.v-input { background: #fffdf9; }
.admin-form .btn { margin-top: 1.2rem; }

/* Layout settings (admin) — one card per block, see ROADMAP.md #16 Phase 1 */
.layout-hint { color: var(--muted); font-size: 0.85rem; margin: 0 0 1rem; }
.layout-block-row { margin: 0 0 1rem; }
.layout-block-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.layout-block-head .label { margin-top: 0 !important; }
.layout-row-number { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.layout-row-number label { margin: 0; }
.layout-row-number input { width: 4.5rem; }
.layout-title-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) {
  .layout-title-grid { grid-template-columns: 1fr; }
}
.autosave-hint {
  margin-top: 1.2rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* Catalog picker — filterable checklist (frogs/dances) */
.picker { margin: 0.5rem 0 1.5rem; }
.picker-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #e7e0d3;
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  margin-top: 0.5rem;
  background: #fffdf9;
}
.picker-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-top: 1px solid #f4efe6;
  cursor: pointer;
}
.picker-item:first-child { border-top: 0; }

/* Frogs picker: name + (once attached) the frog's roles as toggle chips for
   which role(s) it takes at this event. */
.frog-pick { flex-wrap: wrap; justify-content: space-between; cursor: default; }
.frog-pick-name { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; flex: 1 1 auto; }
.role-chips { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.frog-pick:not(:has([data-picker-toggle]:checked)) .role-chips { display: none; }
.role-chip {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #e4ddcf;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.role-chip:hover { border-color: var(--scot-gold); }
.role-chip[aria-pressed="true"] {
  background: var(--scot-navy);
  border-color: var(--scot-navy);
  color: #fff;
}

/* Frog form: roles as tickable chips + an "add a role" field. */
.role-editor { display: grid; gap: 0.5rem; }
.role-choices { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.role-choices:empty { display: none; }
.role-choice { display: inline-flex; cursor: pointer; }
.role-choice input { position: absolute; opacity: 0; pointer-events: none; }
.role-choice span {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #e4ddcf;
  background: #fff;
  color: var(--muted);
}
.role-choice:hover span { border-color: var(--scot-gold); }
.role-choice input:checked + span { background: var(--scot-navy); border-color: var(--scot-navy); color: #fff; }
.role-choice input:focus-visible + span { outline: 2px solid var(--scot-gold); outline-offset: 2px; }

/* Per-event remarks (admin event-edit) — hide-checkboxes for the global
   defaults, plus a dynamic add/remove list of one-off extra remarks. See
   ROADMAP.md #16 Phase 2. */
.remarks-hide-list { border: 1px solid #e7e0d3; border-radius: var(--radius); padding: 0.2rem 0.6rem; margin: 0.5rem 0 1rem; }
.extra-remarks { display: grid; gap: 0.6rem; margin: 0.5rem 0; }
.extra-remark-row { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.6rem; align-items: start; }
.extra-remark-row textarea { grid-column: 1; }
.row-remove {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid #e4ddcf;
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.row-remove:hover { border-color: var(--scot-gold); color: var(--scot-dark); }

/* Customer-facing search picker (dances) — search input + dropdown of
   unselected catalog matches, chosen ones shown as removable chips below. */
.dance-picker { margin: 0.5rem 0 0; }
.dance-search-wrap { position: relative; }
.dance-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 4;
  max-height: 220px;
  overflow-y: auto;
  background: #fffdf9;
  border: 1px solid #e7e0d3;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.dance-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid #f4efe6;
  padding: 0.5rem 0.7rem;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.dance-option:first-child { border-top: 0; }
.dance-option:hover, .dance-option:focus-visible { background: #f3eee4; }
.dance-no-matches { padding: 0.5rem 0.7rem; color: var(--muted); font-size: 0.85rem; margin: 0; }
.dance-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.dance-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #f3eee4;
  border: 1px solid #e7e0d3;
  border-radius: 999px;
  padding: 0.3rem 0.4rem 0.3rem 0.75rem;
  font-size: 0.85rem;
  color: var(--scot-navy);
}
.dance-chip-remove {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.dance-chip-remove:hover { background: #e7e0d3; color: var(--scot-dark); }
.dance-empty-hint { color: var(--muted); font-size: 0.85rem; margin: 0.6rem 0 0; }

.form-ok {
  background: #2f6b3f; color: #fff;
  padding: 0.5rem 0.9rem; border-radius: 8px; margin: 0 0 1rem;
}
.badge-archived {
  background: #f3eee4; color: var(--scot-navy);
  padding: 0.5rem 0.9rem; border-radius: 8px; margin: 0 0 1rem;
  font-weight: 600;
}

.share { display: flex; gap: 0.5rem; margin: 0.4rem 0; }
.share .v-input { font-family: ui-monospace, monospace; font-size: 0.85rem; }
.share-actions { display: flex; gap: 0.6rem; margin-top: 0.6rem; }

/* Venue media — one shared square treatment for both the photo and the map,
   used by the admin preview and the customer display alike. Sizing (how wide
   the square is allowed to get) is controlled by the container, not here. */
.media-square {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid #e7e0d3;
  background: #f3eee4;
}
/* Admin form is a single narrow column — cap the preview so it doesn't
   stretch edge-to-edge of the form. */
.venue-map .media-square, .venue-photo .media-square { max-width: 280px; }

.venue-map, .venue-photo { margin: 0.6rem 0 1rem; }
.venue-map > label, .venue-photo > label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.venue-map-current, .venue-map-preview { margin-top: 0.6rem; display: grid; gap: 0.4rem; justify-items: start; }
.venue-formatted { margin: 0; font-size: 0.85rem; color: var(--muted); max-width: 280px; }
.venue-map-actions { display: flex; gap: 0.5rem; }
.venue-photo input[type="file"] { display: block; margin-top: 0.5rem; font-size: 0.85rem; }

/* Customer page: two-column rows (checklist|contacts, venue|media,
   timeline|dances). Content keeps its natural height — no distortion — but
   each side is wrapped in .cell (a flex column) with a .row-filler that
   automatically claims any leftover height once .row-2col stretches both
   cells to match the row. When the two sides are already equal height the
   filler is ~0 and invisible; no measuring, no JS. Collapses to one column
   on narrow screens, in source order (fillers hidden there — see below). */
.row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
  margin: 1.5rem 0;
}
.row-2col > .cell > .card,
.row-2col > .cell > .stack-col > .card {
  margin: 0; /* row-2col's own margin/gap governs spacing here instead */
}
.cell { display: flex; flex-direction: column; }
.cell > .card,
.cell > .stack-col,
.cell > .venue-media-col {
  flex: 0 0 auto; /* keep natural height — the filler absorbs the rest */
}
.stack-col { display: grid; gap: 1.25rem; }

.row-filler {
  flex: 1;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--scot-gold);
  opacity: 0.32;
}
.row-filler span {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 42cqh, 4rem);
  line-height: 1;
}

/* Media column ~33% of the row — "as much space as possible" within that
   share, not capped further. */
.row-2col--venue { grid-template-columns: 2fr 1fr; }
.row-2col--venue.no-media { grid-template-columns: 1fr; }
.venue-media-col { display: grid; gap: 0.9rem; align-content: start; }

@media (max-width: 760px) {
  .row-2col, .row-2col--venue { grid-template-columns: 1fr; }
  /* No "row" to compare heights against once stacked to one column. */
  .row-filler { display: none; }
  /* Two squares stacked are always ~2x their own width tall, regardless of
     width caps — capping width alone barely helps. Side-by-side (photo
     left, map right) instead keeps both reasonably sized without eating
     most of the screen in scroll. */
  .venue-media-col { grid-template-columns: 1fr 1fr; }
}

.ck-form { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.4rem 0; border-top: 1px solid #f0ebe1; }
.ck-form:first-of-type { border-top: 0; }
.ck-toggle {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem;
  border: 2px solid var(--scot-gold); border-radius: 5px;
  background: #fff; color: var(--scot-dark); cursor: pointer;
  font-size: 0.9rem; line-height: 1;
}
.ck-toggle.done { background: #4f8b5b; border-color: #4f8b5b; color: #fff; }

.site-footer {
  background: var(--scot-dark);
  color: var(--scot-light-gold);
  padding: 2rem 0;
  margin-top: 3rem;
  font-size: 0.9rem;
}

/* ============================================================================
   Customer page polish — feature/customer-page-polish
   Scoped to the customer brief (the .cust-banner header and the [data-portal]
   content) so admin pages are untouched. Self-contained block — tune or drop
   it wholesale. Covers: tartan + premium gold header, directions button,
   scroll-reveal, hover/parallax on media & band cards, generous rhythm.
   ========================================================================= */

/* --- Header: a whisper of tartan + metallic gold ------------------------- */
.cust-banner {
  position: sticky; /* stays pinned at the top of the viewport while scrolling */
  top: 0;
  z-index: 30;
  overflow: hidden;
  transition: padding 0.3s ease;
}
.cust-banner > .container { position: relative; z-index: 1; }

/* Compact state (added by JS once scrolling starts): the header shrinks to
   ~40% by dropping its padding and type sizes; children transition for the
   animation. Same content, just smaller. */
.cust-banner .brand-title,
.cust-banner .amp,
.cust-banner .client-name,
.cust-banner .cust-meta,
.cust-banner .cust-unlock { transition: font-size 0.3s ease, margin 0.3s ease; }
.cust-banner.compact { padding: 0.5rem 0 0.6rem; }
.cust-banner.compact .brand-title { font-size: 1.05rem; }
.cust-banner.compact .brand-sub { font-size: 9px; }
.cust-banner.compact .amp { font-size: 1.4rem; }
.cust-banner.compact .client-name { font-size: 1.35rem; }
.cust-banner.compact .cust-meta { margin-top: 0.15rem; font-size: 0.85rem; }
.cust-banner.compact .cust-unlock { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .cust-banner,
  .cust-banner .brand-title,
  .cust-banner .amp,
  .cust-banner .client-name,
  .cust-banner .cust-meta,
  .cust-banner .cust-unlock { transition: none; }
}
.cust-banner::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  opacity: 0.05;
  /* Two crossed sets of gold/cream lines at two widths = a simple tartan
     sett, kept extremely faint so it reads as texture, not pattern. */
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 26px, rgba(224,169,109,0.55) 26px 30px,
      transparent 30px 40px, rgba(245,230,204,0.4) 40px 42px, transparent 42px 64px),
    repeating-linear-gradient(0deg,
      transparent 0 26px, rgba(224,169,109,0.55) 26px 30px,
      transparent 30px 40px, rgba(245,230,204,0.4) 40px 42px, transparent 42px 64px);
}
.cust-banner .amp,
.cust-meta .countdown:not(.muted) {
  background: linear-gradient(135deg, #f3d0a1 0%, var(--scot-gold) 48%, #c8853f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.btn { background: linear-gradient(180deg, #ecc191 0%, var(--scot-gold) 100%); }

/* --- "View on map" button (location module) -------------------------------- */
.btn-map {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--scot-gold);
  border-radius: 8px;
  background: #fff;
  color: var(--scot-navy);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-map svg { width: 16px; height: 16px; color: var(--scot-gold); }
.btn-map:hover {
  background: var(--page-bg);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11,19,43,0.10);
}

/* --- Generous vertical rhythm + a touch more confident type ------------- */
[data-portal].content { padding-top: 2.25rem; }
[data-portal] .brief-title { font-size: 1.95rem; margin: 2.6rem 0 0.2rem; letter-spacing: -0.01em; }
[data-portal] .card { margin: 1.6rem 0; padding: 1.5rem 1.6rem; }
[data-portal] .row-2col { margin: 2rem 0; }
[data-portal] .card > .label,
[data-portal] .note > .label { font-size: 0.74rem; letter-spacing: 0.14em; }

/* --- Scroll-reveal (JS adds .reveal then .in) --------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* --- Media frames: hover-zoom (map) / parallax (photo) ------------------ */
.media-frame { overflow: hidden; border-radius: var(--radius); border: 1px solid #e7e0d3; }
.media-frame .media-square { border: 0; border-radius: 0; transition: transform 0.5s ease; }
.media-frame:hover .media-square { transform: scale(1.05); }
.media-frame .media-square[data-parallax] { transition: none; } /* JS drives it per scroll frame */

/* --- Band roster cards: hover lift + photo zoom ------------------------- */
.roster-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.roster-card:hover {
  border-color: var(--scot-gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(11,19,43,0.12);
}
.roster-photo { transition: transform 0.3s ease; }
.roster-card:hover .roster-photo { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .media-frame:hover .media-square,
  .roster-card:hover,
  .roster-card:hover .roster-photo { transform: none; }
}

/* ============================================================================
   Event drawer — slide-over edit view (feature/admin-dashboard-polish)
   Clicking an event card or sidebar entry slides the edit page in from the
   right (in an iframe) instead of navigating. The backdrop sits BELOW the
   sidebar so left-column clicks switch events; clicking the dimmed dashboard
   closes it. On narrow screens the panel is full-width and the in-iframe back
   arrow closes it. Progressive enhancement — links still navigate with JS off.
   ========================================================================= */
.event-drawer[hidden] { display: none; }
.event-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45; /* below the sidebar (50) so its event links stay clickable */
  background: rgba(11, 19, 43, 0.28);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.event-drawer.open .event-drawer-backdrop { opacity: 1; }
.event-drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70; /* above everything, including the sidebar */
  /* --drawer-w is the user's dragged width (set by JS, remembered). */
  width: min(var(--drawer-w, 780px), 94vw);
  background: var(--page-bg);
  box-shadow: -12px 0 44px rgba(11, 19, 43, 0.28);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
}
.event-drawer.open .event-drawer-panel { transform: translateX(0); }
.event-drawer-frame { border: 0; width: 100%; height: 100%; display: block; }

/* Full-page mode: the panel takes the whole viewport, sidebar included. */
.event-drawer.expanded .event-drawer-panel { width: 100vw; box-shadow: none; }

/* Resize handle: a grab strip straddling the panel's left edge, with a thin
   gold line that shows on hover / while dragging / on keyboard focus. */
.event-drawer-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  width: 10px;
  z-index: 1;
  cursor: col-resize;
  touch-action: none;
}
.event-drawer-resize::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  background: var(--scot-gold);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.event-drawer-resize:hover::after,
.event-drawer-resize:focus-visible::after,
.event-drawer.resizing .event-drawer-resize::after { opacity: 1; }
.event-drawer-resize:focus-visible { outline: none; }
.event-drawer.expanded .event-drawer-resize { display: none; }
/* While dragging: follow the pointer 1:1, and keep the iframe from
   swallowing pointer events (it would otherwise steal the drag). */
.event-drawer.resizing .event-drawer-panel { transition: none; }
.event-drawer.resizing .event-drawer-frame { pointer-events: none; }
.event-drawer.resizing { cursor: col-resize; user-select: none; }

@media (max-width: 880px) {
  /* Narrow screens: the panel is near full-width already — no resizing,
     no full-page toggle. */
  .event-drawer-resize { display: none; }
  .event-drawer .event-drawer-panel { width: 94vw; }
  /* (.drawer-expand is hidden by JS on narrow parents — a media query here
     would test the iframe's own width, not the window's.) */
}

/* Bare (in-iframe) page: back affordance + content, no sidebar chrome. */
body.bare { background: var(--page-bg); }
.drawer-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 0.55rem 0.7rem;
  background: var(--page-bg);
  border-bottom: 1px solid #ece6db;
}
.drawer-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--scot-navy);
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
}
.drawer-back:hover { background: rgba(11, 19, 43, 0.06); }
.drawer-back svg { width: 18px; height: 18px; }
.drawer-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: var(--scot-navy);
}
.drawer-expand[hidden] { display: none; }
.drawer-expand:hover { background: rgba(11, 19, 43, 0.06); }
.drawer-expand svg { width: 17px; height: 17px; }
.drawer-expand[aria-pressed="false"] svg:last-child,
.drawer-expand[aria-pressed="true"] svg:first-child { display: none; }

@media (prefers-reduced-motion: reduce) {
  .event-drawer-backdrop,
  .event-drawer-panel,
  .event-drawer-resize::after { transition: none; }
}

/* "View page" opens the customer page in a new tab — the external-link glyph
   signals that, so it isn't mistaken for in-app navigation. */
.btn-external { display: inline-flex; align-items: center; gap: 0.4rem; }
.btn-external svg { width: 15px; height: 15px; }