/* Chapter 6: hyperfocal distance (lab layout lives in site.css) */

/* Large screens: views on the left, compact sliders on the right with the
   sensor's blur circles under them, so the whole lab fits on one screen */
@media (min-width:900px){
  .lab{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:32px;align-items:start;
       grid-template-areas:"head head" "scene controls" "scene circles" "scale circles"}
  .lab-head{grid-area:head}
  .lab-views{display:contents}
  .view-scene{grid-area:scene;align-self:stretch}
  .view-scene .scene{flex:1;aspect-ratio:auto;min-height:260px}
  .view-scale{grid-area:scale}
  .view-circles{grid-area:circles}
  .lab-controls{grid-area:controls;grid-template-columns:1fr;border-top:1px solid var(--rule)}
  .lab-controls .control{padding:9px 0 7px;border-bottom:1px solid var(--rule)}
  .lab-controls .control-head label{font-size:15px}
  .lab-controls output{font-size:21px}
  .lab-controls input[type=range]{margin-top:2px;height:24px}
  .lab-controls .hint{font-size:12px;margin-top:0}
  .lab .chip{font-size:14px;padding:6px 12px}
}

/* Illustrated landscape: each layer blurs by its own blur circle */
.scene{flex:none;aspect-ratio:2/1;position:relative;overflow:hidden;border-radius:8px;background:#D5E2E4}
.scene .layer{position:absolute;inset:0;display:block;width:100%;height:100%}
.scene .far{filter:blur(var(--b-far, 0px));transform:scale(1.05)}
.scene .mid{filter:blur(var(--b-mid, 0px));transform:scale(1.05)}
.scene .near{filter:blur(var(--b-near, 0px))}
.rock-group{transform-box:fill-box;transform-origin:30% 100%;transform:scale(var(--rock-scale, 1))}
.verdict{font-size:14px;font-weight:600;color:var(--on-body)}

/* Blur circles on the sensor */
.circles .blob{fill:#7FD6BC;fill-opacity:.45;stroke:#7FD6BC;stroke-width:2;transition:r .12s linear}
.circles .over .blob{fill:#F5A623;stroke:#F5A623}
.circles .limit{fill:none;stroke:#E7E9E4;stroke-width:1.5;stroke-dasharray:3 4}
.circles .name{fill:#E7E9E4;font-size:15px;font-weight:600}
.circles .val{fill:#BFEBDD;font-size:14px}
.circles .val.over{fill:#F8C46A}
.view-circles .diagram{margin:auto 0}

/* Concept sections */
.two-up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px;align-items:start}
.two-up p{margin:0 0 14px}
.two-up .instrument{margin-top:6px}
.spaced{margin-top:28px}
.example{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px 48px;align-items:center;margin-top:40px;padding-top:32px;border-top:1px solid var(--rule)}
.example p{margin:0 0 14px}
.ray-fig{margin:0}
.ray-fig figcaption{margin-top:12px;font-size:17px}
.spaced-h{margin-top:28px}
.after-table{margin-top:14px}
#field .note{margin-top:24px}

@media (max-width:899px){
  .lab-views{grid-template-columns:1fr}
  .view-scene,.view-circles,.view-scale{grid-column:auto}
  .view-circles .diagram{max-height:240px}
}
@media (max-width:1023px){
  .two-up,.example{grid-template-columns:1fr}
}
/* Phones: bigger labels inside the diagrams so they stay readable when scaled down */
@media (max-width:760px){
  .scene{aspect-ratio:16/10}
  /* distance diagrams keep a readable size and scroll sideways inside their panel */
  .line-diagram{overflow-x:auto}
  .line-diagram svg{min-width:540px}
  .circles .name{font-size:20px}
  .circles .val{font-size:17px}
}

/* Focus stacking */
.stack-diagram{max-width:760px;margin-bottom:8px}
#stacking .cols{margin-top:32px}

/* Cheat card: a small printable table */
.cheat-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;max-width:620px;margin-bottom:16px}
.cheat-bar .segmented{flex:1;min-width:280px}
.cheat-card{max-width:620px;padding:20px 22px 16px;border:2px solid var(--ink);border-radius:16px;background:var(--paper)}
.cheat-title{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin:0 0 4px;font-family:var(--sans);font-size:17px}
.cheat-title span{color:var(--muted);font-size:15px;font-weight:600}
.cheat-card td small{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.cheat-card td:not(:first-child),.cheat-card th:not(:first-child){text-align:right}
.cheat-foot{margin:12px 0 0;font-family:var(--sans);font-size:12px;color:var(--muted)}

/* Printing prints only the cheat card, in black on white */
@media print{
  body *{visibility:hidden}
  #cheatCard,#cheatCard *{visibility:visible}
  #cheatCard{position:absolute;left:0;top:0;width:12cm;max-width:none;--ink:#000;--muted:#444;--rule:#999;--paper:#fff;color:#000;background:#fff}
}