/* Shared shell for the exploration pages. Page-specific rules stay in-page.
   Modeled on wieringa-roof/site.css: a centered wrap, generous measure, and
   viewports that take the full width they are given. */

:root {
    --bg: #fafafa;
    --panel: #ffffff;
    --ink: #222;
    --ink-soft: #555;
    --ink-faint: #888;
    --rule: #ddd;
    --accent: #457b9d;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
}

.wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 20px 64px;
}

h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -0.01em; }
h2 { margin: 0 0 24px; font-size: 19px; font-weight: normal; color: var(--ink-soft); }
h3 { margin: 30px 0 8px; font-size: 16px; font-weight: 600; }
p { max-width: 68ch; }
a { color: var(--accent); }

.eq {
    font-family: "Times New Roman", serif;
    font-size: 17px;
    text-align: center;
    background: #f0f0f0;
    border-radius: 6px;
    padding: 12px;
    margin: 16px 0;
    max-width: 68ch;
}

/* ── controls ──────────────────────────────────────────────────── */

/* Controls stay put while you scroll: dragging a slider is useless if it takes
   the picture off screen. Laid out across rather than down so a five-slider bar
   is one row and not five. */
.bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 18px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 20px 0 12px;
    font-size: 13px;
    color: var(--ink-soft);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}
.bar label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}
.bar .cap { display: flex; justify-content: space-between; gap: 12px; }
/* Checkboxes sit on the slider baseline rather than above it. */
.bar label.check {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink);
    padding-bottom: 2px;
}
.bar label.check input { margin: 0; }
.bar input[type=range] { width: 158px; display: block; }
.bar .val {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--ink-faint);
}

/* ── viewports ─────────────────────────────────────────────────── */

.viewport {
    position: relative;
    /* Its own stacking context, or the layer canvases (up to z 200) would paint
       straight over the sticky bar. */
    z-index: 0;
    width: 100%;
    /* Leave room for the bar above it, so controls and picture share a screen. */
    height: min(calc(100vh - 150px), 720px);
    min-height: 340px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
    touch-action: none;
}
.layer-canvas { position: absolute; top: 0; left: 0; }

.pair {
    display: flex;
    gap: 16px;
    margin: 20px 0 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.pair figure { margin: 0; }
.pair figcaption {
    font-size: 12px;
    color: var(--ink-faint);
    margin-top: 7px;
    text-align: center;
}
.pair .viewport { width: 460px; height: 460px; }
/* No width/height here: the panel canvas is created at its true pixel size, and
   stretching it with CSS would only blur it. */
.region-panel {
    display: block;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    cursor: crosshair;
}

/* ── the γ cluster ─────────────────────────────────────────────── */

.controls {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 12px;
}
.dial { display: flex; flex-direction: column; align-items: center; }
.dial label { font-size: 15px; font-family: "Times New Roman", serif; font-style: italic; }
.dial input[type=range] { writing-mode: vertical-lr; direction: rtl; height: 92px; width: 24px; }
.dial .value { font-family: ui-monospace, Menlo, monospace; font-size: 11px; margin-top: 3px; }
.dial.computed input[type=range] { opacity: 0.5; }
.sum-display { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink-faint); }
/* The dial the wheel last moved. Enough to find it again, not enough to shout. */
.dial.active { outline: 1px solid #bbb; outline-offset: 2px; border-radius: 3px; }
.sum-dial { align-items: stretch; width: 210px; }
.sum-dial input[type=range] { writing-mode: horizontal-tb; direction: ltr; width: 100%; height: auto; }
.sum-cap { font-size: 15px; font-family: "Times New Roman", serif; font-style: italic; }
/* Its own row, so the text cannot stretch the dials, and a reserved height so
   going from one line to two does not shift what is under it. */
.sum-note {
    flex: 1 0 100%;
    font-size: 11.5px;
    color: var(--ink-faint);
    line-height: 1.45;
    min-height: 2.9em;
    margin-top: 2px;
}

.hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 8px; }

footer {
    margin-top: 40px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--ink-faint);
}

/* ── Reticulum ─────────────────────────────────────────────────── */
.reticulum-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.reticulum {
    width: 100%;
    min-width: 170px;
    aspect-ratio: 1 / 1;
    display: block;
    overflow: visible;
    touch-action: none;      /* drags belong to the control, not the page */
    cursor: crosshair;
}
/* only the target and the labels take input; the drawing is transparent to it */
.ret-rim, .ret-axis, .ret-band, .ret-cross { pointer-events: none; }
.ret-label { pointer-events: auto; cursor: pointer; }

.ret-rim  { fill: none; stroke: #ccc; stroke-width: 0.008; }
.ret-line { stroke-width: 0.005; opacity: 0.22; }
.ret-grid { stroke-width: 0.022; stroke-linecap: round; opacity: 0.85; }
.ret-axis.live .ret-grid { stroke-width: 0.034; }
.ret-axis.dependent .ret-grid { opacity: 0.32; stroke-dasharray: 0.045 0.035; }
.ret-axis.live .ret-line { opacity: 0.5; }

/* the active gamma's full range, side to side — subordinate to the marker */
.ret-band { opacity: 0; }   /* fill is the family color, washed out */
.ret-band.on { opacity: 0.55; }
.ret-ticks { pointer-events: none; }   /* the rest is on the element: see reticulum.ts */

/* a reference mark, not a cursor */
.ret-cross-active { stroke: #444; stroke-width: 0.012; }
.ret-cross-dep    { stroke: #aaa; stroke-width: 0.012; }

.ret-label {
    font-size: 0.21px;
    font-family: "Times New Roman", serif;
    font-style: italic;
}
.ret-sub { font-size: 0.62em; font-style: normal; }
.ret-value {
    font-size: 0.115px;
    font-family: monospace;
    opacity: 0.85;
}
.ret-value.live { font-weight: bold; opacity: 1; }
.ret-label.live { font-weight: bold; }
.ret-readout { font-family: monospace; font-size: 12px; color: #666; }
.ret-readout.released { color: #bbb; font-style: italic; }
.penrose-flag { font-size: 12px; font-family: monospace; margin-left: 8px; }
.view-stats { font-size: 11px; font-family: monospace; color: #888; margin-left: 6px; }
.corr-cell { display: inline-flex; align-items: center; min-width: 118px; }
.ret-tools { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: #666; }
.ret-check { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.ret-bump { font: inherit; font-size: 11px; padding: 1px 6px; border: 1px solid #ccc;
            background: #fff; border-radius: 3px; cursor: pointer; }
.ret-bump:hover { background: #eee; }

/* ── Floating panel ────────────────────────────────────────────── */
.float-panel {
    position: fixed;
    z-index: 200;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    /* A definite width, or a fixed-position box shrink-to-fits its contents
       and the TITLE drives the layout: picking a preset renames the bar and
       the whole panel jumps wider. Jake: "Reticulum changes size (bigger)
       sometimes when I press presets." Resizing by the grip still overrides
       this inline; clearing that override comes back here rather than to
       whatever the content happens to want. */
    width: 300px;
}
.float-panel[hidden] { display: none; }
/* The resize grip: bottom-right corner, a small diagonal. */
.float-grip {
    position: absolute;
    right: 0; bottom: 0;
    width: 16px; height: 16px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 0 50%, #bbb 50% 60%, transparent 60% 75%, #bbb 75% 85%, transparent 85%);
    border-bottom-right-radius: 8px;
}

.float-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 5px 5px 11px;
    cursor: move;
    user-select: none;
    touch-action: none;          /* the bar owns the drag, not the page */
    background: #f2f2f2;
    border-bottom: 1px solid #ddd;
    border-radius: 8px 8px 0 0;
}
/* min-width: 0 so a long preset name is elided rather than pushing the bar
   wider than the panel. */
.float-bar > * { min-width: 0; }
.float-title {
    font-size: 12px;
    color: #555;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.float-extras { display: flex; gap: 4px; align-items: center; }
.float-extras:empty { display: none; }
/* The restore button, once it is in the bar: a quiet chip, not a title. */
.float-extras .ret-restore {
    font-size: 11px;
    padding: 1px 7px;
    border: 1px solid #cbd5e0;
    border-radius: 999px;
    background: #f7fafc;
    color: #4a5568;
    cursor: pointer;
    white-space: nowrap;
}
.float-extras .ret-restore:hover { background: #edf2f7; }
.float-controls { display: flex; gap: 2px; }
.float-controls button {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    line-height: 1;
    padding: 2px 5px;
}
.float-controls button:hover { color: #222; }
.float-body { padding: 10px; }
.float-panel.collapsed .float-body { display: none; }

/* ── Sigma strip ───────────────────────────────────────────────── */
.sumstrip { width: 100%; display: block; touch-action: none; }
/* The bed and its furniture are drawn OVER the target, so they have to be
   transparent to the pointer — otherwise only the thin margins take a drag,
   which is exactly how it felt. */
.ss-bed, .ss-ticks, .ss-marker, .ss-readout { pointer-events: none; }
.ss-sigma { pointer-events: auto; cursor: pointer; }
.ss-bed { fill: #ececec; }
.ss-tick { stroke: #fff; stroke-width: 0.7; }
.ss-marker { stroke: #444; stroke-width: 1.4; stroke-linecap: round; }
.sumstrip.released .ss-marker { stroke: #bbb; }
.ss-sigma {
    font-size: 8.5px;
    font-family: "Times New Roman", serif;
    fill: #555;
}
.sumstrip.released .ss-sigma { fill: #bbb; font-style: italic; }
.ss-readout { font-size: 7.5px; font-family: monospace; fill: #555; }
.ss-hit { cursor: ew-resize; }

/* Refusing a push at a released total. Not the same language as "inactive". */
.sumstrip.warn .ss-bed { fill: #f6d0d4; }
.sumstrip.warn .ss-marker { stroke: #e63946; }
.sumstrip.warn .ss-sigma, .sumstrip.warn .ss-readout { fill: #e63946; }
.reticulum[data-warn] .ret-axis.dependent .ret-grid { stroke: #e63946; opacity: 0.9; }
.reticulum[data-warn] .ret-label.dependent { fill: #e63946; }

.reopen-panel, .fold-controls {
    font: inherit;
    font-size: 12px;
    padding: 3px 9px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
}
.reopen-panel:hover, .fold-controls:hover { background: #eee; }
.folded > * { display: none; }
.folded { margin: 0; }

/* Presets — the caps and the singularity catalog, on method and grow alike. */
button.preset {
    font: inherit;
    font-size: 11px;
    padding: 2px 7px;
    margin-right: 4px;
    color: #ddd;
    background: #2a2a2e;
    border: 1px solid #444;
    border-radius: 3px;
    cursor: pointer;
}
button.preset:hover { background: #36363c; border-color: #666; }

/* Σγ off the integers: real, but not a Penrose tiling. Marked, not dimmed —
   gray text is the universal sign of a disabled control, and these are live. */
button.preset.not-penrose { border-color: #b5713f; }
button.preset.not-penrose::after { content: " *"; color: #e0894f; }
#grow-caps, #grow-hunt { gap: 4px; }

/* ── The layer panel (createPentagrid's `panel`) ─────────────────── */
.layer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    font-size: 12px;
    color: #444;
}
.layer-toggle input { margin: 0; }
/* The ribbons row: five families on one line, the fields wearing the family
   color instead of a swatch. */
.ribbon-family { gap: 2px; }
.ribbon-family .line-pick { padding: 1px 2px; }
.line-pick {
    width: 46px;
    font: inherit;
    font-size: 11px;
    padding: 1px 3px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
/* The panel reads in three sections — what you are looking at, the grid, its
   dual — so each gets a quiet heading and a rule above it. On the two-panel
   split the third section is the whole right panel, so its heading is the only
   one there and the rule above it would float: hence :not(:first-child). */
.panel-section + .panel-section { margin-top: 10px; }
.panel-section-title {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9a9aa2;
    margin: 0 0 2px;
}
.panel-section:not(:first-child) > .panel-section-title {
    border-top: 1px solid #e6e6ea;
    padding-top: 8px;
}
/* An author `display` rule beats the UA's `[hidden] { display: none }`, so a
   hidden row has to be told to go. .panel-row has display:flex, and until this
   was written exposeRows() moved nothing in a browser at all. */
.panel-row[hidden], .panel-section[hidden] { display: none; }
.row-fold { font-size: 12px; }
.row-fold summary { cursor: pointer; color: #777; outline: none; width: max-content; }
.row-fold[open] summary { color: #444; }
.row-fold[open] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* The pentaplex fold: the name pinned left, its controls in two looser lines
   beside it. Jake: "Make it a little looser. space it out over two lines. And
   nail the pentaplex text to the left side." After .row-fold[open] so the
   display rule wins at equal specificity. */
.penta-fold[open] {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
}
/* The summary is this row's LABEL: the label column's width and color, so the
   name sits at the left margin under `face shade` and the control lines start
   where every other row's controls do. */
.penta-fold summary {
    flex: 0 0 auto;
    font-size: 12px;
    color: #888;
    min-width: 62px;
    width: auto;
}
.penta-fold[open] summary { color: #666; }
.penta-fold .penta-lines { display: flex; flex-direction: column; gap: 8px; }
.penta-fold .penta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
/* The state of the patch, beside the heading of the section that draws it. */
.panel-section-state {
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
    color: #8a8a92;
}
/* ── The two control columns ──────────────────────────────────────────
   One layout, both pages. The grid's rows go in the left column and the dual's
   in the right, and they collapse to one column when there is no room for two.
   What differs is only where the picture goes: split puts a viewport in each
   column, method puts its single canvas under them. The controls are the same
   either way, which is the point — the two pages are one page in two modes, and
   the column width lives here rather than being whatever a viewport happened to
   push a `1fr` out to. */
.duo {
    --duo-col: 580px;
    display: grid;
    grid-template-columns: repeat(2, var(--duo-col));
    justify-content: center;
    gap: 0 20px;
    margin: 16px 0 8px;
    align-items: start;
}
.duo .layer-panel { align-self: start; }
@media (max-width: 1240px) {
    .duo { grid-template-columns: var(--duo-col); }
}

.panel-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin: 4px 0;
}
.panel-label {
    font-size: 12px;
    color: #888;
    min-width: 62px;
}
/* A name for the pair of switches after it, inside a row: "next-rhomb edge,
   face | kites edge, face". Without it the row carries two switches called
   edge and nothing says which is which. */
.panel-group {
    font-size: 12px;
    color: #aaa;
    margin-left: 4px;
}
.panel-group::after { content: ":"; }
/* `restore` in the preset popup: looks like a preset, is not one — it pulls the
   reticulum slot (PLAN §9.3) rather than naming a point in the catalog. Its own
   class so nothing enumerating `.preset` picks it up, and italic so the eye
   reads it as the verb it is. */
button.ret-restore {
    font: inherit;
    font-size: 11px;
    font-style: italic;
    padding: 2px 7px;
    margin-right: 4px;
    color: #ddd;
    background: #2a2a2e;
    border: 1px dashed #666;
    border-radius: 3px;
    cursor: pointer;
}
button.ret-restore:hover { background: #36363c; border-color: #8a8a8a; }
button.ret-restore[hidden] { display: none; }
/* What the copy-setup button says after you press it: the clipboard is async
   and can be refused, so the button reports rather than leaving you guessing. */
.copy-said { font-size: 11px; color: #777; margin-left: 6px; }
.settings {
    margin-top: 6px;
    font-size: 12px;
}
.settings summary {
    cursor: pointer;
    color: #777;
    outline: none;
    width: max-content;
}
.settings[open] summary { color: #444; }
.settings /* ── The two control columns ──────────────────────────────────────────
   One layout, both pages. The grid's rows go in the left column and the dual's
   in the right, and they collapse to one column when there is no room for two.
   What differs is only where the picture goes: split puts a viewport in each
   column, method puts its single canvas under them. The controls are the same
   either way, which is the point — the two pages are one page in two modes, and
   the column width lives here rather than being whatever a viewport happened to
   push a `1fr` out to. */
.duo {
    --duo-col: 580px;
    display: grid;
    grid-template-columns: repeat(2, var(--duo-col));
    justify-content: center;
    gap: 0 20px;
    margin: 16px 0 8px;
    align-items: start;
}
.duo .layer-panel { align-self: start; }
@media (max-width: 1240px) {
    .duo { grid-template-columns: var(--duo-col); }
}

/* The magnifier, created by ui/loupe.ts on any page that enables it — it was
   styled only in method's own sheet, so everywhere else it came up bare. */
.loupe {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 200;
    background: #fff;
    border: 1px solid #888;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    cursor: crosshair;
}
.panel-row { margin-left: 14px; }
.thickness { width: 110px; }
.layer-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid #aaa;
}
/* The two labeled settings — the band slider and the compute pad — dressed as
   the toggles are, so one row reads as one row. */
.band-setting, .pad-setting {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #444;
}
.band-setting input[type=range] { margin: 0; }
.pad-setting input[type=number] { font: inherit; font-size: 11px; padding: 1px 3px;
    border: 1px solid #ccc; border-radius: 3px; }

/* ── Top nav, as on wieringa-roof ──────────────────────────────────── */
nav.site {
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
    padding: 10px 20px;
    display: flex;
    gap: 18px;
    align-items: baseline;
    flex-wrap: wrap;
}
nav.site .brand { font-weight: 600; margin-right: auto; }
nav.site a { color: var(--ink-soft); text-decoration: none; font-size: 14px;
    -webkit-user-drag: none; user-drag: none; }
nav.site a[aria-current="page"] { color: var(--ink); font-weight: 600; }
nav.site a:hover { text-decoration: underline; }
/* A corner of the project rather than another page of it: set off by a rule. */
nav.site a.aside { border-left: 1px solid var(--rule); padding-left: 18px;
    font-style: italic; }

/* The readout of a named slider: fixed width and tabular digits, so a value
   changing length cannot reflow the row and move the slider under the pointer. */
.band-setting .slider-val {
    display: inline-block;
    min-width: 3.6em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The presets popup under the reticulum's tools: a wrapped row of buttons. */
.ret-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
}
.ret-presets[hidden] { display: none; }
.ret-settings { font-size: 11.5px; color: #444; }
.ret-gen { margin-top: 4px; }
.ret-lambda { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #333; min-width: 58px; }
/* The census, folded. Shut it is one word; open it is two lines of monospace
   that rewrap as the patch changes, so it carries a floor of two lines to keep
   the panel -- and the canvas under it -- from moving as you pan. */
.census-fold[open] { display: block; }
.census-fold summary { margin-bottom: 4px; }
.ve-census {
    display: block;
    font-size: 11px;
    font-family: monospace;
    color: #666;
    line-height: 1.5;
    white-space: pre-wrap;
    min-height: 3em;
}

/* ── moire.html ────────────────────────────────────────────────────────
   Two pentagrids side by side, with a switch that stacks them. */
.moire-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 16px 0 4px;
    font-size: 12px;
    color: var(--ink-faint);
}
.moire-opt { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.moire-steps { width: 42px; font-size: 12px; }
.moire-norm { width: 66px; font-size: 12px; }
.moire-note { font-family: monospace; color: #888; margin-left: auto; }
.moire-find, .moire-reset { font-size: 11px; padding: 2px 7px; cursor: pointer; }

/* Merged: both viewports in the one grid cell, at method's size, the upper
   one transparent so the lower shows through and multiplied so the overlap
   darkens. The panels keep their columns above it. */
.moire.merged .viewport {
    /* Both into the one cell: grid items that share an area overlap, which is
       the whole trick. The panels and captions keep their own columns above. */
    grid-row: 3;
    grid-column: 1 / -1;
    width: 100%;
    height: min(calc(100vh - 150px), 720px);
}
/* The figures are the grid's children -- display:contents only moves their
   contents into the grid -- so last-of-type is B. */
.moire.merged figure:last-of-type .viewport {
    background: transparent;
    mix-blend-mode: multiply;
}

/* pentaplex, next-rhomb, kites and misc flow onto one line while they are
   shut, and take a row back as soon as one is opened. `:not([hidden])` so the
   display:none that exposeRows relies on still wins -- the two selectors are
   otherwise the same weight, and source order would decide it. */
.panel-row.inline-fold:not([hidden]) {
    display: inline-flex;
    width: auto;
    vertical-align: middle;
    margin: 4px 16px 4px 0;
}
.panel-row.inline-fold.fold-open:not([hidden]) {
    display: flex;
    width: 100%;
    margin: 4px 0;
}

/* A dressing row, folded: the name alone when open, the name plus what is
   switched on when shut. Same shape as the pentaplex fold above it. */
.dress-fold[open] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.dress-fold summary { width: max-content; }
.dress-fold .dress-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* The normalization, beside the generation buttons it multiplies. */
.ret-norm { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #777; }
.ret-norm-in { width: 62px; font-size: 11px; }