/* ==========================================================================
   CULTURE ATLAS — COMPONENT LIBRARY
   v1.0 · requires tokens.css loaded first

   Every rule below references a token — no hand-written hex/px values.
   Components are grouped in two tiers:
     TIER 1 — Canvas components (Built, lifted from the Discovery Canvas
               prototype as-is; class names match the working prototype
               so nothing needs renaming when this is wired in for real).
     TIER 2 — Act II components (previously "Specified" in
               DESIGN_SYSTEM.md § 5 — designed here for the first time).
   ========================================================================== */

/* ============================================================
   TIER 1 — CANVAS COMPONENTS (Built)
   ============================================================ */

/* ---- search box ---- */
.search-box{
  display:flex; align-items:center; gap:8px;
  background:rgba(var(--tint-rgb),0.045);
  border:1px solid rgba(var(--tint-rgb),0.16);
  animation:heroContentReveal .3s ease-out .2s both;
  border-radius:var(--radius-pill);
  padding:6px 6px 6px 20px;
  transition: border-color var(--t-base) var(--ease-soft), background var(--t-base) var(--ease-soft), box-shadow var(--t-base) var(--ease-soft);
}
.search-box:focus-within{ border-color:var(--color-ochre-light); background:rgba(var(--tint-rgb),0.08); box-shadow:0 0 0 4px rgba(212,147,79,0.08); }
.search-box input{ flex:1; min-width:0; background:none; border:none; outline:none; color:var(--color-text-on-ink); font-family:var(--font-body); font-style:italic; font-size:var(--fs-body-lg); padding:10px 0; }
.search-box input::placeholder{color:var(--color-text-on-ink-dim);}

/* ---- icon buttons (mic / go / map toggle) ---- */
.icon-btn, .map-toggle-btn{
  width:34px; height:34px; border-radius:var(--radius-pill);
  border:1px solid rgba(var(--tint-rgb),0.16);
  background:none; color:var(--color-text-on-ink-dim);
  display:flex; align-items:center; justify-content:center;
  transition: all var(--t-base) var(--ease-soft);
  flex-shrink:0; cursor:pointer;
}
.icon-btn:hover, .map-toggle-btn:hover{ color:var(--color-text-on-ink); border-color:rgba(var(--tint-rgb),0.4); }
.icon-btn.listening{ color:var(--color-ink); background:var(--color-ochre-light); border-color:var(--color-ochre-light); animation:pulseMic 1.15s ease-in-out infinite; }
@keyframes pulseMic{0%,100%{box-shadow:0 0 0 0 rgba(212,147,79,0.45);} 50%{box-shadow:0 0 0 9px rgba(212,147,79,0);}}
.go-btn{ width:34px; height:34px; border-radius:var(--radius-pill); background:transparent; border:1px solid rgba(var(--tint-rgb),0.16); color:var(--color-text-on-ink-dim); display:flex; align-items:center; justify-content:center; transition: all var(--t-base) var(--ease-soft); flex-shrink:0; cursor:pointer; }
.go-btn:hover{ background:var(--color-ochre); border-color:var(--color-ochre); color:var(--color-parchment); }

/* ---- chip ---- */
.chip{
  font-size:var(--fs-label); padding:8px 15px; border-radius:var(--radius-pill);
  border:1px solid var(--color-ink-line); color:var(--color-text-on-ink-dim);
  background:rgba(var(--tint-rgb),0.02); font-family:var(--font-body);
  transition: all var(--t-base) var(--ease-out); white-space:nowrap; cursor:pointer;
}
.chip:hover{ border-color:var(--color-ochre-light); color:var(--color-text-on-ink); background:rgba(181,112,63,0.12); transform:translateY(-1px); }
.chip:active{ transform:translateY(0) scale(0.97); }
.chip.selected{ background:var(--color-ochre); border-color:var(--color-ochre); color:var(--color-parchment); }
/* on-parchment variant — for chip reuse outside the Canvas (e.g. filters inside a future admin/editorial UI) */
.chip.on-parchment{ border-color:var(--color-paper-line); color:var(--color-text-on-parchment-dim); }
.chip.on-parchment:hover{ border-color:var(--color-ochre); color:var(--color-text-on-parchment); background:rgba(181,112,63,0.08); }

/* ---- entity card ---- */
.ecard{
  border:1px solid rgba(var(--tint-rgb),0.18); background:rgba(var(--tint-rgb),0.09);
  padding:17px; border-radius:var(--radius-sharp);
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base), box-shadow var(--t-base) var(--ease-out);
  position:relative;
}
[data-theme="light"] .ecard{ background:var(--color-parchment-dark); border-color:var(--color-paper-line); }
.ecard:hover{ transform:translateY(-3px); border-color:var(--color-ochre-light); box-shadow:var(--shadow-card-hover); }
.ecard-type{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--color-ochre-light); }
.ecard-tag-row{ display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.ecard-dot{ width:6px; height:6px; border-radius:50%; background:var(--color-ochre); flex-shrink:0; }
.ecard-title{ font-family:var(--font-display); font-size:var(--fs-card-title); margin-bottom:7px; line-height:1.28; color:var(--color-text-on-ink); cursor:pointer; }
.ecard-desc{ font-size:var(--fs-body-sm); color:var(--color-text-on-ink-dim); line-height:1.55; }
.ecard-meta{ font-size:11px; color:var(--color-text-on-ink-dim); margin-bottom:10px; letter-spacing:.01em; }
.ecard.on-parchment .ecard-meta{ color:var(--color-text-on-parchment-dim); }
.ecard-date{ font-family:var(--font-mono); font-size:8.5px; font-weight:600; letter-spacing:.03em;
  padding:2px 8px; border-radius:20px; margin-left:auto;
  background:rgba(var(--tint-rgb),.1); color:var(--color-text-on-ink-dim); }
.ecard-date.soon{ background:rgba(79,208,122,.15); color:#4fd07a; }
.ecard-actions{ display:flex; gap:8px; margin-top:12px; }
.ecard-explore{ flex:1; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em;
  padding:6px 12px; border-radius:6px; border:none; cursor:pointer;
  background:var(--color-ochre); color:#fff; text-align:center; }
.ecard-explore:hover{ background:var(--color-ochre-light); }
/* Follow, scoped to cards only — matches Explore's exact box shape here
   (flex:1, same radius/padding/font-size) without touching .follow-btn's
   own pill styling used elsewhere (entity detail pages etc). */
.ecard-actions .follow-btn{
  flex:1; margin-top:0; border-radius:6px; padding:6px 12px; font-size:10.5px;
  justify-content:center; gap:5px;
}
.ecard-actions .follow-btn .fstar{ width:11px; height:11px; }
/* on-parchment variant — needed the moment an entity card appears in Act II (e.g. inside a Collection) */
.ecard.on-parchment{ background:var(--color-parchment-dark); border-color:var(--color-paper-line); }
.ecard.on-parchment .ecard-type{ color:var(--color-ochre); }
.ecard.on-parchment .ecard-title{ color:var(--color-text-on-parchment); }
.ecard.on-parchment .ecard-desc{ color:var(--color-text-on-parchment-dim); }

/* ---- follow button (verdigris reserved exclusively to this component) ---- */
.follow-btn{
  margin-top:13px; display:inline-flex; align-items:center; gap:7px; font-size:11px;
  border:1px solid rgba(var(--tint-rgb),0.2); background:none; padding:7px 13px 7px 9px;
  border-radius:var(--radius-pill); color:var(--color-text-on-ink-dim); position:relative;
  font-family:var(--font-body); cursor:pointer;
  transition: all var(--t-base) var(--ease-out);
}
.follow-btn:hover{ border-color:var(--color-verdigris); color:var(--color-text-on-ink); }
.follow-btn .fstar{ width:12px; height:12px; transition:transform var(--t-base) var(--ease-out); }
.follow-btn.followed{ background:var(--color-verdigris); border-color:var(--color-verdigris); color:var(--color-parchment) !important; }
.follow-btn.followed .fstar{ transform:scale(1.15) rotate(-8deg); }
.follow-btn .ripple{ position:absolute; inset:-1px; border-radius:var(--radius-pill); border:1px solid var(--color-verdigris); opacity:0; transform:scale(1); pointer-events:none; }
.follow-btn.pinging .ripple{ animation: ping 0.6s var(--ease-out); }
@keyframes ping{ from{opacity:0.6; transform:scale(1);} to{opacity:0; transform:scale(1.5);} }
.follow-btn.on-parchment{ border-color:var(--color-paper-line); color:var(--color-text-on-parchment-dim); }
.follow-btn.on-parchment:hover{ color:var(--color-text-on-parchment); }

/* ---- canvas heading / grid ---- */
.canvas-heading{ font-family:var(--font-body); font-style:italic; font-size:var(--fs-label); color:var(--color-ochre-light); text-align:center; margin-bottom:16px; }
.canvas-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; }

/* ---- connected-through-culture node label ---- */
.connected-node-label{ font-family:var(--font-body); font-size:10.5px; text-align:center; color:var(--color-text-on-ink-dim); line-height:1.3; }
.connected-node-label.center{ font-family:var(--font-display); font-size:13.5px; color:var(--color-text-on-ink); }
.connected-node-label .wl-type{ display:block; font-family:var(--font-mono); font-size:9px; color:var(--color-ochre-light); letter-spacing:var(--tracking-mono); text-transform:uppercase; margin-top:2px; }


/* ---- shared text-link CTA, ink surface (used by doorway cards below;
        mirrors .spotlight-card .spotlight-cta on the parchment surface) ---- */
.card-cta{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--color-ochre-light); border-bottom:1px solid transparent; transition:border-color var(--t-fast); cursor:pointer; }
.card-cta:hover{ border-color:var(--color-ochre-light); }

/* ============================================================
   TIER 2 — ACT II COMPONENTS (first build — previously Specified)
   All on the parchment surface. No mark, no ink-only motion
   vocabulary — see DESIGN_SYSTEM.md § 4.1 hard rule.
   ============================================================ */

/* ---- Spotlight card (merged from the four old "Featured X" grids) ---- */
.spotlight-card{
  position:relative; border-radius:var(--radius-sharp); overflow:hidden;
  border:1px solid var(--color-paper-line); background:var(--color-parchment-dark);
  display:flex; flex-direction:column;
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.spotlight-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
.spotlight-card .spotlight-art{ aspect-ratio:16/10; background:linear-gradient(135deg,#3C4B5B,#1B2430); }
.spotlight-card.primary .spotlight-art{ aspect-ratio:16/8; }
.spotlight-card .spotlight-body{ padding:20px; }
.spotlight-card .spotlight-eyebrow{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--color-ochre); margin-bottom:10px; }
.spotlight-card .spotlight-title{ font-family:var(--font-display); font-size:var(--fs-h3); color:var(--color-text-on-parchment); margin-bottom:8px; line-height:1.25; }
.spotlight-card.primary .spotlight-title{ font-size:var(--fs-h2); }
.spotlight-card .spotlight-dek{ font-family:var(--font-body); font-style:italic; font-size:var(--fs-body-sm); color:var(--color-text-on-parchment-dim); line-height:1.6; margin-bottom:14px; }
.spotlight-card .spotlight-cta{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--color-ochre); border-bottom:1px solid transparent; transition:border-color var(--t-fast); }
.spotlight-card:hover .spotlight-cta{ border-color:var(--color-ochre); }

/* ---- Story card ---- */
.story-card{
  border-radius:var(--radius-sharp); overflow:hidden; background:var(--color-parchment);
  border:1px solid var(--color-paper-line);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.story-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-hover); }
.story-card .story-art{ aspect-ratio:4/3; background:linear-gradient(135deg,#8A5A33,#26313F); }
.story-card .story-body{ padding:18px; }
.story-card .story-eyebrow{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--color-ochre); margin-bottom:9px; }
.story-card .story-title{ font-family:var(--font-display); font-size:17px; color:var(--color-text-on-parchment); margin-bottom:8px; line-height:1.3; }
.story-card .story-excerpt{ font-family:var(--font-body); font-size:var(--fs-body-sm); font-style:italic; color:var(--color-text-on-parchment-dim); line-height:1.6; margin-bottom:12px; }
.story-card .story-meta{ font-family:var(--font-mono); font-size:9px; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--color-text-on-parchment-dim); }

/* ---- Collection card (horizontal-scroll strip; reuses the doorway-card
        language already established by "Choose your wonder") ---- */
.collection-card{
  position:relative; flex:0 0 240px; height:150px; border-radius:var(--radius-sharp); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding:18px;
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.collection-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
.collection-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(27,36,48,0) 40%, rgba(27,36,48,0.78) 100%); }
.collection-card .collection-title{ position:relative; z-index:2; font-family:var(--font-display); font-size:16px; color:var(--color-text-on-ink); }
.collection-card .collection-count{ position:relative; z-index:2; font-family:var(--font-mono); font-size:9.5px; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:rgba(var(--tint-rgb),0.72); margin-top:4px; }
.collection-strip{ display:flex; gap:14px; overflow-x:auto; padding:4px 4px 10px; }

/* ---- Seasonal banner (ink surface — permitted; the reserved rule is the
        MARK's motion vocabulary, not the ink color itself. No mark appears
        here.) Same CMS field also feeds a Canvas chip — see IA doc § 1. ---- */
.seasonal-banner{
  background:var(--color-ink); color:var(--color-text-on-ink);
  border-radius:var(--radius-sharp); padding:var(--sp-4) var(--sp-3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
}
.seasonal-banner .seasonal-eyebrow{ font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--color-ochre-light); margin-bottom:10px; }
.seasonal-banner .seasonal-title{ font-family:var(--font-display); font-size:var(--fs-h2); color:var(--color-text-on-ink); max-width:520px; }
.seasonal-banner .seasonal-cta{
  display:inline-flex; align-items:center; gap:10px; background:var(--color-ochre); color:var(--color-parchment);
  border:none; padding:14px 24px; border-radius:var(--radius-pill); font-family:var(--font-display); font-size:14.5px; font-weight:500;
  box-shadow:var(--shadow-cta); transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-base) var(--ease-soft);
  cursor:pointer; flex-shrink:0;
}
.seasonal-banner .seasonal-cta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-cta-hover); background:var(--color-ochre-light); }