/* Cenovel customer portal: the kit. One set of tokens and components for every page (src/views/kit.js
   renders the markup). The look is cenovel.com's brand (website/src/design/site.css: paper, ink, the
   dark header, the blue, Schibsted); the discipline follows the console's design rules (one card,
   fixed heads, a fixed type scale, quiet tables, page actions in the title row, every state designed).

   Rules, enforced by scripts/check.mjs:
   - Color literals only in the token blocks at the top of this file. Everything below uses var(--…).
   - font-size and font-weight only through the --fs-* and --fw-* tokens.
   - Motion only through the --dur-* and --ease-* tokens, and none under prefers-reduced-motion. */

/* The brand face (cenovel.com's Schibsted), one variable file for every weight. */
@font-face{font-family:Schibsted;src:url('/assets/sans.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* --- Tokens ------------------------------------------------------------------------------------ */
:root{
 color-scheme:light;
 /* Surfaces and lines */
 --paper:#f4f5f2;--card:#fff;--card-soft:#f8f9f7;--hover:#f1f4f2;
 --line:#c6cece;--line-soft:#e3e7e6;--line-faint:#edf0ef;
 /* Text */
 --ink:#20252b;--muted:#53616b;
 /* Accent: interactive and selected, never a status */
 --blue:#367d9f;--accent-ink:#2b6886;--ice:#dce8ee;--rail:#eef0ec;--rail-hover:#e2e6e1;
 /* Buttons */
 --btn:#20252b;--btn-ink:#fff;--btn-hover:#344351;
 /* Tones: ink on a tint, with a line. Every ink is at least 4.5:1 on its tint. */
 --ok:#276b43;--ok-bg:#eef7f1;--ok-line:#a9d1b8;
 --warn:#7a530a;--warn-bg:#fbf5e6;--warn-line:#e3cd96;
 --info:#2b6886;--info-bg:#eef5f8;--info-line:#b5d0dd;
 --err:#9c3426;--err-bg:#fbefed;--err-line:#e7b8b0;
 --quiet:#53616b;--quiet-bg:#f4f5f2;--quiet-line:#c6cece;
 --note-line:#c9dde6;
 /* Header (always dark, as on cenovel.com) */
 --header:#282e38;--header-ink:#edf0f5;--header-muted:#b9c3cf;--header-line:#3d4653;--header-control:#5b6574;--header-focus:#8ab4ff;
 --avatar:#8ab4ff;--avatar-ink:#111c30;--night:#18212b;
 --header-field:#323945;--header-hover:#363e4b;
 --shadow-pop:0 8px 24px rgb(24 33 43 / .18);
 --skeleton-a:#edf0ef;--skeleton-b:#e1e6e4;
 --scrim:rgb(18 24 32 / .45);--err-solid:#b3382a;--err-solid-ink:#fff;--err-solid-hover:#952c20;
 --viewas:#7a530a;--viewas-bg:#fbf0d4;--viewas-line:#e3cd96;
 --brand-glow:rgb(54 125 159 / .35);
}
@media (prefers-color-scheme:dark){
 :root:not([data-theme=light]){
  color-scheme:dark;
  --paper:#121820;--card:#1a212a;--card-soft:#1d252e;--hover:#212a34;
  --line:#3a4654;--line-soft:#2b3541;--line-faint:#242d38;
  --ink:#e4e9ee;--muted:#a3aeb8;
  --blue:#7db7d4;--accent-ink:#9cc9e0;--ice:#22394a;--rail:#161c24;--rail-hover:#1f2833;
  --btn:#e4e9ee;--btn-ink:#121820;--btn-hover:#c8d1d9;
  --ok:#8fd1a8;--ok-bg:#15281e;--ok-line:#2f5a41;
  --warn:#e8c47d;--warn-bg:#2a2314;--warn-line:#5c4a22;
  --info:#9cc9e0;--info-bg:#142733;--info-line:#2f5468;
  --err:#f2a499;--err-bg:#2d1a17;--err-line:#6a3a33;
  --quiet:#a3aeb8;--quiet-bg:#1d252e;--quiet-line:#3a4654;
  --note-line:#2f5468;
  --header:#20242c;--header-line:#343b46;--header-field:#2a3039;--header-hover:#2e3540;
  --shadow-pop:0 10px 28px rgb(0 0 0 / .45);
  --skeleton-a:#212a34;--skeleton-b:#2b3541;
  --scrim:rgb(0 0 0 / .6);--err-solid:#e0806f;--err-solid-ink:#1a0f0d;--err-solid-hover:#eb9a8b;
  --viewas:#f0d08c;--viewas-bg:#33280f;--viewas-line:#6b5420;
 }
}
:root[data-theme=dark]{
 color-scheme:dark;
 --paper:#121820;--card:#1a212a;--card-soft:#1d252e;--hover:#212a34;
 --line:#3a4654;--line-soft:#2b3541;--line-faint:#242d38;
 --ink:#e4e9ee;--muted:#a3aeb8;
 --blue:#7db7d4;--accent-ink:#9cc9e0;--ice:#22394a;--rail:#161c24;--rail-hover:#1f2833;
 --btn:#e4e9ee;--btn-ink:#121820;--btn-hover:#c8d1d9;
 --ok:#8fd1a8;--ok-bg:#15281e;--ok-line:#2f5a41;
 --warn:#e8c47d;--warn-bg:#2a2314;--warn-line:#5c4a22;
 --info:#9cc9e0;--info-bg:#142733;--info-line:#2f5468;
 --err:#f2a499;--err-bg:#2d1a17;--err-line:#6a3a33;
 --quiet:#a3aeb8;--quiet-bg:#1d252e;--quiet-line:#3a4654;
 --note-line:#2f5468;
 --header:#20242c;--header-line:#343b46;--header-field:#2a3039;--header-hover:#2e3540;
 --shadow-pop:0 10px 28px rgb(0 0 0 / .45);
 --skeleton-a:#212a34;--skeleton-b:#2b3541;
 --scrim:rgb(0 0 0 / .6);--err-solid:#e0806f;--err-solid-ink:#1a0f0d;--err-solid-hover:#eb9a8b;
 --viewas:#f0d08c;--viewas-bg:#33280f;--viewas-line:#6b5420;
}
:root{
 /* Type: six sizes, each with its line height, and three weights with one job each. */
 --font:Schibsted,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
 --fs-1:12px;--lh-1:18px;   /* tags, table headers, footers */
 --fs-2:13px;--lh-2:20px;   /* the muted second line, meta, hints, stat labels */
 --fs-3:14px;--lh-3:22px;   /* body: rows, cells, facts, buttons, fields */
 --fs-4:16px;--lh-4:24px;   /* panel titles */
 --fs-5:22px;--lh-5:28px;   /* stat figures */
 --fs-6:28px;--lh-6:34px;   /* the page title */
 --fw-regular:400;          /* all running text and values */
 --fw-display:500;          /* the brand's display voice: page title, stat figures, tags */
 --fw-strong:600;           /* titles, buttons, table headers, the current nav item */
 /* Space */
 --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
 --inset:20px;--gap:20px;--head-h:52px;--ctl:36px;--ctl-sm:32px;--radius:6px;--top:56px;--rail-w:232px;
 /* Motion: calm and quick, never bouncy */
 --dur-feedback:120ms;--dur-in:180ms;--dur-out:120ms;--dur-enter:200ms;--dur-stagger:30ms;--dur-wait:150ms;--dur-spin:700ms;--dur-shimmer:1200ms;
 --ease-out:cubic-bezier(.2,.7,.2,1);--ease-in:cubic-bezier(.4,0,1,1);
}

/* --- Base -------------------------------------------------------------------------------------- */
*{box-sizing:border-box}
body{margin:0;-webkit-text-size-adjust:100%}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
input[type=checkbox],input[type=radio]{accent-color:var(--blue)}
button{cursor:pointer}
h1,h2,h3{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none}
html{scrollbar-width:thin;scrollbar-color:var(--line) transparent;background:var(--paper)}
body{background:var(--paper);color:var(--ink);font:var(--fw-regular) var(--fs-3)/var(--lh-3) var(--font)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mono{font-family:var(--mono);font-size:.92em;font-weight:var(--fw-regular)}
.meta{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
a{text-underline-offset:3px}

/* --- Shell ------------------------------------------------------------------------------------- */
.skip{position:fixed;top:-100px;left:16px;background:var(--card);padding:10px 14px;z-index:30;border-radius:var(--radius)}
.skip:focus{top:12px}
.shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:calc(100vh - var(--top))}
.shell.no-nav{grid-template-columns:minmax(0,1fr)}
.shell>.page{min-width:0;display:flex;flex-direction:column}
.shell>.page>main{flex:1 0 auto}
main{padding:var(--sp-8) 40px 64px;max-width:1120px;min-width:0}
main:focus{outline:none}
.foot{display:flex;flex-wrap:wrap;gap:6px 20px;margin:40px 40px 0;padding:16px 0 32px;max-width:1040px;border-top:1px solid var(--line-soft);font-size:var(--fs-2);line-height:var(--lh-2);color:var(--muted)}
.foot a{color:inherit}

/* The left nav: a rail beside the page; under 861px it is the header menu's sheet (one element, a
   native popover, so Escape and a click outside close it). */
.side{border:0;border-right:1px solid var(--line);margin:0;padding:var(--sp-6) var(--sp-3);background:var(--rail);color:var(--ink)}
@media (min-width:861px){.side[popover]{display:block;position:static;inset:auto;width:auto;height:auto;overflow:visible;z-index:auto}}
.side ul{list-style:none;margin:0;padding:0}
.side .group{font-size:var(--fs-1);line-height:var(--lh-1);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:var(--sp-5) var(--sp-3) 6px}
.side .group:first-child{margin-top:0}
.side a{display:block;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);text-decoration:none;font-size:var(--fs-3);line-height:var(--lh-3);transition:background-color var(--dur-feedback) var(--ease-out)}
.side a:hover{background:var(--rail-hover)}
.side a[aria-current=page]{background:var(--ice);font-weight:var(--fw-strong)}


/* --- Docs (src/pages/content/docs.js): the docs navigation, the article and its outline ---------
   The portal's frame around the imported docs: the docs navigation beside the portal nav, the title
   block on the paper, the article in a panel (styled by content/style.js), the outline on the right,
   previous and next as two cards. The search box, results, outline and dialog keep the website's
   ids and classes, which its scripts look for. */
main.docs-main{max-width:1360px;padding:var(--sp-8) 40px 64px}
:root[data-docs-search]{scroll-padding-top:calc(var(--top) + var(--sp-6))}
.k-docs{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--sp-6);align-items:start}
.k-docs>.docs-nav{grid-column:1;grid-row:1}
.k-docs>.docs-article,.k-docs>.docs-portal-body{grid-column:2;grid-row:1;min-width:0}
.docs-article{display:grid;grid-template-columns:minmax(0,800px) 176px;grid-template-rows:auto auto 1fr;column-gap:var(--sp-6);align-items:start}
.docs-article>*{grid-column:1;min-width:0}
.docs-article>.page-outline{grid-column:2;grid-row:1/span 3;align-self:start}
.k-docs>.docs-nav,.docs-article>.page-outline{position:sticky;top:calc(var(--top) + var(--sp-8));max-height:calc(100vh - var(--top) - var(--sp-8) - var(--sp-6));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;min-width:0;padding:2px}
.docs-nav a,.page-outline a{outline-offset:-2px}
/* Search: the box over the navigation, its results in a list under it. */
.docs-search{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.docs-search .k-search{min-width:0}
.docs-search .search-status{margin:0;color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.docs-search .search-status:empty{display:none}
#docs-results:not([hidden]){list-style:none;margin:0;padding:var(--sp-1);display:grid;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
#docs-results a{display:grid;gap:2px;padding:var(--sp-2);border-radius:4px;color:var(--ink);text-decoration:none;transition:background-color var(--dur-feedback) var(--ease-out)}
#docs-results a:hover,#docs-results a:focus-visible{background:var(--hover)}
#docs-results strong{font-weight:var(--fw-strong);font-size:var(--fs-2);line-height:var(--lh-2)}
#docs-results small{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:var(--fs-1);line-height:var(--lh-1);overflow-wrap:anywhere}
/* The groups: a label with a chevron that opens its pages; the group holding the page is open. */
#docs-navigation{display:grid;gap:2px}
#docs-navigation a{display:block;padding:6px var(--sp-3);border-radius:var(--radius);color:var(--ink);text-decoration:none;font-size:var(--fs-2);line-height:var(--lh-2);transition:background-color var(--dur-feedback) var(--ease-out)}
#docs-navigation a:hover{background:var(--rail-hover)}
#docs-navigation a[aria-current=page]{background:var(--ice);font-weight:var(--fw-strong)}
.docs-out{width:10px;height:10px;margin-left:var(--sp-1);color:var(--muted);vertical-align:0}
.doc-group{display:grid;gap:2px}
.doc-group>summary,.page-outline summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:6px var(--sp-3);border-radius:var(--radius);cursor:pointer;color:var(--muted);font-size:var(--fs-1);line-height:var(--lh-1);letter-spacing:.08em;text-transform:uppercase;transition:color var(--dur-feedback) var(--ease-out),background-color var(--dur-feedback) var(--ease-out)}
.doc-group>summary{margin-top:var(--sp-2)}
.doc-group>summary::-webkit-details-marker,.page-outline summary::-webkit-details-marker{display:none}
.doc-group>summary::after,.page-outline summary::after{content:'';flex:none;width:6px;height:6px;margin-right:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-1px) rotate(-45deg);transition:transform var(--dur-feedback) var(--ease-out)}
.doc-group[open]>summary::after,.page-outline details[open] summary::after{transform:translateY(-2px) rotate(45deg)}
.doc-group>summary:hover,.page-outline summary:hover{color:var(--ink);background:var(--rail-hover)}
/* On this page: the sections, the one being read marked on the rule. */
.page-outline nav{display:grid;margin-top:var(--sp-1);border-left:1px solid var(--line-soft)}
.page-outline nav a{display:block;margin-left:-1px;padding:4px var(--sp-3);border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:var(--fs-2);line-height:var(--lh-2);transition:color var(--dur-feedback) var(--ease-out),border-color var(--dur-feedback) var(--ease-out)}
.page-outline nav a:hover{color:var(--ink)}
.page-outline nav a[aria-current]{color:var(--ink);border-left-color:var(--blue)}
/* The article: where it sits and what it is, then the panel, then previous and next. */
.docs-head,.docs-body{margin-bottom:var(--gap)}
.docs-article>.doc-next{margin-top:0}
.docs-head .kicker{display:block;margin:0 0 var(--sp-1);color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.docs-head h1{margin:0;font-size:var(--fs-6);line-height:var(--lh-6);font-weight:var(--fw-display);letter-spacing:-.02em;text-wrap:balance}
.docs-head .intro{margin:var(--sp-2) 0 0;color:var(--muted);font-size:var(--fs-4);line-height:var(--lh-4);max-width:68ch;text-wrap:pretty}
.docs-head .asof{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);margin:var(--sp-3) 0 0;color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.docs-head .asof>span:first-child{font-size:var(--fs-1);line-height:var(--lh-1);font-weight:var(--fw-display);padding:0 var(--sp-2);border-radius:999px;border:1px solid var(--info-line);background:var(--info-bg);color:var(--info)}
.docs-body>.panel-foot{font-size:var(--fs-2);line-height:var(--lh-2)}
.docs-body>.panel-foot p{margin:0}
.k-docs .doc-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.docs-step{display:grid;gap:2px;align-content:start;min-width:0;padding:var(--sp-3) var(--inset);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;transition:border-color var(--dur-feedback) var(--ease-out),background-color var(--dur-feedback) var(--ease-out)}
.docs-step:hover{border-color:var(--muted);background:var(--hover)}
.docs-next{grid-column:2;text-align:right}
.docs-step-dir{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.docs-step-title{font-weight:var(--fw-strong);overflow-wrap:break-word}
.k-docs .doc-next>.text-link{grid-column:2;justify-self:end;align-self:center}
/* The docs home: the title and search, the paths as panels, the demo. */
.k-docs.k-docs-home{display:block;max-width:1120px}
.landing-hero{margin-bottom:var(--sp-8)}
.landing-intro{display:grid;justify-items:start;gap:var(--sp-3);max-width:72ch}
.landing-intro h1{margin:0;font-size:var(--fs-6);line-height:var(--lh-6);font-weight:var(--fw-display);letter-spacing:-.02em}
.landing-statement{margin:0;color:var(--muted);font-size:var(--fs-4);line-height:var(--lh-4);text-wrap:pretty}
.landing-search{display:flex;align-items:center;gap:var(--sp-2);width:min(520px,100%);height:var(--ctl);margin-top:var(--sp-2);padding:0 var(--sp-2) 0 11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--muted);font-size:var(--fs-3);line-height:var(--lh-3);cursor:text;transition:border-color var(--dur-feedback) var(--ease-out)}
.landing-search:hover{border-color:var(--muted)}
.landing-search svg{flex:none;width:16px;height:16px}
.landing-search span{flex:1 1 auto;text-align:left}
.landing-search kbd,.search-dialog .sd-close{min-width:20px;height:20px;display:grid;place-items:center;padding:0 var(--sp-1);border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--muted);font:var(--fw-regular) var(--fs-1)/1 var(--font)}
.landing-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5)}
.k-docs .text-link{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--accent-ink);font-weight:var(--fw-strong);text-decoration:none}
.k-docs .text-link:hover{text-decoration:underline}
.k-docs .text-link>span{transition:transform var(--dur-feedback) var(--ease-out)}
.k-docs .text-link:hover>span{transform:translateX(2px)}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-bottom:var(--gap)}
.path{display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.path .eyebrow{margin:var(--sp-4) var(--inset) 0;color:var(--muted);font-size:var(--fs-1);line-height:var(--lh-1);font-variant-numeric:tabular-nums}
.path h2{margin:2px var(--inset) var(--sp-1);font-size:var(--fs-4);line-height:var(--lh-4);font-weight:var(--fw-strong)}
.path h2 a{color:inherit;text-decoration:none}
.path h2 a:hover{text-decoration:underline}
.path p{margin:0 var(--inset) var(--sp-3);color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.path ul{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--line-soft)}
.path li+li{border-top:1px solid var(--line-faint)}
.path li a{display:block;padding:var(--sp-2) var(--inset);text-underline-offset:3px;transition:background-color var(--dur-feedback) var(--ease-out)}
.path li a:hover{background:var(--hover)}
.path li a:focus-visible{outline-offset:-2px}
.path li:last-child a{border-radius:0 0 var(--radius) var(--radius)}
.demo-strip{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4) var(--sp-6);padding:var(--sp-4) var(--inset);background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.demo-strip h2{margin:0 0 2px;font-size:var(--fs-4);line-height:var(--lh-4);font-weight:var(--fw-strong)}
.demo-strip p{margin:0;max-width:72ch;color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.demo-strip .btn{flex:none}
/* The search dialog: "/" or the search box on the home opens it. */
.search-dialog{width:min(640px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 120px));margin:12vh auto auto;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow-pop);overflow:hidden}
.search-dialog[open]{display:flex;flex-direction:column}
.search-dialog::backdrop{background:var(--scrim)}
.search-dialog form{flex:none;display:flex;align-items:center;gap:var(--sp-2);height:52px;margin:0;padding:0 var(--sp-3) 0 var(--sp-4);border-bottom:1px solid var(--line-soft);transition:box-shadow var(--dur-feedback) var(--ease-out)}
.search-dialog form:focus-within{box-shadow:inset 0 -2px 0 var(--blue)}
.search-dialog form svg{flex:none;width:16px;height:16px;color:var(--muted)}
.search-dialog input{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font-size:var(--fs-4);line-height:var(--lh-4)}
.search-dialog input:focus-visible{outline:none}
.search-dialog input::placeholder{color:var(--muted);opacity:1}
.search-dialog .sd-close{height:24px;cursor:pointer}
.search-dialog .sd-status{flex:none;margin:0;padding:var(--sp-2) var(--sp-4) var(--sp-1);color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
#sd-results{flex:1 1 auto;min-height:0;list-style:none;margin:0;padding:0 var(--sp-2) var(--sp-2);overflow-y:auto;scrollbar-width:thin}
#sd-results a{display:grid;gap:2px;padding:var(--sp-2) var(--sp-3);border-radius:4px;color:var(--ink);text-decoration:none;transition:background-color var(--dur-feedback) var(--ease-out)}
#sd-results a:hover{background:var(--hover)}
#sd-results li[aria-selected=true] a{background:var(--ice)}
#sd-results strong{font-weight:var(--fw-strong)}
#sd-results .sd-path{color:var(--accent-ink);font-size:var(--fs-1);line-height:var(--lh-1)}
#sd-results small{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);overflow-wrap:anywhere}
#sd-results mark{background:var(--ice);color:inherit;border-radius:2px}
.search-dialog .sd-foot{flex:none;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);padding:var(--sp-2) var(--sp-4);border-top:1px solid var(--line-soft);background:var(--card-soft);color:var(--muted);font-size:var(--fs-1);line-height:var(--lh-1)}

/* The header, laid out as the console's: brand and where you are | the organization, or the staff
   search | the support link and the account menu. Always the dark surface of cenovel.com. */
.top{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;padding:0 var(--sp-6);background:var(--header);color:var(--header-ink);border-bottom:1px solid var(--header-line)}
.top :focus-visible{outline-color:var(--header-focus)}
.top-lead{flex:none;min-width:calc(var(--rail-w) + 40px - var(--sp-6) - var(--sp-6));display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.top.no-nav .top-lead{min-width:0}
.k-pop .menu-who+hr{display:none}
.brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;color:inherit;min-width:0}
.brand img{height:26px;width:auto;display:block}
.brand .ctx{font-size:var(--fs-2);line-height:var(--lh-2);color:var(--header-muted);border-left:1px solid var(--header-control);padding-left:var(--sp-3);white-space:nowrap}
.top-main{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding-left:var(--sp-6)}
.top.no-nav .top-main{padding-left:var(--sp-6)}
.top-right{flex:none;display:flex;align-items:center;gap:var(--sp-2);margin-left:var(--sp-4)}
.top-menu{display:none}
.top-caret{width:12px;height:12px;flex:none;color:var(--header-muted);transition:transform var(--dur-feedback) var(--ease-out)}
[aria-expanded=true]>.top-caret{transform:rotate(180deg)}
.top-link,.acct,.org-switch,.top-menu{height:var(--ctl);border:0;border-radius:var(--radius);background:transparent;color:inherit;cursor:pointer;transition:background-color var(--dur-feedback) var(--ease-out)}
.top-link{display:inline-flex;align-items:center;padding:0 var(--sp-3);text-decoration:none;white-space:nowrap;font-size:var(--fs-3);line-height:var(--lh-3)}
.top-link:hover,.acct:hover,.org-switch:hover,.top-menu:hover,.acct[aria-expanded=true],.org-switch[aria-expanded=true]{background:var(--header-hover)}
.acct{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-2) 0 var(--sp-1);font-size:var(--fs-3);line-height:var(--lh-3)}
.acct-name{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{width:28px;height:28px;flex:none;border-radius:50%;background:var(--avatar);color:var(--avatar-ink);display:grid;place-items:center;font-size:var(--fs-1);line-height:1;font-weight:var(--fw-strong)}
/* The organization: plain text for one district, the switcher for more. */
.org{display:inline-flex;align-items:center;gap:var(--sp-2);min-width:0;max-width:100%;font-size:var(--fs-3);line-height:var(--lh-3);font-weight:var(--fw-strong);white-space:nowrap}
.org-switch{padding:0 var(--sp-2) 0 var(--sp-3);margin-left:calc(-1 * var(--sp-3))}
.org-name{overflow:hidden;text-overflow:ellipsis;min-width:0}
.org-none{color:var(--header-muted);font-weight:var(--fw-regular)}
.org-none .org-name{color:var(--header-ink)}
.org-tag{flex:none;font-size:var(--fs-1);line-height:var(--lh-1);font-weight:var(--fw-display);padding:0 var(--sp-2);border-radius:999px;border:1px solid var(--header-control);color:var(--header-muted)}
.org-viewas .org-tag{background:var(--viewas-bg);border-color:var(--viewas-line);color:var(--viewas)}
/* The staff search, with its "/" shortcut. */
.top-search{position:relative;width:420px;max-width:100%;margin:0}
.top-search svg{position:absolute;left:11px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--header-muted);pointer-events:none}
.top-search input{width:100%;height:var(--ctl);padding:0 36px 0 34px;border:1px solid var(--header-control);border-radius:var(--radius);background:var(--header-field);color:var(--header-ink);font-size:var(--fs-3);transition:border-color var(--dur-feedback) var(--ease-out)}
.top-search input::placeholder{color:var(--header-muted);opacity:1}
.top-search input:hover{border-color:var(--header-muted)}
.top-search input:focus-visible{outline:2px solid var(--header-focus);outline-offset:-1px;border-color:var(--header-focus)}
.top-search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);min-width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--header-control);border-radius:4px;font:var(--fw-regular) var(--fs-1)/1 var(--font);color:var(--header-muted)}
.top-search:focus-within kbd{display:none}
/* Back office: the search, then New (with its plus) and Help (an icon), then the account. */
/* The search lines up with the page's content column, as it did beside "Back office". */
.top-staff .top-lead{min-width:calc(var(--rail-w) - var(--sp-2))}
.top-staff .top-search{width:320px}
.top-new{gap:6px;padding:0 var(--sp-3) 0 10px}
.top-plus{width:14px;height:14px;flex:none}
.top-icon{display:inline-grid;place-items:center;width:var(--ctl);height:var(--ctl);padding:0;border:0;border-radius:var(--radius);background:transparent;color:var(--header-muted);cursor:pointer;transition:background-color var(--dur-feedback) var(--ease-out),color var(--dur-feedback) var(--ease-out)}
.top-icon svg{width:18px;height:18px}
.top-icon:hover,.top-icon[aria-expanded=true],.top-link[aria-expanded=true]{background:var(--header-hover);color:var(--header-ink)}
/* The back office's sidebar: Overview, then each group as a heading over its pages, which collapses. */
.side[data-tree] .tree-top{margin-bottom:var(--sp-3)}
.tree-group+.tree-group{margin-top:var(--sp-3)}
.tree-group>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;padding:6px var(--sp-3);border-radius:var(--radius);font-size:var(--fs-1);line-height:var(--lh-1);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:background-color var(--dur-feedback) var(--ease-out)}
.tree-group>summary::-webkit-details-marker{display:none}
.tree-group>summary::after{content:'';width:6px;height:6px;margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-feedback) var(--ease-out)}
.tree-group:not([open])>summary::after{transform:rotate(-45deg)}
.tree-group>summary:hover{background:var(--rail-hover);color:var(--ink)}
.tree-group>ul{margin-top:2px}
.tree-group>ul a{padding-left:calc(var(--sp-3) + var(--sp-2))}
/* Menus from the header: who you are, then items; a two-line item for districts. */
.k-pop-menu{min-width:260px}
.k-pop .menu-who{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-2) var(--sp-3) var(--sp-3);border-bottom:1px solid var(--line-soft);margin-bottom:var(--sp-1)}
.menu-who .avatar{width:32px;height:32px;font-size:var(--fs-2)}
.menu-id{display:grid;min-width:0}
.menu-id strong{font-weight:var(--fw-strong);overflow-wrap:anywhere}
.menu-id span{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);overflow-wrap:anywhere}
.k-pop .menu-label{margin:0;padding:var(--sp-1) var(--sp-3) var(--sp-1);color:var(--muted);font-size:var(--fs-1);line-height:var(--lh-1)}
.k-pop .k-menu-item.k-menu-two{display:grid;align-content:center;padding-top:6px;padding-bottom:6px}
.k-menu-two small{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.k-pop .k-menu-item[aria-current]{font-weight:var(--fw-strong);background:var(--ice)}
.k-pop[data-placed]{inset:auto;margin:0}
/* View-as: a warn strip under the header on every page of the view. */
.k-viewas{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-6);background:var(--viewas-bg);border-bottom:1px solid var(--viewas-line);color:var(--ink)}
.k-viewas>svg{flex:none;width:18px;height:18px;color:var(--viewas)}
.k-viewas p{margin:0;flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:0 var(--sp-2)}
.k-viewas strong{font-weight:var(--fw-strong)}
.k-viewas form{margin:0}

/* --- Page head: crumbs, the title row with the page actions, then the muted line ---------------- */
.k-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:0 0 var(--sp-1);padding:0;font-size:var(--fs-2);line-height:var(--lh-2);color:var(--muted)}
.k-crumbs li+li::before{content:'›';margin-right:var(--sp-1)}
.k-crumbs a{color:inherit}
.k-pagehead{margin-bottom:var(--sp-1)}
.k-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
.k-head>div:first-child{min-width:0}
.k-head h1{font-size:var(--fs-6);line-height:var(--lh-6);font-weight:var(--fw-display);letter-spacing:-.02em;margin:0;text-wrap:balance}
.k-head .k-sub{margin:var(--sp-1) 0 0;color:var(--muted);font-size:var(--fs-3);line-height:var(--lh-3);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2)}
.k-sep{color:var(--muted)}
.k-actions{display:flex;gap:var(--sp-2);flex:none;align-items:center;padding-top:var(--sp-1)}
.k-actions form{margin:0}

/* --- Layout ------------------------------------------------------------------------------------ */
.k-stack{display:grid;gap:var(--gap);min-width:0}
.k-stack>*{min-width:0}
.k-cols{display:grid;gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.k-cols.k-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.k-cols>*{min-width:0}

/* --- Panel: the one card. A fixed head (title, meta, actions), a body, an optional footer. ------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.panel-head{height:var(--head-h);display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--inset);border-bottom:1px solid var(--line-soft)}
.panel-head h2{flex:1 1 auto;min-width:0;margin:0;font-size:var(--fs-4);line-height:var(--lh-4);font-weight:var(--fw-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:var(--sp-2)}
.panel-meta{flex:none;color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);white-space:nowrap}
.panel-actions{flex:none;display:flex;gap:var(--sp-2);align-items:center}
.panel-actions form{margin:0}
.panel-body{padding:var(--sp-4) var(--inset) var(--inset)}
.panel-body>:first-child{margin-top:0}.panel-body>:last-child{margin-bottom:0}
.panel-foot{border-top:1px solid var(--line-soft);background:var(--card-soft);padding:var(--sp-2) var(--inset);color:var(--muted);font-size:var(--fs-1);line-height:var(--lh-1);border-radius:0 0 var(--radius) var(--radius);display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.panel-row{padding:var(--sp-3) var(--inset);border-top:1px solid var(--line-soft)}
.panel-row-top{border-top:0;border-bottom:1px solid var(--line-soft)}
.panel-row .k-search{flex:1 1 auto;max-width:none}
.panel-desc{margin:0;padding:var(--sp-3) var(--inset) 0;color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);max-width:72ch}

/* --- Stats: figures in one strip, each a label, the figure and a muted line --------------------- */
.k-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.k-stat{padding:var(--sp-4) var(--inset);min-width:0;border-left:1px solid var(--line-soft);display:grid;gap:2px;align-content:start;text-decoration:none;color:inherit}
.k-stat:first-child{border-left:0}
a.k-stat{transition:background-color var(--dur-feedback) var(--ease-out)}
a.k-stat:hover{background:var(--hover)}
a.k-stat:focus-visible{outline-offset:-2px;border-radius:var(--radius)}
a.k-stat:first-child:hover{border-radius:var(--radius) 0 0 var(--radius)}
a.k-stat:last-child:hover{border-radius:0 var(--radius) var(--radius) 0}
.k-stat-label{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.k-stat-value{font-size:var(--fs-5);line-height:var(--lh-5);font-weight:var(--fw-display);font-variant-numeric:lining-nums proportional-nums;display:flex;align-items:center;gap:var(--sp-2)}
.k-stat-value.is-text{font-size:var(--fs-4);line-height:var(--lh-5);font-weight:var(--fw-strong)}
.k-stat-detail{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Readout: a title over a muted line -------------------------------------------------------- */
.k-readout{display:grid;min-width:0}
.k-readout-title{overflow-wrap:break-word}
.k-readout-line{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);overflow-wrap:break-word}
.k-readout .mono{overflow-wrap:anywhere}
.k-readout-line .mono{font-size:.95em}
.k-flag{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-1);font-size:var(--fs-2);line-height:var(--lh-2);color:var(--ink);overflow-wrap:anywhere}
.k-flag>.tag{flex:none}

/* --- List: readout rows with an action, inside a flush panel ----------------------------------- */
.k-list{list-style:none;margin:0;padding:0}
.k-list>li{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--inset);min-height:64px;border-top:1px solid var(--line-faint);transition:background-color var(--dur-feedback) var(--ease-out)}
.k-list>li:first-child{border-top:0}
.k-list>li:hover,.k-list>li:focus-within{background:var(--hover)}
.k-list>li:last-child:hover,.k-list>li:last-child:focus-within{border-radius:0 0 var(--radius) var(--radius)}
.k-list-label{margin:0;padding:var(--sp-3) var(--inset) var(--sp-1);border-top:1px solid var(--line-soft);color:var(--muted);font-size:var(--fs-1);line-height:var(--lh-1);font-weight:var(--fw-strong)}
.k-list-label-top{border-top:0}
.k-form-end{justify-content:flex-end}
.k-row-wrap{flex-wrap:wrap;justify-content:flex-end}
.k-row-actions{display:flex;gap:var(--sp-2);align-items:center;flex:none}
.k-row-actions form{margin:0}

/* --- Facts: label and value rows, both 14/400 -------------------------------------------------- */
.k-facts{margin:0;display:grid}
.k-facts>div{display:grid;grid-template-columns:minmax(120px,34%) minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-2) 0;border-top:1px solid var(--line-faint)}
.k-facts>div:first-child{border-top:0;padding-top:0}
.k-facts>div:last-child{padding-bottom:0}
.k-facts dt{color:var(--muted)}
.k-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.k-none{color:var(--muted)}

/* --- Table: quiet. Headers 12/600 muted, rows 14/400, numbers right-aligned. Schibsted draws a
   full-width comma with tabular figures ("$64, 800"), so figures stay proportional. ------------- */
.k-table-frame{position:relative;overflow-x:auto;scrollbar-width:thin}
.k-table-frame:focus-visible,.k-code-scroll:focus-visible{outline-offset:-2px}
.k-table{width:100%;border-collapse:collapse;font-size:var(--fs-3);line-height:var(--lh-3)}
.k-table caption{text-align:left}
.k-table th{text-align:left;font-size:var(--fs-1);line-height:var(--lh-1);font-weight:var(--fw-strong);color:var(--muted);padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--line-soft);white-space:nowrap;vertical-align:bottom}
.k-table td{padding:var(--sp-3) var(--sp-3);border-top:1px solid var(--line-faint);vertical-align:middle;overflow-wrap:break-word}
.k-table tbody tr:first-child td{border-top:0}
.k-table th:first-child,.k-table td:first-child{padding-left:var(--inset)}
.k-table th:last-child,.k-table td:last-child{padding-right:var(--inset)}
.k-table tbody tr{transition:background-color var(--dur-feedback) var(--ease-out)}
.k-table tbody tr:hover,.k-table tbody tr:focus-within{background:var(--hover)}
.k-table .num{text-align:right;font-variant-numeric:lining-nums proportional-nums;white-space:nowrap}
.k-table .nowrap{white-space:nowrap}
.k-table .check{width:1%;padding-right:0}
.k-table .check input,.k-bulk input[type=checkbox]{width:16px;height:16px;margin:0;vertical-align:middle}
.k-table td .k-input,.k-table td .k-select select{height:var(--ctl-sm);font-size:var(--fs-2)}
/* Bulk actions over a table's selected rows: one line, each action a small form in a popover. */
.k-bulk{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:nowrap;padding:var(--sp-2) var(--inset);border-bottom:1px solid var(--line-soft);background:var(--card-soft);min-width:0}
.k-bulk-label{margin-right:auto;color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);display:flex;align-items:center;gap:var(--sp-2);white-space:nowrap}
.k-table .w-half{width:50%}.k-table .w-third{width:33%}.k-table .w-sixth{width:16%}
.k-table .act{width:1%;white-space:nowrap;text-align:right}
.k-table .act>.k-row-actions{justify-content:flex-end}
.k-table td>a:not(.btn){color:inherit}

/* --- Empty, error and loading states ----------------------------------------------------------- */
.k-empty{padding:var(--sp-6) var(--inset);display:grid;gap:var(--sp-1);justify-items:start}
.k-empty-title{font-weight:var(--fw-strong)}
.k-empty-line{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);max-width:60ch}
.k-empty .btn{margin-top:var(--sp-2)}
.panel-body>.k-empty{padding:0}
/* A list or table that is being re-read (a filter or search was submitted) shows skeleton bars in
   place of its rows, after a short delay so a fast answer never flashes. */
[aria-busy=true] .k-table tbody td,[aria-busy=true] .k-list>li,[aria-busy=true] .k-choice{position:relative;color:transparent}
[aria-busy=true] .k-table tbody td>*,[aria-busy=true] .k-list>li>*,[aria-busy=true] .k-choice>*{visibility:hidden}
[aria-busy=true] .k-table tbody td::after,[aria-busy=true] .k-list>li::after,[aria-busy=true] .k-choice::after{content:'';position:absolute;left:var(--sp-3);right:var(--sp-3);top:50%;height:10px;margin-top:-5px;border-radius:4px;background:linear-gradient(90deg,var(--skeleton-a) 0%,var(--skeleton-b) 50%,var(--skeleton-a) 100%) 0 0/200% 100%;opacity:0;animation:k-skeleton-in var(--dur-in) var(--ease-out) var(--dur-wait) forwards,k-shimmer var(--dur-shimmer) linear var(--dur-wait) infinite}
[aria-busy=true] .k-table tbody td:first-child::after,[aria-busy=true] .k-list>li::after{left:var(--inset)}
[aria-busy=true] .k-choice::after{left:var(--sp-4);right:var(--sp-4)}
[aria-busy=true] .k-table tbody td:last-child::after{right:var(--inset)}
@keyframes k-skeleton-in{to{opacity:1}}
@keyframes k-shimmer{to{background-position:-200% 0}}

/* --- Buttons: md 36 and sm 32; default (ink), quiet, danger. Working shows a spinner. ----------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--ctl);min-height:0;padding:0 var(--sp-4);border-radius:var(--radius);border:1px solid var(--btn);background:var(--btn);color:var(--btn-ink);font-size:var(--fs-3);line-height:var(--lh-3);font-weight:var(--fw-strong);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-feedback) var(--ease-out),border-color var(--dur-feedback) var(--ease-out),color var(--dur-feedback) var(--ease-out)}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);text-decoration:none}
.btn.quiet{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.quiet:hover{background:var(--hover);border-color:var(--muted)}
.btn.danger{background:var(--card);color:var(--err);border-color:var(--err-line)}
.btn.danger:hover{background:var(--err-bg);border-color:var(--err)}
.btn.sm{height:var(--ctl-sm);padding:0 var(--sp-3);font-size:var(--fs-2);line-height:var(--lh-2)}
.btn:disabled{opacity:.5;cursor:default}
.btn[aria-busy=true]{cursor:progress}
.btn[aria-busy=true]::before{content:'';width:12px;height:12px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:k-spin var(--dur-spin) linear infinite}
@keyframes k-spin{to{transform:rotate(360deg)}}

/* --- Tags: 12/500, a tint, a line, and always a word ------------------------------------------- */
.tag{display:inline-flex;align-items:center;white-space:nowrap;font-size:var(--fs-1);line-height:var(--lh-1);font-weight:var(--fw-display);border-radius:999px;padding:0 var(--sp-2);border:1px solid}
.tag.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.tag.warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.tag.info{color:var(--info);border-color:var(--info-line);background:var(--info-bg)}
.tag.err{color:var(--err);border-color:var(--err-line);background:var(--err-bg)}
.tag.quiet{color:var(--quiet);border-color:var(--quiet-line);background:var(--quiet-bg)}

/* --- Toolbar: search, then the view switch, on one line ---------------------------------------- */
.k-toolbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:nowrap;min-width:0}
.k-search{position:relative;flex:1 1 auto;min-width:200px}
.k-toolbar>form.k-inline{flex:1 1 auto}
.k-search svg{position:absolute;left:11px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--muted);pointer-events:none}
.k-search input{width:100%;height:var(--ctl);padding:0 var(--sp-3) 0 34px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);font-size:var(--fs-3);transition:border-color var(--dur-feedback) var(--ease-out)}
.k-search input:hover{border-color:var(--muted)}
.k-search input:focus-visible{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.k-search input::placeholder{color:var(--muted);opacity:1}

/* --- Segmented: 2–5 fixed, short options; links (a view) or radios (a choice) ------------------- */
.k-seg{display:inline-flex;flex:none;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:2px;gap:2px;margin:0;min-width:0}
.k-seg>a,.k-seg>label{display:inline-flex;align-items:center;height:30px;padding:0 var(--sp-3);border-radius:4px;font-size:var(--fs-2);line-height:var(--lh-2);color:var(--muted);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-feedback) var(--ease-out),color var(--dur-feedback) var(--ease-out)}
.k-seg>a:hover,.k-seg>label:hover{background:var(--hover);color:var(--ink)}
.k-seg>a[aria-current],.k-seg>label:has(input:checked){background:var(--ice);color:var(--ink);font-weight:var(--fw-strong)}
.k-seg>label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:1px}
.k-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
fieldset.k-seg{position:relative}
fieldset.k-seg>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Inputs ------------------------------------------------------------------------------------ */
.k-input{height:var(--ctl);width:100%;min-width:0;padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);font-size:var(--fs-3);transition:border-color var(--dur-feedback) var(--ease-out)}
textarea.k-input{height:auto;padding:var(--sp-2) var(--sp-3);line-height:var(--lh-3);resize:vertical}
.k-input:hover{border-color:var(--muted)}
.k-input:focus-visible{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.k-input[aria-invalid=true]{border-color:var(--err)}
.k-input::placeholder{color:var(--muted);opacity:1}
.k-field{display:grid;gap:var(--sp-1);min-width:0}
.k-field>label{font-weight:var(--fw-strong);font-size:var(--fs-2);line-height:var(--lh-2)}
.k-field .k-hint{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.k-field .k-error{color:var(--err);font-size:var(--fs-2);line-height:var(--lh-2)}
.k-inline{display:flex;gap:var(--sp-2);align-items:center;min-width:0;margin:0}
.k-inline>.k-input{flex:1 1 auto}
.k-form{display:grid;gap:var(--sp-4);margin:0}
.k-form-actions{display:flex;gap:var(--sp-2);align-items:center}

.k-label{font-weight:var(--fw-strong);font-size:var(--fs-2);line-height:var(--lh-2)}
.k-lede{margin:0 0 var(--sp-3);color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);max-width:72ch}
.k-code:last-child{margin-bottom:0}
.k-bullets{margin:0 0 var(--sp-3);padding-left:var(--sp-5)}
.k-bullets li+li{margin-top:var(--sp-1)}
/* Prose: rendered Markdown (an email preview, docs), on the type scale. */
.k-prose{overflow-wrap:anywhere;max-width:72ch}
.k-prose>:first-child{margin-top:0}
.k-prose h1,.k-prose h2{font-size:var(--fs-4);line-height:var(--lh-4);font-weight:var(--fw-strong);margin:var(--sp-5) 0 var(--sp-2)}
.k-prose h3,.k-prose h4{font-size:var(--fs-3);line-height:var(--lh-3);font-weight:var(--fw-strong);margin:var(--sp-4) 0 var(--sp-1)}
.k-prose p,.k-prose ul,.k-prose ol{margin:0 0 var(--sp-3)}
.k-prose ul,.k-prose ol{padding-left:var(--sp-5)}
.k-prose code{font-family:var(--mono);font-size:.92em}
.k-prose-foot{margin:var(--sp-4) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--line-soft)}
.k-field-seg>.k-seg{justify-self:start;max-width:100%}
.k-cols.k-c3s{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Links: a panel's list of links, one per row. */
.k-links{list-style:none;margin:0;padding:0}
.k-links li{border-top:1px solid var(--line-faint)}
.k-links li:first-child{border-top:0}
.k-links a{display:block;padding:var(--sp-2) var(--inset);text-underline-offset:3px;transition:background-color var(--dur-feedback) var(--ease-out)}
.k-links a:hover{background:var(--hover)}
.k-links li:last-child a{border-radius:0 0 var(--radius) var(--radius)}
/* Steps: a numbered procedure, each a title, a line and maybe a command. */
.k-steps{margin:0;padding:0;list-style:none;counter-reset:k-step}
.k-steps>li{counter-increment:k-step;display:grid;gap:var(--sp-1);padding:var(--sp-4) var(--inset) var(--sp-4) calc(var(--inset) + 32px);border-top:1px solid var(--line-faint);position:relative;min-width:0}
.k-steps>li:first-child{border-top:0}
.panel>.k-list+.k-steps>li:first-child{border-top:1px solid var(--line-soft)}
.k-steps>li::before{content:counter(k-step);position:absolute;left:var(--inset);top:var(--sp-4);width:22px;height:22px;border-radius:50%;background:var(--ice);color:var(--accent-ink);display:grid;place-items:center;font-size:var(--fs-1);line-height:1;font-weight:var(--fw-strong)}
.k-step-title{font-weight:var(--fw-strong)}
.k-step-line{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.k-steps .k-code{margin:var(--sp-2) 0 0}
.k-chooser>.k-select{flex:0 1 320px}
.k-optional{color:var(--muted);font-weight:var(--fw-regular)}
.k-form{max-width:720px}
.panel-body>.k-form{max-width:720px}
.k-form>.k-flash{margin:0}
.k-form-actions{flex-wrap:wrap;padding-top:var(--sp-1)}
/* Form section: a group of fields in a long form, under a small head and a rule. */
.k-section{border:0;border-top:1px solid var(--line-soft);margin:0;padding:var(--sp-4) 0 0;display:grid;gap:var(--sp-4);min-width:0}
.k-section:not(.k-section ~ .k-section){border-top:0;padding-top:0}
.k-section-head{padding:0;font-weight:var(--fw-strong);font-size:var(--fs-3);line-height:var(--lh-3);float:left;width:100%}
.k-section-head+*{clear:both}
.k-section-line{margin:calc(-1 * var(--sp-3)) 0 0;color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);max-width:72ch}
.k-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);align-items:start}
.k-mono{font-family:var(--mono)}
/* Select: the native control, drawn like the inputs, with a chevron in the muted ink. */
.k-select{position:relative;display:block;min-width:0}
.k-select select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;text-overflow:ellipsis}
.k-select::after{content:'';position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.k-select.sm select{height:var(--ctl-sm);font-size:var(--fs-2)}
.k-inline>.k-select{flex:0 0 200px}
/* Date: the native control, and the day spelled out under it. */
.k-date{display:grid;gap:2px}
.k-date input{max-width:220px}
.k-date-day{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
/* Choice cards: radios or checkboxes, each a card, the chosen one in the accent. */
.k-choices{border:0;margin:0;padding:0;display:grid;gap:var(--sp-1);min-width:0}
.k-choices>legend{padding:0;margin-bottom:var(--sp-1);font-weight:var(--fw-strong);font-size:var(--fs-2);line-height:var(--lh-2)}
.k-choices .k-hint,.k-choices .k-error{font-size:var(--fs-2);line-height:var(--lh-2)}
.k-choices .k-hint{color:var(--muted)}.k-choices .k-error{color:var(--err)}
.k-choice-list{display:grid;gap:var(--sp-2)}
.k-c2 .k-choice-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.k-c3 .k-choice-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.k-choice{display:flex;gap:var(--sp-3);align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);background:var(--card);cursor:pointer;min-width:0;transition:border-color var(--dur-feedback) var(--ease-out),background-color var(--dur-feedback) var(--ease-out)}
.k-choice:hover{border-color:var(--muted)}
.k-choice:has(input:checked){border-color:var(--blue);background:var(--info-bg)}
.k-choice:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.k-choice:has(input:disabled){opacity:.6;cursor:default}
.k-choice input{margin:3px 0 0;flex:none;accent-color:var(--blue);width:16px;height:16px}
.k-choice .k-readout-title{font-weight:var(--fw-strong)}
/* Toggle row: the setting's label over a line, and a switch. */
.k-toggle{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);padding:var(--sp-3) 0;border-top:1px solid var(--line-faint)}
.k-toggle:first-child{border-top:0;padding-top:0}
.k-toggle:last-child{padding-bottom:0}
.k-toggle>label{cursor:pointer;min-width:0}
.k-switch{appearance:none;-webkit-appearance:none;flex:none;width:38px;height:22px;margin:0;border-radius:11px;background:var(--line);position:relative;cursor:pointer;transition:background-color var(--dur-feedback) var(--ease-out)}
.k-switch::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--card);transition:transform var(--dur-feedback) var(--ease-out)}
.k-switch:checked{background:var(--blue)}
.k-switch:checked::after{transform:translateX(16px)}
.k-switch:disabled{opacity:.55;cursor:default}
/* File button: the input hidden behind a quiet button; the chosen names beside it. */
.k-file{display:inline-flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:center;min-width:0}
.k-file>label{cursor:pointer}
.k-file:has(input:focus-visible)>label{outline:2px solid var(--blue);outline-offset:2px}
.k-file-names{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);overflow-wrap:anywhere;min-width:0}
/* Pager: in a panel footer. */
.k-pager{display:flex;gap:var(--sp-2);margin-left:auto}
.panel-foot:has(.k-pager){align-items:center;padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
/* Confirmation dialog: native modal; the page behind is inert. */
.k-dialog{width:min(480px,calc(100vw - 32px));padding:var(--sp-6);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow-pop)}
.k-dialog::backdrop{background:var(--scrim)}
/* A dialog opened from a table's action cell doesn't take that cell's right alignment or no-wrap. */
.k-dialog{text-align:start;white-space:normal}
.k-dialog form,.k-dialog-note{margin:0;display:grid;gap:var(--sp-3)}
.k-dialog h2{margin:0;font-size:var(--fs-4);line-height:var(--lh-4);font-weight:var(--fw-strong)}
.k-dialog-body{color:var(--ink)}
.k-dialog-body>p{margin:0 0 var(--sp-2)}.k-dialog-body>:last-child{margin-bottom:0}
.k-dialog .k-form-actions{justify-content:flex-end;padding-top:var(--sp-2)}
.k-dialog .k-field{margin-top:var(--sp-1)}
.btn.danger-solid{background:var(--err-solid);border-color:var(--err-solid);color:var(--err-solid-ink)}
.btn.danger-solid:hover{background:var(--err-solid-hover);border-color:var(--err-solid-hover)}
/* Case thread: replies as readouts, internal notes on a square warn rule, events one muted line. */
.k-thread{list-style:none;margin:0;padding:0}
.k-msg{padding:var(--sp-4) var(--inset);border-top:1px solid var(--line-faint);min-width:0}
.k-msg:first-child{border-top:0}
.k-msg.internal{background:var(--warn-bg);box-shadow:inset 3px 0 0 var(--warn-line)}
.k-msg.event{padding-top:var(--sp-2);padding-bottom:var(--sp-2);color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2);display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2)}
.k-msg-head{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);align-items:center}
.k-msg-who{font-weight:var(--fw-strong)}
.k-msg-role,.k-msg-when{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.k-msg-when{margin-left:auto}
.k-msg-act{display:flex;flex:none;margin-left:auto}
.k-msg-when+.k-msg-act{margin-left:0}
.k-msg-body{margin-top:var(--sp-1);white-space:pre-wrap;overflow-wrap:anywhere}
.k-files{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:grid;gap:2px;font-size:var(--fs-2);line-height:var(--lh-2)}
.k-files li{overflow-wrap:anywhere}
/* Code block: a rounded frame with a square scroller inside. */
.k-code{margin:0 0 var(--sp-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--card-soft);min-width:0}
.k-code figcaption{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);border-bottom:1px solid var(--line-soft);color:var(--muted);font-size:var(--fs-1);line-height:var(--lh-1)}
.k-code-scroll{overflow-x:auto;scrollbar-width:thin}
.k-code pre{margin:0;padding:var(--sp-3);font-family:var(--mono);font-size:var(--fs-2);line-height:var(--lh-2);white-space:pre}
.k-code code{font-family:inherit;font-size:inherit}
.btn[data-copied]{color:var(--ok);border-color:var(--ok-line)}

/* Reading pages (the privacy policy): prose at a readable measure. */
.k-reading{max-width:880px}

/* --- Flash: what an action did, at the top of the page ----------------------------------------- */
.k-flash{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);border:1px solid var(--info-line);background:var(--info-bg);border-radius:var(--radius);margin:0 0 var(--gap)}
.k-flash.ok{border-color:var(--ok-line);background:var(--ok-bg)}
.k-flash.warn{border-color:var(--warn-line);background:var(--warn-bg)}
.k-flash>svg{flex:none;width:18px;height:18px;margin-top:2px}
.k-flash.ok>svg{color:var(--ok)}.k-flash.warn>svg{color:var(--warn)}.k-flash.info>svg{color:var(--info)}
.k-stack>.k-flash{margin:0}
.k-flash>p{margin:0;flex:1 1 auto;min-width:0}
.k-flash a{color:inherit;text-decoration:underline}
.k-flash .k-dismiss{flex:none;width:28px;height:28px;margin:-3px 0;display:grid;place-items:center;border:0;border-radius:4px;background:transparent;color:var(--muted);cursor:pointer;transition:background-color var(--dur-feedback) var(--ease-out)}
.k-flash .k-dismiss:hover{background:var(--card)}
.k-flash .k-dismiss svg{width:14px;height:14px}
.k-flash[data-state=closing]{opacity:0;transform:translateY(-4px);transition:opacity var(--dur-out) var(--ease-in),transform var(--dur-out) var(--ease-in)}

/* --- Popover: menus and small forms. Native [popover], so it sits above any scroller, Escape and a
   click outside close it, and focus goes back to the button that opened it. ---------------------- */
.k-pop{position:fixed;white-space:normal;text-align:left;font-size:var(--fs-3);line-height:var(--lh-3);min-width:220px;max-width:360px;padding:var(--sp-2);background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop)}
.k-pop.k-pop-form{padding:var(--sp-4);width:340px}
.k-pop .k-menu-item{display:flex;align-items:center;width:100%;min-height:32px;padding:0 var(--sp-3);border:0;border-radius:4px;background:none;color:inherit;font-size:var(--fs-3);text-align:left;text-decoration:none;cursor:pointer}
.k-pop .k-menu-item:hover,.k-pop .k-menu-item:focus-visible{background:var(--hover)}
.k-pop .k-menu-item.danger{color:var(--err)}
.k-pop form{margin:0}
.k-pop hr{border:0;border-top:1px solid var(--line-soft);margin:var(--sp-1) 0}

/* --- Sign-in pages: the brand panel on the left, the card on the paper; on a phone a brand strip,
   then the card (the owner's pick, 2026-10-04). ------------------------------------------------ */
body.si-page{background:var(--paper)}
body.si-page>main{max-width:none;padding:0}
.si{min-height:100vh;min-width:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.si-col{display:grid;gap:var(--sp-4);width:min(440px,100%);min-width:0}
.si-card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:40px;box-shadow:var(--shadow-pop);min-width:0}
.si-card h1{margin:0;font-size:var(--fs-6);line-height:var(--lh-6);font-weight:var(--fw-display);letter-spacing:-.02em}
.si-line{margin:var(--sp-2) 0 var(--sp-6);color:var(--muted)}
.si-card>.k-flash{margin:0 0 var(--sp-4)}
.si-providers{display:grid;gap:var(--sp-3)}
.si-provider{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);width:100%;height:44px;padding:0 var(--sp-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);font-size:var(--fs-3);line-height:var(--lh-3);font-weight:var(--fw-strong);cursor:pointer;transition:background-color var(--dur-feedback) var(--ease-out),border-color var(--dur-feedback) var(--ease-out)}
.si-provider:hover:not(:disabled){background:var(--hover);border-color:var(--muted)}
.si-provider img{width:18px;height:18px;flex:none}
.si-provider:disabled{cursor:default;color:var(--muted)}
.si-provider:disabled:not([aria-busy=true]) img{opacity:.55}
.si-provider[aria-busy=true]{cursor:progress;color:var(--ink)}
.si-provider[aria-busy=true] img{display:none}
.si-provider[aria-busy=true]::before{content:'';width:16px;height:16px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:k-spin var(--dur-spin) linear infinite}
/* The captcha and status share one fixed slot, so a challenge never pushes the page down. */
.si-slot{min-height:92px;max-width:100%;overflow-x:auto;scrollbar-width:thin;padding:var(--sp-3) 0;display:grid;align-content:center;justify-items:center;gap:var(--sp-2);text-align:center}
.si-hint{margin:0;color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.si-slot:has(#clerk-captcha:not(:empty)) .si-hint,.si-slot:has(.si-status:not(:empty)) .si-hint,.si-slot:has(.si-retry:not([hidden])) .si-hint{display:none}
#clerk-captcha:empty{display:none}
.si-status{margin:0;color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.si-status:empty{display:none}
.si-retry{margin:0;align-items:center;justify-self:stretch;text-align:left}
.si-retry[hidden]{display:none}
.si-retry .btn{flex:none}
.si-first{border-top:1px solid var(--line-soft);padding-top:var(--sp-5)}
.si-first h2{margin:0 0 var(--sp-2);font-size:var(--fs-3);line-height:var(--lh-3);font-weight:var(--fw-strong)}
.si-first ol{margin:0 0 var(--sp-2);padding:0;list-style:none;counter-reset:si;color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.si-first li{counter-increment:si;display:flex;gap:var(--sp-2)}
.si-first li::before{content:counter(si) '.';min-width:1.2em;color:var(--muted)}
.si-first p{margin:0;color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
.si-trial{margin:var(--sp-5) 0 0}
.si-trial a,.si-dev a{color:var(--accent-ink)}
.si-dev{margin:var(--sp-2) 0 0;font-size:var(--fs-2)}
.si-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-1) var(--sp-5);font-size:var(--fs-2);line-height:var(--lh-2);color:var(--muted)}
.si-foot a{color:inherit}
.si-brand{background:var(--header);color:var(--header-ink);padding:56px 64px;display:grid;grid-template-rows:auto 1fr auto;gap:var(--sp-6);min-width:0;position:relative;overflow:hidden;isolation:isolate}
.si-brand::after{content:'';position:absolute;inset:auto -20% -30% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--brand-glow),transparent);z-index:-1}
.si-brand-logo{height:28px;width:auto;justify-self:start}
.si-account{align-self:center;max-width:560px}
.si-pitch{margin:0;font-size:var(--fs-6);line-height:var(--lh-6);font-weight:var(--fw-display);letter-spacing:-.02em;text-wrap:balance}
.si-pitch-line{margin:var(--sp-2) 0 var(--sp-6);color:var(--header-muted)}
.si-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.si-tiles li{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border:1px solid var(--header-line);border-radius:var(--radius)}
.si-tiles li>span{display:grid;gap:2px;min-width:0}
.si-tiles strong{font-weight:var(--fw-strong);color:var(--header-ink)}
.si-tiles li>span>span{font-size:var(--fs-2);line-height:var(--lh-2);color:var(--header-muted)}
.si-tiles svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--avatar)}
.si-trust{margin:0;font-size:var(--fs-2);line-height:var(--lh-2);color:var(--header-muted)}
.si>.si-col{align-self:center;justify-self:center;width:min(440px,calc(100% - 32px));padding:var(--sp-8) 0}
.si .si-card{box-shadow:none}
.si-card .k-form-actions{margin-top:var(--sp-2)}
.si-card>p.si-line+.k-form-actions{margin-top:0}
@media (max-width:860px){
 .si-card{padding:28px 22px}
 .si{grid-template-columns:minmax(0,1fr);align-content:start}
 .si-brand{padding:var(--sp-5) var(--sp-4);gap:var(--sp-3)}
 .si-brand-logo{height:24px}
 .si-pitch{font-size:var(--fs-4);line-height:var(--lh-4)}
 .si-pitch-line,.si-tiles,.si-trust{display:none}
 .si>.si-col{padding:var(--sp-5) 0 var(--sp-8)}
}
@media (max-width:360px){
 .si>.si-col{width:calc(100% - 16px)}
 .si-card{padding:24px 14px}
}
@media (prefers-reduced-motion:no-preference){
 /* The brand panel fades in; the card rises 8px and fades in just after. One curve, about 200ms. */
 .si-brand{animation:si-fade var(--dur-enter) var(--ease-out) backwards}
 .si-card{animation:si-rise var(--dur-enter) var(--ease-out) var(--dur-stagger) backwards}
 @keyframes si-fade{from{opacity:0}}
 @keyframes si-rise{from{opacity:0;transform:translateY(8px)}}
 /* A button's words crossfade ("Sign in with Microsoft" to "Opening Microsoft…"). */
 .si-provider span{transition:opacity var(--dur-out) var(--ease-out)}
 .si-provider span.is-swapping{opacity:0}
 .si-status{transition:opacity var(--dur-in) var(--ease-out)}
 @starting-style{.si-status{opacity:0}}
}

/* --- Motion ------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
 /* Page entrance: the head and each block rise a little, in order. */
 main>.k-page>*{animation:k-rise var(--dur-enter) var(--ease-out) backwards}
 main>.k-page>:nth-child(2){animation-delay:var(--dur-stagger)}
 main>.k-page>:nth-child(3){animation-delay:calc(var(--dur-stagger) * 2)}
 main>.k-page>:nth-child(4){animation-delay:calc(var(--dur-stagger) * 3)}
 main>.k-page>:nth-child(n+5){animation-delay:calc(var(--dur-stagger) * 4)}
 @keyframes k-rise{from{opacity:0;transform:translateY(6px)}}
 /* Docs: the article's blocks, the home's and a portal docs page's rise in the same way; the
    search dialog and its results settle in; a group's pages slide open. */
 .k-docs>.docs-article>*,.k-docs-home>*,.docs-portal-body>.k-page>*{animation:k-rise var(--dur-enter) var(--ease-out) backwards}
 .k-docs>.docs-article>:nth-child(2),.k-docs-home>:nth-child(2),.docs-portal-body>.k-page>:nth-child(2){animation-delay:var(--dur-stagger)}
 .k-docs>.docs-article>:nth-child(n+3),.k-docs-home>:nth-child(n+3),.docs-portal-body>.k-page>:nth-child(n+3){animation-delay:calc(var(--dur-stagger) * 2)}
 .search-dialog[open]{animation:k-rise var(--dur-in) var(--ease-out)}
 .search-dialog[open]::backdrop{animation:k-fade var(--dur-in) var(--ease-out)}
 #sd-results li{animation:k-rise var(--dur-in) var(--ease-out) backwards;animation-delay:calc(var(--i, 0) * var(--dur-stagger))}
 .doc-group[open]>a{animation:k-rise var(--dur-in) var(--ease-out) backwards}
 @keyframes k-fade{from{opacity:0}}
 /* Flash: slides in under the head. */
 .k-flash{animation:k-drop var(--dur-in) var(--ease-out) calc(var(--dur-stagger) * 2) backwards}
 @keyframes k-drop{from{opacity:0;transform:translateY(-6px)}}
 /* Popovers fade and drop in, and fade out. */
 .k-pop{transition:opacity var(--dur-out) var(--ease-in),transform var(--dur-out) var(--ease-in),overlay var(--dur-out) allow-discrete,display var(--dur-out) allow-discrete;opacity:0;transform:translateY(-4px)}
 .k-pop:popover-open{opacity:1;transform:none;transition-duration:var(--dur-in);transition-timing-function:var(--ease-out)}
 @starting-style{.k-pop:popover-open{opacity:0;transform:translateY(-4px)}}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:1ms!important}
 .btn[aria-busy=true]::before{animation:none;border-right-color:currentColor;opacity:.6}
 [aria-busy=true] .k-table tbody td::after,[aria-busy=true] .k-list>li::after,[aria-busy=true] .k-choice::after{opacity:1}
}

/* --- Narrow windows and 200% zoom: one column, the table scrolls inside its square frame -------- */
/* Under 1400 the outline moves over the article as one wrapped line of links, so the article
   keeps a reading width beside the docs navigation. */
@media (max-width:1399px){
 .docs-article{grid-template-columns:minmax(0,1fr)}
 .docs-article>.page-outline{grid-column:1;grid-row:auto;position:static;max-height:none;overflow:visible;padding:0;margin-bottom:var(--gap)}
 .page-outline details{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);padding:var(--sp-2) var(--sp-3);border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--card-soft)}
 .page-outline summary{padding:2px 0;pointer-events:none}
 .page-outline summary::after{display:none}
 .page-outline nav{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);margin:0;border-left:0}
 .page-outline nav a{margin:0;padding:2px 0;border-left:0;color:var(--accent-ink)}
 .page-outline nav a:hover{color:var(--accent-ink);text-decoration:underline}
 .page-outline nav a[aria-current]{color:var(--accent-ink)}
}
@media (max-width:1180px){
 .paths{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
 .top{padding:0 var(--sp-3)}
 .top-lead,.top-staff .top-lead{min-width:0;gap:var(--sp-1)}
 .top-menu{display:grid;place-items:center;width:var(--ctl);padding:0}
 .top-menu svg{width:18px;height:18px}
 .brand img{width:26px;object-fit:cover;object-position:left center}
 .brand .ctx{display:none}
 .top-main,.top.no-nav .top-main{padding-left:var(--sp-3)}
 .top-right{margin-left:var(--sp-2);gap:var(--sp-1)}
 .top-link,.acct-name,.acct .top-caret{display:none}
 .top-new{display:none}
 .acct{padding:0 var(--sp-1)}
 .org{font-size:var(--fs-2);line-height:var(--lh-2)}
 .org-tag{display:none}
 .org-viewas .org-tag{display:inline}
 .top-search{width:100%}
 .shell{grid-template-columns:minmax(0,1fr)}
 .side{position:fixed;inset:var(--top) 0 auto 0;width:auto;max-height:calc(100vh - var(--top));overflow:auto;margin:0;border:0;border-bottom:1px solid var(--line);box-shadow:var(--shadow-pop);padding:var(--sp-4) var(--sp-3)}
 .k-viewas{padding:var(--sp-2) var(--sp-4);align-items:flex-start}
 .k-viewas>svg{margin-top:3px}
 .k-viewas p{display:grid}
 .k-viewas p .k-sep{display:none}
 .k-viewas p span{color:var(--muted);font-size:var(--fs-2);line-height:var(--lh-2)}
 main{padding:var(--sp-6) var(--sp-4) 48px}
 .foot{margin:32px var(--sp-4) 0}
 .k-head{flex-direction:column;gap:var(--sp-3)}
 .k-actions{padding-top:0;flex-wrap:wrap}
 .k-cols,.k-cols.k-21,.k-cols.k-c3s{grid-template-columns:minmax(0,1fr)}
 .k-table{min-width:600px}
 .k-stats{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
 .k-stat:nth-child(odd){border-left:0}
 .k-stat:nth-child(n+3){border-top:1px solid var(--line-soft)}
 .k-toolbar{flex-wrap:wrap}
 .k-inline{flex-wrap:wrap}
 .k-inline>.k-select,.k-chooser>.k-select{flex:1 1 200px}
 .k-search{flex:1 1 100%}
 .k-seg{max-width:100%;overflow-x:auto}
 .k-list>li{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
 .k-list>li>*{max-width:100%}
 .k-row-actions{flex:0 1 auto;min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-start}
 .k-c2 .k-choice-list,.k-c3 .k-choice-list,.k-form-row{grid-template-columns:minmax(0,1fr)}
 .k-facts>div{grid-template-columns:minmax(0,1fr);gap:0}
 .panel-head h2{white-space:normal}
 main.docs-main{padding:var(--sp-6) var(--sp-4) 48px}
 .k-docs{grid-template-columns:minmax(0,1fr)}
 .k-docs>.docs-nav,.k-docs>.docs-article,.k-docs>.docs-portal-body{grid-column:1;grid-row:auto;position:static;max-height:none}
 .paths{grid-template-columns:minmax(0,1fr)}
 .demo-strip{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){
 .k-row-actions .k-seg,.k-pop .k-seg{flex-wrap:wrap;overflow:visible}
 .k-stats{grid-template-columns:minmax(0,1fr)}
 .k-stat{border-left:0}
 .k-stat+.k-stat{border-top:1px solid var(--line-soft)}
 .panel-head{height:auto;min-height:var(--head-h);padding-top:var(--sp-2);padding-bottom:var(--sp-2);flex-wrap:wrap}
}