/* SGB RSVP: Stud Game Breeders look (see design-spec-sgb.md). Mobile first. */
:root{--yellow:#F4C007;--ink:#303030;--text:#333;--muted:#7F7F7F;--grey:#F4F4F4;--line:#E2E2E2;
  --ok:#2c6b3a;--okbg:#e7f3e9;--bad:#8a2c2c;--badbg:#f3e3e3;--waitbg:#fff4cc;--wait:#7a5c00;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text);background:#fff;font-size:16px;line-height:1.55}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

/* hero */
.hero{position:relative;min-height:250px;background:#2a2a2a url(hero.webp) center 40%/cover;color:#fff;text-align:center;padding:22px 20px 34px}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.hero>*{position:relative}
.hero .logo{width:150px;height:auto;display:block;margin:0 auto}
.hero .hi{font-size:15px;margin-top:30px;opacity:.95}
.hero h1{font-size:30px;font-weight:600;letter-spacing:-1px;line-height:1.1;margin:6px auto 0;max-width:760px}
.hero.short{min-height:0;padding-bottom:26px}
.lang{position:absolute;top:14px;right:14px;display:flex;border:1px solid rgba(255,255,255,.7);z-index:2}
.lang button{background:none;border:0;color:#fff;font-size:11px;font-weight:700;letter-spacing:1.5px;padding:6px 9px;cursor:pointer}
.lang button.on{background:#fff;color:var(--ink)}
.band{background:var(--yellow);color:#fff;text-align:center;padding:12px 16px;text-transform:uppercase;font-weight:800;letter-spacing:2px;font-size:14px}
.band small{display:block;font-weight:600;letter-spacing:1px;font-size:11px;margin-top:2px}

/* sections */
.sec{padding:26px 22px}
.sec>.in{max-width:640px;margin:0 auto}
.sec.grey{background:var(--grey)}
h2{font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink);text-align:center;margin-bottom:16px}
.rule{width:120px;height:2px;background:var(--yellow);margin:22px auto}
p{font-size:15px;line-height:1.55}
.lead{text-align:center;color:var(--ink)}
.fine{font-size:12px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.5}
.fine a{color:var(--ink);font-weight:700}

.event{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.event:last-of-type{border-bottom:0}
.date{background:var(--ink);color:#fff;text-align:center;padding:6px 0;font-weight:700;line-height:1.1}
.date b{display:block;font-size:22px}
.date span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase}
.event h3{font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink)}
.event p{font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px}

/* form */
.q{background:#fff;border:2px solid var(--line);padding:16px;margin-bottom:12px}
.q h3{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink)}
.q .when{font-size:13px;color:var(--muted);margin:2px 0 12px}
.opt{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;border:2px solid var(--line);background:#fff;padding:14px;margin-bottom:10px;cursor:pointer;width:100%;text-align:left}
.opt .l{width:34px;height:34px;border:2px solid var(--ink);display:grid;place-items:center;font-weight:800;color:var(--ink)}
.opt b{font-size:15px;color:var(--ink);display:block}
.opt small{font-size:13px;color:var(--muted);display:block;margin-top:2px;line-height:1.4}
.opt[aria-pressed=true]{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}
.opt[aria-pressed=true] .l{background:var(--yellow);border-color:var(--yellow);color:#fff}
.lbl{display:block;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);margin:16px 0 8px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:2px solid var(--ink)}
.seg button{background:#fff;border:0;border-right:2px solid var(--ink);padding:11px 2px;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;min-height:46px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.input{width:100%;border:2px solid var(--line);padding:12px;font-size:16px;color:var(--ink);background:#fff;border-radius:0;-webkit-appearance:none}
.input:focus,.seg button:focus-visible,.opt:focus-visible,.btn:focus-visible{outline:3px solid var(--yellow);outline-offset:1px}
textarea.input{min-height:84px;resize:vertical}
.btn{display:block;width:100%;background:var(--yellow);color:#fff;text-align:center;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:16px;font-size:15px;margin-top:22px;border:0;cursor:pointer;text-decoration:none}
.btn.dark{background:var(--ink)}
.btn.line{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.btn.small{display:inline-block;width:auto;padding:10px 16px;font-size:12px;margin:0}
.btn[disabled]{opacity:.6;cursor:wait}
.err{background:var(--badbg);color:var(--bad);padding:12px;font-size:14px;margin-top:14px}
.notice{background:var(--waitbg);color:var(--wait);padding:12px;font-size:14px;margin-bottom:14px}

/* confirmation */
.tick{width:56px;height:56px;border-radius:50%;background:var(--yellow);color:#fff;display:grid;place-items:center;font-size:30px;font-weight:800;margin:0 auto 14px}
.sum{background:#fff;border:2px solid var(--line);padding:4px 16px;margin-top:16px}
.sum .r{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.sum .r:last-child{border-bottom:0}
.sum .r span{color:var(--muted)}
.sum .r b{color:var(--ink);text-align:right}

.foot{background:#000;color:var(--yellow);text-align:center;font-size:13px;padding:20px 16px;line-height:1.7}
.foot a{color:#fff;text-decoration:none;font-weight:700}
.loading{padding:60px 20px;text-align:center;color:var(--muted)}

/* admin */
.top{background:var(--ink);color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.top b{font-size:13px;letter-spacing:2px;text-transform:uppercase}
.top .r{display:flex;gap:10px;align-items:center;font-size:13px}
.top select{background:var(--ink);color:#fff;border:1px solid #777;padding:6px}
.top button,.top a{background:none;border:1px solid #777;color:#fff;padding:6px 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;text-decoration:none}
.top .lang{position:static;border-color:#777}
.wrap{max-width:1100px;margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;border-bottom:2px solid var(--line)}
.stats div{padding:14px 0;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-size:24px;color:var(--ink)}
.stats span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.tabs{display:flex;gap:18px;padding:12px 18px 0;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);overflow-x:auto;border-bottom:1px solid var(--line)}
.tabs button{background:none;border:0;padding:0 0 9px;font:inherit;color:inherit;cursor:pointer;white-space:nowrap;letter-spacing:inherit;text-transform:inherit}
.tabs button.on{color:var(--ink);border-bottom:3px solid var(--yellow);padding-bottom:6px}
.tools{display:flex;gap:10px;padding:14px 18px;flex-wrap:wrap;align-items:center}
.tools .input{flex:1;min-width:180px;padding:9px 12px}
.guest{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:13px 18px;border-bottom:1px solid var(--line);align-items:center}
.guest b{font-size:15px;color:var(--ink)}
.guest p{font-size:12px;color:var(--muted);margin-top:2px}
.tag{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 7px;white-space:nowrap;justify-self:end}
.yes{background:var(--okbg);color:var(--ok)}.no{background:var(--badbg);color:var(--bad)}.wait{background:var(--waitbg);color:var(--wait)}
.acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.acts a,.acts button{flex:1;min-width:120px;text-align:center;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:9px 6px;text-decoration:none;cursor:pointer;background:#fff;border:2px solid var(--line);color:var(--ink)}
.acts .g{background:#25D366;border-color:#25D366;color:#fff}
.empty{padding:40px 18px;text-align:center;color:var(--muted)}
dialog{border:0;padding:0;width:min(560px,100vw);max-height:92vh;margin:auto}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog form{padding:22px}
dialog h2{text-align:left}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btnrow{display:flex;gap:10px;margin-top:20px}
.btnrow .btn{margin:0}
.log{font-size:12px;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line)}

@media (min-width:768px){
  .hero{min-height:420px;padding-top:30px}
  .hero .logo{width:190px}
  .hero .hi{margin-top:70px;font-size:18px}
  .hero h1{font-size:52px}
  .band{font-size:16px;padding:16px}
  .sec{padding:44px 30px}
  h2{font-size:20px}
  .stats b{font-size:30px}
  .guest{grid-template-columns:minmax(260px,1fr) auto auto;padding:14px 22px}
  .acts{grid-column:auto;margin:0;flex-wrap:wrap;justify-content:flex-end}
  .acts a,.acts button{min-width:0;flex:0 0 auto;padding:8px 10px}
}
.hint{font-size:12px;color:var(--muted);line-height:1.45;margin-top:5px}
.dsec{font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin-top:28px;padding-top:14px;border-top:2px solid var(--yellow)}
.fnbox{border:2px solid var(--line);padding:4px 14px 14px;margin-top:12px}
.fnbox>b{display:block;margin-top:10px;color:var(--ink)}
.check{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:10px;color:var(--ink)}
.yearbar{background:var(--waitbg);color:var(--wait);padding:10px 18px;font-size:13px}
.itable{width:100%;border-collapse:collapse;font-size:12px;margin-top:12px}
.itable th,.itable td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.itable th{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.acts .wa2{border-color:#25D366;color:#1a8f47}
.event-d{border-bottom:1px solid var(--line)}
.event-d:last-of-type{border-bottom:0}
.event-d>summary{list-style:none;cursor:pointer;border-bottom:0;grid-template-columns:62px 1fr 16px}
.event-d>summary::-webkit-details-marker{display:none}
.chev{font-size:22px;color:var(--muted);transition:transform .2s;justify-self:end}
.event-d[open] .chev{transform:rotate(90deg)}
.event-more{padding:0 0 14px 74px;font-size:14px}
.event-more p{font-size:14px;margin-bottom:10px}
.maprow{display:flex;gap:8px;flex-wrap:wrap}
/* admin header + layout (v2) */
.ahead{background:var(--ink);color:#fff;text-align:center;padding:20px 18px 18px}
.ahead-t{font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;opacity:.85}
.yearpick{display:inline-flex;flex-direction:column;align-items:center;font-size:0;margin-top:2px;position:relative}
.yearpick select{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--yellow);font-size:44px;font-weight:700;letter-spacing:-1px;padding:0 26px 0 4px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--yellow) 50%),linear-gradient(135deg,var(--yellow) 50%,transparent 50%);
  background-position:right 6px center,right 0 center;background-size:7px 7px;background-repeat:no-repeat;line-height:1.1}
.pill{-webkit-appearance:none;appearance:none;display:block;margin:12px auto 0;min-width:220px;max-width:100%;background:transparent;color:#fff;border:1px solid #888;border-radius:999px;
  padding:9px 36px;font-size:14px;font-weight:600;text-align:center;text-align-last:center;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:right 18px center,right 13px center;background-size:5px 5px;background-repeat:no-repeat}
.ahead-farm{margin-top:8px;font-size:14px;font-weight:600}
.stats{grid-template-columns:repeat(3,1fr)}
.people{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;padding:12px 18px;font-size:13px;color:var(--muted);border-bottom:2px solid var(--line)}
.people b{color:var(--ink)}
.people-h{width:100%;text-align:center;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.tools2{display:grid;gap:10px;padding:14px 18px}
.tools2 .btn{margin:0;padding:13px;font-size:13px}
.tools2 .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tools2 .input{padding:12px}
.settings{padding:26px 18px;display:grid;gap:10px;background:var(--grey);margin-top:20px}
.settings h2{margin-bottom:4px}
.settings .btn{margin:0;padding:13px;font-size:13px}
.afoot{display:flex;justify-content:space-between;align-items:center;padding:22px 18px 40px}
.afoot .lang{position:static;border-color:var(--ink)}
.afoot .lang button{color:var(--ink);width:44px}
.afoot .lang button.on{background:var(--ink);color:#fff}
.lang button{width:40px;text-align:center}
@media (min-width:768px){
  .tools2{grid-template-columns:1fr auto auto;align-items:center}
  .tools2 .input{grid-column:1/-1}
  .tools2>.btn.dark{grid-column:1/2}
  .settings{grid-template-columns:repeat(3,1fr)}
  .settings h2{grid-column:1/-1}
}

/* ---- v3: match studgamebreeders.co.za: plain sentence-case buttons, slight radius, black drop-down menu ---- */
.btn{text-transform:none;letter-spacing:0;font-weight:600;font-size:16px;border-radius:3px;color:var(--ink);padding:15px}
.btn.dark{color:#fff}
.btn.line{border-width:1px;border-color:#c9c9c9}
.btn.plain{background:none;color:var(--muted);font-weight:500}
.btn.wa{background:#25D366;color:#fff}
.btn.small{font-size:14px;padding:10px 14px}
.input,.opt,.q,.seg,.sum{border-radius:3px}
.seg{overflow:hidden}
.opt b{font-weight:600}
.lang{border-radius:3px;overflow:hidden}
.privacy{font-size:11px;line-height:1.5;color:#9a9a9a;max-width:560px;margin:14px auto 0}

.abar{background:#000;display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
.abar img{width:130px;height:auto}
.burger{background:none;border:0;width:40px;height:40px;display:grid;align-content:center;gap:5px;padding:9px;cursor:pointer}
.burger span{display:block;height:2px;background:#fff}
.burger[aria-expanded=true] span{background:var(--yellow)}
.amenu{background:#000;text-align:center;padding:4px 0 18px;border-top:1px solid #222}
.amenu>button{display:block;width:100%;background:none;border:0;color:#fff;font-size:14px;letter-spacing:2px;text-transform:uppercase;padding:13px 0;cursor:pointer}
.amenu>button:hover{color:var(--yellow)}
.amenu #lg{display:flex;justify-content:center;padding:12px 0}
.amenu #out{color:#bbb;border-top:1px solid #222;margin-top:6px}
.ahead{padding-top:16px}
.tools2 .btn{font-size:15px;padding:13px}
.tools2 .btn.line{color:var(--ink)}

.guest{display:grid;grid-template-columns:1fr auto 14px;gap:10px;align-items:center;width:100%;background:#fff;border:0;border-bottom:1px solid var(--line);
  padding:14px 18px;text-align:left;cursor:pointer;font:inherit}
.guest:active{background:var(--grey)}
.gname b{display:block;font-size:16px;color:var(--ink);font-weight:600}
.gname small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.tag{border-radius:3px;font-size:10px}
.guest .chev{font-size:22px;color:#bbb}

dialog.sheet{width:100%;max-width:520px;margin:auto auto 0;border-radius:10px 10px 0 0;padding:0}
dialog.sheet .sheet-in{padding:20px 18px calc(16px + env(safe-area-inset-bottom));display:grid;gap:10px}
dialog.sheet .btn{margin:0}
.sheet-name{text-align:center;font-weight:700;font-size:18px;color:var(--ink)}
@media (min-width:768px){
  .guest{grid-template-columns:minmax(260px,1fr) auto 14px;padding:14px 22px}
  dialog.sheet{margin:auto;border-radius:6px}
}
.amenu .lang{position:static;border-color:#666}
.amenu .lang button{width:52px;padding:8px 0}
dialog.sheet .sum .r b{max-width:62%;word-break:break-word}
dialog.sheet{max-height:92vh;overflow-y:auto}

/* ---- v4: capitals only for section headings, the yellow band and the menu; labels in plain text ---- */
.lbl,.date span,.event h3,.q h3,.stats span,.tabs,.tag,.acts a,.acts button,.top b,.top button,.top a,
.itable th,.dsec,.ahead-t,.people-h{text-transform:none;letter-spacing:0}
.lbl{font-size:13.5px;font-weight:600}
.event h3{font-size:16px}
.q h3,.dsec{font-size:16px}
.stats span,.itable th,.people-h{font-size:12px}
.date span{font-size:11px}
.tabs{font-size:14px;font-weight:600}
.tag{font-size:11.5px;font-weight:700}
.acts a,.acts button{font-size:13px;font-weight:600}
.ahead-t{font-size:14px;font-weight:600}
.hero h1,.yearpick select{letter-spacing:0}
.pill{border-radius:3px}

/* ---- Event info sections ---- */
.info-s{margin-top:26px;text-align:left}
.info-s h3{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px}
.info-s ul{margin:0;padding-left:20px}
.info-s li{margin:0 0 8px;line-height:1.5}
.info-s a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:3px;word-break:break-word}

/* ---- v5: admin pop-ups behave like app pages on a phone ---- */
html,body{touch-action:manipulation;overflow-x:hidden}           /* no double-tap zoom, no sideways drift */
.input,select.input,input[type=date].input,input[type=time].input{font-size:16px;min-width:0;max-width:100%}  /* 16px stops iOS zooming on focus */
input[type=date].input,input[type=time].input{display:block;-webkit-appearance:none;appearance:none;min-height:50px;text-align:left}
.row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body:has(dialog[open]){overflow:hidden}                            /* page behind stays still */
dialog{overscroll-behavior:contain;overflow-x:hidden}
dialog form{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
@media (max-width:700px){
  dialog:not(.sheet){width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;overflow-y:auto}
  dialog:not(.sheet) form{padding:0 18px calc(24px + env(safe-area-inset-bottom));min-height:100%}
  dialog:not(.sheet) .btnrow{position:sticky;bottom:0;background:#fff;margin:20px -18px 0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
}

/* Event details list */
.evhead{position:sticky;top:0;z-index:2;background:#fff;display:flex;align-items:center;justify-content:space-between;
  margin:0 -22px;padding:calc(10px + env(safe-area-inset-top)) 22px 10px;border-bottom:1px solid var(--line)}
@media (max-width:700px){.evhead{margin:0 -18px;padding-left:18px;padding-right:18px}}
.evhead h2{margin:0;font-size:17px;text-transform:none;letter-spacing:0;text-align:left}
.evx,.evback{background:none;border:0;font:inherit;font-size:17px;color:var(--ink);padding:8px 0;cursor:pointer}
.evx{font-size:20px;padding:8px 4px}
.evback{font-weight:600}
.evgroup{font-size:13px;color:var(--muted);margin:24px 0 6px}
.evlist{border-top:1px solid var(--line)}
.evrow{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;background:#fff;border:0;border-bottom:1px solid var(--line);
  padding:13px 0;text-align:left;font:inherit;cursor:pointer;color:var(--text)}
.evrow:active{background:var(--grey)}
.evrow b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.evrow small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.evrow .chev{font-size:22px;color:#bbb}
.check.big{font-size:16px;padding:8px 0;gap:12px}
.check.big input{width:22px;height:22px;accent-color:var(--ink)}
dialog h2+.lbl,dialog .evhead+h2{margin-top:18px}
dialog h2{text-transform:none;letter-spacing:0;font-size:20px}
.evx:focus:not(:focus-visible),.evback:focus:not(:focus-visible){outline:none}

/* ---- v6: contrast, familiar radio choices, calmer type (design review 4 Nov) ---- */
:root{--muted:#5E5E5E}
.band{color:var(--ink);text-transform:none;letter-spacing:0;font-weight:700;font-size:16px}
.band small{letter-spacing:0;font-size:13px;font-weight:500}
h2{text-transform:none;letter-spacing:0;font-size:20px}
.fine,.hint,.when,.event p,.privacy{color:var(--muted)}
.tick{color:var(--ink)}
.jump{background:#fff;padding:16px 18px 0}
.jump .btn{margin:0 auto;max-width:560px}
/* A/B squares become radio circles */
.opt{grid-template-columns:26px 1fr}
.opt .l{width:24px;height:24px;border-radius:50%;border:2px solid #8a8a8a;background:#fff;font-size:0}
.opt[aria-pressed=true] .l{border-color:var(--ink);background:#fff;box-shadow:inset 0 0 0 5px #fff;background-color:var(--ink)}
.opt[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* admin: a smaller year picker, clearer totals */
.yearpick select{font-size:30px}
.stats-cap{font-size:13px;color:var(--muted);text-align:center;padding:10px 0 0;background:#fff}
.nylist{margin:6px 0 0;padding-left:18px}.nylist li{margin:4px 0}
.ahead{padding-top:10px;padding-bottom:12px}
.ahead .yearpick{margin-top:0}
.ahead .pill{margin-top:8px}