/* Shared styling for the consulting flow diagrams (static SVG from scripts/consulting/render.js),
   the mini-project chips above them, the explanation drawer below them and the explainer content.
   Loaded by the home page (panel) and by /consulting/. Interactivity: consulting.js */

/* ---------- the diagram ---------- */
.mmd {
  --w: 900px;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--ink-2);
  padding: 10px 12px 14px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.mmd svg {
  display: block;
  height: auto;
  width: 100%;
  min-width: calc(var(--w) * 0.72);
  max-width: calc(var(--w) * 1.12);
  margin: 0 auto;
  font-family: var(--font-body);
  overflow: visible;
}
.mmd .mm-nodeLabel, .mmd .mm-edgeLabel { color: var(--text); font-size: 13px; line-height: 1.5; }
.mmd .mm-nodeLabel p, .mmd .mm-edgeLabel p { margin: 0; }
.mmd .mm-node rect.mm-label-container, .mmd .mm-node polygon, .mmd .mm-node path {
  fill: #161B2B;
  stroke: rgba(148, 163, 200, 0.42);
  stroke-width: 1.2;
}
.mmd .mm-node path { fill: #11151F; }
/* hexagons: System One typed decisions */
.mmd .mm-node.sys1 polygon { fill: rgba(111, 211, 230, 0.1); stroke: var(--k-fast); stroke-width: 1.5; }
.mmd .mm-node.sys1 .mm-nodeLabel { color: var(--k-fast); }
/* dashed amber boxes: reasoning LLM steps */
.mmd .mm-node.llm rect { fill: rgba(242, 185, 99, 0.09); stroke: var(--skill); stroke-width: 1.6; stroke-dasharray: 7 4; }
.mmd .mm-node.llm .mm-nodeLabel { color: var(--skill); }
.mmd .mm-edgePaths path { fill: none; stroke: rgba(154, 163, 184, 0.72); stroke-width: 1.3; }
.mmd .mm-arrowMarkerPath { fill: rgba(154, 163, 184, 0.9); stroke: none; }
.mmd .elbg { fill: var(--ink-2); }
.mmd .eltext { fill: var(--muted); }
.mmd .mm-cluster rect { fill: rgba(143, 160, 255, 0.035); stroke: rgba(148, 163, 200, 0.3); stroke-dasharray: 2 4; rx: 8; }
.mmd .mm-cluster-label .mm-nodeLabel { color: var(--dim); font-weight: 500; font-size: 12.5px; }
/* shaded blocks = one mini-project each; focusable, select to read the explanation */
.mmd .rg { cursor: pointer; outline: none; transition: opacity 0.25s; }
.mmd .rg-box { fill: hsl(var(--h) 70% 70% / 0.06); stroke: hsl(var(--h) 70% 72% / 0.5); stroke-dasharray: 5 4; stroke-width: 1.2; transition: fill 0.2s, stroke 0.2s; }
.mmd .rg.is-top .rg-box { stroke-width: 1.8; stroke-opacity: 0.9; }
.mmd .rg-tagbg { fill: hsl(var(--h) 38% 20%); stroke: hsl(var(--h) 70% 72% / 0.55); stroke-width: 1; }
.mmd .rg-tag text { fill: hsl(var(--h) 85% 84%); }
.mmd .rg-tag-more { opacity: 0.75; }
.mmd .rg:hover .rg-box, .mmd .rg:focus-visible .rg-box, .mmd .rg[aria-expanded="true"] .rg-box { fill: hsl(var(--h) 70% 70% / 0.14); stroke: hsl(var(--h) 80% 78% / 0.95); stroke-dasharray: none; }
.mmd .rg:focus-visible .rg-tagbg, .mmd .rg[aria-expanded="true"] .rg-tagbg { stroke: hsl(var(--h) 85% 84%); stroke-width: 1.6; fill: hsl(var(--h) 50% 32%); }
.mmd .rg:focus-visible .rg-tag-more, .mmd .rg[aria-expanded="true"] .rg-tag-more, .mmd .rg:hover .rg-tag-more { opacity: 1; }
/* one mini-project selected: the others fade back */
.mmd.has-sel .rg:not([aria-expanded="true"]) { opacity: 0.22; }
.mmd.has-sel .rg:not([aria-expanded="true"]):hover, .mmd.has-sel .rg:not([aria-expanded="true"]):focus-visible { opacity: 0.7; }
.mmd .rgs[data-set] { display: none; }
.mmd[data-set="blocks"] .rgs[data-set="blocks"], .mmd[data-set="flows"] .rgs[data-set="flows"] { display: initial; }
.mmd.no-rg .rgs { display: none !important; }
/* explainable nodes: the [?] steps */
.mmd .mm-node[role="button"] { cursor: pointer; outline: none; }
.mmd .mm-node[role="button"]:hover polygon, .mmd .mm-node[role="button"]:hover rect { filter: brightness(1.35); }
.mmd .mm-node[role="button"]:focus-visible polygon, .mmd .mm-node[role="button"]:focus-visible rect,
.mmd .mm-node.is-active polygon, .mmd .mm-node.is-active rect { stroke: var(--text); stroke-width: 2.4; stroke-dasharray: none; }

/* ---------- mini-project chips (above the diagram, one selected at a time) ---------- */
.blocks-ey { margin-top: 14px; }
.blocks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.blockchip { font-family: var(--font-body); font-size: 13px; color: hsl(var(--h) 85% 86%); background: hsl(var(--h) 55% 55% / 0.1); border: 1px solid hsl(var(--h) 70% 72% / 0.45); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: background 0.2s, border-color 0.2s, opacity 0.2s; text-align: left; scroll-margin-top: 120px; }
.blockchip:hover { background: hsl(var(--h) 60% 55% / 0.24); border-color: hsl(var(--h) 80% 78%); }
.blockchip[aria-pressed="true"] { background: hsl(var(--h) 60% 55% / 0.34); border-color: hsl(var(--h) 85% 84%); box-shadow: 0 0 0 1px hsl(var(--h) 85% 84% / 0.5); color: #fff; }
.blocks.has-sel .blockchip[aria-pressed="false"] { opacity: 0.55; }
.blocks.has-sel .blockchip[aria-pressed="false"]:hover, .blocks.has-sel .blockchip[aria-pressed="false"]:focus-visible { opacity: 1; }
.blockchip .chip-kind { font-family: var(--font-mono); font-size: 10.5px; color: var(--dim); margin-left: 4px; }
.blockchip[aria-pressed="true"] .chip-kind { color: rgba(255, 255, 255, 0.7); }
.blockchip .chip-n { font-family: var(--font-mono); font-size: 10.5px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.blockchip .star { color: var(--skill); }

/* ---------- diagram controls + legend ---------- */
.dctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; font-size: 12.5px; color: var(--muted); }
.dchk { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.dchk input { accent-color: var(--project); width: 14px; height: 14px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg-btn { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); background: transparent; border: 0; padding: 6px 12px; cursor: pointer; }
.seg-btn[aria-pressed="true"] { background: var(--project-soft); color: var(--text); }
.dleg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--dim); }
.dleg > span::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -2px; border-radius: 2px; border: 1.5px solid var(--line); background: #161B2B; }
.dleg .lg-hex::before { border-color: var(--k-fast); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: rgba(111, 211, 230, 0.25); }
.dleg .lg-llm::before { border-color: var(--skill); border-style: dashed; background: rgba(242, 185, 99, 0.12); }
.dleg .lg-blk::before { border-color: hsl(232 70% 72% / 0.7); border-style: dashed; background: hsl(232 70% 70% / 0.12); }

/* ---------- explanation drawer under a diagram ---------- */
.xdrawer { border: 1px solid var(--line); border-radius: 6px; background: var(--ink-2); margin-top: 10px; outline: none; }
.xdrawer-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--line-soft); }
.xdrawer-title { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); flex: 1; }
.xd-detail, .xd-close { font-family: var(--font-mono); font-size: 12px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 3px; padding: 4px 10px; cursor: pointer; }
.xd-detail[aria-pressed="true"] { color: var(--ink); background: var(--project); border-color: var(--project); }
.xd-close { font-size: 18px; line-height: 1; padding: 2px 9px; }
.xd-close:hover, .xd-detail:hover { color: var(--text); }
.xdrawer-body { padding: 16px 18px 18px; }
.xdrawer-hint { font-size: 14px; color: var(--muted); text-wrap: pretty; max-width: 80ch; }
/* a mini-project */
.rgx { border-left: 3px solid hsl(var(--h) 70% 72%); padding-left: 16px; }
.rgx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.rgx-head b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); }
.rgx-flow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--h) 85% 84%); }
.rgx-p { font-size: 14px; color: var(--muted); margin-bottom: 12px; text-wrap: pretty; max-width: 80ch; }
.rgx-p small, .stx-step small, .stx-schema small { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.rgx-cases { list-style: none; display: grid; gap: 7px; }
.rgx-cases li { font-size: 13.5px; color: var(--muted); padding-left: 12px; position: relative; text-wrap: pretty; }
.rgx-cases li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 4px; height: 4px; border-radius: 50%; background: hsl(var(--h) 70% 72%); }
.rgx-cases b { color: var(--text); font-weight: 500; }
.rgx-inline { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ucmeta { font-family: var(--font-mono); font-size: 11px; color: var(--dim); margin-left: 6px; white-space: nowrap; }
.ucmeta .stars { color: var(--k-fast); }
/* a step ([?] node) */
.stx-kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--skill); margin-bottom: 6px; }
.stx-cls .stx-kind { color: var(--k-fast); }
.stx h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.stx-cases { font-size: 12.5px; color: var(--dim); margin-bottom: 14px; }
.stx-simple { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: stretch; }
.stx-simple > * { min-width: 0; }
.stx-step { border: 1px solid var(--line-soft); border-radius: 4px; padding: 10px 12px; background: var(--surface); font-size: 13.5px; color: var(--muted); }
.stx-step p { text-wrap: pretty; }
.stx-mid { border-color: rgba(242, 185, 99, 0.45); color: var(--text); }
.stx-cls .stx-mid { border-color: rgba(111, 211, 230, 0.55); }
.stx-arrow { align-self: center; color: var(--dim); font-size: 12px; transform: rotate(-90deg); }
.stx-schema { margin-top: 12px; }
.schema { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--muted); background: var(--ink); border: 1px solid var(--line-soft); border-radius: 3px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; }
.stx-detail { margin-top: 14px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 13.5px; }
.stx-detail dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); padding-top: 2px; }
.stx-detail dd { color: var(--muted); text-wrap: pretty; min-width: 0; }
/* kind tags */
.ktag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); vertical-align: middle; margin-left: 6px; white-space: nowrap; }
.ktag.kq { color: var(--live); border-color: rgba(110, 231, 160, 0.4); }
.ktag.km { color: var(--skill); border-color: rgba(242, 185, 99, 0.4); }
.ktag.kv { color: var(--project); border-color: rgba(143, 160, 255, 0.45); }
.ktag.kc { color: var(--k-fast); border-color: rgba(111, 211, 230, 0.4); }
.ktag.klive { color: var(--live); border-color: rgba(110, 231, 160, 0.4); }
.ktag.knoai { color: var(--dim); }
/* cross-links between use cases and their blocks */
.xl { color: var(--project); text-decoration: none; border-bottom: 1px dotted rgba(143, 160, 255, 0.5); }
.xl:hover { border-bottom-style: solid; color: #A7B4FF; }
.xl-blk::before { content: "↳ "; color: var(--dim); }

@media (max-width: 640px) {
  .stx-simple { grid-template-columns: 1fr; }
  .stx-arrow { transform: none; justify-self: center; }
  .stx-detail { grid-template-columns: 1fr; gap: 2px 0; }
  .stx-detail dd { margin-bottom: 8px; }
  .xdrawer-body { padding: 14px; }
  .dleg { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .mmd *, .blockchip { transition: none !important; } }