/* ============================================================
   Paragon Content Engine — Base layout & typography
   Primary reading pair: cocoa on bone. Dark surfaces: bone on cocoa.
   Mirrors the member portal's base; the two apps read as one product.
   ============================================================ */

*, *::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. */
[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;
  /* Grid item: min-width:0 lets it shrink below its min-content so the collapsed
     top-bar nav scrolls internally (overflow-x) instead of forcing the whole
     .app grid wider than the viewport. Pairs with `.sidebar nav { min-width:0 }`. */
  min-width: 0;
  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); }
.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 .user-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 .user-chip .name { font-weight: 600; color: var(--bone); }
.sidebar .user-chip .role {
  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) ---- */
.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. */
.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; }
  /* Collapse the sidebar into a top bar: wordmark + user on row 1, the nav as a
     single horizontal scroll strip on row 2 — never a squeezed vertical column. */
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    row-gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }
  .sidebar .wordmark img { width: 120px; }
  .sidebar nav {
    order: 3;
    flex-basis: 100%;
    /* min-width:0 lets this flex item shrink below its nowrap min-content and
       scroll INTERNALLY (overflow-x); without it the collapsed nav forces the
       whole .sidebar/.main grid wider than the viewport (sideways page scroll
       at tablet widths). */
    min-width: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--sp-1);
  }
  .sidebar .nav-link { white-space: nowrap; flex: 0 0 auto; }
  /* Compact chip in the collapsed header: the sign-out control must stay
     reachable at every width (spec flow 2). */
  .sidebar .user-chip {
    order: 2;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: 0;
    margin-left: auto;
    border-top: 0;
    padding-top: 0;
  }
  .sidebar .user-chip .role { display: none; }
  .sidebar .chip-signout { margin-top: 0; }
  .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; }
/* A11: --dusty-ink (#4A6280) is <3:1 on the cocoa sidebar; use the light soft
   blue (#A8B6C6 on cocoa ~5:1) so the keyboard focus ring stays visible there. */
.sidebar :focus-visible { outline-color: var(--dusty-blue-soft); }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cocoa);
  color: var(--bone);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  z-index: 10;
}
.skip-link:focus { left: var(--sp-2); }