:root{
  --green-950:#0f2419;
  --green-900:#14301f;
  --green-850:#173925;
  --green-800:#1c4429;
  --green-700:#245536;
  --line:#2c4c39;
  --gold:#cBA351;
  --gold-bright:#e2c268;
  --cream:#f3efe4;
  --muted:#9db3a4;
  --red:#c0413b;
  --red-dark:#a5322d;
  --good:#6fce8f;
  --bad:#e6866f;
  --card:#173525;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--green-950);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}
h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif;}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px 80px;}

/* Top bar */
header.top{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,var(--green-900),var(--green-950));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.topinner{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 20px;}
.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:20px;letter-spacing:.3px;}
.brand .mark{color:var(--gold-bright);font-weight:700}
.brand .sub{color:var(--muted);font-size:12px;font-family:-apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding-left:10px;margin-left:6px;border-left:1px solid var(--line)}
.roleswitch{margin-left:auto;display:flex;gap:6px;background:var(--green-950);border:1px solid var(--line);border-radius:999px;padding:4px}
.roleswitch button{
  border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:600;
  padding:8px 16px;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.roleswitch button.active{background:var(--gold);color:#20140a}
.roleswitch button:hover:not(.active){color:var(--cream)}

.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.banner{
  background:linear-gradient(180deg,var(--green-900),var(--green-950));
  border-bottom:1px solid var(--line);padding:26px 0 22px;margin-bottom:26px;
}
.banner .wrap{padding-bottom:0}
.banner h1{font-size:30px;color:var(--gold-bright);font-weight:400}
.banner p{color:var(--muted);margin-top:6px;max-width:640px}
.rolehint{font-size:12px;color:var(--muted);background:var(--green-850);border:1px solid var(--line);
  display:inline-block;padding:4px 11px;border-radius:999px;margin-bottom:14px;letter-spacing:.04em}

.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:1.15fr .85fr}
@media(max-width:820px){.cols-2{grid-template-columns:1fr}.roleswitch button{padding:8px 11px}}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.card h2{font-size:18px;color:var(--cream);margin-bottom:4px;font-weight:400}
.card h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-family:-apple-system,sans-serif;font-weight:700}
.card .desc{color:var(--muted);font-size:13px;margin-bottom:16px}

label,.flabel{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;letter-spacing:.03em}
input,select{
  width:100%;background:var(--green-950);border:1px solid var(--line);color:var(--cream);
  border-radius:9px;padding:10px 12px;font-size:14px;outline:none;transition:.15s;
}
/* Every dropdown draws one cream chevron of its own, inset from the right edge, and its words stop before it.
   It sets no background shorthand, so the fill above stays. */
select{
  -webkit-appearance:none;appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f3efe4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
}
/* High contrast can paint the chevron into the field's colour, so there the browser draws its own arrow. */
@media (forced-colors:active){select{-webkit-appearance:auto;appearance:auto;background-image:none}}
input:focus,select:focus{border-color:var(--gold)}
/* A tick box or a radio has no border to turn gold, so the keyboard's focus rings it as a pill's does and a mouse
   press draws none. A refused tick's red ring weighs the same and comes later, so the red holds. */
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.field{margin-bottom:14px}
.row{display:flex;gap:12px}
.row>*{flex:1}

button.btn{
  background:var(--gold);color:#20140a;border:0;border-radius:9px;padding:11px 18px;
  font-size:14px;font-weight:700;cursor:pointer;transition:.15s;
}
button.btn:hover{background:var(--gold-bright)}
button.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--cream)}
button.btn.ghost:hover{border-color:var(--gold);color:var(--gold-bright)}
button.btn.red{background:var(--red);color:#fff}
button.btn.red:hover{background:var(--red-dark)}
button.btn.sm{padding:7px 12px;font-size:12.5px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--green-800);color:var(--gold-bright);border:1px solid var(--line)}
.pill.live{background:rgba(111,206,143,.14);color:var(--good);border-color:rgba(111,206,143,.3)}
.pill.live::before{content:"●";font-size:9px;margin-right:5px;vertical-align:1px}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 10px;font-size:13.5px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:center;font-variant-numeric:tabular-nums}

.tourney-item{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);
  border-radius:11px;margin-bottom:10px;background:var(--green-850);cursor:pointer;transition:.15s}
.tourney-item:hover{border-color:var(--gold)}
.tourney-item.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.tourney-item .code{font-family:Georgia,serif;font-size:20px;color:var(--gold-bright);letter-spacing:2px}
.tourney-item .meta{flex:1}
.tourney-item .meta b{font-size:15px;font-weight:600;color:var(--cream)}
.tourney-item .meta span{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* QR */
.qrbox{background:#fff;border-radius:12px;padding:14px;width:180px;height:180px;display:flex;align-items:center;justify-content:center;margin:0 auto}
.qrbox svg{width:100%;height:100%}
.codebig{font-family:Georgia,serif;font-size:34px;letter-spacing:6px;color:var(--gold-bright);text-align:center;
  border:1px solid var(--line);border-radius:11px;padding:12px;background:var(--green-950);margin:14px 0}

/* Scorecard */
.holegrid{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;margin-top:6px}
@media(max-width:640px){.holegrid{grid-template-columns:repeat(3,1fr)}}
.hole{background:var(--green-950);border:1px solid var(--line);border-radius:10px;padding:8px 6px;text-align:center}
.hole .hn{font-size:11px;color:var(--muted)}
.hole .par{font-size:10px;color:var(--gold)}
.hole input{width:100%;text-align:center;font-size:18px;padding:6px 2px;margin-top:5px;font-variant-numeric:tabular-nums}
.stepper{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:4px}

.lb-row td{padding:12px 10px}
.lb-pos{font-family:Georgia,serif;font-size:18px;color:var(--gold-bright);width:44px}
.lb-name b{font-size:15px}
.lb-name span{display:block;color:var(--muted);font-size:12px}
.score-neg{color:var(--good);font-weight:700}
.score-pos{color:var(--bad);font-weight:700}
.score-e{color:var(--cream);font-weight:700}
.thru{color:var(--muted);font-variant-numeric:tabular-nums}
.flash{animation:flash 1s ease}
@keyframes flash{0%{background:rgba(226,194,104,.22)}100%{background:transparent}}

.note{background:var(--green-850);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:8px;padding:12px 14px;font-size:13px;color:var(--muted);margin-top:16px}
.note b{color:var(--cream)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.kpi{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.kpi .k{background:var(--green-850);border:1px solid var(--line);border-radius:11px;padding:12px 16px;flex:1;min-width:120px}
.kpi .k .v{font-family:Georgia,serif;font-size:24px;color:var(--gold-bright)}
.kpi .k .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(calc(100% + 32px));
  width:max-content;max-width:calc(100vw - 32px);text-align:center;visibility:hidden;pointer-events:none;
  background:var(--gold);color:#20140a;padding:12px 22px;border-radius:22px;font-weight:700;font-size:14px;
  transition:.3s;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.toast.show{transform:translateX(-50%) translateY(0);visibility:visible;pointer-events:auto}
.foot{color:var(--muted);font-size:12px;text-align:center;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.divider{height:1px;background:var(--line);margin:18px 0}
.subtabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.subtabs button{background:var(--green-850);border:1px solid var(--line);color:var(--muted);padding:8px 14px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:600}
.subtabs button.active{background:var(--green-700);color:var(--gold-bright);border-color:var(--gold)}
.playerchip{display:inline-flex;align-items:center;gap:8px;background:var(--green-950);border:1px solid var(--line);border-radius:999px;padding:6px 12px;margin:0 6px 6px 0;font-size:13px;cursor:pointer}
.playerchip:hover{border-color:var(--gold)}
.playerchip.sel{border-color:var(--gold);color:var(--gold-bright)}
small.hint{color:var(--muted);font-size:11.5px}

/* ---- admin login + settings ---- */
.authwrap{max-width:520px;margin:0 auto}
.authsteps{display:flex;gap:0;margin-bottom:22px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.authsteps div{flex:1;text-align:center;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 4px;color:var(--muted);background:var(--green-950);border-right:1px solid var(--line)}
.authsteps div:last-child{border-right:0}
.authsteps div.on{background:var(--gold);color:#20140a}
.authsteps div.done{background:var(--green-800);color:var(--gold-bright)}
.authpane{display:none}
.authpane.on{display:block;animation:fade .25s ease}
.planbox{border:1px solid var(--gold);border-radius:12px;padding:22px;background:linear-gradient(180deg,rgba(203,163,81,.09),var(--card))}
.planprice{font-family:Georgia,serif;font-size:44px;color:var(--cream);line-height:1}
.planprice small{font-family:-apple-system,sans-serif;font-size:14px;color:var(--muted)}
.planlist{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.planlist li{font-size:13px;color:var(--muted);padding:6px 0 6px 22px;position:relative}
.planlist li::before{content:'\2713';position:absolute;left:0;color:var(--good);font-weight:700}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
.setrow .lab{font-size:13.5px;color:var(--cream);font-weight:600}
.setrow .val{font-size:13px;color:var(--muted);text-align:right}
.badge-ok{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:rgba(111,206,143,.14);color:var(--good);border:1px solid rgba(111,206,143,.4)}
.danger{border-color:rgba(192,65,59,.5)!important}
.btn.warn{background:transparent;border:1px solid var(--red);color:var(--bad)}
.ssobtn{width:100%;background:var(--green-850);border:1px solid var(--line);color:var(--cream);
  border-radius:9px;padding:12px;font-size:13.5px;font-weight:600;cursor:pointer;margin-bottom:10px}
.ssobtn:hover{border-color:var(--gold)}

/* ---- portal additions ---- */
/* Important, so hidden beats any later display rule; to show a node a script clears hidden. */
[hidden]{display:none !important}
.brand .logo{height:22px;width:auto;display:block}
/* The brand words never wrap at any width; the director name is the part that gives way. */
.brand{white-space:nowrap}
/* The portal's brand is a link home that looks as the plain brand on sign-in does; the keyboard gets a gold ring. */
.brand{color:inherit;text-decoration:none}
.brand:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.topinner .who{margin-left:auto;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.topinner .who+.roleswitch{margin-left:0}
/* Until /me answers only the brand shows, so a signed-out visitor never sees the portal flash by.
   The nav keeps its space while hidden, so the top bar does not change height when boot ends. */
body.booting .view{display:none}
body.booting .roleswitch,body.booting #me-name{visibility:hidden}
/* The sign-in page asks /me first, so a signed-in director never sees the email form flash by. */
body.booting .authpane{display:none}
.booterr{max-width:1120px;margin:40px auto 0;padding:0 20px;color:var(--bad);font-size:14px}
.roleswitch a{display:inline-block;text-decoration:none;color:var(--muted);font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;transition:.15s;white-space:nowrap}
.roleswitch a.active{background:var(--gold);color:#20140a}
.roleswitch a:hover:not(.active){color:var(--cream)}
a.btn{display:inline-block;text-decoration:none;text-align:center;background:var(--gold);color:#20140a;border:0;border-radius:9px;padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
a.btn:hover{background:var(--gold-bright)}
a.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--cream)}
a.btn.ghost:hover{border-color:var(--gold);color:var(--gold-bright)}
a.btn.sm{padding:7px 12px;font-size:12.5px}
button.btn:disabled{opacity:.5;cursor:default}
button.btn:disabled:hover{background:var(--gold)}
button.btn.ghost:disabled:hover{background:transparent;border-color:var(--line);color:var(--cream)}
button.btn.warn:hover{background:rgba(192,65,59,.12)}
button.btn.warn:disabled:hover{background:transparent}
input:disabled,select:disabled,input[readonly]{opacity:.7}
input[type="date"]{color-scheme:dark}
.pill.final{background:var(--green-800);color:var(--muted);border-color:var(--line)}
.pill.joined,.pill.sent{background:rgba(111,206,143,.14);color:var(--good);border-color:rgba(111,206,143,.3)}
.pill.changed,.pill.scorer{background:rgba(203,163,81,.14);color:var(--gold-bright);border-color:rgba(203,163,81,.45)}
.pill.failed{background:rgba(192,65,59,.16);color:var(--bad);border-color:rgba(192,65,59,.5)}
.tabpane{display:none}
.tabpane.active{display:block;animation:fade .25s ease}
#view-event[data-mode="new"] #ev-header,#view-event[data-mode="new"] #eventTabs,#view-event[data-mode="new"] .evdelete{display:none}
#view-event[data-mode="new"] .wrap{padding-top:24px}
.evhead{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;padding:24px 0 18px}
.evhead h1{font-size:26px;color:var(--gold-bright);font-weight:400;line-height:1.2}
.evhead .desc{color:var(--muted);font-size:13px;margin-top:4px}
.evtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.evcode{display:inline-flex;align-items:center;gap:8px}
.evcode .code{font-family:Georgia,serif;font-size:20px;color:var(--gold-bright);letter-spacing:2px}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.cardhead h3{margin-bottom:0}
.cardhead .btnrow{margin-top:0}
.narrow{max-width:760px}
.empty{color:var(--muted);font-size:13px;padding:14px 0}
.err{color:var(--bad);font-size:12.5px;margin-top:8px}
.err:empty{display:none}
/* A field the check refuses. It weighs the same as input:focus and comes later, so the red holds while the
   field has the cursor; no other input or .hole input rule sets a border. A tick box and the start group
   draw no border of their own, so they take an outline. */
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
input[type="checkbox"][aria-invalid="true"]{box-shadow:none;outline:2px solid var(--red);outline-offset:2px}
[role="radiogroup"][aria-invalid="true"]{outline:1px solid var(--red);outline-offset:6px;border-radius:8px}
.progress{color:var(--muted);font-size:12.5px;margin-bottom:10px}
.progress:empty{display:none}
.updated{color:var(--muted);font-size:12px;white-space:nowrap}
.choice{display:flex;align-items:flex-start;gap:9px;margin:0 0 8px;font-size:13px;color:var(--cream);cursor:pointer;letter-spacing:0}
.choice input{width:auto;margin-top:3px;flex:0 0 auto}
.note.tight{margin-top:0}
/* A note under a field, such as a course short of 18 holes: the gold-edged note at the size of the error line,
   gone while empty. It warns, so it never takes the error red. */
.note.under{margin-top:8px;padding:8px 12px;font-size:12.5px}
.note:empty{display:none}
.note span{display:block}
/* Where a picked course is, a quiet line right under its name as the app shows it, above any error or note
   and gone while empty. A long place wraps rather than widening the form. */
.place{color:var(--muted);font-size:12.5px;margin-top:6px;overflow-wrap:anywhere}
.place:empty{display:none}
.dirwrap{position:relative}
.dirlist{position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:4px;background:var(--green-900);border:1px solid var(--gold);border-radius:9px;max-height:240px;overflow-y:auto;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.dirlist:empty{display:none}
.dirlist>*{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--cream);padding:9px 12px;font-size:13px;cursor:pointer}
.dirlist>*:last-child{border-bottom:0}
.dirlist>*:hover,.dirlist>*.sel{background:var(--green-800)}
.dirlist span{display:block;color:var(--muted);font-size:11.5px}
.hole .lbl{font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:6px 0 0}
.hole input{font-size:15px;padding:5px 2px;margin-top:2px}
.teamcard,.groupcard{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;background:var(--green-950)}
.teamcard .thead,.groupcard .ghead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
/* The name rule reaches the head's own input only. Written for every input in the head, it gave each skins tick
   box in a team's head a 140 px floor, which pushed a phone's page sideways. */
.teamcard .thead>input,.groupcard .ghead>input{flex:1;min-width:140px;font-weight:600}
/* A team head with skins ticks gives the name its own line and the ticks the next one, up to Remove team; on a
   small phone Remove team goes under them, and the two ticks go one under the other if even that is too tight. */
.teamcard .thead:has(>.tick)>input{flex-basis:100%}
.teamcard .thead>.tick{flex:1 1 auto;flex-wrap:wrap;row-gap:4px}
.teamcard .thead select,.groupcard .ghead select,.teamcard .thead .btn,.groupcard .ghead .btn{width:auto;flex:0 0 auto}
.teamcard .tline{color:var(--muted);font-size:11.5px;margin:-4px 0 8px}
/* Why a team name was refused, tucked under the head as the handicap line is. */
.teamcard .thead + .err{margin:-4px 0 8px}
.prow{padding:6px 0;border-top:1px solid var(--line)}
.prow .row{align-items:center}
.prow .row input{min-width:0}
.prow .row input.idx{max-width:72px}
.prow .row select{width:auto;flex:0 0 auto;font-size:12px;padding:6px 30px 6px 8px;background-position:right 10px center}
/* The handicap words, any out pill, the joined pill and Release keep apart, and wrap under the words on a phone. */
.prow .line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--muted);font-size:11.5px;margin-top:4px}
.prow .contact{margin-top:5px;gap:6px}
.prow .contact input{font-size:12px;padding:7px 10px}
/* The add-golfer form's index and email share a row while each can be 170 px, room for an address; below that
   they stack, each at the card's full width with its error line under it. */
#golferForm .row{flex-wrap:wrap;row-gap:0}
#golferForm .row>*{flex:1 1 170px}
.tick{display:flex;gap:8px;align-items:center;padding-left:8px;border-left:1px solid var(--line);font-size:10.5px;color:var(--muted);flex:0 0 auto}
.tick label{display:flex;align-items:center;gap:3px;margin:0;cursor:pointer;font-size:10.5px}
.tick input{width:auto}
.member{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.member .mname{flex:1;min-width:140px}
.member .mname span{display:block;color:var(--muted);font-size:11.5px}
/* Move to names a group's course and time, so it shrinks with its row and cuts its words inside itself. */
.member select{width:auto;max-width:100%;min-width:0;font-size:12px;padding:6px 30px 6px 8px;background-position:right 10px center}
.member[draggable="true"]{cursor:grab}
.member.dragging{opacity:.4}
.groupcard.over{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
/* A control that saved on its own gets a brief Saved tick: a mint pill the script places against these rows,
   on a field's top edge by its right end, or over a tick box's label just right of the box. It is out of the
   flow, so nothing in the row moves, and clicks pass through it. It fades in and out over the 1.5 seconds it
   stays; with motion reduced it simply goes. */
.prow,.member,.teamcard .thead,.groupcard .ghead{position:relative}
.saved{position:absolute;z-index:2;transform:translate(-100%,-50%);margin-left:-8px;pointer-events:none;white-space:nowrap;
  font-size:10.5px;font-weight:700;line-height:1.3;letter-spacing:.03em;color:var(--good);background:var(--green-950);
  border:1px solid rgba(111,206,143,.4);border-radius:999px;padding:1px 7px;animation:savedfade 1.5s ease forwards}
.saved.onlabel{transform:translateY(-50%);margin-left:2px;padding:1px 5px}
.saved::before{content:'\2713';margin-right:4px}
@keyframes savedfade{0%{opacity:0}10%{opacity:1}70%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.saved{animation:none}}
/* Read out by a screen reader, never seen. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.qrcard{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:11px;padding:10px;margin-bottom:8px;background:var(--green-850)}
.qrcard img{background:#fff;border-radius:8px;padding:5px;width:58px;height:58px;flex:0 0 auto}
/* A long address or app username breaks where it must, so on a small phone it cannot hold the Tags cards, and
   the page with them, wider than the screen. */
.qrcard .qmeta{flex:1;min-width:0;overflow-wrap:anywhere}
.qrcard .qmeta b{font-size:14px}
.qrcard .qmeta .line{color:var(--muted);font-size:11.5px}
.qrcard .qacts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:5px}
/* The skins strip sets nine holes to a row, the back nine under the front, and each cell takes its share of the
   card, so no hole hides behind a scrollbar; a long winner's name ends in an ellipsis inside its cell. */
.strip{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;padding-bottom:6px;margin-bottom:14px}
.strip .h{min-width:0;text-align:center;padding:7px 4px;border:1px solid var(--line);border-radius:9px}
.strip .h.won{border-color:var(--gold);background:rgba(226,194,104,.08)}
.strip .h div{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip .h .w{font-size:12px;color:var(--gold-bright);font-weight:700}
.strip .h .t{font-size:12px;color:var(--muted)}
.tourney-item .pastdue{display:block;color:var(--bad);font-size:12px;margin-top:4px}
/* The Groups tab offers each automatic setup as an option card, one button from edge to edge: a gold icon, its
   title, a line that says what it does (a hover tip never shows on a phone) and a Preview cue, so it reads as a
   thing to tap. Each set sits under a small label in the table-heading style. A card is never narrower than
   260 px or than the card around it, so a phone stacks them in one column and nothing scrolls sideways. The card
   whose preview is open stays edged in gold. */
.gsection{margin-bottom:18px}
.glabel{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.glabel .gquiet{font-weight:400;letter-spacing:.02em;text-transform:none;opacity:.85}
.gopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:10px}
.gopt{display:flex;align-items:center;gap:12px;width:100%;min-width:0;text-align:left;font:inherit;color:var(--cream);
  background:var(--green-950);border:1px solid var(--line);border-radius:11px;padding:12px 14px;cursor:pointer;transition:.15s}
.gopt:hover{border-color:var(--gold);background:var(--green-850)}
.gopt:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)}
.gopt[aria-expanded="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:var(--green-850)}
.gicon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;
  color:var(--gold-bright);background:rgba(203,163,81,.12);border:1px solid rgba(203,163,81,.35)}
.gicon svg{display:block;width:22px;height:22px}
.gtext{flex:1;min-width:0}
.gtext b{display:block;font-size:14px;font-weight:700;color:var(--cream)}
.gtext small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--muted)}
.gcue{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--gold);white-space:nowrap;transition:.15s}
.gopt:hover .gcue,.gopt:focus-visible .gcue{color:var(--gold-bright)}
/* On a small phone the cue would squeeze the title and its line into a narrow column, so it moves under the line,
   indented by the icon and the gap to sit in line with the title. The card is still the one button. */
@media(max-width:480px){
  .gopt{flex-wrap:wrap;row-gap:6px}
  .gcue{flex:1 0 100%;padding-left:52px}
}
/* The group list's own label carries the count; the line under it says what each card shows. Add an empty group
   closes the list: a quiet dashed button across its whole width that lights gold like the cards. */
.glisthint{display:block;margin:-4px 0 12px;line-height:1.4}
/* Over a course with no groups and nothing to print, the line keeps its room but shows and reads nothing. */
.glisthint.blank{visibility:hidden}
.gadd{display:block;width:100%;padding:12px;font:inherit;font-size:13.5px;font-weight:600;color:var(--gold);
  background:transparent;border:1px dashed rgba(203,163,81,.5);border-radius:10px;cursor:pointer;transition:.15s}
.gadd:hover{border-color:var(--gold);color:var(--gold-bright);background:rgba(203,163,81,.06)}
.gadd:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gadd:disabled{opacity:.5;cursor:default}
.gadd:disabled:hover{border-color:rgba(203,163,81,.5);color:var(--gold);background:transparent}
/* What an automatic change will do, said in the page before it runs: the gold-edged note panel right under the
   section whose card opened it, a plain heading the focus lands on, a short dotted list, then the change's own
   gold button and a ghost Cancel, which share the row on a phone. It fades in unless motion is unwelcome. */
.gpreview{background:var(--green-850);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;
  padding:14px 16px;margin-top:10px;animation:fade .2s ease}
.gpreview h4{font-size:15px;line-height:1.35;color:var(--cream);font-weight:700;margin-bottom:8px}
.gpreview h4:focus{outline:none}
.gpreview h4:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.gpreview ul{list-style:none}
.gpreview li{position:relative;padding:3px 0 3px 16px;font-size:13px;color:var(--muted)}
.gpreview li::before{content:'';position:absolute;left:3px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.gpreview .btnrow{margin-top:12px}
@media(prefers-reduced-motion:reduce){.gpreview{animation:none}}
@media(max-width:640px){.gpreview .btnrow .btn{flex:1 1 0}}
/* ---- Live controls ---- */
/* The status card sits above the Live pills: the status and its line on the left, the one control the status
   allows on the right. On a phone the control drops under the line at full width. */
.livestatus{margin-bottom:18px}
.livestatus>.lsrow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 18px}
.livestatus .lstext{flex:1 1 260px;min-width:0}
.livestatus .lsline{display:block;margin-top:8px;font-size:14px;color:var(--cream);overflow-wrap:anywhere}
.livestatus .pastdue{display:block;margin-top:4px;color:var(--bad);font-size:12.5px}
.livestatus .lshint{display:block;margin-top:4px;line-height:1.4}
.livestatus .lsacts{flex:0 0 auto}
.livestatus>.note,.livestatus>.gpreview{margin-top:14px}
@media(max-width:480px){
  .livestatus .lsacts{flex:1 1 100%}
  .livestatus .lsacts>.btn{width:100%}
}
/* A button whose panel is open stays ringed in gold, as an open option card does. */
button.btn[aria-expanded="true"]{outline:2px solid var(--gold-bright);outline-offset:2px}
/* A panel that asks first can carry a sentence before its list and one after it. */
.gpreview>p{font-size:13px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.gpreview>p+ul,.gpreview>ul+p{margin-top:6px}
.gpreview li,.gpreview>h4{overflow-wrap:anywhere}
/* A pill that waits for a write still out reads as shut. */
.subtabs button:disabled{opacity:.5;cursor:default}
/* The Live groups, two or three across on a wide screen and one on a phone. Each card says who keeps it, how far
   the group has played and what needs the director. */
.livegroups{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px;align-items:start}
.livegroups>.groupcard{margin-bottom:0;min-width:0}
.groupcard .gtitle{flex:1 1 auto;min-width:0;font-size:14px;font-weight:700;color:var(--cream);overflow-wrap:anywhere}
.groupcard>.gstate{margin:-2px 0 10px;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
/* The scorer pick is a label holding its select, so the word Scorer shows on a phone where no hover tip does. */
.groupcard>.gscorer{position:relative;display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;letter-spacing:.03em}
.groupcard>.gscorer>select{flex:1 1 auto;width:auto;min-width:0;font-size:12.5px;padding:7px 30px 7px 9px;background-position:right 10px center}
.groupcard>.ghint{display:block;margin:-2px 0 8px;line-height:1.4}
.groupcard>.galert{margin:0 0 8px}
/* A scorer pick can carry "(not joined yet)", so on the Groups tab a head select shrinks to its card rather than
   push a phone page sideways with a long name. */
.groupcard>.ghead>select{max-width:100%}
.livegroups .mname,.groupcard>.member .pill,#lg-unseated>.member .mname,#lg-unseated>.member .pill{overflow-wrap:anywhere}
.groupcard>.member .pill,#lg-unseated>.member .pill{max-width:100%}
/* A golfer who is out of the event: a quiet dashed pill, never the error red, since the director chose it. */
.pill.out{background:transparent;color:var(--muted);border-color:var(--line);border-style:dashed}
/* The pane's heading holds the focus a released seat's button gave up: the gold ring from the keyboard only. */
#lg-title:focus{outline:none}
#lg-title:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
/* What the picked hole holds now, on a line that keeps its height, so a new pick never moves Save. */
.fxnow{min-height:19px;margin:-2px 0 12px;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
/* The round has its own line over the picks, and the picks wrap so each select is as wide as its longest choice;
   the score's field starts small. */
.fxround>select{width:auto;max-width:100%}
.fxrow{flex-wrap:wrap}
.fxrow>.field{flex:1 1 auto;min-width:0}
.fxrow>.field:last-child{flex-basis:110px}
/* The golfer panel: each field is the frame its Saved tick sits on. */
.gpform>.field,.gpform>.row>.field{position:relative}
.gpform>.row>.field>.hint{display:block;margin-top:6px;line-height:1.4}
.gpacts{display:grid;gap:10px;margin:2px 0 4px}
.gpacts>.gpact{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.gpact>.hint{flex:1 1 220px;min-width:0;line-height:1.4}
.gpact>.pill{max-width:100%;overflow-wrap:anywhere}
/* A panel that asks first sits flush under the field row, the Tags buttons or the tag card it belongs to. */
.gpform>.gpreview{margin:0 0 14px}
#tab-tags .btnrow+.gpreview{margin:0 0 14px}
#playerQRs>.gpreview{margin:0 0 8px}
/* The roster's status select sits beside Remove at its own width. */
.prow .btnrow>select.stsel{width:auto;flex:0 0 auto;font-size:12px;padding:6px 30px 6px 8px;background-position:right 10px center}
/* One change a row: when, who, then what. A phone keeps when and who on one line and puts what under them. */
.chlist>.chrow{display:grid;grid-template-columns:128px minmax(0,200px) minmax(0,1fr);gap:4px 14px;padding:10px 0;
  border-top:1px solid var(--line);font-size:13px;line-height:1.4}
.chrow>.chtime{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.chrow>.chwho,.chrow>.chwhat{min-width:0;overflow-wrap:anywhere}
.chrow>.chwhat{color:var(--muted)}
.chrow>.chwhat>b{color:var(--cream);font-weight:600}
.cardhead>.choice{margin:0}
.chmore{margin-top:12px}
@media(max-width:640px){
  .chlist>.chrow{grid-template-columns:auto minmax(0,1fr);gap:2px 10px}
  .chrow>.chwhat{grid-column:1/-1}
}
/* The write-up box takes the field look and is tall enough for about 150 words; it stretches only downward. */
textarea{width:100%;min-height:210px;resize:vertical;background:var(--green-950);border:1px solid var(--line);color:var(--cream);
  border-radius:9px;padding:12px 14px;font:inherit;font-size:14px;line-height:1.55;outline:none;transition:.15s}
textarea:focus{border-color:var(--gold)}
textarea[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
textarea:disabled,textarea[readonly]{opacity:.7}
.wukinds{margin-bottom:6px}
.wuhint{display:block;margin-bottom:12px}
/* The box's frame holds its Saved tick. */
.wufield{position:relative;margin-top:12px}
.wumeta{margin:-6px 0 10px;color:var(--muted);font-size:12.5px}
.wumeta:empty{display:none}
.wusubject{margin-bottom:10px;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.wusend>.hint{display:block;margin-top:6px;line-height:1.4}
.wusent{margin-top:10px;color:var(--muted);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.wusent>.bad{color:var(--bad)}
.wustopped>.btn{margin-top:8px}
/* An optional block of the setup form, Flights, in the skins box's frame. */
.optbox{border:1px solid var(--line);border-radius:11px;padding:14px;margin-bottom:14px;background:var(--green-950)}
.optbox>.optboxhead{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.optboxhead>b{font-size:13.5px;color:var(--gold-bright)}
.optboxhead>.choice{margin:0;font-size:12.5px}
/* A flight per row: its name takes the room, the champions pick and the order buttons keep their width, and on a
   phone the controls wrap under the name. */
.flightlist{margin-bottom:10px}
.flightrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.flightrow>input{flex:1 1 150px;min-width:0;font-weight:600}
.flightrow>.pill,.flightrow>.btn{flex:0 0 auto}
.flightrow>.fltitles{display:flex;align-items:center;gap:6px;margin:0;flex:0 0 auto}
.fltitles>select{width:auto;font-size:12.5px;padding:7px 30px 7px 9px;background-position:right 10px center}
.flightrow>.err{flex:1 1 100%;margin-top:0}
/* Tees by flight: one select per flight, two or more across on a wide screen and one on a phone. */
.ftees{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:10px}
.ftees>.ftee{min-width:0}
.ftee>label{overflow-wrap:anywhere}
.ftee>.hint{display:block;margin-top:5px;line-height:1.4}
.pairtick{margin:4px 0 0}
/* The roster's flight headings take the Groups tab's label; the flight select sits in the team head. */
.glabel.flighthead{margin:16px 0 8px}
#teamList>.glabel.flighthead:first-child{margin-top:4px}
.teamcard .thead>select.flsel{font-size:12px;padding:6px 30px 6px 8px;background-position:right 10px center;max-width:100%}
/* Skins ticks per round: a column per round and a row per pool, small enough for a phone. */
.rtickwrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:8px}
.rticks{display:grid;grid-template-columns:auto repeat(4,32px);align-items:center;gap:2px 4px;font-size:10.5px;color:var(--muted)}
.rticks>.rth{text-align:center;font-weight:700;letter-spacing:.04em}
.rticks>.rtc{display:flex;justify-content:center;margin:0}
.rtc>input{width:auto}
.rtickacts{display:flex;flex-wrap:wrap;gap:6px}
.prow>.tickline{margin-top:4px}
.teamcard>.tickline{margin:-4px 0 8px}
/* The golfer panel's skins for the round in view: the ticks, then the copy buttons. */
.gpskinsrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.gpskinsrow>.tick{padding-left:0;border-left:0;font-size:12px}
.gpskinsrow>.tick label{font-size:12px}
.gpform>.gpskins{position:relative}
/* A substitute's own rounds: the Saved tick sits against the block. */
.gpform>.gpplays{position:relative}
/* ---- Groups per course and flight ---- */
/* The course filter on a split round: pills like the round strip's, each course with its group count. */
.gfilter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.gfilter>button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:9px;
  padding:6px 11px;font-size:12.5px;font-weight:600;line-height:1.25;text-align:left;cursor:pointer;transition:.15s;
  max-width:100%;overflow-wrap:anywhere}
.gfilter>button:hover{border-color:var(--gold);color:var(--cream)}
.gfilter>button[aria-pressed="true"]{background:var(--green-850);border-color:var(--gold);
  color:var(--gold-bright);box-shadow:0 0 0 1px var(--gold) inset}
.gfilter>button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gfilter>button>.gcount{margin-left:6px;font-weight:400;opacity:.85;font-variant-numeric:tabular-nums}
/* A group's flight under its head; a group of two flights shows both, with its warning. */
.groupcard>.gchips{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 8px}
.groupcard>.gchips>.pill{max-width:100%;overflow-wrap:anywhere}
.pill.flight{background:transparent;color:var(--gold-bright);border-color:rgba(203,163,81,.45)}
/* ---- Copy, the afternoon and tee times on the Groups tab ---- */
/* A section's fields side by side, each never under 150 px, stacking on a phone. */
.gfields{display:flex;flex-wrap:wrap;gap:10px 12px;margin:0 0 10px}
.gfields>.field{flex:1 1 150px;min-width:0;max-width:320px;margin-bottom:0}
.gfields>.field>.hint{display:block;margin-top:5px;line-height:1.4}
input[type="time"]{color-scheme:dark;font-variant-numeric:tabular-nums}
.note.tight+.gsection{margin-top:14px}
/* The list label and Print pairings share a line; the button drops under the label on a small phone. */
.glistbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-bottom:8px}
.glistbar>.glabel{margin-bottom:0}
/* A group's tee time leads its head at one width, so the times read down the list as a column. */
.groupcard .ghead>input.gtime{flex:0 0 118px;min-width:0;font-weight:700;color:var(--gold-bright)}
/* ---- Pairing by the standings ---- */
/* A note that carries its own button: the words, then the button beside them, or under them on a phone. */
.note.withact{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px}
.note.withact>.ntext{flex:1 1 280px;min-width:0;overflow-wrap:anywhere}
.note.withact>.ntext>b{display:block;margin-bottom:2px}
.note.withact>.btnrow{margin-top:0;flex:0 0 auto}
.note.withact+.gsection{margin-top:14px}
.gfields.pairboards>.field{flex-basis:120px}
/* The pairing panel: the gold-edged panel of every bulk change, holding its choices, then the groups in tee order. */
.gpreview>.pairclose{margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.gpreview>.pairclose>p{font-size:13px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.gpreview>.pairclose>.btnrow{margin-top:10px}
.gpreview>.glabel{margin:12px 0 8px}
.gpreview>.gfields>.field>label{color:var(--muted)}
.gpreview>.pairpm{margin:4px 0 0;color:var(--cream)}
.gpreview>.choice{margin:8px 0 0}
.gpreview>.choice+.hint{display:block;margin:2px 0 0 26px;line-height:1.4}
.gpreview>.note.under{margin:12px 0 0}
/* The groups in tee order: the start, the group, the teams with their score on the board used, then the scorer. */
.pairlist{border-top:1px solid var(--line)}
.pairlist>.ptflight{padding:10px 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.pairlist>.ptflight>.gquiet{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.pairlist>.ptrow{display:grid;grid-template-columns:minmax(76px,max-content) 78px minmax(0,1fr) minmax(0,170px);gap:2px 14px;
  align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.ptrow>.pttime{font-weight:700;color:var(--gold-bright);font-variant-numeric:tabular-nums;white-space:nowrap}
.ptrow>.ptgroup{min-width:0;font-weight:600;color:var(--cream);overflow-wrap:anywhere}
.ptrow>.ptwho{min-width:0;color:var(--cream);overflow-wrap:anywhere}
.ptwho>.ptteam{display:block}
.ptwho>.ptteam>.ptnames{color:var(--muted)}
.ptwho>.ptteam>.ptscore{margin-left:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ptwho>.ptteam>.ptscore.missed{color:var(--muted);font-weight:600}
.ptrow>.ptscorer{min-width:0;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.ptrow>.ptscorer>.pill{margin-left:4px}
/* On a phone a start shares the group's line only where both fit; a long one, such as a hole on a named course,
   takes its own line over the group, which keeps the row's width. */
@media(max-width:640px){
  .pairlist>.ptrow{display:flex;flex-wrap:wrap;gap:2px 12px}
  .ptrow>.pttime{white-space:normal;overflow-wrap:anywhere}
  .ptrow>.ptgroup{flex:1 1 90px}
  .ptrow>.ptwho,.ptrow>.ptscorer{flex:1 1 100%}
}
@media(max-width:480px){
  .note.withact>.btnrow{flex:1 1 100%}
  .note.withact>.btnrow>.btn{flex:1 1 auto}
}
/* Choices nested under a tick, indented under its words. */
.subopts{margin:8px 0 0 22px;padding-left:12px;border-left:1px solid var(--line)}
@media(max-width:480px){
  .flightrow>.fltitles{flex:1 1 100%}
  .fltitles>select{flex:1 1 auto}
}
/* ---- Live per date and the titles at Finish ---- */
/* The status card lists every date under the event's own line: the round, its state, a line on what it means and
   the controls that date allows. On a phone the controls drop under the line and share it. */
.livestatus>.lsdays{margin-top:16px}
.lsdays>.lsday,.lsdate>.lsday{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;
  padding:12px 0;border-top:1px solid var(--line)}
.lsday>.lstext{flex:1 1 260px;min-width:0}
.lsday .lsdtitle{font-size:14px;font-weight:700;color:var(--cream);margin-right:8px;overflow-wrap:anywhere}
.lsday .lstext>.pill{vertical-align:1px}
.livestatus .lsday .lsline{margin-top:5px;font-size:13px;color:var(--muted)}
.lsday>.lsacts{display:flex;flex-wrap:wrap;gap:8px}
/* The date's own note, such as a round with no groups yet, sits on its own line under the date's words. */
.lsday>.note{flex:1 1 100%;margin-top:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.lsday>.note>span{flex:1 1 220px;min-width:0}
/* A 36-hole day: the date's line carries Close now and Reopen for scorers, and each round under it keeps its own
   state and Cancel, set in from the left. */
.lsdate>.lspart{margin-left:14px;padding-left:12px;border-left:2px solid var(--line)}
.lsdays .gpreview{margin:0 0 12px}
.livestatus>.lsdayshint{display:block;margin-top:10px;line-height:1.4}
/* The final card names every title and how it was decided, the overall first. */
.livestatus>.lschamps{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:6px}
.lschamps>p{font-size:13.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.lschamps>p>b{color:var(--cream);font-weight:700}
.lschamps>p.lsoverall{font-size:15px;color:var(--cream)}
.lschamps>p.lsoverall>b{color:var(--gold-bright)}
/* An unposted list grouped by round: each round's name is a plain line, its groups dotted under it. */
.gpreview li.lsgroup{padding-left:0;margin-top:8px;color:var(--cream);font-weight:700}
.gpreview li.lsgroup:first-child{margin-top:0}
.gpreview li.lsgroup::before{display:none}
/* Finish's title picks: one box per tied title, in the order they settle. */
.gpreview>.lspicks{display:grid;gap:10px;margin:10px 0 4px}
.lspicks>fieldset{border:1px solid var(--line);border-radius:9px;padding:8px 12px 4px;min-width:0;background:var(--green-950)}
.lspicks legend{padding:0 6px;font-size:13px;font-weight:700;color:var(--cream);overflow-wrap:anywhere}
.lspicks>fieldset>.hint{display:block;margin:0 0 8px;line-height:1.4}
.lspicks .choice{margin-bottom:6px}
.lspicks .choice>input[type="radio"]{accent-color:var(--gold)}
.lspicks .choice>span{min-width:0;overflow-wrap:anywhere}
.lspicks>fieldset>.note{margin:2px 0 8px}
@media(max-width:480px){
  .livestatus .lsday>.lsacts{flex:1 1 100%}
  .livestatus .lsday>.lsacts>.btn{width:auto;flex:1 1 0}
  .lsdate>.lspart{margin-left:0}
}
/* ---- The Live board per round, flight and title ---- */
/* The board's picker: Overall and the flights, Gross and Net, and the rounds select. */
.lbpick{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin:8px 0 12px}
.lbpick>.subtabs{margin:0}
.lbpick>.field{margin:0;flex:0 1 280px;min-width:0}
/* A round column per round on a wide screen; on a phone the rounds go on a line under the name. */
#lbPanel th.lbr,#lbPanel td.lbr{padding-left:6px;padding-right:6px}
.lb-name>.lbrline{display:none}
.lb-name>.lbtag{display:inline-block;margin-left:6px;vertical-align:2px;font-size:10px;padding:2px 7px;letter-spacing:.04em}
.lb-name>.lbtag.flight{background:transparent;color:var(--muted)}
/* A flight or team name can run to 30 characters, so the name cell breaks it rather than widen the table. */
#lbPanel .lb-name{overflow-wrap:anywhere}
.lb-name>.lbtag{max-width:100%}
td.thru{white-space:nowrap}
/* A row with no place on the total: its words are quiet and its label is small type in the place column. */
.lb-row.missed td{color:var(--muted)}
.lb-row.missed .lb-pos{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.04em;line-height:1.25}
/* A split round's live groups sit under their course's name, which spans the whole grid. */
.livegroups>.glabel.lgcourse{grid-column:1/-1;margin:8px 0 0}
.livegroups>.glabel.lgcourse:first-child{margin-top:0}
@media(max-width:640px){
  #lbPanel.lbmulti th,#lbPanel.lbmulti td{padding-left:5px;padding-right:5px}
  #lbPanel th.lbr,#lbPanel td.lbr{display:none}
  .lb-name>.lbrline{display:block;font-variant-numeric:tabular-nums}
  .lb-name>.lbtag{font-size:9.5px;letter-spacing:.02em;padding:2px 6px}
  /* A flight chip breaks only between words, in smaller type, so the name column is never narrower than its longest
     word; the team name beside it then breaks between words, and anywhere only for a word wider than the cell. */
  #lbPanel .lb-name>.lbtag.flight{font-size:8.5px;letter-spacing:0;white-space:normal;overflow-wrap:normal;word-break:normal}
  td.thru{white-space:normal}
}
/* ---- Live skins per course and flight ---- */
/* The skins pickers: course or flight where the pools split, each under its small label. */
.skpick{display:grid;gap:6px;margin:0 0 14px}
.skpick>.glabel{margin:6px 0 0}
.skpick>.subtabs{margin:0}
#skinsPanel>.note.under{margin:-6px 0 14px}
@media(max-width:820px){
  /* Below 820 px the sub line would squeeze the name to nothing, and the three pills share one padding. */
  .brand .sub{display:none}
  .roleswitch a,.roleswitch button{padding:8px 11px}
}
@media(max-width:640px){
  /* The nav drops to its own line on a phone, and stays right-aligned though the hidden name still matches .who+. */
  .topinner{gap:10px;flex-wrap:wrap;row-gap:8px}
  .topinner .who{display:none}
  .topinner .who+.roleswitch{margin-left:auto}
  .roleswitch a,.roleswitch button{padding:8px 10px;font-size:12.5px}
  .evhead h1{font-size:22px}
  .row{flex-wrap:wrap}
  .row>*{flex:1 1 140px}
  .fxrow>.field,.fxrow>.field:last-child{flex-basis:100%}
  /* Three holes a row on a phone, as the scorecard grid does, so each nine stays its own block. */
  .strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Every Live control is a 44 px tap on a phone; a button and a field keep their words centred in it. A tick box
     and a radio keep their size, since the whole label is their tap. */
  #tab-live button.btn,#tab-live .subtabs>button,#tab-live .rpills>button,#tab-live select,
  #tab-live input:not([type="checkbox"]):not([type="radio"]){min-height:44px}
}
/* A finger on a touch screen of any width gets the same 44 px tap on every button, tab, pill, select and text field,
   link buttons and the nav pills included, whose words stay centred as a button's do; a mouse keeps today's sizes. */
@media(pointer:coarse){
  button.btn,a.btn,.subtabs>button,.rpills>button,.gfilter>button,.coursechips>.playerchip,select,
  input:not([type="checkbox"]):not([type="radio"]),.roleswitch a,.roleswitch button{min-height:44px}
  a.btn{display:inline-flex;align-items:center;justify-content:center}
  .roleswitch a{display:inline-flex;align-items:center}
}
/* On a phone an event's name and line take the item's full width under its code and pills; squeezed between them
   they pushed a pill out of the item and, on the smallest phones, the page sideways. */
@media(max-width:480px){
  .tourney-item{flex-wrap:wrap;row-gap:8px;justify-content:flex-end}
  .tourney-item .meta{order:1;flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
  /* The code holds the left, so the status and Offline pills end their line together, or each its own once wrapped. */
  .tourney-item>.code{margin-right:auto}
}
/* On the smallest phones the three nav pills tighten, so the nav fits its line with no sideways scroll. */
@media(max-width:360px){
  .roleswitch{gap:4px;padding:3px}
  .roleswitch a,.roleswitch button{padding:8px 7px;font-size:12px}
  /* A skins grid of four to six rounds is wider than the card here, so it scrolls in its own box at full tap size
     and the roster's cards keep the page's width. The box clips at its edge, so it keeps room for a tick's ring. */
  #tab-roster>.cols-2>.card{min-width:0}
  .rtickwrap>.rticks{max-width:100%;overflow-x:auto;padding-bottom:4px}
}
/* Under 320 the fix form's selects left 144 px for their words, so its longest round and golfer labels were cut;
   smaller type, a closer chevron and narrower card sides give them 173 px. */
@media(max-width:319px){
  #fixForm{padding-left:12px;padding-right:12px}
  #fixForm>.fxround>select,#fixForm>.fxrow>.field>select{font-size:13px;padding-left:9px;padding-right:30px;background-position:right 10px center}
}
/* ---- Rounds ---- */
/* The round pills over a pane: one per round, its date on a quiet second line, the one in view edged in gold.
   They wrap to a second row on a phone. A one-round event draws none. */
.rpills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.rpills>button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:9px;
  padding:7px 12px;font-size:12.5px;font-weight:600;line-height:1.25;text-align:left;cursor:pointer;transition:.15s}
.rpills>button>small{display:block;font-size:11px;font-weight:400;opacity:.85}
.rpills>button:hover{border-color:var(--gold);color:var(--cream)}
.rpills>button[aria-pressed="true"]{background:var(--green-850);border-color:var(--gold);
  color:var(--gold-bright);box-shadow:0 0 0 1px var(--gold) inset}
.rpills>button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* ---- Days and rounds on Setup ---- */
/* Radio choices side by side, wrapping under each other on a phone. */
.choices{display:flex;flex-wrap:wrap;gap:2px 18px}
.choices>.choice{margin-bottom:6px}
/* A line under a field or a choice, in the hint's size, on its own line. */
small.hint.under{display:block;margin-top:6px;line-height:1.4}
/* Day and part pills: the sub-tab pills over the panel they switch; the part pills a size down. */
.daypills,.partpills{margin-bottom:12px}
.partpills>button{padding:6px 12px;font-size:12.5px}
/* A pill whose day holds a refused field, so the refusal is found from another day. */
.subtabs>button[aria-invalid="true"]{border-color:var(--red);color:var(--bad)}
/* The round panel: the course block for the round in view, framed as the skins box is. */
.rpanel{border:1px solid var(--line);border-radius:11px;padding:14px;margin-bottom:14px;background:var(--green-950)}
.rpanel>.rphead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-bottom:10px}
.rphead>.rptitle{font-size:13.5px;font-weight:700;color:var(--gold-bright);overflow-wrap:anywhere;min-width:0}
.rphead>.btn{flex:0 0 auto}
.rpanel>.rphint{display:block;margin:-4px 0 12px;line-height:1.4}
/* ---- Courses and start times on Setup ---- */
/* Course chips over a round's course fields; the add chip is dashed like Add an empty group. */
.coursechips{display:flex;flex-wrap:wrap;align-items:center}
.coursechips>.playerchip{font:inherit;font-size:13px;font-weight:600;color:var(--cream);overflow-wrap:anywhere;min-width:0}
.coursechips>.playerchip.sel{color:var(--gold-bright)}
.playerchip.add{background:transparent;border-style:dashed;border-color:rgba(203,163,81,.5);color:var(--gold)}
.playerchip.add:hover{border-color:var(--gold);color:var(--gold-bright)}
.coursechips>.playerchip[aria-invalid="true"]{border-color:var(--red);color:var(--bad)}
.coursepick>.coursebar{margin-top:8px}
.coursebar>.btn{overflow-wrap:anywhere;max-width:100%}
/* The start time sits under Start; a blank time is fine. */
.timefields{margin-top:-4px}
.timefields>.field>input[type="time"]{color-scheme:dark}
.timeline{margin:-8px 0 14px}
/* ---- The plan card on Account ---- */
/* Across both columns, above them, so a phone shows the plan before the forms. */
.cols-2>.planwide{grid-column:1/-1}
.planwide>.planline{margin:12px 0 0;font-size:13.5px;color:var(--cream);overflow-wrap:anywhere}
.planwide>.planline+.planline{margin-top:4px}
.planwide>.btnrow{margin-top:14px}
/* What a return from Stripe says, in the card, read out by a screen reader as it changes. */
.planlive{margin:10px 0 0;font-size:13.5px;color:var(--gold-bright);overflow-wrap:anywhere}
.planlive:empty{display:none}
/* The contact address inside a note, an error line or the return line. */
.planwide>.note>a,.planwide>.err>a,.planlive>a{color:var(--gold-bright);overflow-wrap:anywhere}
/* Badge tones beside the green one: gold for a payment to watch, red for one that stopped, grey for no plan. */
.badge-warn,.badge-bad,.badge-off{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px}
.badge-warn{background:rgba(226,194,104,.14);color:var(--gold-bright);border:1px solid rgba(226,194,104,.45)}
.badge-bad{background:rgba(230,134,111,.14);color:var(--bad);border:1px solid rgba(230,134,111,.45)}
.badge-off{background:transparent;color:var(--muted);border:1px solid var(--line)}
/* ---- The Subscribe screen and the list's lapsed note ---- */
/* The heading takes the focus when the screen opens; it is no control, so it draws no ring. */
.plancta>h2{font-size:20px;margin-bottom:8px;outline:none}
.plancta>.planbox{margin-top:14px}
.plantitle{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.plancta>.btnrow{margin-top:16px}
.plancta>.note>a,.plancta>.err>a{color:var(--gold-bright);overflow-wrap:anywhere}
.wrap>.listnote{margin:0 0 18px}
.listnote>a{color:var(--gold-bright);font-weight:600;white-space:nowrap}
/* ---- The privacy line and links ---- */
/* What reaches Stripe, said under Subscribe; the link to the privacy policy sits there and at each page's foot. */
.planprivacy{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.planprivacy>a,.foot>a{color:var(--gold-bright)}
/* ---- The offline banner ---- */
/* The contact address in the banner over an event Press Golf took offline. */
#ev-offline>a{color:var(--gold-bright);overflow-wrap:anywhere}