/* ============================================================================
   FAS Helper — styles.css
   ----------------------------------------------------------------------------
   No build step, no preprocessor. Read top-down:
     1. :root design tokens — spacing, radius, color, shadow, z-index ladder.
     2. Resets + global rules ([hidden], .sr-only, prefers-reduced-motion,
        @supports fallback for backdrop-filter).
     3. Section blocks in roughly the same order as the page flow:
        auth → folder → summary → grid → modal → tag picker → upload → toasts.
     4. A "Polish pass" block at the end with rules that override earlier
        sections without restructuring the file above.

   KEY DESIGN DECISIONS
     - Mobile-first is NOT used. The desktop layout is the base; @media blocks
       at the bottom shrink things for tablet/mobile. We're targeting iPad.
     - Sticky offsets in .filterbar (top: 56px / 96px) assume the .topbar's
       rendered height. If you change topbar padding, update those offsets.
     - All elevation/depth comes from --sh-1/--sh-2/--sh-3. Don't hand-author
       box-shadow values; reach for the tokens.
     - .modal-open on <body> hides the toast stack so toasts don't collide
       with the photo control bar. JS toggles it (avoids :has() compat issues).
   ============================================================================ */

/* =================== design tokens — refreshed 2026-06-21 =================== */
:root {
  /* spacing — 4 / 8 / 12 / 16 / 24 / 32 ladder */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* radius scale — softened (modern apps land 6 / 10 / 14) */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* color palette — neutral cool greys, indigo primary, modern accents */
  --c-bg: #f7f8fb;
  --c-surface: #ffffff;
  --c-surface-elev: #ffffff;
  --c-text: #0f1623;
  --c-text-dim: #5a6373;
  --c-text-mute: #8b93a4;
  --c-border: #e3e6ee;
  --c-border-soft: #eef0f6;
  --c-border-strong: #c8cfdb;

  --c-primary: #4f46e5;          /* indigo-600 */
  --c-primary-hover: #4338ca;    /* indigo-700 */
  --c-primary-soft: #eef2ff;     /* indigo-50  — for tinted backgrounds */
  --c-primary-text-on-soft: #3730a3;

  --c-warn-bg: #fff7ed;          /* amber-50  */
  --c-warn-border: #f59e0b;      /* amber-500 */
  --c-warn-text: #92400e;        /* amber-800 */

  --c-success-bg: #ecfdf5;       /* emerald-50  */
  --c-success-text: #047857;     /* emerald-700 */

  --c-danger-bg: #fef2f2;        /* red-50   */
  --c-danger-text: #b91c1c;      /* red-700  */

  /* shadow scale — for depth without overdoing it */
  --sh-1: 0 1px 2px rgba(15, 22, 35, 0.04), 0 1px 1px rgba(15, 22, 35, 0.03);
  --sh-2: 0 4px 12px rgba(15, 22, 35, 0.06), 0 1px 2px rgba(15, 22, 35, 0.04);
  --sh-3: 0 12px 28px rgba(15, 22, 35, 0.10), 0 4px 8px rgba(15, 22, 35, 0.05);
  --sh-focus: 0 0 0 3px rgba(79, 70, 229, 0.25);

  /* min tap target (Apple HIG / WCAG 2.5.8) */
  --tap-min: 44px;
  --tap-gap: 8px;

  /* z-index ladder — single source of truth, increment by 10 per layer */
  --z-sticky: 20;
  --z-topbar: 30;
  --z-bulkbar: 40;
  --z-footer: 50;
  --z-modal: 100;
  --z-sheet: 110;
  --z-kbd-overlay: 130;
  --z-toast: 200;
}

/* =================== reset / base ==========================================
   Minimal reset — no Normalize, no preflight. We rely on a small set of
   global rules: [hidden] guardrail, .sr-only utility, reduced-motion media
   query, the @supports fallback above, and root typography below.
   ========================================================================== */
* { box-sizing: border-box; }

/* Global guardrail: HTML `hidden` should ALWAYS win over any later
   display rule (this regression class has bitten .page, .modal-backdrop,
   .empty-state — fix it once for the whole codebase). */
[hidden] { display: none !important; }

/* Visually-hidden but readable to screen readers. Use for accessible names
   that don't have a visual counterpart (e.g. dialog titles handled by
   in-modal chrome that we want to keep visually minimal). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect users with vestibular disorders. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Frosted-glass surfaces (topbar/filterbar/footer/toast/modal-backdrop/
   ctrl-group/bulkbar) use backdrop-filter. On browsers that don't support
   it AT ALL we fall back to opaque tints — otherwise these elements would
   render as transparent rectangles with no contrast against the content
   behind them. The blanket override below lands them safely. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .filterbar, .footer, .toast,
  .modal-backdrop, .ctrl-group, .bulkbar {
    background-color: var(--c-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .topbar, .filterbar { background-color: rgba(255, 255, 255, 0.96) !important; }
  .modal-backdrop { background-color: rgba(15, 22, 35, 0.6) !important; }
  .toast, .ctrl-group, .bulkbar { background-color: rgba(15, 22, 35, 0.96) !important; }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';   /* Inter cleaner letterforms */
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { letter-spacing: -0.02em; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-color: var(--c-primary);
}

/* =================== page show/hide ========================================
   Each .page is a full-viewport <section>. showPage(id) in app.js sets the
   target page's `hidden` to false and hides every other; the global
   `[hidden]` rule does the actual display:none. The .wide variant removes
   the centered max-width so the grid / summary can fill the viewport.
   ========================================================================== */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-6) var(--sp-5);
}

/* Soft purple wash on auth-style pages — keeps them feeling "fresh" */
#page-login-email,
#page-login-password {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(79, 70, 229, 0.08), transparent 60%),
    var(--c-bg);
}

/* Very subtle wash on the folder pick + summary so empty space doesn't feel flat */
#page-folder,
#page-summary {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(79, 70, 229, 0.04), transparent 70%),
    var(--c-bg);
}

.page.wide {
  align-items: stretch;
  padding: 0;
}

.page[hidden] { display: none; }

/* =================== auth =================== */
.auth-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  margin-top: 60px;
  box-shadow: var(--sh-3);
}

.auth-card .logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: 1.5px;
  margin-bottom: var(--sp-5);
  font-size: 13px;
}

.auth-card h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
}

.auth-card .subtitle {
  color: var(--c-text-mute);
  margin-bottom: var(--sp-5);
  font-size: 14px;
}

.auth-card input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 15px;
  margin-bottom: var(--sp-3);
  min-height: 48px;
  background: var(--c-surface);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.auth-card input:focus {
  border-color: var(--c-primary);
  box-shadow: var(--sh-focus);
}

.auth-card .primary {
  width: 100%;
  margin-bottom: 12px;
}

.auth-card .link {
  display: block;
  font-size: 14px;
  color: #2c5fcf;
  text-decoration: none;
  margin-top: 12px;
  padding: 6px;
}

.auth-card .auth-error {
  margin-top: 0;
  margin-bottom: var(--sp-3);
  padding: 10px 12px;
  font-size: 14px;
  text-align: left;
}

.auth-card .auth-error[hidden] { display: none; }

.auth-help {
  font-size: 13px;
  color: #888;
  margin-top: 12px;
  line-height: 1.4;
}

.auth-link {
  display: inline-block;
  font-size: 13px;
  color: #2c5fcf;
  margin-top: 12px;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}
.auth-link:hover { text-decoration: underline; }

.auth-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  user-select: none;
}
.auth-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

.auth-footer {
  margin-top: auto;
  padding: 24px;
  font-size: 12px;
  color: #888;
  text-align: center;
}

.auth-footer a { color: #2c5fcf; text-decoration: none; }

.back-link {
  color: var(--c-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--r-md);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.back-link:hover {
  background: var(--c-bg);
  color: var(--c-primary);
}

/* On auth pages the back arrow floats above the card. */
#page-login-password .back-link {
  align-self: flex-start;
  margin: 20px 0 0 24px;
}

/* =================== buttons =================== */
.primary {
  background: var(--c-primary);
  color: white;
  border: 1px solid transparent;
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  min-height: 40px;
  transition: background 0.12s, transform 0.05s, box-shadow 0.12s;
  box-shadow: var(--sh-1);
}

.primary:hover  { background: var(--c-primary-hover); }
.primary:active { transform: translateY(0.5px); }
.primary:disabled {
  background: var(--c-border-strong);
  color: white;
  cursor: not-allowed;
  box-shadow: none;
}
.primary.lg { font-size: 15px; padding: 12px 22px; min-height: 48px; border-radius: var(--r-md); }

.primary.alt {
  background: var(--c-surface);
  color: var(--c-primary);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-1);
}
.primary.alt:hover {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
}

.ghost {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 7px 13px;
  font-weight: 500;
  font-size: 14px;
  min-height: 40px;
  color: var(--c-text);
  transition: background 0.12s, border-color 0.12s;
}

.ghost:hover { background: var(--c-bg); border-color: var(--c-border-strong); }
.ghost.icon { padding: 8px 12px; min-width: 44px; min-height: 44px; }

/* =================== topbar ================================================
   Sticky frosted bar at the top of every "wide" page. Holds folder/page
   title (`.brand`), header chips (untagged-count / edited-count / active
   tag-filter), and the user email on the right.
   ========================================================================== */
.topbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
}

.topbar .brand {
  font-weight: 700;
  flex: 1;
  font-size: 15px;
  letter-spacing: -0.015em;
}

.brand-stack { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.brand-stack .brand { flex: none; }
.brand-meta { color: var(--c-text-mute); font-size: 12px; }

.topbar .user { color: var(--c-text-dim); font-size: 13px; }

.header-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  min-height: 32px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chip:hover { background: var(--c-bg); border-color: var(--c-border-strong); }
.chip.warn { background: var(--c-warn-bg); border-color: var(--c-warn-border); color: var(--c-warn-text); }
.chip.warn:hover { background: #fef0d8; }
.chip.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: white;
}
.chip.active:hover { background: var(--c-primary-hover); }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) 80px;
  width: 100%;
}

h2 {
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
h3 { margin-top: 24px; font-size: 16px; color: #444; }
h3 .hint { font-weight: 400; font-size: 12px; color: #888; margin-left: 8px; }

/* =================== folder picker =================== */
.dropzone {
  display: block;
  width: 100%;
  background:
    radial-gradient(ellipse at center top, rgba(79, 70, 229, 0.04), transparent 70%),
    var(--c-surface);
  border: 2px dashed var(--c-border);
  border-radius: var(--r-lg);
  padding: 80px 24px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s, border-color 0.18s, transform 0.1s, box-shadow 0.18s;
  box-shadow: var(--sh-1);
}

.dropzone:hover, .dropzone.drag-over {
  background:
    radial-gradient(ellipse at center top, rgba(79, 70, 229, 0.10), transparent 70%),
    var(--c-surface);
  border-color: var(--c-primary);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}

/* Icon container — gives the dropzone a visual anchor */
.dropzone-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-radius: var(--r-lg);
  font-size: 28px;
  transition: transform 0.18s, background 0.18s;
}

.dropzone:hover .dropzone-icon,
.dropzone.drag-over .dropzone-icon {
  transform: scale(1.06);
  background: var(--c-primary);
  color: white;
}

.dropzone-title {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--c-text);
}

.dropzone-hint {
  color: var(--c-text-mute);
  font-size: 14px;
}

.error {
  color: #c0392b;
  background: #fdecea;
  padding: 12px;
  border-radius: 6px;
  margin-top: 16px;
}


/* =================== summary =================== */

.summary-container {
  display: flex;
  justify-content: center;
  padding-top: var(--sp-5);
}

.summary-card {
  width: 100%;
  max-width: 680px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-2);
}

.summary-hero {
  margin-bottom: var(--sp-4);
}
.summary-hero h2 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.summary-hero-meta {
  color: var(--c-text-dim);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.summary-hero-meta .dot { color: var(--c-text-mute); }

/* Stat tiles inside the summary card (denser variant of completion grid). */
.summary-stat-grid {
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 var(--sp-4);
}
.stat-cell.stat-warn {
  background: var(--c-warn-bg);
  border-color: var(--c-warn-border);
}
.stat-cell.stat-warn .stat-num { color: var(--c-warn-text); }
.stat-cell.stat-warn .stat-label { color: var(--c-warn-text); }

/* Collapsible details blocks ("Tag breakdown", "Capture details") */
.summary-section {
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  background: var(--c-bg);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.summary-section > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.summary-section > summary::-webkit-details-marker { display: none; }
.summary-section > summary::after {
  content: '▾';
  color: var(--c-text-mute);
  transition: transform 0.2s;
}
.summary-section[open] > summary::after { transform: rotate(180deg); }
.summary-section > summary .hint {
  font-weight: 400;
  font-size: 12px;
  color: var(--c-text-mute);
  margin-left: auto;
  margin-right: var(--sp-3);
}
.summary-section .tag-bars,
.summary-section table.meta {
  margin: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-surface);
  padding: var(--sp-2);
  max-width: 100%;
}
.summary-section table.meta { padding: var(--sp-3) var(--sp-4); }

/* Warning row stays prominent but lives inside the card now. */
.summary-card .warning {
  background: var(--c-warn-bg);
  border-left: 3px solid var(--c-warn-border);
  color: var(--c-warn-text);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  margin: 0 0 var(--sp-3);
  font-size: 13px;
  max-width: 100%;
}

.summary-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-4);
}
.summary-actions .primary { min-width: 200px; }

@media (max-width: 540px) {
  .summary-card { padding: var(--sp-4); }
  .summary-actions { justify-content: stretch; }
  .summary-actions .primary { width: 100%; min-width: 0; }
}

table.meta {
  width: 100%;
  max-width: 700px;
  border-collapse: collapse;
  margin: 16px 0;
}

table.meta td {
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border-soft);
  vertical-align: top;
}

table.meta td:first-child {
  color: #666;
  width: 200px;
}

.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
}

.tag-bars {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-2);
  max-width: 700px;
  box-shadow: var(--sh-1);
}

.tag-bar {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
}

.tag-bar:hover {
  background: var(--c-primary-soft);
  transform: translateX(2px);
  transition: background 0.12s, transform 0.12s;
}
.tag-bar-name { font-size: 14px; font-weight: 500; }
.tag-bar-name.untagged { color: var(--c-warn-text); }

.tag-bar-bar {
  height: 6px;
  background: linear-gradient(90deg, var(--c-primary), #6366f1);
  border-radius: var(--r-pill);
  margin-top: 6px;
}

.tag-bar-bar.untagged {
  background: linear-gradient(90deg, var(--c-warn-border), #fbbf24);
}

.tag-bar-count {
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-dim);
}

.warning {
  background: #fff5e0;
  border-left: 4px solid #e67e22;
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 0 6px 6px 0;
  max-width: 700px;
  color: #6c440b;
}

.actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.actions.right { justify-content: flex-end; }

/* =================== filter / grid =========================================
   Sticky filter chips below the topbar, then the photo card grid.
   Two magic-numbers below — `top: 56px` (desktop) and `top: 96px` (mobile
   override) — are calibrated to the topbar's rendered height. If you change
   topbar padding/typography, update these so the filterbar still snaps
   flush against it instead of overlapping or floating.
   ========================================================================== */
.filterbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  gap: var(--tap-gap);
  align-items: center;
  position: sticky;
  top: 56px;             /* matches topbar height — see section banner above */
  z-index: var(--z-sticky);
  flex-wrap: wrap;
}

.filterbar-spacer { flex: 1; }

.filter {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  min-height: 36px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.filter:hover { background: var(--c-bg); border-color: var(--c-border-strong); }

.filter.active {
  background: var(--c-text);
  color: var(--c-surface);
  border-color: var(--c-text);
}

.filter[aria-pressed="true"] {
  background: var(--c-primary);
  color: white;
  border-color: var(--c-primary);
}

.filter .count {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 7px;
  border-radius: var(--r-pill);
}

.filter:not(.active) .count {
  background: var(--c-border-soft);
  color: var(--c-text-dim);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.photo-card {
  /* reset native <button> styling */
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  color: inherit;
  margin: 0;
  padding: 0;

  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.12s, box-shadow 0.18s, border-color 0.12s;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: var(--sh-1);
  /* Avoid iOS Safari's 300ms tap delay; eliminates pointerdown→click races. */
  touch-action: manipulation;
}

.photo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
  border-color: var(--c-border-strong);
}


.photo-card.excluded {
  opacity: 0.7;
  background: #fafbfc;
}

.photo-card.excluded .photo-thumb {
  filter: grayscale(0.85);
  position: relative;
}

/* Diagonal "Excluded" banner across the thumbnail makes the state
   unmissable at a glance. */
.photo-card.excluded .photo-thumb::after {
  content: 'EXCLUDED';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(192, 57, 43, 0.18);
  color: white;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.photo-card.selected {
  outline: 3px solid #2c5fcf;
  outline-offset: -3px;
  box-shadow: 0 6px 16px rgba(44, 95, 207, 0.18);
}

.photo-card.modified::after {
  content: '↻ Edited';
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #2c5fcf;
  color: white;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Rotation indicator on the thumbnail itself — separate from the
   "Edited" badge so engineers can see which photos have rotation applied. */
.rotation-badge {
  position: absolute;
  top: 8px;
  right: 8px;                            /* moved so it doesn't collide with the selection check */
  background: rgba(20, 20, 30, 0.78);
  color: white;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 2;                            /* sit above the selection check if rendering allows */
}

/* Add-to-selection affordance at the top-left of every photo card.
   The "+" glyph signals "tap to ADD this photo to a working selection" —
   it does NOT mean "include in upload" (which is the photo's separate
   excluded/included state). Selected state flips to a filled indigo "✓".
   Resting state uses solid-white-pill + indigo glyph so it stays
   discoverable on bright photo content (a dashed translucent version
   was vanishing against light backgrounds). */
.select-check {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(15, 22, 35, 0.06);     /* hairline ring keeps it legible on white walls */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-primary);                /* "+" reads as the action color */
  cursor: pointer;
  z-index: 3;
  opacity: 0.92;
  transition: transform 0.12s, background 0.12s, color 0.12s, opacity 0.12s, box-shadow 0.12s;
}
.select-check:hover {
  transform: scale(1.12);
  background: white;
  opacity: 1;
  color: var(--c-primary-hover);
  box-shadow:
    0 2px 8px rgba(79, 70, 229, 0.28),
    0 0 0 1px rgba(79, 70, 229, 0.35);
}
.select-check.on {
  background: var(--c-primary);
  border: 2px solid white;
  color: white;
  font-size: 14px;
  font-weight: 800;
  opacity: 1;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4);
}

/* One-time pulse on the first photo's checkbox the FIRST time the grid
   renders this session. Draws the engineer's eye to the affordance
   without animating every card forever. */
.photo-card.hint-pulse .select-check {
  animation: select-check-pulse 1.6s ease-out 2;
}
@keyframes select-check-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.55), 0 1px 3px rgba(0, 0, 0, 0.18); }
  60%  { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0),  0 1px 3px rgba(0, 0, 0, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0),     0 1px 3px rgba(0, 0, 0, 0.18); }
}

.photo-thumb {
  aspect-ratio: 4 / 3;
  background: #eee;
  overflow: hidden;
  position: relative;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-thumb .skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);
  background-size: 200% 100%;
  animation: pulse 1.4s linear infinite;
}

@keyframes pulse {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.photo-meta {
  padding: 12px;
  font-size: 13px;
  border-top: 1px solid #eef0f4;
}

.photo-time { color: #888; margin-bottom: 6px; font-size: 12px; }

.tag-pill {
  display: inline-block;
  background: var(--c-primary-soft);
  color: var(--c-primary-text-on-soft);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid transparent;
}

.tag-pill.untagged { background: var(--c-warn-bg); color: var(--c-warn-text); }
.tag-pill.excluded { background: var(--c-danger-bg); color: var(--c-danger-text); }

.empty-state {
  padding: 80px 20px;
  text-align: center;
  color: var(--c-text-mute);
  font-size: 15px;
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-lg);
  margin-top: var(--sp-3);
}

/* selection mode + bulkbar */
.bulkbar {
  position: sticky;
  bottom: 72px; /* sit clearly above the footer (footer ≈ 60px + 8px gap) */
  background: rgba(15, 22, 35, 0.96);
  color: white;
  padding: 10px 20px;
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  z-index: var(--z-bulkbar);
  border-radius: var(--r-lg);
  margin: 0 var(--sp-3);
  box-shadow: var(--sh-3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bulkbar[hidden] { display: none; }

.bulkbar .ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
}
.bulkbar .ghost:hover { background: rgba(255, 255, 255, 0.2); }

/* =================== footer =================== */
.footer {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--c-border);
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  z-index: var(--z-footer);
}

.footer-stats { font-size: 13px; color: var(--c-text-dim); }

/* =================== modal =================================================
   Photo detail dialog. The wrap (.modal-photo-wrap) holds the <img> and
   the floating .photo-controls bar; the img is transformed by JS via
   translate→scale→rotate in screen-space pixels so pan deltas line up
   1:1 with pointer movement at any zoom level (see applyViewerTransform
   in app.js).
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 35, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-modal);
  padding: var(--sp-4);
}

.modal-backdrop[hidden] { display: none; }
.modal-backdrop.sm .confirm-card { width: 100%; max-width: 440px; }












.modal-photo-wrap.grabbing { cursor: grabbing; }
.modal-photo-wrap.grab { cursor: grab; }



.ctrl-group {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: rgba(15, 22, 35, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-pill);
  padding: 4px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--sh-2);
}

.ctrl-btn,
.ctrl-readout {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: white;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}

.ctrl-btn svg { display: block; }
.ctrl-btn:hover,
.ctrl-readout:hover { background: rgba(255, 255, 255, 0.14); }
.ctrl-btn:active,
.ctrl-readout:active { transform: scale(0.96); }

/* Readout sits in the middle of each group, taps act as reset */
.ctrl-readout {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  position: relative;
}

/* subtle dividers between buttons within a group */
.ctrl-group .ctrl-btn + .ctrl-readout,
.ctrl-group .ctrl-readout + .ctrl-btn {
  position: relative;
}
.ctrl-group .ctrl-btn + .ctrl-readout::before,
.ctrl-group .ctrl-readout + .ctrl-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.ctrl-readout:focus-visible,
.ctrl-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(165, 180, 252, 0.7);
}

@media (max-width: 700px) {
  
  .ctrl-readout { min-width: 48px; }
}



.field { display: block; margin: 16px 0 8px; }
.field span { display: block; color: #666; margin-bottom: 6px; font-size: 13px; }

.picker-button {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: white;
  font-size: 15px;
  min-height: 48px;
  position: relative;
}

.picker-button::after {
  content: '▾';
  position: absolute;
  right: 14px;
  color: #888;
}

.picker-button:hover { border-color: #2c5fcf; }

.field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  cursor: pointer;
  padding: 6px 0;
  min-height: 44px;
}

.field-row input[type="checkbox"] { width: 22px; height: 22px; }

.hint { color: #888; font-size: 12px; margin: 4px 0 0; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
  /* Sticky to the bottom of the scrollable modal so Done/Next stay reachable
     even when meta + tag picker push the page down on iPad portrait. */
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0, var(--c-surface) 8px);
  padding: var(--sp-3) 0 var(--sp-1);
  margin-left: calc(-1 * var(--sp-5));
  margin-right: calc(-1 * var(--sp-5));
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

/* confirm dialog */
.confirm-card {
  background: white;
  border-radius: 10px;
  padding: 24px;
}
.confirm-card h3 { margin-top: 0; }

/* =================== tag picker sheet ======================================
   Bottom sheet on mobile (align-items: flex-end), centered card ≥700px
   wide (media query below). Uses dvh for max-height so the sheet shrinks
   when the iOS soft keyboard pops, keeping the close button reachable.
   ========================================================================== */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 35, 0.55);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: var(--z-sheet);
}

.sheet-backdrop[hidden] { display: none; }

.sheet {
  background: var(--c-surface);
  width: 100%;
  max-width: 560px;
  /* dvh shrinks correctly when iOS soft keyboard pops; vh is the fallback */
  max-height: 80vh;
  max-height: 80dvh;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  box-shadow: var(--sh-3);
}

@media (min-width: 700px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: var(--r-lg); }
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.sheet-header span { font-weight: 700; font-size: 16px; }

#tag-search {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 15px;
  margin-bottom: var(--sp-3);
  min-height: 48px;
  background: var(--c-bg);
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
#tag-search:focus {
  outline: none;
  background: var(--c-surface);
  border-color: var(--c-primary);
  box-shadow: var(--sh-focus);
}

.recent-tags {
  display: flex;
  gap: var(--tap-gap);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.recent-tags .tag-pill {
  cursor: pointer;
  background: #eef1f6;
  color: #1a1a1a;
}

.recent-tags .tag-pill:hover { background: #2c5fcf; color: white; }

.tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.tag-list li {
  padding: 14px 12px;
  border-bottom: 1px solid var(--c-border-soft);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
}

.tag-list li:hover { background: var(--c-bg); }
.tag-list li.selected { background: var(--c-primary-soft); color: var(--c-primary-text-on-soft); }
.tag-list li .id { font-size: 11px; color: var(--c-text-mute); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

/* =================== upload ================================================
   Progress bar + per-photo list during the upload, then the completion
   card (.complete-card) below with success icon, stat grid, receipt
   disclosure, and "what happens next" sidebar.
   ========================================================================== */
.progress-wrap { margin: 16px 0; }
.progress-bar {
  height: 14px;
  background: #e8edf5;
  border-radius: 7px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #2c5fcf;
  width: 0;
}

.progress-text { margin-top: 8px; color: #666; font-size: 13px; }

.upload-list {
  list-style: none;
  padding: 0;
  background: white;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  margin: 16px 0;
}

.upload-list li {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border-soft);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  align-items: center;
  gap: 12px;
}

.upload-list li:last-child { border-bottom: none; }

.upload-status.pending { color: #888; }
.upload-status.uploading { color: #2c5fcf; }
.upload-status.done { color: #27ae60; }
/* Sent to SIMS, but without the engineer's tag/rotation edits — amber, not
   red: the photo is delivered, so it must not read as "retry this". */
.upload-status.warn { color: #9e6500; }
.upload-status.failed { color: #c0392b; }

.up-line { display: flex; flex-direction: column; gap: 2px; }
.up-error {
  color: #c0392b;
  font-size: 11px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.save-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 2px;
}
.save-badge.ok   { background: #e0f5e9; color: #1d6e3a; }
.save-badge.warn { background: #fff5e0; color: #9e6500; }
.save-badge.none { background: #f0f1f4; color: #777; }

/* "just-saved" pulse on grid card after successful EXIF write */
.photo-card.just-saved {
  animation: just-saved-pulse 1.6s ease-out;
}

.photo-card.just-saved::after {
  content: '💾 Saved';
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #1d6e3a;
  color: white;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

@keyframes just-saved-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(29, 110, 58, 0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(29, 110, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 110, 58, 0); }
}

.info-box {
  background: var(--c-primary-soft);
  border-left: 3px solid var(--c-primary);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--c-primary-text-on-soft);
}
.info-box strong { color: var(--c-text); }

.info-box strong { display: block; margin-bottom: 8px; }
.info-box ul, .info-box ol { margin: 0; padding-left: 20px; }
.info-box li { margin: 4px 0; }

/* ============ Completion page redesign ============ */
.complete-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--sp-6);
}

.complete-card {
  width: 100%;
  max-width: 640px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 40px 40px 32px;
  text-align: center;
  box-shadow: var(--sh-2);
}

.success-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
  box-shadow:
    0 0 0 8px rgba(16, 185, 129, 0.10),
    0 12px 24px rgba(16, 185, 129, 0.25);
  animation: success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.complete-card h2 {
  margin: 0 0 var(--sp-2);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

.complete-sub {
  margin: 0 0 var(--sp-5);
  color: var(--c-text-dim);
  font-size: 14px;
  text-align: center;
}

@keyframes success-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Stat grid — 4 equal cells, primary highlighted */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
}

.stat-cell {
  background: var(--c-bg);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
}

.stat-cell.stat-primary {
  background: var(--c-primary-soft);
  border-color: rgba(79, 70, 229, 0.2);
}

.stat-num {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--c-text);
  line-height: 1.1;
}

.stat-cell.stat-primary .stat-num { color: var(--c-primary); }
.stat-num.stat-dim { color: var(--c-text-mute); }

.stat-label {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

@media (max-width: 720px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .complete-card { padding: var(--sp-5) var(--sp-4); }
  .stat-num { font-size: 20px; }
}

/* Receipt disclosure — neater chevron and proper spacing */
.receipt {
  margin: 0 0 var(--sp-5);
  text-align: left;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  background: var(--c-bg);
  overflow: hidden;
}

.receipt summary {
  min-height: 44px;
  width: 100%;
  gap: 12px;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 500;
  font-size: 14px;
  color: var(--c-text-dim);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.receipt summary::-webkit-details-marker { display: none; }
.receipt summary::after {
  content: '';
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-left: auto;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.receipt details[open] > summary::after, .receipt[open] > summary::after { transform: rotate(180deg); }
.receipt .upload-list {
  border: none;
  border-top: 1px solid var(--c-border-soft);
  border-radius: 0;
  margin: 0;
}

/* "What happens next" — flatter, more like a sidebar than a banner */
.next-steps {
  text-align: left;
  background: var(--c-primary-soft);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-5);
}
.next-steps-title {
  margin: 0 0 var(--sp-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary-text-on-soft);
}
.next-steps-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--c-primary-text-on-soft);
  line-height: 1.55;
}
.next-steps-list li { margin: 4px 0; }

.complete-actions {
  display: flex;
  justify-content: center;
}
.complete-actions .primary { min-width: 220px; }

/* When some photos failed, soften the celebration. */
.complete-card.has-failures .success-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow:
    0 0 0 8px rgba(245, 158, 11, 0.10),
    0 12px 24px rgba(245, 158, 11, 0.25);
}

/* =================== toasts ================================================
   Bottom-center stack. .toast-stack is pointer-events:none so the page
   stays interactive; individual .toast elements re-enable pointer events
   so the Undo button is clickable. Hidden while the photo modal is open
   (body.modal-open rule in the polish-pass section below).
   ========================================================================== */
.toast-stack {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
}

.toast {
  background: rgba(15, 22, 35, 0.96);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  box-shadow: var(--sh-3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: slideUp 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.toast button {
  background: transparent;
  border: none;
  color: #a5b4fc;
  font-weight: 600;
  padding: 4px 8px;
  margin: -4px -8px;
  transition: color 0.12s;
}
.toast button:hover { color: #c7d2fe; }

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* =================== responsive ============================================
   Only ONE breakpoint (700px). Below that, topbar wraps, filterbar moves
   its sticky offset down to clear the wrapped header (top: 96px instead
   of 56px), the photo grid uses smaller cards, and the modal goes
   full-screen with squared corners.
   ========================================================================== */
@media (max-width: 700px) {
  .topbar {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .topbar .user { display: none; }
  .filterbar { padding: 8px 12px; top: 96px; gap: var(--tap-gap); }
  .container { padding: 16px 12px 100px; }
  .photo-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .footer { padding: 10px 12px; }
  
  
  .header-chips { width: 100%; }
}

/* ========================================================
   Polish pass — overrides at end of stylesheet so they win
   without restructuring the file above.
   ======================================================== */

/* Inactive filter pill count chip — was grey-on-grey */
.filter:not(.active) .count {
  background: #d8dde5;
  color: #333;
}

/* Untagged card uses an inset shadow instead of a 2px border so
   neighbouring cards don't shift. Keeps geometry stable. */
.photo-card.untagged {
  border-color: var(--c-border);
  border-width: 1px;
  box-shadow: inset 0 0 0 2px var(--c-warn-border);
  background: #fffaf0;
}

/* Hide toasts while modal is open so they don't collide with
   the photo control bar. JS sets body.modal-open to avoid relying on
   the :has() pseudo-class (not in older browsers). */
body.modal-open .toast-stack {
  opacity: 0;
  pointer-events: none;
}

/* Header brand-stack: folder name dominates, "FAS Helper" smaller */
.brand-stack .brand {
  font-size: 16px;
  line-height: 1.25;
}
.brand-stack .brand-meta { font-size: 11px; color: #888; }

/* Empty-state action button */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.empty-state[hidden] { display: none; }

.empty-state .empty-action {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-primary);
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.empty-state .empty-action:hover { background: var(--c-primary-soft); }

/* "Demo" badge in auth screens to flag this isn't production. */
/* Floating build tag — bottom-left of the viewport so it stays out of the
   way of the user-email chip and footer actions. Pure visual marker, not
   interactive. */
.build-tag {
  position: fixed;
  bottom: var(--sp-3);
  left: var(--sp-3);
  background: rgba(79, 70, 229, 0.92);
  color: white;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  z-index: var(--z-toast);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.14);
  user-select: none;
  -webkit-user-select: none;
}

/* Folder confirm dialog (for #32 wrong-folder guard) — reuses confirm-card */
.confirm-card .confirm-detail {
  margin: var(--sp-2) 0 var(--sp-4);
  background: var(--c-bg);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  font-size: 13px;
  border: 1px solid var(--c-border-soft);
}
.confirm-card .confirm-detail .row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.confirm-card .confirm-detail .row strong { color: var(--c-text); }

/* Confirm-dialog checklist (used for the Upload? confirmation) */
.checklist {
  margin: var(--sp-3) 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.check-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-border-soft);
  font-size: 14px;
}
.check-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
}
.check-ok .check-icon   { background: var(--c-success-bg); color: var(--c-success-text); }
.check-warn .check-icon { background: var(--c-warn-bg);    color: var(--c-warn-text); }
.check-warn             { border-left: 3px solid var(--c-warn-border); }
.check-dim .check-icon  { background: #eef0f4;             color: var(--c-text-dim); }
.check-dim              { color: var(--c-text-dim); }

/* Acknowledgement row. Used when the confirmation is not just informational
   and the engineer has to actively accept a consequence before Upload unlocks
   (today: untagged photos, which upload but do not reach the assessment). */
.confirm-ack {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-border);
  color: var(--c-warn-text);
  font-size: 14px;
  cursor: pointer;
}
.confirm-ack input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* Keyboard-shortcut overlay (toggled with `?`) */
.kbd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 35, 0.55);
  z-index: var(--z-kbd-overlay);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sp-4);
}
.kbd-overlay[hidden] { display: none; }
.kbd-card {
  background: white;
  border-radius: var(--r-md);
  padding: var(--sp-5);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}
.kbd-card h3 {
  margin: 0 0 var(--sp-4);
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kbd-card .kbd-section {
  margin: 0 0 var(--sp-4);
}
.kbd-card .kbd-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-dim);
  margin-bottom: var(--sp-2);
}
.kbd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--c-border-soft);
  font-size: 14px;
}
.kbd-row:last-child { border-bottom: none; }
.kbd-keys { display: flex; gap: 4px; }
kbd {
  display: inline-block;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 2px 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  min-width: 24px;
  text-align: center;
}

/* --- pilot additions: logout + folder-load progress --- */
.logout-btn {
  margin-left: 12px;
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  color: #475467;
  cursor: pointer;
}
.logout-btn:hover { background: #f2f4f7; }
.ingest-progress {
  margin-top: 16px;
  font-size: 14px;
  color: #475467;
  text-align: center;
}
.ingest-progress b { color: #3730a3; }

/* Read-only session banner (no File System Access API).
   Fixed to the top so it survives page switches and scrolling — the whole point
   is that it cannot be missed or dismissed while the condition holds. */
.readonly-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px var(--sp-3);
  background: var(--c-warn-bg);
  color: var(--c-warn-text);
  border-bottom: 2px solid var(--c-warn-border);
  font-size: 13px;
  line-height: 1.45;
}
.readonly-banner[hidden] { display: none; }
.readonly-banner-icon { flex: none; font-size: 15px; line-height: 1.3; }
/* Push the app down so the banner never covers a topbar. */
body.has-readonly-banner { padding-top: 52px; }
@media (max-width: 640px) {
  body.has-readonly-banner { padding-top: 76px; }
}

/* Mock-mode banner. Shown only when the backend reports SIMS_MODE=mock, i.e.
   the photos never reached SIMS. Fixed to the top of the viewport and above
   everything else on purpose: a mocked batch is otherwise indistinguishable
   from a delivered one, and mistaking the two is the expensive error. */
#mock-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 10px 16px;
  background: #b45309;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Shared pilot branding; preserve the supplied SVG aspect ratio. */
.brand-logo { display: block; width: 176px; max-width: 100%; height: auto; }
.pilot-brand-title { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: normal; color: var(--c-text-dim); }
.auth-card .logo { flex-direction: column; width: 100%; gap: 12px; }
.auth-card .brand-logo { width: 220px; }
.pilot-brand { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex-shrink: 0; }
#page-folder .pilot-brand { flex: 1; }
@media (max-width: 700px) {
  .pilot-brand { flex-basis: 100%; }
  .pilot-brand .brand-logo { width: 154px; }
  .pilot-brand-title { font-size: 11px; }
}

/* Pilot field workflow: restrained surfaces, touch targets and natural reflow. */
:root { --c-bg:#f3f5f6; --c-primary:#245e87; --c-primary-hover:#18496c; --c-primary-soft:#e8f0f5; --c-primary-text-on-soft:#18496c; --sh-1:none; --sh-2:none; --sh-3:0 4px 20px #172d4014; --sh-focus:0 0 0 3px #245e8750; }
body {font-size:16px;letter-spacing:normal;}
.page,#page-login-email,#page-login-password,#page-folder,#page-summary,.dropzone,.dropzone:hover {background:var(--c-bg);}
button,input,select,.auth-link,.back-link,.filter,.chip,.picker-button,.tag-option,.ctrl-btn,.ctrl-readout {min-height:44px;font-size:16px;}
button,[role=button],input {touch-action:manipulation;}
button:focus-visible,[role=button]:focus-visible,a:focus-visible,input:focus-visible {outline:3px solid #245e87;outline-offset:3px;}
button,.photo-card,.tag-pill,.dropzone,.tag-option {transition:none;animation:none;}
.auth-card {margin-top:24px;padding:28px;max-width:500px;text-align:left;box-shadow:none;}
.auth-card h1,.auth-card .subtitle {text-align:center;}
.auth-card .input-label {display:block;margin:12px 0 6px;font-weight:600;font-size:16px;}
.auth-card input {font-size:16px;min-height:48px;}
.auth-card .auth-link {display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--c-primary);margin:4px 0;width:100%;}
.password-field {position:relative;}
.password-field input {padding-right:76px;}
.auth-card .password-toggle {position:absolute;bottom:13px;right:4px;min-width:64px;width:auto;margin:0;padding:4px 8px;border:0;background:transparent;color:var(--c-primary);font-size:16px;}
.auth-footer {font-size:14px;line-height:1.5;color:#455460;max-width:500px;margin:24px auto 0;padding:16px;}
.auth-help,.hint {color:#4b5964;}
.auth-success {background:#e6efe9;color:#224e36;padding:12px;border:1px solid #809c89;border-radius:6px;}
.joint-logos {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;}
.brand-logo,.auth-card .brand-logo,.pilot-brand .brand-logo {width:176px;height:auto;max-width:100%;object-fit:contain;}
.solar-logo {width:108px;height:auto;max-height:56px;object-fit:contain;}
.auth-card .logo {margin:12px 0 24px;}
.pilot-brand-title {font-size:14px;color:#384957;font-weight:600;}
.topbar {flex-wrap:wrap;gap:10px 16px;background:white;backdrop-filter:none;position:relative;padding:16px 24px;}
.topbar .pilot-brand {flex:1 1 320px;}
.topbar .joint-logos {justify-content:flex-start;}
.topbar .user {font-size:14px;overflow-wrap:anywhere;}
.topbar .brand-stack {flex:1 1 170px;}
.logout-btn {min-height:44px;padding:8px 12px;font-size:16px;}
.build-tag {position:static;display:block;width:max-content;margin:8px 16px;background:#e8edf1;color:#334454;border:1px solid #bcc9d2;font-size:12px;box-shadow:none;transform:none;}
.readonly-banner {position:static;font-size:14px;padding:12px 24px;background:#e8eef2;color:#344b5c;border:0;}
body {padding-top:0!important;}
.dropzone {background:white;padding:48px 24px;border:1px solid #bdc9d2;}
.dropzone-title {font-size:26px;line-height:1.3;}
.dropzone-hint {font-size:16px;max-width:580px;margin:12px auto;}
.folder-action {display:inline-flex;align-items:center;margin-top:12px;color:white;}
.container {padding:24px;}
.summary-card {max-width:820px;border-radius:8px;box-shadow:none;}
.summary-actions {position:sticky;bottom:0;background:white;padding:12px 0;margin-bottom:0;}
.tag-bar {grid-template-columns:minmax(0,1fr) auto;min-height:48px;border-bottom:1px solid #e1e6e9;}
.tag-bar-name {display:inline-block;padding:5px 8px;border-radius:4px;font-size:15px;}
.tag-bar-bar {display:none;}
.tag-bar-count {font-size:14px;padding:0 8px;}
.filterbar {position:static;flex-wrap:wrap;gap:8px;padding:12px 24px;background:white;}
.filter {font-size:16px;min-height:44px;}
.photo-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.photo-card {border-radius:6px;box-shadow:none;min-width:0;}
.photo-card:hover {transform:none;box-shadow:none;}
.photo-open {display:block;width:100%;padding:0;border:0;background:white;text-align:left;cursor:pointer;}
.photo-thumb {aspect-ratio:4/3;height:auto;}
.photo-thumb img {width:100%;height:100%;object-fit:cover;}
.select-check {position:absolute;top:8px;left:8px;z-index:2;width:44px;height:44px;min-height:44px;margin:0;accent-color:var(--c-primary);cursor:pointer;}
.photo-card.selected {outline:3px solid var(--c-primary);outline-offset:1px;}
.photo-card.excluded {opacity:1;border-color:#aeb7be;}
.photo-card.excluded .photo-thumb {opacity:.6;filter:grayscale(.7);}
.photo-card.excluded::after {background:#57636d;color:white;}
.tag-pill.excluded {color:#414e58;background:#e8ecef;}
.tag-pill {white-space:normal;overflow:visible;font-size:14px;border-radius:4px;}
.photo-time {font-size:14px;color:#56636e;}
.review-actions {position:sticky;bottom:0;z-index:40;background:white;margin-top:auto;border-top:1px solid #c5cfd6;}
.bulkbar {position:static;margin:0;border-radius:0;background:#edf2f5;color:#243c4e;box-shadow:none;backdrop-filter:none;padding:12px 24px;}
.bulkbar .ghost {background:white;color:#243c4e;border-color:#b9c5ce;}
.footer {position:static;background:white;backdrop-filter:none;}
.footer-stats {font-size:16px;}
.footer-stats p {margin:4px 0;}
.empty-state {padding:24px;font-size:16px;}




.modal-meta .meta {margin:0;}
.modal-meta .field {margin:12px 0;}
.picker-button,.tag-list li {min-height:48px;font-size:16px;}
.tag-list li {padding:12px 16px;}
.modal-meta .hint {font-size:14px;}
#modal-save-error {color:#9b251c;}
#modal-tag-button {white-space:normal;}
#tag-search {font-size:16px;min-height:48px;}
#help-dialog,#discard-dialog,#admin-access-dialog,#history-dialog {border:1px solid #bcc9d2;border-radius:8px;padding:24px;width:calc(100% - 32px);max-width:580px;max-height:90dvh;overflow:auto;color:var(--c-text);}
dialog::backdrop {background:#172b40a6;}
dialog h2 {font-size:22px;}
dialog li {margin:12px 0;}
dialog .actions {display:flex;gap:12px;flex-wrap:wrap;}
.complete-card {border-radius:8px;box-shadow:none;text-align:left;}
.complete-card .stat-grid {text-align:center;}
.assessment-panel {border:1px solid #c7d1d8;border-radius:6px;padding:16px;margin:16px 0;}
.assessment-panel h3 {margin-top:0;}
.receipt-message {display:block;margin:6px 0;}
.up-line small {display:block;overflow-wrap:anywhere;color:#53606b;}
.upload-status {white-space:normal;max-width:55%;font-size:14px;}
.upload-status.attention {color:#9b251c;}.upload-status.checking {color:#785000;}
.progress-fill {transition:none;}
#mock-banner {position:static;box-shadow:none;}
@media(min-width:950px) and (orientation:landscape) {
  
  
  
  
}
@media(max-width:949px) {.photo-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px) {
  .page:not(.wide) {padding:16px;}.auth-card {margin:0;padding:20px;}
  .topbar {padding:12px 16px;}.topbar .pilot-brand {flex-basis:100%;}.topbar .user {flex:1 1 160px;}
  .container {padding:16px;}.filterbar {padding:12px 16px;}
  .joint-logos {gap:16px;}.pilot-brand .brand-logo {width:166px;}.solar-logo {width:100px;}
  .dropzone {padding:28px 16px;}.dropzone-title {font-size:22px;}
  .photo-grid {gap:10px;}.photo-meta {padding:10px;}
  .summary-stat-grid {grid-template-columns:repeat(2,1fr);}
  .footer,.bulkbar {padding:12px 16px;}.footer-actions {width:100%;}.footer-actions .primary {width:100%;}
  .modal-backdrop {padding:0;}
  
  
  
}
@media(max-width:360px) {.photo-grid {grid-template-columns:1fr;}.joint-logos {flex-direction:column;}}
/* Feedback occupies layout space; it never covers upload or editor actions. */
.toast-stack {position:static;transform:none;width:auto;max-width:none;margin:0;padding:0 16px;z-index:auto;align-self:stretch;}
.toast {max-width:none;width:auto;margin:8px 0;background:#e6eef3;color:#243c4e;border:1px solid #bccbd6;border-radius:6px;box-shadow:none;animation:none;}
.toast button {color:#18496c;}
.modal-meta table.meta td {display:block;width:100%;padding:4px 0;border:0;}
.modal-meta table.meta tr:not([hidden]) {display:block;padding-bottom:10px;border-bottom:1px solid #e1e6e9;}
.build-tag {display:none;} /* PILOT remains in every screen's product header. */
#page-grid {height:100dvh;min-height:0;}
#page-grid>.topbar,#page-grid>.filterbar,#page-grid>.review-actions,#page-grid>.toast-stack {flex-shrink:0;}
#page-grid>.container {flex:1;min-height:0;overflow:auto;}
.review-actions {position:static;}
.summary-actions {position:static;justify-content:flex-start;margin:12px 0;}
body.modal-open {overflow:hidden;}
#modal {position:fixed;inset:0;height:100dvh;}
.editor-pilot {font-size:11px;font-weight:700;color:#455460;letter-spacing:.08em;}
@media(max-width:600px) {
  
  .editor-pilot {grid-column:1;grid-row:2;}
  
  
  
}
@media(max-height:540px) {#page-grid {height:auto;min-height:100dvh;}#page-grid>.container {overflow:visible;}}

/* Pilot field UI: shared shell, scoped review and receipt presentation. */
:root {
  --c-bg:#f4f6f7; --c-surface:#fff; --c-text:#202c35; --c-text-dim:#52616d;
  --c-text-mute:#60707c; --c-border:#d8e0e5; --c-border-soft:#e8edf0;
  --c-primary:#24638c; --c-primary-hover:#194d70; --c-primary-soft:#eaf2f8;
  --c-primary-text-on-soft:#194d70; --r-sm:8px; --r-md:12px; --r-lg:14px;
  --c-surface-tonal:#eef3f6; --c-transform-bg:#efedf8; --c-transform-text:#574783;
  --c-success-bg:#e9f4ec; --c-success-text:#226644; --c-danger-bg:#fbeeed; --c-danger-text:#a3322c;
  --c-warn-bg:#fff5df; --c-warn-text:#805808; --r-control:12px; --r-surface:14px;
}
.icon-defs {position:absolute;width:0;height:0;overflow:hidden;}
.ui-icon {width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
button:has(> .ui-icon),a:has(> .ui-icon) {display:inline-flex;align-items:center;justify-content:center;gap:8px;}
button > span {min-width:0;}
body,button,input,select,textarea {font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
body {font-size:16px;line-height:1.5;}
h1,h2,.container h2 {font-size:25px;font-weight:600;line-height:1.25;letter-spacing:-.025em;}
h3,.container h3 {font-size:18px;font-weight:600;color:var(--c-text);}
button,.primary,.ghost,.logout-btn {font-weight:500;font-size:16px;min-height:44px;border-radius:var(--r-control);}
.primary,.primary.lg {padding:12px 24px;font-weight:600;min-height:48px;box-shadow:none;}
.primary:disabled,.primary:disabled:hover {background:#e8edf0;border-color:#d8e0e5;color:#65747e;cursor:not-allowed;opacity:1;}
.ghost {background:white;border-color:var(--c-border);padding:12px 16px;}
button:focus-visible,[role=button]:focus-visible,input:focus-visible,summary:focus-visible {outline:3px solid #397caa;outline-offset:3px;}
.page {min-height:100dvh;}
.page.wide {background:var(--c-bg);height:100dvh;min-height:0;overflow:hidden;}
.page.wide > .container {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.working-content {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.working-content > .container {container-type:inline-size;}
.topbar {flex-shrink:0;position:sticky;top:0;z-index:var(--z-topbar);display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;background:#fff;border-bottom:1px solid var(--c-border);box-shadow:none;backdrop-filter:none;}
.topbar .pilot-brand {flex:1 1 auto;min-width:0;gap:6px;}
.topbar .joint-logos {justify-content:flex-start;}
.pilot-brand .brand-logo {width:180px;height:auto;}
.pilot-brand-title {font-size:14px;font-weight:500;color:var(--c-text-dim);letter-spacing:0;}
.header-account {display:flex;align-items:center;gap:16px;min-width:0;}
.header-account .user {font-size:14px;line-height:1.4;overflow-wrap:anywhere;max-width:240px;}
.header-account .help-button {order:0;white-space:nowrap;}
.header-account .user {order:1;}
.header-account .logout-btn {order:2;white-space:nowrap;}
.pilot-mode-control {display:flex;align-items:center;gap:8px;font-size:14px;order:1;}
.pilot-mode-control select {min-height:44px;width:auto;margin:0;padding:8px;border:1px solid var(--c-border);border-radius:var(--r-control);background:white;color:var(--c-text);font:inherit;}
.pilot-mode-banner {flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 24px;background:var(--c-primary-soft);border-bottom:1px solid var(--c-border);color:var(--c-text-dim);font-size:14px;}
.pilot-mode-banner button {flex-shrink:0;font-size:14px;}
@media(max-width:900px) {.header-account:has(.pilot-mode-control:not([hidden])) {flex-wrap:wrap;gap:8px;justify-content:flex-end;}}
@media(max-width:600px) {.pilot-mode-banner {padding:8px 16px;flex-wrap:wrap;gap:8px;}}

.logout-btn {border:1px solid var(--c-border);background:white;}
.container {max-width:1280px;padding:24px 24px 32px;}
.back-link {display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:500;color:var(--c-primary);margin:0 0 12px;padding:0;}
/* Login cards remain scrollable for keyboards and short windows. */
.page:not(.wide) {padding:20px 24px 0;gap:16px;}
.auth-card {max-width:480px;margin:auto 0;padding:24px 32px;border:1px solid var(--c-border);border-radius:var(--r-surface);background:white;box-shadow:none;}
.auth-card .logo {margin:0 0 18px;gap:8px;}
.auth-card .brand-logo {width:208px;height:auto;}
.auth-card .joint-logos {gap:0;}
.auth-card h1 {margin:0 0 12px;font-size:25px;font-weight:600;}
.auth-card .subtitle {font-size:14px;line-height:1.5;margin:0 0 14px;}
.auth-card .input-label {margin:0 0 5px;font-size:16px;font-weight:500;}
.auth-card input {min-height:44px;padding:10px 12px;margin-bottom:12px;border-radius:var(--r-control);font-size:16px;}
.auth-card .password-field input {padding-right:76px;}
.auth-card .password-toggle {bottom:12px;min-height:44px;right:2px;font-size:14px;}
.auth-card .primary {min-height:48px;margin-bottom:4px;}
.auth-card .auth-link {min-height:44px;margin:0;font-size:16px;}
.auth-card .auth-check {margin:0 0 10px;min-height:44px;font-size:14px;}
.auth-card .auth-check input {width:20px;height:20px;min-height:20px;margin:0 10px 0 0;}
.auth-help {font-size:14px;line-height:1.5;margin:8px 0 0;}
.auth-footer {flex-shrink:0;max-width:none;width:100%;margin:0;padding:12px 16px 20px;font-size:14px;text-align:center;color:#596973;}
/* One clear folder task, without a nested drop-card. */
#page-folder > .container {flex:1;display:flex;flex-direction:column;justify-content:safe center;align-items:center;padding-top:24px;padding-bottom:32px;}
.dropzone,.dropzone:hover {max-width:720px;padding:32px 24px;background:transparent;border:1px solid transparent;border-radius:var(--r-control);box-shadow:none;}
.dropzone.drag-over {background:var(--c-primary-soft);border:1px dashed var(--c-primary);}
.dropzone-icon,.dropzone:hover .dropzone-icon {display:block;width:64px;height:64px;margin:0 auto 22px;padding:0;border:0;border-radius:0;background:none;color:var(--c-primary);transform:none;box-shadow:none;}
.dropzone-title {font-size:26px;font-weight:600;line-height:1.25;letter-spacing:-.025em;}
.dropzone-hint {max-width:560px;margin:14px auto 22px;font-size:16px;line-height:1.6;color:var(--c-text-dim);}
.folder-action {margin:0;min-width:176px;justify-content:center;}
.dropzone .hint {margin-top:18px;font-size:14px;}
/* Summary strip and rows belong to one document, not nested dashboard cards. */
.summary-container {max-width:1280px;padding-top:16px;}
.summary-card {container-type:inline-size;max-width:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;}
.summary-hero {padding:0;}
.summary-hero h2 {margin:0 0 8px;font-size:26px;}
.summary-hero-meta {font-size:14px;color:var(--c-text-dim);gap:8px;}
.summary-stat-grid {display:flex;flex-wrap:wrap;gap:0;margin:24px 0 16px;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);padding:16px 0;}
.summary-stat-grid .stat-cell {display:flex;align-items:baseline;gap:8px;padding:6px 24px;background:none;border:0;border-right:1px solid var(--c-border);border-radius:0;flex:1 1 auto;}
.summary-stat-grid .stat-cell:first-child {padding-left:0;}
.summary-stat-grid .stat-cell:last-child {border:0;padding-right:0;}
.summary-stat-grid .stat-num {font-size:22px;font-weight:600;color:var(--c-text);line-height:1.3;white-space:nowrap;}
.summary-stat-grid .stat-label {font-size:14px;letter-spacing:0;text-transform:none;color:var(--c-text-dim);}
.summary-stat-grid .stat-warn .stat-num,.summary-stat-grid .stat-warn .stat-label {color:var(--c-warn-text);}
.summary-actions {display:flex;justify-content:flex-end;margin:16px 0 24px;padding:0;background:none;}
.previous-activity {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px;margin-bottom:24px;background:var(--c-primary-soft);border-radius:var(--r-control);}
.previous-activity p {margin:4px 0 0;font-size:14px;color:var(--c-text-dim);}
.inspection-assignment {margin:16px 0;padding:16px;border:1px solid var(--c-border);border-radius:var(--r-control);}
.inspection-assignment select {width:100%;min-height:44px;padding:8px;border:1px solid var(--c-border);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-text);font:inherit;}
.summary-section {border:0;border-top:1px solid var(--c-border);border-radius:0;background:none;margin:0;overflow:visible;}
.summary-section summary {display:flex;align-items:center;min-height:44px;width:100%;padding:16px 0;font-size:18px;font-weight:600;gap:16px;}
.summary-section summary > span:first-child {flex:1;}
.summary-section summary > .ui-icon {transform:rotate(90deg);}
.summary-section[open] summary > .ui-icon {transform:rotate(270deg);}
.summary-section summary h3 {margin:0;display:flex;align-items:center;gap:12px;flex:1;}
.summary-section summary::after {display:none;}

.summary-section .hint {font-size:14px;font-weight:400;margin-left:auto;}
.summary-section .tag-bars {padding:16px 0 24px;}
.tag-bar {min-height:48px;padding:8px 0;grid-template-columns:minmax(0,1fr) auto;gap:16px;border-bottom:1px solid var(--c-border-soft);border-radius:0;}
.tag-bar:hover {background:#edf2f5;}
.tag-bar-name {font-size:16px;font-weight:500;padding:8px 12px;border-radius:4px;}
.tag-bar-count {font-size:14px;font-weight:500;color:var(--c-text-dim);padding-right:4px;}
#coverage-missing {display:grid;grid-template-columns:1fr;gap:0 32px;padding-top:24px;}
#coverage-missing .tag-bar {min-height:48px;padding:8px 0;}
#coverage-missing .tag-bar-name {padding:8px 12px;color:var(--c-text-dim);font-weight:400;background:none;}
#coverage-hint {font-size:16px;font-weight:500;background:none;color:var(--c-text-dim);margin-left:0;}
#coverage-scope-note {padding:8px 0 16px;font-size:14px;}
.summary-card > .hint {font-size:14px;line-height:1.5;margin-top:16px;}
/* Review scrolls naturally; the shared header and action area stay reachable. */
#page-grid {height:100dvh;min-height:0;}
#page-grid > .container {flex:none;min-height:0;overflow:visible;}
.review-heading {padding-top:12px;padding-bottom:0;}
.review-heading .brand-stack {margin-bottom:8px;}
.review-heading .brand {font-size:26px;font-weight:600;line-height:1.3;}
.review-heading .brand-meta {font-size:16px;color:var(--c-text-dim);margin-top:6px;}
.review-heading .header-chips {margin:8px 0 0;}
#chip-edited {display:none;}
.working-content > .filterbar {max-width:1280px;width:100%;margin:0 auto;padding:16px 24px 0;gap:12px;align-items:center;border:0;background:none;}
.filter {border:1px solid transparent;border-radius:var(--r-control);background:transparent;min-height:48px;padding:12px 16px;gap:8px;font-weight:500;}
.filter.active,.filter[aria-pressed=true] {background:var(--c-primary-soft);border-color:#b9cbd8;color:var(--c-primary);box-shadow:none;}
.filter .count {font-size:14px;background:none;padding:0;}
#select-all-toggle {margin-left:16px;background:var(--c-surface);border-color:var(--c-border);}
.photo-grid {grid-template-columns:1fr;gap:24px;}
.photo-card {border:1px solid var(--c-border);border-radius:var(--r-control);background:white;box-shadow:none;overflow:hidden;}
.photo-card:hover {border-color:#aebfc9;transform:none;}
.photo-card.selected {outline:2px solid var(--c-primary);outline-offset:2px;border-color:var(--c-primary);}
.photo-open {font:inherit;}
.photo-thumb {aspect-ratio:4/3;background:#e8edf0;}
.photo-meta {padding:16px;}
.photo-time {font-size:14px;color:var(--c-text-dim);margin-bottom:10px;}
.tag-pill {display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1.4;padding:6px 10px;border-radius:4px;font-weight:500;}
.photo-card.modified::after {content:'Edited';position:absolute;top:14px;right:12px;bottom:auto;left:auto;padding:4px 8px;border:0;border-radius:4px;background:#fff;color:#52616d;font-size:12px;font-weight:500;box-shadow:none;pointer-events:none;}
.photo-card.just-saved::after {animation:none;}
.photo-select {position:absolute;top:4px;left:4px;z-index:2;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;}
.photo-select .select-check {position:static;width:24px;height:24px;min-height:24px;margin:0;accent-color:var(--c-primary);box-shadow:none;border-radius:4px;}
.rotation-badge {bottom:10px;right:10px;font-size:12px;background:#fff;color:#52616d;}
.review-actions {position:static;flex-shrink:0;z-index:var(--z-sticky);border-top:1px solid var(--c-border);margin-top:auto;background:white;}
.bulkbar {position:static;display:flex;align-items:center;flex-wrap:wrap;gap:12px;background:#f8fafb;border:0;border-bottom:1px solid var(--c-border-soft);padding:16px 24px;margin:0;border-radius:0;color:var(--c-text);box-shadow:none;backdrop-filter:none;}
.bulkbar > span {margin-right:8px;font-size:14px;}
.bulkbar button {display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;min-height:44px;padding:9px 12px;border:1px solid transparent;background:#edf0f3;color:#52616d;}
#bulk-tag {background:var(--c-primary-soft);color:var(--c-primary);} 
#bulk-exclude {background:var(--c-danger-bg);color:var(--c-danger-text);} 
#bulk-include {background:var(--c-success-bg);color:var(--c-success-text);} 
#bulk-rotate-left,#bulk-rotate-right {background:var(--c-transform-bg);color:var(--c-transform-text);}
 

.bulkbar #bulk-include.low-emphasis,.bulkbar #bulk-exclude.low-emphasis {background:transparent;border-color:var(--c-border);}
.footer {position:static;padding:16px 24px;gap:24px;background:white;border-top:0;}
.footer-stats {font-size:16px;color:var(--c-text-dim);flex:1;min-width:240px;}
#upload-explanation {max-width:680px;font-size:14px;line-height:1.5;}
.footer-actions {display:flex;align-items:center;gap:16px;flex-wrap:wrap;width:auto;}
.footer-actions .primary {min-width:220px;width:auto;}

.modal {display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-width:1240px;height:100%;max-height:100%;min-height:0;overflow:hidden;background:var(--c-surface);border-radius:var(--r-surface);container-type:inline-size;box-shadow:var(--sh-3);}
.modal-header {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;padding:16px 24px;background:var(--c-surface);border-bottom:1px solid var(--c-border);z-index:3;}
.editor-navigation,.editor-actions {display:flex;align-items:center;gap:8px;min-width:0;}
.editor-actions {gap:12px;margin-left:auto;}
.modal-header button {min-height:44px;flex-shrink:0;}
.modal-pos {font-size:16px;font-weight:500;color:var(--c-text);white-space:nowrap;}
.editor-body {min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain;}
.editor-visual {display:block;min-width:0;}
.modal-photo-wrap {position:relative;display:block;inline-size:100%;aspect-ratio:4/3;block-size:auto;min-block-size:0;overflow:hidden;background:#e8edf0;user-select:none;-webkit-user-select:none;touch-action:pan-y;}
.modal-photo-wrap img {position:absolute;left:50%;top:50%;max-width:none;max-height:none;display:block;pointer-events:none;transform-origin:center;will-change:transform;}
.photo-preview-status {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;text-align:center;font-size:16px;color:var(--c-text-dim);}
.photo-controls {position:static;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 24px;padding:12px 16px;width:100%;transform:none;background:var(--c-surface);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);}
.modal-meta {padding:24px;min-width:0;background:var(--c-surface);}
@container(min-width:900px) {
  .editor-body {display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);overflow:hidden;}
  .editor-visual {display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;}
  .modal-photo-wrap {aspect-ratio:auto;}
  .modal-meta {overflow-y:auto;border-left:1px solid var(--c-border);}
}
@container(max-width:500px) {
  .modal-header {padding:12px 16px;}
  .editor-actions {flex-wrap:wrap;justify-content:flex-end;}
  .modal-meta {padding:16px;}
}
/* Editor controls are below the image, outside its pan/zoom surface. */










.ctrl-group {display:flex;align-items:center;gap:4px;border:0;border-radius:0;background:transparent;color:var(--c-text);box-shadow:none;backdrop-filter:none;}
.ctrl-label {font-size:14px;font-weight:500;color:var(--c-text-dim);margin-right:8px;}
.ctrl-btn,.ctrl-readout {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:8px 10px;border:1px solid var(--c-border);border-radius:var(--r-control);background:white;color:var(--c-text);font-size:14px;font-weight:500;}
.ctrl-btn:hover,.ctrl-readout:hover {background:var(--c-bg);}
.ctrl-group .ctrl-btn + .ctrl-readout::before,.ctrl-group .ctrl-readout + .ctrl-btn::before {display:none;}
#photo-rotate-reset {font-size:14px;}

.modal-meta table.meta td {font-size:16px;line-height:1.5;}
.modal-meta table.meta td:first-child {font-size:14px;font-weight:500;color:var(--c-text-dim);}
.modal-meta table.meta tr:not([hidden]) {border-bottom:0;padding-bottom:12px;}
.modal-meta .field {margin:12px 0 24px;}
.modal-meta .field > span {font-size:14px;font-weight:500;color:var(--c-text-dim);margin-bottom:8px;}
.picker-button {min-height:48px;border:1px solid #b9c8d2;border-radius:var(--r-control);padding:12px 36px 12px 12px;font-size:16px;}
.field-row {font-size:16px;gap:12px;min-height:44px;}
.field-row input {width:22px;height:22px;min-height:22px;accent-color:var(--c-primary);}
.modal-meta .hint {font-size:14px;line-height:1.5;margin-top:6px;}
.sheet {max-width:600px;max-height:86dvh;padding:24px;border:1px solid var(--c-border);border-radius:var(--r-surface);box-shadow:var(--sh-3);overflow:hidden;}
#tag-current-unavailable {flex-shrink:0;margin:0 0 16px;font-size:14px;}
.sheet-header {flex-shrink:0;gap:20px;margin:0 0 16px;}
.sheet-header > span {font-size:18px;font-weight:600;}
.search-field {display:flex;align-items:center;gap:8px;flex-shrink:0;background:var(--c-surface-tonal);border:1px solid var(--c-border);border-radius:var(--r-control);padding-left:16px;margin:0 0 16px;}
#tag-search {flex:1;min-width:0;min-height:48px;background:transparent;border:0;margin:0;border-radius:var(--r-control);}
.recent-tags {flex-shrink:0;gap:8px;margin-bottom:8px;}
.recent-tags:empty {display:none;}
.tag-list {min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0;margin:0;}
.tag-list li {min-height:52px;padding:12px 16px;gap:16px;border-bottom:1px solid var(--c-border-soft);border-radius:0;font-size:16px;}
.tag-list li[aria-selected=true] {background:var(--c-primary-soft);color:var(--c-primary);}
.tag-list li > span:last-child {font-size:14px;white-space:nowrap;}
/* Confirmation and status screens retain their existing receipt semantics. */
.modal-backdrop.sm .confirm-card {padding:24px;max-width:540px;border-radius:var(--r-surface);}
.confirm-card h3 {font-size:24px;font-weight:600;margin:0 0 16px;}
.confirm-counts {display:flex;gap:24px;margin:0 0 16px;font-size:16px;}
.confirm-intro {display:block;margin:0 0 16px;color:var(--c-text-dim);}
.confirm-card .actions {display:flex;gap:24px;justify-content:space-between;margin-top:24px;}
.confirm-card .checklist {gap:8px;}
.confirm-card .check-row {border:0;background:transparent;padding:8px 0;}
.confirm-card .check-icon {background:none;}
.confirm-card .check-warn {color:var(--c-warn-text);}
#page-upload > .container {max-width:1000px;}
#upload-folder-name {margin:12px 0 24px;}
.progress-wrap {display:flex;flex-direction:column;gap:16px;margin:0 0 28px;}
.progress-text {order:-2;font-size:17px;font-weight:500;color:var(--c-text);margin:0;}
.progress-bar {order:-1;height:8px;border-radius:4px;background:#dce5eb;}
.progress-fill {background:var(--c-primary);border-radius:4px;}
.delivery-counts {display:flex;gap:12px 24px;flex-wrap:wrap;font-size:14px;}
.delivery-count {display:inline-flex;gap:8px;align-items:baseline;color:var(--c-text-dim);}
.delivery-count strong {font-weight:600;font-size:16px;}
.confirmed,.upload-status.confirmed {color:#246a46;}
.processing,.simulated,.upload-status.processing,.upload-status.simulated {color:#24638c;}
.checking,.upload-status.checking {color:#875b0d;}
.attention {color:var(--c-warn-text);}
.upload-status.attention {color:var(--c-danger-text);}
.waiting,.disabled,.upload-status.waiting,.upload-status.disabled {color:#62717b;}
.upload-list {border:0;border-radius:0;background:none;margin:0;padding:0;}
.upload-list li {min-height:64px;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--c-border-soft);font-size:16px;}
.up-line {color:var(--c-text);font-weight:500;}
.upload-status {max-width:45%;font-size:16px;font-weight:500;text-align:right;}
.processing-note {font-size:14px;color:var(--c-text-dim);margin:24px 0;}
#upload-cancel {border:1px solid #d3a5a2;color:var(--c-danger-text);background:transparent;}
#discard-edits {color:var(--c-danger-text);background:var(--c-danger-bg);border:1px solid #d3a5a2;}
.complete-container {display:block;max-width:1280px;width:100%;}
.results-heading {margin:0 0 24px;}
.results-heading h1 {margin:0 0 8px;}
#complete-folder-name {font-size:16px;color:var(--c-text-dim);margin:0;}
.complete-card {max-width:none;width:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:left;container-type:inline-size;}
#complete-headline {font-size:24px;margin:0 0 8px;font-weight:600;text-align:left;}
.complete-sub {font-size:16px;line-height:1.5;text-align:left;max-width:none;margin:0 0 24px;color:var(--c-text-dim);}
.outcome-panels {display:grid;grid-template-columns:1fr;gap:24px;}
.photo-delivery-panel,.assessment-panel {min-width:0;padding:24px;margin:0;border:1px solid var(--c-border-soft);border-radius:var(--r-surface);background:var(--c-surface-tonal);}
.photo-delivery-panel h3,.assessment-panel h3 {margin:0 0 16px;font-size:18px;}
.outcome-stats {margin:0;display:grid;gap:16px;}
.outcome-stats > div {display:flex;align-items:center;gap:8px;}
.outcome-stats dt {flex:1;font-size:16px;color:var(--c-text);}
.outcome-stats dd {margin:0;font-size:24px;font-weight:600;}
.outcome-stats .excluded {color:var(--c-text-dim);}
.assessment-panel p {font-size:16px;line-height:1.5;margin:8px 0 0;}
#complete-simulated {color:var(--c-text-dim);font-size:14px;margin:16px 0 0;}
#complete-photo-counts:not(:empty) {margin-top:16px;}
.elapsed-time {font-size:14px;color:var(--c-text-dim);margin:16px 0;}
.receipt {border:0;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);border-radius:0;background:none;margin:24px 0 0;}
.receipt > summary {padding:16px 0;font-size:18px;font-weight:600;background:none;}
.receipt .upload-list {padding:0;}
.upload-list .receipt-section {display:block;min-height:0;padding:0;border:0;}
.receipt-state {width:100%;}
.receipt-state > summary {display:flex;align-items:center;gap:8px;padding:16px 0;font-size:16px;font-weight:600;cursor:pointer;}
.receipt-row {display:flex;align-items:flex-start;padding:16px 0;gap:16px;border-bottom:1px solid var(--c-border-soft);}
.receipt-thumb {width:80px;height:64px;object-fit:cover;flex-shrink:0;border-radius:4px;background:#e5eaed;}
.receipt-row .up-line {flex:1;min-width:0;}
.receipt-photo-number {display:block;font-size:14px;color:var(--c-text-dim);margin-bottom:4px;}
.receipt-row .up-line strong {font-size:16px;font-weight:500;}
.receipt-message {display:block;font-size:14px;font-weight:400;color:var(--c-text-dim);line-height:1.5;margin:8px 0;}
.receipt-review {flex-shrink:0;color:var(--c-primary);border:0;background:none;}
.troubleshooting {font-size:14px;font-weight:400;color:var(--c-text-dim);margin-top:8px;}
.troubleshooting summary {min-height:44px;cursor:pointer;}
.troubleshooting small {display:block;font-size:14px;overflow-wrap:anywhere;}
.next-steps {background:none;border:0;border-radius:0;padding:24px 0;margin:0;}
.next-steps-title {text-transform:none;letter-spacing:0;font-size:18px;font-weight:600;margin:0 0 16px;}
.next-steps-list {padding-left:24px;font-size:16px;line-height:1.5;color:var(--c-text-dim);}
.next-steps-list li {padding-left:4px;margin:12px 0;}
.complete-actions {display:flex;flex-shrink:0;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;width:100%;margin:0;padding:16px max(24px,calc((100% - 1232px)/2));border-top:1px solid var(--c-border);background:white;}
.complete-actions button {min-width:180px;}
#complete-back {order:0;} #complete-review {order:1;margin-left:auto;}


@media(max-width:949px) {
  .photo-grid {gap:24px;}
  .header-account {gap:10px;}.header-account .user {max-width:180px;}
  .summary-stat-grid .stat-cell {padding:6px 14px;}
  .summary-stat-grid .stat-num {font-size:20px;}

}
@media(max-width:640px) {
  .topbar {flex-wrap:wrap;padding:12px 16px;gap:12px;}
  .topbar .pilot-brand {flex-basis:100%;}
  .header-account {width:100%;gap:12px;flex-wrap:wrap;}
  .header-account .user {max-width:none;flex:1;font-size:14px;}
  .header-account .help-button,.logout-btn {padding:8px 10px;font-size:14px;}
  .container {padding:20px 16px 28px;}
  .page:not(.wide) {padding:16px 16px 0;}
  .auth-card {padding:24px;}.auth-footer {padding:12px 0 16px;}
  .dropzone,.dropzone:hover {padding:24px 0;}.dropzone-title {font-size:24px;}
  .dropzone-icon {width:52px;height:52px;margin-bottom:18px;}
  .working-content > .filterbar {padding:14px 16px 0;gap:8px;}
  .filter {padding:8px 12px;font-size:16px;}
  #select-all-toggle {margin-left:0;}
  .photo-grid {gap:14px;}.photo-meta {padding:12px;}
  .tag-pill {display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:5px 8px;}
  .summary-stat-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .summary-stat-grid .stat-cell {padding:0!important;border:0;}
  .summary-stat-grid .stat-label {font-size:14px;}
  .bulkbar {padding:12px 16px;gap:10px;}
  .bulkbar > span {flex-basis:100%;}
  .footer {padding:14px 16px;gap:14px;}
  .footer-actions {width:100%;}.footer-actions .primary {width:100%;}
  
  
  
  
  
  
  .ctrl-group {gap:4px;}
  .sheet {padding:20px 16px;max-height:92dvh;}
  .complete-actions {gap:16px;padding:16px;}.complete-actions button {flex:1;min-width:160px;}
  #complete-review {margin-left:0;}.confirm-card {padding:24px;}
  .confirm-card .actions {gap:20px;flex-wrap:wrap;}
}

@media(max-height:600px) {
  .auth-card {margin:12px 0;}.auth-footer {margin-top:auto;}
  .review-actions {position:static;}
}
@media(min-width:700px) and (orientation:landscape) {
  #page-login-set-password .auth-card {max-width:620px;}
  .password-pair {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
}
.summary-container,.complete-container {display:block;}

@container(min-width:440px) {.photo-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@container(min-width:900px) {.photo-grid {grid-template-columns:repeat(3,minmax(0,1fr));}}
@container(min-width:1200px) {.photo-grid {grid-template-columns:repeat(4,minmax(0,1fr));}}
@container(min-width:700px) {#coverage-missing {grid-template-columns:repeat(2,minmax(0,1fr));}.outcome-panels {grid-template-columns:repeat(2,minmax(0,1fr));}}

#admin-access-dialog {max-width:960px;}
.admin-table-scroll {overflow-x:auto;margin:16px 0;}
#admin-access-dialog table {width:100%;border-collapse:collapse;text-align:left;}
#admin-access-dialog th,#admin-access-dialog td {padding:12px;border-bottom:1px solid var(--c-border);}

#history-dialog {max-width:900px;}
.history-run {padding:16px 0;border-bottom:1px solid var(--c-border);overflow-wrap:anywhere;}
.history-run h3 {margin:0;}
.history-run summary {cursor:pointer;color:var(--c-primary);padding:12px 0;}
.history-photo {padding:12px 0;border-top:1px solid var(--c-border-soft);}