.engineering-page { margin-inline: auto; padding-bottom: 2rem; font-size: var(--font-body); line-height: 1.65; }
.engineering-breadcrumb { margin-bottom: 1rem; font-size: .875rem; color: var(--color-text-secondary); }
.engineering-intro { max-width: 900px; margin-bottom: 1.5rem; }
.engineering-eyebrow { color: var(--color-accent); font-size: var(--font-meta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.engineering-intro h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.14; margin: .5rem 0 .75rem; font-weight: 500; }
.engineering-lead { font-size: 1.0625rem; color: var(--color-text-secondary); max-width: 740px; }
.engineering-page h2 { font-size: clamp(1.5rem, 2.6vw, 1.8rem); line-height: 1.25; margin: .4rem 0 .75rem; font-weight: 500; }
.engineering-page h3 { font-size: 1.125rem; line-height: 1.4; margin: 1.1rem 0 .6rem; }
.engineering-page p { line-height: 1.65; margin-block: .65rem; }
.example-disclaimer { color: var(--color-text-secondary); font-size: var(--font-meta); }
.engineering-case { border-top: 1px solid var(--color-border); padding-top: 2rem; margin-top: 3rem; scroll-margin-top: 1.5rem; }
.case-scenario { max-width: var(--reading-width); font-size: inherit; }
.case-impression { border-left: 3px solid #9c8261; background: var(--color-surface); padding: .8rem 1rem; margin: 1rem 0; }
.engineering-page blockquote { border: 0; margin: 0; padding: 0; color: var(--color-text); font-size: 1.2rem; font-family: var(--font-serif); line-height: 1.6; }
.case-impression > p:first-child { margin-top: 0; }
.case-impression > p:last-child { margin-bottom: 0; }
.case-comparison { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 1rem 0 1.5rem; text-align: left; font-size: 1rem; line-height: 1.6; }
.case-comparison th, .case-comparison td { vertical-align: top; padding: 1rem 1.25rem; border: 1px solid var(--color-border); }
.case-comparison thead th { background: #eaf0e7; color: var(--color-accent); font-weight: 600; }
.case-comparison thead td { width: 18%; background: transparent; border: 0; }
.case-comparison tbody th { font-size: var(--font-meta); font-weight: 600; color: var(--color-text-secondary); }
.case-comparison td { background: var(--color-surface); }
.case-takeaway { max-width: 820px; }
.case-conditions { max-width: 820px; color: var(--color-text-secondary); }
.case-conditions strong { color: var(--color-text); }
.case-discussion { margin-top: 1rem; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: 4px; }
.case-discussion summary { cursor: pointer; color: var(--color-accent); font-weight: 600; }
.case-discussion[open] summary { margin-bottom: 1.2rem; }
.case-discussion blockquote { font-size: 1.0625rem; }
.case-discussion p { margin-bottom: 0; }
.case-discussion .discussion-purpose { margin: 0 0 1rem; max-width: 820px; }
.discussion-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
.discussion-cases h4 { font-family: var(--font-sans); font-size: 1rem; color: var(--color-accent); line-height: 1.5; margin: 0 0 .75rem; }
.discussion-cases section + section { border-left: 1px solid var(--color-border); padding-left: 1.5rem; }
.engineering-section { border-top: 1px solid var(--color-border); padding-top: 1.25rem; margin-top: 1.5rem; }
.hiring-template { max-width: 900px; margin: 1.25rem 0; }
.hiring-template blockquote { padding-left: 1.2rem; border-left: 3px solid var(--color-accent); font-size: 1.1rem; }
.hiring-template p { font-size: .875rem; color: var(--color-text-secondary); }
.discussion-caution { padding: .75rem 1rem; background: var(--color-surface); border-left: 3px solid var(--color-accent); max-width: 820px; }
.engineering-tool-card { display: block; padding: 2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text); text-decoration: none; max-width: 820px; }
.engineering-tool-card:hover { border-color: var(--color-accent); }
.engineering-tool-card h2 { margin-top: 1rem; }
.engineering-tool-card strong { color: var(--color-accent); }
.toolbox-collections { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.toolbox-collections a { padding: 1.2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; text-decoration: none; }
.toolbox-collections strong, .toolbox-collections span { display: block; }
.toolbox-collections span { margin-top: .4rem; color: var(--color-text-secondary); font-size: .875rem; }
.case-comparison-mobile { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
.toolbox-collections { grid-template-columns: 1fr; }
.case-comparison { display: none; }
.case-comparison-mobile { display: grid; gap: 1rem; }
.case-comparison-mobile section { border: 1px solid var(--color-border); background: var(--color-surface); padding: 1.2rem; border-radius: 4px; }
.case-comparison-mobile h4 { font-family: var(--font-sans); font-size: 1rem; color: var(--color-accent); margin: 0 0 1rem; }
.case-comparison-mobile p { font-size: 1rem; }
.case-comparison-mobile strong { display: block; font-size: var(--font-meta); margin-bottom: .4rem; }
.case-impression { padding: 1rem; }
.discussion-cases { grid-template-columns: 1fr; }
.discussion-cases section + section { border-left: 0; border-top: 1px solid var(--color-border); padding: 1.25rem 0 0; }
}

/* The central distinction gets its own full-width emphasis before the examples. */
.engineering-problem { max-width: 760px; margin-bottom: 1.5rem; }
.engineering-framework { padding: 1.25rem 1.5rem; border-left: 4px solid var(--color-accent); background: var(--color-surface); }
.engineering-framework h2 { max-width: 950px; line-height: 1.4; }
.engineering-problem > p:not(.engineering-eyebrow):not(.framework-flow) { max-width: 760px; }

.framework-flow { color: var(--color-accent); font-size: clamp(1rem, 3vw, 1.35rem); font-weight: 600; }
.framework-flow > span[aria-hidden] { margin-inline: .35rem; }
.framework-questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 1rem 0 0; }
.framework-questions > div { margin: .5rem 0; line-height: 1.6; }
.framework-questions dt { color: var(--color-accent); font-weight: 600; }
.framework-questions dd { margin: .25rem 0 0; }
.case-selector { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 0; }
.case-selector[hidden], .engineering-case[hidden] { display: none; }
.case-selector button { background: transparent; border: 1px solid var(--color-control-border); border-radius: 4px; padding: .7rem 1rem; font-size: 1rem; line-height: 1.5; }
.case-selector button[aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface); text-decoration: underline; text-underline-offset: .3em; font-weight: 600; }
.example-explorer .engineering-case { margin-top: 1rem; padding-top: 1rem; }
.discussion-link { display: inline-block; margin-top: 1rem; font-weight: 600; }
.discussion-lessons { max-width: 960px; }
.discussion-lessons h3 { display: inline; margin: 0; font-family: var(--font-sans); font-size: 1rem; }
.discussion-lessons p { display: inline; margin: 0; }
.discussion-lessons > div { margin: .75rem 0; line-height: 1.6; }

/* Keep the explanation compact while retaining readable text and touch targets. */
body#page .engineering-page.site-main { padding-top: var(--page-top); }
.engineering-page .engineering-eyebrow { margin-top: 0; margin-bottom: .45rem; }
.engineering-framework .framework-flow { margin-top: .7rem; }
.engineering-page .framework-boundary { font-size: .875rem; color: var(--color-text-secondary); }
.example-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.engineering-case > .case-scenario { margin-top: 0; }
@media (max-width: 900px) {
.engineering-framework { padding: 1rem; }
.framework-questions { grid-template-columns: 1fr; gap: .35rem; }
.example-controls { gap: .25rem .75rem; }
body#page .engineering-page.site-main { padding-top: var(--page-top); }
}

/* Decision stories retain the guide's typography and native controls. */
.engineering-tool-card + .engineering-tool-card { margin-top: 1rem; }
.decision-explorer { margin-block: 1.5rem; }
.decision-explorer fieldset { margin: 0; padding: 1rem; border: 1px solid var(--color-border); border-radius: 4px; }
.decision-explorer legend { padding-inline: .35rem; font-weight: 600; font-size: 1rem; }
.decision-explorer label { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; line-height: 1.6; }
.decision-explorer label { padding: .6rem .25rem; }
.decision-explorer input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .25rem; accent-color: var(--color-accent); }
.decision-outcome { border-left: 3px solid var(--color-accent); padding: .25rem 1rem; margin-block: 1.25rem; max-width: 900px; }
.decision-outcome h4 { font-size: 1.125rem; margin: .5rem 0; }
.decision-outcome p { font-size: 1rem; }
.decision-outcome[hidden], .decision-explorer fieldset[hidden] { display: none; }
.decision-explorer input:focus-visible, .case-discussion summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* Give the situation room to establish why the decision matters. */
.story-opening { max-width: 760px; margin-block: 1.5rem; }
.story-case .case-scenario, .story-case .story-question { max-width: 800px; }
.story-case .case-scenario + .case-scenario { margin-top: .8rem; }
.story-question { font-size: 1.0625rem; }
.story-framework { margin-top: 1.5rem; max-width: 820px; }
.story-case .decision-recommendation strong { font-weight: 600; }

.story-case .case-label { color: var(--color-text-secondary); font-size: var(--font-meta); margin: 0 0 .5rem; }
.story-case .case-title { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin: 0 0 .65rem; }
.story-ending { max-width: 820px; }

/* Sibling toolbox collections share compact navigation. */
.toolbox-collection-nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 0 0 1.5rem; font-size: 1rem; }
.toolbox-collection-nav a { text-decoration: underline; text-underline-offset: .3em; }
.toolbox-collection-nav a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 2px; }
.toolbox-collection-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
/* Case accents identify the same contrast across tables, phone cards, and wording.
   Blue and ochre identify cases; neither color encodes a candidate rating. */
.hiring-case { --case-a: #496579; --case-a-tint: #edf2f5; --case-b: #756044; --case-b-tint: #f5efe5; }
.hiring-case .case-comparison thead th:nth-child(2) { color: var(--case-a); background: var(--case-a-tint); border-top: 3px solid var(--case-a); }
.hiring-case .case-comparison thead th:nth-child(3) { color: var(--case-b); background: var(--case-b-tint); border-top: 3px solid var(--case-b); }
.hiring-case .case-comparison-mobile section:first-child { border-top: 3px solid var(--case-a); background: var(--case-a-tint); }
.hiring-case .case-comparison-mobile section:last-child { border-top: 3px solid var(--case-b); background: var(--case-b-tint); }
.hiring-case .case-comparison-mobile section:first-child h4, .hiring-case .discussion-cases section:first-child h4 { color: var(--case-a); }
.hiring-case .case-comparison-mobile section:last-child h4, .hiring-case .discussion-cases section:last-child h4 { color: var(--case-b); }
.hiring-case .discussion-cases h4 { padding-top: .6rem; border-top: 3px solid; }

.hiring-case .case-reference-0 { color: var(--case-a); }
.hiring-case .case-reference-1 { color: var(--case-b); }

.story-distinction { margin-block: 1.5rem; }
.story-distinction > p:not(.engineering-eyebrow) { max-width: 820px; }

/* Rule names state the comparison; accents track current versus proposed. */
.decision-rule-comparison { margin: 1rem 0; }
.decision-rule-comparison > div { padding: .65rem 1rem; border-left: 3px solid #496579; background: #edf2f5; margin-block: .5rem; }
.decision-rule-comparison > div + div { border-color: #756044; background: #f5efe5; }
.decision-rule-comparison dt { font-weight: 600; }
.decision-rule-comparison dd { margin: .25rem 0 0; line-height: 1.6; }

/* Keep the changing evidence and next step together, with a persistent baseline. */
.engineering-page .decision-baseline { font-size: .875rem; color: var(--color-text-secondary); margin: .85rem 0; max-width: 900px; }
.engineering-page .decision-result-title { margin: .85rem 0 .4rem; font-size: 1rem; font-family: var(--font-sans); }
.engineering-page .decision-selection { font-size: .875rem; color: var(--color-text-secondary); margin-top: 0; }
.decision-summary { margin: .5rem 0 1rem; }
.decision-summary > div { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; gap: 1rem; padding: .8rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-border); background: var(--color-surface); }
.decision-summary > div + div { border-top: 0; }
.decision-summary dt { font-weight: 600; line-height: 1.5; }
.decision-summary dd { margin: 0; line-height: 1.6; }
.decision-summary [data-changed="true"] { border-left-color: var(--color-accent); }
.decision-change-tag { display: none; font-size: var(--font-meta); font-weight: 400; margin-left: .35rem; color: var(--color-accent); }
[data-changed="true"] .decision-change-tag { display: inline; }
.decision-explanation { margin: 1rem 0; }
.decision-explanation > summary { cursor: pointer; font-weight: 600; color: var(--color-accent); }
.decision-explanation > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
@media (max-width: 900px) {
.decision-summary > div { grid-template-columns: 1fr; gap: .35rem; }
}

/* A shared entry point explains the two routes before the catalogue. */
.toolbox-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 1.5rem 0 2.5rem; }
.toolbox-paths section { padding: 1.5rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.toolbox-paths h2 { margin: .5rem 0 .75rem; font-size: 1.5rem; }
.toolbox-paths h2 a { color: var(--color-text); }
.toolbox-paths p { line-height: 1.6; margin: .75rem 0; }
.toolbox-paths section > a { display: inline-block; margin-top: .5rem; font-weight: 600; }
.toolbox-paths .toolbox-path-example { color: var(--color-text-secondary); font-size: 1rem; }
.toolbox-paths a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.toolbox-library-intro { border-top: 1px solid var(--color-border); padding-top: 1.5rem; margin-top: 1rem; }
.toolbox-library-intro p { max-width: 48rem; line-height: 1.7; }
#decision-tools { scroll-margin-top: 6rem; }
@media (max-width: 900px) {
.toolbox-paths { grid-template-columns: 1fr; gap: 1rem; }
.toolbox-paths section { padding: 1.2rem; }
}

.engineering-page .story-opening,
.engineering-page .engineering-problem, .engineering-page .case-takeaway,
.engineering-page .story-ending { max-width: var(--reading-width); }
.engineering-page p:not(.engineering-eyebrow):not(.framework-flow) { max-width: var(--reading-width); }
.case-comparison p { margin: 0; line-height: 1.65; }
.case-comparison p + p, .case-comparison-mobile p + p { margin-top: .75rem; }
.case-comparison-mobile .case-mobile-label { margin: 1.25rem 0 .4rem; font-weight: 600; color: var(--color-text-secondary); font-size: var(--font-meta); }
.case-comparison-mobile .case-mobile-label + p { margin-top: 0; }
.engineering-page .discussion-lessons p { display: block; margin: .35rem 0 0; }
.engineering-page .decision-outcome p { font-size: 1rem; }
.engineering-tool-card { max-width: none; }
.engineering-tool-card .reader-orientation { font-size: 1rem; }

/* Instructions name the navigation or premise change beside its controls. */
.example-instruction { font-size: 1rem; margin: 1rem 0 .75rem; }
.example-instruction[hidden] { display: none; }
.condition-instruction { font-size: 1rem; margin: .35rem 0 .75rem; }