/* A contact sheet: every frame the same height, its width set by its aspect ratio. */
.ph-grid{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-4) var(--space-3)}
.ph-box{margin:0;max-width:100%}
.ph-frame{position:relative;display:block;height:clamp(6rem,16vw,10rem);max-width:100%;background:var(--bg-2)}
.ph-box svg{position:absolute;inset:0;width:100%;height:100%}
.ph-box rect{fill:none;stroke:var(--fg-dim);stroke-width:2;vector-effect:non-scaling-stroke}
.ph-box line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.ph-box figcaption{margin-top:var(--space-1);font-family:var(--font-mono);font-size:var(--step--1);color:var(--fg-dim);font-variant-numeric:tabular-nums}
.ph-lorem{color:var(--fg-dim);max-width:40rem;margin-block:var(--space-5)}
.ph-spec{border-top:1px solid var(--line)}
.ph-spec-row{display:flex;flex-direction:column;gap:var(--space-1);margin:0;padding-block:var(--space-2);border-bottom:1px solid var(--line);overflow-wrap:anywhere;line-height:1.1}
.ph-spec-label{font-family:var(--font-mono);font-size:var(--step--1);color:var(--fg-dim)}
.ph-form{display:grid;gap:var(--space-3);justify-items:start;margin-block:var(--space-5)}
.ph-form p{margin:0}
.ph-form fieldset{border:1px solid var(--line);margin:0;padding:var(--space-2) var(--space-3)}
.ph-form label{margin-inline:var(--space-2)}
.ph-form input[type=text],.ph-form select{font:inherit;color:var(--fg);background:var(--bg-2);border:1px solid var(--fg-dim);border-radius:var(--radius);padding:var(--space-2) var(--space-3);min-height:2.75rem}
.ph-form input[type=checkbox],.ph-form input[type=radio]{width:1.25rem;height:1.25rem;accent-color:var(--fg);vertical-align:middle}
.ph-checker{margin:0}
.ph-checker-swatch{height:8rem;background:repeating-conic-gradient(var(--bar-white) 0 25%,var(--fg) 0 50%) 0 0/1rem 1rem}
.ph-checker figcaption{font-size:var(--step--1);color:var(--fg-dim);margin-top:var(--space-2)}