/* ============================================================
   THE AI EXCHANGE RATE — split-flap board.
   Printed card under ordinary light. Nothing glows.
   ============================================================ */

:root{
  --case:#14170F;
  --flap:#1D2118;
  --char:#F2EAD3;
  --sodium:#E8A33D;
  --brass:#8A7B4F;
  --alarm:#C4553A;
  --seam:#0C0F09;

  --pad:clamp(1.1rem,4vw,3rem);
  --ease:cubic-bezier(.2,.9,.25,1);
  --sign:"Oswald","Haettenschweiler","Arial Narrow",sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--case);color:var(--char);
  font-family:var(--ui);font-size:clamp(1rem,.95rem + .28vw,1.08rem);
  line-height:1.6;overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
a{color:var(--sodium)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:var(--sodium)}

.skip{
  position:absolute;left:-999px;top:0;z-index:99;
  background:var(--sodium);color:var(--case);padding:.7rem 1.2rem;
  font:700 .8rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{left:0}
:where(a,button,input):focus-visible{outline:2px solid var(--sodium);outline-offset:2px}

.head__in,.board__in,.panel__in{max-width:74rem;margin-inline:auto}

/* ---------- Header strip ---------- */
.head{padding:clamp(1.5rem,5vw,3.5rem) var(--pad) clamp(1.5rem,4vw,2.5rem)}
.strip{
  display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;align-items:baseline;
  margin:0 0 clamp(1.25rem,3vw,2rem);padding-bottom:.85rem;
  border-bottom:1px solid var(--brass);
}
.strip__k{
  font:600 .62rem/1.5 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
}
.strip__v{font:400 .82rem/1.5 var(--sign);letter-spacing:.05em;color:var(--char);margin-right:.5rem}

.title{
  margin:0;font-family:var(--sign);font-weight:600;
  font-size:clamp(2.6rem,9vw,5.5rem);line-height:.95;
  letter-spacing:-.01em;text-transform:uppercase;
}
.lede{
  margin:1rem 0 clamp(1.75rem,4vw,2.5rem);max-width:58ch;
  color:var(--brass);font-size:clamp(1rem,.95rem + .35vw,1.15rem);text-wrap:pretty;
}

/* The input is board furniture, not a form pasted underneath. */
.input{
  border:1px solid var(--brass);padding:clamp(.9rem,2.5vw,1.4rem);
  max-width:34rem;background:var(--flap);
}
.input label{
  display:block;font:600 .62rem/1.5 var(--ui);letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-bottom:.7rem;
}
.input__row{display:flex;gap:.6rem;flex-wrap:wrap}
.input input{
  flex:1 1 10rem;min-width:0;background:var(--case);color:var(--sodium);
  border:1px solid var(--brass);padding:.6rem .7rem;
  font:600 clamp(1.1rem,1rem + .5vw,1.4rem)/1 var(--sign);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.input button{
  flex:0 0 auto;background:var(--sodium);color:var(--case);border:0;
  font:600 .8rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  padding:.7rem 1.2rem;cursor:pointer;transition:background .15s var(--ease);
}
.input button:hover{background:var(--char)}
.fine{margin:.7rem 0 0;font-size:.78rem;line-height:1.55;color:var(--brass);max-width:60ch}
.fine--pad{margin-top:1.5rem}
.fine b{color:var(--char);font-weight:600}

/* ---------- The board ---------- */
.board{padding:0 var(--pad) clamp(2.5rem,6vw,4rem)}
.board__head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 5.5rem minmax(0,1.2fr);
  gap:.5rem clamp(.75rem,2vw,1.75rem);
  padding:.7rem 0;border-bottom:1px solid var(--brass);
  font:600 .62rem/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
}
.board__head i{font-style:normal;font-weight:400;letter-spacing:.1em;opacity:.8}
.ta-r{text-align:right}

.rows{list-style:none;margin:0;padding:0}
.row{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 5.5rem minmax(0,1.2fr);
  gap:.5rem clamp(.75rem,2vw,1.75rem);
  align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--seam);
}
.row__who{
  font-family:var(--sign);font-weight:500;
  font-size:clamp(1.05rem,.95rem + .6vw,1.5rem);letter-spacing:.02em;
}

/* A flap: printed card, hairline seam, no glow. */
.flap{
  display:inline-block;background:var(--flap);
  border:1px solid var(--seam);border-radius:2px;
  padding:.2em .45em .18em;position:relative;
  font-family:var(--sign);font-weight:600;color:var(--sodium);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.flap::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:1px;background:var(--seam);
}
.row__rate{text-align:right;font-size:clamp(1.2rem,1rem + 1.1vw,2.1rem)}
.row__rate .suffix{font-size:.5em;color:var(--brass);margin-left:.25em;letter-spacing:.1em}
.row__rate .none{font-size:.55em;color:var(--brass);font-family:var(--ui);letter-spacing:.02em}
.row__move{
  text-align:right;font:500 .82rem/1.4 var(--sign);letter-spacing:.04em;color:var(--brass);
}
.row__move.up{color:var(--alarm)}
.row__move.down{color:var(--char)}
.row__yours{text-align:right;font-size:clamp(.95rem,.9rem + .45vw,1.25rem)}
.row__yours .unit{font-size:.62em;color:var(--brass);margin-left:.3em}

/* The flip, once, when a figure changes. */
.flip{animation:flip .34s var(--ease) both}
@keyframes flip{
  0%{transform:perspective(300px) rotateX(-82deg);opacity:.25}
  100%{transform:none;opacity:1}
}

.caveat{
  margin:1.25rem 0 0;padding-top:1rem;border-top:1px solid var(--brass);
  font-size:.82rem;line-height:1.6;color:var(--brass);max-width:72ch;
}
.caveat b{color:var(--char);font-weight:600}

/* ---------- Panels ---------- */
.panel{padding:clamp(2.25rem,6vw,4rem) var(--pad);border-top:1px solid var(--seam)}
.panel--alt{background:#171B12}
.panel--close{border-top:1px solid var(--brass)}
.h2{
  margin:0 0 .75rem;font-family:var(--sign);font-weight:600;
  font-size:clamp(1.6rem,4.5vw,2.6rem);line-height:1.05;text-transform:uppercase;letter-spacing:-.005em;
}
.p{margin:0 0 1rem;max-width:62ch;color:var(--brass);text-wrap:pretty}
.p b{color:var(--char);font-weight:600}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:0 clamp(1.5rem,4vw,3rem)}

/* Response bars */
.bars{list-style:none;margin:1.5rem 0 0;padding:0;max-width:52rem}
.bars li{
  display:grid;grid-template-columns:3.5rem minmax(0,1fr) 4rem;
  gap:.75rem;align-items:center;padding:.35rem 0;
}
.bars .code{font:600 .95rem/1 var(--sign);color:var(--char)}
.bars .track{height:.85rem;background:var(--seam);position:relative}
.bars .fill{position:absolute;inset:0 auto 0 0;background:var(--brass)}
.bars .fill--alarm{background:var(--alarm)}
.bars .pct{text-align:right;font:500 .9rem/1 var(--sign);color:var(--brass)}
.bars .lab{grid-column:2;font-size:.72rem;color:var(--brass);margin-top:-.15rem}

/* Transparency ledger */
.ledger{margin-top:1.5rem;max-width:56rem}
.ledger__row{
  display:grid;grid-template-columns:minmax(0,1fr) 5rem 6rem 6rem;
  gap:.5rem 1rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--seam);
}
.ledger__row--head{
  border-bottom:1px solid var(--brass);
  font:600 .62rem/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
}
.ledger__who{font-family:var(--sign);font-weight:500;font-size:1.1rem}
.mark{text-align:center;font:600 .7rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;padding:.3rem .2rem}
.mark--y{color:var(--char)}
.mark--n{color:var(--alarm)}
.mark--p{color:var(--brass)}

.foot{padding:clamp(2rem,5vw,3rem) var(--pad) clamp(3rem,7vw,5rem);border-top:1px solid var(--seam)}
.foot .fine{margin-bottom:.85rem}

@media (max-width:720px){
  .board__head,.row{grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem}
  .board__head span:nth-child(3),.board__head span:nth-child(4){display:none}
  .row__move{grid-column:1;text-align:left;font-size:.75rem}
  .row__yours{grid-column:2;text-align:right}
  .ledger__row{grid-template-columns:minmax(0,1fr) 3.2rem 3.2rem 3.2rem;gap:.4rem}
  .mark{font-size:.6rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}