/* ───────── Proxa × Traylor — responsive web app styles ───────── */
/* Layered on colors_and_type.css. Desktop-first, mobile breakpoint at 1024px. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
button { font-family: inherit; }

/* ===== App shell ===== */
.app {
  display: grid;
  grid-template-columns: 55px 1fr;
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  background: var(--bg-app);
  color: var(--fg-base);
  overflow: hidden;
}

/* ===== Desktop rail ===== */
.rail {
  background: var(--bg-app);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 12px;
  gap: 6px;
  position: relative;
  z-index: 30;
}
.rail__logo {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  margin-bottom: 6px;
  border: 0; background: transparent;
  padding: 0; cursor: pointer;
  border-radius: 8px;
  transition: background 120ms ease;
}
.rail__logo:hover { background: var(--bg-hover); }
.rail__logo:focus-visible { outline: none; background: var(--bg-hover); }
.rail__logo .hv-mark { width: 26px; height: 26px; object-fit: contain; display: block; }
.rail__rule { width: 34px; height: 1px; background: var(--border-light); margin: 2px 0 10px; }
.rail__item {
  width: 36px; height: 36px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--fg-muted); cursor: pointer; transition: background 120ms;
  background: transparent; border: none;
}
.rail__item:hover { background: var(--bg-hover); color: var(--fg-dark); }
.rail__item.is-active { background: rgba(38,24,17,0.08); color: var(--fg-dark); }
/* Two-letter hub codes in the collapsed rail (replaces the cube icon) */
.rail__abbr {
  font: 500 12px/1 'Inter'; letter-spacing: 0.01em;
  color: var(--fg-muted);
}
.rail__abbr.is-active { color: var(--fg-dark); }
.rail__groupgap { height: 12px; }
/* Collapsed-rail section headers — abbreviated caption + right chevron, accordion. */
.rail__group { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.rail__group + .rail__group { margin-top: 8px; }
.rail__grouphead {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  padding: 3px 6px; margin-bottom: 1px; border: 0; background: transparent;
  border-radius: 6px; cursor: pointer; transition: background 120ms ease;
}
.rail__grouphead:hover { background: var(--bg-hover); }
.rail__group-label {
  font: 600 9px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-light-muted, #A09792);
}
.rail__group-caret {
  display: grid; place-items: center; color: var(--fg-light-muted, #A09792);
  transition: transform 140ms ease;
}
.rail__group-caret.is-collapsed { transform: none; }              /* points right ">" */
.rail__grouphead[aria-expanded="true"] .rail__group-caret { transform: rotate(90deg); }
.rail__spacer { flex: 1; }
.rail__avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: url('../assets/avatar.jpg') center/cover;
  border: 1px solid var(--border-light);
  cursor: pointer;
}

/* ===== Hubs popover ===== */
.rail__hubwrap { position: relative; }
.hub-menu {
  position: absolute;
  left: calc(100% + 8px); top: 0;
  min-width: 220px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: var(--shadow-popover);
  padding: 6px;
  z-index: 20;
  animation: hub-menu-in 120ms ease-out;
}
@keyframes hub-menu-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hub-menu__head {
  font: 500 11px/1 'Inter';
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 10px 6px;
}
.hub-menu__item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent; border: 0;
  text-align: left;
  cursor: pointer;
  font: 400 13px/1.2 'Inter';
  color: var(--fg-base);
  letter-spacing: -0.01em;
}
.hub-menu__item:hover { background: var(--bg-hover); color: var(--fg-dark); }
.hub-menu__item.is-active { background: rgba(38,24,17,0.08); color: var(--fg-dark); }
.hub-menu__ico {
  width: 22px; height: 22px; border-radius: 4px;
  background: rgba(38,24,17,0.05);
  display: grid; place-items: center;
  color: var(--fg-muted); flex: none;
}
.hub-menu__ico svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hub-menu__label { flex: 1; }
.hub-menu__item svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Main column + page width cap ===== */
.main { overflow-y: auto; min-width: 0; scrollbar-width: none; }
.main::-webkit-scrollbar { display: none; width: 0; }
.page-content {
  max-width: 740px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  display: flex; flex-direction: column; gap: 28px;
}

/* ===== Project hero ===== */
.project-hero { display: flex; flex-direction: column; gap: 18px; }
.project-hero__title-row {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 4px;
}
.project-hero__mark {
  width: 36px; height: 36px; border-radius: 999px;
  background: #E1261C; flex: none; margin-top: 2px;
}
.project-hero__kicker {
  font: 400 13px/1.2 'Inter';
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.project-hero__title {
  font: 500 24px/1.3 'Inter';
  color: var(--fg-dark);
  letter-spacing: -0.01em;
  margin: 0;
}
.project-hero__image {
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #1a1917;
}
.project-hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.project-meta {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 24px;
  margin: 4px 0 0;
}
.project-meta__cell { display: flex; flex-direction: column; gap: 6px; }
.project-meta dt {
  font: 400 12px/1.2 'Inter';
  color: var(--fg-muted);
  margin: 0;
}
.project-meta dd {
  font: 400 14px/1.4 'Inter';
  color: var(--fg-dark);
  margin: 0;
  letter-spacing: -0.01em;
}

.project-desc {
  font: 300 14px/1.6 'Inter';
  color: var(--fg-base);
  letter-spacing: -0.01em;
  margin: 4px 0 0;
  text-wrap: pretty;
}

/* ===== Collections section ===== */
.collections { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.collections__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px;
}
.collections__label {
  font: 400 12px/1.4 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.01em;
}
.collections__actions { display: flex; align-items: center; gap: 2px; }
.iconbtn {
  width: 30px; height: 30px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--fg-muted);
  background: transparent; border: 0; cursor: pointer;
}
.iconbtn:hover { background: var(--bg-hover); color: var(--fg-dark); }
.iconbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.collections__list { display: flex; flex-direction: column; gap: 12px; }

/* ===== Unified Collection card ===== */
.coll-card {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-white);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.coll-card__preview {
  background: var(--bg-white);
  display: block;
  aspect-ratio: 16 / 7.5;
  overflow: hidden;
  border-bottom: 1px solid var(--border-light);
}
.coll-card__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.coll-card__foot { padding: 14px 18px 14px; display: flex; flex-direction: column; }
.coll-card__kicker { font: 400 12px/1 'Inter'; color: var(--fg-muted); margin-bottom: 6px; }
.coll-card__title {
  font: 500 16px/1.3 'Inter';
  color: var(--fg-dark); letter-spacing: -0.01em; margin: 0;
}
.coll-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
.coll-card__type {
  display: inline-flex; align-items: center; gap: 8px;
  font: 300 12px/1 'Inter'; color: var(--fg-muted);
}
.coll-card__type svg { color: var(--fg-muted); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.coll-card__right {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--fg-muted); font: 300 12px/1 'Inter';
}
.coll-card__comments { display: inline-flex; align-items: center; gap: 4px; }

/* ===== Avatar (small) ===== */
.av-sm {
  width: 20px; height: 20px; border-radius: 999px;
  background: url('../assets/avatar.jpg') center/cover;
  border: 0.8px solid var(--border-light);
  flex: none;
  display: inline-block;
}

/* =========================================================
   COLLECTION PAGE — Project Overview dashboard
   ========================================================= */

.coll-page { display: flex; flex-direction: column; min-height: 100%; }

/* ----- Top bar ----- */
.coll-top {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-app);
  position: sticky; top: 0; z-index: 5;
}
.coll-top__nav { flex: none; }
.coll-top__mark {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(38,24,17,0.04);
  border: 1px solid var(--border-light);
  display: grid; place-items: center;
  color: var(--fg-dark); flex: none;
}
.coll-top__mark svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.coll-top__heading { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.coll-top__kicker {
  font: 400 11px/1.2 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coll-top__title {
  font: 500 14px/1.2 'Inter';
  color: var(--fg-dark); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coll-top__spacer { flex: 1; }
.coll-top__meta {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 12px/1.2 'Inter';
  color: var(--fg-muted); letter-spacing: -0.01em;
}
.coll-top__owner { color: var(--fg-base); }
.coll-top__sep { color: var(--fg-light-muted); }
.coll-top__time { color: var(--fg-muted); }
.btn-ghost {
  height: 28px; padding: 0 12px;
  border: 1px solid var(--border-light); border-radius: 6px;
  background: var(--bg-white); color: var(--fg-dark);
  font: 400 12px/1 'Inter'; letter-spacing: -0.01em; cursor: pointer;
}
.btn-ghost:hover { background: var(--bg-hover); }

.tag-status {
  height: 24px; padding: 0 10px;
  border: 0; border-radius: 4px;
  background: rgba(38, 24, 17, 0.06);
  color: var(--fg-base);
  font: 400 12px/1 'Inter'; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; cursor: pointer;
}
.tag-status:hover { background: rgba(38, 24, 17, 0.10); }

.coll-top__heading--button {
  background: transparent; border: 0; padding: 2px 4px; margin: 0 -4px;
  border-radius: 6px; cursor: pointer; text-align: left; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.coll-top__heading--button:hover { background: var(--bg-hover); }

/* ----- Record top bar ----- */
.rec-page { display: flex; flex-direction: column; min-height: 100%; }
.rec-top {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-app);
  position: sticky; top: 0; z-index: 5;
}
.rec-top__nav { flex: none; }
.rec-top__mark {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(38,24,17,0.04);
  border: 1px solid var(--border-light);
  display: grid; place-items: center;
  color: var(--fg-dark); flex: none;
}
.rec-top__mark svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rec-top__heading { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rec-top__kicker {
  font: 400 11px/1.2 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rec-top__title {
  font: 500 14px/1.2 'Inter';
  color: var(--fg-dark); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rec-top__spacer { flex: 1; }
.rec-top__meta {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 12px/1.2 'Inter';
  color: var(--fg-muted); letter-spacing: -0.01em;
}
.rec-top__owner { color: var(--fg-base); }
.rec-top__sep { color: var(--fg-light-muted); }
.rec-top__time { color: var(--fg-muted); }
.rec-top__actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.rec-top__check {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  color: #52B26E;
}
.rec-top__check svg { display: block; }
.rec-top__stat {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fg-muted);
  font: 400 12px/1 'Inter'; letter-spacing: -0.01em;
}
.rec-top__stat svg { display: block; }
.rec-top__stat--btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 100ms ease-out, color 100ms ease-out;
}
.rec-top__stat--btn:hover {
  background: rgba(38, 24, 17, 0.06);
  color: var(--fg-base);
}
.rec-top__menu-wrap { position: relative; }
.rec-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 180px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.08);
  padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
  z-index: 20;
}
.rec-menu__item {
  display: flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 8px;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--fg-dark);
  font: 400 13px/1 'Inter'; letter-spacing: -0.01em;
  cursor: pointer; text-align: left;
}
.rec-menu__item:hover { background: var(--bg-hover); }
.rec-menu__item.is-active { background: rgba(38,24,17,0.06); }
.rec-menu__item--danger { color: #D04A3F; }
.rec-menu__item--danger:hover { background: rgba(208,74,63,0.06); }
.rec-menu__ico { display: inline-grid; place-items: center; color: var(--fg-muted); }
.rec-menu__item--danger .rec-menu__ico { color: #D04A3F; }
.rec-menu__rule { height: 1px; background: var(--border-light); margin: 4px 2px; }

.rec-page__body { display: block; }.rec-page__main {
  padding: 28px 32px 80px;
  display: flex; flex-direction: column; gap: 36px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  min-width: 0;
}
@media (max-width: 1024px) {
  .rec-top { padding: 12px 16px; gap: 8px; }
  .rec-top__title { font-size: 13px; }
  .rec-page__main { padding: 20px 16px 40px; gap: 28px; }
}

/* ----- Two-column body ----- */
.coll-page__body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  align-items: flex-start;
}
.coll-page__main {
  padding: 28px 32px 80px;
  display: flex; flex-direction: column; gap: 36px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  min-width: 0;
}
.coll-page__main:has(.cs--standalone) {
  max-width: 960px;
}
.coll-page__body { position: relative; }
.coll-page__body-tools {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex; align-items: center; gap: 4px;
  z-index: 4;
}

/* ----- Sections sidebar ----- */
.coll-side {
  position: sticky; top: 60px;
  align-self: start;
  padding: 24px 12px 24px 18px;
  background: var(--bg-app);
}
.coll-side__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 8px;
}
.coll-side__title { font: 500 12px/1 'Inter'; color: var(--fg-base); letter-spacing: -0.01em; }
.coll-side__actions { display: flex; gap: 2px; }
.coll-side__actions .iconbtn { width: 22px; height: 22px; }
.coll-side__nav { display: flex; flex-direction: column; gap: 1px; }
.coll-side__item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 8px; border-radius: 6px;
  text-decoration: none;
  color: var(--fg-base);
  font: 400 13px/1.4 'Inter'; letter-spacing: -0.01em;
  border: 0; background: transparent;
  width: 100%; text-align: left; cursor: pointer;
}
.coll-side__item:focus-visible { outline: none; background: var(--bg-hover); }
.coll-side__item:hover { background: var(--bg-hover); }
.coll-side__item.is-active { background: rgba(38,24,17,0.08); color: var(--fg-dark); }
.coll-side__num {
  width: 16px;
  font: 400 12px/1.4 'Inter';
  color: var(--fg-muted);
  font-feature-settings: "tnum";
  flex: none;
}
.coll-side__label { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.coll-side__sub { font: 300 11px/1.2 'Inter'; color: var(--fg-muted); }

/* ----- Section shell ----- */
.cs { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; }
.cs__header { display: flex; flex-direction: column; gap: 6px; }
.cs__kicker {
  font: 400 11px/1.2 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.01em;
}
.cs__title {
  font: 500 22px/1.3 'Inter';
  color: var(--fg-dark); letter-spacing: -0.01em;
  margin: 0;
}
.cs__title--with-icon { display: flex; align-items: center; gap: 8px; }
.cs__title--with-icon svg {
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.cs__lede {
  font: 300 13px/1.5 'Inter';
  color: var(--fg-muted);
  margin: 0;
  letter-spacing: -0.01em;
}
.cs__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-app);
  font: 400 11px/1.4 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.01em;
}

.cs__p { font: 300 13px/1.5 'Inter'; color: var(--fg-base); letter-spacing: -0.01em; margin: 0; }
.cs__p--muted { color: var(--fg-muted); }

/* Callout */
.cs__callout {
  display: flex; gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-panel);
}
.cs__callout-ico {
  flex: none; width: 18px; height: 18px;
  margin-top: 2px;
  color: var(--fg-muted);
}
.cs__callout-ico svg {
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.cs__callout-body { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.cs__callout-title {
  font: 500 14px/1.3 'Inter';
  color: var(--fg-dark); letter-spacing: -0.01em;
  margin: 0;
}

/* KPI grids */
.cs__kpi-grid { display: grid; gap: 10px; }
.cs__kpi-grid--4 { grid-template-columns: repeat(4, 1fr); }

.kpi-tile {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-app);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.kpi-tile--button {
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.kpi-tile--button:hover {
  background: var(--bg-hover);
  border-color: rgba(38,24,17,0.16);
}
.kpi-tile--button:focus-visible {
  outline: none;
  border-color: var(--fg-base);
  box-shadow: 0 0 0 2px rgba(23,20,18,0.08);
}
.kpi-tile__label {
  font: 400 11px/1.2 'Inter';
  color: var(--fg-muted); letter-spacing: -0.01em;
}
.kpi-tile__value {
  font: 500 22px/1.2 'Inter';
  color: var(--fg-dark); letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.kpi-tile__sub {
  font: 300 11px/1.3 'Inter';
  color: var(--fg-light-muted); letter-spacing: -0.01em;
}

/* Metric card with chart */
.metric-card {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-white);
  padding: 14px 14px 8px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.metric-card__label { font: 400 11px/1.2 'Inter'; color: var(--fg-muted); letter-spacing: -0.01em; }
.metric-card__value {
  font: 500 24px/1.2 'Inter';
  color: var(--fg-dark); letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.metric-card__delta { font: 300 11px/1.3 'Inter'; color: var(--fg-muted); }
.metric-card__chart { margin: 4px -4px -4px; }
.ac { display: block; width: 100%; aspect-ratio: 280 / 120; height: auto; }
.ac__labels text {
  font: 300 10px/1 'Inter';
  fill: var(--fg-light-muted);
  letter-spacing: -0.01em;
}

/* Bar card */
.cs__split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bar-card {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-white);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.bar-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.bar-card__title {
  font: 500 13px/1.3 'Inter';
  color: var(--fg-dark); letter-spacing: -0.01em;
}
.bar-card__unit {
  font: 300 11px/1 'Inter'; color: var(--fg-muted);
}
.bar-card__chart { width: 100%; }
.bc { display: block; width: 100%; aspect-ratio: 320 / 150; height: auto; }
.bc__labels text, .bc__label {
  font: 300 10px/1 'Inter';
  fill: var(--fg-muted);
  letter-spacing: -0.01em;
}
.bar-card__summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--border-light);
}
.bar-card__summary > div { display: flex; flex-direction: column; gap: 2px; }
.bar-card__sn {
  font: 500 16px/1.2 'Inter';
  color: var(--fg-dark); letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
.bar-card__sl { font: 300 11px/1.3 'Inter'; color: var(--fg-muted); }

/* Train grid (Accomplishments) */
.train-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.train-tile {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-app);
  padding: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.train-tile__v {
  font: 500 22px/1.2 'Inter';
  color: var(--fg-dark); letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.train-tile__l {
  font: 300 11px/1.3 'Inter'; color: var(--fg-muted);
}

/* Legend */
.legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border-light); font: 300 11px/1.4 'Inter'; color: var(--fg-muted); }
.legend__i { display: inline-flex; align-items: center; gap: 6px; }
.legend__d { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.legend__sp { flex: 1; }
.legend__trail { color: var(--fg-light-muted); font-style: italic; }

/* Table */
.cs__sub { display: flex; flex-direction: column; gap: 10px; }
.cs__sub-label {
  font: 500 11px/1 'Inter';
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cs__table {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border-light);
  font: 300 13px/1.4 'Inter'; color: var(--fg-base); letter-spacing: -0.01em;
}
.cs__tr {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1fr;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-light);
}
.cs__tr--head {
  font: 500 11px/1 'Inter'; color: var(--fg-muted);
  letter-spacing: -0.01em;
  padding: 8px 4px;
}
.cs__tr .r { text-align: right; }
.cs__tr .c { text-align: center; }
.cs__tr .tnum { font-feature-settings: "tnum"; color: var(--fg-dark); }
.cs__tr .c { color: var(--fg-base); }

/* Table variants (Finance hub) */
.cs__table--2 .cs__tr { grid-template-columns: 1fr auto; }
.cs__table--seg .cs__tr { grid-template-columns: 1.6fr 1fr 1fr 1fr 0.8fr; }
.cs__tr--strong { border-bottom: none; }
.cs__tr--strong div,
.cs__tr--strong .tnum { color: var(--fg-dark); font-weight: 500; }

/* Coming-soon hub placeholder */
.hub-soon { display: flex; justify-content: center; padding: 32px 0 64px; }
.hub-soon__panel {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; max-width: 480px; padding: 52px 44px;
  border: 1px dashed var(--border-light); border-radius: 18px;
  background:
    repeating-linear-gradient(135deg, rgba(23,20,18,0.012) 0 10px, transparent 10px 20px),
    #fbfaf7;
}
.hub-soon__ico {
  width: 56px; height: 56px; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--bg-hover); color: var(--fg-dark);
}
.hub-soon__chip {
  font: 500 10.5px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); background: var(--bg-hover);
  padding: 5px 11px; border-radius: 999px;
}
.hub-soon__t {
  font: 500 20px/1.25 'Inter'; color: var(--fg-dark); letter-spacing: -0.02em; margin-top: 2px;
}
.hub-soon__s {
  font: 300 14px/1.62 'Inter'; color: var(--fg-base);
  max-width: 400px; text-wrap: pretty;
}

/* Photo grid */
.cs__photo-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.photo {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-white);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.photo__ph {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-light);
  aspect-ratio: 16 / 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  color: var(--fg-light-muted);
}
.photo__ph svg { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.photo__ph span { font: 300 11px/1 'Inter'; color: var(--fg-light-muted); }
.photo__img {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-light);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.photo__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.photo--button {
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  transition: border-color 120ms ease, transform 120ms ease;
}
.photo--button:hover {
  border-color: rgba(38,24,17,0.16);
}
.photo--button:hover .photo__img img {
  transform: scale(1.02);
}
.photo--button .photo__img img {
  transition: transform 240ms ease;
}
.photo--button:focus-visible {
  outline: none;
  border-color: var(--fg-base);
  box-shadow: 0 0 0 2px rgba(23,20,18,0.08);
}
.photo__meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.photo__t { font: 500 13px/1.3 'Inter'; color: var(--fg-dark); letter-spacing: -0.01em; }
.photo__s { font: 300 12px/1.4 'Inter'; color: var(--fg-muted); letter-spacing: -0.01em; }

/* Make collection card clickable */
.coll-card { cursor: pointer; transition: background 120ms; }
.coll-card:hover { background: var(--bg-hover); }
.coll-card:focus-visible { outline: 2px solid var(--fg-dark); outline-offset: 2px; }

/* =========================================================
   CONTEXT GRAPH
   ========================================================= */
/* Page wrapper reuses .coll-page shell. Just constrain heights so the
   SVG fills the available area without scrolling. */
.main:has(> .cg-page) { overflow: hidden; }
.cg-page { height: 100%; min-height: 0; }
.cg-page .coll-page__body {
  min-height: 0;
  flex: 1 1 0;
  display: block;
}
.cg-page .coll-page__main { padding: 0; min-height: 0; overflow: hidden; height: 100%; max-width: none; }
.cg-main { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.cg-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
}
.cg-legend {
  display: flex; align-items: center; gap: 6px;
  font: 400 12px/1 'Inter';
  color: var(--fg-muted);
}
.cg-lg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: default;
  transition: background 120ms, color 120ms;
}
.cg-lg:hover { background: var(--bg-hover); color: var(--fg-dark); }
.cg-sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.cg-svg {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  display: block;
  background: var(--bg-app);
  cursor: grab;
}
.cg-svg:active { cursor: grabbing; }
.cg-svg .cg-link {
  stroke: #C9C2BF;
  stroke-width: 1;
  stroke-opacity: 0.55;
  transition: stroke 160ms, stroke-opacity 160ms, stroke-width 160ms;
}
.cg-svg .cg-node { cursor: grab; transition: opacity 160ms; }
.cg-svg .cg-node:active { cursor: grabbing; }
/* Node cards — icon + label, colored by kind via --accent. */
.cg-card {
  height: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  padding: 0 11px;
  background: #FFFCFA;
  border: 1px solid var(--border-light, #E7E1DF);
  border-left: 3px solid var(--accent, #888);
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(23,20,18,0.05);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  transition: box-shadow 160ms, border-color 160ms;
}
.cg-card__ic { flex: none; width: 16px; height: 16px; color: var(--accent, #888); display: grid; place-items: center; }
.cg-card__ic svg { width: 16px; height: 16px; }
.cg-card__label {
  font-size: 12.5px; font-weight: 500; color: var(--fg-dark);
  letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The org card reads as the root: filled, bolder. */
.cg-card--org { background: var(--accent); border-color: var(--accent); }
.cg-card--org .cg-card__ic, .cg-card--org .cg-card__label { color: #FFFCFA; }
.cg-card--org .cg-card__label { font-weight: 600; font-size: 13.5px; }
/* Planned domains read as stubs: muted + dashed. */
.cg-card--planned { border-style: dashed; background: #FBFAF9; }
.cg-card--planned .cg-card__label { color: var(--fg-muted, #615D5A); }

.cg-svg.has-focus .cg-link {
  stroke: #E7E1DF;
  stroke-opacity: 0.45;
}
.cg-svg.has-focus .cg-link.linked {
  stroke: #7C6FE6;
  stroke-opacity: 0.85;
  stroke-width: 1.4;
}
.cg-svg.has-focus .cg-node { opacity: 0.28; }
.cg-svg.has-focus .cg-node.linked { opacity: 1; }
.cg-svg.has-focus .cg-node.focus { opacity: 1; }
.cg-svg.has-focus .cg-node.focus .cg-card {
  border-color: var(--accent, #7C6FE6);
  box-shadow: 0 3px 10px rgba(23,20,18,0.14);
}

.cg-svg.has-group-focus .cg-node.group-off { opacity: 0.18; }
.cg-svg.has-group-focus .cg-link.group-off {
  stroke: #E7E1DF;
  stroke-opacity: 0.3;
}

.cg-hint {
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  font: 400 11px/1 'Inter';
  color: var(--fg-muted);
  background: rgba(255, 252, 250, 0.85);
  backdrop-filter: blur(4px);
  padding: 7px 14px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  pointer-events: none;
  letter-spacing: -0.005em;
}

@media (max-width: 1024px) {
  .cg-legend { gap: 2px; flex-wrap: wrap; justify-content: flex-end; padding: 8px 14px; border-bottom: 1px solid var(--border-light); }
  .cg-lg { padding: 4px 6px; font-size: 11px; }
  .cg-hint { font-size: 10px; padding: 6px 12px; }
}

/* ===== Bottom mobile tab bar ===== */
.tabbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(58px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg-panel);
  border-top: 1px solid var(--border-light);
  z-index: 50;
}
.tabbar__inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: 58px;
}
.tabbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: transparent; border: 0; color: var(--fg-muted);
  cursor: pointer; padding: 6px 4px;
}
.tabbtn span { font: 400 10px/1 'Inter'; letter-spacing: -0.01em; color: var(--fg-muted); }
.tabbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tabbtn--agent svg { fill: currentColor; stroke: none; }
.tabbtn--agent svg path { fill: currentColor; }
.tabbtn.is-active { color: var(--fg-dark); }
.tabbtn.is-active span { color: var(--fg-dark); font-weight: 500; }

.mobile-only { display: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }
  .desktop-only { display: none !important; }
  .mobile-only { display: revert; }

  .main { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .page-content {
    padding: 24px 16px 40px;
    gap: 22px;
  }

  .project-hero__title-row { gap: 12px; }
  .project-hero__mark { width: 30px; height: 30px; }
  .project-hero__title { font-size: 22px; }
  .project-hero__image { aspect-ratio: 16 / 9; border-radius: var(--radius-md); }

  .project-meta {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .project-meta__cell:last-child { grid-column: 1 / -1; }

  /* Collection page — mobile */
  .coll-top { padding: 12px 16px; gap: 8px; }
  .coll-top__title { font-size: 13px; }
  .coll-page__body { grid-template-columns: 1fr; }
  .coll-side { display: none; }
  .coll-page__main { padding: 20px 16px 40px; gap: 28px; }
  .cs__title { font-size: 19px; }
  .cs__kpi-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cs__split-2 { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr; }
  .cs__callout { padding: 14px; gap: 10px; }
  .cs__tr { grid-template-columns: 1.6fr 0.8fr 1fr 1fr; padding: 10px 0; }
  .bar-card__summary { grid-template-columns: 1fr; gap: 8px; padding-top: 8px; }

  .tabbar { display: block; }
}

@media (max-width: 420px) {
  .project-meta { grid-template-columns: 1fr; }
  .project-meta__cell:last-child { grid-column: auto; }
}

/* ===== Side panel ===== */
.side-panel__scrim {
  position: fixed; inset: 0;
  background: rgba(23, 20, 18, 0.18);
  z-index: 80;
  animation: spScrimIn 160ms ease-out;
}
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 92vw;
  background: var(--bg-app);
  border-left: 1px solid var(--border-light);
  display: flex; flex-direction: column;
  z-index: 81;
  box-shadow: -16px 0 40px -24px rgba(23,20,18,0.18);
  animation: spIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes spScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spIn { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }

.side-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  flex: none;
}
.side-panel__title {
  font: 500 14px/1.2 'Inter';
  color: var(--fg-dark); letter-spacing: -0.01em;
}
.side-panel__body {
  padding: 18px 18px 24px;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.side-panel__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-app);
  flex: none;
}

/* ===== Form fields (DS) ===== */
.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-field__label {
  font: 500 12px/1.2 'Inter';
  color: var(--fg-muted); letter-spacing: -0.01em;
}
.ds-input {
  height: 32px; padding: 0 10px;
  border-radius: 6px; border: 1px solid var(--border-light);
  background: #FFFCFA; color: var(--fg-dark);
  font: 300 14px/1.4 'Inter'; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ds-input:focus-within {
  border-color: #33302E;
  box-shadow: 0 0 0 2px rgba(23,20,18,0.08);
}
.ds-input input {
  all: unset;
  flex: 1; min-width: 0;
  font: 300 14px/1.4 'Inter'; letter-spacing: -0.01em;
  color: var(--fg-dark);
}
.ds-input input::placeholder { color: var(--fg-light-muted); font-weight: 300; }

.ds-textarea {
  padding: 8px 10px;
  border-radius: 6px; border: 1px solid var(--border-light);
  background: #FFFCFA;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ds-textarea:focus-within {
  border-color: #33302E;
  box-shadow: 0 0 0 2px rgba(23,20,18,0.08);
}
.ds-textarea textarea {
  all: unset;
  display: block; width: 100%;
  font: 300 14px/1.5 'Inter'; letter-spacing: -0.01em;
  color: var(--fg-dark);
  resize: vertical; min-height: 60px;
}
.ds-textarea textarea::placeholder { color: var(--fg-light-muted); font-weight: 300; }

/* ===== Primary button ===== */
.btn-primary {
  height: 28px; padding: 0 14px;
  border: 1px solid var(--fg-dark); border-radius: 6px;
  background: var(--fg-dark); color: #FFFCFA;
  font: 500 12px/1 'Inter'; letter-spacing: -0.01em; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn-primary:hover { background: #000; border-color: #000; }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(23,20,18,0.16); }

/* ===== Photo page ===== */
.photo-page { background: var(--bg-app); }
.photo-page__body {
  flex: 1 1 auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 24px 64px;
  overflow: auto;
}
.photo-page__img {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  border-radius: 8px;
  box-shadow: 0 12px 32px -16px rgba(23,20,18,0.18);
}
@media (max-width: 1024px) {
  .photo-page__body { padding: 16px 12px 40px; }
}

/* ===== Mobile section tabs ===== */
.coll-mtabs {
  display: none;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-app);
  overflow-x: auto;
  scrollbar-width: none;
}
.coll-mtabs::-webkit-scrollbar { display: none; }
@media (max-width: 1024px) {
  .coll-mtabs { display: flex; }
}
.coll-mtabs__item {
  flex: none;
  border: 0; background: transparent;
  padding: 8px 12px;
  border-radius: 999px;
  font: 500 13px/1 'Inter'; letter-spacing: -0.01em;
  color: var(--fg-muted);
  cursor: pointer;
  white-space: nowrap;
}
.coll-mtabs__item:hover { background: var(--bg-hover); color: var(--fg-base); }
.coll-mtabs__item.is-active {
  background: rgba(38,24,17,0.08);
  color: var(--fg-dark);
}

/* ===== Standalone section (Photos tab) ===== */
.cs--standalone { gap: 14px; }
.cs__standalone-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.cs__standalone-title {
  margin: 0;
  font: 500 22px/1.3 'Inter';
  color: var(--fg-dark);
  letter-spacing: -0.01em;
}
.cs__standalone-kicker {
  margin-top: 4px;
  font: 300 13px/1.4 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.005em;
}

/* ===== Reports data grid extras ===== */
.dg--reports tbody td { white-space: nowrap; }

/* ===== Overview dashboard ===== */
.stat-tile {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-base);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.stat-tile__label {
  font: 400 11px/1.2 'Inter';
  color: var(--fg-muted); letter-spacing: -0.01em;
}
.stat-tile__value {
  font: 500 26px/1.15 'Inter';
  color: var(--fg-dark); letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.stat-tile__sub {
  font: 300 11px/1.3 'Inter';
  color: var(--fg-light-muted); letter-spacing: -0.01em;
}
.stat-tile--ok { border-left: 3px solid #2f8a4f; }
.stat-tile--warn { border-left: 3px solid #c0843b; }

.dash-card {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-base);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.dash-card__head {
  display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 10px;
}
.dash-card__title {
  font: 500 14px/1.3 'Inter';
  color: var(--fg-dark); letter-spacing: -0.01em;
}
.dash-card__sub {
  font: 300 11px/1.3 'Inter';
  color: var(--fg-light-muted);
}
.dash-card__body { display: flex; flex-direction: column; gap: 10px; }
.dash-card__body--rows { gap: 8px; }

.pbar { display: flex; flex-direction: column; gap: 4px; }
.pbar__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pbar__label { font: 400 12px/1.3 'Inter'; color: var(--fg-base); }
.pbar__count { font: 400 12px/1.3 'Inter'; color: var(--fg-muted); font-feature-settings: "tnum"; }
.pbar__count strong { color: var(--fg-dark); font-weight: 500; }
.pbar__pct { color: var(--fg-light-muted); }
.pbar__track { height: 6px; background: rgba(38,24,17,0.06); border-radius: 999px; overflow: hidden; }
.pbar__fill { height: 100%; background: linear-gradient(90deg, #6b8e6f, #4d7a55); border-radius: 999px; }

.mp-row { display: grid; grid-template-columns: 160px 1fr auto; gap: 10px; align-items: center; }
.mp-row__label { font: 400 12px/1.3 'Inter'; color: var(--fg-base); }
.mp-row__bar { height: 6px; background: rgba(38,24,17,0.06); border-radius: 999px; overflow: hidden; }
.mp-row__fill { display: block; height: 100%; background: #c8a47a; border-radius: 999px; }
.mp-row__v { font: 500 12px/1.3 'Inter'; color: var(--fg-dark); font-feature-settings: "tnum"; min-width: 24px; text-align: right; }

.wf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wf-card {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-base);
}
.wf-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wf-card__site { font: 400 10px/1.2 'Inter'; color: var(--fg-light-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.wf-card__tag { font: 500 10px/1 'Inter'; padding: 3px 7px; border-radius: 999px; }
.wf-card__tag.is-ok { background: rgba(47,138,79,0.12); color: #2f8a4f; }
.wf-card__tag.is-active { background: rgba(192,132,59,0.14); color: #a06b29; }
.wf-card__t { font: 500 13px/1.3 'Inter'; color: var(--fg-dark); }
.wf-card__s { font: 300 12px/1.4 'Inter'; color: var(--fg-muted); }

.risk-list, .recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.risk-list li {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border-light);
}
.risk-list li:last-child { border-bottom: none; }
.risk-list__id { font: 500 11px/1.2 'Inter'; color: var(--fg-dark); font-feature-settings: "tnum"; }
.risk-list__t { font: 400 12px/1.4 'Inter'; color: var(--fg-base); }
.risk-list__tag { font: 500 10px/1 'Inter'; padding: 3px 7px; border-radius: 999px; }
.risk-list__tag--warn { background: rgba(192,132,59,0.14); color: #a06b29; }
.risk-list__tag--ok { background: rgba(47,138,79,0.12); color: #2f8a4f; }

.recent-list li {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border-light);
}
.recent-list li:last-child { border-bottom: none; }
.recent-list__pill {
  font: 500 10px/1 'Inter'; padding: 4px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.recent-list__pill--m { background: rgba(38,24,17,0.08); color: var(--fg-dark); }
.recent-list__pill--w { background: rgba(108,140,128,0.16); color: #4d7a55; }
.recent-list__pill--d { background: rgba(200,164,122,0.22); color: #8a6431; }
.recent-list__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recent-list__t { font: 500 12px/1.3 'Inter'; color: var(--fg-dark); }
.recent-list__s { font: 300 11px/1.3 'Inter'; color: var(--fg-light-muted); }

@media (max-width: 800px) {
  .wf-grid { grid-template-columns: 1fr; }
  .mp-row { grid-template-columns: 120px 1fr auto; }
}
.dg--reports .dg-title {
  min-width: 0;
}
.dg--reports .dg-title__text {
  font: 400 13px/1.4 'Inter';
  letter-spacing: -0.005em;
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dg .dg-title__text {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dg-wrap { width: 100%; overflow-x: hidden; }
.dg-owner {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.dg-owner__name {
  font: 300 12px/1.4 'Inter';
  color: var(--fg-base);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dg-tag--ok {
  background: rgba(82,178,110,0.12);
  color: #2F7A48;
}
.dg-tag--review {
  background: rgba(208,148,63,0.14);
  color: #8A5A1F;
}

/* ===== Pagination ===== */
.dg-pag {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 4px 4px;
  gap: 12px;
}
.dg-pag__info {
  font: 300 12px/1 'Inter';
  color: var(--fg-muted);
}
.dg-pag__info strong { font-weight: 500; color: var(--fg-base); }
.dg-pag__nav {
  display: inline-flex; align-items: center; gap: 2px;
}
.dg-pag__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px;
  border: 1px solid transparent; background: transparent;
  border-radius: 6px; cursor: pointer;
  font: 400 12px/1 'Inter';
  color: var(--fg-base);
}
.dg-pag__btn:hover:not([disabled]) { background: rgba(38,24,17,0.06); }
.dg-pag__btn[disabled] { opacity: 0.35; cursor: default; }
.dg-pag__btn--num.is-active {
  background: var(--fg-dark);
  color: var(--bg-app);
}
.dg-pag__btn svg { fill: none; stroke: currentColor; }
.dg-pag__el {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 26px;
  font: 400 12px/1 'Inter';
  color: var(--fg-muted);
}

@media (max-width: 1024px) {
  .dg-pag { flex-direction: column; align-items: flex-start; }
  .dg--reports tbody td { white-space: normal; }
}

/* ===== Data grid toolbar ===== */
.dg-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--border-light);
}
.dg-search {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px;
  height: 28px;
  color: var(--fg-light-muted);
}
.dg-search svg {
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.dg-search input {
  all: unset;
  flex: 1; min-width: 0;
  font: 300 13px/1 'Inter'; letter-spacing: -0.01em;
  color: var(--fg-base);
}
.dg-search input::placeholder { color: var(--fg-light-muted); }
.dg-toolbar__right {
  display: flex; align-items: center; gap: 6px;
  flex: none;
}
.dg-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px;
  border: 0; background: transparent;
  font: 400 12px/1 'Inter'; letter-spacing: -0.01em;
  color: var(--fg-base);
  border-radius: 6px; cursor: pointer;
}
.dg-pill:hover { background: rgba(38,24,17,0.06); }
.dg-pill svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }

.dg-viewtoggle {
  display: inline-flex; align-items: center;
  background: rgba(38,24,17,0.04);
  border-radius: 6px;
  padding: 2px;
  margin-left: 4px;
}
.dg-viewtoggle__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px;
  border: 0; background: transparent;
  border-radius: 4px;
  color: var(--fg-muted);
  cursor: pointer;
}
.dg-viewtoggle__btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dg-viewtoggle__btn:hover { color: var(--fg-base); }
.dg-viewtoggle__btn.is-active {
  background: var(--bg-app);
  color: var(--fg-dark);
  box-shadow: 0 1px 0 rgba(38,24,17,0.06);
}

.iconbtn.dg-add {
  width: 28px; height: 28px;
  border-radius: 6px;
}

/* ===== Data grid table ===== */
.dg-wrap { width: 100%; overflow-x: hidden; }
.dg {
  width: 100%; border-collapse: collapse;
  table-layout: fixed;
  font: 300 13px/1.3 'Inter'; letter-spacing: -0.01em;
  background: transparent;
}
.dg thead th {
  font: 500 10px/1 'Inter';
  color: var(--fg-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
  font-weight: 500;
}
.dg thead th svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.dg-th--center { text-align: center !important; }
.dg-th--right { text-align: right !important; }

.dg tbody td {
  padding: 10px 8px;
  color: var(--fg-base);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.dg tbody tr.dg-row { cursor: pointer; }
.dg tbody tr.dg-row:hover { background: rgba(38,24,17,0.04); }
.dg tbody tr:last-child td { border-bottom: 0; }

.dg-td--center { text-align: center; }
.dg-td--right { text-align: right; }

.dg-title {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-dark); font-weight: 400;
  min-width: 0;
}
.dg-fileicon {
  display: inline-flex; flex: none;
  width: 18px; height: 18px;
  color: var(--fg-muted);
}
.dg-title__text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dg-av {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: url('../assets/avatar.jpg') center/cover;
  border: 0.8px solid var(--border-light);
}

.dg-tag {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: 4px;
  background: rgba(38,24,17,0.06);
  color: var(--fg-dark);
  font: 400 11px/1 'Inter'; letter-spacing: -0.01em;
}

.dg-icol svg { vertical-align: middle; }
.dg-meta { color: var(--fg-muted); font-weight: 300; font-size: 12px; }

.dg-more {
  width: 24px; height: 24px;
  border: 0; background: transparent;
  border-radius: 6px;
  color: var(--fg-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dg-more:hover { background: rgba(38,24,17,0.06); color: var(--fg-dark); }
.dg-more svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1024px) {
  .dg-toolbar__right .dg-pill { display: none; }
  .dg-wrap { margin: 0 -16px; padding: 0 16px; }
  .dg thead th:nth-child(3),
  .dg tbody td:nth-child(3),
  .dg thead th:nth-child(4),
  .dg tbody td:nth-child(4),
  .dg thead th:nth-child(7),
  .dg tbody td:nth-child(7) { display: none; }
}

/* =====================================================================
   RECORD SIDE PANELS — Details · Comments · Data Lineage · Version History
   ===================================================================== */
.rp {
  width: 480px;
  max-width: 92vw;
  background: var(--bg-app);
  display: flex; flex-direction: column;
  padding: 0;
}
.rp__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px;
  flex: none;
}
.rp__title {
  font: 500 22px/1.2 'Inter';
  color: var(--fg-dark);
  letter-spacing: -0.01em;
}
.rp__close { color: var(--fg-muted); }
.rp__toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 20px 14px;
  flex: none;
}
.rp__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.rp__body--noscroll { overflow: hidden; }
.rp__foot {
  flex: none;
  padding: 12px 20px 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-app);
}
.rp__p {
  margin: 0;
  font: 400 13px/1.5 'Inter';
  color: var(--fg-base);
  letter-spacing: -0.005em;
}

/* ----- Filter select pill ----- */
.fselect { position: relative; flex: 1 1 auto; min-width: 0; }
.fselect__btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: 100%;
  height: 38px; padding: 0 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-app);
  color: var(--fg-base);
  font: 400 13px/1 'Inter';
  cursor: pointer;
}
.fselect__btn:hover { background: var(--bg-hover); }
.fselect__btn svg { stroke: var(--fg-muted); }
.fselect__v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fselect__menu {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 4px;
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: 0 12px 28px -12px rgba(23,20,18,0.18);
  padding: 4px;
  z-index: 30;
  max-height: 240px; overflow-y: auto;
}
.fselect__item {
  display: block; width: 100%; padding: 8px 10px;
  border: 0; background: transparent;
  text-align: left;
  font: 400 13px/1 'Inter'; color: var(--fg-base);
  border-radius: 6px;
  cursor: pointer;
}
.fselect__item:hover { background: var(--bg-hover); }
.fselect__item.is-active { color: var(--fg-dark); font-weight: 500; }

/* ----- Collapsible sections (Details panel) ----- */
.rp-sec { display: flex; flex-direction: column; }
.rp-sec__head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0;
  background: none; border: 0; cursor: pointer;
  color: var(--fg-base);
}
.rp-sec__caret {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
  transition: transform 140ms ease;
}
.rp-sec__caret.is-open { transform: rotate(90deg); }
.rp-sec__title {
  font: 500 13px/1.2 'Inter';
  color: var(--fg-dark);
}
.rp-sec__body { padding: 10px 0 4px 22px; }

/* ----- Properties list (Details) ----- */
.rp-props { margin: 0; padding: 0; display: grid; grid-template-columns: 130px 1fr; row-gap: 12px; column-gap: 12px; align-items: baseline; }
.rp-props__row { display: contents; }
.rp-props__k {
  font: 400 12px/1.3 'Inter';
  color: var(--fg-light-muted);
  letter-spacing: -0.005em;
  padding-top: 6px;
}
.rp-props__v {
  margin: 0;
  font: 400 13px/1.4 'Inter';
  color: var(--fg-base);
  letter-spacing: -0.005em;
  padding-top: 4px;
}
/* Editable dropdown property (Status / Priority / KB) */
.rp-prop { position: relative; display: inline-block; }
.rp-prop__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 8px 0 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  color: var(--fg-base);
  font: 400 13px/1 'Inter';
  cursor: pointer;
  margin-left: -10px;
}
.rp-prop__btn:hover { background: var(--bg-hover); border-color: var(--border-light); }
.rp-prop__btn[aria-expanded="true"] { background: var(--bg-hover); border-color: var(--border-light); }
.rp-prop__btn svg { stroke: var(--fg-muted); }
.rp-prop__menu {
  position: absolute; left: -10px; top: calc(100% + 4px);
  min-width: 200px;
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 16px 32px -12px rgba(23,20,18,0.22);
  padding: 4px;
  z-index: 30;
}
.rp-prop__item {
  display: block; width: 100%; padding: 8px 10px;
  border: 0; background: transparent;
  text-align: left;
  font: 400 13px/1 'Inter'; color: var(--fg-base);
  border-radius: 6px;
  cursor: pointer;
}
.rp-prop__item:hover { background: var(--bg-hover); }
.rp-prop__item.is-active { color: var(--fg-dark); font-weight: 500; }

/* ----- Used-in list (clickable collection rows) ----- */
.rp-usedin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-usedin__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  text-decoration: none;
  font: 400 13px/1.3 'Inter';
  color: var(--fg-base);
  border-radius: 8px;
  cursor: pointer;
  margin: 0 -4px;
}
.rp-usedin__row:hover { background: var(--bg-hover); color: var(--fg-dark); }
.rp-usedin__ico {
  color: var(--fg-muted);
  display: inline-flex;
  flex: none;
}
.rp-usedin__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.rp-usedin__t { font: 500 13px/1.3 'Inter'; color: var(--fg-dark); }
.rp-usedin__s { font: 400 11px/1.3 'Inter'; color: var(--fg-light-muted); }
.rp-usedin__ext {
  color: var(--fg-muted);
  display: inline-flex; align-items: center;
  flex: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.rp-usedin__row:hover .rp-usedin__ext { opacity: 1; }

/* ============ Comments panel ============ */
.rp-cmt__list { display: flex; flex-direction: column; gap: 14px; }
.rp-cmt__kicker {
  font: 400 11px/1.3 'Inter';
  color: var(--fg-light-muted);
  text-transform: none;
  letter-spacing: -0.005em;
  padding-top: 4px;
}
.rp-cmt {
  display: grid; grid-template-columns: 32px 1fr; gap: 10px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 120ms ease;
}
.rp-cmt:hover { background: var(--bg-hover); }
.rp-av {
  width: 32px; height: 32px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  background: #E7DDD2;
  color: var(--fg-dark);
  font: 500 11px/1 'Inter';
  letter-spacing: 0.02em;
}
.rp-cmt__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-cmt__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font: 400 12px/1.3 'Inter';
  color: var(--fg-light-muted);
}
.rp-cmt__who { color: var(--fg-dark); font-weight: 500; }
.rp-cmt__dot { color: var(--fg-light-muted); }
.rp-cmt__text {
  font: 400 13px/1.5 'Inter';
  color: var(--fg-base);
  letter-spacing: -0.005em;
}
/* Composer — pinned to bottom of panel via .rp__foot */
.rp-cmt__composer {
  position: relative;
}
.rp-cmt__input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 12px 14px 44px;
  background: var(--bg-app);
  font: 400 13px/1.5 'Inter';
  color: var(--fg-base);
  resize: none;
  outline: none;
  display: block;
}
.rp-cmt__input:focus { border-color: var(--fg-muted); }
.rp-cmt__input::placeholder { color: var(--fg-light-muted); }
.rp-cmt__send {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 28px; height: 28px;
  border: 0;
  background: var(--fg-dark);
  color: var(--bg-app);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.rp-cmt__send svg { stroke: currentColor; }
.rp-cmt__send:hover { background: #000; }

/* ============ Data Lineage panel ============ */
.rp-lin { display: flex; flex-direction: column; gap: 6px; }
.rp-lin__group { display: flex; flex-direction: column; gap: 8px; }
.rp-lin__title {
  display: inline-flex; align-items: baseline; gap: 6px;
  font: 500 13px/1.2 'Inter';
  color: var(--fg-dark);
  padding: 6px 0 2px;
}
.rp-lin__count {
  font: 400 12px/1 'Inter'; color: var(--fg-light-muted);
}
.rp-lin__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-lin__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-app);
  font: 400 12px/1.3 'Inter';
  color: var(--fg-base);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.rp-lin__row:hover { background: var(--bg-hover); border-color: rgba(38,24,17,0.12); color: var(--fg-dark); }
.rp-lin__ico { color: var(--fg-muted); display: inline-flex; flex: none; }
.rp-lin__t {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-lin__ext {
  color: var(--fg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  flex: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.rp-lin__row:hover .rp-lin__ext { opacity: 1; color: var(--fg-dark); }
.rp-lin__arrow {
  display: flex; justify-content: center;
  padding: 4px 0;
  color: var(--fg-light-muted);
}
.rp-lin__self {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-panel);
}
.rp-lin__selficon { color: var(--fg-muted); display: inline-flex; }
.rp-lin__selfbody { display: flex; flex-direction: column; gap: 1px; }
.rp-lin__selft { font: 500 13px/1.2 'Inter'; color: var(--fg-dark); }
.rp-lin__selfs { font: 400 11px/1.2 'Inter'; color: var(--fg-light-muted); }

/* ============ Version History panel ============ */
.rp-ver { display: flex; flex-direction: column; gap: 6px; }
.rp-ver__group { display: flex; flex-direction: column; }
.rp-ver__monthhead {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  padding: 8px 0;
  color: var(--fg-dark);
}
.rp-ver__caret {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
  transition: transform 140ms ease;
  transform: rotate(-90deg);
}
.rp-ver__caret.is-open { transform: rotate(0deg); }
.rp-ver__monthlabel { font: 500 13px/1.2 'Inter'; color: var(--fg-dark); }
.rp-ver__list { list-style: none; margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 2px; }
.rp-ver__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
}
.rp-ver__row:hover { background: var(--bg-hover); }
.rp-ver__rowmain { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-ver__d {
  font: 500 13px/1.2 'Inter';
  color: var(--fg-dark);
  font-feature-settings: "tnum";
}
.rp-ver__curr {
  font-weight: 400;
  color: var(--fg-muted);
}
.rp-ver__who {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 12px/1.3 'Inter';
  color: var(--fg-muted);
}
.rp-ver__whoico { color: var(--fg-light-muted); display: inline-flex; }

.rp-ver__menu-wrap { position: relative; flex: none; }
.rp-ver__menu-btn {
  width: 24px; height: 24px;
  border: 0; background: transparent;
  color: var(--fg-muted); cursor: pointer;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
}
.rp-ver__row:hover .rp-ver__menu-btn { opacity: 1; }
.rp-ver__menu-btn:hover { background: var(--bg-hover); color: var(--fg-dark); }
.rp-ver__menu {
  position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 180px;
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 16px 32px -12px rgba(23,20,18,0.22);
  padding: 4px;
  z-index: 30;
}
.rp-ver__menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border: 0; background: transparent;
  text-align: left;
  font: 400 13px/1 'Inter'; color: var(--fg-base);
  border-radius: 6px; cursor: pointer;
}
.rp-ver__menu-item:hover { background: var(--bg-hover); }
.rp-ver__menu-ico { color: var(--fg-muted); display: inline-flex; }

@media (max-width: 1024px) {
  .rp { width: 100vw; max-width: 100vw; }
  .rp__head { padding: 14px 16px 10px; }
  .rp__toolbar { padding: 4px 16px 12px; }
  .rp__body { padding: 0 16px 24px; }
  .rp__foot { padding: 10px 16px 16px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Inline edit mode — EditableBlock wrapper, pencil affordance,
   Edit side panel, source badge, source-trace popover
   ───────────────────────────────────────────────────────────────────── */

/* ===== EditableBlock wrapper ===== */
.editable {
  position: relative;
  border-radius: 12px;
  transition: background 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
  outline: none;
}
.editable > .editable__content { position: relative; }

/* Soft halo extending ~6px around the block — does NOT affect layout. */
.editable:hover,
.editable:focus-visible,
.editable.is-editing {
  background: rgba(38, 24, 17, 0.045);
  box-shadow: 0 0 0 6px rgba(38, 24, 17, 0.045);
}
.editable.is-editing {
  background: rgba(38, 24, 17, 0.07);
  box-shadow: 0 0 0 6px rgba(38, 24, 17, 0.07);
}

/* Pencil button — top-right of the block, fades in on hover */
.editable__pencil {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--bg-white, #fff);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  color: var(--fg-muted);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease, color 120ms ease, background 120ms ease;
  z-index: 4;
  padding: 0;
  box-shadow: 0 1px 2px rgba(23, 20, 18, 0.06);
}
.editable:hover .editable__pencil,
.editable:focus-visible .editable__pencil,
.editable.is-editing .editable__pencil {
  opacity: 1;
  transform: none;
}
.editable__pencil:hover { color: var(--fg-dark); background: var(--bg-app); }

/* When the block sits flush to a card edge, shift the pencil inward a hair */
.editable.ed-pencil--top-right .editable__pencil { top: 8px; right: 8px; }
.editable.ed-pencil--offset .editable__pencil { top: 12px; right: 12px; }

/* Make sure the wrapper inherits nothing weird from button reset */
.editable[role="button"] { -webkit-tap-highlight-color: transparent; }

/* The KPI tile already has a card surface — nudge halo styling to feel right */
.editable--tile {
  /* halo paints around the tile's existing white surface — looks great */
}

/* For the Section header block — keep tight against the lede */
.editable--hero { border-radius: 14px; }

/* ===== Edit panel (right-side) ===== */
.ed-scrim {
  position: fixed; inset: 0;
  background: rgba(23, 20, 18, 0.18);
  z-index: 80;
  animation: ed-scrim-in 160ms ease-out;
}
@keyframes ed-scrim-in { from { opacity: 0 } to { opacity: 1 } }

.ed-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px;
  max-width: 92vw;
  background: var(--bg-white, #fff);
  border-left: 1px solid var(--border-light);
  box-shadow: -8px 0 28px rgba(23, 20, 18, 0.08);
  z-index: 81;
  display: flex; flex-direction: column;
  animation: ed-panel-in 200ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes ed-panel-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.ed-panel__head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 14px;
  gap: 12px;
}
.ed-panel__title {
  font: 500 18px/1.2 'Inter';
  color: var(--fg-dark);
  letter-spacing: -0.01em;
}
.ed-panel__head-right {
  display: flex; align-items: center; gap: 6px;
}
.ed-panel__saved {
  display: inline-flex; align-items: center; gap: 5px;
  font: 400 12px/1.2 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.005em;
  padding: 0 6px;
  transition: color 160ms ease;
}
.ed-panel__saved.is-saving { color: var(--fg-base); }
.ed-panel__saved-ico {
  display: inline-grid; place-items: center;
  color: #52B26E;
}
.ed-panel__saving-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  background: var(--fg-muted);
  animation: ed-saving-pulse 700ms ease-in-out infinite;
}
@keyframes ed-saving-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.ed-panel__close {
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  border-radius: 6px;
  display: grid; place-items: center;
  cursor: pointer;
}
.ed-panel__close:hover { background: var(--bg-hover); color: var(--fg-dark); }

.ed-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 18px 24px;
  display: flex; flex-direction: column; gap: 16px;
}

/* ===== Field ===== */
.ed-field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.ed-field__label {
  font: 400 13px/1.2 'Inter';
  color: var(--fg-base);
  letter-spacing: -0.005em;
}
.ed-field__input {
  width: 100%;
  background: var(--bg-white, #fff);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 9px 12px;
  font: 400 13.5px/1.45 'Inter';
  color: var(--fg-dark);
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  resize: none;
  font-family: 'Inter', sans-serif;
}
.ed-field__input:hover { border-color: #D5CFCB; }
.ed-field__input:focus {
  border-color: #A09792;
  box-shadow: 0 0 0 3px rgba(38, 24, 17, 0.05);
}
.ed-field__input--ta {
  min-height: 84px;
  padding: 10px 12px;
  resize: none;
  /* Auto-grow handles height; never show an internal scrollbar. */
  overflow: hidden;
  line-height: 1.5;
}

.ed-field__hint {
  font: 400 11.5px/1.4 'Inter';
  color: var(--fg-muted);
  margin-top: 2px;
}

/* ===== Source badge pill under field ===== */
.src-badge-wrap { position: relative; }
.src-badge {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font: 400 12.5px/1.3 'Inter';
  color: var(--fg-base);
  letter-spacing: -0.005em;
  transition: background 120ms ease;
}
.src-badge:hover { background: rgba(38, 24, 17, 0.05); }
.src-badge__ico {
  display: inline-grid; place-items: center;
  color: var(--fg-muted);
  flex: none;
}
.src-badge__file {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.src-badge__pages {
  color: var(--fg-muted);
  flex: none;
}

/* ----- Source badge: detached state (Case 1.A) -----
   The field's value no longer matches the source. The pill goes muted,
   the file name is struck through, and we drop the file icon for an
   "unlink" glyph. A small meta row below offers Revert. */
.src-badge-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; }
.src-badge-row { display: inline-flex; }
.src-badge-wrap[data-detached="true"] .src-badge {
  opacity: 0.62;
  background: transparent;
  border-color: var(--border-light);
  border-style: dashed;
  cursor: default;
}
.src-badge-wrap[data-detached="true"] .src-badge:hover {
  background: transparent;
  opacity: 0.75;
}
.src-badge-wrap[data-detached="true"] .src-badge__file {
  text-decoration: line-through;
  text-decoration-color: var(--fg-muted);
  text-decoration-thickness: 1px;
}
.src-badge-wrap[data-detached="true"] .src-badge__ico {
  color: #B7A8A0;
}

.src-badge__detached-meta {
  display: inline-flex; align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-left: 10px;       /* aligns with the chip's content */
  font: 400 11.5px/1.35 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.005em;
  flex-wrap: wrap;
}
.src-badge__detached-text { color: var(--fg-muted); }
.src-badge__detached-sep { color: #C8BFB9; }
.src-badge__revert {
  display: inline-flex; align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: 500 11.5px/1.35 'Inter';
  color: var(--fg-dark);
  cursor: pointer;
  letter-spacing: -0.005em;
}
.src-badge__revert:hover { text-decoration: underline; }

/* ----- Source badge: pending update state (Case 2.A) -----
   Pulsing green dot inside the chip. Click toggles inline expansion. */
.src-badge-wrap[data-updated="true"] .src-badge { cursor: pointer; }
.src-badge-wrap[data-updated="true"][data-expanded="true"] .src-badge {
  background: rgba(38, 24, 17, 0.05);
  border-color: var(--border-light);
}
.src-badge__updot {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #2BA864;
  flex: none;
  margin-left: 4px;
  box-shadow: 0 0 0 2px #FFFCFA;
}
.src-badge__updot-pulse {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: #2BA864;
  opacity: 0.55;
  animation: srcUpdotPulse 1.8s cubic-bezier(0.2, 0, 0, 1) infinite;
  pointer-events: none;
}
@keyframes srcUpdotPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ----- Source badge: inline accept/decline block ----- */
.src-badge__update {
  margin-top: 8px;
  background: #FAF8F5;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px 12px 11px;
  display: flex; flex-direction: column; gap: 8px;
  font-family: 'Inter';
  letter-spacing: -0.005em;
  /* Match the chip's width upper bound so it doesn't sprawl. */
  width: 100%;
  max-width: 360px;
  animation: srcUpdateIn 160ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes srcUpdateIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
.src-badge__update-head {
  display: flex; align-items: center; gap: 6px;
  font: 500 11.5px/1.3 'Inter';
  color: var(--fg-dark);
  flex-wrap: wrap;
}
.src-badge__update-ico {
  display: inline-grid; place-items: center;
  color: #2BA864;
}
.src-badge__update-title { color: var(--fg-dark); }
.src-badge__update-meta {
  color: var(--fg-muted);
  font-weight: 400;
}
.src-badge__update-diff {
  display: flex; align-items: center; gap: 8px;
  font: 400 13px/1.3 'Inter';
  color: var(--fg-base);
  flex-wrap: wrap;
}
.src-badge__update-was,
.src-badge__update-now {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #FFFCFA;
  border: 1px solid var(--border-light);
  max-width: 100%;
}
.src-badge__update-was .src-badge__update-chipval {
  color: var(--fg-muted);
  text-decoration: line-through;
  text-decoration-color: #C8BFB9;
}
.src-badge__update-now .src-badge__update-chipval {
  color: var(--fg-dark);
  font-weight: 500;
}
.src-badge__update-chiplabel {
  font: 400 10.5px/1 'Inter';
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.src-badge__update-chipval {
  font: 400 13px/1.3 'Inter';
  letter-spacing: -0.005em;
  word-break: break-word;
}
.src-badge__update-arrow {
  display: inline-grid; place-items: center;
  color: var(--fg-muted);
}
.src-badge__update-actions {
  display: flex; align-items: center; gap: 6px;
  justify-content: flex-end;
}
.src-badge__update-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 6px;
  font: 500 12px/1 'Inter';
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.src-badge__update-btn--decline {
  background: transparent;
  border-color: var(--border-light);
  color: var(--fg-base);
}
.src-badge__update-btn--decline:hover {
  border-color: var(--fg-light-muted, #A09792);
  background: rgba(38, 24, 17, 0.03);
}
.src-badge__update-btn--accept {
  background: var(--fg-dark);
  color: #FFFCFA;
  border-color: var(--fg-dark);
}
.src-badge__update-btn--accept:hover { background: #2A2421; border-color: #2A2421; }

/* ===== Source trace popover ===== */
.src-trace-portal {
  position: fixed;
  z-index: 100;
  pointer-events: auto;
}
.src-trace {
  width: 320px;
  background: #FFFCFA;            /* content area = warm near-white */
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(23, 20, 18, 0.18), 0 2px 6px rgba(23, 20, 18, 0.06);
  font-family: 'Inter';
  color: var(--fg-base);
  animation: ed-st-in 140ms ease-out;
  overflow: hidden;             /* clip head/foot tint to the radius */
}
@keyframes ed-st-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.src-trace__head {
  background: #FAF8F5;          /* slightly darker header */
  padding: 11px 14px 12px;
  border-bottom: 1px solid var(--border-light);
}
.src-trace__headtop {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.src-trace__kicker {
  font: 500 10.5px/1 'Inter';
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.src-trace__ext { color: var(--fg-muted); display: inline-flex; }
.src-trace__filerow {
  display: flex; align-items: flex-start; gap: 8px;
}
.src-trace__fileico {
  display: inline-grid; place-items: center;
  color: var(--fg-muted);
  flex: none;
  margin-top: 2px;
}
.src-trace__title {
  font: 500 14px/1.35 'Inter';
  color: var(--fg-dark);
  letter-spacing: -0.01em;
  word-break: break-word;
  flex: 1 1 auto;
}
.src-trace__meta {
  margin-top: 4px;
  font: 400 12px/1.3 'Inter';
  color: var(--fg-muted);
}

/* Mini table inside an excerpt — for spreadsheet sources */
.src-trace__table-wrap {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  margin-top: 2px;
}
.src-trace__table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 11.5px;
  color: var(--fg-base);
  line-height: 1.35;
}
.src-trace__table thead th {
  background: #F5F1ED;
  text-align: left;
  font: 500 10.5px/1.3 'Inter';
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-light);
}
.src-trace__table th.r,
.src-trace__table td.r { text-align: right; }
.src-trace__table td {
  padding: 5px 8px;
  border-top: 1px solid rgba(38, 24, 17, 0.06);
  font: 400 12px/1.4 'Inter';
  color: var(--fg-base);
  letter-spacing: -0.005em;
}
.src-trace__table td.tnum {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--fg-dark);
  font-weight: 500;
}
.src-trace__table tbody tr:first-child td { border-top: 0; }
.src-trace__table tbody tr.is-highlight td {
  background: rgba(125, 95, 80, 0.06);
  color: var(--fg-dark);
}
.src-trace__excerpts {
  padding: 12px 14px 10px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: 280px;
  overflow-y: auto;
  background: #FFFCFA;
}
.src-trace__ex { display: flex; flex-direction: column; gap: 4px; }
.src-trace__exlabel {
  font: 400 12px/1.2 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.005em;
}
.src-trace__extext {
  margin: 0;
  font: 300 12.5px/1.5 'Inter';
  color: var(--fg-base);
}
.src-trace__foot {
  background: #FAF8F5;          /* slightly darker footer */
  border-top: 1px solid var(--border-light);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 6px;
  font: 400 11.5px/1.2 'Inter';
  color: var(--fg-muted);
}
.src-trace__footico { display: inline-grid; place-items: center; color: var(--fg-muted); }

/* Mobile: panel takes full width */
@media (max-width: 1024px) {
  .ed-panel { width: 100vw; max-width: 100vw; }
  .src-trace { width: 280px; }
}


/* ─────────────────────────────────────────────────────────────────────
   Source updates — indicator badges, inline markers, side panel
   ───────────────────────────────────────────────────────────────────── */

/* Title sits inline with the badge */
.rec-top__title {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0;
}
.rec-top__titletext {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

/* ===== Header badge — pill ===== */
.su-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  flex: none;
  padding: 3px 9px 3px 7px;
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font: 500 11px/1 'Inter';
  letter-spacing: -0.005em;
  color: var(--fg-base);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.su-badge:hover { background: var(--bg-hover); border-color: rgba(38,24,17,0.16); color: var(--fg-dark); }
.su-badge:focus-visible { outline: 2px solid var(--fg-light-muted); outline-offset: 1px; }
.su-badge__ico {
  display: inline-grid; place-items: center;
  color: var(--fg-muted);
  width: 14px; height: 14px;
}
.su-badge__count {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--fg-dark);
}
.su-badge__label { color: var(--fg-muted); font-weight: 400; }
.su-badge__pulse {
  position: relative;
  display: inline-block;
  flex: none;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #c0843b;
  align-self: center;
  margin-left: 1px;
}
.su-badge__pulse::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(192,132,59,0.55);
  animation: suPulse 2200ms ease-out infinite;
}

/* ===== Header badge — minimal dot variant ===== */
.su-badge--dot {
  padding: 4px 8px 4px 6px;
  gap: 5px;
}
.su-badge--dot .su-badge__dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #c0843b;
  flex: none;
  box-shadow: 0 0 0 0 rgba(192,132,59,0.55);
  animation: suPulse 2200ms ease-out infinite;
}
.su-badge--dot .su-badge__dotcount {
  font: 500 11px/1 'Inter';
  font-variant-numeric: tabular-nums;
  color: var(--fg-base);
}

@keyframes suPulse {
  0%   { box-shadow: 0 0 0 0   rgba(192,132,59,0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(192,132,59,0);   }
  100% { box-shadow: 0 0 0 0   rgba(192,132,59,0);   }
}

/* ===== Inline marker dot (on changed KPI cells) ===== */
.stat-tile__label {
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.su-dot {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  color: inherit;
}
.su-dot__inner {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #c0843b;
  box-shadow: 0 0 0 0 rgba(192,132,59,0.45);
  animation: suPulse 2400ms ease-out infinite;
}
.su-dot:hover .su-dot__inner {
  background: #a36f31;
}

/* Tile with pending update — soft warm wash + warm border */
.stat-tile--pending {
  background: rgba(192,132,59,0.04);
  border-color: rgba(192,132,59,0.30);
}
.stat-tile--pending.stat-tile--ok    { border-left-color: rgba(192,132,59,0.65); }
.stat-tile--pending.stat-tile--warn  { border-left-color: rgba(192,132,59,0.65); }

/* Ghost preview of new value next to current */
.stat-tile__value {
  display: inline-flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
}
.stat-tile__ghost {
  font: 400 14px/1.15 'Inter';
  color: var(--fg-light-muted);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* Accepted state — brief highlight ring then settle */
.stat-tile--accepted { border-color: rgba(47,138,79,0.45); }
.stat-tile--declined { background: var(--bg-app); }

.stat-tile.is-flash {
  animation: suFlash 1200ms ease-out;
}
@keyframes suFlash {
  0%   { box-shadow: 0 0 0 0 rgba(47,138,79,0); background: rgba(47,138,79,0.10); }
  40%  { background: rgba(47,138,79,0.06); }
  100% { box-shadow: 0 0 0 0 rgba(47,138,79,0); background: var(--bg-app); }
}

/* ─────────────────────────────────────────────────────────────────────
   Source updates side panel
   ───────────────────────────────────────────────────────────────────── */

.su-panel { width: 480px; max-width: 96vw; }
.su-panel__toolbar { padding: 6px 20px 14px; }
.su-panel__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.su-panel__summary {
  font: 400 12px/1.3 'Inter';
  color: var(--fg-muted);
}
.su-panel__summary strong {
  color: var(--fg-dark); font-weight: 500;
}
.su-panel__bulk { display: inline-flex; gap: 6px; }

.su-panel__intro {
  font: 400 13px/1.45 'Inter';
  color: var(--fg-muted);
  margin: 0 0 14px;
  padding: 0 2px;
}

.su-panel__summaryline {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font: 400 12px/1.3 'Inter';
  color: var(--fg-muted);
  margin: 0 0 14px;
  padding: 0 2px;
}
.su-panel__summaryline strong { color: var(--fg-dark); font-weight: 500; }

.su-panel__groups {
  display: flex; flex-direction: column; gap: 16px;
}

.su-panel__empty {
  padding: 28px 2px;
  font: 400 13px/1.45 'Inter';
  color: var(--fg-light-muted);
  text-align: center;
}

.su-panel__foot {
  padding: 10px 16px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-light);
}
.su-panel__footnote {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 11px/1.3 'Inter';
  color: var(--fg-light-muted);
}
.su-panel__footico { display: inline-grid; place-items: center; }

/* ===== Source group card ===== */
.su-group {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-app);
  overflow: hidden;
}
.su-group__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-panel);
}
.su-group__fileico {
  display: inline-grid; place-items: center;
  color: var(--fg-muted);
  width: 18px; height: 18px;
  flex: none;
}
.su-group__titles {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.su-group__file {
  font: 500 13px/1.2 'Inter';
  color: var(--fg-dark);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.su-group__meta {
  font: 400 11px/1.3 'Inter';
  color: var(--fg-light-muted);
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.su-group__dot { color: var(--fg-light-muted); }
.su-group__bulk {
  display: inline-flex; gap: 4px;
  flex: none;
}

.su-linkbtn {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  border-radius: 6px;
  font: 400 12px/1 'Inter';
  color: var(--fg-muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.su-linkbtn:hover { background: var(--bg-hover); color: var(--fg-dark); }
.su-linkbtn--strong { color: var(--fg-dark); font-weight: 500; }

.su-group__rows {
  display: flex; flex-direction: column;
}

/* ===== Per-field row ===== */
.su-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  transition: background 140ms ease, opacity 200ms ease;
}
.su-row:last-child { border-bottom: 0; }
.su-row--accepted { background: rgba(47,138,79,0.04); }
.su-row--declined { opacity: 0.62; }

.su-row__main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.su-row__head {
  display: flex; flex-direction: column; gap: 1px;
}
.su-row__field {
  font: 500 13px/1.25 'Inter';
  color: var(--fg-dark);
  letter-spacing: -0.01em;
}
.su-row__loc {
  font: 400 11px/1.3 'Inter';
  color: var(--fg-light-muted);
}

.su-row__diff {
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.su-row__was, .su-row__now {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: var(--bg-app);
  font: 400 12px/1.2 'Inter';
}
.su-row__was {
  color: var(--fg-light-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(38,24,17,0.25);
  text-decoration-thickness: 1px;
}
.su-row__now {
  color: var(--fg-dark);
  background: rgba(192,132,59,0.06);
  border-color: rgba(192,132,59,0.30);
  font-weight: 500;
}
.su-row__now.is-final {
  background: rgba(47,138,79,0.06);
  border-color: rgba(47,138,79,0.30);
  color: #2f8a4f;
}
.su-row__now.is-rejected {
  background: var(--bg-panel);
  border-color: var(--border-light);
  color: var(--fg-light-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(38,24,17,0.25);
  font-weight: 400;
}
.su-row__chiplabel {
  font: 400 10px/1 'Inter';
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-light-muted);
}
.su-row__chipval {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.su-row__arrow {
  color: var(--fg-light-muted);
  display: inline-flex; align-items: center;
}

.su-row__actions {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none;
  padding-top: 1px;
}
.su-row__resolved {
  display: inline-flex; align-items: center; gap: 8px;
}
.su-row__resolvedtag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  font: 500 11px/1 'Inter';
  background: var(--bg-app);
}
.su-row__resolvedtag--accepted {
  color: #2f8a4f;
  background: rgba(47,138,79,0.06);
  border-color: rgba(47,138,79,0.30);
}
.su-row__resolvedtag--declined {
  color: var(--fg-muted);
}
.su-undo {
  background: transparent; border: 0; cursor: pointer;
  font: 400 11px/1 'Inter';
  color: var(--fg-muted);
  padding: 4px 6px; border-radius: 6px;
  text-decoration: underline;
  text-decoration-color: rgba(38,24,17,0.20);
  text-underline-offset: 2px;
}
.su-undo:hover { color: var(--fg-dark); text-decoration-color: currentColor; background: var(--bg-hover); }

/* Buttons */
.su-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 10px;
  border-radius: 6px;
  font: 500 12px/1 'Inter';
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.su-btn--accept {
  border: 1px solid var(--fg-dark);
  background: var(--fg-dark);
  color: #fff;
}
.su-btn--accept:hover { background: #000; border-color: #000; }
.su-btn--decline {
  border: 1px solid var(--border-light);
  background: var(--bg-app);
  color: var(--fg-base);
}
.su-btn--decline:hover { background: var(--bg-hover); color: var(--fg-dark); border-color: rgba(38,24,17,0.16); }
.su-btn--ghost {
  border: 1px solid var(--border-light);
  background: var(--bg-app);
  color: var(--fg-base);
}
.su-btn--ghost:hover { background: var(--bg-hover); color: var(--fg-dark); }

/* Mobile */
@media (max-width: 1024px) {
  .su-panel { width: 100vw; max-width: 100vw; }
  .su-row { flex-direction: column; align-items: stretch; }
  .su-row__actions { justify-content: flex-end; }
  .su-badge__label { display: none; }
}


/* Source-updates indicator on the 3-dots context menu button */
.rec-top__menubtn { position: relative; }
.rec-top__menudot {
  position: absolute;
  top: 3px; right: 3px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #c0843b;
  box-shadow: 0 0 0 2px var(--bg-app);
  pointer-events: none;
}
.rec-top__menudot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(192,132,59,0.55);
  animation: suPulse 2200ms ease-out infinite;
}

/* "Source updates" menu item — slim accent + count chip on the right */
.rec-menu__item--accent { color: var(--fg-dark); }
.rec-menu__item--accent .rec-menu__ico { color: #c0843b; }
.rec-menu__label { flex: 1 1 auto; min-width: 0; }
.rec-menu__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #c0843b;
  color: #fff;
  font: 600 10px/1 'Inter';
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  flex: none;
}

/* ═════════════════════════════════════════════════════════════════════════
   OUTPUT SWITCHER — chips in record top bar
   ═════════════════════════════════════════════════════════════════════════ */
.rec-top__outputs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  background: transparent;
  padding: 2px;
  border-radius: 8px;
}
.rec-top__output-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.rec-top__output {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  font: 500 13px/1 'Inter';
  letter-spacing: -0.01em;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out, padding 120ms ease-out;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rec-top__output:hover { color: var(--fg-base); background: rgba(38,24,17,0.04); }
.rec-top__output.is-active {
  color: var(--fg-dark);
  background: rgba(38,24,17,0.06);
  font-weight: 500;
}
.rec-top__output-label {
  display: inline-block;
}
/* Trailing dots affordance — visible on hover of active chip OR when menu is open */
.rec-top__output-dots {
  display: inline-grid;
  place-items: center;
  width: 0;
  overflow: hidden;
  color: var(--fg-muted);
  opacity: 0;
  margin-right: -2px;
  border-radius: 4px;
  transition: width 140ms ease-out, opacity 120ms ease-out, margin 140ms ease-out, background-color 100ms ease-out;
}
.rec-top__output-dots:hover { color: var(--fg-dark); background: rgba(38,24,17,0.08); }
.rec-top__output-wrap.is-active:hover .rec-top__output-dots,
.rec-top__output-wrap.is-menuopen .rec-top__output-dots {
  width: 16px;
  opacity: 1;
  margin-left: 2px;
}
/* "+" add button — invisible until the user hovers the header */
.rec-top__output-add {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  margin-left: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out, color 100ms ease-out, background-color 100ms ease-out;
  flex: none;
}
.rec-top:hover .rec-top__output-add,
.rec-top__output-add:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.rec-top__output-add:hover {
  color: var(--fg-dark);
  background: rgba(38,24,17,0.06);
}
.rec-top__output-add svg { display: block; }

/* Chip-menu dropdown — anchored below the chip */
.rec-menu--chip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
}

/* Squeeze the heading when chips are present so the bar fits */
.rec-top--withchips .rec-top__heading { max-width: 320px; }
.rec-top--withchips .rec-top__meta { font-size: 11.5px; }

@media (max-width: 1100px) {
  .rec-top--withchips .rec-top__meta { display: none; }
  .rec-top--withchips .rec-top__heading { max-width: 240px; }
}
@media (max-width: 880px) {
  .rec-top__output { padding: 7px 10px; font-size: 12px; }
  .rec-top--withchips .rec-top__heading { max-width: 180px; }
}
@media (max-width: 1024px) {
  .rec-top__outputs { gap: 0; }
  .rec-top__output { padding: 6px 8px; font-size: 11.5px; }
  .rec-top__output-add { width: 22px; height: 22px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   OUTPUT: REPORT — article-style typography
   ═════════════════════════════════════════════════════════════════════════ */
.rec-page__main--report {
  padding: 0 0 80px;
  gap: 0;
  align-items: stretch;
}
.output-report {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px 60px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

/* Hero */
.rep-hero {
  margin: 0 -32px 8px;
  position: relative;
}
.rep-hero__inner {
  position: relative;
  border-radius: 0;
  overflow: hidden;
}
.rep-hero__img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  background: var(--bg-panel);
  overflow: hidden;
}
.rep-hero__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.rep-hero__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 32px 36px 28px;
  background: linear-gradient(to top, rgba(23,20,18,0.78) 0%, rgba(23,20,18,0.45) 55%, rgba(23,20,18,0) 100%);
  color: #FFFCFA;
}
.rep-hero__kicker {
  font: 500 12px/1.2 'Inter';
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 10px;
}
.rep-hero__title {
  margin: 0 0 8px;
  font: 600 34px/1.15 'Inter';
  letter-spacing: -0.02em;
  color: #FFFCFA;
  text-wrap: pretty;
  max-width: 760px;
}
.rep-hero__byline {
  font: 400 13px/1.4 'Inter';
  opacity: 0.85;
}

.rep-lede {
  font: 400 17px/1.55 'Inter';
  color: var(--fg-base);
  letter-spacing: -0.005em;
  margin: 8px 0 0;
  text-wrap: pretty;
}

.rep-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.rep-h2 {
  margin: 0;
  font: 600 22px/1.25 'Inter';
  letter-spacing: -0.015em;
  color: var(--fg-dark);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.rep-p {
  margin: 0;
  font: 300 15.5px/1.65 'Inter';
  color: var(--fg-base);
  letter-spacing: -0.003em;
  text-wrap: pretty;
}
.rep-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 300 15px/1.55 'Inter';
  color: var(--fg-base);
}
.rep-list li::marker { color: var(--fg-tertiary); }
.rep-figure {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rep-figure img {
  width: 100%;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.rep-figure figcaption {
  font: 300 13px/1.5 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.003em;
  padding: 0 4px;
}
.rep-figure figcaption strong {
  color: var(--fg-base);
  font-weight: 500;
}

/* Editable affordance — give report blocks a gentle hover area */
.output-report .editable {
  border-radius: 8px;
}
.output-report .editable:hover {
  background: rgba(38,24,17,0.025);
}
.rep-hero.editable:hover { background: transparent; }
.rep-hero .editable__pencil { top: 12px; right: 12px; color: #FFFCFA; background: rgba(0,0,0,0.35); border-color: rgba(255,252,250,0.4); }

/* Bottom photo grid inherits dashboard styling — just tighten margin */
.output-report .cs#photos { margin-top: 24px; }

@media (max-width: 1024px) {
  .output-report { padding: 0 16px 40px; gap: 22px; }
  .rep-hero { margin: 0 -16px 8px; }
  .rep-hero__title { font-size: 26px; }
  .rep-hero__overlay { padding: 22px 18px 18px; }
  .rep-h2 { font-size: 19px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   OUTPUT: SLIDE — 16:9 frame that fills available width and scales
   proportionally like an image. ALL inner sizes are in cqw (1cqw = 1% of
   slide width), so when the wrapper shrinks every glyph, pad and gap
   shrinks by the same factor. No media queries change the slide shape.
   ═════════════════════════════════════════════════════════════════════════ */
.rec-page__main--slide {
  padding: 28px 32px 80px;
  gap: 0;
}
.output-slide-wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  align-self: center;
}
.output-slide {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: 1cqw;
  display: flex;
  flex-direction: column;
  padding: 3.6cqw 4.4cqw;
  gap: 2.4cqw;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  /* Reset font-size so cqw-based children render the same regardless of
     ambient body font-size. */
  font-size: 1cqw;
}
.slide__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--fg-muted);
}
.slide__brand {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  color: var(--fg-base);
}
.slide__brandmark {
  width: 2.8cqw;
  height: 2.8cqw;
  border-radius: 0.6cqw;
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  display: inline-grid;
  place-items: center;
  color: var(--fg-dark);
  flex: none;
}
.slide__brandmark svg {
  width: 1.6cqw;
  height: 1.6cqw;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.slide__brandtext {
  font: 500 1.4cqw/1 'Inter';
  letter-spacing: -0.01em;
}
.slide__date {
  font: 500 1.25cqw/1 'Inter';
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.slide__title-block {
  display: flex;
  flex-direction: column;
  gap: 0.9cqw;
}
.slide__kicker {
  font: 500 1.3cqw/1.2 'Inter';
  color: var(--fg-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.slide__title {
  margin: 0;
  font: 600 4.4cqw/1.1 'Inter';
  letter-spacing: -0.02em;
  color: var(--fg-dark);
  text-wrap: pretty;
}
.slide__metrics {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4cqw;
  min-height: 0;
  align-items: stretch;
}
/* The EditableBlock wrapper passed as .slide__metric — make it stretch
   so all 4 cards share identical width AND height. */
.slide__metric {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.slide__metric > .editable__content {
  display: flex;
  width: 100%;
  height: 100%;
}
.slide-metric {
  flex: 1;
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  border-radius: 0.9cqw;
  padding: 1.7cqw 1.7cqw 1.6cqw;
  display: flex;
  flex-direction: column;
  gap: 0.6cqw;
  min-width: 0;
  min-height: 0;
}
.slide-metric__label {
  font: 500 1.25cqw/1.2 'Inter';
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.slide-metric__value {
  font: 600 4cqw/1.05 'Inter';
  letter-spacing: -0.02em;
  color: var(--fg-dark);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.slide-metric__sub {
  font: 300 1.35cqw/1.4 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.003em;
  min-height: 3.8cqw;
}
.slide-metric__bar {
  height: 0.5cqw;
  background: rgba(38, 24, 17, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.4cqw;
}
.slide-metric__bar > span {
  display: block;
  height: 100%;
  background: #52B26E;
  border-radius: inherit;
}
.slide__foot {
  font: 400 1.2cqw/1.3 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.005em;
  border-top: 1px solid var(--border-light);
  padding-top: 1.3cqw;
}

/* Slide editable affordance — the wrapper itself shouldn't paint over the
   card background; tile already has its own bg + hover handled below. */
.output-slide .editable { border-radius: 0.6cqw; }
.output-slide .editable:hover { background: rgba(38, 24, 17, 0.025); }
.output-slide .slide__metric.editable:hover { background: transparent; }
.output-slide .slide__metric.editable:hover .slide-metric {
  box-shadow: 0 0 0 1px var(--fg-light-muted);
}
.output-slide .editable__pencil {
  width: 2.2cqw;
  height: 2.2cqw;
  min-width: 0;
  min-height: 0;
}
.output-slide .editable__pencil svg {
  width: 1.2cqw;
  height: 1.2cqw;
}

@media (max-width: 1024px) {
  .rec-page__main--slide { padding: 16px 16px 40px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Side panel additions — output filter dot, empty state
   ═════════════════════════════════════════════════════════════════════════ */
.rp-ver__empty {
  padding: 24px 4px;
  font: 300 13px/1.5 'Inter';
  color: var(--fg-muted);
  text-align: center;
}
.rp-ver__monthcount {
  margin-left: auto;
  font: 500 11px/1 'Inter';
  color: var(--fg-tertiary);
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(38,24,17,0.05);
}
.rp-ver__output {
  color: var(--fg-tertiary);
  font-weight: 400;
}
.rp-ver__dot {
  color: var(--fg-light-muted);
  margin: 0 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   Source updates — affected-outputs (inline text, single line)
   ───────────────────────────────────────────────────────────────────── */
.su-row__affects {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  font: 400 12px/1.4 'Inter';
  color: var(--fg-muted);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.su-row__affectslabel {
  color: var(--fg-tertiary);
  flex: none;
}
.su-row__affectslist {
  color: var(--fg-base);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* When the change is resolved, fade the affects line */
.su-row--accepted .su-row__affects,
.su-row--declined .su-row__affects { opacity: 0.55; }

/* ═════════════════════════════════════════════════════════════════════════
   NEW RECORD — empty state
   Shown the moment a user clicks "+" on any Content Library section toolbar.
   Lives inside .rec-page__main--empty so it inherits page padding from the
   record shell, but lays itself out as a centered narrow column.
   ═════════════════════════════════════════════════════════════════════════ */
.rec-page__main--empty {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 120px 24px 48px;
  width: auto !important;
  min-height: 100%;
}
.rec-empty {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
}
.rec-empty__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rec-empty__mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #F4EFE9;
  border: 0;
  display: grid;
  place-items: center;
  color: #33302E;
  margin-bottom: 24px;
}
.rec-empty__mark svg {
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.rec-empty__desc {
  font: 400 15px/1.55 'Inter';
  color: var(--fg-muted, #8A847F);
  letter-spacing: -0.005em;
  margin: 0 0 40px;
  max-width: 560px;
  text-wrap: pretty;
}
.rec-empty__link {
  color: var(--fg-dark, #1F1B19);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  font-weight: 500;
}
.rec-empty__link:hover { opacity: 0.75; }
.rec-empty__getstart {
  font: 500 12px/1 'Inter';
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted, #8A847F);
  align-self: center;
  margin-bottom: 12px;
}
.rec-empty__cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.rec-empty__card {
  appearance: none;
  background: #FEFCFA;
  border: 1px solid #E7E1DF;
  border-radius: 12px;
  padding: 18px 18px 20px;
  text-align: left;
  display: grid;
  grid-template-columns: 36px 1fr 20px;
  grid-template-rows: auto auto;
  gap: 4px 14px;
  align-items: start;
  cursor: pointer;
  position: relative;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  color: inherit;
  font: inherit;
}
.rec-empty__card:hover {
  border-color: #C9C2BE;
  background: #FFFEFC;
  box-shadow: 0 1px 0 rgba(38,24,17,0.02), 0 6px 18px -8px rgba(38,24,17,0.12);
}
.rec-empty__card:focus-visible {
  outline: 2px solid #33302E;
  outline-offset: 2px;
}
.rec-empty__card-ico {
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #F4EFE9;
  color: #33302E;
  flex: none;
}
.rec-empty__card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rec-empty__card-title {
  font: 500 14.5px/1.3 'Inter';
  color: var(--fg-dark, #1F1B19);
  letter-spacing: -0.01em;
}
.rec-empty__card-desc {
  font: 400 13px/1.5 'Inter';
  color: var(--fg-muted, #8A847F);
  text-wrap: pretty;
}
.rec-empty__card-arrow {
  grid-row: 1;
  grid-column: 3;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--fg-muted, #8A847F);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 140ms ease, transform 140ms ease, color 120ms ease;
}
.rec-empty__card:hover .rec-empty__card-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--fg-dark, #1F1B19);
}

/* Disabled (Template Library) — same look as AI card; Coming Soon only on hover */
.rec-empty__card--tpl {
  cursor: not-allowed;
}
.rec-empty__card--tpl .rec-empty__card-soon {
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}
.rec-empty__card--tpl:hover .rec-empty__card-soon {
  opacity: 1;
  transform: translateY(0);
}
.rec-empty__card--tpl .rec-empty__card-arrow { display: none; }
.rec-empty__card-soon {
  position: absolute;
  top: 12px;
  right: 14px;
  font: 500 10px/1 'Inter';
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A847F;
  background: #F1ECE5;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid #E7E1DF;
}

/* Top bar — editable title input for new records */
.rec-top__titletext--input {
  appearance: none;
  border: 0;
  background: transparent;
  font: 500 14px/1.2 'Inter';
  color: var(--fg-dark);
  letter-spacing: -0.01em;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 4px;
  min-width: 140px;
  max-width: 320px;
  outline: 1px solid transparent;
  transition: background 120ms ease, outline-color 120ms ease;
}
.rec-top__titletext--input:hover {
  background: rgba(38,24,17,0.04);
}
.rec-top__titletext--input:focus {
  background: rgba(38,24,17,0.04);
  outline-color: #C9C2BE;
}
.rec-top__titletext--input::selection {
  background: rgba(38,24,17,0.18);
}

/* Draft chip in the topbar (replaces "Need review" for empty records) */
.tag-status--draft {
  background: #F4EFE9;
  color: var(--fg-muted, #8A847F);
  border-color: #E7E1DF;
}

/* Empty record's single "New output" chip — centered horizontally in the
   header, sitting on the absolute centre of the topbar so it doesn't follow
   the meta/actions on the right. */
@media (min-width: 1025px) {
  .rec-page--empty .rec-top { position: relative; }
  .rec-page--empty .rec-top__outputs {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
}

/* Empty record has fewer right-side actions, so the owner meta can keep
   appearing at narrower widths than a full record. */
@media (max-width: 1100px) {
  .rec-page--empty .rec-top--withchips .rec-top__meta { display: inline-flex; }
}
@media (max-width: 880px) {
  .rec-page--empty .rec-top--withchips .rec-top__meta { display: none; }
}

/* Side-panel empty states (Details / Comments / Lineage / Version History) */
.rp__p--muted { color: var(--fg-muted, #8A847F); }
.rp-props__v--empty { color: var(--fg-muted, #8A847F); }
.rp__empty {
  padding: 24px 22px;
  text-align: left;
}
.rp__empty--inline { padding: 12px 22px 0; }
.rp__empty-t {
  font: 500 13px/1.4 'Inter';
  color: var(--fg-dark, #1F1B19);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.rp__empty-s {
  font: 400 12.5px/1.55 'Inter';
  color: var(--fg-muted, #8A847F);
  text-wrap: pretty;
}

@media (max-width: 1024px) {
  .rec-page__main--empty { padding: 28px 16px 64px; }
  .rec-empty__cards { grid-template-columns: 1fr; }
  .rec-empty__mark { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px; }
  .rec-empty__desc { font-size: 14px; margin-bottom: 28px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Variant 2 — Steps walkthrough
   ───────────────────────────────────────────────────────────────────────── */
.rec-page__main--empty-steps {
  align-items: flex-start;
  padding: 80px 24px 64px;
}
.rec-empty--steps .rec-empty__inner--wide {
  align-items: stretch;
  max-width: 1040px;
  width: 100%;
}
.rec-steps {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 48px;
}
.rec-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 0 6px;
}
.rec-step__art {
  position: relative;
  width: 124px;
  height: 96px;
  display: grid;
  place-items: center;
  color: #8A847F;
}
.rec-step__art svg {
  width: 120px;
  height: 88px;
  display: block;
}
.rec-step__num {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-66px);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F4EFE9;
  color: #33302E;
  display: grid;
  place-items: center;
  font: 600 12px/1 'Inter';
  border: 1px solid #E7E1DF;
}
.rec-step__t {
  font: 500 14.5px/1.35 'Inter';
  color: var(--fg-dark, #1F1B19);
  letter-spacing: -0.01em;
  max-width: 220px;
  text-wrap: pretty;
}
.rec-step__d {
  font: 400 13px/1.5 'Inter';
  color: var(--fg-muted, #8A847F);
  max-width: 240px;
  text-wrap: pretty;
}
.rec-step__sep {
  flex: 0 0 56px;
  align-self: flex-start;
  margin-top: 46px;
  color: #C9C2BE;
}
.rec-step__sep svg {
  width: 100%;
  height: 8px;
  display: block;
}
.rec-empty--steps .rec-empty__getstart {
  align-self: center;
  margin-bottom: 14px;
}
.rec-empty--steps .rec-empty__cards {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 880px) {
  .rec-steps {
    flex-direction: column;
    gap: 24px;
  }
  .rec-step__sep {
    flex: 0 0 24px;
    align-self: center;
    margin-top: 0;
    transform: rotate(90deg);
    width: 24px;
  }
  .rec-step__num { transform: translateX(-56px); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Variant 3 — Steps + chat composer with prompt-category chips
   Same step row as variant 2, but the "Get started with" section is a big
   white prompt input (mimics the chat composer, scaled up) with four chips
   below: Create / Write / Present + Templates (disabled, hosts an "open in
   new tab" icon). Clicking a chip pops a 5-item suggestion list.
   ───────────────────────────────────────────────────────────────────────── */
.rec-page__main--empty-prompt {
  align-items: flex-start;
  padding: 120px 24px 96px;
}
.rec-empty--prompt .rec-empty__inner--wide { max-width: 1040px; gap: 0; }
.rec-empty--prompt .rec-empty__getstart {
  align-self: center;
  margin-bottom: 14px;
}
.rec-empty__sectitle {
  align-self: center;
  font: 500 12px/1 'Inter';
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted, #8A847F);
  margin-bottom: 18px;
}
.rec-empty__sectitle--btn {
  appearance: none;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 90px;
  transition: color 120ms ease, background 120ms ease;
}
.rec-empty__sectitle--btn:hover { color: var(--fg-dark, #1F1B19); background: #F4EFE9; }
.rec-empty__sectitle-caret {
  display: inline-grid;
  place-items: center;
  transition: transform 160ms ease;
}
.rec-empty__sectitle--btn.is-open .rec-empty__sectitle-caret { transform: rotate(180deg); }
.rec-step__more {
  display: inline-block;
  margin-top: 8px;
  color: var(--fg-dark, #1F1B19);
  font: 500 12.5px/1 'Inter';
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.rec-step__more:hover { opacity: 0.7; }
/* Two-step variant: keep both steps centered on the wider row */
.rec-steps--two {
  max-width: 760px;
  margin: 0 auto;
  justify-content: center;
  gap: 0;
}
.rec-steps--two .rec-step { max-width: 320px; }

.rec-prompt {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* Host wrapper: reuse the chat panel's <Composer> but enlarge it and add a
   deeper drop shadow. The composer's own CSS (chat-composer*) keeps all the
   internal behaviour intact (mentions, agent dropdown, cycling placeholder,
   send/attach buttons).

   Layout tweak: the agent selector sits absolute top-right so the editor's
   placeholder lines up on the same row visually. */
.rec-prompt__host .chat-composer {
  position: relative;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E7E1DF;
  padding: 16px 16px 12px;
  box-shadow:
    0 1px 0 rgba(38,24,17,0.02),
    0 6px 16px -8px rgba(38,24,17,0.08),
    0 32px 64px -24px rgba(38,24,17,0.18);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.rec-prompt__host .chat-composer:focus-within {
  border-color: #C9C2BE;
  box-shadow:
    0 1px 0 rgba(38,24,17,0.02),
    0 8px 22px -8px rgba(38,24,17,0.10),
    0 40px 80px -24px rgba(38,24,17,0.22);
}
.rec-prompt__host .chat-composer__agentrow {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
  z-index: 2;
}
.rec-prompt__host .chat-composer__editor-wrap {
  min-height: 48px;
  padding-right: 140px; /* leave room for the agent selector */
}
.rec-prompt__host .chat-composer__editor {
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
  direction: ltr;
  min-height: 48px;
}
.rec-prompt__host .chat-composer__placeholder {
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}

/* Chips row */
.rec-prompt__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
  position: relative;
}
.rec-chip-wrap { position: relative; }
.rec-chip {
  appearance: none;
  background: #FEFCFA;
  border: 1px solid #E7E1DF;
  border-radius: 999px;
  padding: 8px 14px;
  font: 500 13px/1 'Inter';
  letter-spacing: -0.005em;
  color: var(--fg-dark, #1F1B19);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.rec-chip:hover {
  background: #F8F4EF;
  border-color: #C9C2BE;
}
.rec-chip.is-active {
  background: #1F1B19;
  border-color: #1F1B19;
  color: #FEFCFA;
}
.rec-chip__ico {
  display: inline-grid;
  place-items: center;
  color: currentColor;
  flex: none;
}
.rec-chip--tpl {
  cursor: not-allowed;
}
.rec-chip--tpl:hover {
  background: #FEFCFA;
  border-color: #E7E1DF;
}
.rec-chip__ext {
  display: inline-grid;
  place-items: center;
  color: var(--fg-muted, #8A847F);
  margin-left: 2px;
}

/* Popover with suggestions */
.rec-chip__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 32px));
  background: #FFFFFF;
  border: 1px solid #E7E1DF;
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(38,24,17,0.02),
    0 12px 28px -10px rgba(38,24,17,0.18),
    0 32px 64px -24px rgba(38,24,17,0.20);
  padding: 8px;
  z-index: 5;
  animation: rec-chip__pop-in 140ms ease both;
}
@keyframes rec-chip__pop-in {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.rec-chip__pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 10px;
  border-bottom: 1px solid #F4EFE9;
  margin-bottom: 4px;
  color: var(--fg-dark, #1F1B19);
}
.rec-chip__pop-ico { display: inline-grid; place-items: center; color: var(--fg-muted, #8A847F); }
.rec-chip__pop-t {
  font: 500 13px/1 'Inter';
  flex: 1;
}
.rec-chip__pop-x {
  appearance: none;
  background: transparent;
  border: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--fg-muted, #8A847F);
  cursor: pointer;
}
.rec-chip__pop-x:hover { background: #F4EFE9; color: var(--fg-dark, #1F1B19); }
.rec-chip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.rec-chip__pick {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font: 400 13.5px/1.4 'Inter';
  color: var(--fg-dark, #1F1B19);
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-wrap: pretty;
}
.rec-chip__pick:hover { background: #F8F4EF; }

@media (max-width: 1024px) {
  .rec-page__main--empty-prompt { padding: 28px 16px 64px; }
  .rec-prompt__host .chat-composer { padding: 12px 12px 10px; border-radius: 14px; }
  .rec-prompt__host .chat-composer__editor,
  .rec-prompt__host .chat-composer__placeholder { font-size: 14px; }
}


/* ===== Floating chat bubble ===== */
.chat-bubble {
  position: fixed;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: var(--bg-app);
  color: #171412;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 2px rgba(38,24,17,0.06),
    0 6px 14px rgba(38,24,17,0.12),
    0 14px 28px rgba(38,24,17,0.10);
  transition: transform 140ms cubic-bezier(.2,0,0,1),
              box-shadow 160ms cubic-bezier(.2,0,0,1),
              border-color 140ms ease;
  z-index: 20;
}
.chat-bubble:hover {
  border-color: var(--fg-light-muted, #A09792);
  box-shadow:
    0 1px 2px rgba(38,24,17,0.08),
    0 10px 20px rgba(38,24,17,0.16),
    0 18px 36px rgba(38,24,17,0.14);
  transform: translateY(-1px);
}
.chat-bubble:active { transform: translateY(0); }
.chat-bubble.is-open { border-color: var(--fg-light-muted, #A09792); }
.chat-bubble--right { right: 20px; }
/* Left position sits past the 55px nav rail so it never overlaps */
.chat-bubble--left  { left: calc(55px + 20px); }
.chat-bubble__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .chat-bubble {
    bottom: calc(58px + env(safe-area-inset-bottom) + 14px);
  }
  .chat-bubble--right { right: 16px; }
  /* Mobile collapses the rail — restore a normal left inset */
  .chat-bubble--left  { left: 16px; }
}


/* ════════════════════════════════════════════════════════════════
   GENERATING PLACEHOLDER
   Shown in the record output area while the agent simulates building
   the Annacis Project Overview dashboard. Replaces .rec-empty.
   ════════════════════════════════════════════════════════════════ */
.rec-page__main--generating {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 56px 24px 64px;
  min-height: 100%;
}
.rec-gen {
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rec-gen__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 28px;
  align-items: center;
  justify-items: center;
}
/* ── Art block ─────────────────────────────────────────────────── */
.rec-gen__art {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 50% 30%, #FFFBF6 0%, #F6EFE6 60%, #EFE6D9 100%);
  border: 1px solid var(--border-light, #E7E1DF);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(38,24,17,0.02),
    0 18px 48px -20px rgba(38,24,17,0.25);
}
/* soft pulsing halo — warm neutral, no chroma */
.rec-gen__halo {
  position: absolute;
  inset: -20%;
  background: radial-gradient(closest-side at 50% 50%, rgba(74, 65, 60, 0.10), transparent 70%);
  filter: blur(8px);
  animation: recGenHalo 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes recGenHalo {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.06); }
}
/* wireframe of the dashboard */
.rec-gen__wire {
  position: absolute;
  inset: 14% 12%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  row-gap: 10px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E7E1DF;
  padding: 14px;
  box-shadow: 0 8px 28px -14px rgba(38,24,17,0.20);
  overflow: hidden;
}
.rec-gen__wire-head { display: grid; row-gap: 6px; }
.rec-gen__wire-bar {
  display: block;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, #EFE6DA 0%, #F6EFE6 50%, #EFE6DA 100%);
  background-size: 200% 100%;
  animation: recGenShimmer 1.6s linear infinite;
}
.rec-gen__wire-bar--title { width: 60%; height: 10px; background: linear-gradient(90deg, #E7DFCF, #F3EBDB, #E7DFCF); background-size: 200% 100%; animation: recGenShimmer 1.6s linear infinite; }
.rec-gen__wire-bar--sub   { width: 38%; height: 6px; opacity: 0.75; }
.rec-gen__wire-bar--xs    { width: 38%; height: 6px; }
.rec-gen__wire-bar--sm    { width: 70%; height: 7px; }
.rec-gen__wire-bar--lg    { width: 60%; height: 14px; background: linear-gradient(90deg, #E2D3BB, #F0E4CC, #E2D3BB); background-size: 200% 100%; }
.rec-gen__wire-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.rec-gen__wire-kpi {
  background: #FAF6EE;
  border: 1px solid #EFE6D9;
  border-radius: 8px;
  padding: 8px;
  display: grid;
  row-gap: 6px;
  animation: recGenKpiPop 2.4s ease-in-out infinite;
}
@keyframes recGenKpiPop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.rec-gen__wire-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}
.rec-gen__wire-cell {
  background: #FAF6EE;
  border: 1px solid #EFE6D9;
  border-radius: 8px;
  padding: 8px;
  min-height: 60px;
}
.rec-gen__wire-cell--chart { display: grid; align-items: end; }
.rec-gen__wire-cell--chart svg { width: 100%; height: 100%; }
.rec-gen__spark {
  fill: none;
  stroke: #6B6360;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: recGenSpark 2.2s ease-in-out infinite;
}
@keyframes recGenSpark {
  0%   { stroke-dashoffset: 240; opacity: 0.4; }
  60%  { stroke-dashoffset: 0;   opacity: 0.85; }
  100% { stroke-dashoffset: 0;   opacity: 0.65; }
}
.rec-gen__wire-cell--list {
  display: grid;
  row-gap: 6px;
  align-content: start;
}
/* sweeping scan line — warm neutral */
.rec-gen__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(74,65,60,0.06) 45%, rgba(74,65,60,0.14) 50%, rgba(74,65,60,0.06) 55%, transparent 100%);
  mix-blend-mode: multiply;
  transform: translateY(-100%);
  animation: recGenScan 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes recGenScan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@keyframes recGenShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* orbiting source-document chips */
.rec-gen__orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rec-gen__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font: 500 11.5px/1 'Inter';
  letter-spacing: -0.005em;
  color: #4A413C;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(231,225,223,0.95);
  border-radius: 999px;
  box-shadow: 0 2px 6px -2px rgba(38,24,17,0.12), 0 6px 16px -10px rgba(38,24,17,0.18);
  white-space: nowrap;
  backdrop-filter: blur(2px);
  opacity: 0;
  animation: recGenChipIn 700ms cubic-bezier(.2,0,0,1) forwards,
             recGenChipFloat 5.6s ease-in-out infinite;
}
@keyframes recGenChipIn {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes recGenChipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.rec-gen__chip-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #4A413C;
  box-shadow: 0 0 0 2px rgba(74,65,60,0.14);
}
/* Position chips around the wireframe */
.rec-gen__chip--a { top: 6%;  left: 4%;   animation-delay: 0ms,   200ms; }
.rec-gen__chip--b { top: 4%;  right: 6%;  animation-delay: 180ms, 600ms; }
.rec-gen__chip--c { top: 46%; right: 2%;  animation-delay: 320ms, 1000ms; }
.rec-gen__chip--d { bottom: 8%; right: 12%; animation-delay: 460ms, 1400ms; }
.rec-gen__chip--e { bottom: 6%; left: 8%;  animation-delay: 600ms, 1800ms; }

/* ── Caption / steps / progress ────────────────────────────────── */
.rec-gen__caption {
  width: 100%;
  max-width: 520px;
  display: grid;
  row-gap: 14px;
  justify-items: center;
}
.rec-gen__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 14px/1 'Inter';
  letter-spacing: -0.005em;
  color: var(--fg-dark, #1F1B19);
}
.rec-gen__title svg { color: var(--fg-dark, #1F1B19); }
.rec-gen__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  row-gap: 6px;
  justify-items: start;
  padding-left: 16px;
}
.rec-gen__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 13.5px/1.4 'Inter';
  color: var(--fg-muted, #8A847F);
  transition: color 200ms ease, opacity 200ms ease;
}
.rec-gen__step-mark {
  width: 16px; height: 16px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #D9D2CC;
  background: #FFFFFF;
  color: #4A413C;
  flex: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.rec-gen__step-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #4A413C;
  box-shadow: 0 0 0 0 rgba(74,65,60,0.5);
  animation: recGenStepPulse 1.2s ease-out infinite;
}
@keyframes recGenStepPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,65,60,0.55); }
  100% { box-shadow: 0 0 0 8px rgba(74,65,60,0); }
}
.rec-gen__step--done .rec-gen__step-mark {
  background: #4A413C;
  border-color: #4A413C;
  color: #FFFFFF;
}
.rec-gen__step--done { color: var(--fg-light-muted, #A09792); }
.rec-gen__step--active { color: var(--fg-dark, #1F1B19); font-weight: 500; }
.rec-gen__step--active .rec-gen__step-mark { border-color: #4A413C; }
.rec-gen__step--pending { opacity: 0.65; }

.rec-gen__bar {
  width: 100%;
  height: 4px;
  background: #EFE6D9;
  border-radius: 999px;
  overflow: hidden;
}
.rec-gen__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4A413C 0%, #7A6F69 100%);
  border-radius: 999px;
  transition: width 700ms cubic-bezier(.4,0,.2,1);
}

@media (min-width: 880px) {
  .rec-gen__inner {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    column-gap: 36px;
    row-gap: 0;
    justify-items: stretch;
  }
  .rec-gen__art { max-width: 100%; }
  .rec-gen__caption { justify-items: start; }
}

@media (max-width: 1024px) {
  .rec-page__main--generating { padding: 28px 16px 56px; }
  .rec-gen__art { aspect-ratio: 4 / 3; }
  .rec-gen__wire { inset: 10% 8%; padding: 10px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   NEW RECORD — TEMPLATES empty state
   "Get started with a template" — curated grid of starter templates, each
   opening a full preview modal. Lives inside .rec-page__main--empty.
   ═════════════════════════════════════════════════════════════════════════ */
.rec-empty--templates { max-width: 1080px; }
.rec-empty--templates .rec-empty__inner--wide {
  align-items: center;
  max-width: 1080px;
  width: 100%;
}
.rec-empty--templates .rec-empty__getstart { margin-bottom: 28px; }

.tpl-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tpl-card {
  appearance: none;
  font: inherit;
  text-align: left;
  background: #FEFCFA;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}
.tpl-card:hover {
  border-color: #C9C2BE;
  box-shadow: 0 1px 0 rgba(38,24,17,0.02), 0 14px 30px -16px rgba(38,24,17,0.22);
  transform: translateY(-2px);
}
.tpl-card:focus-visible { outline: 2px solid #33302E; outline-offset: 2px; }
.tpl-card__preview {
  display: block;
  aspect-ratio: 16 / 10;
  background: #FBF9F6;
  border-bottom: 1px solid var(--border-light);
  padding: 16px 16px 0;
  overflow: hidden;
}
.tpl-card__title {
  display: block;
  padding: 16px 18px 18px;
  font: 500 15px/1.3 'Inter';
  color: var(--fg-dark);
  letter-spacing: -0.01em;
}

/* ── Card thumbnail — abstract dashboard sketch ── */
.tpl-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  --ink: #C9C2BE;
  --ink-soft: #E3DDD9;
  --ink-line: #9FB6C9;
}
.tpl-thumb__bar { background: var(--ink-soft); border-radius: 3px; height: 5px; }
.tpl-thumb__bar--title { width: 46%; height: 7px; background: var(--ink); }
.tpl-thumb__bar--row { width: 100%; }
.tpl-thumb__bar--short { width: 62%; }
.tpl-thumb__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tpl-thumb__kpi {
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
  padding: 5px 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.tpl-thumb__num { height: 6px; width: 70%; background: var(--ink); border-radius: 2px; }
.tpl-thumb__cap { height: 3px; width: 95%; background: var(--ink-soft); border-radius: 2px; }
.tpl-thumb__chart {
  flex: 1; min-height: 0;
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
  padding: 6px;
}
.tpl-thumb__chart svg { width: 100%; height: 100%; display: block; }
.tpl-thumb__area { fill: rgba(67,120,224,0.10); }
.tpl-thumb__line { fill: none; stroke: var(--ink-line); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.tpl-thumb__bars, .tpl-thumb__wf {
  flex: 1; min-height: 0;
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
  padding: 7px 8px;
  display: flex; align-items: flex-end; gap: 5px;
}
.tpl-thumb__bars span { flex: 1; background: var(--ink); border-radius: 2px 2px 0 0; }
.tpl-thumb__bars span.is-hi { background: #6B6661; }
.tpl-thumb__wf { align-items: flex-start; }
.tpl-thumb__wf span { flex: 1; border-radius: 2px; }
.tpl-thumb__wf span.is-pos { background: rgba(82,178,110,0.55); }
.tpl-thumb__wf span.is-neg { background: rgba(208,74,63,0.5); }
.tpl-thumb__grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 5px;
}
.tpl-thumb__grid span { background: var(--ink-soft); border-radius: 3px; }
.tpl-thumb__rows { display: flex; flex-direction: column; gap: 5px; }

/* ── Explore / divider / agent card ── */
.tpl-explore {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  margin-top: 28px;
  font: 400 13px/1 'Inter';
  color: var(--fg-base);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.tpl-explore:hover { color: var(--fg-dark); }
.tpl-or {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 420px;
  margin: 56px auto 36px;
  color: var(--fg-light-muted);
  font: 500 11px/1 'Inter'; letter-spacing: 0.08em; text-transform: uppercase;
}
.tpl-or::before, .tpl-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border-light);
}
.tpl-or span { padding: 0 14px; }
.tpl-agent-card {
  width: 100%; max-width: 460px;
  margin: 0 auto;
  grid-template-columns: 36px 1fr 20px;
}

@media (max-width: 980px) {
  .tpl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tpl-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Hub-level template empty state (Sales / Operations dashboards) ── */
.hub-tpl-empty { width: 100%; padding: 32px 0 64px; }
.hub-tpl-empty__row {
  width: 100%; max-width: 970px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
}
.hub-tpl-empty__card { flex: 1 1 340px; max-width: 460px; margin: 0; }
@media (max-width: 640px) {
  .hub-tpl-empty { padding: 24px 0 48px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   TEMPLATE PREVIEW MODAL
   ═════════════════════════════════════════════════════════════════════════ */
.tpl-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: 32px;
}
.tpl-modal__scrim {
  position: absolute; inset: 0;
  background: rgba(23, 20, 18, 0.42);
  backdrop-filter: blur(2px);
  animation: spScrimIn 160ms ease-out;
}
.tpl-modal__panel {
  position: relative;
  width: min(1000px, 96vw);
  height: min(880px, 92vh);
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(23,20,18,0.4);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 1;
  animation: tplModalIn 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes tplModalIn { from { transform: translateY(12px) scale(0.99); } to { transform: none; } }

.tpl-modal__head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px 14px 18px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-app);
}
.tpl-modal__head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tpl-modal__mark {
  flex: none; width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center;
  background: #F4EFE9; color: #33302E;
  border: 1px solid var(--border-light);
}
.tpl-modal__mark svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tpl-modal__titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tpl-modal__kicker { font: 500 10.5px/1 'Inter'; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-light-muted); }
.tpl-modal__title { font: 500 16px/1.3 'Inter'; color: var(--fg-dark); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-modal__head-r { display: flex; align-items: center; gap: 10px; flex: none; }
.tpl-add-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px 8px 11px;
  background: #171412; color: #FFFCFA;
  border: 1px solid #171412; border-radius: 8px;
  font: 500 13px/1 'Inter'; letter-spacing: -0.01em;
  transition: background 120ms ease, transform 120ms ease;
}
.tpl-add-btn svg { stroke: currentColor; }
.tpl-add-btn:hover { background: #2A2522; }
.tpl-add-btn:active { transform: translateY(1px); }
.tpl-modal__close { color: var(--fg-muted); }

.tpl-modal__banner {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  background: rgba(226,133,82,0.08);
  border-bottom: 1px solid var(--border-light);
  font: 400 12.5px/1.4 'Inter'; color: var(--fg-muted); letter-spacing: -0.005em;
}
.tpl-modal__banner-ico { flex: none; color: var(--accent-orange); display: inline-grid; place-items: center; }
.tpl-modal__banner-ico svg { stroke: currentColor; }

.tpl-modal__body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 24px;
  background: var(--bg-app);
}
.tpl-modal__doc {
  max-width: 880px; margin: 0 auto;
  transition: opacity 200ms ease, filter 200ms ease;
}
.tpl-modal__doc.is-dimmed { opacity: 0.4; filter: grayscale(0.2); pointer-events: none; }

/* ── Upload zone (after + Add) ── */
.tpl-drop-wrap { max-width: 880px; margin: 0 auto 22px; }
.tpl-drop {
  width: 100%;
  appearance: none; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 36px 28px;
  background: #FBF8F4;
  border: 1.5px dashed #C9C2BE; border-radius: 14px;
  transition: border-color 130ms ease, background 130ms ease;
}
.tpl-drop:hover { border-color: #8A847F; background: #F7F2EC; }
.tpl-drop__ico {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 4px;
  background: #F1ECE5; color: #33302E;
}
.tpl-drop__ico svg { stroke: currentColor; }
.tpl-drop__t { font: 500 15px/1.3 'Inter'; color: var(--fg-dark); letter-spacing: -0.01em; }
.tpl-drop__s { font: 400 13px/1.5 'Inter'; color: var(--fg-muted); max-width: 440px; text-wrap: pretty; }
.tpl-drop__browse {
  margin-top: 8px;
  padding: 8px 16px; border-radius: 8px;
  background: #171412; color: #FFFCFA;
  font: 500 13px/1 'Inter';
}
.tpl-drop--uploading { cursor: default; align-items: stretch; text-align: left; gap: 14px; }
.tpl-drop__title-row {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font: 500 14px/1.3 'Inter'; color: var(--fg-dark);
}
.tpl-drop__title-row svg { color: var(--accent-purple-ai); }
.tpl-drop__files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 460px; margin: 0 auto; width: 100%; }
.tpl-drop__file {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: #FEFCFA; border: 1px solid var(--border-light); border-radius: 8px;
  opacity: 0; transform: translateY(4px);
  animation: tplFileIn 280ms ease forwards;
}
@keyframes tplFileIn { to { opacity: 1; transform: none; } }
.tpl-drop__file-ico { flex: none; color: var(--fg-muted); display: inline-grid; place-items: center; }
.tpl-drop__file-name { flex: 1; min-width: 0; font: 400 12.5px/1.3 'Inter'; color: var(--fg-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-drop__file-spin {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(160,151,146,0.35); border-top-color: var(--accent-purple-ai);
  animation: tplSpin 700ms linear infinite;
}
@keyframes tplSpin { to { transform: rotate(360deg); } }
.tpl-drop-foot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 16px; text-align: center;
}
.tpl-drop-foot__or { font: 500 11px/1 'Inter'; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-light-muted); }
.tpl-create-empty {
  appearance: none; cursor: pointer;
  padding: 9px 18px;
  background: #FEFCFA; color: var(--fg-dark);
  border: 1px solid var(--border-dark); border-radius: 8px;
  font: 500 13px/1 'Inter';
  transition: background 120ms ease;
}
.tpl-create-empty:hover { background: #F4EFE9; }
.tpl-drop-foot__hint { font: 400 12px/1.4 'Inter'; color: var(--fg-light-muted); }

@media (max-width: 1024px) {
  .tpl-modal { padding: 0; }
  .tpl-modal__panel { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
  .tpl-modal__body { padding: 16px; }
}

/* ==========================================================================
   Hub home v2.0 — expanded nav rail + hub home page
   ========================================================================== */

/* ---------- Collapsed icon rail: hub list container ---------- */
.rail__hubs {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%;
}

/* Collapsed-rail hover tooltips (hub names + icon labels) with a small show delay */
.rail--collapsed [data-tip] { position: relative; }
.rail--collapsed [data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 7px 10px; border-radius: 7px;
  background: var(--fg-dark); color: var(--fg-on-dark);
  font: 400 12px/1 'Inter'; letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: var(--shadow-popover);
  opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity 110ms ease, transform 110ms ease;
}
.rail--collapsed [data-tip]::before {
  content: ""; position: absolute; left: calc(100% + 6px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  border: 5px solid transparent; border-right-color: var(--fg-dark);
  opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity 110ms ease, transform 110ms ease;
}
.rail--collapsed [data-tip]:hover::after,
.rail--collapsed [data-tip]:hover::before,
.rail--collapsed [data-tip]:focus-visible::after,
.rail--collapsed [data-tip]:focus-visible::before {
  opacity: 1; transform: translateY(-50%) translateX(0);
  transition-delay: 300ms;
}

/* ---------- Expanded rail (264px) ---------- */
.rail--expanded {
  align-items: stretch;
  padding: 10px 10px 12px;
  gap: 1px;
}

/* Division selector */
.railx__top { position: relative; padding: 2px 2px 8px; }
.railx__division {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 8px;
  background: transparent; border: 0; cursor: pointer;
  transition: background 120ms ease;
}
.railx__division:hover { background: var(--bg-hover); }
.railx__dot { width: 11px; height: 11px; border-radius: 999px; background: #E1261C; flex: none; }
.railx__logo { width: 22px; height: 22px; object-fit: contain; flex: none; display: block; }
.railx__divmenu-item .railx__logo { width: 20px; height: 20px; }
.railx__division-label {
  flex: 1; text-align: left;
  font: 500 14px/1.2 'Inter'; color: var(--fg-dark); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.railx__division-caret { color: var(--fg-muted); display: grid; place-items: center; flex: none; }

.railx__divmenu {
  position: absolute; top: calc(100% - 4px); left: 2px; right: 2px;
  background: var(--bg-white); border: 1px solid var(--border-light);
  border-radius: 10px; box-shadow: var(--shadow-popover);
  padding: 6px; z-index: 40; opacity: 1;
}
.railx__divmenu-head {
  font: 500 11px/1 'Inter'; color: var(--fg-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 8px 10px 6px;
}
.railx__divmenu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 8px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg-dark); transition: background 120ms ease;
}
.railx__divmenu-item:hover { background: var(--bg-hover); }
.railx__divmenu-label { flex: 1; text-align: left; font: 400 14px/1.2 'Inter'; }
.railx__divmenu-item svg { color: var(--fg-dark); flex: none; }

/* Hub list */
.railx__hubs {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 2px 0;
}
.railx__hubs::-webkit-scrollbar { width: 8px; }
.railx__hubs::-webkit-scrollbar-thumb { background: rgba(160,151,146,0.32); border-radius: 999px; border: 2px solid var(--bg-app); }
/* Workspace group (Projects / Operations) */
.railx__group { display: flex; flex-direction: column; gap: 1px; }
.railx__group + .railx__group { margin-top: 14px; }
.railx__grouphead {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 11px 5px; border-radius: 8px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  transition: background 120ms ease;
}
.railx__grouphead:hover { background: var(--bg-hover); }
.railx__group-caret {
  display: grid; place-items: center; flex: none; color: var(--fg-muted);
  transition: transform 140ms ease;
}
.railx__group-caret.is-collapsed { transform: rotate(-90deg); }
.railx__group-label {
  font: 500 11px/1 'Inter'; color: var(--fg-muted);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.railx__hub {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 11px; border-radius: 8px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  color: var(--fg-muted); transition: background 120ms ease, color 120ms ease;
}
.railx__hub:hover { background: var(--bg-hover); color: var(--fg-dark); }
.railx__hub.is-active { background: rgba(38,24,17,0.06); color: var(--fg-dark); }
.railx__hub-ico { display: grid; place-items: center; flex: none; color: var(--fg-light-muted); }
.railx__hub:hover .railx__hub-ico,
.railx__hub.is-active .railx__hub-ico { color: var(--fg-dark); }
.railx__hub-label {
  font: 400 14px/1.3 'Inter'; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.railx__hub.is-active .railx__hub-label { font-weight: 500; }

/* Footer */
.railx__foot { margin-top: auto; display: flex; flex-direction: column; gap: 1px; padding-top: 6px; }
.railx__footbtn {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 11px; border-radius: 8px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  color: var(--fg-muted); transition: background 120ms ease, color 120ms ease;
}
.railx__footbtn:hover { background: var(--bg-hover); color: var(--fg-dark); }
.railx__footbtn.is-active { background: rgba(38,24,17,0.06); color: var(--fg-dark); }
.railx__footbtn-ico { display: grid; place-items: center; flex: none; }
.railx__footbtn-label { font: 400 13.5px/1.3 'Inter'; letter-spacing: -0.01em; }
.railx__footrule { height: 1px; background: var(--border-light); margin: 7px 6px; }
.railx__collapse { color: var(--fg-light-muted); }
.railx__user {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; border-radius: 8px; margin-top: 3px;
  background: transparent; border: 0; cursor: pointer;
  transition: background 120ms ease;
}
.railx__user:hover { background: var(--bg-hover); }
.railx__user-av {
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  background: url('../assets/avatar.jpg') center/cover;
  border: 1px solid var(--border-light);
}
.railx__user-name { flex: 1; text-align: left; font: 400 13px/1.2 'Inter'; color: var(--fg-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.railx__user-caret { color: var(--fg-muted); display: grid; place-items: center; flex: none; }

/* ---------- Hub home page ---------- */
.hubh {
  max-width: none; margin: 0;
  container-type: inline-size;
  padding: 8px 44px 92px;
  display: flex; flex-direction: column; gap: 24px;
}
.hubh__head { display: flex; flex-direction: column; gap: 16px; }
.hubh__headrow { display: flex; align-items: flex-start; gap: 16px; }
.hubh__headactions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hubh-iconbtn {
  appearance: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-white, #FFFCFA);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.hubh-iconbtn:hover { background: var(--bg-hover); color: var(--fg-dark); border-color: var(--border-subtle); }
.hubh-iconbtn.is-active { background: var(--fg-dark); border-color: var(--fg-dark); color: #FFFCFA; }
/* Agent button: the original v3 chat bubble, inline in the header */
.hubh-agentbtn {
  appearance: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: var(--bg-app);
  color: #171412;
  padding: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow:
    0 1px 2px rgba(38,24,17,0.06),
    0 6px 14px rgba(38,24,17,0.12),
    0 14px 28px rgba(38,24,17,0.10);
  transition: transform 140ms cubic-bezier(.2,0,0,1),
              box-shadow 160ms cubic-bezier(.2,0,0,1),
              border-color 140ms ease;
}
.hubh-agentbtn:hover {
  border-color: var(--fg-light-muted, #A09792);
  transform: translateY(-1px);
}
.hubh-agentbtn:active { transform: translateY(0); }

/* Brand logo (image) */
.hubh-brand { display: block; height: 42px; width: auto; flex: none; }

.hubh__titlewrap { display: flex; flex-direction: column; }
.hubh__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-light-muted, #A09792); margin: 0 0 5px;
}
.hubh__eyebrow svg { width: 15px; height: 15px; flex: 0 0 auto; }
.hubh__title { margin: 0; font: 500 27px/1.18 'Inter'; color: var(--fg-dark); letter-spacing: -0.02em; }
/* ===================== People hub ===================== */
.ppl-sec-label {
  font: 400 11px/1.2 'Inter'; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); margin: 40px 0 16px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.ppl-sec-label .ppl-sec-meta { font: 300 11px/1.2 'Inter'; letter-spacing: 0; text-transform: none; }

/* Roster — horizontal cards */
.ppl-roster { display: flex; flex-direction: column; gap: 12px; }
.ppl-card {
  border: 1px solid var(--border-light); border-radius: 12px;
  padding: 18px 26px; background: var(--bg-white);
  display: grid; grid-template-columns: 2.5fr 1.15fr; gap: 32px;
  cursor: pointer; transition: border-color 120ms ease, background 120ms ease;
  text-align: left; width: 100%; font-family: inherit;
}
.ppl-card:hover { border-color: rgba(38,24,17,0.22); background: #fdfcfa; }
.ppl-card:focus-visible { outline: none; border-color: var(--fg-base); box-shadow: 0 0 0 2px rgba(23,20,18,0.07); }
.ppl-card__main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ppl-avatar {
  width: 52px; height: 52px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  font: 500 17px/1 'Inter'; letter-spacing: 0.01em; color: #fff;
  font-variant: normal;
}
.ppl-avatar--lg { width: 68px; height: 68px; font-size: 22px; }
.ppl-card__id { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ppl-card__name { font: 500 18px/1.2 'Inter'; color: var(--fg-dark); letter-spacing: -0.01em; }
.ppl-card__role { font: 400 13px/1.35 'Inter'; color: var(--fg-base); }
.ppl-card__meta { font: 300 12px/1.2 'Inter'; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ppl-card__meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--fg-light-muted); }
.ppl-card__side {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-left: 1px solid var(--border-light); padding-left: 26px;
}
.ppl-card__stats { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ppl-card__stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
.ppl-card__stat .v { font: 500 15px/1 'Inter'; font-variant-numeric: tabular-nums; color: var(--fg-dark); text-align: right; letter-spacing: -0.01em; white-space: nowrap; }
.ppl-card__stat .v.good { color: #2E6E48; }
.ppl-card__stat .v.warn { color: #8A6A1E; }
.ppl-card__stat .l { font: 300 12px/1.3 'Inter'; color: var(--fg-muted); }
.ppl-card__chev { color: var(--fg-light-muted); flex: none; display: grid; place-items: center; }
.ppl-card__chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ppl-pill {
  font: 500 10px/1 'Inter'; padding: 4px 9px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.ppl-pill.good { background: rgba(82,178,110,0.12); color: #2E6E48; }
.ppl-pill.neutral { background: rgba(38,24,17,0.06); color: var(--fg-base); }
.ppl-pill.amber { background: rgba(214,158,46,0.16); color: #8A6A1E; }
.ppl-pill.exec { background: rgba(58,111,176,0.12); color: #345C8C; }

/* Profile drawer */
.ppl-scrim {
  position: fixed; inset: 0; background: rgba(38,24,17,0.28);
  opacity: 0; pointer-events: none; transition: opacity 0.24s ease; z-index: 90;
}
.ppl-scrim.open { opacity: 1; pointer-events: auto; }
.ppl-drawer {
  position: fixed; top: 0; right: 0; width: min(860px, 94vw); height: 100vh;
  background: var(--bg-white); border-left: 1px solid var(--border-light);
  transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  z-index: 91; display: flex; flex-direction: column;
}
.ppl-drawer.open { transform: translateX(0); }
.ppl-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 26px; border-bottom: 1px solid var(--border-light); flex: none;
}
.ppl-drawer__crumb { font: 400 11px/1.2 'Inter'; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); }
.ppl-drawer__close {
  width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer;
  border-radius: 6px; color: var(--fg-muted); display: grid; place-items: center;
}
.ppl-drawer__close:hover { background: var(--bg-hover); color: var(--fg-dark); }
.ppl-drawer__close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ppl-drawer__body { flex: 1; overflow-y: auto; padding: 28px 34px 64px; }

.ppl-prof-head { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.ppl-prof-head__id { display: flex; flex-direction: column; gap: 5px; }
.ppl-prof-head h1 { margin: 0; font: 500 25px/1.15 'Inter'; color: var(--fg-dark); letter-spacing: -0.02em; }
.ppl-prof-head .role { font: 400 14px/1.3 'Inter'; color: var(--fg-base); }
.ppl-prof-head .meta { font: 300 12.5px/1.3 'Inter'; color: var(--fg-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ppl-prof-head .meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--fg-light-muted); }

.ppl-statrow {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden;
  background: var(--bg-white); margin-bottom: 26px;
}
.ppl-statcell { padding: 15px 18px; border-right: 1px solid var(--border-light); }
.ppl-statcell:last-child { border-right: none; }
.ppl-statcell .l { font: 400 10px/1.2 'Inter'; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin-bottom: 6px; }
.ppl-statcell .v { font: 500 21px/1.1 'Inter'; color: var(--fg-dark); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ppl-statcell .v.good { color: #2E6E48; }
.ppl-statcell .s { font: 300 11px/1.3 'Inter'; color: var(--fg-muted); margin-top: 3px; }

.ppl-prof-label { font: 400 11px/1.2 'Inter'; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin: 28px 0 12px; }
.ppl-prof-p { font: 300 14px/1.65 'Inter'; color: var(--fg-base); margin: 0 0 10px; letter-spacing: -0.005em; text-wrap: pretty; }
.ppl-prof-p:last-child { margin-bottom: 0; }

.ppl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ppl-tag { font: 400 12px/1 'Inter'; padding: 6px 11px; border-radius: 6px; background: rgba(38,24,17,0.05); color: var(--fg-base); }

.ppl-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ppl-deflist { display: flex; flex-direction: column; }
.ppl-deflist .row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.ppl-deflist .row:last-child { border-bottom: none; }
.ppl-deflist .k { font: 300 13px/1.4 'Inter'; color: var(--fg-muted); }
.ppl-deflist .v { font: 400 13px/1.4 'Inter'; color: var(--fg-dark); text-align: right; letter-spacing: -0.01em; }

.ppl-timeline { display: flex; flex-direction: column; }
.ppl-tl-item { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.ppl-tl-item:last-child { border-bottom: none; }
.ppl-tl-when { font: 300 12px/1.5 'Inter'; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.ppl-tl-title { font: 400 13.5px/1.4 'Inter'; color: var(--fg-dark); letter-spacing: -0.01em; }
.ppl-tl-desc { font: 300 12.5px/1.5 'Inter'; color: var(--fg-muted); margin-top: 2px; }

@media (max-width: 900px) {
  .ppl-card { grid-template-columns: 1fr; gap: 18px; }
  .ppl-card__side { border-left: none; border-top: 1px solid var(--border-light); padding-left: 0; padding-top: 16px; }
  .ppl-statrow { grid-template-columns: repeat(2, 1fr); }
  .ppl-statcell:nth-child(2n) { border-right: none; }
  .ppl-statcell:nth-child(-n+2) { border-bottom: 1px solid var(--border-light); }
  .ppl-two-col { grid-template-columns: 1fr; gap: 12px; }
}
/* Construction Project dashboard — inline card+drawer document (scoped under .cx-root) */
.cx-dash-host { width: 100%; }
.cx-dash-host .cx-root { width: 100%; }
.hubh__heading { display: flex; flex-direction: column; gap: 12px; }
.hubh__desc { margin: 0; max-width: 780px; font: 300 15px/1.62 'Inter'; color: var(--fg-base); letter-spacing: -0.01em; text-wrap: pretty; }

/* Tile tabs */
.hubh__panel-eyebrow {
  font: 500 11px/1 'Inter';
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 14px;
}
.hubh__tiles {
  display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-top: 4px;
  padding-bottom: 8px;
}
.hubh-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  flex: 0 0 124px; width: 124px; min-width: 124px;
  padding: 12px 12px 11px;
  border: 1px solid var(--border-light); border-radius: 12px;
  background: var(--bg-app); cursor: pointer; text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
.hubh-tile:hover { background: var(--bg-hover); border-color: var(--border-subtle); }
.hubh-tile.is-active {
  background: rgba(38,24,17,0.07);
  border-color: rgba(38,24,17,0.30);
}
.hubh-tile__ico { display: grid; place-items: center; color: var(--fg-light-muted); margin-bottom: 8px; }
.hubh-tile:hover .hubh-tile__ico { color: var(--fg-muted); }
.hubh-tile.is-active .hubh-tile__ico { color: var(--fg-dark); }
.hubh-tile__label { font: 500 14px/1.2 'Inter'; color: var(--fg-dark); letter-spacing: -0.01em; }

/* Outputs sub-filter pills (Artifacts / Slides) — segmented pill toggle. */
.outputs-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.outputs-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-app);
  color: var(--fg-dark);
  cursor: pointer;
  font: 500 13.5px/1 'Inter'; letter-spacing: -0.01em;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.outputs-pill:hover { background: var(--bg-hover); border-color: var(--border-subtle); }
.outputs-pill__ico { display: grid; place-items: center; color: var(--fg-light-muted); }
.outputs-pill__count {
  font-size: 12.5px; color: var(--fg-muted); margin-left: 2px;
}
.outputs-pill.is-active {
  background: var(--fg-dark);
  border-color: var(--fg-dark);
  color: #fff;
}
.outputs-pill.is-active .outputs-pill__ico { color: #fff; }
.outputs-pill.is-active .outputs-pill__count { color: rgba(255,255,255,0.65); }

/* Tab panel */
.hubh__panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Ported-tab content injected in-flow (Control / Library / Calendar /
   Settings). Source styles are scoped under .hubx (styles/hub_tabs.css);
   the whole page scrolls and the tiles stay fixed in place. */
.hubx { min-width: 0; }
.hubh__kicker { font: 400 11px/1.2 'Inter'; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-muted); }
.hub-dash { display: flex; flex-direction: column; gap: 36px; }

/* Empty tab states */
.hubh-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 11px;
  padding: 66px 24px;
  border: 1px dashed var(--border-light); border-radius: 14px;
  background: var(--bg-panel);
}
.hubh-empty__ico {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 3px;
  background: var(--bg-app); border: 1px solid var(--border-light); color: var(--fg-muted);
}
.hubh-empty__t { font: 500 17px/1.3 'Inter'; color: var(--fg-dark); letter-spacing: -0.01em; }
.hubh-empty__s { font: 300 14px/1.6 'Inter'; color: var(--fg-muted); max-width: 400px; text-wrap: pretty; }

/* ---------- Hub home responsive ---------- */
@media (max-width: 920px) {
  .hubh { padding: 20px 28px 72px; }
}
@media (max-width: 1024px) {
  .hubh { padding: 26px 16px 64px; gap: 24px; }
  .hubh__title { font-size: 22px; }
  .hubh-tile__ico { margin-bottom: 14px; }
  .hubh-empty { padding: 48px 18px; }
}

/* ==========================================================================
   Dashboard — summary headline + analytical (OWID-style) chart cards
   ========================================================================== */

/* Overview summary headline (replaces kicker + lede paragraph) */
.cs__header--summary { gap: 14px; }
.cs__summary {
  margin: 0; max-width: 780px;
  font: 500 20px/1.34 'Inter'; letter-spacing: -0.02em;
  color: var(--fg-dark); text-wrap: balance;
}

/* Analytical chart cards */
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1024px) { .an-grid { grid-template-columns: 1fr; } }
.an-card {
  border: 1px solid var(--border-light); border-radius: 14px;
  background: var(--bg-app); padding: 20px 20px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.an-card__headline {
  font: 500 18px/1.34 'Inter'; letter-spacing: -0.01em;
  color: var(--fg-dark); text-wrap: balance;
}
.an-card__sub { margin-top: -6px; font: 400 13px/1.5 'Inter'; color: var(--fg-muted); }
.an-card__chart { width: 100%; }
.an-card__chart .rtc { display: block; width: 100%; height: auto; }
.an-card__legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  padding-top: 10px; border-top: 1px solid var(--border-light);
}
.an-card__legend-item { display: inline-flex; align-items: center; gap: 7px; font: 400 12px/1.3 'Inter'; color: var(--fg-muted); }
.an-card__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* Rich trend chart internals */
.rtc__grid line { stroke: var(--border-light); stroke-width: 1; }
.rtc__ytick { fill: var(--fg-light-muted); font: 400 12px/1 'Inter'; }
.rtc__xlabels text { fill: var(--fg-muted); font: 400 12px/1 'Inter'; }
.rtc__goal line { stroke: var(--fg-light-muted); }
.rtc__goal-lbl { fill: var(--fg-muted); font: 500 12px/1 'Inter'; }
.rtc__anno-v { font: 600 13.5px/1 'Inter'; }
.rtc__anno-t { font: 400 11.5px/1 'Inter'; fill: var(--fg-muted); }

/* ===================== Diligence hub ===================== */
/* Deal banner */
.dil-banner {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--border-light); border-radius: 12px;
  background: var(--bg-white); padding: 16px 20px; margin-bottom: 4px;
}
.dil-banner__ico {
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #345C8C;
  background: rgba(58,111,176,0.10); border: 1px solid rgba(58,111,176,0.18);
}
.dil-banner__ico svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dil-banner__id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.dil-banner__code { font: 400 10.5px/1 'Inter'; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-muted); }
.dil-banner__name { font: 500 19px/1.2 'Inter'; color: var(--fg-dark); letter-spacing: -0.02em; }
.dil-banner__meta { font: 300 12.5px/1.3 'Inter'; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dil-banner__meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--fg-light-muted); }
.dil-banner__phase { flex: none; text-align: right; }
.dil-banner__phase .v { font: 500 14px/1.2 'Inter'; color: var(--fg-dark); }
.dil-banner__phase .l { font: 300 11px/1.2 'Inter'; color: var(--fg-muted); margin-top: 3px; }

/* Workstream cards reuse ppl-card; icon badge */
.dil-wsbadge {
  width: 46px; height: 46px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
}
.dil-wsbadge svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dil-ws-prog { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.dil-ws-prog__top { display: flex; justify-content: space-between; font: 300 11.5px/1 'Inter'; color: var(--fg-muted); }
.dil-ws-prog__top strong { font-weight: 500; color: var(--fg-dark); font-variant-numeric: tabular-nums; }
.dil-ws-track { height: 5px; border-radius: 999px; background: rgba(38,24,17,0.08); overflow: hidden; }
.dil-ws-fill { height: 100%; border-radius: 999px; background: #3F9A5E; }

/* Contract review table */
.dil-ctable {
  border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; background: var(--bg-white);
}
.dil-crow {
  display: grid; align-items: center;
  grid-template-columns: 2.1fr 1fr 1.4fr 1.15fr 0.75fr 0.9fr 26px;
  gap: 14px; padding: 14px 18px; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--border-light); background: transparent;
  font-family: inherit; cursor: pointer;
}
.dil-crow:last-child { border-bottom: none; }
.dil-crow--head { cursor: default; background: var(--bg-app); }
.dil-crow--head > div { font: 500 10px/1.3 'Inter'; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); }
.dil-crow:not(.dil-crow--head):hover { background: #fdfcfa; }
.dil-crow:not(.dil-crow--head):focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(23,20,18,0.08); }
.dil-cdoc { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dil-cdoc__name { font: 500 13.5px/1.3 'Inter'; color: var(--fg-dark); letter-spacing: -0.01em; }
.dil-cdoc__party { font: 300 12px/1.2 'Inter'; color: var(--fg-muted); }
.dil-ccell { font: 400 12.5px/1.35 'Inter'; color: var(--fg-base); }
.dil-ccell--muted { color: var(--fg-muted); }
.dil-crow .dil-chev { color: var(--fg-light-muted); display: grid; place-items: center; }
.dil-crow .dil-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* extra pill variants */
.ppl-pill.bad { background: rgba(191,74,58,0.13); color: #9A3B32; }

/* Drawer content extras */
.dil-drawer__head-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.dil-prov { display: flex; flex-direction: column; border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; }
.dil-prov__row { display: grid; grid-template-columns: 210px 1fr; gap: 18px; padding: 13px 16px; border-bottom: 1px solid var(--border-light); }
.dil-prov__row:last-child { border-bottom: none; }
.dil-prov__k { font: 400 12px/1.4 'Inter'; color: var(--fg-muted); }
.dil-prov__v { font: 400 13px/1.5 'Inter'; color: var(--fg-dark); letter-spacing: -0.005em; }
.dil-prov__v .tag { font: 500 10px/1 'Inter'; padding: 3px 7px; border-radius: 4px; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.dil-quote {
  border-left: 2px solid rgba(58,111,176,0.4); background: var(--bg-panel);
  padding: 12px 16px; border-radius: 0 8px 8px 0;
  font: 300 13.5px/1.6 'Inter'; color: var(--fg-base); font-style: italic; letter-spacing: -0.005em;
}
.dil-cite {
  display: flex; align-items: center; gap: 8px; margin-top: 9px;
  font: 400 11.5px/1.4 'Inter'; color: var(--fg-muted);
}
.dil-cite svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.dil-cite .file { color: #345C8C; }
.dil-riskbox { border: 1px solid var(--border-light); border-radius: 10px; padding: 15px 17px; background: var(--bg-white); }
.dil-riskbox__top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.dil-riskbox__top .t { font: 500 14px/1.2 'Inter'; color: var(--fg-dark); }
.dil-riskbox p { margin: 0; font: 300 13px/1.6 'Inter'; color: var(--fg-base); letter-spacing: -0.005em; }
.dil-check { display: flex; flex-direction: column; }
.dil-check__item { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--border-light); }
.dil-check__item:last-child { border-bottom: none; }
.dil-check__mark { width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; margin-top: 1px; flex: none; }
.dil-check__mark svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dil-check__mark.done { background: rgba(63,154,94,0.14); color: #2E6E48; }
.dil-check__mark.open { background: rgba(214,158,46,0.16); color: #8A6A1E; }
.dil-check__mark.gap { background: rgba(191,74,58,0.13); color: #9A3B32; }
.dil-check__txt { font: 400 13px/1.45 'Inter'; color: var(--fg-dark); letter-spacing: -0.005em; }
.dil-check__sub { font: 300 12px/1.4 'Inter'; color: var(--fg-muted); margin-top: 2px; }
.dil-srclist { display: flex; flex-direction: column; gap: 8px; }
.dil-srcitem { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid var(--border-light); border-radius: 9px; }
.dil-srcitem__ico { width: 30px; height: 30px; border-radius: 7px; background: var(--bg-panel); display: grid; place-items: center; color: var(--fg-muted); flex: none; }
.dil-srcitem__ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dil-srcitem__id { min-width: 0; flex: 1; }
.dil-srcitem__name { font: 400 13px/1.3 'Inter'; color: var(--fg-dark); }
.dil-srcitem__meta { font: 300 11.5px/1.3 'Inter'; color: var(--fg-muted); margin-top: 1px; }
.dil-srcitem__pages { font: 300 11.5px/1.3 'Inter'; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .dil-crow { grid-template-columns: 1.6fr 0.9fr 0.8fr 26px; }
  .dil-crow > .dil-ccell:nth-child(3), .dil-crow > .dil-ccell:nth-child(4),
  .dil-crow--head > div:nth-child(3), .dil-crow--head > div:nth-child(4) { display: none; }
  .dil-prov__row { grid-template-columns: 1fr; gap: 4px; }
}

/* Outputs List/Card view toggle (right-aligned in the pills row) */
.outputs-viewtoggle { margin-left: auto; display: inline-flex; gap: 2px; border: 1px solid var(--border-light); border-radius: 8px; padding: 2px; background: var(--bg-app); }
.outputs-viewbtn { display: grid; place-items: center; width: 30px; height: 28px; border: none; background: transparent; color: var(--fg-muted); border-radius: 6px; cursor: pointer; }
.outputs-viewbtn:hover { color: var(--fg-dark); }
.outputs-viewbtn.is-active { background: var(--fg-dark); color: #fff; }

/* Outputs card grid (Collections card view; shared card style) */
.out-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.out-card { display: flex; flex-direction: column; text-align: left; cursor: pointer; min-height: 128px;
  border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg-panel); padding: 14px 16px 13px;
  transition: border-color 120ms ease, box-shadow 120ms ease; font-family: inherit; }
.out-card:hover { border-color: rgba(38,24,17,0.24); box-shadow: 0 2px 14px -8px rgba(20,15,12,0.28); }
.out-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.out-card__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(38,24,17,0.05); color: var(--fg-muted); }
.out-card__ico svg { width: 17px; height: 17px; }
.out-card__title { font-size: 14.5px; font-weight: 600; color: var(--fg-dark); letter-spacing: -0.01em; line-height: 1.3; }
.out-card__meta { font-size: 12.5px; color: var(--fg-muted); margin-top: 3px; flex: 1; }
.out-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.out-card__owner { font-size: 11.5px; font-weight: 600; color: var(--fg-muted); background: rgba(38,24,17,0.06); border-radius: 999px; padding: 2px 8px; }
.out-card__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-base); }
.out-card__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-green); }

/* ===== Mobile hub picker (bottom sheet) ===== */
.hub-sheet__scrim {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: calc(58px + env(safe-area-inset-bottom));
  background: rgba(23, 20, 18, 0.32);
  z-index: 40;
  animation: hubSheetScrimIn 160ms ease-out;
}
@keyframes hubSheetScrimIn { from { opacity: 0; } to { opacity: 1; } }

.hub-sheet {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(58px + env(safe-area-inset-bottom));
  z-index: 41;
  max-height: min(72vh, calc(100vh - 58px - env(safe-area-inset-bottom) - 48px));
  display: flex;
  flex-direction: column;
  background: var(--bg-panel, #fff);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -16px 40px -12px rgba(23,20,18,0.22);
  animation: hubSheetUp 240ms cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
}
@keyframes hubSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.hub-sheet__grabber {
  display: flex; justify-content: center;
  padding: 10px 0 6px;
  cursor: grab;
  touch-action: pan-y;
  flex: none;
}
.hub-sheet__grabber span {
  width: 38px; height: 4px;
  border-radius: 999px;
  background: rgba(38,24,17,0.18);
}

.hub-sheet__body {
  padding: 4px 14px calc(14px + env(safe-area-inset-bottom));
  overflow-y: auto;
  min-height: 0;
}

.hub-sheet__orgwrap { position: relative; margin-bottom: 8px; }
.hub-sheet__org {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-panel, #fff);
  cursor: pointer;
  text-align: left;
  font: inherit; color: inherit;
}
.hub-sheet__org:hover { background: var(--bg-hover, rgba(38,24,17,0.03)); }
.hub-sheet__org-mark {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(38,24,17,0.05);
}
.hub-sheet__org-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.hub-sheet__org-eyebrow {
  font: 500 10px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hub-sheet__org-name {
  font: 600 15px/1.25 'Inter', system-ui, sans-serif;
  letter-spacing: -0.015em;
  color: var(--fg-dark);
}
.hub-sheet__org-caret {
  flex: none;
  color: var(--fg-muted);
  display: grid; place-items: center;
}

.hub-sheet__orgmenu {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  z-index: 2;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 8px 28px -10px rgba(23,20,18,0.28);
  padding: 6px;
  animation: hubSheetScrimIn 140ms ease-out;
}
.hub-sheet__orgmenu-head {
  padding: 8px 10px 6px;
  font: 500 10px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hub-sheet__orgmenu-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border: 0; border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit; color: var(--fg-dark);
  text-align: left;
}
.hub-sheet__orgmenu-item:hover { background: var(--bg-hover, rgba(38,24,17,0.04)); }
.hub-sheet__orgmenu-item.is-active { background: rgba(38,24,17,0.05); }
.hub-sheet__orgmenu-logo { width: 22px; height: 22px; flex: none; }
.hub-sheet__orgmenu-label { flex: 1; font: 500 13.5px/1.2 'Inter', system-ui, sans-serif; }
.hub-sheet__orgmenu-item svg { flex: none; color: var(--fg-dark); }

.hub-sheet__list {
  display: flex;
  flex-direction: column;
}
.hub-sheet__group { display: flex; flex-direction: column; }
.hub-sheet__nested { display: flex; flex-direction: column; }

.hub-sheet__row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 48px;
  border-bottom: 1px solid var(--border-light);
}
.hub-sheet__row:last-child { border-bottom: none; }
.hub-sheet__row.is-active .hub-sheet__row-label { font-weight: 600; color: var(--fg-dark); }
.hub-sheet__row.is-active .hub-sheet__row-ico { color: var(--fg-dark); }

.hub-sheet__row-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px 12px 2px;
  border: 0; background: transparent;
  cursor: pointer;
  font: inherit; color: var(--fg-dark);
  text-align: left;
}
.hub-sheet__row-main:hover .hub-sheet__row-label { color: var(--fg-dark); }
.hub-sheet__row-ico {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--fg-light-muted, #A09792);
}
.hub-sheet__row-ico--caret {
  transition: transform 160ms ease;
  color: var(--fg-muted);
}
.hub-sheet__row-ico--caret.is-open { transform: rotate(90deg); }
.hub-sheet__row-label {
  flex: 1; min-width: 0;
  font: 500 14.5px/1.25 'Inter', system-ui, sans-serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-sheet__row--group .hub-sheet__row-label {
  font-weight: 500;
}
.hub-sheet__nested .hub-sheet__row-main { padding-left: 10px; }

.hub-sheet__row-more {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}
.hub-sheet__row-more:hover { background: var(--bg-hover, rgba(38,24,17,0.04)); color: var(--fg-dark); }

.hub-sheet__rule {
  height: 1px;
  margin: 6px 0;
  background: var(--border-light);
  border: 0;
}

/* Context Graph — drill-down affordance + breadcrumb (compound graph) */
.cg-node--drill { cursor: pointer; }
.cg-crumb { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.cg-crumb:hover { color: var(--fg-dark); text-decoration: underline; }
.cg-crumb__sep { opacity: 0.5; }
.cg-link { fill: none; }