:root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel-2:#fcfcff;
  --line:#e7eaf3;
  --text:#182033;
  --muted:#6d7688;
  --primary:#4b2aad;
  --primary-2:#6b4fe6;
  --accent:#efe9ff;
  --shadow:0 16px 40px rgba(31,36,48,.08);

  --good-bg:#eef9f2;
  --good-fg:#1f7a4d;
  --warn-bg:#fff6e8;
  --warn-fg:#9a6700;
  --danger-bg:#ffe9e9;
  --danger-fg:#b42318;
  --soft-bg:#f3efff;
  --soft-fg:#6a35d8;
  --neutral-bg:#f4f5f7;
  --neutral-fg:#475467;
}

.metrics-page{display:grid;gap:18px}
.metrics-hero{
  background:
    radial-gradient(circle at top right, rgba(107,79,230,.12), transparent 28%),
    linear-gradient(180deg,#fff,#fbfbff);
  border:1px solid var(--line);
  border-radius:28px;
  padding:24px;
  box-shadow:var(--shadow);
  display:grid;
  gap:18px;
}
.metrics-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}
.metrics-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--accent);
  color:var(--primary);
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  margin-bottom:12px;
}
.metrics-hero h1{
  margin:0;
  font-size:34px;
  line-height:1.06;
  letter-spacing:-.03em;
}
.metrics-hero p{
  margin:10px 0 0;
  max-width:920px;
  color:var(--muted);
  line-height:1.5;
  font-size:14px;
}
.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.k-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:14px;
  padding:11px 14px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.k-btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 24px rgba(75,42,173,.20);
}
.k-btn.socrates{
  background:#fff;
  color:var(--primary);
  border-color:rgba(75,42,173,.18);
}
.hero-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.hero-tab{
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}
.hero-tab.active{
  background:var(--accent);
  border-color:transparent;
  color:var(--primary);
}
/* Canonical family navigation shared by every Metrics route. */
.metrics-family-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  padding:7px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  box-shadow:var(--shadow);
  scrollbar-width:thin;
}
.metrics-family-tab{
  flex:0 0 auto;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:11px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}
.metrics-family-tab:hover{
  border-color:var(--line);
  background:var(--panel-2);
  color:var(--text);
}
.metrics-family-tab.active{
  border-color:#d8cdfc;
  background:var(--accent);
  color:var(--primary);
}
:root[data-tetra-theme="light"] body[data-metrics-family] .metrics-family-tabs{
  background:#fff!important;
  border-color:rgba(44,62,89,.14)!important;
}
:root[data-tetra-theme="light"] body[data-metrics-family] .metrics-family-tab{
  color:#526079!important;
}
:root[data-tetra-theme="light"] body[data-metrics-family] .metrics-family-tab.active{
  background:#efe9ff!important;
  border-color:#d8cdfc!important;
  color:#43249b!important;
}
.hero-status{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.summary-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.summary-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  box-shadow:var(--shadow);
  display:grid;
  gap:8px;
}
.summary-label{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.summary-value{
  font-size:28px;
  font-weight:800;
  letter-spacing:-.03em;
}
.summary-meta{
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}
.tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
}
.tag.good{background:var(--good-bg);color:var(--good-fg);border-color:transparent}
.tag.warn{background:var(--warn-bg);color:var(--warn-fg);border-color:transparent}
.tag.danger{background:var(--danger-bg);color:var(--danger-fg);border-color:transparent}
.tag.soft{background:var(--soft-bg);color:var(--soft-fg);border-color:transparent}
.tag.neutral{background:var(--neutral-bg);color:var(--neutral-fg);border-color:transparent}

.surface-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-head{
  padding:18px 18px 14px;
  border-bottom:1px solid var(--line);
  display:grid;
  gap:8px;
  background:linear-gradient(180deg,#fff,#fcfcff);
}
.panel-head h2{
  margin:0;
  font-size:18px;
  letter-spacing:-.02em;
}
.panel-sub{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}
.panel-body{
  padding:16px 18px 18px;
  display:grid;
  gap:16px;
}

.socrates-card{
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--panel-2);
  padding:14px;
  display:grid;
  gap:10px;
}
.socrates-title{
  font-size:14px;
  font-weight:800;
}
.socrates-copy{
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}

@media (max-width:1400px){
  .summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .metrics-hero-top{flex-direction:column}
  .hero-actions{justify-content:flex-start}
}
@media (max-width:720px){
  .summary-strip{grid-template-columns:1fr}
  .metrics-family-tabs{margin-inline:-4px;padding:6px}
}



html,body{
  margin:0;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
}
body{
  overflow:hidden;
}
.app-shell{
  display:grid;
  grid-template-columns:var(--k-sidebar-w, 224px) 1fr;
  height:100vh;
  min-height:100vh;
}
body.sidebar-collapsed .app-shell{
  grid-template-columns:var(--k-sidebar-collapsed, 78px) 1fr !important;
}
.right-column{
  display:grid;
  grid-template-rows:auto 1fr;
  min-width:0;
  height:100vh;
}
.page-content{
  overflow:auto;
  min-height:0;
  padding:20px;
}

/* Keep the canonical sidebar rail through the tablet band. Previously this
   breakpoint collapsed the shell to one column at 1100px, while the sidebar
   does not become mobile navigation until 720px. The resulting 721–1100px
   dead zone rendered the rail as a full-width page. */
@media (min-width:721px) and (max-width:1024px){
  html,
  body[data-metrics-family]{
    height:auto !important;
    min-height:100% !important;
    overflow-y:auto !important;
  }
  body[data-metrics-family]:has(.app-shell){
    height:auto !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  .app-shell{
    grid-template-columns:var(--k-sidebar-w, 224px) minmax(0,1fr) !important;
    height:auto !important;
    min-height:100vh !important;
  }
  body.sidebar-collapsed .app-shell{
    grid-template-columns:var(--k-sidebar-collapsed, 78px) minmax(0,1fr) !important;
  }
  .right-column{
    height:auto !important;
    min-height:100vh !important;
  }
  .page-content{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

@media (max-width:720px){
  body{overflow:auto}
  .app-shell,
  body.sidebar-collapsed .app-shell{
    grid-template-columns:minmax(0,1fr) !important;
    height:auto;
    min-height:0;
  }
  .right-column{height:auto}
  .page-content{overflow:visible}
}