/* ShareOS identity — Share Ventures Design System 2.0.1
 * sharevc/design-system@77c19d40f8c4a75fdbc1a56d546eac9afa052308
 * Aeonik is served from this product’s existing licensed font asset. */

@font-face {
  font-family: "Aeonik Pro";
  src: url("/fonts/aeonikprovf.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --sv-black: #000000;
  --sv-white: #ffffff;
  --sv-off-white: #e8e6e4;
  --sv-home-bg: #f1f4f5;
  --sv-gray-light: #c8cbcc;
  --sv-gray-mid: #939799;
  --sv-gray-mid-ink: var(--sv-gray-dark);
  --sv-gray-dark: #5e6366;
  --sv-gray-xdark: #2b3033;
  --sv-green: #00d65d;

  /* Role tokens. Every rule in this file paints through these, never through a
   * raw palette swatch, so a mode is a redefinition here and nothing else.
   *
   *   surface        the page ground            surface-raised  cards, dialogs
   *   surface-sunken wells, code chips          surface-dim     selection, fills
   *   inverse-surface the deliberately opposite plate (user bubble, toast, menus,
   *                   primary buttons) — dark on light, light-lifted on dark
   *   ink / -secondary / -tertiary   primary, supporting, faint text
   *   hairline / -strong / -heavy / -max   structure, in ascending weight
   *   on-accent      ink used ON green; always true black (white on green is
   *                  1.95:1, black on green is 10.78:1) */
  --sv-surface: var(--sv-home-bg);
  --sv-surface-raised: var(--sv-white);
  --sv-surface-sunken: var(--sv-off-white);
  --sv-surface-dim: var(--sv-gray-light);
  --sv-inverse-surface: var(--sv-black);
  --sv-inverse-ink: var(--sv-white);
  --sv-inverse-ink-secondary: var(--sv-gray-light);
  --sv-ink: var(--sv-black);
  --sv-ink-strong: var(--sv-gray-xdark);
  --sv-ink-secondary: var(--sv-gray-dark);
  --sv-ink-tertiary: var(--sv-gray-mid-ink);
  --sv-hairline: var(--sv-gray-light);
  --sv-hairline-strong: var(--sv-gray-mid);
  --sv-hairline-heavy: var(--sv-gray-dark);
  --sv-hairline-max: var(--sv-black);
  /* Declared literally, not as var(--sv-ink): custom properties resolve where
   * they are declared, so a derived value would freeze to the light palette and
   * inherit into the dark rail unchanged. Every scope below restates the pair. */
  --sv-emphasis-surface: #000000;
  --sv-emphasis-ink: #ffffff;
  --sv-on-accent: #000000;
  /* Status colors are pairs: the inverse values remain legible on dark chrome. */
  --sv-danger: #b42318;
  --sv-danger-inverse: #f2807c;
  --sv-attention: #9a6700;
  --sv-attention-inverse: #e2b757;
  --sv-accent: var(--sv-green);
  --sv-accent-ink: var(--sv-black);

  --sv-font-sans: "Aeonik Pro", Arial, sans-serif;
  /* All ordinary product text uses one size, including metadata and badges.
   * Keep the role aliases for callers; compact layouts change spacing, not type. */
  --sv-text-h1: clamp(1.75rem, 3vw, 2rem);
  --sv-text-h2: 1.5rem;
  --sv-text-h3: 1.25rem;
  --sv-text-h4: 1.125rem;
  --sv-text-body: 1rem;
  --sv-text-small: var(--sv-text-body);
  --sv-text-caption: var(--sv-text-body);
  --sv-text-micro: var(--sv-text-body);
  --sv-leading-heading: 1.1;
  --sv-leading-body: 1.6;
  --sv-tracking-heading: -0.01em;
  --sv-tracking-caps: 0.04em;

  --sv-space-1: 0.25rem;
  --sv-space-2: 0.5rem;
  --sv-space-3: 0.75rem;
  --sv-space-4: 1rem;
  --sv-space-5: 1.25rem;
  --sv-space-6: 1.5rem;
  --sv-space-8: 2rem;
  --sv-space-12: 3rem;
  --sv-space-16: 4rem;

  --sv-gutter: clamp(1.25rem, 4vw, 4rem);
  --sv-rail: 18rem;
  --sv-activity-rail: 20rem;
  /* Catch me up docks in the same column the Workboard uses. Slightly wider:
   * it holds prose and a composer, not a list of one-line rows. */
  --sv-side-chat-rail: 22rem;
  /* The transcript's label lane — the wordmark column and the gap before the
   * answer — in one place, because five rows share it: an answer, a peer note,
   * a spoken turn, the live status line and the agent-work line. Re-tiered by
   * the `@container transcript` rules at the end of the transcript section. */
  --sv-transcript-label: 8rem;
  --sv-transcript-label-gap: var(--sv-space-6);
  --sv-radius: 0;
  --sv-hairline-w: 1px;

  --sv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sv-ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --sv-dur-instant: 100ms;
  --sv-dur-fast: 200ms;
  --sv-dur-base: 300ms;
  --sv-dur-slow: 600ms;
  --sv-dur-cine: 1000ms;
  --sv-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.16);
  --sv-shadow-sm: none;
  --sv-shadow-md: none;
  --sv-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Glass roles — the CONTROL layer's material, nothing else. A rule that paints
   * a control group (the rail's command dock, its chips) uses these; message
   * bubbles, transcript text, code blocks and tables stay fully opaque, because
   * reading content behind a blur is the one thing this material must never do.
   *
   *   glass-tint / -raised / -sunken   translucent fills: the pane, a lifted
   *                                    chip, a recessed well
   *   glass-blur / -lift               the backdrop blur+saturate behind the
   *                                    tint; -lift is the scrolled state
   *   glass-rim / -lo                  the inset 1px specular rim (top
   *                                    highlight) and its lower edge
   *   glass-shadow / -lift             the cast shadow, resting and lifted
   *
   * Scopes that redefine surface/ink (workspace.css, the always-light rail)
   * restate these, and workspace.css degrades every one of them to today's
   * solid surfaces under prefers-reduced-transparency and where
   * backdrop-filter is unsupported. */
  --sv-glass-tint: rgb(255 255 255 / 0.66);
  --sv-glass-tint-raised: rgb(255 255 255 / 0.86);
  --sv-glass-tint-sunken: rgb(0 0 0 / 0.05);
  --sv-glass-blur: blur(14px) saturate(140%);
  --sv-glass-blur-lift: blur(22px) saturate(165%);
  --sv-glass-rim: rgb(255 255 255 / 0.75);
  --sv-glass-rim-lo: rgb(0 0 0 / 0.07);
  --sv-glass-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 10px 26px rgb(0 0 0 / 0.09);
  --sv-glass-shadow-lift: 0 1px 2px rgb(0 0 0 / 0.10), 0 16px 34px rgb(0 0 0 / 0.14);
  /* Ink used ON --sv-attention, the "waiting on a person" fill. Paired like
   * --sv-on-accent: the light role is a dark ochre and the dark role a pale
   * one, so one ink cannot serve both. */
  --sv-on-attention: #ffffff;

  --sv-z-nav: 100;
  --sv-z-overlay: 200;
  --sv-z-modal: 300;
  --sv-z-toast: 400;
}

.sv-dark {
  --sv-inverse-ink-secondary: var(--sv-gray-dark);
  --sv-emphasis-surface: #ffffff;
  --sv-emphasis-ink: #000000;
  --sv-surface: var(--sv-black);
  --sv-surface-raised: var(--sv-gray-xdark);
  --sv-surface-sunken: var(--sv-black);
  --sv-ink: var(--sv-white);
  --sv-ink-secondary: var(--sv-gray-light);
  --sv-ink-tertiary: var(--sv-gray-light);
  --sv-danger: var(--sv-danger-inverse);
  --sv-attention: var(--sv-attention-inverse);
  --sv-hairline: var(--sv-gray-dark);
  --sv-accent: var(--sv-green);
  --sv-accent-ink: var(--sv-black);
  /* Dark chrome lifts with light, not with more white: the tints are thin
   * highlights over the surface underneath, the sunken well is a shadow. */
  --sv-glass-tint: rgb(255 255 255 / 0.07);
  --sv-glass-tint-raised: rgb(255 255 255 / 0.13);
  --sv-glass-tint-sunken: rgb(0 0 0 / 0.30);
  --sv-glass-rim: rgb(255 255 255 / 0.16);
  --sv-glass-rim-lo: rgb(0 0 0 / 0.42);
  --sv-glass-shadow: 0 1px 2px rgb(0 0 0 / 0.30), 0 10px 26px rgb(0 0 0 / 0.34);
  --sv-glass-shadow-lift: 0 1px 2px rgb(0 0 0 / 0.36), 0 16px 34px rgb(0 0 0 / 0.46);
  --sv-on-attention: #000000;
  color: var(--sv-ink);
  background: var(--sv-surface);
}

/* The same role tokens serve chat, Admin, Operations and shared conversations.
 * The S and the CTA retain their black/white and black/green identity. */
.theme-dark {
  color-scheme: dark;
  --sv-surface: var(--sv-black);
  --sv-surface-raised: var(--sv-gray-xdark);
  --sv-surface-sunken: var(--sv-black);
  --sv-surface-dim: var(--sv-gray-dark);
  --sv-inverse-surface: var(--sv-gray-xdark);
  --sv-inverse-ink: var(--sv-white);
  --sv-inverse-ink-secondary: var(--sv-gray-light);
  --sv-ink: var(--sv-white);
  --sv-ink-strong: var(--sv-white);
  --sv-ink-secondary: var(--sv-gray-light);
  --sv-ink-tertiary: var(--sv-gray-light);
  --sv-hairline: var(--sv-gray-dark);
  --sv-hairline-strong: var(--sv-gray-mid);
  --sv-hairline-heavy: var(--sv-gray-light);
  --sv-hairline-max: var(--sv-white);
  --sv-emphasis-surface: var(--sv-white);
  --sv-emphasis-ink: var(--sv-black);
  --sv-danger: var(--sv-danger-inverse);
  --sv-attention: var(--sv-attention-inverse);
  /* Restated rather than derived: a custom property resolves where it is
   * declared, so the light values above would freeze into dark chrome. */
  --sv-glass-tint: rgb(255 255 255 / 0.07);
  --sv-glass-tint-raised: rgb(255 255 255 / 0.13);
  --sv-glass-tint-sunken: rgb(0 0 0 / 0.30);
  --sv-glass-rim: rgb(255 255 255 / 0.16);
  --sv-glass-rim-lo: rgb(0 0 0 / 0.42);
  --sv-glass-shadow: 0 1px 2px rgb(0 0 0 / 0.30), 0 10px 26px rgb(0 0 0 / 0.34);
  --sv-glass-shadow-lift: 0 1px 2px rgb(0 0 0 / 0.36), 0 16px 34px rgb(0 0 0 / 0.46);
  --sv-on-attention: #000000;
}

:root { color-scheme: light; }
:root.theme-dark { color-scheme: dark; }
body { font-family: var(--sv-font-sans); }
button, input, textarea, select { font-family: inherit; border-radius: var(--sv-radius); }
:where(button, input, textarea, select, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sv-green);
  outline-offset: 2px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: currentColor;
  font-family: var(--sv-font-sans);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The official S logomark (foundations.md §2): the two production paths in
 * currentColor, so the mark inherits black or white from its surface instead of
 * swapping image files. Size height-only — the artwork's ratio is 828.3/933.4,
 * and any squared box shears it. The wrapper viewBox must be origin-based
 * because <use> of the offset <symbol> already applies the translate. */
.wordmark-symbol {
  display: block;
  height: 1.6em;
  width: auto;
  aspect-ratio: 828.3 / 933.4;
  flex: none;
  fill: currentColor;
  stroke: none;
}

.wordmark-text b {
  font-weight: 700;
}

.wordmark-text span {
  font-weight: 300;
}

/* Clerk injects its button/input skin after our styles and supplies its gloss
 * on ::after. Scope to the public component classes, not generated hashes, so
 * Variant selectors and hover states otherwise reinstate shadows; the scoped
 * reset intentionally takes precedence. Sign-in keeps the same flat controls as the product in every theme/state. */
.cl-rootBox :is(button.cl-formButtonPrimary, button.cl-socialButtonsBlockButton, input.cl-formFieldInput) {
  min-height: 48px;
  border: 1px solid var(--sv-ink);
  border-radius: var(--sv-radius);
  box-shadow: none !important;
  background-image: none;
  font-family: var(--sv-font-sans);
  font-size: 1rem;
}
.cl-rootBox :is(button.cl-formButtonPrimary, button.cl-socialButtonsBlockButton, input.cl-formFieldInput)::before,
.cl-rootBox :is(button.cl-formButtonPrimary, button.cl-socialButtonsBlockButton, input.cl-formFieldInput)::after {
  background-image: none;
  box-shadow: none !important;
}
.cl-rootBox button.cl-formButtonPrimary {
  color: var(--sv-emphasis-ink);
  background: var(--sv-emphasis-surface);
  font-weight: 500;
}
.cl-rootBox button.cl-formButtonPrimary:hover:not(:disabled) {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
}
.cl-rootBox button.cl-socialButtonsBlockButton {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
}
.cl-rootBox button.cl-socialButtonsBlockButton:hover:not(:disabled) { background: var(--sv-surface-sunken); }
.cl-rootBox input.cl-formFieldInput { color: var(--sv-ink); background: var(--sv-surface); }
.cl-rootBox :is(button.cl-formButtonPrimary, button.cl-socialButtonsBlockButton, input.cl-formFieldInput):focus-visible {
  outline: 2px solid var(--sv-green);
  outline-offset: 2px;
}

/* Optional follow-ups and learning receipts share one treatment in live chat
 * and shared transcripts. Keep the action distinct from selectable prose. */
.contextual-next-move {
  display: flex;
  align-items: flex-start;
  gap: var(--sv-space-3);
  min-width: 0;
  max-width: 72ch;
  margin-top: var(--sv-space-4);
  padding-top: var(--sv-space-3);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
  color: var(--sv-ink);
  font-family: var(--sv-font-sans);
}
.contextual-next-move-copy { flex: 1; min-width: 0; }
.contextual-next-move strong { font-size: var(--sv-text-small); font-weight: 500; }
.contextual-next-move p { margin: var(--sv-space-1) 0 0; font-size: var(--sv-text-small); line-height: 1.5; overflow-wrap: anywhere; }
.contextual-next-move-action {
  min-height: 48px;
  margin-top: var(--sv-space-3);
  padding: 0 var(--sv-space-4);
  border: 1px solid var(--sv-ink);
  border-radius: var(--sv-radius);
  color: var(--sv-emphasis-ink);
  background: var(--sv-emphasis-surface);
  font: 500 var(--sv-text-small) var(--sv-font-sans);
  cursor: pointer;
}
.contextual-next-move-action:hover { color: var(--sv-ink); background: var(--sv-surface); }
.contextual-next-move-dismiss {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--sv-radius);
  color: var(--sv-ink-secondary);
  background: transparent;
  font: 24px/1 var(--sv-font-sans);
  cursor: pointer;
}
.contextual-next-move-dismiss:hover { color: var(--sv-ink); background: var(--sv-surface-dim); }
.learning-receipts {
  min-width: 0;
  max-width: 72ch;
  margin-top: var(--sv-space-2);
  color: var(--sv-ink-secondary);
  font: var(--sv-text-caption)/1.5 var(--sv-font-sans);
  overflow-wrap: anywhere;
}
.learning-receipts summary { min-height: 44px; align-content: center; cursor: pointer; }
.learning-receipts ul { margin: 0 0 var(--sv-space-3); padding-left: var(--sv-space-5); }
.learning-receipts li { margin-bottom: var(--sv-space-2); white-space: pre-wrap; }
.contextual-next-move button:focus-visible, .learning-receipts summary:focus-visible {
  outline: 2px solid var(--sv-green);
  outline-offset: 2px;
}

/* Product chrome is shared even when Work and Fleet use different content surfaces. */
.product-shell-brand { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-family:var(--sv-font-sans); font-size:18px; line-height:1; letter-spacing:-.01em; }
.product-shell-brand b { font-weight:700; }
.product-shell-brand > span > span { font-weight:300; }
.product-shell-symbol { display:block; flex:none; width:23px; height:26px; background:currentColor; mask:url("/assets/share-symbol.svg") center / contain no-repeat; }
.product-shell-icon { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
shareos-loading { color:var(--sv-black); font:400 1rem/1.5 var(--sv-font-sans); }
shareos-loading:not([hidden]) { display:grid; place-items:center; padding:var(--sv-space-5); }
shareos-loading[hidden], shareos-mode-switcher[hidden] { display:none!important; }
shareos-loading[fullscreen] { position:fixed; inset:0; z-index:calc(var(--sv-z-modal) + 1); margin:0; width:auto; max-width:none; background:var(--sv-white); }
.product-loading-inner { display:grid; justify-items:center; gap:var(--sv-space-6); }
shareos-loading:not([fullscreen]) .product-shell-brand { display:none; }
.product-loading-inner .product-shell-brand { font-size:22px; }
.product-loading-inner .product-shell-symbol { width:28px; height:32px; }
@container sidebar-head (max-width:240px) { shareos-mode-switcher .product-shell-brand > span:last-child { display:none; } }
.product-loading-status { display:flex; align-items:center; gap:var(--sv-space-3); color:var(--sv-gray-dark); }
.product-loading-progress { position:relative; width:28px; height:2px; overflow:hidden; background:var(--sv-gray-light); }
.product-loading-progress::after { content:""; position:absolute; inset:0; background:currentColor; animation:product-loading 1.4s ease-in-out infinite; }
@keyframes product-loading { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }

/* A product handoff keeps only data-free chrome on screen. The authenticated
 * roots remain inert in script and hidden here until their destination is ready. */
html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) {
  background:var(--sv-surface);
}
html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) :is(.app,#app) {
  visibility:hidden!important;
}
html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) shareos-loading:not([hidden]) {
  --product-handoff-rail:var(--sidebar-width,var(--sv-rail));
  position:fixed;
  inset:0;
  z-index:calc(var(--sv-z-modal) + 1);
  display:block;
  width:auto;
  max-width:none;
  margin:0;
  padding:0;
  overflow:hidden;
  color:var(--sv-ink);
  background:transparent;
  user-select:none;
}
html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) shareos-loading::before {
  position:absolute;
  inset:0 auto 0 0;
  width:var(--product-handoff-rail);
  border-right:var(--sv-hairline-w) solid var(--sv-hairline);
  background:var(--workspace-sidebar,var(--sv-surface-raised));
  content:"";
}
html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) shareos-loading::after {
  position:absolute;
  inset:0 0 auto var(--product-handoff-rail);
  height:var(--sv-space-16);
  border-bottom:var(--sv-hairline-w) solid var(--sv-hairline);
  background:var(--sv-surface);
  content:"";
}
html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) .product-loading-inner {
  position:absolute;
  inset:0;
  display:block;
}
html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) shareos-loading .product-shell-brand {
  position:absolute;
  z-index:1;
  top:0;
  left:var(--sv-space-5);
  display:inline-flex;
  height:var(--sv-space-16);
  align-items:center;
  font-size:18px;
}
html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) .product-loading-inner .product-shell-symbol {
  width:23px;
  height:26px;
}
html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) .product-loading-status {
  position:absolute;
  z-index:1;
  top:0;
  left:calc(var(--product-handoff-rail) + var(--sv-space-6));
  min-height:var(--sv-space-16);
  color:var(--sv-ink-secondary);
}
html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) .product-loading-progress {
  background:var(--sv-hairline);
}

/* Product arrival belongs to stable shell sections, never the whole app. Fleet's
 * ordinary `.in` and view-transition paths keep ownership of later navigation. */
@keyframes product-section-enter {
  from { opacity:0; transform:translateY(-8px); }
}
html[data-product-enter="work"] :where(
  .sidebar-head,
  .sidebar-primary,
  .sidebar-scroll,
  .sidebar-foot,
  .thread-head,
  #messages:not([data-work-enter]),
  #composer-wrap:not([hidden]),
  #phone-navigation:not([hidden])
),
html[data-product-enter="fleet"] :where(
  #nav .nav-head,
  #nav .nav-scroll,
  #nav .me,
  #bar,
  #col > .head:not(.in),
  #col > #frameFold:not(.in),
  #col > .sect > .sect-h:not(.in),
  #col .vcard:not(.in),
  #dock
) {
  animation:product-section-enter var(--sv-dur-base) var(--sv-ease-out) var(--product-enter-delay,0s) backwards;
}
html[data-product-enter="work"] :where(.sidebar-head,#phone-navigation:not([hidden])),
html[data-product-enter="fleet"] #nav .nav-head {
  --product-enter-delay:0s;
}
html[data-product-enter="work"] :where(.sidebar-primary,.sidebar-scroll,.thread-head),
html[data-product-enter="fleet"] :where(#nav .nav-scroll,#nav .me,#bar) {
  --product-enter-delay:var(--sv-dur-instant);
}
html[data-product-enter="work"] :where(.sidebar-foot,#messages:not([data-work-enter]),#composer-wrap:not([hidden])),
html[data-product-enter="fleet"] :where(
  #col > .head:not(.in),
  #col > #frameFold:not(.in),
  #col > .sect > .sect-h:not(.in),
  #col .vcard:not(.in),
  #dock
) {
  --product-enter-delay:var(--sv-dur-fast);
}
html[data-product-enter="fleet"] #col .vcard:nth-child(1):not(.in) {
  --product-enter-delay:var(--sv-dur-instant);
}

@media (max-width:900px) {
  html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) shareos-loading::before {
    content:none;
  }
  html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) shareos-loading::after {
    left:0;
  }
  html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) shareos-loading .product-shell-brand {
    left:var(--sv-space-4);
  }
  html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) .product-loading-status {
    right:var(--sv-space-4);
    left:auto;
  }
}
@media (max-width:420px) {
  html:is([data-product-handoff="work"], [data-product-handoff="fleet"]) .product-shell-brand > span:last-child {
    display:none;
  }
}
shareos-mode-switcher { display:inline-flex; min-width:0; max-width:100%; color:var(--sv-black); font:400 1rem/1.5 var(--sv-font-sans); }
shareos-mode-switcher > .product-mode-btn { display:flex; align-items:center; gap:6px; min-width:0; min-height:44px; max-width:100%; padding:0 6px; border:0; border-radius:8px; margin:0; background:transparent; color:inherit; font:inherit; white-space:nowrap; cursor:pointer; transform:none; }
shareos-mode-switcher > .product-mode-btn:hover, shareos-mode-switcher > .product-mode-btn[aria-expanded="true"] { background:rgb(0 0 0 / .06); }
shareos-mode-switcher .product-mode-dot, shareos-mode-switcher .product-mode-label, shareos-mode-switcher > .product-mode-btn > .product-shell-icon { color:var(--sv-gray-dark); }
shareos-mode-switcher > .product-mode-btn > .product-shell-icon { width:14px; height:14px; }
shareos-mode-switcher > .product-mode-menu { position:fixed; inset:auto; margin:0; width:208px; max-width:calc(100vw - 16px); padding:4px; border:1px solid var(--sv-gray-light); border-radius:10px; background:var(--sv-white); color:var(--sv-black); box-shadow:var(--sv-shadow-lg); }
shareos-mode-switcher > .product-mode-menu:popover-open { display:grid; }
shareos-mode-switcher > .product-mode-menu > a { display:flex; align-items:center; gap:12px; min-height:44px; width:100%; padding:0 12px; margin:0; border:0; border-radius:6px; color:inherit; font:400 1rem/1.5 var(--sv-font-sans); text-align:left; text-decoration:none; white-space:nowrap; }
shareos-mode-switcher > .product-mode-menu > a:hover { background:rgb(0 0 0 / .06); }
shareos-mode-switcher > .product-mode-menu > a > span { flex:1; }
shareos-mode-switcher :is(button,a):focus-visible { outline:2px solid currentColor; outline-offset:-2px; }
.theme-dark :is(shareos-loading,shareos-mode-switcher) { color:var(--sv-white); }
.theme-dark shareos-loading[fullscreen], .theme-dark shareos-mode-switcher > .product-mode-menu { background:var(--sv-gray-xdark); color:var(--sv-white); }
.theme-dark shareos-mode-switcher > .product-mode-menu { border-color:var(--sv-gray-dark); }
.theme-dark .product-loading-status, .theme-dark shareos-mode-switcher :is(.product-mode-dot,.product-mode-label), .theme-dark shareos-mode-switcher > .product-mode-btn > .product-shell-icon { color:var(--sv-gray-light); }
.theme-dark shareos-mode-switcher > .product-mode-btn:hover, .theme-dark shareos-mode-switcher > .product-mode-btn[aria-expanded="true"], .theme-dark shareos-mode-switcher > .product-mode-menu > a:hover { background:rgb(255 255 255 / .08); }
@media (prefers-reduced-motion:reduce) {
  .product-loading-progress::after { animation:none; transform:none; }
  html[data-product-enter] :where(
    .sidebar-head,
    .sidebar-primary,
    .sidebar-scroll,
    .sidebar-foot,
    .thread-head,
    #messages,
    #composer-wrap,
    #phone-navigation,
    #nav .nav-head,
    #nav .nav-scroll,
    #nav .me,
    #bar,
    #col > .head,
    #col > #frameFold,
    #col > .sect > .sect-h,
    #col .vcard,
    #dock
  ) { animation:none!important; }
}