/* ============================================================================
   Naviquant Institutional — design tokens + base styles
   Brand source: www.naviquant.com (navy #08265C + Roboto + heavy weights)
   ============================================================================ */

:root {
  /* Brand palette */
  --nq-navy: #08265C;
  --nq-navy-700: #0E3478;
  --nq-navy-50: #F3F5FA;
  --nq-ink: #08265C;        /* primary text */
  --nq-muted: #6B7791;      /* secondary text */
  --nq-faint: #9BA4B8;      /* hints */
  --nq-line: #E4E7EF;       /* borders */
  --nq-paper: #FFFFFF;      /* surface */
  --nq-bg: #FAFBFD;         /* page */

  /* Rating accents — restrained, fitting with navy */
  --nq-green: #1F7A55;
  --nq-green-bg: #E8F3EE;
  --nq-amber: #8A5A00;
  --nq-amber-bg: #FBF1DC;
  --nq-red: #A11E2A;
  --nq-red-bg: #F8E5E7;

  /* Type */
  --nq-font: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --nq-mono: 'Roboto Mono', 'SF Mono', Menlo, monospace;
}

/* Base */
html, body {
  font-family: var(--nq-font);
  background: var(--nq-bg);
  color: var(--nq-ink);
  font-weight: 400;
  letter-spacing: -0.005em;
}
h1, h2, h3 { font-weight: 900; letter-spacing: -0.02em; color: var(--nq-ink); }
h1 { font-size: 2.75rem; line-height: 1.05; }
h2 { font-size: 1.625rem; line-height: 1.15; }
h3 { font-size: 1.125rem; line-height: 1.25; font-weight: 700; }

/* ----- Numbered section labels (e.g. "01 · EXECUTIVE SUMMARY") -------------- */
.nq-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nq-muted);
  margin: 2.5rem 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nq-section-label .num {
  font-family: var(--nq-mono);
  color: var(--nq-navy);
  font-weight: 700;
}
.nq-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nq-line);
  margin-left: 0.75rem;
}

/* ----- Surfaces ----------------------------------------------------------- */
.nq-card {
  background: var(--nq-paper);
  border: 1px solid var(--nq-line);
  border-radius: 4px;
}

.nq-header {
  background: var(--nq-paper);
  border-bottom: 1px solid var(--nq-line);
}
.nq-header .brand {
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--nq-navy);
}
.nq-header .brand .sub {
  font-weight: 400;
  color: var(--nq-muted);
  margin-left: 0.5rem;
  font-size: 0.85rem;
}

/* ----- Buttons ------------------------------------------------------------ */
.nq-btn {
  background: var(--nq-navy);
  color: white;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.6rem 1.1rem;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 120ms;
}
.nq-btn:hover { background: var(--nq-navy-700); }
.nq-btn.secondary {
  background: transparent;
  color: var(--nq-navy);
  border: 1px solid var(--nq-navy);
}
.nq-btn.secondary:hover { background: var(--nq-navy-50); }
.nq-btn.subtle {
  background: var(--nq-navy-50);
  color: var(--nq-navy);
}

/* ----- Rating pills ------------------------------------------------------- */
.nq-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--nq-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.55rem;
  border-radius: 2px;
}
.nq-rating::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.nq-rating.GREEN  { color: var(--nq-green);  background: var(--nq-green-bg); }
.nq-rating.YELLOW { color: var(--nq-amber);  background: var(--nq-amber-bg); }
.nq-rating.RED    { color: var(--nq-red);    background: var(--nq-red-bg); }

/* ----- Summary tiles ------------------------------------------------------ */
.nq-tile {
  background: var(--nq-paper);
  border: 1px solid var(--nq-line);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
}
.nq-tile .label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nq-muted);
}
.nq-tile .value {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--nq-ink);
  line-height: 1;
  margin-top: 0.5rem;
}
.nq-tile.green  .value { color: var(--nq-green); }
.nq-tile.yellow .value { color: var(--nq-amber); }
.nq-tile.red    .value { color: var(--nq-red); }

/* ----- Tables ------------------------------------------------------------- */
.nq-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--nq-paper);
}
.nq-table thead th {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nq-muted);
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--nq-line);
  background: var(--nq-navy-50);
  white-space: nowrap;
}
.nq-table thead th.right { text-align: right; }
.nq-table tbody td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--nq-line);
  font-size: 0.875rem;
  vertical-align: top;
}
.nq-table tbody tr:hover:not(.detail-row) { background: var(--nq-navy-50); }
.nq-table tbody tr.detail-row { background: var(--nq-bg); }
.nq-table tbody tr.detail-row td { padding: 1.25rem 1.5rem; }
.nq-table .ticker {
  font-family: var(--nq-mono);
  font-weight: 700;
  color: var(--nq-navy);
}
.nq-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nq-table .muted { color: var(--nq-muted); font-size: 0.75rem; }

/* ----- Cover header ------------------------------------------------------- */
.nq-cover {
  background: var(--nq-navy);
  color: white;
  padding: 3rem 2.5rem 2.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  position: relative;
  overflow: hidden;
}
.nq-cover::after {
  /* Subtle navy gradient accent */
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.04) 100%);
  pointer-events: none;
}
.nq-cover .eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.nq-cover h1 {
  color: white;
  font-size: 2.5rem;
  margin: 0.6rem 0 0.4rem;
}
.nq-cover .period {
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  font-weight: 400;
}
.nq-cover .meta {
  margin-top: 1.5rem;
  display: flex;
  gap: 2rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
}
.nq-cover .meta .item .label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-bottom: 0.25rem;
}
.nq-cover .meta .item .value {
  color: white;
  font-weight: 700;
}
.nq-cover .status-pill {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  font-family: var(--nq-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  background: rgba(255,255,255,0.12);
  color: white;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
}

/* ----- Confidential banner ------------------------------------------------ */
.nq-confidential {
  background: transparent;
  border-top: 1px solid var(--nq-line);
  margin-top: 3rem;
  padding-top: 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nq-faint);
  text-align: center;
}

/* ----- Criterion breakdown chips ----------------------------------------- */
.crit {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: 2px;
  border-left: 3px solid transparent;
  font-size: 0.8rem;
}
.crit.full    { background: var(--nq-green-bg);  border-left-color: var(--nq-green); }
.crit.partial { background: var(--nq-amber-bg);  border-left-color: var(--nq-amber); }
.crit.none    { background: var(--nq-red-bg);    border-left-color: var(--nq-red); }
.crit.na      { background: var(--nq-bg);        border-left-color: var(--nq-line); color: var(--nq-muted); font-style: italic; }
.crit .pts { font-family: var(--nq-mono); font-weight: 700; white-space: nowrap; }
.crit .pts .max { font-weight: 400; opacity: 0.6; }

/* ----- View transitions --------------------------------------------------- */
.view { animation: fadeIn 120ms ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ----- Print / PDF — Browser Rendering will use these rules -------------- */
@media print {
  body { background: white; }
  .no-print, header, .nq-btn { display: none !important; }
  .nq-cover { break-inside: avoid; page-break-after: avoid; }
  .nq-table tbody tr { break-inside: avoid; }
  .nq-section-label { break-after: avoid; }
  /* Open all detail rows so the PDF shows everything */
  tr[id^="fund-detail-"] { display: table-row !important; }
}