/* Site chrome for SundaySaucers.com: header, nav, game lists, sponsors, footer. Builds on base.css tokens. */
body{background:var(--paper)}
.wrap.site{max-width:760px}
.wrap.wide{max-width:1180px}
/* Nicholls Tech badge, top right of every page. The mark follows the site's light/dark colours. */
.nt-row{display:flex;justify-content:flex-end;margin-bottom:-4px}
.nt-badge{display:inline-flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:700 17px/1.05 var(--f-display);letter-spacing:.04em}
.nt-t{display:block;font:700 10px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.nt-mark{width:32px;height:32px;flex:none;display:block}
.nt-mark rect{fill:var(--ink)}
.nt-mark path{fill:none;stroke:var(--paper);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nt-mark.inv rect{fill:var(--paper)}
.nt-mark.inv path{stroke:var(--ink)}
@media (max-width:480px){.nt-badge{font-size:15px;gap:7px;padding:4px 10px 4px 4px;border-radius:10px}.nt-mark{width:28px;height:28px}.nt-t{font-size:9px}}
@media print{.nt-row{display:none}}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.top .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:0}
.top .brand img{width:56px;height:56px;flex:none;object-fit:contain}
.top h1{font-size:clamp(28px,7vw,40px)}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{font:700 14px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);min-height:40px;display:inline-flex;align-items:center}
.nav a[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.preview{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);color:var(--ink);border:1px solid var(--warn);border-radius:12px;padding:10px 12px;font-size:14px}
.preview b{font:800 13px/1.3 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--warn);white-space:nowrap}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:6px 0 0}
.sec-h h2{margin:0;font:700 14px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sec-h small{color:var(--muted);font-size:13px}

/* Live game card on the home page */
a.livecard{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--board-ink);background:var(--board);border-radius:16px;padding:14px}
.livecard .row1{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--sauce);color:var(--sauce-ink)}
.pill.quiet{background:var(--card);color:var(--muted);border:1px solid var(--line)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pip{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
@media (prefers-reduced-motion:no-preference){.pill.live .pip{animation:pulse 1.6s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.25}}
.livecard .score{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font:800 26px/1.15 var(--f-display)}
.livecard .score .n{text-align:right;font-variant-numeric:tabular-nums}
.livecard .score .us{color:var(--runner)}
.livecard .meta{font:600 14px var(--f-body);color:var(--board-dim)}
.livecard .go{font:700 14px var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--runner)}

/* Game rows */
.games{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
a.grow,.grow{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:inherit;text-decoration:none}
.grow b{font:800 20px/1.1 var(--f-display);letter-spacing:.01em}
.grow small{grid-column:1;font-size:14px;color:var(--muted)}
.grow .res{grid-row:1/3;grid-column:2;text-align:right;font:800 22px/1 var(--f-display);font-variant-numeric:tabular-nums}
.grow .res em{display:block;font:700 12px var(--f-display);letter-spacing:.1em;font-style:normal;color:var(--muted);margin-top:4px}
.grow .res.w em{color:var(--ok)}
.grow .res.l em{color:var(--sauce)}
.empty-note{margin:0;padding:12px;border-radius:14px;border:1px dashed var(--line);color:var(--muted);font-size:14px}
.maplink{color:var(--sauce);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Lineup */
ol.order{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
ol.order li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:9px 2px;border-top:1px solid var(--line)}
ol.order li:first-child{border-top:0}
ol.order .n{font:700 20px/1 var(--f-display);color:var(--sauce);text-align:center;font-variant-numeric:tabular-nums}
ol.order .nm{font:600 16px var(--f-body)}
ol.order .pos{font:700 13px/1 var(--f-display);letter-spacing:.05em;padding:6px 9px;border-radius:999px;background:var(--ok-bg);color:var(--ok)}

/* Sponsors + footer */
.sponsors{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.sp-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-row a{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#111;aspect-ratio:3/2}
.sp-row img{width:100%;height:100%;object-fit:contain;display:block}
.foot-site{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:10px;text-align:center;color:var(--muted);font-size:13px}
.powered-banner{margin-top:14px;padding:16px 8px;border-radius:14px;background:var(--ink);text-align:center;display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,16px)}
.powered-banner .nt-mark{width:clamp(34px,9vw,52px);height:clamp(34px,9vw,52px)}
.powered{font:700 clamp(14px,4.4vw,26px)/1.1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-wrap:balance}
.powered b{font-size:1.15em;letter-spacing:.08em}

/* Live page status */
.status{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.back{font:700 14px var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.vs{margin:0;font:800 clamp(24px,6vw,32px)/1.05 var(--f-display)}
.sub{margin:2px 0 0;color:var(--muted);font-size:14px}

/* Clipboard */
.syncbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;font:600 14px var(--f-body);background:var(--ok-bg);color:var(--ok)}
.syncbar.wait{background:var(--warn-bg);color:var(--warn)}
.syncbar.lost{background:var(--sauce-soft);color:var(--sauce)}
.form{display:flex;flex-direction:column;gap:10px}
.form label{display:flex;flex-direction:column;gap:6px;font:700 12px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.form input{font:600 18px var(--f-body);padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);min-height:48px}
.form input.code{font:800 26px var(--f-display);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.form .msg{margin:0;font-size:14px;color:var(--sauce);min-height:1.2em}
.big{font:800 22px/1.15 var(--f-display);margin:0}

/* League (sample) */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
table.stand{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;min-width:520px}
.stand th,.stand td{padding:10px 8px;text-align:center;font:600 15px var(--f-display);white-space:nowrap}
.stand th{font:700 12px var(--f-display);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;border-bottom:1px solid var(--line)}
.stand td:nth-child(2),.stand th:nth-child(2){text-align:left;font-family:var(--f-body)}
.stand tbody tr+tr{border-top:1px solid var(--line)}
.stand tr.us td{background:var(--sauce-soft)}
.stand .rk{color:var(--muted);width:28px}
.tag{display:inline-block;font:700 11px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:999px;background:var(--line);color:var(--ink);margin-left:6px;vertical-align:2px}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.feat .card b{display:block;font:800 18px/1.15 var(--f-display);margin-bottom:4px}
.feat .card p{margin:0;font-size:14px;color:var(--muted)}

.fanprev{display:none!important}
@media (min-width:980px){.fanprev{display:flex!important}}
.syncbar .btn.sm{color:var(--ink)}

a.btn{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center}
a.btn.primary{color:var(--sauce-ink)}
#sync{position:sticky;top:max(8px,env(safe-area-inset-top,0px));z-index:5;box-shadow:0 2px 10px rgba(0,0,0,.12)}
ol.order li.none{grid-template-columns:1fr;color:var(--muted);font-size:14px}
/* Phones: fit the whole line score (through R and H) without sideways scrolling */
@media (max-width:430px){
  .ls th.team{min-width:0;max-width:96px;font-size:14px;white-space:normal;line-height:1.05}
  .ls th,.ls td{padding:6px 2px;min-width:19px}
  .ls .tot{min-width:26px}
  table.stand{min-width:0}
  .stand .rs,.stand .ra{display:none}
  .stand th,.stand td{padding:10px 5px}
}

/* Feedback button, dialog and inbox */
.fb-fab{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:20;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--ink);color:var(--paper);font:700 14px var(--f-display);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 2px 10px rgba(0,0,0,.25)}
body.fb-pad{padding-bottom:72px}
.fb-link{font:700 13px var(--f-display);letter-spacing:.1em;text-transform:uppercase}
dialog.fb-dialog{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink)}
dialog.fb-dialog::backdrop{background:rgba(0,0,0,.55)}
.fb-help{margin:0;color:var(--muted);font-size:14px}
.fb-form textarea{font:500 17px/1.35 var(--f-body);padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);min-height:120px;resize:vertical;text-transform:none;letter-spacing:0}
.fb-opt{text-transform:none;letter-spacing:0;font:500 13px var(--f-body)}
.fb-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fb-actions{display:flex;gap:8px;justify-content:flex-end}
.fb-actions .btn{min-width:96px}
.form input.pw{letter-spacing:0;text-transform:none}
.fb-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fb-bar-btns{display:flex;gap:6px}
.fb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fb-note small{display:block;color:var(--muted);font-size:13px}
.fb-note p{margin:6px 0 0;font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.fb-note .fb-from{margin-top:6px;font-weight:600}
@media print{.fb-fab{display:none}}
.col[hidden],[hidden]{display:none!important}
.btn.sm{min-height:38px;padding:0 12px;font-size:13px}
.fb-seg{min-width:150px}
.fb-bar-btns{flex-wrap:wrap}
.fb-note.read{opacity:.6}
.fb-note-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.fb-new{margin:0 4px 0 0;background:var(--sauce);color:var(--sauce-ink)}

/* How-to-score guide */
.guide{margin-top:12px}
.guide h2{margin:0 0 8px;font:800 22px/1.1 var(--f-display)}
.guide ol,.guide ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.guide li{line-height:1.4}
.guide .foot{margin:12px 0 0}

/* Lineup editor */
.lu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lu-row{display:grid;grid-template-columns:24px 1fr 88px 42px 42px;gap:6px;align-items:center;padding:8px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.lu-row .lu-n{font:800 18px var(--f-display);color:var(--sauce);text-align:center}
.lu-row .lu-nm{font:700 16px/1.1 var(--f-display);min-width:0;overflow-wrap:anywhere}
.lu-row select{font:600 15px var(--f-body);min-height:42px;width:100%;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:0 4px}
.lu-row .btn.sm{min-width:0;padding:0;min-height:42px}
.lu-none{padding:10px;color:var(--muted);font-size:14px}
#luMsg{min-height:1.2em;margin:4px 0 0;color:var(--sauce);font-size:14px}
.lu-row.bn{grid-template-columns:1fr auto}

/* Lineup editor v2: one draggable list, position grid, Who's in check-off */
.lu2-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lu2-count{font:700 15px var(--f-body);color:var(--muted)}.lu2-count.bad{color:var(--sauce)}
.lu2-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lu2{display:grid;grid-template-columns:34px 26px 1fr auto;gap:6px;align-items:center;min-height:56px;padding:4px 8px 4px 0;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.lu2-grip{display:flex;align-items:center;justify-content:center;align-self:stretch;color:var(--muted);touch-action:none;cursor:grab}
.lu2-n{font:800 20px var(--f-display);color:var(--sauce);text-align:center}
.lu2-nm{font:700 17px/1.1 var(--f-display);text-align:left;background:none;border:0;color:var(--ink);padding:8px 0;min-height:44px;min-width:0;overflow-wrap:anywhere}
.lu2-pos{min-width:64px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:800 16px var(--f-display)}
.lu2-pos.empty{border-style:dashed;color:var(--muted);border-color:var(--line)}
.lu2-bench{font:600 13px var(--f-body);color:var(--muted);padding-right:6px}
.lu2-div{list-style:none;padding:10px 4px 2px;font:800 13px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:2px dashed var(--line);margin-top:4px}
.lu2.lifted{box-shadow:0 10px 28px rgba(0,0,0,.35);border-color:var(--sauce);position:relative;z-index:2;transform:scale(1.02)}
body.lu-dragging{user-select:none;-webkit-user-select:none;cursor:grabbing}
.lu2-save{position:sticky;bottom:0;background:var(--paper);padding:10px 0;z-index:3}
.lu2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.lu2-pp{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:60px;padding:6px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.lu2-pp b{font:800 18px var(--f-display)}.lu2-pp small{font:500 12px var(--f-body);color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lu2-pp.on{border:2px solid var(--sauce)}
.lu2-roll{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lu2-r{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;min-height:52px;padding:6px 10px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-align:left}
.lu2-r b{font:700 15px var(--f-display);min-width:0;overflow-wrap:anywhere}.lu2-r small{font:600 12px var(--f-body);color:var(--muted)}
.lu2-r .box{width:20px;height:20px;border-radius:6px;border:2px solid var(--line)}
.lu2-r.in{border-color:var(--ok)}.lu2-r.in .box{background:var(--ok);border-color:var(--ok)}.lu2-r.in small{color:var(--ok)}
.lu2-pp.open{border:2px solid var(--ok)}.lu2-pp.open small{color:var(--ok);font-weight:700}
.lu2-pp.taken{background:var(--paper);opacity:.55}.lu2-pp.taken b{color:var(--muted)}
.lu2-open{color:var(--sauce);font-weight:700}.lu2-full{color:var(--ok);font-weight:700}