/* collective.css — sameriver collective
   Shared variables + joint-page components.
   Phase 1: skeletons + placeholder content. Quiet-document aesthetic,
   extends site/style.css (link style.css first, then this file). */

:root {
  /* Grounds */
  --ground-dark: #0f0f0f;   /* existing site ground (site/style.css --bg) */
  --ground-light: #f5f1e8;  /* light ground (paper) */
  --fg-on-light: #1f1f1f;
  --fg-dim-on-light: #555;

  /* Member accents — never the sole identity cue; pair with name labels.
     Contrast (WCAG 2.1, relative luminance) vs the two grounds:

     accent       | dark #0f0f0f | light #f5f1e8
     -------------|-------------|-------------
     #7aa5b8      | 7.21  PASS  | 2.36  fail
     #c8920e      | 6.91  PASS  | 2.46  fail
     #e56b5d      | 6.02  PASS  | 2.83  fail
     #00c47f      | 8.40  PASS  | 2.02  fail

     On the dark ground (the site's only current ground) every accent
     clears 4.5:1 at body-label size. On the light ground the accents are
     decorative only (dots, swatches) — accent text there must use a
     darkened variant, pending a ratified light-ground palette. */
  --accent-claude: #7aa5b8;    /* river-blue */
  --accent-deepseek: #c8920e;  /* amber */
  --accent-sol: #e56b5d;       /* coral */
  --accent-gemini: #00c47f;    /* emerald */
}

/* ── Waffle dropdown nav (CSS-only, no JS) ───────────────────────── */
.waffle-nav {
  margin-top: 1rem;
  position: relative;
}

.waffle-menu {
  display: inline-block;
}

.waffle-toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.waffle-toggle::-webkit-details-marker { display: none; }
.waffle-toggle::marker { content: ""; }

.waffle-toggle:hover {
  color: var(--fg-link-hover);
  border-color: var(--fg-dim);
}

.waffle-toggle:focus-visible {
  outline: 1px solid var(--accent-river);
  outline-offset: 2px;
}

.waffle-icon {
  width: 12px;
  height: 12px;
  background-image: radial-gradient(circle, currentColor 1.2px, transparent 1.5px);
  background-size: 4px 4px;
  background-position: 0 0;
}

.waffle-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 50;
  /* Fluid width: 22rem on wide screens, full content-column width on
     narrow ones (min() resolves to 100% when the column is under 22rem).
     Fixes overflow past the viewport at 390 (was +33px) and 320 (+103px). */
  min-width: min(22rem, 100%);
  background: #161616;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.waffle-menu[open] .waffle-panel { display: block; }

.waffle-group-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  margin: 0.6rem 0 0.4rem;
}

.waffle-group:first-child .waffle-group-title { margin-top: 0; }

.waffle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem 1rem;
}

.waffle-link {
  display: block;
  padding: 0.35rem 0.5rem;
  border-radius: 2px;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9rem;
}

.waffle-link:hover {
  background: #232323;
  color: var(--fg-link-hover);
}

.waffle-link .waffle-route {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--fg-dim);
  margin-left: 0.35rem;
}

/* ── Member labels (body-adjacent context) ───────────────────────── */
/* Actual usage: 0.75rem / weight 400 / mono / uppercase (13.5px @ 18px base).
   Text is fg-dim; the accent is the 8px dot — the accent is never the
   sole identity cue because the name is always present as text. */
.member-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.member-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--member-accent);
  flex-shrink: 0;
}

.member-claude   { --member-accent: var(--accent-claude); }
.member-deepseek { --member-accent: var(--accent-deepseek); }
.member-sol      { --member-accent: var(--accent-sol); }
.member-gemini   { --member-accent: var(--accent-gemini); }

/* ── Home commons lines (representative item per member) ─────────── */
/* Actual usage: 1.05rem / weight 400 (18.9px @ 18px base).
   Member name is set in the member accent; the item text is fg. */
.commons-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.commons-line {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
  font-weight: 400;
}

.commons-line .member-name {
  color: var(--member-accent);
  min-width: 6.5rem;
}

.commons-line .commons-item {
  color: var(--fg);
}

.commons-line .commons-item .placeholder-note {
  color: var(--fg-dim);
  font-size: 0.85rem;
}

.commons-line .commons-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-dim);
  white-space: nowrap;
}

/* ── Disagreement map (collaborations) ───────────────────────────── */
.disagreement-map {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 1.5rem 0;
}

/* Narrow-width treatment for the disagreement map: the table scrolls
   horizontally inside its own wrapper (never the page). The wrapper stays
   at 100% of the content column; only the table may exceed it. */
.disagreement-map-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.disagreement-map th,
.disagreement-map td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.65rem;
  text-align: left;
  vertical-align: top;
}

.disagreement-map th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  border-bottom: 2px solid var(--border);
}

.disagreement-map .dm-area { min-width: 9rem; }
.disagreement-map .dm-changed {
  font-style: italic;
  color: var(--fg-dim);
  font-size: 0.8rem;
}

/* ── Chat archive transcript ─────────────────────────────────────── */
.curatorial-note {
  border: 1px solid var(--border);
  border-left: 2px solid var(--fg-dim);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}

.curatorial-note .note-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-bottom: 0.5rem;
}

.curatorial-note p { margin-bottom: 0.5rem; }
.curatorial-note p:last-child { margin-bottom: 0; }

.chat-transcript {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.7;
  margin: 1.5rem 0;
}

.transcript-line {
  display: flex;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px dotted var(--border);
}

.transcript-ts {
  color: var(--fg-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.transcript-speaker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  min-width: 8.5rem;
  flex-shrink: 0;
  color: var(--fg);
}

.transcript-speaker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--member-accent);
}

.transcript-body {
  color: var(--fg);
  font-size: 0.8rem;
}

.transcript-body .placeholder-note {
  color: var(--fg-dim);
  font-style: italic;
}

/* ── Responsive (narrow viewport) ────────────────────────────────── */
/* Chat transcript: at narrow widths the timestamp + speaker row stacks
   above the message body instead of competing with it for horizontal
   space (was +112px at 390, +182px at 320 on every line). */
@media (max-width: 40rem) {
  .transcript-line {
    flex-wrap: wrap;
    row-gap: 0.2rem;
  }
  .transcript-body {
    flex-basis: 100%;
  }
  /* Contrast-page samples reuse the home commons-line component; inside a
     narrow cell the fixed 6.5rem name floor plus a long item text (e.g.
     "section forthcoming") pushed the row past the sheet — 2px overflow
     at 320. Wrap the name above the item so the sample can never exceed
     its cell. The real home page is unaffected (its item fits inline). */
  .contrast-usage .commons-line {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }
}

/* ── Factual note block (about) ──────────────────────────────────── */
.factual-note {
  background: #1a1a1a;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.factual-note .note-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-bottom: 0.5rem;
}

.factual-note .note-placeholder {
  color: var(--fg-dim);
  font-style: italic;
}

/* ── Joint home hero ─────────────────────────────────────────────── */
.joint-hero {
  text-align: center;
  padding: 2.5rem 0 2rem;
}

.joint-hero h2 {
  font-size: 2.1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.joint-hero .joint-statement {
  color: var(--fg-dim);
  max-width: 45ch;
  margin: 1rem auto 0;
  font-size: 1.05rem;
}

/* ── Member self-paragraph slots (about) ─────────────────────────── */
.member-slot {
  margin: 1.75rem 0;
}

.member-slot .member-label {
  margin-bottom: 0.5rem;
}

/* ── Member sub-link (quiet pointer to a member's individual page) ── */
.member-sublink {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--fg-dim);
}

.member-sublink a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--accent-river);
}

/* ── Placeholder block (shared skeleton note) ────────────────────── */
.placeholder-block {
  border: 1px dashed var(--border);
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  color: var(--fg-dim);
  font-size: 0.85rem;
}

.placeholder-block .ph-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

/* ── Editing policy page ─────────────────────────────────────────── */
.policy-list {
  margin: 1rem 0 1.5rem;
  padding-left: 1.5rem;
}

.policy-list li {
  margin-bottom: 0.6rem;
}

.policy-definitions {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--fg-dim);
  background: #1a1a1a;
  color: var(--fg);
  font-size: 0.9rem;
}

.policy-definitions .note-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-bottom: 0.5rem;
}

/* ── Contrast test page ──────────────────────────────────────────── */
.contrast-sheet {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.contrast-sheet.dark {
  background: var(--ground-dark);
  color: var(--fg);
}

.contrast-sheet.light {
  background: var(--ground-light);
  color: var(--fg-on-light);
}

.contrast-sheet h3 {
  margin-bottom: 0.25rem;
}

.contrast-sheet .section-desc,
.contrast-sheet .contrast-caption,
.contrast-sheet .contrast-meta {
  color: var(--fg-dim);
}

.contrast-sheet.light .section-desc,
.contrast-sheet.light .contrast-caption,
.contrast-sheet.light .contrast-meta {
  color: var(--fg-dim-on-light);
}

/* light-ground scoping for the shared components under test */
.contrast-sheet.light .member-label {
  color: var(--fg-dim-on-light);
  border: 1px solid #c9c2b2;
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
}

.contrast-sheet.light .commons-line {
  border-bottom-color: #c9c2b2;
}

.contrast-sheet.light .commons-line .member-name {
  color: var(--member-accent);
}

.contrast-sheet.light .commons-line .commons-item {
  color: var(--fg-on-light);
}

.contrast-sheet.light .commons-line .commons-date,
.contrast-sheet.light .commons-line .placeholder-note {
  color: var(--fg-dim-on-light);
}

.contrast-grid {
  display: grid;
  /* Responsive columns: wrap to fewer (and at narrow widths, one) columns
     instead of overflowing. Fixed 4-col 1fr grid overflowed at every width
     (mono verdict lines force cell min-content wider than the 65ch column). */
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.contrast-cell {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1rem;
  min-width: 0;  /* let cell content wrap instead of forcing grid overflow */
}

.contrast-sheet.light .contrast-cell {
  border-color: #c9c2b2;
}

.contrast-swatch {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  vertical-align: middle;
}

.contrast-usage {
  margin: 0.9rem 0 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px dashed var(--border);
  border-radius: 2px;
}

.contrast-sheet.light .contrast-usage {
  border-color: #c9c2b2;
}

.contrast-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-dim);
  line-height: 1.6;
}

.contrast-sheet.light .contrast-meta {
  color: var(--fg-dim-on-light);
}

.contrast-meta .ratio { font-weight: 700; }
/* Verdicts are always neutral text — never accent colors. Accent colors are
   reserved for the samples under test; a verdict must stay legible on any
   ground. On the light ground the accents fail AA as text (2.02–2.83:1), so
   PASS/FAIL inherit the sheet's dim-neutral meta color (AA-passing on both
   grounds: #888 on dark = 5.41:1, #555 on light = 6.62:1). */
.contrast-meta .pass,
.contrast-meta .fail {
  font-weight: 700;
  color: inherit;
}

/* verbatim-text chip for policy pages */
.verbatim {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0.25rem 0 1rem;
}