/* Shared shell chrome and explicitly scoped domain composition. */
/* @cofello-tokens:begin */
/* Cofello Modern design tokens: the single source of colour, type, space, radius, elevation,
   layout and motion values (DESIGN.md; planning/COFELLO-REDESIGN-2026-09-27.md phase 0).
   Values implement the September 29 founder-directed white and black redesign. The signed-in
   light theme (below) is the Apple Keynote direction: pure black on white, display-scale
   headlines, and soft radii. This section may contain only
   --cf-* custom properties; it is the one place raw colours, font families and font sizes are
   allowed (test/design-tokens.test.mjs, which also checks every contrast pairing).
   Breakpoints: CSS cannot read custom properties inside @media, so media queries use these
   literal values and nothing else —
     phone    @media (max-width:760px)
     tablet   @media (min-width:761px) and (max-width:1000px)
     desktop  @media (min-width:1001px)                                                     */
:root{
 /* Colour roles. Paper is the page, surface is a card or panel on it, raised is an input,
    dialog or lifted card, sunken is a well or quiet fill. */
 --cf-color-paper:#ffffff;
 --cf-color-surface:#ffffff;
 --cf-color-raised:#ffffff;
 --cf-color-sunken:#f5f5f7;
 --cf-color-ink:#17171b;
 --cf-color-muted:#65656f;
 --cf-color-line:#e8e8ed;
 --cf-color-line-strong:#d5d5dc;
 --cf-color-control:#85858f;
 /* One accent: near-black. accent-strong is its hover/pressed and link tone. */
 --cf-color-accent:#17171b;
 --cf-color-accent-strong:#303036;
 --cf-color-accent-soft:#f0f0f3;
 --cf-color-on-accent:#ffffff;
 --cf-color-focus:#303036;
 --cf-color-scrim:rgba(23,23,27,.4);
 /* Status roles: text (4.5:1 on paper, surface, raised and its own bg), bg, border (3:1). */
 --cf-color-success-text:#2c6446;
 --cf-color-success-bg:#e5efe3;
 --cf-color-success-border:#659174;
 --cf-color-warning-text:#7a4a05;
 --cf-color-warning-bg:#f8ecd2;
 --cf-color-warning-border:#ad8037;
 --cf-color-danger-text:#9b2c1f;
 --cf-color-danger-bg:#f9e5df;
 --cf-color-danger-border:#c37364;
 --cf-color-info-text:#2b5877;
 --cf-color-info-bg:#e3ecf2;
 --cf-color-info-border:#6e8da4;
 --cf-color-neutral-text:#55555f;
 --cf-color-neutral-bg:#f0f0f3;
 --cf-color-neutral-border:#85858f;

 /* Typography. Native system sans for display and body; no remote font dependency. */
 --cf-font-display:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --cf-font-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --cf-font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
 --cf-text-xs:12px;
 --cf-text-sm:13px;
 --cf-text-md:14px;
 --cf-text-lg:16px;
 --cf-text-xl:19px;
 --cf-text-2xl:24px;
 --cf-text-3xl:32px;
 --cf-text-display:clamp(32px,3.5vw,44px);
 --cf-leading-xs:1.5;
 --cf-leading-sm:1.5;
 --cf-leading-md:1.6;
 --cf-leading-lg:1.55;
 --cf-leading-xl:1.4;
 --cf-leading-2xl:1.3;
 --cf-leading-3xl:1.2;
 --cf-leading-display:1.1;
 /* Native regular, semibold and bold weights. Display headings use semibold. */
 --cf-weight-regular:400;
 --cf-weight-medium:600;
 --cf-weight-bold:700;
 --cf-tracking-display:-.04em;
 --cf-tracking-eyebrow:.12em;

 /* Space: a 4px grid. */
 --cf-space-1:4px;
 --cf-space-2:8px;
 --cf-space-3:12px;
 --cf-space-4:16px;
 --cf-space-5:20px;
 --cf-space-6:24px;
 --cf-space-8:32px;
 --cf-space-10:40px;
 --cf-space-12:48px;
 --cf-space-16:64px;
 --cf-space-20:80px;
 --cf-space-24:96px;
 --cf-space-32:128px;

 /* Radius, elevation. */
 --cf-radius-sm:6px;
 --cf-radius-md:10px;
 --cf-radius-lg:16px;
 --cf-radius-pill:999px;
 --cf-shadow-sm:0 1px 2px rgba(23,23,27,.04);
 --cf-shadow-md:0 8px 24px -12px rgba(23,23,27,.14);
 --cf-shadow-lg:0 28px 56px -24px rgba(23,23,27,.4);

 /* Layout and controls. */
 --cf-content-max:1120px;
 --cf-content-narrow:720px;
 --cf-measure:68ch;
 --cf-control-height:44px;
 --cf-control-height-sm:36px;
 /* Shell sidebar widths: desktop, tablet (761–1000px) and collapsed. */
 --cf-sidebar-width:236px;
 --cf-sidebar-width-tablet:220px;
 --cf-sidebar-width-collapsed:88px;
 --cf-focus-width:3px;
 --cf-focus-offset:3px;
 /* Rings: geometry only; pair with a colour token, e.g. box-shadow:var(--cf-ring-inset) var(--cf-color-danger-text). */
 --cf-ring-inset:inset 0 0 0 1px;
 --cf-ring-halo:0 0 0 4px;
 --cf-bp-phone:760px;
 --cf-bp-tablet:1000px;
 --cf-bp-desktop:1001px;

 /* Motion: restrained; every duration becomes 0ms under reduced motion (below). */
 --cf-duration-fast:120ms;
 --cf-duration-base:200ms;
 --cf-duration-slow:320ms;
 --cf-ease-standard:cubic-bezier(.32,.72,0,1);
 --cf-ease-exit:cubic-bezier(.4,0,1,1);

 /* September 21 names, kept as aliases so every module follows the current shared palette. Note --cf-canvas is the page (paper role) and --cf-paper is the card (surface role). */
 --cf-canvas:var(--cf-color-paper);
 --cf-paper:var(--cf-color-surface);
 --cf-ink:var(--cf-color-ink);
 --cf-muted:var(--cf-color-muted);
 --cf-line:var(--cf-color-line);
 --cf-line-strong:var(--cf-color-line-strong);
 --cf-accent:var(--cf-color-accent);
 --cf-accent-deep:var(--cf-color-accent-strong);
 --cf-display:var(--cf-font-display);
}
/* Original references: theme-scoped tokens leave the public marketing palette intact. */
:root{
 --cf-ref-home-title:96px;--cf-ref-team-title:44px;--cf-ref-onboard-title:58px;
 --cf-ref-subtitle:22px;--cf-ref-panel-title:40px;--cf-ref-sheet-title:48px;
 --cf-ref-art-caption:13px;--cf-ref-body:20px;--cf-ref-option:22px;--cf-ref-paper:#ffffff;--cf-ref-paper-ink:#111111;
 --cf-ref-paper-muted:#666666;--cf-ref-paper-line:#e7e7e9;
 --cf-ref-home-panel-title:36px;--cf-ref-action:15px;--cf-ref-document-body:17.7px;--cf-ref-aside-title:40px;--cf-ref-zero:0px;--cf-ref-small-title:18px;--cf-ref-home-tablet:80px;--cf-ref-onboard-tablet:49px;--cf-ref-semicircle:100% 0 0 100%;
 --cf-ref-heading-weight:650;--cf-ref-shell-title:84px;--cf-ref-phone-title:48px;--cf-ref-radius:28px;--cf-ref-shadow:0 24px 60px rgba(0,0,0,.05);
}
:root[data-cofello-theme=light]{
 --cf-color-paper:#ffffff;--cf-color-surface:#ffffff;--cf-color-raised:#ffffff;--cf-color-sunken:#f5f5f7;
 --cf-color-ink:#000000;--cf-color-muted:#424245;--cf-color-line:#f2f2f2;--cf-color-line-strong:#e6e6e6;
 --cf-color-accent:#000000;--cf-color-accent-strong:#1d1d1f;--cf-color-accent-soft:#f5f5f7;--cf-color-on-accent:#ffffff;
 --cf-color-focus:#000000;--cf-font-display:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--cf-font-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--cf-weight-bold:600;--cf-weight-medium:500;
 --cf-text-display:clamp(56px,6.2vw,96px);
 --cf-leading-display:1.02;--cf-tracking-display:-.055em;
 --cf-shadow-sm:0 1px 1px rgba(0,0,0,.03);--cf-shadow-md:0 18px 50px rgba(0,0,0,.06);--cf-shadow-lg:0 36px 80px rgba(0,0,0,.08);
 --cf-sidebar-width:262px;--cf-content-max:1400px;
}
:root[data-cofello-theme=dark]{
 --cf-color-paper:#101112;--cf-color-surface:#17191b;--cf-color-raised:#1e2022;--cf-color-sunken:#131516;
 --cf-color-ink:#f4f5f6;--cf-color-muted:#b5b8c0;--cf-color-line:#34373a;--cf-color-line-strong:#5b5f64;--cf-color-control:#858a92;
 --cf-color-accent:#f4f5f6;--cf-color-accent-strong:#dfe2e5;--cf-color-accent-soft:#25282b;--cf-color-on-accent:#090a0b;--cf-color-focus:#e9edf2;
 --cf-color-scrim:rgba(0,0,0,.65);--cf-color-neutral-text:#c8cbd0;--cf-color-neutral-bg:#25282b;--cf-color-neutral-border:#858a92;
 --cf-color-success-text:#b4e6c8;--cf-color-success-bg:#172b20;--cf-color-success-border:#659174;
 --cf-color-warning-text:#f3d6a3;--cf-color-warning-bg:#352b1d;--cf-color-warning-border:#ad8037;
 --cf-color-danger-text:#ffb8b0;--cf-color-danger-bg:#381d1c;--cf-color-danger-border:#c37364;
 --cf-color-info-text:#badcf4;--cf-color-info-bg:#1b2b38;--cf-color-info-border:#6e8da4;
 --cf-font-display:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--cf-font-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--cf-weight-bold:600;--cf-weight-medium:500;
 --cf-sidebar-width:262px;--cf-content-max:1400px;
}
:root[data-original-screen=team]{--cf-sidebar-width:252px}
:root.shell-reduce-motion{--cf-duration-fast:0ms;--cf-duration-base:0ms;--cf-duration-slow:0ms}
@media (prefers-reduced-motion:reduce){:root{--cf-duration-fast:0ms;--cf-duration-base:0ms;--cf-duration-slow:0ms}}
/* ---- Public site & illustration tokens (phase 5c) ----------------------------------------
   The cofello.ai marketing site's own scale (styles.css): its product-illustration miniatures,
   display headlines, poster numerals, illustration radii and layered paper shadows. Each token
   reproduces a value the site already rendered. The illustration type, radius and shadow tokens
   are not for app UI (test/design-tokens.test.mjs fails if an application stylesheet uses one).
   Two groups are shared with the app: muted-strong (small text that must hold 4.5:1 at 7-11px)
   and marketing-only dark stage roles; authenticated Team uses the white app roles.
   The block sits in its own cascade layer so the app style guide, which lists the app system
   from the top-level :root rules, does not show the site scale. Nothing overrides these names. */
@layer cofello-site-tokens{
:root{
 --cf-color-muted-strong:color-mix(in srgb,var(--cf-color-muted) 45%,var(--cf-color-ink));
 /* Public marketing team illustration: dark stage colour roles. */
 --cf-stage-bg:var(--cf-color-ink);
 --cf-stage-raised:color-mix(in srgb,var(--cf-color-paper) 7%,var(--cf-color-ink));
 --cf-stage-hover:color-mix(in srgb,var(--cf-color-paper) 12%,var(--cf-color-ink));
 --cf-stage-line:color-mix(in srgb,var(--cf-color-paper) 22%,var(--cf-color-ink));
 --cf-stage-line-strong:color-mix(in srgb,var(--cf-color-paper) 40%,var(--cf-color-ink));
 --cf-stage-text:var(--cf-color-paper);
 --cf-stage-muted:color-mix(in srgb,var(--cf-color-paper) 74%,var(--cf-color-ink));
 --cf-stage-accent:color-mix(in srgb,var(--cf-color-accent) 45%,var(--cf-color-paper));
 --cf-stage-accent-tint:color-mix(in srgb,var(--cf-color-accent) 24%,var(--cf-color-ink));
 --cf-stage-focus:var(--cf-color-accent-soft);
 /* Illustration and headline type (site only). */
 --cf-text-headline-15:15px;
 --cf-text-headline-17:17px;
 --cf-text-headline-18:18px;
 --cf-text-headline-20:20px;
 --cf-text-headline-21:21px;
 --cf-text-headline-22:22px;
 --cf-text-headline-23:23px;
 --cf-text-headline-23-32:clamp(23px,2.3vw,32px);
 --cf-text-headline-24-36:clamp(24px,2.6vw,36px);
 --cf-text-headline-25:25px;
 --cf-text-headline-26:26px;
 --cf-text-headline-27:27px;
 --cf-text-headline-28:28px;
 --cf-text-headline-29:29px;
 --cf-text-headline-30:30px;
 --cf-text-headline-30-46:clamp(30px,3.2vw,46px);
 --cf-text-headline-31:31px;
 --cf-text-headline-33:33px;
 --cf-text-headline-33-46:clamp(33px,6vw,46px);
 --cf-text-headline-34:34px;
 --cf-text-headline-34-61:clamp(34px,4.1vw,61px);
 --cf-text-headline-34-65:clamp(34px,4.25vw,65px);
 --cf-text-headline-35:35px;
 --cf-text-headline-35-58:clamp(35px,4vw,58px);
 --cf-text-headline-36:36px;
 --cf-text-headline-36-58:clamp(36px,4vw,58px);
 --cf-text-headline-36-65:clamp(36px,4.5vw,65px);
 --cf-text-headline-37:37px;
 --cf-text-headline-38:38px;
 --cf-text-headline-38-76:clamp(38px,5vw,76px);
 --cf-text-headline-40:40px;
 --cf-text-headline-41:41px;
 --cf-text-headline-42:42px;
 --cf-text-headline-43:43px;
 --cf-text-headline-43-63:clamp(43px,8.5vw,63px);
 --cf-text-headline-43-77:clamp(43px,5vw,77px);
 --cf-text-headline-44:44px;
 --cf-text-headline-46:46px;
 --cf-text-headline-48-83:clamp(48px,5.7vw,83px);
 --cf-text-headline-48-85:clamp(48px,5.8vw,85px);
 --cf-text-headline-49:49px;
 --cf-text-headline-51:51px;
 --cf-text-headline-53:53px;
 --cf-text-headline-58:58px;
 --cf-text-headline-58-84:clamp(58px,10vw,84px);
 --cf-text-headline-70-132:clamp(70px,8.5vw,132px);
 --cf-text-headline-mark:.11em;
 --cf-text-illo-5:5px;
 --cf-text-illo-6:6px;
 --cf-text-illo-7:7px;
 --cf-text-illo-8:8px;
 --cf-text-illo-9:9px;
 --cf-text-illo-10:10px;
 --cf-text-illo-11:11px;
 --cf-text-poster-9vw:9vw;
 --cf-text-poster-15-1vw:15.1vw;
 --cf-text-poster-24vw:24vw;
 --cf-text-poster-27vw:27vw;
 --cf-text-poster-90-650:clamp(90px,27vw,650px);
 --cf-text-poster-100-355:clamp(100px,23.3vw,355px);
 --cf-radius-2xs:2px;
 --cf-radius-dome:50% 50% 5% 5%;
 --cf-radius-ellipse:50%;
 --cf-radius-illo-4:4px;
 --cf-radius-illo-5:5px;
 --cf-radius-illo-7:7px;
 --cf-radius-illo-8:8px;
 --cf-radius-illo-9:9px;
 --cf-radius-illo-12:12px;
 --cf-radius-illo-18:18px;
 --cf-radius-xs:3px;
 --cf-shadow-illo-hero-sheet:0 18px 35px color-mix(in srgb,var(--cf-color-ink) 8%,transparent);
 --cf-shadow-illo-work-sheet:0 18px 42px color-mix(in srgb,var(--cf-color-ink) 8%,transparent);
 --cf-shadow-illo-work-sheet-2:0 8px 20px color-mix(in srgb,var(--cf-color-ink) 5%,transparent);
 --cf-shadow-illo-output-bench:0 25px 60px color-mix(in srgb,var(--cf-color-ink) 4%,transparent);
 --cf-shadow-illo-disc:12px 22px 30px color-mix(in srgb,var(--cf-color-ink) 9%,transparent);
 --cf-shadow-illo-workflow-path:0 8px 20px color-mix(in srgb,var(--cf-color-ink) 3%,transparent);
 --cf-shadow-illo-method-book:18px 23px 35px color-mix(in srgb,var(--cf-color-ink) 10%,transparent);
 --cf-shadow-illo-work-sheet-3:0 12px 25px color-mix(in srgb,var(--cf-color-ink) 4%,transparent);
 --cf-shadow-illo-assembly-shell:0 18px 40px color-mix(in srgb,var(--cf-color-ink) 3%,transparent);
 --cf-shadow-illo-system-core:12px 18px 30px color-mix(in srgb,var(--cf-color-ink) 13%,transparent);
 --cf-shadow-illo-system-node:0 5px 10px color-mix(in srgb,var(--cf-color-ink) 2%,transparent);
 --cf-shadow-illo-mission-panels:0 20px 40px color-mix(in srgb,var(--cf-color-ink) 13%,transparent);
 --cf-shadow-illo-agent-plate:1px 2px 0 var(--cf-color-muted),3px 5px 0 var(--cf-color-ink),16px 25px 35px color-mix(in srgb,var(--cf-color-ink) 40%,transparent);
 --cf-shadow-illo-community-paper:10px 22px 35px color-mix(in srgb,var(--cf-color-ink) 9%,transparent);
 --cf-shadow-illo-system-core-2:7px 12px 0 var(--cf-color-line),18px 27px 40px color-mix(in srgb,var(--cf-color-ink) 13%,transparent);
 --cf-shadow-illo-system-node-2:3px 7px 15px color-mix(in srgb,var(--cf-color-ink) 5%,transparent);
 --cf-shadow-illo-assembly-deck:0 4px 0 var(--cf-color-line-strong),0 9px 0 var(--cf-color-line),0 30px 45px color-mix(in srgb,var(--cf-color-ink) 7%,transparent);
 --cf-shadow-illo-deck-hub:0 9px 20px color-mix(in srgb,var(--cf-color-ink) 13%,transparent);
 --cf-shadow-illo-assembly-shell-2:0 3px 0 var(--cf-color-line-strong),0 8px 0 var(--cf-color-line),0 24px 50px color-mix(in srgb,var(--cf-color-ink) 7%,transparent);
 --cf-shadow-illo-work-sheet-4:0 2px 0 var(--cf-color-line-strong),0 20px 36px color-mix(in srgb,var(--cf-color-ink) 13%,transparent);
 --cf-shadow-illo-output-bench-2:0 20px 40px color-mix(in srgb,var(--cf-color-ink) 7%,transparent);
 --cf-shadow-illo-output-choices:0 4px 7px color-mix(in srgb,var(--cf-color-ink) 2%,transparent);
 --cf-shadow-illo-output-choices-2:0 3px 6px color-mix(in srgb,var(--cf-color-ink) 13%,transparent);
 --cf-shadow-illo-output-display:0 3px 0 var(--cf-color-line-strong),0 25px 55px color-mix(in srgb,var(--cf-color-ink) 9%,transparent);
 --cf-shadow-illo-art-plinth:0 5px 0 var(--cf-color-control),0 12px 0 var(--cf-color-line-strong),0 24px 25px color-mix(in srgb,var(--cf-color-ink) 9%,transparent);
 --cf-shadow-illo-workflow-path-2:4px 5px 0 var(--cf-color-line),8px 14px 25px color-mix(in srgb,var(--cf-color-ink) 5%,transparent);
 --cf-shadow-illo-campaign-cover:6px 6px 0 var(--cf-color-control),15px 24px 35px color-mix(in srgb,var(--cf-color-ink) 14%,transparent);
 --cf-shadow-illo-mission-brief:5px 6px 0 var(--cf-color-muted),14px 22px 40px color-mix(in srgb,var(--cf-color-ink) 27%,transparent);
 --cf-shadow-illo-mission-console:3px 4px 0 var(--cf-color-muted),8px 9px 0 var(--cf-color-ink),15px 23px 40px color-mix(in srgb,var(--cf-color-ink) 33%,transparent);
 --cf-shadow-illo-specialist-avatar:0 2px 0 var(--cf-color-control);
 --cf-shadow-illo-mission-artifact:3px 4px 0 var(--cf-color-line),7px 10px 18px color-mix(in srgb,var(--cf-color-ink) 5%,transparent);
 --cf-shadow-illo-method-book-2:18px 28px 35px color-mix(in srgb,var(--cf-color-ink) 19%,transparent);
 --cf-shadow-illo-book-pages:3px 4px 0 var(--cf-color-line-strong);
 --cf-shadow-illo-method-insert:6px 12px 20px color-mix(in srgb,var(--cf-color-ink) 7%,transparent);
 --cf-shadow-illo-brief-preview:5px 6px 0 var(--cf-color-line-strong),10px 12px 0 var(--cf-color-line),17px 23px 35px color-mix(in srgb,var(--cf-color-ink) 7%,transparent);
 --cf-shadow-illo-brief-form:0 4px 0 var(--cf-color-line-strong),0 22px 40px color-mix(in srgb,var(--cf-color-ink) 7%,transparent);
 --cf-shadow-illo-campaign-cover-2:3px 4px 0 var(--cf-color-control),8px 13px 25px color-mix(in srgb,var(--cf-color-ink) 13%,transparent);
 --cf-shadow-illo-workspace-paper:4px 5px 0 var(--cf-color-line),0 20px 40px color-mix(in srgb,var(--cf-color-ink) 5%,transparent);
 --cf-shadow-illo-workspace-attachment:0 8px 20px color-mix(in srgb,var(--cf-color-ink) 4%,transparent);
}
}
/* ---- end public site tokens ---- */
/* Block 18 preview-only pastels; shared neutral surfaces and blue accent stay unchanged. */
:root{
 --cf-chat-body:14px;--cf-chat-detail:12px;--cf-chat-secondary:13px;--cf-chat-heading:24px;
 --cf-chat-preview-label:7px;--cf-chat-preview-text:9px;--cf-chat-small:10px;--cf-chat-caption:11px;--cf-chat-mark:25px;
 --cf-chat-preview-lavender:#f3f0f8;--cf-chat-preview-rose:#fcf0ef;--cf-chat-preview-mint:#edf5f1;--cf-chat-preview-sand:#f8f4e9;
 --cf-chat-radius-line:2px;--cf-chat-radius-button:8px;--cf-chat-radius-card:13px;
}
/* Block 18 home: original Cofello tokens from the founder's binding specification. */
:root{
 --cf-home-bg:#FFFFFF;--cf-home-shell:#F7F7F8;--cf-home-fg:#1F2328;--cf-home-muted:#6B7280;--cf-home-border:#E5E7EB;--cf-home-hover:#F1F2F4;
 --cf-home-accent:#2563EB;--cf-home-accent-hover:#1D4ED8;--cf-home-tint:#EFF4FF;--cf-home-ring:#93B4F8;--cf-home-white:#FFFFFF;
 --cf-home-body:15px;--cf-home-sm:14px;--cf-home-label:13px;--cf-home-xs:12px;--cf-home-caption:11px;--cf-home-title:20px;--cf-home-display:28px;--cf-home-sidebar:232px;--cf-home-zero:0px;
 --cf-home-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --cf-home-r6:6px;--cf-home-r8:8px;--cf-home-r12:12px;--cf-home-r16:16px;--cf-home-rfull:999px;
 --cf-home-card-hover:0 1px 3px rgb(0 0 0 / .08);--cf-home-focus:0 0 0 3px var(--cf-home-tint);
}
:root[data-cofello-theme=dark]{
 --cf-home-bg:#161A20;--cf-home-shell:#101318;--cf-home-fg:#F3F4F6;--cf-home-muted:#AAB2BF;--cf-home-border:#343C48;--cf-home-hover:#252C36;--cf-home-tint:#182C50;--cf-home-ring:#93B4F8;
}
/* @cofello-tokens:end */
/* ==== Shell chrome (redesign phase 5a) ================================================
   Sidebar, header, All saved work and Settings. Cofello Modern
   tokens only: every page in the shell uses the same white chrome, so the earlier dark base
   and its journey-shell overrides are one set of rules. The sidebar markup is built by
   application.js (pinned); only its presentation lives here. */
:root{--shell-width:var(--cf-sidebar-width)}
:focus-visible{outline:var(--cf-focus-width) solid var(--cf-color-focus);outline-offset:var(--cf-focus-offset)}
/* #app is laid out beside the sidebar. (1,1,1) outranks application.css #app.workspace-app. */
body.shell-active #app{width:auto;max-width:none;margin:0 0 0 var(--shell-width);padding:40px clamp(20px,3vw,48px) 72px;min-width:0}
body.shell-active{background:var(--cf-color-paper);color:var(--cf-color-ink);color-scheme:light}
body.shell-active .app-header{margin-left:var(--shell-width);padding:0 36px;height:68px;background:var(--cf-color-paper);border-bottom:0;color:var(--cf-color-muted)}
.shell-active .app-header > .brand{display:none}
body.shell-active .app-header .brand,body.shell-active .app-header .brand span{color:var(--cf-color-ink)}
body.shell-active .app-header .brand svg{color:var(--cf-color-ink);fill:currentColor}
body.shell-active .app-header .environment{color:var(--cf-color-muted)}
body.shell-active .app-header button{border-color:var(--cf-color-control);color:var(--cf-color-ink)}

/* Sidebar */
.shell-sidebar{position:fixed;inset:0 auto 0 0;width:var(--shell-width);z-index:20;display:flex;flex-direction:column;padding:24px 14px 18px;background:var(--cf-color-surface);border-right:0;color:var(--cf-color-ink);color-scheme:light;overflow-y:auto;font-family:var(--cf-font-sans)}
.shell-brand{display:flex;gap:11px;align-items:center;padding:0 12px 14px;color:var(--cf-color-ink);font-size:var(--cf-text-2xl);line-height:var(--cf-leading-2xl);font-weight:var(--cf-weight-bold);letter-spacing:-.05em;text-decoration:none}
.shell-brand svg{width:29px;height:32px;flex:none}
.shell-switcher{position:relative;margin-bottom:14px}
.shell-switcher summary{display:flex;align-items:center;gap:10px;padding:8px 9px;border:1px solid var(--cf-color-line-strong);border-radius:var(--cf-radius-md);background:var(--cf-color-surface);color:var(--cf-color-ink);cursor:pointer;list-style:none}
.shell-switcher summary::-webkit-details-marker{display:none}
.shell-switcher summary > .shell-nav-label{flex:1;min-width:0}
.shell-switcher small,.shell-identity small{display:block;margin-bottom:2px;color:var(--cf-color-muted);font-size:var(--cf-text-xs);line-height:1.2;font-weight:var(--cf-weight-regular);letter-spacing:.08em}
/* The business name wraps to at most two lines instead of truncating. */
.shell-switcher strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm);font-weight:var(--cf-weight-bold);overflow:hidden;overflow-wrap:anywhere}
.shell-avatar{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:var(--cf-radius-sm);background:var(--cf-color-ink);color:var(--cf-color-surface);font-size:var(--cf-text-md);font-weight:var(--cf-weight-bold)}
.shell-workspaces{margin-top:6px;padding:8px;border:1px solid var(--cf-color-line-strong);border-radius:var(--cf-radius-md);background:var(--cf-color-surface)}
.shell-workspaces a{display:block;padding:12px 6px;border-radius:var(--cf-radius-sm);font-size:var(--cf-text-sm);overflow-wrap:anywhere}
.shell-workspaces a:hover,.shell-workspaces a[aria-current]{background:var(--cf-color-sunken)}
.shell-nav{display:flex;flex-direction:column;gap:2px;flex:1}
/* Group labels are decorative headings (aria-hidden): the eyebrow look in muted ink (4.76:1 on the sidebar). */
.shell-group{margin:16px 8px 6px 12px;color:var(--cf-color-muted);font-size:var(--cf-text-xs);line-height:1.2;font-weight:var(--cf-weight-bold);letter-spacing:.04em;white-space:nowrap}
.shell-nav a,.shell-nav button{display:flex;align-items:center;gap:12px;min-height:40px;padding:9px 12px;border:1px solid transparent;border-radius:var(--cf-radius-md);background:transparent;color:var(--cf-color-ink);font-family:var(--cf-font-sans);font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm);font-weight:var(--cf-weight-regular);text-align:left;text-decoration:none}
.shell-nav a:hover,.shell-nav button:hover{background:var(--cf-color-line);color:var(--cf-color-ink)}
.shell-nav a[aria-current=page]{background:var(--cf-color-sunken);color:var(--cf-color-ink);border-color:transparent;font-weight:var(--cf-weight-bold);box-shadow:none}
.shell-nav a[aria-current=page] .shell-nav-icon{color:var(--cf-color-accent)}
.shell-nav-icon{display:grid;place-items:center;flex:none;width:20px;height:20px}
.shell-nav-icon svg{width:19px;height:19px}
/* The three primary places lead; business areas are subordinate. */
.shell-nav>a:nth-child(-n+3){min-height:44px;font-size:var(--cf-text-md);font-weight:var(--cf-weight-bold)}
.shell-nav .shell-group ~ a{min-height:34px;padding-block:6px;color:var(--cf-color-ink)}
.shell-nav .shell-group ~ a .shell-nav-icon svg{width:16px;height:16px}
.shell-nav .shell-group ~ a:not([aria-current]) .shell-nav-icon{color:var(--cf-color-muted)}
.shell-planned{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--cf-radius-md);color:var(--cf-color-muted);font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm)}
.shell-planned small{display:block;margin-top:1px;color:var(--cf-color-muted);font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs)}
.shell-nav-footer{margin-top:auto;padding-top:12px}
.shell-nav-footer a{min-height:36px}
.shell-nav-footer button{width:100%;cursor:pointer}
.shell-identity{display:flex;align-items:center;gap:10px;margin:20px 6px 0;padding-top:20px;border-top:0;color:var(--cf-color-ink);font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs)}
.shell-identity > .shell-nav-label{min-width:0;overflow-wrap:anywhere}
#shell-mobile-toggle{display:none;color:var(--cf-color-ink)}
.shell-tools{margin-top:18px}
.shell-tools>summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:11px 13px;border-radius:var(--cf-radius-md);color:var(--cf-color-ink);font-size:var(--cf-text-sm);cursor:pointer;list-style:none}
.shell-tools>summary:after{content:'⌄';margin-left:auto}
.shell-tools>summary:hover{background:var(--cf-color-line)}
.shell-tools a{margin-left:12px;font-size:var(--cf-text-sm)}

/* Collapsed, compact and phone sidebar. */
.shell-collapsed{--shell-width:var(--cf-sidebar-width-collapsed)}
.shell-collapsed .shell-sidebar .shell-nav-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.shell-collapsed .shell-brand{padding-inline:12px}
.shell-collapsed .shell-switcher summary{gap:0;padding:10px}
.shell-collapsed .shell-switcher summary > span:last-child{display:none}
.shell-collapsed .shell-workspaces{position:fixed;left:78px;top:112px;width:220px;max-height:60vh;overflow:auto}
.shell-collapsed .shell-identity{margin-inline:4px}
.shell-collapsed .shell-planned small,.shell-collapsed .shell-group{display:none}
.shell-collapsed .shell-tools>summary{padding-inline:10px}
.shell-collapsed .shell-tools>summary:after{display:none}
.shell-collapsed .shell-tools a{margin-left:0}
.shell-compact .shell-items li{padding:16px}
.shell-compact .shell-next{padding:24px;margin-bottom:28px}

/* Reduced motion (the OS setting or the in-app Settings switch) stops every animation and
   transition. The three :not(#\#) raise specificity to (3,0,0) so no module rule outranks it
   without an important flag; motion tokens also drop to 0ms (token section). */
.shell-reduce-motion *:not(#\#):not(#\#):not(#\#){scroll-behavior:auto;animation:none;transition:none}
.shell-reduce-motion *:not(#\#):not(#\#):not(#\#)::before,.shell-reduce-motion *:not(#\#):not(#\#):not(#\#)::after{animation:none;transition:none}
@media (prefers-reduced-motion:reduce){
 *:not(#\#):not(#\#):not(#\#){scroll-behavior:auto;animation:none;transition:none}
 *:not(#\#):not(#\#):not(#\#)::before,*:not(#\#):not(#\#):not(#\#)::after{animation:none;transition:none}
}
@media (min-width:761px) and (max-width:1000px){:root:not(.shell-collapsed){--shell-width:var(--cf-sidebar-width-tablet)}.shell-next-mark{display:none}}
@media (max-width:760px){
 body.shell-active .app-header{margin-left:0;padding:0 16px;gap:12px;height:60px}
 body.shell-active #app{margin:0;padding:26px 16px 48px;width:auto}
 #shell-mobile-toggle{display:block;min-height:44px;padding:8px 0;font-size:var(--cf-text-sm)}
 .shell-sidebar{display:none;position:static;width:auto;max-height:none;border-right:0;border-bottom:0}
 .shell-mobile-open .shell-sidebar{display:flex}
 .shell-mobile-open .app-header{position:sticky;top:0;z-index:30}
 .shell-sidebar .shell-brand{display:none}
 .shell-collapsed .shell-sidebar .shell-nav-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal}
 .shell-collapsed .shell-switcher summary{gap:10px}
 .shell-collapsed .shell-switcher summary > span:last-child{display:block}
 .shell-collapsed .shell-workspaces{position:static;width:auto;max-height:none}
 #sidebar-collapse{display:none}
 .shell-active .app-header > .brand{display:flex;margin-right:auto;gap:0;min-width:28px}
 .shell-active .app-header > .brand .brand-word,.shell-active .app-header > .brand sup{display:none}
 .shell-active .app-header > .brand .brand-icon{width:25px;height:28px}
 .shell-active .app-header .environment{display:none}
}

/* Route headings are focus destinations, not interactive controls. */
#app h1[tabindex="-1"]:focus,#app h2[tabindex="-1"]:focus{outline:none}

/* All saved work and Settings: the shared page header anatomy (eyebrow, sans-serif H1, description). */
.shell-overview,.shell-settings{max-width:var(--cf-content-max);margin:auto;min-width:0;color:var(--cf-color-ink)}
.shell-settings{max-width:840px}
.shell-page-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px}
.shell-page-title h1,.shell-settings h1{margin:0 0 var(--cf-space-3);font-family:var(--cf-font-display);font-size:var(--cf-text-display);line-height:var(--cf-leading-display);font-weight:var(--cf-weight-medium);letter-spacing:var(--cf-tracking-display);color:var(--cf-color-ink);overflow-wrap:anywhere}
.shell-page-title .secondary{white-space:nowrap}
.shell-overview .eyebrow,.shell-settings .eyebrow{margin:0 0 var(--cf-space-3);color:var(--cf-color-accent-strong);font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs);font-weight:var(--cf-weight-bold);letter-spacing:var(--cf-tracking-eyebrow);text-transform:uppercase}
.shell-intro{color:var(--cf-color-muted);font-size:var(--cf-text-lg);line-height:var(--cf-leading-lg)}
.shell-next{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:40px;padding:32px;border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-surface);box-shadow:var(--cf-shadow-md)}
.shell-next::before{content:none}
.shell-next h2{margin:14px 0 10px;font-size:var(--cf-text-2xl);line-height:var(--cf-leading-2xl);font-weight:var(--cf-weight-bold);overflow-wrap:anywhere}
.shell-next p:not(.eyebrow){max-width:650px;color:var(--cf-color-muted);line-height:var(--cf-leading-md)}
.shell-next .primary{margin-top:24px;gap:24px}
.shell-next-mark{padding-right:16px;color:var(--cf-color-muted);font-size:var(--cf-text-3xl);font-weight:var(--cf-weight-regular)}
.shell-library-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}
.shell-library-heading h2{font-weight:var(--cf-weight-bold)}
.shell-library-heading p{margin-top:7px;color:var(--cf-color-muted);font-size:var(--cf-text-sm)}
.shell-library-heading > a{color:var(--cf-color-accent-strong);font-size:var(--cf-text-sm);text-decoration:underline;text-underline-offset:4px}
.shell-bounds{max-width:770px;margin:18px 0 24px;color:var(--cf-color-muted);font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm)}
.shell-bounds summary{cursor:pointer}
.shell-bounds p{margin-top:12px}
.shell-filters{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:16px;margin-bottom:15px}
.shell-filters label{margin:0;color:var(--cf-color-ink);font-size:var(--cf-text-sm);font-weight:var(--cf-weight-bold)}
.shell-filters input,.shell-filters select{width:100%;height:45px;margin-top:8px;padding:9px 12px;border:1px solid var(--cf-color-control);border-radius:var(--cf-radius-sm);background:var(--cf-color-raised);color:var(--cf-color-ink);font:inherit;font-size:var(--cf-text-md);font-weight:var(--cf-weight-regular)}
#shell-filter-count{color:var(--cf-color-muted);font-size:var(--cf-text-xs)}
#shell-card-groups h3{margin:25px 0 13px;color:var(--cf-color-muted);font-size:var(--cf-text-sm);font-weight:var(--cf-weight-bold)}
.shell-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.shell-items li{display:flex;flex-direction:column;padding:22px;border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-surface);color:var(--cf-color-ink);overflow-wrap:anywhere}
.shell-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.shell-type{padding:2px 10px;border:1px solid var(--cf-color-neutral-border);border-radius:var(--cf-radius-pill);background:var(--cf-color-neutral-bg);color:var(--cf-color-neutral-text);font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs);font-weight:var(--cf-weight-bold)}
.shell-card-arrow{color:var(--cf-color-muted);font-size:var(--cf-text-xl)}
.shell-items a{color:var(--cf-color-ink);font-size:var(--cf-text-lg);line-height:var(--cf-leading-lg);font-weight:var(--cf-weight-bold)}
.shell-items a:hover{text-decoration:underline;text-underline-offset:4px}
.shell-items p{margin:10px 0 20px;color:var(--cf-color-muted);font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm)}
.shell-items small{margin-top:auto;color:var(--cf-color-muted);font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs)}
.shell-empty{padding:36px;border:1px dashed var(--cf-color-line-strong);border-radius:var(--cf-radius-lg);background:var(--cf-color-surface);color:var(--cf-color-muted);line-height:var(--cf-leading-md)}
.shell-empty > span{font-size:var(--cf-text-3xl)}
.shell-empty h3{margin:10px 0;color:var(--cf-color-ink);font-size:var(--cf-text-xl);font-weight:var(--cf-weight-bold)}
.shell-empty p{max-width:640px;margin:10px 0}
.shell-read-error{margin-bottom:20px;padding:20px;border:1px solid var(--cf-color-warning-border);border-radius:var(--cf-radius-md);background:var(--cf-color-warning-bg);color:var(--cf-color-ink);line-height:var(--cf-leading-md)}
.shell-read-error button{margin-top:12px}
.shell-previous-summary{margin:25px 0;color:var(--cf-color-muted);font-size:var(--cf-text-sm)}
.shell-previous-summary>summary{padding:16px 0;cursor:pointer}
.shell-previous-summary .shell-next{margin:10px 0 24px}
.shell-other-empty{margin:18px 0;padding:22px;font-size:var(--cf-text-sm)}
.shell-setting-panel{margin-top:28px;padding:28px;border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-surface);box-shadow:var(--cf-shadow-sm)}
.shell-setting-panel h2{margin-bottom:12px;font-size:var(--cf-text-xl);line-height:var(--cf-leading-xl);font-weight:var(--cf-weight-bold)}
.shell-setting-panel p{margin:8px 0;color:var(--cf-color-muted);line-height:var(--cf-leading-md)}
.shell-setting-panel .secondary{margin-top:16px}
.shell-setting-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:0}
.shell-setting-row label{margin:0;color:var(--cf-color-ink);font-size:var(--cf-text-md);font-weight:var(--cf-weight-bold);cursor:pointer}
.shell-setting-row p{max-width:510px;font-size:var(--cf-text-sm)}
/* Switch: the thumb position and fill both change, so state never relies on colour alone. */
.shell-switch{flex:none;display:flex;align-items:center;width:48px;height:28px;padding:3px;border:1px solid var(--cf-color-control);border-radius:var(--cf-radius-pill);background:var(--cf-color-sunken);cursor:pointer}
.shell-switch span{display:block;width:20px;height:20px;border-radius:var(--cf-radius-pill);background:var(--cf-color-control)}
.shell-switch[aria-checked=true]{justify-content:flex-end;border-color:var(--cf-color-accent);background:var(--cf-color-accent)}
.shell-switch[aria-checked=true] span{background:var(--cf-color-on-accent)}
#preference-status{padding-top:14px;font-size:var(--cf-text-sm)}
.shell-leave{box-sizing:border-box;width:32rem;max-width:calc(100vw - 2rem);padding:24px;border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-raised);color:var(--cf-color-ink);box-shadow:var(--cf-shadow-lg)}
.shell-leave::backdrop{background:var(--cf-color-scrim)}
.shell-leave h2{margin-bottom:16px;font-size:var(--cf-text-xl);font-weight:var(--cf-weight-bold)}
.shell-leave p{margin:12px 0;color:var(--cf-color-muted);line-height:var(--cf-leading-md)}
.shell-leave .form-actions{flex-wrap:wrap}
.shell-leave button{white-space:normal}
.shell-loading,.shell-error{padding:32px;line-height:var(--cf-leading-md)}
@media (max-width:760px){
 .shell-next{padding:24px}
 .shell-next-mark{display:none}
 .shell-page-title{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:24px}
 .shell-library-heading{align-items:flex-start;flex-direction:column}
 .shell-filters{grid-template-columns:1fr}
 .shell-items{grid-template-columns:1fr}
 .shell-empty{padding:24px}
 .shell-setting-panel{padding:20px}
 .shell-setting-row{gap:16px}
 .shell-setting-panel strong{overflow-wrap:anywhere}
 .shell-leave .form-actions{display:grid}
}

/* Shared journey pieces rendered by several modules (conversation, website library). */
.shell-active :is(.journey-sites .journey-site,.assistant-thread-list a){background:var(--cf-color-surface);border-color:var(--cf-color-line);color:var(--cf-color-ink)}
/* Primary actions keep the on-accent text colour (journey.css .journey-actions .primary). */
.shell-active .journey-site :is(strong,small,a:not(.primary):not(.cf-btn--primary)){color:var(--cf-color-ink)}
.shell-active .journey-site small{color:var(--cf-color-muted)}
.shell-active .starter-library a{background:var(--cf-color-surface);border-color:var(--cf-color-line);color:var(--cf-color-ink)}
.shell-active :is(.starter-library span,.assistant-thread-list span){color:var(--cf-color-muted)}
.shell-active :is(.assistant-thread-list a,.starter-library a):hover{background:var(--cf-color-raised)}
/* Conversation secondary actions (Copy draft, Retry, Check saved response): the .cf-btn secondary look. */
.shell-active .assistant :is(button.secondary,[data-copy]){background:var(--cf-color-surface);color:var(--cf-color-ink);border:1px solid var(--cf-color-control)}
.shell-active .assistant :is(button.secondary,[data-copy]):hover:not(:disabled){background:var(--cf-color-raised);border-color:var(--cf-color-ink)}
.shell-active .assistant-context-failure{margin:0 0 12px;padding:12px 14px;border:1px solid var(--cf-color-warning-border);border-radius:var(--cf-radius-md);background:var(--cf-color-warning-bg);color:var(--cf-color-ink)}
.shell-active .assistant-context-failure p{margin:0 0 8px}

/* ==== Cofello Warm components (redesign phase 0) ====================================
   One version of each shared component. Tokens only: no raw colour, font family or font
   size (test/design-tokens.test.mjs). Usage rules: DESIGN.md. Living reference:
   #/workspaces/<id>/style-guide. Phases 1–5 migrate module markup onto these classes;
   until then no existing page uses them, so adding them changes no current surface. */
/* Labels, inputs and section headings repeat their class (.cf-input.cf-input) to outrank the
   legacy element rules every page still loads (application.css: .workspace-app label,
   .workspace-app input:focus{outline:none}). Drop the repetition once phase 5 deletes them. */
.cf-link{color:var(--cf-color-accent-strong);font-weight:var(--cf-weight-regular);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cf-link:hover{text-decoration-thickness:2px}
:is(.cf-btn,.cf-tab,.cf-link,.cf-tile,.cf-row a,.cf-notice,.cf-dialog):focus-visible,:is(.cf-input.cf-input,.cf-check.cf-check input):focus-visible{outline:var(--cf-focus-width) solid var(--cf-color-focus);outline-offset:var(--cf-focus-offset);box-shadow:none}
.cf-h2.cf-h2{margin:0;font-family:var(--cf-font-sans);font-size:var(--cf-text-2xl);line-height:var(--cf-leading-2xl);font-weight:var(--cf-weight-bold);letter-spacing:-.01em;color:var(--cf-color-ink)}
.cf-h3.cf-h3{margin:0;font-family:var(--cf-font-sans);font-size:var(--cf-text-xl);line-height:var(--cf-leading-xl);font-weight:var(--cf-weight-bold);color:var(--cf-color-ink)}
.cf-caption{margin:0;font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm);color:var(--cf-color-muted)}

/* Page header: eyebrow, H1 (the only serif), description, actions. */
.cf-page-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--cf-space-5) var(--cf-space-8);margin:0 0 var(--cf-space-10);padding:0 0 var(--cf-space-8);border-bottom:0;font-family:var(--cf-font-sans);color:var(--cf-color-ink)}
.cf-page-header__text{flex:1 1 420px;min-width:0;max-width:var(--cf-content-narrow)}
.cf-eyebrow{margin:0 0 var(--cf-space-3);font-family:var(--cf-font-sans);font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs);font-weight:var(--cf-weight-bold);letter-spacing:var(--cf-tracking-eyebrow);text-transform:uppercase;color:var(--cf-color-accent-strong)}
.cf-page-header h1,.cf-h1{margin:0;font-family:var(--cf-font-display);font-size:var(--cf-text-display);line-height:var(--cf-leading-display);font-weight:var(--cf-weight-medium);letter-spacing:var(--cf-tracking-display);color:var(--cf-color-ink);overflow-wrap:anywhere}
.cf-page-header__description{margin:var(--cf-space-4) 0 0;font-size:var(--cf-text-lg);line-height:var(--cf-leading-lg);color:var(--cf-color-muted);max-width:var(--cf-measure)}
.cf-page-header__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-3)}

/* Buttons: default (secondary), primary, quiet, danger; sm and default sizes. */
.cf-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--cf-space-2);min-height:var(--cf-control-height);max-width:100%;margin:0;padding:var(--cf-space-2) var(--cf-space-5);border:1px solid var(--cf-color-control);border-radius:var(--cf-radius-md);background:var(--cf-color-surface);color:var(--cf-color-ink);font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-sm);font-weight:var(--cf-weight-regular);text-align:center;text-decoration:none;white-space:normal;overflow-wrap:normal;word-break:normal;cursor:pointer;opacity:1;transition:background-color var(--cf-duration-fast) var(--cf-ease-standard),border-color var(--cf-duration-fast) var(--cf-ease-standard),color var(--cf-duration-fast) var(--cf-ease-standard)}
/* Hover never restyles a disabled button (disabled or aria-disabled="true"). */
.cf-btn:hover:not(:disabled,[aria-disabled=true]){background:var(--cf-color-raised);border-color:var(--cf-color-ink);color:var(--cf-color-ink)}
.cf-btn--primary{background:var(--cf-color-accent);border-color:var(--cf-color-accent);color:var(--cf-color-on-accent)}
.cf-btn--primary:hover:not(:disabled,[aria-disabled=true]){background:var(--cf-color-accent-strong);border-color:var(--cf-color-accent-strong);color:var(--cf-color-on-accent)}
.cf-btn--quiet{background:transparent;border-color:transparent;color:var(--cf-color-accent-strong);padding-inline:var(--cf-space-3)}
.cf-btn--quiet:hover:not(:disabled,[aria-disabled=true]){background:var(--cf-color-accent-soft);border-color:transparent;color:var(--cf-color-accent-strong)}
.cf-btn--danger{background:var(--cf-color-danger-bg);border-color:var(--cf-color-danger-border);color:var(--cf-color-danger-text)}
.cf-btn--danger:hover:not(:disabled,[aria-disabled=true]){background:var(--cf-color-danger-text);border-color:var(--cf-color-danger-text);color:var(--cf-color-on-accent)}
.cf-btn--sm{min-height:var(--cf-control-height-sm);padding:var(--cf-space-1) var(--cf-space-4);font-size:var(--cf-text-sm)}
.cf-btn--block{width:100%}
.cf-btn:disabled,.cf-btn[aria-disabled=true]{background:var(--cf-color-sunken);border-color:var(--cf-color-line-strong);color:var(--cf-color-muted);cursor:not-allowed;opacity:1}
.cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-3)}

/* Status chip: text always states the status; colour only reinforces it. */
.cf-chip{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--cf-space-2);min-height:26px;max-width:100%;padding:var(--cf-space-1) var(--cf-space-3);border:1px solid var(--cf-color-neutral-border);border-radius:var(--cf-radius-pill);background:var(--cf-color-neutral-bg);color:var(--cf-color-neutral-text);font-family:var(--cf-font-sans);font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs);font-weight:var(--cf-weight-bold);white-space:nowrap}
.cf-chip::before{content:"";flex:none;width:6px;height:6px;border-radius:var(--cf-radius-pill);background:currentColor}
.cf-chip--success{border-color:var(--cf-color-success-border);background:var(--cf-color-success-bg);color:var(--cf-color-success-text)}
.cf-chip--warning{border-color:var(--cf-color-warning-border);background:var(--cf-color-warning-bg);color:var(--cf-color-warning-text)}
.cf-chip--danger{border-color:var(--cf-color-danger-border);background:var(--cf-color-danger-bg);color:var(--cf-color-danger-text)}
.cf-chip--info{border-color:var(--cf-color-info-border);background:var(--cf-color-info-bg);color:var(--cf-color-info-text)}
.cf-chip--accent{border-color:var(--cf-color-accent);background:var(--cf-color-accent-soft);color:var(--cf-color-accent-strong)}

/* Card (a container of content) and tile (one linked item in a grid). */
.cf-card{box-sizing:border-box;min-width:0;padding:var(--cf-space-6);border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-surface);color:var(--cf-color-ink);box-shadow:var(--cf-shadow-sm)}
.cf-card__header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cf-space-2) var(--cf-space-4);margin:0 0 var(--cf-space-3)}
.cf-card__title{margin:0;font-size:var(--cf-text-xl);line-height:var(--cf-leading-xl);font-weight:var(--cf-weight-bold);overflow-wrap:anywhere}
.cf-card__body{margin:0;color:var(--cf-color-muted);font-size:var(--cf-text-md);line-height:var(--cf-leading-md)}
.cf-card__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-3);margin:var(--cf-space-5) 0 0;padding:var(--cf-space-4) 0 0;border-top:0}
.cf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--cf-space-4)}
.cf-tile{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:var(--cf-space-2);min-width:0;padding:var(--cf-space-5);border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-surface);color:var(--cf-color-ink);text-decoration:none;transition:border-color var(--cf-duration-fast) var(--cf-ease-standard),box-shadow var(--cf-duration-base) var(--cf-ease-standard),background-color var(--cf-duration-fast) var(--cf-ease-standard)}
a.cf-tile:hover{border-color:var(--cf-color-line-strong);background:var(--cf-color-raised);box-shadow:var(--cf-shadow-md)}
.cf-tile__kind{margin:0;font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs);font-weight:var(--cf-weight-bold);letter-spacing:var(--cf-tracking-eyebrow);text-transform:uppercase;color:var(--cf-color-accent-strong)}
.cf-tile__title{margin:0;font-size:var(--cf-text-lg);line-height:var(--cf-leading-lg);font-weight:var(--cf-weight-bold);overflow-wrap:anywhere}
.cf-tile__meta{margin:0;font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm);color:var(--cf-color-muted)}

/* Notice: info, success, warning, error. Status notices use role=status; errors role=alert.
   A notice that reports the result of an action receives focus (tabindex=-1). */
.cf-notice{box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--cf-space-1) var(--cf-space-3);margin:0 0 var(--cf-space-4);padding:var(--cf-space-4) var(--cf-space-5);border:1px solid var(--cf-color-info-border);border-left-width:4px;border-radius:var(--cf-radius-md);background:var(--cf-color-info-bg);color:var(--cf-color-ink);font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-md)}
.cf-notice__icon{grid-row:1 / span 3;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:var(--cf-radius-pill);background:var(--cf-color-info-text);color:var(--cf-color-on-accent);font-size:var(--cf-text-xs);line-height:1;font-weight:var(--cf-weight-bold)}
.cf-notice__title{margin:0;font-weight:var(--cf-weight-bold);color:var(--cf-color-info-text)}
.cf-notice__body{grid-column:2;margin:0}
.cf-notice__actions{grid-column:2;display:flex;flex-wrap:wrap;gap:var(--cf-space-2);margin:var(--cf-space-2) 0 0}
.cf-notice--success{border-color:var(--cf-color-success-border);background:var(--cf-color-success-bg)}
.cf-notice--success :is(.cf-notice__title){color:var(--cf-color-success-text)}.cf-notice--success .cf-notice__icon{background:var(--cf-color-success-text)}
.cf-notice--warning{border-color:var(--cf-color-warning-border);background:var(--cf-color-warning-bg)}
.cf-notice--warning :is(.cf-notice__title){color:var(--cf-color-warning-text)}.cf-notice--warning .cf-notice__icon{background:var(--cf-color-warning-text)}
.cf-notice--error{border-color:var(--cf-color-danger-border);background:var(--cf-color-danger-bg)}
.cf-notice--error :is(.cf-notice__title){color:var(--cf-color-danger-text)}.cf-notice--error .cf-notice__icon{background:var(--cf-color-danger-text)}
.cf-notice ul{margin:var(--cf-space-1) 0 0;padding-left:var(--cf-space-5)}

/* Section sub-navigation (tabs). Use role=tablist for in-page panels, or <nav> with
   aria-current=page links for sub-routes; the look is the same.
   Responsive rule (every width, including 761–1000px beside the sidebar): tabs stay on ONE
   row and never wrap. When they do not fit, the row scrolls sideways inside its own box
   (no scroll snapping: it re-aligned a keyboard-focused tab out of view) and the page never
   scrolls horizontally; min-width:0 lets the row
   shrink inside flex and grid parents. Modules drawing tabs follow the same rule. */
.cf-tabs{display:flex;flex-wrap:nowrap;gap:var(--cf-space-1);min-width:0;max-width:100%;margin:0 0 var(--cf-space-6);padding:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-padding-inline:var(--cf-space-4);border-bottom:0;scrollbar-width:thin;list-style:none}
.cf-tab{box-sizing:border-box;display:inline-flex;align-items:center;flex:none;min-height:var(--cf-control-height);margin:0 0 -1px;padding:0 var(--cf-space-4);border:0;border-bottom:2px solid transparent;border-radius:var(--cf-radius-sm) var(--cf-radius-sm) 0 0;background:transparent;color:var(--cf-color-muted);font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-sm);font-weight:var(--cf-weight-regular);white-space:nowrap;text-decoration:none;cursor:pointer;transition:color var(--cf-duration-fast) var(--cf-ease-standard),border-color var(--cf-duration-fast) var(--cf-ease-standard)}
.cf-tab:hover{color:var(--cf-color-ink);background:var(--cf-color-sunken)}
.cf-tab[aria-selected=true],.cf-tab[aria-current=page]{color:var(--cf-color-ink);border-bottom-color:var(--cf-color-accent);font-weight:var(--cf-weight-bold)}
/* A tab reserves its bold width (data-label repeats the text) so selecting it never shifts the row. */
.cf-tab[data-label]{flex-direction:column;justify-content:center}
.cf-tab[data-label]::after{content:attr(data-label) / "";height:0;overflow:hidden;visibility:hidden;font-weight:var(--cf-weight-bold);pointer-events:none}
.cf-tab:focus-visible{outline-offset:calc(var(--cf-focus-width) * -1)}

/* Stage rail: an ordered list of steps. Each step states its state in text. */
.cf-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0;padding:0;list-style:none;font-family:var(--cf-font-sans)}
.cf-rail__step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--cf-space-2);min-width:0;padding:0 var(--cf-space-3) 0 0}
.cf-rail__step::before{content:"";position:absolute;top:13px;left:32px;right:var(--cf-space-2);height:2px;border-radius:var(--cf-radius-pill);background:var(--cf-color-line-strong)}
.cf-rail__step:last-child::before{display:none}
.cf-rail__mark{box-sizing:border-box;position:relative;display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--cf-color-control);border-radius:var(--cf-radius-pill);background:var(--cf-color-surface);color:var(--cf-color-muted);font-size:var(--cf-text-xs);line-height:1;font-weight:var(--cf-weight-bold)}
.cf-rail__text{display:flex;flex-direction:column;min-width:0}
.cf-rail__label{font-size:var(--cf-text-md);line-height:var(--cf-leading-sm);font-weight:var(--cf-weight-bold);color:var(--cf-color-ink);overflow-wrap:anywhere}
.cf-rail__state{font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs);color:var(--cf-color-muted)}
.cf-rail__step--done::before{background:var(--cf-color-success-border)}
.cf-rail__step--done .cf-rail__mark{border-color:var(--cf-color-success-text);background:var(--cf-color-success-text);color:var(--cf-color-on-accent)}
.cf-rail__step--done .cf-rail__state{color:var(--cf-color-success-text)}
.cf-rail__step[aria-current=step] .cf-rail__mark{border-color:var(--cf-color-accent);background:var(--cf-color-accent);color:var(--cf-color-on-accent);box-shadow:var(--cf-ring-halo) var(--cf-color-accent-soft)}
.cf-rail__step[aria-current=step] .cf-rail__state{color:var(--cf-color-accent-strong);font-weight:var(--cf-weight-bold)}
.cf-rail__step--attention .cf-rail__mark{border-color:var(--cf-color-warning-border);background:var(--cf-color-warning-bg);color:var(--cf-color-warning-text)}
.cf-rail__step--attention .cf-rail__state{color:var(--cf-color-warning-text)}
.cf-rail__step--blocked .cf-rail__mark{border-color:var(--cf-color-danger-border);background:var(--cf-color-danger-bg);color:var(--cf-color-danger-text)}
.cf-rail__step--blocked .cf-rail__state{color:var(--cf-color-danger-text)}

/* Form fields: label, optional hint, control, error. Errors name the problem in text and
   set aria-invalid plus aria-describedby on the control. */
.cf-form{max-width:var(--cf-content-narrow)}
.cf-field{display:grid;gap:var(--cf-space-2);min-width:0;margin:0 0 var(--cf-space-5);border:0;padding:0}
.cf-field__label.cf-field__label,.cf-field.cf-field legend{display:block;margin:0;padding:0;font-family:var(--cf-font-sans);font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm);font-weight:var(--cf-weight-bold);color:var(--cf-color-ink)}
.cf-field__hint{margin:0;font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm);color:var(--cf-color-muted)}
.cf-field__error{display:flex;align-items:flex-start;gap:var(--cf-space-2);margin:0;font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm);font-weight:var(--cf-weight-bold);color:var(--cf-color-danger-text)}
.cf-field__error[hidden]{display:none}
.cf-input.cf-input{box-sizing:border-box;display:block;width:100%;max-width:100%;min-height:var(--cf-control-height);margin:0;padding:var(--cf-space-2) var(--cf-space-3);border:1px solid var(--cf-color-line);border-radius:var(--cf-radius-md);background:var(--cf-color-raised);color:var(--cf-color-ink);font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-md);transition:border-color var(--cf-duration-fast) var(--cf-ease-standard)}
textarea.cf-input.cf-input{min-height:calc(3lh + var(--cf-space-2));resize:vertical}
select.cf-input.cf-input{appearance:auto;padding-right:var(--cf-space-2)}
.cf-input.cf-input::placeholder{color:var(--cf-color-muted);opacity:1}
.cf-input.cf-input:hover{border-color:var(--cf-color-ink)}
.cf-input.cf-input:focus{border-color:var(--cf-color-ink);box-shadow:none}
.cf-input.cf-input[aria-invalid=true]{border-color:var(--cf-color-danger-text);box-shadow:var(--cf-ring-inset) var(--cf-color-danger-text)}
.cf-input.cf-input:disabled{background:var(--cf-color-sunken);border-color:var(--cf-color-line-strong);color:var(--cf-color-muted);cursor:not-allowed}
.cf-check.cf-check{display:flex;align-items:flex-start;gap:var(--cf-space-3);min-height:var(--cf-control-height);margin:0;padding:var(--cf-space-2) 0;font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-md);font-weight:var(--cf-weight-regular);color:var(--cf-color-ink);cursor:pointer}
.cf-check.cf-check input{flex:none;width:20px;height:20px;min-height:0;margin:2px 0 0;padding:0;accent-color:var(--cf-color-accent);cursor:pointer}

/* Dialog: native <dialog> opened with showModal(); Escape closes; focus returns to the opener. */
.cf-dialog{box-sizing:border-box;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 64px);padding:0;border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-raised);color:var(--cf-color-ink);box-shadow:var(--cf-shadow-lg);font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-md)}
.cf-dialog::backdrop{background:var(--cf-color-scrim)}
.cf-dialog[open]{animation:cf-dialog-in var(--cf-duration-base) var(--cf-ease-standard)}
.cf-dialog__body{padding:var(--cf-space-6) var(--cf-space-6) var(--cf-space-5)}
.cf-dialog__title{margin:0 0 var(--cf-space-3);font-size:var(--cf-text-xl);line-height:var(--cf-leading-xl);font-weight:var(--cf-weight-bold);color:var(--cf-color-ink)}
.cf-dialog__body p{margin:0 0 var(--cf-space-3);color:var(--cf-color-muted)}
.cf-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--cf-space-3);padding:var(--cf-space-4) var(--cf-space-6);border-top:0;background:var(--cf-color-surface)}
@keyframes cf-dialog-in{from{opacity:0;transform:translateY(8px)}}

/* Empty, loading and error states for a region that has no content to show. */
.cf-state{box-sizing:border-box;display:grid;justify-items:start;align-content:start;gap:var(--cf-space-3);min-width:0;padding:var(--cf-space-8) var(--cf-space-6);border:1px dashed var(--cf-color-line-strong);border-radius:var(--cf-radius-lg);background:var(--cf-color-surface);color:var(--cf-color-ink);font-family:var(--cf-font-sans)}
.cf-state__title{margin:0;font-size:var(--cf-text-xl);line-height:var(--cf-leading-xl);font-weight:var(--cf-weight-bold)}
.cf-state__body{margin:0;max-width:var(--cf-measure);font-size:var(--cf-text-md);line-height:var(--cf-leading-md);color:var(--cf-color-muted)}
.cf-state--loading{border-style:solid;border-color:var(--cf-color-line)}
.cf-state--error{border-style:solid;border-color:var(--cf-color-danger-border);background:var(--cf-color-danger-bg)}
.cf-state--error .cf-state__title{color:var(--cf-color-danger-text)}
.cf-state--error .cf-state__body{color:var(--cf-color-ink)}
.cf-spinner{box-sizing:border-box;display:inline-block;width:22px;height:22px;border:3px solid var(--cf-color-line-strong);border-top-color:var(--cf-color-accent);border-radius:var(--cf-radius-pill);animation:cf-spin 900ms linear infinite}
.cf-skeleton{display:block;height:12px;border-radius:var(--cf-radius-sm);background:var(--cf-color-sunken)}
@keyframes cf-spin{to{transform:rotate(1turn)}}

/* List rows: one saved item per row, title first, one action at the end. */
.cf-rows{margin:0;padding:0;list-style:none;border-top:0}
.cf-row{display:flex;align-items:center;justify-content:space-between;gap:var(--cf-space-3) var(--cf-space-5);min-width:0;padding:var(--cf-space-4) 0;border-bottom:0;color:var(--cf-color-ink);font-family:var(--cf-font-sans)}
.cf-row__main{flex:1 1 auto;min-width:0}
.cf-row__title{margin:0;font-size:var(--cf-text-lg);line-height:var(--cf-leading-lg);font-weight:var(--cf-weight-bold);overflow-wrap:anywhere}
.cf-row__title a{color:inherit;text-decoration:none}
.cf-row__title a:hover{text-decoration:underline;text-underline-offset:3px}
.cf-row__meta{margin:var(--cf-space-1) 0 0;font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm);color:var(--cf-color-muted)}
.cf-row__aside{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:var(--cf-space-3)}

@media (max-width:760px){
 .cf-page-header{margin-bottom:var(--cf-space-8);padding-bottom:var(--cf-space-6)}
 .cf-page-header__actions{width:100%}
 .cf-rail{grid-auto-flow:row;grid-auto-columns:auto;gap:0}
 .cf-rail__step{flex-direction:row;gap:var(--cf-space-3);padding:0 0 var(--cf-space-4)}
 .cf-rail__step::before{top:32px;bottom:4px;left:13px;right:auto;width:2px;height:auto}
 .cf-row{flex-direction:column;align-items:flex-start}
 .cf-dialog__actions{flex-direction:column-reverse;align-items:stretch}
 .cf-state{padding:var(--cf-space-6) var(--cf-space-5)}
}

/* ---- Living style guide (#/workspaces/<id>/style-guide). Page-only layout helpers. ---- */
.cf-sg{box-sizing:border-box;max-width:var(--cf-content-max);margin:0 auto;color:var(--cf-color-ink);font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-md)}
.cf-sg *{box-sizing:border-box;min-width:0}
.cf-sg p{margin:0}
.cf-sg-toc{display:flex;flex-wrap:wrap;gap:var(--cf-space-2) var(--cf-space-5);margin:0 0 var(--cf-space-10);padding:0;list-style:none;font-size:var(--cf-text-sm)}
.cf-sg-section{margin:0 0 var(--cf-space-16);scroll-margin-top:var(--cf-space-6)}
.cf-sg-section:focus{outline:none} /* a jump target, not a control (as #app h1[tabindex="-1"]) */
.cf-sg-section > .cf-h2{margin:0 0 var(--cf-space-2)}
.cf-sg-section > .cf-caption{margin:0 0 var(--cf-space-6);max-width:var(--cf-measure)}
.cf-sg-block{margin:0 0 var(--cf-space-10)}
.cf-sg-block > .cf-h3{margin:0 0 var(--cf-space-4)}
.cf-sg-block > .cf-caption{margin:calc(var(--cf-space-2) * -1) 0 var(--cf-space-4)}
.cf-sg-swatches{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:var(--cf-space-4)}
.cf-sg-swatch{overflow:hidden;border:0;border-radius:var(--cf-radius-md);background:var(--cf-color-surface)}
.cf-sg-swatch__color{height:64px;border-bottom:0}
.cf-sg-swatch__text{display:grid;gap:2px;padding:var(--cf-space-3)}
.cf-sg-swatch__text strong{font-size:var(--cf-text-sm);font-weight:var(--cf-weight-bold)}
.cf-sg-swatch__text code,.cf-sg code{font-family:var(--cf-font-mono);font-size:var(--cf-text-xs);color:var(--cf-color-ink);overflow-wrap:anywhere}
.cf-sg-swatch__text span{font-size:var(--cf-text-xs);color:var(--cf-color-muted)}
.cf-sg-table{width:100%;border-collapse:collapse;font-size:var(--cf-text-sm)}
.cf-sg-table th:first-child{width:30%}.cf-sg-table th:nth-child(2){width:38%}
.cf-sg-table--status th:first-child{width:16%}.cf-sg-table--status th:nth-child(2){width:42%}
.cf-sg-swatch-mini{display:inline-block;width:18px;height:18px;margin-right:var(--cf-space-2);vertical-align:-4px;border:1px solid var(--cf-color-line-strong);border-radius:var(--cf-radius-sm)}
.cf-sg-table caption{text-align:left;padding:0 0 var(--cf-space-2);color:var(--cf-color-muted)}
.cf-sg-table :is(th,td){padding:var(--cf-space-2) var(--cf-space-3) var(--cf-space-2) 0;border-bottom:0;text-align:left;vertical-align:baseline}
.cf-sg-table th{font-weight:var(--cf-weight-bold);color:var(--cf-color-muted);font-size:var(--cf-text-xs);letter-spacing:.04em;text-transform:uppercase}
.cf-sg-scroll{overflow-x:auto}
.cf-sg-type{display:grid;gap:0;border-top:0}
.cf-sg-type__row{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);align-items:baseline;gap:var(--cf-space-2) var(--cf-space-5);padding:var(--cf-space-4) 0;border-bottom:0}
.cf-sg-type__meta{display:grid;gap:2px;font-size:var(--cf-text-xs);color:var(--cf-color-muted)}
.cf-sg-type__sample{overflow-wrap:anywhere}
.cf-sg-bars{display:grid;gap:var(--cf-space-2)}
.cf-sg-bar{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);align-items:center;gap:var(--cf-space-4);font-size:var(--cf-text-xs);color:var(--cf-color-muted)}
.cf-sg-bar > span:last-child{height:var(--cf-space-2);border-radius:var(--cf-radius-pill);background:var(--cf-color-accent)}
.cf-sg-shapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:var(--cf-space-5)}
.cf-sg-shape{display:grid;place-items:center;min-height:96px;padding:var(--cf-space-3);border:1px solid var(--cf-color-line-strong);background:var(--cf-color-raised);text-align:center;font-size:var(--cf-text-xs);color:var(--cf-color-muted)}
.cf-sg-demo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-3);margin:0 0 var(--cf-space-4)}
.cf-sg-panel{padding:var(--cf-space-6);border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-surface)}
.cf-sg-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--cf-space-5)}
.cf-sg-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--cf-space-4)}
.cf-sg-motion{position:relative;height:40px;border:0;border-radius:var(--cf-radius-pill);background:var(--cf-color-raised)}
.cf-sg-motion > span{position:absolute;top:7px;left:8px;width:24px;height:24px;border-radius:var(--cf-radius-pill);background:var(--cf-color-accent);transition:transform var(--cf-duration-slow) var(--cf-ease-standard)}
.cf-sg-motion[data-moved] > span{transform:translateX(min(420px,calc(100vw - 180px)))}
.cf-sg-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--cf-space-4);margin:0;padding:0;list-style:none}
.cf-sg-rules li{padding:var(--cf-space-4) var(--cf-space-5);border:0;border-radius:var(--cf-radius-md);background:var(--cf-color-surface)}
.cf-sg-rules strong{display:block;margin:0 0 var(--cf-space-1)}
@media (max-width:760px){
 .cf-sg-type__row,.cf-sg-bar{grid-template-columns:1fr}
 .cf-sg-section{margin-bottom:var(--cf-space-12)}
}

/* September 29: native app entry and workspace cards share the modern controls. */
body :is(.primary,.secondary){border-radius:var(--cf-radius-md)}
body .auth-panel h1{font-weight:var(--cf-weight-bold);letter-spacing:var(--cf-tracking-display)}
body .workspace-app .workspace-card{min-height:240px;box-shadow:var(--cf-shadow-sm)}
body .workspace-app .workspace-card:hover{box-shadow:var(--cf-shadow-md)}
/* SHELL-T5: the signed-in frame sits on white paper, not the sunken well. */
body.shell-active{background:var(--cf-color-paper)}
body.shell-active:has(.cf-onboard){background:var(--cf-color-paper)}
.shell-nav{gap:var(--cf-space-2)}
.shell-nav>a:nth-child(-n+3){min-height:48px}
.shell-nav .shell-group ~ a{min-height:40px;padding-block:var(--cf-space-2)}
.shell-group{margin-top:var(--cf-space-6);margin-bottom:var(--cf-space-2)}
body.shell-active #app{padding-top:var(--cf-space-8)}
/* Business tools are a real keyboard-accessible disclosure, not a wall of navigation. */
.shell-tool-group{margin-top:var(--cf-space-4);padding-top:var(--cf-space-4);border-top:0}
.shell-tool-group>summary{display:flex;align-items:center;gap:var(--cf-space-3);min-height:var(--cf-control-height);padding:var(--cf-space-3);border-radius:var(--cf-radius-md);font-size:var(--cf-text-sm);color:var(--cf-color-muted);cursor:pointer;list-style:none}
.shell-tool-group>summary::-webkit-details-marker{display:none}.shell-tool-group>summary:hover{background:var(--cf-color-sunken);color:var(--cf-color-ink)}.shell-tool-chevron{margin-left:auto}.shell-tool-group[open] .shell-tool-chevron{transform:rotate(180deg)}
.shell-tool-group a{margin-top:var(--cf-space-2);min-height:40px;padding-left:var(--cf-space-3)}
.shell-nav>a:nth-child(4){min-height:48px;font-size:var(--cf-text-md);font-weight:var(--cf-weight-bold)}
.shell-collapsed .shell-tool-chevron{display:none}.shell-collapsed .shell-tool-group>summary{padding-inline:var(--cf-space-3)}
/* SHELL-T1: More sits under Settings inside the nav. The nav keeps its natural height so an open
   More lengthens the sidebar, which scrolls, instead of overflowing beneath the profile row. */
#shell-sidebar .shell-nav{flex:1 0 auto}
/* SHELL-T5 frame */
/* Black text on white, space between the four places, a narrow chat column, and a wide page margin.
   These selectors outrank original-ui.css, which is linked later. Tokens only. No second accent. */
body.shell-active.shell-active,#shell-sidebar.shell-sidebar{background:var(--cf-color-paper);color:var(--cf-color-ink)}
#shell-sidebar .shell-nav{gap:var(--cf-space-8)}
#shell-sidebar .shell-nav-footer{margin-top:0;padding-top:0}
#shell-sidebar .shell-nav>a,#shell-sidebar .shell-nav-footer>a{color:var(--cf-color-ink)}
#shell-sidebar .shell-nav>a[aria-current=page],#shell-sidebar .shell-nav-footer>a[aria-current=page]{background:var(--cf-color-paper);color:var(--cf-color-ink);font-weight:var(--cf-weight-bold)}
#shell-sidebar .shell-nav>a:focus-visible,#shell-sidebar .shell-nav-footer>a:focus-visible{outline:var(--cf-focus-width) solid var(--cf-color-focus);outline-offset:var(--cf-focus-offset)}
body.shell-active #app .assistant.assistant-home{box-sizing:border-box;width:100%;max-width:var(--cf-content-narrow);margin-top:var(--cf-space-10);margin-right:auto;margin-bottom:0;margin-left:auto;color:var(--cf-color-ink)}
body.shell-active #app .assistant-home .assistant-compose-footer .primary:not(:disabled){background:var(--cf-color-accent);border-color:var(--cf-color-accent);color:var(--cf-color-on-accent)}
@media (min-width:761px){
 body.shell-active:not([data-original-screen=team]):not([data-original-screen=onboarding]):not(:has(.vision-welcome)) #app.workspace-app.workspace-app{background:var(--cf-color-paper);padding:var(--cf-space-12) var(--cf-space-12) var(--cf-space-16)}
}
@media (max-width:760px){
 #shell-sidebar .shell-nav{gap:var(--cf-space-6)}
 body.shell-active:not([data-original-screen=team]):not([data-original-screen=onboarding]):not(:has(.vision-welcome)) #app.workspace-app.workspace-app{background:var(--cf-color-paper);padding:var(--cf-space-8) var(--cf-space-4) var(--cf-space-10)}
}
/* SHELL-T5 frame end */

/* Batch 10: four places. All additions stay inside the cf-shell block. */
body.cf-shell-frame{--shell-width:var(--cf-sidebar-width);font-family:var(--cf-font-sans)}
body.cf-shell-frame #app{margin-left:var(--shell-width);padding:var(--cf-space-8) var(--cf-space-6);min-width:0}
body.cf-shell-frame .app-header{margin-left:var(--shell-width);padding-inline:var(--cf-space-6);height:var(--cf-space-8)}
body.cf-shell-frame #shell-sidebar.cf-shell-sidebar{display:flex;position:fixed;inset:0 auto 0 0;width:var(--shell-width);padding:var(--cf-space-4) var(--cf-space-2);border-right:1px solid var(--cf-color-line);background:var(--cf-color-sidebar);gap:var(--cf-space-8);overflow-y:auto}
.cf-shell-brand{font-size:var(--cf-text-brand);font-weight:var(--cf-weight-bold);color:var(--cf-color-ink);text-decoration:none;padding-inline:var(--cf-space-2)}
body.cf-shell-frame #shell-sidebar .cf-shell-nav{display:flex;flex-direction:column;gap:var(--cf-space-1)}
body.cf-shell-frame #shell-sidebar .cf-shell-nav>a{display:flex;align-items:center;gap:var(--cf-space-2);min-height:var(--cf-control-height);padding:var(--cf-space-2);border:0;border-radius:var(--cf-radius-card);font-size:var(--cf-text-body);font-weight:var(--cf-weight-regular);line-height:1.4;color:var(--cf-color-ink);background:transparent;text-decoration:none;box-shadow:none}
body.cf-shell-frame #shell-sidebar .cf-shell-nav>a:hover{background:var(--cf-color-sunken)}
body.cf-shell-frame #shell-sidebar .cf-shell-nav>a[aria-current=page]{background:var(--cf-color-active);color:var(--cf-color-ink);font-weight:var(--cf-weight-bold)}
.cf-shell-link svg{width:var(--cf-space-4);height:var(--cf-space-4);flex:none}
.cf-shell-switch{margin-top:auto;padding:var(--cf-space-2);font-size:var(--cf-text-caption);color:var(--cf-color-muted);overflow-wrap:anywhere;text-decoration:none}
.cf-shell-hub{max-width:var(--cf-content-max);margin:auto;color:var(--cf-color-ink)}
.cf-shell-hub>header{display:grid;justify-items:center;gap:var(--cf-space-2);margin-bottom:var(--cf-space-8)}
#app .cf-shell-hub h1{font-size:var(--cf-text-display)!important;line-height:var(--cf-leading-display)!important;font-weight:var(--cf-weight-bold);margin:0}
#app .cf-shell-hub h2{font-size:var(--cf-text-h2);line-height:1.2;font-weight:var(--cf-weight-bold);margin:0 0 var(--cf-space-3)}
.cf-shell-hub p{font-size:var(--cf-text-body);line-height:1.5;margin:0;color:var(--cf-color-muted)}
.cf-shell-hub .cf-shell-slide{min-height:0;align-items:stretch;justify-content:start;text-align:left;padding:0;margin-bottom:var(--cf-space-8)}
.cf-shell-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cf-space-2)}
.cf-shell-hub .cf-card--action{padding:var(--cf-space-3);border:1px solid var(--cf-color-line);border-radius:var(--cf-radius-card);background:var(--cf-color-paper);box-shadow:none}
.cf-shell-hub .cf-card--action:hover{background:var(--cf-color-sunken)}
.cf-shell-hub .cf-card--action strong{font-size:var(--cf-text-h3);line-height:1.3;margin-bottom:var(--cf-space-1)}
.cf-shell-hub .cf-card--action span{font-size:var(--cf-text-caption);color:var(--cf-color-muted)}
.cf-shell-preferences{display:grid;gap:var(--cf-space-3);margin-bottom:var(--cf-space-4)}
.cf-shell-preference{display:flex;align-items:center;justify-content:space-between;gap:var(--cf-space-3);min-height:var(--cf-control-height);cursor:pointer}
.cf-shell-preference span{display:block}
.cf-shell-preference input[type=checkbox]{width:var(--cf-control-height);height:var(--cf-control-height);accent-color:var(--cf-color-ink);flex:none}
.cf-shell-hub #preference-status{margin-bottom:var(--cf-space-4)}
.cf-shell-hub>.cf-skeleton{margin-top:var(--cf-space-3);min-height:var(--cf-space-8)}
.cf-shell-frame :is(.cf-shell-link,.cf-shell-brand,.cf-shell-switch):focus-visible,.cf-shell-hub :is(a,button,input):focus-visible{outline:var(--cf-focus-width) solid var(--cf-color-focus);outline-offset:var(--cf-focus-offset)}
.shell-collapsed body.cf-shell-frame{--shell-width:var(--cf-sidebar-width-tablet)}
@media(max-width:760px){
 html:has(body.cf-shell-frame),body.cf-shell-frame{height:100%}
 body.cf-shell-frame{display:flex;flex-direction:column;overflow:hidden}
 body.cf-shell-frame .app-header{order:0;flex:none}
 body.cf-shell-frame #app{order:1;flex:1 1 auto;min-height:0;min-width:0;overflow:auto;margin:0;width:auto;padding:var(--cf-space-4) var(--cf-space-2) var(--cf-space-4)}
 body.cf-shell-frame .app-header{margin-left:0;padding-inline:var(--cf-space-2)}
 body.cf-shell-frame #shell-sidebar.cf-shell-sidebar{order:2;position:relative;inset:auto;flex:none;height:auto;z-index:30;width:100%;padding:var(--cf-space-1) var(--cf-space-1) calc(var(--cf-space-1) + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--cf-color-line);gap:0;overflow:visible}
 body.cf-shell-frame .cf-help-bubble{bottom:calc(var(--cf-space-16) + var(--cf-space-4))}
 .cf-shell-sidebar .cf-shell-brand,.cf-shell-sidebar .cf-shell-switch{display:none}
 body.cf-shell-frame #shell-sidebar .cf-shell-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
 body.cf-shell-frame #shell-sidebar .cf-shell-nav>a{flex-direction:column;justify-content:center;gap:var(--cf-space-1);padding:var(--cf-space-1) 0;font-size:var(--cf-text-caption);text-align:center}
 #app .cf-shell-hub h1{font-size:var(--cf-text-display-phone)!important;line-height:var(--cf-leading-display-phone)!important}
 .cf-shell-tiles{grid-template-columns:minmax(0,1fr)}
 .cf-shell-hub .cf-shell-slide{margin-bottom:var(--cf-space-8)}
}
.cf-shell-switcher{margin-top:auto;margin-bottom:0}
.cf-shell-switcher .cf-shell-switch{display:flex;justify-content:space-between;margin:0;border:0;padding:var(--cf-space-2);gap:var(--cf-space-1)}
.cf-shell-switcher .shell-workspaces{position:absolute;bottom:100%;left:0;width:100%;background:var(--cf-color-paper);border:1px solid var(--cf-color-line);border-radius:var(--cf-radius-card);padding:var(--cf-space-1)}
@media(max-width:760px){.cf-shell-sidebar .cf-shell-switcher{display:none}}
.cf-shell-hub>header>.cf-btn{justify-self:start;margin-top:var(--cf-space-2)}
body.cf-shell-frame .app-header #logout:not([hidden]){display:inline-flex}
/* Outrank historical shell spacing without altering the shared tokens. */
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app.workspace-app{padding:var(--cf-space-8) var(--cf-space-6);margin:0 0 0 var(--shell-width)}
#app .cf-shell-hub.cf-shell-hub>header>h1{margin:0;padding:0;min-height:0;height:auto}
#app .cf-shell-hub>header>.cf-caption{font-size:var(--cf-text-caption)}
@media(max-width:760px){body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app.workspace-app{margin:0;overflow:auto;min-height:0;padding:var(--cf-space-4) var(--cf-space-2) var(--cf-space-4)}}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame .app-header{height:var(--cf-space-16);min-height:var(--cf-space-16);padding-inline:var(--cf-space-6)}
body.cf-shell-frame .app-header #logout:not([hidden]){margin-left:auto;min-height:var(--cf-control-height)}
/* The overview's saved-work list is the page's primary content. Display leading under the
   title, the empty conversation block, and the previous-work gap put that list below a
   1000px viewport (shell-items top was 1092). Hub display type stays unchanged. */
body.shell-active.shell-active:not([data-original-screen=team]):not([data-original-screen=onboarding]) #app .shell-overview .shell-page-title h1{margin-bottom:var(--cf-space-2)}
.shell-overview .shell-page-title{margin-bottom:var(--cf-space-2)}
.shell-overview .assistant-library-empty{margin:var(--cf-space-2) 0;padding:var(--cf-space-3)}
.shell-overview .shell-previous-summary{margin:var(--cf-space-2) 0}

/* Block 14 shared chrome, page rhythm and reusable two-column compositions. */
body.cf-shell-frame .app-header>.brand,body.cf-shell-frame .app-header>.environment{display:none}
.cf-breadcrumb{font-size:var(--cf-text-caption);color:var(--cf-color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--cf-space-8);height:var(--cf-space-8);border-radius:var(--cf-radius-pill);background:var(--cf-color-active);color:var(--cf-color-ink);font-size:var(--cf-text-caption);text-decoration:none}
.cf-header-avatar{margin-left:var(--cf-space-4)}
.cf-help-bubble{position:fixed;right:var(--cf-space-6);bottom:var(--cf-space-6);z-index:25;width:var(--cf-control-height);height:var(--cf-control-height);border:0;border-radius:var(--cf-radius-pill);background:var(--cf-color-ink);color:var(--cf-color-on-accent);font-size:var(--cf-text-h2);cursor:pointer}
.cf-shell-switch strong{flex:1;text-align:left;font-weight:var(--cf-weight-regular);overflow:hidden;text-overflow:ellipsis}
.cf-shell-brand{display:flex;align-items:center;gap:var(--cf-space-3)}
.cf-shell-brand>span{font-size:var(--cf-text-2xl)}
.cf-shell-frame #shell-sidebar .cf-connect-apps-pill{margin-top:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--cf-space-4);width:100%;padding:var(--cf-space-4);border-radius:var(--cf-radius-card);background:transparent;color:var(--cf-color-muted);box-shadow:none}
.cf-settings-tabs{display:flex;gap:var(--cf-space-6);border-bottom:1px solid var(--cf-color-line);margin-bottom:var(--cf-space-8)}
.cf-settings-tabs a{padding:var(--cf-space-3) 0 var(--cf-space-4);color:var(--cf-color-muted);text-decoration:none;border-bottom:2px solid transparent}
.cf-settings-tabs a[aria-current=page]{border-color:var(--cf-color-accent);color:var(--cf-color-accent)}
.cf-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cf-space-6)}
.cf-settings-grid .cf-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--cf-space-6);padding:var(--cf-space-6)}
.cf-settings-grid .cf-card h2{margin:0 0 var(--cf-space-2)!important}
.cf-settings-grid form{width:100%;display:grid;gap:var(--cf-space-5)}
.cf-settings-grid form button{justify-self:start}
.cf-settings-grid label{width:100%;font-size:var(--cf-text-body)}
.cf-settings-grid input{margin-top:var(--cf-space-2)}
.cf-setting-toggle{display:flex;align-items:center;gap:var(--cf-space-4);min-height:var(--cf-space-16)}
.cf-setting-toggle span{flex:1}.cf-setting-toggle small{display:block;margin-top:var(--cf-space-2);color:var(--cf-color-muted)}
.cf-setting-toggle input[role=switch]{appearance:none;flex:none;width:40px;height:24px;min-height:0;border-radius:var(--cf-radius-pill);background:var(--cf-color-muted);border:0;position:relative;cursor:pointer}
.cf-setting-toggle input[role=switch]:before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--cf-radius-pill);background:var(--cf-color-paper)}
.cf-setting-toggle input[role=switch]:checked{background:var(--cf-color-accent)}.cf-setting-toggle input[role=switch]:checked:before{left:19px}
.cf-settings-more{display:flex;gap:var(--cf-space-6);flex-wrap:wrap;margin-top:var(--cf-space-8);font-size:var(--cf-text-caption)}
.cf-settings-more a{color:var(--cf-color-muted)}
.cf-clone-home{max-width:var(--cf-content-max);margin:auto}.cf-clone-heading{margin-bottom:var(--cf-space-8)}
.cf-clone-heading h1{margin:var(--cf-space-4) 0 var(--cf-space-3)}
.cf-clone-heading p,.cf-clone-layout p{color:var(--cf-color-muted)}
.cf-clone-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--cf-space-6);align-items:start}
.cf-clone-layout h2{font-size:var(--cf-text-h2);line-height:1.4;margin:0 0 var(--cf-space-4)}
.cf-clone-badge{display:inline-block;padding:var(--cf-space-1) var(--cf-space-2);margin-bottom:var(--cf-space-4);background:var(--cf-color-accent-soft);color:var(--cf-color-accent);border-radius:var(--cf-radius-sm);font-size:var(--cf-text-caption)}
.cf-chapter-row{display:flex;align-items:center;gap:var(--cf-space-3);width:100%;text-align:left;background:var(--cf-color-surface);color:var(--cf-color-ink);border:1px solid var(--cf-color-line);border-radius:var(--cf-radius-md);padding:var(--cf-space-3);margin-top:var(--cf-space-3);cursor:pointer}
.cf-chapter-row:hover{background:var(--cf-color-sunken)}
.cf-chapter-number{flex:none;width:var(--cf-space-6);height:var(--cf-space-6);display:grid;place-items:center;border-radius:var(--cf-radius-pill);background:var(--cf-color-accent-soft);color:var(--cf-color-accent)}
.cf-chapter-row>span:nth-child(2){flex:1;display:grid;gap:var(--cf-space-1)}
.cf-chapter-row strong{font-size:var(--cf-text-body)}.cf-chapter-row small,.cf-chapter-row>span>span{font-size:var(--cf-text-caption);color:var(--cf-color-muted)}
.cf-clone-notebook .cf-clone-material{padding:0;margin:0}.cf-clone-notebook form{margin-top:var(--cf-space-5)}
.cf-clone-notebook .cf-clone-drop{padding:var(--cf-space-3)}.cf-clone-notebook textarea{min-height:100px}
.cf-chapter-dialog{width:900px;max-width:calc(100% - var(--cf-space-8))}.cf-chapter-dialog .cf-interview{min-height:0}
@media(max-width:760px){
 .cf-settings-grid,.cf-clone-layout{grid-template-columns:minmax(0,1fr)}
 body.cf-shell-frame #shell-sidebar .cf-connect-apps-pill{display:flex;width:auto;min-height:var(--cf-control-height);padding:var(--cf-space-3);background:var(--cf-color-surface)}
 .cf-help-bubble{bottom:100px;right:var(--cf-space-4)}
 .cf-breadcrumb{max-width:60%}.cf-settings-grid .cf-card{padding:var(--cf-space-5)}
 .cf-chapter-dialog{max-width:calc(100% - var(--cf-space-4));padding:var(--cf-space-4)}
}

.cf-shell-sidebar .cf-connect-apps-stack{gap:var(--cf-space-4);align-self:center}
.cf-shell-sidebar .cf-connect-apps-stack .cf-connect-apps-icon{width:var(--cf-space-6);height:var(--cf-space-6);margin:0}
.cf-shell-sidebar .cf-shell-switcher{margin-bottom:calc(var(--cf-space-4) * -1)}
.cf-shell-brand svg{width:var(--cf-space-6);height:var(--cf-space-6)}


.cf-clone-notebook .cf-clone-page .cf-clone-material{gap:var(--cf-space-4)}
.cf-clone-notebook .cf-clone-upload-details{margin-top:var(--cf-space-4)}
.cf-clone-notebook .cf-clone-drop{border-color:var(--cf-color-line);background:var(--cf-color-surface)}
/* Block 18: preserve four destinations and the pinned user chip. */
body.cf-shell-frame #shell-sidebar .cf-shell-nav::before{content:'Workspace';font-size:var(--cf-chat-caption);font-weight:500;color:var(--cf-color-muted);padding:0 12px 9px}
body.cf-shell-frame #shell-sidebar .cf-shell-nav svg{opacity:.65;stroke-width:1.5}
body.cf-shell-frame #shell-sidebar .cf-shell-switcher::before{content:'Account';display:block;font-size:var(--cf-chat-caption);color:var(--cf-color-muted);padding:0 12px 8px}
@media(max-width:760px){body.cf-shell-frame #shell-sidebar .cf-shell-nav::before{display:none}}

/* Block 18 refinement: one calm scale across the frame and workspace hubs. */
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame{--shell-width:var(--cf-home-sidebar);background:var(--cf-home-shell);color:var(--cf-home-fg);font-family:var(--cf-home-font)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #shell-sidebar.cf-shell-sidebar{width:var(--shell-width);background:var(--cf-home-shell);border-color:var(--cf-home-border);padding:20px 12px;gap:24px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame .cf-shell-brand{font-size:var(--cf-home-title);gap:8px;padding:0 8px;color:var(--cf-home-fg)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #shell-sidebar .cf-shell-nav{gap:4px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #shell-sidebar .cf-shell-nav>a{font-size:var(--cf-home-sm);font-weight:500;min-height:36px;padding:8px 10px;border-radius:var(--cf-home-r8);gap:10px;color:var(--cf-home-muted)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #shell-sidebar .cf-shell-nav>a[aria-current=page]{background:var(--cf-home-hover);color:var(--cf-home-fg)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame .cf-shell-link svg{width:16px;height:16px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame .cf-shell-switch{padding:10px 8px;min-height:44px;border-radius:var(--cf-home-r8);background:transparent;font-size:var(--cf-home-sm);color:var(--cf-home-fg)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame .cf-shell-switch:before{font-size:var(--cf-home-xs)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame .cf-connect-apps-pill{font-size:var(--cf-home-label);padding:12px;border-radius:var(--cf-home-r8);border-color:var(--cf-home-border)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame .app-header{height:56px;background:var(--cf-home-shell);border:0;padding:0 24px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame .cf-breadcrumb{font-size:var(--cf-home-xs);color:var(--cf-home-muted)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #logout{font-size:var(--cf-home-xs);min-height:32px;padding:6px 12px;border:1px solid var(--cf-home-border);border-radius:var(--cf-home-r8);color:var(--cf-home-muted);background:var(--cf-home-bg)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app:has(.cf-refined,.cf-connectors){padding:40px 44px 64px;margin-top:0;margin-right:12px;border:1px solid var(--cf-home-border);border-radius:var(--cf-home-r12);background:var(--cf-home-bg);min-height:calc(100dvh - 68px)}
body.cf-shell-frame #app :is(.cf-refined,.cf-connectors){max-width:1000px;margin:0 auto;color:var(--cf-home-fg);font-family:var(--cf-home-font);font-size:var(--cf-home-sm)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors)>header{display:block;text-align:left;margin:0 0 28px;padding:0;min-height:0}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors)>header h1{font-size:var(--cf-home-display)!important;line-height:1.25!important;font-weight:600;letter-spacing:-.035em;margin:8px 0 10px;padding:0;color:var(--cf-home-fg)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors) p{font-size:var(--cf-home-sm);line-height:1.65;color:var(--cf-home-muted);margin:0}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-refined .cf-hub-eyebrow{display:block;font-size:var(--cf-home-caption);line-height:1.5;font-weight:600;letter-spacing:.09em;color:var(--cf-home-muted)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-refined h2{font-size:var(--cf-home-body);font-weight:600;line-height:1.45;margin:0;color:var(--cf-home-fg)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-refined h3{font-size:var(--cf-home-sm);font-weight:500;margin:0 0 4px;color:var(--cf-home-fg)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors) .cf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;font-size:var(--cf-home-label);line-height:1.4;font-weight:500;padding:8px 12px;border:1px solid var(--cf-home-border);border-radius:var(--cf-home-r8);background:var(--cf-home-bg);color:var(--cf-home-fg);box-shadow:none;white-space:normal;text-decoration:none}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors) .cf-btn:hover{background:var(--cf-home-hover)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors) .cf-btn--primary{color:var(--cf-home-white);background:var(--cf-home-accent);border-color:var(--cf-home-accent)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors) .cf-btn--primary:hover{background:var(--cf-home-accent-hover)}
.cf-refined svg{width:20px;height:20px;flex-shrink:0}
.cf-business-focus{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;border:1px solid var(--cf-home-border);border-radius:var(--cf-home-r12);background:var(--cf-home-tint);margin:0 0 32px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-business-focus h2{font-size:var(--cf-home-title);margin:8px 0;font-weight:500;letter-spacing:-.025em}
.cf-business-focus .cf-btn{flex-shrink:0}
.cf-business-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.cf-business-section-heading a{display:inline-flex;align-items:center;gap:8px;font-size:var(--cf-home-label);color:var(--cf-home-muted);text-decoration:none}
.cf-business-section-heading a svg{width:16px;height:16px}
.cf-business-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cf-business-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-decoration:none;color:var(--cf-home-fg);padding:20px;min-height:184px;border:1px solid var(--cf-home-border);border-radius:var(--cf-home-r12);background:var(--cf-home-bg);transition:background 140ms ease,border-color 140ms ease}
.cf-business-card:hover{background:var(--cf-home-hover);border-color:var(--cf-home-ring)}
.cf-business-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--cf-home-r8);background:var(--cf-home-shell);color:var(--cf-home-muted)}
.cf-business-card strong{font-size:var(--cf-home-body);font-weight:600}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-business-card p{font-size:var(--cf-home-label);line-height:1.55;max-width:26ch}
.cf-business-card-arrow{position:absolute;right:20px;top:28px;color:var(--cf-home-muted)}
.cf-business-card-arrow svg{width:16px;height:16px}
.cf-tools-directory{margin-top:28px;border-top:1px solid var(--cf-home-border)}
.cf-tools-directory summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;padding:20px 0;font-size:var(--cf-home-sm);font-weight:500;color:var(--cf-home-fg)}
.cf-tools-directory summary::-webkit-details-marker{display:none}
.cf-tools-directory summary small{display:block;margin-top:4px;font-size:var(--cf-home-xs);font-weight:400;color:var(--cf-home-muted)}
.cf-tools-directory[open]>summary>span:last-child{transform:rotate(45deg)}
.cf-directory-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:8px 0 20px}
.cf-tools-directory nav{display:grid;margin-top:12px}
.cf-tools-directory nav a{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px;border-bottom:1px solid var(--cf-home-border);color:var(--cf-home-fg);text-decoration:none}
.cf-tools-directory nav a:hover strong{color:var(--cf-home-accent)}
.cf-tools-directory nav strong{font-size:var(--cf-home-sm);font-weight:500}
.cf-tools-directory nav small{display:block;font-size:var(--cf-home-xs);line-height:1.5;color:var(--cf-home-muted);margin-top:4px}
.cf-tools-directory nav svg{width:16px;height:16px;color:var(--cf-home-muted)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors) .cf-settings-tabs{gap:24px;margin:0 0 32px;padding:0;border-color:var(--cf-home-border)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors) .cf-settings-tabs a{font-size:var(--cf-home-sm);padding:0 0 12px;min-height:0;color:var(--cf-home-muted)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors) .cf-settings-tabs a[aria-current=page]{color:var(--cf-home-accent);border-color:var(--cf-home-accent)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-refined .cf-settings-grid{display:grid;grid-template-columns:1fr;gap:28px}
.cf-setting-section{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-intro p{font-size:var(--cf-home-xs);margin-top:6px;max-width:22ch}
.cf-setting-surface{border:1px solid var(--cf-home-border);border-radius:var(--cf-home-r12);overflow:hidden}
.cf-setting-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px;border-bottom:1px solid var(--cf-home-border)}
.cf-setting-row:last-child{border-bottom:0}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-row p{font-size:var(--cf-home-xs);max-width:34ch;line-height:1.5}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-row form{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px;width:240px;flex-shrink:0}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-row .cf-input{margin:0;padding:8px 10px;width:100%;height:36px;min-height:36px;font-size:var(--cf-home-sm);line-height:1.4;border:1px solid var(--cf-home-border);border-radius:var(--cf-home-r6);background:var(--cf-home-bg);color:var(--cf-home-fg)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-row .cf-btn{flex-shrink:0}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-toggle{width:auto;flex-shrink:0;margin:0}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-toggle input{margin:0;width:36px;height:20px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors .cf-connections-hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 24px;text-align:left;padding:24px;margin:0 0 28px;border-radius:var(--cf-home-r12);background:var(--cf-home-tint);border:1px solid var(--cf-home-border)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors .cf-connection-logos{grid-column:1;margin:0 0 8px;justify-content:flex-start;gap:12px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors .cf-connection-logos svg{width:28px;height:28px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors h2{font-size:var(--cf-home-title);font-weight:500;line-height:1.4;margin:0;color:var(--cf-home-fg)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors .cf-connections-hero .cf-btn{grid-column:2;grid-row:1 / 4}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors .cf-connections-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 16px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors .cf-connections-heading h2{font-size:var(--cf-home-body);font-weight:600}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors-grid .cf-card{padding:20px;gap:12px;border-radius:var(--cf-home-r12);border:1px solid var(--cf-home-border);background:var(--cf-home-bg);color:var(--cf-home-fg);box-shadow:none;min-height:0}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors-grid h2{font-size:var(--cf-home-body);font-weight:600}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors-grid .cf-chip{font-size:var(--cf-home-caption);padding:4px 8px;background:var(--cf-home-shell);border-color:var(--cf-home-border);color:var(--cf-home-muted)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors-grid p{font-size:var(--cf-home-label)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors-grid .cf-connector-icon{width:32px;height:32px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors-later{margin-top:24px;padding-top:16px;border-top:1px solid var(--cf-home-border)}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors-later h2{font-size:var(--cf-home-label)}
.cf-refined :is(a,button,input,summary):focus-visible{outline:2px solid var(--cf-home-accent);outline-offset:3px}
@media(max-width:1100px){.cf-setting-section{grid-template-columns:1fr;gap:12px}.cf-setting-intro{display:flex;align-items:baseline;gap:12px}body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-intro p{max-width:none;margin:0}.cf-business-focus{align-items:flex-start;flex-direction:column}.cf-business-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame{--shell-width:var(--cf-home-zero)}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #shell-sidebar.cf-shell-sidebar{width:100%;padding:8px 12px;gap:0}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #shell-sidebar .cf-shell-nav{flex-direction:row;gap:0}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #shell-sidebar .cf-shell-nav>a{font-size:var(--cf-home-caption);min-height:48px;gap:4px;padding:6px 4px}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app:has(.cf-refined,.cf-connectors){margin:0 8px 84px;padding:24px 16px 32px;min-height:calc(100dvh - 140px)}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame .app-header{padding-inline:16px;height:52px}
 .cf-business-focus{padding:20px;gap:16px;margin-bottom:24px}
 .cf-business-card{padding:16px;min-height:172px;gap:12px}
 .cf-business-card-arrow{right:12px;top:24px}
 .cf-business-grid{gap:10px}
 .cf-directory-groups{grid-template-columns:1fr;gap:20px}
 .cf-setting-intro{display:block}.cf-setting-row{padding:16px;flex-wrap:wrap;gap:12px}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-row form{width:100%;justify-content:flex-start}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-row .cf-input{width:100%;height:40px}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors) .cf-btn{min-height:40px}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-intro p{margin-top:4px}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors-grid{grid-template-columns:1fr}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors .cf-connections-hero{grid-template-columns:1fr;padding:20px}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors .cf-connections-hero .cf-btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors .cf-connections-heading{align-items:flex-start;flex-direction:column;gap:4px}
}
@media(prefers-reduced-motion:reduce){.cf-business-card{transition:none}}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-refined .cf-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors)>header :is(h1,p){text-align:left;margin-left:0;margin-right:0;max-width:none}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-row form{padding:0;margin:0;border:0;background:transparent;box-shadow:none;flex-wrap:nowrap;width:280px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-row .cf-input{flex:1;min-width:0}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-row .cf-btn{margin:0}
@media(max-width:760px){body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-row form{width:100%}}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors)>header{justify-items:start;align-items:start}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app :is(.cf-refined,.cf-connectors)>header :is(h1,p){justify-self:start;width:100%}
@media(max-width:760px){
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame:has(.cf-refined,.cf-connectors){height:100dvh;min-height:0;overflow:hidden}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app:has(.cf-refined,.cf-connectors){min-height:0;flex:1 1 auto;margin:0 8px 76px;overflow:auto}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame:not(.cf-home-ui) #shell-sidebar.cf-shell-sidebar{position:fixed;inset:auto 0 0;height:68px;min-height:68px;padding:4px 12px calc(4px + env(safe-area-inset-bottom));border-top:1px solid var(--cf-home-border)}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame:not(.cf-home-ui) #shell-sidebar .cf-connect-apps-pill{display:none}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors{padding:0}
 body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame .cf-help-bubble{bottom:84px;width:36px;height:36px;min-height:36px;right:20px;font-size:var(--cf-home-sm)}
}
@media(max-width:760px){html:has(body.cf-shell-frame .cf-refined),html:has(body.cf-shell-frame .cf-connectors){height:100dvh;overflow:hidden}}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-connectors .cf-connection-logos .cf-connect-apps-icon{width:44px;height:44px;border-radius:var(--cf-home-r8);padding:8px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-toggle input[role=switch]:before{width:14px;height:14px;top:3px;left:3px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #app .cf-setting-toggle input[role=switch]:checked:before{left:19px}

/* Founder reference: account identity and Settings are two separate controls. */
body.cf-shell-frame #shell-sidebar .cf-account-footer{position:relative;display:flex;align-items:center;gap:4px;margin-top:auto;padding:8px 0;min-width:0}
body.cf-shell-frame #shell-sidebar .cf-account-footer .cf-shell-switcher{position:static;flex:1;min-width:0;margin:0}
body.cf-shell-frame #shell-sidebar .cf-account-footer .cf-shell-switcher::before{display:none}
body.cf-shell-frame #shell-sidebar .cf-account-footer .cf-shell-switch{display:flex;gap:10px;min-height:56px;margin:0;padding:8px;background:transparent!important;border:0;border-radius:10px}
body.cf-shell-frame #shell-sidebar .cf-account-footer .cf-shell-switch:hover{background:var(--cf-home-hover,#F1F2F4)!important}
body.cf-shell-frame #shell-sidebar .cf-account-person{display:block;flex:1;min-width:0}
body.cf-shell-frame #shell-sidebar .cf-account-person strong{display:block;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:22px;font-weight:500}
body.cf-shell-frame #shell-sidebar .cf-account-email{display:block;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px;letter-spacing:0;color:var(--cf-home-muted,#6B7280)}
.cf-account-settings{display:grid;place-items:center;flex:none;width:36px;height:40px;border-radius:8px;color:var(--cf-home-muted,#6B7280)}
.cf-account-settings:hover{background:var(--cf-home-hover,#F1F2F4)}
.cf-account-settings svg{width:22px;height:22px}
body.cf-shell-frame #shell-sidebar .cf-account-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:100;width:300px;max-width:calc(100vw - 32px);padding:8px;background:var(--cf-home-bg,#fff);border:1px solid var(--cf-home-border,#E5E7EB);border-radius:16px;box-shadow:0 12px 36px rgb(0 0 0/.12);color:var(--cf-home-fg,#1F2328)}
body.cf-shell-frame #shell-sidebar .cf-account-menu :is(a,button,summary){display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:14px;line-height:20px;text-align:left;text-decoration:none;cursor:pointer;list-style:none}
body.cf-shell-frame #shell-sidebar .cf-account-menu :is(a,button,summary):hover{background:var(--cf-home-hover,#F1F2F4)}
.cf-account-menu svg{width:20px;height:20px;flex:none;color:var(--cf-home-muted,#6B7280)}
.cf-account-menu summary>span:last-child{margin-left:auto}
.cf-account-menu hr{margin:6px 0;border:0;border-top:1px solid var(--cf-home-border,#E5E7EB)}
.cf-account-credits{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px;font-size:14px}
.cf-account-credits small{grid-column:1/-1;color:var(--cf-home-muted,#6B7280);font-size:12px}
body.cf-shell-frame #shell-sidebar .cf-account-menu .shell-workspaces{position:static;width:auto;margin:0 0 4px 20px;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.cf-account-dialog{max-width:380px;padding:28px;border:1px solid var(--cf-home-border,#E5E7EB);border-radius:16px;background:var(--cf-home-bg,#fff);color:var(--cf-home-fg,#1F2328)}
.cf-account-dialog::backdrop{background:rgb(0 0 0/.2)}
.cf-account-menu :focus-visible,.cf-account-settings:focus-visible{outline:2px solid var(--cf-home-ring,#93B4F8);outline-offset:2px}
@media(max-width:1023px){body.cf-shell-frame #shell-sidebar .cf-account-footer{display:none}}

/* Founder-directed workspace destinations and saved-work collections. */
.cf-workspace-nav{display:grid;gap:4px;padding-top:18px;margin-top:18px;border-top:1px solid var(--cf-home-border)}
.cf-workspace-nav svg{width:20px;height:20px;flex:none}
.cf-settings-mode .cf-workspace-nav{display:none}
.cf-library-page{max-width:1160px;margin:auto;padding:20px 12px 60px;font-family:var(--cf-home-font);color:var(--cf-home-fg)}
.cf-library-header{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px}
.cf-library-header h1{font-size:38px;letter-spacing:-.04em;margin:0 0 12px}
.cf-library-page p{color:var(--cf-home-muted);line-height:1.65}
.cf-library-button,.cf-library-page button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--cf-home-border);border-radius:10px;padding:12px 18px;font:inherit;background:var(--cf-home-bg);color:var(--cf-home-fg);cursor:pointer;text-decoration:none}
.cf-library-header>.cf-library-button,.cf-library-actions>.cf-library-button:first-child{background:var(--cf-home-fg);color:var(--cf-home-bg);border-color:var(--cf-home-fg)}
.cf-library-hero{padding:44px;border:1px solid var(--cf-home-border);border-radius:24px;background:linear-gradient(135deg,var(--cf-home-tint),var(--cf-home-bg) 70%);margin-bottom:36px}
.cf-library-hero h2{font-size:32px;letter-spacing:-.035em;margin:12px 0}
.cf-doc-hero{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.cf-doc-hero form{display:flex;padding:8px;background:var(--cf-home-bg);border:1px solid var(--cf-home-border);border-radius:14px;box-shadow:0 2px 5px #00000009}
.cf-doc-hero input{width:100%;min-width:0;border:0;padding:10px;background:transparent;color:inherit;font:inherit}
.cf-library-eyebrow{font-size:11px;letter-spacing:.15em;font-weight:600}
.cf-library-row{display:flex;gap:20px;padding:24px;border:1px solid var(--cf-home-border);border-radius:14px;margin-bottom:14px}
.cf-library-row>div{min-width:0;flex:1}.cf-library-row p{margin:6px 0 0;font-size:13px}.cf-library-row button{border:0;background:transparent;padding:0;justify-content:flex-start;text-align:left;font-weight:600;font-size:17px}
.cf-doc-icon{font-size:24px;color:var(--cf-home-muted);background:var(--cf-home-hover);width:48px;height:48px;display:grid;place-items:center;border-radius:10px;flex:none}
.cf-doc-excerpt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-library-empty{padding:48px;text-align:center;border:1px dashed var(--cf-home-border);border-radius:16px}
.cf-library-tabs{display:flex;gap:8px;margin-bottom:32px}.cf-library-tabs a{padding:12px 24px;text-decoration:none;color:var(--cf-home-muted);border-radius:10px}.cf-library-tabs [aria-current]{background:var(--cf-home-hover);color:var(--cf-home-fg)}
.cf-spaces-hero{text-align:center;padding-block:64px}.cf-spaces-hero>p{max-width:580px;margin:20px auto 28px}.cf-library-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.cf-space-art{display:flex;justify-content:center;align-items:center;height:190px;margin-bottom:28px}.cf-space-art>div{width:210px;background:var(--cf-home-bg);padding:24px;border:1px solid var(--cf-home-border);border-radius:16px;transform:rotate(-6deg);box-shadow:0 8px 20px #00000008;text-align:left}.cf-space-art>div+div{transform:rotate(7deg);margin-left:-32px;margin-top:30px}.cf-space-art i{display:block;height:8px;margin:12px 0;background:var(--cf-home-border);border-radius:4px}.cf-space-art i:first-child{background:var(--cf-home-accent);width:70%;opacity:.5}.cf-space-art span{font-size:13px}
.cf-library-dialog{width:min(800px,90vw);max-height:85vh;padding:32px;border:1px solid var(--cf-home-border);border-radius:18px;background:var(--cf-home-bg);color:var(--cf-home-fg)}
.cf-library-dialog::backdrop{background:#0005}.cf-library-dialog header,.cf-library-dialog footer{display:flex;gap:16px;justify-content:space-between;align-items:center}.cf-document-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75;padding:28px 0}.cf-library-note{font-size:12px}
@media(max-width:700px){.cf-doc-hero{grid-template-columns:1fr}.cf-library-hero{padding:26px}.cf-library-header{align-items:flex-start;flex-direction:column}.cf-library-header h1{font-size:30px}.cf-library-row{padding:18px}.cf-library-dialog{padding:20px}.cf-workspace-nav{grid-template-columns:repeat(2,1fr)}}
.cf-library-page [hidden]{display:none!important}
.cf-workspace-nav .cf-shell-link{display:flex;align-items:center;gap:14px;min-height:40px;padding:10px 12px;border-radius:9px;color:var(--cf-home-muted);font-size:14px;text-decoration:none;line-height:20px}
.cf-workspace-nav .cf-shell-link:hover,.cf-workspace-nav .cf-shell-link[aria-current]{color:var(--cf-home-fg);background:var(--cf-home-hover)}
body.cf-shell-frame #app .cf-library-hero h2{font-size:30px;font-weight:600;line-height:1.2;margin:12px 0 18px}
body.cf-shell-frame #app .cf-library-hero p{font-size:15px;line-height:1.7}
body.cf-shell-frame #app .cf-library-hero .cf-library-eyebrow{font-size:10px}
body.cf-shell-frame #shell-sidebar .cf-account-menu[popover]{position:fixed;inset:auto;margin:0;max-height:calc(100dvh - 110px);overflow:auto}
body.cf-shell-frame #shell-sidebar .cf-account-menu[popover]:not(:popover-open){display:none}
/* Integrations has its own destination; keep the account controls at the bottom. */
body.cf-shell-frame #shell-sidebar .cf-connect-apps-pill{display:none!important}

/* Compact account identity; name and settings remain separate controls. */
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #shell-sidebar .cf-account-footer{padding:4px 0;gap:4px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #shell-sidebar .cf-account-footer .cf-shell-switch{height:44px;min-height:44px;padding:4px 8px;border-radius:8px;background:transparent!important;gap:8px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #shell-sidebar .cf-account-footer .cf-avatar{width:28px;height:28px;min-width:28px;font-size:14px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #shell-sidebar .cf-account-footer .cf-account-person strong{font-size:13px;line-height:18px}
body.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame.cf-shell-frame #shell-sidebar .cf-account-footer .cf-account-email{font-size:11px;line-height:16px}
/* Founder review: workspace catalogs and space starters. */
.cf-space-picker{box-sizing:border-box;width:min(960px,calc(100vw - 40px));max-height:90dvh;padding:28px;border:1px solid var(--cf-color-line,#e5e5e8);border-radius:20px;background:var(--cf-color-paper,#fff);color:var(--cf-color-ink,#242528);overflow:auto}
.cf-space-picker::backdrop{background:rgb(20 22 28 / .5)}
.cf-space-picker>header,.cf-space-picker>footer{display:flex;justify-content:space-between;align-items:center;gap:24px}.cf-space-picker>header{align-items:flex-start;margin-bottom:24px}.cf-space-picker p{color:var(--cf-color-muted,#737985);line-height:1.6;margin:6px 0}.cf-space-picker h2{margin:0}.cf-space-picker [data-close]{background:none;border:0;font-size:26px;padding:0 8px}.cf-space-picker>footer{margin-top:24px;padding-top:24px;border-top:1px solid var(--cf-color-line,#e5e5e8)}
.cf-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.cf-template-grid>button{display:block;text-align:left;padding:14px;border:1px solid var(--cf-color-line,#e5e5e8);border-radius:12px;background:transparent;color:inherit;cursor:pointer;white-space:normal}.cf-template-grid>button:hover{border-color:var(--cf-color-accent,#6554c0);background:var(--cf-color-surface,#fafafa)}.cf-template-grid strong{display:flex;justify-content:space-between;margin:14px 4px 0;font-size:17px}.cf-template-grid p{font-size:14px;margin:4px}.cf-template-art{height:130px;display:grid;place-items:center;background:var(--cf-color-surface,#f7f7f9);border:1px solid var(--cf-color-line,#e5e5e8);border-radius:8px}.cf-template-art>div{display:flex;align-items:end;gap:6px;width:64%;height:86px;padding:18px 14px 12px;background:var(--cf-color-paper,#fff);border:1px solid var(--cf-color-line,#e5e5e8);border-radius:12px;box-shadow:0 3px 7px #00000008}.cf-template-art i{display:block;flex:1;background:#dedde5;border-radius:3px;height:40%}.cf-template-art i:nth-child(2n){height:70%}.cf-template-art i:nth-child(3n){background:#a695d7;height:90%}.cf-art-board>div{align-items:stretch}.cf-art-board i{height:auto!important}.cf-art-list>div,.cf-art-form>div{display:grid;grid-template-columns:1fr;gap:5px}.cf-art-list i,.cf-art-form i{height:4px!important}.cf-art-calendar>div{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.cf-art-calendar i{height:10px!important}
.cf-catalog-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:32px 0 24px}.cf-catalog-intro p{color:var(--cf-color-muted)}.cf-catalog-badge{display:inline-block;font-size:12px;border-radius:6px;padding:6px 9px;background:var(--cf-color-surface,#f5f5f7);color:var(--cf-color-muted,#737985)}
.cf-market-grid,.cf-routine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.cf-market-card,.cf-routine-grid>article{border:1px solid var(--cf-color-line,#e5e5e8);border-radius:14px;overflow:hidden}.cf-market-cover{height:124px;padding:20px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#f3f1fa,#f9f9fb);color:#77708f}.cf-market-cover>span{font-size:48px}.cf-market-cover i{align-self:flex-start;font-size:12px;font-style:normal}.cf-market-copy,.cf-routine-grid>article{padding:24px}.cf-market-copy small{color:var(--cf-color-muted);font-size:12px}.cf-market-copy p,.cf-routine-grid p{color:var(--cf-color-muted);line-height:1.6;min-height:52px}.cf-market-copy footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:24px;font-size:12px;color:var(--cf-color-muted)}.cf-market-copy button:disabled{opacity:.55;cursor:not-allowed}
.cf-schedule-hero{display:flex;align-items:center;gap:28px;padding:36px;background:var(--cf-color-surface,#f7f7f9);border:1px solid var(--cf-color-line,#e5e5e8);border-radius:16px}.cf-schedule-symbol{font-size:48px;color:#8f7bbd}.cf-schedule-hero p{max-width:550px;line-height:1.6;color:var(--cf-color-muted)}.cf-schedule-list{margin:32px 0 40px;border:1px solid var(--cf-color-line,#e5e5e8);border-radius:12px}.cf-schedule-list>header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--cf-color-line,#e5e5e8)}.cf-schedule-list>header h2{margin:0}.cf-schedule-list>header span{font-size:12px;color:var(--cf-color-muted)}.cf-routine-heading{margin-bottom:20px}
@media(max-width:800px){.cf-market-grid,.cf-routine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cf-template-art{height:104px}}
@media(max-width:540px){.cf-market-grid,.cf-routine-grid,.cf-template-grid{grid-template-columns:1fr}.cf-space-picker{padding:20px;width:calc(100vw - 24px)}.cf-space-picker>footer,.cf-catalog-intro{align-items:flex-start;flex-direction:column}.cf-schedule-hero{padding:24px;gap:16px}.cf-schedule-symbol{display:none}}

/* App typography uses a working UI scale, including older module screens. */
body.cf-shell-frame #app{
 --cf-text-display:28px;--cf-text-display-phone:26px;--cf-text-h1:28px;
 --cf-text-h2:20px;--cf-text-h3:16px;--cf-text-body:14px;
 --cf-text-caption:12px;--cf-leading-display:1.2;--cf-leading-display-phone:1.2;
}
body.cf-shell-frame #app .cf-library-page{padding:28px 32px 40px;font-size:14px}
body.cf-shell-frame #app .cf-library-header{margin-bottom:24px;gap:16px}
body.cf-shell-frame #app .cf-library-header h1{font-size:28px;line-height:1.2;margin:0 0 8px}
body.cf-shell-frame #app .cf-library-page p{font-size:14px;line-height:1.5;margin-block:8px}
body.cf-shell-frame #app .cf-library-page :is(h2,h3){font-size:18px;line-height:1.35;letter-spacing:-.02em;margin-block:0 8px}
body.cf-shell-frame #app .cf-library-tabs{margin-bottom:24px;gap:4px}
body.cf-shell-frame #app .cf-library-tabs a{padding:8px 16px;font-size:14px;border-radius:8px}
body.cf-shell-frame #app .cf-catalog-intro{margin:0 0 20px;gap:16px}
body.cf-shell-frame #app .cf-market-grid{gap:16px}
body.cf-shell-frame #app .cf-market-card{display:flex;flex-direction:column;border-radius:12px}
body.cf-shell-frame #app .cf-market-cover{height:72px;box-sizing:border-box;padding:16px;flex:none}
body.cf-shell-frame #app .cf-market-cover>span{font-size:30px}
body.cf-shell-frame #app .cf-market-copy{padding:18px;display:flex;flex-direction:column;flex:1}
body.cf-shell-frame #app .cf-market-copy h3{font-size:16px;margin:12px 0 6px}
body.cf-shell-frame #app .cf-market-copy p{font-size:14px;min-height:42px;margin:0 0 18px}
body.cf-shell-frame #app .cf-market-copy footer{margin-top:auto;gap:12px}
body.cf-shell-frame #app .cf-library-page :is(button,.cf-library-button){font-size:13px;padding:8px 12px;min-height:36px;border-radius:8px}
body.cf-shell-frame #app .cf-library-page .cf-library-note{font-size:12px;margin:12px 0}
body.cf-shell-frame #app .cf-library-hero{padding:28px;margin-bottom:24px;border-radius:16px}
body.cf-shell-frame #app .cf-library-hero h2{font-size:24px;margin:8px 0 12px}
body.cf-shell-frame #app .cf-library-empty{padding:28px}
body.cf-shell-frame #app .cf-schedule-hero{padding:24px;gap:20px}
body.cf-shell-frame #app .cf-schedule-list{margin:24px 0}
body.cf-shell-frame #app .cf-routine-grid>article{padding:20px}
body.cf-shell-frame #app .cf-space-art{height:140px;margin-bottom:20px}
body.cf-shell-frame #app .cf-space-art>div{width:170px;padding:16px}
body.cf-shell-frame #app .cf-library-row{padding:16px;gap:16px}
body.cf-shell-frame #app .cf-library-actions{justify-content:flex-start}
body.cf-shell-frame #app .cf-spaces-hero .cf-library-actions{justify-content:center}
@media(max-width:700px){body.cf-shell-frame #app .cf-library-page{padding:24px 16px 32px}body.cf-shell-frame #app .cf-library-header h1{font-size:26px}}

body.cf-shell-frame.shell-active #app.workspace-app.workspace-app:has(.cf-library-page),
body.cf-shell-frame.shell-active #app.workspace-app.workspace-app:has(.cf-clone-home){padding:28px 32px 40px}
body.cf-shell-frame #app .cf-library-page{padding:0}
@media(max-width:700px){body.cf-shell-frame.shell-active #app.workspace-app.workspace-app:has(.cf-library-page),body.cf-shell-frame.shell-active #app.workspace-app.workspace-app:has(.cf-clone-home){padding:24px 16px 32px}body.cf-shell-frame #app .cf-library-page{padding:0}}