/* Both families are self-hosted: a webfont request to a third party would send
   every visitor's IP address there before they ever agreed to anything. The
   files are the Google Fonts latin subsets, SIL Open Font License 1.1 — see
   static/fonts/README.md. `swap` keeps the text readable while they load. */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4 var";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-serif-4-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4 var";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-serif-4-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-text: "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Source Serif 4 var", ui-serif, Georgia, "Times New Roman", serif;
  --ink: #202820;
  --forest: #163b31;
  --forest-deep: #102c25;
  /* #3f6e58 reaches at least 4.5:1 on all light section backgrounds. */
  --sage: #3f6e58;
  --mint: #deece3;
  --cream: #f7f5ef;
  --sand: #ede8dc;
  --paper: #fffefb;
  --line: #ddd9cf;
  /* #59635b reaches at least 5.1:1 on every light section background. */
  --muted: #59635b;
  --red: #a64d48;
  --amber: #9b6a25;
  --blue: #4a7185;
  --shadow: 0 22px 60px rgba(25, 42, 34, .10);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 11px;
  /* D06: named scales make component decisions comparable. The public site
     keeps its existing values; the operator area scopes the compact variant. */
  --type-meta: .75rem;
  --type-label: .8125rem;
  --type-body: .9375rem;
  --type-control: 1rem;
  --type-subheading: 1.125rem;
  --type-section-heading: 1.375rem;
  --type-stat: 1.75rem;
  --type-page-heading: clamp(2rem, 3vw, 2.5rem);
  /* D07: the floor. Below roughly 10px a value stops being a font size and
     becomes texture -- badges, map captions and sidebar sublabels all sit on
     this step instead of inventing their own 8-to-10px value. */
  --type-micro: .6875rem;
  /* Guest pages use two display sizes, not four near-identical clamp()
     expressions: the start-page hero and every other guest heading. */
  --type-display-hero: clamp(3.3rem, 6vw, 5.3rem);
  --type-display-page: clamp(2.2rem, 5vw, 3.5rem);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-pill: 999px;
  --surface-admin: #f3f1eb;
  --surface-subtle: #f7f6f1;
  --surface-raised: #fbfaf6;
  --line-soft: #eeebe3;
  --status-requested-bg: #f4ead0;
  --status-requested-ink: #8b6222;
  --status-confirmed-bg: #dcece2;
  --status-confirmed-ink: #347153;
  --status-declined-bg: #f1dfdc;
  --status-declined-ink: #934a43;
  --status-blocked-bg: #dce8ee;
  --status-blocked-ink: #3c6678;
  --status-no-show-bg: #efe1ef;
  --status-no-show-ink: #7c4076;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  /* Inter's default figures are proportional; tabular ones keep prices and
     dates from jittering as they update. */
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; }

button { cursor: pointer; }

.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;
  color: var(--sage);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}

.eyebrow::before { display: none; }

h1, h2, h3, p { margin-top: 0; }

/* The tracking used to be -.055em, a value borrowed from a display grotesk. On
   a serif at reading sizes it closes the counters and turns "Verfügbarkeit"
   into a grey block, so headings now sit close to their natural fit. */
h1, h2, h3 { color: var(--ink); font-family: var(--font-display); line-height: 1.12; letter-spacing: -.015em; }

h1 { font-size: var(--type-display-page); font-weight: 600; line-height: 1.06; }
h2 { font-size: clamp(1.9rem, 3.7vw, 3.2rem); font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.008em; }

.lead { max-width: 630px; color: var(--muted); font-size: 1.1rem; }

.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--forest); font-weight: 600; }
.text-link::after { content: "→"; transition: transform .2s ease; }
.text-link:hover::after { transform: translateX(4px); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--forest);
  color: #fff;
  font-weight: 600;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.button:hover { background: var(--forest-deep); box-shadow: 0 10px 25px rgba(16, 44, 37, .18); transform: translateY(-1px); }
.button-secondary { min-height: 40px; padding: 8px 14px; border-color: #b7c8bb; background: #fff; color: var(--forest); font-size: .84rem; }
.button-secondary:hover { background: var(--mint); color: var(--forest-deep); box-shadow: none; transform: none; }

.public-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid rgba(221, 217, 207, .75);
  background: rgba(247, 245, 239, .91);
  backdrop-filter: blur(15px);
}

.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; }

.public-nav { display: flex; align-items: center; gap: 24px; color: #505a52; font-size: .88rem; font-weight: 500; }
.public-nav a:hover { color: var(--forest); }

.flash-stack { position: fixed; z-index: 50; top: 93px; left: 50%; width: min(560px, calc(100% - 32px)); transform: translateX(-50%); }
.flash { margin-bottom: 9px; padding: 13px 18px; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: var(--shadow); font-size: .92rem; }
.flash--error { background: var(--red); }
.flash--success { background: var(--forest); }
/* "The booking went through, but the guest has not heard about it" is neither
   an error nor a plain success -- it is something the operator still has to do. */
.flash--warning { background: var(--amber); }

.hero { position: relative; min-height: min(700px, calc(100vh - 78px)); overflow: hidden; color: #fff; background: var(--forest-deep); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 37, 30, .90) 0%, rgba(13, 37, 30, .64) 41%, rgba(13, 37, 30, .12) 82%), linear-gradient(0deg, rgba(13, 37, 30, .35), transparent 52%); }
.hero h1 { max-width: 680px; margin-bottom: 24px; color: #fff; }
.hero h1 em { color: #b9e2c9; font-style: normal; }
.hero .eyebrow { color: #c4e7d0; }

.section { padding: 110px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 47px; }
.section-heading h2 { max-width: 650px; margin-bottom: 0; }
.section-heading p { max-width: 390px; margin-bottom: 2px; color: var(--muted); }
.price { color: var(--forest); font-size: .92rem; font-weight: 600; }

.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 54px 58px; border-radius: var(--radius-lg); background: var(--forest); color: #fff; }
.cta-panel h2 { max-width: 620px; margin-bottom: 0; color: #fff; }
.cta-panel h2 em { color: #b9e2c9; font-style: normal; }

.public-footer { padding: 42px 0; border-top: 1px solid var(--line); background: var(--cream); }
.public-footer p { margin: 0; color: var(--muted); font-size: .81rem; }

.booking-page { padding: 90px 0 108px; background: linear-gradient(180deg, var(--paper) 0, var(--cream) 72%); }
.booking-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(290px, .65fr); gap: 25px; align-items: start; }
.booking-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 12px 33px rgba(24, 49, 38, .045); }
.booking-card { padding: 37px; }
.booking-card h2 { margin-bottom: 8px; font-size: 1.7rem; }
.booking-card > p { margin-bottom: 28px; color: var(--muted); }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { color: #465249; font-size: .82rem; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 98px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(95,146,122,.15); }
.form-note { margin: 18px 0 0; color: var(--muted); font-size: .8rem; }
.availability-result { display: none; width: 100%; padding: 14px 16px; border-radius: 11px; background: var(--mint); color: var(--forest); font-size: .88rem; font-weight: 500; }
.availability-result.is-visible { display: block; }
.availability-result.is-unavailable { background: #f5e4e0; color: #7d3d38; }
.availability-result a { text-decoration: underline; }

/* `.received` used to live here with a fourth h1 clamp of its own. The
   confirmation page renders `.received-page`/`.received-card`, so the block
   never matched anything -- it only made the guest headings look inconsistent
   in the audit. The page now uses the shared `--type-display-page`. */

/* Operator area */
.admin-body { min-height: 100vh; background: #f3f1eb; }
.admin-shell { display: grid; grid-template-columns: 257px minmax(0, 1fr); min-height: 100vh; }
.admin-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; min-height: 0; padding: 27px 18px 20px; overflow-y: auto; background: var(--forest-deep); color: rgba(255,255,255,.76); }
.admin-nav { display: grid; gap: 5px; }
.admin-nav-group { display: grid; gap: 4px; }
.admin-nav-group + .admin-nav-group { margin-top: 11px; }
.admin-nav-group > p { margin: 0 10px 3px; color: rgba(255,255,255,.48); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.admin-nav a.admin-nav-primary { margin-top: 16px; border: 1px solid rgba(185,226,200,.36); background: rgba(185,226,200,.15); color: #fff; }
.admin-nav a { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 9px; font-size: .89rem; font-weight: 500; }
.admin-nav a:hover, .admin-nav a.is-active { background: rgba(210,240,220,.12); color: #fff; }

.admin-main { min-width: 0; padding: 43px 48px 62px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 38px; }

.panel { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; }
.booking-table { width: 100%; border-collapse: collapse; font-size: .86rem; white-space: nowrap; }
.booking-table th { padding: 13px 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.booking-table td { padding: 16px 20px; border-bottom: 1px solid #eeebe3; vertical-align: middle; }
.booking-table tr:last-child td { border-bottom: 0; }
.empty-state { padding: 42px 26px; color: var(--muted); text-align: center; }
.status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.status--requested { background: #f4ead0; color: #8b6222; }
.status--confirmed { background: #dcece2; color: #347153; }
.status--declined, .status--cancelled { background: #f1dfdc; color: #934a43; }
.status--blocked { background: #dce8ee; color: #3c6678; }

.admin-form { max-width: 850px; padding: 32px; }
.admin-form .form-grid { gap: 18px 20px; }

.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.calendar-toolbar h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.45rem); }
.calendar { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--paper); }
.calendar-day { min-height: 125px; padding: 8px; border-right: 1px solid #e9e6dd; border-bottom: 1px solid #e9e6dd; background: var(--paper); }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day:nth-last-child(-n+7) { border-bottom: 0; }
.calendar-day.is-outside { background: #f9f8f4; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 18px; color: var(--muted); font-size: .76rem; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calendar-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--mint); }
.calendar-legend i.requested { background: #f5ebd1; }
.calendar-legend i.blocked { background: #dce8ee; }

/* The two columns belong to .login-layout, not to <body>. The grid used to sit
   on <body>, whose only child is this wrapper -- so the second column stayed
   empty, both sections were pressed into the first, and because .login-layout
   itself had no rule at all they sat flush against the window edge. */
.login-body { min-height: 100vh; background: var(--paper); }
.login-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr); }
.login-brand { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); padding: var(--space-8) var(--space-7); background: var(--cream); }
.login-brand > div > p:not(.pill) { max-width: 34ch; margin: 0; color: var(--muted); }
.pill-login { border: 1px solid var(--line); background: var(--paper); color: var(--sage); }
.login-public-link { color: var(--sage); font-size: var(--type-label); font-weight: 700; }
.login-panel { display: grid; place-items: center; padding: var(--space-8) var(--space-7); }
.login-card { width: min(390px, 100%); }
/* Heading and lead sit next to the form inside the card, not inside it -- the
   old .login-form h2 / .login-form > p never matched anything. */
.login-card h2 { margin-bottom: var(--space-3); font-size: 2.25rem; }
.login-card > p { margin-bottom: var(--space-6); color: var(--muted); }
.login-form { display: grid; gap: var(--space-4); }
.login-form .button { margin-top: var(--space-2); }

/* Template building blocks used by the guest demo. */
.site-container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.nav-wrap { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 24px; }
.brand-mark { display: grid; width: 35px; height: 35px; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--forest); color: #c5e5cf; font-size: 1.15rem; }
.brand > span:last-child { display: grid; line-height: 1.1; }
.brand > span:last-child strong { font-size: .93rem; letter-spacing: -.025em; }
.brand > span:last-child small { margin-top: 3px; color: var(--muted); font-size: var(--type-micro); }
.button-dark { background: var(--forest); color: #fff; }
.button-cream { background: #fff; color: var(--forest); }
.button-cream:hover { background: var(--mint); }
.pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 11px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .045em; }
.pill span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-light { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.09); color: rgba(255,255,255,.9); }
.section-kicker { margin: 0 0 15px; color: var(--sage); font-size: .82rem; font-weight: 600; letter-spacing: -.01em; text-transform: none; }
.section-kicker-light { color: #c3e5ce; }

.hero-camping { position: relative; min-height: min(580px, calc(100vh - 78px)); overflow: hidden; background: var(--forest-deep); color: #fff; }
.hero-camping > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,37,29,.90) 0%, rgba(12,37,29,.65) 42%, rgba(12,37,29,.1) 84%), linear-gradient(0deg, rgba(12,37,29,.31), transparent 54%); }
.hero-content { position: relative; z-index: 1; padding: 74px 0; }
.hero-content h1 { margin: 19px 0 16px; color: #fff; font-size: var(--type-display-hero); }
.hero-content h1 em { color: #b9e2c8; font-style: normal; }
.hero-copy { max-width: 480px; margin-bottom: 0; color: rgba(255,255,255,.82); font-size: .98rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 27px; }
.text-link-light { color: #fff; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 35px; color: rgba(255,255,255,.78); font-size: .76rem; font-weight: 600; }

.section-intro { padding: 72px 0; background: var(--paper); }
.split-intro { display: grid; grid-template-columns: .7fr 1.45fr 1fr; gap: 38px; align-items: start; }
.split-intro h2 { margin: 0; }
.lead-copy { margin: 5px 0 0; color: var(--muted); font-size: .94rem; }
.section-sand { background: var(--sand); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.section-heading .section-kicker { margin-bottom: 11px; }
.site-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 40px; }
.site-card { display: grid; grid-template-columns: 175px 1fr; min-height: 270px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); transition: transform .25s ease, box-shadow .25s ease; }
.site-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.site-card-art { display: grid; place-items: center; min-height: 100%; color: rgba(255,255,255,.87); font-size: 3rem; }
.site-card-art.has-photo { overflow: hidden; }
.site-card-art.has-photo img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.site-card-art.art-1 { background: linear-gradient(145deg, #8dbca3 0%, #dcebdc 52%, #54836c 53%, #244c40 100%); }
.site-card-art.art-2 { background: radial-gradient(circle at 35% 25%, #fff4bc 0 12%, transparent 13%), linear-gradient(145deg, #d7e7b7 0%, #f2e7bf 48%, #8ca46a 49%, #355842 100%); }
.email-design-form > label small { color: var(--muted); font-size: .74rem; font-weight: 400; line-height: 1.4; }
.email-design-preview { position: sticky; top: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: #efede6; }
.email-design-preview-head { margin: 0 0 13px; }
.email-design-preview-head h2 { margin: 0 0 3px; font-size: 1.08rem; }
.email-design-preview-head p { margin: 0; color: var(--muted); font-size: .78rem; }
.email-html-preview { overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #f4f2ec; }
.email-html-preview > html { display: block; min-width: 520px; }
.email-html-preview > html body { min-width: 520px; }
.email-design-preview .email-html-preview { max-height: min(72vh, 760px); }
.email-preview-actions .button { width: 100%; justify-content: center; }
.email-preview-actions .row-action { margin-top: 10px; }
.email-preview-actions .muted { margin: 10px 0 0; font-size: .78rem; }

/* B09 follow-up: the admin is a work surface, not a stack of presentation
   cards. These final rules deliberately win over the earlier demo styling. */
.admin-main { padding: 26px 34px 42px; }
.admin-page-head { margin-bottom: 22px; }
.admin-page-head > div > p:not(.admin-eyebrow) { margin-top: 5px; font-size: .84rem; }
.stat-grid { gap: 10px; margin-bottom: 22px; }
.stat-grid > article { padding: 14px 17px; }
.stat-grid strong { margin-top: 3px; font-size: 1.55rem; }
.stat-grid small { margin-top: 2px; }
.today-grid { gap: 10px; margin: 0 0 26px; }
.today-grid article { padding: 15px 18px; }
.today-grid h2 { font-size: 1.4rem; }
.setup-path { gap: 14px; margin: 0 0 22px; padding: 13px 17px; }
.setup-path h2 { font-size: 1rem; }
.setup-path ol { gap: 5px; }
.setup-path li { min-height: 32px; padding: 5px 7px; font-size: .7rem; }
.setup-path li > span { width: 17px; height: 17px; }
.admin-section-head { margin-bottom: 11px; }
.admin-form-card { border-radius: 13px; }
.admin-form { padding: 24px; }
.admin-form-section + .admin-form-section { margin-top: 22px; padding-top: 20px; }
.admin-form-section h2 { margin-bottom: 13px; font-size: 1.04rem; }
.arrival-list { margin-bottom: 22px; }
.arrival-row { padding: 13px 17px; }
.day-nav { gap: 10px; }
.day-nav .text-link::after, .today-grid .text-link::after { content: none; }

.email-editor-layout {
  grid-template-columns: minmax(0, .96fr) minmax(430px, 1.04fr);
  grid-template-areas: "primary preview" "review review";
  gap: 14px;
}
.email-editor-layout > .admin-form-card { padding: 22px 24px; }
.email-editor-primary > label { display: grid; gap: 5px; margin-bottom: 13px; }
.email-editor-primary > label input, .email-editor-primary > label textarea { width: 100%; }
.email-editor-primary > label textarea { min-height: 78px; resize: vertical; }
.email-editor-primary > label small { margin: 0; }
.email-editor-intro { margin: 0 0 15px; font-size: .79rem; }
.extra-position { gap: 7px 13px; margin-top: 1px; font-size: .75rem; }
.email-editor-actions { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.email-editor-actions .muted { font-size: .75rem; }
.email-preview-first { top: 14px; }
.email-preview .form-section-heading { margin-bottom: 12px; }
.email-preview-body { max-height: min(58vh, 510px); padding: 13px 15px; font-size: .78rem; line-height: 1.48; }
.email-review { grid-template-columns: minmax(0, 1fr) minmax(240px, .48fr); gap: 14px; }
.email-review .admin-form-card { padding: 15px 18px; }
.email-preview-actions .form-section-heading { margin-bottom: 8px; }
.email-preview-actions .button { width: auto; min-height: 36px; }

/* The preview used to be sticky while the lower work area scrolled beneath
   it. That looks like overlapping cards, so it stays in its normal grid row. */
.email-preview-first { position: static; }
.email-review { grid-template-columns: minmax(0, 300px); justify-content: start; }

/* Plain `1fr` keeps its min-content width and pushed the content half of the
   public site card past its clipped border. Let this column actually shrink. */
.site-card { grid-template-columns: 175px minmax(0, 1fr); }
.site-card-content { min-width: 0; }
.site-card h3, .site-card-content > p, .site-card-footer { overflow-wrap: anywhere; }

/* A helper follows its field with normal flow spacing. Negative margins made
   it overlap a preceding checkbox and the explanatory copy below textareas. */
.detail-helper { margin: 8px 0 19px; }
.business-settings-form label { gap: 8px; }
.business-settings-form label small { position: static; }

/* The remove action owns a grid cell instead of sitting on top of a long
   element name. This works at every viewport, not just on the phone layout. */
.pitch-editor-row-head { grid-column: 1; padding-right: 0; }
.pitch-editor-fields, .pitch-editor-actions { grid-column: 1 / -1; }
.pitch-delete-button { position: static; grid-column: 2; grid-row: 1; align-self: start; justify-self: end; }

/* D05 — readable operator work, reliable touch targets, and one cache state.
   These deliberate final overrides also cover older component passes above. */
input::placeholder, textarea::placeholder { color: #59635b; opacity: 1; }
.section-kicker-light { color: #c3e5ce; }
.site-card-art { color: var(--forest); }
.site-map-legend { color: #294f3a; font-size: .75rem; }

/* A delete action must be both visible and comfortably tappable. */
.pitch-delete-button { width: var(--control-height); height: var(--control-height); color: #9f3535; }

/* Controls deliberately share the 44px rhythm. Checkboxes and radios keep
   their familiar appearance but live inside a 44px label target. */
.admin-body :is(input:not([type="hidden"]), select, textarea, button) { min-height: var(--control-height); font-size: 16px; }
.admin-body :is(input[type="checkbox"], input[type="radio"]) { width: 22px; height: 22px; min-height: 22px; }
.admin-body :is(.checkbox-field, .pitch-active-field, .seasonal-active-field, .extra-position label) { min-height: var(--control-height); }
.admin-body :is(.admin-nav a, .sidebar-bottom a, .logout-button, .text-action, .row-action, .filter-reset, .calendar-view-switch a, .calendar-toolbar > a, .calendar-toolbar-actions > a, .calendar-print-button, .admin-form-actions a, .admin-page-head .text-link) { display: inline-flex; align-items: center; min-height: var(--control-height); }
.calendar-toolbar > a, .calendar-toolbar-actions > a:not(.calendar-today) { width: var(--control-height); height: var(--control-height); }
.calendar-toolbar-actions .calendar-today { height: var(--control-height); }
.email-preview-actions .button, .status-actions .row-action { min-height: var(--control-height); }

/* Individual operator forms are constrained to a readable line length; the
   page measure itself is set in the responsive section at the end. */
.admin-form-card:has(.admin-form), .business-settings-form { max-width: min(75ch, 100%); }
.business-settings-form textarea, .admin-form textarea { max-width: 75ch; }

/* D06 -- operator design contract ------------------------------------------------
   The admin inherits a deliberately compact version of the global system. New
   operator components must use these tokens; old component declarations are
   overridden here until D07 can remove their now-dead source rules safely. */
.admin-body {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --admin-page-padding: var(--space-6);
  --admin-card-padding: var(--space-5);
  --admin-row-padding: var(--space-3) var(--space-4);
  background: var(--surface-admin);
  color: var(--ink);
  font-size: var(--type-body);
  line-height: 1.5;
}

/* Type: meta information, labels, reading text, controls and the three
   heading levels are the only sizes the workplace uses. */
.admin-body :is(input:not([type="hidden"]), select, textarea, button) {
  font-size: var(--type-control);
}
.admin-body :is(.admin-nav-group > p, .admin-eyebrow, .booking-table-head,
  .calendar-weekdays span, .year-calendar-weekdays span, .status,
  .stat-grid small, .stat-grid span, .setup-path li, .email-preview-subject span,
  .email-flow-state, .booking-price-breakdown > strong,
  .booking-price-history > strong) { font-size: var(--type-meta); }
.admin-body :is(.admin-form label, .calendar-filters label, .booking-list-date-filter label,
  .seasonal-rule-row label, .seasonal-rate-create label, .assigned-pitch-form label,
  .field-config-text small, .email-editor-primary > label small,
  .email-editor-advanced label small, .email-logo-field small,
  .email-design-form > label small, .email-theme-option small,
  .booking-event-list span, .detail-status-actions .operator-message-field) {
  font-size: var(--type-label);
}
.admin-body :is(.admin-page-head > div > p:not(.admin-eyebrow), .muted,
  .admin-form label small, .field-config-note, .email-editor-intro,
  .email-flow-row p, .email-flow-help p, .booking-alert-card p,
  .booking-extension-card p, .seasonal-rate-summary p, .today-grid article > p,
  .booking-list-todo small, .detail-helper) { font-size: var(--type-body); }
.admin-body :is(.admin-section-head h2, .admin-form-section h2, .calendar-toolbar h2,
  .email-design-entry h2, .email-design-preview-head h2, .setup-path h2,
  .today-grid h2, .seasonal-rate-create h2, .booking-alert-card h2,
  .booking-extension-card h2) { font-size: var(--type-section-heading); }
.admin-body :is(.admin-page-head h1) { font-size: var(--type-page-heading); }
.admin-body :is(.stat-grid strong) { font-size: var(--type-stat); }

/* Radius: normal controls, cards and pills each have exactly one role. */
.admin-body :is(.row-action, .calendar-filters select, .assigned-pitch-form select,
  .seasonal-rule-row input:not([type="checkbox"]), .seasonal-rate-create input:not([type="checkbox"]),
  .field-config-choice, .field-config-missing, .preview-stale-note,
  .email-flow-row, .email-flow-help, .email-theme-option, .email-logo-preview,
  .email-html-preview, .booking-row-link, .setup-path li) { border-radius: var(--radius-sm); }
.admin-body :is(.admin-form-card, .calendar-card, .admin-booking-table, .arrival-list,
  .setup-path, .booking-decision-card, .booking-alert-card, .booking-extension-card,
  .email-design-preview, .year-calendar-month, .seasonal-rate-summary > div,
  .seasonal-rate-summary > p, .seasonal-rule-row) { border-radius: var(--radius-md); }
.admin-body :is(.status, .calendar-toolbar > a, .calendar-toolbar-actions > a:not(.calendar-today),
  .setup-path li > span) { border-radius: var(--radius-pill); }

/* Shared surfaces and semantic status colours. Colour decisions live beside
   their names above instead of being re-invented in each component. */
.admin-body :is(.admin-form-card, .calendar-card, .admin-booking-table, .arrival-list,
  .stat-grid > article, .today-grid article, .site-type-admin-card,
  .seasonal-rule-row, .email-flow-row, .email-design-entry, .booking-decision-card,
  .booking-extension-card) { background: var(--paper); border-color: var(--line); }
.admin-body :is(.calendar-weekdays) { background: var(--surface-subtle); }
.admin-body :is(.year-calendar-month, .today-grid article) { background: var(--surface-raised); }
.admin-body :is(.admin-booking-row, .arrival-row, .booking-event-list li,
  .booking-table td, .calendar-day) { border-color: var(--line-soft); }
.admin-body :is(.status-requested, .status--requested) {
  background: var(--status-requested-bg); color: var(--status-requested-ink);
}
.admin-body :is(.status-confirmed, .status--confirmed) {
  background: var(--status-confirmed-bg); color: var(--status-confirmed-ink);
}
.admin-body :is(.status-declined, .status-cancelled, .status--declined, .status--cancelled) {
  background: var(--status-declined-bg); color: var(--status-declined-ink);
}
.admin-body :is(.status-blocked, .status--blocked) {
  background: var(--status-blocked-bg); color: var(--status-blocked-ink);
}
.admin-body :is(.status-no_show, .status--no_show) {
  background: var(--status-no-show-bg); color: var(--status-no-show-ink);
}

/* Spacing: components use the same eight-step rhythm, including the compact
   filters and high-density lists that make up most operator work. */
.admin-main { padding: var(--space-5) var(--admin-page-padding) var(--space-6); }
.admin-page-head { gap: var(--space-5); margin-bottom: var(--space-5); }
.admin-section-head { gap: var(--space-5); margin-bottom: var(--space-3); }
.admin-form { padding: var(--admin-card-padding); }
.admin-form-section + .admin-form-section { margin-top: var(--space-5); padding-top: var(--space-5); }
.admin-form-actions, .detail-head-actions, .day-nav,
.site-type-card-actions, .admin-head-actions, .calendar-toolbar-actions,
.detail-status-actions, .arrival-actions, .status-actions { gap: var(--space-2); }
.stat-grid, .today-grid, .site-type-grid, .email-editor-layout, .email-design-layout { gap: var(--space-3); }
.stat-grid { margin-bottom: var(--space-5); }
.today-grid { margin: 0 0 var(--space-5); }
.setup-path { gap: var(--space-3); margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); }
.setup-path ol, .field-config-list, .booking-event-list, .email-flow-list { gap: var(--space-2); }
.setup-path li { gap: var(--space-2); padding: var(--space-2); }
.admin-booking-row, .arrival-row { gap: var(--space-3); padding: var(--admin-row-padding); }
.booking-table-head { padding: var(--space-3) var(--space-4); }
.calendar-card { padding: var(--admin-card-padding); }
.calendar-filters { gap: var(--space-2); margin-bottom: var(--space-5); padding-bottom: var(--space-4); }
.calendar-filters label, .booking-list-date-filter label, .assigned-pitch-form label,
.seasonal-rule-row label, .seasonal-rate-create label { gap: var(--space-2); }
.calendar-day { padding: var(--space-2); }
.seasonal-rule-row { gap: var(--space-2); padding: var(--space-3); }
.email-editor-layout > .admin-form-card, .email-design-form { padding: var(--admin-card-padding); }
.email-flow-row { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.email-flow-help { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); }

/* Recovery 2026-08-05 -------------------------------------------------------
   A truncated write had removed the component layer between the public-card
   rules and the responsive overrides. Keep this layer here so it wins over the
   old compatibility rules above and makes the visual system explicit. Since
   D07-3 it no longer competes with the breakpoints: those all live in the
   responsive layer at the end of the file. */
:root { --control-height: 44px; }

/* Public site: cards stay warm and expressive; an information card is not a
   bare column of text. */
.site-card-content { display: flex; min-width: 0; flex-direction: column; padding: 27px 28px 24px; }
.site-card-meta { margin: 0 0 12px; color: var(--sage); font-size: .78rem; font-weight: 700; }
.site-card-content h3 { margin: 0 0 11px; font-size: 1.42rem; }
.site-card-content > p:not(.site-card-meta) { margin-bottom: 20px; color: var(--muted); font-size: .9rem; }
.site-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; color: var(--muted); font-size: .78rem; }
.site-card-cta { color: var(--forest); font-weight: 700; white-space: nowrap; }
.site-card-cta span { margin-left: 4px; }
.site-card:hover .site-card-cta span { display: inline-block; transform: translateX(3px); transition: transform .2s ease; }
.section-map { background: var(--paper); }
.map-section-layout { display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr); align-items: center; gap: 62px; }
.map-section-layout h2 { margin-bottom: 20px; }
.map-section-layout .lead-copy { margin-bottom: 28px; }
.camping-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.camping-gallery figure { position: relative; min-height: 290px; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--forest); }
.camping-gallery img { width: 100%; height: 100%; object-fit: cover; }
.camping-gallery figcaption { position: absolute; right: 14px; bottom: 14px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.88); color: var(--forest); font-size: .74rem; font-weight: 700; }
.section-arrival { background: var(--sand); }
.arrival-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.arrival-grid article { min-height: 185px; padding: 24px; border: 1px solid rgba(22,59,49,.12); border-radius: var(--radius-md); background: var(--paper); }
.arrival-grid article > span { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 26px; border-radius: 50%; background: var(--mint); color: var(--forest); }
.arrival-grid h3 { margin-bottom: 7px; }
.arrival-grid p { margin: 0; color: var(--muted); font-size: .86rem; }
.faq-layout { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); gap: 70px; }
.faq-list { display: grid; gap: 9px; }
.faq-list details { padding: 0 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.faq-list summary { padding: 18px 0; color: var(--forest); cursor: pointer; font-weight: 700; }
.faq-list p { margin: 0 0 18px; color: var(--muted); font-size: .9rem; }
.section-green { padding: 74px 0; background: var(--cream); }
.footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 42px; }
.footer-grid p, .footer-bottom { color: var(--muted); font-size: .8rem; }
.footer-bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); }
.public-contact-link { color: var(--muted); font-size: .78rem; font-weight: 600; }
.public-header-actions { display: flex; align-items: center; gap: 16px; }

/* Lageplan: a fixed, accented canvas with the objects positioned in percent. */
.site-map-frame { min-width: 0; }
.site-map { position: relative; min-width: 620px; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid #bdcabf; border-radius: var(--radius-lg); background: linear-gradient(145deg, #dfe5c9 0%, #adc79b 48%, #7fa078 49%, #bdd4be 100%); box-shadow: 0 18px 45px rgba(22,59,49,.12); }
.site-map.has-background { background: center / cover no-repeat var(--map-background); }
.site-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 10px solid rgba(255,255,255,.26); border-radius: inherit; }
.site-map-lake { position: absolute; top: -26%; right: -8%; width: 61%; height: 74%; border-radius: 45%; background: #93c6ce; transform: rotate(-17deg); }
.site-map-lake span { position: absolute; right: 23%; bottom: 18%; color: rgba(22,59,49,.72); font-size: .74rem; font-weight: 700; transform: rotate(17deg); }
.site-map-shore, .site-map-road { position: absolute; z-index: 1; color: rgba(22,59,49,.7); font-size: .68rem; font-weight: 700; }
.site-map-shore { top: 17%; right: 8%; }
.site-map-road { bottom: 10%; left: 8%; padding: 7px 13px; border-radius: 999px; background: #dbd3b5; }
.site-map-trees { position: absolute; z-index: 1; color: #477153; font-size: 1.8rem; letter-spacing: 3px; }
.trees-north { top: 10%; left: 11%; }.trees-south { right: 12%; bottom: 17%; }
.site-map-reception, .site-map-building { position: absolute; z-index: 3; left: var(--pitch-x, 76%); top: var(--pitch-y, 72%); display: grid; place-items: center; min-width: 74px; min-height: 48px; padding: 6px 9px; border: 2px solid #315d48; border-radius: 8px; background: #f2e7c6; color: #264a39; font-size: .67rem; font-weight: 800; line-height: 1.15; text-align: center; transform: translate(-50%, -50%); }
.site-map-reception { left: 77%; top: 72%; }
.site-map-building i { font-size: 1.05rem; font-style: normal; }.site-map-building b { font-size: .64rem; }
.site-map-pitch, .site-map-area { position: absolute; z-index: 4; left: var(--pitch-x); top: var(--pitch-y); display: grid; min-width: 54px; min-height: 38px; place-items: center; padding: 5px 7px; border: 2px solid currentColor; border-radius: 8px; background: #eff6ea; color: #285d44; transform: translate(-50%, -50%); }
.site-map-area { min-width: 76px; min-height: 46px; border-radius: 13px 7px 13px 7px; background: #e7d5a7; color: #795c23; }
.site-map-pitch b, .site-map-area b { font-size: .72rem; }.site-map-pitch small, .site-map-area small { display: block; max-width: 80px; overflow: hidden; font-size: var(--type-micro); text-overflow: ellipsis; white-space: nowrap; }
.site-map .size-small { transform: translate(-50%, -50%) scale(.82); }.site-map .size-large { transform: translate(-50%, -50%) scale(1.2); }
.site-map .color-sand { background: #f0e1b6; color: #806126; }.site-map .color-water { background: #d7e9ee; color: #326b7c; }.site-map .color-plum { background: #ecdeea; color: #714c70; }
.site-map .is-inactive { opacity: .42; filter: grayscale(.7); }.site-map-choice { font: inherit; cursor: pointer; }.site-map-choice:hover, .site-map-choice[aria-pressed="true"], .site-map-editor-item.is-selected { outline: 4px solid rgba(255,255,255,.86); box-shadow: 0 0 0 7px rgba(22,59,49,.7); }
.site-map-editor-item { cursor: grab; touch-action: none; }.site-map-editor-item.is-dragging { z-index: 8; cursor: grabbing; }
.site-map-legend { position: absolute; z-index: 5; right: 12px; bottom: 11px; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.78); }
.site-map-scroll-hint { display: none; color: var(--muted); font-size: .76rem; }

/* Booking forms and all operator forms share proper field rhythm. */
.booking-layout-single { display: block; max-width: 880px; }
.booking-card-request { padding: 42px; }
.booking-card-head > p, .admin-eyebrow { margin-bottom: 7px; color: var(--sage); font-size: .76rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.booking-card-head h1 { margin-bottom: 26px; font-size: var(--type-display-page); }
.booking-form-section { padding: 25px 0; }.booking-form-section + .booking-form-section { border-top: 1px solid var(--line); }
.form-section-heading h2 { margin-bottom: 17px; font-size: 1.3rem; }
.form-row { display: grid; gap: 16px; }.form-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.booking-form label, .admin-form label, .login-form label, .booking-list-filters label, .pitch-editor-fields label, .pitch-create-form label, .seasonal-rate-create label { display: grid; gap: 7px; color: #3a4d40; font-size: .8rem; font-weight: 700; }
.booking-form input, .booking-form select, .booking-form textarea, .admin-form input, .admin-form select, .admin-form textarea, .login-form input, .booking-list-filters input, .booking-list-filters select, .pitch-editor-fields input, .pitch-editor-fields select, .pitch-create-form input, .pitch-create-form select { width: 100%; min-height: var(--control-height); padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #fff; color: var(--ink); font-weight: 500; }
.booking-form :is(input, select, textarea):focus, .admin-form :is(input, select, textarea):focus, .login-form input:focus, .booking-list-filters :is(input, select):focus, .pitch-editor-fields :is(input, select):focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(63,110,88,.16); }
.price-estimate { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: var(--mint); color: var(--forest); }.price-estimate span { font-size: .78rem; font-weight: 700; }.price-estimate strong { font-size: .9rem; }
.availability-panel { margin-top: 12px; padding: 13px 15px; border-radius: 10px; background: #f5e4e0; color: #7d3d38; }
.pitch-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.site-map-key { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; color: var(--muted); font-size: .72rem; }.site-map-key i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 50%; background: #55916d; }.site-map-key .key-taken { background: #ad625d; }.site-map-key .key-selected { background: #316c94; }
.pitch-selection-status { margin: 12px 0 0; color: var(--muted); font-size: .8rem; }
.button-full { width: 100%; }.button-small { min-height: 40px; padding: 8px 14px; font-size: .84rem; }

/* Admin: quiet canvas, visibly grouped work areas and restrained green accents. */
.admin-page-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }.admin-page-head h1 { margin-bottom: 5px; }.admin-page-head > div > p:not(.admin-eyebrow) { max-width: 720px; margin-bottom: 0; color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }.stat-grid article { position: relative; display: grid; gap: 2px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }.stat-grid article::before { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--sage); content: ""; }.stat-grid article:nth-child(2)::before { background: var(--blue); }.stat-grid article:nth-child(3)::before { background: #6e8d57; }.stat-grid article:nth-child(4)::before { background: var(--amber); }.stat-grid span, .stat-grid small { color: var(--muted); }.stat-grid strong { color: var(--forest); }
.setup-path { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr); align-items: center; border: 1px solid #cddccf; border-radius: var(--radius-md); background: linear-gradient(105deg, #e2eee4, #f8f8f2); }.setup-path p { margin-bottom: 0; color: var(--muted); font-size: .82rem; }.setup-path ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; }.setup-path li { display: flex; align-items: center; min-width: 0; border: 1px solid rgba(22,59,49,.11); background: rgba(255,255,255,.7); }.setup-path li > span { display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--sage); font-size: .65rem; font-weight: 800; }.setup-path li.is-done > span { background: #5e8f68; }.setup-path li a { overflow: hidden; color: var(--forest); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.today-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }.today-grid article { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); }.today-grid article > a { display: block; padding: 5px 0; color: var(--forest); font-size: .8rem; font-weight: 650; }.today-grid article > p { color: var(--muted); }.today-grid h2 { margin-bottom: 8px; color: var(--forest); }
.admin-section-head { display: flex; align-items: end; justify-content: space-between; }.admin-section-head h2 { margin-bottom: 0; }
.admin-booking-table, .arrival-list { overflow: hidden; border: 1px solid var(--line); background: var(--paper); }.booking-table-head, .admin-booking-row { display: grid; grid-template-columns: minmax(230px, 1.35fr) minmax(130px, .8fr) minmax(180px, 1fr) minmax(180px, .9fr); }.booking-table-head { color: var(--muted); background: var(--surface-subtle); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.admin-booking-row { position: relative; min-height: 94px; border-top: 1px solid var(--line-soft); }.admin-booking-row::before { width: 4px; background: #7b9b65; content: ""; }.booking-row--urgent::before { background: var(--red); }.booking-row--soon::before { background: var(--amber); }.admin-booking-row > :not(.booking-row-link) { align-self: center; min-width: 0; }.booking-row-link { position: absolute; inset: 0; z-index: 1; }.guest-cell, .status-cell, .place-cell, .status-actions { position: relative; z-index: 2; }.guest-cell strong, .guest-cell small, .status-cell small { display: block; }.guest-cell strong { margin-bottom: 4px; color: var(--forest); }.guest-cell small, .task-detail { color: var(--muted); font-size: .76rem; }.place-cell { color: #44574a; font-size: .84rem; }.task-label { display: block; color: var(--forest); font-size: .82rem; font-weight: 800; }.status { display: inline-flex; align-items: center; min-height: 24px; margin-top: 6px; padding: 3px 8px; border-radius: var(--radius-pill); font-size: .67rem; font-weight: 800; text-transform: uppercase; }.status-actions { display: flex; flex-wrap: wrap; align-items: center; }.row-action, .text-action, .filter-reset, .calendar-print-button { padding: 8px 11px; border: 1px solid #c8d5ca; border-radius: 8px; background: #fff; color: var(--forest); font-size: .78rem; font-weight: 700; }.row-action:hover, .text-action:hover, .filter-reset:hover { background: var(--mint); }.mail-failed-marker { color: var(--red) !important; font-weight: 800; }
.empty-state { max-width: 620px; margin: 55px auto; padding: 42px; border: 1px dashed #b9c8bb; border-radius: var(--radius-md); background: var(--paper); }.empty-state span { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 16px; border-radius: 50%; background: var(--mint); color: var(--forest); }.empty-state h2 { margin-bottom: 8px; }.empty-state p { color: var(--muted); }
.arrival-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--line-soft); }.arrival-row:first-child { border-top: 0; }.arrival-actions { display: flex; flex-wrap: wrap; justify-content: end; }.waiting-note { color: var(--amber) !important; font-weight: 700; }
.site-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.site-type-admin-card { display: grid; gap: 24px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md); }.site-type-admin-card h2 { margin: 14px 0 7px; font-size: 1.45rem; }.site-type-admin-card p { margin: 0; color: var(--muted); }.site-type-admin-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }.site-type-admin-card dl div { padding: 10px; border-radius: 9px; background: var(--surface-subtle); }.site-type-admin-card dt { color: var(--muted); font-size: .69rem; }.site-type-admin-card dd { margin: 3px 0 0; color: var(--forest); font-size: .84rem; font-weight: 800; }.site-type-card-actions { display: flex; gap: 18px; font-size: .82rem; }
.admin-form-card, .calendar-card, .pitch-editor-intro, .map-background-card, .pitch-editor-selection, .pitch-editor-row, .pitch-create-card, .booking-list-controls { border: 1px solid var(--line); background: var(--paper); }.admin-form-card, .calendar-card, .pitch-editor-intro, .map-background-card, .pitch-editor-selection, .pitch-editor-row, .pitch-create-card { border-radius: var(--radius-md); }.admin-form-section + .admin-form-section { border-top: 1px solid var(--line); }.admin-form label small { color: var(--muted); font-size: .76rem; font-weight: 500; }.admin-form textarea { min-height: 105px; resize: vertical; }.admin-form-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }.checkbox-field, .pitch-active-field, .seasonal-active-field { display: flex !important; align-items: center; gap: 9px; }.checkbox-field input, .pitch-active-field input, .seasonal-active-field input { width: auto !important; }

/* Dense control areas still need their own box and horizontal hierarchy. */
.booking-list-controls { margin-bottom: 26px; padding: 20px; border-radius: var(--radius-md); }
.booking-list-filter-fields { display: grid; grid-template-columns: minmax(220px, 1.55fr) repeat(4, minmax(130px, 1fr)); gap: 13px; }
.booking-list-date-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 13px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.booking-list-date-filter label { min-width: 130px; }.booking-list-date-hint { align-self: center; color: var(--muted); font-size: .76rem; }
.booking-list-filter-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.booking-list-head { margin-top: 5px; }.booking-list-range { margin: 4px 0 0; color: var(--muted); font-size: .8rem; }.booking-list-todo { display: grid; justify-items: end; gap: 4px; }.booking-list-todo small { color: var(--muted); font-size: .72rem; }
.booking-pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; color: var(--muted); font-size: .8rem; }.booking-pagination div { display: flex; gap: 9px; }

/* The map editor has three distinct stages: explain, choose, then edit. */
.pitch-editor-intro, .map-background-card, .pitch-editor-selection, .pitch-create-card { margin-bottom: 17px; padding: 23px; }
.pitch-editor-intro { display: flex; align-items: end; justify-content: space-between; gap: 25px; background: linear-gradient(105deg, #e6f0e5, var(--paper)); }.pitch-editor-intro h2, .map-background-card h2, .pitch-editor-selection h2, .pitch-create-card h2 { margin-bottom: 7px; font-size: 1.25rem; }.pitch-editor-intro p, .map-background-card p, .pitch-editor-selection p { margin-bottom: 0; color: var(--muted); font-size: .84rem; }
.pitch-editor-legend { display: flex; flex-wrap: wrap; justify-content: end; gap: 10px; color: var(--muted); font-size: .73rem; }.pitch-editor-legend span { display: inline-flex; align-items: center; gap: 5px; }.pitch-editor-legend i { width: 9px; height: 9px; border-radius: 3px; background: #3f6e58; }.pitch-editor-legend .is-area { background: #a17a2d; }.pitch-editor-legend .is-building { background: #326b7c; }.pitch-editor-legend .is-inactive { background: #aaa; }
.pitch-editor-map-wrap { margin-bottom: 17px; }.pitch-editor-map-wrap .site-map { width: 100%; min-width: 0; }
.map-background-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr); gap: 18px; }.upload-requirement { margin-top: 12px !important; padding: 11px; border-left: 3px solid var(--sage); background: var(--surface-subtle); font-size: .76rem !important; }.upload-requirement span { display: block; margin-top: 5px; }.map-background-form { display: grid; align-content: end; gap: 10px; }.map-background-form label { display: grid; gap: 7px; color: #3a4d40; font-size: .8rem; font-weight: 700; }.map-background-remove { grid-column: 2; }
.pitch-editor-selection { display: grid; grid-template-columns: minmax(200px, .55fr) minmax(0, 1.45fr); align-items: center; gap: 24px; }.pitch-choice-list { display: flex; flex-wrap: wrap; gap: 8px; }.pitch-choice { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 7px; min-width: 145px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-subtle); color: var(--forest); text-align: left; }.pitch-choice:hover, .pitch-choice.is-selected { border-color: var(--sage); background: var(--mint); box-shadow: 0 0 0 2px rgba(63,110,88,.11); }.pitch-choice small { grid-column: 2; color: var(--muted); font-size: .68rem; }.pitch-kind-badge { display: inline-flex; width: max-content; padding: 3px 6px; border-radius: 999px; background: #dcece2; color: #347153; font-size: var(--type-micro); font-weight: 800; }.pitch-kind-badge.is-area { background: #f1e3bc; color: #806126; }.pitch-kind-badge.is-sanitary, .pitch-kind-badge.is-reception { background: #dce8ee; color: #3c6678; }
.pitch-editor-list { display: grid; gap: 13px; margin-bottom: 18px; }.pitch-editor-row { position: relative; display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr) auto; gap: 17px; padding: 21px; }.pitch-editor-row-head { display: grid; align-content: start; justify-items: start; gap: 7px; }.pitch-editor-row-head strong { color: var(--forest); }.pitch-editor-row-head small { color: var(--muted); }.pitch-editor-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.pitch-position-field > span { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.pitch-editor-actions { display: grid; align-content: end; gap: 8px; }.pitch-delete-button { padding: 0; border: 1px solid #d9b7b4; border-radius: 8px; background: #fff7f6; }.pitch-create-card { display: grid; grid-template-columns: minmax(210px, .6fr) minmax(0, 1.4fr); align-items: end; gap: 22px; }.pitch-create-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.pitch-create-form .pitch-active-field { align-self: end; }.pitch-create-form .button { align-self: end; }

/* Calendar and E-mail areas retain the same cards and coloured state cues. */
.calendar-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.calendar-filters label { display: grid; gap: 7px; color: #3a4d40; font-size: .78rem; font-weight: 700; }.calendar-filters select { min-width: 165px; padding: 9px 11px; border: 1px solid var(--line); background: #fff; }.calendar-view-switch { display: flex; width: max-content; max-width: 100%; margin: 18px 0; overflow: auto; padding: 4px; border-radius: 999px; background: var(--surface-subtle); }.calendar-view-switch a { padding: 7px 12px; border-radius: 999px; color: var(--muted); font-size: .76rem; font-weight: 700; white-space: nowrap; }.calendar-view-switch a.is-active { background: var(--forest); color: #fff; }.calendar-toolbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }.calendar-toolbar > a, .calendar-toolbar-actions > a, .calendar-print-button { display: grid; place-items: center; }.calendar-toolbar h2 { margin: 0; color: var(--forest); }.calendar-toolbar small { color: var(--muted); }.calendar-toolbar-actions { display: flex; align-items: center; }.calendar-grid, .calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }.calendar-weekdays { margin-top: 20px; }.calendar-weekdays span { padding: 8px; color: var(--muted); font-weight: 800; text-align: center; }.calendar-day { position: relative; min-height: 125px; }.calendar-day-today { background: #f1f6ed; }.calendar-day > strong { color: var(--forest); }.calendar-events { display: grid; gap: 4px; margin-top: 6px; }.calendar-event { overflow: hidden; padding: 3px 5px; border-radius: 5px; background: #dcece2; color: #347153; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }.calendar-event.event-requested { background: #f4ead0; color: #8b6222; }.calendar-event.event-blocked { background: #dce8ee; color: #3c6678; }.calendar-more-link, .calendar-day-count { color: var(--sage); font-size: .67rem; font-weight: 800; }.calendar-day-count { display: none; }.daily-booking-list { display: grid; gap: 9px; margin-top: 20px; }.daily-booking-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-subtle); }.daily-booking-card strong, .daily-booking-card span { display: block; }.daily-booking-card span { color: var(--muted); font-size: .76rem; }.year-calendar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 20px; }.year-calendar-month { padding: 12px; border: 1px solid var(--line); }.year-calendar-month h3 { margin-bottom: 10px; font-size: 1rem; }.year-calendar-weekdays, .year-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }.year-calendar-weekdays span, .year-calendar-day { display: grid; min-height: 24px; place-items: center; font-size: .66rem; }.year-calendar-weekdays span { color: var(--muted); }.year-calendar-day.is-booked { border-radius: 4px; background: var(--mint); color: var(--forest); font-weight: 800; }
.email-flow-list { display: grid; gap: 10px; }.email-flow-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); background: var(--paper); color: var(--forest); }.email-flow-row:hover { border-color: #acc4b1; background: #fbfcf8; }.email-flow-row strong { display: block; }.email-flow-row p { margin: 3px 0 0; color: var(--muted); }.email-flow-meta { display: grid; justify-items: end; gap: 6px; }.occasion-badge, .email-flow-state { padding: 4px 7px; border-radius: 999px; background: var(--mint); color: var(--forest); font-size: .65rem; font-weight: 800; }.occasion-badge-operator { background: #e6e4f1; color: #5e527a; }.email-flow-state { background: var(--surface-subtle); color: var(--muted); }.email-flow-help { border: 1px solid #d3dfd5; background: #f5f8f2; }.email-flow-help h2 { margin-bottom: 6px; font-size: 1.05rem; }.email-flow-help p { color: var(--muted); }.planned-list { display: grid; gap: 7px; padding: 0; margin: 14px 0 0; list-style: none; }.planned-list li { display: flex; justify-content: space-between; gap: 20px; }.planned-list span { color: var(--muted); font-size: .8rem; }

/* The accent is painted independently of the row grid; it must not consume a
   data column. */
.admin-booking-row::before { position: absolute; top: 0; bottom: 0; left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.booking-row-link:focus-visible { outline: 3px solid var(--sage); outline-offset: -3px; }
.remember-login { display: flex !important; align-items: flex-start; gap: 10px; color: var(--forest); font-size: .84rem; font-weight: 700; }
.remember-login input { min-height: 20px !important; width: 20px; margin: 1px 0 0; }
.remember-login small { display: block; margin-top: 2px; color: var(--muted); font-size: .75rem; font-weight: 500; }

/* Final admin polish: each page uses the same compact work-surface language. */
.brand-admin { margin: 4px 0 26px; padding: 5px 7px; }
.brand-admin .brand-mark { width: 32px; height: 32px; background: rgba(185,226,200,.13); color: #c5e5cf; }
.brand-admin > span:last-child small { color: rgba(255,255,255,.58); }
.sidebar-bottom { display: grid; gap: 7px; margin-top: auto; padding: 18px 7px 0; border-top: 1px solid rgba(255,255,255,.14); }
.sidebar-bottom > a { color: rgba(255,255,255,.68); font-size: .77rem; font-weight: 600; }
.sidebar-bottom form { margin: 0; }.logout-button { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.27); border-radius: 8px; background: transparent; color: rgba(255,255,255,.87); font-size: .78rem; font-weight: 700; text-align: left; }.logout-button:hover { border-color: rgba(255,255,255,.54); background: rgba(255,255,255,.09); color: #fff; }

/* Configuration pages: a short introduction followed by unmistakeable rows. */
.field-config { max-width: 920px; padding: 0; }
.field-config-note { margin: 0 0 15px; padding: 13px 16px; border-left: 3px solid var(--sage); border-radius: 0 9px 9px 0; background: #eaf2e9; color: #405548; }
.field-config-list { display: grid; gap: 9px; }
.field-config-row { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(330px, 1.1fr); align-items: center; gap: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.field-config-text strong { display: block; color: var(--forest); font-size: .91rem; }.field-config-text small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.42; }
.field-config-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 5px; border: 1px solid #dfe5de; background: var(--surface-subtle); }
.field-config-option { display: inline-flex !important; align-items: center; gap: 6px; min-height: 34px !important; padding: 6px 8px; border-radius: 6px; color: #48604f; font-size: .76rem !important; font-weight: 700; }.field-config-option:has(input:checked) { background: var(--mint); color: var(--forest); }.field-config-option input { width: 17px; height: 17px; min-height: 17px !important; margin: 0; }

/* “Mein Betrieb” begins with a compact readiness callout, not a giant display heading. */
.setup-card { max-width: 920px; margin-bottom: 14px; padding: 20px 23px; border-left: 4px solid var(--sage); }
.setup-card-warning { border-left-color: var(--amber); background: #fffdf7; }.setup-card-ready { border-left-color: var(--sage); background: #f5faf5; }
.setup-card h2 { margin: 0 0 7px; color: var(--forest); font-family: var(--font-text); font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }.setup-card p { margin-bottom: 8px; color: var(--muted); font-size: .84rem; }.setup-card ul { margin: 6px 0 10px; padding-left: 18px; color: #46594c; font-size: .84rem; }.setup-card .muted { margin-bottom: 0; }
.email-design-entry { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 920px; margin-bottom: 14px; padding: 18px 23px; border-left: 4px solid var(--blue); }.email-design-entry h2 { margin: 0 0 4px; font-size: 1.08rem; }.email-design-entry p:not(.admin-eyebrow) { margin: 0; color: var(--muted); font-size: .82rem; }.business-settings-form { max-width: 920px; }
.website-settings-form { max-width: 1060px; }.website-settings-form h2 { margin: 0 0 12px; font-size: 1.14rem; }.website-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.website-image-slot { display: grid; align-content: start; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-subtle); }.website-image-slot > small { color: var(--muted); font-size: .72rem; }.website-image-slot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 7px; }.website-image-slot:first-child img { aspect-ratio: 16 / 9; }.website-image-slot label { font-size: .75rem !important; }.website-image-slot input[type="file"] { padding: 7px; font-size: .72rem; }.repeatable-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 11px; }.repeatable-heading h2 { margin-bottom: 4px; }.repeatable-heading p { margin: 0; color: var(--muted); font-size: .78rem; }.repeatable-list { display: grid; gap: 9px; }.repeatable-row { display: grid; grid-template-columns: 70px minmax(130px, .65fr) minmax(190px, 1.35fr) auto; align-items: end; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-subtle); }.repeatable-row-faq { grid-template-columns: minmax(180px, .65fr) minmax(240px, 1.35fr) auto; }.repeatable-row label { display: grid; gap: 5px; color: #3d5344; font-size: .73rem; font-weight: 800; }.repeatable-row input, .repeatable-row textarea { width: 100%; min-height: 38px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font: inherit; }.repeatable-row textarea { min-height: 62px; resize: vertical; }.repeatable-actions { display: flex; flex-wrap: wrap; gap: 5px; }.repeatable-actions .row-action { min-height: 34px !important; padding: 5px 8px; font-size: .71rem; }

/* Source report: it is a real table again, with a readable emphasis on the rate. */
.report-year-form label { display: grid; gap: 6px; color: var(--muted); font-size: .75rem; font-weight: 800; }.report-year-form select { min-height: 40px; min-width: 112px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--forest); font-weight: 700; }
.report-table { overflow: hidden; margin-bottom: 25px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }.report-table-head, .report-table-row { display: grid; grid-template-columns: minmax(150px, 1.35fr) repeat(2, minmax(100px, .8fr)) minmax(105px, .75fr) repeat(2, minmax(120px, .9fr)); align-items: center; }.report-table-head { padding: 12px 17px; background: var(--surface-subtle); color: var(--muted); font-size: .69rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }.report-table-row { min-height: 51px; padding: 8px 17px; border-top: 1px solid var(--line-soft); color: #42554a; font-size: .84rem; }.report-table-row > span:first-child { color: var(--forest); font-weight: 800; }.report-table-row strong { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: var(--status-requested-bg); color: var(--status-requested-ink); font-size: .75rem; }
.booking-detail-card-wide { max-width: none; padding: 23px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }.booking-detail-card-wide h2 { margin-bottom: 11px; font-size: 1.16rem; }.booking-detail-card-wide .detail-helper { max-width: none; }

/* The plan itself remains the editor. Its data rows sit below it and open only on demand. */
.pitch-editor-list { display: grid; gap: 9px; }.pitch-editor-item { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }.pitch-editor-item > summary { display: grid; grid-template-columns: auto minmax(150px, 1fr) minmax(130px, .8fr) auto; align-items: center; gap: 11px; min-height: 56px; padding: 11px 17px; cursor: pointer; list-style: none; }.pitch-editor-item > summary::-webkit-details-marker { display: none; }.pitch-editor-item > summary:hover { background: var(--surface-subtle); }.pitch-editor-item[open] > summary { border-bottom: 1px solid var(--line); background: #eef5ed; }.pitch-editor-item > summary strong { color: var(--forest); }.pitch-editor-item > summary small { color: var(--muted); }.pitch-editor-open { padding: 6px 9px; border: 1px solid #c7d8ca; border-radius: 7px; color: var(--forest); font-size: .73rem; font-weight: 800; }.pitch-editor-item[open] .pitch-editor-open { background: var(--forest); color: #fff; }
.pitch-editor-row { border: 0; border-radius: 0; }.pitch-editor-row-head { display: none; }

/* Arrival check-in is a positive state, so it receives a calm green signal instead of a blue card. */
.stat-grid .arrival-stat-arrived::before { background: #5e8f68; }.arrival-stat-arrived { background: #f4f9f3; border-color: #c7dcc9 !important; }.arrival-stat-arrived strong { color: #2f6b47; }.arrival-list > .muted { margin: 0; padding: 16px 18px; color: var(--muted); font-size: .84rem; }

/* Worklist actions: decisions belong in one compact, scannable action group.
   A confirmation is the only filled control; reversible or risky actions stay
   quiet. On normal desktop width both possible actions sit side by side. */
.status-actions .row-action { min-height: 36px !important; padding: 6px 9px; font-size: .73rem; line-height: 1.2; white-space: normal; }
.status-actions .row-action-primary { border-color: var(--forest); background: var(--forest); color: #fff; }.status-actions .row-action-primary:hover { background: var(--forest-deep); }
.status-actions .row-action-quiet { background: #fff; color: #506257; }.status-actions .row-action-quiet:hover { border-color: #9eb6a3; background: var(--mint); color: var(--forest); }
.status-actions .muted { padding: 6px 0; color: var(--muted); font-size: .78rem; }

/* Keyboard focus is visible without adding visual noise for mouse users. */
.admin-body :is(a, button, input, select, textarea):focus-visible { outline: 3px solid #79a98a; outline-offset: 2px; }

/* Controls around the booking list support quick scanning; none of them needs
   the large guest-facing call-to-action treatment. */
.booking-list-controls .button, .booking-list-todo .button, .admin-page-head > .button { min-height: 38px !important; padding: 7px 13px; font-size: .8rem; }
.booking-list-controls .filter-reset { min-height: 38px !important; padding: 7px 11px; font-size: .75rem; }
.booking-list-controls :is(input, select) { min-height: 40px; padding: 8px 10px; font-size: .88rem; }
.booking-list-filter-actions { margin-top: 13px; }.booking-list-todo { gap: 2px; }.booking-list-todo small { font-size: .69rem; }

/* E-mail editor: composing and reading are two different jobs. The preview is
   therefore a calm counterpart on the right instead of another form section. */
.email-editor-layout { display: grid; grid-template-columns: minmax(0, .93fr) minmax(390px, 1.07fr); grid-template-areas: "primary preview" "advanced review"; align-items: start; gap: 16px; max-width: 1180px; }
.email-editor-primary { grid-area: primary; }.email-preview { grid-area: preview; }.email-editor-advanced { grid-area: advanced; }.email-review { grid-area: review; }
.email-editor-layout > .admin-form-card { padding: 22px 24px; }
.email-editor-primary > label, .email-editor-advanced label { display: grid; gap: 6px; margin-bottom: 14px; color: #3d5344; font-size: .79rem; font-weight: 800; }
.email-editor-primary :is(input, textarea), .email-editor-advanced :is(input:not([type="checkbox"]), textarea) { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; outline: none; background: #fff; color: var(--ink); font-size: .88rem; font-weight: 500; }
.email-editor-primary textarea, .email-editor-advanced textarea { min-height: 104px; resize: vertical; }.email-editor-primary :is(input, textarea):focus, .email-editor-advanced :is(input, textarea):focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(63,110,88,.15); }
.email-editor-primary > label small, .email-editor-advanced label small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.email-editor-primary .form-section-heading { margin-bottom: 15px; }.email-editor-primary h2, .email-preview h2 { margin-bottom: 5px; font-size: 1.14rem; }.email-editor-intro { margin: 0; color: var(--muted); font-size: .8rem; }
.legacy-extra { margin: 4px 0 17px; padding: 12px 14px; border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; background: #fffaf0; color: #4e5047; font-size: .78rem; }.legacy-extra p { margin: 4px 0 0; color: var(--muted); }
.extra-position { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 11px; margin: 2px 0 0; padding: 10px 0 2px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .73rem; }.extra-position > span { margin-right: 3px; font-weight: 700; }.extra-position label { display: inline-flex !important; align-items: center; gap: 5px; min-height: 30px !important; margin: 0; padding: 4px 6px; border-radius: 6px; color: #506257; font-size: .73rem !important; font-weight: 700; }.extra-position label:has(input:checked) { background: var(--mint); color: var(--forest); }.extra-position input { width: 16px; height: 16px; min-height: 16px !important; margin: 0; }
.email-editor-actions { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }.email-editor-actions .button { min-height: 36px !important; padding: 6px 11px; font-size: .76rem; }
.email-preview { position: sticky; top: 16px; border-color: #c8d9cb; background: linear-gradient(145deg, #edf5ed, #f7f8f3); }.email-preview .form-section-heading { margin-bottom: 13px; }.email-preview .form-section-heading p { margin: 0; color: var(--muted); font-size: .75rem; }.email-preview-subject { display: grid; gap: 3px; margin: 0 0 9px; padding: 10px 12px; border: 1px solid #d4e0d5; border-radius: 8px; background: #fff; }.email-preview-subject span { color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.email-preview-subject strong { color: var(--forest); font-size: .84rem; }.email-preview-body { max-height: min(56vh, 520px); margin: 0; overflow: auto; padding: 14px 15px; border: 1px solid #d4e0d5; border-radius: 8px; background: #fff; color: #35463b; font-family: var(--font-text); font-size: .77rem; line-height: 1.52; white-space: pre-wrap; }.preview-stale-note { margin: 0 0 10px; padding: 8px 10px; border-radius: 7px; background: #f8e8dd; color: #8a4f37; font-size: .74rem; font-weight: 700; }
.email-editor-advanced { padding: 0 !important; overflow: hidden; }.email-editor-advanced details > summary { padding: 15px 18px; color: var(--forest); cursor: pointer; font-size: .84rem; font-weight: 800; }.email-editor-advanced details[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-subtle); }.email-editor-advanced-content { padding: 18px; }.email-editor-advanced .field-config-list { margin-top: 11px; }.email-editor-advanced .field-config-row { grid-template-columns: minmax(160px, .8fr) minmax(240px, 1.2fr); padding: 12px; }
.email-review { display: grid; grid-template-columns: minmax(0, 310px); justify-content: start; }.email-review .admin-form-card { padding: 16px 18px; }.email-preview-actions .form-section-heading { margin-bottom: 9px; }.email-preview-actions .button { min-height: 36px !important; padding: 6px 10px; font-size: .75rem; }.email-preview-actions .row-action { min-height: 32px !important; margin-top: 8px; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font-size: .72rem; text-decoration: underline; }

/* Read-only e-mail flows: one clear preview, delivery context and a test. */
.email-readonly-page { display: flex; flex-direction: column; gap: 15px; width: min(100%, 1180px); }
.email-delivery-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border-color: #d5dfd5; background: linear-gradient(120deg, #f1f6ef, #fbfcf8); }
.email-delivery-summary .admin-eyebrow { margin-bottom: 4px; }.email-delivery-summary h2 { margin: 0; font-family: var(--font-text); font-size: .88rem; font-weight: 750; }.email-delivery-summary > p { margin: 0; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.email-preview-readonly { position: static; max-width: none; padding: 20px; background: #fbfcf8; }.email-preview-readonly .email-preview-body { max-width: none; min-height: 340px; max-height: none; padding: 20px; font-size: .85rem; line-height: 1.62; }.email-preview-readonly .email-preview-subject { margin-bottom: 12px; padding: 12px 14px; }.email-preview-readonly .form-section-heading { margin-bottom: 14px; }
.email-test-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; }.email-test-card .form-section-heading { margin: 0; }.email-test-card .form-section-heading h2 { margin-bottom: 3px; }.email-test-card .form-section-heading p { margin: 0; }.email-test-card .button { flex: 0 0 auto; }.email-test-card .muted { margin: 0; }

/* Lageplan: the collapsed element list is a compact two-column tile grid. */
.pitch-editor-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.pitch-editor-item > summary { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 62px; padding: 10px 13px; gap: 9px; }
.pitch-editor-item > summary small { grid-column: 2; font-size: .68rem; }.pitch-editor-item > summary .pitch-editor-open { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.pitch-editor-item[open] { grid-column: 1 / -1; }.pitch-editor-item[open] > summary { grid-template-columns: auto minmax(0, 1fr) auto; }

/* Public map items stay legible without covering neighbouring buildings. */
.site-map:not(.site-map-editor) .site-map-building { min-width: 59px; min-height: 39px; padding: 4px 6px; border-width: 1.5px; font-size: var(--type-micro); }
.site-map:not(.site-map-editor) .site-map-building i { font-size: .82rem; }.site-map:not(.site-map-editor) .site-map-building b { font-size: var(--type-micro); }
.site-map:not(.site-map-editor) .site-map-pitch { min-width: 47px; min-height: 32px; padding: 4px 5px; border-width: 1.5px; border-radius: 7px; }.site-map:not(.site-map-editor) .site-map-area { min-width: 62px; min-height: 37px; }
/* The caption keeps its clipped width, so a bigger type size costs no extra
   space on the plan -- it only truncates a long label a little earlier. */
.site-map:not(.site-map-editor) .site-map-pitch b, .site-map:not(.site-map-editor) .site-map-area b { font-size: .64rem; }.site-map:not(.site-map-editor) .site-map-pitch small, .site-map:not(.site-map-editor) .site-map-area small { max-width: 66px; }
.site-map:not(.site-map-editor) .size-small { transform: translate(-50%, -50%) scale(.76); }.site-map:not(.site-map-editor) .size-large { transform: translate(-50%, -50%) scale(1.04); }

/* Saisonregeln: every rule is a real card with an aligned five-field grid. */
.seasonal-rate-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 10px; max-width: 1120px; margin: 0 0 16px; }
.seasonal-rate-summary > div { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid var(--line); background: var(--paper); }.seasonal-rate-summary span { color: var(--muted); font-size: .73rem; font-weight: 700; }.seasonal-rate-summary strong { color: var(--forest); font-size: 1rem; }.seasonal-rate-summary > p { grid-column: 1 / -1; margin: 0; padding: 12px 15px; border: 1px solid #d8e2d8; background: #f3f7f1; color: #526258; font-size: .8rem; line-height: 1.45; }
.seasonal-rule-list { display: grid; gap: 12px; max-width: 1120px; }.seasonal-rule-row { display: grid; grid-template-columns: minmax(150px, 1.15fr) repeat(2, minmax(138px, .82fr)) repeat(2, minmax(130px, .78fr)); align-items: end; gap: 12px; padding: 16px; border: 1px solid var(--line); background: var(--paper); }
.seasonal-rule-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); color: var(--forest); }.seasonal-rule-head strong { font-size: .94rem; }.seasonal-rule-head small { padding: 3px 7px; border-radius: var(--radius-pill); background: var(--mint); color: var(--forest); font-size: .67rem; font-weight: 800; }
.seasonal-rule-row label, .seasonal-rate-create form > label { display: grid; gap: 5px; color: #3c5142; font-size: .72rem; font-weight: 800; }.seasonal-rule-row label small, .seasonal-rate-create form > label small { color: var(--muted); font-size: .64rem; font-weight: 600; }.seasonal-rule-row input:not([type="checkbox"]), .seasonal-rate-create input:not([type="checkbox"]) { width: 100%; min-width: 0; min-height: 38px !important; padding: 7px 9px; font-size: .84rem !important; }
.seasonal-rule-row .seasonal-active-field { align-self: end; min-height: 38px; white-space: nowrap; }.seasonal-rule-row .button { align-self: end; min-height: 38px !important; padding: 7px 12px; font-size: .76rem; }
.seasonal-rate-create { display: grid; grid-template-columns: minmax(190px, .48fr) minmax(0, 1.52fr); gap: 18px; max-width: 1120px; margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-subtle); }.seasonal-rate-create h2 { margin: 0; font-size: 1.08rem; }.seasonal-rate-create form { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 11px; }.seasonal-rate-create .seasonal-active-field { min-height: 38px; }.seasonal-rate-create .button { min-height: 38px !important; padding: 7px 11px; font-size: .76rem; }

/* Booking details use a compact two-card overview instead of a loose text column. */
.booking-decision-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 0 16px; padding: 15px 18px; border: 1px solid #cbdccc; border-radius: var(--radius-md); background: linear-gradient(110deg, #edf5ed, #fafbf8); }.booking-decision-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.booking-decision-state .status { margin: 0; }.booking-decision-state small { color: var(--muted); font-size: .77rem; }.detail-status-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }
.booking-detail-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; max-width: 1180px; }.booking-detail-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }.booking-detail-card-wide { grid-column: 1 / -1; padding: 18px; }.booking-detail-card h2 { margin: 0 0 13px; color: var(--forest); font-size: 1.1rem; }.booking-detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }.booking-detail-heading h2 { margin-bottom: 0; }.booking-detail-heading .row-action { min-height: 34px !important; padding: 5px 9px; font-size: .73rem; }
.booking-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }.booking-detail-list > div { min-width: 0; padding: 10px 11px; border-radius: 8px; background: var(--surface-subtle); }.booking-detail-list dt { margin-bottom: 4px; color: var(--muted); font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }.booking-detail-list dd { margin: 0; overflow-wrap: anywhere; color: #31493a; font-size: .82rem; font-weight: 700; }.booking-detail-list a { color: var(--forest); }
.booking-price-breakdown, .booking-price-history { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }.booking-price-breakdown > strong, .booking-price-history > strong { color: var(--muted); }.booking-price-breakdown p, .booking-price-history p { display: flex; justify-content: space-between; gap: 14px; margin: 7px 0 0; color: #46584b; font-size: .78rem; }.booking-price-breakdown b, .booking-price-history b { color: var(--forest); white-space: nowrap; }.booking-note { margin: 0; padding: 13px 14px; border-radius: 8px; background: var(--surface-subtle); color: #46584b; line-height: 1.5; }.assigned-pitch-form { display: flex; align-items: end; gap: 11px; }.assigned-pitch-form label { display: grid; flex: 1; gap: 5px; color: #3c5142; font-size: .72rem; font-weight: 800; }.assigned-pitch-form select { width: 100%; min-height: 38px !important; padding: 7px 9px; }.assigned-pitch-form .button { min-height: 38px !important; padding: 7px 12px; font-size: .76rem; }.booking-event-list { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }.booking-event-list li { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.5fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: .78rem; }.booking-event-list li:first-child { border-top: 0; }.booking-event-list span { color: var(--muted); }

/* Separate consecutive e-mail information blocks so they remain individually scannable. */
.email-flow-help + .email-flow-help { margin-top: 14px; }

/* D07-3 -- responsive layer ======================================================
   Everything that depends on the viewport lives here, and nowhere else. Before
   this consolidation the file carried 36 media blocks across 17 breakpoint
   values, scattered between the component layers -- with the effect that a
   later component rule silently cancelled an earlier responsive one. The
   worklist, the statistics row and the seasonal rules kept their desktop
   columns on a tablet for exactly that reason, and B10 had to patch the phone
   case again at the very end of the file.

   Two rules keep it that way:
   1. One block per breakpoint. A component's responsive behaviour is written
      into the block for its breakpoint, never into a new block of its own.
   2. This section is the last thing in the file, so a responsive rule always
      wins over the component rule it corrects. Nothing below it.

   The breakpoints are the ones D6-5 derived from the content, not round
   numbers: the ad-hoc 1040/1000/980/780/760/680/620/540 passes were folded
   into the next wider step, which only makes the same layout change happen a
   little earlier.

     min 1081  both worklist decisions fit side by side
     min  921  desktop shell: fixed sidebar, page centred on 1160px
     max 1180  the five worklist filters stop fitting in one row
     max 1080  worklist becomes cards, two-pane editors become one column
     max  920  shell collapses, public nav and two-column sections stack
     max  800  dense operator tables and editors go one column
     max  650  phone: everything remaining goes one column
     print     the calendar without navigation
   ============================================================================ */

@media (min-width: 1081px) {
  .booking-table-head, .admin-booking-row { grid-template-columns: minmax(230px, 1.35fr) minmax(130px, .8fr) minmax(180px, 1fr) minmax(218px, 1.08fr); }
  .status-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 7px; }
  .status-action-form { min-width: 0; }
  .status-actions .row-action { width: 100%; justify-content: center; }
}

@media (min-width: 921px) {
  .admin-main { width: min(1160px, 100%); margin: 0 auto; }
  .admin-shell { grid-template-columns: 226px minmax(0, 1fr); }
  .admin-sidebar { padding: 25px 12px 15px; }
  .brand-admin { margin: 0 0 20px; padding: 4px 6px; }
  .brand-admin .brand-mark { width: 29px; height: 29px; }
  .brand-admin > span:last-child strong { font-size: .86rem; }
  .admin-nav { gap: 2px; }
  .admin-nav-group { gap: 1px; }
  .admin-nav-group + .admin-nav-group { margin-top: 8px; }
  .admin-nav-group > p { margin: 0 8px 2px; }
  .admin-nav a { min-height: 36px !important; padding: 7px 10px; border-radius: 7px; font-size: .81rem; }
  .admin-nav a.admin-nav-primary { min-height: 38px !important; margin-top: 11px; }
  .sidebar-bottom { gap: 5px; padding: 12px 6px 0; }
  .sidebar-bottom > a { font-size: .72rem; }
  .logout-button { min-height: 34px; padding: 6px 9px; font-size: .73rem; }
}

@media (max-width: 1180px) {
  .booking-list-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-list-filter-fields .booking-search { grid-column: 1 / -1; }
  .booking-list-date-hint { flex-basis: 100%; padding-bottom: 0; }
}

@media (max-width: 1080px) {
  .admin-main { --admin-page-padding: var(--space-5); }
  /* D04: the worklist becomes a stack of cards. The head row would only
     describe columns that no longer exist. */
  .booking-table-head { display: none; }
  .admin-booking-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
  .admin-booking-row .guest-cell, .admin-booking-row .status-actions { grid-column: 1 / -1; }
  .admin-booking-row .place-cell { min-width: 0; align-self: center; overflow-wrap: anywhere; }
  .status-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .status-actions form { display: flex; flex: 1 1 120px; min-width: 0; }
  .status-actions .row-action { width: 100%; min-height: 38px !important; }
  /* Composing and reading stop being two columns. */
  .email-editor-layout { grid-template-columns: 1fr; grid-template-areas: "primary" "preview" "advanced" "review"; }
  .email-design-layout { grid-template-columns: 1fr; }
  .email-design-preview, .email-preview { position: static; }
  .email-review { grid-template-columns: 1fr; }
  .email-review .admin-form-card { max-width: 440px; }
  /* Five rule fields no longer sit next to each other. */
  .seasonal-rule-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seasonal-rate-create { grid-template-columns: 1fr; }
  .seasonal-rate-create form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .public-nav { display: none; }
  .booking-layout { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .map-section-layout, .faq-layout { grid-template-columns: 1fr; }
  .login-layout { grid-template-columns: 1fr; }
  /* The login keeps its brand area on a tablet instead of dropping it. */
  .login-brand { min-height: 250px; gap: 30px; padding: 26px 32px; }
  .login-panel { padding: var(--space-7) var(--space-6); }
  .login-brand h1 { margin: 10px 0 8px; font-size: clamp(2.1rem, 8vw, 3.2rem); }
  .login-brand > div > p:not(.pill) { margin: 0; }
  /* The operator shell turns its sidebar into a scrollable top bar. */
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; display: block; height: auto; padding: 16px 20px; }
  .admin-nav { display: flex; overflow-x: auto; margin-top: 17px; }
  .admin-nav a { min-width: max-content; }
  .site-type-grid { grid-template-columns: 1fr; }
  .pitch-editor-selection, .pitch-create-card, .map-background-card { grid-template-columns: 1fr; }
  .pitch-editor-row { grid-template-columns: 1fr; }
  .pitch-editor-fields, .pitch-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pitch-editor-actions { justify-items: start; }
  .map-background-remove { grid-column: auto; }
  .year-calendar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .admin-main { --admin-page-padding: var(--space-4); }
  .admin-page-head, .admin-section-head { align-items: flex-start; flex-direction: column; }
  .stat-grid, .today-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-path { grid-template-columns: 1fr; }
  .year-calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-config-row { grid-template-columns: 1fr; gap: 12px; }
  /* A table that cannot shrink scrolls inside its own box instead of pushing
     the page sideways. */
  .report-table { overflow-x: auto; }
  .report-table-head, .report-table-row { min-width: 750px; }
  .pitch-editor-list { grid-template-columns: 1fr; }
  .pitch-editor-item[open] { grid-column: auto; }
  .pitch-editor-item > summary { grid-template-columns: auto minmax(130px, 1fr) auto; }
  .pitch-editor-item > summary small { display: none; }
  .website-image-grid { grid-template-columns: 1fr; }
  .repeatable-row, .repeatable-row-faq { grid-template-columns: 1fr; }
  .repeatable-actions { justify-content: flex-start; }
  .booking-decision-card { align-items: flex-start; flex-direction: column; }
  .detail-status-actions { justify-content: start; }
  .booking-detail-layout { grid-template-columns: 1fr; }
  .booking-detail-card-wide { grid-column: auto; }
  .booking-detail-list { grid-template-columns: 1fr; }
  .assigned-pitch-form { align-items: stretch; flex-direction: column; }
  .booking-event-list li { grid-template-columns: 1fr; gap: 3px; }
  .email-delivery-summary, .email-test-card { align-items: flex-start; flex-direction: column; }
  .email-delivery-summary > p { white-space: normal; }
  .email-preview-readonly { padding: 16px; }
  .email-preview-readonly .email-preview-body { min-height: 260px; padding: 14px; }
  .email-test-card .button { width: 100%; }
}

@media (max-width: 650px) {
  /* The public measure. This used to be declared twice, the second time
     without effect -- it is the example the design audit cited. */
  .container, .site-container { width: min(100% - 32px, 1160px); }
  .hero { min-height: 620px; }
  .section { padding: 74px 0; }
  .section-heading { margin-bottom: 31px; }
  .section-heading h2 { margin-bottom: 16px; }
  .cta-panel { display: block; padding: 37px 29px; }
  .cta-panel h2 { margin-bottom: 24px; }
  .site-card-grid, .camping-gallery, .arrival-grid, .footer-grid { grid-template-columns: 1fr; }
  .site-card { grid-template-columns: 120px minmax(0, 1fr); min-height: 235px; }
  .site-card-content { padding: 20px; }
  .site-card-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
  .booking-page { padding: 61px 0 75px; }
  .booking-card { padding: 28px 21px; }
  .booking-card-request { padding: 24px 19px; }
  .form-grid, .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
  /* The plan keeps its readable size and scrolls sideways in its frame. */
  .site-map-frame { overflow-x: auto; }
  .site-map-scroll-hint { display: block; }
  .site-map-key { margin: 0 0 9px; }
  .login-brand { min-height: 0; gap: 20px; padding: 22px 20px; }
  .login-brand h1 { font-size: 2rem; }
  .login-public-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--control-height); }
  .login-panel { padding: 32px 20px; }
  .stats { gap: 10px; }
  .admin-main { --admin-page-padding: var(--space-3); padding-bottom: var(--space-5); }
  .brand-admin { margin-bottom: 18px; }
  .sidebar-bottom { margin-top: 15px; }
  .stat-grid, .today-grid, .today-grid--three, .year-calendar-grid, .setup-path ol { grid-template-columns: 1fr; }
  .admin-form, .calendar-card, .email-editor-layout > .admin-form-card, .email-design-form { padding: var(--space-4); }
  .admin-booking-row, .arrival-row { padding: var(--space-3); }
  .status-actions { grid-template-columns: 1fr; }
  .admin-page-head, .admin-form-actions, .pitch-picker-heading, .pitch-editor-intro,
  .calendar-toolbar, .daily-booking-card { align-items: flex-start; flex-direction: column; }
  .pitch-editor-fields, .pitch-create-form, .booking-list-filter-fields { grid-template-columns: 1fr; }
  .booking-list-date-filter label { width: 100%; }
  .pitch-editor-item > summary { grid-template-columns: 1fr auto; }
  .pitch-editor-item > summary .pitch-kind-badge { display: none; }
  .field-config-row { padding: 14px; }
  .field-config-choice { width: 100%; }
  .setup-card, .email-design-entry { padding: 17px; }
  .email-design-entry { align-items: flex-start; flex-direction: column; }
  .email-logo-field, .email-theme-picker > div { grid-template-columns: 1fr; }
  .email-html-preview > html, .email-html-preview > html body { min-width: 0; }
  .email-editor-advanced-content { padding: 16px; }
  .email-editor-advanced .field-config-row { grid-template-columns: 1fr; }
  .email-preview-body { max-height: 380px; }
  .email-flow-row { align-items: flex-start; flex-direction: column; }
  .email-flow-meta { justify-items: start; }
  .seasonal-rate-summary { grid-template-columns: 1fr; }
  .seasonal-rule-row, .seasonal-rate-create form { grid-template-columns: 1fr; }
  .seasonal-rule-row .button, .seasonal-rate-create .button { width: 100%; }
  /* A day cell on a phone shows how many entries it has, not the entries. */
  .calendar-day { min-height: 76px; }
  .calendar-events { display: none; }
  .calendar-day-count { display: block; position: absolute; right: 7px; bottom: 7px; }
}

@media print {
  @page { margin: 12mm; }
  body { background: #fff; color: #000; }
  .admin-sidebar, .admin-page-head, .calendar-filters, .calendar-view-switch,
  /* Print removes navigation even when a component declares it as flex/grid. */
  .calendar-legend, .calendar-toolbar > a, .calendar-toolbar-actions { display: none !important; }
  .admin-shell { display: block; }
  .admin-main { padding: 0; }
  .calendar-card { padding: 0; border: 0; background: transparent; }
  .calendar-toolbar { display: block; margin: 0 0 18px; }
  .calendar-toolbar h2 { font-size: 20pt; }
  .daily-booking-list { gap: 7px; }
  .daily-booking-card { break-inside: avoid; border-color: #aaa; background: #fff; color: #000; }
  /* Print ink must override semantic status colours to remain legible in grayscale. */
  .daily-booking-card strong, .daily-booking-card span { color: #000 !important; }
}