/* ==========================================================================
   MainSDK — components. Tokens only: no raw colours, fonts or sizes here.
   Minimal surface, maximum value: hairlines over boxes, numbers over decoration.
   ONE component set for the landing (site.css adds page layout), the docs (docs.css adds layout and prose)
   and the portal. The lockup, buttons, links, code blocks, the command, the copy button, the segmented
   control, chips, tags, tables, the site header and footer and the endorsement live here and only here.
   All animation lives in motion.css behind one gate.
   ========================================================================== */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-base)/1.55 var(--font);font-feature-settings:"cv11","ss01"}
h1,h2,h3,h4,p,ol,ul,figure{margin:0}
a{color:inherit} img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
code,kbd{font:500 .92em var(--mono)}
kbd{display:inline-grid;place-items:center;min-width:var(--s5);height:var(--s5);padding:0 var(--s1);border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r-sm);font:500 var(--t-xs)/1 var(--mono);color:var(--muted);background:var(--surface)}
::selection{background:rgba(var(--accent-rgb),.18)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
[hidden]{display:none!important}

/* ---------- Utilities (one of each) ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:var(--s4);top:calc(var(--s10) * -1);z-index:60;padding:var(--s2) var(--s3);border-radius:var(--r-md);background:var(--ink);color:var(--on-ink);text-decoration:none}
.skip:focus{top:var(--s3)}
.soft,.muted{color:var(--muted)} .faint{color:var(--faint)}
.mono{font-family:var(--mono);font-size:.92em}
.mono-h,.mono-num{font-family:var(--mono);letter-spacing:-.02em}
.cap-t,.tcap{text-transform:capitalize}
.hint{font-size:var(--t-xs);color:var(--muted)}
.flip,.back{transform:scaleX(-1)} [dir="rtl"] .back{transform:none}
.tnum{font-variant-numeric:tabular-nums}
/* Theme-specific images (the official light and dark logo files where no script swaps them) */
[data-theme="dark"] .on-light{display:none!important}
:root:not([data-theme="dark"]) .on-dark{display:none!important}

/* ---------- Type ---------- */
.display{font:600 var(--t-4xl)/1.02 var(--font-display);letter-spacing:-.045em}
.h1,.head h1{font:600 var(--t-2xl)/1.15 var(--font-display);letter-spacing:-.03em}
.h2{font:600 var(--t-xl)/1.25 var(--font-display);letter-spacing:-.02em}
.h3{font:600 var(--t-md)/1.35 var(--font)}
.lede{font-size:var(--t-lg);line-height:1.5;color:var(--muted);max-width:62ch}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font:600 var(--t-xs)/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.num{font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
[dir="rtl"] .display,[dir="rtl"] .h1,[dir="rtl"] .head h1,[dir="rtl"] .h2{letter-spacing:0;line-height:1.3}

/* ---------- Links: ink text, the accent only as an underline (red never carries body text) ---------- */
.link{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.55);text-decoration-thickness:1px;text-underline-offset:3px}
.link:hover{text-decoration-color:var(--accent)}
.text-link{height:var(--s8);display:inline-flex;align-items:center;padding:0 var(--s3);font-size:var(--t-sm);font-weight:500;text-decoration:none;border-radius:var(--r-md);color:var(--ink)}
.text-link:hover{background:var(--hover)}

/* ---------- Icons ---------- */
i[data-i],i[data-arrow]{display:inline-flex;width:18px;height:18px;flex:none;font-style:normal}
i[data-i] svg,i[data-arrow] svg{width:100%;height:100%}
i[data-c="sm"]{width:15px;height:15px} i[data-c="lg"]{width:24px;height:24px}
[dir="rtl"] i[data-arrow]{transform:scaleX(-1)}
.ico{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-md);background:var(--well);color:var(--ink);flex:none}
.ico.acc{background:var(--accent-50);color:var(--accent-ink)}
/* Icon button: theme toggle and menu on the landing, the docs and the portal */
.icon-btn{display:inline-grid;place-items:center;width:var(--s8);height:var(--s8);flex:none;border-radius:var(--r-md);border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.icon-btn:hover{border-color:var(--ink);background:var(--hover)}
.icon-btn svg{width:18px;height:18px}
.icon-btn svg:not([fill]){fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}

/* ==========================================================================
   Brand: one lockup everywhere, with the proportions of 03-brand/logo/logo-ink.svg:
   the mark box is --logo-h tall, the wordmark is .96 of it, the gap .32 of it, letter-spacing -.02em.
   24 px in every header, 22 px in the portal sidebar. The logo palette is fixed: it never follows the
   accent or a custom colour (one palette for every logo).
   ========================================================================== */
:root{--logo-ink:#0a0a0a;--logo-red:#ec3013;--logo-h:24px}
[data-theme="dark"]{--logo-ink:#fafafa;--logo-red:#ff563c}
.brand{display:inline-flex;align-items:center;gap:calc(var(--logo-h) * .32);flex:none;text-decoration:none;color:var(--logo-ink)}
.brand > img,.brand > .mk,.brand > [data-logo],.brand > [data-logo] img{width:var(--logo-h);height:var(--logo-h);flex:none}
.wordmark{font:600 calc(var(--logo-h) * .96)/1 var(--font-display);letter-spacing:-.02em;color:var(--logo-ink);white-space:nowrap}
.wordmark b{font-weight:600;color:var(--logo-red)}
.brand-tag{font:500 var(--t-sm)/1 var(--font);color:var(--muted);padding-inline-start:var(--s2);border-inline-start:1px solid var(--line)}
[data-logo]{display:inline-flex;align-items:center} [data-logo] img{height:var(--logo-h);width:auto}
/* The prompt mark drawn inline, only where it moves (landing header cursor, sign-in loading); static marks use the file */
.mk .chev{fill:none;stroke:var(--logo-ink);stroke-width:7;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:40;stroke-dashoffset:0}
.mk .cur{fill:var(--logo-red)}
:is(.code,.tail,.dark-band,.auth-side) .mk .chev{stroke:var(--code-strong)}
:is(.code,.tail,.dark-band,.auth-side) .mk .cur{fill:var(--code-accent)}
.mk-sm{width:16px;height:16px;flex:none}
.mark-live{width:28px;height:28px;flex:none}
.mark-xl{width:64px;height:64px} .mark-xl img{width:100%;height:100%}
/* Endorsement: the same block on every surface */
.endorse{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-xs);color:var(--muted);text-decoration:none}
.endorse svg,.endorse [data-hubxero] svg{width:18px;height:16px;flex:none;color:var(--logo-ink)}
.endorse [data-hubxero]{display:inline-flex}
.hx{fill:none;stroke:currentColor;stroke-width:38;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Public header: ONE component on every public surface (the landing, 404, What is coming, every docs
   page, sign-in, device, request access). Markup: tools/build_docs.py site_header(); shell.js siteChrome() and the
   static pages carry the same. Behaviour (menu sheet, theme, search shortcut) lives in boot.js. ---------- */
.site-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--s2);height:var(--head-h);padding:0 var(--s6);background:var(--scrim);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.site-head .brand{margin-inline-end:var(--s5)}
.head-menu{display:contents}
.site-nav{order:1;display:flex;align-items:center;gap:var(--s1);font-size:var(--t-sm);color:var(--muted)}
.site-nav a{display:inline-flex;align-items:center;gap:var(--s1);height:var(--s8);padding:0 var(--s2);border-radius:var(--r-md);text-decoration:none;white-space:nowrap;transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);background:var(--hover)}
.site-nav .ic-ext{width:var(--s3);height:var(--s3);flex:none}
.head-actions{order:2;margin-inline-start:auto;display:flex;align-items:center;gap:var(--s2)}
.head-account{order:3;display:flex;align-items:center;gap:var(--s2)}
.site-head .btn{height:var(--s8)}
.site-head .text-link{height:var(--s8)}
.site-head .searchbtn{min-width:calc(var(--s10) * 2.2);text-decoration:none}
.site-head .searchbtn svg{width:var(--s4);height:var(--s4);flex:none}
.head-menu-btn{display:none}
.ic-sun{display:none} [data-theme="dark"] .ic-sun{display:block} [data-theme="dark"] .ic-moon{display:none}
@media (max-width:1100px){
  .site-head .searchbtn{min-width:0;width:var(--s8);padding:0;justify-content:center}
  .site-head .searchbtn span,.site-head .searchbtn kbd{display:none}
}
@media (max-width:960px){.head-account .signin{display:none} .site-head .brand{margin-inline-end:var(--s2)} .site-nav a{padding:0 var(--s1)}}
/* Under 760px: the logo, search, theme and a menu button; the nav and the account links open in a sheet */
@media (max-width:760px){
  .head-menu-btn{display:inline-grid}
  .head-menu{display:none;position:absolute;top:100%;inset-inline:0;flex-direction:column;gap:var(--s4);max-height:calc(100vh - var(--head-h));overflow-y:auto;padding:var(--s3) var(--s6) var(--s6);background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lift)}
  .site-head.is-open .head-menu{display:flex}
  .site-nav{flex-direction:column;align-items:stretch;gap:0;font-size:var(--t-md)}
  .site-nav a{height:calc(var(--s8) + var(--s1));padding:0 var(--s2);border-bottom:1px solid var(--line);border-radius:0}
  .site-nav a[aria-current="page"]{border-radius:var(--r-md)}
  .head-account{flex-direction:column;align-items:stretch}
  .head-account .signin{display:inline-flex;justify-content:center;border:1px solid var(--line-2)}
  .head-account .btn{height:calc(var(--s8) + var(--s1))}
}

/* ---------- Public footer: the same block under the landing, the 404, What is coming and every docs page ---------- */
.wrap{max-width:var(--content);margin:0 auto;padding-inline:var(--s6)}
.site-foot{border-top:1px solid var(--line)}
.foot-in{padding:var(--s7) var(--s6);display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;justify-content:space-between;font-size:var(--t-sm);color:var(--muted)}
.foot-in .endorse{font-size:var(--t-sm)}
.foot-nav{display:flex;gap:var(--s2) var(--s5);flex-wrap:wrap}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{color:var(--ink)}
.foot-note{margin:0;flex-basis:100%;font-size:var(--t-xs);color:var(--faint)}
body[data-shell="none"] .site-page{max-width:var(--content);margin:0 auto;padding:var(--s7) var(--s6) var(--s10)}

/* ---------- App shell ---------- */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4) var(--s3);border-inline-end:1px solid var(--line);background:var(--surface-2);overflow-y:auto}
.static .sidebar{height:auto;min-height:100vh}
.sidebar .brand{--logo-h:22px;display:flex;height:36px;padding:0 var(--s2);margin-bottom:var(--s2)}
.nav-sep{font:600 var(--t-xs)/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:var(--s4) var(--s2) var(--s2)}
.nav-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:center;height:38px;padding:0 10px;border-radius:var(--r-md);text-decoration:none;color:var(--muted);transition:background var(--dur) var(--ease)}
.nav-item:hover{background:var(--hover)}
/* One active idiom on every surface: grey fill and ink text, no red bar */
.nav-item[aria-current="page"]{background:var(--hover);color:var(--ink)}
[data-theme="dark"] .nav-item[aria-current="page"]{background:var(--line)}
.nav-item .t{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item .m{grid-column:2/4;font-size:var(--t-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item .m b{color:var(--ink);font-weight:600}
.nav-item .dot{width:6px;height:6px;border-radius:50%;background:var(--crit)}
.nav-item .ext{color:var(--faint)}
.side-nav{display:flex;flex-direction:column;gap:2px}
.sidebar .foot{margin-top:auto;padding-top:var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.sidebar .foot .nav-item{margin-bottom:var(--s1)}
.acct{display:flex;align-items:center;gap:10px;padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:inherit;margin-bottom:var(--s3);background:var(--surface)}
.acct:hover{border-color:var(--line-2)}
.acct .sq-av,.list-row .sq-av{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);background:var(--ink);color:var(--on-ink);font:600 var(--t-xs)/1 var(--font);flex:none}
.acct .who{display:flex;flex-direction:column;min-width:0}
.acct .n{display:block;font-size:var(--t-sm);font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .p{display:block;font-size:var(--t-xs);color:var(--muted);line-height:1.3}
.acct i[data-i]{margin-inline-start:auto;color:var(--faint)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s3);height:var(--topbar);padding:0 var(--s6);background:var(--scrim);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.crumbs{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--t-sm);color:var(--muted)}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ink)} .crumbs b{color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Search trigger: the portal topbar and the docs header use the same control */
.searchbtn,.topbar .search{display:flex;align-items:center;gap:var(--s2);height:var(--s8);padding:0 var(--s2) 0 var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);color:var(--muted);font-size:var(--t-sm);cursor:pointer}
.topbar .search{margin-inline-start:auto;width:min(360px,40vw)}
.searchbtn:hover,.topbar .search:hover{border-color:var(--line-2);color:var(--ink)}
.searchbtn span,.topbar .search span{flex:1;text-align:start}
.searchbtn kbd,.topbar .search kbd{margin-inline-start:auto}
.topbar .theme-btn{width:var(--s8);height:var(--s8);padding:0}
.topbar .page-status{display:inline-flex;align-items:center;gap:6px}
.topbar .page-status .badge{margin:0}
.avatar{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--on-ink);font:600 var(--t-xs)/1 var(--font);border:0;cursor:pointer;flex:none}
.btn.menu-btn{display:none}
.main{min-width:0;max-width:var(--content);width:100%;margin:0 auto;padding:var(--s7) var(--s6) var(--s10)}
/* The Ask orb floats over the bottom corner: the last row and the pager always clear it */
.app .main{padding-bottom:calc(var(--s10) + var(--s6))}
@media (max-width:960px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;inset-block:0;inset-inline-start:0;z-index:40;width:min(300px,86vw);transform:translateX(-100%);transition:transform .3s var(--ease);box-shadow:var(--shadow-lift)}
  [dir="rtl"] .sidebar{transform:translateX(100%)}
  .nav-open .sidebar{transform:none}
  .btn.menu-btn{display:inline-flex}
  .topbar{padding:0 var(--s4)} .topbar .search{display:none}
  .main,.app .main{padding:var(--s5) var(--s4) calc(var(--s9) + var(--s8))}
}

/* ---------- Page head ---------- */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s7)}
.head .soft{margin-top:6px;max-width:68ch}
.head .actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.head .link + h1,.head .link + .h1{margin-top:var(--s2)}
.section{margin-top:var(--s7)}
.section-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-bottom:var(--s4)}

/* ---------- Layout helpers ---------- */
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.g2,.g4{grid-template-columns:minmax(0,1fr)}}
.row{display:flex;align-items:center;gap:var(--s3)} .stack{display:flex;flex-direction:column;gap:var(--s3)}
/* A button in a stack keeps its own width; full-width buttons are a choice (.plan-card .cta), never a side effect */
.stack > .btn{align-self:flex-start}
.stack.tight{gap:var(--s2)}
.tight-row{gap:var(--s2)} .tight-row .meter{flex:1;min-width:64px;max-width:160px}
.row.wrap{flex-wrap:wrap;max-width:none;margin:0;padding:0}
.spacer{flex:1}
hr,.rule{border:0;border-top:1px solid var(--line);margin:var(--s5) 0}

/* ---------- Buttons: one scale on .btn. sm 32, default 36, lg 44, xl 52 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:500;font-size:var(--t-base);text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{border-color:var(--ink);background:var(--hover)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink)} .btn.primary:hover{background:var(--ink-2)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--code-strong)} [data-accent="mono"] .btn.accent{color:var(--on-ink)}
.btn.ghost{border-color:transparent;background:transparent} .btn.ghost:hover{background:var(--hover)}
.btn.danger{color:var(--crit-ink);border-color:color-mix(in srgb,var(--crit) 40%,transparent)}
.btn.sm{height:32px;padding:0 var(--s3);font-size:var(--t-sm)}
.btn.lg{height:44px;padding:0 var(--s5);font-size:var(--t-base)}
.btn.xl{height:52px;padding:0 var(--s5);font-size:var(--t-md);border-radius:var(--r-lg)}
.btn.icon{width:36px;padding:0}
.btn svg{width:16px;height:16px;flex:none}
.btn svg:not([fill]){fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.is-done{border-color:var(--ink)}
.btn .ic-done{display:none} .btn.is-done .ic-done{display:block} .btn.is-done .ic-copy{display:none}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--t-sm);font-weight:500}
.field .hint{font-size:var(--t-xs);color:var(--muted)}
.input,.select,.textarea{width:100%;height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);transition:border-color var(--dur),box-shadow var(--dur)}
.textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.field.err .input{border-color:var(--crit)} .field.err .hint{color:var(--crit-ink)}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer} .check input{accent-color:var(--accent);width:16px;height:16px}
.inline-form{display:flex;gap:var(--s2)} .inline-form .input{height:44px;flex:1;min-width:0} .inline-form .btn{height:44px}

/* ---------- Segmented control: one component for choices (theme, region, package manager, with or without).
   .seg sits on light surfaces; .seg.dark sits inside code surfaces (docs code tabs, the log tail filters). ---------- */
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:var(--r-md);background:var(--well);max-width:100%;overflow-x:auto}
.seg button,.seg a{display:inline-flex;align-items:center;gap:6px;height:28px;border:0;background:transparent;padding:0 var(--s3);border-radius:calc(var(--r-md) - 3px);font-size:var(--t-sm);font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;cursor:pointer}
.seg button:hover,.seg a:hover{color:var(--ink)}
.seg :is(.on,[aria-pressed="true"],[aria-selected="true"],[aria-checked="true"]){background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
[data-theme="dark"] .seg :is(.on,[aria-pressed="true"],[aria-selected="true"],[aria-checked="true"]){background:var(--line)}
.seg.lg button{height:36px;padding:0 var(--s4)}
.seg.dark{background:color-mix(in srgb,var(--code-line) 60%,var(--code-bg))}
.seg.dark button,.seg.dark a{height:24px;padding:0 var(--s2);color:var(--code-muted);font:500 var(--t-xs)/1 var(--mono)}
.seg.dark button:hover,.seg.dark a:hover{color:var(--code-strong)}
.seg.dark :is(.on,[aria-pressed="true"],[aria-selected="true"],[aria-checked="true"]){background:var(--code-bg);color:var(--code-strong);box-shadow:0 0 0 1px var(--code-line)}
.seg.dark i[data-i]{width:13px;height:13px}

/* ---------- Cards ---------- */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.card.flat{background:transparent} .card.well{background:var(--well);border-color:transparent}
.card.lift:hover,a.card:hover{box-shadow:var(--shadow-lift);border-color:var(--line-2)}
.card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4)}
.card-h h3{font-size:var(--t-md);font-weight:600} .card-h p{font-size:var(--t-sm);color:var(--muted);margin-top:2px}
a.card{display:block;text-decoration:none;color:inherit}

/* ---------- Outcome & stats (the value, made visible) ---------- */
.outcome{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:end;padding:var(--s6);border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line)}
.outcome .num{font-size:var(--t-5xl)}
.outcome .says{font-size:var(--t-md);color:var(--ink-2);margin-top:var(--s2);max-width:56ch}
.outcome > .delta{justify-self:end}
@media (max-width:640px){.outcome{grid-template-columns:1fr}.outcome .num{font-size:var(--t-4xl)}.outcome > .delta{justify-self:start}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--surface);padding:var(--s4) var(--s5);min-width:0}
.stat .l{font-size:var(--t-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .num{font-size:var(--t-2xl);margin-top:6px;white-space:nowrap}
.stat .sub{font-size:var(--t-xs);color:var(--muted);margin-top:6px}
.delta{display:inline-flex;align-items:center;gap:3px;font:600 var(--t-xs)/1 var(--font);font-variant-numeric:tabular-nums;padding:3px 6px;border-radius:var(--pill)}
.delta.up{color:var(--good-ink);background:var(--good-50)} .delta.down{color:var(--crit-ink);background:var(--crit-50)} .delta.flat{color:var(--muted);background:var(--well)}
.meter{height:6px;border-radius:var(--pill);background:var(--well);overflow:hidden} .meter > i{display:block;width:var(--p,100%);max-width:100%;height:100%;border-radius:inherit;background:var(--ink)}
.meter.acc > i{background:var(--accent)} .meter.good > i{background:var(--good)} .meter.warn > i{background:var(--warn)} .meter.crit > i{background:var(--crit)}
.spark{width:100%;height:36px;color:var(--accent)} .spark path{fill:none;stroke:currentColor;stroke-width:1.5}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4)}
.tile{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);min-width:0;text-decoration:none;color:inherit}
.tile .l{font-size:var(--t-sm);color:var(--muted)}
.tile .num{font-size:var(--t-2xl)}
.tile .sub{font-size:var(--t-sm);color:var(--muted)}
a.tile:hover{border-color:var(--line-2)}
@media (max-width:640px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}.tile{padding:var(--s3) var(--s4)}.tile .num{font-size:var(--t-xl)}.tile .sub{font-size:var(--t-xs)}}
.meter-lg{position:relative;height:8px;border-radius:var(--r-sm);background:var(--well);overflow:visible}
.meter-lg > i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:var(--ink);transform-origin:left}
.meter-lg .mark{position:absolute;top:-4px;bottom:-4px;inset-inline-start:var(--at,100%);width:2px;background:var(--ink-2)}
.meter-lg .mark.limit{background:var(--crit)}
.meter-legend{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--t-sm);color:var(--muted);margin-top:var(--s2)}
.meter-legend b{color:var(--ink);font-weight:500}

/* ---------- Decisions / actions (what needs you) ---------- */
.decisions{list-style:none;padding:0;margin:0}
.decision{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4);align-items:start;padding:var(--s4) 0;border-block-start:1px solid var(--line)}
.decision:first-child{border-block-start:0;padding-block-start:0}
.decision .rank{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--well);font:600 var(--t-xs)/1 var(--font)}
.decision .t{font-weight:600;line-height:1.35} .decision .why{font-size:var(--t-sm);color:var(--ink-2);margin-top:4px}
.decision .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
@media (max-width:640px){.decision{grid-template-columns:auto minmax(0,1fr)}.decision > :last-child{grid-column:2}}
.next{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;padding:var(--s4) var(--s5);border:1px solid var(--line);border-inline-start:3px solid var(--ink);border-radius:var(--r-md);background:var(--surface)}
.next .soft{font-size:var(--t-sm)}
.next > .spacer{flex:1 1 240px;min-width:0}

/* ---------- Tags, release badges and chips ---------- */
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--pill);font:500 var(--t-xs)/1 var(--font);background:var(--well);color:var(--ink-2);white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9;display:none}
.tag.crit{background:var(--crit-50);color:var(--crit-ink)} .tag.warn{background:var(--warn-50);color:var(--warn-ink)}
.tag.good{background:var(--good-50);color:var(--good-ink)} .tag.info{background:var(--info-50);color:var(--info-ink)}
.tag.acc{background:var(--accent-50);color:var(--accent-ink)}
.tag.soon{background:var(--well);color:var(--muted)}
.tag.dot::before{display:block}
/* Release status (references/states-and-badges.md). GA shows nothing; beta is a quiet chip; soon is muted and never actionable.
   The label is "Soon · 0.N" on every surface. */
.badge{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:var(--pill);font:600 var(--t-xs)/1 var(--font);letter-spacing:.02em;white-space:nowrap;margin-inline-start:var(--s2)}
.badge.beta{background:var(--info-50);color:var(--info-ink)}
.badge.soon{background:var(--well);color:var(--muted)}
[data-feat][aria-disabled="true"]{opacity:.6;cursor:not-allowed}
/* Filter chips: one component on the landing, the docs and the portal */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);color:var(--ink);font-size:var(--t-sm);font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip:is(.on,[aria-pressed="true"],[aria-selected="true"]){border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
.chip .count{font:500 var(--t-xs)/1 var(--mono);color:var(--faint)}
.chip:is(.on,[aria-pressed="true"],[aria-selected="true"]) .count{color:var(--on-ink)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table.t{width:100%;border-collapse:collapse;font-size:var(--t-base)}
table.t th{position:sticky;top:0;text-align:start;font:500 var(--t-xs)/1 var(--font);color:var(--muted);letter-spacing:.02em;padding:10px var(--s4);border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
table.t td{padding:12px var(--s4);border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr{transition:background .15s} table.t tbody tr:hover{background:var(--hover)}
table.t td.n,table.t th.n{text-align:end;font-variant-numeric:tabular-nums}
table.t tr.sel{background:var(--accent-50)}
table.t td.no,table.t td[data-v="—"]{color:var(--faint)}
table.t tr.grp td{font-weight:500}
table.t td.drivers{max-width:260px;white-space:nowrap}
table.t a.t{font-weight:500;text-decoration:none} table.t a.t:hover{text-decoration:underline;text-underline-offset:3px}
table.t .s{font-size:var(--t-xs)}
.bulkbar{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);border-radius:var(--r-md);background:var(--ink);color:var(--on-ink);font-size:var(--t-sm)}
.bulkbar .btn{height:28px;background:transparent;color:inherit;border-color:color-mix(in srgb,var(--on-ink) 25%,transparent)}

/* ---------- Lists ---------- */
.list{display:flex;flex-direction:column}
.list-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:12px 0;border-block-start:1px solid var(--line);text-decoration:none;color:inherit}
.list-row:first-child{border-block-start:0}
a.list-row:hover .t{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.list-row .t{font-weight:500} .list-row .s{font-size:var(--t-sm);color:var(--muted)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--s5);overflow-x:auto}
.tabs a,.tabs button{position:relative;padding:10px 0;border:0;background:none;font-weight:500;color:var(--muted);text-decoration:none;cursor:pointer;white-space:nowrap}
.tabs .on,.tabs [aria-selected="true"]{color:var(--ink)}
.tabs .on::after,.tabs [aria-selected="true"]::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--ink);border-radius:2px}
.tabs .count{margin-inline-start:6px;font-size:var(--t-xs);color:var(--faint)}

/* ---------- Disclosure (deep on demand) ---------- */
details.more{border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s4)}
details.more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:500;color:var(--muted)}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+";font:600 var(--t-md)/1 var(--mono)} details.more[open] summary::before{content:"−"}

/* ---------- Timeline / activity ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{position:relative;padding-inline-start:24px;padding-bottom:var(--s4)}
.timeline li::before{content:"";position:absolute;inset-inline-start:5px;top:8px;bottom:-4px;width:1px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline li::after{content:"";position:absolute;inset-inline-start:1px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2)}
.timeline li.done::after{background:var(--good);border-color:var(--good)} .timeline li.now::after{background:var(--ink);border-color:var(--ink)}
.timeline .when{font-size:var(--t-xs);color:var(--faint)}

/* ---------- Steps (onboarding / wizards) ---------- */
.steps{display:flex;gap:var(--s2);counter-reset:s}
.steps li{flex:1;list-style:none;counter-increment:s;padding-top:10px;border-top:2px solid var(--line);font-size:var(--t-sm);color:var(--muted)}
.steps li::before{content:counter(s) " · ";font-weight:600}
.steps li.done{border-color:var(--ink);color:var(--ink)} .steps li.now{border-color:var(--accent);color:var(--ink);font-weight:500}

/* ---------- AI surfaces ---------- */
/* .ai-card, not .ai: the chat window's answer bubble is .msg.ai */
.ai-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5);background:linear-gradient(180deg,var(--accent-50),transparent 70%)}
.ai-card .who{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:600}
.cite{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;margin-inline:2px;border-radius:5px;background:var(--well);font:600 10.5px/1 var(--mono);color:var(--muted);text-decoration:none;vertical-align:1px}
.cite:hover{background:var(--accent-100);color:var(--accent-ink)}
.confidence{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--muted)}
.confidence i{display:inline-block;width:28px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--good) var(--c,70%),var(--well) 0)}
.approval{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);border-radius:var(--r-md);background:var(--warn-50);color:var(--warn-ink);font-size:var(--t-sm)}

/* ---------- States ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);padding:var(--s9) var(--s5);border:1px dashed var(--line-2);border-radius:var(--r-lg);color:var(--muted)}
.empty h3{font-size:var(--t-md);color:var(--ink)} .empty p{color:var(--muted);max-width:44ch}
/* Skeleton: one component (.skel in screens, .skeleton from the studio kit); the shimmer is in motion.css */
.skel,.skeleton{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--well),var(--hover),var(--well));background-size:200% 100%;min-height:12px}
.skel.w-40{width:40%;height:20px} .skel.w-60{width:60%;height:14px}
.banner{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-md);font-size:var(--t-sm)}
.banner.crit{background:var(--crit-50);color:var(--crit-ink)} .banner.good{background:var(--good-50);color:var(--good-ink)}
.banner.info{background:var(--info-50);color:var(--info-ink)} .banner.warn{background:var(--warn-50);color:var(--warn-ink)}
/* Live: an ink square that blinks like the cursor (code-strong on dark code surfaces); no green */
.live{display:inline-block;width:7px;height:7px;flex:none;background:var(--ink)}
:is(.code,.tail,.dark-band) .live{background:var(--code-strong)}
.states > [data-state][hidden]{display:none}
.state-note{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.state-note.running{align-items:center}
.state-note .ico{flex:none}
.state-note h3{font-size:var(--t-md);font-weight:600}
.state-note p{font-size:var(--t-sm);color:var(--muted);margin-top:4px;max-width:60ch}
.state-note .actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.state-note .progress{margin-top:var(--s3)}
.skel-rows{display:grid;gap:var(--s3);padding:var(--s4) var(--s5)}
.skel-rows .skel{height:14px}
.skel-rows .skel:nth-child(3n+2){width:72%} .skel-rows .skel:nth-child(3n){width:48%}

/* ---------- Overlays (motion in motion.css) ---------- */
.modal-bg{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:var(--s4);background:color-mix(in srgb,var(--code-bg) 36%,transparent);backdrop-filter:blur(3px)}
.modal-bg.open{display:grid}
.modal{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-lift);padding:var(--s6)}
.modal .foot{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s6)}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;z-index:55;width:min(440px,100%);background:var(--surface);border-inline-start:1px solid var(--line);box-shadow:var(--shadow-lift);padding:var(--s6);overflow:auto;transform:translateX(105%)}
[dir="rtl"] .drawer{transform:translateX(-105%)} .drawer.open{transform:none}
.toast{position:fixed;inset-block-end:var(--s5);inset-inline-start:50%;translate:-50% 0;z-index:70;display:flex;align-items:center;gap:var(--s3);padding:10px 14px;border-radius:var(--r-md);background:var(--ink);color:var(--on-ink);font-size:var(--t-sm);box-shadow:var(--shadow-lift)}
[dir="rtl"] .toast{translate:50% 0}
/* Command palette: the portal's search; one row also searches the docs */
.palette{position:fixed;z-index:75;inset-block-start:12vh;inset-inline:0;margin-inline:auto;width:min(560px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);overflow:hidden}
.palette input{width:100%;border:0;border-bottom:1px solid var(--line);padding:var(--s4);background:transparent}
.palette .list{padding:var(--s2) var(--s3);max-height:60vh;overflow:auto}
.palette .list-row{padding:var(--s2) var(--s2);border-radius:var(--r-md);border:0}
.palette .list-row:hover{background:var(--hover)}

/* ---------- Appearance panel ---------- */
.appearance{position:fixed;top:calc(var(--topbar) + 8px);inset-inline-end:var(--s4);z-index:50;width:300px;padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);display:none}
.appearance.open{display:block}
.appearance h4{font-size:var(--t-xs);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:var(--s4) 0 var(--s2)}
.appearance h4:first-of-type{margin-top:0}
.appearance .seg{display:flex} .appearance .seg button{flex:1;justify-content:center}
.swatches{display:flex;gap:8px}
.swatches button{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line-2);cursor:pointer}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}

/* ---------- Avatars ---------- */
.av{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--well);font:600 10.5px/1 var(--font);color:var(--ink-2);flex:none}
.avs{display:flex} .avs .av{border:2px solid var(--surface);margin-inline-start:-6px} .avs .av:first-child{margin-inline-start:0}

/* ---------- Print / no-shell pages ---------- */
body[data-shell="none"] .main{padding-top:var(--s8)}

/* ---------- Connected experience: share, request access, import and export, AI inputs ---------- */
.share{display:grid;gap:var(--s3);padding:var(--s5)}
.share .link-row,.share-inline{display:flex;gap:var(--s2);align-items:center;background:var(--well);border-radius:var(--r-md);padding:var(--s2) var(--s3)}
.share .link-row code,.share-inline code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.denied{display:grid;gap:var(--s4);justify-items:start;max-width:520px;margin:var(--s9) auto;padding:var(--s7);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.denied .who{display:flex;align-items:center;gap:var(--s3);color:var(--muted)}
.denied textarea{width:100%}
.dropzone{display:grid;place-items:center;gap:var(--s2);padding:var(--s8);border:1.5px dashed var(--line-2);border-radius:var(--r-lg);color:var(--muted);text-align:center}
.dropzone.over{border-color:var(--accent);background:var(--accent-50);color:var(--accent-ink)}
.mapping{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s2) var(--s3);align-items:center}
.rowerr{color:var(--crit-ink);background:var(--crit-50);border-radius:var(--r-sm);padding:var(--s1) var(--s2);font-size:var(--t-sm)}
.progress{height:6px;border-radius:var(--pill);background:var(--well);overflow:hidden}
.progress>i{display:block;height:100%;width:var(--p,0%);background:var(--accent);transition:width var(--dur) var(--ease)}
/* The magic button: neutral like any control; only its spark carries the accent (one red per view) */
.magic{display:inline-flex;align-items:center;gap:var(--s2);height:32px;padding:0 var(--s3);border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:var(--t-sm);font-weight:500;white-space:nowrap;cursor:pointer}
.magic i[data-i]{color:var(--accent-ink)}
.magic:hover{background:var(--hover)}
.mic{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--pill);border:1px solid var(--line-2);background:var(--surface);cursor:pointer}
.mic[aria-pressed="true"]{background:var(--accent);color:var(--on-ink);border-color:var(--accent)}
.suggest{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border-inline-start:2px solid var(--accent);background:var(--accent-50);border-radius:var(--r-md)}
.suggest > *{min-width:0} .msg .body{min-width:0}
.notice{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.undo{display:flex;gap:var(--s4);align-items:center}
.soon-teaser{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);border:1px dashed var(--line-2);border-radius:var(--r-lg);color:var(--ink-2)}
.soon-teaser ul,[data-soon-outcomes]{margin:0;padding-inline-start:var(--s5);color:var(--muted)}
[data-soon-panel]{max-width:56ch;margin-inline:auto;margin-top:var(--s8)}
[data-soon-panel] .skel{width:100%;height:var(--s6)}
.internal{display:none;margin-inline-start:var(--s3);color:var(--muted)}
html[data-view="internal"] .internal{display:inline}
/* Generated roadmap and coming-soon pages (build_roadmap.py) */
[data-milestone-group]{margin-top:var(--s5)}
[data-milestone-group] .h2{margin-bottom:var(--s2)}
[data-feat-row]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2)}
[data-feat-row] > a,[data-feat-row] > span:first-child{font-weight:500;text-decoration:none}
[data-feat-row] > a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
[data-feat-row] .badge{margin:0}
[data-feat-row] p{flex-basis:100%;font-size:var(--t-sm)}
:is(.main,.site-page) > .h1 + .muted{margin:var(--s2) 0 var(--s6)}

/* ==========================================================================
   MainSDK portal: the frame and the parts the portal and sign-in share.
   Matches the approved canvas (designs/canvas/Portal, SignIn, Plans): monochrome, one red, hairlines, Outfit numbers.
   ========================================================================== */

/* ---------- Plan visibility: one page, three plans (the design-only org switch drives it) ---------- */
html[data-plan="free"] [data-for]:not([data-for~="free"]),
html[data-plan="teams"] [data-for]:not([data-for~="teams"]),
html[data-plan="fleet"] [data-for]:not([data-for~="fleet"]){display:none!important}
.plan{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--pill);font:500 var(--t-xs)/1 var(--font);border:1px solid transparent;white-space:nowrap}
.plan.free{background:var(--well);color:var(--ink)}
.plan.teams{background:var(--ink);color:var(--on-ink)}
.plan.fleet{border-color:var(--ink);color:var(--ink)}

/* ---------- Design controls (design package only, never in the product) ---------- */
.devbar{position:fixed;inset-block-end:var(--s4);inset-inline-end:var(--s4);z-index:65;display:flex;flex-direction:column;gap:var(--s2);max-width:min(560px,calc(100vw - 32px));padding:var(--s2) var(--s3);border:1px dashed var(--warn);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-lift);font-size:var(--t-xs)}
.devbar .dv-h{display:flex;align-items:center;gap:var(--s2);color:var(--warn-ink);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.devbar .dv-h button{margin-inline-start:auto;border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit;text-transform:none;letter-spacing:0}
.devbar .dv-row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.devbar .dv-row > span{color:var(--muted);min-width:44px}
.devbar .seg button{height:24px;padding:0 9px;font-size:var(--t-xs)}
.devbar.min .dv-row{display:none}
.static .devbar{display:none}
.orgswitch{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s2) var(--s3);margin-bottom:var(--s6);border:1px dashed var(--warn);border-radius:var(--r-md);font-size:var(--t-sm)}
.orgswitch .lbl{color:var(--warn-ink);font-weight:600;font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase}

/* ---------- Panels: a card with a hairline head, the canvas look ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line)}
.panel-h h2{font-size:var(--t-md);font-weight:600;font-family:var(--font)}
.panel-h p{font-size:var(--t-sm);color:var(--muted)}
.panel-h .actions{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.panel-b{padding:var(--s4) var(--s5)}
.panel .table-wrap{border:0;border-radius:0}
.panel-f{padding:var(--s3) var(--s5);border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--muted);display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.panel-f [data-each]{display:flex;gap:var(--s2);flex-wrap:wrap}

/* ---------- Status: a square like the cursor. Passed is ink, failed is the semantic critical colour,
   running is an ink square that blinks (motion.css). The brand red never means a status. ---------- */
.st{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);white-space:nowrap}
.st::before{content:"";width:8px;height:8px;flex:none;background:var(--ink)}
.st[data-v="failed"]::before,.st[data-v="critical"]::before,.st[data-v="high"]::before,.st[data-v="act"]::before,.st[data-v="open"]::before,.st[data-v="error"]::before,.st[data-v="due"]::before{background:var(--crit)}
.st[data-v="medium"]::before,.st[data-v="watch"]::before,.st[data-v="warn"]::before,.st[data-v="pending"]::before{background:var(--warn)}
.st[data-v="running"]::before{background:var(--ink)}
.st[data-v="none"]::before,.st[data-v="low"]::before,.st[data-v="expired"]::before,.st[data-v="draft"]::before,.st[data-v="excepted"]::before,.st[data-v="false"]::before{background:var(--line-2)}
.finding .st{margin-top:3px}
.pillars .st{margin-top:auto;font-size:var(--t-xs)}
.sev{font:600 var(--t-xs)/1 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.trig{font:500 var(--t-xs)/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.yn[data-v="true"]::after{content:attr(data-yes)} .yn[data-v="false"]::after{content:attr(data-no);color:var(--muted)}
.sig[data-v="true"]::after{content:"Signed"} .sig[data-v="false"]::after{content:"Not signed";color:var(--muted)}

/* ==========================================================================
   Code surfaces: dark in both themes, ONE component on the landing, the docs and the portal.
   .code       a block: optional .code-h header (40 px, mono title, copy on the right) and a body
               (.code-b, or a bare <pre> inside, or the .code itself when it is a <pre>)
   .cmd        a one-line command: $ prompt, the command, the copy button inside; .cmd.lg for the landing hero
   .copy       the one copy button: "Copy" becomes "Copied" with a check, never green
   .tail       the live log tail, a .code with a filter header
   ========================================================================== */
.code,.tail{min-width:0;margin:0;border:1px solid var(--code-line);border-radius:var(--r-lg);background:var(--code-bg);color:var(--code-ink);overflow:hidden}
.code-h,.tail .tail-h{display:flex;align-items:center;gap:var(--s2);min-height:40px;padding:0 var(--s2) 0 var(--s4);border-bottom:1px solid var(--code-line);font:400 var(--t-xs)/1.4 var(--mono);color:var(--code-muted);flex-wrap:wrap}
.code-h .title,.tail .tail-h b{color:var(--code-strong);font-weight:500}
.code-h .copy,.code-h .code-link{margin-inline-start:auto}
.code-b,.code pre,pre.code{margin:0;padding:var(--s4) var(--s5);font:400 var(--t-sm)/1.75 var(--mono);color:var(--code-ink);white-space:pre;overflow-x:auto;tab-size:2}
.code pre code,pre.code code{font:inherit;background:none;border:0;padding:0;color:inherit}
pre.code{white-space:pre-wrap}
.code-b.wrap{white-space:pre-wrap}
.code-link{color:var(--code-ink);text-decoration:underline;text-decoration-color:var(--code-line);text-underline-offset:3px}
.code-link:hover{color:var(--code-strong);text-decoration-color:var(--code-accent)}
/* Token colours, shared: prompt and comments muted, commands and keys strong, the accent for the prompt mark only, errors crit */
.code :is(.p,.tp,.cmd-p,.cm,.c-com,.tc-com){color:var(--code-muted)}
.code :is(.c,.tp-acc,.tc-acc,.caret,.c-str){color:var(--code-accent)}
.code :is(b,.k,.strong,.tc-cmd,.c-kw,.c-num,.c-type){color:var(--code-strong);font-weight:500}
.code .c-com{font-style:italic}
.code .c-fn{color:var(--code-ink)}
.code .err,.tail .ln .lv[data-v="error"]{color:var(--code-crit)}
/* The command */
.cmd{display:inline-flex;align-items:center;gap:var(--s2);height:40px;max-width:100%;min-width:0;padding:0 var(--s1) 0 var(--s3);border:1px solid var(--code-line);border-radius:var(--r-md);background:var(--code-bg);color:var(--code-strong);font:400 var(--t-sm)/1 var(--mono);white-space:nowrap;vertical-align:middle}
.cmd .cmd-p{color:var(--code-muted)}
.cmd .cmd-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font:inherit}
.cmd.lg{display:flex;height:56px;padding:0 var(--s2) 0 var(--s4);border-radius:var(--r-lg);font-size:var(--t-md)}
.cmd.block{display:flex}
/* The copy button */
.copy{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);height:28px;min-width:28px;padding:0 var(--s2);flex:none;border:1px solid var(--code-line);border-radius:var(--r-sm);background:transparent;color:var(--code-muted);font:500 var(--t-xs)/1 var(--font);cursor:pointer}
.copy:hover{color:var(--code-strong);border-color:var(--code-muted)}
.copy:is(.copied,.is-done){color:var(--code-strong);border-color:var(--code-strong)}
.copy svg,.copy i[data-i]{width:14px;height:14px;flex:none}
.copy svg:not([fill]){fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.copy .ic-done{display:none} .copy:is(.copied,.is-done) .ic-done{display:block} .copy:is(.copied,.is-done) .ic-copy{display:none}
.cmd.lg .copy{height:40px;padding:0 var(--s3);font-size:var(--t-sm)}
/* Dark band and estimator: dark panels that hold commands */
.dark-band{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);border-radius:var(--r-lg);background:var(--code-bg);color:var(--code-ink)}
.dark-band b{color:var(--code-strong);font-weight:500}
.dark-band .btn,.auth-side .btn{align-self:flex-start;background:transparent;color:var(--code-strong);border-color:var(--code-line)}
.dark-band .btn:hover,.auth-side .btn:hover{background:var(--code-line)}
.dark-band .soft{color:var(--code-muted)}
.estimator{display:flex;flex-wrap:wrap;gap:var(--s6);padding:var(--s6);border-radius:var(--r-xl);background:var(--code-bg);color:var(--code-ink)}
.estimator h2{color:var(--code-strong);font-size:var(--t-lg);font-weight:600;font-family:var(--font)}
.estimator .l{flex:1 1 320px;display:flex;flex-direction:column;gap:var(--s3)}
.estimator .r{flex:1 1 260px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding-inline-start:var(--s6);border-inline-start:1px solid var(--code-line)}
.estimator .num{font-size:var(--t-3xl);color:var(--code-strong)}
.estimator .soft{color:var(--code-muted)}
.estimator strong{color:var(--code-strong)}
.estimator input[type=range]{width:100%;height:44px;accent-color:var(--accent)}
/* Live log tail */
.tail{font:400 var(--t-sm)/1.7 var(--mono)}
.tail .tail-h{padding-block:var(--s2);font-family:var(--font)}
.tail .lines{max-height:520px;overflow:auto;padding:var(--s2) 0}
.tail .ln{display:grid;grid-template-columns:110px 54px 130px minmax(0,1fr) auto;gap:var(--s3);padding:2px var(--s4);align-items:baseline}
.tail .ln:hover{background:var(--code-line)}
.tail .ln .ts,.tail .ln .ap{color:var(--code-muted)}
.tail .ln .lv{text-transform:uppercase;font-size:var(--t-xs)}
.tail .ln .lv[data-v="warn"]{color:var(--warn)} .tail .ln .lv[data-v="info"]{color:var(--code-strong)}
.tail .ln a{color:var(--code-muted);text-decoration:none} .tail .ln a:hover{color:var(--code-strong)}
.tail .ln .lmsg{overflow-wrap:anywhere;color:var(--code-ink);min-width:0}
@media (max-width:760px){.tail .ln{grid-template-columns:90px 48px minmax(0,1fr)}.tail .ln .ap,.tail .ln a{display:none}}

/* ---------- Capability list (in-app free vs Cloud by plan) ---------- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.caps > div{padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:10px}
.caps > div + div{border-inline-start:1px solid var(--line)}
@media (max-width:700px){.caps > div + div{border-inline-start:0;border-top:1px solid var(--line)}}
.cap{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-base)}
.cap i[data-i]{margin-top:2px}
.cap .d{color:var(--muted)}
.cap.locked{color:var(--muted)} .cap.locked b{color:var(--ink-2)}
.cap b{font-weight:500}
.cap .need{margin-inline-start:auto;flex:none}
.need{display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid var(--line);border-radius:var(--pill);font:500 var(--t-xs)/1 var(--font);text-decoration:none;color:var(--ink)}
.need:hover{border-color:var(--ink)}

/* ---------- Plan cards and the matrix ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s4)}
.plan-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.plan-card.current,html[data-plan="free"] #free.plan-card,html[data-plan="teams"] #teams.plan-card,html[data-plan="fleet"] #fleet.plan-card{border:2px solid var(--ink)}
.plan-card > .stack{flex:1;display:flex;flex-direction:column;gap:var(--s3)}
.plan-card .nm{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:var(--t-lg)}
.plan-card .num{font-size:var(--t-2xl)}
.plan-card .u{font-size:var(--t-sm);color:var(--muted)}
.plan-card .w{font-size:var(--t-base);color:var(--muted)}
.plan-card .cta{margin-top:auto}
.plan-card .cta .btn{width:100%;height:44px}
.your-plan{display:flex;align-items:center;justify-content:center;height:44px;border:1px dashed var(--line-2);border-radius:var(--r-md);color:var(--muted);font-size:var(--t-sm)}

/* ---------- Key-value facts (app detail, settings) ---------- */
.kv{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:10px var(--s5);font-size:var(--t-base)}
.kv dt{color:var(--muted)} .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* ---------- Findings and fixes ---------- */
.finding{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:var(--s4);align-items:start;padding:var(--s4) var(--s5);border-top:1px solid var(--line)}
.finding:first-child{border-top:0}
.finding .t{font-weight:600}
.finding .w{font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.finding .fix{margin-top:var(--s3);padding:var(--s3) var(--s4);border-inline-start:2px solid var(--ink);background:var(--well);border-radius:var(--r-sm);font-size:var(--t-sm)}
.finding .fix code{font-size:var(--t-xs)}
.fnd-acts{gap:var(--s2);align-items:stretch}
@media (max-width:640px){.finding{grid-template-columns:minmax(0,1fr)}}

/* ---------- Sign-in, device and request access: the public header above, then the form left and the terminal right ---------- */
.auth{display:flex;flex-wrap:wrap;min-height:calc(100vh - var(--head-h));min-height:calc(100dvh - var(--head-h));background:var(--bg)}
.auth-main{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;padding:var(--s7) var(--s6)}
.auth-body{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--s8) 0}
.auth-col{width:100%;max-width:380px;display:flex;flex-direction:column;gap:var(--s5)}
.auth-col.center{align-items:center;text-align:center}
.auth-col h1{font:600 var(--t-2xl)/1.15 var(--font-display);letter-spacing:-.02em}
.auth-col .lede{font-size:var(--t-base)}
.auth-col .who{gap:var(--s2)}
.auth-col .btn.xl{width:100%}
.auth-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);font-size:var(--t-xs);color:var(--muted)}
.auth-side{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--s7);padding:var(--s9);background:var(--code-bg);color:var(--code-ink)}
[data-theme="dark"] .auth-side{border-inline-start:1px solid var(--line)}
.auth-side h2{font:600 var(--t-xl)/1.2 var(--font-display);color:var(--code-strong);max-width:22ch}
.auth-side .eyebrow-mono{font:400 var(--t-sm)/1 var(--mono);color:var(--code-muted)}
.auth-side .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4);max-width:520px;font-size:var(--t-sm)}
.auth-side .facts strong{color:var(--code-strong);font-weight:500}
.auth-side .code{max-width:520px}
.or{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-xs);color:var(--muted)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.devonly{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s4);border:1px dashed var(--warn);border-radius:var(--r-md);background:var(--warn-50);font-size:var(--t-sm);color:var(--warn-ink)}
.devonly .btn{align-self:flex-start;background:var(--surface)}
.note-soft{padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--well);font-size:var(--t-sm);color:var(--muted)}
.code-boxes{display:flex;gap:var(--s2);justify-content:center;align-items:center;font:500 var(--t-2xl)/1 var(--mono);letter-spacing:.06em}
.code-boxes span{display:grid;place-items:center;width:44px;height:56px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface)}
.code-boxes .dash{border:0;width:auto;background:none;color:var(--faint)}

/* ---------- Members, keys, sessions rows ---------- */
.person{display:flex;align-items:center;gap:var(--s3);min-width:0}
.person .nm{font-weight:500} .person .em{font-size:var(--t-xs);color:var(--muted)}
.keyval{font:500 var(--t-sm)/1 var(--mono)}
.upsell{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:center;padding:var(--s6);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
@media (max-width:700px){.upsell{grid-template-columns:minmax(0,1fr)}}
.rule-402{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);border-radius:var(--r-md);background:var(--well);font-size:var(--t-sm)}
.rule-402 code{font-size:var(--t-xs)}
.http{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-sm);background:var(--ink);color:var(--on-ink);font:600 var(--t-xs)/1 var(--mono)}

/* ---------- Fleet ---------- */
.pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pillars > div{background:var(--surface);padding:var(--s4);display:flex;flex-direction:column;gap:6px}
.pillars .t{font-weight:600} .pillars .s{font-size:var(--t-sm);color:var(--muted)}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trial{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.trial .days{font:600 var(--t-xl)/1 var(--font-display)}

/* ---------- Assistant (composer pinned at the bottom, like any chat) ---------- */
.chatwrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--s6);min-height:calc(100vh - var(--topbar) - var(--s7) - var(--s10))}
@media (max-width:1000px){.chatwrap{grid-template-columns:minmax(0,1fr)}}
.chat-col{gap:0;min-width:0}
.chat-side{gap:var(--s4)}
.tools-list{font-size:var(--t-sm);gap:var(--s2)}
.thread{display:flex;flex-direction:column;gap:var(--s5);padding-bottom:var(--s6)}
.thread .msg{max-width:72ch;font-size:var(--t-base)}
.msg.bot{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3)}
.msg.bot .who-mark{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--well)}
.msg.bot .who-mark img{width:18px;height:18px}
.msg .body{display:flex;flex-direction:column;gap:var(--s3)}
.msg .sources{display:flex;flex-wrap:wrap;gap:6px}
.msg .acts{display:flex;gap:var(--s2);flex-wrap:wrap}
.composer{position:sticky;bottom:0;padding:var(--s3) 0 var(--s4);background:linear-gradient(transparent,var(--bg) 30%)}
.composer .box{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-lift)}
.composer textarea{border:0;resize:none;min-height:48px;background:transparent;outline:0;font:inherit}
.composer .bar{display:flex;align-items:center;gap:var(--s2)}
.composer .hint{font-size:var(--t-xs)}
@media (max-width:640px){.composer .hint{display:none}}
.ctx{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--pill);background:var(--well);font-size:var(--t-xs);color:var(--ink-2)}

/* ---------- Ask MainSDK orb: floating, bottom corner of every portal page ---------- */
.orb{position:fixed;inset-block-end:var(--s5);inset-inline-end:var(--s5);z-index:66;display:flex;align-items:center;gap:var(--s3);height:56px;padding:4px;border-radius:999px;background:var(--code-bg);color:var(--code-ink);text-decoration:none;box-shadow:var(--shadow-lift),0 0 0 1px var(--code-line);overflow:hidden;max-width:56px;transition:max-width .35s var(--ease),padding .35s var(--ease)}
.orb:hover,.orb:focus-visible{max-width:260px;padding-inline-end:var(--s4)}
.orb-core{position:relative;flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--code-ink) 55%,transparent),transparent 42%),radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 30%,var(--code-bg)),var(--code-bg) 72%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--code-ink) 16%,transparent)}
.orb-swirl{position:absolute;inset:-30%;background:conic-gradient(from 0deg,transparent 0 30%,color-mix(in srgb,var(--accent) 85%,transparent) 42%,transparent 55%,color-mix(in srgb,var(--code-ink) 45%,transparent) 72%,transparent 82%);filter:blur(6px);mix-blend-mode:screen;opacity:.9}
.orb-shine{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 24%,color-mix(in srgb,var(--code-ink) 70%,transparent),transparent 26%)}
.orb-label{font-size:var(--t-sm);font-weight:500;white-space:nowrap}
.orb kbd{font:500 var(--t-xs) var(--mono);color:var(--code-muted);border:1px solid var(--code-line);border-radius:var(--r-sm);padding:1px 6px;white-space:nowrap}
.orb::after{content:"";position:absolute;inset-block:4px;inset-inline-start:4px;width:48px;border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent);pointer-events:none}
@media (max-width:960px){.orb{inset-block-end:var(--s4);inset-inline-end:var(--s4)}}
[data-theme="dark"] .orb{box-shadow:var(--shadow-lift),0 0 0 1px color-mix(in srgb,var(--code-ink) 22%,transparent),0 0 24px color-mix(in srgb,var(--accent) 28%,transparent)}

.orb{border:0;font:inherit;cursor:pointer}
.orb.open{max-width:56px;padding-inline-end:4px}
.orb.open .orb-label,.orb.open kbd{opacity:0}
/* ---------- Chat window: opens above the orb, composer pinned at the bottom ---------- */
.chatw{position:fixed;inset-block-end:calc(var(--s5) + 68px);inset-inline-end:var(--s5);z-index:67;display:flex;flex-direction:column;width:min(400px,calc(100vw - 32px));height:min(600px,calc(100vh - 140px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl,16px);box-shadow:var(--shadow-lift);overflow:hidden;transform-origin:100% 100%}
.chatw[hidden]{display:none}
.chatw-h{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s3) var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.orb-core.sm{width:32px;height:32px}
.chatw-t{flex:1;display:flex;flex-direction:column;line-height:1.25}
.chatw-t b{font-weight:600;font-size:var(--t-sm)}
.chatw-t span{font-size:var(--t-xs);color:var(--muted)}
.chatw-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4)}
.chatw-ctx{align-self:center;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:var(--t-xs);color:var(--muted)}
.msg{max-width:88%;font-size:var(--t-sm);line-height:1.5}
.msg p{margin:0}
.msg code{font-family:var(--mono);font-size:.92em}
.msg.ai{align-self:flex-start;padding:var(--s3) var(--s4);background:var(--surface-2,var(--bg));border:1px solid var(--line);border-radius:4px 14px 14px 14px}
.msg.me{align-self:flex-end;padding:var(--s3) var(--s4);background:var(--ink);color:var(--on-ink);border-radius:14px 14px 4px 14px}
.msg.thinking{display:flex;align-items:center;gap:var(--s2)}
.dots{display:inline-flex;gap:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.src{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;font-size:var(--t-xs);color:var(--ink);text-decoration:none;background:var(--surface)}
.src:hover{border-color:var(--ink)}
.chatw-sugg{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);margin-top:var(--s1)}
.chatw-sugg .chip{text-align:start;white-space:normal}
.chatw-in{display:flex;align-items:flex-end;gap:var(--s2);margin:0 var(--s3);padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.chatw-in:focus-within{border-color:var(--ink)}
.chatw-in textarea{flex:1;border:0;outline:0;resize:none;background:transparent;color:var(--ink);font:inherit;font-size:var(--t-sm);padding:6px 4px;max-height:120px}
.chatw-send{display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--r-md);background:var(--ink);color:var(--on-ink);cursor:pointer}
.chatw-foot{margin:0;padding:var(--s2) var(--s4) var(--s3);font-size:var(--t-xs);color:var(--faint,var(--muted));text-align:center}
@media (max-width:960px){.chatw{inset-inline-end:var(--s4);inset-block-end:calc(var(--s4) + 68px)}}
/* Design controls: top right, under the topbar */
/* Design controls: a dashed trigger in the topbar opens a modal. Design only, never in the product. */
.dv-trigger{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px dashed var(--warn);border-radius:999px;background:transparent;color:var(--warn-ink);font:inherit;font-size:var(--t-xs);cursor:pointer;white-space:nowrap}
.dv-trigger .k{font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.dv-trigger .v{color:var(--muted)}
.dv-trigger:hover{background:var(--hover)}
@media (max-width:760px){.dv-trigger .v{display:none}}
.dv-bg{position:fixed;inset:0;z-index:80;display:grid;place-items:start center;padding:12vh var(--s4) var(--s4);background:color-mix(in srgb,var(--code-bg) 36%,transparent);backdrop-filter:blur(3px)}
.dv-bg[hidden]{display:none}
.dv-bg .devbar{position:static;inset:auto;max-width:none;width:min(560px,100%);gap:var(--s4);padding:var(--s5);border:1px dashed var(--warn);border-radius:var(--r-xl);font-size:var(--t-sm)}
.dv-bg .devbar .dv-h{align-items:flex-start;text-transform:none;letter-spacing:0;color:var(--ink)}
.dv-bg .devbar .dv-h > i{color:var(--warn-ink);margin-top:3px}
.dv-bg .devbar .dv-h b{display:block;font-weight:600;color:var(--warn-ink);letter-spacing:.04em;text-transform:uppercase;font-size:var(--t-xs)}
.dv-bg .devbar .dv-h small{display:block;color:var(--muted);font-weight:400;font-size:var(--t-sm);margin-top:2px}
.dv-bg .devbar .dv-h .icon-btn{margin-inline-start:auto}
.dv-bg .devbar .dv-row{flex-direction:column;align-items:flex-start;gap:6px}
.dv-bg .devbar .dv-row > span{font-size:var(--t-xs);font-weight:500}
.dv-bg .devbar .seg{flex-wrap:wrap}
.dv-bg .devbar .seg button{height:30px;padding:0 12px;font-size:var(--t-sm)}
.dv-note{margin:0;font-size:var(--t-xs);color:var(--faint)}
.static .dv-trigger{display:none}

/* ==========================================================================
   Lists: ONE pattern for every table and list in the portal (shell.js lists()).
   .toolbar    one row above the list: the AI search field, the filter chips, then any end actions
   .ai-field   the composed AI input: search icon, the field, the mic and the magic button inside it
   th .sort    a sortable header; the chevron shows on the active column (aria-sort)
   .pager      the footer: "Showing 1–10 of 134", rows per page, previous, page numbers, next;
               .pager-more is the cursor form ("Load older") for logs
   .drv        a compact driver chip; .rg a region badge (IN, US, EU)
   ========================================================================== */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.toolbar .ai-field{flex:1 1 300px}
.toolbar .chips{flex:0 1 auto}
.toolbar.flat{padding:0;border:0}
.toolbar .end{display:flex;align-items:center;gap:var(--s2);margin-inline-start:auto}
.panel > .toolbar:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0}
.ai-field{display:flex;align-items:center;gap:var(--s1);min-width:0;height:40px;padding:0 var(--s1) 0 var(--s3);border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);transition:border-color var(--dur),box-shadow var(--dur)}
.ai-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.ai-field > i[data-i]{color:var(--faint)}
.ai-field input{flex:1;min-width:0;height:100%;padding:0 var(--s1);border:0;outline:0;background:transparent;font-size:var(--t-sm)}
.ai-field input::placeholder{color:var(--faint)}
.ai-field .mic{width:var(--s7);height:var(--s7);border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted)}
.ai-field .mic:hover{background:var(--hover);color:var(--ink)}
.ai-field .mic[aria-pressed="true"]{background:var(--accent);color:var(--on-ink)}
.ai-field .magic{height:var(--s7);padding:0 var(--s3);border:0;border-radius:var(--r-sm);background:var(--well);color:var(--ink);font-size:var(--t-sm);font-weight:500;white-space:nowrap}
.ai-field .magic i[data-i]{color:var(--accent-ink)}
.ai-field .magic:hover{background:var(--hover)}
.ai-field .sep{width:1px;height:var(--s5);background:var(--line)}
@media (max-width:640px){.ai-field .magic span{display:none}.ai-field .magic{padding:0 var(--s2)}}
/* Sortable headers */
table.t th[aria-sort]{padding:0}
table.t th .sort{display:inline-flex;align-items:center;gap:var(--s1);width:100%;padding:10px var(--s4);border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:start;cursor:pointer}
table.t th.n .sort{justify-content:flex-end}
table.t th .sort:hover,table.t th:is([aria-sort="ascending"],[aria-sort="descending"]) .sort{color:var(--ink)}
table.t th .sort-ic{display:inline-flex;width:12px;height:12px;opacity:.28;transition:opacity var(--dur)}
table.t th .sort-ic svg{width:100%;height:100%}
table.t th .sort:hover .sort-ic{opacity:.6}
table.t th:is([aria-sort="ascending"],[aria-sort="descending"]) .sort-ic{opacity:1}
table.t th[aria-sort="descending"] .sort-ic{transform:rotate(180deg)}
/* No row matches the filters */
table.t tr.none td,.list > .none,.lines > .none{padding:var(--s6) var(--s4);text-align:center;color:var(--muted);font-size:var(--t-sm)}
table.t tr.none:hover{background:transparent}
.lines > .none{color:var(--code-muted)}
.none .link{border:0;background:none;padding:0;cursor:pointer;font-size:inherit}
/* The pager */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);padding:var(--s3) var(--s4);border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--muted)}
.pager:empty{display:none}
.pager-count b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.pager-size{display:inline-flex;align-items:center;gap:var(--s2)}
.pager-size .select{width:auto;height:var(--s7);padding:0 var(--s2);font-size:var(--t-sm)}
.pager-pages{display:inline-flex;align-items:center;gap:var(--s1);margin-inline-start:auto}
.pg{display:inline-grid;place-items:center;min-width:var(--s7);height:var(--s7);padding:0 var(--s2);border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--ink);font:500 var(--t-sm)/1 var(--font);font-variant-numeric:tabular-nums;cursor:pointer}
.pg:hover{background:var(--hover)}
.pg[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.pg[disabled]{opacity:.35;pointer-events:none}
.pg svg{width:16px;height:16px}
[dir="rtl"] .pg svg{transform:scaleX(-1)}
.pg-gap{padding:0 var(--s1);color:var(--faint)}
.pager-now{display:none;padding:0 var(--s2);font-variant-numeric:tabular-nums;color:var(--ink)}
.pager-more{margin-inline-start:auto}
.pager-end{margin-inline-start:auto;color:var(--faint)}
@media (max-width:640px){
  .pager{gap:var(--s2)}
  .pager-count{flex-basis:100%}
  .pager-pages{margin-inline-start:auto}
  .pager-pages .pg.num,.pager-pages .pg-gap{display:none}
  .pager-now{display:inline}
}
/* The pager on a dark code surface (the live log tail) */
.tail .pager{border-top-color:var(--code-line);color:var(--code-muted);font-family:var(--font)}
.tail .pager-count b{color:var(--code-strong)}
.tail .pager .btn{background:transparent;color:var(--code-strong);border-color:var(--code-line)}
.tail .pager .btn:hover{background:var(--code-line)}
.tail .pager-end{color:var(--code-muted)}
/* Driver chips and region badges */
.drv-list{display:flex;align-items:center;gap:var(--s1);min-width:0;overflow:hidden}
.drv{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-sm);background:var(--well);color:var(--ink-2);font:500 var(--t-xs)/1 var(--mono);white-space:nowrap}
.drv.more{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.rg{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:20px;padding:0 6px;border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--ink-2);font:600 var(--t-xs)/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
/* Tabs inside a panel (members and invites) */
.panel > .tabs{margin:0;padding:0 var(--s5)}

/* ---------- Settings: a left sub-nav on settings.html, plans.html and billing.html (a row of tabs on small screens) ---------- */
.subnav-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s7);align-items:start}
.subnav{position:sticky;top:calc(var(--topbar) + var(--s5));display:flex;flex-direction:column;gap:2px}
.subnav a{display:flex;align-items:center;gap:var(--s2);height:36px;padding:0 var(--s3);border-radius:var(--r-md);color:var(--muted);font-size:var(--t-sm);font-weight:500;text-decoration:none;white-space:nowrap}
.subnav a:hover{background:var(--hover);color:var(--ink)}
.subnav a[aria-current="page"]{background:var(--hover);color:var(--ink)}
[data-theme="dark"] .subnav a[aria-current="page"]{background:var(--line)}
.subnav .sub-sep{height:1px;margin:var(--s2) var(--s3);background:var(--line)}
.sub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.sub-head .soft{margin-top:var(--s1);max-width:68ch}
.sub-head .actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.sub-body > .section:first-child,.sub-body [data-state] > .section:first-child{margin-top:0}
.sub-body{min-width:0;display:flex;flex-direction:column;gap:var(--s5)}
.sub-body > [data-sub]{display:flex;flex-direction:column;gap:var(--s5)}
@media (max-width:960px){
  .subnav-layout{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .subnav{position:static;flex-direction:row;gap:var(--s1);overflow-x:auto;padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
  .subnav a{flex:none;height:var(--s7)}
  .subnav .sub-sep{display:none}
}

/* ---------- Add an app: two balanced options, each a title, one line and its action at the foot ---------- */
.connect{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.connect > div{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5)}
.connect > div + div{border-inline-start:1px solid var(--line)}
.connect h3{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-md);font-weight:600}
.connect .act{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);margin-top:auto}
.connect .cmd{align-self:stretch}
@media (max-width:760px){.connect{grid-template-columns:minmax(0,1fr)}.connect > div + div{border-inline-start:0;border-top:1px solid var(--line)}}

/* Small screens: names never break, the least important columns step back, chips scroll in one line */
table.t a.t,table.t td.mono{white-space:nowrap}
.panel-f > i[data-i] + span{flex:1;min-width:0}
@media (max-width:640px){
  table.t .hide-sm{display:none}
  table.t td{white-space:nowrap}
  .toolbar .chips{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .topbar .crumbs > :not(b){display:none}
}