/* ============================================================
   InspectAI — Field Capture Design System
   ------------------------------------------------------------
   Built for home inspectors working on-site: phone-first,
   one-handed, gloved, hurried, moving between bright driveways
   and dark crawlspaces.

   Principles
   1. One primary action per screen — the next tap is obvious.
   2. Thumb-first — primary actions sit in the bottom third.
   3. Glanceable — readable at arm's length, in motion, bad light.
   4. Forgiving — 48px+ targets, generous spacing, hard to mis-tap.

   Theme auto-switches: light by default (resists outdoor glare),
   dark via prefers-color-scheme (for interiors). Both are tuned
   to clear WCAG AA at body text sizes.
   ============================================================ */

:root {
  /* ---- LIGHT (field default) ---- */
  --bg: #FAF9F6;            /* warm off-white — less harsh than pure white */
  --surface: #FFFFFF;
  --surface-sunk: #F0EEE8;
  --border: #E5E2D9;
  --border-strong: #D2CEC1;
  --ink: #1B1E25;          /* near-black body — AA+ on bg */
  --ink-2: #565A64;        /* secondary */
  --ink-3: #898D97;        /* captions / hints */
  --accent: #B5640A;       /* deep amber — AA on white and on surface */
  --accent-ink: #FFFFFF;
  --accent-soft: #FBEAD2;
  --crit: #BE2A1E;  --crit-soft: #FBE6E3;
  --major: #B9530B; --major-soft: #FAE9D9;
  --minor: #93700A; --minor-soft: #F5EDD3;
  --info: #1C6CAE;  --info-soft: #E2EFF9;
  --ok: #2C7A41;   --ok-soft: #E3F1E6;
  --shadow-sm: 0 1px 2px rgba(20,22,28,.07), 0 2px 6px rgba(20,22,28,.05);
  --shadow-md: 0 2px 6px rgba(20,22,28,.09), 0 12px 28px rgba(20,22,28,.08);

  /* ---- Geometry ---- */
  --tap: 48px;             /* minimum touch target */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* ---- Type scale (16px floor for body — field reading) ---- */
  --t-screen: 23px;
  --t-section: 17px;
  --t-body: 16px;
  --t-label: 13px;
  --t-cap: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ---- DARK (auto — crawlspaces, attics, dim interiors) ---- */
    --bg: #15171C;
    --surface: #1E2128;
    --surface-sunk: #131519;
    --border: #2E323B;
    --border-strong: #3D424D;
    --ink: #F2F3F5;
    --ink-2: #AEB2BC;
    --ink-3: #777C86;
    --accent: #F3A547;     /* lighter amber — AA on dark surface */
    --accent-ink: #1B1E25;
    --accent-soft: #382B16;
    --crit: #F0786D;  --crit-soft: #38211F;
    --major: #EE9551; --major-soft: #36261A;
    --minor: #DAB44A; --minor-soft: #322B17;
    --info: #5BA6DD;  --info-soft: #1B2A38;
    --ok: #5FC07C;    --ok-soft: #1C2E22;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 2px 8px rgba(0,0,0,.5), 0 16px 32px rgba(0,0,0,.4);
  }
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }

/* ---- Screen shell: fixed app-bar + scroll body + thumb zone ---- */
.screen { display: flex; flex-direction: column; min-height: 100%; }

.app-bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  display: flex; align-items: center; gap: 12px;
}
.app-bar .icon-btn { flex: 0 0 auto; }
.app-bar .titles { flex: 1; min-width: 0; }
.app-bar .title { font-size: var(--t-screen); font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bar .sub { font-size: var(--t-label); color: var(--ink-2); margin-top: 1px; }

.body { flex: 1; padding: 16px; padding-bottom: 24px; }
.body > * + * { margin-top: 16px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 18px;
  font-family: var(--font); font-size: var(--t-body); font-weight: 600;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  min-height: 56px; width: 100%; font-size: 17px; box-shadow: var(--shadow-sm);
}
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.icon-btn {
  width: var(--tap); height: var(--tap); border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-sunk); border: 1px solid var(--border);
  font-size: 20px; color: var(--ink); cursor: pointer;
}

/* ---- Cards / rows ---- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 16px; }
.section-label {
  font-size: var(--t-label); font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}

/* ---- Capture grid: big action tiles ---- */
.capture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.capture-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  min-height: 104px; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; color: var(--ink);
}
.capture-tile:active { background: var(--surface-sunk); }
.capture-tile .ct-icon { font-size: 26px; }
.capture-tile .ct-label { font-size: var(--t-body); font-weight: 600; }
.capture-tile .ct-sub { font-size: var(--t-cap); color: var(--ink-3); }
.capture-tile.accent { background: var(--accent-soft); border-color: transparent; }

/* ---- Room switcher ---- */
.room-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.room-chip {
  flex: 0 0 auto; min-height: 40px; padding: 0 16px;
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink-2); font-size: var(--t-body);
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.room-chip[aria-current="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.room-chip .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ---- Progress ---- */
.progress { height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunk); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* ---- Finding rows ---- */
.finding-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.finding-row:last-child { border-bottom: 0; }
.finding-row .f-title { font-size: var(--t-body); font-weight: 600; }
.finding-row .f-meta { font-size: var(--t-cap); color: var(--ink-3); margin-top: 1px; }
.finding-row .chev { margin-left: auto; color: var(--ink-3); font-size: 20px; }

/* ---- Severity: chip + segmented selector ---- */
.sev-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.sev-dot.crit { background: var(--crit); } .sev-dot.major { background: var(--major); }
.sev-dot.minor { background: var(--minor); } .sev-dot.info { background: var(--info); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--t-cap); font-weight: 700; letter-spacing: .02em;
}
.chip.crit { background: var(--crit-soft); color: var(--crit); }
.chip.major { background: var(--major-soft); color: var(--major); }
.chip.minor { background: var(--minor-soft); color: var(--minor); }
.chip.info { background: var(--info-soft); color: var(--info); }

.sev-select { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sev-opt {
  min-height: 72px; border-radius: var(--radius-sm); cursor: pointer;
  border: 2px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--t-label); font-weight: 700; color: var(--ink-2);
}
.sev-opt .sev-dot { width: 16px; height: 16px; }
.sev-opt[aria-pressed="true"].crit  { border-color: var(--crit);  background: var(--crit-soft);  color: var(--crit); }
.sev-opt[aria-pressed="true"].major { border-color: var(--major); background: var(--major-soft); color: var(--major); }
.sev-opt[aria-pressed="true"].minor { border-color: var(--minor); background: var(--minor-soft); color: var(--minor); }
.sev-opt[aria-pressed="true"].info  { border-color: var(--info);  background: var(--info-soft);  color: var(--info); }

/* ---- Form fields ---- */
.field-label { font-size: var(--t-label); font-weight: 700; color: var(--ink-2); margin-bottom: 6px; display: block; }
.field {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  font-family: var(--font); font-size: var(--t-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); outline: none;
}
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.field { min-height: 88px; resize: vertical; line-height: 1.5; }

/* ---- Voice capture (the product wedge — narrate, don't type) ---- */
.voice-btn {
  width: 100%; min-height: 64px; border-radius: var(--radius);
  border: 1.5px dashed var(--accent); background: var(--accent-soft);
  color: var(--accent); font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
}
.voice-btn:active { background: var(--accent); color: var(--accent-ink); }
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---- Thumb-zone bottom bar + tab nav ---- */
.bottom-bar {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 12px 16px;
}
.bottom-nav {
  position: sticky; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  min-height: 56px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  font-size: var(--t-cap); font-weight: 600; color: var(--ink-3); cursor: pointer;
}
.tab .tab-icon { font-size: 20px; }
.tab[aria-current="true"] { color: var(--accent); }

/* ---- Sheet header (for capture sheets) ---- */
.sheet-head {
  position: sticky; top: 0; z-index: 20; background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: calc(env(safe-area-inset-top) + 12px) 12px 12px;
  display: flex; align-items: center; gap: 8px;
}
.sheet-head .title { font-size: var(--t-section); font-weight: 700; flex: 1; text-align: center; }

.hint { font-size: var(--t-cap); color: var(--ink-3); }