/* Step 14: a functional cross-section within the established catalogue design. */
.integrated-section { padding:4rem 0 3rem; border-top:1px solid var(--line); background:#f5f8f7; }
.integrated-heading { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.65fr); gap:3rem; align-items:end; margin-bottom:2rem; }
.integrated-heading .eyebrow { font-size:.875rem; letter-spacing:.045em; margin-bottom:1rem; }
.integrated-heading h2 { max-width:50rem; font:500 clamp(2rem,3.4vw,3.125rem)/1.13 Outfit,Arial,sans-serif; letter-spacing:-.025em; margin:0; }
.integrated-heading h2 em { font-style:normal; color:var(--green); }
.integrated-heading > p { color:#46616a; font-size:1.0625rem; margin:0; }
#integrated-explorer { background:#fff; border:1px solid #c9d8d3; }
.ig-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:1.25rem 1.5rem; border-bottom:1px solid #dce5e0; }
.ig-concept-label { font-size:.875rem; font-weight:700; color:var(--green); }
.ig-toolbar p { margin:0; font-size:.9375rem; }
.ig-view-controls { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.ig-modes { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; }
.ig-modes > span { font-size:.875rem; margin-right:.35rem; }
.ig-modes button,.ig-reset { min-height:44px; padding:.6rem .9rem; background:#fff; color:var(--navy); border:1px solid #a6bcb2; font-size:.875rem; font-weight:600; cursor:pointer; }
.ig-modes button[aria-pressed=true] { background:var(--navy); color:#fff; border-color:var(--navy); }
.ig-reset { border:0; text-decoration:underline; text-underline-offset:4px; }
.ig-modes button:hover,.ig-reset:hover { background:#e6efea; color:var(--navy); }
.ig-figure { margin:0; }
.ig-stage { position:relative; margin:.8rem 1rem 0; }
.ig-diagram { display:block; width:100%; height:auto; font-family:Outfit,Arial,sans-serif; color:var(--navy); }
.ig-zone { fill:#f7f7f4; stroke:#d5ded7; }
.ig-zone-title { fill:#647b7e; font-size:16px; font-weight:500; letter-spacing:1.3px; }
.ig-frame { fill:none; stroke:#bbcac6; stroke-width:1.2; }
.ig-ground { stroke:#698b83; stroke-width:3; }
.ig-equipment { fill:#fff; stroke:#829c9f; stroke-width:1.5; }
.ig-tank { fill:#fbefdf; stroke:#b29074; stroke-width:1.8; }
.ig-equipment-title { fill:#173d50; font-size:18px; font-weight:600; }
.ig-text { fill:#365662; font-size:17px; }
.ig-text-small { fill:#365662; font-size:15px; }
.ig-crop-title { fill:#315d49; font-size:23px; font-weight:500; }
.ig-flow { fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.ig-hot { stroke:#b34b31; }
.ig-heating-return { stroke:#287193; }
.ig-cold { stroke:#287193; }
.ig-water { stroke:#187b85; }
.ig-air { stroke:#287193; stroke-width:3; stroke-dasharray:13 8; }
.ig-gas { stroke:#397549; stroke-width:2.8; stroke-dasharray:4 5; }
.ig-signal { stroke:#79528e; stroke-width:1.7; stroke-dasharray:7 5 1 5; }
.ig-return { stroke-dasharray:5 5; }
.ig-mist { fill:none; stroke:#369eac; stroke-width:1.8; stroke-dasharray:2 5; }
.ig-pump { fill:#fff; stroke:#547681; stroke-width:1.7; }
.ig-circuit { transition:opacity 150ms ease; }
.ig-is-muted { opacity:.16; }
.ig-is-context { opacity:.52; }
.ig-is-active { opacity:1; }
.ig-is-active .ig-flow { stroke-width:4; }
.ig-stage[data-ig-active=automation] .ig-circuit:not([data-ig-circuit=automation]) { opacity:.45; }
.ig-stage[data-ig-active=automation] [data-ig-circuit=automation] { opacity:1; }
.ig-pin { position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:.4rem; min-height:44px; padding:.3rem .7rem .3rem .3rem; background:#fff; color:#173d50; border:1px solid #8daaa1; border-radius:24px; box-shadow:0 2px 5px #173d5012; font-size:.875rem; font-weight:600; white-space:nowrap; cursor:pointer; }
.ig-pin span { display:flex; justify-content:center; align-items:center; width:1.8rem; height:1.8rem; background:#eaf1ed; border-radius:50%; font-size:.8125rem; }
.ig-pin[aria-pressed=true] { background:#173d50; border-color:#173d50; color:#fff; }
.ig-pin[aria-pressed=true] span { background:#3d7058; color:#fff; }
.ig-pin:hover { border-color:#173d50; box-shadow:0 2px 7px #173d5030; }
.ig-figure figcaption { font-size:.875rem; line-height:1.55; color:#4a6268; padding:.7rem 1.5rem 1rem; margin:0; }
.ig-selectors { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid #c9d8d3; border-bottom:1px solid #c9d8d3; }
.ig-selectors button { display:flex; align-items:center; justify-content:center; gap:.65rem; border:0; border-right:1px solid #c9d8d3; padding:1rem .5rem; min-height:56px; color:#173d50; background:#f5f8f7; font-size:1rem; font-weight:600; cursor:pointer; }
.ig-selectors button:last-child { border-right:0; }
.ig-selectors button > span { color:#527362; font-size:.875rem; font-weight:500; }
.ig-selectors button:hover { background:#e5eee9; }
.ig-selectors button[aria-pressed=true] { background:#173d50; color:#fff; }
.ig-selectors button[aria-pressed=true] > span { color:#d3e6d8; }
.ig-legend { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.15rem; padding:1rem 1.5rem; font-size:.875rem; line-height:1.5; color:#36525c; }
.ig-legend > span { display:inline-flex; align-items:center; gap:.4rem; }
.ig-legend-label { font-weight:600; }
.ig-swatch { display:inline-block; width:24px; border-top:3px solid; }
.ig-swatch-heating-return { color:#287193; border-top-style:dashed; }
.ig-swatch-hot { color:#b34b31; }.ig-swatch-cold { color:#287193; }.ig-swatch-water { color:#187b85; }.ig-swatch-air { color:#287193; border-top-style:dashed; }.ig-swatch-gas { color:#397549; border-top-style:dotted; }.ig-swatch-signal { color:#79528e; border-top:3px dashed; }
.ig-detail { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr) minmax(0,.9fr); gap:2rem; padding:1.8rem 1.5rem; border-top:1px solid #e0e7e3; align-items:start; min-height:295px; }
.ig-kicker { font-size:.875rem; margin:0 0 .8rem; color:#3d7058; font-weight:600; }
.ig-detail h3 { font:500 clamp(1.35rem,2vw,1.7rem)/1.2 Outfit,Arial,sans-serif; letter-spacing:-.018em; margin:0; }
.ig-detail-copy { font-size:1rem; line-height:1.65; }
.ig-detail-copy p { margin:0 0 1rem; }
.ig-route { display:flex; flex-wrap:wrap; gap:.3rem .5rem; list-style:none; padding:0; margin:0 0 1rem; font-size:.875rem; font-weight:600; }
.ig-route li:not(:last-child)::after { content:'→'; margin-left:.5rem; color:#718b7c; }
.ig-detail-copy .ig-relation { margin:0; color:#48626b; font-size:.9375rem; }
.ig-detail-actions { display:flex; flex-direction:column; gap:1rem; }
.ig-action a { display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:44px; font-size:1rem; font-weight:600; border-bottom:1px solid #c9d8d3; text-decoration:none; }
.ig-action a:hover { color:var(--green); border-color:var(--green); }
.ig-action-note { display:block; margin-top:.25rem; font-size:.875rem; line-height:1.4; color:#516a71; }
.ig-unavailable { display:block; color:#697a7c; font-size:1rem; font-weight:600; padding:.5rem 0; border-bottom:1px solid #e1e8e3; }
.ig-detail-actions .button { font-size:1rem; line-height:1.5; padding:1rem; gap:1rem; }
.ig-secondary-film { font-size:.875rem; font-weight:600; min-height:44px; padding:.35rem 0; }
.ig-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem 2rem; padding:1.25rem 1.5rem; border-top:1px solid #c9d8d3; background:#edf3ef; }
.ig-footer p { font-size:.9375rem; margin:0; max-width:35rem; }
.ig-footer a { font-size:1rem; line-height:1.5; font-weight:600; min-height:44px; display:inline-flex; align-items:center; }
@media (max-width:1050px) {
 .ig-detail { grid-template-columns:minmax(0,1fr) minmax(0,1.8fr); }
 .ig-detail-actions { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
 .ig-secondary-film { grid-column:1/-1; }
 .ig-selectors button { flex-direction:column; gap:.25rem; }
 .ig-pin { font-size:.8125rem; min-height:40px; padding:.2rem .5rem .2rem .2rem; }
 .ig-pin span { width:1.5rem; height:1.5rem; }
}
/* Touch controls remain legible under the full schematic; full catalogue mobile QA follows later. */
@media (max-width:799px) {
 .integrated-section { padding:2.5rem 0; }
 .integrated-heading { grid-template-columns:1fr; gap:1rem; }
 .integrated-heading h2 { font-size:2rem; }
 .ig-toolbar { padding:1rem; align-items:start; }
 .ig-view-controls { gap:.6rem; }
 .ig-modes > span { flex-basis:100%; }
 .ig-stage { margin:.6rem 0 0; }
 .ig-pins { display:none; }
 .ig-figure figcaption { padding:.75rem 1rem 1rem; }
 .ig-selectors { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .ig-selectors button { flex-direction:row; font-size:.9375rem; min-height:54px; }
 .ig-selectors button:nth-child(-n+3) { border-bottom:1px solid #c9d8d3; }
 .ig-selectors button:nth-child(3n) { border-right:0; }
 .ig-legend { padding:1rem; gap:.5rem 1rem; }
 .ig-legend-label { flex-basis:100%; }
 .ig-detail { grid-template-columns:1fr; gap:1.25rem; padding:1.5rem 1rem; min-height:0; }
 .ig-detail-actions { grid-column:auto; grid-template-columns:1fr; gap:1rem; }
 .ig-footer { padding:1rem; }
}
@media (max-width:480px) {
 .ig-selectors { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ig-selectors button:nth-child(3n) { border-right:1px solid #c9d8d3; }
 .ig-selectors button:nth-child(2n) { border-right:0; }
 .ig-selectors button:nth-child(-n+4) { border-bottom:1px solid #c9d8d3; }
}
@media (prefers-reduced-motion:reduce) { .ig-circuit { transition:none; } }