/* ==========================================================================
   PLAYBOOK — force-directed graph, reskinned to Field Notes.
   Category palette (also mirrored in the legend markup):
     strategic #A8552F · gtm #47512F · systems #3E6274 ·
     ai #BC8636 · human #6E6656 · center #2A2620 · trigger dashed
   ========================================================================== */

/* Hero */
.pb-hero { padding: clamp(var(--sp-7), 5vw, var(--sp-9)) 0 var(--sp-6); text-align: center; }
.pb-hero h1 { margin: 0 auto var(--sp-4); }
.pb-subtitle { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 620px; margin: 0 auto; }

/* Graph section */
.pb-graph-section { padding: 0 0 var(--sp-7); }
.pb-graph-wrap {
  position: relative; max-width: 960px; margin: 0 auto; height: 650px;
  background: var(--paper-card); border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden;
}
#playbook-graph { width: 100%; height: 100%; }
#playbook-graph svg { display: block; width: 100%; height: 100%; }

/* Nodes */
.node circle { cursor: pointer; transition: opacity 0.2s ease; }
.node.type-center circle { fill: #2A2620; stroke: var(--gold); stroke-width: 2; }
.node.type-category circle { stroke-width: 1.5; }
.node.type-module circle { stroke-width: 1; }
.node.type-submodule circle { stroke-width: 0.5; }
.node.type-trigger circle { fill: transparent !important; stroke-dasharray: 3 2; stroke-width: 1.5; }

.node.cat-strategic circle { fill: #A8552F; stroke: #A8552F; }
.node.cat-gtm circle       { fill: #47512F; stroke: #47512F; }
.node.cat-systems circle   { fill: #3E6274; stroke: #3E6274; }
.node.cat-ai circle        { fill: #BC8636; stroke: #BC8636; }
.node.cat-human circle     { fill: #6E6656; stroke: #6E6656; }
.node.cat-triggers circle  { stroke: #B8AD98; }
.node.type-trigger.cat-triggers circle { fill: transparent; stroke: #B8AD98; }

/* Node labels — dark ink with a paper halo so they read over any node/bg */
.node text {
  font-family: var(--font-body); font-size: 8px; fill: var(--ink);
  paint-order: stroke; stroke: var(--paper-card); stroke-width: 2.5px; stroke-linejoin: round;
  pointer-events: none; text-anchor: middle; dominant-baseline: central; font-weight: 500;
}
.node.type-center text { font-size: 10px; fill: var(--paper-card); stroke: none; font-weight: 600; }
.node.type-category text { font-size: 9px; font-weight: 600; }
.node.type-module text, .node.type-submodule text, .node.type-trigger text { opacity: 0; transition: opacity 0.15s ease; }
.node.type-module.hovered text, .node.type-module.selected text, .node.type-module.neighbor text,
.node.type-submodule.hovered text, .node.type-submodule.selected text, .node.type-submodule.neighbor text,
.node.type-trigger.hovered text, .node.type-trigger.selected text, .node.type-trigger.neighbor text { opacity: 1; }
.pb-zoomed-in .node.type-module text { opacity: 1; }

/* Edges */
.edge { stroke: var(--line-strong); stroke-width: 0.5; transition: opacity 0.2s ease; }
.edge.type-center-category { stroke: var(--muted); stroke-width: 1; }
.edge.type-category-module { stroke-width: 0.7; }
.edge.type-cross-link { stroke-dasharray: 4 3; stroke: var(--muted); stroke-width: 0.4; opacity: 0.5; }
.edge.type-trigger-module { stroke-dasharray: 2 2; stroke: #B8AD98; stroke-width: 0.4; opacity: 0.5; }
.edge.type-module-submodule { stroke-width: 0.5; }

.node.dimmed circle, .node.dimmed text { opacity: 0.12; }
.edge.dimmed { opacity: 0.05; }
.node.hovered circle { filter: drop-shadow(0 0 5px rgba(71, 81, 47, 0.5)); }
.node.selected circle { filter: drop-shadow(0 0 7px rgba(71, 81, 47, 0.6)); stroke: var(--field) !important; stroke-width: 2 !important; }

/* Detail panel */
.pb-detail {
  position: absolute; top: 0; right: 0; width: 320px; height: 100%;
  background: var(--paper); border-left: 1px solid var(--line-strong); padding: var(--sp-6) var(--sp-5);
  overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease; z-index: 10;
}
.pb-detail.open { transform: translateX(0); }
.pb-detail-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.pb-detail-close:hover { color: var(--ink); }
.pb-detail-badge { display: inline-block; font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); margin-bottom: var(--sp-3); }
.pb-detail-badge.badge-strategic { background: rgba(168,85,47,0.14); color: #8A4526; }
.pb-detail-badge.badge-gtm       { background: rgba(71,81,47,0.14); color: #47512F; }
.pb-detail-badge.badge-systems   { background: rgba(62,98,116,0.16); color: #34576A; }
.pb-detail-badge.badge-ai        { background: rgba(188,134,54,0.16); color: #8A6222; }
.pb-detail-badge.badge-human     { background: rgba(110,102,86,0.18); color: #5C5546; }
.pb-detail-badge.badge-triggers  { background: var(--paper-sunk); color: var(--muted); }
.pb-detail-title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); font-weight: 600; margin: 0 0 var(--sp-2); line-height: 1.3; }
.pb-detail-desc { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-soft); margin: 0 0 var(--sp-5); }
.pb-detail-sections { display: none; }
.pb-detail-sections.show { display: block; }
.pb-section { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.pb-section:last-child { border-bottom: none; }
.pb-section-label { display: block; font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 600; color: var(--clay); margin-bottom: 6px; }
.pb-section-text { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); margin: 0; }

.pb-detail-pagelink { display: none; margin: var(--sp-4) 0 0; }
.pb-detail-pagelink.show { display: block; }
.pb-page-link { display: inline-block; font-size: var(--fs-small); font-weight: 600; color: var(--paper-card); background: var(--field); padding: 8px 16px; border-radius: var(--r-sm); text-decoration: none; transition: background 0.15s ease; }
.pb-page-link:hover { background: var(--field-deep); color: var(--paper-card); }
.pb-page-coming { font-size: var(--fs-micro); color: var(--faint); }
.pb-mobile-mod-pagelink { margin-top: 8px; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.pb-mobile-module.open .pb-mobile-mod-pagelink { max-height: 50px; }

.pb-detail-related { display: none; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.pb-detail-related.show { display: block; }
.pb-related-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pb-related-btn { font-size: var(--fs-micro); color: var(--ink-soft); background: var(--paper-sunk); border: 1px solid var(--line); padding: 4px 10px; border-radius: var(--r-pill); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.pb-related-btn:hover { border-color: var(--field); color: var(--field); }

/* Legend */
.pb-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; margin: var(--sp-5) 0 var(--sp-3); }
.pb-legend-item { display: flex; align-items: center; gap: 7px; font-size: var(--fs-small); color: var(--muted); }
.pb-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pb-instruction { text-align: center; font-size: var(--fs-small); color: var(--faint); margin: var(--sp-2) 0 0; }

/* Mobile fallback */
.pb-mobile { display: none; padding: 0 0 var(--sp-7); }
.pb-mobile-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-5); }
.pb-mobile-category { margin-bottom: var(--sp-4); }
.pb-mobile-cat-header { display: flex; align-items: center; gap: 10px; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.pb-mobile-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pb-mobile-cat-name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); flex: 1; }
.pb-mobile-cat-toggle { font-size: 14px; color: var(--muted); transition: transform 0.2s ease; }
.pb-mobile-category.open .pb-mobile-cat-toggle { transform: rotate(90deg); }
.pb-mobile-modules { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.pb-mobile-category.open .pb-mobile-modules { max-height: 2000px; }
.pb-mobile-module { padding: var(--sp-3) 0 var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); cursor: pointer; }
.pb-mobile-mod-name { font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.pb-mobile-mod-desc { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.25s ease, margin 0.25s ease; }
.pb-mobile-module.open .pb-mobile-mod-desc { max-height: 500px; margin-top: 6px; }
.pb-mobile-module.open .pb-mobile-mod-sections { max-height: 1000px; margin-top: 8px; }
.pb-mobile-mod-sections { max-height: 0; overflow: hidden; transition: max-height 0.25s ease, margin 0.25s ease; }
.pb-mobile-mod-section { margin-bottom: 8px; }
.pb-mobile-mod-section-label { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 600; color: var(--clay); margin-bottom: 2px; }
.pb-mobile-mod-section-text { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); margin: 0; }
.pb-mobile-triggers { margin-top: var(--sp-5); }
.pb-mobile-triggers .pb-mobile-cat-header { border-bottom: 1px dashed var(--line-strong); }
.pb-mobile-trigger-item { padding: 10px 0 10px var(--sp-5); border-bottom: 1px dashed var(--line); }
.pb-mobile-trigger-label { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.pb-mobile-trigger-desc { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); margin: 4px 0 0; }

/* CTA */
.pb-cta { text-align: center; padding: var(--sp-7) 0 var(--sp-9); border-top: 1px solid var(--line); }
.pb-cta h2 { margin: 0 auto var(--sp-3); }
.pb-cta p { font-size: var(--fs-body); line-height: 1.6; color: var(--muted); max-width: 500px; margin: 0 auto var(--sp-5); }

@media (max-width: 768px) {
  .pb-graph-section { display: none; }
  .pb-mobile { display: block; }
}
@media (max-width: 480px) {
  .pb-subtitle { font-size: var(--fs-body); }
  .pb-detail { width: 100%; }
}