/*
Theme Name:   Specrove
Theme URI:    https://specrove.com
Description:  Child theme of GeneratePress for Specrove — European phone specifications.
Author:       Specrove
Author URI:   https://specrove.com
Template:     generatepress
Version:      2.5.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  specrove-child
*/

/* ==========================================================================
   Design tokens, carried over from the prototype
   ========================================================================== */

:root {
  --bg:#EFF1F0; --surface:#FFF; --sunk:#E3E7E7;
  --ink:#14181C; --mute:#5B6570; --faint:#8B949B;
  --rule:#D9DDDE; --hard:#14181C;
  --accent:#17439B; --accent-ink:#FFF; --accent-soft:rgba(23,67,155,.09);
  --red:#C8352B; --green:#1F6B44; --amber:#9A6B12; --eu-a:#00A651;
}

/* ==========================================================================
   Single phone
   ========================================================================== */

.sp-phone{background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:15px;line-height:1.6}
.sp-rail{max-width:1180px;margin:0 auto;padding:0 22px}
.sp-body{padding:30px 0 80px}

.sp-crumb{font:400 .72rem/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--faint);padding:20px 0 0;margin:0}
.sp-crumb a{color:var(--faint);text-decoration:none}
.sp-crumb a:hover{color:var(--accent);text-decoration:underline}

.sp-head{padding:18px 0 26px;border-bottom:1.5px solid var(--hard)}
.sp-vline{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font:400 .68rem/1.6 "IBM Plex Mono",ui-monospace,monospace;color:var(--faint);margin:0 0 12px}
.sp-stamp{background:var(--green);color:#fff;padding:3px 8px;font:600 .58rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.sp-stamp.todo{background:var(--amber)}

.sp-phone h1{font:600 2.15rem/1.1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.035em;margin:0 0 6px}
.sp-sub{font:400 .82rem/1.4 "IBM Plex Mono",ui-monospace,monospace;color:var(--mute);margin:0 0 16px}
.sp-lede{font-size:1rem;color:var(--mute);max-width:68ch;margin:0 0 22px}
.sp-lede b{color:var(--ink);font-weight:600}

.sp-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin:0}
.sp-quick>div{background:var(--surface);padding:12px 14px}
.sp-quick dt{font:500 .56rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.sp-quick dd{font:600 1.32rem/1.1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.03em;margin:0}
.sp-quick dd small{display:block;font:400 .64rem/1.4 "IBM Plex Mono",ui-monospace,monospace;color:var(--faint);letter-spacing:0;margin-top:3px}

/* market variance — the reason the site exists */
.sp-var{border:1.5px solid var(--accent);background:var(--surface);padding:16px 18px;margin-bottom:30px}
.sp-var h2{font:600 1.05rem/1.2 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.02em;margin:0 0 14px;color:var(--accent)}
.sp-varblock+.sp-varblock{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}
.sp-varf{font:500 .58rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.sp-varrows{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sp-varrow{background:var(--surface);display:grid;grid-template-columns:62px 1fr 1.4fr;gap:12px;align-items:baseline;padding:9px 12px}
.sp-varrow.here{background:var(--accent-soft)}
.sp-varm{font:600 .62rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;color:var(--accent)}
.sp-varrow:not(.here) .sp-varm{color:var(--faint)}
.sp-varv{font:600 .95rem/1.3 "IBM Plex Sans",system-ui,sans-serif}
.sp-varn{font:400 .72rem/1.4 "IBM Plex Mono",ui-monospace,monospace;color:var(--faint)}

.sp-note{border-left:3px solid var(--hard);padding:2px 0 2px 14px;margin:0 0 30px;color:var(--mute);max-width:70ch}

.sp-grp{margin-bottom:38px}
.sp-grpt{font:500 .6rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding-bottom:10px;margin-bottom:4px;border-bottom:1.5px solid var(--hard)}

.sp-grp dl{margin:0}
.sp-ln{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--rule)}
.sp-ln dt{font-size:.88rem;color:var(--mute);margin:0}
.sp-lead{border-bottom:1px dotted var(--rule);transform:translateY(-3px)}
.sp-ln dd{margin:0;text-align:right;font:500 .9rem/1.4 "IBM Plex Sans",system-ui,sans-serif}
.sp-ln dd em{font:400 .72rem/1.4 "IBM Plex Mono",ui-monospace,monospace;color:var(--faint);font-style:normal;display:block}

.sp-eul{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:start;padding-top:14px}
.sp-chev{background:var(--eu-a);color:#fff;display:grid;place-items:center;font:700 2.4rem/1 "IBM Plex Sans",system-ui,sans-serif;height:92px}
.sp-eus{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sp-eur{background:var(--surface);display:flex;justify-content:space-between;gap:12px;padding:8px 12px;font-size:.85rem}
.sp-eur span:last-child{font-weight:600}
.sp-fine{font:400 .74rem/1.6 "IBM Plex Sans",system-ui,sans-serif;color:var(--faint);margin:12px 0 0;max-width:70ch}

.sp-prov{border-top:1.5px solid var(--hard);padding-top:14px;margin-bottom:38px}
.sp-prov p{font-size:.84rem;color:var(--mute);max-width:74ch;margin:10px 0 0}
.sp-prov a{color:var(--accent)}

.sp-rel{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:14px}
.sp-relc{background:var(--surface);padding:12px 14px;text-decoration:none;color:var(--ink);display:block}
.sp-relc:hover{background:var(--accent-soft)}
.sp-reldot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-bottom:8px}
.sp-reldot.todo{background:var(--amber)}
.sp-reln{display:block;font:600 .92rem/1.3 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.02em}
.sp-rely{display:block;font:400 .68rem/1.4 "IBM Plex Mono",ui-monospace,monospace;color:var(--faint);margin-top:3px}

@media (max-width:900px){
  .sp-phone h1{font-size:1.65rem}
  .sp-quick{grid-template-columns:1fr 1fr}
  .sp-rel{grid-template-columns:1fr 1fr}
  .sp-varrow{grid-template-columns:52px 1fr}
  .sp-varn{grid-column:2}
  .sp-eul{grid-template-columns:68px 1fr}
  .sp-chev{height:68px;font-size:1.8rem}
  .sp-ln{grid-template-columns:1fr auto}
  .sp-lead{display:none}
}

/* group titles carry a subtitle on the first block only */
.sp-grpt{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sp-grpn{font:400 .6rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:none;color:var(--faint);opacity:.8}

/* spec groups sit closer together than standalone sections */
.sp-grp + .sp-grp{margin-top:-14px}

/* ad slot — collapsed to nothing until something is hooked on */
.sp-ad{margin:26px 0;text-align:center;min-height:0}
.sp-ad:empty{display:none}
.sp-ad > *{max-width:100%}
.sp-adlabel{display:block;font:400 .56rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}

/* ==========================================================================
   Breathing room
   Rows sat too close together to scan comfortably. Wider padding, a clearer
   gap between groups, and headings that stand away from the rows under them.
   ========================================================================== */

.sp-ln{padding:13px 0;gap:14px}
.sp-ln dt{font-size:.9rem;line-height:1.5}
.sp-ln dd{font-size:.92rem;line-height:1.5}
.sp-ln dd em{margin-top:4px;line-height:1.5}
.sp-ln:last-child{border-bottom:0}

.sp-grp{margin-bottom:34px}
.sp-grp + .sp-grp{margin-top:0}
.sp-grpt{padding-bottom:13px;margin-bottom:6px}

.sp-quick > div{padding:16px 16px}
.sp-quick dt{margin-bottom:8px}

.sp-eur{padding:11px 14px}
.sp-varrow{padding:12px 14px}
.sp-relc{padding:15px 16px}

@media (max-width:900px){
  .sp-ln{padding:14px 0;gap:16px;grid-template-columns:1fr auto}
  .sp-ln dd{padding-left:10px}
  .sp-grp{margin-bottom:30px}
}

/* ==========================================================================
   Side margins
   GeneratePress strips the padding off its inner container on narrow screens,
   which left the table touching both edges. The rail sets its own gutter and
   the rows inherit it, so nothing reaches the edge of the screen.
   ========================================================================== */

.sp-rail{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:24px;
  box-sizing:border-box;
}

/* the phone article should not be squeezed by the parent container either */
.sp-phone{width:100%;box-sizing:border-box}
.sp-phone *,
.sp-phone *::before,
.sp-phone *::after{box-sizing:border-box}

/* long values wrap instead of running off the right edge */
.sp-ln dd{
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:none;
}
.sp-ln dt{overflow-wrap:anywhere}

@media (max-width:900px){
  .sp-rail{padding-inline:20px}
  .sp-ln{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px}
  .sp-ln dd{padding-left:0}
}

@media (max-width:420px){
  .sp-rail{padding-inline:16px}
  .sp-ln{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sp-phone h1{font-size:1.5rem}
}

/* ==========================================================================
   Index and brand archive
   ========================================================================== */

.sp-index .sp-head{padding-top:26px}
.sp-index h1{margin-bottom:12px}

/* brand filter */
.sp-brands{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:26px}
.sp-brand{
  background:var(--surface);color:var(--ink);text-decoration:none;
  padding:9px 13px;font:500 .82rem/1.3 "IBM Plex Sans",system-ui,sans-serif;
  display:flex;align-items:baseline;gap:6px;flex:1 0 auto;justify-content:center;
}
.sp-brand:hover{background:var(--accent-soft);color:var(--ink)}
.sp-brand.on{background:var(--hard);color:#fff}
.sp-brand i{font:400 .62rem/1 "IBM Plex Mono",ui-monospace,monospace;font-style:normal;color:var(--faint)}
.sp-brand.on i{color:rgba(255,255,255,.6)}
.sp-brand:hover i{color:var(--mute)}

/* the list itself */
.sp-list{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sp-item{
  background:var(--surface);color:var(--ink);text-decoration:none;
  display:grid;grid-template-columns:14px minmax(0,1.5fr) minmax(0,1.4fr) 76px 108px;
  gap:14px;align-items:center;padding:14px 16px;
}
.sp-item:hover{background:var(--accent-soft);color:var(--ink)}
.sp-idot{width:7px;height:7px;border-radius:50%;background:var(--green);display:block}
.sp-idot.todo{background:var(--amber)}
.sp-iname{font:600 .96rem/1.3 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.02em;overflow-wrap:anywhere}
.sp-iname i{display:block;font:400 .66rem/1.4 "IBM Plex Mono",ui-monospace,monospace;font-style:normal;color:var(--faint);margin-top:2px}
.sp-ispec{font:400 .8rem/1.4 "IBM Plex Sans",system-ui,sans-serif;color:var(--mute);overflow-wrap:anywhere}
.sp-ifig{font:500 .84rem/1.3 "IBM Plex Mono",ui-monospace,monospace;text-align:right;color:var(--ink)}
.sp-ifig em{font-style:normal;font-size:.7rem;color:var(--faint)}

.sp-empty{color:var(--mute);padding:26px 0}

/* pagination, inheriting the same flat look */
.sp-index .navigation.pagination{margin-top:26px}
.sp-index .nav-links{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sp-index .nav-links .page-numbers{
  background:var(--surface);color:var(--ink);text-decoration:none;
  padding:9px 15px;font:500 .82rem/1.3 "IBM Plex Sans",system-ui,sans-serif;
}
.sp-index .nav-links .page-numbers:hover{background:var(--accent-soft)}
.sp-index .nav-links .page-numbers.current{background:var(--hard);color:#fff}

@media (max-width:900px){
  .sp-item{grid-template-columns:12px minmax(0,1fr) 92px;gap:12px;row-gap:6px}
  .sp-ispec{grid-column:2 / -1;order:3;font-size:.76rem}
  .sp-ifig:nth-of-type(1){display:none}
  .sp-brand{flex:1 0 auto;padding:9px 11px;font-size:.78rem}
}

/* ==========================================================================
   Footer navigation
   ========================================================================== */

.sp-footnav{padding:0 0 4px}
.sp-footnav-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;
}
.sp-footnav-list li{margin:0}
.sp-footnav-list a{
  font:400 .8rem/1.9 "IBM Plex Sans",system-ui,sans-serif;
  color:var(--mute);text-decoration:none;
}
.sp-footnav-list a:hover{color:var(--accent);text-decoration:underline}

@media (max-width:600px){
  .sp-footnav-list{gap:2px 16px}
  .sp-footnav-list a{font-size:.76rem}
}

/* ==========================================================================
   Front page
   ========================================================================== */

.sp-hero{padding:34px 0 28px}
.sp-home h1{font-size:2.3rem;margin-bottom:16px;max-width:22ch}
.sp-home .sp-lede{margin-bottom:14px}
.sp-home .sp-lede:last-of-type{margin-bottom:24px}

/* group heading with a link on the right */
.sp-more{
  font:500 .68rem/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.06em;text-transform:none;
  color:var(--accent);text-decoration:none;white-space:nowrap;
}
.sp-more:hover{text-decoration:underline}

/* brand grid */
.sp-bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:14px}
.sp-bcard{background:var(--surface);color:var(--ink);text-decoration:none;padding:14px 15px;display:block}
.sp-bcard:hover{background:var(--accent-soft);color:var(--ink)}
.sp-bn{display:block;font:600 1rem/1.2 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.022em}
.sp-bc{display:block;font:400 .66rem/1.6 "IBM Plex Mono",ui-monospace,monospace;color:var(--faint);margin-top:6px}

/* pending pills */
.sp-pend{display:flex;flex-wrap:wrap;gap:8px}
.sp-pill{
  background:var(--surface);border:1px solid var(--rule);
  color:var(--ink);text-decoration:none;
  padding:8px 13px;display:flex;align-items:center;gap:8px;
  font:500 .82rem/1.3 "IBM Plex Sans",system-ui,sans-serif;
}
.sp-pill:hover{border-color:var(--amber);color:var(--ink)}

/* three entry cards */
.sp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:14px}
.sp-card{
  border:1.5px solid var(--hard);background:var(--surface);
  padding:16px;text-decoration:none;color:var(--ink);display:block;
}
.sp-card:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.sp-cn{font:500 .56rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;color:var(--faint)}
.sp-card h3{font:600 1rem/1.25 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.022em;margin:9px 0 7px}
.sp-card p{font:400 .8rem/1.6 "IBM Plex Sans",system-ui,sans-serif;color:var(--mute);margin:0}

@media (max-width:900px){
  .sp-home h1{font-size:1.7rem}
  .sp-cards{grid-template-columns:1fr}
  .sp-bgrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .sp-grpt{flex-wrap:wrap;gap:4px 10px}
}

/* the four figures, as links */
.sp-quick-links{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sp-quick-links a{background:var(--surface);padding:16px;text-decoration:none;color:var(--ink);display:block}
.sp-quick-links a:hover{background:var(--accent-soft);color:var(--ink)}
.sp-quick-links a:hover dd{color:var(--accent)}
@media (max-width:900px){.sp-quick-links{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   List columns
   The figures were breaking one character per line once the columns got
   narrow. Figures never wrap now; long text wraps only between words, and the
   layout drops to two lines on narrow screens instead of squeezing further.
   ========================================================================== */

.sp-ifig{
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:keep-all;
  font-variant-numeric:tabular-nums;
}
.sp-ifig em{white-space:nowrap}
.sp-iname{overflow-wrap:break-word;word-break:normal}
.sp-ispec{overflow-wrap:break-word;word-break:normal}

/* wide screens: give the figures room rather than a fixed narrow column */
.sp-item{grid-template-columns:14px minmax(0,1.6fr) minmax(0,1.3fr) 68px 104px}

@media (max-width:1000px){
  /* two rows per phone: name on top, the numbers beneath it */
  .sp-item{
    grid-template-columns:14px minmax(0,1fr) auto;
    grid-template-areas:
      "dot name fig"
      "dot spec spec";
    row-gap:5px;
  }
  .sp-idot{grid-area:dot}
  .sp-iname{grid-area:name}
  .sp-ispec{grid-area:spec;font-size:.75rem}
  .sp-ifig:nth-of-type(1){display:none}
  .sp-ifig:last-of-type{grid-area:fig;text-align:right}
}

@media (max-width:400px){
  .sp-item{padding:13px 12px;gap:10px}
  .sp-ifig{font-size:.76rem}
}

/* ==========================================================================
   Site chrome
   GeneratePress ships a white header on a white body. These pull the header,
   footer and page background onto the same palette the content already uses,
   so the site reads as one piece rather than a design inside a wrapper.
   ========================================================================== */

body{background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif}

.site-header{background:var(--bg);border-bottom:1.5px solid var(--hard)}
.site-header .inside-header{padding:14px 24px;max-width:1180px;margin:0 auto}
.site-branding .main-title,
.site-title{font:700 1.15rem/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.025em}
.site-title a{color:var(--ink);text-decoration:none}
.site-description{font:400 .7rem/1.4 "IBM Plex Mono",ui-monospace,monospace;color:var(--faint)}

.main-navigation{background:transparent}
.main-navigation .main-nav ul li a{
  font:500 .84rem/1 "IBM Plex Sans",system-ui,sans-serif;
  color:var(--mute);
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a{color:var(--ink);background:transparent}
.main-navigation .menu-toggle{color:var(--ink);background:transparent}

.site-content,.site-main{background:transparent}
.site-footer,.site-info{
  background:var(--bg);border-top:1.5px solid var(--hard);
  font:400 .78rem/1.6 "IBM Plex Sans",system-ui,sans-serif;color:var(--faint);
}
.site-info a{color:var(--mute)}
.site-info a:hover{color:var(--accent)}

/* ==========================================================================
   Storage calculator
   ========================================================================== */

.sp-cwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}

.sp-qbox{border:1.5px solid var(--hard);background:var(--surface)}
.sp-qsec{padding:17px 19px;border-bottom:1px solid var(--rule)}
.sp-qsec:last-child{border-bottom:0}
.sp-qh{display:flex;align-items:baseline;gap:9px;margin-bottom:11px}
.sp-qn{font:600 .6rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;color:var(--accent);flex:0 0 auto}
.sp-qt{font:600 .95rem/1.3 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.015em}
.sp-qhint{font:400 .78rem/1.5 "IBM Plex Sans",system-ui,sans-serif;color:var(--faint);margin:-6px 0 11px}
.sp-chips{display:flex;flex-wrap:wrap;gap:7px}
.sp-chip{border:1px solid var(--rule);background:transparent;color:var(--mute);padding:8px 13px;font:500 .8rem/1 "IBM Plex Sans",system-ui,sans-serif;cursor:pointer}
.sp-chip:hover{border-color:var(--accent);color:var(--accent)}
.sp-chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sp-rlab{display:flex;justify-content:space-between;font:500 .76rem/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--mute);margin-bottom:8px}
.sp-rlab b{color:var(--ink)}
.sp-rng{display:block;width:100%;accent-color:var(--accent)}

.sp-res{border:1.5px solid var(--hard);background:var(--surface);position:sticky;top:20px}
.sp-rhead{padding:20px 20px 18px;border-bottom:1.5px solid var(--hard);text-align:center}
.sp-rlabel{font:600 .6rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.17em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.sp-rbig{font:600 3.2rem/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.05em;color:var(--accent);margin-bottom:5px}
.sp-rsub{font:400 .78rem/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--mute)}
.sp-rbody{padding:17px 20px}
.sp-rrow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:.84rem}
.sp-rrow:last-of-type{border-bottom:0}
.sp-rrow span{color:var(--mute)}
.sp-rrow b{font:500 .84rem/1.4 "IBM Plex Mono",ui-monospace,monospace;white-space:nowrap}
.sp-bar{display:flex;height:10px;margin:0 0 9px;overflow:hidden;border:1px solid var(--hard)}
.sp-seg{height:100%}
.sp-key{display:flex;flex-wrap:wrap;gap:9px;font:400 .72rem/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--mute)}
.sp-key i{display:inline-block;width:9px;height:9px;margin-right:4px;font-style:normal}
.sp-verdict{padding:15px 20px;border-top:1.5px solid var(--hard);font-size:.85rem;line-height:1.6;color:var(--mute)}
.sp-verdict b{color:var(--ink)}
.sp-warn{border-left:3px solid var(--amber);background:var(--sunk);padding:11px 14px;margin:13px 0 0;font:400 .8rem/1.55 "IBM Plex Sans",system-ui,sans-serif;color:var(--mute)}
.sp-cta{padding:16px 20px;border-top:1.5px solid var(--hard)}
.sp-btn{display:block;text-align:center;background:var(--accent);color:var(--accent-ink);text-decoration:none;padding:13px;font:600 .88rem/1 "IBM Plex Sans",system-ui,sans-serif}
.sp-btn:hover{filter:brightness(1.12);color:var(--accent-ink)}

/* tables inside the calculator */
.sp-scroll{overflow-x:auto}
.sp-tbl{width:100%;border-collapse:collapse;font-size:.85rem;margin:14px 0 10px}
.sp-tbl th{background:var(--sunk);font:600 .58rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);text-align:left;padding:10px 12px;border-bottom:1.5px solid var(--hard);white-space:nowrap}
.sp-tbl td{padding:11px 12px;border-bottom:1px solid var(--rule);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;color:var(--mute);vertical-align:middle}
.sp-tbl td:first-child{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:500;color:var(--ink);white-space:nowrap}
.sp-ptbl tr.sp-rec td{background:var(--accent-soft)}
.sp-ptbl tr.sp-rec td:first-child::after{content:"recommended";display:block;font:500 .56rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.sp-pin{width:92px;background:var(--surface);border:1.5px solid var(--hard);color:var(--ink);padding:7px 9px;font:500 .82rem/1.2 "IBM Plex Mono",ui-monospace,monospace;outline:none}
.sp-pin:focus{border-color:var(--accent)}
.sp-good{color:var(--green);font-weight:600}
.sp-bad{color:var(--red);font-weight:600}
.sp-mid{color:var(--mute)}

@media (max-width:900px){
  .sp-cwrap{grid-template-columns:1fr;gap:24px}
  .sp-res{position:static}
  .sp-rbig{font-size:2.6rem}
}

/* ==========================================================================
   Bottom tab bar (phones only)
   ========================================================================== */

.sp-tabbar{display:none}

@media (max-width:900px){
  .sp-tabbar{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:400;
    background:var(--surface);
    border-top:1.5px solid var(--hard);
    /* clears the iPhone home indicator */
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .sp-tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:9px 4px 8px;text-decoration:none;color:var(--faint);
    font:500 .62rem/1 "IBM Plex Mono",ui-monospace,monospace;
    letter-spacing:.06em;text-transform:uppercase;
    border-top:2px solid transparent;margin-top:-1.5px;
  }
  .sp-tab svg{width:21px;height:21px;display:block}
  .sp-tab:hover,.sp-tab:focus{color:var(--mute)}
  .sp-tab.on{color:var(--accent);border-top-color:var(--accent)}

  /* nothing should end up hidden underneath the bar */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0))}
  .site-footer,.site-info{margin-bottom:0}
  .sp-res{bottom:auto}
}

@media (max-width:360px){
  .sp-tab{font-size:.56rem}
  .sp-tab svg{width:19px;height:19px}
}