/* The calculators (assets/js/tools/*.js), on top of the kit in post.css (.tool, .field, .input, .seg, .result).
   This file adds the head with the cm/in switch, the result's lines, the checks list and the diagrams. The diagrams
   are drawn at their own width in px (kit.js diagram()), so their 12 px labels stay 12 px on a phone. Colour: ink,
   soft greys, and one amber for the thing the tool sizes (the rug, the picture, the screen, the sofa). */

.tool { --amber: #F2A93B; --amber-tint: rgb(242 169 59 / 0.22); }
.tool fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.tool legend { padding: 0; margin-bottom: 8px; }
.tool .row { align-items: end; }
.tool .row.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool .row.three, .tool .row.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .tool .row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tool .row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tool-sub { margin-bottom: -8px; color: var(--muted); font: 500 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.tool-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.seg.seg-sm span { padding: 7px 14px; font-size: 13px; }
/* On a phone the segments share the full width and may wrap to two lines. */
@media (max-width: 559px) {
  .tool .field .seg { display: grid; width: 100%; }
  .tool .field .seg span { padding: 10px 6px; font-size: 14px; white-space: normal; line-height: 1.2; }
}
.tool [hidden] { display: none !important; }

/* The result: one big answer, then short lines. */
.prose .tool .result-lines, .prose .tool .checks { padding: 0; }
.prose .tool .result-lines > li + li, .prose .tool .checks > li + li { margin-top: 0; }
.prose .tool .checks > li::before { content: none; }
.result-lines { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; color: rgb(255 255 255 / 0.76); text-wrap: pretty; }
.result-lines li { position: relative; padding-left: 16px; }
.prose .tool .result-lines > li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; background: rgb(255 255 255 / 0.4); }
.result-lines li.key { color: #FFF; }
.prose .tool .result-lines > li.key::before { background: var(--amber); }
.result-value small { margin-left: 6px; }

/* Checks (sofa fit): one row per test, a mark, the test and the margin in cm. */
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; border-radius: 20px; overflow: hidden; }
.checks li { display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 4px 12px; padding: 14px 18px; background: #FFF; font-size: 15px; line-height: 1.4; }
.checks .mark { font: 600 14px/1 var(--mono); }
.checks .ok .mark { color: var(--good); }
.checks .tight .mark { color: #B86E00; }
.checks .no .mark, .checks .no b { color: var(--ink); }
.checks .na { color: var(--soft); }
.checks b { font-weight: 500; }
.checks small { grid-column: 2 / -1; font-size: 13.5px; color: var(--muted); }
.checks .by { font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }

/* The live diagram: a white card inside the tinted tool. */
.prose .tool .tool-plan { margin: 0; padding: 10px; border-radius: 20px; background: #FFF; }
.tool-svg { width: 100%; min-height: 120px; }
.prose .tool .tool-svg svg { width: 100%; height: auto; max-height: none; }
.prose .tool .tool-plan figcaption { margin: 2px 8px 6px; font-size: 13px; text-align: left; }
.tool-error { color: var(--muted); }

/* Drawing classes, shared by the live diagrams and the pages' still figures. */
.d-room { fill: #FFF; stroke: var(--ink, #151514); stroke-width: 2; }
.d-wall { fill: #E7E7E4; }
.d-floor { stroke: var(--ink, #151514); stroke-width: 2; }
.d-rug { fill: rgb(242 169 59 / 0.22); stroke: #F2A93B; stroke-width: 1.5; }
.d-amber { fill: rgb(242 169 59 / 0.22); stroke: #F2A93B; stroke-width: 1.5; }
.d-amber-solid { fill: #F2A93B; }
.d-furn { fill: #FFF; stroke: var(--ink, #151514); stroke-width: 1.3; }
.d-grey { fill: #ECECE9; stroke: #8E8E88; stroke-width: 1; }
.d-in { stroke: #8E8E88; stroke-width: 1; fill: none; }
.d-line { stroke: var(--ink, #151514); stroke-width: 1.3; fill: none; }
.d-sight { stroke: #F2A93B; stroke-width: 1.3; fill: none; stroke-dasharray: 4 4; }
.d-guide { stroke: #8E8E88; stroke-width: 1; fill: none; stroke-dasharray: 3 4; }
.d-leg { fill: #FFF; stroke: var(--ink, #151514); stroke-width: 1.2; }
.d-leg.on { fill: var(--ink, #151514); }
.d-dim { stroke: #8E8E88; stroke-width: 1; }
.d-t { font: 500 12px/1 var(--font, system-ui); fill: #6B6B66; font-variant-numeric: tabular-nums; }
.d-t.d-ink, .d-rugname { fill: var(--ink, #151514); }
.d-t.d-big { font-size: 13px; fill: var(--ink, #151514); }
.d-t.d-bad { fill: var(--ink, #151514); font-weight: 700; }
.d-halo { paint-order: stroke; stroke: #FFF; stroke-width: 4px; stroke-linejoin: round; }

/* The pages' still figures: small multiples in a grid, each with its HTML caption. */
.prose .figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: 2em; }
.prose .figs figure { margin: 0; padding: 12px 12px 14px; border-radius: 20px; background: var(--surface); }
.prose .figs svg { width: 100%; height: auto; }
.prose .figs figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.4; }
.prose .figs figcaption b { display: block; color: var(--ink); font-weight: 500; }

/* "Use this from an AI assistant" under the editorial notes (tools/site.mjs): one quiet line until it is opened. */
.agent-use { margin-top: 28px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.agent-use summary { cursor: pointer; font: 500 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.agent-use[open] summary { margin-bottom: 10px; }
.prose .agent-use p { margin: 6px 0 0; }
.prose .agent-use a { color: var(--muted); word-break: break-all; }
.agent-use code { font: 13px var(--mono); }