/* Jahez Corporate IT · Ops Range design system (brand guidelines v1.1) */
:root{
  --red:#E60000; --red-d:#c40000; --burg:#570000; --beige:#F5F3EE; --tint:#FFF3F3;
  --g900:#1F1F1F; --g800:#3A3A3A; --g600:#6E6E6E; --g400:#B2B2B2;
  --g300:#E2E2E2; --g100:#F4F4F4; --white:#fff;
  --green:#1E7D44; --green-b:#EAF6EF; --amber:#B26A00; --amber-b:#FFF6E8;
  --ink:#0E0E0E; --term:#0B0D0F; --term-fg:#D7E2D9; --term-ok:#7CFC9B; --term-bad:#FF8A8A;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:0 4px 10px rgba(0,0,0,.07),0 18px 46px rgba(0,0,0,.10);
  --r:14px; --font:"Poppins","Jahez","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"SF Mono","Consolas","Roboto Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--g100);color:var(--g800);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--red);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.wide{max-width:1560px}

header.top{background:var(--white);border-bottom:1px solid var(--g300);padding:12px 0;z-index:40}
/* Not sticky: #jzBar is already pinned at top:0 with a higher z-index, so a
   sticky page header slid underneath it on the first scroll. The app bar is
   the persistent chrome now. */
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* The lab is opened on phones during live sessions. Nothing may push the page
   sideways: a header row that cannot wrap will, and every page shares this one. */
/* A line of body text stops being readable past roughly 75 characters. On a
   24 inch monitor an uncapped paragraph runs to 1200px, so cap the measure
   while leaving tables, grids and headings free to use the full width. */
.wrap p, .card p, .ref p, .tile p, .box p{max-width:72ch}

@media(max-width:640px){
  header.top .wrap{gap:10px}
  .wrap{padding:0 16px}
  table.t{font-size:12.2px}
  /* A table narrower than its content drags the whole page sideways. Let it
     scroll inside its own box instead — applies to every table in the lab. */
  table.t{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  table.t td,table.t th{white-space:normal;min-width:88px}
  /* Multi-column card grids collapse rather than overflow. */
  .grid.g4,.grid.g3,.grid.g2{grid-template-columns:1fr!important}
}
@media(max-width:420px){
  .wrap{padding:0 12px}
}
.brandmark{font-size:23px;font-weight:800;color:var(--red);letter-spacing:-.02em}
.kicker{font-size:11px;font-weight:700;color:var(--red);letter-spacing:.18em;text-transform:uppercase}
h1{font-size:34px;font-weight:800;color:var(--g900);letter-spacing:-.02em;line-height:1.14;margin:6px 0}
h2{font-size:21px;font-weight:700;color:var(--g900);margin:0 0 4px;letter-spacing:-.01em}
h3{font-size:15.5px;font-weight:700;color:var(--g900)}
h4{font-size:13px;font-weight:700;color:var(--g900)}
p{color:var(--g600)}
.accent{width:52px;height:4px;background:var(--red);border-radius:3px;margin:9px 0 0}
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.card.tight{padding:15px}
.muted{color:var(--g600);font-size:13px}
.tiny{font-size:11.5px;color:var(--g400);letter-spacing:.04em}
.mono{font-family:var(--mono);font-size:12.5px}
.hidden{display:none!important}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}

.btn{font-family:var(--font);font-size:14px;font-weight:700;padding:10px 20px;border:0;border-radius:10px;
  background:var(--red);color:#fff;cursor:pointer;transition:.14s;letter-spacing:.01em}
.btn:hover:not(:disabled){background:var(--red-d);transform:translateY(-1px)}
.btn:disabled{background:var(--g300);color:var(--g400);cursor:not-allowed;transform:none}
.btn.ghost{background:var(--white);color:var(--g800);border:1.5px solid var(--g300)}
.btn.ghost:hover:not(:disabled){border-color:var(--red);color:var(--red);background:var(--white)}
.btn.dark{background:var(--g900)} .btn.dark:hover{background:#000}
.btn.sm{font-size:12.5px;padding:7px 14px;border-radius:8px}
.btn.go{background:var(--green)} .btn.go:hover:not(:disabled){background:#166234}

.pill{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:99px;background:var(--tint);color:var(--red)}
.pill.g{background:var(--green-b);color:var(--green)} .pill.a{background:var(--amber-b);color:var(--amber)}
.pill.n{background:var(--g100);color:var(--g600)} .pill.d{background:var(--g900);color:#fff}

.bar{height:8px;background:var(--g300);border-radius:99px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--red);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.bar.g > i{background:var(--green)}

.term{background:var(--term);color:var(--term-fg);border-radius:12px;padding:14px 16px;font-family:var(--mono);
  font-size:12.6px;line-height:1.62;white-space:pre-wrap;word-break:break-word;overflow-y:auto}
.term .ok{color:var(--term-ok)} .term .bad{color:var(--term-bad)} .term .dim{color:#6b7a70}
.term .cmd{color:#fff;font-weight:700}
.terminput{display:flex;align-items:center;gap:8px;background:var(--term);border-radius:0 0 12px 12px;padding:8px 16px 12px}
.terminput span{color:var(--term-ok);font-family:var(--mono);font-size:12.6px;white-space:nowrap}
.terminput input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-family:var(--mono);font-size:12.6px}

table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--g600);text-align:left;padding:7px 8px;border-bottom:1.5px solid var(--g300)}
table.t td{padding:8px;border-bottom:1px solid var(--g300);vertical-align:top}
input.f,select.f{font-family:var(--mono);font-size:12.5px;padding:7px 9px;border:1.5px solid var(--g300);border-radius:8px;background:#fff;width:100%;color:var(--g900)}
input.f:focus,select.f:focus{outline:0;border-color:var(--red)}
label.lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--g600);display:block;margin-bottom:3px}

.opt{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--g300);border-radius:10px;
  padding:11px 14px;margin-bottom:8px;cursor:pointer;font-family:var(--font);font-size:14px;color:var(--g800);transition:.12s}
.opt:hover{border-color:var(--red)}
.opt.pick{border-color:var(--g900);background:var(--g100)}
.opt.right{border-color:var(--green);background:var(--green-b);color:var(--green);font-weight:600}
.opt.wrongpick{border-color:var(--red);background:var(--tint);color:var(--burg)}
.opt:disabled{cursor:default}

.fb{margin-top:10px;padding:11px 14px;border-radius:10px;font-size:13.5px;line-height:1.55}
.fb.ok{background:var(--green-b);color:var(--green);border-left:4px solid var(--green)}
.fb.no{background:var(--tint);color:var(--burg);border-left:4px solid var(--red)}
.fb.info{background:var(--beige);color:var(--burg);border-left:4px solid var(--burg)}

.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--g400);margin-right:7px;flex:none}
.dot.up{background:var(--green)} .dot.down{background:var(--red)} .dot.warn{background:var(--amber)}

footer.foot{text-align:center;padding:26px 0 38px;color:var(--g400);font-size:12px}
.modal{position:fixed;inset:0;background:rgba(15,15,15,.55);display:flex;align-items:center;justify-content:center;
  padding:24px;z-index:100;overflow-y:auto}
.modal .box{background:#fff;border-radius:18px;max-width:760px;width:100%;padding:30px;box-shadow:var(--shadow-lg);margin:auto}
.scroll{overflow-y:auto}
.rule{height:1px;background:var(--g300);margin:16px 0}
ul.clean{list-style:none} ul.clean li{padding-left:19px;position:relative;margin-bottom:6px;font-size:13.5px;color:var(--g600)}
ul.clean li:before{content:"▸";position:absolute;left:0;color:var(--red);font-weight:700}


/* ==========================================================================
   Reduced motion
   --------------------------------------------------------------------------
   Only the confetti asked. The arcade shake, the pulse on a right answer, the
   hover lift on every card and the smooth scrolls did not — and this is a lab
   three people sit in front of for sixteen weeks, sometimes against a clock.
   One block here covers every page, because every page loads this file.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}