/* ScaleBiz design system - teal + crimson on slate, from logo.png & app_slide theme. */

:root {
  /* Brand */
  --sb-teal-50:  #ECFDF5;
  --sb-teal-100: #CCFBF1;
  --sb-teal-300: #5EEAD4;
  --sb-teal-500: #14B8A6;
  --sb-teal-600: #0D9488;
  --sb-teal-700: #0F766E;

  --sb-crimson-50:  #FEF2F2;
  --sb-crimson-500: #DC2626;
  --sb-crimson-600: #B91C1C;

  /* Slate / surfaces */
  --sb-slate-900: #0F172A;
  --sb-slate-800: #1E293B;
  --sb-slate-700: #334155;
  --sb-slate-500: #64748B;
  --sb-slate-400: #94A3B8;
  --sb-slate-300: #CBD5E1;
  --sb-slate-200: #E2E8F0;
  --sb-slate-100: #F1F5F9;
  --sb-slate-50:  #F8FAFC;

  /* Semantic */
  --sb-ok:     #10B981;
  --sb-warn:   #F59E0B;
  --sb-danger: #EF4444;
  --sb-info:   #3B82F6;

  /* Layout */
  --sb-sidebar-w: 248px;
  --sb-topbar-h: 60px;
  --sb-radius-sm: 8px;
  --sb-radius:    14px;
  --sb-radius-lg: 20px;
  --sb-shadow-sm: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --sb-shadow:    0 4px 14px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --sb-shadow-lg: 0 20px 45px rgba(15,23,42,.12), 0 6px 12px rgba(15,23,42,.06);

  /* Type */
  --sb-font: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--sb-font);
  color: var(--sb-slate-800);
  background: var(--sb-slate-50);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

a { color: var(--sb-teal-600); text-decoration: none; }
a:hover { color: var(--sb-teal-700); text-decoration: underline; }

/* Layout shell =========================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sb-sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: linear-gradient(180deg, var(--sb-slate-900) 0%, #0B1122 100%);
  color: #E2E8F0;
  padding: 22px 16px 20px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sidebar::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(20,184,166,.18), transparent 55%),
              radial-gradient(circle at 100% 100%, rgba(220,38,38,.12), transparent 55%);
  pointer-events: none;
}
.brand {
  display: flex; gap: 10px; align-items: center;
  padding: 4px 6px 18px; position: relative;
}
.brand img { width: 40px; height: 40px; border-radius: 10px; background: #fff; padding: 3px; }
.brand .brand-name { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: #fff; }
.brand .brand-sub { color: var(--sb-slate-400); font-size: 11px; }

/* The nav is the only part that scrolls: the brand stays on top, the user block at the bottom,
   so a short laptop screen never clips "Admin" or the sign-out button. */
.nav {
  display: flex; flex-direction: column; gap: 4px; margin-top: 10px; position: relative;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: 4px; margin-right: -4px;
  scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.35) transparent;
}
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: rgba(148,163,184,.3); border-radius: 999px; }
.nav:hover::-webkit-scrollbar-thumb { background: rgba(148,163,184,.5); }
.sidebar .brand, .sidebar-footer { flex: 0 0 auto; }
.nav a {
  color: var(--sb-slate-300);
  padding: 10px 12px;
  border-radius: var(--sb-radius-sm);
  display: flex; align-items: center; gap: 12px;
  font-weight: 500; font-size: 14px;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  position: relative;
}
.nav a:hover { background: rgba(20,184,166,.12); color: #fff; text-decoration: none; transform: translateX(2px); }
.nav a:hover .nav-ico { color: var(--sb-teal-300); }
.nav a.active {
  background: var(--sb-crimson-500);
  color: #fff;
  box-shadow: 0 8px 22px rgba(220,38,38,.35);
}
.nav a.active .nav-ico { color: #fff; }
.nav a.active::before {
  content: "";
  position: absolute;
  left: -16px; width: 4px; height: 24px;
  background: var(--sb-teal-300);
  border-radius: 0 4px 4px 0;
}

.nav-ico {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--sb-slate-400);
  transition: color 150ms ease, transform 150ms ease;
}
.nav a span { line-height: 1; }
.nav-ico-sm { width: 14px; height: 14px; }
.sidebar-logout {
  color: var(--sb-teal-300);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 0;
  transition: color 150ms ease;
}
.sidebar-logout:hover { color: #5EEAD4; text-decoration: none; }
.sidebar-logout .nav-ico { color: var(--sb-teal-300); }
.nav .nav-group-title {
  color: var(--sb-slate-400); text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.1em; margin: 16px 12px 4px;
}

.sidebar-footer {
  margin-top: auto;
  color: var(--sb-slate-400); font-size: 12px;
  padding: 10px;
  position: relative;
  border-top: 1px solid rgba(255,255,255,.06);
}
.sf-user {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: background 150ms ease, border-color 150ms ease;
}
.sf-user:hover { background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.28); }
.sf-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700));
  border: 1.5px solid rgba(255,255,255,.35);
  flex-shrink: 0;
}
.sf-meta { min-width: 0; line-height: 1.25; }
.sf-actions { display: inline-flex; gap: 4px; align-items: center; flex-shrink: 0; }
.sf-meta.sf-no-img { grid-column: 1 / 3; }
.sf-name {
  color: #E2E8F0; font-weight: 600; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-role {
  color: var(--sb-slate-400); font-size: 10.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-logout {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--sb-teal-300);
  background: rgba(20,184,166,.1);
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  flex-shrink: 0;
}
.sf-logout:hover {
  background: var(--sb-teal-500); color: #fff;
  text-decoration: none; transform: scale(1.05);
}
.sf-logout .ico { width: 14px; height: 14px; }

/* App footer ------------------------------------------------------------ */
.main {
  display: flex; flex-direction: column; min-width: 0;
  min-height: 100vh;
}
.page { flex: 1 0 auto; }
.app-footer {
  flex-shrink: 0;
  margin-top: 28px;
  padding: 16px 28px 18px;
  background: #fff;
  border-top: 1px solid var(--sb-slate-200);
  color: var(--sb-slate-500);
  font-size: 12px;
}
.app-footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  max-width: none; margin: 0;
}
.app-footer-brand {
  display: inline-flex; align-items: center; gap: 8px;
}
.app-footer-brand img {
  width: 20px; height: 20px; border-radius: 5px;
  background: var(--sb-slate-100); padding: 2px;
}
.app-footer-brand strong { color: var(--sb-slate-700); font-weight: 600; }
.app-footer-meta {
  display: inline-flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.app-footer-meta a { color: var(--sb-slate-500); }
.app-footer-meta a:hover { color: var(--sb-teal-700); text-decoration: none; }
.app-footer-sep { color: var(--sb-slate-300); }

@media (max-width: 640px) {
  .app-footer { padding: 14px 18px; }
  .app-footer-meta .app-footer-sep { display: none; }
}

.topbar {
  height: var(--sb-topbar-h);
  background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--sb-slate-200);
  position: sticky; top: 0; z-index: 10;
}
.topbar .title { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.topbar .title .sub { color: var(--sb-slate-500); font-weight: 400; font-size: 13px; margin-left: 10px; }
.topbar .actions { display: flex; gap: 10px; align-items: center; }

.page {
  padding: 26px 32px 56px;
  max-width: none;     /* fully fluid - content always fills the main column, whatever the monitor width */
  width: 100%;
}

/* Cards =================================================================== */
.card {
  background: #fff;
  border: 1px solid var(--sb-slate-200);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow-sm);
  padding: 22px;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.card.hover:hover { box-shadow: var(--sb-shadow); transform: translateY(-2px); }
.card > h2, .card > h3 { margin-top: 0; }
.card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px; gap: 12px;
}
.card-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.card-sub { color: var(--sb-slate-500); font-size: 13px; margin: 4px 0 0; }

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

.row { display: flex; gap: 14px; flex-wrap: wrap; }

/* Metric cards =========================================================== */
.metric {
  background: linear-gradient(135deg, #fff 0%, var(--sb-teal-50) 140%);
  border-left: 4px solid var(--sb-teal-500);
  padding: 16px 18px 4px;
  position: relative;
  overflow: hidden;
}
.metric-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.metric .label { color: var(--sb-slate-500); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.metric .value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 2px; color: var(--sb-slate-900); }
.metric .pill { font-size: 11px; padding: 2px 8px; }
.metric .delta { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.metric .delta.up { color: var(--sb-ok); }
.metric .delta.down { color: var(--sb-danger); }
.metric.crim { border-left-color: var(--sb-crimson-500); background: linear-gradient(135deg, #fff 0%, var(--sb-crimson-50) 140%); }
.metric.warm { border-left-color: var(--sb-warn); background: linear-gradient(135deg, #fff 0%, #FEF3C7 180%); }
.metric.info { border-left-color: var(--sb-info); background: linear-gradient(135deg, #fff 0%, #DBEAFE 180%); }

/* Sparkline inside metric card */
.spark { display: block; width: 100%; height: 44px; margin-top: 4px; }

/* Chart wrappers ======================================================== */
.chart-wrap { position: relative; width: 100%; }
.chart-legend { display: inline-flex; gap: 12px; align-items: center; font-size: 12px; color: var(--sb-slate-500); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.donut-legend { display: flex; justify-content: space-around; gap: 10px; font-size: 12px; color: var(--sb-slate-600); margin-top: 8px; }
.donut-legend > div { display: inline-flex; gap: 6px; align-items: center; }
.donut-legend .dot { width: 8px; height: 8px; border-radius: 999px; }

/* BSC gauge row ========================================================= */
.bsc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bsc-tile { text-align: center; background: var(--sb-slate-50); border: 1px solid var(--sb-slate-200); border-radius: 14px; padding: 16px 10px 14px; }
.bsc-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sb-slate-500); font-weight: 600; margin-bottom: 8px; }
.bsc-gauge { position: relative; height: 66px; display: grid; place-items: center; }
.bsc-gauge svg { width: 120px; height: 66px; }
.bsc-val { position: absolute; bottom: 4px; font-size: 22px; font-weight: 700; color: var(--sb-slate-900); letter-spacing: -0.02em; }
.bsc-val span { font-size: 13px; color: var(--sb-slate-500); font-weight: 500; margin-left: 2px; }
.bsc-sub { font-size: 11px; margin-top: 8px; }
@media (max-width: 900px) { .bsc-row { grid-template-columns: repeat(2, 1fr); } }

/* Compact pillar row (dashboard) ======================================== */
.pillar.compact { padding: 10px 12px; gap: 10px; border-radius: 10px; }
.pillar.compact .ico { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
.pillar.compact .val { font-size: 16px; }
.pillar.compact .progress { width: 100%; max-width: 220px; }

/* Empty state =========================================================== */
.empty-state { background: var(--sb-slate-50); border: 1px dashed var(--sb-slate-300); border-radius: 12px; padding: 18px; text-align: center; color: var(--sb-slate-600); }
.empty-state strong { color: var(--sb-slate-900); display: block; margin-bottom: 4px; }

/* KR progress row (cascade) ============================================= */
.krs .kr-progress { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.krs .kr-progress .progress { flex: 1; height: 6px; }
.tree .krs { grid-template-columns: 1fr 150px auto; }

/* Pills / Badges ========================================================= */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.pill.green { background: #D1FAE5; color: #065F46; }
.pill.amber, .pill.yellow { background: #FEF3C7; color: #92400E; }
.pill.red    { background: #FEE2E2; color: #991B1B; }
.pill.teal   { background: var(--sb-teal-100); color: var(--sb-teal-700); }
.pill.slate  { background: var(--sb-slate-100); color: var(--sb-slate-700); }
.pill.crim   { background: var(--sb-crimson-50); color: var(--sb-crimson-600); }
.pill .dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; opacity: .7; }

/* Buttons =============================================================== */
.btn {
  border: 1px solid transparent; border-radius: 10px;
  padding: 9px 16px; font-weight: 600; font-size: 14px;
  cursor: pointer; background: var(--sb-slate-900); color: #fff;
  transition: transform 120ms ease, box-shadow 180ms ease, background 180ms ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sb-shadow); }
.btn.primary { background: var(--sb-teal-600); }
.btn.primary:hover { background: var(--sb-teal-700); }
.btn.danger { background: var(--sb-crimson-500); }
.btn.ghost { background: #fff; color: var(--sb-slate-800); border-color: var(--sb-slate-200); }
.btn.ghost:hover { background: var(--sb-slate-50); }
.btn.sm { padding: 6px 10px; font-size: 12px; }

.input, select, textarea {
  width: 100%; border: 1px solid var(--sb-slate-300); border-radius: 10px;
  padding: 9px 12px; font: inherit; background: #fff; color: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--sb-teal-500);
  box-shadow: 0 0 0 3px rgba(20,184,166,.18);
}
label { display: block; font-size: 13px; font-weight: 500; color: var(--sb-slate-700); margin-bottom: 6px; }

/* Tables ================================================================ */
table.clean { width: 100%; border-collapse: collapse; }
table.clean th, table.clean td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--sb-slate-100); font-size: 14px; }
table.clean th { font-size: 12px; text-transform: uppercase; color: var(--sb-slate-500); letter-spacing: 0.06em; }
table.clean tbody tr:hover { background: var(--sb-slate-50); }

/* Progress bars ========================================================= */
.progress { height: 8px; background: var(--sb-slate-100); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--sb-teal-500), var(--sb-teal-700)); border-radius: 999px; transition: width 350ms ease; }
.progress.warn > span { background: linear-gradient(90deg, #F59E0B, #B45309); }
.progress.crim > span { background: linear-gradient(90deg, var(--sb-crimson-500), var(--sb-crimson-600)); }

/* Login page ============================================================ */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background:
    linear-gradient(120deg, rgba(15,23,42,.78) 0%, rgba(30,41,59,.72) 100%),
    url("/static/img/gen/login-hero.png") center / cover no-repeat,
    radial-gradient(circle at 15% 20%, rgba(20,184,166,.20), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(220,38,38,.18), transparent 45%),
    linear-gradient(120deg, #0F172A 0%, #1E293B 100%);
}
.auth-card {
  width: min(440px, 92vw);
  background: #fff;
  border-radius: var(--sb-radius-lg);
  padding: 36px 36px 30px;
  position: relative;
  border: 1px solid rgba(226, 232, 240, 0.7);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 32px 80px rgba(15, 23, 42, 0.35),
    0 16px 32px rgba(15, 23, 42, 0.22),
    0 4px 10px rgba(15, 23, 42, 0.08);
  animation: auth-card-in 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Soft brand-glow halo behind the card */
.auth-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--sb-radius-lg) + 2px);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.35), transparent 45%, rgba(220, 38, 38, 0.22));
  z-index: -1;
  filter: blur(14px);
  opacity: 0.7;
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-card img.logo {
  width: 84px; height: 84px;
  border-radius: 18px; display: block; margin: 0 auto 10px;
  background: #fff; padding: 5px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
  border: 1px solid var(--sb-slate-100);
}
.auth-brand {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 10px;
}
.auth-brand-name {
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--sb-slate-900);
  line-height: 1.1;
}
.auth-brand-sub {
  margin-top: 2px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sb-slate-400);
}
.auth-card h1 { margin: 10px 0 2px; text-align: center; letter-spacing: -0.025em; font-size: 22px; }
.auth-card .tag { text-align: center; color: var(--sb-slate-500); margin: 0 0 22px; font-size: 13px; }

/* label row with forgot-password */
.auth-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.auth-label-row label { margin-bottom: 0; }
.auth-forgot {
  font-size: 12px;
  color: var(--sb-teal-600);
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease;
}
.auth-forgot:hover { color: var(--sb-teal-700); text-decoration: underline; }
/* Quiet inline hint on the auth cards (no yellow box): a muted note that points to another sign-in method */
.auth-hint {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--sb-slate-50); border: 1px solid var(--sb-slate-100); border-radius: 10px;
  color: var(--sb-slate-500); font-size: 12.5px; line-height: 1.5; text-align: left;
}
.auth-hint[hidden] { display: none; }
.auth-hint svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--sb-slate-400); }

/* password field + show/hide eye toggle */
.pw-field { position: relative; display: block; }
.pw-field .input { padding-right: 44px; }
/* suppress the native Edge/IE reveal so we only ever show one eye */
.pw-field .input::-ms-reveal,
.pw-field .input::-ms-clear { display: none; }
.pw-toggle {
  position: absolute;
  top: 50%; right: 5px;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0; margin: 0;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--sb-slate-400);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.pw-toggle:hover { color: var(--sb-slate-700); background: var(--sb-slate-100); }
.pw-toggle:active { background: var(--sb-slate-200); }
.pw-toggle:focus-visible {
  outline: none;
  color: var(--sb-teal-600);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .25);
}
.pw-toggle[aria-pressed="true"] { color: var(--sb-teal-600); }
.pw-toggle svg { width: 18px; height: 18px; display: block; }
.pw-toggle .pw-ico-hide { display: none; }
.pw-toggle[aria-pressed="true"] .pw-ico-show { display: none; }
.pw-toggle[aria-pressed="true"] .pw-ico-hide { display: block; }

/* Full-width sign-in button - centred text + arrow + teal gradient */
.auth-submit {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--sb-teal-500) 0%, var(--sb-teal-700) 100%);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(20, 184, 166, 0.38),
    0 4px 8px rgba(15, 118, 110, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 180ms ease, box-shadow 200ms ease, filter 150ms ease;
  letter-spacing: 0.01em;
}
.auth-submit svg { width: 16px; height: 16px; transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.auth-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 16px 32px rgba(20, 184, 166, 0.48),
    0 6px 12px rgba(15, 118, 110, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.auth-submit:hover svg { transform: translateX(4px); }
.auth-submit:active { transform: translateY(0); filter: brightness(0.96); }

/* Google sign-in button */
.btn-google {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--sb-slate-300);
  background: #fff;
  color: var(--sb-slate-800);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.btn-google:hover {
  background: var(--sb-slate-50);
  border-color: var(--sb-slate-400);
  text-decoration: none;
  color: var(--sb-slate-900);
  transform: translateY(-1px);
  box-shadow: var(--sb-shadow-sm);
}
.btn-google:active { transform: translateY(0); }
.btn-google .g-logo { width: 18px; height: 18px; flex-shrink: 0; }

/* or-divider */
.auth-divider {
  display: flex; align-items: center;
  margin: 16px 0;
  color: var(--sb-slate-400);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sb-slate-200);
}
.auth-divider span { padding: 0 12px; }

/* Dashboard person row (Top PI Matches · Burnout watch) ================ */
.dash-person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.dash-person:hover .dash-avatar {
  border-color: var(--sb-teal-400);
  box-shadow: 0 2px 6px rgba(20, 184, 166, .25);
}
.dash-person:hover strong { color: var(--sb-teal-700); }
.dash-person strong { color: var(--sb-teal-600); transition: color 120ms ease; }
.dash-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
  flex-shrink: 0;
  background: var(--sb-slate-100);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.dash-person-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dash-person-text strong { font-size: 13.5px; line-height: 1.25; }

/* Dashboard - Commercial Viability card ================================ */
.sb-cv {
  padding: 22px 24px;
  background: linear-gradient(135deg, #ECFDF5 0%, #fff 50%, #F0FDFA 100%);
  border-left: 4px solid var(--sb-teal-500);
  position: relative;
  overflow: hidden;
}
.sb-cv::before {
  content: "";
  position: absolute; right: -100px; top: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle at center, rgba(20,184,166,.12) 0%, transparent 65%);
  pointer-events: none;
}
.sb-cv-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 980px) { .sb-cv-grid { grid-template-columns: 1fr; } }

.sb-cv-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--sb-teal-700); font-weight: 700;
}
.sb-cv-title {
  margin: 4px 0 4px;
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--sb-slate-900);
  line-height: 1.15;
}
.sb-cv-sub { margin: 0 0 16px; color: var(--sb-slate-600); font-size: 14px; }

.sb-cv-kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--sb-slate-100);
  border-bottom: 1px solid var(--sb-slate-100);
}
.sb-cv-kpi {
  padding: 10px 12px;
  background: rgba(255,255,255,.7);
  border-radius: 12px;
  border: 1px solid rgba(20,184,166,.15);
  position: relative;
}
.sb-cv-kpi-val {
  font-size: 30px; font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--sb-teal-700);
  line-height: 1;
}
.sb-cv-kpi-unit { font-size: 17px; font-weight: 700; margin-left: 2px; opacity: .85; }
.sb-cv-kpi-lbl { margin-top: 6px; font-size: 11.5px; color: var(--sb-slate-600); font-weight: 500; line-height: 1.3; }

.sb-cv-note {
  margin: 14px 0 0;
  font-size: 13px; line-height: 1.55;
  color: var(--sb-slate-700);
  padding: 10px 12px;
  background: rgba(255,255,255,.6);
  border-radius: 10px;
  border-left: 3px solid var(--sb-teal-500);
}
.sb-cv-note strong { color: var(--sb-teal-700); }

.sb-cv-right { position: relative; z-index: 1; }
.sb-cv-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sb-cv-chart-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-slate-500); font-weight: 700; }
.sb-cv-chart-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; padding-top: 8px;
  border-top: 1px dashed var(--sb-slate-200);
  font-size: 11.5px; color: var(--sb-slate-600); font-weight: 500;
}
.sb-cv-chart-foot .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; }

/* Dashboard - 12-Month Strategic Roadmap (5-phase grid) =============== */
.sb-rm {
  padding: 22px 24px;
  background: linear-gradient(180deg, #fff 0%, #F8FAFC 100%);
}
.sb-rm-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--sb-slate-200);
}
.sb-rm-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--sb-slate-900); }
.sb-rm-sub { margin: 0; color: var(--sb-slate-600); font-size: 13px; line-height: 1.5; }
.sb-rm-sub em { font-style: italic; }

/* 5 phase boxes - equal-width row that wraps to 2 cols on smaller screens */
.sb-rm-phases {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 1280px) { .sb-rm-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width:  860px) { .sb-rm-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:  560px) { .sb-rm-phases { grid-template-columns: 1fr; } }

.sb-rm-phase {
  position: relative;
  background: #fff;
  border: 1px solid var(--sb-slate-100);
  border-radius: 14px;
  padding: 18px 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  --p-hue:  var(--sb-teal-500);
  --p-soft: var(--sb-teal-50);
  --p-deep: var(--sb-teal-700);
}
.sb-rm-phase::before {
  content: "";
  position: absolute; left: 0; top: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--p-hue), color-mix(in srgb, var(--p-hue) 65%, white));
}
.sb-rm-phase:hover { transform: translateY(-3px); border-color: var(--p-hue); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--p-hue) 45%, transparent); }

.sb-rm-phase.hue-teal  { --p-hue: #14B8A6; --p-soft: #CCFBF1; --p-deep: #0F766E; }
.sb-rm-phase.hue-blue  { --p-hue: #3B82F6; --p-soft: #DBEAFE; --p-deep: #1E40AF; }
.sb-rm-phase.hue-amber { --p-hue: #F59E0B; --p-soft: #FEF3C7; --p-deep: #B45309; }
.sb-rm-phase.hue-rose  { --p-hue: #E11D48; --p-soft: #FFE4E6; --p-deep: #9F1239; }
.sb-rm-phase.hue-green { --p-hue: #16A34A; --p-soft: #DCFCE7; --p-deep: #166534; }

.sb-rm-phase-num {
  position: absolute;
  right: 12px; top: 14px;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: color-mix(in srgb, var(--p-hue) 14%, transparent);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  pointer-events: none;
  user-select: none;
}

.sb-rm-phase-meta {
  display: inline-flex; align-items: center; gap: 8px;
}
.sb-rm-phase-mo {
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--p-soft);
  color: var(--p-deep);
  white-space: nowrap;
}
.sb-rm-phase-ico {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--p-hue);
  color: #fff;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--p-hue) 35%, transparent);
}

.sb-rm-phase-eyebrow {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--p-deep);
  margin-top: 4px;
}
.sb-rm-phase-title {
  margin: 2px 0 6px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--sb-slate-900);
  line-height: 1.25;
  position: relative;
  z-index: 1;
}

.sb-rm-phase-points {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  z-index: 1;
}
.sb-rm-phase-points li {
  position: relative;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sb-slate-700);
}
.sb-rm-phase-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--p-hue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-hue) 18%, transparent);
}

/* Month 12 milestones - horizontal strip below the phases */
.sb-rm-ms-strip {
  background:
    linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 50%, #FEF9C3 100%);
  border: 1px solid #FDE68A;
  border-radius: 14px;
  padding: 16px 18px 18px;
  position: relative;
}
.sb-rm-ms-strip-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(217,119,6,.30);
}
.sb-rm-ms-strip-head > span:first-of-type {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: #92400E;
  padding: 5px 12px;
  background: rgba(255,255,255,.85);
  border-radius: 999px;
}
.sb-rm-ms-strip-head .ico { color: #D97706; }
.sb-rm-ms-strip-sub {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--sb-slate-600);
  font-weight: 500;
  font-style: italic;
}

.sb-rm-ms-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) { .sb-rm-ms-tiles { grid-template-columns: 1fr; } }

.sb-rm-ms-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.72);
  border-radius: 12px;
  border: 1px solid rgba(217,119,6,.18);
}
.sb-rm-ms-num {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1E3A8A;
  line-height: 1;
  flex-shrink: 0;
}
.sb-rm-ms-num small {
  font-size: 18px;
  margin-left: 1px;
  font-weight: 800;
  vertical-align: super;
  color: #2563EB;
}
.sb-rm-ms-lbl {
  font-size: 12.5px;
  color: var(--sb-slate-700);
  line-height: 1.4;
  font-weight: 600;
}
.sb-rm-ms-lbl .muted { font-size: 10.5px; font-weight: 500; }
.sb-rm-ms-final .sb-rm-ms-ready {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .03em;
  color: #B45309;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  flex-shrink: 0;
}
.sb-rm-ms-final strong { color: #B45309; }

/* Dashboard cascade tree ================================================ */
.tree ul { list-style: none; padding-left: 22px; margin: 0; border-left: 2px dashed var(--sb-slate-200); }
.tree li { padding: 8px 0; position: relative; }
.tree .obj { font-weight: 600; color: var(--sb-slate-900); }
.tree .krs { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-top: 6px; padding: 8px 12px; background: var(--sb-slate-50); border-radius: 10px; }
.tree .krs .kr-text { font-size: 13px; color: var(--sb-slate-700); }

/* Chat ================================================================== */
.chat { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; max-height: 60vh; overflow-y: auto; }
.bubble { max-width: 72%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; }
.bubble.user { background: var(--sb-teal-500); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble.bot  { background: var(--sb-slate-100); color: var(--sb-slate-900); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-form { display: flex; gap: 8px; }
.quick-prompts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.quick-prompts button { background: var(--sb-slate-100); color: var(--sb-slate-800); border: 1px solid var(--sb-slate-200); padding: 6px 12px; border-radius: 999px; font-size: 12px; cursor: pointer; }
.quick-prompts button:hover { background: var(--sb-teal-100); color: var(--sb-teal-700); border-color: var(--sb-teal-300); }

/* Kanban ================================================================= */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kanban-col { background: var(--sb-slate-100); border-radius: var(--sb-radius); padding: 12px; min-height: 360px; display: flex; flex-direction: column; gap: 10px; }
.kanban-col header { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; }
.kanban-col header .count { background: var(--sb-slate-900); color: #fff; padding: 1px 8px; border-radius: 999px; font-size: 11px; }
.kanban-card { background: #fff; border-radius: 10px; padding: 12px; box-shadow: var(--sb-shadow-sm); border: 1px solid var(--sb-slate-200); cursor: grab; }
.kanban-card h4 { margin: 0 0 6px; font-size: 14px; }
.kanban-card .meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--sb-slate-500); }
.kanban-card .meta .pill { font-size: 10px; }
@media (max-width: 900px) { .kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kanban { grid-template-columns: 1fr; } }

/* PI Radar =============================================================== */
.pi-drives { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pi-drive { text-align: center; background: var(--sb-slate-50); padding: 10px; border-radius: 10px; border: 1px solid var(--sb-slate-200); }
.pi-drive .letter { font-size: 22px; font-weight: 700; color: var(--sb-teal-700); }
.pi-drive .val { font-size: 13px; color: var(--sb-slate-500); }

/* Toast/alert ============================================================ */
.alert { padding: 12px 14px; border-radius: 10px; font-size: 13px; }
.alert-success { background: #D1FAE5; color: #065F46; border: 1px solid #86EFAC; }
.alert-warn    { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.alert-error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }

/* Mascot ================================================================= */
.mascot-wrap {
  position: fixed; right: 18px; bottom: 22px;
  z-index: 9000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.mascot-wrap[hidden] { display: none; }
.mascot-wrap > * { pointer-events: auto; }
.mascot-bubble, .mascot-bubble-close, .mascot { pointer-events: auto; }

.mascot {
  position: relative;
  width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #E6FFFB 70%);
  box-shadow: 0 14px 30px rgba(15,118,110,.35);
  display: grid; place-items: center;
  cursor: pointer;
  animation: mascot-float 4s ease-in-out infinite;
  border: 2px solid var(--sb-teal-300);
}
.mascot img { display: block; width: 60px; height: 60px; object-fit: contain; border-radius: 50%; }
.mascot:hover { transform: scale(1.05); }
.mascot-pulse {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(20,184,166,0.45);
  animation: mascot-pulse 2s ease-out infinite;
  pointer-events: none;
}
.mascot-wrap.is-dismissed .mascot-pulse { display: none; }
@keyframes mascot-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mascot-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Speech bubble - tap link to open AI coach; close button hides for session */
.mascot-bubble {
  position: relative;
  max-width: 280px; width: max-content;
  padding: 10px 14px 12px;
  background: #fff;
  border: 1px solid rgba(20,184,166,0.35);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.08);
  transform-origin: bottom right;
  animation: mascot-bubble-in 280ms cubic-bezier(.2, .8, .3, 1);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.mascot-bubble[hidden] { display: none; }
.mascot-bubble:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(15,23,42,0.22), 0 2px 6px rgba(15,23,42,0.1);
  border-color: rgba(20,184,166,0.6);
}
@keyframes mascot-bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mascot-bubble-close {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 6px; border: 0;
  background: var(--sb-slate-100); color: var(--sb-slate-600);
  cursor: pointer; display: inline-grid; place-items: center;
  z-index: 2;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.mascot-bubble-close:hover { background: var(--sb-slate-200); color: var(--sb-slate-900); transform: scale(1.08); }
.mascot-bubble-close:focus-visible { outline: 2px solid var(--sb-teal-500); outline-offset: 2px; }
.mascot-bubble-close .ico { width: 12px; height: 12px; }
.mascot-bubble-link {
  display: block;
  text-decoration: none; color: inherit;
  padding-right: 24px;
}
.mascot-bubble-text {
  margin: 0 0 6px; font-size: 13px; color: var(--sb-slate-800);
  line-height: 1.45; font-weight: 500;
  transition: opacity 220ms ease;
}
.mascot-bubble.is-swapping .mascot-bubble-text { opacity: 0; }
.mascot-bubble-hint {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sb-teal-700);
}
.mascot-bubble-hint .ico { width: 12px; height: 12px; color: var(--sb-teal-600); }
.mascot-bubble-tail {
  position: absolute; right: 24px; bottom: -7px;
  width: 14px; height: 14px;
  background: #fff;
  border-right: 1px solid rgba(20,184,166,0.35);
  border-bottom: 1px solid rgba(20,184,166,0.35);
  transform: rotate(45deg);
}
.mascot-bubble:hover .mascot-bubble-tail { border-color: rgba(20,184,166,0.6); }

@media (max-width: 640px) {
  .mascot-wrap { right: 10px; bottom: 10px; }
  .mascot-bubble { max-width: 240px; }
}

/* Blueprint · metric strip (uniform 4 cards) ============================= */
.metric-strip { align-items: stretch; }
.metric-strip > .card.metric {
  display: flex; flex-direction: column;
  min-height: 240px;
  padding: 16px 18px 16px;
}
.metric-strip .value { font-size: 28px; margin-top: 2px; margin-bottom: 0; }
.metric-figure {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 2px 0 12px;
}
.metric-figure .muted {
  text-align: right; white-space: nowrap;
}

/* Card 1 - mini dept bars */
.mini-bars { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.mini-bar-row { display: grid; grid-template-columns: 64px 1fr 20px; gap: 8px; align-items: center; font-size: 11px; }
.mini-bar-label { color: var(--sb-slate-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mini-bar { height: 6px; background: var(--sb-slate-100); border-radius: 999px; overflow: hidden; }
.mini-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--sb-teal-500), var(--sb-teal-700)); border-radius: 999px; transition: width 320ms ease; }
.mini-bar-val { text-align: right; color: var(--sb-slate-700); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Card 2 - family stacked bar */
.fam-stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: 4px 0 12px; background: var(--sb-slate-100); box-shadow: inset 0 1px 2px rgba(15,23,42,.05); }
.fam-stack-seg { transition: width 320ms ease; }
.fam-stack-legend { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; margin-top: auto; }
.fam-leg {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--sb-slate-200);
  padding: 3px 8px; border-radius: 999px;
  color: var(--sb-slate-700); font-weight: 500;
}
.fam-leg .muted { font-weight: 700; color: var(--sb-slate-600); }
.fam-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }

/* Reference profile gallery - 6 × 3 grid in analytics row */
.profile-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.profile-tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 3px 2px;
  border-radius: 8px;
  background: var(--sb-slate-50);
  border: 1px solid var(--sb-slate-200);
  filter: grayscale(1); opacity: 0.45;
  transition: filter 200ms ease, opacity 200ms ease, transform 200ms ease,
              box-shadow 200ms ease, border-color 200ms ease, background 200ms ease;
}
.profile-tile-img {
  width: 28px; height: 28px; border-radius: 999px; overflow: hidden;
  background: #fff; border: 1px solid var(--sb-slate-200);
}
.profile-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-tile-name {
  font-size: 9px; font-weight: 600; color: var(--sb-slate-600);
  text-align: center; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.profile-tile.is-on {
  filter: grayscale(0); opacity: 1;
  background: #fff;
  border-color: rgba(20,184,166,0.35);
  box-shadow: 0 1px 4px rgba(15,118,110,0.12);
}
.profile-tile.is-on .profile-tile-name { color: var(--sb-slate-900); }
.profile-tile:hover { transform: translateY(-2px); }
.profile-tile.is-on:hover {
  border-color: rgba(20,184,166,0.6);
  box-shadow: 0 4px 12px rgba(15,118,110,0.18);
}
@media (max-width: 900px) {
  .profile-gallery { grid-template-columns: repeat(4, 1fr); }
}

/* Card 4 - burnout row (small donut + stats) */
.burnout-row { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.mini-donut { width: 72px; height: 72px; flex-shrink: 0; display: block; }
.mini-donut-num { font-size: 15px; font-weight: 700; fill: var(--sb-slate-900); }
.mini-donut-sub { font-size: 7px; fill: var(--sb-slate-500); text-transform: uppercase; letter-spacing: 0.1em; }
.burnout-meta { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.burnout-stat { display: grid; grid-template-columns: 10px 1fr auto; gap: 6px; align-items: center; font-size: 12px; }
.burnout-stat .mono { font-weight: 700; color: var(--sb-slate-900); }
.burn-dot { width: 8px; height: 8px; border-radius: 999px; }
.burn-dot-red { background: #EF4444; }
.burn-dot-amber { background: #F59E0B; }
.burn-dot-green { background: #10B981; }

/* View-mode toggle (Grid / Org Chart) */
.bp-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bp-view-toggle {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--sb-slate-100); border-radius: 10px;
  border: 1px solid var(--sb-slate-200);
}
.bp-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 0; background: transparent; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--sb-slate-600); cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.bp-view-btn svg { width: 14px; height: 14px; }
.bp-view-btn.is-active { background: #fff; color: var(--sb-teal-700); box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.bp-view-btn:hover:not(.is-active) { color: var(--sb-slate-800); }

/* Blueprint list ========================================================= */
.bp-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
@media (max-width: 900px) { .bp-toolbar { grid-template-columns: 1fr; } }
.bp-filter {
  display: grid;
  grid-template-columns: 1fr 180px auto auto;
  gap: 8px;
  align-items: center;
  position: relative;
}
.bp-filter input[type="search"] { padding-left: 38px; }
.bp-search-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--sb-slate-400); pointer-events: none;
}
@media (max-width: 900px) { .bp-filter { grid-template-columns: 1fr 1fr; } }
.bp-upload { display: flex; gap: 8px; align-items: center; }
.bp-upload-label {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-radius: 10px; border: 1px dashed var(--sb-slate-300);
  background: var(--sb-slate-50); color: var(--sb-slate-700);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
  margin-bottom: 0;
}
.bp-upload-label:hover { background: var(--sb-teal-50); border-color: var(--sb-teal-500); color: var(--sb-teal-700); }
.bp-upload-label svg { width: 16px; height: 16px; }
.bp-upload-label input[type="file"] { display: none; }

.fam-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fam-chips .pill { font-size: 10px; padding: 2px 8px; }

/* People grid */
.bp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.bp-card {
  background: #fff;
  border: 1px solid var(--sb-slate-200);
  border-radius: var(--sb-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  position: relative;
}
.bp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(15,23,42,.14), 0 4px 8px rgba(15,23,42,.06);
  border-color: var(--sb-teal-300);
  text-decoration: none; color: inherit;
}
/* Thin teal gradient banner */
.bp-banner {
  position: relative;
  height: 64px;
  background:
    radial-gradient(circle at 20% 30%, rgba(94,234,212,.35), transparent 60%),
    linear-gradient(135deg, var(--sb-slate-900) 0%, #0F766E 100%);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
}
.bp-profile-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.95);
  color: var(--sb-slate-800);
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform 180ms ease;
}
.bp-card:hover .bp-profile-chip { transform: translateY(-1px); }
.bp-profile-ico { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; background: #fff; border: 1px solid var(--sb-slate-200); }
.bp-banner-flag {
  width: 14px; height: 14px; border-radius: 999px;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(15,23,42,0.25);
  background: var(--sb-slate-300);
}
.bp-banner-flag--red     { background: #EF4444; }
.bp-banner-flag--amber   { background: #F59E0B; }
.bp-banner-flag--green   { background: #10B981; }
.bp-banner-flag--unknown { background: var(--sb-slate-300); }

/* Big circular avatar overlapping the banner */
.bp-avatar-wrap {
  margin: -44px auto 0;
  width: 96px; height: 96px;
  position: relative; z-index: 1;
}
.bp-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.18);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bp-card:hover .bp-avatar { transform: scale(1.04); }

.bp-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; gap: 6px; text-align: center; }
.bp-name { font-weight: 700; font-size: 15px; color: var(--sb-slate-900); letter-spacing: -0.01em; }
.bp-meta { color: var(--sb-slate-500); font-size: 12px; }

/* mini vertical drive bars */
.bp-drives { display: flex; justify-content: center; gap: 6px; margin: 10px 0 6px; }
.bp-drive {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 8px; background: var(--sb-slate-50); border-radius: 8px;
  min-width: 34px;
}
.bp-drive-letter { font-size: 10px; font-weight: 700; color: var(--sb-slate-600); letter-spacing: 0.08em; }
.bp-drive-bar {
  position: relative; width: 14px; height: 30px;
  background: var(--sb-slate-200); border-radius: 8px; overflow: hidden;
  display: flex; align-items: flex-end;
}
.bp-drive-bar > span {
  display: block; width: 100%; min-height: 2px;
  background: linear-gradient(0deg, var(--sb-teal-600), var(--sb-teal-300));
  border-radius: 8px;
}

.bp-footer { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; flex-wrap: wrap; border-top: 1px solid var(--sb-slate-100); padding-top: 10px; }
.bp-footer .pill { font-size: 10px; padding: 2px 7px; }
.bp-open { margin-left: auto; color: var(--sb-teal-600); font-size: 12px; font-weight: 600; }

/* Profile distribution strip */
.profile-dist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.profile-dist-tile {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 10px;
  background: var(--sb-slate-50); border: 1px solid var(--sb-slate-200);
  transition: background 150ms ease, transform 150ms ease;
}
.profile-dist-tile:hover { background: var(--sb-teal-50); transform: translateY(-1px); }
.profile-dist-ico { width: 42px; height: 42px; object-fit: contain; border-radius: 10px; background: #fff; padding: 2px; border: 1px solid var(--sb-slate-200); }
.profile-dist-name { font-size: 13px; font-weight: 600; color: var(--sb-slate-900); }

/* Blueprint detail hero - avatar primary, PI chip secondary */
.bp-detail-hero {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  align-items: center;
  padding: 22px 24px;
  background:
    radial-gradient(circle at 110% -20%, rgba(94,234,212,.20), transparent 55%),
    linear-gradient(135deg, #fff 0%, var(--sb-teal-50) 180%);
  border: 1px solid var(--sb-slate-200);
  border-radius: var(--sb-radius-lg);
  box-shadow: var(--sb-shadow);
  position: relative; overflow: hidden;
}
.bp-detail-avatar-wrap { position: relative; width: 180px; height: 180px; }
.bp-detail-avatar {
  width: 180px; height: 180px; border-radius: 50%; object-fit: cover;
  border: 6px solid #fff;
  box-shadow: 0 20px 40px rgba(15,23,42,.18), 0 6px 12px rgba(15,23,42,.08);
  background: #fff;
}
.bp-detail-pi-chip {
  position: absolute; bottom: -6px; right: -8px;
  width: 68px; height: 68px; border-radius: 50%;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.22);
  overflow: hidden; display: grid; place-items: center;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms ease;
}
.bp-detail-pi-chip img { width: 100%; height: 100%; object-fit: cover; }
.bp-detail-pi-chip:hover { transform: scale(1.06) rotate(-3deg); box-shadow: 0 14px 28px rgba(15,23,42,.28); }
.bp-detail-hero .h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; color: var(--sb-slate-900); margin: 0 0 6px; }
.bp-detail-hero .sub { color: var(--sb-slate-600); font-size: 15px; margin: 0 0 12px; }
.bp-detail-hero .badges { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .bp-detail-hero { grid-template-columns: 1fr; text-align: center; }
  .bp-detail-avatar-wrap { margin: 0 auto; }
}

/* Blueprint detail · Self ↔ Self-Concept gap ============================ */
.gap-card { padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, #F8FAFC 0%, #ECFDF5 130%); border: 1px solid var(--sb-slate-200); margin-top: 8px; }
.gap-card.is-warn { background: linear-gradient(135deg, #FFFBEB 0%, #FEF2F2 130%); border-color: #FCA5A5; }
.gap-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--sb-slate-600); font-weight: 600; margin-bottom: 8px; }
.gap-bar { position: relative; height: 26px; }
.gap-track { position: absolute; top: 50%; left: 0; right: 0; height: 3px; background: var(--sb-slate-200); border-radius: 999px; transform: translateY(-50%); }
.gap-range { position: absolute; top: 50%; height: 3px; background: linear-gradient(90deg, var(--sb-teal-500), var(--sb-crimson-500)); border-radius: 999px; transform: translateY(-50%); }
.gap-marker { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(15,23,42,.2); }
.gap-marker.self { background: var(--sb-teal-500); }
.gap-marker.selfconcept { background: var(--sb-crimson-500); }
.gap-meta { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* Match rows (sidebar) */
.match-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sb-slate-100); }
.match-row:last-of-type { border-bottom: 0; }
.match-row.is-best { background: linear-gradient(90deg, rgba(20,184,166,0.08), transparent); padding: 10px 10px; border-radius: 8px; margin: 0 -10px; border-bottom: 0; }
.match-row strong { font-size: 13.5px; color: var(--sb-slate-900); }

/* KPI rows */
.kpi-row { border: 1px solid var(--sb-slate-200); border-radius: 12px; padding: 12px 14px; transition: transform 150ms ease, border-color 150ms ease; border-left: 4px solid var(--sb-slate-300); }
.kpi-row:hover { transform: translateY(-1px); }
.kpi-row--green { border-left-color: var(--sb-ok); }
.kpi-row--amber { border-left-color: var(--sb-warn); }
.kpi-row--red { border-left-color: var(--sb-danger); }
.kpi-row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kpi-row-head strong { margin-left: 6px; font-size: 14px; color: var(--sb-slate-900); }
.kpi-row-body { margin-top: 8px; }
.kpi-row-progress { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.kpi-row-progress .progress { flex: 1; height: 6px; }

/* 4Hs pillar row on detail page */
.fhs-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fhs-tile { text-align: center; background: var(--sb-slate-50); border: 1px solid var(--sb-slate-200); border-radius: 12px; padding: 12px 8px; }
.fhs-ring-wrap svg { width: 100%; max-width: 96px; height: auto; }
.fhs-ring-num { font-size: 18px; font-weight: 700; fill: var(--sb-slate-900); }
.fhs-lbl { font-size: 12px; font-weight: 600; color: var(--sb-slate-700); margin-top: 4px; }
@media (max-width: 720px) { .fhs-row { grid-template-columns: repeat(2, 1fr); } }

/* Team list */
.team-list { display: flex; flex-direction: column; gap: 6px; }
.team-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; color: inherit; transition: background 150ms ease, border-color 150ms ease, transform 120ms ease; }
.team-item:hover { background: var(--sb-slate-50); border-color: var(--sb-slate-200); transform: translateX(2px); text-decoration: none; color: inherit; }
.team-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.team-name { font-size: 13.5px; font-weight: 600; color: var(--sb-slate-900); }
.team-pi { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--sb-slate-200); background: #fff; }

/* Recent session rows */
.session-row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--sb-slate-100); }
.session-row:last-of-type { border-bottom: 0; }
.session-kind { font-size: 16px; text-align: center; }
.session-text div:first-child { font-size: 13px; color: var(--sb-slate-800); }

/* Org Chart ============================================================== */
.org-zoom { display: inline-flex; gap: 6px; align-items: center; }
.org-zoom button { padding: 4px 10px; font-size: 14px; line-height: 1; }

.org-scroller {
  overflow: auto;
  padding: 24px 12px 32px;
  background:
    radial-gradient(circle at 50% 0%, rgba(20,184,166,.06), transparent 55%),
    var(--sb-slate-50);
  border-radius: var(--sb-radius);
  border: 1px dashed var(--sb-slate-200);
}
.org-tree {
  min-width: min-content;
  display: flex;
  justify-content: center;
  transform-origin: top center;
  transition: transform 180ms ease;
}
.org-branch {
  display: flex; flex-direction: column; align-items: center;
  position: relative; padding: 18px 14px 0;
}
.org-branch::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 2px; height: 18px;
  background: var(--sb-slate-300);
  transform: translateX(-50%);
}
.org-branch:first-child:last-child::before,
.org-tree > .org-branch::before { display: none; }
.org-branch:first-child:last-child { padding-top: 0; }
.org-tree > .org-branch { padding-top: 0; }

.org-node {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 170px; max-width: 200px;
  padding: 14px 12px 12px;
  background: #fff;
  border: 1px solid var(--sb-slate-200);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(15,23,42,.06);
  transition: transform 150ms ease, box-shadow 180ms ease, border-color 150ms ease;
  text-decoration: none; color: inherit;
  text-align: center;
}
.org-node.is-root {
  background: linear-gradient(135deg, var(--sb-slate-900) 0%, #0F766E 100%);
  color: #fff; border-color: #0F766E;
}
.org-node.is-root .org-title, .org-node.is-root .org-dept { color: rgba(255,255,255,0.8); }
.org-node.is-root .org-name { color: #fff; }
.org-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);
  border-color: var(--sb-teal-400, #5EEAD4);
  text-decoration: none; color: inherit;
}
.org-node.is-root:hover { color: #fff; }

.org-avatar {
  width: 62px; height: 62px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(15,23,42,.16);
  background: #fff;
  margin-bottom: 4px;
}
.org-node.is-root .org-avatar { border-color: #5EEAD4; box-shadow: 0 4px 14px rgba(20,184,166,.35); }

.org-pi-chip {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid #fff; object-fit: cover;
  box-shadow: 0 2px 5px rgba(15,23,42,.15);
}

.org-name { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; color: var(--sb-slate-900); margin-top: 2px; }
.org-title { font-size: 11px; color: var(--sb-slate-500); }
.org-dept { font-size: 10px; color: var(--sb-slate-500); text-transform: uppercase; letter-spacing: 0.06em; }
.org-pill { font-size: 10px; padding: 2px 8px; margin-top: 6px; }

.org-children {
  display: flex; justify-content: center; position: relative;
  margin-top: 18px; padding-top: 18px;
  flex-wrap: nowrap;
}
.org-children::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 2px; height: 18px;
  background: var(--sb-slate-300);
  transform: translateX(-50%);
}
/* Horizontal connector across children */
.org-children > .org-branch { padding-top: 0; }
.org-children > .org-branch::after {
  content: "";
  position: absolute; top: -18px; left: 0; right: 0; height: 2px;
  background: var(--sb-slate-300);
}
.org-children > .org-branch:first-child::after { left: 50%; }
.org-children > .org-branch:last-child::after { right: 50%; }
.org-children > .org-branch:only-child::after { display: none; }
.org-children > .org-branch::before {
  content: "";
  position: absolute; top: -18px; left: 50%;
  width: 2px; height: 18px;
  background: var(--sb-slate-300);
  transform: translateX(-50%);
}

/* My Day ================================================================= */
.myday-hero {
  background:
    linear-gradient(135deg, rgba(15,23,42,.15) 0%, rgba(15,118,110,.20) 100%),
    url('/static/img/gen/myday-hero-bg.png') center / cover no-repeat,
    linear-gradient(120deg, #0F172A 0%, #1E293B 100%);
  color: #F8FAFC;
  border-radius: var(--sb-radius-lg);
  padding: 28px 32px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  box-shadow: var(--sb-shadow);
  position: relative; overflow: hidden;
}
.myday-hero::after {
  content: ""; position: absolute; right: -100px; bottom: -100px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(94,234,212,.18), transparent 70%);
  pointer-events: none;
}
.myday-hero--afternoon {
  background:
    linear-gradient(135deg, rgba(15,118,110,.18) 0%, rgba(245,158,11,.15) 100%),
    url('/static/img/gen/myday-hero-bg.png') center / cover no-repeat,
    linear-gradient(120deg, #1E293B 0%, #0F766E 100%);
}
.myday-hero--evening {
  background:
    linear-gradient(135deg, rgba(31,27,58,.30) 0%, rgba(15,23,42,.45) 100%),
    url('/static/img/gen/myday-hero-bg.png') center / cover no-repeat,
    linear-gradient(120deg, #0B0F1E 0%, #1F1B3A 100%);
}
.myday-hero-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(226,232,240,0.7); font-weight: 600; }
.myday-hero-h1 { margin: 4px 0 2px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.myday-hero-emoji { font-size: 32px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.myday-hero-tag { margin: 0; color: rgba(226,232,240,0.75); font-size: 14px; }
.myday-hero-side { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Personal portrait + PI character overlay on the hero */
.myday-hero-avatar-wrap {
  position: relative;
  width: 88px; height: 88px;
  flex-shrink: 0;
}
.myday-hero-avatar {
  width: 88px; height: 88px;
  border-radius: 22px;
  object-fit: cover;
  background: rgba(255,255,255,.1);
  border: 3px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 24px rgba(15,23,42,.35);
  display: block;
}
.myday-hero-pi {
  position: absolute;
  right: -8px; bottom: -8px;
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 3px;
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(15,23,42,.3);
}
@media (max-width: 720px) {
  .myday-hero-avatar-wrap { width: 64px; height: 64px; }
  .myday-hero-avatar { width: 64px; height: 64px; border-radius: 16px; border-width: 2px; }
  .myday-hero-pi { width: 30px; height: 30px; border-width: 2px; right: -6px; bottom: -6px; }
}
.myday-hero-side .pill .ico { color: currentColor; opacity: .9; }

/* Today's Focus + Priority projects two-up layout */
.myday-duo { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: stretch; }
@media (max-width: 1024px) { .myday-duo { grid-template-columns: 1fr; } }

/* Today's Focus - compact card with icon badge header */
.myday-focus {
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #ECFDF5 55%, #CCFBF1 140%);
  border-left: 4px solid var(--sb-teal-500);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.focus-head { display: flex; align-items: center; gap: 10px; }
.focus-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700));
  color: #fff;
  box-shadow: 0 6px 14px rgba(20,184,166,.3);
}
.focus-ico svg { width: 18px; height: 18px; }
.focus-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--sb-slate-900); letter-spacing: -0.005em; }
.focus-sub { margin: 2px 0 0; }
.focus-body { margin: 2px 0; }
.focus-headline {
  font-size: 15.5px; font-weight: 700;
  margin: 0 0 4px;
  color: var(--sb-slate-900);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.focus-detail {
  margin: 0;
  color: var(--sb-slate-600);
  font-size: 12.5px; line-height: 1.5;
}
.focus-actions { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.focus-actions .btn { font-size: 12px; padding: 6px 10px; }

/* Focus - header streak chip */
.focus-head { display: flex; align-items: center; gap: 10px; }
.focus-head-copy { flex: 1; min-width: 0; }
.focus-streak {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--sb-teal-300);
  border-radius: 999px;
  color: var(--sb-teal-700);
  font-weight: 600;
  flex-shrink: 0;
}
.focus-streak-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sb-ok);
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}

/* Focus - 3-tile stat bar */
.focus-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.focus-stat {
  padding: 10px 8px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--sb-slate-100);
  border-radius: 10px;
  text-align: center;
  backdrop-filter: blur(2px);
}
.focus-stat-n {
  font-size: 22px;
  font-weight: 700;
  color: var(--sb-teal-700);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.focus-stat-n small { font-size: 13px; color: var(--sb-slate-500); font-weight: 600; margin-left: 2px; }
.focus-stat-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sb-slate-500);
  margin-top: 4px;
  font-weight: 600;
}

/* Focus - AI-picked micro-steps */
.focus-steps {
  list-style: none; margin: 2px 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.focus-step {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; line-height: 1.4; color: var(--sb-slate-700);
}
.focus-step-num {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  border: 1.5px solid var(--sb-teal-500);
  color: var(--sb-teal-700);
  font-size: 10.5px; font-weight: 700;
  line-height: 1;
}

/* Focus - PI 'why' callout */
.focus-why {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px;
  background: rgba(20,184,166,.09);
  border: 1px dashed var(--sb-teal-300);
  border-radius: 8px;
  color: var(--sb-teal-700);
  font-size: 11.5px; line-height: 1.4;
}
.focus-why .ico { color: var(--sb-teal-600); margin-top: 2px; flex-shrink: 0; }

/* Priority projects - list of clean KR rows */
.kr-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kr-item {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: stretch;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--sb-slate-100);
  border-radius: 12px;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.kr-item:hover {
  border-color: var(--sb-teal-300);
  transform: translateX(1px);
  box-shadow: var(--sb-shadow-sm);
}
.kr-pri {
  display: grid; place-items: center;
  font-weight: 700; font-size: 11.5px;
  border-radius: 8px;
  color: #fff;
  letter-spacing: -.01em;
}
.kr-pri.pri-1 { background: linear-gradient(135deg, var(--sb-crimson-500), var(--sb-crimson-600)); box-shadow: 0 4px 10px rgba(220,38,38,.2); }
.kr-pri.pri-2 { background: linear-gradient(135deg, #F59E0B, #B45309); box-shadow: 0 4px 10px rgba(245,158,11,.2); }
.kr-pri.pri-3 { background: linear-gradient(135deg, var(--sb-slate-500), var(--sb-slate-700)); }

.kr-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kr-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px;
}
.kr-text {
  font-weight: 600; font-size: 13px;
  color: var(--sb-slate-900);
  line-height: 1.35;
  min-width: 0;
}
.kr-score.pill {
  flex-shrink: 0; font-size: 11px; font-weight: 700;
  font-family: 'JetBrains Mono','SFMono-Regular',Menlo,monospace;
  padding: 2px 8px;
}
.kr-meta {
  font-size: 10.5px; line-height: 1.3;
  color: var(--sb-slate-400);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.kr-progress-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  margin-top: 2px;
}
.kr-progress-row .progress { height: 5px; margin: 0; }
.kr-actual {
  color: var(--sb-slate-700);
  font-variant-numeric: tabular-nums;
}
.kr-actual .muted { color: var(--sb-slate-400); }

/* KPI tiles */
.kpi-tile { padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--sb-slate-200); transition: transform 150ms ease, box-shadow 150ms ease; position: relative; overflow: hidden; }
.kpi-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 12px 12px 0 0; }
.kpi-tile.green::before { background: var(--sb-ok); }
.kpi-tile.amber::before { background: var(--sb-warn); }
.kpi-tile.red::before { background: var(--sb-danger); }
.kpi-tile:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow); }
.kpi-tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kpi-tile-name { font-size: 14px; font-weight: 600; color: var(--sb-slate-900); }
.kpi-tile-value { margin: 8px 0 2px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.kpi-tile .spark { height: 28px; margin: 4px 0 6px; display: block; width: 100%; }
.kpi-tile .progress { height: 5px; }

/* Quote card */
.quote-card { background: linear-gradient(135deg, #fff 0%, #ECFDF5 60%, #CCFBF1 130%); border-left: 4px solid var(--sb-teal-500); overflow: hidden; position: relative; }
.quote-block { position: relative; margin: 8px 0 0; padding: 20px 16px 16px 52px; background: #fff; border-radius: 14px; box-shadow: var(--sb-shadow-sm); }
.quote-mark { position: absolute; top: 14px; left: 14px; width: 28px; height: 28px; color: var(--sb-teal-300); opacity: 0.8; }
.quote-text { margin: 0 0 6px; font-size: 16px; line-height: 1.6; color: var(--sb-slate-800); font-weight: 500; }
.quote-author { font-size: 13px; color: var(--sb-slate-500); font-style: italic; }

/* Tip cards */
.tip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tip-card { padding: 14px 14px 12px; border-radius: 12px; background: var(--sb-slate-50); border: 1px solid var(--sb-slate-200); display: flex; gap: 10px; align-items: flex-start; transition: transform 150ms ease, box-shadow 150ms ease; }
.tip-card:hover { transform: translateY(-1px); box-shadow: var(--sb-shadow-sm); }
.tip-card--leader { background: linear-gradient(135deg, #fff 0%, #ECFDF5 120%); }
.tip-card--mental    { background: linear-gradient(135deg, #fff 0%, #E0E7FF 140%); color: #3730A3; }
.tip-card--physical  { background: linear-gradient(135deg, #fff 0%, #D1FAE5 140%); color: #065F46; }
.tip-card--knowledge { background: linear-gradient(135deg, #fff 0%, #FEF3C7 140%); color: #92400E; }
.tip-card .tip-ico { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.tip-num { width: 24px; height: 24px; border-radius: 8px; background: var(--sb-teal-500); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.tip-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; opacity: 0.8; margin-bottom: 4px; }
.tip-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--sb-slate-800); }
.tip-card--mental .tip-text, .tip-card--physical .tip-text, .tip-card--knowledge .tip-text { color: inherit; }
@media (max-width: 900px) { .tip-grid { grid-template-columns: 1fr; } }

/* Ring row */
.ring-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ring { text-align: center; background: var(--sb-slate-50); border: 1px solid var(--sb-slate-200); border-radius: 14px; padding: 12px; }
.ring-svg { width: 100%; max-width: 140px; height: auto; }
.ring-num { font-size: 22px; font-weight: 700; fill: var(--sb-slate-900); }
.ring-pct { font-size: 9px; fill: var(--sb-slate-500); }
.ring-label { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--sb-slate-700); }
@media (max-width: 900px) { .ring-row { grid-template-columns: repeat(2, 1fr); } }

/* Pulse grid */
.pulse-card .pulse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.pulse-q {
  border: 1px solid var(--sb-slate-200);
  border-radius: 12px;
  padding: 12px;
  background: var(--sb-slate-50);
  margin: 0;
  display: flex; flex-direction: column;
}
.pulse-q-label {
  font-size: 13px; font-weight: 600;
  color: var(--sb-slate-700);
  padding: 0 4px 8px;
  line-height: 1.3;
  /* Reserve enough height for 2 lines so every pulse card's emoji
     scale aligns to the same baseline regardless of label length. */
  min-height: calc(2 * 1.3em + 8px);
}
.pulse-scale {
  display: flex; justify-content: space-between; gap: 4px;
  margin-top: auto; /* pin emoji row to the bottom */
}
.pulse-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; cursor: pointer; font-size: 11px; color: var(--sb-slate-500); }
.pulse-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pulse-face { font-size: 26px; filter: saturate(0.25) opacity(0.55); transition: filter 150ms ease, transform 150ms ease; line-height: 1; }
.pulse-opt:hover .pulse-face { filter: saturate(1) opacity(1); transform: scale(1.15); }
.pulse-opt input:checked ~ .pulse-face { filter: saturate(1) opacity(1); transform: scale(1.25); }
.pulse-opt input:checked ~ .pulse-n { color: var(--sb-teal-700); font-weight: 700; }
.pulse-cta { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
@media (max-width: 900px) { .pulse-card .pulse-grid { grid-template-columns: 1fr; } }

/* Four Hs pillars ======================================================== */
.pillar {
  display: flex; gap: 12px; align-items: center;
  padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--sb-slate-200);
}
.pillar .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--sb-teal-100); color: var(--sb-teal-700); font-size: 22px; }
.pillar .val { margin-left: auto; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: var(--sb-slate-900); }

/* Markdown bodies ======================================================== */
.md-body { font-size: 13.5px; line-height: 1.55; color: var(--sb-slate-800); background: var(--sb-slate-50); padding: 12px 14px; border-radius: 10px; border: 1px solid var(--sb-slate-200); }
.md-body p { margin: 0 0 10px; }
.md-body p:last-child { margin-bottom: 0; }
.md-body strong { color: var(--sb-slate-900); }
.md-body em { color: var(--sb-teal-700); font-style: normal; background: var(--sb-teal-50); padding: 0 3px; border-radius: 3px; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4 { font-size: 14px; font-weight: 700; margin: 12px 0 6px; letter-spacing: -0.01em; color: var(--sb-slate-900); }
.md-body h1:first-child, .md-body h2:first-child, .md-body h3:first-child, .md-body h4:first-child { margin-top: 0; }
.md-body ul, .md-body ol { margin: 6px 0 10px; padding-left: 22px; }
.md-body li { margin: 4px 0; }
.md-body li::marker { color: var(--sb-teal-600); }
.md-body code { background: #EEF2F7; color: var(--sb-crimson-600); padding: 1px 6px; border-radius: 4px; font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace; font-size: 12px; }
.md-body pre { background: var(--sb-slate-900); color: #E2E8F0; padding: 12px; border-radius: 8px; overflow-x: auto; font-size: 12px; }
.md-body pre code { background: transparent; color: inherit; padding: 0; }
.md-body blockquote { border-left: 3px solid var(--sb-teal-500); padding: 4px 10px; margin: 8px 0; color: var(--sb-slate-600); background: #F8FAFC; border-radius: 4px; }
.md-body a { color: var(--sb-teal-700); text-decoration: underline; }
.md-body hr { border: 0; border-top: 1px solid var(--sb-slate-200); margin: 10px 0; }

/* Chat bubbles already have bg; tighten md-body inside them */
.bubble.bot.md-body { background: var(--sb-slate-100); }
.bubble.bot.md-body { border: 0; padding: 10px 14px; }
.bubble.bot.md-body p { margin: 0 0 8px; }
.bubble.bot.md-body p:last-child { margin: 0; }
.bubble.user { white-space: pre-wrap; }

/* HTMX animations ======================================================== */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-flex; }
.htmx-swapping { opacity: 0; transition: opacity 140ms ease; }
.htmx-settling { opacity: 1; transition: opacity 180ms ease; }

/* Mobile ================================================================= */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 0; left: -100%; width: 80vw; max-width: 280px; transition: left 200ms ease; z-index: 100; }
  .sidebar.open { left: 0; }
  .topbar .menu-toggle { display: inline-flex; }
  .page { padding: 16px; }
}

.menu-toggle { display: none; background: none; border: 1px solid var(--sb-slate-200); border-radius: 10px; padding: 6px 10px; cursor: pointer; }

/* Reduced motion ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Skeleton ============================================================== */
.skeleton { background: linear-gradient(90deg, var(--sb-slate-100), var(--sb-slate-200), var(--sb-slate-100)); background-size: 200% 100%; animation: skeleton 1.3s ease-in-out infinite; border-radius: 6px; }
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Small utils ============================================================ */
.muted { color: var(--sb-slate-500); }
.mono  { font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace; font-variant-numeric: tabular-nums; }
.stack-2 > * + * { margin-top: 8px; }
.stack-3 > * + * { margin-top: 12px; }
.stack-4 > * + * { margin-top: 18px; }
.flex { display: flex; gap: 10px; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.space-y > * + * { margin-top: 18px; }
.hidden { display: none !important; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; }
.text-lg { font-size: 18px; }
.font-700 { font-weight: 700; }
.font-600 { font-weight: 600; }

/* ========================================================================
   AI Assistant redesign
   ======================================================================== */

.assistant-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.assistant-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.assistant-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Responsive - the shell already keeps a 248px sidebar until 900px, so
   anything below ~1280px can't comfortably fit main + 340px rail. Stack
   the rail below and reflow it as a card grid so it doesn't waste height. */
@media (max-width: 1280px) {
  .assistant-layout { grid-template-columns: 1fr; }
  .assistant-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    align-items: start;
  }
  .assistant-rail .rail-card { min-width: 0; }
}
@media (max-width: 720px) {
  .assistant-rail { grid-template-columns: 1fr; }
}

/* Coach hero ------------------------------------------------------------ */
.coach-hero {
  position: relative;
  background: linear-gradient(135deg, #0F766E 0%, #14B8A6 55%, #5EEAD4 100%);
  border-radius: var(--sb-radius);
  padding: 22px 26px;
  color: #fff;
  box-shadow: var(--sb-shadow);
  overflow: hidden;
  isolation: isolate;
}
.coach-hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,118,110,.15) 0%, rgba(15,118,110,.30) 100%),
    url('/static/img/gen/coach-hero-bg.png') center / cover no-repeat;
  z-index: -1;
}
.coach-hero-body { display: flex; gap: 20px; align-items: center; }
.coach-mascot {
  position: relative;
  width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #E6FFFB 70%);
  box-shadow: 0 12px 26px rgba(15,23,42,.35), inset 0 0 0 3px rgba(255,255,255,.6);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.coach-mascot img { width: 64px; height: 64px; object-fit: contain; }
.coach-mascot-dot {
  position: absolute; right: 3px; bottom: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--sb-ok);
  box-shadow: 0 0 0 3px #fff;
  animation: coach-pulse 2.4s ease-in-out infinite;
}
@keyframes coach-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 0 rgba(16,185,129,.6); }
  50%      { box-shadow: 0 0 0 3px #fff, 0 0 0 8px rgba(16,185,129,0); }
}
.coach-hero-copy { flex: 1; min-width: 0; }
.coach-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  opacity: .85; font-weight: 600;
}
.coach-title { color: #fff !important; font-size: 22px; letter-spacing: -0.015em; margin: 2px 0 4px; }
.coach-subtitle { margin: 0 0 10px; font-size: 13.5px; opacity: .93; line-height: 1.55; }
.coach-subtitle strong { color: #fff; }
.coach-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.coach-chips .pill {
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px); font-weight: 500;
}
.coach-chips .pill.red {
  background: rgba(239,68,68,.92); color: #fff; border-color: rgba(255,255,255,.4);
}
.coach-chips .pill .dot { background: currentColor; }

/* Quick prompt cards ---------------------------------------------------- */
/* Quick prompts - compact chip-style: icon + label, blurb via title tooltip */
.qp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qp-card {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  background: #fff;
  border: 1px solid var(--sb-slate-200);
  border-radius: 999px;
  box-shadow: var(--sb-shadow-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}
.qp-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--sb-shadow);
  border-color: var(--sb-teal-300);
  background: var(--sb-teal-50);
}
.qp-card:active { transform: translateY(0); }
.qp-icon {
  width: 24px; height: 24px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--sb-teal-50);
  color: var(--sb-teal-700);
  border-radius: 50%;
}
.qp-icon .ico { width: 13px; height: 13px; }
.qp-card:hover .qp-icon { background: #fff; }
.qp-text { min-width: 0; }
.qp-text strong {
  font-size: 12.5px; color: var(--sb-slate-900);
  white-space: nowrap;
}

/* Chat card ------------------------------------------------------------ */
.chat-card { padding: 14px 18px 16px; }
.chat-card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sb-slate-100);
  margin-bottom: 12px;
}
.chat-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sb-slate-700); }
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sb-ok);
  position: relative;
}
.pulse-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: var(--sb-ok); opacity: .35;
  animation: dot-pulse 2s ease-out infinite;
}
@keyframes dot-pulse {
  0% { transform: scale(.6); opacity: .5; }
  100% { transform: scale(2); opacity: 0; }
}

/* Chat list + bubbles. Keep `.bubble` and `.bubble.user/.bubble.bot`
   alongside the new `.chat-bubble` for test compatibility. */
.chat {
  display: flex; flex-direction: column; gap: 14px;
  padding: 8px 2px 10px;
  /* Fixed-size viewport so the chat box looks identical whether empty or full */
  height: clamp(420px, 58vh, 640px);
  min-height: 420px;
  max-height: 640px;
  overflow-y: auto;
  scroll-behavior: smooth;
  background:
    linear-gradient(180deg, rgba(248,250,252,.0) 0, rgba(248,250,252,.0) 90%, rgba(255,255,255,1) 100%);
}
.chat-bubble {
  display: flex; gap: 10px; align-items: flex-end;
  max-width: 100%;
  animation: bubble-in 220ms cubic-bezier(.2,.9,.3,1.2);
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-bubble.bot  { align-self: flex-start;  flex-direction: row; }
.chat-bubble.user { align-self: flex-end;    flex-direction: row-reverse; }

/* Neutralise the legacy `.bubble` padding/background when combined with .chat-bubble */
.bubble.chat-bubble,
.bubble.user.chat-bubble,
.bubble.bot.chat-bubble {
  padding: 0;
  background: transparent;
  color: inherit;
  max-width: 100%;
  border-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.chat-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: var(--sb-shadow-sm);
  background: #fff;
  font-size: 13px; font-weight: 700;
  letter-spacing: .02em;
}
.chat-avatar.bot-avatar {
  background: linear-gradient(135deg, #CCFBF1, #5EEAD4);
  padding: 4px;
}
.chat-avatar.bot-avatar img { width: 100%; height: 100%; object-fit: contain; }
.chat-avatar.user-avatar {
  background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700));
  color: #fff;
}

.chat-bubble .chat-body {
  max-width: min(620px, calc(100% - 44px));
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14px; line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}
.chat-bubble.bot .chat-body {
  background: var(--sb-slate-100);
  color: var(--sb-slate-900);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--sb-slate-100);
}
.chat-bubble.user .chat-body {
  background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-600));
  color: #fff;
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
  box-shadow: 0 6px 14px rgba(20,184,166,.22);
}
.chat-bubble.bot .chat-body.md-body {
  background: var(--sb-slate-100); border: 1px solid var(--sb-slate-100); padding: 11px 14px;
}

/* Legacy `.bubble` fallback for chat_exchange.html partial */
.bubble:not(.chat-bubble) {
  max-width: 72%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55;
}
.bubble:not(.chat-bubble).user { background: var(--sb-teal-500); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble:not(.chat-bubble).bot  { background: var(--sb-slate-100); color: var(--sb-slate-900); align-self: flex-start; border-bottom-left-radius: 4px; }

/* Typing dots */
.typing { display: inline-flex; gap: 4px; padding: 6px 0; align-items: center; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sb-slate-400);
  animation: typing-bob 1.1s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .30s; }
@keyframes typing-bob {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

/* Streaming cursor */
.stream-cursor {
  display: inline-block; width: 7px; height: 14px; vertical-align: -2px; margin-left: 2px;
  background: var(--sb-teal-600);
  animation: stream-blink 1s step-end infinite;
}
@keyframes stream-blink { 50% { opacity: 0; } }

/* Bubble actions (copy) */
.bubble-actions {
  display: flex; gap: 6px; margin-top: 6px; opacity: 0; transition: opacity 150ms ease;
}
.chat-bubble:hover .bubble-actions { opacity: 1; }
.bubble-actions button {
  background: #fff; border: 1px solid var(--sb-slate-200); color: var(--sb-slate-600);
  border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer;
}
.bubble-actions button:hover { background: var(--sb-slate-50); color: var(--sb-slate-900); }

/* Composer ------------------------------------------------------------- */
.composer {
  margin-top: 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  align-items: end;
  background: #fff;
  border: 1px solid var(--sb-slate-200);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--sb-shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.composer:focus-within {
  border-color: var(--sb-teal-500);
  box-shadow: 0 0 0 4px rgba(20,184,166,.12);
}
.composer-input-wrap { display: flex; flex-direction: column; min-width: 0; }
.composer-input {
  border: 0; outline: none; resize: none;
  font: inherit; font-size: 14px; line-height: 1.5;
  padding: 6px 4px;
  background: transparent;
  color: var(--sb-slate-900);
  min-height: 22px; max-height: 160px;
  width: 100%;
}
.composer-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2px; gap: 10px;
}
.kbd-hint kbd {
  background: var(--sb-slate-100); border: 1px solid var(--sb-slate-200); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; font-family: inherit; font-size: 10px; color: var(--sb-slate-600);
}
.composer-send {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  align-self: stretch;
}
.composer-send .send-ico { width: 14px; height: 14px; }
.composer-send:disabled {
  opacity: .6; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Rail cards ----------------------------------------------------------- */
.rail-card { padding: 14px 16px; }
.rail-card .card-head { margin-bottom: 10px; }

/* Context panel -------------------------------------------------------- */
.ctx-panel { display: flex; flex-direction: column; gap: 12px; }

.ctx-user { display: flex; gap: 10px; align-items: center; }
.ctx-avatar {
  width: 42px; height: 42px; border-radius: 10px; object-fit: cover;
  background: var(--sb-slate-100);
  box-shadow: var(--sb-shadow-sm);
}
.ctx-user-meta { min-width: 0; }
.ctx-user-name { font-weight: 600; color: var(--sb-slate-900); font-size: 13.5px; }

.ctx-refprofile {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px;
  background: linear-gradient(90deg, var(--sb-teal-50), #fff);
  border: 1px solid var(--sb-teal-100);
  border-radius: 10px;
}
.ref-star { font-size: 18px; }
.ctx-refprofile .pill { font-size: 10px; padding: 1px 6px; margin-left: 4px; }

.ctx-drives {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--sb-slate-50);
  border-radius: 10px;
  border: 1px solid var(--sb-slate-100);
}
.ctx-drives-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.drive-row {
  display: grid;
  grid-template-columns: 18px 72px 1fr 22px;
  gap: 8px; align-items: center;
  font-size: 12px;
}
.drive-letter {
  text-align: center; font-weight: 700; font-size: 12px;
  color: var(--sb-teal-700);
  background: var(--sb-teal-50);
  border-radius: 4px; padding: 1px 0;
}
.drive-name { color: var(--sb-slate-600); }
.drive-bar {
  position: relative; height: 6px; background: var(--sb-slate-200);
  border-radius: 999px; overflow: hidden;
}
.drive-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--sb-teal-500), var(--sb-teal-700));
}
.drive-bar.drive-crim > span { background: linear-gradient(90deg, var(--sb-crimson-500), var(--sb-crimson-600)); }
.drive-bar.drive-warn > span { background: linear-gradient(90deg, #F59E0B, #B45309); }
.drive-bar.drive-ok   > span { background: linear-gradient(90deg, #10B981, #047857); }
.drive-bar.drive-info > span { background: linear-gradient(90deg, #3B82F6, #1D4ED8); }
.drive-val { text-align: right; color: var(--sb-slate-700); }

.ctx-mgap {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--sb-slate-200);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--sb-slate-600); font-size: 12px;
}
.ctx-mgap.is-warn { color: var(--sb-crimson-600); font-weight: 600; }

.ctx-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.ctx-stats:has(.ctx-stat:nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
.ctx-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px;
  background: #fff; border: 1px solid var(--sb-slate-200);
  border-radius: 10px;
  text-align: center;
}
.ctx-stat-ico { font-size: 16px; line-height: 1; }
.ctx-stat-num { font-size: 14px; font-weight: 700; color: var(--sb-slate-900); line-height: 1.1; }

.ctx-alert {
  padding: 10px 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 10px;
}
.ctx-alert .pill .dot { background: var(--sb-crimson-500); }

/* Usage ring ----------------------------------------------------------- */
.usage-card .card-title { font-size: 14px; }
.usage-ring-wrap {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  margin: 6px 0 10px;
}
.usage-ring { display: block; }
.usage-ring .ring-bg {
  fill: none; stroke: var(--sb-slate-100); stroke-width: 8;
}
.usage-ring .ring-fg {
  fill: none; stroke: url(#ring-grad); stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 40px 40px;
  transition: stroke-dasharray 400ms ease;
  /* Fallback colour if gradient is not injected */
  stroke: var(--sb-teal-500);
}
.usage-figures {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.usage-pct { font-size: 20px; font-weight: 700; color: var(--sb-slate-900); line-height: 1; }
.usage-pct small { font-size: 12px; color: var(--sb-slate-500); }

.usage-rows { display: flex; flex-direction: column; gap: 4px; }
.usage-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--sb-slate-600);
  padding: 4px 2px;
}
.usage-row + .usage-row { border-top: 1px dashed var(--sb-slate-100); }

/* Recent sessions ------------------------------------------------------ */
.recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.recent-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 120ms ease;
}
.recent-item:hover { background: var(--sb-slate-50); }
.recent-kind {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--sb-teal-50);
  display: grid; place-items: center;
  flex-shrink: 0; font-size: 13px;
}
.recent-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recent-title {
  font-size: 12.5px; color: var(--sb-slate-800);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}

/* Safety card ---------------------------------------------------------- */
.safety-card {
  background: linear-gradient(180deg, #fff, var(--sb-slate-50));
}
.safety-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.safety-list li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; color: var(--sb-slate-700); line-height: 1.4;
  padding: 4px 2px;
}
.safety-ico {
  width: 26px; height: 26px; border-radius: 6px;
  background: #fff; border: 1px solid var(--sb-slate-200);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--sb-teal-700);
}
.safety-ico .ico { width: 14px; height: 14px; }

/* ========================================================================
   Inline SVG icons (sprite `use`) - unified sizing + colour
   ======================================================================== */

.ico {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: -2px;
}
.ico-sm { width: 13px; height: 13px; }
.ico-md { width: 18px; height: 18px; }
.ico-lg { width: 22px; height: 22px; }

/* Pill icons inherit colour. Pills become inline-flex so icons line up. */
.pill { display: inline-flex; align-items: center; gap: 5px; }
.pill .ico { opacity: .9; }

/* Ghost danger variant for Clear-history */
.btn.ghost.danger-ghost { color: var(--sb-crimson-600); border-color: var(--sb-crimson-50); }
.btn.ghost.danger-ghost:hover {
  background: var(--sb-crimson-50); border-color: var(--sb-crimson-500); color: var(--sb-crimson-600);
}
.btn { display: inline-flex; align-items: center; gap: 6px; }
.btn .ico { margin-right: 0; }
.inline-form { display: inline; margin: 0; padding: 0; }

/* ========================================================================
   Personal avatar - chat user bubbles + hero
   ======================================================================== */

.chat-avatar.user-avatar {
  overflow: hidden;
  padding: 0;
  background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700));
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.12);
}
.chat-avatar.user-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  display: block;
}

.coach-hero-body { position: relative; }
.coach-hero-user {
  position: absolute; right: -6px; top: -6px;
  width: 56px; height: 56px; border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.75);
  box-shadow: 0 8px 22px rgba(15,23,42,.28);
  background: rgba(255,255,255,.2);
}
.coach-hero-user img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .coach-hero-user { display: none; } }

/* ========================================================================
   Context panel - person portrait with PI character chip overlay
   ======================================================================== */

.ctx-avatar-wrap { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.ctx-avatar-wrap .ctx-avatar {
  width: 48px; height: 48px; border-radius: 12px;
  object-fit: cover;
  box-shadow: var(--sb-shadow-sm);
  background: var(--sb-slate-100);
  border: 1px solid var(--sb-slate-200);
}
.ctx-avatar-chip {
  position: absolute; right: -6px; bottom: -6px;
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.18);
}

.ctx-stat-ico {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; color: var(--sb-teal-700);
}

/* Ref-profile row → swap star emoji for SVG inside a rounded teal chip */
.ref-star {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700));
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(20,184,166,.30);
}

/* Recent-activity card kind chip */
.recent-kind { color: var(--sb-teal-700); }
.recent-kind .ico { width: 14px; height: 14px; }

/* ========================================================================
   Chat history divider
   ======================================================================== */

.chat-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 6px;
  color: var(--sb-slate-400);
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
}
.chat-divider::before,
.chat-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sb-slate-200), transparent);
}
.chat-divider span {
  padding: 3px 10px;
  background: #fff;
  border-radius: 999px;
  border: 1px solid var(--sb-slate-200);
  color: var(--sb-slate-500);
  font-weight: 600;
}

/* Coach-hero chips - white text + translucent background; icons inherit */
.coach-chips .pill .ico { color: currentColor; opacity: .9; }

/* ========================================================================
   Assistant - responsive polish for tablets + phones
   ======================================================================== */

/* Tablet / narrow desktop - the rail has already stacked, tune the main area */
@media (max-width: 1024px) {
  .coach-hero { padding: 18px 20px; }
  .coach-hero-body { gap: 16px; }
  .coach-mascot { width: 64px; height: 64px; }
  .coach-mascot img { width: 52px; height: 52px; }
  .coach-title { font-size: 20px; }
  .coach-subtitle { font-size: 13px; margin-bottom: 8px; }
  .coach-hero-user { width: 48px; height: 48px; top: -4px; right: -2px; }
  .chat-bubble .chat-body { max-width: min(620px, calc(100% - 44px)); }
  .chat { height: clamp(380px, 52vh, 560px); min-height: 380px; max-height: 560px; }
}

/* Small tablet / large phone - compact hero, wider chat bubbles */
@media (max-width: 768px) {
  .coach-hero { padding: 14px 16px; }
  .coach-hero-body { gap: 12px; flex-wrap: wrap; }
  .coach-eyebrow { font-size: 10px; }
  .coach-title { font-size: 18px; }
  .coach-subtitle { font-size: 12.5px; }
  .coach-chips { gap: 4px; }
  .coach-chips .pill { font-size: 10px; padding: 3px 8px; }
  .coach-hero-user { display: none; }
  .chat-card { padding: 12px 14px 14px; }
  .chat-card-head { flex-wrap: wrap; gap: 6px; }
  .chat-status { font-size: 12px; }
  .chat { height: clamp(360px, 58vh, 520px); min-height: 360px; max-height: 520px; gap: 12px; }
  .chat-bubble { gap: 8px; }
  .chat-avatar { width: 28px; height: 28px; }
  .chat-avatar.bot-avatar img { width: 100%; height: 100%; }
  .chat-bubble .chat-body {
    max-width: calc(100% - 36px);
    font-size: 13.5px;
    padding: 10px 12px;
  }
  .composer { padding: 8px 10px; gap: 8px; }
  .composer-meta { flex-wrap: wrap; }
  .composer-send { padding: 10px 14px; }
  .composer-send .send-label { display: none; }
  .composer-send .ico { margin: 0; }
  .kbd-hint { display: none; }
}

/* Phone - stack composer rows so the send button goes full-width below the input */
@media (max-width: 520px) {
  .assistant-layout { gap: 12px; }
  .composer { grid-template-columns: 1fr; }
  .composer-send { justify-content: center; }
  .composer-send .send-label { display: inline; }
  .chat-card-head .flex { width: 100%; }
  .chat-card-head .btn.sm { flex: 1; justify-content: center; }
  .coach-chips .pill { font-size: 10px; }
  .ctx-stats { grid-template-columns: repeat(4, 1fr); }
}

/* Tiny screens - make sure the chat bubble body never hits the viewport edge */
@media (max-width: 360px) {
  .chat-bubble .chat-body { max-width: calc(100% - 30px); padding: 8px 10px; font-size: 13px; }
  .chat-avatar { width: 24px; height: 24px; }
  .chat-divider { font-size: 9px; }
}

/* ========================================================================
   /admin redesign - hero, user cards w/ avatars, role pills, edit modal
   ======================================================================== */

.admin-hero {
  position: relative;
  border-radius: var(--sb-radius);
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #0F766E 150%);
  color: #fff;
  padding: 24px 28px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--sb-shadow);
}
.admin-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15,23,42,.15) 0%, rgba(15,23,42,.45) 100%),
    url('/static/img/gen/admin-hero-bg.png') center / cover no-repeat;
}
.admin-hero-body {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
}
.admin-hero-logo {
  width: 60px; height: 60px; border-radius: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.admin-hero-logo img { width: 40px; height: 40px; object-fit: contain; }
.admin-hero-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  opacity: .7; font-weight: 600;
}
.admin-hero-title {
  margin: 2px 0 8px; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1;
  color: #fff;
}
.admin-hero-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-hero-meta .pill {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  font-weight: 500;
}
.admin-hero-meta .pill .ico { opacity: .85; }

.admin-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.ah-stat {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  min-width: 108px;
}
.ah-stat-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700));
  color: #fff;
  flex-shrink: 0;
}
.ah-stat-ico-crim { background: linear-gradient(135deg, var(--sb-crimson-500), var(--sb-crimson-600)); }
.ah-stat-ico-warn { background: linear-gradient(135deg, #F59E0B, #B45309); }
.ah-stat-ico-info { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.ah-stat-num { font-size: 20px; font-weight: 700; line-height: 1.1; color: #fff; }
.ah-stat-label { font-size: 11px; opacity: .75; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 1024px) {
  .admin-hero-body { grid-template-columns: 1fr; gap: 14px; }
  .admin-hero-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .admin-hero { padding: 18px 20px; }
  .admin-hero-title { font-size: 22px; }
  .admin-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .ah-stat { padding: 8px 10px; }
  .ah-stat-num { font-size: 18px; }
}

/* Users section filters -------------------------------------------------- */

.admin-users-head { flex-wrap: wrap; gap: 10px; }
.admin-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-search-wrap { position: relative; }
.admin-search {
  padding-left: 34px;
  min-width: 240px;
}
.admin-search-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--sb-slate-400); pointer-events: none;
}
.admin-role-filter { min-width: 160px; }

.role-dist {
  display: flex; gap: 2px;
  background: var(--sb-slate-100);
  border-radius: 999px;
  padding: 3px;
  margin: 14px 0 16px;
  overflow: hidden;
}
.role-dist-seg {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  min-width: 0;
  overflow: hidden;
}
.role-dist-seg .role-dist-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.role-dist-seg .role-dist-n { opacity: .85; font-size: 10px; }
.role-dist .role-crim  { background: linear-gradient(90deg, var(--sb-crimson-500), var(--sb-crimson-600)); }
.role-dist .role-teal  { background: linear-gradient(90deg, var(--sb-teal-500), var(--sb-teal-700)); }
.role-dist .role-info  { background: linear-gradient(90deg, #3B82F6, #1D4ED8); }
.role-dist .role-slate { background: linear-gradient(90deg, var(--sb-slate-500), var(--sb-slate-700)); }

/* Admin users table ------------------------------------------------------ */

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; }
.admin-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--sb-slate-500); font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sb-slate-100);
}
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sb-slate-100);
  vertical-align: middle;
}
.admin-table tbody tr:hover { background: var(--sb-slate-50); }
.admin-actions-head { text-align: right; width: 80px; }
.admin-actions-cell { text-align: right; }

.admin-person {
  display: flex; align-items: center; gap: 12px;
}
.admin-avatar-wrap { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.admin-avatar {
  width: 42px; height: 42px; border-radius: 12px;
  object-fit: cover;
  box-shadow: var(--sb-shadow-sm);
  background: var(--sb-slate-100);
  border: 1px solid var(--sb-slate-200);
}
.admin-avatar-chip {
  position: absolute; right: -5px; bottom: -5px;
  width: 20px; height: 20px; border-radius: 50%;
  object-fit: contain;
  background: #fff; padding: 1px;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.18);
}
.admin-name { font-weight: 600; font-size: 14px; color: var(--sb-slate-900); }
.admin-email { font-size: 11.5px; }

.admin-refprofile {
  display: flex; align-items: center; gap: 8px;
}
.admin-ref-pi {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sb-slate-50); padding: 2px;
  object-fit: contain;
  border: 1px solid var(--sb-slate-200);
}

/* Role-coloured pills */
.role-pill {
  font-size: 11px; font-weight: 600;
  border: 1px solid transparent;
}
.role-pill.role-super_admin { background: var(--sb-crimson-50); color: var(--sb-crimson-600); border-color: #FCA5A5; }
.role-pill.role-org_admin   { background: var(--sb-teal-50);    color: var(--sb-teal-700);    border-color: var(--sb-teal-300); }
.role-pill.role-consultant  { background: #DBEAFE;              color: #1E40AF;                border-color: #93C5FD; }
.role-pill.role-team_member { background: var(--sb-slate-100);  color: var(--sb-slate-700);   border-color: var(--sb-slate-300); }

.admin-edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
}

.admin-empty-state { padding: 24px; text-align: center; }

/* Audit + notifications cards ------------------------------------------- */

.audit-table th,
.audit-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--sb-slate-100);
}
.audit-actor { display: flex; align-items: center; gap: 6px; }
.audit-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover;
  background: var(--sb-slate-100);
  border: 1px solid var(--sb-slate-200);
}
.audit-action { font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.audit-action-login   { background: #DBEAFE; color: #1E40AF; }
.audit-action-logout  { background: var(--sb-slate-100); color: var(--sb-slate-700); }
.audit-action-user    { background: var(--sb-teal-50); color: var(--sb-teal-700); }
.audit-action-kpi     { background: #D1FAE5; color: #065F46; }
.audit-action-okr     { background: #FEF3C7; color: #92400E; }
.audit-action-mode1   { background: var(--sb-teal-50); color: var(--sb-teal-700); }
.audit-action-mode2   { background: var(--sb-teal-50); color: var(--sb-teal-700); }
.audit-action-mode3   { background: var(--sb-crimson-50); color: var(--sb-crimson-600); }
.audit-action-pi_upload { background: #EDE9FE; color: #5B21B6; }
.audit-action-assistant { background: #E0F2FE; color: #0369A1; }

.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-item {
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px 10px 20px;
  border-radius: 10px;
}
.notif-item + .notif-item { border-top: 1px solid var(--sb-slate-100); }
.notif-item.is-unread { background: linear-gradient(90deg, var(--sb-teal-50), transparent 70%); }
.notif-dot {
  position: absolute; left: 8px; top: 16px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sb-slate-300);
}
.notif-item.is-unread .notif-dot { background: var(--sb-teal-500); }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: 13px; color: var(--sb-slate-900); }
.notif-kind { font-size: 10px; letter-spacing: .02em; flex-shrink: 0; }

/* ========================================================================
   Edit-user modal (native <dialog>)
   ======================================================================== */

dialog.edit-modal {
  border: 0;
  padding: 0;
  border-radius: 16px;
  width: 520px; max-width: calc(100vw - 32px);
  box-shadow: 0 30px 80px rgba(15,23,42,.35), 0 10px 20px rgba(15,23,42,.12);
  background: #fff;
  color: var(--sb-slate-900);
}
dialog.edit-modal::backdrop {
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
}
dialog.edit-modal[open] {
  animation: edit-modal-in 220ms cubic-bezier(.2,.9,.3,1.2);
}
@keyframes edit-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

.edit-form { display: flex; flex-direction: column; }

.edit-modal-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--sb-slate-100);
  background: linear-gradient(180deg, var(--sb-slate-50), #fff);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
}
.edit-modal-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.edit-modal-avatar-wrap { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.edit-modal-avatar {
  width: 48px; height: 48px; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--sb-slate-200);
  background: var(--sb-slate-100);
}
.edit-modal-chip {
  position: absolute; right: -6px; bottom: -6px;
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: contain; padding: 2px;
  background: #fff; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.18);
}
.edit-modal-title { margin: 0; font-size: 16px; letter-spacing: -0.01em; font-weight: 700; color: var(--sb-slate-900); }
.edit-modal-close {
  background: none; border: 0; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--sb-slate-500);
}
.edit-modal-close:hover { background: var(--sb-slate-100); color: var(--sb-slate-900); }

.edit-modal-body {
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 12px; color: var(--sb-slate-600); font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.field-hint {
  background: var(--sb-slate-50);
  border: 1px dashed var(--sb-slate-200);
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.4;
}

.edit-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--sb-slate-100);
  background: var(--sb-slate-50);
  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
}

/* Tiny helper: screen-reader-only */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   AI loading shimmer - used anywhere an HTMX fragment lazy-loads
   an OpenAI-backed card ("Personalising for you…")
   ============================================================ */
.ai-loading {
  position: relative;
  margin: 14px 0;
  padding: 18px 20px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #F0FDFA 0%, #F5F3FF 100%);
  border: 1px solid rgba(20,184,166,0.22);
  overflow: hidden;
  color: var(--sb-slate-700);
  min-height: 108px;
}
.ai-loading.htmx-request { opacity: 1; }
.ai-loading.ai-loading--compact { padding: 14px 16px; min-height: 88px; }
.ai-loading-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.55) 50%,
    transparent 65%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: ai-shimmer 1.8s linear infinite;
  pointer-events: none;
}
@keyframes ai-shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
.ai-loading-head {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--sb-slate-900); margin-bottom: 4px;
  position: relative; z-index: 1;
}
.ai-loading-head strong { font-weight: 700; letter-spacing: -0.01em; }
.ai-loading-spark {
  width: 24px; height: 24px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: linear-gradient(135deg, #14B8A6, #8B5CF6);
  color: #fff;
  box-shadow: 0 4px 10px rgba(20,184,166,0.3);
  animation: ai-spark-spin 3s linear infinite;
}
.ai-loading-spark .ico { width: 12px; height: 12px; color: #fff; }
@keyframes ai-spark-spin {
  from { transform: rotate(0deg);   }
  50%  { transform: rotate(180deg) scale(1.15); }
  to   { transform: rotate(360deg); }
}
.ai-loading-sub {
  margin: 0; font-size: 12.5px; color: var(--sb-slate-600);
  line-height: 1.5;
  position: relative; z-index: 1;
  transition: opacity 260ms ease;
}
.ai-loading-sub.is-swap { opacity: 0; }
.ai-loading-dots {
  display: inline-flex; gap: 4px; margin-top: 10px;
  position: relative; z-index: 1;
}
.ai-loading-dots span {
  width: 7px; height: 7px; border-radius: 999px;
  background: linear-gradient(135deg, #14B8A6, #0D9488);
  animation: ai-dot 1.2s ease-in-out infinite;
}
.ai-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-loading-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes ai-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1.1); opacity: 1;   }
}
.focus-ai-ready { animation: ai-fade-in 360ms ease; }
@keyframes ai-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   KPI / OKR page - redesigned
   ========================================================================== */

/* Card titles contain inline SVGs - align them vertically */
.card-title { display: inline-flex; align-items: center; gap: 8px; }
.card-title .ico { color: var(--sb-teal-600); }

.input.sm { padding: 6px 10px; font-size: 12.5px; }
.dot.green  { background: #10B981; }
.dot.amber  { background: #F59E0B; }
.dot.red    { background: #EF4444; }
.pill .dot  { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }

/* KPI health split (card 1) */
.kpi-status-stack {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  margin-top: auto; background: var(--sb-slate-100);
}
.kpi-status-seg { height: 100%; transition: width 400ms ease; }
.kpi-status-seg.green { background: #10B981; }
.kpi-status-seg.amber { background: #F59E0B; }
.kpi-status-seg.red   { background: #EF4444; }
.kpi-status-legend {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 6px; font-size: 11px; color: var(--sb-slate-600); font-weight: 600;
}
.kpi-status-legend .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; margin-right: 3px; }
.kpi-status-legend span { display: inline-flex; align-items: center; }

/* 5-point quality legend */
.q-legend {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto;
  font-size: 10.5px; color: var(--sb-slate-600);
}
.q-legend span {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--sb-slate-100); padding: 3px 7px; border-radius: 999px;
  border: 1px solid var(--sb-slate-200);
}
.q-legend .ico { width: 11px; height: 11px; color: var(--sb-slate-500); }

/* BSC dimension row */
.bsc-card {
  display: block; text-decoration: none;
  background: #fff; border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid var(--sb-slate-200);
  box-shadow: var(--sb-shadow-sm);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  border-top: 3px solid var(--bsc-c, var(--sb-teal-500));
}
.bsc-card:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow); }
.bsc-card.is-active { border-color: var(--bsc-c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bsc-c) 30%, transparent); }
.bsc-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bsc-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--bsc-c) 10%, transparent);
}
.bsc-icon .ico { width: 16px; height: 16px; }
.bsc-card-head strong { color: var(--sb-slate-900); font-size: 14px; flex: 1; }
.bsc-health { display: flex; flex-direction: column; gap: 6px; }
.bsc-bar {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--sb-slate-100);
}
.bsc-bar .seg { height: 100%; }
.bsc-bar .seg.green { background: #10B981; }
.bsc-bar .seg.amber { background: #F59E0B; }
.bsc-bar .seg.red   { background: #EF4444; }
.bsc-meta { display: flex; align-items: baseline; justify-content: space-between; }

/* KPI filter bar */
.kpi-filter-bar { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--sb-slate-200);
  color: var(--sb-slate-700); font-size: 12px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.chip:hover { border-color: var(--sb-teal-500); color: var(--sb-teal-700); transform: translateY(-1px); }
.chip.is-on { background: var(--sb-teal-600); color: #fff; border-color: var(--sb-teal-600); }
.chip.is-on .muted { color: rgba(255,255,255,0.75); }
.chip-status-green { border-color: #A7F3D0; }
.chip-status-amber { border-color: #FCD34D; }
.chip-status-red   { border-color: #FCA5A5; }
.chip-clear { background: var(--sb-slate-100); color: var(--sb-slate-600); }

/* KPI list - card rows */
.kpi-list { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow-y: auto; padding-right: 4px; }
.kpi-card {
  border: 1px solid var(--sb-slate-200); border-radius: 12px;
  padding: 10px 12px; background: #fff;
  border-left: 3px solid var(--sb-slate-300);
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.kpi-card:hover { box-shadow: var(--sb-shadow-sm); transform: translateY(-1px); }
.kpi-card--green { border-left-color: #10B981; }
.kpi-card--amber { border-left-color: #F59E0B; }
.kpi-card--red   { border-left-color: #EF4444; }
.kpi-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.kpi-name-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1; }
.kpi-name { color: var(--sb-slate-900); font-size: 13.5px; }
.bsc-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  white-space: nowrap;
}
.bsc-tag .ico { width: 11px; height: 11px; }
.kpi-card-body {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
}
.kpi-progress-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi-progress-wrap .progress { height: 6px; }
.kpi-nums { display: flex; gap: 6px; font-size: 11.5px; color: var(--sb-slate-700); }
.kpi-edit { display: flex; gap: 4px; margin: 0; }
.kpi-edit .input { width: 76px; padding: 4px 8px; font-size: 12px; }
.kpi-card-foot {
  margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--sb-slate-100);
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.kpi-card-foot span { display: inline-flex; align-items: center; gap: 4px; }
.kpi-card-foot .ico { color: var(--sb-slate-400); }

/* Add-form polish */
.add-form { border: 1px dashed var(--sb-slate-200); padding: 12px; border-radius: 10px; background: var(--sb-slate-50); }
.add-form .row { gap: 8px; }
.add-form .input { min-width: 0; flex: 1; }

/* OKR cascade tree */
.okr-tree { display: flex; flex-direction: column; gap: 10px; max-height: 720px; overflow-y: auto; padding-right: 4px; }
.okr-node {
  border-radius: 12px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--sb-slate-200);
  box-shadow: var(--sb-shadow-sm);
  border-left: 4px solid var(--sb-slate-400);
}
.okr-level-ceo  { border-left-color: #14B8A6; background: linear-gradient(90deg, #E6FFFB 0%, #fff 40%); }
.okr-level-dept { border-left-color: #3B82F6; }
.okr-level-team { border-left-color: #8B5CF6; }
.okr-node.depth-1 { margin-left: 16px; }
.okr-node.depth-2 { margin-left: 32px; }
.okr-node.depth-3 { margin-left: 48px; }
.okr-node-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.okr-node-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.okr-node-title strong { font-size: 14px; color: var(--sb-slate-900); }
.okr-level-pill { font-size: 10.5px !important; letter-spacing: 0.04em; font-weight: 700; }
.okr-level-ceo  .okr-level-pill { background: var(--sb-teal-100);    color: var(--sb-teal-700); }
.okr-level-dept .okr-level-pill { background: #DBEAFE;               color: #1D4ED8; }
.okr-level-team .okr-level-pill { background: #EDE9FE;               color: #6D28D9; }
.okr-score-ring svg { display: block; }
.okr-node-actions { display: flex; gap: 6px; flex-shrink: 0; }
.okr-node-meta { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.okr-node-meta .ico { color: var(--sb-slate-400); }
.okr-children { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }

/* KR node inside OKR */
.kr-node {
  margin-top: 10px; padding: 10px 12px;
  background: var(--sb-slate-50); border-radius: 10px;
  border: 1px solid var(--sb-slate-200);
}
.kr-node.is-quality { border-color: rgba(20,184,166,0.35); background: #F0FDFA; }
.kr-node-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kr-text-wrap { display: flex; align-items: flex-start; gap: 6px; flex: 1; min-width: 0; }
.kr-bullet { color: var(--sb-teal-600); flex-shrink: 0; margin-top: 3px; }
.kr-text { font-size: 13px; color: var(--sb-slate-800); line-height: 1.4; }
.kr-progress-wrap {
  margin-top: 8px;
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
}
.kr-progress-wrap .progress { height: 6px; min-width: 80px; }
.kr-edit { display: flex; gap: 4px; margin: 0; }
.kr-edit .input { width: 72px; padding: 4px 6px; font-size: 12px; }
.quality-badges {
  margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--sb-slate-200);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.q-badge {
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-grid; place-items: center;
  font-size: 11px;
  transition: transform 150ms ease;
}
.q-badge.ok   { background: #D1FAE5; box-shadow: inset 0 0 0 1px #A7F3D0; color: #065F46; }
.q-badge.miss { background: var(--sb-slate-100); box-shadow: inset 0 0 0 1px var(--sb-slate-200); color: var(--sb-slate-400); }
.q-badge .ico { width: 12px; height: 12px; }
.q-badge:hover { transform: scale(1.15); }
.q-pass { margin-left: auto; font-weight: 600; }

/* TED Fund timeline */
.ted-timeline { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ted-phase {
  position: relative;
  padding: 10px 12px 10px 30px;
  background: var(--sb-slate-50);
  border-radius: 10px; border-left: 3px solid var(--sb-teal-500);
}
.ted-phase::before {
  content: ""; position: absolute; left: 10px; top: 14px;
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--sb-teal-500); box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(20,184,166,0.35);
}
.ted-phase-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ted-phase-body strong { font-size: 13.5px; color: var(--sb-slate-900); }
.ted-phase-body p { margin: 2px 0 0; font-size: 12.5px; }

/* Proven Results */
.proven-row { padding: 12px 0; border-bottom: 1px solid var(--sb-slate-100); }
.proven-row:last-child { border-bottom: 0; }
.proven-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.proven-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.proven-metric {
  padding: 8px 10px;
  background: var(--sb-slate-50); border-radius: 8px;
  border: 1px solid var(--sb-slate-100);
}
.proven-transition {
  display: flex; align-items: baseline; gap: 6px; margin-top: 4px;
  font-size: 13px;
}
.proven-transition .before { color: var(--sb-slate-500); text-decoration: line-through; }
.proven-transition .arrow  { color: var(--sb-teal-600); flex-shrink: 0; }
.proven-transition .after  { color: var(--sb-teal-700); font-weight: 700; }

/* KPI Library industry chips */
.industry-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 6px 0 14px;
  padding: 10px; background: var(--sb-slate-50);
  border-radius: 10px; border: 1px solid var(--sb-slate-100);
}
.industry-chips .chip { background: #fff; }
.industry-chips .chip.is-on { background: var(--sb-teal-600); color: #fff; border-color: var(--sb-teal-600); }
.kpi-lib-wrap { max-height: 520px; overflow-y: auto; border-radius: 8px; }
.kpi-lib-table thead th {
  position: sticky; top: 0; background: #fff; z-index: 1;
  border-bottom: 1px solid var(--sb-slate-200);
}

@media (max-width: 1100px) {
  .proven-grid { grid-template-columns: repeat(2, 1fr); }
  .okr-node.depth-1 { margin-left: 10px; }
  .okr-node.depth-2 { margin-left: 20px; }
}
@media (max-width: 760px) {
  .kpi-card-body { grid-template-columns: 1fr; }
  .proven-grid   { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────
   KPI / OKR - redesign additions (hero, gauges, roadmap, proven)
   ──────────────────────────────────────────────────────────────── */

/* Hero banner */
.ko-hero {
  position: relative;
  border-radius: 20px;
  padding: 26px 28px;
  margin-bottom: 22px;
  color: #E6FFFB;
  background:
    linear-gradient(110deg, rgba(15,23,42,.72) 0%, rgba(15,118,110,.35) 60%, rgba(15,118,110,.15) 100%),
    url('/static/img/gen/kpiokr-hero-bg.png') center / cover no-repeat,
    linear-gradient(135deg, #0F766E 0%, #115E59 45%, #134E4A 100%);
  box-shadow: 0 18px 40px rgba(15,118,110,0.25);
  display: grid; grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: 28px;
  overflow: hidden;
}
/* Keep .ko-hero-bg in DOM for backwards compat but don't paint blobs -
   the generated image above already carries the visual texture. */
.ko-hero-bg, .ko-hero-blob { display: none; }

.ko-hero-main { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.ko-hero-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.ko-hero-figure { display: flex; align-items: center; gap: 18px; }
.ko-hero-big {
  font-family: var(--sb-font-mono, system-ui);
  font-size: 72px; font-weight: 700; line-height: 0.9;
  color: #fff; letter-spacing: -0.04em;
}
.ko-hero-unit { font-size: 26px; font-weight: 600; color: rgba(255,255,255,0.75); margin-left: 2px; }
.ko-hero-ring { width: 96px; height: 96px; flex-shrink: 0; }
.ko-hero-sub {
  font-size: 13px; color: rgba(230,255,251,0.85); line-height: 1.5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ko-hero-hint {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.12); color: #5EEAD4;
  border: 1px solid rgba(94,234,212,0.35); font-weight: 600;
}

.ko-hero-tiles { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ko-tile {
  text-decoration: none; color: inherit;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
  display: flex; flex-direction: column; gap: 10px;
}
.ko-tile:hover { transform: translateY(-2px); background: rgba(255,255,255,0.14); border-color: rgba(94,234,212,0.45); }
.ko-tile-head {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(230,255,251,0.8);
}
.ko-tile-head .ico { color: #5EEAD4; }
.ko-tile-figure { display: flex; flex-direction: column; gap: 2px; }
.ko-tile-num {
  font-family: var(--sb-font-mono, system-ui);
  font-size: 30px; font-weight: 700; color: #fff; line-height: 1;
  letter-spacing: -0.02em;
}
.ko-tile-num .unit { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.7); margin-left: 2px; }
.ko-tile-sub { font-size: 11px; color: rgba(230,255,251,0.7); }
.ko-tile-bar {
  display: flex; height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.12);
}
.ko-tile-bar .seg { height: 100%; transition: width 400ms ease; }
.ko-tile-bar .seg.green { background: #34D399; }
.ko-tile-bar .seg.amber { background: #FBBF24; }
.ko-tile-bar .seg.red   { background: #F87171; }
.ko-tile-bar .seg.grove { background: linear-gradient(90deg, #5EEAD4, #2DD4BF); }

/* Hero-tile meta row (detail under the progress bar) */
.ko-tile-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 10.5px; font-weight: 500;
  color: rgba(230,255,251,0.75);
}
.ko-tile-meta span {
  display: inline-flex; align-items: center; gap: 4px;
  letter-spacing: 0.02em;
}
.ko-tile-meta .ko-mini-dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.ko-tile-meta .ko-mini-dot.green { background: #34D399; box-shadow: 0 0 6px rgba(52,211,153,0.5); }
.ko-tile-meta .ko-mini-dot.amber { background: #FBBF24; box-shadow: 0 0 6px rgba(251,191,36,0.5); }
.ko-tile-meta .ko-mini-dot.red   { background: #F87171; box-shadow: 0 0 6px rgba(248,113,113,0.5); }

.ko-tile-meta.q-check-meta {
  justify-content: space-between; gap: 3px;
  font-family: var(--sb-font-mono, system-ui); font-size: 10px;
}
.ko-tile-meta.q-check-meta span {
  gap: 3px; padding: 2px 5px;
  border-radius: 6px;
  background: rgba(94,234,212,0.12);
  border: 1px solid rgba(94,234,212,0.22);
  color: rgba(230,255,251,0.9);
}
.ko-tile-meta.q-check-meta .ico { width: 10px; height: 10px; color: #5EEAD4; }

.ko-tile-meta.level-meta { justify-content: space-between; }
.ko-tile-meta.level-meta span { flex-direction: column; gap: 1px; align-items: center; text-align: center; }
.ko-tile-meta.level-meta b {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #5EEAD4; font-weight: 700;
}

/* ───────── KPI Strategy Map (org-chart redesign) ───────── */
.smap-card { overflow: hidden; }
.smap-shell {
  margin-top: 10px;
  border: 1px solid var(--sb-slate-200);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.smap-header {
  background: #1E293B; color: #fff;
  padding: 12px 18px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  text-align: center;
  border-bottom: 1px solid #0F172A;
}
.smap-canvas { position: relative; display: flex; flex-direction: column; }
.smap-wires {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.smap-wires path { stroke: #CBD5E1; stroke-width: 1.5; fill: none; }
.smap-wires .wire-arrow { fill: #94A3B8; }

.smap-row {
  display: grid; grid-template-columns: 52px 1fr;
  min-height: 120px;
  border-bottom: 1px solid var(--sb-slate-100);
  background: linear-gradient(90deg, color-mix(in srgb, var(--lyr-c) 6%, transparent) 0%, transparent 40%);
}
.smap-row:last-child { border-bottom: 0; }
.smap-row:nth-child(odd) { background-color: #F8FAFC; }
.smap-side { position: relative; display: grid; place-items: center; color: #fff; }
.smap-side-text {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap;
}
.smap-stage {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: center;
  padding: 22px 20px;
  position: relative; z-index: 2;
}
.smap-node {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 10px 18px;
  min-width: 130px; max-width: 220px;
  background: var(--sb-slate-400);
  color: #fff;
  border: 0; border-radius: 999px / 40px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(15,23,42,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.smap-node:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,23,42,0.22); }
.smap-node:focus-visible { outline: 3px solid rgba(20,184,166,0.5); outline-offset: 2px; }
.smap-node.is-active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lyr-c, #14B8A6), 0 10px 22px rgba(15,23,42,0.22); transform: translateY(-2px); }
.smap-node--green { background: linear-gradient(135deg, #34D399, #059669); }
.smap-node--amber { background: linear-gradient(135deg, #FBBF24, #D97706); }
.smap-node--red   { background: linear-gradient(135deg, #F87171, #DC2626); }
.smap-node-name {
  font-size: 12.5px; font-weight: 600;
  line-height: 1.3; text-align: center;
  max-width: 180px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.smap-node-pct {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.88);
  font-family: var(--sb-font-mono, system-ui);
}
.smap-empty { padding: 20px; }
.smap-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 10px 18px;
  border-top: 1px solid var(--sb-slate-100);
  background: var(--sb-slate-50);
  font-size: 12px; color: var(--sb-slate-600);
  align-items: center;
}
.smap-legend span { display: inline-flex; align-items: center; gap: 6px; }
.smap-legend-dot { width: 10px; height: 10px; border-radius: 999px; }
.smap-legend-dot.green { background: #10B981; }
.smap-legend-dot.amber { background: #F59E0B; }
.smap-legend-dot.red   { background: #EF4444; }
.smap-plan {
  margin-top: 14px;
  border: 1px solid var(--sb-slate-200);
  border-radius: 14px;
  background: #fff;
  padding: 16px 18px;
  animation: smap-plan-in 220ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes smap-plan-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.smap-plan-empty { text-align: center; padding: 10px; }
.smap-plan-wrap { display: flex; flex-direction: column; gap: 12px; }
.smap-plan-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px dashed var(--sb-slate-200);
}
.smap-plan-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-grid; place-items: center; flex-shrink: 0;
  color: #fff;
}
.smap-plan-icon .ico { width: 20px; height: 20px; }
.smap-plan-title { font-size: 16px; font-weight: 700; color: var(--sb-slate-900); flex: 1; min-width: 180px; }
.smap-plan-title small { display: block; font-size: 12px; color: var(--sb-slate-500); font-weight: 400; margin-top: 2px; }
.smap-plan-metric {
  padding: 6px 12px;
  background: var(--sb-slate-50);
  border: 1px solid var(--sb-slate-100);
  border-radius: 10px;
  font-family: var(--sb-font-mono, system-ui);
  font-size: 13px; color: var(--sb-slate-700);
  white-space: nowrap;
}
.smap-plan-metric strong { color: var(--sb-slate-900); }
.smap-plan-close {
  width: 32px; height: 32px; border-radius: 8px;
  border: 0; background: var(--sb-slate-100); color: var(--sb-slate-600);
  cursor: pointer; display: inline-grid; place-items: center;
  transition: background 150ms ease, color 150ms ease;
}
.smap-plan-close:hover { background: var(--sb-slate-200); color: var(--sb-slate-900); }
.smap-plan-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 820px) { .smap-plan-grid { grid-template-columns: 1fr 1fr 1fr; } }
.smap-plan-chip {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--sb-slate-100);
  background: var(--sb-slate-50);
  display: flex; flex-direction: column; gap: 4px;
}
.smap-plan-chip-lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sb-slate-500);
  display: inline-flex; align-items: center; gap: 4px;
}
.smap-plan-chip p { margin: 0; font-size: 12.5px; color: var(--sb-slate-700); line-height: 1.45; }
.smap-plan-chip--cause  { border-left: 3px solid #F59E0B; }
.smap-plan-chip--cause  .smap-plan-chip-lbl { color: #92400E; }
.smap-plan-chip--cause  .smap-plan-chip-lbl .ico { color: #F59E0B; }
.smap-plan-chip--root   { border-left: 3px solid #6366F1; }
.smap-plan-chip--root   .smap-plan-chip-lbl { color: #4338CA; }
.smap-plan-chip--root   .smap-plan-chip-lbl .ico { color: #6366F1; }
.smap-plan-chip--action { border-left: 3px solid #14B8A6; }
.smap-plan-chip--action .smap-plan-chip-lbl { color: var(--sb-teal-700); }
.smap-plan-chip--action .smap-plan-chip-lbl .ico { color: var(--sb-teal-600); }
.smap-plan-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px dashed var(--sb-slate-200);
}
.smap-plan-owner {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--sb-slate-600);
}
.smap-plan-owner .ico { color: var(--sb-slate-400); }
.smap-plan-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .smap-stage { padding: 18px 12px; gap: 8px; }
  .smap-node { min-width: 110px; padding: 8px 12px; }
  .smap-side { min-height: 100px; }
}

/* ── Legacy .strategy-* rules (kept below, no longer used by template) ── */
.strategy-map-card { overflow: hidden; }
.strategy-map { display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
.strategy-row {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 14px; align-items: stretch;
  padding: 12px 4px 12px 14px;
  border-left: 4px solid var(--lyr-c, var(--sb-slate-300));
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lyr-c, #64748B) 8%, transparent) 0%, transparent 60%);
}
.strategy-row-label {
  display: grid; grid-template-columns: 36px 1fr; gap: 8px;
  align-items: start; padding-right: 10px;
  border-right: 1px dashed var(--sb-slate-200);
}
.strategy-row-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--lyr-c) 15%, #fff);
  color: var(--lyr-c);
  grid-row: span 2;
}
.strategy-row-ico .ico { width: 18px; height: 18px; }
.strategy-row-label strong { font-size: 13.5px; color: var(--sb-slate-900); font-weight: 700; }
.strategy-row-mini {
  grid-column: 2;
  margin-top: 4px; display: flex; height: 5px;
  border-radius: 999px; overflow: hidden; background: var(--sb-slate-100);
}
.strategy-row-mini .seg { height: 100%; }
.strategy-row-mini .seg.green { background: #10B981; }
.strategy-row-mini .seg.amber { background: #F59E0B; }
.strategy-row-mini .seg.red   { background: #EF4444; }
.strategy-nodes {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; align-content: center;
}
.strategy-node {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 7px;
  background: #fff;
  border: 1px solid var(--sb-slate-200);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 500; color: var(--sb-slate-700);
  text-decoration: none; max-width: 100%;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.strategy-node:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,0.08); border-color: var(--lyr-c); }
.strategy-node-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.strategy-node--green .strategy-node-dot { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
.strategy-node--amber .strategy-node-dot { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.strategy-node--red   .strategy-node-dot { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.strategy-node--amber { border-color: #FCD34D; }
.strategy-node--red   { border-color: #FCA5A5; background: #FEF2F2; }
.strategy-node-name { color: var(--sb-slate-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.strategy-node-pct { font-size: 10.5px; color: var(--sb-slate-500); }
.strategy-empty { padding: 6px 10px; }

.strategy-connector {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 0;
  color: var(--sb-slate-300);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
}
.strategy-connector::before,
.strategy-connector::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sb-slate-200), transparent);
}
.strategy-connector-lbl { color: var(--sb-slate-400); }

/* ───────── Root Cause Analysis ───────── */
.rca-card { overflow: hidden; }
.rca-card .card-head .ico { color: #EF4444; }
.rca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.rca-item {
  background: #fff;
  border: 1px solid var(--sb-slate-200);
  border-left: 4px solid var(--sb-slate-300);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.rca-item:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,0.07); }
.rca-item--red   { border-left-color: #EF4444; background: linear-gradient(135deg, #FEF2F2 0%, #fff 30%); }
.rca-item--amber { border-left-color: #F59E0B; background: linear-gradient(135deg, #FFFBEB 0%, #fff 30%); }

.rca-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rca-kpi-name { font-size: 14px; color: var(--sb-slate-900); flex: 1; min-width: 120px; }
.rca-metric { font-size: 12px; color: var(--sb-slate-600); white-space: nowrap; }
.rca-bar .progress { height: 6px; }

.rca-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 860px) {
  .rca-row { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
}
.rca-chip {
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--sb-slate-100);
  background: var(--sb-slate-50);
  display: flex; flex-direction: column; gap: 4px;
}
.rca-chip-lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sb-slate-500);
  display: inline-flex; align-items: center; gap: 4px;
}
.rca-chip p { margin: 0; font-size: 12.5px; color: var(--sb-slate-700); line-height: 1.45; }
.rca-chip-cause  { border-left: 3px solid #F59E0B; }
.rca-chip-cause  .rca-chip-lbl { color: #92400E; }
.rca-chip-cause  .rca-chip-lbl .ico { color: #F59E0B; }
.rca-chip-root   { border-left: 3px solid #6366F1; }
.rca-chip-root   .rca-chip-lbl { color: #4338CA; }
.rca-chip-root   .rca-chip-lbl .ico { color: #6366F1; }
.rca-chip-action { border-left: 3px solid #14B8A6; }
.rca-chip-action .rca-chip-lbl { color: var(--sb-teal-700); }
.rca-chip-action .rca-chip-lbl .ico { color: var(--sb-teal-600); }

.rca-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding-top: 8px; border-top: 1px dashed var(--sb-slate-100); flex-wrap: wrap;
}
.rca-foot span { display: inline-flex; align-items: center; gap: 5px; }
.rca-foot .ico { color: var(--sb-slate-400); }

@media (max-width: 900px) {
  .strategy-row { grid-template-columns: 1fr; }
  .strategy-row-label { border-right: 0; border-bottom: 1px dashed var(--sb-slate-200); padding-bottom: 8px; padding-right: 0; }
  .rca-grid { grid-template-columns: 1fr; }
}

/* BSC dimension cards (circular gauge) */
.bsc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bsc2 {
  display: block; text-decoration: none;
  border-radius: 16px;
  padding: 18px;
  background: #fff; border: 1px solid var(--sb-slate-200);
  box-shadow: 0 2px 6px rgba(15,23,42,0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  position: relative; overflow: hidden;
}
.bsc2::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--bsc-c), color-mix(in srgb, var(--bsc-c) 40%, transparent));
}
.bsc2:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
  border-color: color-mix(in srgb, var(--bsc-c) 30%, var(--sb-slate-200));
}
.bsc2.is-active {
  border-color: var(--bsc-c);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bsc-c) 25%, transparent), 0 8px 20px rgba(15,23,42,0.06);
}
.bsc2-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bsc2-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--bsc-c) 12%, transparent);
  color: var(--bsc-c);
}
.bsc2-icon .ico { width: 20px; height: 20px; }
.bsc2-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bsc2-title strong { font-size: 14px; color: var(--sb-slate-900); }
.bsc2-body { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.bsc2-ring { width: 80px; height: 80px; flex-shrink: 0; }
.bsc2-num { font-size: 16px; font-weight: 700; fill: var(--sb-slate-900); }
.bsc2-breakdown { display: flex; flex-direction: column; gap: 4px; }
.bsc2-line { display: grid; grid-template-columns: 8px 1fr auto; gap: 6px; align-items: center; font-size: 12px; }
.bsc2-line .dot { width: 8px; height: 8px; border-radius: 999px; }
.bsc2-line .mono { font-weight: 700; color: var(--sb-slate-900); }

/* KPI cards (redesigned) */
.kpi-card2 {
  display: grid; grid-template-columns: 56px 1fr;
  background: #fff; border-radius: 14px;
  border: 1px solid var(--sb-slate-200);
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.kpi-card2:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,0.06); border-color: var(--sb-slate-300); }
.kpi-card2--green { border-left: 4px solid #10B981; }
.kpi-card2--amber { border-left: 4px solid #F59E0B; }
.kpi-card2--red   { border-left: 4px solid #EF4444; }
.kpi-card2-left {
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bsc-c) 10%, transparent);
  border-right: 1px solid var(--sb-slate-100);
}
.kpi-card2-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--bsc-c) 18%, #fff);
  color: var(--bsc-c);
}
.kpi-card2-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kpi-card2-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kpi-card2-name-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1; }

.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
}
.status-badge .status-dot { width: 7px; height: 7px; border-radius: 999px; }
.status-green { background: #D1FAE5; color: #065F46; }
.status-green .status-dot { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
.status-amber { background: #FEF3C7; color: #92400E; }
.status-amber .status-dot { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.status-red   { background: #FEE2E2; color: #991B1B; }
.status-red   .status-dot { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }

.kpi-card2-progress { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.kpi-card2-progress .progress { height: 7px; }
.kpi-card2-nums { font-size: 12px; display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.kpi-card2-nums .mono { font-size: 14px; color: var(--sb-slate-900); }
.kpi-card2-nums .muted { color: var(--sb-slate-500); }
.kpi-card2-pct {
  padding: 1px 7px; border-radius: 999px;
  background: var(--sb-slate-100); color: var(--sb-slate-700);
  font-weight: 600; font-size: 11px; margin-left: 4px;
}
.kpi-card2-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding-top: 8px; border-top: 1px dashed var(--sb-slate-100); flex-wrap: wrap;
}
.kpi-card2-owner {
  font-size: 12px; color: var(--sb-slate-500);
  display: inline-flex; align-items: center; gap: 5px;
}
.kpi-card2-owner .ico { color: var(--sb-slate-400); }

/* Add-toggle button + redesigned form */
.add-toggle { margin-top: 14px; }
.add-toggle summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 10px;
  border: 1px dashed var(--sb-slate-300);
  font-size: 13px; font-weight: 600; color: var(--sb-slate-700);
  cursor: pointer; list-style: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.add-toggle summary::-webkit-details-marker { display: none; }
.add-toggle summary:hover {
  background: var(--sb-teal-100); border-color: var(--sb-teal-500); color: var(--sb-teal-700);
  transform: translateY(-1px);
}
.add-toggle summary .ico { color: var(--sb-teal-600); }
.add-toggle[open] summary {
  background: var(--sb-teal-100); border-color: var(--sb-teal-500); color: var(--sb-teal-700);
  border-style: solid;
}

.add-toggle .add-form {
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--sb-slate-200);
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
  overflow: hidden;
  animation: add-form-in 240ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes add-form-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.add-form-head {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px;
  background: linear-gradient(135deg, #F0FDFA 0%, #FFFFFF 70%);
  border-bottom: 1px solid rgba(20,184,166,0.18);
}
.add-form-ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, #14B8A6, #0D9488);
  color: #fff;
  box-shadow: 0 4px 10px rgba(20,184,166,0.3);
}
.add-form-ico .ico { width: 18px; height: 18px; color: #fff; }
.add-form-title {
  margin: 0; font-size: 14.5px; font-weight: 700;
  color: var(--sb-slate-900); letter-spacing: -0.01em;
}
.add-form-hint {
  margin: 2px 0 0; font-size: 12px; line-height: 1.45;
  color: var(--sb-slate-600);
}

.add-form-body {
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--sb-slate-500); text-transform: uppercase;
}
.field .input {
  padding: 9px 12px; font-size: 13px;
  border-radius: 10px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field .input:focus {
  border-color: var(--sb-teal-500);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.18);
  outline: none;
}
.field-full { width: 100%; }
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.add-form-foot {
  padding: 12px 18px;
  background: var(--sb-slate-50);
  border-top: 1px solid var(--sb-slate-100);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.add-form-footnote { flex: 1; min-width: 140px; line-height: 1.5; }
.add-form-actions { display: flex; gap: 8px; flex-shrink: 0; }
.add-form-actions .btn.primary { padding: 7px 14px; font-size: 13px; font-weight: 600; }
.add-form-actions .btn.primary .ico { width: 12px; height: 12px; }

@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
  .add-form-foot { flex-direction: column; align-items: stretch; }
  .add-form-actions { justify-content: flex-end; }
}

/* TED Fund horizontal roadmap */
.ted-card { overflow: hidden; }
.roadmap {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 8px; padding: 0 4px;
}
.roadmap-rail {
  position: absolute; left: 36px; right: 36px; top: 22px; height: 3px;
  background: linear-gradient(90deg, #14B8A6 0%, #0EA5E9 50%, #8B5CF6 100%);
  border-radius: 999px; z-index: 0;
}
.roadmap-step { display: flex; flex-direction: column; align-items: stretch; gap: 12px; position: relative; z-index: 1; }
.roadmap-dot {
  width: 44px; height: 44px; border-radius: 999px;
  background: linear-gradient(135deg, #0D9488, #14B8A6);
  color: #fff; font-weight: 700; font-size: 15px;
  display: grid; place-items: center;
  margin: 0 auto; flex-shrink: 0;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(20,184,166,0.25), 0 8px 18px rgba(13,148,136,0.25);
}
.roadmap-step:nth-child(3) .roadmap-dot { background: linear-gradient(135deg, #0EA5E9, #0284C7); box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(14,165,233,0.25), 0 8px 18px rgba(2,132,199,0.25); }
.roadmap-step:nth-child(4) .roadmap-dot { background: linear-gradient(135deg, #6366F1, #4F46E5); box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(99,102,241,0.25), 0 8px 18px rgba(79,70,229,0.25); }
.roadmap-step:nth-child(5) .roadmap-dot { background: linear-gradient(135deg, #8B5CF6, #7C3AED); box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(139,92,246,0.25), 0 8px 18px rgba(124,58,237,0.25); }
.roadmap-card {
  flex: 1;
  padding: 14px; border-radius: 12px;
  background: #fff; border: 1px solid var(--sb-slate-200);
  box-shadow: var(--sb-shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.roadmap-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15,23,42,0.08); }
.roadmap-card-head { display: flex; justify-content: space-between; align-items: center; }
.roadmap-title { font-size: 13px; color: var(--sb-slate-900); line-height: 1.35; }

/* Proven Results (new card style) */
.proven-wrap { display: flex; flex-direction: column; gap: 12px; }
.proven-card {
  padding: 14px 16px;
  background: linear-gradient(135deg, #F0FDFA 0%, #fff 70%);
  border: 1px solid rgba(20,184,166,0.25); border-radius: 14px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.proven-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,118,110,0.12); }
.proven-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.proven-client { font-size: 14.5px; color: var(--sb-slate-900); }
.proven-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.proven-metric2 {
  padding: 10px; background: #fff; border-radius: 10px;
  border: 1px solid var(--sb-slate-100);
}
.proven-metric-label { font-weight: 600; margin-bottom: 4px; }
.proven-metric-values {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--sb-font-mono, system-ui); font-size: 13.5px;
}
.proven-metric-values .before { color: var(--sb-slate-400); text-decoration: line-through; }
.proven-metric-values .arrow  { color: var(--sb-teal-600); flex-shrink: 0; }
.proven-metric-values .after  { color: var(--sb-teal-700); font-weight: 800; }

/* OKR + KR polish additions */
.okr-dot { color: var(--sb-slate-300); }
.okr-node { transition: box-shadow 180ms ease, transform 180ms ease; }
.okr-node:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15,23,42,0.06); }
.okr-node::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--sb-slate-300);
}
.okr-node { position: relative; padding: 14px 16px; border-radius: 14px; }
.okr-level-ceo::before  { background: linear-gradient(180deg, #14B8A6, #0D9488); }
.okr-level-dept::before { background: linear-gradient(180deg, #60A5FA, #2563EB); }
.okr-level-team::before { background: linear-gradient(180deg, #A78BFA, #7C3AED); }
/* Remove the old left-border technique once ::before is in */
.okr-node { border-left: 0; }

/* Scrollbar polish for KPI / OKR / Library */
.kpi-list::-webkit-scrollbar,
.okr-tree::-webkit-scrollbar,
.kpi-lib-wrap::-webkit-scrollbar { width: 8px; }
.kpi-list::-webkit-scrollbar-thumb,
.okr-tree::-webkit-scrollbar-thumb,
.kpi-lib-wrap::-webkit-scrollbar-thumb { background: var(--sb-slate-200); border-radius: 4px; }
.kpi-lib-table tbody tr { transition: background 120ms ease; }
.kpi-lib-table tbody tr:hover { background: var(--sb-slate-50); }
.bsc-inline { display: inline-flex; align-items: center; gap: 4px; }

/* Responsive for new redesign */
@media (max-width: 1200px) {
  .ko-hero { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .bsc-grid { grid-template-columns: repeat(2, 1fr); }
  .ko-hero-tiles { grid-template-columns: repeat(2, 1fr); }
  .proven-metrics { grid-template-columns: repeat(2, 1fr); }
  .roadmap { grid-template-columns: repeat(2, 1fr); }
  .roadmap-rail { display: none; }
}
@media (max-width: 640px) {
  .bsc-grid { grid-template-columns: 1fr; }
  .ko-hero { padding: 20px; }
  .ko-hero-big { font-size: 56px; }
  .proven-metrics { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr; }
  .kpi-card2 { grid-template-columns: 1fr; }
  .kpi-card2-left { display: none; }
}

/* ========================================================================
   /four-hs redesign - hero · pillar cards · radar · actions · KSI tables
   ======================================================================== */

/* Hero banner with overall ring */
.fhs-hero {
  position: relative;
  border-radius: var(--sb-radius-lg);
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #0F766E 160%);
  color: #F8FAFC;
  padding: 22px 28px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  overflow: hidden;
  box-shadow: var(--sb-shadow);
}
.fhs-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15,23,42,.10) 0%, rgba(15,23,42,.40) 100%),
    url('/static/img/gen/fourhs-hero-bg.png') center / cover no-repeat;
}
.fhs-hero > *:not(.fhs-hero-bg) { position: relative; z-index: 1; }
.fhs-hero-ring { display: grid; place-items: center; }
.fhs-hero-copy { min-width: 0; }
.fhs-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .75; font-weight: 600; }
.fhs-hero-title { margin: 4px 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.015em; color: #fff; }
.fhs-hero-tag { margin: 0 0 10px; color: rgba(226,232,240,.8); font-size: 13px; }
.fhs-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fhs-hero-chips .pill {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.fhs-hero-chips .pill.red { background: rgba(239,68,68,.85); border-color: rgba(255,255,255,.3); }

/* Horizontal stat strip - replaces the old isolated right-column tiles */
.fhs-hero-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.fhs-strip-stat {
  min-width: 0;
  padding: 2px 6px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.fhs-strip-stat:last-child { border-right: 0; }
.fhs-strip-n {
  font-size: 20px; font-weight: 700; color: #fff;
  line-height: 1.1; letter-spacing: -0.02em;
}
.fhs-strip-n small {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-weight: 600; margin-left: 1px;
}
.fhs-strip-lbl {
  font-size: 10.5px;
  color: rgba(226,232,240,.7);
  text-transform: uppercase; letter-spacing: .08em;
  margin-top: 3px;
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 960px) {
  .fhs-hero { grid-template-columns: 1fr; text-align: center; padding: 20px; gap: 14px; }
  .fhs-hero-ring { margin: 0 auto; }
  .fhs-hero-chips { justify-content: center; }
  .fhs-hero-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 8px 0;
  }
  .fhs-strip-stat:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) {
  .fhs-hero-strip { grid-template-columns: 1fr; }
  .fhs-strip-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 8px; }
  .fhs-strip-stat:last-child { border-bottom: 0; }
}

/* Pillar summary cards */
.fhs-pillar-grid { gap: 14px; }
.fhs-pillar-card {
  position: relative;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
  border-top: 3px solid transparent;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.fhs-pillar-card:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow); }
.fhs-pillar-card.hue-warm   { border-top-color: #F59E0B; background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 55%); }
.fhs-pillar-card.hue-violet { border-top-color: #8B5CF6; background: linear-gradient(180deg, #F5F3FF 0%, #FFFFFF 55%); }
.fhs-pillar-card.hue-green  { border-top-color: #10B981; background: linear-gradient(180deg, #ECFDF5 0%, #FFFFFF 55%); }
.fhs-pillar-card.hue-teal   { border-top-color: #14B8A6; background: linear-gradient(180deg, #F0FDFA 0%, #FFFFFF 55%); }

.fhs-pc-head { display: flex; align-items: center; gap: 10px; }
.fhs-pc-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: var(--sb-shadow-sm);
}
.fhs-pc-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hue-warm   .fhs-pc-ico { background: linear-gradient(135deg, #F59E0B, #B45309); }
.hue-violet .fhs-pc-ico { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.hue-green  .fhs-pc-ico { background: linear-gradient(135deg, #10B981, #047857); }
.hue-teal   .fhs-pc-ico { background: linear-gradient(135deg, #14B8A6, #0F766E); }

.fhs-pc-title { font-weight: 700; font-size: 13.5px; color: var(--sb-slate-900); letter-spacing: -0.01em; }
.fhs-pc-value { display: flex; align-items: baseline; gap: 6px; }
.fhs-pc-num { font-size: 28px; font-weight: 700; color: var(--sb-slate-900); letter-spacing: -0.02em; line-height: 1; }
.fhs-pc-delta { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.fhs-pc-delta.up   { background: #D1FAE5; color: #065F46; }
.fhs-pc-delta.down { background: #FEE2E2; color: #991B1B; }

.fhs-pc-dots { list-style: none; margin: 2px 0 0; padding: 0; display: flex; gap: 6px; }
.fhs-pc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.06);
}
.fhs-pc-dot.dot-green { background: var(--sb-ok); }
.fhs-pc-dot.dot-amber { background: var(--sb-warn); }
.fhs-pc-dot.dot-red   { background: var(--sb-danger); }

/* Radar + actions row */
.fhs-radar-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; }
@media (max-width: 1024px) { .fhs-radar-row { grid-template-columns: 1fr; } }
.fhs-radar-wrap {
  height: 320px; padding: 10px 0;
  display: flex; align-items: center; justify-content: center;
}
.fhs-radar-wrap canvas { max-height: 300px; }
.fhs-radar-legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; padding-top: 6px; font-size: 12px; color: var(--sb-slate-600); }
.fhs-radar-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.fhs-legend-dot { width: 10px; height: 10px; border-radius: 50%; }

.fhs-actions-card .card-head .pill.red { background: var(--sb-crimson-500); color: #fff; }
.fhs-action-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.fhs-action-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--sb-slate-100);
  border-left: 3px solid var(--sb-crimson-500);
  border-radius: 10px;
  transition: background 150ms ease, border-color 150ms ease;
}
.fhs-action-item:hover { background: var(--sb-crimson-50); border-color: var(--sb-crimson-500); }
.fhs-action-pill.pill {
  font-size: 11px; font-weight: 700;
  align-self: start; justify-self: start;
  font-family: 'JetBrains Mono', monospace;
}
.fhs-action-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fhs-action-advice {
  font-size: 12.5px; color: var(--sb-slate-700); line-height: 1.4;
  padding-top: 4px; margin-top: 4px; border-top: 1px dashed var(--sb-slate-200);
}
.fhs-action-empty {
  text-align: center; padding: 28px 18px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  color: var(--sb-slate-700);
}
.fhs-action-empty .ico { width: 28px; height: 28px; }

/* Pillar detail panels */
.fhs-pillar-detail { position: relative; }
.fhs-pillar-detail.hue-warm   .card-title { color: var(--sb-slate-900); }
.fhs-detail-ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  color: #fff;
}
.hue-warm   .fhs-detail-ico { background: linear-gradient(135deg, #F59E0B, #B45309); }
.hue-violet .fhs-detail-ico { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.hue-green  .fhs-detail-ico { background: linear-gradient(135deg, #10B981, #047857); }
.hue-teal   .fhs-detail-ico { background: linear-gradient(135deg, #14B8A6, #0F766E); }
.fhs-detail-ico .ico { width: 20px; height: 20px; stroke: currentColor; }

.fhs-ksi-table td, .fhs-ksi-table th { padding: 8px 10px; border-bottom: 1px solid var(--sb-slate-100); }
.fhs-ksi-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sb-slate-500); font-weight: 600; text-align: left;
}
.fhs-ksi-table .right, .fhs-ksi-table th.right { text-align: right; }
.fhs-ksi-table tbody tr:hover { background: var(--sb-slate-50); }

/* Questionnaire form */
.fhs-form-card { padding: 14px 18px; }
.fhs-form-details { margin-top: 10px; }
.fhs-form-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--sb-teal-50);
  border: 1px solid var(--sb-teal-300);
  color: var(--sb-teal-700);
  font-weight: 600; font-size: 13px;
  border-radius: 10px;
  transition: background 150ms ease;
}
.fhs-form-summary::-webkit-details-marker { display: none; }
.fhs-form-summary:hover { background: var(--sb-teal-100); }
.fhs-form-details[open] .fhs-form-summary .ico { transform: rotate(90deg); }
.fhs-form-summary .ico { transition: transform 150ms ease; }

.fhs-form-group {
  margin-top: 14px;
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid var(--sb-slate-200);
  background: #fff;
}
.fhs-form-group.hue-happy       { background: linear-gradient(180deg, #FFFBEB 0%, #fff 30%); }
.fhs-form-group.hue-harmonious  { background: linear-gradient(180deg, #F5F3FF 0%, #fff 30%); }
.fhs-form-group.hue-healthy     { background: linear-gradient(180deg, #ECFDF5 0%, #fff 30%); }
.fhs-form-group.hue-performance { background: linear-gradient(180deg, #F0FDFA 0%, #fff 30%); }
.fhs-form-group-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.fhs-form-group-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--sb-slate-900); }
.hue-happy      .fhs-detail-ico { background: linear-gradient(135deg, #F59E0B, #B45309); }
.hue-harmonious .fhs-detail-ico { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.hue-healthy    .fhs-detail-ico { background: linear-gradient(135deg, #10B981, #047857); }
.hue-performance .fhs-detail-ico { background: linear-gradient(135deg, #14B8A6, #0F766E); }

.fhs-form-qs { display: grid; gap: 6px; }
.fhs-form-q {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 8px 10px; margin: 0;
  border: 1px solid var(--sb-slate-100);
  border-radius: 8px;
  background: #fff;
  align-items: center;
}
.fhs-form-q-text {
  font-size: 12.5px; color: var(--sb-slate-700);
  display: inline-flex; align-items: center; gap: 8px;
}
.fhs-form-q-text .pill { font-size: 9.5px; padding: 1px 6px; }
.fhs-form-scale { display: inline-flex; gap: 4px; }
.fhs-form-opt {
  position: relative; cursor: pointer;
  width: 26px; height: 26px;
}
.fhs-form-opt input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0;
}
.fhs-form-opt-n {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--sb-slate-100);
  color: var(--sb-slate-500);
  font-size: 11px; font-weight: 600;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.fhs-form-opt:hover .fhs-form-opt-n { background: var(--sb-teal-100); color: var(--sb-teal-700); }
.fhs-form-opt input:checked ~ .fhs-form-opt-n {
  background: var(--sb-teal-500); color: #fff; transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(20,184,166,.25);
}

.fhs-form-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--sb-slate-100);
  gap: 12px; flex-wrap: wrap;
}

/* ========================================================================
   /talent-roi - hero · pathway · perf leaderboard · mode cards
   ======================================================================== */

/* Hero */
.roi-hero {
  position: relative;
  border-radius: var(--sb-radius-lg);
  background:
    linear-gradient(110deg, rgba(15,23,42,.78) 0%, rgba(15,118,110,.25) 65%, rgba(15,118,110,.10) 100%),
    url('/static/img/gen/talentroi-hero-bg.png') center / cover no-repeat,
    linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #0F766E 160%);
  color: #F8FAFC;
  padding: 24px 28px;
  overflow: hidden;
  box-shadow: var(--sb-shadow);
}
/* Legacy backdrop div - no longer needed; parent carries the image now. */
.roi-hero-bg { display: none; }
.roi-hero-body { position: relative; z-index: 1; }
.roi-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .75; font-weight: 600; }
.roi-hero-title { margin: 4px 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.roi-hero-tag { margin: 0 0 14px; color: rgba(226,232,240,.85); font-size: 14px; max-width: 700px; line-height: 1.55; }
.roi-hero-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.roi-strip-stat { padding: 2px 6px; border-right: 1px solid rgba(255,255,255,.08); min-width: 0; }
.roi-strip-stat:last-child { border-right: 0; }
.roi-strip-n { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.02em; }
.roi-strip-lbl { font-size: 10.5px; color: rgba(226,232,240,.7); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .roi-hero-strip { grid-template-columns: repeat(3, 1fr); } .roi-strip-stat:nth-child(3n) { border-right: 0; } }
@media (max-width: 560px) { .roi-hero-strip { grid-template-columns: 1fr; } .roi-strip-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 6px; } .roi-strip-stat:last-child { border-bottom: 0; } }

/* Pathway visualisation */
.roi-pathway { padding: 16px 18px; }
.roi-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: stretch; margin-top: 10px; }
.roi-flow-node {
  padding: 14px 16px;
  border: 1px solid var(--sb-slate-200);
  border-radius: 14px;
  background: #fff;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.roi-flow-node:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow); }
.roi-flow-node.m1 { border-left: 3px solid var(--sb-teal-500); background: linear-gradient(180deg, var(--sb-teal-50) 0%, #fff 60%); }
.roi-flow-node.m2 { border-left: 3px solid #F59E0B; background: linear-gradient(180deg, #FFFBEB 0%, #fff 60%); }
.roi-flow-node.m3 { border-left: 3px solid var(--sb-crimson-500); background: linear-gradient(180deg, var(--sb-crimson-50) 0%, #fff 60%); }
.roi-flow-node.m3.gated { opacity: .7; }
.roi-flow-badge {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 700; color: #fff; font-size: 13px;
  letter-spacing: -.02em;
}
.roi-flow-node.m1 .roi-flow-badge { background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700)); }
.roi-flow-node.m2 .roi-flow-badge { background: linear-gradient(135deg, #F59E0B, #B45309); }
.roi-flow-node.m3 .roi-flow-badge { background: linear-gradient(135deg, var(--sb-crimson-500), var(--sb-crimson-600)); }
.roi-flow-title { font-weight: 700; font-size: 14px; color: var(--sb-slate-900); }
.roi-flow-desc { font-size: 12px; color: var(--sb-slate-600); line-height: 1.4; }
.roi-flow-count { margin-top: auto; font-size: 11px; color: var(--sb-slate-500); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.roi-flow-arrow { align-self: center; color: var(--sb-slate-300); font-size: 20px; font-weight: 700; }
@media (max-width: 900px) {
  .roi-flow { grid-template-columns: 1fr; }
  .roi-flow-arrow { display: none; }
}

/* Performance table */
.roi-perf-table { width: 100%; }
.roi-perf-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sb-slate-500); font-weight: 600; text-align: left;
  padding: 10px 12px; border-bottom: 1px solid var(--sb-slate-100);
}
.roi-perf-table th.right { text-align: right; }
.roi-perf-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sb-slate-100);
  vertical-align: middle;
}
.roi-perf-table td.right { text-align: right; }
.roi-perf-row:hover { background: var(--sb-slate-50); }
.roi-kpi-dots { display: inline-flex; gap: 3px; justify-content: flex-end; align-items: center; }
.roi-dot {
  min-width: 22px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; color: #fff;
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
}
.roi-dot.dot-green { background: var(--sb-ok); }
.roi-dot.dot-amber { background: var(--sb-warn); }
.roi-dot.dot-red   { background: var(--sb-danger); }
.roi-perf-bar {
  display: grid; grid-template-columns: 1fr 28px; gap: 8px; align-items: center;
  min-width: 120px;
}
.roi-perf-bar .progress { height: 6px; }
.roi-perf-bar .mono { text-align: right; color: var(--sb-slate-700); }

.roi-ratio { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.roi-ratio-n { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.roi-ratio-sub { font-size: 10.5px; margin-top: 2px; }
.roi-ratio-n.band-green { color: var(--sb-ok); }
.roi-ratio-n.band-amber { color: var(--sb-warn); }
.roi-ratio-n.band-red   { color: var(--sb-danger); }

/* Mode 1 + Mode 2 cards */
.roi-mode-card { padding: 16px 18px; position: relative; }
.roi-mode-card.mode-m1 { border-top: 3px solid var(--sb-teal-500); }
.roi-mode-card.mode-m2 { border-top: 3px solid #F59E0B; }
.roi-mode-ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
  flex-shrink: 0;
}
.mode-m1-ico { background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700)); }
.mode-m2-ico { background: linear-gradient(135deg, #F59E0B, #B45309); }
.roi-mode-ico .ico { width: 20px; height: 20px; }
.roi-mode-list { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.roi-mode-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: var(--sb-slate-700); line-height: 1.4;
}
.roi-mode-list li .ico { color: var(--sb-ok); margin-top: 2px; flex-shrink: 0; }
.roi-mode-form { border-top: 1px dashed var(--sb-slate-200); padding-top: 12px; margin-top: 8px; }

.roi-records-table { width: 100%; }
.roi-records-table th,
.roi-records-table td { padding: 8px 10px; border-bottom: 1px solid var(--sb-slate-100); }
.roi-records-table .audit-avatar { width: 26px; height: 26px; border-radius: 50%; margin-right: 8px; }

/* ========================================================================
   /talent-roi/mode3/{id}
   ======================================================================== */

.m3-hero {
  position: relative;
  border-radius: var(--sb-radius-lg);
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #831843 150%);
  color: #F8FAFC;
  padding: 22px 26px;
  overflow: hidden;
  box-shadow: var(--sb-shadow);
}
.m3-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 100% 0%, rgba(220,38,38,.28), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(15,23,42,.4), transparent 50%);
}
.m3-hero-body {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.m3-target { display: flex; gap: 16px; align-items: center; min-width: 0; }
.m3-avatar-wrap { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.m3-avatar {
  width: 72px; height: 72px; border-radius: 18px;
  object-fit: cover;
  background: rgba(255,255,255,.1);
  border: 3px solid rgba(255,255,255,.3);
  box-shadow: 0 8px 20px rgba(15,23,42,.4);
}
.m3-pi-chip {
  position: absolute; right: -6px; bottom: -6px;
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: contain; padding: 2px;
  background: #fff; border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(15,23,42,.4);
}
.m3-target-meta { min-width: 0; }
.m3-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .7; font-weight: 600; }
.m3-title { margin: 4px 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.m3-sub { font-size: 13px; color: rgba(226,232,240,.8); margin-bottom: 10px; }
.m3-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.m3-chips .pill {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
.m3-chips .pill.green { background: var(--sb-ok); color: #fff; border-color: transparent; }
.m3-chips .pill.amber { background: var(--sb-warn); color: #fff; border-color: transparent; }
.m3-chips .pill.red   { background: var(--sb-danger); color: #fff; border-color: transparent; }

.m3-gate {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 14px;
  border: 2px solid;
  background: rgba(255,255,255,.08); backdrop-filter: blur(4px);
  min-width: 200px;
}
.m3-gate.is-open {
  border-color: rgba(16,185,129,.6);
  background: linear-gradient(135deg, rgba(16,185,129,.25), rgba(16,185,129,.10));
}
.m3-gate.is-closed {
  border-color: rgba(220,38,38,.6);
  background: linear-gradient(135deg, rgba(220,38,38,.25), rgba(220,38,38,.10));
}
.m3-gate .ico { width: 28px; height: 28px; color: #fff; }
.m3-gate-title { font-weight: 700; font-size: 16px; color: #fff; }
.m3-gate-sub { font-size: 11px; color: rgba(226,232,240,.7); }
@media (max-width: 760px) { .m3-hero-body { grid-template-columns: 1fr; } }

.m3-main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 1100px) { .m3-main { grid-template-columns: 1fr; } }

.m3-subhead {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--sb-slate-500);
  margin: 14px 0 8px;
}
.m3-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .m3-form-grid { grid-template-columns: 1fr; } }
.m3-risk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.m3-risk-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--sb-slate-50);
  border: 1px solid var(--sb-slate-200);
  border-radius: 8px;
  font-size: 12.5px; cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.m3-risk-opt:hover { background: #fff; border-color: var(--sb-crimson-500); }
.m3-risk-opt input { cursor: pointer; accent-color: var(--sb-crimson-500); }
.m3-risk-opt input:checked ~ .m3-risk-label { color: var(--sb-crimson-600); font-weight: 600; }
.m3-risk-label { color: var(--sb-slate-700); }
.m3-form-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--sb-slate-100);
  flex-wrap: wrap;
}

.m3-tier-ref { margin-top: 18px; }
.m3-tier-ref summary { cursor: pointer; padding: 6px 0; color: var(--sb-slate-700); }
.m3-tier-table { width: 100%; margin-top: 8px; font-size: 12px; }
.m3-tier-table th, .m3-tier-table td { padding: 6px 10px; border-bottom: 1px solid var(--sb-slate-100); }
.m3-tier-table .right { text-align: right; }

/* Timeline on Mode 3 */
.m3-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.m3-timeline::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 2px; background: var(--sb-slate-200);
}
.m3-timeline-item {
  position: relative; padding: 8px 0 10px 28px;
}
.m3-timeline-dot {
  position: absolute; left: 3px; top: 14px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--sb-teal-500);
}
.m3-timeline-item.mode-2 .m3-timeline-dot { border-color: #F59E0B; }
.m3-timeline-item.mode-3 .m3-timeline-dot { border-color: var(--sb-crimson-500); }
.m3-timeline-head { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }

.m3-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.m3-steps li { display: flex; gap: 12px; align-items: flex-start; }
.m3-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; color: #fff; flex-shrink: 0;
}
.m3-step-num.m1 { background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700)); }
.m3-step-num.m2 { background: linear-gradient(135deg, #F59E0B, #B45309); }
.m3-step-num.m3 { background: linear-gradient(135deg, var(--sb-crimson-500), var(--sb-crimson-600)); }

.m3-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.m3-doc-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12.5px; color: var(--sb-slate-700);
  transition: background 120ms ease;
}
.m3-doc-list li:hover { background: var(--sb-slate-50); }
.m3-doc-list li .ico { color: var(--sb-teal-600); }

/* ========================================================================
   /ideas - hero · capture · top-impact · kanban cards
   ======================================================================== */

.ideas-hero {
  position: relative;
  border-radius: var(--sb-radius-lg);
  background:
    linear-gradient(110deg, rgba(15,23,42,.78) 0%, rgba(15,118,110,.30) 65%, rgba(15,118,110,.10) 100%),
    url('/static/img/gen/ideas-hero-bg.png') center / cover no-repeat,
    linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #0F766E 140%);
  color: #F8FAFC;
  padding: 22px 26px;
  overflow: hidden;
  box-shadow: var(--sb-shadow);
}
.ideas-hero-body { position: relative; z-index: 1; }
.ideas-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .75; font-weight: 600; }
.ideas-hero-title { margin: 4px 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.ideas-hero-tag { margin: 0 0 14px; color: rgba(226,232,240,.8); font-size: 13.5px; max-width: 780px; line-height: 1.55; }
.ideas-hero-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ideas-strip-stat { padding: 2px 6px; border-right: 1px solid rgba(255,255,255,.08); min-width: 0; }
.ideas-strip-stat:last-child { border-right: 0; }
.ideas-strip-n { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.02em; }
.ideas-strip-n small { font-size: 12px; color: rgba(255,255,255,.55); font-weight: 600; margin-left: 1px; }
.ideas-strip-lbl {
  font-size: 10.5px; color: rgba(226,232,240,.7);
  text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 960px) { .ideas-hero-strip { grid-template-columns: repeat(2, 1fr); } .ideas-strip-stat:nth-child(2n) { border-right: 0; } }
@media (max-width: 520px) { .ideas-hero-strip { grid-template-columns: 1fr; } .ideas-strip-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 6px; } .ideas-strip-stat:last-child { border-bottom: 0; } }

/* Duo: capture + top-impact */
.ideas-duo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1024px) { .ideas-duo { grid-template-columns: 1fr; } }

.ideas-capture { padding: 16px 18px; }
.ideas-capture-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700));
  flex-shrink: 0; box-shadow: 0 6px 14px rgba(20,184,166,.3);
}
.ideas-capture-ico .ico { width: 18px; height: 18px; }
.ideas-capture-form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ideas-capture-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--sb-slate-200);
  flex-wrap: wrap;
}
.ideas-capture-hints { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ideas-capture-hints li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--sb-slate-600);
}
.ideas-capture-hints .ico { color: var(--sb-ok); }

/* Top-impact panel */
.ideas-top { padding: 16px 18px; }
.ideas-top-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ideas-top-item {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px;
  background: var(--sb-slate-50);
  border: 1px solid var(--sb-slate-100);
  border-radius: 10px;
  transition: background 150ms ease, border-color 150ms ease;
}
.ideas-top-item:hover { background: #fff; border-color: var(--sb-teal-300); }
.ideas-top-rank {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700));
  color: #fff; font-weight: 700; font-size: 12px;
}
.ideas-top-item:nth-child(2) .ideas-top-rank { background: linear-gradient(135deg, #F59E0B, #B45309); }
.ideas-top-item:nth-child(3) .ideas-top-rank { background: linear-gradient(135deg, var(--sb-slate-500), var(--sb-slate-700)); }
.ideas-top-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ideas-top-title {
  font-size: 13px; font-weight: 600; color: var(--sb-slate-900); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ideas-top-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.ideas-top-meta .pill { font-size: 10px; padding: 1px 7px; }
.ideas-top-impact {
  font-size: 16px; font-weight: 700; color: var(--sb-teal-700);
  padding: 2px 8px; border-radius: 6px; background: var(--sb-teal-50);
  letter-spacing: -0.01em;
}

/* Kanban - colored columns */
.ideas-kanban { gap: 12px; }
.ideas-kanban .kanban-col {
  background: var(--sb-slate-50);
  border: 1px solid var(--sb-slate-100);
  padding: 10px;
  min-height: 380px;
}
.ideas-kanban .kanban-col.col-slate { border-top: 3px solid var(--sb-slate-400); }
.ideas-kanban .kanban-col.col-amber { border-top: 3px solid #F59E0B; background: linear-gradient(180deg, #FFFBEB 0%, var(--sb-slate-50) 30%); }
.ideas-kanban .kanban-col.col-teal  { border-top: 3px solid var(--sb-teal-500); background: linear-gradient(180deg, var(--sb-teal-50) 0%, var(--sb-slate-50) 30%); }
.ideas-kanban .kanban-col.col-green { border-top: 3px solid var(--sb-ok); background: linear-gradient(180deg, #ECFDF5 0%, var(--sb-slate-50) 30%); }

.ideas-col-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--sb-slate-100);
  margin: -4px -4px 4px;
}
.ideas-col-title { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--sb-slate-800); }
.ideas-col-ico {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--sb-slate-200);
}
.col-slate .ideas-col-ico { color: var(--sb-slate-600); }
.col-amber .ideas-col-ico { color: #B45309; background: #FEF3C7; border-color: #FDE68A; }
.col-teal  .ideas-col-ico { color: var(--sb-teal-700); background: var(--sb-teal-50); border-color: var(--sb-teal-300); }
.col-green .ideas-col-ico { color: #065F46; background: #D1FAE5; border-color: #86EFAC; }

.ideas-col-empty {
  padding: 14px 12px;
  text-align: center;
  border: 1px dashed var(--sb-slate-200);
  border-radius: 8px;
  background: #fff;
  line-height: 1.4;
}

/* Kanban cards */
.ideas-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
}
.ideas-card.card-slate { border-top: 2px solid var(--sb-slate-300); }
.ideas-card.card-amber { border-top: 2px solid #FDE68A; }
.ideas-card.card-teal  { border-top: 2px solid var(--sb-teal-300); }
.ideas-card.card-green { border-top: 2px solid #86EFAC; }

.ideas-card-head {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center;
}
.ideas-card-meter { width: 32px; height: 32px; flex-shrink: 0; }

.ai-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  font-size: 9.5px; font-weight: 700;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(20,184,166,0.14), rgba(139,92,246,0.12));
  color: var(--sb-teal-700);
  border: 1px solid rgba(20,184,166,0.3);
  white-space: nowrap;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.ai-chip .ico { width: 10px; height: 10px; }
.ai-chip-warn {
  background: #FEF3C7; color: #92400E; border-color: #FDE68A;
}

.ideas-card-ai {
  border: 1px solid var(--sb-slate-200);
  border-radius: 8px;
  padding: 0;
  background: linear-gradient(180deg, rgba(20,184,166,0.04), transparent);
  font-size: 11.5px;
}
.ideas-card-ai > summary {
  cursor: pointer; list-style: none;
  padding: 6px 10px;
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; color: var(--sb-teal-700);
  user-select: none;
}
.ideas-card-ai > summary::-webkit-details-marker { display: none; }
.ideas-card-ai > summary::after {
  content: '▸';
  margin-left: auto;
  color: var(--sb-slate-400);
  transition: transform 120ms ease;
}
.ideas-card-ai[open] > summary::after { transform: rotate(90deg); }
.ideas-card-ai > summary .ico { width: 12px; height: 12px; color: var(--sb-teal-600); }

.ideas-card-ai-body {
  padding: 2px 10px 10px;
  display: flex; flex-direction: column; gap: 8px;
  color: var(--sb-slate-700);
  line-height: 1.45;
}
.ideas-card-ai-row {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 6px;
  border-top: 1px dashed var(--sb-slate-100);
}
.ideas-card-ai-row:first-child { border-top: 0; padding-top: 0; }
.ideas-card-ai-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--sb-slate-500);
}
.ideas-card-ai-row p { margin: 0; }
.ideas-card-ai-row ul { margin: 2px 0 0; padding-left: 16px; }
.ideas-card-ai-row ul li { margin-bottom: 1px; }
.ideas-card-ai-foot {
  margin-top: 2px;
  color: var(--sb-slate-400);
  font-style: italic;
}
.ideas-card-ai-foot code {
  font-family: var(--sb-mono, ui-monospace, SF Mono, Menlo, monospace);
  font-size: 10px; background: rgba(15,23,42,0.04); padding: 0 4px; border-radius: 4px; font-style: normal;
}
.ideas-card-title {
  margin: 0; font-size: 13.5px; font-weight: 700;
  color: var(--sb-slate-900); letter-spacing: -0.005em; line-height: 1.3;
  min-width: 0;
}
.ideas-card-desc {
  margin: 0; font-size: 12px; color: var(--sb-slate-600);
  line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ideas-card-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.ideas-card-meta .pill { font-size: 10px; padding: 1px 7px; }
.ideas-card-person {
  display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--sb-slate-50);
  border: 1px solid var(--sb-slate-100);
  position: relative;
}
.ideas-avatar {
  width: 32px; height: 32px; border-radius: 8px; object-fit: cover;
  background: var(--sb-slate-200);
  border: 1px solid var(--sb-slate-100);
}
.ideas-avatar-chip {
  position: absolute; left: 24px; top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  object-fit: contain; padding: 1px;
  background: #fff; border: 1.5px solid #fff;
  box-shadow: 0 2px 4px rgba(15,23,42,.2);
}
.ideas-person-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ideas-person-meta .muted { font-size: 10.5px; }

.ideas-card-actual {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 6px 8px;
  background: #D1FAE5;
  border: 1px solid #86EFAC;
  border-radius: 8px;
}
.ideas-card-actual .pill { font-size: 10px; }

.ideas-roi-form {
  display: flex; gap: 6px;
  padding: 6px 8px;
  background: #ECFDF5;
  border: 1px dashed var(--sb-ok);
  border-radius: 8px;
}
.ideas-roi-form .input { padding: 5px 8px; font-size: 12px; flex: 1; }
.ideas-roi-form .btn { padding: 5px 10px; font-size: 11px; }

.ideas-card-foot {
  display: flex; justify-content: space-between;
  padding-top: 4px;
  border-top: 1px dashed var(--sb-slate-100);
  font-size: 10.5px;
}

/* ========================================================================
   /evaluation - hero · cycle cards · timeline · table · NORM CURVE
   ======================================================================== */

/* Hue tokens reused by Norm Curve (legend pills, pins, count chips). */
:root {
  --grade-f-1:        #1F2937;
  --grade-f-2:        #374151;
  --grade-d-1:        #92400E;
  --grade-d-2:        #B45309;
  --grade-c-minus-1:  #F97316;
  --grade-c-minus-2:  #FB923C;
  --grade-c-plus-1:   #FACC15;
  --grade-c-plus-2:   #FDE047;
  --grade-b-1:        #3B82F6;
  --grade-b-2:        #60A5FA;
  --grade-a-1:        #10B981;
  --grade-a-2:        #34D399;
}

.eval-norm-card {
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, #fff 0%, #FAFAFB 100%);
  position: relative;
}
.eval-norm-stats {
  display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap;
}

/* Top legend pills - equal columns so F/A labels never truncate */
.norm-legend {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 14px 0 10px;
}
.norm-legend-pill {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.norm-legend-pill.band-f       { background: linear-gradient(135deg, var(--grade-f-1), var(--grade-f-2)); }
.norm-legend-pill.band-d       { background: linear-gradient(135deg, var(--grade-d-1), var(--grade-d-2)); }
.norm-legend-pill.band-c-minus { background: linear-gradient(135deg, var(--grade-c-minus-1), var(--grade-c-minus-2)); }
.norm-legend-pill.band-c-plus  { background: linear-gradient(135deg, var(--grade-c-plus-1), var(--grade-c-plus-2)); color: #78350F; text-shadow: 0 1px 1px rgba(255,255,255,.6); }
.norm-legend-pill.band-b       { background: linear-gradient(135deg, var(--grade-b-1), var(--grade-b-2)); }
.norm-legend-pill.band-a       { background: linear-gradient(135deg, var(--grade-a-1), var(--grade-a-2)); }
.norm-legend-grade { font-size: 13px; }
.norm-legend-pct { font-size: 11px; opacity: .85; }

/* Plot wrapper - SVG curve + HTML pin overlay.
   `padding-top` is set inline by the route based on how many rows of
   pins are needed (avatars stagger upward when they would otherwise
   collide on the x-axis). */
.norm-plot {
  position: relative;
  width: 100%;
  margin-top: 6px;
  padding-top: 88px;     /* fallback - overridden by inline style */
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  border: 1px solid var(--sb-slate-100);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15,23,42,.04);
  overflow: hidden;
}
.norm-svg {
  width: 100%;
  height: 320px;
  display: block;
}

/* Avatar pin overlay - each user positioned by % of width = z-score (-3..+3) */
.norm-people {
  position: absolute;
  inset: 8px 0 88px 0;       /* leave bottom space for axis labels */
  pointer-events: none;
}
.norm-pin {
  /* `--pin-row` is set inline (0 = closest to curve, 1+ = stacked upward)
     so neighbouring avatars never overlap each other. */
  position: absolute;
  bottom: calc(var(--pin-row, 0) * 100px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 6px;
  text-decoration: none;
  pointer-events: auto;
  transition: transform 160ms ease, filter 160ms ease;
  cursor: pointer;
  max-width: 88px;
  min-width: 56px;
  z-index: calc(2 + var(--pin-row, 0));
}
.norm-pin:hover { transform: translateX(-50%) translateY(-3px); filter: drop-shadow(0 6px 10px rgba(15,23,42,.18)); z-index: 20; }

.norm-pin-grade {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  margin-bottom: 1px;
}
.norm-pin-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.2);
  background: var(--sb-slate-100);
}
.norm-pin-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--sb-slate-800);
  text-align: center;
  line-height: 1.2;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255,255,255,.92);
  padding: 1px 6px;
  border-radius: 6px;
}
.norm-pin-perf {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--sb-slate-600);
  background: rgba(255,255,255,.85);
  padding: 1px 5px;
  border-radius: 6px;
  letter-spacing: -.01em;
}

/* Per-grade pin colors */
.norm-pin.band-f .norm-pin-grade       { background: linear-gradient(135deg, var(--grade-f-1), var(--grade-f-2)); }
.norm-pin.band-d .norm-pin-grade       { background: linear-gradient(135deg, var(--grade-d-1), var(--grade-d-2)); }
.norm-pin.band-c-minus .norm-pin-grade { background: linear-gradient(135deg, var(--grade-c-minus-1), var(--grade-c-minus-2)); }
.norm-pin.band-c-plus  .norm-pin-grade { background: linear-gradient(135deg, var(--grade-c-plus-1), var(--grade-c-plus-2)); color: #78350F; text-shadow: 0 1px 1px rgba(255,255,255,.4); }
.norm-pin.band-b .norm-pin-grade       { background: linear-gradient(135deg, var(--grade-b-1), var(--grade-b-2)); }
.norm-pin.band-a .norm-pin-grade       { background: linear-gradient(135deg, var(--grade-a-1), var(--grade-a-2)); }

.norm-pin.band-f .norm-pin-avatar       { border-color: var(--grade-f-2); }
.norm-pin.band-d .norm-pin-avatar       { border-color: var(--grade-d-2); }
.norm-pin.band-c-minus .norm-pin-avatar { border-color: var(--grade-c-minus-2); }
.norm-pin.band-c-plus  .norm-pin-avatar { border-color: var(--grade-c-plus-2); }
.norm-pin.band-b .norm-pin-avatar       { border-color: var(--grade-b-2); }
.norm-pin.band-a .norm-pin-avatar       { border-color: var(--grade-a-2); }

/* Counts strip below the plot */
.norm-counts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: var(--sb-slate-50);
  border-radius: 12px;
  border: 1px solid var(--sb-slate-100);
}
.norm-count {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px;
  border-radius: 10px;
  background: #fff;
  border-left: 4px solid;
}
.norm-count.band-f       { border-left-color: var(--grade-f-1); }
.norm-count.band-d       { border-left-color: var(--grade-d-1); }
.norm-count.band-c-minus { border-left-color: var(--grade-c-minus-1); }
.norm-count.band-c-plus  { border-left-color: var(--grade-c-plus-1); }
.norm-count.band-b       { border-left-color: var(--grade-b-1); }
.norm-count.band-a       { border-left-color: var(--grade-a-1); }
.norm-count-grade {
  font-size: 13px; font-weight: 800;
  letter-spacing: .04em;
  color: var(--sb-slate-800);
}
.norm-count-n {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sb-slate-900);
  line-height: 1;
}
.norm-count-lbl { font-size: 10px; }

.norm-note {
  display: flex; align-items: center; gap: 6px;
  margin: 14px 0 0;
  padding: 8px 10px;
  background: var(--sb-teal-50);
  border-radius: 8px;
  border: 1px dashed var(--sb-teal-300);
  color: var(--sb-slate-700);
  line-height: 1.5;
}
.norm-note .ico { color: var(--sb-teal-600); flex-shrink: 0; }
.norm-note strong { color: var(--sb-slate-900); }

@media (max-width: 720px) {
  .norm-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .norm-pin { max-width: 64px; min-width: 44px; }
  .norm-pin-avatar { width: 30px; height: 30px; border-width: 2px; }
  .norm-pin-name { font-size: 10px; max-width: 60px; }
}


.eval-hero {
  position: relative;
  border-radius: var(--sb-radius-lg);
  background:
    linear-gradient(110deg, rgba(15,23,42,.78) 0%, rgba(15,118,110,.28) 60%, rgba(15,118,110,.10) 100%),
    url('/static/img/gen/evaluation-hero-bg.png') center / cover no-repeat,
    linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #0F766E 140%);
  color: #F8FAFC;
  padding: 22px 26px;
  overflow: hidden;
  box-shadow: var(--sb-shadow);
}
.eval-hero-body { position: relative; z-index: 1; }
.eval-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .75; font-weight: 600; }
.eval-hero-title { margin: 4px 0 6px; font-size: 25px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.eval-hero-tag { margin: 0 0 14px; color: rgba(226,232,240,.8); font-size: 13.5px; max-width: 780px; line-height: 1.55; }
.eval-hero-strip {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px; padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.eval-strip-stat { padding: 2px 6px; border-right: 1px solid rgba(255,255,255,.08); min-width: 0; }
.eval-strip-stat:last-child { border-right: 0; }
.eval-strip-n { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.02em; }
.eval-strip-n small { font-size: 11px; color: rgba(255,255,255,.55); font-weight: 600; margin-left: 1px; }
.eval-strip-lbl { font-size: 10.5px; color: rgba(226,232,240,.7); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 960px) { .eval-hero-strip { grid-template-columns: repeat(2, 1fr); } .eval-strip-stat:nth-child(2n) { border-right: 0; } }
@media (max-width: 520px) { .eval-hero-strip { grid-template-columns: 1fr; } .eval-strip-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 6px; } .eval-strip-stat:last-child { border-bottom: 0; } }

/* Cycle schedule cards */
.eval-cycles-card { padding: 16px 18px; }
.eval-cycle-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-top: 10px;
}
@media (max-width: 1024px) { .eval-cycle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .eval-cycle-grid { grid-template-columns: 1fr; } }

.eval-cycle-form {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--sb-slate-200);
  background: #fff;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.eval-cycle-form:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow); }
.eval-cycle-form.hue-teal    { border-top: 3px solid var(--sb-teal-500);    background: linear-gradient(180deg, var(--sb-teal-50) 0%, #fff 40%); }
.eval-cycle-form.hue-amber   { border-top: 3px solid #F59E0B;               background: linear-gradient(180deg, #FFFBEB 0%, #fff 40%); }
.eval-cycle-form.hue-violet  { border-top: 3px solid #8B5CF6;               background: linear-gradient(180deg, #F5F3FF 0%, #fff 40%); }
.eval-cycle-form.hue-crimson { border-top: 3px solid var(--sb-crimson-500); background: linear-gradient(180deg, var(--sb-crimson-50) 0%, #fff 40%); }

.eval-cycle-head { display: flex; gap: 10px; align-items: center; }
.eval-cycle-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
  flex-shrink: 0; box-shadow: var(--sb-shadow-sm);
}
.hue-teal    .eval-cycle-ico { background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700)); }
.hue-amber   .eval-cycle-ico { background: linear-gradient(135deg, #F59E0B, #B45309); }
.hue-violet  .eval-cycle-ico { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.hue-crimson .eval-cycle-ico { background: linear-gradient(135deg, var(--sb-crimson-500), var(--sb-crimson-600)); }

.eval-cycle-label { font-size: 14px; font-weight: 700; color: var(--sb-slate-900); letter-spacing: -0.01em; display: block; }
.eval-cycle-desc { margin: 2px 0 0; line-height: 1.4; }
.eval-cycle-focus { list-style: none; margin: 6px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.eval-cycle-focus li {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11.5px; color: var(--sb-slate-700); line-height: 1.3;
}
.eval-cycle-focus li .ico { color: var(--sb-ok); margin-top: 2px; flex-shrink: 0; }
.eval-period-input { padding: 7px 10px; font-size: 13px; }

/* Upcoming timeline */
.eval-upcoming-card { padding: 16px 18px; }
.eval-timeline { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eval-tl-item {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--sb-slate-100);
  border-radius: 12px;
  background: #fff;
  transition: background 150ms ease, border-color 150ms ease;
}
.eval-tl-item:hover { background: var(--sb-slate-50); border-color: var(--sb-teal-300); }
.eval-tl-item.urg-overdue { border-color: var(--sb-crimson-500); background: var(--sb-crimson-50); }
.eval-tl-item.urg-soon    { border-color: #F59E0B; background: #FFFBEB; }
.eval-tl-dot {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
  flex-shrink: 0;
}
.eval-tl-item.hue-teal    .eval-tl-dot { background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700)); }
.eval-tl-item.hue-amber   .eval-tl-dot { background: linear-gradient(135deg, #F59E0B, #B45309); }
.eval-tl-item.hue-violet  .eval-tl-dot { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.eval-tl-item.hue-crimson .eval-tl-dot { background: linear-gradient(135deg, var(--sb-crimson-500), var(--sb-crimson-600)); }
.eval-tl-dot .ico { width: 18px; height: 18px; }
.eval-tl-body { min-width: 0; }
.eval-tl-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.eval-tl-label { font-weight: 700; font-size: 13.5px; color: var(--sb-slate-900); }
.eval-tl-days { flex-shrink: 0; }
@media (max-width: 720px) {
  .eval-tl-item { grid-template-columns: 44px 1fr; }
  .eval-tl-action { grid-column: 1 / -1; }
}

/* Evaluations table */
.eval-table-card { padding: 16px 18px; }
.eval-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sb-slate-500); font-weight: 600; text-align: left;
  padding: 10px; border-bottom: 1px solid var(--sb-slate-100);
}
.eval-table td { padding: 10px; border-bottom: 1px solid var(--sb-slate-100); vertical-align: middle; }
.eval-table th.right, .eval-table td.right { text-align: right; }
.eval-table tbody tr:hover { background: var(--sb-slate-50); }
.eval-row.is-completed { opacity: .88; }

.eval-cycle-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 4px;
  border-radius: 999px;
  font-weight: 600; font-size: 12px;
  background: var(--sb-slate-100);
  color: var(--sb-slate-700);
}
.eval-cycle-chip-ico {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.eval-cycle-chip.hue-teal    .eval-cycle-chip-ico { background: var(--sb-teal-500); }
.eval-cycle-chip.hue-amber   .eval-cycle-chip-ico { background: #F59E0B; }
.eval-cycle-chip.hue-violet  .eval-cycle-chip-ico { background: #8B5CF6; }
.eval-cycle-chip.hue-crimson .eval-cycle-chip-ico { background: var(--sb-crimson-500); }

.eval-due-cell { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }

.eval-plan-summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 6px;
}
.eval-plan-summary::-webkit-details-marker { display: none; }
.eval-plan-summary::before {
  content: "\203A"; font-weight: 700; font-size: 14px;
  color: var(--sb-teal-600); transition: transform 150ms ease; margin-right: 4px;
}
.eval-plan[open] .eval-plan-summary::before { transform: rotate(90deg); }
.eval-plan-summary:hover { background: var(--sb-slate-50); }
.eval-plan-hint { flex-shrink: 0; }
.eval-plan-body {
  padding: 8px 12px 6px;
  border-left: 2px solid var(--sb-teal-300);
  background: var(--sb-teal-50);
  border-radius: 0 8px 8px 0;
  margin-top: 4px;
}
.eval-plan-section + .eval-plan-section { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--sb-slate-200); }
.eval-plan-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sb-slate-600); font-weight: 700;
  margin-bottom: 4px;
}
.eval-plan-head .ico { color: var(--sb-teal-600); }
.eval-plan-section:last-child .eval-plan-head .ico { color: var(--sb-crimson-500); }
.eval-plan-list { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--sb-slate-700); line-height: 1.5; }
.eval-plan-list li { margin: 2px 0; }

/* ========================================================================
   /community - hero (Triple Helix SVG) · three helix cards · CTA
   ======================================================================== */

.comm-hero {
  position: relative;
  border-radius: var(--sb-radius-lg);
  background:
    linear-gradient(110deg, rgba(15,23,42,.78) 0%, rgba(49,46,129,.25) 60%, rgba(49,46,129,.10) 100%),
    url('/static/img/gen/community-hero-bg.png') center / cover no-repeat,
    linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #312E81 160%);
  color: #F8FAFC;
  padding: 22px 26px;
  overflow: hidden;
  box-shadow: var(--sb-shadow);
}
.comm-hero-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.comm-hero-copy { min-width: 0; }
.comm-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .75; font-weight: 600; }
.comm-hero-title { margin: 4px 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.comm-hero-tag { margin: 0; color: rgba(226,232,240,.85); font-size: 14px; line-height: 1.55; max-width: 700px; }
.comm-hero-tag strong { color: #fff; }
.comm-helices { flex-shrink: 0; }
.comm-helix-svg { width: 180px; height: 110px; }
@media (max-width: 880px) { .comm-hero-body { grid-template-columns: 1fr; } .comm-helices { display: none; } }

.comm-hero-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; padding: 10px 0 2px; margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.comm-strip-stat { padding: 2px 6px; border-right: 1px solid rgba(255,255,255,.08); min-width: 0; }
.comm-strip-stat:last-child { border-right: 0; }
.comm-strip-n { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.02em; }
.comm-strip-n small { font-size: 11px; color: rgba(255,255,255,.55); font-weight: 600; margin-left: 1px; }
.comm-strip-lbl { font-size: 10.5px; color: rgba(226,232,240,.7); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { .comm-hero-strip { grid-template-columns: repeat(2, 1fr); } .comm-strip-stat:nth-child(2n) { border-right: 0; } }

/* Three helix cards */
.comm-grid { gap: 16px; }
.comm-card {
  padding: 16px 18px;
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 3px solid transparent;
}
.comm-card.hue-teal   { border-top-color: var(--sb-teal-500); background: linear-gradient(180deg, var(--sb-teal-50) 0%, #fff 30%); }
.comm-card.hue-violet { border-top-color: #8B5CF6;             background: linear-gradient(180deg, #F5F3FF 0%, #fff 30%); }
.comm-card.hue-amber  { border-top-color: #F59E0B;             background: linear-gradient(180deg, #FFFBEB 0%, #fff 30%); }

.comm-card-ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
  flex-shrink: 0;
}
.hue-teal-ico   { background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700)); box-shadow: 0 6px 14px rgba(20,184,166,.3); }
.hue-violet-ico { background: linear-gradient(135deg, #8B5CF6, #6D28D9); box-shadow: 0 6px 14px rgba(139,92,246,.3); }
.hue-amber-ico  { background: linear-gradient(135deg, #F59E0B, #B45309); box-shadow: 0 6px 14px rgba(245,158,11,.3); }

.comm-subhead {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--sb-slate-500);
  margin: 6px 0 8px;
}

.comm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* Marketplace role card */
.comm-role {
  padding: 10px 12px;
  border: 1px solid var(--sb-slate-100);
  border-radius: 10px;
  background: #fff;
  transition: border-color 150ms ease, transform 150ms ease;
}
.comm-role:hover { border-color: var(--sb-teal-300); transform: translateY(-1px); }
.comm-role-body { display: flex; flex-direction: column; gap: 4px; }
.comm-role-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.comm-role-title { font-size: 13.5px; color: var(--sb-slate-900); }
.comm-role-meta { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.comm-role-meta .pill { font-size: 10px; padding: 1px 6px; }

/* Benchmark table */
.comm-bench th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sb-slate-500); font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid var(--sb-slate-100);
}
.comm-bench td { padding: 6px 8px; border-bottom: 1px solid var(--sb-slate-100); }
.comm-bench .right { text-align: right; }
.comm-bench tbody tr:hover { background: var(--sb-teal-50); }

/* Academic program cards */
.comm-program {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--sb-slate-100);
  border-radius: 10px;
  background: #fff;
  transition: border-color 150ms ease, transform 150ms ease;
}
.comm-program:hover { border-color: #8B5CF6; transform: translateY(-1px); }
.comm-uni-mark {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 16px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: var(--sb-shadow-sm);
}
.comm-program-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.comm-program-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.comm-program-uni { font-size: 12px; color: var(--sb-slate-900); text-transform: uppercase; letter-spacing: .04em; }
.comm-program-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.comm-program-meta .muted { display: inline-flex; gap: 4px; align-items: center; }
.comm-program-meta .muted .ico { color: var(--sb-slate-400); }

/* Government programme cards */
.comm-gov {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--sb-slate-100);
  border-radius: 10px;
  background: #fff;
  transition: border-color 150ms ease, transform 150ms ease;
}
.comm-gov:hover { border-color: #F59E0B; transform: translateY(-1px); }
.comm-gov-ico {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #F59E0B, #B45309);
  box-shadow: var(--sb-shadow-sm);
  flex-shrink: 0;
}
.comm-gov-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.comm-gov-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.comm-gov-agency { font-size: 12px; color: var(--sb-slate-900); text-transform: uppercase; letter-spacing: .04em; }
.comm-gov-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.comm-gov-meta .pill { font-size: 10px; padding: 1px 6px; }

/* Helpful note */
.comm-note {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px;
  background: var(--sb-slate-50);
  border: 1px dashed var(--sb-slate-200);
  border-radius: 8px;
  font-size: 11.5px; color: var(--sb-slate-600); line-height: 1.4;
  margin-top: auto;
}
.comm-note .ico { color: var(--sb-teal-600); margin-top: 1px; flex-shrink: 0; }

/* CTA footer */
.comm-cta {
  background: linear-gradient(135deg, var(--sb-teal-50) 0%, #fff 50%, #F5F3FF 100%);
  border-left: 4px solid var(--sb-teal-500);
  padding: 18px 22px;
}
.comm-cta-body { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.comm-cta-copy { max-width: 640px; }
.comm-cta-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ========================================================================
   /community - Knowledge Hub (FAQ accordion · 5 categories · 20 topics)
   ======================================================================== */

/* Hue tokens (used by category accents) */
.comm-hub-cat.hue-teal   { --hub-c: var(--sb-teal-500);  --hub-c-deep: var(--sb-teal-700); --hub-c-soft: var(--sb-teal-50); }
.comm-hub-cat.hue-amber  { --hub-c: #F59E0B;             --hub-c-deep: #B45309;            --hub-c-soft: #FFFBEB; }
.comm-hub-cat.hue-violet { --hub-c: #8B5CF6;             --hub-c-deep: #6D28D9;            --hub-c-soft: #F5F3FF; }
.comm-hub-cat.hue-rose   { --hub-c: #E11D48;             --hub-c-deep: #9F1239;            --hub-c-soft: #FFF1F2; }
.comm-hub-cat.hue-indigo { --hub-c: #4F46E5;             --hub-c-deep: #3730A3;            --hub-c-soft: #EEF2FF; }

/* Hero */
.comm-hub-hero {
  position: relative;
  border-radius: var(--sb-radius-lg);
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #0F766E 130%);
  color: #F8FAFC;
  padding: 22px 26px;
  overflow: hidden;
  box-shadow: var(--sb-shadow);
}
.comm-hub-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 20%, rgba(20,184,166,.20) 0%, transparent 60%),
              radial-gradient(circle at 10% 100%, rgba(99,102,241,.18) 0%, transparent 55%);
  pointer-events: none;
}
.comm-hub-hero-body { position: relative; }
.comm-hub-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .8; font-weight: 600; }
.comm-hub-hero-title { margin: 4px 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.comm-hub-hero-tag { margin: 0; color: rgba(226,232,240,.85); font-size: 14px; line-height: 1.55; max-width: 760px; }

.comm-hub-hero-strip {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; padding: 10px 0 2px; margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.comm-hub-strip-stat { padding: 2px 6px; border-right: 1px solid rgba(255,255,255,.08); min-width: 0; }
.comm-hub-strip-stat:last-child { border-right: 0; }
.comm-hub-strip-n { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.02em; }
.comm-hub-strip-n small { font-size: 10px; color: rgba(255,255,255,.55); font-weight: 700; margin-left: 4px; letter-spacing: .08em; }
.comm-hub-strip-lbl { font-size: 10.5px; color: rgba(226,232,240,.7); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { .comm-hub-hero-strip { grid-template-columns: repeat(2, 1fr); } .comm-hub-strip-stat:nth-child(2n) { border-right: 0; } }

/* Quick navigation pills */
.comm-hub-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 12px;
  background: var(--sb-slate-50);
  border: 1px solid var(--sb-slate-100);
  border-radius: 12px;
}
.comm-hub-nav-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--sb-slate-200);
  font-size: 12.5px;
  color: var(--sb-slate-700);
  font-weight: 600;
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.comm-hub-nav-pill:hover { transform: translateY(-1px); border-color: var(--sb-slate-300); box-shadow: var(--sb-shadow-sm); }
.comm-hub-nav-pill .comm-hub-nav-no {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--sb-slate-100);
  color: var(--sb-slate-700);
  font-size: 11px; font-weight: 700;
}
.comm-hub-nav-pill.hue-teal   .comm-hub-nav-no { background: var(--sb-teal-100);  color: var(--sb-teal-700); }
.comm-hub-nav-pill.hue-amber  .comm-hub-nav-no { background: #FEF3C7;             color: #92400E; }
.comm-hub-nav-pill.hue-violet .comm-hub-nav-no { background: #EDE9FE;             color: #5B21B6; }
.comm-hub-nav-pill.hue-rose   .comm-hub-nav-no { background: #FFE4E6;             color: #9F1239; }
.comm-hub-nav-pill.hue-indigo .comm-hub-nav-no { background: #E0E7FF;             color: #3730A3; }

/* Category card */
.comm-hub-cat {
  padding: 18px 20px 14px;
  position: relative;
  scroll-margin-top: 80px;
  border-top: 3px solid var(--hub-c, var(--sb-slate-300));
  background: linear-gradient(180deg, var(--hub-c-soft, var(--sb-slate-50)) 0%, #fff 24%);
}
.comm-hub-cat-head {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--sb-slate-200);
}
.comm-hub-cat-ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--hub-c), var(--hub-c-deep));
  box-shadow: 0 8px 16px -4px color-mix(in srgb, var(--hub-c) 38%, transparent);
}
.comm-hub-cat-copy { min-width: 0; }
.comm-hub-cat-no { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--hub-c-deep); font-weight: 700; }
.comm-hub-cat-title { margin: 2px 0 2px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--sb-slate-900); }
.comm-hub-cat-en { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--sb-slate-500); font-weight: 600; }
.comm-hub-cat-blurb { margin: 6px 0 0; color: var(--sb-slate-600); font-size: 13px; line-height: 1.5; }
.comm-hub-cat-count { white-space: nowrap; align-self: flex-start; margin-top: 4px; }

/* FAQ list */
.comm-hub-faq-list { display: flex; flex-direction: column; gap: 8px; }

.comm-hub-faq {
  border: 1px solid var(--sb-slate-100);
  border-radius: 12px;
  background: #fff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.comm-hub-faq:hover { border-color: var(--sb-slate-200); }
.comm-hub-faq[open] {
  border-color: var(--hub-c, var(--sb-slate-200));
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--hub-c) 24%, transparent);
}

.comm-hub-faq-summary {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.comm-hub-faq-summary::-webkit-details-marker { display: none; }
.comm-hub-faq-summary:hover .comm-hub-faq-cta { background: var(--hub-c, var(--sb-slate-200)); color: #fff; border-color: transparent; }

.comm-hub-faq-marker {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--hub-c, var(--sb-slate-500));
  transition: transform 150ms ease;
}
.comm-hub-faq[open] > .comm-hub-faq-summary > .comm-hub-faq-marker { transform: rotate(90deg); }

.comm-hub-faq-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.comm-hub-faq-title {
  font-size: 14px; font-weight: 600; color: var(--sb-slate-900);
  display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.comm-hub-faq-en { font-size: 11px; color: var(--sb-slate-500); letter-spacing: .02em; }

.comm-hub-new-badge {
  display: inline-block; padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  background: linear-gradient(135deg, #F97316, #C2410C);
  color: #fff;
  text-transform: uppercase;
}

.comm-hub-faq-cta {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--sb-slate-200);
  color: var(--sb-slate-600);
  background: var(--sb-slate-50);
  transition: all 150ms ease;
  white-space: nowrap;
}
.comm-hub-faq[open] > .comm-hub-faq-summary > .comm-hub-faq-cta {
  background: var(--hub-c, var(--sb-slate-700));
  color: #fff;
  border-color: transparent;
}
.comm-hub-faq[open] > .comm-hub-faq-summary > .comm-hub-faq-cta::before { content: "ปิด"; }
.comm-hub-faq:not([open]) > .comm-hub-faq-summary > .comm-hub-faq-cta::before { content: "เปิดดู"; }
/* hide the static template text - we use ::before */
.comm-hub-faq-cta { font-size: 0; }
.comm-hub-faq-cta::before { font-size: 11px; }

/* Body */
.comm-hub-faq-body {
  padding: 4px 16px 16px 46px;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--sb-slate-100);
  margin-top: -2px;
  animation: comm-hub-fade 220ms ease;
}
@keyframes comm-hub-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
.comm-hub-faq-intro {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--sb-slate-700);
  line-height: 1.55;
  padding: 10px 12px;
  background: var(--hub-c-soft, var(--sb-slate-50));
  border-left: 3px solid var(--hub-c, var(--sb-slate-300));
  border-radius: 8px;
}

.comm-hub-block { display: flex; flex-direction: column; gap: 6px; }
.comm-hub-block-head {
  margin: 0;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--hub-c-deep, var(--sb-slate-700));
  display: flex; align-items: center; gap: 8px;
}
.comm-hub-block-head::before {
  content: "";
  width: 4px; height: 14px;
  border-radius: 2px;
  background: var(--hub-c, var(--sb-slate-400));
}
.comm-hub-block-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.comm-hub-block-list li {
  position: relative;
  padding: 6px 10px 6px 26px;
  font-size: 13px;
  color: var(--sb-slate-700);
  line-height: 1.55;
  background: #fff;
  border: 1px solid var(--sb-slate-100);
  border-radius: 8px;
}
.comm-hub-block-list li::before {
  content: "";
  position: absolute;
  left: 11px; top: 12px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hub-c, var(--sb-slate-400));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-c) 20%, transparent);
}

/* External links */
.comm-hub-links {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px dashed var(--sb-slate-200);
}
.comm-hub-links-lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--sb-slate-500); font-weight: 700;
  margin-right: 4px;
}
.comm-hub-link-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--hub-c-soft, var(--sb-slate-50));
  border: 1px solid color-mix(in srgb, var(--hub-c) 25%, var(--sb-slate-200));
  color: var(--hub-c-deep, var(--sb-slate-700));
  font-size: 11.5px; font-weight: 600;
  text-decoration: none;
  transition: all 120ms ease;
}
.comm-hub-link-pill:hover {
  background: var(--hub-c, var(--sb-slate-700));
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
}
.comm-hub-link-pill .ico { color: currentColor; }

/* Footer card */
.comm-hub-foot {
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--sb-teal-50) 0%, #fff 60%, #EEF2FF 100%);
  border-left: 4px solid var(--sb-teal-500);
}
.comm-hub-foot-body { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; }
.comm-hub-foot-ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--sb-teal-500), var(--sb-teal-700));
  box-shadow: 0 8px 16px -4px rgba(20,184,166,.32);
}
.comm-hub-foot-copy { min-width: 0; }
.comm-hub-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .comm-hub-cat-head { grid-template-columns: 40px 1fr; }
  .comm-hub-cat-count { grid-column: 2; justify-self: start; }
  .comm-hub-faq-body { padding-left: 16px; }
  .comm-hub-foot-body { grid-template-columns: 1fr; text-align: left; }
  .comm-hub-foot-actions { justify-self: stretch; }
}

/* ========================================================================
   Unified hero sizing - every page's main hero card uses the same
   padding, radius, shadow, margin, and min-height so they read as a
   consistent size across the product.
   ======================================================================== */

.myday-hero,
.ko-hero,
.fhs-hero,
.ideas-hero,
.eval-hero,
.roi-hero,
.comm-hero,
.admin-hero,
.m3-hero {
  padding: 24px 28px;
  border-radius: var(--sb-radius-lg);
  height: 260px;
  min-height: 260px;
  box-sizing: border-box;
  box-shadow: var(--sb-shadow);
  margin-bottom: 0;
  overflow: hidden;
}

@media (max-width: 720px) {
  .myday-hero,
  .ko-hero,
  .fhs-hero,
  .ideas-hero,
  .eval-hero,
  .roi-hero,
  .comm-hero,
  .admin-hero,
  .m3-hero {
    padding: 18px 20px;
    height: auto;
    min-height: 200px;
    overflow: visible;
  }
}

/* ========================================================================
   4Hs quarterly questionnaire - compact 20-question redesign
   ======================================================================== */

.fhs-form-scale-legend {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  justify-content: center;
  padding: 10px 12px;
  margin: 14px 0 6px;
  background: var(--sb-slate-50);
  border: 1px dashed var(--sb-slate-200);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--sb-slate-600);
  font-weight: 600;
}
.fhs-form-scale-legend span { white-space: nowrap; }

/* Numbered question row - redesigned for readability */
.fhs-form-q {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  margin: 0;
  border: 1px solid var(--sb-slate-100);
  border-radius: 10px;
  background: #fff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.fhs-form-q:hover { border-color: var(--sb-teal-300); box-shadow: var(--sb-shadow-sm); }
.fhs-form-q:focus-within { border-color: var(--sb-teal-500); }

.fhs-form-q-text {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
  padding: 0;
}
.fhs-form-q-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  color: var(--sb-teal-700);
  background: var(--sb-teal-50);
  border: 1.5px solid var(--sb-teal-300);
}
.fhs-form-q-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fhs-form-q-label {
  font-size: 13px; font-weight: 500;
  color: var(--sb-slate-800);
  line-height: 1.4;
}
.fhs-form-q-ksi {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--sb-slate-400);
  font-family: 'JetBrains Mono', monospace;
}

/* Make the radio buttons a bit bigger on phones */
@media (max-width: 640px) {
  .fhs-form-q { grid-template-columns: 1fr; gap: 8px; }
  .fhs-form-scale { justify-content: space-between; }
}

/* ==========================================================================
   Team Discovery PDF - banner + modal (used on /blueprint)
   ========================================================================== */
.td-banner {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 18px; align-items: center;
  padding: 18px 22px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0F766E 0%, #1E293B 55%, #4C1D95 120%);
  color: #F0FDFA;
  box-shadow: 0 14px 34px rgba(15,118,110,0.28);
  overflow: hidden;
}
.td-banner > :not(.td-banner-bg) { position: relative; z-index: 1; }
.td-banner-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.td-banner-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.45; }
.td-banner-blob-1 { width: 260px; height: 260px; top: -80px; right: -40px; background: #2DD4BF; }
.td-banner-blob-2 { width: 180px; height: 180px; bottom: -60px; left: 8%; background: #8B5CF6; opacity: 0.35; }

.td-banner-ico {
  width: 58px; height: 58px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 20px rgba(13,148,136,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
  color: #5EEAD4;
}
.td-banner-ico .ico { width: 26px; height: 26px; }

.td-banner-copy { min-width: 0; }
.td-banner-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  color: rgba(94,234,212,0.88);
}
.td-banner-title {
  margin: 4px 0 6px; font-size: 20px; font-weight: 700; color: #fff;
  letter-spacing: -0.02em; line-height: 1.2;
}
.td-banner-sub {
  margin: 0 0 8px; font-size: 13px; color: rgba(230,255,251,0.85);
  line-height: 1.5; max-width: 720px;
}
.td-banner-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 11.5px; color: rgba(230,255,251,0.7); font-weight: 500;
}
.td-banner-meta span { display: inline-flex; align-items: center; gap: 5px; }
.td-banner-meta .ico { width: 12px; height: 12px; color: #5EEAD4; }

.td-banner-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; align-items: stretch; }
.td-banner-actions .btn.primary {
  background: #fff; color: var(--sb-teal-700);
  border: 0; padding: 9px 16px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(15,23,42,0.25);
}
.td-banner-actions .btn.primary:hover { background: #F0FDFA; color: var(--sb-teal-700); }
.td-banner-actions .btn.primary .ico { color: var(--sb-teal-600); }
.td-banner-actions .btn.ghost {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #E6FFFB;
}
.td-banner-actions .btn.ghost:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); color: #fff; }

@media (max-width: 760px) {
  .td-banner { grid-template-columns: 52px 1fr; padding: 16px; }
  .td-banner-actions { grid-column: 1 / -1; flex-direction: row; }
  .td-banner-actions > * { flex: 1; }
}

/* ───── Modal ─────────────────────────────────────────────────────── */
.td-modal {
  position: fixed; inset: 0;
  z-index: 8500; /* above mascot (9000 would cover it, but mascot z is 9000; modal should be above) */
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.td-modal[hidden] { display: none; }
.td-modal { z-index: 9500; } /* override: ensure modal sits above mascot-wrap (z 9000) */
.td-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 240ms ease;
}
.td-modal.is-open .td-modal-backdrop { opacity: 1; }
.td-modal-card {
  position: relative; z-index: 1;
  width: min(1100px, 100%); height: min(90vh, 900px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(15,23,42,0.45);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(14px) scale(0.98); opacity: 0;
  transition: transform 260ms cubic-bezier(.2, .8, .3, 1), opacity 200ms ease;
}
.td-modal.is-open .td-modal-card { transform: translateY(0) scale(1); opacity: 1; }

.td-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--sb-slate-200);
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
.td-modal-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.td-modal-ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, #14B8A6, #6D28D9);
  color: #fff;
  box-shadow: 0 4px 12px rgba(20,184,166,0.3);
}
.td-modal-ico .ico { width: 20px; height: 20px; color: #fff; }
.td-modal-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--sb-slate-900); letter-spacing: -0.01em; }
.td-modal-sub { margin: 2px 0 0; }
.td-modal-bar { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.td-modal-close {
  width: 34px; height: 34px; border-radius: 10px; border: 0;
  background: var(--sb-slate-100); color: var(--sb-slate-600);
  cursor: pointer; display: inline-grid; place-items: center;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.td-modal-close:hover { background: var(--sb-slate-200); color: var(--sb-slate-900); transform: rotate(90deg); }

.td-modal-body { flex: 1; min-height: 0; background: var(--sb-slate-100); position: relative; }
.td-modal-pdf {
  width: 100%; height: 100%; border: 0; display: block;
  background: var(--sb-slate-100);
}
.td-modal-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 40px 24px; height: 100%;
  color: var(--sb-slate-600); text-align: center;
}
.td-modal-fallback .ico { width: 42px; height: 42px; color: var(--sb-teal-500); }
.td-modal-fallback p { margin: 0; font-size: 14px; font-weight: 500; color: var(--sb-slate-700); }
.td-modal-fallback-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

body.td-modal-lock { overflow: hidden; }

@media (max-width: 640px) {
  .td-modal { padding: 12px; }
  .td-modal-card { height: 90vh; }
  .td-modal-title { font-size: 14px; }
  .td-modal-bar .btn.sm { padding: 5px 9px; font-size: 11.5px; }
}

/* =========================================================================
   v1.1 · Tenant pages - positions, departments, team, capacity, worksheets,
   admin console, account. Prefix: pg-/tbl-/grade-/cap-/ws-/adm-/pw-
   ========================================================================= */
.pg-hero {
  position: relative; overflow: hidden; border-radius: var(--sb-radius-lg);
  padding: 22px 26px; color: #fff;
  background: radial-gradient(circle at 12% 10%, rgba(20,184,166,.35), transparent 40%),
              radial-gradient(circle at 90% 90%, rgba(220,38,38,.22), transparent 42%),
              linear-gradient(120deg, #0F172A 0%, #1E293B 100%);
  box-shadow: var(--sb-shadow);
}
.pg-hero-body { position: relative; z-index: 1; display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.pg-hero-copy { flex: 1 1 360px; min-width: 0; }
.pg-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .75; font-weight: 600; }
.pg-hero-title { margin: 4px 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.pg-hero-tag { margin: 0; color: rgba(226,232,240,.82); font-size: 13.5px; max-width: 760px; line-height: 1.55; }
.pg-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pg-hero .btn.ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.pg-hero .btn.ghost:hover { background: rgba(255,255,255,.16); }
.pg-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(108px, max-content); gap: 6px; flex: 0 1 auto; max-width: 100%;
            background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 10px 12px; align-self: flex-start; }
.pg-stat { padding: 2px 10px; border-right: 1px solid rgba(255,255,255,.08); min-width: 0; }
.pg-stat:last-child { border-right: 0; }
.pg-stat-n { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.pg-stat-n small { font-size: 12px; font-weight: 500; opacity: .7; }
.pg-stat-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-top: 3px; white-space: nowrap; }
@media (max-width: 1280px) {
  .pg-strip { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); flex-basis: 100%; }
  .pg-stat { border-right: 0; }
}
.pg-stat.warn .pg-stat-n { color: #FCD34D; }
.pg-stat.bad .pg-stat-n { color: #FCA5A5; }
.pg-stat.good .pg-stat-n { color: #6EE7B7; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0 12px; }
.filter-bar .input { width: auto; min-width: 160px; }
.filter-bar .input.sm { padding: 7px 10px; font-size: 13px; }
.filter-bar .grow { flex: 1 1 220px; }

.tbl-wrap { overflow-x: auto; }
.tbl-wrap table.clean th { white-space: nowrap; }
.tbl-wrap table.clean td { vertical-align: middle; }
.tbl-person { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.tbl-avatar { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; background: var(--sb-slate-100); flex-shrink: 0; }
.tbl-name { font-weight: 600; font-size: 14px; line-height: 1.25; }
.tbl-name a { color: inherit; }
.tbl-sub { color: var(--sb-slate-500); font-size: 12px; }
.tbl-num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-mini { display: inline-flex; align-items: center; gap: 6px; }
.tbl-mini .progress { width: 70px; height: 6px; }

.tag-level { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--sb-slate-100); color: var(--sb-slate-700); letter-spacing: .04em; }
.tag-level.L1 { background: #FEE2E2; color: #991B1B; }
.tag-level.L2 { background: #FEF3C7; color: #92400E; }
.tag-level.L3 { background: var(--sb-teal-100); color: var(--sb-teal-700); }
.tag-level.L4 { background: #DBEAFE; color: #1E40AF; }
.tag-level.L5 { background: #EDE9FE; color: #5B21B6; }
.tag-group { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--sb-slate-300); color: var(--sb-slate-600); }
.tag-crit { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--sb-crimson-50); color: var(--sb-crimson-600); letter-spacing: .04em; }
.pi-restricted { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sb-slate-500); background: var(--sb-slate-100); border-radius: 6px; padding: 2px 7px; }

/* Grade pills 1 = best … 5 = needs improvement */
.grade-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 8px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.grade-pill.g1 { background: #065F46; color: #fff; }
.grade-pill.g2 { background: #D1FAE5; color: #065F46; }
.grade-pill.g3 { background: var(--sb-teal-100); color: var(--sb-teal-700); }
.grade-pill.g4 { background: #FEF3C7; color: #92400E; }
.grade-pill.g5 { background: #FEE2E2; color: #991B1B; }
.grade-pill.g0 { background: var(--sb-slate-100); color: var(--sb-slate-400); }
.grade-scale { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grade-scale table.clean td, .grade-scale table.clean th { padding: 7px 9px; font-size: 12.5px; }
@media (max-width: 860px) { .grade-scale { grid-template-columns: 1fr; } }

/* Position cards */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.pos-card { display: block; background: #fff; border: 1px solid var(--sb-slate-200); border-radius: var(--sb-radius); padding: 14px 16px; color: inherit; text-decoration: none; transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; position: relative; }
.pos-card:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow); border-color: var(--sb-teal-300); text-decoration: none; }
.pos-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pos-tags { display: inline-flex; gap: 4px; align-items: center; flex: 0 0 auto; white-space: nowrap; }
.tag-group, .tag-level, .tag-crit { white-space: nowrap; }
.pos-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--sb-teal-700); font-weight: 700; }
.pos-title { font-weight: 700; font-size: 15px; line-height: 1.3; margin: 4px 0 2px; }
.pos-title-th { color: var(--sb-slate-500); font-size: 12.5px; }
.pos-holder { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pos-holder img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; background: var(--sb-slate-100); }
.pos-holder-name { font-size: 13px; font-weight: 600; }
.pos-holder-sub { font-size: 11.5px; color: var(--sb-slate-500); }
.pos-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.pos-foot .pill { font-size: 11px; padding: 2px 8px; }
.pos-mini-bar { flex: 1 1 60px; }
.pos-mini-bar .progress { height: 5px; }

/* Key/value + definition blocks on detail pages */
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv dt { color: var(--sb-slate-500); font-weight: 500; }
.kv dd { margin: 0; }
@media (max-width: 720px) { .kv { grid-template-columns: 1fr; } .kv dt { margin-top: 6px; } }
.bullets { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.stack-2 { display: flex; flex-direction: column; gap: 8px; }
.stack-3 { display: flex; flex-direction: column; gap: 12px; }
.section-sp { height: 18px; }
.numbered { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sb-slate-100); font-size: 13.5px; }
.numbered:last-child { border-bottom: 0; }
.numbered .code { flex: 0 0 52px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--sb-teal-700); font-weight: 700; padding-top: 2px; }
.numbered .body { flex: 1; min-width: 0; }
.numbered .meta { color: var(--sb-slate-500); font-size: 12px; margin-top: 2px; }
.competency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.competency { background: var(--sb-slate-50); border: 1px solid var(--sb-slate-200); border-radius: 12px; padding: 12px 14px; }
.competency h4 { margin: 0 0 6px; font-size: 13px; color: var(--sb-slate-700); }
.bsc-weight-row { display: grid; grid-template-columns: 1fr 70px 70px; gap: 8px; align-items: center; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--sb-slate-100); }
.bsc-weight-row:last-child { border-bottom: 0; }
.tree-list { list-style: none; margin: 0; padding: 0; }
.tree-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--sb-slate-100); }
.tree-list li:last-child { border-bottom: 0; }

/* Capacity */
.cap-mix { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cap-mix-item { background: var(--sb-slate-50); border: 1px solid var(--sb-slate-200); border-radius: 12px; padding: 10px 12px; }
.cap-mix-name { font-size: 12px; font-weight: 600; color: var(--sb-slate-700); }
.cap-mix-pct { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.cap-mix-hint { font-size: 11px; color: var(--sb-slate-500); line-height: 1.4; margin-top: 4px; }
.cap-stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--sb-slate-100); }
.cap-stack span { display: block; height: 100%; }
.cat-c1 { background: #14B8A6; } .cat-c2 { background: #3B82F6; } .cat-c3 { background: #10B981; } .cat-c4 { background: #F59E0B; }
.cat-c5 { background: #8B5CF6; } .cat-c6 { background: #EC4899; } .cat-c7 { background: #94A3B8; }
.cap-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--sb-slate-600); margin-top: 6px; }
.cap-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.hours-pill { font-variant-numeric: tabular-nums; font-weight: 700; }
.hours-pill.over { color: var(--sb-crimson-600); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.check { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--sb-slate-200); border-left-width: 4px; border-radius: 10px; padding: 10px 12px; }
.check.red { border-left-color: var(--sb-danger); } .check.amber { border-left-color: var(--sb-warn); }
.check.green { border-left-color: var(--sb-ok); } .check.teal { border-left-color: var(--sb-teal-500); } .check.slate { border-left-color: var(--sb-slate-300); }
.check-l { font-size: 12.5px; font-weight: 600; }
.check-n { font-size: 11px; color: var(--sb-slate-500); }
.check-v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.growth-q { background: var(--sb-slate-50); border-radius: 12px; padding: 12px 14px; border: 1px solid var(--sb-slate-200); }
.growth-q h4 { margin: 0 0 6px; font-size: 13px; }
.growth-q p { margin: 0; white-space: pre-line; font-size: 13.5px; line-height: 1.55; }

/* Worksheet */
.ws-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ws-table th { position: sticky; top: 0; background: var(--sb-slate-900); color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 8px 8px; text-align: left; white-space: nowrap; z-index: 1; }
.ws-table td { padding: 7px 8px; border-bottom: 1px solid var(--sb-slate-100); vertical-align: top; }
.ws-table tr:hover td { background: var(--sb-slate-50); }
.ws-table .input, .ws-table select.input { padding: 5px 7px; font-size: 12.5px; border-radius: 7px; min-width: 60px; }
.ws-table .input.w-num { width: 84px; text-align: right; }
.ws-table .input.w-sm { width: 110px; }
.ws-table .input.w-md { width: 150px; }
.ws-table textarea.input { min-width: 180px; min-height: 40px; resize: vertical; }
.ws-table th.sup, .ws-table td.sup { background: #EFF6FF; }
.ws-table th.sup { background: #1E40AF; }
.ws-table td.self-in { background: #FFFBEB; }
.ws-table .code { font-family: ui-monospace, Menlo, monospace; font-weight: 700; color: var(--sb-teal-700); white-space: nowrap; }
.ws-table .kpi-name { font-weight: 600; max-width: 260px; }
.ws-table .kpi-src { color: var(--sb-slate-500); font-size: 11px; }
.ws-table .formula { max-width: 240px; color: var(--sb-slate-600); font-size: 12px; }
.ws-total td { font-weight: 700; background: var(--sb-slate-50); }
.ws-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; }
.ws-status.draft { color: var(--sb-slate-500); } .ws-status.submitted { color: #1E40AF; } .ws-status.reviewed, .ws-status.final { color: #065F46; }
.ws-steps { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.ws-step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--sb-slate-100); color: var(--sb-slate-600); }
.ws-step.on { background: var(--sb-teal-100); color: var(--sb-teal-700); font-weight: 600; }
.ws-step.done { background: #D1FAE5; color: #065F46; }
.ws-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--sb-slate-600); }
.ws-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; border: 1px solid var(--sb-slate-300); }
.ws-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.overall-box { display: flex; align-items: center; gap: 14px; background: var(--sb-slate-50); border: 1px solid var(--sb-slate-200); border-radius: 12px; padding: 10px 14px; }
.overall-box .big { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.overall-box .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-slate-500); }

/* Admin console */
.adm-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; border-bottom: 1px solid var(--sb-slate-200); padding-bottom: 10px; }
.adm-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--sb-slate-600); text-decoration: none; }
.adm-nav a:hover { background: var(--sb-slate-100); text-decoration: none; }
.adm-nav a.active { background: var(--sb-slate-900); color: #fff; }
.adm-tenant { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.adm-kv { background: var(--sb-slate-50); border: 1px solid var(--sb-slate-200); border-radius: 12px; padding: 10px 12px; }
.adm-kv .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-slate-500); }
.adm-kv .v { font-size: 15px; font-weight: 700; margin-top: 2px; word-break: break-word; }
.adm-kv .v.mono { font-size: 13px; }
.ledger { display: flex; flex-direction: column; gap: 8px; }
.ledger-row { display: grid; grid-template-columns: 76px 1fr 110px 70px; gap: 10px; align-items: start; background: #fff; border: 1px solid var(--sb-slate-200); border-radius: 12px; padding: 10px 12px; }
.ledger-row .code { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 12px; color: var(--sb-slate-700); }
.ledger-row .label { font-weight: 600; font-size: 13.5px; }
.ledger-row .file { color: var(--sb-slate-500); font-size: 11.5px; word-break: break-all; }
.ledger-notes { margin: 6px 0 0; padding-left: 16px; font-size: 12px; color: var(--sb-slate-600); }
.ledger-notes li { margin: 2px 0; }
.status-imported { background: #D1FAE5; color: #065F46; } .status-partial { background: #FEF3C7; color: #92400E; }
.status-reference { background: var(--sb-slate-100); color: var(--sb-slate-600); } .status-pending { background: #FEE2E2; color: #991B1B; }
.status-skipped { background: var(--sb-slate-100); color: var(--sb-slate-500); }
@media (max-width: 760px) { .ledger-row { grid-template-columns: 1fr; } }
.temp-pw { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 13px; }
.temp-pw code { font-size: 15px; font-weight: 700; background: #fff; padding: 4px 10px; border-radius: 8px; border: 1px solid #FCD34D; letter-spacing: .03em; }
.dept-card { background: #fff; border: 1px solid var(--sb-slate-200); border-radius: var(--sb-radius); padding: 16px 18px; }
.dept-card h3 { margin: 0; font-size: 16px; }
.dept-card .dept-n { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.dept-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dept-sub .pill { font-size: 11px; }
.dept-heads { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dept-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dept-head img { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; background: var(--sb-slate-100); }
.dept-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.dept-kpi { background: var(--sb-slate-50); border-radius: 8px; padding: 6px 8px; }
.dept-kpi .n { font-weight: 700; font-size: 15px; }
.dept-kpi .l { font-size: 10.5px; color: var(--sb-slate-500); text-transform: uppercase; letter-spacing: .06em; }

/* Password banner + account page */
.pw-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 20px 32px 0; padding: 10px 14px; border-radius: 12px; background: #FFFBEB; border: 1px solid #FCD34D; color: #92400E; font-size: 13px; }
.pw-banner + .page { padding-top: 18px; }
.pw-banner .btn { margin-left: auto; }
.account-card { max-width: 520px; margin: 0 auto; }
.topbar-org { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint-box { background: var(--sb-slate-50); border: 1px dashed var(--sb-slate-300); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--sb-slate-600); }
.received-kr { border-left: 3px solid var(--sb-slate-300); padding: 6px 10px; background: var(--sb-slate-50); border-radius: 0 8px 8px 0; font-size: 13px; }
.received-kr .code { font-family: ui-monospace, Menlo, monospace; font-weight: 700; color: var(--sb-slate-700); }

.status-badge.status-pending { background: var(--sb-slate-100); color: var(--sb-slate-500); }
.status-badge.status-pending .status-dot { background: var(--sb-slate-400); }


/* =========================================================================
   v1.1b · Tenant-scale UI: dashboard overview, grouped strategy map,
   collapsible OKR tree, grouped KPI list, data-driven My Day, ROI states
   ========================================================================= */
/* Horizontal bar lists (headcount by BU, KPI by BSC) */
.hbar-list { display: flex; flex-direction: column; gap: 8px; }
.hbar-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.hbar-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-label small { display: block; font-weight: 500; color: var(--sb-slate-500); font-size: 11px; }
.hbar-track { height: 12px; background: var(--sb-slate-100); border-radius: 999px; overflow: hidden; display: flex; }
.hbar-track span { display: block; height: 100%; }
.hbar-val { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--sb-slate-600); white-space: nowrap; min-width: 64px; text-align: right; }
.seg-green { background: #10B981; } .seg-amber { background: #F59E0B; } .seg-red { background: #EF4444; } .seg-pending { background: #CBD5E1; } .seg-teal { background: var(--sb-teal-500); } .seg-crim { background: var(--sb-crimson-500); }
.legend-inline { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--sb-slate-600); margin-top: 8px; }
.legend-inline i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* Worksheet pipeline */
.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pipeline-step { background: var(--sb-slate-50); border: 1px solid var(--sb-slate-200); border-radius: 12px; padding: 10px 12px; text-align: center; }
.pipeline-step .n { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.pipeline-step .l { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-slate-500); }
.pipeline-step.done { border-color: #86EFAC; background: #ECFDF5; }
.pipeline-step.active { border-color: #FCD34D; background: #FFFBEB; }

/* Tenant dashboard note strip */
.dash-note { display: flex; gap: 10px; align-items: flex-start; background: var(--sb-slate-50); border: 1px dashed var(--sb-slate-300); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; color: var(--sb-slate-600); }
.dash-note .ico { flex-shrink: 0; color: var(--sb-teal-600); margin-top: 1px; }
.mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mini-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--sb-slate-100); }
.mini-list li:last-child { border-bottom: 0; }
.mini-list .who { flex: 1; min-width: 0; }
.mini-list .who small { display: block; color: var(--sb-slate-500); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Grouped strategy map (large KPI sets) */
.smap-shell--grouped .smap-stage { justify-content: flex-start; align-items: stretch; padding: 14px 16px; gap: 8px; }
.smap-group { flex: 1 1 250px; max-width: 360px; background: #fff; border: 1px solid var(--sb-slate-200); border-radius: 12px; overflow: hidden; }
.smap-group-head { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; width: 100%; text-align: left; background: #fff; border: 0; padding: 9px 12px; cursor: pointer; font: inherit; }
.smap-group-head:hover { background: var(--sb-slate-50); }
.smap-group-code { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 700; color: var(--lyr-c, var(--sb-teal-700)); }
.smap-group-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smap-group-count { font-size: 11px; color: var(--sb-slate-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.smap-group-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--sb-slate-100); overflow: hidden; display: flex; }
.smap-group-bar i { display: block; height: 100%; }
.smap-group-kpis[hidden] { display: none; }
.smap-group-kpis { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 12px; border-top: 1px solid var(--sb-slate-100); background: var(--sb-slate-50); }
.smap-node--sm { padding: 6px 10px; min-width: 0; max-width: 100%; }
.smap-node--sm .smap-node-name { font-size: 11px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smap-node--sm .smap-node-pct { font-size: 10px; }
.smap-node--pending { background: linear-gradient(135deg, #CBD5E1, #94A3B8); }
.smap-group.is-open .smap-group-head { background: var(--sb-slate-50); }
.smap-legend-dot.pending { background: #CBD5E1; }

/* Grouped KPI list */
.kpi-group { border: 1px solid var(--sb-slate-200); border-radius: 12px; background: #fff; }
.kpi-group > summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; }
.kpi-group > summary::-webkit-details-marker { display: none; }
.kpi-group > summary:hover { background: var(--sb-slate-50); border-radius: 12px; }
.kpi-group-code { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 12px; color: var(--sb-teal-700); }
.kpi-group-title { font-weight: 600; font-size: 13.5px; }
.kpi-group-title small { display: block; color: var(--sb-slate-500); font-weight: 500; font-size: 11.5px; }
.kpi-group-bar { width: 120px; height: 8px; border-radius: 999px; background: var(--sb-slate-100); overflow: hidden; display: flex; }
.kpi-group-bar span { display: block; height: 100%; }
.kpi-group-count { font-size: 12px; color: var(--sb-slate-500); font-variant-numeric: tabular-nums; }
.kpi-group-body { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--sb-slate-100); }
.kpi-group-body .kpi-card2 { margin: 0; }
.kpi-group-actions { display: flex; gap: 6px; justify-content: flex-end; padding: 2px 4px 4px; }
.kpi-list.is-grouped { max-height: 900px; }

/* Collapsible OKR nodes */
.okr-fold { border: 0; margin: 0; }
.okr-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.okr-fold > summary::-webkit-details-marker { display: none; }
.okr-fold > summary .okr-caret { width: 18px; height: 18px; border-radius: 6px; background: var(--sb-slate-100); display: inline-grid; place-items: center; transition: transform 150ms ease; flex-shrink: 0; }
.okr-fold[open] > summary .okr-caret { transform: rotate(90deg); }
.okr-fold-meta { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.okr-fold-meta .pill { font-size: 11px; padding: 2px 8px; }

/* My Day - data-driven focus + pending KPI/KR states */
.focus-source { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sb-slate-500); background: var(--sb-slate-100); border-radius: 999px; padding: 2px 8px; margin-bottom: 8px; }
.focus-source.ai { background: var(--sb-teal-100); color: var(--sb-teal-700); }
.focus-step a { color: var(--sb-teal-700); font-weight: 600; }
.kr-code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; color: var(--sb-teal-700); margin-right: 6px; }
.kr-unscored { font-size: 11.5px; color: var(--sb-slate-500); display: inline-flex; align-items: center; gap: 6px; }
.kpi-tile.pending::before { background: var(--sb-slate-300); }
.kpi-tile-pending { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--sb-slate-500); }
.kpi-tile-pending .btn { padding: 4px 9px; font-size: 11.5px; }

/* Talent ROI unknown states */
.roi-ratio-n.band-unknown { color: var(--sb-slate-400); }
.pill.unknown { background: var(--sb-slate-100); color: var(--sb-slate-500); }

.td-banner--pending { filter: saturate(.55); }
.td-banner--pending .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Blueprint cards: reference-profile chip lives in the body (full name, never hidden by the avatar) */
.bp-profile-chip--body { align-self: center; box-shadow: none; background: var(--sb-teal-100); color: var(--sb-teal-700); padding: 3px 10px 3px 3px; margin-top: 2px; max-width: 100%; }
.bp-profile-chip--body span { white-space: nowrap; }
.bp-profile-chip--locked { background: var(--sb-slate-100); color: var(--sb-slate-500); padding: 3px 10px; }
.bp-banner-family { position: absolute; left: 12px; top: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.bp-banner { position: relative; }

/* 1H grade evaluation results (imported from the evaluation files) ======================== */
.res-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.3; }
.res-status .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: .85; }
.res-status.blue   { background: #DBEAFE; color: #1E40AF; }
.res-status.orange { background: #FFEDD5; color: #9A3412; }
.res-status.slate  { background: var(--sb-slate-100); color: var(--sb-slate-600); }
.res-status.amber  { background: #FEF3C7; color: #92400E; }
.res-status.red    { background: #FEE2E2; color: #991B1B; }
.pg-hero .res-status { background: rgba(255,255,255,.14); color: #fff; }
.pg-hero .res-status.blue .dot { background: #93C5FD; } .pg-hero .res-status.orange .dot { background: #FDBA74; }
.pg-hero .res-status.amber .dot { background: #FCD34D; } .pg-hero .res-status.red .dot { background: #FCA5A5; } .pg-hero .res-status.slate .dot { background: #CBD5E1; }
.res-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.res-pair { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; text-decoration: none; }
.res-doc { display: inline-flex; align-items: center; gap: 4px; color: var(--sb-teal-700); font-weight: 600; text-decoration: none; white-space: nowrap; }
.res-doc:hover { text-decoration: underline; }
.res-card { border-left: 4px solid var(--sb-teal-500); }
.res-narrative { white-space: pre-wrap; line-height: 1.65; font-size: 13.5px; margin: 0; }
.res-more summary { cursor: pointer; font-size: 13px; }
.res-table td, .res-items td, .res-mini td { vertical-align: top; }
.res-items td.cmt, .res-mini td.cmt { min-width: 260px; max-width: 440px; white-space: normal; line-height: 1.45; }
.res-items td.sup, .res-items th.sup, .res-mini td.sup, .res-mini th.sup { background: #EFF6FF; }
.res-items tr.res-total td { border-top: 2px solid var(--sb-slate-200); }
.res-formula summary { cursor: pointer; list-style: none; }
.res-formula summary::-webkit-details-marker { display: none; }
.res-formula div { margin-top: 4px; max-width: 440px; white-space: normal; color: var(--sb-slate-600); line-height: 1.45; }

/* Real distribution of supervisor grade totals under the Norm Curve ====================== */
.norm-hist { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; align-items: end; margin: 16px 4px 0; }
.norm-hist-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.norm-hist-bar { width: 100%; border-radius: 7px 7px 2px 2px; box-shadow: inset 0 -1px 0 rgba(15,23,42,.06); }
.norm-hist-bar.g1 { background: #065F46; } .norm-hist-bar.g2 { background: #34D399; }
.norm-hist-bar.g3 { background: var(--sb-teal-300, #5EEAD4); } .norm-hist-bar.g4 { background: #FCD34D; }
.norm-hist-bar.g5 { background: #FCA5A5; }
.norm-hist-n { font-size: 11px; font-weight: 700; color: var(--sb-slate-700); min-height: 14px; }
.norm-hist-lbl { font-size: 10px; color: var(--sb-slate-500); }

/* Grade table under the Norm Curve ======================================================= */
.gt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 0; }
.gt-stat { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; background: var(--sb-slate-50); border: 1px solid var(--sb-slate-100); border-radius: 10px; }
.gt-stat-l { font-size: 11px; color: var(--sb-slate-500); }
.gt-stat strong { font-size: 15px; color: var(--sb-slate-800); }
.gt-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.gt-bucket { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--sb-slate-100); background: #fff; }
.gt-bucket-g { font-weight: 700; font-size: 12px; min-width: 26px; }
.gt-bucket-n { font-size: 13px; font-weight: 700; min-width: 26px; text-align: right; }
.gt-bucket-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--sb-slate-100); overflow: hidden; }
.gt-bucket-bar span { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.gt-bucket-pct { font-size: 11px; min-width: 32px; text-align: right; }
.gt-bucket.g1 { color: #065F46; } .gt-bucket.g2 { color: #10B981; } .gt-bucket.g3 { color: #0D9488; }
.gt-bucket.g4 { color: #B45309; } .gt-bucket.g5 { color: #B91C1C; }
.gt-dept { margin-top: 14px; border: 1px solid var(--sb-slate-100); border-radius: 12px; padding: 10px 12px; background: var(--sb-slate-50); }
.gt-dept > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--sb-slate-700); }
.gt-dept-table { margin-top: 8px; background: #fff; }
.gt-table td, .gt-table th { vertical-align: middle; }
.gt-band { padding: 3px 9px; font-size: 11px; }
.gt-better { color: #047857; } .gt-worse { color: #B91C1C; }
.gt-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
.gt-sort:hover { color: var(--sb-teal-700); text-decoration: underline; }
.gt-sort.on { color: var(--sb-teal-700); }
.gt-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.gt-pager-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gt-pager-btns .btn[disabled] { opacity: .45; pointer-events: none; }
.gt-table th.is-sorted { background: var(--sb-teal-50, #F0FDFA); }
.gt-arrow { font-size: 9px; opacity: .45; margin-left: 1px; }
.gt-sort.on .gt-arrow { opacity: 1; }

/* Admin · Compensation (payroll, admin-only) ============================================= */
.comp-confidential { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 14px; padding: 10px 14px;
  border-radius: 12px; background: #FFF7ED; border: 1px solid #FED7AA; color: #7C2D12; font-size: 12.5px; line-height: 1.5; }
.comp-confidential svg { margin-top: 2px; flex-shrink: 0; }
.comp-hero-unit { font-size: 15px; font-weight: 500; opacity: .75; }
.comp-recon { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.comp-recon.ok { background: rgba(16,185,129,.16); color: #A7F3D0; }
.comp-recon.bad { background: rgba(239,68,68,.18); color: #FECACA; }
.card .comp-recon.ok { background: #D1FAE5; color: #065F46; }
.card .comp-recon.bad { background: #FEE2E2; color: #991B1B; }
.comp-recon.sm { padding: 2px 8px; font-size: 11px; }
.comp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.comp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1180px) { .comp-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .comp-grid-2 { grid-template-columns: 1fr; } }
.comp-chart { position: relative; height: 230px; }
.comp-chart-tall { height: 340px; }
.comp-month-table td.num, .comp-month-table th.num, .comp-table td.num, .comp-table th.num,
.comp-group-table td.num, .comp-group-table th.num { text-align: right; white-space: nowrap; }
.comp-total-row td { border-top: 2px solid var(--sb-slate-200); background: var(--sb-slate-50); }
.comp-bar { display: inline-block; vertical-align: middle; width: 120px; height: 8px; margin-right: 8px; border-radius: 999px; background: var(--sb-slate-100); overflow: hidden; }
.comp-bar span { display: block; height: 100%; border-radius: 999px; background: var(--sb-teal-600); }
.comp-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--sb-slate-800); cursor: pointer; text-align: left; }
.comp-link:hover { color: var(--sb-teal-700); text-decoration: underline; }
.comp-bands { display: flex; flex-direction: column; gap: 10px; }
.comp-band { display: grid; grid-template-columns: 76px minmax(0, 1fr) 190px 150px; align-items: center; gap: 12px; }
.comp-band-label { display: flex; flex-direction: column; line-height: 1.2; }
.comp-band-track { position: relative; height: 22px; border-radius: 6px; background: var(--sb-slate-50); }
.comp-band-track .whisker { position: absolute; top: 10px; height: 2px; background: var(--sb-slate-400); border-radius: 2px; }
.comp-band-track .box { position: absolute; top: 4px; height: 14px; border-radius: 4px; background: var(--sb-teal-500); }
.comp-band-track .med { position: absolute; top: 2px; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px var(--sb-teal-700); }
.comp-band-track .me { position: absolute; top: 3px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--sb-slate-900); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15,23,42,.35); }
.comp-band-val { white-space: nowrap; }
.comp-band-out details summary { cursor: pointer; color: #B45309; }
.comp-band-out ul { margin: 6px 0 0; padding-left: 16px; font-size: 12px; }
.comp-band--single { grid-template-columns: 1fr; margin-top: 8px; }
.comp-band--single .comp-band-track { height: 26px; }
.comp-band-scale { display: flex; justify-content: space-between; color: var(--sb-slate-500); margin-top: 4px; }
@media (max-width: 900px) { .comp-band { grid-template-columns: 60px minmax(0, 1fr); } .comp-band-val, .comp-band-out { grid-column: 2; } }
.comp-flag-list h3 { font-size: 13.5px; margin: 0 0 8px; display: flex; flex-direction: column; gap: 2px; }
.comp-flag-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.comp-flag-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--sb-slate-100); background: #fff; font-size: 13px; }
.comp-flag-list.hp li { border-left: 3px solid #eb6834; }
.comp-flag-list.rt li { border-left: 3px solid #1baf7a; }
.comp-compa { display: inline-block; min-width: 44px; padding: 2px 7px; border-radius: 7px; text-align: center; font-family: var(--sb-font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; background: var(--sb-slate-100); color: var(--sb-slate-700); }
.comp-compa.hi { background: #FFEDD5; color: #9A3412; }
.comp-compa.lo { background: #DCFCE7; color: #166534; }
.comp-grade { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--sb-slate-100); color: var(--sb-slate-700); font-size: 11.5px; font-weight: 700; }
.comp-up { color: #047857; } .comp-down { color: #B91C1C; }
.comp-on { color: var(--sb-teal-700); font-weight: 600; }
.comp-moves { display: flex; flex-direction: column; gap: 6px; }
.comp-move { border: 1px solid var(--sb-slate-100); border-radius: 10px; padding: 8px 12px; background: #fff; }
.comp-move summary { cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.comp-move h4 { margin: 10px 0 4px; font-size: 12px; color: var(--sb-slate-600); }
.comp-move ul { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.7; }
.comp-move-n { font-family: var(--sb-font-mono, ui-monospace, monospace); font-weight: 700; font-size: 12px; padding: 1px 7px; border-radius: 6px; }
.comp-move-n.in { background: #DBEAFE; color: #1E40AF; } .comp-move-n.out { background: #FEE2E2; color: #991B1B; }
.comp-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.comp-filter input[type=search] { min-width: 240px; flex: 1 1 240px; }
.comp-per { display: flex; gap: 4px; margin-left: auto; }
.comp-table td { vertical-align: middle; }
.comp-perf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sb-slate-100); }
/* admin-only payroll strip used on other pages (dashboard, departments, position, capacity, results) */
.pay-card { border-left: 4px solid #F59E0B; }
.pay-card .pay-lock { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0; font-size: 11px; font-weight: 600; color: #9A3412; background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 999px; padding: 2px 9px; }
.pay-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 10px; }
.pay-kv div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--sb-slate-50); border: 1px solid var(--sb-slate-100); }
.pay-kv span { font-size: 11px; color: var(--sb-slate-500); }
.pay-kv strong { font-size: 15px; font-family: var(--sb-font-mono, ui-monospace, monospace); color: var(--sb-slate-800); }