/* ===================== RESET & BASE ===================== */
/*
  Design approach: asymmetric column hierarchy (narrow nav / wide canvas),
  structure carried by typography and whitespace rather than borders or
  cards, color used only as a navigational accent, never as decoration.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --size: 400px;
  --ratio: 0.75;
  --padding: 0.075;
  --margin: 0.05;
  --gap: 20px;

  /* Canvas: a barely-there warm grey, not white — cards (--surface, still
     pure white) read as distinct floating surfaces from the color contrast
     alone, so structure no longer needs a border line to draw itself. */
  --bg:         #f5f4f2;
  --surface:    #ffffff;
  --surface-2:  #f6f6f4;
  --surface-hover: #efefec;

  /* Sidebar shares the canvas's own grey — one continuous field behind
     both, no seam to draw between them. */
  --sidebar-bg: var(--bg);

  --border:     rgba(0,0,0,0.07);
  --border-strong: rgba(0,0,0,0.13);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);

  --text-primary:   #1c1c1e;
  --text-secondary: #6c6c72;
  --text-tertiary:  #9c9ca1;

  --accent:       #0050c8;
  --accent-light: rgba(0,80,200,0.08);
  --accent-hover: #0046b0;

  /* Pinned-nav category accents — small, purposeful color used only as a
     scanning anchor next to Now/Ask, never applied to page chrome */
  --accent-now:   #b5690a;
  --accent-now-light: rgba(181,105,10,0.10);
  --accent-ask:   var(--accent);
  --accent-ask-light: var(--accent-light);

  /* Cool blue-grey wash for the Now top band — a Stein-own hue, not the
     warm paper tone of the reference this layout took inspiration from */
  --now-wash: #f3f5f8;

  --card-border-soft: var(--border);
  --card-sheen: none;

  --green:        #1a9e40;
  --green-light:  rgba(26,158,64,0.10);
  --orange:       #b5690a;
  --orange-light: rgba(181,105,10,0.10);
  --red:          #d4000a;
  --red-light:    rgba(212,0,10,0.09);
  /* Rounds out the categorical set above for the connect screen's
     per-provider dots (see .connect-provider-dot) — same flat, mid-dark
     saturation as --green/--orange/--red/--accent, not a brand hex. */
  --purple:       #6b3fd4;
  --teal:         #0e8f8f;

  /* Muted signal colors used only within Now's own content (stat dots,
     issue-list severity markers) — the global --red/--orange above read as
     too vivid once several of them sit side by side in one view; these are
     the same hue family, just quieter. */
  --now-critical: #a8433e;
  --now-critical-light: rgba(168,67,62,0.10);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  /* Matches the `radius` CornerKit is given in index.html's applySquircle().
     A bordered squircle element needs its own border-radius at least this
     large — otherwise the browser draws the border along a tighter native
     round-rect than the clip-path cuts, and the stroke gets clipped away
     right where the corner curves. */
  --radius-squircle: 30px;

  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --focus-ring:  0 0 0 3px var(--accent-light), 0 0 0 1px rgba(0,80,200,0.35);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  /* The one display face in the app — the Now headline and the empty-
     state title. Matches frontend-public's own --font-display: a bold
     geometric sans that echoes the logomark's cut-stone angles, in place
     of the Fraunces serif this used before. */
  --font-display: 'Space Grotesk', var(--font);
  --font-mono: "SF Mono", "Menlo", "Monaco", "Cascadia Code", "Consolas", monospace;

  /* Reading-column width for typography-driven views (Now / Ask) */
  --canvas-width: 720px;
}

html, body {
  height: 100%;
}

body {
  background: var(--bg);
  font-family: var(--font);
  margin: 0;
  padding: 0;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* ===================== LINKS ===================== */
/* A bare, un-classed <a> (markdown-style links in notification bodies, a
   plain URL fallback) used to fall through to the browser's UA default —
   Chrome-blue, visited-purple, instant underline — clashing with the
   app's own accent and type. One default here covers every future
   unclassed link too. Underline stays on at rest (color alone isn't
   enough of a cue for a link sitting inside a sentence of otherwise
   plain-colored text) but starts hairline-thin; hovering doesn't just
   swap the color, the line itself thickens, currentColor keeping the two
   in sync automatically wherever a component recolors its own links
   (e.g. .now-source-link's clay tone) without needing to redeclare the
   decoration. Components that are their own control — chips, buttons —
   opt out with their own text-decoration: none. */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-thickness 0.15s var(--ease-out);
}

a:hover,
a:focus-visible {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: color 0.15s ease;
  }
}

/* ===================== GLOBAL POLISH ===================== */

::selection {
  background: rgba(0, 80, 200, 0.18);
  color: var(--text-primary);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.18) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.30);
  background-clip: padding-box;
}

/* ===================== APP SHELL ===================== */
/* Asymmetric column model: narrow fixed nav + wide flexible canvas.
   Hierarchy by importance, not an even grid. */

.app-shell {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
}

.main-area {
  flex: 1 1 auto;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 28px 32px 48px;
}

/* ===================== SIDEBAR ===================== */

.sidebar {
  /* 260px keeps the icon-well/badge/label row breathing room without
     eating into the 12-col content grid. */
  --sidebar-width: 260px;
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  position: relative;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  background: var(--sidebar-bg);
  border: none;
  box-shadow: none;
  border-radius: 0;
  transition: width 0.22s var(--ease-out), flex-basis 0.22s var(--ease-out);
}

/* Icon-only rail — collapsed via the toggle in .sidebar-brand, persisted
   to localStorage (see toggleSidebarCollapse() in app.js) and applied to
   <html> rather than .sidebar itself so the width is already correct on
   first paint (see the inline script in index.html's <head> — reading
   this after the sidebar markup exists would show the full-width sidebar
   for a frame first). Labels/text collapse via .tab-label's own existing
   max-width/opacity transition rather than a new one, so hover/active
   nav rows animate exactly like they already did. */
html.sidebar-collapsed .sidebar {
  --sidebar-width: 72px;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none;
  }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 6px 24px;
}

html.sidebar-collapsed .sidebar-brand {
  flex-direction: column;
  gap: 10px;
  padding: 6px 0 24px;
}

.sidebar-brand-mark {
  display: block;
  flex-shrink: 0;
}

.sidebar-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-left: auto;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.15s var(--ease-out);
}

.sidebar-collapse-toggle:hover {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

.sidebar-collapse-toggle:active {
  transform: scale(0.92);
}

html.sidebar-collapsed .sidebar-collapse-toggle {
  margin-left: 0;
}

/* Mobile-only: collapses the sidebar to a compact bar (brand + toggle),
   see the max-width: 600px block below for the expand/collapse behavior. */
.sidebar-mobile-toggle {
  display: none;
}

/* On desktop this is layout-neutral — everything below the brand row used
   to be direct flex children of .sidebar; wrapping them in one group (so
   they can be hidden as a unit on mobile) has to keep filling the same
   space, so .sidebar-footer's margin-top: auto still pins it to the
   bottom. */
.sidebar-nav-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 2px;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.045);
  border-radius: var(--radius-lg);
  padding: 3px;
  position: relative;
  overflow: visible;
  transition: box-shadow 0.18s ease;
}

.topbar-nav.is-vertical {
  flex-direction: column;
  align-items: stretch;
  background: none;
  border-radius: 0;
  padding: 0;
  gap: 1px;
}

/* One shared highlight sliding behind the active sidebar tab (positioned by
   updateMenuTabIndicator()) instead of each button drawing its own flat
   background — the row reads as a single piece of chrome moving, not
   separate buttons blinking on/off. Sits behind the buttons (z-index 0 vs.
   their 1); starts hidden so there's no stray pill before the first
   position is measured. */
.menu-tab-active-indicator {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--surface-hover);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.32s var(--ease-spring), height 0.32s var(--ease-spring), opacity 0.2s ease;
}

/* Only #menuTabs has the sliding indicator — the bottom Settings/Support
   nav (#menuTabsBottom) keeps the normal flat .is-active background from
   the base .menu-tab rule, a single item doesn't need a moving highlight. */
#menuTabs.topbar-nav.is-vertical .menu-tab.is-active {
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  .menu-tab-active-indicator { transition: opacity 0.2s ease; }
}

/* Pinned to the bottom of the sidebar, above the profile row — separated
   from the main Now/States/Notifications/Ask flow by real empty space
   (the margin-top: auto) rather than by a divider. .sidebar-footer no
   longer needs its own auto margin since this is now the last thing
   claiming the sidebar's free vertical space. */
.sidebar-bottom-nav {
  margin-top: auto;
  padding-top: 10px;
}

.sidebar-footer {
  padding-top: 10px;
}

/* Persistent, unobtrusive account row pinned to the bottom of the panel */
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: var(--radius-md);
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 12px;
}

.sidebar-profile-avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

.sidebar-profile-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.sidebar-profile-sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile-text {
  min-width: 0;
  flex: 1 1 auto;
}

html.sidebar-collapsed .sidebar-profile {
  justify-content: center;
  padding: 8px 0;
}

html.sidebar-collapsed .sidebar-profile-text {
  display: none;
}

/* ===================== TAB LABEL ===================== */

.tab-label {
  display: inline-block;
  overflow: hidden;
  max-width: 155px;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 1;
  transition: max-width 0.28s ease, opacity 0.2s ease, margin-left 0.28s ease;
}

html.sidebar-collapsed .tab-label {
  max-width: 0;
  opacity: 0;
}

/* Reuses .tab-label's own collapse instead of hiding the whole button,
   so a row's hover/active background and the icon inside it don't jump —
   only the label shrinks away. Icon well re-centers in the narrower row
   once the label's gap has nothing to sit next to. */
html.sidebar-collapsed .menu-tab {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}

/* No room for the inline filter list at 72px — collapse suppresses it
   entirely rather than letting it wrap or overflow; States/Notifications
   still navigate normally, they just don't also expand a subnav while
   collapsed. */
html.sidebar-collapsed .menu-subnav {
  display: none;
}

.topbar-action {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  padding: 7px 10px;
  border-radius: var(--radius-md);
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
}

.topbar-action:hover {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

/* ===================== NAV ICON ===================== */

.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}

.menu-tab:hover .nav-icon,
.topbar-action:hover .nav-icon {
  opacity: 0.8;
}

.menu-tab.is-active .nav-icon {
  opacity: 1;
}

/* Every nav item carries the same icon-well treatment — a small rounded
   box behind the icon — so the whole list reads as one consistent
   component. Pinned items (Now / Ask) get a tinted variant as a scan
   anchor; the rest share a neutral tint that strengthens on hover/active. */
.menu-tab-icon-well {
  /* 28px well : 17px icon ≈ 1.65, the golden ratio — same relationship
     everything else in this block scales from. */
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0,0,0,0.04);
  color: var(--text-tertiary);
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
}

/* Count badge on the States icon well — visible before the tab is even
   opened, same idea as the Notifications unread dot but a number, since
   "how many are blocked" is the useful signal here. The ring in --surface
   punches it out from the icon well behind it, like an OS app-icon badge. */
.menu-tab-count-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--sidebar-bg);
  transition: transform 0.2s var(--ease-spring);
}

.menu-tab-count-badge[hidden] {
  display: none;
}

.menu-tab:hover .menu-tab-icon-well {
  background: rgba(0,0,0,0.065);
  color: var(--text-secondary);
}

.menu-tab.is-active .menu-tab-icon-well {
  background: rgba(0,0,0,0.08);
  color: var(--text-primary);
}

.menu-tab[data-tab="now"] .menu-tab-icon-well {
  background: var(--accent-now-light);
  color: var(--accent-now);
}

.menu-tab[data-tab="ask"] .menu-tab-icon-well {
  background: var(--accent-ask-light);
  color: var(--accent-ask);
}

.menu-tab[data-tab="now"]:hover .menu-tab-icon-well,
.menu-tab[data-tab="now"].is-active .menu-tab-icon-well {
  background: var(--accent-now-light);
  color: var(--accent-now);
}

.menu-tab[data-tab="ask"]:hover .menu-tab-icon-well,
.menu-tab[data-tab="ask"].is-active .menu-tab-icon-well {
  background: var(--accent-ask-light);
  color: var(--accent-ask);
}

.menu-tab[data-tab="states"] .menu-tab-icon-well {
  background: var(--accent-light);
  color: var(--accent);
}

.menu-tab[data-tab="states"]:hover .menu-tab-icon-well,
.menu-tab[data-tab="states"].is-active .menu-tab-icon-well {
  background: var(--accent-light);
  color: var(--accent);
}

.menu-tab[data-tab="now"] .nav-icon,
.menu-tab[data-tab="ask"] .nav-icon,
.menu-tab[data-tab="states"] .nav-icon {
  opacity: 0.9;
}

.menu-tab-icon-well .nav-icon {
  opacity: 1;
}

/* A single quick settle on hover-in — a nudge, not a loop. Keyframe end
   state matches the resting state exactly, so it plays once and holds
   without needing animation-fill-mode. Rotates the icon glyph itself
   rather than scaling the well around it, so the well's edges/background
   stay put — a calmer "it noticed you" than a size change, and it doesn't
   nudge the badge sitting on the well's corner. Also fires for subnav
   items' own icons (.sf-tab svg), not just the top-level tabs. */
@keyframes menu-tab-icon-nudge {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

.menu-tab:hover .nav-icon,
.sf-tab:hover svg {
  animation: menu-tab-icon-nudge 0.3s var(--ease-spring) 1;
}

@media (prefers-reduced-motion: reduce) {
  .menu-tab:hover .nav-icon,
  .sf-tab:hover svg {
    animation: none;
  }
}

/* ===================== TEAM HOVER SELECT ===================== */

.team-hover-sel {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 6px;
}

.team-hover-sel .ths-trigger {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 7px 9px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  width: 100%;
  transition: background 0.15s, transform 0.15s var(--ease-out);
}

.team-hover-sel .ths-trigger:not(:disabled):active {
  transform: scale(0.97);
}

.team-hover-sel .ths-trigger:disabled {
  cursor: default;
  color: var(--text-tertiary);
}

.team-hover-sel:hover .ths-trigger {
  background: var(--surface-hover);
}

.ths-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  text-align: left;
}

.ths-arrow {
  opacity: 0.45;
  flex-shrink: 0;
  transition: transform 0.2s ease, opacity 0.15s;
}

.team-hover-sel.is-open .ths-arrow {
  opacity: 0.8;
  transform: rotate(180deg);
}

.team-hover-sel .ths-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 100%;
  border-radius: var(--radius-lg);
  padding: 8px;
  z-index: 300;
  opacity: 0;
  transform: scale(0.97) translateY(-4px);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.14s ease 0.6s, transform 0.14s ease 0.6s;
}

/* Collapsed: hidden outright rather than shrunk to just its sync dot —
   without the team name next to it, the dot on its own doesn't carry
   enough meaning to earn a permanent slot in the icon rail. Switching
   teams goes back to being an expand-first action while collapsed. */
html.sidebar-collapsed .team-hover-sel {
  display: none;
}

.ths-dropdown-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
  padding: 4px 8px 6px;
}

.ths-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ths-dropdown-divider {
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}

.ths-create-team-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  padding: 8px 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background 0.1s ease, transform 0.1s var(--ease-out);
}

.ths-create-team-btn:hover {
  background: var(--accent-light);
}

.ths-create-team-btn:active {
  transform: scale(0.98);
}

.ths-create-team-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
}

.team-select-btn-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ths-check-icon {
  flex-shrink: 0;
  color: var(--accent);
}

/* Compact sync-status dot: color signals state at a glance, hover/focus
   reveals the label (native title covers browsers/AT the CSS tooltip
   misses). Used in the team switcher list and the Settings connection
   panel. */
.team-sync-dot {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: default;
}

/* Leading-position variant: replaces the old generic "people" icon at the
   start of a team row/trigger, so the very first thing you see is the
   team's own sync health instead of decoration. Slightly larger with a
   soft halo so it still reads as an icon, not just a stray dot. */
.team-sync-dot--leading {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px var(--surface-2);
}

.ths-trigger .team-sync-dot--leading {
  box-shadow: 0 0 0 3px transparent;
}

.team-sync-dot--active     { background: #1a9e40; }
.team-sync-dot--inactive   { background: var(--text-tertiary); }
.team-sync-dot--attention  { background: #d4000a; }

.team-sync-dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* Tooltip content lives in a single portal element appended to <body> (see
   setupSyncDotTooltips() in app.js) instead of a ::after on the dot itself —
   .team-sync-dot sits inside .sidebar, which scrolls (overflow-y: auto) and
   was silently clipping/cutting an in-flow tooltip for any dot near its
   edge. Fixed positioning + living outside every clipping/stacking ancestor
   means it always renders in full, above absolutely everything else,
   modals included. */
.sync-tooltip {
  position: fixed;
  z-index: 10000;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(28, 28, 30, 0.96);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Flipped below the dot when there isn't room above (e.g. the very first
   row in the sidebar list) — approaches from the opposite side, so the
   translateY direction flips to match. */
.sync-tooltip.is-below {
  transform: translateY(-4px);
}

.sync-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sync-tooltip {
    transition: opacity 0.12s ease;
    transform: none;
  }
  .sync-tooltip.is-below {
    transform: none;
  }
}

.team-sync-status-line {
  display: flex;
  align-items: center;
  gap: 7px;
}

.team-linear-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.team-import-linear-btn {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.team-linear-actions .team-import-linear-btn {
  margin-top: 0;
}

.team-import-linear-btn:hover { color: var(--accent-hover); text-decoration: underline; }
.team-import-linear-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

.team-hover-sel.is-open .ths-dropdown {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  transition: opacity 0.14s ease 0s, transform 0.14s ease 0s;
}

/* ===================== MENU TABS ===================== */

.menu-tab[hidden] {
  display: none;
}

.menu-tab {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: background 0.15s, color 0.15s, transform 0.15s var(--ease-out);
  position: relative;
  z-index: 1;
  min-height: 44px;
  box-sizing: border-box;
}

.menu-tab:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.menu-tab:active {
  transform: scale(0.97);
}

.menu-tab.is-active {
  background: var(--surface-hover);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: none;
}

/* Data-dependent tabs (Now/Ask/States/Notifications) while the active team
   has no connected source — visible so wayfinding still works, but inert. */
.menu-tab.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.topbar-nav.is-vertical .menu-tab {
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-md);
}

/* ===================== SIDEBAR SUB-NAVIGATION ===================== */
/* States' and Notifications' filters used to float in a bar pinned above
   the content; they now expand directly under their own tab instead, so
   navigating never means moving the cursor away from the sidebar. Reuses
   the same grid-row collapse as .notif-body (0fr -> 1fr): the track itself
   animates, so there's no JS height measurement to keep in sync as filter
   items (and their counts) come and go. */
.menu-tab-block {
  display: flex;
  flex-direction: column;
}

.menu-subnav {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s var(--ease-spring), opacity 0.2s ease;
}

.menu-tab-block.is-open .menu-subnav {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* No vertical padding here at rest — with the grid row collapsed to 0fr
   (see .menu-subnav above), a border-box element can't shrink its
   rendered height below its own padding, so a static "padding: 6px 0"
   left States/Notifications 12px taller than the plain Now/Ask buttons
   even while closed. Padding only applies once the block is actually
   open, when that space is real. */
.menu-subnav-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.menu-tab-block.is-open .menu-subnav-inner {
  padding: 6px 0;
}

/* Collapsed sidebar: the inline grid-expand above makes no sense at
   72px, so this same .menu-subnav element (no duplicate markup, so its
   existing filter buttons and their click handlers keep working as-is)
   becomes a floating flyout instead — same visual recipe as the team
   switcher's own dropdown (.ths-dropdown/.glass-surface): white surface,
   hairline border, shadow, a quick scale+fade. Shown on hover/focus (see
   setupSidebarFlyouts() in app.js, which also sets top/left — position:
   fixed is what lets it escape .sidebar's own overflow-y: auto, which
   would otherwise clip anything extending past the 72px rail).
   width: max-content instead of a fixed value — the pill list is short
   text ("All", "Muted"), so a flat 220px left most of the card empty;
   this shrinks to whatever the widest pill actually needs, capped so a
   long label can't run the card off the right edge of the viewport.
   The open/close grace period lives entirely in JS now (see
   setupSidebarFlyouts()'s closeTimer) — pointer-events isn't itself
   transitionable, so a CSS transition-delay on opacity alone left the
   flyout visually fading for a moment after it had already gone
   unclickable, which is what made clicks land on whatever was
   underneath instead. Both states change together, right when the
   .is-flyout-open class does. */
html.sidebar-collapsed .menu-tab-block .menu-subnav {
  position: fixed;
  display: block;
  width: max-content;
  max-width: 200px;
  max-height: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: var(--shadow-md);
  z-index: 500;
  opacity: 0;
  transform: scale(0.97) translateY(-4px);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

html.sidebar-collapsed .menu-tab-block.is-flyout-open .menu-subnav {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

html.sidebar-collapsed .menu-tab-block .menu-subnav-inner {
  padding: 0;
  overflow: visible;
}

/* Same left padding as the buttons above it (see .menu-tab), not a
   margin/border tree-indent — space instead of a line keeps it aligned to
   the sidebar's actual left edge instead of looking like a stray gutter.
   Small and quiet — a label, not a second heading level. */
.menu-subnav-heading {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 14px 10px 6px;
}

.menu-subnav-inner > .menu-subnav-heading:first-child {
  padding-top: 2px;
}

.menu-subnav-group {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 6px;
}

.menu-subnav-group.is-visible {
  display: flex;
}

/* Extra .menu-tab-block ancestor qualifier just to out-specificity the
   base .sf-tab/.sf-tab.is-active rules (defined later in the file) without
   relying on source order. */
.menu-tab-block .menu-subnav-group .sf-tab {
  width: 100%;
  justify-content: flex-start;
  padding: 7px 10px;
  font-size: 12.5px;
  text-transform: none;
  border-radius: calc(var(--radius-md) - 3px);
}

.menu-tab-block .menu-subnav-group .sf-tab.is-active {
  background: var(--surface-hover);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .menu-subnav { transition: opacity 0.2s ease; }
}

/* ===================== CONTENT ===================== */

.content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-content: start;
  position: relative;
  isolation: isolate;
}

/* ===================== COLUMN HELPERS ===================== */

.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ===================== VIEW PANELS ===================== */

.view-panel {
  display: none;
}

.view-panel.is-active {
  display: contents;
}

/* ===================== CARDS ===================== */

.card {
  background: var(--surface);
  width: 100%;
  height: calc(var(--size) * var(--ratio));
  padding: 24px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--card-border-soft);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

/* ===================== STATE CARDS ===================== */

.states-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  --state-card-fixed-height: 396px;
  grid-auto-rows: var(--state-card-fixed-height);
}

.sc-size-medium { grid-column: span 2; }
.sc-size-large  { grid-column: span 3; }

.states-list .state-card {
  height: 100%;
}

/* ===================== STATES / NOTIFICATIONS FILTER TABS ===================== */

.topbar-sf-tabs {
  display: none;
  align-items: center;
  gap: 3px;
  position: static;
  white-space: nowrap;
  background: rgba(0,0,0,0.055);
  border-radius: calc(var(--radius-md) - 3px);
  padding: 3px;
  border: none;
  box-shadow: none;
}

.topbar-sf-tabs.is-visible {
  display: flex;
}

/* Unscoped (not nested under .topbar-sf-tabs) so the same button look is
   shared by Ask's horizontal pill row and the sidebar's vertical subnav
   list below — only the container decides the layout, not the button. */
.sf-tab {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  margin: 0;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  background: none;
  appearance: none;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
  text-transform: capitalize;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sf-tab:hover:not(.is-active) { background: rgba(0,0,0,0.05); color: var(--text-primary); }

.sf-tab:focus-visible {
  outline: 2px solid rgba(0,80,200,0.28);
  outline-offset: 1px;
}

/* Default active look for any pill without its own semantic color (category
   tabs, notification All/Unread) — specific data-status colors below win. */
.sf-tab.is-active { background: var(--surface); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.05); }

.topbar-sf-tabs .sf-tab[data-status="info"].is-active     { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.05); }
.topbar-sf-tabs .sf-tab[data-status="warning"].is-active  { background: var(--surface); color: #c97000; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.05); }
.topbar-sf-tabs .sf-tab[data-status="critical"].is-active { background: var(--surface); color: #d4000a; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.05); }

/* States filter pills now live in one flat sidebar subnav list (see the
   MENU SUBNAV section) rather than under .topbar-sf-tabs. They deliberately
   don't carry per-item color the way the notification severity pills above
   do — five differently-colored pills in a row read as noisy rather than
   informative; the selected one is marked by weight + the shared neutral
   active background alone (see .menu-tab-block .menu-subnav-group
   .sf-tab.is-active below). */

/* ===================== SF HOVER SELECT ===================== */

.sf-hover-sel {
  position: relative;
  display: flex;
  align-items: center;
}

/* Invisible bridge that fills the gap between trigger and dropdown, keeping :hover intact */
.sf-hover-sel::after,
.team-hover-sel::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

.sf-hover-sel .sf-hs-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 120px;
  border-radius: var(--radius-md);
  padding: 4px;
  z-index: 300;
  opacity: 0;
  transform: scale(0.93) translateY(-6px);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.14s ease 0.6s, transform 0.14s ease 0.6s;
}

.sf-hover-sel:hover .sf-hs-dropdown {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  transition: opacity 0.14s ease 0s, transform 0.14s ease 0s;
}

/* States filter trigger: no pill — match notification filter plain style */
.topbar-sf-tabs .sf-hover-sel .sf-tab.is-active {
  background: none;
  box-shadow: none;
}

/* ===================== SURFACE (flat, formerly "glass") ===================== */
/* Shared background for all floating panels — edit once to update everywhere */

.glass-surface {
  background: var(--surface);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

/* ===================== PILL ===================== */

.glass-pill,
.legend-item {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  border-radius: 980px;
}

/* ===================== STATE STATUS SWITCHER ===================== */

.sc-status-switcher {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sc-status-switcher.is-loading {
  opacity: 0.4;
  pointer-events: none;
}

.sc-status-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.1s;
}

.sc-status-badge:active { transform: scale(0.92); }

.sc-status-badge:hover {
  background: rgba(0,0,0,0.06);
}

.sc-status-trigger-icon {
  display: inline-flex;
  color: var(--text-secondary);
  opacity: 0.85;
}

/* Hidden template in DOM — content is cloned into the portal popup */
.sc-status-dropdown {
  display: none;
}

/* ===================== STATUS PORTAL POPUP ===================== */
.sc-status-popup {
  position: absolute;
  min-width: 132px;
  border-radius: var(--radius-md);
  padding: 4px;
  z-index: 9200;
  opacity: 0;
  transform: scale(0.93) translateY(-6px);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  /* glass-surface provides the backdrop-filter and shadow */
}

.sc-status-popup.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.sso-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  text-transform: capitalize;
  color: var(--text-primary);
  width: 100%;
  text-align: left;
  letter-spacing: -0.01em;
  transition: background 0.1s;
}

.sso-btn:hover { background: rgba(0,0,0,0.055); color: var(--text-primary); }

/* Selected reads as pressed in — an accent-tinted well instead of just a
   color/weight change, so "this one's active" carries the same physical
   language as the other toggle-shaped controls. */
.sso-btn.is-active {
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  box-shadow:
    inset 0 1px 2px rgba(0,80,200,0.18),
    inset 0 -1px 1px rgba(255,255,255,0.5);
}

.sso-btn.is-active:active {
  box-shadow:
    inset 0 1.5px 3px rgba(0,80,200,0.24),
    inset 0 -1px 1px rgba(255,255,255,0.35);
}

.sc-status-option {
  gap: 7px;
  text-transform: none;
}

.sc-status-option .sso-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.sc-status-option .sso-text {
  display: inline-block;
}

/* ===================== STATE CARD ===================== */

.states-graph-wrap {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
  padding: 10px 10px 6px;
}

.states-graph {
  width: 100%;
  min-width: 760px;
  height: auto;
  display: block;
}

.graph-grid-line {
  stroke: rgba(0, 80, 200, 0.10);
  stroke-width: 1;
}

.graph-axis-line {
  stroke: rgba(0, 20, 60, 0.22);
  stroke-width: 1.25;
}

.graph-line {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.graph-line-glow {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.states-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 4px 10px 4px 8px;
  border-radius: 980px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.legend-item.is-active { color: var(--text-primary); background: var(--surface-hover); border-color: var(--border-strong); }
.legend-item:hover:not(.is-active) { background: var(--surface-hover); }

.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.state-card {
  background: var(--surface);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
  /* border-radius intentionally matches --radius-squircle, not --radius-xl —
     see the variable's comment: applySquircle() in index.html clips to this
     exact radius, so anything smaller would leave the clip-path cutting
     inside the box instead of following its rounded corners. */
  border-radius: var(--radius-squircle);
  position: relative;
  z-index: 0;
  /* No border — the card is white against the grey canvas (--bg), so the
     color contrast alone reads as a distinct surface. A resting shadow
     gives it a hair of lift even before any interaction; hovering deepens
     that shadow and nudges the card up slightly, rather than the old
     behavior of dimming it toward grey (which fought the "stays white"
     goal and read as the card turning off, not lifting up). */
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s var(--ease-out);
}

.state-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .state-card:hover {
    transform: none;
  }
}

.state-card.is-status-menu-open {
  z-index: 12;
}

.state-card.is-highlighted {
  box-shadow: 0 0 0 3px var(--accent-light), var(--shadow-md);
  transition: box-shadow 0.3s ease, transform 0.2s var(--ease-out);
}

.state-card > * {
  position: relative;
  z-index: 1;
}

.state-card                { --card-accent-color: #0050c8; }

.state-card.sc-ai-status {
  --card-accent-color: #7c3aed;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.16), var(--shadow-sm);
}

.state-card.sc-ai-status:hover {
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.2), var(--shadow-md);
}

.sc-ai-status .sc-header {
  align-items: center;
}

.sc-ai-status .sc-header-left {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.sc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--card-accent-color, #7c3aed);
}

.sc-hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: sc-hero-pulse 2.2s ease-in-out infinite;
}

@keyframes sc-hero-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-hero-eyebrow-dot { animation: none; }
}

.sc-hero-verdict {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 980px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  background: var(--green-light);
  color: #1a9e40;
}

.sc-hero-verdict-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.sc-hero-verdict--warn {
  background: var(--orange-light);
  color: #a85f00;
}

.sc-hero-verdict--bad {
  background: var(--red-light);
  color: #d4000a;
}

.sc-ai-insights {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sc-ai-insights li {
  position: relative;
  padding-left: 15px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.sc-ai-insights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--card-accent-color, #7c3aed);
}

.sc-description--full,
.state-card.sc-ai-status .sc-description {
  display: block;
  line-clamp: unset;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
  max-width: none;
}

.sc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

.sc-size-small .sc-header {
  align-items: center;
  gap: 10px;
}

.sc-size-small .sc-header-left {
  flex: 1 1 0;
  min-width: 0;
}

.sc-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sc-size-small .sc-header-actions {
  gap: 6px;
}

.sc-deep-dive-btn {
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.78);
  color: var(--text-secondary);
  border-radius: 980px;
  padding: 4px 9px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.sc-deep-dive-btn:hover {
  background: #fff;
  color: var(--text-primary);
  border-color: rgba(0,0,0,0.16);
  box-shadow: 0 1px 4px rgba(10,20,32,0.1);
}

.sc-deep-dive-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.sc-deep-dive-btn:hover .sc-deep-dive-btn-icon {
  opacity: 1;
  transform: scale(1.1);
}

.sc-deep-dive-btn-label {
  display: none;
}

.sc-deep-dive-btn {
  padding: 4px 7px;
  gap: 0;
}

.sc-deep-dive-btn.is-no-signal {
  padding: 4px 9px;
  gap: 5px;
}

.sc-deep-dive-btn.is-no-signal .sc-deep-dive-btn-label {
  display: inline;
}

.sc-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sc-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.sc-size-small .sc-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.sc-metric-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sc-metric-inline {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 6px 0 2px;
  display: block;
}

.sc-trend-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--card-accent-color, var(--text-tertiary));
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1.3;
}

.sc-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 980px;
  background: var(--surface-2);
  border: none;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: none;
}

.sc-badge.is-ok       { background: rgba(52,199,89,0.12); color: #1d8a41; border-color: rgba(52,199,89,0.26); }
.sc-badge.is-warning  { background: rgba(255,159,10,0.13); color: #b46900; border-color: rgba(255,159,10,0.28); }
.sc-badge.is-critical { background: rgba(255,59,48,0.12); color: #b3261e; border-color: rgba(255,59,48,0.24); }

.sc-minmax {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-self: center;
}

.sc-minmax-item {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1.4;
}

.sc-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.65;
  letter-spacing: -0.01em;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 58ch;
}

.sc-size-medium .sc-description,
.sc-size-large  .sc-description {
  max-width: 55ch;
}

.sc-meta-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.state-card.sc-type-simple .sc-meta-grid {
  margin-top: auto;
}

.sc-meta-item {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
}

.sc-meta-item-full {
  max-width: 100%;
}

.sc-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 12px;
  /* border: 1px solid rgba(0,0,0,0.1); */
  background: rgba(0, 0, 0, 0.02);
  color: var(--text-secondary);
  box-shadow: none;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sc-meta-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.74;
}

.sc-meta-chip-text {
  min-width: 0;
  max-width: 34ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-meta-chip-name .sc-meta-chip-text {
  max-width: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sc-meta-chip-link {
  text-decoration: none;
  color: var(--text-secondary);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.sc-meta-chip-link:hover {
  color: var(--text-primary);
  border-color: rgba(0,0,0,0.16);
  /* background: rgba(255,255,255,0.92); */
  background: rgba(0, 0, 0, 0.05);
  box-shadow: none;
}

.sc-meta-link-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.65;
  flex-shrink: 0;
}

.sc-chart {
  flex: 1;
  min-height: 120px;
  margin-top: auto;
  padding-bottom: 4px;
}

.sc-chart-wrap {
  width: 100%;
  height: 100%;
}

.sc-chart-wrap canvas {
  border-radius: 12px;
  filter: drop-shadow(0 10px 18px rgba(0, 80, 200, 0.08));
}

.hbar-wrap {
  overflow-x: hidden;
  overflow-y: hidden;
}

.hbar-full {
  overflow-x: hidden;
  width: 100%;
}

/* ===================== SKELETONS ===================== */

@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

@keyframes contentEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes contentEnterRight {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes contentEnterLeft {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.content-enter {
  animation: contentEnter 0.18s ease forwards;
}

.content-enter-right {
  animation: contentEnterRight 0.18s ease forwards;
}

.content-enter-left {
  animation: contentEnterLeft 0.18s ease forwards;
}

.skel {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #ececee 25%, #e3e3e5 50%, #ececee 75%);
  background-size: 1200px 100%;
  animation: shimmer 1.6s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
  .skel,
  .deep-dive-skel-line,
  .deep-dive-skel-chart {
    animation: none;
    background-position: 0 0;
  }
}

.skeleton-card {
  background: var(--surface);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
  border-radius: var(--radius-xl);
}

.skel-title  { height: 12px; width: 50%; }
.skel-number { height: 28px; width: 32%; margin-top: 4px; }
.skel-bar    { flex: 1; min-height: 70px; }

.skel-row { height: 40px; }

.skeleton-notif {
  background: var(--surface);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 72px;
  border-radius: var(--radius-xl);
}

.skel-notif-header { height: 11px; width: 36%; }
.skel-notif-title  { height: 13px; width: 65%; }

/* ===================== JSON DETAILS ===================== */

.sc-json-wrap {
  margin-top: 2px;
}

.sc-json-wrap summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--text-tertiary);
  list-style: none;
  text-align: center;
  transition: color 0.12s;
}

.sc-json-wrap summary:hover {
  color: var(--text-secondary);
}

.sc-json-wrap summary::after {
  content: '···';
}

.sc-json-wrap pre {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  overflow-x: auto;
  margin: 6px 0 0;
  max-height: 200px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  line-height: 1.5;
}

/* ===================== SIMPLE ALERTS ===================== */

.simple-widget-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sw-item {
  padding: 20px 22px;
  background: var(--surface);
  border: none;
  border-top: 2px solid var(--border);
  border-left: 1px solid rgba(255,255,255,0.84);
  border-right: 1px solid rgba(255,255,255,0.84);
  box-shadow: 0 6px 18px rgba(10,20,32,0.05);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sw-item.is-critical { border-top-color: var(--red); }
.sw-item.is-normal   { border-top-color: var(--accent); }



.sw-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sw-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.015em;
}

.sw-status {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 980px;
  background: rgba(255,255,255,0.72);
  color: var(--text-secondary);
  border: 1px solid rgba(0,0,0,0.1);
  white-space: nowrap;
  flex-shrink: 0;
}

.sw-item.is-critical .sw-status { background: var(--red-light); color: #d4000a; }

.sw-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.sw-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  padding-right: 16px;
}

.sw-stat + .sw-stat {
  padding-left: 16px;
  padding-right: 0;
  border-left: 1px solid var(--border);
}

.sw-stat-key {
  font-size: 10.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.sw-stat-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* ===================== NOTIFICATIONS ===================== */
/* Each date group (Today/Yesterday/…) is its own white surface — plain
   border-radius, not the CornerKit .squircle clip-path #nowContent/
   #askContent/.settings-group use. A clip-path would need recomputing
   continuously while a row's grid-template-rows 0fr->1fr expand/collapse
   animates its group's total height, which it can't do (that's exactly
   what broke when this row itself briefly tried a per-row squircle — see
   the account below); a plain radius reflows for free with no JS
   involved. One shared "biggest sheet" would have hidden where each
   group starts/ends; separating them into cards with real gaps between
   makes that boundary visible at a glance instead. */

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  grid-column: 1 / -1;
  max-width: 760px;
  width: 100%;
}

/* The 760px cap above is right for a column of notification groups, but
   it left .empty-screen centering itself inside that narrow, left-sitting
   box instead of the actual tab width — the card looked pinned to the
   left of the screen instead of centered on it. Empty state gets the
   full width to center within. */
.notifications-list.is-empty-screen {
  max-width: none;
}

.notif-group {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 16px 20px;
}

.notif-group-title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Earlier this used a bordered squircle per row, which had a real bug:
   expanding a row grew it past the box the clip-path was computed for,
   so the body text got sliced off at the old, shorter height. A plain
   row with no clip-path and no divider line — just hover + padding —
   sidesteps that entirely, not just papers over it. */
.notif-card {
  background: transparent;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: none;
  border-radius: var(--radius-md);
  position: relative;
  cursor: pointer;
  transition: background 0.16s ease;
}

.notif-card:hover {
  background: var(--surface-hover);
}

.notif-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notif-priority-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--notif-priority-color, var(--text-tertiary));
}

.notif-critical { --notif-priority-color: var(--red); }
.notif-warning  { --notif-priority-color: var(--orange); }
.notif-success  { --notif-priority-color: var(--green); }
.notif-info     { --notif-priority-color: var(--text-tertiary); }

.notif-card.is-read .notif-priority-icon {
  opacity: 0.55;
}

.notif-header-main {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.notif-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.notif-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.notif-date {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.notif-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.015em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-card.is-expanded .notif-title {
  white-space: normal;
}

.notif-card.is-read .notif-title {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Grid-row collapse instead of a JS-measured max-height: the track itself
   animates 0fr -> 1fr, so there's no scrollHeight to get stale, no race
   with the opacity/padding transitions below, and it stays correct no
   matter how the content reflows (long text, window resize, etc). */
.notif-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  padding: 0 0 0 24px;
  transition: grid-template-rows 0.32s ease, opacity 0.24s ease;
}

.notif-body-inner {
  min-height: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  letter-spacing: -0.01em;
  white-space: pre-wrap;
}

/* The leading sentences of a notification body (see splitNotifLede) get
   real paragraph spacing so they read as prose, distinct from the flat
   Blocked/Warnings lines below — which stay plain text, not a styled
   list, on purpose. */
.notif-lede {
  margin: 0 0 10px;
}

.notif-lede:last-child {
  margin-bottom: 0;
}

.notif-card.is-expanded .notif-body {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-top: 12px;
}

/* ===================== CHART GLASS TOOLTIP ===================== */

.chart-glass-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font);
  transform: translate(-50%, calc(-100% - 10px)) scale(1);
  transform-origin: 50% 100%;
  transition: left 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              top 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.25s ease,
              transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.62);
}

.chart-glass-tooltip.is-hidden {
  opacity: 0;
  transform: translate(-50%, calc(-100% - 10px)) scale(0.08);
}

.cgt-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.cgt-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.notif-panel-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0,0,0,0.06);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.notif-panel-close:hover {
  background: rgba(0,0,0,0.10);
  color: var(--text-primary);
}

/* ===================== MISC ===================== */

.empty-message {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.88);
}

/* ===================== EMPTY SCREEN (universal placeholder) =====================
   One shared "nothing here / still loading" shell for a screen's main
   content area — States, Now, Ask, Notifications all render this same
   markup for a genuinely-empty (not just filtered) state, so it's the
   same size, same card, same centering everywhere, not one thing per
   screen. Distinct from .connect-hero, which is a richer onboarding CTA
   with actual connect buttons (no source connected at all).

   .empty-screen is the FRAME: it fills its container and centers
   .empty-screen-card itself via flex, independent of whatever alignment
   the parent happens to use (grid, stretch-by-default flex column, plain
   block) — centering must not depend on guessing that. Behind the card,
   .empty-screen-skeleton reuses this app's existing shimmer-skeleton
   pieces (.skel/.skeleton-card/.skeleton-notif — the same
   ones showSkeletonStates()/showSkeletonNotifications()
   show during a real fetch) blurred and dimmed, so the screen reads as
   "real content is coming, here's its shape" instead of a stark blank
   page. .empty-screen-card is the actual visible card on top, left-aligned
   text inside (icon/title/desc rows, like iOS's "What's New" sheets). An
   optional small spinner (.empty-screen-spinner, emptyScreenMarkup({
   loading: true, ... })) sits above the title for a "still syncing"
   variant of the exact same card, instead of a separate differently-styled
   loading hero. */
/* vh-based rather than a percentage of the parent: every screen this
   renders in (grid, stretch-by-default flex column, plain block — see
   note above) resolves height differently, some not at all without a
   fuller audit of the ancestor chain. calc(100vh - 200px) is a stand-in
   for "the sidebar/topbar/page-padding chrome above and below this",
   estimated from .main-area's own 28px+48px padding plus a topbar/filter
   row — it doesn't need to be exact, .main-area's overflow-y:auto absorbs
   any small overshoot, and .empty-screen-skeleton's overflow:hidden below
   clips any generated skeleton content that runs past it either way. */
.empty-screen {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: calc(100vh - 200px);
  padding: 40px 24px;
  box-sizing: border-box;
  overflow: hidden;
}

.empty-screen-skeleton {
  position: absolute;
  inset: 0;
  padding: 40px 24px;
  box-sizing: border-box;
  overflow: hidden;
  filter: blur(5px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* States: real .states-list card height (--state-card-fixed-height,
   396px) rather than a stretched 1fr — generated with enough rows to run
   past the frame's height, safely clipped by the overflow:hidden above,
   so cards read as their real fixed size instead of artificially tall. */
.empty-screen-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 396px;
  gap: 28px;
}

/* Notifications: matches .notifications-list's own max-width/gap so the
   skeleton rows line up with where real rows will sit. */
.empty-screen-skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}

/* Now: mirrors .now-band-top/.now-band-bottom's own anatomy (date, big
   serif headline, trend line, 3-up "acts", two numbered sections) with
   plain .skel pieces rather than the real .now-* classes — those carry a
   negative-margin bleed trick tied to sitting at the very top of
   #nowContent, which this overlay isn't. */
.empty-screen-skeleton-now {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
  padding-top: 10px;
}

.empty-screen-skeleton-acts {
  display: flex;
  gap: 28px;
  margin-top: 32px;
}

.empty-screen-skeleton-act {
  flex: 1;
  min-width: 0;
}

.empty-screen-skeleton-section {
  margin-top: 44px;
}

.empty-screen-skeleton-rows {
  margin-top: 20px;
}

.empty-screen-skeleton-row {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

/* Ask: chat thread only — the sidebar's own empty state is handled
   separately in #askConvList (see askConvListSkeletonMarkup), since it's
   a physically different region of the page, not behind this card. */
.empty-screen-skeleton-thread {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 480px;
  margin: 0 auto;
  padding-top: 20px;
}

.skel-line { height: 12px; }

.skel-bubble { height: 34px; border-radius: 16px; }
.skel-bubble--right { width: 55%; align-self: flex-end; }
.skel-bubble--left  { width: 68%; align-self: flex-start; }

/* Card sits over a blurred, busy skeleton now rather than a plain empty
   background, so it earns back a light separation shadow (apple-design's
   materials note: shadow weight should track how busy what's underneath
   is) — kept subtle, not the heavier --shadow-md a floating panel would
   get. Translucent white + backdrop-filter (same recipe as .view-topbar's
   liquid-glass layer) instead of a flat fill + border: with the skeleton
   sitting right behind it, a frosted surface reads as floating material
   over that content rather than a flat gray box needing a hard edge to
   separate it. Reduced-transparency users get a solid fallback with the
   border back, same pattern as .view-topbar. */
.empty-screen-card {
  position: relative;
  z-index: 1;
  max-width: 520px;
  text-align: left;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 40px 36px;
  animation: connect-hero-in 0.5s var(--ease-spring) both;
}

@media (prefers-reduced-transparency: reduce) {
  .empty-screen-card {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
  }
}

.empty-screen-spinner {
  width: 22px;
  height: 22px;
  margin-bottom: 16px;
  border-radius: 50%;
  border: 2.5px solid var(--accent-light);
  border-top-color: var(--accent);
  animation: importing-spin 0.8s linear infinite;
}

/* Same display face as .now-headline (--font-display, loaded globally —
   see index.html) at a size proportionate to this card instead of a full
   report page. */
.empty-screen-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
}

.empty-screen-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-tertiary);
  margin: 10px 0 0;
}

.empty-screen-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  margin-top: 30px;
}

.empty-screen-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  opacity: 0;
  animation: empty-screen-item-in 0.4s var(--ease-spring) both;
  animation-delay: var(--empty-screen-item-delay, 0ms);
}

.empty-screen-item-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-top: 2px;
}

/* Matches .nav-icon's line weight (stroke-width 1.5 at 15px, see the
   sidebar) — these icons render bigger (20px) so they need a lighter
   stroke-width, not the same one, to read as the same weight rather than
   heavier. CSS overrides the stroke-width="2" baked into each icon
   constant (EMPTY_SCREEN_ICON_*), same viewBox for both. */
.empty-screen-item-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.empty-screen-item-text {
  flex: 1 1 auto;
  min-width: 0;
}

.empty-screen-item-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 3px;
}

.empty-screen-item-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

@keyframes empty-screen-item-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .empty-screen-card,
  .empty-screen-item {
    animation: none;
    opacity: 1;
  }

  .empty-screen-spinner {
    animation: none;
  }
}

.error-message {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,59,48,0.16);
  box-shadow: 0 1px 1px rgba(0,0,0,0.02), 0 10px 26px rgba(10, 20, 32, 0.06);
}

.error-message::before {
  content: '';
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--red-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff3b30' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Cline x1='12' y1='16.5' x2='12' y2='16.5'/%3E%3C/svg%3E") center/16px no-repeat;
}

.error-message-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.error-retry-btn {
  margin-top: 16px;
  padding: 7px 18px;
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 980px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: background 0.15s, transform 0.15s var(--ease-out), box-shadow 0.15s;
}

.error-retry-btn:hover {
  background: var(--bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.error-retry-btn:active {
  transform: scale(0.96);
}

.active-team-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}

/* ===================== CONNECT / EMPTY STATE ===================== */

.connect-hero {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 660px;
  margin: 48px auto;
  padding: 44px 40px 40px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  animation: connect-hero-in 0.5s var(--ease-spring) both;
}

.connect-hero-art {
  margin-bottom: 20px;
  line-height: 0;
}

.connect-hero-title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.connect-hero-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 26px;
  max-width: 360px;
}

.connect-hero-hint {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
}

.connect-provider-actions {
  width: 100%;
  max-width: 580px;
}

/* Every provider in the connect grid — Jira, Linear, and every fake-door
   one — renders through this one class with identical markup (see
   connectProviderButtonMarkup in app.js): no icon, no arrow, just a
   small color dot (.connect-provider-dot) and the plain product name.
   Nothing here signals which providers actually work; that's deliberate —
   see the fake-door click event in ACTIVITY_LOGGING.md. Slack's own
   connect button (elsewhere in Settings) reuses this class too but keeps
   its real logo via .connect-provider-icon instead of a dot. */
.connect-provider-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}

.connect-provider-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  background: var(--bg);
}

.connect-provider-btn:active {
  transform: scale(0.97) translateY(0);
  transition: transform 0.1s ease-out;
}

.connect-provider-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.connect-provider-icon {
  flex-shrink: 0;
}

/* A provider's only visual identity — a small dot in a color adapted from
   that product's own brand (drawn from this app's own palette: see the
   --purple/--teal addition to :root and FAKE_INTEGRATION_PROVIDERS in
   app.js), never a logo or icon. --provider-color is set inline per
   button. */
.connect-provider-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--provider-color, var(--text-tertiary));
}

.connect-provider-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.team-connection-status .connect-provider-actions {
  max-width: none;
  margin-top: 10px;
}

.team-connection-status .connect-provider-btn {
  padding: 10px 14px;
  font-size: 13px;
}

.connect-existing-actions {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 4px;
  margin-top: 14px;
}

.connect-existing-label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0;
}

.connect-existing-btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.connect-existing-btn:hover { color: var(--accent-hover); text-decoration: underline; }
.connect-existing-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

@keyframes connect-hero-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes connect-hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .connect-hero {
    animation: connect-hero-fade 0.2s ease both;
  }

  .connect-provider-btn:hover {
    transform: none;
  }
}

@media (max-width: 560px) {
  .connect-provider-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@keyframes importing-spin {
  to { transform: rotate(360deg); }
}

/* ===================== TOAST ===================== */

.toast-container {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2100;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  cursor: pointer;
  max-width: min(420px, calc(100vw - 48px));
  padding: 12px 20px;
  border-radius: 980px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  background: rgba(28, 28, 30, 0.96);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.24s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast--error {
  background: rgba(64, 16, 16, 0.94);
}

.toast--success {
  background: rgba(14, 44, 24, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.15s ease; transform: none; }
}

/* ===================== VIEW BUTTON ===================== */

.view-btn {
  padding: 5px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 980px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: -0.01em;
}

.view-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.view-btn:active {
  transform: translateY(0);
}

/* ===================== MODAL ===================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 20, 22, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay[hidden] {
  display: none;
}

body.modal-open {
  overflow: hidden;
}

.modal-box {
  background: var(--surface);
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-xl) !important;
  clip-path: none !important;
}

/* Same side-sheet choreography as .deep-dive-modal below: pinned to the
   right edge, glass backdrop that blurs in on open, panel slides in from
   off-screen. Kept as its own class (rather than reusing .deep-dive-modal)
   since the two open independently and never need to share JS state. */
.team-settings-modal {
  z-index: 1150;
  align-items: center;
  justify-content: flex-end;
  padding: 12px;
  opacity: 0;
  background: radial-gradient(circle at 12% 8%, rgba(0, 96, 215, 0.06) 0%, rgba(0, 96, 215, 0) 42%),
              radial-gradient(circle at 88% 88%, rgba(255, 190, 120, 0.10) 0%, rgba(255, 190, 120, 0) 46%),
              rgba(245, 245, 247, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity 0.34s ease, background 0.38s ease, backdrop-filter 0.34s ease;
}

.team-settings-modal.is-open {
  opacity: 1;
  background: radial-gradient(circle at 12% 8%, rgba(0, 96, 215, 0.07) 0%, rgba(0, 96, 215, 0) 42%),
              radial-gradient(circle at 88% 88%, rgba(255, 190, 120, 0.09) 0%, rgba(255, 190, 120, 0) 46%),
              rgba(245, 245, 247, 0.22);
  backdrop-filter: blur(4px) saturate(1.5);
  -webkit-backdrop-filter: blur(4px) saturate(1.5);
}

@media (prefers-reduced-transparency: reduce) {
  .team-settings-modal.is-open {
    background: rgba(245, 245, 247, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.team-settings-modal.is-closing {
  opacity: 0;
  background: rgba(245, 245, 247, 0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Sized to its own content, not stretched to the full viewport height like
   deep-dive's panel — deep-dive's content genuinely fills that space,
   team settings' doesn't, and forcing it taller than its content left a
   large dead white area below Danger Zone. */
.team-settings-modal-box {
  width: min(1040px, 92vw);
  max-width: min(1040px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 36px;
  gap: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: calc(var(--radius-xl) + 6px) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.30), 0 2px 10px rgba(15, 23, 42, 0.14);
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  will-change: transform;
  transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.team-settings-modal-box::before,
.team-settings-modal-box::after {
  display: none;
}

.team-settings-modal.is-open .team-settings-modal-box {
  transform: translateX(0);
  opacity: 1;
}

/* Exits the same way it entered — off to the right — so the motion path
   stays spatially consistent in both directions (see .deep-dive-modal). */
.team-settings-modal.is-closing .team-settings-modal-box {
  transform: translateX(calc(100% + 32px));
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .team-settings-modal-box {
    transition: opacity 0.2s ease;
  }

  .team-settings-modal.is-open .team-settings-modal-box,
  .team-settings-modal.is-closing .team-settings-modal-box {
    transform: none !important;
  }
}

.create-team-modal-box {
  max-width: 400px;
  padding: 26px;
}

.create-team-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.create-team-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 8px 0 0;
  line-height: 1.5;
}

.create-team-modal-box .auth-form {
  margin-top: 16px;
}

.integration-error-modal-box {
  max-width: 380px;
  padding: 32px 28px;
  align-items: center;
  text-align: center;
}

.integration-error-icon {
  color: var(--red);
  margin-bottom: 4px;
}

.integration-error-title {
  padding-right: 0;
}

.integration-error-body {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.linear-teams-modal-box {
  max-width: 460px;
  padding: 34px;
}

.linear-teams-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  max-height: 360px;
  overflow-y: auto;
  /* Room for the row focus ring / hover lift without the scroll clipping it. */
  padding: 2px;
  margin-left: -2px;
  margin-right: -2px;
}

.linear-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.linear-team-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.linear-team-row-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linear-team-row-key {
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.linear-team-row-status {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}

.linear-team-import-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 980px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease-out), transform 0.1s ease-out;
}

.linear-team-import-btn:hover:not(:disabled) { background: var(--accent-hover); }
.linear-team-import-btn:active:not(:disabled) { transform: scale(0.96); }
.linear-team-import-btn:disabled { opacity: 0.6; cursor: default; }
.linear-team-import-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.deep-dive-modal {
  z-index: 1150;
  align-items: center;
  /* Side sheet, not a centered page: the box is pinned to the right edge
     and stays narrower than the viewport on wide screens, leaving the
     dimmed app visible (and clickable-to-close) to its left. */
  justify-content: flex-end;
  padding: 12px;
  opacity: 0;
  background: radial-gradient(circle at 12% 8%, rgba(0, 96, 215, 0.06) 0%, rgba(0, 96, 215, 0) 42%),
              radial-gradient(circle at 88% 88%, rgba(255, 190, 120, 0.10) 0%, rgba(255, 190, 120, 0) 46%),
              rgba(245, 245, 247, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity 0.34s ease, background 0.38s ease, backdrop-filter 0.34s ease;
}

.deep-dive-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.14) 48%, rgba(255,255,255,0) 72%);
  opacity: 0;
  transition: opacity 0.34s ease;
}

.deep-dive-modal-box {
  --deep-dive-content-max-width: 1800px;
  /* Panel width, not full-bleed: caps well short of the viewport on wide
     screens so the dimmed app stays visible beside it, like a side sheet.
     Below ~1400px viewport this resolves close to the old full-width box,
     so the layout for small/medium screens is largely unaffected. */
  width: min(1320px, 92vw);
  max-width: min(1320px, calc(100vw - 24px));
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* Same flat white surface + hairline border as the app's other floating
     panels (.glass-surface, the collapsed-sidebar flyout) instead of a
     tinted gradient — keeps the panel reading as "one of our modals",
     not a bespoke one-off. */
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: calc(var(--radius-xl) + 6px) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.30), 0 2px 10px rgba(15, 23, 42, 0.14);
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  will-change: transform, height;
  transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.deep-dive-modal-box::before,
.deep-dive-modal-box::after {
  display: none;
}

/* The deep dive has its own labeled close control in the sticky toolbar
   (.deep-dive-close-btn) — the generic modal corner "x" would just be a
   second, unlabeled control doing the same thing underneath it. */
.deep-dive-modal .modal-close {
  display: none;
}

/* Glass, not a curtain: the app behind the panel stays visible (just
   softened and dimmed via blur), rather than getting fully painted over. */
.deep-dive-modal.is-entering,
.deep-dive-modal.is-loading,
.deep-dive-modal.is-open {
  opacity: 1;
  background: radial-gradient(circle at 12% 8%, rgba(0, 96, 215, 0.07) 0%, rgba(0, 96, 215, 0) 42%),
              radial-gradient(circle at 88% 88%, rgba(255, 190, 120, 0.09) 0%, rgba(255, 190, 120, 0) 46%),
              rgba(245, 245, 247, 0.22);
  backdrop-filter: blur(4px) saturate(1.5);
  -webkit-backdrop-filter: blur(4px) saturate(1.5);
}

/* Blurred translucency reads as noisy/low-contrast for anyone who's asked
   the OS to reduce transparency — fall back to the old solid wash. */
@media (prefers-reduced-transparency: reduce) {
  .deep-dive-modal.is-entering,
  .deep-dive-modal.is-loading,
  .deep-dive-modal.is-open {
    background: rgba(245, 245, 247, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.deep-dive-modal.is-entering::before,
.deep-dive-modal.is-loading::before,
.deep-dive-modal.is-open::before {
  opacity: 1;
}

.deep-dive-modal.is-entering .deep-dive-modal-box {
  transform: translateX(0);
  opacity: 1;
}

.deep-dive-modal.is-open .deep-dive-modal-box {
  transform: translateX(0);
  opacity: 1;
}

.deep-dive-modal.is-loading .deep-dive-modal-box {
  height: calc(100vh - 24px);
}

.deep-dive-modal.is-closing {
  opacity: 0;
  background: rgba(245, 245, 247, 0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Exits the same way it entered — off to the right, not down — so the
   motion path stays spatially consistent in both directions. */
.deep-dive-modal.is-closing .deep-dive-modal-box {
  transform: translateX(calc(100% + 32px));
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .deep-dive-modal-box {
    transition: opacity 0.2s ease;
  }

  .deep-dive-modal.is-entering .deep-dive-modal-box,
  .deep-dive-modal.is-open .deep-dive-modal-box,
  .deep-dive-modal.is-closing .deep-dive-modal-box {
    transform: none !important;
  }
}

.deep-dive-content {
  height: auto;
  min-height: 100%;
  padding: 0;
  overflow: visible;
}

.deep-dive-shell {
  --deep-dive-card-padding: 22px;
  --deep-dive-card-gap: 18px;
  --deep-dive-col-left: minmax(240px, 2.4fr);
  --deep-dive-col-right: minmax(0, 7.6fr);
  --deep-dive-heading-size-lg: clamp(24px, 2.4vw, 34px);
  --deep-dive-heading-size-md: clamp(18px, 1.8vw, 24px);
  --deep-dive-heading-size-breakdown: clamp(19px, 1.9vw, 27px);
  --deep-dive-heading-size-section: clamp(20px, 2vw, 28px);
  --deep-dive-heading-letter: -0.035em;
  --deep-dive-heading-line: 1.08;
  --deep-dive-heading-color: #0f172a;
  --deep-dive-heading-shadow: 0 0.4px 0 rgba(255,255,255,0.7);
  height: auto;
  min-height: calc(100% - 2px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  isolation: isolate;
}

.deep-dive-shell::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--radius-xl) + 4px);
  background: radial-gradient(110% 80% at 18% 10%, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0) 62%);
  pointer-events: none;
  z-index: -1;
}

/* Just the glass edge (a bright top rim + a hairline underneath), no
   floating drop shadow — the panel never actually changes elevation as
   you scroll past it, so a shadow implying otherwise had no signal
   behind it. */
.deep-dive-header-card {
  position: sticky;
  top: 12px;
  z-index: 8;
  width: 100%;
  margin-inline: 0;
  padding: 6px 9px;
  background: transparent;
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80),
              inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-xl) !important;
  clip-path: none !important;
  align-self: stretch;
  overflow: visible;
  transition: padding 0.3s ease, top 0.3s ease;
}

.deep-dive-header-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: url(#lg-topbar) blur(10px) saturate(1.8);
  -webkit-backdrop-filter: blur(10px) saturate(1.8);
  z-index: -1;
  pointer-events: none;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

.deep-dive-header-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-xl) - 1px);
  background: linear-gradient(115deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 62%);
  opacity: 0.75;
  pointer-events: none;
}

@media (prefers-reduced-transparency: reduce) {
  .deep-dive-header-card::before {
    background: rgb(250, 250, 251);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border-strong);
  }
}

.deep-dive-header-card > * {
  position: relative;
  z-index: 1;
}

.deep-dive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.deep-dive-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

/* A tint of the tier color (same --accent-light/--accent-now-light idiom
   the rest of the app uses for status badges — see .member-role-badge),
   not a solid alert-colored fill — reads as one of our own badges rather
   than a bolted-on traffic light, while the tier color on the text/icon
   still gives it enough weight to read at a glance. */
.dd-signal-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--signal-color, var(--text-tertiary));
  white-space: nowrap;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--signal-color-light, rgba(108,108,114,0.10));
  cursor: default;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.dd-signal-label {
  display: inline-block;
}

.dd-signal-pill:hover {
  box-shadow: inset 0 0 0 1px currentColor;
}

.dd-signal-pill:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.dd-signal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Shared tooltip portal for every .dd-signal-pill (see
   setupSignalPillTooltips() in app.js) — same reasoning as .sync-tooltip:
   the pill sits in a sticky header inside a scrolling panel, so an in-flow
   tooltip would get clipped. One explanation, identical regardless of
   which tier is showing, since the legend itself doesn't change. */
.dd-signal-tooltip {
  position: fixed;
  z-index: 10000;
  width: 236px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(28, 28, 30, 0.96);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,0.30);
}

.dd-signal-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.dd-signal-tooltip-lead {
  margin: 0 0 8px;
  color: rgba(255,255,255,0.82);
}

.dd-signal-tooltip-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 5px;
}

.dd-signal-tooltip-row:first-of-type {
  margin-top: 0;
}

.dd-signal-tooltip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transform: translateY(-1px);
  background: var(--dot-color);
}

@media (prefers-reduced-motion: reduce) {
  .dd-signal-tooltip {
    transition: opacity 0.12s ease;
    transform: none;
  }
}

.deep-dive-loading-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: clamp(240px, 44vh, 420px);
}

.deep-dive-skel-line,
.deep-dive-skel-chart {
  border-radius: 10px;
  background: linear-gradient(90deg, #ececee 25%, #e3e3e5 50%, #ececee 75%);
  background-size: 1200px 100%;
  animation: shimmer 1.45s infinite linear;
}

.deep-dive-skel-title {
  height: 20px;
  width: 42%;
}

.deep-dive-skel-metric {
  height: 28px;
  width: 24%;
}

.deep-dive-skel-chart {
  height: 220px;
}

/* Same carved-in family as .modal-close, in the app's own neutral palette
   instead of a stark black pill — reads as part of the toolbar's glass
   material rather than a bolted-on high-contrast control. */
.deep-dive-close-btn {
  border: none;
  background: var(--surface-2);
  color: var(--text-secondary);
  border-radius: 999px;
  height: 32px;
  padding: 0 14px 0 12px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.14),
    inset 0 -1px 1px rgba(255,255,255,0.7);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s var(--ease-out), box-shadow 0.15s ease;
}

.deep-dive-close-btn svg {
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.deep-dive-close-btn-label {
  white-space: nowrap;
}

.deep-dive-close-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.deep-dive-close-btn:active {
  transform: scale(0.96);
  box-shadow:
    inset 0 1.5px 4px rgba(0,0,0,0.22),
    inset 0 -1px 1px rgba(255,255,255,0.5);
}

@media (prefers-contrast: more) {
  .deep-dive-close-btn {
    border: 1px solid var(--border-strong);
  }
}

.deep-dive-focus-card {
  min-height: 196px;
  width: 100%;
  margin-inline: 0;
  padding: var(--deep-dive-card-padding);
  border: 1px solid rgba(255,255,255,0.84);
  background: var(--surface);
  box-shadow: 0 14px 30px rgba(9, 18, 32, 0.10), inset 0 1px 0 rgba(255,255,255,0.84);
}

.deep-dive-focus-card::after {
  display: none !important;
}

.deep-dive-focus-card:hover::after {
  transform: none;
}

.deep-dive-focus-card.has-deep-dive-chart {
  min-height: clamp(320px, 42vh, 520px);
  height: auto;
  display: grid;
  grid-template-columns: var(--deep-dive-col-left) var(--deep-dive-col-right);
  grid-template-rows: auto 1fr;
  align-items: stretch;
  gap: var(--deep-dive-card-gap);
}

.deep-dive-focus-card .deep-dive-title-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(12, 24, 44, 0.08);
}

.deep-dive-focus-card .deep-dive-title-row .sc-title {
  font-size: var(--deep-dive-heading-size-lg);
}

.deep-dive-focus-card.no-deep-dive-chart {
  min-height: auto;
  gap: 14px;
}

.deep-dive-focus-card.no-deep-dive-chart .deep-dive-title-row-compact {
  display: flex;
  align-items: flex-end;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(12, 24, 44, 0.08);
}

.deep-dive-focus-card.no-deep-dive-chart .deep-dive-title-row-compact .sc-title {
  font-size: var(--deep-dive-heading-size-lg);
  font-weight: 700;
}

.deep-dive-focus-card.no-deep-dive-chart .deep-dive-card-header {
  display: none;
}

.deep-dive-focus-card .deep-dive-summary-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.deep-dive-focus-card .deep-dive-top-block {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.deep-dive-focus-card .deep-dive-detail-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.deep-dive-focus-card .deep-dive-card-header {
  display: none;
}

.deep-dive-focus-card .deep-dive-card-metric-row {
  flex-wrap: wrap;
  gap: 10px 12px;
}

.deep-dive-focus-card .deep-dive-card-description {
  display: block;
  line-clamp: unset;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
  max-width: none;
}

.deep-dive-focus-card .deep-dive-card-meta-row,
.deep-dive-focus-card .deep-dive-card-meta-row .sc-meta-grid {
  margin-top: 0;
}

.deep-dive-focus-card .deep-dive-chart-block {
  min-height: 280px;
  height: 100%;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-self: stretch;
  padding: 8px 0 2px;
}

.deep-dive-focus-card .deep-dive-chart-block .sc-chart-wrap,
.deep-dive-focus-card .deep-dive-chart-block .hbar-wrap,
.deep-dive-focus-card .deep-dive-chart-block .hbar-full {
  flex: 1 1 100%;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.deep-dive-focus-card .deep-dive-chart-block canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.deep-dive-tables-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-content: start;
  min-height: 0;
  overflow: visible;
  padding: 0;
}

.deep-dive-breakdown-card {
  width: 100%;
  margin-inline: 0;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.86);
  border-radius: var(--radius-xl);
  padding: var(--deep-dive-card-padding);
  box-shadow: 0 1px 0 rgba(255,255,255,0.74) inset, 0 10px 26px rgba(10, 20, 32, 0.07);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.deep-dive-info-card {
  width: 100%;
  margin-inline: 0;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.86);
  border-radius: var(--radius-xl);
  padding: var(--deep-dive-card-padding);
  box-shadow: 0 1px 0 rgba(255,255,255,0.74) inset, 0 10px 26px rgba(10, 20, 32, 0.07);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Deep dive detail cards (breakdown + info) start collapsed to header-only
   — the top state card already carries the always-visible summary, so
   these additional-data cards disclose on demand instead of dumping
   everything open at once. */
.dd-collapsible-toggle {
  border: none;
  background: none;
  margin: 0;
  padding-right: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s var(--ease-out);
}

.dd-collapsible-toggle:active {
  transform: scale(0.994);
}

.dd-collapsible-toggle:focus-visible {
  outline: 2px solid rgba(0,80,200,0.35);
  outline-offset: 3px;
}

/* Same carved-in dish as .modal-close, scaled down — the chevron reads as
   inset into the card rather than a flat tinted circle. */
.dd-collapsible-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--text-tertiary);
  background: var(--surface-2);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.14),
    inset 0 -1px 1px rgba(255,255,255,0.7);
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dd-collapsible-toggle:hover .dd-collapsible-chevron {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

.dd-collapsible-toggle:active .dd-collapsible-chevron {
  box-shadow:
    inset 0 1.5px 3px rgba(0,0,0,0.2),
    inset 0 -1px 1px rgba(255,255,255,0.5);
}

.dd-collapsible.is-expanded .dd-collapsible-chevron {
  transform: rotate(180deg);
  color: var(--text-secondary);
}

.dd-collapsible-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s ease;
}

.dd-collapsible.is-expanded .dd-collapsible-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.dd-collapsible-body-inner {
  min-height: 0;
  overflow: hidden;
}

.deep-dive-breakdown-card .dd-collapsible-body-inner {
  padding-top: 10px;
}

.deep-dive-info-card .dd-collapsible-body-inner {
  padding-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .dd-collapsible-body {
    transition: grid-template-rows 0.001ms, opacity 0.15s ease;
  }

  .dd-collapsible-chevron {
    transition: background 0.15s ease, color 0.15s ease;
  }

  .dd-collapsible.is-expanded .dd-collapsible-chevron {
    transform: none;
  }
}

.deep-dive-info-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 4px;
}

.deep-dive-info-head .sc-title {
  font-size: var(--deep-dive-heading-size-section);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.deep-dive-info-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border-top: none;
}

.deep-dive-info-list > .deep-dive-info-row:only-child {
  grid-column: span 2;
}

.deep-dive-info-list > .deep-dive-info-row:first-child:nth-last-child(2),
.deep-dive-info-list > .deep-dive-info-row:first-child:nth-last-child(2) ~ .deep-dive-info-row {
  grid-column: span 2;
}

.deep-dive-info-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
  
  border-bottom: none;
  border-radius: calc(var(--radius-xl) - 8px);
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 1px 0 rgba(255,255,255,0.66) inset;
}

.deep-dive-info-row:last-child {
  border-bottom: none;
}

.deep-dive-info-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
}

.deep-dive-info-row .sc-title {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
}

.deep-dive-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.deep-dive-info-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
min-width: 0;
padding: 9px 10px 8px;
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.02);
color: var(--text-secondary);
box-shadow: none;
font-size: 12px;
line-height: 1.4;
font-weight: 500;
letter-spacing: -0.01em;
}

.deep-dive-info-key {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}

.deep-dive-info-value {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
  word-break: break-word;
}

.deep-dive-breakdown-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 4px;
}

.deep-dive-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(12, 24, 44, 0.05);
}

.deep-dive-breakdown-row {
  display: grid;
  grid-template-columns: var(--deep-dive-col-left) var(--deep-dive-col-right);
  gap: var(--deep-dive-card-gap);
  align-items: end;
  padding: 10px 0 14px;
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(12, 24, 44, 0.07);
  box-shadow: none;
}

.deep-dive-breakdown-row:last-child {
  padding-bottom: 2px;
  border-bottom: none;
}

.deep-dive-breakdown-row-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.deep-dive-breakdown-row-title-wrap {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  align-self: end;
}

.deep-dive-breakdown-row .sc-title,
.deep-dive-breakdown-head .sc-title {
  font-weight: 600;
  color: var(--deep-dive-heading-color);
  text-shadow: var(--deep-dive-heading-shadow);
}

.deep-dive-breakdown-head .sc-title {
  font-size: var(--deep-dive-heading-size-breakdown);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.deep-dive-focus-card .deep-dive-title-row .sc-title,
.deep-dive-focus-card.no-deep-dive-chart .deep-dive-title-row-compact .sc-title,
.deep-dive-info-head .sc-title {
  margin: 0;
  color: var(--deep-dive-heading-color);
  letter-spacing: var(--deep-dive-heading-letter);
  line-height: var(--deep-dive-heading-line);
  text-shadow: var(--deep-dive-heading-shadow);
}

.deep-dive-breakdown-row .sc-title {
  font-size: 14px;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
  align-self: flex-end;
}

.deep-dive-breakdown-head .sc-description {
  margin: 4px 0 0;
  max-width: none;
  font-size: 12px;
  line-height: 1.5;
  display: block;
  line-clamp: unset;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.deep-dive-breakdown-row-meta {
  gap: 2px;
  margin-top: 0;
  align-self: start;
  justify-self: start;
  align-items: flex-start;
}

.deep-dive-breakdown-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  justify-content: flex-start;
}

.deep-dive-breakdown-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(100%, 320px);
}

.deep-dive-breakdown-row-meta.sc-minmax {
  gap: 2px;
  align-self: flex-start;
}

.deep-dive-breakdown-row-meta .sc-minmax-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
}

.deep-dive-breakdown-stat-key {
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

.deep-dive-breakdown-stat-value {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.deep-dive-breakdown-body {
  position: relative;
  min-height: 86px;
  max-height: 86px;
  width: 100%;
  align-self: end;
}

.deep-dive-breakdown-body canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.deep-dive-table-card {
  width: 100%;
  margin-inline: 0;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.86);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(9, 18, 32, 0.09), inset 0 1px 0 rgba(255,255,255,0.86);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deep-dive-table-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 4px;
  border-bottom: none;
}

.deep-dive-table-title {
  margin: 0;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #334155;
}

.deep-dive-table-wrap {
  width: 100%;
  max-width: 100%;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable both-edges;
  position: relative;
  border-radius: 13px;
  border: 1px solid rgba(12, 24, 44, 0.06);
  background: linear-gradient(180deg, #fdfdff 0%, #fbfcff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 6px 14px rgba(12, 24, 44, 0.06);
}

.deep-dive-table-wrap::-webkit-scrollbar {
  height: 10px;
}

.deep-dive-table-wrap::-webkit-scrollbar-track {
  background: rgba(229, 234, 243, 0.66);
  border-radius: 999px;
}

.deep-dive-table-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(128, 146, 177, 0.78) 0%, rgba(108, 129, 164, 0.74) 100%);
  border-radius: 999px;
}

.deep-dive-table-wrap::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(103, 124, 160, 0.88) 0%, rgba(83, 108, 148, 0.86) 100%);
}

.deep-dive-table {
  --chart-blue-main: #0050c8;
  --chart-blue-alt: #0b6ccf;
  --chart-blue-soft: rgba(0,80,200,0.13);
  --chart-blue-mid: rgba(0,80,200,0.24);
  --chart-blue-strong: rgba(0,80,200,0.78);
  --chart-blue-hi: rgba(0,98,220,0.92);
  --chart-blue-hi-soft: rgba(0,98,220,0.34);
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.deep-dive-table th,
.deep-dive-table td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid rgba(12, 24, 44, 0.08);
  border-right: 1px solid rgba(12, 24, 44, 0.06);
  white-space: nowrap;
  line-height: 1.35;
}

.deep-dive-table tbody tr {
  transition: background-color 0.15s ease;
}

.deep-dive-table th {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #f6f8fc 0%, #f0f4fa 100%);
  color: #334155;
  font-weight: 650;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 4;
  box-shadow: inset 0 -1px 0 rgba(12,24,44,0.1);
}

.deep-dive-table th:first-child,
.deep-dive-table td:first-child {
  position: sticky;
  left: 0;
  background: #ffffff;
  text-align: left;
  z-index: 5;
  box-shadow: inset -1px 0 0 rgba(12,24,44,0.08);
  background-clip: padding-box;
}

.deep-dive-table thead th:first-child {
  z-index: 7;
}

.deep-dive-table tbody td:first-child {
  background: #ffffff !important;
}

.deep-dive-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.deep-dive-name-text {
  display: block;
  white-space: nowrap;
}

.deep-dive-table tbody tr:nth-child(even) td {
  background: rgba(247, 250, 255, 0.38);
}

.deep-dive-table tbody tr:hover td {
  background: rgba(232, 241, 255, 0.50);
}

.deep-dive-name-cell {
  font-weight: 620;
  color: #0f172a;
}

.deep-dive-total-cell {
  font-weight: 620;
  color: var(--chart-blue-main);
}

.deep-dive-table td.deep-dive-value-number {
  color: #1f2f45;
  font-weight: 560;
}

.deep-dive-table td.deep-dive-value-time {
  color: #334155;
  font-weight: 540;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.deep-dive-table td.deep-dive-value-mixed {
  color: #42566f;
}

.deep-dive-table td.deep-dive-value-empty {
  color: rgba(66, 86, 111, 0.42);
}

.deep-dive-empty {
  border: 1px dashed rgba(0,0,0,0.14);
  background: linear-gradient(180deg, rgba(252,253,255,0.95) 0%, rgba(248,251,255,0.90) 100%);
  color: var(--text-secondary);
  font-size: 13px;
  padding: 18px;
  text-align: center;
}

@media (max-width: 900px) {
  .deep-dive-modal {
    padding: 8px;
  }

  .deep-dive-modal-box {
    max-width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  .deep-dive-content {
    padding: 0;
  }

  .deep-dive-shell {
    --deep-dive-card-padding: 14px;
    --deep-dive-card-gap: 14px;
    padding: 10px;
    gap: 10px;
  }

  .deep-dive-shell::before {
    inset: 0;
  }

  .deep-dive-header-card {
    top: 10px;
    padding: 6px 8px;
  }

  .deep-dive-toolbar {
    padding: 0;
    gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .deep-dive-toolbar-left {
    width: calc(100% - 40px);
    gap: 8px;
  }

  .deep-dive-close-btn {
    width: 32px;
    padding: 0;
  }

  .deep-dive-close-btn-label {
    display: none;
  }

  .dd-signal-pill {
    max-width: 100%;
  }

  .dd-signal-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .deep-dive-table-card {
    padding: 10px;
  }

  .deep-dive-breakdown-card {
    padding: var(--deep-dive-card-padding);
  }

  .deep-dive-info-card {
    padding: var(--deep-dive-card-padding);
  }

  .deep-dive-tables-stack {
    padding: 0;
  }

  .deep-dive-breakdown-head {
    gap: 10px;
  }

  .deep-dive-breakdown-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 10px 0 12px;
  }

  .deep-dive-breakdown-row-copy {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .deep-dive-info-grid {
    grid-template-columns: 1fr;
  }

  .deep-dive-info-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .deep-dive-breakdown-legend {
    justify-content: flex-start;
    min-width: 0;
  }

  .deep-dive-breakdown-body {
    min-height: 110px;
    max-height: 110px;
  }

  .deep-dive-focus-card {
    padding: var(--deep-dive-card-padding);
  }

  .deep-dive-focus-card.has-deep-dive-chart {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 14px;
  }

  .deep-dive-focus-card .deep-dive-summary-block {
    gap: 12px;
  }

  .deep-dive-focus-card .deep-dive-chart-block {
    min-height: 220px;
    padding-top: 0;
  }

}

/* Plain typographic sections, not boxed cards — same move away from
   per-section framing as the main Settings page's .settings-group/
   .settings-block (a small uppercase label + spacing tells them apart,
   not a border+shadow box each). The modal box itself is the one white
   surface; these are just regions within it. */
.team-settings-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.team-settings-section:last-child {
  margin-bottom: 0;
}

.team-settings-section .settings-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.team-settings-modal-box .modal-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-settings-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.team-settings-top {
  gap: 10px;
}

.team-connection-status {
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--surface-2);
}

.team-connection-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.team-connection-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.team-settings-modal-box .modal-title {
  margin: 0 36px 2px 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.team-settings-modal-box .members-list {
  gap: 0;
}

.team-settings-modal-box .member-row {
  padding: 11px 0;
}

.team-settings-modal-box .member-name {
  font-size: 13px;
  font-weight: 600;
}

.team-settings-modal-box .member-email {
  font-size: 12px;
}

.invite-inline-row {
  gap: 10px;
}

.invite-inline-row .invite-input {
  flex: 1;
}

@media (max-width: 900px) {
  .team-settings-split {
    grid-template-columns: 1fr;
  }

  .team-settings-modal {
    padding: 8px;
  }

  .team-settings-modal-box {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
}

/* Carved into the panel rather than floating on it — a shallow inset
   "dish" (dark lip at the top, faint highlight at the bottom) reads as
   physically pressed into the surface. Deepens further on :active so the
   press itself looks like it's pushing the button further into the well. */
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--surface-2);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.16),
    inset 0 -1px 1px rgba(255,255,255,0.7);
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out),
    box-shadow 0.15s var(--ease-out), transform 0.12s var(--ease-out);
}

.modal-close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.modal-close:active {
  transform: scale(0.90);
  box-shadow:
    inset 0 1.5px 4px rgba(0,0,0,0.24),
    inset 0 -1px 1px rgba(255,255,255,0.5);
}

@media (prefers-contrast: more) {
  .modal-close {
    border: 1px solid var(--border-strong);
  }
}

.notif-modal-priority {
  margin-bottom: 10px;
}

.modal-notif-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 12px 0 18px;
  line-height: 1.65;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.005em;
}

/* ===================== MD CONTENT ===================== */

.md-content > * { margin: 0 0 10px; }
.md-content > *:last-child { margin-bottom: 0; }

.md-content h1, .md-content h2, .md-content h3,
.md-content h4, .md-content h5, .md-content h6 {
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.md-content h1 { font-size: 16px; }
.md-content h2 { font-size: 14px; }
.md-content h3, .md-content h4,
.md-content h5, .md-content h6 { font-size: 13px; }

.md-content p { margin: 0 0 8px; letter-spacing: -0.005em; }

.md-content ul, .md-content ol {
  padding-left: 20px;
}
.md-content li { margin-bottom: 3px; }

.md-content code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--accent);
}

.md-content pre {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.55;
  border: 1px solid var(--border);
}

.md-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.md-content blockquote {
  border-left: 3px solid var(--border);
  margin: 0 0 8px;
  padding: 2px 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.md-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

.md-content strong { font-weight: 700; }
.md-content em { font-style: italic; }

/* ===================== MODAL FIELDS ===================== */

.modal-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  padding-right: 40px;
  letter-spacing: -0.025em;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 900px) {
  .col-4,
  .col-6,
  .col-8 {
    grid-column: span 12;
  }

  .states-list {
    grid-template-columns: repeat(2, 1fr);
    --state-card-fixed-height: 376px;
  }

  .sc-size-large {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  html, body {
    height: auto;
  }

  body {
    overflow: visible;
  }

  .app-shell {
    flex-direction: column;
    gap: 0;
    height: auto;
  }

  .sidebar,
  html.sidebar-collapsed .sidebar {
    width: 100%;
    flex: none;
    position: relative;
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 6px 12px;
  }

  /* The icon-only rail is a desktop-only affordance — mobile already
     collapses/expands the whole sidebar via .sidebar-mobile-toggle, so
     this one just stays out of the way here rather than doubling up. */
  .sidebar-collapse-toggle {
    display: none;
  }

  /* Collapsed by default: just the brand row + toggle. Everything else
     (team switcher, nav, profile) is a single group shown only when the
     toggle is open — the old behavior rendered all of it stacked and
     expanded on every load, which ate the whole screen before any content. */
  .sidebar-brand,
  html.sidebar-collapsed .sidebar-brand {
    flex-direction: row;
    padding: 6px 0;
  }

  .sidebar-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, transform 0.15s var(--ease-out);
  }

  .sidebar-mobile-toggle:hover {
    background: var(--surface-hover);
  }

  .sidebar-mobile-toggle:active {
    transform: scale(0.92);
  }

  .sidebar-nav-group {
    display: none;
    flex: none;
    padding: 4px 0 10px;
  }

  .sidebar.is-mobile-open .sidebar-nav-group {
    display: flex;
  }

  .sidebar-footer {
    margin-top: 4px;
  }

  .main-area {
    height: auto;
    overflow: visible;
    padding: 20px 16px 32px;
  }

  .content {
    grid-template-columns: 1fr;
  }

  .sc-header-left {
    align-items: flex-start;
  }

  .col-3,
  .col-4,
  .col-6,
  .col-8,
  .col-12 {
    grid-column: 1 / -1;
  }

  .states-list {
    grid-template-columns: 1fr;
    --state-card-fixed-height: 356px;
  }

  .sc-size-medium,
  .sc-size-large {
    grid-column: 1 / -1;
  }

  .sc-meta-grid {
    gap: 7px;
  }

  .deep-dive-modal {
    padding: 6px;
  }

  .deep-dive-modal-box {
    border-radius: 14px !important;
    height: calc(100vh - 12px);
    max-height: calc(100vh - 12px);
  }

  .team-settings-modal {
    padding: 6px;
  }

  .team-settings-modal-box {
    border-radius: 14px !important;
    max-height: calc(100vh - 12px);
    padding: 22px;
  }

  .deep-dive-focus-card.has-deep-dive-chart {
    min-height: auto;
  }

  .deep-dive-focus-card .deep-dive-chart-block {
    min-height: 180px;
  }

  .deep-dive-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .sc-header-actions {
    gap: 6px;
  }

  .sc-deep-dive-btn {
    padding: 3px 8px;
    font-size: 10px;
  }

  .sc-deep-dive-btn-icon {
    display: inline-flex;
  }

  .notif-card {
    padding: 12px 4px;
  }

  .notif-group {
    padding: 14px 12px;
  }
}

/* ===================== TOPBAR ACTION ACTIVE ===================== */

.topbar-action.is-active {
  background: var(--surface);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.06);
}

.topbar-action.is-active .nav-icon {
  opacity: 0.85;
}

/* ===================== MOCK PAGES ===================== */

.mock-page-card {
  height: auto !important;
  max-width: 640px;
  box-shadow: 0 10px 26px rgba(10,20,32,0.07);
}

.mock-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}

.mock-section {
  margin-bottom: 28px;
}

.mock-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  font-weight: 600;
  margin: 0 0 10px;
}

.mock-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border);
  gap: 12px;
  transition: background 0.15s var(--ease-out);
}

.mock-field:last-child {
  border-bottom: none;
}

.mock-field:hover {
  background: rgba(0,0,0,0.025);
}

.mock-field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.mock-field-value {
  font-size: 13px;
  color: var(--text-secondary);
}

.mock-placeholder {
  color: var(--text-tertiary);
}

/* Track reads as a well carved into the surface (two-tone inset: a dark
   lip along the top, a faint highlight along the bottom); the knob sits
   raised out of it with its own drop shadow, so the physical contrast
   between "pressed in" and "popped out" carries the on/off state. */
.mock-toggle {
  width: 38px;
  height: 22px;
  border-radius: 980px;
  background: rgba(0,0,0,0.14);
  position: relative;
  flex-shrink: 0;
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow:
    inset 0 1.5px 3px rgba(0,0,0,0.22),
    inset 0 -1px 1px rgba(255,255,255,0.5);
  transition: background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.mock-toggle:disabled {
  cursor: default;
  opacity: 0.55;
}

.mock-toggle:active:not(:disabled) {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.28),
    inset 0 -1px 1px rgba(255,255,255,0.4);
}

.mock-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 2px 5px rgba(0,0,0,0.16);
  transition: left 0.22s var(--ease-spring), box-shadow 0.2s var(--ease-out);
}

.mock-toggle:active:not(:disabled)::after {
  box-shadow: 0 1px 1px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.14);
}

.mock-toggle.mock-toggle-on {
  background: var(--green);
  box-shadow:
    inset 0 1.5px 3px rgba(0,0,0,0.16),
    inset 0 -1px 1px rgba(255,255,255,0.25);
}

.mock-toggle.mock-toggle-on:active:not(:disabled) {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.22),
    inset 0 -1px 1px rgba(255,255,255,0.2);
}

.mock-toggle.mock-toggle-on::after {
  left: calc(100% - 20px);
}

.mock-coming-soon {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 4px 0 0;
  letter-spacing: -0.005em;
}

.mock-faq-item {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}

.mock-faq-item:last-child {
  border-bottom: none;
}

.mock-faq-q {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  letter-spacing: -0.01em;
  list-style: none;
  user-select: none;
  transition: background 0.15s var(--ease-out);
}

.mock-faq-q:hover {
  background: rgba(0,0,0,0.03);
}

.mock-faq-q::-webkit-details-marker { display: none; }

.mock-faq-q::before {
  content: '›';
  display: inline-block;
  margin-right: 6px;
  color: var(--text-tertiary);
  transition: transform 0.2s var(--ease-spring);
}

details[open] .mock-faq-q::before {
  transform: rotate(90deg);
}

.mock-faq-a {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 0 0 10px 16px;
  margin: 0;
  line-height: 1.55;
}

/* ===================== AUTH OVERLAY ===================== */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  animation: auth-fade-in 0.28s ease;
}

.auth-overlay[hidden] { display: none; }

@keyframes auth-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.auth-card {
  background: var(--surface);
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-xl);
  padding: 44px 40px 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  animation: auth-card-in 0.40s cubic-bezier(0.34, 1.08, 0.64, 1);
}

@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ---- Logo ---- */

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 44px;
}

.auth-logo-mark {
  display: block;
}

/* ---- Step ---- */

.auth-step {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auth-step[hidden] { display: none; }

.auth-step:not([hidden]) {
  animation: contentEnter 0.18s ease;
}

.auth-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px;
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-align: center;
}

.auth-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 2px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  text-align: center;
}

/* ---- Form ---- */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.auth-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.55px;
  margin-bottom: -2px;
}

.auth-input {
  font-family: var(--font);
  font-size: 15px;
  color: var(--text-primary);
  padding: 13px 16px;
  border: 1.5px solid rgba(0,0,0,0.11);
  border-radius: 14px;
  background: rgba(255,255,255,0.65);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  letter-spacing: -0.01em;
  width: 100%;
}

.auth-input::placeholder { color: rgba(0,0,0,0.24); }

.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,80,200,0.13);
  background: rgba(255,255,255,0.95);
}

.auth-submit-btn {
  position: relative;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(160deg, #2a73ff 0%, #0040c8 100%);
  border: none;
  border-radius: 14px;
  padding: 14px 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
  letter-spacing: -0.015em;
  margin-top: 8px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.12),
    0 4px 16px rgba(0,80,200,0.32),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Pending state: label/icon fade out in place (button keeps its size, no
   layout jump) and a small ring spinner takes over — so a slow or hung
   request reads as "working on it," never as a dead button. */
.auth-submit-btn.is-loading {
  cursor: default;
  color: transparent;
}

.auth-submit-btn.is-loading svg {
  opacity: 0;
}

.auth-submit-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: importing-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .auth-submit-btn.is-loading::after {
    animation: none;
    opacity: 0.85;
  }
}

.auth-submit-btn:hover {
  opacity: 0.91;
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.10),
    0 8px 24px rgba(0,80,200,0.38),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.auth-submit-btn:active {
  opacity: 1;
  transform: scale(0.98);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,80,200,0.26),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.auth-error {
  font-size: 12.5px;
  color: var(--red);
  margin: 8px 0 0;
  text-align: center;
}

/* ---- Step 2: email sent ---- */

.auth-sent-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(145deg, #e6f4ea 0%, #c5e8cb 100%);
  color: #1a9e40;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  box-shadow: 0 4px 20px rgba(26,158,64,0.18);
}

/* ---- Login/Register tabs ---- */

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 8px;
}

.auth-tabs[hidden] { display: none; }

.auth-tab {
  flex: 1 1 auto;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: none;
  border: none;
  border-radius: 9px;
  padding: 9px 0;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: color 0.12s, background 0.12s, transform 0.12s var(--ease-out);
}

.auth-tab.is-active {
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.auth-tab:active {
  transform: scale(0.97);
}

/* ---- Register: new-team vs join-by-invite ---- */

.auth-team-mode {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}

.auth-team-mode-btn {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: 0 0 4px;
  cursor: pointer;
  letter-spacing: -0.01em;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s, opacity 0.12s;
}

.auth-team-mode-btn:active {
  opacity: 0.6;
}

.auth-team-mode-btn.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

#authTeamNameField:not([hidden]),
#authInviteTokenField:not([hidden]) {
  animation: contentEnter 0.18s ease;
}

#authTeamNameField,
#authInviteTokenField {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

#authTeamNameField[hidden],
#authInviteTokenField[hidden] {
  display: none;
}

.auth-back-btn {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 18px;
  letter-spacing: -0.01em;
  text-align: center;
  width: 100%;
  transition: color 0.12s;
}

.auth-back-btn:hover { color: var(--text-secondary); }

/* ===================== SETTINGS PAGE ===================== */
/* Two separate white .squircle cards — "Personal information" (profile/
   password/notification prefs) and "Teams management" — the same
   CornerKit shape #nowContent/#askContent use (see index.html/
   applySquircle()), not one shared surface. Each card's own content is
   fully rebuilt on every renderSettingsView() call and its height
   changes with it (team count, etc.), same as #nowContent, so
   applySquircle() runs after each render there too. Left-aligned with a
   max-width and no auto margins, matching .notifications-list — an
   earlier canvas-column (centered) here was the one list-style page not
   left-aligned like the rest of the app. */

.settings-view {
  max-width: 760px;
  padding: 28px 0 60px;
}

/* Same floating-card recipe as the deep-dive panel's own cards (border +
   soft shadow + a hairline inset highlight) instead of a flat, shadowless
   block — Settings sat noticeably flatter than the rest of the app. */
.settings-group {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.86);
  border-radius: var(--radius-squircle);
  padding: 36px 40px;
  margin-bottom: 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.74) inset, 0 10px 26px rgba(10, 20, 32, 0.07);
}

.settings-group:last-child {
  margin-bottom: 0;
}

.settings-group-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin: 0 0 24px;
}

.settings-block {
  margin-bottom: 40px;
}

.settings-block:last-child {
  margin-bottom: 0;
}

.settings-block-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin: 0 0 16px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  margin-top: 8px;
}

.settings-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-row-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-row-sub {
  font-size: 12px;
  color: var(--text-tertiary);
}

.settings-text-btn {
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: color 0.12s;
}

/* Neutral by default — most of these (Manage team, Sign out, Add) aren't
   destructive, so a blanket red hover was misleading. Only the one action
   here that actually removes something (disconnecting Slack) opts into
   the red warning explicitly, see .notif-slack-disconnect-btn below. */
.settings-text-btn:hover {
  color: var(--text-primary);
}

.notif-slack-disconnect-btn:hover {
  color: var(--red);
}

/* ===================== MEMBER LIST ===================== */

.members-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.member-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.member-self-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 1px 6px;
  border-radius: 980px;
  letter-spacing: 0;
}

.member-email {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-role-badge {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 3px 10px;
  border-radius: 980px;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.member-role-admin,
.member-role-owner   { background: rgba(0,80,200,0.10);  color: var(--accent); }
.member-role-member  { background: rgba(0,0,0,0.06);     color: var(--text-secondary); }
.member-role-pending { background: var(--orange-light);  color: #c97000; }

.team-name-readonly {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.member-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.invite-revoke-btn {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
}

.invite-revoke-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* An actual role toggle (member ↔ admin) — carved in like the other
   toggle-shaped controls, deepening further on the press itself. */
.member-role-toggle-btn {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--surface-2);
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.12),
    inset 0 -1px 1px rgba(255,255,255,0.6);
  transition: color 0.12s, background 0.12s, box-shadow 0.12s;
}

.member-role-toggle-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.member-role-toggle-btn:active {
  box-shadow:
    inset 0 1.5px 3px rgba(0,0,0,0.18),
    inset 0 -1px 1px rgba(255,255,255,0.4);
}

.member-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}

.member-remove-btn:hover {
  color: var(--red);
  background: var(--red-light);
}

/* Same visual treatment as .member-remove-btn, kept as its own class
   (public/app.js's setupSlackChannelSearch()) so the pre-existing
   `.member-remove-btn` click handler in openTeamSettingsModal() — which
   posts to /team/member/remove with a link id — never also fires for a
   Slack channel row's remove button. */
.notif-channel-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}

.notif-channel-remove-btn:hover {
  color: var(--red);
  background: var(--red-light);
}

.slack-channel-picker {
  margin-top: 12px;
}

.slack-connection-select {
  width: 100%;
  margin-bottom: 8px;
  appearance: none;
  cursor: pointer;
}

.slack-search-row {
  margin: 0;
}

.slack-search-results {
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  /* Reveal like every other dropdown/popover in this app (.menu-subnav,
     .sf-popover) — a short opacity+height settle on the shared spring
     bezier, not a hard show/hide. */
  animation: slack-search-results-in 0.2s var(--ease-spring) both;
}

@keyframes slack-search-results-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .slack-search-results { animation: none; }
}

.slack-search-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  min-height: 44px;
}

.slack-search-result-row:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.slack-search-result-name {
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slack-add-channel-btn {
  flex-shrink: 0;
}

.notif-connect-slack-btn {
  margin-top: 10px;
}

/* Inside a .settings-row (flex, space-between) rather than the connect-hero's
   own centered column — same override .team-connection-status already
   applies to this shared button class, so it sits as a compact trailing
   action instead of trying to grow to its standalone 290px max-width. */
#notifSlackRow.settings-row {
  align-items: flex-start;
}

#notifSlackRow .connect-provider-btn {
  width: auto;
  max-width: none;
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 13px;
}

/* A top divider, not a solid pink block — the rest of this modal reads
   through whitespace and text color alone (see the CSS-wide "color used
   only as an accent, never decoration" approach), so a heavy fill here
   was the one section that broke that restraint instead of just flagging
   danger via the red heading/button, like every other accent in the app. */
.team-danger-zone {
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

.team-danger-zone .settings-section-title {
  color: var(--red);
}

.team-delete-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 980px;
  border: 1px solid var(--red-light);
  background: none;
  color: var(--red);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.team-delete-btn:hover:not(:disabled) {
  background: var(--red);
  color: #fff;
}

.team-delete-btn:disabled { opacity: 0.6; cursor: default; }
.team-delete-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red-light); }

/* ===================== SIGN OUT BUTTON ===================== */

.sign-out-btn {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--red);
  background: var(--red-light);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  transition: background 0.15s;
}

.sign-out-btn:hover { background: rgba(255,59,48,0.20); }

/* ===================== INVITE FORM ===================== */

.invite-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.invite-input {
  flex: 1;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  padding: 9px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  letter-spacing: -0.01em;
  min-width: 0;
}

.invite-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.invite-btn {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  padding: 9px 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: -0.01em;
}

.invite-btn:hover  { background: var(--accent-hover); }
.invite-btn:active { transform: scale(0.98); }

.invite-msg {
  font-size: 12.5px;
  margin: 8px 0 0;
}

/* Stacked label-above-input variant of .invite-form, used by the profile
   name/password forms in Settings — .invite-form itself lays fields out in
   a row (email + button), wrong for a labelled multi-field form. */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}

.profile-form .auth-label { margin-bottom: -2px; }
.profile-form .invite-btn { align-self: flex-start; margin-top: 4px; }

.invite-success { color: #1a9e40; }
.invite-error   { color: var(--red); }

/* ===================== CANVAS COLUMN ===================== */
/* Shared by Now and Ask: content is width-constrained and centered like a
   document, not stretched edge to edge. Structure comes from typography
   and spacing — no card, no border around the body copy. */

.canvas-column {
  max-width: var(--canvas-width);
  margin: 0 auto;
  width: 100%;
}

/* ===================== NOW REPORT ===================== */
/* A warm editorial morning-briefing look, adapted from a reference design:
   serif display headline, cream/clay palette, numbered rows (title + one
   sentence, nothing else) instead of stat tiles or card grids. Scoped to
   #nowContent via its own custom properties so it doesn't reach into
   States/Ask, which keep the app's regular (cooler) palette. */

#nowContent {
  --now2-bg: #FCFCFB;
  --now2-wash: #F9F9F7;
  --now2-ink: #2E2C27;
  --now2-ink-soft: #6B6A63;
  --now2-ink-grey: #B4B3A8;
  --now2-hairline: #E4E3DC;
  --now2-clay: #C6613F;
  /* --now2-bg was defined but never actually painted anywhere — harmless
     while the app canvas (--bg) was itself white, since nothing showed
     through, but now that the canvas is grey the gap between the cream
     .now-band-top and the unpainted .now-band-bottom below it reads as a
     visible seam. Filling it here makes the whole report one continuous
     reading surface again, same as before, now floating on the grey
     canvas on purpose rather than by accident.
     Shaped with the same CornerKit .squircle clip-path every other card
     in the app uses (state-card, modals, notification rows — see
     applySquircle() in index.html) instead of a plain border-radius
     rectangle, so its edge is the exact same continuous curve as
     everywhere else — no line, no rectangle-with-rounded-corners look.
     border-radius here is just CornerKit's own fallback/reference value,
     matching the radius it's given in renderNowReport()'s
     applySquircle() call. */
  border-radius: var(--radius-squircle);
  background: var(--now2-bg);
}

.now-band-top .canvas-column,
.now-band-bottom .canvas-column {
  max-width: 860px;
}

.now-band-top {
  /* No wash of its own anymore — #nowContent's --now2-bg now covers the
     whole card in one flat tone, and the old bleed-to-the-viewport-edge
     trick (negative margin) is gone now that the card has a real border
     to stay inside of. The hairline below still marks where the header
     ends and the numbered lists begin. */
  border-bottom: 1px solid var(--now2-hairline);
  padding: 40px 32px 32px;
}

.now-band-bottom {
  padding: 40px 32px 40px;
}

/* A small-caps kicker, the same label language as .menu-subnav-heading /
   .filter-label elsewhere in the app, instead of a plain grey sentence —
   reads as a deliberate dateline above the headline rather than leftover
   metadata. */
.now-report-date {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--now2-ink-grey);
  margin-bottom: 14px;
}

.now-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 52px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--now2-ink);
  margin: 0 0 32px;
  max-width: 20ch;
}

.now-trend-line {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 28px;
}

/* Three short sentences, not numbers — pace, critical moments, backlog
   direction. Separated by open space rather than a hairline column
   divider, matching the rest of the app's move away from border lines;
   a small icon on each label (see getNowActIcon) is what tells the three
   columns apart now, not a line between them. Content itself stays
   prose, matching the numbered lists below rather than reading like a
   separate stat-tile widget. */
.now-acts {
  display: flex;
  width: 100%;
  gap: 32px;
}

.now-act {
  flex: 1;
  min-width: 0;
}

.now-act-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  color: var(--now2-ink);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.now-act-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--now2-ink-grey);
}

.now-act-sentence {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--now2-ink-soft);
}

.now-list-block {
  margin-bottom: 44px;
}

.now-list-block:last-child {
  margin-bottom: 0;
}

/* The Info tier's lowest-priority sentence now sits right under the
   headline as a dek/subhead, not a labelled list tier — sans body copy,
   muted like the act sentences, wide enough to read as prose rather than
   a cramped column. Same margin-bottom the headline uses on its own
   (32px) so the trend line below keeps its usual amount of breathing
   room whether or not a lede is present. */
.now-lede {
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  color: var(--now2-ink-soft);
  margin: 0 0 32px;
  max-width: 56ch;
}

.now-section-heading {
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--now2-ink);
  margin: 0 0 20px;
}

/* Numbered, hairline-topped rows — the one row anatomy used everywhere in
   this tab: a bare number, a title that reads as the click target, one
   sentence underneath. No dots, no badges — per the brief, cards carry
   only their number, nothing else next to it. */
.now-numbered-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: now-item;
}

.now-numbered-list > li {
  counter-increment: now-item;
  display: flex;
  gap: 16px;
  padding: 18px 0;
  margin: 0;
  border-top: 1px solid var(--now2-hairline);
}

.now-numbered-list > li::before {
  content: counter(now-item);
  flex-shrink: 0;
  min-width: 18px;
  font-size: 13px;
  color: var(--now2-ink-grey);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.now-item-body {
  flex: 1;
  min-width: 0;
}

.now-issue-item {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  display: block;
}

.now-issue-item:disabled {
  cursor: default;
}

/* Title is the click target, styled like the reference's link (plain ink,
   no underline) rather than a colored/bold "button" look — the row's
   number + hover/focus feedback are enough affordance. */
.now-issue-name {
  display: block;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--now2-ink);
  margin-bottom: 4px;
  transition: color 0.12s;
}

.now-issue-item:not(:disabled):hover .now-issue-name,
.now-issue-item:not(:disabled):focus-visible .now-issue-name {
  color: var(--now2-clay);
}

.now-issue-item:focus-visible {
  outline: 2px solid var(--now2-clay);
  outline-offset: 3px;
  border-radius: 3px;
}

.now-issue-desc {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--now2-ink-soft);
}

/* The one non-deep-dive external link (e.g. Linear) — a quiet trailing
   line under the sentence, kept outside the <button> since <a> inside
   <button> is invalid and would fight its click handler. */
.now-source-link {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--now2-ink-soft);
  text-decoration-color: var(--now2-ink-grey);
}

.now-source-link:hover,
.now-source-link:focus-visible {
  color: var(--now2-clay);
  text-decoration-color: var(--now2-clay);
}

/* Reassurance line for an empty section ("nothing needs attention") and
   the untriaged-states nudge share this same quiet treatment — text only,
   same hairline rhythm as the numbered rows above it. */
.now-calm-line {
  display: block;
  width: 100%;
  font-family: var(--font);
  color: var(--now2-ink-soft);
  font-size: 15px;
  padding: 18px 0;
  border-top: 1px solid var(--now2-hairline);
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: none;
  text-align: left;
}

button.now-calm-line-action {
  cursor: pointer;
  transition: color 0.12s;
}

button.now-calm-line-action:hover,
button.now-calm-line-action:focus-visible {
  color: var(--now2-clay);
}

button.now-calm-line-action:focus-visible {
  outline: 2px solid var(--now2-clay);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Info tier: lowest priority of the three (Needs attention > Warnings >
   Info), so it's one flowing sentence rather than another numbered list —
   but still the same hairline-topped row anatomy as every other row in
   this tab (.now-numbered-list > li, .now-calm-line), just without the
   counter number, so it reads as one more block in the same rhythm
   instead of a stray paragraph. */
.now-info-line {
  display: block;
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--now2-ink-soft);
  padding: 18px 0;
  border-top: 1px solid var(--now2-hairline);
}

/* Muted micro-action, deliberately understated — appears after the
   content, not competing with it for attention. */
.now-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--now2-ink-grey);
  cursor: pointer;
  transition: color 0.12s;
}

.now-copy-btn:hover,
.now-copy-btn:focus-visible {
  color: var(--now2-ink-soft);
}

@media (max-width: 640px) {
  .now-band-top {
    padding: 28px 16px 24px;
  }

  .now-band-bottom {
    padding: 28px 16px 28px;
  }

  .now-headline {
    font-size: 34px;
    letter-spacing: -0.005em;
  }

  .now-lede {
    font-size: 15.5px;
  }

  .now-acts {
    flex-direction: column;
    gap: 20px;
  }
}

/* ===================== ASK ===================== */

/* Same format as #nowContent: one flat white surface shaped with the
   app's own CornerKit .squircle (see index.html/applySquircle()), not a
   border. Unlike #nowContent's height (driven by its own content),
   #askContent's height is fixed to the viewport and never changes after
   its shell is built, so renderAskView() only needs to call
   applySquircle() once, not on every message/conversation update. */
#askContent {
  height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-squircle);
  padding: 28px 32px;
}

.ask-layout {
  height: 100%;
  min-height: 0;
  width: 100%;
  display: flex;
}

/* ---- conversation list pane ---- */

.ask-sidebar {
  width: 252px;
  flex: 0 0 252px;
  padding-right: 20px;
  margin-right: 32px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ask-new-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 10px;
  border: none;
  border-radius: var(--radius-md);
  /* --surface-2, not --surface — #askContent itself is --surface now, so
     a same-color button would need its old border just to be visible.
     A tinted fill instead of a line does the same job. */
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.14s;
}

.ask-new-btn:hover {
  background: var(--surface-hover);
}

/* Active/Archive switch — the shared sf-tab pill, same as States/Notifications,
   but stretched to fill the sidebar's width and split evenly between the two
   tabs instead of sitting content-width against the left edge. renderPillTabs
   collapses the whole bar to nothing when there's only one item, i.e. no
   archived chats to switch to yet. */
.ask-conv-tabs {
  width: 100%;
  margin-bottom: 14px;
}

.ask-conv-tabs .sf-tab {
  flex: 1 1 0;
  justify-content: center;
}

.ask-conv-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ask-conv-empty {
  font-size: 12.5px;
  color: var(--text-tertiary);
  padding: 8px 4px;
  line-height: 1.5;
}

/* Ghost rows shaped like .ask-conv-item, shown in #askConvList instead of
   .ask-conv-empty's bare sentence when there are no chats yet — the
   sidebar shouldn't look barren next to the empty-screen card in the main
   pane. Not blurred like .empty-screen-skeleton: this is the sidebar's own
   real content region, not a background layer behind something else. */
.ask-conv-list-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 8px 8px 10px;
}

.ask-conv-item-skeleton {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ask-conv-group + .ask-conv-group {
  margin-top: 14px;
}

.ask-conv-group-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding: 0 8px 6px 10px;
}

.ask-conv-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s;
}

.ask-conv-item:hover {
  background: var(--surface-hover);
}

.ask-conv-item.is-active {
  background: var(--surface-2);
}

.ask-conv-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ask-conv-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ask-conv-time {
  font-size: 11px;
  color: var(--text-tertiary);
}

.ask-conv-archive-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.ask-conv-item:hover .ask-conv-archive-btn {
  display: flex;
}

.ask-conv-archive-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* ---- chat pane ---- */

.ask-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ask-shell {
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.ask-thread-empty {
  flex: 1 1 auto;
  /* Every other link in this chain (.ask-layout/.ask-main/.ask-shell) sets
     this — without it, the default flex min-height:auto refuses to shrink
     below .empty-screen's own min-height: calc(100vh - 200px), which
     inflates this whole column past the viewport and pushes
     .ask-sidebar's conversation list out of view — it *looks* empty even
     with real data, because the visible area never reaches it. */
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.ask-thread-empty[hidden] {
  display: none;
}

.ask-empty-subtitle {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-tertiary);
  max-width: 360px;
  margin: 0;
}

.ask-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 24px;
}

.ask-thread[hidden] {
  display: none;
}

.ask-turn {
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 88%;
}

.ask-turn--question {
  align-self: flex-end;
  color: var(--text-primary);
  font-weight: 500;
  background: var(--surface-2);
  padding: 9px 14px;
  border-radius: var(--radius-lg);
}

.ask-turn--answer {
  align-self: flex-start;
  color: var(--text-secondary);
  max-width: 100%;
}

.ask-turn--answer p:last-child {
  margin-bottom: 0;
}

.ask-turn--answer strong {
  color: var(--text-primary);
}

/* Micro-actions live below the content, muted, appearing as a secondary
   affordance — never competing visually with the answer itself. */
.ask-turn-actions {
  display: flex;
  margin-top: 6px;
}

.ask-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-tertiary);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}

.ask-copy-btn:hover,
.ask-copy-btn:focus-visible {
  opacity: 1;
  color: var(--text-secondary);
  background: var(--surface-hover);
}

/* Floating input capsule — deliberately separated from the reading
   column above it, signalling "this is where you act". Fades to
   --surface, not --bg — it sits on #askContent's own white card now, not
   directly on the grey page canvas, so it needs to mask the thread
   scrolling underneath with the same white the card actually is. */
.ask-form-dock {
  flex-shrink: 0;
  padding: 16px 0 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--surface) 40%);
}

.ask-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--surface);
  border: none;
  border-radius: 22px;
  padding: 8px 8px 8px 16px;
  box-shadow: var(--shadow-md);
}

.ask-input {
  flex: 1 1 auto;
  resize: none;
  border: none;
  outline: none;
  background: none;
  padding: 8px 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-primary);
  min-height: 22px;
  max-height: 140px;
}

.ask-input::placeholder {
  color: var(--text-tertiary);
}

.ask-submit-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}

.ask-submit-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.ask-submit-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.ask-submit-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (max-width: 600px) {
  .ask-turn {
    max-width: 96%;
  }

  .ask-layout {
    flex-direction: column;
  }

  .ask-sidebar {
    width: 100%;
    flex: 0 0 auto;
    max-height: 220px;
    padding-right: 0;
    padding-bottom: 14px;
    margin-right: 0;
    margin-bottom: 14px;
  }

  #askContent {
    padding: 20px 16px;
  }
}

/* ===================== FOCUS & ACCESSIBILITY ===================== */

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.page-btn:focus-visible,
.invite-btn:focus-visible,
.auth-submit-btn:focus-visible {
  box-shadow: var(--focus-ring), 0 4px 16px rgba(0,80,200,0.28);
}