/* Shared polish for the site pages (index, creations, scorebug, obs, broadcast, bracket).
   Loaded after each page's own style block, so it only refines. Layout scenes never load it. */
:root{--navh:0px}
html{scroll-padding-top:calc(var(--navh) + 16px);-webkit-text-size-adjust:100%}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--gold);color:var(--gold-ink)}
html{scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:999px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#56606d}

/* Easier reading: a little more room between lines and no tiny text */
p,li,dd,figcaption,.note,.intro,.lead{line-height:1.6}
.note,p.note,div.note,label.note{font-size:15px}
figcaption{font-size:15px}
.sitenav .aihint,.sitenav .aihint:visited{font-size:14px}
.sitefoot{font-size:15px}

/* Site navigation: sticks to the top on wide screens */
.sitenav{row-gap:8px}
.sitenav .tab,.sitenav .tab:visited{transition:border-color .15s,background-color .15s,color .15s,transform .15s}
.sitenav .tab:hover{background:rgba(250,194,106,.1)}
.sitenav .tab[aria-current="page"]:hover{background:var(--gold)}
.sitenav .tab:active{transform:translateY(1px)}
@media (min-width:1600px){
  .sitenav{display:grid;grid-template-columns:auto 1fr;column-gap:24px;row-gap:0;align-items:center}
  .sitenav .brand{grid-row:1;padding:2px 4px 0;line-height:1.1}
  .sitenav .aihint,.sitenav .aihint:visited{grid-row:2;justify-self:start;padding:2px 4px;margin:0}
  .sitenav .navtabs{grid-column:2;grid-row:1 / 3;justify-content:flex-end}
}
@media (min-width:1600px) and (max-width:1759px){
  .sitenav .tab,.sitenav .tab:visited{padding:0 12px;font-size:14px}
}
/* Mid width screens: name on top, all tabs on one row underneath (wraps rather than running off the page) */
@media (min-width:1200px) and (max-width:1599px){
  :root{--navh:118px}
  .sitenav{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px}
  .sitenav .aihint{margin-right:auto}
  .sitenav .navtabs{flex:1 0 100%;flex-wrap:wrap !important;justify-content:flex-start}
  .sitenav .tab,.sitenav .tab:visited{padding:0 12px;font-size:14px}
}
@media (min-width:1200px){
  :root{--navh:72px}
  .sitenav{position:sticky;top:0;z-index:60;margin-top:-20px;padding-top:12px;padding-bottom:12px;
    background:rgba(9,10,13,.86);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
    box-shadow:0 0 0 100vmax rgba(9,10,13,.86);clip-path:inset(0 -100vmax)}
  .sitenav .navtabs{flex-wrap:nowrap}
  .sitenav .tab{white-space:nowrap}
  .grid > .right{top:calc(var(--navh) + 12px)}
}
.navtabs{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
@media (min-width:1600px){.sitenav .navtabs{justify-content:flex-end}}
/* Phones and tablets: one row of tabs you can swipe, instead of four rows */
@media (max-width:1199px){
  .sitenav .brand{margin-right:0}
  .sitenav .aihint{margin-right:auto}
  .navtabs{flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 40px),transparent)}
  .navtabs::-webkit-scrollbar{display:none}
  .navtabs .tab{flex:none;white-space:nowrap}
}
/* Buttons and links feel the same everywhere */
button,.go,.b,select,input,textarea{transition:border-color .15s,background-color .15s,filter .15s,box-shadow .15s}
button:not(:disabled),.go{cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
a{text-underline-offset:3px}

/* Cards lift a touch on hover where they are links */
.shots a,.grid .card{transition:border-color .15s,transform .15s}
.shots a:hover{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important}
}

/* Draft studio on phones: two look cards per row instead of one */
@media (max-width:560px){
  #segStyle .chips button{width:calc(50% - 4px)}
}

/* Status lines take no room until they have something to say */
.msg:empty{margin:0 !important;padding:0 !important;min-height:0 !important;border:0 !important}

/* ---- Second pass ---- */
/* Navigation reads as navigation, not as eight buttons: quiet tabs, the current page marked in gold */
.sitenav .tab,.sitenav .tab:visited{border-color:transparent;color:#d9e2ee;position:relative}
.sitenav .tab:hover{border-color:transparent;background:rgba(255,255,255,.06);color:#fff}
.sitenav .tab[aria-current="page"],.sitenav .tab[aria-current="page"]:hover{background:rgba(250,194,106,.14);border-color:rgba(250,194,106,.55);color:var(--gold)}
.sitenav .brand{letter-spacing:.16em}

/* Page titles: one size and rhythm on every page */
.wrap > header h1,.wrap > h1{font-size:clamp(32px,4.2vw,48px);line-height:1.05;letter-spacing:.05em}
.wrap > header{margin-bottom:12px}
.intro,.lead{font-size:18px;color:#c9d6e6;max-width:68ch}

/* Panels: a soft top light and depth so cards sit off the background */
.panelbox,.lookbar,.obs,.card,.box,.sec,.pk,.bre .ebox{
  background-image:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 120px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 32px rgba(0,0,0,.28)}
.card{transition:border-color .15s,transform .15s,box-shadow .15s}
.card:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.4)}

/* Primary buttons get a little weight */
.go,.pri,button.pri{box-shadow:0 6px 18px rgba(250,194,106,.18)}
.go:hover,.pri:hover{box-shadow:0 8px 24px rgba(250,194,106,.28)}

/* Bracket: the optional Challonge import folds away until you want it */
details.chbox > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center}
details.chbox > summary::-webkit-details-marker{display:none}
details.chbox > summary h2{margin:0}
details.chbox > summary::after{content:"+";grid-row:1 / 3;grid-column:2;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;border:1px solid var(--line2);color:var(--gold);font-size:22px;font-weight:700;line-height:1}
details.chbox[open] > summary::after{content:"\2212"}
details.chbox > summary .sumhint{grid-column:1;margin-top:4px;color:var(--mute);font-size:15px;line-height:1.5}
details.chbox[open] > summary{margin-bottom:12px}
details.chbox > summary:hover::after{border-color:var(--gold)}

/* Broadcast: the four start steps as cards in a row, no empty half */
#start ol{list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:0;max-width:none;margin:4px 0 14px}
#start ol li{counter-increment:st;margin:0;padding:16px 16px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
#start ol li::before{content:counter(st);display:grid;place-items:center;width:32px;height:32px;margin:0 0 10px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-weight:700;font-size:16px}
#start ol li b{display:block;margin:0 0 4px;font-size:17px}

/* Footer: links to every part of the site plus the AI note */
.sitefoot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 40px;padding-top:26px;margin-top:48px}
.footbrand{display:inline-block;margin:0 0 10px;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.16em;color:var(--fg);text-decoration:none}
.footbrand:hover{color:var(--gold)}
.footnav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.footnav b{display:block;margin:0 0 8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.footnav a{display:block;padding:5px 0;color:#d9e2ee;text-decoration:none;font-size:16px}
.footnav a:hover{color:var(--gold);text-decoration:underline}
/* Site version (v1.0 from 2026-10-04; then 1.1, 1.2, and 2.0 for the next big change) */
.sitefoot .ver{margin:12px 0 0}
.sitefoot .ver a{display:inline-block;padding:3px 12px;border:1px solid rgba(250,194,106,.55);border-radius:999px;color:#fac26a;font-size:14px;font-weight:700;letter-spacing:.08em;text-decoration:none}
.sitefoot .ver a:hover{background:rgba(250,194,106,.12)}
@media (max-width:760px){.sitefoot{grid-template-columns:1fr}.footnav{grid-template-columns:repeat(2,minmax(0,1fr))}}
.go.ghost,.go.ghost:hover{box-shadow:none}
.go.ghost:hover{border-color:var(--gold)}

/* Wordmark logo in the menu and footer (drawn in wordmark.css) */
.sitenav .brand.wmlink,.footbrand.wmlink{display:inline-flex;align-items:center;padding:4px 2px;letter-spacing:0;text-decoration:none;line-height:1}
.sitenav .brand.wmlink .wm{font-size:30px}
.footbrand.wmlink .wm{font-size:26px}
.wmlink .wm{transition:filter .15s,transform .15s}
.wmlink:hover .wm,.wmlink:focus-visible .wm{filter:brightness(1.08) drop-shadow(0 0 10px rgba(247,166,216,.25))}
@media (max-width:560px){.sitenav .brand.wmlink .wm{font-size:24px}}
/* Long addresses in running text wrap instead of running off the card on phones */
p,li,td,dd{overflow-wrap:break-word}