/* app/web/static/css/app.css - layout only; all values from tokens.css */
* { box-sizing: border-box; }
body { margin: var(--space-0); font-family: var(--font-ui); color: var(--color-ink); background: var(--color-canvas); }
.tnum { font-variant-numeric: tabular-nums; }
.topbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-bottom: var(--space-px) solid var(--color-line); background: var(--color-surface); }
.topbar__wordmark { font-family: var(--font-display); color: var(--color-ink); text-decoration: none; }
.topbar__search { flex: 1; }
.input { width: 100%; padding: var(--space-2) var(--space-3); font-family: var(--font-ui); color: var(--color-ink); background: var(--color-surface-sunken); border: var(--space-px) solid var(--color-line); border-radius: var(--radius-md); }
.input:focus-visible { outline: var(--space-px) solid var(--color-focus); outline-offset: var(--space-px); }
.badge { padding: var(--space-0) var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-sunken); }
.content { max-width: var(--measure); margin: var(--space-0) auto; padding: var(--space-5); }
.btn { padding: var(--space-2) var(--space-4); font-family: var(--font-ui); border-radius: var(--radius-md); border: var(--space-px) solid var(--color-line); cursor: pointer; }
.btn--primary { background: var(--color-accent); color: var(--color-ink-inverse); border-color: var(--color-accent); }
.btn--secondary { background: var(--color-surface); color: var(--color-ink); }
.btn--danger { background: var(--color-danger); color: var(--color-ink-inverse); border-color: var(--color-danger); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.login { max-width: var(--measure); margin: var(--space-9) auto; padding: var(--space-6); }
.login__title { font-family: var(--font-display); text-align: center; }
.login__form { display: flex; flex-direction: column; gap: var(--space-3); }
.login__error { color: var(--color-danger); }
.login__label { font-family: var(--font-ui); font-size: var(--fs-100); color: var(--color-ink-muted); }

.topbar__inbox { display: flex; align-items: center; gap: var(--space-2); color: var(--color-ink); text-decoration: none; }
.topbar__sync { display: inline-block; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--color-ink-faint); }
.topbar__sync--idle { background: var(--color-ink-faint); }
.topbar__sync--syncing { background: var(--color-info); }
.topbar__sync--degraded { background: var(--color-danger); }

.toast-host { position: fixed; bottom: var(--space-5); right: var(--space-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-3); max-width: calc(100vw - var(--space-8)); }
.toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface-raised); border: var(--space-px) solid var(--color-line); border-left: var(--space-1) solid var(--color-line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.toast--error { border-left-color: var(--color-danger); }
.toast--success { border-left-color: var(--color-success); }
.toast__msg { flex: 1; font-family: var(--font-ui); font-size: var(--fs-100); color: var(--color-ink); }
.toast__close { flex: none; background: transparent; border: none; color: var(--color-ink-muted); cursor: pointer; font-size: var(--fs-200); line-height: var(--lh-tight); padding: var(--space-0); }

.banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); font-family: var(--font-ui); font-size: var(--fs-100); border-bottom: var(--space-px) solid transparent; }
.banner--degraded { background: var(--color-warning-tint); color: var(--color-warning-ink); border-bottom-color: color-mix(in oklch, var(--color-warning) 40%, transparent); }
.banner__msg { flex: 1; }
.banner__link { color: inherit; text-decoration: underline; }
.banner__close { flex: none; background: transparent; border: none; color: inherit; cursor: pointer; font-size: var(--fs-200); line-height: var(--lh-tight); padding: var(--space-0); }

.dialog-overlay { position: fixed; inset: var(--space-0); background: color-mix(in oklch, var(--color-ink) 45%, transparent); z-index: var(--z-dialog); display: grid; place-items: center; padding: var(--space-5); }
.dialog { max-width: var(--measure); width: 100%; background: var(--color-surface-raised); border: var(--space-px) solid var(--color-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-6); }
.dialog__title { font-family: var(--font-display); font-size: var(--fs-500); font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); }
.dialog__body { color: var(--color-ink-muted); margin-top: var(--space-2); line-height: var(--lh-relaxed); }
.dialog__reason { width: 100%; margin-top: var(--space-4); padding: var(--space-2) var(--space-3); font-family: var(--font-ui); color: var(--color-ink); background: var(--color-surface-sunken); border: var(--space-px) solid var(--color-line); border-radius: var(--radius-md); resize: vertical; }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }

.boundary { max-width: var(--measure); margin: var(--space-8) auto; text-align: center; padding: var(--space-8); border: var(--space-px) solid var(--color-line); border-radius: var(--radius-xl); background: var(--color-surface); }
.boundary__msg { color: var(--color-ink-muted); margin-top: var(--space-3); line-height: var(--lh-relaxed); }

.error-state { max-width: var(--measure); margin: var(--space-8) auto; text-align: center; padding: var(--space-6); }
.error-state__msg { color: var(--color-ink-muted); line-height: var(--lh-relaxed); }

.gallery__row { margin-top: var(--space-6); }

/* --- 8c screen additions (token-only; no inline styles - CSP style-src 'self') --- */
.icon-sprite { position: absolute; width: 0; height: 0; }

/* Area dot colours (design-system used inline style="background:var(--color-area-N)";
   CSP forbids inline style, so area name -> stable class via areaDotClass()). */
.chip--area .dot.dot--area-1 { background: var(--color-area-1); }
.chip--area .dot.dot--area-2 { background: var(--color-area-2); }
.chip--area .dot.dot--area-3 { background: var(--color-area-3); }
.chip--area .dot.dot--area-4 { background: var(--color-area-4); }
.chip--area .dot.dot--area-5 { background: var(--color-area-5); }
.chip--area .dot.dot--area-6 { background: var(--color-area-6); }

/* Screen-body helpers not in the design-system component block */
.results-list { display: flex; flex-direction: column; gap: var(--space-3); }
.load-more { display: flex; justify-content: center; margin-top: var(--space-5); }
.page-path { margin-bottom: var(--space-4); }

/* Extra StatusBanner kinds (8a app.css defines .banner + .banner--degraded in BEM;
   the queue uses kind="warning" for inbox-rot and a raw .banner--info for the batch
   outcome, both matching the 8a .banner__msg structure). */
.banner--warning { background: var(--color-warning-tint); color: var(--color-warning-ink); border-bottom-color: color-mix(in oklch, var(--color-warning) 40%, transparent); }
.banner--info { background: var(--color-surface-sunken); color: var(--color-ink); }

/* Admin screen (no design-system mockup) */
.admin-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--space-px) solid var(--color-line-faint); font-size: var(--fs-100); }
.admin-row--ok .admin-status { color: var(--color-verified-ink); }
.admin-row--fail .admin-status { color: var(--color-danger); }
.admin-status { display: inline-flex; align-items: center; gap: var(--space-1); }

/* Single-column mobile breakpoint (ui-ux 7) - overrides the transposed grid
   layouts. Lives in components.css, not here: media-query breakpoints can't
   reference CSS custom properties (var() is invalid inside @media conditions
   in any browser), and test_ui_tokens.py::test_no_hex_or_px_literals_in_app_css
   forbids a raw pixel width anywhere in app.css. components.css is the
   sanctioned home for the design-system's own literal pixel values, so the
   override lives there (see the RESPONSIVE section at the bottom of
   components.css) instead. */