/* ============================================================
   Paragon Blueprint Portal — Base layout & typography
   Primary reading pair: cocoa on bone. Dark surfaces: bone on cocoa.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--cocoa);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: var(--lh-heading); font-weight: 600; }
h1 { font-size: var(--fs-title); font-weight: 300; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--sp-4); }
a { color: var(--dusty-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
svg { display: block; }

/* The hidden attribute always wins, even against display-setting
   classes (.row, .grid set display and would otherwise override the
   browser's built-in [hidden] { display: none }). */
[hidden] { display: none !important; }

/* ---- App frame: sidebar + main ---- */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--cocoa);
  color: var(--bone);
  padding: var(--sp-5) var(--sp-4);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.sidebar .wordmark img { width: 168px; display: block; }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--dusty-blue-soft);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.nav-link:hover { color: var(--bone); text-decoration: none; background: rgba(235, 235, 220, 0.06); }
.nav-link.active { color: var(--bone); background: rgba(114, 139, 167, 0.22); box-shadow: inset 2px 0 0 var(--dusty-blue); }
/* Portal toggle: a structural divider between route groups and the toggle. */
.nav-divider { margin-top: 10px; border-top: 1px solid rgba(235, 235, 220, 0.15); border-radius: 0; padding-top: 12px; }
.nav-link .nav-num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--dusty-blue);
  width: 1.4rem;
}

.sidebar .member-chip {
  margin-top: auto;
  border-top: 1px solid rgba(235, 235, 220, 0.15);
  padding-top: var(--sp-4);
  font-size: var(--fs-small);
}
.sidebar .member-chip .name { font-weight: 600; color: var(--bone); }
.sidebar .member-chip .svc {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--dusty-blue-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main {
  padding: var(--sp-6) var(--sp-7) var(--sp-7);
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}

/* ---- Eyebrow labels (PT Mono small caps pattern) ----
   The canonical overline-label standard: --fs-small + 0.08em tracking. Its
   siblings .stat-label / .panel-title / .dash-metric-label (components.css)
   intentionally track this rule, and the secondary micro-size labels share its
   tracking — edit those together if you change the standard here. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dusty-ink);
  margin-bottom: var(--sp-2);
}
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--dusty-blue-soft); }

/* ---- Cards ---- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
}
.card.accent-left { border-left: 3px solid var(--dusty-blue); }

.muted { color: var(--text-mute); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); }
.mono { font-family: var(--font-mono); }

/* Prose measure: cap a body-text block to a comfortable reading line length.
   Apply to paragraphs/notices/help text, not to labels, rows, or numerals. */
.prose { max-width: var(--measure); }
.prose-narrow { max-width: var(--measure-narrow); }
.prose-wide { max-width: var(--measure-wide); }
.prose-lead { max-width: var(--measure-lead); }

/* ---- Header band (cocoa) ---- */
.band {
  background: var(--cocoa);
  color: var(--bone);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
}
.band .eyebrow { color: var(--dusty-blue-soft); }

hr.rule { border: 0; border-top: 1px solid var(--rule-soft); margin: var(--sp-5) 0; }

/* ---- Utility grid ---- */
.grid { display: grid; gap: var(--sp-4); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.row { display: flex; align-items: center; gap: var(--sp-3); }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
  }
  .sidebar .wordmark img { width: 120px; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar .member-chip { display: none; }
  .main { padding: var(--sp-4); }
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .nav-link .nav-num { display: none; }
}

/* ---- Focus and reduced motion ---- */
:focus-visible { outline: 2px solid var(--dusty-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}