/* SSB-PRO site design system
   Palette: SSB AI.EDU prototype, locked per arg_Governance/palette.json v0.2.
   Ink on paper, white panels with line borders, green for links and positive accents,
   purple for depth, gold for highlights and the single CTA, red only for warnings.
   Radius 8px and the prototype's soft shadow are permitted. */

:root {
  --ink: #191724;
  --muted: #626171;
  --paper: #FBFCF8;
  --paper-alt: #F8FAF5;
  --panel: #FFFFFF;
  --line: #DEDFE6;
  --line-strong: #C9CAD5;
  --line-soft: #EEF0E9;
  --mint: #DFF5E9;
  --mint-strong: #8BD8AD;
  --green: #167556;
  --purple: #38284F;
  --purple-soft: #ECE8F3;
  --gold: #C98A1C;
  --orange-soft: #FFF3DD;
  --red: #C83C4A;
  --white: #FFFFFF;
  --shadow: 0 12px 38px rgba(45, 36, 64, 0.07);
  --shadow-lift: 0 20px 70px rgba(45, 36, 64, 0.11);
  --radius: 8px;
  --serif: "Spectral", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --wordmark: "Libre Franklin", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --measure: 78ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 0.5em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.2; }
h3 { font-size: 1.15rem; }
p { max-width: var(--measure); margin: 0 0 1em; }
a { color: var(--green); text-decoration: none; border-bottom: 1px solid var(--mint-strong); }
a:hover { border-bottom-color: var(--green); }
code, .stamp { font-family: var(--mono); font-size: 0.86em; color: var(--purple); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* Eyebrow label and gold rule */
.label {
  font-family: var(--sans); font-weight: 780; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--green); margin: 0 0 12px;
}
.rule { border: 0; border-top: 3px solid var(--gold); width: 56px; margin: 0 0 26px; }

/* Nav: brand mark left, links right */
.nav { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; border: 0; white-space: nowrap; }
.brand .tile {
  display: grid; place-items: center; width: 38px; height: 38px;
  background: var(--purple); color: var(--white); font-family: var(--wordmark); font-weight: 800;
  border-radius: var(--radius); letter-spacing: 0.08em; font-size: 0.75rem;
}
.brand .word { font-family: var(--wordmark); font-weight: 700; letter-spacing: 0.08em; color: var(--ink); font-size: 0.95rem; }
.nav nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav nav a { color: var(--muted); border: 0; font-size: 0.88rem; font-weight: 680; padding: 9px 12px; border-radius: var(--radius); }
.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--purple); background: var(--purple-soft); }
.badge {
  font-family: var(--mono); font-size: 0.72rem; color: var(--purple);
  background: var(--purple-soft); padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius);
}

/* Hero */
.hero {
  padding: 84px 0 60px; background: var(--paper);
  background-image: linear-gradient(90deg, rgba(223, 245, 233, 0.68), rgba(251, 252, 248, 0) 46%);
  border-bottom: 1px solid var(--line);
}
.hero .lede { font-size: 1.2rem; color: var(--ink); max-width: 72ch; }
.hero .quote { font-family: var(--serif); font-style: italic; color: var(--muted); margin-top: 26px; max-width: 72ch; }
.quote { font-family: var(--serif); font-style: italic; color: var(--purple); border-left: 3px solid var(--gold); padding-left: 18px; }
.hero .quote { border-left: 0; padding-left: 0; }

/* Sections */
section { padding: 60px 0; }
section.alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.tint { background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 32px; }
.two { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: 18px; margin-top: 28px; align-items: start; }

/* Cards and panels: white, line border, 8px radius, soft shadow */
.card, .panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px;
}
.card h3 { margin-top: 0; }
.card p { font-size: 0.97rem; color: var(--ink); }
.card ul { margin: 0 0 1em; padding-left: 1.1em; font-size: 0.95rem; color: var(--ink); }
.card li { margin-bottom: 0.35em; }
.card .kicker {
  display: inline-block; font-family: var(--sans); font-size: 0.74rem; font-weight: 780;
  color: var(--green); background: var(--mint); padding: 5px 10px; border-radius: 999px; margin: 0 0 12px;
}
.card.accent .kicker { color: var(--gold); background: var(--orange-soft); }
.card.accent { border-top: 3px solid var(--gold); }

/* CTA: one per page, gold owns it */
.cta {
  display: inline-block; background: var(--gold); color: var(--ink);
  font-weight: 780; padding: 13px 26px; border: 1px solid var(--gold); border-radius: var(--radius);
  margin-top: 20px; font-size: 0.97rem;
}
.cta:hover { background: var(--orange-soft); color: var(--ink); border-color: var(--gold); }

/* Tables */
table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 24px 0; background: var(--panel); font-size: 0.95rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th { font-family: var(--sans); text-align: left; font-weight: 780; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--purple); background: var(--purple-soft); padding: 12px 16px; }
td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* Provenance strip */
.prov { background: var(--orange-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prov .stamp { color: var(--purple); }

/* Contact block */
.contact-list { list-style: none; margin: 18px 0 0; padding: 0; }
.contact-list li { margin-bottom: 8px; color: var(--ink); }
.contact-list .tag { display: inline-block; min-width: 92px; font-size: 0.74rem; font-weight: 780; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }

/* Footer */
.footer { background: var(--purple); color: var(--paper); padding: 52px 0 40px; font-size: 0.92rem; }
.footer .tagline { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--white); margin-bottom: 18px; }
.footer a { color: var(--mint); border: 0; }
.footer .fine { color: var(--line-strong); font-size: 0.82rem; margin-top: 22px; max-width: none; }
.footer .lockup { font-family: var(--wordmark); font-weight: 700; letter-spacing: 0.08em; color: var(--white); }

/* SSB AI.EDU hub: tabs, filters, library cards, profile, referrals */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 28px; }
.tabs a {
  color: var(--muted); border: 1px solid transparent; border-radius: var(--radius);
  padding: 10px 16px; font-size: 0.92rem; font-weight: 700;
}
.tabs a:hover { color: var(--purple); background: var(--purple-soft); }
.tabs a.active { color: var(--purple); background: var(--panel); border-color: var(--line-strong); box-shadow: var(--shadow); }
.js .tab-page { display: none; }
.js .tab-page.active { display: block; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.filter-label { font-size: 0.74rem; font-weight: 780; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 18px 0 0; }
.chip {
  font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--purple); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.chip:hover { background: var(--purple-soft); }
.chip[aria-pressed="true"] { background: var(--purple); color: var(--white); border-color: var(--purple); }

.lib-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 8px; }
.lib-card {
  text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; cursor: pointer; display: block; width: 100%;
}
.lib-card:hover { border-color: var(--mint-strong); }
.lib-card .meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.type-tag { font-size: 0.74rem; font-weight: 780; color: var(--green); background: var(--mint); border-radius: 999px; padding: 4px 10px; }
.status-tag { font-size: 0.74rem; font-weight: 780; color: var(--gold); background: var(--orange-soft); border-radius: 999px; padding: 4px 10px; }
.lib-card h3 { margin: 0 0 6px; }
.lib-card .by { font-size: 0.84rem; color: var(--muted); margin: 0 0 8px; }
.lib-card .detail { display: none; font-size: 0.95rem; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.lib-card[aria-expanded="true"] .detail { display: block; }
.note-box { background: var(--paper-alt); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 18px 20px; margin-top: 18px; color: var(--muted); }
.note-box p { margin: 0; }

.field { display: block; margin: 0 0 14px; }
.field span { display: block; font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.field input {
  font: inherit; width: 100%; max-width: 420px; padding: 10px 12px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.field input:focus { outline: 2px solid var(--mint-strong); border-color: var(--green); }
.btn {
  font: inherit; font-weight: 780; font-size: 0.92rem; color: var(--purple); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px 18px; cursor: pointer;
}
.btn:hover { background: var(--purple-soft); }
.btn.solid { background: var(--purple); color: var(--white); border-color: var(--purple); }
.btn.solid:hover { background: var(--ink); }
.btn.small { padding: 7px 12px; font-size: 0.84rem; }

.profile-chip {
  display: none; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 16px; max-width: max-content;
}
.profile-chip.on { display: inline-flex; }
.profile-chip .avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--purple); color: var(--white); font-weight: 780; font-size: 0.85rem;
}
.profile-chip .score { font-size: 0.8rem; font-weight: 780; color: var(--green); background: var(--mint); border-radius: 999px; padding: 3px 10px; }

.referral-box {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 24px; padding: 18px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius);
}
.referral-box span { display: block; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.referral-box strong { font-family: var(--mono); font-size: 1.5rem; color: var(--purple); }
.referral-box .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.metric-list div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.metric-list div:last-child { border-bottom: 0; }
.metric-list strong { font-size: 1.7rem; color: var(--purple); }
.metric-list span { color: var(--muted); font-size: 0.9rem; }
.warn { color: var(--red); font-size: 0.88rem; }
.hint { color: var(--muted); font-size: 0.88rem; }

@media (max-width: 860px) {
  .two { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero { padding: 60px 0 44px; }
  section { padding: 48px 0; }
  .wrap { padding: 0 18px; }
}