/* v9: restored interactive scenario graph + interface difficulty. */
.scenario-card { max-width: 1080px; }
.graph-disclosure { margin-top: 8px; }
.graph-disclosure > summary { width: fit-content; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--accent); background: var(--surface); font-weight: 600; cursor: pointer; }
.graph-disclosure > summary:hover, .graph-disclosure > summary:focus-visible { border-color: var(--accent); }
.graph-disclosure .graph-preview { margin-top: 14px; }
.graph-preview { overflow: hidden; background: linear-gradient(180deg,#fff,#fbfdfb); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.graph-preview__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border); }
.graph-preview__head h2 { margin: 2px 0 0; font-size: 20px; }
.graph-preview__head > p { max-width: 470px; margin: 0; color: var(--text-muted); font-size: 12.5px; }
.graph-preview__eyebrow, .graph-detail__eyebrow { margin: 0; color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.graph-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 12px 14px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: #F8FBF9; color: var(--text-muted); font-size: 11px; }
.graph-toolbar > div { display: flex; align-items: center; gap: 7px; }
.graph-tool { display: grid; place-items: center; height: 36px; min-width: 36px; padding: 0 9px; border: 1px solid #CCDCD4; border-radius: 7px; background: #fff; color: var(--accent); font-size: 17px; font-weight: 700; }
.graph-tool:hover { background: var(--mint); }
.graph-tool--wide { font-size: 11px; }
#graph-zoom-label { width: 44px; text-align: center; color: var(--text); font-size: 11px; font-weight: 700; }
.graph-shell { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 12px; height: 72vh; min-height: 680px; padding: 0 14px; }
.graph-viewport { position: relative; min-width: 0; overflow: hidden; border: 1px solid #CFDDD6; border-radius: 12px; background: radial-gradient(circle at 50% 12%,rgba(211,238,224,.5),transparent 34%),linear-gradient(rgba(35,107,86,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(35,107,86,.035) 1px,transparent 1px),#F8FBF9; background-size: auto,30px 30px,30px 30px; cursor: grab; transition: box-shadow var(--dur-3); }
.graph-viewport.is-dragging { cursor: grabbing; }
.graph-viewport.is-flashing { box-shadow: inset 0 0 0 3px rgba(35,107,86,.2); }
.interactive-graph { position: absolute; inset: 0; width: 100%; height: 100%; }
#scenario-graph-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; }
.graph-edge { fill: none; stroke: #8EA99E; stroke-width: 2; opacity: .36; transition: opacity var(--dur-3),stroke var(--dur-3),stroke-width var(--dur-3); vector-effect: non-scaling-stroke; }
.graph-edge--back { stroke-dasharray: 6 5; opacity: .28; }
.graph-edge.is-muted { opacity: .055; }
.graph-edge.is-selected { opacity: 1; stroke: #176C52; stroke-width: 4; }
#graph-arrow path { fill: #8BA59A; }
.graph-node { cursor: pointer; outline: none; filter: drop-shadow(0 7px 10px rgba(24,55,43,.1)); transition: filter var(--dur-3); }
.graph-node > rect { fill: #fff; stroke: #D6E2DC; stroke-width: 2; transition: stroke var(--dur-3),stroke-width var(--dur-3),fill var(--dur-3); }
.graph-node--start > rect { fill: #EAF6F0; stroke: #6BAD91; }
.graph-node--success > rect { fill: #E8F7EE; stroke: #55A578; }
.graph-node--failure > rect { fill: #FFF0ED; stroke: #D28779; }
.graph-node:hover, .graph-node:focus, .graph-node.is-selected { filter: drop-shadow(0 14px 16px rgba(24,55,43,.2)); }
.graph-node:hover > rect, .graph-node:focus > rect, .graph-node.is-selected > rect { stroke: #176C52; stroke-width: 4; }
.graph-node__kind { fill: #6D8078; font: 700 10px var(--font); letter-spacing: 1.2px; }
.graph-node__title { fill: #17201D; font: 600 14px var(--font); }
.graph-inspector { position: absolute; z-index: 12; top: 14px; width: 320px; max-height: calc(100% - 28px); overflow: auto; padding: 17px; background: rgba(255,255,255,.97); border: 1px solid #CFDED6; border-radius: 14px; box-shadow: 0 20px 55px rgba(19,50,39,.18); backdrop-filter: blur(7px); transition: left var(--dur-3),right var(--dur-3); }
.graph-inspector--right { right: 14px; left: auto; }
.graph-inspector--left { left: 14px; right: auto; }
#graph-node-details h3 { margin: 5px 0 8px; font-size: 18px; }
#graph-node-details > p:not(.graph-detail__eyebrow):not(.inspector-caption) { margin: 0; color: #52635C; font-size: 12.5px; line-height: 1.5; }
.inspector-caption { margin: 15px 0 7px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.graph-node-result { margin-top: 13px; padding: 9px; border-radius: 8px; background: #F1F7F4; color: var(--accent-strong); font-size: 11.5px; }
.graph-transition-list { display: grid; gap: 7px; }
.graph-transition-list article { padding: 9px 10px; border: 1px solid #DCE6E1; border-radius: 9px; background: #F8FBF9; }
.graph-transition-list p { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.graph-transition-list span { display: block; color: var(--accent); font-size: 10.5px; }
.graph-outline { min-width: 0; overflow: auto; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.graph-outline > p { margin-bottom: 9px; }
.outline-item { display: grid; grid-template-columns: 25px 1fr; gap: 8px; align-items: center; width: 100%; padding: 8px 6px; border-top: 1px solid #EDF1EF; text-align: left; }
.outline-item:first-of-type { border-top: 0; }
.outline-item b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #E3EFE9; color: var(--accent); font-size: 10px; }
.outline-item span { font-size: 10.5px; line-height: 1.25; }
.outline-item:hover, .outline-item.is-selected { background: #EFF7F3; border-radius: 7px; }
.outline-item--success b { background: #D8EFDF; }
.outline-item--failure b { background: #F6DDD7; color: #A64339; }
.graph-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; padding: 10px 20px 14px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 11px; }
.graph-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; border: 1px solid var(--border); background: #fff; }
.legend-dot--start { background: #EAF6F0; border-color: #6BAD91; }
.legend-dot--phase { background: #fff; border-color: #A8BBB1; }
.legend-dot--success { background: #E8F7EE; border-color: #55A578; }
.legend-dot--failure { background: #FFF0ED; border-color: #D28779; }
.legend-line { width: 18px; border-top: 2px dashed #8EA99E; }
.setup__difficulty { display: grid; gap: 10px; }
.setup__difficulty .setup__label { width: auto; }
.difficulty-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.difficulty-card { min-height: 92px; padding: 16px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--dur-2),box-shadow var(--dur-2),background var(--dur-2); }
.difficulty-card b,.difficulty-card span { display: block; }
.difficulty-card b { font-size: 16px; }
.difficulty-card span { margin-top: 5px; color: var(--text-muted); font-size: 14px; line-height: 1.4; }
.difficulty-card:hover { border-color: rgba(35,107,86,.45); }
.difficulty-card.is-active { border-color: var(--accent); background: #DDEDE5; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px rgba(35,107,86,.12); }
.difficulty-hint { margin: 0; color: var(--text-muted); font-size: 14px; }
.switch input:disabled + .switch__track { opacity: .45; cursor: not-allowed; }
/* v16: on narrow screens the step list is the primary view; the canvas is opt-in. */
.graph-viewmode { display: none; }
.graph-inspector__x { display: none; position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-muted); }
@media(max-width:900px){
  .graph-viewmode { display: flex; gap: 8px; margin: 0 14px 10px; }
  .graph-viewmode .graph-tool { flex: 1; height: 40px; font-size: 12px; }
  .graph-viewmode .graph-tool.is-active { border-color: var(--accent); background: var(--accent); color: #fff; }
  .graph-shell { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .graph-outline { display: block; max-height: none; overflow: visible; }
  .graph-workspace[data-mobile-view="outline"] .graph-viewport,
  .graph-workspace[data-mobile-view="outline"] .graph-toolbar { display: none; }
  .graph-workspace[data-mobile-view="map"] .graph-outline { display: none; }
  .graph-workspace[data-mobile-view="map"] .graph-viewport { height: 62vh; min-height: 340px; }
  .graph-toolbar { flex-wrap: wrap; justify-content: center; }
  .graph-toolbar > span { display: none; }
  .graph-tool { height: 38px; min-width: 38px; }
  .graph-inspector { left: 8px!important; right: 8px!important; top: auto; bottom: 8px; width: auto; max-height: 46%; padding: 15px 15px 13px; }
  .graph-inspector__x { display: grid; place-items: center; }
  .outline-item { min-height: 46px; }
  .graph-node__title { font: 600 17px var(--font); }
  .graph-node__kind { font: 700 12px var(--font); }
  .graph-legend { gap: 10px; font-size: 10.5px; }
}
@media(max-width:700px){.graph-preview__head{align-items:start;flex-direction:column}.difficulty-cards{grid-template-columns:1fr}.graph-toolbar{margin-inline:8px}.graph-shell{padding-inline:8px}}
/* Инспектор виден только при наведении или клавиатурном фокусе на узле. */
.graph-inspector { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px); transition:opacity var(--dur-2),transform var(--dur-2),left var(--dur-3),right var(--dur-3); }
.graph-inspector.is-visible { opacity:1; visibility:visible; transform:none; }

.setup__engine{display:grid;gap:10px}.engine-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.engine-card{display:grid;gap:5px;min-height:118px;padding:16px;text-align:left;border:1px solid var(--border);border-radius:10px;background:#fff;transition:border-color var(--dur-2),background var(--dur-2),box-shadow var(--dur-2)}.engine-card:hover:not(:disabled){border-color:var(--accent);background:#F3F8F5}.engine-card.is-active{border-color:var(--accent);background:#DDEDE5;box-shadow:inset 0 0 0 1px var(--accent),0 0 0 2px rgba(35,107,86,.12)}.engine-card b{font-size:16px;line-height:1.3}.engine-card span{color:var(--text-muted);font-size:14px;line-height:1.4}.engine-card i{margin-top:4px;color:var(--accent-strong);font-size:14px;font-weight:600;font-style:normal}.engine-card:disabled{opacity:.68}.engine-card.has-error i{color:var(--danger)}.engine-hint{margin:0;color:var(--text-muted);font-size:14px;line-height:1.5}@media(max-width:680px){.engine-cards{grid-template-columns:1fr}.engine-card{min-height:0}}