#login-view[hidden], #app-shell[hidden] { display: none !important; }
/* ==========================================================================
   Kuhstom Simulations — design system
   Sibling of the KDG Patient Tracker: same tokens, same shell discipline.
   Fixed sidebar + fixed header; the content pane is the ONLY scroller.
   ========================================================================== */

/* Inter (Addendum v36): the genuine KuhstomDataGPT typeface, bundled
   self-hosted from the official Inter distribution (rsms/inter;
   SIL Open Font License 1.1 — see fonts/Inter-LICENSE.txt). No font
   file is ever fetched from a third party (the v30 posture). */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Addendum v36: THE PALETTE CORRECTION (see UI_CONTRACT.md). The
     genuine KuhstomDataGPT system, frame-read from the live app under
     the owner's attribution gate: primary purple #7860ec, lime #84cc16
     as the only green, Inter throughout, #f9fafb app background, a
     WHITE sidebar with a 1px #e2e8f0 stroke, nav text black at 80%.
     (v34's green came from template frames inside the Figma file and
     was never the product's; v36 supersedes v34's token table.)
     Contrast rule (v34's rule, kept): --accent (#7860ec) is the brand
     colour and drives graphic accents — the wordmark, focus ring
     tint, thinking dots, spinner arc, chart series 1. White text on
     #7860ec measures 4.48:1, a hair under the 4.5:1 line for small
     text, so every FILLED surface that carries white text (primary
     buttons, own-message bubbles, the sidebar active pill) uses
     --brand-primary (#6d4fe0, 5.46:1), deepening to
     --brand-primary-dark (#5b3edb, 6.65:1) on hover/press and for
     links. Lime is a graphic highlight only (chart series 3, the
     published status stripe); it never carries small text. */
  --ink: #111111;
  /* Addendum v47: the brand mark as a CSS image. Decorative tiles that
     draw the mark as a background (empty states, role cards) read this
     variable; core.js applyBranding points it at the resolved chain
     logo, so an uploaded brand wins there too. The default is the
     built-in genuine mark. */
  --brand-mark-img: url("../img/brand-mark.svg");
  --accent: #7860ec;
  --brand-primary: #6d4fe0;
  --brand-primary-dark: #5b3edb;
  --brand-primary-soft: #ede9fd;
  --brand-primary-soft-border: #cfc4f7;
  --brand-primary-soft-hover: #e0d7fc;
  --lime: #84cc16;
  --slate-bg: #f9fafb;
  --slate-line: #e2e8f0;
  --slate-line-soft: #edf1f5;
  --muted: #6b7280;
  --ok: #178a4c;
  --ok-bg: #e4f5ec;
  --warn: #b97d0e;
  --warn-solid: #e9a614;
  --warn-bg: #fdf3e0;
  --bad: #c23333;
  --bad-bg: #fbeaea;
  --info: #2563eb;
  --info-bg: #e8effd;
  --violet: #7c3aed;
  --violet-bg: #f1ebfd;
  /* Suggestion-chip pastels (framework tints): background / text pairs.
     v36 re-tunes the rotation so lavender, the purple family's own
     tint, leads (see .sf-chip-row). */
  --tint-mint-bg: #dcf5e5; --tint-mint-text: #14703c;
  --tint-lavender-bg: #edeaff; --tint-lavender-text: #574b9b;
  --tint-peach-bg: #ffedd8; --tint-peach-text: #9a5410;
  --tint-blue-bg: #e0effe; --tint-blue-text: #175c9e;
  /* Analytics series palette: purple first, violet second, lime third. */
  --chart-1: #7860ec;
  --chart-2: #7c3aed;
  --chart-3: #84cc16;
  --chart-4: #f5b04c;
  --chart-5: #60a5fa;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(24, 20, 43, .04);
  --shadow: 0 1px 2px rgba(24, 20, 43, .03), 0 2px 8px rgba(24, 20, 43, .04);
  --shadow-lg: 0 2px 6px rgba(24, 20, 43, .06), 0 16px 40px rgba(24, 20, 43, .12);
  --ring: 0 0 0 3px rgba(120, 96, 236, .32);
  --sidebar-width: 264px;
  --header-height: 60px;
  /* One typeface (v36): the v34 body/display distinction collapses
     into Inter at different weights. --font-display is retained as an
     alias so the rules that reference it keep working unchanged. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--slate-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; color: var(--ink); }
h1, h2 { font-family: var(--font-display); letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--brand-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
::selection { background: #ddd3fa; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.section-label, .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.text-ok { color: var(--ok); } .text-warn { color: var(--warn); } .text-bad { color: var(--bad); }
.nowrap { white-space: nowrap; }

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

.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-width);
  /* Light sidebar (Addendum v36): the genuine app wears a WHITE
     sidebar with a 1px slate stroke, not the v34 near-black navy. */
  background: #fff;
  border-right: 1px solid var(--slate-line);
  color: rgba(0, 0, 0, .8);
  display: flex; flex-direction: column;
  z-index: 60;
  overflow-y: auto;            /* sidebar scrolls ONLY if it outgrows the screen */
  overscroll-behavior: contain;
}
.sidebar-brand { position: relative; padding: 20px 20px 16px; }
/* The genuine header's purple/violet gradient, carried as the lockup
   band's underline strip (Addendum v36). */
.sidebar-brand::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #7860ec, #a78bfa);
}
/* Addendum v40: the built-in wordmark is one word, "KuhstomSimulations",
   and must hold one line inside the 264px sidebar. At 16px it measures
   clear of the lockup's text box; nowrap plus ellipsis is the graceful
   guard if a longer name is ever set, so the lockup can never push the
   sidebar wider. */
.sidebar-wordmark { font-size: 16px; font-weight: 700; color: var(--accent); letter-spacing: 0; font-family: var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-subline { margin-top: 2px; font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
/* Brand lockup (Addendum v34): the mark + wordmark pair used in the
   sidebar and on the sign-in screens. The image is whatever the branding
   chain resolves to (institution logo, platform logo, or the built-in
   mark); the size caps + contain fit mean an uploaded logo of any shape
   sits in the same box and can never stretch the shell. */
.brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-lockup > div { min-width: 0; }
.brand-mark { width: 34px; height: 34px; max-height: 34px; max-width: 120px; object-fit: contain; flex: 0 0 auto; border-radius: 9px; }
.brand-mark-lg { width: 42px; height: 42px; max-height: 42px; border-radius: 11px; }
.sidebar-nav { padding: 14px 12px 8px; flex: 1 0 auto; }
.sidebar-footer {
  padding: 14px 20px 18px; font-size: 12px; line-height: 1.55; color: var(--muted);
  border-top: 1px solid var(--slate-line-soft);
}

.nav-group { margin-bottom: 10px; }
.nav-group-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; cursor: pointer; padding: 8px 10px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: left;
}
.nav-group-toggle:hover { color: var(--ink); }
.nav-group-chevron { font-size: 10px; transition: transform .16s ease; }
.nav-group.collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-items { display: none; }
.nav-group-items { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: 999px;
  color: rgba(0, 0, 0, .8); font-size: 14px; font-weight: 500; text-decoration: none;
}
.nav-item:hover { background: var(--brand-primary-soft); text-decoration: none; color: var(--ink); }
/* The active item is the genuine product's primary-button character:
   a filled purple pill with white text (the legible step, per the
   token block's contrast rule). */
.nav-item.active { background: var(--brand-primary); color: #fff; font-weight: 700; }
.nav-item.active:hover { background: var(--brand-primary); color: #fff; }
/* Addendum v40: every nav item carries a Bootstrap Icons glyph
   (self-hosted SVG paths in core.js), drawn in currentColor so it
   follows the item's normal, hover and active colours. */
.nav-item .nav-icon { width: 16px; height: 16px; flex: 0 0 auto; display: block; }

.sidebar-scrim {
  position: fixed; inset: 0; background: rgba(24, 20, 43, .45); z-index: 55;
}

.shell-main { flex: 1; min-width: 0; margin-left: var(--sidebar-width); display: flex; flex-direction: column; }

.app-header {
  position: fixed; top: 0; right: 0; left: var(--sidebar-width);
  height: var(--header-height);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  background: #fff; border-bottom: 1px solid var(--slate-line);
  z-index: 50;
}
.header-title-wrap { min-width: 0; flex: 1; }
.view-title { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-subtitle { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.header-menu-btn { display: inline-flex; }

/* Addendum v47: the chip gets a width budget and its text truncates
   with an ellipsis, so a long username can no longer push the header
   actions off the right edge (Hope's 2026-11-03 screenshot). */
.user-chip { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 250px; }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.user-chip-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.user-name { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11.5px; color: var(--muted); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The one and only scrolling region */
.content-pane {
  margin-top: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: 26px 28px 40px;
  outline: none;
}
/* Content containment (Addendum v18): ONE container for every view.
   The router mounts each view into #view-content, which carries
   .view-inner: capped at 1240px and centred, so content never stretches
   end to end on a wide screen. Views may narrow further (.view-inner-
   narrow, .form-card) but never widen past the container. The builder
   wizard and the analytics views register as wide and get the larger
   cap via .view-wide on the container; inside a wide container a view's
   own .view-inner wrapper stands down (max-width: none) so the wide cap
   is the one that applies. */
.view-inner { max-width: 1240px; margin: 0 auto; }
.view-inner-narrow { max-width: 920px; margin: 0 auto; }
.view-inner.view-wide { max-width: 1560px; }
#view-content.view-wide .view-inner { max-width: none; }

/* ------------------------------------------------------------------ login */
.login-view {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--slate-bg);
}
.login-card {
  width: 100%; max-width: 440px;
  background: #fff; border: 1px solid var(--slate-line-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 34px 34px 30px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-wordmark { font-size: 24px; font-weight: 750; color: var(--ink); font-family: var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.login-subline { font-size: 12.5px; color: var(--brand-primary-dark); font-weight: 600; margin-top: 2px; }
.login-intro { color: var(--muted); font-size: 14px; }
.login-heading { font-size: 26px; font-weight: 750; letter-spacing: -0.01em; margin: 0; }

/* Split sign-in (Addendum v47): the KuhstomDataGPT sign-in treatment.
   Artwork panel left (bundled KDG sign-in artwork, a soft purple/lime
   glow, the three investigation steps), form panel right on white.
   The set-password page keeps the plain centred .login-view above;
   only the sign-in section carries .login-view-split. Motion is one
   slow CSS float on the artwork plus a pointer parallax on its wrap
   (core.js, pointer-fine only); both die under reduced motion. */
.login-view-split { padding: 0; background: #fff; }
.login-split { display: flex; width: 100%; min-height: 100vh; }
.login-art-panel {
  position: relative; flex: 1 1 52%; min-width: 0;
  display: flex; flex-direction: column; gap: 18px;
  padding: 34px 42px 30px; overflow: hidden;
  background: linear-gradient(155deg, #f5f2ff 0%, #eef1ff 48%, #f3f8e2 100%);
}
.login-art-wrap {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.login-art-glow {
  position: absolute; width: 72%; max-width: 480px; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(120, 96, 236, .38), rgba(120, 96, 236, 0) 62%),
    radial-gradient(circle at 70% 74%, rgba(132, 204, 22, .32), rgba(132, 204, 22, 0) 62%);
  filter: blur(28px);
}
.login-art-img {
  position: relative; width: min(440px, 82%); height: auto;
  animation: login-art-float 7s ease-in-out infinite;
}
@keyframes login-art-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1.2deg); }
}
.login-steps { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.login-step {
  background: rgba(255, 255, 255, .78); border: 1px solid var(--slate-line);
  color: var(--ink); font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
}
.login-form-panel {
  flex: 1 1 48%; min-width: 0; background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
}
/* The card's own lockup is the narrow-screen one; the panel lockup
   carries wide screens. */
.login-brand-card { display: none; }
@media (max-width: 900px) {
  .login-split { flex-direction: column; }
  .login-art-panel { flex: 0 0 auto; padding: 16px 18px 14px; gap: 8px; }
  .login-panel-lockup { display: none; }
  .login-art-wrap { flex: 0 0 auto; }
  .login-art-img { width: auto; height: 92px; animation: none; }
  .login-art-glow { width: 220px; }
  .login-steps { display: none; }
  .login-form-panel { flex: 1 1 auto; padding: 22px 16px 30px; align-items: flex-start; }
  .login-brand-card { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .login-art-img { animation: none; }
  .login-art-wrap { transform: none !important; }
}

/* Print brand header (Addendum v47): print views (completion record,
   presentation outline) carry the shared lockup on paper even though
   the app shell is print-hidden. On screen it never shows. */
.print-brand { display: none; }
@media print {
  .print-brand { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; }
  .print-brand .print-wordmark { font-size: 18px; font-weight: 750; color: #111111; white-space: nowrap; }
  .print-brand .print-subline { font-size: 11.5px; color: #5b3edb; font-weight: 600; margin-top: 1px; }
}

/* ------------------------------------------------------------------ cards */
.card {
  background: #fff; border: 1px solid var(--slate-line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px; margin-bottom: 18px;
}
.card-flush { padding: 0; overflow: hidden; }
.card-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  margin-bottom: 12px;
}
.card-title { font-size: 16px; overflow-wrap: anywhere; }
.card-subtitle { color: var(--muted); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.card-actions { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.page-header h2 { font-size: 24px; font-weight: 750; }
.page-header .page-lede { color: var(--muted); margin-top: 3px; max-width: 720px; }
.page-actions, .toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar { margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.empty-state, .placeholder-card {
  text-align: center; padding: 38px 26px; color: var(--muted);
}
/* Framework empty states (Addendum v34; mark corrected in v36): a
   soft-lavender icon tile carrying the genuine KuhstomDataGPT brand
   mark (the built-in statics file, the branding chain's fallback)
   above the heading, the framework's card treatment. */
.empty-state::before, .placeholder-card::before {
  content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 16px; background-color: var(--brand-primary-soft);
  background-image: var(--brand-mark-img);
  background-repeat: no-repeat; background-position: center; background-size: 30px 30px;
}
.empty-state h3, .placeholder-card h3 { color: var(--ink); font-size: 16px; margin-bottom: 6px; }
.empty-state .btn, .placeholder-card .btn { margin-top: 14px; }

.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 4px; border-bottom: 1px solid var(--slate-line-soft);
}
.list-item:last-child { border-bottom: 0; }
.list-item-main { flex: 1; min-width: 0; }
.list-item-title { font-weight: 600; }
.list-item-meta { font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 16px; min-height: 36px;
  border-radius: 999px; border: 1px solid transparent;
  background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .13s ease, border-color .13s ease, box-shadow .13s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
/* Primary buttons take the genuine product's character (Addendum
   v36): purple fill, a 16px radius (badges, pills, chips and nav items
   stay full-pill), and the genuine soft shadow. */
.btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.btn-primary:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--slate-line); color: var(--ink); }
.btn-ghost:hover { background: var(--slate-bg); border-color: var(--slate-line); }
.btn-soft { background: var(--brand-primary-soft); color: var(--brand-primary-dark); }
.btn-soft:hover { background: var(--brand-primary-soft-hover); }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover { background: #a82a2a; border-color: #a82a2a; color: #fff; }
.btn-danger-ghost { background: transparent; border-color: #efc5c5; color: var(--bad); }
.btn-danger-ghost:hover { background: var(--bad-bg); }
.btn-sm { padding: 5px 11px; min-height: 30px; font-size: 13px; }
.btn-lg { padding: 11px 20px; min-height: 44px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { padding: 6px 9px; min-height: 34px; line-height: 1; }

/* ------------------------------------------------------------------ forms */
.form-card { max-width: 920px; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-full, .span-2 { grid-column: 1 / -1; }
.field label {
  font-size: 12.5px; font-weight: 650; color: var(--ink); letter-spacing: .01em;
}
.field .hint { font-size: 12px; color: var(--muted); font-weight: 400; }
.field .error-text { font-size: 12.5px; color: var(--bad); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="url"],
select, textarea {
  width: 100%;
  padding: 8px 11px; min-height: 38px;
  border: 1px solid var(--slate-line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font: inherit; font-size: 14px;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--slate-bg); color: var(--muted); }
/* Content-sized date/select controls inside the two-column grid */
.field-narrow { max-width: 240px; }
.field-narrow select, .field-narrow input { width: auto; min-width: 170px; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--brand-primary); }
.checkbox-field { flex-direction: row; align-items: center; gap: 9px; padding-top: 24px; }
.checkbox-field label { font-size: 14px; font-weight: 500; }

.form-section { margin-top: 22px; }
.form-section:first-child { margin-top: 0; }
.form-section-heading {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--slate-line-soft);
}
.form-section-heading h3 { font-size: 14.5px; }
.form-section-heading .section-label { margin-left: auto; }

/* Sticky action bar, pinned to the bottom of the content pane */
.action-bar {
  position: sticky; bottom: -40px; /* meets the pane's bottom padding edge */
  margin: 22px -22px -20px; padding: 13px 22px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(4px);
  border-top: 1px solid var(--slate-line);
  display: flex; justify-content: flex-end; gap: 10px; z-index: 5;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Section jump strip for long forms */
.jump-strip {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 9px 12px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--slate-line-soft); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.jump-strip .section-label { margin-right: 4px; }
.jump-link {
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--slate-bg); color: var(--ink); border: 1px solid var(--slate-line-soft);
}
.jump-link:hover { background: var(--brand-primary-soft); color: var(--brand-primary-dark); text-decoration: none; }

/* ----------------------------------------------------------------- tables */
table, .data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, table th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  padding: 10px 12px; border-bottom: 1px solid var(--slate-line); background: var(--slate-bg);
  /* NOTE: no sticky header — nothing may scroll or pin inside the pane */
}
.data-table td, table td { padding: 11px 12px; border-bottom: 1px solid var(--slate-line-soft); vertical-align: top; }
.data-table tbody tr:hover, table tbody tr:hover { background: #fafafc; }
.data-table tbody tr:last-child td, table tbody tr:last-child td { border-bottom: 0; }
.table-actions { display: flex; gap: 6px; justify-content: flex-end; }
/* Horizontal-scroll guard for wide tables: the wrapper scrolls sideways
   inside itself so a wide table can never push the pane (or a card) wider
   than the viewport. This is the one sanctioned inner scroller. */
.table-wrap { overflow-x: auto; }
/* Locked Accounts table (Addendum v38): a 61-character unbroken
   username and a 59-character source string used to lay this one
   table out ~1500px wide inside its wrapper, so the Unlock action
   sat off the first screen at every viewport width. Scoped to this
   section's table only: the long-value cells break anywhere, the
   lock times may wrap, and the cell padding is a touch tighter, so
   the table fits its card and the action column stays in view. At
   phone widths the automatic layout still would not compress far
   enough (the Failed attempts header and the Unlock button set a
   floor), so below 700px this table alone switches to a fixed
   layout with set column shares and a smaller action button. */
.table-locked td, .table-locked th { padding-left: 8px; padding-right: 8px; }
.table-locked .locked-user, .table-locked .locked-user strong,
.table-locked .locked-src, .table-locked .locked-when { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .table-locked { table-layout: fixed; }
  .table-locked th:nth-child(1) { width: 18%; }
  .table-locked th:nth-child(2) { width: 14%; }
  .table-locked th:nth-child(3) { width: 14%; }
  .table-locked th:nth-child(4) { width: 12%; }
  .table-locked th:nth-child(5) { width: 18%; }
  .table-locked th:nth-child(6) { width: 24%; }
  .table-locked th { overflow-wrap: anywhere; }
  .table-locked td, .table-locked th { padding-left: 6px; padding-right: 6px; }
  .table-locked .btn { padding: 4px 9px; font-size: 12px; }
}

/* ------------------------------------------------------- badges and pills */
.badge, .pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2.5px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .02em; line-height: 1.45;
  background: var(--slate-bg); color: var(--muted); border: 1px solid var(--slate-line-soft);
  white-space: nowrap;
}
.badge-ok, .pill-ok { background: var(--ok-bg); color: var(--ok); border-color: #cdeeda; }
.badge-warn, .pill-warn { background: var(--warn-bg); color: var(--warn); border-color: #f2dfae; }
.badge-bad, .pill-bad { background: var(--bad-bg); color: var(--bad); border-color: #f3c8c8; }
.badge-info, .pill-info { background: var(--info-bg); color: var(--info); border-color: #cfdefb; }
.badge-brand, .pill-brand { background: var(--brand-primary-soft); color: var(--brand-primary-dark); border-color: var(--brand-primary-soft-border); }
.badge-neutral, .pill-neutral { background: var(--slate-bg); color: var(--muted); }
/* Inline meta chip (question topics/types, coach focus areas, outline
   evidence tags): a quieter sibling of .pill for use inside running text. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.45;
  background: var(--slate-bg); color: var(--ink); border: 1px solid var(--slate-line-soft);
}
/* Grounding outcomes */
.badge-grounded { background: var(--ok-bg); color: var(--ok); border-color: #cdeeda; }
.badge-limitation, .badge-qualified { background: var(--warn-bg); color: var(--warn); border-color: #f2dfae; }
.badge-refused, .badge-blocked { background: var(--bad-bg); color: var(--bad); border-color: #f3c8c8; }
/* Checkpoint + discovery states */
.badge-pending { background: var(--warn-bg); color: var(--warn); border-color: #f2dfae; }
.badge-passed, .badge-completed, .badge-discovered { background: var(--ok-bg); color: var(--ok); border-color: #cdeeda; }
.badge-failed { background: var(--bad-bg); color: var(--bad); border-color: #f3c8c8; }
.badge-hidden, .badge-locked { background: #eef1ee; color: var(--muted); border-color: var(--slate-line); }

/* ----------------------------------------------------------------- alerts */
.alert { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 14px; border: 1px solid; }
.alert-bad { background: var(--bad-bg); color: var(--bad); border-color: #f3c8c8; }
.alert-warn { background: var(--warn-bg); color: var(--warn); border-color: #f2dfae; }
.alert-ok { background: var(--ok-bg); color: var(--ok); border-color: #cdeeda; }
.alert-info { background: var(--info-bg); color: var(--info); border-color: #cfdefb; }

/* ------------------------------------------------------------------- chat */
.chat-thread { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 8px; }
.message-row { display: flex; gap: 11px; align-items: flex-start; }
.message-row.from-student { flex-direction: row-reverse; }
.persona-avatar, .chat-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.message-row.from-student .persona-avatar,
.message-row.from-student .chat-avatar { background: var(--brand-primary); }
.message-body { max-width: 76%; min-width: 0; }
.message-meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.message-row.from-student .message-meta { justify-content: flex-end; }
.message-bubble {
  background: #fff; border: 1px solid var(--slate-line-soft); border-radius: var(--radius);
  border-top-left-radius: 4px; padding: 11px 14px; box-shadow: var(--shadow);
  white-space: pre-wrap; word-break: break-word;
}
.message-row.from-student .message-bubble {
  background: var(--brand-primary); border-color: var(--brand-primary-dark); color: #fff;
  border-top-left-radius: var(--radius);
  border-top-right-radius: 4px;
}
.message-row.from-student .message-bubble a { color: #fff; text-decoration: underline; }
.citation-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.citation-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2.5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: #fff; border: 1px solid var(--slate-line); color: var(--brand-primary-dark);
  cursor: pointer;
}
.citation-chip:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.chat-composer {
  display: flex; gap: 10px; align-items: flex-end;
  background: #fff; border: 1px solid var(--slate-line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px; margin-top: 16px;
}
.chat-composer textarea { flex: 1; min-height: 44px; max-height: 130px; }

/* ------------------------------------------------------------ progress/KPI */
.progress { height: 8px; border-radius: 999px; background: var(--slate-line-soft); overflow: hidden; }
.progress-bar { height: 100%; background: var(--chart-1); border-radius: 999px; transition: width .3s ease; }
.progress-bar.ok { background: var(--ok); } .progress-bar.warn { background: var(--warn); } .progress-bar.bad { background: var(--bad); }
.progress-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-card, .kpi-card {
  background: #fff; border: 1px solid var(--slate-line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 17px 19px;
}
.stat-value, .kpi-value { font-size: 27px; font-weight: 750; line-height: 1.15; color: var(--ink); font-family: var(--font-display); }
.stat-label, .kpi-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.stat-delta, .kpi-delta { font-size: 12.5px; margin-top: 5px; color: var(--muted); }

/* -------------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--slate-line); margin-bottom: 18px; flex-wrap: wrap; }
.tab {
  padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--muted);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand-primary-dark); border-bottom-color: var(--brand-primary); }

/* ------------------------------------------------------------------ toasts */
.toast-container {
  position: fixed; top: 16px; right: 16px; z-index: 200;
  display: flex; flex-direction: column; gap: 9px; max-width: min(380px, calc(100vw - 32px));
}
.toast {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff; border: 1px solid var(--slate-line); border-left: 4px solid var(--brand-primary);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 12px 14px; font-size: 13.5px;
  animation: toast-in .18s ease;
}
.toast-success, .toast-ok { border-left-color: var(--ok); }
.toast-error, .toast-bad { border-left-color: var(--bad); }
.toast-warn { border-left-color: var(--warn); }
.toast-body { flex: 1; min-width: 0; }
.toast-close { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.toast.leaving { opacity: 0; transition: opacity .2s ease; }

/* ------------------------------------------------------------------- misc */
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--slate-line); border-top-color: var(--accent);
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-state { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 22px 4px; }

/* ------------------------------------------- in-flight indicators (v26)
   One shared component for every AI-backed send: an assistant-side
   "thinking" bubble (animated dots + a plain label, announced politely
   to assistive technology) and a pending state for submit buttons
   (small spinner + label). Defined once in core.js as Sim.thinkingHtml /
   Sim.pendingBtnHtml / Sim.setBtnPending; styled here so every surface
   (interview, coaches, testing console, Messages, AI draft) matches. */
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.thinking { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); }
.thinking-dots { display: inline-flex; align-items: center; gap: 4px; }
.thinking-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  opacity: .3; animation: thinking-pulse 1.15s ease-in-out infinite;
}
.thinking-dots i:nth-child(2) { animation-delay: .16s; }
.thinking-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes thinking-pulse {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
.thinking-label { font-size: 14px; }
.btn .spinner-sm, .stu-btn .spinner-sm, .fb-btn .spinner-sm, .sf-chat-form .spinner-sm {
  vertical-align: -2px; margin-right: 7px;
}
button.is-pending { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .thinking-dots i { animation: none; opacity: .55; transform: none; }
  .spinner { animation: none; }
}

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(24, 20, 43, .45); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; padding: 24px; max-height: calc(100vh - 60px);
  display: flex; flex-direction: column; gap: 12px;
}
.divider { border: 0; border-top: 1px solid var(--slate-line-soft); margin: 16px 0; }
.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .role-cards { grid-template-columns: 1fr; } }
.role-card { cursor: pointer; transition: box-shadow .13s ease, border-color .13s ease; }
/* Framework card pattern (Addendum v34; mark corrected in v36): a
   small soft-lavender icon tile carrying the genuine brand mark above
   the card heading. */
.role-card::before {
  content: ""; display: block; width: 42px; height: 42px; margin-bottom: 13px;
  border-radius: 13px; background-color: var(--brand-primary-soft);
  background-image: var(--brand-mark-img);
  background-repeat: no-repeat; background-position: center; background-size: 25px 25px;
}
.role-card:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-lg); }

/* -------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  body.sidebar-open .sidebar { transform: none; }
  .shell-main { margin-left: 0; }
  .app-header { left: 0; padding: 0 16px; }
  .header-menu-btn { display: inline-flex; }
  .content-pane { padding: 20px 16px 32px; }
  .user-chip-text { display: none; }
  .message-body { max-width: 88%; }
}

/* Wide screens: the menu button collapses the sidebar away entirely.
   Same mechanism as the fixed layout itself: the sidebar slides off,
   the content's left margin and the header's left offset go to zero. */
@media (min-width: 901px) {
  .sidebar { transition: transform .2s ease; }
  body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  .shell-main { transition: margin-left .2s ease; }
  body.sidebar-collapsed .shell-main { margin-left: 0; }
  .app-header { transition: left .2s ease; }
  body.sidebar-collapsed .app-header { left: 0; }
}

/* --- Orchestrator integration aliases (student_finish conventions) --- */
.sticky-bar { position: sticky; bottom: -40px; /* meets the pane's bottom padding edge, same as .action-bar */
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; background: #fff; border: 1px solid var(--slate-line); border-radius: var(--radius);
  padding: 12px 16px; margin-top: 16px; box-shadow: var(--shadow-sm); z-index: 5; }
.sf-chat-log { display: flex; flex-direction: column; gap: 10px; }
.sf-msg { max-width: 85%; padding: 10px 14px; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--slate-line); white-space: pre-wrap; word-break: break-word; }
.sf-msg-student { align-self: flex-end; background: var(--brand-primary); border-color: var(--brand-primary-dark); color: #fff; }
.sf-msg-student .sf-msg-who { color: rgba(255,255,255,.78); }
.sf-msg-student a { color: #fff; text-decoration: underline; }
.sf-msg-coach { align-self: flex-start; }
.sf-msg-who { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.sf-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
/* Suggestion chips take the framework's pastel tints: a steady
   four-colour rotation. Addendum v36 re-tunes the order so lavender,
   the purple family's own tint, leads. */
.sf-chip-row .chip:nth-child(4n+1) { background: var(--tint-lavender-bg); color: var(--tint-lavender-text); border-color: transparent; }
.sf-chip-row .chip:nth-child(4n+2) { background: var(--tint-blue-bg); color: var(--tint-blue-text); border-color: transparent; }
.sf-chip-row .chip:nth-child(4n+3) { background: var(--tint-peach-bg); color: var(--tint-peach-text); border-color: transparent; }
.sf-chip-row .chip:nth-child(4n+4) { background: var(--tint-mint-bg); color: var(--tint-mint-text); border-color: transparent; }
.sf-coach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
/* Coach picker cards: one uniform structure for every coach — a header
   row (name + type pill), the style/level meta as its own muted line,
   then the description as its own block. Flex column + a growing
   description keeps every card in the row the same height. */
.sf-coach-picker-card { display: flex; flex-direction: column; width: 100%;
  margin-bottom: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.sf-coach-picker-card:hover { border-color: var(--brand-primary); }
.sf-coach-picker-card.is-selected { border-color: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-primary), var(--shadow); }
.sf-coach-picker-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-coach-name { font-size: 15px; color: var(--ink); }
.sf-coach-meta { display: block; margin-top: 6px; font-size: 13px; }
.sf-coach-meta:empty { display: none; }
.sf-coach-desc { display: block; flex: 1 1 auto; margin-top: 8px;
  font-size: 14px; line-height: 1.5; color: var(--ink); }
.sf-coach-picker-card .sf-chip-row { margin-top: 10px; }
.sf-question { border: 1px solid var(--slate-line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; background: #fff; }
.sf-question-meta { display: flex; gap: 6px; margin-bottom: 6px; }
.sf-question-text { font-weight: 600; margin-bottom: 8px; }
.sf-answer-box textarea { width: 100%; }
.sf-feedback, .sf-feedback-card { background: var(--warn-bg); border: 1px solid #f2dfae;
  border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px; }
.sf-evidence-list { display: flex; flex-direction: column; gap: 8px; }
.sf-arrow { color: var(--brand-primary); font-weight: 700; padding: 0 4px; }
.sf-bar-btns { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.sf-result { text-align: left; }
.sf-chat-form { display: flex; gap: 8px; margin-top: 12px; }
.sf-chat-form textarea { flex: 1; }
/* Inset panel inside a card (recommendation roadmap / actions / evidence):
   white surface, hairline border, set off from the card body by spacing. */
.sf-subpanel { background: #fff; border: 1px solid var(--slate-line);
  border-radius: var(--radius); padding: 14px 16px; margin-top: 16px; }
.sf-subpanel > .card-title { margin-bottom: 8px; }

/* ==========================================================================
   ROUND 2 — Simulation OS components (wizard, org chart, relationships,
   grounding health, knowledge matrix, locker, studio cards, journey,
   presentation outline, discovery banner). Single-scroll rule preserved:
   nothing below creates a new scrolling container.

   LEGACY / UNUSED (audited 2026-10-25): the component block below this
   banner (.wizard-shell, .org-tree, .matrix, .health-*, .modal-* and
   friends) matches NO live markup — the views that once used these class
   names now render with inline styles or other classes. Kept in place for
   this round only; do not build on these rules, and do not read them as
   the current design. Safe to delete in a dedicated cleanup round.
   ========================================================================== */
.action-bar .spacer { flex: 1; }

/* ------------------------------------------------------------------ wizard */
.wizard-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.wizard-rail {
  background: #fff; border: 1px solid var(--slate-line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 10px; position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.wizard-rail-label {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding: 6px 10px 8px;
}
.step-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: none;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.step-item:hover { background: var(--slate-bg); color: var(--ink); }
.step-badge {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--slate-bg);
  border: 1px solid var(--slate-line); color: var(--muted);
}
.step-item.current { background: var(--brand-primary-soft); color: var(--brand-primary-dark); }
.step-item.current .step-badge { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.step-item.done { color: var(--ink); }
.step-item.done .step-badge { background: var(--ok-bg); border-color: #cdeeda; color: var(--ok); }
.step-item.todo { color: var(--muted); }
.step-item:disabled { cursor: default; opacity: .75; }
.wizard-body { min-width: 0; }
.wizard-footer {
  position: sticky; bottom: 0; margin-top: 20px; padding: 13px 18px;
  background: rgba(255,255,255,.97); border: 1px solid var(--slate-line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 10px; z-index: 5;
}
.wizard-footer .spacer { flex: 1; }
.wizard-step-note { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .wizard-shell { grid-template-columns: 1fr; }
  .wizard-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .wizard-rail-label { width: 100%; }
  .step-item { width: auto; }
}

/* --------------------------------------------------------------- org chart */
.org-tree, .org-tree ul { list-style: none; margin: 0; padding: 0; }
.org-tree ul { padding-left: 26px; position: relative; }
.org-tree ul::before {
  content: ""; position: absolute; left: 10px; top: 0; bottom: 12px;
  border-left: 2px solid var(--slate-line);
}
.org-tree li { position: relative; padding: 5px 0; }
.org-tree ul li::before {
  content: ""; position: absolute; left: -16px; top: 22px; width: 16px;
  border-top: 2px solid var(--slate-line);
}
.org-node {
  display: inline-flex; align-items: center; gap: 10px; min-width: 210px;
  background: #fff; border: 1px solid var(--slate-line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 10px 14px;
}
.org-node.root { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.org-node .org-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand-primary); color: #fff; font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.org-node-name { font-weight: 650; font-size: 14px; line-height: 1.25; }
.org-node-meta { font-size: 12px; color: var(--muted); line-height: 1.3; }
.org-node .badge { margin-left: auto; }

/* --------------------------------------------------------- relationship map */
.rel-map { display: flex; flex-direction: column; gap: 8px; }
.rel-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--slate-line); border-radius: var(--radius);
  padding: 10px 14px; box-shadow: var(--shadow-sm); font-size: 13.5px;
}
.rel-who { font-weight: 650; }
.rel-arrow { color: var(--muted); font-weight: 700; }
.rel-note { color: var(--muted); font-size: 12.5px; flex: 1 1 220px; }
.rel-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650;
  padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--slate-line);
  background: var(--slate-bg); color: var(--muted); white-space: nowrap;
}
.rel-chip.rel-reports { border-style: solid; border-color: var(--slate-line); background: #fff; color: var(--ink); }
.rel-chip.rel-trust { border-style: solid; border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary-dark); }
.rel-chip.rel-conflict { border-style: dashed; border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.rel-chip.rel-mentors { border-style: solid; border-color: #d9cdf8; background: var(--violet-bg); color: var(--tint-lavender-text); }
.rel-chip.rel-competes { border-style: dashed; border-color: var(--warn-solid, #e9a614); background: var(--warn-bg); color: var(--warn); }
.rel-chip.rel-protects { border-style: solid; border-color: #a9dcc0; background: var(--ok-bg); color: var(--ok); }
.rel-chip.rel-influences { border-style: dotted; border-color: var(--info); background: var(--info-bg); color: var(--info); }
.rel-chip.rel-avoids { border-style: dotted; border-color: var(--muted); background: #fff; color: var(--muted); }

/* ---------------------------------------------------------- grounding health */
.health-summary { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.health-score { font-size: 52px; font-weight: 800; line-height: 1; color: var(--brand-primary-dark); }
.health-score small { font-size: 22px; font-weight: 700; color: var(--muted); }
.health-score.good { color: var(--ok); }
.health-score.mid { color: var(--warn); }
.health-score.low { color: var(--bad); }
.health-bar { height: 8px; border-radius: 999px; background: var(--slate-line-soft); flex: 1 1 180px; min-width: 140px; }
.health-bar-fill { height: 100%; border-radius: 999px; background: var(--chart-1); }
.health-bar-fill.good { background: var(--ok); }
.health-bar-fill.mid { background: var(--warn-solid, #e9a614); }
.health-bar-fill.low { background: var(--bad); }
.health-checks { display: flex; flex-direction: column; }
.health-check {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px;
  border-bottom: 1px solid var(--slate-line-soft); font-size: 14px;
}
.health-check:last-child { border-bottom: 0; }
.health-icon {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.health-check.pass .health-icon { background: var(--ok-bg); color: var(--ok); }
.health-check.warn .health-icon { background: var(--warn-bg); color: var(--warn); }
.health-check.fail .health-icon { background: var(--bad-bg); color: var(--bad); }
.health-check-label { font-weight: 600; }
.health-check-detail { color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------- knowledge matrix */
.matrix { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.matrix th, .matrix td { border: 1px solid var(--slate-line-soft); padding: 8px 10px; text-align: center; }
.matrix thead th { background: var(--slate-bg); font-size: 12px; letter-spacing: .02em; }
.matrix th.row-head, .matrix td.row-head {
  text-align: left; font-weight: 600; background: #fff; min-width: 170px;
}
.matrix thead th.row-head { background: var(--slate-bg); }
.matrix td.matrix-yes { background: var(--brand-primary-soft); color: var(--brand-primary-dark); font-weight: 800; }
.matrix td.matrix-no { color: #b6c2cc; }
.matrix td.matrix-forbidden { background: var(--bad-bg); color: var(--bad); font-weight: 700; }

/* ------------------------------------------------------------------- locker */
.locker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.locker-section {
  background: #fff; border: 1px solid var(--slate-line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px 18px;
}
.locker-section h4 { font-size: 14.5px; margin-bottom: 4px; }
.locker-count { font-size: 12px; color: var(--muted); font-weight: 600; }
.locker-item { padding: 9px 0; border-bottom: 1px solid var(--slate-line-soft); font-size: 13.5px; }
.locker-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.locker-item-title { font-weight: 600; }
.locker-item-meta { font-size: 12px; color: var(--muted); margin-top: 1px; }
.locker-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }

/* --------------------------------------------------------- discovery banner */
.discovery-banner {
  display: flex; align-items: center; gap: 14px;
  background: var(--brand-primary-soft); border: 1px solid var(--brand-primary);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px;
  box-shadow: var(--shadow); animation: discovery-in .45s ease;
}
.discovery-banner-icon {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand-primary); color: #fff; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.discovery-banner-title { font-weight: 750; color: var(--brand-primary-dark); font-size: 15px; }
.discovery-banner-text { font-size: 13.5px; color: var(--ink); }
@keyframes discovery-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- studio cards */
.sim-card { position: relative; overflow: hidden; }
.sim-status-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--slate-line); }
.sim-status-stripe.draft { background: #8296a5; }
.sim-status-stripe.review { background: var(--warn-solid, #e9a614); }
/* The published stripe is the framework's one lime role (Addendum
   v36): "published" is the live/current state, the analogue of the
   genuine product's lime "Current" badge — a graphic bar, no text. */
.sim-status-stripe.published { background: var(--lime); }
.sim-status-stripe.active { background: var(--ok); }
.sim-status-stripe.paused { background: var(--warn); }
.sim-status-stripe.completed { background: #64748b; }
.sim-status-stripe.archived { background: var(--slate-line); }
.sim-card-body { padding-left: 10px; }
.sim-card-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.sim-card-stat { min-width: 74px; }
.sim-card-stat-value { font-size: 18px; font-weight: 750; line-height: 1.15; }
.sim-card-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------------- journey */
.journey { position: relative; padding-left: 26px; }
.journey::before {
  content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px;
  border-left: 2px solid var(--slate-line);
}
.journey-item { position: relative; padding: 0 0 18px; }
.journey-item:last-child { padding-bottom: 2px; }
.journey-dot {
  position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand-primary);
}
.journey-item.discovery .journey-dot { border-color: var(--ok); background: var(--ok-bg); }
.journey-item.checkpoint .journey-dot { border-color: var(--warn-solid, #e9a614); }
.journey-item.flag .journey-dot { border-color: var(--bad); background: var(--bad-bg); }
.journey-date { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.journey-label { font-weight: 650; font-size: 14.5px; margin-top: 1px; }
.journey-detail { font-size: 13.5px; color: var(--muted); margin-top: 2px; }

/* ------------------------------------------------------- presentation outline */
.slide-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--slate-line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 14px 16px; margin-bottom: 10px;
}
.slide-num {
  width: 30px; height: 30px; border-radius: var(--radius-sm); flex: 0 0 auto;
  background: var(--brand-primary); color: #fff; font-weight: 750; font-size: 13.5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.slide-title { font-weight: 650; font-size: 14.5px; }
.slide-body { font-size: 13.5px; color: var(--muted); margin-top: 2px; white-space: pre-wrap; }
.slide-evidence { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }

/* ------------------------------------------------- operational round (v17)
   Notifications bell + panel, getting-started checklist, person-to-person
   chat, support tickets, and profiles. Same house tokens as everything
   else: white cards, tidy pills, generous spacing. */
.notif-wrap { position: relative; }
#notif-bell { position: relative; font-size: 16px; line-height: 1; }
.notif-badge {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--bad, #c23333);
  color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px;
  text-align: center;
}
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px;
  max-width: 86vw; background: #fff; border: 1px solid var(--slate-line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  z-index: 60; overflow: hidden;
}
.notif-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--slate-line-soft);
}
.notif-panel-body { max-height: 380px; overflow-y: auto; }
.notif-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  text-align: left; padding: 10px 14px; background: none; border: none;
  border-bottom: 1px solid var(--slate-line-soft); cursor: pointer;
}
.notif-item:hover { background: var(--slate-bg); }
.notif-item-title { font-weight: 650; font-size: 13.5px; overflow-wrap: anywhere; }
.notif-item-body { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.notif-item-time { font-size: 11.5px; color: var(--muted); }
.notif-card { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.notif-card.unread { border-left: 3px solid var(--info, #2f6fed); }
.notif-card-main { flex: 1; min-width: 0; }
.notif-card-main p { overflow-wrap: anywhere; }
.notif-card-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.onboarding-card { margin-bottom: 16px; }
.ob-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.ob-step { display: flex; gap: 9px; align-items: center; font-size: 14px; }
.ob-step.done { color: var(--muted); }
.ob-step.done .ob-check { color: var(--ok); }
.ob-check { font-weight: 700; width: 16px; text-align: center; }

.chat-layout {
  display: grid; grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 16px; align-items: start;
}
@media (max-width: 860px) { .chat-layout { grid-template-columns: 1fr; } }
.chat-list-card { padding: 0; overflow: hidden; }
.chat-new { padding: 14px; border-bottom: 1px solid var(--slate-line-soft); }
.chat-new label { font-size: 12.5px; font-weight: 650; display: block; margin-bottom: 6px; }
.conv-row {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left;
  padding: 11px 14px; background: none; border: none;
  border-bottom: 1px solid var(--slate-line-soft); cursor: pointer;
}
.conv-row:hover, .conv-row.active { background: var(--slate-bg); }
.conv-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.conv-row-name { font-weight: 650; font-size: 13.5px; }
.conv-row-last { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-row-time { font-size: 11px; white-space: nowrap; }
.chat-thread-card { display: flex; flex-direction: column; min-height: 420px; }
.chat-thread-head {
  display: flex; gap: 10px; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--slate-line-soft);
}
.chat-messages {
  flex: 1; overflow-y: auto; padding: 14px 2px; display: flex;
  flex-direction: column; gap: 10px; max-height: 480px;
}
.chat-msg { display: flex; }
.chat-msg.own { justify-content: flex-end; }
.chat-bubble {
  max-width: 78%; background: var(--slate-bg); border: 1px solid var(--slate-line-soft);
  border-radius: var(--radius); padding: 8px 12px;
}
.chat-msg.own .chat-bubble { background: var(--brand-primary); border-color: var(--brand-primary-dark); color: #fff; }
.chat-bubble p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.chat-msg-meta { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.chat-msg.own .chat-msg-meta { color: rgba(255,255,255,.75); }
.chat-composer {
  display: flex; gap: 8px; align-items: end;
  padding-top: 12px; border-top: 1px solid var(--slate-line-soft);
}
.chat-composer textarea { flex: 1; }

.ticket-row { margin-bottom: 12px; }
.ticket-thread { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ticket-msg {
  border: 1px solid var(--slate-line-soft); border-radius: var(--radius-sm); padding: 10px 12px;
  min-width: 0;
}
.ticket-msg p { overflow-wrap: anywhere; }
.ticket-msg-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.profile-head { display: flex; gap: 12px; align-items: center; }
.profile-avatar { width: 46px; height: 46px; font-size: 17px; }
.profile-memberships { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.pref-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 14px; cursor: pointer; }