/* Design tokens and components, taken from the 39-screen mockup so the built
   app and the mockup are the same object. Colours, radii, type scale, the
   44px tap-target floor and the 11px type floor are all as audited there. */

:root {
  --bg: oklch(0.972 0.011 90);
  --surface: oklch(0.998 0.002 90);
  --text: oklch(0.235 0.021 275);
  --muted: oklch(0.455 0.021 275);
  --faint: oklch(0.50 0.019 275);
  --border: oklch(0.895 0.012 275);
  --line: oklch(0.938 0.009 275);

  --violet: oklch(0.52 0.19 292);  --violet-d: oklch(0.38 0.15 292);  --violet-s: oklch(0.948 0.033 292);
  --teal:   oklch(0.52 0.10 197);  --teal-d:   oklch(0.38 0.085 197); --teal-s:   oklch(0.948 0.030 197);
  --pink:   oklch(0.55 0.165 350); --pink-d:   oklch(0.40 0.14 350);  --pink-s:   oklch(0.952 0.032 350);
  --coral:  oklch(0.58 0.16 44);   --coral-d:  oklch(0.42 0.13 44);   --coral-s:  oklch(0.952 0.038 44);
  --ok:     oklch(0.53 0.125 155); --ok-d:     oklch(0.38 0.105 155); --ok-s:     oklch(0.948 0.040 155);
  --warn:   oklch(0.58 0.135 62);  --warn-d:   oklch(0.42 0.115 62);  --warn-s:   oklch(0.950 0.048 70);
  --bad:    oklch(0.52 0.19 26);   --bad-d:    oklch(0.40 0.16 26);   --bad-s:    oklch(0.948 0.048 26);

  --tabbar: 86px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.185 0.016 285);
    --surface: oklch(0.232 0.018 285);
    --text: oklch(0.955 0.008 285);
    --muted: oklch(0.735 0.018 285);
    --faint: oklch(0.665 0.018 285);
    --border: oklch(0.315 0.018 285);
    --line: oklch(0.285 0.016 285);
    --violet-s: oklch(0.30 0.06 292);  --violet-d: oklch(0.82 0.10 292);
    --teal-s:   oklch(0.29 0.04 197);  --teal-d:   oklch(0.82 0.07 197);
    --pink-s:   oklch(0.30 0.06 350);  --pink-d:   oklch(0.84 0.09 350);
    --coral-s:  oklch(0.30 0.06 44);   --coral-d:  oklch(0.85 0.09 44);
    --ok-s:     oklch(0.28 0.05 155);  --ok-d:     oklch(0.82 0.10 155);
    --warn-s:   oklch(0.30 0.06 70);   --warn-d:   oklch(0.86 0.10 70);
    --bad-s:    oklch(0.30 0.07 26);   --bad-d:    oklch(0.83 0.12 26);
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ---- layout ------------------------------------------------------------ */

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: 24px 18px calc(var(--tabbar) + var(--safe-b) + 26px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#app.no-tabbar { padding-bottom: calc(var(--safe-b) + 26px); }

/* ---- type -------------------------------------------------------------- */

.h1 { font-size: 23px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.18; }
.h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.012em; }
.sub { font-size: 12px; color: var(--muted); font-weight: 500; }
.sec { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.num { font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.rf { display: flex; align-items: center; gap: 12px; }
.stack { display: flex; flex-direction: column; }
.divide > * + * { border-top: 1px solid var(--line); }

/* ---- surfaces ---------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(35, 20, 60, 0.035);
}
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; min-height: 62px;
  width: 100%; text-align: left;
  background: none; border: 0; color: inherit; font: inherit;
}
a.row, button.row { cursor: pointer; }
a.row:active, button.row:active { background: var(--line); }

.ic { width: 36px; height: 36px; border-radius: 11px; display: flex;
      align-items: center; justify-content: center; flex-shrink: 0; }

.pill { border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700;
        display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ---- controls ---------------------------------------------------------- */

.btn {
  border-radius: 14px; padding: 15px 16px; text-align: center;
  font-size: 14px; font-weight: 700; min-height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.btn.pri { background: var(--violet); color: #fff; }
.btn.gho { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn.dan { background: var(--bad-s); color: var(--bad-d); }
.btn:disabled { opacity: .45; cursor: default; }

.hbtn {
  width: 44px; height: 44px; border-radius: 13px; background: var(--surface);
  border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; color: var(--text); flex-shrink: 0; cursor: pointer;
}

.field {
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  padding: 13px 14px; font-size: 16px; /* 16px stops iOS zooming on focus */
  font-weight: 600; min-height: 48px; width: 100%;
  color: var(--text); font-family: inherit;
}
.field:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.flab { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; display: block; }
.fgrp { display: flex; flex-direction: column; }
.fhint { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 8px; }

/* ---- tabs -------------------------------------------------------------- */

.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: 480px;
  height: calc(var(--tabbar) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: var(--surface); border-top: 1px solid var(--border);
  display: flex; align-items: flex-start; padding-top: 11px; z-index: 20;
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--muted); min-height: 48px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  text-decoration: none;
}
.tab.on { color: var(--violet); font-weight: 700; }
.tab svg { width: 22px; height: 22px; }

.utabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.utab {
  font-size: 13px; font-weight: 600; color: var(--muted); padding: 12px 10px 13px;
  min-width: 44px; min-height: 44px; text-align: center;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer; font-family: inherit;
}
.utab.on { color: var(--coral-d); border-bottom-color: var(--coral); font-weight: 700; }

/* ---- photos ------------------------------------------------------------ */

/* Photo, employer and salary appear in EVERY list and picker. The names
   collide dangerously: two different women are Ma Theresa Delmo Grajo and
   Matheresa Divinagarcia Sumande. */
.ph {
  border-radius: 13px; object-fit: cover; background: var(--line);
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--muted); overflow: hidden;
}
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph.sm { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
.ph.lg { width: 72px; height: 72px; border-radius: 20px; font-size: 24px; }

/* ---- timeline ---------------------------------------------------------- */

.tl { position: relative; padding-left: 26px; }
.tl:before { content: ""; position: absolute; left: 6px; top: 9px; bottom: 9px;
             width: 2px; background: var(--border); }
.tli { position: relative; }
.tli + .tli { margin-top: 15px; }
.dot { position: absolute; left: -26px; top: 5px; width: 14px; height: 14px;
       border-radius: 999px; border: 3px solid var(--bg); }

/* ---- flags on imprecise data ------------------------------------------- */

/* An inferred or month-only date must never look like a recorded one. */
.approx {
  font-size: 11px; font-weight: 700; color: var(--warn-d);
  background: var(--warn-s); border-radius: 6px; padding: 1px 6px;
  white-space: nowrap;
}
.approx::before { content: "≈ "; }
.inferred::before { content: "~ "; }

/* ---- issues ------------------------------------------------------------ */

.issue { display: flex; gap: 11px; padding: 12px 14px; align-items: flex-start; }
.issue .ic { width: 30px; height: 30px; border-radius: 9px; }
.issue-high .ic { background: var(--bad-s); color: var(--bad-d); }
.issue-medium .ic { background: var(--warn-s); color: var(--warn-d); }
.issue-low .ic { background: var(--teal-s); color: var(--teal-d); }
.issue b { font-size: 13.5px; font-weight: 700; display: block; }
.issue p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.issue small { font-size: 11px; color: var(--faint); font-style: italic; display: block; margin-top: 4px; }

/* ---- misc -------------------------------------------------------------- */

.sheet {
  position: fixed; inset: 0; z-index: 40; background: rgba(20, 12, 35, .42);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet > div {
  background: var(--bg); width: 100%; max-width: 480px;
  border-radius: 22px 22px 0 0; padding: 20px 18px calc(24px + var(--safe-b));
  max-height: 88dvh; overflow: auto; display: flex; flex-direction: column; gap: 16px;
}

.empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 13px; }

.banner {
  border-radius: 14px; padding: 12px 14px; font-size: 12.5px; font-weight: 600;
  display: flex; gap: 10px; align-items: flex-start;
}
.banner.warn { background: var(--warn-s); color: var(--warn-d); }
.banner.bad { background: var(--bad-s); color: var(--bad-d); }
.banner.ok { background: var(--ok-s); color: var(--ok-d); }
.banner.info { background: var(--teal-s); color: var(--teal-d); }

svg { display: block; }
.mono { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  .row, .btn { transition: background-color .12s ease; }
}