/* ==========================================================================
   GrizzlyRadar design system
   --------------------------------------------------------------------------
   Values here are measured, not invented. Computed styles were pulled from
   Linear, Whop, Perplexity and Rolls-Royce; the four agree on more than they
   disagree, and this file encodes the agreement:

     - one sans, plus a mono for figures and statute citations
     - near-black neutral ground, surfaces as translucent white (2-7%)
     - border-radius 0 almost everywhere (Linear ships 1896 of 2061 at zero)
     - display type at line-height 1.0 with negative tracking
     - small body text (13-16px)
     - a four-step neutral ramp doing the work colour usually does

   Colour rule for this product: the ONLY hue in the interface is the verdict.
   Green/amber/red mean "your lease is safe / needs work / is bad". Brand green
   appears in the logo and nowhere else, so a renter can never mistake
   decoration for a safety signal.
   ========================================================================== */

:root {
  /* ground + surfaces
     Surfaces have to actually read as surfaces. At 3% white on near-black a
     card is indistinguishable from the page and the whole thing looks
     unfinished rather than restrained. These are the levels where a panel
     reads as a panel and an edge reads as an edge. */
  --bg:            #0a0b0d;
  --bg-deep:       #060708;
  --bg-raised:     #14171b;
  --surf-1:        #101216;
  --surf-2:        #171a1f;
  --surf-3:        #1e2229;
  --surf-glass:    rgba(255, 255, 255, 0.045);
  --line:          rgba(255, 255, 255, 0.10);
  --line-2:        rgba(255, 255, 255, 0.18);
  --line-3:        rgba(255, 255, 255, 0.32);
  --hi:            rgba(255, 255, 255, 0.07);   /* top inner highlight */

  /* elevation — one light source, above and slightly forward.
     A surface reads as a real object when three things agree: the plane is
     GRADED (brighter where the light lands, settling to base), the top edge
     CATCHES that light as a 1px inner highlight, and a shadow is CAST below,
     tight-blurred with negative spread so it hugs the object instead of
     smearing. Flat fills plus a border is a drawing of a card; this is a card.

     Level carries meaning, so pick by role, not by taste:
       e0  data — cells, rows, anything inside a grid. No lift at all.
       e1  seated — a card at rest on the page.
       e2  raised — a panel that holds actions or owns a region.
       e3  floating — the ONE object a screen is about. Rare by design.

     A note on shadows in a near-black room: a big soft black shadow is
     invisible against a #0a0b0d ground — there is no room left to darken. What
     actually separates an object here is a TIGHT contact line directly under
     its bottom edge (the ground is not pure black, so 1-2px of near-black
     still reads as a seam) plus the lit top edge above it. The wide ambient
     blur is the smallest part of the effect, so it stays subtle and the
     contact line does the work. */
  --e1:            0 1px 0 var(--hi) inset,
                   0 1px 1px -1px rgba(0,0,0,0.9);
  --e2:            0 1px 0 var(--hi) inset,
                   0 2px 2px -1px rgba(0,0,0,0.95),
                   0 14px 30px -18px rgba(0,0,0,0.8);
  --e3:            0 1px 0 rgba(255,255,255,0.10) inset,
                   0 3px 3px -1px rgba(0,0,0,1),
                   0 30px 60px -28px rgba(0,0,0,0.9);
  --grade-1:       linear-gradient(180deg, var(--surf-2), var(--surf-1));
  --grade-2:       linear-gradient(180deg, var(--surf-3), var(--surf-1));
  --shadow:        var(--e2);   /* legacy alias */

  /* four-step neutral ramp — this is the palette */
  --t1:            #f4f6f8;
  --t2:            #cdd3db;
  --t3:            #9aa2ad;
  --t4:            #858d97;   /* label layer: must clear WCAG AA (4.5:1) on
                                 surf-2, because every 11px micro-label uses it.
                                 #737b85 measured 4.07 and was unreadable. */

  /* verdict — the only colour in the interface */
  --clear:         #4cb782;
  --clear-dim:     rgba(76, 183, 130, 0.14);
  --caution:       #d4a72c;
  --caution-dim:   rgba(212, 167, 44, 0.14);
  --critical:      #e8655c;
  --critical-dim:  rgba(232, 101, 92, 0.15);

  /* status palette — OPS SURFACES ONLY (admin, partner dashboards).
     The verdict rule above exists to protect renters: on the consumer pages
     the only hue is the verdict, so decoration can never be mistaken for a
     safety signal. An ops console has the opposite requirement — status IS
     the content an admin scans, and rendering sixty-eight records in one flat
     grey makes the screen unreadable at a glance. Colour here is information,
     never decoration: one hue per state, nothing tinted for looks. Every value
     clears 5.8:1 on --surf-2. Never use these on renter-facing pages. */
  --st-info:       #6aa9f0;
  --st-info-dim:   rgba(106, 169, 240, 0.14);
  --st-good:       #57c98d;
  --st-good-dim:   rgba(87, 201, 141, 0.14);
  --st-warn:       #e0b341;
  --st-warn-dim:   rgba(224, 179, 65, 0.14);
  --st-bad:        #ef6d63;
  --st-bad-dim:    rgba(239, 109, 99, 0.14);
  --st-idle:       #9aa2ad;
  --st-idle-dim:   rgba(154, 162, 173, 0.12);

  /* brand — logo surfaces only, never UI */
  --brand:         #93c93c;

  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type scale — display sizes carry lh 1.0 and negative tracking */
  --step--2: 0.6875rem;   /* 11px  labels, eyebrows */
  --step--1: 0.8125rem;   /* 13px  secondary text */
  --step-0:  0.875rem;    /* 14px  body */
  --step-1:  1rem;        /* 16px  lead */
  --step-2:  1.375rem;    /* 22px  card titles */
  --step-3:  2rem;        /* 32px  section heads */
  --step-4:  clamp(2.25rem, 5vw, 3.5rem);
  --step-5:  clamp(2.75rem, 7.5vw, 5.25rem);

  --gut:     clamp(1rem, 4vw, 3rem);
  --measure: 68ch;
}

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

/* Any display rule in this file outranks the hidden attribute's UA style,
   so an element with [hidden] and a .gr-* layout class stays visible.
   Restore the attribute's meaning once, globally. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  color-scheme: dark;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.gr-display {
  font-size: var(--step-5);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}
.gr-h1 { font-size: var(--step-4); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; margin: 0; text-wrap: balance; }
.gr-h2 { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.026em; line-height: 1.08; margin: 0; text-wrap: balance; }
.gr-h3 { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.018em; line-height: 1.15; margin: 0; text-wrap: balance; }
.gr-h4 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.012em; margin: 0; }

.gr-lead   { font-size: var(--step-1); color: var(--t3); line-height: 1.55; margin: 0; max-width: 52ch; }
.gr-muted  { color: var(--t3); }
.gr-dim    { color: var(--t4); }
.gr-small  { font-size: var(--step--1); }
.gr-mono   { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.gr-eyebrow {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t4);
  margin: 0;
}

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

.gr-shell { max-width: 74rem; margin: 0 auto; padding: 0 var(--gut); }
.gr-stack { display: grid; gap: 1rem; }
.gr-stack-lg { display: grid; gap: 2rem; }
.gr-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.gr-center { display: grid; place-items: center; text-align: center; }
.gr-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.gr-scroll { overflow-x: auto; }

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

.gr-panel {
  background: var(--grade-1);
  border: 1px solid var(--line);
  box-shadow: var(--e2);
  padding: 1.25rem;
}
.gr-panel-quiet { background: none; border: 1px solid var(--line); padding: 1.25rem; }

/* the one object a screen is about */
.gr-raised {
  background: var(--grade-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--e3);
}
/* seated: a card at rest, lit but not lifted off the page */
.gr-seated {
  background: var(--grade-1);
  border: 1px solid var(--line);
  box-shadow: var(--e1);
}

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

.gr-btn {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.01em;
  background: var(--t1);
  color: var(--bg);
  border: 1px solid var(--t1);
  border-radius: 0;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: opacity 0.15s ease;
}
.gr-btn:hover { opacity: 0.88; }
.gr-btn:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; }

.gr-btn-quiet {
  background: transparent;
  color: var(--t1);
  border-color: var(--line-2);
}
.gr-btn-quiet:hover { background: var(--surf-2); opacity: 1; }

.gr-link {
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--step--1);
  color: var(--t3);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
.gr-link:hover { color: var(--t1); border-color: var(--line-3); }
.gr-link:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; }

.gr-field { display: grid; gap: 0.4rem; }
.gr-label { font-size: var(--step--1); color: var(--t3); }

.gr-input, .gr-select, .gr-textarea {
  font-family: var(--sans);
  font-size: var(--step-0);
  color: var(--t1);
  background: var(--surf-1);
  border: 1px solid var(--line-2);
  border-radius: 0;
  padding: 0.6rem 0.75rem;
  width: 100%;
}
.gr-textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.gr-input:focus, .gr-select:focus, .gr-textarea:focus {
  outline: none;
  border-color: var(--line-3);
  background: var(--surf-2);
}
.gr-select option { background: #14171b; color: var(--t1); }

/* status chips are the one place a pill is allowed */
.gr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--t3);
}
.gr-chip-clear    { color: var(--clear);    border-color: var(--clear);    background: var(--clear-dim); }
.gr-chip-caution  { color: var(--caution);  border-color: var(--caution);  background: var(--caution-dim); }
.gr-chip-critical { color: var(--critical); border-color: var(--critical); background: var(--critical-dim); }

/* ---------- verdict semantics --------------------------------------------- */

[data-verdict="clear"]    { --verdict: var(--clear);    --verdict-dim: var(--clear-dim); }
[data-verdict="caution"]  { --verdict: var(--caution);  --verdict-dim: var(--caution-dim); }
[data-verdict="critical"] { --verdict: var(--critical); --verdict-dim: var(--critical-dim); }

/* ---------- brand mark ---------------------------------------------------- */

.gr-logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--t1); }
.gr-logo img { display: block; height: 1.6rem; width: auto; }
.gr-wordmark { font-weight: 600; letter-spacing: -0.03em; font-size: var(--step-1); white-space: nowrap; }
.gr-wordmark span { font-weight: 400; color: var(--t3); }

/* ---------- header / footer ----------------------------------------------- */

.gr-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8, 9, 10, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.gr-header-inner {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0.7rem var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.gr-nav { display: flex; align-items: center; gap: 1.1rem; }
.gr-nav a { color: var(--t3); text-decoration: none; font-size: var(--step--1); }
.gr-nav a:hover { color: var(--t1); }

.gr-footer {
  border-top: 1px solid var(--line);
  margin-top: 5rem;
  padding: 2.5rem var(--gut) 4rem;
  color: var(--t4);
  font-size: var(--step--1);
}
.gr-footer a { color: var(--t3); text-decoration: none; }
.gr-footer a:hover { color: var(--t1); }

/* ---------- tables -------------------------------------------------------- */

.gr-table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
.gr-table th, .gr-table td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--line); }
.gr-table thead th {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t4);
  font-weight: 400;
  white-space: nowrap;
}
.gr-table td { color: var(--t2); }

/* ---------- a11y ---------------------------------------------------------- */

.gr-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gr-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--t1); color: var(--bg); padding: 0.6rem 1rem;
}
.gr-skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- global: the consent banner is position:fixed --------------------
   It is injected app-wide and sits over the bottom of the viewport, so any
   page can end up with its last control permanently underneath it. Reserve the
   space while the banner is actually present. */
body:has(.grizzly-consent-banner:not([hidden])) { padding-bottom: 15rem; }
@media (min-width: 48rem) {
  body:has(.grizzly-consent-banner:not([hidden])) { padding-bottom: 11rem; }
}

/* ==========================================================================
   Element baseline
   --------------------------------------------------------------------------
   Token-pure defaults for unclassed elements, so bare markup lands on the
   system instead of browser defaults. The old "legacy bridge" that re-skinned
   styles.css class vocabulary lived here until every page migrated; it is
   gone, and styles.css with it.
   ========================================================================== */

h1, h2, h3, h4 { font-family: var(--sans); letter-spacing: -0.026em; text-wrap: balance; }
h1 { font-size: var(--step-4); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: var(--step-3); font-weight: 600; line-height: 1.08; }
h3 { font-size: var(--step-2); font-weight: 600; line-height: 1.15; }
h4 { font-size: var(--step-1); font-weight: 600; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], select, textarea {
  background: var(--surf-1);
  color: var(--t1);
  border: 1px solid var(--line-2);
  border-radius: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--line-3);
  background: var(--surf-2);
}

table { border-collapse: collapse; }
th { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t4); font-weight: 400; }
td, th { border-color: var(--line); }