/* SAME NEWS — Morrow's newsroom. Sol swaps in art via the CSS variables and
   classes marked ASSET (see briefs/ASSETS_03_SAME_NEWS_PROMPTS.md).
   Keep ids, data-screen and data-for. */
:root {
  --lab:#f4f4f2; --ink:#0b0b0c; --signal:#e5132b; --dim:#7d7d7d; --screen:#e3e3df; --screen-lit:#ffffff;
  --riku:#f2a541; --night:#0e1a2b;
  --wall-art: url(assets/newsroom_wall.webp);
  --grain: url(assets/grain.webp);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --lab:#0b0b0c; --ink:#f4f4f2; --dim:#7a7a7a; --screen:#18181b; --screen-lit:#2c2c31; --wall-art:url(assets/newsroom_wall_dark.webp); }
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--lab); color:var(--ink);
  font:500 16px/1.45 system-ui,"Hiragino Sans","Noto Sans JP",sans-serif; overflow-x:hidden; }
body::after { content:""; position:fixed; inset:0; pointer-events:none; background:var(--grain); opacity:.06; mix-blend-mode:multiply; }
main { position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr;
  padding:max(12px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); }

/* ── Top bar ── */
.bar { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; }
.brand { font:700 11px ui-monospace,monospace; letter-spacing:.14em; color:var(--dim); }
.mute { width:40px; height:40px; border-radius:50%; border:1px solid var(--dim); background:none; font-size:16px; }

/* ── The wall of screens ── */
#wall { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; column-gap:16px; row-gap:3.3svh; padding:16.1svh 16px 15.6svh;
  background:var(--wall-art) center/100% 100% no-repeat; pointer-events:none; opacity:.6; transition:opacity .8s; }
#wall i { position:relative; overflow:hidden; background:transparent; border-radius:2px; font:700 10px/1.2 system-ui,"Hiragino Sans",sans-serif;
  color:transparent; padding:8px; filter:blur(1.6px); transition:background .5s, box-shadow .5s, transform .5s; }
#wall i::before { content:attr(data-h); color:var(--dim); opacity:.7; }
#wall i.flick { animation:flick .18s steps(2) 2; }
#wall i.lit { background:var(--screen-lit); filter:none; transform:scale(1.04); box-shadow:0 0 50px rgba(255,255,255,.9), 0 0 0 2px var(--signal) inset; }
@keyframes flick { 50% { opacity:.2; } }
[data-screen="headline"] #wall, [data-screen="rate"] #wall { opacity:.28; }
[data-screen="reveal"] #wall, [data-screen="send"] #wall { opacity:.08; }

/* ── Stages ── */
.stage { position:relative; z-index:1; display:none; align-self:center; max-width:34em; margin:0 auto; width:100%; }
[data-screen="wall"] [data-for~="wall"], [data-screen="headline"] [data-for~="headline"],
[data-screen="rate"] [data-for~="rate"], [data-screen="send"] [data-for~="send"],
[data-screen="reveal"] [data-for~="reveal"] { display:block; animation:enter .35s ease-out both; }
@keyframes enter { from { opacity:0; transform:translateY(10px); } }

.chip { display:inline-block; margin:0 0 10px; padding:4px 10px; border-radius:999px; background:var(--ink); color:var(--lab);
  font:700 11px ui-monospace,monospace; letter-spacing:.08em; }
.chip:empty { display:none; }
.machine { font:700 13px/1.4 ui-monospace,monospace; letter-spacing:.06em; color:var(--signal); min-height:1.4em; margin:0 0 6px; }
.machine.big { font-size:clamp(20px,6vw,30px); line-height:1.15; }
.machine.small { font-size:11px; }
.intro { color:var(--dim); min-height:1.4em; margin:0; }
.headline { font:800 clamp(32px,9.5vw,58px)/1.06 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.02em; margin:.25em 0 .5em;
  overflow-wrap:anywhere; min-height:2.2em; }
.headline.cursor::after { content:"▍"; color:var(--signal); animation:blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

.alone { height:3px; background:color-mix(in srgb, var(--ink) 12%, transparent); border-radius:2px; overflow:hidden; margin-bottom:18px; visibility:hidden; }
[data-screen="headline"] .alone { visibility:visible; }
.alone i { display:block; height:100%; background:var(--signal); transform-origin:left; transform:scaleX(0); }

/* ── The five tiles ── */
.scale { display:none; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
[data-screen="rate"] .scale { display:grid; }
.scale button { position:relative; min-height:92px; border:2px solid var(--ink); border-radius:10px; background:var(--lab); color:var(--ink);
  font:700 12px/1.2 system-ui,"Hiragino Sans",sans-serif; padding:6px 2px; touch-action:manipulation; overflow-wrap:anywhere;
  box-shadow:0 5px 0 var(--ink); transition:transform .08s, box-shadow .08s; animation:rise .35s ease-out both; }
.scale button:nth-child(2) { animation-delay:.04s; } .scale button:nth-child(3) { animation-delay:.08s; }
.scale button:nth-child(4) { animation-delay:.12s; } .scale button:nth-child(5) { animation-delay:.16s; }
@keyframes rise { from { opacity:0; transform:translateY(16px); } }
.scale button:nth-child(1) { background:var(--ink); color:var(--lab); box-shadow:0 5px 0 #000; }
.scale button:nth-child(5) { background:var(--signal); border-color:var(--signal); color:#fff; box-shadow:0 5px 0 #8f0716; }
.scale button:active, .scale button.picked { transform:translateY(5px); box-shadow:0 0 0 var(--ink); }
.scale button.picked::after { content:"✓"; position:absolute; top:4px; right:6px; font:800 14px system-ui; color:var(--signal); }
.scale button:nth-child(5).picked::after { color:#fff; }
.scale.done button:not(.picked) { opacity:.25; }
.peek { margin-top:16px; background:none; border:0; color:var(--dim); text-decoration:underline; font:600 13px system-ui,"Hiragino Sans",sans-serif; padding:8px 0; }
.peekFact { border-left:3px solid var(--ink); padding-left:10px; color:var(--dim); }

/* ── Send ── */
h2 { font:800 clamp(24px,7vw,36px)/1.1 system-ui,"Hiragino Sans",sans-serif; margin:0 0 .3em; }
.dim { color:var(--dim); } .small { font-size:12px; }
.preview { margin:16px 0; }
.phone { border:2px solid var(--ink); border-radius:22px; padding:18px 16px; min-height:120px; background:var(--lab); }
.blurred { font:800 22px/1.15 system-ui,"Hiragino Sans",sans-serif; filter:blur(7px); user-select:none; margin:6px 0; }
.toggle { display:flex; gap:10px; align-items:flex-start; margin:14px 0 6px; padding:14px; border:1px dashed var(--signal); border-radius:10px; cursor:pointer; }
.toggle input { width:22px; height:22px; accent-color:var(--signal); flex:none; }
.row { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
button.primary, button.ghost, a.door { padding:14px 18px; border-radius:999px; font:700 15px system-ui,"Hiragino Sans",sans-serif; text-decoration:none; }
button.primary { background:var(--ink); color:var(--lab); border:0; }
button.ghost { background:none; color:var(--ink); border:2px solid var(--ink); }
a.door { background:var(--night); color:var(--riku); border:0; opacity:0; transition:opacity .8s; }
.lit-door a.door { opacity:1; }

/* ── Reveal ── */
.split { display:grid; grid-template-columns:minmax(0,1fr) 3px minmax(0,1fr); gap:12px; margin:14px 0 8px; }
.seam { background:var(--signal); transform-origin:top; transform:scaleY(0); }
.revealed .seam { animation:tear .45s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes tear { to { transform:scaleY(1); } }
.side { opacity:0; }
.revealed .side.left { animation:slamL .4s cubic-bezier(.2,.9,.3,1.2) .35s forwards; }
.revealed .side.right { animation:slamR .4s cubic-bezier(.2,.9,.3,1.2) .6s forwards; }
@keyframes slamL { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:none; } }
@keyframes slamR { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:none; } }
.side .h { font:800 clamp(17px,4.8vw,24px)/1.15 system-ui,"Hiragino Sans",sans-serif; overflow-wrap:anywhere; margin:.2em 0; }
.label { font:700 11px ui-monospace,monospace; letter-spacing:.08em; color:var(--dim); text-transform:uppercase; margin:0; }

.meter { position:relative; height:54px; margin:10px 0 14px; }
.meter .track { position:absolute; left:0; right:0; top:26px; height:3px; background:linear-gradient(90deg,var(--ink),var(--dim),var(--signal)); border-radius:2px; }
.meter .end { position:absolute; top:34px; font:600 11px system-ui,"Hiragino Sans",sans-serif; color:var(--dim); }
.meter .bad { left:0; } .meter .good { right:0; }
.mark { position:absolute; top:0; width:20px; height:20px; margin-left:-10px; border-radius:50%; opacity:0; transform:translateY(-14px); }
.mark.left { background:var(--ink); } .mark.right { background:var(--signal); }
.mark::after { content:""; position:absolute; left:9px; top:20px; width:2px; height:8px; background:inherit; }
.revealed .mark.left { animation:drop .35s ease-out 1.0s forwards; } .revealed .mark.right { animation:drop .35s ease-out 1.15s forwards; }
@keyframes drop { to { opacity:1; transform:none; } }

.fact { border-top:2px solid var(--ink); padding-top:12px; opacity:0; }
.revealed .fact { animation:factIn .5s ease-out 1.6s forwards; }
@keyframes factIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.trap { border:1px solid var(--signal); color:var(--signal); padding:10px 12px; border-radius:10px; font-weight:600; }
.riku { margin-top:18px; padding:14px; border-radius:10px; background:var(--night); color:#f4efe6; opacity:0; transition:opacity .9s; }
.lit-door .riku { opacity:1; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.shake { animation:shake .28s; }
@keyframes shake { 20% { transform:translateX(-6px); } 60% { transform:translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .side, .fact, .mark, .riku, a.door { opacity:1 !important; transform:none !important; }
  .seam { transform:none !important; }
}

/* Codex visual QA: preserve the first headline while the reveal animates. */
.intro { background:radial-gradient(ellipse at 50% 36%,rgba(229,19,43,.16),transparent 46%),linear-gradient(180deg,#17191d 0%,#090a0c 100%); }
.headline { text-shadow:0 3px 20px rgba(0,0,0,.58); }
.big { text-shadow:0 2px 18px rgba(0,0,0,.5); }
.primary,.door,.toggle,.flick { transition:transform .18s ease,filter .18s ease,background-color .18s ease; }
.primary:hover,.door:hover,.toggle:hover,.flick:hover { transform:translateY(-2px); filter:brightness(1.08); }
button:focus-visible,a:focus-visible { outline:3px solid #e5132b; outline-offset:4px; }