:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 40px;
  --sh-1: 2px 2px 0 var(--shadow); --sh-2: 4px 4px 0 var(--shadow); --sh-3: 6px 6px 0 var(--shadow);
  --bw: 2px;                       
  --tap: 44px;                     
  --focus-halo: rgba(58, 143, 103, .55);
  --tick: 120ms;                   
  --ok: var(--good-text); --bad: var(--critical-text);
}
@media (max-width: 760px) { :root { --tap: 48px; } }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }
.brandbar :focus-visible { outline-color: var(--banner-text); box-shadow: 0 0 0 5px var(--focus-halo); }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--text-primary); color: var(--surface-1); padding: 10px 14px;
  font: 700 var(--fs-sm)/1 "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; border: var(--bw) solid var(--em); text-decoration: none; }
.skip:focus { top: 8px; }
main:focus, #dash:focus { outline: none; box-shadow: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brandbar { box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.brandbar a.bl { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.brandbar a.bl:hover { opacity: 1; text-decoration: underline; }
.brandbar a.bl.cur { text-decoration: underline; }
.brandbar a.bl.signin { min-height: 34px; padding: 3px 10px; }
.brandbar a.bl.signin:hover { background: var(--banner-text); color: var(--banner-bg); text-decoration: none; }
.brandbar a.brand { min-height: var(--tap); }
@media (max-width: 740px) {
  .brandbar .in { padding-top: 0; padding-bottom: 6px; row-gap: 0; }
  .brandbar .btitle { padding-top: 6px; }
  .brandbar a.bl { padding: 0 2px; }
  .brandbar a.bl.signin { min-height: 40px; padding: 0 8px; }
  .themebar .seg button { padding: 12px 9px; font-size: 11px; }
  .wrap { padding-right: 46px; } footer .in { padding-right: 46px; }
}
@media (max-width: 400px) { .brandbar a.bl.signin { padding: 0 6px; } }
.sechead h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: var(--em); border: var(--bw) solid var(--border); vertical-align: 1px; }
.btn { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  transition: transform var(--tick) steps(2), box-shadow var(--tick) steps(2), background var(--tick) steps(2); }
.btn.block { display: flex; }
.btn:hover:not([disabled]):not(:disabled) { transform: translate(-1px, -1px); box-shadow: var(--sh-2); border-color: var(--border); }
.btn:active:not([disabled]):not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--shadow); }
.btn[disabled], .btn:disabled { opacity: 1; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--series-1-softer) 6px 8px), var(--surface-1);
  color: var(--text-muted); border-style: dashed; box-shadow: none; transform: none; cursor: not-allowed; }
.btn.sm { min-height: 32px; }
@media (max-width: 760px) { .btn.sm { min-height: 40px; } }
.seg button { min-height: 36px; transition: background var(--tick) steps(2), color var(--tick) steps(2); }
.seg button:hover:not([aria-pressed="true"]) { background: var(--series-1-softer); color: var(--text-primary); }
.seg button:focus-visible { outline-offset: -4px; box-shadow: none; }
.tabs button { min-height: var(--tap); transition: background var(--tick) steps(2); }
.tabs button:hover:not([aria-selected="true"]) { background: var(--series-1-softer); color: var(--text-primary); }
.tabs button:focus-visible { outline-offset: -4px; box-shadow: none; }
@media (max-width: 760px) { .seg button { min-height: var(--tap); padding-left: 12px; padding-right: 12px; } .themebar .seg button { min-height: 0; } }
.field input, .field textarea, .field select, #spSearch, input[type="time"] { min-height: var(--tap); }
.field textarea { min-height: 112px; }
.field input:hover:not([disabled]), .field textarea:hover:not([disabled]), .field select:hover:not([disabled]) { border-color: var(--text-primary); }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }
.field input:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--critical); }
.field label { cursor: pointer; }
.pick { transition: transform var(--tick) steps(2), box-shadow var(--tick) steps(2); }
.pick:not(.empty):hover { transform: translate(-2px, -2px); box-shadow: var(--sh-3); }
.pick.empty { background: repeating-linear-gradient(135deg, transparent 0 8px, var(--series-1-softer) 8px 10px), var(--surface-1); }
th { color: var(--text-secondary); border-bottom: var(--bw) solid var(--border); }
tbody tr:hover td { background: var(--series-1-softer); }
table caption { text-align: left; font-weight: 700; padding: var(--sp-2) 0; }
.scroll, .tscroll { scrollbar-width: thin; }
.tag.ok { border-color: var(--yes); color: var(--yes); } .tag.bad { border-color: var(--no); color: var(--no); }
.tag.info { background: var(--text-primary); color: var(--surface-1); }
.notice { display: flex; gap: var(--sp-3); align-items: flex-start; border: var(--bw) solid var(--border); border-left-width: 6px; background: var(--surface-1);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: 1.45; }
.notice::before { content: "i"; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; background: var(--text-primary); color: var(--surface-1); font-weight: 700; font-size: var(--fs-xs); }
.notice.warn { border-left-color: var(--critical); } .notice.warn::before { content: "!"; background: var(--critical); color: #fff; }
.notice.ok { border-left-color: var(--good); } .notice.ok::before { content: "✓"; background: var(--good); color: #fff; }
#siNotice, #contactNote:not(:empty), #siErr:not(:empty) { border: var(--bw) solid var(--border); border-left-width: 6px; padding: var(--sp-3) var(--sp-4); background: var(--surface-1); }
#siErr:not(:empty) { border-left-color: var(--critical); }
#contactNote:not(:empty) { flex: 1 1 100%; }
.hx { position: relative; display: inline-block; cursor: help; border-bottom: 2px dotted var(--text-muted); outline-offset: 3px; }
.hx-b { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; width: max-content; max-width: min(270px, 78vw); padding: var(--sp-2) var(--sp-3);
  background: var(--text-primary); color: var(--surface-1); border: var(--bw) solid var(--em); box-shadow: var(--sh-1);
  font: 500 var(--fs-xs)/1.4 "IBM Plex Mono", ui-monospace, monospace; text-transform: none; letter-spacing: 0; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity var(--tick) steps(2), transform var(--tick) steps(2), visibility 0s linear var(--tick); }
.hx:hover .hx-b, .hx:focus .hx-b, .hx:focus-within .hx-b { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hx:focus-visible { box-shadow: none; outline: 2px solid var(--text-primary); }
.pxload { display: inline-flex; gap: 5px; vertical-align: middle; }
.pxload i { width: 10px; height: 10px; background: var(--em); border: 2px solid var(--border); animation: pxhop 1s steps(1, end) infinite; }
.pxload i:nth-child(2) { animation-delay: .2s; } .pxload i:nth-child(3) { animation-delay: .4s; }
@keyframes pxhop { 0% { transform: translateY(0); } 25% { transform: translateY(-6px); } 50% { transform: translateY(0); } 100% { transform: translateY(0); } }
.state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.state .st-title { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-sm); }
.state.err .st-title { color: var(--critical-text); }
.empty { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }
.skel { display: inline-block; min-width: 4.5em; height: 1em; vertical-align: middle; background: repeating-linear-gradient(90deg, var(--series-1-softer) 0 8px, transparent 8px 12px); animation: pxfade 1.2s steps(2, start) infinite; }
@keyframes pxfade { 50% { opacity: .45; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  main.wrap > .card, main.wrap > section, main.wrap > .grid { animation: rise .36s steps(4, end) both; }
  main.wrap > :nth-child(2) { animation-delay: .06s; } main.wrap > :nth-child(3) { animation-delay: .12s; } main.wrap > :nth-child(4) { animation-delay: .18s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .htick .track, .ticker .track { animation: none !important; }
}
@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .note, .hint { font-size: var(--fs-xs); }
  .field input, .field textarea, .field select { font-size: 16px; }   
}
.hero .cta .btn { min-height: 48px; }
.px { transition: background var(--tick) steps(2); }
.px:hover { background: var(--series-1-softer); }
@media (max-width: 860px) { .hero .cta .btn { flex: 1 1 200px; } }
.authbox .btn.block { min-height: 52px; }
.plans .plan { transition: transform var(--tick) steps(2), box-shadow var(--tick) steps(2); }
.plans .plan:hover { transform: translate(-1px, -1px); box-shadow: var(--sh-1); }
@media (max-width: 760px) {
  #hours.seg, #quick.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bw); background: var(--border); }
  #quick.seg { grid-template-columns: repeat(4, 1fr); }
  #hours.seg button, #quick.seg button { border-left: 0 !important; padding-left: 4px; padding-right: 4px; text-align: center; }
  #hours.seg button:not([aria-pressed="true"]), #quick.seg button:not([aria-pressed="true"]) { background: var(--surface-1); }
  .ctl:has(> #hours), .ctl:has(> #quick) { flex-direction: column; align-items: stretch; width: 100%; gap: var(--sp-2); }
  #mainTabs { flex-wrap: wrap; }
  #spLeague.seg, #spView.seg, #ppSide.seg { display: grid; width: 100%; gap: var(--bw); background: var(--border); }
  #spLeague.seg { grid-template-columns: repeat(3, 1fr); }
  #spView.seg { grid-template-columns: repeat(2, 1fr); }
  #ppSide.seg { grid-template-columns: repeat(3, 1fr); }
  #spLeague.seg button, #spView.seg button, #ppSide.seg button { border-left: 0 !important; padding-left: 4px; padding-right: 4px; white-space: normal; line-height: 1.2; }
  #spLeague.seg button:not([aria-pressed="true"]), #spView.seg button:not([aria-pressed="true"]), #ppSide.seg button:not([aria-pressed="true"]) { background: var(--surface-1); }
}
.hxt { text-decoration: underline dotted var(--text-muted); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: help; }
main.wm:has(> .authbox)::before { position: static; display: block; inset: auto; transform: none; z-index: auto; opacity: 1;
  width: min(200px, 56%); max-width: none; height: auto; aspect-ratio: 1; margin: 6px auto 0; box-sizing: border-box; border: 2px solid var(--em);
  --veil: linear-gradient(color-mix(in srgb, var(--surface-1) 55%, transparent), color-mix(in srgb, var(--surface-1) 55%, transparent));
  background: var(--veil), url(/static/city-day.png) center / 100% 100% no-repeat; }
:root[data-theme="dark"] main.wm:has(> .authbox)::before { background-image: var(--veil), url(/static/city-night.png); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) main.wm:has(> .authbox)::before { background-image: var(--veil), url(/static/city-night.png); } }
main.wm:has(> .authbox)::after { display: none; }
main.wm:has(> .authbox)::after { display: none; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-mono-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-mono-500.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-mono-600.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/ibm-plex-mono-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }