/* UI Redesign P0 — Tokens + Shell + Grouped Rail + Workspace Switcher
 * Flag-gated behind body.redesign (activated via ?redesign=1).
 * All rules scoped — no effect without the class.
 * Production warm tokens only: --canvas #EFEEE9, --rail-bg #FAF8F4, --brand #16A34A.
 * Font: Be Vietnam Pro (self-hosted fallback). Icons: inline lucide SVG.
 */

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 0 TOKENS — Finalize semantic status tokens + type ramp
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Status colors — use sparingly, brand-first */
  --info: #1d4ed8;
  --info-bg: #eaf0ff;
  --danger: #b91c1c;
  --danger-bg: #feecec;

  /* Type scale — harmonized across all surfaces */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;
  --text-3xl: 32px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
}

/* ─────────────────────────────────────────────────────────────────────────
   REDESIGN SHELL GRID — Grouped IA rail + workspace switcher
   ───────────────────────────────────────────────────────────────────────── */

body.redesign {
  display: grid;
  grid-template-areas:
    "rail topbar"
    "rail content";
  grid-template-columns: 220px 1fr;
  grid-template-rows: 64px 1fr;
  height: 100vh;
  overflow: hidden;
  background: var(--canvas);
}

/* Hide legacy header when redesign active */
body.redesign header {
  display: none !important;
}

/* Hide chat holder — it's a DOM parking spot, never visible/measured (chat lives in Ask mounts when visible) */
body.redesign #redesign-chat-holder {
  display: none !important;
}

body.redesign #app-view {
  grid-area: content;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.redesign .panels {
  display: block;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  background: var(--canvas);
  padding: 24px;
}

/* ISSUE 3: Content breathing room — content sizes to the display on wide screens.
   Cap raised 1200 → 1600 so laptops/monitors (1280–1920) use the available width instead of a
   narrow centered column with a big dead band. Prose stays readable because text-heavy views
   self-cap internally (Today #dash 1000, Goals .goalx-wrap 760, .lede 720, .form-grid 820), so
   widening the outer container only lets grid/table/card/workspace views breathe. */
body.redesign .panels > * {
  max-width: 1600px;
  margin: 0 auto;
}

/* Item 4: data-table screens (Pipeline, Clients) use the full content width; text-heavy screens keep the cap. */
body.redesign .panels.wide-screen > * {
  max-width: none;
}

/* G2: Card border + shadow to tokens (redesign only) */
body.redesign .card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

body.redesign .tday-also-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* G5: h1 tight tracking (redesign only) */
body.redesign .tday-greet {
  font-size: 30px;
  letter-spacing: -0.03em;
}

/* ISSUE 2: Page-head flexbox layout with date-pill on the right */
body.redesign .page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
}

body.redesign .date-pill {
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: #fff;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* G8: Flat primary buttons in redesign — no glow */
body.redesign #b {
  border-radius: 8px;
  box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   REDESIGN TOP BAR — Brand block + workspace switcher
   ───────────────────────────────────────────────────────────────────────── */

#redesign-topbar {
  grid-area: topbar;
  background: rgba(239, 238, 233, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-4);
}

/* Topbar breadcrumb — Group / Screen */
.crumb {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.crumb b {
  color: var(--ink-2);
}

/* Command palette in topbar */
.command-palette-container {
  flex: 1;
  max-width: 480px;
  margin-left: auto;
  margin-right: var(--space-4);
}

.command-palette-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-family: var(--sans);
  background: rgba(255, 255, 255, 0.7);
  transition: all 0.15s;
}

.command-palette-input:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px var(--brand-a12);
}

.command-palette-input::placeholder {
  color: var(--muted);
}

.command-palette-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 320px;
  overflow-y: auto;
  display: none;
  z-index: 100;
}

.command-palette-results.active {
  display: block;
}

.command-palette-item {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid var(--border);
}

.command-palette-item:last-child {
  border-bottom: none;
}

.command-palette-item:hover,
.command-palette-item.selected {
  background: var(--brand-a08);
}

.command-palette-item-label {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink);
}

.command-palette-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   REDESIGN RAIL — Grouped IA with Focus/Growth/Operations/Insights/Admin
   ───────────────────────────────────────────────────────────────────────── */

#redesign-rail {
  grid-area: rail;
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

/* Account footer — margin-top:auto pins it to the bottom of the flex-column rail. Holds Sign out (the redesign
   hides the classic #cc-rail that used to carry it). */
.redesign-rail-foot {
  margin-top: auto;
  padding: var(--space-3) var(--space-4) 0 var(--space-4);
  border-top: 1px solid var(--border);
}
.redesign-rail-foot .rail-logout {
  width: 100%;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.redesign-rail-foot .rail-logout:hover {
  background: rgba(0,0,0,0.04);
}

/* Brand block at top */
.redesign-brand-block {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  border-radius: var(--radius);
  margin: 0 var(--space-3) var(--space-4) var(--space-3);
  transition: background 0.15s;
}

.redesign-brand-block:hover {
  background: rgba(0,0,0,0.03);
}

.redesign-brand-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='none'%3E%3Ccircle cx='64' cy='64' r='50' stroke='%235045E9' stroke-width='11'/%3E%3Ccircle cx='64' cy='64' r='27' stroke='%2304B45A' stroke-width='10'/%3E%3C/svg%3E") center / contain no-repeat;
}

.redesign-brand-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.redesign-brand-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.redesign-brand-product {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.redesign-brand-tagline {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
}

.redesign-brand-chevron {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}

/* Nav section groups */
.redesign-nav-section {
  margin-bottom: var(--space-5);
}

.redesign-section-header {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-family: var(--sans);
}

.redesign-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  margin: 0 var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  font-family: var(--sans);
  border: none;
  background: transparent;
  width: calc(100% - 24px);
  text-align: left;
}

.redesign-nav-item:hover {
  background: rgba(0,0,0,0.04);
  color: var(--ink);
}

.redesign-nav-item.active {
  background: var(--brand-a12);
  color: var(--brand-dk);
  font-weight: 600;
}

.redesign-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 1.75px;
}

.redesign-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.redesign-nav-badge {
  margin-left: auto;
  background: var(--brand);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* Pinned project links (sub-items under Projects nav item) */
body.redesign .project-links {
  margin: 2px 12px 0 30px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Row = leading unpin pin + the name link */
body.redesign .project-link-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

body.redesign .project-link {
  flex: 1;
  min-width: 0;
  min-height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: 0 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
}

body.redesign .project-link-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.redesign .project-link:hover {
  background: rgba(17, 24, 39, 0.04);
  color: var(--ink-2);
}

body.redesign .project-link.active {
  background: var(--brand-a12);
  color: var(--brand-dk);
}

/* Leading unpin pin — click removes the project from the sidebar */
body.redesign .project-unpin {
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}

body.redesign .project-unpin:hover {
  opacity: 1;
  background: var(--brand-a12);
}

/* Pin toggle button */
body.redesign .pin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

body.redesign .pin-toggle:hover {
  border-color: var(--brand);
  color: var(--brand-dk);
  background: var(--brand-a12);
}

body.redesign .pin-toggle.pinned {
  border-color: var(--brand);
  background: var(--brand-a12);
  color: var(--brand-dk);
}

body.redesign .pin-toggle svg {
  width: 14px;
  height: 14px;
}

/* Projects table toolbar — search folded into the card header (aligns with the table below) */
body.redesign .ptbl-toolbar {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
}

body.redesign .ptbl-search {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-family: var(--sans);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

body.redesign .ptbl-search::placeholder {
  color: var(--muted);
}

body.redesign .ptbl-search:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-a12);
}

/* Action cell: inline pin-star + Open workspace */
body.redesign .ptbl-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

/* Compact icon-only pin-star (overrides the full .pin-toggle button chrome) */
body.redesign .pin-toggle.pin-star {
  min-height: 0;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  opacity: 0.4;
  filter: grayscale(1);
  transition: opacity 0.15s, background 0.15s, filter 0.15s;
}

body.redesign .pin-toggle.pin-star:hover {
  opacity: 1;
  filter: grayscale(0);
  background: rgba(17, 24, 39, 0.05);
  border-color: transparent;
  color: inherit;
}

body.redesign .pin-toggle.pin-star.pinned {
  opacity: 1;
  filter: grayscale(0);
  background: var(--brand-a12);
  border-color: transparent;
  color: inherit;
}

/* Admin collapsible section */
.redesign-admin-section {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}

.redesign-admin-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin: 0 var(--space-3) var(--space-2) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.15s;
}

.redesign-admin-header:hover {
  background: rgba(0,0,0,0.03);
}

.redesign-admin-chevron {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 0.2s;
}

.redesign-admin-section.collapsed .redesign-admin-chevron {
  transform: rotate(-90deg);
}

.redesign-admin-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-family: var(--sans);
}

.redesign-admin-items {
  display: block;
}

.redesign-admin-section.collapsed .redesign-admin-items {
  display: none;
}

/* Workspace switcher overlay */
.workspace-switcher-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 72px 0 0 12px;
  z-index: 1000;
}

.workspace-switcher-overlay.active {
  display: flex;
}

.workspace-switcher-panel {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  width: 320px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

.workspace-switcher-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.workspace-switcher-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  font-family: var(--sans);
  margin: 0;
}

.workspace-switcher-subtitle {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--space-1);
}

.workspace-list {
  padding: var(--space-2);
}

.workspace-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
}

.workspace-item:hover {
  background: var(--panel);
}

.workspace-item.current {
  background: var(--brand-a08);
}

.workspace-avatar {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--brand-a12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--brand-dk);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.workspace-details {
  flex: 1;
  min-width: 0;
}

.workspace-item-name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-item-role {
  font-size: var(--text-sm);
  color: var(--muted);
  text-transform: capitalize;
}

.workspace-check {
  width: 18px;
  height: 18px;
  color: var(--brand);
  flex-shrink: 0;
  opacity: 0;
}

.workspace-item.current .workspace-check {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   PLACEHOLDER STATES — Honest stubs for not-yet-built views
   ───────────────────────────────────────────────────────────────────────── */

.redesign-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-10);
  text-align: center;
}

.redesign-placeholder-icon {
  width: 64px;
  height: 64px;
  color: var(--muted);
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.redesign-placeholder-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
  font-family: var(--sans);
}

.redesign-placeholder-message {
  font-size: var(--text-base);
  color: var(--muted);
  max-width: 400px;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────
   MOCKUP PRIMITIVES — Grids, metric cards, recommendation, brief rows, list rows
   ───────────────────────────────────────────────────────────────────────── */

/* Grid layouts */
body.redesign .grid {
  display: grid;
  gap: 14px;
}

body.redesign .grid-2 {
  grid-template-columns: 1.28fr 0.72fr;
}

/* Today screen (2026-07-12, Vinh): the Priority-brief card must align edge-to-edge with the top KPI row
   (grid-3) and the full-width band above it. Splitting it 1.28fr/0.72fr with Business pulse inset the
   brief/exec-cards narrower than everything else on the screen. Collapse THIS grid to a single full-width
   column — Business pulse simply stacks below, full-width, instead of sitting beside it. */
body.redesign .tday-brief-grid {
  grid-template-columns: 1fr;
}

body.redesign .grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.redesign .grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Metric cards */
body.redesign .card.metric {
  padding: 15px 16px;
}

body.redesign .metric-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

body.redesign .metric-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 5px;
}

body.redesign .metric-foot {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}

/* Status chips */
body.redesign .status {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

body.redesign .status.good {
  background: var(--brand-a12);
  color: var(--brand-dk);
}

body.redesign .status.warn {
  background: #fbf1e4;
  color: #b45309;
}

body.redesign .status.danger {
  background: #fbeaea;
  color: #b91c1c;
}

body.redesign .status.info {
  background: var(--info-bg);
  color: var(--info);
}

/* Recommendation card */
body.redesign .recommendation {
  background: #10281a;
  color: #fff;
  border: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: var(--radius-card);
}

body.redesign .recommendation .card-title {
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
}

body.redesign .recommendation .card-sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  margin-top: 2px;
  font-weight: 500;
}

/* Card head */
body.redesign .card-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.redesign .card-title {
  font-weight: 700;
  font-size: 14.5px;
}

body.redesign .card-sub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  font-weight: 500;
}

/* Brief row */
body.redesign .brief-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}

body.redesign .brief-row:last-child {
  border-bottom: 0;
}

body.redesign .brief-row:hover {
  background: rgba(17, 24, 39, 0.02);
}

body.redesign .rank {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f2f1ec;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

body.redesign .rank.ico-rank {
  background: var(--brand-a12);
  color: var(--brand-dk);
}

body.redesign .row-title {
  font-weight: 600;
  font-size: 14px;
}

body.redesign .row-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

/* List row */
body.redesign .list-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

body.redesign .list-row:last-child {
  border-bottom: 0;
}

body.redesign .list-row.task-button {
  cursor: pointer;
}

body.redesign .list-row.task-button:hover {
  background: rgba(17, 24, 39, 0.02);
}

/* Split list container */
body.redesign .split-list {
  padding: 2px 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   F2 TABLE PRIMITIVE (shared by Approvals/Pipeline/Clients/Projects/Connections)
   ───────────────────────────────────────────────────────────────────────── */

body.redesign .table {
  width: 100%;
  border-collapse: collapse;
}

body.redesign .table th,
body.redesign .table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  font-size: 13.5px;
}

body.redesign .table th {
  color: var(--muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

body.redesign .table tr:last-child td {
  border-bottom: 0;
}

body.redesign .table td b {
  font-weight: 600;
}

/* Mobile search input (hidden on desktop, shown on mobile) */
body.redesign .m-listsearch {
  display: none;
  margin-bottom: 12px;
}

body.redesign .m-listsearch input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px;
  background: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE — Disable redesign on mobile (<= 820px)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  body.redesign {
    display: block;
    height: auto;
    overflow: visible;
  }

  body.redesign header {
    display: block !important;
  }

  #redesign-rail,
  #redesign-topbar {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   BUTTON STYLES — Premium mockup treatment (fidelity-v2-today + projects-refine)
   ───────────────────────────────────────────────────────────────────────── */

body.redesign .btn {
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink-2);
  padding: 0 14px;
  font-weight: 600;
  font-size: 13px;
  font-family: var(--sans);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
  white-space: nowrap;
}

body.redesign .btn:hover {
  border-color: var(--muted);
  box-shadow: 0 2px 4px rgba(17, 24, 39, 0.08);
  transform: translateY(-1px);
}

body.redesign .btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
}

body.redesign .btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

body.redesign .btn.primary {
  border-color: var(--brand-dk);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.15);
}

body.redesign .btn.primary:hover {
  background: var(--brand-dk);
  border-color: #14532d;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.2);
}

body.redesign .btn.primary:active {
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.15);
}

body.redesign .btn.secondary {
  border-color: var(--border);
  background: transparent;
  color: var(--ink-2);
}

body.redesign .btn.secondary:hover {
  background: rgba(17, 24, 39, 0.04);
}

body.redesign .btn.ghost {
  border: none;
  background: transparent;
  color: var(--ink-2);
  box-shadow: none;
}

body.redesign .btn.ghost:hover {
  background: rgba(17, 24, 39, 0.04);
  box-shadow: none;
}

body.redesign .btn.sm {
  height: 30px;
  padding: 0 11px;
  font-size: 12.5px;
}

/* Mobile search bar (.m-listsearch) input + button premium treatment */
body.redesign .m-listsearch {
  margin: 0 0 14px;
}

body.redesign .m-listsearch input {
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px;
  font-size: 14px;
  font-family: var(--sans);
  background: #fff;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  width: 100%;
}

body.redesign .m-listsearch input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-a12), 0 1px 3px rgba(17, 24, 39, 0.06);
}

body.redesign .m-listsearch input::placeholder {
  color: var(--muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   REVIEW DRAWER — Right-side panel (replaces workspace-switcher-panel)
   ───────────────────────────────────────────────────────────────────────── */

body.redesign .drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.20);
  display: none;
  z-index: 40;
}

body.redesign .drawer-backdrop.open {
  display: block;
}

body.redesign .drawer {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: auto;
  height: auto;
  max-height: calc(100vh - 32px);
  width: min(440px, 92vw);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: -18px 0 45px rgba(17, 24, 39, 0.16);
  z-index: 41;
  transform: translateX(calc(100% + 16px));
  transition: transform 0.18s ease;
  display: flex;
  flex-direction: column;
}

body.redesign .drawer.open {
  transform: translateX(0);
}

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

body.redesign .drawer-title {
  margin: 4px 0 0;
  font-size: 19px;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
}

body.redesign .drawer .eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.redesign .drawer .close {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 7px;
  height: 30px;
  width: 30px;
  font-weight: 700;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

body.redesign .drawer .close:hover {
  background: var(--canvas);
  color: var(--ink);
}

body.redesign .drawer-body {
  padding: 18px;
  overflow: auto;
  display: grid;
  gap: 13px;
}

body.redesign .drawer-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

body.redesign .drawer-actions .btn {
  flex: 1 1 44%;
  justify-content: center;
  min-width: 0;
}

/* Recommendation card button (dark green card) — premium on dark */
body.redesign .recommendation .btn {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

body.redesign .recommendation .btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
}

/* ─────────────────────────────────────────────────────────────────────────
   ASK LAYOUT — Two-column chat interface
   ───────────────────────────────────────────────────────────────────────── */

/* Desktop/mobile title toggle */
body.redesign .d-only {
  display: inline;
}

body.redesign .m-only {
  display: none;
}

/* Two-column grid: conversation + suggestions rail */
body.redesign .chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  width: 100%;
}

/* Conversation card */
body.redesign .conversation {
  min-height: 540px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Messages area inside conversation */
body.redesign .messages {
  flex: 1;
  min-height: 0;   /* Q3b: allow the flex child to shrink below its content so overflow-y actually scrolls */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

/* Chat bubbles */
body.redesign .bubble {
  max-width: 74%;
  border-radius: 10px;
  padding: 11px 13px;
  background: #f4f3ef;
  font-size: 13.5px;
  line-height: 1.4;
}

body.redesign .bubble.owner {
  margin-left: auto;
  background: var(--brand);
  color: #fff;
}

/* Composer at bottom of conversation */
body.redesign .composer {
  border-top: 1px solid var(--border);
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
}

body.redesign .composer input {
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px;
  font-size: 14px;
  font-family: var(--sans);
}

body.redesign .composer input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-a12);
}

body.redesign .composer .btn.primary {
  height: 38px;
  border-radius: var(--radius);
  padding: 0 20px;
}

/* ─────────────────────────────────────────────────────────────────────────
   CHART CARD + LEGEND (Goals screen executive graph)
   ───────────────────────────────────────────────────────────────────────── */

body.redesign .chart-card {
  padding: 16px;
}

body.redesign .chart {
  height: 200px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: #fff;
  margin-top: 12px;
  overflow: hidden;
}

body.redesign .chart svg {
  width: 100%;
  height: 100%;
}

body.redesign .legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  margin-top: 9px;
}

body.redesign .legend s {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.redesign .legend s:before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 99px;
}

body.redesign .legend .rev:before {
  background: var(--brand);
}

body.redesign .legend .exp:before {
  background: var(--warn);
}

body.redesign .legend .net:before {
  background: var(--info);
}

/* Mobile responsive */
@media (max-width: 767px) {
  body.redesign .d-only {
    display: none;
  }

  body.redesign .m-only {
    display: inline;
  }

  body.redesign .chat-layout {
    grid-template-columns: 1fr;
  }

  body.redesign .chat-layout > .card:nth-child(2) {
    display: none; /* Hide suggestions rail on mobile */
  }

  body.redesign .conversation {
    min-height: calc(100vh - 300px);
  }

  /* Mobile search input for list views */
  body.redesign .m-listsearch {
    display: block;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   SHARED PRIMITIVES — Mockup elements scoped under body.redesign
   ───────────────────────────────────────────────────────────────────────── */

body.redesign .eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

body.redesign h1 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 700;
}

body.redesign .lede {
  margin: 7px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  max-width: 720px;
}

body.redesign .tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

body.redesign .tab {
  height: 36px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
  font-weight: 600;
  cursor: pointer;
}

body.redesign .tab.active {
  color: var(--brand-dk);
  border-bottom-color: var(--brand);
}

body.redesign .tab-panel {
  display: none;
}

body.redesign .tab-panel.active {
  display: block;
}

/* Project Workspace Slice 1 — 4-tab layout + persistent chat dock. Scoped .pd-* classes so the
   project switcher never collides with the Business .tab / .tab-panel classes. */
/* UI scroll regions: the workspace is a three-track grid — main column, a keyboard-operable resize separator,
   and the dock column whose width comes from the persisted --pd-dock-w preference (clamped client-side to the
   frozen inclusive range [280, 560], default 360). Collapsing drops both extra tracks so the tab area takes the
   full width; the collapse control itself lives OUTSIDE the dock (.pd-dock-bar) so it stays visible and
   focusable while collapsed. */
body.redesign .pd-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px var(--pd-dock-w, 360px);
  gap: 10px;
  align-items: start;
}

body.redesign .pd-workspace.pd-dock-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

body.redesign .pd-workspace.pd-dock-collapsed .pd-chat-dock,
body.redesign .pd-workspace.pd-dock-collapsed .pd-dock-resizer {
  display: none;
}

body.redesign .pd-dock-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

body.redesign .pd-dock-resizer {
  align-self: stretch;
  min-height: 160px;
  border-radius: 5px;
  background: var(--border);
  cursor: col-resize;
}

body.redesign .pd-dock-resizer:hover {
  background: var(--brand, #16a34a);
}

body.redesign .pd-dock-resizer:focus-visible {
  outline: 2px solid var(--brand, #16a34a);
  outline-offset: 2px;
}

body.redesign .pd-main {
  min-width: 0;
}

body.redesign .pd-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

body.redesign .pd-tab {
  height: 36px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
  font-weight: 600;
  cursor: pointer;
}

body.redesign .pd-tab.active {
  color: var(--brand-dk);
  border-bottom-color: var(--brand);
}

body.redesign .pd-tab-panel {
  display: none;
}

body.redesign .pd-tab-panel.active {
  display: block;
}

/* UI scroll regions (R1/R2): the dock is bounded to the visible area and is NOT itself a scroller — the
   .messages region inside it is. The reserve is the topbar (64) + .panels padding (24 top + 24 bottom) + the
   16px sticky offset, so a conversation of any length stays inside the viewport and never drives the outer
   .panels scroll. */
body.redesign .pd-chat-dock {
  position: sticky;
  top: 16px;
  max-height: var(--pd-dock-max, calc(100vh - 128px));
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.redesign .pd-chat-dock .conversation {
  margin: 0;
  min-height: 0;      /* releases the shared 540px conversation floor so the bounded dock can shrink */
  max-height: 100%;
  flex: 1 1 auto;
  overflow: hidden;   /* the CARD clips; the .messages region inside it owns the scrolling */
}

body.redesign .pd-chat-dock .card-head {
  flex: 0 0 auto;
}

/* R2: the composer is the dock's last row, outside the scrolling message region — it never shrinks away and
   is reachable without scrolling at any conversation length. */
body.redesign .pd-chat-dock .composer {
  flex: 0 0 auto;
}

body.redesign .pd-chat-dock .pd-past-chats {
  flex: 0 0 auto;
}

/* The relocated #chat keeps the inline `overflow-y:auto` that __relocateChatToProjectDetail sets (that path is
   untouched, R8). Inside the bounded dock the .messages region is the scroller, so the inline rule is
   neutralised here — otherwise the dock would carry two nested vertical scrollbars. */
body.redesign .pd-chat-dock .messages #chat {
  overflow-y: visible !important;
  min-height: 0;
}

/* R3: the jump-to-newest affordance. Sits outside the scrolling region, hidden via the `hidden` attribute
   until a message arrives while the reader is scrolled up. */
body.redesign .pd-jump-newest {
  flex: 0 0 auto;
  align-self: center;
  margin: 6px auto 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-dk, #15803d);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
}

body.redesign .pd-empty {
  padding: 48px 24px;
  text-align: center;
}

body.redesign .pd-empty-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

body.redesign .pd-empty-msg {
  color: var(--muted);
  font-size: 14px;
}

/* R7: at the narrow end of the range where the redesign runs, the dock STACKS under the main column with
   relaxed bounds rather than becoming a tiny scroll box. The viewport bound is released (the dock is no longer
   sticky, so .panels scrolls it into view) and the card keeps its own internal bound so the composer stays
   pinned. Width resizing is meaningless in a single stacked column, so the separator is removed. */
@media (max-width: 900px) {
  body.redesign .pd-workspace {
    grid-template-columns: 1fr;
  }
  body.redesign .pd-dock-resizer {
    display: none;
  }
  body.redesign .pd-chat-dock {
    position: static;
    max-height: none;
    min-height: 360px;
  }
  body.redesign .pd-chat-dock .conversation {
    max-height: 70vh;
  }
}

/* Settings Shell slice — 7-section tenant-only settings (sub-nav + section pane). Scoped .set-*
   classes so the settings switcher never collides with the Business .tab / .tab-panel classes or the
   project .pd-tab / .pd-tab-panel classes. */
body.redesign .set-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

body.redesign .set-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--border);
  padding-right: 12px;
}

body.redesign .set-navrow {
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

body.redesign .set-navrow:hover {
  background: var(--panel-2, rgba(0, 0, 0, 0.04));
  color: var(--text);
}

body.redesign .set-navrow.active {
  background: var(--brand-tint, rgba(22, 163, 74, 0.1));
  color: var(--brand-dk);
}

body.redesign .set-pane {
  min-width: 0;
}

body.redesign .set-section {
  display: none;
}

body.redesign .set-section.active {
  display: block;
}

body.redesign .set-sec-head {
  margin-bottom: 14px;
}

body.redesign .set-sec-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

body.redesign .set-sec-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}

body.redesign .set-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 6px 18px;
  margin-bottom: 14px;
}

body.redesign .set-field {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

body.redesign .set-field:last-child {
  border-bottom: 0;
}

body.redesign .set-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

body.redesign .set-value {
  font-size: 14px;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.redesign .set-unset {
  color: var(--muted);
}

body.redesign .set-swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--border);
  flex: none;
}

body.redesign .set-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

body.redesign .set-logo {
  max-height: 28px;
  max-width: 140px;
  flex: none;
}

body.redesign .set-security {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px;
}

body.redesign .set-mfa {
  min-width: 0;
}

body.redesign .set-muted {
  font-size: 13px;
  color: var(--muted);
}

body.redesign .set-note {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 20px;
  font-size: 14px;
  color: var(--muted);
}

body.redesign .set-empty {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 44px 24px;
  text-align: center;
}

body.redesign .set-empty-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

body.redesign .set-empty-msg {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 900px) {
  body.redesign .set-shell {
    grid-template-columns: 1fr;
  }
  body.redesign .set-nav {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 0 10px;
  }
  body.redesign .set-field,
  body.redesign .set-security {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

body.redesign .form-grid {
  display: grid;
  gap: 12px;
  max-width: 820px;
}

body.redesign .field label {
  display: flex;
  justify-content: space-between;
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: 6px;
}

body.redesign .field .hint {
  color: var(--muted);
  font-weight: 500;
}

body.redesign .field input,
body.redesign .field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 10px 12px;
  resize: vertical;
}

body.redesign .field textarea {
  min-height: 80px;
}

body.redesign .placeholder {
  min-height: 300px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  padding: 28px;
}

body.redesign .placeholder strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  margin-bottom: 6px;
}

body.redesign .progress-bar {
  height: 7px;
  border-radius: 999px;
  background: #ece9e2;
  overflow: hidden;
}

body.redesign .progress-bar span {
  display: block;
  height: 100%;
  background: var(--brand);
}

body.redesign .card-title {
  font-weight: 700;
  font-size: 14.5px;
}

body.redesign .card-sub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  font-weight: 500;
}

body.redesign .card-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.redesign .split-list {
  padding: 2px 0;
}

body.redesign .list-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

body.redesign .list-row:last-child {
  border-bottom: 0;
}

body.redesign .rank {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f2f1ec;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

body.redesign .row-title {
  font-weight: 600;
}

body.redesign .row-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

body.redesign .status {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

body.redesign .status.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

/* F4: Workflow card styling */
body.redesign .workflow-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

body.redesign .workflow-card .card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

body.redesign .workflow-card .row-meta {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

body.redesign .workflow-card .tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body.redesign .workflow-card .btn {
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────
   CONNECTIONS TWO-BOX ROLLUP — Health stats + available to connect
   ───────────────────────────────────────────────────────────────────────── */

body.redesign .card.rollup {
  padding: 16px 18px;
}

body.redesign .card-title {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  margin: 0 0 12px;
}

body.redesign .health-stats {
  display: flex;
  gap: 24px;
}

body.redesign .health-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.redesign .stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.redesign .stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

body.redesign .stat-dot.green {
  background: var(--good);
}

body.redesign .stat-dot.amber {
  background: var(--warn);
}

body.redesign .stat-dot.grey {
  background: var(--muted);
}

body.redesign .stat-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

body.redesign .stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

body.redesign .connector-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.redesign .connector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}

body.redesign .connector-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

body.redesign .connector-name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink-2);
  flex: 1;
}

/* Connector icons (inline SVG or monogram fallback) */
body.redesign .conn-icon-svg,
body.redesign .conn-icon-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-right: 8px;
}

body.redesign .conn-icon-svg svg {
  width: 18px;
  height: 18px;
  color: var(--ink-2);
}

body.redesign .conn-icon-mono {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--panel, #F6F8FA);
  border: 1px solid var(--border, rgba(17, 24, 39, .08));
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-2);
}

/* Table connector name with icon */
body.redesign .conn-table-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.redesign .add-chip {
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--brand);
  padding: 0 8px;
  font-weight: 600;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

body.redesign .add-chip:hover {
  background: var(--brand-a12);
}

body.redesign .browse-link {
  margin-top: 10px;
  font-size: var(--text-sm);
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

body.redesign .browse-link:hover {
  text-decoration: underline;
}

/* Inline Manage expand (per-connector account detail under its table row) */
body.redesign .conn-manage-row > td {
  background: var(--panel, #F6F8FA);
  padding: 0;
}

body.redesign .conn-manage {
  padding: 14px 16px;
}

body.redesign .conn-manage-hd {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 8px;
}

body.redesign .conn-manage-note {
  font-size: 12.5px;
  color: var(--muted);
}

/* Full catalog page */
body.redesign .catalog-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

body.redesign .catalog-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

body.redesign .catalog-search {
  flex: 1;
  min-width: 200px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--ink);
  background: var(--card, #fff);
}

body.redesign .catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

body.redesign .catalog-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card, #fff);
}

body.redesign .catalog-card-top {
  display: flex;
  align-items: center;
  min-width: 0;
}

body.redesign .catalog-card-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.redesign .catalog-status.ok {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-dk, #15803D);
  background: var(--brand-tint, rgba(22, 163, 74, .10));
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Ask screen — "New chat" button (page-head, right-aligned; reuses resetActiveProjectSession) */
body.redesign .ask-new-chat {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card, #fff);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
body.redesign .ask-new-chat:hover {
  border-color: var(--brand);
  color: var(--brand-dk, #15803D);
  background: var(--brand-a08, rgba(22, 163, 74, .06));
}

/* Chat messages need horizontal breathing room — #chat carries an inline `padding:4px 0` (zero left/right),
   so bubbles sit flush to the edges. Override left/right only, scoped to the redesign (classic/CC untouched). */
body.redesign #chat {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Ask screen cards (conversation + suggested prompts) need a clearly visible outline.
   The shared --border (rgba(17,24,39,.08)) is too faint on the warm canvas, so the chat box
   looked borderless. Give the two chat-layout cards a stronger border, redesign-scoped. */
body.redesign .chat-layout > .card {
  border: 1px solid rgba(17, 24, 39, 0.15);
}

/* Q3b: bound the chat cards to the viewport so the MESSAGES area scrolls internally (composer stays pinned),
   instead of the conversation growing unbounded and forcing the whole page to scroll. Offset ≈ topbar (64) +
   page-head (~102) + gaps. min-height keeps it usable on short viewports. */
body.redesign .chat-layout > .card {
  height: calc(100vh - 252px);
  min-height: 420px;
  overflow: hidden;
}
/* The suggested-prompts card scrolls its own list if it ever overflows the bounded height. */
body.redesign .chat-layout > .card .split-list {
  overflow-y: auto;
  min-height: 0;
}

/* Q3a: the Ask suggested-prompt rows are clickable (they call __populateAndSendAsk) — make them READ as
   clickable cards: bordered, pointer cursor, hover lift. Scoped to the Ask chat-layout only. --border is a
   defined token; the hover accent falls back if --brand is absent. */
body.redesign .chat-layout .split-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.redesign .chat-layout .split-list .list-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
body.redesign .chat-layout .split-list .list-row:hover {
  border-color: var(--brand, rgba(17, 24, 39, 0.35));
  background: rgba(0, 0, 0, 0.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────────────────
   EXECUTIVE MORNING BRIEF (renderExecutiveGroups/renderExecutiveCard/
   renderBriefSummaryLine, index.html ~L1603-1700). CSS ONLY — the render
   functions already emit these classes; base .sig-title/.sig-tag/.sig-when/
   .sig-why/.sig-src/.sig-src-chip/.sig-link/.sig-acts/.sig-act/.sig-act-ghost
   have unscoped legacy rules earlier in index.html's inline <style> (from the
   "From your accounts" signals card) that already apply here — this section
   only fills the genuine gaps (summary strip, group/card chrome, action
   badge, confidence-tier colors, recommendation line) and gives a couple of
   those legacy classes a chip-ier look, redesign-scoped so the legacy view
   is untouched. All colors are theme tokens (brand.css --token, swapped per
   [data-theme]) — no hardcoded hex, so this reads correctly in light + dark.
   ───────────────────────────────────────────────────────────────────────── */

/* Summary strip: "Today's Brief · N Decisions · ... · Est. Time N min" —
   a single escaped text node (no sub-spans), so the "leading label
   emphasized" nuance is approximated at the whole-line level (CSS-only,
   no DOM changes permitted). */
body.redesign .brief-summary-line {
  font-size: var(--text-sm, 13px);
  font-weight: 600;
  color: var(--ink-2, #374151);
  background: var(--panel, #F8F9FA);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 14px;
  margin-bottom: 14px;
}

/* Action group: header row (icon + action label + count) + its cards. */
body.redesign .exec-group {
  margin-bottom: 20px;
}
body.redesign .exec-group:last-child {
  margin-bottom: 0;
}
body.redesign .exec-group-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Card: surface bg, hairline border, ~12px radius, comfortable padding,
   small vertical gap between stacked cards. exec-card also carries
   sig-row, but no ancestor .sig-card wraps it here, so the legacy
   ".sig-card .sig-row" border-bottom/padding rules don't apply — this is
   the card's only box treatment. */
body.redesign .exec-card {
  display: block;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
body.redesign .exec-card:last-child {
  margin-bottom: 0;
}
/* Semantic left-accent for risk/opportunity cards, keyed off the badge's
   act-<action_type> class via :has() (no DOM change needed). */
body.redesign .exec-card:has(.act-badge.act-risk) {
  border-left: 3px solid var(--danger, #b91c1c);
}
body.redesign .exec-card:has(.act-badge.act-opportunity) {
  border-left: 3px solid var(--good, #16A34A);
}

/* Action badge: compact icon + label pill, muted by default. */
body.redesign .act-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2, #374151);
  background: var(--panel, #F8F9FA);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
body.redesign .act-badge.act-risk {
  color: var(--danger, #b91c1c);
  background: var(--danger-bg, #feecec);
  border-color: transparent;
}
body.redesign .act-badge.act-opportunity {
  color: var(--brand-dk, #15803D);
  background: var(--brand-tint);
  border-color: transparent;
}

/* Time chip — redesign-only upgrade of the legacy plain-text .sig-when
   into a small pill, matching the mockup's "time chip" treatment. */
body.redesign .sig-when {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  background: var(--panel, #F8F9FA);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Confidence pills: green/amber/neutral for high/medium/low, layered on
   the existing base .sig-tag pill shape. */
body.redesign .sig-tag.conf-high {
  color: var(--good, #16A34A);
  background: var(--brand-tint);
  border-color: transparent;
}
body.redesign .sig-tag.conf-medium {
  color: var(--warn, #B45309);
  background: color-mix(in srgb, var(--warn, #B45309) 14%, transparent);
  border-color: transparent;
}
body.redesign .sig-tag.conf-low {
  color: var(--muted);
  background: var(--panel, #F8F9FA);
}

/* Recommendation line — slightly emphasized, accent-colored (the → arrow
   is already part of the escaped text from renderExecutiveCard). */
body.redesign .sig-rec {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-dk, #15803D);
  margin: 6px 0 0;
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLICE 2 — IMMEDIATE SKELETON SHELL (#redesign-loading.rd-skeleton)
   Painted the moment auth + tenant membership resolve (DS2-6), BEFORE the boot
   fetches (tenant-profile / vertical-pack / dashboard) resolve. It is a
   TOP-LEVEL fixed overlay (NOT under body.redesign, which only exists once the
   redesign has mounted) mirroring the redesign grid: 220px rail + 64px topbar +
   content. Every block is a visibly-animated shimmer — a LOADING affordance,
   never data or a tenant identity (DS2-1 / DS2-5). Opaque canvas background so
   any classic render underneath never shows through (DS2-4).
   Every rule below is scoped under #redesign-loading (the CC-unchanged guard in
   tests/ui-fidelity-batch2.test.mjs requires #redesign- / .redesign- scoping).
   ═══════════════════════════════════════════════════════════════════════════ */
/* Base layout. Default hidden (display:none inline in the markup); JS reveals it by
   setting inline `display:grid` after auth+tenant resolve, and hides it again with
   inline `display:none` once the redesign mounts. The grid template lives here so
   the inline show is a single property flip. */
#redesign-loading.rd-skeleton {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--canvas, #FBFBFC);
  grid-template-areas:
    "rail topbar"
    "rail content";
  grid-template-columns: 220px 1fr;
  grid-template-rows: 64px 1fr;
  height: 100vh;
  overflow: hidden;
}

#redesign-loading .rd-sk-rail {
  grid-area: rail;
  border-right: 1px solid var(--border, #E5E7EB);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--card, #fff);
}
#redesign-loading .rd-sk-brand { display: flex; align-items: center; gap: 10px; }
#redesign-loading .rd-sk-brandtext { flex: 1; display: flex; flex-direction: column; gap: 6px; }
#redesign-loading .rd-sk-nav { display: flex; flex-direction: column; gap: 9px; }
#redesign-loading .rd-sk-topbar {
  grid-area: topbar;
  border-bottom: 1px solid var(--border, #E5E7EB);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: var(--card, #fff);
}
#redesign-loading .rd-sk-topright { display: flex; align-items: center; gap: 10px; }
#redesign-loading .rd-sk-content {
  grid-area: content;
  padding: 28px 32px;
  overflow: hidden;
}
#redesign-loading .rd-sk-subtitle { margin-bottom: 22px; }
#redesign-loading .rd-sk-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
#redesign-loading .rd-sk-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Shimmer primitive — a moving highlight makes it read unambiguously as LOADING,
   not as an empty/zeroed value. Respects reduced-motion. */
#redesign-loading .sk {
  position: relative;
  overflow: hidden;
  background: var(--panel, #EEF1F4);
  border-radius: 8px;
}
#redesign-loading .sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: rd-sk-shimmer 1.3s ease-in-out infinite;
}
@keyframes rd-sk-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  #redesign-loading .sk::after { animation: none; }
}

#redesign-loading .sk-logo { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
#redesign-loading .sk-line { height: 12px; border-radius: 6px; }
#redesign-loading .sk-sm { height: 9px; }
#redesign-loading .sk-hd { height: 8px; margin-top: 6px; opacity: 0.7; }
#redesign-loading .sk-title { height: 26px; border-radius: 8px; }
#redesign-loading .sk-w60 { width: 60%; }
#redesign-loading .sk-w40 { width: 40%; }
#redesign-loading .sk-w30 { width: 30%; }
#redesign-loading .sk-w25 { width: 25%; }
#redesign-loading .sk-navitem { height: 30px; border-radius: 8px; }
#redesign-loading .sk-chip { width: 74px; height: 28px; border-radius: 999px; }
#redesign-loading .sk-avatar { width: 32px; height: 32px; border-radius: 50%; }
#redesign-loading .sk-tile { height: 96px; border-radius: 12px; }
#redesign-loading .sk-card { height: 220px; border-radius: 12px; }

/* Below the redesign breakpoint the rail collapses so a narrow viewport does not overflow. */
@media (max-width: 820px) {
  #redesign-loading.rd-skeleton { grid-template-columns: 0 1fr; }
  #redesign-loading .rd-sk-rail { display: none; }
  #redesign-loading .rd-sk-tiles { grid-template-columns: 1fr 1fr; }
  #redesign-loading .rd-sk-cards { grid-template-columns: 1fr; }
}

/* ── Connections region skeleton (Slice 2, DS2-2) ────────────────────────────
   Shown inside the mounted redesign (body.redesign) — NOT #redesign-loading — while the Connections region's
   authority (/api/connector-inventory, via the Z5 health-refresh + catalog fetch) resolves. Mirrors the real
   layout: a health-tile panel with count blocks, an "available to connect" panel, and a "connected systems"
   table of shimmer rows. Reuses the rd-sk-shimmer keyframe. All rules redesign-scoped (CC-unchanged guard). */
body.redesign .conn-skel { display: flex; flex-direction: column; gap: 16px; }
body.redesign .conn-skel-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 12px);
  background: var(--card, #fff);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.redesign .conn-skel-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
body.redesign .conn-skel .sk {
  position: relative;
  overflow: hidden;
  background: var(--panel, #EEF1F4);
  border-radius: 8px;
}
body.redesign .conn-skel .sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: rd-sk-shimmer 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.redesign .conn-skel .sk::after { animation: none; }
}
body.redesign .conn-sk-line { height: 12px; border-radius: 6px; }
body.redesign .conn-sk-w25 { width: 25%; }
body.redesign .conn-sk-w30 { width: 30%; }
body.redesign .conn-sk-w40 { width: 40%; }
body.redesign .conn-sk-w60 { width: 60%; }
body.redesign .conn-sk-count { height: 64px; border-radius: 10px; }
body.redesign .conn-sk-row { height: 44px; border-radius: 8px; }
@media (max-width: 820px) {
  body.redesign .conn-skel-counts { grid-template-columns: 1fr; }
}

/* ── Generic region skeleton (Slice 2, DS2-2) ────────────────────────────────
   Reusable loading state for any async-hydrated tab whose mount is a placeholder (Approvals, Ops). A couple of
   shimmer cards + rows. Reuses the rd-sk-shimmer keyframe; all rules redesign-scoped (CC-unchanged guard). */
body.redesign .region-skel { display: flex; flex-direction: column; gap: 14px; }
body.redesign .region-skel-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 12px);
  background: var(--card, #fff);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.redesign .region-skel .sk {
  position: relative;
  overflow: hidden;
  background: var(--panel, #EEF1F4);
  border-radius: 8px;
}
body.redesign .region-skel .sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: rd-sk-shimmer 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.redesign .region-skel .sk::after { animation: none; }
}
body.redesign .region-sk-line { height: 12px; border-radius: 6px; }
body.redesign .region-sk-w25 { width: 25%; }
body.redesign .region-sk-w40 { width: 40%; }
body.redesign .region-sk-block { height: 90px; border-radius: 10px; }
body.redesign .region-sk-row { height: 40px; border-radius: 8px; }

/* ─────────────────────────────────────────────────────────────────────────
   UI SCROLL REGIONS (R6) — Today: fixed KPI row, brief scrolls in its own card
   ───────────────────────────────────────────────────────────────────────── */

/* The Priority brief and the 3-KPI row are siblings in .panels, so an unbounded brief scrolled the KPI cards
   off the top. Bound the card to the viewport and give its BODY the overflow: the card head stays fixed, the
   KPI row above is outside the card entirely, and reading the brief no longer moves anything else.
   Reserve ≈ topbar (64) + .panels padding (48) + page-head (~104) + KPI row (~118) + gaps. */
body.redesign .today-brief {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 344px);
  overflow: hidden;
}

body.redesign .today-brief .card-head {
  flex: 0 0 auto;
}

body.redesign .today-brief-scroll {
  flex: 1 1 auto;
  min-height: 220px;
  overflow-y: auto;
}