/* ============================================================
   gametheory theme — Bridge Map
   Light scheme: charcoal text on putty background, brand accents.

   This file overrides the inline <style> blocks in each page by
   being linked AFTER them in the <head>. Variable overrides take
   effect everywhere they're used; specific selectors patch
   hardcoded RGBA values from the original dark-mode design.

   To re-theme: change the values in :root below. To revert to
   the neutral dark scheme: remove the <link> tags pointing here.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Light scheme base */
  --bg: #FCFAF5;              /* Putty (corrected from F-C-E to F-C-F-A) */
  --fg: #1B1B1B;              /* Charcoal */
  --muted: #6e6066;           /* Warm dark gray */
  --frame: #d8c2cc;           /* Putty-tinted border */

  /* Brand palette */
  --brand-chartreuse: #E6FA2C;
  --brand-orange:     #FFAC08;
  --brand-deep:       #E0023A;
  --brand-sky:        #A0E2FF;
  --brand-blue:       #0023FB;  /* corrected — used for nav hyperlink highlights */

  /* Categorical (map nodes) — re-mapped to brand colors.
     Planks use a slightly desaturated chartreuse (option B from earlier);
     tools use a deepened sky for contrast against the light background. */
  --accent: var(--brand-orange);  /* Bridges */
  --warm:   #B8C81D;              /* Planks — quieter chartreuse */
  --ok:     #4A95C9;              /* Tools — deeper sky */
  --warn:   var(--brand-deep);
}

/* ----- Type ----- */
html, body { font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif; }

/* Override the spike's monospace pockets too so the whole UI is one type */
input, textarea, select, button { font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif; }

/* ----- Brand mark — small bottom-right signature on every page ----- */
body::after {
  content: "// gametheory";
  position: fixed;
  bottom: 0.85rem; right: 1rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 50;
  opacity: 0.55;
}

/* ============================================================
   Surface overrides for light scheme.

   The inline styles use a lot of rgba(0,0,0,X) for "recessed/inset"
   panels and rgba(232,234,240,X) for "elevated/highlight" tints —
   both tuned for dark backgrounds. On the light scheme:
     - "elevated" = closer to white (so rgba 232,234,240 over light bg
       looks fine since it's so transparent; but we override to a
       small set for predictability)
     - "recessed" = slightly grayer/darker putty
   ============================================================ */

/* Two-layer surface system on the light scheme:
   - SURFACES (panels, cards, container blocks) sit on the cream page as
     WHITE so they read as a "card on paper." Eliminates the dark-gray
     fills the inline styles ship with (rgba(0,0,0,0.18) is unusable
     against a cream page — comes out muddy tan).
   - INPUT FILLS (textareas, editable fields) drop back to CREAM to read
     as recessed wells inside the white surface. The text-on-cream tone
     matches the page bg so editing feels continuous with the page. */

/* --- Surfaces --- */
.panel,
.composer-card, .stored-card, .flying-card,
.modal, .detail-card,
.archived-banner, .share-banner,
.match-tool-card, .match-bridge-target, .match-plank-target, .match-bridge,
.consol-group, .consol-bridge-row, .consol-bank-item, .consol-bank,
.framing-edit, .results-bridge, .prompt-row,
.live-counter, .phase-step,
.submission-row, .overview-item, .dc-item {
  background-color: #ffffff;
  color: var(--fg);
}

/* --- Input fills --- */
.intention-input,
.composer-card textarea, .composer-card input,
.modal textarea, .modal input,
.prompt-row textarea, .prompt-row input,
.framing-edit textarea,
.results-bridge textarea, .results-bridge-text,
.consol-name, .cluster-name {
  background-color: var(--bg);
  color: var(--fg);
}

/* The orphan zone keeps a dashed warning treatment */
.orphan-zone { background-color: rgba(224,2,58,0.04); border-color: rgba(224,2,58,0.3); }

/* Inputs get clear text color regardless of inherited dark-mode rules */
input, textarea, select { color: var(--fg); }
input::placeholder, textarea::placeholder { color: var(--muted); }

/* Modal backdrop — darken to push focus to the modal */
.modal-backdrop { background: rgba(27,27,27,0.45); }

/* ============================================================
   Map: link strokes, node fills, label colors all need re-tuning
   for the light background. Originals were tuned for visibility
   on near-black; on light cream they wash out.
   ============================================================ */

.map-link { stroke: rgba(27,27,27,0.22); stroke-width: 1; }
.map-link.bridge-plank { stroke: rgba(255,172,8,0.55); }
.map-link.plank-tool   { stroke: rgba(74,149,201,0.55); }
.map-link.bridge-tool  { stroke: rgba(74,149,201,0.42); }
.map-link.focused      { stroke: var(--fg); stroke-width: 1.8; }
.map-link.dimmed       { opacity: 0.18; }

/* Solid fills, NO stroke — strokes made the in-circle text harder to
   read and visually crowded the labels nearby. Focus / hover state is
   handled by the .map-viewport:has() fade-other rule in display.html
   instead, which dims everything except the focused element. */
.map-node-bridge {
  fill: var(--brand-orange);
  stroke: none;
}
.map-node-plank {
  fill: var(--warm);
  stroke: none;
}
.map-node-plank.filled {
  fill: var(--ok);              /* matched → takes tool blue */
}
.map-node-tool {
  fill: var(--ok);
  stroke: none;
}

/* Map text labels — charcoal text reads on light bg */
.map-label-bridge { fill: var(--fg); font-weight: 600; }
.map-label-weight { fill: var(--brand-orange); }
.map-label-plank  { fill: var(--fg); opacity: 0.85; }
.map-label-tool   { fill: var(--fg); opacity: 0.8; }
.map-summary      { fill: var(--muted); }

/* SVG goal dot — kept for the HTML fallback in non-map phases (.goal-dot
   in centerWrap during setup / intention). The map renderers now use
   the star instead of the circle. */
.map-goal-dot {
  fill: var(--fg);
  filter: drop-shadow(0 0 14px rgba(27,27,27,0.2));
}

/* Brand goal-star (used by both network + tree map layouts). The path
   is laid out in a 133×140 viewBox; goalStarElement() in display.html
   wraps it in a <g transform> to scale + position. We style the inner
   <path> here so the wrapper <g> stays untouched for transform math. */
.map-goal-star path {
  fill: var(--brand-orange);
  filter: drop-shadow(0 0 14px rgba(255,172,8,0.4));
}

/* Component label rectangle (sits below the count circle). White surface,
   orange-tinted border to match the count circle. */
.map-comp-rect {
  fill: #ffffff;
  stroke: var(--brand-orange);
  stroke-width: 1.6;
  cursor: pointer;
  transition: stroke 0.15s, stroke-width 0.15s;
}
.map-comp-rect:hover { stroke: var(--fg); stroke-width: 2.4; }

/* Component name inside the rect — charcoal, medium weight */
.map-comp-name {
  fill: var(--fg);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

/* "x4" weight count inside the orange circle — white, bold */
.map-comp-count {
  fill: #ffffff;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

/* Piece rectangle. Border in the kind color so unmatched (warm) vs
   matched (green) reads at a glance. Stroke stays static — the fade-
   other behavior in display.html provides hover/click focus instead
   of thickening the stroke (which crowded the inline text). */
.map-piece {
  fill: #ffffff;
  stroke: var(--warm);
  stroke-width: 1.6;
  cursor: pointer;
  transition: opacity 0.15s;
}
.map-piece-matched { stroke: var(--ok); }

.map-piece-anchor {
  pointer-events: none;
}
.map-piece-anchor.unmatched { fill: var(--warm); stroke: var(--warm); }
.map-piece-anchor.matched   { fill: var(--ok);   stroke: var(--ok); }

/* Trunk line: vertical connector from component label rect down through
   each piece's anchor circle, so the parent → children relationship reads
   as an explicit tree, not just a stack. */
.map-piece-trunk {
  stroke: rgba(27,27,27,0.3);
  stroke-width: 1.5;
  pointer-events: none;
}

/* ============================================================
   Shared report layout — used by both /results (public) and the
   facilitator results editor. Keeping it here as a single source
   of truth so the WYSIWYG editor view actually matches the
   published view 1:1. The editor adds contenteditable on selected
   nodes via inline scoping in facilitate.html.
   ============================================================ */
.report {
  font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif;
  line-height: 1.6;
  color: var(--fg);
}
.report-meta {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2rem;
  font-weight: 500;
}
.report .intention-block {
  display: flex; align-items: flex-start; gap: 1.4rem;
  margin-bottom: 1.5rem;
}
.report .intention-star { flex: 0 0 auto; width: 72px; height: 72px; margin-top: 0.2rem; }
.report .intention-text-col { flex: 1; min-width: 0; }
.report .intention-label {
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg); font-weight: 700; margin-bottom: 0.3rem;
}
.report .intention-text {
  font-size: 2.2rem; font-weight: 700; line-height: 1.25;
  margin: 0; color: var(--fg);
}
.report .intro {
  color: var(--muted); font-size: 0.95rem;
  margin: 0 0 2.5rem; font-weight: 500;
}
/* Each component sits in its own card surface for clearer visual
   separation between sections. */
.report .component {
  background: #ffffff;
  border: 1px solid var(--frame);
  border-left: 4px solid var(--brand-orange);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.6rem;
  page-break-inside: avoid;
}
.report .component-head {
  display: flex; align-items: center; gap: 0.85rem;
  margin-bottom: 0.85rem; flex-wrap: wrap;
}
.report .component-pill {
  background: var(--brand-orange); color: var(--fg);
  font-size: 1.05rem; font-weight: 700;
  padding: 0.5rem 1.1rem; border-radius: 8px;
}
.report .component-arrow {
  color: var(--fg); font-size: 1.3rem; font-weight: 600;
}
.report .component-partners {
  color: var(--fg); font-size: 0.95rem; font-weight: 600;
}
.report .component-partners .none {
  color: var(--muted); font-style: italic; font-weight: 400;
}
.report .component-summary {
  color: var(--fg); font-size: 0.95rem; line-height: 1.65;
  margin: 0 0 1.5rem; max-width: 60ch;
}
.report .component-summary.empty {
  color: var(--muted); font-style: italic;
}
.report .how-heading {
  font-size: 1.05rem; font-weight: 700; margin: 0 0 0.85rem;
}
.report .piece { margin-bottom: 1.25rem; }
.report .piece-head {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0.4rem; flex-wrap: wrap;
}
.report .piece-pill {
  background: #C8F0C8; color: var(--fg);
  font-size: 0.82rem; font-weight: 700;
  padding: 0.32rem 0.7rem; border-radius: 6px;
}
.report .tool-pill {
  background: transparent; color: var(--ok);
  border: 1.5px solid var(--ok);
  font-size: 0.82rem; font-weight: 600;
  padding: 0.28rem 0.7rem; border-radius: 6px;
}
.report .piece-desc {
  color: var(--fg); font-size: 0.9rem; line-height: 1.55;
  max-width: 60ch; margin: 0;
}
.report .piece-desc.empty { color: var(--muted); font-style: italic; }
.report .direct-tools-heading {
  color: var(--muted); font-size: 0.78rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  margin: 1.5rem 0 0.6rem;
}

/* Editor-only chrome — contenteditable hover/focus rings so the
   facilitator can tell what's editable without changing the published
   look. */
.report [contenteditable="true"] {
  outline: none;
  border-radius: 4px;
  padding: 0.05em 0.1em;
  transition: background 0.15s, box-shadow 0.15s;
}
.report [contenteditable="true"]:hover {
  background: rgba(255,210,0,0.10);
}
.report [contenteditable="true"]:focus {
  background: rgba(255,210,0,0.18);
  box-shadow: 0 0 0 2px rgba(255,172,8,0.45);
}
.report .editor-saved {
  display: inline-block;
  font-size: 0.7rem; color: var(--ok);
  margin-left: 0.6rem; opacity: 0;
  transition: opacity 0.2s;
}
.report .editor-saved.live { opacity: 1; }
.report .editor-suggest {
  background: transparent;
  border: 1px solid var(--frame); border-radius: 6px;
  color: var(--fg); padding: 0.32rem 0.7rem;
  font: inherit; font-size: 0.78rem; cursor: pointer;
  margin-left: auto;
  transition: border-color 0.15s, background 0.15s;
}
.report .editor-suggest:hover:not(:disabled) { border-color: var(--fg); background: rgba(27,27,27,0.04); }
.report .editor-suggest:disabled { opacity: 0.5; cursor: default; }

.map-piece-title {
  fill: var(--fg);
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
}

/* Contributor pill at the bottom of a matched piece */
.map-piece-pill {
  fill: var(--ok);
  pointer-events: none;
}
.map-piece-pill-label {
  fill: #ffffff;
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
}

/* HTML goal-dot (collect/intention phases) */
.goal-dot {
  background: var(--fg);
  box-shadow: 0 0 20px rgba(27,27,27,0.18);
}

/* Particles — keep colorful but tone down the glow halos on light bg */
.particle.bridge { background: var(--brand-orange); box-shadow: 0 0 8px rgba(255,172,8,0.55); }
.particle.plank  { background: var(--warm);         box-shadow: 0 0 8px rgba(184,200,29,0.55); }
.particle.tool   { background: var(--ok);           box-shadow: 0 0 8px rgba(74,149,201,0.55); }
.particle.input  { background: var(--warm);         box-shadow: 0 0 8px rgba(184,200,29,0.55); }

/* Display-page status corner and stats — keep readable */
.status .dot.on { background: var(--brand-chartreuse); }

.stat.bridge .n,  .count.bridge .v  { color: var(--brand-orange); }
.stat.plank  .n,  .count.plank  .v  { color: var(--warm); }
.stat.tool   .n,  .count.tool   .v  { color: var(--ok); }
.stat.input  .n,  .count.input  .v  { color: var(--warm); }

/* Help hint pill on display */
.help-hint, .stats {
  background: rgba(255,255,255,0.65);
  color: var(--muted);
  border-color: var(--frame);
}

/* ============================================================
   Phase breadcrumb + buttons — current uses brand deep, primary
   actions use brand chartreuse.
   ============================================================ */

.phase-breadcrumb { border-color: var(--frame); }
.phase-link.current {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
  font-weight: 600;
}
.phase-link.past  { color: var(--muted); opacity: 0.8; }
.phase-link.future { color: var(--muted); opacity: 0.45; }
.phase-link:hover { color: var(--fg); }
.phase-arrow, .phase-round-divider { color: var(--frame); }

/* Phase type tag — brand-aligned */
.phase-type-tag                              { background: transparent; border: 1px solid var(--frame); color: var(--muted); }
.phase-type-tag.phase-type-planning          { color: var(--muted); border-color: var(--frame); }
.phase-type-tag.phase-type-sharing           { color: var(--brand-blue); border-color: var(--brand-blue); }
.phase-type-tag.phase-type-collecting        { color: var(--brand-orange); border-color: var(--brand-orange); }
.phase-type-tag.phase-type-working           { color: var(--brand-deep); border-color: var(--brand-deep); }
.phase-type-tag.phase-type-closed            { color: var(--muted); opacity: 0.7; }

/* Buttons */
.btn, .modal-btn, .phase-nav-btn {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--frame);
}
.btn:hover:not(:disabled), .modal-btn:hover, .phase-nav-btn:hover {
  border-color: var(--fg);
  background: rgba(27,27,27,0.04);
}
.btn.primary, .btn-primary, .modal-btn.primary,
.submit-btn, .new-project-btn {
  background: var(--brand-chartreuse);
  color: var(--fg);
  border-color: var(--brand-chartreuse);
  font-weight: 600;
}
.btn.primary:hover:not(:disabled),
.btn-primary:hover,
.modal-btn.primary:hover,
.submit-btn:hover:not(:disabled),
.new-project-btn:hover {
  background: #d8eb1f;
  border-color: #d8eb1f;
}
.btn.danger {
  color: var(--brand-deep);
  border-color: rgba(224,2,58,0.4);
}
.btn.danger:hover:not(:disabled) { border-color: var(--brand-deep); }

/* Tab nav (legacy — still rendered in some places) */
.tab-btn.active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
.tab-btn:not(.active):hover { color: var(--fg); }

/* Category-tinted accents — composer + stored cards */
.composer-card.need, .composer-card.bridge { border-top-color: var(--brand-orange); }
.composer-card.tool                        { border-top-color: var(--ok); }
.stored-card.need,    .stored-card.bridge { border-top-color: var(--brand-orange); }
.stored-card.tool                          { border-top-color: var(--ok); }
.stored-card.plank                         { border-top-color: var(--warm); }
.submit-btn.need, .submit-btn.bridge { background: var(--brand-orange); color: var(--fg); border-color: var(--brand-orange); }
.submit-btn.tool                     { background: var(--ok); color: var(--fg); border-color: var(--ok); }

/* Detail card top borders match category */
.detail-card.bridge { border-top-color: var(--brand-orange); }
.detail-card.plank  { border-top-color: var(--warm); }
.detail-card.tool   { border-top-color: var(--ok); }
.detail-card.need   { border-top-color: var(--brand-orange); }

/* Consolidation tags */
.consol-tag.merge    { color: var(--brand-orange); border-color: var(--brand-orange); }
.consol-tag.applied  { color: var(--ok); border-color: var(--ok); }
.consol-tag.draft    { color: var(--muted); }
.consol-group       { border-left-color: var(--brand-orange); }
.consol-group.applied { border-left-color: var(--ok); }

/* Match chips */
.match-chip {
  background: rgba(74,149,201,0.14);
  border-color: rgba(74,149,201,0.5);
  color: var(--fg);
}
.match-tool-card {
  background: rgba(74,149,201,0.06);
  border-left-color: var(--ok);
  border-color: rgba(74,149,201,0.4);
}
.match-bridge-target {
  background: rgba(255,172,8,0.06);
  border-color: rgba(255,172,8,0.35);
}
.match-plank-target {
  background: rgba(184,200,29,0.07);
  border-color: rgba(184,200,29,0.35);
  border-left-color: var(--warm);
}
.match-bridge { border-left-color: var(--brand-orange); }
.match-bridge-label { color: var(--brand-orange); }

/* Project cards in dashboard */
.project { background: #fff7fa; border-color: var(--frame); }
.project:hover { border-color: var(--fg); }
.project-phase.setup        { color: var(--muted); }
.project-phase.intention,
.project-phase.bridges,
.project-phase.bridges_reveal,
.project-phase.bridges_share,
.project-phase.planks,
.project-phase.planks_share,
.project-phase.tools,
.project-phase.matching     { color: var(--brand-orange); border-color: rgba(255,172,8,0.35); }
.project-phase.reveal       { color: var(--brand-blue); border-color: rgba(24,24,232,0.35); }
.project-phase.archived     { color: var(--muted); opacity: 0.7; }

/* Nav links on pages with their own nav — blue marks active/hover */
nav a { color: var(--muted); }
nav a:hover, nav a.current { color: var(--brand-blue); border-color: var(--brand-blue); }

/* Status text utility */
.live-counter .dot { background: var(--brand-deep); }
.save-hint.live { color: var(--brand-deep); }