/* ============================================================
   Enviroair Field App — overlay tokens
   Builds on colors_and_type.css. Import AFTER the base file.
   ============================================================ */

:root {
  /* ---- Touch targets ---- */
  --touch-min:    44px;   /* iOS HIG minimum */
  --touch-comfy:  52px;   /* gloves, wet hands */
  --touch-large:  64px;   /* primary actions */

  /* ---- Density (medium) ---- */
  --field-row-pad-y: 14px;
  --field-row-pad-x: 16px;
  --field-section-gap: 12px;
  --field-screen-pad: 16px;

  /* ---- Outdoor-readable contrast bumps ---- */
  --field-fg-primary:   #14161A;   /* darker than charcoal-900 for sunlight */
  --field-fg-secondary: #3A3B3D;
  --field-border:       #C5C7CB;   /* heavier than charcoal-200 */
  --field-border-strong:#909195;

  /* ---- Status palette (high-contrast for sunlight) ---- */
  --field-status-ok:     #2E7A1E;
  --field-status-ok-bg:  #E4F1DB;
  --field-status-warn:   #B5651D;
  --field-status-warn-bg:#FCEBD2;
  --field-status-fail:   #B5251C;
  --field-status-fail-bg:#FBE0DD;
  --field-status-na:     #6E6F72;
  --field-status-na-bg:  #ECECED;
  --field-status-todo:   #2B6E9E;
  --field-status-todo-bg:#DCEDF7;
}

/* Dark theme — auto via prefers-color-scheme; can be forced via [data-theme="dark"] */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page:       #0F1316;
    --bg-surface:    #181C20;
    --bg-subtle:     #20262B;
    --bg-muted:      #2A3137;
    --fg-primary:    #F2F3F4;
    --fg-secondary:  #B6BABE;
    --fg-tertiary:   #8E9296;
    --fg-muted:      #6B7075;
    --border-subtle: #2A3137;
    --border-default:#384048;
    --border-strong: #5A636B;
    --field-fg-primary:   #F6F7F8;
    --field-fg-secondary: #B6BABE;
    --field-border:       #384048;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.5), 0 12px 28px rgba(0,0,0,0.5);
  }
}
[data-theme="dark"] {
  --bg-page:       #0F1316;
  --bg-surface:    #181C20;
  --bg-subtle:     #20262B;
  --bg-muted:      #2A3137;
  --fg-primary:    #F2F3F4;
  --fg-secondary:  #B6BABE;
  --fg-tertiary:   #8E9296;
  --fg-muted:      #6B7075;
  --border-subtle: #2A3137;
  --border-default:#384048;
  --border-strong: #5A636B;
  --field-fg-primary:   #F6F7F8;
  --field-fg-secondary: #B6BABE;
  --field-border:       #384048;
}

/* ============================================================
   Field App primitives
   ============================================================ */

.fa-screen {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  min-height: 100%;
  display: flex; flex-direction: column;
}

/* Top bar — sticky, blurred, plant-room friendly */
.fa-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}
.fa-topbar-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--fg-primary); border: none; cursor: pointer;
}
.fa-topbar-icon:active { background: var(--bg-subtle); }
.fa-topbar-title {
  flex: 1; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.fa-topbar-sub {
  display: block; font-size: 11px; font-weight: 500;
  color: var(--fg-tertiary); font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Offline banner */
.fa-offline {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  background: var(--field-status-warn-bg); color: var(--field-status-warn);
  border-bottom: 1px solid #00000010;
}
.fa-offline .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.6s infinite; }
@keyframes blink { 0%,50% {opacity:1;} 51%,100% {opacity:0.3;} }

/* Tab bar (bottom nav) */
.fa-tabbar {
  display: flex; align-items: stretch; height: 64px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.fa-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--fg-tertiary); padding: 0;
}
.fa-tab svg { stroke: currentColor; }
.fa-tab.on { color: var(--ea-green-700); }
[data-theme="dark"] .fa-tab.on, .fa-screen[data-theme="dark"] .fa-tab.on { color: var(--ea-green-400); }
.fa-tab:active { background: var(--bg-subtle); }

/* Section heads inside a screen */
.fa-section-head {
  padding: 18px var(--field-screen-pad) 8px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.fa-section-head h2 {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-tertiary);
}
.fa-section-head .meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary);
}

/* List card group */
.fa-list {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.fa-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: var(--field-row-pad-y) var(--field-row-pad-x);
  min-height: var(--touch-comfy);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.fa-list-row:last-child { border-bottom: none; }
.fa-list-row:active { background: var(--bg-subtle); }

/* Status chip */
.fa-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1;
}
.fa-status.ok    { background: var(--field-status-ok-bg);   color: var(--field-status-ok); }
.fa-status.warn  { background: var(--field-status-warn-bg); color: var(--field-status-warn); }
.fa-status.fail  { background: var(--field-status-fail-bg); color: var(--field-status-fail); }
.fa-status.na    { background: var(--field-status-na-bg);   color: var(--field-status-na); }
.fa-status.todo  { background: var(--field-status-todo-bg); color: var(--field-status-todo); }

/* Big buttons */
.fa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--touch-comfy); padding: 0 20px;
  border-radius: 10px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  letter-spacing: -0.005em; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.fa-btn-primary { background: var(--ea-green-600); color: #fff; }
.fa-btn-primary:active { background: var(--ea-green-700); transform: scale(0.98); }
.fa-btn-secondary { background: var(--bg-surface); color: var(--fg-primary); border-color: var(--border-default); }
.fa-btn-secondary:active { background: var(--bg-subtle); }
.fa-btn-danger { background: var(--field-status-fail); color: #fff; }
.fa-btn-large { height: var(--touch-large); font-size: 17px; padding: 0 28px; }
.fa-btn-block { width: 100%; }

/* Form controls */
.fa-field { padding: 12px var(--field-screen-pad); display: flex; flex-direction: column; gap: 6px; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.fa-field label { font-size: 12px; font-weight: 700; color: var(--fg-tertiary); letter-spacing: 0.04em; text-transform: uppercase; }
.fa-input, .fa-select, .fa-textarea {
  width: 100%; min-height: var(--touch-comfy);
  padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--field-border);
  background: var(--bg-surface);
  color: var(--field-fg-primary);
  font-family: var(--font-body); font-size: 16px; /* iOS no-zoom */
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fa-input:focus, .fa-select:focus, .fa-textarea:focus {
  border-color: var(--ea-green-600);
  box-shadow: var(--ring-brand);
}
.fa-textarea { min-height: 96px; resize: vertical; }

/* Pass/Fail/N/A segmented control */
.fa-pfn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fa-pfn-btn {
  height: var(--touch-comfy); border-radius: 10px;
  background: var(--bg-subtle); color: var(--fg-secondary);
  border: 1px solid var(--border-subtle);
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.fa-pfn-btn.pass.on { background: var(--field-status-ok-bg);   color: var(--field-status-ok);   border-color: var(--field-status-ok); }
.fa-pfn-btn.fail.on { background: var(--field-status-fail-bg); color: var(--field-status-fail); border-color: var(--field-status-fail); }
.fa-pfn-btn.na.on   { background: var(--field-status-na-bg);   color: var(--field-status-na);   border-color: var(--field-status-na); }

/* Suppress browser text-selection / dictionary popup on non-input elements */
* { -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; }

/* H&S Library type filter buttons */
.ego-filter-btn { font-size: 13px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--f-border); background: var(--bg-surface); color: var(--fg-primary); cursor: pointer; }
.ego-filter-btn.active { background: var(--ea-green-600); color: #fff; border-color: var(--ea-green-600); }

/* ── H&S Documents ───────────────────────────────────── */
.hs-docs-job-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--row-pad-x);
  border-bottom: 1px solid var(--f-border);
  background: var(--bg-subtle);
}
.hs-docs-job-label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-primary); }
.btn-link { background: none; border: none; padding: 0; font-size: var(--text-sm); color: var(--ea-green-600); cursor: pointer; text-decoration: underline; }

.hs-doc-title-block {
  padding: 16px 16px 14px;
  background: var(--bg-surface);
  border-bottom: 3px solid var(--ea-green-600);
}
.hs-doc-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.hs-doc-info {
  padding: 12px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--f-border);
  display: flex; flex-direction: column; gap: 3px;
}
.hs-doc-info-job   { font-size: 15px; font-weight: 600; color: var(--fg-primary); }
.hs-doc-info-sub   { font-size: 13px; color: var(--fg-secondary); }
.hs-doc-info-row   { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-secondary); margin-top: 4px; }
.hs-doc-type-chip  { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px;
                     background: #e8f0e2; color: #4a763b; border: 1px solid #c5d9b8; }
.hs-doc-desc {
  padding: 13px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--f-border);
  font-size: 15px;
  color: var(--fg-primary);
  line-height: 1.6;
}

.hs-doc-section-head {
  padding: var(--space-2) var(--row-pad-x) var(--space-1);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-muted); background: var(--bg-subtle);
  border-top: 1px solid var(--f-border);
  border-bottom: 1px solid var(--f-border);
  margin-top: var(--space-2);
}
.hs-step-block { border-bottom: 1px solid var(--f-border); padding-bottom: var(--space-3); }
.hs-step-task  { font-size: var(--text-base); color: var(--fg-primary); margin-bottom: var(--space-2); }
.hs-step-sub   { font-size: var(--text-sm); color: var(--fg-secondary); margin-bottom: var(--space-1); }
.hs-step-key   { font-weight: var(--fw-semibold); margin-right: 4px; }
.hs-step-risks { display: flex; gap: 6px; margin-top: var(--space-2); flex-wrap: wrap; }
.hs-risk-chip  { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: var(--fw-semibold); }
.hs-risk-high    { background: #fee2e2; color: #b91c1c; }
.hs-risk-medium  { background: #fef3c7; color: #92400e; }
.hs-risk-low     { background: #dbeafe; color: #1d4ed8; }
.hs-risk-very_low{ background: #dcfce7; color: #15803d; }

.hs-sig-row  { cursor: default; }
.hs-sig-signed { color: var(--status-pass) !important; }

.hs-sig-list-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--row-pad-x);
  border-bottom: 1px solid var(--f-border);
}
.hs-sig-list-name { font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--fg-primary); }
.hs-sig-list-signed { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--status-pass); }
.hs-sig-list-pending { font-size: var(--text-sm); color: var(--fg-tertiary); }

/* ── H&S AI Builder screen ───────────────────────────── */
.hs-ai-content { display:flex; flex-direction:column; padding:0; gap:0; height:100%; }
.hs-ai-messages { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; background:var(--bg-subtle); }
.hs-ai-msg { display:flex; }
.hs-ai-msg--user { justify-content:flex-end; }
.hs-ai-msg--ai   { justify-content:flex-start; }
.hs-ai-bubble { max-width:82%; padding:10px 14px; border-radius:12px; font-size:14px; line-height:1.5; }
.hs-ai-msg--user .hs-ai-bubble { background:var(--ea-green-600); color:#fff; border-bottom-right-radius:3px; }
.hs-ai-msg--ai   .hs-ai-bubble { background:var(--bg-surface); border:1px solid var(--f-border); border-bottom-left-radius:3px; }
.hs-ai-input-row { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--f-border); background:var(--bg-surface); flex-shrink:0; }
.hs-ai-textarea  { flex:1; resize:none; min-height:44px; }

/* ── Notification opt-in prompt (category screen) ──────────────────────────
   iOS only honours Notification.requestPermission() from a tap, so this card
   exists to provide one. See _renderNotifyPrompt in app.js. */
.ego-notify-prompt {
  margin-top: 16px; padding: 14px 16px;
  background: var(--bg-subtle, #f4f5f3);
  border: 1px solid var(--border-subtle, #e2e3e0);
  border-left: 3px solid var(--ea-green-600, #578842);
  border-radius: 10px;
  font-size: 14px; color: var(--fg-primary, #1f2022);
}
.ego-notify-prompt .ego-notify-sub {
  margin-top: 4px; font-size: 13px; line-height: 1.45;
  color: var(--fg-secondary, #5c5e61);
}

/* Set up this phone (2026-09-29): three steps, each a tick once done. */
.setup-steps { display: flex; flex-direction: column; gap: 10px; }
.setup-step {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: var(--bg-surface, #fff); border: 1px solid var(--border-subtle, #e2e3e0);
  border-radius: 10px;
}
.setup-step-icon { flex-shrink: 0; color: var(--fg-secondary, #5c5e61); padding-top: 1px; }
.setup-step.is-done .setup-step-icon { color: var(--ea-green-600, #578842); }
.setup-step.is-warn { border-left: 3px solid var(--ea-amber-600, #c6822a); }
.setup-step.is-warn .setup-step-icon { color: var(--ea-amber-600, #c6822a); }
.setup-step-body { flex: 1; min-width: 0; }
.setup-step-title { font-size: 15px; font-weight: 700; color: var(--fg-primary, #1f2022); }
.setup-step.is-done .setup-step-title { color: var(--fg-secondary, #5c5e61); }
.setup-step-sub { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--fg-secondary, #5c5e61); }
.setup-btn { margin-top: 10px; }
.setup-foot { margin-top: 18px; }
.setup-link-wrap { margin-top: 18px; text-align: center; }
.setup-link { border: none; background: none; color: var(--fg-tertiary, #6e6f72); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px; }