.prototype-page .prototype-content { padding-top: 24px; }
.prototype-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: #91a4bf; margin: 8px 0 32px; }
.prototype-breadcrumb a { text-decoration: none; }
.prototype-intro { margin-bottom: 32px; }
/* The outer page grid already supplies the intro's horizontal gutters. */
.site-theme.tool-page:not(.flowchart-page) .container-fluid.prototype-intro { padding-inline: 0; }
.prototype-eyebrow { font-size: .65rem; letter-spacing: .16em; color: #91afd8; font-weight: 600; margin-bottom: 12px; }
.prototype-intro h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 12px; }
.prototype-intro > p:last-child { color: #a4b2c8; font-size: 1rem; max-width: 650px; line-height: 1.7; }
.prototype-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.prototype-workspace > .col-md-6 { width: 100%; }
.prototype-generator { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.prototype-panel { background: #111e33; border: 1px solid #25334b; border-radius: 14px; padding: 30px; min-width: 0; box-shadow: 0 4px 12px #0002; }
.prototype-panel h2 { font-size: 1.35rem; margin-bottom: 12px; }
.prototype-panel > p:not(.prototype-eyebrow), .prototype-note { color: #a4b2c8; font-size: .85rem; line-height: 1.7; }
.prototype-panel .form-label { display: block; margin: 22px 0 8px; font-size: .85rem; font-weight: 500; }
.prototype-panel .form-control { min-height: 46px; padding: 12px; }
.prototype-panel small { display: block; color: #91a4bf; font-size: .75rem; line-height: 1.7; margin-top: 8px; }
.prototype-panel form > .btn { width: 100%; margin-top: 26px; padding: 13px 16px; }
.prototype-panel form > .btn i { margin-left: 8px; }
.prototype-output { background: #132239; display: flex; flex-direction: column; }
.prototype-empty { text-align: center; padding: 40px 16px; color: #c8d4e6; }
.prototype-empty > i { display: block; font-size: 2rem; color: #8bb8ff; margin-bottom: 16px; }
.prototype-empty p { margin-bottom: 8px; }
.prototype-result-label { margin-top: 24px; color: #a4b2c8; }
.prototype-result { font-family: 'Inter Tight',sans-serif; font-weight: 700; font-size: clamp(2.4rem,5vw,4rem); color: #a7caff; overflow-wrap: anywhere; line-height: 1.15; }
.prototype-profit { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; border-top: 1px solid #334765; padding: 20px 0 10px; }
.prototype-profit strong { color: #8bd5c3; }
.prototype-formula { border-top: 1px solid #334765; margin-top: auto; padding-top: 22px; }
.prototype-formula > span { font-size: .62rem; letter-spacing: .14em; color: #91a4bf; }
.prototype-formula code { border: 0; background: transparent; padding: 0; font-size: .85rem; }
.prototype-formula p { font-size: .8rem; color: #a4b2c8; margin: 12px 0 0; line-height: 1.7; }
.prototype-formula p code { display: inline; }
.prototype-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.prototype-optional { margin-top: 22px; font-size: .85rem; }
.prototype-optional summary, .prototype-guide summary, .prototype-secondary summary { cursor: pointer; }
.prototype-page:has(#utm-form) #result { margin-top: 20px; border: 0 !important; background: transparent !important; }
.prototype-page:has(#utm-form) #result_text { white-space: pre; font-size: .85rem; }
.prototype-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.prototype-actions .btn { font-size: .85rem; }
.prototype-error { margin-top: 16px; color: #ffacb4; font-size: .85rem; }
.prototype-guide, .prototype-secondary { padding: 28px 0; margin-top: 36px; border-top: 1px solid #25334b; }
.prototype-guide > summary { font-family: 'Inter Tight',sans-serif; font-size: 1.3rem; font-weight: 700; }
.prototype-guide .tool-explanation { max-width: 78ch; margin-top: 28px; color: #b9c7db; }
.prototype-guide .tool-explanation h2 { font-size: 1.25rem; color: #edf3ff; }
.prototype-guide .tool-explanation h3 { color: #edf3ff; }
.prototype-related { margin: 36px 0; }
.prototype-related > h2 { font-size: 1.35rem; margin-bottom: 20px; }
.prototype-related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.prototype-related-grid > a { border: 1px solid #25334b; border-radius: 12px; padding: 24px; text-decoration: none; background: #111e33; }
.prototype-related-grid > a:hover { border-color: #55739e; }
.prototype-related-grid h3 { font-size: 1rem; color: #edf3ff; margin-top: 16px; }
.prototype-related-grid p { font-size: .8rem; color: #a4b2c8; }
.prototype-related-grid span { font-size: .8rem; }
.prototype-secondary { font-size: .9rem; }
.prototype-secondary p { color: #a4b2c8; margin-top: 20px; }
.prototype-reference { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 48px; align-items: start; }
.prototype-topics { position: sticky; top: 24px; }
.prototype-topics .form-label { font-size: .8rem; }
.prototype-topics nav { display: grid; gap: 4px; margin-top: 24px; }
.prototype-topics nav a { display: flex; justify-content: space-between; padding: 12px; text-decoration: none; border-radius: 8px; font-size: .85rem; }
.prototype-topics nav a:hover { background: #18283f; }
.prototype-topics nav span, #formula-count { color: #91a4bf; font-size: .75rem; }
#formula-count { margin: 20px 12px; }
.prototype-formula-group { scroll-margin-top: 24px; margin-bottom: 40px; }
.prototype-formula-group > h2 { font-size: 1.4rem; margin-bottom: 20px; }
.prototype-reference-item { padding: 22px 0; border-top: 1px solid #25334b; }
.prototype-reference-item > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prototype-reference-item h3 { font-size: 1.1rem; margin: 0; }
.prototype-reference-item p { font-size: .85rem; color: #a4b2c8; line-height: 1.7; margin: 12px 0; }
.prototype-reference-item code { overflow-x: auto; white-space: pre; padding: 16px; border-radius: 8px; }
.prototype-copy { border: 1px solid #334765; color: #a7caff; background: #111e33; border-radius: 6px; padding: 8px 12px; font-size: .75rem; }
.prototype-page [hidden] { display: none !important; }
.prototype-ad { margin: 36px 0; }
@media (max-width: 767px) {
 .prototype-workspace, .prototype-generator, .prototype-reference, .prototype-related-grid { grid-template-columns: 1fr; }
 .prototype-panel { padding: 22px; }
 .prototype-topics { position: static; }
 .prototype-topics nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .prototype-reference { gap: 20px; }
 .prototype-breadcrumb { margin-bottom: 24px; }
}
@media print { .prototype-topics, .prototype-copy, .prototype-related, .prototype-breadcrumb { display: none; } .prototype-reference { display: block; } }

/* Rollout: preserve each tool's existing form, chart and export hooks. */
.rollout-tool .prototype-intro { text-align: left; margin-bottom: 8px; }
.rollout-tool .prototype-intro h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 12px !important; width: 100% !important; }
.rollout-tool .prototype-intro > .prototype-breadcrumb { margin-top: 0; }
.rollout-tool .prototype-intro .fs-5 { font-size: 1rem !important; line-height: 1.7; color: #a4b2c8; }
.rollout-tool main > .container > .site-content-row { --bs-gutter-y: 24px; --bs-gutter-x: 24px; }
.rollout-tool .prototype-panel { padding: 30px !important; }
.rollout-tool .prototype-panel form { margin-bottom: 0 !important; }
.rollout-tool .prototype-panel :is(input, select, textarea) { max-width: 100%; }
.rollout-tool .prototype-panel .form-label { margin-top: 0; }
.rollout-tool .prototype-panel .result-box h2 { font-size: .9rem; font-family: Inter, sans-serif !important; font-weight: 500 !important; color: #a4b2c8; }
.rollout-tool .prototype-panel .result-box h3 { inline-size: auto !important; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(2rem, 4vw, 3rem); }
.rollout-tool .prototype-panel .result-box > .btn { margin-top: 16px; }
.rollout-tool .prototype-reading { padding: 0; background: transparent; border: 0; box-shadow: none; }
.rollout-tool .prototype-guide { margin-top: 0; }
.rollout-tool .prototype-related { clear: both; }
.rollout-tool .prototype-generator-host { padding: 0; }
.prototype-inline-generator { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 24px; }
.rollout-tool .prototype-output-heading { font-size: 1.35rem; }
.prototype-reference-item > .prototype-reference-body { display: block; }
.prototype-reference-body ul { padding-left: 20px; font-size: .9rem; color: #a4b2c8; line-height: 1.8; }
.prototype-reference-body .code-short { display: inline; padding: 2px 5px; white-space: normal; }
.prototype-page .prototype-panel .prototype-output { min-width: 0; }
/* Full-screen image/diagram editors retain their canvas and panel layout. */
.rollout-tool .app-container .prototype-intro h1 { font-size: 1.35rem; }
.rollout-tool .app-container .prototype-breadcrumb { font-size: .7rem; gap: 6px; }
.rollout-tool .app-container .prototype-related-grid { grid-template-columns: 1fr; }
.rollout-tool .modal .prototype-intro h1 { font-size: 1.8rem; }
@media (max-width: 767px) {
    .prototype-inline-generator { grid-template-columns: 1fr; }
    .rollout-tool .prototype-panel { padding: 22px !important; }
    .rollout-tool .prototype-intro { padding-inline: 0; }
}
.rollout-tool .prototype-workspace > :is(.col-md-12, .site-content-row) { width: 100%; min-width: 0; }
.rollout-tool .prototype-workspace > .site-content-row { margin: 0 !important; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.rollout-tool .prototype-workspace > .site-content-row > div { margin-bottom: 0 !important; }
.rollout-tool .prototype-generator .form-control { width: 100% !important; }
.rollout-tool .prototype-workspace:has(> .prototype-settings-panel > form[style*="display: none"]) { grid-template-columns: 1fr; }
.rollout-tool .prototype-settings-panel:has(> form[style*="display: none"]) { display: none; }
@media print {
 .rollout-tool .prototype-intro .prototype-breadcrumb, .rollout-tool .prototype-related, .rollout-tool .prototype-guide { display: none; }
 .rollout-tool .prototype-workspace, .rollout-tool .prototype-inline-generator { display: block; }
}
.prototype-back { margin: 24px 0; font-size: .85rem; }
.prototype-back a { text-decoration: none; }
.rollout-tool .prototype-panel :is(.top-space, .top-space-fees) { position: static; top: auto; }
.rollout-tool .prototype-reference-body p { max-width: 75ch; }

/* Keep cheatsheet navigation, long headings and syntax inside narrow viewports. */
@media screen {
 .prototype-reference > *,
 .prototype-reference-item,
 .prototype-reference-item > div { min-width: 0; }
 .prototype-reference-item > div:not(.prototype-reference-body) { flex-wrap: wrap; }
 .prototype-reference-item h3 { min-width: 0; overflow-wrap: anywhere; flex: 1 1 140px; }
 .prototype-reference-item p,
 .prototype-reference-body li { overflow-wrap: anywhere; }
 .prototype-reference-item code:not(.code-short) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
 }
 .prototype-reference .prototype-copy { min-height: 44px; min-width: 64px; flex-shrink: 0; }
 .prototype-topics .form-control { min-height: 46px; font-size: 1rem; }
 .prototype-topics nav a { min-height: 44px; align-items: center; gap: 12px; overflow-wrap: anywhere; }
 .prototype-topics nav span { flex-shrink: 0; }
 .prototype-reference :is(a, button, input):focus-visible { outline: 2px solid #8bb8ff; outline-offset: 3px; }
}
@media screen and (max-width: 991px) {
 .prototype-reference { grid-template-columns: minmax(0, 1fr); gap: 24px; }
 .prototype-topics { position: static; }
 .prototype-topics nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
 .prototype-topics #formula-count { margin: 12px 0 0; }
}
@media screen and (max-width: 575px) {
 .prototype-topics nav { grid-template-columns: minmax(0, 1fr); gap: 4px; }
 .prototype-reference-item { padding: 18px 0; }
 .prototype-reference-item code:not(.code-short) { padding: 12px; }
}

/* Use the same input/output surfaces even on panels with legacy bg-light classes. */
@media screen {
 .site-theme.tool-page.prototype-page .prototype-panel {
    background: #111e33 !important;
 }
 .site-theme.tool-page.prototype-page .prototype-panel.prototype-output {
    background: #132239 !important;
 }
}

/* Economic dashboard hierarchy and readable metric values. */
.economic-dashboard .prototype-intro h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: .8; }
.site-theme.economic-dashboard .card-text {
    font-size: clamp(2rem, 2vw, 2.75rem);
    line-height: 1.2;
    margin-block: 12px;
    overflow-wrap: anywhere;
}