/* =============================================
   CWS — CSS Web Signatures in Pure CSS
   Algorithm: CS24 (Cascading Stylesheet 24)
   Zero JavaScript. All computation via CSS.
   ============================================= */

@counter-style base64url {
  system: fixed 0;
  symbols: "A" "B" "C" "D" "E" "F" "G" "H" "I" "J" "K" "L" "M" "N" "O" "P" "Q" "R" "S" "T" "U" "V" "W" "X" "Y" "Z" "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k" "l" "m" "n" "o" "p" "q" "r" "s" "t" "u" "v" "w" "x" "y" "z" "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "-" "_";
}

@counter-style ascii {
  system: fixed 32;
  symbols:
    " " "!" "\"" "#" "$" "%" "&" "'" "(" ")" "*" "+" "," "-" "." "/"
    "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" ":" ";" "<" "=" ">" "?"
    "@" "A" "B" "C" "D" "E" "F" "G" "H" "I" "J" "K" "L" "M" "N" "O"
    "P" "Q" "R" "S" "T" "U" "V" "W" "X" "Y" "Z" "[" "\\" "]" "^" "_"
    "`" "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k" "l" "m" "n" "o"
    "p" "q" "r" "s" "t" "u" "v" "w" "x" "y" "z" "{" "|" "}" "~"
  ;
  fallback: decimal;
}

#cws { counter-reset: c0 0 c1 0 c2 0 c3 0 sig0 0 sig1 0 sig2 0 sig3 0 byte0 0 byte1 0 byte2 0; }

/* --- Payload → Base64URL + ASCII encoding --- */
#cws:has(#p0:checked) .pr0 { counter-increment: c0 32 byte0 128; }
#cws:has(#p1:checked) .pr1 { counter-increment: c0 16 byte0 64; }
#cws:has(#p2:checked) .pr2 { counter-increment: c0 8 byte0 32; }
#cws:has(#p3:checked) .pr3 { counter-increment: c0 4 byte0 16; }
#cws:has(#p4:checked) .pr4 { counter-increment: c0 2 byte0 8; }
#cws:has(#p5:checked) .pr5 { counter-increment: c0 1 byte0 4; }
#cws:has(#p6:checked) .pr6 { counter-increment: c1 32 byte0 2; }
#cws:has(#p7:checked) .pr7 { counter-increment: c1 16 byte0 1; }
#cws:has(#p8:checked) .pr8 { counter-increment: c1 8 byte1 128; }
#cws:has(#p9:checked) .pr9 { counter-increment: c1 4 byte1 64; }
#cws:has(#p10:checked) .pr10 { counter-increment: c1 2 byte1 32; }
#cws:has(#p11:checked) .pr11 { counter-increment: c1 1 byte1 16; }
#cws:has(#p12:checked) .pr12 { counter-increment: c2 32 byte1 8; }
#cws:has(#p13:checked) .pr13 { counter-increment: c2 16 byte1 4; }
#cws:has(#p14:checked) .pr14 { counter-increment: c2 8 byte1 2; }
#cws:has(#p15:checked) .pr15 { counter-increment: c2 4 byte1 1; }
#cws:has(#p16:checked) .pr16 { counter-increment: c2 2 byte2 128; }
#cws:has(#p17:checked) .pr17 { counter-increment: c2 1 byte2 64; }
#cws:has(#p18:checked) .pr18 { counter-increment: c3 32 byte2 32; }
#cws:has(#p19:checked) .pr19 { counter-increment: c3 16 byte2 16; }
#cws:has(#p20:checked) .pr20 { counter-increment: c3 8 byte2 8; }
#cws:has(#p21:checked) .pr21 { counter-increment: c3 4 byte2 4; }
#cws:has(#p22:checked) .pr22 { counter-increment: c3 2 byte2 2; }
#cws:has(#p23:checked) .pr23 { counter-increment: c3 1 byte2 1; }

/* --- XOR signature computation (CS24) --- */
/* Header constant: XOR-fold of {"alg":"CS24"} = 0x5C2834 (bits 1,3,4,5,10,12,18,19,21) */
/* h=1 bits use XNOR (both-same); h=0 bits use XOR (exactly-one) */
#cws:has(#p0:checked):has(#k0:not(:checked)) .xr0,
#cws:has(#p0:not(:checked)):has(#k0:checked) .xr0 { counter-increment: sig0 32; }
#cws:has(#p1:checked):has(#k1:checked) .xr1,
#cws:has(#p1:not(:checked)):has(#k1:not(:checked)) .xr1 { counter-increment: sig0 16; }
#cws:has(#p2:checked):has(#k2:not(:checked)) .xr2,
#cws:has(#p2:not(:checked)):has(#k2:checked) .xr2 { counter-increment: sig0 8; }
#cws:has(#p3:checked):has(#k3:checked) .xr3,
#cws:has(#p3:not(:checked)):has(#k3:not(:checked)) .xr3 { counter-increment: sig0 4; }
#cws:has(#p4:checked):has(#k4:checked) .xr4,
#cws:has(#p4:not(:checked)):has(#k4:not(:checked)) .xr4 { counter-increment: sig0 2; }
#cws:has(#p5:checked):has(#k5:checked) .xr5,
#cws:has(#p5:not(:checked)):has(#k5:not(:checked)) .xr5 { counter-increment: sig0 1; }
#cws:has(#p6:checked):has(#k6:not(:checked)) .xr6,
#cws:has(#p6:not(:checked)):has(#k6:checked) .xr6 { counter-increment: sig1 32; }
#cws:has(#p7:checked):has(#k7:not(:checked)) .xr7,
#cws:has(#p7:not(:checked)):has(#k7:checked) .xr7 { counter-increment: sig1 16; }
#cws:has(#p8:checked):has(#k8:not(:checked)) .xr8,
#cws:has(#p8:not(:checked)):has(#k8:checked) .xr8 { counter-increment: sig1 8; }
#cws:has(#p9:checked):has(#k9:not(:checked)) .xr9,
#cws:has(#p9:not(:checked)):has(#k9:checked) .xr9 { counter-increment: sig1 4; }
#cws:has(#p10:checked):has(#k10:checked) .xr10,
#cws:has(#p10:not(:checked)):has(#k10:not(:checked)) .xr10 { counter-increment: sig1 2; }
#cws:has(#p11:checked):has(#k11:not(:checked)) .xr11,
#cws:has(#p11:not(:checked)):has(#k11:checked) .xr11 { counter-increment: sig1 1; }
#cws:has(#p12:checked):has(#k12:checked) .xr12,
#cws:has(#p12:not(:checked)):has(#k12:not(:checked)) .xr12 { counter-increment: sig2 32; }
#cws:has(#p13:checked):has(#k13:not(:checked)) .xr13,
#cws:has(#p13:not(:checked)):has(#k13:checked) .xr13 { counter-increment: sig2 16; }
#cws:has(#p14:checked):has(#k14:not(:checked)) .xr14,
#cws:has(#p14:not(:checked)):has(#k14:checked) .xr14 { counter-increment: sig2 8; }
#cws:has(#p15:checked):has(#k15:not(:checked)) .xr15,
#cws:has(#p15:not(:checked)):has(#k15:checked) .xr15 { counter-increment: sig2 4; }
#cws:has(#p16:checked):has(#k16:not(:checked)) .xr16,
#cws:has(#p16:not(:checked)):has(#k16:checked) .xr16 { counter-increment: sig2 2; }
#cws:has(#p17:checked):has(#k17:not(:checked)) .xr17,
#cws:has(#p17:not(:checked)):has(#k17:checked) .xr17 { counter-increment: sig2 1; }
#cws:has(#p18:checked):has(#k18:checked) .xr18,
#cws:has(#p18:not(:checked)):has(#k18:not(:checked)) .xr18 { counter-increment: sig3 32; }
#cws:has(#p19:checked):has(#k19:checked) .xr19,
#cws:has(#p19:not(:checked)):has(#k19:not(:checked)) .xr19 { counter-increment: sig3 16; }
#cws:has(#p20:checked):has(#k20:not(:checked)) .xr20,
#cws:has(#p20:not(:checked)):has(#k20:checked) .xr20 { counter-increment: sig3 8; }
#cws:has(#p21:checked):has(#k21:checked) .xr21,
#cws:has(#p21:not(:checked)):has(#k21:not(:checked)) .xr21 { counter-increment: sig3 4; }
#cws:has(#p22:checked):has(#k22:not(:checked)) .xr22,
#cws:has(#p22:not(:checked)):has(#k22:checked) .xr22 { counter-increment: sig3 2; }
#cws:has(#p23:checked):has(#k23:not(:checked)) .xr23,
#cws:has(#p23:not(:checked)):has(#k23:checked) .xr23 { counter-increment: sig3 1; }

/* --- Output displays --- */
.t-payload::after { content: counter(c0, base64url) counter(c1, base64url) counter(c2, base64url) counter(c3, base64url); }
.t-sig::after { content: counter(sig0, base64url) counter(sig1, base64url) counter(sig2, base64url) counter(sig3, base64url); }
.payload-b64::after { content: counter(c0, base64url) counter(c1, base64url) counter(c2, base64url) counter(c3, base64url); }
.payload-ascii::after { content: counter(byte0, ascii) counter(byte1, ascii) counter(byte2, ascii); white-space: pre; }
.sig-b64::after { content: counter(sig0, base64url) counter(sig1, base64url) counter(sig2, base64url) counter(sig3, base64url); }

/* --- Verification: default VALID, any mismatch → INVALID --- */
.verify-result {
  --vr-text: "\2713  \201CSIGNATURE\201D  VALID";
  --vr-color: #4caf50;
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.3);
}
.verify-result::after {
  content: var(--vr-text);
  color: var(--vr-color);
}

/* 96 mismatch selectors: 4 per bit × 24 bits */
#cws:has(#p0:checked):has(#k0:not(:checked)):has(#s0:not(:checked)) .verify-result,
#cws:has(#p0:not(:checked)):has(#k0:checked):has(#s0:not(:checked)) .verify-result,
#cws:has(#p0:not(:checked)):has(#k0:not(:checked)):has(#s0:checked) .verify-result,
#cws:has(#p0:checked):has(#k0:checked):has(#s0:checked) .verify-result,
#cws:has(#p1:checked):has(#k1:not(:checked)):has(#s1:checked) .verify-result,
#cws:has(#p1:not(:checked)):has(#k1:checked):has(#s1:checked) .verify-result,
#cws:has(#p1:not(:checked)):has(#k1:not(:checked)):has(#s1:not(:checked)) .verify-result,
#cws:has(#p1:checked):has(#k1:checked):has(#s1:not(:checked)) .verify-result,
#cws:has(#p2:checked):has(#k2:not(:checked)):has(#s2:not(:checked)) .verify-result,
#cws:has(#p2:not(:checked)):has(#k2:checked):has(#s2:not(:checked)) .verify-result,
#cws:has(#p2:not(:checked)):has(#k2:not(:checked)):has(#s2:checked) .verify-result,
#cws:has(#p2:checked):has(#k2:checked):has(#s2:checked) .verify-result,
#cws:has(#p3:checked):has(#k3:not(:checked)):has(#s3:checked) .verify-result,
#cws:has(#p3:not(:checked)):has(#k3:checked):has(#s3:checked) .verify-result,
#cws:has(#p3:not(:checked)):has(#k3:not(:checked)):has(#s3:not(:checked)) .verify-result,
#cws:has(#p3:checked):has(#k3:checked):has(#s3:not(:checked)) .verify-result,
#cws:has(#p4:checked):has(#k4:not(:checked)):has(#s4:checked) .verify-result,
#cws:has(#p4:not(:checked)):has(#k4:checked):has(#s4:checked) .verify-result,
#cws:has(#p4:not(:checked)):has(#k4:not(:checked)):has(#s4:not(:checked)) .verify-result,
#cws:has(#p4:checked):has(#k4:checked):has(#s4:not(:checked)) .verify-result,
#cws:has(#p5:checked):has(#k5:not(:checked)):has(#s5:checked) .verify-result,
#cws:has(#p5:not(:checked)):has(#k5:checked):has(#s5:checked) .verify-result,
#cws:has(#p5:not(:checked)):has(#k5:not(:checked)):has(#s5:not(:checked)) .verify-result,
#cws:has(#p5:checked):has(#k5:checked):has(#s5:not(:checked)) .verify-result,
#cws:has(#p6:checked):has(#k6:not(:checked)):has(#s6:not(:checked)) .verify-result,
#cws:has(#p6:not(:checked)):has(#k6:checked):has(#s6:not(:checked)) .verify-result,
#cws:has(#p6:not(:checked)):has(#k6:not(:checked)):has(#s6:checked) .verify-result,
#cws:has(#p6:checked):has(#k6:checked):has(#s6:checked) .verify-result,
#cws:has(#p7:checked):has(#k7:not(:checked)):has(#s7:not(:checked)) .verify-result,
#cws:has(#p7:not(:checked)):has(#k7:checked):has(#s7:not(:checked)) .verify-result,
#cws:has(#p7:not(:checked)):has(#k7:not(:checked)):has(#s7:checked) .verify-result,
#cws:has(#p7:checked):has(#k7:checked):has(#s7:checked) .verify-result,
#cws:has(#p8:checked):has(#k8:not(:checked)):has(#s8:not(:checked)) .verify-result,
#cws:has(#p8:not(:checked)):has(#k8:checked):has(#s8:not(:checked)) .verify-result,
#cws:has(#p8:not(:checked)):has(#k8:not(:checked)):has(#s8:checked) .verify-result,
#cws:has(#p8:checked):has(#k8:checked):has(#s8:checked) .verify-result,
#cws:has(#p9:checked):has(#k9:not(:checked)):has(#s9:not(:checked)) .verify-result,
#cws:has(#p9:not(:checked)):has(#k9:checked):has(#s9:not(:checked)) .verify-result,
#cws:has(#p9:not(:checked)):has(#k9:not(:checked)):has(#s9:checked) .verify-result,
#cws:has(#p9:checked):has(#k9:checked):has(#s9:checked) .verify-result,
#cws:has(#p10:checked):has(#k10:not(:checked)):has(#s10:checked) .verify-result,
#cws:has(#p10:not(:checked)):has(#k10:checked):has(#s10:checked) .verify-result,
#cws:has(#p10:not(:checked)):has(#k10:not(:checked)):has(#s10:not(:checked)) .verify-result,
#cws:has(#p10:checked):has(#k10:checked):has(#s10:not(:checked)) .verify-result,
#cws:has(#p11:checked):has(#k11:not(:checked)):has(#s11:not(:checked)) .verify-result,
#cws:has(#p11:not(:checked)):has(#k11:checked):has(#s11:not(:checked)) .verify-result,
#cws:has(#p11:not(:checked)):has(#k11:not(:checked)):has(#s11:checked) .verify-result,
#cws:has(#p11:checked):has(#k11:checked):has(#s11:checked) .verify-result,
#cws:has(#p12:checked):has(#k12:not(:checked)):has(#s12:checked) .verify-result,
#cws:has(#p12:not(:checked)):has(#k12:checked):has(#s12:checked) .verify-result,
#cws:has(#p12:not(:checked)):has(#k12:not(:checked)):has(#s12:not(:checked)) .verify-result,
#cws:has(#p12:checked):has(#k12:checked):has(#s12:not(:checked)) .verify-result,
#cws:has(#p13:checked):has(#k13:not(:checked)):has(#s13:not(:checked)) .verify-result,
#cws:has(#p13:not(:checked)):has(#k13:checked):has(#s13:not(:checked)) .verify-result,
#cws:has(#p13:not(:checked)):has(#k13:not(:checked)):has(#s13:checked) .verify-result,
#cws:has(#p13:checked):has(#k13:checked):has(#s13:checked) .verify-result,
#cws:has(#p14:checked):has(#k14:not(:checked)):has(#s14:not(:checked)) .verify-result,
#cws:has(#p14:not(:checked)):has(#k14:checked):has(#s14:not(:checked)) .verify-result,
#cws:has(#p14:not(:checked)):has(#k14:not(:checked)):has(#s14:checked) .verify-result,
#cws:has(#p14:checked):has(#k14:checked):has(#s14:checked) .verify-result,
#cws:has(#p15:checked):has(#k15:not(:checked)):has(#s15:not(:checked)) .verify-result,
#cws:has(#p15:not(:checked)):has(#k15:checked):has(#s15:not(:checked)) .verify-result,
#cws:has(#p15:not(:checked)):has(#k15:not(:checked)):has(#s15:checked) .verify-result,
#cws:has(#p15:checked):has(#k15:checked):has(#s15:checked) .verify-result,
#cws:has(#p16:checked):has(#k16:not(:checked)):has(#s16:not(:checked)) .verify-result,
#cws:has(#p16:not(:checked)):has(#k16:checked):has(#s16:not(:checked)) .verify-result,
#cws:has(#p16:not(:checked)):has(#k16:not(:checked)):has(#s16:checked) .verify-result,
#cws:has(#p16:checked):has(#k16:checked):has(#s16:checked) .verify-result,
#cws:has(#p17:checked):has(#k17:not(:checked)):has(#s17:not(:checked)) .verify-result,
#cws:has(#p17:not(:checked)):has(#k17:checked):has(#s17:not(:checked)) .verify-result,
#cws:has(#p17:not(:checked)):has(#k17:not(:checked)):has(#s17:checked) .verify-result,
#cws:has(#p17:checked):has(#k17:checked):has(#s17:checked) .verify-result,
#cws:has(#p18:checked):has(#k18:not(:checked)):has(#s18:checked) .verify-result,
#cws:has(#p18:not(:checked)):has(#k18:checked):has(#s18:checked) .verify-result,
#cws:has(#p18:not(:checked)):has(#k18:not(:checked)):has(#s18:not(:checked)) .verify-result,
#cws:has(#p18:checked):has(#k18:checked):has(#s18:not(:checked)) .verify-result,
#cws:has(#p19:checked):has(#k19:not(:checked)):has(#s19:checked) .verify-result,
#cws:has(#p19:not(:checked)):has(#k19:checked):has(#s19:checked) .verify-result,
#cws:has(#p19:not(:checked)):has(#k19:not(:checked)):has(#s19:not(:checked)) .verify-result,
#cws:has(#p19:checked):has(#k19:checked):has(#s19:not(:checked)) .verify-result,
#cws:has(#p20:checked):has(#k20:not(:checked)):has(#s20:not(:checked)) .verify-result,
#cws:has(#p20:not(:checked)):has(#k20:checked):has(#s20:not(:checked)) .verify-result,
#cws:has(#p20:not(:checked)):has(#k20:not(:checked)):has(#s20:checked) .verify-result,
#cws:has(#p20:checked):has(#k20:checked):has(#s20:checked) .verify-result,
#cws:has(#p21:checked):has(#k21:not(:checked)):has(#s21:checked) .verify-result,
#cws:has(#p21:not(:checked)):has(#k21:checked):has(#s21:checked) .verify-result,
#cws:has(#p21:not(:checked)):has(#k21:not(:checked)):has(#s21:not(:checked)) .verify-result,
#cws:has(#p21:checked):has(#k21:checked):has(#s21:not(:checked)) .verify-result,
#cws:has(#p22:checked):has(#k22:not(:checked)):has(#s22:not(:checked)) .verify-result,
#cws:has(#p22:not(:checked)):has(#k22:checked):has(#s22:not(:checked)) .verify-result,
#cws:has(#p22:not(:checked)):has(#k22:not(:checked)):has(#s22:checked) .verify-result,
#cws:has(#p22:checked):has(#k22:checked):has(#s22:checked) .verify-result,
#cws:has(#p23:checked):has(#k23:not(:checked)):has(#s23:not(:checked)) .verify-result,
#cws:has(#p23:not(:checked)):has(#k23:checked):has(#s23:not(:checked)) .verify-result,
#cws:has(#p23:not(:checked)):has(#k23:not(:checked)):has(#s23:checked) .verify-result,
#cws:has(#p23:checked):has(#k23:checked):has(#s23:checked) .verify-result {
  --vr-text: "\2717  \201CSIGNATURE\201D  INVALID";
  --vr-color: #ff4444;
  background: rgba(255, 68, 68, 0.08);
  border-color: rgba(255, 68, 68, 0.3);
}

/* ============ VISUAL STYLING ============ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0d1117;
  color: #c9d1d9;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}

#cws {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 1200px;
  width: 100%;
  position: relative;
  align-items: start;
}

/* Full-width spanning elements */
.relays, .page-header, .token-display, footer {
  grid-column: 1 / -1;
}

/* Left column: all main cards */
.card-hdr, .card-payload, .card-key, .card-sig, .card-verify {
  grid-column: 1;
}

/* Right column: debug panel */
#dbg-toggle { display: none; }
.card-debug {
  grid-column: 2;
  grid-row: 3 / 8;
  position: sticky;
  top: 1rem;
  align-self: start;
}

@media (max-width: 900px) {
  #cws {
    grid-template-columns: 1fr;
  }
  .card-hdr, .card-payload, .card-key, .card-sig, .card-verify {
    grid-column: 1;
  }
  .card-debug {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

/* Hidden relay spans */
.relays {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

/* ── Page header ── */
.page-header {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}
.page-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f0f6fc;
}
.c { color: #fb015b; }
.w { color: #d63aff; }
.s { color: #00b9f1; }
.tagline {
  color: #8b949e;
  font-size: 1.1rem;
  margin-top: 0.25rem;
}
.algo {
  color: #8b949e;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}
.algo code {
  color: #79c0ff;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  background: rgba(121, 192, 255, 0.1);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}
.algo-full { font-style: italic; }
.rfc-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: #58a6ff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #58a6ff;
  padding: 0.35em 1em;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  width: 12em;
  text-align: center;
}
.rfc-link::after { content: "Read the CS24 RFC"; }
.rfc-link:hover {
  background: #58a6ff;
  color: #0d1117;
}
.rfc-link:hover::after { content: "Are you sure?"; }

/* ── Token display ── */
.token-display {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
}
.token-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8b949e;
  margin-bottom: 0.5rem;
}
.token-value {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.8rem;
  word-break: break-all;
  line-height: 1.8;
}
.t-hdr { color: #fb015b; }
.t-payload::after { color: #d63aff; }
.t-sig::after { color: #00b9f1; }
.t-dot { color: #484f58; }

/* ── Cards ── */
.card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 1.25rem;
}
.card h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.card h2 small {
  font-size: 0.65rem;
  color: #8b949e;
  font-weight: 400;
  margin-left: 0.5rem;
}
.card-hdr h2 { color: #fb015b; }
.card-payload h2 { color: #d63aff; }
.card-key h2 { color: #00b9f1; }
.card-sig h2 { color: #00b9f1; }
.card-verify h2 { color: #58a6ff; }

.card-hdr pre {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.85rem;
  color: #fb015b;
  background: rgba(251, 1, 91, 0.06);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
}

/* ── Bit grid ── */
.bit-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bit-group {
  display: flex;
  gap: 3px;
}
.bit-grid input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.bit-grid label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #30363d;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.8rem;
  color: #484f58;
  background: #0d1117;
  transition: all 0.12s ease;
  user-select: none;
}
.bit-grid label:hover {
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.06);
}
.bit-grid label::after { content: "0"; }
.bit-grid input:checked + label::after { content: "1"; }

.card-payload input:checked + label {
  background: rgba(214, 58, 255, 0.15);
  border-color: #d63aff;
  color: #d63aff;
  box-shadow: 0 0 8px rgba(214, 58, 255, 0.2);
}
.card-key input:checked + label {
  background: rgba(0, 185, 241, 0.15);
  border-color: #00b9f1;
  color: #00b9f1;
  box-shadow: 0 0 8px rgba(0, 185, 241, 0.2);
}
.card-verify input:checked + label {
  background: rgba(88, 166, 255, 0.15);
  border-color: #58a6ff;
  color: #58a6ff;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.2);
}

/* ── Encoded values ── */
.encoded-row {
  margin-top: 0.75rem;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.85rem;
}
.encoded-row .label { color: #8b949e; }
.payload-b64::after { color: #d63aff; }
.payload-ascii::after {
  color: #d63aff;
  background: rgba(214, 58, 255, 0.06);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}
.sig-b64::after { color: #00b9f1; }
.sig-note {
  font-size: 0.75rem;
  color: #8b949e;
  margin-top: 0.5rem;
  font-style: italic;
}

/* ── Verification result ── */
.verify-result {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  transition: background 0.25s, border-color 0.25s;
}

/* ── Footer ── */
footer {
  text-align: center;
  padding: 1rem 0;
  color: #8b949e;
  font-size: 0.8rem;
  line-height: 1.6;
}
footer strong { color: #79c0ff; }

.fine-print {
  font-style: italic;
  font-size: 0.7rem;
  margin-top: 0.25rem;
  color: #6e7681;
}

/* ============ DEBUG PANEL ============ */

/* Always visible — no toggle needed */
.debug-body {
  /* always expanded */
}

.debug-toggle {
  cursor: default;
}
.debug-toggle h2 { margin-bottom: 0; }

.card-debug {
  border-color: #30363d;
}
.card-debug h2 { color: #8b949e; }

.dbg-section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #21262d;
}
.dbg-section:first-child {
  margin-top: 0.5rem;
  border-top: none;
  padding-top: 0;
}
.dbg-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8b949e;
  margin-bottom: 0.5rem;
}
.dbg-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.8rem;
}
.dbg-key { color: #79c0ff; }
.dbg-item { color: #c9d1d9; }

/* Counter value displays (decimal) */
.dbg-c0::after { content: counter(c0); }
.dbg-c1::after { content: counter(c1); }
.dbg-c2::after { content: counter(c2); }
.dbg-c3::after { content: counter(c3); }
.dbg-byte0::after { content: counter(byte0); }
.dbg-byte1::after { content: counter(byte1); }
.dbg-byte2::after { content: counter(byte2); }
.dbg-sig0::after { content: counter(sig0); }
.dbg-sig1::after { content: counter(sig1); }
.dbg-sig2::after { content: counter(sig2); }
.dbg-sig3::after { content: counter(sig3); }

/* XOR bit grid */
.dbg-xor-grid {
  display: grid;
  grid-template-columns: 1.5em repeat(6, 1.2em) 0.5em repeat(6, 1.2em) 0.5em repeat(6, 1.2em) 0.5em repeat(6, 1.2em);
  gap: 2px 0;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
}
.dbg-xor-label {
  color: #8b949e;
  font-weight: 600;
}
.xb-sep { /* spacer between groups */ }
.xb::after { content: "0"; color: #484f58; }

/* Payload bits */
#cws:has(#p0:checked) .xb-p0::after,
#cws:has(#p1:checked) .xb-p1::after,
#cws:has(#p2:checked) .xb-p2::after,
#cws:has(#p3:checked) .xb-p3::after,
#cws:has(#p4:checked) .xb-p4::after,
#cws:has(#p5:checked) .xb-p5::after,
#cws:has(#p6:checked) .xb-p6::after,
#cws:has(#p7:checked) .xb-p7::after,
#cws:has(#p8:checked) .xb-p8::after,
#cws:has(#p9:checked) .xb-p9::after,
#cws:has(#p10:checked) .xb-p10::after,
#cws:has(#p11:checked) .xb-p11::after,
#cws:has(#p12:checked) .xb-p12::after,
#cws:has(#p13:checked) .xb-p13::after,
#cws:has(#p14:checked) .xb-p14::after,
#cws:has(#p15:checked) .xb-p15::after,
#cws:has(#p16:checked) .xb-p16::after,
#cws:has(#p17:checked) .xb-p17::after,
#cws:has(#p18:checked) .xb-p18::after,
#cws:has(#p19:checked) .xb-p19::after,
#cws:has(#p20:checked) .xb-p20::after,
#cws:has(#p21:checked) .xb-p21::after,
#cws:has(#p22:checked) .xb-p22::after,
#cws:has(#p23:checked) .xb-p23::after { content: "1"; color: #d63aff; }

/* Key bits */
#cws:has(#k0:checked) .xb-k0::after,
#cws:has(#k1:checked) .xb-k1::after,
#cws:has(#k2:checked) .xb-k2::after,
#cws:has(#k3:checked) .xb-k3::after,
#cws:has(#k4:checked) .xb-k4::after,
#cws:has(#k5:checked) .xb-k5::after,
#cws:has(#k6:checked) .xb-k6::after,
#cws:has(#k7:checked) .xb-k7::after,
#cws:has(#k8:checked) .xb-k8::after,
#cws:has(#k9:checked) .xb-k9::after,
#cws:has(#k10:checked) .xb-k10::after,
#cws:has(#k11:checked) .xb-k11::after,
#cws:has(#k12:checked) .xb-k12::after,
#cws:has(#k13:checked) .xb-k13::after,
#cws:has(#k14:checked) .xb-k14::after,
#cws:has(#k15:checked) .xb-k15::after,
#cws:has(#k16:checked) .xb-k16::after,
#cws:has(#k17:checked) .xb-k17::after,
#cws:has(#k18:checked) .xb-k18::after,
#cws:has(#k19:checked) .xb-k19::after,
#cws:has(#k20:checked) .xb-k20::after,
#cws:has(#k21:checked) .xb-k21::after,
#cws:has(#k22:checked) .xb-k22::after,
#cws:has(#k23:checked) .xb-k23::after { content: "1"; color: #00b9f1; }

/* Header constant bits (XOR-folded {"alg":"CS24"} = 0x5C2834) */
.xb-h1::after, .xb-h3::after, .xb-h4::after, .xb-h5::after,
.xb-h10::after, .xb-h12::after,
.xb-h18::after, .xb-h19::after, .xb-h21::after { content: "1"; color: #fb015b; }

/* XOR result bits */
#cws:has(#p0:checked):has(#k0:not(:checked)) .xb-x0::after,
#cws:has(#p0:not(:checked)):has(#k0:checked) .xb-x0::after,
#cws:has(#p1:checked):has(#k1:checked) .xb-x1::after,
#cws:has(#p1:not(:checked)):has(#k1:not(:checked)) .xb-x1::after,
#cws:has(#p2:checked):has(#k2:not(:checked)) .xb-x2::after,
#cws:has(#p2:not(:checked)):has(#k2:checked) .xb-x2::after,
#cws:has(#p3:checked):has(#k3:checked) .xb-x3::after,
#cws:has(#p3:not(:checked)):has(#k3:not(:checked)) .xb-x3::after,
#cws:has(#p4:checked):has(#k4:checked) .xb-x4::after,
#cws:has(#p4:not(:checked)):has(#k4:not(:checked)) .xb-x4::after,
#cws:has(#p5:checked):has(#k5:checked) .xb-x5::after,
#cws:has(#p5:not(:checked)):has(#k5:not(:checked)) .xb-x5::after,
#cws:has(#p6:checked):has(#k6:not(:checked)) .xb-x6::after,
#cws:has(#p6:not(:checked)):has(#k6:checked) .xb-x6::after,
#cws:has(#p7:checked):has(#k7:not(:checked)) .xb-x7::after,
#cws:has(#p7:not(:checked)):has(#k7:checked) .xb-x7::after,
#cws:has(#p8:checked):has(#k8:not(:checked)) .xb-x8::after,
#cws:has(#p8:not(:checked)):has(#k8:checked) .xb-x8::after,
#cws:has(#p9:checked):has(#k9:not(:checked)) .xb-x9::after,
#cws:has(#p9:not(:checked)):has(#k9:checked) .xb-x9::after,
#cws:has(#p10:checked):has(#k10:checked) .xb-x10::after,
#cws:has(#p10:not(:checked)):has(#k10:not(:checked)) .xb-x10::after,
#cws:has(#p11:checked):has(#k11:not(:checked)) .xb-x11::after,
#cws:has(#p11:not(:checked)):has(#k11:checked) .xb-x11::after,
#cws:has(#p12:checked):has(#k12:checked) .xb-x12::after,
#cws:has(#p12:not(:checked)):has(#k12:not(:checked)) .xb-x12::after,
#cws:has(#p13:checked):has(#k13:not(:checked)) .xb-x13::after,
#cws:has(#p13:not(:checked)):has(#k13:checked) .xb-x13::after,
#cws:has(#p14:checked):has(#k14:not(:checked)) .xb-x14::after,
#cws:has(#p14:not(:checked)):has(#k14:checked) .xb-x14::after,
#cws:has(#p15:checked):has(#k15:not(:checked)) .xb-x15::after,
#cws:has(#p15:not(:checked)):has(#k15:checked) .xb-x15::after,
#cws:has(#p16:checked):has(#k16:not(:checked)) .xb-x16::after,
#cws:has(#p16:not(:checked)):has(#k16:checked) .xb-x16::after,
#cws:has(#p17:checked):has(#k17:not(:checked)) .xb-x17::after,
#cws:has(#p17:not(:checked)):has(#k17:checked) .xb-x17::after,
#cws:has(#p18:checked):has(#k18:checked) .xb-x18::after,
#cws:has(#p18:not(:checked)):has(#k18:not(:checked)) .xb-x18::after,
#cws:has(#p19:checked):has(#k19:checked) .xb-x19::after,
#cws:has(#p19:not(:checked)):has(#k19:not(:checked)) .xb-x19::after,
#cws:has(#p20:checked):has(#k20:not(:checked)) .xb-x20::after,
#cws:has(#p20:not(:checked)):has(#k20:checked) .xb-x20::after,
#cws:has(#p21:checked):has(#k21:checked) .xb-x21::after,
#cws:has(#p21:not(:checked)):has(#k21:not(:checked)) .xb-x21::after,
#cws:has(#p22:checked):has(#k22:not(:checked)) .xb-x22::after,
#cws:has(#p22:not(:checked)):has(#k22:checked) .xb-x22::after,
#cws:has(#p23:checked):has(#k23:not(:checked)) .xb-x23::after,
#cws:has(#p23:not(:checked)):has(#k23:checked) .xb-x23::after { content: "1"; color: #f0883e; }

.dbg-list {
  list-style: none;
  font-size: 0.75rem;
  color: #8b949e;
  line-height: 1.8;
}
.dbg-list li::before {
  content: "→ ";
  color: #484f58;
}
.dbg-list code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  color: #79c0ff;
  background: rgba(121, 192, 255, 0.08);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-size: 0.7rem;
}