/* ============================================================
   Taqa Technology: the shared system for every page.

   Black canvas, 1px hairlines, grayscale text, one accent.
   Geist for prose. IBM Plex Mono for every number, date, part
   name, status and label. No shadows, no gradients, no rounded
   cards: structure comes from the grid lines.

   Fonts are self-hosted. The site makes zero third-party
   requests, and tests/test_site.py fails if it ever does.
   Geist and IBM Plex are SIL OFL 1.1.
   ============================================================ */

@font-face{
  font-family:'Geist';
  src:url('/static/fonts/Geist-Variable.woff2') format('woff2-variations'),
      url('/static/fonts/Geist-Variable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/static/fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/static/fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  color-scheme:dark;
  --bg:#000;
  --bg-1:#0a0a0a;          /* terminal and code panels */
  --bg-2:#111113;          /* row hover */
  --line:#27272a;          /* the hairline */
  --line-2:#3f3f46;        /* inputs, hover */
  --fg:#fafafa;
  --fg-2:#a1a1aa;
  --fg-3:#7c7c85;          /* smallest text that still clears 4.5:1 on black */
  --fg-4:#52525b;          /* separators and decoration only */
  --accent:#ff6a13;        /* the one accent: waitlist, cursor, status dot */
  --accent-2:#ff8640;
  --on-accent:#000;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --max:1200px;
  --gut:24px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-padding-top:57px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.55;
  min-height:100vh;display:flex;flex-direction:column;-webkit-text-size-adjust:100%}
main{flex:1}
img,svg{max-width:100%;display:block}
a{color:inherit}
button,input{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

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

/* ----------------------------------------------------------------- grid
   A band is a full-width row closed by a hairline. The frame inside it
   is the content column, bounded by two more. Where they meet, the
   lines cross, which is the whole look. */
.band{border-bottom:1px solid var(--line)}
.frame{max-width:var(--max);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}

/* Cells: the container is the line colour and a 1px gap shows through,
   so wrapped rows keep perfect hairlines at every width. */
.cells{display:grid;gap:1px;background:var(--line)}
.cells>*{background:var(--bg);min-width:0}

/* Section header strip: index, name, and a note on the right. */
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px var(--gut);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
/* section titles are h2 for the outline, styled as the strip's label */
.sh h2{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.sh b{color:var(--fg);font-weight:500}
.sh i{font-style:normal;color:var(--fg-4);margin:0 .5em}

.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--fg);color:var(--bg);
  padding:8px 12px;font-family:var(--mono);font-size:.75rem;text-decoration:none}
.skip:focus{top:12px}

/* --------------------------------------------------------------- header */
.mast{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.mast .frame{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 var(--gut)}
.wordmark{display:flex;align-items:center;text-decoration:none}
.wordmark img{height:30px;width:auto}
.mast nav{display:flex;align-items:center;gap:22px;font-family:var(--mono);font-size:.76rem}
/* :not(.btn) matters. The waitlist button is an <a class="btn"> in this
   nav, and a bare `.mast nav a` colour rule outranks `.btn` on
   specificity. On 2026-09-14 that painted the button's label dark grey
   on near-black (1.85:1). Leave the button's colours to .btn. */
.mast nav a:not(.btn){color:var(--fg-2);text-decoration:none}
.mast nav a:not(.btn):hover,.mast nav a:not(.btn).here{color:var(--fg)}
.mast .btn .sm{display:none}
@media(max-width:760px){
  .mast nav{gap:16px}
  .mast nav a.hide-sm{display:none}
  .mast .btn .lg{display:none}
  .mast .btn .sm{display:inline}
  .wordmark img{height:26px}
}

/* -------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:0;
  font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.02em;
  padding:8px 14px;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn:disabled{opacity:.5;cursor:default}

/* --------------------------------------------------------------- labels */
.tag{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--fg-2);border:1px solid var(--line-2);padding:1px 7px;white-space:nowrap;vertical-align:middle}
.live{display:inline-block;width:7px;height:7px;background:var(--accent);margin-right:8px;vertical-align:1px}

/* ------------------------------------------------------------- waitlist */
.wl{max-width:520px}
.wl form{display:flex;border:1px solid var(--line-2);background:var(--bg-1)}
.wl form:focus-within{border-color:var(--fg-2)}
.wl input[type=email]{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:0;color:var(--fg);
  font-family:var(--mono);font-size:.84rem;padding:11px 12px}
.wl input[type=email]::placeholder{color:var(--fg-3)}
.wl .btn{border-width:0 0 0 1px;padding:11px 16px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.micro{font-family:var(--mono);font-size:.7rem;color:var(--fg-3);margin-top:10px}
.micro a{color:var(--fg-2)}
.note-ok,.note-err{display:none;margin-top:10px;font-family:var(--mono);font-size:.8rem;padding:10px 12px;border:1px solid var(--line-2)}
.note-ok{color:var(--fg)}
.note-ok strong{color:var(--accent);font-weight:500;margin-right:8px}
.note-err{color:var(--accent-2)}
.show{display:block}
@media(max-width:480px){
  .wl form{flex-direction:column}
  .wl .btn{border-width:1px 0 0 0}
}

/* ----------------------------------------------------- datasheet tables
   Shared by the home page and the docs. Parameter names and values are
   mono. A condition sits under its value in small grey type, so a row
   never needs a fourth column and still reads on a phone. */
.dt{width:100%;border-collapse:collapse;font-size:.86rem}
.dt th{text-align:left;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-3);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.dt td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:baseline;color:var(--fg-2)}
.dt tr:last-child td{border-bottom:0}
.dt tbody tr:hover td{background:var(--bg-2)}
.dt th:first-child,.dt td:first-child{padding-left:var(--gut)}
.dt th:last-child,.dt td:last-child{padding-right:var(--gut)}
.dt .k{font-family:var(--mono);font-size:.78rem;color:var(--fg-3);white-space:nowrap}
.dt .v{font-family:var(--mono);font-size:.8rem;color:var(--fg);font-variant-numeric:tabular-nums}
.dt .r{text-align:right;white-space:nowrap}
.dt .cond{display:block;font-family:var(--mono);font-size:.7rem;color:var(--fg-3);margin-top:2px}
.dt tr.grp td{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);
  background:var(--bg-1);padding-top:7px;padding-bottom:7px}
.dt tr.grp:hover td{background:var(--bg-1)}
.scroll-x{overflow-x:auto}
@media(max-width:480px){
  :root{--gut:16px}
  .dt th,.dt td{padding-left:8px;padding-right:8px}
}

/* --------------------------------------------------------------- footer */
.foot .frame{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:20px var(--gut);
  font-family:var(--mono);font-size:.72rem;color:var(--fg-3)}
.foot .wordmark img{height:24px}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a{color:var(--fg-2);text-decoration:none}
.foot a:hover{color:var(--fg)}
.foot .colo{border-top:1px solid var(--line);grid-column:1/-1;padding-top:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:760px){.foot .frame{grid-template-columns:1fr}}

/* Motion is two things: a blinking cursor and a trace that types itself
   out once. Both stop for anyone who asks the OS for less motion. */
@keyframes blink{50%{opacity:0}}
.cursor{display:inline-block;width:.6em;height:1.1em;background:var(--accent);vertical-align:-.2em;animation:blink 1.1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}