/* enginelama — "Service bay" design system.
   Workshop navy, hazard amber, diagnostic green. Saira for the readouts —
   a motorsport face doing an honest trade job. */

/* Saira, served from this site like everything else — the privacy page says
   nobody else is on the line, and a font fetched from Google was the one
   asterisk on that sentence. Single variable file, weight axis 100–900,
   latin subset (SIL Open Font License; © Omnibus-Type). */
@font-face{
  font-family:'Saira';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/saira.woff2") format("woff2");
}

:root{
  --baynight:#131a22;
  --baywall:#1a232e;
  --baywall2:#212d3b;
  --grease:#2c3a4a;
  --overall:#e9eef3;
  --dipstick:#8a97a5;
  --hazard:#ffb020;
  --hazard-deep:#d88f0a;
  --diaggreen:#33d17a;
  --warnred2:#ff6659;
  --saira:'Saira',-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
/* hidden must always win: .gauges{display:grid} and friends would otherwise
   out-rank the browser's own [hidden]{display:none} and leak empty widgets
   into view — and into the screen reader's tree */
[hidden]{display:none!important}

/* seen by screen readers, invisible to everyone else — the announcement channel */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* keyboard users get an unmissable focus ring in the house amber */
:focus-visible{outline:2px solid var(--hazard);outline-offset:2px}

/* a button sitting out a command in flight */
button[disabled]{opacity:.45;cursor:not-allowed}
html{background:var(--baynight);color:var(--overall);font-family:var(--saira);
  font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--hazard)}
h1,h2,h3,h4{line-height:1.15;font-weight:700;letter-spacing:-.01em}
b,strong{font-weight:650;color:var(--overall)}

/* roller door */
.rollerdoor{display:flex;align-items:center;gap:14px;padding:12px 20px;
  border-bottom:1px solid var(--grease);flex-wrap:wrap}
.rollerdoor .vanplate{display:flex;align-items:center;gap:8px;font-weight:800;
  font-size:1.1rem;color:var(--overall);text-decoration:none}
.rollerdoor .vanplate em{font-style:normal;color:var(--hazard)}
.rollerdoor .radio{font-size:.72rem;color:var(--dipstick);margin-right:auto}
.rollerdoor nav{display:flex;gap:16px;font-size:.88rem}
.rollerdoor nav a{text-decoration:none;color:var(--overall);opacity:.85}
.rollerdoor nav a.here{color:var(--hazard);opacity:1}

/* forecourt */
.forecourt{max-width:900px;margin:0 auto;padding:30px 20px 6px}
.forecourt h1{font-size:clamp(1.6rem,5vw,2.5rem)}
.forecourt h1 em{font-style:normal;color:var(--hazard)}
.forecourt .quote2{margin-top:10px;max-width:650px;color:var(--dipstick);font-size:1rem}
.forecourt .quote2 b{color:var(--overall)}

/* the bay */
.workshop{max-width:900px;margin:16px auto 0;padding:0 20px}
.baycase{background:var(--baywall);border:1px solid var(--grease);border-radius:12px;overflow:hidden}

.bayclosed{padding:26px 22px;text-align:center}
.bayclosed p{color:var(--dipstick);font-size:.92rem;max-width:560px;margin:0 auto 16px}
.bayclosed p b{color:var(--overall)}
.connectrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.spanner{font-family:var(--saira);font-weight:700;font-size:.92rem;border-radius:10px;
  border:1.5px solid var(--hazard-deep);background:var(--hazard);color:#241a02;
  padding:11px 22px;cursor:pointer}
.spanner:hover{background:#ffc14d}
.spanner.rag{background:transparent;color:var(--hazard);border-color:var(--grease)}
.spanner.rag:hover{border-color:var(--hazard)}
.spanner.small{font-size:.78rem;padding:7px 13px}
.spanner.danger{background:var(--warnred2);border-color:#c9473c;color:#2b0a06}  /* dark on coral: 6.3:1; white was 2.9 */

.garagestatus{padding:0 22px 14px;font-size:.86rem;color:var(--dipstick);text-align:center}
.garagestatus.err{color:var(--warnred2)}

.bayopen{padding:18px 22px}
.linkkind{display:inline-block;font-size:.75rem;color:var(--diaggreen);border:1px solid var(--diaggreen);
  border-radius:999px;padding:3px 12px;margin-bottom:14px}
.linkkind.demo{color:var(--hazard);border-color:var(--hazard)}
.workrow{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.codesbox h2{font-size:.8rem;color:var(--dipstick);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 6px}
.dtcrow{display:flex;gap:12px;align-items:baseline;background:var(--baywall2);border:1px solid var(--grease);
  border-left:4px solid var(--warnred2);border-radius:8px;padding:10px 14px;margin:6px 0;flex-wrap:wrap}
.dtccode{font-size:1.05rem;color:var(--warnred2);letter-spacing:.04em}
.dtcmean{font-size:.87rem;color:#cdd6df;flex:1;min-width:200px}
.codeclear{color:var(--diaggreen);font-size:.9rem}
.codefail{color:var(--warnred2);font-size:.9rem}
/* the job card, when the clipboard is off limits and it has to be copied by hand */
.cardout{display:block;width:100%;margin-top:10px;background:var(--baynight);color:var(--overall);
  border:1px solid var(--grease);border-radius:8px;padding:10px 12px;resize:vertical;
  font-family:ui-monospace,Menlo,monospace;font-size:.78rem;line-height:1.5;white-space:pre}

/* freeze frame + readiness share the codesbox heading style */
.freezebox,.readybox{margin-top:18px;border-top:1px dashed var(--grease)}
.freezenote{font-size:.82rem;color:var(--dipstick);margin:2px 0 8px;max-width:640px}
.readyhead{background:var(--baywall2);border:1px solid var(--grease);border-radius:8px;
  padding:9px 14px;font-size:.9rem;margin-bottom:8px}
.readyhead .milon{color:var(--warnred2)}
.readyhead .miloff{color:var(--diaggreen)}
.readyhead span{color:var(--dipstick)}
.readygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:6px;margin-top:10px}
.readyrow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--baywall2);border:1px solid var(--grease);border-radius:8px;padding:7px 12px;font-size:.84rem}
.chip{font-size:.63rem;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;
  padding:2px 9px;white-space:nowrap}
.chip.ready{color:var(--diaggreen);border:1px solid var(--diaggreen)}
.chip.notready{color:var(--hazard);border:1px solid var(--hazard)}
.chip.na{color:var(--dipstick);border:1px solid var(--grease)}
.chip.fail{color:var(--warnred2);border:1px solid var(--warnred2)}
.testvals{color:var(--dipstick);font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap}

.gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:12px}
.gauges .g2{background:var(--baywall2);border:1px solid var(--grease);border-radius:10px;padding:12px 14px}
.gauges .g2 b{display:block;font-size:1.3rem;color:var(--hazard);font-variant-numeric:tabular-nums}
.gauges .g2 span{font-size:.68rem;color:var(--dipstick);text-transform:uppercase;letter-spacing:.07em}
.vinout{font-family:ui-monospace,Menlo,monospace;font-size:1.05rem;color:var(--diaggreen);
  background:var(--baywall2);border:1px solid var(--grease);border-radius:8px;padding:10px 14px;margin-top:10px;display:inline-block}

/* clipboard content */
.jobcards{max-width:900px;margin:0 auto;padding:24px 20px 40px}
.jobcards h2{font-size:1.35rem;margin:44px 0 4px}
.jobcards .biro{color:var(--dipstick);font-size:.88rem;margin-bottom:14px}
.jobcards p{margin:12px 0;max-width:700px;color:#cdd6df}
.jobcards ol,.jobcards ul{margin:12px 0 12px 22px;max-width:680px;color:#cdd6df}
.jobcards li{margin:8px 0}

.jobsheet{background:var(--baywall);border:1px solid var(--grease);border-left:4px solid var(--hazard);
  border-radius:10px;padding:18px 20px;margin:30px 0}
.jobsheet .sig{color:var(--dipstick);font-size:.82rem;margin-top:10px}

.boltlist{list-style:none;margin-left:0!important}
.boltlist li{padding-left:26px;position:relative}
.boltlist li::before{content:"⬡";position:absolute;left:2px;color:var(--hazard)}

.qa h3{font-size:1.02rem;margin:22px 0 6px}
.qa p{margin-top:4px}

.manualshelf{display:grid;gap:12px;margin-top:16px}
.manualshelf a{display:block;background:var(--baywall);border:1px solid var(--grease);border-radius:10px;
  padding:14px 16px;text-decoration:none;color:var(--overall)}
.manualshelf a:hover{border-color:var(--hazard)}
.manualshelf b{font-size:1rem}
.manualshelf span{display:block;font-size:.86rem;color:var(--dipstick);margin-top:3px}
.manualshelf time{display:block;font-size:.68rem;color:var(--dipstick);margin-top:8px;text-transform:uppercase;letter-spacing:.08em}

dl.worklog2{max-width:680px}
dl.worklog2 dt{font-weight:700;margin-top:14px;color:var(--hazard)}
dl.worklog2 dd{margin-left:0;color:#cdd6df}

/* articles */
article.jobcard{max-width:720px;margin:0 auto;padding:30px 20px 50px}
article.jobcard h1{font-size:clamp(1.4rem,4.4vw,2rem);margin-bottom:6px}
article.jobcard .byline{color:var(--dipstick);font-size:.82rem;margin-bottom:22px}
article.jobcard h2{font-size:1.15rem;margin:30px 0 8px}
article.jobcard p{margin:13px 0;color:#cdd6df}
article.jobcard ol{margin:12px 0 12px 22px;color:#cdd6df}
article.jobcard li{margin:9px 0}
/* sketches keep a readable size on phones by panning inside their own frame
   rather than shrinking their lettering to dust */
article.jobcard figure{margin:26px 0;text-align:center;overflow-x:auto}
article.jobcard figure svg{max-width:100%;height:auto;min-width:560px}
article.jobcard figcaption{font-size:.78rem;color:var(--dipstick);margin-top:8px}
article.jobcard code{font-family:ui-monospace,Menlo,monospace;background:var(--baywall);border:1px solid var(--grease);border-radius:4px;padding:1px 6px;font-size:.85em;color:var(--hazard)}

/* footer */
footer.shutup{border-top:1px solid var(--grease);margin-top:30px;padding:22px 20px;
  max-width:900px;margin-left:auto;margin-right:auto}
footer.shutup .links{display:flex;gap:16px;font-size:.85rem;margin-bottom:10px;flex-wrap:wrap}
footer.shutup p{font-size:.76rem;color:var(--dipstick)}

@media (max-width:560px){
  .rollerdoor .radio{display:none}
}