/* Scouts design system: colours, Cabin (as used by Online Scout Manager). Light by default, with a dark
   theme (data-theme="dark" on <html>, set by theme.js from the menu or the device setting). */
@font-face { font-family: "Cabin"; src: url("fonts/Cabin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/Cabin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/Cabin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/Cabin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/Cabin-700italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --scout-purple: #7413dc;
  --scout-teal: #088486;
  --scout-navy: #003982;
  --scout-forest-green: #205b41;
  --scout-red: #ed3f23;
  --scout-blue: #006ddf;
  --black: #000000;
  --white: #ffffff;
  --black-80: #333333;
  --black-60: #666666;
  --black-40: #999999;
  --black-20: #cccccc;
  --font-sans: "Cabin", system-ui, sans-serif;

  /* Roles */
  --ground: #f5f3f8;          /* a whisper of purple behind the panels */
  --panel: var(--white);
  --text: var(--black-80);
  --muted: var(--black-60);
  --line: #e2dde9;
  --field-line: var(--black-20);
  --wash: #f5f3f8;
  --tint: #f0e7fc;            /* light purple for selected things */
  --accent: var(--scout-purple);
  --pos: var(--scout-forest-green);
  --neg: var(--scout-red);
  --radius: 8px;
  --danger: #c0301a;           /* deleting: darker than scout-red so white text reads */
  --panel-radius: 16px;
  --ink: var(--black);         /* headings and figures */
  --bar: var(--scout-purple);  /* the app bar */
  --tip: var(--black-80);      /* tooltips */
  --tint-ink: #4b0d8f;         /* text on --tint */
  --red-wash: #fde8e4;
  --red-ink: #c4122f;
  --green-wash: #e3f1ea;
  --teal-wash: #e0f3f3;
  --teal-ink: #055e60;
  --amber-wash: #fff1de;
  --amber-ink: #9a5200;
  --blue-wash: #e6f0fc;
  --chart-grid: #eeeeee;
  --chart-axis: #999999;
  color-scheme: light;
}

/* Dark: the same roles, re-coloured. Scout purple is lifted so it reads on the dark panels:
   --scout-purple stays a fill white text sits on, --accent is the lighter purple for text,
   borders and outlines. Printing always uses the light colours. */
@media screen {
  :root[data-theme="dark"] {
    --scout-purple: #8a45e6;
    --scout-teal: #2fb3b5;
    --scout-blue: #5aa6ff;
    --black-80: #ddd6e6;
    --black-60: #a8a0b3;
    --black-40: #7d7489;
    --black-20: #4a4156;
    --ground: #15111b;
    --panel: #221c2b;
    --ink: #f4f0f9;
    --text: var(--black-80);
    --muted: var(--black-60);
    --line: #3a3245;
    --field-line: var(--black-20);
    --wash: #1b1623;
    --tint: #33244b;
    --tint-ink: #d9c2fb;
    --accent: #b98cf5;
    --pos: #5fcf98;
    --neg: #ff7a63;
    --danger: #d8432c;
    --bar: #3d1278;
    --tip: #3d3548;
    --red-wash: #45201c;
    --red-ink: #ff8f7d;
    --green-wash: #173428;
    --teal-wash: #12302f;
    --teal-ink: #74d6d6;
    --amber-wash: #3a2a14;
    --amber-ink: #f5b56b;
    --blue-wash: #1a2b45;
    --chart-grid: #342c3f;
    --chart-axis: #7d7489;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
/* A column at least the screen's height, so the version footer always sits at the very bottom. */
body {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  background: var(--ground);
  color: var(--text);
  font: 400 14px/1.4 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
h2 { font-weight: 900; font-size: 18px; line-height: 1.2; color: var(--ink); margin: 0; }

/* ---- App bar ---- */
.appbar {
  display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap;
  background: var(--bar); color: var(--white);
  padding: 10px 24px; min-height: 60px;
}
.appbar-title { display: flex; flex-direction: column; min-width: 0; }
.product { font-weight: 700; font-size: 12px; opacity: 0.85; }
.event-name { font-weight: 900; font-size: 18px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.appbar-code { display: flex; align-items: center; gap: 8px; }
.code-chip { font-weight: 800; letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.badge { font-weight: 700; font-size: 12px; background: var(--white); color: var(--scout-purple); border-radius: 999px; padding: 2px 8px; }
.save-state { font-size: 12px; opacity: 0.9; }
/* Offline: a badge by the code, and whatever needs the server greyed out (clicking it says why). */
.badge.offline-badge { background: var(--amber-wash); color: var(--amber-ink); }
body.offline [data-online] { opacity: 0.5; cursor: not-allowed; }
.appbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.appbar .account-menu { flex: none; }
/* Open a code, inside the menu. */
.load-form { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0; }
.menu-label { font-weight: 800; font-size: 14px; color: var(--ink); }
.load-row { display: flex; gap: 6px; }
.load-form input {
  font: inherit; font-size: 14px; flex: 1; min-width: 0; height: 32px; padding: 0 10px; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink);
}
.load-form input::placeholder { color: var(--muted); text-transform: none; }
.load-form input:focus-visible { outline: 2px solid var(--scout-purple); outline-offset: 1px; }
.export-list .load-form .btn { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border-radius: var(--radius); background: var(--scout-purple); color: var(--white); font-size: 13px; }
.export-list .load-form .btn:hover { background: var(--scout-purple); filter: brightness(1.1); }
.menu-rate { margin: 0; padding: 0 10px 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.menu-rate:not([hidden]) { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-who { margin: 0; padding: 6px 10px 8px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-who:has(+ .menu-rate:not([hidden])) { border-bottom: 0; margin-bottom: 0; padding-bottom: 2px; }
.account-menu .export-list { width: 260px; }
/* Signed out, the menu chip shows three lines instead of a photo. */
.avatar.menu-icon { background: linear-gradient(currentColor, currentColor) center 8px / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center 13px / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center 18px / 14px 2px no-repeat; color: var(--white); }
/* The link icon after the event name: blue when linked to an OSM event, red when not. */
.title-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.title-row .title-input { width: auto; field-sizing: content; min-width: 6ch; max-width: calc(100% - 44px); }
@supports not (field-sizing: content) { .title-row .title-input { flex: 1 1 auto; width: 100%; } }
.link-icon {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; font: inherit;
  background: var(--blue-wash); color: var(--scout-blue);
}
.link-icon.unlinked { background: var(--red-wash); color: var(--neg); }
.link-icon[hidden] { display: none; }
.link-icon:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.link-tip {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 15;
  width: max-content; max-width: 260px; padding: 6px 10px; border-radius: 8px;
  background: var(--tip); color: var(--white); font-size: 13px; font-weight: 700; line-height: 1.35; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity 0.12s; pointer-events: none;
}
@media (max-width: 640px) { .link-tip { left: auto; right: 0; max-width: calc(100vw - 48px); } }
.link-tip small { display: block; font-weight: 400; opacity: 0.85; }
.link-icon:hover .link-tip, .link-icon:focus-visible .link-tip, .link-icon.show-tip .link-tip { opacity: 1; visibility: visible; }
.hero-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.hero-tools .mode-switch { margin-bottom: 0; }

.btn {
  font: inherit; font-weight: 700; font-size: 13px; height: 36px; padding: 0 14px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--white);
}
.btn-primary { background: var(--white); color: var(--scout-purple); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.65); }
.btn:hover { filter: brightness(0.96); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.btn:disabled { opacity: 0.6; cursor: wait; }

.message {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 30;
  width: max-content; max-width: min(640px, calc(100vw - 32px)); margin: 0; padding: 10px 14px;
  background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line); border-left: 4px solid var(--scout-teal);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.message.error { border-left-color: var(--neg); }
.message.ok { border-left-color: var(--pos); }

/* ---- Dashboard ---- */
.workspace { width: 100%; max-width: 1320px; margin: 0 auto; padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 20px; }
.panel { background: var(--panel); border-radius: var(--panel-radius); padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.head-figure { font-weight: 900; font-size: 16px; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; }
.hint { color: var(--muted); font-size: 13px; margin: 0; }

.hero { flex-direction: row; flex-wrap: wrap; gap: 24px; }
.hero-event { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hero-numbers { flex: 1.5 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.title-input, .desc-input {
  font: inherit; width: 100%; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--ink);
  padding: 4px 8px; margin-left: -8px; resize: none;
}
.title-input { font-size: 32px; font-weight: 900; line-height: 1.15; color: var(--accent); }
.desc-input { font-size: 15px; line-height: 1.45; field-sizing: content; min-height: 2.9em; }
.title-input:hover, .desc-input:hover { border-color: var(--line); }
.title-input:focus, .desc-input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(116, 19, 220, 0.2); }
.title-input::placeholder, .desc-input::placeholder { color: var(--black-40); font-weight: inherit; }
.dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--tint); color: var(--tint-ink); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.chip:empty { display: none; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--wash); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.kpi-value { font-size: 22px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.kpi-note { font-size: 12px; color: var(--muted); cursor: pointer; }
.kpi-main { background: var(--scout-forest-green); }
.kpi-main.loss { background: var(--scout-navy); }
.kpi-main .kpi-label, .kpi-main .kpi-value, .kpi-main .kpi-note { color: var(--white); }
.kpi-main .kpi-value { font-size: 28px; line-height: 1.1; }

.formula-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; min-height: 38px; padding: 8px 12px;
  background: var(--wash); border-radius: var(--radius);
}
.fx { font-style: italic; font-weight: 800; color: var(--scout-teal); }
.fx { flex: none; }
/* A long name wraps rather than pushing the bar off the screen; the formula
   drops onto its own line when the two don't fit side by side. */
.formula-name { font-weight: 800; flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; }
.formula { color: var(--black-80); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; flex: 1 1 14ch; min-width: 0; }
.formula:empty { display: none; }
@media (max-width: 600px) {
  /* On a phone: fx, then the name, with the formula underneath the name. */
  .formula-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .formula { grid-column: 2; }
}

.hero-block { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.hero-block h2 { font-size: 16px; }
.split { gap: 12px; }
.gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.gauge { display: flex; flex-direction: column; gap: 6px; min-width: 0; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
.gauge-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.gauge-head b { font-size: 15px; font-variant-numeric: tabular-nums; }
.gauge-track { height: 10px; border-radius: 999px; background: var(--wash); overflow: hidden; }
.gauge-fill { display: block; height: 100%; border-radius: 999px; background: var(--scout-teal); }
.gauge.over .gauge-fill { background: var(--neg); }
.gauge-note { font-size: 12px; color: var(--muted); }
.gauge.over .gauge-note { color: var(--neg); font-weight: 700; }
@media (max-width: 640px) { .gauges { grid-template-columns: minmax(0, 1fr); } }
.split-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--wash); }
.split-bar span { display: block; height: 100%; min-width: 2px; }
.split-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; }
.split-legend li { display: inline-flex; align-items: center; gap: 6px; }
.split-legend .swatch { width: 10px; height: 10px; border-radius: 3px; }
.split-legend b { font-variant-numeric: tabular-nums; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cards-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ---- Money in and money out: cards that fold to a header ---- */
.cards.ledger { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ledger .cards-col, .theme-cards { gap: 10px; }
.theme-cards { display: flex; flex-direction: column; }
.col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 4px 2px; }
.col-head h2 { font-size: 20px; }
.money-in .col-head .head-figure { color: var(--scout-teal); }
.fold-tools { display: flex; justify-content: flex-end; gap: 16px; margin: -6px 4px -10px; }
.fold { gap: 0; padding: 0; }
.fold-head { margin: 0; font-size: inherit; }
.fold-btn {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; padding: 12px 18px 12px 16px; border: 0; background: none; border-radius: var(--panel-radius);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.fold-btn:hover .fold-name { color: var(--accent); }
.fold-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fold-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--accent); }
.fold-icon svg { width: 20px; height: 20px; }
.money-in-card .fold-icon { background: var(--teal-wash); color: var(--scout-teal); }
.money-in-card .head-figure { color: var(--scout-teal); }
.unsorted-card .fold-icon { background: var(--amber-wash); color: var(--amber-ink); }
.fold-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fold-name { font-weight: 900; font-size: 16px; color: var(--ink); line-height: 1.25; }
.fold-summary { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold.open .fold-summary { white-space: normal; }
.fold .head-figure { font-size: 16px; }
.fold.empty .head-figure { color: var(--black-40); font-weight: 700; }
.fold-chev { width: 20px; height: 20px; justify-self: end; }
.fold-chev::before {
  content: ""; display: block; width: 8px; height: 8px; margin: 4px auto 0;
  border-right: 2.5px solid var(--black-60); border-bottom: 2.5px solid var(--black-60);
  transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease;
}
.fold.open .fold-chev::before { transform: rotate(-135deg); margin-top: 8px; }
.fold-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; }
.fold.open .fold-body { grid-template-rows: 1fr; }
.fold-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 0 24px; visibility: hidden; transition: visibility 0s linear 0.22s, padding 0.22s ease; }
.fold.open .fold-inner { visibility: visible; transition-delay: 0s; padding: 4px 24px 20px; }
.fold.settled .fold-inner { overflow: visible; }
.fold.open .fold-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (prefers-reduced-motion: reduce) {
  .fold-body, .fold-inner, .fold-chev::before { transition: none; }
}
.row-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.income-auto { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.income-lines .box input { width: 80px; }
/* A narrow Income card puts the description on its own row, so the category,
   amount and remove button stay inside the card (issue #54). */
.income-lines { container-type: inline-size; }
@container (max-width: 440px) {
  .rows.income-lines > li { flex-wrap: wrap; }
  .income-lines > li > .inline.name { flex-basis: 100%; }
  .income-lines > li > select.inline { flex: 1 1 0; }
}
.unsorted-list > li { flex-direction: column; align-items: stretch; gap: 8px; border-style: dashed; }
.unsorted-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.unsorted-pick .tag { color: var(--black-80); }
.unsorted-list .costs > li { border-style: solid; }
.legend-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; background: none; border: 0; padding: 2px 0; cursor: pointer; }
.legend-btn:hover { color: var(--accent); }

/* ---- Fields ---- */
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fields-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-label { font-size: 12px; font-weight: 700; color: var(--black-80); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.control {
  display: flex; align-items: center; min-width: 0; height: 40px;
  border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--panel);
}
.control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(116, 19, 220, 0.2); }
.control input, .control select {
  font: inherit; color: var(--ink); background: transparent; border: 0; outline: 0;
  width: 100%; min-width: 0; height: 100%; padding: 0 10px;
}
.control select { cursor: pointer; }
.control input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
.control.money::before { content: "£"; color: var(--muted); padding-left: 10px; order: 1; }
.control.pct::after { content: "%"; color: var(--muted); padding-right: 10px; order: 3; }
.control.money input[type=number], .control.pct input[type=number] { order: 2; }
.control.money input[type=number] { padding-left: 4px; }
.control.pct input[type=number] { padding-right: 4px; }
.control.small { height: 36px; width: 92px; flex: none; }
.check-field { display: flex; flex-direction: row; align-items: center; gap: 8px; align-self: end; height: 40px; font-weight: 600; font-size: 13px; cursor: pointer; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); flex: none; cursor: pointer; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; cursor: pointer; align-self: flex-start; }

details.more summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--accent); }
details.more[open] summary { margin-bottom: 10px; }
details.more .check-field { height: 36px; margin-top: 6px; }

/* ---- List rows (groups, rooms, costs) ---- */
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.rows > li { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 12px; }
.rows .empty { color: var(--muted); font-style: italic; border-style: dashed; justify-content: center; padding: 12px; }
.row-name { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.row-unit { font-size: 13px; color: var(--muted); }
.row-total { font-weight: 800; font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; cursor: pointer; }
.food-row, .panel > .row { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.inline {
  font: inherit; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 6px;
  height: 36px; padding: 0 8px; min-width: 0;
}
.inline:hover { border-color: var(--line); }
.inline:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(116, 19, 220, 0.2); }
.inline.name { flex: 1 1 80px; font-weight: 700; }
select.inline { cursor: pointer; padding-right: 4px; }
/* A negative figure (issue #62). */
.box:has(input.invalid), .control:has(input.invalid) { border-color: var(--neg); box-shadow: 0 0 0 2px var(--red-wash); }
.box { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--field-line); border-radius: 6px; background: var(--panel); }
.box:focus-within { border-color: var(--accent); }
.box input { font: inherit; border: 0; outline: 0; background: transparent; height: 100%; width: 64px; text-align: right; padding: 0 8px 0 2px; font-variant-numeric: tabular-nums; }
.box.money::before { content: "£"; color: var(--muted); padding-left: 8px; }
.box.count input { width: 52px; text-align: center; padding: 0; font-weight: 800; }
.box .step { font: inherit; font-weight: 900; font-size: 16px; width: 32px; height: 100%; border: 0; background: none; cursor: pointer; color: var(--accent); }
.box .step:hover { background: var(--wash); }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
.fee-text { font-size: 13px; color: var(--muted); min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.icon-btn { border: 0; background: none; color: var(--black-40); font-size: 20px; line-height: 1; cursor: pointer; width: 32px; height: 32px; border-radius: 6px; flex: none; }
.icon-btn:hover { color: var(--neg); background: var(--wash); }

/* Who's coming: a fixed grid so every column lines up whatever the names. */
.groups-head, .groups > li { display: grid; grid-template-columns: minmax(110px, 1fr) 88px 76px 112px 28px; align-items: center; gap: 8px; }
.groups-head { align-items: end; line-height: 1.25; padding: 0 9px 0 13px; margin-bottom: -4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.groups-head .num { text-align: right; }
.groups-head .center { text-align: center; }
.groups > li .inline { min-width: 0; width: 100%; }
.groups .fee-slot { display: flex; justify-content: flex-end; }
.groups .fee-slot .fee-text { font-size: 14px; color: var(--ink); font-weight: 700; }
.groups .fee-slot .box input { width: 56px; }
.groups .box.count { justify-self: center; }
.groups .icon-btn { width: 28px; }
.groups .box.count .step { width: 30px; }
.groups .box.count input { width: 44px; }
.groups + .hint { margin-top: 2px; }
/* Below the 468px the group columns need, the groups take the phone layout, so the
   remove button stays inside the card (issue #54). */
[data-fold="people"] .fold-inner { container-type: inline-size; }
@container (max-width: 467px) {
  .groups-head { display: none; }
  .rows.groups > li { grid-template-columns: minmax(0, 1fr) auto auto 28px; row-gap: 6px; }
  .rows.groups > li .inline.name { grid-column: 1 / -1; }
}
.link-btn { font: inherit; font-weight: 700; font-size: 14px; color: var(--accent); background: none; border: 0; padding: 4px 0; cursor: pointer; align-self: flex-start; }
.link-btn:hover { text-decoration: underline; }
.link-btn.small { font-size: 13px; padding: 0; }
.row-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.rooms > li.on { border: 2px solid var(--accent); background: var(--tint); padding: 7px 7px 7px 11px; }
.rooms > li.off { border-style: dashed; }
.rooms > li.off .inline, .rooms > li.off .row-total { color: var(--black-40); }
.rooms .sleeps { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.rooms .sleeps .box input { width: 44px; }
.rooms > li { flex-wrap: wrap; row-gap: 4px; }
.room-prices { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-left: 26px; }
.room-prices .price { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.room-prices select.inline { font-size: 14px; color: var(--ink); }
.rooms > li.off .room-prices select.inline { color: var(--black-40); }
.beds { background: var(--wash); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.beds-line { display: flex; justify-content: space-between; gap: 12px; }
.meter { height: 8px; border-radius: 4px; background: var(--black-20); overflow: hidden; }
.meter-fill { height: 100%; background: var(--accent); width: 0; transition: width 0.2s; }
.beds-extra { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.beds-extra .control { width: 110px; height: 36px; }

.costs .cat { max-width: 150px; font-size: 13px; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.seats.short .meter-fill { background: var(--danger); }
.seats.short .beds-line b { color: var(--danger); }

.plans-wrap { border-top: 1px solid var(--line); padding-top: 12px; }
.plans-body { display: flex; flex-direction: column; gap: 8px; }
.plans-wrap summary .plans-summary { font-weight: 400; color: var(--muted); margin-left: 4px; }
.plans-wrap summary .plans-summary.warn { color: var(--danger); font-weight: 700; }
.plans > li { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
.plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-name { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.plan-head .box.count .step { width: 30px; }
.plan-count { padding: 0 6px; font-weight: 800; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-head .link-btn { align-self: center; font-size: 13px; }
.plan-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-pay { display: inline-flex; flex-direction: column; gap: 2px; }
.plan-pay-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.plan-pay .box input { width: 72px; }
.plan-pay .box input::placeholder { color: var(--black-40); }
.plan-note.warn { color: var(--danger); font-weight: 700; }
.stat { background: var(--wash); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; min-width: 0; }
.stat-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.stat input, .stat-value {
  font: inherit; font-size: 22px; font-weight: 900; color: var(--ink); background: transparent; border: 0; border-bottom: 1px dashed var(--black-40);
  padding: 0; width: 100%; height: 34px; outline: 0; font-variant-numeric: tabular-nums;
}
.stat input:focus { border-bottom: 2px solid var(--accent); }
.stat input::placeholder { color: var(--black-40); }
.stat-value { border: 0; line-height: 34px; cursor: pointer; }
.lines { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lines div { display: flex; justify-content: space-between; gap: 12px; }
.lines dt { color: var(--text); }
.lines dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; }
.minibus-body.off { opacity: 0.45; }

.allowance-only.fields { align-items: end; }

/* Per-minibus table (a small spreadsheet) */
.table-scroll { overflow-x: auto; }
.sheet-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sheet-table th, .sheet-table td { border: 1px solid var(--line); height: 34px; padding: 0 8px; vertical-align: middle; }
.sheet-table thead th { background: var(--wash); font-size: 12px; font-weight: 800; text-align: left; white-space: nowrap; }
.sheet-table th.num, .sheet-table td.num { text-align: right; }
.sheet-table td.in { padding: 0; }
.sheet-table td.in:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.sheet-table td.in input { font: inherit; color: var(--ink); background: transparent; border: 0; outline: 0; width: 100%; min-width: 0; height: 32px; padding: 0 8px; }
.sheet-table td.in input[type=number] { text-align: right; }
.sheet-table td.in input::placeholder { color: var(--black-40); }
.sheet-table td.calc { background: var(--wash); cursor: pointer; white-space: nowrap; }
.vehicles td:nth-child(2) { width: 60px; }
.vehicles td:nth-child(3) { width: 70px; }
.vehicles td:nth-child(4) { width: 90px; }
.vehicles td:nth-child(5) { width: 90px; }
.vehicles td:nth-child(6) { width: 90px; }
#vehicles-wrap { margin-top: 10px; }
#vehicles-wrap .hint { margin-top: 6px; }

[data-out]:hover { color: var(--accent); }
.kpi-main [data-out]:hover { color: var(--white); text-decoration: underline; }

/* ---- Statement (view link and preview) ---- */
.report { display: none; width: 100%; max-width: 940px; margin: 0 auto; padding: 24px 24px 48px; flex-direction: column; gap: 18px; }
body.read-only .workspace, body.previewing .workspace { display: none; }
body.read-only .report, body.previewing .report { display: flex; }
body.read-only .edit-only { display: none !important; }
.preview-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--tint); border-radius: 12px; padding: 10px 16px; font-weight: 700; color: var(--tint-ink); }
.statement-card { background: var(--panel); border-radius: 6px; padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.report-head { border-top: 6px solid var(--accent); }
.report-head h1 { font-weight: 900; font-size: 32px; line-height: 1.15; color: var(--accent); margin: 0; }
.report-desc { margin: 0; font-size: 15px; white-space: pre-line; }
.report-desc:empty { display: none; }
.report-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 24px; margin: 4px 0 0; }
.report-facts dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.report-facts dd { margin: 0; font-weight: 800; color: var(--ink); }
.report-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.report-kpis .kpi { background: var(--panel); }
.report-kpis .kpi-main { background: var(--scout-forest-green); }
.report-kpis .kpi-main.loss { background: var(--scout-navy); }
.report-kpis .kpi-value, .report-kpis .kpi-note { cursor: default; }

.statement { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.statement th, .statement td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.statement thead th { font-size: 12px; font-weight: 800; color: var(--muted); border-bottom: 2px solid var(--ink); white-space: nowrap; }
.statement .num { text-align: right; white-space: nowrap; }
.statement tbody th { font-weight: 400; }
.r-groups tbody th { font-weight: 700; }
.r-groups tfoot th, .r-groups tfoot td { font-weight: 900; color: var(--ink); border-bottom: 0; }
.statement-hint { margin-top: -6px; }

.report-budget td.remaining.neg { color: var(--neg); }
/* With actuals: "Budget" over total and per head, "Actual so far" over paid and remaining. */
.report-budget tr.col-groups th, .report-budget tr.col-groups td { border-bottom: 0; padding-bottom: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; }
.report-budget tr.col-groups th { color: var(--accent); }
.report-budget tr.col-groups th span { display: block; }
.report-budget tr.col-groups .group-budget { box-shadow: inset 0 -2px 0 var(--tint); }
.report-budget tr.col-groups .group-actual { color: var(--teal-ink); box-shadow: inset 0 -2px 0 var(--teal-wash); }
.report-budget .group-start { border-left: 1px solid var(--line); }
/* The bar between the budget and the actuals sits midway between the last
   budget figure and the first actual one: the figure columns shrink to their
   content (the name column takes the spare width), with equal padding either
   side of the bar. */
.report-budget.with-actuals th.num, .report-budget.with-actuals td.num { width: 1%; padding-left: 20px; padding-right: 20px; }
.report-budget.with-actuals .per-yp { padding-right: 28px; }
.report-budget.with-actuals .group-start { padding-left: 28px; }
.report-budget .line-actual { display: none; }
.report-budget tbody.uncat th, .report-budget tbody.uncat td { color: var(--black-60); font-style: italic; }
.report-budget tbody.last th, .report-budget tbody.last td { border-bottom: 2px solid var(--ink); }
.report-budget tbody.total th, .report-budget tbody.total td { font-weight: 900; color: var(--ink); }
.report-budget tbody.income th, .report-budget tbody.income td { font-weight: 800; color: var(--teal-ink); }
.report-budget tbody.section th { padding-top: 18px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); text-align: left; }
.report-budget tbody.profit th, .report-budget tbody.profit td { font-weight: 900; font-size: 17px; border-top: 2px solid var(--ink); border-bottom: 4px double var(--ink); }
.report-budget tbody.profit.pos td { color: var(--pos); }
.report-budget tbody.profit.neg td { color: var(--neg); }
.report-budget tr.item { display: none; }
.report-budget tbody.open tr.item { display: table-row; }
.report-budget tbody.open tr.line th, .report-budget tbody.open tr.line td { color: var(--accent); font-weight: 800; border-bottom: 0; }
.report-budget tr.item th, .report-budget tr.item td { background: var(--wash); font-size: 13px; padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.report-budget tr.item th { padding-left: 30px; }
.report-budget tr.item td { color: var(--black-60); }
.report-budget tbody.open tr.item:last-child th, .report-budget tbody.open tr.item:last-child td { border-bottom: 1px solid var(--line); }
.item-label { display: block; color: var(--black-80); font-weight: 700; }
.item-detail { display: block; font-size: 12px; color: var(--muted); }
.expand {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 8px;
}
.expand::before {
  content: ""; width: 7px; height: 7px; border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg); transition: transform 0.15s; flex: none;
}
.expand[aria-expanded="true"]::before { transform: rotate(45deg); }
.expand:hover { color: var(--accent); }
.expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.report-budget .no-expand { padding-left: 15px; display: inline-block; }

/* ---- Linking to an OSM event ---- */
.osm-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  border: 1px solid var(--line); border-radius: 12px; padding: 18px;
  color: var(--text); background: var(--panel); font: inherit;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.osm-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.osm-dialog .fields { margin-top: 10px; }
@media (max-width: 640px) {
  /* One column on phones: the selects get the full width, and each event's
     dates go on their own line under its name. */
  .osm-dialog { padding: 16px; max-height: calc(100dvh - 32px); }
  .osm-dialog .fields { grid-template-columns: minmax(0, 1fr); }
  .osm-dialog select { font-size: 16px; }
}
/* Link to an OSM event: a purple header with the term, sections down the side, events by month. */
.osm-picker { width: min(920px, calc(100vw - 32px)); height: min(680px, calc(100vh - 48px)); padding: 0; overflow: hidden; border: 0; border-radius: var(--panel-radius); }
.osm-picker[open] { display: flex; flex-direction: column; }
.osm-band { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 14px; background: var(--scout-purple); color: var(--white); }
.osm-band-top { display: flex; align-items: center; gap: 12px; }
.band-tile { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); }
.band-tile svg { width: 21px; height: 21px; }
.osm-band-title { flex: 1; min-width: 0; }
.osm-band h2 { color: var(--white); font-size: 19px; }
.osm-who { margin: 2px 0 0; font-size: 13px; opacity: 0.9; }
.band-link { font: inherit; font-weight: 700; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.close-x { flex: none; width: 36px; height: 36px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.16); color: var(--white); position: relative; }
.close-x::before, .close-x::after { content: ""; position: absolute; left: 11px; top: 17px; width: 14px; height: 2.4px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.close-x::after { transform: rotate(-45deg); }
.close-x:hover { background: rgba(255, 255, 255, 0.26); }
.close-x:focus-visible, .band-link:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.osm-band-row { display: flex; align-items: center; gap: 10px 14px; min-width: 0; }
.osm-section-name { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.band-pick { display: none; }
/* Terms: the Guided / Simplified switch, in white on purple. Scrolls sideways if there are many. */
.band-pills { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.band-pills::-webkit-scrollbar { display: none; }
.band-pills label { cursor: pointer; flex: none; }
.band-pills input { position: absolute; opacity: 0; pointer-events: none; }
.band-pills span { display: block; padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--white); }
.band-pills input:checked + span { background: var(--white); color: var(--scout-purple); }
.band-pills input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 1px; }
.osm-body { flex: 1; min-height: 0; display: flex; }
.osm-nav { width: 240px; flex: none; overflow: auto; padding: 12px; border-right: 1px solid var(--line); background: var(--wash); }
.sheet-nav-head { display: none; }
.osm-nav .sheet-nav-head { display: flex; padding: 0 10px 4px; }
.osm-nav .sheet-nav-head strong { font-size: 12px; font-weight: 700; color: var(--black-80); }
.osm-nav .sheet-nav-head .link-btn { display: none; }
.sheet-nav-group { font-size: 12px; font-weight: 800; color: var(--muted); padding: 12px 10px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osm-main { flex: 1; min-width: 0; overflow: auto; padding: 4px 18px 16px; }
#osm-state { margin-top: 12px; }
#osm-state:empty { display: none; }
.osm-month h3 { margin: 0; padding: 14px 4px 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.osm-month ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.osm-event {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px;
  font: inherit; text-align: left; color: var(--text); background: none; cursor: pointer;
}
.osm-event:hover, .osm-event:focus-visible { background: var(--wash); outline: none; }
.osm-event:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.osm-event-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.osm-event-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.osm-event-name { min-width: 0; font-weight: 700; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osm-event-saved { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--teal-wash); color: var(--teal-ink); font-size: 12px; font-weight: 700; }
.osm-event-when { color: var(--muted); font-size: 13px; }
/* What choosing it does: shown on hover on desktop, always for an event with a budget. */
.osm-event-go {
  flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radius);
  font-weight: 700; font-size: 13px; white-space: nowrap; background: var(--scout-purple); color: var(--white); opacity: 0;
}
.osm-event:hover .osm-event-go, .osm-event:focus-visible .osm-event-go { opacity: 1; }
.osm-event.saved .osm-event-go { opacity: 1; background: var(--panel); color: var(--scout-teal); border: 1px solid var(--scout-teal); }
.osm-foot { flex: none; margin: 0; padding: 10px 18px; border-top: 1px solid var(--line); }
/* The calendar-page date used for events and budgets. */
.cal { flex: none; width: 46px; border-radius: 10px; overflow: hidden; text-align: center; background: var(--panel); border: 1px solid var(--line); line-height: 1; }
.cal b { display: block; padding: 3px 0; background: var(--scout-purple); color: var(--white); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cal > span { display: block; padding: 5px 0 6px; font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cal.teal b { background: var(--scout-teal); }
.cal.past b, .cal.none b { background: var(--black-40); }
.cal.none > span { font-size: 12px; padding: 8px 0 9px; color: var(--muted); }
@media (max-width: 640px) {
  .osm-picker { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .osm-band { padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px; gap: 10px; }
  .osm-band-row { flex-direction: column; align-items: stretch; }
  .osm-section-name { display: none; }
  .band-pick {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 14px; border: 0; border-radius: 10px;
    font: inherit; font-weight: 700; font-size: 16px; text-align: left; cursor: pointer; background: rgba(255, 255, 255, 0.16); color: var(--white);
  }
  .band-pick::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor; transform: rotate(45deg) translateY(-2px); }
  .band-pills { align-self: flex-start; }
  .osm-nav { display: none; }
  .osm-main { padding: 0 12px 12px; }
  .osm-event { padding: 10px 6px; }
  .osm-event-name { white-space: normal; }
  .osm-event-title { flex-wrap: wrap; row-gap: 2px; }
  .osm-event-go { opacity: 1; width: 22px; padding: 0; font-size: 0; background: none; color: var(--accent); justify-content: center; }
  .osm-event-go::before { content: ""; width: 8px; height: 8px; border-right: 2.4px solid currentColor; border-top: 2.4px solid currentColor; transform: rotate(45deg); }
  .osm-event.saved .osm-event-go { border: 0; background: none; color: var(--scout-teal); }
  .osm-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* The section list rises from the bottom as a sheet. */
  .osm-picker.picking::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1; }
  .osm-picker.picking .osm-nav {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; width: auto; max-height: 78dvh; border: 0;
    padding: 12px 16px calc(28px + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0; background: var(--panel); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
  }
  .osm-nav .sheet-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 6px; }
  .osm-nav .sheet-nav-head strong { font-size: 18px; font-weight: 900; color: var(--ink); }
  .osm-nav .sheet-nav-head .link-btn { display: block; padding: 10px 0; align-self: center; }
  .osm-nav .budgets-nav-item { min-height: 44px; font-size: 15px; }
  .osm-nav .sheet-nav-group { font-size: 15px; color: var(--ink); padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; }
}
.new-dialog { width: min(480px, calc(100vw - 32px)); }
.new-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.new-choice {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: var(--text); background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 14px 16px;
}
.new-choice strong { font-size: 16px; color: var(--accent); }
.new-choice span { font-size: 14px; color: var(--muted); }
.new-choice:hover, .new-choice:focus-visible { border-color: var(--accent); background: var(--wash); outline: none; }

/* ---- Accounts, budgets list and groups ---- */
.account-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 999px; font-weight: 700; font-size: 13px; list-style: none;
}
.account-chip:hover { background: rgba(255, 255, 255, 0.12); }
.account-chip:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.account-chip .avatar { width: 28px; height: 28px; font-size: 11px; }
.account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--tint-ink); font-weight: 800; font-size: 10px; letter-spacing: 0.02em;
}
#account-avatar { display: contents; }

.guest-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; border: 1px solid var(--black-20); border-left: 4px solid var(--scout-purple); border-radius: 8px; background: var(--tint); font-size: 13px; }
.guest-notice p { margin: 0; flex: 1 1 260px; }
.guest-notice strong { display: block; }
.delete-error { color: var(--neg); font-weight: 700; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.person { display: inline-flex; align-items: center; gap: 6px; }
.person strong { color: var(--text); font-weight: 700; }
.group-tag, .code-tag {
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
  background: rgba(8, 132, 134, 0.12); color: var(--scout-teal);
}
.code-tag { background: var(--wash); color: var(--black-60); letter-spacing: 0.03em; }
.share-field { max-width: 360px; }
.share-field .hint { font-size: 12px; }
.share-menu { position: relative; }
.share-menu > summary { list-style: none; cursor: pointer; padding: 0 10px; gap: 8px; }
.share-menu > summary::-webkit-details-marker { display: none; }
.share-menu > summary:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(116, 19, 220, 0.2); outline: 0; }
.share-menu > summary span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-menu > summary::after { content: ""; flex: none; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); }
.share-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; margin: 0; padding: 6px; max-height: 320px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
}
.share-list .share-group { font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 10px 2px; }
.share-list label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.share-list label:hover, .share-list label:focus-within { background: var(--tint); }
.share-list input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
.share-list .share-empty { font-size: 13px; color: var(--muted); padding: 8px 10px; }

.btn-solid { background: var(--scout-purple); color: var(--white); border-color: var(--accent); }
.btn-outline { background: var(--panel); color: var(--accent); border-color: var(--accent); }
.btn-danger { background: var(--danger); color: var(--white); border-color: var(--danger); }
.btn-danger-outline { background: var(--panel); color: var(--danger); border-color: var(--danger); margin-right: auto; }
.btn-danger-outline:hover { background: var(--danger); color: var(--white); }
.btn-danger-outline:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.btn-solid:focus-visible, .btn-outline:focus-visible, .btn-danger:focus-visible { outline: 2px solid var(--scout-purple); outline-offset: 2px; }
.btn.small { height: 32px; padding: 0 12px; }
/* Save with nothing new to save: greyed out. */
#save-btn.clean { filter: grayscale(1); opacity: 0.45; cursor: default; }

/* ---- My budgets: sections down the side; a pop-up picker on phones ---- */
/* ---- My budgets: a page of its own, under the app bar ---- */
body.budgets-mode .workspace, body.budgets-mode .report, body.budgets-mode .publishbar,
body.budgets-mode .appbar-code, body.budgets-mode .appbar-actions, body.budgets-mode #event-name-display { display: none !important; }
.page-name, .appbar-budgets { display: none; }
body.budgets-mode .page-name { display: block; }
body.budgets-mode .appbar-budgets { display: flex; }
.appbar-budgets { flex: 1; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; }
.appbar-search { position: relative; flex: 0 1 360px; min-width: 0; }
.appbar-search input {
  width: 100%; height: 36px; padding: 0 14px 0 36px; border: 0; border-radius: 999px; font: inherit; font-size: 14px;
  background: rgba(255, 255, 255, 0.16); color: var(--white);
}
.appbar-search input::placeholder { color: rgba(255, 255, 255, 0.8); }
.appbar-search input:focus { outline: 2px solid var(--white); outline-offset: 1px; background: var(--white); color: var(--black); }
.appbar-search input:focus::placeholder { color: var(--muted); }
.appbar-search::before {
  content: ""; position: absolute; left: 13px; top: 11px; width: 14px; height: 14px; pointer-events: none; background: currentColor; color: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.appbar-search:focus-within::before { color: var(--muted); }
.budgets-page { width: 100%; max-width: 1320px; margin: 0 auto; padding: 20px 24px 40px; display: flex; align-items: flex-start; }
.budgets-page[hidden] { display: none; }
.budgets-nav {
  width: var(--nav-width, 250px); flex: none; box-sizing: border-box; padding: 10px; border-radius: var(--panel-radius); background: var(--panel);
  position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow: auto;
}
.budgets-nav-head { display: none; }
.budgets-nav-item, .budgets-nav-group {
  font: inherit; width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer;
  border: 0; background: none; color: var(--text);
}
.budgets-nav-item { font-size: 14px; padding: 8px 10px; border-radius: 8px; }
.budgets-nav-item.indent { padding-left: 26px; }
.budgets-nav-item.strong { font-weight: 800; }
.budgets-nav-item .label, .budgets-nav-group .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budgets-nav-item .n { font-size: 12px; font-weight: 800; color: var(--muted); }
.budgets-nav-item.empty { color: var(--muted); }
.budgets-nav-item.empty .n { font-weight: 400; }
.budgets-nav-item:hover { background: var(--wash); }
.budgets-nav-item[aria-current="true"] { background: var(--scout-purple); color: var(--white); font-weight: 700; }
.budgets-nav-item[aria-current="true"] .n { color: var(--white); }
.budgets-nav-group { font-size: 12px; font-weight: 800; color: var(--muted); padding: 14px 10px 4px; }
.budgets-nav-group .n { font-weight: 400; white-space: nowrap; }
.budgets-nav-group::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-right: 2px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform 0.15s;
}
.budgets-nav-group[aria-expanded="true"]::before { transform: rotate(45deg); }
.budgets-nav-item:focus-visible, .budgets-nav-group:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Drag the gap between the two cards to make the section list wider or narrower. */
.budgets-resize { flex: none; align-self: stretch; width: 20px; cursor: col-resize; position: relative; touch-action: none; }
.budgets-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 9px; width: 2px; border-radius: 2px; background: transparent; }
.budgets-resize:hover::after, .budgets-resize:focus-visible::after, .budgets-resize.dragging::after { left: 8px; width: 4px; background: var(--accent); }
.budgets-resize:focus-visible { outline: none; }
.budgets-main { flex: 1; min-width: 0; gap: 12px; }
.budgets-main .budgets-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.budgets-kpis .kpi-value { cursor: default; }
.budgets-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.budgets-toolbar select, .budgets-pick {
  font: inherit; font-size: 14px; height: 40px; box-sizing: border-box; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--panel); color: var(--text);
}
.budgets-toolbar select { font-weight: 700; padding: 0 8px; margin-left: auto; }
.budgets-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budgets-pick { display: none; font-weight: 700; padding: 0 12px; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budgets-selbar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 6px 4px 16px; border-radius: 10px; background: #4b0d8f; color: var(--white); }
.budgets-selbar[hidden] { display: none; }
.budgets-selbar strong { flex: 1; font-size: 15px; }
.budgets-selbar .link-btn { color: var(--white); align-self: center; }
.budgets-head, .budget-list li { display: flex; align-items: center; gap: 12px; }
.budgets-head { padding: 0 6px 8px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.budgets-head[hidden] { display: none; }
.budgets-head > span:nth-child(2) { flex: 1; font-weight: 700; color: var(--black-80); }
.budgets-page input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); }
.col-changed { width: 160px; flex: none; font-size: 13px; color: var(--muted); }
.col-changed .avatar { width: 22px; height: 22px; font-size: 9px; }
.col-actions { width: 124px; flex: none; justify-content: flex-end; }
#budgets-state:empty { display: none; }
.budget-group h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 14px 6px 4px; font-size: 14px; color: var(--ink); }
.budget-group h3 span { font-size: 12px; font-weight: 400; color: var(--muted); }
.budget-list ul { list-style: none; margin: 0; padding: 0; }
.budget-list li { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.budget-list li.selected { background: var(--tint); border-radius: 8px; }
.budget-list .lock {
  width: 18px; height: 18px; flex: none; background: center / 14px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.budget-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.budget-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.budget-title strong { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.budget-main { container-type: inline-size; }
/* When the section list is dragged wide, the title keeps the room and the code goes. */
@container (max-width: 280px) { .budget-title .code-tag { display: none; } }
.budget-sub { display: flex; align-items: center; gap: 4px 6px; min-width: 0; overflow: hidden; font-size: 13px; color: var(--muted); white-space: nowrap; }
.budget-sub .when { margin-right: 4px; }
.budget-sub .tag { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--tint); color: var(--tint-ink); }
.budget-sub .tag.draft { background: var(--amber-wash); color: var(--amber-ink); }
.budget-sub .tag.grey { background: var(--wash); color: var(--muted); }
/* The section that owns the budget, apart from those it's shared with. */
.budget-sub .tag.owner { background: var(--teal-wash); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--scout-teal); }
.budget-actions { display: flex; gap: 6px; flex: none; }
.budgets-more { align-self: center; margin: 4px 0; flex: none; }

.delete-dialog { width: min(440px, calc(100vw - 32px)); }
.delete-dialog h2 { margin: 0 0 10px; }
.delete-dialog ul { margin: 0 0 12px; padding-left: 18px; line-height: 1.7; }
.delete-dialog p { margin: 0 0 8px; }
.delete-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.delete-actions .btn { height: 44px; font-size: 15px; }

@media (max-width: 640px) {
  /* The bar: title, Back, New and the menu on one line, search under them. */
  body.budgets-mode .appbar { grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 8px; }
  body.budgets-mode .appbar-budgets { display: contents; }
  body.budgets-mode .appbar .account-menu { grid-column: 4; }
  #budgets-back { grid-row: 1; grid-column: 2; padding: 0 12px; }
  #budgets-new { grid-row: 1; grid-column: 3; padding: 0 12px; }
  .wide-only { display: none; }
  .appbar-search { grid-row: 2; grid-column: 1 / -1; }
  .budgets-title { display: none; }
  .appbar-search input { height: 40px; font-size: 16px; border-radius: 10px; background: var(--panel); color: var(--ink); }
  .appbar-search input::placeholder { color: var(--muted); }
  .appbar-search::before { color: var(--muted); top: 13px; }
  .budgets-page { padding: 12px 10px 24px; }
  .budgets-main { padding: 14px 12px; }
  .budgets-main .budgets-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .budgets-kpis .kpi:nth-child(4) { display: none; }
  .budgets-kpis .kpi { padding: 8px 10px; }
  .budgets-kpis .kpi-value { font-size: 20px; }
  .budgets-pick { display: block; flex: 1; min-width: 0; border-color: var(--accent); background: var(--tint); color: var(--tint-ink); }
  .budgets-toolbar select { margin-left: 0; }
  /* On phones the delete bar sits at the bottom of the screen. */
  .budgets-selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; border-radius: 0; padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .budgets-selbar .btn { height: 40px; }
  .budgets-head .col-changed, .budgets-head .col-actions, .budget-list .col-changed, .budget-list .code-tag { display: none; }
  .budget-sub .when { display: none; }
  .col-actions { width: auto; }
  .budget-list li { gap: 10px; padding: 8px 2px; }
  /* View and Edit become icons, so the title gets the room. */
  .budget-actions .btn { width: 36px; height: 36px; padding: 0; font-size: 0; display: inline-grid; place-items: center; }
  .budget-actions .btn::before {
    content: ""; width: 17px; height: 17px; background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  }
  .budget-actions .btn.view-btn { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
  .budget-actions .btn.edit-btn { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z'/%3E%3C/svg%3E"); }
  .budget-actions .edit-locked .btn::before { display: none; }
  body.budgets-mode.selecting .sitefoot { padding-bottom: 90px; }
  /* The section list becomes a sheet that rises from the bottom. */
  .budgets-nav { display: none; }
  .budgets-resize { display: none; }
  .budgets-page.picking::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 20; }
  .budgets-page.picking .budgets-nav {
    display: block; position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 21; width: auto; max-height: 78dvh;
    padding: 12px 16px calc(28px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 16px 16px 0 0; background: var(--panel); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
  }
  .budgets-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .budgets-nav-head strong { font-size: 18px; font-weight: 900; color: var(--ink); }
  .budgets-nav-head .link-btn { padding: 10px 0; align-self: center; }
  .budgets-nav-item, .budgets-nav-group { min-height: 44px; font-size: 15px; }
  .budgets-nav-group { padding-top: 8px; border-top: 1px solid var(--line); margin-top: 6px; font-size: 15px; color: var(--ink); }
}

/* ---- Smaller screens ---- */
@media (max-width: 1100px) {
  .kpis, .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-name { max-width: 60vw; }
}
@media (max-width: 1000px) {
  .cards.ledger { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rows > li { flex-wrap: wrap; }
  .rows > li .inline.name { flex-basis: 100%; }
  .groups-head { display: none; }
  /* Name on top; pays, fee, people and remove below. */
  .groups > li { grid-template-columns: minmax(0, 1fr) auto auto 28px; row-gap: 6px; }
  .groups > li .inline.name { grid-column: 1 / -1; }
  /* Name and menu, then the code, then the budget's actions in one row. */
  .appbar { padding: 10px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .appbar-title { grid-column: 1; }
  .event-name { max-width: none; }
  .appbar .account-menu { grid-column: 2; grid-row: 1; }
  .appbar .account-name { display: none; }
  .appbar .account-chip { padding: 0 10px 0 4px; }
  .appbar-code { grid-column: 1 / -1; }
  .appbar-actions { grid-column: 1 / -1; margin-left: 0; flex-wrap: nowrap; }
  .appbar-actions > * { flex: 1 1 0; min-width: 0; }
  .appbar-actions .btn, .appbar-actions summary.btn { width: 100%; justify-content: center; padding: 0 8px; }
  /* Share and Export open full width under the bar. */
  .appbar { position: relative; }
  .appbar-actions .export-menu { position: static; }
  .appbar-actions .export-list { left: 16px; right: 16px; width: auto; top: calc(100% - 6px); }
    .workspace, .report { padding: 16px 12px 32px; gap: 14px; }
  .panel { padding: 16px; border-radius: 12px; }
  .fold { padding: 0; }
  .fold-btn { padding: 10px 12px; gap: 10px; grid-template-columns: 32px minmax(0, 1fr) auto 16px; min-height: 58px; border-radius: 12px; }
  .fold-icon { width: 32px; height: 32px; }
  .fold-name { font-size: 15px; }
  .fold .head-figure { font-size: 15px; }
  .fold-inner, .fold.open .fold-inner { padding-left: 14px; padding-right: 14px; }
  .fold.open .fold-inner { padding-bottom: 16px; }
  .fold-tools { margin: -4px 2px -6px; }
  .statement-card { padding: 18px 16px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .title-input { font-size: 26px; }
  .dates { grid-template-columns: minmax(0, 1fr); }
  .fields-3, .fields-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-name { flex-basis: 100%; }
  .report-head h1 { font-size: 26px; }
  /* Two headline figures a row: smaller, and never cut off. */
  .kpi { padding: 12px; }
  .kpi-value { font-size: clamp(17px, 5.4vw, 20px); white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .kpi-main .kpi-value { font-size: clamp(20px, 6.4vw, 24px); }
  .statement th, .statement td { padding: 9px 4px; }
  .statement .per-person { display: none; }
  /* With actuals: budget, actual and remaining, and no per-head columns. */
  /* With actuals: the budget's columns stay, and each line says what's been
     paid and what's left under its name, with a bar. */
  .statement.with-actuals .actual, .statement.with-actuals .remaining, .statement.with-actuals .group-actual { display: none; }
  .statement.with-actuals tr.col-groups { display: none; }
  .report-budget .line-actual { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0 15px; font-size: 12px; font-weight: 400; color: var(--black-60); }
  .report-budget tbody.total .line-actual, .report-budget tbody.profit .line-actual { margin-left: 0; }
  .report-budget .line-actual.over { color: var(--neg); font-weight: 700; }
  .report-budget .line-bar { display: block; height: 6px; max-width: 160px; border-radius: 999px; background: var(--wash); overflow: hidden; }
  .report-budget .line-bar span { display: block; height: 100%; border-radius: 999px; background: var(--scout-teal); }
  .report-budget .line-actual.over .line-bar span { background: var(--neg); }
  .report-budget tbody.profit .line-actual { font-size: 12px; }
}
.minibus-body, .rooms-body { display: flex; flex-direction: column; gap: 12px; }

/* ---- Export menu ---- */
.export-menu { position: relative; }
.export-menu > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.export-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 220px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
}
.export-list button, .export-list a {
  font: inherit; text-decoration: none; font-weight: 800; font-size: 14px; color: var(--ink); text-align: left; background: none; border: 0;
  border-radius: 8px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 1px;
}
/* Appearance: Light, Dark or Auto (theme.js), at the foot of the menu and the home page. */
.theme-switch { margin: 4px 0 0; padding: 8px 10px 6px; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.theme-switch legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-weight: 800; font-size: 14px; color: var(--ink); }
.theme-options { clear: both; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--wash); border: 1px solid var(--line); }
.theme-options label { flex: 1; position: relative; cursor: pointer; }
.theme-options input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.theme-options span { display: block; padding: 4px 10px; border-radius: 999px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.theme-options input:checked + span { background: var(--scout-purple); color: var(--white); }
.theme-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.home-footer .theme-switch { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; }
.home-footer .theme-switch legend { width: auto; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.home-footer .theme-options { clear: none; }
.export-list button small, .export-list a small { font-weight: 400; font-size: 12px; color: var(--muted); }
.export-list button:hover, .export-list button:focus-visible, .export-list a:hover, .export-list a:focus-visible { background: var(--tint); outline: 0; }

/* ---- Owner and link, in the OSM dialog ---- */
.osm-owner { border-top: 1px solid var(--black-20); margin-top: 12px; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.osm-owner h3 { margin: 0; font-size: 14px; }
.osm-owner-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }

/* ---- Publish bar: sticks to the bottom of the screen while editing, and rests on the footer once scrolled to the end ---- */
.publishbar { margin-top: auto; flex-shrink: 0; position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 16px; padding: 10px 24px; background: var(--panel); border-top: 1px solid var(--black-20); box-shadow: 0 -2px 8px rgba(0, 0, 0, .08); }
.publishbar .hint { margin: 0; }
.publishbar:not([hidden]) + .sitefoot { margin-top: 0; }

/* ---- Footer: which release is live ---- */
.sitefoot { flex-shrink: 0; width: 100%; max-width: 1320px; margin: auto auto 0; padding: 14px 24px calc(24px + env(safe-area-inset-bottom, 0px)); color: var(--black-60); font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; border-top: 1px solid var(--black-20); }

/* ---- Printing (Export, PDF): the statement only, every line opened ---- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .appbar, .workspace, .preview-bar, .message, .sitefoot, .publishbar, dialog { display: none !important; }
  .report { display: flex !important; padding: 0; max-width: none; }
  .statement-card { box-shadow: none; }
  .kpi { break-inside: avoid; }
  .statement-hint { display: none; }
  .report-budget tr.item { display: table-row; }
  .report-budget tbody { break-inside: avoid; }
  .expand::before, .expand::after { display: none; }
  .statement .per-person, .statement .per-yp { display: table-cell; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Guided or simplified ---- */
.mode-switch { display: inline-flex; align-self: flex-start; padding: 3px; gap: 2px; border-radius: 999px; background: var(--tint); margin-bottom: 4px; }
.mode-switch label { cursor: pointer; }
.mode-switch input { position: absolute; opacity: 0; pointer-events: none; }
.mode-switch span { display: block; padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--tint-ink); }
.mode-switch input:checked + span { background: var(--scout-purple); color: var(--white); }
.mode-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.simple-only { display: none; }
body.simplified .simple-only { display: flex; }
body.simplified .guided-only { display: none; }

/* The simplified table: a fixed grid so the columns line up. */
.lines-head, .lines > li { display: grid; grid-template-columns: minmax(120px, 1fr) 160px 120px 110px 110px 28px; align-items: center; gap: 8px; }
.lines-head { align-items: end; line-height: 1.25; padding: 0 9px 0 13px; margin-bottom: -4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.lines-head .num { text-align: right; }
.lines > li .inline { min-width: 0; width: 100%; }
.lines .box { justify-self: end; }
.lines .box input { width: 70px; }
.lines .row-total { margin-left: 0; text-align: right; }
.lines .icon-btn { width: 28px; }
.lines-auto { display: flex; flex-direction: column; border-top: 2px solid var(--line); }
.auto-row { display: flex; align-items: center; gap: 8px; padding: 10px 9px 10px 13px; border-bottom: 1px solid var(--line); }
.auto-row .row-total { margin-left: auto; }
.auto-row .row-name { font-weight: 700; }
.auto-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--scout-teal, #088486); background: var(--teal-wash); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.auto-row.total-row { border-bottom: 0; font-size: 17px; }
.auto-row.total-row .row-name, .auto-row.total-row .row-total { font-weight: 900; }

/* Simplified: money in across the top, then the budget lines across the full width. */
body.simplified .cards.ledger { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1001px) {
  body.simplified .money-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  body.simplified .money-in .col-head { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .lines-head { display: none; }
  /* Name; then category and fixed or variable; then cost, total and remove. */
  .lines > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px; row-gap: 6px; }
  .lines > li .inline.name { grid-column: 1 / -1; }
  .lines > li select:nth-of-type(2) { grid-column: 2 / 4; }
  .lines > li.calc-line > .line-basis, .lines > li.calc-line > select { grid-column: 2 / 4; }
  .lines .box { justify-self: start; }
  .auto-row { flex-wrap: wrap; }
}

/* Simplified mode: lines worked out by the Guided calculators */
.line-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 13px; min-width: 0; }
.line-cat .auto-tag { margin-left: 6px; font-size: 10px; padding: 1px 6px; }
.line-cat small { flex-basis: 100%; color: var(--muted); font-size: 11px; }
.line-basis { font-size: 13px; color: var(--muted); min-width: 0; }
.lines .inline.name.static { font-weight: 700; padding: 6px 0; }
.card-costs:not(:empty) { margin-top: 12px; }

/* ---- Actual income and spending ---- */
.actuals-panel h3 { margin: 0; font-size: 16px; font-weight: 800; }
/* Actuals: a drawer down the right on desktop, full screen on phones. */
.actuals-btn { display: inline-flex; align-items: center; gap: 6px; }
.count-badge {
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  background: #ff912a; color: var(--black); font-size: 12px; font-weight: 900; line-height: 20px; text-align: center;
}
.actuals-dialog {
  width: min(900px, calc(100vw - 48px)); max-width: none; height: 100dvh; max-height: none;
  margin: 0 0 0 auto; border-radius: 12px 0 0 12px; border-width: 0 0 0 1px; padding: 20px 24px; box-sizing: border-box;
  overflow: auto;
}
.actuals-dialog[open] { animation: actuals-in 0.18s ease-out; }
@keyframes actuals-in { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .actuals-dialog[open] { animation: none; } }
.actuals-head { position: sticky; top: -20px; z-index: 2; background: var(--panel); margin: -20px -24px 12px; padding: 16px 24px 12px; border-bottom: 1px solid var(--line); align-items: center; }
.actuals-head h2 { margin: 0; margin-right: auto; }
.actuals-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.actual-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.actual-fig { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.actual-fig strong { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.actual-fig.neg strong, .actuals-table .neg { color: var(--red-ink); }
.actual-fig.warn { border-color: #ff912a; background: var(--amber-wash); }
.recon { margin: 10px 0 0; }
.recon.ok::before { content: "✓ "; color: #25b755; font-weight: 900; }
.hint.warn, .recon.warn { color: var(--amber-ink); }
.actual-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 14px; align-items: start; }
.actuals-table { width: 100%; }
.actuals-table tbody.over .line th { color: var(--red-ink); }
.actuals-table tbody.uncat .line th { font-style: italic; }
.actuals-table .muted { color: var(--muted); }
.actuals-tx { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.actuals-tx .panel-head { flex-wrap: wrap; gap: 8px; }
.actual-list > li.actual-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(150px, 220px) 130px; align-items: center; gap: 6px 12px; }
.actual-main { display: flex; flex-direction: column; min-width: 0; }
.actual-desc { font-weight: 700; overflow-wrap: anywhere; }
.actual-meta { font-size: 12px; color: var(--muted); }
.actual-amount { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.actual-row.income .actual-amount { color: var(--pos); }
.actual-row.missing { opacity: 0.7; border-style: dashed; }
.actual-row.missing .actual-amount { text-decoration: line-through; }
.actual-pick { width: 100%; min-width: 0; }
.actual-state { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; padding: 3px 8px; text-align: center; background: var(--tint); color: var(--tint-ink); }
.actual-state.s-none { background: var(--amber-wash); color: var(--amber-ink); }
.actual-state.s-partial, .actual-state.s-over, .actual-state.s-invalid { background: var(--red-wash); color: var(--red-ink); }
.actual-state.s-full { background: var(--green-wash); color: var(--pos); }
.actual-state.s-missing { background: var(--wash); color: var(--muted); }
.actual-note { grid-column: 1 / -1; margin: 0; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.split-editor { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 8px 0 2px 12px; border-left: 3px solid var(--tint); }
.split-row { display: grid; grid-template-columns: minmax(0, 260px) 120px 28px; gap: 8px; align-items: center; }
.split-row .box input { width: 80px; }
.split-row input[aria-invalid="true"] { outline: 2px solid var(--red-ink); }
.split-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.split-left.warn { color: var(--red-ink); font-weight: 700; }
@media (max-width: 700px) {
  .actual-list > li.actual-row { grid-template-columns: minmax(0, 1fr) auto; }
  .actual-pick { grid-column: 1 / 2; }
  .split-row { grid-template-columns: minmax(0, 1fr) 110px 28px; }
  .actual-tables { grid-template-columns: minmax(0, 1fr); }
  .actuals-dialog { width: 100vw; border: 0; border-radius: 0; padding: 14px 16px; }
  .actuals-head { top: -14px; margin: -14px -16px 12px; padding: 12px 16px 10px; flex-wrap: wrap; row-gap: 2px; }
  .actuals-head .head-figure { order: 3; flex-basis: 100%; }
  .actuals-table th, .actuals-table td { padding: 8px 4px; font-size: 13px; }
  .actuals-table tr.item th { padding-left: 14px; }
}
.actuals-table tfoot th, .actuals-table tfoot td { font-weight: 900; border-top: 2px solid var(--ink); }

.actuals-lockout { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.actuals-lockout .hint { margin: 2px 0 0; }

/* A padlock beside the title of a locked (complete) budget. */
.title-lock { display: inline-flex; vertical-align: -0.1em; margin-left: 10px; width: 0.8em; height: 0.8em; color: var(--accent); }
.title-lock[hidden] { display: none; }
.title-lock svg { width: 100%; height: 100%; }

/* My budgets: a locked budget's Edit button is greyed out and disabled, with a padlock over it. */
.edit-locked { position: relative; display: inline-flex; cursor: not-allowed; }
.edit-locked .btn { filter: grayscale(1); opacity: 0.4; pointer-events: none; }
.edit-locked .padlock { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
.edit-locked .padlock::before {
  content: ''; width: 20px; height: 20px; background: var(--ink); filter: drop-shadow(0 0 1.5px var(--panel)) drop-shadow(0 0 3px var(--panel));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Phones: each room's name and total on the first line, then its beds and prices. */
@media (max-width: 640px) {
  .rooms > li .inline.name { flex-basis: 80px; }
  .rooms .sleeps { order: 5; margin-left: 26px; }
  .rooms .room-prices { order: 6; }
}

/* ---- Opened from a phone's home screen: keep clear of the notch and the home bar ---- */
.appbar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 641px) { .appbar { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }
.publishbar { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
/* Phone: two tidy rows of equal buttons with the helper line between them. */
@media (max-width: 640px) {
  .publishbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .publishbar .btn { width: 100%; justify-content: center; }
  .publishbar .btn[hidden] { display: none; }
  .publishbar .hint { grid-column: 1 / -1; order: 1; text-align: center; font-size: .85rem; }
  .publishbar #discard-btn { grid-column: 1 / -1; order: 2; }
  .publishbar #save-btn, .publishbar #publish-btn { order: 3; }
  .publishbar #publish-btn[hidden] ~ #save-btn { grid-column: 1 / -1; }
  .publishbar #delete-btn, .publishbar #history-btn { order: 0; }
}

/* Adding a category: a quiet box beside the add link. */
.inline-form { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-form .new-category {
  font: inherit; font-size: 14px; height: 32px; width: 150px; padding: 0 10px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.inline-form .new-category:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(116, 19, 220, 0.2); }
.inline-form select.inline { height: 32px; border-color: var(--line); font-size: 14px; }
.unsorted-pick .row-name { flex: 0 1 auto; }

/* ---- The top card with less detail: name, dates and the headline figures ---- */
.hero-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.hero-toggle::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-135deg); margin-top: 4px;
}
.hero.compact .hero-toggle::after { transform: rotate(45deg); margin-top: -3px; }
.hero.compact { gap: 12px 24px; padding-top: 16px; padding-bottom: 16px; }
.hero.compact .hero-event { gap: 6px; }
.hero.compact .desc-input, .hero.compact .dates, .hero.compact .byline, .hero.compact .share-field,
.hero.compact .formula-bar, .hero.compact .hero-block { display: none !important; }
.hero.compact .title-input { font-size: 24px; }
.hero.compact .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hero.compact .kpi { padding: 8px 10px; border-radius: 10px; }
.hero.compact .kpi-note { display: none; }
.hero.compact .kpi-label { font-size: 11px; }
.hero.compact .kpi-value, .hero.compact .kpi-main .kpi-value { font-size: 17px; line-height: 1.2; }
@media (max-width: 640px) {
  .hero.compact .kpi { padding: 7px 8px; }
  .hero.compact .kpi-value, .hero.compact .kpi-main .kpi-value { font-size: clamp(12px, 3.6vw, 15px); white-space: nowrap; overflow: visible; }
  .hero.compact .kpi-label { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero.compact .title-input { font-size: 22px; }
  .hero.compact .chips .chip { font-size: 12px; padding: 3px 10px; }
}
.label-short { display: none; }
@media (max-width: 640px) {
  .hero.compact .label-long { display: none; }
  .hero.compact .label-short { display: inline; }
}

/* ---- A cost on a theme card: category first, then what it's for ---- */
.card-costs > li.card-cost { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) auto 80px 90px 28px; }
.card-cost > .row-total { margin-left: 0; text-align: right; }
.card-cost > .box { justify-self: start; }
.card-cost > select.cat { max-width: none; width: 100%; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.card-cost > .inline.name { font-weight: 400; min-width: 0; }
@media (max-width: 640px) {
  /* Category, total and remove; then the description; then the amount. */
  .card-costs > li.card-cost { grid-template-columns: auto auto minmax(0, 1fr) 28px; row-gap: 6px; }
  .card-cost > select.cat { grid-column: 1 / 4; grid-row: 1; }
  .card-cost > .icon-btn { grid-column: 4; grid-row: 1; }
  .card-cost > .inline.name { grid-column: 1 / -1; grid-row: 2; }
  .card-cost > .box { grid-column: 1; grid-row: 3; }
  .card-cost > select:not(.cat) { grid-column: 2; grid-row: 3; }
  .card-cost > .row-total { grid-column: 3 / -1; grid-row: 3; text-align: right; }
}
.add-cost-pick { height: 32px; width: min(100%, 340px); min-width: 0; border-color: var(--line); font-size: 14px; font-weight: 700; color: var(--accent); }
.own-cats { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 13px; }
.own-cats[hidden] { display: none; }
.own-label { color: var(--muted); font-weight: 700; font-size: 12px; margin-right: 2px; }
.own-cat { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 0 2px 0 10px; background: var(--panel); }
.own-name { font: inherit; border: 0; background: none; padding: 4px 0; cursor: pointer; color: var(--ink); }
.own-name:hover { text-decoration: underline; }
.own-cat .icon-btn { width: 24px; height: 24px; }
.own-cat .icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* Budget against actual: a theme's total above its categories. */
.actuals-table tbody.theme-row th, .actuals-table tbody.theme-row td { font-weight: 800; background: var(--wash); font-size: 13px; padding-top: 8px; padding-bottom: 8px; }

/* ---- Public homepage ---------------------------------------------------- */
body.landing { background: var(--panel); }
body.landing .appbar, body.landing #workspace, body.landing #report, body.landing #publishbar, body.landing #sitefoot { display: none !important; }
.home-screen { width: 100%; overflow: hidden; color: var(--text); background: var(--panel); }
.home-screen [hidden] { display: none !important; }
.home-nav { width: min(1240px, calc(100% - 56px)); min-height: 78px; margin: 0 auto; display: flex; align-items: center; gap: 32px; }
.home-brand { display: inline-flex; flex: none; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; line-height: 1.1; text-decoration: none; }
.home-brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.home-brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--scout-purple); color: white; font-weight: 800; letter-spacing: -.06em; }
.home-nav-links, .home-nav-actions { display: flex; align-items: center; gap: 24px; }
.home-nav-links { margin-left: auto; }
.home-nav-links a, .home-nav-link { border: 0; padding: 8px 0; color: var(--black-80); background: transparent; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.home-nav-links a:hover, .home-nav-link:hover { color: var(--accent); }
.home-nav-cta, .home-primary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 8px; padding: 0 19px; background: var(--scout-purple); color: white; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color .16s ease, transform .16s ease; }
.home-nav-cta { min-height: 40px; }
.home-nav-cta:hover, .home-primary:hover { background: #5d0fb4; transform: translateY(-1px); }
.home-screen button:focus-visible, .home-screen a:focus-visible, .faq-list summary:focus-visible { outline: 3px solid #087c80; outline-offset: 3px; }
.home-hero { width: min(1240px, calc(100% - 56px)); min-height: 590px; margin: 0 auto; padding: 46px 0 72px; display: grid; grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr); align-items: center; gap: 44px; }
.home-hero-copy { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 14px; color: var(--scout-teal); font-size: 12px; font-weight: 800; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.home-hero h1 { max-width: 620px; margin: 0; color: var(--ink); font-size: clamp(44px, 5.5vw, 68px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
.home-hero h1 span { color: var(--accent); }
.home-lede { max-width: 520px; margin: 22px 0 25px; color: var(--text); font-size: 18px; line-height: 1.6; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.home-secondary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; padding: 0 4px; background: transparent; color: var(--accent); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.home-secondary:hover { color: var(--tint-ink); text-decoration: underline; text-underline-offset: 3px; }
.home-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.home-shot { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--wash); box-shadow: 0 18px 52px rgba(25, 15, 40, .14); }
.home-shot img { display: block; width: 100%; height: auto; }
.home-shot figcaption { padding: 11px 15px; border-top: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; }
.home-hero-shot { transform: rotate(.25deg); }
.home-section-intro { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.home-section-intro h2, .home-osm h2, .home-final-cta h2 { margin: 0; color: var(--ink); font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.home-section-intro > p:last-child { max-width: 650px; margin: 14px auto 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.home-benefits { padding: 82px max(28px, calc((100% - 1240px) / 2)); background: var(--wash); }
.benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.benefit-card { padding: 22px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.benefit-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 11px; background: var(--tint); color: var(--accent); font-size: 20px; font-weight: 800; }
.benefit-card h3, .home-events h3, .home-features h3 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 800; }
.benefit-card p, .home-events p, .home-features p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.home-walkthrough { padding: 92px max(28px, calc((100% - 1120px) / 2)); }
.walkthrough-list { display: flex; flex-direction: column; gap: 84px; }
.walkthrough-step { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: clamp(36px, 7vw, 88px); }
.walkthrough-step.reverse { grid-template-columns: 1.28fr .72fr; }
.walkthrough-step.reverse .step-copy { grid-column: 2; grid-row: 1; }
.walkthrough-step.reverse .home-shot { grid-column: 1; grid-row: 1; }
.step-copy { max-width: 400px; }
.step-number { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 50%; background: var(--wash); color: var(--accent); font-size: 13px; font-weight: 800; }
.step-copy h3 { margin: 0; color: var(--ink); font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.step-copy p { margin: 14px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.step-copy .retention-note { margin-top: 18px; padding: 12px 14px; border-left: 3px solid var(--scout-teal); border-radius: 0 7px 7px 0; background: var(--teal-wash); color: var(--teal-ink); font-size: 13px; }
.mode-tabs { display: inline-flex; gap: 3px; margin-top: 21px; padding: 4px; border-radius: 9px; background: var(--wash); }
.mode-tabs button { min-height: 38px; border: 0; border-radius: 6px; padding: 0 13px; background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.mode-tabs button[aria-selected="true"] { background: var(--scout-purple); color: white; box-shadow: 0 2px 5px rgba(63, 28, 90, .18); }
.mode-caption { min-height: 48px; }
.walkthrough-cta { margin: 92px auto 0; padding: 34px; border-radius: 16px; background: var(--wash); text-align: center; }
.walkthrough-cta h3 { margin: 0; color: var(--ink); font-size: 26px; font-weight: 800; }
.walkthrough-cta p { margin: 8px 0 20px; color: var(--muted); }
.walkthrough-cta .home-primary { margin: 0 auto; }
.home-features { padding: 80px max(28px, calc((100% - 1240px) / 2)); background: var(--wash); }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.feature-grid article { padding: 22px; border-radius: 12px; background: var(--panel); }
.feature-grid article > span { display: inline-block; margin-bottom: 16px; color: var(--scout-teal); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.home-osm { width: min(1120px, calc(100% - 56px)); margin: 82px auto; padding: clamp(30px, 5vw, 62px); display: grid; grid-template-columns: 1.5fr .75fr; align-items: center; gap: 44px; border-radius: 18px; background: var(--wash); }
.home-osm h2 { max-width: 640px; }
.osm-copy > p:not(.eyebrow):not(.retention-note) { max-width: 650px; color: var(--text); font-size: 16px; line-height: 1.6; }
.osm-copy ul { margin: 18px 0 24px; padding-left: 21px; color: var(--text); line-height: 1.8; }
.osm-copy .home-secondary { padding: 0 8px; }
.osm-copy .retention-note { max-width: 650px; margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.osm-side { padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.74); }
.osm-side-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 10px; background: var(--scout-purple); color: white; font-size: 22px; }
.osm-side h3 { margin: 0; color: var(--ink); font-size: 18px; }
.osm-side p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.home-events { padding: 80px max(28px, calc((100% - 1240px) / 2)); }
.event-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.event-grid article { min-height: 182px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; }
.event-grid article > span { display: block; margin-bottom: 20px; color: var(--scout-teal); font-size: 25px; }
.home-faq { padding: 82px 28px 92px; background: var(--wash); }
.faq-list { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 19px 42px 19px 2px; color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 8px; top: 14px; color: var(--accent); font-size: 24px; font-weight: 400; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details p { max-width: 720px; margin: -3px 30px 19px 2px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.home-final-cta { padding: 82px 28px 86px; background: var(--bar); color: white; text-align: center; }
.home-final-cta .eyebrow { color: #e8d9fb; }
.home-final-cta h2 { color: white; }
.home-final-cta > p:not(.eyebrow) { margin: 14px 0 23px; color: #f2eafa; font-size: 16px; }
.home-final-cta .home-actions { justify-content: center; }
.home-final-cta .home-primary { background: var(--white); color: var(--scout-purple); }
.home-final-cta .home-primary:hover { background: #f1eafa; }
.home-final-cta .home-secondary { color: white; }
.home-footer { width: min(1240px, calc(100% - 56px)); min-height: 72px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; }
.home-footer a { color: var(--accent); font-weight: 700; text-decoration: none; }
@media (max-width: 980px) {
  .home-nav { gap: 18px; }
  .home-nav-links, .home-nav-actions { gap: 14px; }
  .home-hero { grid-template-columns: 1fr 1.05fr; gap: 26px; }
  .benefit-grid, .feature-grid, .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-osm { grid-template-columns: 1fr .7fr; gap: 24px; }
}
@media (max-width: 700px) {
  .home-nav { width: calc(100% - 36px); min-height: 66px; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 12px 0; }
  .home-nav-links { order: 3; width: 100%; justify-content: space-between; gap: 12px; }
  .home-nav-links a { font-size: 12px; }
  .home-nav-actions { margin-left: auto; gap: 12px; }
  .home-nav-actions .home-nav-link { display: inline-flex; font-size: 12px; }
  .home-nav-cta { min-height: 36px; padding: 0 12px; font-size: 12px; }
  .home-hero { width: calc(100% - 36px); min-height: 0; padding: 38px 0 48px; grid-template-columns: 1fr; gap: 32px; }
  .home-hero h1 { font-size: clamp(43px, 11vw, 58px); }
  .home-lede { margin: 18px 0 22px; font-size: 16px; }
  .home-hero-shot { margin-right: -8px; margin-left: 3px; }
  .home-shot { border-radius: 10px; }
  .home-shot figcaption { padding: 9px 11px; }
  .home-benefits, .home-features, .home-events { padding: 58px 18px; }
  .home-section-intro { margin-bottom: 29px; }
  .home-section-intro h2, .home-osm h2, .home-final-cta h2 { font-size: 32px; }
  .home-section-intro > p:last-child { font-size: 15px; }
  .benefit-grid, .feature-grid, .event-grid { grid-template-columns: 1fr; gap: 11px; }
  .benefit-card { padding: 18px; }
  .benefit-icon { margin-bottom: 11px; }
  .home-walkthrough { padding: 60px 18px; }
  .walkthrough-list { gap: 56px; }
  .walkthrough-step, .walkthrough-step.reverse { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .walkthrough-step.reverse .step-copy, .walkthrough-step.reverse .home-shot { grid-column: 1; grid-row: auto; }
  .walkthrough-step.reverse .home-shot { order: 2; }
  .step-copy { max-width: none; }
  .step-copy h3 { font-size: 26px; }
  .step-copy p { font-size: 15px; }
  .walkthrough-cta { margin-top: 58px; padding: 27px 18px; }
  .home-osm { width: calc(100% - 36px); margin: 56px auto; padding: 27px 20px; grid-template-columns: 1fr; gap: 25px; }
  .home-osm .home-actions { align-items: flex-start; flex-direction: column; gap: 5px; }
  .home-osm .home-secondary { min-height: 40px; }
  .home-faq { padding: 60px 18px; }
  .faq-list summary { font-size: 15px; }
  .home-final-cta { padding: 61px 18px; }
  .home-final-cta .home-actions { gap: 7px 14px; }
  .home-footer { width: calc(100% - 36px); min-height: 64px; font-size: 11px; flex-wrap: wrap; padding: 14px 0; }
  .home-footer .theme-switch { order: 3; width: 100%; }
}
@media (max-width: 380px) {
  .home-nav-links { gap: 8px; }
  .home-nav-links a { font-size: 11px; }
  .home-actions { gap: 8px 14px; }
  .home-primary { padding: 0 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-primary, .home-nav-cta { transition: none; }
  html:has(.home-screen) { scroll-behavior: auto; }
}

/* ---- Cash flow: when the money moves, on its own page for editors ---- */
.cashflow-page { display: none; width: 100%; max-width: 940px; margin: 0 auto; padding: 24px 24px 48px; flex-direction: column; gap: 18px; }
body.cashflow-view .workspace, body.cashflow-view .report { display: none; }
body.cashflow-view .cashflow-page { display: flex; }
.cashflow-page .report-facts dd .box input { width: 96px; }
.cf-kpis .kpi-warn { background: var(--red-wash); }
.cf-kpis .kpi-warn .kpi-value { color: var(--red-ink); }
.cf-chart svg { width: 100%; height: auto; display: block; }
.cf-chart text { font: 600 11px var(--font-sans); fill: var(--muted); }
.cf-chart .event-label { fill: var(--accent); }
.cf-chart .low-label { fill: var(--danger); }
.cf-legend { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; }
.cf-legend i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 6px; border-radius: 2px; background: var(--pos); }
.cf-legend i.over { height: 10px; background: var(--red-wash); }
.cf-lines { list-style: none; margin: 0; padding: 0; }
.cf-lines > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cf-lines > li.cf-theme { display: block; border: 0; padding: 14px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cf-what strong { color: var(--ink); }
.cf-what small { display: block; color: var(--muted); }
.cf-total { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.cf-pays { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.cf-pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cf-pay input[type="date"], .cf-pay input.cf-label {
  font: inherit; height: 36px; border: 1px solid var(--field-line); border-radius: 6px; padding: 0 8px; background: var(--panel); color: var(--ink);
}
.cf-pay input.cf-label { width: 160px; }
.cf-pay input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.cf-pay .box input { width: 84px; }
.cf-pay .box input::placeholder { color: var(--black-40); }
.cf-pay-name { min-width: 104px; font-weight: 700; color: var(--ink); }
.cf-pay-amount { min-width: 84px; font-variant-numeric: tabular-nums; color: var(--muted); }
.cf-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 13px; background: var(--wash); border: 1px solid var(--line); color: var(--black-80); align-self: flex-start; }
.cf-chip.undated { background: var(--amber-wash); border-color: var(--line); }
.cf-chip.auto { background: var(--tint); border-color: var(--line); }
.cf-warn { color: var(--danger); font-size: 13px; margin: 0; }
.cf-ledger td.in { color: var(--pos); }
.cf-ledger td.neg { color: var(--danger); }
.cf-ledger td small { display: block; color: var(--muted); }
.cf-ledger tr.month td { background: var(--wash); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); padding-top: 8px; padding-bottom: 8px; }
.cf-ledger tr.starts td { border-top: 2px solid var(--accent); }
.cf-ledger .tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; border-radius: 4px; padding: 0 5px; background: var(--amber-wash); color: var(--amber-ink); }
@media (max-width: 640px) {
  .cashflow-page { padding: 16px 12px 40px; }
  /* The chart shrinks to the screen, so its labels are drawn bigger to stay readable. */
  .cf-chart text { font-size: 24px; }
  .cf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Date, amount and remove on one row; the note under them. */
  .cf-pay { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 8px; }
  .cf-pay input[type="date"] { min-width: 0; width: 100%; }
  .cf-pay input.cf-label { width: 100%; grid-column: 1 / -1; order: 4; }
  .cf-pay .icon-btn { order: 3; }
  .cf-pay-name { min-width: 0; }
  .cf-pay .cf-pay-amount { grid-column: 1 / -1; order: 4; }
  .cf-ledger th:first-child, .cf-ledger td:first-child { white-space: nowrap; }
}

/* ---- Version history: a Time Machine for the budget ----
   Full screen, in deep Scout purple "space". The saved versions stand one
   behind the other, the selected one at the front; a timeline runs down the
   right, newest ("Now") at the bottom. */
.history-btn { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
#delete-btn:has(+ .history-btn:not([hidden])) { margin-right: 0; }
.btn-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tm-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.tm {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  color: var(--white); font: inherit; overflow: hidden;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 28% 72%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 12%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 63% 44%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 82%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1px 1px at 88% 26%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 6% 90%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(ellipse 90% 70% at 40% 105%, #5b17b0 0%, #2f0a63 45%, #14042c 100%);
}
.tm[open] { display: flex; flex-direction: column; animation: tm-in 0.35s ease-out; }
@keyframes tm-in { from { opacity: 0; transform: scale(1.04); } }
.tm::backdrop { background: #14042c; }
.tm-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.tm-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tm-top h2 { color: var(--white); font-size: 19px; }
.tm-sub { font-size: 13px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-banner { margin: 0 20px 8px; padding: 8px 12px; border-radius: var(--radius); background: rgba(255, 145, 42, 0.18); border: 1px solid rgba(255, 145, 42, 0.6); font-size: 13px; }
.tm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) 92px; gap: 0 18px; padding: 0 0 0 20px; }
.tm-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* The cards, receding into the distance. --d is how far back a card is: 0 at
   the front, older ones behind it, newer ones (negative) flown past the viewer. */
.tm-stage { flex: 1; min-height: 0; position: relative; perspective: 1400px; perspective-origin: 50% 0%; outline: none; touch-action: pan-x pan-y; }
.tm-stage:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); border-radius: 12px; }
.tm-deck { position: absolute; inset: 104px 4% 0; transform-style: preserve-3d; }
.tm-card {
  --d: 0;
  position: absolute; left: 0; right: 0; top: 0; bottom: 12px; margin: 0 auto; max-width: 760px;
  display: flex; flex-direction: column; background: var(--panel); color: var(--text); border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  transform: translate3d(0, calc(var(--d) * -20px), calc(var(--d) * -110px));
  opacity: clamp(0, calc(1 - var(--d) * 0.13), 1);
  filter: brightness(calc(1 - var(--d) * 0.06));
  transition: transform 0.5s cubic-bezier(.2, .8, .2, 1), opacity 0.5s, filter 0.5s;
  cursor: pointer;
}
.tm-card.front { cursor: default; }
.tm-card.gone { transform: translate3d(0, 80px, 260px); opacity: 0; pointer-events: none; }
.tm-card-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--wash); border-bottom: 1px solid var(--line); }
.tm-card-head strong { color: var(--ink); }
.tm-card-when { margin-left: auto; font-size: 13px; color: var(--muted); }
.tm-card-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 18px; }
.tm-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--tint); color: var(--accent); }
.tm-tag.now { background: #088486; color: var(--white); }
.tm-mini { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); }
.tm-mini strong { color: var(--ink); }
.tm-mini .neg, .tm-kpi.neg strong, .tm-figs .neg strong { color: var(--neg); }
.tm-loading, .tm-empty { color: var(--muted); }
.tm-empty { color: var(--white); text-align: center; margin-top: 18vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tm-preview h3 { margin: 4px 0 2px; font-size: 20px; color: var(--ink); }
.tm-readonly { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.tm-desc { margin: 0 0 4px; }
.tm-facts { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.tm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.tm-kpi { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-kpi span { font-size: 12px; color: var(--muted); }
.tm-kpi strong { font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tm-kpi.pos strong { color: var(--pos); }
.tm-lines { list-style: none; margin: 0; padding: 0; }
.tm-lines > li { border-bottom: 1px solid var(--line); }
.tm-line-section { padding: 12px 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.tm-line-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: default; }
summary.tm-line-row { cursor: pointer; list-style: none; }
summary.tm-line-row::-webkit-details-marker { display: none; }
summary.tm-line-row::before { content: "›"; display: inline-block; width: 10px; color: var(--muted); transition: transform 0.15s; }
details[open] > summary.tm-line-row::before { transform: rotate(90deg); }
.tm-line-label { flex: 1; min-width: 0; }
.tm-line-total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-line.total .tm-line-row, .tm-line.profit .tm-line-row, .tm-line.income .tm-line-row { font-weight: 700; color: var(--ink); }
.tm-line.changed { background: linear-gradient(90deg, var(--tint), transparent 70%); }
.tm-delta { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.tm-delta.up { background: var(--red-wash); color: var(--red-ink); }
.tm-delta.down { background: var(--green-wash); color: var(--pos); }
.tm-line.income .tm-delta.up, .tm-line.profit .tm-delta.up { background: var(--green-wash); color: var(--pos); }
.tm-line.income .tm-delta.down, .tm-line.profit .tm-delta.down { background: var(--red-wash); color: var(--red-ink); }
.tm-items { list-style: none; margin: 0 0 8px; padding: 0 0 0 20px; font-size: 13px; }
.tm-items li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.tm-items small { display: block; color: var(--muted); }

.tm-nav { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 0 16px; }
.tm-arrow { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); color: var(--white); cursor: pointer; display: grid; place-items: center; }
.tm-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, 0.24); }
.tm-arrow:disabled { opacity: 0.35; cursor: default; }
.tm-arrow:focus-visible, .tm-tick:focus-visible, .tm-more:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.tm-position { min-width: 130px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.tm.single .tm-nav, .tm.single .tm-timeline { display: none; }
.tm.single .tm-body { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); padding-right: 20px; }

/* The details of the selected version. */
.tm-info { min-height: 0; overflow: auto; margin: 12px 0 16px; padding: 16px 18px; border-radius: 14px; background: var(--panel); color: var(--text); align-self: start; max-height: calc(100% - 28px); }
.tm-info-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tm-info-head h3 { margin: 0; font-size: 18px; color: var(--ink); }
.tm-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 14px; }
.tm-meta dt { color: var(--muted); }
.tm-meta dd { margin: 0; }
.tm-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.tm-figs > div { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; background: var(--wash); min-width: 0; }
.tm-figs span { font-size: 12px; color: var(--muted); }
.tm-figs strong { font-variant-numeric: tabular-nums; color: var(--ink); font-size: 14px; }
.tm-figs .pos strong { color: var(--pos); }
.tm-compare { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.tm-compare select { font: inherit; font-weight: 400; font-size: 14px; padding: 6px 8px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--panel); color: var(--text); max-width: 100%; }
.tm-changes h4 { margin: 4px 0 8px; font-size: 15px; color: var(--ink); }
.tm-ai { border: 1px solid var(--line); background: linear-gradient(180deg, var(--wash), var(--panel)); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.tm-ai-label { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.tm-ai-label .tm-icon { width: 16px; height: 16px; }
.tm-ai-text { margin: 0 0 6px; line-height: 1.45; }
.tm-ai-text.plain { margin-bottom: 8px; }
.tm-ai-note { margin: 0; font-size: 12px; color: var(--muted); }
.tm-ai-btn { display: inline-flex; align-items: center; gap: 6px; }
.tm-ai-btn .tm-icon { width: 16px; height: 16px; }
.tm-detail summary { cursor: pointer; font-weight: 700; color: var(--accent); font-size: 14px; padding: 4px 0; }
.tm-diff section { margin-top: 8px; }
.tm-diff h5 { margin: 0 0 4px; font-size: 13px; color: var(--ink); }
.tm-diff ul { list-style: none; margin: 0; padding: 0; }
.tm-change { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 13px; line-height: 1.4; }
.tm-chip { flex: none; width: 18px; height: 18px; border-radius: 999px; display: inline-grid; place-items: center; font-weight: 900; font-size: 13px; line-height: 1; }
.tm-change.added .tm-chip { background: var(--green-wash); color: var(--pos); }
.tm-change.removed .tm-chip { background: var(--red-wash); color: var(--red-ink); }
.tm-change.changed .tm-chip { background: var(--tint); color: var(--accent); }
.tm-overall li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; font-size: 13px; padding: 3px 0; }
.tm-overall strong { font-variant-numeric: tabular-nums; }
.tm-restore-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.tm-restore-note { margin-top: 14px; }
.tm-confirm { width: min(480px, calc(100vw - 32px)); }
.tm-confirm h2 { margin: 0 0 10px; }
.tm-confirm p { margin: 0 0 8px; }
.tm-warn { color: var(--danger); font-weight: 700; }

/* The timeline down the right, like Time Machine's. */
.tm-timeline { min-height: 0; overflow: auto; padding: 12px 10px 16px 0; scrollbar-width: thin; }
.tm-rail { list-style: none; margin: 0; padding: 0; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.tm-tick { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 12px; padding: 1px 0; border: 0; background: none; color: rgba(255, 255, 255, 0.8); font: inherit; font-size: 11px; cursor: pointer; }
.tm-tick-mark { width: 14px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.45); transition: width 0.15s, background 0.15s; order: 2; }
.tm-tick-label { order: 1; white-space: nowrap; }
.tm-tick.labelled .tm-tick-mark { width: 22px; background: rgba(255, 255, 255, 0.75); }
.tm-tick:hover .tm-tick-mark { width: 30px; background: var(--panel); }
.tm-tick.on { color: var(--white); font-weight: 700; }
.tm-tick.on .tm-tick-mark { width: 34px; height: 5px; background: #ffd23f; }
.tm-more { width: 100%; border: 0; background: none; color: var(--white); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px 0; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .tm[open] { animation: none; }
  .tm-card, .tm-tick-mark, summary.tm-line-row::before { transition: none; }
}

/* Phones and narrow windows: the cards on top, the timeline as a strip
   across, and the details under them. */
@media (max-width: 900px) {
  .tm[open] { overflow: auto; }
  .tm-top { padding: 12px 16px; }
  .tm-banner { margin: 0 16px 8px; }
  .tm-body, .tm.single .tm-body { flex: none; display: flex; flex-direction: column; padding: 0 16px; }
  .tm-main { order: 1; flex: none; }
  .tm-stage { flex: none; height: min(62dvh, 560px); }
  .tm-deck { inset: 72px 0 0; }
  .tm-card { transform: translate3d(0, calc(var(--d) * -14px), calc(var(--d) * -80px)); }
  .tm-nav { padding: 8px 0; }
  .tm-timeline { order: 2; overflow-x: auto; overflow-y: hidden; padding: 6px 0 10px; }
  .tm-rail { flex-direction: row; min-height: 0; min-width: 100%; justify-content: flex-end; align-items: flex-end; gap: 2px; }
  .tm-rail li { flex: none; }
  .tm-tick { flex-direction: column-reverse; width: auto; min-width: 14px; min-height: 40px; justify-content: flex-start; padding: 0 3px; }
  .tm-tick-mark { width: 3px; height: 14px; }
  .tm-tick.labelled .tm-tick-mark { width: 3px; height: 22px; }
  .tm-tick:hover .tm-tick-mark { width: 3px; height: 26px; }
  .tm-tick.on .tm-tick-mark { width: 5px; height: 30px; }
  .tm-info { order: 3; max-height: none; margin: 0 0 16px; overflow: visible; }
  .tm-kpis, .tm-figs { grid-template-columns: minmax(0, 1fr); }
  .tm-kpi { flex-direction: row; justify-content: space-between; align-items: baseline; }
}

/* ---- OSM has blocked the app (public/osm-blocked.js) ---- */
/* A red border round the whole screen, over everything, that never gets in the way of a tap. */
html.osm-blocked body::before {
  content: ''; position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  border: 6px solid var(--danger);
}
.osm-blocked-banner {
  background: var(--danger); color: var(--white);
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  font-size: 14px; line-height: 1.4; text-align: center;
}
.osm-blocked-banner a { color: inherit; font-weight: 800; text-decoration: underline; white-space: nowrap; }
.osm-blocked-banner + .appbar { padding-top: 10px; }

/* ---- Admin page (/admin, public/admin.js) ---- */
.admin-page { width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 24px 40px; display: flex; flex-direction: column; gap: 20px; }
.admin-page h1 { font-weight: 900; font-size: 24px; line-height: 1.2; color: var(--ink); margin: 0; }
.admin-page p { margin: 0; }
.admin-state { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: var(--ink); }
.admin-state::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--pos); flex: none; }
.admin-state.blocked::before { background: var(--danger); }
.admin-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.admin-facts dt { color: var(--muted); }
.admin-facts dd { margin: 0; overflow-wrap: anywhere; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.admin-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin-people li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.admin-people li:last-child { border-bottom: 1px solid var(--line); }
.admin-people .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-people .who small { color: var(--muted); }
.admin-grant { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.admin-grant label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; flex: 1 1 240px; min-width: 0; }
.admin-grant select { font: inherit; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); min-width: 0; }
.admin-note { color: var(--muted); font-size: 13px; }
@media (max-width: 600px) { .admin-page { padding: 16px 16px 32px; } }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }

/* ---- Group summary (My budgets): a Scout Group's budgets in total, by section ---- */
.budgets-nav-grouprow { display: flex; align-items: flex-end; gap: 4px; }
.budgets-nav-grouprow .budgets-nav-group { flex: 1; min-width: 0; }
.budgets-nav-summary {
  font: inherit; font-size: 12px; font-weight: 700; flex: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; margin-bottom: 2px;
  background: var(--panel); color: var(--accent);
}
.budgets-nav-summary:hover { background: var(--tint); color: var(--tint-ink); }
.budgets-nav-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.group-dialog { width: min(760px, calc(100vw - 32px)); }
.group-dialog .panel-head { display: flex; align-items: center; gap: 12px; }
.group-dialog .panel-head h2 { flex: 1; min-width: 0; margin: 0; }
.group-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0; }
.group-kpis .kpi-value, .group-kpis .kpi-note { cursor: default; }
.group-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 12px; }
.group-row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center;
  padding: 10px 12px; font-variant-numeric: tabular-nums;
}
.group-head { font-size: 12px; font-weight: 800; color: var(--muted); background: var(--wash); }
.group-section { border-top: 1px solid var(--line); }
.group-section > summary { cursor: pointer; list-style: none; }
.group-section > summary::-webkit-details-marker { display: none; }
.group-section > summary:hover { background: var(--wash); }
.group-section > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.group-name { font-weight: 700; display: flex; align-items: center; gap: 6px; min-width: 0; }
.group-name::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-right: 2px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform 0.15s;
}
.group-section[open] .group-name::before { transform: rotate(45deg); }
.group-name .hint { font-weight: 400; white-space: nowrap; }
.group-total { border-top: 2px solid var(--line); font-weight: 800; background: var(--wash); }
.group-row .num, .group-budgets .num { text-align: right; white-space: nowrap; }
.group-dialog .over { color: var(--neg); font-weight: 700; }
.group-dialog .under { color: var(--pos); font-weight: 700; }
.group-dialog .muted { color: var(--muted); }
.group-budgets { list-style: none; margin: 0; padding: 0 0 6px; background: var(--wash); }
.group-budgets li {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center;
  padding: 8px 12px 8px 26px; font-size: 14px; font-variant-numeric: tabular-nums;
}
.group-budget-name { display: flex; flex-direction: column; min-width: 0; }
.group-budget-name .link-btn { text-align: left; padding: 0; overflow: hidden; text-overflow: ellipsis; }
.group-budget-name .hint { font-size: 12px; }
.group-none { margin: 0; padding: 8px 12px 10px 26px; background: var(--wash); }
@media (max-width: 640px) {
  .group-kpis { grid-template-columns: minmax(0, 1fr); }
  .group-kpis .kpi { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
  .group-kpis .kpi-label { flex: 1; }
  /* Name across the top, then the three figures underneath. */
  .group-row, .group-budgets li { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2px; }
  .group-row > :first-child, .group-budgets li > :first-child { grid-column: 1 / -1; }
  .group-head > :first-child { display: none; }
  .group-budgets li { padding-left: 18px; }
}
.osm-updated { margin: 0 4px 8px; }

/* Which groups a per-person cost applies to, on its own line under the row */
.cost-who { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13px; }
.cost-who label { display: inline-flex; gap: 5px; align-items: center; }

/* ---- Pegasus ESU footer: the same on every Pegasus ESU tool ----
   The logo, "Built for Pegasus ESU" (to the tools hub), the tool's privacy policy and the Appearance switch.
   Purple logo on light grounds, White in dark (the PNGs can't follow the theme, so both are in the page). */
.pegasus-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; color: var(--muted); font-size: 12px; }
.pegasus-foot .pegasus-foot-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; text-decoration: none; }
.pegasus-foot-brand img { display: block; height: 28px; width: auto; }
.pegasus-foot-brand:hover span { color: var(--accent); }
.pegasus-foot-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.pegasus-foot a:hover { text-decoration: underline; }
.pegasus-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.pegasus-foot .logo-dark, [data-theme="dark"] .pegasus-foot .logo-light { display: none; }
[data-theme="dark"] .pegasus-foot .logo-dark { display: block; }
.pegasus-foot .theme-switch { display: flex; align-items: center; gap: 10px; margin: 0 0 0 auto; padding: 0; border: 0; }
.pegasus-foot .theme-switch legend { float: none; width: auto; margin: 0; padding: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.pegasus-foot .theme-options { clear: none; }
.pegasus-foot .sitefoot-version { display: flex; flex-wrap: wrap; gap: 4px 16px; width: 100%; color: var(--muted); }
.pegasus-foot .sitefoot-version:empty { display: none; }
body > .pegasus-foot:not(.sitefoot) { width: 100%; max-width: 940px; margin: 0 auto; padding: 18px 24px calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .pegasus-foot .theme-switch { margin-left: 0; width: 100%; }
  body > .pegasus-foot:not(.sitefoot) { padding-left: 16px; padding-right: 16px; }
}

/* ---- Privacy policy page ---- */
body.legal { min-height: 100vh; display: flex; flex-direction: column; background: var(--ground); }
.legal-page { width: 100%; max-width: 940px; margin: 0 auto; padding: 24px 24px 40px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.legal-page h1 { font-weight: 900; font-size: 32px; line-height: 1.15; color: var(--accent); margin: 0; }
.legal-page .panel { padding: 20px 24px; gap: 0; }
.legal-page h2 { font-weight: 900; font-size: 18px; color: var(--ink); margin: 0 0 10px; }
.legal-page h3 { font-weight: 800; font-size: 15px; color: var(--ink); margin: 16px 0 6px; }
.legal-page p, .legal-page li { font-size: 15px; line-height: 1.55; color: var(--text); }
.legal-page p { margin: 0 0 10px; }
.legal-page ul { margin: 0 0 10px; padding-left: 20px; }
.legal-page li + li { margin-top: 6px; }
.legal-page a { color: var(--accent); font-weight: 700; }
.legal-page b { color: var(--ink); }
.legal-lede { font-size: 17px !important; max-width: 70ch; }
.legal-updated, .legal-note { color: var(--muted) !important; font-size: 13px !important; }
@media (max-width: 640px) {
  .legal-page { padding: 16px 16px 32px; }
  .legal-page .panel { padding: 16px; }
  .legal-page h1 { font-size: 26px; }
}