/* Alghero UI standard. Load after legacy feature styles; new components use these tokens.
   Component behaviour (maps, recording, animation) remains in style.css. See DESIGN_STANDARD.md. */
:root {
  --ink: #173653; --muted: #52677d; --paper: #f3f7fb; --line: #d7e3ef;
  --white: #fff; --dark: #102e52; --blue: #256bb0; --coral: #e93c58;
  --surface-soft: #eaf1f8; --danger: #a32e42; --focus: #256bb0;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-control: 10px; --radius-card: 16px; --radius-dialog: 20px;
  --control-height: 44px; --shadow-card: 0 3px 14px #102e5205;
}
body { line-height: 1.5; }
h1,h2,h3,summary { overflow-wrap: anywhere; }
h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.7px; }
h3 { font-size: 18px; line-height: 1.35; letter-spacing: -.2px; }
.muted { font-size: 14px; line-height: 1.6; }
.eyebrow { font-size: 10px; line-height: 1.4; letter-spacing: 1.5px; }
button:disabled { cursor: not-allowed; }
:where(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.primary,.secondary,.text-button,.menu-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); max-width: 100%; padding: 10px 16px;
  border: 1px solid transparent; border-radius: var(--radius-control);
  font-size: 14px; font-weight: 650; line-height: 1.4; text-align: center;
  white-space: normal; overflow-wrap: anywhere; text-decoration: none;
}
.primary,.login-card .primary { color: var(--white); background: var(--blue); }
.primary:hover,.login-card .primary:hover { background: #1b5590; }
.secondary { color: var(--ink); background: var(--surface-soft); border-color: var(--line); }
.secondary:hover { background: #dce8f4; }
.text-button { background: transparent; color: var(--muted); font-weight: 600; }
.text-button:hover { color: var(--ink); background: var(--surface-soft); }
.danger,.session-cancel { color: var(--danger); }
.text-button.danger:hover,.session-cancel:hover { color: var(--danger); background: #fff0f2; }
.close { display: inline-grid; place-items: center; flex: 0 0 44px; padding: 0; border-radius: var(--radius-control); }
.close:hover { background: var(--surface-soft); }
.action-link { white-space: normal; }
label { font-size: 13px; line-height: 1.5; font-weight: 600; }
input:not([type="checkbox"]):not([type="hidden"]),select,textarea,
#session-form input:not([type="hidden"]),#session-form select,#session-form textarea {
  min-height: var(--control-height); min-width: 0; max-width: 100%;
  border: 1px solid #bccede; border-radius: var(--radius-control);
  padding: 11px 12px; margin-top: var(--space-2); font-size: 16px; font-weight: 400; line-height: 1.4;
}
input[type="date"],input[type="time"],input[type="datetime-local"] { appearance: none; -webkit-appearance: none; min-inline-size: 0; }
input::-webkit-date-and-time-value { text-align: left; min-width: 0; margin: 0; }
input::-webkit-datetime-edit { padding: 0; min-width: 0; }
input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--blue); margin: 0; }
label:has(>input[type="checkbox"]) { display: flex; gap: var(--space-2); align-items: center; min-height: 44px; }
.form-grid,.session-fields { gap: var(--space-4); }
.form-grid>*,.session-fields>*,.section-head>*,.map-layout>*,.overview-heading>* { min-width: 0; }
.form-error:empty,.error:empty { display: none; }
.error { font-size: 13px; color: var(--danger); }
.section-head { align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.section-head .eyebrow { margin-bottom: var(--space-2); }
.section-head .muted { margin-top: var(--space-2); }
.section-head .primary { flex-shrink: 0; padding: 10px 16px; font-size: 14px; white-space: normal; }
.shell { padding: 24px 24px max(32px,env(safe-area-inset-bottom)); }
.intro { padding: 28px 32px; border-radius: var(--radius-dialog); gap: 24px; }
.intro h1 { font-size: clamp(32px,4vw,52px); letter-spacing: -1.5px; }
.hero-top { padding-bottom: 16px; }
.hero-top .menu-button { padding: 10px 16px; font-size: 14px; }
.hero-top .top-actions { gap: 0; }
.countdown { min-width: 300px; }
.countdown .countdown-units strong { font-variant-numeric: tabular-nums; }
.race-stats { margin: 0 16px 32px; padding: 16px 0; }
.race-stats strong { font-variant-numeric: tabular-nums; }
.navigation-dialog { overflow-y: auto; overscroll-behavior: contain; padding: max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom)); }
.navigation-head { margin-bottom: 16px; padding-left: 12px; }
.side-nav { gap: 4px; }
.side-nav a { min-height: 48px; padding: 12px 16px; }
.navigation-account { padding: 20px 0 0; margin-top: 20px; border-top: 1px solid var(--line); }
.navigation-account>p { padding: 0 12px 8px; overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.navigation-account .account-actions { align-items: stretch; }
.navigation-account .account-actions button { flex: 1 1 auto; }
.overview-grid { gap: 16px; }
.overview-card,.overview-shortcut,.panel,.award-card,.session-detail-card,.map-panel,.pwa-notifications {
  border-radius: var(--radius-card); padding: 24px; background: var(--white); box-shadow: var(--shadow-card); min-width: 0;
}
.overview-card { border-top: 1px solid var(--line); }
.overview-card:nth-child(2) { border-top-color: var(--line); }
.overview-heading { align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.overview-heading h2 { font-size: 23px; margin: 0; }
.overview-heading>span { font-size: 12px; }
.overview-entry { padding: 16px 0; }
.overview-entry h3 { font-size: 18px; }
.overview-entry .muted { font-size: 13px; }
.overview-link { display: inline-flex; align-items: center; min-height: 44px; padding-top: 12px; font-size: 14px; }
.overview-shortcut { background: var(--white); padding: 20px 24px; }
.overview-shortcut:hover { background: #edf4fc; border-color: #a9bfd4; }
.overview-shortcut h3 { font-size: 20px; }
.overview-shortcut p { font-size: 13px; margin-top: 8px; }
.overview-sessions .session-tile { box-shadow: none; background: var(--paper); }
.overview-training .overview-heading { margin-bottom: 16px; }
.training-toolbar { gap: 16px; margin-bottom: 20px; }
.segmented { flex-wrap: wrap; overflow: visible; min-width: 0; gap: 4px; padding: 4px; border-radius: var(--radius-control); }
.segmented button { min-height: 44px; padding: 10px 12px; font-size: 13px; border-radius: 7px; }
.past-toggle { white-space: normal; font-size: 13px; min-height: 44px; }
.event-list,.item-list { gap: 12px; }
.event-card.session-tile { border-radius: var(--radius-card); padding: 16px; }
.session-tile h3 { font-size: 18px; }
.session-tile .badge { margin-bottom: 4px; }
.session-tile-footer button { padding: 10px 16px; font-size: 14px; }
.session-summary { font-size: 13px; }
.session-creator { font-size: 12px; }
.session-time { font-size: 13px; line-height: 1.5; }
.date-tile { font-variant-numeric: tabular-nums; }
.session-detail-card h2 { font-size: 28px; }
.session-facts dt { font-size: 12px; }
.session-detail-actions .secondary { font-size: 14px; padding: 10px 16px; }
.session-detail-manage { align-items: center; }
.badge { font-size: 11px; line-height: 1.35; border-radius: 6px; padding: 4px 8px; }
.item-card { padding: 20px; gap: 16px; border-radius: var(--radius-card); }
.item-main h3 { font-size: 18px; }
.item-main .muted { font-size: 14px; }
.item-main a { font-size: 14px; min-height: 44px; padding: 8px 0; margin-top: 4px; }
.item-actions { align-items: center; flex-wrap: wrap; gap: 4px; }
.item-actions button { padding: 10px 12px; }
.pack-check { margin-top: 2px; }
.packing-meter { background: var(--surface-soft); padding: 16px 20px; }
.packing-progress { font-size: 13px; }
.notice { background: var(--surface-soft); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 16px 20px; font-size: 14px; }
#home-notification-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
#home-notification-banner p { flex: 1 1 230px; }
#section-itinerary>.notice { background: #fbf3df; border-color: #ebd8a3; }
.map-toolbar { margin-bottom: 16px; }
.map-toolbar .segmented button { font-size: 13px; }
.route-controls { font-size: 13px; gap: 8px 16px; border-radius: var(--radius-control); margin-top: 0; }
.route-controls>span { width: 100%; }
.route-controls label { min-height: 44px; }
.route-controls a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.map-footnote { font-size: 12px; line-height: 1.6; }
.map-panel .muted { font-size: 14px; }
.map-welcome h3 { font-size: 22px; }
.map-place-detail .action-link { font-size: 14px; }
.map-extra-link { min-height: 44px; padding: 8px 0; }
dialog:not(.recording-dialog):not(.navigation-dialog) { border-radius: var(--radius-dialog); padding: 24px; max-height: calc(100dvh - 32px); overscroll-behavior: contain; }
.dialog-head { gap: 12px; margin-bottom: 20px; }
.dialog-head h2 { font-size: 24px; }
.dialog-actions { flex-wrap: wrap; margin-top: 24px; gap: 12px; }
.dialog-actions button { min-width: 104px; }
#session-dialog { padding: 0; }
#session-form { max-height: calc(100dvh - 32px); }
#session-form .session-form-head { padding: 20px 24px; }
#session-form label { font-size: 13px; }
.session-form-body { padding: 24px; }
.session-form-footer { padding: 16px 24px; }
#session-form .dialog-actions button { min-height: 44px; }
#rsvp-identity { font-size: 14px; padding: 16px 0; }
#section-admin { display: grid; gap: 16px; }
#section-admin .section-head { margin-bottom: 8px; }
#accounts-admin-content,#documentary-admin-content { gap: 16px; margin: 0; }
#awards-admin-content:empty { display: none; }
.awards-admin { margin-top: 0; }
#section-admin .panel>h3 { font-size: 20px; margin-bottom: 8px; }
#section-admin .panel>.muted { margin-bottom: 16px; }
#section-admin form { margin-top: 16px; }
#section-admin form .form-grid { margin: 16px 0; }
#documentary-settings>button { margin: 8px 8px 0 0; }
#section-admin details:not(.admin-section) { border-top: 1px solid var(--line); padding: 12px 0; margin-top: 16px; }
#section-admin summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-size: 15px; font-weight: 650; }
.admin-section>summary { font-size: 20px !important; padding: 0 !important; }
.footage-card { border-color: var(--line); border-radius: var(--radius-card); }
.footage-card label { margin-top: 12px; }
#schedule-preview p { font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.notification-preferences { display: grid; gap: 4px; margin: 12px 0 16px; }
#mobile-notifications { background: var(--white); }
.pwa-actions { gap: 12px; align-items: center; }
.pwa-notifications { margin-top: 0; }
.pwa-desktop-banner { padding: 20px; margin-top: 16px; border-radius: var(--radius-card); flex-wrap: wrap; }
.pwa-desktop-banner>div { min-width: 0; }
.pwa-setup-body { padding: 0; }
.pwa-steps li>span { background: var(--surface-soft); color: var(--ink); }
.pwa-setup-note { color: var(--muted); }
.pwa-setup-link { margin-top: 12px; }
.login-card { padding: 32px; }
.login-card .eyebrow { margin-top: 24px; }
.login-card form { margin-top: 24px; }
.login-card .primary { justify-content: center; }
.login-card .text-button { padding: 10px 16px; }
#audience-login { margin-top: 24px; }
#audience-login button { flex: 1; font-size: 14px; }
#login-form>label:not(:first-child) { margin-top: 16px; }
#toast { bottom: max(20px,env(safe-area-inset-bottom)); z-index: 20; }
@media(max-width:900px) {
  .training-toolbar { align-items: flex-start; flex-direction: column; }
}
@media(max-width:760px) {
  .shell { padding: 16px 16px max(24px,env(safe-area-inset-bottom)); }
  .intro { padding: 20px; grid-template-columns: 1fr; gap: 20px; }
  .intro h1 { font-size: 32px; letter-spacing: -1px; }
  .intro .eyebrow { font-size: 10px; margin-bottom: 8px; }
  .intro .muted { font-size: 13px; margin-top: 8px; }
  .intro .countdown { min-width: 0 !important; width: 100%; border-left: 0; border-top: 1px solid #ffffff25; padding: 16px 0 0 !important; }
  .countdown-units { width: 100%; grid-template-columns: 1.4fr repeat(3,1fr); gap: 8px; }
  .countdown .countdown-units strong { font-size: 32px; }
  .countdown .countdown-units span { font-size: 10px; }
  .countdown-units>div+div strong::before { left: -4px; }
  .race-stats { margin: 0 8px 24px; }
  .race-stats strong { font-size: 21px; }
  .race-stats>div>span { font-size: 9px; }
  .section-head { flex-wrap: wrap; gap: 16px; }
  .section-head>div:first-child { flex: 1 1 220px; }
  .section-head h2 { font-size: 24px; }
  .section-head .muted { font-size: 14px; }
  .section-head .eyebrow { font-size: 10px; }
  .trip-plan-actions { width: 100%; gap: 12px; }
  .trip-plan-actions button { flex: 1; }
  .segmented { width: 100%; }
  .segmented button { font-size: 13px; padding: 10px 12px; }
  .overview-card,.overview-shortcut,.panel,.award-card,.session-detail-card,.map-panel,.pwa-notifications { padding: 20px; }
  .overview-card h2 { font-size: 22px; }
  .overview-heading>span { font-size: 12px; }
  .item-card { padding: 16px; flex-wrap: wrap; gap: 12px; }
  .item-main { flex-basis: 0; }
  .item-actions { flex-basis: 100%; justify-content: flex-end; margin-left: 0; border-top: 1px solid var(--line); padding-top: 8px; }
  .item-main h3 { font-size: 18px; }
  .item-main .muted { font-size: 14px; }
  .session-detail-card h2 { font-size: 24px; }
  .session-detail-actions .secondary { font-size: 14px; padding: 10px 12px; }
  .map-toolbar .segmented button { padding: 10px 12px; }
  .notice { padding: 16px; }
  dialog:not(.recording-dialog):not(.navigation-dialog) { padding: 20px; }
  #session-dialog { padding: 0; }
  .dialog-actions button { flex: 1; min-width: 0; }
  .navigation-dialog { padding-inline: 16px; }
  .login-card { padding: 24px; }
  .login-card h1 { font-size: 52px; }
}
@media(max-width:359px) {
  .intro { padding: 16px; }
  .countdown .countdown-units strong { font-size: 28px; }
  .race-stats strong { font-size: 19px; }
  .session-tile-link { grid-template-columns: 44px minmax(0,1fr); gap: 12px; }
  .session-tile-footer { margin-left: 56px; flex-wrap: wrap; }
}
@media(hover:none) { .primary:hover { background: var(--blue); } }
@media(prefers-reduced-motion:reduce) { .text-button { transition: none; } }
/* Numerals stay together even inside the narrower Home training card. */
.date-tile strong { white-space: nowrap; font-size: 28px; }
.hero-top .menu-button { border-color: #ffffff38; background: #ffffff0a; }
.hero-top .menu-button:hover { background: #ffffff18; }
#packing>.packing-group .item-main h3 { font-size: 17px; }
#packing>.packing-group .item-main p { font-size: 14px; }
@media(max-width:359px) { .date-tile strong { font-size: 26px; } }
:is(.dialog-actions,.pwa-actions,.account-actions,.film-actions,.session-detail-actions)>:is(.primary,.secondary,.text-button) { margin: 0; }
.intro :is(a,button):focus-visible { outline-color: var(--ice); }
.participation-list li { display: grid; grid-template-columns: minmax(0,1fr) 160px 130px; align-items: center; gap: 8px 16px; font-size: 14px; border-color: var(--line); }
.race-entry-list li { align-items: center; border-color: var(--line); }
@media(max-width:600px) {
  .participation-list li { grid-template-columns: minmax(0,1fr) auto; }
  .participation-list li>span { grid-column: 1; }
  .participation-list li>span+span { font-size: 13px; }
  .participation-list li>button { grid-column: 2; grid-row: 1 / span 2; }
}
/* Admin workspace: one tool at a time, quiet lists and progressive disclosure. */
body:is(.admin-page,.clips-page) .intro { display: block; padding: 16px 24px; margin-bottom: 28px; border-radius: 14px; }
body:is(.admin-page,.clips-page) .intro>.hero-top { border-bottom: 0; padding-bottom: 0; }
body:is(.admin-page,.clips-page) .intro>div:not(.hero-top),body:is(.admin-page,.clips-page) .race-stats { display: none; }
body:is(.admin-page,.clips-page) .intro::before,body:is(.admin-page,.clips-page) .intro::after { display: none; }
#section-admin .admin-page-heading { align-items: center; flex-direction: row; }
.admin-page-heading h2 { font-size: 32px; letter-spacing: -1px; }
.admin-page-heading .muted { margin-top: 4px; }
.admin-tabs { display: flex; gap: 4px; padding: 4px; background: #e5edf5; border: 1px solid var(--line); border-radius: 12px; width: fit-content; max-width: 100%; margin: 0 0 8px; }
.admin-tabs button { background: transparent; border: 0; min-height: 44px; padding: 10px 28px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.admin-tabs button[aria-selected="true"] { background: white; color: var(--ink); box-shadow: 0 1px 4px #102e5210; }
.admin-tabs button:hover { color: var(--ink); }
.admin-tool-panel { display: grid; gap: 16px; }
#section-admin .panel { padding: 28px; border-radius: 16px; box-shadow: none; }
#section-admin .admin-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
#section-admin .admin-panel-head>div { min-width: 0; }
#section-admin .admin-panel-head h3 { font-size: 22px; margin: 0; font-weight: 650; }
#section-admin .admin-panel-head .muted { margin-top: 4px; font-size: 13px; }
#section-admin .admin-panel-head>.text-button { margin: -8px -12px 0 0; }
#section-admin #account-search { max-width: 400px; margin: 0 0 16px; background: var(--paper); border-color: var(--line); }
#section-admin details.account-row { display: block; border: 0; border-top: 1px solid var(--line); margin: 0; padding: 0; }
#section-admin details.account-row:last-child { border-bottom: 1px solid var(--line); }
#section-admin details.account-row>summary { display: grid; grid-template-columns: minmax(0,1fr) auto 16px; align-items: center; gap: 16px; min-height: 68px; padding: 12px 4px; list-style: none; font-size: 14px; }
#section-admin details.account-row>summary::-webkit-details-marker { display: none; }
#section-admin details.account-row>summary::after { content: '›'; font-size: 24px; line-height: 1; color: var(--muted); text-align: center; }
#section-admin details.account-row[open]>summary::after { transform: rotate(90deg); }
@media(hover:hover) { #section-admin details.account-row>summary:hover { background: var(--paper); } }
.account-person { display: flex; gap: 12px; align-items: center; min-width: 0; }
.account-person strong { min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.account-avatar { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: #eaf1f8; color: #52677d; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.account-status { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.account-status.ready { color: #286959; }
.account-status.pending { color: #806522; }
.account-status.disabled { color: var(--danger); }
.account-controls { padding: 0 4px 20px 52px; }
.account-controls>.muted { margin-top: 12px; font-size: 12px; }
#section-admin .account-device-list { margin-top: 16px; padding: 8px 0 0; }
#section-admin .account-device-list summary { font-size: 13px; font-weight: 500; }
.account-device-list summary span { color: var(--muted); margin-left: 8px; }
.account-device { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13px; }
.account-device>span { min-width: 0; }
.account-device small { display: block; color: var(--muted); margin-top: 4px; font-size: 12px; }
#section-admin .admin-name-editor { padding: 16px 24px; background: transparent; border-color: transparent; }
#section-admin .admin-name-editor>summary { padding: 0 !important; font-size: 14px !important; color: var(--muted); font-weight: 500; }
#section-admin .admin-name-editor[open] { background: var(--white); border-color: var(--line); }
.admin-status { padding: 6px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; background: var(--surface-soft); color: var(--muted); }
.admin-status.active { background: #e5efe8; color: #286959; }
#section-admin details.admin-disclosure { border-top: 1px solid var(--line); padding: 0; margin: 0; }
#section-admin .admin-disclosure>summary { min-height: 56px; padding: 16px 0; font-size: 14px; font-weight: 550; color: var(--ink); }
#section-admin details.admin-disclosure[open] { padding-bottom: 16px; }
#section-admin .admin-disclosure .form-grid { margin-top: 4px; }
#section-admin .admin-enable { padding: 0 0 16px; font-size: 14px; font-weight: 500; }
#section-admin .admin-form-note { font-size: 13px; margin: 16px 0; }
.admin-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.admin-form-actions>button { margin: 0 !important; }
.admin-library-empty { text-align: center; padding: 40px 16px; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper); }
.admin-library-empty>span { display: block; font-size: 36px; color: #8ba3b8; line-height: 1; margin-bottom: 12px; }
.admin-library-empty h4 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.admin-library-empty .muted { font-size: 13px; }
.admin-no-results { padding: 24px 0; text-align: center; }
.admin-library-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
#section-admin .admin-library-toolbar input[type="search"] { flex: 1 1 260px; margin: 0; }
.admin-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0 20px; }
.admin-metrics>div { display: grid; gap: 4px; }
.admin-metrics>div+div { border-left: 1px solid var(--line); padding-left: 24px; }
.admin-metrics strong { font-size: 34px; font-weight: 600; letter-spacing: -1px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.admin-metrics small { font-size: 18px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.admin-metrics span { font-size: 13px; color: var(--muted); }
.admin-progress { display: block; width: 100%; height: 6px; accent-color: var(--blue); border: 0; border-radius: 4px; overflow: hidden; background: var(--surface-soft); }
.admin-progress::-webkit-progress-bar { background: var(--surface-soft); }
.admin-progress::-webkit-progress-value { background: var(--blue); border-radius: 4px; }
#award-admin .participation-list { margin: 0; }
#award-admin .participation-list li { font-size: 14px; }
#award-invite-result:not(:empty) { padding: 20px; background: var(--paper); border-radius: 10px; margin: 20px 0; }
#award-admin .award-reveal { margin-top: 0; }
#award-admin .award-reveal p { font-size: 13px; margin-bottom: 16px; }
@media(min-width:1000px) {
  #admin-panel-clips>#documentary-admin-content { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
}
@media(max-width:760px) {
  body:is(.admin-page,.clips-page) .intro { padding: 12px 16px; margin-bottom: 24px; }
  #section-admin .section-head { flex-wrap: nowrap; }
  #section-admin .section-head>div:first-child { flex: 1 1 auto; }
  .admin-page-heading h2 { font-size: 28px; }
  .admin-page-heading .action-link { font-size: 13px; padding: 10px 12px; }
  .admin-tabs { width: 100%; }
  .admin-tabs button { flex: 1; min-width: 0; padding: 10px 12px; }
  #section-admin .panel { padding: 20px; }
  #section-admin .admin-panel-head { margin-bottom: 16px; }
  #section-admin .admin-panel-head h3 { font-size: 20px; }
  #section-admin details.account-row>summary { gap: 10px; padding: 12px 0; }
  .account-person { gap: 10px; }
  .account-avatar { flex-basis: 30px; height: 30px; font-size: 10px; }
  .account-controls { padding-left: 0; }
  .account-controls .account-actions { gap: 8px; }
  .account-controls .account-actions button { font-size: 13px; padding: 10px 12px; }
  #section-admin .admin-name-editor { padding: 12px 16px; }
  .admin-form-actions>button { flex: 1; }
  .admin-metrics { gap: 16px; }
  .admin-metrics>div+div { padding-left: 16px; }
  .admin-metrics strong { font-size: 28px; }
  .admin-library-empty { padding: 32px 12px; }
}
#section-admin details.admin-test-tools { padding: 0; margin: 16px 0 0; border: 0; }
#section-admin .admin-test-tools>summary { font-size: 13px; font-weight: 500; color: var(--muted); }
#section-admin .admin-test-tools .muted { font-size: 13px; margin: 8px 0 12px; }

/* Trip clips: a postcard from the trip, with familiar controls. */
#section-documentary,.film-home-card {
  --clip-paper: #fff8ed; --clip-line: #e5d9c6; --clip-muted: #626458;
  --clip-sun: #f7bd66; --clip-action: #aa2945;
}
body.clips-page { min-height: 100svh; background: #fff8ed; }
#section-documentary { max-width: 860px; margin: auto; }
.film-page-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px; margin: 24px 0; }
.film-page-head>div:first-child { min-width: 0; }
.film-page-head .eyebrow { color: var(--clip-muted); margin-bottom: 8px; }
.film-page-head h2 { font-size: 32px; letter-spacing: -1px; line-height: 1.15; }
.film-title-row { display: flex; align-items: center; gap: 8px; }
.film-help { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--clip-line); border-radius: 50%; color: var(--clip-muted); font-size: 16px; }
.film-about-dialog { width: min(480px,calc(100% - 32px)); padding: 24px; }
.film-about-dialog p { margin-top: 16px; color: var(--muted); line-height: 1.6; }
.film-postmark { display: block; width: 120px; height: 120px; object-fit: contain; }
.film-test-note { color: var(--clip-muted); font-size: 12px; margin: 0 0 12px; }
.film-postcard { padding: 0; border: 1px solid var(--clip-line); border-radius: var(--radius-card); background: var(--white); box-shadow: 0 8px 24px #573d1910; overflow: hidden; }
.film-prompt-card { border-left: 0; margin: 0; min-width: 0; }
.film-prompt-frame { position: relative; padding: 28px 32px 36px; color: var(--white); background: var(--dark); }
.film-prompt-frame::before,.film-prompt-frame::after { content: ''; position: absolute; width: 20px; height: 20px; border-color: #ffffff55; border-style: solid; pointer-events: none; }
.film-prompt-frame::before { left: 16px; bottom: 16px; border-width: 0 0 2px 2px; }
.film-prompt-frame::after { right: 16px; bottom: 16px; border-width: 0 2px 2px 0; }
.film-frame-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 32px; color: #c8d9ea; }
.film-frame-meta .eyebrow { margin: 0; }
.film-frame-meta>span { flex-shrink: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.film-prompt-frame h3 { max-width: 620px; font-size: 32px; line-height: 1.25; font-weight: 650; margin: 0; letter-spacing: -.8px; }
.film-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.film-choice { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: start; gap: 12px; padding: 16px; border: 1px solid #ffffff30; border-radius: 10px; cursor: pointer; color: white; }
.film-choice:has(input:checked) { border-color: #f7bd66; background: #ffffff10; }
.film-choice input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--clip-sun); }
.film-choice small { display: block; color: #c8d9ea; font-size: 12px; margin-bottom: 4px; }
.film-choice strong { display: block; font-size: 18px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.film-choices[disabled] .film-choice { cursor: default; }
.film-choice:focus-within { outline: 3px solid #8bc3ed; outline-offset: 3px; }
.film-prompt-cue { color: #c8d9ea; font-size: 14px; line-height: 1.6; margin-top: 16px; }
.film-prompt-footer { padding: 20px 24px 16px; }
.film-prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.film-upload-alternative { background: var(--blue); color: var(--white); border: 1px solid var(--blue); border-radius: var(--radius-control); min-height: 48px; padding: 12px 20px; }
.film-upload-alternative:hover { background: #1b5590; color: var(--white); border-color: #1b5590; }
.film-empty .film-prompt-actions { justify-content: center; margin-top: 20px; }
.film-prompt-actions .primary { background: var(--clip-action); min-height: 48px; padding: 12px 20px; }
.film-prompt-actions .primary:hover { background: #8e2039; }
.film-prompt-actions svg,.film-empty-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.film-prompt-meta { margin-top: 12px; color: var(--clip-muted); font-size: 12px; }
.film-options { margin-top: 8px; }
.film-options summary { display: list-item; width: fit-content; padding: 12px 0; min-height: 44px; color: var(--clip-muted); font-size: 13px; cursor: pointer; }
.film-options>div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.film-options .text-button { color: var(--clip-muted); font-size: 13px; font-weight: 500; padding: 10px 0; }
.film-draft-status { font-size: 14px; font-weight: 650; color: var(--ink); margin-bottom: 12px; overflow-wrap: anywhere; }
.film-history { border-top: 1px solid var(--clip-line); border-bottom: 1px solid var(--clip-line); margin-top: 20px; }
.film-history summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; cursor: pointer; font-size: 14px; font-weight: 650; list-style: none; }
.film-history summary::-webkit-details-marker { display: none; }
.film-history summary::after { content: '+'; flex: 0 0 16px; font-size: 20px; font-weight: 400; text-align: center; }
.film-history[open] summary::after { content: '−'; }
.film-history summary>span { font-size: 12px; font-weight: 400; color: var(--clip-muted); margin-left: auto; }
.film-history ul { list-style: none; padding: 0; margin: 0 0 16px; }
.film-history li { display: flex; gap: 12px; padding: 12px 0; line-height: 1.6; font-size: 14px; }
.film-history li+li { border-top: 1px solid var(--clip-line); }
.film-history li>span:last-child { overflow-wrap: anywhere; }
.film-sent-mark { display: inline-grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--dark); color: white; font-size: 12px; }
.film-privacy { color: var(--clip-muted); font-size: 13px; line-height: 1.6; margin-top: 20px; max-width: 500px; }
.film-empty { padding: 32px 24px; border: 1px dashed var(--clip-line); border-radius: var(--radius-card); text-align: center; }
.film-empty h3 { font-size: 23px; margin-bottom: 12px; }
.film-empty p { color: var(--clip-muted); font-size: 14px; max-width: 380px; margin: auto; line-height: 1.6; }
.film-empty-mark { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--clip-sun); margin-bottom: 16px; }
.film-empty-mark svg { width: 24px; height: 24px; }
.film-empty .secondary { margin-top: 20px; }
.film-enrol-date { margin-bottom: 16px; }
.film-enrol-date summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-size: 14px; }
.film-enrol-date summary span { color: var(--clip-muted); }
.film-enrol-date label { display: block; margin-top: 8px; max-width: 280px; }
.film-enrol .error { margin-top: 12px; }
.film-home-card { padding: 24px; margin-bottom: 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); }
.film-home-card .film-prompt-frame { padding: 0; color: var(--ink); background: transparent; }
.film-home-card .film-prompt-frame::before,.film-home-card .film-prompt-frame::after { display: none; }
.film-home-card .film-frame-meta { color: var(--muted); margin-bottom: 12px; }
.film-home-card .film-prompt-frame h3 { font-size: 23px; letter-spacing: -.3px; }
.film-home-card .film-prompt-footer { padding: 16px 0 0; }
.film-home-card .film-prompt-actions .primary { background: var(--blue); }
.film-home-card .film-prompt-actions .primary:hover { background: #1b5590; }
.film-home-card .overview-link { padding: 8px 0 0; gap: 8px; }
.film-loading { color: var(--clip-muted); padding: 24px 0; }
.recording-dialog .film-actions .primary { background: #aa2945; }
.recording-dialog .film-actions .primary:hover { background: #8e2039; }
.recording-dialog .film-actions .text-button { color: #d3deea; }
.recording-dialog .text-button:hover { background: #23394f; color: white; }
.recording-dialog :is(button,summary,label):focus-visible,.film-upload:focus-within { outline: 3px solid #8bc3ed; outline-offset: 3px; }
.recording-dialog .close:hover { background: #23394f; }
.film-record-dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .film-prompt-actions .primary { transition: transform 160ms ease,background-color 160ms ease; }
  .film-prompt-actions .primary:hover { transform: translateY(-2px); }
}
@media(max-width:600px) {
  .film-page-head { margin: 20px 0; gap: 16px; }
  .film-page-head h2 { font-size: 28px; }
  .film-postmark { width: 96px; height: 96px; }
  .film-prompt-frame { padding: 20px 24px 32px; }
  .film-frame-meta { margin-bottom: 24px; }
  .film-prompt-frame h3 { font-size: 26px; letter-spacing: -.6px; }
  .film-choices { gap: 8px; }
  .film-choice { padding: 12px; gap: 8px; }
  .film-choice strong { font-size: 16px; }
  .film-prompt-footer { padding: 16px; }
  .film-prompt-actions { gap: 4px 8px; }
  .film-prompt-actions .primary { flex: 1 1 auto; }
  .film-upload-alternative { flex: 1 1 auto; }
  .film-home-card { padding: 20px; }
}
@media(max-width:359px) {
  .film-page-head h2 { font-size: 26px; }
  .film-title-row { gap: 4px; }
  .film-postmark { width: 88px; height: 88px; }
  .film-prompt-actions .primary { width: 100%; }
  .film-upload-alternative { width: 100%; }
  .film-history summary { flex-wrap: wrap; gap: 4px 8px; padding: 12px 0; }
}