/* app.css — inspect.adamsairportinn.com frontend shell.
   Mobile-first, utilitarian (spec §7). Hand-written: zero-build philosophy —
   any future Claude session edits this without a toolchain.
   CSP note: default-src 'self' blocks style="" attributes; any dynamic style
   (e.g. coverage-bar width) is set via CSSOM in JS, never via attributes. */

:root {
  --ink: #191919;
  --muted: #6E6E73;
  --line: #D8D8DC;
  --bg: #FFFFFF;
  --bg-accent: #F5F5F7;
  --focus: #1D4ED8;
  --s1: #B3261E;    /* S1 red — cannot sell */
  --s2: #B26A00;    /* S2 amber — dark enough for white text (WCAG) */
  --s3: #1D4ED8;    /* S3 blue — scheduled */
  --s4: #6B7280;    /* S4 grey — cosmetic */
  --clean: #1B7F4B; /* green check — clean room */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
h1, h2, h3 { font-family: "EB Garamond", Georgia, serif; font-weight: 500; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* a11y: visible focus everywhere (spec §7) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* a11y: every interactive element is a >=44px target (spec §7) */
button, a.btn, input, select, textarea { min-height: 44px; }

#view { max-width: 640px; margin: 0 auto; padding: 16px 16px 72px; }

/* ---------- chrome (header nav, rendered by app.js) ---------- */
#chrome { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.chrome__in { display: flex; align-items: center; gap: 4px; max-width: 640px; margin: 0 auto; padding: 0 8px; overflow-x: auto; }
.chrome__brand { font-family: "EB Garamond", Georgia, serif; font-size: 17px; padding: 10px 8px; white-space: nowrap; }
.chrome__nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.chrome__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px;
  font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap;
}
.chrome__link--active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.chrome__signout { color: var(--muted); font-size: 14px; padding: 10px; white-space: nowrap; }

/* ---------- generic ---------- */
.error { color: var(--s1); font-weight: 500; padding: 12px 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 8px;
  font-weight: 500; background: var(--bg); color: var(--ink); text-decoration: none;
}
.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- severity (pills on cards, backgrounds on tiles) ---------- */
.pill {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #fff;
}
.sev-S1 { background: var(--s1); color: #fff; }
.sev-S2 { background: var(--s2); color: #fff; }
.sev-S3 { background: var(--s3); color: #fff; }
.sev-S4 { background: var(--s4); color: #fff; }

/* ---------- PIN view ---------- */
.pin-view { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 8vh; }
.pin-title { font-size: 26px; font-style: italic; }
.pin-dots { display: flex; gap: 12px; min-height: 16px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted); }
.pin-dot--filled { background: var(--ink); border-color: var(--ink); }
.pin-msg { min-height: 22px; color: var(--s1); font-weight: 500; text-align: center; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; }
.pin-key {
  min-height: 64px; border: 1px solid var(--line); border-radius: 12px;
  font-size: 24px; font-weight: 500; background: var(--bg);
}
.pin-key:active { background: var(--bg-accent); }
.pin-key--blank { border: 0; pointer-events: none; }
.lang-toggle { display: flex; gap: 8px; }
.lang-toggle button {
  min-width: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--muted);
}
.lang-toggle button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }

/* ---------- rooms grid (rendered by views/grid.js — Task 9) ---------- */
.floor { margin-bottom: 28px; }
.floor__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.floor__title { font-size: 22px; font-style: italic; }
.floor__count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.floor__bar { height: 4px; border-radius: 2px; background: var(--bg-accent); overflow: hidden; margin-bottom: 12px; }
.floor__bar-fill { height: 100%; background: var(--clean); } /* width set via CSSOM in grid.js */
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (min-width: 480px) { .tiles { grid-template-columns: repeat(7, 1fr); } }
.tile {
  position: relative; min-height: 52px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); display: flex; align-items: center; justify-content: center; gap: 2px;
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; color: var(--ink);
}
.tile.sev-S1 { border-color: var(--s1); }
.tile.sev-S2 { border-color: var(--s2); }
.tile.sev-S3 { border-color: var(--s3); }
.tile.sev-S4 { border-color: var(--s4); }
.tile--clean { background: var(--clean); border-color: var(--clean); color: #fff; }
.tile--uncaptured { background: var(--bg); color: var(--muted); font-weight: 500; }
.tile--skipped {
  /* skipped = hatched (spec §7 screen 2) */
  background: repeating-linear-gradient(45deg, var(--line) 0 5px, var(--bg-accent) 5px 10px);
  color: var(--ink);
}
.tile__check { font-size: 11px; }
.legend { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.legend__item { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.legend__swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); flex: none; padding: 0; }
.legend__swatch--clean { background: var(--clean); border-color: var(--clean); }
.legend__swatch--uncaptured { background: var(--bg); }
.legend__swatch--skipped { background: repeating-linear-gradient(45deg, var(--line) 0 4px, var(--bg-accent) 4px 8px); }

/* ---------- motion (spec §7 a11y) ---------- */
@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;
  }
}

/* ---------- print (stub — board/worklist print rules extend this in their tasks) ---------- */
@media print {
  #chrome, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  @page { margin: 12mm; }
}

/* ===== Capture view (views/capture.js) =================================== */
.cap-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.cap-back { font-size: 15px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.cap-title { font-family: 'EB Garamond', Georgia, serif; font-size: 24px; font-weight: 500; margin: 0; flex: 1; }
.cap-chip { font-size: 13px; font-weight: 600; background: #F2614B; color: #fff; border-radius: 12px; padding: 4px 10px; }
.cap-badge-row { padding: 0 16px; min-height: 20px; }
.cap-badge { font-size: 13px; color: #8E8E93; }
.cap-dump { display: block; width: calc(100% - 32px); margin: 8px 16px; min-height: 40vh;
  font-size: 16px; line-height: 1.5; padding: 12px; border: 1px solid #AEAEB2; border-radius: 8px; }
.cap-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px; min-height: 8px; }
.cap-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.cap-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cap-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px 24px; }
.cap-btn { min-height: 44px; font-size: 16px; font-weight: 600; border-radius: 8px;
  border: 1px solid #AEAEB2; background: #FFFFFF; color: #191919; }
.cap-btn:disabled { opacity: 0.4; }
.cap-btn--shutter { grid-column: 1 / -1; background: #191919; color: #fff; border: none; }
.cap-btn--s1 { background: #FFF1EF; border-color: #F2614B; color: #E1533A; }
.cap-btn--next { grid-column: 1 / -1; background: #F2614B; color: #fff; border: none; }
.cap-btn--s1pick { display: block; width: 100%; margin: 8px 0; }
.cap-overlay { position: fixed; inset: 0; background: rgba(25,25,25,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.cap-overlay__card { background: #fff; border-radius: 12px; padding: 24px; max-width: 420px; width: 100%; }
.cap-overlay__detail { font-size: 13px; color: #8E8E93; word-break: break-word; }
.cap-s1-other-row { display: flex; gap: 8px; margin: 8px 0; }
.cap-s1-other { flex: 1; min-height: 44px; font-size: 16px; padding: 0 10px;
  border: 1px solid #AEAEB2; border-radius: 8px; }
.cap-error { padding: 16px; color: #E1533A; }
@media (prefers-reduced-motion: no-preference) {
  .cap-thumb { transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
}