/* HeyVox web app v2 design layer.
   One language with the website and the app: site tokens (tokens.css), app
   components (hv-scoped.css, used inside a .hv wrapper) and desk layout here.
   Loaded after portal.css, so it re-maps the v1 palette onto the brand and
   overrides v1 components; sections add their own portal-*.css files. */

/* ── 1. The v1 palette, re-mapped onto the brand ──────────────────────────
   v1 rules keep working, but every colour now comes from the app. Its extra
   hues (blue, violet, amber, green) become the app's status colours. */
:root{
  --t:var(--teal); --t-600:var(--teal-dark); --t-400:var(--teal-mid); --t-100:#CFE8E2; --t-50:var(--teal-light);
  --ink-2:var(--body); --ink-3:var(--muted); --ink-4:var(--muted);
  --coral-50:var(--coral-light);
  --amber:var(--st-progress); --amber-50:#FBF0DE;
  --green:var(--st-done); --green-50:#E3F3EB;
  --blue:var(--st-new); --blue-50:#E8F1FA;
  --violet:var(--st-waiting); --violet-50:#EFE8F6;
  --shadow-sm:none;
  --shadow-md:0 8px 20px -14px rgba(7,40,35,.30);
  --shadow-lg:var(--lift);
  --grad-teal:linear-gradient(var(--teal),var(--teal));
  --grad-warm:linear-gradient(var(--coral),var(--coral));
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px; --sidebar:248px;
}
body{font-family:var(--font-ui);color:var(--ink)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em}
.num{font-family:var(--font-display);font-weight:600}
a:hover{color:var(--teal-dark)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hv{--s:1}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ── 2. Sign-in ────────────────────────────────────────────────────────────
   Split screen on a computer: the website's teal band with the phone on the
   left, the form on the right. One column on a phone. */
.auth-check{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;background:var(--bg);z-index:100}
body:has(#gateOut:not(.hide)) .auth-check,body:has(#gateNone:not(.hide)) .auth-check,body:has(#gatePlan:not(.hide)) .auth-check,body:has(#app:not(.hide)) .auth-check{display:none}
.auth-bar{width:160px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.auth-bar i{display:block;width:40%;height:100%;background:var(--teal);border-radius:3px;animation:authbar 1.1s var(--ease) infinite}
@keyframes authbar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.auth-wm{font:400 25px/1 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.auth-wm b{font-weight:800;color:var(--teal)}

.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--surface)}
.auth.auth-solo{grid-template-columns:minmax(0,1fr);background:var(--bg)}
.auth-brand{background:var(--teal-deep);color:#D5ECE6;padding:48px 56px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.auth-brand .auth-wm{color:#fff}
.auth-brand .auth-wm b{color:var(--teal-border)}
.auth-brand h1{color:#fff;font-size:40px;line-height:1.05;letter-spacing:-.02em;margin-top:28px}
.auth-brand > p{font-size:17px;line-height:1.5;max-width:34ch;color:#D5ECE6}
.auth-phone{margin:8px 0 4px;align-self:flex-start;--s:.62}
.auth-phone .ph{--s:.62;box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.auth-ticks{list-style:none;padding:0;margin:auto 0 0;display:grid;gap:10px;font-size:14.5px}
.auth-ticks li{display:flex;gap:10px;align-items:flex-start}
.auth-ticks li:before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--teal-border) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23063F38'/%3E%3C/svg%3E") center/12px no-repeat}

.auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px}
.auth-card{width:100%;max-width:420px}
.auth-card.auth-wide{max-width:620px}
.auth-solo .auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sheet);padding:36px 32px}
.auth-mob{display:none;align-items:center;gap:12px;margin-bottom:28px}
.auth-mob.show{display:flex}
.auth-mob svg{width:44px;height:44px;border-radius:12px}
.auth-card h2{font-size:28px;line-height:1.15;color:var(--ink);margin-bottom:8px}
.auth-sub{font-size:15.5px;line-height:1.55;color:var(--body);margin-bottom:22px}
.auth-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:52px;border-radius:var(--r-btn);background:#fff;border:1px solid #DADCE0;color:#1F1F1F;font:600 16px var(--font-ui);transition:background var(--t-fast),border-color var(--t-fast)}
.auth-google:hover{background:#F8FAFA;border-color:#C6CBCC}
.auth-google svg{width:18px;height:18px}
.auth .gsep{margin:20px 0;color:var(--muted);font-size:13px}
.auth-label{display:block;font:600 13px var(--font-ui);color:var(--ink);margin-bottom:6px}
.auth-input{width:100%;height:48px;border:1px solid var(--line-2);border-radius:var(--r-btn);padding:0 14px;font:400 16px var(--font-ui);color:var(--ink);background:#fff;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.auth-input:focus{border-color:var(--teal);box-shadow:var(--focus)}
.auth-input[aria-invalid=true]{border-color:var(--coral-text)}
.auth-btn{display:flex;align-items:center;justify-content:center;width:100%;height:52px;margin-top:12px;border-radius:var(--r-btn);background:var(--teal);color:#fff;font:600 16px var(--font-ui);transition:background var(--t-fast)}
.auth-btn:hover{background:var(--teal-dark)}
.auth-btn:disabled{opacity:.7;cursor:default}
.auth-btn.busy{background:var(--teal-dark)}
.auth-btn2{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:var(--r-btn);border:1px solid var(--line-2);background:#fff;color:var(--teal-dark);font:600 15px var(--font-ui);text-decoration:none}
.auth-btn2:hover{border-color:var(--teal-border);color:var(--teal-dark)}
.auth-link{color:var(--teal-dark);font:600 14px var(--font-ui);text-decoration:underline;text-underline-offset:3px;padding:0}
.auth-link:disabled{color:var(--muted);text-decoration:none;cursor:default}
.auth-err{margin-top:14px;background:var(--coral-light);border:1px solid var(--coral-border);color:var(--coral-text);border-radius:var(--r-btn);padding:12px 14px;font-size:14px;line-height:1.5}
.auth-sent{text-align:left}
.auth-sent-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--teal-light);color:var(--teal);margin-bottom:18px}
.auth-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 18px}
.auth-row .auth-btn{width:auto;padding:0 22px;margin:0}
.auth-small{font-size:14px;line-height:1.55;color:var(--muted)}
.auth-more{display:grid;gap:10px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px}
.auth-more a{font-weight:600;color:var(--teal-dark);text-decoration:none}
.auth-more a:hover{text-decoration:underline}
.auth-foot{display:flex;gap:22px;margin-top:40px;font-size:13px}
.auth-foot a{color:var(--muted);text-decoration:none}
.auth-foot a:hover{color:var(--teal-dark);text-decoration:underline}
.auth-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 18px}
.auth-plan{border:1px solid var(--line);border-radius:var(--r-card);padding:18px;font-size:14.5px;line-height:1.55;color:var(--body);background:var(--surface)}
.auth-plan b{display:block;font:600 15px var(--font-display);color:var(--ink);margin-bottom:6px}
.auth-plan.feat{border:2px solid var(--teal);padding:17px}
@media (max-width:959px){
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-brand{display:none}
  .auth-mob{display:flex}
  .auth-main{justify-content:flex-start;padding:32px 16px 24px}
  .auth-card h2{font-size:24px}
  .auth-solo .auth-card{padding:28px 20px}
}
@media (max-width:560px){.auth-plans{grid-template-columns:1fr}}
.auth-sent-ic svg{width:26px;height:26px}
.auth-mob svg{flex:none}

/* The closed drawer sat just off-screen with its shadow showing as a grey band
   down the right edge of every screen. Hidden when closed. */
.drawer:not(.on){visibility:hidden;transition:right .28s var(--ease),visibility 0s linear .28s}
.drawer.on{visibility:visible;transition:right .28s var(--ease),visibility 0s}

/* ── 3. Shell ──────────────────────────────────────────────────────────────
   Sidebar: logo, the app's five sections, then help and the account menu at
   the bottom. Header: page title and tabs, search ("/" or Ctrl K), the line
   switcher. Phones: the app's bottom bar instead of a hamburger. */
.shell{grid-template-columns:var(--sidebar) minmax(0,1fr)}
.sidebar{background:var(--surface);border-right:1px solid var(--line)}
.brand{padding:18px 20px 14px;min-height:64px;gap:10px}
.brand .mark{width:32px;height:32px;border-radius:8px;box-shadow:none}
.brand .mark svg{width:32px;height:32px}
.brand .wm{font:400 22px/1 var(--font-display);letter-spacing:-.01em}
.brand .wm .h{font-weight:400}
.brand .wm .v{font-weight:800;color:var(--teal)}
.nav{padding:8px 16px;flex:1}
.nav-item{min-height:44px;padding:0 12px;gap:12px;border-radius:var(--r-sm);color:var(--body);font:600 15px var(--font-ui);margin-bottom:2px}
.nav-item svg{width:20px;height:20px;color:var(--muted)}
.nav-item:hover{background:color-mix(in srgb,var(--teal-light) 55%,transparent);color:var(--ink)}
.nav-item:hover svg{color:var(--teal)}
.nav-item.on{background:var(--teal-light);color:var(--teal-dark)}
.nav-item.on svg{color:var(--teal)}
.nav-item.on::before{left:-16px;width:3px;height:24px;background:var(--teal)}
.nav-badge{background:var(--teal);color:#fff;font:600 12px var(--font-ui);min-width:20px;height:20px;border-radius:10px;padding:0 6px}
.nav-badge.mut{background:var(--line-2);color:var(--body)}
.side-foot{border-bottom:0;border-top:1px solid var(--line);padding:10px 12px 14px;position:relative}
.side-help{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border-radius:var(--r-sm);color:var(--body);font:600 14px var(--font-ui)}
.side-help svg{width:18px;height:18px;color:var(--teal)}
.side-help:hover{background:color-mix(in srgb,var(--teal-light) 55%,transparent);color:var(--ink)}
.uchip{min-height:52px;padding:8px 10px;margin-top:2px}
.uchip:hover{background:color-mix(in srgb,var(--teal-light) 55%,transparent)}
.uav{width:32px;height:32px;border-radius:50%;background:var(--teal-light);color:var(--teal-dark);font:600 13px var(--font-ui)}
.uchip .who{flex:1}
.uchip .who b{font:600 14px var(--font-ui)}
.uchip .who span{font-size:13px;color:var(--muted)}
.uchev{width:16px;height:16px;color:var(--muted);flex:none}
.umenu{position:absolute;left:12px;right:12px;bottom:calc(100% - 4px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-btn);box-shadow:var(--pop);padding:6px;z-index:80}
.umenu-who{padding:10px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.umenu-who b{display:block;font:600 14px var(--font-ui);color:var(--ink)}
.umenu-who span{display:block;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.umenu a,.umenu button{display:flex;align-items:center;width:100%;min-height:40px;padding:0 12px;border-radius:var(--r-sm);font:500 14px var(--font-ui);color:var(--ink);text-decoration:none;text-align:left}
.umenu a:hover,.umenu button:hover,.umenu a:focus-visible,.umenu button:focus-visible{background:var(--teal-light);color:var(--teal-dark)}

.topbar{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);min-height:64px;padding:12px 32px;gap:20px;border-bottom:1px solid var(--line)}
.tb-title h1{font:600 24px/1.2 var(--font-display);letter-spacing:-.015em;color:var(--ink)}
.topbar .sub,#pageSub{display:none}
.gsearch{max-width:420px;margin:0 0 0 auto}
.gsearch input{height:40px;padding:0 40px 0 38px;border:1px solid var(--line-2);border-radius:var(--r-pill);font:400 14px var(--font-ui)}
.gsearch input:focus{border-color:var(--teal);box-shadow:var(--focus)}
.gsearch input::-webkit-search-cancel-button{display:none}
.gs-key{position:absolute;right:10px;top:50%;transform:translateY(-50%);min-width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:6px;font:600 12px var(--font-ui);color:var(--muted);background:var(--surface-2)}
.gsearch input:focus ~ .gs-key{display:none}
.gsearch-panel{border-radius:var(--r-btn);box-shadow:var(--pop)}
.lineswitch select{height:40px;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:0 34px 0 14px;font:600 14px var(--font-ui);color:var(--ink);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%2356706B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center/16px no-repeat;appearance:none;-webkit-appearance:none;cursor:pointer}
.lineswitch select:focus{outline:none;border-color:var(--teal);box-shadow:var(--focus)}
.tb-me{display:none}
.sectabs{padding:0 32px;gap:4px;background:var(--surface)}
.sectab{font:600 15px var(--font-ui);color:var(--muted);min-height:46px}
.sectab.on{color:var(--teal-dark);border-bottom-color:var(--teal)}
.content{padding:28px 32px 72px;max-width:1360px}
.content:focus{outline:none}
.bnav{display:none}

@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{display:none}
  .hamb{display:none!important}
  .topbar{padding:10px 16px;gap:10px;min-height:56px;flex-wrap:wrap}
  .tb-title{flex:1;min-width:0}
  .tb-title h1{font-size:20px}
  .gsearch{order:5;flex:1 1 100%;max-width:none;margin:0}
  .gs-key{display:none}
  .lineswitch{order:4}
  .lineswitch select{height:36px;font-size:13px;max-width:44vw}
  .tb-me{display:inline-flex;order:3;border-radius:50%}
  .tb-me .uav{width:36px;height:36px}
  .umenu{position:fixed;left:auto;right:12px;top:60px;bottom:auto;width:min(280px,calc(100vw - 24px))}
  .sectabs{padding:0 12px}
  .content{padding:16px 16px calc(88px + env(safe-area-inset-bottom))}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;justify-content:center;color:var(--muted);font:600 11px var(--font-ui);position:relative;border-radius:var(--r-sm)}
  .bnav-item svg{width:24px;height:24px}
  .bnav-item.on{color:var(--teal)}
  .bnav-item.on span{font-weight:700}
  .bnav-item.locked{opacity:.5}
  .bnav-badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--teal);color:#fff;font:600 11px/18px var(--font-ui);font-style:normal;padding:0 5px;text-align:center}
  .demo-ribbon{bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* Demo: a slim bar across the top, never over content or buttons. */
.demo-ribbon{position:sticky;top:0;bottom:auto;z-index:45;display:flex;justify-content:center;align-items:center;gap:16px;min-height:36px;padding:6px 16px;background:var(--teal-deep);color:#D5ECE6;font:500 13px var(--font-ui);letter-spacing:0}
.demo-ribbon a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
body:has(.drawer.on) .demo-ribbon{display:flex}
body.has-demo .sidebar{top:36px;height:calc(100vh - 36px)}
body.has-demo .topbar{top:36px}
@media (max-width:860px){.demo-ribbon{bottom:auto}}

/* Avatars: the app's teal-light circle with teal initials (photos still show). */
.av,.uav,.member .uav{border-radius:50%!important;color:var(--teal-dark)!important;font-family:var(--font-ui)!important;font-weight:600!important}
.av .avph svg{color:var(--teal)}

/* Live refresh: new calls announce themselves without moving the page. */
.new-pill{position:fixed;left:50%;top:76px;transform:translate(-50%,-12px);opacity:0;pointer-events:none;z-index:60;height:36px;padding:0 16px;border-radius:var(--r-pill);background:var(--teal);color:#fff;font:600 14px var(--font-ui);box-shadow:var(--pop);transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.new-pill.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.new-pill:hover{background:var(--teal-dark)}
@media (min-width:861px){.new-pill{left:calc(50% + var(--sidebar)/2)}}

/* ── 4. UI kit ─────────────────────────────────────────────────────────────
   Used by every section. Markup comes from the ui* helpers in core.js. */

/* Buttons (v1 .btn rules re-tuned; .btn-p primary, .btn-s secondary, .btn-ghost, .btn-danger, .btn-icon) */
.btn{min-height:40px;padding:0 16px;border-radius:var(--r-btn);font:600 14px var(--font-ui);gap:8px;display:inline-flex;align-items:center;justify-content:center;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.btn-p,.btn.primary{background:var(--teal);color:#fff;border:1px solid var(--teal)}
.btn-p:hover,.btn.primary:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.btn-s,.btn.ghost{background:var(--surface);color:var(--teal-dark);border:1px solid var(--line-2)}
.btn-s:hover,.btn.ghost:hover{border-color:var(--teal-border);background:var(--surface)}
.btn-ghost{background:transparent;color:var(--body);border:1px solid transparent}
.btn-ghost:hover{background:var(--teal-light);color:var(--teal-dark)}
.btn-danger{background:var(--surface);color:var(--danger);border:1px solid #F1C7C2}
.btn-danger:hover{background:#FDECEA}
.btn-icon{width:40px;min-height:40px;padding:0;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--body)}
.btn-icon:hover{color:var(--teal);border-color:var(--teal-border)}
.btn svg,.btn-icon svg{width:18px;height:18px}
.btn:disabled{opacity:.55;cursor:default}

/* Form fields */
.fld{display:grid;gap:6px;margin-bottom:16px}
.fld-l{font:600 13px var(--font-ui);color:var(--ink)}
.fld-h{font-size:13px;color:var(--muted);line-height:1.45}
.inp,.fld input,.fld textarea,.fld select{width:100%;min-height:44px;border:1px solid var(--line-2);border-radius:var(--r-btn);padding:10px 14px;font:400 15px var(--font-ui);color:var(--ink);background:var(--surface);outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.fld textarea{min-height:96px;line-height:1.5;resize:vertical}
.inp:focus,.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--teal);box-shadow:var(--focus)}
.fld select{appearance:none;-webkit-appearance:none;padding-right:36px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%2356706B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center/16px no-repeat}
.fld-err{font-size:13px;color:var(--coral-text)}
[aria-invalid=true]{border-color:var(--coral-text)!important}

/* Switch rows: label and help on the left, switch on the right, whole row clickable */
.sw-row{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:12px 0;cursor:pointer}
.sw-row + .sw-row{border-top:1px solid var(--line)}
.sw-row.dis{opacity:.55;cursor:default}
.sw-txt b{display:block;font:600 15px var(--font-ui);color:var(--ink)}
.sw-txt span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.sw{position:relative;flex:none;width:44px;height:26px}
.sw input{position:absolute;inset:-9px -0px;width:calc(100% + 0px);height:44px;opacity:0;margin:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--line-2);border:1px solid #B9CEC9;transition:background var(--t-fast) var(--ease)}
.sw i:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(7,40,35,.3);transition:transform var(--t-fast) var(--ease)}
.sw input:checked + i{background:var(--teal);border-color:var(--teal)}
.sw input:checked + i:after{transform:translateX(18px)}
.sw input:focus-visible + i{box-shadow:var(--focus)}

/* Segmented control */
.seg2{display:inline-flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill)}
.seg2 button{height:34px;padding:0 14px;border-radius:var(--r-pill);font:600 14px var(--font-ui);color:var(--body);transition:background var(--t-fast),color var(--t-fast)}
.seg2 button[aria-checked=true]{background:var(--teal);color:#fff}
.seg2 button:hover:not([aria-checked=true]){background:var(--teal-light);color:var(--teal-dark)}

/* Chips: tags (fixed colour per tag) and statuses (dot + label) */
.chip2{display:inline-flex;align-items:center;gap:4px;font:600 12px/1.2 var(--font-ui);padding:3px 7px;border-radius:var(--r-chip);white-space:nowrap;color:color-mix(in srgb,var(--c,#0A7B6C) 72%,#000);background:color-mix(in srgb,var(--c,#0A7B6C) 9.4%,#fff);border:1px solid color-mix(in srgb,var(--c,#0A7B6C) 38%,transparent)}
.chip2.urgent{--c:var(--urgent)}
.stat2{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--font-ui);white-space:nowrap}
.stat2 i{width:8px;height:8px;border-radius:50%;flex:none}
.stat2.st-new{color:var(--st-new-ink)}.stat2.st-new i{background:var(--st-new)}
.stat2.st-progress{color:var(--st-progress-ink)}.stat2.st-progress i{background:var(--st-progress)}
.stat2.st-waiting{color:var(--st-waiting-ink)}.stat2.st-waiting i{background:var(--st-waiting)}
.stat2.st-done{color:var(--st-done-ink)}.stat2.st-done i{background:var(--st-done)}

/* Panels and cards: flat, one border, the app's 16px radius */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none}
.panel-h{padding:18px 20px 0}
.panel-h h3,.panel-t{font:600 17px var(--font-display);color:var(--ink)}
.panel-b{padding:16px 20px 20px}

/* Empty states */
.empty2{display:grid;justify-items:center;text-align:center;gap:8px;padding:40px 20px}
.empty2-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--teal-light);color:var(--teal)}
.empty2-ic svg{width:24px;height:24px}
.empty2 h3{font:600 17px var(--font-display);color:var(--ink)}
.empty2 p{font-size:15px;color:var(--body);max-width:42ch}
.empty2 .btn{margin-top:8px}

/* Tables */
.tbl2-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:auto}
.tbl2{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl2 th{position:sticky;top:0;background:var(--surface-2);font:600 13px var(--font-ui);color:var(--ink);text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl2 th button{font:inherit;color:inherit;display:inline-flex;align-items:center;gap:4px}
.tbl2 td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--body);vertical-align:middle}
.tbl2 tbody tr:last-child td{border-bottom:0}
.tbl2 tbody tr{cursor:pointer;transition:background var(--t-fast)}
.tbl2 tbody tr:hover,.tbl2 tbody tr:focus-within{background:color-mix(in srgb,var(--teal-light) 45%,transparent)}
.tbl2 .num{text-align:right;font-variant-numeric:tabular-nums}

/* Dialog */
.dlg-wrap{position:fixed;inset:0;z-index:200;background:rgba(6,40,35,.45);display:grid;place-items:center;padding:16px;opacity:0;transition:opacity var(--t-fast)}
.dlg-wrap.on{opacity:1}
.dlg{width:min(440px,100%);background:var(--surface);border-radius:var(--r-sheet);box-shadow:var(--lift);padding:24px;transform:translateY(8px);transition:transform var(--t-med) var(--ease-in)}
.dlg-wrap.on .dlg{transform:none}
.dlg h2{font:600 20px var(--font-display);color:var(--ink);margin-bottom:8px}
.dlg-body{font-size:15px;line-height:1.55;color:var(--body);margin-bottom:16px}
.dlg .fld{margin:8px 0 4px}
.dlg-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* Snackbar (replaces the v1 dark toast) */
.toast{left:24px;bottom:24px;transform:translateY(16px);max-width:min(440px,calc(100vw - 32px));display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:var(--r-card);font:500 14px var(--font-ui);background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--pop);opacity:0;pointer-events:none;transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease);z-index:150}
.toast.on{opacity:1;transform:none;pointer-events:auto}
.toast.success{background:#F0FFF6;border-color:#9FD9B5}
.toast.error{background:var(--coral-light);border-color:var(--coral-border);color:var(--coral-text)}
.toast.warning{background:var(--gold-light);border-color:#E8D49B;color:var(--gold)}
.toast-msg{flex:1}
.toast-act{font:600 14px var(--font-ui);color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px}
.toast-x{font-size:20px;line-height:1;color:var(--muted);width:28px;height:28px;border-radius:50%}
.toast-x:hover{background:rgba(7,40,35,.06)}
@media (min-width:861px){.toast{left:calc(var(--sidebar) + 24px)}}
@media (max-width:860px){.toast{left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));max-width:none}}

/* List and detail: calls and customers. The list on the left, the open item
   on the right on a wide screen; a drawer between; a full sheet on a phone. */
.ld{display:grid;grid-template-columns:minmax(380px,5fr) minmax(0,7fr);gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;min-height:calc(100vh - 200px)}
.ld-list{border-right:1px solid var(--line);overflow:auto;max-height:calc(100vh - 200px)}
.ld-detail{overflow:auto;max-height:calc(100vh - 200px)}
@media (max-width:1279px){.ld{grid-template-columns:minmax(0,1fr)}.ld-detail{display:none}.ld-list{border-right:0;max-height:none}}
body.has-demo .shell{min-height:calc(100vh - 36px)}
/* Server-update notice (core.js checkServer) */
.srv-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 16px 0;padding:10px 14px;border-radius:var(--r-btn);background:var(--gold-light);color:var(--gold);font:500 14px/1.4 var(--font-ui)}
.srv-note-btn{margin-left:auto;border:1px solid currentColor;background:transparent;color:inherit;border-radius:var(--r-pill);padding:4px 12px;font:600 13px var(--font-ui);cursor:pointer}
.srv-note-btn:focus-visible{outline:none;box-shadow:var(--focus)}
/* Inside the app (one section, embedded): the app has its own bottom bar. */
.solo .bnav{display:none!important}
.solo .content{padding-bottom:16px}

/* Build 58: two-tone nav icons (the app's set, scratchpad/icons2t). A soft
   fill under an outline. Unselected: muted outline on a pale fill. Selected:
   teal outline on mint, the same as the app's bottom bar. Pure CSS: the
   selected state is the .on class the nav already sets. */
.i2t{--i2t-line:#56706B;--i2t-fill:#E1EEEB}
.i2t .fill{fill:var(--i2t-fill);stroke:none}
.i2t .line{fill:none;stroke:var(--i2t-line);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-item.on .i2t,.bnav-item.on .i2t{--i2t-line:#0A7B6C;--i2t-fill:#9FD6CB}
.nav-item:hover .i2t{--i2t-line:#0A7B6C}
.nav-item .i2t{width:22px;height:22px}
@media (forced-colors:active){
  .i2t .fill{fill:none}
  .i2t .line{stroke:CanvasText}
  .nav-item.on .i2t .line,.bnav-item.on .i2t .line{stroke:Highlight}
}