@layer reset, tokens, base, components, utilities;

/* ============================================================
 * Cheese House design system tokens, adapted from the brand
 * handoff (external bundle — see README.md "Design system").
 * Exo 2 + Source Sans 3 are self-hosted (public/fonts/) rather
 * than loaded from Google Fonts, so the app works offline and
 * the CSP in public/_headers needs no third-party font-src.
 * ============================================================ */
@layer tokens {
  @font-face {
    font-family: "Exo 2";
    src: url("/fonts/Exo2-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Source Sans 3";
    src: url("/fonts/SourceSans3-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
  }

  :root {
    color-scheme: light;

    /* ====== Core palette ====== */
    --color-primary:        #2C2117;
    --color-primary-hover:  #1A1410;
    --color-gold:           #D4A017; /* fill only — never text on a light surface */
    --color-gold-hover:     #B58812;
    --color-rust:           #7A3E1D; /* the "gold-feeling" text/link/focus color */
    --color-rust-hover:     #5E2F15;

    /* ====== Neutrals (warm-tinted, not gray) ====== */
    --color-ink:            #2C2117;
    --color-body:           #4A4036;
    --color-muted:          #6B6358;
    --color-line:           #E7E1D6;
    --color-surface:        #FFFFFF;
    --color-surface-warm:   #F7F2E9;
    --color-surface-sand:   #EFE7D8;
    --color-surface-dark:   #2C2117;

    /* ====== Semantic ====== */
    --color-success:        #3F7D4E;
    --color-danger:         #B23A2F;
    --color-warning:        #C8841A;
    --color-info:           #4A6E84;

    /* Generic aliases used throughout this file, so component rules read the
       same regardless of which brand token backs them. */
    --color-bg:          var(--color-surface-warm);
    --color-text:        var(--color-ink);
    --color-text-muted:  var(--color-muted);
    --color-border:      var(--color-line);
    --color-accent-fill: var(--color-gold);   /* buttons, FAB, badges: fill only */
    --color-accent-text: var(--color-rust);   /* links, active nav, focus ring */

    /* ====== Typography ====== */
    --font-head: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-sans: var(--font-body);

    --text-h1:      clamp(26px, 5vw, 32px);
    --text-h2:      22px;
    --text-h3:      18px;
    --text-body:    16px;
    --text-body-s:  14px;
    --text-caption: 13px;
    --text-overline:11.5px;

    /* ====== Spacing (4px base) ====== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* ====== Radii ====== */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-pill: 999px;

    /* ====== Shadows (warm-tinted) ====== */
    --shadow-sm:   0 1px 2px rgba(44,33,23,.06);
    --shadow-md:   0 4px 12px rgba(44,33,23,.10);
    --shadow-lg:   0 12px 28px rgba(44,33,23,.16);
    --shadow-gold: 0 10px 26px rgba(212,160,23,.32);
  }

  @media (forced-colors: active) {
    :root {
      --color-border: CanvasText;
    }
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
  }

  img {
    max-width: 100%;
    display: block;
  }

  input,
  textarea,
  select,
  button {
    font: inherit;
    color: inherit;
  }

  /* Several components below set their own `display` (flex/grid/etc.), which
     an author stylesheet rule of equal specificity to the UA's `[hidden]`
     would otherwise win over in source order — so this must stay authored
     after those base resets and win explicitly, not rely on the UA default. */
  [hidden] {
    display: none !important;
  }
}

@layer base {
  html {
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  h1, h2, h3 {
    font-family: var(--font-head);
    font-weight: 700;
    text-wrap: balance;
    line-height: 1.2;
    color: var(--color-ink);
  }

  h1 { font-size: var(--text-h1); letter-spacing: -0.01em; }
  h2 { font-size: var(--text-h2); }
  h3 { font-size: var(--text-h3); }

  p {
    text-wrap: pretty;
  }

  a {
    color: var(--color-accent-text);
  }
  a:hover {
    color: var(--color-rust-hover);
  }

  /* A visible, high-contrast focus ring on every interactive element — gold
     fails WCAG non-text contrast on our light surfaces (this is exactly why
     the system reserves gold for fills), so keyboard focus always uses rust. */
  :where(a:any-link, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 3px solid var(--color-accent-text);
    outline-offset: 2px;
  }
}

@layer components {
  /* ===== App chrome ===== */
  .app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .app-header__title {
    font-size: 1.05rem;
    margin: 0;
  }

  .app-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-ink);
  }

  .app-header__brand img {
    inline-size: 28px;
    block-size: 28px;
  }

  .app-main {
    flex: 1;
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
    padding: var(--space-4) var(--space-4) calc(var(--space-8) + 5.5rem);
  }

  .app-main--wide {
    max-width: 64rem;
  }

  .app-main--flush {
    padding: 0 0 calc(var(--space-8) + 5.5rem);
    max-width: none;
  }

  /* ===== Bottom tab bar with center FAB (mobile-first capture flow) ===== */
  .app-nav {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom, 0));
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-block-start: 1px solid var(--color-border);
    z-index: 40;
    /* iOS Safari can visibly lag/detach position:fixed elements that also use
       backdrop-filter during momentum scroll (looks like the bar "runs away"
       while scrolling a long list). Forcing a compositor layer keeps it
       pinned smoothly instead. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }

  .app-nav__link {
    flex: 0 1 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding-block-start: var(--space-1);
    text-decoration: none;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    min-block-size: 48px;
  }

  .app-nav__link[aria-current="page"] {
    color: var(--color-accent-text);
  }

  .app-nav__link svg {
    inline-size: 23px;
    block-size: 23px;
  }

  /* The scan/capture action is the app's primary CTA — elevated gold FAB,
     pinned to the right of the tab bar (closer to the thumb than center on
     a one-handed phone grip), matching the design system's "Scan" button. */
  .app-nav__fab {
    position: relative;
    inset-block-start: -18px;
    inline-size: 60px;
    block-size: 60px;
    flex: 0 0 auto;
    margin-inline-start: auto;
    border: 0;
    border-radius: 50%;
    background: var(--color-accent-fill);
    color: var(--color-ink);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-gold);
    text-decoration: none;
  }
  .app-nav__fab:active {
    background: var(--color-gold-hover);
  }
  .app-nav__fab svg {
    inline-size: 26px;
    block-size: 26px;
  }

  /* ===== Forms ===== */
  .field {
    margin-block-end: var(--space-4);
  }

  .field label {
    display: block;
    font-weight: 600;
    margin-block-end: var(--space-2);
    color: var(--color-ink);
  }

  .field .hint {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-block-start: var(--space-1);
  }

  .field input,
  .field textarea,
  .field select {
    inline-size: 100%;
    min-block-size: 48px;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .field input:focus-within,
  .field input:focus {
    border-color: var(--color-gold);
  }

  @media (pointer: coarse) {
    .field input,
    .field textarea,
    .field select {
      min-block-size: 52px;
    }
  }

  .field :where(input, textarea):user-invalid {
    border-color: var(--color-danger);
  }

  .field-error {
    display: none;
    color: var(--color-danger);
    font-size: 0.85rem;
    margin-block-start: var(--space-1);
  }

  .field :where(input, textarea):user-invalid ~ .field-error {
    display: block;
  }

  .checkbox-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 400;
  }
  .checkbox-field input {
    inline-size: auto;
    min-block-size: auto;
  }

  /* Pill-shaped search bar, matching the brand's searchbar component. */
  .search-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 48px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding-inline: var(--space-4);
    box-shadow: var(--shadow-sm);
  }
  .search-bar svg {
    color: var(--color-text-muted);
    flex: 0 0 auto;
  }
  .search-bar input {
    border: 0;
    outline: 0;
    flex: 1;
    min-block-size: auto;
    padding: var(--space-2) 0;
    background: transparent;
    font-size: var(--text-body);
  }
  .search-bar:focus-within {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, .18);
  }
  .search-bar__clear {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    padding: var(--space-1);
    display: flex;
  }

  /* ===== Buttons ===== */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 48px;
    padding-inline: var(--space-6);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    /* Primary/rust surfaces get white text; see .btn--gold for the exception. */
    background: var(--color-primary);
    color: #fff;
  }

  .btn:hover {
    background: var(--color-primary-hover);
  }

  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .btn--gold {
    background: var(--color-accent-fill);
    color: var(--color-ink); /* gold-accent buttons get dark text, never white */
    box-shadow: var(--shadow-gold);
  }
  .btn--gold:hover {
    background: var(--color-gold-hover);
  }

  .btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
  }
  .btn--secondary:hover {
    background: var(--color-surface-sand);
  }

  .btn--danger {
    background: var(--color-danger);
    color: #fff;
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  /* Round icon button, e.g. back/close controls on a topbar. */
  .icon-btn {
    inline-size: 40px;
    block-size: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
  }
  .icon-btn:active {
    transform: translateY(1px);
  }

  /* ===== Cards, badges, tables ===== */
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-block-end: var(--space-4);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .badge--draft {
    color: var(--color-warning);
    background: rgba(200, 132, 26, .15);
  }

  .badge--confirmed {
    color: var(--color-success);
    background: rgba(63, 125, 78, .12);
  }

  .thumb {
    inline-size: 100%;
    max-block-size: 16rem;
    object-fit: contain;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-sand);
    margin-block-end: var(--space-4);
  }

  .skip-link {
    position: fixed;
    inset-block-start: -100%;
    inset-inline-start: var(--space-2);
    background: var(--color-accent-fill);
    color: var(--color-ink);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    z-index: 100;
  }
  .skip-link:focus {
    inset-block-start: var(--space-2);
  }

  .filters {
    margin-block-end: var(--space-4);
  }
  .filters summary {
    cursor: pointer;
    font-weight: 700;
    padding-block: var(--space-2);
    color: var(--color-ink);
  }

  table {
    inline-size: 100%;
    border-collapse: collapse;
  }
  th, td {
    text-align: start;
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--color-border);
  }
  th {
    font-family: var(--font-head);
    color: var(--color-muted);
    font-size: var(--text-body-s);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
  }

  .tabnav {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    margin-block-end: var(--space-4);
    border-block-end: 1px solid var(--color-border);
  }
  .tabnav a {
    padding: var(--space-3) var(--space-1);
    text-decoration: none;
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
    border-block-end: 3px solid transparent;
  }
  .tabnav a[aria-current="page"] {
    color: var(--color-ink);
    border-block-end-color: var(--color-accent-fill);
  }

  .banner {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-block-end: var(--space-4);
    font-size: var(--text-body-s);
  }
  .banner--info {
    background: var(--color-primary);
    color: #fff;
  }
  .banner--error {
    background: rgba(178, 58, 47, .08);
    border: 1px solid rgba(178, 58, 47, .3);
    color: var(--color-danger);
  }
  .banner--success {
    background: rgba(63, 125, 78, .1);
    border: 1px solid rgba(63, 125, 78, .3);
    color: var(--color-success);
  }
  .banner--warning {
    background: rgba(200, 132, 26, .1);
    border: 1px solid rgba(200, 132, 26, .35);
    color: var(--color-warning);
  }

  /* ===== Record list (records.html / search.html) ===== */
  .day-divider {
    font-size: var(--text-overline);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 700;
    margin: var(--space-5) var(--space-1) var(--space-2);
  }

  .record-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .record-list li + li {
    margin-block-start: var(--space-3);
  }

  .record-card {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    width: 100%;
    text-align: start;
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3);
    color: inherit;
  }
  .record-card:active {
    box-shadow: var(--shadow-md);
    transform: translateY(1px);
  }

  .record-card__thumb {
    inline-size: 56px;
    block-size: 56px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--color-surface-sand);
    object-fit: cover;
    position: relative;
  }
  .record-card__thumb-fallback {
    inline-size: 56px;
    block-size: 56px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--color-surface-sand);
    color: var(--color-rust);
    display: grid;
    place-items: center;
  }

  .record-card__body {
    flex: 1;
    min-width: 0;
  }
  .record-card__name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15.5px;
    color: var(--color-ink);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .record-card__meta {
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin-block-start: var(--space-1);
  }
  .record-card__meta b {
    color: var(--color-body);
    font-weight: 700;
  }
  .record-card__arrow {
    color: var(--color-line);
    flex: 0 0 auto;
  }

  .exp-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    margin-block-start: var(--space-2);
  }
  .exp-pill.ok {
    color: var(--color-success);
    background: rgba(63, 125, 78, .11);
  }
  .exp-pill.soon {
    color: var(--color-warning);
    background: rgba(200, 132, 26, .15);
  }
  .exp-pill.expired {
    color: var(--color-danger);
    background: rgba(178, 58, 47, .12);
  }

  .empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    color: var(--color-text-muted);
  }
  .empty-state__icon {
    inline-size: 60px;
    block-size: 60px;
    margin: 0 auto var(--space-4);
    border-radius: 50%;
    background: var(--color-surface-sand);
    color: var(--color-rust);
    display: grid;
    place-items: center;
  }

  .lot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
  }
  .lot-chip {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-pill);
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-rust);
  }
  .lot-chip:active {
    background: var(--color-surface-sand);
  }

  .recall-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: rgba(178, 58, 47, .08);
    border: 1px solid rgba(178, 58, 47, .25);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    font-size: var(--text-body-s);
  }
  .recall-banner svg {
    color: var(--color-danger);
    flex: 0 0 auto;
    margin-block-start: 2px;
  }

  /* ===== Home header (records.html) ===== */
  .home-header {
    padding: var(--space-2) 0 var(--space-4);
  }
  .home-header .eyebrow {
    font-size: var(--text-overline);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-rust);
    font-weight: 700;
  }
  .home-header h1 {
    margin: 3px 0 0;
  }
  .home-header .sub {
    font-size: var(--text-body-s);
    color: var(--color-text-muted);
    margin-block-start: var(--space-1);
  }

  /* ===== Capture (camera) screen ===== */
  .cam-screen {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #16100b;
    color: #fff;
  }
  .cam-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) 0;
  }
  .cam-topbar .icon-btn {
    background: rgba(0, 0, 0, .4);
    border-color: transparent;
    color: #fff;
  }
  .cam-topbar .label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-body);
    /* Now an <h1> (a11y fix): the base h1{color:var(--color-ink)} rule (an
       earlier @layer) would otherwise win this property over the inherited
       #fff from .cam-screen's dark background, since no later-layer rule
       here was setting color. Keep it inheriting the light-on-dark color. */
    color: inherit;
    /* Also an <h1> now: reset the browser's default h1 block margin
       (~0.67em) so this flex topbar keeps its pre-promotion layout. */
    margin: 0;
  }
  .cam-topbar__spacer {
    inline-size: 40px;
  }
  .cam-status {
    margin: 0 var(--space-4) var(--space-3);
  }

  .cam-feed {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-block-size: 55dvh;
  }
  .cam-feed::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, #2a2018 0 26px, #241b13 26px 52px);
    opacity: .9;
  }
  .cam-feed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 55% at 50% 42%, rgba(212, 160, 23, .12), transparent 70%);
  }
  .cam-video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .cam-video[hidden] {
    display: none;
  }
  .cam-fallback {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
    padding: 0 var(--space-6);
  }
  .cam-fallback[hidden] {
    display: none;
  }

  .cam-reticle {
    position: relative;
    width: min(76vw, 280px);
    aspect-ratio: 4 / 5;
    z-index: 2;
  }
  .cam-reticle .corner {
    position: absolute;
    width: 34px;
    height: 34px;
    border: 3px solid var(--color-gold);
  }
  .cam-reticle .corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 16px 0 0 0; }
  .cam-reticle .corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; border-radius: 0 16px 0 0; }
  .cam-reticle .corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; border-radius: 0 0 0 16px; }
  .cam-reticle .corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 16px 0; }
  .cam-reticle .scanline {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    border-radius: 2px;
    box-shadow: 0 0 12px 1px rgba(212, 160, 23, .6);
    animation: cam-scan 2.2s ease-in-out infinite;
  }
  @keyframes cam-scan {
    0%, 100% { top: 6%; }
    50% { top: 92%; }
  }

  .cam-hint {
    position: relative;
    z-index: 3;
    text-align: center;
    color: rgba(255, 255, 255, .82);
    font-size: var(--text-body-s);
    padding: 0 var(--space-6);
    margin-block-start: var(--space-4);
  }
  .cam-hint b {
    color: var(--color-gold);
    font-weight: 700;
  }

  .cam-bar {
    padding: var(--space-5) var(--space-5) calc(var(--space-8) + env(safe-area-inset-bottom, 0));
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: linear-gradient(0deg, #120c08, rgba(18, 12, 8, .2));
  }
  .cam-upload-btn {
    justify-self: start;
    inline-size: 44px;
    block-size: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
    color: #fff;
  }
  .cam-upload-btn svg {
    inline-size: 22px;
    block-size: 22px;
  }
  .cam-bar__spacer {
    inline-size: 44px;
  }
  .cam-shutter-label {
    inline-size: 74px;
    block-size: 74px;
    border-radius: 50%;
    border: 4px solid #fff;
    padding: 4px;
    display: block;
    cursor: pointer;
  }
  .cam-shutter-label i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    font-style: normal;
    transition: transform .1s;
  }
  .cam-shutter-label:active i {
    transform: scale(.88);
  }
  .cam-shutter-label[aria-disabled="true"] {
    opacity: .5;
    pointer-events: none;
  }

  /* ===== Processing overlay ===== */
  .processing-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-surface-warm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8);
    z-index: 60;
  }
  .processing-overlay[hidden] {
    display: none;
  }
  .processing-overlay__art {
    inline-size: 160px;
    block-size: 200px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
    background: repeating-linear-gradient(135deg, #E7B84A 0 14px, #D99E2B 14px 28px);
  }
  .processing-overlay__art::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 46%;
    background: linear-gradient(0deg, transparent, rgba(212, 160, 23, .32), transparent);
    animation: proc-sweep 1.5s ease-in-out infinite;
  }
  @keyframes proc-sweep {
    0% { top: -46%; }
    100% { top: 100%; }
  }
  .processing-overlay h2 {
    margin: var(--space-6) 0 var(--space-1);
  }
  .processing-overlay p {
    font-size: var(--text-body-s);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 20rem;
  }
  .processing-steps {
    margin-block-start: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 15rem;
    text-align: start;
  }
  .processing-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-body-s);
    color: var(--color-text-muted);
  }
  .processing-step.done {
    color: var(--color-body);
  }
  .processing-step__dot {
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
  }
  .processing-step.done .processing-step__dot {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
  }
  .processing-step.active .processing-step__dot {
    border-color: var(--color-gold);
    border-top-color: transparent;
    animation: proc-spin .7s linear infinite;
  }
  @keyframes proc-spin {
    to { transform: rotate(360deg); }
  }

  /* ===== Review screen ===== */
  .topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-2);
  }
  .topbar .tt {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h3);
    /* Also an <h1> now: reset the browser's default h1 block margin
       (~0.67em) so this flex topbar keeps its pre-promotion layout. */
    margin: 0;
  }

  .ai-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-block-end: var(--space-4);
    box-shadow: var(--shadow-md);
  }
  .ai-banner__icon {
    inline-size: 38px;
    block-size: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(212, 160, 23, .2);
    color: var(--color-gold);
    display: grid;
    place-items: center;
  }
  .ai-banner__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-body-s);
  }
  .ai-banner__desc {
    font-size: var(--text-caption);
    color: rgba(255, 255, 255, .75);
    margin-block-start: 2px;
  }
  .ai-banner--warning {
    background: var(--color-warning);
  }
  .ai-banner--warning .ai-banner__icon {
    background: rgba(255, 255, 255, .25);
    color: #fff;
  }
  .ai-banner--warning .ai-banner__desc {
    color: rgba(255, 255, 255, .85);
  }

  .shot-strip {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    margin-block-end: var(--space-5);
    box-shadow: var(--shadow-sm);
  }
  .shot-strip img {
    inline-size: 52px;
    block-size: 64px;
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
    object-fit: cover;
  }
  .shot-strip__text {
    flex: 1;
    min-width: 0;
  }
  .shot-strip__a {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-ink);
  }
  .shot-strip__b {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-block-start: 2px;
  }

  .field-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
  }
  .field-card .flabel {
    font-size: var(--text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .field-card input {
    border: 0;
    padding: 0;
    min-block-size: auto;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    color: var(--color-ink);
    margin-block-start: 2px;
    width: 100%;
    background: transparent;
  }
  .field-card input:focus {
    outline: none;
  }
  .field-card:focus-within {
    border-color: var(--color-gold);
  }

  .flag-note {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: var(--text-body-s);
    color: var(--color-warning);
    background: rgba(200, 132, 26, .09);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-block: var(--space-1) var(--space-4);
  }
  .flag-note svg {
    flex: 0 0 auto;
    margin-block-start: 2px;
  }

  /* Sticky save footer, used on review.html */
  .sticky-footer {
    position: sticky;
    bottom: 0;
    background: linear-gradient(0deg, var(--color-surface-warm) 65%, transparent);
    padding: var(--space-4) 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0));
    margin-block-start: var(--space-2);
  }
  .lock-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    margin-block-start: var(--space-3);
  }
  .lock-line svg {
    color: var(--color-success);
  }

  /* ===== Saved screen ===== */
  .saved-screen {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8);
  }
  .saved-screen__seal {
    inline-size: 88px;
    block-size: 88px;
    border-radius: 50%;
    background: var(--color-success);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 34px rgba(63, 125, 78, .34);
  }
  .saved-screen h1 {
    margin: var(--space-6) 0 var(--space-1);
  }
  .saved-screen p {
    color: var(--color-text-muted);
    max-width: 22rem;
    margin: 0;
  }
  .saved-screen__idchip {
    margin-block-start: var(--space-4);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-body-s);
    color: var(--color-rust);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
  }
  .saved-screen__lockrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
    font-size: var(--text-caption);
    color: var(--color-body);
    background: rgba(63, 125, 78, .1);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
  }
  .saved-screen__lockrow svg {
    color: var(--color-success);
  }
  .saved-screen .btn-row {
    flex-direction: column;
    width: 100%;
    max-width: 20rem;
    margin-block-start: var(--space-6);
  }

  /* ===== Entry detail screen ===== */
  .detail-hero {
    block-size: 220px;
    position: relative;
    margin: 0 calc(-1 * var(--space-4));
    background: var(--color-surface-sand);
  }
  .detail-hero img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .detail-hero__zoom {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
  }
  .photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 7, 4, .92);
  }
  .photo-lightbox[hidden] {
    display: none;
  }
  .photo-lightbox img {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
  }
  .photo-lightbox__close {
    position: absolute;
    inset-block-start: max(var(--space-4), env(safe-area-inset-top, 0));
    inset-inline-end: var(--space-4);
    inline-size: 40px;
    block-size: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
    color: #fff;
  }
  .detail-hero__badge {
    position: absolute;
    right: var(--space-4);
    top: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(13, 10, 7, .6);
    color: #fff;
    font-size: var(--text-caption);
    font-weight: 700;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
  }
  .detail-hero__badge svg {
    color: var(--color-gold);
  }
  .detail-name {
    margin: var(--space-4) 0 2px;
  }
  .detail-id {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
  }

  .detail-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-block-end: 1px solid var(--color-border);
  }
  .detail-row:last-child {
    border-block-end: 0;
  }
  .detail-row__icon {
    inline-size: 36px;
    block-size: 36px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sand);
    color: var(--color-rust);
    display: grid;
    place-items: center;
  }
  .detail-row__label {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    font-weight: 600;
  }
  .detail-row__value {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15.5px;
    color: var(--color-ink);
    margin-block-start: 1px;
  }

  /* Audit trail, dark card with a dot timeline. */
  .audit-card {
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-5) var(--space-2);
    margin-block-start: var(--space-4);
  }
  .audit-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: #fff;
    margin-block-end: var(--space-1);
  }
  .audit-card__header svg {
    color: var(--color-gold);
  }
  .audit-card__header .tt {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-body-s);
  }
  .audit-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-block-start: 1px solid rgba(255, 255, 255, .1);
  }
  .audit-item:first-of-type {
    border-block-start: 0;
  }
  .audit-item__dot {
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    background: var(--color-gold);
    margin-block-start: 5px;
    flex: 0 0 auto;
  }
  .audit-item__label {
    font-size: 13.5px;
    color: #fff;
    font-weight: 600;
  }
  .audit-item__meta {
    font-size: var(--text-caption);
    color: rgba(255, 255, 255, .6);
    margin-block-start: 2px;
  }
  .audit-item__reason {
    font-size: var(--text-caption);
    color: rgba(255, 255, 255, .85);
    margin-block-start: 2px;
  }

  /* ===== Login screen ===== */
  .login-shell {
    max-width: 24rem;
    margin-inline: auto;
    padding-block-start: 10dvh;
    text-align: center;
  }
  .login-shell__mark {
    inline-size: 64px;
    block-size: 64px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: var(--color-gold);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-md);
  }
  .login-shell h1 {
    margin-block-end: 2px;
  }
  .login-shell form {
    text-align: start;
    margin-block-start: var(--space-6);
  }
}

@layer utilities {
  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  .text-center { text-align: center; }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .cluster {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .cluster > .field { flex: 1; }
  .field--align-end { align-self: end; }

  .fieldset-reset {
    border: 0;
    padding: 0;
    margin: 0;
  }

  .mt-1 { margin-block-start: var(--space-1); }
  .mt-2 { margin-block-start: var(--space-2); }
  .mt-4 { margin-block-start: var(--space-4); }
  .mt-6 { margin-block-start: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}