/* Focus Lab. Built on lab-kit.css: the frame stays in the gray wedge and colour appears only as
   content (the desk photo and the three subject marks shared by the photo tags and the side view).
   Cards of card gray carry the photo, the strip, the side view and the controls; every choice is a pill. */

.fl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.fl-tabs { display: flex; gap: 2px; min-width: 0; padding: 4px; overflow-x: auto; border-radius: 999px; background: var(--k1); scrollbar-width: none; }
.fl-tabs::-webkit-scrollbar { display: none; }
.fl-tabs button { flex: none; min-height: 40px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--k6); font: 400 14px var(--f-ko); white-space: nowrap; }
.fl-tabs button:hover { color: var(--k10); }
.fl-tabs button[aria-selected="true"] { background: var(--k10); color: var(--k0); font-weight: 500; }
.fl-tools { display: flex; flex: none; gap: 4px; }
.fl-quiet { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--k6); font: 400 14px var(--f-ko); white-space: nowrap; }
.fl-quiet:hover { background: var(--k2); color: var(--k10); }
.fl-quiet[aria-pressed="true"] { background: var(--k10); color: var(--k0); }
.fl-quiet[hidden] { display: none; }
.fl-label { margin: 0; color: var(--k5); font: 500 12px/1.4 var(--f-ko); letter-spacing: .04em; }
.fl-label span { color: var(--k8); font-family: var(--f-mono); }
.fl-note { margin: 12px 0 0; color: var(--k5); font-size: 12px; line-height: 1.65; }
.fl-note a { color: var(--k8); text-underline-offset: 4px; }
.fl-note a:hover { color: var(--k10); }

/* ---------- focus ---------- */
.fl-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.fl-main { display: grid; gap: 16px; min-width: 0; }
.fl-photo { margin: 0; padding: 12px 12px 16px; border-radius: var(--lk-radius); background: var(--k1); }
.fl-frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--lk-radius-m); background: var(--k0); }
.fl-frame canvas { display: block; width: 100%; height: 100%; }
.fl-hud { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.fl-hud span, .fl-tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px;
  border-radius: 999px; background: rgb(0 0 0 / .72); color: var(--k9); font: 12px var(--f-mono); white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fl-tag { position: absolute; padding: 0 10px 0 8px; transform: translate(-50%, -150%); pointer-events: none; transition: opacity .2s; }
.fl-tag i { width: 8px; height: 8px; border-radius: 50%; }
.fl-tag.is-soft { color: var(--k6); }
.fl-tag.is-soft i { background: none !important; box-shadow: inset 0 0 0 1.5px currentColor; }
.fl-error { position: absolute; inset: auto 16px 16px; margin: 0; padding: 12px 16px; border-radius: var(--lk-radius-m); background: var(--k1); color: var(--k8); font-size: 14px; line-height: 1.7; }
.fl-error[hidden] { display: none; }
.fl-why { max-width: 80ch; margin: 12px 4px 0; color: var(--k8); font-size: 16px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
.fl-why strong { color: var(--k10); font-weight: 500; }

/* The strip: the same scene focused at five distances; the chosen frame gets a white ring. */
.fl-strip-block { padding: 16px 12px 12px; border-radius: var(--lk-radius); background: var(--k1); }
.fl-strip-block > .fl-label { margin: 0 4px 12px; }
.fl-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 4px; }
.fl-frame-btn { display: block; min-width: 0; padding: 0; border: 0; border-radius: var(--lk-radius-m); background: transparent; color: var(--k6); text-align: left; cursor: pointer; }
.fl-frame-btn canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: var(--lk-radius-m); background: var(--k0); transition: transform .15s; }
.fl-frame-btn:hover canvas { transform: translateY(-2px); }
.fl-frame-btn span { display: block; padding: 8px 4px 0; overflow: hidden; font: 12px var(--f-mono); text-overflow: ellipsis; white-space: nowrap; }
.fl-frame-btn:hover span { color: var(--k10); }
.fl-frame-btn[aria-pressed="true"] canvas { outline: 2px solid var(--k10); outline-offset: 3px; }
.fl-frame-btn[aria-pressed="true"] span { color: var(--k10); }

/* Side view. Its labels keep one reading size at any drawing width (see focus-side.mjs). */
.fl-side { margin: 0; padding: 16px 12px 12px; border-radius: var(--lk-radius); background: var(--k1); }
.fl-side figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 4px 12px; }
.fl-side-note { color: var(--k5); font-size: 12px; }
.fl-side-scroll { overflow-x: auto; border-radius: var(--lk-radius-m); background: var(--k0); }
.fl-side svg { display: block; width: 100%; height: auto; }
.fl-side svg text { font-family: var(--f-mono); font-size: var(--sv-type, 10.5px); }
.sv-axis line { stroke: var(--k3); }
.sv-axis text, .sv-caption { fill: var(--k5); }
.sv-zone { fill: var(--k1); }
.sv-plane { stroke: var(--k9); stroke-dasharray: 4 4; }
.sv-plane-label { fill: var(--k10); }
.sv-lens { fill: none; stroke: var(--k5); }
.sv-iris { fill: var(--k7); }
.sv-sensor { stroke: var(--k9); stroke-width: 2; }
.sv-rays line { stroke-width: 1.2; }
.sv-disc { stroke-width: 5; stroke-linecap: round; }

/* Controls: one card, split by hairlines. */
.fl-controls { position: sticky; top: calc(var(--lab-header-height, 52px) + 16px); padding: 4px 20px 20px; border-radius: var(--lk-radius); background: var(--k1); }
.fl-controls section { padding: 16px 0 20px; border-bottom: 1px solid var(--k2); }
.fl-control-title { margin: 0 0 12px; color: var(--k9); font-size: 16px; font-weight: 500; }
.fl-seg { display: flex; gap: 2px; min-width: 0; padding: 3px; border-radius: 999px; background: var(--k0); }
.fl-seg button { flex: 1; min-width: 0; min-height: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--k6); font: 400 14px var(--f-ko); cursor: pointer; }
.fl-seg button:hover { background: transparent; color: var(--k10); }
.fl-seg button[aria-pressed="true"] { background: var(--k10); color: var(--k0); }
.fl-presets, .fl-apertures { border-radius: var(--lk-radius-m); }
.fl-presets button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; border-radius: 11px; line-height: 1.3; }
.fl-presets small { color: inherit; opacity: .7; font: 12px var(--f-mono); }
.fl-apertures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fl-apertures button { padding: 0 4px; font: 14px var(--f-mono); }
.fl-slider-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 4px; color: var(--k6); font-size: 14px; }
.fl-slider-label output { color: var(--k10); font: 14px var(--f-mono); }
.fl-range { position: relative; height: 32px; }
.fl-zone { position: absolute; top: 50%; height: 14px; transform: translateY(-50%); border-radius: 999px; background: var(--k3); pointer-events: none; }
.fl-range input { position: relative; height: 32px; }
.fl-scale { display: flex; justify-content: space-between; color: var(--k5); font: 12px var(--f-mono); }
.fl-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin: 20px 0 0; }
.fl-readout dt { color: var(--k5); font-size: 12px; }
.fl-readout dd { margin: 4px 0 0; color: var(--k10); font: 16px var(--f-mono); font-variant-numeric: tabular-nums; }
.fl-conditions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--k2); }

/* ---------- aperture and exposure ---------- */
.fl-exposure { display: grid; gap: 16px; }
.fl-exposure[hidden], .fl-guide[hidden], .fl-workbench[hidden] { display: none; }
.fl-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fl-compare figure { margin: 0; padding: 12px 12px 16px; border-radius: var(--lk-radius); background: var(--k1); }
.fl-compare canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: var(--lk-radius-m); background: var(--k0); }
.fl-compare figcaption { margin: 12px 4px 0; color: var(--k6); font: 12px var(--f-mono); }
.fl-compare figcaption b { color: var(--k10); font-size: 14px; font-weight: 500; }
.fl-exposure-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 20px; border-radius: var(--lk-radius); background: var(--k1); }
.fl-exposure-controls .fl-slider-label { margin: 0; }
.fl-exposure-controls select { font-family: var(--f-mono); }
.fl-exposure-controls .fl-seg { flex: 0 1 auto; min-width: 260px; }
.fl-exposure > .fl-why { margin: 4px 0 0; }
.fl-exposure > .fl-note { margin: 0; }

/* ---------- guide ---------- */
.fl-guide { display: grid; gap: 16px; max-width: 880px; }
.fl-guide article { padding: 24px; border-radius: var(--lk-radius); background: var(--k1); }
.fl-guide h2 { margin: 0 0 12px; color: var(--k9); font-size: 16px; font-weight: 500; }
.fl-guide p { margin: 0 0 12px; color: var(--k6); font-size: 14px; line-height: 1.85; word-break: keep-all; }
.fl-guide p:last-child { margin-bottom: 0; }
.fl-guide b { color: var(--k9); font-weight: 500; }
.fl-guide .fl-note { font-size: 12px; color: var(--k5); }
.fl-formula { padding: 12px 16px; border-radius: var(--lk-radius-m); background: var(--k0); color: var(--k8) !important; font: 14px/1.8 var(--f-mono) !important; }
.fl-formula small { color: var(--k5); font-size: 12px; }
.fl-table-wrap { overflow-x: auto; margin: 8px 0 12px; }
.fl-table { font: 14px var(--f-mono); }
.fl-table caption { font-family: var(--f-ko); }
.fl-table th, .fl-table td { padding: 10px 12px; text-align: right; white-space: nowrap; }
.fl-table th:first-child, .fl-table td:first-child { padding-left: 0; text-align: left; }
.fl-table thead th { color: var(--k5); font-size: 12px; font-weight: 400; }
.fl-table tbody th { color: var(--k6); font-weight: 400; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .fl-workbench { display: flex; flex-direction: column; gap: 16px; }
  .fl-main { display: contents; }
  .fl-photo { order: 1; }
  .fl-controls { order: 2; position: static; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
  .fl-controls > .fl-readout, .fl-controls > .fl-conditions { grid-column: 1 / -1; }
  .fl-readout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fl-strip-block { order: 3; }
  .fl-side { order: 4; }
  .fl-photo, .fl-strip-block, .fl-side { width: 100%; min-width: 0; }
}
@media (max-width: 760px) {
  .fl-controls { display: block; }
  .fl-readout { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .fl-toolbar { flex-wrap: wrap; }
  .fl-tabs { flex: 1 1 100%; }
  .fl-tabs button { flex: 1 0 auto; padding: 0 14px; }
  .fl-tools { margin-left: auto; }
  .fl-photo, .fl-strip-block, .fl-side, .fl-compare figure { padding: 8px 8px 12px; border-radius: 18px; }
  .fl-strip-block, .fl-side { padding-top: 12px; }
  .fl-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .fl-frame-btn { flex: 0 0 42%; scroll-snap-align: start; }
  .fl-compare { grid-template-columns: 1fr; }
  .fl-exposure-controls { padding: 16px; border-radius: 18px; }
  .fl-exposure-controls .fl-seg { flex: 1 1 100%; min-width: 0; }
  .fl-why { font-size: 14px; }
  .fl-side-scroll svg { min-width: 620px; }
  .fl-guide article { padding: 20px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-tag, .fl-frame-btn canvas { transition: none; }
}