/* ===========================================================================
   ROW QC - BRAND STYLESHEET
   ===========================================================================

   The tokens and the components built from them. Loaded by the landing page
   (index.html) and by the brand sheet (brand.html).

   WHAT THIS FILE IS NOT

   It is not loaded by the app. www/app.html is deliberately one self-contained
   file with no build step and no stylesheet request - that property is stated
   in netlify.toml and it is worth keeping, because it means a deploy can never
   half-land and leave the app running with the wrong CSS.

   So the app MIRRORS the :root block below in its own inline <style>. That is a
   real duplication and it can drift. It is the smaller of two evils, and the
   rule for keeping it honest is simple:

     CHANGE A COLOUR HERE, CHANGE IT IN app.html's :root IN THE SAME COMMIT.

   brand.html renders both and puts them side by side, so a drift shows up as
   two swatches that do not match rather than as nothing at all.

   =========================================================================== */

:root{
  /* --- ground -------------------------------------------------------------
     Four steps of dark, not one. A single panel colour makes every surface
     the same distance from the reader; these are ordered so that "further
     forward" always means "lighter". */
  --bg:#12161a;            /* the workspace itself */
  --bg-panel:#1a2126;      /* a panel sitting on it */
  --bg-panel-2:#212a31;    /* a panel on a panel - table headers, sub-cards */
  --bg-raised:#262f37;     /* modals, menus, anything floating */

  --border:#333e47;
  --border-soft:#293138;

  /* --- ink --------------------------------------------------------------- */
  --text:#e8ebed;
  --text-dim:#8f9aa3;
  --text-faint:#8a939b;

  /* --- accent -------------------------------------------------------------
     Deliberately not Hot Pass amber and not Sparky QC blue. These products get
     shown side by side in the same meeting and they have to be told apart from
     across a table. */
  --accent:#31b3a6;
  --accent-hot:#46cfc1;    /* hover, and the one place a gradient is allowed */
  --accent-dim:rgba(49,179,166,.12);

  /* --- status -------------------------------------------------------------
     Three states and no more. A palette with six severities is a palette
     nobody can read at a glance, which defeats the point of colour-coding a
     QA/QC screen. */
  --pass:#4fae7a;
  --warn:#d9a13a;
  --bad:#e8542a;

  /* --- brand furniture ----------------------------------------------------
     These two exist for the logo and print, not for the interface.
     --plate is the logo's field; --steel-dim is the survey grey inside the
     mark, a step darker than --steel so the accent leads. Do not reach for
     them to style a button. */
  --plate:#102a2f;
  --steel:#7c8790;
  --steel-dim:#6b7780;

  /* --- type ---------------------------------------------------------------
     Three faces, each with a job:
       display - headings and the wordmark. Condensed, so a long project name
                 fits a column without shrinking.
       body    - everything a person reads in sentences.
       mono    - anything that is a MEASUREMENT, an id, a station or a date.
                 Tabular figures line up in a column; proportional ones do not,
                 and a stationing column that does not line up is unreadable.
     Loaded from Google Fonts by the pages that use this file. */
  --font-display:'Oswald',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  /* --- measure ------------------------------------------------------------
     One rhythm, so a page built from these never has to invent a number. */
  --gap:18px;
  --pad-section:88px;
  --radius:8px;
  --radius-lg:14px;
  --shadow:0 4px 20px rgba(0,0,0,.4);
  --max:1120px;
}

/* ===========================================================================
   BASE
   =========================================================================== */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-hot);}

h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.14;margin:0 0 14px;
  letter-spacing:.2px;}
h1{font-size:clamp(34px,5.2vw,58px);}
h2{font-size:clamp(26px,3.4vw,38px);}
h3{font-size:20px;}
p{margin:0 0 15px;}

/* The one italic in the system. Used on a single word in a heading to carry
   the accent - never on a sentence, never on body copy. */
h1 em, h2 em{font-style:normal;color:var(--accent);}

/* ===========================================================================
   LAYOUT
   =========================================================================== */

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.section{padding:var(--pad-section) 0;border-top:1px solid var(--border-soft);}
.section.tight{padding:56px 0;}

/* The eyebrow. Monospaced, spaced out, with a rule running into it - the
   drafting-sheet device this whole system is built on. */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--accent);
  margin-bottom:16px;}
.eyebrow .rule{height:1px;width:34px;background:var(--accent);flex:none;opacity:.6;}

.lede{font-size:18px;color:var(--text-dim);max-width:62ch;}

.grid{display:grid;gap:var(--gap);}
.grid.c2{grid-template-columns:repeat(2,1fr);}
.grid.c3{grid-template-columns:repeat(3,1fr);}
.grid.c4{grid-template-columns:repeat(4,1fr);}

/* ===========================================================================
   COMPONENTS
   =========================================================================== */

.card{background:var(--bg-panel);border:1px solid var(--border-soft);
  border-radius:var(--radius);padding:22px 24px;}
.card h3{margin-bottom:8px;}
.card p:last-child{margin-bottom:0;}
.card .k{font-family:var(--font-mono);font-size:10px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:9px;}

.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--accent);
  background:var(--accent);color:#0b1417;font-family:var(--font-display);font-size:15px;
  font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  padding:12px 24px;border-radius:var(--radius);cursor:pointer;transition:background .13s;}
.btn:hover{background:var(--accent-hot);border-color:var(--accent-hot);color:#0b1417;}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border);}
.btn.ghost:hover{background:var(--bg-panel-2);border-color:var(--steel);color:var(--text);}

.pill{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:1.2px;
  text-transform:uppercase;padding:3px 9px;border-radius:20px;
  background:var(--bg-panel-2);color:var(--text-dim);border:1px solid var(--border-soft);}
.pill.accent{background:var(--accent-dim);color:var(--accent);border-color:transparent;}

/* A number and what it counts. The number is display-weight because it is the
   thing being claimed; the label is mono because it is a unit. */
.stat .num{font-family:var(--font-display);font-size:34px;font-weight:600;color:var(--accent);
  line-height:1;}
.stat .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--text-dim);margin-top:7px;}

/* ===========================================================================
   BRAND FURNITURE
   =========================================================================== */

/* The wordmark as live text, for the nav and the app shell. The SVG lockups
   exist for paper and email, where a webfont cannot be fetched; here it can,
   so it is set rather than drawn. */
.wordmark{display:inline-flex;align-items:center;gap:10px;}
.wordmark img{width:30px;height:30px;flex:none;}
.wordmark .word{font-family:var(--font-display);font-size:21px;font-weight:600;
  letter-spacing:1.2px;color:var(--text);}
.wordmark .word em{font-style:normal;color:var(--accent);}

@media (max-width:820px){
  :root{--pad-section:56px;}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr;}
}