@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ChakraPetch-400.woff2') format('woff2');}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ChakraPetch-500.woff2') format('woff2');}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/ChakraPetch-600.woff2') format('woff2');}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/ChakraPetch-700.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/SpaceMono-400.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/SpaceMono-700.woff2') format('woff2');}

/* Ditto brand tokens — matches the Ditto Tasks web app (acid-lime on near-black,
   Chakra Petch + Space Mono). Dark is the default. */
:root {
  --bg:#0a0a0a; --surface-1:#121212; --surface-2:#1a1a1a; --surface-3:#242424;
  --border:#242424; --border-strong:#333333;
  --text-hi:#f6f6f6; --text:#cfcfcf; --text-mid:#9aa0aa; --text-lo:#7b818c;
  --accent:#EAF044; --accent-hover:#f2f85a; --accent-press:#c2c733; --accent-ink:#0a0a0a;
  --accent-text:#EAF044; --accent-soft:rgba(234,240,68,.13); --accent-line:rgba(234,240,68,.38);
  --info:#3FA9F5; --info-soft:rgba(63,169,245,.13);
  --success:#5DAF4A; --success-soft:rgba(93,175,74,.14);
  --warning:#F5B24A; --warning-soft:rgba(245,178,74,.13);
  --danger:#FF6B6B; --danger-soft:rgba(255,107,107,.12);
  --focus:#3FA9F5;
  --font-sans:'Chakra Petch',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:'Space Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1.0625rem; --fs-lg:1.375rem;
  --fs-xl:1.75rem; --fs-2xl:2.25rem; --fs-timer:clamp(1.6rem,4.5vw,2.5rem);
  --font-read:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --lh-tight:1.18; --lh-body:1.62; --track-label:.09em;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 8px 24px rgba(0,0,0,.45);
  --ease:cubic-bezier(.2,.6,.2,1); --dur:160ms; --w-flow:720px; --w-app:1200px;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#f4f4f2; --surface-1:#ffffff; --surface-2:#edede9; --surface-3:#e4e4e0;
    --border:#e4e4e0; --border-strong:#cdcdc6;
    --text-hi:#1b1b1a; --text:#2b2b28; --text-mid:#5f6258; --text-lo:#74776e;
    --accent:#d7dd1f; --accent-hover:#c8ce16; --accent-press:#aeb31c; --accent-ink:#1b1b1a;
    --accent-text:#6b7100; --accent-soft:rgba(174,179,28,.16); --accent-line:rgba(174,179,28,.45);
    --info:#1f6fbf; --info-soft:rgba(31,111,191,.10);
    --success:#3f9b3a; --success-soft:rgba(63,155,58,.12);
    --warning:#C9871B; --danger:#D64545; --danger-soft:rgba(214,69,69,.10); --focus:#2e8fe0;
    --shadow-1:0 1px 2px rgba(20,20,16,.08); --shadow-2:0 10px 30px rgba(20,20,16,.12);
  }
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);
  font:var(--fs-base)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased;}
h1,h2,h3{color:var(--text-hi);line-height:var(--lh-tight);font-weight:700;letter-spacing:-.01em;margin:0 0 var(--s-3);}
h1{font-size:var(--fs-xl);} h2{font-size:var(--fs-lg);} h3{font-size:var(--fs-md);}
p{margin:0 0 var(--s-4);}
a{color:var(--info);text-underline-offset:2px;}
.mono,code,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-mid);}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:var(--accent);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 16px;z-index:20;border-radius:0 0 var(--r) 0;font-weight:600;}
.skip:focus{left:0;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* layout */
.flow{max-width:var(--w-flow);margin:0 auto;padding:var(--s-7) var(--s-5) var(--s-8);}
.app{max-width:var(--w-app);margin:0 auto;padding:var(--s-5);}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--border);background:var(--surface-1);}
.brand{display:flex;align-items:center;gap:var(--s-3);font-weight:700;color:var(--text-hi);
  text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-sm);}
.brand .dot{width:18px;height:18px;border-radius:5px;background:#0d0d0d;border:1px solid var(--border-strong);
  position:relative;flex:none;}
.brand .dot::before{content:"";position:absolute;left:4px;top:3px;width:2.5px;height:9px;border-radius:2px;background:var(--accent);}
.brand .dot::after{content:"";position:absolute;right:3.5px;top:3px;width:4px;height:4px;border-radius:var(--r-pill);background:var(--accent);}
.muted{color:var(--text-mid);} .small{font-size:var(--fs-sm);} .center{text-align:center;}
.stack>*+*{margin-top:var(--s-4);}

/* card + steps */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-6);box-shadow:var(--shadow-1);}
.card+.card{margin-top:var(--s-5);}
.steps{display:flex;gap:var(--s-2);margin-bottom:var(--s-6);list-style:none;padding:0;flex-wrap:wrap;}
.steps li{font-size:var(--fs-xs);color:var(--text-lo);display:flex;align-items:center;gap:var(--s-2);}
.steps li.active{color:var(--accent-text);} .steps li.done{color:var(--text-mid);}
.steps .n{width:22px;height:22px;border-radius:var(--r-pill);border:1px solid var(--border-strong);
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);}
.steps li.active .n{border-color:var(--accent);color:var(--accent-text);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s-2);font:600 var(--fs-base)/1 var(--font-sans);
  padding:12px 18px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--accent);color:var(--accent-ink);}
.btn--primary:hover{background:var(--accent-hover);}
.btn--ghost{background:transparent;border-color:var(--border-strong);color:var(--text-hi);}
.btn--ghost:hover{background:var(--surface-2);}
/* Destructive actions: QUIET by default (muted, same weight as ghost buttons)
   so they never out-shout the routine actions next to them; the danger color
   appears on intent (hover/focus) — plus every use still has a confirm step. */
.btn--danger{background:transparent;border-color:var(--border-strong);color:var(--text-mid);}
.btn--danger:hover,.btn--danger:focus-visible{border-color:var(--danger);color:var(--danger);background:color-mix(in srgb, var(--danger) 8%, transparent);}
.btn--lg{padding:16px 26px;font-size:var(--fs-md);}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn.small{font-size:var(--fs-sm);padding:8px 12px;}  /* .btn's font shorthand needs an explicit override */
.btnrow{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;}

/* forms */
label.field{display:block;margin-bottom:var(--s-4);}
label.field .q{display:block;color:var(--text-hi);font-weight:600;margin-bottom:var(--s-2);}
input[type=text],input[type=email],input[type=password],input[type=url],textarea,select{
  width:100%;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-hi);
  border-radius:var(--r);padding:11px 13px;font:var(--fs-base) var(--font-sans);}
textarea{min-height:96px;resize:vertical;} input:focus,textarea:focus,select:focus{border-color:var(--accent);}
.check{display:flex;gap:var(--s-3);align-items:flex-start;}
.check input{width:18px;height:18px;margin-top:3px;}

/* alerts */
.alert{border-radius:var(--r);padding:var(--s-3) var(--s-4);border:1px solid var(--border);margin-bottom:var(--s-4);}
.alert--err{background:var(--danger-soft);border-color:var(--danger);color:var(--text-hi);}
.alert--warn{background:var(--warning-soft);border-color:var(--warning);color:var(--text-hi);}
.alert--ok{background:var(--success-soft);border-color:var(--success);color:var(--text-hi);}
.alert--info{background:var(--info-soft);border-color:var(--info);color:var(--text-hi);}

/* timer */
.timer{text-align:center;padding:var(--s-5);border:1px solid var(--accent-line);border-radius:var(--r-lg);
  background:var(--accent-soft);margin-bottom:var(--s-5);}
.timer .value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-timer);
  color:var(--text-hi);line-height:1;letter-spacing:-.02em;}
.timer.late{border-color:var(--warning);background:var(--warning-soft);}
.timer.closed{border-color:var(--danger);background:var(--danger-soft);}
.timer.closed .pulse{background:var(--danger);animation:none;}
.timer.late .value{color:var(--warning);} .timer.closed .value{color:var(--danger);}
.timer .deadline-line{margin-top:var(--s-2);color:var(--text-hi);font-size:var(--fs-md);}
.timer .cap{margin-top:var(--s-2);}
.pulse{display:inline-block;width:9px;height:9px;border-radius:var(--r-pill);background:var(--accent);
  margin-right:var(--s-2);animation:pulse 2s var(--ease) infinite;}
@keyframes pulse{0%,100%{opacity:.35;} 50%{opacity:1;}}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;
  padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--border-strong);color:var(--text-mid);}
.badge--ok{color:var(--success);border-color:var(--success);background:var(--success-soft);}
.badge--warn{color:var(--warning);border-color:var(--warning);background:var(--warning-soft);}
.badge--danger{color:var(--danger);border-color:var(--danger);background:var(--danger-soft);}
.badge--accent{color:var(--accent-text);border-color:var(--accent-line);background:var(--accent-soft);}

/* table */
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border);}
th{color:var(--text-mid);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--track-label);
  background:var(--surface-2);}
tr:hover td{background:var(--surface-3);}
td .score{font-family:var(--font-mono);font-weight:700;color:var(--text-hi);}
.rank{color:var(--text-mid);font-family:var(--font-mono);}
.rowlink{color:var(--text-hi);text-decoration:none;}
tr:hover .rowlink{text-decoration:underline;}
tr[data-href]:focus-within{outline:2px solid var(--focus);outline-offset:-2px;}
tr.is-hardfail td{opacity:.5;} tr.is-hardfail:hover td{opacity:1;}

/* brief / prose */
.prose{max-width:66ch;font-family:var(--font-read);}  /* readable face for the long brief */
.alert{font-family:var(--font-read);}
.prose h1,.prose h2,.prose h3{margin-top:var(--s-6);font-family:var(--font-sans);}
.prose code{background:var(--surface-2);padding:1px 5px;border-radius:var(--r-sm);font-size:.9em;}
.prose pre{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--s-4);overflow-x:auto;} .prose pre code{background:none;padding:0;}
.prose table{margin:var(--s-4) 0;} .prose blockquote{border-left:3px solid var(--accent-line);
  margin:0 0 var(--s-4);padding-left:var(--s-4);color:var(--text-mid);}

/* code / value box */
.copybox{display:flex;gap:var(--s-2);align-items:center;background:var(--surface-2);
  border:1px solid var(--border-strong);border-radius:var(--r);padding:10px 12px;}
.copybox input{border:none;background:none;padding:0;font-family:var(--font-mono);font-size:var(--fs-sm);}
.kv{display:grid;grid-template-columns:180px 1fr;gap:var(--s-2) var(--s-4);font-size:var(--fs-sm);}
.kv dt{color:var(--text-mid);} .kv dd{margin:0;color:var(--text-hi);}
.dimbar{height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;}
.dimbar>i{display:block;height:100%;background:var(--accent);}
.dimbar>i.warn{background:var(--warning);} .dimbar>i.bad{background:var(--danger);}
.subrow{display:grid;grid-template-columns:200px 60px 1fr;gap:var(--s-3);padding:var(--s-3) 0;
  border-bottom:1px solid var(--border);align-items:start;}
.pre-scroll{max-height:420px;overflow:auto;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r);padding:var(--s-4);font-family:var(--font-mono);font-size:var(--fs-xs);white-space:pre-wrap;}
hr{border:none;border-top:1px solid var(--border);margin:var(--s-5) 0;}
.subgroup{margin-top:var(--s-5);color:var(--text-mid);letter-spacing:var(--track-label);
  text-transform:uppercase;font-size:var(--fs-xs);font-weight:600;}
.kv dd{overflow-wrap:anywhere;min-width:0;} .copybox,.copybox input{min-width:0;}

/* mobile: candidates open the link on phones; admin grids/tables must not overflow */
@media (max-width:640px){
  .flow{padding:var(--s-6) var(--s-4) var(--s-7);}
  .topbar{flex-wrap:wrap;row-gap:var(--s-3);}
  .kv{grid-template-columns:1fr;gap:var(--s-1) 0;}
  .kv dt{color:var(--text-mid);margin-top:var(--s-3);}
  .subrow{grid-template-columns:1fr;gap:var(--s-1);}
}