/* Swiss Modernist theme. Shared tokens and adapters for existing components.
   Breakpoints: phone <=700px, tablet 701–1100px, desktop >1100px.
   Local grotesk fonts avoid additional network requests. */
:root {
  color-scheme:dark; --color-on-accent:#182a2a;
  --color-canvas:#182a2a; --color-surface:#213635; --color-ink:#f0ede3;
  --color-muted:#b1bcb1; --color-rule:#3b4b46; --color-accent:#d9c98d;
  --color-accent-hover:#e8dbab; --color-accent-soft:#34473e; --color-danger:#f1a198;
  --font-sans:"Helvetica Neue",Arial,sans-serif;
  --text-meta:.8125rem; --text-ui:.9375rem; --text-body:1rem;
  --text-lead:clamp(1.125rem,1.5vw,1.375rem);
  --text-display:clamp(2.75rem,6vw,5.75rem); --text-section:clamp(1.5rem,2.5vw,2.5rem);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --page-width:1440px; --page-gutter:clamp(20px,4vw,64px); --grid-gap:24px;
  --rule:1px solid var(--color-rule); --radius-control:2px; --motion-fast:120ms;
  --mobile-nav-height:61px;
}
body.app-shell,.app-shell :is(.album-page,.memory-page,.album-editor,.journey) {
  --paper:var(--color-canvas); --card:var(--color-surface); --ink:var(--color-ink);
  --muted:var(--color-muted); --green:var(--color-accent); --accent:var(--color-accent); --line:var(--color-rule);
}
body.app-shell { background:var(--paper); color:var(--ink); font:var(--text-body)/1.6 var(--font-sans); -webkit-font-smoothing:antialiased; }
.app-shell ::selection { background:var(--color-accent); color:var(--color-on-accent); }
.app-shell a { color:var(--color-accent); text-underline-offset:4px; }
.app-shell a:hover { text-decoration:underline; }
.app-shell :is(h1,h2,h3,h4,legend) { font-family:var(--font-sans); color:var(--ink); }
.app-shell h1,.app-shell :is(.album-page,.album-editor,.memory-page,.journey) h1 { font:500 var(--text-display)/.99 var(--font-sans); letter-spacing:-.065em; margin:0; overflow-wrap:anywhere; text-wrap:balance; }
.app-shell h2,.app-shell .memory-page h2 { font:500 var(--text-section)/1.12 var(--font-sans); letter-spacing:-.04em; }
.app-shell h3 { font-weight:500; letter-spacing:-.025em; }
.app-shell p { color:var(--muted); }
.app-shell .eyebrow { color:var(--ink); font:600 var(--text-meta)/1.4 var(--font-sans); text-transform:uppercase; letter-spacing:.09em; margin:0 0 var(--space-5); }
.app-shell :is(small,.status-pill,.journey-meta,.pagination,.media-date) { font-variant-numeric:tabular-nums; }
.app-shell small { font-size:var(--text-meta); }
/* Existing navigation, typographic emphasis. */
.app-shell .app-header { min-height:88px; height:auto; display:flex; flex-wrap:wrap; align-items:center; padding:var(--space-5) var(--page-gutter); gap:var(--space-5); background:var(--paper); border-bottom:var(--rule); box-shadow:none; }
.app-shell .app-header .brand { display:flex; align-items:center; gap:var(--space-3); color:var(--ink); font-size:19px; font-weight:700; letter-spacing:-.8px; white-space:nowrap; text-decoration:none; }
.app-shell .brand span { display:inline-grid; place-items:center; width:30px; height:30px; margin:0; border-radius:0; background:var(--color-accent); color:var(--color-on-accent); font:600 21px/1 var(--font-sans); box-shadow:none; }
.app-shell .app-header .app-nav { display:flex; justify-content:center; align-items:center; flex:1; gap:var(--space-4); }
.app-shell .app-header .app-nav a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:var(--space-2) 0; border-radius:0; border-bottom:2px solid transparent; font-size:var(--text-meta); font-weight:500; color:var(--muted); white-space:nowrap; background:transparent; text-decoration:none; }
.app-shell .app-header .app-nav a:hover { color:var(--ink); border-bottom-color:var(--color-rule); }
.app-shell .app-header .app-nav a[aria-current] { color:var(--color-accent); border-bottom-color:var(--color-accent); font-weight:600; background:transparent; }
.app-shell .sign-out { margin:0; }
.app-shell .sign-out button { padding:var(--space-2) 0; color:var(--muted); font-size:var(--text-meta); }
.app-shell main,body.app-shell:has(.album-page,.memory-page,.album-editor,.journey) main { max-width:var(--page-width); padding:var(--space-8) var(--page-gutter) var(--space-9); }
.app-shell .page-head,.app-shell .journey-heading { display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:var(--space-6); align-items:end; margin:0 0 var(--space-7); padding:0; }
.app-shell :is(.page-head,.journey-heading)>:last-child:not(:first-child) { justify-self:end; }
.app-shell .page-head>:only-child { grid-column:1/-1; }
.app-shell :is(.page-head,.journey-heading) p:not(.eyebrow) { font-size:var(--text-lead); line-height:1.5; max-width:42ch; margin:var(--space-5) 0 0; }
.app-shell .actions { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.app-shell .columns { grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:var(--space-7); }
/* Controls retain hit areas, focus behavior, and semantic colors. */
.app-shell button,.app-shell .button,.app-shell :is(.album-page,.album-editor,.memory-page,.journey) :is(button,.button) { min-height:44px; justify-content:center; gap:var(--space-2); border:1px solid transparent; border-radius:var(--radius-control); padding:var(--space-3) var(--space-5); font:600 var(--text-ui)/1.35 var(--font-sans); box-shadow:none; transition:color var(--motion-fast),background-color var(--motion-fast),border-color var(--motion-fast); }
.app-shell .button:hover { text-decoration:none; }
.app-shell .button:not(.secondary):not(.memory-delete-action):not(.danger) { color:var(--color-on-accent); }
.app-shell button:not(.secondary):not(.link):not(:disabled):hover,.app-shell .button:not(.secondary):hover { background:var(--color-accent-hover); }
.app-shell .secondary,.app-shell :is(.album-page,.memory-page,.album-editor,.journey) .secondary { background:transparent; border-color:var(--color-rule); color:var(--ink); }
.app-shell .secondary:hover { background:var(--color-surface); border-color:var(--ink); }
.app-shell .link { background:transparent; padding:var(--space-2) 0; border:0; color:var(--color-accent); }
.app-shell button:disabled { opacity:.45; cursor:default; }
.app-shell :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--color-accent); outline-offset:4px; }
.app-shell input[type=checkbox],.app-shell input[type=radio],.app-shell .album-editor .form input[type=checkbox] { accent-color:var(--color-accent); }
.app-shell :is(.form,.album-editor .form,.media-filter-fields,.month-jump,.visual-search-form,.person-link-form,.face-card,.face-queue-card) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { border:var(--rule); border-radius:var(--radius-control); background:var(--color-surface); color:var(--ink); padding:var(--space-3); font:var(--text-body)/1.4 var(--font-sans); min-height:44px; }
.app-shell :is(.danger,.memory-page .memory-delete-action) { color:var(--color-danger); border:1px solid var(--color-danger); background:transparent; }
.app-shell :is(.danger,.memory-page .memory-delete-action):hover { background:var(--color-danger); color:var(--color-on-accent); }
/* Whitespace and rules replace floating cards. */
.app-shell :is(.card,.stats article,.empty,.contribution,.contribution-tool,.face-card,.face-queue-card,.suggestion-card) { background:transparent; border:0; border-top:var(--rule); border-radius:0; box-shadow:none; padding:var(--space-5) 0; }
.app-shell .stats strong { font:500 var(--text-display)/1.1 var(--font-sans); letter-spacing:-.065em; }
.app-shell .card small { line-height:1.7; }
.app-shell .row { padding:var(--space-5) 0; gap:var(--space-5); }
.app-shell .row>div { min-width:0; overflow-wrap:anywhere; }
.app-shell .row>form { flex:none; }
.app-shell .row:first-child { padding-top:0; }
.app-shell :is(.message,.review-notice,.pilot-note,.suggestion-card,.search-caveat) { background:transparent; border:0; border-top:var(--rule); border-bottom:var(--rule); border-radius:0; padding:var(--space-4) 0; color:var(--muted); font-size:var(--text-ui); }
.app-shell .message.error { color:var(--color-danger); border-color:var(--color-danger); }
.app-shell .status-pill { padding:0; border:0; border-radius:0; background:transparent; color:var(--muted); font:500 var(--text-meta)/1.5 var(--font-sans); }
.app-shell :is(.memory-page,.memory-shelf) .status-pill { color:var(--muted); font-size:var(--text-meta); }
.app-shell .pagination { flex-wrap:wrap; gap:var(--space-3); font-size:var(--text-meta); }
.app-shell .pagination :is(a,strong) { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-control); }
.app-shell .app-footer { margin:0 var(--page-gutter); padding:var(--space-5) 0; border-top:var(--rule); font-size:var(--text-meta); text-align:left; }
.app-shell .app-footer a { color:var(--muted); }
.skip-link { position:fixed; top:8px; left:16px; transform:translateY(-160%); z-index:100; padding:12px 18px; background:var(--color-accent); color:var(--color-on-accent); }
.skip-link:focus { transform:translateY(0); }
/* Sources align to a 4/8 editorial grid. */
.app-shell .sources-page section { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--space-6); border-top:var(--rule); padding-top:var(--space-5); margin-top:var(--space-7); }
.app-shell .sources-page section>h2 { font:500 20px/1.3 var(--font-sans); letter-spacing:-.025em; margin:0; max-width:18ch; }
.app-shell .sources-page section>.card { border:0; padding:0; }
.app-shell .sources-page .cards { grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; gap:var(--space-5); }
.app-shell .sources-page .cards :is(.card,.empty) { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); border:0; padding:0; }
.app-shell .sources-page .cards .card>a { margin-top:var(--space-3); min-height:44px; display:flex; align-items:center; font-size:var(--text-ui); }
.app-shell .sources-note { margin:var(--space-7) 0 0; font-size:var(--text-meta); }
.app-shell .sources-intro { margin:var(--space-6) 0; }
/* Media and memories: large images, quiet metadata, crisp selections. */
.app-shell .album-heading { padding:0; }
.app-shell .album-filters { border:0; border-block:var(--rule); border-radius:0; background:transparent; padding:0; margin-bottom:var(--space-5); }
.app-shell .album-filters>summary { padding:var(--space-4) 0; }
.app-shell .album-filters>summary>span:first-child { flex-shrink:0; }
.app-shell .album-filters .filter-summary { text-align:right; color:var(--muted); }
.app-shell .month-jump { gap:var(--space-3); margin:0 0 var(--space-6); }
.app-shell .month-jump label { flex:0 1 250px; font-size:var(--text-meta); }
.app-shell .month-jump small { flex-basis:auto; padding-bottom:var(--space-3); font-size:var(--text-meta); color:var(--muted); }
.app-shell .album-page .media-grid { gap:var(--space-5); }
.app-shell .album-page .media-choice { aspect-ratio:auto; }
.app-shell .album-page .media-choice .media-tile { height:auto; }
.app-shell :is(.media-tile,.album-page .media-tile,.memory-page .media-tile,.memory-cover,.moment-cover,.memory-shelf .moment-cover,.selected-media-strip img,.face-card img) { border-radius:0; box-shadow:none; }
.app-shell .album-page .media-tile:hover img { transform:none; }
.app-shell .album-page .media-selection-bar,.app-shell :is(.selection-actions,.face-bulk-actions) { background:var(--color-surface); border:var(--rule); border-radius:0; box-shadow:none; padding:var(--space-3) var(--space-4); }
.app-shell .album-page .media-selection-bar .secondary { color:var(--ink); }
.app-shell .album-page .media-day { margin-top:var(--space-6); padding-top:var(--space-4); border-top:var(--rule); }
.app-shell .album-page .media-day h2 { font:500 20px/1.3 var(--font-sans); letter-spacing:-.035em; }
.app-shell .photo-select { font-size:var(--text-meta); color:var(--muted); }
.app-shell .media-memories { font-size:var(--text-meta); padding:var(--space-2) 0; color:var(--muted); }
.app-shell .media-memories span { opacity:1; }
.app-shell .moment-card,.app-shell .memory-shelf .moment-card { background:transparent; border:0; border-radius:0; box-shadow:none; color:var(--ink); }
.app-shell .moment-card:hover { text-decoration:none; }
.app-shell .moment-card:hover h3 { color:var(--color-accent); }
.app-shell .moment-card>div { padding:var(--space-4) 0; }
.app-shell .moment-card h3,.app-shell .memory-shelf .moment-card h3 { font:500 clamp(1.375rem,2vw,1.875rem)/1.15 var(--font-sans); letter-spacing:-.04em; margin:var(--space-3) 0; color:var(--ink); }
.app-shell :is(.moment-placeholder,.memory-shelf .moment-placeholder) { font:500 36px/1.1 var(--font-sans); color:var(--ink); background:#2a403d; border:var(--rule); }
.app-shell .timeline-year>h2 { font:500 clamp(3rem,7vw,6rem)/1 var(--font-sans); letter-spacing:-.065em; margin:var(--space-7) 0 var(--space-5); padding-bottom:var(--space-4); }
.app-shell .timeline-summary,.app-shell .memory-page .memory-summary,.app-shell .memory-page .contribution p { font:400 var(--text-lead)/1.65 var(--font-sans); color:var(--ink); }
.app-shell .memory-page .contribution,.app-shell .memory-page .contribution-tool,.app-shell .album-editor .form { border-radius:0; background:transparent; border:0; border-top:var(--rule); padding:var(--space-5) 0; }
.app-shell .memory-page .memory-summary { max-width:50ch; }
.app-shell .album-editor .card { border-radius:0; background:transparent; padding:var(--space-5) 0; border-top:var(--rule); }
.app-shell .editor-people label { border-radius:var(--radius-control); }
.app-shell .editor-people label:has(input:checked) { background:var(--color-accent-soft); border-color:var(--color-accent); }
.app-shell .year-nav { gap:var(--space-5); border-bottom:var(--rule); }
.app-shell .year-nav a { border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--muted); min-height:44px; }
.app-shell .year-nav a.active { color:var(--color-accent); border-bottom-color:var(--color-accent); }
.app-shell :is(.face-queue-card form,.contribution-tool summary) { padding-left:0; padding-right:0; }
.app-shell #photo-viewer { border-radius:0; background:var(--paper); color:var(--ink); }
.app-shell :is(.preview,.media-picker label,.memory-editor fieldset,.review-placeholder,.selection-review-item img) { border-radius:var(--radius-control); }
@media (min-width:701px) and (max-width:1100px) {
  .app-shell .app-header { gap:var(--space-2) var(--space-5); }
  .app-shell .app-header .brand { flex:1; }
  .app-shell .app-header .app-nav { flex-basis:100%; order:3; justify-content:space-between; overflow-x:auto; }
  .app-shell .page-head { grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
}
@media (max-width:700px) {
  :root { --page-gutter:20px; --grid-gap:16px; --text-display:clamp(2.5rem,11vw,3.5rem); }
  body.app-shell { padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
  .app-shell .app-header { position:sticky; top:0; z-index:20; min-height:68px; padding:var(--space-3) var(--page-gutter); gap:var(--space-2); }
  .app-shell .app-header .brand { flex:1; font-size:18px; }
  .app-shell .app-header .app-nav { position:fixed; left:0; right:0; bottom:0; top:auto; justify-content:flex-start; gap:var(--space-5); padding:var(--space-2) var(--page-gutter) calc(var(--space-2) + env(safe-area-inset-bottom)); background:var(--paper); border-top:var(--rule); overflow-x:auto; scrollbar-width:none; box-shadow:none; }
  .app-shell .app-header .app-nav::-webkit-scrollbar { display:none; }
  .app-shell .app-header .app-nav a { flex:0 0 auto; font-size:14px; padding:var(--space-2) 0; }
  .app-shell main,body.app-shell:has(.album-page,.memory-page,.album-editor,.journey) main { padding:var(--space-7) var(--page-gutter) var(--space-8); }
  .app-shell .page-head,.app-shell .journey-heading { grid-template-columns:minmax(0,1fr); gap:var(--space-5); margin-bottom:var(--space-6); }
  .app-shell :is(.page-head,.journey-heading)>:last-child:not(:first-child) { justify-self:stretch; }
  .app-shell .columns { grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
  .app-shell .actions { width:100%; }
  .app-shell .actions .button { flex:1 1 180px; }
  .app-shell .cards { grid-template-columns:1fr; }
  .app-shell .row { flex-wrap:wrap; }
  .app-shell .row>div { flex:1 1 180px; }
  .app-shell .row>form { margin-left:auto; }
  .app-shell .sources-page section { grid-template-columns:1fr; gap:var(--space-5); margin-top:var(--space-6); }
  .app-shell .sources-page .cards { grid-template-columns:1fr; }
  .app-shell .month-jump label { flex:1; }
  .app-shell .month-jump small { flex-basis:100%; padding:0; }
  .app-shell .album-page .media-grid { gap:var(--space-4); }
  .app-shell .album-page .media-selection-bar { bottom:calc(var(--mobile-nav-height) + var(--space-2) + env(safe-area-inset-bottom)); }
  .app-shell .album-heading { margin-bottom:var(--space-5); }
  .app-shell .album-heading p:not(.eyebrow) { margin-top:var(--space-4); }
  .app-shell #media-selection[data-selected-count="0"] .media-selection-bar { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  .app-shell #media-selection[data-selected-count="0"] .media-selection-bar :is(#create-selection,#clear-selection) { display:none; }
  .app-shell #media-selection[data-selected-count="0"] .media-selection-bar #selection-count { grid-column:auto; font-size:var(--text-meta); }
  .app-shell #media-selection[data-selected-count="0"] .media-selection-bar details { grid-column:auto; width:auto; }
  .app-shell #media-selection[data-selected-count="0"] .media-selection-bar details[open] { grid-column:1/-1; }
  .app-shell .year-nav { top:68px; }
  .app-shell .face-bulk-actions { top:76px; }
  .app-shell .filter-summary { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .app-shell *, .app-shell *::before, .app-shell *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

/* The living family archive: quiet surfaces, warm gold and readable controls. */
.app-shell button:where(:not(.secondary):not(.link):not(.danger)) { color:var(--color-on-accent); }
.app-shell :is(input,select,textarea) { color:var(--ink); background:var(--color-surface); border-color:var(--color-rule); }
.app-shell :is(.preview,.media-tile,.review-placeholder,.editor-people label,.memory-editor fieldset) { background:var(--color-surface); color:var(--ink); }
.app-shell :is(.error,.errorlist) { color:var(--color-danger); background:transparent; }
.app-shell .brand span { background:transparent; color:var(--color-accent); border:1px solid var(--color-accent); }

body.app-shell:has(.album-page,.memory-page,.album-editor) { background:var(--color-canvas); color:var(--color-ink); }
body.app-shell:has(.album-page,.memory-page,.album-editor) .app-header { background:var(--color-canvas); border-color:var(--color-rule); }
.app-shell .album-page .album-results h2,.app-shell .memory-page>a:first-child,.app-shell .album-editor>a:first-child { color:var(--color-muted); }
.app-shell .album-page .inspect-media { color:#182a2a; }