/* =============================================================================
   LPA, part 3: Final Design & Specifications (17 Oct 2026)
   -----------------------------------------------------------------------------
   The photometer page's frame for a final design (../../photometer/css/final-design.css
   and its style.css), copied so the two pages can change apart:
   .fdo          a drawing panel in the optical-layout style; here the light layout
                 (3.2): the array from above beside a section through one well
   .pm-keyspecs  the specifications list beside the 3D viewer (.fd-pair, in
                 css/explode-viewer.css)
   .lpa-req      the requirement -> how-it-is-met table (3.3), the photometer's pm-req
   ol.reasons    the numbered reasons inside a fold

   One palette with the viewer: ink #1d1d1f, slate #3f5a66, leaf green #23684a.
   Green and red are the LPA's own two channels.
   ========================================================================== */

.fdo {
  --fd-ink: #1d1d1f;
  --fd-ink-2: #424245;
  --fd-ink-3: #6e6e73;
  --fd-line: rgb(29 29 31 / .1);
  --fd-green: #2fa36b;
  --fd-red: #d8402c;
  --fd-slate: #3f5a66;
  margin: 0;
}

/* ------------------------------------------------------- the drawing panel */
.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; }

/* the colour key under the 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 figcaption { margin-top: 8px; }
.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); }

/* ------------------------------------------------- 3.2 the light layout */
.lpa-lay { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(10px, 2.4vw, 26px); align-items: center; }
.lpa-lay > figure { margin: 0; }
.lpa-lay__t {
  margin: 0 0 6px; font-size: 11px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--fd-slate);
}
.doc .sec .lpa-lay p.lpa-lay__t { max-width: none; margin: 0 0 6px; font-size: 11px; line-height: 1.3; }
@media (max-width: 640px) {
  .lpa-lay { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lpa-lay__sec .fdo__svg { max-width: 330px; margin: 0 auto; }
}

/* the drawing: cut print (the black holders), glass, culture, the light */
.fdo .plate { fill: #e9edf0; stroke: #8d98a2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fdo .bore { fill: #fbfcfd; stroke: #a7b1ba; stroke-width: .8; vector-effect: non-scaling-stroke; }
.fdo .blk { fill: #34383e; stroke: #1f2226; stroke-width: .8; vector-effect: non-scaling-stroke; fill-rule: evenodd; }
.fdo .glass { fill: rgb(196 222 238 / .45); stroke: #5d86a2; stroke-width: .9; vector-effect: non-scaling-stroke; fill-rule: evenodd; }
.fdo .glass.dim { fill: rgb(196 222 238 / .2); stroke: #9fb6c6; }
.fdo .culture { fill: rgb(214 170 70 / .32); }
.fdo .culture.dim { fill: rgb(214 170 70 / .14); }
.fdo .collar { fill: #8d949c; }
.fdo .leg { fill: none; stroke: #9aa2aa; stroke-width: .9; vector-effect: non-scaling-stroke; }
.fdo .led-g { fill: var(--fd-green); }
.fdo .led-r { fill: var(--fd-red); }
.fdo .led-off { fill: #c9cfd5; stroke: #9aa2aa; stroke-width: .6; vector-effect: non-scaling-stroke; }
.fdo .t1 { fill-opacity: .4; }
.fdo .t2 { fill-opacity: .68; }
.fdo .t3 { fill-opacity: 1; }
.fdo .cone { fill: rgb(47 163 107 / .22); }
.fdo .ray { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fdo .ray-g { stroke: var(--fd-green); }
.fdo .ray-s { stroke: var(--fd-green); stroke-dasharray: 3 2; }
.fdo .stop { fill: none; stroke: #c2410c; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fdo .wire { fill: none; stroke: #7d8790; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 2; }
.fdo .fet { fill: #3a3f46; transition: fill .2s; }
.fdo .fet-tab { fill: #b9c0c7; }
.fdo .cond { fill: none; stroke: var(--fd-ink); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.fdo .brk { fill: none; stroke: rgb(29 29 31 / .45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fdo .dim { fill: none; stroke: #1f5f45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fdo .ext { fill: none; stroke: rgb(31 95 69 / .55); stroke-width: .9; vector-effect: non-scaling-stroke; stroke-dasharray: 2 2; }

/* words */
.fdo .lbl { font-size: 5.4px; font-weight: 560; fill: var(--fd-ink); letter-spacing: .005em; }
.fdo .lbl.sub { font-weight: 500; fill: var(--fd-ink-3); }
.fdo .lbl.mm { font-weight: 650; fill: #1f5f45; }
.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 .tier-t { font-size: 6px; font-weight: 650; fill: var(--fd-ink-2); }

/* a tier: its two columns and its MOSFET. Hover or focus lights all three and quiets the others */
.fdo .tier { cursor: default; outline: none; }
.fdo .tier .tb { fill: rgb(63 90 102 / 0); pointer-events: all; transition: fill .2s; }
.fdo .tier .led-g, .fdo .tier .led-r, .fdo .tier .wire { transition: opacity .2s; }
.fdo .tier:is(:hover, :focus) .tb { fill: rgb(63 90 102 / .1); }
.fdo .tier:is(:hover, :focus) .fet { fill: var(--fd-slate); }
.fdo .tier:is(:hover, :focus) .wire { stroke: var(--fd-slate); stroke-dasharray: none; }
.fdo .tier:is(:hover, :focus) .tier-t { fill: var(--fd-ink); }
.fdo .tier:focus-visible .tb { stroke: #23684a; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fdo .glow { opacity: .28; }
.lpa-lay__top:has(.tier:is(:hover, :focus)) .tier:not(:hover):not(:focus) :is(.led-g, .led-r) { opacity: .28; }
.lpa-lay__top:has(.tier:is(:hover, :focus)) .tier:not(:hover):not(:focus) .glow { opacity: .08; }
.lpa-lay__top svg > :not(.tier) { pointer-events: none; }
.fdo__key .k-g::before { background: var(--fd-green); }
.fdo__key .k-r::before { background: var(--fd-red); }
.fdo__key .k-s::before { background: repeating-linear-gradient(90deg, var(--fd-green) 0 5px, transparent 5px 8px); }
.fdo__key .k-f::before { width: 10px; height: 10px; border-radius: 2px; background: #3a3f46; }
@media (prefers-reduced-motion: reduce) { .fdo .tier *, .fdo .fet { transition: none; } }

/* ------------------------------------- 3.1 the specifications beside the viewer */
dl.pm-keyspecs { margin: 0; }
dl.pm-keyspecs > div { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); gap: .8rem; padding: .55rem 0; border-top: 1px solid #e5e5e5; }
dl.pm-keyspecs > div:last-child { border-bottom: 1px solid #e5e5e5; }
.doc dl.pm-keyspecs dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #556070; padding-top: .2rem; }
.doc dl.pm-keyspecs dd { margin: 0; font-size: .92rem; line-height: 1.5; color: #1f2933; }
.doc .pm-final__specs .folds { margin-top: 1rem; }
/* in the narrow column a fold's note goes under its title (the photometer's V14) */
.doc .pm-final__specs .fold > summary { flex-wrap: wrap; row-gap: .2rem; }
.doc .pm-final__specs .fold > summary .fold__t { flex: 1 1 100%; }
.doc .pm-final__specs .fold > summary .fold__sub { margin-left: 0; white-space: normal; }
/* the one photo of the finished instrument, under the fold */
body.doc-light[data-instrument="diopal"] .doc .pm-final__specs .frame#fig-final { max-width: 20rem; margin: 1.4rem 0 0; }
.doc .pm-final__specs .frame#fig-final .frame-img { aspect-ratio: auto; height: auto; }
.doc .pm-final__specs .frame#fig-final .frame-img img { display: block; width: 100%; height: auto; }
@media (max-width: 819px) {
  body.doc-light[data-instrument="diopal"] .doc .pm-final__specs .frame#fig-final { margin-left: auto; margin-right: auto; }
}
/* 18 Oct 2026 (the owner): the sticky model's travel ends level with this photo. js/doc.js measures the model and
   gives the pair its height (--xv-h) and its stage's (--xv-stage-h); the photo takes the full column and that height,
   its picture as tall as the stage and cropped to fill it, so at the
   end of the travel the two stand side by side with tops and bottoms level. Wide screens only: on a phone they stack. */
@media (min-width: 820px) {
  body.doc-light[data-instrument="diopal"] .doc .fd-pair--matched .pm-final__specs .frame#fig-final {
    max-width: none; height: var(--xv-h); display: flex; flex-direction: column;
  }
  .doc .fd-pair--matched .pm-final__specs .frame#fig-final .frame-img { flex: none; height: var(--xv-stage-h, auto); min-height: 0; }
  .doc .fd-pair--matched .pm-final__specs .frame#fig-final .frame-img img { height: 100%; object-fit: cover; object-position: 50% 50%; }
  .doc .fd-pair--matched .pm-final__specs .frame#fig-final figcaption { flex: none; }
}

/* ------------------------------------------------- 3.3 the requirement table */
.doc table.lpa-kv.lpa-req tbody th[scope="row"] { width: 34%; }
.doc table.lpa-kv.lpa-req td { color: var(--w-ink, #1d1d1f); }
@media (max-width: 620px) {
  .doc table.lpa-req thead { display: none; }
  .doc table.lpa-req, .doc table.lpa-req tbody { display: block; width: 100%; }
  .doc table.lpa-req tr { display: block; padding: .75rem 1rem; border-bottom: 1px solid var(--w-line, rgba(15, 19, 25, .12)); }
  .doc table.lpa-req tr:last-child { border-bottom: 0; }
  body.doc-light .doc-wrap .doc .sec .table-scroll:has(> table) > table.lpa-req tr > * { display: block; width: auto; padding: 0; border: 0; background: none; }
  .doc table.lpa-kv.lpa-req tbody th[scope="row"] { width: auto; margin-bottom: .25rem; }
}

/* --------------------------------------------------- numbered reasons in a fold */
.doc .sec ol.reasons {
  list-style: none; margin: .4rem 0 .9rem; padding: 0; counter-reset: rs; max-width: var(--w-measure, 68ch);
}
.doc .sec ol.reasons > li {
  counter-increment: rs; position: relative; padding-left: 2.4rem; margin: 0 0 1rem;
}
.doc .sec ol.reasons > li::before {
  content: counter(rs);
  position: absolute; left: 0; top: .2rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-content: center;
  border: 1.5px solid var(--w-leaf-700, #23684a);
  font: 700 .8rem/1 var(--sans); color: var(--w-leaf-900, #14402b);
}

/* ------------------------------------------------- 6.1 the costed materials list */
.doc table.mat:is(.bom-list, .prints) :is(td, th).num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc table.mat:is(.bom-list, .prints) tbody.bom-sub td { font-weight: 700; color: var(--w-leaf-900, #14402b); border-top: 1.5px solid var(--w-leaf-200, #cfe4d8); }
.doc table.mat.bom-list tbody.bom-np tr.bom-np__h th {
  padding-top: 1.1rem; text-align: left; font-family: var(--mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #6e6e73;
}
.doc table.mat.bom-list tbody.bom-np td { color: #8a9099; }
.doc table.mat.bom-list tbody.bom-np td .todo { color: #c2410c; }
@media (max-width: 700px) {
  .doc table.mat:is(.bom-list, .prints) tbody { display: block; width: 100%; }
  .doc table.mat.bom-list tbody.bom-np tr.bom-np__h th { display: block; padding: 1rem .2rem 0; }
  .doc table.mat:is(.bom-list, .prints) td:empty { display: none; }
  .doc table.mat:is(.bom-list, .prints) tbody.bom-sub td { border-top: 0; }
  /* 6.2: the part's number leads its card as a small label, the part's name is the card's title */
  .doc table.mat.prints td:first-child { font-size: .78rem; font-weight: 600; color: #6e6e73; padding-bottom: 0; }
  .doc table.mat.prints td:first-child::before { content: "Part "; }
  .doc table.mat.prints td:nth-child(2) { display: block; font-size: 1rem; font-weight: 650; color: var(--fg); padding-bottom: .25rem; }
  .doc table.mat.prints td:nth-child(2)::before { content: none; }
}

/* ------------------------------------------- References: a part with no number */
body.hwreveal .doc-wrap .doc section.part#references::before { content: none; }
.doc-nav .hwtoc__sec:has(> a[href="#references"]) .hwtoc__no { visibility: hidden; }
@media (min-width: 701px) { .doc table.mat.prints td:first-child { white-space: nowrap; width: 1%; } }
/* phones: the array drawing is ~350 px wide, so its words are set larger to stay legible */
@media (max-width: 640px) {
  .lpa-lay__top .lbl { font-size: 7.2px; letter-spacing: 0; }
  .lpa-lay__top .lbl.sub { font-size: 6.6px; }  /* 19 Oct 2026 (judging review L11): was 6.2 for both, about 6 px on a 390 px phone */
  .lpa-lay__top .tier-t { font-size: 8px; }
}