:root {
  color-scheme: light;
  --paper: #f7f8f3;
  --surface: #fff;
  --ink: #182b25;
  --secondary: #52665e;
  --green: #145743;
  --dark: #133e32;
  --bright: #d9f69c;
  --mint: #eef5e6;
  --line: #dbe3da;
  font-family: "Avenir Next", Avenir, Inter, system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; margin: 0; min-width: 0; background: var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #187b60; outline-offset: 3px; }
h1,h2,h3,p { margin: 0; }
a { color: inherit; }
.shell { width: min(100% - 64px, 1320px); margin-inline: auto; }
.masthead { border-bottom: 1px solid #9eb5a4; background: #fcfcf8; }
.masthead-inner { min-height: 66px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 16px; align-items: center; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand h1 { font-size: 18px; line-height: 1.15; letter-spacing: -.04em; }
.brand .eyebrow { font-size: 9px; margin-bottom: 2px; }
.search-trigger { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-weight: 650; font-size: 13px; }
.search-trigger:hover { border-color: #9bad9c; }
.search-icon { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1.6px solid currentColor; position: relative; margin-right: 2px; }
.search-icon::after { content: ""; position: absolute; width: 5px; height: 1.6px; background: currentColor; right: -4px; bottom: -2px; transform: rotate(45deg); }
kbd { padding: 1px 5px; margin-left: 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--secondary); background: var(--paper); font-size: 12px; }
.hero { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 36px 0 30px; }
.eyebrow,.move-kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .15em; color: var(--green); }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #23745a; }
.hero h1 { font-size: clamp(45px, 5.3vw, 74px); font-weight: 700; line-height: .98; letter-spacing: -.065em; margin-top: 12px; }
.hero h1 span { color: #28866a; }
.hero-break { display: none; }
.intro { color: var(--secondary); font-size: 16px; line-height: 1.55; margin-top: 15px; max-width: 51ch; }
.hero-map { flex: 0 1 450px; min-width: 0; }
.hero-map svg { width: 100%; display: block; height: auto; }
.areas { margin-bottom: 18px; scroll-margin-top: 10px; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.section-heading h2, .level-heading { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.section-heading h2 span, .level-heading span { font: 600 11px/1.15 ui-monospace, monospace; color: var(--green); background: #e5eee2; padding: 3px 5px; border-radius: 4px; }
#catalog-counts { color: var(--secondary); font-size: 12px; font-weight: 600; }
.area-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.choice { border: 1px solid transparent; text-align: left; border-radius: 8px; background: transparent; }
.area-grid .choice { display: flex; align-items: center; gap: 10px; min-height: 71px; padding: 10px 12px; background: var(--surface); border-color: var(--line); }
.area-grid .choice:hover { border-color: #9bad9c; }
.area-grid .choice[aria-pressed="true"] { color: #fff; border-color: var(--dark); background: var(--dark); }
.area-mark { flex: 0 0 34px; display: grid; place-items: center; height: 34px; border-radius: 8px; color: var(--green); background: var(--mint); }
.area-mark svg { width: 21px; height: 21px; }
.area-grid .choice[aria-pressed="true"] .area-mark { background: var(--bright); color: var(--dark); }
.area-copy { display: grid; gap: 3px; min-width: 0; }
.area-copy strong { font-size: 14px; line-height: 1.15; letter-spacing: -.015em; }
.area-description { font-size: 11px; line-height: 1.25; color: var(--secondary); }
.area-grid .choice[aria-pressed="true"] .area-description { color: #d4e4dc; }
.choice-arrow { margin-left: auto; flex-shrink: 0; color: #4a6a5c; font-size: 16px; }
.area-grid .choice[aria-pressed="true"] .choice-arrow { color: var(--bright); }
.example { font-size: 13px; line-height: 1.45; color: #394e45; }
.example strong { color: var(--green); font-weight: 750; }
.area-example { margin-top: 9px; padding: 8px 11px; background: var(--mint); border-radius: 7px; }
.panel-example { background: #f6f8f3; border-bottom: 1px solid var(--line); padding: 9px 13px; }
.route-example:not(:empty) { margin-top: 10px; }
.route-example .example { color: #e1ede6; }
.route-example .example strong { color: var(--bright); }
.sublevel .example { margin-top: 7px; }

.workspace { display: grid; grid-template-columns: minmax(160px,.65fr) minmax(250px,1.02fr) minmax(310px,1.23fr); gap: 12px; align-items: start; }
.panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.panel-head,.detail-head { padding: 15px 15px 13px; border-bottom: 1px solid var(--line); }
.panel-parent { font-size: 23px; line-height: 1.12; font-weight: 800; letter-spacing: -.045em; margin-top: 10px; overflow-wrap: anywhere; }
.family-list { display: grid; gap: 3px; padding: 8px; }
.family-list .choice, .outlet-list .choice, .tactic-list .choice { display: flex; align-items: center; gap: 5px; min-height: 39px; padding: 7px 9px; font-size: 13px; font-weight: 650; line-height: 1.2; }
.family-list .choice:hover, .outlet-list .choice:hover, .tactic-list .choice:hover { background: var(--paper); border-color: var(--line); }
.family-list .choice[aria-pressed="true"], .outlet-list .choice[aria-pressed="true"], .tactic-list .choice[aria-pressed="true"] { background: var(--mint); color: #124f3d; border-color: #c6d9c1; }
.outlet-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 10px; }
.outlet-list .choice { border-color: var(--line); min-height: 45px; }
.choice-label { min-width: 0; overflow-wrap: anywhere; }
.detail-head { background: var(--dark); color: #fff; border-radius: 12px 12px 0 0; border: none; }
.detail-head .level-heading { color: #d9e9de; }
.detail-head .level-heading span { color: var(--dark); background: var(--bright); }
.detail-head button:focus-visible { outline-color: var(--bright); }
.route-list,.tactic-list { display: flex; flex-wrap: wrap; gap: 6px; }
.route-list { margin-top: 11px; }
.route-list .choice { color: #e4efe8; border-color: #659181; border-radius: 7px; padding: 6px 9px; min-height: 34px; font-size: 12px; font-weight: 700; }
.route-list .choice:hover { background: #215946; }
.route-list .choice[aria-pressed="true"] { color: var(--dark); background: var(--bright); border-color: var(--bright); }
.detail-body { padding: 13px 14px 14px; }
#deeper-levels:empty { display: none; }
#deeper-levels { display: grid; gap: 12px; margin-bottom: 14px; }
.tactic-list { margin-top: 7px; }
.tactic-list .choice { border-color: var(--line); min-height: 34px; font-size: 12px; }
.first-move { background: #f1f5ed; border-left: 3px solid #3a8b72; padding: 12px 12px 11px; border-radius: 0 8px 8px 0; }
.first-move h3 { margin: 3px 0 3px; font-size: 17px; letter-spacing: -.025em; }
.move-action, .signal { font-size: 13px; line-height: 1.5; color: #394e45; }
.first-move .example { border-top: 1px solid #d9e4d6; padding-top: 7px; margin-top: 8px; }
.signal { border-top: 1px solid #d9e4d6; padding-top: 7px; margin-top: 8px; }
.signal strong { color: var(--green); margin-right: 3px; }
.footer { margin: 18px 0 24px; }
.breadcrumbs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; row-gap: 5px; color: var(--secondary); font-size: 12px; }
.breadcrumbs li:not(:first-child)::before { content: "›"; margin-inline: 7px; color: #668376; }
.breadcrumbs a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.breadcrumbs a[aria-current] { color: var(--ink); font-weight: 750; text-decoration: none; }

/* Search stays in the header; results are the map itself. */
.search-control { width:clamp(210px, 28vw, 380px); min-width:0; padding-block:8px; }
.search-field { display:flex; align-items:center; border:1px solid #a2b7a8; border-radius:8px; background:white; }
#search-input { width:100%; min-width:0; border:0; border-radius:8px; padding:9px 10px; background:transparent; color:var(--ink); font-size:14px; }
#search-input::-webkit-search-cancel-button { display:none; }
#clear-search { border:0; background:transparent; font-size:22px; padding:4px 10px; }
#search-status { color:var(--secondary); font-size:11px; margin-top:5px; }
.node.search-match,.node.selected.search-match { border:2px solid #9d6c00; background:#fff5c2; }
@media(max-width:700px) { .search-control { width:100%; } }
.visually-hidden,.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: absolute; z-index: 2; padding: 10px; background: var(--surface); }
@media (max-width: 1040px) {
  .hero-map { flex-basis: 330px; }
  .area-grid .choice { min-height: 80px; }
  .workspace { grid-template-columns: minmax(144px,.62fr) minmax(190px,1fr) minmax(245px,1.2fr); }
  .outlet-list { gap: 5px; padding: 7px; }
  .outlet-list .choice { padding: 6px; }
}
@media (max-width: 780px) {
  .shell { width: min(100% - 36px, 1320px); }
  .hero { padding: 29px 0 25px; }
  .hero h1 { font-size: clamp(42px, 7vw, 57px); }
  .hero-map { flex-basis: 245px; }
  .area-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .area-grid .choice { min-height: 64px; }
  .workspace { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
  .detail-panel { grid-column: 1 / -1; }
}
@media (max-width: 510px) {
  .shell { width: calc(100% - 28px); }
  .hero-map,.search-trigger kbd { display: none; }
  .hero { padding: 23px 0; }
  .hero h1 { max-width: 12ch; line-height: 1.01; }
  .intro { font-size: 14px; }
  .area-grid { gap: 6px; }
  .area-grid .choice { min-height: 72px; padding: 6px; gap: 6px; }
  .area-mark { flex-basis: 25px; height: 25px; border-radius: 5px; }
  .area-mark svg { width: 17px; height: 17px; }
  .area-grid .choice-arrow { display: none; }
  .area-copy strong { font-size: 13px; }
  .workspace { grid-template-columns: minmax(0,1fr); }
  .detail-panel { grid-column: auto; }
  .family-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .panel-head { padding: 11px 12px; }
  .panel-parent { font-size: 21px; margin-top: 7px; }
}
@media (pointer: coarse) {
  .choice,.route-list .choice,.tactic-list .choice,.family-list .choice,.search-trigger,.close-search { min-height: 44px; }
  #search-input { font-size: 16px; }
}
/* Expanding diagram */
#diagram { position:relative;padding:12px 0 70px;isolation:isolate; }
#connections { position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible; }
#connections path { fill:none;stroke:#b6c8b8;stroke-width:1.5; }
#connections path.in-plan { stroke:#4a8c6e;stroke-width:2; }
#connections path.selected-path { stroke:#19563f;stroke-width:3; }
.root-node { display:block;margin:0 auto;border:1px solid #164a38;border-radius:16px;background:var(--dark);color:white;padding:20px 34px;font-size:19px;font-weight:700;box-shadow:0 8px 22px #143e3219; }
.root-node span { display:block;font-size:12px;color:var(--bright);font-weight:500;margin-top:6px; }
.branch-row { display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px;margin-top:60px; }
.node { width:205px;background:#fff;border:1px solid #cfddce;border-radius:13px;box-shadow:0 3px 7px #173a2810;transition:border-color .18s,box-shadow .18s;cursor:default; }
.node:hover { border-color:#72a18c;box-shadow:0 6px 18px #173a281a; }
.node.selected { width:280px;border-color:#3b8062;background:#f5faee;box-shadow:0 5px 18px #173a2814; }
.node-button { display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;text-align:left;padding:9px 17px;border:0;background:transparent;border-radius:12px;font-weight:700;font-size:14px; }
.node-button:focus-visible { outline-offset:-3px; }
.node.selected .node-button { color:#144c37; }
.node-symbol { display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;border-radius:50%;background:#eef4e8;color:#315d43;font-size:18px;font-weight:400; }
.node.selected .node-symbol { background:var(--bright); }
.node-example { padding:0 17px 12px;font-size:12px;line-height:1.4;color:#435c4c; }
.node-description { color:#2f5142;font-weight:600; }
.node-preview { margin-top:4px; }
.node-preview strong { color:#2f7050; }
.node-signal { margin-top:8px; }
.node-caption { display:block;font-size:10px;letter-spacing:.12em;font-weight:800;color:#2f7050;margin:10px 0 4px; }
.node-caption[hidden] { display:none; }
.node-caption:first-child { margin-top:0; }
@keyframes unfold { from { opacity:0;transform:translateY(-9px) scale(.98); } to { opacity:1;transform:none; } }
@media(prefers-reduced-motion:reduce){.node{animation:none;transition:none;}}
@media(max-width:510px){.branch-row{gap:9px;margin-top:45px}.node{width:calc(50% - 5px)}.node.selected{width:100%}.node-button{font-size:13px;padding-inline:11px}.node-example{padding-inline:11px}.root-node{font-size:17px;padding:18px 24px}}


/* Left-to-right exploration keeps every level in its own column. */
.atlas { display:flex; flex:1; flex-direction:column; min-height:0; }
.diagram-tools { display:flex; align-items:center; justify-content:flex-end; gap:12px; color:var(--secondary); font-size:13px; }
.touch-help { display:none; }
.zoom-controls { display:flex; flex-shrink:0; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.zoom-controls button { min-width:38px; min-height:36px; padding:0 8px; border:0; border-radius:7px; background:transparent; font-weight:700; }
.zoom-controls button:hover:not(:disabled) { background:var(--mint); }
.zoom-controls button:disabled { opacity:.45; cursor:default; }
#zoom-reset { min-width:60px; font-variant-numeric:tabular-nums; }
.diagram-viewport {
  -webkit-user-select:none;
  user-select:none;
  flex:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  overflow-anchor:none;
  scrollbar-width:none;
  background:#eaf1e8 radial-gradient(#a4b9a7 1px, transparent 1px) 0 0 / 20px 20px;
  cursor:grab;
}
.diagram-viewport:focus-visible { outline:3px solid #187b60; outline-offset:-3px; }
.diagram-viewport::-webkit-scrollbar { display:none; }
.diagram-viewport.dragging, .diagram-viewport.dragging * { cursor:grabbing; user-select:none; }
.node-example { cursor:text; }
.branch-row .node-example { cursor:inherit; }
#diagram-stage { position:relative; overflow:clip; }
#diagram { position:absolute; display:flex; align-items:flex-start; gap:64px; width:max-content; padding:0 32px; transform-origin:top left; }
#branches { display:flex; align-items:flex-start; gap:64px; }
.branch-row { position:relative; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:center; gap:12px; margin:0; width:var(--card-width, 260px); flex-shrink:0; }
.root-node { flex:0 0 240px; width:240px; margin:0; padding:22px; }
.node,.node.selected { width:var(--card-width, 260px); flex-shrink:0; }
@keyframes unfold { from { opacity:0; } to { opacity:1; } }
@media(max-width:510px) {
  #diagram,#branches { gap:44px; }
  .branch-row,.node,.node.selected { width:var(--card-width, 235px); }
  .root-node { width:210px;flex-basis:210px; }
}
@media (max-width:700px) {
  .masthead-inner { grid-template-columns:minmax(0, 1fr) auto; gap:8px 12px; padding-block:8px; }
  .diagram-tools { grid-column:1 / -1; justify-content:space-between; }
}
@media (pointer:coarse) {
  .pointer-help { display:none; }
  .touch-help { display:inline; }
  .zoom-controls button { min-width:44px; min-height:44px; }
}

/* Audience evidence is confined to the inspector and an explicitly active filter. */
[hidden] { display:none !important; }
.masthead-inner { grid-template-columns:auto auto auto minmax(0,1fr); }
.audience-controls { display:flex;align-items:center;gap:6px; }
.audience-controls select,.audience-controls button { min-height:36px;border:1px solid #b5c9bb;border-radius:22px;padding:6px 12px;background:var(--surface);color:var(--green);font-family:inherit;font-size:13px;font-weight:600; }
.audience-controls select { font-family:inherit;font-size:13px;max-width:160px; }
.audience-controls select:focus-visible { outline:3px solid #187b60;outline-offset:2px; }
#audience-filter-status { font-size:12px;color:var(--secondary);padding-bottom:9px; }
.atlas { flex-direction:row;position:relative; }
.diagram-viewport { min-width:0; }
#audience-panel { flex:0 0 360px;width:360px;max-width:100%;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border-left:1px solid var(--line);padding:22px; }
.audience-panel-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.audience-panel-head .eyebrow { font-size:10px;letter-spacing:.12em; }
#audience-title { font-size:25px;line-height:1.2;margin-top:7px;overflow-wrap:anywhere; }
#close-audience { flex-shrink:0;min-width:36px;min-height:36px;border:1px solid var(--line);background:var(--paper);border-radius:50%;font-size:23px;color:var(--ink); }
#audience-breadcrumb { font-size:11px;color:var(--secondary);margin-top:10px;text-transform:capitalize; }
.audience-summary { font-size:14px;font-weight:600;line-height:1.5;margin:18px 0 10px; }
.audience-section { border-top:1px solid var(--line);padding-top:17px;margin-top:17px; }
.audience-section h3 { font-size:14px;margin-bottom:8px; }
.audience-section p { font-size:13px;line-height:1.5;margin-top:7px; }
.audience-section .audience-note,.audience-note { font-size:12px;line-height:1.5;color:var(--secondary); }
.audience-section strong { font-size:13px; }
.audience-values { margin:10px 0; }
.audience-value { display:flex;justify-content:space-between;gap:12px;padding:8px 10px;margin:3px 0;border-radius:5px;background:var(--paper);font-size:13px; }
.audience-value dd { margin:0;font-weight:700;font-variant-numeric:tabular-nums; }
.audience-value.current-age { background:var(--mint);box-shadow:inset 3px 0 var(--green); }
.audience-source + .audience-source { margin-top:14px; }
.audience-source-link { display:inline-block;font-size:12px;color:var(--green);line-height:1.5;text-underline-offset:3px; }
.audience-section .audience-match { font-size:19px;font-weight:700;color:var(--green); }
.audience-filter-badge { margin:0;padding:7px 17px;border-top:1px solid var(--line);color:var(--green);font-size:11px;font-weight:600;line-height:1.4; }
.node.audience-known { background:color-mix(in srgb, #d9f69c calc(var(--audience-strength) * 30%), white); }
.node.audience-unknown .audience-filter-badge { color:var(--secondary); }
@media(max-width:1100px) { .pointer-help { display:none; }.masthead-inner { gap:10px; } }
@media(max-width:800px) { .masthead-inner { grid-template-columns:1fr auto; }.diagram-tools { grid-column:auto; }.audience-controls { grid-row:2; }.brand h1 {font-size:16px;} }
@media(max-width:600px) { #audience-panel {position:absolute;inset:0 0 0 auto;width:min(360px,100%);z-index:5;box-shadow:-10px 0 30px #173a2820;} .audience-controls select,.audience-controls button,#close-audience {min-height:44px;} }
.audience-controls button:disabled { opacity:.45;cursor:default; }
/* A reserved comparison lane keeps bars outside card content and adjacent columns. */
.branch-row:has(.has-audience-bar) { margin-right:152px; }
.audience-bar-header { position:absolute;left:calc(100% + 14px);width:124px;margin:0;color:var(--secondary);font-size:12px;font-weight:600;line-height:18px;white-space:nowrap; }
.audience-bar-metric { display:block;margin-top:3px;font-size:11px;font-weight:400;line-height:15px;white-space:normal; }
.node.has-audience-bar,.node.selected.has-audience-bar { overflow:visible; }
/* Extend the clipping shape below the 5px stripe so its 12px card radius
   is not scaled down to fit the stripe height. Keep external scores visible. */
.surface-card::before { clip-path:inset(0 0 -12px round 12px 12px 0 0); }
.audience-floating { position:absolute;left:calc(100% + 14px);top:0;width:124px;min-height:30px;padding:10px 0;border:0;background:transparent;color:var(--green);display:flex;align-items:center; }
.audience-bar-track { display:block;width:100%;height:8px;background:var(--line);border-radius:6px;overflow:hidden; }
.audience-bar-fill { display:block;height:100%;background:var(--green);border-radius:6px; }
.audience-bar-unavailable { display:block;width:100%;height:8px;border-radius:6px;background:repeating-linear-gradient(135deg,#9baa9f 0 2px,transparent 2px 6px),var(--line); }
.audience-bar-detail { display:none;position:absolute;top:100%;left:0;width:210px;padding:10px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 3px 12px #173a2820;font-size:12px;line-height:1.5;text-align:left;pointer-events:none; }
.audience-floating:hover .audience-bar-detail,.audience-floating:focus-visible .audience-bar-detail { display:block; }
.node.has-audience-bar:has(.audience-floating:hover),.node.has-audience-bar:has(.audience-floating:focus-visible) { z-index:100!important; }
@media(pointer:coarse) { .audience-floating { min-height:44px; } }
#toggle-audience[aria-expanded="true"] { background:var(--mint);border-color:#67967c; }
.audience-panel-head { position:sticky;top:-22px;background:var(--surface);padding-block:10px;z-index:1; }
#audience-panel { overflow-x:hidden; }
@media(max-width:800px) { .audience-controls { flex-wrap:wrap; }.masthead-inner {grid-template-columns:minmax(0,1fr) auto;} }
@media(max-width:420px) { .masthead-inner {grid-template-columns:minmax(0,1fr);} .search-trigger {grid-row:2;width:max-content;} .audience-controls {grid-row:3;} .diagram-tools {grid-row:4;justify-content:flex-start;} }

.audience-fact-kind{display:block;font-size:12px;color:#7a571b;margin:8px 0}.audience-source-details{margin-top:8px;font-size:12px}.audience-section summary{cursor:pointer;font-weight:650}.audience-benchmark .audience-filter-badge{background:#fff2d4;color:#6a4c18}.audience-section h4{margin:14px 0 8px}.audience-source-link{overflow-wrap:anywhere}


.setup-link { display: block; margin-top: 10px; padding: 6px 0; border: 0; background: transparent; color: var(--green); text-align: left; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }

.content-note { font-style:italic; }
.content-example { margin-top:10px; }
.content-example strong, .content-example span { display:block; }
.content-example span { margin-top:3px; }

/* Camera owns positioning while cards are regrouped. */
.diagram-viewport { overflow-anchor: none; }

/* Keep platform identity in color; action labels remain ordinary readable text. */
.surface-card, .surface-card.selected {
  --platform-ink:#3f4b55; --platform-tint:#f2f4f6; --platform-stripe:#82909c;
  background:white; border-color:color-mix(in srgb, var(--platform-ink) 35%, white);
  position:relative; overflow:hidden;
}
.surface-card::before { content:''; display:block; height:5px; background:var(--platform-stripe); }
.surface-card .node-button,.surface-card.selected .node-button,.surface-card .node-caption { color:var(--platform-ink); }
.surface-card .node-symbol,.surface-card.selected .node-symbol { background:#ffffffbb; color:var(--platform-ink); }
.surface-card .node-description { color:#36413e; font-weight:400; }
.surface-actions { list-style:none; padding:0; margin:10px 0 0; }
.surface-actions li { border-top:1px solid #00000012; padding:7px 0; }
.surface-action { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; width:100%; padding:4px 0; border:0; background:transparent; color:var(--platform-ink); text-align:left; font-size:13px; font-weight:700; }
.surface-action:hover { text-decoration:underline; text-underline-offset:3px; }
.action-origin { color:#505b57; font-size:11px; margin:0; }
.action-guidance { color:#34413b; padding:8px 0 2px; }
.branch-row { gap:14px; }

.surface-card .node-label { display:flex; align-items:center; gap:9px; }
.platform-logo { width:22px; height:22px; flex:0 0 22px; fill:currentColor; }


.atlas { flex-direction:row; }
.diagram-viewport { min-width:0; }
.node,.node.selected { cursor:pointer; }
.node-heading { display:flex; align-items:flex-start; padding-right:10px; }
.node-button { flex:1; min-width:0; }
.node-symbol { margin-top:8px; border:1px solid var(--line); width:30px; height:30px; }
.node-symbol[hidden] { display:none; }
.node-symbol[aria-pressed="true"] { background:var(--bright); }
.plan-panel { width:360px; flex-shrink:0; overflow:auto; padding:22px 18px; border-left:1px solid var(--line); background:#fcfcf8; }
.plan-panel h2 { font-size:20px; margin:0 0 10px; }
.plan-hint,.plan-empty { font-size:13px; line-height:1.5; color:var(--secondary); }
.plan-empty { padding:22px 0; }
.plan-channel { margin-top:24px; }
.plan-channel-heading { font-size:15px; font-weight:750; color:var(--dark); padding-bottom:9px; border-bottom:1px solid var(--line); }
.platform-plan-list { display:grid; gap:14px; margin-top:12px; }
.plan-card,.plan-card.selected { width:100%; cursor:default; }
.plan-card .node-button { cursor:default; }
.plan-item { display:flex; gap:8px; align-items:flex-start; padding:10px 0; border-top:1px solid #00000015; }
.plan-item-detail { flex:1; min-width:0; }
.plan-item-detail summary { cursor:pointer; font-size:13px; font-weight:700; color:var(--platform-ink); }
.plan-item-detail p { margin-top:8px; }
.plan-item-remove { border:0; background:#ffffffaa; border-radius:50%; width:24px; height:24px; flex-shrink:0; }
.plan-flight { z-index:1000; pointer-events:none; box-shadow:0 12px 30px #143e3233; overflow:hidden; }
@media(max-width:700px) { .atlas { flex-direction:column; } .plan-panel { width:auto; max-height:42vh; border-left:0; border-top:1px solid var(--line); padding:12px 16px; } }

.plan-platform-body { padding:0 12px 12px; }
.plan-platform-body:empty { display:none; }
.plan-approach-heading { margin:6px 2px 12px; font-size:12px; color:var(--platform-ink); }
.plan-approach + .plan-approach { margin-top:18px; }
.plan-snapshot { width:100%; cursor:default; background:white; margin-top:10px; }
.plan-snapshot .node-button { color:var(--dark); }
.plan-snapshot .node-caption { color:#2f7050; }
.plan-snapshot .node-description { color:#2f5142; font-weight:600; }

/* Compact siblings overlap only their bottom edge, keeping every header usable. */
.node-stacked { padding-bottom:8px; box-shadow:0 3px 6px #143e3218; }
.node-stacked .node-example { display:none; }
.node-stacked:hover { border-color:#59856b; }
.node-heading .node-symbol { margin-bottom:8px; }
@media (pointer:coarse) {
  .node-heading .node-symbol { min-height:44px; min-width:44px; }
}

/* Brand identity stays in the logo, title and stripe; tint signals an opened card. */
.surface-card.selected { background:var(--platform-tint); }
.platform-logo { object-fit:contain; }
.surface-card[data-platform="discord"] .platform-logo { color:#5865f2; }
.surface-card[data-platform="whatsapp"] .platform-logo { color:#25d366; }
.surface-card[data-platform="telegram"] .platform-logo { color:#26a5e4; }
.surface-card[data-platform="etsy"] .platform-logo { color:#f16521; }
.surface-card[data-platform="yelp"] .platform-logo { color:#ff1a1a; }
.atlas { position:relative; overflow:hidden; }
.plan-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.plan-heading h2 { margin:0; }
.plan-toggle { display:grid; place-items:center; width:28px; height:28px; padding:0; flex-shrink:0; border:0; border-radius:5px; background:transparent; color:var(--secondary); cursor:pointer; }
.plan-toggle:hover { background:#e8eee8; color:var(--dark); }
.plan-toggle:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.plan-toggle { position:absolute; top:50%; right:0; width:40px; height:72px; align-content:center; gap:6px; transform:translateY(-50%); z-index:5; border-radius:8px 0 0 8px; background:#fcfcf8; border:1px solid var(--line); border-right:0; }
.plan-toggle-label { display:block; font-size:11px; font-weight:600; line-height:1; }
.plan-toggle svg { width:20px; height:20px; transform:rotate(0deg); }
.plan-reveal svg { transform:rotate(180deg); }
.plan-rail > .plan-toggle { right:100%; }
.plan-panel[hidden] { display:none; }

.plan-group-heading { display:flex; align-items:center; gap:8px; margin:12px 0; }
.plan-group-title { flex:1; margin:0; color:var(--dark); font-size:14px; }
.plan-channel > .plan-group-heading { border-bottom:1px solid var(--line); padding-bottom:8px; }
.plan-approach-group { margin:12px 0; padding:10px; border:1px solid var(--line); border-radius:10px; background:#f5f8f2; }
.plan-group-body { display:grid; gap:12px; }
.plan-group-body > .plan-card { margin:0; }
.plan-selection-badge { font-size:10px; color:var(--secondary); font-weight:500; }
.plan-group-heading .node-symbol { flex-shrink:0; margin-top:0; }
.plan-card > .node-heading .plan-selection-badge { align-self:center; }
.plan-card .plan-approach-group { background:#ffffff80; }

/* Knowledge floats in clear map space, otherwise shares the existing Plan rail. */
.plan-rail { position:relative; width:var(--plan-width,360px); flex:0 0 var(--plan-width,360px); min-height:0; display:flex; flex-direction:column; }
.plan-rail:has(> .plan-panel[hidden]):not(:has(> #audience-panel:not([hidden]))) { display:none; }
.plan-rail > .plan-panel { width:100%; min-height:0; flex:1; }
#audience-panel { position:absolute; inset:auto; z-index:5; min-height:0; padding:18px; border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 28px #173a2820; }
/* Keep the scroll affordance quiet without hiding it or changing scrolling. */
#audience-panel { scrollbar-width:thin; scrollbar-color:#a2b7a8 transparent; }
#audience-panel::-webkit-scrollbar { width:6px; height:6px; }
#audience-panel::-webkit-scrollbar-track { background:transparent; margin-block:14px; }
#audience-panel::-webkit-scrollbar-thumb { background:#a2b7a8; border-radius:999px; }
#audience-panel::-webkit-scrollbar-thumb:hover { background:#6f917c; }
#audience-panel::-webkit-scrollbar-corner { background:transparent; }
#audience-panel .audience-panel-head { top:-18px; }
.knowledge-docked .plan-rail > .plan-panel { flex:1 1 50%; }
.knowledge-docked .plan-rail > #audience-panel { position:relative; inset:auto; width:100%; height:50%; flex:1 1 50%; border-radius:14px; box-shadow:none; }
@media(max-width:700px) {
  .atlas > .plan-toggle { top:auto; bottom:0; transform:none; }
  .plan-toggle svg { transform:rotate(90deg); }
  .plan-reveal svg { transform:rotate(270deg); }
  .plan-rail > .plan-toggle { top:0; right:0; transform:translateY(-100%); }
  .plan-rail { width:100%; flex:0 0 auto; max-height:42vh; }
  .plan-rail > .plan-panel { max-height:42vh; }
  .knowledge-docked .plan-rail { height:50%; max-height:50%; }
  .knowledge-docked .plan-rail > .plan-panel { max-height:50%; }
}

/* Contextual demographic chips share the existing compact control styling. */
.audience-controls,#demographic-chips { display:flex;flex-wrap:wrap;align-items:center;gap:6px; }
.audience-controls select.demographic-active { background:var(--mint);border-color:var(--green); }
#demographic-chips select { max-width:210px; }
#demographic-chips select:not(.demographic-active) { font-weight:400; border-color:#d8e2da; }
.audience-floating { flex-direction:column;align-items:stretch;gap:3px;justify-content:center; }
.audience-bar-subset { font-size:10px;line-height:12px;color:var(--secondary);text-align:left; }
/* Map-local controls leave the header focused on identity. */
.masthead-inner { grid-template-columns:1fr auto; }
.canvas-shell { position:relative; display:flex; flex:1; min-width:0; min-height:0; overflow:hidden; }
.canvas-tools { position:absolute; z-index:4; bottom:16px; left:16px; display:flex; align-items:center; gap:12px; }
.canvas-tools .zoom-controls { box-shadow:0 3px 12px #173a2818; }
#diagram-help { font-size:12px; color:var(--secondary); background:#eaf1e8e8; border-radius:6px; padding:4px 8px; }
#direction-controls { position:relative; flex-shrink:0; z-index:3; display:flex; width:max-content; padding:2px; border:1px solid #aac3af; border-radius:8px; background:#edf2eb; }
#direction-controls button { min-height:26px; padding:4px 8px; border:0; border-radius:5px; background:transparent; color:var(--dark); font-size:11px; font-weight:700; white-space:nowrap; }
#direction-controls button:hover { background:var(--mint); }
#direction-controls button[aria-pressed="true"] { background:var(--dark); color:white; }
@media(max-width:800px) { .masthead-inner { grid-template-columns:1fr auto; } .audience-controls { grid-row:1; } }
@media(max-width:510px) { .canvas-tools { bottom:10px; left:10px; } #diagram-help { display:none; } .brand h1 {font-size:16px;} }

.canvas-topbar { position:absolute; z-index:4; top:16px; left:16px; right:60px; display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,320px); align-items:start; gap:8px 16px; pointer-events:none; }
.canvas-topbar > * { pointer-events:auto; }
.canvas-filters { display:contents; }
.canvas-topbar #objective-chips { grid-column:1; grid-row:1; margin:0; }
.canvas-topbar .audience-controls { grid-column:1 / -1; grid-row:2; }
.canvas-topbar #audience-filter-status { grid-column:1 / -1; grid-row:3; margin:0; }
.canvas-filters .audience-controls { flex-wrap:wrap; }
.canvas-topbar .search-control { grid-column:2; grid-row:1; width:100%; min-width:0; max-width:none; margin:0; padding:0; }
.canvas-shell .search-field { box-shadow:0 3px 12px #173a2818; }
.canvas-shell #search-status, .canvas-shell #audience-filter-status { width:fit-content; max-width:100%; padding:4px 8px; border-radius:6px; background:#eaf1e8f2; }
@media(max-width:510px) {.canvas-topbar { top:10px; left:10px; right:54px; } }

.canvas-shell #search-status:empty { padding:0; margin:0; }

.demographic-filter-badge { margin:6px 12px 10px; padding:6px 8px; background:#edf3ed; border-radius:6px; color:var(--green); font-size:11px; line-height:1.4; }

.canvas-topbar .audience-controls select { min-width:0; max-width:100%; }


.canvas-topbar #demographic-chips { min-width:0; }
.canvas-topbar #demographic-chips select { min-width:0; max-width:100%; }

/* One objective applies to every layer; scores are estimates, never percentages. */
.metric-segments {display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;border:1px solid #b5c9bb;border-radius:14px;background:var(--surface);}
.objective-chip {flex:0 0 auto;min-height:42px;padding:8px 12px;border:0;border-right:1px solid #dce6de;border-radius:0;background:transparent;color:var(--green);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.objective-chip:last-child {border-right:0;}
.objective-chip:focus-visible {outline:3px solid #187b60;outline-offset:-3px;}
.canvas-topbar .audience-controls select,.canvas-topbar .audience-controls button {min-height:34px;padding:4px 8px;font-size:12px;border-radius:18px;}
@media (pointer:coarse) {.canvas-topbar .audience-controls select,.canvas-topbar .audience-controls button {min-height:44px;}}
.objective-chip[aria-pressed="true"] {background:var(--mint);color:var(--green);border-color:#b5c9bb;}
.objective-score-value {font-size:11px;font-weight:600;text-align:left;line-height:16px;}

#objective-chips {display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:7px;}

.score-scope {font-size:10px;color:var(--secondary);line-height:13px;}

/* Reveal the complete scene only after startup layout and camera restoration. */
#diagram[data-initializing], html[data-initializing] .canvas-topbar, html[data-initializing] #plan-rail { visibility:hidden; }

/* Editable business root retains the same geometry and connector anchor. */
.root-node { width:320px; flex-basis:320px; padding:20px; }
.root-node button { font:inherit; cursor:pointer; }
#business-trigger { width:100%; border:0; background:transparent; color:white; text-align:left; padding:4px; overflow-wrap:anywhere; }
#business-trigger strong { font-size:18px; }
#business-form label { display:block; font-size:15px; margin-bottom:9px; }
#business-description { width:100%; box-sizing:border-box; resize:vertical; min-height:88px; font-family:inherit; font-size:14px; line-height:1.4; padding:10px; border:1px solid #b8d3c4; border-radius:8px; }
#business-form button, #business-results button { border:1px solid #8eac9d; border-radius:7px; padding:6px 8px; font-size:12px; margin:6px 4px 0 0; background:#f2f8ef; color:#164a38; }
#business-status { font-size:12px; font-weight:400; line-height:1.5; margin:10px 0 0; color:#e0eee5; }
#business-status:empty { display:none; }
.root-node [hidden] { display:none !important; }
.root-node :focus-visible { outline:3px solid #b9e690; outline-offset:3px; }
#business-form input { display:block; width:100%; box-sizing:border-box; padding:9px; border:1px solid #b8d3c4; border-radius:8px; font-family:inherit; font-size:14px; background:white; color:#18392d; }
#business-form label { margin-top:12px; }
#business-form small { font-weight:400; font-size:11px; }
.business-result-note { font-size:12px; font-weight:400; line-height:1.45; color:#e0eee5; margin:8px 0; }
#business-results a { display:block; color:#c9eeaa; font-size:12px; overflow-wrap:anywhere; margin-top:8px; }
#business-results { max-height:400px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#88ad99 transparent; }
#business-results button:disabled { opacity:.55; cursor:help; }

.business-sample-title { font-size:13px; color:#c9eeaa; margin:12px 0 6px; }

@media(max-width:510px) {
  .root-node { width:min(300px, calc(100vw - 48px)); flex-basis:min(300px, calc(100vw - 48px)); padding:18px; }
}

/* Transform the fill only: labels and final measured widths remain stable. */
@keyframes audience-fill-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.audience-bar-fill,.dataset-fill { transform-origin:left center; animation:audience-fill-in 650ms cubic-bezier(.22,.61,.36,1) 100ms backwards; }
@media (prefers-reduced-motion: reduce) {
  .audience-bar-fill,.dataset-fill { animation:none; }
}

/* Accessible switch with iOS-style track and sliding thumb. */
.auto-sort-switch {display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 8px;border:0;background:transparent;color:var(--green);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.auto-sort-track {display:block;position:relative;width:44px;height:26px;border-radius:20px;background:#a7b4ad;transition:background-color 180ms ease;}
.auto-sort-thumb {position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 1px 3px #0003;transition:transform 180ms ease;}
.auto-sort-switch[aria-checked="true"] .auto-sort-track {background:var(--green);}
.auto-sort-switch[aria-checked="true"] .auto-sort-thumb {transform:translateX(18px);}
.auto-sort-switch:focus-visible {outline:3px solid #187b60;outline-offset:2px;border-radius:10px;}
@media(max-width:720px) {
 .canvas-topbar {grid-template-columns:minmax(0,1fr);}
 .canvas-topbar .search-control {grid-column:1;grid-row:1;}
 .canvas-topbar #objective-chips {grid-column:1;grid-row:2;}
 .canvas-topbar .audience-controls {grid-row:4;}
 .canvas-topbar #audience-filter-status {grid-row:4;}
}
@media(prefers-reduced-motion:reduce) {.auto-sort-track,.auto-sort-thumb {transition:none;}}

/* Two compact, aligned comparison rows beside each card. */
.audience-floating.dual-score-bars {padding:5px 0;min-height:44px;gap:4px;}
.score-bar-row {display:flex;align-items:center;gap:6px;min-height:16px;}
.score-bar-row .audience-bar-track {flex:1;min-width:0;height:7px;}
.score-bar-row .objective-score-value {width:24px;flex:none;text-align:right;font-size:11px;}
.score-bar-cost .objective-score-value,.legend-cost {color:#24689e;}
.legend-suitability {color:var(--green);}
.audience-bar-metric > span {display:block;font-size:10px;line-height:16px;}
.score-overall {font-size:10px;font-weight:600;line-height:14px;color:var(--secondary);}
.score-overall[hidden] {display:none;}
.score-sort-select {min-height:40px;max-width:100%;padding:6px 10px;border:1px solid #b5c9bb;border-radius:12px;background:var(--surface);color:var(--green);font:inherit;font-size:13px;}
.score-sort-select:focus-visible {outline:3px solid #187b60;outline-offset:2px;}
/* Expanded source-specific datasets in the knowledge panel. */
.dataset-section > .dataset-metric { margin:0 0 8px;font-size:16px;font-weight:650;line-height:1.4; }
.dataset-chart { margin:18px 0; }
.dataset-chart h4 { margin:0 0 12px;font-size:12px;color:var(--secondary); }
.dataset-bars { margin:0;display:grid;gap:12px; }
.dataset-row { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px; }
.dataset-row dt { font-size:12px;line-height:1.4; }
.dataset-number { margin:0;font-size:12px;font-variant-numeric:tabular-nums; }
.dataset-track { grid-column:1 / -1;height:7px;display:block;border-radius:6px;overflow:hidden;background:var(--line); }
.dataset-fill { display:block;height:100%;border-radius:6px;background:var(--green); }

/* Reuse the map's brand palette without changing neutral channel panels. */
#audience-panel[data-knowledge-brand] .audience-panel-head { background:var(--knowledge-tint);padding:14px 12px 12px;border-radius:10px;overflow:hidden; }
#audience-panel[data-knowledge-brand] .audience-panel-head::before { content:'';position:absolute;inset:0 0 auto;height:4px;background:var(--knowledge-stripe); }
#audience-panel[data-knowledge-brand] .audience-panel-head .eyebrow,
#audience-panel[data-knowledge-brand] #audience-title { color:var(--knowledge-ink); }
#audience-panel[data-knowledge-brand] #audience-title { display:flex;align-items:center;gap:10px; }
#audience-title .platform-logo { width:32px;height:32px;flex:0 0 32px; }
#audience-panel[data-knowledge-brand] .dataset-fill { background:var(--knowledge-ink); }

#direction-controls[hidden] { display:none; }
/* A separate edge grip resizes the drawer without toggling or panning the map. */
.plan-resize { position:absolute; top:0; bottom:0; left:-5px; width:10px; z-index:6; cursor:ew-resize; touch-action:none; }
.plan-resize::after { content:""; position:absolute; top:calc(50% - 20px); left:4px; width:3px; height:40px; border-radius:2px; background:var(--secondary); opacity:.35; }
.plan-resize:hover::after, .plan-resize:focus-visible::after, .plan-rail.resizing .plan-resize::after { opacity:1; background:var(--green); }
.plan-resize:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.plan-rail:has(> .plan-panel[hidden]) > .plan-resize { display:none; }
body.plan-resizing, body.plan-resizing * { cursor:ew-resize !important; user-select:none !important; }
@media(max-width:700px) { .plan-resize { display:none; } }

/* A column describes one semantic layer, even when branches skip a layer. */
.column-layer-heading { position:absolute;left:0;margin:0;font-size:16px;line-height:20px;font-weight:700;color:#285b49;pointer-events:none; }

/* Metric headers align with the bars and wrap within their existing column. */
.audience-bar-header.score-header { left:calc(100% + 14px); width:124px; font-size:11px; white-space:normal; }
.score-header .audience-bar-metric { overflow-wrap:anywhere; }

/* Comparison controls stay above filters; measurements never open a card inspector. */
.canvas-topbar #comparison-metrics {grid-column:1 / -1;grid-row:2;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
/* One identity color follows each metric from its chip to its chart. */
:is([data-metric="ai"], [data-metric-key="ai"]) { --metric-color:#17634d; }
:is([data-metric="users"], [data-metric-key="users"]) { --metric-color:#2766a8; }
:is([data-metric="affinity"], [data-metric-key="affinity"]) { --metric-color:#7951a8; }
:is([data-metric="daily"], [data-metric-key="daily"]) { --metric-color:#a45115; }
:is([data-metric="news"], [data-metric-key="news"]) { --metric-color:#ad4169; }
.audience-floating[data-metric-key] .audience-bar-fill { background:var(--metric-color); }
.audience-floating[data-metric-key] :is(.measurement-value,.objective-score-value) { color:var(--metric-color); }
.comparison-metric {font:inherit;font-size:12px;padding:6px 10px;border-radius:16px;border:1px solid color-mix(in srgb,var(--metric-color) 40%,white);background:var(--surface);color:var(--metric-color);cursor:pointer;}
.comparison-metric[aria-pressed="true"] {background:var(--metric-color);border-color:var(--metric-color);color:white;}
.comparison-metric:focus-visible {outline:3px solid #187b60;outline-offset:2px;}
.canvas-topbar .audience-controls {grid-row:4;}
.canvas-topbar #audience-filter-status {grid-row:3;font-size:11px;max-width:900px;}
.measured-comparison {cursor:default;display:flex;flex-direction:column;gap:3px;}
.measurement-value {font-size:11px;line-height:1.25;color:var(--green);font-weight:600;}
.measurement-scope {font-size:10px;line-height:1.2;color:#53675a;}
@media(max-width:510px){.canvas-topbar #comparison-metrics{grid-row:3;}.canvas-topbar .audience-controls{grid-row:5;}.canvas-topbar #audience-filter-status{grid-row:4;}}

/* Keep metric context close to its controls and selection guidance with filters. */
.canvas-topbar #audience-filter-status { margin-top:-4px; padding-top:0; padding-bottom:0; }
.canvas-topbar #comparison-metrics .auto-sort-switch { min-height:34px; }
@media(pointer:coarse) { .canvas-topbar #comparison-metrics .auto-sort-switch { min-height:44px; } }

.demographic-menu { position:relative; }
.demographic-menu summary { list-style:none; cursor:pointer; border:1px solid #d8e2da; border-radius:18px; background:var(--surface); color:var(--green); padding:8px 12px; font-size:12px; }
.demographic-menu summary::-webkit-details-marker { display:none; }
.demographic-menu summary { display:flex; align-items:center; gap:12px; }
.demographic-menu summary::after { content:''; display:block; flex:none; width:7px; height:7px; margin-top:-4px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.demographic-menu[open] > summary::after { margin-top:4px; transform:rotate(225deg); }
.demographic-menu summary.demographic-active { background:var(--mint); border-color:#90ac98; font-weight:600; }
.demographic-menu summary:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.demographic-options { position:absolute; z-index:8; top:calc(100% + 5px); left:0; min-width:180px; padding:6px; border:1px solid #b5c9bb; border-radius:10px; background:var(--surface); box-shadow:0 6px 18px #173a2826; }
.demographic-options label { display:flex; align-items:center; gap:8px; padding:9px; font-size:13px; cursor:pointer; border-radius:5px; }
.demographic-options label:hover { background:var(--mint); }
.demographic-options input { accent-color:var(--green); width:16px; height:16px; margin:0; }

/* Metric descriptions share one compact, expandable treatment. */
.canvas-topbar #audience-filter-status { box-sizing:border-box; min-width:0; width:100%; max-width:900px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.canvas-topbar #audience-filter-status[aria-expanded="true"] { white-space:normal; overflow:visible; }
.canvas-topbar #audience-filter-status:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

/* Compact fixed controls without scaling text or the interactive map. */
.canvas-topbar { gap:6px 16px; }
@media(min-width:721px) {
  /* Search spans the toolbar so its height cannot stretch the objective row. */
  .canvas-topbar .search-control { grid-row:1 / 4; }
  .canvas-topbar #comparison-metrics,.canvas-topbar .audience-controls { grid-column:1; }
}
.canvas-topbar .metric-segments { border-radius:9px; }
.canvas-topbar .objective-chip { min-height:30px; padding:4px 9px; font-size:12px; }
.canvas-topbar #comparison-metrics { gap:4px; }
.canvas-topbar .comparison-metric { min-height:28px; padding:4px 8px; }
.canvas-topbar #comparison-metrics .auto-sort-switch { min-height:28px; padding:2px 6px; gap:6px; font-size:12px; }
.canvas-topbar .auto-sort-track { width:34px; height:20px; }
.canvas-topbar .auto-sort-thumb { width:14px; height:14px; }
.canvas-topbar .auto-sort-switch[aria-checked="true"] .auto-sort-thumb { transform:translateX(14px); }
.canvas-topbar .audience-controls,.canvas-topbar #demographic-chips { gap:4px; }
/* Industry and demographics refine the metric: keep them visually secondary. */
.canvas-topbar #business-industry,
.canvas-topbar .demographic-menu summary { min-height:24px; padding:2px 7px; gap:6px; font-size:11px; line-height:18px; color:var(--secondary); background:#f7faf5; border-color:#d8e2da; }
.canvas-topbar .demographic-menu summary::after { width:5px; height:5px; }
.canvas-topbar .demographic-menu summary.demographic-active { color:var(--green); background:var(--mint); border-color:#aac3af; }
.canvas-topbar .audience-controls button { min-height:24px; padding:2px 7px; font-size:11px; line-height:18px; font-weight:400; color:var(--secondary); background:#f7faf5; border-color:transparent; }
.canvas-topbar .audience-controls button:hover { color:var(--green); background:var(--mint); }
.canvas-topbar #audience-filter-status { display:none; }
.canvas-topbar .audience-controls { grid-row:3; }
.canvas-topbar #audience-filter-status[aria-expanded="true"] { max-width:min(900px,100%); }
@media(max-width:720px) {
  .canvas-topbar #comparison-metrics { grid-row:3; }
  .canvas-topbar #audience-filter-status { grid-row:4; }
  .canvas-topbar .audience-controls { grid-row:4; }
}
@media(pointer:coarse), (max-width:510px) {
  .canvas-topbar .objective-chip,
  .canvas-topbar .comparison-metric,
  .canvas-topbar #comparison-metrics .auto-sort-switch,
  .canvas-topbar #business-industry,
  .canvas-topbar .demographic-menu summary,
  .canvas-topbar .audience-controls button,
  .canvas-topbar .demographic-options label { min-height:44px; }
}

.metric-source { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.metric-source:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
#branches .node { position:relative; overflow:visible; }

/* Exit snapshots retain branch-row, but are outside #branches. */
.branch-row .node > .audience-floating { left:calc(100% + 24px); }

/* Shared viewport-level hints stay clear of map transforms and drawer clipping. */
.control-tooltip {
  position: fixed;
  z-index: 10000;
  width: max-content;
  max-width: min(340px, calc(100vw - 16px));
  box-sizing: border-box;
  padding: 8px 11px;
  border: 1px solid #405449;
  border-radius: 8px;
  background: #203b2d;
  color: #fff;
  box-shadow: 0 4px 14px #13251c26;
  font: 500 12px/1.5 system-ui, sans-serif;
  overflow-wrap: anywhere;
}
.control-tooltip[hidden] { display: none; }

/* The bottom hierarchy is the single control for moving Platform. */
#direction-controls { padding:5px 8px;background:#fcfdf9;border-radius:10px;box-shadow:0 3px 12px #173a2818;max-width:calc(100vw - 185px); }
.hierarchy-strip { display:flex;align-items:center;gap:20px;position:relative;min-height:32px; }
.hierarchy-layer,.hierarchy-platform { position:relative;flex:none;white-space:nowrap; }
.hierarchy-layer { color:#617369;font-size:11px;font-weight:600; }
.hierarchy-layer::after,.hierarchy-platform::after { content:'›';position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:#96a99c;font-size:16px;font-weight:400;pointer-events:none; }
.hierarchy-last::after { display:none; }
#direction-controls .hierarchy-platform { min-height:32px;padding:5px 10px;background:#175b45;color:#fff;border:1px solid #114a38;border-radius:6px;font-size:12px;font-weight:750;cursor:grab;touch-action:none;user-select:none;box-shadow:0 2px 4px #173a2820; }
#direction-controls .hierarchy-platform:hover { background:#237557; }
#direction-controls .hierarchy-platform:focus-visible { outline:3px solid #c29b43;outline-offset:3px; }
.hierarchy-dragging .hierarchy-platform { cursor:grabbing!important;outline:2px solid #87b58d;outline-offset:3px; }
#direction-controls [role="status"] { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
@media(max-width:1100px){.canvas-tools #diagram-help{display:none}}
@media(max-width:700px){.canvas-tools{right:10px;flex-wrap:wrap;gap:6px}#direction-controls{max-width:100%;overflow-x:auto}.hierarchy-strip{gap:17px}.hierarchy-layer{font-size:10px}.hierarchy-layer::after,.hierarchy-platform::after{right:-12px}}
/* Layer visibility is independent of platform order and branch selection. */
#direction-controls button.hierarchy-layer { font:inherit;font-size:11px;font-weight:600;padding:6px;border:0;border-radius:5px;background:transparent;color:#38594a;cursor:pointer; }
#direction-controls button.hierarchy-layer[aria-pressed="false"] { color:#758279;text-decoration:line-through;background:#e7ece7; }
#direction-controls .hierarchy-platform { display:flex;align-items:center;padding:0 5px;cursor:default; }
#direction-controls .hierarchy-platform .hierarchy-layer { color:white; }
#direction-controls .hierarchy-platform.layer-hidden { background:#e7ece7;border-color:#a7b5aa;box-shadow:none; }
#direction-controls .hierarchy-platform.layer-hidden .hierarchy-layer { color:#758279; }
#direction-controls .hierarchy-platform .hierarchy-layer::after { display:none; }
#direction-controls .hierarchy-handle { border:0;background:transparent;color:inherit;padding:7px 4px;cursor:grab;touch-action:none; }
#direction-controls .hierarchy-handle:focus-visible,#direction-controls .hierarchy-layer:focus-visible { outline:2px solid #bd9040;outline-offset:2px; }

#business-form select { display:block; width:100%; box-sizing:border-box; padding:9px; border:1px solid #b8d3c4; border-radius:8px; font:inherit; font-size:14px; background:white; color:#18392d; }

.canvas-topbar #business-industry { max-width:min(290px,100%); min-width:0; font-weight:400; }
/* Plan membership is distinct from the currently explored card. */
#diagram .node.in-plan { border-color:#278454; outline:2px solid #278454; outline-offset:0; box-shadow:0 4px 12px #22654420; }
#diagram .node.in-plan:not(.search-match) { background:#eaf6ed; }

.map-plan-control { width:80px; padding:0 8px; border-radius:7px; font-size:11px; font-weight:600; line-height:1.2; white-space:nowrap; }
.map-plan-control[aria-pressed="true"] { background:#d2ebd9; color:#185a36; border-color:#92c5a4; }
.map-plan-control:hover { border-color:#278454; }

#plan-only { flex-shrink:0; min-height:32px; padding:5px 10px; border:1px solid #aac3af; border-radius:8px; background:#edf2eb; color:var(--dark); font-size:11px; font-weight:700; }
#plan-only::before { content:'○'; margin-right:6px; }
#plan-only[aria-checked="true"] { background:var(--dark); color:white; }
#plan-only[aria-checked="true"]::before { content:'✓'; }

/* Hidden ancestry remains readable in both expanded and compact cards. */
.node-hidden-context { margin:0; padding:0 17px 10px; color:#52665b; font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
.node-hidden-context[hidden] { display:none; }
.node-stacked .node-hidden-context { padding-bottom:2px; }

.audience-more-body { position:absolute; z-index:9; top:calc(100% + 5px); right:0; width:min(440px,85vw); padding:12px; display:flex; flex-wrap:wrap; gap:6px; background:var(--surface); border:1px solid #b5c9bb; border-radius:10px; box-shadow:0 6px 18px #173a2826; }
.audience-more:not([open]) > .audience-more-body { display:none; }
.audience-more-body .demographic-options { position:relative; top:auto; left:auto; min-width:0; box-shadow:none; margin-top:5px; max-height:260px; overflow:auto; }
.audience-more-body .demographic-menu[open] { width:100%; }
.audience-filter-help { max-width:280px; margin:5px 8px; font-size:11px; line-height:1.5; color:var(--secondary); }

/* Consistent label gutter keeps wrapped controls aligned with their row. */
.canvas-topbar #objective-chips,
.canvas-topbar #comparison-metrics,
.canvas-topbar .audience-controls { position:relative; padding-left:66px; min-height:24px; }
.toolbar-row-label { position:absolute; left:0; top:3px; width:60px; color:var(--secondary); font-size:11px; line-height:24px; font-weight:600; }
.audience-controls > .toolbar-row-label { top:0; }
@media(pointer:coarse), (max-width:510px) { .toolbar-row-label { top:10px; } .audience-controls > .toolbar-row-label { top:10px; } }

/* Let individual audience chips share the Industry row and its label gutter. */
.canvas-topbar #demographic-chips { display:contents; }
.canvas-topbar #demographic-chips[hidden] { display:none; }
/* Center the hierarchy independently of the surrounding canvas controls. */
.canvas-tools { position:fixed; left:16px; right:16px; bottom:16px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; pointer-events:none; }
.canvas-tools > * { pointer-events:auto; }
.canvas-tools .zoom-controls { grid-column:1; grid-row:1; justify-self:start; }
.canvas-tools #direction-controls { grid-column:2; grid-row:1; justify-self:center; max-width:calc(100vw - 32px); }
.canvas-tools #plan-only { grid-column:3; grid-row:1; justify-self:start; }
.canvas-tools #diagram-help { position:absolute; left:0; bottom:48px; margin:0; }
@media(max-width:800px) {
  .canvas-tools { left:10px; right:10px; bottom:10px; gap:8px; grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr); }
  .canvas-tools .zoom-controls { grid-column:1 / -1; }
  .canvas-tools #direction-controls { grid-column:2; grid-row:2; max-width:calc(100vw - 125px); overflow-x:auto; }
  .canvas-tools #plan-only { grid-column:3; grid-row:2; }
  .canvas-tools #diagram-help { display:none; }
}

/* Canvas controls share a surface and state language; the grip denotes movement. */
.canvas-tools {
  --control-surface:#fcfdf9;
  --control-line:#b9cbbf;
  --control-ink:#294f3e;
  --control-active:#e1eee4;
  --control-muted:#7a877f;
  --control-shadow:0 3px 12px #173a2818;
}
.canvas-tools .zoom-controls,
.canvas-tools #direction-controls,
.canvas-tools #plan-only {
  box-sizing:border-box; min-height:46px; border:1px solid var(--control-line);
  border-radius:10px; background:var(--control-surface); color:var(--control-ink);
  box-shadow:var(--control-shadow); padding:5px; font-size:12px; font-weight:600;
}
.canvas-tools .zoom-controls { align-items:center; }
.canvas-tools .zoom-controls button,
.canvas-tools #direction-controls button {
  min-height:32px; border-radius:6px; font-size:12px; font-weight:600;
  color:var(--control-ink); transition:background-color 140ms ease,color 140ms ease;
}
.canvas-tools .zoom-controls button { min-width:32px; padding:0 9px; }
.canvas-tools #zoom-reset { min-width:56px; font-variant-numeric:tabular-nums; }
.canvas-tools .hierarchy-strip { min-height:32px; gap:16px; }
.canvas-tools .hierarchy-layer::after,.canvas-tools .hierarchy-platform::after { right:-11px; }
.canvas-tools #direction-controls button.hierarchy-layer { padding:6px 9px; }
.canvas-tools #direction-controls button.hierarchy-layer[aria-pressed="true"] { background:var(--control-active); color:var(--control-ink); }
.canvas-tools #direction-controls button.hierarchy-layer[aria-pressed="false"] { background:transparent; color:var(--control-muted); text-decoration:line-through; }
.canvas-tools #direction-controls .hierarchy-platform {
  min-height:32px; padding:0; border:1px solid #7da38c; border-radius:7px;
  background:var(--control-active); color:var(--control-ink); box-shadow:none;
}
.canvas-tools #direction-controls .hierarchy-platform.layer-hidden { background:transparent; border-color:var(--control-line); color:var(--control-muted); }
.canvas-tools #direction-controls .hierarchy-platform .hierarchy-layer { background:transparent; }
.canvas-tools #direction-controls .hierarchy-handle { min-width:24px; padding:0 4px; color:inherit; }
.canvas-tools #plan-only { padding:5px 12px; white-space:nowrap; }
.canvas-tools #plan-only[aria-checked="true"] { background:var(--control-active); color:var(--control-ink); border-color:#7da38c; }
.canvas-tools #plan-only::before { display:inline-block; width:12px; margin-right:6px; }
.canvas-tools button:hover:not(:disabled) { background:#edf4ee; }
.canvas-tools button:focus-visible { outline:2px solid #39785a; outline-offset:2px; }
@media(pointer:coarse) {
  .canvas-tools .zoom-controls,.canvas-tools #direction-controls,.canvas-tools #plan-only { min-height:58px; }
  .canvas-tools .zoom-controls button,.canvas-tools #direction-controls button,.canvas-tools #plan-only { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .canvas-tools button { transition:none; }
}
@media(max-width:800px) {
  .canvas-tools #direction-controls { scrollbar-width:none; }
  .canvas-tools #direction-controls::-webkit-scrollbar { display:none; }
}

/* Metric identity chips are headings, not duplicate selection controls. */
.score-header .metric-header-line { display:flex;align-items:center;gap:5px;flex-wrap:wrap; }
.metric-header-chip { display:inline-block;border-radius:16px;padding:4px 8px;background:var(--metric-color);color:white;font-size:11px;font-weight:500;line-height:16px; }
.metric-header-unit { font-size:10px;font-weight:500; }
.score-header .audience-bar-metric { margin-top:4px; }

/* Snapshot sharing stays separate from map navigation and personal storage. */
.share-controls{margin-left:auto;display:flex;gap:12px;align-items:center}
.share-controls button,.share-dialog button{border:1px solid #cbd3c6;border-radius:8px;background:#fff;color:#24352a;padding:8px 14px;font:inherit;cursor:pointer}
.shared-badge{font-size:12px;color:#50604f}
 .share-controls{position:relative}
.share-dialog{position:absolute;right:0;top:calc(100% + 8px);z-index:1000;box-sizing:border-box;width:250px;max-width:calc(100vw - 32px);padding:8px;border:1px solid #ccd5c8;border-radius:12px;color:#24352a;background:#fbfcf8;box-shadow:0 10px 30px #152a2626;line-height:1.5}
.share-dialog[hidden]{display:none}
.share-dialog>button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:10px 12px}
.share-dialog>button:hover{background:#e9efdf}
.share-dialog>button:focus-visible{outline:2px solid #294e3a;outline-offset:-2px}
.share-include{display:flex;gap:8px;align-items:center;font-size:13px;padding:12px 8px 4px;margin-top:6px;border-top:1px solid #d5ded1}
.share-dialog p{font-size:12px;margin:8px;color:#61705d}
.share-dialog p:empty{display:none}
.share-dialog textarea{box-sizing:border-box;width:100%;font-size:12px;margin-top:6px;border:1px solid #b9c7b5;border-radius:6px;padding:8px}
.share-dialog label[for=share-url]{font-size:12px}
.share-banner{margin:0;padding:6px 20px;background:#e9efdf;color:#40523b;text-align:center;font-size:12px}
.share-banner a{color:inherit;font-weight:600}

.share-dialog{max-height:calc(100dvh - 90px);overflow:auto}
.share-dialog button:disabled{opacity:.6;cursor:wait}
/* Plan typography stays independent of the map, toolbar and knowledge panel. */
.plan-panel {
  --plan-type-heading: 14px;
  --plan-type-body: 12px;
  --plan-type-support: 11px;
}
.plan-panel h2,
.plan-panel .plan-channel > .plan-group-heading > .plan-group-title {
  font-size:var(--plan-type-heading); font-weight:700;
}
.plan-panel .plan-group-title,
.plan-panel .plan-approach-heading,
.plan-panel .node-button,
.plan-panel .plan-item-detail summary {
  font-size:var(--plan-type-body); font-weight:600;
}
.plan-panel .plan-hint,
.plan-panel .plan-empty,
.plan-panel .node-example,
.plan-panel .plan-item-detail p {
  font-size:var(--plan-type-body); line-height:1.5;
}
.plan-panel .node-description { font-weight:400; }
.plan-panel .node-caption { font-size:var(--plan-type-support); font-weight:600; }
.plan-panel .plan-selection-badge,
.plan-panel > .plan-hint:last-child { font-size:var(--plan-type-support); }

/* Use the app's shared surfaces; grouping should not add another card shell. */
.plan-panel { background:var(--paper); }
.plan-panel .plan-heading { margin-bottom:8px; }
.plan-panel .plan-channel { margin-top:18px; }
.plan-panel .plan-group-heading { margin:8px 0; }
.plan-panel .plan-approach-group {
  margin:0; padding:0 0 0 10px; border:0;
  border-radius:0; background:transparent;
}
.plan-panel .plan-approach-group > .plan-group-heading { margin:0 0 8px; }
.plan-panel .plan-group-body { gap:10px; }
.plan-panel .plan-card { box-shadow:none; }
.plan-panel .plan-platform-body { padding:0 10px 10px; }
.plan-panel .plan-snapshot { box-shadow:none; border-radius:8px; }
.plan-panel .node-button { padding-inline:12px; }
.plan-panel .node-example { padding:0 12px 12px; color:var(--secondary); }
.plan-panel .node-description { color:var(--ink); }
.plan-panel .node-caption { color:var(--secondary); letter-spacing:.06em; }
.plan-panel > .plan-hint:last-child { margin-top:14px; }

/* One platform surface; nested activities are sections, not more cards. */
.plan-panel .plan-channel > .plan-group-heading { border:0; padding-bottom:0; margin-bottom:12px; }
.plan-panel .plan-card > .node-heading { align-items:center; gap:8px; padding-right:12px; }
.plan-panel .plan-card > .node-heading .node-button { padding-right:0; }
.plan-panel .plan-card > .node-heading .node-symbol { margin-block:8px; }
.plan-panel .plan-platform-body { padding:0 12px 12px; }
.plan-panel .plan-platform-body > .plan-snapshot {
  margin:0; border:0; border-radius:0; background:transparent; box-shadow:none;
}
.plan-panel .plan-platform-body > .plan-snapshot + .plan-snapshot {
  margin-top:12px; padding-top:8px; border-top:1px solid var(--line);
}
.plan-panel .plan-platform-body > .plan-snapshot > .node-heading { align-items:center; padding-right:0; }
.plan-panel .plan-platform-body > .plan-snapshot .node-button { padding:6px 0; min-height:36px; }
.plan-panel .plan-platform-body > .plan-snapshot .node-example { padding:0; }
.plan-panel .plan-platform-body > .plan-snapshot .node-symbol { margin-block:4px; }
.plan-panel .node-caption { letter-spacing:0; font-weight:400; margin:0 0 4px; }