/* Tool page layout (ui-layout, 12 October 2026; visual QA audit A3, A4, A6, A16, A18).
   Loaded on tool pages after result-card.css. Tokens only (assets/tokens.css). */

/* A3. The band under both panels (assets/tool-layout.js moves the result's tail here): what the
   result assumes and its sources, the scenario compare, the planning milestone, feedback, More help.
   Each block is its own card, as it no longer sits inside the result card. The band is one column of
   full-width rows at every width (tool-sequence, 20 October 2026): two columns put "Was this useful?"
   beside the result's own detail, before the parent had read it. */
body[data-tool] main .result-tail{margin:var(--space-block) 0 0}
body[data-tool] main .result-tail[hidden]{display:none}
body[data-tool] main .result-tail>*{margin:0}
body[data-tool] main .result-tail>*+*{margin-top:var(--space-block)}
body[data-tool] main .result-tail>:is(.result-details,.assumptions-wrap,details.assumptions,.scenario-compare,p.note,p.data-meta,.result-born-early){padding:var(--space-4) var(--space-5);border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
body[data-tool] main .result-tail>:is(details.assumptions,.assumptions-wrap){padding-top:var(--space-2)}body[data-tool] main .result-tail>.assumptions-wrap>details.assumptions{margin:0;padding:0;border:0}
body[data-tool] main .result-tail>.result-details[hidden]{display:none}
body[data-tool] main .result-tail>.result-details[data-stale]{border-style:dashed}
body[data-tool] main .result-tail>.result-details>:first-child{margin-top:0}
body[data-tool] main .result-tail>.result-details>:last-child{margin-bottom:0}
body[data-tool] main .result-tail>.scenario-compare>h2:first-child{margin-top:0}
body[data-tool] main .result-tail>.related[aria-label="Calculator guide"]{display:none}
body[data-tool] main .result-tail>.result-details>.result-details-label{margin:0 0 var(--space-2)}
/* A full-width row is up to 1080px wide: a table in it keeps to the 45rem reading width (A4), so a label
   and its amount never sit 700px apart. */
body[data-tool] main .result-tail table{max-width:45rem}

/* Stacked tools on a desktop (P1-001, V-01, visible-tools lane, 13 October 2026): the page keeps to
   one 760px reading column, centred, as below 75em, so the form, the result, the band under it, What
   next and the questions share one measure, and the hero lines up with them (its band still runs
   full width). The band is one column there, so a lone "Before you rely on this" card spans it.
   The rem term lets the column grow with a larger browser font size (root font 200%). */
@media(min-width:75em){
 html body[data-tool]:has(.tool-workspace.is-stacked) main{max-width:max(calc(760px + 2 * 48px),53.5rem)}
}
/* In the 760px column a long block takes the whole row rather than half of it beside a short one: a
   tick list in the form (milestone checker) and each child's card (our family year). */
body[data-tool] main .tool-workspace.is-stacked .input-panel .grid>fieldset{grid-column:1/-1}
body[data-tool] main .tool-workspace.is-stacked .fy-children{grid-template-columns:minmax(0,1fr)}
body[data-tool] main .tool-workspace.is-stacked .fy-children :is(p,li>p){max-width:60ch}
/* A small note in the 760px column keeps to about 75 characters a line, as in the band (tool-sequence):
   the form's hints and the result's notes ran to 95 to 115 there. 60ch of this font is about 75. */
body[data-tool] main .tool-workspace.is-stacked :is(.input-panel,.result-panel) p.small{max-inline-size:60ch}
/* A card in the band can run the full column; its text keeps to about 75 characters a line. A note
   that is itself the card keeps its full width and takes the spare room as right padding. */
body[data-tool] main .result-tail :is(p,li){max-width:60ch}
body[data-tool] main .result-tail>p.note{max-width:none;padding-right:max(var(--space-5),calc(100% - 60ch - var(--space-5)))}
/* "Jump to your result" is a button, not a page-wide bar. */
@media(min-width:561px){
 body[data-tool] main .tool-workspace.is-stacked .result-jump{width:auto;min-width:16rem}
}

/* A4. Stacked tools (and the log tables beside them): a table keeps to a reading width of 45rem
   (720px), so a label and its value never sit 500 to 900px apart across the page. Each header cell
   takes its column's alignment (tool-layout.js), so "Date" sits over the dates. */
body[data-tool]:has(.tool-workspace.is-stacked) main .split-table{max-width:45rem}
/* A18: dates never wrap (tool-layout.js marks them), and the checklist's "When" column ("20 wks
   before", then its date) keeps each line whole beside the task. */
main table .cell-date{white-space:nowrap}
body[data-tool]:has(.tool-workspace.is-stacked) main .split-table>caption{text-align:left}
@media(min-width:481px){body[data-tool="confinement-checklist"] main #cc-results .split-table td:last-child{white-space:nowrap;padding-left:var(--space-4)}}

/* A6. Phones: a table with a header row (tool-layout.js labels its cells) reads as one small card per
   row, with each value beside its column name, instead of being squeezed or cut off at the card edge. */
@media(max-width:480px){
 main table.has-cell-labels,main table.has-cell-labels>tbody,main table.has-cell-labels>tbody>tr,main table.has-cell-labels>tbody>tr>:is(td,th){display:block;width:auto}
 main table.has-cell-labels>caption{display:block;width:auto;text-align:left}
 main table.has-cell-labels>thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
 /* A header with a "?" tip stays on screen as one key line above the cards, so its tip can be reached. */
 main table.has-cell-labels>thead:has(.info-tip),main table.has-cell-labels>thead:has(.info-tip)>tr{position:static;display:flex;flex-wrap:wrap;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;gap:2px var(--space-3)}
 main table.has-cell-labels>thead:has(.info-tip)>tr>th{display:inline-block;max-width:100%;padding:0 8px var(--space-2) 0;border:0;text-align:left!important;font-size:.875rem}
 main table.has-cell-labels>tbody>tr{padding:var(--space-2) 0;border-bottom:2px dashed var(--hair)}
 main table.has-cell-labels>tbody>tr:last-child{border-bottom:0}
 main table.has-cell-labels>tbody>tr>:is(td,th){display:flow-root;padding:2px 0;border:0;text-align:right}
 main table.has-cell-labels>tbody>tr>:is(td,th):first-child{display:block;text-align:left;font-size:1rem;font-weight:800;color:var(--ink);text-transform:none;letter-spacing:normal;padding-bottom:4px}
 main table.has-cell-labels>tbody>tr>:is(td,th).cell-long:not(:first-child){text-align:left}
 main table.has-cell-labels>tbody>tr>.cell-long[data-label]:not(:first-child)::before{float:none;display:block;max-width:none}
 main table.has-cell-labels>tbody>tr>:is(td,th)[data-label]:not(:first-child)::before{content:attr(data-label);float:left;max-width:55%;margin-right:var(--space-3);text-align:left;font-weight:600;color:var(--muted)}
 main .table-wrap:has(>table.has-cell-labels){overflow-x:visible}
}

/* A16. Phones: the first screen shows the tool. The hero keeps the stage strip, the question, the
   tool's name, the lead and the guide link, with less air; the breadcrumb and page date are left to wider screens,
   as the stage strip under it links to the same stage page and Home is in the tab bar. */
@media(max-width:560px){
 body[data-tool] main>.breadcrumb{display:none}
 body[data-tool] main .intro{margin-bottom:var(--space-3);padding-top:12px;padding-bottom:12px}
 body[data-tool] main .intro h1.tool-question{margin:8px 0 4px;font-size:1.75rem;line-height:1.12}
 body[data-tool] main .intro .tool-official-name{margin:2px 0 8px;font-size:.8125rem}
 body[data-tool] main .intro>p:not(.tool-official-name):not(.tool-guide-top):not(.path-strip){margin:0 0 8px;font-size:.9375rem;line-height:1.45}
 body[data-tool] main .intro .tool-guide-top{margin:0 0 4px}
 /* The page date waits for wider screens; each official figure keeps its own D038 line (source,
    period, last checked) in the result. */
 body[data-tool] main .intro .updated{display:none}
 body[data-tool] main .input-panel>.coach-hint{align-items:center;gap:8px;margin-bottom:8px;padding:2px 2px 2px 10px}
 body[data-tool] main .input-panel>.coach-hint p{font-size:.8125rem;line-height:1.3}
 body[data-tool] main .intro .guide-health-note,body[data-tool] main>.sick-note{margin-block:0 var(--space-3);padding:8px 12px;font-size:.875rem;line-height:1.4}
 body[data-tool] main :is(.intro .guide-health-note,>.sick-note) :is(p,strong,a){font-size:inherit;line-height:inherit}
 body[data-tool] main :is(.intro .guide-health-note,>.sick-note)>*{margin-block:0}
}
/* First screen (first-screen, 21 October 2026, from the screenshot review of all 48 tools): on a
   phone the tool's first Step 1 control shows whole above the cookie notice and the tab bar on a
   first visit. Same copy, less height: a slimmer stage strip, a smaller question and lead, compact
   notes, and tighter space down to the first field (tests/first-screen.browser-suite.js). */
@media(max-width:480px){
 body[data-tool] main .intro{margin-bottom:8px;padding-top:8px;padding-bottom:8px}
 body[data-tool] main .intro .path-strip{gap:0 10px;padding:0 12px 0 4px;font-size:.8125rem}
 body[data-tool] main .intro .path-strip-icon{width:24px;height:24px;padding:4px}
 body[data-tool] main .intro h1.tool-question{margin:8px 0 2px;font-size:1.5rem;line-height:1.12}
 body[data-tool] main .intro .tool-official-name{margin:0 0 4px;font-size:.75rem;line-height:1.3}
 body[data-tool] main .intro>p:not(.tool-official-name):not(.tool-guide-top):not(.path-strip){margin:0 0 2px;font-size:.875rem;line-height:1.4}
 body[data-tool] main .intro .tool-guide-top{margin:0;font-size:.875rem;line-height:1.3}
 body[data-tool] main .intro .guide-health-note,body[data-tool] main>.sick-note{margin-block:4px 6px;padding:5px 10px;font-size:.8125rem;line-height:1.35}
 body[data-tool] main>.sick-note{margin-block:0 8px}
 body[data-tool] main>.sick-note p{margin:0;font-size:inherit;line-height:inherit}
 body[data-tool] main>.sick-note p a{display:inline;min-height:0;padding-block:0}
 /* Health tools already carry the clinician and sick-child notes above the form (D033): the
    first-visit tip gives way on a phone, so the first field still shows on the first screen. */
 body[data-tool]:has(main .intro .guide-health-note,main>.sick-note) main .input-panel>.coach-hint{display:none}
 body[data-tool] main .input-panel{padding-top:12px;padding-bottom:16px}
 body[data-tool] main .input-panel>.coach-hint .coach-hint-close{margin:0}
 body[data-tool] main .input-panel>.tool-step{margin-bottom:6px}
 body[data-tool] main .input-panel>h2{margin:0 0 6px;font-size:1.125rem}
 body[data-tool] main .input-panel>.form-required-note{margin:0 0 6px}
 body[data-tool] main .input-panel :is(h2,.form-required-note)+.grid,body[data-tool] main .input-panel>:is(h2,.form-required-note)+div>.grid:first-child,body[data-tool] main .input-panel>div>h2+.grid{margin-top:8px}
}
/* At 150% text the stage strip stays one row: its icon and the Next link (the same step is the
   "What next" card under the result) give way, as does the guide link (it is in "What next" too);
   the page date waits for wider screens. */
@media(max-width:560px){
 html[data-text-size="3"] body[data-tool] main .intro .path-strip{flex-wrap:nowrap}
 html[data-text-size="3"] body[data-tool] main .intro :is(.path-strip-icon,.path-strip-next,.updated,.tool-guide-top:not(.tool-compare-top)){display:none}
}
/* A 320px phone at 150% (or a 360px phone at 125% browser zoom, P0-13) has a 170px column: the stage
   name and "Step 9 of 13" take two rows rather than push the page sideways. */
@media(max-width:21.25em){html[data-text-size="3"] body[data-tool] main .intro .path-strip{flex-wrap:wrap}}
/* From A+ 130% the Next link keeps to "Next →" at every width (a tablet at 150% has a phone's column);
   the question it names is the "What next" card under the result. */
html:is([data-text-size="2"],[data-text-size="3"]) body[data-tool] main .intro .path-strip-q{display:none}

/* A18 and the timeline pattern (assets/date-timeline.js): the vaccination tracker, the due date
   timeline, school years from birth and our family year. Each item leads with its date (never
   wrapped) and how far away it is; the next item is one card; past items fold under a count; quiet
   items (check-ups beside jabs) step back. Keeps to a reading width. */
.date-timeline{max-width:40rem;margin:var(--space-4) 0;padding:0;list-style:none}
.date-timeline.is-earlier{margin:0 0 var(--space-2)}
.dt-item,.dt-fold{border-bottom:2px dashed var(--hair)}
.dt-item{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:2px var(--space-4);padding:var(--space-3) 0}
.dt-item:last-child,.date-timeline.is-earlier>.dt-item:last-child{border-bottom:0}
.dt-when{margin:0;white-space:nowrap;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.4}
.dt-rel{display:block;font-size:.875rem;font-weight:600;color:var(--muted)}
.dt-body{min-width:0}
.dt-body>*{margin:0}
.dt-body>*+*{margin-top:4px}
.dt-title{font-weight:800}
.dt-item.is-next{margin:var(--space-2) calc(-1 * var(--space-4));padding:var(--space-4);border:3px solid var(--outline);border-radius:var(--radius);background:var(--tile-butter);color:var(--ink);box-shadow:var(--shadow-sm)}
.dt-item.is-next .dt-rel{color:var(--ink)}
.dt-item.is-past .dt-when{color:var(--muted)}
.dt-item.is-quiet .dt-title{font-weight:700}
.dt-item.is-quiet .dt-when{font-weight:700}
.dt-fold>details>summary{display:flex;align-items:center;min-height:44px;font-weight:800;cursor:pointer}
@media(max-width:480px){
 .dt-item{grid-template-columns:minmax(0,1fr)}
 /* Large text: the date stays whole; "in about 4 years" takes the next line whole, and a label
    wider than the card ("now, until 10 Nov 2026" at 200%) wraps inside it rather than spilling. */
 .dt-when{white-space:normal}
 .dt-date{white-space:nowrap;margin-right:var(--space-1)}
 .dt-rel{display:inline-block;max-width:100%}
}
/* The tile's "(in N days)" sits with the date, a size down; the notes under the one-line answer
   (the subsidy note, a request to tick past visits) are their own quieter lines. */
.result-panel .headline :is(.headline-date,.headline-rel){white-space:nowrap}
.result-panel .headline .headline-rel{font-size:.6em}
.result-panel .headline .headline-note{display:block;margin-top:6px;font-size:.875rem;font-weight:600}
/* Vaccination ticks: one pill-sized row each under the visit. */
.vx-timeline .vx-given{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:700}
.vx-timeline .vx-given input{margin:0;flex:none}
.vx-timeline .vx-missed-tick{font-weight:600}
.fy-deadlines .date-timeline{margin:0}
.fy-deadlines .date-timeline li{padding-left:0;border-left:0}
.fy-deadlines .dt-item:not(.is-next){padding-block:var(--space-2)}

/* Sleep and feed log (Part B 1): three labelled groups (Feed, Sleep, Nappy), each a row of pill
   buttons that wraps as a whole row, never three lines of one pill. The log keeps to 32rem. */
body[data-tool] .sl-actions{display:grid;gap:var(--space-4);margin:var(--space-3) 0 var(--space-2)}
body[data-tool] .sl-group>*{margin:0}
body[data-tool] .sl-group-label{font-weight:800;margin-bottom:6px}
body[data-tool] .sl-buttons{display:flex;flex-wrap:wrap;gap:8px}
body[data-tool] .sl-buttons .btn{flex:0 0 auto;min-height:48px;white-space:nowrap}
body[data-tool] .sl-group .small{margin-top:6px}
body[data-tool] #sl-store-status:empty{display:none}
body[data-tool] main .sl-entries{max-width:32rem}
body[data-tool] main .sl-entries td:last-child{text-align:right}
body[data-tool] main .sl-entries[hidden],body[data-tool] #sl-results .stat-row[hidden]{display:none}
@media(min-width:48em){body[data-tool] .sl-actions{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);align-items:flex-start}body[data-tool] .sl-group{flex:0 1 auto;min-width:0}}
body[data-tool] main table.sl-entries tr>:is(td,th):nth-child(2){text-align:left}
/* A form at least 40rem wide (a tablet or the 760px desktop column) puts Feed, Sleep and Nappy in one
   row of three, the sleep hint wrapping under its button, so Nappy is never left alone on a second row. */
body[data-tool="sleep-feed-log"] main #sl-log{container:sl-buttons/inline-size}
@container sl-buttons (min-width:40rem){
 body[data-tool="sleep-feed-log"] .sl-actions{display:grid;grid-template-columns:max-content minmax(8.5rem,1fr) max-content;gap:var(--space-4) var(--space-5)}
}
/* A small phone, or a phone at 150% (P0-13): the Delete column pushed the page to 340px and cut the
   button to "De". When the log is narrower than 17.5rem at the zoomed size (a container query, so it
   follows the A+ setting), each entry stacks: its time and entry on one line, then a full-width Delete. */
body[data-tool="sleep-feed-log"] main #sl-results{container:sl-log/inline-size}
@container sl-log (max-width:17.49rem){
 body[data-tool="sleep-feed-log"] main table.sl-entries>thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
 body[data-tool="sleep-feed-log"] main table.sl-entries>tbody>tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--space-3);align-items:baseline;padding:var(--space-2) 0;border-bottom:2px dashed var(--hair)}
 body[data-tool="sleep-feed-log"] main table.sl-entries>tbody>tr:last-child{border-bottom:0}
 body[data-tool="sleep-feed-log"] main table.sl-entries>tbody>tr>td{display:block;padding:0;border:0;text-align:left;min-width:0}
 body[data-tool="sleep-feed-log"] main table.sl-entries>tbody>tr>td:first-child{white-space:nowrap;font-weight:800}
 body[data-tool="sleep-feed-log"] main table.sl-entries>tbody>tr>td:last-child{grid-column:1/-1;text-align:left}
 body[data-tool="sleep-feed-log"] main table.sl-entries>tbody>tr>td:last-child>.btn{width:100%;margin:0}
}
/* The log's own actions (copy, export, import, clear): whole pills that wrap as pills. */
body[data-tool="sleep-feed-log"] main .results>.share-actions{display:flex;flex-wrap:wrap;gap:8px}
body[data-tool="sleep-feed-log"] main .results>.share-actions .btn{flex:1 1 auto;margin:0;white-space:nowrap;justify-content:center}
body[data-tool] .sl-log-buttons{margin:0;padding:0;border:0;min-width:0}
body[data-tool] .sl-log-buttons>legend{padding:0;margin-bottom:var(--space-2);font-weight:800}

/* Part B: stacked tools keep Save and Share to a button row, not a page-wide bar (school years);
   the clinician note in a tool hero keeps to the width of its text (due date); a school's
   distance stays on one line beside its name (school finder). */
body[data-tool] main .tool-workspace.is-stacked .result-panel>:is(.result-actions,.result-quick){max-width:30rem}
body[data-tool] main .intro .guide-health-note{max-width:44rem}
@media(min-width:481px){body[data-tool="school-finder"] main #sf-r-list td:last-child{white-space:nowrap}}

/* Large text on desktops and tablets (UI and UX ledger P0-08, lane l2-large-text, 13 October 2026).
   The A+ control zooms main to 130% or 150%, but the 75em two-panel rule reads the window, so at
   1280px the form kept a 330px column and its two-column grid 130px fields: labels spilled, selects
   read "Born 202…". From A+ 130% the form and the result stack, as they do below 75em (the result is
   not pinned, and the form's own button shows again). The form is a container, so its fields take
   one column whenever the form itself is narrower than 35rem at the zoomed size (a tablet at 150%). */
html:is([data-text-size="2"],[data-text-size="3"]) body[data-tool] main .tool-workspace:not(.is-stacked){display:block}
html:is([data-text-size="2"],[data-text-size="3"]) body[data-tool] main .tool-workspace:not(.is-stacked)>.input-panel{margin-bottom:var(--space-block)}
html:is([data-text-size="2"],[data-text-size="3"]) body[data-tool] main .result-column.is-sticky{position:static}
html:is([data-text-size="2"],[data-text-size="3"]) body[data-tool] main .tool-workspace:not(.is-stacked) .result-column .result-panel{padding-top:var(--space-card)}
html:is([data-text-size="2"],[data-text-size="3"]) body[data-tool].is-live-tool main .tool-workspace:not(.is-stacked) #run-tool{display:inline-flex}
html[data-text-size] body[data-tool] main .tool-workspace>.input-panel{container:tool-form/inline-size}
@container tool-form (max-width:34.99rem){
 html[data-text-size] body[data-tool] main .input-panel .grid{grid-template-columns:minmax(0,1fr)}
}

/* Visual routine builder (tool-sequence, 20 October 2026): the routine's own items lead with their time
   and picture and carry no "1. 2. 3." numbers, so the page's Step 1, 2 and 3 are the only steps. */
body[data-tool="visual-routine-builder"] main :is(.rb-steps,.rb-chart){margin:var(--space-3) 0;padding:0;list-style:none}
body[data-tool="visual-routine-builder"] main .rb-steps>li+li{margin-top:var(--space-3)}
body[data-tool="visual-routine-builder"] main .rb-steps legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
body[data-tool="visual-routine-builder"] main .rb-steps legend>img{flex:none}
body[data-tool="visual-routine-builder"] main .rb-steps .rb-at{font-variant-numeric:tabular-nums;white-space:nowrap}
body[data-tool="visual-routine-builder"] main .rb-steps .rb-at:empty{display:none}
body[data-tool="visual-routine-builder"] main .rb-chart{max-width:40rem}
/* Each item is a wrapping row: the time and the picture stay together on the first line, and the words
   take the rest of it, or drop to their own line when a phone at a large text size leaves too little
   room beside them (a long word still breaks rather than spill out of the card). */
body[data-tool="visual-routine-builder"] main .rb-chart>li{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:center;margin:0;padding:var(--space-2) 0;border-bottom:2px dashed var(--hair)}
body[data-tool="visual-routine-builder"] main .rb-chart>li:last-child{border-bottom:0}
body[data-tool="visual-routine-builder"] main .rb-chart-at{flex:0 0 4.75rem;font-variant-numeric:tabular-nums;white-space:nowrap}
body[data-tool="visual-routine-builder"] main .rb-chart>li>img{display:block;flex:none}
body[data-tool="visual-routine-builder"] main .rb-chart-what{flex:1 1 9rem;min-width:0;overflow-wrap:anywhere}
/* S1 six-choice planner: MOE's dates fold under one line above the score (first-screen, 21 Oct 2026). */
body[data-tool] main .s1-dates-box{margin:0 0 12px;padding:2px 14px}
body[data-tool] main .s1-dates-box>p{padding-bottom:10px}
.s1-dates-box>summary{display:flex;align-items:center;min-height:44px;padding:0;font-weight:800;font-size:.9375rem;line-height:1.3;cursor:pointer}
.s1-dates-box>p{margin:6px 0 0}