/* ============================================================
   services.css -- session 260. The Services page, rebuilt to
   briefs/s260-mockup-services-2560.html, -1440.html and -390.html.
   Every size below is the mockup's own; every colour is a token
   (tokens.css, the session 260 block). Scoped under .svp and
   #page.svp-page so nothing else on the platform is touched.
   Widths: 1920 and up, the panel docks on the right; 1180 to 1919
   and 761 to 1179, the panel is a drawer over the page; 760 and
   under (the shell's own body.phone line), the phone layout and a
   full-screen panel.
   ============================================================ */
#page.svp-page{ padding:calc(var(--hdrH) + var(--bandH)) 0 0; max-width:none; margin:0; box-sizing:border-box; background:var(--b-canvas); min-height:100vh }
.svp{ font-family:'Inter','Segoe UI',system-ui,sans-serif; color:var(--b-ink); display:flex; align-items:stretch; min-height:calc(100vh - var(--hdrH) - var(--bandH)) }
.svp *, .svp *::before, .svp *::after{ box-sizing:border-box }
.svp a{ color:var(--teal-dark); text-decoration:none }
.svp a:hover{ color:var(--teal-deep) }
.svp button{ font-family:inherit }
.svp :focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.svp-main{ flex:1 1 auto; min-width:0; padding:28px 32px 40px 32px; display:flex; flex-direction:column; gap:36px }
.svp-body{ display:flex; flex-direction:column; gap:36px }
@media (min-width:1920px){ .svp-main{ padding:28px 36px 40px 36px } }

/* ---------- title row ---------- */
.svp-top{ display:flex; align-items:center; gap:16px }
.svp-tt{ display:flex; flex-direction:column; gap:6px }
.svp-tt h1{ margin:0; font-size:40px; font-weight:800; letter-spacing:-0.035em; line-height:1.02; color:var(--b-ink) }
.svp-tt span{ font-size:14px; color:var(--b-text) }
.svp-grow{ flex-grow:1 }
.svp-find{ display:flex; align-items:center; gap:8px; height:44px; padding:0 14px; border-radius:var(--b-radius-ctl); background:#fff; box-shadow:inset 0 0 0 1.5px var(--b-line-strong); color:var(--b-muted) }
.svp-find input{ all:unset; font-size:14px; width:170px; color:var(--b-ink) }
.svp-find:focus-within{ box-shadow:inset 0 0 0 1.5px var(--teal-dark) }
.svp-add{ all:unset; cursor:pointer; height:44px; padding:0 20px; border-radius:var(--b-radius-ctl); background:linear-gradient(180deg, var(--yellow), var(--yellow-deep)); color:var(--b-ink); font-weight:700; font-size:14px; box-shadow:var(--b-shadow-yellow); display:flex; align-items:center; gap:8px; white-space:nowrap }
.svp-add:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }

/* ---------- the top band: hero 6, two boxes 3 each ---------- */
.svp-band{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:20px }
.svp-band > .svp-c6{ grid-column:span 6 }
.svp-band > .svp-c3{ grid-column:span 3; display:flex; flex-direction:column }
.svp-hero{ background:linear-gradient(135deg, var(--teal-deep), var(--teal-night)); border-radius:var(--b-radius-hero); padding:22px 26px; color:#fff; display:flex; flex-direction:column; gap:14px; box-shadow:var(--b-shadow-hero); height:100% }
.svp-hhd{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.svp-hk{ font-size:12.5px; font-weight:600; opacity:0.85 }
.svp-seg{ display:flex; background:rgba(255,255,255,0.1); border-radius:8px; padding:3px; font-size:12px; font-weight:700 }
.svp-seg button{ all:unset; cursor:pointer; padding:5px 10px; opacity:0.8; border-radius:6px; color:#fff }
.svp-seg button[aria-pressed="true"]{ background:#fff; color:var(--teal-deep); opacity:1 }
.svp-seg button:focus-visible{ outline:2px solid var(--yellow); outline-offset:1px }
.svp-hbig{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.svp-hbig b{ font-size:64px; font-weight:800; letter-spacing:-0.04em; line-height:0.9 }
.svp-hbig span{ font-size:17px; font-weight:700 }
.svp-stack{ display:flex; height:16px; border-radius:6px; overflow:hidden; gap:2px }
.svp-stack span{ height:100%; display:block }
.svp-leg{ display:flex; flex-direction:column }
.svp-lr{ display:grid; grid-template-columns:12px minmax(0, 1fr) 44px 76px; gap:10px; align-items:center; font-size:13px; padding:7px 0; border-top:1px solid rgba(255,255,255,0.12) }
.svp-lr.nodollars{ grid-template-columns:12px minmax(0, 1fr) 44px }
.svp-lr i{ width:12px; height:12px; border-radius:3px; display:block }
.svp-lr .n{ font-weight:600 }
.svp-lr .p{ text-align:right; font-weight:800; font-variant-numeric:tabular-nums }
.svp-lr .d{ text-align:right; opacity:0.8; font-variant-numeric:tabular-nums }
.svp-foot{ font-size:12px; opacity:0.75 }
.c-core{ background:var(--teal-light) } .c-other{ background:var(--b-mint) } .c-addon{ background:var(--yellow) } .c-fees{ background:rgba(255,255,255,0.55) }

.svp-box{ background:#fff; border-radius:var(--b-radius-card); padding:20px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--b-shadow-card) }
.svp-bi{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.svp-bi.warn{ background:var(--b-warn-bg); color:var(--b-warn-ink) }
.svp-bi.teal{ background:var(--b-select-row); color:var(--teal-dark) }
.svp-bn{ font-size:36px; font-weight:800; letter-spacing:-0.035em; line-height:1 }
.svp-bof{ font-size:16px; font-weight:700; color:var(--b-muted) }
.svp-bk{ font-size:12.5px; font-weight:600; color:var(--b-text) }
.svp-bc{ font-size:12.5px; color:var(--b-muted); line-height:1.4 }
.svp-brow{ display:flex; align-items:center; gap:12px }
.svp-tag{ display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--b-line) }
.svp-tag .nm{ font-size:13.5px; font-weight:600; flex-grow:1; min-width:0; line-height:1.3 }
.svp-yn{ all:unset; cursor:pointer; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:8px; background:var(--b-surface-2); color:var(--b-ink) }
.svp-yn:hover{ background:var(--b-line) }
.svp-yn:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.svp-done1{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--b-text) }
.svp-meter{ height:8px; border-radius:99px; background:var(--b-surface-2); overflow:hidden }
.svp-meter div{ height:100%; background:var(--teal-dark) }
.svp-lk{ font-size:13px; font-weight:700 }

/* ---------- section heads ---------- */
.svp-sec{ display:flex; flex-direction:column; gap:18px }
.svp-sh{ display:flex; align-items:center; gap:14px }
.svp-si{ width:40px; height:40px; border-radius:10px; background:var(--teal-deep); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.svp-sh > div{ display:flex; flex-direction:column; gap:2px }
.svp-sh h2{ margin:0; font-size:22px; font-weight:700; letter-spacing:-0.02em; color:var(--b-ink) }
.svp-sh span{ font-size:13px; color:var(--b-muted) }

/* ---------- one white panel, hairline-divided cells ---------- */
.svp-cells{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1px; background:var(--b-line); border-radius:var(--b-radius-card); overflow:hidden; box-shadow:var(--b-shadow-card) }
.svp-core{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:14px; padding:22px; background:#fff }
.svp-core:hover{ background:var(--b-select) }
.svp-core[aria-pressed="true"]{ background:var(--b-select); box-shadow:inset 0 -3px 0 var(--teal-dark) }
.svp-core:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:-2px }
.svp-cn{ display:flex; align-items:center; gap:8px }
.svp-cn b{ font-size:15.5px; font-weight:700; letter-spacing:-0.012em; line-height:1.25 }
.svp-cm{ display:flex; flex-direction:column; gap:5px }
.svp-cm b{ font-size:34px; font-weight:800; letter-spacing:-0.035em; line-height:1; font-variant-numeric:tabular-nums }
.svp-cm span{ font-size:12.5px; color:var(--b-muted); font-weight:500 }
.svp-cs{ display:flex; gap:18px; font-size:13px; color:var(--b-text) }
.svp-cs b{ color:var(--b-ink); font-weight:700 }
.svp-cb{ display:flex; flex-direction:column; gap:6px }
.svp-cb > span:last-child{ font-size:12px; color:var(--b-muted) }
.svp-bar{ height:6px; border-radius:99px; background:var(--b-surface-2); overflow:hidden; display:block }
.svp-bar > span{ height:100%; border-radius:99px; display:block }
.svp-dot{ width:10px; height:10px; border-radius:99px; flex-shrink:0; display:inline-block }
.svp-dot.sm{ width:8px; height:8px }
.svp-dot.ring{ box-shadow:inset 0 0 0 1px rgba(22,24,26,0.28) }

.svp-set{ background:#fff; padding:20px; display:flex; flex-direction:column; gap:10px }
.svp-set.empty{ background:var(--b-empty-cell) }
.svp-seth{ display:flex; align-items:baseline; justify-content:space-between; gap:8px }
.svp-seth b{ font-size:15px; font-weight:700; letter-spacing:-0.012em }
.svp-seth span{ font-size:12px; color:var(--b-muted); font-weight:600; white-space:nowrap }
.svp-setl{ display:flex; flex-direction:column; gap:7px }
.svp-setl span{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--b-text) }
.svp-sete{ font-size:13px; color:var(--b-text); line-height:1.45 }
.svp-setlk{ all:unset; cursor:pointer; font-size:13px; font-weight:700; margin-top:auto; padding-top:4px; color:var(--teal-dark); align-self:flex-start }
.svp-setlk.warn{ color:var(--b-warn-ink) }
.svp-setlk:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.svp-setrow{ display:none }
.svp-fill{ background:#fff }
@media (max-width:760px){ .svp-fill{ display:none } }

/* ---------- group tables ---------- */
.svp-groups{ display:grid; grid-template-columns:minmax(0, 1fr); gap:28px 24px; align-items:start }
.svp-grp{ display:flex; flex-direction:column; gap:12px }
.svp-gh{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.svp-gh h3{ margin:0; font-size:18px; font-weight:700; letter-spacing:-0.015em; color:var(--b-ink) }
.svp-pill{ font-size:12.5px; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--b-surface-2); color:var(--b-text) }
.svp-gcap{ font-size:13px; color:var(--b-muted) }
.svp-gshare{ margin-left:auto; font-size:13px; font-weight:700; color:var(--teal-deep) }
.svp-tbl{ background:#fff; border-radius:var(--b-radius-card); overflow:hidden; box-shadow:var(--b-shadow-card) }
.svp-tr{ display:grid; grid-template-columns:minmax(0, 1fr) 64px 100px 50px 64px 104px 70px 112px; gap:10px }
.svp-th{ padding:10px 18px; background:var(--b-surface-2); font-size:12.5px; font-weight:600; color:var(--b-text) }
.svp-row{ all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:grid; grid-template-columns:minmax(0, 1fr) 64px 100px 50px 64px 104px 70px 112px; gap:10px; align-items:center; padding:11px 18px; border-top:1px solid var(--b-line); font-size:14px; background:#fff }
.svp-row:hover{ background:var(--b-surface-2) }
.svp-row[aria-pressed="true"]{ background:var(--b-select-row) }
.svp-row:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:-2px }
.svp-r{ text-align:right } .svp-c{ text-align:center; display:flex; justify-content:center }
.svp-nm{ display:flex; align-items:center; gap:10px; min-width:0 }
.svp-nm > span:last-child{ display:flex; flex-direction:column; min-width:0 }
.svp-nm b{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.svp-nm small{ font-size:12px; color:var(--b-muted) }
.svp-med{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums }
.svp-rng{ text-align:right; font-size:12.5px; color:var(--b-text); font-variant-numeric:tabular-nums; white-space:nowrap }
.svp-hrs{ text-align:right; color:var(--b-text); font-variant-numeric:tabular-nums }
.svp-dash{ color:var(--b-line-strong); font-weight:700 }
.svp-enh{ display:flex }
.svp-yes{ font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--b-yes-bg); color:var(--b-yes-ink) }
.svp-no{ font-size:13px; color:var(--b-muted) }
.svp-need{ font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; color:var(--b-warn-ink); box-shadow:inset 0 0 0 1.5px var(--orange); white-space:nowrap }
.svp-sh2{ display:flex; align-items:center; gap:8px }
.svp-sh2 .svp-bar{ flex-grow:1 }
.svp-sh2 b{ font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; width:38px; text-align:right }
.svp-nis{ font-size:12px; font-weight:600; color:var(--b-muted); white-space:nowrap }
.svp-none{ padding:14px 18px; font-size:13.5px; color:var(--b-muted); border-top:1px solid var(--b-line) }
.svp-icon{ display:none }

.svp-int{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:var(--b-radius-card); background:var(--b-surface-2); font-size:13.5px; color:var(--b-text); flex-wrap:wrap }
.svp-int b{ font-weight:700; color:var(--b-ink) }
.svp-int .names{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 0; min-width:0 }
.svp-int button{ all:unset; cursor:pointer; font-weight:700; color:var(--teal-dark); white-space:nowrap }
.svp-int button:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.svp-intl{ flex-basis:100%; display:flex; flex-direction:column; gap:4px; padding-top:4px }
.svp-empty{ font-size:13.5px; color:var(--b-muted) }

/* ---------- the service panel ---------- */
.svp-panel{ width:460px; flex-shrink:0; background:#fff; box-shadow:var(--b-shadow-panel); padding:28px; display:flex; flex-direction:column; gap:20px; overflow-y:auto }
.svp-panel[hidden]{ display:none }
.svp-scrim{ display:none }
.svp-ph{ display:flex; align-items:center; gap:14px }
.svp-sw{ width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff }
.svp-ph > div{ display:flex; flex-direction:column; gap:3px; flex-grow:1; min-width:0 }
.svp-ph span{ font-size:12.5px; font-weight:600; color:var(--b-muted) }
.svp-ph h2{ margin:0; font-size:24px; font-weight:700; letter-spacing:-0.025em; color:var(--b-ink); overflow-wrap:anywhere }
.svp-x{ all:unset; cursor:pointer; width:36px; height:36px; border-radius:10px; background:var(--b-surface-2); display:flex; align-items:center; justify-content:center; color:var(--b-text); flex-shrink:0 }
.svp-x:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.svp-cat{ display:flex; background:var(--b-surface-2); border-radius:10px; padding:4px; gap:2px; flex-wrap:wrap }
.svp-cat button{ all:unset; cursor:pointer; padding:8px 12px; border-radius:8px; font-size:13px; font-weight:600; color:var(--b-text) }
.svp-cat button[aria-pressed="true"]{ font-weight:700; background:var(--teal-deep); color:#fff }
.svp-cat button:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:1px }
.svp-grey{ background:var(--b-canvas); border-radius:var(--b-radius-card); padding:16px; display:flex; flex-direction:column; gap:12px }
.svp-grey > b{ font-size:14px; font-weight:700 }
.svp-g3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px }
.svp-g3 > span{ display:flex; flex-direction:column; gap:2px }
.svp-g3 b{ font-size:22px; font-weight:800; letter-spacing:-0.02em }
.svp-g3 small{ font-size:12px; color:var(--b-muted); font-weight:600 }
.svp-gt{ font-size:12.5px; color:var(--b-text); line-height:1.45 }
.svp-blink{ all:unset; cursor:pointer; font-size:13px; font-weight:700; color:var(--teal-dark); align-self:flex-start }
.svp-blink:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.svp-pp{ display:flex; flex-direction:column; max-height:320px; overflow-y:auto; background:#fff; border-radius:10px }
.svp-ppr{ display:grid; grid-template-columns:minmax(0, 1fr) 70px 54px; gap:8px; padding:7px 10px; border-top:1px solid var(--b-line); font-size:12.5px; color:var(--b-text) }
.svp-ppr:first-child{ border-top:0 }
.svp-ppr.h{ font-weight:600; color:var(--b-muted); position:sticky; top:0; background:#fff }
.svp-ppr a, .svp-ppr > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.svp-ppr > span:nth-child(2), .svp-ppr > span:nth-child(3){ text-align:right; font-variant-numeric:tabular-nums }
.svp-miss{ color:var(--b-warn-ink); font-weight:600 }
.svp-sws{ display:flex; flex-direction:column }
.svp-swr{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--b-line); width:100% }
.svp-swr:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.svp-swr > span:first-child{ display:flex; flex-direction:column; gap:2px; flex-grow:1; min-width:0 }
.svp-swr b{ font-size:14px; font-weight:600 }
.svp-swr small{ font-size:12.5px; color:var(--b-muted) }
.svp-swv{ font-size:12.5px; font-weight:600; color:var(--b-text) }
.svp-tog{ width:40px; height:24px; border-radius:99px; flex-shrink:0; position:relative; background:var(--b-line-strong) }
.svp-tog::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:99px; background:#fff }
.svp-tog.on{ background:var(--teal-dark) }
.svp-tog.on::after{ left:19px }
.svp-types{ display:flex; flex-direction:column; gap:10px }
.svp-types > b{ font-size:14px; font-weight:700 }
.svp-ck{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; font-size:13.5px; width:100% }
.svp-ck:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.svp-box20{ width:20px; height:20px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#fff; box-shadow:inset 0 0 0 1.5px var(--b-line-strong); color:transparent }
.svp-ck[aria-checked="true"] .svp-box20{ background:var(--teal-dark); box-shadow:none; color:#fff }
.svp-ck .t{ flex-grow:1; font-weight:500 }
.svp-ck small{ font-size:12px; color:var(--b-muted) }
.svp-ckg{ font-size:12px; font-weight:700; color:var(--b-muted); padding-top:6px }
.svp-push{ all:unset; cursor:pointer; align-self:flex-start; font-size:13.5px; font-weight:700; padding:10px 16px; border-radius:10px; background:#fff; color:var(--teal-deep); box-shadow:inset 0 0 0 1.5px var(--teal-dark) }
.svp-push:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.svp-radio{ display:flex; flex-direction:column; gap:8px; font-size:13.5px }
.svp-radio label{ display:flex; align-items:center; gap:8px; cursor:pointer }
.svp-radio select, .svp-in{ height:40px; border-radius:10px; border:0; box-shadow:inset 0 0 0 1.5px var(--b-line-strong); padding:0 12px; font:inherit; font-size:14px; background:#fff; color:var(--b-ink); max-width:100% }
.svp-in{ width:100% }
.svp-in:focus, .svp-radio select:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--teal-dark) }
.svp-acts{ display:flex; gap:10px; margin-top:auto; padding-top:8px; align-items:center; flex-wrap:wrap }
.svp-save{ all:unset; cursor:pointer; font-size:14px; font-weight:700; padding:12px 20px; border-radius:10px; background:var(--teal-deep); color:#fff }
.svp-save[disabled]{ opacity:0.6; cursor:default }
.svp-cancel{ all:unset; cursor:pointer; font-size:14px; font-weight:700; padding:12px 16px; border-radius:10px; color:var(--b-text) }
.svp-save:focus-visible, .svp-cancel:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.svp-msg{ font-size:12.5px; color:var(--b-muted) }
.svp-msg.err{ color:var(--danger-text) }
.svp-more{ font-size:13px; color:var(--b-text) }
.svp-more summary{ cursor:pointer; font-weight:700; color:var(--teal-dark) }
.svp-more .f{ display:flex; flex-direction:column; gap:6px; margin-top:10px }
.svp-more label{ font-size:12.5px; font-weight:600; color:var(--b-muted) }

/* ---------- widths ---------- */
@media (min-width:761px){
  .svp-cells.core{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .svp-cells.sets{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (min-width:1180px){
  .svp-cells.core{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .svp-cells.sets{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
}
@media (min-width:1920px){
  .svp-cells.core{ grid-template-columns:repeat(6, minmax(0, 1fr)) }
  .svp-cells.sets{ grid-template-columns:repeat(var(--svp-types, 7), minmax(0, 1fr)) }
  .svp-groups{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  /* the panel docks on the right and stays open */
  .svp-panel{ position:sticky; top:calc(var(--hdrH) + var(--bandH)); height:calc(100vh - var(--hdrH) - var(--bandH)); align-self:flex-start }
}
@media (max-width:1919px){
  /* a drawer over the page from the right */
  .svp-panel{ position:fixed; top:calc(var(--hdrH) + var(--bandH)); right:0; bottom:0; z-index:60; max-width:100vw }
  .svp-scrim.on{ display:block; position:fixed; inset:calc(var(--hdrH) + var(--bandH)) 0 0 0; z-index:59; background:rgba(14,54,59,0.18) }
}
@media (max-width:1179px){
  .svp-band > .svp-c6{ grid-column:span 12 }
  .svp-band > .svp-c3{ grid-column:span 6 }
}

/* ---------- the phone (the shell's own body.phone line, 760 and under) ---------- */
@media (max-width:760px){
  .svp-main{ padding:20px 16px 32px 16px; gap:24px }
  .svp-body{ gap:24px }
  .svp-top{ flex-wrap:wrap; gap:10px }
  .svp-tt{ flex-basis:100% }
  .svp-tt h1{ font-size:32px }
  .svp-tt span{ font-size:13.5px }
  .svp-top .svp-grow{ display:none }
  .svp-find{ flex:1 1 0; min-width:0; padding:0 12px }
  .svp-find input{ width:auto; flex-grow:1; min-width:0 }
  .svp-add{ padding:0 16px; gap:6px }
  .svp-add .lg{ display:none }
  .svp-band{ display:flex; flex-direction:column; gap:24px }
  .svp-hero{ padding:20px }
  .svp-hbig b{ font-size:52px }
  .svp-band > .svp-c3.sets{ display:none }
  .svp-sec{ gap:12px }
  .svp-sh .svp-si{ display:none }
  .svp-sh h2{ font-size:20px }
  .svp-sh span{ font-size:12.5px }
  .svp-cells.core, .svp-cells.sets{ display:flex; flex-direction:column; gap:0; background:#fff }
  .svp-core{ padding:14px 16px; gap:8px; border-bottom:1px solid var(--b-line) }
  .svp-core[aria-pressed="true"]{ box-shadow:none }
  .svp-core .svp-cm, .svp-core .svp-cs, .svp-core .svp-cb > span:last-child{ display:none }
  .svp-core .svp-pr{ display:flex }
  .svp-core .svp-bar{ height:5px }
  .svp-set{ display:none }
  .svp-setrow{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--b-line); min-height:44px; width:100%; color:var(--b-ink) }
  .svp-setrow > span:first-child{ display:flex; flex-direction:column; gap:2px; flex-grow:1; min-width:0 }
  .svp-setrow b{ font-size:14.5px; font-weight:700 }
  .svp-setrow small{ font-size:12px; color:var(--b-muted) }
  .svp-setrow:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:-2px }
  .svp-cpill{ font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--b-select-row); color:var(--teal-deep); white-space:nowrap }
  .svp-cpill.warn{ background:var(--b-warn-bg); color:var(--b-warn-ink) }
  .svp-groups{ gap:20px }
  .svp-grp{ gap:10px }
  .svp-gh{ align-items:center }
  .svp-gh h3{ font-size:17px }
  .svp-gh .svp-pill{ font-size:12px; padding:2px 8px }
  .svp-gcap, .svp-gshare, .svp-th{ display:none }
  .svp-row{ display:flex; gap:12px; padding:12px 14px; border-top:0; border-bottom:1px solid var(--b-line); min-height:44px }
  .svp-row > :not(.svp-nm):not(.svp-pmed){ display:none }
  .svp-row .svp-dot{ display:none }
  .svp-icon{ display:flex; width:38px; height:38px; flex-shrink:0; border-radius:10px; align-items:center; justify-content:center }
  .svp-nm{ flex-grow:1; gap:12px }
  .svp-nm b{ font-size:14.5px; font-weight:700; line-height:1.25; white-space:normal }
  .svp-pmed{ display:flex !important; flex-direction:column; align-items:flex-end }
  .svp-pmed b{ font-size:18px; font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums }
  .svp-pmed small{ font-size:11.5px; color:var(--b-muted) }
  .svp-int{ justify-content:space-between }
  .svp-int .names{ display:none }
  /* the panel opens full screen */
  .svp-panel{ position:fixed; inset:0; width:auto; z-index:200; padding:20px 16px }
  .svp-scrim.on{ display:none }
  .svp-g3 b{ font-size:20px }
}
.svp-pr{ display:none; align-items:baseline; justify-content:space-between; gap:10px }
.svp-pr .l{ display:flex; align-items:center; gap:8px; min-width:0 }
.svp-pr .l b{ font-size:15px; font-weight:700; letter-spacing:-0.012em }
.svp-pr > b{ font-size:22px; font-weight:800; letter-spacing:-0.03em; font-variant-numeric:tabular-nums }
.svp-pr2{ display:none; justify-content:space-between; font-size:12.5px; color:var(--b-muted); gap:10px }
@media (max-width:760px){ .svp-core .svp-cn{ display:none } .svp-core .svp-pr2{ display:flex } }
.svp-pmed{ display:none }
.svp-phs{ display:none }
@media (max-width:760px){ .svp-phs{ display:inline } }