/* Shared page dimensions, based on the main pay calculator.
   Loaded after legacy page CSS so Astro-scoped templates use the same system. */
:root {
  --page-heading: clamp(30px, 4vw, 46px);
  --page-top: 34px;
  --page-gap: 24px;
  --panel-padding: 26px;
  --panel-heading: 1.3rem;
  --field-label: .88rem;
  --result-size: clamp(34px, 5vw, 52px);
}

#main .shell { max-width: var(--maxw); }
#main > article.shell, #main > .notfound { padding-block: var(--page-top) 24px; }
#main .home-hero, #main .tools-hero { padding-block: var(--page-top) 22px; }
#main h1 { font-size: var(--page-heading); line-height: 1.13; letter-spacing: -.035em; margin: 0 0 14px; max-width: none; }
#main > article > .eyebrow, #main .home-hero > .eyebrow, #main .tools-hero > .eyebrow { margin: 0 0 8px; }
#main .crumbs { font-size: .8rem; margin: 0 0 14px; }
#main .lede, #main > article > .answer { font-size: 1.05rem; line-height: 1.55; color: var(--muted); max-width: 78ch; }
#main .home-hero .lede, #main .tools-hero .lede { margin: 0 0 10px; }
#main > article > .answer { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 22px; }
#main > article > :is(p, ul, ol):not(.answer):not(.pill-row):not(.cta),
#main .tools-content > :is(p, ul, ol), #main .prose > section > :is(p, ul, ol) { max-width: 78ch; }
#main .tools-content { padding-block: 32px 40px; }

/* Calculator input and result columns share the homepage proportions. */
#main :is(.home-grid, .tools-grid, .calc-wrap) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--page-gap); align-items: start; }
#main :is(.home-grid, .tools-grid, .calc-wrap) > *, #main .mini > * { min-width: 0; }
#main .card { padding: var(--panel-padding); border-radius: var(--radius); }
#main :is(.calc-form, .tools-card, .mini) h2 { font-size: var(--panel-heading); line-height: 1.2; margin: 0 0 14px; }
#main :is(.home-grid, .tools-grid, .calc-wrap) .headline,
#main .tools-result, #main .mini-headline { font-size: var(--result-size); line-height: 1.2; letter-spacing: -.035em; font-weight: 400; font-family: var(--mono); margin: 5px 0; overflow-wrap: anywhere; }
#main .headline-sub, #main .mini-sub { font-size: .87rem; color: var(--muted); }

/* Compact embedded-on-page calculators keep the same form/result relationship. */
#main .mini { max-width: none; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); column-gap: var(--page-gap); margin-block: 24px; }
#main .mini > h2 { grid-column: 1 / -1; }
#main .mini > .mini-form { grid-column: 1; grid-row: 2; margin: 0; }
#main .mini > .mini-out { grid-column: 2; grid-row: 2; border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 24px; }
#main .mini > :is(.mini-link, .actions, .copy-fallback, .hint) { grid-column: 1 / -1; }

#main .field { display: block; margin: 14px 0; }
#main .field > span, #main .tools-card label { font-size: var(--field-label); font-weight: 400; line-height: 1.5; }
#main .field > span { margin-bottom: 7px; }
#main .tools-card label { margin: 14px 0; }
#main .input-money { border: 1px solid var(--line); border-radius: 9px; background: var(--bg); padding: 0 12px; gap: 8px; min-width: 0; }
#main :is(.calc-form, .mini-form, .tools-card) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
#main :is(.calc-form, .mini-form, .tools-card) select { width: 100%; height: 46px; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background-color: var(--bg); font: 400 1rem var(--sans); }
#main .input-money input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]) { height: 44px; min-height: 44px; padding: 10px 0; border: 0; background: transparent; border-radius: 0; font-weight: 650; }
#main .home-grid #income { font-size: 1.35rem; font-weight: 650; }
#main :is(.calc-form, .mini-form, .tools-card) input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; accent-color: #91bd30; }
#main .toggle { font-size: var(--field-label); gap: 10px; line-height: 1.5; }
#main .hint { font-size: .79rem; line-height: 1.55; color: var(--muted); margin: 9px 0; }
#main :is(input, select):focus-visible { outline: 2px solid #8ebf30; outline-offset: 2px; }
#main .planner-layout fieldset { margin-block: 18px; }

#main :is(.breakdown, .tools-table, .mini-table) { font-size: .88rem; border-collapse: collapse; }
#main :is(.breakdown, .tools-table, .mini-table) :is(th, td) { padding-block: 11px; }
#main :is(.breakdown, .tools-table, .mini-table) .total-row > * { font-size: inherit; font-weight: 750; }
#main :is(.results, .tools-card, .mini) .eyebrow { font-size: .75rem; }
#main .tools-note { font-size: .79rem; line-height: 1.55; }
#main :is(.action, .planner-actions button) { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--ink); background: transparent; font: 400 .8rem var(--sans); min-height: 42px; }
#main :is(.tools-card > button, .copy-embed, .btn) { border-radius: 9px; min-height: 46px; padding: 10px 18px; font-size: .88rem; background: var(--btn-bg); color: var(--btn-fg); }
#main .btn-ghost { background: transparent; color: var(--ink); }
#main .segmented { gap: 3px; border-radius: 9px; padding: 4px; background: var(--bg); margin: 18px 0; }
#main .seg { border-radius: 7px; min-height: 40px; padding: 10px 4px; font: 400 .78rem var(--sans); }
#main .seg.is-active { background: var(--bg-elev); box-shadow: 0 0 0 1px var(--line); }

@media (max-width: 700px) {
  :root { --page-heading: 30px; --page-top: 20px; --page-gap: 16px; --panel-padding: 18px; --panel-heading: 1.1rem; --field-label: .8rem; --result-size: 36px; }
  #main .shell { padding-inline: 16px; }
  #main h1 { margin-bottom: 10px; }
  #main .home-hero, #main .tools-hero { padding-bottom: 18px; }
  #main .lede, #main > article > .answer { font-size: .91rem; line-height: 1.45; }
  #main > article > .eyebrow, #main .home-hero > .eyebrow, #main .tools-hero > .eyebrow { font-size: .64rem; }
  #main :is(.home-grid, .tools-grid, .calc-wrap, .mini) { grid-template-columns: minmax(0, 1fr); }
  #main .mini > .mini-form, #main .mini > .mini-out { grid-column: 1; grid-row: auto; }
  #main .mini > .mini-out { border-left: 0; border-top: 1px solid var(--line); padding: 16px 0 0; margin-top: 16px; }
  #main .field, #main .tools-card label { margin-block: 10px; }
  #main :is(.breakdown, .tools-table, .mini-table) { font-size: .8rem; }
  #main .tools-content { padding-top: 24px; }
}

/* The standalone embed retains its host-friendly compact outer width. */
.embed-body #main .tools-card { max-width: 680px; }
.embed-body #main h1 { font-size: 26px; }
@media print {
  #main .shell { max-width: none; padding: 0; }
  #main :is(.home-grid, .tools-grid, .calc-wrap, .mini) { display: block; }
  #main .mini > .mini-out { border: 0; padding: 0; }
  #main .mini-form { display: none; }
  #main h1 { font-size: 28px; }
  #main :is(.headline, .tools-result, .mini-headline) { font-size: 32px; }
}