/* ==========================================================================
   Silvercoin Asset Management — Internal Research Framework Library
   Shared stylesheet. Design tokens and components mirror the public site
   (silvercoinamc.com) so the library reads as one system, but this is an
   INTERNAL reference and is never published.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-weight: 400;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s ease, opacity .25s ease; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ---- Design tokens (identical to the public site) ---- */
:root {
  --bone: #f6f3ed;
  --bone-warm: #efeae0;
  --cream: #fbf8f2;
  --ink: #1a1714;
  --ink-soft: #3a342c;
  --ink-muted: #7a7168;
  --hairline: #d9d1c4;
  --hairline-strong: #bcb1a0;
  --gold: #8b6f47;
  --gold-deep: #6b5334;
  --gold-light: #b69869;
  --sage: #5a6f56;
  --amber: #a06a1f;      /* verify flag (library only) */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --container: 1180px;
  --gutter: clamp(1.25rem, 3vw, 2rem);
  --nav-h: 64px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -0.025em; }
h3 { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 1.02rem; font-weight: 600; }
p { color: var(--ink-soft); }
strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--gold);
  display: inline-block;
}
.serif-italic { font-style: italic; font-weight: 400; }

/* ---- Layout ---- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(2.5rem, 5vw, 4rem) 0; position: relative; }
.section--tight { padding: clamp(1.75rem, 3vw, 2.5rem) 0; }
.section--warm { background: var(--bone-warm); }
.section--ink { background: var(--ink); color: #f3ece0; }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink p { color: #b9b0a2; }
.section--ink .eyebrow { color: var(--gold-light); }
.section--ink .eyebrow::before { background: var(--gold-light); }
.hairline { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

.section-head { margin-bottom: 2rem; }
.section-head h2 { margin-bottom: 0.5rem; }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.lede { font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); max-width: 760px; }
.prose p { font-size: 1rem; line-height: 1.75; margin-bottom: 1.1rem; max-width: 820px; }
.prose p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Header
   ========================================================================== */
.lib-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(246, 243, 237, 0.92);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--hairline);
}
.lib-header .bar {
  max-width: var(--container); margin: 0 auto; height: 100%;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}
.lib-brand { display: flex; align-items: baseline; gap: 0.6rem; white-space: nowrap; }
.lib-brand strong { font-weight: 700; letter-spacing: -0.01em; font-size: 1.02rem; color: var(--ink); }
.lib-brand span {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
/* Single-line scrolling strip: scales to any number of sectors without the
   sticky header growing. The home grid stays the primary way to navigate. */
.lib-nav {
  margin-left: auto; display: flex; flex-wrap: nowrap; gap: 0 1rem; align-items: center;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  min-width: 0; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
}
.lib-nav::-webkit-scrollbar { height: 3px; }
.lib-nav::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 2px; }
.lib-nav a {
  font-size: 0.78rem; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  padding: 0.25rem 0; border-bottom: 1px solid transparent; flex: none;
}
.lib-nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.lib-nav a.active { color: var(--ink); border-bottom-color: var(--gold); }

/* Internal banner */
.lib-flag {
  background: var(--ink); color: #d4c9b5;
  font-size: 0.72rem; letter-spacing: 0.05em; text-align: center;
  padding: 0.4rem 1rem;
}
.lib-flag strong { color: var(--gold-light); font-weight: 600; }

/* ==========================================================================
   Hero
   ========================================================================== */
.lib-hero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.lib-hero .eyebrow { margin-bottom: 1.25rem; }
.lib-hero h1 { max-width: 20ch; }
.lib-hero .lede { margin-top: 1.25rem; }
.lib-hero .oneliner {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline);
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 600; letter-spacing: -0.015em; color: var(--ink); max-width: 900px; line-height: 1.4;
}

/* On-this-page nav */
.page-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
  padding: 1rem 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.page-nav .label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-muted); padding-right: 1.25rem; border-right: 1px solid var(--hairline);
}
.page-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.page-nav a { font-size: 0.86rem; font-weight: 500; color: var(--ink-soft); }
.page-nav a:hover { color: var(--gold); }
@media (max-width: 700px) {
  .page-nav { flex-direction: column; align-items: flex-start; }
  .page-nav .label { border-right: 0; padding-right: 0; }
}

/* ==========================================================================
   Card grids
   ========================================================================== */
.grid { display: grid; gap: 1.1rem; }
/* Grid and flex children default to min-width:auto, so a wide child (a table
   with a min-width, a long code string) refuses to shrink and pushes the page
   into horizontal overflow. Allowing them to shrink lets .table-wrap scroll
   internally instead, which is what we want. */
.grid > *, .pillars > *, .sector-grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--cream); border: 1px solid var(--hairline);
  padding: 1.6rem 1.5rem; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 38px; height: 2px;
  background: var(--gold); opacity: 0.85;
}
.card:hover { transform: translateY(-3px); border-color: var(--hairline-strong); box-shadow: 0 16px 36px -16px rgba(26,23,20,0.12); }
.card .num {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; color: var(--gold);
  display: block; margin-bottom: 1.1rem;
}
.card h3 { margin-bottom: 0.6rem; }
.card p { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }

/* Pillars (bordered, for "what drives a winner") */
.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.pillar { padding: 1.75rem 1.5rem; border-right: 1px solid var(--hairline); transition: background .3s var(--ease); }
.pillar:last-child { border-right: 0; }
.pillar:hover { background: var(--cream); }
.pillar .num {
  font-style: italic; font-weight: 400; font-size: 0.9rem; color: var(--gold);
  margin-bottom: 1.25rem; letter-spacing: 0.06em; display: block;
}
.pillar h3 { margin-bottom: 0.6rem; font-weight: 600; }
.pillar p { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); }

/* ==========================================================================
   Key/value & bullet lists
   ========================================================================== */
.kv-list { list-style: none; border-top: 1px solid var(--hairline); }
.kv-list li {
  display: grid; grid-template-columns: 200px 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.25rem 0; border-bottom: 1px solid var(--hairline);
  font-size: 0.96rem; line-height: 1.6; color: var(--ink-soft);
}
.kv-list .k {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted); padding-top: 2px;
}
@media (max-width: 640px) { .kv-list li { grid-template-columns: 1fr; gap: 0.3rem; } .kv-list .k { padding-top: 0; } }

.checks { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.checks li {
  display: grid; grid-template-columns: 26px 1fr; gap: 0.9rem;
  padding: 1rem 0; border-bottom: 1px solid var(--hairline);
  font-size: 0.96rem; line-height: 1.6; color: var(--ink-soft);
}
.checks .mark { color: var(--gold); font-weight: 600; }
.checks.two { }
@media (min-width: 780px) { .checks.two { grid-template-columns: 1fr 1fr; column-gap: 3rem; } .checks.two li:nth-last-child(2):nth-child(odd) { } }

.bullets { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; }
.bullets li { position: relative; padding-left: 1.3rem; font-size: 0.94rem; color: var(--ink-soft); line-height: 1.5; }
.bullets li::before { content: '→'; position: absolute; left: 0; color: var(--gold); font-weight: 600; }
@media (max-width: 640px) { .bullets { grid-template-columns: 1fr; } }

/* Red flags list */
.flags { list-style: none; display: grid; gap: 0; }
.flags li {
  display: grid; grid-template-columns: 26px 1fr; gap: 0.9rem;
  padding: 1rem 0; border-bottom: 1px solid var(--hairline);
  font-size: 0.96rem; line-height: 1.6; color: var(--ink-soft);
}
.flags li:first-child { border-top: 1px solid var(--hairline); }
.flags .mark { color: #b04a3e; font-weight: 700; }

/* ==========================================================================
   Notice / caveat
   ========================================================================== */
.notice {
  padding: 1.4rem 1.6rem;
  background: linear-gradient(135deg, rgba(139,111,71,0.06), rgba(139,111,71,0.02));
  border: 1px solid var(--hairline); border-left: 3px solid var(--gold);
  font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6;
}
.notice.warn { border-left-color: var(--amber); background: linear-gradient(135deg, rgba(160,106,31,0.07), rgba(160,106,31,0.02)); }
.notice strong { color: var(--ink); }

/* ==========================================================================
   Key Numbers table — every quantitative claim, with a sourcing Status
   ========================================================================== */
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); min-width: 0; max-width: 100%; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 640px; }
table.data thead th {
  text-align: left; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted); padding: 0.85rem 1rem; background: var(--bone-warm); border-bottom: 1px solid var(--hairline-strong);
}
table.data tbody td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--ink-soft); line-height: 1.5; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--cream); }
table.data .metric { color: var(--ink); font-weight: 600; }
table.data .val { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); font-weight: 600; }

.pill {
  display: inline-block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.pill.verify { color: var(--amber); background: rgba(160,106,31,0.09); border-color: rgba(160,106,31,0.25); }
.pill.approx { color: var(--ink-muted); background: rgba(122,113,104,0.08); border-color: rgba(122,113,104,0.22); }
/* dated = point-in-time fact; est = forward projection; scen = long-dated scenario */
.pill.dated { color: var(--sage); background: rgba(90,111,86,0.09); border-color: rgba(90,111,86,0.22); }
.pill.est   { color: var(--gold-deep); background: rgba(139,111,71,0.10); border-color: rgba(139,111,71,0.28); }
.pill.scen  { color: var(--amber); background: rgba(160,106,31,0.09); border-color: rgba(160,106,31,0.25); }

/* ==========================================================================
   Sector index cards (home)
   ========================================================================== */
.sector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.sector-card {
  background: var(--cream); border: 1px solid var(--hairline); padding: 2rem 1.9rem;
  display: flex; flex-direction: column; min-height: 220px; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sector-card::before { content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 2px; background: var(--gold); transition: width .35s var(--ease); }
.sector-card:hover { transform: translateY(-3px); border-color: var(--hairline-strong); box-shadow: 0 18px 40px -18px rgba(26,23,20,0.14); }
.sector-card:hover::before { width: 84px; }
.sector-card .num { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; color: var(--gold); margin-bottom: 1.25rem; }
.sector-card h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.sector-card p { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); flex: 1; margin-bottom: 1.25rem; }
.sector-card .go {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; font-weight: 500;
  color: var(--ink); padding-bottom: 0.25rem; border-bottom: 1px solid var(--hairline); align-self: flex-start;
  transition: all .3s var(--ease);
}
.sector-card:hover .go { border-color: var(--gold); color: var(--gold); gap: 0.6rem; }
@media (max-width: 720px) { .sector-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.lib-footer { background: var(--ink); color: #9a917f; padding: 2rem 0; font-size: 0.82rem; line-height: 1.7; }
.lib-footer .container { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: baseline; }
.lib-footer strong { color: #d4c9b5; }
.lib-footer a { color: var(--gold-light); }

/* ==========================================================================
   Back-to-top / prev-next
   ========================================================================== */
.seq { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.seq a { font-size: 0.88rem; font-weight: 500; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 0.4rem; }
.seq a:hover { color: var(--gold); }

/* ==========================================================================
   Responsive collapses
   ========================================================================== */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .pillar:last-child { border-bottom: 0; }
  .checks.two { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
}