/* ChessGuild organizer pages. Tokens first: change a colour here and every page follows. */
:root{
  --ink:#17201b; --muted:#5d675f; --paper:#f5f6f2; --panel:#ffffff; --line:#d9ddd5;
  --felt:#2b5a43; --felt-dark:#1c3f2e; --felt-soft:#e4eee7;
  --gold:#a8741a; --gold-soft:#faf0d6; --danger:#a3262a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body.org{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans)}
.org a{color:var(--felt);text-underline-offset:3px}
.org a:hover{color:var(--felt-dark)}
.org :focus-visible{outline:3px solid var(--felt);outline-offset:2px;border-radius:3px}

/* top bar */
.top{background:var(--felt-dark);color:#e8f0ea}
.top .in{max-width:880px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.top .brand{font:700 1.3rem var(--serif);color:#fff;text-decoration:none;letter-spacing:.01em;margin-right:auto}
.top a{color:#cfe0d4;text-decoration:none}
.top a:hover{color:#fff;text-decoration:underline}
.top .who{font-size:.85rem;color:#a9c0b0}
.tag{display:inline-block;border:1px solid var(--gold);color:var(--gold);background:var(--gold-soft);border-radius:3px;padding:0 6px;font-size:.78rem;font-weight:600}

.wrap{max-width:880px;margin:0 auto;padding:28px 16px 60px}
h1,h2,h3{font-family:var(--serif);line-height:1.2;color:var(--ink)}
h1{font-size:2rem;margin:0 0 18px}
h2{font-size:1.4rem;margin:34px 0 10px}
h3{font-size:1.1rem;margin:26px 0 8px}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}
small,.muted{color:var(--muted)}
code{background:#eceee8;padding:1px 5px;border-radius:3px;font-size:.9em}

/* buttons */
.btn,.org button{font:600 .95rem var(--sans);display:inline-block;padding:9px 16px;border:1px solid var(--felt);background:var(--felt);color:#fff;border-radius:5px;text-decoration:none;cursor:pointer}
.org a.btn,.org a.btn:hover{color:#fff}
.btn:hover,.org button:hover{background:var(--felt-dark);color:#fff}
.org form button[type=submit]{padding:6px 12px}
.btn.big{padding:12px 20px;font-size:1.02rem}

/* forms */
.org input,.org select{font:inherit;padding:6px 8px;border:1px solid #b9c0b6;border-radius:4px;background:#fff;color:var(--ink);max-width:100%}
.org input[readonly]{background:#f0f2ec}
.panel{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--felt);border-radius:4px;padding:12px 14px;margin:12px 0;line-height:2.1}
.panel small{display:block;line-height:1.5;margin-top:4px}
.field{display:block;margin:0 0 16px}
.field span{display:block;font-weight:600;margin-bottom:4px}
.field small{display:block;margin-top:3px}
.flash{background:var(--felt-soft);border-left:4px solid var(--felt);padding:8px 12px;border-radius:3px}
.error{background:#fbe9e9;border-left:4px solid var(--danger);color:#6d1517;padding:8px 12px;border-radius:3px;font-weight:600}
.note{background:var(--gold-soft);border-left:4px solid var(--gold);padding:8px 12px;border-radius:3px}

/* the tournament list reads like a club programme: name .......... date */
.programme{list-style:none;margin:0;padding:0}
.programme li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:11px 0;border-bottom:1px solid var(--line)}
.programme .name{flex:0 1 auto;font:600 1.12rem var(--serif);color:var(--ink);text-decoration:none}
.programme .name:hover{text-decoration:underline}
.programme .lead{flex:1;border-bottom:2px dotted #b9c0b6;transform:translateY(-4px);min-width:16px}
.programme .when{font-variant-numeric:tabular-nums;white-space:nowrap}
.programme .meta{flex:1 0 100%;order:3;font-size:.85rem;color:var(--muted)}
.programme.past .name{color:var(--muted)}
.empty{padding:18px;border:1px dashed #b9c0b6;border-radius:4px;color:var(--muted)}

/* tables (games, players and links) */
.org table{border-collapse:collapse;width:100%;background:var(--panel);border:1px solid var(--line);font-size:.93rem}
.org th{font-weight:600;text-align:left;background:#eef1ea;border-bottom:1px solid var(--line)}
.org th,.org td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}
.org tr.dc td{background:var(--gold-soft)}
.org td input[readonly]{width:100%;min-width:260px}

/* landing page: email form under the buttons, premium panel */
.entry{margin:18px 0 0;max-width:30em}
.entry[hidden]{display:none}
.entry .row{display:flex;gap:8px;flex-wrap:wrap}
.entry input[type=email]{flex:1 1 14em;padding:11px 12px;font-size:1rem}
.entry small{display:block;margin-top:8px}
.btn.on{box-shadow:0 0 0 3px var(--felt-soft)}
.vip{margin:44px 0 0;background:var(--felt-dark);color:#e8f0ea;border:1px solid var(--gold);border-radius:6px;padding:24px 22px}
.vip h2{color:#fff;margin:0 0 6px}
.vip ul{margin:12px 0 18px;padding-left:1.1em;max-width:40em}
.vip li{margin:.4em 0}
.vip .soon{color:#c9b57d;font-size:.85rem}
.vip input[type=email]{border-color:var(--gold)}
.vip .btn{background:var(--gold);border-color:var(--gold);color:#fff}
.vip .btn:hover{background:#8f6214}
.vip small{color:#a9c0b0}
/* landing page */
.hero{padding:28px 0 8px}
.hero h1{font-size:clamp(2rem,6vw,3.2rem);line-height:1.1;max-width:18em;margin:0 0 14px}
.hero p.lede{font-size:1.15rem;max-width:34em;margin:0 0 22px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.btn.ghost,.org a.btn.ghost{background:transparent;color:var(--felt)}
.org a.btn.ghost:hover{background:var(--felt-soft);color:var(--felt-dark)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);max-width:40em}
.steps li::before{content:counter(s);font:700 1.6rem/1 var(--serif);color:var(--felt);min-width:1.2em}
.steps b{display:block;font-family:var(--serif);font-size:1.1rem}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
.prose{max-width:42em}
.prose p,.prose li{margin:.5em 0}
.foot{border-top:1px solid var(--line);background:#eef1ea;color:var(--muted);font-size:.85rem}
.foot .in{max-width:880px;margin:0 auto;padding:14px 16px;display:flex;justify-content:space-between;gap:12px}
@media (max-width:700px){.cols{grid-template-columns:1fr}}
@media (max-width:560px){ h1{font-size:1.6rem} .programme .when{white-space:normal} .org table{display:block;overflow-x:auto} }
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}