/* TOKENS — every colour, size and space in this file comes from here.
   Aesthetic: warm neutrals + one orange (#ED7D4B / #D8D4D0 / #443F3C),
   Satoshi, soft borderless cards with large radii, pills and round icons.
   Light values first; dark values under prefers-color-scheme. The layout
   mirrors the scheme into data-bs-theme so Bootstrap components follow. */
:root {
    color-scheme: light dark;

    --font-display: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

    /* Type scale */
    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.9375rem;
    --text-base: 1.0625rem;
    --text-lg: 1.3125rem;
    --text-xl: 1.625rem;
    --text-2xl: 2.25rem;
    --text-display: clamp(2.25rem, 4.6vw, 3.6rem);
    --leading-tight: 1.05;
    --leading-body: 1.6;

    /* Palette */
    --brand: #ED7D4B;          /* surfaces, shapes; text on it is --color-ink (5.4:1) */
    --brand-strong: #A8461A;   /* fills that carry white text (5.9:1) */
    --brand-text: #A04318;     /* orange text on light surfaces (≥ 5.3:1 on bg, tints and cards) */
    --sand: #D8D4D0;
    --charcoal: #443F3C;
    --color-ink: #2B2725;

    /* Colour roles */
    --color-bg: #EFECE9;
    --color-bg-surface: #FAF9F7;
    --color-bg-elevated: #E6E2DE;
    --color-nav-bg: rgba(239,236,233,0.88);
    --color-border: rgba(68,63,60,0.10);
    --color-border-strong: rgba(68,63,60,0.22);
    --color-text: #2B2725;
    --color-text-muted: #5F5853;   /* ≥ 5:1 on every light surface, pills included */
    --color-text-faint: #5F5853;
    --color-accent: var(--brand-text);
    --color-accent-dim: rgba(237,125,75,0.14);
    --color-accent-hover: var(--brand-strong);
    --color-forecast-bg: rgba(237,125,75,0.10);
    --color-forecast-border: rgba(237,125,75,0.45);
    --color-on-scope: #FFFFFF;
    --color-panel: var(--charcoal);        /* dark panels inside light pages */
    --color-on-panel: #F4F1EE;

    /* Space */
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-smd: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.75rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;

    /* Shape, depth, motion */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 36px;
    --radius-pill: 999px;
    --border-accent: 3px;
    --shadow-card: 0 1px 2px rgba(43,39,37,0.04), 0 8px 24px rgba(43,39,37,0.05);
    --shadow-hover: 0 2px 4px rgba(43,39,37,0.06), 0 14px 36px rgba(43,39,37,0.10);
    --transition: 0.2s ease;
    --focus-ring: 2px solid var(--brand);
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand-text: #ED7D4B;
        --color-bg: #2A2624;
        --color-bg-surface: #36312E;
        --color-bg-elevated: #443F3C;
        --color-nav-bg: rgba(42,38,36,0.88);
        --color-border: rgba(244,241,238,0.08);
        --color-border-strong: rgba(244,241,238,0.20);
        --color-text: #F4F1EE;
        --color-text-muted: #BDB5AE;
        --color-text-faint: #BDB5AE; /* ≥ 5:1 on every dark surface, pills included */
        --color-accent-dim: rgba(237,125,75,0.18);
        --color-accent-hover: #F39A70;
        --color-forecast-bg: rgba(237,125,75,0.12);
        --color-panel: #1F1C1A;
        --shadow-card: 0 1px 2px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.25);
        --shadow-hover: 0 2px 4px rgba(0,0,0,0.3), 0 14px 36px rgba(0,0,0,0.35);
    }
}

/* SCOPES — what a holiday means, in the brand palette:
   national = sand (common to everyone), regional = charcoal,
   local = orange (what makes each municipality different), bridge = orange ring.
   Each scope gives a fill (--card-accent), its text (--card-on), a tint for
   backgrounds and a text shade for use on the page. */
:root {
    --scope-national: var(--sand);
    --scope-national-on: var(--color-ink);
    --scope-regional: var(--charcoal);
    --scope-regional-on: #FFFFFF;
    --scope-local: var(--brand-strong);
    --scope-local-on: #FFFFFF;
    --scope-forecast: var(--brand);
    --scope-national-tint: color-mix(in srgb, var(--sand) 45%, var(--color-bg-surface));
    --scope-regional-tint: color-mix(in srgb, var(--charcoal) 9%, var(--color-bg-surface));
    --scope-local-tint: color-mix(in srgb, var(--brand) 14%, var(--color-bg-surface));
    --scope-national-text: var(--color-text-muted);
    --scope-regional-text: var(--charcoal);
    --scope-local-text: var(--brand-text);
}
@media (prefers-color-scheme: dark) {
    :root {
        --scope-national: #5A5450;
        --scope-national-on: #F4F1EE;
        --scope-regional: var(--sand);
        --scope-regional-on: var(--color-ink);
        --scope-local: var(--brand);
        --scope-local-on: var(--color-ink);
        --scope-national-tint: color-mix(in srgb, #5A5450 35%, var(--color-bg-surface));
        --scope-regional-tint: color-mix(in srgb, var(--sand) 10%, var(--color-bg-surface));
        --scope-local-tint: color-mix(in srgb, var(--brand) 16%, var(--color-bg-surface));
        --scope-regional-text: var(--sand);
    }
}
.pe-scope-national { --card-accent: var(--scope-national); --card-on: var(--scope-national-on); --card-tint: var(--scope-national-tint); --card-text: var(--scope-national-text); }
.pe-scope-regional { --card-accent: var(--scope-regional); --card-on: var(--scope-regional-on); --card-tint: var(--scope-regional-tint); --card-text: var(--scope-regional-text); }
.pe-scope-local    { --card-accent: var(--scope-local); --card-on: var(--scope-local-on); --card-tint: var(--scope-local-tint); --card-text: var(--scope-local-text); }

/* BOOTSTRAP — Bootstrap 6 components read --bs-* tokens: point them at ours
   so forms and buttons follow the site palette in both themes. */
:root {
    --bs-body-font-family: var(--font-body);
    --bs-bg-body: var(--color-bg);
    --bs-fg-body: var(--color-text);
    --bs-bg-1: var(--color-bg-surface);
    --bs-bg-2: var(--color-bg-elevated);
    --bs-fg-2: var(--color-text-muted);
    --bs-fg-3: var(--color-text-faint);
    --bs-border-color: var(--color-border-strong);
    --bs-box-shadow-inset: none;
    --bs-btn-input-border-radius: var(--radius-pill);
    --bs-btn-input-min-height: 2.875rem;
    --bs-btn-input-padding-x: 1.125rem;
    --bs-primary-bg: var(--brand-strong);
    --bs-primary-fg: var(--brand-text);
    --bs-primary-border: var(--brand-strong);
    --bs-primary-contrast: #FFFFFF;
    --bs-primary-focus-ring: color-mix(in srgb, var(--brand) 45%, transparent);
    --bs-secondary-fg: var(--color-text);
    --bs-secondary-border: var(--color-border-strong);
    --bs-secondary-bg: var(--color-bg-elevated);
    --bs-secondary-contrast: var(--color-text);
}

/* BASE */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: var(--leading-body);
    min-height: 100vh;
}
a { color: var(--color-accent); text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent-hover); }
:where(a, button, input, select, [tabindex]):focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.text-muted { color: var(--color-text-muted) !important; }
/* Visible to screen readers only (Bootstrap 6 alpha ships no equivalent). */
.pe-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.btn { border-radius: var(--radius-pill); font-weight: 500; }

/* NAVBAR — translucent bar with pill links */
.pe-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: var(--space-smd) 0;
    background-color: var(--color-nav-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.pe-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text) !important;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.pe-navbar .navbar-brand::before {
    content: "";
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-sm);
    background: url("/favicon.svg") center / cover no-repeat;
}
.pe-navbar .navbar-brand span { color: var(--brand-text); font-weight: 700; }
.pe-navbar .nav-link {
    color: var(--color-text) !important;
    font-size: var(--text-md);
    font-weight: 500;
    padding: var(--space-sm) var(--space-md) !important;
    border-radius: var(--radius-pill);
    background: var(--color-bg-surface);
    transition: color var(--transition), background-color var(--transition);
}
.pe-navbar .nav-link:hover { color: var(--color-on-panel) !important; background-color: var(--color-panel); }
.pe-lang-switch { background: var(--color-bg-surface); border-radius: var(--radius-pill); padding: var(--space-xs); }
.pe-lang-switch a { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 500; padding: var(--space-xs) var(--space-smd); border-radius: var(--radius-pill); }
.pe-lang-switch a:hover { color: var(--color-text); background: var(--color-bg-elevated); }
.pe-lang-switch a[aria-current] { color: var(--color-on-panel); background: var(--color-panel); }

/* BREADCRUMB — Bootstrap 6 alpha no longer draws the separator: drawn here. */
.pe-breadcrumb { display: flex; flex-wrap: wrap; list-style: none; background: transparent; padding: var(--space-md) 0 0; margin-bottom: 0; }
.pe-breadcrumb .breadcrumb-item { font-size: var(--text-sm); color: var(--color-text-faint); }
.pe-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 var(--space-sm); color: var(--color-text-faint); }
.pe-breadcrumb .breadcrumb-item a { color: var(--color-text-muted); text-decoration: none; }
.pe-breadcrumb .breadcrumb-item a:hover { color: var(--color-accent); }
.pe-breadcrumb .breadcrumb-item.active { color: var(--color-text-muted); }

/* HERO — large soft card; the home uses the orange brand variant */
.pe-hero {
    position: relative;
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    margin: var(--space-md) 0 var(--space-lg);
    border-radius: var(--radius-xl);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
@media (max-width: 575px) { .pe-hero { padding: var(--space-lg) var(--space-lg) var(--space-md); } }
.pe-hero-eyebrow {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-pill);
    padding: var(--space-xs) var(--space-smd);
    margin-bottom: var(--space-md);
}
.pe-hero-title {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 500;
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-md);
    letter-spacing: -0.035em;
    max-width: 22ch;
}
.pe-hero-subtitle { font-size: var(--text-base); color: var(--color-text-muted); max-width: 60ch; margin-bottom: 0; }
.pe-hero--brand {
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(255,255,255,0.22) 0%, transparent 60%),
        var(--brand);
    box-shadow: none;
}
.pe-hero--brand::after {
    /* The house mark, large and faint, like the reference brand card. */
    content: "";
    position: absolute;
    right: -2rem;
    bottom: -3rem;
    width: 16rem;
    height: 16rem;
    background: url("/favicon.svg") center / contain no-repeat;
    opacity: 0.12;
    pointer-events: none;
}
.pe-hero--brand .pe-hero-title,
.pe-hero--brand .pe-hero-subtitle { color: var(--color-ink); position: relative; }
.pe-hero--brand .pe-hero-title { font-weight: 700; }
.pe-hero--brand .pe-hero-subtitle { font-weight: 500; }

.pe-section-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: var(--space-xl) 0 var(--space-md);
}

/* PROSE — the generated paragraphs, in a soft card */
.pe-about {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-xs) var(--space-xl) var(--space-lg);
    margin-top: var(--space-xl);
    box-shadow: var(--shadow-card);
}
@media (max-width: 575px) { .pe-about { padding: var(--space-xs) var(--space-lg) var(--space-md); } }
.pe-about p { max-width: 72ch; color: var(--color-text); }

/* DISCLAIMER (forecast / sample data / notices) */
.pe-disclaimer {
    background: var(--color-forecast-bg);
    border: 1px solid var(--color-forecast-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
.pe-disclaimer-icon { color: var(--brand-text); flex-shrink: 0; }
.pe-disclaimer-text { font-size: var(--text-md); color: var(--color-text); margin: 0; }
.pe-disclaimer-text strong { color: var(--brand-text); }

/* CARDS — region and year links on the home: soft tiles with a round icon */
.pe-grid-regions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-sm);
}
.pe-card-region {
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    padding: var(--space-smd) var(--space-md) var(--space-smd) var(--space-smd);
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-smd);
    font-size: var(--text-md);
    font-weight: 500;
    box-shadow: var(--shadow-card);
    transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.pe-card-region i {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-elevated);
    color: var(--color-text);
    font-size: var(--text-md);
    transition: background-color var(--transition), color var(--transition);
}
.pe-card-region:hover { background: var(--color-panel); color: var(--color-on-panel); box-shadow: var(--shadow-hover); }
.pe-card-region:hover i { background: var(--brand); color: var(--color-ink); }

/* STATS — big numbers; the first is the orange highlight, "next" a dark panel */
.pe-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-lg); }
.pe-stat {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    box-shadow: var(--shadow-card);
}
.pe-stat-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.04em; line-height: var(--leading-tight); color: var(--color-text); }
.pe-stat-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.pe-stat:first-child { background: var(--brand); box-shadow: none; }
.pe-stat:first-child .pe-stat-value,
.pe-stat:first-child .pe-stat-label { color: var(--color-ink); }
.pe-stat:first-child .pe-stat-label { font-weight: 500; }
.pe-stat.pe-next { background: var(--color-panel); box-shadow: none; color: var(--color-on-panel); }
.pe-stat.pe-next .pe-stat-label { color: color-mix(in srgb, var(--color-on-panel) 75%, transparent); }

/* ACTION BUTTONS (ics, Google Calendar, print, planner link) */
.btn-outline { background: var(--color-bg-surface); border-color: transparent; box-shadow: var(--shadow-card); }
.btn-outline:hover { background: var(--color-panel); border-color: transparent; color: var(--color-on-panel); }

/* HOLIDAY TABLE — a soft card, hairline rows, pill badges */
.pe-holidays {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-md);
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.pe-holidays th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); font-weight: 600; text-align: left; padding: var(--space-smd) var(--space-md); }
.pe-holidays td { padding: var(--space-smd) var(--space-md); border-top: 1px solid var(--color-border); vertical-align: top; }
.pe-holidays tbody tr:hover td { background: var(--card-tint, var(--color-bg-elevated)); }
.pe-holidays tbody tr.pe-scope-local td:first-child { box-shadow: inset var(--border-accent) 0 0 var(--brand); }
.pe-scope-badge { display: inline-block; font-size: var(--text-xs); font-weight: 500; padding: var(--space-2xs) var(--space-smd); border-radius: var(--radius-pill); color: var(--card-on, var(--color-on-scope)); background: var(--card-accent); }
.pe-weekend { color: var(--color-text-faint); }
.pe-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }

/* YEAR GRID — 12 months in pure HTML/CSS; holidays are filled circles */
.pe-cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-sm); }
.pe-cal-month { background: var(--color-bg-surface); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md) var(--space-md); box-shadow: var(--shadow-card); }
.pe-cal-month caption { caption-side: top; font-weight: 700; color: var(--color-text); padding: var(--space-xs) var(--space-xs) var(--space-sm); }
.pe-cal-month table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; font-size: var(--text-sm); text-align: center; }
.pe-cal-month th { color: var(--color-text-faint); font-weight: 500; padding: var(--space-2xs) 0; }
.pe-cal-month td { padding: var(--space-xs) 0; border-radius: var(--radius-pill); }
.pe-cal-month td.is-weekend { color: var(--color-text-faint); }
.pe-cal-month td.is-holiday { background: var(--card-accent); color: var(--card-on, var(--color-on-scope)); font-weight: 700; }
.pe-cal-month td.is-bridge { box-shadow: inset 0 0 0 2px var(--scope-forecast); }

/* LEGEND — what each circle colour means */
.pe-legend { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.pe-legend li { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-text-muted); background: var(--color-bg-surface); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-smd) var(--space-xs) var(--space-xs); box-shadow: var(--shadow-card); }
.pe-legend-dot { width: 1.25rem; height: 1.25rem; border-radius: var(--radius-pill); background: var(--card-accent); }
.pe-legend-dot--bridge { background: transparent; box-shadow: inset 0 0 0 2px var(--scope-forecast); }

/* LISTS OF TERRITORIES */
.pe-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-xs) var(--space-md); list-style: none; padding: 0; margin: 0; }
.pe-links a { color: var(--color-text); text-decoration: none; }
.pe-links a:hover { color: var(--color-accent); text-decoration: underline; }
.pe-links li[class*="pe-scope-"]::before {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-right: var(--space-sm);
    border-radius: var(--radius-pill);
    background: var(--card-accent);
    vertical-align: middle;
}

/* FORM — Bootstrap 6 controls on the site tokens (mapping in BOOTSTRAP above). */
.pe-form {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-card);
}
.pe-form .form-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); margin-bottom: var(--space-xs); padding-left: var(--space-sm); }
.pe-form .form-control { background: var(--color-bg); border-color: transparent; }
.pe-form .form-control:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--color-accent-dim); }
/* The pill wrapper shows focus: no second ring on the inner input. */
.pe-form .form-ghost:focus-visible { outline: none; }
.pe-form .input-group-text { background: var(--color-bg-elevated); border-color: transparent; color: var(--color-text-muted); }
.pe-form .form-text { font-size: var(--text-xs); color: var(--color-text-faint); padding-left: var(--space-sm); }
.pe-form .btn-solid { font-weight: 700; }

/* SEE ALL — panel under a child list; the rest loads on demand (js/load-more.js) */
.pe-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-panel);
    color: var(--color-on-panel);
}
.pe-more-text { display: flex; flex-direction: column; gap: var(--space-2xs); max-width: 60ch; }
.pe-more-text strong { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }
.pe-more-text span,
.pe-more noscript span { font-size: var(--text-sm); color: color-mix(in srgb, var(--color-on-panel) 80%, transparent); }
.pe-more-filter {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1 1 16rem;
    max-width: 22rem;
    background: var(--color-bg-surface);
    color: var(--color-text-muted);
    border-radius: var(--radius-pill);
    padding: var(--space-xs) var(--space-md);
}
.pe-more-filter[hidden] { display: none; }
.pe-more-filter input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--color-text); font: inherit; padding: var(--space-xs) 0; }
.pe-more-filter input:focus-visible { outline: none; }
.pe-more-filter:focus-within { box-shadow: 0 0 0 2px var(--brand); }
.pe-links li[hidden], .pe-holidays tr[hidden] { display: none; }
.pe-more-list { margin-top: var(--space-md); }

/* AUTOCOMPLETE — listbox under a place input (www/assets/js/place-autocomplete.js) */
.pe-suggest-host { position: relative; }
.pe-suggest {
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: 0;
    right: 0;
    z-index: 1050;
    list-style: none;
    margin: 0;
    padding: var(--space-xs);
    max-height: 20rem;
    overflow-y: auto;
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-hover);
}
.pe-suggest-option {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-smd);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text);
}
.pe-suggest-label { font-weight: 500; }
.pe-suggest-detail { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }
.pe-suggest-option.is-region .pe-suggest-label::after {
    content: "";
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-left: var(--space-sm);
    border-radius: var(--radius-pill);
    background: var(--brand);
    vertical-align: middle;
}
.pe-suggest-option[aria-selected="true"] { background: var(--color-panel); color: var(--color-on-panel); }
.pe-suggest-option[aria-selected="true"] .pe-suggest-detail { color: color-mix(in srgb, var(--color-on-panel) 80%, transparent); }
.pe-suggest-empty { padding: var(--space-sm) var(--space-smd); color: var(--color-text-muted); font-size: var(--text-sm); }

/* FOOTER — a dark panel, as in the reference */
.pe-footer {
    background: var(--color-panel);
    color: var(--color-on-panel);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-xl) 0;
    margin-top: var(--space-2xl);
}
.pe-footer-text { font-size: var(--text-sm); color: color-mix(in srgb, var(--color-on-panel) 75%, transparent); margin: 0 0 var(--space-xs); }
.pe-footer-text a { color: var(--color-on-panel); text-decoration: none; }
.pe-footer-text a:hover { color: var(--brand); }

@media print {
    .pe-navbar, .pe-footer, .pe-actions, .pe-lang-switch, .pe-breadcrumb { display: none !important; }
    .pe-hero, .pe-about, .pe-stat, .pe-cal-month, .pe-holidays { box-shadow: none; }
    .pe-cal-month td.is-holiday { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}