/* =============================================================================
   Final designs: the optical-layout pair and the size comparison (W2, 17 Oct 2026)
   -----------------------------------------------------------------------------
   .fdo  an optical-layout diagram: a section through the CAD, to scale, light
         left to right (two drawings of it: wide for a laptop, tall for a phone)
   .fsz  the Pro and the Slim at the same scale, with their dimensions laid over
         the photograph as lines and labels (not baked into the image)

   One palette for both diagrams and for the beams in the 3D viewers:
   amber = the LED's light, green = the sample path, blue = the reference path.
   ========================================================================== */

.fdo, .fsz {
  --fd-ink: #1d1d1f;
  --fd-ink-2: #424245;
  --fd-ink-3: #6e6e73;
  --fd-line: rgb(29 29 31 / .1);
  --fd-amber: #f29d38;
  --fd-green: #2fa36b;
  --fd-blue: #3b82c4;
  --fd-slate: #3f5a66;
  margin: 0;
}

/* ------------------------------------------------------- optical layout */
.fdo__draw {
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfcfd 0%, #f3f6f8 100%);
  box-shadow: inset 0 0 0 1px var(--fd-line);
  padding: clamp(10px, 2.2vw, 22px) clamp(8px, 2vw, 20px);
}
.fdo__svg { display: block; width: 100%; height: auto; overflow: visible; }
.fdo__svg--tall { display: none; max-width: 430px; margin: 0 auto; }
@media (max-width: 640px) {
  .fdo__svg--wide { display: none; }
  .fdo__svg--tall { display: block; }
}
.fdo--slim .fdo__svg--wide { max-width: 640px; margin: 0 auto; }

/* the drawing: cut print, glass, culture, boards, light */
.fdo .cut { fill: #e3e7eb; stroke: #8d98a2; stroke-width: 1; vector-effect: non-scaling-stroke; fill-rule: evenodd; stroke-linejoin: round; }
.fdo .glass { fill: rgb(196 222 238 / .55); stroke: #5d86a2; stroke-width: 1; vector-effect: non-scaling-stroke; fill-rule: evenodd; }
.fdo .culture { fill: rgb(214 170 70 / .38); }
.fdo .led { fill: var(--fd-amber); stroke: #b8661a; stroke-width: .8; vector-effect: non-scaling-stroke; }
.fdo .collar { fill: #3a3f46; }
.fdo .metal { fill: #cfd4d9; stroke: #7d8790; stroke-width: 1; vector-effect: non-scaling-stroke; fill-rule: evenodd; }
.fdo .pcb { fill: #24418c; stroke: #182d63; stroke-width: .6; vector-effect: non-scaling-stroke; fill-rule: evenodd; }
.fdo .bm-a { fill: rgb(242 157 56 / .28); }
.fdo .bm-g { fill: rgb(47 163 107 / .3); }
.fdo .bm-b { fill: rgb(59 130 196 / .3); }
.fdo .ray { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fdo .ray-a { stroke: var(--fd-amber); }
.fdo .ray-g { stroke: var(--fd-green); }
.fdo .ray-b { stroke: var(--fd-blue); }
.fdo .fib { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fdo .shrink { fill: rgb(40 44 50 / .16); stroke: #2b2e33; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.fdo .floor { fill: #f1f3f5; stroke: #b7c0c8; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; fill-rule: evenodd; }
.fdo .glow { fill: rgb(242 157 56 / .35); }
.fdo .fib-a { stroke: var(--fd-amber); }
.fdo .fib-g { stroke: var(--fd-green); }
.fdo .fib-b { stroke: var(--fd-blue); }
.fdo .tip { stroke: #fff; stroke-width: .8; vector-effect: non-scaling-stroke; }
.fdo .tip-g { fill: var(--fd-green); }
.fdo .tip-b { fill: var(--fd-blue); }

/* words */
.fdo .lbl { font-size: 4.3px; font-weight: 560; fill: var(--fd-ink); letter-spacing: .005em; }
.fdo .pct { font-size: 3.5px; font-weight: 700; }
.fdo .pct-g { fill: #1f7a4d; }
.fdo .pct-b { fill: #2a64a0; }
.fdo .ldr { fill: none; stroke: rgb(29 29 31 / .5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fdo .ldr-dot { fill: var(--fd-ink); }
.fdo__svg--tall .lbl { font-size: 6px; }
.fdo--slim .fdo__svg--wide .lbl { font-size: 3.4px; }
.fdo--slim .fdo__svg--tall .lbl { font-size: 4.5px; }

/* the Pro's three regions: a band over the drawing and a segment of the bar; hover or focus lights both */
.fdo .rg { cursor: default; outline: none; }
.fdo .rg-band { fill: rgb(63 90 102 / 0); pointer-events: all; transition: fill .2s; }
.fdo .rg-bar { fill: #c7d5dc; transition: fill .2s; }
.fdo .rg-t { font-size: 4px; font-weight: 600; fill: var(--fd-ink-2); }
.fdo .rg-mm { font-size: 3.6px; font-weight: 500; fill: var(--fd-ink-3); }
.fdo .rg-n { font-size: 6.5px; font-weight: 700; fill: var(--fd-slate); }
.fdo .rg:hover .rg-band, .fdo .rg:focus .rg-band, .fdo .rg:focus-visible .rg-band { fill: rgb(63 90 102 / .09); }
.fdo .rg:hover .rg-bar, .fdo .rg:focus .rg-bar { fill: var(--fd-slate); }
.fdo .rg:hover .rg-t, .fdo .rg:focus .rg-t { fill: var(--fd-ink); }
.fdo .rg:focus-visible .rg-bar { stroke: #23684a; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* the regions as a list: only with the tall drawing, where the bar carries numbers */
.fdo__regions { display: none; list-style: none; margin: 10px 0 0; padding: 0; counter-reset: rg; font-size: 14px; color: var(--fd-ink-3); }
.fdo__regions li { counter-increment: rg; display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
.fdo__regions li::before {
  content: counter(rg);
  flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--fd-slate);
  transform: translateY(2px);
}
.fdo__regions b { color: var(--fd-ink); font-weight: 600; }
@media (max-width: 640px) { .fdo__regions { display: block; } }
.fdo:has(.fdo__regions li.rg1:hover) .rg1 .rg-band,
.fdo:has(.fdo__regions li.rg2:hover) .rg2 .rg-band,
.fdo:has(.fdo__regions li.rg3:hover) .rg3 .rg-band { fill: rgb(63 90 102 / .09); }
.fdo:has(.fdo__regions li.rg1:hover) .rg1 .rg-bar,
.fdo:has(.fdo__regions li.rg2:hover) .rg2 .rg-bar,
.fdo:has(.fdo__regions li.rg3:hover) .rg3 .rg-bar { fill: var(--fd-slate); }

/* the colour key under each drawing */
.fdo__key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 2px 0; font-size: 13px; color: var(--fd-ink-3); }
.fdo__key span { display: inline-flex; align-items: center; gap: 7px; }
.fdo__key span::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: currentColor; }
.fdo__key .k-a::before { background: var(--fd-amber); }
.fdo__key .k-g::before { background: var(--fd-green); }
.fdo__key .k-b::before { background: var(--fd-blue); }
.fdo figcaption, .fsz figcaption { margin-top: 8px; }

/* ------------------------------------------------------- size comparison */
.fsz__media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #c9cacb;
  container-type: inline-size;
}
.fsz__media img { display: block; width: 100%; height: auto; }
.fsz__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fsz__lines .dim { fill: none; stroke: #1f5f45; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.fsz__lines .ext { fill: none; stroke: rgb(31 95 69 / .55); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.fsz__lines .tick { fill: none; stroke: #1f5f45; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.fsz__lab {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 2px 7px;
  border-radius: 6px;
  background: rgb(255 255 255 / .82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: clamp(10.5px, 1.9cqw, 13.5px);
  font-weight: 650;
  line-height: 1.25;
  color: #1f5f45;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fsz__names { position: relative; height: 1.5em; margin: 10px 0 0; container-type: inline-size; }
.fsz__name {
  position: absolute;
  top: 0;
  transform: translate(-50%, 0);
  text-align: center;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--fd-ink);
  white-space: nowrap;
}
.fsz__name span { display: block; font-size: 12.5px; font-weight: 500; color: var(--fd-ink-3); }
.fsz__lab--fp { font-weight: 600; }
.fsz__name span { display: none; }
/* narrow: the footprint goes into words under each name; its lines stay, its numbers go */
@container (max-width: 560px) {
  .fsz__lab--fp { display: none; }
}
@media (max-width: 640px) {
  .fsz__lab--fp { display: none; }
  .fsz__names { height: 3em; }
  .fsz__name { font-size: 13.5px; white-space: normal; width: 46%; }
  .fsz__name span { display: block; font-size: 11.5px; line-height: 1.3; }
}

/* W6 R2 (17 Oct 2026, REVIEW-visual.md)
   V4: the drawing lets the pointer through to the region under it (the caption says "Hover a region") */
.fdo__svg > :not(.rg) { pointer-events: none; }

/* V12: style.css's `.sec p` / `.sec li` (1.05rem, 1.8 leading, 64ch) outranked the legend and the phone region list */
.doc .sec p.fdo__key { margin: 10px 2px 0; max-width: none; font-size: 13px; line-height: 1.4; color: var(--fd-ink-3, #6e6e73); }
.doc .sec .fdo__regions li { font-size: 14px; line-height: 1.45; }