/* ══ THE PLAIN LOOK (17 Oct 2026) ══════════════════════════════════════════
   Ronan: "look at the bottom directories and make them same design".
   Laid over cs-ui.css on Circle and Game so they read like Courts and
   Settings: Bricolage, black and red on white, a big plain heading, thin
   rules between sections, no icons. */
:root{--ink:#1C1B20;--ink2:#3A3940;--ink3:#6F6D76;--line:#ECEDEF;--line2:#D6D6DA;--wash:#F5F5F6;
  --court:#1C1B20;--stop:#E03A2D;--good:#2E9D5B;--good-soft:#EAF6EE;--act:#E03A2D;
  --disp:"Bricolage Grotesque","Barlow",system-ui,sans-serif;--sans:var(--disp);--mono:var(--disp)}
html,body{background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased}
.wrap{max-width:560px;padding:max(18px,env(safe-area-inset-top)) 20px 140px}
h1.pg{font:800 30px/1.1 var(--disp);letter-spacing:-.02em}
.pgsub{font:500 14.5px/1.45 var(--disp);color:var(--ink3);margin-top:6px}
.top{display:none}
.card{border:1px solid var(--line);border-radius:16px;box-shadow:none}
.card .ck{font:700 12px/1 var(--disp);letter-spacing:.04em;text-transform:none;color:var(--ink3)}
.card h3{font:700 19px/1.2 var(--disp)}
.btn{font-family:var(--disp);font-weight:700;border-radius:14px;letter-spacing:0;text-transform:none}
.btn.court{background:var(--act);color:#fff}
.btn.quiet{background:#fff;border:1.5px solid var(--ink);color:var(--ink)}
.btn.ghost{border-color:var(--ink)}
input.t,select.t{border:1.5px solid var(--ink);border-radius:14px;font-family:var(--disp);font-weight:500}
input.t:focus,select.t:focus{border-color:var(--act);box-shadow:none}
.tick input{accent-color:var(--act)}
.link{color:var(--act)}
.fine{font:500 13.5px/1.5 var(--disp);color:var(--ink3)}
.tabs a.on{color:var(--act)!important}
/* 17 Oct, Ronan: "no colour?" — red is the action colour, as on Courts:
   the main button, what you've picked, and a red rule under each heading */
h1.pg::after{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--act);margin-top:10px}