/* ═══════════════════════════════════════════════════════════════════════════
   VOICEO panel — shell layout (sidebar/topbar/main) + SHARED COMPONENTS.
   Builders: use these, never redefine them. Screen CSS is prefixed per key.
   Every value here comes from tokens.css — no freehand px in this file.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- layout ---------------------------------------------------------------- */
.sh-app{min-height:100dvh}

/* fixed left sidebar — lighter-than-ground rail, hairline right edge */
.sh-side{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:40;
  display:flex;flex-direction:column;gap:var(--sp-6);
  padding:22px var(--sp-14) 18px;
  background:var(--card-2);border-right:1px solid var(--line);
}
.sh-brand{display:flex;align-items:center;gap:var(--sp-10);padding:2px var(--sp-10) var(--sp-20);font-weight:800;letter-spacing:.12em;font-size:var(--fs-base)}
.sh-brand__mark{width:27px;color:var(--ink)}
.sh-brand__mark svg{width:100%;height:auto}
.sh-nav{display:flex;flex-direction:column;gap:var(--sp-2)}
.sh-nav a{
  display:flex;align-items:center;gap:var(--sp-12);
  padding:10.5px var(--sp-12);border-radius:var(--r-md);
  font-size:var(--fs-md);font-weight:600;color:var(--muted);
  transition:color var(--t),background var(--t),box-shadow var(--t);
}
.sh-nav a:hover{color:var(--ink)}
.sh-nav a.is-on{background:#fff;color:var(--ink);box-shadow:var(--e2)}
/* selected items must NOT lose the keyboard ring */
.sh-nav a:focus-visible{box-shadow:var(--focus)}
.sh-nav a.is-on:focus-visible{box-shadow:var(--e2),var(--focus)}
.sh-nav .sh-ic{width:19px;height:19px;flex:none}
.sh-ic{color:currentColor}
.sh-ic svg,.sh-ic use{width:100%;height:100%}

/* sidebar footer: plan hint (quiet) */
.sh-side__foot{margin-top:auto;padding:var(--sp-14) var(--sp-12) var(--sp-2);border-top:1px solid var(--line);font-size:var(--fs-fine);color:var(--muted-2);font-weight:500}
.sh-side__foot b{display:block;color:var(--muted);font-weight:700;margin-bottom:var(--sp-2)}

/* sticky top bar — business name · live pill · lang toggle */
.sh-top{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:var(--sp-14);
  height:var(--topbar-h);padding:0 var(--content-pad);
  margin-left:var(--sidebar-w);
  background:rgba(250,250,250,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.sh-top__biz{font-size:var(--fs-base);font-weight:700;letter-spacing:-.01em}
.sh-top__right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-12)}

/* the live / paused pill — a real control, not a badge.
   ● ხაზი ცოცხალია → click → ○ დაპაუზებულია. Not connected: .pill + aria-disabled
   (never the disabled property — see core.js renderLivePill). */
.sh-live{
  display:inline-flex;align-items:center;gap:var(--sp-8);height:32px;padding:0 13px;
  border-radius:var(--r-pill);font-size:var(--fs-fine);font-weight:700;color:var(--ok);
  background:var(--live-soft);border:1px solid var(--live-line);
  cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t);
}
.sh-live:not([aria-disabled="true"]):hover{filter:brightness(.985)}
.sh-live:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-pill)}
#shLive[aria-disabled="true"]{cursor:default}
.sh-paused{color:var(--ink);background:var(--card-2);border-color:var(--line-2)}
/* ○ paused — the same 7px dot as .dot-live, hollow */
.dot-paused{
  width:7px;height:7px;border-radius:var(--r-circle);flex:none;
  background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted);
}

/* skip-to-content — nine repeated tab stops sit ahead of every screen.
   Invisible until it takes focus, then a real button at the top left. */
.sh-skip{
  position:fixed;left:var(--sp-12);top:-100px;z-index:200;
  height:var(--btn-h);padding:0 18px;border-radius:var(--r-btn);
  background:var(--ink);color:var(--on-ink);font-size:var(--fs-md);font-weight:600;
  transition:top var(--t);
}
.sh-skip:focus-visible{top:var(--sp-12);outline:none;box-shadow:var(--focus)}
#view:focus{outline:none}
#view:focus-visible{outline:none;box-shadow:var(--focus-inset)}

/* main view */
#view{
  margin-left:var(--sidebar-w);
  padding:clamp(22px,3vw,34px) var(--content-pad) clamp(48px,6vw,80px);
}
#view > *{max-width:var(--content-max);margin-inline:auto}

/* page header inside a screen: h1 + optional actions on the right */
.sh-head{display:flex;align-items:flex-end;gap:var(--sp-16);flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,30px)}
.sh-head p{flex-basis:100%;color:var(--muted);font-weight:500;font-size:var(--fs-md);margin-top:var(--sp-6)}
.sh-head__act{margin-left:auto;display:flex;gap:var(--sp-10)}

/* --- shared components ------------------------------------------------------ */

/* .card — white surface, THE container of the panel. Flat by design (--e1). */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--e1)}
.card--pad{padding:var(--sp-card)}

/* .btn variants — primary=ink fill, live=green (success actions only),
   ghost=quiet, danger=destructive */
.btn--primary{background:var(--ink);color:var(--on-ink)}
.btn--primary:hover{background:var(--ink-2)}
.btn--live{background:var(--live);color:var(--live-ink)}
.btn--live:hover{background:var(--live-hover)}
.btn--ghost{background:var(--card);border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
/* used by settings (delete account / reset) and bookings (cancel booking) */
.btn--danger{background:var(--card);border-color:var(--danger-line);color:var(--danger)}
.btn--danger:hover{background:var(--danger-hover);border-color:var(--danger-hover);color:var(--danger-ink)}
.btn--sm{height:var(--btn-h-sm);padding:0 13px;font-size:var(--fs-btn);border-radius:var(--r-md)}
.btn--icon{width:var(--btn-h);padding:0}
.btn--sm.btn--icon{width:var(--btn-h-sm)}
.btn .sh-ic{width:16px;height:16px}

/* .pill — small status capsule (neutral by default) */
.pill{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:var(--r-pill);font-size:var(--fs-micro);font-weight:700;color:var(--muted);background:var(--card-2);border:1px solid var(--line)}
.pill--live{color:var(--ok);background:var(--live-soft);border-color:var(--live-line)}
.pill--ink{color:var(--on-ink);background:var(--ink);border-color:var(--ink)}
.pill--warn{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)}
.pill--danger{color:var(--danger);background:var(--danger-soft);border-color:var(--danger-line)}

/* .chip — selectable/removable token (services, filters) */
.chip{display:inline-flex;align-items:center;gap:var(--sp-8);height:var(--btn-h-sm);padding:0 var(--sp-14);border-radius:var(--r-pill);font-size:var(--fs-btn);font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line-2);transition:border-color var(--t),background var(--t)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.chip:focus-visible{box-shadow:var(--focus)}
.chip .sh-ic{width:14px;height:14px}

/* .seg — THE segmented control. ONE state API: aria-pressed on each button.
   Used by: bookings (day/week), settings (billing period), shell (KA/EN).
   <div class="seg" role="group" aria-label="…">
     <button type="button" aria-pressed="true">…</button>
     <button type="button" aria-pressed="false">…</button>
   </div>
   .seg--sm = 28px track (icon-only, e.g. the language flags).            */
.seg,.sh-lang{display:inline-flex;gap:var(--sp-2);padding:3px;border-radius:var(--r-pill);background:var(--tint-2)}
.seg > button,.sh-lang button{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--seg-h);padding:0 var(--sp-16);border-radius:var(--r-pill);
  font-size:var(--fs-btn);font-weight:700;color:var(--muted);
  transition:color var(--t),background var(--t),box-shadow var(--t),opacity var(--t);
}
.seg > button:hover,.sh-lang button:hover{color:var(--ink)}
.seg > button[aria-pressed="true"],.sh-lang button[aria-pressed="true"]{
  color:var(--ink);background:#fff;box-shadow:var(--e2);
}
/* the ring survives selection */
.seg > button:focus-visible,.sh-lang button:focus-visible{box-shadow:var(--focus)}
.seg > button[aria-pressed="true"]:focus-visible,
.sh-lang button[aria-pressed="true"]:focus-visible{box-shadow:var(--e2),var(--focus)}
.seg--sm > button,.sh-lang button{height:var(--seg-h-sm);padding:0 var(--sp-12)}
.seg .sh-ic{width:15px;height:15px}

/* KA/EN toggle — a .seg skin: icon-only, 34px wide, quiet when unselected */
.sh-lang button{width:34px;padding:0;opacity:.45}
.sh-lang button[aria-pressed="true"]{opacity:1}
.sh-flag{width:18px;height:13px;border-radius:var(--r-xxs)}

/* .field — label + control + optional hint + error slot -----------------------
   <div class="field">
     <label for="biz">…</label>
     <input id="biz" aria-describedby="biz-err">
     <small>optional hint</small>
     <p class="field__err" id="biz-err" role="alert"></p>
   </div>
   ERROR: add .is-err to .field, set aria-invalid="true" on the control, and
   set .field__err .textContent (role="alert" announces it). Clear the text and
   remove .is-err to reset. The message hides itself while it is empty.      */
.field{display:flex;flex-direction:column;gap:var(--sp-8)}
.field > label{font-size:var(--fs-label);font-weight:700;color:var(--muted);letter-spacing:.02em}
.field > small{font-size:var(--fs-hint);font-weight:500;color:var(--muted-2)}
/* one dropdown look product-wide: quiet 1.5px-stroke chevron, no native arrow */
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B5B63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;
}
.field__err{
  display:none;align-items:flex-start;gap:var(--sp-6);
  font-size:var(--fs-hint);font-weight:600;color:var(--danger);line-height:1.45;
}
.field__err:not(:empty){display:flex}
/* .ctl--err = the same error visual for a control that is NOT inside a .field
   (knowledge's inline add-row) — screens must never re-implement it. */
.field.is-err > input,.field.is-err > select,.field.is-err > textarea,
.field [aria-invalid="true"],[aria-invalid="true"].ctl--err{
  border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft);
}
.field.is-err > input:focus,.field.is-err > select:focus,.field.is-err > textarea:focus,
.field [aria-invalid="true"]:focus,[aria-invalid="true"].ctl--err:focus{border-color:var(--danger);box-shadow:var(--focus)}

/* .toggle — soft switch. EXACT markup:
   <label class="toggle"><input type="checkbox"><i></i></label>            */
.toggle{position:relative;display:inline-flex;align-items:center;width:44px;height:26px;flex:none;cursor:pointer}
.toggle input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.toggle i{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--toggle-off);transition:background var(--t)}
.toggle i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:var(--r-circle);background:#fff;box-shadow:var(--sh-knob);transition:transform var(--t)}
/* --live is 2.01:1 on a white card, so the switched-ON track carries a
   --ok edge: the component boundary and the knob both clear 3:1 (1.4.11). */
.toggle input:checked + i{background:var(--live);box-shadow:inset 0 0 0 1px var(--toggle-on-line)}
.toggle input:checked + i::after{transform:translateX(18px)}
.toggle input:focus-visible + i{box-shadow:var(--focus)}
.toggle input:checked:focus-visible + i{box-shadow:inset 0 0 0 1px var(--toggle-on-line),var(--focus)}
.toggle input[disabled]{cursor:not-allowed}
.toggle input[disabled] + i{opacity:.45}

/* .table — quiet lined rows, generous height; wrap in .table-wrap to scroll */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-row)}
.table th{text-align:left;font-size:var(--fs-meta);font-weight:700;color:var(--muted-2);letter-spacing:.05em;padding:var(--sp-14) var(--sp-14) var(--sp-10);border-bottom:1px solid var(--line)}
.table td{height:var(--row-h);padding:var(--sp-8) var(--sp-14);border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--t)}
.table tbody tr:hover{background:var(--card-2)}
.table--dense td{height:var(--row-h-sm)}

/* .menu — the ⋯ dropdown.
   <div class="menu">
     <button type="button" class="menu__btn" aria-haspopup="menu"
             aria-expanded="false" aria-label="…">⋯</button>
     <div class="menu__list" role="menu">
       <button type="button" role="menuitem">…</button>
       <button type="button" role="menuitem" class="is-danger">…</button>
     </div>
   </div>
   Open state: core toggles .is-open on .menu — the CSS also opens on
   .menu__btn[aria-expanded="true"] so core.js can move to the ARIA API
   without a CSS change.                                                    */
.menu{position:relative}
.menu__btn{display:grid;place-items:center;width:var(--btn-h-sm);height:var(--btn-h-sm);border-radius:var(--r-md);color:var(--muted);transition:background var(--t),color var(--t)}
.menu__btn:hover{background:var(--tint-2);color:var(--ink)}
.menu__btn:focus-visible{box-shadow:var(--focus)}
.menu__list{
  position:absolute;right:0;top:calc(100% + var(--sp-6));z-index:50;min-width:172px;
  display:none;flex-direction:column;padding:var(--sp-6);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--e3);
}
.menu.is-open .menu__list,
.menu__btn[aria-expanded="true"] + .menu__list{display:flex}
.menu__list button{display:flex;align-items:center;gap:var(--sp-10);padding:9px 11px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;color:var(--ink);text-align:left;transition:background var(--t)}
.menu__list button:hover{background:var(--card-2)}
.menu__list button:focus-visible{box-shadow:var(--focus)}
.menu__list button.is-danger{color:var(--danger)}
.menu__list button.is-danger:hover{background:var(--danger-soft)}
.menu__list .sh-ic{width:15px;height:15px}

/* .modal — overlay + centered card, soft scale-in; use PANEL.modal()/confirm() */
.modal-overlay{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--sp-20);
  background:rgba(10,10,11,.32);
  animation:sh-fade .18s ease;
}
.modal{
  width:min(100%,480px);max-height:min(84dvh,720px);overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-big);
  box-shadow:var(--e4);padding:var(--sp-24);
  animation:sh-pop .2s cubic-bezier(.2,0,0,1);
}
.modal--wide{width:min(100%,680px)}
.modal h2{margin-bottom:var(--sp-6)}
.modal__sub{color:var(--muted);font-weight:500;font-size:var(--fs-sm);margin-bottom:18px}
.modal__acts{display:flex;justify-content:flex-end;gap:var(--sp-10);margin-top:22px}
/* PANEL.confirm() body — the question is the dialog's aria-describedby target */
.cfm__q{font-size:var(--fs-base);font-weight:600;line-height:1.5}
@keyframes sh-fade{from{opacity:0}}
@keyframes sh-pop{from{opacity:0;transform:scale(.96) translateY(6px)}}

/* .empty — empty-state block: icon circle + title + one muted line + optional CTA */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);text-align:center;
  padding:clamp(44px,6vw,72px) var(--sp-24);
}
.empty .sh-ic{width:46px;height:46px;padding:var(--sp-12);border-radius:var(--r-circle);background:var(--card-2);border:1px solid var(--line);color:var(--muted-2);box-sizing:content-box;margin-bottom:var(--sp-8)}
.empty b{font-size:var(--fs-base);font-weight:700}
.empty span{font-size:var(--fs-sm);font-weight:500;color:var(--muted);max-width:40ch}
.empty .btn{margin-top:var(--sp-14)}

/* .toast — bottom center, auto-dismiss (use PANEL.toast(msg)) */
.sh-toasts{position:fixed;left:50%;bottom:var(--sp-24);transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:var(--sp-8);align-items:center;pointer-events:none}
.sh-toast{
  display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--on-ink);font-size:var(--fs-sm);font-weight:600;
  box-shadow:var(--e-toast);
  animation:sh-toast-in .22s cubic-bezier(.2,0,0,1);
}
.sh-toast.is-out{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
@keyframes sh-toast-in{from{opacity:0;transform:translateY(10px)}}

/* --- promoted patterns (each used by 2+ screens) ---------------------------- */

/* .sec-head — header ABOVE a card: title, quiet meta, action pushed right.
   knowledge (.kn-sec__head) · channels (.ch-sec__head) ·
   settings (.st-teamhead) · bookings (.bk-cardhead--row)
   <div class="sec-head"><h2>…</h2><span class="sec-head__meta">…</span>
        <div class="sec-head__act">…</div></div>                            */
.sec-head{display:flex;align-items:center;gap:var(--sp-12);margin-bottom:var(--sp-12);min-height:var(--btn-h-sm)}
.sec-head__meta{font-size:var(--fs-fine);font-weight:600;color:var(--muted-2)}
.sec-head__act{margin-left:auto;display:flex;align-items:center;gap:var(--sp-10);flex:none}

/* .card-head — header INSIDE a card: title left, quiet link/action right,
   hairline under it. dashboard (.db-hd) · conversations (.cv-det__head)
   <div class="card-head"><h3>…</h3><a class="card-head__link" href="#/x">…</a></div> */
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);
  padding:var(--sp-16) var(--sp-20);border-bottom:1px solid var(--line);
}
.card-head h3{font-size:var(--fs-base);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-head__link{display:inline-flex;align-items:center;gap:3px;flex:none;font-size:var(--fs-btn);font-weight:600;color:var(--muted);transition:color var(--t)}
.card-head__link:hover{color:var(--ink)}
.card-head__link .sh-ic{width:14px;height:14px}

/* .kv — label → value row with a top hairline.
   bookings (.bk-grow, .bk-hrow) · settings (.st-usage__m)
   <div class="kv"><span class="kv__k">…</span><b class="kv__v num">…</b></div> */
.kv{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-14);
  min-height:50px;padding:var(--sp-6) 0;border-top:1px solid var(--line);
  font-size:var(--fs-sm);
}
.kv:first-child{border-top:0}
.kv__k{font-weight:500;color:var(--muted);flex:none}
.kv__v{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}

/* .ava — round initial/icon avatar. channels (.ch-row__ava) · settings (.st-member__av)
   .ava--sq = rounded-square brand tile. channels (.ch-tile) · bookings (.bk-gmark)
   <span class="ava" aria-hidden="true">ნ</span>                            */
.ava{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:var(--r-circle);background:var(--card-2);border:1px solid var(--line);
  font-size:var(--fs-md);font-weight:700;color:var(--muted);
}
.ava svg{width:17px;height:17px}
.ava--sq{border-radius:var(--r-md);color:var(--ink)}
.ava--lg{width:44px;height:44px;font-size:var(--fs-lg)}
.ava--lg.ava--sq{border-radius:var(--r-lg)}
.ava--lg svg{width:20px;height:20px}

/* .bar — thin progress / quota meter. dashboard (.db-quota__bar) · settings (.st-bar)
   <div class="bar"><i style="width:62%"></i></div>
   .bar--warn once over ~85%, .bar--danger once over quota.                 */
.bar{height:6px;border-radius:var(--r-pill);background:var(--tint-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--ink);transition:width var(--t)}
.bar--lg{height:8px}
.bar--warn i{background:var(--warn)}   /* --warn-bold is only 2.88:1 on the .07 track */
.bar--danger i{background:var(--danger)}

/* .hint — the fine print line. channels (.ch-hint/.ch-note) · knowledge (.kn-help)
   · settings (.st-fine) · bookings                                          */
.hint{font-size:var(--fs-hint);font-weight:500;color:var(--muted-2);line-height:var(--lh-body)}
.hint--ok{color:var(--ok);font-weight:600}
.hint--warn{color:var(--warn);font-weight:600}
.hint--bad{color:var(--danger);font-weight:600}

/* skeleton shimmer for async bits (quiet, optional) */
.skel{border-radius:var(--r-sm);background:linear-gradient(90deg,var(--tint-2) 25%,rgba(10,10,11,.09) 50%,var(--tint-2) 75%);background-size:200% 100%;animation:sh-skel 1.2s linear infinite}
@keyframes sh-skel{to{background-position:-200% 0}}

/* onboarding (#/welcome) gets a clean canvas: no nav rail, no live pill —
   but the brand mark takes the topbar-left so the first screen is still VOICEO */
.sh-top__brand{display:none;align-items:center;gap:var(--sp-10);font-weight:800;letter-spacing:.12em;font-size:var(--fs-base)}
.sh-top__brand .sh-brand__mark{width:24px;color:var(--ink)}
.sh-top__brand .sh-brand__mark svg{width:100%;height:auto}
body[data-route="welcome"] .sh-side{display:none}
body[data-route="welcome"] .sh-top,body[data-route="welcome"] #view{margin-left:0}
body[data-route="welcome"] #shLive{display:none}
body[data-route="welcome"] .sh-top__brand{display:flex}
body[data-route="welcome"] #shBiz{display:none}

/* error log sink (hidden; window.onerror writes here) */
#errlog{display:none}

/* --- mobile: icon bottom-bar, topbar keeps identity ------------------------- */
@media (max-width:880px){
  .sh-side{
    top:auto;right:0;width:auto;height:64px;z-index:60;
    flex-direction:row;align-items:stretch;gap:0;padding:0 var(--sp-6);
    border-right:0;border-top:1px solid var(--line);
    background:rgba(252,252,254,.92);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  }
  .sh-brand,.sh-side__foot{display:none}
  .sh-nav{flex-direction:row;flex:1}
  .sh-nav a{position:relative;flex:1;flex-direction:column;justify-content:center;gap:3px;padding:0;border-radius:var(--r-lg);margin:7px var(--sp-2);font-size:var(--fs-micro);font-weight:600}
  /* the label is the link's accessible name — hide it visually, never with
     display:none, or six nav links lose their name entirely */
  .sh-nav a span[data-i18n]{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
    white-space:nowrap;border:0;
  }
  .sh-nav a.is-on{box-shadow:none;background:var(--tint-2)}
  .sh-nav a.is-on:focus-visible{box-shadow:var(--focus)}
  .sh-nav .sh-ic{width:21px;height:21px}
  .sh-top{margin-left:0;padding:0 var(--sp-16)}
  .sh-top__biz{font-size:var(--fs-md)}
  #view{margin-left:0;padding:18px var(--sp-16) 96px}
  .modal{padding:var(--sp-20);border-radius:var(--r-3xl)}
  .card-head{padding:var(--sp-14) var(--sp-16)}
}
@media (prefers-reduced-motion: reduce){
  .modal,.modal-overlay,.sh-toast{animation:none}
  .skel{animation:none}
  .bar i{transition:none}
}

/* topbar logout — live mode only (updateShell keeps it hidden otherwise) */
#shLogout{
  height:var(--seg-h);padding:0 var(--sp-12);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  background:var(--card);cursor:pointer;font-family:inherit;
  font-size:var(--fs-btn);font-weight:600;color:var(--muted);
  transition:background var(--t),color var(--t);
}
#shLogout:hover{background:var(--tint-2);color:var(--ink)}
#shLogout:focus-visible{outline:none;box-shadow:var(--focus)}