/* Ball Knowledge Drive stylesheet. The token block below is Sports Ballpark's (ballpark.css), which is
   Pick 5's "Classic Ink" subset — copied verbatim so the three games wear one design system. */
/* ── Pick 5 design tokens (subset of bebida-games/web/src/pick5-tokens.css, "Classic Ink"
   palette) — copied from games/sports-golf/index.html, which copied them from Pick 5. Sports
   Baseball ships as a standalone static page with no build step, so the tokens travel as a copy. */
:root{
  --add-yellow:#F2D233; --add-charcoal:#2D2D2D; --add-white:#FFFFFF; --add-orange:#cc2200;
  --add-border-color:#141414; --add-shadow-color:#141414;
  --add-text:#141414; --add-surface:#FFFFFF; --add-bg:var(--add-yellow);
  --add-cta-bg:var(--add-text); --add-cta-fg:var(--add-yellow); --add-chip-fg:#141414;
  --add-focus-ring:var(--add-orange); --add-well:#FFF9E6; --add-error:var(--add-orange);
  --add-search-bg:#E8E8E8;
  --add-font-display:'Teko',system-ui,sans-serif; --add-font-body:'Archivo',system-ui,sans-serif;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.25rem;
  --display-xs:1.125rem; --display-sm:clamp(1.125rem,4.6vw,1.5rem);
  --display-md:clamp(1.5rem,6.5vw,2rem); --display-lg:clamp(2rem,9vw,3rem);
  --display-xl:clamp(2.75rem,14vw,4.25rem);
  --space-2xs:.25rem; --space-xs:.375rem; --space-sm:.5rem; --space-md:.75rem;
  --space-lg:1rem; --space-xl:1.25rem; --space-2xl:1.5rem;
  --radius-pill:9999px; --radius:.6875rem; --radius-lg:1rem;
  --border:.25rem solid var(--add-border-color); --border-sm:.1875rem solid var(--add-border-color);
  --border-thin:.125rem solid var(--add-border-color);
  --shadow-sm:.1875rem .1875rem 0 var(--add-shadow-color); --shadow:.3125rem .3125rem 0 var(--add-shadow-color);
  --shadow-pop:.4375rem .4375rem 0 var(--add-shadow-color); --tap:max(2.75rem,44px);
  --out-red:#CC2430;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --add-bg:#141414; --add-border-color:#4a4a4a;
    --add-shadow-color:color-mix(in srgb, var(--add-yellow) 49%, transparent);
    --add-text:#FFFFFF; --add-surface:#2D2D2D; --add-search-bg:#3A3A3A;
    --add-cta-bg:var(--add-yellow); --add-cta-fg:#141414;
    --add-focus-ring:var(--add-yellow); --add-error:#FF6B57; --add-well:#2D2D2D;
  }
}
:root[data-theme="dark"]{
  --add-bg:#141414; --add-border-color:#4a4a4a;
  --add-shadow-color:color-mix(in srgb, var(--add-yellow) 49%, transparent);
  --add-text:#FFFFFF; --add-surface:#2D2D2D; --add-search-bg:#3A3A3A;
  --add-cta-bg:var(--add-yellow); --add-cta-fg:#141414;
  --add-focus-ring:var(--add-yellow); --add-error:#FF6B57; --add-well:#2D2D2D;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:clamp(14px,1.06vw,27px)}
html,body{margin:0;padding:0;background:var(--add-bg)}
body{color:var(--add-text);font-family:var(--add-font-body);min-height:100dvh;overflow-x:hidden}
#app{max-width:26rem;margin:0 auto;padding:0 1rem;overflow-x:clip}
[hidden]{display:none!important}

/* League skins (Kota 9/30 "subtle changes"): the page chrome shifts, the field stays football.
   NFL = the house yellow + faint yard lines; NBA = basketball orange + a faint centre-court circle. */
:root[data-league="nba"]{--add-yellow:#F5A03A;--add-well:#FFF1E0}
/* MLB (Kota 10/1) = infield clay + a faint diamond */
:root[data-league="mlb"]{--add-yellow:#D9A06A;--add-well:#FFF4EA}
:root[data-league="mlb"]:not([data-theme="dark"]) #wordmark .muted{color:#3a2414}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-league="mlb"]{--add-well:#2D2D2D}}
:root[data-theme="dark"][data-league="mlb"]{--add-well:#2D2D2D}
:root[data-league="nba"]:not([data-theme="dark"]) #wordmark .muted{color:#3a2a14}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-league="nba"] #wordmark .muted{color:inherit}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-league="mlb"] #wordmark .muted{color:inherit}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-league="nba"]{--add-well:#2D2D2D}}
:root[data-theme="dark"][data-league="nba"]{--add-well:#2D2D2D}
body{background-attachment:fixed}
:root[data-league="nfl"] body{background-image:repeating-linear-gradient(0deg,transparent 0 calc(4rem - 1px),color-mix(in srgb,var(--add-text) 7%,transparent) calc(4rem - 1px) 4rem)}
:root[data-league="nba"] body{background-image:radial-gradient(circle at 50% 55%,transparent 0 11.5rem,color-mix(in srgb,var(--add-text) 8%,transparent) 11.5rem calc(11.5rem + 2px),transparent calc(11.5rem + 2px)),
  linear-gradient(0deg,transparent 0 calc(55% - 1px),color-mix(in srgb,var(--add-text) 8%,transparent) calc(55% - 1px) calc(55% + 1px),transparent calc(55% + 1px))}

.screen{display:flex;flex-direction:column;min-height:100dvh}
.screen.screen-fade-in{animation:sf-screen-in .22s ease both}
.screen.screen-fade-in.from-left{animation-name:sf-screen-in-left}
@keyframes sf-screen-in{from{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:translateX(0)}}
@keyframes sf-screen-in-left{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:translateX(0)}}

.icon-btn{width:max(2.25rem,40px);height:max(2.25rem,40px);flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--add-surface);border:var(--border-thin);border-radius:var(--radius-pill);padding:0;font-size:1.05rem;
  line-height:1;color:var(--add-text);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease}
.icon-btn:hover{transform:translate(-.0625rem,-.0625rem);box-shadow:var(--shadow)}
/* Home / Reset (Kota 9/30): labelled pills, not bare icons */
.text-btn{width:auto;padding:0 .8rem;gap:.35rem;font-family:var(--add-font-display);font-weight:700;font-size:var(--display-xs);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.text-btn.armed{background:var(--out-red);color:#fff;border-color:#141414}

.card{position:relative;background:var(--add-surface);border:var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--space-xl)}
.card-tab{position:absolute;top:-.75rem;left:1rem;background:#141414;color:var(--add-yellow);border-radius:var(--radius-pill);
  padding:.28rem .85rem .2rem;font-family:var(--add-font-display);font-weight:700;font-size:var(--display-xs);letter-spacing:.06em;
  text-transform:uppercase;line-height:1;white-space:nowrap;box-shadow:var(--shadow-sm);max-width:calc(100% - 2rem);overflow:hidden;text-overflow:ellipsis}

button.primary{width:100%;margin-top:var(--space-sm);min-height:var(--tap);border-radius:var(--radius);border:var(--border);
  background:var(--add-cta-bg);color:var(--add-cta-fg);font-family:var(--add-font-display);font-weight:600;font-size:var(--display-xs);
  letter-spacing:.04em;text-transform:uppercase;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;
  padding:.35rem .75rem .2rem;line-height:1.05}
button.primary:hover:not(:disabled){transform:translate(-.125rem,-.125rem);box-shadow:var(--shadow-pop)}
button.primary:disabled{opacity:.5;cursor:not-allowed}
button.secondary{background:var(--add-surface);color:var(--add-text)}
button.primary small{display:block;font-family:var(--add-font-body);font-weight:700;font-size:var(--text-xs);letter-spacing:.03em;text-transform:none;opacity:.8}

/* ── Start screen */
#start-topbar{display:flex;justify-content:flex-end;padding:.75rem 0 0}
#start-screen{gap:var(--space-lg);padding-bottom:2rem}
#start-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:.25rem 0 .25rem}
#start-art{width:100%;aspect-ratio:360/216;height:auto;display:block;border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
#wordmark{font-family:var(--add-font-display);font-weight:700;font-size:var(--display-lg);letter-spacing:.03em;line-height:.95;text-transform:uppercase}
#wordmark .muted{display:block;font-family:var(--add-font-body);font-weight:400;font-size:var(--text-sm);letter-spacing:normal;text-transform:none;
  color:color-mix(in srgb, var(--add-text) 60%, transparent);margin-top:.35rem}
#start-card{display:flex;flex-direction:column;gap:var(--space-md);padding-top:var(--space-xl)}
/* League switch (Kota 9/30, the NBA version) — Ballpark versus's picker */
.league-pick{display:flex;gap:.4rem}
.league-pick button{flex:1;min-height:var(--tap);border:var(--border-thin);border-radius:var(--radius);background:var(--add-surface);color:var(--add-text);
  font-family:var(--add-font-display);font-weight:600;font-size:var(--display-xs);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.league-pick button[aria-pressed="true"]{background:var(--add-yellow);color:var(--add-chip-fg);border-color:#141414}
.field-label{display:block;font-weight:800;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.3rem;
  color:color-mix(in srgb, var(--add-text) 70%, transparent)}
.text-input{width:100%;padding:.7rem .75rem;font-family:var(--add-font-body);font-weight:700;font-size:max(16px,1rem);
  border:var(--border-sm);border-radius:var(--radius);background:var(--add-search-bg);color:var(--add-text)}
.text-input::placeholder{color:color-mix(in srgb, var(--add-text) 65%, transparent)}
.text-input:focus{outline:.1875rem solid var(--add-focus-ring);outline-offset:.125rem}
#howto{font-size:var(--text-xs);color:color-mix(in srgb, var(--add-text) 75%, transparent)}
#howto summary{cursor:pointer;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:var(--text-xs);
  list-style:none;display:flex;align-items:center;gap:.3rem;color:var(--add-text)}
#howto summary::-webkit-details-marker{display:none}
#howto summary::before{content:"▸";display:inline-block;transition:transform .15s ease}
#howto[open] summary::before{transform:rotate(90deg)}
#howto p,#howto li{margin:.35rem 0 0;line-height:1.45}
#howto ul{margin:.35rem 0 0;padding-left:1.1rem}

/* ── Game screen */
#game-screen{gap:var(--space-md);padding-bottom:var(--space-xl)}
#topbar{background:var(--add-charcoal);margin:0 -1rem;padding:.55rem 1rem;flex-shrink:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:var(--border);gap:var(--space-sm)}
#game-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-family:var(--add-font-display);font-weight:700;font-size:var(--display-sm);
  letter-spacing:.03em;color:var(--add-yellow);text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Scoreboard: both names + scores, the ball chip on whoever has it */
#scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.team{display:flex;align-items:center;justify-content:space-between;gap:.4rem;min-width:0;background:var(--add-surface);border:var(--border-sm);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:.35rem .6rem .3rem}
.team.on{background:var(--add-yellow);color:var(--add-chip-fg)}
.team .nm{min-width:0;font-weight:800;font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team .nm .poss{font-size:.8rem;margin-right:.2rem}
.team .pts{font-family:var(--add-font-display);font-weight:700;font-size:var(--display-md);line-height:1}

/* Field strip */
#field-card{padding:var(--space-md) var(--space-md) var(--space-sm)}
#strip-wrap{position:relative}
/* the QB cam with the drive chart standing upright on its right; the chart's width is sized so its
   34:120 height matches the cam's 360:216 (s = (W − gap) · 0.17 / 1.17) */
#strip-wrap{display:flex;gap:6px;align-items:flex-start}
#cam{flex:1 1 auto;min-width:0;width:calc(100% - 6px - (100% - 6px) * .1453);aspect-ratio:360/216;height:auto;display:block;border-radius:.4rem;border:var(--border-thin);background:#141414;box-sizing:border-box}
#strip{flex:0 0 calc((100% - 6px) * .1453);width:calc((100% - 6px) * .1453);aspect-ratio:34/120;height:auto;display:block;border-radius:.4rem;border:var(--border-thin);box-sizing:border-box}
#downline{display:none;align-items:baseline;justify-content:space-between;gap:var(--space-sm);margin-top:.45rem}
#dd{font-family:var(--add-font-display);font-weight:700;font-size:var(--display-md);line-height:1;text-transform:uppercase;letter-spacing:.02em}
#spot{font-weight:800;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.06em;color:color-mix(in srgb, var(--add-text) 65%, transparent);text-align:right}
.sf-grass0{fill:#3f9b4a}.sf-grass1{fill:#388b42}
.sf-ez-own{fill:#2D2D2D}.sf-ez-goal{fill:#141414}
.sf-ez-text{font-family:var(--add-font-display);font-weight:700;font-size:5px;letter-spacing:.08em;text-anchor:middle;dominant-baseline:central}
.sf-ez-text-own{fill:#bdbdbd}.sf-ez-text-goal{fill:#F2D233}
.sf-line{stroke:rgba(255,255,255,.45);stroke-width:.25}.sf-major{stroke:rgba(255,255,255,.8);stroke-width:.4}
.sf-goalline{stroke:#fff;stroke-width:.7}
.sf-num{fill:rgba(255,255,255,.85);font-family:var(--add-font-display);font-weight:600;font-size:4.2px;text-anchor:middle}
/* the upright drive chart is ~46px wide on a phone: bigger labels, a grass halo so lines never cut the digits */
.sf-num-v{font-size:7px;paint-order:stroke;stroke:#388b42;stroke-width:1.6px;stroke-linejoin:round}
.sf-ez-v{font-size:6.2px;letter-spacing:.02em}
.sf-post{stroke:#F2D233;stroke-width:.8;fill:none;stroke-linecap:round}
.sf-los{stroke:#6fb7ff;stroke-width:.7}
.sf-first{stroke:#F2D233;stroke-width:1.1}
.sf-ball-body{fill:#8a4b22;stroke:#141414;stroke-width:.45}
.sf-ball-lace{stroke:#fff;stroke-width:.3;fill:none}
.sf-los,.sf-first,.sf-ball{transition:transform .9s cubic-bezier(.3,.7,.3,1),opacity .3s ease}
#banner{position:absolute;left:50%;top:50%;z-index:5;pointer-events:none;transform:translate(-50%,-50%) rotate(-4deg) scale(.6);opacity:0;
  font-family:var(--add-font-display);font-weight:700;font-size:var(--display-md);line-height:.85;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  padding:.4rem .9rem .15rem;background:#141414;color:var(--add-yellow);border-radius:.5rem;box-shadow:.25rem .25rem 0 var(--add-orange);
  transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .15s}
#banner.show{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1)}

/* Drive panel: the three calls + this drive so far */
#actions{display:flex;flex-direction:column}
#actions button.primary:first-child{margin-top:0}
#drivelog{list-style:none;margin:var(--space-md) 0 0;padding:0;font-size:var(--text-xs)}
#drivelog:empty{display:none}
#drivelog li{padding:.3rem 0;border-bottom:.125rem dashed color-mix(in srgb, var(--add-text) 22%, transparent);line-height:1.35}
#drivelog li:last-child{border-bottom:none}
.log-head{font-weight:800;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;margin-top:var(--space-md);
  color:color-mix(in srgb, var(--add-text) 60%, transparent)}

/* Hole card (a down or a kick) */
#hole-card{padding-top:var(--space-xl)}
#target{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);margin:.35rem 0 .35rem}
#number{flex-shrink:0;font-family:var(--add-font-display);font-weight:700;font-size:var(--display-lg);line-height:1;
  transform:translateY(1rem);opacity:0;transition:transform .35s ease,opacity .35s ease}
#number.in{transform:none;opacity:1}
#number small{font-family:var(--add-font-body);font-weight:700;font-size:var(--text-sm);color:color-mix(in srgb, var(--add-text) 55%, transparent);
  margin-left:.4rem;text-transform:uppercase;letter-spacing:.04em}
#category{flex:1;min-width:0;text-align:right;font-weight:800;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;text-wrap:balance}
#category .pill{display:inline-block;margin-top:.2rem;padding:.2rem .55rem .15rem;border-radius:var(--radius-pill);background:var(--add-yellow);color:var(--add-chip-fg);
  font-size:.62rem;letter-spacing:.06em;border:var(--border-thin)}
.info-btn{display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--space-sm);padding:.2rem .6rem .2rem .25rem;min-height:2rem;background:none;border:0;
  color:var(--add-text);font-family:var(--add-font-body);font-size:var(--text-xs);font-weight:700;cursor:pointer}
.info-btn .i{display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;border:var(--border-thin);
  background:var(--add-surface);font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:.85rem;line-height:1}
.info-btn[aria-expanded="true"] .i{background:var(--add-text);color:var(--add-surface)}
.info-btn:focus-visible{outline:2px solid var(--add-focus-ring);outline-offset:2px;border-radius:var(--radius)}
#hint{animation:sf-hint-in .18s ease both}
@keyframes sf-hint-in{from{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:none}}
#hint{font-size:var(--text-xs);font-weight:700;padding:.4rem .6rem;border-radius:var(--radius);background:var(--add-well);border:var(--border-thin);margin-top:var(--space-sm);line-height:1.35}
#entry-field{position:relative}
#suggestions{list-style:none;position:absolute;left:0;right:0;top:calc(100% + .2rem);z-index:20;margin:0;padding:0;max-height:13rem;overflow:auto;
  border-radius:var(--radius);border:var(--border-sm);background:var(--add-surface);box-shadow:var(--shadow)}
#suggestions:empty{border:none;box-shadow:none}
#suggestions li{padding:.55rem .75rem;border-bottom:.0625rem solid color-mix(in srgb, var(--add-text) 16%, transparent);cursor:pointer;font-weight:700}
#suggestions li:last-child{border-bottom:none}
#suggestions li[aria-selected="true"]{background:color-mix(in srgb, var(--add-yellow) 35%, transparent)}
#suggestions li small{color:color-mix(in srgb, var(--add-text) 55%, transparent);margin-left:.4rem;font-weight:400}
#reveal .reward{margin:0 0 .35rem;padding:.45rem .6rem;border-radius:var(--radius);border:var(--border-thin);font-weight:700;font-size:var(--text-sm);text-align:center}
#reveal .reward b{display:block;font-family:var(--add-font-display);font-size:var(--display-md);line-height:1;letter-spacing:.03em;text-transform:uppercase}
#reveal .reward.hailmary,#reveal .reward.good,#reveal .reward.td{background:#141414;color:var(--add-yellow);border-color:#141414}
#reveal .reward.pass{background:var(--add-yellow);color:var(--add-chip-fg)}
#reveal .reward.loss,#reveal .reward.nogood,#reveal .reward.downs{background:var(--out-red);color:#fff;border-color:var(--out-red)}
.line{display:flex;justify-content:space-between;gap:var(--space-md);padding:.35rem 0;
  border-bottom:.125rem dashed color-mix(in srgb, var(--add-text) 22%, transparent);font-size:var(--text-sm)}
.line:last-of-type{border-bottom:none}
.line span:first-child{flex-shrink:0;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:var(--text-xs);color:color-mix(in srgb, var(--add-text) 60%, transparent)}
.line span:last-child{text-align:right;font-weight:700}

/* Handoff */

/* Final */
#final-card .result{font-family:var(--add-font-display);font-weight:700;font-size:var(--display-lg);text-align:center;padding:.5rem .5rem .3rem;line-height:.95;
  border-radius:var(--radius-lg);background:var(--add-yellow);color:var(--add-chip-fg);margin-bottom:var(--space-sm);text-transform:uppercase}
#final-card .result small{display:block;font-size:var(--display-sm);letter-spacing:.04em}
.box h3{margin:var(--space-md) 0 .15rem;font-family:var(--add-font-display);font-weight:700;font-size:var(--display-sm);letter-spacing:.03em;text-transform:uppercase;line-height:1}
.box ol{margin:0;padding-left:1.2rem;font-size:var(--text-xs);line-height:1.4}
.box ol li{padding:.15rem 0}
.box h4{margin:var(--space-sm) 0 .2rem;font-family:var(--add-font-display);font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase}
.box h4:first-child{margin-top:0}
#share{font-family:var(--add-font-body);font-weight:700;white-space:pre-wrap;background:var(--add-search-bg);padding:.85rem;
  border-radius:var(--radius);margin:var(--space-md) 0 0;font-size:var(--text-sm);color:var(--add-text)}
.actions{display:flex;gap:var(--space-sm)}
.actions button{flex:1;min-width:0}

@media (prefers-reduced-motion: reduce){
  .screen.screen-fade-in,.screen.screen-fade-in.from-left{animation:none}
  .sf-los,.sf-first,.sf-ball,#banner,#number{transition:none}
}
#topbar>#back-btn{justify-self:start}
.bar-right{justify-self:end;display:flex;gap:var(--space-sm)}
@media (max-width: 30rem){#game-title .long{display:none}.text-btn{width:max(2.25rem,40px);padding:0}.text-btn .lbl{display:none}.text-btn.armed{width:auto;padding:0 .6rem}.text-btn.armed .lbl{display:inline}}
/* Desktop: Pick 5's centered column (45vw, 360px floor) with the full-bleed top bar */
@media (min-width: 40rem){
  #app{max-width:min(100%, max(340px, 38vw));overflow-x:visible}
  #topbar{margin:0 calc(50% - 50vw);padding:.6rem 1.5rem}
}

/* #1 anchor on the hole card (Pick 5 style) */
#leader{display:flex;align-items:center;gap:var(--space-sm);margin:0 0 var(--space-md);padding:var(--space-xs) var(--space-md);
  border:var(--border-thin);border-radius:var(--radius);background:var(--add-well);color:var(--add-text);font-size:var(--text-sm);font-weight:700}
#leader:empty{display:none}
#leader .lk{flex:none;padding:.1rem .5rem 0;border-radius:var(--radius-pill);background:var(--add-text);color:var(--add-surface);
  font-family:var(--add-font-display);font-size:var(--display-xs);line-height:1.2}
#leader .muted{font-weight:500;opacity:.7}