/* PriceTransparency.io — Cold, precise, data-dense.
   Deep blue primary · fluorescent lime signal · warm-tinted neutrals.
   Inter + Geist Mono · WCAG AA on text, AAA on body. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

.pt-root {
  /* Ink — warm-tinted 8-step. Hue ~70 (warm), very low chroma so dense
     tables read as paper, not lab-coat clinical. */
  --ink-950: oklch(0.18 0.012 70);
  --ink-900: oklch(0.24 0.013 70);
  --ink-800: oklch(0.32 0.013 70);
  --ink-700: oklch(0.42 0.012 70);
  --ink-600: oklch(0.54 0.010 70);
  --ink-500: oklch(0.65 0.010 70);
  --ink-400: oklch(0.75 0.008 70);
  --ink-300: oklch(0.84 0.008 70);
  --ink-200: oklch(0.91 0.006 70);
  --ink-150: oklch(0.94 0.005 70);
  --ink-100: oklch(0.965 0.004 70);
  --ink-50:  oklch(0.985 0.003 70);

  /* Surface — warm-leaning paper white. Reads as document, not lab. */
  --surface:   oklch(0.992 0.003 70);
  --surface-2: oklch(0.972 0.005 70);
  --surface-3: oklch(0.945 0.006 70);

  /* Primary — deep saturated blue. The carrier of authority. */
  --primary-950: oklch(0.20 0.10 264);
  --primary-900: oklch(0.24 0.13 264);
  --primary-800: oklch(0.30 0.16 264);
  --primary-700: oklch(0.34 0.18 264);  /* primary fill */
  --primary-600: oklch(0.40 0.19 264);
  --primary-500: oklch(0.48 0.20 264);  /* links, focus */
  --primary-400: oklch(0.60 0.18 264);
  --primary-300: oklch(0.74 0.12 264);
  --primary-200: oklch(0.85 0.07 264);
  --primary-100: oklch(0.93 0.04 264);
  --primary-50:  oklch(0.97 0.018 264);

  /* Signal — ONE fluorescent. The rate. Pair only with primary-900+ or
     ink-950. Never set on light gray. */
  --signal-500: oklch(0.92 0.28 130);   /* hot lime — the rate */
  --signal-400: oklch(0.86 0.26 130);
  --signal-300: oklch(0.94 0.18 130);   /* dim variant for fills */
  --signal-100: oklch(0.96 0.10 130);   /* paper-safe wash */

  /* Rate semantics — used inside data cells. */
  --rate-positive:      oklch(0.55 0.14 152);  /* below-market = good */
  --rate-positive-soft: oklch(0.94 0.05 152);
  --rate-warning:       oklch(0.56 0.18 28);   /* above-market = warning */
  --rate-warning-soft:  oklch(0.95 0.04 28);
  --rate-neutral:       var(--ink-600);

  /* Compliance grade colors — A..F */
  --grade-a: oklch(0.55 0.14 152);
  --grade-b: oklch(0.66 0.14 130);
  --grade-c: oklch(0.74 0.15 88);
  --grade-d: oklch(0.66 0.16 55);
  --grade-f: oklch(0.56 0.18 28);

  /* Type */
  --sans: "Inter", "Söhne", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Radius — sharp by default; the product is tables. */
  --r-0: 0px;
  --r-2: 2px;
  --r-3: 3px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-full: 999px;

  /* Shadows — hairlines, not blooms. */
  --shadow-card: 0 1px 0 var(--ink-200);
  --shadow-pop:  0 1px 2px oklch(0.18 0.012 70 / 0.06), 0 12px 30px -14px oklch(0.18 0.012 70 / 0.22);
}

.pt-root {
  font-family: var(--sans);
  color: var(--ink-950);
  background: var(--surface);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 1.5;
}

/* Tabular numbers — non-negotiable. The whole product compares numbers. */
.pt-root .num,
.pt-root .mono {
  font-family: var(--mono);
  font-feature-settings: "tnum", "zero", "ss01";
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Uppercase technical micro-label */
.pt-root .micro {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-600);
}

/* Faint dot-grid for hero panels */
.pt-grid {
  background-image: radial-gradient(circle at 1px 1px, oklch(0.18 0.012 70 / 0.06) 1px, transparent 0);
  background-size: 18px 18px;
}

/* Faint vertical column rules — for hero hint of "this is a table" */
.pt-cols {
  background-image: linear-gradient(to right, oklch(0.18 0.012 70 / 0.05) 1px, transparent 1px);
  background-size: 80px 100%;
}

/* Hairline rules */
.pt-rule { border: 0; border-top: 1px solid var(--ink-200); margin: 0; }
.pt-rule-strong { border: 0; border-top: 1px solid var(--ink-950); margin: 0; }

/* Tabular cells — right-align money, default-align text. */
.pt-root td.num, .pt-root th.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  text-align: right;
}

/* Pill */
.pt-root .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--r-2);
  background: var(--ink-100);
  color: var(--ink-700);
  border: 1px solid var(--ink-200);
}
.pt-root .pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pt-root .pill.primary { background: var(--primary-50);  color: var(--primary-700); border-color: transparent; }
.pt-root .pill.signal  { background: oklch(0.18 0.012 70); color: var(--signal-500); border-color: transparent; }
.pt-root .pill.pos     { background: var(--rate-positive-soft); color: var(--rate-positive); border-color: transparent; }
.pt-root .pill.warn    { background: var(--rate-warning-soft);  color: var(--rate-warning);  border-color: transparent; }

/* Button primitives */
.pt-root .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--r-4);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s;
  white-space: nowrap;
  min-height: 36px;
}
.pt-root .btn-primary { background: var(--primary-700); color: white; }
.pt-root .btn-primary:hover { background: var(--primary-600); }
.pt-root .btn-signal  { background: var(--signal-500); color: var(--primary-950); }
.pt-root .btn-ghost   { background: transparent; color: var(--ink-950); border-color: var(--ink-300); }
.pt-root .btn-dark    { background: var(--ink-950);    color: var(--surface); }

/* Input */
.pt-root .input {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-700);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-4);
  min-height: 36px;
}
.pt-root .input:focus-within { border-color: var(--primary-500); }
.pt-root .input .kbd {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--ink-200);
  border-radius: 3px;
  color: var(--ink-600);
}

/* Code block */
.pt-root .code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  background: var(--ink-950);
  color: var(--ink-100);
  padding: 16px 18px;
  border-radius: var(--r-4);
  overflow: hidden;
}
.pt-root .code .kw { color: oklch(0.78 0.18 290); }
.pt-root .code .fn { color: var(--primary-300); }
.pt-root .code .st { color: oklch(0.82 0.14 145); }
.pt-root .code .nm { color: var(--signal-400); }
.pt-root .code .cm { color: var(--ink-500); font-style: italic; }

/* Compliance grade chip — A..F square */
.pt-root .grade {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  border-radius: var(--r-3);
  color: white;
  letter-spacing: -0.01em;
}
.pt-root .grade.a { background: var(--grade-a); }
.pt-root .grade.b { background: var(--grade-b); color: var(--ink-950); }
.pt-root .grade.c { background: var(--grade-c); color: var(--ink-950); }
.pt-root .grade.d { background: var(--grade-d); }
.pt-root .grade.f { background: var(--grade-f); }

/* Rate cell — the hero number style */
.pt-root .rate {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pt-root .rate-hot {
  background: var(--signal-500);
  color: var(--primary-950);
  padding: 2px 6px;
  border-radius: var(--r-2);
}

/* Tabular slot — the wordmark's signature mark; also reusable for
   "value pending" placeholders inside the product. */
.pt-slot {
  display: inline-block;
  width: 0.18em;
  height: 1em;
  background: var(--signal-500);
  vertical-align: -0.10em;
  margin: 0 0.04em;
}