/* Accepted PR317 typography and reusable page, field, control, card and feedback patterns.
   Loaded after legacy route styles so real handlers can retain their markup/behavior. */
:root {
    --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
    --maybe: #eabc50; --maybe-soft: #352a12; --maybe-line: #a07826;
    --pool-1: #47c1dc; --pool-2: #c28ce5; --pool-3: #f19a66;
}
body { font-family: var(--font-body); line-height: 1.5; }
h1, h2, .brand, .hub-next__date strong, .hub-glance strong { font-family: var(--font-display); }
.design-page { --shell-max: 1760px; padding-top: 28px; padding-bottom: 64px; }
.design-page-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.design-page-head h1 { margin: 0; font-size: 2.125rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 750; }
.design-page-head .eyebrow, .design-page-head p { margin: 0; }
.design-page-head__lead { color: var(--ink-2); max-width: var(--measure); font-size: .9375rem; }
.design-page-head--management { padding: 18px 24px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--accent); border-radius: var(--radius-m) var(--radius-m) 0 0; }
.design-page-head--management .eyebrow { color: var(--accent); }
.design-page-head--management h1 { font-size: 1.75rem; }
.design-page--settings, .account-page { max-width: 760px; margin-inline: auto; }
.design-page .card, .design-page .panel, .management-panel, .management-card, .planner-table-card { background: var(--surface); border-color: var(--line); border-radius: var(--radius-l); }
.design-page > .card, .design-page > .panel { margin-bottom: 24px; }
.design-page > .panel { padding: 20px 24px; }
.design-page .management-card { background: var(--surface); padding: 16px 18px; }
.design-page :is(.management-panel__heading, .management-row, .notification-item, .notification-preference, .account-list__item, .detail-grid > div) { border-color: var(--line); }
.design-page .management-panel__heading { background: var(--surface); padding: 16px 18px; }
.design-page .management-panel__heading h2 { font-size: 1.25rem; }
.design-page :is(.settings-card, .account-section) { margin-top: 28px; }
.account-page__grid { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
.account-page .settings-card { padding: 0; border: 0; border-radius: 0; background: transparent; margin-top: 0; }
.account-page .account-section { margin-top: 28px; }
.account-page .settings-card > .eyebrow { display: none; }
.account-page .settings-card h2 { margin-bottom: 12px; font-size: 1.25rem; }
.account-page .settings-card--aside { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px 18px; }
.account-page .page-head h1 { font-size: 2.125rem; }
.settings-form { gap: 16px; }
.settings-field { gap: 6px; }
.design-page :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
    font-family: var(--font-body); background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; min-height: 44px; max-width: 100%;
}
.design-page :is(input, select, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.design-page :is(label, .settings-field > label) { font-weight: 700; font-size: .9375rem; }
.design-page :is(.setup-form, .form-grid, .settings-form, .compact-form-block) { gap: 16px; }
.design-page :is(.form-field, .settings-field) { min-width: 0; }
.design-page :is(.form-field > .muted, .settings-field__hint) { color: var(--ink-3); font-size: .8125rem; }
.design-page :is(button, .button, .secondary-button):not(.primary-button):not(.button-danger):not(.attendance-button):not(.hub-icon-button):not(.link-button):not(.text-button):not(.planner-row-menu__trigger):not(.calendar-detail-title-button) {
    min-height: 44px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
    font-family: var(--font-body); font-size: .875rem; font-weight: 650; border-radius: 10px; padding: 8px 16px;
}
.design-page :is(button, .button, .secondary-button):hover { filter: none; }
.design-page :is(.primary-button, button.primary-button) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-family: var(--font-body); font-size: .875rem; }
.design-page :is(.button-danger, button.button-danger) { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.design-page :is(button, input, select, textarea)[disabled] { opacity: .55; cursor: not-allowed; }
.design-page :is(.callout, .notice) { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--ink-2); padding: 12px 16px; }
.design-page :is(.callout--ok, .notice--ok) { background: var(--going-soft); color: var(--going); border-color: var(--going); }
.design-page :is(.callout--warn, .notice--error) { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.design-page :is(.validation-summary-errors, [data-design-errors].validation-summary-errors) { padding: 14px 18px; border: 1px solid var(--danger); border-radius: var(--radius-m); background: var(--danger-soft); color: var(--danger); margin-bottom: 18px; }
.design-page .validation-summary-valid { display: none; }
.design-page :is(.field-validation-error, .settings-field__error, .validation-message) { color: var(--danger); font-size: .875rem; font-weight: 650; }
.design-page :is(input, select, textarea).input-validation-error { border: 2px solid var(--danger); }
.design-page .status-pill, .notification-pill { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.design-page .status-pill--ok { background: var(--going-soft); color: var(--going); }
.design-page :is(.status-pill--warn, .notification-pill--high) { background: var(--warn-soft); color: var(--warn); }
.design-page .notification-pill--critical { background: var(--danger-soft); color: var(--danger); }
.design-page :is(.muted, .detail-grid dt, .summary-card__label, .notification-item__context) { color: var(--ink-3); }
.design-page .notification-item { padding: 14px 18px; }
.design-page .notification-item--unread { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.design-page .notification-item h3 { font-size: .9375rem; }
.design-page .notification-item__labels { gap: 6px; }
.design-page .notification-preference { padding: 14px 18px; }
.design-page .planner-table-card { padding: 0; overflow: hidden; }
.design-page .table-wrap { max-width: 100%; overflow-x: auto; }
.design-page :is(.planner-table th, .planner-table td, .planner-table th.planner-table__event, .planner-table td.planner-table__event, .planner-event-detail-row > td) { background: var(--surface); border-color: var(--line); }
.design-page .planner-table th { color: var(--ink-3); }
.design-page .planner-table td { color: var(--ink-2); }
.design-page :is(.planner-table th, .planner-table td) { padding: 8px 10px; }
.design-page :is(.planner-inspect-card, .metric-row > div, .planner-results__empty) { background: var(--surface); border-color: var(--line); }
.design-page .planner-inspect-card__total { border-color: var(--line); color: var(--ink-2); }
.design-page .planner-note-form textarea { background: var(--surface); }
.design-page .planner-filter-panel, .design-page .planner-row-menu__panel { background: var(--surface); border-color: var(--line-strong); }
.design-page .summary-card { min-height: 110px; gap: 6px; padding: 16px 18px; }
.design-page .next-event-card { border-color: var(--line); }
.design-page .next-event-card h2 { font-size: 1.625rem; }
.design-page .metric-row > div { padding: 12px; border: 1px solid var(--line); }
.design-page .detail-grid { gap: 12px; }
.design-page .detail-grid dt { font-size: .8125rem; }
.design-page .button-row, .design-page .form-actions { gap: 8px; flex-wrap: wrap; }
.design-page .danger-zone { border-color: var(--danger); }
.design-page dialog:not(.event-sheet) { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-l); padding: 24px; max-width: min(560px, calc(100vw - 32px)); }
.design-page dialog::backdrop { background: #0009; }
.source-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 5px; background: var(--source-color, var(--surface-3)); color: var(--bg); font-size: .65rem; font-weight: 800; }
.source-identity { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.source-identity--calendar .source-mark { background: transparent; border: 1px dashed var(--ink-3); color: var(--ink-3); }
.source-tone-0 { --source-color: var(--pool-1); } .source-tone-1 { --source-color: var(--pool-2); } .source-tone-2 { --source-color: var(--pool-3); }
.calendar-source-key { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 14px; color: var(--ink-2); font-size: .8125rem; }
.calendar-source-key > span { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; }
.hub-heading { align-items: start; }
.hub-heading .muted { margin: 6px 0 0; }
.hub-glance { gap: 8px; }
.hub-glance .glance-label-full, .hub-glance .glance-label-short { border: 0; background: transparent; padding: 0; min-height: 0; }
.hub-glance .glance-label-short { display: none; }
.hub-glance a { padding: 0 14px; min-height: 40px; font-size: .875rem; }
.hub-glance a:first-child { background: var(--maybe-soft); border-color: var(--maybe-line); color: var(--maybe); }
.hub-next__body { padding: 20px 22px; }
.hub-next--pool .personal-event-card__main h3 { font-size: 1.625rem; }
.hub-next--pool .pool-summary-card { gap: 12px; }
.hub-responses .personal-event-card { grid-template-columns: 120px minmax(0, 1fr) minmax(220px, auto); gap: 14px; padding: 14px 0; align-items: center; }
.hub-responses .personal-event-card__when { white-space: normal; }
.personal-event-card__main .pool-summary-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.pool-summary-meta .muted { margin: 0; }
.attendance-answer { border: 0; background: transparent; border-radius: 0; padding: 0; gap: 6px; }
.attendance-button { min-height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 12px; background: var(--surface); color: var(--ink-2); font-size: .8125rem; }
.attendance-button--yes.is-active { background: var(--going); color: var(--bg); border-color: var(--going); }
.attendance-button--maybe.is-active { background: var(--maybe-soft); color: var(--maybe); border: 1px dashed var(--maybe-line); }
.attendance-button--no.is-active { background: var(--surface-3); color: var(--ink); }
.attendance-button--clear { background: transparent; border: 0; padding: 4px 0; min-height: 30px; text-align: left; color: var(--ink-2); }
.hub-next--pool .attendance-control { max-width: 460px; }
.home-agenda .home-agenda-title { color: var(--ink); text-decoration: none; font-weight: 650; }
.home-agenda .home-agenda-title:hover { text-decoration: underline; }
.home-agenda li { padding: 10px 0; }
.home-agenda p { font-size: .8125rem; margin: 3px 0 0; }
.my-calendar { grid-template-columns: minmax(0, 1fr) 380px; }
.calendar-day-detail__list > .calendar-detail-panel { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; }
.calendar-day-detail__list > .calendar-detail-panel h3 { order: 1; font-size: .9375rem; line-height: 1.35; margin: 0; }
.calendar-day-detail__list > .calendar-detail-panel .my-calendar-event-time { order: 0; font-weight: 650; margin: 0; }
.calendar-day-detail__list > .calendar-detail-panel > :not(h3):not(.my-calendar-event-time) { order: 2; }
.calendar-day-detail__list > .calendar-detail-panel > p { margin: 0; font-size: .8125rem; }
.calendar-day-detail__list > .calendar-detail-panel .attendance-control { margin-top: 2px; }
.calendar-day-detail__list > .calendar-detail-panel .event-details-button { padding: 0; min-height: 30px; align-self: start; font-size: inherit; }
.my-calendar .calendar-item--pool { border-left-color: var(--source-color, var(--accent)); background: color-mix(in srgb, var(--source-color, var(--accent)) 15%, var(--surface)); }
.calendar-detail-title-button { background: transparent; border: 0; color: var(--ink); padding: 0; text-align: left; font-size: inherit; font-weight: 700; }
.calendar-day-detail__heading > a { font-size: .8125rem; }
.inbox-item summary { align-items: start; padding: 4px 0; }
.inbox-title-block { flex: 1; min-width: 0; }
.inbox-title-block strong { display: block; font-weight: 600; }
.inbox-item--unread .inbox-title-block strong { font-weight: 800; }
.inbox-title-block .inbox-meta { display: block; font-size: .78125rem; line-height: 1.4; margin-top: 3px; color: var(--ink-3); }
.inbox-item { padding: 10px 0; }
.notification-tray { box-shadow: 0 24px 60px #0008; }
.tray-list { flex: 1 1 auto; overscroll-behavior: contain; min-height: 96px; }
.tray-foot { padding: 10px 14px; }
@media (min-width: 720px) and (max-width: 1099px) {
    .hub-responses .personal-event-card { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .hub-responses .attendance-control { max-width: 480px; margin-top: 2px; }
    .hub-layout, .my-calendar { grid-template-columns: minmax(0, 1fr); }
    .my-calendar .calendar-day-detail { position: static; }
}
@media (max-width: 719px) {
    .design-page { padding-top: 20px; padding-bottom: 32px; }
    .design-page-head h1, .account-page .page-head h1 { font-size: 1.75rem; }
    .design-page-head--management { padding: 12px 16px; }
    .design-page-head--management h1 { font-size: 1.5rem; }
    .design-page > .panel { padding: 16px; }
    .hub-responses .personal-event-card { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .hub-glance a { font-size: .8125rem; padding: 0 10px; }
    .hub-glance strong { font-size: 1rem; }
    .hub-glance .glance-label-short { display: inline; }
    .hub-glance .glance-label-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .my-calendar { grid-template-columns: minmax(0, 1fr); }
    .my-calendar .calendar-day-detail { position: static; }
    .my-calendar .calendar-day-detail__heading { flex-wrap: wrap; gap: 10px; }
    .notification-tray { inset: auto 0 0; margin: 0; width: 100%; max-height: 85dvh; border-radius: 18px 18px 0 0; }
    .tray-head { flex-wrap: wrap; }
    .tray-head .hub-icon-button { margin-left: auto; }
    .tray-head [data-inbox-count] { font-size: .75rem; }
    .tray-list { padding: 0 16px; }
    .tray-foot { gap: 8px 16px; }
    .design-page .notification-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) { .notification-tray:not([hidden]) { animation: reference-tray-in .18s ease-out; } }
@keyframes reference-tray-in { from { opacity: 0; transform: translateY(12px); } }
/* Desktop owner correction: shared account disclosure, auth forms and planning calendar. */
.profile-menu { position: relative; flex: none; }
.profile-menu > summary { list-style: none; cursor: pointer; min-height: 44px; min-width: 44px; }
.profile-menu > summary::-webkit-details-marker { display: none; }
.profile-menu__panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 45; display: grid; width: min(270px, calc(100vw - 24px)); padding: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 16px 40px #0005; }
.profile-menu__panel a, .profile-menu__panel button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); text-decoration: none; font: inherit; text-align: left; overflow-wrap: anywhere; }
.profile-menu__panel :is(a, button):hover, .profile-menu__panel [aria-current=page] { background: var(--surface-2); color: var(--ink); }
.profile-menu__panel form { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 6px; }
.auth-card { width: min(480px, 100%); margin: clamp(16px, 8vh, 80px) auto; padding: clamp(20px, 4vw, 36px); box-shadow: 0 12px 36px #0002; }
.auth-card h1 { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.15; }
.auth-card > p { color: var(--ink-2); }
.auth-form { display: grid; gap: 10px; margin: 24px 0 16px; }
.auth-form label { font-weight: 650; }
.auth-form input { width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px; background: var(--surface-2); color: var(--ink); font: inherit; margin-bottom: 8px; }
.auth-form button { width: 100%; min-height: 48px; border-radius: 10px; font: inherit; font-weight: 700; }
.auth-form button:not(.primary-button) { border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); }
.auth-form[aria-busy=true] button { opacity: .7; cursor: wait; }
.auth-secondary { border-top: 1px solid var(--line); padding: 16px 0; }
.auth-secondary summary { cursor: pointer; color: var(--ink-2); font-weight: 650; min-height: 32px; }
.auth-secondary p { color: var(--ink-3); line-height: 1.5; }
.auth-secondary .auth-form { margin: 16px 0 0; }
.auth-feedback:empty { display: none; }
.auth-feedback { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); overflow-wrap: anywhere; }
.auth-feedback[data-state=error] { color: var(--danger); border-color: var(--danger); }
.auth-feedback[data-state=success] { color: var(--going); border-color: var(--going); }
.auth-feedback[data-state=pending] { color: var(--ink-2); }
.my-calendar-loading { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.my-calendar-loading[hidden] { display: none; }
.planning-calendar .hero { margin-bottom: 24px; }
.planning-calendar .calendar-day-detail__item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.planning-calendar .calendar-day-detail__item h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.4; }
.planning-calendar .planning-event-source { margin: 0 0 8px; font-size: .8125rem; }
.planning-calendar .calendar-item--detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; padding: 0; background: transparent; }
.planning-calendar .calendar-day-detail__list { list-style: none; padding: 0; margin: 0; }
.planning-calendar .calendar-detail-toggle { flex: 0 1 auto; }
/* A wide table retains every planning fact. One horizontal region, with ordinary page scrolling. */
.design-page .planner-stack, .design-page .planner-table-card, .design-page #planner-results { min-width: 0; max-width: 100%; }
.design-page .planner-table-scroll { max-height: none; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.design-page .planner-table { width: 100%; min-width: 64rem; table-layout: auto; }
.design-page .planner-table__event { min-width: 17rem; width: 20rem; max-width: 24rem; }
.design-page .planner-table :is(th, td):not(.planner-table__event):not(.planner-table__actions) { min-width: 6rem; }
.design-page .planner-table .attendance-cell select { min-width: 6rem; width: 100%; }
.design-page .planner-table-heading { align-items: start; flex-wrap: wrap; padding: 18px 20px; }
.design-page .planner-table-heading > * { min-width: 0; overflow-wrap: anywhere; }
.design-page .planner-inspect-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.design-page .dashboard-grid--summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.design-page .metric-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.design-page .summary-card strong, .design-page .metric-row strong { overflow-wrap: anywhere; }
.design-page .planner-inspect-panel__header { display: flex; flex-wrap: wrap; }
.design-page .planner-controls__bar { padding: 0 16px; }
.design-page .planner-controls__search { min-width: min(100%, 12rem); }
@media (max-width: 719px) {
    .profile-menu__panel { position: fixed; top: 62px; right: 12px; }
    .planning-calendar .calendar-day-detail__heading { flex-wrap: wrap; }
}
/* At phone widths the event column must not cover horizontally reached actions. */
@media (max-width: 719px) { .design-page .planner-table__event { position: static; } }
.design-page .planner-table .planner-event-inspect-toggle { min-height: 32px; padding: 4px 0; background: transparent; border: 0; border-radius: 6px; text-align: left; line-height: 1.4; }
.design-page .planner-table .planner-event-disclosure { min-height: 36px; min-width: 32px; padding: 8px; background: transparent; border: 1px solid var(--line); }
.design-page .planner-table-card > .planner-controls { background: var(--surface-2); border-color: var(--line); }