/* n4q.css - the condensed look, shared by the pages that are not the home page
   (tables, news, history, privacy, terms). The home page carries its own copy of
   these rules inline; they are meant to agree, and this file is where a change to
   the shared parts is made once for everything else. One mono face, one size
   (--u, 11px, which the reader can change in Settings on the home page), the
   wordmark top left, a one-line footer. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/7cHpv4kjgoGqM7E_DMs5.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:optional;src:url('/fonts/7cHqv4kjgoGqM7E30-8s51os.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:optional;src:url('/fonts/7cHqv4kjgoGqM7E3t-4s51os.woff2') format('woff2')}

:root{
  --green:#0B5E3F; --cream:#FAF6F0; --border:#E8E2D5; --ink:#1A1A1A; --muted:#5C6B64;
  --paper:#FFFFFF; --live:#C4342B; --amber:#E8A33D; --faint:#8a948f; --line:#E8E2D5;
  --mono:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace;
  --ff:var(--mono); --u:11px; --nw:700;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cream);color:var(--ink);font:var(--u)/1.35 var(--ff);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--green)}

/* the top bar: wordmark, the other pages, and (where it helps) a search box */
.bar{flex:none;padding:10px 14px 8px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.wordmark{font:700 16px/1 var(--ff);letter-spacing:-.02em;text-decoration:none;color:var(--green);display:inline-flex;align-items:baseline;flex:none}
.wordmark .n4q-4{color:var(--amber)}
.pnav{display:flex;gap:16px;flex:none;align-self:center}
.pnav a{color:var(--muted);text-decoration:none;font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 1px 3px;border-bottom:2px solid transparent}
.pnav a:hover{color:var(--green)}
.pnav a.on{color:var(--green);border-bottom-color:var(--green)}
.bar input{flex:1 1 640px;min-width:min(100%,640px);max-width:760px;height:32px;border:1px solid var(--border);border-radius:16px;background:var(--paper);padding:0 14px;font:inherit;font-size:13px;color:var(--ink);outline:none}
.bar input:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(11,94,63,.14)}
.bar input::placeholder{color:#8a948f}

/* the page */
main{flex:1;padding:4px 14px 18px}
.page{max-width:1280px;margin:0 auto}
h1{font:700 calc(var(--u)*1.7)/1.2 var(--ff);margin:6px 0 4px}
h2{font:700 calc(var(--u)*1.2)/1.2 var(--ff);margin:22px 0 6px}
.dim{color:var(--faint)}
.muted{color:var(--muted)}
.small{font-size:calc(var(--u)*.95)}
.empty{margin:14px 0;color:var(--faint)}
/* "Loading" with dots that count up, wherever a panel is waiting on data */
.ld::after{content:"";display:inline-block;width:1.4em;text-align:left;animation:n4qld 1.2s steps(1,end) infinite}
@keyframes n4qld{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.ld::after{animation:none;content:"..."}}

/* prose: privacy, terms, a club's history, an article */
.prose{max-width:760px;margin:0 auto}
.prose p,.prose li{font-size:calc(var(--u)*1.1);line-height:1.65;margin:0 0 10px}
.prose ul{margin:6px 0 10px 20px;padding:0}
.prose h1{font-size:calc(var(--u)*1.9)}
.prose h2{font-size:calc(var(--u)*1.25);margin:24px 0 6px}
.prose h3{font:700 calc(var(--u)*1.1)/1.3 var(--ff);margin:16px 0 4px}
.prose .updated{color:var(--muted);margin:0 0 22px}
.prose .src p{font-size:calc(var(--u)*.95);color:var(--muted);word-break:break-word}
.crumb{margin:6px 0 10px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--green)}

/* tables: a grid of compact league tables */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px 22px;align-items:start}
.tb{background:var(--paper);border:1px solid var(--border);border-radius:8px;padding:8px 10px 6px}
.tb h2{margin:0 0 6px;display:flex;justify-content:space-between;align-items:baseline;font-size:calc(var(--u)*1.05);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tb h2 small{font-weight:400;color:var(--faint);letter-spacing:0;text-transform:none}
.tb table{width:100%;border-collapse:collapse}
.tb th{font-weight:700;color:var(--faint);text-align:right;font-size:calc(var(--u)*.85);letter-spacing:.04em;padding:2px 3px;border-bottom:1px solid var(--line)}
.tb td{padding:3px 3px;text-align:right;border-bottom:1px solid #f3efe4;white-space:nowrap}
.tb th:nth-child(2),.tb td:nth-child(2){text-align:left;width:100%}
.tb td:first-child,.tb th:first-child{text-align:left;color:var(--faint);width:1%}
.tb td.pts{font-weight:700}
.tb td.nm{display:flex;align-items:center;gap:6px;overflow:hidden}
.tb td.nm span{overflow:hidden;text-overflow:ellipsis}
.tb tr.zone td{border-bottom:1px solid var(--muted)}
.crest{flex:none;width:calc(var(--u)*1.3);height:calc(var(--u)*1.3);object-fit:contain}
.tb .conf{margin:8px 0 3px;font-weight:700;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;font-size:calc(var(--u)*.85)}
.tb .zl{margin:4px 0 0;color:var(--faint);font-size:calc(var(--u)*.85)}

/* news: one row per report, opened in place */
.nl{max-width:980px;margin:0 auto}
.nr{border-bottom:1px solid #efeadc}
.nrow{display:grid;grid-template-columns:calc(var(--u)*5.2) calc(var(--u)*5.8) calc(var(--u)*5.4) minmax(0,1fr);gap:10px;align-items:baseline;padding:3px 4px;cursor:pointer}
.nrow:hover{background:#f6f2e9}
.nr.open .nrow{background:#ede7d8}
.nrow .d{color:var(--faint)}
.nrow .lgs{color:var(--faint);text-transform:uppercase;font-size:calc(var(--u)*.85);letter-spacing:.06em}
.nrow .kind{font-weight:700;font-size:calc(var(--u)*.85);letter-spacing:.08em;color:var(--green)}
.nrow .kind.review{color:var(--muted)}
.nrow .t{font-weight:700;min-width:0;display:flex;align-items:center;gap:8px}
.nrow .t .tt{min-width:0}
.nbody{padding:2px 8px 6px calc(var(--u)*5.2 + var(--u)*5.8 + var(--u)*5.4 + 34px);background:#fcfbf8}
.nbody p{margin:0 0 6px;font-size:calc(var(--u)*1.05);line-height:1.3}
.nbody .lock{color:var(--muted);margin-top:6px}
.nbody .lock a{font-weight:700}

/* history: an A-Z of clubs */
.az{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 14px}
.az a{min-width:24px;text-align:center;padding:3px 6px;border:1px solid var(--border);border-radius:5px;text-decoration:none;font-weight:700;color:var(--muted)}
.az a:hover{border-color:var(--green);color:var(--green)}
.clubs{columns:240px;column-gap:22px}
.clubs .g{break-inside:avoid;margin:0 0 14px}
.clubs h2{margin:0 0 4px;padding-bottom:3px;border-bottom:1px solid var(--line);color:var(--faint);font-size:calc(var(--u)*1.05)}
.clubs a{display:block;padding:2px 0;text-decoration:none;color:var(--ink)}
.clubs a:hover{color:var(--green);text-decoration:underline}

/* a single report's page, and the club histories: the look the page has with no stylesheet at all
   (Kevin, 2026-11-01: "I like the bare styling of the reports before the css is applied"). Plain
   flowing text, tight lines, small gaps, no cards, left aligned under the shared header. */
.prose.art{max-width:100ch;margin:0;padding:2px 2px 8px}
.prose.art p,.prose.art li{font-size:calc(var(--u)*1.1);line-height:1.3;margin:0 0 6px}
.prose.art ul{margin:2px 0 6px 18px}
.prose.art h1{font-size:calc(var(--u)*1.5);line-height:1.2;margin:2px 0 3px}
.prose.art h2{font-size:calc(var(--u)*1.15);line-height:1.25;margin:10px 0 3px}
.prose.art h3{margin:6px 0 2px;line-height:1.25}
.prose.art .crumb{margin:2px 0 3px}
.prose.art .small{margin:0 0 2px}
.arthead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.arthead h1{margin:2px 0 3px}
.share{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:1px solid var(--border);border-radius:12px;background:transparent;color:var(--muted);cursor:pointer}
.share:hover,.share:focus-visible{color:var(--green);border-color:var(--green);outline:none}
.share svg{display:block}
.sharemsg{font-size:calc(var(--u)*.95);color:var(--green);font-weight:600}
.prose.art .artlock{margin:6px 0 0;padding:5px 10px;border-radius:4px}
.prose.art .artlock p{margin:0 0 3px}
.prose.art .ntags{margin:10px 0 0;padding-top:6px}
/* a single report's page */
.artlock{border:1px solid var(--green);border-radius:8px;padding:10px 14px;margin:16px 0 0;background:#FBFDFC}
.artlock p{margin:0 0 6px}
.ntags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:20px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.ntags .ntag{display:inline-block;font-size:calc(var(--u)*.95);line-height:1;padding:5px 9px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--green);background:#fff}
.ntags .ntag:hover{background:#F4F1EC}

/* the footer: one line */
footer.site{flex:none;border-top:1px solid var(--border);background:#F5F1EA;color:var(--muted);padding:6px 14px max(7px,env(safe-area-inset-bottom));font-size:calc(var(--u)*.95)}
footer.site .row{display:flex;align-items:center;gap:16px;white-space:nowrap;flex-wrap:wrap}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--green);text-decoration:underline}
footer.site .spacer{margin-left:auto}
footer.site .gplay img{display:block;height:20px;width:auto}

body.embed .bar,body.embed footer.site{display:none}

.wm-bang{display:none}
/* a phone: the wordmark shrinks to the !4 mark so the tabs fit beside it on one row */
@media (max-width:640px){
  .wm-w{display:none}
  .wm-bang{display:inline}
  .wordmark{font-size:24px}
  .bar{gap:6px 14px}
}

@media (max-width:640px){
  .nrow{grid-template-columns:calc(var(--u)*4.4) 1fr;gap:2px 8px}
  .nrow .lgs,.nrow .kind{display:inline}
  .nrow .t{grid-column:1/-1}
  .nbody{padding-left:12px}
  .tgrid{grid-template-columns:1fr}
  footer.site .row>a[href^=mailto]{display:none}
}