/* Brand tokens compiled from koa-jobs/jobs.json (KOA Labs brand doc 03-brand.md §3).
   Generated by koa-jobs/gen.py — do not edit by hand. */
:root{
  --kj-bg:#f6f5fb;
  --kj-surface:#ffffff;
  --kj-text:#1a1530;
  --kj-muted:#625e78;
  --kj-dim:#6e6890;
  --kj-line:rgba(20,18,31,.14);
  --kj-accent:#5e5ee0;
  --kj-accent-text:#ffffff;
  --kj-accent-soft:rgba(94,94,224,.10);
  --kj-ink:#0a0a0a;
  --kj-on-ink:#f7f8f8;
  --kj-on-ink-muted:#a9adb8;
}
[data-theme="dark"]{
  --kj-bg:#0a0a0a;
  --kj-surface:#14121f;
  --kj-text:#f7f8f8;
  --kj-muted:#a9adb8;
  --kj-dim:#8a8f98;
  --kj-line:rgba(255,255,255,.16);
  --kj-accent:#a0a0ff;
  --kj-accent-text:#0a0a0a;
  --kj-accent-soft:rgba(160,160,255,.14);
  --kj-ink:#14121f;
  --kj-on-ink:#f7f8f8;
  --kj-on-ink-muted:#a9adb8;
}
/* koa-jobs board stylesheet.
   Brand tokens (Ink, Paper, Periwinkle, Indigo, Mist, Space Grotesk, JetBrains Mono) are compiled
   into custom properties by koa-jobs/gen.py from jobs.json — there is no hex literal below this
   comment. Everything else is layout.
   Mobile-first: the board is designed at 390px and widens from there. Tap targets are at least
   44px, text meets WCAG AA in both themes, and no rule scrolls the page sideways at 390px. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--kj-bg);color:var(--kj-text);
  font-family:'Space Grotesk',-apple-system,system-ui,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.6;overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--kj-accent);outline-offset:3px;border-radius:6px}
.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;
}
.skip{
  position:absolute;left:8px;top:-80px;z-index:200;background:var(--kj-accent);color:var(--kj-accent-text);
  padding:12px 18px;border-radius:10px;font-size:15px;transition:top .15s ease;
}
.skip:focus{top:8px}

.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}

/* ── Header ───────────────────────────────────────────────────────────── */
.top{background:var(--kj-ink);color:var(--kj-on-ink)}
.top-inner{
  min-height:64px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;
}
.brand{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:18px;letter-spacing:-.02em}
.brand svg{width:26px;height:26px;color:var(--kj-accent)}
.brand b{font-weight:600}
.brand span{font-weight:400;opacity:.75}
.top-nav{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
.top-nav a,.theme{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;
  font-size:15px;color:var(--kj-on-ink-muted);background:none;border:0;cursor:pointer;text-decoration:none;
}
.top-nav a:hover,.theme:hover{color:var(--kj-on-ink);background:rgba(255,255,255,.08)}
.theme-light{display:none}
[data-theme="dark"] .theme-light{display:inline}
[data-theme="dark"] .theme-dark{display:none}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding:52px 0 28px}
.kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kj-dim);margin-bottom:14px;
}
.hero h1{font-size:clamp(30px,6vw,52px);max-width:18ch}
.lede{margin-top:16px;max-width:62ch;font-size:18px;color:var(--kj-muted)}
.example-note{
  margin-top:22px;padding:14px 16px;border-left:3px solid var(--kj-accent);background:var(--kj-accent-soft);
  border-radius:0 10px 10px 0;font-size:15px;color:var(--kj-text);max-width:70ch;
}

/* ── Filters ─────────────────────────────────────────────────────────── */
.board{padding:8px 0 72px}
.filters{
  display:grid;gap:14px;padding:20px;margin:0 0 20px;
  background:var(--kj-surface);border:1px solid var(--kj-line);border-radius:16px;
}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--kj-dim)}
.field input,.field select,.field textarea{
  width:100%;min-height:44px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--kj-line);background:var(--kj-bg);color:var(--kj-text);
}
.field textarea{min-height:110px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--kj-dim);opacity:1}
.field-check{flex-direction:row;align-items:flex-start;gap:10px}
.field-check input{width:24px;height:24px;min-height:24px;margin-top:2px;accent-color:var(--kj-accent);flex:none}
.field-check label{font-family:inherit;font-size:14px;letter-spacing:0;text-transform:none;color:var(--kj-muted)}
.clear{
  justify-self:start;min-height:44px;padding:0 16px;border-radius:10px;cursor:pointer;
  border:1px solid var(--kj-line);background:none;color:var(--kj-muted);font-size:15px;
}
.clear:hover{color:var(--kj-text);border-color:var(--kj-dim)}
.count{margin:0 0 14px;font-size:15px;color:var(--kj-muted)}

/* ── Cards ───────────────────────────────────────────────────────────── */
.cards{display:grid;gap:14px}
.card{
  background:var(--kj-surface);border:1px solid var(--kj-line);border-radius:16px;padding:20px;
}
.card:hover{border-color:var(--kj-accent)}
.card-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card h3{font-size:20px;flex:1 1 auto;min-width:0}
.card h3 a{display:inline-block;min-height:32px;padding:2px 0}
.card h3 a:hover{color:var(--kj-accent)}
.card-meta{margin-top:8px;font-size:14px;color:var(--kj-muted);display:flex;flex-wrap:wrap;gap:6px}
.card-meta .sep{opacity:.55}
.card-foot{margin-top:12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.card-salary{font-size:14px;color:var(--kj-muted)}
.card-go{
  margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid var(--kj-line);font-size:15px;color:var(--kj-text);
}
.card-go:hover{border-color:var(--kj-accent);color:var(--kj-accent)}
.badge{
  display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.badge-example{background:var(--kj-accent-soft);color:var(--kj-accent)}
.badge-new{border:1px solid var(--kj-line);color:var(--kj-dim)}
.empty{padding:32px 20px;border:1px dashed var(--kj-line);border-radius:16px;text-align:center}
.empty h2{font-size:22px}
.empty p{margin-top:10px;color:var(--kj-muted)}

/* ── Posting page ────────────────────────────────────────────────────── */
.post{padding:28px 0 72px}
.crumb{margin-bottom:18px;font-size:15px}
.crumb a{color:var(--kj-muted);text-decoration:underline;text-underline-offset:3px}
.crumb a:hover{color:var(--kj-accent)}
.post-head h1{font-size:clamp(26px,5vw,42px)}
.post-meta{margin-top:10px;color:var(--kj-muted)}
.post-grid{display:grid;gap:28px;margin-top:28px}
.post-body h2{font-size:22px;margin:32px 0 12px}
.post-body h2:first-child{margin-top:0}
.prose p{color:var(--kj-text);max-width:66ch}
.prose p + p{margin-top:14px}
.prose ul{margin-top:12px;display:grid;gap:8px;max-width:66ch}
.prose li{padding-left:20px;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;border-radius:2px;background:var(--kj-accent)}
.prose code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.9em;background:var(--kj-accent-soft);
  padding:1px 5px;border-radius:5px}
.prose a{color:var(--kj-accent);text-decoration:underline;text-underline-offset:3px}
.reqs{display:grid;gap:10px;max-width:66ch}
.reqs li{padding-left:24px;position:relative}
.reqs li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;
  border:2px solid var(--kj-accent)}
.side{display:flex;flex-direction:column;gap:18px}
.facts{background:var(--kj-surface);border:1px solid var(--kj-line);border-radius:16px;padding:18px;margin:0;
  display:grid;gap:12px}
.facts div{display:grid;grid-template-columns:minmax(84px,auto) 1fr;gap:12px;align-items:baseline}
.facts dt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--kj-dim)}
.facts dd{margin:0;font-size:15px}

/* ── Apply ───────────────────────────────────────────────────────────── */
.apply{background:var(--kj-surface);border:1px solid var(--kj-line);border-radius:16px;padding:20px}
.apply h2{font-size:22px}
.apply-intro{margin-top:10px;font-size:15px;color:var(--kj-muted)}
.apply-form{display:grid;gap:14px;margin-top:18px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;
  border:1px solid transparent;font-size:16px;font-weight:500;text-decoration:none;cursor:pointer;
}
.btn-primary{background:var(--kj-accent);color:var(--kj-accent-text)}
.btn-primary:hover{filter:brightness(.94)}
.btn-line{border-color:var(--kj-line);color:var(--kj-text);background:none}
.btn-line:hover{border-color:var(--kj-accent);color:var(--kj-accent)}
.apply-status{margin:0;font-size:15px;min-height:1.4em}
.apply-status.ok{color:var(--kj-accent)}
.apply-status.err{color:var(--kj-text)}
.fine{font-size:13px;color:var(--kj-dim)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.next-title{margin-top:22px;font-size:17px}
.next{margin-top:10px;display:grid;gap:8px;counter-reset:n}
.next li{position:relative;padding-left:30px;font-size:15px;color:var(--kj-muted);counter-increment:n}
.next li::before{
  content:counter(n);position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:50%;
  background:var(--kj-accent-soft);color:var(--kj-accent);font-size:12px;display:grid;place-items:center;
}
.wa{margin:0}
.wa .btn{width:100%}

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot{background:var(--kj-ink);color:var(--kj-on-ink-muted);padding:28px 0;margin-top:40px;font-size:14px}
.foot-inner{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}
.foot a{color:var(--kj-on-ink);text-decoration:underline;text-underline-offset:3px}
.foot a:hover{color:var(--kj-accent)}

/* ── Wider screens ───────────────────────────────────────────────────── */
@media (min-width:640px){
  .wrap{padding:0 28px}
  .filters{grid-template-columns:1fr 1fr;padding:24px}
  .cards{gap:16px}
  .post{padding-top:36px}
}
@media (min-width:900px){
  .filters{grid-template-columns:2fr 1fr 1fr 1fr auto;align-items:end}
  .clear{justify-self:end}
  .post-grid{grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr);gap:44px}
  .side{position:sticky;top:88px;align-self:start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  .top,.foot,.filters,.apply{display:none}
  body{background:#fff;color:#000}
}