/* JackProbe site.
 *
 * The palette is the instrument's own, taken from the tester's web console, so
 * somebody who has held the device recognises the site and somebody who reads
 * the site recognises the device. Type is IBM Plex: a family drawn for a
 * hardware company, which is the right heritage for a measuring tool and is not
 * one of the faces that shows up on every generated landing page.
 *
 * Deliberately one theme. This is an instrument panel, and instrument panels
 * are dark. Every colour is painted rather than inherited so the page holds
 * whatever the browser does around it.
 */

:root {
  --bg:      #0b0d12;
  --grid:    #10141c;
  --panel:   #141926;
  --panel2:  #1a2130;
  --line:    #252d3d;
  --line2:   #333d52;
  --text:    #e9edf4;
  --muted:   #8b95a9;
  --faint:   #5a6377;
  --live:    #38bdf8;
  --ok:      #4ade80;
  --warn:    #fbbf24;
  --bad:     #f87171;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, "SF Mono", monospace;

  --r: 12px;
  --pad: clamp(18px, 4vw, 34px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* The faint plate the device console draws behind itself. */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 var(--pad); }

a { color: var(--live); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--panel); color: var(--text);
  padding: 10px 16px; border: 1px solid var(--line2); border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; z-index: 60; }

/* ---------------------------------------------------------------- wordmark */

.word { font-size: 1.05rem; letter-spacing: .15em; white-space: nowrap; }
.word b { font-weight: 700; color: var(--text); }
.word i { font-weight: 300; font-style: normal; color: var(--live); }
.word.small { font-size: .92rem; }

/* ------------------------------------------------------------------ header */

.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 13, 18, .88);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line);
}
.bar {
  display: flex; align-items: center; gap: 22px;
  min-height: 62px; flex-wrap: wrap;
}
.mark { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.mark:hover { text-decoration: none; }
.bar nav { display: flex; gap: 3px; flex-wrap: wrap; margin-left: auto; }
.bar nav a {
  font: 600 12.5px/1 var(--cond);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 9px 11px; border-radius: 8px;
}
.bar nav a:hover { color: var(--text); background: var(--panel); text-decoration: none; }
.bar nav a.on { color: var(--live); background: var(--panel); }

/* ------------------------------------------------------------------- type */

h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 {
  font-size: clamp(2.1rem, 5.6vw, 3.5rem);
  line-height: 1.06; font-weight: 700; letter-spacing: -.022em;
}
h2 {
  font-size: clamp(1.35rem, 2.9vw, 1.85rem);
  line-height: 1.2; font-weight: 600; letter-spacing: -.014em;
}
h3 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 1.05em; max-width: 68ch; }
.lede { font-size: clamp(1.02rem, 2.2vw, 1.2rem); color: var(--muted); max-width: 60ch; }

.eyebrow {
  font: 600 11px/1 var(--mono);
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--live); margin: 0 0 14px;
}
.eyebrow.dim { color: var(--faint); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- sections */

section { padding: clamp(46px, 8vw, 86px) 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
.section-head { margin-bottom: clamp(26px, 4vw, 40px); }

/* ------------------------------------------------------------------- hero */

/* Vertical only. The shorthand here would reset the horizontal padding .wrap
 * sets, and since .hero is always ON a .wrap the text would run to the edge of
 * the window and the headline would overflow it. */
.hero { padding-top: clamp(54px, 10vw, 104px); padding-bottom: clamp(40px, 7vw, 72px); }
.hero h1 { margin-bottom: 20px; }
.hero .lede { margin-bottom: 30px; }

/* The verdict plate, lifted from the report a technician hands over. */
.verdict {
  display: inline-flex; align-items: center; gap: 20px;
  border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--panel); padding: 18px 24px; margin-bottom: 8px;
}
.badge {
  font: 700 1.7rem/1 var(--sans); letter-spacing: .1em;
  color: var(--ok); border: 2px solid var(--ok);
  padding: 12px 18px; border-radius: 8px;
}
.verdict .said { font-size: .93rem; color: var(--muted); max-width: 34ch; }
.verdict .said b { color: var(--text); font-weight: 600; display: block; }

/* --------------------------------------------------------------- panels */

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px 24px 24px;
}
.panel h3 { margin-bottom: 8px; }
.panel p { font-size: .94rem; color: var(--muted); margin-bottom: 0; }
.panel p + p { margin-top: .8em; }
.panel .eyebrow { margin-bottom: 11px; }

/* A row of facts, the way the instrument prints them. */
.spec { border-top: 1px solid var(--line); }
.spec div {
  display: flex; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.spec dt, .spec .k { color: var(--muted); font-size: .9rem; flex: 1 1 auto; }
.spec dd, .spec .v {
  margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .9rem; text-align: right; color: var(--text);
}
.spec .v.no { color: var(--faint); }

/* Gestures and states, where the visual key is the point. */
.keyed { display: flex; gap: 15px; align-items: flex-start; padding: 15px 0;
         border-bottom: 1px solid var(--line); }
.keyed:last-child { border-bottom: 0; }
.dot { width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px;
       box-shadow: 0 0 0 4px rgba(255,255,255,.03); }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }
.dot.live { background: var(--live); }
.dot.dimok { background: #14401f; }
.dot.dimbad { background: #3f1414; }
.dot.white { background: #e9edf4; }
.keyed .kb { font-weight: 600; }
.keyed .kd { color: var(--muted); font-size: .93rem; }

.press {
  font: 600 12px/1 var(--mono); letter-spacing: .06em;
  border: 1px solid var(--line2); border-radius: 7px;
  padding: 7px 10px; color: var(--live); background: var(--panel2);
  flex: 0 0 auto; white-space: nowrap;
}

/* ---------------------------------------------------------------- notices */

.note {
  border-left: 3px solid var(--live); background: var(--panel);
  padding: 16px 20px; border-radius: 0 var(--r) var(--r) 0; margin: 22px 0;
}
.note p { margin: 0; font-size: .94rem; color: var(--muted); }
.note.limit { border-left-color: var(--warn); }
.note.draft { border-left-color: var(--faint); }
.note strong { color: var(--text); }

/* ----------------------------------------------------------------- lists */

.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; padding: 17px 34px 17px 0; position: relative;
  font-weight: 600; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; position: absolute; right: 6px; top: 15px;
  font: 400 1.35rem/1 var(--mono); color: var(--live);
}
.qa details[open] summary::after { content: "\2013"; }
.qa summary:hover { color: var(--live); }
.qa .a { padding: 0 34px 20px 0; color: var(--muted); font-size: .96rem; }
.qa .a p:last-child { margin-bottom: 0; }

.case { border: 1px solid var(--line); border-radius: var(--r);
        background: var(--panel); padding: 24px 26px 26px; }
.case h3 { margin-bottom: 12px; }
.case .sc { color: var(--text); font-size: .97rem; }
.case .cmp { display: grid; gap: 14px; margin-top: 16px;
             grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.case .cmp > div { border-top: 1px solid var(--line); padding-top: 12px; }
.case .cmp .eyebrow { margin-bottom: 7px; }
.case .cmp p { font-size: .91rem; color: var(--muted); margin: 0; }
.case .proves { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
                font-size: .91rem; color: var(--muted); }
.case .proves b { color: var(--ok); font-weight: 600; }

/* ------------------------------------------------------------- changelog */

.rel { display: grid; grid-template-columns: 128px 1fr; gap: 24px;
       padding: 26px 0; border-top: 1px solid var(--line); }
.rel .when .v { font: 600 1.05rem/1 var(--mono); color: var(--live); }
.rel .when .d { font-size: .82rem; color: var(--faint); margin-top: 5px; }
.rel ul { margin: 10px 0 0; padding-left: 19px; }
.rel li { margin-bottom: 7px; color: var(--muted); font-size: .95rem; }
.rel li b { color: var(--text); font-weight: 600; }
@media (max-width: 620px) { .rel { grid-template-columns: 1fr; gap: 10px; } }

/* ---------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--line); background: var(--panel);
        padding: clamp(34px, 6vw, 56px) 0 30px; margin-top: 20px; }
.fgrid { display: grid; gap: 30px;
         grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 720px) { .fgrid { grid-template-columns: 1fr; } }
.foot h3.eyebrow { color: var(--faint); }
.foot a { display: block; color: var(--muted); font-size: .92rem; padding: 3px 0; }
.foot a:hover { color: var(--live); }
.fine { color: var(--faint); font-size: .85rem; max-width: 46ch; margin: 12px 0 0; }
.bot { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line);
       max-width: none; }

/* ----------------------------------------------------------------- misc */

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.scroll { overflow-x: auto; }
th, td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); }
th { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
     color: var(--faint); }
td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }

code { font-family: var(--mono); font-size: .9em; color: var(--live);
       background: var(--panel2); padding: 2px 6px; border-radius: 5px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }