/* Planner tools: Material Design 3 behavior on the SMP tokens (src/styles/tokens). Tokens only, no literal colors.

   LAYOUT (ToolShell): main.tool is ONE flat grid so page print rules like ".tool > *:not(.pn-print)" keep working.
   Children, in order: header.tool-head, the page's own slot content, div.tool-rail-col > aside.tool-rail (note + send form),
   then the full-width .tool-full sections (FAQ, keep reading, sources).
   - Under 1180px everything stacks in one column.
   - From 1180px, .tool.has-rail is two columns: wide main column + 300px rail. The rail spans many rows (row-gap is 0 and spacing is
     margin-bottom, so the empty spanned rows cost nothing); .tool-full sections start below it.
   - Inside the slot, .tool-grid.two puts inputs and result side by side (tools.js makes the shorter one sticky).
   - .tool-row is the utility for a row of secondary cards (2 or 3 across). */

/* The accent hues are fixed values, never theme tokens, so a tool's colour is the same in playful, dark, light and plain (Stan 11-10). */
/* ---- Accent colours: work on ANY element (the hub cards carry their tool's colour) ----
   The dark, light and plain themes turn every --smp-fill-* token grey, so the tool hues are kept here once, as --tp-* values copied
   from the playful theme and the raw palette. --ta is the visible accent (band, tags). --ta-wash is unused now (no page tint, Stan 11-09); --ta-soft is a
   barely-there tint for boxes so text always sits on a near-neutral ground. --ta-strong fills selected chips and filled buttons and
   always has 4.5:1 against --smp-bg (dark in light themes, light in the dark theme). */
:root { --tool-band: 6px; --tp-sky: #BFD4E2; --tp-moss: #A8C0A6; --tp-coral: #D9775C; --tp-sea: #4E8496; --tp-sand: #8A7F7B; --tp-navy: #5C6B8A; --tp-plum: #4F4B7D; --tp-clay: #D2846D; --tp-clay3: #F0B4A2; --tp-warm6: #6D615E; --tp-lav: #E2DFFF; --tp-stone6: #5F5E59; }
[data-accent] { --ta-base: var(--tp-sky); --ta: var(--ta-base); --ta-wash: color-mix(in srgb, var(--ta) 22%, var(--smp-bg)); --ta-soft: color-mix(in srgb, var(--ta) 7%, var(--smp-bg-rail)); --ta-strong: color-mix(in srgb, var(--ta) 34%, var(--smp-text)); }
:root[data-theme="dark"] [data-accent] { --ta-wash: color-mix(in srgb, var(--ta) 14%, var(--smp-bg)); }
[data-accent="sky"] { --ta-base: var(--tp-sky); }
[data-accent="moss"] { --ta-base: var(--tp-moss); }
[data-accent="coral"] { --ta-base: var(--tp-coral); }
[data-accent="plum"] { --ta-base: var(--tp-plum); }
[data-accent="sea"] { --ta-base: var(--tp-sea); }
[data-accent="sand"] { --ta-base: var(--tp-sand); }
[data-accent="navy"] { --ta-base: var(--tp-navy); }
[data-accent="clay"] { --ta-base: var(--tp-clay); }
[data-accent="rose"] { --ta-base: color-mix(in srgb, var(--tp-coral) 55%, var(--tp-plum)); }
[data-accent="olive"] { --ta-base: color-mix(in srgb, var(--tp-moss) 60%, var(--tp-warm6)); }
[data-accent="lavender"] { --ta-base: color-mix(in srgb, var(--tp-plum) 45%, var(--tp-lav)); }
[data-accent="terracotta"] { --ta-base: color-mix(in srgb, var(--tp-clay) 60%, var(--smp-clay-700)); }
[data-accent="mint"] { --ta-base: color-mix(in srgb, var(--tp-moss) 55%, var(--tp-sea)); }
[data-accent="steel"] { --ta-base: color-mix(in srgb, var(--tp-sky) 55%, var(--smp-cool-800)); }
[data-accent="gold"] { --ta-base: color-mix(in srgb, var(--tp-sand) 45%, var(--tp-clay3)); }
[data-accent="ink"] { --ta-base: var(--tp-stone6); }
/* Fallback so a .card outside any [data-accent] still has a colour */
:root { --ta: var(--tp-sky); --ta-wash: color-mix(in srgb, var(--ta) 22%, var(--smp-bg)); --ta-soft: color-mix(in srgb, var(--ta) 7%, var(--smp-bg-rail)); --ta-strong: color-mix(in srgb, var(--ta) 34%, var(--smp-text)); }

/* ---- Page frame ---- */
main.tool.wrap { max-width: 1240px; box-sizing: border-box; padding-inline: clamp(18px, 4vw, 40px); }
.tool {
  --tool-gap: 28px; --tool-fs: 18px; --tool-lh: 1.65;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; align-content: start;
  padding-block: var(--smp-page-top) clamp(48px, 8vw, 96px);
  font-size: var(--tool-fs); line-height: var(--tool-lh);
}
.tool > * { margin-block: 0 var(--tool-gap); min-width: 0; }
.tool > :last-child { margin-bottom: 0; }
.tool h1 { font-family: var(--smp-font-display); font-size: var(--smp-display-sm); line-height: var(--smp-display-sm-lh); text-wrap: balance; margin: 0; }
.tool .lede { color: var(--smp-text-muted); font-size: var(--smp-body-lg-site, 20px); line-height: 1.55; max-width: 62ch; margin: 0; }
.tool-head { display: grid; gap: 14px; margin-bottom: 32px !important; }
.tool-head .crumb { margin: 0; }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 4px; }
.tool-actions .hint { font-size: 16px; min-height: 1.4em; }
/* Tool header with the typeset hero (ToolHero.astro): opens like a guide. Centred column, no tint, no gradient. */
.tool-head.has-hero { gap: 0; }
.tool-head.has-hero .tool-actions { margin-top: clamp(18px, 3vw, 26px); }
/* The theme's soft colour wash behind the page (theme-playful.css) is not used on tool pages: flat page colour only. */
:root[data-theme] body:has(main.tool) { background-image: none; }

/* Rail: note + send form. Stacks under the tool until there is room. */
.tool-rail { display: grid; gap: 20px; align-content: start; font-size: 16px; line-height: 1.6; }
.tool-rail .card { padding: 26px 28px; gap: 16px; }
.tool-rail .card h2 { font-size: 22px; line-height: 28px; }
.tool-rail .card.quiet { background: transparent; box-shadow: none; }
.tool-rail .ts { border: 0; padding: 0; }
.tool-rail .field input, .tool-rail .field textarea { font-size: 16px; }
@media (min-width: 1180px) {
  /* Row 1 is the head, rows 2 to 40 take the slot, row 41 is a flexible spare. The rail spans rows 2 to 41, so if the rail is taller than the
     slot the extra height lands in row 41 (not spread across the slot's own rows), and the full-width sections always start in row 42, below
     the rail. The rail's sticky range ends at the bottom of row 41, so it can never slide under the FAQ, related links or sources. */
  .tool.has-rail { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 36px; grid-template-rows: auto repeat(39, auto) minmax(0, 1fr); }
  .tool.has-rail > .tool-full { grid-row: 42; }
  .tool.has-rail > .tool-faq ~ .tool-more, .tool.has-rail > .tool-faq ~ .tool-sources, .tool.has-rail > .tool-more ~ .tool-sources { grid-row: auto; }
  .tool.has-rail > * { grid-column: 1; }
  .tool.has-rail > .tool-head { grid-column: 1 / -1; grid-row: 1; }
  .tool.has-rail > .tool-full { grid-column: 1 / -1; }
  /* The rail sits in its own column wrapper (.tool-rail-col), which spans the tool rows and stretches to them. The aside inside is the sticky
     element, so its containing block is the wrapper and it can never slide below the end of the tool area, over the FAQ. (A sticky grid item
     itself is NOT limited to its grid area in Chrome: that was the overlap.) */
  .tool.has-rail > .tool-rail-col { grid-column: 2; grid-row: 2 / span 40; align-self: stretch; margin-bottom: 0; }
}
@media (min-width: 1180px) and (min-height: 760px) {
  .tool-rail-col > .tool-rail { position: sticky; top: 112px; }
}

/* Full-width sections under the body */
.tool-full { margin-top: 20px; }
.tool-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 28px 48px; }
.tool-faq > div { display: grid; gap: 8px; align-content: start; border-top: 1px solid var(--smp-outline-variant); padding-top: 18px; }
.tool-faq h2 { font-family: var(--smp-font-display); font-size: var(--smp-title-lg); line-height: var(--smp-title-lg-lh); margin: 0; text-wrap: balance; }
.tool-faq p { margin: 0; color: var(--smp-text); }
.tool-more { display: grid; gap: 20px; }
.tool-more h2, .tool-sources h2 { font-family: var(--smp-font-display); font-size: var(--smp-title-lg); line-height: var(--smp-title-lg-lh); margin: 0; }
.tool-sources { display: grid; gap: 10px; border-top: 1px solid var(--smp-outline-variant); padding-top: 20px; }
.tool-sources .srcs, .tool-more .srcs { list-style: disc; margin: 0; padding-left: 1.2em; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 6px 36px; font-size: 16px; line-height: 1.5; }
.tool-sources .hint { font-size: 16px; }

/* ---- Grids inside the slot ---- */
.tool-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 840px) { .tool-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
/* tools.js adds .tg-stick to the shorter child of a two-column grid so it follows you down the taller one */
.tool-grid > .tg-stick { position: sticky; top: var(--tool-sticky-top, 112px); align-self: start; }
/* The shorter card of a pair that is nearly as tall stretches to the row instead, so there is no hole beneath it. */
.tool-grid > .tg-fill { align-self: stretch; }
.tool-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--tool-gap); align-items: stretch; }

/* ---- Type and spacing: same size and line height as the rest of the site (body is 18px / 1.65) ---- */
.tool :where(p, li, dd, dt, td, th, summary, label) { line-height: var(--tool-lh); }
.tool :where(p) { margin-block: 0 var(--smp-stack-para, 16px); }
.tool :where(p:last-child) { margin-bottom: 0; }
.tool :where(ul, ol) { margin-block: 0; padding-left: 1.3em; }
.tool .card :where(ul:not([class]), ol:not([class])) > li, .tool-more :where(li) { margin-bottom: var(--smp-stack-tight, 8px); }
.tool .card :where(ul:not([class]), ol:not([class])) > li:last-child { margin-bottom: 0; }
.tool :where(td, th) { padding: 10px 12px; vertical-align: top; }
.tool :where(table) { border-collapse: collapse; }

.card { background: var(--smp-bg-rail); color: var(--smp-text); border: 1px solid var(--smp-outline-variant); border-top: var(--tool-band) solid var(--ta); border-radius: var(--smp-radius-card, 16px); padding: 26px 24px; box-shadow: var(--smp-shadow-1, none); display: grid; gap: 22px; min-width: 0; align-content: start; }
@media (min-width: 840px) { .card { padding: 32px 36px; gap: 24px; } }
.card h2, .card h3 { font-family: var(--smp-font-display); font-size: 22px; line-height: 28px; margin: 0; text-wrap: balance; }
.card h3 { font-size: 18px; line-height: 24px; }
.field { display: grid; gap: 10px; }
.field > span, .field > legend, .lbl { font-family: var(--smp-font-label); font-size: 14px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--smp-text-muted); }
.field input, .field select, .field textarea { font: inherit; color: var(--smp-text); background: transparent; border: 1px solid var(--smp-outline); border-radius: var(--smp-radius-field, 8px); padding: 12px 14px; min-height: 52px; width: 100%; box-sizing: border-box; transition: border-color var(--smp-dur-standard, .2s) var(--smp-ease-standard, ease), box-shadow var(--smp-dur-standard, .2s) var(--smp-ease-standard, ease); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--smp-text); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--smp-focus-ring-width, 2px) solid var(--smp-focus-ring-color, currentColor); outline-offset: 0; border-color: var(--smp-text); }
.field textarea { min-height: 112px; resize: vertical; }
.hint { color: var(--smp-text-muted); font-size: inherit; line-height: var(--tool-lh, 1.65); margin: 0; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
/* MD3 selection chip with a state layer */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr)); gap: 10px; }
.chips > .chip { width: 100%; text-align: center; line-height: 1.25; }
.chip { position: relative; isolation: isolate; overflow: hidden; font: inherit; font-size: var(--smp-label-lg, 14px); color: var(--smp-text); background: transparent; border: 1px solid var(--smp-outline); border-radius: var(--smp-radius-sm, 8px); min-height: 48px; padding: 8px 18px; cursor: pointer; transition: background-color var(--smp-dur-standard, .2s) var(--smp-ease-standard, ease), border-color var(--smp-dur-standard, .2s) var(--smp-ease-standard, ease); }
.chip::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity var(--smp-dur-standard, .2s) var(--smp-ease-standard, ease); z-index: -1; }
.chip:hover::before { opacity: var(--smp-state-hover, .08); }
.chip:focus-visible { outline: var(--smp-focus-ring-width, 2px) solid var(--smp-focus-ring-color, currentColor); outline-offset: var(--smp-focus-ring-offset, 2px); }
.chip:focus-visible::before { opacity: var(--smp-state-focus, .1); }
.chip:active::before { opacity: var(--smp-state-pressed, .1); }
.chip[aria-pressed="true"] { background: var(--ta-strong); color: var(--smp-bg); border-color: transparent; }
.chip[aria-pressed="true"]::after { content: ""; display: inline-block; width: 6px; height: 11px; margin-left: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
/* Buttons: filled and outlined, both with state layers. .sm is the small header button (36px). */
.btn, .btn-o, .btn-ai { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--smp-font-label); font-size: 12px; line-height: 1.2; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; border: 0; border-radius: var(--smp-radius-full, 9999px); padding: var(--smp-pad-btn-y, 14px) var(--smp-space-6, 24px); min-height: 48px; cursor: pointer; }
.btn.sm, .btn-o.sm, .btn-ai.sm { min-height: 44px; padding: 6px 16px; font-size: 11px; letter-spacing: .08em; }
.btn { background: var(--ta-strong); color: var(--smp-bg); }
.btn-ai { background: var(--smp-action); color: var(--smp-on-action); box-shadow: var(--smp-shadow-1, none); font-weight: 700; }
.btn-ai:focus-visible { outline-color: var(--smp-text); }
:root[data-theme="plain"] .btn-ai { background: #0645ad; color: #fff; }
.btn-o { background: transparent; color: var(--smp-text); box-shadow: inset 0 0 0 1px var(--smp-outline); }
.btn::before, .btn-o::before, .btn-ai::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity var(--smp-dur-standard, .2s) var(--smp-ease-standard, ease); z-index: -1; }
.btn:hover::before, .btn-o:hover::before, .btn-ai:hover::before { opacity: var(--smp-state-hover, .08); }
.btn:focus-visible, .btn-o:focus-visible, .btn-ai:focus-visible { outline: var(--smp-focus-ring-width, 2px) solid var(--smp-focus-ring-color, currentColor); outline-offset: var(--smp-focus-ring-offset, 2px); }
.btn:active::before, .btn-o:active::before, .btn-ai:active::before { opacity: var(--smp-state-pressed, .1); }
.btn[disabled] { opacity: var(--smp-state-disabled-content, .38); cursor: not-allowed; }
.row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
/* Result panel updates live; a short emphasized fade marks a change */
.result { transition: opacity var(--smp-dur-emphasized, .3s) var(--smp-ease-emphasized, ease); }
.result.pulse { animation: smp-pulse var(--smp-dur-emphasized, .4s) var(--smp-ease-emphasized, ease); }
@keyframes smp-pulse { from { opacity: .55; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tag { display: inline-flex; font-family: var(--smp-font-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--smp-radius-full, 9999px); background: var(--ta-soft); color: var(--smp-text); border: 1px solid var(--ta); }
.tag.warn { background: var(--smp-error-container); color: var(--smp-on-error-container); }
.meta { color: var(--smp-text-muted); font-size: 16px; line-height: 1.55; }
.meta a, .tool a:not(.btn):not(.btn-o):not(.btn-ai) { color: var(--smp-text); }
.srcs { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--smp-text-muted); font-size: 16px; line-height: 1.5; }
.ts { border-top: 1px solid var(--smp-outline-variant); padding-top: 24px; }
.ts-done { padding: 16px; border-radius: var(--smp-radius-card, 16px); background: var(--ta-soft); color: var(--smp-text); border: 1px solid var(--ta); }
.sr { position: absolute; left: -9999px; }
/* ---- QA pass 2026-11-09 (shared fixes so every page benefits) ---- */
/* Sentence-size tokens: pages use --smp-body-sm / --smp-body-md for real copy, and the base values (12px / 14px) read cramped next to the
   site's 18px body. Scoped to the tools so nothing else on the site changes. Warning boxes stay neutral with a coloured edge. */
.tool { --smp-text-muted: color-mix(in srgb, var(--smp-text) 72%, var(--tp-stone6)); --smp-body-sm: 15px; --smp-body-sm-lh: 24px; --smp-body-md: 16px; --smp-body-md-lh: 26px; --smp-error-container: var(--smp-bg-rail); --smp-on-error-container: var(--smp-text); }
.tag.warn, .tool .ros-pill.warn, .tool .rb-errors { border: 1px solid var(--smp-error); }
.tool .card .dc-note, .tool .vf-msg, .tool .ros-pill { background: var(--ta-soft); color: var(--smp-text); border: 1px solid var(--ta); }
.tool .tag { font-size: 12px; }
/* Inputs and results get equal width; narrow side-by-side pairs of fields wrap instead of overlapping (date and time fields need ~150px). */
@media (min-width: 840px) { .tool-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tool :is(.ros-pair, .hd-trio, .hd-duo, .ap-grid3, .sir-pair, .gp-pair, .cp-pair, .pn-two, .vs-two, .rb-two, .sl-pair) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.field input[type="date"], .field input[type="time"] { padding-inline: 10px; min-width: 0; }
/* Rows of secondary cards: cards in a row are equal height, and a lone last card spans the row (2 columns in the main column from 1180px
   with the rail, or under 1050px) so there is never a half-empty row. */
main.tool :is(.tool-row, .dc-row, .pt-row, .cp-more, .pn-more, .pf-more, .rb-row, .sir-more, .gp-three) { align-items: stretch; }
@media (min-width: 1180px), (max-width: 1050px) {
  .tool :is(.tool-row, .dc-row, .pt-row, .cp-more, .pn-more, .pf-more, .rb-row, .sir-more, .gp-three) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* FAQ: two across on desktop, so four questions make a tidy 2 by 2 */
.tool-faq { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }

/* The timeline result sits in a half-width card, so its date column stacks above each group instead of squeezing the task text. */
.tool .tool-grid.two .pt-group { grid-template-columns: minmax(0, 1fr); }
/* A lone last FAQ item spans the row. */
@media (min-width: 1180px), (max-width: 1050px) { .tool-faq > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.tool .sl-tag { min-height: 44px; }
/* Plain view (gear 1) narrows the page to a text column, so the rail and the side-by-side grids would overlap. Stack everything. */
:root[data-theme="plain"] .tool.has-rail { grid-template-columns: minmax(0, 1fr); }
:root[data-theme="plain"] .tool.has-rail > .tool-rail-col { grid-column: 1; grid-row: auto; }
:root[data-theme="plain"] .tool-rail-col > .tool-rail { position: static; }
:root[data-theme="plain"] .tool-grid.two, :root[data-theme="plain"] .tool-grid.two.sl-grid { grid-template-columns: minmax(0, 1fr); }
:root[data-theme="plain"] .tool-grid > .tg-stick { position: static; }
:root[data-theme="plain"] .tool :is(.tool-row, .dc-row, .pt-row, .cp-more, .pn-more, .pf-more, .rb-row, .sir-more, .gp-three, .tool-faq) { grid-template-columns: minmax(0, 1fr); }

/* ---- Layout round 2026-11-09 (Stan: staggered cards, dead space, bare disclosures, stacked buttons, overlap, Keep reading cards) ---- */
/* One set of column tracks and one gap for every row: the input/result pair and every row of secondary cards use two equal columns and the
   same 28px gap from 840px, so card edges line up from the top of the tool to the bottom. A lone last card spans the row. */
.tool-grid, main.tool :is(.tool-row, .dc-row, .pt-row, .cp-more, .pn-more, .pf-more, .rb-row, .sir-more, .gp-three) { gap: var(--tool-gap); }
@media (min-width: 840px) {
  main.tool :is(.tool-row, .dc-row, .pt-row, .cp-more, .pn-more, .pf-more, .rb-row, .sir-more, .gp-three) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.tool :is(.tool-row, .dc-row, .pt-row, .cp-more, .pn-more, .pf-more, .rb-row, .sir-more, .gp-three) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.tool-grid > * { margin-top: 0; }
/* The shot list page sets its own 1 : 1.15 split in a container query; the pair uses the same two equal tracks as every other tool. */
@container sl (min-width: 720px) and (max-width: 1039px) { main.tool .tool-grid.two.sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Button rows: Print, Copy and the rest sit in one row and wrap only when they must. Buttons that are direct children of a card are grouped too. */
.tool .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tool .card > :is(.btn, .btn-o, .btn-ai) { justify-self: start; }
/* Disclosures (<details>): every summary has a chevron and reads as something to press. */
.tool details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 8px 16px; border: 1px solid var(--smp-outline); border-radius: var(--smp-radius-full, 9999px); color: var(--smp-text); font-weight: 600; transition: background-color var(--smp-dur-standard, .2s) var(--smp-ease-standard, ease); }
.tool details > summary::-webkit-details-marker { display: none; }
.tool details > summary::after { content: ""; flex: none; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform var(--smp-dur-standard, .2s) var(--smp-ease-standard, ease); }
.tool details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.tool details > summary:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.tool details > summary:focus-visible { outline: var(--smp-focus-ring-width, 2px) solid var(--smp-focus-ring-color, currentColor); outline-offset: var(--smp-focus-ring-offset, 2px); }
.tool details[open] > summary { margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .tool details > summary, .tool details > summary::after { transition: none; } }
/* Keep reading: cards, three across on desktop, two on tablet, one on a phone, all the same size. */
.rc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; grid-template-columns: minmax(0, 1fr); gap: var(--tool-gap); }
@media (min-width: 560px) { .rc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .rc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rc-list > li { display: grid; margin: 0; min-width: 0; }
.tool .rc { display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; height: 100%; padding: 16px 16px 22px; text-decoration: none; color: var(--smp-text); background: color-mix(in srgb, var(--ta) 7%, var(--smp-bg-rail)); border: 1px solid var(--smp-outline-variant); border-top: var(--tool-band) solid var(--ta); border-radius: var(--smp-radius-card, 16px); transition: box-shadow var(--smp-dur-standard, .2s) var(--smp-ease-standard, ease), translate var(--smp-dur-standard, .2s) var(--smp-ease-standard, ease); }
.tool .rc:hover { box-shadow: var(--smp-elevation-2, 0 4px 14px rgba(0, 0, 0, .14)); translate: 0 -2px; }
.tool .rc:focus-visible { outline: var(--smp-focus-ring-width, 2px) solid var(--smp-focus-ring-color, currentColor); outline-offset: 3px; }
.rc-top { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 8px; box-sizing: border-box; border-radius: var(--smp-radius-md, 12px); }
.rc-tool .rc-top { background: color-mix(in srgb, var(--ta) 18%, var(--smp-bg-rail)); }
.rc-badge { display: grid; place-items: center; width: 72px; aspect-ratio: 1; border-radius: 50%; color: var(--smp-text); background: color-mix(in srgb, var(--ta) 42%, var(--smp-bg-rail)); box-shadow: inset 0 0 0 2px var(--ta); }
.rc-badge svg { width: 56%; height: 56%; display: block; }
.rc-tag { position: absolute; top: 12px; right: 0; padding: 5px 12px 5px 14px; border-radius: 999px 0 0 999px; background: var(--smp-action); color: var(--smp-on-action); font-family: var(--smp-font-label); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1.2; }
:root[data-theme="plain"] .rc-tag { background: #0645ad; color: #fff; }
.rc-pic .pic, .rc-pic picture { display: block; width: 100%; height: 100%; }
.rc-pic .pic img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.rc-t { font-family: var(--smp-font-display); font-size: 19px; line-height: 26px; text-wrap: balance; }
.rc-s { color: var(--smp-text-muted); font-size: 15px; line-height: 1.5; }
.rc-text { justify-content: center; }
:root[data-theme="plain"] .rc-list { grid-template-columns: minmax(0, 1fr); }
:root[data-theme="plain"] .tool .rc { background: none; border: 0; border-top: 0; border-radius: 0; padding: 4px 0; height: auto; box-shadow: none; translate: none; }
:root[data-theme="plain"] .tool .rc-top { display: none; }
:root[data-theme="plain"] .tool.has-rail { grid-template-rows: none; }
:root[data-theme="plain"] .tool.has-rail > .tool-full { grid-row: auto; }

@media (prefers-reduced-motion: reduce) { .result.pulse { animation: none; } .chip, .chip::before, .btn::before, .btn-o::before, .btn-ai::before, .field input, .field select, .field textarea { transition: none; } }

/* ---- "Spot something wrong?" feedback card (ToolShell, last block of the main column; hidden in print via .tool-noprint) ---- */
.tool-feedback { padding: 22px 24px; gap: 14px 28px; align-content: center; }
.tool-feedback .tfb-copy { display: grid; gap: 6px; }
.tool-feedback .tfb-copy p { max-width: 62ch; }
.tool-feedback .tfb-open { display: flex; }
.tool-feedback .tfb-form { display: grid; gap: 18px; max-width: 720px; }
.tool-feedback .tfb-form[hidden], .tool-feedback .tfb-open [hidden] { display: none; }
.tool-feedback .tfb-status { font-size: 16px; color: var(--smp-text); }
.tool-feedback .tfb-status:empty { display: none; }
.tool-feedback .tfb-status a { color: var(--smp-text); }
.tool-feedback .tfb-check { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font-size: 16px; line-height: 1.4; }
.tool-feedback .tfb-check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--ta-strong); }
.tool-feedback .tfb-check input:focus-visible { outline: var(--smp-focus-ring-width, 2px) solid var(--smp-focus-ring-color, currentColor); outline-offset: 3px; }
.tool-feedback .field textarea { min-height: 120px; }
@media (min-width: 840px) {
  .tool-feedback { padding: 24px 36px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .tool-feedback .tfb-form, .tool-feedback .tfb-status { grid-column: 1 / -1; }
}
@media (min-width: 1180px) { .tool.has-rail > .tool-feedback { grid-row: auto; } }
:root[data-theme="plain"] .tool-feedback { grid-template-columns: minmax(0, 1fr); }

@media print {
  /* Print hardening (Safari/WebKit, Chrome, Firefox). Only the tool's own output prints: every other child of <body>, anything fixed or sticky,
     the rail, the input cards, the buttons, FAQ, related links, sources and the site footer are removed, and html, body and main become plain
     static blocks with no grid, no height and no overflow clipping so nothing can print mid-page or force a second sheet. */
  html, body { display: block !important; position: static !important; overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: Canvas !important; color: CanvasText !important; color-scheme: light; }
  html::before, html::after, body::before, body::after { display: none !important; content: none !important; }
  body > *:not(main) { display: none !important; }
  header.bar, .skip, .parked, .shift, .rop, .lens, .plain-banner, .nav-note, dialog, nav, footer, aside, .tool-noprint, .tool-rail, .ts, .tool-faq, .tool-more, .tool-sources, .tool-head .crumb, .tool-head .tool-actions { display: none !important; }
  main.tool, main.tool.wrap { display: block !important; position: static !important; overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: none !important; grid-template-columns: none !important; }
  /* No sibling margins on main's children, so the first printed block starts at the very top of the page and nothing pads the last one. */
  main.tool > * { margin: 0 !important; }
  main.tool > .tool-head { margin-bottom: 12pt !important; }
  main.tool > :is(.card, .tool-row, .tool-grid):not(.tool-noprint) ~ :is(.card, .tool-row, .tool-grid):not(.tool-noprint) { margin-top: 12pt !important; }
  .tool-grid, .tool-grid.two, .tool-grid.two.sl-grid { display: block !important; }
  .tg-stick, .tool-grid > .tg-stick, .tool .result { position: static !important; max-height: none !important; overflow: visible !important; }
  .tool :is(li, tr, dt, dd, figure, blockquote, .card.quiet) { break-inside: avoid; page-break-inside: avoid; }
  .tool :is(h1, h2, h3, h4) { break-after: avoid; page-break-after: avoid; }
  /* The credit line sits in normal flow after the output. Its box has no height and no offset, so a full page does not grow a second sheet just for
     this line: it shows when the output leaves room under it and is cut off when the page is full. */
  main.tool::after { content: "Planning tools by Stan Murzyn Photography, stanmurzyn.com/Guides"; display: block; position: relative; top: 0; height: 0; overflow: visible; margin: 0; font-size: 8pt; line-height: 1.3; color: color-mix(in srgb, CanvasText 55%, Canvas); break-before: avoid; page-break-before: avoid; break-inside: avoid; page-break-inside: avoid; }
}

/* Keep reading: a tool card that shows the tool's own art has no tinted ground; the card itself carries the one shared top band. */
.rc-tool .rc-top.rc-pic { background: none; }
/* Plain theme: the site's plain.css strips every .card's padding, so tool text sat on the card border. Give the cards their breathing room back. */
:root[data-theme="plain"] .tool .card { padding: 20px 22px; }
@media (max-width: 560px) { :root[data-theme="plain"] .tool .card { padding: 16px 16px; } }

/* Sources: a collapsed disclosure with a small arrow (Stan 11-10). Quiet text summary, not the pill; keyboard operable (native details). */
.tool-sources { gap: 0; }
.tool .srcs-d > summary { display: flex; justify-content: flex-start; gap: 12px; padding: 4px 0; min-height: 44px; border: 0; border-radius: 0; background: none; font-family: var(--smp-font-display); font-size: var(--smp-title-lg); line-height: var(--smp-title-lg-lh); font-weight: 400; }
.tool .srcs-d > summary:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
.tool .srcs-d > summary::after { width: 7px; height: 7px; border-width: 0 1.5px 1.5px 0; }
.tool .srcs-d[open] > summary { margin-bottom: 8px; }
.tool .srcs-d > .hint { margin-bottom: 10px; }
/* One top band on every card in every tool: the hub cards (.card.hub-card) and the Keep reading cards use the same --tool-band as .card. */
.tool .card.hub-card { border-top: var(--tool-band) solid var(--ta); }