/* AB#132 design foundation. Tokens follow the approved My SeasonPool prototype's dark theme. Its light
   theme is not offered yet because page-specific rules further down still hard-code dark colours.
   Fonts are system stacks: the prototype's web fonts would add a third-party request. */
:root {
    --font-display: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    --bg: #101216;
    --surface: #181b21;
    --surface-2: #20242c;
    --surface-3: #2a2f39;
    --ink: #f1f2f4;
    --ink-2: #c4c8d0;
    --ink-3: #a1a7b3;
    --line: #2d323c;
    --line-strong: #444b58;
    --accent: #86a8ff;
    --accent-ink: #0b1020;
    --accent-soft: #1d2744;
    --focus: #9db9ff;
    --going: #5fd0a1;
    --going-soft: #143528;
    --warn: #ffb27a;
    --warn-soft: #3b2415;
    --danger: #ff9aa0;
    --danger-soft: #3d1a1d;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 18px;
    --control-min: 44px;
    --measure: 68ch;

    /* Shell geometry. The sticky phone bars publish their heights so scroll padding keeps a focused
       control or an anchor target clear of them. */
    --rail-width: 15rem;
    --topbar-height: 0px;
    --tabbar-height: 0px;

    color-scheme: dark;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    scroll-padding-top: calc(var(--topbar-height) + var(--space-4));
    scroll-padding-bottom: calc(var(--tabbar-height) + var(--space-4));
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--ink); line-height: 1.5; }
a { color: var(--accent); text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; letter-spacing: -.01em; overflow-wrap: break-word; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* ---------- Application shell ---------- */
.skip-link { position: absolute; left: var(--space-3); right: var(--space-3); top: var(--space-3); width: fit-content; max-width: calc(100% - 2 * var(--space-3)); transform: translateY(calc(-100% - 2 * var(--space-3))); z-index: 60; border-radius: var(--radius-s); padding: .65rem .9rem; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.skip-link:focus { transform: none; }
.brand { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; min-height: var(--control-min); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; text-decoration: none; }
.brand__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand__mark { display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: .8rem; letter-spacing: 0; }
.site-header { display: flex; align-items: center; padding: var(--space-2) var(--space-5); border-bottom: 1px solid var(--line); }

.app-shell { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); align-items: start; min-height: 100vh; min-height: 100dvh; }
.app-topbar, .app-tabs, .rail__drawer-head { display: none; }
.app-shell > main { grid-column: 2; grid-row: 1; min-width: 0; }
/* One page scroll. The rail scrolls on its own only so a long menu never pushes the last
   destinations out of reach on a short landscape tablet. */
.app-rail { grid-column: 1; grid-row: 1; position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--space-4); height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-3); border-right: 1px solid var(--line); background: var(--surface); }
.app-rail > .brand { padding: 0 var(--space-2); }
.rail-nav { display: flex; flex: 1; flex-direction: column; gap: var(--space-4); }
.rail__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rail__label { margin: 0; padding: 0 var(--space-3) var(--space-1); color: var(--ink-3); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav-link, .nav-menu > summary { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-min); padding: .45rem var(--space-3); border-radius: 10px; color: var(--ink-2); font-size: .9375rem; font-weight: 600; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.nav-link:hover, .nav-menu > summary:hover { background: var(--surface-2); color: var(--ink); }
.nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.nav-link svg, .app-tab svg { flex: none; }
.nav-menu > summary { list-style: none; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after { content: ""; flex: none; width: .4em; height: .4em; margin: -.2em .15rem 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.nav-menu[open] > summary::after { margin-top: .2em; transform: rotate(-135deg); }
.nav-menu[open] > summary { color: var(--ink); }
.nav-menu--current > summary { color: var(--accent); }
.nav-menu__panel { display: grid; gap: 2px; margin: 2px 0 var(--space-2) var(--space-4); padding-left: var(--space-2); border-left: 2px solid var(--line); }
.nav-menu__panel .nav-link { min-height: 40px; font-size: .875rem; font-weight: 500; }
.rail__foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line); }

.app-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 52px; padding: 4px 2px; border-radius: var(--radius-m); color: var(--ink-3); font-weight: 700; text-decoration: none; }
.app-tab svg { width: clamp(36px, 12cqi, 56px); height: 26px; padding: 2px clamp(6px, 2.5cqi, 16px); border-radius: 999px; }
.app-tab__label { font-size: clamp(10.5px, 3.2cqi, 13px); line-height: 1.15; white-space: nowrap; }
.app-tab[aria-current="page"], .app-tab.is-current { color: var(--accent); }
.app-tab[aria-current="page"] svg, .app-tab.is-current svg { background: var(--accent-soft); }

.page-shell { width: min(var(--shell-max, 1500px), calc(100% - 2 * clamp(1rem, 2.5vw, 3rem))); margin: 0 auto; padding: var(--space-6) 0 3rem; }
.page-shell--wide { --shell-max: 1880px; }
.page-shell:focus { outline: none; }

/* Tablet: the rail stays, a little narrower. */
@media (max-width: 1023px) {
    :root { --rail-width: 13rem; }
    .nav-link, .nav-menu > summary { font-size: .875rem; }
}

/* Phone: sticky top bar and a one-row, four-tab bar. The full navigation opens as a drawer from More. */
@media (max-width: 719px) {
    :root { --topbar-height: 3.5rem; --tabbar-height: calc(61px + env(safe-area-inset-bottom, 0px)); }
    .app-shell { display: flex; flex-direction: column; align-items: stretch; }
    .app-shell > main { flex: 1 0 auto; width: calc(100% - 2rem); }
    .app-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-2); min-height: var(--topbar-height); padding: 0 var(--space-4); border-bottom: 1px solid var(--line); background: var(--bg); }
    .app-tabs { position: sticky; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); container-type: inline-size; min-height: var(--tabbar-height); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); }
    .app-rail { display: none; }
    .app-rail[data-drawer-open], .app-rail:target { position: fixed; inset: 0; z-index: 50; display: flex; height: auto; padding: 0 var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); border: 0; }
    .app-rail > .brand { display: none; }
    .rail__drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--topbar-height); margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface); }
    .rail__drawer-head h2 { margin: 0; font-size: 1.125rem; }
    .rail__close { display: inline-flex; align-items: center; min-height: var(--control-min); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); font-weight: 650; text-decoration: none; }
    html.nav-drawer-open { overflow: hidden; }
    .page-shell { padding: var(--space-5) 0 var(--space-6); }
    .settings-card { padding: var(--space-4); }
    .attendance-error-toast { bottom: calc(var(--tabbar-height) + var(--space-4)); }
}
@media (max-width: 719px) and (prefers-reduced-motion: no-preference) {
    .app-rail[data-drawer-open] { animation: rail-drawer-in .18s ease-out; }
}
@keyframes rail-drawer-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Typography and base components ---------- */
.hero { padding: var(--space-4) 0 var(--space-6); max-width: 760px; }
.hero--compact { padding-bottom: var(--space-4); }
.hero h1, .auth-card h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 750; letter-spacing: -.02em; margin: .25rem 0 var(--space-3); }
.hero p { max-width: var(--measure); }
.planner-hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
.eyebrow { text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--ink-3); font-size: .75rem; }
.card-grid, .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.card, .auth-card { border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-5); background: var(--surface); }
/* The planner card keeps its original surface: its sticky first column paints the same colour. */
.planner-table-card { border: 1px solid #374151; border-radius: 1rem; padding: 1.5rem; background: #1f2937; }
.auth-card { width: min(560px, 100%); margin: 4rem auto; }
dl { margin: 0; }
dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
dt { color: var(--ink-3); }
dd { margin: 0; text-align: right; }
.primary-button, button { appearance: none; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); padding: .55rem .8rem; font-weight: 650; cursor: pointer; text-decoration: none; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-min); padding: .6rem 1rem; overflow-wrap: anywhere; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: var(--control-min); padding: .6rem 1rem; overflow-wrap: anywhere; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 650; text-decoration: none; }
.secondary-button:hover { background: var(--surface-2); }
.status-slot { margin-top: 1rem; min-height: 2rem; }
.status-pill { display: inline-block; border-radius: 999px; padding: .35rem .7rem; font-size: .8rem; }
.status-pill--ok { background: #064e3b; color: #a7f3d0; }
.status-pill--warn { background: #78350f; color: #fde68a; }
.inline-form { display: inline; margin: 0; }
.link-button { border: 0; background: none; color: var(--accent); padding: 0; font: inherit; cursor: pointer; }
.rail__foot .link-button { display: flex; align-items: center; width: 100%; min-height: var(--control-min); padding: 0 var(--space-3); border-radius: 10px; color: var(--ink-2); font-weight: 600; text-align: left; }
.rail__foot .link-button:hover { background: var(--surface-2); color: var(--ink); }
code { display: inline-block; background: #030712; padding: .5rem; border-radius: .4rem; }
.muted { color: var(--ink-3); }

.planner-stack { display: grid; gap: 1.25rem; }
.planner-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: end; flex-wrap: wrap; }
.planner-toolbar h2, .planner-table-heading h2 { margin: .15rem 0 0; }
.planner-toolbar__forms { display: flex; gap: .75rem; flex-wrap: wrap; }
.compact-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.compact-form input, .attendance-cell select { background: #111827; color: #f9fafb; border: 1px solid #4b5563; border-radius: .45rem; padding: .5rem .6rem; }
.compact-form input[type="number"] { width: 5rem; }
.dashboard-grid--summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.summary-card { display: flex; flex-direction: column; gap: .55rem; min-height: 150px; }
.summary-card__label { color: #9ca3af; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.summary-card strong { font-size: 1.35rem; }
.next-event-card { border-color: #3b82f6; }
.next-event-card__heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; flex-wrap: wrap; }
.next-event-card h2 { margin: .2rem 0; font-size: 1.8rem; }
.next-event-card p { margin: .4rem 0; }
.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.metric-row > div { background: #111827; border-radius: .7rem; padding: .85rem; display: flex; flex-direction: column; gap: .25rem; }
.metric-row span { color: #9ca3af; font-size: .8rem; }
.metric-row strong { font-size: 1.1rem; }
.decision-badge, .conflict-badge { display: inline-flex; align-items: center; width: max-content; border-radius: 999px; padding: .35rem .65rem; background: #1e3a8a; color: #dbeafe; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.decision-badge--uncertain { background: #713f12; color: #fef3c7; }
.planner-bulk-action { display: block; margin-top: .45rem; padding: .2rem .45rem; border: 1px solid #64748b; border-radius: .35rem; background: transparent; color: #cbd5e1; font-size: .72rem; line-height: 1.1; white-space: nowrap; }
.planner-bulk-action:hover, .planner-bulk-action:focus-visible { border-color: #fbbf24; color: #fef3c7; }
.conflict-badge--conflict { background: #7f1d1d; color: #fecaca; }
.conflict-badge--possible, .conflict-badge--review, .conflict-badge--tight { background: #78350f; color: #fde68a; }
.callout { border-radius: .65rem; padding: .75rem 1rem; margin-top: 1rem !important; }
.callout--warn { background: #451a03; color: #fde68a; }
.planner-table-card { padding: 0; }
.planner-table-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding: 1.25rem 1.5rem; border-bottom: 1px solid #374151; }
.planner-table-heading__aside { display: flex; flex-direction: column; align-items: end; gap: .25rem; text-align: right; }
/* Rows only visible while "show events with no planned attendance" is on. Interleaved
   by date, so they need to read as distinct or the toggle looks like it did nothing. */
.planner-row--no-attendance > td { opacity: .62; }
.planner-row--no-attendance .planner-table__event { box-shadow: inset 4px 0 0 #6b7280; }
.planner-row--no-attendance .planner-event-inspect-toggle::after { content: " · nobody attending"; color: #9ca3af; font-weight: 400; font-size: .8rem; }
.planner-table-scroll { overflow: auto; max-height: 70vh; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }
/* separate, not collapse: an expanded row and its panel are outlined as one card, and a
   collapsed border model cannot carry a radius. border-spacing stays 0 so nothing moves. */
.planner-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.planner-table th { position: sticky; top: 0; z-index: 2; background: #111827; color: #d1d5db; text-align: left; padding: .75rem; border-bottom: 1px solid #4b5563; white-space: nowrap; }
.planner-table td { padding: .7rem .75rem; border-bottom: 1px solid #374151; vertical-align: top; }
.planner-table tbody tr:hover { background: #172033; }
.planner-table tbody tr.planner-row--undecided > td { background: #29384d; border-bottom-color: #4b5e76; }
.planner-table tbody tr.planner-row--undecided > td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }
.planner-table tbody tr.planner-row--undecided:hover > td { background: #30415a; }
.planner-table__event { min-width: 15rem; position: sticky; left: 0; z-index: 1; background: #1f2937; }
.planner-table th.planner-table__event { z-index: 3; background: #111827; }
.planner-table tbody tr.planner-row--undecided .planner-table__event { background: #29384d; }
.planner-table tbody tr.planner-row--undecided:hover .planner-table__event { background: #30415a; }
.planner-event-inspect-toggle { display: block; width: 100%; border: 0; background: transparent; color: #f9fafb; padding: 0; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.planner-event-inspect-toggle:hover, .planner-event-inspect-toggle:focus-visible { color: #bfdbfe; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; outline: 0; }
.planner-event-inspect-toggle[aria-expanded="true"] { color: #dbeafe; }
.planner-event-cell__text > span { display: block; }
.planner-table__event span { color: #9ca3af; font-size: .8rem; margin-top: .15rem; }
.planner-table__event .planner-table__attention { color: #fcd34d; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tiny-state { display: block; color: #9ca3af; font-size: .72rem; margin-top: .2rem; }
.attendance-cell select { min-width: 82px; padding: .35rem .45rem; }
.planner-event-detail-row > td { padding: 0; background: #111827; }
.planner-event-detail-row:hover > td { background: #111827; }
.planner-inspect-panel { position: relative; padding: 1.1rem 1.5rem 1.5rem; background: linear-gradient(100deg, #172033 0%, #1f2937 72%, #172033 100%); }
.planner-inspect-panel__context { margin: .35rem 0 1rem; color: #cbd5e1; font-size: .88rem; }
.planner-inspect-grid { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: .8rem; }
.planner-inspect-card { min-width: 0; border: 1px solid #3b4a60; border-radius: .65rem; padding: .9rem; background: #111827; }
.planner-inspect-card .eyebrow { margin: 0 0 .55rem; font-size: .68rem; }
.planner-inspect-card h4 { margin: 0 0 .35rem; font-size: 1rem; }
.planner-inspect-card p { margin: .35rem 0; color: #d1d5db; }
.planner-inspect-list { display: grid; gap: .25rem; margin-top: .65rem; }
.planner-inspect-list div { padding: .3rem 0; border-bottom-color: #263244; font-size: .82rem; }
.planner-inspect-seat-list { display: grid; gap: .35rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.planner-inspect-seat-list li { display: flex; justify-content: space-between; gap: .5rem; color: #d1d5db; font-size: .82rem; }
.planner-inspect-seat-list strong { color: #f8fafc; white-space: nowrap; }
.planner-provider-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .85rem; color: #93c5fd; font-size: .8rem; font-weight: 700; }
.planner-provider-link:hover, .planner-provider-link:focus-visible { color: #dbeafe; }
.empty-state { text-align: center; padding: 3rem; }
.management-panel { border: 1px solid #374151; border-radius: .75rem; background: #1f2937; overflow: hidden; }
.management-panel__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid #374151; }
.management-panel__heading h2 { margin: .15rem 0 0; }
.roster-add-forms { display: flex; flex-wrap: wrap; gap: .75rem; padding: 1rem 1.5rem; border-bottom: 1px solid #374151; }
.roster-add-forms label { color: #d1d5db; font-size: .85rem; }
.roster-list { display: grid; }
.roster-item { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: 1rem 1.5rem; border-bottom: 1px solid #374151; }
.roster-item:last-child { border-bottom: 0; }
.roster-item__form { display: flex; flex: 1 1 460px; align-items: center; gap: .75rem; flex-wrap: wrap; }
.roster-item input { background: #111827; color: #f9fafb; border: 1px solid #4b5563; border-radius: .45rem; padding: .5rem .6rem; }
.roster-item__form > input:not([type="hidden"]) { flex: 1 1 200px; }
.roster-item__kind { width: 4.5rem; color: #93c5fd; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.roster-item__quantity { display: flex; align-items: center; gap: .4rem; color: #d1d5db; font-size: .85rem; }
.roster-item__quantity input { width: 4.5rem; }
.danger-button { background: #991b1b; color: #fff; }
.validation-summary { margin: 0 1.5rem 1rem; color: #fecaca; }
.calendar-panel { border: 1px solid #374151; border-radius: .75rem; background: #1f2937; overflow: hidden; }
.calendar-panel__heading { display: grid; grid-template-columns: 2.5rem 1fr 2.5rem auto; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid #374151; }
.calendar-panel__heading h2 { margin: 0; }
.icon-link { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid #4b5563; border-radius: .4rem; text-decoration: none; font-size: 1.2rem; }
.calendar-panel__settings { justify-self: end; border: 1px solid #4b5563; border-radius: .45rem; padding: .45rem .7rem; text-decoration: none; white-space: nowrap; }
.calendar-panel__settings:hover, .calendar-panel__settings:focus-visible { border-color: #60a5fa; background: #1e3a5f; color: #dbeafe; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { background: #111827; color: #9ca3af; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.calendar-weekdays span { padding: .65rem .75rem; border-right: 1px solid #374151; }
/* Fixed height, not min-height: a month reads as a month only while its rows match, and
   CalendarDayDensity caps the cell contents to fit. Declared here rather than appended at the
   end of the file so the narrow-viewport override further down still wins. */
.calendar-day { position: relative; height: 10.5rem; overflow: hidden; padding: .5rem; border-right: 1px solid #374151; border-bottom: 1px solid #374151; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day__number { display: block; margin-bottom: .4rem; color: #d1d5db; font-size: .8rem; font-weight: 700; }
.calendar-day--adjacent { background: #172033; }
.calendar-day--adjacent .calendar-day__number { color: #6b7280; }
.calendar-day__items { display: grid; gap: .3rem; }
.calendar-item { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; border-left: 3px solid; border-radius: .25rem; padding: .28rem .35rem; color: #e5e7eb; font-size: .75rem; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.calendar-item time { color: inherit; font-weight: 700; }
.calendar-item--ticketed { border-color: #60a5fa; background: #1e3a5f; }
.calendar-item--external { border-color: #34d399; background: #064e3b; }
.calendar-item--conflict { border-color: #f59e0b; }
.calendar-item__conflict { margin-left: .25rem; color: #fef3c7; font-weight: 800; }

@media (max-width: 900px) {
    .dashboard-grid--summary, .metric-row { grid-template-columns: 1fr; }
    .planner-toolbar { align-items: stretch; }
    .planner-toolbar__forms { flex-direction: column; width: 100%; }
    .compact-form { width: 100%; }
    .compact-form input:not([type="number"]) { flex: 1; min-width: 160px; }
    .management-panel__heading { align-items: start; flex-direction: column; }
    .roster-add-forms { flex-direction: column; }
    .roster-item { align-items: stretch; }
    .calendar-panel { overflow-x: auto; }
    .calendar-panel__heading { min-width: 680px; }
    .calendar-weekdays, .calendar-grid { min-width: 680px; }
    .calendar-day { height: 9.5rem; }
    .planner-inspect-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
    .planner-table { min-width: 60rem; }
}
/* Planner sorting and filtering. Every marker here is drawn with borders or box-shadow,
   never a CSS character escape: an escape re-processed by a scripted edit once reached this
   file as a raw byte and rendered as literal text in the navigation. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.planner-controls { border: 1px solid #374151; border-radius: .8rem; background: #1b2534; }
.planner-controls[open] { padding-bottom: .85rem; }
.planner-controls__toggle { display: inline-flex; align-items: center; gap: .6rem; list-style: none; cursor: pointer; padding: .7rem 1rem; color: #cbd5e1; font-weight: 600; font-size: .9rem; }
.planner-controls__toggle::-webkit-details-marker { display: none; }
.planner-controls__toggle:hover, .planner-controls[open] .planner-controls__toggle { color: #dbeafe; }
/* Three stacked bars, drawn as one bar plus two shadows. */
.planner-controls__icon { width: 1.05em; height: .12em; background: currentColor; box-shadow: 0 -.36em 0 currentColor, 0 .36em 0 currentColor; }
.planner-controls__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: 0 1rem; }
.planner-controls__search { flex: 1 1 18rem; min-width: 12rem; border: 1px solid #4b5563; border-radius: .45rem; padding: .45rem .6rem; background: #111827; color: #f9fafb; }
.planner-controls__apply { padding: .45rem .8rem; }
.planner-controls__clear { font-size: .85rem; white-space: nowrap; }
.filter-menu { position: relative; }
.filter-menu > summary { display: inline-flex; align-items: center; gap: .4rem; list-style: none; cursor: pointer; border: 1px solid #4b5563; border-radius: .45rem; padding: .45rem .7rem; background: #111827; color: #d1d5db; font-size: .85rem; white-space: nowrap; }
.filter-menu > summary::-webkit-details-marker { display: none; }
.filter-menu > summary::after { content: ""; width: .32em; height: .32em; margin: -.18em 0 0 .1em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.filter-menu[open] > summary { border-color: #60a5fa; color: #dbeafe; }
.filter-menu[open] > summary::after { margin-top: .1em; transform: rotate(-135deg); }
.filter-menu__value { color: #9ca3af; }
.filter-menu[open] .filter-menu__value { color: #93c5fd; }
.filter-menu__panel { position: absolute; left: 0; z-index: 10; display: grid; gap: .3rem; min-width: 13rem; margin-top: .4rem; border: 1px solid #4b5563; border-radius: .6rem; padding: .6rem; background: #1f2937; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.filter-menu__field { display: grid; gap: .25rem; font-size: .78rem; color: #9ca3af; }
.filter-menu__field input, .filter-menu__field select { border: 1px solid #4b5563; border-radius: .4rem; padding: .35rem .45rem; background: #111827; color: #f9fafb; }
.filter-menu__hint { margin: .35rem 0 0; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: #60a5fa; }
.filter-menu__option { display: flex; align-items: center; gap: .45rem; border-radius: .35rem; padding: .25rem .3rem; color: #d1d5db; font-size: .85rem; cursor: pointer; }
.filter-menu__option:hover { background: #172033; }
.filter-menu__option input { accent-color: #2563eb; }
.planner-filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .85rem 0 0; padding: 0; }
.planner-sort { display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; }
.planner-sort:hover, .planner-sort:focus-visible { color: #dbeafe; text-decoration: underline; }
.planner-sort::after { content: ""; width: .34em; height: .34em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.planner-sort--off::after { opacity: .3; width: .28em; height: .28em; border-width: 1px; transform: rotate(45deg); }
.planner-sort--ascending::after { margin-bottom: -.25em; transform: rotate(-135deg); }
.planner-sort--descending::after { margin-bottom: .1em; transform: rotate(45deg); }
.planner-sort--ascending, .planner-sort--descending { color: #dbeafe; }
[data-planner-live-filters] .planner-controls__apply { display: none; }
/* The filter strip sits inside the planner card, between its heading and the table. */
.planner-table-card > .planner-controls { border: 0; border-top: 1px solid #374151; border-bottom: 1px solid #374151; border-radius: 0; background: #1b2534; }
.planner-table-card > .planner-controls[open] { padding-bottom: .8rem; }
.planner-table-card > .planner-controls .planner-controls__bar { padding: 0 1.5rem; }
.planner-table-card > .planner-controls .planner-controls__toggle { padding: .6rem 1.5rem; }
.planner-results__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; padding: .75rem 1.5rem; color: #9ca3af; font-size: .82rem; }
.planner-results__meta p { margin: 0; }
.planner-results__meta a { font-size: .82rem; }
#planner-results .planner-filter-chips { padding: 0 1.5rem .85rem; margin: -.35rem 0 0; }
.planner-results__empty { padding: 1.75rem 1.5rem 2.25rem; text-align: center; }
.planner-results__empty h3 { margin: .25rem 0 .5rem; font-size: 1.25rem; }
.planner-results__empty p { margin: .35rem 0; color: #9ca3af; }
/* The Who grid: one row per attendance subject, one column per answer. */
.filter-menu__panel--wide { min-width: 19rem; }
.filter-matrix { display: grid; gap: .1rem; }
.filter-matrix__row { display: grid; grid-template-columns: minmax(5rem, 1fr) repeat(4, 2.6rem); align-items: center; gap: .2rem; border-radius: .35rem; padding: .15rem .25rem; }
.filter-matrix__row:not(.filter-matrix__row--head):hover { background: #172033; }
.filter-matrix__row--head { color: #60a5fa; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.filter-matrix__row--head > span { text-align: center; }
.filter-matrix__label { color: #d1d5db; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-matrix__cell { display: flex; justify-content: center; padding: .2rem 0; cursor: pointer; }
.filter-matrix__cell input { accent-color: #2563eb; }
/* A chip is two controls: the label edits, the cross removes. */
.planner-filter-chip { display: inline-flex; align-items: stretch; gap: 0; border: 1px solid #4b5563; border-radius: 999px; background: #111827; overflow: hidden; }
.planner-filter-chip__edit { border: 0; border-radius: 0; background: transparent; color: #cbd5e1; padding: .2rem .55rem .2rem .7rem; font-size: .75rem; cursor: pointer; }
.planner-filter-chip__edit:hover, .planner-filter-chip__edit:focus-visible { background: #172033; color: #dbeafe; }
.planner-filter-chip__remove { display: inline-flex; align-items: center; padding: 0 .55rem 0 .35rem; color: #9ca3af; font-size: .9rem; line-height: 1; text-decoration: none; }
.planner-filter-chip__remove:hover, .planner-filter-chip__remove:focus-visible { background: #7f1d1d; color: #fecaca; }
/* Every planner row carries a left-edge bar, so the absence of one is never a state.
   Amber needs a decision, grey is nobody going, navy is settled, slate is inventory we
   cannot vouch for. The bar is drawn as an inset shadow because the event cell is sticky
   and a border would scroll out from under it. */
.planner-table tbody .planner-table__event { box-shadow: inset 4px 0 0 #374151; }
.planner-table tbody tr.planner-row--decided .planner-table__event { box-shadow: inset 4px 0 0 #2f5ed4; }
.planner-table tbody tr.planner-row--unknown .planner-table__event { box-shadow: inset 4px 0 0 #4b5563; }
/* The declined row is dimmed to 62%, which dims its bar with it, so this grey is picked
   brighter than it looks here in order to land at the same weight as the others. */
.planner-table tbody tr.planner-row--no-attendance .planner-table__event { box-shadow: inset 4px 0 0 #a8b0bb; }
.planner-table tbody tr.planner-row--undecided .planner-table__event { box-shadow: inset 4px 0 0 #f59e0b; }

/* One narrow action column instead of a column per action (#91). The trigger is sized to the
   glyph so the table gains no width over the Inspect button it replaces. */
.planner-table__actions { width: 1%; text-align: right; }
.planner-row-menu { display: inline-block; }
.planner-row-menu > summary { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 1.9rem; list-style: none; cursor: pointer; border: 1px solid #4b5563; border-radius: .4rem; background: transparent; color: #93c5fd; font-size: 1.05rem; line-height: 1; }
.planner-row-menu > summary::-webkit-details-marker { display: none; }
.planner-row-menu > summary:hover, .planner-row-menu > summary:focus-visible { border-color: #60a5fa; background: #1e3a5f; color: #dbeafe; }
.planner-row-menu[open] > summary { border-color: #60a5fa; background: #1e3a5f; color: #dbeafe; }
/* Fixed rather than absolute: .planner-table-scroll clips its own overflow, so an absolutely
   positioned panel would be cut off at the edge of the table. planner-row-menu.js anchors it. */
.planner-row-menu__panel { position: fixed; z-index: 30; display: grid; gap: .1rem; min-width: 14rem; border: 1px solid #4b5563; border-radius: .6rem; padding: .35rem; background: #1f2937; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
/* A closed menu keeps no box at all: the panel is fixed, so an unplaced one would otherwise
   sit at whatever static position the cell gave it. */
.planner-row-menu:not([open]) .planner-row-menu__panel { display: none; }
.planner-row-menu__item { display: flex; align-items: center; gap: .55rem; width: 100%; border: 0; border-radius: .4rem; padding: .45rem .55rem; background: transparent; color: #d1d5db; font-size: .82rem; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.planner-row-menu__item:hover, .planner-row-menu__item:focus-visible { background: #172033; color: #dbeafe; outline: 0; }
.planner-row-menu__item [data-inspect-label="expanded"] { display: none; }
.planner-row-menu__item[aria-expanded="true"] [data-inspect-label="expanded"] { display: inline; }
.planner-row-menu__item[aria-expanded="true"] [data-inspect-label="collapsed"] { display: none; }
/* An open inspector is row state, not menu state: the trigger stays lit after the menu closes,
   and the divider between the row and its panel goes away so the two read as one surface. */
.planner-table tbody tr.planner-row--inspected > td { border-bottom-color: transparent; }
.planner-row--inspected .planner-row-menu > summary { border-color: #60a5fa; color: #dbeafe; }

/* The event cell leads with its own disclosure, so the chevron column reads straight down the
   table whether a row is open or not, and the name stays a plain text target beside it. */
.planner-event-cell { display: flex; align-items: start; gap: .55rem; }
.planner-event-cell__text { min-width: 0; }
.planner-event-disclosure { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin-top: -.1rem; border: 1px solid transparent; border-radius: .4rem; background: transparent; padding: 0; cursor: pointer; }
.planner-event-disclosure__marker { display: block; width: .36em; height: .36em; margin-left: -.12em; border-right: 2px solid #9ca3af; border-bottom: 2px solid #9ca3af; transform: rotate(-45deg); transition: transform .12s ease, border-color .12s ease; }
.planner-event-disclosure:hover, .planner-event-disclosure:focus-visible { border-color: #4b5563; background: #1e3a5f; outline: 0; }
.planner-event-disclosure:hover .planner-event-disclosure__marker, .planner-event-disclosure:focus-visible .planner-event-disclosure__marker { border-color: #bfdbfe; }
.planner-event-disclosure[aria-expanded="true"] { border-color: #3b82f6; background: #1d4ed8; }
.planner-event-disclosure[aria-expanded="true"] .planner-event-disclosure__marker { margin: -.12em 0 0; border-color: #eff6ff; transform: rotate(45deg); }

/* An open row and its panel are one outlined card. The summary row draws the top and sides, the
   panel row the sides and bottom, and neither draws the edge between them. */
.planner-table tbody tr.planner-row--inspected > td { border-top: 1px solid #3b82f6; border-bottom: 0; background: #1b2c48; }
.planner-table tbody tr.planner-row--inspected:hover > td { background: #1f3352; }
.planner-table tbody tr.planner-row--inspected > td:first-child { border-left: 1px solid #3b82f6; border-top-left-radius: .7rem; background: #1b2c48; }
.planner-table tbody tr.planner-row--inspected:hover > td:first-child { background: #1f3352; }
.planner-table tbody tr.planner-row--inspected > td:last-child { border-right: 1px solid #3b82f6; border-top-right-radius: .7rem; }
.planner-table tbody tr.planner-event-detail-row:not([hidden]) > td { border: 1px solid #3b82f6; border-top: 0; border-bottom-left-radius: .7rem; border-bottom-right-radius: .7rem; overflow: hidden; }
/* The row after the card gets a little air so the card does not sit flush against it. */
.planner-table tbody tr.planner-event-detail-row:not([hidden]) + tr > td { padding-top: 1.1rem; }

.planner-inspect-panel__header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid #2b3a52; }
.planner-inspect-panel__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid #35507d; border-radius: .55rem; background: #16233a; font-size: .95rem; }
.planner-inspect-panel__title h3 { margin: 0; font-size: .98rem; }
.planner-inspect-panel__title p { margin: .1rem 0 0; color: #9ca3af; font-size: .78rem; }
.planner-inspect-panel__when { margin: 0; color: #cbd5e1; font-size: .82rem; white-space: nowrap; }
.planner-inspect-panel__collapse { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 1px solid #4b5563; border-radius: .45rem; background: transparent; padding: 0; cursor: pointer; }
.planner-inspect-panel__collapse span { display: block; width: .36em; height: .36em; margin-bottom: -.12em; border-right: 2px solid #93c5fd; border-bottom: 2px solid #93c5fd; transform: rotate(-135deg); }
.planner-inspect-panel__collapse:hover, .planner-inspect-panel__collapse:focus-visible { border-color: #60a5fa; background: #1e3a5f; outline: 0; }

.planner-inspect-card { display: flex; flex-direction: column; }
.planner-inspect-card__label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; color: #d1d5db; font-size: .82rem; font-weight: 700; }
.planner-inspect-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; flex: none; border: 1px solid #35507d; border-radius: .45rem; background: #16233a; font-size: .8rem; }
/* Pinned to the bottom of the card so the totals line up across a row of cards. */
.planner-inspect-card__total { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: auto 0 0; padding-top: .7rem; border-top: 1px solid #2b3a52; color: #d1d5db; font-size: .82rem; }
.planner-inspect-card__total > span { display: flex; align-items: center; gap: .5rem; }
.planner-inspect-card__total strong { color: #f8fafc; white-space: nowrap; }

/* The card's outline is the row's state bar, grown around the whole pair: amber still needs a
   decision, grey is nobody going, navy is settled, slate is inventory we cannot vouch for. */
.planner-table tbody tr.planner-row--inspected > td,
.planner-table tbody tr.planner-row--inspected > td:first-child,
.planner-table tbody tr.planner-row--inspected > td:last-child,
.planner-table tbody tr.planner-event-detail-row:not([hidden]) > td { border-color: #4b5563; }
.planner-table tbody tr.planner-row--inspected.planner-row--decided > td,
.planner-table tbody tr.planner-row--inspected.planner-row--decided > td:first-child,
.planner-table tbody tr.planner-row--inspected.planner-row--decided > td:last-child,
.planner-table tbody tr.planner-event-detail-row.planner-row--decided:not([hidden]) > td { border-color: #3b82f6; }
.planner-table tbody tr.planner-row--inspected.planner-row--no-attendance > td,
.planner-table tbody tr.planner-row--inspected.planner-row--no-attendance > td:first-child,
.planner-table tbody tr.planner-row--inspected.planner-row--no-attendance > td:last-child,
.planner-table tbody tr.planner-event-detail-row.planner-row--no-attendance:not([hidden]) > td { border-color: #a8b0bb; }
.planner-table tbody tr.planner-row--inspected.planner-row--undecided > td,
.planner-table tbody tr.planner-row--inspected.planner-row--undecided > td:first-child,
.planner-table tbody tr.planner-row--inspected.planner-row--undecided > td:last-child,
.planner-table tbody tr.planner-event-detail-row.planner-row--undecided:not([hidden]) > td { border-color: #f59e0b; }
/* Inside the outline the left-edge bar would only repeat it, so the open row drops its own. */
.planner-table tbody tr.planner-row--inspected .planner-table__event { box-shadow: none; }
/* A month reads as a month only while its rows are one height, so the cell has a fixed capacity
   rather than growing to fit its busiest day. CalendarDayDensity decides what fits; this is only
   the geometry that makes the decision necessary. */
.calendar-day--selected { background: #1b2c48; box-shadow: inset 0 0 0 1px #3b82f6; }
.calendar-day--selected.calendar-day--adjacent { background: #1a2740; }
.calendar-day__more { display: block; margin-top: .15rem; padding: .2rem .35rem; border-radius: .25rem; color: #93c5fd; font-size: .72rem; font-weight: 700; text-decoration: none; }
.calendar-day__more:hover, .calendar-day__more:focus-visible { background: #1e3a5f; color: #dbeafe; }

/* The rest of a busy day, opened below the grid. A panel here rather than an overlay inside the
   cell: .calendar-panel clips its own overflow, and this needs no script to be reachable. */
.calendar-day-detail { margin-top: 1.25rem; border: 1px solid #374151; border-radius: .75rem; background: #1f2937; overflow: hidden; }
.calendar-day-detail__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #374151; }
.calendar-day-detail__heading h2 { margin: .15rem 0 0; font-size: 1.15rem; }
.calendar-day-detail__close { border: 1px solid #4b5563; border-radius: .45rem; padding: .4rem .7rem; font-size: .82rem; text-decoration: none; white-space: nowrap; }
.calendar-day-detail__close:hover, .calendar-day-detail__close:focus-visible { border-color: #60a5fa; background: #1e3a5f; color: #dbeafe; }
.calendar-day-detail__list { display: grid; gap: .4rem; margin: 0; padding: 1rem 1.25rem; list-style: none; }
.calendar-item--detail { display: flex; align-items: center; gap: .7rem; -webkit-line-clamp: none; line-clamp: none; padding: .5rem .6rem; font-size: .85rem; overflow: visible; }
.calendar-item--detail time { flex: none; min-width: 5.5rem; }
.calendar-item--detail .muted { font-size: .78rem; }

/* The day panel reuses the planner's inspector cards, so it reuses their disclosure too. The row
   above the cards is the summary line; the cards drop in underneath it inside the same list item. */
.calendar-day-detail__item { display: grid; gap: .5rem; }
.calendar-detail-toggle { flex: 1; min-width: 0; width: auto; }
.calendar-detail-panel { padding: .9rem 1rem 1rem; border: 1px solid #3b4a60; border-radius: .65rem; background: linear-gradient(100deg, #172033 0%, #1f2937 72%, #172033 100%); }
.calendar-detail-panel .planner-inspect-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.calendar-item--detail .decision-badge { margin-left: auto; }
/* Arriving from a month cell, the event whose detail was asked for should be findable at a glance. */
.calendar-day-detail__item--open .calendar-item--detail { box-shadow: 0 0 0 1px #3b82f6; }

/* The note card. Deliberately plain: a textarea and a save button, not an editor. */
/* Its own full-width row under the fact cards, whatever the column count: the planner grid is four
   fixed columns and the calendar's is auto-fit, and 1 / -1 is right in both. */
.planner-inspect-card--note { grid-column: 1 / -1; }
.planner-note-form { display: grid; gap: .5rem; margin-top: .2rem; }
.planner-note-form textarea { width: 100%; resize: vertical; min-height: 4.5rem; border: 1px solid #4b5563; border-radius: .45rem; padding: .5rem .6rem; background: #0b1220; color: #f9fafb; font: inherit; font-size: .84rem; line-height: 1.35; }
.planner-note-form textarea:focus-visible { border-color: #60a5fa; outline: 0; }
.planner-note-form textarea::placeholder { color: #6b7280; }
.planner-note-form__actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.planner-note-form__actions .muted { font-size: .75rem; }
.planner-note-save { border: 1px solid #4b5563; border-radius: .45rem; background: transparent; color: #93c5fd; padding: .35rem .7rem; font-size: .8rem; cursor: pointer; }
.planner-note-save:hover, .planner-note-save:focus-visible { border-color: #60a5fa; background: #1e3a5f; color: #dbeafe; outline: 0; }

/* My Calendar keeps the shared calendar primitives, with a compact mobile month. */
.my-calendar .calendar-panel { overflow: visible; }
.my-calendar .calendar-panel__heading, .my-calendar .calendar-weekdays, .my-calendar .calendar-grid { min-width: 0; }
.my-calendar-help { padding: .5rem 1rem; }
.my-calendar .calendar-day { height: 10.5rem; }
.my-calendar .calendar-day__number { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; margin: 0; }
.my-calendar a:focus-visible, .my-calendar [tabindex="-1"]:focus { outline: 2px solid #93c5fd; outline-offset: 2px; }
.my-calendar-today { font-size: .7rem; color: #93c5fd; }
.my-calendar .calendar-detail-panel { overflow-wrap: anywhere; scroll-margin-top: 1rem; }
.my-calendar .calendar-detail-panel h3 { margin-top: 0; }
.my-calendar-count { display: none; }
@media (max-width: 700px) {
    .my-calendar .calendar-panel__heading { padding: .6rem; gap: .3rem; grid-template-columns: 2rem 1fr 2rem auto; }
    .my-calendar .calendar-panel__heading h2 { font-size: 1rem; }
    .my-calendar .calendar-weekdays span { padding: .5rem 0; text-align: center; font-size: .65rem; }
    .my-calendar .calendar-day { height: 5.75rem; padding: .15rem; text-align: center; }
    .my-calendar .calendar-day__number { min-height: 2.5rem; }
    .my-calendar .calendar-day__items, .my-calendar-overflow { display: none; }
    .my-calendar-count { display: inline; }
    .my-calendar .calendar-day__more { padding: .25rem 0; font-size: .65rem; }
    .my-calendar-today { display: block; line-height: 1; }
    .my-calendar .calendar-day-detail__heading { align-items: start; flex-direction: column; }
}

/* ---------- Settings page pattern (AB#132; first applied to Account) ---------- */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); max-width: var(--measure); margin-bottom: var(--space-5); }
.page-head h1 { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); font-weight: 750; letter-spacing: -.02em; overflow-wrap: anywhere; }
.page-head p { margin: 0; }
.page-head .eyebrow { margin: 0; }
.page-head__lead { color: var(--ink-2); }
.page-head .secondary-button { margin-top: var(--space-2); }
.notice { margin: 0 0 var(--space-5); max-width: var(--measure); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); background: var(--surface); }
.notice--ok { border-color: color-mix(in srgb, var(--going) 45%, var(--line)); background: var(--going-soft); color: var(--ink); }
.account-page { max-width: 72rem; }
.account-page__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 1100px) {
    .account-page__grid { grid-template-columns: minmax(0, 40rem) minmax(16rem, 1fr); }
}
.settings-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-5); background: var(--surface); }
.settings-card h2 { margin: var(--space-1) 0 var(--space-4); font-size: 1.25rem; }
.settings-card > .eyebrow { margin: 0; }
.settings-card p { overflow-wrap: anywhere; }
.settings-card--aside p { color: var(--ink-2); }
.settings-card--aside p.muted { color: var(--ink-3); }
.account-page .account-section { margin-top: var(--space-4); }
.settings-form { display: grid; gap: var(--space-5); }
.settings-field { display: grid; gap: var(--space-2); }
.settings-field label { font-weight: 650; }
.settings-field input, .settings-field select { width: 100%; min-width: 0; min-height: var(--control-min); border: 1px solid var(--line-strong); border-radius: 10px; padding: .55rem .75rem; background: var(--bg); color: var(--ink); }
.settings-field input:hover, .settings-field select:hover { border-color: var(--ink-3); }
.settings-field input:focus-visible, .settings-field select:focus-visible { border-color: var(--focus); }
.settings-field .input-validation-error { border-color: var(--danger); }
.settings-field__hint { margin: 0; color: var(--ink-3); font-size: .875rem; }
.settings-field__error { color: var(--danger); font-size: .875rem; font-weight: 600; }
.settings-field__error:empty { display: none; }
.settings-form .validation-summary { color: var(--danger); }
.settings-form .validation-summary.validation-summary-valid { display: none; }
.settings-form .validation-summary ul { margin: 0; padding-left: 1.25rem; }
.settings-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.settings-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.settings-list__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.settings-list__main { min-width: 0; overflow-wrap: anywhere; }
.settings-list__main p { margin: var(--space-1) 0 0; }
.settings-list__meta { color: var(--ink-2); font-size: .875rem; }
.settings-empty { margin: 0; color: var(--ink-3); }