/* ==========================================================================
   Hestora brand system — BUILD_BRIEF_v20 section 0, from app/BRAND.md.

   One stylesheet shared by the portal and the modelling app, so they are the
   same visual system rather than two things that resemble each other. BRAND.md
   is the source of truth; if the two disagree, BRAND.md wins.

   The modelling app's own <style> block keeps its LAYOUT rules and consumes the
   tokens declared here. That split is deliberate: it makes the v20 restyle a
   token swap plus a handful of overrides rather than a rewrite of 892 lines of
   working markup, which is what "presentational only, change no behaviour"
   requires in practice.
   ========================================================================== */

:root{
  /* ---- core ---- */
  --navy:#1B3A36;        /* deep GREEN. NOT the old #1B3A5B blue-navy. */
  --teal:#3F8D86;        /* brand accent. NOT the old #0F7C8A. */
  --teal-light:#6FB8B0;  /* teal on dark backgrounds */
  --coral:#D74732;       /* primary call to action */
  --amber:#F59435;
  --blue:#1491A6;
  --ink:#111111;
  --muted:#6B7B78;
  --light:#9AB5AC;       /* muted text on dark */
  --offwhite:#F5F3EF;    /* warm page background — not a cool grey */
  --white:#FFFFFF;
  --border:rgba(30,40,32,0.08);

  /* ---- dark-section variants ---- */
  --d-grn:#1B3A2F; --d-lgt:#F2F0EA; --d-bord:#E4E1D8;
  --d-blk:#0C0C0C; --d-grey:#6B6B66; --d-dgrey:#BCC7C1;

  /* ---- accent tints, paired with their accent ---- */
  --tint-coral:#FAECE7;
  --tint-amber:#FAEEDA;
  --tint-teal:#E1F5EE;
  --tint-blue:#E6F1FB;

  /* ---- shape ---- */
  --r:16px;      /* cards and panels */
  --r-sm:10px;   /* inputs and small elements */
  --r-pill:40px; /* buttons are full pills */

  --font-head:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--offwhite);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  margin:0;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--navy);
  line-height:1.25;
}
/* No serif faces anywhere — Georgia is explicitly removed (BRAND.md). */

h1{font-size:clamp(34px,4vw,50px);letter-spacing:-0.03em}
h2{font-size:clamp(26px,3vw,38px)}
h3{font-size:20px;font-weight:700}

a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   Eyebrow — the site's signature small label above a heading
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-head);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 6px;
  display:block;
}
.eyebrow.on-dark{color:var(--teal-light)}

/* --------------------------------------------------------------------------
   Buttons — full pills
   -------------------------------------------------------------------------- */
.btn,button.btn,a.btn{
  display:inline-block;
  font-family:var(--font-head);
  font-weight:700;
  font-size:15px;
  padding:15px 34px;
  border-radius:var(--r-pill);
  border:0;
  cursor:pointer;
  text-align:center;
  transition:all .2s;
  text-decoration:none;
}
.btn-primary{background:var(--coral);color:#fff}
.btn-primary:hover{background:#c23d2a;text-decoration:none}
.btn-secondary{background:var(--teal);color:#fff}
.btn-secondary:hover{background:#357a74;text-decoration:none}
.btn-ghost{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,0.12);text-decoration:none}
.btn-quiet{background:transparent;border:1px solid var(--border);color:var(--navy);
  padding:9px 20px;font-size:13px}
.btn-quiet:hover{background:var(--white);text-decoration:none}
.btn-danger{background:var(--coral);color:#fff;padding:9px 20px;font-size:13px}
.btn:disabled,button.btn:disabled{opacity:.55;cursor:default}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:22px;
}

/* Accent tint cards — soft fill with a coloured numeral or badge. */
.tint{border-radius:var(--r);padding:20px;border:1px solid transparent}
.tint-coral{background:var(--tint-coral);border-color:rgba(215,71,50,.18)}
.tint-amber{background:var(--tint-amber);border-color:rgba(245,148,53,.20)}
.tint-teal {background:var(--tint-teal); border-color:rgba(63,141,134,.20)}
.tint-blue {background:var(--tint-blue); border-color:rgba(20,145,166,.18)}
.tint .num{font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.04em}
.tint-coral .num{color:var(--coral)}
.tint-amber .num{color:var(--amber)}
.tint-teal  .num{color:var(--teal)}
.tint-blue  .num{color:var(--blue)}

/* --------------------------------------------------------------------------
   Header / footer — the site alternates dark and light full-width sections
   -------------------------------------------------------------------------- */
.site-header{background:var(--navy);color:#fff;padding:14px 0}
.site-header .inner{max-width:1200px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.site-header .logo img{height:34px;width:auto;display:block}
.site-header .strap{color:var(--d-dgrey);font-size:13px;font-family:var(--font-head)}
.site-header .spacer{flex:1}
.site-header .who{font-size:12px;color:var(--d-dgrey);font-family:var(--font-head)}
.site-header .who a{color:var(--teal-light)}

.site-footer{background:var(--navy);color:var(--d-dgrey);padding:28px 0;margin-top:40px;font-size:12px}
.site-footer .inner{max-width:1200px;margin:0 auto;padding:0 24px}
.site-footer a{color:var(--teal-light)}
/* v21: the footer wordmark is capped by WIDTH, and both selector forms are covered.
   Previously only `.site-footer .logo img` was styled, which requires the img to be a
   DESCENDANT of .logo -- but the footer markup puts the class on the <img> itself, so
   the rule never matched and the logo rendered at its intrinsic 1246x464, filling most
   of the viewport. Width (not height) is the constraint the brief asks for, and
   `height:auto` keeps the 2.69:1 aspect ratio. */
.site-footer .logo img,
.site-footer img.logo{width:140px;max-width:45vw;height:auto;opacity:.9;margin-bottom:14px;display:block}
.site-footer .disclaimer{max-width:760px;line-height:1.7}

/* --------------------------------------------------------------------------
   v21: page head — the eyebrow + title band that sits under the dark header
   -------------------------------------------------------------------------- */
.page-head{background:var(--navy);color:#fff;padding:0 0 26px}
.page-head .inner{max-width:1200px;margin:0 auto;padding:0 24px}
.page-head h1{color:#fff;font-size:clamp(24px,2.6vw,32px);letter-spacing:-0.03em;margin:4px 0 6px}
.page-head .sub{color:var(--d-dgrey);font-size:13px;margin:0;max-width:70ch;line-height:1.6}

/* A navigation control in the dark header, not an afterthought link. */
.btn-nav{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:13px;
  padding:8px 18px;border-radius:var(--r-pill);text-decoration:none;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.20);color:#fff;
  transition:all .2s;white-space:nowrap}
.btn-nav:hover{background:rgba(255,255,255,0.16);text-decoration:none;color:#fff}

/* --------------------------------------------------------------------------
   v21: dashboard — three cards, equal height, not nine equal-weight ones
   -------------------------------------------------------------------------- */
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.dash-card{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r);padding:26px 24px;
  color:inherit;text-decoration:none;transition:all .2s;height:100%}
.dash-card .icon{width:56px;height:56px;display:block;margin-bottom:16px}
.dash-card h3{margin:0 0 8px;font-size:19px}
.dash-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.65}
.dash-card .meta{margin-top:auto;padding-top:16px;font-family:var(--font-head);
  font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--teal)}
/* Live cards lift on hover. */
a.dash-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(27,58,54,.10);
  text-decoration:none;border-color:rgba(63,141,134,.30)}
/* The installer card is deliberately inert: muted, dashed, no hover, not a link. */
.dash-card.muted-card{background:transparent;border-style:dashed;
  border-color:rgba(30,40,32,0.16);cursor:default}
.dash-card.muted-card h3{color:var(--muted)}
.dash-card.muted-card .icon{opacity:.75}
.dash-card.muted-card .meta{color:var(--muted)}

@media (max-width:900px){ .dash-grid{grid-template-columns:1fr} }

/* --------------------------------------------------------------------------
   Pass / fail — on-brand, not arbitrary green and red
   -------------------------------------------------------------------------- */
.pass{color:var(--teal)}
.fail{color:var(--coral)}
.pill{display:inline-block;padding:3px 12px;border-radius:var(--r-pill);
  font-family:var(--font-head);font-size:12px;font-weight:700}
.pill.p{background:var(--tint-teal);color:var(--teal)}
.pill.f{background:var(--tint-coral);color:var(--coral)}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
label{display:block;font-family:var(--font-head);font-size:13px;font-weight:600;
  color:var(--muted);margin:14px 0 4px}
input,select,textarea{
  width:100%;padding:11px 12px;border:1px solid rgba(30,40,32,0.14);
  border-radius:var(--r-sm);font-size:15px;font-family:var(--font-body);
  background:var(--white);color:var(--ink);transition:all .2s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(63,141,134,.14)}
.hint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}

/* --------------------------------------------------------------------------
   Portal layout
   -------------------------------------------------------------------------- */
.page{max-width:1200px;margin:0 auto;padding:36px 24px}
.page-narrow{max-width:720px;margin:0 auto;padding:44px 24px}
.prose{max-width:760px}
.prose p{margin:0 0 14px}
.prose h2{margin:32px 0 10px}
.prose h3{margin:24px 0 8px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose li{margin:5px 0}

.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.doc-card{display:block;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:20px;transition:all .2s;color:inherit;text-decoration:none}
.doc-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(27,58,54,.08);text-decoration:none}
.doc-card h3{margin:0 0 6px;font-size:17px}
.doc-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.doc-card.soon{opacity:.62;cursor:default;background:transparent;border-style:dashed}
.doc-card.soon:hover{transform:none;box-shadow:none}

.tbl{width:100%;border-collapse:collapse;font-size:13px;background:var(--white);
  border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.tbl th{background:var(--tint-teal);color:var(--navy);font-family:var(--font-head);
  font-size:12px;font-weight:700;text-align:left;padding:11px 12px;
  letter-spacing:.04em;text-transform:uppercase}
.tbl td{padding:11px 12px;border-top:1px solid var(--border);vertical-align:top}
.tbl tr:hover td{background:rgba(63,141,134,.04)}

.badge{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);
  font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.03em}
.badge-ok{background:var(--tint-teal);color:var(--teal)}
.badge-warn{background:var(--tint-amber);color:#b46a12}
.badge-bad{background:var(--tint-coral);color:var(--coral)}
.badge-quiet{background:rgba(30,40,32,.06);color:var(--muted)}

.notice{border-radius:var(--r);padding:16px 18px;margin:18px 0;font-size:14px;line-height:1.6}
.notice-warn{background:var(--tint-amber);border:1px solid rgba(245,148,53,.28)}
.notice-bad{background:var(--tint-coral);border:1px solid rgba(215,71,50,.24)}
.notice-info{background:var(--tint-blue);border:1px solid rgba(20,145,166,.20)}
.notice-teal{background:var(--tint-teal);border:1px solid rgba(63,141,134,.22)}
.notice strong{font-family:var(--font-head)}

.stack>*+*{margin-top:14px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}

@media (max-width:720px){
  .page,.page-narrow{padding:24px 16px}
  .site-header .inner{gap:12px}
  .btn{padding:13px 26px}
}