/* Surf Window — 240×282, UX A–C density */
:root {
  --bg: #121216;
  --panel: #1c1c22;
  --focus: #282c38;
  --text: #f5f5f7;
  --muted: #a0a2aa;
  --dim: #5a5c64;
  --accent: #5ac8fa;
  --go: #48c978;
  --nogo: #ff7864;
  --maybe: #ffb84d;
  --board: #ffb84d;
  --stale: #ffb84d;
  --device-w: 240px;
  --device-h: 282px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#0b0b0b;color:var(--text);font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
body.r1{width:var(--device-w);height:var(--device-h);background:var(--bg)}
#stage{width:var(--device-w);height:var(--device-h)}
body.preview{min-height:100vh;display:flex;align-items:center;justify-content:center}
body.preview #stage{width:auto;height:auto;display:flex;align-items:flex-start;gap:28px}
#device{width:var(--device-w);height:var(--device-h);overflow:hidden;background:var(--bg);position:relative;flex-shrink:0;border-radius:12px}
body.preview #device{outline:1px solid #2a2a32;box-shadow:0 18px 50px rgba(0,0,0,.45)}
#app{width:var(--device-w);height:var(--device-h);padding:12px 12px 10px;display:flex;flex-direction:column;overflow:hidden}
#harness{display:none;width:220px;color:#c8c8d0;font-size:13px;line-height:1.4}
body.preview #harness{display:block}
#harness h2{font-size:14px;margin-bottom:8px;color:var(--text)}
#harness button,#harness label{display:block;margin:8px 0;font:inherit}
#harness button{background:var(--accent);color:#0b0b0b;border:0;padding:8px 10px;border-radius:6px;font-weight:650;cursor:pointer}
#harness kbd{background:#222;padding:1px 5px;border-radius:3px}
.loading{font-size:12px;color:var(--muted);padding-top:8px}
.status{font-size:8px;color:var(--dim);min-height:12px;margin-bottom:4px}
.status.stale{color:var(--stale)}
.status button{all:unset;cursor:pointer;color:var(--accent);font-weight:650}
.status .fail{color:var(--nogo);display:block;font-size:9px;margin-bottom:2px}
.spot{font-size:15px;font-weight:700;line-height:1.15;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{margin-top:3px;font-size:9px;color:var(--muted)}
.row-main{display:flex;align-items:center;gap:8px;margin-top:10px}
.pill{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.04em}
.pill.go{background:rgba(72,201,120,.18);color:var(--go)}
.pill.maybe{background:rgba(255,184,77,.16);color:var(--maybe)}
.pill.nogo{background:rgba(255,120,100,.16);color:var(--nogo)}
.window{font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.condition{margin-top:10px;padding:8px 10px;background:var(--focus);border-radius:8px;font-size:11px;font-weight:700;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint{margin-top:10px;padding-top:0;font-size:9px;color:var(--muted)}
.board{margin-top:8px;font-size:9px;color:var(--board);line-height:1.3}
.board strong{font-weight:700}
.delta{margin-top:8px;padding:8px 10px;background:var(--panel);border-radius:8px;font-size:9px;line-height:1.45;color:var(--text)}
.delta .vs{color:var(--text);font-weight:650;margin-bottom:3px}
.delta .k{color:var(--dim);display:inline-block;width:34px}
.mid{display:flex;flex-direction:column;height:100%}
.mid .peek{font-size:10px;color:var(--dim);opacity:.55;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mid .focus{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px;background:var(--focus);border-radius:10px}
.mid .focus .spot{font-size:14px}
.mid .why{margin-top:8px;font-size:10px;color:var(--muted);font-weight:600}
.dots{display:flex;gap:5px;justify-content:center;margin-top:12px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--dim);display:block}
.dots i.on{background:var(--accent)}

.delta .val{font-weight:700}
.delta .better{color:var(--go)}
.delta .worse{color:var(--nogo)}
.delta .same{color:var(--muted)}
.mid .ghost{margin-top:6px}