/* ============================================================
   Strata Platform — Design Tokens & Shell Styles
   ============================================================ */

/* --- Satoshi font (self-hosted) --- */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Brand font stack (display text only) --- */
:root {
  --font-display: 'Satoshi', -apple-system, 'Helvetica Neue', sans-serif;
}

/* --- Dark theme (default) --- */
:root {
  --bg: #0e0e10;
  --panel: #1a1a2e;
  --panel-2: #15152a;
  --accent: #667eea;
  --accent-soft: rgba(102, 126, 234, 0.13);
  --accent-line: rgba(102, 126, 234, 0.28);
  --project-color: var(--accent);
  /* Per-studio brand accent (mirrors --project-color). Set on the
     documentElement by studio-settings when a studio is active, so
     modals/toasts inherit too. Defaults to --accent. */
  --studio-color: var(--accent);
  --studio-soft:  color-mix(in srgb, var(--studio-color) 14%, transparent);
  --studio-line:  color-mix(in srgb, var(--studio-color) 32%, transparent);
  --studio-wash:  color-mix(in srgb, var(--studio-color) 6%, var(--panel));
  --studio-ink:   #ffffff;
  /* Chevron for .strata-pmgmt-pill native <select>s. CSS variables
   * don't substitute inside a data:url body, so the encoded SVG has
   * to carry a literal color -- defining the whole URL inside the
   * theme token block keeps that literal in the documented allow-list
   * and lets the chevron track theme changes. Encoded stroke matches
   * --text-secondary for this theme. */
  --strata-pmgmt-pill-chevron: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%239ca3af' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --text-primary: #e0e0e0;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
  --input-bg: #16162a;
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.12);
  /* Dev-backend banner foreground. Deliberately dark in BOTH themes -- it
     sits on the amber --warning bar, not on --bg. See platform/dev-banner.js. */
  --dev-banner-fg: #231a00;
  --error: #f87171;
  --error-soft: rgba(248, 113, 113, 0.12);
  --row-hover: rgba(255, 255, 255, 0.03);
  --row-alt: rgba(255, 255, 255, 0.015);
  /* Box brand blue -- used by Box-write affordances (email triage file
     card / batch modal). Brightened for dark-theme legibility; white text
     reads on it. The light-theme value is Box's brand hex. */
  --box-blue: #4b9fff;
  --box-blue-soft: rgba(75, 159, 255, 0.13);
  /* Monospace stack for folder-name previews + job codes. Theme-neutral
     (a font, not a color), defined here so the CSS-token lint resolves it
     without a fallback. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  /* Channel Schedule family provenance tokens (section 2.7 / 2.11.3).
     Modules render left-border indicators referencing these tokens. */
  --strata-provenance-override: #4b9fff;
  --strata-provenance-flag:     #ff6b6b;
  --strata-provenance-changed:  #4ade80;
  /* PDF markup tool default color tokens (overridable per call via
     params.colorTokens). Resolve at paint time so they follow the
     active theme. */
  --strata-markup-primary: #d64545;
  --strata-markup-fill: #ffffff;
  --strata-markup-redaction: #ffffff;
  --strata-markup-text: #111111;
  /* Marker-style highlighter -- saturated yellow so the underlying
     text reads through the 0.4 fill opacity. Both themes use the same
     hex so issued PDFs look identical regardless of which theme the
     designer was working in. */
  --strata-markup-highlight: #ffe24a;
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 52px;
  --panel-radius: 12px;
  --button-radius: 8px;
  --input-height: 36px;
  --transition-speed: 0.2s;
  --transition-fn: cubic-bezier(0.4, 0, 0.2, 1);
  /* Concept Tray scrim/stage tokens (present mode + thumbnail overlays).
     These live here (not in the module's [data-module] block) because hex/
     rgba literals are only allowed in token-declaration blocks; the module
     references them via var(). --ct-accent-2 is the violet end-stop of the
     "All references" dot gradient. Both themes resolve. */
  --ct-stage: #08080c;
  --ct-scrim: rgba(0, 0, 0, 0.45);
  --ct-scrim-strong: rgba(8, 8, 14, 0.55);
  --ct-on-dark: #ffffff;
  --ct-tex: rgba(255, 255, 255, 0.05);
  --ct-accent-2: #9b6dff;
  /* Soft violet fill for the punch-list "verified" status surface (D-v4.2).
     A single low-alpha rgba reads acceptably in both themes, mirroring how
     --ct-accent-2 itself is theme-shared. */
  --ct-accent-2-soft: rgba(155, 109, 255, 0.14);
  /* SD Review Board presence: 6 stable per-user identity colors for the avatar
     roster + the R3 who's-moving outline. Picked client-side by a userId hash so
     a user keeps one color across both surfaces. Defined here (token block) and
     referenced via var(--ct-presence-N) from the module. */
  --ct-presence-1: #5b9dff;
  --ct-presence-2: #4ed6a8;
  --ct-presence-3: #f5b545;
  --ct-presence-4: #f06fb0;
  --ct-presence-5: #a98bff;
  --ct-presence-6: #4fd0e0;
  /* Module Catalog (v4 landing) per-workflow icon-tile tints. Each collection
     gets a distinct, muted hue used as the icon container background behind the
     real module SVG icon. Kept in the token block (literals allowed here) and
     referenced via var() from the landing rows. Dark-theme values are gentle
     translucent-on-dark tones so the white/accent glyph reads cleanly. */
  --catalog-wf-start:   #3a4a6b;
  --catalog-wf-plan:    #33507a;
  --catalog-wf-design:  #5a3d78;
  --catalog-wf-specify: #2f6157;
  --catalog-wf-review:  #7a5230;
  --catalog-wf-studio:  #2f5f6b;
}

/* --- Light theme --- */
[data-theme="light"] {
  --bg: #f5f5f7;
  --panel: #ffffff;
  --panel-2: #fafafc;
  --accent: #4f6ce5;
  --accent-soft: rgba(79, 108, 229, 0.10);
  --accent-line: rgba(79, 108, 229, 0.25);
  --project-color: var(--accent);
  --studio-color: var(--accent);
  --studio-soft:  color-mix(in srgb, var(--studio-color) 10%, transparent);
  --studio-line:  color-mix(in srgb, var(--studio-color) 26%, transparent);
  --studio-wash:  color-mix(in srgb, var(--studio-color) 5%, var(--panel));
  --studio-ink:   #ffffff;
  /* Same chevron, light-theme stroke (matches --text-secondary). */
  --strata-pmgmt-pill-chevron: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%236b7280' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --text-primary: #1a1a2e;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.14);
  --overlay-bg: rgba(0, 0, 0, 0.3);
  /* Channel Schedule family provenance tokens (section 2.7 / 2.11.3). */
  --strata-provenance-override: #2563eb;
  --strata-provenance-flag:     #dc2626;
  --strata-provenance-changed:  #16a34a;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12);
  --input-bg: #f0f0f4;
  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.10);
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.12);
  --dev-banner-fg: #2a1d00;
  --error: #dc2626;
  --error-soft: rgba(220, 38, 38, 0.10);
  --row-hover: rgba(0, 0, 0, 0.025);
  --row-alt: rgba(0, 0, 0, 0.012);
  /* Box brand blue (light theme uses Box's brand hex). */
  --box-blue: #0061d5;
  --box-blue-soft: rgba(0, 97, 213, 0.10);
  /* PDF markup tool tokens -- light theme keeps the same palette so
     designer markup reads identically when reviewed in either theme. */
  --strata-markup-primary: #c93838;
  --strata-markup-fill: #ffffff;
  --strata-markup-redaction: #ffffff;
  --strata-markup-text: #111111;
  --strata-markup-highlight: #ffe24a;
  /* Concept Tray: only the diagonal-hatch thumbnail texture flips for the
     light theme. The present-mode stage stays an intentional dark stage in
     both themes (--ct-stage / --ct-scrim* / --ct-on-dark unchanged). */
  --ct-tex: rgba(0, 0, 0, 0.04);
  /* SD Review Board presence palette -- light-theme variants (deeper for contrast
     on the light board surface); same 6 slots as :root. */
  --ct-presence-1: #2563eb;
  --ct-presence-2: #059669;
  --ct-presence-3: #d97706;
  --ct-presence-4: #db2777;
  --ct-presence-5: #7c3aed;
  --ct-presence-6: #0891b2;
  /* Module Catalog (v4) per-workflow icon-tile tints -- light-theme variants:
     soft pastel washes that keep the icon glyph legible on the light board. */
  --catalog-wf-start:   #dbe3f5;
  --catalog-wf-plan:    #d5e3f7;
  --catalog-wf-design:  #ece0f7;
  --catalog-wf-specify: #d6efe6;
  --catalog-wf-review:  #f6e6d2;
  --catalog-wf-studio:  #d6ecf1;
}

/* --- Reduced motion preference --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-speed: 0s;
  }
}

/* --- Themed scrollbars (tokens resolve per theme) --- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

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

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

*::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-tertiary);
}

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

@media (max-width: 640px) {
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  *::-webkit-scrollbar-thumb {
    border-width: 1px;
    border-radius: 3px;
  }
}

/* ============================================================
   Reset & Base
   ============================================================ */

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

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Display type: brand font for headings and titles */
h1, h2, h3,
.strata-modal-title,
.strata-command-input {
  font-family: var(--font-display);
  letter-spacing: -0.3px;
}

/* ============================================================
   Skip-to-content (accessibility)
   ============================================================ */

.skip-to-content {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 var(--button-radius) 0;
}

.skip-to-content:focus {
  top: 0;
}

/* ============================================================
   Platform Shell Layout
   ============================================================ */

.strata-app {
  display: flex;
  /* 100dvh tracks the dynamic viewport so the bottom of the app stays
     reachable on mobile when the browser URL bar collapses. The plain
     100vh line is the fallback for browsers without dvh; on desktop the
     two are identical, so this is a no-op there. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Establish a positioning context for the absolute-positioned hover
     sidebar (sibling rules below). Without this, .strata-sidebar.mode-hover
     anchors to the viewport and ends up behind the elevation banner
     when .strata-has-elevation-banner pushes .strata-app down 32px. */
  position: relative;
}

/* --- Sidebar --- */

.strata-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-collapsed-width);
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
  position: relative;
}

/* Animate width only when the JS flag is set (not during drag or init) */
.strata-sidebar.animating {
  transition: width var(--transition-speed) var(--transition-fn);
}

.strata-sidebar-header {
  /* padding-left is calibrated so the 32px-wide mark centers in the
     52px rail: (52 - 32) / 2 = 10. Other sides stay at 16. */
  padding: 16px 16px 16px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 57px;
}

.strata-sidebar-mark {
  flex-shrink: 0;
}

.strata-sidebar-header h1 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
}

.strata-sidebar-nav {
  flex: 1;
  padding: 8px 0;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
}

.strata-sidebar-nav li {
  list-style: none;
}

.strata-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.strata-nav-item:hover {
  color: var(--text-primary);
  background: var(--border);
}

.strata-nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.strata-nav-item[aria-current="page"],
.strata-nav-item.active {
  color: var(--text-primary);
  background: var(--border);
  font-weight: 600;
  border-left: 3px solid var(--project-color);
  padding-left: 13px;
}

.strata-nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.strata-nav-item span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata-sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
}

/* --- Sidebar collapse toggle --- */

.strata-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-left: auto;
  transition: color 0.15s, border-color 0.15s;
}

.strata-sidebar-toggle:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

.strata-sidebar-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-speed) var(--transition-fn);
}

/* --- Collapsed sidebar state (driven by JS) --- */

.strata-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

/* Narrow-rail visual state for the pinned-collapsed mode. Hides the
   wordmark, labels, category headers, and footer so only icons show.
   Hover mode uses a different, no-shift pattern (see below) so it is
   NOT included in these selectors -- including it would cause labels
   to pop in/out instead of fading. */
.strata-sidebar.collapsed .strata-sidebar-header h1,
.strata-sidebar.collapsed .strata-sidebar-header > svg:first-child,
.strata-sidebar.collapsed .strata-nav-item span,
.strata-sidebar.collapsed .strata-nav-label,
.strata-sidebar.collapsed .strata-nav-category-header,
.strata-sidebar.collapsed .strata-sidebar-footer {
  display: none;
}

.strata-sidebar.collapsed .strata-sidebar-header {
  justify-content: center;
}

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

.strata-sidebar.collapsed .strata-nav-item[aria-current="page"],
.strata-sidebar.collapsed .strata-nav-item.active {
  border-left: none;
  padding-left: 16px;
}

.strata-sidebar.collapsed .strata-sidebar-toggle svg {
  transform: rotate(180deg);
}

/* --- Hover slide-out sidebar mode (default) ---
   No-shift pattern (matches Supabase): the sidebar content is always
   laid out at the full sidebar-width and the outer box clips to
   sidebar-collapsed-width via `overflow: hidden` on .strata-sidebar.
   .is-hover-open/focus-within widens the outer box so the clip reveals the rest.
   Labels and the toggle button fade with opacity rather than toggling
   `display`, so icons stay anchored and nothing reflows during the
   transition. */

.strata-app.sidebar-mode-hover .strata-sidebar.mode-hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-collapsed-width);
  transition: width var(--transition-speed) var(--transition-fn),
              box-shadow var(--transition-speed) var(--transition-fn);
}

.strata-app.sidebar-mode-hover {
  padding-left: var(--sidebar-collapsed-width);
}

.strata-app.sidebar-mode-hover .strata-sidebar.mode-hover.is-hover-open,
.strata-app.sidebar-mode-hover .strata-sidebar.mode-hover:focus-within,
.strata-app.sidebar-mode-hover .strata-sidebar.mode-hover.has-mode-pop {
  width: var(--sidebar-width);
  box-shadow: var(--shadow);
}

/* Lay every row out at the full sidebar width even when the outer
   container is clipped to the rail width. This pins icon positions. */
.strata-sidebar.mode-hover .strata-sidebar-header,
.strata-sidebar.mode-hover .strata-sidebar-nav,
.strata-sidebar.mode-hover .strata-sidebar-pinned,
.strata-sidebar.mode-hover .strata-sidebar-footer {
  min-width: var(--sidebar-width);
}

/* Fade non-icon affordances (wordmark, labels, footer text, toggle)
   instead of toggling display. The element keeps its laid-out position
   so neighbours never shift. */
.strata-sidebar.mode-hover .strata-sidebar-header h1,
.strata-sidebar.mode-hover .strata-sidebar-toggle,
.strata-sidebar.mode-hover .strata-nav-item span,
.strata-sidebar.mode-hover .strata-sidebar-footer {
  opacity: 0;
  transition: opacity var(--transition-speed) var(--transition-fn);
  pointer-events: none;
}

/* Category headers keep their geometry in hover mode so icons below them do
   not drift when the rail opens. Only opacity changes. */
.strata-sidebar.mode-hover .strata-nav-category-header,
.strata-sidebar.mode-hover .strata-nav-label {
  position: relative;
  color: transparent;
  opacity: 1;
  pointer-events: none;
  transition: color var(--transition-speed) var(--transition-fn);
}

.strata-sidebar.mode-hover .strata-nav-category-header::before,
.strata-sidebar.mode-hover .strata-nav-label::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 50%;
  width: 14px;
  height: 1px;
  border-radius: 999px;
  background: var(--border-strong);
  opacity: 0.65;
  transform: translateY(-50%);
  transition: opacity var(--transition-speed) var(--transition-fn);
}

.strata-sidebar.mode-hover.is-hover-open .strata-sidebar-header h1,
.strata-sidebar.mode-hover.is-hover-open .strata-sidebar-toggle,
.strata-sidebar.mode-hover.is-hover-open .strata-nav-item span,
.strata-sidebar.mode-hover.is-hover-open .strata-sidebar-footer,
.strata-sidebar.mode-hover:focus-within .strata-sidebar-header h1,
.strata-sidebar.mode-hover:focus-within .strata-sidebar-toggle,
.strata-sidebar.mode-hover:focus-within .strata-nav-item span,
.strata-sidebar.mode-hover:focus-within .strata-sidebar-footer,
.strata-sidebar.mode-hover.has-mode-pop .strata-sidebar-header h1,
.strata-sidebar.mode-hover.has-mode-pop .strata-sidebar-toggle,
.strata-sidebar.mode-hover.has-mode-pop .strata-nav-item span,
.strata-sidebar.mode-hover.has-mode-pop .strata-sidebar-footer {
  opacity: 1;
  pointer-events: auto;
}

/* Reveal category headers and section labels when the panel is open. */
.strata-sidebar.mode-hover.is-hover-open .strata-nav-category-header,
.strata-sidebar.mode-hover.is-hover-open .strata-nav-label,
.strata-sidebar.mode-hover:focus-within .strata-nav-category-header,
.strata-sidebar.mode-hover:focus-within .strata-nav-label,
.strata-sidebar.mode-hover.has-mode-pop .strata-nav-category-header,
.strata-sidebar.mode-hover.has-mode-pop .strata-nav-label {
  color: var(--text-secondary);
  pointer-events: auto;
}

.strata-sidebar.mode-hover.is-hover-open .strata-nav-category-header,
.strata-sidebar.mode-hover:focus-within .strata-nav-category-header,
.strata-sidebar.mode-hover.has-mode-pop .strata-nav-category-header {
  color: var(--text-tertiary);
}

.strata-sidebar.mode-hover.is-hover-open .strata-nav-category-header::before,
.strata-sidebar.mode-hover.is-hover-open .strata-nav-label::before,
.strata-sidebar.mode-hover:focus-within .strata-nav-category-header::before,
.strata-sidebar.mode-hover:focus-within .strata-nav-label::before,
.strata-sidebar.mode-hover.has-mode-pop .strata-nav-category-header::before,
.strata-sidebar.mode-hover.has-mode-pop .strata-nav-label::before {
  opacity: 0;
}

/* Tooltip on narrow-rail nav items (collapsed mode only -- hover mode
   reveals labels inline on the same gesture, so a tooltip would
   duplicate the label and fight the fade). */
.strata-nav-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 300;
}

.strata-sidebar.collapsed .strata-nav-item {
  position: relative;
}

.strata-sidebar.collapsed .strata-nav-item[data-tooltip]:hover::after {
  opacity: 1;
}

/* --- Sidebar mode picker popover (anchored to header toggle) --- */

.strata-sidebar-mode-pop {
  position: fixed;
  width: 248px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow);
  z-index: 4000;
  overflow: hidden;
  padding: 8px;
  animation: strata-popover-in var(--transition-speed) var(--transition-fn);
}

.strata-sidebar-mode-pop-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 6px 8px 8px;
}

.strata-sidebar-mode-pop-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.strata-sidebar-mode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  transition: background 0.12s;
}

.strata-sidebar-mode-row:hover {
  background: var(--border);
}

.strata-sidebar-mode-row:focus-visible {
  background: var(--border);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.strata-sidebar-mode-row.is-active {
  background: var(--accent-soft);
}

.strata-sidebar-mode-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.strata-sidebar-mode-row.is-active .strata-sidebar-mode-row-icon {
  color: var(--accent);
}

.strata-sidebar-mode-row-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.strata-sidebar-mode-row-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
}

.strata-sidebar-mode-row-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.25;
}

.strata-sidebar-mode-row-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
  color: var(--accent);
}

/* --- Sidebar drag-resize handle --- */

.strata-sidebar-resize {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 201;
}

.strata-sidebar-resize:hover,
.strata-sidebar-resize.active {
  background: var(--text-tertiary);
  opacity: 0.4;
  transition: opacity 0.15s;
}

/* Hide resize handle when collapsed or in hover mode (only meaningful when pinned wide) */
.strata-sidebar.collapsed .strata-sidebar-resize,
.strata-sidebar.mode-hover .strata-sidebar-resize {
  display: none;
}

/* Prevent text selection during drag */
.strata-app.sidebar-resizing {
  cursor: col-resize;
  user-select: none;
}

/* --- Mobile sidebar overlay --- */

.strata-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: 199;
  animation: strata-overlay-in 0.15s ease-out;
}

.strata-sidebar-backdrop.visible {
  display: block;
}

/* --- Hamburger menu button (narrow viewports only) --- */

.strata-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s;
}

.strata-hamburger:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

.strata-hamburger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.strata-hamburger svg {
  width: 20px;
  height: 20px;
}

/* --- Main area (top bar + content) --- */

.strata-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* --- Top bar --- */

.strata-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 48px;
  min-height: 48px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.strata-topbar.has-project::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--stripe-color, transparent);
  opacity: 0.5;
  transition: opacity var(--transition-speed) var(--transition-fn);
}

.strata-topbar-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.strata-topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.strata-topbar-center .strata-search-btn {
  width: 100%;
  max-width: 480px;
}

.strata-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Legacy select hidden -- replaced by the topbar breadcrumb picker */
.strata-project-selector {
  display: none;
}

/* --- Topbar breadcrumb context --- */

.strata-topbar-breadcrumb {
  display: inline-flex;
  align-items: center;
  min-width: 170px;
  max-width: 420px;
  overflow: visible;
}

.strata-tbc-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  overflow: visible;
  padding: 1px 0 2px;
}

.strata-tbc-context {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
}

.strata-tbc-studio-btn,
.strata-tbc-platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 1px 4px 1px 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-tertiary);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.25;
  text-transform: uppercase;
}

.strata-tbc-studio-btn {
  font-family: var(--font-display);
  cursor: pointer;
}

.strata-tbc-studio-btn:hover {
  color: var(--text-primary);
  background: var(--border);
}

.strata-tbc-studio-btn[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.strata-tbc-studio-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-tbc-sep {
  color: var(--text-tertiary);
  font-size: 9px;
  opacity: 0.45;
  flex-shrink: 0;
}

.strata-tbc-project-btn,
.strata-tbc-module-btn {
  font-family: var(--font-display);
  cursor: pointer;
}

.strata-tbc-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 220px;
  padding: 1px 5px 1px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.strata-tbc-project-btn:hover {
  background: var(--border);
  color: var(--text-primary);
}

.strata-tbc-project-btn[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.strata-tbc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 6px;
  background: var(--project-color);
}

.strata-tbc-project-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-tbc-module-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  align-self: flex-start;
  max-width: 280px;
  padding: 1px 0 2px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.28;
}

.strata-tbc-module-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-tbc-chevron {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  opacity: 0.7;
  transition: transform var(--transition-speed) var(--transition-fn);
}

.strata-tbc-studio-btn[aria-expanded="true"] .strata-tbc-chevron,
.strata-tbc-project-btn[aria-expanded="true"] .strata-tbc-chevron,
.strata-tbc-module-btn[aria-expanded="true"] .strata-tbc-chevron {
  transform: rotate(180deg);
}

.strata-tbc-popover {
  position: fixed;
  top: auto;
  left: auto;
  width: 280px;
  max-width: calc(100vw - 40px);
  box-shadow: var(--shadow-lg);
  z-index: 4000;
  overflow: visible;
}

.strata-tbc-popover::before {
  content: '';
  position: absolute;
  top: -5px;
  left: var(--popover-anchor-x, 22px);
  width: 10px;
  height: 10px;
  background: var(--panel);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}

.strata-module-popover {
  width: 320px;
}

.strata-studio-popover {
  width: 260px;
}

.strata-popover-divider {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* StrataUI.combobox -- body-mounted filtered dropdown (platform/combobox.js). Both
   themes resolve via tokens; sits in the popover band (4000). */
.strata-cb-menu {
  position: fixed;
  z-index: 4000;
  max-width: 440px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--button-radius);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  padding: 4px;
}
.strata-cb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
}
.strata-cb-item.is-active,
.strata-cb-item:hover {
  background: var(--row-hover);
}
.strata-cb-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.strata-cb-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strata-cb-item-sub {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.strata-cb-item-create {
  color: var(--accent);
}
.strata-cb-empty {
  padding: 10px;
  color: var(--text-tertiary);
  font-size: 12.5px;
  text-align: center;
}

.strata-module-item-muted {
  color: var(--text-secondary);
}

.strata-module-category-label {
  padding: 6px 14px 4px 44px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.strata-module-picker-item {
  min-height: 38px;
}

.strata-module-item-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  flex: 0 0 22px;
}

.strata-module-item-icon svg {
  width: 14px;
  height: 14px;
}

.strata-module-picker-item.active .strata-module-item-icon {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* --- Project switcher button --- */

.strata-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--input-height);
  padding: 0 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  max-width: 280px;
  transition: border-color 0.15s, background 0.15s;
}

.strata-project-btn:hover {
  border-color: var(--text-tertiary);
}

.strata-project-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.strata-project-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.strata-project-btn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.strata-project-btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata-project-btn-chevron {
  margin-left: auto;
  transition: transform var(--transition-speed) var(--transition-fn);
}

.strata-project-btn[aria-expanded="true"] .strata-project-btn-chevron {
  transform: rotate(180deg);
}

/* --- Project switcher popover --- */

.strata-project-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
  z-index: 4000;
  overflow: hidden;
  animation: strata-popover-in var(--transition-speed) var(--transition-fn);
}

.strata-project-popover.strata-tbc-popover {
  overflow: visible;
}

@keyframes strata-popover-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.strata-project-search {
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.strata-project-search::placeholder {
  color: var(--text-secondary);
}

.strata-project-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}

.strata-project-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.1s;
}

.strata-project-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-project-item-code {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 11px;
}

.strata-project-item:hover,
.strata-project-item[aria-selected="true"] {
  background: var(--border);
}

.strata-project-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.strata-project-item.active {
  color: var(--text-primary);
  font-weight: 600;
}

.strata-project-item-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
  flex-shrink: 0;
}

.strata-project-item.active .strata-project-item-icon {
  background: var(--project-color);
}

.strata-project-section-label {
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
}

/* Recent Projects section (Slice 4, D11 / section 6.3). Each entry is a row
   flexbox that holds the .strata-project-item switch button (flex:1, row
   click preserves the current module) plus a trailing Resume sibling button
   (opens the recorded project/module pair). Tokens only, both themes. */
.strata-project-recent-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
}

.strata-project-recent-row .strata-project-recent-item {
  flex: 1;
  min-width: 0;
}

.strata-project-recent-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.strata-project-recent-text .strata-project-item-label {
  flex: 0 0 auto;
}

.strata-project-recent-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-project-resume {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.1s, border-color 0.1s;
}

.strata-project-resume:hover {
  background: var(--border);
  border-color: var(--border-strong);
}

.strata-project-resume:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Studio picker popover footer -- "Studio settings" deep-link (Phase 2
   CP3, spec section 5.1). Sits below the studio list inside the
   topbar studio popover; styled as a low-emphasis link button that
   reads as a footer divider rather than another list item. */
.strata-project-popover-footer {
  border-top: 1px solid var(--border);
  padding: 4px;
  margin-top: 4px;
}

.strata-project-popover-footer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--button-radius);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s ease, color 0.12s ease;
}

.strata-project-popover-footer-link:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.strata-project-popover-footer-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.strata-project-popover-footer-link svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.strata-project-empty {
  padding: 16px 14px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.strata-user-info {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none; /* replaced by profile avatar */
}

/* --- Topbar icon button (shared base for undo/redo, sync, nav) --- */

.strata-topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.strata-topbar-btn:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--border);
}

.strata-topbar-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.strata-topbar-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.strata-topbar-btn svg {
  width: 16px;
  height: 16px;
}

/* --- Button group (pairs like undo/redo, back/forward) --- */

.strata-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* --- Sync button --- */

.strata-sync-btn {
  position: relative;
}

.strata-sync-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  border: 1.5px solid var(--panel);
}

.strata-sync-dot.syncing {
  background: var(--success);
  animation: strata-sync-pulse 1s ease-in-out infinite;
}

.strata-sync-dot.error {
  background: var(--error);
}

@keyframes strata-sync-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}

.strata-sync-btn.syncing svg {
  animation: strata-spin 0.8s linear infinite;
}

.strata-sync-btn.sync-click svg {
  animation: strata-spin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Profile avatar --- */

.strata-profile-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--project-color);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  letter-spacing: 0.3px;
  transition: border-color 0.15s;
}

.strata-profile-btn:hover {
  border-color: var(--text-tertiary);
}

.strata-profile-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.strata-profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* --- Profile dropdown --- */

.strata-profile-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
  z-index: 4000;
  overflow: hidden;
  animation: strata-popover-in var(--transition-speed) var(--transition-fn);
}

.strata-profile-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.strata-profile-email {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-profile-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}

.strata-profile-menu {
  padding: 4px 0;
}

.strata-profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.1s;
}

.strata-profile-menu-item:hover {
  background: var(--border);
}

.strata-profile-menu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.strata-profile-menu-item svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.strata-profile-menu-item.danger {
  color: var(--error);
}

.strata-profile-menu-item.danger svg {
  color: var(--error);
}

.strata-profile-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* --- Theme toggle --- */

.strata-theme-toggle {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  color: var(--text-secondary);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s, border-color 0.15s;
}

.strata-theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

.strata-theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.strata-theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* --- Content area --- */

.strata-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  position: relative;
}

.strata-module-container {
  max-width: 1200px;
  margin: 0 auto;
  outline: none; /* focused programmatically for screen readers, not visual keyboard nav */
}

.strata-module-container:has(.strata-bmc) {
  max-width: none;
  height: 100%;
  min-height: 0;
}

/* ============================================================
   Login page
   ============================================================ */

.strata-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
}

.strata-login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
  padding: 40px;
  width: 360px;
  max-width: 90vw;
}

.strata-login-card p {
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-size: 13px;
  text-align: center;
}

/* --- Login splash animation --- */
.strata-login-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.splash-wordmark {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.8px;
  color: var(--text-primary);
  opacity: 0;
  animation: splash-wordIn 0.6s cubic-bezier(0.4, 0, 0.1, 1) 2.3s forwards;
}

/* Act 1: Bars enter bottom-to-top */
.splash-bar {
  opacity: 0;
  transform: translateY(8px);
  animation: splash-barIn 0.55s cubic-bezier(0.4, 0, 0.1, 1) forwards;
}
.splash-bar:nth-child(4) { animation-delay: 0.06s; }
.splash-bar:nth-child(3) { animation-delay: 0.2s; }
.splash-bar:nth-child(2) { animation-delay: 0.34s; }
.splash-bar:nth-child(1) { animation-delay: 0.48s; }

@keyframes splash-barIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Act 2: S-curve materializes */
.splash-wash {
  animation: splash-washOut 1.5s cubic-bezier(0.4, 0, 0.05, 1) 1.1s forwards;
}
@keyframes splash-washOut {
  0%   { opacity: 0.88; }
  100% { opacity: 0; }
}

.splash-s {
  opacity: 0;
  animation: splash-sIn 1.5s cubic-bezier(0.4, 0, 0.05, 1) 1.1s forwards;
}
@keyframes splash-sIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Act 3: Wordmark fades in */
@keyframes splash-wordIn {
  to { opacity: 1; }
}

/* Reduced motion: skip animations, show final state */
@media (prefers-reduced-motion: reduce) {
  .splash-bar { opacity: 1; transform: none; animation: none; }
  .splash-wash { opacity: 0; animation: none; }
  .splash-s { opacity: 1; animation: none; }
  .splash-wordmark { opacity: 1; animation: none; }
}

/* --- Boot splash (full-viewport load mask, reuses .splash-* animation) --- */
.strata-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--bg);
  opacity: 1;
  transition: opacity 0.4s ease;
  /* Pure-CSS dead-man's switch: if boot-splash.js fails to load/execute,
     no JS ever removes this overlay and the 12s JS timeout never arms. This
     animation fires regardless of JS and unblocks the page at 15s (after the
     JS timeout would normally have run), so a failed splash script can never
     permanently trap the user behind a full-screen mask. */
  animation: boot-failsafe 0.4s ease 15s forwards;
}
@keyframes boot-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.strata-boot-splash.is-hiding {
  opacity: 0;
  pointer-events: none;
}
.strata-boot-splash .splash-wordmark {
  font-size: 42px;
}

/* Progress row: stays hidden through the mark animation (~2.9s) and fades
   in just after it ends, so it only ever appears on a slow load. */
.strata-boot-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  opacity: 0;
  animation: boot-progressIn 0.4s ease 3s forwards;
}
@keyframes boot-progressIn {
  to { opacity: 1; }
}

.strata-boot-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: boot-spin 0.8s linear infinite;
}
@keyframes boot-spin {
  to { transform: rotate(360deg); }
}

.strata-boot-status {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Reduced motion: no spin, no delayed reveal. Show the status text right
   away (the mark animation is already skipped) and drop the spinner. */
@media (prefers-reduced-motion: reduce) {
  .strata-boot-progress { opacity: 1; animation: none; }
  .strata-boot-spinner { display: none; }
}

.strata-login-card .form-group {
  margin-bottom: 16px;
}

.strata-login-card label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* --- Onboarding overlay --- */
.strata-onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500; /* above tour (10000) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: onboard-fadeIn 0.4s ease-out;
}

.strata-onboarding-overlay .strata-onboarding-card {
  animation: onboard-cardIn 0.5s cubic-bezier(0.4, 0, 0.1, 1);
}

.strata-onboarding-exit {
  animation: onboard-fadeOut 0.3s ease-in forwards;
}

.strata-onboarding-exit .strata-onboarding-card {
  animation: onboard-cardOut 0.3s ease-in forwards;
}

@keyframes onboard-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes onboard-fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes onboard-cardIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes onboard-cardOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px) scale(0.98); } }

.strata-onboarding-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
  padding: 40px;
  width: 400px;
  max-width: 90vw;
  text-align: center;
}

.strata-onboarding-card h2 {
  margin-bottom: 4px;
}

.strata-onboarding-card .text-secondary {
  margin-bottom: 24px;
}

.strata-onboarding-card .form-group {
  text-align: left;
}

.onboard-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.onboard-studio-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.onboard-studio-pill {
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.onboard-studio-pill:hover {
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}

.onboard-studio-pill.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .strata-onboarding-overlay,
  .strata-onboarding-overlay .strata-onboarding-card,
  .strata-onboarding-exit,
  .strata-onboarding-exit .strata-onboarding-card {
    animation: none;
  }
}

.btn-microsoft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-microsoft:hover {
  background: var(--hover);
  border-color: var(--border-strong);
}

.btn-microsoft:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.strata-login-error {
  color: var(--error);
  font-size: 13px;
  margin-bottom: 12px;
  display: none;
}

.strata-login-error.visible {
  display: block;
}

/* --- OAuth consent (authenticated, shell-isolated) --- */

.strata-oauth-consent-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  background: var(--bg);
}

.strata-oauth-consent-card {
  width: min(520px, 100%);
  padding: 36px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
}

.strata-oauth-consent-brand {
  margin-bottom: 28px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.strata-oauth-consent-eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.strata-oauth-consent-card h1 {
  margin: 0 0 10px;
  color: var(--text-primary);
  font-size: 24px;
}

.strata-oauth-consent-summary,
.strata-oauth-consent-loading,
.strata-oauth-consent-note,
.strata-oauth-consent-fatal p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.strata-oauth-consent-summary { margin: 0 0 22px; }
.strata-oauth-consent-loading { margin: 0; }
.strata-oauth-consent-note { margin: 18px 0; }

.strata-oauth-consent-details {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.strata-oauth-consent-details div {
  min-width: 0;
}

.strata-oauth-consent-details dt,
.strata-oauth-consent-scopes h2 {
  margin: 0 0 3px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.strata-oauth-consent-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 13px;
}

.strata-oauth-consent-scopes {
  margin-top: 18px;
}

.strata-oauth-consent-scopes ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.strata-oauth-consent-scopes li {
  padding: 4px 9px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
}

.strata-oauth-consent-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.strata-oauth-consent-actions button {
  min-width: 92px;
  touch-action: manipulation;
}

.strata-oauth-consent-fatal .btn-secondary {
  display: inline-flex;
  margin-top: 12px;
  text-decoration: none;
}

/* ============================================================
   Component classes
   ============================================================ */

/* --- Panel --- */

.strata-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
  position: relative;
  border-top: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* --- Buttons --- */

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-studio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--input-height);
  padding: 0 16px;
  border-radius: var(--button-radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-primary:hover {
  filter: brightness(1.12);
}

.btn-primary:active {
  filter: brightness(0.92);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--border);
  border-color: var(--text-tertiary);
}

.btn-danger {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
}

.btn-danger:hover {
  filter: brightness(1.12);
}

.btn-danger:active {
  filter: brightness(0.92);
}

/* Studio-accented primary action -- uses the per-studio --studio-color
   token so the CTA picks up the active studio's brand. Falls back to
   --accent when no studio is active (token default). */
.btn-studio {
  background: var(--studio-color);
  color: var(--studio-ink);
  border-color: var(--studio-color);
}

.btn-studio:hover {
  filter: brightness(1.08);
}

.btn-studio:active {
  filter: brightness(0.92);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-studio:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-studio:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
  pointer-events: none;
}

/* --- Input field --- */

.input-field {
  display: block;
  width: 100%;
  height: var(--input-height);
  padding: 0 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

.input-field:focus {
  border-color: var(--accent);
}

.input-field::placeholder {
  color: var(--text-secondary);
}

/* --- Badge --- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 100px;
  background: var(--border);
  color: var(--text-secondary);
}

.badge-success {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}

.badge-warning {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
}

.badge-error {
  background: color-mix(in srgb, var(--error) 15%, transparent);
  color: var(--error);
}

.badge-info {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

/* --- Tab bar --- */

.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.tab {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  font-weight: 500;
}

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

.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.tab[aria-selected="true"],
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* --- Dropdown --- */

.dropdown {
  display: block;
  width: 100%;
  height: var(--input-height);
  padding: 0 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.dropdown:focus {
  border-color: var(--accent);
}

/* ============================================================
   Toast container
   ============================================================ */

.strata-toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  width: 340px;
  max-width: calc(100vw - 40px);
}

.strata-toast {
  position: relative;
  pointer-events: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 36px 13px 13px;
  color: var(--text-primary);
  animation: strata-toast-in 0.22s var(--transition-fn);
  overflow: hidden;
  min-height: 64px;
}

.strata-toast-stripe {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.strata-toast-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.strata-toast-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-top: 1px;
}

.strata-toast-copy {
  flex: 1;
  min-width: 0;
}

.strata-toast-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
}

.strata-toast-desc {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.strata-toast-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.strata-toast-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  background: var(--border);
}

.strata-toast-action.primary {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.strata-toast-action.undo {
  background: var(--error-soft);
  border-color: var(--error);
  color: var(--error);
}

.strata-toast-action.neutral:hover,
.strata-toast-action.primary:hover,
.strata-toast-action.undo:hover {
  color: var(--text-primary);
}

.strata-toast-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.strata-toast-dismiss:hover {
  background: var(--border);
  color: var(--text-primary);
}

.strata-toast-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--border);
}

.strata-toast-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: var(--accent);
  animation-name: strata-toast-progress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.strata-toast.paused .strata-toast-progress-bar {
  animation-play-state: paused;
}

.strata-toast.toast-success .strata-toast-stripe,
.strata-toast.toast-success .strata-toast-progress-bar {
  background: var(--success);
}

.strata-toast.toast-success .strata-toast-icon {
  background: var(--success-soft);
  color: var(--success);
}

.strata-toast.toast-error .strata-toast-stripe,
.strata-toast.toast-error .strata-toast-progress-bar {
  background: var(--error);
}

.strata-toast.toast-error .strata-toast-icon {
  background: var(--error-soft);
  color: var(--error);
}

.strata-toast.toast-warning .strata-toast-stripe,
.strata-toast.toast-warning .strata-toast-progress-bar {
  background: var(--warning);
}

.strata-toast.toast-warning .strata-toast-icon {
  background: var(--warning-soft);
  color: var(--warning);
}

.strata-toast.toast-info .strata-toast-stripe,
.strata-toast.toast-info .strata-toast-progress-bar {
  background: var(--accent);
}

.strata-toast.removing {
  animation: strata-toast-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes strata-toast-in {
  from { opacity: 0; transform: translateX(24px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes strata-toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); max-height: 160px; }
  to   { opacity: 0; transform: translateX(24px) scale(0.96); max-height: 0; }
}

@keyframes strata-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ============================================================
   Modal / Confirm overlay
   ============================================================ */

.strata-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: strata-overlay-in 0.15s ease-out;
}

@keyframes strata-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.strata-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  min-width: 320px;
  max-width: 560px;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
}

.strata-modal-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.strata-modal-body {
  margin-bottom: 20px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
}

.strata-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Modal section -- visually-separated group inside .strata-modal-body
   (e.g. the project edit modal's Box folder section, Phase 2 CP5).
   Uses a top border instead of a card background so it nests inside
   the existing modal without competing with the form grid above. */
.strata-modal-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.strata-modal-section-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.strata-modal-section-slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Project Box folder section (project edit modal). The state block
   shows the current resolution (override path or "Using studio
   template"); the actions block holds the override / clear buttons. */
.strata-box-folder-state {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.strata-box-folder-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.strata-box-folder-path code {
  display: inline-block;
  padding: 3px 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  word-break: break-all;
}

.strata-box-folder-meta {
  font-size: 12px;
  line-height: 1.5;
}

.strata-box-folder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* History disclosure for the project Box folder section (Phase 2 CP7).
   Compact two-line entries: action + path detail above, actor + when
   below. Collapsed by default; expands on user click. */
.strata-box-folder-history {
  margin-top: 4px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

.strata-box-folder-history > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  user-select: none;
}

.strata-box-folder-history > summary:hover,
.strata-box-folder-history[open] > summary {
  color: var(--text-primary);
}

.strata-box-folder-history-body {
  margin-top: 8px;
}

.strata-box-folder-history-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.strata-box-folder-history-list > li {
  font-size: 12px;
  line-height: 1.5;
  padding-left: 8px;
  border-left: 2px solid var(--border);
}

.strata-box-folder-history-action {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.strata-box-folder-history-detail code {
  display: inline-block;
  padding: 1px 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
}

.strata-box-folder-history-meta {
  font-size: 11px;
  margin-top: 2px;
}

/* ============================================================
   Project Checks (Stage 0 Phase 2 findings framework)
   Topbar blocker badge + compact index + per-row chrome + override modal.
   ============================================================ */

.strata-findings-btn {
  position: relative;
  padding-right: 6px;
}

.strata-findings-btn.empty .strata-findings-count {
  display: none;
}

.strata-findings-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--text-tertiary);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.strata-findings-btn.has-warnings .strata-findings-count {
  background: var(--warning, #f59e0b);
  color: #000;
}

.strata-findings-btn.has-errors .strata-findings-count {
  background: var(--error, #ef4444);
  color: #fff;
}

/* --- Today chip (Launcher + My Day redesign) --- */
/* Persistent My Day affordance in the topbar-right cluster, immediately
   before the file launcher button. Two internal states toggled via the
   data-chip-state attribute (set by platform/launcher.js): "resting"
   shows weekday + date + a task-presence dot; "active" shows a live
   countdown + meeting title when a meeting is <= 60 min away. Both
   themes covered via tokens. Starts display:none in index.html;
   visibility driven by launcher.js. */

.strata-today-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-display);
  user-select: none;
  touch-action: manipulation;
  transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.strata-today-chip[data-chip-state="active"] {
  gap: 7px;
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.strata-today-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* State containers: only one renders at a time. */
.strata-today-chip-resting,
.strata-today-chip-active {
  display: none;
  align-items: center;
  gap: inherit;
}

.strata-today-chip[data-chip-state="resting"] .strata-today-chip-resting {
  display: inline-flex;
}

.strata-today-chip[data-chip-state="active"] .strata-today-chip-active {
  display: inline-flex;
}

.strata-today-chip-day {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.strata-today-chip-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.strata-today-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Hide the presence dot when there are no tasks today (set via a
   modifier class by launcher.js). */
.strata-today-chip-dot.is-empty {
  display: none;
}

.strata-today-chip-countdown {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  flex-shrink: 0;
}

.strata-today-chip-sep {
  width: 1px;
  height: 10px;
  background: var(--accent-line);
  flex-shrink: 0;
}

.strata-today-chip-mtg {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Topbar launcher button (Dock Phase 2) --- */
/* Folder/file icon between Sync and Theme. Visibility is toggled by
   platform/launcher.js based on (a) active project, (b) registered
   providers, (c) provider channels having live handlers. */

.strata-launcher-btn {
  /* Inherits sizing, focus, hover, disabled states from .strata-topbar-btn.
     No extra styling needed today; the rule exists so a future per-state
     hook (e.g. a "new files available" dot) has a target selector. */
}

/* --- Launcher popover (Dock Phase 2 sec 8) --- */
/* z-index 7500 sits between dock panel (7000) and tool overlay (8000).
   Body-mounted via StrataUI.popover (rootClass 'strata-launcher-pop')
   with document.body as the container -- the launcher is platform chrome,
   not a module surface. Both themes covered via tokens. */

.strata-launcher-pop {
  position: fixed;
  z-index: 7500;
  width: 360px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--panel);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  font-size: 13px;
}

.strata-launcher-pop-section + .strata-launcher-pop-section {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 4px;
}

.strata-launcher-pop-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 4px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.strata-launcher-pop-section-body {
  display: flex;
  flex-direction: column;
}

.strata-launcher-pop-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  font: inherit;
  width: 100%;
}

.strata-launcher-pop-entry:hover {
  background: var(--row-hover);
}

.strata-launcher-pop-entry:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.strata-launcher-pop-entry-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  margin-top: 1px;
}

.strata-launcher-pop-entry-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.strata-launcher-pop-entry-label {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata-launcher-pop-entry-sublabel {
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata-launcher-pop-entry-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.strata-launcher-pop-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.strata-launcher-pop-badge.warn {
  background: var(--warning-soft, var(--accent-soft));
  color: var(--warning, var(--accent));
}

.strata-launcher-pop-empty {
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 12px;
}

.strata-launcher-pop-loading {
  padding: 8px 12px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.strata-launcher-pop-error {
  padding: 8px 12px;
  color: var(--error, var(--text-secondary));
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.strata-launcher-pop-error button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--button-radius);
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}

.strata-launcher-pop-error button:hover {
  background: var(--row-hover);
}

.strata-launcher-pop-manage {
  display: block;
  padding: 6px 12px;
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  font: inherit;
}

.strata-launcher-pop-manage:hover {
  background: var(--row-hover);
}

/* --- File launcher tile grid (Launcher + My Day redesign) --- */
/* kind:'files' launcher sections render a flat 2-column tile grid of
   self-labeled launch targets (role label + muted filename + modified
   meta) instead of the flat entry-row list. Both themes via tokens. */

.strata-launcher-file-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 2px 12px 10px;
}

.strata-launcher-file-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent-line);
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  transition: background-color var(--transition-speed);
}

.strata-launcher-file-tile:hover {
  background: var(--row-hover);
}

.strata-launcher-file-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}

.strata-launcher-file-tile-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata-launcher-file-tile-sub {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-launcher-file-tile-meta {
  font-size: 9.5px;
  color: var(--text-tertiary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata-launcher-file-tile-badge {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--warning);
  background: var(--warning-soft);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* --- Tier 1 My Day popover (Launcher + My Day redesign) --- */
/* Body-mounted via StrataUI.popover (rootClass 'strata-today-pop'),
   anchored to the Today chip. Same z-index band (7500) as the launcher
   popover. Compact, zero-navigation My Day surface: date header, next-up
   strip, condensed meeting list, task list with inline complete
   checkboxes, quick-add, and an escalation link to the full dock. Both
   themes via tokens. */

.strata-today-pop {
  position: fixed;
  z-index: 7500;
  width: 300px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-display);
  overflow: hidden;
}

.strata-today-pop-loading {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
}

.strata-today-pop-date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px 8px;
}

.strata-today-pop-date-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.strata-today-pop-date-full {
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.strata-today-pop-nextup {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--accent-soft);
  border-top: 1px solid var(--accent-line);
  border-bottom: 1px solid var(--accent-line);
}

.strata-today-pop-countdown {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  flex-shrink: 0;
}

.strata-today-pop-mtg-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.strata-today-pop-join {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent-line);
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--transition-speed);
}

.strata-today-pop-join:hover {
  background: var(--accent-soft);
}

.strata-today-pop-section {
  padding: 10px 16px 4px;
}

.strata-today-pop-section-head {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.strata-today-pop-empty {
  font-size: 11.5px;
  color: var(--text-tertiary);
  padding: 2px 0 6px;
}

.strata-today-pop-mtg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 5px;
}

.strata-today-pop-mtg-row.is-past {
  opacity: 0.38;
}

.strata-today-pop-mtg-row.is-current {
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
}

.strata-today-pop-mtg-time {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 58px;
}

.strata-today-pop-mtg-name {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-today-pop-task-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 5px;
  transition: opacity var(--transition-speed);
}

.strata-today-pop-task-row.is-completing {
  opacity: 0.4;
}

.strata-today-pop-task-row.is-completing .strata-today-pop-task-title {
  text-decoration: line-through;
}

.strata-today-pop-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  touch-action: manipulation;
  transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.strata-today-pop-check:hover {
  border-color: var(--text-tertiary);
}

.strata-today-pop-check.is-overdue {
  border-color: var(--warning);
}

.strata-today-pop-check.is-rolled {
  border-color: var(--error);
}

.strata-today-pop-check.is-done {
  background: var(--accent);
  border-color: var(--accent);
}

.strata-today-pop-task-title {
  font-size: 12px;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-today-pop-task-meta {
  font-size: 10.5px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.strata-today-pop-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  margin: 4px 16px 8px;
  border-radius: 7px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  cursor: text;
}

.strata-today-pop-add-prefix {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
}

.strata-today-pop-add-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font-display);
}

.strata-today-pop-add-input::placeholder {
  color: var(--text-tertiary);
}

.strata-today-pop-add-input:disabled {
  opacity: 0.5;
}

.strata-today-pop-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 16px 10px;
  touch-action: manipulation;
}

.strata-today-pop-link:hover {
  text-decoration: underline;
}

.strata-findings-panel {
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 5000;
  display: flex;
  flex-direction: column;
}

.strata-findings-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.strata-findings-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.strata-findings-panel-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.strata-findings-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.strata-findings-empty {
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

.strata-check-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.strata-check-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 2px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.strata-check-group-empty {
  padding: 10px 2px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.strata-checks-advisory-toggle {
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  padding: 4px 2px;
  cursor: pointer;
}

.strata-checks-advisory-toggle:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

/* Module sub-group: header naming the module + its check count, with that
   module's type-clusters beneath. Omitted when a section has one module. */
.strata-check-mod {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.strata-check-mod-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

/* Collapsed cluster: one counted, expandable row for N checks of one class. */
.strata-check-cluster {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.strata-check-cluster-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  color: var(--text-primary);
  padding: 9px 10px;
  cursor: pointer;
  touch-action: manipulation;
}

.strata-check-cluster-head:hover {
  background: var(--row-hover);
}

.strata-check-cluster-chev {
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.6;
  flex: 0 0 auto;
}

.strata-check-cluster-desc {
  flex: 1 1 auto;
  font-size: 13px;
  min-width: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.strata-check-cluster-count {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.strata-check-cluster-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.strata-finding {
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panel);
}

.strata-finding[data-acknowledged="true"] {
  opacity: 0.6;
}

.strata-finding.sev-error {
  border-left: 3px solid var(--error, #ef4444);
}

.strata-finding.sev-warning {
  border-left: 3px solid var(--warning, #f59e0b);
}

.strata-finding.sev-info {
  border-left: 3px solid var(--accent);
}

.strata-finding-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}

.strata-finding-badge {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--text-tertiary);
  color: var(--bg);
}

.strata-finding-badge.sev-error {
  background: var(--error, #ef4444);
  color: #fff;
}

.strata-finding-badge.sev-warning {
  background: var(--warning, #f59e0b);
  color: #000;
}

.strata-finding-badge.sev-info {
  background: var(--accent);
  color: var(--bg);
}

.strata-finding-module,
.strata-finding-entity {
  color: var(--text-secondary);
}

.strata-finding-desc {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}

.strata-finding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.strata-finding-actions .btn-secondary {
  font-size: 12px;
  padding: 4px 10px;
}

.strata-finding-ack {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.strata-modal-override {
  width: min(520px, 92vw);
}

.strata-modal-ack-check {
  width: min(460px, 92vw);
}

.strata-finding-override-list {
  margin: 8px 0 12px;
  padding-left: 20px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 13px;
}

.strata-finding-override-list li {
  margin-bottom: 4px;
  line-height: 1.4;
}

.strata-override-reason {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg, var(--panel));
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

/* ============================================================
   Inline finding markers + banners + tooltip
   StrataUI.findingMarker / findingBanner attach these to module DOM
   so problems render at the source, not only in the global panel.
   ============================================================ */

/* Default (out-of-cell) shape: a small severity dot. Used when a module
   attaches a marker to an element that is NOT a grid cell (e.g. a
   header pill, a row label) -- inline-block so it sits next to text. */
.strata-finding-marker {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
  background: var(--text-tertiary);
  outline: none;
  flex-shrink: 0;
}
.strata-finding-marker:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}
.strata-finding-marker.sev-error { background: var(--error, #ef4444); }
.strata-finding-marker.sev-warning { background: var(--warning, #f59e0b); }
.strata-finding-marker.sev-info { background: var(--accent); }

/* In-cell shape: thick left-edge bar that doesn't cover text.
   Modules opt cells into this by adding `.strata-has-finding` alongside
   their normal cell class. The cell becomes a positioning context and
   the marker becomes a full-height bar on the left edge.
   The cell hovers also trigger the tooltip (handler attached in JS) so
   the small bar isn't the only mouse target -- the natural cell area
   surfaces the tooltip too. */
.strata-has-finding {
  position: relative;
  cursor: help;
}
.strata-has-finding > .strata-finding-marker {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  height: auto;
  margin: 0;
  border-radius: 0;
  flex-shrink: initial;
}
/* When the cell is hovered, widen the bar slightly for affordance. */
.strata-has-finding:hover > .strata-finding-marker {
  width: 4px;
}

.strata-finding-tooltip {
  position: fixed;
  z-index: 9500;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
  pointer-events: none;
}
.strata-finding-tooltip.sev-error { border-left: 3px solid var(--error, #ef4444); }
.strata-finding-tooltip.sev-warning { border-left: 3px solid var(--warning, #f59e0b); }
.strata-finding-tooltip.sev-info { border-left: 3px solid var(--accent); }

.strata-finding-tooltip-sev {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.strata-finding-tooltip-desc {
  color: var(--text-primary);
}
.strata-finding-tooltip-actions {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.strata-finding-tooltip-action {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--row-alt);
}

.strata-finding-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.strata-finding-banner.sev-error {
  border-left: 3px solid var(--error, #ef4444);
  background: var(--error-soft, var(--panel-2));
}
.strata-finding-banner.sev-warning {
  border-left: 3px solid var(--warning, #f59e0b);
}
.strata-finding-banner.sev-info {
  border-left: 3px solid var(--accent);
}
.strata-finding-banner-sev {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.strata-finding-banner-desc {
  flex: 1;
  color: var(--text-primary);
}
.strata-finding-banner-actions {
  display: flex;
  gap: 6px;
}
.strata-finding-banner-action {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-primary);
  cursor: pointer;
}
.strata-finding-banner-action:hover {
  background: var(--row-hover);
}

/* ============================================================
   Pre-flight checklist (replaces the override modal at issuance)
   Sectioned list grouped by entity_type + severity, with deep-link
   into the inline marker for each row.
   ============================================================ */

.strata-preflight-modal {
  width: min(560px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.strata-preflight-summary {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.strata-preflight-list {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.strata-preflight-section {
  border-bottom: 1px solid var(--border);
}
.strata-preflight-section:last-child {
  border-bottom: none;
}
.strata-preflight-section-header {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  background: var(--row-alt);
}
.strata-preflight-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.strata-preflight-row:last-child {
  border-bottom: none;
}
.strata-preflight-row.sev-error { border-left: 3px solid var(--error, #ef4444); }
.strata-preflight-row.sev-warning { border-left: 3px solid var(--warning, #f59e0b); }
.strata-preflight-row.sev-info { border-left: 3px solid var(--accent); }
.strata-preflight-row-desc {
  flex: 1;
  color: var(--text-primary);
  line-height: 1.4;
}
.strata-preflight-row-module {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ============================================================
   Conflict resolution modal (ctx.ui.resolveConflict)
   Stage 0 Phase 1: side-by-side merge for OCC conflicts.
   ============================================================ */

.strata-modal-conflict {
  width: min(640px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.strata-conflict-meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.strata-conflict-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.strata-conflict-quick {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.strata-conflict-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  background: var(--panel-subtle, var(--panel));
}

.strata-conflict-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.strata-conflict-choice {
  display: grid;
  grid-template-columns: 18px 56px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px 0;
}

.strata-conflict-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.strata-conflict-value {
  color: var(--text-primary);
  word-break: break-word;
}

.strata-conflict-edit {
  width: 100%;
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--input-bg, var(--panel));
  color: var(--text-primary);
}

.strata-conflict-edit:disabled {
  opacity: 0.5;
}

/* ============================================================
   Command bar
   ============================================================ */

.strata-command-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  /* ABOVE the dock (7000), not the historical 6000.
     The command bar and the Help rail now coexist -- Ctrl+K deliberately no
     longer dismisses Help, because a non-blocking rail should not vanish when you
     search. But at 6000 the bar was created and FOCUSED BEHIND the dock panel:
     survivable while the dock was a narrow desktop rail, unusable at <=768px
     where the panel is nearly full width, and worse on phones where it is a
     bottom drawer covering 85dvh -- you would be typing into an input you cannot
     see. Sits below the launcher popover (7500), which is the control for
     changing dock content, and below tools (8000) and modals (9000). */
  z-index: 7200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
}

.strata-command-bar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
  width: 480px;
  max-width: 90vw;
  overflow: hidden;
}

.strata-command-input {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
}

.strata-command-input::placeholder {
  color: var(--text-secondary);
}

.strata-command-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
}

/* Section group headers */
.strata-command-group {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  user-select: none;
}

.strata-command-group:not(:first-child) {
  margin-top: 4px;
  border-top: none;
  padding-top: 10px;
  background-image: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top;
}

/* Command item row */
.strata-command-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.strata-command-item:hover,
.strata-command-item[aria-selected="true"] {
  background: var(--border);
}

/* Icon container (holds SVG or color dot) */
.strata-command-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

/* Category SVG icons inherit color */
.strata-cmd-icon {
  display: block;
}

/* Project color dot */
.strata-cmd-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Label */
.strata-command-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keyboard shortcut badge */
.strata-command-item-shortcut {
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
  color: var(--text-secondary);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
}

/* Hint text (job code, secondary info) */
.strata-command-item-hint {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}

.strata-command-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

/* ============================================================
   Loading overlay
   ============================================================ */

.strata-loading-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: var(--panel-radius);
  animation: strata-overlay-delayed 0.4s ease-out forwards;
  opacity: 0;
}

/* Branded loading indicator: four stacked bars with graduated widths,
   echoing the Strata logo mark. Uses background layers for each bar.
   300ms delay before appearing -- fast loads never show a spinner,
   slow loads get a smooth branded entrance instead of a flash. */
.strata-spinner {
  width: 32px;
  height: 22px;
  border-radius: 2px;
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat center 0px    / 38% 3px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center 6.3px  / 56% 3px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center 12.7px / 78% 3px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center 19px   / 100% 3px;
  opacity: 0;
  animation: strata-bar-delayed 0.4s ease-out forwards, strata-bar-pulse 1.4s ease-in-out 0.4s infinite;
}

/* Delayed entrance: invisible for 250ms, then fade in over 150ms */
@keyframes strata-bar-delayed {
  0%, 62% { opacity: 0; }
  100%    { opacity: 0.3; }
}

@keyframes strata-bar-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Delayed entrance for loading overlay (matches spinner timing) */
@keyframes strata-overlay-delayed {
  0%, 62% { opacity: 0; }
  100%    { opacity: 1; }
}

/* Rotation keyframe (used by sync button, bulk processing spinner) */
@keyframes strata-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Utility classes
   ============================================================ */

.text-secondary {
  color: var(--text-secondary);
}

.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-error {
  color: var(--error);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Module error state
   ============================================================ */

.strata-module-error {
  padding: 40px;
  text-align: center;
}

.strata-module-error h2 {
  font-size: 18px;
  color: var(--error);
  margin-bottom: 8px;
}

.strata-module-error p {
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* ============================================================
   Sidebar enhancements (Phase 3)
   ============================================================ */

.strata-nav-divider {
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--border) 20%,
    var(--border) 80%,
    transparent
  );
  margin: 8px 16px;
  list-style: none;
}

.strata-nav-label {
  padding: 2px 16px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  list-style: none;
}

/* --- Sidebar category grouping --- */

.strata-nav-category {
  list-style: none;
}

.strata-nav-category-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 16px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: color 0.15s;
}

.strata-nav-category-header:hover {
  color: var(--text-secondary);
}

.strata-nav-category-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.strata-nav-category-chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
  transform: rotate(90deg);
}

.strata-nav-category.collapsed .strata-nav-category-chevron {
  transform: rotate(0deg);
}

.strata-nav-category-items {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.15s ease;
}

.strata-nav-category.collapsed .strata-nav-category-items {
  grid-template-rows: 0fr;
}

.strata-nav-category-items > ul {
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  min-height: 0;
}

.strata-nav-category-items > ul > li {
  list-style: none;
}

/* --- Sidebar pinned items (Store, Admin) --- */

.strata-sidebar-pinned {
  padding: 4px 0 4px;
  border-top: 1px solid var(--border);
  list-style: none;
  flex-shrink: 0;
}

.strata-sidebar-pinned li {
  list-style: none;
}

.strata-sidebar-pinned .strata-nav-item {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 6px 16px;
}

.strata-sidebar-pinned .strata-nav-browse-modules {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 16px;
}

.strata-sidebar-pinned .strata-nav-item:hover {
  color: var(--text-secondary);
}

.strata-sidebar-pinned .strata-nav-browse-modules:hover {
  color: var(--text-primary);
}

.strata-sidebar-pinned .strata-nav-item.active {
  color: var(--text-primary);
}

.strata-sidebar-pinned .strata-nav-browse-modules.active {
  padding-left: 13px;
}

.strata-sidebar-pinned .strata-nav-item svg {
  width: 16px;
  height: 16px;
}

/* --- Collapsed sidebar: flatten categories (show all items as icons) --- */

.strata-sidebar.collapsed .strata-nav-category-items {
  grid-template-rows: 1fr;
}

.strata-sidebar.collapsed .strata-sidebar-pinned {
  border-top: none;
}

/* ============================================================
   navigationV2 -- layered personal sidebar (Slice 2)
   Home / Favorites / Recent modules / Browse modules. Reuses
   .strata-nav-item + existing tokens; only the section labels,
   pin toggle, and a couple of layout wrappers are new. Both
   themes resolve through the shared tokens (no new colors).
   ============================================================ */

/* Non-interactive section header (Favorites / Recent modules). */
.strata-nav-section-label {
  list-style: none;
  padding: 10px 16px 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  cursor: default;
}

/* A favorite / recent row: the nav item plus a trailing pin toggle laid out
   as siblings. position:relative anchors both the pin button and the
   collapsed-mode tooltip (::after) to the row. */
.strata-nav-row {
  list-style: none;
  position: relative;
  display: flex;
  align-items: stretch;
}

.strata-nav-row .strata-nav-item {
  flex: 1 1 auto;
  min-width: 0;
}

/* Star toggle. Hidden until the row is hovered or the button itself is
   keyboard-focused, so the resting state stays calm. */
.strata-nav-pin {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0 8px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.strata-nav-row:hover .strata-nav-pin,
.strata-nav-row:focus-within .strata-nav-pin,
.strata-nav-pin:focus-visible {
  opacity: 1;
}

.strata-nav-pin:hover {
  color: var(--text-primary);
}

.strata-nav-pin:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--button-radius);
}

.strata-nav-pin.is-favorite {
  color: var(--text-tertiary);
}

.strata-nav-row:hover .strata-nav-pin.is-favorite,
.strata-nav-row:focus-within .strata-nav-pin.is-favorite,
.strata-nav-pin.is-favorite:hover,
.strata-nav-pin.is-favorite:focus-visible {
  color: var(--project-color);
}

/* Empty-favorites affordance: a compact "Add favorites" row, not a panel. */
.strata-nav-add-fav {
  color: var(--text-tertiary);
}

.strata-nav-add-fav:hover {
  color: var(--text-primary);
}

/* Collapsed rail: hide section labels (meaningless at icon width) and the pin
   toggles (the rail is view-only; pinning happens in the expanded panel). */
.strata-sidebar.collapsed .strata-nav-section-label,
.strata-sidebar.collapsed .strata-nav-pin {
  display: none;
}

/* Hover mode: keep section-label height stable and fade text only, so icons
   below labels do not move when the rail opens. */
.strata-sidebar.mode-hover .strata-nav-section-label {
  position: relative;
  color: transparent;
  opacity: 1;
  pointer-events: none;
  transition: color var(--transition-speed) var(--transition-fn);
}

.strata-sidebar.mode-hover .strata-nav-section-label::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 50%;
  width: 14px;
  height: 1px;
  border-radius: 999px;
  background: var(--border-strong);
  opacity: 0.65;
  transform: translateY(-50%);
  transition: opacity var(--transition-speed) var(--transition-fn);
}

.strata-sidebar.mode-hover.is-hover-open .strata-nav-section-label,
.strata-sidebar.mode-hover:focus-within .strata-nav-section-label,
.strata-sidebar.mode-hover.has-mode-pop .strata-nav-section-label {
  color: var(--text-tertiary);
  pointer-events: auto;
}

.strata-sidebar.mode-hover.is-hover-open .strata-nav-section-label::before,
.strata-sidebar.mode-hover:focus-within .strata-nav-section-label::before,
.strata-sidebar.mode-hover.has-mode-pop .strata-nav-section-label::before {
  opacity: 0;
}

/* Hover mode: fade the pin toggle at rail rest (with the labels); reveal it
   on row hover once the panel is open. */
.strata-sidebar.mode-hover .strata-nav-pin {
  opacity: 0;
  pointer-events: none;
}

.strata-sidebar.mode-hover.is-hover-open .strata-nav-row:hover .strata-nav-pin,
.strata-sidebar.mode-hover.is-hover-open .strata-nav-row:focus-within .strata-nav-pin,
.strata-sidebar.mode-hover:focus-within .strata-nav-row:hover .strata-nav-pin,
.strata-sidebar.mode-hover:focus-within .strata-nav-row:focus-within .strata-nav-pin,
.strata-sidebar.mode-hover.has-mode-pop .strata-nav-row:hover .strata-nav-pin,
.strata-sidebar.mode-hover.has-mode-pop .strata-nav-row:focus-within .strata-nav-pin {
  opacity: 1;
  pointer-events: auto;
}

/* Collapsed rail: keep only the first three Recent icons so the rail never
   flattens into a 30-icon dump. Recent rows carry .strata-nav-recent and are
   consecutive siblings, so the 4-deep general-sibling chain matches any recent
   preceded by three recents (i.e. the 4th onward). Home, Favorites, and Browse
   always stay. (Recents are already capped at 5 in data; the rail shows 3 per
   section 6.1.) */
.strata-sidebar.collapsed
  .strata-nav-recent ~ .strata-nav-recent ~ .strata-nav-recent ~ .strata-nav-recent {
  display: none;
}

/* --- Sidebar Modules drawer --- */

.strata-modules-drawer-pop {
  position: fixed;
  width: min(560px, calc(100vw - var(--sidebar-collapsed-width) - 24px));
  height: min(720px, calc(100vh - 24px));
  max-height: calc(100vh - 24px);
  background: var(--panel);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
  z-index: 4200;
  overflow: hidden;
  animation: strata-popover-in var(--transition-speed) var(--transition-fn);
}

.strata-modules-drawer {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}

.strata-modules-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.strata-modules-drawer-title {
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-primary);
}

.strata-modules-drawer-count {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.strata-modules-drawer-iconbtn,
.strata-modules-drawer-rowbtn {
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

.strata-modules-drawer-iconbtn {
  width: 30px;
  height: 30px;
  border-radius: var(--button-radius);
}

.strata-modules-drawer-iconbtn:hover,
.strata-modules-drawer-rowbtn:hover {
  color: var(--text-primary);
  background: var(--row-hover);
}

.strata-modules-drawer-iconbtn:focus-visible,
.strata-modules-drawer-rowbtn:focus-visible,
.strata-modules-drawer-filter:focus-visible,
.strata-modules-drawer-row-open:focus-visible,
.strata-modules-drawer-catalog:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.strata-modules-drawer-searchbar {
  margin: 12px 16px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
}

.strata-modules-drawer-searchbar:focus-within {
  border-color: var(--accent);
}

.strata-modules-drawer-searchicon {
  color: var(--text-tertiary);
  display: inline-flex;
}

.strata-modules-drawer-search {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
}

.strata-modules-drawer-search::placeholder {
  color: var(--text-tertiary);
}

.strata-modules-drawer-filters {
  display: flex;
  gap: 6px;
  padding: 0 16px 12px;
  overflow-x: auto;
}

.strata-modules-drawer-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.strata-modules-drawer-filter:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.strata-modules-drawer-filter.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.strata-modules-drawer-filter-count {
  color: var(--text-tertiary);
  font-weight: 700;
}

.strata-modules-drawer-list {
  min-height: 0;
  overflow: auto;
  padding: 0 8px 10px;
}

.strata-modules-drawer-section {
  padding: 6px 0 12px;
}

.strata-modules-drawer-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 6px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.strata-modules-drawer-rows {
  display: grid;
  gap: 2px;
}

.strata-modules-drawer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
}

.strata-modules-drawer-row:hover,
.strata-modules-drawer-row:focus-within {
  background: var(--row-hover);
  border-color: var(--border);
}

.strata-modules-drawer-row-open {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: none;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.strata-modules-drawer-row-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--button-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.strata-modules-drawer-row-icon svg {
  width: 16px;
  height: 16px;
}

.strata-modules-drawer-row-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.strata-modules-drawer-row-title {
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata-modules-drawer-row-tag {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata-modules-drawer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}

.strata-modules-drawer-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
}

.strata-modules-drawer-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.strata-modules-drawer-rowbtn {
  width: 28px;
  height: 28px;
  border-radius: var(--button-radius);
}

.strata-modules-drawer-rowbtn.is-favorite {
  color: var(--text-tertiary);
}

.strata-modules-drawer-rowbtn.is-favorite:hover,
.strata-modules-drawer-rowbtn.is-favorite:focus-visible {
  color: var(--accent);
}

.strata-modules-drawer-rowbtn:disabled {
  opacity: 0.35;
  cursor: default;
}

.strata-modules-drawer-rowbtn:disabled:hover {
  color: var(--text-tertiary);
  background: transparent;
}

.strata-modules-drawer-foot {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
}

.strata-modules-drawer-catalog {
  width: 100%;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel-2);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.strata-modules-drawer-catalog:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.strata-modules-drawer-catalog-icon {
  display: inline-flex;
}

.strata-modules-drawer-catalog-icon svg {
  width: 16px;
  height: 16px;
}

.strata-modules-drawer-empty {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 42px 24px;
  text-align: center;
}

.strata-modules-drawer-empty-title {
  color: var(--text-secondary);
  font-size: 13.5px;
}

/* --- Store category labels --- */

.strata-store-category-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  padding: 16px 0 4px;
}

.strata-store-category-label:first-child {
  padding-top: 0;
}

/* ============================================================
   Module Library (Phase 3)
   ============================================================ */

.strata-store-view {
  max-width: 960px;
}

.strata-store-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.strata-store-header h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: -0.4px;
}

.strata-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.strata-store-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--transition-speed) var(--transition-fn),
              box-shadow var(--transition-speed) var(--transition-fn);
}

.strata-store-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.strata-store-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.strata-store-card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: var(--button-radius);
  color: var(--accent);
  flex-shrink: 0;
}

.strata-store-card-icon svg {
  width: 20px;
  height: 20px;
}

.strata-store-card-meta h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.strata-store-card-meta span {
  font-size: 12px;
}

.strata-store-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.strata-store-deps {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.strata-store-card-actions {
  margin-top: auto;
  padding-top: 4px;
}

.strata-store-empty {
  padding: 48px;
  text-align: center;
  color: var(--text-secondary);
}

.strata-store-empty::before {
  content: '';
  display: block;
  width: 64px;
  height: 44px;
  margin: 0 auto 16px;
  opacity: 0.12;
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat center 0px    / 38% 5px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center 13px   / 56% 5px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center 26px   / 78% 5px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center 39px   / 100% 5px;
}

.strata-store-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 24px 0 12px;
  letter-spacing: -0.1px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.strata-store-section-title:first-child {
  margin-top: 0;
}

/* ============================================================
   Module Catalog (Slice 5c) -- navigation launcher + LEARN detail
   ============================================================ */

.strata-catalog {
  max-width: 1080px;
}

/* ---- Landing header ---- */

.strata-catalog-head {
  padding: 4px 0 6px;
}

.strata-catalog-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  margin: 0;
}

.strata-catalog-subtitle {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 3px 0 16px;
}

.strata-catalog-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 11px 14px;
}

.strata-catalog-searchbar:focus-within {
  border-color: var(--accent);
}

.strata-catalog-search-icon {
  color: var(--text-tertiary);
  flex: none;
}

.strata-catalog-search {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
}

.strata-catalog-search::placeholder {
  color: var(--text-tertiary);
}

.strata-catalog-slash {
  font-size: 11px;
  color: var(--text-tertiary);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 2px 7px;
  flex: none;
}

/* Workflow anchor chips */
.strata-catalog-anchors {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.strata-catalog-anchor {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-speed) var(--transition-fn),
              color var(--transition-speed) var(--transition-fn),
              border-color var(--transition-speed) var(--transition-fn);
}

.strata-catalog-anchor:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.strata-catalog-anchor.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

.strata-catalog-anchor:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- Workflow sections (v4 calm launcher) ---- */

.strata-catalog-section {
  margin-top: 38px;
}

.strata-catalog-sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 11px;
  margin: 0 0 6px;
  border-bottom: 1px solid var(--border);
}

.strata-catalog-sec-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.strata-catalog-sec-count {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Two-column launcher rows; columnar so indicators/actions align */
.strata-catalog-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 40px;
}

/* Row = the Open target. Columnar grid: icon | main | right. At rest it is
   quiet; on hover / :focus-within it lifts and swaps the right indicator for
   the action cluster. */
.strata-catalog-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--panel-radius);
  border: 1px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-speed) var(--transition-fn),
              border-color var(--transition-speed) var(--transition-fn);
}

.strata-catalog-row:hover,
.strata-catalog-row:focus-within {
  background: var(--row-hover);
  border-color: var(--border);
}

.strata-catalog-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.strata-catalog-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex: none;
}

.strata-catalog-row-icon svg {
  width: 17px;
  height: 17px;
}

.strata-catalog-row-main {
  min-width: 0;
}

.strata-catalog-row-name {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

.strata-catalog-row-tag {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Right column: rest indicator OR (on hover/focus) the action cluster. */
.strata-catalog-row-right {
  flex: none;
  justify-self: end;
}

/* Rest indicator: a quiet filled star (pinned) or a lock (managed). */
.strata-catalog-row-ind {
  display: flex;
  align-items: center;
  min-height: 30px;
  font-size: 15px;
}

.strata-catalog-ind-star {
  color: var(--accent);
  line-height: 1;
}

/* Action cluster: hidden at rest, revealed on row hover / :focus-within so it
   is keyboard reachable, not hover-only. */
.strata-catalog-row-act {
  display: none;
  align-items: center;
  gap: 14px;
}

.strata-catalog-row:hover .strata-catalog-row-ind,
.strata-catalog-row:focus-within .strata-catalog-row-ind {
  display: none;
}

.strata-catalog-row:hover .strata-catalog-row-act,
.strata-catalog-row:focus-within .strata-catalog-row-act {
  display: flex;
}

.strata-catalog-details-lnk {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  touch-action: manipulation;
}

.strata-catalog-details-lnk:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.strata-catalog-details-lnk:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 4px;
}

/* Open is an accent-TEXT button, not a filled accent button. */
.strata-catalog-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  touch-action: manipulation;
}

.strata-catalog-open:hover {
  text-decoration: underline;
}

.strata-catalog-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 4px;
}

/* Pin star toggle inside the action cluster. */
.strata-catalog-pin {
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  padding: 2px;
  cursor: pointer;
  touch-action: manipulation;
  color: var(--text-tertiary);
}

.strata-catalog-pin.on {
  color: var(--accent);
}

.strata-catalog-pin:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 4px;
}

.strata-catalog-empty {
  padding: 40px;
  text-align: center;
}

/* ---- Loading skeleton (first paint, before catalog metadata resolves) ---- */

.strata-catalog-skel-wrap {
  margin-top: 26px;
}

.strata-catalog-skel {
  background: var(--panel-2);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

/* Subtle token-only shimmer sweep. --panel over --panel-2 reads as a muted
   highlight in both themes; the gradient stops use transparent so no literal
   colors are introduced. */
.strata-catalog-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--panel), transparent);
  transform: translateX(-100%);
  animation: strata-catalog-shimmer 1.4s ease-in-out infinite;
}

@keyframes strata-catalog-shimmer {
  100% { transform: translateX(100%); }
}

.strata-catalog-skel-title {
  display: inline-block;
  width: 160px;
  height: 12px;
}

.strata-catalog-skel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
}

.strata-catalog-skel-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex: none;
}

.strata-catalog-skel-line {
  height: 14px;
  flex: 1;
  max-width: 240px;
}

@media (prefers-reduced-motion: reduce) {
  .strata-catalog-skel::after {
    animation: none;
  }
}

/* ============================================================
   Module Catalog detail (LEARN) -- full page
   ============================================================ */

.strata-catalog-detail {
  max-width: 920px;
}

.strata-catalog-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 13px;
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 18px;
  cursor: pointer;
  touch-action: manipulation;
}

.strata-catalog-back:hover {
  color: var(--text-primary);
}

.strata-catalog-dloading {
  padding: 16px 0;
}

/* Hero */
.strata-catalog-dhero {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.strata-catalog-dhero-l {
  flex: 1;
  min-width: 0;
}

.strata-catalog-dicon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 12px;
}

.strata-catalog-dicon svg {
  width: 22px;
  height: 22px;
}

.strata-catalog-dtitle {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  margin: 0;
}

.strata-catalog-dtag {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 8px 0 14px;
}

.strata-catalog-dbadges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.strata-catalog-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text-secondary);
}

.strata-catalog-dactions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.strata-catalog-dopen {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--studio-ink);
  border: 1px solid var(--accent);
  cursor: pointer;
  touch-action: manipulation;
}

.strata-catalog-dopen:hover {
  filter: brightness(1.12);
}

.strata-catalog-dpin {
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  touch-action: manipulation;
}

.strata-catalog-dpin.is-pinned {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.strata-catalog-dpin-star {
  font-size: 14px;
  line-height: 1;
}

.strata-catalog-dhero-r {
  width: 360px;
  flex: none;
}

.strata-catalog-dshot {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  display: block;
}

/* Sections */
.strata-catalog-dsec {
  margin-top: 34px;
}

.strata-catalog-dsec-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.strata-catalog-dsummary {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 640px;
  margin: 0;
}

.strata-catalog-doutcomes {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  max-width: 680px;
}

.strata-catalog-doutcomes li {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.strata-catalog-doutcomes li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 7px;
  flex: none;
}

/* Workflow step cards */
.strata-catalog-dsteps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 760px;
}

.strata-catalog-dstep {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.strata-catalog-dstep-n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
}

.strata-catalog-dstep-t {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.strata-catalog-dstep-d {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Gallery */
.strata-catalog-dgallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 760px;
}

.strata-catalog-dgshot {
  margin: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--panel-2);
}

.strata-catalog-dgshot img {
  width: 100%;
  height: auto;
  display: block;
}

.strata-catalog-dgshot figcaption {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Works-with chips */
.strata-catalog-dchips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.strata-catalog-dchip {
  font-size: 13px;
  color: var(--text-primary);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
}

/* Two-column block (works-with + access) */
.strata-catalog-dcols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  max-width: 760px;
}

.strata-catalog-dkv {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

.strata-catalog-dkv b {
  color: var(--text-primary);
  font-weight: 600;
}

.strata-catalog-dsupport {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}

.strata-catalog-dlnk {
  font-size: 13px;
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.strata-catalog-dlnk:hover {
  text-decoration: underline;
}

/* ============================================================
   Admin Panel (Phase 3)
   ============================================================ */

.strata-admin-view {
  max-width: 960px;
}

.strata-admin-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.strata-admin-header h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: -0.4px;
}

.strata-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.strata-admin-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 80%, var(--bg));
}

.strata-admin-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  transition: background 0.1s;
}

/* Subtle alternating row tint for scanability */
.strata-admin-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--border) 40%, transparent);
}

.strata-admin-table tr:hover td {
  background: color-mix(in srgb, var(--border) 80%, transparent);
}

/* ============================================================
   Sidebar Editor (Admin Panel)
   ============================================================ */

.sbe-container {
  padding: 8px 0;
}

.sbe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
}

.sbe-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  padding: 8px;
}

.sbe-section {
  border-radius: 6px;
}

.sbe-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 4px;
}

.sbe-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  flex: 1;
}

.sbe-category-header {
  cursor: grab;
}

.sbe-category-header:active {
  cursor: grabbing;
}

.sbe-cat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}

.sbe-cat-btn:hover {
  background: var(--border);
  color: var(--text-primary);
}

.sbe-cat-btn-danger:hover {
  color: var(--error);
}

.sbe-cat-btn-active {
  background: var(--accent);
  color: var(--bg-primary);
}

.sbe-cat-btn-active:hover {
  background: var(--accent);
  color: var(--bg-primary);
  opacity: 0.85;
}

.sbe-module-list {
  min-height: 8px;
  padding: 0 4px 4px;
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s;
  border: 1px dashed transparent;
}

.sbe-module-list.sbe-drop-active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: var(--accent);
}

.sbe-module {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--panel);
  border: 1px solid var(--border);
  margin-top: 2px;
  cursor: grab;
  transition: opacity 0.15s, box-shadow 0.15s;
}

.sbe-module:active {
  cursor: grabbing;
}

.sbe-module-fixed {
  cursor: default;
  opacity: 0.5;
  padding-left: 28px;
}

.sbe-module.sbe-dragging {
  opacity: 0.3;
}

.sbe-grip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.sbe-module-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.sbe-module-icon svg {
  width: 14px;
  height: 14px;
}

.sbe-module-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sbe-module-stage {
  flex-shrink: 0;
  font-size: 9px;
}

.sbe-empty {
  padding: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
  font-style: italic;
}

.sbe-add-category {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.sbe-add-category:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.sbe-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.sbe-fixed {
  opacity: 0.5;
  pointer-events: none;
}

.sbe-category.sbe-dragging {
  opacity: 0.3;
}

.sbe-category.sbe-drop-above {
  box-shadow: 0 -2px 0 0 var(--accent);
}

.sbe-category.sbe-drop-below {
  box-shadow: 0 2px 0 0 var(--accent);
}

/* ============================================================
   View Transition Animations
   ============================================================ */

/* Fade-up entrance for module content */
.strata-view-enter {
  animation: strata-view-enter var(--transition-speed) var(--transition-fn);
}

@keyframes strata-view-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade-out for module content being replaced */
.strata-view-exit {
  animation: strata-view-exit calc(var(--transition-speed) * 0.6) var(--transition-fn) forwards;
}

@keyframes strata-view-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* ============================================================
   Responsive Breakpoints
   ============================================================ */

/* --- Narrow: < 768px (mobile overlay sidebar) --- */
@media (max-width: 768px) {
  .strata-hamburger {
    display: flex;
  }

  .strata-sidebar-toggle,
  .strata-sidebar-resize {
    display: none !important;
  }

  /* Mobile uses the existing translate-overlay flow regardless of selected
     desktop mode. Undo the .sidebar-mode-hover gutter and force-reset
     position/width for all three sidebar modes. */
  .strata-app.sidebar-mode-hover {
    padding-left: 0;
  }

  /* Override any JS-set width; sidebar is always full-width overlay */
  .strata-sidebar,
  .strata-sidebar.mode-hover,
  .strata-app.sidebar-mode-hover .strata-sidebar.mode-hover {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width) !important;
    transform: translateX(-100%);
    transition: transform var(--transition-speed) var(--transition-fn) !important;
    box-shadow: none;
  }

  /* Reset narrow-rail state so overlay is always fully readable */
  .strata-sidebar.collapsed,
  .strata-sidebar.mode-hover {
    width: var(--sidebar-width) !important;
  }

  .strata-sidebar.collapsed .strata-sidebar-header h1,
  .strata-sidebar.collapsed .strata-sidebar-header > svg:first-child,
  .strata-sidebar.collapsed .strata-nav-item span,
  .strata-sidebar.collapsed .strata-nav-label,
  .strata-sidebar.collapsed .strata-nav-category-header,
  .strata-sidebar.collapsed .strata-sidebar-footer {
    display: block;
  }

  .strata-sidebar.collapsed .strata-nav-category-header {
    display: flex;
  }

  .strata-sidebar.collapsed .strata-nav-item span {
    display: inline;
  }

  /* Force-reveal the elements that mode-hover fades on desktop;
     the mobile overlay is always full-width so labels must show. */
  .strata-sidebar.mode-hover .strata-sidebar-header h1,
  .strata-sidebar.mode-hover .strata-nav-item span,
  .strata-sidebar.mode-hover .strata-nav-label,
  .strata-sidebar.mode-hover .strata-nav-section-label,
  .strata-sidebar.mode-hover .strata-nav-category-header,
  .strata-sidebar.mode-hover .strata-sidebar-footer {
    opacity: 1 !important;
    pointer-events: auto !important;
    max-height: none !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .strata-sidebar.mode-hover .strata-nav-label {
    color: var(--text-secondary) !important;
  }

  .strata-sidebar.mode-hover .strata-nav-section-label,
  .strata-sidebar.mode-hover .strata-nav-category-header {
    color: var(--text-tertiary) !important;
  }

  .strata-sidebar.mode-hover .strata-nav-label::before,
  .strata-sidebar.mode-hover .strata-nav-section-label::before,
  .strata-sidebar.mode-hover .strata-nav-category-header::before {
    opacity: 0 !important;
  }

  /* min-width: var(--sidebar-width) on rows is harmless at the mobile
     overlay width (also 220) but reset for clarity. */
  .strata-sidebar.mode-hover .strata-sidebar-header,
  .strata-sidebar.mode-hover .strata-sidebar-nav,
  .strata-sidebar.mode-hover .strata-sidebar-pinned,
  .strata-sidebar.mode-hover .strata-sidebar-footer {
    min-width: 0;
  }

  /* Restore active indicator in mobile overlay (mode class stays but sidebar is full-width) */
  .strata-sidebar.collapsed .strata-nav-item[aria-current="page"],
  .strata-sidebar.collapsed .strata-nav-item.active,
  .strata-sidebar.mode-hover .strata-nav-item[aria-current="page"],
  .strata-sidebar.mode-hover .strata-nav-item.active {
    border-left: 3px solid var(--project-color);
    padding-left: 13px;
  }

  .strata-sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: var(--shadow);
  }

  .strata-topbar {
    padding: 0 12px;
    gap: 6px;
  }

  .strata-topbar-right {
    gap: 6px;
  }

  /* Hide less-critical controls on narrow */
  .strata-btn-group.nav-history {
    display: none;
  }

  .strata-content {
    padding: 12px;
  }

  .strata-topbar-breadcrumb {
    min-width: 140px;
    max-width: 260px;
  }

  .strata-tbc-project-btn {
    max-width: 160px;
  }

  .strata-tbc-popover {
    max-width: calc(100vw - 24px);
  }

  .strata-store-grid {
    grid-template-columns: 1fr;
  }

  /* Module Catalog: stack launcher rows to one column, stack the detail hero,
     and grow touch targets at phone width. */
  .strata-catalog-rows {
    grid-template-columns: 1fr;
  }

  .strata-catalog-search {
    font-size: 16px; /* prevent iOS input zoom */
  }

  .strata-catalog-open,
  .strata-catalog-pin,
  .strata-catalog-anchor,
  .strata-catalog-details-lnk {
    min-height: 44px;
  }

  .strata-catalog-dhero {
    flex-direction: column;
  }

  .strata-catalog-dhero-r {
    width: 100%;
  }

  .strata-catalog-dsteps,
  .strata-catalog-dgallery {
    grid-template-columns: 1fr;
  }

  .strata-catalog-doutcomes,
  .strata-catalog-dcols {
    grid-template-columns: 1fr;
  }

  .strata-catalog-dopen,
  .strata-catalog-dpin,
  .strata-catalog-dlnk {
    min-height: 44px;
  }

  .strata-admin-table {
    display: block;
    overflow-x: auto;
  }
}

/* --- Medium: hide user email to save space --- */
/* --- Medium: 768px-1024px (tighter spacing) --- */
@media (max-width: 1024px) {
  .strata-user-info {
    display: none;
  }

  .strata-topbar {
    gap: 8px;
  }

  .strata-topbar-left,
  .strata-topbar-right {
    gap: 8px;
  }

  .strata-project-btn {
    max-width: 220px;
  }

  .strata-content {
    padding: 16px;
  }
}

/* ============================================================
   Management Views (Phase 4: Studios, Projects, Users)
   ============================================================ */

.strata-mgmt-view {
  max-width: 960px;
}

.strata-view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.strata-view-header h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: -0.4px;
}

.strata-view-header .text-secondary {
  font-size: 13px;
  margin-top: 2px;
}

.strata-view-header .btn-primary {
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 2px;
}

.strata-empty-state {
  padding: 56px 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  position: relative;
}

/* Ghosted bar motif behind empty state text */
.strata-empty-state::before {
  content: '';
  display: block;
  width: 64px;
  height: 44px;
  margin: 0 auto 16px;
  opacity: 0.12;
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat center 0px    / 38% 5px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center 13px   / 56% 5px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center 26px   / 78% 5px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center 39px   / 100% 5px;
}

.strata-empty-state p {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
}

/* Card grid for studios */
.strata-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.strata-mgmt-card {
  padding: 20px;
  transition: transform var(--transition-speed) var(--transition-fn),
              box-shadow var(--transition-speed) var(--transition-fn);
}

.strata-mgmt-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.strata-mgmt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.strata-mgmt-card-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.strata-mgmt-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.strata-mgmt-card-meta {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

/* Small avatar row */
.strata-avatar-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.strata-avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--project-color);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}

.strata-avatar-more {
  background: var(--border);
  color: var(--text-secondary);
}

/* Small button variant */
.strata-btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

/* Project group headings */
.strata-project-group {
  margin-bottom: 28px;
}

.strata-project-group:not(:first-child) {
  padding-top: 8px;
}

.strata-group-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--border);
}

/* Color dot -- project identity indicator (rounded square echoes logo bars) */
.strata-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--text-secondary);
  flex-shrink: 0;
}

/* Project color accent on table rows (set via --row-color inline style) */
.strata-admin-table tr[style*="--row-color"] td:first-child {
  border-left: 3px solid var(--row-color, transparent);
}

/* Action cell */
.strata-action-cell {
  white-space: nowrap;
}

/* Check list (studio members, etc) */
.strata-check-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  padding: 6px 0;
  background: var(--input-bg);
}

.strata-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}

.strata-check-item:hover {
  background: var(--border);
}

.strata-check-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Form grid for project modal */
.strata-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.strata-form-grid .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.strata-form-grid .strata-form-grid-full {
  grid-column: 1 / -1;
}

/* Color picker row */
.strata-color-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.strata-color-picker {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  padding: 2px;
  cursor: pointer;
  background: var(--input-bg);
  flex-shrink: 0;
}

/* Floating bulk toolbar */
.strata-bulk-toolbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  animation: strata-toolbar-in 0.2s var(--transition-fn);
}

@keyframes strata-toolbar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.strata-bulk-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  color: var(--text-primary);
}

.strata-bulk-count {
  font-weight: 600;
  white-space: nowrap;
}

.strata-bulk-actions {
  display: flex;
  gap: 6px;
}

.strata-bulk-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--button-radius);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  transition: color 0.15s, background 0.15s;
}

.strata-bulk-close:hover {
  color: var(--text-primary);
  background: var(--border);
}

/* Processing spinner state */
.strata-bulk-toolbar.processing .strata-bulk-actions {
  opacity: 0.5;
  pointer-events: none;
}

.strata-bulk-toolbar.processing .strata-bulk-count::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: strata-spin 0.7s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .strata-bulk-toolbar {
    bottom: 12px;
    left: 12px;
    right: 12px;
    transform: none;
  }

  @keyframes strata-toolbar-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .strata-bulk-toolbar-inner {
    gap: 8px;
    padding: 8px 12px;
  }
}

/* Project color dot in selector */
.strata-project-item-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .strata-card-grid {
    grid-template-columns: 1fr;
  }

  .strata-form-grid {
    grid-template-columns: 1fr;
  }

  .strata-view-header {
    flex-direction: column;
    gap: 12px;
  }
}

/* ============================================================
   Search / Command Bar Trigger Button
   ============================================================ */

.strata-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--input-height);
  padding: 0 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-speed), color var(--transition-speed);
}

.strata-search-btn:hover {
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}

.strata-search-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.strata-search-btn svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.strata-search-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.strata-search-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  font-size: 11px;
  font-family: inherit;
  line-height: 1.4;
  color: var(--text-secondary);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}

@media (max-width: 600px) {
  .strata-search-hint {
    display: none;
  }
}

/* ============================================================
   Help content
   ============================================================
   Help renders inside the platform:help DOCK VIEW (dock panel, z-index
   7000 -- see platform/dock.css). It is no longer a modal: the former
   .strata-help-overlay scrim / .strata-help-panel 380px slide-out /
   .strata-help-header / .strata-help-close chrome was retired with the
   dock migration, and the dock panel now supplies the surface, the
   header + title, the close button, and the slide-in animation.
   Everything below styles the help BODY only, so it works unchanged
   inside the dock's .strata-dock-content scroller.
*/

.strata-help-body {
  padding: 16px 20px;
}

.strata-help-section {
  margin-bottom: 20px;
}

.strata-help-section h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.strata-help-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 12px;
  margin-bottom: 6px;
}

.strata-help-section p {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
}

.strata-help-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.strata-help-shortcut {
  display: flex;
  align-items: center;
  gap: 12px;
}

.strata-help-shortcut dt {
  flex-shrink: 0;
  min-width: 80px;
}

.strata-help-shortcut dt kbd {
  display: inline-block;
  padding: 2px 7px;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.strata-help-shortcut dd {
  font-size: 13px;
  color: var(--text-secondary);
}

.strata-help-list {
  list-style: none;
  padding: 0;
}

.strata-help-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.8;
}

.strata-help-list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.strata-help-list kbd {
  display: inline-block;
  padding: 0 5px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.strata-help-divider {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border) 15%, var(--border) 85%, transparent);
  margin: 16px 0;
}

.strata-help-module p {
  margin-bottom: 8px;
}

/* ============================================================
   Feedback system
   ============================================================ */

.strata-feedback-modal {
  max-width: 600px;
}

/* Segmented control (radio group) */
.strata-feedback-type-group {
  border: none;
  padding: 0;
  margin: 0 0 16px;
}

.strata-feedback-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.strata-segmented {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  overflow: hidden;
}

.strata-segmented-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  background: transparent;
  border-right: 1px solid var(--border);
  transition: background var(--transition-speed) var(--transition-fn),
              color var(--transition-speed) var(--transition-fn);
  user-select: none;
  text-align: center;
}

.strata-segmented-option:last-child {
  border-right: none;
}

.strata-segmented-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.strata-segmented-option:hover {
  background: var(--border);
}

.strata-segmented-option.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  font-weight: 600;
}

/* Feedback textarea */
.strata-feedback-textarea {
  height: auto;
  min-height: 100px;
  padding: 10px 12px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

.strata-feedback-error {
  border-color: var(--error) !important;
  animation: strata-feedback-shake 0.3s ease;
}

@keyframes strata-feedback-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Screenshot paste zone */
.strata-feedback-paste-zone {
  border: 1px dashed var(--border);
  border-radius: var(--button-radius);
  padding: 12px;
  text-align: center;
  cursor: default;
  transition: border-color var(--transition-speed) var(--transition-fn),
              background var(--transition-speed) var(--transition-fn);
}

.strata-feedback-paste-zone:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.strata-feedback-paste-zone.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.strata-feedback-shortcut-hint {
  display: inline-block;
  margin-right: auto;
  padding: 2px 6px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.strata-feedback-paste-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  padding: 6px 0;
  user-select: none;
}

.strata-feedback-preview {
  position: relative;
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  overflow: hidden;
  max-width: 200px;
}

.strata-feedback-preview-img {
  display: block;
  max-width: 200px;
  max-height: 120px;
  object-fit: contain;
}

.strata-feedback-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.strata-feedback-preview-remove:hover {
  color: var(--error);
  border-color: var(--error);
}

/* Diagnostics collapsible */
.strata-feedback-diagnostics {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.strata-feedback-diagnostics summary {
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}

.strata-feedback-diagnostics summary:hover {
  color: var(--text-primary);
}

.strata-feedback-diag-pre {
  margin-top: 8px;
  padding: 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  font-size: 11px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-secondary);
}

/* Feedback cards (user history) */
.strata-feedback-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.strata-feedback-card {
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  overflow: hidden;
}

.strata-feedback-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.strata-feedback-card-header:hover {
  background: var(--border);
}

.strata-feedback-card-type {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  min-width: 70px;
}

.strata-feedback-card-module {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--accent);
  min-width: 80px;
}

.strata-feedback-card-desc {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-feedback-card-date {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-secondary);
}

.strata-feedback-card-detail {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
}

.strata-feedback-card-body p {
  margin-bottom: 8px;
}

.strata-feedback-admin-note {
  margin-top: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--button-radius);
  font-size: 12px;
}

.strata-feedback-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-secondary);
}

.strata-feedback-empty::before {
  content: '';
  display: block;
  width: 64px;
  height: 44px;
  margin: 0 auto 16px;
  opacity: 0.12;
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat center 0px    / 38% 5px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center 13px   / 56% 5px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center 26px   / 78% 5px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center 39px   / 100% 5px;
}

.strata-feedback-empty .btn-secondary {
  margin-top: 12px;
}

/* Admin feedback view */
.strata-feedback-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.strata-feedback-admin-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.strata-feedback-admin-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.strata-feedback-admin-filters .dropdown {
  width: auto;
  min-width: 130px;
  height: 30px;
  font-size: 12px;
}

/* Feedback table (admin) */
.strata-feedback-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.strata-feedback-table th {
  text-align: left;
  padding: 10px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 80%, var(--bg));
  white-space: nowrap;
}

.strata-feedback-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

.strata-feedback-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--border) 40%, transparent);
}

.strata-feedback-table tr:hover td {
  background: color-mix(in srgb, var(--border) 80%, transparent);
}

.strata-feedback-table-desc {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-feedback-status-select {
  width: auto;
  min-width: 110px;
  height: 28px;
  font-size: 12px;
  padding: 0 24px 0 8px;
}

/* Feedback view wrapper */
.strata-feedback-view {
  padding: 20px;
  width: 100%;
  max-width: none;
}

.strata-feedback-view:has(.strata-bmc) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.strata-feedback-view:has(.strata-bmc) .tab-bar {
  flex: 0 0 auto;
}

.strata-feedback-view:has(.strata-bmc) .strata-feedback-view-content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* Build Mission Control board */
.strata-bmc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.strata-bmc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.strata-bmc-header h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.strata-bmc-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.strata-bmc-live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  color: var(--text-secondary);
  background: var(--input-bg);
  font-size: 11px;
  font-weight: 700;
}

.strata-bmc-live-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.strata-bmc-live-status.is-live::before {
  background: var(--success);
}

.strata-bmc-live-status.is-reconnecting::before {
  background: var(--warning);
}

.strata-bmc-live-status.is-polling::before {
  background: var(--error);
}
.strata-bmc-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.strata-bmc-counts span,
.strata-bmc-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: var(--button-radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.strata-bmc-chip-sev {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.strata-bmc-chip-warn {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 46%, var(--border));
  background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.strata-bmc-chip-note {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.strata-bmc-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.strata-bmc-filters .dropdown {
  width: auto;
  min-width: 130px;
  height: 32px;
  font-size: 12px;
}

.strata-bmc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) minmax(320px, 420px);
  gap: 16px;
  align-items: start;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.strata-bmc-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(244px, 1fr);
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.strata-bmc-lane {
  min-width: 244px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.strata-bmc-lane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border);
}

.strata-bmc-lane-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.strata-bmc-lane-header span {
  font-size: 11px;
  color: var(--text-tertiary);
}

.strata-bmc-lane-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  min-height: 0;
  flex: 1 1 auto;
}

.strata-bmc-lane-empty {
  padding: 16px 8px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--button-radius);
}

.strata-bmc-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  min-height: 136px;
  max-height: 202px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition-speed) var(--transition-fn),
              background var(--transition-speed) var(--transition-fn);
}

.strata-bmc-card:hover,
.strata-bmc-card.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.strata-bmc-card-topline {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.strata-bmc-card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.strata-bmc-card-summary {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.strata-bmc-card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  color: var(--text-tertiary);
  font-size: 11px;
  min-width: 0;
}

.strata-bmc-card-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-bmc-drawer {
  position: sticky;
  top: 16px;
  max-height: 100%;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  padding: 14px;
}

.strata-bmc-sessions {
  position: sticky;
  top: 16px;
  max-height: 100%;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  padding: 12px;
}

.strata-bmc-sessions-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.strata-bmc-sessions-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.strata-bmc-sessions-head span {
  color: var(--text-tertiary);
  font-size: 11px;
}

.strata-bmc-session-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.strata-bmc-session-btn + .strata-bmc-session-btn {
  margin-top: 8px;
}

.strata-bmc-session-card {
  display: block;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
}

.strata-bmc-session-states {
  display: inline-flex;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}

.strata-bmc-health-connected {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 42%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, transparent);
}

.strata-bmc-health-delayed {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.strata-bmc-health-offline {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 42%, var(--border));
  background: color-mix(in srgb, var(--error) 10%, transparent);
}
.strata-bmc-drawer-empty,
.strata-bmc-schema-missing {
  padding: 32px 18px;
  text-align: center;
  color: var(--text-secondary);
  border: 1px dashed var(--border);
  border-radius: var(--button-radius);
}

.strata-bmc-schema-missing h2 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 18px;
}

.strata-bmc-drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.strata-bmc-drawer-head h3 {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-primary);
}

.strata-bmc-eyebrow {
  display: block;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.strata-bmc-drawer-controls,
.strata-bmc-drawer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.strata-bmc-drawer-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.strata-bmc-drawer-controls .dropdown,
.strata-bmc-link-select {
  min-width: 180px;
  height: 32px;
  font-size: 12px;
}

.strata-bmc-drawer-actions .btn-secondary,
.strata-bmc-drawer-actions .btn-primary {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
}

.strata-bmc-section {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
}

.strata-bmc-section h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.strata-bmc-section-heading,
.strata-bmc-message-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.strata-bmc-new-message {
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: var(--button-radius);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.strata-bmc-new-message.is-floating {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  width: max-content;
  margin: 0 0 8px auto;
  box-shadow: var(--shadow-sm);
}
.strata-bmc-report,
.strata-bmc-build,
.strata-bmc-session,
.strata-bmc-message,
.strata-bmc-event {
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  padding: 10px;
  margin-bottom: 8px;
}

.strata-bmc-report-head,
.strata-bmc-build-head,
.strata-bmc-session-head,
.strata-bmc-message-head,
.strata-bmc-event-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.strata-bmc-report-head strong,
.strata-bmc-build-head strong,
.strata-bmc-session-head strong,
.strata-bmc-event-line strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
}

.strata-bmc-report-head .text-secondary,
.strata-bmc-build-meta,
.strata-bmc-session-head .text-secondary,
.strata-bmc-message-head .text-secondary,
.strata-bmc-event-line span {
  color: var(--text-tertiary);
  font-size: 11px;
}

.strata-bmc-report p,
.strata-bmc-build p,
.strata-bmc-session p,
.strata-bmc-message p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.strata-bmc-message-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-tertiary);
  font-size: 11px;
  white-space: nowrap;
}

.strata-bmc-message-state-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.strata-bmc-message-state-delivered .strata-bmc-message-state-icon,
.strata-bmc-message-state-acknowledged .strata-bmc-message-state-icon {
  background: var(--accent);
}

.strata-bmc-message-state-read .strata-bmc-message-state-icon {
  background: var(--success);
}

.strata-bmc-message-state-cancelled .strata-bmc-message-state-icon {
  background: var(--error);
}

.strata-bmc-message-foot {
  margin-top: 8px;
}

.strata-bmc-message-foot .btn-secondary {
  min-height: 28px;
  padding: 3px 8px;
  font-size: 11px;
}

.strata-bmc-form-note {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.4;
}

.strata-bmc-todo-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.strata-bmc-todo-fields .dropdown {
  width: 100%;
}
.strata-bmc-report-status {
  width: auto;
  min-width: 118px;
  height: 28px;
  font-size: 12px;
}

.strata-bmc-report-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.strata-bmc-report-notes {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}

.strata-bmc-report-meta {
  margin-top: 6px;
  color: var(--warning);
  font-size: 11px;
  font-weight: 700;
}

.strata-bmc-shot {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
  padding: 10px;
}

.strata-bmc-shot img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: var(--button-radius);
}

.strata-bmc-details {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 12px;
}

.strata-bmc-details summary {
  cursor: pointer;
}

.strata-bmc-details pre {
  margin: 8px 0 0;
  padding: 8px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.strata-bmc-build-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.strata-bmc-risk-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.strata-bmc-risk-list span {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--border));
  border-radius: var(--button-radius);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning);
  font-size: 10px;
  line-height: 1.2;
}

.strata-bmc-chip-needs {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 44%, var(--border));
  background: color-mix(in srgb, var(--error) 10%, transparent);
}

.strata-bmc-needs-you {
  border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--border));
  border-radius: var(--button-radius);
  background: color-mix(in srgb, var(--warning) 7%, var(--panel));
  padding: 12px;
}

.strata-bmc-sessions > .strata-bmc-needs-you {
  margin-bottom: 10px;
  padding: 9px;
}

.strata-bmc-needs-you-head,
.strata-bmc-goal-heading,
.strata-bmc-roadmap-head,
.strata-bmc-evidence-head,
.strata-bmc-roadmap-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.strata-bmc-needs-you-head {
  align-items: center;
  margin-bottom: 8px;
}

.strata-bmc-needs-you-head h3,
.strata-bmc-roadmap-head h5,
.strata-bmc-evidence-wrap h5,
.strata-bmc-goal-heading h5 {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.35;
}

.strata-bmc-needs-you-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.strata-bmc-needs-you-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.strata-bmc-needs-you-item:hover,
.strata-bmc-needs-you-item:focus-visible {
  border-color: var(--accent);
}

.strata-bmc-needs-you-item.is-urgent {
  border-color: color-mix(in srgb, var(--error) 48%, var(--border));
}

.strata-bmc-needs-you-item strong {
  color: var(--text-primary);
  font-size: 12px;
}

.strata-bmc-session.is-focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

.strata-bmc-session-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.strata-bmc-session-compact .strata-bmc-session-head strong {
  margin-top: 2px;
}

.strata-bmc-session-checkpoint,
.strata-bmc-session-current,
.strata-bmc-session-progress,
.strata-bmc-session-truth {
  display: flex;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.strata-bmc-session-checkpoint,
.strata-bmc-session-current {
  align-items: flex-start;
}

.strata-bmc-session-checkpoint > span,
.strata-bmc-session-current > span {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-weight: 700;
  text-transform: uppercase;
}

.strata-bmc-session-checkpoint strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
}

.strata-bmc-session-progress,
.strata-bmc-session-truth {
  justify-content: space-between;
  flex-wrap: wrap;
  color: var(--text-tertiary);
}

.strata-bmc-alerts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}

.strata-bmc-session-compact .strata-bmc-alerts {
  margin-top: 0;
}

.strata-bmc-alert {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.35;
}

.strata-bmc-alert.is-attention,
.strata-bmc-alert.is-action_required {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
  background: color-mix(in srgb, var(--warning) 8%, var(--panel));
}

.strata-bmc-alert.is-urgent {
  border-color: color-mix(in srgb, var(--error) 48%, var(--border));
  background: color-mix(in srgb, var(--error) 8%, var(--panel));
}

.strata-bmc-alert.is-recovery {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.strata-bmc-alert-label {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-weight: 700;
  text-transform: uppercase;
}

.strata-bmc-alert-note {
  color: var(--text-tertiary);
}

.strata-bmc-session-full {
  padding: 12px;
}

.strata-bmc-session-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.strata-bmc-session-tab {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  touch-action: manipulation;
}

.strata-bmc-session-tab.is-active,
.strata-bmc-session-tab:hover,
.strata-bmc-session-tab:focus-visible {
  border-color: var(--accent);
  color: var(--text-primary);
}

.strata-bmc-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.strata-bmc-stored-status dl {
  display: grid;
  grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
  gap: 7px 12px;
  margin: 12px 0;
}

.strata-bmc-stored-status dt {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.strata-bmc-stored-status dd {
  margin: 0;
  color: var(--text-primary);
  line-height: 1.45;
  white-space: pre-wrap;
}

.strata-bmc-session-truth {
  margin-top: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
}

.strata-bmc-session-truth strong {
  color: var(--text-primary);
}

.strata-bmc-goal,
.strata-bmc-roadmap-wrap,
.strata-bmc-evidence-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.strata-bmc-goal > p,
.strata-bmc-roadmap-head p {
  margin: 7px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.strata-bmc-goal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.strata-bmc-goal-list {
  min-width: 0;
}

.strata-bmc-goal-list h6 {
  margin: 0 0 5px;
  color: var(--text-tertiary);
  font-size: 10px;
  text-transform: uppercase;
}

.strata-bmc-goal-list ul {
  margin: 0;
  padding-left: 17px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.strata-bmc-roadmap-empty {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--button-radius);
  color: var(--text-tertiary);
  font-size: 12px;
  text-align: center;
}

.strata-bmc-roadmap {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.strata-bmc-roadmap-step {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  min-height: 42px;
  padding-bottom: 10px;
  color: var(--text-secondary);
}

.strata-bmc-roadmap-step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: -1px;
  left: 7px;
  width: 1px;
  background: var(--border);
}

.strata-bmc-roadmap-marker {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--panel);
}

.strata-bmc-roadmap-step.is-in_progress .strata-bmc-roadmap-marker {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--panel);
  background: var(--accent);
}

.strata-bmc-roadmap-step.is-blocked .strata-bmc-roadmap-marker {
  border-color: var(--error);
  background: var(--error);
}

.strata-bmc-roadmap-step.is-needs_review .strata-bmc-roadmap-marker {
  border-color: var(--warning);
  background: var(--warning);
}

.strata-bmc-roadmap-step.is-verified .strata-bmc-roadmap-marker {
  border-color: var(--success);
  background: var(--success);
}

.strata-bmc-roadmap-step-head strong {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.35;
}

.strata-bmc-roadmap-step-head span,
.strata-bmc-roadmap-evidence {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 10px;
}

.strata-bmc-roadmap-evidence {
  margin-top: 3px;
}

.strata-bmc-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.strata-bmc-action,
.strata-bmc-blocker,
.strata-bmc-next-action,
.strata-bmc-evidence {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.strata-bmc-action {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.strata-bmc-action strong {
  color: var(--text-primary);
  font-size: 12px;
}

.strata-bmc-action-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.strata-bmc-action-paths span {
  max-width: 100%;
  overflow: hidden;
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strata-bmc-blocker,
.strata-bmc-next-action {
  margin-top: 8px;
}

.strata-bmc-evidence-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 8px;
}

.strata-bmc-evidence {
  margin: 0;
}

.strata-bmc-evidence.is-verified {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border));
}

.strata-bmc-evidence-head strong,
.strata-bmc-evidence-head a {
  min-width: 0;
  color: var(--text-primary);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.strata-bmc-loading {
  margin: 40px auto;
}

@media (max-width: 1024px) {
  .strata-module-container:has(.strata-bmc),
  .strata-feedback-view:has(.strata-bmc) {
    height: auto;
  }

  .strata-feedback-view:has(.strata-bmc) .strata-feedback-view-content {
    display: block;
  }

  .strata-bmc {
    flex: 0 1 auto;
    height: auto;
  }

  .strata-bmc-layout {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .strata-bmc-drawer {
    position: static;
    max-height: none;
  }

  .strata-bmc-sessions {
    position: static;
    max-height: none;
  }
}

@media (max-width: 640px) {
  .strata-feedback-view {
    padding: 12px;
  }

  .strata-bmc-header {
    flex-direction: column;
  }

  .strata-bmc-header .btn-secondary {
    align-self: flex-start;
  }

  .strata-bmc-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .strata-bmc-filters .dropdown {
    width: 100%;
    min-width: 0;
    height: 44px;
    font-size: 16px;
  }

  .strata-bmc-board {
    grid-auto-columns: minmax(252px, 82vw);
    scroll-snap-type: x proximity;
    height: auto;
    overflow-y: visible;
  }

  .strata-bmc-lane {
    scroll-snap-align: start;
    min-height: 420px;
    height: auto;
    max-height: none;
  }

  .strata-bmc-lane-cards {
    max-height: calc(100dvh - 280px);
  }

  .strata-bmc-drawer {
    padding: 12px;
  }

  .strata-bmc-drawer-controls,
  .strata-bmc-drawer-actions {
    flex-direction: column;
  }

  .strata-bmc-drawer-actions .btn-secondary,
  .strata-bmc-drawer-actions .btn-primary,
  .strata-bmc-drawer-controls .dropdown,
  .strata-bmc-link-select,
  .strata-bmc-report-status {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  .strata-bmc-report-actions,
  .strata-bmc-report-notes {
    width: 100%;
  }

  .strata-bmc-report-notes {
    min-height: 44px;
    font-size: 16px;
  }

  .strata-bmc-message-foot .btn-secondary {
    min-height: 44px;
    padding: 8px 12px;
  }

  .strata-bmc-report-head,
  .strata-bmc-build-head,
  .strata-bmc-session-head,
  .strata-bmc-message-head,
  .strata-bmc-event-line {
    flex-direction: column;
  }
  .strata-bmc-todo-fields {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .strata-bmc-needs-you-item,
  .strata-bmc-session-tab,
  .strata-bmc-session-btn {
    min-height: 40px;
  }
}

@media (max-width: 640px) {
  .strata-bmc-needs-you-list,
  .strata-bmc-goal-grid,
  .strata-bmc-activity-grid {
    grid-template-columns: 1fr;
  }

  .strata-bmc-needs-you-item,
  .strata-bmc-session-tab,
  .strata-bmc-session-btn {
    min-height: 44px;
  }

  .strata-bmc-session-truth,
  .strata-bmc-roadmap-step-head,
  .strata-bmc-evidence-head {
    flex-direction: column;
  }

  .strata-bmc-session-actions .btn-secondary {
    flex: 1 1 calc(50% - 6px);
    min-height: 44px;
  }

  .strata-bmc-stored-status dl {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============================================================
   Settings view — two-pane layout
   ============================================================ */

/* Overlay wrapper for platform views that should not scroll with the page */
.strata-view-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

/* Container rendered into .strata-view-overlay */
.strata-settings-container {
  max-width: 680px;
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header bar */
.strata-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.strata-settings-header h2 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.strata-settings-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.strata-settings-close:hover {
  color: var(--text-primary);
}

/* Two-pane body */
.strata-settings-layout {
  display: flex;
  height: min(520px, 72vh);
}

/* Left nav pane */
.strata-settings-nav {
  width: 180px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
}

.strata-settings-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
  width: 100%;
}
.strata-settings-nav-item svg {
  opacity: 0.7;
  flex-shrink: 0;
}
.strata-settings-nav-item:hover {
  background: var(--overlay-bg);
  color: var(--text-secondary);
}
.strata-settings-nav-item.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.strata-settings-nav-item.active svg {
  opacity: 1;
}

/* Right content pane */
.strata-settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  min-width: 0;
}

/* Fade-in on section switch */
@keyframes settingsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.strata-settings-content-inner {
  animation: settingsFadeIn 0.15s ease;
}

/* Field groups (replaces old strata-settings-section + panel) */
.strata-settings-field-group {
  margin-bottom: 16px;
}

.strata-settings-field-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.strata-settings-field-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.strata-settings-separator {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

/* Settings rows (label + control on one line) */
.strata-settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
}

.strata-settings-label {
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
  padding-top: 6px;
  line-height: 1.4;
}

.strata-settings-hint {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-top: 2px;
}

.strata-settings-control {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.strata-settings-value {
  font-size: 13px;
  color: var(--text-secondary);
  padding-top: 6px;
}

.strata-settings-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
}

/* Settings inputs */
.strata-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  height: 34px;
  transition: border-color 0.15s;
}
.strata-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.strata-input-sm {
  height: 30px;
  font-size: 12px;
  padding: 4px 8px;
}

.strata-select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 28px 6px 10px;
  height: 34px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}
.strata-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Toggle switch */
.strata-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
}
.strata-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.strata-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 11px;
  transition: background 0.2s;
}
.strata-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: var(--text-primary);
  border-radius: 50%;
  transition: transform 0.2s;
}
.strata-toggle input:checked + .strata-toggle-slider {
  background: var(--accent);
}
.strata-toggle input:checked + .strata-toggle-slider::before {
  transform: translateX(18px);
  background: #fff;
}
.strata-toggle input:focus-visible + .strata-toggle-slider {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Theme picker */
.strata-settings-theme-picker {
  display: flex;
  gap: 8px;
}

.strata-theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 2px solid var(--border);
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.strata-theme-option:hover {
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}
.strata-theme-option.active {
  border-color: var(--accent);
  color: var(--text-primary);
}

.strata-theme-preview {
  display: block;
  width: 48px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.strata-theme-preview-dark {
  background: #0e0e10;
}
.strata-theme-preview-light {
  background: #f5f5f7;
}
.strata-theme-preview-system {
  background: linear-gradient(135deg, #0e0e10 50%, #f5f5f7 50%);
}
.strata-theme-preview-sunset {
  background: linear-gradient(135deg, var(--warning), var(--accent));
}

/* Keyboard shortcuts table */
.strata-settings-shortcuts {
  padding: 0 0 4px;
}
.strata-settings-shortcuts h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 0 8px;
}
.strata-settings-shortcuts h4:first-child {
  margin-top: 4px;
}

.strata-shortcuts-table {
  width: 100%;
  border-collapse: collapse;
}
.strata-shortcuts-table td {
  padding: 5px 0;
  font-size: 13px;
  border: none;
}
.strata-shortcut-label {
  color: var(--text-secondary);
}
.strata-shortcut-combo {
  text-align: right;
  white-space: nowrap;
}
.strata-shortcut-combo kbd {
  display: inline-block;
  padding: 2px 7px;
  font-family: inherit;
  font-size: 11px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-secondary);
  min-width: 20px;
  text-align: center;
}

/* Empty placeholder in settings sections */
.strata-settings-empty {
  padding: 16px 0 4px;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Reduced motion: suppress transitions/animations globally */
[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ============================================================
   Developer tools (settings view, admin only)
   ============================================================ */

.strata-devtools-subsection {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.strata-devtools-subsection:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.strata-devtools-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.strata-devtools-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.strata-devtools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}

.strata-devtools-item {
  display: flex;
  gap: 8px;
  font-size: 12px;
  padding: 3px 0;
}

.strata-devtools-key {
  color: var(--text-tertiary);
  white-space: nowrap;
  min-width: 100px;
}

.strata-devtools-val {
  color: var(--text-secondary);
  word-break: break-all;
}

.strata-devtools-val.mono,
.strata-devtools-table .mono {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 11px;
}

.strata-devtools-override {
  color: var(--accent);
  font-weight: 500;
}

/* Collapsible details */
.strata-devtools-details {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
}
.strata-devtools-details summary {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.strata-devtools-details summary:hover {
  color: var(--text-primary);
}
.strata-devtools-details[open] summary {
  border-bottom: 1px solid var(--border);
}

.strata-devtools-detail {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Dev tools tables */
.strata-devtools-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.strata-devtools-table th {
  text-align: left;
  padding: 6px 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.strata-devtools-table td {
  padding: 5px 10px;
  color: var(--text-secondary);
  border: none;
}
.strata-devtools-table tbody tr:hover {
  background: var(--input-bg);
}

/* Devtools status colors */
.strata-devtools-status-connected { color: var(--success, #4ade80); }
.strata-devtools-status-syncing { color: var(--warning, #facc15); }
.strata-devtools-status-error { color: var(--error, #f87171); }
.strata-devtools-status-disconnected { color: var(--text-tertiary); }

/* Elevation banner */
.strata-elevation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 6px 16px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.strata-elevation-action {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 12px;
  padding: 3px 12px;
  border-radius: var(--button-radius);
  cursor: pointer;
  font-family: inherit;
}
.strata-elevation-action:hover {
  background: rgba(255,255,255,0.3);
}

/* Push app down when the elevation banner is active */
.strata-has-elevation-banner .strata-app {
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
  margin-top: 32px;
}

/* ============================================================
   Development-backend banner
   Persistent top bar shown whenever the app talks to the dev Supabase
   backend (body.strata-has-dev-banner, set by platform/dev-banner.js when
   ENV === 'development'). Mirrors the elevation-banner reflow so it never
   overlaps the topbar. Visible on the login screen + localhost too, so it
   is obvious BEFORE sign-in that this is not production.
   ============================================================ */
.strata-dev-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9990; /* above modals (9000) so it always shows; below toast (9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 28px;
  padding: 0 16px;
  background: var(--warning);
  color: var(--dev-banner-fg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.strata-dev-banner-icon { flex: 0 0 auto; }
.strata-dev-banner-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.strata-dev-banner-text strong { text-transform: uppercase; }
.strata-dev-banner-sub {
  margin-left: 8px;
  font-weight: 500;
  opacity: 0.8;
}

/* Push the app + login screen down when the dev banner is active. */
.strata-has-dev-banner .strata-app,
.strata-has-dev-banner .strata-login-page {
  height: calc(100vh - 28px);
  height: calc(100dvh - 28px);
  margin-top: 28px;
}

/* Co-occurrence with the elevation banner: dev bar on top, elevation
   below it, and the app pushed down by both. */
.strata-has-dev-banner.strata-has-elevation-banner .strata-elevation-banner {
  top: 28px;
}
.strata-has-dev-banner.strata-has-elevation-banner .strata-app {
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  margin-top: 60px;
}

@media (max-width: 640px) {
  .strata-dev-banner-sub { display: none; }
}

/* Audit placeholder */
.strata-devtools-audit-placeholder {
  padding: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Settings responsive */
@media (max-width: 600px) {
  .strata-settings-container {
    margin: 0;
    border-radius: 0;
    border: none;
    max-width: none;
  }
  .strata-settings-layout {
    flex-direction: column;
    height: auto;
  }
  .strata-settings-nav {
    width: auto;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 6px;
    gap: 4px;
  }
  .strata-settings-nav-item {
    white-space: nowrap;
    padding: 6px 10px;
    font-size: 12px;
  }
  .strata-settings-content {
    height: auto;
    min-height: 300px;
  }
  .strata-settings-row {
    flex-direction: column;
    gap: 8px;
  }
  .strata-settings-control {
    align-self: flex-start;
  }
  .strata-settings-label {
    padding-top: 0;
  }
  .strata-devtools-grid {
    grid-template-columns: 1fr;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   Integrations View (mirrors Settings two-panel layout)
   ══════════════════════════════════════════════════════════════════════════════ */

.strata-integ-container {
  max-width: 720px;
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.strata-integ-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.strata-integ-header h2 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.strata-integ-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.strata-integ-close:hover { color: var(--text-primary); }

.strata-integ-layout {
  display: flex;
  height: min(560px, 75vh);
}
.strata-integ-nav {
  width: 180px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
}
.strata-integ-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
  width: 100%;
}
.strata-integ-nav-item svg { opacity: 0.7; flex-shrink: 0; }
.strata-integ-nav-item:hover { background: var(--overlay-bg); color: var(--text-secondary); }
.strata-integ-nav-item.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.strata-integ-nav-item.active svg { opacity: 1; }

.strata-integ-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  min-width: 0;
}
@keyframes integFadeIn { from { opacity: 0; } to { opacity: 1; } }
.strata-integ-content-inner { animation: integFadeIn 0.15s ease; }
.strata-integ-empty { color: var(--text-secondary); font-size: 13px; }

/* Sections inside a panel */
.strata-integ-section { margin-bottom: 20px; }
.strata-integ-section h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 0 0 10px 0;
}
.strata-integ-field { margin-bottom: 10px; }
.strata-integ-field label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 3px; }
.strata-integ-row { display: flex; gap: 6px; align-items: center; }
.strata-integ-input {
  flex: 1;
  padding: 5px 8px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}
.strata-integ-input:focus { border-color: var(--accent); }
.strata-integ-input-sm { max-width: 90px; }
select.strata-integ-input { cursor: pointer; }

/* Buttons */
.strata-integ-btn {
  padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 6px;
  border: none; cursor: pointer; background: var(--accent); color: #fff; font-family: inherit;
  transition: opacity 0.15s;
}
.strata-integ-btn:hover { opacity: 0.85; }
.strata-integ-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.strata-integ-btn-sm { padding: 3px 8px; font-size: 11px; }
.strata-integ-btn-secondary { background: var(--overlay-bg); color: var(--text-primary); border: 1px solid var(--border); }
.strata-integ-btn-danger { background: var(--danger, #e74c3c); }
.strata-integ-btn-row { display: flex; gap: 6px; margin-top: 10px; }

/* Stats grid */
.strata-integ-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.strata-integ-stat { display: flex; flex-direction: column; gap: 1px; }
.strata-integ-stat-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.strata-integ-stat-val { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.strata-integ-status-idle { color: var(--text-secondary); }
.strata-integ-status-syncing { color: var(--accent); }
.strata-integ-status-error { color: var(--danger, #e74c3c); }
.strata-integ-error { padding: 6px 10px; border-radius: 6px; background: rgba(231,76,60,0.1); color: var(--danger, #e74c3c); font-size: 12px; margin-bottom: 8px; border: 1px solid rgba(231,76,60,0.2); }
.strata-integ-progress { font-size: 11px; color: var(--text-secondary); margin-top: 6px; min-height: 16px; }
.strata-integ-muted { font-size: 12px; color: var(--text-secondary); margin: 0; }

/* Table */
.strata-integ-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.strata-integ-table th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); padding: 4px 6px; border-bottom: 1px solid var(--border); }
.strata-integ-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; }
.strata-integ-table tr:last-child td { border-bottom: none; }

/* Log */
.strata-integ-log { max-height: 200px; overflow-y: auto; font-size: 11px; font-family: var(--font-mono, monospace); }
.strata-integ-log-entry { padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.strata-integ-log-info { color: var(--text-secondary); }
.strata-integ-log-warn { color: var(--warning, #f0ad4e); }
.strata-integ-log-error { color: var(--danger, #e74c3c); }
.strata-integ-log-time { opacity: 0.5; }

/* Review phase match labels */
.strata-integ-match-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 6px; border-radius: 3px; }
.strata-integ-match-auto .strata-integ-match-label { color: var(--success, #27ae60); background: rgba(39,174,96,0.1); }
.strata-integ-match-manual .strata-integ-match-label { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.strata-integ-match-none .strata-integ-match-label { color: var(--warning, #f0ad4e); background: rgba(240,173,78,0.1); }

/* Status bar indicator */
.strata-integ-status-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.strata-integ-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.strata-integ-status-active { background: rgba(39,174,96,0.08); color: var(--success, #27ae60); border: 1px solid rgba(39,174,96,0.15); }
.strata-integ-status-active .strata-integ-status-dot { background: var(--success, #27ae60); box-shadow: 0 0 6px rgba(39,174,96,0.4); }
.strata-integ-status-ready { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent); }
.strata-integ-status-ready .strata-integ-status-dot { background: var(--accent); }
.strata-integ-status-error { background: rgba(231,76,60,0.08); color: var(--danger, #e74c3c); border: 1px solid rgba(231,76,60,0.15); }
.strata-integ-status-error .strata-integ-status-dot { background: var(--danger, #e74c3c); }

/* Progress bar */
.strata-integ-progress-bar { margin-top: 10px; }
.strata-integ-progress-track { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin-bottom: 4px; }
.strata-integ-progress-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.3s ease; }

/* Responsive */
@media (max-width: 600px) {
  .strata-integ-layout { flex-direction: column; height: auto; }
  .strata-integ-nav { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 6px; }
  .strata-integ-nav-item { white-space: nowrap; padding: 6px 10px; font-size: 12px; }
  .strata-integ-stats { grid-template-columns: 1fr; }
  .strata-integ-row { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Tour System
   ============================================================ */

/* -- Tour design tokens (dark default) -- */
:root {
  --tour-bg: #1e1e3a;
  --tour-bg-accent: rgba(102, 126, 234, 0.08);
  --tour-border: rgba(102, 126, 234, 0.25);
  --tour-glow: rgba(102, 126, 234, 0.15);
}

[data-theme="light"] {
  --tour-bg: #ffffff;
  --tour-bg-accent: rgba(79, 108, 229, 0.06);
  --tour-border: rgba(79, 108, 229, 0.2);
  --tour-glow: rgba(79, 108, 229, 0.1);
}

/* Overlay container -- holds spotlight, scrim, and tooltip */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  animation: tour-fade-in 0.3s ease;
}

.tour-overlay.tour-exiting {
  animation: tour-fade-out 0.25s ease forwards;
}

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

@keyframes tour-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Scrim -- visible for centered/welcome cards, hidden for targeted steps */
.tour-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  transition: opacity 0.35s var(--transition-fn);
}

[data-theme="light"] .tour-scrim {
  background: rgba(0, 0, 0, 0.22);
}

/* Spotlight -- morphs between target positions */
.tour-spotlight {
  position: fixed;
  z-index: 10001;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.32);
  pointer-events: auto;
  transition: top 0.4s var(--transition-fn), left 0.4s var(--transition-fn),
              width 0.4s var(--transition-fn), height 0.4s var(--transition-fn),
              opacity 0.35s var(--transition-fn);
}

[data-theme="light"] .tour-spotlight {
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.18);
}

/* Tooltip card -- accent-tinted background, morphs position */
.tour-tooltip {
  position: fixed;
  z-index: 10002;
  background: var(--tour-bg);
  background-image: linear-gradient(
    135deg,
    var(--tour-bg-accent) 0%,
    transparent 60%
  );
  color: var(--text-primary);
  border: 1px solid var(--tour-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg), 0 0 40px var(--tour-glow);
  padding: 20px;
  max-width: 360px;
  min-width: 260px;
  pointer-events: auto;
  transition: top 0.4s var(--transition-fn), left 0.4s var(--transition-fn),
              transform 0.4s var(--transition-fn);
}

.tour-tooltip-centered {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.tour-tooltip-enter {
  animation: tour-enter 0.45s cubic-bezier(0.4, 0, 0.1, 1) both;
}

@keyframes tour-enter {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.tour-tooltip-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.tour-tooltip-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.tour-tooltip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tour-tooltip-counter {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.tour-tooltip-nav {
  display: flex;
  gap: 6px;
}

.tour-btn {
  font-size: 13px;
  padding: 6px 14px;
  min-width: 0;
}

.tour-btn-skip {
  opacity: 0.7;
}

.tour-btn-skip:hover {
  opacity: 1;
}

/* Arrow -- rotated square, positioned by JS to point at target center */
.tour-tooltip-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--tour-bg);
  border: 1px solid var(--tour-border);
  transform: translate(-50%, -50%) rotate(45deg);
}

.tour-tooltip-arrow.arrow-top {
  top: -1px;
  border-right: none;
  border-bottom: none;
}

.tour-tooltip-arrow.arrow-bottom {
  bottom: -6px;
  top: auto;
  transform: translate(-50%, 0) rotate(45deg);
  border-left: none;
  border-top: none;
}

.tour-tooltip-arrow.arrow-left {
  left: -1px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: none;
  border-top: none;
}

.tour-tooltip-arrow.arrow-right {
  right: -6px;
  left: auto;
  transform: translate(0, -50%) rotate(45deg);
  border-left: none;
  border-bottom: none;
}

/* ---- Welcome card (large branded splash) ---- */

.tour-welcome {
  max-width: 440px;
  min-width: 340px;
  padding: 32px 32px 24px;
  text-align: center;
}

.tour-welcome-splash {
  margin-bottom: 20px;
}

.tour-welcome-mark {
  display: block;
  margin: 0 auto;
}

/* Replay the splash animation inside the tour welcome */
.tw-bar {
  opacity: 0;
  transform: translateY(8px);
  animation: splash-barIn 0.55s cubic-bezier(0.4, 0, 0.1, 1) forwards;
}

.tw-bar:nth-child(4) { animation-delay: 0.06s; }
.tw-bar:nth-child(3) { animation-delay: 0.2s; }
.tw-bar:nth-child(2) { animation-delay: 0.34s; }
.tw-bar:nth-child(1) { animation-delay: 0.48s; }

.tw-wash {
  animation: splash-washOut 1.5s cubic-bezier(0.4, 0, 0.05, 1) 1.1s forwards;
}

.tw-s {
  opacity: 0;
  animation: splash-sIn 1.5s cubic-bezier(0.4, 0, 0.05, 1) 1.1s forwards;
}

.tour-welcome-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 8px;
  color: var(--text-primary);
  opacity: 0;
  animation: tour-welcome-text-in 0.5s ease 2s forwards;
}

.tour-welcome-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 20px;
  opacity: 0;
  animation: tour-welcome-text-in 0.5s ease 2.2s forwards;
}

.tour-welcome .tour-tooltip-footer {
  opacity: 0;
  animation: tour-welcome-text-in 0.5s ease 2.4s forwards;
}

@keyframes tour-welcome-text-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tw-bar { opacity: 1; transform: none; animation: none; }
  .tw-wash { opacity: 0; animation: none; }
  .tw-s { opacity: 1; animation: none; }
  .tour-welcome-title,
  .tour-welcome-body,
  .tour-welcome .tour-tooltip-footer { opacity: 1; animation: none; }
  .tour-tooltip-enter { animation: none; opacity: 1; }
}

/* ---- Theme picker step ---- */

.tour-theme-picker {
  max-width: 420px;
  min-width: 340px;
}

.tour-theme-cards {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.tour-theme-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--button-radius);
  border: 2px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
}

.tour-theme-card:hover {
  border-color: var(--text-tertiary);
}

.tour-theme-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--tour-glow);
}

.tour-theme-preview {
  width: 100%;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  position: relative;
}

/* Miniature app shell preview for dark */
.tour-theme-dark {
  background: #0e0e10;
}

.tour-theme-dark .ttp-bar {
  width: 30%;
  height: 100%;
  background: #1a1a2e;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.tour-theme-dark .ttp-content {
  flex: 1;
  padding: 10px;
}

.tour-theme-dark .ttp-line {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.1);
  margin-bottom: 6px;
}

.tour-theme-dark .ttp-line.short {
  width: 60%;
}

/* Miniature app shell preview for light */
.tour-theme-light {
  background: #f5f5f7;
}

.tour-theme-light .ttp-bar {
  width: 30%;
  height: 100%;
  background: #ffffff;
  border-right: 1px solid rgba(0,0,0,0.08);
}

.tour-theme-light .ttp-content {
  flex: 1;
  padding: 10px;
}

.tour-theme-light .ttp-line {
  height: 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.1);
  margin-bottom: 6px;
}

.tour-theme-light .ttp-line.short {
  width: 60%;
}

.tour-theme-label {
  font-weight: 500;
}

/* ---- Tour prompt bar (module tour offer) ---- */

.tour-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: var(--tour-bg);
  background-image: linear-gradient(135deg, var(--tour-bg-accent) 0%, transparent 60%);
  border: 1px solid var(--tour-border);
  border-radius: var(--button-radius);
  box-shadow: var(--shadow-sm), 0 0 20px var(--tour-glow);
  animation: tour-prompt-in 0.35s var(--transition-fn);
  position: relative;
  z-index: 1;
}

.tour-prompt-exit {
  animation: tour-prompt-out 0.25s ease forwards;
}

@keyframes tour-prompt-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tour-prompt-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

.tour-prompt-icon {
  flex-shrink: 0;
  color: var(--accent);
}

.tour-prompt-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
}

.tour-prompt-btn {
  font-size: 12px;
  padding: 5px 12px;
  flex-shrink: 0;
}

.tour-prompt-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.tour-prompt-close:hover {
  color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .tour-tooltip {
    max-width: calc(100vw - 24px);
    min-width: 200px;
  }
  .tour-welcome,
  .tour-theme-picker {
    max-width: calc(100vw - 24px);
    min-width: 260px;
  }
}

/* ============================================================
   Tool overlay (z-index: 8000)
   Full-viewport overlay for platform tools (annotation editor, etc.)
   Layering: module content < command bar (6000) < dock panel (7000, Help
             renders here) < launcher popover (7500) < tool overlay (8000)
             < modal/confirm (9000) < toast (9999) < tour (10000)
   ============================================================ */

.tool-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  animation: tool-overlay-in 0.2s ease-out;
}

.tool-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
}

.tool-overlay-container {
  position: relative;
  z-index: 1;
  flex: 1;
  background: var(--bg);
  overflow: auto;
}

/* S5b -- an embedded tool session (ctx.tools.mount) promoted to fullscreen
   reparents its .tool-embed wrapper into a .tool-overlay-container. The host
   module's own scoped fill rule no longer applies there, so make the wrapper
   fill the overlay here. Tokens only; no colors. */
.tool-overlay-container > .tool-embed {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* S5b -- collapse affordance for a fullscreen-promoted embedded session. The
   host's own toggle is occluded by this z-8000 overlay, so the platform floats
   an exit chip at top-center (clear of the tool's own topbar: title left,
   Save/Cancel right). Tokens only; both themes. */
.tool-fullscreen-exit {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--button-radius);
  background: var(--panel);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.tool-fullscreen-exit:hover {
  background: var(--panel-2);
  border-color: var(--text-tertiary);
}

.tool-overlay-exiting {
  animation: tool-overlay-out 0.15s ease-in forwards;
  pointer-events: none;
}

@keyframes tool-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes tool-overlay-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ============================================================
   Mobile Responsive Shell
   ============================================================
   Breakpoints:
     Phone:   < 640px
     Tablet:  640px - 1024px
     Desktop: > 1024px

   All styles below are additive — desktop layout is unchanged.
   ============================================================ */

/* --- Global: touch-action for faster taps --- */

a, button, [role="button"], input, select, textarea, label,
.strata-nav-item, .strata-command-item, .strata-project-item,
.strata-profile-menu-item, .tab {
  touch-action: manipulation;
}

/* --- Scope hover effects to devices that actually hover --- */
/* Prevent "stuck" hover on touch devices */

@media (hover: none) {
  .strata-nav-item:hover {
    color: var(--text-secondary);
    background: none;
  }

  .strata-nav-item[aria-current="page"]:hover,
  .strata-nav-item.active:hover {
    color: var(--text-primary);
    background: var(--border);
  }

  .strata-topbar-btn:hover:not(:disabled) {
    color: var(--text-secondary);
    background: none;
  }

  .strata-theme-toggle:hover {
    color: var(--text-secondary);
    border-color: var(--border);
  }

  .strata-profile-btn:hover {
    border-color: var(--border);
  }

  .strata-project-btn:hover {
    border-color: var(--border);
  }

  .strata-search-btn:hover {
    border-color: var(--border);
    color: var(--text-secondary);
  }

  .strata-command-item:hover {
    background: none;
  }

  .strata-command-item[aria-selected="true"] {
    background: var(--border);
  }

  .strata-project-item:hover {
    background: none;
  }

  .strata-project-item[aria-selected="true"] {
    background: var(--border);
  }

  .strata-profile-menu-item:hover {
    background: none;
  }

  .strata-hamburger:hover {
    color: var(--text-secondary);
    border-color: var(--border);
  }

  .strata-store-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .strata-mgmt-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .btn-secondary:hover {
    background: transparent;
    border-color: var(--border);
  }
}

/* --- Safe area insets (notched devices) --- */

@supports (padding: env(safe-area-inset-bottom, 0px)) {
  .strata-content {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .strata-toast-container {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
  }

  .tool-overlay-container {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* ============================================================
   Phone: < 640px
   ============================================================ */

@media (max-width: 640px) {

  /* --- Sidebar: safe areas + touch targets --- */

  .strata-sidebar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }

  .strata-sidebar-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .strata-nav-item {
    padding: 12px 16px;
    font-size: 14px;
    min-height: 44px;
  }

  .strata-nav-item svg {
    width: 20px;
    height: 20px;
  }

  .strata-sidebar-pinned .strata-nav-item {
    padding: 10px 16px;
    font-size: 13px;
    min-height: 44px;
  }

  .strata-nav-category-header {
    padding: 10px 16px 6px;
    min-height: 36px;
  }

  /* --- Top bar: compact layout --- */

  .strata-topbar {
    /* Top inset clears the notch / status bar in standalone PWA mode; the
       topbar grows by the same inset so its 48px of content is preserved
       below it. env() resolves to 0px when there is no inset, so this is a
       no-op in a normal browser tab. */
    padding: env(safe-area-inset-top, 0px) calc(8px + env(safe-area-inset-right, 0px)) 0 calc(8px + env(safe-area-inset-left, 0px));
    height: calc(48px + env(safe-area-inset-top, 0px));
    min-height: calc(48px + env(safe-area-inset-top, 0px));
    gap: 4px;
  }

  .strata-topbar-left {
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
  }

  .strata-topbar-center {
    flex: 1 1 0;
    min-width: 0;
  }

  .strata-topbar-right {
    gap: 2px;
    flex-shrink: 0;
  }

  /* Enlarge touch targets for topbar buttons */
  .strata-hamburger {
    width: 44px;
    height: 44px;
    border: none;
  }

  .strata-topbar-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--button-radius);
  }

  .strata-theme-toggle {
    width: 44px;
    height: 44px;
  }

  .strata-profile-btn {
    width: 36px;
    height: 36px;
  }

  /* Hide sync button on phone — less critical, saves space */
  .strata-sync-btn {
    display: none;
  }

  /* Context breadcrumb: compact on phone */
  .strata-topbar-breadcrumb {
    min-width: 0;
    max-width: 160px;
  }

  .strata-tbc-studio-btn,
  .strata-tbc-platform,
  .strata-tbc-project-btn {
    font-size: 9px;
  }

  .strata-tbc-studio-btn,
  .strata-tbc-sep {
    display: none;
  }

  .strata-tbc-project-btn {
    max-width: 130px;
    padding-left: 0;
  }

  .strata-tbc-module-btn {
    max-width: 150px;
    font-size: 14px;
  }

  /* Project popover: full width on phone */
  .strata-tbc-popover {
    position: fixed;
    top: 56px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }

  /* Profile dropdown: wider and better positioned */
  .strata-profile-dropdown {
    right: -8px;
    width: calc(100vw - 24px);
    max-width: 280px;
  }

  .strata-profile-menu-item {
    padding: 12px 14px;
    min-height: 44px;
  }

  /* Search button: icon only on very narrow screens */
  .strata-search-btn {
    padding: 0 10px;
    height: 36px;
  }

  /* --- Content area --- */

  .strata-content {
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .strata-module-container {
    max-width: 100%;
  }

  /* --- Modals: near-full-screen on phone --- */

  .strata-modal {
    min-width: 0;
    width: calc(100vw - 24px);
    max-width: none;
    max-height: calc(100vh - 48px);
    border-radius: var(--panel-radius);
  }

  .strata-modal-actions {
    flex-direction: column;
    gap: 8px;
  }

  .strata-modal-actions button {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
  }

  /* --- Command bar: closer to top on phone --- */

  .strata-command-overlay {
    padding-top: 10vh;
    padding-left: 8px;
    padding-right: 8px;
  }

  .strata-command-bar {
    width: 100%;
    max-width: none;
  }

  .strata-command-input {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: 14px 12px;
  }

  /* Prevent iOS zoom on all platform text inputs */
  .strata-project-search,
  .strata-feedback-textarea,
  .input-field,
  .strata-input,
  .strata-today-pop-add-input {
    font-size: 16px;
  }

  .strata-command-item {
    padding: 12px 16px;
    min-height: 44px;
    font-size: 14px;
  }

  .strata-command-results {
    max-height: 50vh;
  }

  /* --- Settings: stack nav and content vertically --- */

  .strata-settings-container {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }

  .strata-settings-layout {
    flex-direction: column;
    height: auto;
    max-height: none;
  }

  .strata-settings-nav {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 6px 8px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .strata-settings-nav-item {
    flex-shrink: 0;
    padding: 8px 12px;
    white-space: nowrap;
    min-height: 40px;
  }

  .strata-settings-content {
    min-height: 300px;
    padding: 16px 12px;
  }

  /* Help's phone touch-target bump used to live here for .strata-help-close.
     Help is a dock view now; the equivalent bump for .strata-dock-close is in
     platform/dock.css (it covers every dock view, not just Help). */

  /* --- Login: smaller padding on phone --- */

  .strata-login-card {
    padding: 28px 20px;
  }

  /* Ensure login inputs don't trigger iOS zoom */
  .strata-login-card input {
    font-size: 16px;
  }

  .btn-microsoft {
    min-height: 48px;
    font-size: 15px;
  }

  .strata-oauth-consent-page {
    align-items: flex-start;
    padding: max(18px, env(safe-area-inset-top, 0px)) 12px max(18px, env(safe-area-inset-bottom, 0px));
  }

  .strata-oauth-consent-card {
    padding: 26px 20px;
  }

  .strata-oauth-consent-actions {
    flex-direction: column-reverse;
  }

  .strata-oauth-consent-actions button {
    width: 100%;
    min-height: 48px;
  }

  /* --- Toast: respect safe areas on phone --- */

  .strata-toast-container {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }

  .strata-toast {
    max-width: 100%;
  }

  /* --- Feedback modal --- */

  .strata-feedback-modal {
    max-width: calc(100vw - 24px);
  }

  /* --- View headers: stack on mobile --- */

  .strata-view-header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .strata-view-header .btn-primary {
    align-self: flex-start;
  }

  /* --- Form grid: single column on phone --- */

  .strata-form-grid {
    grid-template-columns: 1fr;
  }

  /* --- Card grid: single column on phone --- */

  .strata-card-grid {
    grid-template-columns: 1fr;
  }

  /* --- Admin table: horizontal scroll on phone --- */

  .strata-admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Feedback table: horizontal scroll on phone --- */

  .strata-feedback-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Onboarding card --- */

  .strata-onboarding-card {
    padding: 28px 20px;
    width: calc(100vw - 24px);
    max-width: none;
  }

  .onboard-row {
    flex-direction: column;
  }

  /* --- Bulk toolbar: full width on phone --- */

  .strata-bulk-toolbar {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* --- Loading spinner: scale down for phone --- */

  .strata-spinner {
    width: 24px;
    height: 16px;
    background:
      linear-gradient(var(--accent), var(--accent)) no-repeat center 0px    / 38% 2px,
      linear-gradient(var(--accent), var(--accent)) no-repeat center 4.7px  / 56% 2px,
      linear-gradient(var(--accent), var(--accent)) no-repeat center 9.5px  / 78% 2px,
      linear-gradient(var(--accent), var(--accent)) no-repeat center 14.2px / 100% 2px;
  }
}

/* ============================================================
   Tablet: 641px - 1024px
   ============================================================ */

@media (min-width: 641px) and (max-width: 1024px) {

  .strata-oauth-consent-actions button {
    min-height: 40px;
  }

  /* Slightly larger touch targets for tablet */
  .strata-nav-item {
    padding: 10px 16px;
    min-height: 40px;
  }

  .strata-topbar-btn {
    width: 36px;
    height: 36px;
  }

  .strata-theme-toggle {
    width: 36px;
    height: 36px;
  }

  /* Settings layout: give nav more room on tablet */
  .strata-settings-layout {
    height: min(520px, 65vh);
  }

  .strata-settings-nav {
    width: 160px;
  }

  /* Modal: constrained but not full-width */
  .strata-modal {
    min-width: 0;
    max-width: 520px;
  }

  .strata-modal-actions button {
    min-height: 40px;
  }

  /* Command items: slightly larger */
  .strata-command-item {
    padding: 10px 16px;
    min-height: 40px;
  }
}

/* ============================================================
   Phone landscape considerations
   ============================================================ */

@media (max-height: 440px) and (orientation: landscape) {

  /* Shorten command bar position for landscape phones */
  .strata-command-overlay {
    padding-top: 5vh;
  }

  .strata-command-results {
    max-height: 40vh;
  }

  /* Compact modal for landscape */
  .strata-modal {
    max-height: calc(100vh - 24px);
    padding: 16px;
  }

  .strata-modal-body {
    margin-bottom: 12px;
  }
}

/* ============================================================
   Box integration settings panel
   Rendered inside the Integrations view. Uses existing tokens
   so both themes work without extra theme variables.
   ============================================================ */

.strata-box-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.strata-box-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  background: var(--panel);
}

.strata-box-section h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.strata-box-section p,
.strata-box-meta {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 12px;
}

.strata-box-admin-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.strata-box-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.strata-box-account-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.strata-box-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.strata-box-activity-list li {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.strata-box-activity-list li:first-child {
  border-top: 0;
}
.strata-box-activity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.strata-box-audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.strata-box-audit-table th,
.strata-box-audit-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.strata-box-audit-table thead th {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* -- Module Permissions: search + card list -- */
.strata-box-perm-add {
  position: relative;
  margin-bottom: 16px;
}
.strata-box-perm-add-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
}
.strata-box-perm-add-input:focus {
  outline: none;
  border-color: var(--accent);
}
.strata-box-perm-add-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--button-radius);
  box-shadow: var(--shadow-lg);
  z-index: 10;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.strata-box-perm-add-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: calc(var(--button-radius) - 2px);
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
}
.strata-box-perm-add-result:hover,
.strata-box-perm-add-result:focus-visible {
  background: var(--row-hover);
  outline: none;
}
.strata-box-perm-add-result-name {
  font-size: 14px;
  font-weight: 500;
}
.strata-box-perm-add-result-id {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.strata-box-perm-add-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.strata-box-perm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.strata-box-perm-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--button-radius);
}
.strata-box-perm-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
}
.strata-box-perm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.strata-box-perm-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.strata-box-perm-card-remove {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  background: transparent;
  color: var(--text-tertiary);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.strata-box-perm-card-remove:hover {
  background: var(--row-hover);
  color: var(--text-primary);
}
.strata-box-perm-card-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.strata-box-perm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.strata-box-perm-pill:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.strata-box-perm-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background 120ms;
}
.strata-box-perm-pill.is-on {
  color: var(--text-primary);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.strata-box-perm-pill.is-on .strata-box-perm-pill-dot {
  background: var(--accent);
}
.strata-box-perm-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.strata-box-template-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr auto;
  gap: 8px;
  align-items: end;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.strata-box-template-row:first-child { border-top: 0; }
.strata-box-template-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.strata-box-template-row input {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 13px;
}
.strata-box-template-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.strata-box-audit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
}
.strata-box-audit-filters label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-secondary);
}
.strata-box-audit-filters input,
.strata-box-audit-filters select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 13px;
}
.strata-box-audit-count {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.strata-box-audit-ok   { color: var(--success, #4ade80); font-weight: 500; }
.strata-box-audit-fail { color: var(--error, #f87171); font-weight: 500; }
.strata-box-audit-err  { color: var(--text-secondary); font-size: 12px; }

/* Confirmation dialog and folder picker (used via StrataUI.modal) */
.strata-box-confirm { font-size: 14px; color: var(--text-primary); }
.strata-box-confirm-intro { margin: 0 0 8px; line-height: 1.5; }
.strata-box-confirm-dest {
  margin: 6px 0;
  padding: 8px 10px;
  background: var(--input-bg);
  border-radius: 4px;
  font-size: 13px;
}
.strata-box-confirm-list {
  list-style: disc;
  padding-left: 20px;
  margin: 8px 0;
  max-height: 180px;
  overflow: auto;
  font-size: 13px;
}
.strata-box-confirm-more {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 4px 0 0;
}
.strata-box-confirm-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 10px 0 0;
}

.strata-box-pick { font-size: 13px; max-height: 400px; overflow: auto; }
.strata-box-pick-crumbs {
  padding: 6px 2px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.strata-box-pick-crumb {
  background: transparent;
  border: 0;
  color: var(--accent, #667eea);
  cursor: pointer;
  padding: 2px 4px;
  font: inherit;
}
.strata-box-pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.strata-box-pick-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 4px;
}
.strata-box-pick-row:hover {
  background: var(--input-bg);
}
.strata-box-pick-row.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
.strata-box-pick-item {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 4px 0 0 4px;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.strata-box-pick-row.is-selected .strata-box-pick-item {
  color: var(--accent);
  font-weight: 600;
}
.strata-box-pick-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.strata-box-pick-item-check {
  flex: 0 0 auto;
  color: var(--accent);
}
.strata-box-pick-into {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0 4px 4px 0;
  color: var(--text-tertiary);
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0.55;
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease;
}
.strata-box-pick-row:hover .strata-box-pick-into {
  opacity: 1;
}
.strata-box-pick-into:hover {
  color: var(--text-primary);
  background: var(--row-hover);
}
.strata-box-pick-into:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.strata-box-pick-empty {
  color: var(--text-secondary);
  padding: 10px;
  font-size: 13px;
}
.strata-box-pick-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.strata-box-pick-search {
  flex: 1 1 auto;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: var(--button-radius);
  font-size: 14px;
}
.strata-box-pick-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.strata-box-pick-count {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono, ui-monospace, monospace);
  white-space: nowrap;
}
.strata-box-pick-refresh {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-secondary);
  border-radius: var(--button-radius);
  cursor: pointer;
  touch-action: manipulation;
}
.strata-box-pick-refresh:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.strata-box-pick-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.strata-box-pick-refresh:disabled svg {
  animation: strata-box-pick-spin 0.9s linear infinite;
}
@keyframes strata-box-pick-spin {
  to { transform: rotate(360deg); }
}
.strata-box-pick-meta {
  padding: 2px 0 8px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.strata-box-pick-stale {
  font-family: var(--font-mono, ui-monospace, monospace);
}
.strata-box-pick-stale.is-loading {
  color: var(--accent);
}

/* Keep-open batch wizard: progress header + Save/Skip controls. Both sit
   OUTSIDE the scrolling .strata-box-pick so they stay pinned while the
   folder list scrolls. */
.strata-box-pick-batch-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 2px 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.strata-box-pick-batch-progress {
  flex: 0 0 auto;
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.strata-box-pick-batch-project {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.strata-box-pick-batch-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.strata-box-pick-batch-actions .strata-box-pick-batch-skip {
  flex: 0 0 auto;
}
.strata-box-pick-batch-actions .strata-box-pick-batch-save {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.strata-box-pick-batch-note {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  font-size: 13px;
  color: var(--error);
}
.strata-box-pick-batch-actions .strata-box-pick-batch-retry {
  flex: 0 0 auto;
}
.strata-box-pick-batch-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Phone: collapse admin grids to single column */
@media (max-width: 640px) {
  .strata-box-template-row {
    grid-template-columns: 1fr;
  }
  .strata-box-audit-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .strata-box-audit-filters input,
  .strata-box-audit-filters select {
    font-size: 16px; /* prevent iOS zoom */
  }
}

/* ============================================================
   Outlook Sync integration panel
   Lives inside .strata-integ-content-inner; reuses the shared
   .strata-integ-section for section wrappers so only a few
   component-specific styles are needed here.
   ============================================================ */

.strata-outlook-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.strata-outlook-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.strata-outlook-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.strata-outlook-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.strata-outlook-attention {
  font-size: 12px;
  color: var(--accent);
  margin-top: 2px;
  font-weight: 500;
}

.strata-outlook-triage-row {
  margin-top: 12px;
}
.strata-outlook-triage-row .btn-primary { width: 100%; }

.strata-outlook-queue-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-primary);
}
.strata-outlook-queue-row > span:nth-child(2) { flex: 1; }
.strata-outlook-queue-row .btn-secondary {
  padding: 4px 10px;
  font-size: 11px;
}

/* ============================================================
   Outlook Sync -- Triage modal (Phase D)
   Full-viewport overlay. Mounts on document.body, so selectors
   are unscoped.
   ============================================================ */

.os-triage-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.os-triage-panel {
  background: var(--panel);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  max-height: 800px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.os-triage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.os-triage-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.os-triage-close {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.os-triage-close:hover { background: var(--overlay-bg); color: var(--text-primary); }

.os-triage-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.os-triage-list {
  width: 38%;
  min-width: 280px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 12px;
}

/* Progress bar: decision count, not meeting count. */
.os-triage-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  margin-bottom: 10px;
  background: var(--overlay-bg);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}
.os-triage-progress-matched { color: var(--success); font-weight: 600; }
.os-triage-progress-review  { color: var(--accent);  font-weight: 600; }
.os-triage-progress-skipped { color: var(--text-secondary); }
.os-triage-progress-dot     { opacity: 0.5; }

/* Section = collection of rows of one bucket type. */
.os-triage-section { margin-bottom: 14px; }

.os-triage-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  margin-bottom: 4px;
}
.os-triage-section-header-clickable { cursor: pointer; }
.os-triage-section-header-clickable:hover { color: var(--text-primary); }

.os-triage-header-actions {
  display: inline-flex;
  gap: 6px;
}

.os-triage-accept-all {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.os-triage-accept-all:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.os-triage-section-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Rows -- matched-project / series / meeting. Uniform look, distinct
   content via the .os-triage-row-* modifier classes below. */
.os-triage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}
.os-triage-row:hover { background: var(--overlay-bg); }
.os-triage-row.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}

.os-triage-row-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-triage-row-project .pl-project-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.os-triage-row-meeting .os-triage-row-time,
.os-triage-row-meeting .os-triage-row-date {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.os-triage-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}
.os-triage-badge-new {
  background: var(--overlay-bg);
  color: var(--text-secondary);
}

.os-triage-chevron {
  width: 14px;
  text-align: center;
  color: var(--text-secondary);
  font-weight: 600;
}

.os-triage-matched-group { display: flex; flex-direction: column; gap: 2px; }

.os-triage-sub-items {
  margin: 2px 0 4px 20px;
  padding: 4px 6px;
  background: var(--overlay-bg);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.os-triage-sub-item {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.os-triage-sub-time { font-weight: 600; }
.os-triage-sub-title { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-triage-sub-date  { font-size: 10px; }

/* Processing section: collapsed-by-default summary + progress bar. */
.os-triage-section-processing { margin-bottom: 10px; }
.os-triage-section-processing .os-triage-section-header {
  color: var(--accent);
}
.os-triage-section-processing .os-triage-meta {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
  margin-left: auto;
}
.os-triage-meta-warn { color: var(--warning, #f59e0b) !important; }

.os-triage-progress-bar {
  height: 4px;
  margin: 4px 10px 6px;
  background: var(--overlay-bg);
  border-radius: 2px;
  overflow: hidden;
}
.os-triage-progress-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.25s ease;
}

.os-triage-processing-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-primary);
}

.os-triage-processing-row.failed {
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border-color: color-mix(in srgb, var(--error) 30%, transparent);
}

.os-triage-processing-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-triage-processing-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: lowercase;
}

.os-triage-processing-error {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--error);
}

.os-triage-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: os-triage-spin 0.8s linear infinite;
}

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

.os-triage-icon-queued,
.os-triage-icon-fail {
  display: inline-block;
  width: 12px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-secondary);
}
.os-triage-icon-fail { color: var(--error); }

@media (prefers-reduced-motion: reduce) {
  .os-triage-spinner {
    animation: none;
    border-top-color: var(--accent);
  }
}

.os-triage-action {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.os-triage-group { margin-bottom: 10px; }

.os-triage-group-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 6px;
}

.os-triage-group-header[data-triage-action] { cursor: pointer; }
.os-triage-group-header[data-triage-action]:hover { color: var(--text-primary); }

.os-triage-chevron {
  display: inline-block;
  width: 12px;
  text-align: center;
  font-weight: 600;
}

.os-triage-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.os-triage-group-empty {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 10px;
}

.os-triage-item {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text-primary);
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 8px;
  align-items: center;
}

.os-triage-item:hover { background: var(--overlay-bg); }
.os-triage-item.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}

.os-triage-item-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.os-triage-item-title {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-triage-item-date {
  font-size: 10px;
  color: var(--text-secondary);
}

.os-triage-empty-hint {
  color: var(--text-secondary);
  font-size: 12px;
  padding: 10px;
  text-align: center;
}

.os-triage-empty {
  color: var(--text-secondary);
  font-size: 13px;
  margin: auto;
  text-align: center;
}

.os-triage-meta {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.os-triage-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.os-triage-meta-line {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.os-triage-meta-line a { color: var(--accent); }

.os-triage-primary,
.os-triage-runnerup,
.os-triage-bulk,
.os-triage-project {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.os-triage-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  font-weight: 500;
}
.os-triage-primary:hover { opacity: 0.9; }
.os-triage-primary .pl-project-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }

.os-triage-runnerup {
  background: var(--overlay-bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 8px 12px;
  font-size: 12px;
}
.os-triage-runnerup:hover { border-color: var(--accent); color: var(--accent); }

.os-triage-conf {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.8;
}

.os-triage-search {
  width: 100%;
  padding: 8px 10px;
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  margin-top: 4px;
}
.os-triage-search:focus { outline: none; border-color: var(--accent); }

.os-triage-projects {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.os-triage-project {
  background: transparent;
  color: var(--text-primary);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 8px 10px;
}
.os-triage-project:last-child { border-bottom: 0; }
.os-triage-project:hover { background: var(--overlay-bg); }
.os-triage-project .pl-project-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.os-triage-jobcode {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono, monospace);
}

.os-triage-bulk {
  background: var(--overlay-bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  font-size: 12px;
}
.os-triage-bulk:hover { border-color: var(--accent); color: var(--accent); }

.os-triage-footer {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.os-triage-footer .btn-secondary { flex: 1; }

.os-triage-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  margin-bottom: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

@media (max-width: 760px) {
  .os-triage-overlay { padding: 0; }
  .os-triage-panel {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border: 0;
  }
  .os-triage-body { flex-direction: column; }
  .os-triage-list {
    width: 100%;
    max-height: 40%;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .os-triage-search { font-size: 16px; /* iOS zoom */ }
}

/* Outlook EMAIL triage (oet-*) -- shares the os-triage-* shell shell
   above; these are the email-specific additions (attachment glyph +
   the TR2 two-field File card). Tokens only; both themes via tokens. */
.oet-attach {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  opacity: 0.85;
}

.oet-file-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--overlay-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oet-scan-badge {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.oet-scan-badge .oet-scan-dup { color: var(--warning, #f59e0b); font-weight: 600; }
.oet-scan-badge .oet-scan-new { color: var(--success); font-weight: 600; }
.oet-scan-badge .oet-scan-defer { color: var(--accent); font-weight: 600; }

.oet-fields { display: flex; gap: 8px; }
.oet-field { display: flex; flex-direction: column; gap: 3px; }
.oet-field-abbr { width: 96px; flex-shrink: 0; }
.oet-field-desc { flex: 1; min-width: 0; }
.oet-field-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.oet-field-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
}
.oet-field-input:focus { outline: none; border-color: var(--accent); }

.oet-file-card .os-triage-primary[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.oet-preview {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 0 0;
}
.oet-preview strong {
  color: var(--text-primary);
  font-family: var(--font-mono, monospace);
}

.oet-cta {
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oet-cta a { color: var(--accent); }

/* =====================================================================
   Email-triage design-study restyle (oet-triage scope ONLY).
   Scoped to .oet-triage so it never bleeds onto the calendar triage,
   which shares the os-triage-* shell classes. Tokens only; both themes
   resolve via tokens. See design/triage-components.jsx for the target.
   ===================================================================== */

.oet-ico { flex-shrink: 0; vertical-align: middle; }

/* NB: the full-viewport surface is intentionally NOT styled here. The
   triage is being re-homed into the project-email lens MODULE (Activity +
   Triage tabs) so it renders inside the platform content area and never
   obscures the sidebar/topbar. Until that lands it keeps the shared
   centered-card overlay chrome from .os-triage-overlay. */

/* --- Bucket headers stick to the top of the list while scrolling so the
   user keeps orientation; the list opens pinned to the top (see _mount). --- */
.oet-triage .oet-bucket-header { position: sticky; top: 0; z-index: 3; }

/* --- Right-panel context block (verify a match without leaving triage) --- */
.oet-ctx {
  display: flex; flex-direction: column; gap: 4px;
  padding: 9px 11px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px;
}
.oet-ctx-line { display: flex; gap: 8px; font-size: 11px; align-items: baseline; }
.oet-ctx-key {
  flex-shrink: 0; width: 48px; color: var(--text-tertiary);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 9px;
}
.oet-ctx-val { flex: 1; min-width: 0; color: var(--text-secondary); word-break: break-word; }
.oet-ctx-preview {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.55;
  padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--border);
  max-height: 110px; overflow-y: auto;
}
.oet-ctx-more {
  align-self: flex-start; margin-top: 2px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--accent);
}
.oet-ctx-more:hover { text-decoration: underline; }
.oet-ctx-body-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-tertiary); padding-top: 6px; }
.oet-ctx-body {
  white-space: pre-wrap; word-break: break-word;
  font-size: 13px; color: var(--text-primary); line-height: 1.65;
  padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border);
  max-height: 360px; overflow-y: auto;
  /* Readable measure: paragraphs read better with a column cap. */
  max-width: 68ch;
}
.oet-ctx-bodyfoot { padding-top: 4px; }
.oet-ctx-link { font-size: 11px; font-weight: 600; color: var(--accent); }

/* =====================================================================
   Email workspace (outlook-email-lens module): Activity + Triage tabs.
   The module is full-bleed so the inline triage gets a bounded height
   to scroll within (precedent: dam / ai-renderings full-bleed override).
   ===================================================================== */
.strata-content:has(.strata-module-container[data-module="outlook-email-lens"]) { padding: 0; }
.strata-module-container[data-module="outlook-email-lens"] {
  max-width: none; margin: 0; padding: 0; height: 100%;
}
.oea-ws { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.oea-tabbar {
  flex-shrink: 0; display: flex; gap: 4px;
  padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.oea-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  padding: 12px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  touch-action: manipulation;
}
.oea-tab:hover { color: var(--text-primary); }
.oea-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.oea-tabhost { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.oea-tabpane { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }

/* Inline triage: fill the tab host, drop the floating-card chrome. */
.oet-triage-inline { flex: 1; min-height: 0; display: flex; background: var(--panel); }
.oet-triage-inline .os-triage-panel {
  max-width: none; max-height: none; width: 100%; height: 100%;
  border: 0; border-radius: 0; box-shadow: none; background: var(--panel);
}

.oea-header-controls { display: flex; gap: 8px; align-items: center; }

/* Project picker pill + popover (Activity filter; FM1). */
.oea-combo { position: relative; display: inline-block; }
.oea-combo-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; cursor: pointer; max-width: 240px; touch-action: manipulation;
}
.oea-combo-pill:hover { border-color: var(--border-strong); }
.oea-combo-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oea-combo-chev { flex-shrink: 0; opacity: 0.7; }
.oea-combo-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.oea-combo-dot-none { background: var(--border-strong); }
.oea-combo-pop {
  /* position:fixed + coords set in JS so the scroll pane can't clip it */
  z-index: 4000; background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,0.35));
  padding: 6px; display: flex; flex-direction: column; gap: 6px; max-height: 340px;
}
.oea-combo-search {
  font-family: inherit; font-size: 13px; color: var(--text-primary);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 9px; width: 100%;
}
.oea-combo-list { overflow-y: auto; display: flex; flex-direction: column; }
.oea-combo-opt {
  display: flex; align-items: center; gap: 8px; text-align: left;
  font-family: inherit; font-size: 13px; color: var(--text-primary);
  background: none; border: 0; border-radius: 6px; padding: 8px 9px; cursor: pointer; width: 100%;
}
.oea-combo-opt:hover { background: var(--panel-2); }
.oea-combo-opt[aria-selected="true"] { background: var(--panel-2); font-weight: 600; }
.oea-combo-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Filing tab (FM1). */
.oea-file-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.oea-file-row:last-child { border-bottom: 0; }
.oea-file-row-hl { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.oea-file-proj { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.oea-file-name { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oea-file-code { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.oea-file-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.oea-file-status { font-size: 12px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oea-file-sub { font-size: 11px; }
.oea-file-ok { color: var(--text-secondary); }
.oea-file-warn { color: var(--warning, var(--text-secondary)); }
.oea-file-pending { color: var(--text-tertiary); }
.oea-file-act { flex-shrink: 0; }
.oea-file-btn { white-space: nowrap; }

/* Unified filing row (folder + category): collapsed summary + expand panel. */
.oea-fil-summary { cursor: pointer; gap: 10px; }
.oea-fil-summary:hover { background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
.oea-fil-summary.expanded { background: var(--panel-2); }
.oea-fil-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.oea-fil-chips { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.oea-fil-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 230px;
  padding: 3px 9px; border-radius: 999px; font-size: 12px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-secondary);
}
.oea-fil-chip svg { flex-shrink: 0; opacity: 0.8; }
.oea-fil-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oea-fil-ok { color: var(--text-secondary); }
.oea-fil-warn { color: var(--warning, var(--text-secondary)); border-color: color-mix(in srgb, var(--warning, var(--border)) 40%, var(--border)); }
.oea-fil-pending { color: var(--text-tertiary); }
.oea-fil-chev { flex-shrink: 0; color: var(--text-tertiary); display: inline-flex; transition: transform 0.15s ease; }
.oea-fil-summary.expanded .oea-fil-chev { transform: rotate(90deg); }
.oea-fil-panel {
  padding: 4px 14px 14px 30px; border-bottom: 1px solid var(--border); background: var(--panel-2);
  display: flex; flex-direction: column; gap: 14px;
}
.oea-fil-sub { display: flex; flex-direction: column; gap: 8px; }
.oea-fil-sub-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); }
.oea-fil-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oea-fil-boxhint { font-size: 11px; color: var(--warning, var(--text-secondary)); }

/* Per-project Outlook category color + name editor (used inside the panel). */
.oea-cat-swatch {
  width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; display: inline-block;
  border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
}
.oea-cat-editor {
  display: flex; flex-direction: column; gap: 9px;
}
.oea-cat-name {
  width: 100%; max-width: 320px; padding: 6px 9px; font-size: 13px; font-family: inherit;
  color: var(--text-primary); background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
}
.oea-cat-name:focus { outline: none; border-color: var(--accent); }
.oea-cat-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.oea-cat-pick {
  width: 22px; height: 22px; border-radius: 5px; cursor: pointer; padding: 0;
  border: 2px solid transparent; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 14%, transparent) inset;
}
.oea-cat-pick:hover { transform: scale(1.08); }
.oea-cat-pick.on { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 4px var(--accent); }
.oea-cat-editor-actions { display: flex; gap: 8px; }

/* Create-all modal (FM2) -- container-mounted overlay (module is full-bleed). */
.oea-ca-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.oea-ca-modal {
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.4));
  width: 560px; max-width: 100%; max-height: 82vh; display: flex; flex-direction: column;
}
.oea-ca-head { padding: 16px 18px 4px; }
.oea-ca-head h2 { margin: 0; font-size: 16px; }
.oea-ca-parent { padding: 10px 18px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--border); }
.oea-ca-plabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
.oea-ca-pselect, .oea-ca-pnew {
  font-family: inherit; font-size: 13px; color: var(--text-primary);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; width: 100%;
}
.oea-ca-listhead { display: flex; justify-content: space-between; align-items: center; padding: 8px 18px; font-size: 12px; color: var(--text-secondary); }
.oea-ca-link { background: none; border: 0; color: var(--accent); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.oea-ca-sub { margin: 4px 18px 0; font-size: 12px; color: var(--text-secondary); }
.oea-ca-list { overflow-y: auto; padding: 0 18px; flex: 1; min-height: 0; }
.oea-ca-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.oea-ca-row:last-child { border-bottom: 0; }
.oea-ca-rowtop { display: flex; align-items: center; gap: 8px; }
.oea-ca-rowstatus { padding-left: 26px; margin-top: 2px; }
.oea-ca-rowmap { font-size: 11px; color: var(--text-tertiary); }
.oea-ca-rowunmapped { font-size: 11px; color: var(--warning, var(--text-secondary)); }
.oea-ca-rowchecking { font-size: 11px; color: var(--text-tertiary); font-style: italic; }
.oea-ca-check { width: 16px; height: 16px; flex-shrink: 0; }
.oea-ca-name {
  flex: 1; min-width: 0; font-family: inherit; font-size: 13px; color: var(--text-primary);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px;
}
.oea-ca-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }
.oea-ch-spacer { flex: 1; }

/* Custom parent-folder picker (shared: create-all modal + chooser) */
.oea-parent-control { position: relative; }
.oea-pp-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-family: inherit; font-size: 13px; color: var(--text-primary); text-align: left;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer;
}
.oea-pp-trigger:hover { border-color: var(--border-strong); }
.oea-pp-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oea-pp-chev { flex-shrink: 0; opacity: 0.7; }
.oea-pp-ico { flex-shrink: 0; opacity: 0.85; }
.oea-pp-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,0.35));
  padding: 5px; max-height: 240px; overflow-y: auto;
}
.oea-pp-pop[hidden] { display: none; }
.oea-pp-search {
  position: sticky; top: 0; z-index: 1; box-sizing: border-box;
  width: 100%; margin-bottom: 5px;
  font-family: inherit; font-size: 13px; color: var(--text-primary);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px;
}
.oea-pp-list { display: flex; flex-direction: column; }
.oea-pp-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font-family: inherit; font-size: 13px; color: var(--text-primary);
  background: none; border: 0; border-radius: 6px; padding: 8px 9px; cursor: pointer;
}
.oea-pp-opt:hover { background: var(--panel-2); }
.oea-pp-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oea-pp-new { color: var(--accent); font-weight: 600; margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; }
.oea-ca-pnew { margin-top: 8px; }

/* Per-project folder chooser */
.oea-ch-modal { width: 520px; }
.oea-ch-tabs { display: flex; gap: 4px; padding: 8px 18px 0; border-bottom: 1px solid var(--border); }
.oea-ch-tab {
  appearance: none; background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  padding: 8px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.oea-ch-tab:hover { color: var(--text-primary); }
.oea-ch-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Default overflow visible so the create-mode parent popover isn't clipped;
   map mode opts into scrolling for its (potentially long) folder list. */
.oea-ch-body { padding: 12px 18px; overflow: visible; min-height: 220px; }
.oea-ch-body.oea-ch-body-scroll { overflow-y: auto; max-height: 52vh; }
.oea-ch-name {
  font-family: inherit; font-size: 13px; color: var(--text-primary);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; width: 100%;
}
.oea-ch-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; margin-bottom: 8px; }
.oea-ch-crumb { background: none; border: 0; color: var(--accent); font-family: inherit; font-size: 12px; cursor: pointer; padding: 2px 2px; }
.oea-ch-sep { color: var(--text-tertiary); }
.oea-ch-search {
  font-family: inherit; font-size: 13px; color: var(--text-primary); width: 100%;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; margin-bottom: 8px;
}
.oea-ch-flist { display: flex; flex-direction: column; }
.oea-ch-frow { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); }
.oea-ch-frow:last-child { border-bottom: 0; }
.oea-ch-fpick {
  flex: 1; min-width: 0; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--text-primary); padding: 9px 6px; border-radius: 6px;
}
.oea-ch-fpick:hover { background: var(--panel-2); }
.oea-ch-fopen {
  flex-shrink: 0; background: none; border: 0; cursor: pointer; color: var(--text-tertiary);
  font-size: 18px; line-height: 1; padding: 6px 10px; border-radius: 6px;
}
.oea-ch-fopen:hover { background: var(--panel-2); color: var(--text-primary); }
.oea-ch-hint { font-size: 11px; color: var(--text-tertiary); margin: 8px 0 0; }

@media (max-width: 760px) {
  .oea-ch-modal { width: 100%; }
  .oea-ch-name, .oea-ch-search { font-size: 16px; }
}

@media (max-width: 760px) {
  .oea-tabpane { padding: 12px; }
  .oea-combo-pill { font-size: 14px; max-width: 160px; }
  .oea-file-row { flex-wrap: wrap; gap: 8px; }
  .oea-file-meta { align-items: flex-start; }
  .oea-ca-name, .oea-ca-pselect, .oea-ca-pnew { font-size: 16px; } /* prevent iOS zoom */
}

/* --- Panel chrome: banner slot + keyboard legend --- */
.oet-triage .oet-banner-slot:empty { display: none; }

.oet-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  border-bottom: 1px solid var(--accent-line);
}
.oet-banner-error {
  background: color-mix(in srgb, var(--error) 12%, var(--panel));
  border-bottom-color: color-mix(in srgb, var(--error) 35%, transparent);
}
.oet-banner-text { flex: 1; font-size: 12px; font-weight: 600; color: var(--text-primary); }
.oet-banner-fail {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--error); color: var(--studio-ink); font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.oet-banner-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 9px;
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 5px;
  font-size: 10px; font-weight: 700; cursor: pointer;
  font-family: inherit; touch-action: manipulation;
}
.oet-banner-btn:hover { background: var(--accent-soft); }
.oet-banner-error .oet-banner-btn { color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, transparent); }

.oet-keylegend {
  display: flex; flex-wrap: wrap; gap: 4px 12px; flex-shrink: 0;
  padding: 7px 16px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}
.oet-key { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-tertiary); }
.oet-key kbd {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  background: var(--input-bg); border: 1px solid var(--border-strong);
  border-radius: 3px; padding: 1px 5px; color: var(--text-secondary); line-height: 1.5;
}

/* --- Color-coded collapsible bucket groups --- */
.oet-triage .oet-bucket { margin-bottom: 6px; }
.oet-bucket-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer; user-select: none;
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.oet-bucket-header:hover { background: color-mix(in srgb, var(--text-primary) 4%, var(--panel-2)); }
.oet-bucket-chev { display: inline-flex; color: var(--text-tertiary); transition: transform 0.15s; }
.oet-bucket-chev.collapsed { transform: rotate(-90deg); }

/* Outlook-style Focused | Other banner (triage). Sticky two-tab header. */
.oet-focus-banner {
  display: flex; gap: 4px; align-items: stretch;
  padding: 0 12px; background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.oet-focus-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 6px; margin-bottom: -1px; cursor: pointer; touch-action: manipulation;
}
.oet-focus-tab:hover { color: var(--text-primary); }
.oet-focus-tab-on { color: var(--accent); border-bottom-color: var(--accent); }
.oet-focus-count {
  font-size: 11px; font-weight: 600; color: var(--text-tertiary);
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center;
}
.oet-focus-tab-on .oet-focus-count { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.oet-bucket-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-tertiary);
}
.oet-bucket-suggested .oet-bucket-label { color: var(--warning); }
.oet-bucket-matched   .oet-bucket-label { color: var(--success); }
.oet-count-pill {
  font-size: 10px; font-weight: 600; color: var(--text-tertiary);
  background: var(--input-bg); border-radius: 100px; padding: 1px 7px; flex-shrink: 0;
}
.oet-bucket-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.oet-assign-all {
  height: 22px; padding: 0 9px; font-size: 9px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 4px;
  cursor: pointer; font-family: inherit; white-space: nowrap; touch-action: manipulation;
}
.oet-assign-all:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.oet-bucket-items { display: flex; flex-direction: column; }

/* --- Backlog burn-down controls (slice filter + scan older mail) --- */
.oet-list-controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.oet-list-filter { position: relative; flex: 1 1 180px; display: flex; align-items: center; }
.oet-list-filter-input {
  width: 100%; padding: 6px 26px 6px 10px; font-size: 12px; font-family: inherit;
  color: var(--text-primary); background: var(--input-bg);
  border: 1px solid var(--border); border-radius: 4px;
}
.oet-list-filter-input:focus { outline: none; border-color: var(--accent); }
.oet-list-filter-input::placeholder { color: var(--text-tertiary); }
.oet-list-filter-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; color: var(--text-tertiary);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 5px; touch-action: manipulation;
}
.oet-list-filter-clear:hover { color: var(--text-primary); }
.oet-scan-older {
  flex: none; height: 30px; padding: 0 10px; font-size: 11px; font-weight: 600; font-family: inherit;
  color: var(--text-secondary); background: var(--input-bg);
  border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
  white-space: nowrap; touch-action: manipulation;
}
.oet-scan-older:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
.oet-scan-older:disabled { opacity: 0.6; cursor: default; }
.oet-scan-status { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
@media (max-width: 760px) {
  /* Match the triage surface's phone breakpoint (the other triage inputs use
     760px). iOS-zoom guard on the filter input + larger tap targets for the
     new controls (44px scan button; 32px clear hit-area -- full 44 is awkward
     inside a single-line input). */
  .oet-list-filter-input { font-size: 16px; padding-right: 36px; }
  .oet-list-filter-clear { min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; }
  .oet-scan-older { min-height: 44px; }
}

/* --- Today digest (lens daily hook) --- */
.oet-today { display: flex; flex-direction: column; max-width: 1080px; }
.oet-today-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 28px;
}
.oet-today-card {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 16px 18px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; font-family: inherit; text-align: left; touch-action: manipulation;
  transition: border-color 0.12s, background 0.12s;
}
.oet-today-card:hover { border-color: var(--border-strong); }
.oet-today-num { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.oet-today-lbl { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.oet-today-hint { font-size: 11px; color: var(--text-tertiary); }
.oet-today-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary); margin: 0 0 10px;
}
.oet-today-projects { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.oet-today-proj {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-family: inherit; text-align: left; touch-action: manipulation;
  transition: border-color 0.12s;
}
.oet-today-proj:hover { border-color: var(--border-strong); }
.oet-today-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.oet-today-proj-name { flex: 1; font-size: 14px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oet-today-proj-count { font-size: 13px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 16px; text-align: right; }
.oet-today-proj-chev { color: var(--text-tertiary); font-size: 18px; line-height: 1; }
.oet-today-ready {
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 100px; padding: 3px 10px;
}
.oet-today-cta { align-self: flex-start; min-width: 220px; }

/* --- Email row --- */
.oet-triage .oet-email-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px 7px 13px;
  border: 0; border-left: 3px solid transparent; border-radius: 0;
  background: transparent; cursor: pointer; user-select: none; outline: none;
  transition: background 0.1s, border-color 0.1s;
}
.oet-triage .oet-email-row:hover { background: var(--row-hover); }
.oet-triage .oet-email-row.active {
  background: var(--accent-soft); border-left-color: var(--accent);
}
.oet-triage .oet-email-row.oet-row-running { border-left-color: var(--accent); }
.oet-triage .oet-email-row.oet-row-done { opacity: 0.5; cursor: default; }
.oet-row-dotwrap { display: inline-flex; align-items: center; justify-content: center; width: 12px; flex-shrink: 0; }
.oet-row-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.oet-row-dot.sel { background: var(--accent); }
.oet-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.oet-row-line1 { display: flex; align-items: center; gap: 6px; }
.oet-row-sender {
  flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oet-row-time { font-size: 10px; color: var(--text-tertiary); flex-shrink: 0; }
.oet-row-subject {
  font-size: 11px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oet-email-row.active .oet-row-subject { color: var(--text-primary); }
.oet-row-attach { display: inline-flex; align-items: center; gap: 2px; font-size: 9px; color: var(--text-tertiary); flex-shrink: 0; }
.oet-row-spin { width: 10px; height: 10px; border-width: 2px; }

/* --- Status chip --- */
.oet-chip {
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: 100px; padding: 1px 6px;
  font-size: 9px; font-weight: 700; flex-shrink: 0; white-space: nowrap;
}
.oet-chip-running   { background: var(--accent-soft);  color: var(--accent); }
.oet-chip-done      { background: var(--success-soft); color: var(--success); }
.oet-chip-error     { background: var(--error-soft);   color: var(--error); }
.oet-chip-skipped,
.oet-chip-internal  { background: var(--panel-2);      color: var(--text-tertiary); }
.oet-chip-duplicate { background: var(--warning-soft); color: var(--warning); }
.oet-chip-spin { width: 8px; height: 8px; border-width: 1.5px; }

/* --- Matched per-project sub-group --- */
.oet-proj-group { display: flex; flex-direction: column; }
.oet-triage .oet-proj-header {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 5px 10px 5px 13px; cursor: pointer; user-select: none; outline: none;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  border: 0; border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border); border-radius: 0;
}
.oet-triage .oet-proj-header:hover { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.oet-triage .oet-proj-header.active { background: var(--accent-soft); border-left-color: var(--accent); }
.oet-proj-header .pl-project-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.oet-proj-name {
  flex: 1; min-width: 0; font-size: 11px; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oet-proj-code { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); flex-shrink: 0; }
.oet-proj-chev { display: inline-flex; color: var(--text-tertiary); transition: transform 0.15s; }
.oet-proj-chev.collapsed { transform: rotate(-90deg); }
.oet-proj-items { display: flex; flex-direction: column; }
.oet-proj-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.oet-proj-item.oet-row-done { opacity: 0.45; }
.oet-subdot { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.oet-proj-item-sender {
  flex: 1; min-width: 0; font-size: 10px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oet-proj-item-time { font-size: 9px; color: var(--text-tertiary); flex-shrink: 0; }

/* --- Sort lane: non-project type sub-groups (Unmatched grouped by type) --- */
.oet-type-group { display: flex; flex-direction: column; }
.oet-triage .oet-type-header {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 5px 10px 5px 13px; cursor: pointer; user-select: none; outline: none;
  background: var(--panel-2);
  border: 0; border-left: 3px solid var(--border-strong);
  border-bottom: 1px solid var(--border); border-radius: 0;
}
.oet-triage .oet-type-header:hover { background: color-mix(in srgb, var(--text-primary) 4%, var(--panel-2)); }
.oet-type-name {
  flex: 1; min-width: 0; font-size: 11px; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oet-type-items { display: flex; flex-direction: column; }
/* The Group-by-type toggle in the backlog controls row. */
.oet-groupby-toggle {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-family: inherit; font-size: 11px; font-weight: 600;
  color: var(--text-secondary); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  padding: 5px 9px; cursor: pointer; touch-action: manipulation; white-space: nowrap;
}
.oet-groupby-toggle:hover { color: var(--text-primary); border-color: var(--border-strong); }
.oet-groupby-toggle.on {
  color: var(--accent); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
/* Sort lane "Move all -> folder" picker (per type-group). */
.oet-move-all { display: inline-flex; align-items: center; gap: 3px; }
.oet-move-all svg { width: 9px; height: 9px; }
.oet-folder-menu {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 10px 4px 24px; padding: 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
}
.oet-folder-opt {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 8px; font-size: 11px; font-family: inherit; text-align: left;
  color: var(--text-primary); background: none; border: 0; border-radius: 4px;
  cursor: pointer; touch-action: manipulation;
}
.oet-folder-opt:hover { background: var(--accent-soft); color: var(--accent); }
.oet-folder-opt svg { color: var(--text-tertiary); flex-shrink: 0; }
.oet-folder-opt:hover svg { color: var(--accent); }
.oet-folder-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oet-folder-menu-msg {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; font-size: 11px; color: var(--text-secondary);
}

/* --- Thread-first grouping (Suggested / Unmatched / Skipped) --- */
.oet-thread-group { display: flex; flex-direction: column; }
.oet-thread-toggle {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: none; border: 0; cursor: pointer; padding: 2px 4px; margin-left: 4px;
  color: var(--text-tertiary); touch-action: manipulation;
}
.oet-thread-toggle:hover { color: var(--text-primary); }
.oet-thread-chev { display: inline-flex; transition: transform 0.15s; }
.oet-thread-chev.collapsed { transform: rotate(-90deg); }
.oet-thread-items { display: flex; flex-direction: column; }

/* --- File card restyle --- */
.oet-triage .oet-file-card { background: var(--panel-2); }
.oet-file-card-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.oet-triage .oet-scan-badge {
  padding: 5px 9px; background: var(--panel); border: 1px solid var(--border); border-radius: 7px;
}
.oet-scan-sep { color: var(--text-tertiary); }
.oet-filelist { display: flex; flex-direction: column; gap: 4px; }
.oet-fileitem {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px;
  border-radius: 6px; font-size: 11px;
  background: var(--panel); border: 1px solid var(--border);
}
.oet-fileitem .oet-ico { color: var(--box-blue); }
.oet-fileitem.dup {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 25%, transparent);
  opacity: 0.8;
}
.oet-fileitem.dup .oet-ico { color: var(--warning); }
.oet-fileitem-name {
  flex: 1; min-width: 0; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oet-fileitem.dup .oet-fileitem-name { text-decoration: line-through; }
.oet-fileitem-size { color: var(--text-tertiary); flex-shrink: 0; }
.oet-fileitem-skip { font-size: 9px; color: var(--warning); font-weight: 700; flex-shrink: 0; }

.oet-field-mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }

.oet-triage .oet-preview {
  padding: 6px 9px; background: var(--input-bg); border-radius: 6px;
}
.oet-preview-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary); margin-bottom: 3px;
}
.oet-preview-name { font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); word-break: break-all; margin-bottom: 3px; }
.oet-preview-path { display: flex; align-items: center; gap: 3px; font-size: 10px; color: var(--box-blue); }

.oet-triage .oet-filebtn {
  justify-content: center; gap: 6px;
  background: var(--box-blue); color: var(--studio-ink); border-color: var(--box-blue);
}
.oet-triage .oet-filebtn:hover { opacity: 0.9; }
.oet-triage .oet-filebtn[disabled] { opacity: 0.5; cursor: not-allowed; }
.oet-filebox-btn { justify-content: center; gap: 6px; color: var(--box-blue); }
.oet-filebox-btn:hover { border-color: var(--box-blue); color: var(--box-blue); }

/* --- Batch "File to Box..." review modal --- */
.oet-batch-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.oet-batch-card {
  background: var(--panel); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px;
  width: 100%; max-width: 560px; max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.oet-batch-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.oet-batch-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.oet-batch-title .oet-ico { color: var(--box-blue); }
.oet-batch-sub { padding: 10px 18px 0; font-size: 11px; color: var(--text-secondary); }
.oet-batch-body {
  flex: 1; overflow-y: auto; padding: 12px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.oet-batch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2);
}
.oet-batch-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oet-batch-row-line1 { display: flex; align-items: center; gap: 8px; }
.oet-batch-row-sender {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oet-batch-row-time { font-size: 10px; color: var(--text-tertiary); flex-shrink: 0; }
.oet-batch-row-subject { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oet-batch-row-folder { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-tertiary); }
.oet-batch-row-folder .oet-batch-folder-name { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oet-batch-row-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.oet-batch-count { font-size: 10px; color: var(--text-secondary); white-space: nowrap; }
.oet-batch-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.oet-batch-progress { font-size: 11px; color: var(--text-secondary); }
.oet-batch-footer-actions { display: flex; gap: 8px; align-items: center; }
.oet-batch-footer-actions .os-triage-primary { width: auto; }

/* Review & approve modal (item 9) -- reuses the batch-modal chrome above. */
.oet-review-card { max-width: 560px; }
.oet-review-open { color: var(--accent); }
.oet-review-group { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.oet-review-group-head {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--panel); cursor: pointer;
}
.oet-review-group-head:hover { background: var(--panel-2); }
.oet-review-group-name {
  font-size: 12px; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oet-review-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px 7px 22px;
  border-radius: 6px; cursor: pointer;
}
.oet-review-row:hover { background: var(--panel-2); }
.oet-review-row.off { opacity: 0.5; }
.oet-review-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.oet-review-row-sender {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oet-review-row-subject {
  font-size: 11px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oet-review-conf {
  flex-shrink: 0; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-secondary); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}
.oet-review-cb {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--border); background: var(--panel-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.oet-review-cb.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* --- Single-message right panel (Project Match zone, confidence, etc.) --- */
.oet-mp-header { padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.oet-mp-subject { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin-bottom: 5px; }
.oet-mp-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); flex-wrap: wrap; }
.oet-mp-dot { opacity: 0.4; }
.oet-mp-time { color: var(--text-tertiary); }
.oet-mp-att { display: inline-flex; align-items: center; gap: 3px; }

.oet-mp-zone { display: flex; flex-direction: column; gap: 6px; }
.oet-mp-zone-head { display: flex; align-items: center; justify-content: space-between; }
.oet-mp-zone-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-tertiary);
}
.oet-mp-change {
  font-size: 10px; color: var(--text-tertiary); background: none; border: 0;
  cursor: pointer; font-family: inherit; padding: 0;
}
.oet-mp-change:hover { color: var(--accent); }
.oet-mp-card {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; display: flex; flex-direction: column; gap: 6px;
}
.oet-mp-card.oet-conf-high { border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.oet-mp-card.oet-conf-mid  { border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); }
.oet-mp-card.oet-conf-low  { border-color: color-mix(in srgb, var(--error) 30%, var(--border)); }
.oet-mp-card-top { display: flex; align-items: center; gap: 7px; }
.oet-mp-card-top .pl-project-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.oet-mp-card-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oet-mp-conf { display: flex; align-items: center; gap: 8px; }
.oet-mp-conf-bar { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.oet-mp-conf-fill { height: 100%; border-radius: 2px; transition: width 0.3s; background: var(--text-tertiary); }
.oet-conf-high .oet-mp-conf-fill, .oet-conf-high .oet-mp-conf-pct { color: var(--success); }
.oet-conf-high .oet-mp-conf-fill { background: var(--success); }
.oet-conf-mid .oet-mp-conf-fill { background: var(--warning); }
.oet-conf-mid .oet-mp-conf-pct { color: var(--warning); }
.oet-conf-low .oet-mp-conf-fill { background: var(--error); }
.oet-conf-low .oet-mp-conf-pct { color: var(--error); }
.oet-mp-conf-pct { font-size: 10px; font-weight: 700; color: var(--text-tertiary); flex-shrink: 0; }
.oet-mp-why { font-size: 10px; }
.oet-mp-why summary {
  cursor: pointer; color: var(--text-tertiary); list-style: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.oet-mp-why summary::-webkit-details-marker { display: none; }
.oet-mp-why summary::before { content: '+'; font-weight: 700; }
.oet-mp-why[open] summary::before { content: '-'; }
.oet-mp-why summary:hover { color: var(--text-secondary); }
.oet-mp-signals { margin-top: 5px; display: flex; flex-direction: column; gap: 3px; }
.oet-mp-signal { display: flex; gap: 4px; font-size: 10px; color: var(--text-secondary); }
.oet-mp-signal-dot { color: var(--text-tertiary); flex-shrink: 0; }
.oet-mp-confirm { justify-content: center; margin-top: 2px; }

.oet-mp-runnerup {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 10px; background: none; border: 1px solid var(--border); border-radius: 7px;
  cursor: pointer; text-align: left; font-family: inherit; color: var(--text-tertiary);
}
.oet-mp-runnerup:hover { border-color: var(--accent); }
.oet-mp-runnerup .pl-project-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.oet-mp-runnerup-text { flex: 1; min-width: 0; font-size: 10px; }
.oet-mp-runnerup-text strong { color: var(--text-secondary); }

.oet-mp-search-zone { display: flex; flex-direction: column; gap: 6px; }
.oet-mp-filecta { justify-content: center; gap: 7px; }
.oet-mp-locked {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 9px 11px; border-radius: 7px;
  background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
  font-size: 11px; color: var(--warning);
}
.oet-mp-locked .oet-ico { flex-shrink: 0; margin-top: 1px; }

/* --- Phone --- */
@media (max-width: 760px) {
  .oet-triage .oet-field-input { font-size: 16px; }
  .oet-keylegend { padding: 6px 12px; gap: 3px 8px; }
  .oet-batch-overlay { padding: 0; }
  .oet-batch-card { max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; }
}

@media (max-width: 760px) {
  .oet-field-input { font-size: 16px; /* iOS zoom */ }
  .oet-fields { flex-direction: column; }
  .oet-field-abbr { width: 100%; }
}

.strata-outlook-about {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 0;
}

@media (max-width: 640px) {
  .strata-outlook-account-row {
    flex-direction: column;
    align-items: stretch;
  }
  .strata-outlook-actions {
    flex-direction: column;
  }
  .strata-outlook-account-row .btn-secondary,
  .strata-outlook-account-row .btn-primary {
    width: 100%;
  }
}

/* ============================================================
   Stage 0 Phase 6: Presence conflict banner
   Rendered just above the module container by
   StrataPresence when peers are claiming the same resource.
   Sticky-pinned to the top of the content area so it stays
   visible even after the user scrolls. Non-blocking, dismissed
   automatically when peers release.
   ============================================================ */
.strata-presence-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: -24px -24px 16px -24px;
  background: color-mix(in srgb, var(--warning) 22%, var(--panel));
  color: var(--text-primary);
  border-bottom: 2px solid var(--warning);
  border-left: 4px solid var(--warning);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  position: sticky;
  top: 0;
  z-index: 50;
  animation: strata-presence-banner-in 0.2s ease-out;
}

.strata-presence-banner::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 25%, transparent);
  animation: strata-presence-pulse 1.6s ease-in-out infinite;
}

.strata-presence-banner-text {
  flex: 1;
  min-width: 0;
}

.strata-presence-banner-hint {
  color: var(--text-secondary);
  font-weight: 400;
  margin-left: 4px;
}

@keyframes strata-presence-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

@keyframes strata-presence-banner-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@media (max-width: 640px) {
  .strata-presence-banner {
    font-size: 13px;
    padding: 10px 12px;
    margin: -16px -16px 12px -16px;
  }
}

/* ==========================================================================
 * Project detail pane (right-slide side panel)
 * Replaces the dense project-edit modal. Lives at body level so the
 * list under it stays scrollable + interactive. URL state in
 * ?project=<id> so browser back/forward toggles open/close.
 * ========================================================================== */

/* Pane width + gap exposed as tokens so the shell padding and the
 * pane's off-screen transform stay in sync. */
:root {
  --strata-pmgmt-pane-width: clamp(360px, 32vw, 480px);
  --strata-pmgmt-pane-gap: 24px;
}

/* Two-panel host: list takes the full content width by default; the
 * pane is absolutely positioned at the right edge and slides in.
 * The shell's right-padding reserves the space for the pane and
 * animates the list's narrowing in lockstep with the slide-in.
 * Cards are full-width in both states (max-width:none on .strata-
 * mgmt-view) -- no more snap-grow when the pane opens.
 *
 * Both transitions use a pure ease-out cubic (no overshoot, no
 * acceleration kink) so they sync visually -- padding-right runs on
 * the main thread (layout) and transform on the compositor; matching
 * a monotonic decelerating curve avoids the perceived bounce that
 * cubic-bezier(0.4, 0, 0.2, 1)'s flat-then-steep shape produced. */
.strata-pmgmt-shell {
  position: relative;
  width: 100%;
  padding-right: 0;
  transition: padding-right 0.16s ease-out;
  /* Clip the pane's off-screen position so it doesn't poke into the
   * .strata-stsg-content padding before it slides in. */
  overflow: hidden;
}

.strata-pmgmt-shell.has-pane {
  padding-right: calc(var(--strata-pmgmt-pane-width) + var(--strata-pmgmt-pane-gap));
}

.strata-pmgmt-shell > .strata-mgmt-view {
  max-width: none;
  width: 100%;
}

.strata-pmgmt-pane {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--strata-pmgmt-pane-width);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  overflow: hidden;
  will-change: transform;
  /* Off-screen by default (translated past the right edge of the
   * shell + the gap), slides to 0 when .has-pane is set. Same
   * ease-out as the shell so list and pane decelerate in lockstep. */
  transform: translateX(calc(100% + var(--strata-pmgmt-pane-gap)));
  transition: transform 0.16s ease-out;
}

.strata-pmgmt-shell.has-pane > .strata-pmgmt-pane {
  transform: translateX(0);
}

.strata-pmgmt-pane-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  flex-shrink: 0;
}

.strata-pmgmt-pane-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.strata-pmgmt-pane-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.strata-pmgmt-pane-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.strata-pmgmt-pane-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.strata-pmgmt-pane-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata-pmgmt-pane-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.strata-pmgmt-pane-close:hover {
  background: var(--row-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.strata-pmgmt-pane-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.strata-pmgmt-pane-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 18px 24px;
}

/* Form sections inside the pane (used by Stage 6+). */
.strata-pmgmt-pane-section + .strata-pmgmt-pane-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.strata-pmgmt-pane-section-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.strata-pmgmt-pane-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 12px;
}

.strata-pmgmt-pane-row + .strata-pmgmt-pane-row {
  margin-top: 10px;
}

.strata-pmgmt-pane-row label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.strata-pmgmt-pane-row .input-field,
.strata-pmgmt-pane-row .dropdown {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

.strata-pmgmt-pane-row-stack {
  grid-template-columns: 1fr;
  gap: 4px;
}

.strata-pmgmt-pane-row-stack label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Narrow viewport: pane covers full content width with the list
 * underneath (visually hidden). Keeps the in-module model -- still
 * inside .strata-stsg-content, not a body-level overlay. */
@media (max-width: 880px) {
  .strata-pmgmt-shell.has-pane {
    padding-right: 0;
  }
  .strata-pmgmt-pane {
    left: 0;
    width: auto;
    transform: translateX(105%);
  }
}

.strata-pmgmt-pane-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.strata-pmgmt-pane-color-picker {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  cursor: pointer;
  flex-shrink: 0;
}

.strata-pmgmt-pane-color-text {
  flex: 1;
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  font-size: 12.5px;
}

.strata-pmgmt-pane-danger {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.strata-pmgmt-pane-danger-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.strata-pmgmt-pane-danger .btn-secondary,
.strata-pmgmt-pane-danger .btn-danger {
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
}

/* Pane scope adjustments for the legacy box-folder helper, so it
 * renders cleanly under the pane's section padding. */
.strata-pmgmt-pane-body .strata-modal-section-slot {
  margin: 0;
}

.strata-pmgmt-pane-body .strata-box-folder-history {
  margin-top: 10px;
  font-size: 12.5px;
}

.strata-pmgmt-pane-body .strata-box-folder-history summary {
  cursor: pointer;
  color: var(--text-secondary);
}

/* ==========================================================================
 * Project list -- card layout (studio-scoped)
 * Used by Studio Settings > Projects panel. Admin /_projects view
 * keeps the dense table.
 * ========================================================================== */

.strata-pmgmt-card-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.strata-pmgmt-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
  touch-action: manipulation;
}

.strata-pmgmt-card:hover {
  border-color: var(--border-strong);
  background: var(--row-hover);
}

.strata-pmgmt-card:focus-visible {
  outline: 2px solid var(--studio-color, var(--accent));
  outline-offset: 2px;
}

.strata-pmgmt-card-swatch {
  width: 10px;
  height: 32px;
  border-radius: 3px;
  background: var(--accent);
  flex-shrink: 0;
}

.strata-pmgmt-card-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.strata-pmgmt-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata-pmgmt-card-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata-pmgmt-card-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.strata-pmgmt-card-chevron {
  color: var(--text-tertiary);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* Inline pill styled <select> (used in cards and reusable elsewhere).
 * Native dropdown -- keyboard + screen-reader native -- but visually
 * presented as a pill so it sits in the row inline.
 *
 * The chevron lives in --strata-pmgmt-pill-chevron, defined per theme
 * up in :root / [data-theme="light"] so the hex stays inside the
 * documented theme-token blocks rather than baked into this rule.
 * (CSS variables don't substitute inside the data:url itself, so the
 * chevron has to be a complete URL per theme.) */
.strata-pmgmt-pill {
  appearance: none;
  -webkit-appearance: none;
  height: 24px;
  padding: 0 22px 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  cursor: pointer;
  background-color: var(--border);
  color: var(--text-secondary);
  background-image: var(--strata-pmgmt-pill-chevron);
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: background-color 0.12s ease, color 0.12s ease;
  touch-action: manipulation;
}

/* Touch-target overrides per .claude/rules/platform.md: tablet 40px,
 * phone 44px. The pill is a native <select>, so font-size also moves
 * to 16px on phone to avoid iOS Safari auto-zoom on focus. The chevron
 * stays right-aligned via the existing background-position. */
@media (max-width: 1024px) {
  .strata-pmgmt-pill {
    height: auto;
    min-height: 40px;
    font-size: 13px;
  }
}
@media (max-width: 640px) {
  .strata-pmgmt-pill {
    min-height: 44px;
    font-size: 16px;
    padding: 0 28px 0 12px;
  }
}

.strata-pmgmt-pill:hover:not(:disabled) {
  filter: brightness(1.1);
}

.strata-pmgmt-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.strata-pmgmt-pill:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Status pill colour tokens per status value. */
.strata-pmgmt-pill-status[data-status="active"] {
  background-color: var(--success-soft);
  color: var(--success);
}
.strata-pmgmt-pill-status[data-status="on_hold"] {
  background-color: var(--warning-soft);
  color: var(--warning);
}
.strata-pmgmt-pill-status[data-status="complete"] {
  background-color: var(--accent-soft);
  color: var(--accent);
}
.strata-pmgmt-pill-status[data-status="archived"] {
  background-color: var(--border);
  color: var(--text-tertiary);
}

/* Phase pill: SD / DD / CD / CA / D2. Subtle tinting so the value
 * reads but doesn't shout. */
.strata-pmgmt-pill-phase {
  background-color: var(--input-bg);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.strata-pmgmt-pill-phase[data-phase="sd"],
.strata-pmgmt-pill-phase[data-phase="dd"] {
  background-color: var(--accent-soft);
  color: var(--accent);
}
.strata-pmgmt-pill-phase[data-phase="cd"],
.strata-pmgmt-pill-phase[data-phase="ca"] {
  background-color: var(--success-soft);
  color: var(--success);
}
.strata-pmgmt-pill-phase[data-phase="d2"] {
  background-color: color-mix(in srgb, var(--text-tertiary) 22%, transparent);
  color: var(--text-secondary);
}

@media (max-width: 880px) {
  .strata-pmgmt-card-meta {
    white-space: normal;
  }
  .strata-pmgmt-card-chevron {
    display: none;
  }
}

/* Card box-folder badge (slot filled async). Sits inside the card
 * meta line; tinted soft success/warning. */
.strata-pmgmt-card-box {
  display: none; /* hidden until async fetch fills the slot */
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}

.strata-pmgmt-card-box.is-mapped,
.strata-pmgmt-card-box.is-unmapped {
  display: inline-flex;
}

.strata-pmgmt-card-box.is-mapped {
  background: var(--success-soft);
  color: var(--success);
}

.strata-pmgmt-card-box.is-unmapped {
  background: var(--warning-soft);
  color: var(--warning);
}

/* Admin table: name cell as a clickable button -- opens the pane on
 * click. Styled to look like the prior <strong> tag so the layout
 * doesn't shift. */
.strata-pmgmt-table-name {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  touch-action: manipulation;
}

.strata-pmgmt-table-name:hover {
  color: var(--accent);
  text-decoration: underline;
}

.strata-pmgmt-table-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =====================================================================
   Module full-bleed opt-in (manifest "fullBleed": true).

   The platform module renderer (platform/core.js#renderModule) adds
   body.strata-module-fullbleed for the lifetime of a module whose INLINE
   registered manifest declares fullBleed:true, and clears it on module
   switch / teardown (cleanupActiveModule). This lets a module use the full
   content width: it zeroes the .strata-content 24px padding and drops the
   .strata-module-container max-width:1200px + margin:0 auto centering so the
   module reaches the content edges. Same effect as the studio-settings
   platform view's body.strata-fullscreen-view (studio-settings.css), but a
   DEDICATED class so module full-bleed is decoupled from platform-view
   semantics, and it lives HERE (globally loaded) since studio-settings.css is
   not loaded for modules. No colors -> no theme split needed (layout only).
   Modules opting in own their own internal padding (keep a horizontal gutter
   so content is not flush to the glass). Replaces the per-module :has() hacks
   (cf. outlook-email-lens) with one declarative, leak-proof toggle. ===== */
body.strata-module-fullbleed .strata-content {
  padding: 0;
}
body.strata-module-fullbleed .strata-module-container {
  max-width: none;
  margin: 0;
  height: 100%;
}

/* ==========================================================================
   Module first-visit POINTER + Help "About this module" section
   (progressive onboarding, revised to the pull-Help + quiet-pointer model --
   owner-approved Option A).

   The first-visit surface is a QUIET, NON-MODAL POINTER rendered by
   platform/onboarding.js#showModulePointer: a small dismissible bottom-anchored
   bar (.strata-mpointer-host > .strata-mpointer) with one calm line + an
   [Open guide] button + a dismiss [x]. NO backdrop, NO focus trap -- it can
   never obscure content, and it clears the mobile tab bar at the phone
   breakpoint. The FULL module guide lives in the Help dock view's "About this
   module" section (.strata-help-about), which reuses the shared inner-content
   classes below (buildModuleGuideHtml renders title / tagline / what-it-is /
   quick-start / optional screenshot).

   The pointer root is body-mountable and carries data-module="onboarding" so
   the comma-fallback self-attribute selectors match the mounted root (the
   descendant combinator alone would miss it -- module-gotchas ui.md body-mount
   lesson). Tokens only; both themes resolve automatically via the shared theme
   tokens (no per-theme color literals introduced here). z-index stays below the
   sheet/modal tiers (Help is now a dock view at 7000; the pointer sits at 5200
   so the Help panel opened from [Open guide] renders above it -- though the
   pointer closes itself on that action anyway).
   ========================================================================== */

/* --- Quiet, non-modal first-visit pointer (bottom-anchored bar) --- */
.strata-mpointer-host,
.strata-mpointer-host[data-module="onboarding"] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5200;
  display: flex;
  justify-content: center;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  pointer-events: none; /* only the bar itself is interactive -- no scrim */
}
.strata-mpointer-host .strata-mpointer {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
  padding: 10px 12px 10px 16px;
}
.strata-mpointer-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.strata-mpointer-btn {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 40px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--button-radius);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text-primary);
}
.strata-mpointer-btn:hover {
  background: var(--row-hover);
}
.strata-mpointer-x {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--button-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-tertiary);
}
.strata-mpointer-x:hover {
  background: var(--row-hover);
  color: var(--text-primary);
}
/* On the phone breakpoint the pointer host must sit ABOVE the fixed mobile
   bottom tab bar (.strata-mobile-tabs = 49px + safe-area) so it never covers
   the tabs, matching the retired deep-link bar's clearance. */
@media (max-width: 640px) {
  .strata-mpointer-host {
    bottom: calc(49px + env(safe-area-inset-bottom, 0px));
    padding: 0 12px 8px;
  }
  .strata-mpointer-host .strata-mpointer {
    max-width: none;
  }
  .strata-mpointer-btn,
  .strata-mpointer-x {
    min-height: 44px;
  }
  .strata-mpointer-x {
    height: 44px;
    width: 44px;
  }
}

/* --- Help "About this module" section --- */
.strata-help-about .strata-help-about-loading {
  margin: 4px 0 0;
  font-size: 13px;
}
.strata-help-about .strata-help-about-body {
  margin-top: 4px;
}
/* The shared inner-content title is oversized for a Help subsection; the
   section already carries an <h3> "About this module" heading, so tone the
   guide's own title down to a compact module name. */
.strata-help-about .strata-mintro-title {
  font-size: 16px;
}
.strata-help-about .strata-mintro-shot {
  margin: 8px 0 12px;
}
.strata-help-about-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* --- Shared inner content (guide renderer -- used by Help "About") --- */
.strata-mintro-head {
  margin-bottom: 12px;
}
.strata-mintro-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.strata-mintro-tagline {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.strata-mintro-shot {
  margin: 0 0 16px;
  border-radius: var(--button-radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.strata-mintro-shot-img {
  display: block;
  width: 100%;
  height: auto;
}
.strata-mintro-section {
  margin-bottom: 16px;
}
.strata-mintro-h {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.strata-mintro-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
}
.strata-mintro-steps {
  margin: 0;
  padding-left: 20px;
}
.strata-mintro-step {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 4px;
}
/* Review-only accounts retain identity, theme, Help, sign-out, and the single
   Review Paperwork route. Static scripts may still be downloaded; this class
   is the shell interaction boundary, not an asset-security boundary. */
body.strata-review-only .nav-history,
body.strata-review-only .strata-topbar-center,
body.strata-review-only #findings-btn,
body.strata-review-only #sync-btn,
body.strata-review-only #today-chip-btn,
body.strata-review-only #launcher-btn {
  display: none !important;
}

/* The phone shell is a separate navigation surface. Keep only the avatar,
   which opens the review-only theme / Help / sign-out menu. */
body.strata-review-only .strata-mobile-tabs,
body.strata-review-only .strata-mh-project,
body.strata-review-only .strata-mh-findings {
  display: none !important;
}
body.strata-review-only .strata-mobile-header {
  justify-content: flex-end;
}