/* ==========================================================================
   Flat design layer — P0 tokens (2026-10-14).
   Quiet, flat surfaces after the beside.com study: hairline rings instead
   of filled plates and drop shadows, one accent, lighter weights, softer
   corners. Everything here is scoped to html[data-ui="flat"].

   Revert: Settings → Preferences → Appearance → Design: Classic, or open any
   page with ?ui=classic (sticks per browser). Portal-wide default is the
   OCEANUS_UI_DEFAULT env var ("flat" | "classic"). Classic is today's look,
   unchanged — this file only adds overrides.

   Type face and the 14px reading size come from desk.css; the Swiss-plate
   pages (html.page-pmos) keep their own face and masts. Themes can be set
   on html, body or .app-layout, so each theme block targets all three.
   ========================================================================== */

/* ---- Theme-independent: corners, weights, shadows as rings ------------- */
html[data-ui="flat"],
html[data-ui="flat"] body,
html[data-ui="flat"] [data-theme] {
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-card: 12px;
  --r-panel: 12px;
  --r-control: 6px;
  --r-full: 9999px;

  --fw-semibold: 500;
  --fw-bold: 600;

  /* Small lift for main-content cards. Light overrides this below. */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.14);
}

/* ---- Dark (default) ------------------------------------------------------ */
html[data-ui="flat"]:not([data-theme="light"]):not([data-theme="steel"]),
html[data-ui="flat"]:not([data-theme="light"]):not([data-theme="steel"]) body,
html[data-ui="flat"] [data-theme="dark"] {
  /* Surfaces sit close together so cards read as areas, not plates. */
  --bg-base:        #191817;
  --bg-elevated:    #201f1d;
  --bg-elevated-2:  #292826;
  --bg-input:       #1d1c1a;
  --bg-code:        #1d1c1a;
  --bg-tooltip:     #2c2b29;

  --text-primary:   #f3f1ee;
  --text-secondary: #cfcbc6;
  --text-muted:     #9d9891;
  --text-dim:       #8c8780;

  /* Hairlines, not grey bars. */
  --border-default: rgba(255, 255, 255, 0.09);
  --border-muted:   rgba(255, 255, 255, 0.06);
  --border-strong:  rgba(255, 255, 255, 0.15);
  --border-subtle:  rgba(255, 255, 255, 0.05);
  --border-soft:    rgba(255, 255, 255, 0.07);

  /* One accent, calm. */
  --accent:         #7fa6d6;
  --accent-rgb:     127 166 214;
  --accent-hover:   #9bbbe2;
  --accent-active:  #6a93c7;
  --accent-muted:   rgba(127, 166, 214, 0.14);
  --info:           #7fa6d6;
  --info-bg:        rgba(127, 166, 214, 0.12);

  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 16px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 12px 28px rgba(0, 0, 0, 0.32);
  --shadow-xl: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px rgba(0, 0, 0, 0.40);

  --ambient-base:   #191817;
}

/* ---- Light: warm off-white canvas, white surfaces (beside.com palette) -- */
html[data-ui="flat"][data-theme="light"],
html[data-ui="flat"][data-theme="light"] body,
html[data-ui="flat"] [data-theme="light"] {
  --bg-base:        #f7f6f3;
  --bg-elevated:    #ffffff;
  --bg-elevated-2:  #f1f0ef;
  --bg-input:       #ffffff;
  --bg-code:        #f1f0ef;
  --bg-tooltip:     #1e1d1c;

  --text-primary:   #1e1d1c;
  --text-secondary: #3d3b38;
  --text-muted:     #6f6c66;
  --text-dim:       #78756f;

  --border-default: rgba(0, 0, 0, 0.08);
  --border-muted:   rgba(0, 0, 0, 0.06);
  --border-strong:  rgba(0, 0, 0, 0.12);
  --border-subtle:  rgba(0, 0, 0, 0.05);
  --border-soft:    rgba(0, 0, 0, 0.06);

  /* Same accent family as dark, deep enough for links on white. */
  --accent:         #2f5f9e;
  --accent-rgb:     47 95 158;
  --accent-hover:   #244b7f;
  --accent-active:  #1d3e69;
  --accent-muted:   rgba(47, 95, 158, 0.10);
  --info:           #2f5f9e;
  --info-bg:        rgba(47, 95, 158, 0.08);

  --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 16px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.18);

  --shadow-card: 0 1px 3px rgba(28, 25, 23, 0.035);

  --ambient-base:   #f7f6f3;
}

/* ==========================================================================
   P1 — shared components (2026-10-14). Same switch as P0.
   Card shadows cover every page, including cards on the company file.
   Folder tabs and the three-column chrome are not cards, so they stay flat.
   ========================================================================== */

/* ---- Cards: one surface, a light hairline, no drop shadow, 12px corners -- */
html[data-ui="flat"]:not(.page-pmos) body .content-left .card,
html[data-ui="flat"]:not(.page-pmos) body .content-left .panel,
html[data-ui="flat"]:not(.page-pmos) body .dash.dash--studio .dash-card,
html[data-ui="flat"]:not(.page-pmos) body .dash.dash--studio .dash-strip,
html[data-ui="flat"]:not(.page-pmos) body .dash.dash--studio .dash-strip--merged,
html[data-ui="flat"]:not(.page-pmos) body .dash.dash--studio .dash-quick,
html[data-ui="flat"]:not(.page-pmos) body .mkt-card,
html[data-ui="flat"]:not(.page-pmos) body .mkt-strip,
html[data-ui="flat"]:not(.page-pmos) body .mkt-header,
html[data-ui="flat"]:not(.page-pmos) body .pp-card,
html[data-ui="flat"]:not(.page-pmos) body .note-card,
html[data-ui="flat"]:not(.page-pmos) body .wl-table-wrap,
html[data-ui="flat"]:not(.page-pmos) body .wl-header,
html[data-ui="flat"]:not(.page-pmos) body .pipelines-page .pp-toolbar,
html[data-ui="flat"]:not(.page-pmos) body .pw-card,
html[data-ui="flat"]:not(.page-pmos) body .pw-uni-table,
html[data-ui="flat"]:not(.page-pmos) body .research-filter-strip,
html[data-ui="flat"]:not(.page-pmos) body .settings-header,
html[data-ui="flat"]:not(.page-pmos) body .settings-nav,
html[data-ui="flat"]:not(.page-pmos) body .settings-content > section > .card,
html[data-ui="flat"]:not(.page-pmos) body .settings-content > section > .cards > .card,
html[data-ui="flat"]:not(.page-pmos) body .scout-toolbar,
html[data-ui="flat"]:not(.page-pmos) body .scout-progress,
html[data-ui="flat"]:not(.page-pmos) body .ind-header,
html[data-ui="flat"]:not(.page-pmos) body .ind-table-wrap,
html[data-ui="flat"]:not(.page-pmos) body .hp-toc,
html[data-ui="flat"]:not(.page-pmos) body .hp-agent-card,
html[data-ui="flat"]:not(.page-pmos) body .th-chart-card,
html[data-ui="flat"]:not(.page-pmos) body .th-masthead {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-card, 12px) !important;
  box-shadow: none !important;
}
/* Research Pipelines: search sits on the row under the title, not in a plate.
   Later than the card list above, same selector, so this wins. */
html[data-ui="flat"]:not(.page-pmos) body .pipelines-page .pp-toolbar {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Every other main-content card, on Desk and Paper. Match the card itself,
   not a head or body (those contain "-card-" or "-card__"). */
html[data-ui="flat"] body .content-left :is(
  .card,
  .panel,
  [class$="-card"],
  [class*="-card "],
  [class$="-plate"],
  [class*="-plate "],
  .au-panel,
  .cal-month,
  .cal-agenda,
  .cal-daypane,
  .im-pane,
  .pf-panel,
  .pf-list-wrap,
  .dir-panel,
  .un-tbl,
  .an-sessions
):not(#th-chat-panel) {
  border: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
}
/* List rows share one hairline. The card frame above stacks a full border
   on the next row when the grid gap is 0. */
html[data-ui="flat"]:not(.page-pmos) body #notes-list.notes-grid[data-density="list"] .note-card,
html[data-ui="flat"][data-route="phone"]:not(.page-pmos) body #notes-list .note-card {
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--border-muted) !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
html[data-ui="flat"]:not(.page-pmos) body #notes-list.notes-grid[data-density="list"] .note-card.is-shared,
html[data-ui="flat"][data-route="phone"]:not(.page-pmos) body #notes-list .note-card.is-shared {
  border-left: 3px solid var(--clr-purple) !important;
}
/* Files is one plate. This beats files.css, which clears the shadow. */
html[data-ui="flat"] body .content-left > .finder {
  border: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
}
/* Messages panes sit flush, so a shadow would be clipped. Open a gap. */
html[data-ui="flat"] body .content-left > .im-root {
  gap: 10px;
  padding: 10px;
  background: transparent !important;
  overflow: visible !important;
  box-sizing: border-box;
}
html[data-ui="flat"] body .content-left .im-pane {
  border-right: none !important;
  border-radius: var(--r-card, 12px);
}
html[data-ui="flat"] body .content-left .an-root .an-sessions {
  border: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
}
/* The brief button is inside the card. Let its shadow paint. */
html[data-ui="flat"] body .dash.dash--studio .dash-card {
  overflow: visible !important;
}
/* Choose-analyst rows are menu items. The card rule above would lift each one.
   The id is required: that rule's :not(#th-chat-panel) counts as an id. */
html[data-ui="flat"] body .content-left #an-persona-section .an-persona-card {
  border: none !important;
  box-shadow: none !important;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left .dash-card-head,
html[data-ui="flat"]:not(.page-pmos) body .content-left .card-head {
  border-bottom-color: var(--border-muted) !important;
}

/* ---- Buttons: primary (solid), secondary (hairline), ghost — all pills -- */
html[data-ui="flat"]:not(.page-pmos) body :is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger,
  .wl-btn-primary, .wl-btn-secondary, .im-btn-primary, .im-btn-secondary, .im-btn-danger,
  .an-btn, .cal-btn, .pf-btn, .dd-btn, .mem-btn, .vd-btn, .dash-ask-follow, .dash-empty-ask, .dash-more) {
  border-radius: var(--r-full) !important;
  font-family: var(--font-sans);
  font-size: calc(13px * var(--ui-font-scale, 1));
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
/* Outlined click buttons, same lift as the cards. "Ask about this" is
   .dash-ask-follow. Ghost, danger, and the solid blue primary stay flat.
   Later than the none rule above, and specific enough to win it. */
html[data-ui="flat"] body :is(
  .dash-ask-follow,
  .dir-ask-btn,
  .pp-card-brief,
  .btn-secondary,
  .wl-btn-secondary,
  .im-btn-secondary,
  .an-btn-secondary,
  .cal-btn-secondary,
  .mem-btn,
  .vd-btn,
  .dd-btn:not(.primary)
) {
  box-shadow: var(--shadow-card) !important;
}
html[data-ui="flat"]:not(.page-pmos) body :is(.btn, .btn-secondary, .wl-btn-secondary, .im-btn-secondary,
  .an-btn, .cal-btn, .pf-btn, .dd-btn, .mem-btn, .vd-btn, .dash-ask-follow) {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
}
html[data-ui="flat"]:not(.page-pmos) body :is(.btn, .btn-secondary, .wl-btn-secondary, .im-btn-secondary,
  .an-btn, .cal-btn, .pf-btn, .dd-btn, .mem-btn, .vd-btn, .dash-ask-follow):hover {
  background: var(--bg-elevated-2) !important;
}
/* Same drop shadow, on an opaque plate, so it reads on a white card.
   After the transparent hairline rule. Ghost and solid blue stay as they are. */
html[data-ui="flat"]:not(.page-pmos) body :is(
  .dash-ask-follow,
  .btn-secondary,
  .wl-btn-secondary,
  .im-btn-secondary,
  .an-btn-secondary,
  .cal-btn-secondary,
  .pp-card-brief
) {
  background: var(--bg-elevated) !important;
  box-shadow: var(--shadow-card) !important;
}
html[data-ui="flat"] body .dir-ask-btn {
  box-shadow: var(--shadow-card) !important;
}
html[data-ui="flat"]:not(.page-pmos) body :is(.btn-ghost, .dash-more) {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-secondary) !important;
}
html[data-ui="flat"]:not(.page-pmos) body .btn-ghost:hover { background: var(--bg-elevated-2) !important; }
html[data-ui="flat"]:not(.page-pmos) body :is(.btn-danger, .im-btn-danger) {
  background: transparent !important;
  color: var(--danger) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent) !important;
}
/* Same unsaturated blue as OceanusAI Send, Ask AceCamp, and Helm Send.
   After the hairline .btn rule so a button that also carries .btn stays solid.
   --oc-action is set in desk.css. */
html[data-ui="flat"]:not(.page-pmos) body :is(.btn-primary, .wl-btn-primary, .im-btn-primary, .dash-empty-ask) {
  background: var(--oc-action) !important;
  color: var(--text-inverse) !important;
  border: 1px solid var(--oc-action) !important;
}
html[data-ui="flat"]:not(.page-pmos) body :is(.btn-primary, .wl-btn-primary, .im-btn-primary, .dash-empty-ask):hover {
  background: var(--oc-action-hover) !important;
  border-color: var(--oc-action-hover) !important;
  color: var(--text-inverse) !important;
}

/* ---- Chips, tags, kinds: soft filled pills, sentence case, 11px floor --- */
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(.pill, .chip, .badge, .dash-tl-chip, .ck-chip, .cal-chip,
  .mem-tag-inline, .pp-tag, .att-chip, .att-kind, .rn-kind, .wl-role, .note-pipeline-chip, .un-chip, .rs-chip,
  .wl-list-pill, .an-ctx__tag, .wl-pill, .cew-chip) {
  border: 0 !important;
  border-radius: var(--r-full) !important;
  background: color-mix(in srgb, var(--text-primary) 7%, transparent) !important;
  font-size: calc(11px * var(--ui-font-scale, 1)) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(.chip, .pill, .dash-tl-chip, .ck-chip, .cal-chip,
  .wl-list-pill):is(.active, .is-active, .is-on, [aria-pressed="true"], [aria-selected="true"]) {
  background: var(--oc-action) !important;
  color: var(--text-inverse) !important;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(.chip, .pill, .dash-tl-chip, .ck-chip, .cal-chip,
  .wl-list-pill):is(.active, .is-active, .is-on, [aria-pressed="true"], [aria-selected="true"]):hover {
  background: var(--oc-action-hover) !important;
  color: var(--text-inverse) !important;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(.chip__count, .note-card__status, .note-card__when,
  .cal-evt-when, .dash-tl-sym, .mem-date) {
  font-size: calc(11px * var(--ui-font-scale, 1)) !important;
}

/* ---- Section labels: sentence case, 12px, medium, muted ----------------- */
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(.strip-label, .brief-tag, .cal-grp-col, .filter-label,
  .wl-list-k, .an-sessions__bucket-label, .mkt-strip-kicker, .an-ctx__kicker, .rn-day-label, .ck-dd__sec,
  .pp-card-status, .an-dash-due, .label) {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: calc(12px * var(--ui-font-scale, 1)) !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
}
html[data-ui="flat"]:not(.page-pmos) body .dash.dash--studio :is(.dash-card--pulse, .dash-card--heat) .dash-card-head h2 {
  text-transform: none;
  letter-spacing: 0;
  font-size: calc(12px * var(--ui-font-scale, 1));
  font-weight: 500;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left .cal-grp td {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left .dash-card-head h2 {
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ---- Tables: hairline rows, quiet headers, one figure weight ------------ */
html[data-ui="flat"]:not(.page-pmos) body .content-left table th {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: calc(12px * var(--ui-font-scale, 1)) !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  background: transparent !important;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left table :is(td, th) {
  border-color: var(--border-muted) !important;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left table tbody tr:nth-child(even) td {
  background-color: transparent;
}

/* ---- Inputs: hairline field, control radius ------------------------------ */
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(input[type="text"], input[type="search"],
  input[type="email"], input[type="number"], input[type="password"], select, textarea) {
  border-radius: var(--r-control, 6px);
  border-color: var(--border-default);
  box-shadow: none;
}

/* ---- Empty states: one quiet sentence ------------------------------------ */
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(.dash-empty, .dash-loading) {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: calc(13px * var(--ui-font-scale, 1));
}
/* "View all" style links sit beside 12px labels: keep them at label size. */
html[data-ui="flat"]:not(.page-pmos) body .content-left .dash-more {
  font-size: calc(12px * var(--ui-font-scale, 1));
  padding: 2px 8px;
}

/* ==========================================================================
   P2 — page chrome (2026-10-14). Same switch. The chat panel is being
   reworked in another session and is left alone here.
   ========================================================================== */

/* ---- Sidebar: soft selected row. Icon hues stay the sidebar.css palette. */
html[data-ui="flat"] .sidebar .nav-item:hover { background: var(--bg-elevated-2); }
html[data-ui="flat"] body .sidebar .nav-item.active {
  background: var(--bg-elevated-2);
  border-color: transparent;
}
html[data-ui="flat"] body .sidebar .nav-item.active .label { font-weight: 500 !important; }
html[data-ui="flat"] .sidebar .nav-section-title,
html[data-ui="flat"] .sidebar .nav-section--ai .nav-section-title {
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0;
}

/* ---- Top bar: the Helm launcher as a quiet pill -------------------------- */
html[data-ui="flat"] body .helm-launch {
  border-radius: var(--r-full);
  border-color: var(--border-default);
  background: transparent;
  font-weight: 500;
}
html[data-ui="flat"] body .helm-launch:hover { background: var(--bg-elevated-2); }
html[data-ui="flat"] body .helm-launch-mark { color: var(--text-secondary); }
html[data-ui="flat"] body .helm-launch[aria-expanded="true"] .helm-launch-mark { color: var(--text-inverse); }

/* ---- Status bar: quieter keys, smaller type ------------------------------ */
html[data-ui="flat"] body .status-hint { font-weight: 400; }
html[data-ui="flat"] body .status-hint kbd {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-default);
  color: var(--text-muted);
  font-weight: 500;
}

/* ---- Floating chat button: smaller and lighter where it overlaps pages -- */
html[data-ui="flat"] body :is(.chat-toggle-fab, .chat-fab, #chat-fab) {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border: 0 !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-ui="flat"] body :is(.chat-toggle-fab, .chat-fab, #chat-fab):hover {
  background: var(--bg-elevated-2) !important;
  color: var(--text-primary) !important;
}

/* ==========================================================================
   P3 — pages (2026-10-14). Same switch. Swiss-plate pages (html.page-pmos:
   case file, The Minute, Cases, AI Analysts) keep their style for now.
   ========================================================================== */

/* ---- Research Notes: the filter wall folds behind "More filters" -------- */
.filters-more { display: none; }
html[data-ui="flat"]:not(.page-pmos) body .research-filter-strip :is(.filters-more, .filters-toggle) {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-self: start;
  width: auto;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: calc(12px * var(--ui-font-scale, 1));
  font-weight: 500;
  cursor: pointer;
}
html[data-ui="flat"]:not(.page-pmos) body .research-filter-strip :is(.filters-more, .filters-toggle):hover {
  background: var(--bg-elevated-2);
  color: var(--text-primary);
}
html[data-ui="flat"]:not(.page-pmos) body .research-filter-strip.is-collapsed .filter-body,
html[data-ui="flat"]:not(.page-pmos) body .research-filter-strip.is-collapsed .filters-more {
  display: none !important;
}
html[data-ui="flat"]:not(.page-pmos) body .research-filter-strip:not(.is-expanded)
  .filter-row:is([data-axis="theme"], [data-axis="tags"], [data-axis="tickers"], [data-axis="source"]):not(:has(.chip.is-active)) {
  display: none;
}

/* ---- Research Pipeline: one solid action per screen, not per card ------- */
html[data-ui="flat"]:not(.page-pmos) body .pp-card .pp-card-brief {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
}
html[data-ui="flat"]:not(.page-pmos) body .pp-card .pp-card-brief:hover {
  background: var(--bg-elevated-2) !important;
}

/* ---- Markets: soft tiles, quiet tabs, sentence-case quote labels -------- */
html[data-ui="flat"]:not(.page-pmos) body .kv-tile {
  border: 0 !important;
  border-radius: var(--r-md) !important;
  background: var(--bg-elevated-2) !important;
  box-shadow: none !important;
}
/* Switch geometry lives in the Beside block at the end of this file.
   This rule used to pin .mkt-tabs back to a 6px track. */
html[data-ui="flat"]:not(.page-pmos) body .mkt-header label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500;
  color: var(--text-muted);
}

/* ---- Timeline entries: action group without a frame --------------------- */
html[data-ui="flat"]:not(.page-pmos) body .dash-tl-entry__actions {
  border: 0 !important;
  box-shadow: none !important;
}

/* ---- Watchlist: the default-list tag in sentence case -------------------- */
html[data-ui="flat"]:not(.page-pmos) body .wl-def {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
   P4 — polish (2026-10-14). Same switch. One focus ring, one hover tint,
   shorter motion without bounce, a gentler press.
   ========================================================================== */

/* ---- Motion: shorter, no overshoot ---------------------------------------- */
html[data-ui="flat"],
html[data-ui="flat"] body {
  --dur-pop: 220ms;
  --dur-sheet: 300ms;
  --ease-ios-bounce: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft-spring: cubic-bezier(0.23, 1, 0.32, 1);
}
html[data-ui="flat"] body :is(.btn, .btn-primary, .btn-secondary, .nav-item, .chip, .tab-btn, .mv-tab,
  .oc-cmdp__item, .user-menu-item, .qp-watch, .ask-oceanus-btn, .oc-cmdp-trigger):active {
  transform: scale(0.985) !important;
}

/* ---- Focus: one ring for every control ----------------------------------- */
html[data-ui="flat"] body :is(a, button, [role="button"], [role="tab"], summary, .chip, .seg-btn):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
html[data-ui="flat"] body :is(input, textarea, select):focus-visible {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

/* ---- Hover: one quiet tint for rows and list items ----------------------- */
html[data-ui="flat"]:not(.page-pmos) body .content-left table tbody tr:hover > td {
  background-color: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(.wl-row, .dash-tl-entry):hover {
  background-color: color-mix(in srgb, var(--text-primary) 4%, transparent) !important;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left .note-card:hover,
html[data-ui="flat"]:not(.page-pmos) body .content-left .pp-card:hover {
  box-shadow: none !important;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left .note-card:hover,
html[data-ui="flat"]:not(.page-pmos) body .content-left .board-card:hover,
html[data-ui="flat"]:not(.page-pmos) body .content-left .vtl-card:hover,
html[data-ui="flat"]:not(.page-pmos) body .content-left .pp-card:hover {
  background-color: var(--bg-elevated-2) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Beside controls (2026-10-15). Desk only. A shell and a face:
   the outer edge is a 1px ring, the gutter is the card color, the inner
   face is the warm gray. Paper keeps its sliding ink. Classic uses the same pill.
   Cards stay unshadowed. The solid blue primary stays one face.
   ========================================================================== */

/* ---- Switches: pill shell, 3px gutter, pill face. No sliding thumb. -----
   One radius on every Desk page. Chart-toolbar segments stay with chart_kit. */
html[data-ui="flat"]:not(.page-pmos) body :is(
  .movers-tabs, .mkt-tabs, .dash-tl-switch, .cal-tabs, .cal-view-toggle,
  .wl-sortbar, .research-tabs, .modal-tabs, .sx-range,
  #desk-root .desk-sw, .an-coverage__tabs
) {
  padding: 3px !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-muted) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html[data-ui="flat"]:not(.page-pmos) body .mc-seg {
  border-radius: 999px !important;
}
html[data-ui="flat"]:not(.page-pmos) body .seg:not(.mkt-chart-toolbar .seg):not(.th-chart-toolbar .seg) {
  padding: 3px !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-muted) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html[data-ui="flat"]:not(.page-pmos) body :is(
  .mv-tab,
  .mkt-tabs .tab-btn,
  .dash-tl-switch .dash-tl-tab,
  .cal-tab,
  .cal-view-btn,
  .wl-sort-btn,
  .research-tab,
  .modal-tab,
  .sx-range__btn,
  .seg-btn,
  .seg > button,
  .mc-seg__btn,
  #desk-root .desk-sw button,
  .an-coverage__tab
) {
  border-radius: 999px !important;
}

/* ---- Single click buttons: one hairline. --------------------------------
   A switch or a joined combo keeps the shell above. A button that stands
   alone does not get the 3px gutter plus the outer ring. */
html[data-ui="flat"]:not(.page-pmos) body :is(
  .dash-ask-follow,
  .dir-ask-btn,
  .pp-card-brief,
  .btn-secondary,
  .wl-btn-secondary,
  .im-btn-secondary,
  .an-btn-secondary,
  .cal-btn-secondary,
  .mem-btn,
  .dd-btn:not(.primary),
  .filters-more,
  .filters-toggle
):not(.btn-primary):not(.wl-btn-primary):not(.im-btn-primary):not(.dash-empty-ask):not(.mem-btn-primary):not(.mem-btn-danger) {
  background-color: var(--bg-elevated) !important;
  background-clip: border-box !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}
html[data-ui="flat"]:not(.page-pmos) body :is(
  .dash-ask-follow,
  .dir-ask-btn,
  .pp-card-brief,
  .btn-secondary,
  .wl-btn-secondary,
  .im-btn-secondary,
  .an-btn-secondary,
  .cal-btn-secondary,
  .mem-btn,
  .dd-btn:not(.primary),
  .filters-more,
  .filters-toggle
):not(.btn-primary):not(.wl-btn-primary):not(.im-btn-primary):not(.dash-empty-ask):not(.mem-btn-primary):not(.mem-btn-danger):hover {
  background-color: var(--bg-elevated-2) !important;
  background-clip: border-box !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}
/* A segment inside a switch or combo has no border of its own. */
html[data-ui="flat"]:not(.page-pmos) body :is(
  .movers-tabs, .mkt-tabs, .dash-tl-switch, .cal-tabs, .cal-view-toggle,
  .wl-sortbar, .research-tabs, .modal-tabs, .sx-range, .view-density, .seg, .mc-seg
) :is(button, a, [role="tab"]) {
  border-width: 0 !important;
  box-shadow: none !important;
}
/* Density segments share one track. A per-button shell would split them. */
html[data-ui="flat"]:not(.page-pmos) body .view-density .vd-btn {
  background: transparent !important;
  background-clip: border-box !important;
  border: 0 !important;
  border-left: 1px solid var(--border-muted) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-ui="flat"]:not(.page-pmos) body .view-density .vd-btn:first-child {
  border-left: 0 !important;
}
html[data-ui="flat"]:not(.page-pmos) body .view-density .vd-btn.is-active {
  background: var(--bg-elevated-2) !important;
  background-color: var(--bg-elevated-2) !important;
  color: var(--text-primary) !important;
}
html[data-ui="flat"][data-theme="light"]:not(.page-pmos) body .view-density .vd-btn.is-active,
html[data-ui="flat"]:not(.page-pmos) body[data-theme="light"] .view-density .vd-btn.is-active {
  background: color-mix(in srgb, var(--text-primary) 16%, var(--bg-base)) !important;
  background-color: color-mix(in srgb, var(--text-primary) 16%, var(--bg-base)) !important;
  color: var(--text-primary) !important;
}

/* ---- Wells: a quote, an empty line, or an empty chart sits inset. ------- */
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(
  .dash-empty, .empty-state, .im-empty, .wl-empty, .cal-empty, .pp-empty
) {
  margin: 4px 2px 6px;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-elevated-2)) !important;
  box-shadow: none !important;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left .dash-empty--cta {
  padding: 18px 14px !important;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(
  .dash-card, .card, .panel, .note-card, .mkt-card, .note-rendered
) blockquote {
  margin: 8px 0;
  padding: 10px 12px;
  border: 0 !important;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-elevated-2));
  box-shadow: none;
}
/* A card painted inside a card body becomes the well, not a second frame.
   The id in :not() ties the card rule, which also excludes #th-chat-panel. */
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(
  .dash-card-body, .card-body, .mkt-card-body
) > :is(.card, .panel, .dash-card, [class$="-card"]):not(#th-chat-panel):not(.an-persona-card) {
  margin: 6px;
  border: 0 !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-elevated-2)) !important;
  box-shadow: none !important;
}
/* The price-chart empty plate is .ck-chart-overlay. chart_kit owns it.
   A fill on .chart-empty paints over the canvas. */

/* ---- Page icons: one ink, 14px, quiet until hover or the chosen tab. ----
   Chart icons (.ck-ico) and up/down marks stay out. An SVG with no width
   attribute and width:auto is 300×150, which is what split the price chart
   rail and toolbar. Do not unset width, height, or stroke on those. */
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(
  .dash-card-head,
  .card-head,
  .mkt-card-head,
  .dash-ask-follow,
  .dir-ask-btn,
  .btn-secondary,
  .btn-ghost,
  .dash-more,
  .helm-help,
  .ico-btn,
  .mv-tab,
  .dash-tl-tab,
  .cal-tab,
  .cal-view-btn,
  .wl-sort-btn,
  .research-tab,
  .modal-tab,
  .mkt-tabs .tab-btn
) svg:not(.ck-ico):not(.up):not(.down):not(.pos):not(.neg):not(.chg-up):not(.chg-down):not(.fm-up):not(.fm-down) {
  width: 14px;
  height: 14px;
  opacity: 0.4;
  stroke-width: 1.4;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(
  .dash-card-head,
  .card-head,
  .mkt-card-head,
  .dash-ask-follow,
  .dir-ask-btn,
  .btn-secondary,
  .btn-ghost,
  .dash-more,
  .helm-help,
  .ico-btn,
  .mv-tab,
  .dash-tl-tab,
  .cal-tab,
  .cal-view-btn,
  .wl-sort-btn,
  .research-tab,
  .modal-tab,
  .mkt-tabs .tab-btn
):is(:hover, :focus-visible, .active, .is-active) svg,
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(
  .btn-primary, .wl-btn-primary, .im-btn-primary, .dash-empty-ask
) svg {
  opacity: 1 !important;
}
/* The case-tab Helm landmark names the bot. Its wheel stays full ink.
   The page-icon rule above chains :not() on the svg, which outranks a
   plain class. !important is what keeps this wheel at 16px and full ink. */
html[data-ui="flat"]:not(.page-pmos) body .content-left .helm-help--mark .helm-wheel {
  width: 16px !important;
  height: 16px !important;
  opacity: 1 !important;
  stroke-width: 1.7 !important;
}
/* ---- Light desk tips: a white plate. Dark and steel stay dark. ---------- */
html[data-ui="flat"][data-theme="light"]:not(.page-pmos) .nav-rail-tip,
html[data-ui="flat"]:not(.page-pmos) body[data-theme="light"] .nav-rail-tip,
html[data-ui="flat"][data-theme="light"]:not(.page-pmos) .oc-tip,
html[data-ui="flat"]:not(.page-pmos) body[data-theme="light"] .oc-tip {
  background: #ffffff;
  color: #1e1d1c;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.02);
  font-size: 12px;
  font-weight: 500;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-ui="flat"][data-theme="light"]:not(.page-pmos) .oc-tip-title,
html[data-ui="flat"]:not(.page-pmos) body[data-theme="light"] .oc-tip-title {
  color: #1e1d1c;
  font-size: 12px;
}
html[data-ui="flat"][data-theme="light"]:not(.page-pmos) .oc-tip-arrow,
html[data-ui="flat"]:not(.page-pmos) body[data-theme="light"] .oc-tip-arrow {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-ui="flat"]:not([data-theme="light"]):not(.page-pmos) .nav-rail-tip {
  background: #1e1d1c;
  color: #f3f1ee;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---- Counts and status marks: a hairline pill, not a second filter. ----- */
html[data-ui="flat"]:not(.page-pmos) body .content-left :is(.note-card__status, .dash-tl-sym, .badge) {
  border: 1px solid var(--border-muted) !important;
  border-radius: var(--r-full) !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  font-size: calc(11px * var(--ui-font-scale, 1)) !important;
  font-weight: 500 !important;
  padding: 0 6px;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left .dash-tl-sym:hover {
  background: color-mix(in srgb, var(--text-primary) 6%, transparent) !important;
  color: var(--text-primary) !important;
}
html[data-ui="flat"]:not(.page-pmos) body .content-left .chip:not(.is-active):not(.active):not(.is-on) .chip__count {
  border: 1px solid var(--border-muted);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-muted) !important;
  padding: 0 5px;
  font-size: calc(11px * var(--ui-font-scale, 1)) !important;
}