/*! MEVP Console Style, shared sheet. Version 1.0.0 (line v1); now 1.0.23, see --cs-version.
   1.0.23 (Console Style 2.5.16, U87): no style change; the version follows the shared frame (its rules carry the gateway page).
   1.0.22 (Console Style 2.5.15, U86, images): no style change; the version follows the shared frame (its rules carry U86).
   1.0.21 (Console Style 2.5.14, U85): no style change; the version follows the shared frame (its rules carry the unlaunched site flow).
   1.0.19 (Console Style 2.5.12, U82, beta mode and invite pricing): no style change; the version follows the shared frame (its rules carry the beta switch).
   1.0.20 (Console Style 2.5.13, U83): the bold close X. At the end.
   1.0.17 (Console Style 2.5.10): no style change; the version follows the shared frame, whose copied design rules changed.
   1.0.16 (Console Style 2.5.9, U80 and U69, Mike, Nov 13): the footer inset under the console screen; the one-color top menu. At the end.
   1.0.18 (Console Style 2.5.11, U72 to U75): the logo notch and the clean L (notch, toolbar, nav column). At the end.
   1.0.16 (Console Style 2.5.9, U80 and U69, Mike, Nov 13): the footer inset under the console screen; the one-color top menu. At the end.
   1.0.18 (Console Style 2.5.11; the site switcher): the site switcher as tiny view cards with a corner badge and a red ring on the current one (U54, U76); the
   person's own Home tiles; the admin view switch beside the avatar; place slots.
   1.0.15 (Console Style 2.5.8, U67, Mike, Nov 13): the inset Ask bar (kit().askBar), at the end of this file.
   1.0.12 (Console Style 2.5.0): no style change; the version follows the shared frame, whose copied design rules changed.
   1.0.10 (SUPER-CONSOLE-REBUILD, release #124): the console ring, container cards, person cards, panel sheets, the view switch.
   1.0.9 (MIKE-CONSOLE, MODE-CONTRAST, AI-BAR 20261113): the design rules carry the phone bar, ring, contrast and AI bar rules (no style change).
   1.0.8 (THEMES-20261112): --cs-art-dim (how far menu card art is faded, set by a theme) and data-cs-motion="still" (a theme with no motion).
   ONE look for every MEVP site: the TV-set frame, cards, sideways rows, pop-ups, buttons, the footer, and the themes.
   Served at /__mevp/console-style/v1/console-style.css. A change here reaches every site that loads it.

   How to read this file
   1. TOKENS      every color, font, gap, corner, shadow, speed and layer has a name (--cs-...). Parts use the names only.
   2. THEMES      one short list of values per theme, picked with data-cs-theme="name" on the frame.
   3. PARTS       the frame and everything in it. All class names start with "cs-".
   4. SMALL AND SHORT WINDOWS, MOTION

   Three layers of color, each riding on the one below:
     theme   (data-cs-theme)                    the screen: surfaces, text, fonts
     site    (--cs-band, --cs-brand, logo)       the company color band around the screen
     person  (--cs-ring, data-cs-text)           their own ring color and text size
   The frame script (console-frame.js) sets the site and person values from a short settings list.

   The values come from the consoles live on November 11, 2026: CurbRash for the frame and parts, the personal console for the six
   older themes. Nothing in the v1 line is ever renamed or removed. A breaking change goes to /v2/.

   This file loads nothing: no fonts, no pictures, no other files. */

/* ============ 1. TOKENS ============ */
:root{--cs-version:"1.0.23"}

.cs-root,[data-cs-theme]{
/* fixed for every theme: sizes */
--cs-scale:1;
--cs-tap:44px;
--cs-space-1:2px;--cs-space-2:4px;--cs-space-3:6px;--cs-space-4:8px;--cs-space-5:10px;--cs-space-6:12px;--cs-space-7:14px;
--cs-radius-xs:6px;--cs-radius-sm:8px;--cs-radius-md:9px;--cs-radius-lg:12px;--cs-radius-xl:14px;--cs-radius-screen:16px;--cs-radius-bezel:26px;--cs-radius-pill:999px;
--cs-top-h:46px;--cs-top-h-wide:58px;--cs-rail-w:92px;--cs-key-h:48px;--cs-control-h:34px;--cs-chip-h:34px;--cs-suggest-h:28px;--cs-btn-h:44px;--cs-btn-sm-h:36px;--cs-explain-h:26px;--cs-card-ratio:3/4;
/* fixed: controls that sit on the band, and the admin bar */
--cs-control:rgba(0,0,0,.55);--cs-control-solid:#000;--cs-control-edge:rgba(0,0,0,.35);--cs-control-edge-2:rgba(0,0,0,.4);--cs-control-edge-3:rgba(0,0,0,.45);--cs-on-control:#fff;--cs-key:#101114;
--cs-admin:#ffd166;--cs-on-admin:#000;
--cs-ok:#8fd1a8;--cs-warn:#e0b25a;--cs-bad:#e59a8f;
--cs-logo-box:transparent;
/* fixed: shadows, motion, layers */
--cs-shadow-bezel:inset 0 0 0 2px var(--cs-bezel-edge),0 4px 0 var(--cs-control-edge);
--cs-shadow-screen:inset 0 0 28px var(--cs-control-solid);
--cs-shadow-pop:0 0 0 100vmax var(--cs-scrim);
--cs-motion-press:.12s;--cs-motion-panel:.5s;--cs-ease:cubic-bezier(.2,.7,.2,1);
--cs-z-art:0;--cs-z-face:1;--cs-z-over:2;--cs-z-pop:5;--cs-z-top:9;
/* site layer: the band and the brand. A site gives one or two colors; these defaults follow the theme's accent. */
--cs-brand:var(--cs-accent);--cs-on-brand:var(--cs-on-accent);--cs-brand-text:var(--cs-accent-text);--cs-brand-deep:var(--cs-accent-deep);
--cs-mark:var(--cs-brand-text);
--cs-glow:color-mix(in srgb,var(--cs-brand) 24%,var(--cs-ink));
--cs-band:var(--cs-brand);--cs-on-band:var(--cs-on-brand);
/* person layer: their own color around their console */
--cs-ring:var(--cs-brand);
/* serious cards (AI notice, Terms, Privacy, legal): calm and official. They follow the theme's own text colors, never the brand. */
--cs-font-serious:Georgia,"Iowan Old Style","Times New Roman",serif;--cs-serious-line:var(--cs-text-faint);--cs-serious-accent:var(--cs-text-muted);
/* visiting another storefront: the person's own theme stays the base, and the storefront's look is blended in lightly:
   its band color around the frame, and a tint of its accent that fades down the screen into the person's own console. */
--cs-store-band:var(--cs-band);--cs-store-accent:var(--cs-brand);--cs-blend:10%;--cs-motion-blend:.6s;
--cs-tint:color-mix(in srgb,var(--cs-store-accent) var(--cs-blend),transparent);
/* the plate behind a title set over art: strong enough that the words read at 4.5:1 over any picture */
--cs-title-scrim:color-mix(in srgb,var(--cs-ink) 82%,transparent);
/* a list is a sideways row of cards; this is the row's height */
--cs-list-h:clamp(132px,26vh,200px);--cs-list-min:100px;
/* the small text-only footer */
--cs-footer-size:11px;
/* 1.0.8: how far card art is faded; a theme from the rules may set its own (the frame writes it) */
--cs-art-dim:.66;
}

/* text size: normal, large, extra large (set from age at setup, changeable any time) */
[data-cs-text="large"]{--cs-scale:1.15}
[data-cs-text="xl"]{--cs-scale:1.3}

/* ============ 2. THEMES ============ */
/* Every theme sets every name in this list. The test suite fails a theme that misses one, or whose text is hard to read. */

/* Console: the plain dark default (the CurbRash screen) */
.cs-root,[data-cs-theme="console"]{--cs-screen:#0b0b0d;--cs-surface:#15161a;--cs-panel:#111216;--cs-raised:#22242b;--cs-raised-2:#2a2c34;--cs-line:#2a2c33;--cs-text:#ffffff;--cs-text-soft:#e6e7ea;--cs-text-muted:#a9adb8;--cs-text-faint:#70747f;--cs-ink:#000000;--cs-on-ink:#ffffff;--cs-invert:#ffffff;--cs-on-invert:#000000;--cs-accent:#c9a45c;--cs-on-accent:#000000;--cs-accent-text:#c9a45c;--cs-accent-deep:#8d7340;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.6);--cs-font-heading:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:uppercase}
/* Professional */
[data-cs-theme="professional"]{--cs-screen:#0f1722;--cs-surface:#1a212c;--cs-panel:#161e29;--cs-raised:#272e38;--cs-raised-2:#2e353f;--cs-line:#353c45;--cs-text:#f2f5f9;--cs-text-soft:#dbdfe4;--cs-text-muted:#a3a7ae;--cs-text-faint:#757b83;--cs-ink:#000000;--cs-on-ink:#ffffff;--cs-invert:#f2f5f9;--cs-on-invert:#000000;--cs-accent:#8fb8ff;--cs-on-accent:#000000;--cs-accent-text:#8fb8ff;--cs-accent-deep:#6481b3;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.6);--cs-font-heading:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:none}
/* Professional, light */
[data-cs-theme="professional"][data-cs-mode="light"]{--cs-screen:#f3f5f8;--cs-surface:#fafbfc;--cs-panel:#f8fafb;--cs-raised:#e7e9ec;--cs-raised-2:#e0e1e4;--cs-line:#c2c4c6;--cs-text:#17202b;--cs-text-soft:#313a44;--cs-text-muted:#474e56;--cs-text-faint:#858b92;--cs-ink:#ffffff;--cs-on-ink:#17202b;--cs-invert:#17202b;--cs-on-invert:#ffffff;--cs-accent:#1d4ed8;--cs-on-accent:#ffffff;--cs-accent-text:#1d4ed8;--cs-accent-deep:#163ba2;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.45);--cs-font-heading:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:none}
/* Stadium */
[data-cs-theme="stadium"]{--cs-screen:#0a1626;--cs-surface:#152030;--cs-panel:#111d2d;--cs-raised:#232d3c;--cs-raised-2:#2a3442;--cs-line:#313b49;--cs-text:#ffffff;--cs-text-soft:#e7e8e9;--cs-text-muted:#a9adb3;--cs-text-faint:#787f88;--cs-ink:#000000;--cs-on-ink:#ffffff;--cs-invert:#ffffff;--cs-on-invert:#000000;--cs-accent:#ffc72c;--cs-on-accent:#000000;--cs-accent-text:#ffc72c;--cs-accent-deep:#b38b1f;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.6);--cs-font-heading:"Avenir Next Condensed","Arial Narrow","Roboto Condensed",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:uppercase}
/* Trailhead */
[data-cs-theme="trailhead"]{--cs-screen:#132019;--cs-surface:#1e2a23;--cs-panel:#1a2720;--cs-raised:#2b3630;--cs-raised-2:#323d37;--cs-line:#39443e;--cs-text:#f1ecdf;--cs-text-soft:#dbd8cb;--cs-text-muted:#a5a79c;--cs-text-faint:#777c72;--cs-ink:#000000;--cs-on-ink:#ffffff;--cs-invert:#f1ecdf;--cs-on-invert:#000000;--cs-accent:#e8a33d;--cs-on-accent:#000000;--cs-accent-text:#e8a33d;--cs-accent-deep:#a2722b;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.6);--cs-font-heading:"Avenir Next",Avenir,"Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-font-body:"Avenir Next",Avenir,"Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:none}
/* Workshop */
[data-cs-theme="workshop"]{--cs-screen:#1b1916;--cs-surface:#252320;--cs-panel:#22201d;--cs-raised:#32302d;--cs-raised-2:#393734;--cs-line:#3f3e3b;--cs-text:#f4efe6;--cs-text-soft:#dedad1;--cs-text-muted:#a8a49d;--cs-text-faint:#7d7974;--cs-ink:#000000;--cs-on-ink:#ffffff;--cs-invert:#f4efe6;--cs-on-invert:#000000;--cs-accent:#f2b632;--cs-on-accent:#000000;--cs-accent-text:#f2b632;--cs-accent-deep:#a97f23;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.6);--cs-font-heading:Rockwell,"Roboto Slab","Courier New",Georgia,"Iowan Old Style","Times New Roman",serif;--cs-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:uppercase}
/* Classic Study */
[data-cs-theme="classic-study"]{--cs-screen:#1f1511;--cs-surface:#29201c;--cs-panel:#261c18;--cs-raised:#352c29;--cs-raised-2:#3c3330;--cs-line:#433a37;--cs-text:#f1e7d3;--cs-text-soft:#dcd2c0;--cs-text-muted:#a89e8f;--cs-text-faint:#7d7368;--cs-ink:#000000;--cs-on-ink:#ffffff;--cs-invert:#f1e7d3;--cs-on-invert:#000000;--cs-accent:#c9a45c;--cs-on-accent:#000000;--cs-accent-text:#c9a45c;--cs-accent-deep:#8d7340;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.6);--cs-font-heading:Georgia,"Iowan Old Style","Times New Roman",serif;--cs-font-body:Georgia,"Iowan Old Style","Times New Roman",serif;--cs-case:none}
/* Sunny Porch */
[data-cs-theme="sunny-porch"]{--cs-screen:#fbf1dc;--cs-surface:#fdf9f1;--cs-panel:#fdf7ec;--cs-raised:#eee5d1;--cs-raised-2:#e7deca;--cs-line:#c9c1b0;--cs-text:#2b2118;--cs-text-soft:#443a30;--cs-text-muted:#544b40;--cs-text-faint:#93897a;--cs-ink:#ffffff;--cs-on-ink:#2b2118;--cs-invert:#2b2118;--cs-on-invert:#ffffff;--cs-accent:#c2410c;--cs-on-accent:#ffffff;--cs-accent-text:#ab390b;--cs-accent-deep:#923109;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.45);--cs-font-heading:"Avenir Next",Avenir,"Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-font-body:"Avenir Next",Avenir,"Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:none}
/* MEVP Waves */
[data-cs-theme="waves"]{--cs-screen:#090e17;--cs-surface:#141921;--cs-panel:#10151e;--cs-raised:#22262e;--cs-raised-2:#292d35;--cs-line:#30353c;--cs-text:#e6e1d6;--cs-text-soft:#d0ccc3;--cs-text-muted:#98a2b3;--cs-text-faint:#6c6d6d;--cs-ink:#000000;--cs-on-ink:#ffffff;--cs-invert:#e6e1d6;--cs-on-invert:#000000;--cs-accent:#c9a45c;--cs-on-accent:#000000;--cs-accent-text:#c9a45c;--cs-accent-deep:#8d7340;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.6);--cs-font-heading:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:none}
/* Warp */
[data-cs-theme="warp"]{--cs-screen:#0a1020;--cs-surface:#151b2a;--cs-panel:#111727;--cs-raised:#232836;--cs-raised-2:#2a2f3d;--cs-line:#313644;--cs-text:#e6e1d6;--cs-text-soft:#d0ccc4;--cs-text-muted:#98a2b3;--cs-text-faint:#6d6e72;--cs-ink:#000000;--cs-on-ink:#ffffff;--cs-invert:#e6e1d6;--cs-on-invert:#000000;--cs-accent:#9fd3ff;--cs-on-accent:#000000;--cs-accent-text:#9fd3ff;--cs-accent-deep:#6f94b3;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.6);--cs-font-heading:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:none}
/* Aurora */
[data-cs-theme="aurora"]{--cs-screen:#0b191f;--cs-surface:#162329;--cs-panel:#122026;--cs-raised:#233035;--cs-raised-2:#2b373c;--cs-line:#323e43;--cs-text:#e6e1d6;--cs-text-soft:#d0cdc4;--cs-text-muted:#98a2b3;--cs-text-faint:#6e7371;--cs-ink:#000000;--cs-on-ink:#ffffff;--cs-invert:#e6e1d6;--cs-on-invert:#000000;--cs-accent:#b48cf2;--cs-on-accent:#000000;--cs-accent-text:#b48cf2;--cs-accent-deep:#7e62a9;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.6);--cs-font-heading:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:none}
/* Constellation */
[data-cs-theme="constellation"]{--cs-screen:#0d1221;--cs-surface:#181d2b;--cs-panel:#141928;--cs-raised:#252a37;--cs-raised-2:#2c313e;--cs-line:#343845;--cs-text:#e6e1d6;--cs-text-soft:#d0ccc4;--cs-text-muted:#98a2b3;--cs-text-faint:#6f6f72;--cs-ink:#000000;--cs-on-ink:#ffffff;--cs-invert:#e6e1d6;--cs-on-invert:#000000;--cs-accent:#f2d27a;--cs-on-accent:#000000;--cs-accent-text:#f2d27a;--cs-accent-deep:#a99355;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.6);--cs-font-heading:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:none}
/* Tidepool */
[data-cs-theme="tidepool"]{--cs-screen:#0b1b25;--cs-surface:#16252f;--cs-panel:#12222c;--cs-raised:#23323b;--cs-raised-2:#2b3941;--cs-line:#323f48;--cs-text:#e6e1d6;--cs-text-soft:#d0cdc4;--cs-text-muted:#98a2b3;--cs-text-faint:#6e7475;--cs-ink:#000000;--cs-on-ink:#ffffff;--cs-invert:#e6e1d6;--cs-on-invert:#000000;--cs-accent:#7fe0d0;--cs-on-accent:#000000;--cs-accent-text:#7fe0d0;--cs-accent-deep:#599d92;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.6);--cs-font-heading:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:none}
/* Ember */
[data-cs-theme="ember"]{--cs-screen:#191213;--cs-surface:#231d1e;--cs-panel:#20191a;--cs-raised:#302a2b;--cs-raised-2:#373132;--cs-line:#3e3839;--cs-text:#e6e1d6;--cs-text-soft:#d2ccc3;--cs-text-muted:#98a2b3;--cs-text-faint:#756f6b;--cs-ink:#000000;--cs-on-ink:#ffffff;--cs-invert:#e6e1d6;--cs-on-invert:#000000;--cs-accent:#f4b860;--cs-on-accent:#000000;--cs-accent-text:#f4b860;--cs-accent-deep:#ab8143;--cs-bezel:#000000;--cs-bezel-edge:#222222;--cs-on-bezel:#ffffff;--cs-on-bezel-muted:#a9adb8;--cs-scrim:rgba(0,0,0,.6);--cs-font-heading:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cs-case:none}

/* ============ 3. PARTS ============ */

/* ---- the page and the root ---- */
/* A console fills the window like an app. The frame script puts cs-page on <html> only once the frame is up. */
html.cs-page,html.cs-page body{margin:0!important;height:100%!important;overflow:hidden!important;overscroll-behavior:none;background:#000}
.cs-root.cs-fixed{position:fixed;inset:0;overflow:hidden}
.cs-root{position:relative;font:calc(15px*var(--cs-scale))/1.35 var(--cs-font-body);color:var(--cs-on-control);background:var(--cs-band)}
/* Buttons take the frame's own font and color, on purpose (this rule outranks the parts below, as it does in the consoles it came
   from). The font written on a part is what a link or label with that class shows. */
.cs-root.cs-root *{box-sizing:border-box}
.cs-root.cs-root button{font:inherit;color:inherit;cursor:pointer}
.cs-root.cs-root input,.cs-root.cs-root select,.cs-root.cs-root textarea{font:16px var(--cs-font-body)}
.cs-root :focus-visible{outline:3px solid var(--cs-ring);outline-offset:2px}
.cs-root [hidden]{display:none!important}

/* ---- the frame: band, top line, rail, bezel, screen, deck ---- */
.cs-frame{position:absolute;inset:0;display:flex;flex-direction:column;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:hidden}
.cs-top{flex:0 0 auto;display:flex;align-items:center;gap:var(--cs-space-5);height:var(--cs-top-h);overflow:hidden}
.cs-sitemark{flex:0 0 auto;display:flex;align-items:center;gap:var(--cs-space-4);white-space:nowrap;font:800 calc(15px*var(--cs-scale)) var(--cs-font-heading);text-transform:var(--cs-case);color:var(--cs-on-band)}
.cs-logo-box{flex:0 0 auto;display:block;height:44px;border-radius:var(--cs-radius-xs);background:var(--cs-logo-box);overflow:hidden}
.cs-logo-box .cs-logo{display:block;height:100%;width:auto;max-width:280px}
@media (min-width:701px) and (min-height:521px){.cs-top{height:var(--cs-top-h-wide)}.cs-logo-box{height:56px}}

/* who is signed in, and the sign-in or sign-out control */
.cs-who{margin-left:auto;display:flex;align-items:center;gap:var(--cs-space-3);min-width:0}
.cs-who select,.cs-who button,.cs-who a{position:relative;height:var(--cs-control-h);border-radius:var(--cs-radius-md);border:1px solid var(--cs-control-edge);background:var(--cs-control);color:var(--cs-on-control);padding:0 10px;font:600 calc(13px*var(--cs-scale)) var(--cs-font-body);text-decoration:none;display:inline-flex;align-items:center;max-width:46vw}
.cs-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--cs-control-solid);border:2px solid var(--cs-on-control);display:inline-flex;align-items:center;justify-content:center;font:900 calc(15px*var(--cs-scale)) var(--cs-font-body)}
.cs-me{display:flex;flex-direction:column;line-height:1.1;min-width:0;font:700 calc(12px*var(--cs-scale)) var(--cs-font-body);white-space:nowrap;overflow:hidden;color:var(--cs-on-band)}
.cs-me small{opacity:.85;font-weight:600}
/* "Your console": the badge with the person's name, in their ring color */
.cs-badge{position:relative;flex:0 0 auto;height:var(--cs-control-h);border-radius:var(--cs-radius-pill);border:2px solid var(--cs-ring);background:var(--cs-control);padding:0 10px;display:inline-flex;align-items:center;gap:var(--cs-space-3);white-space:nowrap;max-width:46vw}
.cs-badge i{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--cs-ring)}
.cs-badge b{background:var(--cs-invert);color:var(--cs-on-invert);border-radius:var(--cs-radius-md);padding:0 6px;font-weight:900}

/* the toolbar of small counters in the top line */
.cs-toolbar{flex:1 1 0;min-width:0;display:flex;gap:var(--cs-space-3);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:5px 6px;margin:-5px 0}
.cs-toolbar::-webkit-scrollbar{display:none}
.cs-tool{position:relative;flex:0 0 auto;height:var(--cs-control-h);border-radius:var(--cs-radius-md);border:1px solid var(--cs-control-edge);background:var(--cs-control);padding:0 9px;font:700 calc(12px*var(--cs-scale)) var(--cs-font-body);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.cs-tool i{font-style:normal;background:var(--cs-on-control);color:var(--cs-control-solid);border-radius:var(--cs-radius-md);padding:0 6px;font-weight:900}

/* the middle: the rail of mini cards on the left, the bezel on the right */
.cs-mid{flex:1 1 0;min-height:0;display:flex;gap:var(--cs-space-4);overflow:hidden}
.cs-rail{flex:0 0 var(--cs-rail-w);display:flex;flex-direction:column;gap:var(--cs-space-3);overflow:hidden}
.cs-mini{flex:1 1 0;min-height:var(--cs-tap);max-height:86px;border-radius:var(--cs-radius-lg);border:2px solid var(--cs-control-edge-2);background:var(--cs-control);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--cs-space-1);font:700 calc(11px*var(--cs-scale)) var(--cs-font-body);text-align:center;padding:2px;overflow:hidden}
.cs-mini svg{width:24px;height:24px}
.cs-bezel{--cs-ctx:var(--cs-on-bezel);flex:1 1 0;min-width:0;background:var(--cs-bezel);color:var(--cs-on-bezel);border-radius:var(--cs-radius-bezel);padding:var(--cs-space-6);box-shadow:var(--cs-shadow-bezel);overflow:hidden;display:flex;flex-direction:column;gap:var(--cs-space-4)}
/* the ring: shown when a signed-in person has their own color */
.cs-root[data-cs-ring] .cs-bezel{box-shadow:inset 0 0 0 2px var(--cs-ring),0 4px 0 var(--cs-control-edge)}
.cs-screen{--cs-ctx:var(--cs-text);position:relative;flex:1 1 0;min-width:0;border-radius:var(--cs-radius-screen);background:radial-gradient(120% 90% at 80% 0,var(--cs-glow) 0,var(--cs-screen) 55%);color:var(--cs-text);box-shadow:var(--cs-shadow-screen);overflow:hidden;display:flex;flex-direction:column;padding:var(--cs-space-5);gap:var(--cs-space-4)}

/* banners inside the screen: previews, and the yellow super admin bar */
.cs-banner{flex:0 0 auto;background:var(--cs-admin);color:var(--cs-on-admin);border-radius:var(--cs-radius-sm);padding:4px 10px;font:800 calc(12px*var(--cs-scale)) var(--cs-font-body);display:flex;align-items:center;gap:var(--cs-space-4);overflow:hidden;white-space:nowrap}
.cs-banner button{position:relative;margin-left:auto;background:var(--cs-control-solid);color:var(--cs-on-control);border:0;border-radius:var(--cs-radius-xs);height:28px;padding:0 8px;font:700 calc(12px*var(--cs-scale)) var(--cs-font-body)}
.cs-banner.cs-super{background:var(--cs-control-solid);color:var(--cs-admin);border:2px solid var(--cs-admin)}
.cs-banner select{height:28px;border-radius:var(--cs-radius-xs);border:0;margin-left:auto;font:700 calc(12px*var(--cs-scale)) var(--cs-font-body)}

/* the deck: the person's own control keys along the bottom */
.cs-deck{flex:0 0 auto;display:flex;gap:var(--cs-space-3);justify-content:center;padding-top:var(--cs-space-4);overflow:hidden}
.cs-key{flex:0 1 110px;min-width:var(--cs-tap);height:var(--cs-key-h);border-radius:var(--cs-radius-lg);border:2px solid var(--cs-control-edge-3);background:var(--cs-key);display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 calc(10px*var(--cs-scale)) var(--cs-font-body);gap:1px;overflow:hidden;white-space:nowrap}
.cs-key svg{width:20px;height:20px}
.cs-key.cs-on{background:var(--cs-brand);color:var(--cs-on-brand)}

/* ---- the landing card (the site's home card) ---- */
.cs-hero{flex:1 1 0;min-height:0;border:2px solid var(--cs-brand);border-radius:var(--cs-radius-xl);background:linear-gradient(105deg,var(--cs-screen) 0,var(--cs-surface) 60%,var(--cs-glow) 100%);overflow:hidden;display:flex;position:relative}
.cs-hero-text{position:relative;z-index:var(--cs-z-face);flex:1 1 0;min-width:0;padding:clamp(8px,2.2vh,22px) clamp(10px,2.4vw,28px);display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1.2vh,12px);overflow:hidden}
.cs-hero h1{margin:0;font:900 calc(clamp(14px,3.3vh,32px)*var(--cs-scale))/1.08 var(--cs-font-heading);text-transform:var(--cs-case)}
.cs-hero h1 span{display:block;color:var(--cs-brand-text)}
.cs-hero p{margin:0;color:var(--cs-text-soft);font-size:calc(clamp(12px,2.1vh,17px)*var(--cs-scale))}
.cs-hero-art{position:absolute;inset:0;overflow:hidden;color:var(--cs-line);display:flex;align-items:center;justify-content:flex-end}
.cs-hero-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.cs-hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--cs-screen) 93%,transparent) 0,color-mix(in srgb,var(--cs-screen) 78%,transparent) 34%,transparent 66%)}
.cs-hero-art svg{height:120%;width:auto;margin-right:4%}
.cs-hero.cs-pic .cs-hero-text{max-width:62%}
.cs-hero-text.cs-tight{padding-top:6px;padding-bottom:6px;gap:4px}
.cs-root.cs-root .cs-hero-text.cs-tight h1{font-size:calc(14px*var(--cs-scale))}
.cs-small .cs-hero{flex:0 0 33%}
.cs-small .cs-hero p{display:none}

/* ---- buttons ---- */
.cs-cta{display:flex;gap:var(--cs-space-4);flex-wrap:wrap}
.cs-btn{min-height:var(--cs-btn-h);border-radius:10px;border:2px solid var(--cs-ctx,#fff);background:transparent;padding:0 14px;font:800 calc(13px*var(--cs-scale)) var(--cs-font-body);text-transform:var(--cs-case);letter-spacing:.3px;display:inline-flex;align-items:center;gap:var(--cs-space-3);text-decoration:none}
.cs-btn.cs-primary{background:var(--cs-brand);border-color:var(--cs-brand);color:var(--cs-on-brand)}
.cs-btn.cs-sm{position:relative;min-height:var(--cs-btn-sm-h);font-size:calc(12px*var(--cs-scale));padding:0 10px}
.cs-btn:disabled{opacity:.5}
.cs-root.cs-root .cs-btn.cs-primary,.cs-root.cs-root .cs-key.cs-on{color:var(--cs-on-brand)}

/* ---- section chips, the sideways row, the card ---- */
.cs-chips{flex:0 0 auto;display:flex;gap:var(--cs-space-3);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:5px 0;margin:-5px 0}
.cs-chips::-webkit-scrollbar,.cs-row::-webkit-scrollbar{display:none}
.cs-chip{position:relative;flex:0 0 auto;height:var(--cs-chip-h);border-radius:17px;border:1px solid var(--cs-line);background:var(--cs-surface);padding:0 12px;font:700 calc(12px*var(--cs-scale)) var(--cs-font-body);color:var(--cs-text-muted)}
.cs-root.cs-root .cs-chip.cs-on{background:var(--cs-invert);color:var(--cs-on-invert);border-color:var(--cs-invert)}
/* a row moves sideways only; with data-cs-loop the frame script makes it a wheel that loops both ways */
.cs-row{flex:1 1 0;min-height:0;display:flex;gap:var(--cs-space-5);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior:contain}
.cs-first .cs-row{flex:0 0 clamp(84px,19vh,150px)}
.cs-card{flex:0 0 auto;height:100%;aspect-ratio:var(--cs-card-ratio);max-width:46vw;border-radius:var(--cs-radius-lg);border:2px solid var(--cs-line);background:linear-gradient(180deg,var(--cs-raised) 0,var(--cs-panel) 100%);position:relative;overflow:hidden}
.cs-card-main{position:absolute;inset:0;border:0;background:none;display:flex;flex-direction:column;align-items:stretch;padding:0;text-align:left}
.cs-explain{position:absolute;top:6px;left:6px;z-index:var(--cs-z-face);height:var(--cs-explain-h);border-radius:var(--cs-radius-sm);border:1px solid var(--cs-line);background:var(--cs-ink);padding:0 8px;font:700 calc(11px*var(--cs-scale)) var(--cs-font-body)}
.cs-root.cs-root .cs-explain,.cs-root.cs-root .cs-tag{color:var(--cs-on-ink)}
.cs-card .cs-toggle{position:absolute;right:8px;bottom:8px;z-index:var(--cs-z-face)}
/* the start line: the first card of a row carries the brand color along its top edge */
.cs-card:first-child,.cs-card.cs-start{border-top-color:var(--cs-brand)}
.cs-card-pic{flex:1 1 0;min-height:0;position:relative;display:block;overflow:hidden;background:linear-gradient(160deg,var(--cs-raised-2),var(--cs-panel))}
.cs-card-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cs-card-pic .cs-card-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--cs-mark);opacity:.9}
.cs-card-pic .cs-card-icon svg{height:56%;width:auto;max-height:56px}
.cs-card-text{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--cs-space-1);padding:5px 8px 7px;min-width:0}
.cs-has-switch .cs-card-text{padding-bottom:42px}
.cs-card.cs-lock .cs-card-pic img{filter:grayscale(1) brightness(.55)}
.cs-card b{font:800 calc(clamp(11px,1.9vh,15px)*var(--cs-scale))/1.1 var(--cs-font-body);text-transform:var(--cs-case)}
.cs-card small{color:var(--cs-text-muted);font-size:calc(clamp(10px,1.5vh,12px)*var(--cs-scale));line-height:1.15;max-height:2.4em;overflow:hidden}
.cs-card.cs-lock{border-style:dashed}
.cs-card.cs-lock .cs-card-icon{color:var(--cs-text-faint)}
.cs-card b,.cs-card small{display:block;overflow:hidden;overflow-wrap:anywhere}
.cs-card b{max-height:2.2em}
.cs-tag{position:absolute;top:36px;left:6px;background:var(--cs-ink);border:1px solid var(--cs-line);border-radius:var(--cs-radius-sm);padding:1px 6px;font:700 calc(10px*var(--cs-scale)) var(--cs-font-body);color:var(--cs-on-ink)}
/* ---- a list is a sideways row of cards (never rows stacked up and down) ----
   The frame script builds it from an array or from list markup: each item is its own card, and the item's action is the card's
   button. Paging chips show when the row holds more than fits. An empty list and a loading list have their own look. */
.cs-list{display:flex;flex-direction:column;gap:var(--cs-space-3);min-width:0}
.cs-list-row{flex:none;height:var(--cs-list-h);min-height:0}
.cs-list-card{display:flex;flex-direction:column}
.cs-list-card .cs-card-pic{flex:1 1 0}
.cs-list-card .cs-card-text{padding-bottom:4px}
.cs-list-card .cs-list-action{flex:0 0 auto;min-height:var(--cs-tap);margin:0 6px 6px;justify-content:center;text-align:center;white-space:nowrap;overflow:hidden}
.cs-list-empty{flex:1 1 auto;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;border:2px dashed var(--cs-line);border-radius:var(--cs-radius-lg);color:var(--cs-text-muted)}
.cs-list-card.cs-wait{border-style:dashed;background:linear-gradient(90deg,var(--cs-raised) 0,var(--cs-surface) 50%,var(--cs-raised) 100%);background-size:200% 100%}
.cs-list-pages{justify-content:center;margin:0;min-height:var(--cs-tap)}
.cs-list-pages[data-cs-off]{visibility:hidden}
/* on the smallest phones a list gives up its paging chips before its buttons get any smaller (the row still moves by hand) */
.cs-list[data-cs-tight] .cs-list-pages{display:none}
.cs-list-pages .cs-chip{min-width:var(--cs-tap)}

/* ---- the poster card: ONE format, the art and the title treatment vary ----
   The card's shape and the places for art, title, line and tag never change. With data-cs-treatment the art fills the whole card
   and the title is real text set over it (art files carry no words), on a plate that keeps it readable over any picture.
   poster: big title low on the left, like a film poster.   book: title across the top in a serif, like a book cover.
   album: title on a solid label, like a record sleeve. */
.cs-card[data-cs-treatment] .cs-card-pic{position:absolute;inset:0}
.cs-card[data-cs-treatment] .cs-card-text{position:absolute;left:0;right:0;bottom:0;z-index:var(--cs-z-face);background:var(--cs-title-scrim);color:var(--cs-on-ink);padding:6px 8px 8px}
.cs-card[data-cs-treatment] .cs-card-text small{color:var(--cs-on-ink)}
.cs-card[data-cs-treatment] .cs-card-icon{align-items:flex-start;padding-top:22%}
.cs-card[data-cs-treatment] .cs-tag{z-index:var(--cs-z-over)}
.cs-card[data-cs-treatment="book"] .cs-tag{top:auto;bottom:8px}
.cs-card[data-cs-treatment="poster"] .cs-card-text::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;background:linear-gradient(0deg,var(--cs-title-scrim),transparent);pointer-events:none}
.cs-card[data-cs-treatment="poster"] b{font-family:var(--cs-font-heading);text-transform:uppercase;letter-spacing:.4px}
.cs-card[data-cs-treatment="book"] .cs-card-text{top:0;bottom:auto;text-align:center;padding:36px 8px 7px;border-bottom:2px solid var(--cs-brand)}
.cs-card[data-cs-treatment="book"] b{font-family:var(--cs-font-serious);text-transform:none;font-weight:700}
.cs-card[data-cs-treatment="book"] .cs-card-icon{align-items:flex-end;padding:0 0 12%}
.cs-card[data-cs-treatment="album"] .cs-card-text{left:6px;right:6px;bottom:6px;border-radius:var(--cs-radius-xs);border-left:4px solid var(--cs-brand);background:var(--cs-ink);padding:5px 8px 6px}
.cs-card[data-cs-treatment="album"] b{font-family:var(--cs-font-body);text-transform:none;letter-spacing:-.2px;font-weight:900}
/* placeholder art, drawn in code, until an art file is dropped into the card's slot */
.cs-card[data-cs-treatment] .cs-card-pic{background:radial-gradient(90% 70% at 70% 20%,var(--cs-glow),transparent 70%),repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--cs-line) 45%,transparent) 14px 15px),linear-gradient(160deg,var(--cs-raised-2),var(--cs-panel))}
/* No card title is cut off: each title carries the length of its longest word (--w) and is sized so that word fits the card. */
@media (min-height:521px){.cs-card-text{container-type:inline-size}.cs-card b{font-size:max(9.5px,min(calc(clamp(11px,1.9vh,15px)*var(--cs-scale)),calc(100cqw / (var(--w,8) * .7))));max-height:3.3em}}

/* ---- the pop-up (panel): opens over the screen, turns pages instead of scrolling ---- */
.cs-pop{position:absolute;inset:8px;z-index:var(--cs-z-pop);border-radius:var(--cs-radius-xl);border:2px solid var(--cs-brand);background:var(--cs-panel);color:var(--cs-text);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--cs-shadow-pop)}
.cs-pop[hidden]{display:none}
.cs-pop-head{flex:0 0 auto;display:flex;align-items:center;gap:var(--cs-space-4);padding:8px 10px;border-bottom:1px solid var(--cs-line);background:var(--cs-screen)}
.cs-pop-head h2{margin:0;font:800 calc(12px*var(--cs-scale)) var(--cs-font-heading);text-transform:var(--cs-case);flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-pop-body{flex:1 1 0;min-height:0;overflow:hidden;padding:10px;position:relative}
.cs-page,.cs-fill{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--cs-space-4);align-content:start}
.cs-page>*,.cs-fill>*{grid-column:1/-1;min-width:0}
.cs-page>.cs-tile,.cs-fill>.cs-tile{grid-column:auto}
.cs-page>.cs-tile.cs-wide{grid-column:1/-1}
.cs-tile.cs-wide small{display:block;max-height:5.6em;overflow:hidden}
.cs-page[hidden]{display:none}
.cs-pop-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 10px;border-top:1px solid var(--cs-line);background:var(--cs-screen);min-height:56px}
.cs-pop-foot .cs-spacer{flex:1 1 0}
.cs-pop-foot .cs-count{color:var(--cs-text-muted);font:700 calc(12px*var(--cs-scale)) var(--cs-font-body)}
.cs-msg{color:var(--cs-text);font-weight:700;font-size:calc(13px*var(--cs-scale));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 60px}
.cs-msg:empty{flex-basis:0}
.cs-pop-foot .cs-input{flex:1 1 120px;width:auto}
.cs-tile{word-break:break-word}
/* the Close bar: on a phone the way out is one full-width bar */
.cs-close-bar{display:none}
/* the close X of a pop-up card */
.cs-btn.cs-x{min-width:var(--cs-btn-sm-h);padding:0;justify-content:center;font-size:calc(18px*var(--cs-scale));line-height:1}

/* ---- a page as a pop-up card: people never leave their console ----
   Size follows content: a short note gets a small card, a long legal text gets the large one and turns pages. */
.cs-pop[data-cs-size="small"]{inset:0;margin:auto;width:min(calc(100% - 16px),440px);height:min(calc(100% - 16px),300px)}
.cs-pop[data-cs-size="medium"]{inset:0;margin:auto;width:min(calc(100% - 16px),720px);height:min(calc(100% - 16px),480px)}
/* header art: every card gets graphics. A named slot; a code-drawn placeholder shows until an art file is dropped in. */
.cs-pop-art{flex:0 0 auto;height:clamp(40px,11vh,92px);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--cs-mark);background:linear-gradient(135deg,var(--cs-glow),var(--cs-surface));border-bottom:1px solid var(--cs-line)}
.cs-pop-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cs-pop-art svg{height:68%;width:auto}
.cs-pop[data-cs-size="small"] .cs-pop-art{height:44px}
/* serious cards: calm, official, lightly stylized. No brand color, no capitals, a serif heading, a fine double edge. */
.cs-serious{--cs-case:none}
.cs-pop.cs-serious{border-color:var(--cs-serious-line);outline:1px solid var(--cs-serious-line);outline-offset:-7px}
.cs-pop.cs-serious .cs-pop-head h2{font:700 calc(15px*var(--cs-scale)) var(--cs-font-serious);letter-spacing:.2px}
.cs-pop.cs-serious .cs-pop-art,.cs-card.cs-serious .cs-card-pic{color:var(--cs-serious-accent);background:repeating-linear-gradient(0deg,transparent 0 9px,color-mix(in srgb,var(--cs-serious-line) 22%,transparent) 9px 10px),linear-gradient(180deg,var(--cs-raised),var(--cs-panel))}
.cs-card.cs-serious .cs-card-icon{color:var(--cs-serious-accent)}
.cs-card.cs-serious,.cs-card.cs-serious:first-child{border-color:var(--cs-serious-line)}
.cs-card.cs-serious b{font-family:var(--cs-font-serious)}
.cs-pop.cs-serious .cs-text,.cs-pop.cs-serious .cs-prose{font-family:var(--cs-font-serious);color:var(--cs-text);line-height:1.5}
.cs-pop.cs-serious .cs-btn.cs-primary,.cs-pop.cs-serious .cs-close-bar{background:var(--cs-invert);border-color:var(--cs-invert)}
.cs-root.cs-root .cs-pop.cs-serious .cs-btn.cs-primary,.cs-root.cs-root .cs-pop.cs-serious .cs-close-bar{color:var(--cs-on-invert)}
/* words brought in from a page of the site */
.cs-prose{margin:0;color:var(--cs-text-soft);overflow-wrap:anywhere}
h1.cs-prose,h2.cs-prose,h3.cs-prose,h4.cs-prose{font:800 calc(14px*var(--cs-scale)) var(--cs-font-heading);color:var(--cs-text)}
.cs-pop.cs-serious h1.cs-prose,.cs-pop.cs-serious h2.cs-prose,.cs-pop.cs-serious h3.cs-prose,.cs-pop.cs-serious h4.cs-prose{font-family:var(--cs-font-serious)}
ul.cs-prose,ol.cs-prose{padding-left:1.3em}
.cs-prose a{color:inherit;text-decoration:underline}
.cs-pop-view{display:block;border:0;width:100%;height:100%;background:var(--cs-invert)}
/* a pop-up card on a page that is not in the frame yet: it lies over the page, and the page behind does not scroll */
html.cs-locked,html.cs-locked body{overflow:hidden!important}
.cs-root.cs-overlay{position:fixed;inset:0;z-index:2147483000;background:var(--cs-scrim);color:var(--cs-text);--cs-ctx:var(--cs-text)}
.cs-overlay>.cs-pop{inset:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));box-shadow:0 12px 40px var(--cs-control-edge-3)}
.cs-overlay>.cs-pop[data-cs-size="small"],.cs-overlay>.cs-pop[data-cs-size="medium"]{inset:0}

/* ---- visiting another storefront: a light blend of its look over the person's own theme ---- */
.cs-root[data-cs-storefront] .cs-screen{isolation:isolate}
.cs-root[data-cs-storefront] .cs-screen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--cs-tint) 0,transparent 62%)}
.cs-connected{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:700 calc(11px*var(--cs-scale)) var(--cs-font-body);color:var(--cs-on-band);opacity:.9}

/* a tile inside a pop-up: a list item is a small card with art, never a text row */
.cs-tile{border:2px solid var(--cs-line);border-radius:var(--cs-radius-lg);background:linear-gradient(180deg,var(--cs-raised) 0,var(--cs-panel) 100%);display:flex;flex-direction:column;gap:var(--cs-space-3);overflow:hidden;padding-bottom:8px}
.cs-tile b{font-weight:800}
.cs-tile .cs-tile-art{flex:0 0 auto;height:46px;display:flex;align-items:center;justify-content:center;color:var(--cs-mark);background:linear-gradient(135deg,var(--cs-glow),var(--cs-surface))}
.cs-tile .cs-tile-art svg{width:30px;height:30px}
.cs-tile .cs-tile-text{min-width:0;padding:0 10px}
.cs-tile .cs-tile-actions{display:flex;flex-wrap:wrap;gap:var(--cs-space-3);align-items:center;padding:0 10px}
.cs-tile>input[type=checkbox]{margin:8px 10px 0}
.cs-tile>label,.cs-tile>b,.cs-tile>small{padding:0 10px}
.cs-tile small,.cs-muted{color:var(--cs-text-muted)}
.cs-tile img{width:44px;height:44px;object-fit:cover;border-radius:var(--cs-radius-xs);border:1px solid var(--cs-line)}
.cs-tile.cs-photo-tile>img{display:block;width:100%;height:clamp(64px,17vh,150px);border:0;border-radius:0}
.cs-tile .cs-check{display:flex;align-items:center;gap:var(--cs-space-4);padding:0 10px;min-height:var(--cs-tap);font:700 calc(13px*var(--cs-scale)) var(--cs-font-body)}
.cs-tile .cs-check input{width:24px;height:24px;flex:0 0 auto}

/* ---- typing boxes ---- */
.cs-field{display:flex;flex-direction:column;gap:3px}
.cs-field label{font:700 calc(12px*var(--cs-scale)) var(--cs-font-body);color:var(--cs-text-muted)}
.cs-field input,.cs-field select,.cs-field textarea,.cs-input{width:100%;min-height:var(--cs-tap);border-radius:var(--cs-radius-md);border:1px solid var(--cs-line);background:var(--cs-screen);color:var(--cs-text);padding:8px 10px;resize:none}
.cs-field textarea{height:76px}
.cs-input.cs-input-sm{width:96px;min-height:36px;padding:4px 8px}
.cs-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--cs-space-4)}

/* ---- words inside a pop-up ---- */
.cs-text{margin:0;color:var(--cs-text-soft)}
.cs-h3{margin:0;font:800 calc(12px*var(--cs-scale)) var(--cs-font-heading);text-transform:var(--cs-case);color:var(--cs-text)}
.cs-h3 span{color:var(--cs-brand-text)}
.cs-bubble{max-width:86%;border-radius:var(--cs-radius-lg);padding:7px 10px;background:var(--cs-raised);justify-self:start}
.cs-bubble.cs-mine{justify-self:end;background:var(--cs-brand);color:var(--cs-on-brand)}

/* ---- the on/off switch ---- */
.cs-toggle{width:54px;height:30px;border-radius:15px;border:2px solid var(--cs-line);background:var(--cs-screen);position:relative;flex:0 0 auto}
.cs-toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--cs-text-faint)}
.cs-toggle.cs-on{background:var(--cs-brand);border-color:var(--cs-brand)}
.cs-toggle.cs-on::after{left:27px;background:var(--cs-on-control)}

/* ---- the Ask bar, the line under it, and the footer (inside the bezel, under the screen) ---- */
.cs-ask{flex:0 0 auto;display:flex;gap:var(--cs-space-3);align-items:center;overflow:hidden}
.cs-ask input[type=text]{flex:1 1 0;min-width:0;height:44px;border-radius:22px;border:2px solid var(--cs-ring);background:var(--cs-screen);color:var(--cs-text);padding:0 14px}
.cs-ask .cs-btn{flex:0 0 auto}
.cs-under{flex:0 0 auto;display:flex;align-items:center;gap:var(--cs-space-3);overflow:hidden;margin-top:-3px}
.cs-suggestions{flex:1 1 0;min-width:0;display:flex;gap:var(--cs-space-3);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.cs-suggestions::-webkit-scrollbar{display:none}
.cs-suggestion{flex:0 0 auto;height:var(--cs-suggest-h);border-radius:14px;border:1px solid var(--cs-line);background:var(--cs-surface);padding:0 10px;font:600 calc(12px*var(--cs-scale)) var(--cs-font-body);color:var(--cs-text-soft);white-space:nowrap}
.cs-root.cs-root .cs-suggestion{color:var(--cs-text)}
.cs-ai-line{flex:0 0 auto;margin-left:auto;font-size:11px;line-height:normal;color:var(--cs-on-bezel-muted)}
/* The footer on every page: the AI notice, the terms and privacy links, and "Powered by MEVP Tools". 11px, like the big sites. */
.cs-footer{flex:0 0 auto;font-size:11px;line-height:normal;color:var(--cs-on-bezel-muted);overflow:hidden;border-top:1px solid var(--cs-line);padding-top:4px;margin-top:-3px}
.cs-footer{font-size:var(--cs-footer-size)}
.cs-footer b{font-weight:700}
/* the text-only footer's three pieces: the disclaimer words, the copyright line, the small links (each opens as a pop-up card) */
.cs-footer-text,.cs-footer-copy,.cs-footer-links{font-size:var(--cs-footer-size);line-height:normal}
.cs-footer-copy{white-space:nowrap}
.cs-footer-links{white-space:nowrap}
/* the same footer on a page that is not in the frame: small, muted, and it never makes the page scroll */
.cs-footer.cs-footer-page{position:fixed;left:0;right:0;bottom:0;z-index:var(--cs-z-top);margin:0;padding:3px 10px max(3px,env(safe-area-inset-bottom));max-height:3.9em;background:var(--cs-bezel);color:var(--cs-on-bezel-muted);border-top:1px solid var(--cs-line)}
.cs-root.cs-root .cs-footer a,.cs-root.cs-root .cs-footer button{color:inherit;font:inherit;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}

/* ---- tap targets ----
   Small controls keep their size on screen, and their touch area reaches 44px with an unseen edge around them. */
.cs-btn.cs-x::before,.cs-who button::before,.cs-who a::before,.cs-badge::before,.cs-tool::before,.cs-chip::before,.cs-btn.cs-sm::before,.cs-explain::before,.cs-toggle::before,.cs-banner button::before{content:"";position:absolute;left:0;right:0;top:50%;height:var(--cs-tap);min-width:var(--cs-tap);transform:translateY(-50%)}
.cs-explain::before,.cs-toggle::before{left:50%;right:auto;width:max(100%,var(--cs-tap));transform:translate(-50%,-50%)}
.cs-explain::before{top:-6px;transform:translateX(-50%)}
/* the platform's own mic button (voice typing, added beside typing boxes by MEVP Tools) gets the same unseen edge */
.cs-root .mevp-speak-btn{position:relative}
.cs-root .mevp-speak-btn::before{content:"";position:absolute;left:50%;top:50%;width:var(--cs-tap);height:var(--cs-tap);transform:translate(-50%,-50%)}

/* ============ 4. SMALL AND SHORT WINDOWS, MOTION ============ */

/* a short, wide window (a phone held sideways): the deck moves to a column on the right, so the screen keeps its height */
@media (max-height:520px) and (min-width:600px){
.cs-frame{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr)}
.cs-top{grid-column:1/-1}
.cs-mid{grid-column:1;grid-row:2}
.cs-deck{grid-column:2;grid-row:2;flex-direction:column;justify-content:flex-start;padding:0 0 0 6px}
.cs-root.cs-root .cs-key{flex:1 1 0;width:64px;min-width:var(--cs-tap);min-height:var(--cs-tap);max-height:60px;height:auto;font-size:9px;line-height:1;white-space:normal;text-align:center}
.cs-pop{inset:3px}
.cs-popped .cs-suggestions{display:none}
.cs-root.cs-root .cs-page>.cs-tile,.cs-root.cs-root .cs-fill>.cs-tile{grid-column:1/-1}
}
/* a phone held upright */
@media (max-width:700px){
.cs-under{flex-wrap:wrap;gap:3px 6px}
.cs-ai-line{flex:1 1 100%;margin-left:0}
.cs-logo-box{height:40px}
.cs-hero.cs-pic .cs-hero-text{max-width:none}
.cs-hero-art::after{background:color-mix(in srgb,var(--cs-screen) 72%,transparent)}
.cs-hero .cs-cta{flex-wrap:nowrap}
.cs-root.cs-root .cs-hero .cs-btn{flex:0 1 auto;min-width:var(--cs-tap);padding:0 9px;font-size:12px;line-height:1.1;letter-spacing:0;text-align:center;justify-content:center}
}
@media (max-height:520px){
.cs-logo-box{height:30px}
.cs-suggestion{height:24px}
.cs-bezel{padding:5px;gap:5px}
.cs-screen{padding:5px;gap:5px}
.cs-under,.cs-footer{margin-top:0}
.cs-footer{padding-top:2px}
.cs-chip{height:28px}
.cs-root.cs-root .cs-first .cs-row{flex-basis:66px}
.cs-root.cs-root .cs-hero .cs-hero-text{flex-direction:row;flex-wrap:wrap;align-items:center;align-content:center;padding:0 10px;gap:1px 10px;max-width:none}
.cs-root.cs-root .cs-hero h1{flex:0 1 auto;min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-hero h1 span{display:inline;margin-left:6px}
.cs-hero p{display:none}
.cs-hero .cs-cta{flex:0 0 auto;flex-wrap:nowrap;margin-left:auto}
.cs-root.cs-root .cs-hero .cs-btn{padding:0 9px;font-size:11px;white-space:nowrap}
.cs-card small{display:none}
.cs-explain{height:20px;font-size:10px;top:3px;left:3px;padding:0 5px}
.cs-card-text{padding:2px 5px 4px}
}
@media (max-width:700px){
.cs-mid{flex-direction:column;gap:var(--cs-space-3)}
.cs-rail{flex:0 0 50px;flex-direction:row;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.cs-rail::-webkit-scrollbar{display:none}
.cs-mini{flex:0 0 76px;max-height:none}
.cs-bezel{border-radius:16px;padding:6px}
.cs-screen{padding:6px;border-radius:11px}
.cs-sitemark{font-size:calc(20px*var(--cs-scale))}
.cs-sitemark small{display:none}
.cs-page,.cs-fill{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.cs-me{display:none}
.cs-ask .cs-btn span{display:none}
.cs-key{font-size:9px}
.cs-two{grid-template-columns:1fr}
.cs-pop{inset:3px}
.cs-pop-foot .cs-btn{padding:0 8px;font-size:11px}
.cs-pop-body{padding:8px}
/* the Close bar */
.cs-close-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:0;border-top:2px solid var(--cs-brand);background:var(--cs-brand);font-weight:800;letter-spacing:.3px;text-transform:var(--cs-case)}
.cs-root.cs-root .cs-close-bar{color:var(--cs-on-brand)}
.cs-has-close-bar .cs-pop-head .cs-close{display:none}
}
@media (max-height:520px){
.cs-ask input[type=text]{height:38px}
.cs-ask .cs-btn{min-height:38px}
.cs-tile .cs-tile-art{height:26px}
.cs-tile .cs-tile-art svg{width:20px;height:20px}
.cs-top{height:36px}
.cs-rail{flex-basis:70px}
.cs-small .cs-hero{flex-basis:26%}
.cs-deck{padding-top:4px}
.cs-key{height:44px}
.cs-first .cs-row{flex-basis:84px}
.cs-field textarea{height:44px}
.cs-pop-head{padding:4px 8px}
.cs-pop-foot{padding:4px 8px;min-height:44px}
.cs-pop-body{padding:6px}
.cs-pop-foot .cs-btn.cs-sm,.cs-pop-head .cs-btn.cs-sm{min-height:34px}
}

/* motion: a card presses in like a button; a pop-up eases in. People who ask for less motion get none. */
@media (prefers-reduced-motion:no-preference){
.cs-root[data-cs-blending]{transition:background-color var(--cs-motion-blend)}
.cs-root[data-cs-storefront] .cs-screen::before{animation:cs-blend-in var(--cs-motion-blend) var(--cs-ease)}
.cs-card{transition:transform var(--cs-motion-press)}
.cs-list-card.cs-wait{animation:cs-wait 1.4s linear infinite}
.cs-card:active{transform:scale(.97)}
.cs-pop.cs-ease-in{animation:cs-pop-in var(--cs-motion-panel) var(--cs-ease)}
}
@keyframes cs-pop-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes cs-blend-in{from{opacity:0}to{opacity:1}}
@keyframes cs-wait{from{background-position:200% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
.cs-root *,.cs-root *::before,.cs-root *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ============ 1.0.2: Console Style v2.4 (Mike, Nov 12) ============
   The logo corner, the top menu, the My account menu, edge arrows on side-scrolling rows, and the pop-out poster card.
   Nothing here may spill past a card, panel or screen edge at any size (360 px phones included). */
/* the logo corner: a bold piece in the brand's colors wrapping the top-left corner; it flows into the top menu (a stripe along the
   top line) and the side rail (a stripe down its edge). The logo file itself is only sized by height: never stretched or recolored. */
.cs-frame{--cs-corner-a:var(--cs-band);--cs-corner-b:var(--cs-band);--cs-po-origin:center}
.cs-has-corner .cs-top{position:relative;padding-left:0}
.cs-has-corner .cs-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--cs-corner-a) 0,var(--cs-corner-b) 30%,transparent 85%);pointer-events:none}
.cs-has-corner .cs-rail{position:relative;box-shadow:inset 3px 0 0 var(--cs-corner-b)}
.cs-corner{position:relative;flex:0 1 auto;min-width:0;max-width:46%;height:100%;display:flex;align-items:center;gap:10px;padding:4px 18px 4px 6px;overflow:hidden;isolation:isolate}
.cs-corner-plate{position:absolute;inset:0;z-index:-1;border-radius:14px 4px 4px 4px;background:linear-gradient(115deg,#000 0 30%,var(--cs-corner-b) 30% 84%,var(--cs-corner-a) 84% 90%,var(--cs-corner-b) 90%);box-shadow:inset 0 -3px 0 var(--cs-corner-a),inset 3px 0 0 var(--cs-corner-a);clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%)}
.cs-corner-logo{flex:0 0 auto;height:100%;display:block;background:#000;border-radius:9px;padding:3px 6px;box-shadow:0 0 0 2px #000,0 2px 0 2px rgba(0,0,0,.35)}
.cs-corner-logo img{display:block;height:100%;width:auto;max-width:200px}
.cs-corner-logo.cs-jpg img{clip-path:inset(3% 1.5% 2% 2%)}
.cs-corner-name{min-width:0;display:flex;flex-direction:column;line-height:1;color:#fff;font:900 clamp(13px,1.9vw,22px)/1 var(--cs-font-heading);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden}
.cs-corner-name b{overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 0 #000}
.cs-corner-name small{font:800 clamp(9px,.9vw,12px)/1.2 var(--cs-font-body);letter-spacing:2.5px;color:#fff;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1100px){.cs-corner-name small{display:none}}
@media (max-width:860px){.cs-corner-name{display:none}.cs-corner{padding-right:16px}}
@media (max-width:420px){.cs-corner{max-width:21%;padding-right:9px}.cs-root.cs-root .cs-tm{font-size:8.5px;letter-spacing:-.45px}.cs-top{gap:4px}}
@media (max-width:700px){.cs-corner{max-width:30%;padding:3px 11px 3px 3px}.cs-corner-logo{padding:2px 3px;border-radius:7px}.cs-root.cs-root .cs-acct-av{width:32px;height:32px;font-size:14px}}
/* the top menu: Home, About, Contact and the site's biggest features. Narrow: the icon over a short word. Never spills out. */
.cs-topmenu{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;overflow:hidden;height:100%}
.cs-root.cs-root .cs-tm{flex:0 1 auto;min-width:0;height:var(--cs-control-h);display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:var(--cs-radius-md);border:1px solid transparent;background:transparent;color:var(--cs-on-band);font:800 calc(13px*var(--cs-scale)) var(--cs-font-body);text-decoration:none;white-space:nowrap;cursor:pointer}
.cs-root.cs-root .cs-tm:hover,.cs-root.cs-root .cs-tm:focus-visible{background:rgba(0,0,0,.22);border-color:rgba(0,0,0,.35)}
.cs-root.cs-root .cs-tm.cs-on{background:rgba(0,0,0,.4);color:#fff}
.cs-tm-icon{display:none}.cs-tm-short{display:none}.cs-tm-long{overflow:hidden;text-overflow:ellipsis}
.cs-root.cs-root .cs-tm svg{display:block}
@media (max-width:1180px){.cs-tm-long{display:none}.cs-tm-short{display:inline;overflow:hidden;text-overflow:ellipsis}.cs-root.cs-root .cs-tm{padding:0 7px}}
@media (max-width:700px){.cs-topmenu{gap:0;justify-content:space-around}.cs-root.cs-root .cs-tm{flex:1 1 0;flex-direction:column;justify-content:center;gap:1px;height:100%;padding:0 1px;min-width:0;font-size:9px;letter-spacing:-.3px;border-radius:7px}.cs-tm-icon{display:block;line-height:0}.cs-tm-icon svg{width:16px;height:16px}.cs-tm-short{max-width:100%;text-overflow:clip}}
/* the My account menu under the avatar: opens on hover or click; short groups; scrolls inside itself only */
.cs-acct{flex:0 0 auto;position:relative;display:flex;align-items:center}
.cs-root.cs-root .cs-acct-av{position:relative;width:38px;height:38px;border-radius:50%;border:2px solid var(--cs-ring);background:#111;color:#fff;font:900 16px var(--cs-font-heading);display:grid;place-items:center;overflow:hidden;cursor:pointer;padding:0}
.cs-root.cs-root .cs-acct-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-root.cs-root .cs-acct-av::before{content:"";position:absolute;inset:-4px}
.cs-root.cs-root .cs-acct[data-cs-open] .cs-acct-av{box-shadow:0 0 0 3px rgba(0,0,0,.45)}
.cs-acct-menu{position:fixed;z-index:60;box-sizing:border-box;background:var(--cs-panel);color:var(--cs-text);border:1px solid var(--cs-line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.55);padding:8px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
.cs-acct-menu[hidden]{display:none}
.cs-acct-who{padding:6px 8px 8px;border-bottom:1px solid var(--cs-line);margin-bottom:4px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.cs-acct-who b{font:800 14px var(--cs-font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cs-acct-who small{color:var(--cs-text-muted);font-size:12px}
.cs-root.cs-root .cs-acct-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:0 8px;border:0;border-radius:9px;background:transparent;color:inherit;font:800 12px var(--cs-font-body);text-transform:uppercase;letter-spacing:.6px;cursor:pointer}
.cs-root.cs-root .cs-acct-head:hover,.cs-root.cs-root .cs-acct-head:focus-visible{background:rgba(255,255,255,.07)}
.cs-root.cs-root .cs-acct-head i{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.cs-root.cs-root .cs-acct-head[aria-expanded="true"] i{transform:rotate(-135deg);margin-top:4px}
.cs-acct-group{display:block}
.cs-acct-items{display:flex;flex-direction:column;gap:2px;padding:2px 0 6px}.cs-acct-items[hidden]{display:none}
.cs-root.cs-root .cs-acct-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:40px;justify-content:center;width:100%;box-sizing:border-box;padding:4px 10px;border:0;border-radius:9px;background:transparent;color:inherit;font:700 14px var(--cs-font-body);text-align:left;text-decoration:none;cursor:pointer;overflow:hidden}
.cs-root.cs-root .cs-acct-item span,.cs-root.cs-root .cs-acct-item small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-root.cs-root .cs-acct-item small{color:var(--cs-text-muted);font-weight:600;font-size:11.5px}
.cs-root.cs-root .cs-acct-item:hover,.cs-root.cs-root .cs-acct-item:focus-visible{background:rgba(255,255,255,.1)}
.cs-root.cs-root .cs-acct-item.cs-danger span{color:var(--cs-brand-text)}
/* edge arrows on a side-scrolling row: sticky at the two ends, taking no room */
.cs-root.cs-root .cs-edge{position:sticky;z-index:4;flex:0 0 36px;width:36px;height:52px;max-height:90%;align-self:center;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.72);color:#fff;font:400 30px/1 var(--cs-font-body);display:grid;place-items:center;padding:0 0 4px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.cs-root.cs-root .cs-edge[hidden]{display:none}
.cs-edge-l{left:2px}.cs-edge-r{right:2px}
.cs-root.cs-root .cs-edge:hover,.cs-root.cs-root .cs-edge:focus-visible{background:rgba(0,0,0,.9);border-color:#fff}
[data-cs-edges]{cursor:grab}[data-cs-edges][data-cs-dragging]{cursor:grabbing;user-select:none}
[data-cs-edges][data-cs-dragging] *{pointer-events:none}
/* the poster card at rest (v2.4 rule 18): only the title and the picture; the pop-out shows the rest */
.cs-poster .cs-explain,.cs-poster .cs-card-text small{display:none}
/* the pop-out: the card grows over its neighbours after a short wait, always inside the screen (near an edge it grows inward) */
.cs-popout{position:fixed;z-index:55;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:var(--cs-panel);color:var(--cs-text);border:2px solid var(--cs-brand);box-shadow:0 20px 50px rgba(0,0,0,.65);transform-origin:var(--cs-po-origin);pointer-events:auto}
.cs-popout[hidden]{display:none}
.cs-popout-pic{position:relative;flex:1 1 auto;min-height:48px;overflow:hidden;background:linear-gradient(160deg,#2a2b31,#121316)}
.cs-popout-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-popout-pic .cs-card-icon{position:absolute;inset:0;display:grid;place-items:center;color:var(--cs-brand-text);opacity:.85}
.cs-popout-body{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;padding:8px 10px 10px;min-width:0}
.cs-popout-body b{font:900 15px/1.1 var(--cs-font-heading);text-transform:var(--cs-case);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-popout-body p{margin:0;font:600 12px/1.3 var(--cs-font-body);color:var(--cs-text-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cs-popout-tags{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden;max-height:22px}
.cs-popout-tags span{font:700 10.5px var(--cs-font-body);padding:2px 7px;border-radius:999px;border:1px solid var(--cs-line);white-space:nowrap}
.cs-popout-acts{display:flex;gap:6px;flex-wrap:nowrap;min-width:0}
.cs-popout-acts .cs-btn{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.cs-popout{animation:cs-po-in .18s ease-out both}}
@keyframes cs-po-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* ============ 1.0.3: Console Style 2.4.2 (Mike, Nov 12): the avatar follows the view; the Visiting label; the view tile ============
   The avatar (top right, beside the account controls) shows the person's picture for the view they are in, or their initials.
   On someone else's site a small Visiting label sits beside it; on their own site, only the picture. Nothing spills, 360 px included. */
.cs-root.cs-root .cs-acct-av b{position:relative;z-index:0;font-size:inherit;letter-spacing:-.5px;line-height:1}
.cs-root.cs-root .cs-acct-av img{z-index:1}
.cs-acct[data-cs-visiting]{gap:7px;min-width:0;max-width:min(46vw,260px)}
.cs-acct-visit{flex:0 1 auto;min-width:0;max-width:200px;color:var(--cs-on-band);font:700 11.5px/1.15 var(--cs-font-body);text-align:right;overflow:hidden}
.cs-visit-long,.cs-visit-short{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-visit-short{display:none}
@media (max-width:700px){.cs-acct[data-cs-visiting]{gap:4px;max-width:34vw}.cs-visit-long{display:none}.cs-visit-short{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;word-break:break-word}.cs-acct-visit{max-width:64px;font-size:9.5px;line-height:1.05}}
@media (max-width:380px){.cs-acct-visit{max-width:52px;font-size:9px}}
/* the view tile: a very small tile of the current-view picture at the right end of the bottom button bar; a button that switches views */
.cs-root.cs-root .cs-viewtile{position:relative;flex:0 0 auto;width:30px;height:30px;margin-left:auto;padding:0;border-radius:8px;border:2px solid var(--cs-ring,var(--cs-brand));background:#111;color:#fff;font:900 11px var(--cs-font-heading);display:grid;place-items:center;overflow:hidden;cursor:pointer;align-self:center}
.cs-root.cs-root .cs-viewtile b{position:relative;z-index:0;line-height:1;letter-spacing:-.4px}
.cs-root.cs-root .cs-viewtile img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.cs-root.cs-root .cs-viewtile::before{content:"";position:absolute;inset:-7px}
.cs-root.cs-root .cs-viewtile:focus-visible{outline:2px solid var(--cs-brand-text);outline-offset:2px}
.cs-root.cs-root .cs-viewtile[data-cs-view="personal"]{border-radius:50%}
@media (max-width:420px){.cs-root.cs-root .cs-viewtile{width:26px;height:26px;font-size:10px}}

/* ============ 1.0.4: Console Style 2.4.3 (Mike, Nov 12, after #101): menu cards, the logo once (logo wrap), the connected indicator ============ */
/* Menu cards: each top menu link is a small card like the side rail's: a faded picture underneath that hints at what it does, the title
   on top. Phones: compact cards, the icon over a short word, the picture still faded behind. Never spills (rule 7). */
.cs-topmenu[data-cs-cards]{gap:6px;padding:5px 0}
.cs-root.cs-root .cs-tm.cs-tm-card{position:relative;isolation:isolate;overflow:hidden;height:100%;min-height:0;padding:0 14px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:#101010;color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.35);text-transform:uppercase;letter-spacing:.4px;text-shadow:0 1px 2px #000}
.cs-tm-pic{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.cs-tm-pic img{display:block;width:100%;height:100%;object-fit:cover;opacity:.66}
.cs-tm-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55))}
.cs-tm-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--cs-band);opacity:.38;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.14),transparent 60%),linear-gradient(135deg,#2a2a2a,#050505)}
.cs-tm-ph svg{width:70%;height:70%;max-width:40px;max-height:40px}
.cs-root.cs-root .cs-tm.cs-tm-card:hover,.cs-root.cs-root .cs-tm.cs-tm-card:focus-visible{border-color:#fff;background:#101010}
.cs-root.cs-root .cs-tm.cs-tm-card:hover .cs-tm-pic img,.cs-root.cs-root .cs-tm.cs-tm-card:focus-visible .cs-tm-pic img{opacity:.85}
.cs-root.cs-root .cs-tm.cs-tm-card.cs-on{border-color:var(--cs-band);box-shadow:inset 0 -3px 0 var(--cs-band),0 2px 0 rgba(0,0,0,.35);background:#101010}
@media (max-width:700px){.cs-topmenu[data-cs-cards]{gap:3px;padding:3px 0}.cs-root.cs-root .cs-tm.cs-tm-card{padding:0 1px;border-radius:7px;text-transform:none;letter-spacing:-.3px}.cs-tm-card .cs-tm-icon svg{width:15px;height:15px}}
@media (max-width:420px){.cs-topmenu[data-cs-cards]{gap:2px}.cs-root.cs-root .cs-tm.cs-tm-card{font-size:8.5px;border-width:1px}}
/* The logo once (logo wrap): with a logo file there is no name or tagline beside it. The logo sits straight on the corner piece, which
   wraps the top-left corner and runs on along the top edge into the top bar: not a boxed tile. */
.cs-corner[data-cs-corner="logo"]{padding:4px 22px 4px 8px}
.cs-corner[data-cs-corner="logo"] .cs-corner-logo{background:transparent;box-shadow:none;padding:2px 0;border-radius:0}
.cs-has-corner .cs-top::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--cs-corner-a) 0,var(--cs-corner-b) 40%,transparent 90%);pointer-events:none;z-index:1}
@media (max-width:700px){.cs-corner[data-cs-corner="logo"]{padding:3px 12px 3px 4px}}
/* The connected indicator: the one line near Sign in and the avatar (it replaces the Visiting label; same room, same rules). */
.cs-acct[data-cs-connected="own"] .cs-acct-visit{opacity:.92}
.cs-acct[data-cs-connected]{max-width:min(40vw,300px)}
.cs-acct[data-cs-connected] .cs-acct-visit{max-width:230px}
.cs-acct[data-cs-connected] .cs-visit-long{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
@media (max-width:700px){.cs-acct[data-cs-connected]{max-width:34vw}.cs-acct[data-cs-connected] .cs-visit-long{display:none}.cs-acct[data-cs-connected] .cs-acct-visit{max-width:68px}}
@media (max-width:380px){.cs-acct[data-cs-connected] .cs-acct-visit{max-width:56px}}

/* 1.0.5 (Console Style 2.4.4): the rail scrolls inside itself only (no "More tools"); the footer says "Powered by MEVP Tools". */
.cs-rail[data-cs-rail-scroll]{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
@media (max-width:700px){.cs-rail[data-cs-rail-scroll]{overflow-x:auto;overflow-y:hidden}}
.cs-footer-powered{font-size:var(--cs-footer-size);white-space:nowrap}
/* 1.0.8 THEMES-20261112: a theme from the rules sets how far menu card art is faded, and a theme whose motion is "still" has none */
[data-cs-motion] .cs-tm-pic img{opacity:var(--cs-art-dim)}
[data-cs-motion="still"] *,[data-cs-motion="still"] *::before,[data-cs-motion="still"] *::after{animation:none!important;transition:none!important}

/* 1.0.10 (Console Style 2.4.9): the console ring. Outside in: a thick black ring, the site's ring (thick at the edge, fading into the
   window), then, signed in only, the person's thin flat user ring (2 px, no bevel, no inner shadow look) fading into the content. */
[data-cs-ring-frame]{--cs-ring-site:var(--cs-band,#c9a45c);border:10px solid #000!important;border-radius:var(--cs-radius-bezel,26px);box-shadow:inset 0 0 0 7px var(--cs-ring-site),inset 0 0 26px 9px color-mix(in srgb,var(--cs-ring-site) 55%,transparent)!important;background-clip:padding-box}
[data-cs-ring-user]{--cs-ring-user:var(--cs-ring,#8b1a1a);box-shadow:0 0 0 2px var(--cs-ring-user),0 0 12px 2px color-mix(in srgb,var(--cs-ring-user) 45%,transparent)!important;border-radius:var(--cs-radius-screen,16px)}
/* 1.0.10: the container card: a big labeled card holding 4 to 6 small cards plus See all; nothing spills, at any size */
.cs-container{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;padding:10px;border-radius:var(--cs-radius-lg,12px);border:2px solid var(--cs-line,#3a3a3a);background:linear-gradient(180deg,var(--cs-raised,#22242b) 0,var(--cs-panel,#17181c) 100%);overflow:hidden}
.cs-container-head{display:flex;align-items:center;gap:8px;min-width:0}.cs-container-head b{font:900 calc(15px*var(--cs-scale,1)) var(--cs-font-heading,system-ui);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-container-head small{min-width:0;opacity:.75;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-container-n{margin-left:auto;font-style:normal;font-size:12px;opacity:.7}
.cs-container-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-auto-rows:minmax(58px,1fr);gap:6px;overflow:hidden}
.cs-container-card{position:relative;display:flex;align-items:center;gap:6px;min-width:0;min-height:var(--cs-tap,44px);padding:6px;border-radius:10px;border:1px solid var(--cs-line,#3a3a3a);background:var(--cs-screen,#101114);color:inherit;text-align:left;cursor:pointer;overflow:hidden}
.cs-container-card img{width:36px;height:36px;object-fit:cover;border-radius:8px;flex:0 0 auto}.cs-container-t{display:flex;flex-direction:column;min-width:0}.cs-container-t b,.cs-container-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-container-t small{font-size:11px;opacity:.75}
.cs-container-all{align-self:flex-end;max-width:100%}
@media (prefers-reduced-motion:reduce){.cs-container-card{transition:none}}

/* 1.0.10: the person card: the business picture first, then the personal one, each its own tap (44 px or more); the rest opens their console */
.cs-person{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px;border-radius:var(--cs-radius-lg,12px);border:2px solid var(--cs-line,#3a3a3a);background:linear-gradient(180deg,var(--cs-raised,#22242b),var(--cs-panel,#17181c));overflow:hidden;color:var(--cs-text,#eef2f8)}
.cs-person-pics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cs-person-cell{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.cs-person-pic{position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:var(--cs-tap,44px);padding:0;border:1px solid var(--cs-line,#3a3a3a);border-radius:12px;background:var(--cs-screen,#101114);color:inherit;text-decoration:none;overflow:hidden;cursor:pointer}
.cs-person-face{display:block;aspect-ratio:1/1;overflow:hidden}.cs-person-face img{display:block;width:100%;height:100%;object-fit:cover}
.cs-person-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:var(--cs-brand,#c9a45c);color:var(--cs-on-brand,#111)}
.cs-person-ph b{font:900 clamp(22px,4vw,36px)/1 var(--cs-font-heading,system-ui)}.cs-person-ph small{font:700 11px/1.3 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.cs-person-business,.cs-person-personal{flex:0 0 auto}.cs-person-pic.cs-missing{border-style:dashed}
.cs-person-tag{display:block;padding:3px 6px;font:700 11px/1.2 system-ui,sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-person-add{min-height:var(--cs-tap,44px);border-radius:10px;border:1px dashed var(--cs-brand,#c9a45c);background:transparent;color:inherit;font:700 12px system-ui,sans-serif;cursor:pointer}
.cs-person-main{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:var(--cs-tap,44px);padding:6px 4px;border:0;border-radius:10px;background:transparent;color:inherit;text-align:left;text-decoration:none;cursor:pointer;min-width:0}
.cs-person-main b{font:800 15px/1.2 system-ui,sans-serif;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cs-person-main small{font-size:12px;opacity:.8;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-person-go{margin-top:4px;font:700 12px system-ui,sans-serif;color:var(--cs-brand-text,#e9c478)}

/* 1.0.10: the panel sheet: a floating sheet over the page, never full page */
.cs-sheet-back{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:max(24px,5vh) max(24px,5vw);background:rgba(5,8,14,.62)}
@supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){.cs-sheet-back{background:rgba(5,8,14,.46);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}
.cs-sheet-back[hidden]{display:none!important}
.cs-sheet{position:relative;width:100%;height:100%;max-width:1280px;box-sizing:border-box;display:flex;flex-direction:column;min-height:0;border-radius:18px;border:2px solid color-mix(in srgb,var(--cs-ring-site,var(--cs-brand,#c9a45c)) 55%,transparent);box-shadow:0 24px 60px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);overflow:hidden}
.cs-sheet-body{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain}
@media (max-width:600px){.cs-sheet-back{padding:12px}.cs-sheet{border-radius:14px}}
@media (prefers-reduced-motion:no-preference){.cs-sheet{animation:cs-sheet-in .18s ease-out}@keyframes cs-sheet-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}}
/* 1.0.10 the view switch (Admin / View as / Public) */
.cs-viewswitch{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.cs-viewswitch-b{min-height:var(--cs-tap,44px);padding:0 14px;border-radius:999px;border:1px solid var(--cs-line,#3a3a3a);background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.cs-viewswitch-b[aria-pressed="true"]{background:var(--cs-accent,#e9c478);border-color:var(--cs-accent,#e9c478);color:#111}
.cs-viewswitch-b:focus-visible{outline:3px solid var(--cs-accent,#e9c478);outline-offset:2px}
.cs-viewswitch-note{flex-basis:100%;margin:0;padding:6px 10px;border-radius:8px;background:#1d1d1d;color:#ffd76a;font-size:13px;font-weight:600}
/* 1.0.14: the defaults for the solid buttons and the dynamic rows (kit().solidOn and kit().dynamic set their own) */
.cs-root,.cs-tm-solid{--cs-solid-bg:var(--cs-brand,#c9a45c);--cs-solid-on:var(--cs-on-brand,#000);--cs-solid-hover:var(--cs-brand-deep,#8a6328);--cs-solid-on-hover:#fff;--cs-solid-press:#000;--cs-solid-on-press:#fff;--cs-dyn-min:132px;--cs-dyn-max:none;--cs-dyn-min-phone:112px}
.cs-tm.cs-tm-solid{text-transform:none;letter-spacing:.2px}
/* 1.0.14 (Mike, Nov 13, CurbRash, universal). SOLID BUTTONS: the top menu and the side tiles are solid colors (kit().solidOn, from
   solidPalette: tints and shades of the brand accent plus one complementary color), no picture under them, AA text, their own hover and
   pressed colors. */
.cs-root .cs-solid,.cs-root.cs-root .cs-tm.cs-solid{background:var(--cs-solid-bg)!important;color:var(--cs-solid-on)!important;border-color:color-mix(in srgb,var(--cs-solid-bg) 65%,#000)!important;transition:background-color .12s ease,color .12s ease}
.cs-root .cs-solid:hover,.cs-root.cs-root .cs-tm.cs-solid:hover{background:var(--cs-solid-hover)!important;color:var(--cs-solid-on-hover)!important}
.cs-root .cs-solid:active,.cs-root .cs-solid[aria-pressed="true"],.cs-root .cs-solid.cs-on,.cs-root.cs-root .cs-tm.cs-solid:active,.cs-root.cs-root .cs-tm.cs-solid.cs-on{background:var(--cs-solid-press)!important;color:var(--cs-solid-on-press)!important}
.cs-root .cs-solid svg{color:inherit}.cs-tm.cs-solid .cs-tm-pic{display:none}.cs-tm.cs-solid .cs-tm-icon{display:inline-block;line-height:0}.cs-tm.cs-solid .cs-tm-icon svg{width:16px;height:16px}
.cs-root .cs-solid:focus-visible{outline:3px solid var(--cs-ring,#fff);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cs-root .cs-solid{transition:none}}
/* 1.0.14 (universal) DYNAMIC CARDS: a row of cards shares the whole width; as the window narrows the cards shrink together to a set
   minimum, then lock at it and the row scrolls sideways. The layout around the row never reflows (kit().dynamic, kit().row(cards, { dynamic })). */
.cs-dyn{display:flex;gap:var(--cs-space-5,10px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior:contain;scroll-snap-type:none!important}
.cs-dyn::-webkit-scrollbar{display:none}
.cs-dyn>.cs-card{flex:1 1 0;min-width:var(--cs-dyn-min,132px);max-width:var(--cs-dyn-max,none);width:auto;height:100%;aspect-ratio:auto;margin:0;scroll-snap-align:none}
@media (max-width:700px){.cs-dyn>.cs-card{min-width:var(--cs-dyn-min-phone,var(--cs-dyn-min,112px))}}
/* 1.0.14 (universal) THE TOP BAR: one layout everywhere (kit().topBar, kit().frame(root, { bar })): the logo block, the site's own solid
   buttons, then on the right the Personal/Professional pill and the avatar (or Sign in). */
.cs-topbar-menu{flex:1 1 auto;min-width:0}
.cs-topbar-right{flex:0 1 auto;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.cs-topbar-signin{display:inline-flex;align-items:center;min-height:var(--cs-tap,44px);padding:0 12px;border-radius:10px;background:var(--cs-control-solid,#000);color:var(--cs-on-control,#fff);font:800 13px var(--cs-font-body,system-ui);text-decoration:none;white-space:nowrap}
.cs-modepill{display:inline-flex;flex:0 0 auto;padding:3px;gap:2px;border-radius:999px;background:var(--cs-control-solid,#000);border:1px solid var(--cs-control-edge,rgba(0,0,0,.35))}
.cs-modepill-b{min-height:38px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--cs-on-control,#fff);font:700 12.5px var(--cs-font-body,system-ui);cursor:pointer;white-space:nowrap}
.cs-modepill-b.cs-on{background:var(--cs-brand,#c9a45c);color:var(--cs-on-brand,#000)}
.cs-modepill-b:focus-visible{outline:3px solid var(--cs-ring,#fff);outline-offset:1px}
.cs-modepill-b{display:inline-flex;align-items:center;gap:5px}.cs-modepill-i{display:none;line-height:0}
@media (max-width:700px){.cs-modepill-b{padding:0 9px;min-height:34px}.cs-modepill-t{display:none}.cs-modepill-i{display:inline-block}.cs-topbar-menu{min-width:96px}.cs-topbar-right{gap:4px}}

/* 1.0.15 (U67, Mike, Nov 13, universal): THE INSET ASK BAR (kit().askBar; every .cs-ask). The whole bar a little smaller and inset
   from the bezel's sides, never edge to edge; the solid label about 18 px in; at the right, inside the bar: extra icons (the U49 knowledge icon),
   the small Camera icon, then the small Ask button (the form's submit). Phone, iPad and computer: one line, nothing overlaps, nothing
   wraps, no label breaks mid-word; on a narrow phone the icons stay icons and the Ask word stays whole. */
.cs-ask.cs-ask{--cs-ask-h:40px;--cs-ask-inset:clamp(10px,4%,48px);box-sizing:border-box;flex:0 0 auto;align-self:center;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;width:calc(100% - 2 * var(--cs-ask-inset));max-width:880px;min-width:0;height:var(--cs-ask-h);min-height:var(--cs-ask-h);margin:0 auto;padding:0 5px 0 18px;border:2px solid var(--cs-ring);border-radius:calc(var(--cs-ask-h) / 2);background:var(--cs-screen);color:var(--cs-text);overflow:hidden;white-space:nowrap}
.cs-ask.cs-ask:focus-within{box-shadow:0 0 0 2px var(--cs-brand)}
.cs-ask.cs-ask input[type=text],.cs-ask.cs-ask .cs-ask-input{flex:1 1 0;min-width:0;width:auto;height:100%;margin:0;padding:0 4px;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;font-size:15px;outline:none;text-overflow:ellipsis;box-shadow:none}
.cs-ask-name{flex:0 0 auto;font-weight:800;font-size:13px;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;hyphens:none}
.cs-ask-tools{flex:0 0 auto;display:flex;flex-wrap:nowrap;align-items:center;gap:2px;white-space:nowrap}
.cs-ask .cs-ask-ico,.cs-ask .cs-ask-cam{position:relative;flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;min-height:0;padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:var(--cs-text-soft,var(--cs-text));cursor:pointer}
.cs-ask .cs-ask-ico:hover{background:var(--cs-raised);color:var(--cs-text)}
.cs-ask .cs-ask-ico:focus-visible{outline:2px solid var(--cs-brand);outline-offset:0}
.cs-ask .cs-ask-ico svg{width:18px;height:18px}
.cs-ask .cs-ask-ico span{display:none}
.cs-ask.cs-ask .cs-ask-go{position:relative;flex:0 0 auto;min-width:max-content;min-height:0;height:30px;margin:0;padding:0 14px;border-radius:15px;font-size:13px;line-height:1;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;hyphens:none}
.cs-ask.cs-ask .cs-ask-go .cs-ask-go-label{display:inline;white-space:nowrap}
.cs-ask .cs-ask-go::after,.cs-ask .cs-ask-ico::after{content:"";position:absolute;inset:-5px -2px}
@media (max-width:700px){.cs-ask.cs-ask{--cs-ask-h:38px;--cs-ask-inset:clamp(6px,3%,14px);gap:3px;padding:0 4px 0 14px}.cs-ask.cs-ask input[type=text]{font-size:16px}.cs-ask .cs-ask-ico{width:30px;height:30px}.cs-ask.cs-ask .cs-ask-go{padding:0 11px}}
@media (max-width:480px){.cs-ask-name{display:none}}
@media (max-height:520px){.cs-ask.cs-ask{--cs-ask-h:36px}.cs-ask.cs-ask .cs-ask-go{height:28px}}

/* 1.0.16 (U80, Mike, Nov 13, universal): THE FOOTER DISCLAIMER IS INSET. It sits just under the bottom of the console screen, a little in
   from the edges (the same inset as the Ask bar), never running edge to edge; no full-width rule above it. The page footer (a page
   that cannot scroll) floats the same way: inset from both sides, centered, its top corners rounded. */
.cs-footer.cs-footer:not(.cs-footer-page){--cs-foot-in:clamp(10px,4%,48px);box-sizing:border-box;align-self:center;width:calc(100% - 2 * var(--cs-foot-in));max-width:880px;margin:2px auto 0;padding:2px 2px 0;border-top:0}
.cs-footer.cs-footer-page{left:clamp(10px,4vw,48px);right:clamp(10px,4vw,48px);max-width:880px;margin:0 auto;border:1px solid var(--cs-line);border-bottom:0;border-radius:10px 10px 0 0}
@media (max-width:700px){.cs-footer.cs-footer:not(.cs-footer-page){--cs-foot-in:clamp(6px,3%,14px)}.cs-footer.cs-footer-page{left:clamp(6px,3vw,14px);right:clamp(6px,3vw,14px)}}
/* 1.0.16 (U69, Mike, Nov 13, universal): THE TOP MENU IS ONE COLOR. kit().topMenu paints every button with the same menuColors(brand): one
   rest color, one hover color, one active (current page) color, the same on every button. */
.cs-topmenu[data-cs-one-color] .cs-tm.cs-solid{border-color:color-mix(in srgb,var(--cs-solid-bg) 65%,#000)!important}

/* 1.0.16 (U70, Mike, Nov 13, universal): THE VIEW AS ROLE PICKER (kit().rolePicker). One category: a wrapping grid that fills the space,
   no scrolling, no arrows. Several: one sideways row per category. Logged out first, marked in gold. Each tile its own image slot. */
.cs-rolepicker{display:flex;flex-direction:column;gap:10px;min-width:0}
.cs-rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;overflow:visible}
.cs-rp-row{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:2px}
.cs-rp-row>.cs-rp-tile{flex:0 0 clamp(130px,30%,180px)}
.cs-rp-head{margin:0 0 4px;font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--cs-text-soft,var(--cs-text))}
.cs-rp-tile{display:flex;flex-direction:column;gap:4px;min-width:0;padding:6px;border:1px solid var(--cs-line);border-radius:12px;background:var(--cs-raised);color:var(--cs-text);text-align:left;text-decoration:none;cursor:pointer;font:inherit}
.cs-rp-tile:hover{border-color:var(--cs-brand)}.cs-rp-tile:focus-visible{outline:3px solid var(--cs-ring);outline-offset:2px}
.cs-rp-tile.cs-on{border-color:var(--cs-brand);box-shadow:inset 0 0 0 1px var(--cs-brand)}
.cs-rp-tile.cs-rp-out{border-color:#d4af37}
.cs-rp-pic{display:grid;place-items:center;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:linear-gradient(160deg,var(--cs-screen),var(--cs-bezel));color:var(--cs-text-soft,var(--cs-text))}
.cs-rp-pic img{width:100%;height:100%;object-fit:cover;display:block}
.cs-rp-ph{display:grid;place-items:center;opacity:.7}
.cs-rp-group{min-width:0}
.cs-rp-name{font-size:13px;line-height:1.2;overflow-wrap:normal;word-break:normal;hyphens:none}
.cs-rp-sub{font-size:11px;line-height:1.2;color:var(--cs-text-soft,var(--cs-text))}

/* 1.0.16 (labels never truncate or break mid-word, U67 and U69): a top menu label that does not fit makes kit().topMenu go tighter
   (data-cs-tm-fit="tight"), then icons only (data-cs-tm-fit="icons"); a label is never cut to "HO…". */
.cs-topmenu .cs-tm-long,.cs-topmenu .cs-tm-short{white-space:nowrap;word-break:keep-all;hyphens:none}
.cs-topmenu[data-cs-tm-fit=tight]{gap:3px}.cs-root.cs-root .cs-topmenu[data-cs-tm-fit=tight] .cs-tm{padding-left:5px;padding-right:5px;letter-spacing:0}
.cs-topmenu[data-cs-tm-fit=icons] .cs-tm-long,.cs-topmenu[data-cs-tm-fit=icons] .cs-tm-short{display:none!important}
.cs-topmenu[data-cs-tm-fit=icons] .cs-tm-icon{display:inline-block!important;line-height:0}.cs-topmenu[data-cs-tm-fit=icons] .cs-tm-icon svg{width:18px;height:18px}
.cs-root.cs-root .cs-topmenu[data-cs-tm-fit=icons] .cs-tm{justify-content:center;min-width:40px}

/* 1.0.16 (titles never truncate, Mike's no-cut-labels rule): the panel header's title is never cut ("GE…"): it keeps its line and
   the header buttons move to a second row when they do not fit beside it; a title longer than the header wraps between whole words. */
.cs-pop-head h2,.cs-pop.cs-serious .cs-pop-head h2{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal;hyphens:none;line-height:1.15}
.cs-pop-head .cs-btn,.cs-pop-head button{flex:0 0 auto;white-space:nowrap}
/* the title keeps its whole first line when it can (min-width: its own width, at most the header's); when the buttons do not fit beside
   it they move to a second row at the right; only a title longer than the whole header wraps, between words */
.cs-pop-head{flex-wrap:wrap;row-gap:4px}.cs-pop-head h2,.cs-pop.cs-serious .cs-pop-head h2{flex:1 1 auto;min-width:min(max-content,100%)}
.cs-pop-head h2+.cs-btn,.cs-pop-head h2+button{margin-left:auto}
@media (max-width:700px){.cs-pop-head{gap:6px}.cs-pop-head h2,.cs-pop.cs-serious .cs-pop-head h2{flex:1 1 100%}.cs-root.cs-root .cs-pop-head .cs-btn.cs-sm{padding-left:9px;padding-right:9px}} /* phone: the title on its own line, the buttons together on the next, at the right */

/* 1.0.18 (U72 to U75, Mike's sketch, universal; every frame with a logo corner, kit().frame): THE LOGO NOTCH AND THE CLEAN L.
   U72 the logo sits in a notch cut out of the console's top-left corner: the outline runs along the toolbar, steps down beside the notch,
       runs under it and on round the console. The logo is the site's or wrapper's own (or the person's picture on their wrappers).
   U73 the notch is the login: a link (kit().notchGo) - sign in, Mike's super admin controls for the site, or the person's console.
   U74 the nav column starts BELOW the notch, the same width as the notch: notch + toolbar + nav column make one clean L.
   U75 the content sits flush right of the nav column and directly under the toolbar.
   Phones (700 px and under): the notch shrinks to the logo's size; the nav becomes the sideways row right under the toolbar and the
   notch (the L folds into a stepped top edge); the content sits directly under it. Short landscape phones keep the old layout. */
@media (min-height:521px){
.cs-notched{--cs-notch-w:clamp(92px,11vw,150px);--cs-notch-line:2px;--cs-notch-c:var(--cs-ring,var(--cs-corner-b,#c9a45c));--cs-notch-r:14px}
.cs-notched .cs-top{position:relative;gap:var(--cs-space-4);padding-left:0}
.cs-notched .cs-top::after{display:none}
.cs-notched .cs-top::before{content:"";position:absolute;top:0;bottom:0;left:var(--cs-notch-w);right:0;height:auto;background:none;border:var(--cs-notch-line) solid var(--cs-notch-c);border-bottom:0;border-radius:var(--cs-notch-r) var(--cs-notch-r) 0 0;pointer-events:none;z-index:0}
.cs-notched .cs-top>*:not(.cs-corner){position:relative;z-index:1}
.cs-notched .cs-top>.cs-corner{flex:0 0 var(--cs-notch-w);width:var(--cs-notch-w);max-width:var(--cs-notch-w);height:100%;padding:4px 8px;justify-content:center;text-decoration:none;color:inherit;border:0;background:none;font:inherit;cursor:default}
.cs-notched .cs-top>.cs-corner[data-cs-notch-go]{cursor:pointer}
.cs-notched .cs-top>.cs-corner[data-cs-notch-go]:hover{filter:brightness(1.12)}
.cs-notched .cs-top>.cs-corner[data-cs-notch-go]:focus-visible{outline:3px solid var(--cs-ring,#fff);outline-offset:-3px;border-radius:10px}
.cs-notched .cs-corner-plate{display:none}
.cs-notched .cs-corner-logo{height:100%;max-width:100%;padding:0;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center}
.cs-notched .cs-corner-logo img{height:auto;max-height:100%;width:auto;max-width:100%;object-fit:contain}
.cs-notched .cs-corner-name{display:flex;white-space:normal;text-align:center;align-items:center;font-size:clamp(11px,1.25vw,16px);line-height:1.05}
.cs-notched .cs-corner-name b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal;hyphens:none}
.cs-notched .cs-corner-name small{display:none}
.cs-notched .cs-top{margin-bottom:0}
.cs-notched .cs-mid{position:relative;margin-top:0;gap:4px;padding:6px;border:var(--cs-notch-line) solid var(--cs-notch-c);border-top:0;border-radius:0 0 var(--cs-notch-r) var(--cs-notch-r)}
.cs-notched .cs-mid::before{content:"";position:absolute;left:calc(-1 * var(--cs-notch-line));top:0;width:calc(var(--cs-notch-w) + var(--cs-notch-line));height:var(--cs-notch-line);background:var(--cs-notch-c);pointer-events:none}
.cs-notched.cs-has-rail .cs-rail{flex:0 0 calc(var(--cs-notch-w) - 6px - var(--cs-notch-line));box-shadow:none}
.cs-notched .cs-has-corner .cs-rail,.cs-notched.cs-has-corner .cs-rail{box-shadow:none}
}
@media (min-height:521px) and (max-width:700px){
.cs-notched{--cs-notch-w:clamp(54px,17vw,84px);--cs-notch-r:10px}
.cs-notched .cs-top>.cs-corner{padding:3px 4px}
.cs-notched .cs-corner-name{font-size:10px}
.cs-notched .cs-mid{padding:4px}
.cs-notched.cs-has-rail .cs-rail{flex:0 0 50px}
}
/* 1.0.18 (written as 1.0.18) SITE SWITCHER (U54 revised, Mike, Nov 13): tiny square icon cards under "You're connected to", no words (the name is the tooltip
   and aria-label); the current view first with a colored ring; a corner badge, a house for Personal and a briefcase for Professional.
   It replaces the Personal / Professional pill. kit().siteSwitcher(places, { current, mode }), or account({ places, current, mode }). */
.cs-acct[data-cs-has-switch]{position:relative}
.cs-acct>.cs-switch{position:absolute;top:calc(100% + 4px);right:0;z-index:5}
.cs-switch{display:flex;gap:5px;align-items:center;max-width:min(60vw,380px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:3px;scroll-snap-type:x proximity}
.cs-switch::-webkit-scrollbar{display:none}
.cs-switch-b{position:relative;flex:0 0 auto;width:26px;height:26px;padding:0;border-radius:6px;border:1px solid var(--cs-line,#3a3a3a);background:var(--cs-surface,#141414);color:var(--cs-text,#eee);display:grid;place-items:center;overflow:visible;cursor:pointer;text-decoration:none;scroll-snap-align:start;opacity:.85}
.cs-switch-b>b{font:800 9.5px/1 var(--cs-font-body,system-ui);letter-spacing:.02em}
.cs-switch-b>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:5px}
.cs-switch-m{position:absolute;right:-4px;bottom:-4px;width:13px;height:13px;border-radius:4px;display:grid;place-items:center;line-height:0;background:var(--cs-control-solid,#000);color:#fff;border:1px solid var(--cs-surface,#141414)}
.cs-switch-m svg{width:9px;height:9px}
.cs-switch-b[data-cs-mode="personal"] .cs-switch-m{background:#c2417a}
.cs-switch-b[data-cs-mode="professional"] .cs-switch-m{background:#2f5fb8}
.cs-switch-b:hover,.cs-switch-b:focus-visible{opacity:1;border-color:var(--cs-accent,#c9a45c)}
.cs-switch-b:focus-visible{outline:2px solid var(--cs-ring,#fff);outline-offset:2px}
.cs-switch-b:active{transform:translateY(1px)}
.cs-switch{--cs-switch-ring:#e5484d}
.cs-switch-b.cs-on{opacity:1;border-color:transparent;box-shadow:0 0 0 2.5px var(--cs-switch-ring),0 0 12px 1px var(--cs-switch-ring);filter:brightness(1.12) saturate(1.2);margin:0 4px 0 3px}
/* U76: the active tile only: a small green dot (top right); the own Home tiles show the person's picture (square like every tile), never a logo */
.cs-switch-b.cs-switch-own>img{object-position:center 30%}
.cs-switch-dot{position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:#2fd36b;box-shadow:0 0 0 1.5px var(--cs-surface,#141414),0 0 6px rgba(47,211,107,.8)}
@media (max-width:600px){.cs-switch{max-width:calc(5 * 31px + 6px)}}
@media (prefers-reduced-motion:reduce){.cs-switch-b:active{transform:none}}
/* 1.0.18 (U56): the admin view switch in the top bar, just right of the avatar; compact on phones. Its read-only note sits under the
   site switcher, small, never over the screen. */
.cs-acct[data-cs-has-viewas]{position:relative;display:flex;align-items:center;gap:6px}
.cs-acct-vs{display:inline-flex;gap:2px;padding:2px;border-radius:10px;border:1px solid var(--cs-line,#3a3a3a);background:var(--cs-surface,#141414)}
.cs-acct-vs .cs-viewswitch-b{min-height:32px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:inherit;font:700 12px/1 var(--cs-font-body,system-ui);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cs-acct-vs .cs-viewswitch-b[aria-pressed="true"]{background:var(--cs-accent,#c9a45c);color:var(--cs-on-accent,#111)}
.cs-acct-vs .cs-viewswitch-b:hover{outline:1px solid var(--cs-accent,#c9a45c)}
.cs-acct-vs .cs-viewswitch-note{position:absolute;top:calc(100% + 40px);right:0;margin:0;max-width:min(80vw,320px);padding:6px 8px;border-radius:8px;font-size:11px;background:var(--cs-surface,#141414);border:1px solid var(--cs-line,#3a3a3a);z-index:5}
@media (max-width:600px){.cs-acct-vs .cs-viewswitch-b{padding:0 6px;font-size:11px;max-width:64px}}
/* 1.0.18: a site's place slot (data-cs-place-slot), filled by the shared switcher; empty, it takes no room */
.cs-place-slot:empty{display:none}
.cs-place-slot[data-cs-filled]{display:inline-flex;align-items:center;min-width:0}
.cs-place-slot>.cs-switch{max-width:min(46vw,380px)}

/* 1.0.18 (U77, Mike, Nov 13, universal): "You're connected to <site>" carries the green dot on every wrapper; signed in, a tap opens the
   list of the person's own sites under it (kit().connectedList, the same data as the site switcher); one tap jumps to any of them. */
.cs-conn-dot{display:inline-block;flex:0 0 8px;width:8px;height:8px;min-width:8px;margin-right:5px;border-radius:50%;background:#2fd36b;box-shadow:0 0 6px rgba(47,211,107,.8);vertical-align:middle}
.cs-acct[data-cs-connected] .cs-acct-visit{display:inline-flex;align-items:center}
.cs-acct-visit .cs-visit-long,.cs-acct-visit .cs-visit-short{word-break:keep-all;overflow-wrap:normal;hyphens:none} /* the connected words break only between words */
@media (max-width:700px){.cs-acct[data-cs-connected] .cs-acct-visit{max-width:74px;font-size:10px;padding-left:2px;padding-right:2px}.cs-conn-dot{width:7px;height:7px;min-width:7px;flex-basis:7px;margin-right:4px}} /* room for the dot and a whole site name on a phone */
@media (max-width:480px){.cs-acct[data-cs-connected] .cs-acct-visit .cs-visit-short{display:none}.cs-acct[data-cs-connected] .cs-acct-visit{min-width:28px;min-height:28px;justify-content:center}.cs-conn-dot{margin-right:0}} /* a narrow phone: the green dot alone (the words stay in its title and the list it opens), so the top bar never overlaps */
.cs-root.cs-root .cs-acct-visit-b{border:0;background:none;color:inherit;padding:2px 4px;border-radius:8px;cursor:pointer;text-align:left}
.cs-acct-visit-b:hover,.cs-acct-visit-b[aria-expanded="true"]{background:rgba(255,255,255,.08)}
.cs-acct-visit-b:focus-visible{outline:3px solid var(--cs-ring,#fff);outline-offset:1px}
.cs-acct[data-cs-has-sites]{position:relative}
.cs-acct-sites{position:absolute;top:calc(100% + 6px);right:0;z-index:var(--cs-z-top,60);min-width:200px;max-width:min(86vw,320px);display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid var(--cs-line);border-radius:12px;background:var(--cs-bezel,#111);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.cs-acct-sites[hidden]{display:none}
.cs-acct-site{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border-radius:8px;color:var(--cs-text,#fff);text-decoration:none;font-size:13px;white-space:nowrap}
.cs-acct-site span{overflow:visible;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
.cs-acct-site:hover,.cs-acct-site:focus-visible{background:rgba(255,255,255,.08);outline:none}
.cs-acct-site-dot{width:7px;height:7px;border-radius:50%;background:var(--cs-line,#555);flex:0 0 auto}
.cs-acct-site.cs-on .cs-acct-site-dot{background:#2fd36b;box-shadow:0 0 5px rgba(47,211,107,.8)}
.cs-acct-site.cs-on{font-weight:700}

/* 1.0.18 (U78, Mike, Nov 13, universal): a person's card from admin shows only their PROFESSIONAL picture (kit().personCard({ proOnly })).
   None yet: the card art is their name, styled on the card's theme, with a small "Picture needed" badge for Mike / super admin only. */
.cs-person-pics.cs-person-pro{grid-template-columns:1fr}
.cs-person-pro .cs-person-pic{aspect-ratio:4/3}
.cs-person-nameart{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:10px;box-sizing:border-box;background:linear-gradient(150deg,var(--cs-brand,#c9a45c),var(--cs-brand-deep,#6b4f1d));color:var(--cs-on-brand,#111);text-align:center}
.cs-person-nameart b{font:800 clamp(14px,2.2vw,20px)/1.15 var(--cs-font-heading,system-ui);white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
.cs-person-need{position:absolute;top:6px;right:6px;padding:2px 8px;border-radius:999px;background:#7a1f1f;color:#fff;font:700 12px/1.4 var(--cs-font-body,system-ui);white-space:nowrap}

/* 1.0.18 (the 12 px rule, U55): a person card's small words (Business, Personal, the placeholder's view name) are 12 px or more. */
.cs-person-tag{font-size:12px}.cs-person-ph small{font-size:12px}
/* 1.0.18 (whole cards only): a container's grid never cuts a card; kit().container leaves out any card that does not fit whole (See all
   opens the whole set). The columns never go narrower than the box. */
.cs-container-grid{grid-template-columns:repeat(auto-fill,minmax(min(110px,100%),1fr))}
.cs-container-card[hidden]{display:none}

/* 1.0.18 (headings never cut, Mike, Nov 13): a container's heading wraps between whole words (two lines at most at its size, then one
   step smaller) instead of "TODAY AND …"; its short line drops below it; the count stays at the right. */
.cs-container-head{flex-wrap:wrap;align-items:flex-start;row-gap:2px}
.cs-container-head b{flex:1 1 auto;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal;hyphens:none;line-height:1.1;font-size:clamp(12px,calc(13px*var(--cs-scale,1)),15px)}
.cs-container-head small{flex:1 0 100%;order:3;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal}
.cs-container-n{order:2}

/* 1.0.18 (card titles never cut, Mike, Nov 13): a small card's title in a container wraps between whole words onto a second line (never
   "Agree the …"); a long title goes one step smaller rather than being cut; the short line under it wraps between words too. */
.cs-container-card{align-items:flex-start}
.cs-container-t b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal;hyphens:none;font-size:clamp(12px,calc(13px*var(--cs-scale,1)),14px);line-height:1.15}
.cs-container-card[data-cs-long] .cs-container-t b{font-size:12px}
.cs-container-t small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal;hyphens:none;font-size:12px;line-height:1.2} /* the short line wraps too: no "…" anywhere in card text */

/* 1.0.20 (U83, Mike, Nov 13, universal): the close X is bold and the same size and line weight as the icons beside it; the gold button stays. */
.cs-close-x{display:block;flex:none;width:20px;height:20px}
.cs-close.cs-x{display:inline-flex;align-items:center;justify-content:center;min-width:var(--cs-tap,44px);padding:0}

/* 1.0.20 (U84, Mike, Nov 13, universal): the corner logo never sits in a white box. A logo drawn on its own colour fills the whole
   corner (the notch) with that colour (corner.logo.bg), so it looks like the natural logo; its baked-in frame edge is trimmed. A
   transparent logo sits straight on the themed background. The old black box around a logo is gone in the notch. */
.cs-notched .cs-corner-logo,.cs-notched .cs-corner-logo img{background:transparent!important;border:0;box-shadow:none;border-radius:0}
.cs-frame{--cs-corner-logo-bg:transparent}.cs-logo-filled.cs-notched .cs-top>.cs-corner{background:var(--cs-corner-logo-bg);border-radius:12px 12px 0 12px}
.cs-logo-filled .cs-corner-logo.cs-jpg img{clip-path:inset(5% 3% 5% 3%)}