/* ===========================================================================
   Mixing valve and rotary actuator guide.

   Mobile first, on the same breakpoint ladder as site.css: base is a phone,
   and 480 / 600 / 768 / 1000 only ever add. Several selectors here used to be
   declared three and four times over as the page grew; each now appears once,
   at the value that was actually winning.
   =========================================================================== */

.mixing-hero { padding-block: 34px 0; }
.mixing-hero-grid { display: grid; grid-template-columns: 1fr; gap: 25px; align-items: center; }
.mixing-hero h1 { font-size: clamp(2.3rem, 8.4vw, 4.6rem); line-height: 1.09; letter-spacing: -.055em; margin: 20px 0; }
.mixing-hero h1 em { font-style: normal; color: var(--teal); }
.mixing-hero-grid > div > p { max-width: 47ch; color: var(--muted); font-size: 16px; }
.mixing-hero .breadcrumb { flex-wrap: wrap; gap: 8px; margin-bottom: 25px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.mixing-guide .guide-actions .button { gap: 12px; }
.component-hero { margin: 0; max-width: 540px; }
.component-hero img { display: block; width: 100%; height: auto; border-radius: 8px; mix-blend-mode: multiply; }
.component-hero figcaption { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 6px 14px; font-size: 12px; color: var(--muted); padding: 12px; }
.guide-facts { display: flex; flex-wrap: wrap; gap: 10px 18px; border-block: 1px solid var(--line); padding-block: 20px; margin-top: 32px; color: var(--muted); font-size: 12px; }
.guide-facts span::before { content: '•'; color: var(--teal); margin-right: 9px; }
.mixing-guide .manual-layout { padding-top: 34px; }

.part-pair { display: grid; grid-template-columns: 1fr; gap: 4px; }
.direction-pair { display: grid; grid-template-columns: 1fr; gap: 20px; }
.part-pair > div { border-top: 2px solid var(--teal); }
.mixing-guide .install-steps { counter-reset: step; list-style: none; padding: 0; }
.mixing-guide .install-steps > li { counter-increment: step; position: relative; padding-left: 46px; margin: 24px 0; }
.install-steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 1px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--mint); color: var(--teal); border-radius: 50%; font-size: 11px; font-weight: 700; }
.mixing-guide .install-steps p { margin: 5px 0; }

/* One case per row at every width: the drawings inside are wide, and two
   columns of horizontally scrolling schematics is not a layout. */
.scenario-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
.scenario { min-width: 0; padding: 22px; border: 1px solid var(--line); background: var(--white); border-radius: 8px; }
.scenario-tag { color: var(--teal); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.mixing-guide .scenario h3 { margin-top: 12px; }
.flow-sketch { width: 100%; max-width: 410px; display: block; margin: 18px auto 8px; font-family: 'DM Sans', Arial, sans-serif; font-size: 12px; fill: var(--ink); }
.mixing-guide .scenario ol { margin-bottom: 0; }
.mixing-guide .figure-note, .assembly-figure figcaption { font-size: 12px; color: var(--muted); line-height: 1.65; }
.assembly-figure { margin: 24px 0; }
.assembly-figure img { display: block; width: 100%; height: auto; max-height: 470px; object-fit: contain; mix-blend-mode: multiply; }
.assembly-figure figcaption { margin-top: 12px; }

.wiring-scroll { border: 1px solid var(--line); border-radius: 8px; margin: 24px 0 12px; }
.connection-drawing { display: block; width: 100%; height: auto; font: 17px 'DM Sans', Arial, sans-serif; fill: var(--ink); }
.connection-drawing .drawing-heading { font-size: 26px; font-weight: 650; }
.table-scroll { overflow: auto; }
.wire-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 24px 0; }
.wire-table caption { text-align: left; font-weight: 650; padding-bottom: 12px; }
.wire-table th, .wire-table td { padding: 12px 7px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.wire-table th { background: var(--mint); font-size: 11px; }
.wire-dot { display: inline-block; width: 12px; height: 12px; border: 1px solid #58646b; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.wire-dot.brown { background: #805235; } .wire-dot.black { background: #263038; }
.wire-dot.yellow { background: #dfb928; } .wire-dot.white { background: #fafafa; }
.wire-dot.blue { background: #2674be; }

.direction-card { border: 1px solid var(--line); background: var(--white); padding: 24px; border-radius: 8px; }
.mixing-guide .direction-card h3 { font-size: 20px; margin: 12px 0 22px; }
.endpoint { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 13px; }
.endpoint strong { color: var(--teal); white-space: nowrap; }
.guide-sources { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 30px; }
.guide-sources strong { font-size: 12px; }
.mixing-guide .guide-sources p { font-size: 12px; }

.layout-scroll { margin: 20px auto; max-width: 600px; border: 1px solid var(--line); border-radius: 8px; }
.hydraulic-layout { display: block; width: 100%; height: auto; font: 19px 'DM Sans', Arial, sans-serif; fill: var(--ink); }
.hydraulic-layout .layout-heading { font-size: 19px; letter-spacing: .045em; font-weight: 650; }
.hydraulic-layout .layout-small { font-size: 15px; }

/* Starting positions lead the guide; wiring follows the mounting sequence. */
.spindle-reference { display: grid; grid-template-columns: 1fr; align-items: center; gap: 12px; margin: 28px 0; }
.spindle-reference figure { margin: 0; max-width: 240px; margin-inline: auto; }
.spindle-reference svg { display: block; width: 100%; height: auto; }
.spindle-reference figcaption { text-align: center; font-size: 12px; color: var(--muted); margin-top: 12px; }
.mixing-guide .layout-case { padding: 18px; }
.software-fallback { border: 1px solid var(--line); border-radius: 8px; margin-top: 20px; padding: 16px; }
.software-fallback summary { font-weight: 650; cursor: pointer; }
.software-fallback > div { padding-top: 12px; }
.finish-check { border-top: 2px solid var(--teal); margin-top: 32px; padding-top: 10px; }

.alignment-summary { display: grid; gap: 6px; font-size: 13px; }
.alignment-summary strong { font-size: 25px; color: var(--teal); }
.starting-actuators { display: block; width: 100%; height: auto; max-width: 600px; font: 20px 'DM Sans', Arial, sans-serif; fill: var(--ink); margin: 28px auto 0; }

.motion-intro { margin-top: 36px; }
.valve-motion { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 24px; }
.motion-drawing { display: block; width: 100%; height: auto; font: 20px 'DM Sans', Arial, sans-serif; fill: var(--ink); }
.motion-label { font-size: 18px; font-weight: 650; letter-spacing: .04em; }
.motion-value { font-size: 43px; font-weight: 650; }
.motion-voltage { font-size: 29px; font-weight: 650; }
.motion-small { font-size: 17px; fill: #5c6f63; }
.valve-motion > .figure-note { padding: 0 18px; }
.gif-download { font-size: 13px; }
.motion-endpoints { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0; }
.motion-endpoints figure { margin: 0; }
.motion-endpoints img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.motion-endpoints figcaption { font-size: 12px; padding-top: 8px; }

/* The first layout is the complete animated circuit, edge to edge in its panel. */
.mixing-guide .animated-layout { padding: 0; overflow: hidden; }
.layout-intro { padding: 24px 28px 8px; }
.animated-layout .valve-motion { margin: 0; border: 0; border-radius: 0; }
.animated-layout .motion-drawing { width: 100%; height: auto; }
.command-overlay { font-variant-numeric: tabular-nums; }

/* Functional water paths share the same position as the valve and shutter. */
.water-flow { fill: none; stroke-width: 14; stroke-dasharray: 16 28; stroke-linecap: round; }
.actuator-mode-badge { cursor: pointer; outline: none; }
.actuator-mode-badge rect { fill: #e0eae3; stroke: #a7c0b1; stroke-width: 1.5; }
.actuator-mode-badge text { fill: #4d695b; font: 700 29px 'DM Sans', Arial, sans-serif; user-select: none; }
/* Each badge names the layout it selects, so the drawing needs no separate
   heading repeating it. */
.actuator-mode-badge .badge-layout { font-size: 21px; letter-spacing: .04em; }
.actuator-mode-badge[aria-pressed="true"] rect { fill: #244f43; stroke: #244f43; }
.actuator-mode-badge[aria-pressed="true"] text { fill: #fffefa; }
.actuator-mode-badge:hover rect { stroke: #244f43; stroke-width: 3; }
.actuator-mode-badge:focus-visible rect { stroke: #c57430; stroke-width: 4; }
.direction-hint { font-size: 14px; fill: #5c6f63; }

/* The actual leader menu sits directly below the animated installation view. */
.leader-direction-help { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; padding: 20px; border-top: 1px solid var(--line); background: var(--white); }
.mixing-guide .leader-direction-help h3 { margin: 0 0 14px; font-size: 21px; }
.leader-direction-help p { font-size: 14px; }
.leader-direction-help figure { margin: 0; min-width: 0; max-width: 440px; }
.leader-direction-help img { display: block; width: 100%; height: auto; border: 1px solid var(--line); image-rendering: pixelated; }
.leader-direction-help figcaption { margin-top: 10px; font-size: 12px; line-height: 1.65; color: var(--muted); }

.port-front { font: 22px 'DM Sans', Arial, sans-serif; fill: var(--ink); }
.port-front-title { font-size: 24px; font-weight: 650; }

@media (min-width: 600px) {
  .spindle-reference { grid-template-columns: 240px 1fr; gap: 30px; }
  .spindle-reference figure { max-width: none; margin-inline: 0; }
  .software-fallback { padding: 18px 22px; }
  .motion-endpoints { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .mixing-hero-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .mixing-hero-grid > div > p { font-size: 17px; }
  .component-hero { max-width: none; }
  .guide-facts { gap: 12px 30px; }
  .mixing-guide .manual-layout { padding-top: 54px; }
  .part-pair { grid-template-columns: 1fr 1fr; gap: 20px; }
  .scenario { padding: 25px 28px; }
  .wire-table th, .wire-table td { padding: 14px 12px; }
  .mixing-guide .layout-case { padding: 25px 28px; }
  .leader-direction-help { grid-template-columns: 1fr 1fr; gap: 28px; padding: 24px 28px; }
  .leader-direction-help figure { max-width: none; }
}

@media (min-width: 1000px) {
  .mixing-hero-grid { grid-template-columns: .9fr 1.1fr; gap: 36px; }
  .mixing-hero h1 { font-size: clamp(2.7rem, 4.7vw, 4.6rem); }
  .direction-pair { grid-template-columns: 1fr 1fr; }
}

@media print {
  .mixing-hero-grid { display: block; }
  .mixing-hero h1 { font-size: 30pt; }
  .component-hero { max-width: 420px; margin: 20px auto; }
  .guide-actions, .guide-facts, .gif-download, .mixing-guide .breadcrumb { display: none; }
  .mixing-guide .manual-sidebar { display: none; }
  .mixing-guide .manual-layout { display: block; }
  .table-scroll { overflow: visible; }
  .mixing-guide .layout-scroll { max-width: 380px; }
  .scenario, .direction-card, .assembly-figure, .wiring-scroll, .layout-scroll,
  .spindle-reference, .software-fallback, .finish-check, .motion-endpoints,
  .leader-direction-help { break-inside: avoid; }
  .spindle-reference { grid-template-columns: 170px 1fr; }
  .assembly-figure img { max-height: 300px; }
  .mixing-guide .install-steps > li { break-inside: avoid; }
  .mixing-guide .trouble-list details { break-inside: avoid; }
  .mixing-guide .layout-case { break-inside: auto; }
  .valve-motion { display: none; }
  .animated-layout .valve-motion { display: block; }
  .animated-layout { break-inside: avoid; }
  .part-pair, .direction-pair, .motion-endpoints { grid-template-columns: 1fr 1fr; }
}