/* Cohort card — the "specimen" record card used in the alchemy view
 * and the sibling web app. Lives in shape-ui so both surfaces render
 * the same. Consumer apps must have tokens.css applied to :root.
 * Markup is produced by cohort-card.js (renderTeamCard / renderPersonCard).
 *
 * 2026-06 consolidation: this file used to carry five stacked style
 * generations (warm-alchemy base → editorial cook v1 → v2 → v3 →
 * membership accents), resolved purely by source order. They are now
 * collapsed to the surviving computed values — one rule per concern.
 * The visual result is identical; the cascade archaeology is gone.
 * Light mode: the OS app re-tones --ed-* / --alchemy-* / --ink-rgb in
 * styles.css [data-theme="light"], so every rule here must reach color
 * through those variables, never literals. */

/* ─── card-local tokens ─────────────────────────────────────────────────
 * Two scoped palettes that don't live in the canonical tokens.css: the
 * warm "alchemy" oxide pass and the "editorial cook" refinement (--ed-*).
 * Defined here so the card file is self-contained on the web surface;
 * the OS app re-declares them later in styles.css (source-order wins
 * there, including the [data-theme="light"] flip). */
:root {
  --alchemy-oxide:        #EAB308;
  --alchemy-oxide-bright: #FACC15;
  /* Hot oxide — the lighter interaction orange that had drifted into the
   * codebase as a hardcoded #d05332 in six places. Tokenized so it can
   * be retuned in one move. */
  --alchemy-oxide-hot:    #D05332;
  --alchemy-paper-warm:   #F1ECE7;
  --alchemy-charcoal:     #1D191A;
  --alchemy-charcoal-2:   #2C2728;
  --alchemy-rule:         rgba(241, 236, 231, 0.10);
  --alchemy-rule-warm:    rgba(234, 179, 8, 0.45);
  --alchemy-ink-mute:     rgba(241, 236, 231, 0.55);
  --ed-bg-0:        #0d0c0a;
  --ed-bg-1:        #131210;
  --ed-bg-2:        #1a1816;
  --ed-ink-1:       #f5f3ee;
  --ed-ink-2:       #b8b4ab;
  --ed-ink-3:       #6e695e;
  --ed-ink-4:       #3a3833;
  --ed-rule:        rgba(245, 243, 238, 0.06);
  --ed-rule-2:      rgba(245, 243, 238, 0.10);
  --ed-rule-3:      rgba(245, 243, 238, 0.22);
  --ed-op-faint:    0.35;
  --ed-op-quiet:    0.55;
  --ed-op-loud:     1.00;
  /* Display face = the canonical Shape Rotator identity (Space Grotesk,
   * via tokens.css --font-display). The OS app already made this swap in
   * styles.css ("Space Grotesk does service for display + body"); the old
   * serif stack here led with macOS-only faces, so the web surface was a
   * platform lottery (Iowan on mac, Georgia on Windows) AND diverged from
   * the Electron app. One face, every surface. */
  --ed-display:     var(--font-display, "Space Grotesk", system-ui, sans-serif);
  --ed-mono:        "JetBrains Mono", "Berkeley Mono", ui-monospace, monospace;
}

/* ─── card chassis ──────────────────────────────────────────────────
 * Warm specimen panel (2026-06 restyle, modeled on the original field-
 * guide cards): rounded warm-brown slab, compact sigil beside the title,
 * meta ledger below, skill chips at the foot. Succinct over monumental. */
.alch-card {
  --alch-i: 0;
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  height: 100%; /* grid rows stretch — equal card heights per row */
  padding: 16px;
  /* The June-5 "polish public cohort profile pages" recipe (a0114d97),
   * verbatim: translucent warm base over the charcoal page with a
   * diagonal oxide wash + inset cream highlight. The warmth is the wash,
   * not a flat brown. */
  background:
    linear-gradient(112deg, rgba(250, 204, 21, 0.10), rgba(250, 204, 21, 0.020) 34%, transparent 62%),
    linear-gradient(180deg, rgba(241, 236, 231, 0.036), rgba(234, 179, 8, 0.010)),
    rgba(33, 27, 25, 0.54);
  color: var(--ed-ink-2);
  border: 1px solid rgba(241, 236, 231, 0.105);
  border-top-color: rgba(234, 179, 8, 0.32);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(241, 236, 231, 0.028);
  cursor: pointer;
  transition: border-color 220ms ease-out, background 220ms ease-out, box-shadow 220ms ease-out, transform 220ms ease-out;
}
.alch-card:hover {
  border-color: rgba(241, 236, 231, 0.16);
  border-top-color: rgba(208, 83, 50, 0.46);
  background:
    linear-gradient(112deg, rgba(250, 204, 21, 0.13), rgba(250, 204, 21, 0.030) 38%, transparent 64%),
    linear-gradient(180deg, rgba(241, 236, 231, 0.046), rgba(234, 179, 8, 0.020)),
    rgba(35, 29, 27, 0.72);
  box-shadow: inset 0 1px 0 rgba(241, 236, 231, 0.04), 0 10px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.alch-card.is-clickable:active { transform: scale(0.995); }
/* Kind accents on the top edge, per June 5: teams/projects oxide,
 * people teal. */
.alch-card-person { border-top-color: rgba(139, 216, 209, 0.42); }
.alch-card.is-clickable:focus,
.alch-card.is-clickable:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--alchemy-oxide-hot) 82%, transparent);
  outline-offset: 3px;
}

/* Eyebrow tag row — emitted by the shape-vocabulary legend cards only;
 * cohort cards dropped the row in the v2 cook. */
.alch-card-tag {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--ed-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: lowercase;
  color: var(--ed-ink-1);
  opacity: var(--ed-op-quiet);
  margin-bottom: 14px;
}
.alch-card-tag .ct-id { opacity: var(--ed-op-loud); }
.alch-card-tag .ct-sep { opacity: 0.4; }

/* ─── card head: compact sigil beside the title block ─────────────── */
.alch-card-head {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.alch-card-head .alch-card-shape {
  width: 112px; height: 112px;
  margin: 0;
}
/* Density switch — cards size to their grid track, so when tracks
 * compress (narrow windows, 2-up/3-up at the floor) the head trades
 * sigil size for title room instead of crowding the name. Container
 * queries measure the CONTENT box: 284px here = ~318px border-box
 * (16px padding each side + 1px borders). */
.alch-card { container-type: inline-size; }
@container (max-width: 284px) {
  .alch-card-head { grid-template-columns: 88px minmax(0, 1fr); gap: 13px; }
  .alch-card-head .alch-card-shape { width: 88px; height: 88px; }
}
.alch-card-title { min-width: 0; display: grid; gap: 4px; }
.alch-card-sub {
  margin: 0;
  font-family: var(--font-sans, inherit);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ed-ink-2);
  overflow-wrap: anywhere;
  /* Uniform head heights: the focus line gets two lines, then clips. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ─── shape stage (full-size base kept for the field-guide legend) ── */
.alch-card-shape {
  height: 168px;
  margin-bottom: 16px;
  display: grid; place-items: center;
  position: relative;
}
.alch-card-shape svg {
  width: 100%; height: 100%;
  animation: alchTilt 11s ease-in-out infinite, alchBreathe 9.5s ease-in-out infinite;
  transform-origin: center;
}
/* WebGL shape canvas (replaces the SVG above for the shapes grid +
   detail page hero + legend). Each <canvas> has its own GL2 context
   running the shared SDF shader from packages/shape-ui/shape-canvas.js.
   Square aspect; the inner shader handles its own breathing animation. */
.alch-card-shape canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.alch-card-shape svg .as-fill { fill: var(--alchemy-oxide); }
.alch-card-shape svg .as-stroke { stroke: var(--alchemy-oxide-bright); fill: none; stroke-width: 1; }
.alch-card-shape svg .as-mute { stroke: rgba(241,236,231,0.18); fill: none; stroke-width: 0.6; }
@keyframes alchTilt {
  0%   { transform: rotate(-2.5deg) translate(0%, 0%); }
  50%  { transform: rotate(3deg)    translate(0.6%, -0.8%); }
  100% { transform: rotate(-2.5deg) translate(0%, 0%); }
}
@keyframes alchBreathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(234, 179, 8,0)); }
  50%      { filter: drop-shadow(0 6px 20px rgba(234, 179, 8,0.30)); }
}

/* ─── hover peeks: discrete "about · now" points in the title ─────── */
.alch-card-peeks {
  display: flex;
  gap: 6px;
  margin-top: 3px;
}
/* Inert hint, not a control. After the hover popover was removed (the bio
   lives in the detail view), the pill border + oxide-hot hover made a no-op
   span read as a button. Stripped to a plain quiet label so it stops
   advertising an interaction it doesn't have. */
.alch-card-peek {
  display: inline-flex;
  align-items: center;
  font-family: var(--ed-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-ink-1);
  opacity: 0.4;
  cursor: default;
  user-select: none;
}

/* ─── title block ─────────────────────────────────────────────────── */
.alch-card-name {
  font-family: var(--ed-display);
  font-size: 20px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.012em;
  color: var(--ed-ink-1);
  margin: 0;
  line-height: 1.15;
  text-transform: lowercase;
  overflow-wrap: anywhere;
}
/* Person cards carry real human names — keep their natural casing instead of
   the codename-style lowercase used for teams/projects. */
.alch-card-person .alch-card-name { text-transform: none; }
.alch-card-domain {
  font-family: var(--ed-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--alchemy-ink-mute);
}
.alch-card-rule { display: none; }

/* ─── skill / topic chips along the card foot ─────────────────────── */
.alch-card-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto; /* feet align across the row when cards stretch */
}
.alch-card-chips span {
  max-width: 26ch;
  padding: 3px 9px;
  border: 1px solid rgba(241, 236, 231, 0.11);
  border-radius: 5px;
  background: rgba(241, 236, 231, 0.03);
  font-family: var(--ed-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--ed-ink-1);
  opacity: 0.82;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── meta ledger ─────────────────────────────────────────────────── */
.alch-card-meta {
  display: flex; flex-direction: column; gap: 5px;
  /* Field-guide rule line (original specimen cards): a hairline closes
   * the head (sigil + title) before the geo/team/links ledger opens. */
  padding-top: 12px;
  border-top: 1px solid var(--ed-rule-2);
  font-family: var(--ed-mono); font-size: 11px; line-height: 1.55;
}
.alch-card-meta-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px;
  padding: 3px 0;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em;
}
.alch-card-meta-row .cm-k {
  color: var(--ed-ink-1);
  opacity: 0.42;
  text-transform: lowercase;
  letter-spacing: 0.16em;
  font-size: 9.5px;
  padding-top: 1px;
}
.alch-card-meta-row .cm-v { color: var(--ed-ink-1); opacity: 0.88; }
.alch-card-meta-row .cm-v a {
  color: var(--ed-ink-1);
  text-decoration: none;
  border-bottom: 1px solid var(--ed-rule-2);
  transition: border-bottom-color 200ms ease-out;
}
.alch-card-meta-row .cm-v a:hover { border-bottom-color: var(--ed-ink-1); }

/* Mentor-card variant: the old dashed-outline chrome lost the cascade
 * to the cook generations long ago (border/none + gradient backgrounds
 * win by source order), so only the muted SVG-fallback inks survive. */
.alch-card-mentor .alch-card-shape svg .as-fill { fill: var(--alchemy-paper-warm); opacity: 0.6; }
.alch-card-mentor .alch-card-shape svg .as-stroke { stroke: var(--alchemy-paper-warm); opacity: 0.7; }

/* In-card kind marker — sits in the tag row alongside SHAPE-XX */
.ct-kind {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  padding: 0 4px;
  border-radius: 2px;
}
.ct-kind-team { color: var(--ed-ink-1); opacity: var(--ed-op-faint); }
.ct-kind-project,
.ct-kind-person {
  color: var(--ed-ink-1);
  opacity: var(--ed-op-loud);
  font-style: italic;
  font-family: var(--ed-display);
}

/* Member chips inside team/project cards (data-person buttons). */
.alch-card-members-row .cm-v {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
}
.alch-card-member {
  appearance: none; background: transparent;
  border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--alchemy-paper-warm, #f5f3ee);
  border-bottom: 1px dotted var(--alchemy-rule, rgba(245,243,238,0.18));
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.alch-card-member:hover {
  color: var(--alchemy-oxide-hot, #d05332);
  border-bottom-color: var(--alchemy-oxide-hot, #d05332);
}
.alch-card-member:focus-visible {
  outline: 1px solid var(--alchemy-oxide-hot, #d05332);
  outline-offset: 2px;
  border-radius: 2px;
}
.acm-sep { color: var(--alchemy-ink-mute, #7a7368); opacity: 0.55; margin: 0 2px; }

/* Card → repo link. The team's canonical repo is the feed-tracking
   signal, so it gets a touch more weight than github/x links. */
.alch-card-repo-link {
  color: var(--ed-ink-1);
  text-decoration: none;
  border-bottom: 1px solid var(--ed-rule-2);
}
.alch-card-repo-link:hover { border-bottom-color: var(--ed-ink-1); }

/* ─── membership accents ──────────────────────────────────────────────
 * Visual lineage of formal invite status. The warm oxide top-border on
 * cohort cards (and the matching role accent on cohort-member portraits)
 * is the load-bearing signal: a glance tells you which projects were
 * invited as part of the formal cohort vs. brought in as visiting scholars.
 *
 * Why this exists: the coordinator explicitly didn't want the project
 * dashboard to imply teams were competing 1-in-30 for prize money when
 * the formal cohort was 1-in-7. The accent answers that at-a-glance. */

/* Cohort membership modulates the kind accent's intensity (the June-5
 * card body stays uniform): formally-invited cohort teams/members get a
 * stronger top edge than visiting ones. */
.alch-card-membership-cohort {
  border-top-color: rgba(208, 83, 50, 0.62);
}
.alch-card-role-cohort-member {
  border-top-color: rgba(139, 216, 209, 0.62);
}

/* Visiting: untreated. Inherits the base kind accent so visiting records
 * remain first-class — they just don't carry the formal-cohort weight. */

/* Coordinators get their own quiet accent (cool ink edge) so program
 * staff are visually separable from participants. */
.alch-card-role-coordinator {
  border-top-color: rgba(180, 200, 220, 0.45);
}

/* Tag-row pills for membership / role_class — share styling with
 * ct-kind-* so the eyebrow row reads as one consistent system. */
.ct-membership, .ct-role-class {
  font-family: var(--ed-mono);
  letter-spacing: 0.12em;
  text-transform: lowercase;
}
.ct-membership-cohort,
.ct-role-class-cohort-member {
  color: var(--alchemy-oxide-hot);
  opacity: var(--ed-op-loud);
  font-style: italic;
  font-family: var(--ed-display);
  letter-spacing: 0;
  text-transform: none;
}
.ct-membership-visiting,
.ct-role-class-visiting-scholar {
  color: var(--ed-ink-1);
  opacity: var(--ed-op-faint);
}
.ct-role-class-coordinator {
  color: rgba(180, 200, 220, 0.85);
  opacity: var(--ed-op-loud);
  font-style: italic;
  font-family: var(--ed-display);
  letter-spacing: 0;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .alch-card-shape svg { animation: none; }
  .alch-card-peek { transition: none; transform: none; }
}