/* ================================================================
   Peptide Partners — Theme CSS
   Overrides CSS custom properties only.
   Brandbook ref: docs/brandbook.md — Site 4 (planner topic group)
   Colors: Deep slate #243447 primary, Teal #0D8A7E accent
   Fonts: Syne (headings), Lato (body), Roboto Mono (data/compounds)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=Lato:ital,wght@0,400;0,500;1,400&family=Roboto+Mono:wght@400&display=swap');

:root {
  /* Colors — Peptide Partners palette */
  --color-bg:            #F6F7F9;
  --color-surface:       #FFFFFF;
  --color-primary:       #243447;
  --color-accent:        #0D8A7E;
  --color-accent-light:  #E5F5F3;
  --color-text:          #2C3A4A;
  --color-text-body:     #2C3A4A;
  --color-muted:         #6E7E8F;
  --color-text-muted:    #6E7E8F;
  --color-border:        #DEE3EA;
  --color-primary-light: #EBF0F5;
  --color-caution:       #C05621;
  --color-conflict:      #7B3FB5;
  --color-conflict-light:#F5EEFF;
  --color-badge-bg:      #E5F5F3;
  --color-badge-text:    #0D8A7E;

  /* Typography */
  --font-heading: 'Syne', system-ui, sans-serif;
  --font-body:    'Lato', system-ui, sans-serif;
  --font-meta:    'Lato', system-ui, sans-serif;
  --font-mono:    'Roboto Mono', monospace;

  /* Answer capsule */
  --answer-capsule-border-color: #0D8A7E;
  --answer-capsule-bg:           #E5F5F3;

  /* Prose */
  --prose-max-width: 740px;
}

/* ── Badge variants — Interaction Coverage Map ───────────────── */
.badge--category {
  background:    var(--color-primary);
  color:         #FFFFFF;
  border-radius: 4px;
}

.badge--co-admin {
  background: #E5F5F3;
  color:      #0D8A7E;
  border-radius: 4px;
}

.badge--proposed-synergy {
  background: #EBF8F6;
  color:      #0A6E64;
  border-radius: 4px;
}

.badge--extrapolation {
  background: #EBF0F5;
  color:      #4A5E72;
  border-radius: 4px;
}

.badge--conflict-flagged {
  background: #F5EEFF;
  color:      #7B3FB5;
  border-radius: 4px;
}

.badge--unknown {
  background: #F0F0F2;
  color:      #6E7E8F;
  border-radius: 4px;
}

/* ── Compound name inline span ───────────────────────────────── */
.compound-name {
  font-family:   var(--font-mono);
  font-size:     0.93em;
  color:         var(--color-primary);
  background:    var(--color-primary-light);
  padding:       1px 5px;
  border-radius: 3px;
}

/* ── Compound tags (post header) ─────────────────────────────── */
.compound-tags {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.4rem;
  margin-top:  0.75rem;
}

.compound-tag {
  border:        1px solid var(--color-accent);
  color:         var(--color-accent);
  background:    transparent;
  border-radius: 3px;
  font-family:   var(--font-mono);
  font-size:     0.78rem;
  padding:       2px 7px;
  text-decoration: none;
  display:       inline-block;
}

.compound-tag:hover {
  background: var(--color-accent);
  color:      #fff;
  text-decoration: none;
}

/* ── Interaction Warning Block ───────────────────────────────── */
.interaction-warning {
  border-left:  4px solid var(--color-conflict);
  background:   var(--color-conflict-light);
  padding:      1rem 1.25rem;
  margin:       1.5rem 0;
  border-radius: 0 4px 4px 0;
}

.interaction-warning__label {
  font-family:    var(--font-meta);
  font-size:      0.75rem;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--color-conflict);
  display:        block;
  margin-bottom:  0.4rem;
}

.interaction-warning__compounds {
  font-family: var(--font-mono);
  font-size:   1rem;
  color:       var(--color-primary);
  margin:      0 0 0.4rem;
  font-weight: 400;
}

.interaction-warning__body {
  font-family: var(--font-body);
  font-size:   0.95rem;
  color:       var(--color-text-body);
  margin:      0 0 0.4rem;
}

.interaction-warning__status {
  font-family: var(--font-meta);
  font-size:   0.82rem;
  color:       var(--color-text-muted);
  margin:      0;
  font-style:  italic;
}

/* ── Caution note (non-conflict) ─────────────────────────────── */
.caution-note {
  border-left:   4px solid var(--color-caution);
  background:    #FEF4EE;
  color:         var(--color-caution);
  padding:       0.85rem 1.25rem;
  margin:        1.25rem 0;
  font-family:   var(--font-body);
  font-size:     0.95rem;
  border-radius: 0 4px 4px 0;
}

/* ── Stack Blueprint table ───────────────────────────────────── */
.stack-blueprint {
  border-collapse: collapse;
  width:           100%;
  margin:          1.5rem 0;
  font-family:     var(--font-body);
  font-size:       0.9rem;
}

.stack-blueprint th {
  background:     var(--color-primary);
  color:          #FFFFFF;
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:        0.55rem 1rem;
  text-align:     left;
}

.stack-blueprint td {
  padding:        0.65rem 1rem;
  border-bottom:  1px solid var(--color-border);
  vertical-align: top;
}

.stack-blueprint td:first-child {
  font-weight: 500;
  color:       var(--color-primary);
  width:       38%;
}

/* ── Interaction Spotlight (homepage) ────────────────────────── */
.interaction-spotlight {
  background: var(--color-primary);
  color:      #FFFFFF;
  padding:    2rem 2.5rem;
  margin-top: 0;
}

.interaction-spotlight__inner {
  max-width: 1160px;
  margin:    0 auto;
}

.interaction-spotlight__label {
  font-family:    var(--font-meta);
  font-size:      0.72rem;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          rgba(255, 255, 255, 0.45);
  display:        block;
  margin-bottom:  0.6rem;
}

.interaction-spotlight__compounds {
  font-family:   var(--font-mono);
  font-size:     1.25rem;
  color:         var(--color-accent);
  margin-bottom: 0.5rem;
}

.interaction-spotlight__summary {
  font-family: var(--font-body);
  font-size:   1rem;
  color:       rgba(255, 255, 255, 0.85);
  max-width:   700px;
  line-height: 1.65;
}

.interaction-spotlight__status {
  margin-top:  0.75rem;
  font-family: var(--font-meta);
  font-size:   0.82rem;
  color:       rgba(255, 255, 255, 0.45);
  font-style:  italic;
}

/* ── Stack Intelligence Panels (homepage) ────────────────────── */
.stack-panels {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   1.25rem;
}

.stack-panel {
  border-left:   4px solid var(--color-accent);
  background:    var(--color-surface);
  padding:       1.25rem 1.5rem;
  border-radius: 0 6px 6px 0;
  border-top:    1px solid var(--color-border);
  border-right:  1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  display:       block;
  transition:    border-color 0.15s;
}

.stack-panel:hover {
  border-left-color: var(--color-primary);
  text-decoration:   none;
}

.stack-panel__heading {
  font-family:   var(--font-heading);
  font-size:     1rem;
  font-weight:   600;
  color:         var(--color-primary);
  margin-bottom: 0.4rem;
}

.stack-panel__desc {
  font-family:   var(--font-body);
  font-size:     0.875rem;
  color:         var(--color-muted);
  line-height:   1.55;
  margin-bottom: 0.75rem;
}

.stack-panel__count {
  font-family: var(--font-heading);
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--color-accent);
}

/* ── Interactions page — type badge variants ─────────────────── */
.int-badge--additive     { background: #E5F5F3; color: #0D8A7E; }
.int-badge--synergistic  { background: #D8F2EF; color: #0A6E64; }
.int-badge--competitive  { background: #FEF4EE; color: #C05621; }
.int-badge--antagonistic { background: #FEF0E8; color: #9C3F11; }
.int-badge--conflict     { background: #F5EEFF; color: #7B3FB5; }
.int-badge--unknown      { background: #F0F0F2; color: #6E7E8F; }

/* ── Compounds page — class headers ──────────────────────────── */
.compound-class-header {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      0.85rem;
  color:          var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom:  2px solid var(--color-accent);
  padding-bottom: 0.35rem;
  margin:         2rem 0 1rem;
}

.compound-row {
  display:         flex;
  align-items:     baseline;
  gap:             1rem;
  padding:         0.6rem 0;
  border-bottom:   1px solid var(--color-border);
  flex-wrap:       wrap;
}

.compound-row__name {
  font-family:   var(--font-mono);
  font-size:     0.95rem;
  font-weight:   400;
  color:         var(--color-primary);
  min-width:     120px;
}

.compound-row__class {
  font-size:  0.78rem;
  color:      var(--color-muted);
  flex-shrink: 0;
}

.compound-row__count {
  font-family: var(--font-mono);
  font-size:   0.78rem;
  color:       var(--color-accent);
  margin-left: auto;
}

/* ── Interactions page table ─────────────────────────────────── */
.interactions-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.9rem;
}

.interactions-table th {
  background:     var(--color-primary);
  color:          #fff;
  font-family:    var(--font-heading);
  font-size:      0.75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding:        0.5rem 0.75rem;
  text-align:     left;
}

.interactions-table td {
  padding:       0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.interactions-table tr:hover td {
  background: var(--color-accent-light);
}

.interactions-filter {
  display:       flex;
  gap:           0.75rem;
  flex-wrap:     wrap;
  margin-bottom: 1.5rem;
  align-items:   center;
}

.interactions-filter input,
.interactions-filter select {
  font-family:   var(--font-body);
  font-size:     0.875rem;
  padding:       0.4rem 0.75rem;
  border:        1px solid var(--color-border);
  border-radius: 4px;
  background:    var(--color-surface);
  color:         var(--color-text-body);
}

.interactions-filter input:focus,
.interactions-filter select:focus {
  outline:      2px solid var(--color-accent);
  border-color: var(--color-accent);
}

/* ── Sources rule ────────────────────────────────────────────── */
.sources-rule {
  border:     none;
  border-top: 2px solid var(--color-accent);
  width:      3rem;
  margin:     2rem 0 1rem;
}