/* New Hub workflow — Proxa-branded onboarding surface (see NEW-HUB.md).
   Warm Proxa palette; the template picker echoes the Claude-Design landing. */

.nh-main { overflow-y: auto; }
.nh-wrap { max-width: 920px; margin: 0 auto; padding: 64px 32px 80px; }

.nh-hero { text-align: center; margin-bottom: 40px; }
.nh-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: #615D5A; margin-bottom: 16px;
}
.nh-proxa { width: 16px; height: 16px; display: block; opacity: 0.85; }
.nh-title { font-size: 30px; font-weight: 500; color: #171412; letter-spacing: -0.01em; margin: 0 0 12px; }
.nh-sub { font-size: 14px; font-weight: 300; line-height: 1.6; color: #615D5A; max-width: 560px; margin: 0 auto; }

.nh-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 760px) { .nh-grid { grid-template-columns: repeat(2, 1fr); } }

.nh-card {
  position: relative; text-align: left; display: flex; flex-direction: column;
  gap: 8px; padding: 20px 18px 18px; border: 1px solid #E7E1DF; border-radius: 14px;
  background: #FDFCFA; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.nh-card.is-live:hover { border-color: #1F3B2C; box-shadow: 0 2px 14px -6px rgba(31,59,44,0.30); transform: translateY(-1px); }
.nh-card.is-soon { cursor: default; opacity: 0.6; background: #FAF8F5; }
.nh-card-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 4px;
  background: rgba(31,59,44,0.06); color: #1F3B2C;
}
.nh-card.is-soon .nh-card-ic { background: rgba(38,24,17,0.05); color: #A09792; }
.nh-card-ic svg { width: 20px; height: 20px; }
.nh-card-name { font-size: 15px; font-weight: 500; color: #171412; }
.nh-card-desc { font-size: 12.5px; font-weight: 300; line-height: 1.5; color: #615D5A; }
.nh-card-badge {
  align-self: flex-start; margin-top: 6px; font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; font-weight: 500;
}
.nh-card-badge.live { background: rgba(82,178,110,0.14); color: #3E8E56; }
.nh-card-badge.soon { background: rgba(38,24,17,0.06); color: #A09792; }
.nh-card-badge.planned { background: rgba(226,133,82,0.16); color: #C56A38; }
.nh-card-badge.template { background: rgba(38,24,17,0.06); color: #A09792; }

/* Workspace Hubs — Active / Planned / Templates sections. */
.ws-hubs__bar { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.ws-hubs .ws-hubsec + .ws-hubsec { margin-top: 34px; }

/* Card view: compact square tiles with smaller icons. Scoped to .ws-hubs so the
   New-hub picker (same .nh-card component) keeps its taller layout. */
.ws-hubs .nh-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.ws-hubs .nh-card { aspect-ratio: 1 / 1; padding: 14px; gap: 5px; border-radius: 12px; overflow: hidden; }
.ws-hubs .nh-card-ic { width: 28px; height: 28px; border-radius: 8px; margin-bottom: 2px; }
.ws-hubs .nh-card-ic svg { width: 15px; height: 15px; }
.ws-hubs .nh-card-name { font-size: 13.5px; }
.ws-hubs .nh-card-desc {
  font-size: 12px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ws-hubs .nh-card-badge { margin-top: auto; }

/* List view reuses the shared .lib table (OutputsList); badges render inline. */
.ws-hubs .lib .nh-card-badge { display: inline-block; }

/* Planned/Template cards are shaded but clickable (they ask the assistant to
   build the hub), so give them a pointer and a hover lift. */
.nh-card.is-proposable { cursor: pointer; opacity: 0.72; transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.nh-card.is-proposable:hover { opacity: 1; border-color: #1F3B2C; box-shadow: 0 2px 14px -6px rgba(31,59,44,0.28); }
.ws-hubsec__head {
  display: flex; align-items: baseline; gap: 9px; margin: 0 0 14px;
}
.ws-hubsec__title {
  font-size: 14px; font-weight: 600; color: var(--fg-dark, #171412); letter-spacing: -0.01em;
}
.ws-hubsec__count {
  font-size: 11px; font-weight: 600; color: var(--fg-muted, #615D5A);
  padding: 1px 7px; border-radius: 999px; background: var(--bg-hover, rgba(38,24,17,0.05));
}
.ws-hubsec__sub {
  font-size: 12px; font-weight: 300; color: var(--fg-light-muted, #A09792);
}

/* Rail — create-new button */
.rail__create { color: #615D5A; }
.rail__create:hover { color: #1F3B2C; }
.railx__create {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; margin-top: 4px; border: 1px dashed #D9D2CE; border-radius: 8px;
  background: transparent; color: #615D5A; font-family: inherit; font-size: 13px;
  font-weight: 400; cursor: pointer;
}
.railx__create:hover { border-color: #1F3B2C; color: #1F3B2C; background: rgba(31,59,44,0.03); }
.railx__create-ico { display: inline-flex; }

/* Step 2 — Upload */
.nh-drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 48px 24px; border: 1.5px dashed #D9D2CE; border-radius: 16px;
  background: #FDFCFA; cursor: pointer; text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nh-drop:hover, .nh-drop.over { border-color: #1F3B2C; background: rgba(31,59,44,0.03); }
.nh-drop-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px; background: rgba(31,59,44,0.06); color: #1F3B2C; margin-bottom: 4px; }
.nh-drop-ic svg { width: 26px; height: 26px; }
.nh-drop-title { font-size: 15px; font-weight: 500; color: #171412; }
.nh-drop-hint { font-size: 12.5px; font-weight: 300; color: #A09792; }

.nh-files { display: flex; flex-direction: column; gap: 8px; }
.nh-file {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid #E7E1DF; border-radius: 12px; background: #FDFCFA;
}
.nh-file.loading { opacity: 0.7; }
.nh-file-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; background: rgba(31,59,44,0.06); color: #1F3B2C; flex-shrink: 0; }
.nh-file-ic svg { width: 18px; height: 18px; }
.nh-file-meta { flex: 1; min-width: 0; }
.nh-file-name { font-size: 13px; font-weight: 500; color: #171412; }
.nh-file-sub { font-size: 11.5px; font-weight: 300; color: #615D5A; margin-top: 1px; }
.nh-file-status { flex-shrink: 0; display: inline-flex; }
.nh-file-status svg { width: 20px; height: 20px; }
.nh-file-status.ok { color: #52B26E; }
.nh-file-status.spin { color: #A09792; }
.nh-file-status.spin svg { animation: nh-spin 0.8s linear infinite; }
@keyframes nh-spin { to { transform: rotate(360deg); } }

.nh-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 22px; }
.nh-actions-note { font-size: 12.5px; color: #615D5A; font-weight: 300; }
.nh-btn { font-family: inherit; font-size: 13.5px; font-weight: 500; padding: 9px 20px;
  border-radius: 9px; border: 1px solid transparent; cursor: pointer; }
.nh-btn.primary { background: #1F3B2C; color: #FFFCFA; }
.nh-btn.primary:hover { background: #172e22; }
.nh-btn.primary:disabled { background: #D9D2CE; color: #FAF8F5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .nh-file-status.spin svg { animation: none; } }

/* Onboarding inside the real hub shell (HubHome panel) */
.nh-onboard { max-width: 760px; }
.nh-onboard-lead { margin-bottom: 18px; }
.nh-onboard-h { font-size: 17px; font-weight: 500; color: #171412; margin: 0 0 6px; }
.nh-onboard-p { font-size: 13px; font-weight: 300; line-height: 1.6; color: #615D5A; margin: 0; }
.nh-dp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 22px; }
@media (max-width: 1024px) { .nh-dp-grid { grid-template-columns: 1fr; } }
.nh-dp-ghost { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px;
  border: 1px dashed #E0DAD5; border-radius: 10px; background: rgba(38,24,17,0.015); }
.nh-dp-dot { width: 7px; height: 7px; border-radius: 50%; background: #C9C2BE; margin-top: 5px; flex-shrink: 0; }
.nh-dp-name { font-size: 13px; font-weight: 500; color: #33302E; }
.nh-dp-desc { font-size: 11.5px; font-weight: 300; color: #A09792; margin-top: 1px; }
.nh-upload-block { margin-top: 4px; }

/* Instructional empty state (Control / Library / Calendar tabs, + review/playbook) */
.nh-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 56px 24px; border: 1px dashed #E0DAD5; border-radius: 16px;
  background: repeating-linear-gradient(135deg, #FDFCFA, #FDFCFA 10px, #FAF8F5 10px, #FAF8F5 20px); }
.nh-empty-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 11px; background: rgba(38,24,17,0.05); color: #615D5A; margin-bottom: 4px; }
.nh-empty-ic svg { width: 22px; height: 22px; }
.nh-empty-title { font-size: 16px; font-weight: 500; color: #171412; }
.nh-empty-body { font-size: 12.5px; font-weight: 300; line-height: 1.6; color: #615D5A; max-width: 440px; margin: 0; }

/* Grouped template picker (Org / Project) */
.nh-group { margin-top: 26px; }
.nh-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-muted, #615D5A); margin: 0 2px 10px; }

/* ── "What should we build?" create-from-scratch entry (the + button) ── */
.nhb-main { overflow-y: auto; }
.nhb-wrap { max-width: 1000px; margin: 0 auto; padding: 52px 32px 120px; }
.nhb-title { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: #171412; text-align: center; margin: 0 0 26px; }

.nhb-box { border: 1px solid #E7E1DF; border-radius: 16px; background: #FFFCFA; padding: 16px 16px 12px; box-shadow: 0 2px 16px -10px rgba(23,20,18,0.18); }
.nhb-input { width: 100%; border: none; outline: none; resize: none; background: transparent; font: 400 16px/1.5 'Inter', system-ui, sans-serif; color: #171412; padding: 2px 4px 10px; box-sizing: border-box; }
.nhb-input::placeholder { color: #A09792; }
.nhb-box-row { display: flex; align-items: center; gap: 8px; }
.nhb-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid #E7E1DF; border-radius: 999px; background: #FFFCFA; color: #33302E; font: 500 13px/1 'Inter', system-ui, sans-serif; cursor: pointer; transition: border-color 120ms, background 120ms; }
.nhb-chip:hover { border-color: rgba(38,24,17,0.24); background: #FAF8F5; }
.nhb-chip--icon { padding: 6px; color: #615D5A; }
.nhb-chip-dim { color: #A09792; font-weight: 400; }
.nhb-send { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; border: none; border-radius: 10px; background: #171412; color: #fff; cursor: pointer; transition: opacity 120ms; }
.nhb-send:hover { opacity: 0.86; }

.nhb-tpl-label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #A09792; margin: 34px 2px 2px; }
.nhb-create { align-items: flex-start; border-style: dashed !important; background: #FCFBFA !important; cursor: pointer !important; opacity: 1 !important; }
.nhb-create:hover { border-color: #1F3B2C !important; }
.nhb-hint { text-align: center; font-size: 13px; color: #A09792; margin: 30px 0 0; }
.nhb-hint strong { color: #615D5A; font-weight: 600; }

/* Bottom stepper pill */
.nhb-stepper { position: sticky; bottom: 22px; margin: 34px auto 0; width: max-content; display: flex; align-items: center; gap: 4px; padding: 6px; border: 1px solid #E7E1DF; border-radius: 999px; background: #FFFCFA; box-shadow: 0 6px 20px -10px rgba(23,20,18,0.28); }
.nhb-step { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font: 500 13px/1 'Inter', system-ui, sans-serif; color: #A09792; }
.nhb-step.is-active { background: #171412; color: #fff; }
.nhb-step-n { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: rgba(38,24,17,0.10); color: #615D5A; font-size: 11px; font-weight: 700; }
.nhb-step.is-active .nhb-step-n { background: rgba(255,255,255,0.22); color: #fff; }

/* ═══ Workspace page (org-level landing via CRF2) ═══ */
.ws-page { min-height: 100%; position: relative; display: flex; flex-direction: column; }
.ws-actions {
  position: absolute; top: 26px; right: 26px; z-index: 3;   /* top aligns with the eyebrow */
  display: flex; align-items: flex-start; gap: 8px;
}
.ws-banner {
  background: linear-gradient(180deg, #FAF8F5 0%, #FFFCFA 100%);
}
.ws-banner__inner { margin: 0; padding: 26px 44px 22px; }
.ws-banner__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;
}
.ws-banner__mark { width: 15px; height: 15px; display: block; flex: 0 0 auto; }
.ws-banner__title {
  font-size: 27px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--fg-dark, #171412); margin: 0; line-height: 1.15;
}

/* Workspace switcher — the title is a dropdown to switch or create a workspace. */
.ws-switch { position: relative; display: block; }
.ws-switch__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 2px 6px 2px 0; margin: 0;
  cursor: pointer; font-family: inherit; border-radius: 8px;
}
.ws-switch__btn:hover .ws-switch__caret { color: var(--fg-muted, #615D5A); }
.ws-switch__caret { display: inline-flex; color: var(--fg-light-muted, #A09792); transition: color 120ms ease; }
.ws-switch__scrim { position: fixed; inset: 0; z-index: 40; }
.ws-switch__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 41;
  min-width: 268px; padding: 6px; border-radius: 12px;
  background: var(--bg-white, #FFFCFA); border: 1px solid var(--border-light, #E7E1DF);
  box-shadow: 0 14px 36px -12px rgba(23, 20, 18, 0.28);
}
.ws-switch__head {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--fg-light-muted, #A09792); padding: 6px 10px 8px;
}
.ws-switch__item, .ws-switch__new {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border: 0; background: transparent; border-radius: 8px;
  cursor: pointer; font-family: inherit; font-size: 13.5px; color: var(--fg-dark, #171412);
}
.ws-switch__item:hover, .ws-switch__new:hover { background: var(--bg-hover, rgba(38, 24, 17, 0.05)); }
.ws-switch__item.is-active { font-weight: 500; }
.ws-switch__ico {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 500; color: var(--fg-inverted, #FFFCFA);
  background: var(--accent-green, #52B26E);
}
/* Holding a workspace's own mark, the tile is the mark — drop the green fill. */
.ws-switch__ico:has(.ws-switch__mark) { background: transparent; }
.ws-switch__label { flex: 1 1 auto; min-width: 0; }
.ws-switch__item svg { color: var(--accent-green, #52B26E); flex: 0 0 auto; }
.ws-switch__rule { height: 1px; background: var(--border-light, #E7E1DF); margin: 6px 4px; }
/* Row wrapper so a created workspace can carry a remove ✕ beside its item. */
.ws-switch__row { display: flex; align-items: center; gap: 2px; }
.ws-switch__row .ws-switch__item { flex: 1 1 auto; min-width: 0; }
.ws-switch__del {
  flex: 0 0 auto; display: none; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--fg-light-muted, #A09792); cursor: pointer;
}
.ws-switch__row:hover .ws-switch__del { display: inline-flex; }
.ws-switch__del:hover { background: var(--bg-hover, rgba(38, 24, 17, 0.05)); color: var(--fg-dark, #171412); }
.ws-switch__del svg { color: inherit; }
.ws-switch__new { color: var(--fg-muted, #615D5A); }
.ws-switch__new svg { color: var(--fg-muted, #615D5A); }

/* First-time-user onboarding hero (empty workspace Hubs tab). */
.ws-ftu {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 30px 30px 34px; margin-bottom: 30px;
  border: 1px dashed var(--border, #EDE7E2); border-radius: 16px;
  background: repeating-linear-gradient(135deg, #FDFCFA, #FDFCFA 12px, #FAF8F5 12px, #FAF8F5 24px);
}
.ws-ftu__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(31, 59, 44, 0.06); color: #1F3B2C;
}
.ws-ftu__title { font-size: 19px; font-weight: 600; color: var(--fg-dark, #171412); }
.ws-ftu__sub { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--fg-muted, #615D5A); max-width: 520px; margin: 0; }
.ws-ftu__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 9px 16px; border: 0; border-radius: 9px; cursor: pointer;
  background: #1F3B2C; color: #FFFCFA; font-family: inherit; font-size: 13.5px; font-weight: 500;
}
.ws-ftu__cta:hover { background: #172e22; }
/* Pill tab row — reuses the hub's .outputs-pill; this just sets the row layout. */
.ws-tabs {
  padding: 4px 44px 20px; border-bottom: 1px solid var(--border, #EDE7E2);
}

/* Panel below the pills */
.ws-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ws-panel > .ws-hubs.nh-wrap { flex: 1 1 auto; }
.ws-embed { flex: 1 1 auto; min-height: 0; position: relative; }

/* About-as-Proxa-Doc: fill the panel; the doc body scrolls internally. */
.ws-embed--about { display: flex; min-height: 0; }
.ws-embed--about > .main { flex: 1 1 auto; display: flex; min-height: 0; }
.ws-doc { flex: 1 1 auto; display: flex; min-height: 0; }
.ws-doc .dps { flex: 1 1 auto; min-height: 0; }
/* Shift the whole doc shell right so its left edge — the doc icon, toolbar and
   content — lines up with the tab pills / header (x≈112); the title sits after
   the icon, just like a pill's icon-then-label. */
.ws-doc { padding-left: 46px; }
.ws-doc .dps__body { flex: 1 1 auto; overflow: auto; padding-right: 44px; }
.ws-doc .dps__artifact { padding: 10px 0 44px; }
/* Data face — the Markdown source, editable inline. */
.pdoc-src-wrap { padding: 10px 0 24px; }
.pdoc-src {
  width: 100%; min-height: 440px; resize: vertical;
  border: 1px solid var(--border-light, #E7E1DF); border-radius: 10px;
  background: var(--bg-white, #FFFCFA); color: var(--fg-base, #33302E);
  padding: 16px 18px; white-space: pre-wrap;
  font: 400 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.pdoc-src:focus { outline: none; border-color: var(--accent-blue, #4378E0); }
.ws-embed--graph { height: calc(100vh - 250px); min-height: 440px; overflow: hidden; }
.ws-embed--graph .cg-page { height: 100%; }

/* ── Team tab ── workspace membership table.
   Column track is shared by .ws-team__head and .ws-team__row so they stay aligned. */
.ws-team { padding: 24px 44px 80px; }
.ws-team__bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px;
}
.ws-team__search {
  display: flex; align-items: center; gap: 8px; flex: 0 1 260px;
  padding: 7px 12px; border: 1px solid var(--border-light, #E7E1DF); border-radius: 999px;
  background: var(--bg-white, #FFFCFA); color: var(--fg-light-muted, #A09792);
}
.ws-team__search:focus-within { border-color: var(--fg-light-muted, #A09792); }
.ws-team__search input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 300 13px/1.4 var(--font-sans, 'Inter', system-ui, sans-serif);
  color: var(--fg-dark, #171412);
}
.ws-team__search input::placeholder { color: var(--fg-light-muted, #A09792); }

.ws-team__filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ws-team__filter {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border: 1px solid var(--border-light, #E7E1DF); border-radius: 999px;
  background: transparent; cursor: pointer;
  font: 400 12px/1 var(--font-sans, 'Inter', system-ui, sans-serif);
  color: var(--fg-muted, #615D5A);
}
.ws-team__filter:hover { background: var(--bg-hover, rgba(38, 24, 17, 0.04)); }
.ws-team__filter.is-active {
  background: var(--fg-dark, #171412); border-color: var(--fg-dark, #171412);
  color: var(--fg-inverted, #FFFCFA);
}
.ws-team__filter-n { font-size: 11px; color: var(--fg-light-muted, #A09792); }
.ws-team__filter.is-active .ws-team__filter-n { color: rgba(255, 252, 250, 0.65); }

.ws-team__invite {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border: 1px solid var(--border-light, #E7E1DF); border-radius: 999px;
  background: var(--bg-white, #FFFCFA); cursor: pointer;
  font: 400 13px/1 var(--font-sans, 'Inter', system-ui, sans-serif);
  color: var(--fg-dark, #171412);
}
.ws-team__invite:hover { background: var(--bg-hover, rgba(38, 24, 17, 0.04)); }

.ws-team__table {
  border: 1px solid var(--border-light, #E7E1DF); border-radius: 12px;
  background: var(--bg-white, #FFFCFA); overflow: hidden;
}
.ws-team__head,
.ws-team__row {
  display: grid; align-items: center;
  /* fr shares are tuned so the widest real value in each column fits without
     truncating: "Tenney North Park" + "Company Overview" is the binding case. */
  grid-template-columns: minmax(190px, 1.35fr) minmax(210px, 1.6fr) 100px minmax(230px, 1.45fr) 116px;
  gap: 16px; padding: 0 20px;
}
.ws-team__head {
  height: 38px; background: var(--bg-panel, #FAF8F5);
  border-bottom: 1px solid var(--border-light, #E7E1DF);
  font: 400 11px/1 var(--font-sans, 'Inter', system-ui, sans-serif);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-light-muted, #A09792);
}
.ws-team__row { min-height: 60px; border-top: 1px solid var(--border-light, #E7E1DF); }
.ws-team__row:first-of-type { border-top: 0; }
.ws-team__row:hover { background: var(--bg-hover, rgba(38, 24, 17, 0.04)); }
.ws-team__cell { min-width: 0; }
.ws-team__cell--person { display: flex; align-items: center; gap: 11px; }

.ws-team__av {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(38, 24, 17, 0.06); color: var(--fg-muted, #615D5A);
  font: 500 11px/1 var(--font-sans, 'Inter', system-ui, sans-serif);
}
.ws-team__av img { width: 100%; height: 100%; object-fit: cover; }
.ws-team__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-team__name {
  display: flex; align-items: center; gap: 6px;
  font: 400 13px/1.3 var(--font-sans, 'Inter', system-ui, sans-serif);
  color: var(--fg-dark, #171412);
}
.ws-team__title {
  font: 300 12px/1.3 var(--font-sans, 'Inter', system-ui, sans-serif);
  color: var(--fg-muted, #615D5A);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-team__tag {
  padding: 2px 6px; border-radius: 999px; background: rgba(38, 24, 17, 0.06);
  font: 400 10px/1.4 var(--font-sans, 'Inter', system-ui, sans-serif);
  letter-spacing: 0.03em; color: var(--fg-muted, #615D5A);
}
.ws-team__tag--pending {
  background: rgba(226, 133, 82, 0.13); color: #A9552A;
}
.ws-team__email {
  display: block;
  font: 300 12.5px/1.4 var(--font-sans, 'Inter', system-ui, sans-serif);
  color: var(--fg-muted, #615D5A);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-team__role {
  display: inline-flex; align-items: center; gap: 7px;
  font: 400 12px/1 var(--font-sans, 'Inter', system-ui, sans-serif);
  color: var(--fg-base, #33302E);
}
.ws-team__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ws-team__cell--hubs { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.ws-team__hub {
  padding: 3px 8px; border: 1px solid var(--border-light, #E7E1DF); border-radius: 999px;
  font: 300 11px/1.4 var(--font-sans, 'Inter', system-ui, sans-serif);
  color: var(--fg-muted, #615D5A); white-space: nowrap;
  /* Safety net at unplanned widths: shrink and ellipsize rather than overflow. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.ws-team__hub--more { color: var(--fg-light-muted, #A09792); flex-shrink: 0; }
.ws-team__seen {
  font: 300 12px/1.4 var(--font-sans, 'Inter', system-ui, sans-serif);
  color: var(--fg-muted, #615D5A); white-space: nowrap;
}
.ws-team__seen--muted { color: var(--fg-light-muted, #A09792); }
.ws-team__none {
  padding: 40px 20px; text-align: center;
  font: 300 13px/1.4 var(--font-sans, 'Inter', system-ui, sans-serif);
  color: var(--fg-muted, #615D5A);
}

/* Below the table's natural width the grid stops working; fall back to stacked cards. */
@media (max-width: 1080px) {
  .ws-team__head { display: none; }
  .ws-team__row {
    grid-template-columns: 1fr; gap: 8px; padding: 16px 20px; align-items: flex-start;
  }
  .ws-team__cell--hubs { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .ws-team { padding: 20px 16px 64px; }
  .ws-team__invite { margin-left: 0; }
}

/* Empty-state tabs (Context — content TBD) */
.ws-empty { padding: 60px 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ws-empty__ico {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(38, 24, 17, 0.05); color: var(--fg-muted, #615D5A);
}
.ws-empty__title { font-size: 19px; font-weight: 600; color: var(--fg-dark, #171412); letter-spacing: -0.01em; }
.ws-empty__sub { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--fg-muted, #615D5A); max-width: 460px; }
@media (max-width: 760px) {
  .ws-tabs { padding: 14px 16px 16px; }
  .ws-empty { padding: 40px 16px; }
  .ws-embed--graph { height: calc(100vh - 300px); }
}
.ws-hubs.nh-wrap { max-width: none; margin: 0; padding: 36px 44px 80px; }
@media (max-width: 760px) {
  .ws-actions { top: 14px; right: 16px; }
  .ws-banner__inner { padding: 26px 16px 24px; gap: 14px; }
  .ws-banner__title { font-size: 24px; }
  .ws-hubs.nh-wrap { padding: 28px 16px 64px; }
}

/* ── Workspace · Org (traditional org chart, worksheet-backed DP) ─────────── */
/* The chart lives inside the shared DP shell (dps__artifact). Classic
   nested-<ul> connector technique, restyled with Proxa tokens. */
.ws-org .dps__artifact { padding: 8px 0 4px; }
.orgc {
  overflow-x: auto;
  padding: 32px 32px 28px;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
}
.orgc ul { list-style: none; margin: 0; padding: 0; }
.orgc__root { display: flex; justify-content: center; min-width: max-content; }

/* Each node sits in a column; its children row lines up beneath it.
   The list item itself carries NO horizontal padding — siblings must sit flush
   so the horizontal connector bar stays continuous (spacing lives on the card,
   below). --org-drop is the height of every connector segment. */
.orgc { --org-drop: 36px; }
.orgc__li {
  position: relative;
  padding: var(--org-drop) 0 0;
  text-align: center;
}
.orgc__children { display: flex; justify-content: center; position: relative; }

/* Connector geometry, per level, top to bottom:
     parent card → stem (top half) → horizontal bar (midpoint) → drop (bottom half) → child
   The bar sits at the midpoint so the parent's stem and the children's drops are
   distinct segments, not overlapping. */
.orgc__li::before,
.orgc__li::after {
  content: '';
  position: absolute;
  top: calc(var(--org-drop) / 2);          /* bar + drop occupy the bottom half */
  width: 50%;
  height: calc(var(--org-drop) / 2);
  border-top: 1.5px solid var(--border, #EDE7E2);
}
.orgc__li::before { right: 50%; }
.orgc__li::after  { left: 50%; border-left: 1.5px solid var(--border, #EDE7E2); }
/* Trim the outer halves so the bar spans only between real siblings; round the ends. */
.orgc__li:first-child::before,
.orgc__li:last-child::after { border: 0 none; }
.orgc__li:last-child::before {
  border-right: 1.5px solid var(--border, #EDE7E2);
  border-radius: 0 6px 0 0;
}
.orgc__li:first-child::after { border-radius: 6px 0 0 0; }
/* Only child: no bar, no elbow — one straight vertical line into the child. The
   stem (below) draws the top half; this draws the bottom half, and they meet. */
.orgc__li:only-child::before { display: none; }
.orgc__li:only-child::after {
  left: 50%; right: auto;
  border: 0 none;
  border-left: 1.5px solid var(--border, #EDE7E2);
  border-radius: 0;
}
/* Parent stem: from the parent card down to the bar (top half of the drop). */
.orgc__children::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: calc(var(--org-drop) / 2);
  border-left: 1.5px solid var(--border, #EDE7E2);
}
.orgc__root > .orgc__li { padding-top: 0; }
.orgc__root > .orgc__li::before,
.orgc__root > .orgc__li::after { display: none; }

/* ── Sub-levels: vertical-branched (indented) instead of the horizontal comb ──
   Only nested children (a .orgc__children inside another one — i.e. everything
   below the top Executive Office → departments row) branch this way. A single
   spine drops from just inside the parent card's left edge; each sub-card sits
   on its own row and connects with a short horizontal elbow. The spine stops at
   the last child's elbow (last item swaps its full-height border for a half one). */
.orgc__children .orgc__children {
  display: block;
  position: relative;
  width: max-content;          /* shrink to the stack so margin-auto can center it */
  margin: 0 auto;              /* center the stack under the (centered) parent card */
  text-align: left;
}
.orgc__children .orgc__children::before { display: none; }   /* no comb stem */

.orgc__children .orgc__children > .orgc__li {
  display: flex;
  align-items: center;         /* vertical-center the card so the elbow meets its middle */
  position: relative;
  margin-left: 44px;           /* with padding 24, spine inset = (44-24)/2 = 10px inside the card */
  padding: 7px 0 7px 24px;     /* row spacing + room for the elbow */
  border-left: 1.5px solid var(--border, #EDE7E2);   /* the spine */
  text-align: left;
}
/* Sub-cards drop the horizontal comb margin; spacing comes from the row padding. */
.orgc__children .orgc__children > .orgc__li > .orgc__card { margin: 0; }

/* Elbow: horizontal stub from the spine to the card. */
.orgc__children .orgc__children > .orgc__li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 0;
  border-top: 1.5px solid var(--border, #EDE7E2);
  border-left: 0;
  border-radius: 0;
}
.orgc__children .orgc__children > .orgc__li::after { content: none; }
/* Last child: don't run the spine to the bottom — stop it at the elbow. */
.orgc__children .orgc__children > .orgc__li:last-child { border-left: 0; }
.orgc__children .orgc__children > .orgc__li:last-child::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 50%;
  width: 0;
  border-left: 1.5px solid var(--border, #EDE7E2);
  border-top: 0;
  border-radius: 0;
}

/* The department card. Horizontal margin here (not on the list item) is what
   separates siblings, keeping the connector bar above them continuous. */
.orgc__card {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 14px;
  width: 190px;               /* uniform width for every card in the chart */
  min-width: 190px;
  max-width: 190px;
  padding: 11px 14px;
  text-align: left;
  background: var(--bg-white, #FFFCFA);
  border: 1px solid var(--border-light, #E7E1DF);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(38, 24, 17, 0.04);
}
/* The root (company) node reads as the anchor of the chart. */
.orgc__root > .orgc__li > .orgc__card {
  border-color: var(--accent-purple, #A374DB);
  box-shadow: 0 0 0 1px var(--accent-purple, #A374DB);
}
.orgc__row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.orgc__dept {
  font-size: 13px; font-weight: 600; color: var(--fg-dark, #171412);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Denotes a department that has an associated Proxa hub — a blue pill with the
   hub (cube) glyph, sitting where the headcount number used to be. */
.orgc__hubtag {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-blue, #4378E0);
  padding: 2px 6px; border-radius: 999px;
  background: rgba(67, 120, 224, 0.10);
}
.orgc__hubtag svg { flex: 0 0 auto; display: block; }
/* A hubbed card gets a subtle accent edge so it reads at a glance. */
.orgc__card.has-hub { border-color: rgba(67, 120, 224, 0.45); }
.orgc__hc {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 600; color: var(--fg-muted, #615D5A);
  padding: 1px 7px; border-radius: 999px;
  background: var(--bg-hover, rgba(38, 24, 17, 0.04));
}
.orgc__focus {
  font-size: 11.5px; color: var(--fg-muted, #615D5A);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orgc__head {
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px; padding-top: 6px;
  border-top: 1px solid var(--border-light, #E7E1DF);
  font-size: 11px; color: var(--fg-light-muted, #A09792);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orgc__head svg { flex: 0 0 auto; color: var(--accent-purple, #A374DB); }

/* Org DP should fill the workspace panel, not float at the top with dead space
   below it. Stretch the whole shell chain (panel → DP → body → artifact → chart)
   so the canvas uses the available height like a real document. */
.ws-org { flex: 1 1 auto; display: flex; min-height: 0; }
.ws-org .dps { flex: 1 1 auto; min-height: 0; }
.ws-org .dps__body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ws-org .dps__artifact { flex: 1 1 auto; min-height: 0; }
/* Fill the canvas but keep the tree TOP-aligned (a chart reads top-down);
   center it horizontally. `safe` keeps it scrollable, not clipped, when the
   chart is wider than the canvas. */
.ws-org .orgc {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: safe center;
}

/* ── HLA Typing Lab hub dashboards (src/lab_hub.jsx) ─────────────────────── */
.lab-dash { display: flex; flex-direction: column; gap: 22px; padding-bottom: 40px; }
.lab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lab-stat {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
  background: var(--bg-white); border: 1px solid var(--border-light); border-radius: 12px;
}
.lab-stat__label { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-light-muted); }
.lab-stat__value { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--fg-dark); }
.lab-stat__sub { font-size: 12px; line-height: 1.45; color: var(--fg-muted); }

.lab-panel {
  background: var(--bg-white); border: 1px solid var(--border-light);
  border-radius: 14px; padding: 18px 20px 20px;
}
.lab-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.lab-panel__title { margin: 0; font-size: 15px; font-weight: 500; color: var(--fg-dark); letter-spacing: -0.01em; }
.lab-panel__sub { margin: 4px 0 0; max-width: 760px; font-size: 12.5px; line-height: 1.55; color: var(--fg-muted); }
.lab-btn {
  flex: none; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--fg-inverted);
  background: #1F3B2C; border: none; border-radius: 999px; padding: 7px 15px; cursor: pointer;
}
.lab-btn:disabled { background: var(--bg-panel); color: var(--fg-muted); cursor: default; }

.lab-buckets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lab-bucket {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--border-light); background: var(--bg-panel);
}
.lab-bucket__n { font-size: 20px; font-weight: 500; color: var(--fg-dark); }
.lab-bucket__kind { font-size: 12.5px; font-weight: 500; color: var(--fg-base); }
.lab-bucket__note { font-size: 11.5px; line-height: 1.45; color: var(--fg-muted); }
.lab-bucket.is-good { border-color: rgba(82, 178, 110, 0.45); }
.lab-bucket.is-warn { border-color: rgba(226, 133, 82, 0.45); }
.lab-bucket.is-bad  { border-color: rgba(208, 74, 63, 0.5); background: rgba(208, 74, 63, 0.04); }

.lab-tablewrap { overflow-x: auto; }
.lab-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lab-table th {
  text-align: left; padding: 7px 10px 7px 0; white-space: nowrap;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-light-muted); border-bottom: 1px solid var(--border-light);
}
.lab-table td {
  padding: 9px 10px 9px 0; vertical-align: top; color: var(--fg-base);
  border-bottom: 1px solid var(--border-light);
}
.lab-table tbody tr:last-child td { border-bottom: none; }
.lab-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; white-space: nowrap; }
.lab-dim { color: var(--fg-muted); }
.lab-tag {
  display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 11px;
  background: var(--bg-panel); border: 1px solid var(--border-light); color: var(--fg-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap;
}
.lab-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; white-space: nowrap;
  background: var(--bg-panel); border: 1px solid var(--border-light); color: var(--fg-muted);
}
.lab-pill.is-ok   { color: #2F6B45; border-color: rgba(82, 178, 110, 0.5); background: rgba(82, 178, 110, 0.08); }
.lab-pill.is-warn { color: #8A4A22; border-color: rgba(226, 133, 82, 0.5); background: rgba(226, 133, 82, 0.08); }
.lab-pill.is-bad  { color: #8E2E26; border-color: rgba(208, 74, 63, 0.5); background: rgba(208, 74, 63, 0.07); }
.lab-pill.is-bench      { color: #2B4E8C; border-color: rgba(67, 120, 224, 0.5); background: rgba(67, 120, 224, 0.08); }
.lab-pill.is-convention { color: var(--fg-muted); }
.lab-pill.is-judgment   { color: #5B3A86; border-color: rgba(163, 116, 219, 0.5); background: rgba(163, 116, 219, 0.08); }
.lab-route { display: block; margin-top: 3px; font-size: 11.5px; color: var(--fg-muted); }

.lab-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.lab-query { display: flex; flex-direction: column; gap: 8px; }
.lab-query code {
  display: block; padding: 11px 13px; border-radius: 9px; font-size: 12px;
  background: var(--bg-panel); border: 1px solid var(--border-light); color: var(--fg-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.lab-query__res { font-size: 13px; font-weight: 500; color: var(--fg-dark); }
.lab-query__note { font-size: 12.5px; line-height: 1.55; color: var(--fg-muted); max-width: 640px; }
@media (max-width: 1100px) {
  .lab-stats, .lab-buckets { grid-template-columns: 1fr 1fr; }
  .lab-two { grid-template-columns: 1fr; }
}

/* ── "What are you modelling?" domain choice (src/workspace.jsx) ─────────── */
.ws-dompick { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ws-dom {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 20px 22px; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--bg-white); border: 1px solid var(--border-light);
  border-radius: 14px; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.ws-dom:hover {
  border-color: #1F3B2C;
  box-shadow: 0 2px 14px -6px rgba(31, 59, 44, 0.30); transform: translateY(-1px);
}
.ws-dom__name { font-size: 15px; font-weight: 500; color: var(--fg-dark); letter-spacing: -0.01em; }
.ws-dom__blurb { font-size: 13px; line-height: 1.55; color: var(--fg-muted); }
.ws-dom__eg { font-size: 12.5px; line-height: 1.55; color: var(--fg-light-muted); }
@media (max-width: 760px) { .ws-dompick { grid-template-columns: 1fr; } }

/* ── POC landing page (src/landing.jsx) ──────────────────────────────────── */
.ldg {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-panel); padding: 44px 24px; box-sizing: border-box;
}
.ldg__inner { max-width: 880px; width: 100%; }
.ldg__eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 26px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-light-muted);
}
.ldg__mark { width: 18px; height: 18px; }
.ldg__title {
  margin: 0 0 12px; font-size: 39px; font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.08; color: var(--fg-dark, #171412);
}
.ldg__sub {
  margin: 0 0 18px; max-width: 660px; font-size: 15px; line-height: 1.6;
  color: var(--fg-muted, #615D5A);
}
.ldg__sub em { font-style: normal; font-weight: 500; color: var(--fg-dark, #171412); }
/* Says outright that the built example's domain is incidental. */
.ldg__note {
  margin: 0 0 30px; max-width: 660px; font-size: 13.5px; line-height: 1.6;
  color: var(--fg-light-muted);
}
/* The app's four words, as a glossary footer under the two ways in. */
.ldg__terms {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px;
  padding-top: 22px; border-top: 1px solid var(--border-light);
}
.ldg__term { display: flex; flex-direction: column; gap: 5px; }
.ldg__term-name { font-size: 13px; font-weight: 500; color: var(--fg-dark); }
.ldg__term-def { font-size: 12.5px; line-height: 1.5; color: var(--fg-muted); }
.ldg__choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ldg__choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 20px 22px 18px; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--bg-white, #FFFCFA); border: 1px solid var(--border-light, #E7E1DF);
  border-radius: 14px; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.ldg__choice:hover {
  border-color: #1F3B2C;
  box-shadow: 0 2px 14px -6px rgba(31, 59, 44, 0.30); transform: translateY(-1px);
}
.ldg__choice-logo { width: 34px; height: 34px; margin-bottom: 4px; }
/* Per-workspace identity mark in the switcher rows. */
.ws-switch__mark { width: 26px; height: 26px; border-radius: 7px; display: block; }
.ldg__choice-plus {
  width: 34px; height: 34px; margin-bottom: 4px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 400; color: var(--fg-muted, #615D5A);
  border: 1px dashed var(--fg-light-muted, #A09792); background: transparent;
}
.ldg__choice-title { font-size: 16px; font-weight: 500; color: var(--fg-dark); letter-spacing: -0.01em; }
.ldg__choice-desc { font-size: 13px; line-height: 1.6; color: var(--fg-muted); }
.ldg__choice-cta { margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--fg-dark); }
@media (max-width: 760px) {
  .ldg__title { font-size: 32px; }
  .ldg__terms { grid-template-columns: 1fr 1fr; }
  .ldg__choices { grid-template-columns: 1fr; }
}

/* Rail — shaded "POC" button back to the landing page. */
.rail__poc {
  font-size: 9px; font-weight: 600; letter-spacing: 0.05em;
  background: var(--bg-hover, rgba(38, 24, 17, 0.06));
  border-radius: 8px; color: var(--fg-muted, #615D5A);
}
.rail__poc:hover { color: var(--fg-dark, #171412); background: rgba(38, 24, 17, 0.1); }
.railx__poc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.05em;
  padding: 3px 5px; border-radius: 6px;
  background: var(--bg-hover, rgba(38, 24, 17, 0.06)); color: var(--fg-muted, #615D5A);
}

/* ── POC landing page (src/landing.jsx) — the concept page ("A model for your
   model") recreated in the app's own design language: warm Proxa palette,
   existing type/border vocabulary. Scoped under .ldg2. ─────────────────── */
.ldg2 {
  min-height: 100vh; overflow-y: auto; background: var(--bg-cream, #FAF6F3);
  color: var(--fg-dark, #171412); scroll-behavior: smooth;
}
.ldg2-wrap { width: min(calc(100% - 48px), 1080px); margin: 0 auto; }

.ldg2-nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(20, 17, 15, 0.92); backdrop-filter: blur(12px);
}
.ldg2-nav-inner { height: 68px; display: flex; align-items: center; justify-content: space-between; }
.ldg2-brand { font-weight: 600; letter-spacing: -0.03em; font-size: 20px; color: var(--bg-white, #FFFCFA); margin-bottom: 56px; }
.ldg2-navlinks { display: flex; gap: 24px; align-items: center; font-size: 13.5px; }
.ldg2-navlinks a { color: rgba(255, 252, 250, 0.6); text-decoration: none; }
.ldg2-navlinks a:hover { color: var(--bg-white, #FFFCFA); }
.ldg2-cta {
  font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  border: 1px solid rgba(255, 252, 250, 0.5); border-radius: 999px; padding: 9px 16px;
  background: transparent; color: var(--bg-white, #FFFCFA);
}
.ldg2-cta:hover { border-color: var(--bg-white, #FFFCFA); background: rgba(255, 252, 250, 0.08); }

/* Hero — the proxa.com banner: dark panel, positioning line, Voronoi sphere
   bleeding off the right edge (assets/proxa-sphere.svg, cream strokes). */
.ldg2-hero {
  position: relative; overflow: hidden;
  background: #14110F; padding: 140px 0 150px; border-bottom: 0;
}
.ldg2-hero-inner { position: relative; z-index: 1; }
.ldg2-hero-sphere {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: min(62vw, 820px); right: -14%; top: 50%; transform: translateY(-50%);
  opacity: 0.9;
}
.ldg2 .ldg2-hero h1 { color: var(--bg-white, #FFFCFA); }
.ldg2-eyebrow {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-light-muted, #A09792); font-weight: 600; margin-bottom: 24px;
}
.ldg2 h1 {
  font-size: clamp(46px, 6.5vw, 76px); line-height: 1; letter-spacing: -0.045em;
  font-weight: 500; margin: 0; max-width: 900px; color: var(--fg-dark, #171412);
}
.ldg2-hero p {
  font-size: 19px; line-height: 1.55; color: rgba(255, 252, 250, 0.62);
  max-width: 540px; margin: 30px 0 0;
}
.ldg2-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ldg2-button {
  display: inline-flex; padding: 12px 18px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--fg-dark, #171412); border-radius: 999px; font-size: 14px;
  font-weight: 500; background: transparent; color: var(--fg-dark, #171412);
  transition: background 120ms ease;
}
.ldg2-button:hover { background: var(--bg-hover, rgba(38, 24, 17, 0.05)); }
.ldg2-button.filled { background: var(--fg-dark, #171412); color: var(--bg-white, #FFFCFA); border-color: var(--fg-dark, #171412); }
.ldg2-button.filled:hover { background: #2b2320; }
.ldg2-hero .ldg2-button { border-color: rgba(255, 252, 250, 0.5); color: var(--bg-white, #FFFCFA); }
.ldg2-hero .ldg2-button:hover { border-color: var(--bg-white, #FFFCFA); background: rgba(255, 252, 250, 0.08); }
.ldg2-hero .ldg2-button.filled { background: var(--bg-white, #FFFCFA); color: var(--fg-dark, #171412); border-color: var(--bg-white, #FFFCFA); }
.ldg2-hero .ldg2-button.filled:hover { background: #EFE9E4; }

.ldg2 section { padding: 52px 0; border-bottom: 1px solid var(--border-light, #E7E1DF); }
.ldg2-label {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-light-muted, #A09792); font-weight: 600; margin-bottom: 14px;
}
.ldg2 section .ldg2-eyebrow { margin-bottom: 14px; }
.ldg2 h2 {
  font-size: clamp(23px, 2.4vw, 30px); line-height: 1.18; letter-spacing: -0.025em;
  font-weight: 500; margin: 0 0 18px; max-width: 860px; color: var(--fg-dark, #171412);
}
.ldg2-copy { max-width: 760px; }
.ldg2-copy p { font-size: 16.5px; line-height: 1.6; margin: 0 0 16px; color: var(--fg-dark, #171412); }
.ldg2-copy p:last-child { margin-bottom: 0; }
.ldg2-copy strong { font-weight: 600; color: var(--fg-dark, #171412); }
.ldg2-copy .ldg2-lead { color: var(--fg-dark, #171412); }

.ldg2-architecture { margin-top: 28px; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 48px; align-items: center; }
.ldg2-rings { aspect-ratio: 1 / 1; max-width: 400px; width: 100%; position: relative; margin: auto; }
.ldg2-ring {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  border-radius: 50%; border: 1.4px solid var(--fg-light-muted, #A09792); background: transparent;
}
.ldg2-ring span {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 12.5px; letter-spacing: 0.22em; font-weight: 600; white-space: nowrap;
  background: var(--bg-cream, #FAF6F3); padding: 0 10px; color: var(--fg-dark, #171412);
}
.ldg2-ring.r1 { width: 100%; height: 100%; } .ldg2-ring.r1 span { bottom: 20px; }
.ldg2-ring.r2 { width: 76%; height: 76%; } .ldg2-ring.r2 span { bottom: 18px; }
.ldg2-ring.r3 { width: 52%; height: 52%; } .ldg2-ring.r3 span { bottom: 16px; }
.ldg2-ring.r4 { width: 28%; height: 28%; }
.ldg2-ring.r4 span { top: 50%; transform: translate(-50%, -50%); font-size: 12px; }
.ldg2-arch-copy h3 { font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 14px; font-weight: 500; color: var(--fg-dark, #171412); }
.ldg2-arch-copy p { font-size: 16px; line-height: 1.6; color: var(--fg-dark, #171412); margin: 0; }

/* Harness section — dark panel, same charcoal as the app's dark accents. */
.ldg2-claude { background: var(--fg-dark, #171412); }
.ldg2-claude .ldg2-eyebrow { color: rgba(255, 252, 250, 0.45); }
.ldg2-claude h2 { color: var(--bg-white, #FFFCFA); }
.ldg2-claude .ldg2-copy p { color: rgba(255, 252, 250, 0.66); }

.ldg2-actions {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border-light, #E7E1DF); border: 1px solid var(--border-light, #E7E1DF);
  margin-top: 28px; border-radius: 14px; overflow: hidden;
}
.ldg2-action { background: var(--bg-white, #FFFCFA); padding: 26px; min-height: 150px; }
.ldg2-action b { display: block; font-size: 18px; letter-spacing: -0.015em; margin-bottom: 10px; font-weight: 600; color: var(--fg-dark, #171412); }
.ldg2-action p { font-size: 14.5px; line-height: 1.55; color: var(--fg-dark, #171412); margin: 0; }

.ldg2-examples { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 8px; }
.ldg2-pill {
  border: 1px solid var(--border-light, #E7E1DF); border-radius: 999px;
  padding: 9px 14px; font-size: 13.5px; color: var(--fg-muted, #615D5A);
  background: var(--bg-white, #FFFCFA);
}

.ldg2-faq-list { border-top: 1px solid var(--border-light, #E7E1DF); margin-top: 14px; }
.ldg2-faq-item { border-bottom: 1px solid var(--border-light, #E7E1DF); }
.ldg2-faq-item summary {
  list-style: none; cursor: pointer; font-size: 20px; line-height: 1.3;
  letter-spacing: -0.02em; padding: 24px 44px 24px 0; position: relative;
  color: var(--fg-dark, #171412); font-weight: 500;
}
.ldg2-faq-item summary::-webkit-details-marker { display: none; }
.ldg2-faq-item summary::after {
  content: "+"; position: absolute; right: 0; top: 21px;
  font-size: 26px; font-weight: 300; color: var(--fg-light-muted, #A09792);
}
.ldg2-faq-item[open] summary::after { content: "–"; }
.ldg2-faq-answer { max-width: 760px; padding: 0 0 26px; }
.ldg2-faq-answer p { font-size: 16px; line-height: 1.62; color: var(--fg-dark, #171412); margin: 0 0 12px; }
.ldg2-faq-answer p:last-child { margin-bottom: 0; }

.ldg2-final { padding: 56px 0 48px; border-bottom: 0 !important; }
.ldg2-final-sub { font-size: 16px; line-height: 1.6; color: var(--fg-muted, #615D5A); max-width: 680px; margin: 0 0 8px; }
.ldg2-footer {
  padding: 24px 0 40px; color: var(--fg-light-muted, #A09792); font-size: 12.5px;
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--border-light, #E7E1DF);
}

@media (max-width: 820px) {
  .ldg2-wrap { width: min(calc(100% - 30px), 1080px); }
  .ldg2-navlinks a { display: none; }
  .ldg2-hero { padding: 80px 0 84px; }
  .ldg2-hero-sphere { width: 90vw; right: -40%; opacity: 0.45; }
  .ldg2-hero p { font-size: 17px; }
  .ldg2 section { padding: 40px 0; }
  .ldg2-architecture { grid-template-columns: 1fr; gap: 40px; }
  .ldg2-actions { grid-template-columns: 1fr; }
  .ldg2-footer { flex-direction: column; }
}

/* Semi-bold, underlined capability terms in the thesis copy. */
.ldg2-term {
  font-weight: 500; color: var(--fg-dark, #171412);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: var(--fg-light-muted, #A09792);
}

/* Glossary — linked from the underlined terms in the copy. */
.ldg2-glossary { border-top: 1px solid var(--border-light, #E7E1DF); margin-top: 14px; }
.ldg2-gl-item {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--border-light, #E7E1DF);
  scroll-margin-top: 24px;
}
.ldg2-gl-term { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-dark, #171412); }
.ldg2-gl-def { font-size: 15px; line-height: 1.62; color: var(--fg-dark, #171412); margin: 0; }
.ldg2-gl-item:target .ldg2-gl-term { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--fg-light-muted, #A09792); }
@media (max-width: 820px) { .ldg2-gl-item { grid-template-columns: 1fr; gap: 6px; } }

/* Domain Model definition — the four property bullets under "What is a Domain Model?" */
.ldg2-proplist { margin: 20px 0 44px; padding-left: 22px; max-width: 760px; }
.ldg2-proplist li { font-size: 16.5px; line-height: 1.6; color: var(--fg-dark, #171412); margin-bottom: 12px; }
.ldg2-proplist li::marker { color: var(--fg-light-muted, #A09792); }
.ldg2-proplist strong { font-weight: 600; color: var(--fg-dark, #171412); }

/* Second heading within the neuro-symbolic section. */
.ldg2 h2.ldg2-h2-follow { margin-top: 56px; }

/* Simplified reading flow: no section eyebrows/labels, no divider lines. */
.ldg2 section { border-bottom: 0; padding: 28px 0; }
.ldg2 section:first-of-type { padding-top: 56px; }
.ldg2 section .ldg2-label, .ldg2 section .ldg2-eyebrow { display: none; }
.ldg2-footer { border-top: 0; }

/* Glossary variant of the property bullets. */
.ldg2-proplist--gl { margin: 12px 0 0; }
.ldg2-proplist--gl li { font-size: 15px; margin-bottom: 8px; }