/* ============================================================
   POLINTEL DESIGN SYSTEM — v1
   Method: tokens first, components second, pages consume both.
   Palette: dataviz reference instance (pre-validated, WCAG-checked).
   Rules encoded here (see design/DESIGN.md for the rationale):
   - All interactive targets >= 44x44px
   - Body text >= 4.5:1 contrast in both themes (AA)
   - 4px spacing scale; nothing off-grid
   - Status colors NEVER carry meaning alone (icon + label pairing)
   - One accent hue; identity via text chips, not color-coding
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* spacing — 4px base grid */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* type scale — 1.2 ratio, rem-based */
  --fs-xs: 0.75rem;   /* 12 — eyebrows, chips (never body) */
  --fs-sm: 0.8125rem; /* 13 — meta lines */
  --fs-base: 0.9375rem; /* 15 — body */
  --fs-md: 1.0625rem; /* 17 — card titles */
  --fs-lg: 1.375rem;  /* 22 — page titles */
  --fs-xl: 1.75rem;   /* 28 — hero numbers */
  --fs-hero: 2.25rem; /* 36 — dashboard stat values */
  --lh-body: 1.55;
  --lh-tight: 1.25;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --touch: 44px;           /* minimum interactive target */
  --maxw: 1080px;          /* content column */
  --font: system-ui, -apple-system, "Segoe UI", Roboto,
          "Noto Sans", "Noto Sans Tamil", "Noto Sans Devanagari", sans-serif;
}

/* dark = default theme */
:root, :root[data-theme="dark"] {
  --page:        #0d0d0d;
  --surface:     #1a1a19;
  --surface-2:   #232322;           /* nested chunks on a card */
  --ink:         #ffffff;
  --ink-2:       #c3c2b7;
  --ink-muted:   #898781;           /* small labels only, never body */
  --hairline:    #2c2c2a;
  --border:      rgba(255,255,255,0.10);
  --accent:      #3987e5;
  --accent-ink:  #ffffff;
  --good:        #0ca30c;
  --warning:     #fab219;
  --serious:     #ec835a;
  --critical:    #d03b3b;
  --chip-bg:     #2c2c2a;
  --focus-ring:  #86b6ef;
}
:root[data-theme="light"] {
  --page:        #f9f9f7;
  --surface:     #fcfcfb;
  --surface-2:   #f0efec;
  --ink:         #0b0b0b;
  --ink-2:       #52514e;
  --ink-muted:   #898781;
  --hairline:    #e1e0d9;
  --border:      rgba(11,11,11,0.10);
  --accent:      #2a78d6;
  --accent-ink:  #ffffff;
  --good:        #006300;   /* light-surface step: keeps >=4.5:1 for text use */
  --warning:     #8a5b00;   /* text-safe warning ink on light */
  --serious:     #a04a28;   /* text-safe step of serious on light surface */
  --critical:    #d03b3b;
  --chip-bg:     #f0efec;
  --focus-ring:  #1c5cab;
}

/* ---------- 2. RESET & BASE ---------- */
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  background: var(--page);
  color: var(--ink);
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- 3. LAYOUT CONVENTIONS ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-4); }

.topnav {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.topnav .wrap {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 56px;
}
.brand {
  font-weight: 700; font-size: var(--fs-md); color: var(--ink);
  letter-spacing: 0.02em; white-space: nowrap;
}
.brand .dot { color: var(--accent); }
.navlinks {
  display: flex; gap: var(--s-1); overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.navlinks::-webkit-scrollbar { display: none; }
.navlinks a {
  display: inline-flex; align-items: center;
  min-height: var(--touch); padding: 0 var(--s-3);
  border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap;
}
.navlinks a:hover { background: var(--surface-2); text-decoration: none; }
.navlinks a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.theme-btn {
  margin-left: auto;
  min-width: var(--touch); min-height: var(--touch);
  background: none; border: none; cursor: pointer;
  color: var(--ink-2); font-size: 1.1rem; border-radius: var(--radius-sm);
}
.theme-btn:hover { background: var(--surface-2); }

.page-head { padding: var(--s-8) 0 var(--s-4); }
.page-head h1 { font-size: var(--fs-lg); line-height: var(--lh-tight); }
.page-head .sub { color: var(--ink-2); font-size: var(--fs-sm); margin-top: var(--s-1); }

/* section chunking: eyebrow + rule */
.section { margin: var(--s-8) 0; }
.section > .eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: var(--s-4);
}
.section > .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* ---------- 4. COMPONENTS ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-5);
}
.grid { display: grid; gap: var(--s-4); }
.grid-tiles { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* stat tile — hero number pattern (dataviz: "sometimes not a chart") */
.tile .label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-muted); }
.tile .value { font-size: var(--fs-hero); font-weight: 700; line-height: 1.1;
  margin-top: var(--s-2); }
.tile .meta { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-1); }

/* status — icon + label, never color alone */
.st { display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none; }
.st-good     { color: var(--good); }
.st-warning  { color: var(--warning); }
.st-serious  { color: var(--serious); }
.st-critical { color: var(--critical); }
.st-idle     { color: var(--ink-muted); }

/* avatars — person photos; offices fall back to a monogram */
.avatar {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--border); flex: none;
  background: var(--surface-2);
}
.avatar-lg { width: 76px; height: 76px; }
.avatar-mono {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); font-weight: 700; font-size: 1.25rem;
}

/* chips — identity via text, not color-coding */
.chip {
  display: inline-flex; align-items: center;
  padding: 2px var(--s-2); border-radius: 999px;
  background: var(--chip-bg); border: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
}
.chip-accent { color: var(--accent); border-color: var(--accent); background: transparent; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: var(--touch); min-width: var(--touch);
  padding: 0 var(--s-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-base); font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-good     { background: var(--good); border-color: var(--good); color: #fff; }
.btn-critical { background: var(--critical); border-color: var(--critical); color: #fff; }
.btn-block { width: 100%; }

/* claim / timeline rows */
.day-group { margin-bottom: var(--s-6); }
.day-group > .day-head {
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-3);
  position: sticky; top: 56px; background: var(--page); z-index: 5;
}
.claim {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--s-4);
  margin-bottom: var(--s-3);
}
.claim .claim-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--ink-2);
}
.claim .claim-text { white-space: pre-wrap; word-wrap: break-word; }
.claim .claim-foot {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.claim .claim-foot a { min-height: var(--touch); display: inline-flex; align-items: center;
  font-size: var(--fs-sm); font-weight: 600; }

/* banners */
.banner {
  display: flex; gap: var(--s-3); align-items: flex-start;
  border-radius: var(--radius-md); padding: var(--s-4);
  font-size: var(--fs-sm); margin: var(--s-4) 0;
  border: 1px solid;
}
.banner-sample { border-color: var(--warning); color: var(--ink);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.banner-info { border-color: var(--accent); color: var(--ink);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.banner .b-icon { flex: none; }

/* digest cards */
.digest .digest-body { white-space: pre-wrap; font-size: var(--fs-base);
  color: var(--ink-2); max-height: 340px; overflow-y: auto; }
.digest .digest-tag { margin-bottom: var(--s-3); }

/* key-value meta lists (registry) */
.kv { display: grid; grid-template-columns: 130px 1fr; gap: var(--s-2) var(--s-4);
  font-size: var(--fs-sm); }
.kv dt { color: var(--ink-muted); font-weight: 600; }
.kv dd { color: var(--ink); }

/* role history — dated facts */
.roles { list-style: none; }
.roles li { display: flex; gap: var(--s-3); padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline); font-size: var(--fs-sm); }
.roles li:last-child { border-bottom: none; }
.roles .dates { color: var(--ink-muted); white-space: nowrap; min-width: 150px;
  font-variant-numeric: tabular-nums; }

/* health table */
.health { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.health th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-muted); font-weight: 600;
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--hairline); }
.health td { padding: var(--s-3); border-bottom: 1px solid var(--hairline);
  color: var(--ink-2); font-variant-numeric: tabular-nums; }
.health tr:last-child td { border-bottom: none; }

/* spot-check flow */
.spot-card { max-width: 640px; margin: 0 auto; }
.spot-progress { font-size: var(--fs-sm); color: var(--ink-muted);
  text-align: center; margin-bottom: var(--s-3); }
.verdict-bar {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3);
  margin-top: var(--s-5);
}
@media (max-width: 480px) {
  .verdict-bar {
    position: sticky; bottom: 0; background: var(--page);
    padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom));
    margin: var(--s-5) calc(-1 * var(--s-4)) 0;
    padding-left: var(--s-4); padding-right: var(--s-4);
    border-top: 1px solid var(--hairline);
  }
}

/* forms & login */
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-2); margin-bottom: var(--s-2); }
.input {
  width: 100%; min-height: var(--touch); padding: 0 var(--s-4);
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-base);
}
.input:focus { border-color: var(--accent); outline: none; }
.login-wrap { min-height: 100dvh; display: flex; align-items: center;
  justify-content: center; padding: var(--s-4); background: var(--page); }
.login-card { width: 100%; max-width: 380px; }

/* footer */
.foot { margin: var(--s-12) 0 var(--s-8); padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs); color: var(--ink-muted); }

/* utility */
.muted { color: var(--ink-muted); }
.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); }
.empty {
  text-align: center; color: var(--ink-muted); padding: var(--s-10) var(--s-4);
  border: 1px dashed var(--hairline); border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}