/* Chapter 2: metering and the histogram. Builds on the playground styles in exposure.css. */

/* Live histogram in the corner of the viewfinder, like a camera's live view */
.histo{position:absolute;bottom:12px;right:12px;width:30%;min-width:110px;max-width:170px;padding:6px;border-radius:6px;background:#0009;color:#F4F1EA;backdrop-filter:blur(4px)}
.histo svg,.histo-mini{display:block;width:100%;height:auto;aspect-ratio:2/1}
.histo .clip,.histo-mini .clip{fill:#FF5A4A}
.mode-badge{padding:0 7px;border:1.5px solid var(--amber);border-radius:5px;font-size:17px;line-height:1.35;align-self:center}
.vals .limit{animation:blink .7s steps(2) infinite}

/* Mode dial: a segmented control above the sliders */
.mode-dial{padding-bottom:18px}
.mode-dial .hint{margin-top:10px;font-size:14px;min-height:3em}
.total{padding-bottom:18px}
.total p{min-height:3.2em}

/* The setting the camera controls: tagged Auto, slider dimmed and moved by the camera */
.auto-tag{display:none;padding:1px 9px;border-radius:999px;background:var(--amber);color:#1B1E21;font-size:13px;font-weight:700}
.is-auto .auto-tag{display:inline-block}
.is-auto input[type=range]{cursor:default;opacity:.55}
.control[hidden]{display:none}

/* Three example histograms */
.histo-demo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.histo-demo figure{margin:0;padding:14px;background:var(--body);border-radius:18px;font-family:var(--sans);color:var(--on-body)}
.shot svg{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:8px}
.histo-mini{margin:12px 0 12px;color:#F4F1EA;background:#0006;border-radius:6px;padding:4px}
.histo-demo figcaption{font-size:15px;line-height:1.45;color:var(--on-body-muted)}
.histo-demo strong{display:block;font-size:17px;color:var(--on-body);margin-bottom:2px}

/* Histogram builder: the photo as big pixels above the histogram counted from them */
.hb-lab{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px 32px;align-items:start;margin-bottom:40px}
.hb-view{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px}
.hb-view canvas{display:block;width:100%;height:auto;border-radius:8px;image-rendering:pixelated}
.hb-view svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y;cursor:pointer}
.hb-view svg text{font-family:var(--sans)}
.hb-hit{fill:transparent;cursor:pointer}
.hb-hit:hover{fill:#ffffff10}
.hb-hit.is-picked{fill:#F5A62320;stroke:#F5A623;stroke-width:1.5}
.hb-stop{stroke:#A7ADB2;stroke-opacity:.45;stroke-dasharray:3 4}
.hb-stop-label{fill:#A7ADB2;font-size:13px;text-anchor:middle}
.hb-grey{stroke:#7FD6BC;stroke-width:1.5;stroke-dasharray:6 4}
.hb-grey-label{fill:#7FD6BC;font-size:13px;font-weight:700;text-anchor:middle}
.hb-end{fill:#A7ADB2;font-size:13px}
.hb-controls{border-top:1px solid var(--rule)}
.hb-controls .control{padding:14px 0 12px}
.hb-say{margin:14px 0;padding:12px 14px;border-left:3px solid var(--amber);background:var(--paper-2);border-radius:0 12px 12px 0;font-family:var(--sans);font-size:15px;line-height:1.45}
#plotting .steps .eq{margin:8px 0 0;font-size:19px}
.hb-stops-h{margin-top:40px}
.hb-stops-intro{max-width:52em;margin:0 0 8px}
tr.hl td{background:var(--paper-2)}
tr.hl td:first-child{padding-left:10px}

@media (max-width:900px){
  .hb-lab{grid-template-columns:1fr}
  .histo-demo{grid-template-columns:1fr}
  .histo-demo figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
  .histo-demo .shot{grid-row:1}
  .histo-demo .histo-mini{margin:0;grid-row:1}
  .histo-demo figcaption{grid-column:1/-1;margin-top:12px}
}
/* The five-column modes table becomes one card per mode on phones */
@media (max-width:700px){
  .modes-table thead{display:none}
  .modes-table,.modes-table tbody,.modes-table tr,.modes-table td{display:block}
  .modes-table tr{padding:12px 0;border-bottom:1px solid var(--rule)}
  .modes-table td{border:0;padding:2px 0}
  .modes-table td:first-child{font-size:18px}
  .modes-table td:nth-child(2){color:var(--muted);font-weight:600}
  .modes-table td:nth-child(3)::before{content:"You set: ";color:var(--muted)}
  .modes-table td:nth-child(4)::before{content:"Camera sets: ";color:var(--muted)}
  .modes-table td:nth-child(5)::before{content:"Use it when: ";color:var(--muted)}
}
@media (max-width:560px){
  .histo{bottom:8px;right:8px;min-width:96px;padding:4px}
}