/* Opt-in detail-page diagram. Shared type, gutter, colour and radius tokens stay intact. */
.interaction-system { --flow-line: #8298a8; --flow-alert: #946448; }
.flow-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-64); align-items: start; }
.flow-intro p { max-width: var(--project-reading-width); margin: 0; font-size: var(--project-type-body); line-height: var(--project-leading-body); }
.flow-module { margin-top: var(--space-48); }
.flow-module__title { display: flex; align-items: baseline; gap: var(--space-16); margin: 0; color: var(--ink); font-size: var(--project-type-module); font-weight: var(--project-weight-heading); line-height: var(--leading-heading); }
.flow-module__title > span:first-child { font-size: var(--project-type-small); color: var(--color-accent); }
.flow-hint { margin: var(--space-16) 0 var(--space-32); color: var(--muted); font-size: var(--project-type-small); }
.flow-modes { display: flex; gap: var(--space-48); flex-wrap: wrap; margin-bottom: var(--space-32); }
.flow-modes p { display: flex; gap: var(--space-16); flex-wrap: wrap; margin: 0; font-size: var(--project-type-small); }
.flow-modes strong { color: var(--ink); font-weight: 500; letter-spacing: .02em; }
.flow-distinction { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); padding-block: var(--space-24); border-block: var(--border-subtle); }
.flow-distinction h4 { margin: 0 0 var(--space-8); font-size: var(--project-type-module); font-weight: var(--project-weight-heading); line-height: var(--leading-heading); color: var(--ink); }
.flow-distinction p { margin: 0; font-size: var(--project-type-small); color: var(--muted); }
.interaction-flow { position: relative; margin-top: var(--space-32); }
.flow-canvas { display: grid; grid-template-columns: 104px minmax(0, 1fr); padding-top: 72px; }
.flow-lanes { position: relative; border-right: var(--border-subtle); }
.flow-lane { position: absolute; left: 0; right: var(--space-16); display: grid; gap: var(--space-8); font-size: var(--project-type-small); color: var(--ink); line-height: 1.5; }
.flow-lane--user { top: 24px; }
.flow-lane--hardware { top: 200px; }
.flow-lane--software { top: 520px; }
.flow-lane__english { color: var(--muted); font-size: var(--project-type-micro); line-height: 1.45; }
html[lang="en"] .flow-lane__english { display: none; }
.flow-plot { position: relative; height: 936px; min-width: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgb(69 85 102 / .055) calc(25% - 1px), rgb(69 85 102 / .055) 25%); }
.flow-plot::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 183px, var(--line) 183px 184px, rgb(241 244 246 / .32) 184px 503px, var(--line) 503px 504px, transparent 504px); border-block: var(--border-subtle); }
.flow-stage, .flow-branch { display: contents; }
.flow-stage__title { position: absolute; top: -66px; left: calc(var(--phase) * 25% + 18px); width: calc(25% - 36px); margin: 0; display: grid; gap: var(--space-8); color: var(--ink); font-size: var(--project-type-small); font-weight: 500; line-height: 1.5; }
.flow-stage__title > span:first-child { font-size: var(--project-type-micro); font-weight: 400; letter-spacing: .08em; color: var(--muted); }
.flow-node { position: absolute; z-index: 2; top: var(--node-y); left: calc(var(--phase) * 25% + 18px); width: calc(25% - 36px); min-height: 56px; display: grid; align-content: center; gap: 4px; margin: 0; padding: 12px 12px 12px 28px; text-align: left; border: var(--border-width) solid rgb(69 85 102 / .13); border-radius: var(--radius-md); background: var(--color-surface); color: var(--ink); line-height: 1.4; transition: opacity var(--duration-feedback) var(--ease-feedback), background var(--duration-feedback) var(--ease-feedback), border-color var(--duration-feedback) var(--ease-feedback), box-shadow var(--duration-feedback) var(--ease-feedback), transform .55s var(--ease-feedback); }
.flow-node::before { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--flow-line); left: 12px; top: 25px; }
.flow-node__title { font-size: var(--project-type-control); font-weight: var(--weight-regular); }
.flow-node__hint { color: var(--muted); font-size: var(--project-type-micro); line-height: 1.45; }
.flow-node__lane { display: none; }
.flow-node[data-flow-kind="gate"] { border-color: rgb(50 107 154 / .3); }
.flow-node[data-flow-kind="gate"]::before { border-radius: 1px; transform: rotate(45deg); background: var(--color-accent); }
.flow-node[data-flow-kind="exception"] { border-color: rgb(148 100 72 / .25); }
.flow-node[data-flow-kind="exception"]::before { background: var(--flow-alert); }
.flow-node[data-flow-kind="exception"] .flow-node__hint { color: var(--flow-alert); }
.flow-node:hover, .flow-node[data-related] { border-color: rgb(50 107 154 / .45); background: #f5f8fa; }
.flow-node[aria-expanded="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgb(50 107 154 / .13); background: #f5f8fa; }
.interaction-flow[data-flow-highlight] .flow-node[data-flow-seen]:not([data-related]) { opacity: .38; }
.flow-branch__title { display: none; }
.flow-edges { position: absolute; z-index: 1; width: 100%; height: 100%; inset: 0; overflow: visible; pointer-events: none; }
.flow-edge { opacity: .68; transition: opacity var(--duration-feedback) var(--ease-feedback); }
.flow-edge-line { stroke: var(--flow-line); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--duration-feedback) var(--ease-feedback), stroke-width var(--duration-feedback) var(--ease-feedback); }
.flow-edge--exception .flow-edge-line { stroke: var(--flow-alert); stroke-dasharray: 4 5; }
.flow-arrow { fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.flow-arrow--normal { stroke: var(--flow-line); }
.flow-arrow--exception { stroke: var(--flow-alert); }
.interaction-flow[data-flow-highlight] .flow-edge:not([data-related]) { opacity: .13; }
.flow-edge[data-related] { opacity: 1; }
.flow-edge[data-related] .flow-edge-line { stroke: var(--color-accent); stroke-width: 1.8; }
.flow-edge--exception[data-related] .flow-edge-line { stroke: var(--flow-alert); }
.flow-edge-mask { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease-feedback) 80ms; }
.interaction-flow[data-flow-animated] .flow-node:not([data-flow-seen]) { opacity: 0; transform: translateY(12px); }
.interaction-flow[data-flow-animated] .flow-node[data-flow-seen] { transition-delay: var(--enter-delay, 0ms), 0ms, 0ms, 0ms, var(--enter-delay, 0ms); }
.interaction-flow[data-flow-animated] .flow-edge:not([data-drawn]) .flow-edge-mask { stroke-dashoffset: 1; }
.flow-detail { position: absolute; z-index: 10; width: min(330px, calc(100% - 16px)); padding: var(--space-24); border: var(--border-subtle); border-radius: var(--radius-md); background: #f5f8fa; box-shadow: var(--shadow-card); }
.flow-detail[hidden] { display: none; }
.flow-detail__lane { margin: 0 28px var(--space-12) 0; color: var(--muted); font-size: var(--project-type-micro); line-height: 1.5; }
.flow-detail h4 { margin: 0 20px var(--space-12) 0; color: var(--ink); font-size: var(--project-type-module); font-weight: var(--project-weight-heading); line-height: var(--leading-heading); }
.flow-detail > p:not(.flow-detail__lane) { margin: var(--space-8) 0 var(--space-16); font-size: var(--project-type-small); line-height: 1.7; }
.flow-detail > p:last-child { margin-bottom: 0; }
.flow-detail__label { color: var(--muted); font-size: var(--project-type-micro); }
.flow-detail__close { position: absolute; right: 4px; top: 4px; width: var(--control-size); height: var(--control-size); padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 24px; font-weight: 300; }
.flow-legend { display: flex; flex-wrap: wrap; gap: var(--space-24); padding-top: var(--space-24); margin-top: var(--space-24); border-top: var(--border-subtle); }
.flow-legend span { display: inline-flex; align-items: center; gap: var(--space-12); color: var(--muted); font-size: var(--project-type-small); }
.flow-legend > span::before { content: ''; width: 28px; border-top: 1px solid var(--flow-line); }
.flow-legend > span:last-child::before { border-top: 1px dashed var(--flow-alert); }
.flow-concept-note { max-width: 88ch; margin: var(--space-16) 0 0; color: var(--muted); font-size: var(--project-type-small); line-height: var(--leading-small); }
@media (max-width: 1000px) {
  .flow-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .flow-distinction { gap: var(--space-24); }
  .flow-canvas { display: block; padding: 0; }
  .flow-lanes { display: none; }
  .flow-plot { height: auto; background: none; }
  .flow-plot::before { display: none; }
  .flow-stage { display: block; padding-top: var(--space-32); }
  .flow-stage:first-of-type { padding-top: 0; }
  .flow-stage__title { position: static; width: auto; margin: 0 0 var(--space-24) 24px; display: flex; align-items: baseline; gap: var(--space-12); font-size: var(--project-type-module); }
  .flow-node { position: relative; top: auto; left: auto; display: grid; width: calc(100% - 24px); min-height: 72px; margin: var(--space-16) 0 0 24px; padding: var(--space-16) var(--space-16) var(--space-16) 32px; }
  .flow-node::before { left: 16px; top: 24px; }
  .flow-node__title { font-size: var(--project-type-body); }
  .flow-node__lane { display: block; font-size: var(--project-type-micro); line-height: 1.4; color: var(--muted); }
  .flow-node__hint { font-size: var(--project-type-micro); }
  .flow-branch { display: block; margin: var(--space-24) 0 0 16px; padding-block: var(--space-12) var(--space-16); border-left: 1px dashed rgb(148 100 72 / .35); }
  .flow-branch__title { display: block; margin: 0 0 var(--space-16) 24px; color: var(--flow-alert); font-size: var(--project-type-small); }
  .flow-detail { position: static; width: calc(100% - 24px); margin: var(--space-16) 0 0 24px; box-shadow: none; padding: var(--space-24); }
  .flow-node[aria-expanded="true"] { margin-bottom: var(--space-16); }
  .flow-node:focus-visible { outline-offset: 3px; }
}
@media (max-width: 600px) {
  .flow-distinction { grid-template-columns: minmax(0, 1fr); }
  .flow-modes { gap: var(--space-16); }
  .flow-modes p { gap: var(--space-12); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-node, .flow-edge, .flow-edge-line, .flow-edge-mask { transition: none; }
  .interaction-flow .flow-node { transform: none; }
}