/* Self-hosted brand fonts (SIL Open Font License; licences in static/fonts/).
   Latin subset, variable weight — the same files Google Fonts served, minus the
   third-party request. Characters outside the subset fall back to the system face. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-variable.d4c68940b772.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: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-variable.101877a7a906.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;
}

:root {
  --ink: #17372d;
  --cream: #f4f0e5;
  --paper: #fbfaf5;
  --brand-primary: #1c872c;
  --brand-moss: #678d4c;
  --brand-gold: #b8a354;
  --brand-sage: #4b8572;
  --lime: #dce8d1;
  --yellow: #eadcae;
  --coral: var(--brand-gold);
  --blue: #a9c9bf;
  --line: rgba(23, 55, 45, 0.2);
  --display: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
  /* Max measure for centred content. Full-bleed bands keep their background
     edge-to-edge; only the text/cards inside are capped so two-column
     mastheads stay related instead of drifting to opposite screen edges.
     --gutter is the side padding that centres content within --wrap. On large
     monitors the calc wins and content caps at --wrap; on laptops and below the
     4vw floor wins so the page fills the screen instead of shrinking to a
     narrow column. */
  --wrap: 1440px;
  --gutter: max(4vw, calc((100% - var(--wrap)) / 2));
  /* Edge padding for the full-width chrome bars (header, footer). The logo sits
     near the left edge and the bar spans the whole viewport, independent of the
     centred content measure below it. Capped so it never drifts far inward on
     very wide monitors. */
  --edge: clamp(20px, 3vw, 56px);
}

* { box-sizing: border-box; }
/* Reserve the scrollbar track on every page so the centred content column lands
   in the same place whether or not a page is long enough to scroll. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
/* Column layout so the footer is pushed to the bottom on short pages. */
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--cream); color: var(--ink); font-family: var(--body); accent-color: var(--brand-primary); }
/* Keep native controls (time/date pickers, checkboxes, radios, selects) light and on-brand. */
input, select, textarea, button { accent-color: var(--brand-primary); color-scheme: light; }
body > main { flex: 1 0 auto; }
body > footer { flex-shrink: 0; margin-top: auto; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip-link { position: fixed; z-index: 50; left: 1rem; top: 0; max-width: calc(100% - 2rem); padding: .75rem 1rem; background: white; transform: translateY(calc(-100% - 1rem)); }
.skip-link:focus { top: 1rem; transform: none; }

.notice { min-height: 36px; padding: 7px 5vw; display: flex; justify-content: center; align-items: center; gap: 12px; background: var(--ink); color: white; font-size: 12px; }
.notice span { padding: 2px 8px; border-radius: 20px; background: var(--lime); color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.notice p { margin: 0; }
.site-header { height: 92px; padding: 0 var(--edge); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; text-decoration: none; font-family: var(--display); color: inherit; }
.brand-lockup { width: clamp(154px, 17vw, 210px); display: grid; gap: 1px; }
.brand-logo { display: block; width: 100%; height: auto; }
.primary-nav { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 600; }
.primary-nav a { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { padding: 9px 13px; border-radius: 999px; white-space: nowrap; transition: background .15s ease; }
.nav-links a:hover { background: var(--lime); }
.nav-links a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.nav-cta { padding: 9px 15px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; white-space: nowrap; }
.nav-cta:hover { background: var(--brand-primary); }
.nav-signin { padding: 9px 13px; border-radius: 999px; white-space: nowrap; }
.nav-signin:hover { background: var(--lime); }
.menu-button { display: none; }

.nav-search { position: relative; display: flex; align-items: center; }
.nav-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; opacity: .55; pointer-events: none; }
.nav-search input { width: clamp(140px, 13vw, 200px); padding: 10px 14px 10px 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: inherit; font-weight: 500; color: inherit; }
.nav-search input::placeholder { color: rgba(23, 55, 45, .55); font-weight: 500; }
.nav-search input:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; border-color: transparent; }

.hero { min-height: 680px; padding: 68px 5vw 76px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 7vw; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; }
.kicker, .section-label { margin: 0 0 26px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.kicker::before, .section-label::before { content: ""; display: inline-block; width: 28px; height: 2px; margin: 0 10px 3px 0; background: currentColor; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.055em; }
h1 { max-width: 720px; font-size: clamp(66px, 7.7vw, 118px); line-height: .88; font-weight: 800; }
/* The 720px cap above anchors the h1 box to the left, which pinned centred
   hero titles away from their centred lede. Centred heroes opt out. */
.page-head h1, .banner-copy h1 { max-width: none; }
h1 em { color: var(--coral); font-style: normal; }
.hero-intro { max-width: 500px; margin: 34px 0; font-size: 20px; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; min-width: 186px; padding: 15px 18px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.button-dark { background: var(--ink); color: white; }
.button-light { background: var(--lime); color: var(--ink); }
.button-quiet { background: transparent; color: var(--ink); border-color: rgba(0, 0, 0, .28); }
.button-large { min-width: 220px; min-height: 56px; padding: 0 28px; font-size: 16px; }
/* Secondary to .button-dark: same pill, stated with a rule instead of a fill,
   so two actions can sit side by side with a clear primary. */
.button-outline { background: transparent; color: var(--ink); border: 1px solid rgba(23, 55, 45, .3); }
.button-outline:hover { background: rgba(23, 55, 45, .06); border-color: var(--ink); }
button.button { border: 1px solid transparent; cursor: pointer; font-family: inherit; }
/* `button.button` above is an element plus a class, so it outranks the plain
   `.button-outline` rule and blanked the border of every outline button that is
   a real <button> — "Leave this group" read as bare text. Restored once here
   rather than patched page by page, as Insights had been. */
button.button-outline { border-color: rgba(23, 55, 45, .3); }
button.button-outline:hover { border-color: var(--ink); }
.button-dark:hover { background: var(--brand-primary); }
.button-light:hover { background: #cddcbd; }
.button-quiet:hover { background: rgba(23, 55, 45, .06); }
.button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.text-link { font-size: 14px; font-weight: 700; text-underline-offset: 5px; }

.hero-art { position: relative; min-height: 510px; margin-top: 5px; border-radius: 48% 48% 18px 18px; overflow: hidden; background: var(--lime); }
.hero-art::after { content: ""; position: absolute; inset: 51% -20% -16%; border-radius: 50% 50% 0 0; background: var(--coral); transform: rotate(-7deg); }
.sun { position: absolute; z-index: 1; top: 11%; right: 11%; width: 86px; height: 86px; border-radius: 50%; background: var(--yellow); }
.arch { position: absolute; z-index: 2; border: 32px solid var(--ink); border-bottom: 0; border-radius: 50% 50% 0 0; }
.arch-back { width: 290px; height: 245px; left: 9%; bottom: 14%; opacity: .24; }
.arch-front { width: 210px; height: 190px; right: 10%; bottom: 4%; border-color: var(--cream); }
.path-line { position: absolute; z-index: 3; width: 130%; height: 120px; left: -15%; bottom: 15%; border: 4px solid var(--ink); border-color: var(--ink) transparent transparent; border-radius: 50%; transform: rotate(8deg); }
.community-dot { position: absolute; z-index: 4; width: 18px; height: 18px; border: 5px solid var(--cream); border-radius: 50%; background: var(--ink); }
.dot-one { left: 18%; bottom: 27%; }.dot-two { left: 45%; bottom: 19%; }.dot-three { right: 18%; bottom: 28%; }
.hero-art p { position: absolute; z-index: 6; left: 28px; top: 26px; margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; }
.hero-art p span { font-family: var(--display); font-size: 32px; }

.section-heading h2, .principles h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.06; }

/* Slim closing strip: the long About block was replaced by a link out to
   the visit page. */
/* Closing band: a small "before you go" section that leads into the footer, so
   the visit link reads as an intentional invitation rather than a lonely
   strip stranded between the dark features block and the footer. */
.closing { padding: clamp(48px, 6vw, 88px) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; background: var(--cream); }
.closing-copy .section-label { margin-bottom: 14px; }
.closing-copy h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -.02em; }
.closing-copy > p { margin: 14px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.6; opacity: .8; }
.closing-actions { display: grid; gap: 12px; }
.closing-card { position: relative; display: grid; gap: 4px; padding: 22px 56px 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: inherit; text-decoration: none; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.closing-card:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 12px 30px rgba(23,55,45,.08); }
.closing-card-title { font-family: var(--display); font-size: 19px; font-weight: 700; }
.closing-card-note { font-size: 14px; line-height: 1.45; opacity: .72; }
.closing-card-go { position: absolute; top: 22px; right: 22px; font-size: 20px; transition: transform .16s ease; }
.closing-card:hover .closing-card-go { transform: translate(2px, -2px); }

.possibilities { padding: 66px var(--gutter) 74px; background: var(--ink); color: var(--paper); }
/* Single stacked column — label, heading, lede — matching .closing-copy's
   pattern below. The lede used to sit in its own column to the right of the
   heading, which at wide viewports put a lot of empty space between "one
   place." and a single short sentence; stacked, it reads as one block. */
.section-heading { margin-bottom: 34px; }
.section-heading .section-label { margin-bottom: 12px; }
.section-heading > p { margin: 14px 0 0; max-width: 46ch; line-height: 1.65; opacity: .75; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.programme-card { min-height: 280px; padding: 32px; display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; grid-template-areas: "icon copy go"; align-items: center; gap: 24px; color: var(--ink); border-radius: 24px; text-decoration: none; }
.programme-card:is(:hover, :focus-visible) h3 { text-decoration: underline; text-underline-offset: 5px; }
.programme-card:focus-visible { outline: 3px solid var(--paper); outline-offset: 6px; }
.programme-card.coral { background: var(--coral); }.programme-card.yellow { background: var(--yellow); }.programme-card.blue { background: var(--blue); }.programme-card.sage { background: var(--lime); }
.card-symbol { grid-area: icon; width: clamp(112px, 10vw, 144px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 28px; background: var(--ink); color: var(--paper); }
.feature-icon { display: block; width: 64%; height: 64%; }
.card-copy { grid-area: copy; min-width: 0; overflow-wrap: anywhere; }
.card-eyebrow { margin: 0 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.programme-card h3 { font-size: clamp(1.625rem, 2.5vw, 2rem); line-height: 1.2; }
.card-description { max-width: 34ch; margin: 12px 0 0; font-size: 1rem; line-height: 1.6; }
.card-link-label { display: inline-block; margin-top: 18px; font-weight: 700; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }
.card-go { grid-area: go; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; transition: background .18s ease, color .18s ease; }
.card-go svg { width: 22px; height: 22px; }
.programme-card:is(:hover, :focus-visible) .card-go { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.programme-card:active .card-go { background: var(--paper); color: var(--ink); }

@media (max-width: 1100px) {
  .programme-card { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "icon go" "copy copy"; align-items: start; align-content: start; padding: 24px; }
}

.principles { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10vw; padding: 120px 5vw; background: var(--lime); }
.principle-copy > p:last-child { max-width: 480px; margin-top: 32px; line-height: 1.7; }
.principle-list { margin: 0; padding: 0; list-style: none; }
.principle-list li { display: grid; grid-template-columns: 48px 1fr; padding: 22px 0; border-top: 1px solid rgba(23,55,45,.42); }
.principle-list li:last-child { border-bottom: 1px solid rgba(23,55,45,.42); }
.principle-list span { grid-row: 1 / 3; font-size: 12px; font-weight: 700; }
.principle-list strong { font-family: var(--display); font-size: 22px; }
.principle-list p { margin: 7px 0 0; opacity: .72; line-height: 1.5; }

.site-footer { padding: 40px var(--edge) 26px; background: var(--paper); border-top: 1px solid var(--line); }
.footer-main { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 48px; }
.footer-brand { display: grid; gap: 12px; }
.brand-footer .brand-lockup { width: 148px; }
.footer-tagline { margin: 0; max-width: 34ch; font-size: 13px; line-height: 1.5; opacity: .68; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer-nav a { color: inherit; font-size: 13px; font-weight: 600; text-underline-offset: 4px; opacity: .82; }
.footer-nav a:hover { opacity: 1; }
.footer-base { margin-top: 28px; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; border-top: 1px solid var(--line); }
.footer-base p { margin: 0; font-size: 12px; line-height: 1.5; opacity: .58; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .site-header { position: relative; height: auto; min-height: 92px; flex-wrap: wrap; padding-block: 18px; gap: 18px; }
  .site-header.is-menu-enhanced { height: 92px; padding-block: 0; }
  .is-menu-enhanced .menu-button { display: block; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; }
  .menu-button i { display: block; width: 18px; height: 2px; margin: 5px auto; background: white; }
  .primary-nav { width: 100%; flex-direction: column; align-items: stretch; gap: 14px; background: var(--paper); }
  .is-menu-enhanced .primary-nav { display: none; position: absolute; z-index: 20; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 92px); overflow-y: auto; padding: 20px var(--edge); border-bottom: 1px solid var(--ink); box-shadow: 0 12px 24px rgba(23,55,45,.1); }
  .is-menu-enhanced .primary-nav.is-open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
  .primary-nav .nav-links a, .primary-nav .nav-signin, .primary-nav .nav-cta { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .nav-search input { width: 100%; min-height: 48px; font-size: 16px; }
  .primary-nav .nav-account { flex-direction: column; align-items: stretch; gap: 8px; }
  .primary-nav .account-menu summary { width: 100%; min-height: 44px; justify-content: flex-start; }
  .nav-account .account-name { display: inline-block; }
  .primary-nav .account-panel { position: static; min-width: 0; margin-top: 8px; box-shadow: none; }
  .primary-nav .account-panel a, .primary-nav .account-signout { min-height: 44px; }
  .primary-nav .account-panel-head { min-width: 0; overflow-wrap: anywhere; }
  .hero { grid-template-columns: 1fr; padding-top: 52px; }
  .hero-art { min-height: 480px; }
  .principles, .closing { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .notice { align-items: flex-start; padding-block: 9px; }
  .notice p { max-width: 250px; }
  .site-header { min-height: 78px; }
  .site-header.is-menu-enhanced { height: 78px; }
  .is-menu-enhanced .primary-nav { max-height: calc(100dvh - 78px); }
  .hero { min-height: 0; padding-block: 42px 60px; }
  h1 { font-size: 58px; }
  .hero-intro { font-size: 17px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-art { min-height: 390px; border-radius: 42% 42% 12px 12px; }
  .arch-back { left: -8%; }.arch-front { right: -5%; }
  .possibilities, .principles { padding-block: 44px; }
  .section-heading h2, .principles h2 { font-size: 30px; }
  .card-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card-go { transition: none; }
}

/* Policies and service statements */
.policy-page { background: var(--paper); }
.policy-hero { padding: 40px var(--gutter) 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; border-bottom: 1px solid var(--line); }
.policy-hero .section-label { grid-column: 1 / -1; }
/* Policy pages are reference documents, not marketing surfaces: the title is
   one solid ink phrase at a calmer scale — no two-tone split, no orphan
   fragment — so it reads as a document name, not a slogan. */
.policy-hero h1 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -.035em; }
.policy-hero .section-label { margin-bottom: 4px; }
.policy-summary { max-width: 70ch; margin: 0; font-size: 16px; line-height: 1.55; opacity: .85; }
.policy-meta { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }
.policy-layout { padding: 48px var(--gutter) 96px; display: grid; grid-template-columns: minmax(190px, .45fr) minmax(0, 1.55fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.policy-toc { position: sticky; top: 24px; display: grid; border-top: 1px solid var(--ink); }
.policy-toc strong, .policy-toc a { padding: 12px 0; border-bottom: 1px solid var(--line); }
.policy-toc strong { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.policy-toc a { color: inherit; font-size: 13px; text-underline-offset: 4px; }
.policy-content { min-width: 0; max-width: 820px; overflow-wrap: anywhere; }
.policy-content section { padding: 12px 0 48px; scroll-margin-top: 20px; }
.policy-content section + section { padding-top: 42px; border-top: 1px solid var(--line); }
.policy-content h2 { margin-bottom: 16px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; }
.policy-content p, .policy-content li { line-height: 1.75; }
.policy-content p { margin: 0 0 18px; }
.policy-content li + li { margin-top: 9px; }
.policy-content a { font-weight: 700; text-underline-offset: 4px; }
.policy-callout { margin-bottom: 42px; padding: 28px !important; border: 1px solid var(--ink); border-radius: 14px; background: var(--yellow); }
.policy-callout h2 { font-size: 28px; }
.policy-callout p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .policy-hero, .policy-layout { grid-template-columns: 1fr; }
  .policy-hero { padding-block: 30px 22px; }
  .policy-meta { grid-column: 1; }
  .policy-layout { padding-block: 55px 85px; }
  .policy-toc { position: static; }
}

/* Project update timeline */
.status-pill { display: inline-flex; width: fit-content; padding: 5px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.status-proposed { background: var(--yellow); color: var(--ink); }
.status-confirmed { background: var(--blue); color: var(--ink); }
.status-delivered { background: var(--lime); color: var(--ink); }
.status-waitlisted { background: var(--yellow); color: var(--ink); }
.status-pending { background: var(--lime); color: var(--ink); }
.status-cancelled { background: var(--line); color: var(--ink); }
/* Payment lifecycle pills (counter-payments tab): yellow waits on money,
   blue has settled, grey closed either way. */
.status-active { background: var(--yellow); color: var(--ink); }
.status-paid { background: var(--blue); color: var(--ink); }
.status-expired, .status-deactivated, .status-lapsed { background: var(--line); color: var(--ink); }
.status-rejected { background: #f3ddd6; color: #a2301b; }
.status-high { background: var(--coral); color: var(--ink); }
.status-medium { background: var(--yellow); color: var(--ink); }
.status-low { background: var(--lime); color: var(--ink); }
.detail-back { padding: 22px var(--gutter) 0; margin: 0; }
.detail-back a { font-size: 14px; font-weight: 700; text-decoration: none; }
.updates-page { background: var(--paper); }
.updates-hero { padding: 90px 5vw 105px; display: grid; grid-template-columns: 1.4fr .6fr; gap: 6vw; align-items: end; border-bottom: 1px solid var(--line); }
.updates-hero .section-label { grid-column: 1 / -1; }
.updates-hero h1 { font-size: clamp(64px, 8vw, 118px); }
.updates-hero h1 em { color: var(--coral); }
.updates-hero > p:last-child { max-width: 480px; margin: 0; font-size: 18px; line-height: 1.65; }
.timeline-section { padding: 100px 5vw 130px; }
.timeline-heading { display: grid; grid-template-columns: .6fr 1.4fr; margin-bottom: 55px; }
.timeline-heading h2 { font-size: clamp(42px, 5vw, 72px); }
.timeline-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.timeline-item { display: grid; grid-template-columns: .6fr 1.4fr; padding: 38px 0 50px; border-bottom: 1px solid var(--line); }
.timeline-date { font-size: 13px; font-weight: 700; }
.timeline-item article { max-width: 780px; }
.timeline-item h3 { margin: 18px 0 12px; font-size: clamp(30px, 3.2vw, 48px); }
.timeline-summary { margin: 0 0 22px; font-size: 20px; line-height: 1.5; }
.timeline-body { line-height: 1.7; opacity: .8; }
.timeline-body p { margin: 0 0 14px; }
.update-meta { margin-top: 26px; padding-top: 16px; display: flex; justify-content: space-between; gap: 25px; border-top: 1px solid var(--line); font-size: 13px; }
.update-meta a { font-weight: 700; text-underline-offset: 4px; }
.empty-state { padding: 42px; border: 1px dashed var(--ink); border-radius: 16px; background: rgba(255,255,255,.35); }
.empty-state strong { font-family: var(--display); font-size: 24px; }
.empty-state p { margin: 8px 0 0; line-height: 1.6; }

/* Staff editorial dashboard */
.dashboard-shell { flex: 1 0 auto; min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; background: #edf0e8; }
.dashboard-sidebar { position: sticky; top: 0; height: 100vh; padding: 34px 24px 24px; display: flex; flex-direction: column; overflow-y: auto; background: var(--ink); color: white; }
.dashboard-brand { color: white; }
/* The workspace's single primary action, sitting above the navigation rather
   than inside it: creating is the one thing staff come here to do rather than
   review, so it reads as a button, not as a twelfth link. */
.dashboard-create-action { display: flex; align-items: center; gap: 10px; margin-top: 46px; padding: 12px 14px; border-radius: 10px; background: var(--lime); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .15s ease; }
.dashboard-create-action:hover { background: #cddcbd; }
.dashboard-create-action.is-current { background: white; }
.dashboard-create-action:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.dashboard-create-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: rgba(23, 55, 45, .16); font-size: 15px; line-height: 1; }
.dashboard-sidebar nav { margin-top: 22px; display: grid; gap: 4px; }
.dashboard-sidebar nav a { padding: 12px 14px; border-radius: 8px; color: rgba(255,255,255,.75); text-decoration: none; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dashboard-sidebar nav a:hover, .dashboard-sidebar nav a.is-current { background: rgba(255,255,255,.11); color: white; }
.dashboard-sidebar .nav-group { display: grid; gap: 4px; }
/* .6 keeps these group labels the dimmest tier in the sidebar (below the .75
   sign-out and the white links) while clearing 4.5:1 on the dark background;
   at .4 they measured 3.41:1, and 11px bold does not qualify as large text. */
.dashboard-sidebar .nav-group-label { margin: 18px 0 4px; padding: 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.nav-badge { flex-shrink: 0; margin-left: auto; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 700; }
/* The compact layout's top bar and drawer backdrop; see the 980px breakpoint. */
.staff-topbar, .staff-drawer-backdrop { display: none; }
.dashboard-signout-form { margin-top: auto; }
.dashboard-signout { width: 100%; padding: 12px 14px; border: 0; border-radius: 8px; background: transparent; color: white; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.dashboard-signout:hover { background: rgba(255, 255, 255, .11); }
/* `overflow-x: clip` rather than `overflow: hidden`: both stop a wide table
   spilling sideways, but `hidden` makes this a scroll container, and a
   scroll container stops `position: sticky` inside it working against the
   page — which the confirmation strip below relies on. */
.dashboard-main { padding: 48px clamp(28px, 5vw, 78px) 80px; overflow-x: clip; }
/* Way back out of a task page, above its title: the sidebar always offers the
   dashboard too, but the return path should be where the eye starts. */
.dashboard-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 14px; font-weight: 700; text-decoration: none; opacity: .75; }
.dashboard-back:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.dashboard-header { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.dashboard-header .section-label { margin-bottom: 16px; }
.dashboard-header h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.08; letter-spacing: -.04em; }
.dashboard-header p:last-child { margin: 14px 0 0; line-height: 1.55; opacity: .7; }
.dashboard-header + .dashboard-panel { margin-top: 28px; }
.dashboard-metrics-group { margin-top: 40px; }
.dashboard-metrics-group > h2 { margin: 0 0 14px; font-family: var(--display); font-size: 22px; }
.dashboard-metrics-group .dashboard-metrics { margin: 0; }
.dashboard-metrics { margin: 46px 0 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* Compact KPI cards: enough presence to scan, small enough that the working
   queues below stay near the top of the page. */
.dashboard-metrics article { min-height: 104px; padding: 15px 16px; display: flex; flex-direction: column; border-radius: 12px; background: var(--paper); box-shadow: 0 8px 35px rgba(23,55,45,.05); }
.dashboard-metrics article > span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dashboard-metrics strong { margin: 4px 0 0; font-family: var(--display); font-size: 32px; line-height: 1.05; }
.dashboard-metrics a { margin-top: auto; padding-top: 8px; font-size: 12px; font-weight: 700; text-underline-offset: 4px; }
.dashboard-metrics .metric-warn { background: #f8e7ad; }
.dashboard-metrics .metric-alert { background: #f1b4a6; }
/* A count of zero is "all clear": stay on plain paper and fade the figure so it
   never reads as an alert. Warn/alert colour is reserved for counts that need work. */
.dashboard-metrics .metric-zero { background: var(--paper); }
.dashboard-metrics .metric-zero > span { opacity: .55; }
.dashboard-metrics .metric-zero strong { opacity: .32; }
.dashboard-tabs { margin-top: 40px; }
.dashboard-tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dashboard-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 35px rgba(23,55,45,.05); }
.dashboard-tab:hover { background: #e6ebe0; }
.dashboard-tab[aria-selected="true"] { background: var(--ink); color: white; }
.dashboard-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dashboard-tab .tab-count { padding: 1px 8px; border-radius: 999px; background: rgba(23,55,45,.1); font-size: 12px; }
.dashboard-tab[aria-selected="true"] .tab-count { background: rgba(255,255,255,.2); }
.dashboard-panel { padding: 28px; border-radius: 16px; background: var(--paper); box-shadow: 0 8px 35px rgba(23,55,45,.05); }
.dashboard-panel + .dashboard-panel, .report-filters + .dashboard-panel { margin-top: 24px; }
/* Once site.js turns the region into tabs only one panel shows, so drop the
   stacking gap that would otherwise leave a phantom margin above it. */
.dashboard-tabs.is-enhanced .dashboard-panel { margin-top: 0; }
.dashboard-tabs.is-enhanced .dashboard-panel[hidden] { display: none; }
.dashboard-metrics-tabs { margin-top: 34px; }
.dashboard-metrics-tabs .dashboard-metrics-group { margin-top: 0; }
.dashboard-tabs.is-enhanced .dashboard-metrics-group[hidden] { display: none; }
/* The active tab already names the group, so drop the now-duplicate heading once
   the tabs are live (it stays for the no-JS stacked view, where it is the label). */
.dashboard-metrics-tabs.is-enhanced .dashboard-metrics-group > h2 { display: none; }
/* The "Create new" page's own tab group — Facility / Activity / Work order.
   One level, not nested inside another tab region: each panel is a plain
   .dashboard-panel, so it inherits the shared show/hide handling above. */
.create-page-tabs { margin-top: 34px; }
.create-form-panel .staff-form-lede { margin-top: 0; max-width: 68ch; }
/* The panel is already the card; a second bordered box inside it just boxes
   the fields twice. Let the form sit directly on the panel, with a rule to
   separate the fields from the lede above them. */
.create-form-panel .staff-form { padding: 26px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }

/* At-a-glance magnitude chart under each metric group. One hue: bar length is
   the only encoding, and every bar is labelled with its value. */
.metric-chart { margin: 14px 0 0; padding: 18px 20px; border-radius: 12px; background: var(--paper); box-shadow: 0 8px 35px rgba(23,55,45,.05); }
.metric-chart figcaption { margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .55; }
.metric-chart-rows { display: grid; gap: 12px; }
.metric-chart-row { display: grid; grid-template-columns: 168px 1fr auto; align-items: center; gap: 16px; }
.metric-chart-label { font-size: 13px; font-weight: 600; }
.metric-chart-track { height: 12px; border-radius: 999px; background: rgba(23,55,45,.08); }
.metric-chart-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand-primary); transition: width .5s ease; }
.metric-chart-value { min-width: 22px; font-family: var(--display); font-size: 18px; text-align: right; }
@media (prefers-reduced-motion: reduce) { .metric-chart-fill { transition: none; } }
.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.panel-heading .section-label { margin-bottom: 10px; }
.panel-heading h2 { font-size: 30px; }
.panel-heading > a { font-size: 13px; font-weight: 700; }
.panel-footnote { margin: 16px 0 0; font-size: 13px; opacity: .7; }
.dashboard-table-wrap { position: relative; overflow-x: auto; }
.dashboard-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.dashboard-table th { padding: 12px; border-bottom: 1px solid var(--ink); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-table td { padding: 17px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dashboard-table td:first-child strong, .dashboard-table td:first-child span { display: block; }
.dashboard-table td:first-child span { margin-top: 4px; opacity: .62; }
.dashboard-table .overdue { color: #a2301b; font-weight: 700; }
.dashboard-table .preview-link { display: block; color: inherit; text-decoration: none; }
/* The row's summary follows the title as a plain span; without this it sits
   on the same line with nothing between them — "…Zone 4 RNOur Function Room". */
.dashboard-table .preview-link + span { display: block; margin-top: 3px; opacity: .75; }
.dashboard-table .preview-link strong { text-decoration: underline; text-decoration-color: rgba(23,55,45,.25); text-underline-offset: 3px; }
.dashboard-table .preview-link:hover strong { text-decoration-color: var(--ink); }
/* Counter-payment rows closing within 24 hours: a soft tint on top of the
   "Closing soon" pill — never colour alone, so the tag carries the meaning. */
.dashboard-table tr.payment-urgent td { background: rgba(162, 48, 27, 0.06); }

/* Staff preview of an item awaiting review — lives inside the shared
   dashboard shell now (see .dashboard-back, .dashboard-panel), so only the
   content-specific pieces below are its own. */
.preview-banner { max-width: 760px; margin-bottom: 28px; padding: 16px 20px; border-radius: 12px; background: #f8e7ad; }
.preview-banner strong { display: block; }
.preview-banner span { display: block; margin-top: 4px; font-size: 14px; opacity: .8; }
.preview-body { max-width: 760px; }
/* The bare global h1 is sized and spaced for the home page's giant hero
   headline (up to 118px, line-height .88) — reused as-is here it left almost
   no gap between wrapped lines, so a tall letter on one line visually
   crowded the line below. Same fix as the account listing pages: a size and
   line-height scaled for a page heading, not a hero. */
.preview-body h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.03em; margin: 6px 0 0; }
.preview-body h2 { margin: 28px 0 8px; font-size: 22px; }
.preview-summary { margin: 16px 0 0; font-size: 18px; line-height: 1.6; }
.preview-facts { margin: 24px 0 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.preview-facts > div { display: flex; gap: 16px; padding: 12px 16px; background: var(--paper); }
.preview-facts dt { flex: 0 0 150px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .6; }
.preview-facts dd { margin: 0; }
.preview-prose { margin-top: 20px; line-height: 1.65; }
.preview-decision { max-width: 760px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Approval queue controls */
.review-count { padding: 5px 12px; border-radius: 999px; background: #f8e7ad; font-size: 12px; font-weight: 700; }
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
/* One shared button look for every decision/action row in the dashboard —
   the approval queue's Approve/Reject/Cancel and every management table's
   Publish/Unpublish/Start/Resolve/Mark paid buttons — so they read as one
   consistent system instead of two subtly different implementations. */
.review-actions button,
.review-batch-actions button,
.inline-actions button {
  flex: 1; min-width: 0; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: white; color: var(--ink); text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.review-actions button:hover,
.review-batch-actions button:hover,
.inline-actions button:hover { background: rgba(23, 55, 45, .06); border-color: var(--ink); }
/* A visible, on-brand ring for keyboard focus, matching every other
   interactive control in the app (inputs, .button, the dashboard tabs). */
.review-actions button:focus-visible,
.review-batch-actions button:focus-visible,
.inline-actions button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
/* Scoped for the same reason the :hover rules below are: ".review-actions
   button" is a class plus a type, so it outranks a bare ".review-approve" and
   was painting the primary action plain white. The hover state was already
   scoped and the resting state was not, so an Approve button turned dark only
   while the pointer was over it. */
.review-actions .review-approve,
.review-batch-actions .review-approve { background: var(--ink); border-color: var(--ink); color: white; }
/* Specificity note: ".review-actions button:hover" above has one more type
   selector than a plain ".review-approve:hover" would, so it would otherwise
   win the cascade and paint this button's hover state white-on-near-white —
   illegible. Scoping the selector to ".review-actions .review-approve:hover"
   keeps it at least as specific, so the intended dark hover always wins. */
.review-actions .review-approve:hover,
.review-batch-actions .review-approve:hover { background: #0f2a21; border-color: #0f2a21; color: white; }
.review-actions .review-cancel,
.review-batch-actions .review-cancel { color: #a2301b; border-color: rgba(162, 48, 27, .4); }
.review-actions .review-cancel:hover { background: rgba(162, 48, 27, .08); border-color: #a2301b; }
.review-locked { font-size: 13px; opacity: .6; }
/* What an imported listing still needs before publication — a category OnePA's
   label did not resolve to, a photo nobody has described. A note beside the
   decision, not a blocker. */
.review-gaps { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.review-gaps li { padding: 2px 8px; border-radius: 999px; background: #f8e7ad; font-size: 12px; font-weight: 700; }
.preview-gaps { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #f8e7ad; font-size: 14px; }
.preview-gaps strong { display: block; margin-bottom: 4px; }
.preview-gaps ul { margin: 0; padding-left: 18px; }

/* Compact staff workspace: a sticky top bar (logo left, menu button right) and
   the sidebar as a drawer sliding in from the right, under the bar, over a
   blurred backdrop. The bar stays put so the button that opened the menu is
   the one that closes it. Every row in the drawer — Create new, group labels,
   links, Sign out — starts its text 14px inside the drawer's 20px padding, one
   shared left edge, and every tappable row is at least 48px tall. */
@media (max-width: 980px) {
  .dashboard-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .dashboard-shell.is-menu-enhanced { grid-template-rows: auto 1fr; }
  .staff-topbar { position: sticky; top: 0; z-index: 40; height: 64px; padding: 0 clamp(28px, 5vw, 78px); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ink); color: white; }
  .staff-topbar-brand .brand-lockup { width: 132px; }
  .staff-menu-toggle { width: 44px; height: 44px; flex-shrink: 0; display: none; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: transparent; color: white; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
  .is-menu-enhanced .staff-menu-toggle { display: inline-flex; }
  .staff-menu-toggle:hover, .staff-menu-toggle[aria-expanded="true"] { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.38); }
  .staff-menu-toggle:focus-visible { outline: 2px solid white; outline-offset: 2px; }
  /* Three bars that fold into a cross while the drawer is open. */
  .staff-menu-icon { position: relative; width: 18px; height: 12px; }
  .staff-menu-icon i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: top .22s ease, transform .22s ease, opacity .15s ease; }
  .staff-menu-icon i:nth-child(1) { top: 0; }
  .staff-menu-icon i:nth-child(2) { top: 5px; }
  .staff-menu-icon i:nth-child(3) { top: 10px; }
  .staff-menu-toggle[aria-expanded="true"] .staff-menu-icon i:nth-child(1) { top: 5px; transform: rotate(45deg); }
  .staff-menu-toggle[aria-expanded="true"] .staff-menu-icon i:nth-child(2) { opacity: 0; }
  .staff-menu-toggle[aria-expanded="true"] .staff-menu-icon i:nth-child(3) { top: 5px; transform: rotate(-45deg); }

  /* Closed: off-screen and visibility:hidden, so its links are out of the tab
     order and the accessibility tree. The visibility change is delayed until
     the slide-out has finished, and applied at once when opening. */
  .dashboard-sidebar { position: static; height: auto; padding: 20px; }
  .is-menu-enhanced .dashboard-sidebar { position: fixed; z-index: 35; top: 64px; right: 0; bottom: 0; width: min(340px, 88vw); height: auto; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s; }
  .dashboard-shell.is-menu-open .dashboard-sidebar { transform: none; visibility: visible; box-shadow: -18px 0 40px rgba(0, 0, 0, .22); transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .dashboard-sidebar .dashboard-brand { display: none; }
  .dashboard-create-action { min-height: 48px; margin-top: 0; font-size: 15px; }
  .dashboard-sidebar nav { margin: 14px 0 20px; gap: 2px; }
  .dashboard-sidebar .nav-group { gap: 2px; }
  .dashboard-sidebar nav a { min-height: 48px; font-size: 15px; }
  .dashboard-sidebar .nav-group-label { margin: 20px 0 6px; }
  .dashboard-signout-form { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
  .dashboard-signout { min-height: 48px; color: rgba(255,255,255,.75); font-size: 15px; font-weight: 600; }
  .dashboard-signout:hover { color: white; }

  .staff-drawer-backdrop { display: block; position: fixed; z-index: 30; inset: 64px 0 0; background: rgba(9, 26, 20, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
  .dashboard-shell.is-menu-open .staff-drawer-backdrop { opacity: 1; pointer-events: auto; }
  html.staff-menu-lock { overflow: hidden; }
  .dashboard-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .dashboard-shell.is-menu-enhanced .dashboard-sidebar, .staff-drawer-backdrop, .staff-menu-icon i { transition: none; }
}

@media (max-width: 680px) {
  .updates-hero, .timeline-heading, .timeline-item { grid-template-columns: 1fr; }
  .updates-hero { padding-block: 60px 75px; }
  .timeline-section { padding-block: 70px; }
  .timeline-date { margin-bottom: 18px; }
  .update-meta { flex-direction: column; }
  .staff-topbar { padding: 0 18px; }
  .dashboard-main { padding: 34px 18px 60px; }
  .dashboard-header { align-items: flex-start; flex-direction: column; }
  .quick-create-panel .staff-fields { grid-template-columns: 1fr; }
  .dashboard-metrics { grid-template-columns: 1fr; }
  .dashboard-panel { padding: 20px 14px; }
  .metric-chart-row { grid-template-columns: 96px 1fr auto; gap: 10px; }
  .metric-chart-label { font-size: 12px; }
}

/* Practical visit information */
.visit-page { background: var(--paper); }
.visit-hero { padding: 40px var(--gutter) 28px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.visit-hero h1 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -.035em; }
.practical-section { padding: 48px var(--gutter) 96px; }
/* Label sits above the heading, both flush left, so the heading lines up with
   the cards beneath it instead of being indented into the middle of the row. */
.practical-heading { margin-bottom: 28px; }
.practical-heading h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.03em; }
.practical-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.practical-card { min-width: 0; min-height: 330px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); overflow-wrap: anywhere; }
.practical-card:nth-child(3n) { background: #e4eddf; }
.practical-number { align-self: end; font-size: 12px; font-weight: 700; }
.practical-label { margin: 36px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.practical-card h3 { max-width: 560px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.03em; }
.practical-card > p:not(.practical-label), .practical-details { max-width: 590px; margin: 18px 0; line-height: 1.65; opacity: .78; }
.practical-details p { margin: 0 0 12px; }
.practical-card > .text-link { margin-top: auto; }
.practical-meta { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); font-size: 12px; }
.practical-meta a { font-weight: 700; }

@media (max-width: 680px) {
  .practical-heading, .practical-grid { grid-template-columns: 1fr; }
  .visit-hero { padding-block: 30px 22px; }
  .practical-section { padding-block: 36px 70px; }
  .practical-meta { flex-direction: column; }
}

/* In-house facility booking */
.booking-page, .facility-detail-page, .request-page { background: var(--paper); }
/* Compact page header shared by the request, visit and policy pages: a small
   eyebrow, a title at the listing pages' scale and a one-paragraph lede. The
   oversized two-tone slogans these pages used to open with took a full screen
   before the page began. */
.page-intro-eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-primary); }
.page-intro-lede { max-width: 70ch; margin: 0; font-size: 16px; line-height: 1.55; opacity: .85; }
.request-intro { padding: 20px var(--gutter) 18px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }
.request-intro-thumb { position: relative; width: 96px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: linear-gradient(150deg, var(--lime), var(--blue)); }
.request-intro-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.request-intro-thumb .card-shapes { right: 10px; gap: 4px; }
.request-intro-thumb .card-shapes i { width: 12px; height: 26px; border-radius: 8px 8px 0 0; }
.request-intro-thumb .card-shapes i:nth-child(1) { height: 16px; }
.request-intro-thumb .card-shapes i:nth-child(3) { height: 21px; }
.request-intro-text { display: grid; gap: 4px; min-width: 0; }
/* One line names the task and the room. It stays modest so the form below,
   not the header, is what draws the eye. */
.request-intro h1 { font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.request-intro-verb { color: var(--brand-primary); }
.request-intro-note { max-width: 75ch; margin: 0; font-size: 14px; line-height: 1.5; opacity: .75; }
.request-intro-facts { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; font-size: 14px; font-weight: 600; }
.request-intro-facts span + span::before { content: "·"; margin: 0 8px; opacity: .5; }
.facility-section { padding: 100px 5vw 130px; }
.facility-heading { display: grid; grid-template-columns: .6fr 1.4fr; margin-bottom: 55px; }
.facility-heading h2 { font-size: clamp(44px, 5vw, 74px); }
.facility-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.facility-card { min-height: 400px; padding: 28px; display: flex; flex-direction: column; border-radius: 16px; background: var(--cream); }
.facility-card:nth-child(even) { background: #dce9e5; }
.facility-card h3 { margin: 24px 0 12px; font-size: clamp(34px, 4vw, 52px); }
.facility-card p { max-width: 560px; line-height: 1.6; opacity: .76; }
.facility-card dl, .request-summary dl { margin: auto 0 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.facility-card dl div, .request-summary dl div { padding-top: 12px; border-top: 1px solid var(--line); }
.facility-card dt, .request-summary dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.facility-card dd, .request-summary dd { margin: 5px 0 0; font-weight: 600; }
.request-summary dd small { font-weight: 700; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .55; }
/* Full-bleed colour, but the cards inside sit in the same centred measure as
   the hero above so their edges line up. */
/* Activity detail page: one compact read. The key details sit in a single
   tight panel instead of a tall band of large cards, so a short activity
   does not stretch across several screens. */
.activity-detail-page { background: var(--paper); }
/* Activity detail: a compact header, then the organiser's description beside a
   panel that leads with how to take part and then the key facts. The panel
   comes first on a phone, so the action is never under a long description. */
.activity-head { padding: 12px var(--gutter) 20px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.activity-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.activity-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; background: var(--cream); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.activity-state { background: var(--lime); color: var(--ink); }
.activity-state.is-cancelled { background: #f6dede; color: #7a1414; }
.activity-state.is-finished { background: var(--cream); opacity: .8; }
.activity-head h1 { max-width: 34ch; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.025em; }
.activity-layout { padding: 28px var(--gutter) 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "about facts"; gap: clamp(24px, 4vw, 56px); align-items: start; }
.activity-about { grid-area: about; min-width: 0; }
.activity-about h2 { margin-bottom: 12px; font-size: 20px; letter-spacing: -.02em; }
.activity-lede { max-width: 68ch; margin: 0; font-size: 16px; line-height: 1.7; }
.activity-facts { grid-area: facts; }
.activity-card { background: white; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.activity-card-title { padding: 18px 22px 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .6; font-family: var(--body); }
.activity-card dl { margin: 0; padding: 12px 22px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.activity-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.activity-facts dd { margin: 3px 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.activity-cta { padding: 20px 22px 22px; border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.activity-cta h2 { font-size: 20px; letter-spacing: -.02em; }
.activity-cta p { margin: 0; line-height: 1.55; }
.activity-cta .button-large { width: 100%; justify-content: center; }
.activity-status-note { font-size: 13px; opacity: .75; }
.activity-more { margin: 0; font-size: 14px; }
.take-part-step { display: grid; gap: 10px; }
.take-part-step + .take-part-step { padding-top: 14px; border-top: 1px dashed var(--line); }
.take-part-step h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -.02em; }
.take-part-step p { font-size: 14px; }
.take-part-num { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: 13px; font-weight: 700; }
.join-group-form { display: grid; gap: 12px; }
.activity-signup-help { padding: 4px 22px 10px; border-bottom: 1px solid var(--line); }
.activity-signup-help summary { min-height: 44px; padding-block: 10px; font-weight: 700; line-height: 1.5; cursor: pointer; }
.activity-signup-help ol { margin: 4px 0 8px; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.activity-signup-help li + li { margin-top: 10px; }
.activity-card dl .activity-fact-wide { grid-column: 1 / -1; }
/* Facility detail reuses the activity layout; .venue-section is its own. */
.facility-detail-photo { display: block; width: 100%; max-height: 380px; margin-bottom: 24px; object-fit: cover; border-radius: 16px; }
.venue-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.venue-section h2 { margin-bottom: 12px; font-size: 20px; letter-spacing: -.02em; }
.facility-amenities { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.facility-amenities li { padding: 6px 12px; border-radius: 999px; background: var(--cream); font-size: 14px; font-weight: 600; }
.facility-price-note { margin: 0; padding: 0 22px 18px; font-size: 13px; line-height: 1.5; opacity: .8; }
.activity-gallery { margin-top: 24px; }
.activity-gallery-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.activity-gallery figure { margin: 0; }
.activity-gallery img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 12px; background: var(--cream); }
.activity-gallery figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.activity-gallery .image-credit { display: block; opacity: .75; font-size: 13px; }
@media (max-width: 900px) {
  .activity-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "facts" "about"; padding-top: 18px; }
}
/* Activity photos. Sized by the grid rather than the file, so an oversized
   upload cannot break the layout, and capped in height so a portrait photo
   does not push the key details off the first screen. */
/* Batch review. In the document by default, so a reviewer without JavaScript
   still reaches it; the script promotes it to a floating panel that stays in
   view however far the queue is scrolled, because select-all and Approve were
   otherwise only reachable at the bottom of a long table. Buttons come from
   the shared .review-actions family above rather than a second look. */
.review-select { width: 34px; text-align: center; }
.review-select input { width: 18px; height: 18px; accent-color: var(--brand-primary); cursor: pointer; }
.review-batch {
  width: fit-content;
  /* Without a cap, `fit-content` is decided by the note below, whose longest
     line is a full sentence — leaving a panel as wide as the table with its
     controls huddled in one corner. Capped, the note wraps and the panel is
     the size of what it holds. */
  max-width: min(100%, 420px);
  margin: 14px 0 4px auto;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}
.review-batch.is-floating {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  margin: 0;
  box-shadow: 0 10px 30px rgba(23, 55, 45, .18);
}
.review-batch-count { margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
.review-batch-note { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.5; opacity: .85; }
.review-batch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* The shared button rule sets `flex: 1` so a table row's two buttons split
   the cell evenly. These three sit in a panel that is sized by them, so they
   take their own width instead and keep their labels on one line. */
.review-batch-actions button { flex: 0 0 auto; white-space: nowrap; }
/* A batch button with nothing selected stays visible but inert, which reads
   more clearly than a control that appears and disappears. */
.review-batch-actions button:disabled,
.review-actions button:disabled { opacity: .45; cursor: not-allowed; }
.review-batch-actions button:disabled:hover { background: white; border-color: var(--line); }

@media (max-width: 720px) {
  .review-batch.is-floating { right: 12px; left: 12px; bottom: 12px; width: auto; justify-content: space-between; }
  .review-batch { width: auto; margin-inline: 0; }
}

/* A held place can need two actions — the payment reference (primary) and
   cancelling (quiet) — so they stack on the right rather than competing. */
/* Joining an interest group: the consent sits above the button it unlocks, and
   the whole line is the click target, not only the 18px box. */
.join-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.join-consent input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--brand-primary); }
.request-layout { padding: 28px var(--gutter) 96px; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.booking-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; min-width: 0; }
.booking-fieldset { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; min-width: 0; margin: 0; padding: 24px 0 8px; border: 0; border-top: 1px solid var(--line); }
.booking-fieldset legend { padding-right: 16px; font-family: var(--display); font-size: 22px; font-weight: 700; }
.booking-form-note { grid-column: 1 / -1; margin: 0; line-height: 1.65; }
/* Confirming the contact address (ACCT-VERIFY-001): its own small form above
   the application, since a form cannot sit inside the booking form. */
.email-check { margin: 24px var(--gutter) 0; padding: 20px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); overflow-wrap: anywhere; }
.email-check .dashboard-messages { margin-bottom: 16px; }
.email-check h2 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.4; }
.email-check p { margin: 0 0 16px; line-height: 1.65; max-width: 70ch; }
.email-check-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.email-check-form label { font-weight: 700; }
.email-check-form input { flex: 1 1 260px; min-width: 0; max-width: 420px; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(23,55,45,.28); border-radius: 10px; font: inherit; background: #fff; }
.email-check-form input:focus-visible { outline: 3px solid #1C872C; outline-offset: 2px; }
.email-check-status { display: block; margin-top: 6px; }
.booking-cost-notice { grid-column: 1 / -1; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); overflow-wrap: anywhere; }
.booking-cost-notice h2 { margin: 0 0 16px; font-size: 1.25rem; line-height: 1.4; }
.booking-cost-notice dl { display: grid; gap: 16px; margin: 0; }
.booking-cost-notice dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.booking-cost-notice dt { font-weight: 500; }
.booking-cost-notice dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.booking-cost-notice p { margin: 16px 0 0; line-height: 1.65; }
.booking-cost-notice .cost-preview { padding-top: 16px; border-top: 1px solid var(--line); }
.field-required { font-size: .8em; font-weight: 400; }
.booking-steps { padding-left: 22px; line-height: 1.65; }
.booking-steps li + li { margin-top: 16px; }
.form-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-width: 0; }
.booking-form [data-organisation-field][hidden],
.booking-form:has(#id_applicant_type option[value="individual"]:checked) :is([data-organisation-field], [data-organisation-error]) { display: none; }
@media (max-width: 980px) { .request-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .booking-fieldset { grid-template-columns: minmax(0, 1fr); } }
.form-field:has(textarea), .form-check, .form-alert, .booking-form > button { grid-column: 1 / -1; }
.booking-fieldset .form-field:has([name="attendee_count"]), .booking-fieldset .form-field:has(input[type="file"]), .booking-fieldset .form-field:has([name="signed_name"]) { grid-column: 1 / -1; }
.booking-form input[type="file"] { height: auto; min-width: 0; max-width: 100%; padding: 8px; }
.booking-form input::file-selector-button { min-height: 44px; max-width: 100%; margin-right: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; white-space: normal; cursor: pointer; }
.private-application { overflow-wrap: anywhere; }
.submission-details { margin: 0; }
.submission-details > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.submission-details dt { font-weight: 700; }
.submission-details dd { margin: 4px 0 0; }
.private-application li + li { margin-top: 12px; }
.form-field label { font-size: 13px; font-weight: 700; }
.form-control { width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font: inherit; }
/* Safari draws datetime-local and number inputs shorter than text inputs
   despite the min-height above, leaving an uneven control row; an explicit
   height keeps every text-like field exactly 48px tall. Textareas keep their
   own larger sizing and are not matched by this selector. */
input.form-control { height: 48px; }
textarea.form-control { min-height: 130px; resize: vertical; }
.form-control:focus { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
/* Native date/time controls on brand: ink text and a recoloured calendar icon
   instead of the browser's default black glyph. */
.form-control::-webkit-datetime-edit { color: var(--ink); }
.form-control::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2317372d' stroke-width='1.4'%3E%3Crect x='2.2' y='3.4' width='11.6' height='10.4' rx='1.6'/%3E%3Cpath d='M2.2 6.6h11.6M5.4 1.9v2.6M10.6 1.9v2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .7;
  cursor: pointer;
}
.form-control::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Branded date/time picker (site.js). The field keeps its native behaviour
   without JavaScript; once enhanced it turns into a read-only trigger with
   an on-brand calendar icon, and the panel below carries the green theme. */
.dp-field { position: relative; display: block; }
.dp-field input.has-datepicker { padding-right: 46px; }
input.has-datepicker { cursor: pointer; }
input.has-datepicker::-webkit-calendar-picker-indicator { display: none; }
.dp-icon {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.dp-icon svg { width: 18px; height: 18px; }
.dp-icon:hover { background: var(--lime); }

.dp-pop {
  position: fixed; z-index: 60; width: 19.5rem; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 12px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; overflow: auto;
  border: 1px solid var(--line); border-radius: 16px; background: white;
  box-shadow: 0 24px 56px rgba(23, 55, 45, .18);
  font-family: var(--body); color: var(--ink);
}
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dp-title { min-width: 0; margin: 0; font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: -.02em; text-align: center; }
.dp-prev, .dp-next {
  flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper);
  color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer;
}
.dp-prev:hover:not(:disabled), .dp-next:hover:not(:disabled) { background: var(--lime); border-color: var(--ink); }
.dp-prev:disabled { opacity: .35; cursor: default; }
.dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.dp-dow { display: flex; align-items: center; justify-content: center; height: 28px; font-size: 11px; font-weight: 700; letter-spacing: .06em; opacity: .5; }
.dp-day {
  min-width: 0; height: max(36px, 2.25rem); padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink);
  font: inherit; font-weight: 500; cursor: pointer;
}
.dp-day:hover { background: var(--lime); }
.dp-day:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }
.dp-day[aria-current="date"] { box-shadow: inset 0 0 0 2px var(--brand-primary); font-weight: 700; }
.dp-day.is-selected, .dp-day.is-selected[aria-current="date"] { background: var(--ink); color: white; box-shadow: none; font-weight: 700; }

.dp-time { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.dp-time-label { margin-right: auto; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.dp-select {
  min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.dp-select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }
.dp-colon { opacity: .6; }

.dp-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dp-today {
  min-height: 36px; padding: 0 16px; border: 1px solid rgba(23, 55, 45, .3); border-radius: 999px;
  background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
}
.dp-today:hover { background: rgba(23, 55, 45, .06); border-color: var(--ink); }
.dp-clear { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
/* Time-only panel has no calendar above the time row, so remove the top border. */
.dp-pop[data-mode="time"] .dp-time { border-top: 0; padding-top: 0; }

/* Custom dropdowns (site.js): native selects marked [data-select-menu] hide
   once the branded trigger and listbox replace them; the OS option list with
   its blue highlight gives way to the site's green theme. */
.dd-field { position: relative; display: inline-flex; min-width: 0; }
select.is-dd { display: none; }
.dd-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: white;
  color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.dd-trigger:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.dd-trigger svg { width: 11px; height: 8px; flex: none; transition: transform .15s ease; }
.dd-field.is-open .dd-trigger { border-color: var(--ink); }
.dd-field.is-open .dd-trigger svg { transform: rotate(180deg); }
.dd-trigger.dd-invalid { border-color: #A11212; }
.dd-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dd-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 55;
  min-width: 100%; max-height: 300px; overflow-y: auto; padding: 6px;
  display: grid; gap: 2px;
  border: 1px solid var(--line); border-radius: 12px; background: white;
  box-shadow: 0 18px 44px rgba(23, 55, 45, .16);
}
/* The display above would otherwise override the hidden attribute's
   UA-stylesheet display:none (author rules win that cascade), leaving the
   listbox painted on the page before it is ever opened. */
.dd-pop[hidden] { display: none; }
.dd-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 11px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; font-weight: 500;
  text-align: left; cursor: pointer;
}
.dd-option:hover { background: var(--lime); }
.dd-option:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.dd-option[aria-selected="true"] { font-weight: 700; }
.dd-check { color: var(--brand-primary); font-weight: 700; }
.form-field .dd-value, .staff-field .dd-value { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.form-field .dd-pop, .staff-field .dd-pop { width: 100%; }

.filter-selects .dd-field { min-width: 0; width: 100%; }
.filter-selects .dd-value { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.filter-selects .dd-pop { width: 100%; }
.filter-selects .dd-option { min-height: 44px; overflow-wrap: anywhere; }

/* Compact pill sizing for the datepicker's time selects. */
.dp-time .dd-trigger { min-height: 36px; padding: 4px 10px; border-radius: 8px; background: var(--paper); }
.form-field small { font-size: 12px; opacity: .7; }
/* Sit the checkbox at the top-left, on the first line of its label. The min-height
   reset matters: a text-control min-height would centre the glyph in a tall box
   and float it below the text. */
.form-check { grid-template-columns: 20px 1fr; column-gap: 12px; row-gap: 0; align-items: start; }
/* Consent text is body copy, not a field label, so it reads at sentence weight. */
.form-check label { grid-column: 2; grid-row: 1; font-size: 14px; font-weight: 500; line-height: 1.5; }
.form-check .field-errors, .form-check small { grid-column: 2; margin-top: 8px; }
.form-check input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  /* The 20px box and the 21px first line share a centre, so no nudge is needed. */
  margin: 0;
}
.field-errors, .form-alert { padding: 10px 12px; border-left: 4px solid #a2301b; background: #f7d7d0; color: #6d1d0d; font-size: 13px; }
.field-errors ul, .form-alert ul { margin: 0; padding-left: 18px; }
.request-summary { min-width: 0; padding: 30px; border-radius: 16px; background: var(--cream); overflow-wrap: anywhere; }
.request-summary dl { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.request-summary h2 { font-size: 26px; }
.request-summary h3 { margin-top: 32px; font-size: 20px; }
.request-summary p { line-height: 1.65; opacity: .75; }
.success-page { min-height: 100vh; padding: 10vh 5vw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--lime); }
.success-mark { width: 72px; height: 72px; margin-bottom: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 34px; }
.success-page h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.1; letter-spacing: -.03em; }
.success-page > p:not(.section-label) { max-width: 560px; line-height: 1.65; }
.booking-reference { padding: 10px 16px; border: 1px solid var(--ink); border-radius: 999px; }

/* Error pages (404 / 500 / 403 / 400) — same calm, centred layout as success. */
.error-page { min-height: 100vh; padding: 8vh var(--edge); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--paper); }
.error-brand { margin-bottom: 40px; }
.error-brand .brand-lockup { width: 168px; }
.error-code { margin: 0; font-family: var(--display); font-size: clamp(64px, 12vw, 132px); line-height: 1; font-weight: 800; color: var(--brand-gold); }
.error-page h1 { max-width: 640px; margin: 10px 0 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -.03em; }
.error-message { max-width: 520px; margin: 18px 0 0; font-size: 16px; line-height: 1.65; opacity: .78; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.error-actions .button { min-width: 0; padding: 14px 26px; }
.payment-page { min-height: 100vh; padding: 70px 5vw 100px; background: var(--cream); }
.payment-card { max-width: 920px; margin: 0 auto; padding: clamp(28px, 6vw, 72px); border: 1px solid var(--ink); border-radius: 20px; background: var(--paper); }
.payment-card h1 { margin-bottom: 20px; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.03em; }
.payment-qr { width: fit-content; margin: 0 0 28px; padding: 18px; border: 1px solid var(--ink); border-radius: 14px; background: white; }
.payment-qr img { display: block; max-width: 100%; height: auto; }
.payment-notice, .payment-state { max-width: 720px; padding: 20px; border-left: 5px solid var(--ink); line-height: 1.65; background: var(--yellow); }
.payment-state-success { background: var(--lime); }
.payment-state-alert { background: #f7d7d0; }
.payment-facts { margin: 42px 0 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; }
.payment-facts div { padding-top: 13px; border-top: 1px solid var(--line); }
.payment-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.payment-facts dd { margin: 7px 0 0; font-size: 18px; font-weight: 600; }
.payment-privacy { max-width: 720px; font-size: 13px; line-height: 1.6; opacity: .72; }

@media (max-width: 760px) {
  .facility-heading, .facility-grid, .request-layout { grid-template-columns: 1fr; }
  /* On a phone the photo leads, full width, and the room's details follow. */
  .request-intro { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 14px 16px; }
  .request-intro-thumb { width: 100%; aspect-ratio: 16 / 6; }
  .request-intro-facts { gap: 2px 12px; }
  .request-intro-facts span + span::before { content: none; }
  .facility-section { padding-block: 70px; }
  .facility-card { min-height: 360px; }
  .booking-form { grid-template-columns: 1fr; }
  .form-field, .form-field:has(textarea), .form-check, .form-alert, .booking-form > button { grid-column: 1; }
  .request-summary { position: static; }
  .payment-facts { grid-template-columns: 1fr; }
}

/* Account controls in the primary navigation */
.nav-account { display: inline-flex; align-items: center; gap: 6px; }
.logout-form { margin: 0; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: currentColor; cursor: pointer; text-decoration: underline; }
.link-button:hover { opacity: .75; }

.account-menu { position: relative; }
.account-menu summary { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 5px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; list-style: none; user-select: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover { background: var(--lime); }
.account-menu[open] summary { background: var(--lime); border-color: var(--ink); }
.account-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--display); font-size: 13px; font-weight: 700; }
/* Desktop shows just the avatar + caret; the full name lives in the dropdown and
   in the mobile menu, so the header bar stays uncluttered. */
.account-name { display: none; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-caret { width: 11px; height: 8px; opacity: .65; transition: transform .15s ease; }
.account-menu[open] .account-caret { transform: rotate(180deg); }
.account-panel { position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; min-width: 232px; padding: 8px; display: grid; gap: 2px; background: var(--paper); border: 1px solid var(--ink); border-radius: 16px; box-shadow: 0 18px 40px rgba(23, 55, 45, .16); }
.account-panel-head { margin: 0; padding: 10px 12px 12px; display: grid; gap: 2px; border-bottom: 1px solid var(--line); }
.account-panel-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-panel-head span { font-size: 12px; font-weight: 500; opacity: .7; }
.account-panel-head .account-access-note { max-width: 24ch; margin-top: 6px; font-size: .875rem; line-height: 1.5; opacity: 1; overflow-wrap: anywhere; }
.account-panel a, .account-signout { padding: 10px 12px; border-radius: 10px; font: inherit; font-weight: 600; text-align: left; color: inherit; }
.account-panel a { display: block; }
.account-panel a:hover, .account-signout:hover { background: var(--lime); }
.account-signout { width: 100%; margin-top: 2px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; background: none; cursor: pointer; color: var(--brand-primary); }

/* Authentication pages */
.auth-page { width: 100%; max-width: 520px; margin: 0 auto; padding: 40px 24px 64px; }
.auth-card { background: var(--paper, #FBFAF5); border: 1px solid rgba(23,55,45,.12); border-radius: 18px; padding: 30px 32px 32px; }
.auth-card .section-label { margin-bottom: 14px; opacity: .7; }
/* Auth headings stay small: the display clamp is far too loud for a form card. */
.auth-card h1 { max-width: none; margin: 0 0 10px; font-size: clamp(28px, 3.2vw, 34px); line-height: 1.15; letter-spacing: -.03em; font-weight: 700; }
.auth-lede { margin: 0 0 24px; font-size: 15px; line-height: 1.6; opacity: .78; }
.auth-form .field { display: grid; gap: 6px; margin-bottom: 18px; }
.auth-form label { font-weight: 600; }
.auth-form input { width: 100%; padding: 12px 14px; border: 1px solid rgba(23,55,45,.28); border-radius: 10px; font: inherit; background: #fff; }
.auth-form input:focus-visible { outline: 3px solid #1C872C; outline-offset: 2px; }
.field-help { font-size: 14px; opacity: .75; margin: 0; }
.field-error { color: #A11212; font-size: 14px; margin: 0; }
.form-errors { background: #FDECEC; border: 1px solid #A11212; border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; }
.form-errors p { margin: 0; color: #A11212; }
.auth-card .form-errors { overflow-wrap: anywhere; }
.auth-card .form-errors:focus { outline: 3px solid var(--ink); outline-offset: 3px; }
.auth-card .form-errors a { display: inline-block; vertical-align: top; min-height: 44px; padding-block: 10px; }
.auth-card .field-error { color: #A11212; }
.auth-alt, .auth-note { margin-top: 20px; font-size: 15px; }
.auth-note { opacity: .8; }

/* Shared listing pages: programmes, my bookings */
/* Share the site's content column so the account page's heading lands in the same
   place as the events/courses headings instead of jumping inward. */
.listing-page { padding: 40px var(--gutter) 96px; }
.listing-hero { margin-bottom: 36px; }
/* This page's own section headers ("My bookings", "My activities") fell back
   to the bare global h1 (a 66-118px hero size with line-height .88 — tuned for
   the home page's giant headline, not a page heading) and the unstyled browser
   default for h2, so the two sections read at two very different, inconsistent
   sizes, and the h1's tight line-height let its descenders overlap the lede
   directly beneath it. Match the sizing every other listing page's heading
   already uses (.page-head h1), for both levels, so the two sections match. */
.listing-hero h1, .listing-hero h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; }
.listing-lede { max-width: 60ch; margin: 8px 0 0; font-size: 16px; line-height: 1.55; opacity: .8; }
.listing-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.listing-card { background: #fff; border: 1px solid rgba(23,55,45,.12); border-radius: 16px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.listing-card.is-past { opacity: .6; }
.listing-card h2, .listing-card h3 { margin: 0; font-size: 20px; }
.listing-badge { justify-self: start; background: #DCE8D1; color: #17372D; border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 700; }
.listing-date, .listing-meta, .listing-reference { margin: 0; font-size: 14px; opacity: .75; }
.listing-reference { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.listing-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; opacity: .85; }
.practical-source { opacity: .75; }

.search-summary { margin: 0 0 22px; font-weight: 600; }

/* ---------------------------------------------------------------------------
   Listing pages and the shared card.
   Events, courses and venues all use .page-head + .cards + .card so the
   listings keep one rhythm instead of near-copies.
   --------------------------------------------------------------------------- */
.listing-surface { background: var(--paper); }
.page-head { padding: 40px var(--gutter) 20px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; }
.page-head h1 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; }
.page-head-lede { max-width: 60ch; margin: 8px 0 0; font-size: 16px; line-height: 1.55; opacity: .8; }
.page-head-count { margin: 0; font-size: 14px; font-weight: 700; opacity: .75; }
.page-head-count a { font-weight: 700; text-underline-offset: 4px; }

.filter-bar { padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.filter-search { position: relative; flex: 1 1 320px; display: flex; }
/* The live results count sits with the search/filters it describes, right-aligned,
   instead of floating disconnected in the page header. */
.filter-count { margin: 0 0 0 auto; font-size: 14px; font-weight: 700; opacity: .7; white-space: nowrap; }
.filter-count a { font-weight: 700; text-underline-offset: 3px; }
.filter-search-icon { position: absolute; left: 15px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); opacity: .55; pointer-events: none; }
.filter-search input { width: 100%; padding: 12px 16px 12px 41px; border: 1px solid var(--line); border-radius: 12px; background: white; font: inherit; color: inherit; }
.filter-bar select { padding: 12px 38px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2317372d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 11px; font: inherit; font-weight: 600; color: inherit; appearance: none; cursor: pointer; }
.filter-search input:focus, .filter-bar select:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.filter-selects { position: relative; flex: 0 1 34rem; width: 100%; min-width: 0; max-width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 12px; }
.filter-selects select { width: 100%; min-width: 0; max-width: 100%; }

/* Activities filter panel: a full-width search row, then each filter as a
   compact labelled pill ("Zone  All ▾") on one wrapping row, then removable
   chips for whatever is narrowing the list. */
.filter-panel { padding: 0 var(--gutter); display: grid; gap: 14px; }
.filter-search-row { display: flex; gap: 10px; }
.filter-search-row .filter-search { flex: 1 1 auto; min-width: 0; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-left: 14px; border: 1px solid var(--line); border-radius: 999px; background: white; }
.filter-pill:focus-within { border-color: var(--ink); }
.filter-pill > label { font-size: 13px; font-weight: 600; opacity: .65; white-space: nowrap; cursor: pointer; }
.filter-pill.is-active { border-color: var(--brand-primary); background: var(--lime); }
.filter-pill.is-active > label { opacity: .8; }
.filter-pill select { min-height: 42px; padding: 0 34px 0 8px; border: 0; border-radius: 999px; background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2317372d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 11px; font: inherit; font-size: 14px; font-weight: 700; color: inherit; appearance: none; cursor: pointer; }
.filter-pill .dd-trigger { min-height: 42px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; font-weight: 700; }
.filter-pill .dd-trigger:focus-visible { outline-offset: 2px; }
.filter-pill .dd-value { max-width: 16rem; }
.filter-pill .dd-pop { width: max-content; max-width: min(22rem, calc(100vw - 32px)); }
.filter-pill .dd-option { min-height: 44px; }
.filter-apply { min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; background: white; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.filter-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.filter-active-label { font-size: 13px; font-weight: 600; opacity: .65; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; text-decoration: none; }
.filter-chip svg { width: 10px; height: 10px; flex: none; }
.filter-chip:hover { background: #0f2a21; }
.filter-clear { font-size: 13px; font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.filter-panel .filter-search input:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.listing-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 18px var(--gutter) 0; }
.listing-toolbar .listing-tabs { padding: 0; }
.listing-toolbar .filter-count { margin: 0; }
@media (max-width: 560px) {
  .filter-search-row .filter-submit { padding: 12px 16px; }
  .filter-pill .dd-value { max-width: 11rem; }
}

.listing-section { padding: 24px var(--gutter) 56px; }
.listing-group + .listing-group { margin-top: 38px; }
.listing-group-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.listing-group-head h2 { font-size: 20px; letter-spacing: -.02em; }
.listing-group-head span { font-size: 13px; font-weight: 600; opacity: .65; }
.listing-group-more { margin: 18px 0 0; }
.filter-submit { flex: none; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 12px; background: var(--ink); color: var(--paper); font: inherit; font-weight: 700; cursor: pointer; }
.filter-submit:hover { background: #0f2a21; }
/* Full content width, matching the filter bar and card grid it sits between. */
.listing-note { margin: 0 0 24px; padding: 14px 18px; border-left: 3px solid var(--brand-gold); border-radius: 0 10px 10px 0; background: var(--cream); font-size: 14px; line-height: 1.55; }
.listing-note strong { display: block; margin-bottom: 3px; font-family: var(--display); font-size: 15px; }

/* Auto-fill keeps two or four items from leaving a hole in a fixed 3-column grid. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 1px 2px rgba(23, 55, 45, .05); transition: box-shadow .16s ease, transform .16s ease; }
.card:hover { box-shadow: 0 14px 30px rgba(23, 55, 45, .11); transform: translateY(-2px); }
.card.is-hidden, .empty-state.is-hidden { display: none; }
.card.is-past { opacity: .62; }
.card.is-past:hover { transform: none; }

.card-media { position: relative; height: 116px; padding: 12px; display: flex; align-items: flex-start; }
.card-media-a { background: linear-gradient(150deg, var(--lime), var(--blue)); }
.card-media-b { background: linear-gradient(150deg, var(--yellow), var(--coral)); }
.card-media-c { background: linear-gradient(150deg, var(--blue), var(--brand-sage)); }
.card-tag { position: relative; z-index: 1; padding: 5px 11px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.card-tag-past { background: var(--ink); color: var(--paper); }
.card-status { position: relative; z-index: 1; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.card-status-cancelled { background: #b4442f; color: white; }
.card-status-full { background: #f8e7ad; color: var(--ink); }
.is-cancelled { opacity: .7; }
/* Darker than the solid .card-status-cancelled badge on purpose: this pill
   paints 11px bold text over its own translucent background, which
   composites to roughly #cdd3cd, and #b4442f measured only 3.63:1 there. */
.status-cancelled { color: #9a2d19; }
.card-shapes { position: absolute; right: 14px; bottom: 0; display: flex; align-items: flex-end; gap: 6px; opacity: .42; }
.card-shapes i { display: block; width: 22px; height: 44px; border-radius: 14px 14px 0 0; background: var(--ink); }
.card-shapes i:nth-child(1) { height: 28px; }
.card-shapes i:nth-child(3) { height: 36px; }
.card-media-photo { padding: 0; overflow: hidden; }
.card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-media-photo .card-tag { margin: 12px; }

.card-body { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 18px; }
/* Eventbrite puts the date above the title in accent type; it is the field
   people scan for first on an events listing. */
.card-when { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-primary); }
.card-title { font-size: 18px; line-height: 1.28; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-summary { margin: 0; font-size: 14px; line-height: 1.5; opacity: .78; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-facts { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; }
.card-facts li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.card-icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; opacity: .6; }
.card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.card-chips span { padding: 4px 10px; border-radius: 999px; background: var(--cream); font-size: 12px; font-weight: 600; }
.card-chips .card-chip-more { background: var(--lime); }
.card-foot { margin-top: auto; padding-top: 13px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); }
.card-price { font-size: 14px; font-weight: 700; }
.card-price.is-unstated { font-weight: 600; opacity: .6; }
.card-action { font-size: 13px; font-weight: 700; text-underline-offset: 4px; }
.card-button { padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; text-decoration: none; }
.card-button:hover { background: var(--brand-primary); }
.card-actions { display: inline-flex; align-items: center; gap: 12px; }
.card-link { font-size: 13px; font-weight: 700; text-decoration: none; text-underline-offset: 4px; }
.card-link:hover { text-decoration: underline; }

/* Breadcrumbs on deep pages */
.breadcrumbs { padding: 18px var(--gutter) 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 13px; }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 8px; opacity: .5; }
.breadcrumbs a { text-decoration: none; font-weight: 600; opacity: .7; }
.breadcrumbs a:hover { opacity: 1; text-decoration: underline; }
.breadcrumbs [aria-current="page"] { font-weight: 700; }

/* Read-only "already booked" availability preview on facility detail */
.availability-note { margin: 0 0 20px; max-width: 60ch; line-height: 1.6; opacity: .8; }
.availability-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.availability-days li { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.availability-date { font-weight: 700; }
.availability-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.availability-slot { padding: 4px 10px; border-radius: 999px; background: var(--lime); font-size: 13px; font-weight: 600; }

/* Upcoming / Past / All tabs on programme listings */
.listing-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px var(--gutter) 8px; }
.listing-tabs a { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--ink); }
.listing-tabs a:hover { background: rgba(23, 55, 45, .06); }
.listing-tabs a.is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Post-submit and account actions */
.success-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.listing-action { margin: 4px 0 0; font-size: 14px; font-weight: 700; }
.listing-action a { text-underline-offset: 4px; }

@media (max-width: 620px) {
  .availability-days li { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 620px) {
  .cards { grid-template-columns: 1fr; }
  .page-head { padding-block: 30px 16px; }
  .listing-section { padding-block: 18px 44px; }
}

/* Vendor-style banner hero and benefits row */
.banner-hero { position: relative; padding: 68px 5vw 74px; overflow: hidden; background: linear-gradient(135deg, var(--ink), var(--brand-primary)); color: var(--paper); text-align: center; }
.banner-hero::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(rgba(255,255,255,.85) 1.1px, transparent 1.1px); background-size: 26px 26px; }
.banner-art { position: absolute; inset: 0; opacity: .16; }
.banner-art .sun { top: 14%; right: 8%; }
.banner-art .arch { border-color: var(--paper); }
.banner-art .arch-back { width: 300px; height: 250px; left: 4%; bottom: -10%; opacity: .5; }
.banner-art .arch-front { width: 220px; height: 200px; right: 6%; bottom: -8%; }
.banner-copy { position: relative; z-index: 2; }
.banner-copy .hero-initiative { max-width: none; margin: 0 auto 16px; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1.5; opacity: .82; }
.banner-copy h1 { max-width: 1100px; margin: 0 auto; font-size: clamp(34px, 4vw, 56px); line-height: 1.06; letter-spacing: -.04em; }
.banner-copy > p { max-width: 620px; margin: 18px auto 28px; font-size: 16px; line-height: 1.6; opacity: .92; }
.banner-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.banner-button { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border: 1px solid rgba(251, 250, 245, .5); border-radius: 10px; background: rgba(251, 250, 245, .12); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--paper); transition: background .15s ease; }
.banner-button:hover { background: rgba(251, 250, 245, .24); }
.banner-button svg { width: 17px; height: 17px; }
.banner-button-solid { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--ink); }
.banner-button-solid:hover { background: #c9b465; }

/* Aggregate search: the primary hero action, one field across venues, events
   and courses. */
.hero-search { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; width: min(100%, 640px); margin: 0 auto 22px; padding: 7px 7px 7px 48px; border-radius: 999px; background: var(--paper); box-shadow: 0 16px 44px rgba(0, 0, 0, .2); }
.hero-search-icon { position: absolute; left: 19px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--ink); opacity: .55; pointer-events: none; }
.hero-search input { flex: 1 1 auto; min-width: 0; padding: 12px 2px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.hero-search input::placeholder { color: var(--ink); opacity: .55; }
.hero-search input:focus { outline: none; }
.hero-search:focus-within { box-shadow: 0 0 0 3px rgba(251, 250, 245, .55), 0 16px 44px rgba(0, 0, 0, .22); }
.hero-search-button { flex: none; padding: 12px 26px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s ease; }
.hero-search-button:hover { background: #0f2a21; }

.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; padding: 40px var(--gutter) 44px; background: var(--paper); border-bottom: 1px solid var(--line); text-align: center; }
.benefits article { display: grid; justify-items: center; gap: 9px; }
.benefit-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lime); }
.benefit-icon svg { width: 21px; height: 21px; }
.benefits h2 { font-size: 17px; letter-spacing: -.01em; }
.benefits p { max-width: 320px; margin: 0; font-size: 14px; line-height: 1.6; opacity: .8; }

@media (max-width: 900px) {
  .benefits { grid-template-columns: 1fr; gap: 34px; }
  .banner-hero { padding-block: 68px 74px; }
}

/* Staff create forms and dashboard messages */
.dashboard-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dashboard-actions .button { min-width: 0; gap: 10px; }
/* overflow stays visible so the custom dropdown's listbox is not clipped;
   the toggle rounds its own top corners instead of relying on the panel. */
.quick-create-panel { border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.quick-create-panel[open] { border-color: var(--brand-primary); }
/* Summary row styled to look like a dashboard button so the region is scannable. */
.quick-create-toggle {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; cursor: pointer; list-style: none;
  border-radius: 15px 15px 0 0;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  color: var(--ink); letter-spacing: -.02em; user-select: none;
}
.quick-create-toggle::-webkit-details-marker { display: none; }
.quick-create-toggle:hover { background: rgba(23, 55, 45, .04); }
.quick-create-toggle span:last-child {
  font-size: 20px; line-height: 1; opacity: .5;
  transition: transform .2s ease;
}
.quick-create-panel[open] .quick-create-toggle span:last-child { transform: rotate(45deg); }
/* Form body is inset and reuses the staff-fields two-column grid. */
.quick-create-panel form { padding: 6px 24px 24px; }
.quick-create-panel .staff-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.quick-create-panel .staff-field { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 6px; align-content: start; }
.quick-create-panel .staff-field:has(textarea) { grid-column: 1 / -1; }
.quick-create-panel .staff-field:has(select) { grid-column: 1 / -1; }
.quick-create-actions { margin-top: 20px; display: flex; gap: 10px; }
/* Validation errors reuse the existing field-error styling. */
.quick-create-panel .form-errors { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #f4d7d2; font-weight: 600; font-size: 14px; }
/* Queue links jump to #review-queue, and so does a decision now that it returns
   the reviewer to the queue rather than the top of the page. Leave room for
   whatever is pinned above: the confirmation strip below, and the sticky top
   bar on the narrow layout. */
.dashboard-main [id] { scroll-margin-top: 80px; }
/* A decision returns the reviewer to the queue rather than the top of the
   page, so the confirmation has to travel with them. */
.dashboard-messages { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 8px; }
/* Sticky in the staff workspace only, where a decision returns the reviewer to
   the queue part-way down the page. Public pages reuse the class, and there a
   sticky strip rode over the page title as the resident scrolled. */
.dashboard-main .dashboard-messages { position: sticky; top: 12px; z-index: 30; }
.dashboard-messages li { padding: 13px 17px; border-radius: 12px; background: var(--lime); font-weight: 600; box-shadow: 0 6px 18px rgba(23, 55, 45, .12); }
.dashboard-messages .message-error { background: #f4d7d2; }
.dashboard-messages .message-warning { background: #f8e7ad; }

/* A group of inputs in a staff form (the weekday boxes): a fieldset that
   looks like its neighbours, with the boxes in a wrapping row. */
.staff-field-group { min-width: 0; margin: 0; padding: 0; border: 0; }
/* Matches the other field labels, which are label_tags styled by .staff-field label. */
.staff-field-group legend { padding: 0; font-size: 13px; font-weight: 700; }
.staff-field-group > div { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.staff-field-group > div label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 500; cursor: pointer; }
.staff-field.staff-field-group input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-primary); }
.staff-form-lede { margin: 14px 0 20px; max-width: 60ch; font-size: 16px; line-height: 1.6; opacity: .8; }
/* Each create form sits in its own inset panel and lays fields out in two
   columns, so each "Create new" sub-tab reads as a deliberate editor rather
   than a bare list of fields floating in the tab. Shared with the standalone
   staff-form pattern this replaced. */
.staff-form { padding: clamp(24px, 3.5vw, 44px); border: 1px solid var(--line); border-radius: 20px; background: var(--cream); }
.staff-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.staff-field { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 6px; align-content: start; }
/* Long-form and full-width controls span the whole row. */
.staff-field:has(textarea) { grid-column: 1 / -1; }
.staff-field label { font-size: 13px; font-weight: 700; }
.staff-field input, .staff-field select, .staff-field textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: white; font: inherit; color: inherit; }
.staff-field .dd-trigger { border-radius: 10px; }
/* A checkbox is not a text box: the rule above gave it the full width, a
   48px minimum height and text padding, and only the width was undone —
   which did nothing, since .staff-field is a grid and stretches its items
   across regardless. justify-self keeps it the size of a checkbox. */
.staff-field input[type="checkbox"] { width: auto; min-height: 0; padding: 0; justify-self: start; }
.staff-field input:focus, .staff-field select:focus, .staff-field textarea:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.staff-field.has-error input, .staff-field.has-error select, .staff-field.has-error textarea { border-color: #b4442f; }
.field-help { font-size: 12px; line-height: 1.5; opacity: .7; }
.field-error { font-size: 13px; font-weight: 600; color: #b4442f; }
.form-errors { margin-bottom: 20px; padding: 13px 17px; border-radius: 12px; background: #f4d7d2; font-weight: 600; }
.form-errors ul { margin: 0; padding-left: 18px; }
.staff-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 30px; }
.activity-status-confirm summary { min-height: 44px; padding: 12px 0; font-weight: 700; cursor: pointer; }
.activity-status-confirm p { line-height: 1.6; }
.activity-editor .form-errors { overflow-wrap: anywhere; }
.activity-editor .form-errors a { display: inline-block; min-height: 44px; padding-block: 10px; }
.activity-editor .form-errors:focus { outline: 3px solid var(--ink); outline-offset: 3px; }

@media (max-width: 680px) {
  .staff-fields, .quick-create-panel .staff-fields { grid-template-columns: minmax(0, 1fr); }
  .panel-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* ── Management table inline actions ──────────────────────────── */
/* Button sizing, colour, hover and focus-visible are shared with
   .review-actions above — see that block's comment. */
.inline-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.status-closed { opacity: .4; }
.blackout-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.blackout-row form { margin: 0; }
.inline-form .staff-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }

/* ── Confirmation modal ───────────────────────────────────────── */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-modal.is-hidden { display: none; }
.confirm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 55, 45, .55);
}
.confirm-modal-panel {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: clamp(26px, 4vw, 38px);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(23, 55, 45, .24);
}
.confirm-modal-panel .section-label { margin-bottom: 18px; }
.confirm-modal-panel h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.05; }
.confirm-modal-summary {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.55;
  opacity: .85;
}
.confirm-modal-meta {
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.confirm-modal-meta div { display: flex; gap: 10px; }
/* A batch decision has no single submission date, so the modal hides this
   block; the rule above would otherwise out-rank the browser's own
   [hidden] and leave the label and its rule on screen. */
.confirm-modal-meta[hidden] { display: none; }
.confirm-modal-meta dt { font-weight: 700; }
.confirm-modal-meta dd { margin: 0; }
.confirm-modal-consequence {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--lime);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.confirm-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 28px;
}
.confirm-modal-actions .button { min-width: auto; }
.confirm-modal-panel:focus { outline: none; }
.confirm-modal-panel:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }


/* ── Staff Payments page ───────────────────────────────────────────────
   Filters are a plain GET form (works without JavaScript; every filtered
   view is a shareable URL). Bars are single-hue: length is the only encoding,
   and every bar sits beside its printed value. */
.report-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 16px; margin-top: 30px; padding: 20px 22px; border-radius: 16px; background: var(--paper); box-shadow: 0 8px 35px rgba(23,55,45,.05); }
.report-filters .staff-field { flex: 0 1 160px; min-width: 140px; }
.report-filters .report-field-wide { flex: 1 1 240px; }
.report-filters .staff-field:has(select) { flex-basis: 16rem; min-width: min(100%, 16rem); }
.report-filters .staff-field:has(input[type="date"]) { flex-basis: 12rem; min-width: min(100%, 12rem); }
.report-filters-actions { display: flex; align-items: center; gap: 16px; padding-bottom: 2px; }
.report-filters .button { min-width: 0; padding: 11px 20px; }
.report-filters-hint { flex-basis: 100%; margin: 0; font-size: 12px; opacity: .6; }
@media (max-width: 380px) {
  .dashboard-main { padding-inline: 8px; }
  .dashboard-panel, .report-filters { padding-inline: 8px; }
}
.report-errors { flex-basis: 100%; margin: 0; color: #a2301b; font-size: 13px; font-weight: 700; }
.report-period { margin: 16px 0 0; font-size: 14px; opacity: .8; }
.dashboard-metrics article small { margin-top: 6px; font-size: 12px; opacity: .7; }
.report-contact a { display: block; margin-top: 3px; font-size: 12px; text-underline-offset: 3px; }
.report-when { display: block; margin-top: 6px; }
.report-muted { opacity: .6; }
.report-amount { min-width: 160px; font-variant-numeric: tabular-nums; }
.report-bar { display: block; height: 6px; margin-top: 7px; border-radius: 999px; background: var(--brand-primary); }
.report-top { margin-left: 8px; vertical-align: middle; }
.report-subtotal td { border-top: 1px solid var(--ink); }
.report-pagination { display: flex; align-items: center; gap: 18px; margin-top: 16px; font-size: 13px; font-weight: 700; }
.report-pagination a { text-underline-offset: 4px; }
.report-nowrap { white-space: nowrap; }
.report-break { overflow-wrap: anywhere; }

/* Blackout form on the Facilities page: it sits inside a panel, so no card of its own. */
.blackout-form { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 16px; margin: 0 0 24px; }
.blackout-form .staff-field { flex: 0 1 180px; min-width: 150px; }
.blackout-form .report-field-wide { flex: 1 1 240px; }

.payment-verification .booking-form { max-width: 840px; margin-top: 28px; }
.payment-verification > .payment-facts { margin-top: 0; }
.payment-verification > p { max-width: 72ch; line-height: 1.65; }
.payment-verification .form-field :is(input, select, textarea):focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
.payment-verification .form-field :is(input:not([type="checkbox"]), select, textarea) { width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font: inherit; }
.payment-verification h2 { margin-top: 32px; }
.payment-receipts { padding-left: 22px; line-height: 1.8; overflow-wrap: anywhere; }
.refund-review-row { display: grid; gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.booking-review-details { max-width: 38ch; white-space: normal; }
.booking-review-details summary, .booking-cancel-confirm summary { min-height: 44px; padding: 12px 0; cursor: pointer; text-decoration: underline; }
.booking-review-details p, .booking-cancel-confirm p { line-height: 1.6; }

/* ── Insights ──────────────────────────────────────────────────────────────
   Weekly and monthly review page (docs/INSIGHTS_DECISIONS.md). Chart geometry
   comes from community/charts.py; these rules only colour and lay it out. */
.insights {
  --i-muted: #56695f;
  --i-track: #e3e9dc;
  --i-sage: var(--blue);
  --i-sage-strong: var(--brand-sage);
  --i-warn: #8a7426;
  /* Text-only variants. --i-warn and --brand-primary are also chart fills and
     strokes, where 3:1 is enough (1.4.11), but as 12px bold text on the tinted
     pills below they measured 3.33:1 and 3.63:1 against 4.5:1 (1.4.3). Darkened
     here so the pills pass without changing any chart geometry or colour. */
  --i-warn-text: #705e1f;
  --i-good-text: #187426;
  --i-bad: #a2301b;
  --i-bad-soft: #f1d9d2;
  --i-good-soft: #dce8d1;
  --i-line: rgba(23, 55, 45, .14);
  --i-line-strong: rgba(23, 55, 45, .3);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
}
.insights .dashboard-back { margin-bottom: -12px; }
.insights-header { flex-wrap: wrap; }
.insights-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.insights-actions .button { min-width: 0; padding: 11px 18px; }
.insights-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: -10px; }
.insights-segmented { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--i-line); }
.insights-segmented a { padding: 7px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--i-muted); text-decoration: none; }
.insights-segmented a:hover { color: var(--ink); }
.insights-segmented a[aria-current="page"] { background: var(--ink); color: white; }
.insights-segmented a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.insights-period { display: flex; align-items: center; flex: 0 1 17rem; min-width: 0; max-width: 100%; gap: 8px; }
.insights-period select { max-width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; font: inherit; color: inherit; }
.insights-period .dd-field { flex: 1 1 auto; min-width: 0; }
.insights-period .dd-trigger { min-height: 40px; padding: 8px 14px; border-radius: 999px; }
.insights-period .dd-trigger { min-width: 0; }
.insights-period .button { min-width: 0; padding: 10px 18px; }
.insights-running { flex: 1 1 16rem; margin: 0; font-size: 13px; color: var(--i-muted); }

.insights-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.insights-tiles:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insights-tile { min-width: 0; overflow: hidden; padding: 18px 20px; display: grid; gap: 6px; align-content: start; border-radius: 14px; background: var(--paper); box-shadow: 0 8px 35px rgba(23,55,45,.05); }
.insights-tile-label { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--i-muted); }
.insights-tile strong { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.insights-tile strong small { font-size: 19px; font-weight: 700; }
.insights-tile p { margin: 0; font-size: 13px; color: var(--i-muted); }
/* Narrow tiles put the sparkline under the change chip rather than past the card edge. */
.insights-tile-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; }
.insights-delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--i-track); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.insights-delta.is-good { background: var(--i-good-soft); color: var(--i-good-text); }
.insights-delta.is-warn { background: var(--yellow); color: var(--i-warn-text); }
.insights-lock { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--i-muted); }
.insights-spark { width: 112px; height: 32px; flex-shrink: 0; overflow: visible; }
.insights-spark-line { fill: none; stroke: var(--brand-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.insights-spark-area { fill: var(--brand-primary); fill-opacity: .12; }
.insights-spark-end { fill: var(--brand-primary); }
.insights-spark-bar { fill: var(--i-sage); }
.insights-spark-bar.is-last { fill: var(--i-warn); }

.insights-block { display: grid; gap: 12px; }
.insights-block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.insights-block-head h2 { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.insights-block-head p { margin: 0; font-size: 14px; color: var(--i-muted); }
.insights-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.insights-card { min-width: 0; padding: 20px 22px 22px; display: grid; gap: 16px; align-content: start; border-radius: 14px; background: var(--paper); box-shadow: 0 8px 35px rgba(23,55,45,.05); }
.insights-s12 { grid-column: span 12; }
.insights-s7 { grid-column: span 7; }
.insights-s5 { grid-column: span 5; }
.insights-card-head { display: grid; gap: 2px; }
.insights-card-head h3 { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.insights-card-head p, .insights-foot, .insights-empty { margin: 0; font-size: 13px; color: var(--i-muted); }
.insights-foot { padding-top: 12px; border-top: 1px solid var(--i-line); }
.insights-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--i-muted); }
.insights-legend i, .insights-kv i, .insights-outcomes i, .insights-will-show i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.insights-legend span > i + i { margin-left: -4px; }
.swatch-accent { background: var(--brand-primary); }
.swatch-sage { background: var(--i-sage); }
.swatch-sage-strong { background: var(--i-sage-strong); }
.swatch-ink { background: var(--ink); }
.swatch-track { background: var(--i-track); }
.swatch-bad { background: var(--i-bad-soft); box-shadow: inset 0 0 0 1px var(--i-bad); }
.swatch-closed { background: repeating-linear-gradient(135deg, var(--i-line-strong) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--i-line); }
.swatch-ring { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.swatch-ring-sage { background: var(--paper); box-shadow: inset 0 0 0 2px var(--i-sage-strong); }
.insights-legend i.swatch-round { border-radius: 50%; }

/* Bookings by facility */
.insights-hbars { display: grid; gap: 12px; }
.insights-hbar-row, .insights-axis { display: grid; grid-template-columns: 150px minmax(0, 1fr) 76px; gap: 14px; align-items: center; }
.insights-hbar-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.insights-track { height: 20px; display: flex; overflow: hidden; border-radius: 5px; background-color: var(--i-track); background-image: linear-gradient(to right, var(--i-line-strong) 1px, transparent 1px); background-size: 25% 100%; }
.seg-accent { background: var(--brand-primary); }
.seg-sage { background: var(--i-sage); }
.insights-hbar-value { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; font-size: 12px; color: var(--i-muted); font-variant-numeric: tabular-nums; }
.insights-hbar-value b { font-family: var(--display); font-size: 17px; color: var(--ink); }
.insights-never { height: 20px; display: flex; align-items: center; }
.insights-pill-warn { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 999px; background: var(--yellow); color: var(--i-warn-text); font-size: 12px; font-weight: 700; white-space: nowrap; }
.insights-pill-warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.insights-scale { position: relative; height: 16px; font-size: 11px; color: var(--i-muted); font-variant-numeric: tabular-nums; }
.insights-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.insights-scale span:first-child { transform: none; }
.insights-scale span:last-child { transform: translateX(-100%); }

/* SVG charts */
.insights-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.insights-chart .gl { stroke: var(--i-line); stroke-width: 1; }
.insights-chart .gl-base { stroke: var(--i-line-strong); stroke-width: 1; }
/* SVG text is set a little large: charts scale down to fit half-width cards. */
.insights-chart .ax { fill: var(--i-muted); font-size: 13px; font-family: var(--body); }
.insights-chart .ax-year { fill: var(--i-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; font-family: var(--body); }
.insights-chart .ax-title { fill: var(--i-muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; font-family: var(--body); }
/* A paper-coloured outline keeps labels legible where they cross marks. */
.insights-chart .val, .insights-chart .val-soft, .insights-chart .ref-label, .insights-chart .anno,
.insights-chart .wf-val-up, .insights-chart .wf-val-down { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.insights-chart .area { fill: var(--brand-primary); fill-opacity: .12; }
.insights-chart .line { fill: none; stroke: var(--brand-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.insights-chart .dot-prev { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.insights-chart .dot-end { fill: var(--brand-primary); }
.insights-chart .val { fill: var(--ink); font-size: 15px; font-weight: 800; font-family: var(--display); }
.insights-chart .val-soft { fill: var(--i-muted); font-size: 13px; font-weight: 600; font-family: var(--body); }
.insights-chart .bar { fill: var(--i-sage); }
.insights-chart .bar-previous { fill: var(--i-sage-strong); }
.insights-chart .bar-now { fill: var(--brand-primary); }
.insights-chart .pt-cc { fill: var(--ink); fill-opacity: .88; }
.insights-chart .pt-rn { fill: var(--paper); stroke: var(--i-sage-strong); stroke-width: 2.5; }
.insights-chart .ref { fill: none; stroke: var(--i-line-strong); stroke-width: 1.5; stroke-dasharray: 5 5; }
.insights-chart .ref-label { fill: var(--i-muted); font-size: 13px; font-style: italic; font-family: var(--body); }
.insights-chart .anno { fill: var(--i-warn); font-size: 13px; font-weight: 700; font-family: var(--body); }
.insights-chart .slope-up { stroke: var(--brand-primary); stroke-width: 2.5; }
.insights-chart .slope-down { stroke: var(--i-warn); stroke-width: 2.5; }
.insights-chart .slope-flat { stroke: var(--i-line-strong); stroke-width: 2; }
.insights-chart .dot-up { fill: var(--brand-primary); }
.insights-chart .dot-down { fill: var(--i-warn); }
.insights-chart .dot-flat { fill: var(--i-muted); }
.insights-chart .slope-label { fill: var(--ink); font-size: 14px; font-weight: 600; font-family: var(--body); }
.insights-chart .slope-label .v { font-weight: 800; font-family: var(--display); }
.insights-chart .slope-head { fill: var(--i-muted); font-size: 13px; font-weight: 700; letter-spacing: .08em; font-family: var(--body); }
.insights-chart .wf-previous { fill: var(--i-sage-strong); }
.insights-chart .wf-total { fill: var(--brand-primary); }
.insights-chart .wf-up { fill: var(--brand-primary); fill-opacity: .5; }
.insights-chart .wf-down { fill: var(--i-bad); fill-opacity: .7; }
.insights-chart .wf-flat { fill: var(--i-line-strong); }
.insights-chart .wf-link { stroke: var(--i-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.insights-chart .wf-val-up { fill: var(--brand-primary); font-size: 15px; font-weight: 800; font-family: var(--display); }
.insights-chart .wf-val-down { fill: var(--i-bad); font-size: 15px; font-weight: 800; font-family: var(--display); }
.insights-chart .wf-break { fill: none; stroke: var(--i-muted); stroke-width: 1.5; }

/* Calendar strip */
.insights-cal-wrap, .insights-heat-wrap { overflow-x: auto; }
.insights-cal { display: grid; grid-template-columns: 132px repeat(var(--days), minmax(15px, 1fr)) 48px; gap: 3px; min-width: calc(190px + var(--days) * 19px); align-items: center; font-variant-numeric: tabular-nums; }
.insights-cal .dn { font-size: 10px; line-height: 1.15; text-align: center; color: var(--i-muted); }
.insights-cal .dn.we { color: var(--ink); font-weight: 700; }
.insights-cal .dn-total { text-align: right; }
.insights-cal .fn { padding-right: 6px; font-size: 13px; font-weight: 600; line-height: 1.2; }
.insights-cal .tot { text-align: right; }
.insights-cal .tot b { font-family: var(--display); font-size: 15px; }
.insights-cal i { display: block; height: 24px; border-radius: 3px; background: var(--i-track); }
.insights-cal i.booked { background: var(--brand-primary); }
.insights-cal i.closed { background: repeating-linear-gradient(135deg, var(--i-line-strong) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--i-line); }

/* Heatmap */
.insights-heat { display: grid; gap: 3px; min-width: 330px; font-variant-numeric: tabular-nums; }
.insights-heat-row { display: grid; grid-template-columns: 40px repeat(var(--blocks), minmax(36px, 1fr)); gap: 3px; }
.insights-heat .h { padding-bottom: 2px; font-size: 11px; text-align: center; color: var(--i-muted); }
.insights-heat .d { display: flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--i-muted); }
.insights-heat .c { height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 12px; font-weight: 600; }
.hm0 { background: var(--i-track); color: var(--i-muted); }
.hm1 { background: #cfe0d8; color: var(--ink); }
.hm2 { background: var(--i-sage); color: var(--ink); }
.hm3 { background: var(--i-sage-strong); color: white; }
.hm4 { background: var(--ink); color: white; }

/* Donut and gauge */
/* Ring and legend side by side when the card is wide, stacked when it isn't. */
.insights-donut-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 22px; }
.insights-donut { flex: 0 0 150px; width: 150px; height: auto; display: block; }
.insights-donut-wrap .insights-outcomes { flex: 1 1 220px; }
.insights-donut circle, .insights-gauge path { fill: none; stroke-width: 22; }
.insights .ring-bg, .insights .g-bg { stroke: var(--i-track); }
.insights .ring-num { fill: var(--ink); font-family: var(--display); font-size: 30px; font-weight: 800; }
.insights .ring-sub { fill: var(--i-muted); font-size: 11px; font-family: var(--body); }
.insights .o-confirmed { stroke: var(--brand-primary); background: var(--brand-primary); }
.insights .o-in_progress { stroke: var(--i-sage); background: var(--i-sage); }
.insights .o-lapsed { stroke: var(--i-bad); background: var(--i-bad); }
.insights .o-rejected { stroke: var(--i-warn); background: var(--i-warn); }
.insights .o-cancelled { stroke: var(--i-sage-strong); background: var(--i-sage-strong); }
.insights-outcomes { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.insights-outcomes li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 40px; gap: 8px; align-items: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.insights-outcomes b { text-align: right; }
.insights-outcomes em { font-size: 13px; font-style: normal; text-align: right; color: var(--i-muted); }
.insights-gauge { width: 100%; max-width: 300px; height: auto; display: block; justify-self: center; }
.insights .g-paid { stroke: var(--brand-primary); }
.insights .g-open { stroke: #c9a943; }
.insights .g-lapsed { stroke: var(--i-bad); }
.insights .g-closed { stroke: var(--i-sage); }
.g-swatch-paid { background: var(--brand-primary); }
.g-swatch-open { background: #c9a943; }
.g-swatch-lapsed { background: var(--i-bad); }
.g-swatch-closed { background: var(--i-sage); }

/* Attendance, not recorded yet */
.insights-pending { padding: 22px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 32px; align-items: center; border-radius: 14px; background: var(--paper); }
.insights-pending h3 { margin: 0 0 6px; font-family: var(--display); font-size: 19px; }
.insights-pending p { margin: 0; max-width: 60ch; font-size: 15px; color: var(--i-muted); }
.insights-step { display: inline-flex; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; background: var(--i-good-soft); font-size: 12px; font-weight: 700; }
.insights-will-show ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }

/* CC vs RN split */
.insights-split { display: grid; gap: 14px; }
.insights-split-top { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 13px; color: var(--i-muted); }
.insights-split-top b { color: var(--ink); }
.insights-split-bar, .insights-stack { height: 32px; display: flex; overflow: hidden; border-radius: 6px; background: var(--i-track); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.insights-split-bar span, .insights-stack span { min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.insights-split-bar .cc { padding-left: 10px; background: var(--ink); color: white; }
.insights-split-bar .rn { justify-content: flex-end; padding-right: 10px; background: var(--i-sage); color: var(--ink); }
.insights-split-bar .none { padding-left: 10px; color: var(--i-muted); font-weight: 600; }
.insights-rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.insights-rate { display: grid; gap: 5px; align-content: start; }
.insights-rate span { font-size: 12px; color: var(--i-muted); }
.insights-rate b { font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.insights-mini { height: 8px; overflow: hidden; border-radius: 4px; background: var(--i-track); }
.insights-mini i { display: block; height: 100%; }
.fill-ink { background: var(--ink); }
.fill-sage { background: var(--i-sage-strong); }
.insights-stack span { justify-content: center; }
.insights-stack .w-cc, .insights-stack .place-cc_counter { background: var(--ink); color: white; }
.insights-stack .w-zone, .insights-stack .place-zone_centre { background: var(--i-sage-strong); color: white; }
.insights-stack .place-notice_board_qr { background: var(--i-sage); color: var(--ink); }
.insights-stack .w-none, .insights-stack .place-none { background: var(--i-track); color: var(--i-muted); }
.insights-kv i.place-cc_counter { background: var(--ink); }
.insights-kv i.place-zone_centre { background: var(--i-sage-strong); }
.insights-kv i.place-notice_board_qr { background: var(--i-sage); }
.insights-kv i.place-none { background: var(--i-track); box-shadow: inset 0 0 0 1px var(--i-line-strong); }
.insights-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 16px; }
.insights-kv div { display: grid; gap: 1px; }
.insights-kv span { display: flex; align-items: center; font-size: 12px; color: var(--i-muted); }
.insights-kv b { font-family: var(--display); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.insights-kv b small { margin-left: 4px; font-family: var(--body); font-size: 12px; font-weight: 500; color: var(--i-muted); }

/* Diverging category bars */
/* By category: one bar per category, label on the left, the Community Club and
   zone RN parts side by side in one track with a 2px gap, the total at the bar's
   end and the split in words beside it, so nothing depends on colour alone. */
.insights-catbars { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.cb-row { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) 2rem 7.5rem; gap: 12px; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.cb-label { font-weight: 600; line-height: 1.25; }
.cb-track { display: flex; align-items: center; gap: 2px; min-width: 0; }
.cb-track i { display: block; height: 16px; flex: 0 1 auto; min-width: 4px; }
.cb-track i:first-child { border-radius: 4px 0 0 4px; }
.cb-track i:last-of-type { border-radius: 0 4px 4px 0; }
.cb-track i:only-of-type { border-radius: 4px; }
.cb-track i.cc { background: var(--ink); }
.cb-track i.rn { background: var(--i-sage-strong); }
.cb-total { font-weight: 700; }
.cb-split { color: var(--i-muted); white-space: nowrap; }
.swatch-ink { background: var(--ink); }

/* Zone table */
.insights-table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.insights-table th { padding: 0 10px 8px 0; border-bottom: 1px solid var(--i-line-strong); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; color: var(--i-muted); }
.insights-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--i-line); }
.insights-table .r { text-align: right; }
.insights-table .fill { width: 40%; }
.insights-fillbar { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; align-items: center; }
.insights-fillbar span { height: 10px; overflow: hidden; border-radius: 3px; background: var(--i-track); }
.insights-fillbar i { display: block; height: 100%; background: var(--i-sage-strong); }
.insights-fillbar.is-low i { background: var(--i-warn); }
.insights-fillbar b { font-weight: 600; text-align: right; }

.insights-definitions dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.insights-definitions dl div { padding: 12px 0; border-top: 1px solid var(--i-line); }
.insights-definitions dt { font-size: 14px; font-weight: 700; }
.insights-definitions dd { margin: 2px 0 0; font-size: 14px; color: var(--i-muted); }

/* Dashboard: this week at a glance */
.insights-summary { margin-top: 34px; display: grid; gap: 10px; }
.insights-summary-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.insights-summary-head h2 { font-family: var(--display); font-size: 22px; }
.insights-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.insights-summary-cell { padding: 14px 16px; display: grid; gap: 2px; align-content: start; border-radius: 12px; background: var(--paper); color: inherit; text-decoration: none; box-shadow: 0 8px 35px rgba(23,55,45,.05); transition: box-shadow .15s ease; }
.insights-summary-cell:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.insights-summary-cell:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.insights-summary-cell > span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.insights-summary-cell strong { font-family: var(--display); font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.insights-summary-cell strong small { font-size: 15px; }
.insights-summary-cell > small { font-size: 12px; opacity: .7; }
.insights-summary-cell.is-warn { background: #f8e7ad; }

@media (max-width: 1180px) {
  .insights-s7, .insights-s5 { grid-column: span 12; }
  .insights-tiles, .insights-tiles:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .insights-tiles, .insights-tiles:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .insights-hbar-row, .insights-axis { grid-template-columns: 104px minmax(0, 1fr) 56px; gap: 10px; }
  .insights-hbar-value span { display: none; }
  .insights-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .insights-outcomes { width: 100%; }
  .insights-pending, .insights-definitions dl, .insights-rates { grid-template-columns: 1fr; }
  .cb-row { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 6px; }
  .cb-track { grid-column: 1 / -1; grid-row: 2; }
  .insights-tile strong { font-size: 34px; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: white; }
  .skip-link, .staff-topbar, .staff-drawer-backdrop, .dashboard-sidebar, .dashboard-messages,
  .insights .dashboard-back, .insights-actions, .insights-segmented, .insights-period { display: none !important; }
  .dashboard-shell { display: block; min-height: 0; background: white; }
  .dashboard-main { padding: 0; overflow: visible; }
  .insights { gap: 18px; }
  .insights-tile, .insights-card, .insights-pending { box-shadow: none; border: 1px solid #d9e0d4; break-inside: avoid; }
  .insights-block-head { break-after: avoid; }
  .insights-cal { min-width: 0; }
}