/* ============================================================================
 * eforms — field tool styling
 *
 * Used on a phone, outdoors, in PPE. Every choice below follows from that:
 *  - System fonts only. A web font request on a site with no signal is a
 *    broken screen. Measurements use a monospace stack for tabular figures
 *    and an unambiguous zero.
 *  - Light ground, high contrast. Direct sun defeats dark themes on a phone.
 *  - 48px minimum touch targets, sized for gloves.
 *  - Below-minimum is the loudest thing in the interface, because it is the
 *    most consequential state in the app.
 * ========================================================================= */

:root {
  --ink:        #14181d;
  --ink-soft:   #55606d;
  --ink-faint:  #8a95a3;
  --paper:      #ffffff;
  --field:      #f2f4f7;
  --line:       #d5dae1;

  /* Signal palette. Each colour means exactly one thing. */
  --measure:    #0b6b5e;   /* a good reading */
  --edited:     #1657c4;   /* prepopulated value changed by hand */
  --caution:    #a35c00;   /* approaching minimum, provisional */
  --breach:     #b3231d;   /* at or below minimum */
  --pending:    #6b4fb3;   /* not yet synced */

  --tap: 48px;
  --radius: 10px;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

.mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* --- chrome --------------------------------------------------------------- */

header.app-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.app-bar h1 { font-size: 1.05rem; margin: 0; font-weight: 650; flex: 1; }

.back {
  min-width: var(--tap); min-height: var(--tap);
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink);
  font-size: 1.4rem; cursor: pointer; margin-left: -8px;
}

/* Sync state is always visible. An inspector must never have to guess
   whether the day's work has left the device. */
.sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  background: var(--field); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.sync-pill[data-state="pending"] { background: #f1ecfb; color: var(--pending); border-color: #d9cdf3; }
.sync-pill[data-state="offline"] { background: #fdf1e8; color: var(--caution); border-color: #f0d5bb; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

main { padding: 14px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); max-width: 760px; margin: 0 auto; }

/* --- cards and lists ------------------------------------------------------ */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}

.card h2 { font-size: 0.95rem; margin: 0 0 10px; font-weight: 650; }

.list { display: flex; flex-direction: column; gap: 10px; }

.list-item {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap);
  width: 100%; text-align: left;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit; color: inherit; cursor: pointer;
}
.list-item:active { background: var(--field); }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .title { font-weight: 600; display: block; }
.list-item .sub { color: var(--ink-soft); font-size: 0.84rem; display: block; }
.list-item .chev { color: var(--ink-faint); }

/* Left edge encodes state without relying on colour alone —
   the width changes too, so it survives a colourblind reader. */
.list-item[data-state="breach"] { border-left: 5px solid var(--breach); }
.list-item[data-state="caution"] { border-left: 5px solid var(--caution); }
.list-item[data-state="baseline"] { border-left: 5px dashed var(--ink-faint); }

.row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--field); }
.row:last-child { border-bottom: 0; }
.row-label { color: var(--ink-soft); font-size: 0.88rem; }
.row-value { font-weight: 600; text-align: right; }
.tone-breach  { color: var(--breach); }
.tone-caution { color: var(--caution); }
.tone-edited  { color: var(--edited); }
.tone-faint   { color: var(--ink-faint); font-weight: 500; }

/* --- the signature element: the reading tile ------------------------------
   The measurement at size, with a margin bar showing how much metal remains
   above t-min. The bar is the thing an inspector is actually judging, so it
   gets the emphasis rather than a decorative header. */

.reading-tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.reading-value {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 2.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1;
}
.reading-unit { font-size: 1rem; color: var(--ink-soft); margin-left: 6px; font-family: var(--font-ui); }
.reading-value[data-state="breach"] { color: var(--breach); }
.reading-value[data-state="edited"] { color: var(--edited); }

.margin-bar { height: 12px; border-radius: 6px; background: var(--field); overflow: hidden; margin-top: 14px; border: 1px solid var(--line); }
.margin-fill { height: 100%; background: var(--measure); }
.margin-fill[data-state="caution"] { background: var(--caution); }
.margin-fill[data-state="breach"]  { background: var(--breach); }
.margin-legend { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--ink-soft); margin-top: 6px; }

/* --- inputs --------------------------------------------------------------- */

label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 5px; }

input[type="text"], input[type="date"], input[type="number"], textarea, select {
  width: 100%; min-height: var(--tap);
  padding: 12px 13px;
  font: inherit; color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}
input.numeric { font-family: var(--font-num); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, .list-item:focus-visible {
  outline: 3px solid var(--edited); outline-offset: 2px;
}
input[data-origin="prepopulated_edited"] { color: var(--edited); border-color: var(--edited); }

.hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 5px; }
.hint.err { color: var(--breach); font-weight: 600; }

/* Recall chips: the last five entries, because inputs repeat across
   standard inspections. */
.recall { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.recall button {
  min-height: 40px; padding: 7px 12px;
  background: var(--field); border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer;
}
.recall button:active { background: var(--line); }

/* --- buttons -------------------------------------------------------------- */

.btn {
  min-height: var(--tap); padding: 12px 18px;
  border-radius: var(--radius); border: 1.5px solid var(--line);
  background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-danger  { background: var(--breach); color: var(--paper); border-color: var(--breach); }
.btn-quiet   { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn:active { transform: translateY(1px); }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 10px; margin-top: 12px; }
.btn-row .btn { flex: 1; }

/* --- banners -------------------------------------------------------------- */

.banner { padding: 12px 14px; border-radius: var(--radius); margin-bottom: 12px; font-size: 0.9rem; border: 1px solid; }
.banner-breach   { background: #fdeceb; border-color: #f0b9b6; color: #7d1815; }
.banner-caution  { background: #fdf3e7; border-color: #ecd0ab; color: #6d3e00; }
.banner-info     { background: #eef2fb; border-color: #c3d1ee; color: #123a83; }
.banner strong { display: block; margin-bottom: 2px; }

/* --- sheets and toast ----------------------------------------------------- */

.sheet-backdrop { position: fixed; inset: 0; background: rgba(16,20,26,0.45); display: grid; place-items: end center; z-index: 50; }
.sheet { background: var(--paper); width: 100%; max-width: 520px; border-radius: 16px 16px 0 0; padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.sheet-msg { margin: 0 0 16px; }
.sheet-actions { display: flex; gap: 10px; }
.sheet-actions .btn { flex: 1; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 999px; font-size: 0.9rem; font-weight: 600;
  z-index: 60; transition: opacity .4s;
}
.toast-out { opacity: 0; }

.empty { text-align: center; color: var(--ink-soft); padding: 36px 20px; }
.empty p { margin: 0 0 16px; }

.sig-pad { width: 100%; height: 190px; background: var(--paper); border: 1.5px dashed var(--line); border-radius: var(--radius); touch-action: none; display: block; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:active { transform: none; }
}