/* ==========================================================================
   RippleCore Dashboard — App styles
   Built on DataRipple admin skin. .rc-* prefixes only.
   ========================================================================== */

/* ===== UTILITY CLASSES =====
   Replace inline style="color:..." in controller-generated HTML.
   Every color value references a token so skins work automatically. */
.rc-text-danger  { color: var(--danger); }
.rc-text-warning { color: var(--warning); }
.rc-text-success { color: var(--success); }
.rc-text-muted   { color: var(--fg-3); }
.rc-text-dim     { color: var(--fg-dim); }
.rc-text-sm      { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
/* rc-callout state modifiers — use instead of inline color overrides */
.rc-callout.danger  { color: var(--danger); }
.rc-callout.warning { color: var(--warning); border-left-color: var(--warning); background: var(--warning-soft); }
/* ============================= */

/* ===== SKIN PICKER (Appearance settings panel) ===== */
.rc-skin-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 4px; }
.rc-skin-card { border: 2px solid var(--border); border-radius: var(--radius-md); padding: 14px; cursor: pointer; transition: border-color var(--transition-base), background var(--transition-base); display: flex; flex-direction: column; gap: 10px; background: var(--card-2); text-align: left; }
.rc-skin-card:hover { border-color: var(--border-strong); background: var(--card); }
.rc-skin-card.active { border-color: var(--teal); background: var(--teal-subtle); }
.rc-skin-card.active .rc-skin-name { color: var(--teal); }
/* Locked picker — theme is forced platform-wide; cards are reference-only */
.rc-skin-picker-locked .rc-skin-card { cursor: default; opacity: 0.55; pointer-events: none; border-color: var(--border); background: var(--card-2); }
.rc-skin-picker-locked .rc-skin-card:hover { border-color: var(--border); background: var(--card-2); }
.rc-skin-picker-locked .rc-skin-card::after { content: "Reference only"; align-self: flex-start; display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--fg-dim); background: var(--card); font-size: var(--fs-caption); line-height: 1; }
.rc-skin-picker-locked .rc-skin-card.active { opacity: 1; border-color: var(--teal); background: var(--teal-subtle); }
.rc-skin-picker-locked .rc-skin-card.active::after { content: "Current - Locked"; border-color: var(--teal); color: var(--teal); background: var(--card); }
.rc-skin-preview { border-radius: 6px; overflow: hidden; display: flex; height: 52px; border: 1px solid var(--border); }
.rc-skin-preview-sidebar { width: 28px; flex-shrink: 0; }
.rc-skin-preview-body { flex: 1; padding: 8px; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.rc-skin-swatches { display: flex; gap: 5px; }
.rc-skin-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(128,128,128,0.2); flex-shrink: 0; }
.rc-skin-name { font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--fg-1); }
.rc-skin-meta { font-size: 11px; color: var(--fg-dim); }
.rc-skin-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
/* ===================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--fg-2); overflow: hidden; }
body { font-family: var(--font-body); }
html.auth-pending body, html.shell-pending body { visibility: hidden; }
a { color: inherit; text-decoration: none; }

/* ------- App grid ------- */
.rc-app { display: grid; grid-template-columns: var(--rc-nav-w, 248px) 1fr; height: 100vh; overflow: hidden; transition: grid-template-columns .25s ease; }
.rc-app[data-nav="rail"] { --rc-nav-w: 64px; }
.rc-app[data-nav="pinned"] { --rc-nav-w: 64px; }

/* ================ SIDEBAR ================ */
.rc-side { background: var(--shell); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; position: relative; z-index: 30; }

.rc-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid var(--shell-rule); }
.rc-brand-logo { display: block; height: 44.8px; width: auto; max-width: 340px; object-fit: contain; object-position: left center; }
/*
 * Theme-aware brand logo. The shell renders BOTH wordmarks; CSS shows the one
 * matching the active theme so they never stack. --dark = white wordmark for the
 * dark UI (default); --light = dark/black wordmark for the light UI. Driven by
 * :root[data-theme] which shell.js sets from the persisted preference.
 */
.rc-brand-logo--light { display: none; }
.rc-brand-logo--dark { display: block; }
:root[data-theme="light"] .rc-brand-logo--light { display: block; }
:root[data-theme="light"] .rc-brand-logo--dark { display: none; }
/* Skins keep their sidebar dark (--shell) in BOTH themes, so the dark/black
   wordmark would vanish on it in light mode. Force the white wordmark whenever
   a skin is active, regardless of theme. */
:root[data-skin] .rc-brand-logo--light { display: none; }
:root[data-skin] .rc-brand-logo--dark { display: block; }
.rc-app[data-nav="rail"] .rc-brand-logo,
.rc-app[data-nav="pinned"] .rc-brand-logo { height: 20.8px; object-position: center; max-width: 28.8px; object-fit: cover; }
.rc-app[data-nav="rail"] .rc-brand,
.rc-app[data-nav="pinned"] .rc-brand { justify-content: center; padding: 18px 8px 14px; }

/* workspace */
.rc-ws { padding: 10px 12px; border-bottom: 1px solid var(--shell-rule); }
.rc-ws-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--fg-2); text-align: left; }
.rc-ws-btn:hover { background: var(--surface-2); }
.rc-ws-avatar { width: 22px; height: 22px; border-radius: 6px; background: var(--orange); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rc-ws-body { flex: 1; min-width: 0; }
.rc-ws-name { font-family: var(--font-heading); font-weight: 600; font-size: 12px; color: var(--fg-1); line-height: 1.2; }
.rc-ws-role { font-size: 10px; color: var(--fg-dim); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.rc-ws-chev { color: var(--fg-dim); flex-shrink: 0; }
.rc-app[data-nav="rail"] .rc-ws,
.rc-app[data-nav="pinned"] .rc-ws { padding: 10px 8px; }
.rc-app[data-nav="rail"] .rc-ws-body,
.rc-app[data-nav="rail"] .rc-ws-chev,
.rc-app[data-nav="pinned"] .rc-ws-body,
.rc-app[data-nav="pinned"] .rc-ws-chev { display: none; }
.rc-app[data-nav="rail"] .rc-ws-btn,
.rc-app[data-nav="pinned"] .rc-ws-btn { justify-content: center; padding: 6px; }

/* nav list */
.rc-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 8px 20px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.rc-nav::-webkit-scrollbar { width: 6px; }
.rc-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.rc-nav-version { font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim); padding: 8px 18px 12px; letter-spacing: 0.03em; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-app[data-nav="rail"] .rc-nav-version,
.rc-app[data-nav="pinned"] .rc-nav-version { opacity: 0; height: 0; padding: 0; overflow: hidden; }

.rc-nav-section { margin-top: 14px; }
.rc-nav-section:first-child { margin-top: 4px; }
.rc-nav-section-label { font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); padding: 0 12px 8px; }
.rc-app[data-nav="rail"] .rc-nav-section-label,
.rc-app[data-nav="pinned"] .rc-nav-section-label { opacity: 0; height: 12px; padding: 0; overflow: hidden; }

.rc-nav-item { position: relative; }
.rc-nav-btn {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 12px; background: transparent; border: none; border-radius: 8px; cursor: pointer;
  font-family: var(--font-heading); font-weight: 500; font-size: 13px; color: var(--fg-3); text-align: left; transition: background .15s, color .15s;
}
.rc-nav-btn:hover { background: var(--surface-2); color: var(--fg-1); }
.rc-nav-btn.active { background: var(--teal-subtle); color: var(--teal); }
.rc-nav-btn.active-parent { color: var(--fg-1); }
.rc-nav-btn [data-nav-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rc-nav-btn svg { flex-shrink: 0; stroke-width: 2; }
.rc-nav-btn svg,
.rc-nav-sub-btn svg,
.rc-iconbtn svg,
.rc-aichat-icon svg,
.rc-aichat-send svg,
.rc-card-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rc-nav-btn .rc-nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-nav-btn .rc-nav-badge { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; background: var(--orange); color: #fff; border-radius: 99px; font-weight: 700; line-height: 1; }
/* Submenu expand/collapse control. A real, separately focusable <button> that
   is a SIBLING of the parent link (not nested inside the <a>, which is invalid
   and unfocusable) so keyboard users can toggle a section independently of
   navigating to its landing page (#1679). Absolutely positioned in the row's
   reserved right gutter, mirroring the .np-grip / .np-star pattern; rotation is
   driven by aria-expanded so the visual state always matches the a11y state. */
.rc-nav-chev {
  position: absolute; right: 34px; top: 18px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; background: none; border: 0;
  color: var(--fg-dim); font-size: 15px; line-height: 1; cursor: pointer;
  transition: color .12s, transform .2s; z-index: 2;
}
.rc-nav-chev:hover { color: var(--fg-2); }
.rc-nav-chev[aria-expanded="true"] { transform: translateY(-50%) rotate(90deg); color: var(--fg-2); }

/* ── Left-nav personalization (Concept D): pinned zone, collapse, drag ──── */
.rc-nav-section-label.np-has-controls {
  min-height: 39px;
  padding: 9px 8px 9px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}
.rc-nav-section-label.np-has-controls:hover { background: var(--surface-2); color: var(--fg-1); }
.rc-app[data-nav="rail"] .rc-nav-section-label.np-has-controls,
.rc-app[data-nav="pinned"] .rc-nav-section-label.np-has-controls { min-height: 12px; padding: 0; }
.np-sec-grip { display: inline-flex; align-items: center; cursor: grab; color: var(--fg-dim); opacity: .45; transition: opacity .12s, color .12s; }
.rc-nav-section:hover .np-sec-grip { opacity: .9; color: var(--fg-2); }
.np-sec-grip:active { cursor: grabbing; }
.np-sec-chev { margin: -6px -6px -6px auto; width: 32px; min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: var(--fg-dim); opacity: .7; cursor: pointer; font-size: 15px; line-height: 1; transform: rotate(90deg); transition: transform .18s, opacity .12s; }
.np-sec-chev:hover { color: var(--fg-2); opacity: 1; }
.rc-nav-section.np-collapsed .np-sec-chev { transform: rotate(0deg); }
.rc-nav-section.np-collapsed [data-nav-section-items],
.rc-nav-section.np-collapsed .np-pin-list { display: none; }
/* gutters so the always-visible drag handle (left) + pin star (right) clear
   the module icon and the submenu chevron (expanded nav only). The controls
   anchor to the top-level button row, not the full item height; expanded
   submenu rows live inside the same .rc-nav-item and would otherwise pull
   top: 50% down beside a child row. */
.rc-app:not([data-nav="rail"]):not([data-nav="pinned"]) .rc-nav-item > .rc-nav-btn { padding-left: 26px; padding-right: 30px; }
/* Items with a submenu chevron reserve extra right gutter so the label clears
   the absolutely-positioned chevron button (#1679). */
.rc-app:not([data-nav="rail"]):not([data-nav="pinned"]) .rc-nav-item > .rc-nav-btn.rc-nav-btn--subs { padding-right: 44px; }
.np-grip { position: absolute; left: 7px; top: 18px; transform: translateY(-50%); display: inline-flex; align-items: center; cursor: grab; color: var(--fg-dim); opacity: .42; transition: opacity .12s, color .12s; z-index: 2; }
.rc-nav-item:hover .np-grip { opacity: .9; color: var(--fg-2); }
.np-grip:active { cursor: grabbing; }
.np-star { position: absolute; right: 8px; top: 18px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; background: none; border: 0; padding: 0; color: var(--fg-dim); opacity: .5; cursor: pointer; transition: opacity .12s, color .12s; z-index: 2; }
.rc-nav-item:hover .np-star { opacity: .9; }
.np-star:hover { opacity: 1; color: var(--fg-2); }
.np-star.on { opacity: 1; color: #eab308; }
/* Touch tap-target floor (WCAG 2.5.8, #1656 audit). On coarse pointers
   (tablet/touch) small icon/pill controls must present a >=24x24 hit area.
   Scoped to pointer:coarse so desktop layout + hover feel are untouched; the
   glyphs keep their visual size, only the clickable box grows. */
@media (pointer: coarse) {
  .np-star,
  .fp-card-star,
  .pm-cbubble {
    min-width: 24px;
    min-height: 24px;
    box-sizing: border-box;
  }
  .rc-nav-chev {
    min-width: 24px;
    min-height: 24px;
    box-sizing: border-box;
  }
}
.np-dragging { opacity: .4; }
.np-dragging-sec { opacity: .5; }
.rc-nav-pinned .np-pin-list { display: flex; flex-direction: column; }
.np-pin-row { position: relative; }
.np-pin-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Skinned sidebars: light-on-dark nav ──────────────────────────────
   Every skin keeps its sidebar dark (--shell) in BOTH light and dark theme.
   The base nav rules above use --fg-3/--fg-1/--surface-2, which are DARK in
   light mode — so nav links and hovers vanish on the dark sidebar. Force
   readable light-on-dark nav whenever a skin is active. (dataripple-new ships
   its own equivalent rules, loaded after this file, and keeps its red active
   state; whitestone/lor get a branded accent active below.) */
:root[data-skin] .rc-side .rc-nav-section-label { color: rgba(255,255,255,0.55); }
:root[data-skin] .rc-side .rc-nav-section-label.np-has-controls:hover { background: rgba(255,255,255,0.09); color: #fff; }
:root[data-skin] .rc-side .rc-nav-btn { color: rgba(255,255,255,0.82); }
:root[data-skin] .rc-side .rc-nav-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }
:root[data-skin] .rc-side .rc-nav-btn.active { background: rgba(255,255,255,0.14); color: #fff; }
:root[data-skin] .rc-side .rc-nav-btn.active-parent { color: rgba(255,255,255,0.95); }
:root[data-skin] .rc-side .rc-nav-chev { color: rgba(255,255,255,0.40); }
:root[data-skin] .rc-side .rc-nav-chev[aria-expanded="true"] { color: rgba(255,255,255,0.70); }
:root[data-skin] .rc-side .rc-nav-sub-inner::before { background: rgba(255,255,255,0.12); }
:root[data-skin] .rc-side .rc-nav-sub-btn { color: rgba(255,255,255,0.68); }
:root[data-skin] .rc-side .rc-nav-sub-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }
:root[data-skin] .rc-side .rc-nav-sub-btn.active { background: rgba(255,255,255,0.14); color: #fff; }
:root[data-skin] .rc-side .rc-nav-sub-btn .dot { background: rgba(255,255,255,0.35); }
/* Brass / teal active accents read fine on the dark sidebar (Kreat's near-black
   accent does not, so it keeps the neutral white-tint active above). */
:root[data-skin="whitestone"] .rc-side .rc-nav-btn.active,
:root[data-skin="lor"] .rc-side .rc-nav-btn.active,
:root[data-skin="whitestone"] .rc-side .rc-nav-sub-btn.active,
:root[data-skin="lor"] .rc-side .rc-nav-sub-btn.active { background: var(--teal-strong); color: #fff; }

.rc-nav-sub { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.rc-nav-sub.open { max-height: 500px; }
.rc-nav-sub-inner { padding: 4px 0 6px 32px; position: relative; }
.rc-nav-sub-inner::before { content: ""; position: absolute; left: 20px; top: 4px; bottom: 6px; width: 1px; background: var(--border); }
.rc-nav-sub-btn {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: transparent; border: none; border-radius: 6px; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--fg-4); text-align: left; position: relative;
}
.rc-nav-sub-btn:hover { color: var(--fg-1); background: var(--surface-2); }
.rc-nav-sub-btn.active { color: var(--teal); background: var(--teal-subtle); }
.rc-nav-sub-btn.active::before { content: ""; position: absolute; left: -12px; top: 50%; width: 1px; height: 14px; background: var(--teal); transform: translateY(-50%); }
.rc-nav-sub-btn .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-dim); flex-shrink: 0; }
.rc-nav-sub-btn.active .dot { background: var(--teal); }
.rc-nav-sub-btn .rc-nav-sub-meta { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim); }
.rc-nav-sub-btn.active .rc-nav-sub-meta { color: var(--teal); }

/* collapsed rail: hide labels and subs */
.rc-app[data-nav="rail"] .rc-nav-label,
.rc-app[data-nav="rail"] .rc-nav-chev,
.rc-app[data-nav="rail"] .rc-nav-sub,
.rc-app[data-nav="pinned"] .rc-nav-label,
.rc-app[data-nav="pinned"] .rc-nav-chev,
.rc-app[data-nav="pinned"] .rc-nav-sub { display: none; }
.rc-app[data-nav="rail"] .rc-nav-btn,
.rc-app[data-nav="pinned"] .rc-nav-btn { justify-content: center; padding: 10px 0; }

/* nav footer */
.rc-nav-foot { padding: 12px; border-top: 1px solid var(--shell-rule); }
.rc-app[data-nav="rail"] .rc-nav-foot-item-label,
.rc-app[data-nav="pinned"] .rc-nav-foot-item-label { display: none; }

/* pinned flyout panel */
.rc-flyout { position: fixed; top: 0; left: 64px; bottom: 0; width: 280px; background: var(--shell); border-right: 1px solid var(--border); z-index: 20; transform: translateX(-100%); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; padding: 18px 16px; overflow-y: auto; }
.rc-flyout.open { transform: translateX(0); opacity: 1; pointer-events: auto; box-shadow: 20px 0 50px rgba(0,0,0,0.5); }
.rc-flyout-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--shell-rule); margin-bottom: 10px; }
.rc-flyout-title { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--fg-1); }
.rc-flyout-sub { font-size: 11px; color: var(--fg-dim); letter-spacing: 0.06em; text-transform: uppercase; }

/* ================ TOPBAR ================ */
.rc-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100vh; background: var(--bg); }

.rc-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--shell-glass); backdrop-filter: blur(10px);
  /* Topbar must sit ABOVE the PM sticky-head stack (page-head=50,
     tabs=49, toolbar=48) for TWO reasons:
       1. User dropdown — position+z-index let the menu render above
          PM sticky bars instead of getting clipped by backdrop-filter.
       2. Ask Ripple flyout — mounts inside topbar as position:absolute,
          needs to paint over PM sticky bars instead of behind them.
     Modals + toasts still go higher (1000+) so this doesn't interfere
     with overlays. */
  flex-shrink: 0; position: relative; z-index: 200;
}
.rc-tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.rc-tb-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-dim); min-width: 0; overflow: hidden; white-space: nowrap; }
.rc-tb-crumbs > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-tb-crumbs .c-sep { color: var(--border-strong); }
.rc-tb-crumbs .c-cur { color: var(--fg-1); font-family: var(--font-heading); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/*
 * Topbar slot — width is reserved on first paint so the layout doesn't jump
 * when the Ask Ripple JS mounts. Keep this in sync with .rc-aichat width.
 */
.rc-aichat-slot {
  width: min(640px, calc(100vw - 32px));
  height: 38px;
  /* Must SHRINK below its 640px ideal on narrow main areas (tablet), or the
     topbar overflows and pushes .rc-tb-right off-screen (#1656). min-width:0
     lets the flex item shrink; the account cluster (.rc-tb-right) is pinned
     with flex-shrink:0 so it never clips. */
  min-width: 0;
  margin: 0 auto;
}

/* Utility cluster (search/notifications/settings/account) never shrinks or
   clips — it's the only path to account/settings/sign-out (#1656). */
.rc-tb-right { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-shrink: 0; }
/* Hamburger is desktop-hidden; the ≤820px block reveals it (see mobile block).
   flex-shrink:0 because it is the only .rc-iconbtn that is a DIRECT flex child
   of .rc-topbar (the rest sit inside .rc-tb-right, which is flex-shrink:0). On
   a ~390px phone the row is over-subscribed, so flex squeezed the hamburger
   from its 40px box down to the 17px glyph — under the 24px tap-target floor
   (#1657). */
.rc-topbar .rc-nav-hamburger { display: none; flex-shrink: 0; }
.rc-nav-scrim { display: none; }
.rc-iconbtn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--fg-3); cursor: pointer; position: relative; transition: all .15s; }
.rc-iconbtn:hover { background: var(--surface-2); color: var(--fg-1); border-color: var(--border); }
/* Notification bell unread count (replaced the old .rc-dot). Same orange/mono
   pill language as .rc-nav-badge, positioned over the bell glyph (the ring
   border lifts it off the dark topbar). Hidden at 0 via the `hidden` attr. */
.rc-iconbtn .rc-bell-count { position: absolute; top: 2px; right: 2px; box-sizing: border-box; min-width: 16px; height: 16px; padding: 0 3px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--orange); color: var(--text-inverse, #fff); font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 1; border: 2px solid var(--dot-ring); }
.rc-user-wrap { position: relative; display: flex; align-items: center; }
.rc-tb-user { height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 99px; cursor: pointer; color: var(--fg-2); white-space: nowrap; flex-shrink: 0; }
.rc-tb-user:hover { background: var(--surface-2); }
.rc-tb-user .av-img,
.rc-user-menu-head .av-img { width: 28px; height: 28px; border-radius: 50%; background: var(--grad-cta); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 11px; line-height: 1; flex: 0 0 28px; }
.rc-tb-user .u-name { display: inline-block; font-family: var(--font-heading); font-size: 12px; line-height: 1; font-weight: 600; color: var(--fg-2); max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.rc-tb-user svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Skins keep the topbar dark (--shell-glass) in BOTH themes, so the user pill's
   default --fg-2 text/border (dark in light mode) — the name, chevron, border —
   becomes invisible on it. Force a light-on-dark user pill for every skin on
   every page. (PM pages used to flip the topbar to a light surface and were
   excluded here; that override was removed 2026-06-25 — the topbar is now the
   canonical dark navy everywhere, so PM must get the same light-on-dark pill or
   its dark default text goes invisible on the dark bar.) dataripple-new ships
   identical rules of its own. */
:root[data-skin] body .rc-tb-user {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
}
:root[data-skin] body .rc-tb-user:hover { background: rgba(255,255,255,0.12); }
:root[data-skin] body .rc-tb-user .u-name { color: rgba(255,255,255,0.92); }
/* Same dark-topbar problem for the topbar icon buttons (search/settings/bell):
   the default rest --fg-3 and hover --fg-1/--surface-2 are dark, so on hover the
   icon darkens into the dark topbar and the highlight is invisible. Light-on-dark
   rest + hover for every skin on every page. Scoped to .rc-topbar: .rc-iconbtn is
   also used all over page CONTENT (drawers, boards, dialogs) on light surfaces,
   where white-on-white would erase it. */
:root[data-skin] body .rc-topbar .rc-iconbtn { color: rgba(255,255,255,0.72); }
:root[data-skin] body .rc-topbar .rc-iconbtn:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.14);
}
.rc-user-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; z-index: 80; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: var(--shadow-lg); }
.rc-user-menu[hidden] { display: none; }
.rc-user-menu-head { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 8px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.rc-user-menu-head strong { display: block; color: var(--fg-1); font-family: var(--font-heading); font-size: 13px; line-height: 1.2; }
.rc-user-menu-head span { display: block; color: var(--fg-dim); font-size: 11px; margin-top: 2px; }
.rc-user-menu-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--fg-3); font-family: var(--font-heading); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.rc-user-menu-item:hover { background: var(--surface-2); color: var(--fg-1); border-color: var(--border); }
.rc-user-menu-item.danger { color: var(--danger); }
.rc-user-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ================ MAIN CONTENT ================ */
.rc-content { flex: 1; overflow-y: auto; padding: 24px 32px 60px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.rc-content::-webkit-scrollbar { width: 8px; }
.rc-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.rc-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 44px; flex-wrap: wrap; }
.rc-page-head-l { min-width: 0; }
.rc-page-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rc-page-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
/* Migration 266 — Job Number chip in the project-detail eyebrow. Hidden via :empty when not set. */
.rc-page-eyebrow .rc-page-jobno { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--fg-2); letter-spacing: .02em; padding: 2px 7px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); text-transform: none; }
.rc-page-eyebrow .rc-page-jobno:empty { display: none; }
.rc-page-title { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--fg-1); margin: 0 0 4px; letter-spacing: -0.015em; }
.rc-page-sub { font-size: 13px; color: var(--fg-3); line-height: 1.55; }
.rc-page-head-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
/* Below ~1200px the left-side title block + right-side action row no longer
   fit on one line, and the right side was sliding off the page-content
   overflow edge instead of wrapping (e.g. drawings "+ Upload Sheet" became
   invisible). Force the right side onto its own row when narrow. */
@media (max-width: 1200px) {
  .rc-page-head-r { flex-basis: 100%; justify-content: flex-end; }
}

/* ================ UI PRIMITIVES (shared) ================ */
/*
 * Button sizing baseline. Bumped from the old 9px/14px·12px (≈32px tall) to a
 * ~40px min-height target with a 13px label. Rationale: a 32px control is below
 * comfortable pointer/touch ergonomics — WCAG 2.5.5 (AAA) wants 44×44, 2.5.8
 * (AA) requires ≥24×24. min-height (not a fixed height) keeps multi-line and
 * wrapped buttons intact; align-items:center vertically centers the label.
 * Variants (.rc-btn-sm/.rc-btn-xs/.rc-iconbtn) scale from this baseline below.
 */
.rc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 18px; border-radius: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 13px; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, filter .1s ease, opacity .1s ease, translate .1s ease, scale .1s ease, transform .1s ease; white-space: nowrap; line-height: 1.1; letter-spacing: 0.01em; }
.rc-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.rc-btn svg { width: 16px; height: 16px; stroke-width: 2; }
.rc-btn-primary { background: var(--orange); color: #fff; box-shadow: var(--shadow-cta); }
.rc-btn-primary:hover { background: var(--orange-dark); box-shadow: var(--shadow-cta-h); }
.rc-btn-secondary { background: var(--teal); color: #fff; }
.rc-btn-secondary:hover { background: var(--teal-secondary); }
.rc-btn-ghost { background: var(--surface-2); color: var(--fg-2); border-color: var(--border); }
.rc-btn-ghost:hover { background: var(--surface-3); color: var(--fg-1); border-color: var(--border-strong); }
.rc-btn-gradient { background: var(--grad-cta); color: #fff; }
.rc-btn-gradient:hover { background: var(--grad-cta-hover); }
.rc-btn-sm { min-height: 34px; padding: 8px 14px; font-size: 12px; }
.rc-btn-sm svg { width: 14px; height: 14px; }
.rc-btn-link { background: transparent; color: var(--teal); padding: 4px 2px; border: none; }
.rc-btn-link:hover { color: var(--teal-secondary); }

.rc-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rc-card-ghost { background: var(--card-2); }
.rc-card-sunken { background: var(--card-3); }
.rc-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.rc-card-head.tight { padding: 12px 16px; }
.rc-card-icon { width: 36px; height: 36px; border-radius: 6px; background: var(--teal-subtle); border: 1px solid var(--teal-soft); color: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rc-card-icon.orange { background: rgba(234,84,40,0.08); border-color: rgba(234,84,40,0.22); color: var(--orange); }
.rc-card-icon.blue { background: rgba(14,165,233,0.10); border-color: rgba(14,165,233,0.25); color: var(--sky); }
.rc-card-icon.amber { background: var(--warning-soft); border-color: var(--warning-strong); color: var(--warning); }
.rc-card-icon.violet { background: var(--violet-soft); border-color: rgba(167,139,250,0.3); color: var(--violet); }
.rc-card-icon.danger { background: var(--danger-soft); border-color: var(--danger-strong); color: var(--danger); }
.rc-card-icon.success { background: var(--success-soft); border-color: var(--success-strong); color: var(--success); }
.rc-card-title { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--fg-1); line-height: 1.3; margin: 0 0 2px; }
.rc-card-sub { font-size: 12px; color: var(--fg-3); font-weight: 400; margin: 0; line-height: 1.45; }
.rc-card-body { padding: 16px 18px; overflow-x: auto; }
.rc-card-body.tight { padding: 12px 16px; }
.rc-card-foot { padding: 10px 18px; border-top: 1px solid var(--border); background: var(--surface-1); display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.rc-section-grid { display: grid; gap: 18px; }
.rc-section-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-section-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-section-tile { cursor: pointer; padding: 24px 16px; min-height: 144px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; transition: border-color .15s, transform .15s, background .15s; }
.rc-section-tile:hover { border-color: var(--border-strong); background: var(--card-2); }
.rc-section-tile .rc-card-icon { width: 40px; height: 40px; }

.rc-dashboard-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 96px auto 0; max-width: 960px; }
.rc-dashboard-grid .rc-section-tile { flex: 0 0 calc((100% - 36px) / 3); min-height: 144px; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.rc-dashboard-grid .rc-section-tile h2 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--fg-1); }
.rc-dashboard-grid .rc-section-tile p { margin: 0; font-size: 11px; color: var(--fg-3); line-height: 1.5; max-width: 180px; }
.rc-stat-strip { display: flex; align-items: center; justify-content: space-between; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; margin-bottom: 32px; gap: 12px; flex-wrap: wrap; }
.rc-stat-strip-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-stat-strip-item span { font-size: 11px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.rc-stat-strip-item strong { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--fg-1); }
.rc-stat-strip-item em { font-style: normal; font-size: 11px; color: var(--fg-dim); font-weight: 500; }
.rc-stat-strip > i { width: 1px; height: 22px; background: var(--border); }
.rc-rowline-list { margin: 0; padding: 0; list-style: none; }
.rc-rowline { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(47,60,78,0.3); }
.rc-rowline.rc-rowline-last { border-bottom: 0; }
.rc-rowline { cursor: default; border-radius: 7px; }
.rc-rowline:hover { background: rgba(255,255,255,0.025); }
.rc-rowline.is-selected { background: var(--teal-subtle); box-shadow: inset 3px 0 0 var(--teal); padding-left: 10px; padding-right: 10px; }
.rc-rowline.is-complete,
.rc-table tr.is-complete { opacity: .56; }
.rc-rowline.is-complete strong,
.rc-table tr.is-complete .tname { text-decoration: line-through; }
.rc-rowline strong { display: block; font-family: var(--font-heading); font-size: 12px; color: var(--fg-1); line-height: 1.4; margin-bottom: 2px; }
.rc-rowline span { display: block; font-size: 11px; color: var(--fg-3); line-height: 1.45; }
.rc-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rc-template-grid, .rc-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rc-template-grid span, .rc-media-grid span { min-height: 94px; border-radius: 10px; border: 1px solid var(--border); background: linear-gradient(135deg, rgba(10,74,92,0.75), rgba(10,191,188,0.52)); color: #fff; display: flex; align-items: flex-end; padding: 10px; font-size: 11px; font-weight: 700; }
.rc-media-grid span { background: var(--surface-1); color: var(--fg-2); min-height: 120px; }
.rc-template-grid span.is-selected,
.rc-media-grid span.is-selected { outline: 2px solid var(--orange); outline-offset: 2px; }
.rc-calendar-toolbar { display: flex; gap: 6px; align-items: center; }
.rc-calendar-weekdays,
.rc-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rc-calendar-weekdays { margin-bottom: 6px; color: var(--fg-dim); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.rc-calendar-weekdays span { padding: 0 6px; }
.rc-calendar-day { min-height: 102px; padding: 7px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 7px; outline: 0; }
.rc-calendar-day:hover,
.rc-calendar-day:focus { border-color: var(--border-strong); background: var(--surface-2); }
.rc-calendar-day.is-outside-month { opacity: .42; }
.rc-calendar-day.is-today { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.rc-calendar-day.is-selected { background: var(--teal-subtle); border-color: var(--teal); }
.rc-calendar-day.is-drag-over { outline: 2px dashed var(--teal); outline-offset: -4px; background: var(--teal-subtle); }
.rc-calendar-day b { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim); margin-bottom: 6px; }
.rc-calendar-events { display: grid; gap: 4px; }
.rc-calendar-event { display: grid; gap: 1px; width: 100%; border: 1px solid var(--border); border-radius: 5px; background: var(--card); color: var(--fg-2); padding: 4px 6px; text-align: left; cursor: grab; }
.rc-calendar-event span,
.rc-calendar-event em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-calendar-event span { font-size: 10px; font-weight: 700; }
.rc-calendar-event em { font-size: 9px; font-style: normal; color: var(--fg-dim); }
.rc-calendar-event.tone-orange { border-color: rgba(234,84,40,.38); }
.rc-calendar-event.tone-violet { border-color: rgba(139,92,246,.4); }
.rc-calendar-event.tone-sky { border-color: rgba(14,165,233,.42); }
.rc-calendar-event.tone-teal { border-color: rgba(10,191,188,.42); }
.rc-calendar-event.is-selected { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.rc-social-preview { background: #000; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); color: #e3e3e5; }
.rc-social-preview-account { padding: 12px; display: flex; flex-direction: column; border-bottom: 1px solid #222; }
.rc-social-preview-account b { color: #fff; font-size: 12px; }
.rc-social-preview-account span { color: #888; font-size: 10px; }
.rc-social-preview-copy { padding: 14px 12px 12px; border-bottom: 1px solid #222; color: #fff; }
.rc-social-preview-copy strong { display: block; font-family: var(--font-heading); font-size: 18px; line-height: 1.25; }
.rc-social-preview-copy span { display: block; margin-top: 5px; font-size: 11px; color: var(--fg-3); }
.rc-social-preview-copy p { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #d7dde8; }
.rc-social-preview-media { position: relative; aspect-ratio: 1; margin: 0; background: linear-gradient(135deg, #0A4A5C, #0ABFBC 60%, #EA5428); overflow: hidden; }
.rc-social-preview-media.has-image { background: #050505; }
.rc-social-preview-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rc-social-preview-media img[hidden] { display: none; }
.rc-social-preview-actions { display: flex; gap: 6px; margin-top: 12px; }
.rc-social-preview-actions .rc-btn { flex: 1; }
.rc-modal-preview .rc-social-preview { max-width: 360px; margin: 0 auto; }
.rc-media-large { aspect-ratio: 16 / 10; border-radius: 10px; border: 1px solid var(--border); background: linear-gradient(135deg, rgba(10,74,92,0.84), rgba(10,191,188,0.56)); display: flex; align-items: flex-end; padding: 18px; color: #fff; font-family: var(--font-heading); font-weight: 700; }
.rc-draft-box { padding: 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--fg-2); line-height: 1.65; }
.rc-draft-box strong, .rc-draft-box h3, .rc-draft-box h4 { color: var(--fg-1); font-family: var(--font-heading); margin-top: 0; }
.rc-kanban { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; }
.rc-kanban-col { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 10px; min-width: 190px; }
.rc-kanban-col h3 { margin: 0 0 10px; font-family: var(--font-heading); font-size: 13px; color: var(--fg-1); }
.rc-kanban-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.rc-kanban-card { cursor: grab; }
.rc-kanban-card:active { cursor: grabbing; }
.rc-kanban-card.is-dragging { opacity: .55; transform: rotate(1deg); }
.rc-kanban-card strong { display: block; font-size: 12px; color: var(--fg-1); line-height: 1.4; margin-bottom: 4px; }
.rc-kanban-card span { display: block; font-size: 10px; color: var(--fg-dim); margin-bottom: 8px; }
.rc-kanban-card-title-link { color: inherit; text-decoration: none; display: block; }
.rc-kanban-card-title-link:hover strong { text-decoration: underline; }
.rc-kanban-dropzone { min-height: 96px; border-radius: 8px; }
.rc-kanban-dropzone.is-drag-over { outline: 2px dashed var(--teal); outline-offset: -4px; background: var(--teal-subtle); }
.rc-kanban-add { width: 100%; justify-content: center; margin-top: 4px; }
.rc-section-tile h2 { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--fg-1); margin: 0; }
.rc-section-tile p { font-size: 11px; color: var(--fg-3); line-height: 1.5; max-width: 210px; margin: 0; }

.rc-simple-stack { display: grid; gap: 18px; }
.rc-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* CRM contact record (v2) — left-rail identity block + circular quick-actions.
   The identity (avatar, name, company, Email·Phone) sits centered at the top of
   the left card; the quick-actions are a centered row of circular icon buttons
   DIRECTLY under it (Note / Email / Log / Task / Meet), each icon in a tinted
   circle with a label beneath. Hover / .active fills the circle brand-red. */
.rc-identity { padding: 22px 16px 14px; text-align: center; }
.rc-identity-av {
  width: 84px; height: 84px; border-radius: 50%;
  margin: 0 auto 12px;
  display: grid; place-items: center;
  background: var(--teal); color: #fff;         /* --teal maps to brand red in dataripple-new */
  font-family: var(--font-heading); font-weight: 700; font-size: 28px;
  overflow: hidden;
}
.rc-identity-av img { width: 100%; height: 100%; object-fit: cover; }
.rc-identity-name {
  font-family: var(--font-heading); font-weight: 700; font-size: 20px;
  color: var(--fg-1); letter-spacing: -.01em; line-height: 1.2;
}
.rc-identity-co { font-size: 13px; color: var(--fg-3); margin-top: 3px; }
.rc-identity-links { margin-top: 8px; font-size: 13px; }
.rc-identity-links a { color: var(--teal); font-weight: 500; }
.rc-identity-links a:hover { color: var(--teal-secondary); }
.rc-identity-dot { color: var(--fg-dim); margin: 0 6px; }

.rc-quick-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 16px 8px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.rc-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 54px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-heading);
}
.rc-quick-action .rc-qa-ic {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--surface-secondary);
  color: var(--fg-1);
  display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.rc-quick-action:hover .rc-qa-ic,
.rc-quick-action.active .rc-qa-ic { background: var(--teal); color: #fff; }
.rc-quick-action span:last-child { font-size: 12px; color: var(--fg-3); font-weight: 500; }
.rc-quick-action svg { width: 18px; height: 18px; }
.rc-settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rc-settings-form .rc-form-grid { display: contents; }
.rc-form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-settings-form label { display: grid; gap: 5px; }

/* CRM settings stacked-form layout: rc-form > rc-form-row > rc-form-field
 * (label + control). Used by assessment.html + enrichment.html, which
 * referenced these classes without them ever being defined (so the forms
 * rendered as bare, cramped blocks). Design-system tokens only. */
.rc-form { display: flex; flex-direction: column; gap: var(--space-4); }
.rc-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); align-items: start; }
.rc-form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rc-form-field-wide { grid-column: 1 / -1; }
/* A label + wide control (table/list) placed directly in a row should span
 * the full width (label on top, control full-width below) rather than land
 * in the 2nd column. */
.rc-form-row > .rc-form-label,
.rc-form-row > table,
.rc-form-row > ol,
.rc-form-row > ul,
.rc-form-row > .rc-calendar-grid { grid-column: 1 / -1; }
.rc-form-label { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.rc-form-help { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fg-3); }
.rc-form-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-2); cursor: pointer; }
.rc-form-check input { margin: 0; }

/* Calendar weekly-schedule: one column per day (.rc-calendar-grid is a
 * 7-col grid), each a vertical stack: checkbox / start / "to" / end. */
.rc-calendar-row { display: flex; flex-direction: column; gap: 4px; }
.rc-calendar-row .rc-form-check { min-width: 0; }
.rc-calendar-row .rc-input { width: 100%; min-width: 0; }
.rc-calendar-row > span { color: var(--fg-3); font-size: 12px; text-align: center; }

/* Proposal section + package lists (filled by the controller). */
.rc-proposal-sections, .rc-proposal-packages { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rc-proposal-sections { counter-reset: rc-psec; }
.rc-proposal-sections > li, .rc-proposal-packages > li {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--card); font-size: 14px; color: var(--fg-1);
}
.rc-proposal-sections > li::before {
  counter-increment: rc-psec; content: counter(rc-psec) ".";
  color: var(--fg-3); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 18px;
}

/* Compact table modifier (tighter cells). */
.rc-table-compact th, .rc-table-compact td { padding: 6px 10px; font-size: 13px; }

@media (max-width: 720px) { .rc-form-row { grid-template-columns: 1fr; } }
.rc-settings-form label span { font-family: var(--font-heading); font-size: 12px; color: var(--fg-2); font-weight: 600; }
.rc-settings-form label.full { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .rc-settings-form { grid-template-columns: 1fr; }
}
.rc-ops-page { display: grid; gap: 18px; }
.rc-ops-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.rc-ops-kicker {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.rc-ops-hero strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 1.1;
  color: var(--fg-1);
}
.rc-ops-hero p,
.rc-ops-section-head p,
.rc-ops-checklist p {
  margin: 5px 0 0;
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.5;
}
.rc-ops-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rc-ops-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.rc-ops-panel {
  min-width: 0;
  padding: 18px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.rc-ops-panel-soft { background: var(--surface-1); border-color: transparent; }
.rc-ops-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.rc-ops-section-head h3 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--fg-1);
  font-size: 15px;
  line-height: 1.25;
}
.rc-ops-inline-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.rc-ops-inline-status span {
  color: var(--fg-3);
  font-size: 11px;
}
.rc-ops-inline-status b {
  color: var(--fg-1);
  font-family: var(--font-heading);
  font-weight: 700;
}
.rc-ops-checklist {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rc-ops-checklist li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.rc-ops-checklist li > span {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 99px;
  background: var(--success);
}
.rc-ops-checklist li.is-pending > span { background: var(--warning); }
.rc-ops-checklist strong {
  display: block;
  color: var(--fg-1);
  font-family: var(--font-heading);
  font-size: 12px;
}
@media (max-width: 980px) {
  .rc-ops-layout,
  .rc-ops-hero { grid-template-columns: 1fr; }
  .rc-ops-actions { justify-content: flex-start; }
}
.rc-settings-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.rc-settings-menu { position: sticky; top: 0; display: grid; gap: 8px; align-self: start; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); }
.rc-settings-company { position: relative; display: grid; gap: 8px; padding: 8px 8px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.rc-settings-company .rc-ws-avatar { width: 34px; height: 34px; border-radius: 8px; }
.rc-settings-company strong { display: block; color: var(--fg-1); font-family: var(--font-heading); font-size: 13px; line-height: 1.2; }
.rc-settings-company em { display: block; color: var(--fg-dim); font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.rc-team-select,
.rc-team-option { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.rc-team-select { padding: 0; }
.rc-team-select:hover,
.rc-team-option:hover { background: var(--surface-2); border-color: var(--border); }
.rc-team-option { padding: 8px; }
.rc-team-menu { position: absolute; top: 54px; left: 8px; right: 8px; z-index: 12; display: grid; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); box-shadow: var(--shadow-soft); }
.rc-team-option.is-selected { background: var(--teal-subtle); border-color: var(--teal-soft); }
.rc-team-option .rc-badge { justify-self: end; }
.rc-team-option .rc-ws-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rc-team-option .rc-ws-primary { min-width: 0; }
.rc-team-option .rc-ws-clerk { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 1px; }
.rc-team-option .rc-ws-clerk > [data-field="clerkName"] { font-size: 11px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-team-option .rc-ws-id { margin-left: auto; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.5; color: var(--fg-dim); white-space: nowrap; flex-shrink: 0; }
.rc-team-option .rc-ws-id[hidden] { display: none; }
.rc-settings-menu-btn { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center; width: 100%; padding: 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--fg-3); text-align: left; cursor: pointer; }
.rc-settings-menu-btn:hover { background: var(--surface-2); color: var(--fg-1); }
.rc-settings-menu-btn.active { background: var(--teal-subtle); border-color: var(--teal-soft); color: var(--teal); }
.rc-settings-menu-btn .rc-card-icon { width: 28px; height: 28px; border-radius: 7px; }
.rc-settings-menu-btn span { display: block; color: inherit; font-family: var(--font-heading); font-size: 12px; font-weight: 700; }
.rc-settings-menu-btn em { display: block; grid-column: 2; color: var(--fg-dim); font-style: normal; font-size: 11px; margin-top: -3px; }
.rc-settings-stage { min-width: 0; }
.rc-settings-panel[hidden] { display: none; }
.rc-settings-panel.active { display: block; }
/* Settings page only: full-width stage + a top underline-tab nav
   (.rc-settings-tabs), matching the CRM/PM sub-nav, with the workspace switcher
   moved to a header-right pill (.rc-settings-ws). Page-scoped so the SHARED
   .rc-settings-layout / .rc-settings-menu / .rc-settings-menu-btn base rules
   above still drive the Account page's left nav (data-dashboard-page="account"). */
body[data-dashboard-page="settings"] .rc-settings-layout { display: block; }
body[data-dashboard-page="settings"] .rc-tabs-u { margin-bottom: 24px; }
.rc-settings-tabs { margin-top: 4px; }
.rc-settings-ws { position: relative; }
.rc-settings-ws .rc-team-select { width: auto; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 6px 11px; border-color: var(--border); border-radius: 10px; background: var(--surface-1); }
.rc-settings-ws .rc-team-select:hover { background: var(--surface-2); }
.rc-settings-ws .rc-ws-avatar { width: 30px; height: 30px; border-radius: 8px; }
.rc-settings-ws .rc-team-select strong { display: block; color: var(--fg-1); font-family: var(--font-heading); font-size: 12.5px; line-height: 1.15; }
.rc-settings-ws .rc-team-select em { display: block; color: var(--fg-dim); font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.rc-settings-ws .rc-team-menu { top: calc(100% + 6px); left: auto; right: 0; min-width: 280px; }
.rc-integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rc-integration-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); }
.rc-integration-item strong { display: block; color: var(--fg-1); font-family: var(--font-heading); font-size: 13px; margin-bottom: 4px; }
.rc-integration-item span { display: block; color: var(--fg-3); font-size: 12px; line-height: 1.45; }
.rc-integration-item .rc-btn { grid-column: 1 / -1; justify-content: center; }
[data-social-status] { margin-left: auto; white-space: nowrap; }
.rc-account-avatar-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); }
.rc-account-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--grad-cta); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 17px; overflow: hidden; }
.rc-account-avatar.has-image { background: var(--surface-1); }
.rc-account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-account-avatar-row strong { display: block; color: var(--fg-1); font-family: var(--font-heading); font-size: 13px; margin-bottom: 3px; }
.rc-account-avatar-row span { display: block; color: var(--fg-3); font-size: 12px; line-height: 1.45; }
@media (max-width: 1180px) {
  .rc-settings-layout { grid-template-columns: 1fr; }
  .rc-settings-menu { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-settings-company { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .rc-settings-menu,
  .rc-integration-grid { grid-template-columns: 1fr; }
  .rc-account-avatar-row { grid-template-columns: 56px 1fr; }
  .rc-account-avatar-row .rc-btn { grid-column: 1 / -1; justify-content: center; }
}
/* stat */
.rc-stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 14px; position: relative; overflow: hidden; min-height: 108px; }
.rc-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; position: relative; z-index: 2; }
.rc-stat-value { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--fg-1); line-height: 1; letter-spacing: -0.015em; position: relative; z-index: 2; }
.rc-stat-value .unit { font-size: 13px; color: var(--fg-3); font-weight: 400; margin-left: 3px; }
.rc-stat-delta { font-family: var(--font-mono); font-size: 11px; color: var(--success); margin-top: 6px; display: inline-flex; align-items: center; gap: 3px; position: relative; z-index: 2; }
.rc-stat-delta.down { color: var(--danger); }
.rc-stat-delta.flat { color: var(--fg-dim); }
.rc-stat-spark { display: none; }

/* table */
.rc-table-wrap { border-radius: 12px; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--border); background: var(--card); -webkit-overflow-scrolling: touch; }
.rc-table-wrap::-webkit-scrollbar { height: 8px; }
.rc-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.rc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rc-table th { text-align: left; padding: 10px 14px; font-family: var(--font-heading); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.rc-table td { padding: 11px 14px; border-bottom: 1px solid rgba(47,60,78,0.4); color: var(--fg-2); vertical-align: middle; }
.rc-table tbody tr:last-child td { border-bottom: none; }
.rc-table tbody tr:hover { background: var(--surface-1); }
.rc-table tbody tr[data-task-row], .rc-table tbody tr[data-approval-row] { cursor: pointer; }
.rc-table .tname { color: var(--fg-1); font-weight: 600; font-family: var(--font-heading); }
.rc-table .tmuted { color: var(--fg-dim); font-size: 12px; }
.rc-table .num { font-family: var(--font-mono); text-align: right; }

/* badge */
/* Legacy family for STATUS chips — new status surfaces use the shared .rc-pill system (dashboard/css/status-pills.css + js/lib/status-pills.js). */
.rc-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: 0.04em; white-space: nowrap; text-transform: uppercase; }
.rc-badge.teal { background: var(--teal-subtle); color: var(--teal); border: 1px solid var(--teal-soft); }
.rc-badge.sky { background: rgba(14,165,233,0.1); color: var(--sky); border: 1px solid rgba(14,165,233,0.25); }
.rc-badge.orange { background: rgba(234,84,40,0.1); color: var(--orange-light); border: 1px solid rgba(234,84,40,0.35); }
.rc-badge.success { background: var(--success-soft); color: var(--success); border: 1px solid var(--success-strong); }
.rc-badge.warn { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning-strong); }
.rc-badge.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-strong); }
.rc-badge.violet { background: var(--violet-soft); color: var(--violet); border: 1px solid rgba(167,139,250,0.25); }
.rc-badge.ghost { background: var(--surface-2); color: var(--fg-3); border: 1px solid var(--border); }
.rc-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* progress */
.rc-prog { width: 100%; height: 5px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.rc-prog > div { height: 100%; background: var(--teal); border-radius: inherit; transition: width .3s; }
.rc-prog.orange > div { background: var(--orange); }
.rc-prog.sky > div { background: var(--sky); }
.rc-prog.gradient > div { background: var(--grad-cta); }
.rc-prog.success > div { background: var(--success); }
.rc-prog.warn > div { background: var(--warning); }
.rc-prog.danger > div { background: var(--danger); }

/* avatar */
.rc-av { width: 26px; height: 26px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); font-family: var(--font-heading); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(167,139,250,0.3); flex-shrink: 0; }
.rc-av.t { background: var(--teal-subtle); color: var(--teal); border-color: var(--teal-soft); }
.rc-av.o { background: rgba(234,84,40,0.1); color: var(--orange-light); border-color: rgba(234,84,40,0.3); }
.rc-av.s { background: var(--success-soft); color: var(--success); border-color: var(--success-strong); }
.rc-av.sky { background: rgba(14,165,233,0.1); color: var(--sky); border-color: rgba(14,165,233,0.25); }
.rc-av.lg { width: 36px; height: 36px; font-size: 12px; }
.rc-av-stack { display: inline-flex; }
.rc-av-stack .rc-av { margin-left: -8px; box-shadow: 0 0 0 2px var(--card); }
.rc-av-stack .rc-av:first-child { margin-left: 0; }

/* label-caps */
.rc-label-caps { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); }

/* tabs */
.rc-tabs { display: inline-flex; gap: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px; flex-wrap: wrap; }
.rc-tab { padding: 7px 12px; border-radius: 7px; font-family: var(--font-heading); font-size: 11px; font-weight: 600; color: var(--fg-3); background: transparent; border: none; cursor: pointer; letter-spacing: 0.02em; white-space: nowrap; }
.rc-tab.active { background: var(--card); color: var(--fg-1); box-shadow: var(--shadow-sm); }
.rc-tab:not(.active):hover { color: var(--fg-2); }

.rc-tabs-u { display: flex; gap: 24px; border-bottom: 1px solid var(--border); margin-bottom: 40px; flex-wrap: wrap; }
.rc-tab-u { padding: 12px 2px; border-bottom: 2px solid transparent; font-family: var(--font-heading); font-size: 12px; font-weight: 600; color: var(--fg-4); background: transparent; border-left: none; border-right: none; border-top: none; cursor: pointer; margin-bottom: -1px; letter-spacing: 0.02em; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.rc-tab-u.active { color: var(--fg-1); border-bottom-color: var(--teal); }
.rc-tab-u:hover { color: var(--fg-2); }
.rc-tab-u.rc-tab-u-studio {
  align-self: center;
  padding: 6px 10px;
  margin-bottom: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  box-shadow: var(--shadow-cta);
  line-height: 1;
}
.rc-tab-u.rc-tab-u-studio:hover {
  color: #fff;
  background: var(--orange-dark);
  box-shadow: var(--shadow-cta-h);
}
.rc-tab-u.rc-tab-u-studio.active {
  color: #fff;
  background: var(--orange);
  border-bottom-color: transparent;
}
.rc-tab-u .rc-tab-count { font-family: var(--font-mono); font-size: 10px; background: var(--surface-3); color: var(--fg-3); padding: 1px 6px; border-radius: 99px; font-weight: 500; }
.rc-tab-u.active .rc-tab-count { background: var(--teal-subtle); color: var(--teal); }

/* Inline count badge for canonical 2nd-tier subtabs (.rc-subtab > .rc-subtab-n).
   Promoted from dashboard/css/pm-projects-views.css (PR #1225) so every page
   that emits this markup gets the same faded/brand-red count treatment:
     <button class="rc-subtab"|"rc-subtab active">
       <span class="rc-subtab-l">Label</span>
       <span class="rc-subtab-n" data-n="42">42</span>
     </button>
*/
.rc-subtab .rc-subtab-n {
  margin-left: 6px;
  opacity: 0.55;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rc-subtab.active .rc-subtab-n,
.rc-subtab[aria-selected="true"] .rc-subtab-n {
  opacity: 0.6;
  font-weight: 600;
}
.rc-subtab .rc-subtab-n[data-n]:not([data-n="0"]) {
  color: var(--brand-primary, var(--accent, #CC0C1F));
  opacity: 1;
  font-weight: 700;
}

/* grid helpers */
.rc-grid { display: grid; gap: 28px; }
.rc-g-2 { grid-template-columns: 1fr 1fr; }
.rc-g-3 { grid-template-columns: repeat(3, 1fr); }
.rc-g-4 { grid-template-columns: repeat(4, 1fr); }
.rc-g-5 { grid-template-columns: repeat(5, 1fr); }
.rc-g-6 { grid-template-columns: repeat(6, 1fr); }

/* divider */
.rc-div { height: 1px; background: rgba(47,60,78,0.4); margin: 14px 0; }

/* callout */
.rc-callout { padding: 12px 16px; background: rgba(81,137,173,0.08); border-left: 3px solid var(--sky); border-radius: 6px; font-size: 12px; color: var(--fg-2); line-height: 1.55; display: flex; gap: 10px; align-items: flex-start; }
.rc-callout.orange { background: rgba(234,84,40,0.06); border-color: var(--orange); }
.rc-callout.warn { background: var(--warning-soft); border-color: var(--warning); }
.rc-callout.success { background: var(--success-soft); border-color: var(--success); }
.rc-callout b { color: var(--fg-1); font-weight: 700; }
.rc-callout svg { flex-shrink: 0; color: inherit; margin-top: 2px; }
.rc-callout.teal svg, .rc-callout svg { color: var(--sky); }
.rc-callout.orange svg { color: var(--orange); }
.rc-callout.warn svg { color: var(--warning); }
.rc-callout.success svg { color: var(--success); }

/* ================ notification panel ================ */
.rc-notif {
  position: absolute; top: 56px; right: 24px; width: 380px; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  /* The drawer is a child of .rc-main (a sibling of the topbar), so it competes
     in the same stacking context as the page content. At z-index 50 it TIED the
     sticky .rc-page-head (also 50) and lost on DOM order — the project header's
     Edit / "Update via Ask Rippler" buttons rendered on top of it. Bump it above
     the PM sticky-head stack (page-head=50, tabs=49, toolbar=48) but below the
     topbar (200), modals (1000) and toasts (1200). */
  box-shadow: var(--shadow-lg); z-index: 190; overflow: hidden; max-height: 520px; display: flex; flex-direction: column;
}
.rc-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.rc-notif-title { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--fg-1); }
.rc-notif-summary { font-size: 11px; color: var(--fg-dim); }
.rc-notif-actions { display: flex; gap: 4px; align-items: center; }
.rc-notif-body { overflow-y: auto; padding: 6px 6px; flex: 1; }
.rc-notif-foot { padding: 10px; border-top: 1px solid var(--border); text-align: center; }
.rc-notif-settings { width: 100%; justify-content: center; }
.rc-notif[hidden] { display: none; }
.rc-notif-item { width: 100%; border: 0; background: transparent; text-align: left; display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.rc-notif-item:hover { background: var(--surface-2); }
.rc-notif-item.unread { background: rgba(10,191,188,0.04); }
.rc-notif-item .n-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rc-notif-item .n-icon svg { width: 14px; height: 14px; }
.rc-notif-item .n-body { flex: 1; min-width: 0; }
.rc-notif-item .n-title,
.rc-notif-item .n-sub,
.rc-notif-item .n-time { display: block; }
.rc-notif-item .n-title { font-family: var(--font-heading); font-weight: 600; font-size: 12px; color: var(--fg-1); line-height: 1.4; margin-bottom: 2px; }
.rc-notif-item .n-sub { font-size: 11px; color: var(--fg-3); line-height: 1.45; }
.rc-notif-item .n-time { font-size: 10px; color: var(--fg-dim); margin-top: 4px; font-family: var(--font-mono); }
.rc-notif-pref-grid { display: grid; gap: 8px; }
.rc-notif-pref-row { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, 86px); gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(47,60,78,0.3); }
.rc-notif-pref-row:last-child { border-bottom: 0; }
.rc-notif-pref-row.head { color: var(--fg-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.rc-notif-pref-row strong { display: block; color: var(--fg-1); font-family: var(--font-heading); font-size: 12px; margin-bottom: 2px; }
.rc-notif-pref-row span { color: var(--fg-3); font-size: 11px; line-height: 1.4; }
@media (max-width: 760px) {
  .rc-notif { right: 12px; left: 12px; width: auto; }
  .rc-notif-pref-row { grid-template-columns: 1fr; }
  .rc-notif-pref-row.head { display: none; }
}

/* sparkline/chart helpers */
.rc-sparkline { width: 100%; height: 100%; }
.rc-chart-card { padding: 18px 20px; }
.rc-chart-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; gap: 14px; flex-wrap: wrap; }
.rc-chart-h-l .rc-label-caps { margin-bottom: 4px; }
.rc-chart-value { font-family: var(--font-heading); font-size: 26px; font-weight: 700; color: var(--fg-1); letter-spacing: -0.015em; line-height: 1; }
.rc-chart-value .unit { font-size: 13px; color: var(--fg-3); font-weight: 400; margin-left: 3px; }

/* keyword pill */
.rc-kpill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11px; color: var(--fg-2); font-family: var(--font-mono); }
.rc-kpill.won { background: var(--success-soft); color: var(--success); border-color: var(--success-strong); }
.rc-kpill.lost { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-strong); }

/* empty-state placeholder boxes */
.rc-placeholder { background: repeating-linear-gradient(135deg, rgba(47,60,78,0.2), rgba(47,60,78,0.2) 10px, transparent 10px, transparent 20px); border: 1px dashed var(--border); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--fg-dim); padding: 24px; font-size: 12px; gap: 6px; }
.rc-placeholder[hidden],
[hidden] { display: none !important; }

/* ---- readiness gate ----
   JS forces #dashboard-page to data-state="loading" at boot (controller.js
   static boot), then releases to ready/empty/error once the controller
   resolves. Scoped to #dashboard-page ONLY so the global nav/topbar/
   Ask-Ripple (siblings outside it) stay usable — the user can always navigate
   away. `inert` (set in setState) handles keyboard/focus; this handles mouse +
   the visual dimming. There is no other #dashboard-page[data-state] rule. */
#dashboard-page[data-state="loading"] { pointer-events: none; user-select: none; opacity: .55; cursor: progress; transition: opacity .15s ease; }
#dashboard-page[data-state="ready"],
#dashboard-page[data-state="empty"],
#dashboard-page[data-state="error"] { pointer-events: auto; user-select: auto; opacity: 1; cursor: auto; }

/* ---- page horizontal gutter (canonical) ----
   The dashboard page's horizontal gutter lives HERE on #dashboard-page.
   Direct children (.rc-page-head, .rc-card, .rc-tabs-u, …) MUST NOT add
   their own horizontal padding/margin — that's what produces the
   title-vs-card misalignment. Full-bleed views opt out with
   #dashboard-page { padding: 0 !important } (see .xo-embedded and
   body.view-owner-report). Vertical rhythm stays on the children. */
#dashboard-page { padding: 0 24px; }
@media (max-width: 768px) {
  #dashboard-page { padding: 0 16px; }
}

/* ---- skeleton / shimmer ----
   Optional richer loading visual. Drop inside a [data-state-view="loading"]
   panel in place of the hatched .rc-placeholder; the gate's state machine still
   owns when it shows/hides. Compose: <div class="rc-skeleton rc-skeleton-row">.
   Uses --surface-2/3 tokens so it themes automatically; honors reduced-motion. */
@keyframes rc-skeleton-shimmer { 100% { background-position: -200% 0; } }
.rc-skeleton { position: relative; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: rc-skeleton-shimmer 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rc-skeleton { animation: none; background: var(--surface-2); } }
.rc-skeleton-line { height: 12px; margin: 6px 0; }
.rc-skeleton-line.sm { height: 10px; width: 60%; }
.rc-skeleton-line.lg { height: 18px; width: 40%; }
.rc-skeleton-tile { height: 84px; border-radius: 10px; }
.rc-skeleton-row { height: 44px; border-radius: 8px; margin-bottom: 8px; }
.rc-skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; }
.rc-skeleton-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rc-skeleton-card { padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }

/* ---- Dashboard loading skeletons — 3 variants that mirror the 3 template
   views (v0 Classic Grid / v1 Home / v2 Command Cockpit). Still grey shimmer
   placeholders (compose the .rc-skeleton shimmer with a shape class); the
   controller shows the one matching the template that will render. ---- */
.rc-dash-skel[hidden] { display: none; }

/* v0 — section-tile grid: centered icon + title + two description lines */
.rc-skel-v0 { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 96px auto 0; max-width: 960px; }
.rc-skel-v0 .rc-skel-tile { flex: 0 0 calc((100% - 36px) / 3); min-height: 144px; padding: 24px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.rc-skel-v0 .rc-skel-icon { width: 40px; height: 40px; border-radius: 10px; }
.rc-skel-v0 .rc-skel-title { width: 96px; height: 13px; border-radius: 5px; }
.rc-skel-v0 .rc-skel-desc { width: 150px; height: 9px; border-radius: 5px; }
.rc-skel-v0 .rc-skel-desc.sm { width: 108px; }

/* v1 — home header (greeting + AI bar) then a stat-card row */
.rc-skel-v1 { margin-top: 24px; }
.rc-skel-v1 .rc-skel-greet { width: 260px; height: 26px; border-radius: 6px; margin-bottom: 10px; }
.rc-skel-v1 .rc-skel-date { width: 160px; height: 12px; border-radius: 5px; margin-bottom: 22px; }
.rc-skel-v1 .rc-skel-aibar { width: 100%; max-width: 640px; height: 46px; border-radius: 12px; margin-bottom: 28px; }
.rc-skel-v1 .rc-skel-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rc-skel-v1 .rc-skel-stat { min-height: 92px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rc-skel-v1 .rc-skel-stat-num { width: 60px; height: 28px; border-radius: 6px; }
.rc-skel-v1 .rc-skel-stat-lbl { width: 92px; height: 10px; border-radius: 5px; }

/* v2 — command cockpit: brief hero + ask bar + tab row + card grid */
.rc-skel-v2 { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.rc-skel-v2 .rc-skel-brief { border: 1px solid var(--border); border-radius: 16px; background: var(--card); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.rc-skel-v2 .rc-skel-eyebrow { width: 210px; height: 11px; border-radius: 5px; }
.rc-skel-v2 .rc-skel-head { display: flex; align-items: center; gap: 14px; }
.rc-skel-v2 .rc-skel-av { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.rc-skel-v2 .rc-skel-greet2 { width: 240px; height: 24px; border-radius: 6px; }
.rc-skel-v2 .rc-skel-summary { width: 60%; height: 12px; border-radius: 5px; }
.rc-skel-v2 .rc-skel-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-skel-v2 .rc-skel-pill { width: 160px; height: 30px; border-radius: 16px; }
.rc-skel-v2 .rc-skel-ask { width: 100%; height: 52px; border-radius: 12px; }
.rc-skel-v2 .rc-skel-tabs { display: flex; gap: 22px; padding: 4px 2px; }
.rc-skel-v2 .rc-skel-tab { width: 68px; height: 14px; border-radius: 5px; }
.rc-skel-v2 .rc-skel-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rc-skel-v2 .rc-skel-card { min-height: 150px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.rc-skel-v2 .rc-skel-card-icon { width: 36px; height: 36px; border-radius: 9px; }
.rc-skel-v2 .rc-skel-card-title { width: 110px; height: 14px; border-radius: 5px; }
.rc-skel-v2 .rc-skel-card-num { width: 52px; height: 26px; border-radius: 6px; }
.rc-skel-v2 .rc-skel-card-row { width: 100%; height: 12px; border-radius: 5px; margin-top: auto; }
@media (max-width: 900px) { .rc-skel-v1 .rc-skel-stats { grid-template-columns: repeat(2, 1fr); } .rc-skel-v2 .rc-skel-cards { grid-template-columns: 1fr; } }

/* scrollbar utility */
.rc-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.rc-scroll::-webkit-scrollbar { width: 6px; }
.rc-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* input */
.rc-input { width: 100%; padding: 9px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--fg-1); font-size: 13px; font-family: var(--font-body); outline: none; transition: border-color .15s, box-shadow .15s; }
.rc-input:focus { border-color: var(--teal); box-shadow: var(--focus-ring); }
.rc-input::placeholder { color: var(--fg-dim); }
.rc-textarea { min-height: 80px; resize: vertical; line-height: 1.55; }
.rc-select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a7a9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }
.rc-label { display: block; font-family: var(--font-heading); font-size: 12px; font-weight: 600; color: var(--fg-2); margin-bottom: 5px; }
.rc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rc-form-grid .full-width { grid-column: 1 / -1; }
.rc-field { display: grid; gap: 5px; }
.rc-field span { font-family: var(--font-heading); font-size: 12px; color: var(--fg-2); font-weight: 600; }
.rc-field-hint { font-size: 11px; color: var(--fg-dim); margin-top: 2px; }

/* Migration 266 / feature/pm-job-number-naming — live preview chip under the
   new-project modal's name input. Hidden by default; activates via .is-on
   when normalize(raw) differs from raw. The aria-live="polite" on the chip
   element itself makes screen readers announce changes without interrupting. */
.rc-name-preview-chip { display: none; align-items: center; gap: 7px; margin: 4px 0 0; padding: 4px 10px 4px 8px; background: rgba(10,191,188,.10); border: 1px solid rgba(10,191,188,.38); border-radius: 99px; width: fit-content; font-size: 11.5px; }
.rc-name-preview-chip.is-on { display: inline-flex; }
.rc-name-preview-eye { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.rc-name-preview-val { font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); font-weight: 600; }

.rc-multi-picker { display: grid; gap: 6px; }
.rc-multi-picker-label { font-family: var(--font-heading); font-size: 12px; color: var(--fg-2); font-weight: 600; }
.rc-multi-picker .rc-chip-row { margin-bottom: 0; }
.rc-multi-picker-add { display: block; }
.rc-multi-picker-add .rc-input { width: 100%; }
.rc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 99px; background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--border); font-size: 11px; font-weight: 600; }
.rc-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.rc-chip-remove:hover { background: var(--surface-3); color: var(--fg-1); }
.rc-dialog { width: min(720px, calc(100vw - 32px)); border: 0; padding: 0; border-radius: 12px; background: var(--card); color: var(--fg-2); box-shadow: var(--shadow-lg); }
.rc-dialog::backdrop { background: rgba(4, 12, 20, .58); }
.rc-dialog-panel { margin: 0; }
.rc-config-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 14px; align-items: start; }
.rc-config-layout > .rc-card:nth-child(1),
.rc-config-layout > .rc-card:nth-child(2) { grid-column: 1; }
.rc-config-layout > .rc-card:nth-child(3) { grid-column: 2; grid-row: 1; }
.rc-config-layout > aside { grid-column: 2; grid-row: 2; position: sticky; top: 18px; }
.rc-capability-row { width: 100%; border: 0; text-align: left; background: transparent; cursor: pointer; }
.rc-capability-row:hover { background: var(--surface-2); }
@media (max-width: 760px) {
  .rc-form-grid { grid-template-columns: 1fr; }
}

/* switch */
.rc-switch { position: relative; display: inline-flex; width: 36px; height: 20px; border-radius: 12px; background: rgba(47,60,78,0.8); cursor: pointer; border: none; vertical-align: middle; transition: background .2s; flex-shrink: 0; }
.rc-switch.on { background: var(--teal); }
.rc-switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s; }
.rc-switch.on .knob { transform: translateX(16px); }
/* WCAG 2.5.8: the 36x20 switch is below the 24px min tap target on touch. On coarse
   pointers grow the switch to 36x24 and re-center the knob (top 2->4); desktop is
   unchanged. Width (36) and the on-state translateX(16) stay valid. */
@media (pointer: coarse) {
  .rc-switch { height: 24px; }
  .rc-switch .knob { top: 4px; }
}

/* check */
.rc-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 12px; color: var(--fg-2); font-family: var(--font-body); background: transparent; border: 0; padding: 0; }
.rc-check .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong); background: var(--bg); display: inline-flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
.rc-check.on .box { background: var(--teal); border-color: var(--teal); }
.rc-check.on .box::after { content: ""; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px,-1px); }

/* To Do list */
body[data-dashboard-page="productivity"] .rc-todo-card-head {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body[data-dashboard-page="productivity"] .rc-todo-card-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

body[data-dashboard-page="productivity"] .rc-todo-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
  padding: 0;
}

body[data-dashboard-page="productivity"] .rc-todo-search {
  flex: 0 1 240px;
  width: 240px;
  min-width: min(100%, 220px);
  max-width: 35%;
}

body[data-dashboard-page="productivity"] .rc-todo-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-dashboard-page="productivity"] .rc-todo-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}

body[data-dashboard-page="productivity"] .rc-todo-filter:hover {
  border-color: var(--teal);
  background: var(--teal-subtle);
  color: var(--fg-1);
}

body[data-dashboard-page="productivity"] .rc-todo-filter:disabled {
  cursor: default;
  opacity: 0.72;
  background: var(--surface-1);
  border-color: var(--border-subtle);
}

body[data-dashboard-page="productivity"] .rc-todo-filter span {
  color: var(--fg-3);
  font-weight: 600;
}

body[data-dashboard-page="productivity"] .rc-todo-filter strong {
  color: var(--fg-1);
  font-weight: 800;
}

@media (max-width: 980px) {
  body[data-dashboard-page="productivity"] .rc-todo-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-dashboard-page="productivity"] .rc-todo-toolbar {
    justify-content: flex-start;
    margin-left: 0;
  }

  body[data-dashboard-page="productivity"] .rc-todo-search {
    max-width: none;
  }
}

body[data-dashboard-page="productivity"] .rc-todo-bucket-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px 8px;
  border-bottom: 1px solid var(--border-default);
  margin-top: 12px;
}

body[data-dashboard-page="productivity"] .rc-todo-bucket-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

body[data-dashboard-page="productivity"] .rc-todo-bucket-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
}

body[data-dashboard-page="productivity"] .rc-todo-bucket-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
}

body[data-dashboard-page="productivity"] .rc-todo-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto auto 40px;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 11px 4px 11px 10px;
  border-bottom: 1px solid var(--border-subtle);
  border-left: 3px solid transparent;
  background: var(--card);
  color: var(--fg-2);
  transition: background var(--transition-base), opacity var(--transition-base);
}

body[data-dashboard-page="productivity"] .rc-todo-row:hover {
  background: var(--surface-1);
}

body[data-dashboard-page="productivity"] .rc-todo-row:focus-visible {
  box-shadow: var(--focus-ring);
}

body[data-dashboard-page="productivity"] .rc-todo-row.is-done {
  opacity: 0.72;
}

body[data-dashboard-page="productivity"] .rc-todo-row.is-approval-review {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
}

body[data-dashboard-page="productivity"] .rc-todo-toggle {
  min-width: 92px;
  justify-content: flex-start;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-input);
  background: var(--bg);
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}

body[data-dashboard-page="productivity"] .rc-todo-toggle:hover {
  border-color: var(--teal);
  color: var(--fg-1);
  background: var(--teal-subtle);
}

body[data-dashboard-page="productivity"] .rc-todo-toggle.on {
  border-color: var(--teal);
  background: var(--teal-subtle);
  color: var(--teal);
}

body[data-dashboard-page="productivity"] .rc-todo-toggle .box {
  width: 16px;
  height: 16px;
}

body[data-dashboard-page="productivity"] .rc-todo-review-btn {
  min-width: 116px;
  justify-content: center;
  white-space: nowrap;
}

body[data-dashboard-page="productivity"] .rc-todo-row-main {
  min-width: 0;
}

body[data-dashboard-page="productivity"] .rc-todo-row-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-dashboard-page="productivity"] .rc-todo-row-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fg-1);
}

body[data-dashboard-page="productivity"] .rc-todo-row.is-done .rc-todo-row-title {
  text-decoration: line-through;
  color: var(--fg-dim);
}

body[data-dashboard-page="productivity"] .rc-todo-row-meta {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 3px;
}

body[data-dashboard-page="productivity"] .rc-todo-badge-blocked {
  background: var(--danger-soft);
  color: var(--danger);
}

body[data-dashboard-page="productivity"] .rc-todo-badge-approval {
  background: var(--warning-soft);
  color: var(--warning);
}

body[data-dashboard-page="productivity"] .rc-todo-due {
  background: transparent;
  color: var(--fg-3);
  font-weight: 600;
}

body[data-dashboard-page="productivity"] .rc-todo-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 40px;
}

body[data-dashboard-page="productivity"] .rc-todo-approval-action {
  white-space: nowrap;
}

/* command/hotkey hint */
.rc-hotkey { font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim); padding: 2px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; }

/* focus rings on inputs + buttons */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* interactive prototype layer */
.rc-modal-root { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.rc-modal-root.show { opacity: 1; pointer-events: auto; }
.rc-modal-backdrop { position: absolute; inset: 0; background: rgba(3,7,12,.72); backdrop-filter: blur(8px); }
/* Header and footer stay pinned; only the body scrolls. The modal itself
   must NOT scroll (overflow:auto here once let the title and the action
   buttons scroll out of view on tall forms like the social compose modal). */
.rc-modal { position: relative; width: min(620px, 100%); max-height: min(760px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 30px 90px rgba(0,0,0,.45); transform: translateY(8px); transition: transform .15s ease; }
/* A native <dialog>.rc-modal must re-hide when closed: .rc-modal's display:flex
 * (author origin) beats the UA `dialog:not([open]){display:none}`, which would
 * otherwise render the closed dialog (e.g. its Close button) inline on the page. */
dialog.rc-modal:not([open]) { display: none; }
.rc-modal-root.show .rc-modal { transform: translateY(0); }
.rc-modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.rc-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.rc-modal-head h2 { margin: 0 0 4px; font-family: var(--font-heading); color: var(--fg-1); font-size: 18px; }
.rc-modal-head p { margin: 0; color: var(--fg-3); font-size: 12px; line-height: 1.5; }
.rc-modal-head .rc-iconbtn { font-size: 18px; line-height: 1; }
.rc-modal-body { padding: 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.rc-modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface-1); flex: 0 0 auto; }
/* Themed scrollbars for scrollable modal + card surfaces (matches .rc-content/.rc-nav). */
.rc-modal-body, .rc-card-body { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.rc-modal-body::-webkit-scrollbar, .rc-card-body::-webkit-scrollbar { width: 8px; height: 8px; }
.rc-modal-body::-webkit-scrollbar-track, .rc-card-body::-webkit-scrollbar-track { background: transparent; }
.rc-modal-body::-webkit-scrollbar-thumb, .rc-card-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.rc-modal-body::-webkit-scrollbar-thumb:hover, .rc-card-body::-webkit-scrollbar-thumb:hover { background: var(--fg-3, var(--border)); }
.rc-modal-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
/* align-content: start keeps a field's input from stretching to match a
   taller neighbor (e.g. Date next to Time-with-hint grew into a giant box). */
.rc-modal-form label, .rc-modal-form .rc-modal-field { display: grid; gap: 5px; align-content: start; }
.rc-modal-form label.full, .rc-modal-form .rc-modal-field.full { grid-column: 1 / -1; }
.rc-modal-form label > span, .rc-modal-form .rc-modal-field > span { font-family: var(--font-heading); font-size: 12px; color: var(--fg-2); font-weight: 600; }
.rc-modal-form input, .rc-modal-form select, .rc-modal-form textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-1); color: var(--fg-1); font-family: inherit; font-size: 13px; line-height: 1.4; }
/* One consistent control height for single-line inputs and selects. */
.rc-modal-form input:not([type="file"]):not([type="checkbox"]):not([type="color"]):not([type="hidden"]), .rc-modal-form select { height: 38px; }
/* Native date/time pickers: visible affordance, themed popup, whole field
   clickable (controller.js opens showPicker() on click). */
.rc-modal-form input[type="date"], .rc-modal-form input[type="time"] { color-scheme: light dark; cursor: pointer; }
.rc-modal-form input[type="date"]::-webkit-calendar-picker-indicator, .rc-modal-form input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
.rc-modal-form input[type="date"]:hover::-webkit-calendar-picker-indicator, .rc-modal-form input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
/* Scheduling inline date/time fields (time-off, resource blackouts, weekly
   shift hours). Scoped to Scheduling pages so other surfaces are untouched.
   DATE fields read as a plain text box, so give them an explicit calendar icon
   (matching the .rc-select chevron pattern) and hide the native indicator.
   TIME fields keep their native segmented value (09:00 AM) at full width — a
   right-side icon + padding clips the AM/PM — and only get the themed popup.
   Both: whole field opens the picker (controllers wire showPicker() on click). */
body[data-dashboard-page^="scheduling"] .rc-input[type="date"] {
  color-scheme: light dark; cursor: pointer;
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%235a7a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
body[data-dashboard-page^="scheduling"] .rc-input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
body[data-dashboard-page^="scheduling"] .rc-input[type="time"] { color-scheme: light dark; cursor: pointer; }
.rc-modal-form input[type="file"] { padding: 7px 10px; cursor: pointer; }
.rc-field-hint a { color: var(--accent, #5096b3); text-decoration: underline; text-underline-offset: 2px; }
.rc-modal-form input:focus, .rc-modal-form select:focus, .rc-modal-form textarea:focus { outline: none; border-color: var(--accent, #5096b3); box-shadow: 0 0 0 3px rgba(80, 150, 179, .18); }
.rc-modal-form textarea { resize: vertical; min-height: 64px; font-family: inherit; }
.rc-modal-form select { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; background-color: var(--card); color-scheme: light dark; }
.rc-checkbox-group { display: grid; gap: 8px; }
.rc-checkbox-option { display: flex !important; align-items: center; gap: 9px !important; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); }
.rc-checkbox-option input[type="checkbox"] { width: 14px; height: 14px; padding: 0; accent-color: var(--accent, #5096b3); }
.rc-checkbox-option span { color: var(--fg-1) !important; font-size: 13px !important; font-weight: 600 !important; }
/* The dropdown option list is rendered by the OS/browser and largely
   ignores parent <select> styling. Explicit rules on <option> make
   the New Project Phase picker (and every other modal select) readable
   in both themes instead of inheriting browser defaults that clash
   with the modal background. */
.rc-modal-form select option { background-color: var(--card); color: var(--fg-1); }
.rc-modal-form select option:checked { background-color: var(--accent, #5096b3); color: var(--bg-1); }
.rc-modal-form-modal .rc-modal-foot { justify-content: space-between; }
.rc-modal-foot-left { display: flex; gap: 8px; }
.rc-modal-foot-right { display: flex; gap: 8px; }
.rc-btn-danger { color: var(--danger, #d65656); border-color: var(--danger-strong, #c44848); }
.rc-btn-danger:hover { background: var(--danger-soft, rgba(214, 86, 86, .12)); }
.rc-confirm-modal { width: min(460px, 100%); }
.rc-confirm-modal .rc-modal-head { padding: 18px 20px; }
.rc-confirm-modal .rc-modal-foot { padding: 14px 20px; }
.rc-btn-confirm-danger { background: var(--danger, #d65656); border-color: var(--danger-strong, #c44848); color: #fff; box-shadow: 0 12px 28px rgba(214, 86, 86, .18); }
.rc-btn-confirm-danger:hover { filter: brightness(1.05); }
.rc-modal-summary { display: grid; gap: 8px; }
.rc-modal-summary > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); }
.rc-modal-summary span { color: var(--fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.rc-modal-summary strong { color: var(--fg-1); text-align: right; font-size: 12px; }
.rc-report-body { margin: 14px 0 0; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); color: var(--fg-2); font: inherit; line-height: 1.55; white-space: pre-wrap; overflow: auto; max-height: min(48vh, 420px); }
/* z-index must stay above every modal/drawer/overlay (modal 1000, PM drawer/trash 1100) so toast feedback is never hidden behind a scrim — see #1230/#99. */
.rc-toast-root { position: fixed; right: 20px; bottom: 20px; z-index: 1200; display: grid; gap: 8px; pointer-events: none; }
.rc-toast { transform: translateY(8px); opacity: 0; transition: all .18s ease; padding: 10px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); color: var(--fg-1); box-shadow: var(--shadow-lg); font-size: 12px; font-weight: 700; }
.rc-toast { pointer-events: auto; }
.rc-toast.show { transform: translateY(0); opacity: 1; }
.rc-toast.teal { border-color: var(--teal-soft); color: var(--teal); }
.rc-toast.success { border-color: var(--success-soft, rgba(34, 197, 94, .35)); color: var(--success, #22c55e); }
.rc-toast.warn { border-color: var(--warning, #f59e0b); color: var(--warning, #f59e0b); }
.rc-toast.danger { border-color: var(--danger-strong); color: var(--danger); }
.rc-worker-error { padding: 14px 16px; border-color: var(--danger-strong); background: var(--danger-soft); color: var(--fg-1); }
.rc-worker-error strong { display: block; color: var(--danger); font-size: 13px; margin-bottom: 4px; }
.rc-worker-error p { margin: 0; color: var(--fg-2); font-size: 13px; line-height: 1.45; }
.rc-audio-mock { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); }
.rc-audio-mock > div { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--teal) 0 42%, var(--surface-3) 42%); }
.rc-audio-mock span { color: var(--fg-dim); font-family: var(--font-mono); font-size: 11px; }
.rc-contact-list-head { align-items: flex-end; gap: 16px; }
.rc-card-head-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.rc-contact-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rc-contact-search { display: grid; gap: 5px; width: min(360px, 42vw); min-width: 260px; }
.rc-contact-search span { color: var(--fg-dim); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rc-contact-search .rc-input { height: 34px; padding: 7px 10px; }
.rc-contact-table tbody tr { cursor: pointer; border-left: 3px solid transparent; transition: all 0.2s ease; }
.rc-contact-table tbody tr.active { background: var(--teal-subtle); box-shadow: inset 3px 0 0 var(--teal); border-left-color: var(--teal); }
.rc-contact-table td span { display: block; color: var(--fg-dim); font-size: 12px; margin-top: 4px; line-height: 1.4; }
.rc-contact-workspace { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.rc-contact-hero { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.rc-contact-hero h2 { margin: 0 0 3px; font-family: var(--font-heading); color: var(--fg-1); font-size: 20px; }
.rc-contact-hero p { margin: 0; color: var(--fg-3); font-size: 12px; }
.rc-contact-value { padding: 13px 14px; border-radius: 10px; background: var(--teal-subtle); color: var(--teal); font-family: var(--font-heading); font-weight: 700; font-size: 18px; margin-bottom: 14px; }
.rc-contact-value span { display: block; color: var(--fg-3); font-family: var(--font-body); font-size: 11px; font-weight: 500; margin-top: 3px; }
.rc-contact-fields { display: grid; gap: 8px; margin-bottom: 14px; }
.rc-contact-fields > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); }
.rc-contact-fields span { display: block; color: var(--fg-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 4px; }
.rc-contact-fields strong { color: var(--fg-1); font-size: 12px; line-height: 1.4; }
.rc-contact-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.rc-contact-tags span { padding: 3px 8px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-3); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.rc-comm-timeline { display: grid; gap: 10px; }
.rc-comm-item { width: 100%; border: 1px solid var(--border); background: var(--surface-1); border-radius: 10px; padding: 12px; display: grid; grid-template-columns: 38px 1fr; gap: 12px; text-align: left; cursor: pointer; }
.rc-comm-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.rc-comm-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--teal-subtle); color: var(--teal); font-family: var(--font-heading); font-size: 11px; font-weight: 700; }
.rc-comm-item.call .rc-comm-icon { background: rgba(234,84,40,0.1); color: var(--orange); }
.rc-comm-item.email .rc-comm-icon { background: rgba(14,165,233,0.1); color: var(--sky); }
.rc-comm-item.sms .rc-comm-icon { background: var(--success-soft); color: var(--success); }
.rc-comm-item.note .rc-comm-icon { background: var(--surface-3); color: var(--fg-2); }
.rc-comm-body, .rc-comm-body > span { display: block; min-width: 0; }
.rc-comm-top { display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.rc-comm-top strong { color: var(--fg-1); font-family: var(--font-heading); font-size: 13px; }
.rc-comm-top em { color: var(--fg-dim); font-style: normal; font-family: var(--font-mono); font-size: 10px; white-space: nowrap; }
.rc-comm-body > span:not(.rc-comm-top) { color: var(--fg-3); font-size: 12px; line-height: 1.5; }
.rc-comm-body small { display: block; color: var(--fg-dim); font-size: 10px; font-family: var(--font-mono); margin-top: 6px; }
@media (max-width: 1100px) {
  .rc-contact-workspace { grid-template-columns: 1fr; }
  /* Stack the header: the base .rc-card-head is a nowrap flex ROW, so making both
     .rc-card-head-main (flex:1, basis 0) and .rc-contact-actions width:100% collapses
     main to 0 width and its title/sub overflow into a 1-char column that overlaps the
     search + buttons. Column direction lets them sit one above the other. */
  .rc-contact-list-head { flex-direction: column; align-items: stretch; }
  .rc-card-head-main,
  .rc-contact-actions,
  .rc-contact-search { width: 100%; }
  .rc-contact-actions { justify-content: flex-start; }
}

.rc-table td > span { display: block; color: var(--fg-dim); font-size: 11px; margin-top: 3px; line-height: 1.4; }
.rc-table td > small { display: block; color: var(--fg-dim); font-family: var(--font-mono); font-size: 10px; margin-top: 3px; }
.rc-project-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 14px; align-items: start; }
.rc-project-board-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.rc-project-board-sidebar { padding: 14px; }
.rc-project-board-sidebar .rc-rowline { width: 100%; border-top: 0; border-left: 0; border-right: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.rc-project-board-sidebar .rc-rowline:last-child { border-bottom: 0; }
.rc-project-manager-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.rc-project-manager-grid .rc-rowline { width: 100%; border-top: 0; border-left: 0; border-right: 0; background: transparent; color: inherit; text-align: left; }
.rc-productivity-approvals-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 28px; align-items: start; }
.rc-productivity-approvals-grid .rc-rowline { width: 100%; border-top: 0; border-left: 0; border-right: 0; background: transparent; color: inherit; text-align: left; }
.rc-project-detail > .rc-card:nth-child(2),
.rc-project-detail > .rc-card:nth-child(3) { grid-column: 1; }
.rc-project-detail > aside { grid-column: 2; grid-row: 1 / span 3; }
.rc-project-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rc-project-fields > div { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); }
.rc-project-fields > div:last-child { grid-column: 1 / -1; }
.rc-project-fields span { display: block; color: var(--fg-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 5px; }
.rc-project-fields strong { display: block; color: var(--fg-1); font-size: 13px; line-height: 1.45; }
.rc-project-fields em { display: block; margin-top: 4px; color: var(--fg-3); font-style: normal; font-size: 11px; line-height: 1.4; }
.rc-project-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rc-project-media { position: relative; min-height: 150px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; overflow: hidden; text-align: left; cursor: pointer; background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(14,165,233,.14)); display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.rc-project-media.video { background: linear-gradient(135deg, rgba(234,84,40,.22), rgba(14,165,233,.16)); }
.rc-project-media:hover { border-color: var(--border-strong); }
.rc-project-media::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.08), rgba(255,255,255,.08) 8px, transparent 8px, transparent 16px); opacity: .35; }
.rc-project-media span,
.rc-project-media strong,
.rc-project-media em,
.rc-project-media i { position: relative; z-index: 1; }
.rc-project-media span { align-self: flex-start; padding: 3px 7px; border-radius: 99px; background: rgba(0,0,0,.32); color: #fff; font-family: var(--font-mono); font-size: 10px; }
.rc-project-media strong { color: var(--fg-1); font-family: var(--font-heading); font-size: 13px; }
.rc-project-media em { color: var(--fg-2); font-style: normal; font-size: 11px; line-height: 1.35; }
.rc-project-media i { position: absolute; top: 10px; right: 12px; color: rgba(255,255,255,.45); font-family: var(--font-heading); font-style: normal; font-size: 26px; font-weight: 800; }
.rc-project-timeline { display: grid; gap: 10px; }
.rc-project-event { position: relative; display: grid; grid-template-columns: 94px 160px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; border: 1px solid var(--border); background: var(--surface-1); border-radius: 10px; padding: 12px; text-align: left; cursor: pointer; }
.rc-project-event:hover { border-color: var(--border-strong); background: var(--surface-2); }
.rc-project-event span { color: var(--fg-dim); font-family: var(--font-mono); font-size: 10px; }
.rc-project-event strong { color: var(--fg-1); font-family: var(--font-heading); font-size: 13px; }
.rc-project-event em { color: var(--fg-3); font-style: normal; font-size: 12px; line-height: 1.45; }

/* Quiet dense work surfaces for contractor-facing pages. */
.rc-contact-workspace > .rc-card,
.rc-project-detail > .rc-card,
.rc-project-detail > aside > .rc-card {
  border-color: transparent;
  background: var(--surface-1);
}
.rc-contact-workspace .rc-card-head,
.rc-project-detail .rc-card-head {
  border-bottom-color: transparent;
  padding-bottom: 8px;
}
.rc-contact-workspace .rc-card-body,
.rc-project-detail .rc-card-body {
  padding-top: 8px;
}
.rc-contact-fields { gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rc-contact-fields > div {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 11px 0;
}
.rc-contact-fields > div:last-child { border-bottom: 0; }
.rc-contact-value {
  border-radius: 8px;
  background: color-mix(in srgb, var(--teal-subtle) 70%, transparent);
}
.rc-contact-tags span {
  border-color: transparent;
  background: var(--surface-1);
}
.rc-contact-workspace .rc-draft-box,
.rc-project-detail .rc-draft-box {
  border-color: transparent;
  background: var(--surface-1);
}
.rc-comm-timeline { gap: 4px; }
.rc-comm-item {
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 10px 8px;
}
.rc-comm-item:hover {
  background: var(--surface-2);
}
.rc-comm-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.rc-project-fields { gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rc-project-fields > div {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 12px 0;
}
.rc-project-fields > div:last-child,
.rc-project-fields > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.rc-project-event {
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 10px 8px;
}
.rc-project-event:hover {
  background: var(--surface-2);
}
.rc-kanban {
  gap: 14px;
}
.rc-kanban-col {
  border: 0;
  background: var(--surface-1);
  border-radius: 12px;
  padding: 12px;
}
.rc-kanban-col h3 {
  margin-bottom: 12px;
  color: var(--fg-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rc-kanban-card {
  border: 0;
  background: var(--card);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.rc-kanban-card .rc-badge,
.rc-kanban-card > .rc-badge {
  margin-top: 2px;
}
.rc-kanban-add {
  border-color: transparent;
  background: transparent;
  color: var(--fg-dim);
}
.rc-kanban-add:hover {
  background: var(--surface-2);
  color: var(--fg-2);
  border-color: transparent;
}
.rc-rowline {
  border-bottom-color: color-mix(in srgb, var(--border) 55%, transparent);
}
.rc-table td {
  border-bottom-color: color-mix(in srgb, var(--border) 55%, transparent);
}
.rc-call-detail { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; align-items: start; }
.rc-call-detail > .rc-card:nth-child(3) { grid-column: 2; }
.rc-call-detail > aside { grid-row: 1 / span 2; }
.rc-transcript { display: grid; gap: 10px; margin-top: 14px; padding: 4px 0; }
.rc-transcript p { margin: 0; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); color: var(--fg-2); font-size: 13px; line-height: 1.6; }
.rc-transcript p:last-child { border-bottom: 0; }
.rc-transcript strong { color: var(--fg-1); font-family: var(--font-heading); }
.rc-faq-editor { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.rc-editor-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.rc-wysiwyg { min-height: 520px; padding: 22px; border-radius: 10px; background: var(--surface-1); color: var(--fg-2); line-height: 1.7; outline: none; }
.rc-wysiwyg:focus { box-shadow: var(--focus-ring); }
.rc-wysiwyg h2,
.rc-wysiwyg h3 { color: var(--fg-1); font-family: var(--font-heading); margin: 0 0 12px; }
.rc-wysiwyg h3 { margin-top: 22px; }
.rc-wysiwyg p,
.rc-wysiwyg ul { margin: 0 0 14px; }
.rc-skill-workspace { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
.rc-skill-tree-panel { position: sticky; top: 18px; max-height: calc(100vh - 60px); overflow: hidden; }
.rc-skill-tree-panel .rc-card-body { max-height: calc(100vh - 170px); overflow: auto; }
.rc-skill-tree { display: grid; gap: 12px; margin-top: 14px; }
.rc-skill-category { display: grid; gap: 4px; }
.rc-skill-category-label { font-family: var(--font-heading); font-size: 11px; font-weight: 700; color: var(--fg-3); text-transform: uppercase; letter-spacing: .06em; padding: 8px 8px 3px; }
.rc-skill-node { display: grid; gap: 2px; }
.rc-skill-tree-item { width: 100%; min-height: 36px; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 7px 8px 7px calc(8px + (var(--skill-depth, 0) * 18px)); border: 0; border-radius: 8px; background: transparent; color: var(--fg-2); text-align: left; cursor: pointer; }
.rc-skill-tree-item:hover,
.rc-skill-tree-item.active { background: var(--surface-2); color: var(--fg-1); }
.rc-skill-tree-item.is-template { opacity: .9; }
.rc-skill-branch { color: var(--fg-3); font-family: var(--font-mono); }
.rc-skill-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.rc-skill-key { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3); font-size: 11px; font-family: var(--font-mono); }
.rc-skill-children { display: grid; gap: 2px; }
.rc-skill-editor-card .rc-card-head { align-items: flex-start; }
.rc-skill-empty-state { min-height: 420px; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; color: var(--fg-2); }
.rc-skill-empty-state strong { color: var(--fg-1); font-family: var(--font-heading); font-size: 18px; }
.rc-skill-empty-state span { max-width: 440px; }
.rc-skill-form { display: grid; gap: 18px; }
.rc-skill-feedback { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-2); }
.rc-skill-feedback[data-type="error"] { border-color: var(--danger-strong); background: var(--danger-soft); color: var(--danger); }
.rc-skill-feedback[data-type="info"] { border-color: var(--teal-strong); background: var(--teal-soft); color: var(--teal); }
.rc-skill-prompt-section { display: grid; gap: 10px; }
.rc-skill-editor-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; }
.rc-skill-wysiwyg { min-height: 460px; white-space: pre-wrap; border: 1px solid var(--border); }
.rc-chat-panel { max-width: 980px; margin: 0 auto; }
.rc-chat-thread { display: grid; gap: 12px; min-height: 360px; max-height: 58vh; overflow-y: auto; padding: 4px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.rc-chat-message { max-width: 760px; padding: 14px 16px; border: 1px solid transparent; border-radius: 10px; background: var(--surface-1); box-shadow: var(--shadow-sm); }
.rc-chat-message.assistant { justify-self: start; }
.rc-chat-message.user { justify-self: end; background: var(--teal-subtle); border-color: var(--teal-soft); }
.rc-chat-message.danger { border-color: var(--danger-strong); background: var(--danger-soft); }
.rc-chat-message strong { display: block; margin-bottom: 6px; color: var(--fg-1); font-family: var(--font-heading); font-size: 12px; }
.rc-chat-message p { margin: 0; color: var(--fg-2); font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.rc-chat-message span { display: block; margin-top: 8px; color: var(--fg-dim); font-size: 11px; }
.rc-chat-message span:empty { display: none; }
.rc-chat-form { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.rc-chat-form textarea:disabled { opacity: .72; cursor: wait; }
.rc-chat-shell { max-width: 900px; margin: 0 auto; }
.rc-chat-shell-compact { display: grid; gap: 16px; }
.rc-chat-shell-compact .rc-chat-thread { min-height: 430px; max-height: 62vh; padding: 0; }
.rc-chat-composer { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-sm); }
.rc-chat-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.rc-chat-main-card .rc-card-body { display: grid; gap: 0; }
.rc-chat-context { display: grid; gap: 14px; }
.rc-chat-prompt-list { display: grid; gap: 4px; }
.rc-chat-prompt-list .rc-rowline { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.rc-chat-prompt-list .rc-rowline:hover { background: var(--surface-2); }
.rc-chat-prompt-list .rc-rowline span { color: var(--fg-dim); font-size: 11px; }
.rc-chat-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-chat-chip-row span { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border-radius: 99px; background: var(--surface-2); color: var(--fg-3); font-size: 11px; font-weight: 700; }
.rc-chat-command { display: grid; gap: 14px; }
.rc-chat-command-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
.rc-chat-command-head span { display: block; color: var(--fg-dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.rc-chat-command-head strong { display: block; margin-top: 4px; color: var(--fg-1); font-family: var(--font-heading); font-size: 20px; }
.rc-chat-command-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.rc-chat-timeline-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; }
.rc-chat-timeline { display: grid; gap: 14px; }
.rc-chat-timeline div { position: relative; display: grid; gap: 4px; padding-left: 18px; }
.rc-chat-timeline div::before { content: ""; position: absolute; top: 5px; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.rc-chat-timeline div::after { content: ""; position: absolute; top: 17px; left: 5px; bottom: -12px; width: 1px; background: var(--border); }
.rc-chat-timeline div:last-child::after { display: none; }
.rc-chat-timeline span { color: var(--fg-dim); font-family: var(--font-mono); font-size: 10px; }
.rc-chat-timeline strong { color: var(--fg-1); font-family: var(--font-heading); font-size: 13px; }
.rc-chat-timeline em { color: var(--fg-3); font-style: normal; font-size: 12px; line-height: 1.45; }
.rc-competitive-lens-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.rc-competitive-lens-summary > div { min-width: 0; padding: 12px; border-radius: 10px; background: var(--surface-1); }
.rc-competitive-lens-summary span { display: block; color: var(--fg-dim); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rc-competitive-lens-summary strong { display: block; margin-top: 5px; color: var(--fg-1); font-family: var(--font-heading); font-size: 17px; }
.rc-competitive-lens-summary em { display: block; margin-top: 5px; color: var(--fg-3); font-style: normal; font-size: 12px; line-height: 1.45; }
.rc-competitive-signal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.rc-decision-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
@media (max-width: 1180px) {
  .rc-project-detail, .rc-project-board-layout, .rc-project-manager-grid, .rc-productivity-approvals-grid { grid-template-columns: 1fr; }
  .rc-project-detail > aside,
  .rc-project-detail > .rc-card:nth-child(2),
  .rc-project-detail > .rc-card:nth-child(3) { grid-column: 1; grid-row: auto; }
  .rc-project-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-call-detail,
  .rc-faq-editor,
  .rc-skill-workspace,
  .rc-chat-workspace,
  .rc-chat-command-grid,
  .rc-chat-timeline-layout,
  .rc-competitive-signal-layout,
  .rc-competitive-lens-summary,
  .rc-config-layout { grid-template-columns: 1fr; }
  .rc-config-layout > .rc-card:nth-child(1),
  .rc-config-layout > .rc-card:nth-child(2),
  .rc-config-layout > .rc-card:nth-child(3),
  .rc-config-layout > aside { grid-column: 1; grid-row: auto; position: static; }
  .rc-skill-tree-panel { position: static; max-height: none; }
  .rc-skill-tree-panel .rc-card-body { max-height: none; }
  .rc-call-detail > .rc-card:nth-child(3),
  .rc-call-detail > aside { grid-column: 1; grid-row: auto; }
}
@media (max-width: 760px) {
  .rc-project-fields,
  .rc-project-media-grid,
  .rc-project-event { grid-template-columns: 1fr; }
}

/* ================ RESPONSIVE DESKTOP LAYOUT HELPERS ================ */
/* Three-column: fixed-left, flex-middle, fixed-right.
   Below 1280px the right panel reflows under the left+middle row.
   Below 1100px everything stacks. */
.rc-split-3 {
  display: grid;
  grid-template-columns: minmax(0, var(--rc-l, 320px)) minmax(0, 1fr) minmax(0, var(--rc-r, 340px));
  gap: 14px;
}
.rc-split-3 > * { min-width: 0; }
@media (max-width: 1280px) {
  .rc-split-3 { grid-template-columns: minmax(0, var(--rc-l, 320px)) minmax(0, 1fr); }
  .rc-split-3 > :nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .rc-split-3 { grid-template-columns: minmax(0, 1fr); }
  .rc-split-3 > * { grid-column: 1 / -1; }
}

/* Two-column with fixed left. Stacks below 1100px. */
.rc-split-2-l {
  display: grid;
  grid-template-columns: minmax(0, var(--rc-l, 320px)) minmax(0, 1fr);
  gap: 14px;
}
.rc-split-2-l > * { min-width: 0; }
@media (max-width: 1100px) {
  .rc-split-2-l { grid-template-columns: minmax(0, 1fr); }
}

/* Two-column with fixed right. Stacks below 1100px. */
.rc-split-2-r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--rc-r, 340px));
  gap: 14px;
}
.rc-split-2-r > * { min-width: 0; }
@media (max-width: 1100px) {
  .rc-split-2-r { grid-template-columns: minmax(0, 1fr); }
}

/* Stat grids: auto-fit at narrower desktop widths so labels don't crush. */
@media (max-width: 1340px) {
  .rc-g-5 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 1180px) {
  .rc-g-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .rc-g-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* Slightly tighter content padding on smaller desktops for breathing room. */
@media (max-width: 1280px) {
  .rc-content { padding: 22px 24px 60px; }
}
@media (max-width: 1100px) {
  .rc-content { padding: 18px 18px 60px; }
}

/* ==========================================================================
   PM (Project Management replacement) — Phase 1 mockup styles.
   All `data-dashboard-page` values starting with `pm` use these. Scoped via
   class names prefixed `.rc-` and only added by /dashboard/pm/* pages.
   Safe to extract into a separate stylesheet later — purely additive.
   ========================================================================== */

/* Card grid + definition list */
.rc-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.rc-card-grid .rc-card { margin: 0; }

.rc-deflist { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; padding: 4px 0; }
.rc-deflist-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rc-deflist-row:last-child { border-bottom: 0; }
.rc-deflist-row dt { color: var(--fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin: 0; padding-top: 2px; }
.rc-deflist-row dd { margin: 0; color: var(--fg-1); font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Tag rows used in template cards */
.rc-tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rc-tag { display: inline-flex; align-items: center; padding: 3px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }

/* Touch tap-target floor (WCAG 2.5.8, #1687). On coarse pointers, button-like
   pill/chip/back controls that sit at ~22px must present a >=24x24 hit area.
   Scoped to pointer:coarse so desktop layout is untouched; min-* clamps over the
   base size without a jump. Inline text links (.mail, dense-table anchors) are
   intentionally NOT enlarged here — spacing, not size, is the safer AA path for
   those and doing it blindly shifts table rows (tracked separately). */
@media (pointer: coarse) {
  .pb-filter-pill,
  button.rc-chip,
  .rc-chip-remove,
  .rc-skin-brand-bar-back {
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }
}

/* Collapsible (phase + task expand/collapse) */
.rc-collapsible { border: 1px solid var(--border); border-radius: 10px; background: var(--card-2); margin-bottom: 10px; overflow: hidden; transition: border-color .15s, background .15s; }
.rc-collapsible:hover { border-color: var(--border-strong); }
.rc-collapsible-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: transparent; border: 0; cursor: pointer; color: var(--fg-1); font: inherit; text-align: left; }
.rc-collapsible-head:hover { background: var(--surface-2); }
.rc-collapsible-head:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.rc-collapsible-head strong { flex: 1; font-family: var(--font-heading); font-weight: 700; font-size: 13px; }
.rc-collapsible-chev { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; color: var(--fg-3); font-size: 12px; transition: transform .15s ease; }
.rc-collapsible[data-collapsed="true"] .rc-collapsible-chev { transform: rotate(0deg); }
.rc-collapsible[data-collapsed="false"] .rc-collapsible-chev { transform: rotate(90deg); }
.rc-collapsible-body { padding: 4px 14px 14px; border-top: 1px solid var(--border); background: var(--card-3); }
.rc-collapsible[data-collapsed="true"] .rc-collapsible-body { display: none; }

/* Task rows (in plan tree + detail page) */
.rc-task-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; transition: background .12s; }
.rc-task-row:hover { background: var(--surface-2); }
.rc-task-row + .rc-task-row { margin-top: 2px; }
.rc-task-title { color: var(--fg-1); font-weight: 600; font-size: 13px; }
.rc-task-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-3); }
.rc-task-owner::before { content: attr(data-initials); display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-subtle); color: var(--teal); align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border: 1px solid var(--teal-soft); }
.rc-task-due { font-size: 11px; color: var(--fg-dim); white-space: nowrap; }
.rc-task-due.overdue { color: var(--danger); font-weight: 600; }
.rc-task-due.due-today { color: var(--orange); font-weight: 600; }
.rc-task-due.due-soon { color: var(--warning); }

/* Interactive status badge — visually distinct from read-only badges so
   the user understands the click affordance. */
.rc-badge.interactive {
  cursor: pointer;
  transition: filter 120ms, transform 120ms;
}
.rc-badge.interactive:hover { filter: brightness(1.18); }
.rc-badge.interactive:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.rc-badge.interactive::after {
  content: '▾';
  margin-left: 4px;
  opacity: 0.55;
  font-size: 9px;
}

/* Status-change popover */
.pm-status-pop {
  position: absolute; z-index: 9999;
  background: var(--bg-2, #131923);
  border: 1px solid var(--border-strong, #3a4a5e);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
  padding: 4px;
  min-width: 140px;
}
.pm-status-pop ul { list-style: none; margin: 0; padding: 0; }
.pm-status-pop li + li { margin-top: 1px; }
.pm-status-pop-opt {
  width: 100%; text-align: left;
  background: transparent; border: 0; padding: 6px 8px;
  cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; gap: 8px;
}
.pm-status-pop-opt:hover { background: var(--bg-3, #1c2530); }
.pm-status-pop-opt.active { background: var(--teal-subtle); }
.pm-status-pop-opt.active::after { content: '✓'; margin-left: auto; color: var(--teal); font-weight: 700; }

/* Keyboard-focused task row — driven by J/K navigation on the Plan page.
   Distinct from :focus-visible so the indicator stays put when the user is
   typing in another input. */
.rc-task-card.rc-task-focused {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  background: var(--teal-subtle, rgba(0, 200, 200, 0.06));
}

/* Drag-between-phases affordances. Phase moves use HTML5 DnD; sub-tasks
   are not draggable (they ride with their parent). */
.rc-task-card[draggable="true"] { cursor: grab; }
.rc-task-card[draggable="true"]:active { cursor: grabbing; }
.rc-task-card.rc-pm-dragging { opacity: 0.45; }
.rc-collapsible.rc-pm-phase-drop {
  outline: 2px dashed var(--teal);
  outline-offset: -1px;
  background: var(--teal-subtle, rgba(0, 200, 200, 0.05));
  transition: background 80ms;
}

/* Inline pills on each task row — comment / attachment / time-logged
   counts. Empty hosts collapse silently (no count -> no pill). */
.rc-pm-pills {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
}
.rc-pm-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-3, #1c2530);
  border: 1px solid var(--border-strong, #3a4a5e);
  color: var(--fg-3);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 99px;
  cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms;
  font-family: var(--font-mono);
  line-height: 1.4;
}
.rc-pm-pill:hover {
  background: var(--teal-subtle);
  color: var(--teal);
  border-color: var(--teal);
}

/* Quick-add: live token preview that appears once a known token
   (@owner / due-date) is detected in the input. */
.rc-pm-newtask-hint {
  font-size: 11px;
  color: var(--teal);
  font-family: var(--font-mono);
  padding-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}
.rc-pm-newtask-hint[hidden] { display: none; }

/* Plan-page filter bar — sits between the tab strip and the tree card.
   Search + status chips + due-window chips + saved-views picker.
   v1 omits owner avatars; controllers/plan.js applies filters client-side. */
.rc-pm-filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 16px;
}
.rc-pm-filter-bar[hidden] { display: none; }
.rc-pm-filter-search {
  flex: 0 1 280px; min-width: 180px;
}
.rc-pm-filter-group { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rc-pm-filter-spacer { flex: 1 1 auto; min-width: 8px; }
.rc-pm-chip {
  background: transparent;
  border: 1px solid var(--border-strong, #3a4a5e);
  color: var(--fg-3);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.rc-pm-chip:hover { color: var(--fg-1); border-color: var(--fg-4); }
.rc-pm-chip[aria-pressed="true"] {
  background: var(--teal-subtle);
  color: var(--teal);
  border-color: var(--teal);
}
.rc-pm-saved-views { display: inline-flex; align-items: center; gap: 6px; }
.rc-pm-saved-views select { min-width: 140px; }
.rc-pm-filter-summary {
  font-size: 12px;
  color: var(--fg-4);
  margin: -8px 0 14px;
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}
.rc-pm-filter-summary[hidden] { display: none; }
.rc-pm-empty-hint {
  padding: 28px 16px;
  text-align: center;
  color: var(--fg-4);
  font-style: italic;
  font-size: 12px;
}
@media (max-width: 760px) {
  .rc-pm-filter-bar { gap: 8px; }
  .rc-pm-filter-search { flex: 1 1 100%; min-width: 0; }
  .rc-pm-saved-views { flex: 1 1 100%; justify-content: flex-end; }
  /* Bigger hit areas on touch: chips become ~36px tall so tapping is reliable
     without ballooning the bar. Width and font scale together. */
  .rc-pm-chip { padding: 8px 14px; font-size: 12px; }
}

/* Task card hover gets a subtle elevation so the row reads as
   interactive without a heavy outline. */
.rc-task-card { transition: background 120ms, transform 120ms; }
.rc-task-card:hover {
  background: var(--bg-2, #131923);
}
.rc-task-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.rc-task-meta { font-size: 11px; color: var(--fg-dim); display: inline-flex; gap: 6px; }

/* Task cards on the Plan view */
.rc-task-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; margin: 6px 0; transition: border-color .15s; }
.rc-task-card:hover { border-color: var(--border-strong); }
.rc-task-card-head { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; }
.rc-task-card-head button.rc-collapsible-chev { background: transparent; border: 0; cursor: pointer; }
.rc-task-card[data-collapsed="false"] .rc-task-card-head .rc-collapsible-chev { transform: rotate(90deg); }
.rc-task-card-sub { padding: 0 12px 12px 36px; display: grid; gap: 4px; border-top: 1px solid var(--border); padding-top: 8px; }
.rc-subtask-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; font-size: 12px; color: var(--fg-2); border-radius: 6px; cursor: pointer; }
.rc-subtask-row:hover { background: var(--surface-2); }
.rc-subtask-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

/* Timeline (activity log) */
.rc-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.rc-timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.rc-timeline-item { position: relative; padding: 6px 0 14px 28px; }
.rc-timeline-dot { position: absolute; left: 3px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); border: 2px solid var(--bg); box-shadow: var(--shadow-accent-soft); }
.rc-timeline-dot.ai { background: var(--violet); box-shadow: 0 0 0 1px var(--violet-soft); }
.rc-timeline-dot.comms { background: var(--orange); box-shadow: 0 0 0 1px var(--orange-glow); }
.rc-timeline-dot.status { background: var(--success); box-shadow: 0 0 0 1px var(--success-soft); }
.rc-timeline-title { font-size: 13px; color: var(--fg-1); font-weight: 600; line-height: 1.4; }
.rc-timeline-meta { margin-top: 4px; font-size: 11px; color: var(--fg-dim); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rc-timeline-meta a { color: var(--teal); text-decoration: none; }
.rc-timeline-meta a:hover { color: var(--teal-secondary); text-decoration: underline; }
/* Note-backed activity rows open the full note in a modal (pm/activity.js). */
.rc-activity-note-open { cursor: pointer; }
.rc-activity-note-open:hover .rc-timeline-title { color: var(--teal); }
.rc-activity-note-text { white-space: pre-wrap; font-size: 13px; color: var(--fg-1); line-height: 1.55; }

/* Wizard */
.rc-wizard-steps { list-style: none; counter-reset: step; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rc-wizard-steps li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--card-2); border: 1px solid var(--border); border-radius: 8px; color: var(--fg-3); font-size: 12px; font-weight: 600; }
.rc-wizard-steps li.active { background: var(--teal-subtle); border-color: var(--teal-soft); color: var(--fg-1); }
.rc-wizard-steps li.complete { background: var(--success-soft); border-color: var(--success-strong); color: var(--fg-1); }
.rc-wizard-num { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-3); align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.rc-wizard-steps li.active .rc-wizard-num { background: var(--teal); border-color: var(--teal); color: #fff; }
.rc-wizard-steps li.complete .rc-wizard-num { background: var(--success); border-color: var(--success); color: #fff; }
.rc-wizard-foot { display: flex; justify-content: space-between; margin-top: 18px; gap: 12px; }
.rc-wizard-add-row { margin-top: 12px; }

.rc-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 36px; border: 2px dashed var(--border-strong); border-radius: 12px; background: var(--surface-1); color: var(--fg-3); cursor: pointer; transition: border-color .15s, background .15s; }
.rc-dropzone:hover { border-color: var(--teal); background: var(--teal-subtle); color: var(--fg-1); }
.rc-dropzone strong { font-size: 14px; color: var(--fg-1); }
.rc-dropzone span { font-size: 12px; }

.rc-option-list { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rc-option-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: 11px; color: var(--fg-2); }
.rc-option-chip button { background: transparent; border: 0; color: var(--fg-dim); cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; }
.rc-option-chip button:hover { color: var(--danger); }

.rc-commit-options { display: grid; gap: 8px; padding: 14px 0; }
.rc-commit-options label { display: flex; gap: 10px; align-items: center; color: var(--fg-2); font-size: 13px; cursor: pointer; }

/* Task groups (My Tasks) */
.rc-task-group { background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; }
.rc-task-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--fg-1); font-weight: 700; font-size: 13px; }
.rc-task-group-body { padding: 6px 8px; }

/* Gantt */
.rc-gantt-scroll { overflow-x: auto; padding: 8px 0; }
.rc-gantt-svg { display: block; min-width: 720px; width: 100%; height: auto; }

/* Gantt redesign (Tier 3 follow-up) ─────────────────────────────────── */
/* ── Schedule switcher tabs (migration 200, Phase A) ──
   Sits above .pm-gantt-toolbar inside the Gantt rc-card-body. Hidden via
   [hidden] until gantt.js populates ≥1 schedule, then revealed. */
.pm-schedule-tabs {
  display: flex; align-items: center; gap: 6px;
  padding: 4px; margin: 0 0 10px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  flex-wrap: wrap;
}
.pm-schedule-tabs[hidden] { display: none; }
.pm-schedule-tabs-list { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pm-schedule-tab {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-3);
  background: transparent; border: 0; border-radius: 7px;
  padding: 6px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.pm-schedule-tab:hover { color: var(--fg-1); background: rgba(255,255,255,.03); }
.pm-schedule-tab[aria-pressed="true"] {
  background: var(--card, #1a2332); color: var(--fg-1);
  box-shadow: 0 1px 0 var(--teal) inset, 0 2px 6px rgba(0,0,0,.3);
}
/* Drag-reorder visuals — the dragged tab dims to ~40%, and the drop
   target gains a teal vertical bar on the side the cursor is closest to. */
.pm-schedule-tab[draggable="true"] { cursor: grab; }
.pm-schedule-tab[draggable="true"]:active { cursor: grabbing; }
.pm-schedule-tab.dragging { opacity: .4; }
.pm-schedule-tab.drop-before { box-shadow: -3px 0 0 0 var(--teal) inset, 0 1px 0 var(--teal) inset; }
.pm-schedule-tab.drop-after  { box-shadow:  3px 0 0 0 var(--teal) inset, 0 1px 0 var(--teal) inset; }
.pm-schedule-tab .pm-sched-swatch {
  width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0;
  background: var(--teal);
}
.pm-schedule-tab .pm-sched-pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(10,191,188,.12); color: var(--teal);
  border: 1px solid rgba(10,191,188,.3);
}
.pm-schedule-tabs-add {
  font: inherit; font-size: 12px; font-weight: 700; color: var(--fg-dim, #5a7a9a);
  background: transparent; border: 1.5px dashed var(--border);
  border-radius: 7px; padding: 6px 12px; cursor: pointer;
  margin-left: auto;
}
.pm-schedule-tabs-add:hover {
  color: var(--teal); border-color: var(--teal);
  background: rgba(10,191,188,.05);
}
.pm-schedule-tabs-manage {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--fg-3);
  background: transparent; border: 1px solid var(--border);
  border-radius: 7px; padding: 6px 12px; cursor: pointer;
}
.pm-schedule-tabs-manage:hover {
  color: var(--teal); border-color: var(--teal);
}
.pm-schedule-tabs-sandbox {
  font: inherit; font-size: 12px; font-weight: 700; color: var(--violet, #a78bfa);
  background: rgba(168,139,250,.08); border: 1px solid rgba(168,139,250,.3);
  border-radius: 7px; padding: 6px 12px; cursor: pointer;
}
.pm-schedule-tabs-sandbox:hover { background: rgba(168,139,250,.16); }

.pm-schedule-tabs-overlay {
  font: inherit; font-size: 12px; font-weight: 700; color: var(--fg-3);
  background: transparent; border: 1px solid var(--border);
  border-radius: 7px; padding: 6px 12px; cursor: pointer;
}
.pm-schedule-tabs-overlay:hover { color: var(--fg-1); border-color: var(--border-strong); }
.pm-schedule-tabs-overlay[aria-pressed="true"] {
  color: var(--bg, #0a0f16); background: var(--violet, #a78bfa); border-color: transparent;
}

/* Sandbox-overlay row treatment (Phase C1.1) — applied to BOTH the rail row
   and the bar when overlay mode is on and the row's scheduleId matches the
   active sandbox. Parent rows look normal; sandbox rows are dashed-violet. */
.pm-gantt-rail-row.is-sandbox-row {
  background: linear-gradient(90deg, rgba(168,139,250,.06), transparent 60%);
  border-left: 2px dashed var(--violet, #a78bfa);
}
.pm-gantt-rail-row.is-sandbox-row::after {
  content: "DRAFT";
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 8.5px; font-weight: 800; letter-spacing: .08em;
  color: var(--violet, #a78bfa); opacity: .65;
  pointer-events: none;
}
/* The SVG bar — we add the class via the bar-rendering code path. CSS uses
   stroke-dasharray to give the "draft" feel without touching the fill color
   (which is still the schedule's color_hex). */
.pm-gantt-bar.is-sandbox-bar {
  stroke: var(--violet, #a78bfa);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

/* CPM conflict (Phase C1.2). Overrides the sandbox-row treatment when a
   sandbox task's start violates a parent predecessor's finish. The DRAFT
   badge is replaced with "⚠ CONFLICT" via the override below. */
.pm-gantt-rail-row.is-sandbox-row.is-conflict {
  background: linear-gradient(90deg, rgba(245,158,11,.14), transparent 60%);
  border-left-color: var(--warning, #f59e0b);
}
.pm-gantt-rail-row.is-sandbox-row.is-conflict::after {
  content: "⚠ CONFLICT";
  color: var(--warning, #f59e0b);
  opacity: .95;
}

/* Sandbox tab visual treatment (Phase C1) — dashed border + violet pill */
.pm-schedule-tab.sandbox {
  background: rgba(168,139,250,.06);
  border: 1.5px dashed rgba(168,139,250,.4);
  border-radius: 7px;
}
.pm-schedule-tab.sandbox[aria-pressed="true"] {
  background: rgba(168,139,250,.14);
  border-color: var(--violet, #a78bfa);
  box-shadow: 0 1px 0 var(--violet, #a78bfa) inset, 0 2px 6px rgba(0,0,0,.3);
}
.pm-schedule-tab .pm-sandbox-pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(168,139,250,.18); color: var(--violet, #a78bfa);
  border: 1px solid rgba(168,139,250,.4);
}

/* Sandbox commit action on the drawer card */
.pm-sd-commit-sandbox {
  margin: 6px 13px 11px;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--bg, #0a0f16);
  background: var(--success, #22c55e); border: 1px solid transparent;
  border-radius: 7px; padding: 7px 10px; cursor: pointer; width: calc(100% - 26px);
}
.pm-sd-commit-sandbox:hover { filter: brightness(1.08); }

/* ── Phase A2: Add Schedule modal ─────────────────────────────────── */
.pm-add-sched-modal, .pm-restore-modal {
  border: 0; padding: 0; background: transparent;
  max-width: 520px; width: 100%;
}
.pm-add-sched-modal::backdrop, .pm-restore-modal::backdrop {
  background: rgba(8,12,20,.7); backdrop-filter: blur(4px);
}
.pm-add-sched-inner, .pm-restore-inner {
  background: linear-gradient(180deg, var(--card, #1a2332), var(--bg-2, #121b27));
  border: 1px solid var(--border-strong, #3a4a5e);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.35);
  color: var(--fg-2);
  display: flex; flex-direction: column; gap: 0;
}
.pm-add-sched-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.pm-add-sched-title {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--fg-1); flex: 1;
}
.pm-add-sched-x {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-2);
  color: var(--fg-3); font-size: 14px; cursor: pointer;
}
.pm-add-sched-x:hover { color: var(--fg-1); border-color: var(--border-strong); }
.pm-add-sched-body {
  padding: 18px 22px; display: flex; flex-direction: column; gap: 8px;
}
.pm-add-sched-label {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  color: var(--fg-dim); margin-top: 8px;
}
.pm-add-sched-label:first-child { margin-top: 0; }
.pm-add-sched-input {
  font: inherit; font-size: 14px; color: var(--fg-1);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px;
}
.pm-add-sched-input:focus { outline: none; border-color: var(--teal); }
.pm-add-sched-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-sd-color {
  width: 28px; height: 28px; border-radius: 8px;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  transition: transform .12s;
}
.pm-sd-color[aria-pressed="true"] {
  border-color: var(--fg-1); transform: scale(1.1);
}
.pm-add-sched-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-sd-tpl {
  font: inherit; text-align: left;
  background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 12px 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--fg-2);
}
.pm-sd-tpl[aria-pressed="true"] {
  border-color: var(--teal); background: rgba(10,191,188,.06);
}
.pm-sd-tpl-name { font-size: 13px; font-weight: 700; color: var(--fg-1); }
.pm-sd-tpl-desc { font-size: 11.5px; color: var(--fg-3); line-height: 1.4; }
.pm-sd-tpl-wide { grid-column: span 2; }

/* Bulk-paste builder (Phase B4) */
.pm-add-sched-bulk { display: flex; flex-direction: column; gap: 8px; }
.pm-add-sched-bulk-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 580px) {
  .pm-add-sched-bulk-grid { grid-template-columns: 1fr; }
}
.pm-add-sched-bulk-input {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px; color: var(--fg-1); line-height: 1.5;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 9px 11px; min-height: 200px;
  resize: vertical; width: 100%;
}
.pm-add-sched-bulk-input:focus { outline: none; border-color: var(--teal); }
.pm-add-sched-bulk-preview {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 9px 11px; min-height: 200px;
  font-size: 11.5px; line-height: 1.55; overflow: auto;
}
.pm-add-sched-bulk-empty { color: var(--fg-dim); font-style: italic; font-size: 11.5px; }
.pm-add-sched-bulk-row {
  display: grid; grid-template-columns: 22px 1fr;
  align-items: center; padding: 3px 0;
  border-bottom: 1px dotted rgba(47,60,78,.4);
}
.pm-add-sched-bulk-row:last-child { border-bottom: 0; }
.pm-add-sched-bulk-row.phase {
  color: var(--fg-1); font-weight: 700;
}
.pm-add-sched-bulk-row.task { color: var(--fg-2); padding-left: 6px; }
.pm-add-sched-bulk-row .b-idx {
  color: var(--fg-dim); font-size: 10.5px; font-weight: 600;
  text-align: right; padding-right: 4px;
}
.pm-add-sched-bulk-row .b-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); margin-right: 6px; vertical-align: middle;
}
.pm-add-sched-bulk-tip {
  font-size: 11px; color: var(--fg-dim); line-height: 1.5;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 10px;
}
.pm-add-sched-bulk-tip b { color: var(--fg-2); }
.pm-add-sched-note, .pm-restore-note {
  font-size: 11.5px; color: var(--fg-3); line-height: 1.5;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 9px 11px;
}
.pm-add-sched-error {
  font-size: 12px; color: var(--danger, #f43f5e);
  padding: 8px 10px;
  background: rgba(244,63,94,.08); border: 1px solid rgba(244,63,94,.3);
  border-radius: 6px;
}
.pm-add-sched-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 22px 18px; border-top: 1px solid var(--border);
}
.pm-add-sched-btn-cancel {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--fg-3);
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 18px; cursor: pointer;
}
.pm-add-sched-btn-cancel:hover { color: var(--fg-1); border-color: var(--border-strong); }
.pm-add-sched-btn-go {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--bg, #0a0f16);
  background: var(--teal); border: 1px solid transparent;
  border-radius: 999px; padding: 8px 20px; cursor: pointer;
}
.pm-add-sched-btn-go:disabled { opacity: .4; cursor: not-allowed; }
.pm-add-sched-btn-go:not(:disabled):hover { filter: brightness(1.08); }

.pm-restore-summary {
  margin: 0 0 4px; font-size: 13px; color: var(--fg-1); line-height: 1.5;
}

/* ── Phase A2: Side drawer ─────────────────────────────────────────── */
.pm-sched-drawer-backdrop {
  position: fixed; inset: 0; z-index: 1099;
  background: rgba(8,12,20,.5);
}
.pm-sched-drawer-backdrop[hidden] { display: none; }
.pm-sched-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 460px; max-width: 92vw;
  background: var(--card, #1a2332);
  border-left: 1px solid var(--border-strong);
  box-shadow: -10px 0 40px rgba(0,0,0,.45);
  z-index: 1100;
  display: flex; flex-direction: column;
}
.pm-sched-drawer[hidden] { display: none; }
.pm-sched-drawer-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--card), var(--bg-2));
}
.pm-sched-drawer-title { flex: 1; min-width: 0; }
.pm-sched-drawer-t { font-size: 14px; font-weight: 700; color: var(--fg-1); }
.pm-sched-drawer-s { font-size: 11px; color: var(--fg-dim); margin-top: 2px; }
.pm-sched-drawer-close {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-2);
  color: var(--fg-3); font-size: 14px; cursor: pointer; flex-shrink: 0;
}
.pm-sched-drawer-close:hover { color: var(--fg-1); border-color: var(--border-strong); }
.pm-sched-drawer-body { flex: 1; overflow: auto; padding: 12px 14px; }
.pm-sched-drawer-foot {
  padding: 12px 16px; border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.pm-sched-drawer-btn-add {
  width: 100%;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--teal);
  background: transparent; border: 1.5px dashed var(--teal);
  border-radius: 8px; padding: 10px; cursor: pointer;
}
.pm-sched-drawer-btn-add:hover { background: rgba(10,191,188,.06); }

/* Each schedule card in the drawer */
.pm-sd-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 12px; margin-bottom: 10px; overflow: hidden;
}
.pm-sd-card.active {
  border-color: rgba(10,191,188,.4);
  background: linear-gradient(180deg, rgba(10,191,188,.05), var(--bg-2));
}
.pm-sd-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; cursor: pointer;
}
.pm-sd-card.expanded .pm-sd-card-head { border-bottom: 1px solid var(--border); }
.pm-sd-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; background: var(--teal); }
.pm-sd-name {
  flex: 1; font-size: 13px; font-weight: 700; color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-sd-pill {
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  background: var(--teal); color: var(--bg);
}
.pm-sd-meta { font-size: 10.5px; color: var(--fg-dim); }
.pm-sd-chev { color: var(--fg-dim); font-size: 11px; transition: transform .12s; }
.pm-sd-card.expanded .pm-sd-chev { transform: rotate(90deg); color: var(--teal); }

/* Card actions row (rename / color / delete) */
.pm-sd-card-actions {
  display: flex; gap: 6px; padding: 0 13px 10px;
}
.pm-sd-mini-btn {
  font: inherit; font-size: 11px; font-weight: 600; color: var(--fg-3);
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 9px; cursor: pointer;
}
.pm-sd-mini-btn:hover { color: var(--fg-1); border-color: var(--border-strong); }
.pm-sd-mini-btn.danger { color: var(--danger, #f43f5e); border-color: rgba(244,63,94,.3); }
.pm-sd-mini-btn.danger:hover { background: rgba(244,63,94,.08); }
.pm-sd-mini-btn.primary {
  color: var(--teal); border-color: rgba(10,191,188,.4); background: rgba(10,191,188,.06);
}

/* Revision list inside an expanded card */
.pm-rev-list { padding: 6px 0 10px; position: relative; }
.pm-rev-list::before {
  content: ""; position: absolute; top: 18px; bottom: 18px;
  left: 27px; width: 1px; background: var(--border);
}
.pm-rev-row {
  display: grid; grid-template-columns: 26px 1fr auto;
  gap: 10px; padding: 7px 13px;
  align-items: start;
}
.pm-rev-row:hover { background: rgba(255,255,255,.025); }
.pm-rev-dot {
  width: 10px; height: 10px; border-radius: 50%; margin: 5px auto;
  background: var(--fg-dim); border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--border);
}
.pm-rev-row.current .pm-rev-dot {
  background: var(--teal);
  box-shadow: 0 0 0 2px var(--teal), 0 0 0 4px rgba(10,191,188,.2);
}
.pm-rev-row.auto .pm-rev-dot   { background: var(--sky, #0EA5E9); }
.pm-rev-row.event .pm-rev-dot  { background: var(--violet, #a78bfa); }
.pm-rev-body { min-width: 0; }
.pm-rev-name {
  font-size: 12.5px; font-weight: 700; color: var(--fg-1);
  display: flex; align-items: center; gap: 6px;
}
.pm-rev-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--fg-dim);
}
.pm-rev-tag.live { background: var(--teal); color: var(--bg); border-color: transparent; }
.pm-rev-who { font-size: 10.5px; color: var(--fg-dim); margin-top: 2px; }
.pm-rev-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pm-rev-empty {
  font-size: 11.5px; color: var(--fg-dim); font-style: italic;
  padding: 14px 13px; text-align: center;
}
.pm-sd-save-rev {
  margin: 6px 13px 11px;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--violet, #a78bfa);
  background: rgba(168,139,250,.08); border: 1px solid rgba(168,139,250,.3);
  border-radius: 7px; padding: 7px 10px; cursor: pointer; width: calc(100% - 26px);
}
.pm-sd-save-rev:hover { background: rgba(168,139,250,.16); }

/* ── Copy Schedule + Rippler AI modals ──────────────────────────────────
   The Copy + AI modal HTML landed in May without matching CSS, so the
   <dialog> elements rendered as raw browser white boxes. These rules
   bring them up to the same chrome as the pm-add-sched-* family. Many
   inner classes are shared between the two modals (pm-copy-field,
   pm-copy-label, pm-copy-note, pm-copy-btn-cancel) so they're styled
   once. Modal-specific selectors handle headers + primary buttons. */
.pm-copy-modal, .pm-ai-modal {
  border: 0; padding: 0; background: transparent;
  max-width: 560px; width: 100%;
}
.pm-copy-modal::backdrop, .pm-ai-modal::backdrop {
  background: rgba(8,12,20,.7); backdrop-filter: blur(4px);
}
.pm-copy-modal-inner, .pm-ai-modal-inner {
  background: linear-gradient(180deg, var(--card, #1a2332), var(--bg-2, #121b27));
  border: 1px solid var(--border-strong, #3a4a5e);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.35);
  color: var(--fg-2);
  display: flex; flex-direction: column;
}
.pm-copy-modal-head, .pm-ai-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.pm-copy-modal-title, .pm-ai-modal-title {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--fg-1); flex: 1;
  display: flex; align-items: center; gap: 8px;
}
.pm-copy-modal-x, .pm-ai-modal-x {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-2);
  color: var(--fg-3); font-size: 14px; cursor: pointer; line-height: 1;
}
.pm-copy-modal-x:hover, .pm-ai-modal-x:hover {
  color: var(--fg-1); border-color: var(--border-strong);
}
.pm-copy-modal-body, .pm-ai-modal-body {
  padding: 18px 22px; display: flex; flex-direction: column; gap: 14px;
}
.pm-copy-modal-foot, .pm-ai-modal-foot {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  padding: 14px 22px 18px; border-top: 1px solid var(--border);
}

/* Shared inner field components — used in both modals. */
.pm-copy-field { display: flex; flex-direction: column; gap: 6px; }
.pm-copy-field.pm-copy-fieldset {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin: 0;
}
.pm-copy-fieldset > legend {
  padding: 0 6px;
}
.pm-copy-label {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-dim);
}
.pm-copy-select, .pm-ai-textarea {
  font: inherit; font-size: 13.5px; color: var(--fg-1);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px;
}
.pm-copy-select:focus, .pm-ai-textarea:focus {
  outline: none; border-color: var(--teal);
}
.pm-ai-textarea {
  font-family: inherit; line-height: 1.5; resize: vertical; min-height: 96px;
}
.pm-copy-hint {
  font-size: 11.5px; color: var(--fg-3); line-height: 1.45;
}
.pm-copy-radio {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 0; cursor: pointer;
  font-size: 12.5px; color: var(--fg-2); line-height: 1.45;
}
.pm-copy-radio + .pm-copy-radio { border-top: 1px dashed rgba(47,60,78,.4); }
.pm-copy-radio input { margin-top: 3px; accent-color: var(--teal); flex-shrink: 0; }
.pm-copy-radio strong { color: var(--fg-1); font-weight: 700; }
.pm-copy-note {
  font-size: 11.5px; color: var(--fg-3); line-height: 1.5;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 9px 11px;
}
.pm-copy-note strong { color: var(--fg-1); }
.pm-copy-error {
  flex: 1; font-size: 12px; color: var(--danger, #f43f5e);
  padding: 6px 10px;
  background: rgba(244,63,94,.08); border: 1px solid rgba(244,63,94,.3);
  border-radius: 6px;
}
.pm-copy-error[hidden] { display: none; }
.pm-copy-btn-cancel {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--fg-3);
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 18px; cursor: pointer;
}
.pm-copy-btn-cancel:hover { color: var(--fg-1); border-color: var(--border-strong); }
.pm-copy-btn-go, .pm-ai-btn-go {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--bg, #0a0f16);
  background: var(--teal); border: 1px solid transparent;
  border-radius: 999px; padding: 8px 20px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.pm-ai-btn-go {
  background: linear-gradient(135deg, var(--violet, #a78bfa), #7c5cff);
}
.pm-copy-btn-go:disabled, .pm-ai-btn-go:disabled {
  opacity: .4; cursor: not-allowed;
}
.pm-copy-btn-go:not(:disabled):hover, .pm-ai-btn-go:not(:disabled):hover {
  filter: brightness(1.08);
}

/* Compare-revisions diff sections (Mockup 05 #10) */
.pm-cmp-section {
  margin: 8px 0 14px;
}
.pm-cmp-section-hd {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800;
  color: var(--fg-dim); margin-bottom: 5px;
}
.pm-cmp-section-hd .dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.pm-cmp-section.added .pm-cmp-section-hd { color: var(--success, #22c55e); }
.pm-cmp-section.added .pm-cmp-section-hd .dot { background: var(--success, #22c55e); }
.pm-cmp-section.modified .pm-cmp-section-hd { color: var(--warning, #f59e0b); }
.pm-cmp-section.modified .pm-cmp-section-hd .dot { background: var(--warning, #f59e0b); }
.pm-cmp-section.removed .pm-cmp-section-hd { color: var(--danger, #f43f5e); }
.pm-cmp-section.removed .pm-cmp-section-hd .dot { background: var(--danger, #f43f5e); }
.pm-cmp-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 8px;
  padding: 5px 9px; border-radius: 6px;
  font-size: 12px;
  border-left: 3px solid transparent;
  margin-bottom: 3px;
}
.pm-cmp-row.added    { background: rgba(34,197,94,.06);  border-left-color: var(--success, #22c55e); }
.pm-cmp-row.modified { background: rgba(245,158,11,.06); border-left-color: var(--warning, #f59e0b); }
.pm-cmp-row.removed  { background: rgba(244,63,94,.06);  border-left-color: var(--danger,  #f43f5e); text-decoration: line-through; }
.pm-cmp-kind {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px;
  background: var(--card-3, #1f2a3c); color: var(--fg-dim);
}
.pm-cmp-title { color: var(--fg-1); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-cmp-detail { font-size: 11px; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.pm-cmp-empty {
  font-size: 11.5px; color: var(--fg-dim); font-style: italic;
  padding: 14px 8px; text-align: center;
  background: var(--bg-2, #121b27); border: 1px dashed var(--border); border-radius: 8px;
}

/* Inline rename input */
.pm-sd-rename-row {
  display: flex; gap: 6px; padding: 0 13px 10px;
}
.pm-sd-rename-input {
  flex: 1; font: inherit; font-size: 13px; color: var(--fg-1);
  background: var(--card); border: 1px solid var(--teal);
  border-radius: 6px; padding: 5px 9px;
}
.pm-sd-rename-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(10,191,188,.25); }

.pm-gantt-toolbar {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 4px 12px 4px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.pm-gantt-zoom { display: inline-flex; gap: 1px; background: var(--border); border-radius: 6px; overflow: hidden; }
.pm-gantt-zoom-btn {
  padding: 4px 12px; border: 0; background: var(--bg-2);
  color: var(--fg-3); font: inherit; font-size: 12px; cursor: pointer;
}
.pm-gantt-zoom-btn:hover { background: var(--bg-3, #131923); color: var(--fg-2); }
.pm-gantt-zoom-btn[aria-pressed="true"] { background: var(--teal); color: var(--bg-1, #0a0f16); font-weight: 600; }
.pm-gantt-critical { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: 12px; cursor: pointer; }
.pm-gantt-critical input { cursor: pointer; }
.pm-gantt-meta { color: var(--fg-dim); font-size: 11px; margin-left: auto; }

/* ─── Copy Schedule + Rippler AI Schedule Maker buttons ──────────────────
   Inline gradient pills in the right cluster of the gantt toolbar; sit
   cleanly on the same row as the PDF dropzone. */
.pm-gantt-copy-btn,
.pm-gantt-ai-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border: 0; border-radius: 6px;
  font-size: 11px; font-weight: 700;
  color: #f4f7ff; cursor: pointer; white-space: nowrap;
  transition: filter .15s, transform .05s;
}
.pm-gantt-copy-btn:hover,
.pm-gantt-ai-btn:hover    { filter: brightness(1.12); }
.pm-gantt-copy-btn:active,
.pm-gantt-ai-btn:active   { transform: translateY(1px); }
.pm-gantt-copy-btn:disabled,
.pm-gantt-ai-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
/* Copy Schedule = blue gradient. margin-left:auto pushes the right
   cluster [Copy][AI][Drop PDF] to the right edge of the toolbar. */
.pm-gantt-copy-btn {
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
  margin-left: auto;
}
/* Rippler AI Schedule Maker = teal to purple. */
.pm-gantt-ai-btn {
  background: linear-gradient(135deg, #00bfa5 0%, #6f5bff 100%);
  box-shadow: 0 2px 10px rgba(111, 91, 255, 0.35);
}

/* ─── Timeline canvas chunky horizontal scrollbar ───────────────────────
   Easier to grab than the browser default. Appears whenever the zoomed
   SVG is wider than the canvas viewport. */
.pm-gantt-canvas::-webkit-scrollbar { height: 14px; width: 14px; }
.pm-gantt-canvas::-webkit-scrollbar-track {
  background: var(--bg-2); border-top: 1px solid var(--border);
}
.pm-gantt-canvas::-webkit-scrollbar-thumb {
  background: var(--fg-4, #475569); border-radius: 7px;
  border: 3px solid var(--bg-2);
}
.pm-gantt-canvas::-webkit-scrollbar-thumb:hover { background: var(--fg-3, #64748b); }
.pm-gantt-canvas::-webkit-scrollbar-corner { background: var(--bg-2); }

/* ─── Timeline zoom footer ──────────────────────────────────────────────
   MS Project-style continuous zoom (25%-400%) for the bars area. Scales
   only the SVG canvas; the left rail (task names/dates) is untouched. */
.pm-gantt-tl-foot {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 6px 4px 0;
}
.pm-gantt-tl-zoom {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-2);
}
.pm-gantt-tl-zoom-btn {
  width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-3); color: var(--fg-2);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pm-gantt-tl-zoom-btn:hover { background: var(--bg-1); color: var(--fg-1); }
.pm-gantt-tl-zoom-btn:active { transform: translateY(1px); }
.pm-gantt-tl-zoom-range { width: 150px; accent-color: var(--teal); cursor: pointer; }
.pm-gantt-tl-zoom-pct {
  min-width: 42px; text-align: center; font-size: 11px;
  font-variant-numeric: tabular-nums; color: var(--fg-3);
}
.pm-gantt-tl-zoom-fit {
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-3); color: var(--fg-3);
  font: inherit; font-size: 11px; cursor: pointer;
}
.pm-gantt-tl-zoom-fit:hover { background: var(--bg-1); color: var(--fg-1); }

/* ─── Insert toolbar ────────────────────────────────────────────────────── */
.pm-insert-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  background: var(--bg-2, #1e293b); border-bottom: 1px solid var(--border);
}
.pm-insert-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg-dim); margin-right: 4px;
}
.pm-insert-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--bg-3, #0f172a);
  color: var(--fg-2); font-size: 12px; cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  white-space: nowrap;
}
.pm-insert-btn:hover { background: var(--bg-3); border-color: var(--teal); color: var(--fg-1); }
.pm-insert-btn:active { transform: translateY(1px); }
.pm-insert-btn[data-pm-insert="task"] svg { color: #10b981; }
.pm-insert-btn[data-pm-insert="blank"] svg { color: var(--fg-dim); }
.pm-insert-btn[data-pm-insert="summary"] svg { color: #f59e0b; }
.pm-insert-btn[data-pm-insert="milestone"] svg { color: #38bdf8; }

.pm-gantt-shell {
  display: grid; grid-template-columns: 640px 1fr;
  height: calc(100vh - 320px); min-height: 420px;
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  background: var(--bg-1, #0a0f16);
}
.pm-gantt-rail {
  border-right: 1px solid var(--border); overflow: hidden;
  display: flex; flex-direction: column;
}
.pm-gantt-rail-head {
  display: grid; grid-template-columns: 28px 1fr 48px 62px 62px 100px 84px; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-dim);
}
.pm-gantt-rail-body { overflow-y: auto; overflow-x: hidden; flex: 1; }
.pm-gantt-rail-row {
  display: grid; grid-template-columns: 28px 1fr 48px 62px 62px 100px 84px; gap: 6px;
  padding: 0 12px; border-bottom: 1px solid var(--border);
  align-items: center; font-size: 12px; color: var(--fg-2); position: relative;
  height: 36px;     /* matches ROW_H in gantt.js */
  cursor: pointer;
}
.pm-gantt-rail-row:hover { background: var(--bg-2); }
.pm-gantt-rail-row.is-selected { background: rgba(20,184,166,0.1); outline: 1px solid rgba(20,184,166,0.3); outline-offset: -1px; }
.pm-gantt-rail-row.is-phase { font-weight: 700; color: var(--fg-1); background: var(--bg-2); cursor: default; }
.pm-gantt-phase-name { border-radius: 3px; padding: 1px 3px; margin-left: -3px; }
.pm-gantt-phase-name:hover { background: rgba(255,255,255,0.06); }
.pm-gantt-phase-dismiss {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--fg-dim); font-size: 14px; line-height: 1; padding: 0 4px; margin-left: 4px;
}
.pm-gantt-rail-row.is-phase:hover .pm-gantt-phase-dismiss { display: inline; }
.pm-gantt-phase-dismiss:hover { color: #ef4444; }
.pm-gantt-rail-row.is-subtask .col-title { padding-left: 18px; color: var(--fg-3); font-size: 11.5px; }
.pm-gantt-rail-row.is-subtask { height: 28px; }
.pm-gantt-rail-row .col-title {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.pm-gantt-rail-row .pm-gantt-chev {
  display: inline-block; width: 14px; text-align: center;
  background: none; border: 0; color: var(--fg-dim); cursor: pointer;
  padding: 0; font-size: 12px;
}
.pm-gantt-rail-row .pm-gantt-chev[hidden] { visibility: hidden; }
.pm-gantt-rail-row .col-owner { display: flex; align-items: center; gap: 4px; }
.pm-gantt-rail-row .col-days { color: var(--fg-3); font-variant-numeric: tabular-nums; text-align: right; }
.pm-gantt-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); color: var(--bg-1, #0a0f16);
  font-weight: 700; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}

.pm-gantt-canvas {
  overflow-x: auto; overflow-y: auto;
  position: relative; background: var(--bg-1, #0a0f16);
}
.pm-gantt-svg { display: block; }

/* Bar states. The base fill is set inline (status tone resolved at render). */
.pm-gantt-bar { cursor: pointer; transition: opacity 120ms; }
.pm-gantt-bar:hover { opacity: 1 !important; filter: brightness(1.12); }
.pm-gantt-bar.synthetic { stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55; }
.pm-gantt-bar.rollup { fill: none; stroke: var(--fg-4); stroke-width: 1.5; opacity: 0.7; }
.pm-gantt-bar.critical { stroke: var(--orange); stroke-width: 2; opacity: 1 !important; }
.pm-gantt-bar.dim { opacity: 0.18; }
.pm-gantt-arrow { transition: stroke-width 120ms; }
.pm-gantt-arrow.critical { stroke: var(--orange) !important; stroke-width: 2; }
.pm-gantt-arrow.dim { opacity: 0.15; }
.pm-gantt-arrow.highlighted { stroke-width: 2; opacity: 1; }
/* Dependency buffer / lag visualization. Distinct from solid task bars:
   dashed stroke + a faint warning-tone fill so the eye reads "this isn't
   work, this is a planned hold." */
.pm-gantt-buffer {
  fill: rgba(245, 158, 11, 0.18);
  stroke: var(--warning);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.85;
}
.pm-gantt-buffer.lead {
  fill: rgba(10, 191, 188, 0.18);
  stroke: var(--teal);
  stroke-dasharray: 2 4;
}
.pm-gantt-today-line { stroke: var(--orange); stroke-width: 2; }
.pm-gantt-today-pill {
  fill: var(--orange); opacity: 0.92;
}
.pm-gantt-today-pill-text { fill: var(--bg-1, #0a0f16); font-weight: 700; font-size: 10px; }
.pm-gantt-weekend { fill: rgba(148, 163, 184, 0.06); }
.pm-gantt-axis-year {
  fill: var(--text-primary, var(--palette-ink, #18293B));
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
}
.pm-gantt-axis-month {
  fill: var(--fg-3); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
}
.pm-gantt-axis-day { fill: var(--fg-dim); font-size: 10px; font-variant-numeric: tabular-nums; }
.pm-gantt-axis-band {
  fill: var(--bg-2); stroke: var(--border); stroke-width: 1;
}
.pm-gantt-axis-sep { stroke: var(--border); stroke-width: 1; opacity: 0.7; }
.pm-gantt-grid { stroke: var(--border); stroke-width: 1; opacity: 0.5; }
.pm-gantt-grid-month { stroke: var(--border-strong); stroke-width: 1; opacity: 0.9; }
.pm-gantt-grid-year { stroke: var(--border-strong); stroke-width: 1.5; opacity: 1; }
.pm-gantt-duration {
  fill: var(--bg-1, #0a0f16); font-weight: 700; font-size: 10px;
  pointer-events: none;
}
/* Inline task name printed to the right of each bar. Kept light-grey
   and small so it sits in the background — the bar itself is still the
   primary read. Dimmed further when critical-path filter is on. */
.pm-gantt-row-label {
  fill: var(--fg-4, #7a8694);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0.78;
}
.pm-gantt-row-label.dim { opacity: 0.32; }

/* Floating hover popover */
.pm-gantt-popover {
  position: fixed; pointer-events: none; z-index: 9999;
  background: var(--bg-2); color: var(--fg-2);
  border: 1px solid var(--border-strong); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 10px 12px; font-size: 12px; line-height: 1.45;
  max-width: 320px;
}
.pm-gantt-popover h5 { margin: 0 0 4px 0; font-size: 13px; color: var(--fg-1); }
.pm-gantt-popover dl { margin: 4px 0 0 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 10px; row-gap: 2px; }
.pm-gantt-popover dt { color: var(--fg-dim); font-weight: 500; }
.pm-gantt-popover dd { margin: 0; color: var(--fg-2); }
.pm-gantt-popover .pm-gantt-popover-deps { margin-top: 6px; }
.pm-gantt-popover .pm-gantt-popover-deps-label { color: var(--fg-dim); font-size: 11px; }
.pm-gantt-popover ul { margin: 2px 0 0 0; padding-left: 16px; }

/* Empty state inside the canvas */
.pm-gantt-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 240px; padding: 24px;
  color: var(--fg-dim); font-size: 13px; text-align: center;
}

/* Mobile: rail collapses to title-only; chart sits below */
@media (max-width: 720px) {
  .pm-gantt-shell { grid-template-columns: 200px 1fr; height: calc(100vh - 380px); }
  .pm-gantt-rail-head, .pm-gantt-rail-row { grid-template-columns: 1fr; }
  .pm-gantt-rail-head .col-id, .pm-gantt-rail-head .col-dur,
  .pm-gantt-rail-head .col-start, .pm-gantt-rail-head .col-finish,
  .pm-gantt-rail-head .col-pred, .pm-gantt-rail-head .col-succ,
  .pm-gantt-rail-row .col-id, .pm-gantt-rail-row .col-dur,
  .pm-gantt-rail-row .col-start, .pm-gantt-rail-row .col-finish,
  .pm-gantt-rail-row .col-pred, .pm-gantt-rail-row .col-succ { display: none; }
  .pm-gantt-popover { left: 8px !important; right: 8px; top: auto !important; bottom: 16px; max-width: none; }
}

/* Gantt: new column styles, print button, milestone diamonds, print layout */
.pm-gantt-rail-head .col-id,
.pm-gantt-rail-head .col-dur,
.pm-gantt-rail-head .col-start,
.pm-gantt-rail-head .col-finish,
.pm-gantt-rail-head .col-pred,
.pm-gantt-rail-head .col-succ { text-align: center; }
.pm-gantt-rail-row .col-id { color: var(--fg-dim); font-variant-numeric: tabular-nums; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.pm-gantt-rail-row .col-dur { color: var(--fg-3); font-variant-numeric: tabular-nums; font-size: 11px; text-align: center; }
.pm-gantt-rail-row .col-start,
.pm-gantt-rail-row .col-finish { color: var(--fg-3); font-variant-numeric: tabular-nums; font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-gantt-rail-row .col-pred,
.pm-gantt-rail-row .col-succ { color: var(--fg-dim); font-variant-numeric: tabular-nums; font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* stretch to full row height so empty cells are still clickable */
  align-self: stretch; display: flex; align-items: center; justify-content: center; }

/* Inline cell editing — click-to-edit cells in the rail */
.pm-gantt-cell-editable { cursor: text; position: relative; }
.pm-gantt-cell-editable:hover { background: rgba(255,255,255,0.04); border-radius: 3px; }
.pm-gantt-inline-input {
  position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box;
  background: var(--bg-3, #1a2233); color: var(--fg-1);
  border: 1px solid var(--teal, #14b8a6); border-radius: 3px;
  font-size: 11px; font-family: inherit; padding: 0 4px;
  outline: none; z-index: 5;
}
.pm-gantt-inline-input:focus { box-shadow: 0 0 0 2px rgba(20,184,166,0.25); }
.pm-gantt-inline-input::placeholder { color: var(--fg-dim); opacity: 0.7; }
/* Flash red on circular dependency rejection */
@keyframes pm-flash-danger {
  0% { background: rgba(239,68,68,0.25); }
  100% { background: transparent; }
}
.pm-gantt-rail-row.flash-danger { animation: pm-flash-danger 600ms ease-out; }
/* Drag-and-drop grip handle */
.pm-gantt-grip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; font-size: 13px; color: var(--fg-dim);
  cursor: grab; opacity: 0; transition: opacity 120ms;
  user-select: none; flex-shrink: 0; line-height: 1;
}
.pm-gantt-rail-row:hover .pm-gantt-grip { opacity: 1; }
/* Drop zone indicator line */
.pm-gantt-drop-indicator {
  height: 2px; background: #38bdf8; border-radius: 1px;
  margin: 0 12px; pointer-events: none;
}

/* Delete button — shown on row hover */
.pm-gantt-row-del {
  display: none; align-items: center; justify-content: center;
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 4px;
  border: none; background: transparent; color: var(--fg-dim);
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
  z-index: 4;
}
.pm-gantt-rail-row:hover .pm-gantt-row-del { display: flex; }
.pm-gantt-row-del:hover { background: rgba(239,68,68,0.18); color: #ef4444; }
.pm-gantt-print-btn {
  padding: 4px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-2); color: var(--fg-3); font: inherit; font-size: 12px; cursor: pointer;
}
.pm-gantt-print-btn:hover { background: var(--bg-3, #131923); color: var(--fg-2); }
.pm-gantt-milestone { cursor: pointer; transition: opacity 120ms; }
.pm-gantt-milestone:hover { opacity: 1 !important; filter: brightness(1.12); }
.pm-gantt-milestone.critical { stroke: var(--orange); stroke-width: 2; opacity: 1 !important; }
.pm-gantt-milestone.dim { opacity: 0.18; }
@media print {
  .pm-gantt-toolbar, .rc-page-head-r, .rc-tabs-u, .pm-gantt-tl-foot { display: none !important; }
  .pm-gantt-shell { height: auto !important; display: block; }
  .pm-gantt-rail, .pm-gantt-rail-body { max-height: none; overflow: visible; }
  .pm-gantt-canvas { overflow: visible; max-height: none; }
  .pm-gantt-popover { display: none !important; }
}

/* ─── PDF Export Modal ───────────────────────────────────────────────────── */
dialog.pm-print-modal {
  width: 520px; max-width: calc(100vw - 32px);
  padding: 0; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-2, #1a1f2e); color: var(--fg-1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.32); overflow: hidden;
}
dialog.pm-print-modal::backdrop { background: rgba(0,0,0,0.4); }
.pm-print-modal-inner { display: flex; flex-direction: column; }
.pm-print-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px; border-bottom: 1px solid rgba(128,128,128,0.15);
}
.pm-print-modal-title { margin: 0; font-size: 14px; font-weight: 600; }
.pm-print-modal-x {
  background: none; border: none; cursor: pointer; font-size: 16px;
  color: var(--fg-dim); padding: 2px 6px; border-radius: 4px; line-height: 1;
}
.pm-print-modal-x:hover { background: var(--bg-3, #131923); color: var(--fg-1); }
.pm-print-modal-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 16px 18px 12px;
}
.pm-print-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border: 1.5px solid var(--border);
  border-radius: 8px; background: var(--bg-1, #0a0f16); text-align: left;
  cursor: pointer; transition: border-color 120ms, background 120ms;
}
.pm-print-card:hover { border-color: var(--fg-dim); background: var(--bg-2); }
.pm-print-card.selected { border-color: var(--teal, #0abfbc); background: var(--bg-2); }
.pm-print-card-label { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.pm-print-card-desc { font-size: 11px; color: var(--fg-dim); }
.pm-print-custom-row {
  display: flex; gap: 16px; align-items: flex-end;
  padding: 0 18px 14px;
}
.pm-print-custom-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--fg-3);
}
.pm-print-date-input {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-1, #0a0f16); color: var(--fg-1); font: inherit; font-size: 12px;
}
/* Config section: subtitle + logo upload */
.pm-print-config-section {
  padding: 0 18px 12px; display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid rgba(128,128,128,0.12); padding-top: 12px;
}
.pm-print-config-row { display: flex; flex-direction: column; gap: 4px; }
.pm-print-config-label { font-size: 11px; color: var(--fg-3); font-weight: 500; }
.pm-print-subtitle-input {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-1, #0a0f16); color: var(--fg-1); font: inherit; font-size: 12px;
  width: 100%; box-sizing: border-box;
}
.pm-print-subtitle-input:focus { outline: none; border-color: var(--teal, #0abfbc); }
.pm-print-logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-print-logo-label { font-size: 11px; color: var(--fg-3); font-weight: 500; min-width: 90px; }
.pm-print-logo-area { display: flex; align-items: center; gap: 8px; }
.pm-print-logo-upload {
  display: inline-flex; align-items: center; cursor: pointer;
}
.pm-print-logo-upload-text {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg-2); color: var(--fg-3); font-size: 11px; cursor: pointer;
  transition: background 120ms, color 120ms;
}
.pm-print-logo-upload:hover .pm-print-logo-upload-text { background: var(--bg-3, #131923); color: var(--fg-1); }
.pm-print-logo-clear {
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 5px;
  background: transparent; color: var(--fg-dim); font: inherit; font-size: 11px; cursor: pointer;
}
.pm-print-logo-clear:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }
.pm-print-logo-preview {
  height: 28px; width: auto; border-radius: 4px;
  border: 1px solid var(--border); object-fit: contain; background: #fff; padding: 2px;
}

.pm-print-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 18px 14px; border-top: 1px solid rgba(128,128,128,0.15);
}
.pm-print-btn-cancel {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--fg-3); font: inherit; font-size: 12px; cursor: pointer;
}
.pm-print-btn-cancel:hover { background: var(--bg-3, #131923); color: var(--fg-1); }
.pm-print-btn-gen {
  padding: 6px 16px; border: none; border-radius: 6px;
  background: var(--teal, #0abfbc); color: #fff; font: inherit; font-size: 12px;
  cursor: pointer; font-weight: 600;
}
.pm-print-btn-gen:hover:not(:disabled) { filter: brightness(1.1); }
.pm-print-btn-gen:disabled { opacity: 0.4; cursor: not-allowed; }

/* Print-white theme: applied to gantt shell before html2canvas capture */
.pm-gantt-print-white {
  --bg-1: #ffffff;
  --bg-2: #f6f7f8;
  --bg-3: #e9ecef;
  --fg-1: #111111;
  --fg-2: #2d2d2d;
  --fg-3: #555555;
  --fg-4: #888888;
  --fg-dim: #777777;
  --border: #d0d5dd;
  --border-strong: #9aa0ab;
  background: #fff;
}
.pm-gantt-print-white .pm-gantt-canvas { background: #fff !important; }
.pm-gantt-print-white .pm-gantt-rail { background: #fff !important; }
.pm-gantt-print-white .pm-gantt-rail-head { background: #f0f1f3 !important; color: #333 !important; }
.pm-gantt-print-white .pm-gantt-rail-row.is-phase { background: #e8eaec !important; color: #222 !important; }
.pm-gantt-print-white .pm-gantt-rail-row { border-bottom-color: #d8dce2 !important; color: #333 !important; }

/* ─── PM Task Information Modal ─────────────────────────────────────────── */
dialog.pm-task-modal {
  width: 660px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  padding: 0; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-2, #f4f5f6); color: var(--fg-1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.22); overflow: hidden;
}
dialog.pm-task-modal::backdrop { background: rgba(0,0,0,0.35); }
.pm-task-modal-form { display: flex; flex-direction: column; max-height: calc(100vh - 64px); }
.pm-task-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--border);
  background: var(--bg-3);
}
.pm-task-modal-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg-1); }
.pm-task-modal-close {
  background: none; border: none; cursor: pointer; font-size: 16px;
  color: var(--fg-3); padding: 2px 6px; border-radius: 4px; line-height: 1;
}
.pm-task-modal-close:hover { background: var(--surface-2); color: var(--fg-1); }

.pm-task-modal-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  background: var(--bg-3); overflow-x: auto; flex-shrink: 0;
}
.pm-task-modal-tab {
  padding: 9px 16px; font: inherit; font-size: 12px; font-weight: 500;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--fg-3); cursor: pointer; white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.pm-task-modal-tab:hover { color: var(--fg-1); background: var(--surface-2); }
.pm-task-modal-tab.active,
.pm-task-modal-tab[aria-selected="true"] {
  color: var(--teal); border-bottom-color: var(--teal);
  background: var(--bg-2); font-weight: 600;
}

.pm-task-modal-body { flex: 1; overflow-y: auto; padding: 18px; }
.pm-task-modal-panel { display: block; }
.pm-task-modal-panel[hidden] { display: none; }

.pm-task-modal-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.pm-task-modal-row:last-child { margin-bottom: 0; }
.pm-task-modal-row-cols { flex-direction: row; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pm-task-modal-row-cols .pm-task-modal-col { display: flex; flex-direction: column; gap: 4px; }
.pm-task-modal-label { font-size: 11px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em; }
.pm-task-modal-input {
  padding: 6px 9px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg, #fff); color: var(--fg-1); font: inherit; font-size: 13px;
  outline: none; transition: border-color .12s;
}
.pm-task-modal-input:focus { border-color: var(--teal, #0abffc); }
.pm-task-modal-input-full { width: 100%; box-sizing: border-box; }
.pm-task-modal-input-sm { width: 80px; }
.pm-task-modal-select {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg, #fff); color: var(--fg-1); font: inherit; font-size: 13px;
  outline: none; cursor: pointer;
}
.pm-task-modal-select-sm { font-size: 12px; padding: 5px 6px; }
.pm-task-modal-dur-group { display: flex; gap: 6px; align-items: center; }
.pm-task-modal-radio-group { display: flex; gap: 16px; padding-top: 2px; }
.pm-task-modal-radio-group label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--fg-1); cursor: pointer; }
.pm-task-modal-checks { flex-direction: row; gap: 16px; }
.pm-task-modal-check { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--fg-1); cursor: pointer; }
.pm-task-modal-static { font-size: 13px; color: var(--fg-3); padding: 2px 0; }
.pm-task-modal-notes { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg, #fff); color: var(--fg-1); font: inherit; font-size: 13px; resize: vertical; outline: none; }
.pm-task-modal-notes:focus { border-color: var(--teal, #0abffc); }
.pm-task-modal-placeholder { color: var(--fg-3); font-size: 13px; margin: 12px 0; font-style: italic; }

/* Predecessors table */
.pm-task-modal-pred-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.pm-task-modal-pred-table th {
  padding: 6px 8px; text-align: left; font-size: 11px; font-weight: 600;
  color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
.pm-task-modal-pred-table td { padding: 5px 6px; border-bottom: 1px solid var(--border-faint, #e0e0e0); vertical-align: middle; }
.pm-task-modal-pred-del {
  background: none; border: none; cursor: pointer; color: var(--fg-dim);
  font-size: 14px; padding: 2px 6px; border-radius: 3px;
}
.pm-task-modal-pred-del:hover { background: var(--danger-subtle); color: var(--danger); }
.pm-task-modal-add-pred {
  font: inherit; font-size: 12px; padding: 5px 12px; border: 1px dashed var(--border);
  border-radius: 5px; background: none; color: var(--fg-3); cursor: pointer;
  transition: color .12s, border-color .12s;
}
.pm-task-modal-add-pred:hover { color: var(--teal); border-color: var(--teal); }

/* Footer */
.pm-task-modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-top: 1px solid var(--border);
  background: var(--bg-3); flex-shrink: 0; gap: 12px;
}
.pm-task-modal-error { font-size: 12px; color: var(--danger); flex: 1; }
.pm-task-modal-actions { display: flex; gap: 8px; flex-shrink: 0; }
.pm-task-modal-btn {
  font: inherit; font-size: 13px; font-weight: 500; padding: 7px 18px;
  border-radius: 6px; cursor: pointer; border: 1px solid var(--border);
  transition: background .12s, color .12s;
}
.pm-task-modal-btn-cancel { background: var(--bg-2, #f4f5f6); color: var(--fg-2); }
.pm-task-modal-btn-cancel:hover { background: var(--bg-3); }
.pm-task-modal-btn-ok { background: var(--teal, #0abffc); color: #fff; border-color: var(--teal, #0abffc); }
.pm-task-modal-btn-ok:hover { filter: brightness(1.08); }
.pm-task-modal-btn-ok:disabled { opacity: 0.55; cursor: not-allowed; }
/* ─────────────────────────────────────────────────────────────────────────── */

/* Chat (PM Ask Ripple) */
.rc-chat-card { padding: 14px; }
.rc-chat-thread { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; padding: 4px; }
.rc-chat-form { display: flex; gap: 8px; margin-top: 12px; }
.rc-chat-input { flex: 1; padding: 11px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--fg-1); font-size: 13px; font-family: var(--font-body); outline: none; transition: border-color .15s, box-shadow .15s; }
.rc-chat-input:focus { border-color: var(--teal); box-shadow: var(--focus-ring); }
.rc-chat-status { margin-top: 8px; min-height: 18px; font-size: 11px; color: var(--fg-dim); }
.rc-chat-msg { padding: 10px 12px; border-radius: 10px; max-width: 86%; }
.rc-chat-msg[data-speaker="user"] { background: var(--teal-subtle); border: 1px solid var(--teal-soft); align-self: flex-end; }
.rc-chat-msg[data-speaker="ripple"] { background: var(--card-2); border: 1px solid var(--border); align-self: flex-start; }
.rc-chat-msg[data-speaker="system"] { background: var(--surface-2); border: 1px dashed var(--border); align-self: center; color: var(--fg-dim); font-size: 11px; }
.rc-chat-msg-speaker { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 4px; }
.rc-chat-msg-body { color: var(--fg-1); font-size: 13px; line-height: 1.5; }
.rc-chat-msg-meta { margin-top: 6px; font-size: 11px; color: var(--fg-dim); }

.rc-chat-confirm { padding: 14px; background: linear-gradient(135deg, rgba(168,139,250,0.08), rgba(10,191,188,0.08)); border: 1px solid var(--violet-soft); border-radius: 12px; max-width: 86%; align-self: flex-start; }
.rc-chat-confirm-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet); margin-bottom: 6px; }
.rc-chat-confirm-interpretation { color: var(--fg-1); font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.rc-chat-confirm-action { background: var(--bg-deep); color: var(--fg-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 12px; font-family: 'Ubuntu Mono', ui-monospace, monospace; overflow-x: auto; margin: 0 0 8px; white-space: pre-wrap; }
.rc-chat-confirm-meta { font-size: 11px; color: var(--fg-dim); margin-bottom: 10px; }
.rc-chat-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-chat-confirm[data-state="confirmed"] { border-color: var(--success-strong); background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(10,191,188,0.08)); }
.rc-chat-confirm[data-state="cancelled"] { border-color: var(--border); background: var(--surface-2); opacity: 0.7; }

/* === PM Detail v2 (XLSX-aligned) === */

/* Page-head eyebrow with inline section + phase badge */
.rc-page-eyebrow { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-page-eyebrow .rc-eyebrow-dot { color: var(--fg-dim); }
.rc-page-eyebrow .rc-badge { transform: translateY(-1px); }

/* Money hero strip — legacy class, retained for index section totals */
.rc-pm-money-value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rc-pm-money-value.primary { color: var(--teal); }

/* v4 meta strip: dense data table — 10 cells in one row on wide,
   absorbs hold-up + next-step text inline. */
.rc-pm-meta-strip {
  display: grid;
  grid-template-columns: 0.7fr 0.8fr 0.8fr 0.8fr 0.7fr 0.9fr 0.7fr 0.7fr 1.4fr 1.4fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.rc-pm-meta-item {
  background: var(--card);
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  position: relative;
}
.rc-pm-meta-item.rc-pm-meta-wide { background: var(--card-2); }
.rc-pm-meta-item.rc-pm-meta-holdup[data-intensity="danger"] {
  background: var(--danger-soft);
  box-shadow: inset 3px 0 0 var(--danger);
}
.rc-pm-meta-item.rc-pm-meta-holdup[data-intensity="warn"] {
  background: var(--warning-soft);
  box-shadow: inset 3px 0 0 var(--warning);
}
.rc-pm-meta-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  font-weight: 700;
  white-space: nowrap;
}
.rc-pm-meta-value {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-pm-meta-value.money { font-size: 16px; }
.rc-pm-meta-value.money.primary { color: var(--teal); }
.rc-pm-meta-value.rc-pm-meta-text {
  font-size: 12px;
  font-weight: 600;
  white-space: normal;
  line-height: 1.35;
  font-family: var(--font-body);
  letter-spacing: 0;
}
.rc-pm-meta-value.rc-pm-meta-text.rc-pm-empty {
  color: var(--fg-dim);
  font-style: italic;
  font-weight: 400;
}
.rc-pm-meta-sub {
  font-style: normal;
  font-size: 10px;
  color: var(--fg-dim);
  font-weight: 500;
}
.rc-pm-meta-pill {
  font-size: 9px;
  padding: 2px 7px;
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-pm-flag-row { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.rc-pm-flag-row .rc-badge { font-size: 9px; padding: 2px 6px; }

/* Hold-up + Next step priority card */
.rc-pm-priority-card {
  margin-bottom: 20px;
  border-color: var(--border);
  transition: border-color .15s, background .15s;
}
.rc-pm-priority-card[data-intensity="danger"] {
  border-color: var(--danger-strong);
  background: linear-gradient(135deg, var(--danger-soft), transparent 60%);
}
.rc-pm-priority-card[data-intensity="warn"] {
  border-color: var(--warning-strong);
  background: linear-gradient(135deg, var(--warning-soft), transparent 60%);
}
.rc-pm-priority-card[data-intensity="calm"] {
  border-color: var(--success-strong);
  background: linear-gradient(135deg, var(--success-soft), transparent 60%);
}
.rc-pm-priority-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
}
.rc-pm-priority-cell {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rc-pm-priority-divider {
  background: var(--border);
}
.rc-pm-priority-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  font-weight: 800;
}
.rc-pm-priority-value {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.35;
  color: var(--fg-1);
  font-weight: 600;
}
.rc-pm-priority-value.rc-pm-empty {
  font-style: italic;
  font-weight: 400;
  color: var(--fg-dim);
}
.rc-pm-priority-meta {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
}
.rc-pm-priority-action { margin-top: 6px; }

/* Two-column detail layout */
.rc-pm-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.rc-pm-detail-col { display: flex; flex-direction: column; gap: 16px; }

/* Definition list (key/value rows) */
.rc-pm-deflist { margin: 0; display: flex; flex-direction: column; }
.rc-pm-deflist-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.rc-pm-deflist-row:last-child { border-bottom: 0; padding-bottom: 0; }
.rc-pm-deflist-row:first-child { padding-top: 0; }
.rc-pm-deflist-row dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  font-weight: 700;
  padding-top: 4px;
}
.rc-pm-deflist-row dd {
  margin: 0;
  color: var(--fg-1);
  font-size: 13px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.rc-pm-deflist-row dd.rc-pm-multiline {
  display: block;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Person chips */
.rc-pm-person-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg-1);
}
.rc-pm-avatar {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
}
.rc-pm-person-name { color: var(--fg-2); font-weight: 500; }
.rc-pm-empty {
  color: var(--fg-dim);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
}
.rc-pm-empty-row {
  padding: 8px 0;
  color: var(--fg-3);
  font-style: italic;
}

/* Ask Ripple — chooser widget (select-one radio list inside the confirm card)
   shown when Ripple flags multiple plausible candidates (task ambiguity,
   missing projectId on create_task, etc.) */
.rc-chat-confirm-choices {
  margin: 8px 0 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--teal);
  border-radius: 4px;
}
.rc-chat-confirm-choices-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  margin-bottom: 6px;
}
.rc-chat-confirm-choice {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  cursor: pointer;
}
.rc-chat-confirm-choice input[type="radio"] { margin: 0; }
.rc-chat-confirm-choice-label { color: var(--fg-1); }
.rc-chat-confirm-choice-sub {
  color: var(--fg-dim);
  font-size: 11px;
}

/* Multiple choice widgets stack vertically in the confirm card */
.rc-chat-confirm-widgets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 12px;
}
.rc-chat-confirm-widgets > * { margin: 0; }

/* Text/textarea widget (edit title / note body / comm summary before commit) */
.rc-chat-confirm-text {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--teal);
  border-radius: 4px;
}
.rc-chat-confirm-text .rc-input { display: block; width: 100%; }
.rc-chat-confirm-text textarea { resize: vertical; min-height: 60px; }

/* Applied stamp — replaces the Confirm/Clarify/Cancel buttons after confirm.
   Keeps the confirmation card visible as inline action history. */
.rc-chat-confirm[data-state="confirmed"] {
  opacity: 0.82;
  border-color: var(--success, #4ade80);
}
.rc-chat-confirm-applied {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--success, #4ade80);
}
.rc-chat-confirm-applied-tick {
  display: inline-flex;
  width: 18px; height: 18px;
  align-items: center; justify-content: center;
  background: var(--success, #4ade80);
  color: var(--bg-1, #0f1419);
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
}
.rc-chat-confirm-applied-text {
  font-weight: 500;
  color: var(--fg-1);
}
.rc-chat-confirm-applied-view {
  margin-left: auto;
  color: var(--teal);
  text-decoration: none;
  font-size: 12px;
}
.rc-chat-confirm-applied-view:hover { text-decoration: underline; }

/* Plan phase header row + "+ New task" — keep the toggle clickable across
   most of the row width, slot the add button on the right. */
.rc-collapsible-head-row {
  display: flex; align-items: center; gap: 6px; width: 100%;
}
.rc-collapsible-head-row .rc-collapsible-head { flex: 1; }
.rc-pm-phase-add { white-space: nowrap; }

/* Inline new-task form (plan + board) */
.rc-pm-newtask {
  display: flex; gap: 6px; align-items: center;
  padding: 6px 8px; background: var(--bg-2, #131923);
  border: 1px dashed var(--border, #1c2530); border-radius: 6px;
  margin: 6px 0;
}
.rc-pm-newtask input { flex: 1; }
.rc-pm-newtask-board { flex-direction: column; align-items: stretch; }
.rc-pm-newtask-board .rc-pm-newtask-buttons {
  display: flex; gap: 6px; justify-content: flex-end;
}

/* Board column "+ Add" footer */
.rc-kanban-col-add {
  margin: 6px 8px 8px; padding: 4px 8px;
  width: calc(100% - 16px);
  text-align: left;
  color: var(--fg-dim);
}
.rc-kanban-col-add:hover { color: var(--fg-1); }

/* Plan task drawer — right-side panel opened by clicking a plan task card */
.pm-task-drawer { position: fixed; inset: 0; pointer-events: none; z-index: 1000; }
.pm-task-drawer[data-open="true"] { pointer-events: auto; }
.pm-task-drawer-scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55);
  opacity: 0; transition: opacity 180ms ease;
}
.pm-task-drawer[data-open="true"] .pm-task-drawer-scrim { opacity: 1; }
/* Centered modal (locked 2026-05-27 with user). The "drawer" name is
   retained to avoid renaming every call site in pm-task-drawer.js +
   callers, but visually it's a centered modal at ~75% viewport width.
   Open animation = fade + slight pop from 95% scale. */
.pm-task-drawer-panel {
  position: absolute;
  top: 50%; left: 50%;
  width: min(75vw, 960px);
  max-height: 85vh;
  background: var(--bg-1, #0f1419);
  border: 1px solid var(--border, #1c2530);
  border-radius: 10px;
  display: flex; flex-direction: column;
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  transition: transform 180ms cubic-bezier(0.2, 0.6, 0.2, 1), opacity 180ms ease;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 10px 20px rgba(0, 0, 0, 0.30);
  overflow: hidden;
}
.pm-task-drawer[data-open="true"] .pm-task-drawer-panel {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
/* On narrower screens (mobile/tablet) the 75vw modal would be too cramped — */
/* fall back to nearly-full-screen. */
@media (max-width: 700px) {
  .pm-task-drawer-panel {
    width: 96vw;
    max-height: 92vh;
  }
}
.pm-task-drawer-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--border, #1c2530);
}
.pm-task-drawer-head > div:first-child { flex: 1; min-width: 0; }
.pm-task-drawer-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-dim); margin-bottom: 4px;
}
.pm-task-drawer-title {
  font-size: 18px; font-weight: 600; color: var(--fg-1);
  background: transparent; border: none; outline: none; padding: 0;
  width: 100%;
}
.pm-task-drawer-title:focus { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
.pm-task-drawer-close {
  background: transparent; border: none; color: var(--fg-dim);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 8px;
}
.pm-task-drawer-close:hover { color: var(--fg-1); }
.pm-task-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
.pm-task-drawer-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;
}
.pm-task-drawer-grid > label, .pm-task-drawer-desc-label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--fg-dim);
}
.pm-task-drawer-grid > label > select,
.pm-task-drawer-grid > label > input { display: block; margin-top: 4px; width: 100%; }
.pm-task-drawer-grid > label > input[type="checkbox"] { width: auto; }
.pm-task-drawer-desc-label { margin-top: 4px; }
.pm-task-drawer-desc-label textarea { display: block; margin-top: 4px; width: 100%; }
.pm-task-drawer-section { margin-top: 18px; }
.pm-task-drawer-section h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fg-dim); margin: 0 0 8px;
}
.pm-task-drawer-subs, .pm-task-drawer-activity, .pm-task-drawer-deps {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px;
}
.pm-task-drawer-subs li, .pm-task-drawer-activity li, .pm-task-drawer-deps li {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--bg-2, #131923); border-radius: 4px; font-size: 12px;
}
.pm-task-drawer-dep .pm-task-drawer-dep-title { flex: 1; }
.pm-task-drawer-deps-add { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.pm-task-drawer-deps-add select { flex: 1; }
.pm-task-drawer-deps-lag, .pm-task-drawer-dep-lag-input { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.pm-task-drawer-dep-lag-wrap { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-dim); font-size: 11px; }
.pm-task-drawer-dep-lag-suffix { white-space: nowrap; }
.pm-task-drawer-deps-hint { margin-top: 6px; font-size: 11px; color: var(--fg-dim); }
.pm-task-drawer-empty { color: var(--fg-dim); font-style: italic; }
/* Team admin (Phase G) */
.pm-team-list { list-style: none; padding: 0; margin: 0 0 16px 0; display: flex; flex-direction: column; gap: 6px; }
.pm-team-item {
  display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 10px; background: var(--bg-2, #131923); border-radius: 6px; font-size: 12px;
}
.pm-team-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); color: var(--bg-1, #0a0f16);
  font-weight: 700; font-size: 11px;
}
.pm-team-name-line { display: flex; align-items: baseline; gap: 8px; }
.pm-team-name { color: var(--fg-1, #fff); font-weight: 600; }
.pm-team-title { color: var(--fg-dim); font-size: 11px; }
.pm-team-contact { color: var(--fg-3, #adbfd6); font-size: 11px; margin-top: 2px; }
.pm-team-contact a { color: var(--fg-3); text-decoration: none; }
.pm-team-contact a:hover { color: var(--teal); text-decoration: underline; }
.pm-team-empty { color: var(--fg-dim); font-style: italic; }
.pm-team-edit, .pm-team-delete { font-size: 11px; }
.pm-team-new {
  display: grid; gap: 6px;
  grid-template-columns: 1.4fr 1.2fr 1.4fr 1fr 1fr auto;
  align-items: end;
}
@media (max-width: 760px) { .pm-team-new { grid-template-columns: 1fr 1fr; } }
/* Per-project team picker on the detail page (Phase G) */
.pm-project-team-picker {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 6px;
}
.pm-project-team-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: var(--bg-2, #131923); font-size: 12px;
}
.pm-project-team-pill .pm-team-avatar { width: 22px; height: 22px; font-size: 10px; }
.pm-project-team-pill button {
  background: none; border: 0; color: var(--fg-dim); cursor: pointer; font-size: 11px;
}
.pm-project-team-add { display: inline-flex; align-items: center; gap: 6px; }
.pm-project-team-add select { min-width: 180px; }
/* Custom fields admin (Tier 3) */
.pm-customfields-admin { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .pm-customfields-admin { grid-template-columns: 1fr; } }
/* Group sub-headings are <h3> (one level under the "Custom fields" <h2>) for a valid
   heading order (fixes a Lighthouse-audit h2->h4 skip). Their 17px callout size is
   pinned inline in templates.html (style="font-size:var(--fs-h5)") because the skin's
   `.rc-card h3` rule (20px) ties this selector on specificity and loads later. */
.pm-customfields-group h3 { margin: 0 0 8px 0; }
.pm-customfields-list { list-style: none; padding: 0; margin: 0 0 10px 0; display: flex; flex-direction: column; gap: 4px; }
.pm-customfields-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--bg-2, #131923); border-radius: 4px; font-size: 12px;
}
.pm-customfields-label { font-weight: 600; flex: 1; }
.pm-customfields-type { color: var(--fg-dim); font-size: 11px; }
.pm-customfields-new {
  display: grid; gap: 6px;
  grid-template-columns: 1.6fr 1fr 1.6fr auto;
  align-items: end;
}
@media (max-width: 720px) {
  .pm-customfields-new { grid-template-columns: 1fr; }
}
.rc-pm-customfield-editor input,
.rc-pm-customfield-editor select { min-width: 160px; }
/* Task drawer — Attachments (Tier 3) */
.pm-task-drawer-attachments {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px;
}
.pm-task-drawer-attachments li {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--bg-2, #131923); border-radius: 4px; font-size: 12px;
}
.pm-task-drawer-attachment-icon { flex-shrink: 0; opacity: 0.8; }
.pm-task-drawer-attachment-name {
  flex: 1; text-align: left; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.pm-task-drawer-attachment-meta { color: var(--fg-dim); font-size: 11px; flex-shrink: 0; }
.pm-task-drawer-attachments-add {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 10px; border: 1px dashed var(--border, #1c2530); border-radius: 6px;
  transition: background 120ms;
}
.pm-task-drawer-attachments-add.drag {
  background: rgba(10, 191, 188, 0.08);
  border-color: var(--accent, #0abfbc);
}
.pm-task-drawer-attachments-hint { color: var(--fg-dim); font-size: 11px; }
/* Task drawer — Time entries (Tier 3) */
.pm-task-drawer-time-running { margin-bottom: 8px; }
.pm-task-drawer-time-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(234, 84, 40, 0.12); color: #ea5428;
  font-size: 12px; font-weight: 600;
}
.pm-task-drawer-time-pill button { margin-left: 4px; }
.pm-task-drawer-time-list {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px;
}
.pm-task-drawer-time-list li {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--bg-2, #131923); border-radius: 4px; font-size: 12px;
}
.pm-task-drawer-time-who {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent, #0abfbc); color: var(--bg-1, #0a0f16);
  font-weight: 700; font-size: 9px;
}
.pm-task-drawer-time-dur { font-weight: 600; min-width: 50px; }
.pm-task-drawer-time-note { flex: 1; color: var(--fg-dim); }
.pm-task-drawer-time-when { color: var(--fg-dim); font-size: 11px; }
.pm-task-drawer-time-manual { margin-top: 10px; font-size: 12px; }
.pm-task-drawer-time-manual summary {
  cursor: pointer; color: var(--fg-dim); padding: 4px 0;
}
.pm-task-drawer-time-manual-form {
  display: grid; gap: 6px; margin-top: 6px;
  grid-template-columns: 1fr 1fr;
}
.pm-task-drawer-time-manual-form label:nth-child(3),
.pm-task-drawer-time-manual-form button { grid-column: 1 / -1; }
.pm-task-drawer-time-manual-form button { justify-self: end; }
/* Task drawer — Comments (Tier 3) */
.pm-task-drawer-comments {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px;
}
.pm-task-drawer-comment {
  display: flex; gap: 10px; padding: 8px;
  background: var(--bg-2, #131923); border-radius: 6px; font-size: 12px;
}
.pm-task-drawer-comment-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent, #0abfbc); color: var(--bg-1, #0a0f16);
  font-weight: 700; font-size: 10px;
}
.pm-task-drawer-comment-main { flex: 1; min-width: 0; }
.pm-task-drawer-comment-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.pm-task-drawer-comment-author { font-weight: 600; color: var(--fg, #dfe7f4); }
.pm-task-drawer-comment-when { color: var(--fg-dim); font-size: 11px; }
.pm-task-drawer-comment-body { color: var(--fg, #dfe7f4); white-space: pre-wrap; word-wrap: break-word; }
.pm-task-drawer-comment-actions { display: flex; gap: 12px; margin-top: 4px; }
.pm-task-drawer-comment-actions .rc-link {
  background: none; border: 0; padding: 0; color: var(--fg-dim);
  font-size: 11px; cursor: pointer; text-decoration: underline;
}
.pm-task-drawer-comment-actions .rc-link:hover { color: var(--accent, #0abfbc); }
.pm-task-drawer-comment-replybox { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.pm-task-drawer-comment-replybox-actions { display: flex; gap: 6px; justify-content: flex-end; }
.pm-task-drawer-comment-replies {
  list-style: none; padding: 0; margin: 8px 0 0 0;
  display: flex; flex-direction: column; gap: 8px;
  border-left: 2px solid var(--border, #1c2530); padding-left: 10px;
}
.pm-task-drawer-comments-compose { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pm-task-drawer-comments-compose button { align-self: flex-end; }
.pm-task-drawer-comment-editbox { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pm-task-drawer-modal {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(6, 11, 18, 0.72);
}
.pm-task-drawer-modal-card {
  width: min(520px, 100%);
  background: var(--bg-1, #0a0f16);
  border: 1px solid var(--border, #1c2530);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.pm-task-drawer-modal-card form { display: flex; flex-direction: column; }
.pm-task-drawer-modal-head,
.pm-task-drawer-modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border, #1c2530);
}
.pm-task-drawer-modal-head h4 { margin: 0; color: var(--fg-1, #fff); }
.pm-task-drawer-modal-foot { border-bottom: 0; border-top: 1px solid var(--border, #1c2530); justify-content: flex-end; }
.pm-task-drawer-modal-body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.pm-task-drawer-modal-field { display: flex; flex-direction: column; gap: 5px; }
.pm-task-drawer-modal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.pm-task-drawer-task-picks { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.pm-task-drawer-task-pick {
  width: 100%; text-align: left; padding: 8px 10px;
  border: 1px solid var(--border, #1c2530);
  border-radius: 5px; background: var(--bg-2, #131923);
  color: var(--fg, #dfe7f4); cursor: pointer;
}
.pm-task-drawer-task-pick[data-selected="true"] { border-color: var(--teal, #0abfbc); box-shadow: inset 3px 0 0 var(--teal, #0abfbc); }
@media (max-width: 760px) { .pm-task-drawer-modal-grid { grid-template-columns: 1fr; } }
.rc-btn-xs {
  font-size: 12px; min-height: 28px; padding: 5px 10px; border-radius: 4px;
  border: 1px solid var(--border, #1c2530); background: var(--bg-2, #131923);
  color: var(--fg, #dfe7f4); cursor: pointer;
}
.rc-btn-xs:hover:not(:disabled) { background: var(--bg-3, #1c2530); }
.rc-btn-xs:disabled { opacity: 0.5; cursor: not-allowed; }
.pm-task-drawer-act-body { flex: 1; }
.pm-task-drawer-act-when { color: var(--fg-dim); font-size: 11px; white-space: nowrap; }
.pm-task-drawer-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; border-top: 1px solid var(--border, #1c2530);
}
.pm-task-drawer-status[data-tone="success"] { color: var(--success, #4ade80); }
.pm-task-drawer-status[data-tone="error"]   { color: var(--danger, #d33); }
.pm-task-drawer-status[data-tone="info"]    { color: var(--fg-dim); }

/* My Tasks sort dropdown — sits next to the "N open" tag in the toolbar */
.rc-pm-toolbar-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rc-pm-toolbar-sort select { font-size: 12px; padding: 4px 8px; }

/* My Tasks overdue indicator — row gets a subtle red left-border accent,
   plus the OVERDUE pill from the row template. Don't flash the whole row
   red; PMs need to scan, not stop. */
.rc-task-row[data-overdue="true"] {
  border-left: 2px solid var(--danger, #d33);
  padding-left: 8px;
}
.rc-pm-task-overdue { font-size: 9px; padding: 1px 6px; margin-left: 6px; }
.rc-pm-task-due { white-space: nowrap; }

/* Plan task flash — applied for ~1.6s when a task is focused via deep-link
   or "click task in overview" → focuses in plan tab. Outline only, no
   background flicker. */
.rc-pm-task-flash {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 6px;
  animation: rc-pm-task-flash 1.6s ease-out;
}
@keyframes rc-pm-task-flash {
  0%   { outline-color: var(--teal); }
  80%  { outline-color: var(--teal); }
  100% { outline-color: transparent; }
}

/* Customer card */
.rc-pm-customer-name { margin: 0 0 4px; font-size: 16px; color: var(--fg-1); }
.rc-pm-customer-business { margin: 0 0 14px; color: var(--fg-3); font-size: 13px; }

/* AI Summary card */
.rc-pm-summary-card { position: relative; }
.rc-pm-summary-card .rc-card-head { gap: 12px; }
.rc-pm-summary-head-content { flex: 1; min-width: 0; }
.rc-pm-summary-card[data-collapsed="true"] .rc-card-body { display: none; }
.rc-pm-summary-section { padding: 12px 0; border-bottom: 1px solid var(--border); }
.rc-pm-summary-section:first-child { padding-top: 4px; }
.rc-pm-summary-section:last-child { border-bottom: 0; padding-bottom: 4px; }
.rc-pm-summary-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  font-weight: 700;
  margin-bottom: 6px;
}
.rc-pm-summary-section p {
  margin: 0;
  color: var(--fg-1);
  font-size: 13px;
  line-height: 1.6;
}
.rc-pm-summary-details {
  color: var(--fg-2) !important;
  font-size: 13px;
}
.rc-pm-summary-participants { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-pm-participant-chip {
  display: inline-flex;
  padding: 2px 8px;
  background: var(--violet-soft);
  color: var(--violet);
  border: 1px solid rgba(167,139,250,0.25);
  border-radius: 999px;
  font-size: 11px;
}

/* Index — lifecycle sections + table */
.rc-pm-lifecycle-section { margin-bottom: 20px; }
.rc-pm-section-stat { text-align: right; }
.rc-pm-section-stat-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  font-weight: 700;
  margin-bottom: 2px;
}
.rc-pm-projects-table td { vertical-align: top; padding: 12px 14px; }
.rc-pm-projects-table th { padding: 10px 14px; }
.rc-pm-projects-table td strong { display: block; color: var(--fg-1); font-size: 13px; margin-bottom: 2px; }
.rc-pm-money-col {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--fg-1);
}
.rc-pm-row-flags { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.rc-pm-projects-table tr[data-pm-project-row] { cursor: pointer; transition: background .12s; }
.rc-pm-projects-table tr[data-pm-project-row]:hover { background: var(--surface-2); }

/* Responsive — strip wraps + grid collapses */
@media (max-width: 1440px) {
  .rc-pm-meta-strip {
    grid-template-columns: 0.8fr 0.9fr 0.9fr 0.8fr 0.8fr 0.7fr 0.7fr 1.4fr 1.4fr;
  }
  .rc-pm-meta-strip > :nth-child(1) { display: none; } /* hide Phase if too tight (it's also in tabs/eyebrow later) */
}
@media (max-width: 1280px) {
  .rc-pm-meta-strip {
    grid-template-columns: repeat(4, 1fr);
  }
  .rc-pm-meta-strip > :nth-child(1) { display: flex; }
  .rc-pm-meta-item { padding: 9px 11px; }
  .rc-pm-meta-item.rc-pm-meta-wide { grid-column: span 2; }
}
@media (max-width: 1100px) {
  .rc-pm-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .rc-pm-meta-strip { grid-template-columns: 1fr 1fr; }
  .rc-pm-meta-item.rc-pm-meta-wide { grid-column: span 2; }
  .rc-pm-deflist-row { grid-template-columns: 1fr; gap: 4px; }
  .rc-pm-projects-table { font-size: 12px; }
  .rc-pm-projects-table td, .rc-pm-projects-table th { padding: 8px 10px; }
}

/* === PM Kanban — compact density (board v2) ===
   Key changes vs. legacy .rc-kanban:
   - Horizontal scroll instead of wrap. All status/phase columns stay on one row;
     overflow-x lets narrow viewports pan rather than re-arrange.
   - Tighter column + card padding to put more cards on screen.
   - Less prominent empty-column hint. */

body[data-dashboard-page^="pm"] .rc-kanban,
[data-pm-pane="board"] .rc-kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(212px, 232px);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}
body[data-dashboard-page^="pm"] .rc-kanban-col,
[data-pm-pane="board"] .rc-kanban-col {
  padding: 6px 6px 8px;
  border-radius: 8px;
  background: var(--surface-1);
}
body[data-dashboard-page^="pm"] .rc-kanban-col-head,
[data-pm-pane="board"] .rc-kanban-col-head {
  display: flex; align-items: baseline; gap: 6px;
  padding: 6px 6px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
body[data-dashboard-page^="pm"] .rc-kanban-col-head strong {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-1);
}
body[data-dashboard-page^="pm"] .rc-kanban-col-head .rc-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--fg-dim);
  letter-spacing: 0;
  text-transform: none;
}
body[data-dashboard-page^="pm"] .rc-kanban-card,
[data-pm-pane="board"] .rc-kanban-card {
  padding: 8px 10px 9px;
  margin-bottom: 5px;
  border-radius: 6px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body[data-dashboard-page^="pm"] .rc-kanban-card > * { margin: 0; }
body[data-dashboard-page^="pm"] .rc-kanban-card strong {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg-1);
}
body[data-dashboard-page^="pm"] .rc-kanban-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body[data-dashboard-page^="pm"] .rc-pm-card-phase {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-subtle);
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.4;
}
body[data-dashboard-page^="pm"] .rc-pm-card-phase:empty { display: none; }
body[data-dashboard-page^="pm"] .rc-pm-card-owner {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-dashboard-page^="pm"] .rc-pm-card-deps {
  font-size: 10.5px;
  color: var(--orange-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
body[data-dashboard-page^="pm"] .rc-pm-card-deps:empty { display: none; }
body[data-dashboard-page^="pm"] .rc-kanban-card-foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 6px;
  padding-top: 0;
}
body[data-dashboard-page^="pm"] .rc-kanban-card-foot .rc-task-due {
  font-size: 10.5px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
body[data-dashboard-page^="pm"] .rc-kanban-card-foot:has(.rc-task-due:empty) { display: none; }
body[data-dashboard-page^="pm"] .rc-kanban-col-add {
  /* Always legible (was opacity:.45 / fg-dim — invisible until column hover).
     It's a ghost button; let it keep its readable text + subtle fill. */
  opacity: 1;
  color: var(--fg-2);
  text-align: center;
  transition: background .12s, color .12s, border-color .12s;
  margin-top: 2px;
}
body[data-dashboard-page^="pm"] .rc-kanban-col-add:hover { color: var(--fg-1); }

/* === PM Kanban drag (SortableJS hooks) === */
.rc-pm-panel .rc-kanban-card,
[data-pm-pane="board"] .rc-kanban-card {
  cursor: grab;
  user-select: none;
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.rc-pm-panel .rc-kanban-card:active,
[data-pm-pane="board"] .rc-kanban-card:active { cursor: grabbing; }
.rc-pm-panel .rc-kanban-card:hover,
[data-pm-pane="board"] .rc-kanban-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  border-color: var(--teal-soft);
}
.rc-pm-card-chosen { box-shadow: 0 10px 24px rgba(0,0,0,0.45); }
.rc-pm-card-drag {
  cursor: grabbing;
  opacity: 0.96;
  transform: rotate(2deg);
  box-shadow: 0 18px 38px rgba(0,0,0,0.55), var(--shadow-accent-soft);
  border-color: var(--teal) !important;
}
.rc-pm-card-ghost {
  opacity: 0.35;
  background: var(--teal-subtle) !important;
  border-style: dashed !important;
  border-color: var(--teal) !important;
  box-shadow: none !important;
}
.rc-pm-card-ghost * { visibility: hidden; }
.rc-kanban-col-body { min-height: 48px; transition: background .15s; border-radius: 6px; }
.rc-kanban-col-body.sortable-over,
.rc-kanban-col-body:has(.rc-pm-card-ghost) { background: var(--teal-subtle); }
.rc-kanban-col-body:empty::after {
  content: "Drop tasks here";
  display: block;
  font-size: 10px;
  color: var(--fg-dim);
  text-align: center;
  padding: 10px 6px;
  font-style: italic;
  opacity: 0.5;
}

/* Vertical rhythm between stacked sections in the Overview pane */
[data-pm-pane="overview"] > .rc-card + .rc-card { margin-top: 16px; }

/* Same rhythm for the PM Templates page — three rc-card sections stack
   directly in #dashboard-page with no separator, so they read as one
   merged block. 16px sibling-margin matches the Overview pane. */
body[data-dashboard-page="pm-templates"] #dashboard-page > .rc-card + .rc-card { margin-top: 16px; }

/* === PM Templates — library card scope badges ============================ */
.pm-template-card .pm-template-card-tags {
  margin-top: 8px;
  justify-content: center;
}
.pm-template-card .pm-template-card-tags .rc-badge { font-size: 9.5px; }

/* Wide modal variant for the template preview + editor. The default
   .rc-modal is 620px which is too cramped for nested phase/group/task
   lists. */
.rc-modal.rc-modal-wide { width: min(880px, 100%); }

/* Loading + error empty states inside the template grid */
[data-pm-template-list] .rc-loading,
[data-pm-template-list] .rc-empty {
  grid-column: 1 / -1;
  padding: 24px 16px;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  font-style: italic;
}
[data-pm-template-list] .rc-empty strong {
  display: inline-block;
  color: var(--fg-1);
  font-size: 14px;
  margin-bottom: 6px;
  font-style: normal;
}
[data-pm-template-list] .rc-empty .rc-empty-sub { color: var(--fg-3); font-size: 12px; }
[data-pm-template-list] .rc-empty-error { border-color: var(--danger-strong, var(--border)); }
[data-pm-template-list] .rc-empty-error .rc-btn { margin-top: 10px; }

/* === Template preview drawer / modal contents ============================ */
.pm-tpl-preview { display: flex; flex-direction: column; gap: 16px; }
.pm-tpl-preview-head { display: flex; flex-direction: column; gap: 6px; }
.pm-tpl-preview-desc { margin: 0; color: var(--fg-2); font-size: 13px; line-height: 1.55; }
.pm-tpl-preview-section h4 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pm-tpl-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pm-tpl-preview-empty {
  margin: 0;
  padding: 10px 12px;
  color: var(--fg-dim);
  font-size: 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-1);
}
.pm-tpl-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.pm-tpl-row-pos {
  flex: 0 0 22px;
  font-family: var(--font-mono, monospace);
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}
.pm-tpl-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pm-tpl-row-main strong { color: var(--fg-1); font-weight: 600; }
.pm-tpl-row-sub { color: var(--fg-3); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.pm-tpl-row-sub:empty { display: none; }
.pm-tpl-color-swatch {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-top: 3px;
  border: 1px solid var(--border);
}

/* === Template editor ===================================================== */
.pm-tpl-editor { display: flex; flex-direction: column; gap: 18px; }
.pm-tpl-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pm-tpl-editor-grid label { display: grid; gap: 5px; }
.pm-tpl-editor-grid label.full { grid-column: 1 / -1; }
.pm-tpl-editor-grid label > span {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--fg-2);
  font-weight: 600;
}
.pm-tpl-editor-section { border-top: 1px solid var(--border); padding-top: 12px; }
.pm-tpl-editor-section header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pm-tpl-editor-section header h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pm-tpl-editor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pm-tpl-editor-empty {
  margin: 0;
  padding: 10px 12px;
  color: var(--fg-dim);
  font-size: 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-1);
}
.pm-tpl-editor-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pm-tpl-editor-row-handle {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pm-tpl-editor-row-handle .rc-btn {
  padding: 2px 6px;
  min-width: 26px;
}
.pm-tpl-editor-row-fields {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.pm-tpl-editor-row[data-pm-tpl-kind="phase"] .pm-tpl-editor-row-fields,
.pm-tpl-editor-row[data-pm-tpl-kind="group"] .pm-tpl-editor-row-fields {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.pm-tpl-editor-row[data-pm-tpl-kind="phase"] .pm-tpl-editor-row-fields > input:first-child {
  grid-column: 1 / -1;
}
.pm-tpl-editor-row-task .pm-tpl-editor-row-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.pm-tpl-editor-color {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  cursor: pointer;
}
.pm-tpl-editor-row-del { align-self: start; color: var(--danger, #ff6b6b); }

/* === Apply-to-project picker ============================================ */
.pm-tpl-apply { display: flex; flex-direction: column; gap: 10px; }
.pm-tpl-apply-help { margin: 0; color: var(--fg-3); font-size: 12px; line-height: 1.55; }
.pm-tpl-apply label { display: grid; gap: 5px; }
.pm-tpl-apply label > span { font-family: var(--font-heading); font-size: 12px; color: var(--fg-2); font-weight: 600; }
.pm-tpl-apply-empty { margin: 0; color: var(--warning, #f4a582); font-size: 12px; }

/* === PM Overview — single-frame accordion for Team / Summary / Notes === */
[data-pm-pane="overview"] .rc-pm-accordion { padding: 0; overflow: hidden; }
[data-pm-pane="overview"] .rc-pm-accordion .rc-collapsible {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
[data-pm-pane="overview"] .rc-pm-accordion .rc-collapsible + .rc-collapsible {
  border-top: 1px solid var(--border);
}
[data-pm-pane="overview"] .rc-pm-accordion .rc-collapsible-head {
  padding: 12px 16px;
  gap: 10px;
  min-height: 44px;
}
[data-pm-pane="overview"] .rc-pm-accordion .rc-collapsible-head strong {
  font-size: 13px;
  flex: 0 0 auto;
}
[data-pm-pane="overview"] .rc-pm-section-sub {
  flex: 1 1 auto;
  font-size: 11px;
  color: var(--fg-dim);
  font-weight: 500;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-pm-pane="overview"] .rc-pm-accordion .rc-collapsible-body {
  padding: 4px 16px 14px 36px;
  background: var(--card-3);
  border-top: 1px solid var(--border);
}
[data-pm-pane="overview"] .rc-pm-accordion .rc-collapsible[data-collapsed="true"] .rc-collapsible-body {
  display: none;
}
[data-pm-pane="overview"] .rc-pm-accordion .rc-pm-summary-section { padding: 10px 0; }
[data-pm-pane="overview"] .rc-pm-accordion .rc-pm-summary-section:first-child { padding-top: 2px; }
[data-pm-pane="overview"] .rc-pm-accordion .rc-pm-summary-section:last-child { padding-bottom: 0; border-bottom: 0; }

/* === PM Overview — compact phases section ===
   Goal: pack more phase/task data in the same vertical space without losing
   the visible break between phases. Touch targets stay ≥32px for the head
   (still meets WCAG when combined with the row hover area). */

[data-pm-pane="overview"] > .rc-card .rc-card-head {
  padding: 10px 14px;
}
[data-pm-pane="overview"] > .rc-card .rc-card-title { font-size: 13px; }
[data-pm-pane="overview"] > .rc-card .rc-card-sub  { font-size: 11px; }
[data-pm-pane="overview"] > .rc-card .rc-card-body { padding: 8px 10px 10px; }

[data-pm-pane="overview"] .rc-collapsible {
  margin-bottom: 6px;          /* slight visible break between phases */
  border-radius: 8px;
}
[data-pm-pane="overview"] .rc-collapsible:last-child { margin-bottom: 0; }
[data-pm-pane="overview"] .rc-collapsible-head {
  padding: 8px 12px;
  gap: 8px;
  min-height: 36px;
}
[data-pm-pane="overview"] .rc-collapsible-head strong {
  font-size: 12px;
  letter-spacing: 0.01em;
}
[data-pm-pane="overview"] .rc-collapsible-head .rc-badge {
  font-size: 9px;
  padding: 2px 7px;
}
[data-pm-pane="overview"] .rc-collapsible-body {
  padding: 2px 10px 8px 36px;  /* indent under the chevron, less vertical waste */
  background: var(--card-3);
}
[data-pm-pane="overview"] .rc-task-row {
  padding: 6px 8px;
  font-size: 12px;
}
[data-pm-pane="overview"] .rc-task-row + .rc-task-row { margin-top: 1px; }
[data-pm-pane="overview"] .rc-task-row .rc-badge { font-size: 9px; padding: 2px 6px; }
[data-pm-pane="overview"] .rc-task-row .rc-task-due { font-size: 10px; }
[data-pm-pane="overview"] .rc-task-row .rc-task-owner { font-size: 11px; gap: 4px; }
[data-pm-pane="overview"] .rc-task-row .rc-task-owner::before {
  width: 18px; height: 18px; font-size: 9px;
}
[data-pm-pane="overview"] .rc-pm-empty-row { padding: 4px 0; font-size: 11px; }

/* === PM Detail panels (in-page tabbed views) === */

.rc-pm-panel { display: block; }
.rc-pm-panel[hidden] { display: none; }

/* Overview pane: the legacy <section> children (meta strip + Phases card +
   Team accordion etc.) stay in the DOM so detail.js's setText/data-field
   writes don't error, but they're visually hidden in favor of the
   exec-overview iframe injected by the inline script in detail.html.
   The injector's JS-based `c.style.display = 'none'` was racy under some
   load orders (legacy content briefly painted), so this CSS rule is the
   source of truth — !important so it beats any inline style swing. */
.rc-pm-panel[data-pm-pane="overview"] > section {
  display: none !important;
}

.rc-pm-panel-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rc-pm-panel-heading {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0;
}
.rc-pm-panel-heading h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: 0.02em;
}
.rc-pm-panel-heading p {
  margin: 0;
  font-size: 11px;
  color: var(--fg-dim);
  line-height: 1.3;
}
.rc-pm-panel-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rc-pm-panel-actions .rc-chip-row { margin: 0; }
.rc-pm-panel-actions .rc-chip-row .rc-btn { padding: 4px 10px; font-size: 10px; }
/* PM detail Variant C header (locked 2026-05-28).
 * Title + subtitle inline on one row, smaller fonts, tight padding.
 * Sticky-stack total ≈ 120px (down from ~210px original). The kanban /
 * Gantt / Drawings panels get back ~90px of vertical real estate. */
body[data-dashboard-page="pm-detail"] .rc-tabs-u { margin-bottom: 2px; }
body[data-dashboard-page="pm-detail"] .rc-page-head {
	margin-bottom: 0;
	display: flex;
	align-items: baseline;
	gap: 18px;
	flex-wrap: wrap;
}
/* Sticky-header bleed fix: .rc-content's 24px top padding sat ABOVE the sticky
   header (which pins at top:0 of the padding box), leaving a transparent strip
   between the topbar and the header that scrolled board content peeked through.
   Move that 24px from the scrollport padding INTO the header itself, so the
   header's opaque var(--bg) background fills the strip and pins flush under the
   topbar. Net visual position of the breadcrumb is unchanged. */
body[data-dashboard-page="pm-detail"] .rc-content { padding-top: 0; }
body[data-dashboard-page="pm-detail"] .rc-page-head { padding-top: 24px; }
body[data-dashboard-page="pm-detail"] .rc-page-title { font-size: 16px; margin: 0; white-space: nowrap; }
body[data-dashboard-page="pm-detail"] .rc-page-sub {
	font-size: 11px;
	line-height: 1.3;
	margin: 0;
	flex: 1;
	min-width: 0;
}

/* === PM Navigation v3 (project-aware tabs + search + breadcrumb) === */

/* Context crumb on plan/board/gantt/chat when ?id= is present */
.rc-pm-context-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--fg-dim);
}
.rc-pm-context-back, .rc-pm-context-project {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
}
.rc-pm-context-back:hover, .rc-pm-context-project:hover { color: var(--teal-secondary); text-decoration: underline; }
.rc-pm-context-project { color: var(--fg-1); }

/* Toolbar with search + result count */
.rc-pm-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.rc-pm-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 560px;
  min-width: 220px;
}
.rc-pm-search-input {
  flex: 1;
  padding-left: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ADBFD6' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.rc-pm-search-input:focus { border-color: var(--teal); box-shadow: var(--focus-ring); }
.rc-pm-toolbar-meta { display: flex; align-items: center; gap: 8px; color: var(--fg-dim); }

/* No-result state for index */
.rc-pm-empty-state {
  padding: 28px 24px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--card-2);
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-style: italic;
}
.rc-pm-empty-state strong { color: var(--fg-1); font-size: 14px; font-style: normal; }
.rc-pm-empty-state a { color: var(--teal); font-style: normal; }

/* Interactive task rows in the phase tree */
.rc-task-row[role="button"] { cursor: pointer; }
.rc-task-row[role="button"]:hover {
  background: var(--surface-2);
  outline: 1px solid var(--teal-soft);
  outline-offset: -1px;
}
.rc-task-row[role="button"]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

/* Tab bar — improve active state visibility. Exclude the studio pill variant:
   it's a padded button, not an underline tab, so the 12px bottom padding
   (which shoves its label up) and the teal underline bar don't apply. */
.rc-tabs-u .rc-tab-u:not(.rc-tab-u-studio) {
  position: relative;
  padding-bottom: 12px;
}
.rc-tabs-u .rc-tab-u.active:not(.rc-tab-u-studio)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--teal);
}

/* Mobile tweaks for new nav bits */
@media (max-width: 720px) {
  .rc-pm-toolbar { flex-direction: column; align-items: stretch; }
  .rc-pm-search { max-width: 100%; }
  .rc-pm-context-crumb { font-size: 11px; }
}

/* Section tiles (templates) */
.rc-section-tile { display: flex; flex-direction: column; padding: 18px; gap: 8px; text-decoration: none; color: var(--fg-1); transition: border-color .15s, transform .15s; }
.rc-section-tile:hover { border-color: var(--teal); }
.rc-section-tile h2 { margin: 6px 0 0; font-family: var(--font-heading); font-size: 16px; }
.rc-section-tile p { margin: 0; color: var(--fg-3); font-size: 13px; line-height: 1.5; }

/* Mobile/tablet sidebar collapse — applies to every dashboard page.
   Below 820px the persistent sidebar becomes an OFF-CANVAS DRAWER opened by
   the topbar hamburger ([data-toggle-nav]); main content takes the full
   viewport. Previously it was display:none with no way to reopen it, stranding
   tablet-portrait users (#1656). */
@media (max-width: 820px) {
  .rc-app { grid-template-columns: 1fr !important; --rc-nav-w: 0 !important; }
  .rc-topbar .rc-nav-hamburger { display: flex; }
  .rc-side {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 264px; max-width: 84vw; z-index: 250;
    transform: translateX(-100%); transition: transform .25s ease;
    will-change: transform; box-shadow: var(--shadow-lg);
  }
  .rc-app.nav-open .rc-side { transform: translateX(0); }
  .rc-nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 240;
    background: var(--scrim); opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .rc-app.nav-open .rc-nav-scrim { opacity: 1; pointer-events: auto; }
  .rc-main { width: 100% !important; min-width: 0; }
  .rc-content { padding: 16px 14px 60px; }
  .rc-page-head { margin-bottom: 18px; }
  .rc-tabs-u { gap: 12px; margin-bottom: 18px; overflow-x: auto; }
  .rc-stat-strip { flex-direction: column; align-items: stretch; }
  .rc-stat-strip > i { display: none; }
  .rc-card-grid { grid-template-columns: 1fr; }
}

/* Keep every topbar control reachable on phones without allowing the account
   name to consume the remaining Ask Ripple space. */
@media (max-width: 560px) {
  .rc-topbar { gap: 4px; padding: 8px 10px; }
  .rc-tb-right { gap: 0; }
  .rc-tb-user { width: 34px; padding: 2px; justify-content: center; }
  .rc-tb-user .u-name,
  .rc-tb-user > [data-shell-icon] { display: none; }
}

/* Mobile */
@media (max-width: 720px) {
  .rc-wizard-steps { grid-template-columns: 1fr; }
  .rc-wizard-steps li { padding: 8px 10px; font-size: 11px; }
  .rc-task-row { grid-template-columns: auto 1fr; row-gap: 4px; }
  .rc-task-row .rc-task-due, .rc-task-row .rc-task-owner { grid-column: 2 / -1; }
  .rc-task-card-head { grid-template-columns: auto auto 1fr; row-gap: 6px; }
  .rc-task-card-head .rc-task-owner, .rc-task-card-head .rc-task-due { grid-column: 2 / -1; }
  .rc-deflist-row { grid-template-columns: 1fr; gap: 4px; }
  .rc-chat-msg, .rc-chat-confirm { max-width: 100%; }
}

/* ============================================================
 * Ask Ripple — single unified element
 *
 * One <section> lives in the topbar's center slot. Collapsed = just the
 * 38px header row (acts as the trigger). Open = the same header stays put
 * and the body (thread + composer) slides down BELOW it, anchored
 * absolutely so the topbar height never changes.
 *
 * Mounted inside .rc-main so the absolute body inherits the right-of-
 * sidebar coordinate space (viewport center ≠ topbar-slot center).
 *
 * Trigger: window.AskRipple.{open,close,toggle}.
 * z-index 60 — above notification drawer (50), below modals.
 * ============================================================ */
.rc-aichat {
  position: relative;
  /* Fill the (now shrinkable) .rc-aichat-slot instead of a fixed 640px so the
     mounted Ask Ripple bar shrinks with its slot on tablet and never overlaps
     the account cluster (#1656). Still capped at 640px on desktop. */
  width: 100%;
  max-width: 640px;
  min-width: 0;
  margin: 0 auto;
  font-family: var(--font-heading);
  z-index: 61;
}

.rc-aichat-head {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px 7px 12px;
  /* Solid card background (no transparency) so the chat doesn't show
     dashboard content bleeding through. Teal border matches the brand
     accent and is consistent across the head AND body. */
  background: var(--card);
  border: 1px solid var(--teal);
  border-radius: 10px;
  color: var(--fg-1);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .15s ease, border-color .15s ease, border-radius .18s ease;
}
.rc-aichat-head:hover { background: var(--card-2); }
.rc-aichat-head:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.rc-aichat-bug {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rc-aichat-bug img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.rc-aichat-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
  line-height: 1.1;
}
.rc-aichat-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: .01em;
  /* The slot now shrinks with the topbar (#1656), so on a ~390px phone the
     label gets ~42px. Without nowrap it wrapped to two lines and pushed the
     38px head past its slot; .rc-aichat-head has no overflow guard (#1657).
     Never triggers at the 640px desktop width. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-aichat-sub {
  display: none !important;
}

.rc-aichat-head-actions {
  display: none;
  gap: 4px;
  flex-shrink: 0;
}
.rc-aichat[data-state="open"] .rc-aichat-head-actions { display: inline-flex; }
.rc-aichat-iconbtn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
  color: var(--fg-2);
}
.rc-aichat-iconbtn:hover { background: var(--surface-2); color: var(--fg-1); }
/* Significantly larger SVG icons inside the head action buttons — replaces
   the small ⟲ / × text glyphs the user found ambiguous. Box stays 28px so
   the head's 38px height is unaffected. */
.rc-aichat-iconbtn svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rc-aichat-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
  transition: transform .18s ease;
  flex-shrink: 0;
}
.rc-aichat-chev svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rc-aichat[data-state="open"] .rc-aichat-chev { transform: rotate(180deg); color: var(--teal); }

/* Merge the head with the body when open — flatten bottom corners and drop
   the bottom border so the unified element reads as one continuous shape. */
.rc-aichat[data-state="open"] .rc-aichat-head {
  /* When open, head + body share the same solid card background and
     teal border. Bottom border goes transparent so the seam is invisible
     and the unified shape reads as one continuous shell. */
  background: var(--card);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.rc-aichat-body {
  position: absolute;
  top: calc(100% - 1px);  /* overlap the head's bottom border by 1px */
  left: 0; right: 0;
  /* 2/3 of the prior 640px ceiling so the open panel doesn't dominate
     the viewport. Falls back to viewport-fit on shorter screens. */
  height: min(420px, calc(100vh - 120px));
  /* Solid card background — opaque so dashboard content doesn't bleed
     through the chat (per user feedback the prior translucent orange
     was confusing). */
  background: var(--card);
  border: 1px solid var(--teal);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scaleY(0.85);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 60;
}
.rc-aichat[data-state="open"] .rc-aichat-body[hidden] { display: flex; }
.rc-aichat[data-state="open"] .rc-aichat-body {
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}

/* Recent-chats panel — overlays the thread+composer when the history
   icon is toggled on. The flyout body stays sized; the panel occupies
   the same space so we don't reflow when switching modes. */
.rc-aichat-history {
  position: absolute;
  inset: 0;
  background: var(--card);
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.rc-aichat-history[hidden] { display: none; }
.rc-aichat-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.rc-aichat-history-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-1);
}
.rc-aichat-history-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 0;
}
.rc-aichat-history-empty {
  padding: 18px 14px;
  color: var(--fg-2);
  font-size: 13px;
  text-align: center;
}
/* One row per past conversation. Click → switch the WS session. */
.rc-aichat-history-row {
  display: flex;
  flex-direction: column;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-muted, var(--border));
  gap: 2px;
}
.rc-aichat-history-row:hover { background: var(--surface-1); }
.rc-aichat-history-row[data-active="1"] {
  background: var(--surface-2);
}
.rc-aichat-history-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-1);
}
.rc-aichat-history-row-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.rc-aichat-history-row-when {
  color: var(--fg-2);
  font-size: 11px;
  flex: 0 0 auto;
}
.rc-aichat-history-row-meta {
  font-size: 11px;
  color: var(--fg-2);
}

.rc-aichat-composer {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--card-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.rc-aichat-composer-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.rc-aichat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: var(--fg-dim);
}

/* Legacy compat — keep .rc-flyout / .rc-flyout-body selectors functional
 * since the engine's templates and JS still reference them. They alias
 * onto the new panel styles when present in older bits of markup. */
.rc-flyout {
  display: flex;
  flex-direction: column;
}
.rc-flyout-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 0;
}
.rc-flyout-thread {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
}
.rc-flyout-thread .rc-chat-msg {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--card-2);
  border: 1px solid var(--border);
}
.rc-flyout-thread .rc-chat-msg[data-speaker="user"] {
  align-self: flex-end;
  background: var(--teal-subtle);
  border-color: var(--teal-soft);
}
.rc-flyout-thread .rc-chat-msg[data-speaker="system"] {
  align-self: stretch;
  background: var(--surface-2);
  border-style: dashed;
}
.rc-flyout-thread .rc-chat-msg-speaker {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-dim);
  margin-bottom: 4px;
  font-family: var(--font-heading);
}
.rc-flyout-thread .rc-chat-msg-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
  white-space: pre-wrap;
}
/* Blinking caret on the in-progress streamed message (flyout + full-page hub). */
.rc-flyout-thread .rc-chat-msg[data-streaming="1"] .rc-chat-msg-body::after,
.ch-thread .rc-chat-msg[data-streaming="1"] .rc-chat-msg-body::after {
  content: '▍';
  display: inline-block;
  margin-left: 2px;
  color: var(--teal);
  animation: rc-flyout-caret 0.9s steps(1) infinite;
}
@keyframes rc-flyout-caret { 50% { opacity: 0; } }
.rc-flyout-thread .rc-chat-msg-meta {
  margin-top: 6px;
  font-size: 10px;
  color: var(--fg-dim);
}
.rc-flyout-thread .rc-chat-confirm {
  padding: 12px;
  border: 1px solid var(--teal-soft);
  border-radius: 10px;
  background: var(--card-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rc-flyout-thread .rc-chat-confirm-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teal);
}
.rc-flyout-thread .rc-chat-confirm-action {
  margin: 0;
  padding: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--card-2);
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--fg-2);
  overflow-x: auto;
  white-space: pre;
}
.rc-flyout-thread .rc-chat-confirm-meta {
  font-size: 11px;
  color: var(--fg-dim);
}
.rc-flyout-thread .rc-chat-confirm-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rc-flyout-thread .rc-chat-confirm[data-state="confirmed"] {
  border-color: var(--teal);
  background: linear-gradient(180deg, rgba(10,191,188,0.08), var(--card-3));
}
.rc-flyout-thread .rc-chat-confirm[data-state="confirmed"] .rc-chat-confirm-interpretation {
  color: var(--fg-1);
  font-weight: 600;
  font-size: 13px;
}
.rc-flyout-thread .rc-chat-confirm-applied {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-1);
  padding: 4px 0 0;
}
.rc-flyout-thread .rc-chat-confirm-applied-tick {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(10,191,188,0.45);
}
.rc-flyout-thread .rc-chat-confirm-applied-text {
  color: var(--fg-dim);
  font-size: 11px;
}
.rc-flyout-thread .rc-chat-confirm-applied-view {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.rc-flyout-thread .rc-chat-confirm-applied-view:hover { text-decoration: underline; }

.rc-flyout-composer,
.rc-aichat-panel-composer {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--card-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.rc-flyout-composer-row,
.rc-aichat-panel-composer-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.rc-aichat-panel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: var(--fg-dim);
}
.rc-flyout-input {
  flex: 1;
  resize: none;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px;
  background: var(--card-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--fg-1);
  min-height: 38px;
  max-height: 140px;
}
.rc-flyout-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--focus-ring);
}
.rc-flyout-input::placeholder { color: var(--fg-dim); }
.rc-flyout-send {
  flex-shrink: 0;
  height: 38px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rc-flyout-send svg { width: 14px; height: 14px; }
.rc-flyout-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: var(--fg-dim);
}
.rc-flyout-hint { opacity: .7; }

/* ============================================================
 * Agent settings drawer — dev tuning for the Ask Ripple agent.
 * Right-side fixed drawer, ~420px wide. Eventually moves into a proper
 * admin settings page.
 * ============================================================ */
.rc-settings-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 92vw);
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 70;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
}
.rc-settings-drawer[hidden] { display: none; }

.rc-settings-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(247,113,74,0.10), transparent);
}
.rc-settings-title {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--fg-1);
}
.rc-settings-sub {
  font-size: 11px;
  color: var(--fg-dim);
  margin-top: 2px;
}

.rc-settings-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column;
  gap: 22px;
}

.rc-settings-section {
  display: flex; flex-direction: column; gap: 10px;
}
.rc-settings-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.rc-settings-section-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}
.rc-settings-hint { font-size: 11px; color: var(--fg-dim); margin: 0; }
.rc-settings-label {
  font-size: 11px;
  color: var(--fg-dim);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.rc-settings-textarea {
  width: 100%;
  min-height: 140px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--card-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg-1);
  resize: vertical;
}
.rc-settings-textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--focus-ring);
}
.rc-settings-base-prompt {
  margin: 0;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}

.rc-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.rc-settings-field {
  display: flex; flex-direction: column; gap: 6px;
}
.rc-settings-field > span {
  font-size: 11px;
  color: var(--fg-dim);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.rc-settings-field em {
  font-style: normal;
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.rc-settings-field select,
.rc-settings-field input[type="range"] {
  background: var(--card-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 7px 8px;
}
.rc-settings-field input[type="range"] { padding: 0; }

.rc-settings-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.rc-settings-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: var(--fg-2);
  cursor: pointer;
}
.rc-settings-toggle input { margin: 0; }
.rc-settings-toggle code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-2);
  padding: 1px 4px;
  border-radius: 4px;
}

.rc-settings-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}

.rc-settings-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--card-2);
  flex-shrink: 0;
}
.rc-settings-foot-actions { display: flex; gap: 8px; }
.rc-settings-foot-msg {
  font-size: 11px;
  color: var(--fg-dim);
  flex: 1; min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-settings-foot-msg[data-tone="ok"]    { color: var(--teal); }
.rc-settings-foot-msg[data-tone="error"] { color: var(--danger); }

@media (max-width: 768px) {
  .rc-aichat-panel {
    left: 0 !important;
    top: 60px !important;
    transform: none !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    max-height: none !important;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .rc-aichat-panel[data-state="open"] {
    transform: none !important;
  }
}

/* ─── PM Gantt — Format Ribbon ──────────────────────────────────────────── */


.pm-gantt-fmt-ribbon {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: var(--bg-2, #1e293b);
}

.pm-gantt-fmt-section {
  display: flex; align-items: center; gap: 6px;
}
.pm-gantt-fmt-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-dim); white-space: nowrap; min-width: 44px;
}
.pm-gantt-fmt-group {
  display: inline-flex; gap: 1px; background: var(--border); border-radius: 5px; overflow: hidden;
}
.pm-gantt-fmt-btn {
  padding: 3px 9px; font: inherit; font-size: 11px; color: var(--fg-3); font-weight: 500;
  background: var(--bg-3, #131923); border: none; cursor: pointer; white-space: nowrap;
  transition: background 80ms, color 80ms;
}
.pm-gantt-fmt-btn:hover { background: var(--bg-2, #1e293b); color: var(--fg-2); }
.pm-gantt-fmt-btn[aria-pressed="true"] { background: var(--teal); color: var(--bg-1, #0a0f16); font-weight: 700; }

.pm-gantt-fmt-toggles { display: flex; align-items: center; gap: 10px; }
.pm-gantt-fmt-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; flex-shrink: 0; }

.pm-gantt-fmt-reset-btn {
  padding: 3px 10px; font: inherit; font-size: 11px; color: var(--fg-dim);
  background: transparent; border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
  transition: background 80ms, color 80ms;
}
.pm-gantt-fmt-reset-btn:hover { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.4); }

/* ─── Bar style themes (via data-bar-style on .pm-gantt-shell) ─────────── */
/* SVG fill attribute has lowest specificity; CSS class rules override it.  */

.pm-gantt-shell[data-bar-style="critical-red"] .pm-gantt-bar:not(.rollup) { fill: var(--danger); }
.pm-gantt-shell[data-bar-style="dark-slate"] .pm-gantt-bar:not(.rollup) { fill: #475569; }
.pm-gantt-shell[data-bar-style="monochrome"] .pm-gantt-bar:not(.rollup) { fill: #64748b; opacity: 0.75; }

/* Font size custom property — set inline via JS on .pm-gantt-shell */
.pm-gantt-shell { --pm-font-size: 13px; }
.pm-gantt-rail-row,
.pm-gantt-rail-row .col-title { font-size: var(--pm-font-size); }
.pm-gantt-rail-row .col-dur,
.pm-gantt-rail-row .col-start,
.pm-gantt-rail-row .col-finish,
.pm-gantt-rail-row .col-pred,
.pm-gantt-rail-row .col-succ,
.pm-gantt-rail-row .col-id { font-size: calc(var(--pm-font-size) - 2px); }

/* Inside bar label */
.pm-gantt-row-label.inside-label { fill: #fff; font-size: 9.5px; font-weight: 600; pointer-events: none; }

/* ─── Per-task Format Bar Dialog ────────────────────────────────────────── */
.pm-gantt-fmt-bar-dialog {
  position: fixed; z-index: 9990;
  background: var(--bg-2, #1e293b); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  width: 210px; font-size: 12px; color: var(--fg-2);
  user-select: none;
}
.pm-gantt-fmt-bar-dialog[hidden] { display: none; }
.pm-gantt-fmt-bar-dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px 8px; border-bottom: 1px solid var(--border);
}
.pm-gantt-fmt-bar-dialog-title { font-weight: 700; font-size: 12px; color: var(--fg-1); }
.pm-gantt-fmt-bar-dialog-close {
  background: none; border: none; cursor: pointer; font-size: 13px;
  color: var(--fg-dim); padding: 2px 5px; border-radius: 4px; line-height: 1;
}
.pm-gantt-fmt-bar-dialog-close:hover { background: var(--bg-3, #131923); color: var(--fg-1); }
.pm-gantt-fmt-bar-dialog-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pm-gantt-fmt-bar-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--fg-3);
}
.pm-gantt-fmt-bar-color-wrap { display: flex; align-items: center; gap: 6px; }
.pm-gantt-fmt-bar-color-wrap input[type="color"] {
  width: 28px; height: 22px; padding: 1px 2px; border: 1px solid var(--border);
  border-radius: 4px; background: none; cursor: pointer;
}
.pm-gantt-fmt-bar-color-cb { display: flex; align-items: center; gap: 3px; cursor: pointer; font-size: 10px; color: var(--fg-dim); }
.pm-gantt-fmt-bar-dialog-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 12px; border-top: 1px solid var(--border);
}
.pm-gantt-fmt-bar-reset-btn {
  padding: 4px 10px; font: inherit; font-size: 11px; color: var(--fg-dim);
  background: transparent; border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
}
.pm-gantt-fmt-bar-reset-btn:hover { color: #ef4444; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); }
.pm-gantt-fmt-bar-apply-btn {
  padding: 4px 14px; font: inherit; font-size: 11px; font-weight: 600;
  background: var(--teal); color: var(--bg-1, #0a0f16);
  border: none; border-radius: 5px; cursor: pointer;
}
.pm-gantt-fmt-bar-apply-btn:hover { filter: brightness(1.1); }

/* Swatch color picker inside the Format Bar dialog */
.pm-gantt-fmt-bar-dialog-body { padding: 8px 10px; }
.pm-fbd-palette-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg-dim); margin-bottom: 3px;
}
.pm-fbd-std-label { margin-top: 5px; }
.pm-fbd-swatch-row { display: flex; gap: 1px; margin-bottom: 1px; }
.pm-fbd-swatch {
  width: 15px; height: 15px; padding: 0; border: 1px solid rgba(0,0,0,0.25);
  border-radius: 1px; cursor: pointer; flex-shrink: 0;
  box-sizing: border-box; transition: transform 80ms;
}
.pm-fbd-swatch:hover { z-index: 1; position: relative; border-color: var(--fg-1); }
.pm-fbd-swatch.is-active { outline: 2px solid var(--teal, #14b8a6); outline-offset: 1px; z-index: 2; position: relative; }
.pm-fbd-more-row {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
}
.pm-fbd-more-btn {
  font: inherit; font-size: 10px; color: var(--fg-dim); background: none;
  border: none; cursor: pointer; padding: 0; text-align: left;
}
.pm-fbd-more-btn:hover { color: var(--fg-1); text-decoration: underline; }
.pm-fbd-color-hidden { width: 18px; height: 18px; padding: 0; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; }
.pm-fbd-divider { height: 1px; background: var(--border); margin: 6px 0; }



/* ================ WEBSITE STUDIO ================ */
.rc-studio-page-head { margin-bottom: 24px; }
.rc-studio-kicker {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 6px 10px;
  border: 1px solid var(--teal-soft);
  border-radius: 999px;
  background: rgba(10,191,188,0.08);
  color: var(--teal);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Empty state */
.rc-studio-empty {
  display: grid;
  min-height: clamp(520px, 62vh, 720px);
  padding: 38px 0 54px;
  animation: rcStudioIn .42s ease both;
}
.rc-studio-empty[hidden] { display: none; }
.rc-studio-empty-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 520px);
  justify-content: center;
  align-items: center;
  min-height: 100%;
  padding: clamp(34px, 6vw, 76px);
  overflow: hidden;
  border: 1px solid rgba(10,191,188,0.22);
  border-radius: 28px;
  background:
    radial-gradient(circle at 4% 8%, rgba(10,191,188,0.2), transparent 34%),
    radial-gradient(circle at 94% 90%, rgba(234,84,40,0.16), transparent 32%),
    linear-gradient(135deg, rgba(13,24,38,0.94), rgba(8,14,24,0.99) 62%, rgba(16,23,34,0.96));
  box-shadow: 0 32px 100px rgba(0,0,0,0.3);
}
.rc-studio-empty-shell::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255,255,255,0.035);
  border-radius: 22px;
  pointer-events: none;
}
.rc-studio-empty-shell::after {
  content: "";
  position: absolute;
  right: clamp(28px, 8vw, 140px);
  top: 44px;
  width: clamp(180px, 22vw, 360px);
  height: clamp(180px, 22vw, 360px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,191,188,0.14), transparent 68%);
  filter: blur(2px);
  pointer-events: none;
}
.rc-studio-empty-copy,
.rc-studio-empty-card {
  position: relative;
  z-index: 1;
}
.rc-studio-empty-copy {
  display: none;
}
.rc-studio-empty-copy h2 {
  margin: 0 0 18px;
  color: var(--fg-1);
  font-family: var(--font-heading);
  font-size: clamp(44px, 6.2vw, 82px);
  line-height: .9;
  letter-spacing: -.055em;
}
.rc-studio-empty-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--fg-3);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
}
.rc-studio-empty-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 680px;
  margin-top: 34px;
}
.rc-studio-empty-steps div {
  display: grid;
  gap: 9px;
  min-height: 110px;
  padding: 16px;
  align-content: end;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(5,10,18,0.34);
}
.rc-studio-empty-steps strong {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10,191,188,0.14);
  color: var(--teal);
  font-family: var(--font-heading);
  font-size: 12px;
}
.rc-studio-empty-steps span {
  color: var(--fg-2);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
}
.rc-studio-empty-card {
  padding: 18px;
  border: 1px solid rgba(110,132,156,0.24);
  border-radius: 20px;
  background: rgba(7,13,22,0.68);
  box-shadow: 0 24px 70px rgba(0,0,0,0.26);
  backdrop-filter: blur(16px);
}
.rc-studio-empty-foot {
  margin: 4px 0 0;
  color: var(--fg-dim);
  font-size: 11.5px;
  line-height: 1.5;
}

/* The Website Studio empty-state hero is an always-dark cinematic panel
   (fixed dark gradients), but its inner text uses theme vars that invert to
   dark in light mode -> dark-on-dark, unreadable. Pin those texts to the dark
   palette's light values so the panel reads correctly under either theme. */
:root[data-theme="light"] .rc-studio-empty-shell .rc-studio-start-mode { border-color: #2F3C4E; }
:root[data-theme="light"] .rc-studio-empty-shell .rc-studio-start-mode button { color: #ADBFD6; }
:root[data-theme="light"] .rc-studio-empty-shell .rc-studio-start-mode button:hover,
:root[data-theme="light"] .rc-studio-empty-shell .rc-studio-start-mode button.active { color: #fff; }
:root[data-theme="light"] .rc-studio-empty-shell .rc-studio-intake label span { color: #DFE7F4; }
:root[data-theme="light"] .rc-studio-empty-shell .rc-studio-empty-foot { color: #8aa0b8; }
:root[data-theme="light"] .rc-studio-empty-shell .rc-studio-empty-copy h2 { color: #fff; }
:root[data-theme="light"] .rc-studio-empty-shell .rc-studio-empty-copy p,
:root[data-theme="light"] .rc-studio-empty-shell .rc-studio-empty-steps span { color: #DFE7F4; }

.rc-studio-intake {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
}
.rc-studio-intake label { display: grid; gap: 7px; }
.rc-studio-intake label span { color: var(--fg-2); font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.rc-studio-start-mode {
  position: relative;
  z-index: 4;
  display: flex;
  gap: 24px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  pointer-events: auto;
}
.rc-studio-start-mode button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--fg-3);
  padding: 10px 2px;
  margin-bottom: -1px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color .14s, border-color .14s;
  pointer-events: auto;
}
.rc-studio-start-mode button:hover { color: var(--fg-1); }
.rc-studio-start-mode button.active {
  color: var(--fg-1);
  background: transparent;
  border-bottom-color: var(--teal);
  box-shadow: none;
  font-weight: 700;
}
.rc-studio-cta { width: 100%; justify-content: center; }
.rc-studio-import-mode {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.rc-studio-import-mode[hidden] { display: none; }
.rc-studio-import-mode legend {
  margin-bottom: 2px;
  color: var(--fg-2);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rc-studio-import-mode label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
}
.rc-studio-import-mode input { margin-top: 3px; accent-color: var(--teal, #0abfbc); }
.rc-studio-import-mode strong {
  display: block;
  color: var(--fg-1);
  font-size: 12px;
  line-height: 1.35;
}
.rc-studio-import-mode small {
  display: block;
  margin-top: 2px;
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.45;
}

/* Project workspace */
.rc-studio-project {
  display: grid;
  gap: 16px;
  animation: rcStudioIn .42s ease both;
}
.rc-studio-project[hidden] { display: none; }
.rc-studio-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.rc-studio-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-1);
}
.rc-studio-stage span {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--fg-dim);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
}
.rc-studio-stage strong { color: var(--fg-1); font-family: var(--font-heading); font-size: 13px; }
.rc-studio-stage em { color: var(--fg-dim); font-style: normal; font-size: 11px; line-height: 1.4; }
.rc-studio-stage.done { border-color: rgba(10,191,188,0.32); }
.rc-studio-stage.done span { background: var(--teal-subtle); color: var(--teal); }
.rc-studio-stage.active { border-color: var(--teal); background: linear-gradient(140deg, rgba(10,191,188,0.14), rgba(10,191,188,0.04)); }
.rc-studio-stage.active span { background: var(--teal); color: #fff; }

/* Preview card */
.rc-studio-preview-card .rc-card-body { display: grid; gap: 14px; }
.rc-studio-preview-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}
.rc-studio-preview-id { min-width: 0; display: grid; gap: 6px; }
.rc-studio-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rc-studio-preview-url {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid rgba(10,191,188,0.28);
  border-radius: 10px;
  background: rgba(10,191,188,0.06);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
  letter-spacing: -.005em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.rc-studio-preview-url:hover { border-color: var(--teal); background: rgba(10,191,188,0.1); }
.rc-studio-preview-url.pending {
  color: var(--fg-dim);
  border-style: dashed;
  background: transparent;
  cursor: default;
  pointer-events: none;
}
.rc-studio-preview-source {
  color: var(--fg-dim);
  font-size: 11.5px;
  letter-spacing: .01em;
}
.rc-studio-preview-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Step tag */
.rc-studio-step-tag {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(10,191,188,0.12);
  color: var(--teal, #0abfbc);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Pages card */
.rc-studio-pages-card .rc-card-head {
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.rc-studio-pages-toolbar {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rc-studio-pages-toolbar .rc-chip { font-size: 11px; padding: 5px 10px; }
.rc-studio-pages-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 4px;
  color: var(--fg-dim);
  font-size: 11.5px;
  letter-spacing: .01em;
}
.rc-studio-legend-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
}
.rc-studio-legend-dot.lander { background: rgba(10,191,188,0.72); box-shadow: 0 0 12px rgba(10,191,188,0.55); }
.rc-studio-legend-dot.standalone { background: transparent; border: 1.5px dashed rgba(10,191,188,0.7); }
.rc-studio-legend-dot.off { background: rgba(110,132,156,0.35); }
.rc-studio-pages-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.rc-studio-pages-count {
  font-size: 12px;
  color: var(--fg-3);
}
.rc-studio-pages-count strong {
  color: var(--fg-1);
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0 2px;
}
.rc-studio-pages-count span { color: var(--fg-dim); }
.rc-studio-pages-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Generating banner */
.rc-studio-generating {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 14px 16px;
  align-items: center;
  border: 1px solid rgba(10,191,188,0.32);
  border-radius: 14px;
  background:
    radial-gradient(circle at 10% 0%, rgba(10,191,188,0.18), transparent 32%),
    linear-gradient(135deg, rgba(10,191,188,0.1), rgba(10,191,188,0.02));
}
.rc-studio-generating[hidden] { display: none; }
.rc-studio-generating > span {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(10,191,188,0.22);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: rcStudioSpin .8s linear infinite;
}
.rc-studio-generating strong { display: block; color: var(--fg-1); font-family: var(--font-heading); font-size: 13px; }
.rc-studio-generating p { margin: 2px 0 0; color: var(--fg-3); font-size: 11.5px; line-height: 1.5; }
.rc-studio-project[data-setup-locked="true"] [data-mode-content="import"] {
  opacity: .72;
}
.rc-studio-project[data-setup-locked="true"] [data-mode-content="import"] .rc-studio-generating {
  opacity: 1;
}

/* Chat card */
.rc-studio-chat-card .rc-card-body { display: grid; gap: 14px; }
.rc-studio-chat-log {
  display: grid;
  gap: 8px;
  align-content: start;
  max-height: 320px;
  overflow: auto;
  padding: 2px 2px 4px;
  background: transparent;
}
.rc-studio-chat-message {
  max-width: 86%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.rc-studio-chat-message.agent {
  justify-self: start;
  background: rgba(10,191,188,0.10);
  border-color: rgba(10,191,188,0.26);
}
.rc-studio-chat-message.user {
  justify-self: end;
  border-color: rgba(234,84,40,0.32);
  background: rgba(234,84,40,0.12);
  color: var(--fg-1);
}
.rc-studio-chat-input { min-height: 60px; max-height: 200px; resize: vertical; font-size: 13px; line-height: 1.55; padding: 12px 14px; }
.rc-studio-brief-status { min-height: 16px; color: var(--fg-dim); font-size: 11.5px; }
.rc-studio-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-studio-chip-row .rc-chip { cursor: pointer; }
.rc-studio-chat-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.rc-studio-chat-actions [data-studio-action="generate-preview"] {
  min-width: 150px;
  justify-content: center;
}

/* Approval card */
.rc-studio-approval {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
}
.rc-studio-approval strong { color: var(--fg-1); font-family: var(--font-heading); font-size: 13px; }
.rc-studio-approval span { color: var(--fg-3); font-size: 12px; line-height: 1.5; }
.rc-studio-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Collapsible sections */
.rc-studio-collapse {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-1);
  overflow: hidden;
}
.rc-studio-collapse[open] { border-color: rgba(10,191,188,0.28); }
.rc-studio-collapse summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.rc-studio-collapse summary::-webkit-details-marker { display: none; }
.rc-studio-collapse-title {
  color: var(--fg-1);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
}
.rc-studio-collapse-sub {
  color: var(--fg-dim);
  font-size: 11.5px;
  line-height: 1.45;
}
.rc-studio-collapse-chev {
  color: var(--fg-dim);
  transition: transform .2s;
}
.rc-studio-collapse[open] .rc-studio-collapse-chev { transform: rotate(180deg); color: var(--teal); }
.rc-studio-collapse-body {
  padding: 4px 18px 18px;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--border);
}
.rc-studio-collapse-foot { display: flex; justify-content: flex-end; }

/* Page list */
.rc-studio-page-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.rc-studio-page-row {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 4%, rgba(10,191,188,0.08), transparent 38%),
    linear-gradient(145deg, var(--card), var(--card-3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: border-color .16s, background .16s, transform .16s, opacity .16s;
  cursor: pointer;
  outline: none;
}
.rc-studio-page-row:hover { border-color: rgba(10,191,188,0.45); }
.rc-studio-page-row:focus-visible { box-shadow: 0 0 0 2px rgba(10,191,188,0.45); }
.rc-studio-page-row.selected {
  border-color: rgba(10,191,188,0.55);
  background:
    radial-gradient(circle at 20% 2%, rgba(10,191,188,0.20), transparent 42%),
    linear-gradient(145deg, var(--card), var(--card-3));
}
.rc-studio-page-row.standalone { border-style: dashed; border-color: rgba(10,191,188,0.55); }
.rc-studio-page-row.off { opacity: 0.58; }
.rc-studio-page-row.off:hover { opacity: 0.85; }
.rc-studio-page-row-head {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
}
.rc-studio-page-title { display: grid; gap: 1px; min-width: 0; }
.rc-studio-page-title strong {
  color: var(--fg-1);
  font-family: var(--font-heading);
  font-size: 13.5px;
  letter-spacing: .01em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rc-studio-page-title small {
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .02em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rc-studio-page-score {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(10,191,188,0.10);
  color: var(--teal, #0abfbc);
  border: 1px solid rgba(10,191,188,0.25);
  white-space: nowrap;
}
.rc-studio-page-row.off .rc-studio-page-score {
  background: rgba(110,132,156,0.08);
  color: var(--fg-dim);
  border-color: rgba(110,132,156,0.22);
}
.rc-studio-page-note {
  margin: 0;
  color: var(--fg-3);
  font-size: 11.5px;
  line-height: 1.5;
}
.rc-studio-page-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rc-studio-page-row .rc-check {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rc-studio-page-row .rc-check .box { display: none; }
.rc-studio-page-row .rc-check.on {
  border-color: var(--teal, #0abfbc);
  background: var(--teal, #0abfbc);
  position: relative;
}
.rc-studio-page-row .rc-check.on::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid #0a1018;
  border-bottom: 2px solid #0a1018;
  transform: rotate(-45deg) translate(1px, -1px);
}
.rc-studio-page-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* Role toggle (segmented control) */
.rc-studio-role-toggle {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
}
.rc-studio-role-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--fg-dim);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rc-studio-role-toggle button:hover:not(:disabled) { color: var(--fg-1); }
.rc-studio-role-toggle button:disabled { opacity: .5; cursor: not-allowed; }
.rc-studio-role-toggle button.active {
  background: rgba(10,191,188,0.18);
  color: var(--teal, #0abfbc);
  box-shadow: inset 0 0 0 1px rgba(10,191,188,0.45);
}

/* Version list */
.rc-studio-version-list { display: grid; gap: 8px; }
.rc-studio-version {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--fg-3);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rc-studio-version:hover { border-color: rgba(10,191,188,0.32); }
.rc-studio-version.active { border-color: var(--teal); background: var(--teal-subtle); }
.rc-studio-version strong { color: var(--fg-1); font-family: var(--font-heading); font-size: 12.5px; }
.rc-studio-version span { font-size: 11.5px; line-height: 1.45; }
.rc-studio-version em { color: var(--fg-dim); font-style: normal; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }

/* Activity list */
.rc-studio-event-list { display: grid; }
.rc-studio-event {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.rc-studio-event:last-child { border-bottom: 0; }
.rc-studio-event strong { color: var(--fg-1); font-family: var(--font-heading); font-size: 12px; }
.rc-studio-event span { color: var(--fg-3); font-size: 11.5px; line-height: 1.45; }
.rc-studio-event em { color: var(--fg-dim); font-style: normal; font-family: var(--font-mono); font-size: 10px; }

.rc-btn.disabled,
.rc-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

@keyframes rcStudioIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rcStudioSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
  .rc-studio-empty-shell { grid-template-columns: 1fr; padding: 28px; }
  .rc-studio-empty-copy h2 { font-size: clamp(36px, 9vw, 62px); }
  .rc-studio-stages { grid-template-columns: 1fr; }
  .rc-studio-preview-head { grid-template-columns: 1fr; }
  .rc-studio-preview-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .rc-studio-empty { padding-top: 18px; }
  .rc-studio-empty-shell { padding: 22px; border-radius: 20px; }
  .rc-studio-empty-steps { grid-template-columns: 1fr; }
  .rc-studio-empty-steps div { min-height: auto; }
  .rc-studio-empty-card { padding: 14px; }
  .rc-studio-start-mode { grid-template-columns: 1fr; }
  .rc-studio-collapse summary { padding: 12px 14px; }
  .rc-studio-collapse-body { padding: 4px 14px 14px; }
}

/* CRM person record layout. Tabs row spans center+right so it never wraps; the
   right rail drops to row 2 to align its top with the activity panel; the right
   rail is 25% narrower than the canonical rc-split-3 (340px -> 255px) and the
   reclaimed width widens the inter-column gaps (left/right between sections),
   while the row gap (top/bottom) stays at the rc-split-3 value. */
.rc-record-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--rc-l, 300px)) minmax(0, 1fr) minmax(0, var(--rc-r, 255px));
  /* auto row for the tabs (hug its content); the content row takes the rest.
     Without this, a tall left identity card stretches both rows evenly and
     pushes the tabs / content row down — visible as a huge gap between the
     page header and the activity panel on contacts with lots of fields. */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "left tabs   tabs"
    "left center right";
  column-gap: 40px;
  row-gap: 14px;
  align-items: start;
}
.rc-record-grid > * { min-width: 0; }
.rc-record-grid > .rc-rec-left   { grid-area: left; }
.rc-record-grid > .rc-rec-tabs   { grid-area: tabs; }
.rc-record-grid > .rc-rec-center { grid-area: center; }
.rc-record-grid > .rc-rec-right  { grid-area: right; }
/* First card in the timeline aligns with the right-rail Company card top —
   the controller no longer injects a date-group header, so just zero any
   default top margin on the first child. */
.rc-record-grid > .rc-rec-center > [data-timeline] > :first-child { margin-top: 0 !important; }
@media (max-width: 1280px) {
  .rc-record-grid {
    grid-template-columns: minmax(0, var(--rc-l, 300px)) minmax(0, 1fr);
    grid-template-areas:
      "left tabs"
      "left center"
      "right right";
    column-gap: 28px;
  }
}
@media (max-width: 1100px) {
  .rc-record-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "left"
      "tabs"
      "center"
      "right";
    column-gap: 14px;
  }
}

/* ================ RESPONSIVE DESKTOP LAYOUT HELPERS ================ */
/* Three-column: fixed-left, flex-middle, fixed-right.
   Below 1280px the right panel reflows under the left+middle row.
   Below 1100px everything stacks. */
.rc-split-3 {
  display: grid;
  grid-template-columns: minmax(0, var(--rc-l, 320px)) minmax(0, 1fr) minmax(0, var(--rc-r, 340px));
  gap: 14px;
}
.rc-split-3 > * { min-width: 0; }
@media (max-width: 1280px) {
  .rc-split-3 { grid-template-columns: minmax(0, var(--rc-l, 320px)) minmax(0, 1fr); }
  .rc-split-3 > :nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .rc-split-3 { grid-template-columns: minmax(0, 1fr); }
  .rc-split-3 > * { grid-column: 1 / -1; }
}

/* Two-column with fixed left. Stacks below 1100px. */
.rc-split-2-l {
  display: grid;
  grid-template-columns: minmax(0, var(--rc-l, 320px)) minmax(0, 1fr);
  gap: 14px;
}
.rc-split-2-l > * { min-width: 0; }
@media (max-width: 1100px) {
  .rc-split-2-l { grid-template-columns: minmax(0, 1fr); }
}

/* Two-column with fixed right. Stacks below 1100px. */
.rc-split-2-r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--rc-r, 340px));
  gap: 14px;
}
.rc-split-2-r > * { min-width: 0; }
@media (max-width: 1100px) {
  .rc-split-2-r { grid-template-columns: minmax(0, 1fr); }
}

/* Stat grids: auto-fit at narrower desktop widths so labels don't crush. */
@media (max-width: 1340px) {
  .rc-g-5 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 1180px) {
  .rc-g-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .rc-g-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* Slightly tighter content padding on smaller desktops for breathing room. */
@media (max-width: 1280px) {
  .rc-content { padding: 22px 24px 60px; }
}
@media (max-width: 1100px) {
  .rc-content { padding: 18px 18px 60px; }
}

/* ===== Website Studio · Style Preferences ===== */
.rc-input-sm { padding: 8px 10px; font-size: 12.5px; min-height: 34px; }
.rc-studio-style-card .rc-card-body { padding-top: 0; }
.rc-studio-style-grid { display: grid; gap: 16px; padding-top: 4px; }
.rc-studio-style-field { display: grid; gap: 8px; min-width: 0; }
.rc-studio-style-label {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  color: var(--fg-dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.rc-studio-style-edit {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  appearance: none; background: rgba(10,191,188,0.10); border: 1px solid rgba(10,191,188,0.28);
  color: var(--teal, #0abfbc); border-radius: 6px; padding: 3px 6px;
  cursor: pointer; transition: background .15s, color .15s;
}
.rc-studio-style-edit:hover { background: rgba(10,191,188,0.18); }
.rc-studio-palette-row { display: flex; gap: 4px; }
.rc-studio-swatch {
  display: inline-block; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.rc-studio-swatch.empty {
  background:
    repeating-linear-gradient(45deg, rgba(110,132,156,0.18) 0 4px, transparent 4px 8px);
  border-style: dashed; border-color: rgba(110,132,156,0.32);
}
.rc-studio-palette-name { font-size: 12px; color: var(--fg-2); }
.rc-studio-font-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-studio-font-pill {
  flex: 1 1 140px; display: grid; gap: 4px;
}
.rc-studio-font-pill span {
  font-size: 10.5px; letter-spacing: .04em; color: var(--fg-dim);
  font-family: var(--font-mono);
}
.rc-studio-font-pill select { font-family: var(--font-body); }
.rc-studio-tone-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.rc-studio-tone-row button {
  appearance: none;
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: 9px 8px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--fg-3);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-studio-tone-row button:hover { color: var(--fg-1); border-color: var(--border-strong); }
.rc-studio-tone-row button.active {
  background: var(--teal-soft);
  color: var(--teal);
  border-color: var(--teal);
  font-weight: 600;
}
.rc-studio-design-md-drop {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px dashed rgba(110,132,156,0.44);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
}
.rc-studio-design-md-drop:hover { border-color: rgba(10,191,188,0.48); }
.rc-studio-design-md-drop input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.rc-studio-design-md-drop strong {
  display: block;
  color: var(--fg-1);
  font-size: 12.5px;
  line-height: 1.35;
}
.rc-studio-design-md-drop small {
  display: block;
  margin-top: 3px;
  color: var(--fg-dim);
  font-size: 11.5px;
  line-height: 1.45;
}
.rc-studio-design-md-drop em {
  font-style: normal;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(10,191,188,0.10);
  color: var(--teal, #0abfbc);
  font-size: 11.5px;
  font-weight: 700;
}

/* ===== Palette picker modal ===== */
.rc-studio-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
}
.rc-studio-modal[hidden] { display: none; }
.rc-studio-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(3, 7, 14, 0.65); backdrop-filter: blur(6px);
}
.rc-studio-modal-card {
  position: relative; width: min(880px, 92vw); max-height: 86vh;
  display: grid; grid-template-rows: auto auto 1fr;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(10,191,188,0.10), transparent 38%),
    linear-gradient(160deg, var(--card), var(--card-2));
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.rc-studio-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.rc-studio-modal-head h3 { margin: 0; font-family: var(--font-heading); font-size: 16px; color: var(--fg-1); }
.rc-studio-modal-close {
  appearance: none; background: transparent; border: 1px solid var(--border);
  color: var(--fg-dim); border-radius: 8px; width: 32px; height: 32px;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.rc-studio-modal-close:hover { color: var(--fg-1); border-color: var(--fg-1); }
.rc-studio-modal-tabs {
  display: flex; gap: 24px; padding: 12px 22px 0;
  border-bottom: 1px solid rgba(47,60,78,0.4);
}
.rc-studio-modal-tabs button {
  appearance: none; background: transparent; border: 0;
  padding: 8px 2px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--font-heading); font-size: 14px; font-weight: 500; color: var(--fg-dim); cursor: pointer;
}
.rc-studio-modal-tabs button:hover { color: var(--fg-1); }
.rc-studio-modal-tabs button.active {
  color: var(--fg-1); border-bottom-color: var(--teal, #0abfbc); font-weight: 700;
}
.rc-studio-modal-body {
  padding: 14px 22px 22px;
  overflow-y: auto;
}
.rc-studio-palette-search { margin-bottom: 12px; }
.rc-studio-palette-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.rc-studio-palette-tile {
  appearance: none; background: rgba(255,255,255,0.02);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px; display: grid; gap: 6px; cursor: pointer;
  text-align: left; transition: border-color .15s, transform .15s, background .15s;
}
.rc-studio-palette-tile:hover {
  border-color: rgba(10,191,188,0.55);
  background: rgba(10,191,188,0.05);
}
.rc-studio-palette-tile-swatches {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: 56px; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}
.rc-studio-palette-tile-swatches span { display: block; }
.rc-studio-palette-tile-name {
  font-size: 12px; color: var(--fg-1);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.rc-studio-palette-empty { color: var(--fg-dim); font-size: 12px; padding: 24px 0; text-align: center; }

.rc-studio-palette-custom { display: grid; gap: 14px; }
.rc-studio-palette-custom-sub { margin: 0; color: var(--fg-3); font-size: 12.5px; }
.rc-studio-palette-custom-inputs {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.rc-studio-palette-custom-preview {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: 72px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border);
}
.rc-studio-palette-custom-preview .rc-studio-swatch {
  width: 100%; height: 100%; border-radius: 0;
}
.rc-studio-palette-custom-actions {
  display: flex; align-items: end; gap: 12px; flex-wrap: wrap;
}
.rc-studio-palette-name-input { display: grid; gap: 4px; flex: 1 1 220px; }
.rc-studio-palette-name-input span { font-size: 10.5px; color: var(--fg-dim); letter-spacing: .04em; font-family: var(--font-mono); }
.rc-studio-palette-saved { display: grid; gap: 10px; margin-top: 4px; }
.rc-studio-palette-saved-head { color: var(--fg-dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.rc-studio-palette-saved-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}


/* ===== Website Studio · v2 layout ===== */
.rc-studio-page-head { display: flex; align-items: center; gap: 14px; }
.rc-studio-page-head .rc-page-head-r { margin-left: auto; display: flex; gap: 8px; }
.rc-studio-page-actions[hidden] { display: none; }

/* Stepper */
.rc-studio-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 24px 32px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(10,191,188,0.06), transparent 38%),
    linear-gradient(160deg, var(--card), var(--card-2));
}
.rc-studio-step {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
  color: var(--fg-dim);
}
.rc-studio-step + .rc-studio-step::before {
  content: '';
  position: absolute;
  top: 17px;
  /* Span only the gap between the two circles, not center-to-center. The
     circle is 34px (border-box) → 17px radius; inset each end by 18px so the
     connector stops at the circle edges. Otherwise it runs under the circles
     and shows through the translucent done/active fills. */
  right: calc(50% + 18px);
  left: calc(-50% + 18px);
  height: 2px;
  background: rgba(110,132,156,0.32);
  z-index: 0;
}
.rc-studio-step.active + .rc-studio-step::before,
.rc-studio-step.done + .rc-studio-step::before { background: rgba(10,191,188,0.65); }
.rc-studio-step-num {
  position: relative;
  z-index: 1;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 2px solid rgba(110,132,156,0.45);
  background: var(--bg);
  color: var(--fg-dim);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  /* Tight line box so the heading-font digit optically centers in the circle
     instead of riding high on the font's default leading. */
  line-height: 1;
}
.rc-studio-step.active .rc-studio-step-num {
  border-color: var(--teal, #0abfbc);
  background: var(--teal, #0abfbc);
  color: #0a121d;
  box-shadow: 0 0 22px rgba(10,191,188,0.4);
}
.rc-studio-step.done .rc-studio-step-num {
  border-color: var(--teal, #0abfbc);
  background: rgba(10,191,188,0.18);
  color: var(--teal, #0abfbc);
}
.rc-studio-step.done .rc-studio-step-num span,
.rc-studio-step.done .rc-studio-step-num { font-size: 0; }
/* Absolutely center the checkmark over the whole circle. In the done state the
   badge holds two grid items (the zero-size digit text node + this ::after),
   and grid auto-flow would otherwise stack them into separate rows, shoving
   the check off-center. Taking it out of flow with inset:0 + place-items
   center pins it dead-center regardless of the sibling text node. */
.rc-studio-step.done .rc-studio-step-num::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
}
.rc-studio-step strong {
  margin-top: 4px;
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--fg-1);
  letter-spacing: .01em;
}
.rc-studio-step:not(.active):not(.done) strong { color: var(--fg-2); }
.rc-studio-step em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--fg-dim);
}
.rc-studio-step.active em { color: var(--teal, #0abfbc); }

/* Status row */
.rc-studio-status-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  margin-bottom: 18px;
}
/* Stack below ~1250px: with the 248px sidebar, the two-column row leaves each status
   card ~407px at tablet-landscape (1194), which starved the card's 1fr body to ~30px and
   overflowed its text. Single column gives each card full width. */
@media (max-width: 1250px) {
  .rc-studio-status-row { grid-template-columns: 1fr; }
}
.rc-studio-status-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--card), var(--card-2));
}
.rc-studio-status-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(10,191,188,0.10);
  color: var(--teal, #0abfbc);
}
.rc-studio-status-body { display: grid; gap: 4px; min-width: 0; }
.rc-studio-status-row-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-studio-status-url {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-1);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.rc-studio-status-url:hover { color: var(--teal, #0abfbc); text-decoration: underline; }
.rc-studio-status-meta { font-size: 11.5px; color: var(--fg-dim); }
.rc-studio-status-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.rc-studio-preview-setup-overlay {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: -2px;
  padding: 7px 10px;
  border: 1px dashed rgba(10,191,188,0.48);
  border-radius: 8px;
  background: rgba(10,191,188,0.08);
  color: var(--teal, #0abfbc);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.rc-studio-preview-setup-overlay:hover {
  border-color: var(--teal, #0abfbc);
  background: rgba(10,191,188,0.13);
  color: var(--fg-1);
}
.rc-studio-preview-setup-overlay svg { flex: 0 0 auto; }
.rc-pill {
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-family: var(--font-mono); letter-spacing: .04em;
  background: var(--surface-2);
  color: var(--fg-dim);
  border: 1px solid var(--border);
}
.rc-pill.success { color: var(--teal, #0abfbc); border-color: rgba(10,191,188,0.4); background: rgba(10,191,188,0.10); }
.rc-pill.warn    { color: #f3b945; border-color: rgba(243,185,69,0.35); background: rgba(243,185,69,0.10); }
.rc-pill.live    { color: #4ade80; border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.10); }
.rc-studio-publish-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 18px;
  border-radius: 14px;
  min-width: 220px;
  text-align: left;
}
.rc-studio-publish-cta strong { font-family: var(--font-heading); font-size: 14px; }
.rc-studio-publish-cta span { font-size: 11px; opacity: .85; }
.rc-studio-publish-cta svg { grid-row: 1 / 3; grid-column: 2; }
/* Make the primary CTA fill its column so it matches the preview card height. */
.rc-studio-status-cta { display: flex; align-items: stretch; }
.rc-studio-status-cta .rc-studio-publish-cta { flex: 1; }

/* Main grid with grid-template-areas per mode */
.rc-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
  align-items: start;
}
.rc-studio-grid[data-grid-mode="import"] {
  grid-template-areas:
    "pages"
    "style"
    "chat"
    "review";
  grid-template-rows: auto auto auto;
}
.rc-studio-grid[data-grid-mode="import"] .rc-studio-pages-card  { grid-area: pages; align-self: stretch; }
.rc-studio-grid[data-grid-mode="import"] .rc-studio-chat-card   { grid-area: chat; }
.rc-studio-grid[data-grid-mode="import"] .rc-studio-style-card  { grid-area: style; }
.rc-studio-grid[data-grid-mode="import"] .rc-studio-review-card { grid-area: review; }
.rc-studio-grid[data-grid-mode="import"] .rc-studio-editor-card { display: none; }

.rc-studio-grid[data-grid-mode="editor"] {
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr);
  grid-template-areas:
    "chat  editor"
    "chat  review";
  grid-template-rows: auto 1fr;
  align-items: stretch;
}
.rc-studio-grid[data-grid-mode="editor"] .rc-studio-chat-card   { grid-area: chat; align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
.rc-studio-grid[data-grid-mode="editor"] .rc-studio-chat-card .rc-card-body { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
.rc-studio-grid[data-grid-mode="editor"] .rc-studio-chat-card .rc-studio-chat-log { flex: 1; max-height: none; min-height: 160px; }
.rc-studio-grid[data-grid-mode="editor"] .rc-studio-editor-card { grid-area: editor; align-self: stretch; }
.rc-studio-grid[data-grid-mode="editor"] .rc-studio-review-card { grid-area: review; }
/* Style prefs belong to the scratch guided flow only - not the editor. */
.rc-studio-grid[data-grid-mode="editor"] .rc-studio-style-card  { display: none; }
.rc-studio-grid[data-grid-mode="editor"] .rc-studio-pages-card  { display: none; }

/* Clone projects: the import view is a simple review screen - no page
   organization, style prefs, or site brief. Just the preview + publish header
   and a request-changes box. */
[data-studio-project][data-clone="true"] [data-step="organize"],
[data-studio-project][data-clone="true"] [data-step="style"] { display: none; }
/* Only 3 steps remain (Import, Review, Publish) - spread them evenly. */
[data-studio-project][data-clone="true"] .rc-studio-stepper { grid-template-columns: repeat(3, 1fr); }
[data-studio-project][data-clone="true"] .rc-studio-grid[data-grid-mode="import"] {
  grid-template-areas:
    "chat"
    "review";
}
[data-studio-project][data-clone="true"] .rc-studio-grid[data-grid-mode="import"] .rc-studio-pages-card,
[data-studio-project][data-clone="true"] .rc-studio-grid[data-grid-mode="import"] .rc-studio-style-card { display: none; }
/* Clone review: swap the chat box for the Start over card. */
.rc-studio-startover-card { display: none; }
[data-studio-project][data-clone="true"] .rc-studio-grid[data-grid-mode="import"] .rc-studio-chat-card { display: none; }
[data-studio-project][data-clone="true"] .rc-studio-grid[data-grid-mode="import"] .rc-studio-startover-card { display: block; grid-area: chat; }
.rc-studio-startover-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

@media (max-width: 1100px) {
  .rc-studio-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .rc-studio-grid[data-grid-mode="import"] {
    grid-template-areas:
      "pages"
      "style"
      "chat"
      "review";
  }
  .rc-studio-grid[data-grid-mode="editor"] {
    grid-template-areas:
      "chat"
      "editor"
      "review";
  }
  /* On a single column the chat no longer needs to stretch to a second row. */
  .rc-studio-grid[data-grid-mode="editor"] .rc-studio-chat-card { min-height: 360px; }
}

/* Pages card */
.rc-studio-pages-card > .rc-card-head { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.rc-studio-pages-tabs { display: flex; flex-wrap: wrap; gap: 24px; border-bottom: 1px solid var(--border); }
.rc-studio-pages-tabs button {
  appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 6px 2px; margin-bottom: -1px; border-radius: 0;
  font-family: var(--font-heading); font-size: 14px; font-weight: 500; color: var(--fg-dim); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.rc-studio-pages-tabs button:hover { color: var(--fg-1); }
.rc-studio-pages-tabs button.active {
  background: transparent;
  color: var(--fg-1);
  border-bottom-color: var(--teal, #0abfbc);
  font-weight: 700;
}
.rc-studio-pages-tabs span {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--fg-dim); font-size: 10.5px;
}
.rc-studio-pages-tabs button.active span { background: var(--teal-subtle); color: var(--teal, #0abfbc); }
.rc-studio-pages-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.rc-studio-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.rc-studio-page-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 4%, rgba(10,191,188,0.05), transparent 38%),
    linear-gradient(145deg, var(--card), var(--card-3));
  cursor: default;
  transition: border-color .16s, transform .16s, opacity .16s;
}
.rc-studio-page-card.selected { border-color: rgba(10,191,188,0.5); }
.rc-studio-page-card.off { opacity: 0.7; }
.rc-studio-page-card-head {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 10px;
}
.rc-studio-page-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--fg-2);
}
.rc-studio-page-card.selected .rc-studio-page-icon {
  background: rgba(10,191,188,0.12);
  color: var(--teal, #0abfbc);
}
.rc-studio-page-card-head strong {
  color: var(--fg-1);
  font-family: var(--font-heading);
  font-size: 13.5px;
  letter-spacing: .01em;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.rc-studio-page-delete {
  width: 22px; height: 22px;
  border: 1px solid rgba(234,84,40,0.35);
  border-radius: 6px;
  background: rgba(234,84,40,0.10);
  color: var(--orange);
  cursor: pointer;
  line-height: 1;
}
.rc-studio-page-delete:hover { background: rgba(234,84,40,0.18); }
.rc-studio-page-card .rc-check {
  width: 22px; height: 22px;
  padding: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rc-studio-page-card .rc-check .box { display: none; }
.rc-studio-page-card .rc-check.on {
  border-color: var(--teal, #0abfbc);
  background: var(--teal, #0abfbc);
  position: relative;
}
.rc-studio-page-card .rc-check.on::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid #0a1018;
  border-bottom: 2px solid #0a1018;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* Page thumbnail SVG-style mockup */
.rc-studio-page-thumb {
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    linear-gradient(180deg, var(--card-2), var(--card-3));
  height: 120px;
  overflow: hidden;
}
.rc-studio-thumb {
  width: 100%; height: 100%;
  padding: 8px;
  display: flex;
  align-items: stretch;
}
.rc-studio-thumb-inner {
  display: grid; gap: 4px;
  width: 100%;
  align-content: start;
}
.rc-studio-thumb-bar {
  display: block;
  height: 6px; border-radius: 3px;
  background: var(--surface-3);
}
.rc-studio-thumb-bar.hero { height: 4px; width: 28%; background: rgba(10,191,188,0.55); }
.rc-studio-thumb-bar.title { width: 84%; height: 8px; background: rgba(244,248,251,0.78); }
.rc-studio-thumb-bar.sub { width: 70%; }
.rc-studio-thumb-bar.sub.short { width: 50%; }
.rc-studio-thumb-bar.cta { width: 30%; height: 8px; background: rgba(10,191,188,0.5); border-radius: 4px; }
.rc-studio-thumb-bar.field { height: 6px; width: 100%; background: var(--surface-2); }
.rc-studio-thumb-bar.star { width: 20%; background: rgba(243,185,69,0.7); }
.rc-studio-thumb-bar.text { height: 4px; width: 100%; background: var(--surface-2); }
.rc-studio-thumb-row { display: grid; gap: 4px; }
.rc-studio-thumb-row.feats { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.rc-studio-thumb-row.triple { grid-template-columns: 1fr 1fr 1fr; }
.rc-studio-thumb-row.split { grid-template-columns: 1fr 1fr; }
.rc-studio-thumb-row.list { display: grid; gap: 4px; }
.rc-studio-thumb-row.post { grid-template-columns: 24px 1fr; align-items: center; gap: 6px; }
.rc-studio-thumb-block {
  background: var(--surface-2);
  border-radius: 4px;
  height: 28px;
}
.rc-studio-thumb-block.tall { height: 38px; }
.rc-studio-thumb-block.photo { height: 56px; }
.rc-studio-thumb-block.map { height: 56px; background: rgba(10,191,188,0.16); }
.rc-studio-thumb-block.quote { height: 38px; padding: 6px; display: grid; gap: 3px; align-content: start; }
.rc-studio-thumb-block.text-stack { display: grid; gap: 3px; height: auto; background: transparent; }
.rc-studio-thumb-block.text-stack.tight { gap: 2px; padding: 0; }
.rc-studio-thumb-block.form { display: grid; gap: 4px; height: auto; padding: 4px; background: rgba(110,132,156,0.08); }
.rc-studio-thumb-block.thumb { width: 24px; height: 22px; background: rgba(110,132,156,0.2); border-radius: 4px; }
.rc-studio-thumb-icon {
  width: 8px; height: 8px;
  background: rgba(10,191,188,0.5);
  border-radius: 2px;
  display: block;
  margin: 4px;
}

/* Page role radios */
.rc-studio-page-roles { display: grid; gap: 5px; }
.rc-studio-page-role {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  cursor: pointer;
  font-size: 11.5px;
  color: var(--fg-2);
  transition: border-color .15s, background .15s, color .15s;
}
.rc-studio-page-role input { display: none; }
.rc-studio-page-role-mark {
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  display: grid; place-items: center;
}
.rc-studio-page-role.active {
  border-color: rgba(10,191,188,0.55);
  background: rgba(10,191,188,0.10);
  color: var(--fg-1);
}
.rc-studio-page-role.active .rc-studio-page-role-mark {
  border-color: var(--teal, #0abfbc);
  background: var(--teal, #0abfbc);
  position: relative;
}
.rc-studio-page-role.active .rc-studio-page-role-mark::after {
  content: '';
  width: 8px; height: 5px;
  border-left: 2px solid #0a1018;
  border-bottom: 2px solid #0a1018;
  transform: rotate(-45deg) translate(0px, -1px);
}

/* Pages legend row */
.rc-studio-pages-legend-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.4fr;
  gap: 14px;
  padding: 14px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
@media (max-width: 980px) { .rc-studio-pages-legend-row { grid-template-columns: 1fr 1fr; } }
.rc-studio-legend-item { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: start; }
.rc-studio-legend-item strong { display: block; color: var(--fg-1); font-size: 12px; }
.rc-studio-legend-item small { color: var(--fg-dim); font-size: 11px; line-height: 1.4; }
.rc-studio-legend-tip { display: grid; gap: 2px; }
.rc-studio-legend-tip strong { color: var(--fg-1); font-size: 12px; }
.rc-studio-legend-tip small { color: var(--fg-dim); font-size: 11px; line-height: 1.4; }

/* Chat compose with inline send + attach chip */
.rc-studio-chat-compose { position: relative; display: grid; }
.rc-studio-chat-compose .rc-studio-chat-input { padding-right: 46px; min-height: 60px; }
.rc-studio-chat-send {
  position: absolute; right: 8px; bottom: 8px;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 0;
  background: var(--teal, #0abfbc);
  color: #0a121d;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(10,191,188,0.4);
}
.rc-studio-chat-send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.rc-studio-attach {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(10,191,188,0.4);
  background: rgba(10,191,188,0.06);
  color: var(--teal, #0abfbc);
  font-size: 11.5px;
  width: max-content; max-width: 100%;
}
.rc-studio-attach > span:first-child { color: var(--fg-dim); }

/* Review card */
.rc-studio-review-card .rc-card-head { display: flex; align-items: center; gap: 14px; }
.rc-studio-review-card .rc-card-head > div { flex: 1; }
.rc-studio-review-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.rc-studio-review-thumb {
  height: 80px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--fg-dim);
  font-size: 11px;
  background:
    radial-gradient(circle at 15% 10%, rgba(10,191,188,0.16), transparent 38%),
    linear-gradient(160deg, var(--card), var(--card-2));
  overflow: hidden;
}
.rc-studio-review-info { display: grid; gap: 8px; }
.rc-studio-review-info strong { font-family: var(--font-heading); font-size: 14px; color: var(--fg-1); }
.rc-studio-review-info > span { color: var(--fg-3); font-size: 12px; }
.rc-studio-review-checks {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 4px;
}
.rc-studio-review-checks li {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-dim);
  font-size: 11.5px;
}
.rc-studio-review-checks .rc-studio-review-bullet {
  width: 12px; height: 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  display: inline-block;
  flex-shrink: 0;
}
.rc-studio-review-checks li.done { color: var(--fg-2); }
.rc-studio-review-checks li.done .rc-studio-review-bullet {
  border-color: var(--teal, #0abfbc);
  background: var(--teal, #0abfbc);
  position: relative;
}
.rc-studio-review-checks li.done .rc-studio-review-bullet::after {
  content: '';
  position: absolute; left: 2px; top: 3px;
  width: 6px; height: 3px;
  border-left: 1.5px solid #0a121d;
  border-bottom: 1.5px solid #0a121d;
  transform: rotate(-45deg);
}

/* Bottom row */
.rc-studio-bottom-row {
  display: grid;
  /* Match the editor grid's column split so the gutter lines up vertically. */
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) { .rc-studio-bottom-row { grid-template-columns: 1fr; } }
.rc-studio-link-action {
  appearance: none; background: transparent; border: 0;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--teal, #0abfbc); cursor: pointer;
  font-size: 12px;
}
.rc-studio-link-action:hover { text-decoration: underline; }
.rc-studio-versions-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  justify-content: start;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.rc-studio-version-browser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.rc-studio-version-card {
  display: grid; gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(160deg, var(--card), var(--card-2));
  text-align: left;
  cursor: pointer;
}
.rc-studio-version-card.active { border-color: rgba(10,191,188,0.6); }
.rc-studio-version-card.unavailable { opacity: 0.55; cursor: not-allowed; }
.rc-studio-version-card.unavailable .rc-studio-version-thumb { filter: grayscale(1); }
.rc-studio-version-head { display: flex; align-items: center; justify-content: space-between; }
.rc-studio-version-head strong { font-family: var(--font-heading); font-size: 16px; color: var(--fg-1); }
.rc-studio-version-thumb {
  height: 60px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 15% 10%, rgba(10,191,188,0.16), transparent 38%),
    linear-gradient(160deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
}
.rc-studio-version-foot {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--fg-dim); font-size: 11px;
}
.rc-studio-version-by {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: rgba(10,191,188,0.12);
  color: var(--teal, #0abfbc);
  font-size: 10px; letter-spacing: .04em; font-family: var(--font-mono);
}

/* Activity log */
.rc-studio-event-list { display: grid; gap: 12px; }
.rc-studio-event {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: start;
  font-size: 12px;
}
.rc-studio-event-bullet {
  width: 12px; height: 12px;
  border-radius: 999px;
  background: rgba(110,132,156,0.35);
  margin-top: 4px;
}
.rc-studio-event-bullet.agent { background: rgba(10,191,188,0.7); }
.rc-studio-event-bullet.user { background: rgba(124,92,255,0.7); }
.rc-studio-event-body { display: grid; gap: 2px; min-width: 0; }
.rc-studio-event-body strong { color: var(--fg-1); font-size: 12.5px; font-weight: 600; }
.rc-studio-event-body span { color: var(--fg-dim); font-size: 11.5px; line-height: 1.5; }
.rc-studio-event em { font-style: normal; color: var(--fg-dim); font-size: 11px; white-space: nowrap; }

/* ===== Website Studio · Mode tabs + Editor mode ===== */
.rc-studio-mode-tabs {
  display: inline-flex;
  gap: 24px;
  margin-bottom: 14px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.rc-studio-mode-tabs[hidden] { display: none; }
/* The mode tabs belong to the active-project view. While the empty/intake
   state is showing they must stay hidden, even if the mode toggle logic
   (which runs independently of the intake state) would otherwise reveal them. */
.rc-studio-empty:not([hidden]) ~ .rc-studio-mode-tabs { display: none; }
.rc-studio-mode-tabs button {
  appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 2px; margin-bottom: -1px; border-radius: 0;
  font-family: var(--font-heading); font-size: 14px; font-weight: 500; color: var(--fg-3); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s, border-color .15s;
}
.rc-studio-mode-tabs button:hover { color: var(--fg-1); }
.rc-studio-mode-tabs button.locked { opacity: .62; }
.rc-studio-mode-tabs button.active {
  background: transparent;
  color: var(--fg-1);
  border-bottom-color: var(--teal);
  box-shadow: none;
  font-weight: 700;
}

/* Editor status strip */
.rc-studio-editor-status {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--card), var(--card-2));
}
.rc-studio-editor-status-body { display: grid; gap: 4px; min-width: 0; }
.rc-studio-editor-lock {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px dashed rgba(110,132,156,0.46);
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
}
.rc-studio-editor-lock[hidden] { display: none; }
.rc-studio-editor-lock strong {
  display: block;
  color: var(--fg-1);
  font-family: var(--font-heading);
  font-size: 13px;
}
.rc-studio-editor-lock span {
  display: block;
  margin-top: 2px;
  color: var(--fg-dim);
  font-size: 11.5px;
  line-height: 1.5;
}
.rc-studio-grid[data-editor-locked="true"] .rc-studio-chat-card,
.rc-studio-grid[data-editor-locked="true"] .rc-studio-editor-card {
  opacity: .58;
}

/* Editor card - Edit a page (horizontal scroll strip) */
.rc-studio-editor-card { display: flex; flex-direction: column; min-height: 0; }
.rc-studio-editor-card .rc-card-body {
  padding: 14px 16px;
  display: flex;
  flex: 1;
  min-height: 0;
}
.rc-studio-edit-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  width: 100%;
  align-content: start;
}
/* The dynamic page tiles live in a nested list; contents lets them flow into
   the same responsive grid as the hardcoded "Whole site" tile. */
.rc-studio-edit-list { display: contents; }
.rc-studio-edit-tile {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-content: center;
  min-height: 54px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  color: var(--fg-2);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.rc-studio-edit-tile:hover {
  border-color: var(--teal-strong);
  color: var(--fg-1);
  box-shadow: 0 4px 14px rgba(10,191,188,0.10);
}
.rc-studio-edit-tile.active {
  border-color: var(--teal);
  background: var(--teal-subtle);
  color: var(--fg-1);
  box-shadow: 0 4px 18px rgba(10,191,188,0.16);
}
.rc-studio-edit-tile-icon {
  grid-row: 1 / 3;
  align-self: center;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--fg-3);
  transition: background .15s, color .15s;
}
.rc-studio-edit-tile-icon svg { width: 17px; height: 17px; }
.rc-studio-edit-tile.active .rc-studio-edit-tile-icon {
  background: var(--teal-soft);
  color: var(--teal);
}
.rc-studio-edit-tile-title {
  grid-column: 2; grid-row: 1;
  align-self: end;
  color: var(--fg-1);
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.rc-studio-edit-tile-path {
  grid-column: 2; grid-row: 2;
  align-self: start;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* CRM calendar grid (added 2026-05-21 — Phase 10). The same grid is used
   month-to-month; each cell holds up to 3 event chips + a "+N more" hint. */
/* Reserve the month grid's height (calendar always renders 42 cells = 6 rows)
   so the empty container doesn't grow 0->~600px on hydrate and shove the
   content below it down — that jump was the scheduling CLS 0.27 (#1689). */
.rc-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); min-height: 600px; }
.rc-cal-day { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 100px; padding: 8px 10px; background: var(--card); display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.rc-cal-day-off { background: var(--card-2); color: var(--fg-3); }
.rc-cal-day-today { box-shadow: inset 0 0 0 2px var(--teal); }
.rc-cal-day-selected { background: var(--teal-subtle); }
.rc-cal-day-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--fg-2); }
.rc-cal-day-body { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.rc-cal-day-event { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 6px; border-radius: 4px; background: var(--card-3); color: var(--fg-1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Flex children must truncate, not overlap: the type tag keeps its size and the
   title span shrinks + ellipsizes. Without min-width:0 both boxes collapse below
   their nowrap content and the texts overlap at tablet widths (#1682). */
.rc-cal-day-event > .rc-tag { flex-shrink: 0; }
.rc-cal-day-event > span:not(.rc-tag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rc-cal-day-event[data-source="appointment"] { background: rgba(14,165,233,0.10); }
.rc-cal-day-event[data-source="project_close"] { background: var(--success-soft); }
.rc-cal-day-event[data-source="project_target"] { background: rgba(20,184,166,0.10); }
.rc-cal-day-event[data-source="task"] { background: rgba(234,84,40,0.10); }
.rc-cal-day-event[data-source="quote"] { background: var(--violet-soft); }
.rc-cal-day-event[data-source="invoice"] { background: var(--success-soft); }
.rc-cal-day-more { font-size: 11px; color: var(--fg-3); padding: 1px 6px; }
@media (max-width: 720px) {
  .rc-cal-day { min-height: 64px; padding: 6px 6px; }
  .rc-cal-grid { min-height: 384px; }  /* 6 rows x 64px — keep the CLS reservation in sync */
  .rc-cal-day-event { font-size: 10px; }
}
/* ============================================================================
   EMPTY STATES — Canonical placeholder pattern
   ----------------------------------------------------------------------------
   When a list, card, table, or detail section has no content yet, render the
   placeholder with one of these classes so empty sections visually recede
   behind sections that DO have data. The rule: muted text colour (--fg-3) +
   italic. Headings inside an empty state stay upright to preserve hierarchy.

     .rc-empty-state         block placeholder (card/section body — 24px pad, centered)
     .rc-empty-state-cell    <td colspan> empty row in a table (14px 18px, left-aligned)
     .rc-empty-state-inline  one-liner empty inside a card / drawer row (no padding)

   New code MUST use these classes. Do not introduce a parallel *-empty class
   and do not write inline style="color:var(--fg-dim)" for empty-state copy —
   the empty-state look is a platform convention defined here.
   ========================================================================== */
.rc-empty-state { padding: 24px; text-align: center; color: var(--fg-3); font-style: italic; }
.rc-empty-state strong { display: block; color: var(--fg-1); font-size: 14px; margin-bottom: 4px; font-style: normal; }
.rc-empty-state a { font-style: normal; }

.rc-empty-state-cell { padding: 14px 18px; color: var(--fg-3); font-style: italic; }
.rc-empty-state-cell strong { color: var(--fg-1); font-style: normal; }
.rc-empty-state-cell a { font-style: normal; }

.rc-empty-state-inline { color: var(--fg-3); font-style: italic; }
.rc-empty-state-inline strong { color: var(--fg-1); font-style: normal; }
.rc-empty-state-inline a { font-style: normal; }

/* Aliased orphan classes — historically used as JS naming hooks with no CSS.
   Adopt the canonical muted-italic look so platform-wide consistency holds
   even where the call sites haven't been migrated to .rc-empty-state. */
.pm-media-empty,
.pm-media-empty-title,
.fin-settings-empty,
.eg-empty,
.dwg-info-row,
.pmtu-empty,
.drawer-empty,
.ac-empty {
  color: var(--fg-3);
  font-style: italic;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-body {
  display: grid;
  gap: 16px;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-summary strong {
  color: var(--fg-1);
  font-family: var(--font-heading);
  font-size: 13px;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-summary span {
  color: var(--fg-3);
  font-size: 12px;
  text-align: right;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-list {
  display: grid;
  gap: 12px;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-card.is-approved {
  border-color: rgba(20, 184, 166, 0.5);
  box-shadow: inset 3px 0 0 var(--accent);
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-card.is-dismissed {
  opacity: 0.72;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-card.is-deferred {
  border-color: rgba(148, 163, 184, 0.35);
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-card-main {
  min-width: 0;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

/* The card title is <h3> (one level under the panel's <h2>) for a valid heading
   order. `[data-field="title"]` is carried only to out-specify the skin's
   `.rc-card h3` (20px), which would otherwise enlarge it. */
body[data-dashboard-page="seo.pending"] .rc-seo-pending-card h3[data-field="title"] {
  margin: 0 0 6px;
  color: var(--fg-1);
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-card p {
  margin: 0;
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.5;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-evidence span {
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--fg-3);
  font-size: 11px;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-decisions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

body[data-dashboard-page="seo.pending"] .rc-seo-pending-decisions .rc-btn.is-selected {
  border-color: var(--accent);
  background: rgba(20, 184, 166, 0.15);
  color: var(--accent);
}

@media (max-width: 860px) {
  body[data-dashboard-page="seo.pending"] .rc-seo-pending-summary,
  body[data-dashboard-page="seo.pending"] .rc-seo-pending-card {
    grid-template-columns: 1fr;
  }
  body[data-dashboard-page="seo.pending"] .rc-seo-pending-summary {
    display: grid;
  }
  body[data-dashboard-page="seo.pending"] .rc-seo-pending-summary span {
    text-align: left;
  }
  body[data-dashboard-page="seo.pending"] .rc-seo-pending-decisions {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   CRM — layout tightening
   Scoped to body[data-dashboard-page^="crm"] so it cannot leak into
   PM, estimates, productivity, receptionist, dev-projects, or settings.
   Pages covered: crm-pipeline, crm-companies, crm-people,
   crm-pipelines-settings, crm-company-detail, crm-person-detail.
   ========================================================================== */

/* Vertical rhythm: one flex column with consistent gap removes the 84px
   dead stripe between title and content, and gives detail-page sibling
   cards proper breathing room (they previously butted edge-to-edge). */
body[data-dashboard-page^="crm"] #dashboard-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body[data-dashboard-page^="crm"] .rc-page-head { margin-bottom: 0; }
body[data-dashboard-page^="crm"] .rc-tabs-u    { margin-bottom: 0; }

/* Card-head densification: list-page cards function as toolbars, so the
   chunky 14×18 padding + 36px icon read as a second header. Bring icon
   and type down to toolbar weight; keep the structure for consistency
   with the detail pages. */
body[data-dashboard-page^="crm"] .rc-card-head {
  padding: 12px 14px;
  align-items: center;
}
body[data-dashboard-page^="crm"] .rc-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
body[data-dashboard-page^="crm"] .rc-card-icon svg { width: 14px; height: 14px; }
body[data-dashboard-page^="crm"] .rc-card-title { font-size: 13px; }
body[data-dashboard-page^="crm"] .rc-card-sub   { font-size: 11px; line-height: 1.4; }

/* Table density: ~10% row-height reduction for data-list scannability,
   plus the 14px horizontal cell padding now visually aligns past the
   card border + 1px (was indistinguishable before). */
body[data-dashboard-page^="crm"] .rc-table th { padding: 14px 16px; }
body[data-dashboard-page^="crm"] .rc-table td { padding: 16px; }

/* CRM detail: the linked company value (Person -> Company) reads as a quiet
   teal link. The per-row "Open" buttons were removed from the Companies and
   People lists; the row itself is the click target now (rc-contact-table sets
   the pointer cursor, the controllers wire the row click). */
body[data-dashboard-page^="crm"] a[data-field="company-link"][href] strong {
  color: var(--teal);
  transition: color .15s;
}
body[data-dashboard-page^="crm"] a[data-field="company-link"][href]:hover strong {
  text-decoration: underline;
}

/* Pipeline kanban: scale to N stages (3–8) rather than locking at 4
   columns. min 220 keeps cards readable; auto-fill prevents wide-screen
   stretch from blowing one column too tall. */
body[data-dashboard-page="crm-pipeline"] .rc-kanban {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
body[data-dashboard-page="crm-pipeline"] .rc-kanban-col {
  padding: 10px;
  border-radius: 10px;
}
body[data-dashboard-page="crm-pipeline"] .rc-kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 4px 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
body[data-dashboard-page="crm-pipeline"] .rc-kanban-col-head strong {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
body[data-dashboard-page="crm-pipeline"] .rc-kanban-card { padding: 10px; }

/* Terminal Won/Lost columns: badge sits next to the count on the right
   (title keeps the left edge) and the column carries a colored top accent —
   the stage's configured color when set, else the semantic won/lost tone. */
body[data-dashboard-page="crm-pipeline"] .rc-kanban-col-head [data-field="title"] { margin-right: auto; }
body[data-dashboard-page="crm-pipeline"] .rc-kanban-col.rc-crm-col-won {
  border-top: 3px solid var(--stage-accent, var(--success));
}
body[data-dashboard-page="crm-pipeline"] .rc-kanban-col.rc-crm-col-lost {
  border-top: 3px solid var(--stage-accent, var(--danger));
}

/* Pipeline empty state: a centered teal-tinted block that fills the
   card body instead of collapsing to a 10px bar when the seed has no
   deals yet. */
body[data-dashboard-page="crm-pipeline"] .rc-empty-state {
  padding: 56px 24px;
  border-radius: 10px;
  background: var(--surface-1);
  border: 1px dashed var(--border);
}
body[data-dashboard-page="crm-pipeline"] .rc-empty-state strong { font-size: 15px; }
body[data-dashboard-page="crm-pipeline"] .rc-empty-state p { margin: 6px 0 0; font-size: 13px; max-width: 380px; margin-left: auto; margin-right: auto; }

/* Detail pages: the page-head right action group hugs right; pair the
   buttons with a small gap and let them stay aligned with the title
   baseline rather than flex-start. */
body[data-dashboard-page="crm-company-detail"] .rc-page-head,
body[data-dashboard-page="crm-person-detail"]  .rc-page-head { align-items: center; margin-bottom: 24px; }

/* Detail pages stack 2–3 sections vertically. The shared CRM rule above
   zeroes .rc-page-head margin (list pages butt the tab strip against the
   title) and .rc-card has no sibling margin, so without this the cards
   sit flush against the title and each other. Use flex+gap on the state
   container — keeps rhythm in one place rather than scattering margins. */
body[data-dashboard-page="crm-company-detail"] [data-state-view="ready"],
body[data-dashboard-page="crm-person-detail"]  [data-state-view="ready"] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Form-grid balance on detail pages: gap up slightly so long address
   strings and lifetime-value figures don't sit on top of their labels. */
body[data-dashboard-page="crm-company-detail"] .rc-form-grid,
body[data-dashboard-page="crm-person-detail"]  .rc-form-grid {
  gap: 14px 24px;
}

/* CRM import review */
body[data-dashboard-page="crm-imports"] .rc-crm-import-shell {
  display: grid;
  gap: 16px;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-drop-card .rc-card-body {
  display: grid;
  gap: 12px;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-drop {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 132px;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--fg-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-drop:hover,
body[data-dashboard-page="crm-imports"] .rc-crm-import-drop.is-over {
  border-color: rgba(10,191,188,0.55);
  background: var(--teal-subtle);
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-drop strong {
  color: var(--fg-1);
  font-size: 14px;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-drop span,
body[data-dashboard-page="crm-imports"] .rc-crm-import-status,
body[data-dashboard-page="crm-imports"] .rc-crm-import-muted {
  color: var(--fg-3);
  font-size: 12px;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-review-head {
  justify-content: space-between;
  gap: 16px;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-table {
  min-width: 1040px;
  table-layout: fixed;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-table th:first-child,
body[data-dashboard-page="crm-imports"] .rc-crm-import-table td:first-child {
  width: 62px;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-table th:nth-child(2),
body[data-dashboard-page="crm-imports"] .rc-crm-import-table td:nth-child(2) {
  width: 23%;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-table th:nth-child(3),
body[data-dashboard-page="crm-imports"] .rc-crm-import-table td:nth-child(3),
body[data-dashboard-page="crm-imports"] .rc-crm-import-table th:nth-child(4),
body[data-dashboard-page="crm-imports"] .rc-crm-import-table td:nth-child(4) {
  width: 20%;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-table th:nth-child(5),
body[data-dashboard-page="crm-imports"] .rc-crm-import-table td:nth-child(5) {
  width: 21%;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-table th:nth-child(6),
body[data-dashboard-page="crm-imports"] .rc-crm-import-table td:nth-child(6) {
  width: 92px;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-table td {
  vertical-align: top;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-select,
body[data-dashboard-page="crm-imports"] .rc-crm-import-target,
body[data-dashboard-page="crm-imports"] .rc-crm-import-role-input {
  min-height: 34px;
  width: 100%;
  margin-bottom: 8px;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-match {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  margin-bottom: 8px;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-inline-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 8px;
  color: var(--fg-2);
  font-size: 12px;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-source-company,
body[data-dashboard-page="crm-imports"] .rc-crm-import-ai-note {
  margin-top: 8px;
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.4;
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-source-company span {
  color: var(--fg-dim);
}
body[data-dashboard-page="crm-imports"] .rc-crm-import-ai-note {
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-1);
}

/* ---- CRM mobile (≤ 760px) ---- */
@media (max-width: 760px) {
  body[data-dashboard-page^="crm"] #dashboard-page { gap: 12px; }

  /* Title block scales down so the cramped right-of-sidebar column on
     small screens still reads as a hierarchy, not a stack of equal-weight
     bricks. */
  body[data-dashboard-page^="crm"] .rc-page-title { font-size: 21px; }
  body[data-dashboard-page^="crm"] .rc-page-sub   { font-size: 12px; line-height: 1.5; }

  /* Tabs become a single-line horizontal scroller — 4 stacked tab rows
     wasted ~140px of vertical space on every CRM page. */
  body[data-dashboard-page^="crm"] .rc-tabs-u {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
    margin-bottom: 0;
    padding-bottom: 0;
    scrollbar-width: none;
    /* Don't pin tabs on mobile — sticky inside a scroller competes with
       the body scroll and creates jitter under iOS Safari. */
    position: static;
  }
  body[data-dashboard-page^="crm"] .rc-tabs-u::-webkit-scrollbar { display: none; }
  body[data-dashboard-page^="crm"] .rc-tab-u { padding: 10px 0; flex: 0 0 auto; }

  /* Card-head wraps into a tight stack: title row first, search +
     action row underneath with the search input filling. */
  body[data-dashboard-page^="crm"] .rc-card-head { padding: 10px 12px; gap: 10px; }
  body[data-dashboard-page^="crm"] .rc-card-body { padding: 12px 14px; }
  body[data-dashboard-page^="crm"] .rc-card-icon { width: 24px; height: 24px; border-radius: 6px; }
  body[data-dashboard-page^="crm"] .rc-card-icon svg { width: 12px; height: 12px; }

  /* Tables: shave horizontal padding so columns don't immediately
     trigger horizontal scroll on a 320px content area. */
  body[data-dashboard-page^="crm"] .rc-table th { padding: 8px 10px; font-size: 9px; }
  body[data-dashboard-page^="crm"] .rc-table td { padding: 9px 10px; font-size: 12px; }
}

/*
 * CRM pipeline card layout — concise, scannable, drag-affordant.
 *   [⋮⋮ handle]  Deal title (link → project detail)        $amount
 *                Company name (link → company detail)
 *                Closes Jun 4
 * Scoped to body[data-dashboard-page^="crm"] so it cannot leak into the
 * PM kanban which uses the same .rc-kanban-card class with denser styling.
 */
body[data-dashboard-page^="crm"] .rc-crm-card { padding: 10px 12px; position: relative; cursor: grab; }
body[data-dashboard-page^="crm"] .rc-crm-card:active { cursor: grabbing; }
/* View-only roles: board is non-draggable (Sortable not initialized in
   pipeline.js), so drop the grab affordance and show a default cursor. */
body[data-dashboard-page^="crm"] .rc-crm-readonly .rc-crm-card,
body[data-dashboard-page^="crm"] .rc-crm-readonly .rc-crm-card:active { cursor: default; }
body[data-dashboard-page^="crm"] .rc-crm-card > * { margin: 0; }
body[data-dashboard-page^="crm"] .rc-crm-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
body[data-dashboard-page^="crm"] .rc-crm-card-title {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
body[data-dashboard-page^="crm"] .rc-crm-card-title strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1);
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-dashboard-page^="crm"] .rc-crm-card-title:hover strong { text-decoration: underline; }
body[data-dashboard-page^="crm"] .rc-crm-card-amount {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
body[data-dashboard-page^="crm"] .rc-crm-card-company {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--fg-dim);
  text-decoration: none;
}
body[data-dashboard-page^="crm"] .rc-crm-card-company:hover {
  color: var(--accent, var(--fg-1));
  text-decoration: underline;
}
body[data-dashboard-page^="crm"] .rc-crm-card-due {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--fg-dim);
}
body[data-dashboard-page^="crm"] .rc-crm-card-due:empty { display: none; }

/* ============================================================
   #12 — Two-pane task drawer (feature/pm-teamops-fixes).
   The drawer is a centered modal (panel already up to 960px wide). Split
   the body into a scrolling details column (left) + a conversation rail
   (right) holding Comments + Recent activity, with the composer pinned
   under the comment list — Monday-style. Reuses the existing comment
   engine + every data-pm-drawer-* hook (querySelector finds them at any
   nesting), so only the layout changes. Lives in app.css because the
   drawer is shared across plan / board / detail pages.
   ============================================================ */
.pm-task-drawer-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  padding: 0;
  overflow: hidden;
  min-height: 0;
}
.pm-task-drawer-main {
  overflow-y: auto;
  padding: 16px 20px 24px;
  min-height: 0;
}
.pm-task-drawer-side {
  display: flex; flex-direction: column; min-height: 0;
  overflow-y: auto;                 /* laptop-fit: the comments column scrolls as one */
  border-left: 1px solid var(--border, #1c2530);
  background: var(--bg-2, #131923);
}
/* Laptop-fit (2026-07-06): a fixed-height column squished the thread to a ~28px sliver
   on short screens. Now the whole side scrolls, the mounted thread flows at its natural
   height, and the composer sticks to the foot so it stays reachable. */
.pm-task-drawer-side > [data-pm-drawer-comments-section] {
  display: flex; flex-direction: column; min-height: 0; flex: 0 0 auto;
  margin: 0; padding: 14px 16px 12px;
}
.pm-task-drawer-side > [data-pm-drawer-comments-section] > h4 { flex: 0 0 auto; }
/* The mounted comment thread (.pm-ct) in the DRAWER only — the project tickler keeps its
   own internal-scroll layout, so these are scoped to .pm-task-drawer-side. */
.pm-task-drawer-side .pm-tk-body { flex: 0 0 auto; overflow: visible; }
.pm-task-drawer-side .pm-tk-composer { position: sticky; bottom: 0; box-shadow: 0 -7px 14px rgba(0, 0, 0, .14); }
/* Legacy (pre-.pm-ct) comment elements — unused by the mounted engine, kept harmless. */
.pm-task-drawer-side .pm-task-drawer-comments {
  flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-right: 4px;
}
.pm-task-drawer-side .pm-task-drawer-comments-compose { flex: 0 0 auto; margin-top: 10px; }
/* Recent activity sits below the conversation, capped so it can't crowd it. */
.pm-task-drawer-side > [data-pm-drawer-comments-section] ~ .pm-task-drawer-section {
  flex: 0 0 auto; margin: 0; max-height: none; overflow: visible;
  border-top: 1px solid var(--border, #1c2530); padding: 12px 16px;
}
/* Stack the two panes on narrow screens; let the body scroll as one column. */
@media (max-width: 760px) {
  .pm-task-drawer-body { grid-template-columns: 1fr; overflow-y: auto; }
  .pm-task-drawer-main { overflow: visible; }
  .pm-task-drawer-side { border-left: 0; border-top: 1px solid var(--border, #1c2530); overflow: visible; }
  .pm-task-drawer-side > [data-pm-drawer-comments-section] { flex: 0 0 auto; }
  .pm-task-drawer-side .pm-task-drawer-comments { overflow: visible; }
  .pm-task-drawer-side .pm-tk-composer { position: static; box-shadow: none; }
  .pm-task-drawer-side > [data-pm-drawer-comments-section] ~ .pm-task-drawer-section { max-height: none; overflow: visible; }
}

/* ── Weekly · Gather: connections gear popover ────────────────────────── */
/* The gear sits at the far-right of the tab row; center it against the tab text
   without disturbing the active-tab underline (which relies on the tab's own
   stretch + margin-bottom:-1px). */
body[data-dashboard-page="weekly.gather"] .rc-tabs-u .rc-conn-wrap { align-self: center; }
.rc-conn-wrap { position: relative; display: inline-flex; align-items: center; }
/* White button + grey stroked gear. The icon set's stroke styling is scoped to
   .rc-card-icon, so a bare [data-icon] gear renders as a solid black fill that
   vanished on the dark ghost button — force the outline + a light surface. */
.rc-conn-gear { padding: 6px 8px; background: #ffffff; border-color: #cdd3dc; }
.rc-conn-gear:hover { background: #eef1f5; border-color: #b6bdc9; }
.rc-conn-gear svg { width: 16px; height: 16px; display: block; fill: none; stroke: #6b7280; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Gear-anchored dropdown, right-aligned under the gear. Floats over the
   signals grid, which comes later in the DOM — hence the z-index. */
.rc-conn-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: min(360px, calc(100vw - 48px)); margin: 0;
  max-height: 70vh; overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
/* On mobile the tab row gets overflow-x:auto (global rule) which would clip the
   gear popover dropping below it. On this page the tabs wrap rather than scroll,
   so let the row overflow visibly. */
@media (max-width: 760px) {
  body[data-dashboard-page="weekly.gather"] .rc-tabs-u { overflow: visible; }
}
/* ── Phase Plan redesign ─────────────────────────────────────────────────────── */

/* Sticky container — direct child of [data-pm-pane="plan"], outside rc-card */
.rc-pm-plan-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 14px 0 0;
  margin-bottom: 12px;
  overflow: visible;
}

/* Status bar */
.rc-pm-status-bar {
  display: flex; align-items: center; gap: 16px;
  background: var(--card-2); border: 1px solid var(--border);
  border-left: 3px solid var(--teal); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 12px; flex-wrap: wrap;
}
.rc-pm-currently-active {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 3px;
}
.rc-pm-active-phase-name { font-size: 15px; font-weight: 700; color: var(--fg-1); font-family: var(--font-heading); }
.rc-pm-status-bar-divider { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }
.rc-pm-status-stat { font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.rc-pm-status-stat strong { color: var(--fg-1); font-weight: 700; }
.rc-pm-status-stat.is-warn strong { color: var(--danger); }
.rc-pm-status-bar-spacer { flex: 1; }
.rc-pm-status-overall { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rc-pm-status-overall-label { font-size: 10px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .06em; }
.rc-pm-status-overall-row { display: flex; align-items: center; gap: 8px; }
.rc-pm-overall-bar { width: 140px; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.rc-pm-overall-bar-fill { height: 100%; background: var(--teal); border-radius: 3px; transition: width .4s ease; }
.rc-pm-overall-pct { font-size: 11px; font-weight: 700; color: var(--fg-1); }

/* Phase stepper */
.rc-pm-stepper {
  display: flex; align-items: flex-start;
  overflow-x: auto; padding: 10px 2px 16px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.rc-pm-stepper::-webkit-scrollbar { height: 3px; }
.rc-pm-stepper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.rc-pm-step { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; position: relative; min-width: 80px; }
/* Fixed-height band so the connector centres on EVERY dot the same way — the
   24px steps and the 44px active bubble share one centre line, so the rail no
   longer rides high across the top of the enlarged current phase. */
.rc-pm-step-band { position: relative; width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; }
.rc-pm-step-connector {
  position: absolute; top: 50%; left: 50%; transform: translateY(-50%);
  width: 100%; height: 2px; background: var(--border); z-index: 0;
}
.rc-pm-step-connector.done { background: var(--success); }
.rc-pm-step-connector.active { background: linear-gradient(90deg, var(--success), var(--border)); }
.rc-pm-step:last-child .rc-pm-step-connector { display: none; }
.rc-pm-step-dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  border: 2px solid var(--border); background: var(--card-2); color: var(--fg-dim);
  position: relative; z-index: 1; transition: all .2s; flex-shrink: 0;
}
/* Opaque fills (the over-white composite of --success-soft / --teal-subtle) so
   the centred rail runs cleanly BEHIND the dots instead of showing through. */
.rc-pm-step.done .rc-pm-step-dot { background: var(--success-soft, #e7f0ea); border-color: var(--success); color: var(--success); }
.rc-pm-step.active .rc-pm-step-dot {
  width: 44px; height: 44px; font-size: 15px; font-weight: 800;
  background: var(--teal-soft, #fbe7e9); border: 2px solid var(--teal); color: var(--teal);
  box-shadow: 0 0 0 5px var(--teal-soft), 0 0 16px var(--teal-glow);
}
.rc-pm-step-label {
  font-size: 9px; font-weight: 600; color: var(--fg-dim);
  text-align: center; margin-top: 5px; line-height: 1.3;
  max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-pm-step.active .rc-pm-step-label { color: var(--teal); font-weight: 700; font-size: 10px; }
.rc-pm-step.done .rc-pm-step-label { color: var(--success); }
/* Tombstone: a soft-deleted phase kept in its slot, restorable. Greyed + dashed
   dot, struck-through label, with a small Restore control beneath. */
.rc-pm-step.removed .rc-pm-step-dot { border-style: dashed; border-color: var(--border-muted, #b8c2d1); background: var(--surface-1); color: var(--fg-dim); }
.rc-pm-step.removed .rc-pm-step-label { color: var(--fg-dim); text-decoration: line-through; }
.rc-pm-step-restore {
  margin-top: 3px; font-size: 9px; font-weight: 700; line-height: 1;
  color: var(--teal); background: none; border: none; cursor: pointer;
  padding: 2px 5px; border-radius: 5px;
}
.rc-pm-step-restore:hover { background: var(--teal-subtle); text-decoration: underline; }

/* ── F4: phase hide/restore Manage mode ──────────────────────────────
   "Off" reuses the existing soft-delete (deleted_at); this is the UX layer
   that lets a PM batch-toggle phases and collapses tombstones out of the way. */
.rc-pm-phase-manage {
  border: 1px solid var(--teal); color: var(--teal); background: none;
  border-radius: 6px; padding: 5px 11px; font: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; line-height: 1;
}
.rc-pm-phase-manage:hover { background: var(--teal-subtle); }
.rc-pm-phase-manage[data-mode="edit"] { color: #fff; background: var(--teal); }
.rc-pm-phase-pill {
  width: 32px; height: 18px; border-radius: 9px; border: 0; background: var(--border-muted, #c9ced6);
  position: relative; cursor: pointer; padding: 0; flex: none; transition: background .15s;
}
.rc-pm-phase-pill::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.rc-pm-phase-pill.on { background: var(--teal); }
.rc-pm-phase-pill.on::after { left: 15px; }
.rc-pm-phase-pill-wrap { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding-left: 10px; }
.rc-pm-phase-pill-wrap .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-dim); font-weight: 600; }
.rc-pm-phase-card.off { opacity: .6; }
.rc-pm-phase-card.off [data-field="name"] { text-decoration: line-through; color: var(--fg-dim); }
.rc-pm-hidden-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  border: 1px dashed var(--border-muted, #b8c2d1); color: var(--fg-dim); background: none;
  border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 12px; cursor: pointer;
}
.rc-pm-hidden-chip:hover { border-color: var(--teal); color: var(--teal); }
/* Move actions cluster (Back + Next) — keeps the two buttons together when the
   status bar wraps. */
.rc-pm-move-actions { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* "Move to next phase" CTA in the Phase Plan status bar. */
.rc-pm-advance-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font: inherit; font-size: 12.5px; font-weight: 700; color: #fff; cursor: pointer;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--teal);
  background: var(--grad-cta, var(--teal)); box-shadow: 0 1px 2px rgba(204,12,31,.25);
}
.rc-pm-advance-btn:hover { filter: brightness(1.05); }
/* Secondary "Back a phase" (ghost) — instant, non-destructive reposition. */
.rc-pm-back-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-2); cursor: pointer;
  padding: 8px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--card);
}
.rc-pm-back-btn:hover { border-color: var(--border-strong); color: var(--fg-1); }
/* Click-through look-ahead: every phase dot is a button; the SELECTED (viewing)
   dot gets a violet ring, distinct from the red ACTIVE bubble (where the project
   actually is). */
.rc-pm-stepper .rc-pm-step { cursor: pointer; }
.rc-pm-stepper .rc-pm-step:hover .rc-pm-step-label { color: var(--fg-1); }
.rc-pm-stepper .rc-pm-step:focus-visible { outline: none; }
.rc-pm-stepper .rc-pm-step:focus-visible .rc-pm-step-dot { box-shadow: 0 0 0 3px var(--focus-ring, rgba(81,137,173,.30)); }
.rc-pm-step.viewing .rc-pm-step-dot { box-shadow: 0 0 0 3px rgba(81,137,173,.40); border-color: var(--violet, #5189AD); color: var(--violet, #5189AD); }
.rc-pm-step.viewing.done .rc-pm-step-dot { color: var(--violet, #5189AD); }
.rc-pm-step.viewing .rc-pm-step-label { color: var(--violet, #5189AD); font-weight: 700; }
/* Brief highlight on the phase card a look-ahead click jumps to. */
.rc-pm-phase-card.rc-pm-phase-flash { animation: rcPmPhaseFlash 1.1s ease; }
@keyframes rcPmPhaseFlash {
  0% { box-shadow: 0 0 0 3px rgba(81,137,173,.45); }
  100% { box-shadow: 0 0 0 3px rgba(81,137,173,0); }
}
.rc-pm-hidden-divider {
  display: flex; align-items: center; gap: 8px; margin: 18px 0 8px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); font-weight: 600;
}
.rc-pm-hidden-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.rc-pm-hidden-divider .count { color: var(--fg-dim); font-weight: 700; }
.rc-pm-plan-foot { color: var(--fg-dim); font-size: 12px; margin: 14px 2px 0; }
/* step-level (task) hide/restore. The live-step pill is appended to the existing
   rc-task-card-head grid (auto auto 1fr auto auto), so it lands in an implicit
   6th row-start cell and wraps under the badge. Pin it to the last column,
   first row instead — no change to the shared 5-column template. */
.rc-pm-plan-managing .rc-task-card-head > .rc-pm-step-pill-wrap {
  grid-column: -1; grid-row: 1; justify-self: end;
}
.rc-pm-step-off { opacity: .6; display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.rc-pm-step-off .rc-pm-step-off-title { text-decoration: line-through; color: var(--fg-dim); font-weight: 600; }
.rc-pm-step-off .rc-pm-phase-pill-wrap { margin-left: auto; }
.rc-pm-hidden-substep-divider {
  display: flex; align-items: center; gap: 8px; margin: 10px 4px 6px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); font-weight: 600;
}
.rc-pm-hidden-substep-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.rc-pm-hidden-substep-divider .count { color: var(--fg-dim); font-weight: 700; }

/* Phase cards */
.rc-pm-phase-card {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card-2); margin-bottom: 8px; overflow: hidden; transition: border-color .15s;
}
.rc-pm-phase-card:hover { border-color: var(--border-strong); }
.rc-pm-phase-card.rc-pm-phase-active {
  border-color: var(--teal-soft); border-left: 3px solid var(--teal);
  background: rgba(10,191,188,.025);
}
.rc-pm-phase-card.rc-pm-phase-done { opacity: .72; }
.rc-pm-phase-card.rc-pm-phase-done:hover { opacity: 1; }
.rc-pm-phase-card.rc-pm-phase-pending { opacity: .72; }
.rc-pm-phase-card.rc-pm-phase-pending:hover { opacity: 1; }

.rc-pm-phase-head-row { display: flex; align-items: stretch; width: 100%; }
.rc-pm-phase-toggle {
  flex: 1; display: flex; align-items: stretch;
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg-1); font: inherit; text-align: left; padding: 0; min-width: 0;
}
.rc-pm-phase-toggle:hover { background: var(--surface-2); }
.rc-pm-phase-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

.rc-pm-phase-num {
  display: flex; align-items: center; justify-content: center;
  width: 48px; flex-shrink: 0; font-size: 18px; font-weight: 700;
  color: var(--border-strong); font-family: var(--font-heading);
  letter-spacing: -1px; border-right: 1px solid var(--border); padding: 12px 0;
}
.rc-pm-phase-active .rc-pm-phase-num { color: rgba(10,191,188,.4); border-right-color: var(--teal-soft); }
.rc-pm-phase-done .rc-pm-phase-num { color: var(--success-strong); }

.rc-pm-phase-inner {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-width: 0;
}
.rc-pm-phase-inner > strong {
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  color: var(--fg-1); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-pm-phase-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rc-pm-phase-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rc-pm-phase-prog-label { font-size: 10px; color: var(--fg-3); font-weight: 600; white-space: nowrap; }
.rc-pm-mini-bar { width: 72px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.rc-pm-mini-bar-fill { height: 100%; background: var(--teal); border-radius: 2px; transition: width .3s ease; }
.rc-pm-phase-done .rc-pm-mini-bar-fill { background: var(--success); }

.rc-pm-phase-add { white-space: nowrap; margin: auto 10px auto 0; flex-shrink: 0; }

/* Phase body */
.rc-pm-phase-body { border-top: 1px solid var(--border); background: var(--card-3); padding: 6px 12px 12px; }
.rc-pm-phase-card[data-collapsed="true"] .rc-pm-phase-body { display: none; }
.rc-pm-phase-card[data-collapsed="true"] .rc-collapsible-chev { transform: rotate(0deg); }
.rc-pm-phase-card[data-collapsed="false"] .rc-collapsible-chev { transform: rotate(90deg); }

/* === Dashboard V1 / Command Center home === */
/* Surface rendered by dashboard/js/controllers/dashboard.js when the user's
 * template preference is "v1" (toggled in Settings → Appearance → Home
 * dashboard). Tokens reused from the existing system: --border, --card,
 * --card-2, --fg-1, --fg-3, --teal, --teal-subtle, --radius-md. */

.rc-home-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.rc-home-header h1,
.rc-home-header h2.rc-home-greeting { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--fg-1); margin: 0; line-height: 1.2; }
.rc-home-date { color: var(--fg-3); font-size: 13px; text-align: right; }

.rc-home-aibar { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--border); border-radius: 999px; padding: 12px 16px; background: var(--card); color: var(--fg-3); font-size: 14px; cursor: text; transition: border-color var(--transition-base), background var(--transition-base); }
.rc-home-aibar:hover { border-color: var(--border-strong); background: var(--card-2); }
.rc-home-aibar-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.rc-home-aibar-placeholder { flex: 1; color: var(--fg-3); }
.rc-home-aibar-shortcut { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; color: var(--fg-3); background: var(--card-2); flex-shrink: 0; }

.rc-home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0; }
@media (max-width: 900px) { .rc-home-stats { grid-template-columns: repeat(2, 1fr); } }
.rc-home-stat { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.rc-home-stat-label { font-size: 12px; color: var(--fg-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.rc-home-stat-value { font-size: 28px; font-weight: 700; color: var(--fg-1); line-height: 1.1; font-family: var(--font-heading); }
.rc-home-stat-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; }
.rc-home-stat-delta[data-tone="up"] { color: #10b981; }
.rc-home-stat-delta[data-tone="down"] { color: #ef4444; }

.rc-home-attention { margin: 32px 0; }
.rc-home-attention h2,
.rc-home-workspaces h2 { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--fg-3); margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.rc-attention-list { border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; }
.rc-attention-item { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background var(--transition-base); }
.rc-attention-item:last-child { border-bottom: none; }
.rc-attention-item:hover { background: var(--card-2); }
.rc-attention-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); }
.rc-attention-dot[data-tone="danger"] { background: #ef4444; }
.rc-attention-dot[data-tone="warning"] { background: #f59e0b; }
.rc-attention-dot[data-tone="info"] { background: #3b82f6; }
.rc-attention-content { min-width: 0; }
.rc-attention-title { font-size: 14px; font-weight: 500; color: var(--fg-1); display: block; }
.rc-attention-sub { font-size: 12px; color: var(--fg-3); display: block; margin-top: 2px; }
.rc-attention-badge { padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.rc-attention-badge[data-tone="danger"] { background: rgba(239,68,68,.12); color: #b91c1c; }
.rc-attention-badge[data-tone="warning"] { background: rgba(245,158,11,.12); color: #b45309; }
.rc-attention-badge[data-tone="info"] { background: rgba(59,130,246,.12); color: #1d4ed8; }

.rc-home-workspaces { margin: 32px 0; }
.rc-workspace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .rc-workspace-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rc-workspace-grid { grid-template-columns: 1fr; } }
.rc-workspace-card { position: relative; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--card); cursor: pointer; text-decoration: none; color: inherit; font: inherit; text-align: left; width: 100%; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.rc-workspace-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: var(--border-strong); }
.rc-workspace-card.is-hidden { display: none; }
.rc-workspace-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--teal-subtle); color: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rc-workspace-title { font-size: 14px; font-weight: 700; color: var(--fg-1); margin: 0; line-height: 1.3; }
.rc-workspace-sub { font-size: 12px; color: var(--fg-3); margin: 0; line-height: 1.4; }

.rc-mock-card { background: rgba(255,191,0,0.05); border: 1px dashed rgba(180,131,9,.4); }
.rc-mock-pill { position: absolute; top: 8px; right: 8px; background: rgba(180,131,9,.12); color: #92400e; padding: 2px 8px; font-size: 10px; border-radius: 999px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* Keyboard focus rings for v1 interactive surfaces. */
.rc-workspace-card:focus-visible,
.rc-mock-card:focus-visible,
.rc-home-aibar:focus-visible,
.rc-attention-item:focus-visible,
.rc-attention-item a:focus-visible { outline: 2px solid var(--teal, #0ea5e9); outline-offset: 2px; }

/* ── Breadcrumbs — standardized trail inside the page eyebrow ─────────
   Used on every detail page: Module / Parent list / Current item.
   The trailing crumb is synced from the page title by js/lib/breadcrumb.js. */
.rc-breadcrumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-breadcrumbs a { color: var(--fg-3); text-decoration: none; }
.rc-breadcrumbs a:hover { color: var(--teal); text-decoration: underline; }
.rc-breadcrumbs .rc-crumb-sep { color: var(--fg-dim); opacity: .6; }
.rc-breadcrumbs [data-crumb-current] { color: var(--fg-2); max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Ask Ripple interactive chat (ai.ask-ripple-interactive) ─────────────
   Markdown bodies + clarification-option chips. Additive only — when the
   flag is off none of these classes render, and stale cached CSS degrades
   to readable plain text. */
.rc-chat-msg-body p { margin: 0 0 8px; }
.rc-chat-msg-body p:last-child { margin-bottom: 0; }
.rc-chat-msg-body ul, .rc-chat-msg-body ol { margin: 4px 0 8px; padding-left: 20px; }
.rc-chat-msg-body li { margin: 2px 0; }
.rc-chat-msg-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 4px; }
.rc-chat-msg-link { color: var(--teal); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--teal) 45%, transparent); }
.rc-chat-msg-link:hover { text-decoration: none; border-bottom-color: var(--teal); }

.rc-chat-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.rc-chat-options-chip { cursor: pointer; padding: 6px 12px; font-size: 12px; line-height: 1.3; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; transition: border-color 120ms ease, background 120ms ease; }
.rc-chat-options-chip:hover:not(:disabled) { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 8%, var(--surface-2)); }
.rc-chat-options-chip[data-picked="1"] { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 14%, var(--surface-2)); color: var(--fg-1); }
.rc-chat-options-chip:disabled { cursor: default; opacity: 0.62; }
.rc-chat-options-chip[data-picked="1"]:disabled { opacity: 1; }
.rc-chat-options-chip-sub { font-size: 10px; font-weight: 500; color: var(--fg-dim); }
.rc-chat-options-send { margin-left: 2px; }
.rc-chat-options-state { font-size: 11px; font-weight: 600; color: var(--fg-dim); margin-left: 4px; }
.rc-chat-msg[data-options-state="selected"] .rc-chat-options-state { color: var(--teal); }

/* ── PM admin project lifecycle: kebab + menu + inline confirm + toast ──
   Surfaces:
     .rc-pm-kbb            row-level kebab button (also reusable in detail header)
     .rc-pm-kmenu          fixed-position dropdown attached to document.body
     .mp-card.is-confirming + .rc-pm-inline-cf  red-tinted confirm row inside a card
     .rc-pm-toast-root + .rc-pm-toast           own toast root w/ Undo + countdown
     .rc-pm-trash-link / .rc-pm-trash-backdrop / .rc-pm-trash-sheet  Task 9 surfaces
   Driven entirely by /dashboard/pm/js/lib/pm-project-admin-actions.js. */
.rc-pm-kbb {
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid transparent; background: transparent;
  color: var(--fg-3); cursor: pointer; padding: 0; flex: 0 0 auto;
  display: inline-grid; place-items: center;
}
.rc-pm-kbb:hover { background: var(--surface-2); color: var(--fg-1); border-color: var(--border); }
.rc-pm-kbb.is-open { background: var(--surface-2); color: var(--fg-1); border-color: var(--border-strong); }
.rc-pm-kbb svg { width: 16px; height: 16px; }

.rc-pm-kmenu {
  z-index: 70; min-width: 200px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 5px; box-shadow: var(--shadow-lg);
}
.rc-pm-kmenu .hint {
  font-size: 10px; color: var(--fg-dim); padding: 4px 10px 2px;
  letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
}
.rc-pm-kmenu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  background: transparent; border: 0; border-radius: 7px;
  font-size: 13px; color: var(--fg-2); text-align: left; cursor: pointer; font-family: inherit;
}
.rc-pm-kmenu button:hover { background: var(--surface-2); color: var(--fg-1); }
.rc-pm-kmenu button svg { width: 14px; height: 14px; opacity: .8; flex: 0 0 auto; }
.rc-pm-kmenu button.danger { color: #e2624e; }
.rc-pm-kmenu button.danger:hover { background: rgba(226, 98, 78, .12); color: #e2624e; }

.mp-card.is-confirming { border-color: rgba(226, 98, 78, .45); }
.mp-card.is-confirming .mp-card-h { background: rgba(226, 98, 78, .06); }
.rc-pm-inline-cf {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background: rgba(226, 98, 78, .06);
  border-top: 1px dashed rgba(226, 98, 78, .35);
}
.rc-pm-inline-cf .ico {
  width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto;
  background: rgba(226, 98, 78, .15); color: #e2624e;
  display: grid; place-items: center;
}
.rc-pm-inline-cf .ico svg { width: 13px; height: 13px; }
.rc-pm-inline-cf .col { display: flex; flex-direction: column; }
.rc-pm-inline-cf .msg { font-size: 13px; color: var(--fg-1); font-weight: 600; }
.rc-pm-inline-cf .sub { font-size: 11.5px; color: var(--fg-4); margin-top: 2px; }
.rc-pm-inline-cf .sp { flex: 1; }
.rc-pm-inline-cf .undo-tag {
  font-size: 10.5px; font-family: var(--font-mono); color: var(--fg-dim);
  letter-spacing: .04em; padding: 4px 8px; border-radius: 5px; background: var(--surface-2);
}
.rc-btn-danger {
  background: #e2624e; border-color: #c44d39; color: #fff;
}
.rc-btn-danger:hover { background: #c44d39; border-color: #a73d2c; }

.rc-pm-toast-root {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 1300; display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
.rc-pm-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px 11px 18px; border-radius: 11px;
  background: #0e1c20; border: 1px solid #1c3036; color: #d9eef0;
  box-shadow: var(--shadow-lg); font-size: 13px;
  min-width: 320px; max-width: 520px;
  transform: translateY(8px); opacity: 0; transition: all .18s ease;
}
.rc-pm-toast.show { transform: translateY(0); opacity: 1; }
.rc-pm-toast .msg { color: #fff; font-weight: 600; }
.rc-pm-toast .sp { flex: 1; }
.rc-pm-toast .undo {
  background: transparent; border: 1px solid #2a4750; color: var(--teal); cursor: pointer;
  padding: 5px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 600; font-family: inherit;
}
.rc-pm-toast .undo:hover { background: rgba(10, 191, 188, .14); border-color: var(--teal); }
.rc-pm-toast .cd { font-family: var(--font-mono); font-size: 10.5px; color: #6c8e93; min-width: 22px; text-align: right; }
.rc-pm-toast.danger { background: #2a1410; border-color: #5a2618; }
.rc-pm-toast.danger .msg { color: #f3c4b8; }

/* ── PM admin Trash link + fly-out sheet ── */
.rc-pm-trash-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--fg-4); text-decoration: none;
  padding: 4px 8px; border-radius: 6px;
}
.rc-pm-trash-link:hover { background: var(--surface-2); color: var(--fg-1); }
.rc-pm-trash-link svg { width: 12px; height: 12px; }
.rc-pm-trash-link .ct {
  font-family: var(--font-mono); font-weight: 700; font-size: 10.5px;
  background: rgba(226, 98, 78, .14); color: #b06650;
  padding: 1px 6px; border-radius: 99px;
}

.rc-pm-trash-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(8, 14, 22, .45); backdrop-filter: blur(1.5px);
  display: grid; place-items: start center; padding: 48px 16px 32px;
  overflow: auto;
}
.rc-pm-trash-sheet {
  width: min(720px, 100%);
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.rc-pm-trash-sheet .head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-1);
}
.rc-pm-trash-sheet .head .ico {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(226, 98, 78, .14); color: #e2624e;
  display: grid; place-items: center; flex: 0 0 auto;
}
.rc-pm-trash-sheet .head .ttl { font-family: var(--font-heading); font-size: 15px; color: var(--fg-1); }
.rc-pm-trash-sheet .head .sub { font-size: 11px; color: var(--fg-4); margin-top: 2px; }
.rc-pm-trash-sheet .head .sp { flex: 1; }
.rc-pm-trash-sheet .head .x {
  width: 28px; height: 28px; border-radius: 6px; border: 0;
  background: transparent; color: var(--fg-3); cursor: pointer;
  display: grid; place-items: center; font-size: 14px;
}
.rc-pm-trash-sheet .head .x:hover { background: var(--surface-2); color: var(--fg-1); }
.rc-pm-trash-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.rc-pm-trash-row:last-child { border-bottom: 0; }
.rc-pm-trash-row .jobno {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4);
  background: var(--surface-2); padding: 3px 7px; border-radius: 5px;
}
.rc-pm-trash-row .nm { font-family: var(--font-heading); font-size: 13px; color: var(--fg-1); }
.rc-pm-trash-row .meta { font-size: 11px; color: var(--fg-4); }
.rc-pm-trash-row .sp { flex: 1; }

/* Enhanced CRM layout with improved spacing, hierarchy, and visual distinction */

/* Improved CRM page header with better spacing.
   Horizontal gutter lives on #dashboard-page (see canonical rule above);
   .rc-page-head keeps only vertical breathing room so it aligns with
   .rc-card and other direct children of #dashboard-page. */
.rc-page-head {
  padding: 24px 0 16px;
  margin-bottom: 20px;
}

.rc-page-head-l {
  flex: 1 1 0%;
  min-width: 0;
  margin-bottom: 12px;
}

.rc-page-eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.rc-page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 8px;
  line-height: 1.2;
}

.rc-page-sub {
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.5;
  margin: 0;
}

/* Horizontal section navigation.
   Standard for dashboard submenus: flat strip, no chip background or active
   shadow, and the active item uses the platform red underline. PM project
   rails stay isolated in the PM-specific styles/scripts. */
body:not([data-dashboard-page^="pm"]) .rc-tabs-u {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding: 0 2px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  flex-wrap: wrap;
}

body:not([data-dashboard-page^="pm"]) .rc-tab-u:not(.rc-tab-u-studio) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 12px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-3);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  margin-bottom: -1px;
}

body:not([data-dashboard-page^="pm"]) .rc-tab-u:not(.rc-tab-u-studio):hover {
  color: var(--fg-2);
  background: transparent;
}

body:not([data-dashboard-page^="pm"]) .rc-tab-u.active:not(.rc-tab-u-studio) {
  background: transparent;
  color: var(--fg-1);
  border-bottom-color: var(--teal);
  box-shadow: none;
  font-weight: 600;
}

/* PM is intentionally excluded from this horizontal-nav cleanup pass. Preserve
   its existing tab treatment until the PM feature gets its own review. */
body[data-dashboard-page^="pm"] .rc-tabs-u {
  display: flex;
  gap: 2px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--surface-1);
  border-radius: 10px;
}

body[data-dashboard-page^="pm"] .rc-tab-u {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-3);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

body[data-dashboard-page^="pm"] .rc-tab-u:hover {
  color: var(--fg-2);
  background: var(--surface-2);
}

body[data-dashboard-page^="pm"] .rc-tab-u.active {
  background: var(--card);
  color: var(--fg-1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-weight: 600;
}

/* Enhanced card layout with improved spacing */
.rc-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  margin-bottom: 24px;
}

.rc-card-head {
  padding: 20px 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.rc-card-head-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.rc-card-icon {
  margin-top: 2px;
}

.rc-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 4px;
  line-height: 1.3;
}

.rc-card-sub {
  font-size: 14px;
  color: var(--fg-3);
  margin: 0;
  line-height: 1.4;
  max-width: 600px;
}

/* Improved contact actions layout */
.rc-contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
}

.rc-contact-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}

.rc-contact-search span {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rc-contact-search input {
  min-width: 240px;
}

/* Enhanced table styling with better visual distinction */
.rc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.rc-table th {
  padding: 14px 16px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
}

.rc-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-2);
  vertical-align: middle;
  line-height: 1.5;
}

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

.rc-table tbody tr:hover {
  background-color: var(--surface-1);
}

.rc-table tbody tr:last-child td {
  border-bottom: none;
}

/* Improved badge styling for status indicators */
.rc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
  min-height: 24px;
  line-height: 1;
}

.rc-badge.sm {
  font-size: 10px;
  padding: 3px 8px;
  min-height: 22px;
}

/* Enhanced row layout for better readability */
.rc-table td:first-child {
  font-weight: 500;
  color: var(--fg-1);
}

.rc-table td span {
  display: block;
  color: var(--fg-dim);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.4;
}

/* Improved skeleton loading states */
.rc-skeleton {
  height: 52px;
  background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 50%, var(--surface-1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .rc-page-head {
    padding: 20px 0 12px;
  }

  .rc-page-title {
    font-size: 24px;
  }

  .rc-card-head {
    padding: 16px;
  }

  .rc-contact-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .rc-contact-search {
    min-width: auto;
  }

  .rc-table {
    font-size: 13px;
  }

  .rc-table th,
  .rc-table td {
    padding: 12px 10px;
  }

  .rc-tabs-u {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .rc-tabs-u::-webkit-scrollbar {
    display: none;
  }
}

/* Additional spacing improvements for dense content */
.rc-contact-table tbody tr {
  cursor: pointer;
  border-left: 3px solid transparent;
}

.rc-contact-table tbody tr:hover {
  border-left-color: var(--teal);
  background: linear-gradient(to right, var(--teal-soft) 0%, var(--teal-soft) 2px, var(--surface-1) 2px);
}

/* Enhanced mobile table experience */
@media (max-width: 900px) {
  .rc-table th,
  .rc-table td {
    padding: 12px 8px;
    font-size: 13px;
  }

  .rc-table th:nth-child(n+3),
  .rc-table td:nth-child(n+3) {
    display: none; /* Hide less important columns on mobile */
  }

  .rc-table th:first-child,
  .rc-table th:nth-child(2),
  .rc-table td:first-child,
  .rc-table td:nth-child(2) {
    display: table-cell;
  }
}

/* Visual enhancements for table rows */
.rc-table tbody tr:nth-child(even) {
  background-color: var(--surface-1);
}

.rc-table tbody tr:nth-child(even):hover {
  background-color: var(--surface-2);
}

/* Better visual hierarchy for important elements */
.rc-table .tname,
.rc-table td:first-child {
  font-weight: 600;
  color: var(--fg-1);
}

/* Improved spacing for badge elements */
.rc-table .rc-badge {
  margin-top: 4px;
}


/* CRM assessment funnel - step order rows with compact up/down reorder controls (#838) */
.rc-funnel-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-funnel-steps li { display: flex; align-items: center; gap: 8px; }
.rc-funnel-steps li > [data-step-label] { flex: 1; min-width: 0; }
.rc-funnel-step-move { display: inline-flex; gap: 2px; margin-left: auto; }
.rc-funnel-step-move button {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--border); border-radius: 6px; background: transparent;
  color: var(--fg-2); cursor: pointer; font-size: 13px; line-height: 1;
}
.rc-funnel-step-move button:hover:not(:disabled) { background: var(--surface-2); color: var(--fg-1); }
.rc-funnel-step-move button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Meetings review bar ─────────────────────────────────────────────
   dashboard/meetings/index.html — the "what needs me" strip under the
   title: the Review-actions inbox button (rc-btn-secondary) + the status
   filters. The inbox is the one emphasized action; filters sit quieter to
   its right, divided by a hairline. */
.rc-meetings-reviewbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.rc-meetings-reviewbar .rc-chip-row { margin: 0; }
.rc-meetings-reviewbar-sep { width: 1px; align-self: stretch; min-height: 22px; background: var(--border); }
.rc-meetings-reviewbar-lbl { font-family: var(--font-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-4); }
/* When nothing is pending the review button is hidden — drop the dangling divider. */
.rc-meetings-review[hidden] + .rc-meetings-reviewbar-sep { display: none; }
/* The "new since last seen" dot, legible whether the secondary button is in its
   idle (outline) or hover (filled) skin state. */
.rc-meetings-review-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px #fff; }

/* ==========================================================================
   Competitive Analysis
   Scoped dashboard rules for /dashboard/competitive. Keep this surface on the
   shared app stylesheet instead of page-local style tags or inline styles.
   ========================================================================== */
body[data-dashboard-page="competitive"] .rc-cstat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

body[data-dashboard-page="competitive"] .rc-cstat {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

body[data-dashboard-page="competitive"] .rc-cstat-v {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

body[data-dashboard-page="competitive"] .rc-cstat-l {
  margin-top: 3px;
  color: var(--fg-dim);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-dashboard-page="competitive"] .rc-competitive-progress {
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  background: var(--surface-1);
}

body[data-dashboard-page="competitive"] .rc-competitive-progress-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

body[data-dashboard-page="competitive"] .rc-competitive-progress-message {
  flex: 1 1 auto;
  color: var(--fg-2);
}

body[data-dashboard-page="competitive"] .rc-competitive-progress-count {
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

body[data-dashboard-page="competitive"] .rc-competitive-progress-track {
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface-3);
}

body[data-dashboard-page="competitive"] .rc-competitive-progress-bar {
  width: 0%;
  height: 100%;
  background: var(--teal);
  transition: width var(--transition-slow);
}

body[data-dashboard-page="competitive"] .rc-competitive-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 16px;
}

body[data-dashboard-page="competitive"] .rc-competitor-directory {
  overflow: hidden;
}

body[data-dashboard-page="competitive"] .rc-competitor-directory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
}

body[data-dashboard-page="competitive"] .rc-competitor-directory-sub {
  margin: 2px 0 0;
  color: var(--fg-dim);
  font-size: 12px;
}

body[data-dashboard-page="competitive"] .rc-competitor-search {
  display: block;
  padding: 0 16px 12px;
}

body[data-dashboard-page="competitive"] .rc-competitor-search .rc-input {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

body[data-dashboard-page="competitive"] .rc-competitor-filter-row {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
  border-bottom: 1px solid var(--border);
}

body[data-dashboard-page="competitive"] .rc-competitor-filter-row .rc-btn {
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
}

body[data-dashboard-page="competitive"] .rc-competitor-filter-row [data-field="count"] {
  margin-left: 4px;
  color: inherit;
  font-variant-numeric: tabular-nums;
  opacity: .78;
}

body[data-dashboard-page="competitive"] .rc-competitor-directory-labels,
body[data-dashboard-page="competitive"] .rc-competitor-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 58px 78px;
  align-items: center;
  gap: 8px;
}

body[data-dashboard-page="competitive"] .rc-competitor-directory-labels {
  padding: 10px 16px 7px;
  color: var(--fg-dim);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-dashboard-page="competitive"] .rc-competitor-directory-labels span:first-child {
  grid-column: 1 / span 2;
}

body[data-dashboard-page="competitive"] .rc-competitor-list {
  max-height: 548px;
  overflow: auto;
  padding: 0 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

body[data-dashboard-page="competitive"] .rc-competitor-list::-webkit-scrollbar {
  width: 8px;
}

body[data-dashboard-page="competitive"] .rc-competitor-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
}

body[data-dashboard-page="competitive"] .rc-competitor-row {
  width: 100%;
  min-height: 42px;
  padding: 8px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

body[data-dashboard-page="competitive"] .rc-competitor-row + .rc-competitor-row {
  margin-top: 2px;
}

body[data-dashboard-page="competitive"] .rc-competitor-row:hover {
  background: var(--surface-1);
  color: var(--fg-1);
}

body[data-dashboard-page="competitive"] .rc-competitor-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

body[data-dashboard-page="competitive"] .rc-competitor-row.is-selected {
  border-left-color: var(--teal);
  background: var(--teal-subtle);
  color: var(--fg-1);
}

body[data-dashboard-page="competitive"] .rc-competitor-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}

body[data-dashboard-page="competitive"] .rc-competitor-row[data-competitor-status="needs-sources"] .rc-competitor-status-dot {
  background: var(--warning);
}

body[data-dashboard-page="competitive"] .rc-competitor-row-name {
  overflow: hidden;
  color: inherit;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-dashboard-page="competitive"] .rc-competitor-row-count {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

body[data-dashboard-page="competitive"] .rc-competitor-nav-empty {
  padding: 16px;
  color: var(--fg-3);
  font-size: 13px;
  font-style: italic;
}

body[data-dashboard-page="competitive"] .rc-competitive-lens {
  min-width: 0;
}

body[data-dashboard-page="competitive"] .rc-competitive-lens-head {
  align-items: center;
}

body[data-dashboard-page="competitive"] .rc-competitor-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--teal-soft);
  border-radius: 8px;
  background: var(--teal-subtle);
  color: var(--teal);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  flex: 0 0 auto;
}

body[data-dashboard-page="competitive"] .rc-competitive-lens-title {
  min-width: 0;
  flex: 1 1 auto;
}

body[data-dashboard-page="competitive"] .rc-competitive-lens-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body[data-dashboard-page="competitive"] .rc-competitive-lens-title-line .rc-card-title {
  overflow: hidden;
  margin: 0;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-dashboard-page="competitive"] .rc-competitor-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

body[data-dashboard-page="competitive"] .rc-competitor-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

body[data-dashboard-page="competitive"] .rc-competitor-state.needs-sources {
  color: var(--warning);
}

body[data-dashboard-page="competitive"] .rc-competitive-lens-sub {
  margin-top: 3px;
  color: var(--fg-3);
  font-size: 12px;
}

body[data-dashboard-page="competitive"] .rc-competitive-lens-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin-left: auto;
}

body[data-dashboard-page="competitive"] .rc-competitive-lens .rc-card-body {
  overflow-x: visible;
}

body[data-dashboard-page="competitive"] .rc-lens-tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 14px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

body[data-dashboard-page="competitive"] .rc-lens-tabs .rc-btn {
  min-height: 0;
  margin-bottom: -1px;
  padding: 12px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent !important;
  color: var(--fg-3) !important;
  box-shadow: none !important;
  font-size: 13px;
}

body[data-dashboard-page="competitive"] .rc-lens-tabs .rc-btn:hover {
  color: var(--fg-1) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-dashboard-page="competitive"] .rc-lens-tabs .rc-btn.rc-btn-primary,
body[data-dashboard-page="competitive"] .rc-lens-tabs .rc-btn.rc-btn-primary:hover {
  border-bottom-color: var(--teal);
  color: var(--fg-1) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-dashboard-page="competitive"] .rc-lens-tabs .rc-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}

body[data-dashboard-page="competitive"] .rc-social-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

body[data-dashboard-page="competitive"] .rc-social-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-dashboard-page="competitive"] .rc-social-platform-row,
body[data-dashboard-page="competitive"] .rc-social-range-row {
  gap: 6px;
  margin-bottom: 0;
}

body[data-dashboard-page="competitive"] .rc-chip-count {
  margin-left: 4px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

body[data-dashboard-page="competitive"] .rc-social-results {
  margin-left: auto;
  color: var(--fg-dim);
  font-size: 12px;
}

body[data-dashboard-page="competitive"] .rc-social-search {
  flex: 1 1 220px;
  min-width: 180px;
}

body[data-dashboard-page="competitive"] .rc-social-sort {
  flex: 0 0 160px;
}

body[data-dashboard-page="competitive"] .rc-social-search .rc-input,
body[data-dashboard-page="competitive"] .rc-social-sort .rc-input {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

body[data-dashboard-page="competitive"] .rc-social-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--fg-dim);
  font-size: 12px;
}

body[data-dashboard-page="competitive"] .rc-social-sentinel {
  height: 1px;
}

body[data-dashboard-page="competitive"] .rc-competitive-empty {
  padding: 18px;
  color: var(--fg-3);
  text-align: center;
  font-size: 13px;
  font-style: italic;
}

body[data-dashboard-page="competitive"] .rc-competitive-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

body[data-dashboard-page="competitive"] .rc-postcard,
body[data-dashboard-page="competitive"] .rc-reviewcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

body[data-dashboard-page="competitive"] .rc-postcard:hover,
body[data-dashboard-page="competitive"] .rc-reviewcard:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

body[data-dashboard-page="competitive"] .rc-postcard:focus-visible,
body[data-dashboard-page="competitive"] .rc-reviewcard:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-sm);
}

body[data-dashboard-page="competitive"] .rc-postcard-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

body[data-dashboard-page="competitive"] .rc-postcard-img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transition: transform var(--transition-slow);
}

body[data-dashboard-page="competitive"] .rc-postcard:hover .rc-postcard-img {
  transform: scale(1.02);
}

body[data-dashboard-page="competitive"] .rc-postcard-scrim {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding: 22px 11px 9px;
  background: linear-gradient(to top, rgba(11,18,32,0.82), transparent);
  pointer-events: none;
}

body[data-dashboard-page="competitive"] .rc-postcard-stats {
  display: flex;
  gap: 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

body[data-dashboard-page="competitive"] .rc-postcard-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding-left: 3px;
  border-radius: var(--radius-full);
  background: rgba(11,18,32,0.62);
  color: #fff;
  font-size: 12px;
  transform: translate(-50%, -50%);
}

body[data-dashboard-page="competitive"] .rc-postcard-empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
  background:
    repeating-linear-gradient(135deg, var(--surface-1), var(--surface-1) 11px, var(--surface-2) 11px, var(--surface-2) 22px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-dashboard-page="competitive"] .rc-postcard.is-empty .rc-postcard-empty {
  display: flex;
}

body[data-dashboard-page="competitive"] .rc-postcard-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 12px 13px;
}

body[data-dashboard-page="competitive"] .rc-postcard-caption {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--fg-1);
  font-size: 13px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-dashboard-page="competitive"] .rc-postcard-sub,
body[data-dashboard-page="competitive"] .rc-postcard-foot,
body[data-dashboard-page="competitive"] .rc-reviewcard-foot {
  color: var(--fg-dim);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0;
}

body[data-dashboard-page="competitive"] .rc-postcard-foot,
body[data-dashboard-page="competitive"] .rc-reviewcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-dashboard-page="competitive"] .rc-adcard-status {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 1;
  padding: 3px 8px;
  border: 1px solid var(--success-strong);
  border-radius: var(--radius-full);
  background: var(--success-soft);
  color: var(--success);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-dashboard-page="competitive"] .rc-adcard-status.is-inactive {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--fg-dim);
}

body[data-dashboard-page="competitive"] .rc-adcard-advertiser,
body[data-dashboard-page="competitive"] .rc-reviewcard-author {
  color: var(--fg-1);
  font-size: 13px;
  font-weight: 600;
}

body[data-dashboard-page="competitive"] .rc-reviewcard {
  gap: 9px;
  padding: 14px 15px;
}

body[data-dashboard-page="competitive"] .rc-reviewcard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

body[data-dashboard-page="competitive"] .rc-reviewcard-rating {
  color: var(--warning);
  font-size: 12px;
  white-space: nowrap;
  letter-spacing: 0;
}

body[data-dashboard-page="competitive"] .rc-reviewcard-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

body[data-dashboard-page="competitive"] .rc-reviewcard-foot {
  margin-top: auto;
}

body[data-dashboard-page="competitive"] .rc-source-panel {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  background: var(--surface-1);
}

body[data-dashboard-page="competitive"] .rc-source-panel.is-attention {
  box-shadow: 0 0 0 2px var(--warning);
  transition: box-shadow var(--transition-base);
}

body[data-dashboard-page="competitive"] .rc-source-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-dashboard-page="competitive"] .rc-source-panel-title {
  color: var(--fg-1);
  font-size: 13px;
}

body[data-dashboard-page="competitive"] .rc-source-panel-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

body[data-dashboard-page="competitive"] .rc-source-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

body[data-dashboard-page="competitive"] .rc-source-empty {
  margin-top: 8px;
  color: var(--fg-3);
  font-size: 12px;
  font-style: italic;
}

body[data-dashboard-page="competitive"] .rc-source-meta,
body[data-dashboard-page="competitive"] .rc-signal-meta {
  color: var(--fg-dim);
  font-size: 12px;
  line-height: 1.35;
}

body[data-dashboard-page="competitive"] .rc-signal-meta {
  margin-top: 2px;
}

/* Issue #920: inline AI conclusion + matching recommendations under each signal row. */
body[data-dashboard-page="competitive"] .rc-signal-conclusion {
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fg-dim);
}

body[data-dashboard-page="competitive"] .rc-signal-recos {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body[data-dashboard-page="competitive"] .rc-signal-reco {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--fg-1);
}

body[data-dashboard-page="competitive"] .rc-signal-reco-title {
  flex: 1 1 auto;
}

body[data-dashboard-page="competitive"] .rc-source-error {
  max-width: 60ch;
  margin-top: 3px;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.35;
}

body[data-dashboard-page="competitive"] .rc-source-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-dashboard-page="competitive"] .rc-source-health {
  cursor: help;
}

body[data-dashboard-page="competitive"] .rc-seo-panel {
  margin-top: 6px;
}

body[data-dashboard-page="competitive"] .rc-seo {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

body[data-dashboard-page="competitive"] .rc-seo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

body[data-dashboard-page="competitive"] .rc-seo-title {
  color: var(--fg-1);
  font-size: 14px;
  font-weight: 600;
}

body[data-dashboard-page="competitive"] .rc-seo-sub {
  margin-top: 3px;
  color: var(--fg-dim);
  font-size: 12px;
  word-break: break-all;
}

body[data-dashboard-page="competitive"] .rc-seo-empty {
  padding: 8px 0 4px;
  color: var(--fg-dim);
  font-size: 13px;
  line-height: 1.5;
}

body[data-dashboard-page="competitive"] .rc-seo-rowhead,
body[data-dashboard-page="competitive"] .rc-seo-row {
  display: grid;
  grid-template-columns: 1fr 58px 58px 86px;
  align-items: center;
  gap: 10px;
}

body[data-dashboard-page="competitive"] .rc-seo-rowhead {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-dashboard-page="competitive"] .rc-seo-rowhead span:not(:first-child) {
  text-align: center;
}

body[data-dashboard-page="competitive"] .rc-seo-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

body[data-dashboard-page="competitive"] .rc-seo-cat {
  color: var(--fg-1);
  font-size: 13px;
}

body[data-dashboard-page="competitive"] .rc-seo-score {
  color: var(--fg-1);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body[data-dashboard-page="competitive"] .rc-seo-score.good {
  color: var(--success);
}

body[data-dashboard-page="competitive"] .rc-seo-score.avg {
  color: var(--warning);
}

body[data-dashboard-page="competitive"] .rc-seo-score.poor {
  color: var(--danger);
}

body[data-dashboard-page="competitive"] .rc-seo-score.na {
  color: var(--fg-dim);
}

body[data-dashboard-page="competitive"] .rc-seo-delta {
  justify-self: center;
  font-size: 11px;
  white-space: nowrap;
}

body[data-dashboard-page="competitive"] .rc-seo-cwv {
  margin-top: 13px;
  color: var(--fg-dim);
  font-size: 12px;
}

body[data-dashboard-page="competitive"] .rc-seo-summary {
  margin-top: 14px;
}

@media (max-width: 900px) {
  body[data-dashboard-page="competitive"] .rc-cstat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-dashboard-page="competitive"] .rc-competitive-workspace {
    grid-template-columns: 1fr;
  }

  body[data-dashboard-page="competitive"] .rc-competitor-list {
    max-height: 360px;
  }
}

/* Below desktop the lens header's action buttons don't shrink and the title
   column has min-width:0, so it collapses to 0 width and the competitor name +
   summary spill over the actions (audit: layout-collapse, e.g. ipad-landscape).
   Wrap the actions to their own row across the whole tablet range so the title
   keeps full width. (The 640px block below adds phone-only tweaks on top.) */
@media (max-width: 1194px) {
  body[data-dashboard-page="competitive"] .rc-competitive-lens-head { flex-wrap: wrap; }
  body[data-dashboard-page="competitive"] .rc-competitive-lens-actions { flex-basis: 100%; margin-left: 0; }
}

@media (max-width: 640px) {
  body[data-dashboard-page="competitive"] .rc-cstat-row,
  body[data-dashboard-page="competitive"] .rc-competitive-cards {
    grid-template-columns: 1fr;
  }

  body[data-dashboard-page="competitive"] .rc-social-results {
    width: 100%;
    margin-left: 0;
  }

  body[data-dashboard-page="competitive"] .rc-social-sort {
    flex: 1 1 140px;
  }

  /* Let filter chips size to their label+count and wrap, so the longer
     "Needs sources" chip doesn't crush its count at narrow widths. */
  body[data-dashboard-page="competitive"] .rc-competitor-filter-row {
    flex-wrap: wrap;
  }

  body[data-dashboard-page="competitive"] .rc-competitor-filter-row .rc-btn {
    flex: 0 1 auto;
    white-space: nowrap;
  }

  /* The lens header's action buttons don't shrink, so on a phone they crush
     the title/summary column to one word per line. Wrap the actions below the
     avatar+title row instead, giving the title (and the "scores refreshed"
     summary) the full width. */
  body[data-dashboard-page="competitive"] .rc-competitive-lens-head {
    flex-wrap: wrap;
  }

  body[data-dashboard-page="competitive"] .rc-competitive-lens-actions {
    flex-basis: 100%;
    margin-left: 0;
  }
}