/* Hallmark · surface: desk · macrostructure: n/a desk · theme: preserve
 * Taste · desk preserve · V3 M2 D8
 * pre-emit critique: P4 H4 E4 S4 R4 V3
 * Operate: portal as cockpit, job = scan then act, chrome quieter than the work.
 *
 * Mix: 70% institutional density · 20% Apple polish · 10% overlay glass.
 * Plates are objects (table, chart, brief, toolbar) — not a metric mosaic.
 * One radius (8px). Pills only on chips / nav / FAB.
 */

:root {
  --r-control: 8px;
  --control-h: 32px;
  --row-h: 28px;
}

/* ---------- Numbers ---------- */
table,
.wl-table,
.mkt-table,
.th-table,
.pf-table,
.sc-table,
.mv-table,
.strip-price,
.strip-pct,
.wl-pct,
.qp-price,
.qp-change,
.mh-price,
.mh-change,
.pos, .neg, .up, .dn,
.pf-kpi-value,
td.num, th.num,
.wl-col-num,
.wl-price,
.mv-price, .mv-pct {
  font-variant-numeric: tabular-nums;
}
table td:is(.num, .wl-col-num, .wl-pct, .wl-price, .mv-price, .mv-pct, [data-num]),
.wl-table td.wl-col-num,
.wl-table .wl-pct,
.wl-table .wl-price,
.mv-table .mv-price,
.mv-table .mv-pct,
.mkt-table td.num {
  text-align: right;
  font-family: var(--font-sans);
}

/* ==========================================================================
   Control kit — one height, one radius, color hover, press 0.98
   ========================================================================== */
body[data-oc-shell] .btn,
body[data-oc-shell] .btn-primary,
body[data-oc-shell] .btn-secondary,
body[data-oc-shell] .btn-ghost,
body[data-oc-shell] .btn-danger,
body[data-oc-shell] .im-btn-primary,
body[data-oc-shell] .im-btn-secondary,
body[data-oc-shell] .im-btn-danger,
body[data-oc-shell] .pf-btn,
body[data-oc-shell] .cal-btn,
body[data-oc-shell] .dd-btn,
body[data-oc-shell] .wl-row-btn,
body[data-oc-shell] .wl-btn-primary,
body[data-oc-shell] .wl-btn-secondary,
body[data-oc-shell] .ask-oceanus-btn,
body[data-oc-shell] .an-btn,
body[data-oc-shell] .mem-btn,
body[data-oc-shell] .dash-ask-follow,
body[data-oc-shell] .dash-quick-btn,
body[data-oc-shell] .cew-chip,
body[data-oc-shell] .tab-btn,
body[data-oc-shell] .mv-tab,
body[data-oc-shell] .dash-tl-tab {
  border-radius: var(--r-control) !important;
  min-height: var(--control-h);
  height: auto;
}
body[data-oc-shell] .chip,
body[data-oc-shell] .badge,
body[data-oc-shell] .crit,
body[data-oc-shell] .nav-item,
body[data-oc-shell] .chat-fab,
body[data-oc-shell] #chat-fab,
body[data-oc-shell] .wl-pill {
  border-radius: var(--r-full) !important;
}

body[data-oc-shell] .ico-btn,
body[data-oc-shell] .mh-action,
body[data-oc-shell] .qp-watch,
body[data-oc-shell] .mkt-strip-refresh,
body[data-oc-shell] .wl-mbar-ico {
  width: var(--control-h);
  height: var(--control-h);
  min-height: var(--control-h);
  border-radius: var(--r-control) !important;
  padding: 0;
}

body[data-oc-shell] input[type="text"],
body[data-oc-shell] input[type="password"],
body[data-oc-shell] input[type="email"],
body[data-oc-shell] input[type="number"],
body[data-oc-shell] input[type="search"],
body[data-oc-shell] select {
  height: var(--control-h);
  min-height: var(--control-h);
  border-radius: var(--r-control) !important;
  box-sizing: border-box;
}
body[data-oc-shell] textarea {
  border-radius: var(--r-control) !important;
}
body[data-oc-shell] input:focus-visible,
body[data-oc-shell] textarea:focus-visible,
body[data-oc-shell] select:focus-visible {
  outline: none;
  box-shadow: none !important;
  border-color: var(--accent);
}
body[data-oc-shell] .btn:focus-visible,
body[data-oc-shell] .btn-primary:focus-visible,
body[data-oc-shell] .tab-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
  box-shadow: none !important;
}

.top-bar,
[data-theme="light"] .top-bar {
  border-bottom: none !important;
}

/* Dashboard: page title + greeting + clock on one top-bar row */
html body .top-bar-title-wrap:has(#dash-greeting-text) {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
html body .dash-top-greet {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
html body .dash-top-greet::before {
  content: "";
  width: 1px;
  height: 14px;
  background: var(--border-default);
  flex-shrink: 0;
  align-self: center;
}
html body .dash-top-greet #dash-greeting-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
html body .dash-top-greet .dash-date {
  font-size: var(--fs-xs);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  html body .top-bar-title-wrap:has(#dash-greeting-text) {
    flex-direction: row !important;
    white-space: nowrap;
  }
  html body .top-bar-title-wrap:has(#dash-greeting-text) #page-title {
    display: none !important;
  }
  html body .dash-top-greet {
    display: inline-flex !important;
    flex: 1 1 auto;
  }
  html body .dash-top-greet #dash-greeting-text {
    max-width: 46vw;
  }
  html body .dash-top-greet::before {
    display: none;
  }
}

/* Segmented control: a hairline track and a flat selected fill.
   Desk only. The sliding thumb does not paint here. */
html:not(.page-pmos) body .movers-tabs,
html:not(.page-pmos) body .mkt-tabs,
html:not(.page-pmos) body .dash-tl-switch,
html:not(.page-pmos) body .cal-tabs,
html:not(.page-pmos) body .cal-view-toggle,
html:not(.page-pmos) body .wl-sortbar,
html:not(.page-pmos) body .research-tabs,
html:not(.page-pmos) body .modal-tabs,
html:not(.page-pmos) body .sx-range {
  display: inline-flex !important;
  align-items: center;
  flex: none;
  gap: 2px !important;
  padding: 2px !important;
  width: fit-content;
  max-width: 100%;
  background: var(--bg-base) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html:not(.page-pmos) body .mkt-tabs {
  margin: 8px 10px 0;
}
html:not(.page-pmos) body .modal-tabs,
html:not(.page-pmos) body .research-tabs {
  overflow-x: auto;
}
html:not(.page-pmos) body .mv-tab,
html:not(.page-pmos) body .mkt-tabs .tab-btn,
html:not(.page-pmos) body .dash-tl-switch .dash-tl-tab,
html:not(.page-pmos) body .cal-tab,
html:not(.page-pmos) body .cal-view-btn,
html:not(.page-pmos) body .wl-sort-btn,
html:not(.page-pmos) body .research-tab,
html:not(.page-pmos) body .modal-tab,
html:not(.page-pmos) body .sx-range__btn {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  border-radius: 999px !important;
  min-height: 26px;
  height: 26px;
  padding: 0 10px !important;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}
html:not(.page-pmos) body .mv-tab.active,
html:not(.page-pmos) body .mkt-tabs .tab-btn.active,
html:not(.page-pmos) body .dash-tl-switch .dash-tl-tab.is-active,
html:not(.page-pmos) body .cal-tab.active,
html:not(.page-pmos) body .cal-view-btn.is-active,
html:not(.page-pmos) body .wl-sort-btn.is-active,
html:not(.page-pmos) body .research-tab.is-active,
html:not(.page-pmos) body .modal-tab.is-active,
html:not(.page-pmos) body .sx-range__btn.is-active {
  background: var(--bg-elevated-2) !important;
  color: var(--text-primary) !important;
  font-weight: 600;
}
/* Light track and elevated-2 are nearly the same warm white.
   Mix ink into the chosen segment so the current option reads. */
html[data-theme="light"]:not(.page-pmos) body .mv-tab.active,
html[data-theme="light"]:not(.page-pmos) body .mkt-tabs .tab-btn.active,
html[data-theme="light"]:not(.page-pmos) body .dash-tl-switch .dash-tl-tab.is-active,
html[data-theme="light"]:not(.page-pmos) body .cal-tab.active,
html[data-theme="light"]:not(.page-pmos) body .cal-view-btn.is-active,
html[data-theme="light"]:not(.page-pmos) body .wl-sort-btn.is-active,
html[data-theme="light"]:not(.page-pmos) body .research-tab.is-active,
html[data-theme="light"]:not(.page-pmos) body .modal-tab.is-active,
html[data-theme="light"]:not(.page-pmos) body .sx-range__btn.is-active,
html:not(.page-pmos) body[data-theme="light"] .mv-tab.active,
html:not(.page-pmos) body[data-theme="light"] .mkt-tabs .tab-btn.active,
html:not(.page-pmos) body[data-theme="light"] .dash-tl-switch .dash-tl-tab.is-active,
html:not(.page-pmos) body[data-theme="light"] .cal-tab.active,
html:not(.page-pmos) body[data-theme="light"] .cal-view-btn.is-active,
html:not(.page-pmos) body[data-theme="light"] .wl-sort-btn.is-active,
html:not(.page-pmos) body[data-theme="light"] .research-tab.is-active,
html:not(.page-pmos) body[data-theme="light"] .modal-tab.is-active,
html:not(.page-pmos) body[data-theme="light"] .sx-range__btn.is-active {
  background: color-mix(in srgb, var(--text-primary) 16%, var(--bg-base)) !important;
  color: var(--text-primary) !important;
}
html:not(.page-pmos) body .mv-tab:hover:not(.active),
html:not(.page-pmos) body .mkt-tabs .tab-btn:hover:not(.active),
html:not(.page-pmos) body .dash-tl-switch .dash-tl-tab:hover:not(.is-active),
html:not(.page-pmos) body .cal-tab:hover:not(.active),
html:not(.page-pmos) body .cal-view-btn:hover:not(.is-active),
html:not(.page-pmos) body .wl-sort-btn:hover:not(.is-active),
html:not(.page-pmos) body .research-tab:hover:not(.is-active),
html:not(.page-pmos) body .modal-tab:hover:not(.is-active),
html:not(.page-pmos) body .sx-range__btn:hover:not(.is-active) {
  color: var(--text-primary) !important;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent) !important;
}

/* News tape + Markets tape: see news_timeline.css (single source). */
html body .dash-card-head-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* ==========================================================================
   Work plates — opaque elevated + 8px, no outer frame.
   Fill vs canvas is the edge. Inner hairlines, controls, overlays stay.
   ========================================================================== */
html body .content-left .card,
html body .content-left .panel,
html body .dash.dash--studio .dash-card,
html body .dash.dash--studio .dash-quick,
html body .dash.dash--studio .dash-strip,
html body .dash.dash--studio .dash-strip--merged,
html body .dash.dash--studio .dash-card--hero,
html body .mkt-card,
html body .mkt-strip,
html body .mkt-header,
html body .th-masthead,
html body .th-pg .panel,
html body .th-chart-card,
html body .th-row > .th-main-col > .th-chart-card,
html body .th-row > .th-main-col > .panel,
html body .th-row > .th-side-col > .panel,
html body .th-pg > .grid-2 > *,
html body #th-exec-strip,
html body #th-chat-panel,
html body .th-pg .panel#th-chat-panel,
html body .wl-header,
html body .wl-root .wl-header,
html body .wl-table-wrap,
html body .pipelines-page .pp-toolbar,
html body .pw-card,
html body .pw-uni-table,
html body .research-filter-strip,
html body .settings-header,
html body .settings-nav,
html body .settings-content > section > .card,
html body .settings-content > section > .cards > .card,
html body .scout-toolbar,
html body .scout-progress,
html body .ind-header,
html body .ind-table-wrap,
html body .finder,
html body .hp-toc,
html body .hp-agent-card,
html body .an-root--desk .an-workspace,
html body .an-root--desk .an-persona-section {
  background: var(--bg-elevated) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

/* Ticker copilot — AI object. Filament bloom, not a neon stroke.
   Hallmark · component-scope · desk · preserve tokens
   Taste · desk preserve · V3 M2 D8 · one accent, no spin, no purple, no sheen.
   Operate: company page as Detail, job = inspect then ask, copilot is the live channel.
   Light radiates (even 0 0 shadows). Hairline is mixed into the plate so the
   object is defined by emission, not a 2px gamer box. */
html body #th-chat-panel,
html body .content-left .panel#th-chat-panel,
html body .th-pg .panel#th-chat-panel,
html body .th-pg > .grid-2 > #th-chat-panel,
html body #th-chat-panel.is-minimized,
html body .content-left .panel#th-chat-panel.is-minimized,
html body .th-pg .panel#th-chat-panel.is-minimized,
html body > #th-chat-panel,
html body > #th-chat-panel.is-maximized {
  position: relative;
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--accent-ai, var(--accent)) 18%, var(--bg-elevated)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-ai, var(--accent)) 10%, var(--bg-elevated)) 0%,
      var(--bg-elevated) 56px
    ) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent-ai, var(--accent)) 42%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent-ai, var(--accent)) 14%, transparent),
    inset 0 0 32px -10px color-mix(in srgb, var(--accent-ai, var(--accent)) 16%, transparent),
    0 0 18px color-mix(in srgb, var(--accent-ai, var(--accent)) 34%, transparent),
    0 0 48px color-mix(in srgb, var(--accent-ai, var(--accent)) 20%, transparent) !important;
}
html body > #th-chat-panel.is-maximized {
  z-index: 5000;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent-ai, var(--accent)) 42%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent-ai, var(--accent)) 14%, transparent),
    inset 0 0 32px -10px color-mix(in srgb, var(--accent-ai, var(--accent)) 16%, transparent),
    0 0 22px color-mix(in srgb, var(--accent-ai, var(--accent)) 36%, transparent),
    0 0 56px color-mix(in srgb, var(--accent-ai, var(--accent)) 22%, transparent),
    0 24px 64px -18px rgba(0, 0, 0, 0.55) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body #th-chat-panel:hover,
  html body .content-left .panel#th-chat-panel:hover,
  html body > #th-chat-panel:hover {
    border-color: color-mix(in srgb, var(--accent-ai, var(--accent)) 32%, var(--bg-elevated)) !important;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--accent-ai, var(--accent)) 52%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--accent-ai, var(--accent)) 20%, transparent),
      inset 0 0 36px -8px color-mix(in srgb, var(--accent-ai, var(--accent)) 20%, transparent),
      0 0 22px color-mix(in srgb, var(--accent-ai, var(--accent)) 42%, transparent),
      0 0 56px color-mix(in srgb, var(--accent-ai, var(--accent)) 24%, transparent) !important;
  }
  html body > #th-chat-panel.is-maximized:hover {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--accent-ai, var(--accent)) 52%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--accent-ai, var(--accent)) 20%, transparent),
      inset 0 0 36px -8px color-mix(in srgb, var(--accent-ai, var(--accent)) 20%, transparent),
      0 0 24px color-mix(in srgb, var(--accent-ai, var(--accent)) 44%, transparent),
      0 0 60px color-mix(in srgb, var(--accent-ai, var(--accent)) 26%, transparent),
      0 24px 64px -18px rgba(0, 0, 0, 0.55) !important;
  }
}
html body #th-chat-panel:focus-within,
html body .content-left .panel#th-chat-panel:focus-within,
html body .th-pg .panel#th-chat-panel:focus-within,
html body > #th-chat-panel:focus-within {
  border-color: color-mix(in srgb, var(--accent-ai, var(--accent)) 46%, var(--bg-elevated)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent-ai, var(--accent)) 62%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent-ai, var(--accent)) 26%, transparent),
    inset 0 0 40px -6px color-mix(in srgb, var(--accent-ai, var(--accent)) 24%, transparent),
    0 0 26px color-mix(in srgb, var(--accent-ai, var(--accent)) 48%, transparent),
    0 0 64px color-mix(in srgb, var(--accent-ai, var(--accent)) 28%, transparent) !important;
}
html body > #th-chat-panel.is-maximized:focus-within {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent-ai, var(--accent)) 62%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent-ai, var(--accent)) 26%, transparent),
    inset 0 0 40px -6px color-mix(in srgb, var(--accent-ai, var(--accent)) 24%, transparent),
    0 0 28px color-mix(in srgb, var(--accent-ai, var(--accent)) 50%, transparent),
    0 0 68px color-mix(in srgb, var(--accent-ai, var(--accent)) 30%, transparent),
    0 24px 64px -18px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="light"] body #th-chat-panel,
html[data-theme="light"] body .content-left .panel#th-chat-panel,
html[data-theme="light"] body .th-pg .panel#th-chat-panel,
html[data-theme="light"] body > #th-chat-panel {
  border: 1px solid color-mix(in srgb, var(--accent-ai, var(--accent)) 26%, var(--border-default)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-ai, var(--accent)) 7%, var(--bg-elevated)) 0%,
      var(--bg-elevated) 48px
    ) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent-ai, var(--accent)) 28%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent-ai, var(--accent)) 10%, transparent),
    0 0 14px color-mix(in srgb, var(--accent-ai, var(--accent)) 16%, transparent),
    0 0 32px color-mix(in srgb, var(--accent-ai, var(--accent)) 10%, transparent) !important;
}
html[data-theme="light"] body #th-chat-panel:focus-within,
html[data-theme="light"] body > #th-chat-panel:focus-within {
  border-color: color-mix(in srgb, var(--accent-ai, var(--accent)) 44%, var(--border-default)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent-ai, var(--accent)) 40%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent-ai, var(--accent)) 16%, transparent),
    0 0 18px color-mix(in srgb, var(--accent-ai, var(--accent)) 22%, transparent),
    0 0 36px color-mix(in srgb, var(--accent-ai, var(--accent)) 12%, transparent) !important;
}

html body .dash.dash--studio {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html body .dash.dash--studio .dash-grid,
html body .dash.dash--studio .dash-grid-2,
html body .dash.dash--studio .dash-grid-3 {
  gap: 8px;
  margin-bottom: 0;
}
html body .dash.dash--studio .dash-hero {
  gap: 8px;
  margin-bottom: 0;
  align-items: stretch;
}
html body .dash.dash--studio .dash-card,
html body .dash.dash--studio .dash-quick {
  margin-bottom: 0 !important;
}
html body .dash.dash--studio .dash-card-head {
  background: transparent;
  border-bottom: 1px solid var(--border-muted);
  padding: 10px 12px 8px;
}
html body .dash.dash--studio .dash-card-body {
  padding: 8px 12px 12px;
}
html body .dash.dash--studio .dash-card--hero .dash-card-head {
  padding: 10px 12px 8px;
}
html body .dash.dash--studio .dash-card--hero .dash-card-body {
  padding: 8px 12px 14px;
  min-height: 72px;
  font-size: var(--fs-sm);
}
html body .dash.dash--studio .dash-card--hero .dash-card-head h2 {
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  font-weight: 400 !important;
  font-size: var(--fs-md) !important;
  line-height: 1.25;
  color: var(--text-primary) !important;
}
html body .dash.dash--studio .dash-strip,
html body .dash.dash--studio .dash-strip--merged {
  min-height: 40px;
  margin-bottom: 0 !important;
  overflow: hidden;
}

html body .dash.dash--studio .dash-quick {
  padding: 10px 8px 10px 10px !important;
  gap: 2px !important;
}
html body .dash-quick-title {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: -0.02em;
  padding: 2px 8px 6px;
}
html body .dash-quick-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  justify-content: flex-start !important;
  padding: 0 8px !important;
  min-height: var(--control-h);
  color: var(--text-secondary) !important;
  font-weight: var(--fw-medium) !important;
}
html body .dash-quick-btn:hover,
html body .dash-quick-btn--ai:hover {
  background: var(--btn-wash, color-mix(in srgb, var(--text-primary) 6%, transparent)) !important;
  color: var(--text-primary) !important;
}
html body .dash-quick-btn--ai { color: var(--text-primary) !important; }
html body .dash-ai-chip,
html body .dash-quick-mark {
  background: var(--accent) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .dash-ask-follow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  background: transparent !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  font-weight: var(--fw-medium) !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  line-height: 1 !important;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
}
html body .dash-ask-follow:hover {
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  background: var(--btn-wash, color-mix(in srgb, var(--text-primary) 6%, transparent)) !important;
  text-decoration: none !important;
}

html body .dash-adage {
  display: none !important;
}
html body .dash-adage::before,
html body .dash-adage::after { content: none !important; }

html body .dash.dash--studio .dash-card-head h2,
html body .mkt-card-head h3 {
  text-transform: none;
  letter-spacing: -0.02em;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.25;
  color: var(--text-muted);
}
html body .dash.dash--studio .dash-card--hero .dash-card-head h2 {
  font-size: var(--fs-md) !important;
  color: var(--text-primary) !important;
  font-weight: 400 !important;
}

/* ==========================================================================
   Markets — search+quote as one header plate; cards as objects
   ========================================================================== */
html body .mkt-shell {
  gap: 8px !important;
  padding: 8px !important;
}
html body .mkt-strip {
  height: 36px;
  overflow: hidden;
  align-items: center;
}
html body .mkt-strip-kicker,
html body .mkt-strip-seq,
html body .mkt-strip .idx-tile {
  display: flex;
  align-items: center;
  height: 100%;
}
html body .mkt-strip .idx-tile {
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}
html body .mkt-strip-track {
  animation: mkt-tape var(--tape-s, 36s) linear infinite;
}
html body .mkt-strip:hover .mkt-strip-track,
html body .mkt-strip:focus-within .mkt-strip-track {
  animation-play-state: paused;
}
html body .mkt-strip-refresh:hover { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html body .mkt-strip-track {
    animation: none !important;
    transform: none !important;
  }
}
html body .mkt-header {
  gap: 12px !important;
  padding: 8px 10px;
  align-items: center;
}
html body .mkt-quote-pill {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  height: auto;
  min-height: var(--control-h);
  padding: 0;
}
html body .mkt-search { height: var(--control-h); }
html body .mkt-search input {
  height: var(--control-h) !important;
  border-radius: var(--r-control) !important;
  background: var(--bg-base) !important;
  box-shadow: none !important;
}
html body .mkt-search input:focus,
html body .mkt-search input:focus-visible {
  box-shadow: none !important;
  outline: none;
  border-color: var(--accent) !important;
}
html body .qp-watch:hover { transform: none !important; }
html body .mkt-grid { gap: 8px !important; }
html body .mkt-col { gap: 8px !important; }
html body .mkt-card-head {
  padding: 10px 12px 8px;
  background: transparent;
}

/* ==========================================================================
   Ticker — security header + section plates
   ========================================================================== */
html body .th-pg {
  gap: 8px !important;
  padding: 8px !important;
}
html body .th-masthead {
  padding: 12px 14px !important;
}
html body .th-pg > .grid-2,
html body .th-row,
html body .th-row > .th-main-col,
html body .th-row > .th-side-col {
  gap: 8px !important;
}
html body .th-pg .panel:not(#th-chat-panel) > h2,
html body .th-pg > .panel > h2,
html body .th-pg > .grid-2 > .panel > h2,
html body .th-pg > .th-row > .th-side-col > .panel > h2,
html body .th-pg > .th-row > .th-main-col > .panel > h2 {
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 12px 6px !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  font-weight: 400 !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.25;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-muted) !important;
}
html body #th-exec-strip {
  gap: 0 !important;
  padding: 8px 12px !important;
}
html body #th-exec-strip .ex-cell {
  padding: 0 16px 0 0;
  border-right: 1px solid var(--border-muted);
}
html body #th-exec-strip .ex-cell:last-child { border-right: none; }
html body #th-exec-strip .ex-cell b {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
html body #th-chat-panel > h2,
html body .th-pg #th-chat-panel > h2,
html body .content-left .panel#th-chat-panel > h2 {
  font-size: var(--fs-sm) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25;
  color: var(--text-primary) !important;
  text-transform: none !important;
}

/* Watchlist: toolbar plate + tape/table as one object */
html body .wl-root {
  padding: 8px !important;
  gap: 8px !important;
}
html body .wl-header,
html body .wl-root .wl-header {
  padding: 10px 12px !important;
  margin-bottom: 0 !important;
}
html body .wl-idx {
  background: var(--bg-elevated) !important;
  border: none !important;
  border-radius: var(--r-md) var(--r-md) 0 0 !important;
  margin-bottom: 0 !important;
}
html body .wl-table-wrap {
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  border-top: none !important;
}
html body .wl-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-elevated);
}
html body .wl-table thead th:first-child,
html body .wl-table thead th:last-child { border-radius: 0 !important; }
html body .wl-table tbody td {
  padding-top: 4px;
  padding-bottom: 4px;
  height: var(--row-h);
}

html body .pipelines-page .pp-toolbar {
  padding: 10px 12px !important;
  margin-bottom: 12px !important;
}
html body .research-filter-strip {
  padding: 10px 12px !important;
}

/* Object cards: same fill, no frame. Hover is wash, not a stronger box. */
html body .note-card,
html body .board-card,
html body .vtl-card,
html body .sc-card,
html body .pp-card,
html body .pw-note,
html body .an-persona-card,
html body .ind-sector-card,
html body .scout-result {
  border: none !important;
  border-radius: var(--r-md);
  box-shadow: none !important;
  transform: none !important;
}
html body .note-card:hover,
html body .board-card:hover,
html body .vtl-card:hover,
html body .sc-card:hover,
html body .pp-card:hover,
html body .pw-note:hover,
html body .an-persona-card:hover,
html body .ind-sector-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
html body .an-persona-card:hover:not(.is-active),
html body .ind-sector-card:hover,
html body .pp-card:hover,
html body .pw-note:hover,
html body .note-card:hover,
html body .board-card:hover,
html body .vtl-card:hover,
html body .sc-card:hover {
  background: var(--bg-elevated-2);
}
html body .pp-card-cover { width: 1px !important; }

/* Meaning, not chrome — keep after border:none */
html body .note-card.is-shared {
  border-left: 3px solid var(--clr-purple) !important;
}
html body .sc-card.sc-status-promoted {
  border: 1px dashed var(--border-default) !important;
}
html body .scout-result-ok { border-left: 4px solid #10b981 !important; }
html body .scout-result-empty { border-left: 4px solid #f59e0b !important; }
html body .scout-result-skipped { border-left: 4px solid #3b82f6 !important; }
html body .scout-result-error { border-left: 4px solid #ef4444 !important; }
html body .cal-grid { border: none !important; }
html body .settings-content .card-danger {
  border: 1px solid rgba(248, 81, 73, 0.35) !important;
  background: linear-gradient(180deg, var(--danger-bg) 0%, var(--bg-elevated) 100%) !important;
}

html body .settings-header { padding: 14px 16px !important; }
html body .settings-nav { padding: 8px !important; }
html body .settings-content > section > .card,
html body .settings-content > section > .cards > .card {
  padding: 16px !important;
}
html body .settings-avatar {
  background: var(--accent) !important;
  box-shadow: none !important;
}

html body .wl-table tbody tr:hover,
html body table tbody tr:hover,
html body .mv-table tr:hover td,
html body .mkt-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
html body .wl-table tbody tr.is-selected,
html body .wl-table tbody tr[aria-selected="true"] {
  background: var(--accent-muted);
}

/* ==========================================================================
   States — skeleton, empty, overlay
   ========================================================================== */
@keyframes oc-desk-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
html body .dash-loading,
html body .strip-loading,
html body .mkt-strip-skeleton,
html body .t-empty {
  position: relative;
  color: transparent !important;
  min-height: 44px;
  overflow: hidden;
}
html body .dash-loading::after,
html body .strip-loading::after,
html body .mkt-strip-skeleton::after,
html body .t-empty::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 10px;
  width: 64%;
  border-radius: 4px;
  background: var(--bg-elevated-2);
  background-image: linear-gradient(
    90deg,
    var(--bg-elevated-2) 0%,
    color-mix(in srgb, var(--accent) 10%, var(--bg-elevated-2)) 50%,
    var(--bg-elevated-2) 100%
  );
  background-size: 200% 100%;
  animation: oc-desk-shimmer 1.6s ease-in-out infinite;
}
html body .dash-empty,
html body .im-empty,
html body .wl-empty,
html body .cal-empty,
html body .pp-empty,
html body .th-empty,
html body .chart-empty {
  text-align: left;
  padding: 14px 4px;
}
html body .dash-empty::before,
html body .im-empty::before,
html body .wl-empty::before,
html body .cal-empty::before,
html body .pp-empty::before,
html body .th-empty::before {
  content: none !important;
}

/* Overlay glass: temporary layers only */
html body .oc-cmdp__panel,
html body .oc-sheet__panel,
html body .oc-pop,
html body .user-menu,
html body .lang-pop-menu,
html body .theme-pop-menu,
html body .oc-ss-popup,
html body .persona-popover,
html body .chat-pop,
html body .chat-sessions-pop,
html body .chat-model-pop,
html body .chat-tier-pop,
html body .mkt-search-results,
html body .ck-dd__menu {
  background: var(--overlay-fill) !important;
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
  border-radius: 10px !important;
  box-shadow: var(--overlay-shadow) !important;
  backdrop-filter: var(--overlay-filter) !important;
  -webkit-backdrop-filter: var(--overlay-filter) !important;
}
@media (prefers-reduced-transparency: reduce) {
  html body .oc-cmdp__panel,
  html body .oc-sheet__panel,
  html body .oc-pop,
  html body .user-menu,
  html body .lang-pop-menu,
  html body .theme-pop-menu,
  html body .oc-ss-popup,
  html body .persona-popover,
  html body .chat-pop,
  html body .chat-sessions-pop,
  html body .chat-model-pop,
  html body .chat-tier-pop,
  html body .mkt-search-results,
  html body .ck-dd__menu {
    background: var(--bg-elevated) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

html body .chat-drawer,
html body #chat-drawer,
html body .content-right,
html body .sidebar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Chat empty: utility, not a landing hero */
html body .chat-empty-welcome {
  align-items: flex-start !important;
  text-align: left !important;
  gap: 6px !important;
  padding: 12px 14px 8px !important;
  transform: none !important;
}
html body .chat-empty-welcome .cew-icon {
  display: none !important;
  animation: none !important;
}
html body .chat-empty-welcome .cew-title {
  font-size: calc(22px * var(--ui-font-scale, 1)) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
html body .chat-empty-welcome .cew-sub {
  font-size: calc(14px * var(--ui-font-scale, 1)) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  max-width: 46ch;
}
html body .chat-empty-welcome .cew-actions { margin-top: 8px !important; }
html body .chat-empty-welcome .cew-chip {
  min-height: var(--control-h) !important;
  padding: 0 12px !important;
  font-size: calc(14px * var(--ui-font-scale, 1)) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
html body .chat-panel-btn {
  font-size: calc(12px * var(--ui-font-scale, 1)) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}
html body #chat-status.chat-status-bar,
html body .chat-composer-end > .chat-status-bar {
  font-size: calc(12px * var(--ui-font-scale, 1)) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}
html body .chat-msg.user .body {
  padding: 10px 14px !important;
  border: none !important;
  border-radius: 14px 14px 6px 14px !important;
}

/* Composer is a white plate with a drop shadow, the same plate as Helm.
   No accent stroke on the field, the textarea, or the send disc.
   shells.css zeroes the left, right, and bottom padding on desktop and
   tablet, so a 16px field sat flush in the 8px window and the corner
   was clipped. The route rules below put an even inset back and use
   the window radius (--r-lg) so the field nests inside the panel. */
html body .chat-input-row {
  padding: 12px 14px 14px !important;
  background: transparent !important;
}
html[data-route="desktop"] body .chat-input-row,
html[data-route="tablet"] body .chat-input-row,
html[data-route="desktop"] body .content-right.is-empty-session .chat-input-row,
html[data-route="tablet"] body .content-right.is-empty-session .chat-input-row {
  padding: 12px !important;
}
html body .chat-input-wrap,
html body .content-right.is-empty-session .chat-input-wrap,
html body .content-right .chat-input-wrap,
html body .chat-drawer .chat-input-wrap {
  border: none !important;
  border-radius: var(--r-lg) !important;
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(18, 20, 23, 0.18), 0 1px 3px rgba(18, 20, 23, 0.10) !important;
  outline: none !important;
}
html[data-route="desktop"] body .chat-composer-bar,
html[data-route="tablet"] body .chat-composer-bar {
  padding: 4px 8px 8px !important;
}
html body .chat-input-wrap:hover,
html body .content-right .chat-input-wrap:hover,
html body .chat-drawer .chat-input-wrap:hover,
html body .chat-input-wrap:focus-within,
html body .content-right .chat-input-wrap:focus-within,
html body .chat-drawer .chat-input-wrap:focus-within {
  border: none !important;
  outline: none !important;
  background: #fff !important;
}
html body .chat-input-wrap:focus-within,
html body .content-right .chat-input-wrap:focus-within,
html body .chat-drawer .chat-input-wrap:focus-within {
  box-shadow: 0 10px 28px rgba(18, 20, 23, 0.24), 0 2px 4px rgba(18, 20, 23, 0.12) !important;
}
html body #chat-input,
html body #chat-input:hover,
html body #chat-input:focus,
html body #chat-input:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1c1917 !important;
  caret-color: #1c1917;
  /* shells.css sets textarea { font-size: unset !important } on desktop.
     Keep the field with the transcript: 14px at regular weight. Phone stays
     at 16px so focusing the field does not zoom the page. */
  font-size: calc(14px * var(--ui-font-scale, 1)) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}
html body #chat-input::placeholder {
  color: #736d65 !important;
}
/* Dark and steel: the plate follows the theme. Light keeps the white field. */
html:not([data-theme="light"]) body .chat-input-wrap,
html:not([data-theme="light"]) body .content-right.is-empty-session .chat-input-wrap,
html:not([data-theme="light"]) body .content-right .chat-input-wrap,
html:not([data-theme="light"]) body .chat-drawer .chat-input-wrap,
html:not([data-theme="light"]) body .chat-input-wrap:hover,
html:not([data-theme="light"]) body .content-right .chat-input-wrap:hover,
html:not([data-theme="light"]) body .chat-drawer .chat-input-wrap:hover,
html:not([data-theme="light"]) body .chat-input-wrap:focus-within,
html:not([data-theme="light"]) body .content-right .chat-input-wrap:focus-within,
html:not([data-theme="light"]) body .chat-drawer .chat-input-wrap:focus-within {
  background: var(--bg-elevated-2) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body #chat-input,
html:not([data-theme="light"]) body #chat-input:hover,
html:not([data-theme="light"]) body #chat-input:focus,
html:not([data-theme="light"]) body #chat-input:focus-visible {
  color: var(--text-primary) !important;
  caret-color: var(--text-primary);
}
html:not([data-theme="light"]) body #chat-input::placeholder {
  color: var(--text-muted) !important;
}
html[data-route="phone"] body #chat-input,
html[data-route="phone"] body #chat-input:hover,
html[data-route="phone"] body #chat-input:focus,
html[data-route="phone"] body #chat-input:focus-visible {
  font-size: 16px !important;
}
html body #chat-send,
html body #chat-send:not(:disabled),
html body #chat-send:hover:not(:disabled),
html body #chat-send:focus,
html body #chat-send:focus-visible {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Ask AceCamp and Send use the calm accent, not the stronger token blue
   and not the flat monochrome. Dark and steel are the dusty blue; light
   is the same family, deep enough for white type. Helm Send uses it too. */
html {
  --oc-action: #7fa6d6;
  --oc-action-hover: #9bbbe2;
}
html[data-theme="light"] {
  --oc-action: #2f5f9e;
  --oc-action-hover: #244b7f;
}
html body #chat-send:not(:disabled),
html body #chat-send:focus:not(:disabled),
html body #chat-send:focus-visible:not(:disabled) {
  background: var(--oc-action) !important;
  color: var(--text-inverse) !important;
}
html body #chat-send:hover:not(:disabled) {
  background: var(--oc-action-hover) !important;
  color: var(--text-inverse) !important;
}
html body .chat-empty-welcome .cew-chip,
html body .chat-empty-welcome .cew-chip:focus,
html body .chat-empty-welcome .cew-chip:focus-visible {
  background: var(--oc-action) !important;
  color: var(--text-inverse) !important;
}
html body .chat-empty-welcome .cew-chip:hover {
  background: var(--oc-action-hover) !important;
  color: var(--text-inverse) !important;
}
html body #chat-acecamp,
html body #chat-acecamp:hover,
html body #chat-acecamp:focus,
html body #chat-acecamp:focus-visible {
  color: var(--oc-action) !important;
}
html body #chat-acecamp:hover,
html body #chat-acecamp:focus-visible {
  color: var(--oc-action-hover) !important;
}
html body .chat-input-wrap .chat-action-btn,
html body .chat-input-wrap .chat-action-btn:hover,
html body .chat-input-wrap .chat-action-btn:focus-visible {
  border-color: transparent !important;
  box-shadow: none !important;
}
html body .chat-input-wrap .chat-action-btn:hover,
html body .chat-input-wrap .chat-action-btn:focus-visible {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
}
html body .content-right.mode-float,
html body .content-right.mode-mini {
  border: none !important;
}
html body .content-right.mode-float::before {
  border: none !important;
}

/* Sessions, tier, model, layout, and slash menus. Desktop only — the
   phone sheet keeps its own tap sizes. Wording is the menu size (12px)
   at a heavy weight. Times, ids, and hints stay 11px. */
@media (min-width: 821px) {
  html body .chat-sessions-pop,
  html body .chat-model-pop,
  html body .chat-tier-pop {
    border: none !important;
    border-radius: 12px !important;
    padding: 6px !important;
    background: var(--bg-elevated) !important;
    box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body .chat-sessions-pop {
    width: min(380px, calc(100% - 16px));
  }
  html body .chat-model-pop,
  html body .chat-tier-pop {
    min-width: 280px;
    max-width: min(360px, calc(100vw - 24px));
  }
  html body .chat-sessions-pop .sess-head {
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px 2px !important;
    font-size: calc(12px * var(--ui-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.35 !important;
    color: var(--text-primary) !important;
    text-transform: none !important;
    background: transparent !important;
    border: none !important;
  }
  html body .chat-sessions-pop .sess-head-range,
  html body .chat-sessions-pop .sess-count {
    font-size: calc(11px * var(--ui-font-scale, 1)) !important;
    font-weight: 400 !important;
    letter-spacing: 0;
    color: var(--text-muted);
  }
  html body .chat-sessions-pop .sess-all,
  html body .chat-sessions-pop .sess-head .sess-new {
    font-size: calc(12px * var(--ui-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    color: var(--text-secondary);
  }
  html body .chat-sessions-pop .sess-all:hover,
  html body .chat-sessions-pop .sess-head .sess-new:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  }
  html body .chat-sessions-pop .sess-toolbar {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 8px;
    border: none;
    background: transparent;
  }
  html body .chat-sessions-pop .sess-search-wrap { flex: 1 1 auto; min-width: 0; }
  html body .chat-sessions-pop .sess-search {
    height: 32px;
    padding: 0 28px 0 28px;
    font-size: calc(12px * var(--ui-font-scale, 1)) !important;
    font-weight: 400 !important;
    line-height: 1.4;
    letter-spacing: 0;
    border: none !important;
    border-radius: 8px;
    background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-base));
    box-shadow: none !important;
    outline: none !important;
  }
  html body .chat-sessions-pop .sess-search:focus,
  html body .chat-sessions-pop .sess-search:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: color-mix(in srgb, var(--text-primary) 8%, var(--bg-base));
  }
  html body .chat-sessions-pop .sess-nav { flex: 0 0 auto; gap: 2px; }
  html body .chat-sessions-pop .sess-nav-pos {
    font-family: var(--font-sans);
    font-size: calc(11px * var(--ui-font-scale, 1)) !important;
    font-weight: 400 !important;
    letter-spacing: 0;
  }
  html body .chat-sessions-pop li.sess-group,
  html body .chat-model-pop li.grp,
  html body .chat-tier-pop li.grp {
    height: auto;
    padding: 8px 10px 2px !important;
    font-size: calc(11px * var(--ui-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    color: var(--text-muted) !important;
  }
  html body .chat-sessions-pop li.sess {
    height: auto;
    min-height: 32px;
    align-items: center;
    padding: 4px 8px;
    gap: 6px;
  }
  html body .chat-sessions-pop .s-label {
    font-size: calc(12px * var(--ui-font-scale, 1)) !important;
    font-weight: 700 !important;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--text-primary);
  }
  html body .chat-sessions-pop li.sess.active .s-label { font-weight: 700 !important; }
  html body .chat-sessions-pop .s-meta,
  html body .chat-sessions-pop .s-when {
    font-family: var(--font-sans);
    font-size: calc(11px * var(--ui-font-scale, 1)) !important;
    font-weight: 400 !important;
    line-height: 1.3;
    letter-spacing: 0;
  }
  html body .chat-model-pop li.mdl {
    height: auto;
    min-height: 32px;
    padding: 4px 10px;
    gap: 8px;
  }
  html body .chat-model-pop li.mdl .m-label {
    font-size: calc(12px * var(--ui-font-scale, 1)) !important;
    font-weight: 700 !important;
    line-height: 1.3;
    letter-spacing: 0;
  }
  html body .chat-model-pop li.mdl.active .m-label { font-weight: 700 !important; }
  html body .chat-model-pop li.mdl .m-id {
    font-size: calc(11px * var(--ui-font-scale, 1)) !important;
    line-height: 1.3;
    font-weight: 400 !important;
    opacity: 0.72;
  }
  html body .chat-tier-pop li.mdl {
    flex-direction: column;
    align-items: flex-start;
    white-space: normal;
    gap: 1px;
    min-height: 0;
    padding: 6px 10px 7px;
  }
  html body .chat-tier-pop li.mdl .m-label,
  html body .chat-tier-pop li.mdl .m-id {
    max-width: none;
    white-space: normal;
  }
  html body .chat-tier-pop li.mdl .m-id {
    font-family: var(--font-sans);
    font-size: calc(11px * var(--ui-font-scale, 1)) !important;
    font-weight: 400 !important;
    letter-spacing: 0;
    line-height: 1.35;
    opacity: 1;
    color: var(--text-muted);
  }
  html body .chat-model-pop li.mdl-foot,
  html body .chat-tier-pop li.mdl-foot {
    font-size: calc(11px * var(--ui-font-scale, 1)) !important;
    font-weight: 400 !important;
    line-height: 1.4;
    letter-spacing: 0;
    padding: 6px 10px 4px;
  }
  html body .chat-sessions-pop .s-rename-input,
  html body .chat-sessions-pop .s-rename-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-base));
    font-size: calc(12px * var(--ui-font-scale, 1)) !important;
    font-weight: 700 !important;
  }
  /* shells.css sets desktop/tablet input font-size with :not() chains at
     (0,4,2) !important, which beats a class selector. Repeat the chain. */
  html[data-route="desktop"] body .chat-sessions-pop input.sess-search:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html[data-route="tablet"] body .chat-sessions-pop input.sess-search:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html[data-route="desktop"] body .chat-sessions-pop input.s-rename-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html[data-route="tablet"] body .chat-sessions-pop input.s-rename-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    font-size: calc(12px * var(--ui-font-scale, 1)) !important;
  }
  html body .chat-menu-item,
  html body .chat-header-menu .chat-menu-item,
  html body .chat-more-pop .chat-menu-item {
    font-size: calc(12px * var(--ui-font-scale, 1)) !important;
  }
  html body .chat-menu-label {
    font-size: calc(12px * var(--ui-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }
  html body .chat-menu-hint {
    font-size: calc(11px * var(--ui-font-scale, 1)) !important;
    font-weight: 400 !important;
  }
  html body .chat-pop {
    font-size: calc(12px * var(--ui-font-scale, 1)) !important;
  }
  html body .chat-pop .m-primary,
  html body .chat-pop .p-name {
    font-size: calc(12px * var(--ui-font-scale, 1)) !important;
    font-weight: 700 !important;
  }
  html body .chat-pop .m-secondary,
  html body .chat-pop .p-desc {
    font-size: calc(11px * var(--ui-font-scale, 1)) !important;
    font-weight: 400 !important;
  }
}

/* Top-bar icons (Search, Ask, Helm, Desk, Fullscreen) rest with no
   stroke. Hover draws the rounded border and slides the name open
   inside it. Below 821px the names stay hidden and the circles stay. */
html body .top-bar .tb-grow { display: none; }
@media (min-width: 821px) {
  html body .top-bar .oc-cmdp-trigger,
  html body .top-bar .ask-oceanus-btn,
  html body .top-bar .helm-launch,
  html body .top-bar .tb-desk-btn,
  html body .top-bar .tb-fs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: auto;
    min-width: 32px;
    height: 32px;
    padding: 0 7px;
    gap: 0;
    overflow: hidden;
    flex-shrink: 0;
    white-space: nowrap;
    border: 1px solid transparent !important;
    border-radius: var(--r-md) !important;
    background: transparent;
    color: var(--text-secondary);
    transition-property: border-color;
    transition-duration: 420ms;
    transition-timing-function: cubic-bezier(0.37, 0, 0.25, 1);
  }
  html body .top-bar .oc-cmdp-trigger:hover,
  html body .top-bar .oc-cmdp-trigger:focus-visible,
  html body .top-bar .ask-oceanus-btn:hover,
  html body .top-bar .ask-oceanus-btn:focus-visible,
  html body .top-bar .helm-launch:hover,
  html body .top-bar .helm-launch:focus-visible,
  html body .top-bar .tb-desk-btn:hover,
  html body .top-bar .tb-desk-btn:focus-visible,
  html body .top-bar .tb-fs-btn:hover,
  html body .top-bar .tb-fs-btn:focus-visible {
    border-color: color-mix(in srgb, var(--text-primary) 36%, transparent) !important;
    color: var(--text-primary);
  }
  html body.page-desk .top-bar .tb-desk-btn,
  html body .top-bar .tb-desk-btn.active {
    color: var(--accent);
  }
  html body .top-bar .helm-launch[aria-expanded="true"] {
    border-color: var(--oc-action) !important;
    background: var(--oc-action);
    color: var(--text-inverse);
  }
  html body .top-bar .oc-cmdp-trigger__icon,
  html body .top-bar .ask-oceanus-btn__mark,
  html body .top-bar .helm-launch-mark,
  html body .top-bar .tb-desk-btn__ico,
  html body .top-bar .tb-fs-btn .tb-fs-ico {
    flex: 0 0 auto;
    margin: 0;
  }
  html body .top-bar .tb-grow {
    display: block;
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    font-size: calc(12px * var(--ui-font-scale, 1));
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    transition-property: max-width, margin-left, opacity;
    transition-duration: 420ms;
    transition-timing-function: cubic-bezier(0.37, 0, 0.25, 1);
  }
  html body .top-bar .tb-fs-btn .tb-grow--exit { display: none; }
  html.is-page-fs body .top-bar .tb-fs-btn .tb-grow--enter,
  html:fullscreen body .top-bar .tb-fs-btn .tb-grow--enter { display: none; }
  html.is-page-fs body .top-bar .tb-fs-btn .tb-grow--exit,
  html:fullscreen body .top-bar .tb-fs-btn .tb-grow--exit { display: block; }
  html body .top-bar .oc-cmdp-trigger:hover .tb-grow,
  html body .top-bar .oc-cmdp-trigger:focus-visible .tb-grow,
  html body .top-bar .ask-oceanus-btn:hover .tb-grow,
  html body .top-bar .ask-oceanus-btn:focus-visible .tb-grow,
  html body .top-bar .helm-launch:hover .tb-grow,
  html body .top-bar .helm-launch:focus-visible .tb-grow,
  html body .top-bar .helm-launch[aria-expanded="true"] .tb-grow,
  html body .top-bar .tb-desk-btn:hover .tb-grow,
  html body .top-bar .tb-desk-btn:focus-visible .tb-grow,
  html body .top-bar .tb-fs-btn:hover .tb-grow,
  html body .top-bar .tb-fs-btn:focus-visible .tb-grow {
    max-width: 14rem;
    margin-left: 6px;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .top-bar .tb-grow { transition: none; }
}

.oc-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
}
.oc-kpi-strip > div,
.oc-kpi-strip > dl {
  padding: 8px 12px 8px 0;
  border-right: 1px solid var(--border-muted);
  margin: 0;
}
.oc-kpi-strip > :last-child { border-right: none; }
.oc-kpi-strip dt,
.oc-kpi-strip .kpi-lbl {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  margin-bottom: 2px;
}
.oc-kpi-strip dd,
.oc-kpi-strip .kpi-val {
  margin: 0;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}
html body .pf-kpis { gap: 0; }
html body .pf-kpi {
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-muted);
  border-radius: 0;
  padding: 8px 12px 8px 0;
}

body[data-oc-shell] {
  scrollbar-color: color-mix(in srgb, var(--text-dim) 55%, transparent) transparent;
}

@media (max-width: 900px) {
  html body .dash.dash--studio .dash-hero { grid-template-columns: 1fr; }
  :root { --control-h: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .dash-loading::after,
  html body .strip-loading::after,
  html body .mkt-strip-skeleton::after,
  html body .t-empty::after,
  html body .oc-cmdp__panel,
  html body .chat-fab,
  html body #chat-fab,
  html body .chat-empty-welcome {
    animation: none !important;
    transition: none !important;
  }
}

.tb-desk-btn__ico {
  width: 18px;
  height: 18px;
  display: block;
}

/* Desk type. Paper (html.page-pmos, including the company file) stays
   on the face tokens.css already set. Reading floor is 14px, labels 12px,
   captions stay 11px. Titles are regular. Controls and rows are medium.
   A selected nav row and a KPI figure stay semibold so they win a scan. */
html:not(.page-pmos) body[data-oc-shell] {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-base: calc(14px * var(--ui-font-scale, 1));
  --fs-md: calc(15px * var(--ui-font-scale, 1));
  --lh-tight: 1.25;
  --lh-normal: 1.45;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--lh-normal);
}
html:lang(zh-Hant):not(.page-pmos) body[data-oc-shell] {
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", "Inter", ui-sans-serif, system-ui, sans-serif;
}
html:not(.page-pmos) body[data-oc-shell] :is(h1, h2, h3) {
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
html:not(.page-pmos) body[data-oc-shell] .nav-section-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
}
html:not(.page-pmos) body[data-oc-shell] .nav-item {
  letter-spacing: 0;
}
html:not(.page-pmos) body[data-oc-shell] .nav-item.active,
html:not(.page-pmos) body[data-oc-shell] .mv-tab.active,
html:not(.page-pmos) body[data-oc-shell] .mkt-tabs .tab-btn.active,
html:not(.page-pmos) body[data-oc-shell] .tab-btn.active,
html:not(.page-pmos) body[data-oc-shell] .dash-tl-tab.is-active,
html:not(.page-pmos) body[data-oc-shell] .cal-tab.active,
html:not(.page-pmos) body[data-oc-shell] .cal-view-btn.is-active,
html:not(.page-pmos) body[data-oc-shell] .wl-sort-btn.is-active,
html:not(.page-pmos) body[data-oc-shell] .research-tab.is-active,
html:not(.page-pmos) body[data-oc-shell] .modal-tab.is-active,
html:not(.page-pmos) body[data-oc-shell] .sx-range__btn.is-active {
  font-weight: 600;
}
html:not(.page-pmos) body[data-oc-shell] .top-bar-title {
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
html:not(.page-pmos) body[data-oc-shell] .im-pane-header h3 {
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25;
}