/* ===========================================================================
   Design system.

   Two rules shape everything here:

   1. THIN LETTERFORMS. Body text is 300, display type 200. Thin type reads as
      premium -- but it also loses legibility fast, so it is used honestly:
        - never below 14px at weight 300
        - UI chrome (buttons, labels, badges) sits at 450-500, because thin
          text at small sizes in a dense interface is a readability failure,
          not a style
        - thin type gets MORE colour contrast and MORE letter-spacing at
          display sizes, where tight tracking would otherwise look slack
      Saying this out loud matters: "thin everywhere" and "legible" conflict,
      and the resolution is deliberate rather than accidental.

   2. DERIVED, NOT DECLARED. Every surface, border, hover and state colour is
      computed from the four brand tokens with color-mix(). A partner changing
      --brand-accent restyles the whole interface coherently and cannot
      produce an unreadable one.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200..700&display=swap");
/* TODO before production: self-host. A third-party font CDN is a privacy and
   performance dependency, and whitelabel partners may supply their own. */

:root {
  /* --- neutrals: one ramp, slightly warm, never pure black ------------- */
  --ink-900: #14171a;
  --ink-700: #3d454d;
  --ink-500: #697480;
  --ink-400: #8e99a4;
  --ink-200: #d6dce2;
  --ink-100: #e9edf1;
  --ink-050: #f5f7f9;
  --paper:   #ffffff;

  /* --- semantic surfaces, all derived -------------------------------- */
  --bg:        var(--ink-050);
  --surface:   var(--paper);
  --surface-2: color-mix(in srgb, var(--brand-accent) 3%, var(--paper));
  --border:    var(--ink-200);
  --border-soft: var(--ink-100);
  --hover:     color-mix(in srgb, var(--brand-accent) 5%, var(--paper));

  --text:      var(--ink-900);
  --text-soft: var(--ink-700);
  --muted:     var(--ink-500);
  --hint:      var(--ink-400);

  --accent:      var(--brand-accent);
  --accent-ink:  var(--brand-accent-ink);
  --accent-weak: color-mix(in srgb, var(--brand-accent) 10%, var(--paper));
  --accent-line: color-mix(in srgb, var(--brand-accent) 28%, var(--paper));
  --accent-hover: color-mix(in srgb, var(--brand-accent) 85%, white);

  /* --- severity: hue is fixed, but tints follow the brand so an alert
         never looks pasted in from another product ---------------------- */
  --critical:      #a4303f;
  --critical-weak: color-mix(in srgb, #a4303f 8%, var(--paper));
  --critical-line: color-mix(in srgb, #a4303f 25%, var(--paper));
  --warn:          #8a6411;
  --warn-weak:     color-mix(in srgb, #8a6411 9%, var(--paper));
  --warn-line:     color-mix(in srgb, #8a6411 25%, var(--paper));
  --ok:            #2f6b4f;
  --ok-weak:       color-mix(in srgb, #2f6b4f 8%, var(--paper));
  --info:          var(--ink-500);
  --info-weak:     var(--ink-050);

  /* --- type scale. Thin by default; chrome steps up. ------------------ */
  --w-display: 200;
  --w-body: 300;
  --w-medium: 450;   /* labels, buttons -- NOT 300: too fragile at 13px */
  --w-strong: 550;   /* numbers that must be read at a glance */

  --t-display: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  --t-h2: 1.3rem;
  --t-h3: 1.0625rem;
  --t-body: 0.9375rem;   /* 15px -- the floor for weight 300 */
  --t-small: 0.875rem;   /* 14px -- absolute floor at 300 */
  --t-micro: 0.75rem;    /* 12px -- only ever at --w-medium or above */

  --radius: 10px;
  --radius-sm: 6px;
  --gap: 1rem;
  --shadow: 0 1px 2px rgb(20 23 26 / 4%), 0 8px 24px -16px rgb(20 23 26 / 18%);

  color-scheme: light;
}

/* --- dark mode: a token REMAP, not a second stylesheet. Same convention
       as the GreenmorMail webmail, which keeps one source of truth. ------ */
:root[data-theme="dark"] {
  --ink-900: #eef1f4;
  --ink-700: #c2cad2;
  --ink-500: #93a0ab;
  --ink-400: #74818c;
  --ink-200: #343c44;
  --ink-100: #262d34;
  --ink-050: #1a1f24;
  --paper:   #11151a;
  --bg: #0d1013;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -16px rgb(0 0 0 / 70%);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900: #eef1f4; --ink-700: #c2cad2; --ink-500: #93a0ab;
    --ink-400: #74818c; --ink-200: #343c44; --ink-100: #262d34;
    --ink-050: #1a1f24; --paper: #11151a; --bg: #0d1013;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -16px rgb(0 0 0 / 70%);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--brand-font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-body);
  line-height: 1.6;
  letter-spacing: 0.004em;        /* thin type needs a touch of air */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- layout: mobile first, ALWAYS. 16px side gutter, no horizontal scroll */
.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 16px; }

h1, h2, h3 { font-family: var(--brand-font-display); margin: 0; }
h1 {
  font-size: var(--t-display);
  font-weight: var(--w-display);
  letter-spacing: -0.022em;      /* display sizes need tightening back up */
  line-height: 1.12;
}
h2 { font-size: var(--t-h2); font-weight: 250; letter-spacing: -0.012em; }
h3 { font-size: var(--t-h3); font-weight: var(--w-medium); letter-spacing: -0.004em; }

p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.lede { font-size: 1.0625rem; font-weight: var(--w-body); color: var(--text-soft); max-width: 46ch; }
.muted { color: var(--muted); }
.micro { font-size: var(--t-micro); font-weight: var(--w-medium); letter-spacing: 0.02em; }

/* Numbers are read, not prose: tabular, and heavier so they hold at a glance. */
.num { font-variant-numeric: tabular-nums; font-weight: var(--w-strong); letter-spacing: -0.01em; }

/* --- app chrome ------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.topbar .inner { display: flex; align-items: center; gap: .75rem; min-height: 56px; }
.brand { display: flex; align-items: center; gap: .55rem; font-weight: var(--w-medium); letter-spacing: -0.01em; }
.brand-mark {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--brand-tint)));
}
.brand-name::after { content: var(--brand-name); }
.spacer { flex: 1 1 auto; }

/* --- cards ------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 1.125rem; }
@media (min-width: 40rem) { .card-pad { padding: 1.375rem 1.5rem; } }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 52rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ⚠️ Grid and flex children default to min-width:auto, so a child containing
   anything with a min-width (the data table below) REFUSES to shrink and
   pushes the whole page wider than the viewport. On a phone that clips every
   line of body copy on the right. This one line is the fix, and it is the
   single most common way a "mobile-first" layout silently is not. */
.grid > *, .card { min-width: 0; }

/* --- badges ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t-micro); font-weight: var(--w-medium);
  letter-spacing: .02em; text-transform: uppercase;
  padding: .15rem .45rem; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.badge.critical { color: var(--critical); background: var(--critical-weak); border-color: var(--critical-line); }
.badge.warn     { color: var(--warn);     background: var(--warn-weak);     border-color: var(--warn-line); }
.badge.info     { color: var(--info);     background: var(--info-weak);     border-color: var(--border); }
.badge.ok       { color: var(--ok);       background: var(--ok-weak);       border-color: color-mix(in srgb, var(--ok) 22%, var(--paper)); }

/* Confidence is deliberately quiet -- it qualifies a claim, it is not the claim. */
.conf { font-size: var(--t-micro); font-weight: var(--w-medium); color: var(--hint); letter-spacing: .02em; }

/* --- a finding ---------------------------------------------------------
   Severity shows as a left rule, not a filled card: a feed of saturated
   panels reads as noise, and everything here is already important. */
.finding {
  display: grid; gap: .6rem;
  padding: 1rem 1.125rem 1.125rem;
  border-left: 2px solid var(--border);
  border-bottom: 1px solid var(--border-soft);
}
.finding:last-child { border-bottom: 0; }
.finding.critical { border-left-color: var(--critical); background: color-mix(in srgb, var(--critical) 2.5%, transparent); }
.finding.warn     { border-left-color: var(--warn);     background: color-mix(in srgb, var(--warn) 2.5%, transparent); }
.finding.info     { border-left-color: var(--ink-200); }

.finding-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.finding-head h3 { flex: 1 1 18ch; min-width: 0; }
.finding-body { color: var(--text-soft); max-width: 68ch; }
.finding-action {
  color: var(--text); background: var(--accent-weak);
  border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  padding: .6rem .75rem; max-width: 68ch;
}
.finding-action strong { font-weight: var(--w-medium); }

/* --- EVIDENCE. The verbatim provider response, shown as a quotation and
       never paraphrased. This element is the product's whole argument, so it
       is styled to look like primary source material, not UI copy. -------- */
.evidence {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--t-small); font-weight: 400; line-height: 1.5;
  color: var(--text-soft);
  background: var(--ink-050);
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: .6rem .7rem;
  overflow-x: auto;
  white-space: pre-wrap; word-break: break-word;
}
.evidence .tag { color: var(--hint); }

/* --- health factors ---------------------------------------------------- */
.factor { display: grid; gap: .4rem; padding: .85rem 0; border-bottom: 1px solid var(--border-soft); }
.factor:last-child { border-bottom: 0; }
.factor-top { display: flex; align-items: baseline; gap: .5rem; }
.factor-top .name { font-weight: var(--w-medium); }
.factor-top .score { margin-left: auto; font-size: 1.05rem; }
.meter { height: 4px; border-radius: 999px; background: var(--ink-100); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.meter.poor > span { background: var(--critical); }
.meter.watch > span { background: var(--warn); }
.meter.good > span { background: var(--ok); }
.meter.nodata > span { background: var(--ink-200); }

/* --- tables ------------------------------------------------------------ */
.scroll-x { overflow-x: auto; max-width: 100%; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 34rem; }
table.data th {
  text-align: left; font-size: var(--t-micro); font-weight: var(--w-medium);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  padding: .5rem .6rem; border-bottom: 1px solid var(--border);
}
table.data td { padding: .55rem .6rem; border-bottom: 1px solid var(--border-soft); }
table.data tbody tr:hover { background: var(--hover); }
table.data td.n { text-align: right; font-variant-numeric: tabular-nums; }

.section-label {
  font-size: var(--t-micro); font-weight: var(--w-medium);
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .5rem;
}
.empty { color: var(--muted); padding: 1.25rem 1.125rem; }

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

/* --- form controls ------------------------------------------------------
   Inputs sit at weight 400, not 300: user-entered text must be unambiguous,
   and thin type in a field reads as placeholder text. */
.input {
  width: 100%;
  font: inherit; font-weight: 400;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .65rem;
}
.input:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 1px;
  border-color: var(--accent);
}

.btn {
  font: inherit; font-weight: var(--w-medium);
  color: var(--accent-ink); background: var(--accent);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: .5rem .85rem; cursor: pointer;
}
.btn:hover { background: var(--accent-hover); }
.btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.btn.ghost {
  color: var(--text-soft); background: transparent; border-color: var(--border);
  padding: .3rem .6rem;
}
.btn.ghost:hover { background: var(--hover); color: var(--text); }