/* ISO chapter: reuses the Part 1 viewfinder and the shared controls. */
.iso-basics{padding-bottom:48px}
.iso-basics h2{margin-bottom:0}
.iso-basics .iso-notes{grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0 0}
.iso-lab{padding-bottom:64px}
.iso-lab-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.iso-lab-head h2{margin:0}
.iso-lab-head p{max-width:40em;margin:0;color:var(--muted)}
.iso-lab .play{padding-bottom:0}
.iso-lab .readout{justify-content:center}
.iso-lab .vals{width:100%;justify-content:space-between}
.iso-mode-control{padding-top:0}
.iso-takeaway{margin-top:24px}
.iso-takeaway p:last-child{color:var(--ink);font-family:var(--sans);font-size:18px;font-weight:700;line-height:1.4}
.iso-examples{margin-top:20px}

/* Note cards use the book's paper palette, with small alternating accents. */
.iso-notes{display:grid;gap:12px}
.iso-notes article{padding:17px 18px 20px;border:1.5px solid var(--rule);border-radius:14px;background:var(--paper-2);box-shadow:0 12px 18px -18px #0009}
.iso-notes article:nth-child(4n+1){border-top:5px solid var(--amber)}
.iso-notes article:nth-child(4n+2){border-top:5px solid var(--sharp)}
.iso-notes article:nth-child(4n+3){border-top:5px solid var(--hyper)}
.iso-notes article:nth-child(4n+4){border-top:5px solid var(--muted)}
.iso-notes h3{margin:0 0 6px;font-size:18px}
.iso-notes p{margin:0;font-size:16px;line-height:1.45}
.iso-rule{max-width:52em;margin:0;padding:18px 20px;border-left:4px solid var(--amber);background:var(--paper-2)}

/* Three steps from light to picture. The chosen change shows its effect on each step. */
.flow-pick{margin:0 0 20px}
.flow{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:0 0 24px;padding:0}
.flow li{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;border-radius:18px;background:var(--body);color:var(--on-body)}
.flow li:not(:last-child)::after{content:"→";position:absolute;right:-31px;top:50%;transform:translateY(-50%);font:800 26px var(--sans);color:var(--amber)}
.flow h3{margin:0;font-size:21px;color:var(--on-body)}
.flow p{margin:0;font-size:17px;line-height:1.45}
.flow strong{color:#F8C46A}
.flow-num{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--amber);color:var(--body-2);font:800 16px var(--sans)}
.flow-side{font-family:var(--sans);font-size:14px!important;color:var(--on-body-muted)}
.flow-change{display:none;margin-top:auto!important;padding:10px 12px;border-radius:10px;background:var(--body-2);font-family:var(--sans);font-size:15px!important}
.flow-change b{display:block;margin-bottom:2px;color:var(--sharp)}
.flow[data-flow="trade"] [data-for="trade"],.flow[data-flow="iso"] [data-for="iso"]{display:block}
@media (max-width:900px){
  .flow{grid-template-columns:1fr;gap:34px}
  .flow li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-33px;transform:translateX(-50%)}
}

.iso-choose{margin-top:0}
.iso-choose .steps{margin:0}
.iso-choose p{margin:0}
.iso-mistakes-h{margin:40px 0 12px}
.iso-mistakes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.iso-mistakes h3{margin:0 0 8px}
.iso-mistakes p{margin:0}


/* Base ISO reference and Panasonic profile comparison. */
.iso-term-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0 40px}
.iso-term-grid article{padding:18px 20px;border:1.5px solid var(--rule);border-radius:16px;background:var(--paper-2)}
.iso-term-grid h3{margin:0 0 6px;font-size:18px}
.iso-term-grid p{margin:0;font-size:16px;line-height:1.5}
.iso-base-subhead{margin:0 0 8px}
.iso-why{margin:40px 0}
.iso-why>p{max-width:60em}
.iso-gain-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 20px}
.iso-gain-cost{margin-top:10px!important;font:600 14px/1.5 var(--sans)!important;color:var(--muted)}
.iso-base-lead{max-width:60em;margin:0 0 18px}
.iso-profile-lab{margin:0 0 48px}
.iso-profile-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}
.iso-profile-head h3{margin:0 0 4px}
.iso-profile-head p{margin:0;color:var(--muted)}
.iso-profile-head>a{flex:none;font:700 14px var(--sans)}
.iso-profile-pick{margin-bottom:12px}
.iso-base-instrument{padding:22px 26px 18px}
.iso-base-label{margin:0;font:600 15px var(--sans);color:var(--on-body-muted)}
.iso-base-label strong{color:var(--on-body)}
.iso-base-values{display:flex;gap:14px;flex-wrap:wrap;margin:9px 0 32px;font:800 clamp(25px,4vw,38px)/1.1 var(--sans);font-stretch:78%;font-variant-numeric:tabular-nums}
.iso-base-values span:first-child{color:var(--sharp)}
.iso-base-values span:last-child{color:var(--amber)}
.iso-base-scale{position:relative;height:7px;margin:0 8px;border-radius:99px;background:linear-gradient(90deg,var(--sharp),var(--on-body-rule) 45%,var(--amber))}
.iso-base-marker{position:absolute;top:50%;width:19px;height:19px;border:4px solid var(--body);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px currentColor}
.iso-base-marker.is-low{background:var(--sharp);color:var(--sharp)}
.iso-base-marker.is-high{background:var(--amber);color:var(--amber)}
.iso-base-ends{display:flex;justify-content:space-between;margin:14px 0 0;font:600 13px var(--sans);color:var(--on-body-muted)}
.iso-base-note{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--on-body-rule);font:500 15px/1.5 var(--sans);color:var(--on-body)}
.iso-reference-table{overflow-x:auto;margin-bottom:10px}
.iso-reference-table table{min-width:660px}
.iso-reference-table td:nth-child(2){font-weight:700;font-variant-numeric:tabular-nums}
.iso-base-field{margin-top:32px;padding:22px 24px;border-radius:18px;background:var(--body);color:var(--on-body)}
.iso-base-field h3{margin:0 0 6px;color:var(--on-body)}
.iso-base-field-lead{margin:0 0 16px;color:var(--on-body-muted)}
.iso-base-field ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 30px;margin:0;padding-left:25px}
.iso-base-field li{padding-left:3px;font-size:16px;line-height:1.5}
.iso-base-field li::marker{color:var(--amber);font-weight:800}
.iso-base-field strong{color:var(--sharp)}

.iso-check{max-width:720px;padding:24px;border:1.5px solid var(--ink);border-radius:18px}
.iso-check-step{margin:0 0 8px;color:var(--muted);font:700 14px var(--sans)}
.iso-check h3{margin:0 0 18px;font-size:22px;line-height:1.35}
.iso-options{display:grid;gap:8px;margin-bottom:16px}
.iso-options button{width:100%;padding:13px 16px;border:1.5px solid var(--rule);border-radius:12px;background:transparent;color:var(--ink);font:600 16px/1.4 var(--sans);text-align:left;cursor:pointer}
.iso-options button:hover{border-color:var(--ink)}
.iso-options button[aria-pressed="true"]{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 18%,transparent)}
.iso-options button[data-correct="true"]{border-color:var(--sharp);background:color-mix(in srgb,var(--sharp) 18%,transparent)}
.iso-options button:disabled{cursor:default}
.iso-feedback{margin:0 0 16px;padding-left:14px;border-left:3px solid var(--amber)}
.iso-feedback.is-right{border-color:var(--sharp)}
.iso-check .chip{margin-left:8px}

@media (max-width:900px){
  .iso-lab-head{display:block}
  .iso-lab-head p{margin-top:8px}
  .iso-basics .iso-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iso-notes article{min-height:0}
  .iso-mistakes{grid-template-columns:1fr}
  .iso-term-grid{grid-template-columns:1fr}
  .iso-gain-grid{grid-template-columns:1fr}
  .iso-base-field ol{grid-template-columns:1fr}
}
@media (max-width:620px){
  .iso-basics .iso-notes{grid-template-columns:1fr}
    .iso-profile-head{display:block}
  .iso-profile-head>a{display:inline-block;margin-top:8px}
}
@media (max-width:450px){
  .iso-notes{gap:8px}
  .iso-notes article{padding:12px}
  .iso-notes h3{font-size:16px}
  .iso-notes p{font-size:14px}
  .iso-check{padding:18px}
}