/*
 * The job pages (/wallpaper-calculator/, /tile-calculator/, /skirting-board-calculator/): the plain explanation
 * that sits under the planner. The prose measure, the disclosures and the meta text are the site's own; only what
 * is new is here. Same tokens, no shadows, no sticky elements, phone first.
 * How the design system applies: design-system/buildbatch/pages/job-and-comparison-pages.md.
 */
/* The tile page's one line about wall and floor tiles, between the lead and the planner. */
.job-note { margin: var(--space-xs) 0 var(--space-md); }

/*
 * This file is linked before site.css and app.css (the head slot comes first), so where a rule here must beat one of
 * theirs it names the parent as well, to be more specific rather than later.
 * The numbered steps reuse the round counters of .steps-overview; the prose rule for list items would add a second gap.
 */
.steps-overview.job-steps { margin: var(--space-md) 0 0; gap: var(--space-smd); }
.prose .job-steps li { margin-top: 0; padding-top: 0.125rem; }

/* The worked example. A table wider than the screen scrolls inside its own frame, never the page. */
.job-table { margin: var(--space-md) 0 0; overflow-x: auto; background: var(--color-card); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius); }
.job-table:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; }
.job-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.job-table caption { padding: var(--space-smd) var(--space-md); text-align: left; color: var(--color-muted-foreground); }
.job-table th, .job-table td { padding: var(--space-sm) var(--space-smd); border-top: var(--border-thin) solid var(--color-border); vertical-align: baseline; }
.job-table thead th { background: var(--color-muted); font-weight: 600; text-align: right; }
.job-table thead th:first-child, .job-table tbody th { text-align: left; }
.job-table tbody th { font-weight: 400; }
/* A figure keeps its unit on one line; a list of figures may wrap, in balanced lines, on a narrow screen. */
.job-table td { text-align: right; white-space: nowrap; }
.job-table td.job-table__list { white-space: normal; text-wrap: balance; }
/* The answer is the loudest row: heading type, a graphite edge above it and the stone fill. */
.job-table .job-table__answer th, .job-table .job-table__answer td { background: var(--color-muted); border-top: var(--border-control) solid var(--color-primary); }
.job-table .job-table__answer th { font-weight: 600; }
.job-table .job-table__answer td { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; line-height: 1.15; }
.job-table__answer strong { font-weight: inherit; }
@media (min-width: 40rem) {
  .job-table table { font-size: var(--text-base); }
  .job-table .job-table__answer td { font-size: var(--text-xl); }
}

/* Related guides: each link is a 44px tap target, so the list items need no gap of their own. */
.job-links { padding: 0; list-style: none; }
.prose .job-links li { margin-top: 0; }
.job-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* The one honest line at the foot of the page. */
.job-honest { max-width: 42rem; margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--border-thin) solid var(--color-border); }