/*
 * Remotify — "Instrument"
 * Afgeleid van een horloge: bezel en maatstreepjes, uitlezingen in een smal
 * sportlettertype, labels in mono. Geen kaartjes: haarlijnen en schalen.
 * Zwart als behuizing, gebroken wit als wijzerplaat, groen als signaal.
 */
/* Lettertypes zelf gehost (geen verzoeken naar Google). SIL OFL 1.1, zie /fonts/OFL-*.txt. Alleen Latijnse tekenset. */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/barlowcondensed-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/barlowcondensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/barlowcondensed-800.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 600; font-style: normal; font-display: swap; src: url("/fonts/jetbrainsmono.woff2") format("woff2"); }

:root {
  --ink: #050505;      /* behuizing */
  --plate: #0d0d0c;    /* bezel */
  --paper: #ece8df;    /* wijzerplaat, tekst */
  --dim: #a6a29a;      /* secundaire tekst */
  --faint: #6f6c66;    /* labels */
  --rule: #2b2a27;     /* haarlijnen */
  --signal: #1ed760;   /* het ene accent */
  --alert: #ff6b4a;    /* fouten */
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--paper); }
body { font: 400 18px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--signal); text-underline-offset: 3px; }
[hidden] { display: none !important; }
::selection { background: var(--signal); color: var(--ink); }

.sheet { max-width: 980px; margin: 0 auto; padding: 22px 20px 56px; }
.sheet.narrow { max-width: 640px; }

/* ---- Kop: merk links, status rechts, haarlijn eronder */
.mast { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--rule);
        padding-bottom: 12px; margin-bottom: 28px; }
.brand { font: 800 26px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--paper); text-decoration: none; }
.brand b { color: var(--signal); font-weight: 800; }
.mast .meta { font: 400 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }

/* ---- Typografie */
.eyebrow { font: 600 12px/1.2 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--faint); }
.eyebrow .on { color: var(--signal); }
h1, .h1 { font: 800 clamp(52px, 10vw, 124px)/.84 var(--display); letter-spacing: -.005em; text-transform: uppercase; margin: 14px 0 18px; }
h1 em, .h1 em { font-style: normal; color: var(--signal); }
h1.sm { font-size: clamp(44px, 8vw, 84px); }
h2 { font: 800 clamp(30px, 5vw, 44px)/.95 var(--display); text-transform: uppercase; margin: 0; }
h3 { font: 600 24px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.lead { font-size: 21px; line-height: 1.4; color: var(--dim); max-width: 34em; margin: 0; }
.dim { color: var(--dim); } .faint { color: var(--faint); }
.small { font-size: 15px; }
.mono { font-family: var(--mono); }

/* ---- Sectiekop: label + regel + nummer, zoals een schaal */
.section { margin-top: 64px; }
.section-head { display: flex; align-items: baseline; gap: 14px; border-top: 2px solid var(--paper); padding-top: 12px; margin-bottom: 8px; }
.section-head .idx { font: 600 12px var(--mono); letter-spacing: .2em; color: var(--faint); margin-left: auto; }

/* ---- Uitlezing (readout): label boven, waarde in display */
.readout { display: flex; flex-wrap: wrap; gap: 14px 32px; border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 26px; }
.readout div { font: 400 11px var(--mono); letter-spacing: .16em; color: var(--faint); text-transform: uppercase; }
.readout b { display: block; font: 600 34px/1 var(--display); color: var(--paper); letter-spacing: 0; margin-top: 6px; text-transform: uppercase; }
.readout b i { color: var(--signal); font-style: normal; }

/* ---- Stappen: groot nummer, inhoud, looptijd */
.steps { border-top: 2px solid var(--paper); }
.step { display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.step .no { font: 800 54px/.85 var(--display); color: #3a3935; }
.step.now .no, .step:hover .no { color: var(--signal); }
.step .t { font: 400 12px var(--mono); color: var(--faint); letter-spacing: .1em; padding-top: 6px; }
.step p { margin: 6px 0 0; color: var(--dim); }
.step ul { margin: 8px 0 0; padding: 0; list-style: none; color: var(--dim); }
.step li { padding: 6px 0 6px 22px; position: relative; border-top: 1px dashed var(--rule); }
.step li:first-child { border-top: 0; }
.step li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 2px; background: var(--signal); }
.step li b { color: var(--paper); font-weight: 600; }
@media (max-width: 640px) {
  .step { grid-template-columns: 52px 1fr; gap: 12px; }
  .step .t { display: none; }
  .step .no { font-size: 40px; }
}

/* ---- Kopieerveld: scherp, omgekeerde knop */
.field { display: flex; border: 1px solid var(--paper); margin-top: 10px; max-width: 560px; }
.field code, .field span { flex: 1; padding: 11px 12px; font: 400 14px/1.35 var(--mono); color: var(--paper); word-break: break-all; }
.field button { border: 0; background: var(--paper); color: var(--ink); font: 600 12px var(--mono); letter-spacing: .16em; padding: 0 16px;
                cursor: pointer; text-transform: uppercase; white-space: nowrap; }
.field button.done { background: var(--signal); }

/* ---- Invoer: alleen een onderlijn, mono */
.input { width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--paper); color: var(--paper); padding: 12px 2px;
         font: 400 17px var(--mono); border-radius: 0; outline: none; }
.input:focus { border-bottom-color: var(--signal); }
.input::placeholder { color: #4a4843; }

/* ---- Knoppen: groen met afgeschuinde hoek, of een lijn */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--signal); color: var(--ink); text-decoration: none;
       font: 800 21px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; padding: 15px 24px; border: 0; cursor: pointer;
       clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.btn:hover { filter: brightness(1.08); }
.btn.wide { width: 100%; margin-top: 14px; }
.btn.line { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); clip-path: none; }
.linkbtn { background: none; border: 0; padding: 10px 0; color: var(--dim); font: 400 13px var(--mono); letter-spacing: .1em; text-transform: uppercase;
           text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---- Meldingen: balk links met code */
.alert { display: grid; grid-template-columns: auto 1fr; gap: 14px; border-left: 4px solid var(--alert); padding: 12px 14px; margin: 18px 0;
         background: #ff6b4a12; }
.alert::before { content: "ERR"; font: 600 12px var(--mono); letter-spacing: .2em; color: var(--alert); padding-top: 3px; }
.alert.ok { border-left-color: var(--signal); background: #1ed76012; }
.alert.ok::before { content: "OK"; color: var(--signal); }
.alert p { margin: 6px 0 0; color: var(--dim); font-size: 15px; }

/* ---- Grote code (laptoproute) */
.code { font: 600 clamp(38px, 9vw, 56px)/1 var(--mono); letter-spacing: .22em; color: var(--signal); margin: 8px 0; }

/* ---- Bezel: decoratieve ring met maatstreepjes (SVG via JS of inline) */
.bezel { display: block; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto; }

/* ---- Lijst met regels (functies e.d.) */
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border-top: 1px solid var(--rule); }
.spec > div { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 44px 1fr; gap: 10px; }
.spec .k { font: 600 12px var(--mono); color: var(--faint); letter-spacing: .12em; padding-top: 5px; }
.spec h3 { font-size: 22px; } .spec p { margin: 4px 0 0; color: var(--dim); font-size: 16px; }

/* ---- Voet */
.foot { margin-top: 64px; border-top: 1px solid var(--rule); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px;
        font: 400 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.foot a { color: var(--dim); }

/* ---- Afspeelbediening van de animaties */
.transport { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.transport button { background: none; border: 1px solid var(--rule); color: var(--paper); font: 600 12px var(--mono); letter-spacing: .14em;
                    text-transform: uppercase; padding: 8px 12px; cursor: pointer; }
.transport button:hover { border-color: var(--paper); }
.ticks { display: flex; gap: 3px; align-items: flex-end; }
.ticks button { width: 4px; height: 14px; padding: 0; border: 0; background: #3a3935; cursor: pointer; }
.ticks button:nth-child(odd) { height: 10px; }
.ticks button.on { background: var(--signal); height: 20px; }
.legend { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; max-width: 560px; margin: 18px auto 0; min-height: 64px; }
.legend .n { font: 800 44px/.85 var(--display); color: var(--signal); }
.legend .n small { font: 400 12px var(--mono); color: var(--faint); letter-spacing: .12em; }
.legend p { margin: 0; font-size: 19px; line-height: 1.35; }
.legend p b { color: var(--signal); font-weight: 600; }