/* The interactive guild graph. Scoped to .graph-app and .guild-status so it
   can sit inside the site chrome without restyling it. Tokens come from
   house.py (TOKENS_CSS); nothing here restates a colour value. Type steps are
   the house major third (11 14 17 21 27 px), spacing is Fibonacci. */

.guild-status { margin: 34px 0 21px; padding: 21px; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--teal); }
.guild-status.none { border-left-color: var(--deep-mauve); }
.guild-status h2 { font-size: 27px; margin: 0 0 8px; }
.guild-status p { margin: 0 0 8px; max-width: 68ch; }
.guild-status ul { margin: 8px 0 13px; padding-left: 21px; }
.guild-status li { margin: 5px 0; }
.guild-status .where { font: 14px var(--font-ui); color: var(--muted); }
.guild-status .hint { font: 14px/1.6 var(--font-ui); color: var(--muted); margin: 0; }

.author-banner { background: var(--deep-mauve); color: #fff; padding: 13px 21px;
  font: 600 14px/1.5 var(--font-ui); }

.graph-app { font: 14px/1.55 var(--font-ui); color: var(--ink); }
.graph-app h2 { font: 600 11px var(--font-ui); text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted); margin: 21px 0 8px; }
.graph-app h2:first-child { margin-top: 0; }

.graph-dials { display: flex; flex-wrap: wrap; gap: 13px 34px; align-items: center;
  padding: 13px 0; border-top: 1px solid var(--rule); }
.dial { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dial label { font: 600 11px var(--font-ui); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); }
.dial output { font: 700 14px var(--font-mono); min-width: 89px; }
.graph-app input[type=range] { width: 144px; accent-color: var(--blue); }
.stats { display: flex; flex-wrap: wrap; gap: 8px 21px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.stats b { display: block; font-size: 17px; font-weight: 700; }
.stats span { color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.07em; }

.graph-figure { margin: 0; }
.controls { display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  padding: 8px 0; }
.graph-app button, .graph-app select { font: 500 14px var(--font-ui); padding: 5px 13px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); cursor: pointer; min-height: 34px; }
.graph-app button:hover, .graph-app select:hover { border-color: var(--blue); }
.graph-app button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue);
  color: #fff; }
.graph-app button.build[aria-pressed="true"] { background: var(--deep-teal);
  border-color: var(--deep-teal); }

/* No text selection anywhere in the stage: a drag to orbit must never highlight
   the plant names or axis labels, on mouse or touch. */
#stage { position: relative; overflow: hidden; height: min(68vh, 610px); min-height: 360px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 42% 36%, var(--card) 0%, var(--ground) 78%); }
#svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
#svg.dragging { cursor: grabbing; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 21px; padding: 13px 0 0;
  font: 14px var(--font-ui); }
.legend i { display: inline-block; width: 13px; height: 13px; border-radius: 3px;
  margin-right: 8px; vertical-align: -2px; }
.legend .hint { flex-basis: 100%; }

.graph-split { display: grid; gap: 21px 34px; margin-top: 34px;
  grid-template-columns: minmax(0, var(--major)) minmax(0, var(--minor)); }
.graph-minor { border-left: 2px solid var(--rule); padding-left: 13px; align-self: start; }
.graph-minor p { margin: 0 0 8px; }
@media (max-width: 760px) {
  .graph-split { grid-template-columns: minmax(0, 1fr); }
  .graph-minor { border-left: 0; border-top: 2px solid var(--rule); padding: 13px 0 0; }
  #stage { height: 62vh; }
}

.funnel div { padding: 8px 0 8px 13px; border-left: 2px solid var(--line); }
.funnel div:first-child { border-left-color: var(--deep-mauve); }
.funnel div:last-child { border-left-color: var(--teal); }
.funnel b { font: 700 14px var(--font-mono); margin-right: 5px; }
.funnel em, .verdict span, .guild em { font-style: normal; }
.funnel em { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }

.verdicts { display: flex; flex-direction: column; gap: 8px; }
.verdict { border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px;
  cursor: pointer; background: var(--card); text-align: left; width: 100%; color: var(--ink); }
.verdict:hover { border-color: var(--blue); }
.verdict b { display: block; font: 600 17px var(--font-display); margin-bottom: 3px; }
.verdict span { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.pass span { color: var(--deep-teal); }
.fail span { color: var(--deep-mauve); }

/* The list scrolls inside its own box: forty guilds would otherwise push the
   explanation that follows the graph several screens down the page. */
#guilds { max-height: 440px; overflow-y: auto; padding-right: 5px; }
.guild { padding: 8px 13px; border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: 5px; cursor: pointer; background: var(--card); }
.guild:hover { border-color: var(--blue); }
.guild.on { border-color: var(--blue); background: var(--blue-l); }
.guild.trial { border-left: 3px solid var(--teal); }
.guild.miss { border-left: 3px solid var(--deep-mauve); }
.guild em { display: block; color: var(--muted); font: 11px var(--font-mono); margin-top: 3px; }
.pin { display: inline-block; background: var(--deep-teal); color: #fff; font: 11px var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em; padding: 0 5px; border-radius: 999px;
  margin-right: 5px; }
.pin.front { background: var(--line); color: var(--ink); }

.card { border: 1px solid var(--line); border-radius: 8px; padding: 13px; background: var(--card); }
.card h3 { margin: 0; font-size: 21px; }
.card .sci { font: italic 14px var(--font-body); color: var(--muted); margin-bottom: 8px; }
.kv { display: grid; grid-template-columns: 89px 1fr; gap: 3px 13px; margin: 0;
  font: 11px/1.6 var(--font-mono); font-variant-numeric: tabular-nums; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.note { padding: 8px 13px; border-radius: 8px; margin-top: 13px; }
.note.bad { background: var(--card); color: var(--deep-mauve); border: 1px solid var(--mauve); }
.note.good { background: var(--card); color: var(--deep-teal); border: 1px solid var(--teal); }
.note a { color: inherit; }
.reason { font: 11px/1.6 var(--font-mono); color: var(--muted); padding: 5px 0;
  border-bottom: 1px dotted var(--line); }
.reason b { color: var(--deep-mauve); font-weight: 400; }
.hint { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.graph-app button.chip { background: var(--deep-teal); color: #fff; border: 0;
  padding: 3px 13px; font-size: 14px; min-height: 0; }
.chip::after { content: " x"; opacity: 0.8; }
.need { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.need span { font: 11px var(--font-mono); padding: 0 8px; border-radius: 999px;
  background: var(--line); color: var(--ink); }
.need span.met { background: var(--teal-l); color: var(--ink); }
.cand { padding: 5px 8px; border-radius: 8px; margin-bottom: 5px; cursor: pointer;
  border: 1px solid transparent; }
.cand:hover { border-color: var(--blue); }
.cand.viable, .cand.completes { background: var(--card); color: var(--deep-teal); }
.cand.completes { border-color: var(--teal); font-weight: 600; }
.cand.partial { background: var(--card); color: var(--deep-mauve); }
.cand em { display: block; font: 11px var(--font-mono); margin-top: 3px; }

.node text { pointer-events: none; font: 500 11px var(--font-ui); fill: var(--ink); }
.node circle { cursor: pointer; stroke: var(--card); stroke-width: 1.5; stroke-dasharray: 2 2; }
.node circle.grounded { stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: none; }
.node circle.noroot { fill: var(--muted); }
.node circle.ring { fill: none; stroke: var(--mauve); stroke-width: 1.8;
  stroke-dasharray: none; pointer-events: none; }
.node circle.pickring { fill: none; stroke: var(--teal); stroke-width: 3;
  stroke-dasharray: none; pointer-events: none; }
.node rect.matrix { fill: none; stroke: var(--muted); stroke-width: 1.2;
  stroke-dasharray: 4 3; pointer-events: none; }
text.cluster { font: 700 11px var(--font-mono); fill: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase; }
text.axis { font: 600 11px var(--font-mono); fill: var(--muted);
  letter-spacing: 0.08em; text-transform: uppercase; }
line.ok { stroke: var(--blue-l); stroke-width: 1; opacity: 0.9; }
line.ok.hi { stroke: var(--teal); stroke-width: 2; opacity: 0.9; }
line.cut { stroke: var(--deep-mauve); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.6; }
line.member { stroke: var(--teal); stroke-width: 2.6; opacity: 0.95; }
line.viable { stroke: var(--teal); stroke-width: 1.6; stroke-dasharray: 1 4;
  stroke-linecap: round; opacity: 0.85; }
line.partial { stroke: var(--deep-mauve); stroke-width: 1.4; stroke-dasharray: 7 4; opacity: 0.8; }
line.grid { stroke: var(--rule); stroke-width: 0.8; opacity: 0.85; }
line.horizon { stroke: var(--rule); stroke-width: 1.1; opacity: 1; }
line.axisline { stroke: var(--muted); stroke-width: 1.5; opacity: 0.9; }
line.axistick { stroke: var(--muted); stroke-width: 1.2; opacity: 0.9; }
text.axis, text.axisband { pointer-events: none; -webkit-user-select: none; user-select: none; }
text.axisband { font: 600 11px var(--font-mono); fill: var(--deep-blue);
  letter-spacing: 0.08em; text-transform: uppercase; }
line.stem { stroke: var(--muted); stroke-width: 1; opacity: 0.4; stroke-dasharray: 2 3; }
circle.roottip { pointer-events: none; }