/* =========================================================
   Project Control Hub — Stylesheet
   Design language: "instrument panel" — dark control-room
   surface, status "lamps", mono readouts for data, a
   geometric display face for structure and a humane sans
   for body copy.
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
a { color: inherit; }
button { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- Design tokens ---------- */
:root {
  /* surfaces */
  --bg: #0a0e16;
  --bg-soft: #0d1320;
  --surface: #141b2d;
  --surface-2: #1b2438;
  --surface-3: #222d44;
  --border: #273047;
  --border-soft: #1c2538;

  /* text — improved contrast for executive dark theme */
  --text: #f0f4fc;
  --text-dim: #bbc8e8;
  --text-faint: #8fa0c4;

  /* brand accent — "signal teal" */
  --accent: #38e1c6;
  --accent-strong: #5ef0d8;
  --accent-dim: rgba(56, 225, 198, 0.13);
  --accent-ring: rgba(56, 225, 198, 0.35);

  /* status lamps */
  --c-progress: #5b9dff;
  --c-progress-bg: rgba(91, 157, 255, 0.14);
  --c-done: #3ddc97;
  --c-done-bg: rgba(61, 220, 151, 0.14);
  --c-risk: #f5b94e;
  --c-risk-bg: rgba(245, 185, 78, 0.14);
  --c-blocked: #fb6b6b;
  --c-blocked-bg: rgba(251, 107, 107, 0.14);

  /* type */
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  /* layout */
  --sidebar-w: 264px;
  --topbar-h: 72px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 14px 32px -18px rgba(0, 0, 0, 0.6);
}

body {
  background: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 18% -10%, rgba(56, 225, 198, 0.07), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(91, 157, 255, 0.05), transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Scrollbars ---------- */
* { scrollbar-color: var(--surface-3) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 8px;
  border: 2px solid var(--bg);
}

/* ---------- App shell ---------- */
.app {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  border-right: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.brand__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  border: 1px solid var(--accent-ring);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

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

.brand__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.brand__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Nav ---------- */
.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  flex: 1;
  overflow-y: auto;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav__item:hover {
  background: var(--surface);
  color: var(--text);
}

.nav__item.is-active {
  background: var(--accent-dim);
  border-color: var(--accent-ring);
  color: var(--accent-strong);
}

.nav__icon {
  display: flex;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.nav__icon svg { width: 100%; height: 100%; }

.nav__label { white-space: nowrap; }

/* ---------- Sidebar footer ---------- */
.sidebar__footer {
  padding: 14px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overall-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.overall-status__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.overall-status__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.overall-status__value {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar__updated {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  padding: 2px 4px;
}

/* ---------- Lamps (status indicators) ---------- */
.lamp {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}
.lamp--sm { width: 7px; height: 7px; }

.lamp--progress, .lamp--in_progress { background: var(--c-progress); box-shadow: 0 0 0 4px var(--c-progress-bg); }
.lamp--done { background: var(--c-done); box-shadow: 0 0 0 4px var(--c-done-bg); }
.lamp--risk { background: var(--c-risk); box-shadow: 0 0 0 4px var(--c-risk-bg); animation: lamp-pulse 2.6s ease-in-out infinite; }
.lamp--blocked { background: var(--c-blocked); box-shadow: 0 0 0 4px var(--c-blocked-bg); animation: lamp-pulse 2.6s ease-in-out infinite; }

@keyframes lamp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.42; }
}

/* ---------- Status pill ---------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-pill--in_progress { background: var(--c-progress-bg); color: var(--c-progress); }
.status-pill--done { background: var(--c-done-bg); color: var(--c-done); }
.status-pill--risk { background: var(--c-risk-bg); color: var(--c-risk); }
.status-pill--blocked { background: var(--c-blocked-bg); color: var(--c-blocked); }

/* ---------- Top bar ---------- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--topbar-h);
  padding: 14px 32px;
  background: rgba(10, 14, 22, 0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}

.search {
  position: relative;
  flex: 1 1 320px;
  max-width: 460px;
}

.search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  pointer-events: none;
}

.search input[type="search"] {
  width: 100%;
  padding: 10px 14px 10px 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.search input[type="search"]::placeholder { color: var(--text-faint); }
.search input[type="search"]:focus {
  border-color: var(--accent-ring);
  background: var(--surface-2);
}
.search input[type="search"]::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }

.search__results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  max-height: 420px;
  overflow-y: auto;
  z-index: 50;
  display: none;
}
.search__results.is-open { display: block; }

.search-group__label {
  padding: 10px 14px 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.search-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  border-radius: 0;
}
.search-result:hover, .search-result:focus-visible { background: var(--surface-3); }
.search-result__title { font-size: 13px; font-weight: 500; }
.search-result__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

.search-empty {
  padding: 16px 14px;
  font-size: 13px;
  color: var(--text-faint);
}

/* Inline badges in search results for hidden / deleted tasks */
.search-result__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.search-result__badge--hidden  { background: rgba(245,185,78,.14);  color: var(--c-risk); }
.search-result__badge--deleted { background: rgba(251,107,107,.14); color: var(--c-blocked); }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-bar__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-right: 2px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-chip:hover { color: var(--text); border-color: var(--surface-3); }
.filter-chip.is-active {
  background: var(--accent-dim);
  border-color: var(--accent-ring);
  color: var(--accent-strong);
}

/* ---------- Content area ---------- */
.content {
  flex: 1;
  padding: 28px 40px 64px;
  max-width: 1800px;
  width: 100%;
}

.view { display: none; }
.view.is-active {
  display: block;
  min-height: calc(100vh - var(--topbar-h));
  animation: view-in 0.25s ease;
}

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

.view__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}

.view__header h1 {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.view__subtitle {
  color: var(--text-dim);
  font-size: 17px;
  max-width: 64ch;
}

.btn-export {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-export:hover { color: var(--accent); border-color: var(--accent-ring); }
.btn-export:active { color: var(--accent-strong); }


/* ---------- Panels ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}

.panel__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel__title .panel__link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.panel__title .panel__link:hover { color: var(--accent-strong); }

/* ---------- Metrics grid (dashboard) ---------- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 225, 198, 0.06), transparent 55%);
  pointer-events: none;
}

.metric-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.metric-card__value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.metric-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}
.metric-card__delta--up { color: var(--c-done); }
.metric-card__delta--down { color: var(--c-blocked); }
.metric-card__delta--flat { color: var(--text-dim); }

.metric-card__note {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}

.metric-card__full {
  font-size: 11.5px;
  color: var(--text-dim);
}

/* ---------- Dashboard 3-col grid ---------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
  align-items: start;
}

/* ---------- Status banner (RAG) ---------- */
.status-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin-bottom: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.status-banner__lamp {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.status-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-banner__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.status-banner__value {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.status-banner__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  font-size: 13px;
  color: var(--text-dim);
}

.status-banner__pilot {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent-ring);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.status-banner__updated {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ---------- Section label ---------- */
.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 12px;
}
h2.section-label:not(:first-of-type) { margin-top: 8px; }

/* ---------- KPI grid (Dashboard) ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kpi-card:hover { border-color: var(--accent-ring); background: var(--accent-dim); }

.kpi-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.kpi-card__value {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 650;
  line-height: 1;
}

.kpi-card__sub {
  font-size: 13px;
  color: var(--text-dim);
}

/* Archive line on Action Plan KPI card (hidden/deleted/invalid counts) */
.kpi-card__archive {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
}

/* ---------- Direction Progress Grid (4.3.2.1) ---------- */
.dir-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.dir-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-card);
}

.dir-card--empty {
  opacity: 0.55;
  border-style: dashed;
}

.dir-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dir-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dir-card__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.dir-card__badge--empty {
  color: var(--text-faint);
}

.dir-card__progress-bar {
  height: 4px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}

.dir-card__progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
  min-width: 2px; /* visible even at 0% with tasks */
}

.dir-card__stats {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dir-card__pct {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

.dir-card__breakdown {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.4;
}

.dir-card__note {
  font-size: 12px;
  color: var(--text-faint);
}

.dir-card__archive {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
}

/* ---------- Universal link field (Quick Links, Redash URL, A/B links) ---------- */
.link-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.link-edit {
  flex: 1 1 160px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  transition: border-color 0.15s ease;
}
.link-edit:hover { border-color: var(--border); }
.link-edit:focus { outline: none; border-color: var(--accent-ring); }
.link-edit::placeholder { color: var(--text-faint); }

.link-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.link-open:hover { color: var(--accent-strong); }
.link-open.is-disabled {
  color: var(--text-faint);
  cursor: not-allowed;
  pointer-events: none;
}

.link-empty {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-faint);
  white-space: nowrap;
}

.link-status {
  display: block;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 6px;
}

/* ---------- Quick Links (Dashboard) ---------- */
.quicklinks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.link-card__label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.link-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.link-card__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.link-card__open:hover { color: var(--accent-strong); }
.link-card__open.is-disabled {
  color: var(--text-faint);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Scaling grid (Dashboard) ---------- */
.scaling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}

.scaling-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.scaling-card--active {
  border-color: var(--accent-ring);
  background: linear-gradient(160deg, var(--accent-dim), var(--surface) 60%);
}

.scaling-card--empty { opacity: 0.6; }

.scaling-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.scaling-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.scaling-card__badge {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-faint);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.scaling-card__badge--active {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent-ring);
}

.scaling-card__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 2px;
}

.scaling-card__note {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.5;
}

/* ---------- Changes list ---------- */
.changes-list { display: flex; flex-direction: column; gap: 12px; }
.changes-list li {
  display: flex;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.changes-list time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  padding-top: 2px;
}
.changes-list span.change-text { color: var(--text-dim); }

/* ---------- Mini list (top risks / next actions) ---------- */
.mini-list { display: flex; flex-direction: column; gap: 10px; }

.mini-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.mini-item:hover { border-color: var(--surface-3); background: var(--surface-3); }

.mini-item__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.mini-item__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.mini-item__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ---------- Redash grid ---------- */
.redash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
  gap: 18px;
}
.redash-grid--full { margin-top: 0; }

.redash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-card);
}

.redash-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.redash-card__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
}

.redash-card__category {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent-ring);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.redash-card__desc { color: var(--text-dim); font-size: 17px; line-height: 1.65; flex: 1; }

.redash-card__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
}

.redash-card__link-row {
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}

.redash-card__updated {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

.redash-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 12.5px;
  white-space: nowrap;
}
.redash-card__link:hover { color: var(--accent-strong); }
.redash-card__link svg { width: 13px; height: 13px; }

.redash-card__link--pending {
  color: var(--text-faint);
  font-size: 11.5px;
  font-style: normal;
  cursor: default;
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.redash-card__link--pending:hover { color: var(--text-faint); }

.redash-card__pin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}
.redash-card__pin svg { width: 12px; height: 12px; color: var(--c-risk); }

/* ---------- Tables ---------- */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.table-wrap--compact tbody td { padding: 14px 16px; }

table { width: 100%; border-collapse: collapse; }

thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  font-weight: 500;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}

tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  font-size: 13px;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color 0.15s ease; }
tbody tr:hover { background: var(--surface-2); }

td.cell-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

.cell-title { font-weight: 650; font-size: 26px; margin-bottom: 4px; line-height: 1.4; }
.cell-desc { color: var(--text-dim); font-size: 17px; line-height: 1.6; }
.cell-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.cell-notes { color: var(--text-faint); font-size: 13px; margin-top: 6px; line-height: 1.5; }

/* ---------- Action Plan: compact editable table ---------- */
.cell-id-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 6px;
  white-space: nowrap;
}

.ap-table th:first-child, .ap-table td:first-child { width: 30px; padding-right: 0; }
.ap-table th:nth-child(3), .ap-table td:nth-child(3) { width: 188px; }
.ap-table th:nth-child(4), .ap-table td:nth-child(4) { width: 134px; }
.ap-table th:nth-child(5), .ap-table td:nth-child(5) { width: 154px; }
.ap-table th:nth-child(6), .ap-table td:nth-child(6) { width: 148px; }

.ap-toggle {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  font-family: var(--font-mono);
}
.ap-toggle:hover { color: var(--accent); }

tr.ap-details { display: none; }
tr.ap-details.is-open { display: table-row; }
tr.ap-details td { padding-top: 0; }

.ap-edit {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 8px;
  transition: border-color 0.15s ease;
}
.ap-edit:hover { border-color: var(--border); }
.ap-edit:focus { outline: none; border-color: var(--accent-ring); }
.ap-edit--text { font-family: var(--font-body); }
select.ap-edit { cursor: pointer; }
input.ap-edit[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

/* ---------- Save Bar (topbar) ---------- */
.save-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  font-size: 13px;
}

.save-bar__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.save-bar__status {
  font-weight: 600;
  color: var(--c-done);
}
.save-bar__status.is-dirty { color: var(--c-risk); }

.save-bar__time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

.save-bar__actions {
  display: flex;
  gap: 8px;
}

.save-bar__btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.save-bar__btn:hover { border-color: var(--accent-ring); background: var(--accent-dim); }
.save-bar__btn--save { color: var(--accent); border-color: var(--accent-ring); }
.save-bar__btn--reset { color: var(--text-dim); }

/* ---------- Action Plan: direction tabs + toolbar ---------- */
.ap-direction-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 8px;
  display: block;
}

.ap-direction-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ap-direction-tab {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.ap-direction-tab:hover { border-color: var(--accent-ring); color: var(--text); }
.ap-direction-tab.is-active {
  background: var(--accent-dim);
  border-color: var(--accent-ring);
  color: var(--accent);
}

.ap-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* btn-primary: accent action button (was missing definition) */
.btn-primary {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-ring);
  background: var(--accent-dim);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  line-height: 1.4;
}
.btn-primary:hover {
  background: rgba(56, 225, 198, 0.22);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.btn-primary:active { background: rgba(56, 225, 198, 0.28); }

.btn-secondary {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  line-height: 1.4;
}
.btn-secondary:hover { border-color: var(--accent-ring); background: var(--accent-dim); color: var(--text); }

.btn-sm {
  font-size: 12px;
  padding: 6px 12px;
}

/* ---------- Action Plan: empty state ---------- */
.ap-empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  color: var(--text-dim);
  font-size: 15px;
  margin-bottom: 16px;
}

/* ---------- Action Plan: full-field task cards (new tasks) ---------- */
.ap-task-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap-task-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-task-card__title-row .ap-edit {
  font-size: 18px;
  font-weight: 650;
  font-family: var(--font-display);
  padding: 8px 10px;
}

.ap-task-card__id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

.ap-task-card textarea.ap-edit {
  font-family: var(--font-body);
  font-size: 15px;
  resize: vertical;
  min-height: 56px;
}

.ap-task-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.ap-task-card__field { display: flex; flex-direction: column; gap: 4px; }


/* ---------- Tag chips ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag-chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  white-space: nowrap;
}

/* inline cross-reference link inside prose (e.g. "см. AP-7") */
.id-link {
  font-family: var(--font-mono);
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px dotted var(--accent-ring);
  white-space: nowrap;
}
.id-link:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }

.cell-desc b, .cell-notes b, .timeline-card__desc b {
  color: var(--text);
  font-weight: 600;
}

/* relation chip — clickable cross-reference */
.rel-chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.rel-chip:hover { background: var(--surface-3); border-color: var(--accent-ring); }

/* ---------- Severity / priority badges ---------- */
.sev-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.sev-badge--high { background: var(--c-blocked-bg); color: var(--c-blocked); }
.sev-badge--medium { background: var(--c-risk-bg); color: var(--c-risk); }
.sev-badge--low { background: var(--c-progress-bg); color: var(--c-progress); }

/* ---------- Roadmap: scaling note ---------- */
.roadmap-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 20px;
}

/* ---------- Risks: management cards ---------- */
.risk-grid { display: flex; flex-direction: column; gap: 14px; }

.risk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}

.risk-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.risk-card__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
}

.risk-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 4px;
}

.risk-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.risk-card__owner { font-size: 13px; color: var(--text-dim); }

/* ---------- Timeline (Roadmap / Decisions) ---------- */
.timeline { display: flex; flex-direction: column; gap: 0; }

.timeline-group { margin-bottom: 28px; }
.timeline-group:last-child { margin-bottom: 0; }

.timeline-group__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: 14px;
  padding-left: 28px;
}

.timeline-item {
  position: relative;
  padding: 0 0 22px 28px;
  border-left: 1px solid var(--border);
}
.timeline-item:last-child { padding-bottom: 0; border-left-color: transparent; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
}
.timeline-item.is-status-done::before { border-color: var(--c-done); }
.timeline-item.is-status-in_progress::before { border-color: var(--c-progress); }
.timeline-item.is-status-risk::before { border-color: var(--c-risk); }
.timeline-item.is-status-blocked::before { border-color: var(--c-blocked); }

.timeline-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.timeline-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.timeline-card__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
}

.timeline-card__desc { color: var(--text-dim); font-size: 17px; line-height: 1.65; margin-bottom: 8px; }

.timeline-card__notes {
  font-size: 12px;
  color: var(--text-faint);
  border-top: 1px solid var(--border-soft);
  padding-top: 8px;
  margin-top: 6px;
  line-height: 1.5;
}

.timeline-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 8px;
}

/* ---------- Glossary ---------- */
.glossary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.glossary-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.glossary-item__term {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--accent);
  margin-bottom: 4px;
}
.glossary-item__def {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ---------- A/B test cards ---------- */
.ab-grid { display: flex; flex-direction: column; gap: 16px; }

/* ---------- A/B Tests: counters + filters ---------- */
.ab-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ab-counter {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.ab-counter__value { font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.ab-counter__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-top: 4px;
}
.ab-counter--risk .ab-counter__value { color: var(--c-risk); }

.ab-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.ab-filter-select {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
}
.ab-filter-select:focus { outline: none; border-color: var(--accent-ring); }

.is-ab-filtered-out { display: none !important; }

/* ---------- A/B Tests: card field grid ---------- */
.ab-segment-badge {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-ring);
  white-space: nowrap;
}

.ab-card__title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ab-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 20px;
  margin: 14px 0;
}
.ab-field--wide { grid-column: 1 / -1; }
.field-label, .ab-field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 5px;
}
.ab-field__value { font-size: 17px; color: var(--text); line-height: 1.65; }
.ab-link--missing { color: var(--text-faint); font-size: 12.5px; }
.ab-field__value a.ab-link { color: var(--accent); text-decoration: none; }
.ab-field__value a.ab-link:hover { color: var(--accent-strong); }

.ab-card__result {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.ab-card__result-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 5px;
}

.ab-details-toggle { margin-top: 12px; padding: 4px 0; }
.ab-details { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.ab-details.is-open { display: block; }

.ab-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
}

.ab-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ab-card__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
}

.ab-card__dates {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
}

.ab-card__hypothesis {
  font-size: 17px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
.ab-card__hypothesis b { color: var(--text); }

.ab-metrics-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}
.ab-metrics-table th, .ab-metrics-table td {
  padding: 9px 12px;
  font-size: 12.5px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
.ab-metrics-table th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
}
.ab-metrics-table td.metric-name { font-weight: 600; }
.ab-metrics-table td.metric-delta { font-family: var(--font-mono); }
.ab-metrics-table td.metric-delta--pos { color: var(--c-done); }
.ab-metrics-table td.metric-delta--neg { color: var(--c-blocked); }
.ab-metrics-table tr:last-child th, .ab-metrics-table tr:last-child td { border-bottom: none; }

.ab-card__segments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  font-size: 12.5px;
}
.ab-card__segments-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.ab-card__segment { color: var(--text); }
.ab-card__segments-vs {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

.ab-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.ab-pvalue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.ab-pvalue--significant { background: var(--c-done-bg); color: var(--c-done); border-color: rgba(61,220,151,0.3); }
.ab-pvalue--not-significant { background: var(--c-risk-bg); color: var(--c-risk); border-color: rgba(245,185,78,0.3); }
.ab-pvalue--pending { background: var(--surface-3); color: var(--text-faint); border-color: var(--border); }

.ab-sample {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
}
.ab-sample--pending { font-style: italic; }

.ab-card__conclusion {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}
.ab-card__conclusion-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 6px;
}

/* ---------- Empty state ---------- */
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}
.empty-state strong { color: var(--text-dim); }

/* ---------- Highlight (search/cross-ref target) ---------- */
@keyframes highlight-flash {
  0% { box-shadow: 0 0 0 3px var(--accent-ring); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
.is-highlighted {
  animation: highlight-flash 1.8s ease-out;
  border-radius: var(--radius-lg);
}

/* ---------- Filter visibility ---------- */
.is-filtered-out { display: none !important; }

/* ---------- Footer ---------- */
.page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 32px 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  border-top: 1px solid var(--border-soft);
}
.page-footer code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}

/* ---------- Mobile nav toggle ---------- */
.nav-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 14, 0.6);
  z-index: 35;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid .panel:first-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 20px 0 60px rgba(0,0,0,0.4);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar.is-open ~ .sidebar-overlay,
  body.nav-open .sidebar-overlay { display: block; }

  .content { padding: 24px 16px 48px; }
  .topbar { padding: 14px 16px 14px 64px; }
  .page-footer { padding: 14px 16px 24px; }

  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid .panel:first-child { grid-column: auto; }

  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .view__header h1 { font-size: 34px; }
  .ab-card { padding: 16px; }
  .table-wrap { overflow-x: auto; }
  table { min-width: 640px; }
  .ap-table { min-width: 1100px; }

  .status-banner { flex-direction: column; align-items: flex-start; }
  .status-banner__meta { margin-left: 0; flex-direction: column; align-items: flex-start; gap: 8px; }

  .save-bar {
    margin-left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .save-bar__info { text-align: left; flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
  .save-bar__actions { flex-wrap: wrap; }
  .save-bar__btn { flex: 1 1 auto; }

  .view__header { flex-wrap: wrap; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lamp--risk, .lamp--blocked, .view.is-active, .is-highlighted { animation: none; }
}

/* =========================================================
   Dashboard MVP — full-width layout (не затрагивает другие вкладки)
   ========================================================= */

/* Убрать max-width у .content только когда активен Dashboard.
   :has() поддерживается в Chrome 105+, Firefox 121+, Safari 15.4+ */
.content:has(#view-dashboard.is-active) {
  max-width: none;
}

/* Секция Dashboard — полная ширина */
#view-dashboard {
  width: 100%;
  max-width: none;
}

/* KPI Cards: 4 карточки фиксированной max-ширины — не разъезжаются на 4K */
#view-dashboard .kpi-grid {
  grid-template-columns: repeat(4, minmax(200px, 340px));
}

/* Quick Links: auto-fill на полной ширине */
#view-dashboard .quicklinks-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Executive Control Center: адаптивно на широком экране */
#view-dashboard .exec-control-grid {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

/* ECC панели: 110px вместо 160px — компактнее при пустых данных */
#view-dashboard .control-panel {
  min-height: 110px;
}


/* Pilot Segments — единый стиль для всех неактивных сегментов */
.pilot-segments {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.pilot-seg {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 0.65;
}

.pilot-seg--active {
  opacity: 1;
  border-color: var(--accent-ring);
  background: linear-gradient(145deg, var(--accent-dim), var(--surface) 70%);
}

.pilot-seg__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.pilot-seg--active .pilot-seg__name { color: var(--accent); }

.pilot-seg__status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.pilot-seg--active .pilot-seg__status { color: var(--accent-strong); }

.pilot-seg__note {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* Activity Log Accordion in Action Plan */
.act-log-accordion {
  margin-top: 32px;
  border-top: 1px solid var(--border-soft);
}

.act-log-accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 4px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.act-log-accordion__btn:hover { color: var(--text); }

.act-log-accordion__icon {
  font-size: 12px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.act-log-accordion__body {
  padding-bottom: 24px;
}


/* =========================================================
   Roadmap 2.1 — Segments + Google Sheets + Full Width
   ========================================================= */

/* Full width — same pattern as Dashboard */
.content:has(#view-roadmap.is-active) { max-width: none; }
#view-roadmap { width: 100%; max-width: none; }

.rm-loading {
  display: flex; align-items: center; gap: 12px;
  padding: 32px; color: var(--text-dim); font-size: 14px;
}
.rm-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%;
  animation: rm-spin 0.7s linear infinite; flex-shrink: 0;
}
@keyframes rm-spin { to { transform: rotate(360deg); } }

.rm-error {
  padding: 28px 24px; background: var(--surface);
  border: 1px solid var(--c-blocked-bg); border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 14px;
}
.rm-error__msg { font-size: 14px; color: var(--text-dim); }

/* Segment empty state */
.rm-seg-empty {
  padding: 32px; text-align: center;
  border: 1px dashed var(--border-soft); border-radius: var(--radius-md);
  color: var(--text-faint); font-size: 14px;
}
.rm-seg-empty__hint { margin-top: 8px; font-size: 13px; opacity: 0.7; }

/* Collection label (Level 2) */
.rm-collection-label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 16px 0 8px;
  margin-bottom: 10px;
}

/* Level 3: Source tabs with move button */
.rm-source-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.rm-source-tab-wrap { position: relative; display: flex; align-items: center; gap: 2px; }

.rm-source-tab {
  padding: 7px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text-dim);
  font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.12s, color 0.12s, background-color 0.12s;
}
.rm-source-tab:hover { border-color: var(--accent-ring); color: var(--text); }
.rm-source-tab.is-active { background: var(--surface-2); color: var(--text); border-color: var(--accent-ring); }

.rm-move-btn {
  padding: 6px 8px; font-size: 12px; line-height: 1;
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: none; color: var(--text-faint); cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.rm-move-btn:hover { color: var(--accent); border-color: var(--accent-ring); }

/* Move dropdown */
.rm-move-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  z-index: 200;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 8px;
  min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  flex-direction: column; gap: 2px;
}
.rm-move-menu.is-open { display: flex; }
.rm-move-menu__title {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-faint);
  padding: 4px 8px 6px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px;
}
.rm-move-opt {
  padding: 7px 10px; border-radius: 6px; text-align: left;
  font-size: 13px; font-family: inherit;
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
}
.rm-move-opt:hover { background: var(--surface-3); color: var(--text); }
.rm-move-opt.is-current { color: var(--accent); font-weight: 600; }

/* Header */
.rm-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.rm-header__meta { display: flex; flex-direction: column; gap: 3px; }
.rm-header__dir  { font-size: 15px; font-weight: 700; color: var(--text); }
.rm-header__resp { font-size: 13px; color: var(--text-dim); }

.rm-counters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rm-counter {
  font-size: 13px; color: var(--text-dim);
  padding: 4px 10px; border-radius: 20px;
  background: var(--surface-2); white-space: nowrap;
}
.rm-counter strong { color: var(--text); font-weight: 700; }
.rm-c--done strong    { color: var(--c-done); }
.rm-c--wip strong     { color: var(--c-risk); }
.rm-c--risk strong    { color: var(--c-blocked); }
.rm-c--overdue strong { color: var(--c-blocked); }

/* Controls */
.rm-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.rm-search {
  flex: 1; min-width: 180px; max-width: 280px;
  padding: 8px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); font-size: 13px; font-family: inherit;
}
.rm-search:focus { outline: none; border-color: var(--accent-ring); }
.rm-search::placeholder { color: var(--text-faint); }

.rm-filters, .rm-sort { display: flex; gap: 6px; flex-wrap: wrap; }
.rm-filter-btn, .rm-sort-btn {
  padding: 6px 12px; font-size: 12.5px; font-weight: 500; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--text-dim); cursor: pointer; white-space: nowrap;
  transition: border-color 0.12s, color 0.12s, background-color 0.12s;
}
.rm-filter-btn:hover, .rm-sort-btn:hover { border-color: var(--accent-ring); color: var(--text); }
.rm-filter-btn.is-active, .rm-sort-btn.is-active { border-color: var(--accent-ring); background: var(--accent-dim); color: var(--accent); }

/* Table — full width, horizontal scroll */
.rm-table-wrap {
  width: 100%; overflow-x: auto;
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--surface);
}
.rm-table { min-width: 1600px; width: 100%; border-collapse: collapse; font-size: 13px; }

.rm-th {
  padding: 10px 14px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); text-align: left;
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
.rm-th--num     { width: 72px; min-width: 72px; }
.rm-th--task    { min-width: 420px; max-width: 620px; white-space: normal; }
.rm-th--comment { min-width: 360px; max-width: 520px; white-space: normal; }
.rm-th--week    { width: 50px; min-width: 50px; max-width: 50px; text-align: center; padding: 10px 4px; }

.rm-td {
  padding: 9px 14px; border-bottom: 1px solid var(--border-soft);
  color: var(--text-dim); vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-td--task    { white-space: normal; word-break: break-word; min-width: 420px; max-width: 620px; line-height: 1.5; }
.rm-td--comment { white-space: normal; word-break: break-word; min-width: 360px; max-width: 520px; line-height: 1.5; }
.rm-td--status  { white-space: nowrap; }
.rm-td--week    { text-align: center; padding: 9px 4px; width: 50px; }
.rm-td--week-empty { background: transparent; }

.rm-table tbody tr:last-child .rm-td { border-bottom: none; }
.rm-table tbody tr:hover .rm-td { background: var(--surface-2); }

/* Group row */
.rm-group-row .rm-group-cell {
  padding: 10px 14px; font-size: 12px; font-weight: 700;
  color: var(--text-faint); background: var(--surface-3);
  border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
  text-transform: none; letter-spacing: 0;
}

/* Week mark */
.rm-week-mark {
  display: inline-block; min-width: 32px; height: 18px;
  border-radius: 3px; line-height: 18px; font-size: 10px;
  text-align: center; background: var(--surface-3); color: var(--text-faint);
  padding: 0 3px;
}

/* Status badges */
.rm-status-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.04em; padding: 2px 8px; border-radius: 4px; white-space: nowrap;
}
.rm-s--done    { background: var(--c-done-bg);    color: var(--c-done); }
.rm-s--wip     { background: var(--c-risk-bg);    color: var(--c-risk); }
.rm-s--risk    { background: var(--c-blocked-bg); color: var(--c-blocked); }
.rm-s--blocked { background: rgba(180,20,20,.18); color: #d04040; }
.rm-s--other   { background: var(--surface-3);    color: var(--text-dim); }
.rm-s--empty   { background: var(--surface-3);    color: var(--text-faint); }

.rm-td--week.rm-s--done    .rm-week-mark { background: var(--c-done-bg);    color: var(--c-done); }
.rm-td--week.rm-s--wip     .rm-week-mark { background: var(--c-risk-bg);    color: var(--c-risk); }
.rm-td--week.rm-s--risk    .rm-week-mark { background: var(--c-blocked-bg); color: var(--c-blocked); }
.rm-td--week.rm-s--blocked .rm-week-mark { background: rgba(180,20,20,.18); color: #d04040; }

/* Priority */
.rm-prio { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.rm-prio--high { background: var(--c-blocked-bg); color: var(--c-blocked); }
.rm-prio--mid  { background: var(--c-risk-bg);    color: var(--c-risk); }
.rm-prio--low  { background: var(--surface-3);    color: var(--text-faint); }

.rm-empty { padding: 24px; text-align: center; color: var(--text-faint); font-size: 14px; }


/* Direction card — archive state (S2) */
.dir-card--archive {
  border-color: var(--border-soft);
  background: var(--surface);
  opacity: 0.75;
}
.dir-card--archive .dir-card__name { color: var(--text-faint); }
.dir-card--archive .dir-card__badge { color: var(--text-faint); }
.dir-card--archive .dir-card__note  { color: var(--text-faint); font-style: italic; }

/* Scaling card — archive state (S2) */
.scaling-card--archive {
  opacity: 0.75;
  border-color: var(--border-soft);
  background: var(--surface);
}
.scaling-card--archive .scaling-card__title { color: var(--text-faint); }
.scaling-card--archive .scaling-card__badge { color: var(--text-faint); background: var(--surface-3); border-color: var(--border-soft); }

/* Action Plan S2 archive banner */
.ap-archive-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text-faint);
  font-size: 13px;
}
.ap-archive-banner__icon { font-size: 18px; flex-shrink: 0; }
.ap-archive-banner__text { line-height: 1.5; }
.ap-archive-banner__text strong { display: block; color: var(--text-dim); margin-bottom: 2px; }


.exec-summary__empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 32px;
  color: var(--text-dim);
}

.exec-summary__empty-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1.3;
}

.exec-summary__empty-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}

.exec-summary__empty-text strong {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

/* =========================================================
   4.5.0 — Segment Catalog: A/B Tests V2 + Roadmap V2
   ========================================================= */

/* View header with action button */
.view__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.view__header > div { flex: 1; }

/* Segment tabs */
.seg-tabs-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.seg-tab {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background-color 0.12s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.seg-tab:hover { border-color: var(--accent-ring); color: var(--text); }
.seg-tab.is-active { background: var(--surface-2); color: var(--text); border-color: var(--accent-ring); }
.seg-tab--primary { font-weight: 700; }
.seg-tab--primary.is-active { border-color: var(--accent-ring); color: var(--accent); }

.seg-tab__count {
  background: var(--surface-3);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 10px;
}
.seg-tab.is-active .seg-tab__count { background: var(--accent-dim); color: var(--accent); }

/* Segment section labels */
.seg-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 16px 0 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
}

/* Segment card */
.seg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.12s;
}
.seg-card:hover { border-color: var(--border); }
.seg-card--historical { opacity: 0.82; border-style: dashed; }
.seg-card--historical:hover { border-color: var(--text-faint); }

.seg-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.seg-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.seg-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.seg-card__meta {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
  line-height: 1.6;
}
.seg-card__result { font-style: italic; color: var(--text-faint); }

.seg-card__actions { display: flex; gap: 8px; flex-shrink: 0; }

.seg-card__toggle {
  font-size: 13px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.seg-card__toggle:hover { color: var(--text); }

.seg-card__details-wrap { margin-top: 12px; }
.seg-card__field { margin-bottom: 12px; }
.seg-card__field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.seg-card__field-value {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}
.seg-card__links { display: flex; gap: 10px; margin-top: 10px; }
.seg-card__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid var(--accent-ring);
  border-radius: var(--radius-md);
  transition: background-color 0.12s;
}
.seg-card__link:hover { background: var(--accent-dim); }

/* A/B Status badges */
.seg-status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.seg-status--active        { background: rgba(56,225,198,.15); color: var(--accent); }
.seg-status--needs_update  { background: var(--c-risk-bg);     color: var(--c-risk); }
.seg-status--deprecated    { background: var(--surface-3);     color: var(--text-faint); text-decoration: line-through; }

/* Decisions statuses */
.seg-status--pending   { background: var(--c-risk-bg);    color: var(--c-risk); }
.seg-status--cancelled { background: var(--surface-3);    color: var(--text-faint); text-decoration: line-through; }

/* Risks statuses */
.seg-status--open      { background: var(--c-blocked-bg); color: var(--c-blocked); }
.seg-status--mitigated { background: rgba(56,225,198,.12); color: var(--accent); }
.seg-status--accepted  { background: var(--c-risk-bg);    color: var(--c-risk); }
.seg-status--closed    { background: var(--c-done-bg);    color: var(--c-done); }

.seg-status--planned   { background: var(--surface-3);      color: var(--text-dim); }
.seg-status--running   { background: rgba(56,225,198,.15);  color: var(--accent); }
.seg-status--in_progress { background: rgba(56,225,198,.15); color: var(--accent); }
.seg-status--paused    { background: var(--c-risk-bg);      color: var(--c-risk); }
.seg-status--on_hold   { background: var(--c-risk-bg);      color: var(--c-risk); }
.seg-status--done      { background: var(--c-done-bg);      color: var(--c-done); }
.seg-status--cancelled { background: var(--surface-3);      color: var(--text-faint); text-decoration: line-through; }

/* Priority badges (Roadmap) */
.seg-priority {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.seg-priority--high   { background: var(--c-blocked-bg); color: var(--c-blocked); }
.seg-priority--medium { background: var(--c-risk-bg);    color: var(--c-risk); }
.seg-priority--low    { background: var(--surface-3);    color: var(--text-faint); }

/* Onboarding card — replaces plain empty state in catalog sections */
.seg-onboarding {
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.seg-onboarding__head {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dim);
}

.seg-onboarding__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.seg-onboarding__item {
  font-size: 13.5px;
  color: var(--text-faint);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.seg-onboarding__item::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--text-faint);
}

/* Empty state */
.seg-empty {
  padding: 40px 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.seg-empty__text { color: var(--text-dim); font-size: 15px; margin-bottom: 18px; }
.seg-empty__btn  { display: inline-block; }

/* Ghost / danger button */
.btn-ghost {
  padding: 5px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-faint);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.btn-ghost:hover { color: var(--c-blocked); border-color: var(--c-blocked-bg); }

/* Segment Overlay (create / edit) */
.seg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.seg-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}
.seg-overlay__panel {
  position: relative;
  z-index: 1;
  width: 480px;
  max-width: 100vw;
  height: 100dvh;
  background: var(--surface);
  box-shadow: -4px 0 24px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sof__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.sof__title { font-size: 17px; font-weight: 700; color: var(--text); }
.sof__close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--text-faint); line-height: 1;
  padding: 4px 8px; border-radius: 4px;
  transition: color 0.12s;
}
.sof__close:hover { color: var(--text); }

.sof__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sof__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sof__field { display: flex; flex-direction: column; gap: 5px; }
.sof__field--wide { grid-column: 1 / -1; }
.sof__field label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.sof__field input, .sof__field select, .sof__field textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.12s;
}
.sof__field input:focus, .sof__field select:focus, .sof__field textarea:focus {
  outline: none;
  border-color: var(--accent-ring);
}
.sof__field textarea { resize: vertical; min-height: 72px; }

.sof__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}


/* RAG lamp: No Data — серый, без анимации */
.rag-lamp--nodata {
  background: var(--text-faint);
  box-shadow: 0 0 0 3px var(--surface-3);
}

/* RAG label: No Data */
.rag-label--nodata {
  background: var(--surface-3);
  color: var(--text-faint);
}

/* Historical badge — компактный серый лейбл рядом с заголовком панели */
.historical-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--text-faint);
  border: 1px solid var(--border-soft);
  margin-left: 6px;
  vertical-align: middle;
}


/* M Segment primary KPI card — accent border */
.kpi-card--m-primary {
  border-color: var(--accent-ring);
}
.kpi-card--m-primary .kpi-card__label {
  color: var(--accent);
  font-weight: 700;
}

/* Historical / all-segments KPI card — muted */
.kpi-card--historical {
  opacity: 0.8;
}
.kpi-card--historical .kpi-card__label {
  color: var(--text-dim);
}
.kpi-card--historical .kpi-card__value {
  color: var(--text-dim);
}

/* Activity Log footer with multiple buttons */
.act-log__footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
}


/* Финансовые метрики — empty state для M Pilot */
.metrics-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-faint);
  font-size: 14px;
}
.metrics-empty__icon { font-size: 20px; flex-shrink: 0; }
.metrics-empty__text { line-height: 1.5; }

/* M (Middle) — основной пилот: визуально выделен в табах */
.ap-direction-tab--primary {
  font-weight: 700;
  border-color: var(--accent-ring);
  color: var(--accent);
}
.ap-direction-tab--primary:not(.is-active)::after {
  content: " ⭐";
  font-size: 10px;
  opacity: 0.7;
}

/* dir-card--primary: всегда для M, независимо от кол-ва задач */
.dir-card--primary {
  border-color: var(--accent-ring);
  background: var(--accent-dim);
}
.dir-card--primary .dir-card__name {
  color: var(--accent);
  font-weight: 700;
}

/* badge для основного пилота */
.dir-card__badge--primary {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-ring);
  white-space: nowrap;
  flex-shrink: 0;
}


/* Override grid to accommodate new card style */
.quicklinks-grid { gap: 12px; }

.ql-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease;
}
.ql-card:hover { border-color: var(--accent-ring); }

.ql-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.ql-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.ql-card__desc {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.4;
}

.ql-card__actions { display: flex; align-items: center; }

.ql-card__open {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  text-decoration: none;
  display: inline-block;
}

.ql-card__open--empty {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
}

/* URL input — secondary, compact, below the button */
.ql-card__edit { margin-top: 2px; }

.ql-card__url {
  font-size: 11px;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 3px 7px;
  width: 100%;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.ql-card__url:focus {
  outline: none;
  border-color: var(--accent-ring);
  color: var(--text);
  background: var(--surface-2);
}
.ql-card__url::placeholder { color: var(--text-faint); opacity: 0.6; }


.exec-control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

/* Each panel: column flex so body fills remaining height */
.control-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.control-panel__title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.control-panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.control-panel__empty {
  padding: 16px;
  font-size: 13px;
  color: var(--text-faint);
}

/* Control rows — shared by attention / critical risks / AB monitor */
.ctrl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 16px;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  background: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.12s ease;
}
.ctrl-row:last-child { border-bottom: none; }
.ctrl-row:hover { background: var(--surface-2); }

.ctrl-row__title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ctrl-row__meta {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

/* RAG dots — for A/B Monitor rows */
.rag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rag-dot--green { background: var(--c-done); }
.rag-dot--amber { background: var(--c-risk); }
.rag-dot--red   { background: var(--c-blocked); }
.rag-dot--blue  { background: var(--accent); }
.rag-dot--gray  { background: var(--text-faint); }

/* RAG labels — inline badge */
.rag-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.rag-label--green { background: var(--c-done-bg);    color: var(--c-done); }
.rag-label--amber { background: var(--c-risk-bg);    color: var(--c-risk); }
.rag-label--red   { background: var(--c-blocked-bg); color: var(--c-blocked); }
.rag-label--blue  { background: rgba(56,225,198,.14); color: var(--accent); }
.rag-label--gray  { background: var(--surface-3);    color: var(--text-faint); }

/* KPI Health panel — 4 indicator rows */
.kpi-health-item {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.kpi-health-item:last-child { border-bottom: none; }

.kpi-health-item__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.kpi-health-item__label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.kpi-health-item__detail {
  font-size: 11px;
  color: var(--text-faint);
  padding-left: 18px; /* aligns under title, past lamp */
}

/* RAG lamp with glow — for KPI Health */
.rag-lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rag-lamp--green {
  background: var(--c-done);
  box-shadow: 0 0 0 3px var(--c-done-bg);
}
.rag-lamp--amber {
  background: var(--c-risk);
  box-shadow: 0 0 0 3px var(--c-risk-bg);
  animation: lamp-pulse 2.6s ease-in-out infinite;
}
.rag-lamp--red {
  background: var(--c-blocked);
  box-shadow: 0 0 0 3px var(--c-blocked-bg);
  animation: lamp-pulse 2.6s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 700px) {
  .exec-control-grid { grid-template-columns: 1fr; }
}


/* Executive Summary — горизонтальная сетка из 7 ячеек */
.exec-summary__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 32px;
}

.exec-stat {
  background: var(--surface);
  padding: 18px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.exec-stat__value {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  transition: color 0.2s ease;
}

.exec-stat__label {
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* Цвета по статусу — загораются только при ненулевых значениях */
.exec-stat--done    .exec-stat__value { color: var(--c-done); }
.exec-stat--risk    .exec-stat__value { color: var(--c-risk); }
.exec-stat--blocked .exec-stat__value { color: var(--c-blocked); }
.exec-stat--overdue .exec-stat__value { color: var(--c-blocked); }

/* Deadline lists — Просроченные задачи и Ближайшие дедлайны */
.deadline-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 32px;
}

.deadline-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 32px;
}

.deadline-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  background: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.12s ease;
}
.deadline-row:last-child { border-bottom: none; }
.deadline-row:hover { background: var(--surface-2); }

.deadline-row__title {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deadline-row__dir {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

.deadline-row__date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.deadline-row__days {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
  min-width: 52px;
  color: var(--accent);
}
.deadline-row__days--overdue { color: var(--c-blocked); }

/* Responsive: на узких экранах схлопываем до 4 колонок */
@media (max-width: 900px) {
  .exec-summary__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .exec-summary__grid { grid-template-columns: repeat(2, 1fr); }
  .deadline-row { grid-template-columns: 1fr auto auto; }
  .deadline-row__dir { display: none; }
}


.act-log {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-bottom: 32px;
  overflow: hidden;
}

.act-log__list { }

.act-log__entry {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  line-height: 1.4;
}
.act-log__entry:last-child { border-bottom: none; }

.act-log__time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
  min-width: 38px;
}

.act-log__action {
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  white-space: nowrap;
}

.act-log__meta {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.act-log__empty {
  padding: 18px 16px;
  font-size: 13px;
  color: var(--text-faint);
}

.act-log__footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: flex-end;
}


/* Outer wrapper — groups compact row + expand panel into one card.
   Styled like AP-table rows: shared surface, border all around. */
.new-task-wrap {
  background: var(--surface);
  border-left:  1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border-soft);
}
.new-task-wrap:first-child {
  border-top: 1px solid var(--border);
  border-top-left-radius:  var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.new-task-wrap:last-child {
  border-bottom-color: var(--border);
  border-bottom-left-radius:  var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.new-task-wrap:hover { background: var(--surface-2); }
.new-task-wrap:hover .new-expand { background: var(--surface-2); }

/* Archived states */
.new-task-wrap--hidden  { opacity: 0.62; }
.new-task-wrap--deleted { opacity: 0.45; }
.new-task-wrap--deleted .new-row__title {
  text-decoration: line-through;
  color: var(--text-faint);
}

/* Compact row — horizontal flex, mirrors AP-table row */
.new-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  min-height: 52px;
}

/* Expand/collapse toggle arrow */
.new-row__toggle {
  background: none;
  border: none;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  width: 24px;
  line-height: 1;
  transition: color 0.12s ease;
}
.new-row__toggle:hover { color: var(--accent); }

/* Title — takes remaining space, single-line truncated */
.new-row__title {
  flex: 1;
  min-width: 60px;
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ID tag */
.new-row__id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

/* hidden / deleted inline badges */
.new-row__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.new-row__badge--hidden  { background: rgba(245,185,78,.12);  color: var(--c-risk); }
.new-row__badge--deleted { background: rgba(251,107,107,.12); color: var(--c-blocked); }

/* Editable fields in compact row — fixed widths keep layout stable */
.new-row__owner    { width: 140px; flex-shrink: 0; font-size: 13px; }
.new-row__date     { width: 120px; flex-shrink: 0; }
.new-row__priority { width: 112px; flex-shrink: 0; }
.new-row__status   { width: 132px; flex-shrink: 0; }

/* Action buttons group */
.new-row__actions { display: flex; gap: 5px; flex-shrink: 0; margin-left: 2px; }

/* Expand panel */
.new-expand { display: none; border-top: 1px solid var(--border-soft); }
.new-expand.is-open { display: block; }

.new-expand__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  padding: 16px 16px 18px 40px; /* left-indent aligns with row content past toggle */
}
.new-expand__field { display: flex; flex-direction: column; gap: 4px; }
.new-expand__field--full { grid-column: 1 / -1; }
.new-expand textarea.ap-edit { font-size: 14px; resize: vertical; min-height: 52px; }

/* Spacing: when ap-extra-tasks has NEW-* tasks, add gap from toolbar / AP-table */
#ap-extra-tasks:not(:empty) { margin-top: 16px; }

/* =========================================================
   4.3.1.2 — Hide NEW-* + Clear archive
   ========================================================= */

/* Hidden task card — amber tint, dotted border */
.ap-task-card--hidden {
  opacity: 0.6;
  border-style: dotted;
  border-color: rgba(245, 185, 78, 0.4);
}
.ap-task-card--hidden input[disabled] {
  color: var(--text-faint);
  cursor: default;
}

/* Banner colour variants */
.ap-hidden-banner--deleted {
  background: rgba(251, 107, 107, 0.07);
  border-color: rgba(251, 107, 107, 0.22);
  color: var(--c-blocked);
}
.ap-hidden-banner--hidden {
  background: rgba(245, 185, 78, 0.07);
  border: 1px solid rgba(245, 185, 78, 0.25);
  border-radius: 6px;
  color: var(--c-risk);
  font-size: 13px;
  padding: 7px 11px;
  margin-bottom: 12px;
}

/* Neutral button — for "Скрыть" (non-destructive) */
.btn-neutral {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.btn-neutral:hover { border-color: var(--accent-ring); background: var(--accent-dim); color: var(--text); }
.btn-neutral.btn-sm { font-size: 12px; padding: 4px 10px; }

/* Danger variant for toolbar button */
.btn-secondary--danger {
  color: var(--c-blocked);
  border-color: rgba(251, 107, 107, 0.3);
}
.btn-secondary--danger:hover {
  border-color: var(--c-blocked);
  background: rgba(251, 107, 107, 0.1);
  color: var(--c-blocked);
}

/* Actions group inside title-row (wraps multiple buttons) */
.ap-task-card__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}


/* Hidden AP rows: dimmed, hatched background */
.ap-row--hidden td,
.ap-details.ap-row--hidden td { opacity: 0.45; }
.ap-row--hidden { background: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(255,255,255,0.012) 10px, rgba(255,255,255,0.012) 11px); }

/* Tag label "скрыта" next to the task title */
.ap-hidden-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(251, 107, 107, 0.12);
  color: var(--c-blocked);
  margin-left: 8px;
  vertical-align: middle;
}

/* Banner inside expand row or deleted task card */
.ap-hidden-banner {
  background: rgba(251, 107, 107, 0.07);
  border: 1px solid rgba(251, 107, 107, 0.22);
  border-radius: 6px;
  color: var(--c-blocked);
  font-size: 13px;
  padding: 7px 11px;
  margin-bottom: 12px;
}

/* Expand row edit grid — 2 columns for link fields, full-width for text areas */
.ap-expand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 12px;
}
.ap-expand-field { display: flex; flex-direction: column; gap: 4px; }
.ap-expand-field--full { grid-column: 1 / -1; }

.ap-edit--textarea {
  font-family: var(--font-body);
  font-size: 15px;
  resize: vertical;
  min-height: 56px;
}

/* Actions row at bottom of expand */
.ap-expand-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}

/* Deleted task card — dimmed dashed border */
.ap-task-card--deleted {
  opacity: 0.5;
  border-style: dashed;
  border-color: var(--border-soft);
}
.ap-task-card--deleted input[disabled] {
  color: var(--text-faint);
  cursor: default;
}

/* Danger button (soft-delete / hide) */
.btn-danger {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(251, 107, 107, 0.35);
  background: rgba(251, 107, 107, 0.08);
  color: var(--c-blocked);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.btn-danger:hover { border-color: var(--c-blocked); background: rgba(251, 107, 107, 0.16); }

/* Restore button */
.btn-restore {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-ring);
  background: var(--accent-dim);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.btn-restore:hover { border-color: var(--accent); background: rgba(56, 225, 198, 0.2); }

/* Small variant for inline buttons inside cards */
.btn-sm { font-size: 12px; padding: 4px 10px; }

/* Toggle "Показать скрытые / удалённые" — active state */
.btn-secondary.is-active {
  background: var(--accent-dim);
  border-color: var(--accent-ring);
  color: var(--accent);
}

/* Utility */
.text-dim { color: var(--text-dim); }