/* ============================================================
   TOW SAFE ATLAS — cluster theme: the certification label
   Loaded AFTER atlas.css. Keeps the structural system and
   replaces the material world.

   The world is the document this site is actually about: the
   door-jamb certification label, DOT placards, a CAT scale
   ticket. Stencilled condensed caps on galvanised steel, heavy
   black rules, hazard amber for a warning and safety red for a
   limit exceeded. Equipment-marking language, not stationery.

   The previous rendition failed because it was polite. A payload
   limit is not a polite subject — going over it is a brake-fade
   problem, and the surface should say so.
   ============================================================ */

:root{
  /* ground — galvanised steel, cool and slightly hard */
  --paper:#e4e5e1;
  --paper-2:#d5d7d2;
  /* ink — near-black, high contrast, stencil */
  --ink:#131414;
  --ink-2:#494b48;
  --ink-3:#555753;
  --rule:#8d918b;
  --rule-2:#b4b8b2;
  /* markings */
  --prussian:#1b2b38;        /* dark steel, the label field */
  --vermillion:#b3271e;      /* safety red — over the limit */
  --vermillion-ink:#96201a;
  --ochre:#d68910;           /* hazard amber — warning */
  --ochre-ink:#7a4d06;
  --olive:#3f6b3a;           /* within limits */
  --olive-ink:#33562f;
}

/* Everything gets heavier. A label is stamped, not printed. */
.plate{border:4px solid var(--ink)}
.plate-head{border-bottom:3px solid var(--ink)}
.group > .legend{border-bottom:3px solid var(--ink)}
.bar-row.total{border-top:3px solid var(--ink);border-bottom:4px solid var(--ink)}
.title{border-bottom:3px solid var(--ink)}
.content,.foot{border-top:4px solid var(--ink)}

/* Legend lettering becomes equipment marking: condensed, wide-tracked,
   heavier. This is the single most recognisable move in the world. */
.legend{
  letter-spacing:.2em;
  font-weight:700;
  font-stretch:condensed;
}
/* The label field, closed with a hazard hairline over a heavy black
   rule — the way a warning placard is edged. */
.masthead{
  background:
    linear-gradient(var(--ink),var(--ink)) bottom left/100% 4px no-repeat,
    linear-gradient(var(--ochre),var(--ochre)) bottom 4px left/100% 2px no-repeat,
    var(--prussian);
}
.masthead .brand{color:#fff;font-weight:800;letter-spacing:.24em;font-size:.9375rem}
.masthead a{color:#b9c2c9}
.masthead nav a{border-bottom-color:#4a5a66}
.masthead a:hover{color:#fff;border-color:var(--ochre)}

/* Headline: stencilled, unapologetic. */
h1{font-weight:800;letter-spacing:-.02em}

/* Fields read as stamped boxes on a plate. */
.row input,.row select{
  background:#f2f3f1;
  border:2px solid var(--ink);
  font-weight:600;
}
.row input:focus,.row select:focus{outline-color:var(--ochre);background:#fff}
.row{border-bottom-color:var(--rule-2)}

.btn{border:2px solid var(--ink);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-size:.75rem;background:#f2f3f1}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.toggle label{border:2px solid var(--ink);font-weight:700;background:#f2f3f1}
.toggle label + label{border-left-width:0}
.toggle input:checked + label{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Gauges are the load meters on the label. Thicker, harder edges. */
.gauge-track{border:2px solid var(--ink);height:1.5rem;background:#f2f3f1}
.gauge-limit{width:3px;background:var(--ink)}

/* OVER THE LIMIT gets hazard striping — the actual visual language of
   "you have exceeded something", and the reason this world was chosen. */
.gauge-fill.state-over{
  background:repeating-linear-gradient(-45deg,
    var(--vermillion) 0 8px,#8f1c15 8px 16px);
}
.gauge-fill.state-warn{
  background:repeating-linear-gradient(-45deg,
    var(--ochre) 0 8px,#b06f06 8px 16px);
}
.state-over{font-weight:800;text-transform:uppercase;letter-spacing:.04em}

/* Verdict inset becomes a stamped data plate. */
.inset{border:3px solid var(--ink);background:#f2f3f1}
.inset .big{font-weight:800}

/* Bars: harder edges to match. */
.bar-prussian{background:var(--prussian)}
.bar-vermillion{background:var(--vermillion)}

.related a{background:#f2f3f1;border:2px solid var(--rule)}
.related a:hover{border-color:var(--ink);background:#fff}

.content .worked{background:#f2f3f1;border:2px solid var(--ink)}

/* Mobile bar: the label field, wrapping the viewport. */
@media (max-width:60rem){
  .pinned{background:var(--prussian);border-top:4px solid var(--ink)}
  .pinned .legend{color:#a8b4bd}
}