/* HUD (BASE-THEME.md): tech-led - instrument lines, mono read-outs, segmented meters, corner brackets on the panels that
   matter. Oxanium for display, IBM Plex Sans for words, IBM Plex Mono for figures (fontsource 5.3.0, latin, OFL - the
   licences sit beside the files). */
@font-face{font-family:'Oxanium';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/oxanium-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/oxanium-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/oxanium-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}

:root{
  --st-font-display:'Oxanium',system-ui,sans-serif;--st-font-body:'IBM Plex Sans',system-ui,sans-serif;--st-font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --st-r:4px;--st-r-sm:3px;--st-r-btn:4px;--st-r-in:3px;--st-bw:1px;--st-border:var(--st-line);--st-label-track:.12em;
  --st-btn-lift:0 0 0 1px var(--st-p-line),0 0 22px var(--st-p-glow);
}
body.st-look{background-image:linear-gradient(var(--st-grid) 1px,transparent 1px),linear-gradient(90deg,var(--st-grid) 1px,transparent 1px);background-size:26px 26px}

/* read-outs in mono capitals */
.st-chip,.st-caps,.st-nav a,.st-card__meta,.st-window,.st-seg>a,.st-seg>label,.st-boost,.st-last,.st-status,.st-iwdlg__kicker,.st-prize__strip,.st-tabsnav a,.st-or{font-family:var(--st-font-mono);letter-spacing:.1em;text-transform:uppercase}
.st-nav a{font-size:12px;font-weight:600}
.st-chip{border-radius:2px;font-weight:600}
.st-chip i{border-radius:1px}
.st-btn{font-weight:700;letter-spacing:.1em}
.st-btn--quiet{box-shadow:none}
.st-price{border-radius:2px;font-family:var(--st-font-mono)}
.st-price b{font-family:var(--st-font-mono);font-weight:600}
.st-num{font-weight:600}

/* corner brackets on the panels that hold the page's main things, drawn over what they hold (a picture included) */
.st-card,.st-feature,.st-spendbox,.st-buy,.st-iw__board,.st-state,.st-std,.st-linecard{position:relative}
:is(.st-card,.st-feature,.st-spendbox,.st-buy,.st-iw__board,.st-state,.st-std,.st-linecard)::after{content:"";position:absolute;inset:-1px;z-index:3;pointer-events:none;
  background:linear-gradient(var(--st-p),var(--st-p)) 0 0/16px 2px,linear-gradient(var(--st-p),var(--st-p)) 0 0/2px 16px,
    linear-gradient(var(--st-p),var(--st-p)) 100% 100%/16px 2px,linear-gradient(var(--st-p),var(--st-p)) 100% 100%/2px 16px;background-repeat:no-repeat}

/* meters in segments: the fill shows through 20 cells */
.st-meter{height:10px;border-radius:1px;background:var(--st-s3)}
.st-meter__fill{border-radius:1px;box-shadow:0 0 10px var(--st-p-glow)}
.st-meter::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(5% - 3px),var(--st-meter-gap,var(--st-s1)) calc(5% - 3px) 5%)}
body.st-look>main>.st-meter::after{--st-meter-gap:var(--st-bg)}

.st-card.is-boosted::after,.st-feature.is-boosted::after{background:none}