/* ============================================================
   ClaimReady — shared design tokens + base component library
   Linked by every screen so html.to.design imports ONE consistent
   set of color styles + reusable structures (→ Figma components).
   ============================================================ */

:root {
  /* Brand — deep navy (banking / trust) */
  --navy-900: #0A1730;
  --navy-800: #0E1E3D;
  --navy-700: #14294F;
  --navy-600: #1D3A6B;

  /* Accent — emergency red */
  --red-500: #FF3B30;
  --red-600: #E5302A;

  /* Status */
  --green-500: #1FB877;
  --green-050: #E7F7F0;
  --amber-500: #F5A623;
  --amber-050: #FDF3E1;

  /* Neutrals */
  --bg:        #EEF1F6;
  --surface:   #FFFFFF;
  --ink-900:   #0A1730;
  --ink-600:   #5B6678;
  --ink-400:   #9AA4B6;
  --hairline:  #E7EAF1;
  --field-bg:  #F4F6FA;
  --on-navy:   #FFFFFF;
  --on-navy-dim: #A9B6D1;

  /* Typography — SF Pro (iOS native); Inter as web fallback */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', sans-serif;

  /* Radius */
  --r-xl: 22px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-pill: 999px;

  /* Spacing (4pt) */
  --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;

  /* Elevation */
  --shadow-card: 0 6px 20px rgba(10, 23, 48, 0.06);
  --shadow-red:  0 10px 24px rgba(255, 59, 48, 0.28);
  --shadow-up:   0 -6px 20px rgba(10, 23, 48, 0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* body = exactly one 375-wide screen → clean 375 frame on import */
html, body { margin: 0; padding: 0; width: 375px; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  color: var(--ink-900);
}

/* ---------- Device frame ---------- */
.phone {
  width: 375px;
  height: 812px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone--camera { background: #0B0E14; }

/* ---------- Status bar ---------- */
.statusbar {
  height: 50px;
  padding: 0 var(--s5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  color: var(--ink-900);
}
.statusbar.on-dark { color: #fff; }
.statusbar .time { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.statusbar .icons { display: flex; align-items: center; gap: 6px; }

/* ---------- App bar (flow header) ---------- */
.appbar {
  flex-shrink: 0;
  padding: 4px var(--s5) 0;
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.iconbtn {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-900); flex-shrink: 0;
}
.appbar .title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.appbar .spacer { flex: 1; }
.appbar .step-count { font-size: 13px; font-weight: 600; color: var(--ink-400); }

/* ---------- Stepper (flow progress) ---------- */
.stepper {
  flex-shrink: 0;
  padding: 16px var(--s5) 4px;
}
.stepper .track { height: 4px; border-radius: var(--r-pill); background: var(--hairline); overflow: hidden; }
.stepper .fill { height: 100%; border-radius: var(--r-pill); background: var(--navy-700); transition: width .35s cubic-bezier(.4,0,.2,1); }
/* legacy segment stepper (kept for any non-rebuilt screen) */
.stepper .seg { display:inline-block; height: 4px; border-radius: var(--r-pill); background: var(--hairline); }
.stepper .seg.done { background: var(--navy-700); }
.stepper .seg.active { background: var(--red-500); }

/* ---------- Content area ---------- */
.content {
  flex: 1;
  padding: var(--s5);
  overflow: hidden;
}
.content .eyebrow { font-size: 13px; font-weight: 700; color: var(--red-500); letter-spacing: .4px; text-transform: uppercase; }
.content h1 { font-size: 26px; font-weight: 800; letter-spacing: -.6px; margin-top: 8px; line-height: 1.18; }
.content .lead { font-size: 15px; font-weight: 500; color: var(--ink-600); margin-top: 10px; line-height: 1.45; }
.section-label { font-size: 13px; font-weight: 700; color: var(--ink-900); margin: 22px 2px 12px; }

/* ---------- Buttons ---------- */
.btn {
  height: 54px; width: 100%;
  border: none; border-radius: var(--r-md);
  font-family: var(--font); font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: -.2px;
  text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--navy-800); color: #fff; }
.btn--danger  { background: var(--red-500); color: #fff; box-shadow: var(--shadow-red); }
.btn--ghost   { background: transparent; color: var(--ink-600); }
.btn[disabled] { background: var(--hairline); color: var(--ink-400); box-shadow: none; }

/* ---------- Bottom action bar ---------- */
.bottombar {
  flex-shrink: 0;
  padding: 12px var(--s5) 28px;
  background: var(--bg);
}
.bottombar.on-surface { background: var(--surface); box-shadow: var(--shadow-up); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s4);
}

/* ---------- Selectable option ---------- */
.opt {
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex; align-items: center; gap: 14px;
}
.opt + .opt { margin-top: 12px; }
.opt .opt-ico {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--field-bg); color: var(--navy-700);
}
.opt .opt-txt { flex: 1; }
.opt .opt-t { font-size: 15.5px; font-weight: 700; }
.opt .opt-s { font-size: 13px; font-weight: 500; color: var(--ink-600); margin-top: 2px; }
.opt .opt-check {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--hairline); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: transparent;
}
.opt--selected { border-color: var(--navy-700); background: #F7F9FD; }
.opt--selected .opt-check { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.opt--danger.opt--selected { border-color: var(--red-500); background: #FFF4F3; }
.opt--danger .opt-ico { background: #FFF0EF; color: var(--red-500); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700;
  padding: 5px 10px; border-radius: var(--r-pill);
}
.chip .cd { width: 6px; height: 6px; border-radius: 50%; }
.chip--amber { background: var(--amber-050); color: #B9791A; }
.chip--amber .cd { background: var(--amber-500); }
.chip--green { background: var(--green-050); color: #0E7A52; }
.chip--green .cd { background: var(--green-500); }

/* ---------- Form fields ---------- */
.field { margin-top: 16px; }
.field .lbl { font-size: 13px; font-weight: 600; color: var(--ink-600); margin-bottom: 7px; display: block; }
.input {
  height: 52px; width: 100%;
  background: var(--field-bg);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  padding: 0 16px;
  font-family: var(--font); font-size: 16px; font-weight: 600; color: var(--ink-900);
  display: flex; align-items: center;
}
.input.is-filled { border-color: var(--navy-700); background: var(--surface); }
.input .ph { color: var(--ink-400); font-weight: 500; }
.input.plate { letter-spacing: 3px; font-weight: 800; font-size: 20px; text-align: center; justify-content: center; }

/* ---------- Segmented choice grid ---------- */
.seg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg-item {
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.seg-item .si-ico { color: var(--navy-700); }
.seg-item .si-l { font-size: 14px; font-weight: 700; }
.seg-item--selected { border-color: var(--navy-700); background: #F7F9FD; }

/* ---------- List row ---------- */
.listrow {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.listrow .lr-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--field-bg); color: var(--navy-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.listrow .lr-txt { flex: 1; }
.listrow .lr-t { font-size: 15px; font-weight: 700; }
.listrow .lr-s { font-size: 13px; font-weight: 500; color: var(--ink-600); margin-top: 2px; }
.listrow .lr-edit { font-size: 13px; font-weight: 700; color: var(--navy-600); }

/* ---------- Photo thumb ---------- */
.thumb {
  aspect-ratio: 1; border-radius: var(--r-md);
  background: linear-gradient(135deg, #DDE3EE, #C7D0E0);
  display: flex; align-items: center; justify-content: center;
  color: #8A97AE; position: relative; overflow: hidden;
}
.thumb .tag { position: absolute; left: 8px; bottom: 8px; background: rgba(10,23,48,.72); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.thumb--add { background: var(--surface); border: 1.5px dashed var(--ink-400); color: var(--ink-400); }
.thumb .ok { position: absolute; right: 8px; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--green-500); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ---------- Interactions (browser-clickable prototype) ---------- */
a.btn, a.iconbtn, a.shutter { text-decoration: none; }
a.iconbtn { color: var(--ink-900); }
.btn, .iconbtn, .opt, .seg-item, .listrow, .thumb, .shutter { transition: transform .12s ease, box-shadow .12s ease; }
.btn:active, .iconbtn:active, .opt:active, .seg-item:active, .thumb:active, .shutter:active { transform: scale(.97); }
body { animation: screen-in .26s ease both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }