/* R24.24 — native, readable diagrams and conditional architecture examples. */
.vt-section,
.vt-profile-example {
	--vt-navy: #14384d;
	--vt-teal: #087972;
	--vt-line: #9bb8be;
	--vt-muted: #3f5968;
	color: var(--vt-navy);
	font-size: clamp(1rem, .96rem + .15vw, 1.1rem);
	line-height: 1.6;
}
.vt-section *,
.vt-profile-example * { box-sizing: border-box; }
.vt-heading { max-inline-size: 76ch; margin-block-end: 1.5rem; }
.vt-heading h2 { font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.8rem); line-height: 1.15; margin: .5rem 0 1rem; }
.vt-heading h3 { font-size: clamp(1.45rem, 1.15rem + .8vw, 2rem); line-height: 1.25; margin: .5rem 0 .75rem; }
.vt-heading p { margin: 0; }
.vt-scope { padding: 1rem 1.2rem; background: #eef5f6; border-inline-start: .25rem solid var(--vt-navy); margin: 1.25rem 0 1.5rem; }
.vt-label { display: block; color: var(--vt-muted); font-size: 1rem; font-weight: 650; line-height: 1.45; }
.vt-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.25rem; }
.vt-controls[hidden],
.vt-panel[hidden] { display: none; }
.vt-controls button { flex: 1 1 auto; border: 1px solid var(--vt-line); border-radius: .5rem; background: #fff; color: var(--vt-navy); padding: .8rem 1.1rem; font: inherit; font-weight: 700; line-height: 1.4; cursor: pointer; white-space: normal; }
.vt-controls button:hover { background: #eff8f7; }
.vt-controls button[aria-selected="true"] { background: var(--vt-navy); border-color: var(--vt-navy); color: #fff; }
.vt-controls button:focus-visible,
.vt-references summary:focus-visible,
.vt-evidence a:focus-visible,
.vt-reference-list a:focus-visible { outline: .2rem solid var(--vt-teal); outline-offset: .2rem; }
.vt-trust-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1rem, 2.2vw, 2rem); align-items: start; }
.vt-deployment { margin: 0; }
.vt-client,
.vt-guard,
.vt-vau,
.vt-service { padding: 1.2rem; background: #fff; border: 1px solid var(--vt-line); border-radius: .6rem; }
.vt-client { border-color: var(--vt-navy); }
.vt-deployment h3,
.vt-deployment h4 { color: var(--vt-navy); font-size: 1.3rem; line-height: 1.3; margin: .3rem 0 .5rem; }
.vt-deployment p { margin: .35rem 0 0; }
.vt-environment { padding: 1.2rem; border: .15rem dashed #6b8795; border-radius: .8rem; background: #f5f9fa; }
.vt-environment-heading { padding-block-end: 1rem; }
.vt-environment-heading h3 { font-size: 1.5rem; }
.vt-environment-heading p { color: var(--vt-muted); }
.vt-vau { border: .2rem solid var(--vt-teal); background: #effaf7; }
.vt-vau > .vt-label { color: #09625d; }
.vt-connection { text-align: center; padding: .8rem .3rem; line-height: 1.4; }
.vt-connection > span { display: block; color: var(--vt-teal); font-size: 1.5rem; line-height: 1; margin-block-end: .35rem; }
.vt-connection > strong { font-size: 1.02rem; font-weight: 700; }
.vt-connection > p { color: var(--vt-muted); font-size: 1rem; }
.vt-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-block-start: 1rem; }
.vt-service { padding: 1rem; }
.vt-service h4 { font-size: 1.15rem; }
.vt-service p { font-size: 1rem; }
.vt-zone.vt-highlighted { outline: .18rem solid var(--vt-teal); outline-offset: .2rem; }
.vt-legend { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; margin: 1rem 0; color: var(--vt-muted); font-size: 1rem; }
.vt-legend > span { display: flex; align-items: center; gap: .5rem; }
.vt-swatch { display: inline-block; inline-size: 1.3rem; block-size: 1.1rem; flex: 0 0 1.3rem; }
.vt-swatch-host { border: 2px dashed #6b8795; }
.vt-swatch-vau { border: 3px solid var(--vt-teal); background: #effaf7; }
.vt-swatch-link { color: var(--vt-teal); font-style: normal; font-weight: 800; line-height: 1; text-align: center; }
.vt-deployment figcaption { color: var(--vt-muted); font-size: 1rem; }
.vt-panel { margin: 0 0 1rem; padding: clamp(1.1rem, 2vw, 1.6rem); border: 1px solid var(--vt-line); border-radius: .8rem; background: #fff; }
.vt-panel h3,
.vt-panel h4 { color: var(--vt-navy); font-size: clamp(1.35rem, 1.1rem + .6vw, 1.7rem); line-height: 1.3; margin: .5rem 0 1rem; }
.vt-panel p { margin: .75rem 0 0; }
.vt-result { border-block-start: 2px solid #cce4df; padding-block-start: 1rem; color: #174c49; font-weight: 600; }
.vt-roles { margin: 1rem 0; }
.vt-roles > div { padding: .85rem 0; border-block-end: 1px solid #dce7eb; }
.vt-roles dt { font-weight: 750; }
.vt-roles dd { margin: .3rem 0 0; }
.vt-evidence { padding: 1.25rem; border-inline-start: .25rem solid var(--vt-teal); margin-block-start: 1.75rem; background: #f0f8f6; }
.vt-evidence h3 { font-size: 1.35rem; margin: 0 0 .5rem; }
.vt-evidence p { margin: 0 0 .75rem; }
.vt-evidence a,
.vt-reference-list a { color: #08685f; text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
.vt-references { margin-block-start: 1.25rem; }
.vt-references summary { cursor: pointer; padding: .75rem 0; font-weight: 700; }
.vt-reference-list { margin: .25rem 0 1rem; padding-inline-start: 1.4rem; }
.vt-reference-list li { margin-block: .65rem; }
.vt-profile-example { margin: 1.75rem 0; border: 1px solid var(--vt-line); border-radius: 1rem; padding: clamp(1rem, 2.5vw, 2rem); background: #fff; }
.vt-profile-delta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vt-profile-version { border: 1px solid var(--vt-line); border-radius: .65rem; padding: 1.1rem; background: #f7fafb; }
.vt-profile-version:last-child { border-color: var(--vt-teal); background: #edf8f5; }
.vt-profile-version code { display: block; color: var(--vt-navy); font-size: 1.03rem; overflow-wrap: anywhere; white-space: normal; margin-block-start: .75rem; }
.vt-profile-version p { margin-block-end: 0; }
.vt-definition { margin: 1rem 0; color: var(--vt-muted); }
.vt-decision-question { font-weight: 700; max-inline-size: 78ch; margin: 1.5rem 0 1rem; }
.vt-scenario { padding: 1.25rem; background: #f8fbfc; }
.vt-change-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 1.25rem 0; list-style: none; counter-reset: vt-step; }
.vt-change-steps li { padding: 1rem; border-inline-start: .2rem solid var(--vt-teal); background: #fff; counter-increment: vt-step; }
.vt-change-steps strong { display: block; font-size: 1.15rem; line-height: 1.35; }
.vt-change-steps strong::before { content: counter(vt-step) ". "; color: var(--vt-teal); }
.vt-change-steps p { margin: .6rem 0 0; }
.vt-footnote { color: var(--vt-muted); margin: 1.25rem 0 0; }
/* R24.25 — the page title and one compact reference figure share the hero. */
.vt-trust-hero { padding-block: clamp(1.5rem, 3vw, 3rem); background: linear-gradient(180deg, #f4f9fa 0, #fff 68%); }
.vt-hero-breadcrumbs { color: var(--vt-muted); font-size: .9rem; line-height: 1.45; margin-block-end: 1.75rem; }
.vt-hero-breadcrumbs a { color: #08685f; text-underline-offset: .15em; }
.vt-hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; }
.vt-hero-copy { padding-block: clamp(.5rem, 1.5vw, 1.5rem); }
.vt-hero-copy h1 { color: var(--vt-navy); font-size: clamp(2.05rem, 1.7rem + 2vw, 3.65rem); line-height: 1.12; letter-spacing: -.035em; margin: .75rem 0 1rem; max-inline-size: 21ch; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; }
.vt-hero-copy .lead { margin: 0; font-size: clamp(1.05rem, 1rem + .2vw, 1.18rem); line-height: 1.65; }
.vt-hero-selection { color: #174c49; font-weight: 700; border-inline-start: .2rem solid var(--vt-teal); padding-inline-start: .8rem; margin: 1.25rem 0; }
.vt-hero-links { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; }
.vt-hero-links a { color: #08685f; font-weight: 700; text-decoration: underline; text-underline-offset: .18em; padding-block: .35rem; }
.vt-hero-links a:focus-visible,
.vt-hero-breadcrumbs a:focus-visible { outline: .2rem solid var(--vt-teal); outline-offset: .2rem; }
.vt-deployment-compact { padding: clamp(.85rem, 1.8vw, 1.4rem); border: 1px solid #c8dde0; border-radius: 1rem; background: #fff; box-shadow: 0 .7rem 1.8rem rgba(20, 56, 77, .06); }
.vt-hero-diagram-title { color: var(--vt-navy); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .85rem; }
.vt-deployment-compact .vt-client { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; padding: .65rem .85rem; }
.vt-deployment-compact .vt-client h3,
.vt-deployment-compact .vt-client p { margin: 0; }
.vt-deployment-compact .vt-environment { padding: .85rem; }
.vt-deployment-compact .vt-environment-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; padding-block-end: .65rem; }
.vt-deployment-compact .vt-environment-heading h3,
.vt-deployment-compact .vt-environment-heading p { margin: 0; }
.vt-deployment-compact .vt-guard,
.vt-deployment-compact .vt-vau { padding: .65rem .8rem; }
.vt-deployment-compact .vt-guard h4,
.vt-deployment-compact .vt-vau h4 { font-size: 1.18rem; margin: .15rem 0; }
.vt-deployment-compact .vt-label { font-size: .95rem; }
.vt-deployment-compact .vt-connection { padding: .5rem .2rem; margin: 0; }
.vt-deployment-compact .vt-connection > span { display: inline-block; font-size: 1.2rem; margin: 0 .3rem 0 0; vertical-align: middle; }
.vt-deployment-compact .vt-connection > p { margin: .15rem 0 0; }
.vt-deployment-compact .vt-services { gap: .65rem; margin-block-start: .7rem; }
.vt-deployment-compact .vt-service { padding: .65rem .75rem; overflow-wrap: anywhere; }
.vt-deployment-compact .vt-service h4 { font-size: 1.06rem; margin: .2rem 0; }
.vt-deployment-compact .vt-service p { margin: .25rem 0 0; }
.vt-hero-detail { border-block-start: 1px solid #c8dde0; margin-block-start: clamp(2rem, 4vw, 4rem); padding-block-start: clamp(1.75rem, 3vw, 3rem); scroll-margin-block-start: 6rem; }
.vt-hero-detail .vt-heading { margin-block-end: 1rem; }
.vt-composition-caption { color: var(--vt-muted); max-inline-size: 95ch; margin: .75rem 0 1.5rem; }
.vt-hero-detail .vt-explanations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.vt-enhanced .vt-hero-detail .vt-explanations { display: block; }
.vt-hero-detail .vt-panel p,
.vt-hero-detail .vt-roles { max-inline-size: 95ch; }
/* R24.26 — lighter hero; interaction emphasis is distinct from the VAU boundary. */
.vt-trust-hero .vt-hero-copy h1 { font-size: clamp(2rem, 1.65rem + 1.7vw, 3.25rem); line-height: 1.13; }
.vt-trust-hero .vt-hero-selection { margin-block: 1rem; }
.vt-trust-hero .vt-hero-links { align-items: center; gap: .6rem 1rem; }
.vt-trust-hero .vt-hero-links .vt-hero-primary-action { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; max-inline-size: 100%; min-block-size: 2.75rem; padding: .65rem .9rem; border: 1px solid var(--vt-navy); border-radius: .5rem; background: var(--vt-navy); color: #fff; line-height: 1.35; text-align: center; text-decoration: none; }
.vt-trust-hero .vt-hero-links .vt-hero-primary-action:hover { background: #20526c; border-color: #20526c; }
.vt-trust-hero .vt-hero-links .vt-hero-source-link { font-weight: 650; }
.vt-trust-hero .vt-deployment-compact { padding: clamp(.75rem, 1.35vw, 1.05rem); border-color: #d3e2e5; border-radius: .85rem; box-shadow: 0 .35rem 1rem rgba(20, 56, 77, .04); }
.vt-trust-hero .vt-hero-diagram-title { margin-block-end: .6rem; }
.vt-trust-hero .vt-deployment-compact .vt-client { padding: .5rem .7rem; }
.vt-trust-hero .vt-deployment-compact .vt-environment { padding: .65rem; border-width: 1px; }
.vt-trust-hero .vt-deployment-compact .vt-environment-heading { padding-block-end: .5rem; }
.vt-trust-hero .vt-deployment-compact .vt-guard,
.vt-trust-hero .vt-deployment-compact .vt-vau { padding: .5rem .65rem; border-radius: .45rem; }
.vt-trust-hero .vt-deployment-compact .vt-vau { border-width: .15rem; }
.vt-trust-hero .vt-deployment-compact .vt-connection { padding: .35rem .15rem; }
.vt-trust-hero .vt-deployment-compact .vt-services { gap: .5rem; margin-block-start: .5rem; }
.vt-trust-hero .vt-deployment-compact .vt-service { padding: .5rem .6rem; border-radius: .45rem; }
.vt-trust-hero .vt-deployment-compact .vt-service h4 { margin-block: .15rem; }
.vt-trust-hero .vt-deployment-compact .vt-service p { margin-block-start: .15rem; }
.vt-trust-hero .vt-zone.vt-highlighted { outline: none; outline-offset: 0; background: #edf4ff; box-shadow: inset .2rem 0 0 #3c6c9f; }
@media (max-width: 900px) {
	.vt-trust-layout { grid-template-columns: minmax(0, 1fr); }
	.vt-change-steps { grid-template-columns: minmax(0, 1fr); }
	.vt-hero-layout,
	.vt-hero-detail .vt-explanations { grid-template-columns: minmax(0, 1fr); }
	.vt-hero-copy { padding-block: 0; }
	.vt-hero-copy h1 { max-inline-size: 24ch; }
}
@media (max-width: 580px) {
	.vt-services,
	.vt-profile-delta { grid-template-columns: minmax(0, 1fr); }
	.vt-controls { flex-direction: column; }
	.vt-controls button { inline-size: 100%; text-align: start; }
	.vt-environment { padding: .85rem; }
	.vt-hero-breadcrumbs { margin-block-end: 1rem; }
	.vt-hero-layout { gap: 1.4rem; }
	.vt-deployment-compact .vt-environment { padding: .65rem; }
	.vt-deployment-compact .vt-service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .2rem .65rem; }
	.vt-deployment-compact .vt-service > .vt-label { grid-column: 1 / -1; }
	.vt-deployment-compact .vt-service h4,
	.vt-deployment-compact .vt-service p { margin: 0; }
}
@media print {
	.vt-controls { display: none !important; }
	.vt-panel[hidden] { display: block; }
	.vt-trust-layout { grid-template-columns: minmax(0, 1fr); }
	.vt-hero-layout,
	.vt-hero-detail .vt-explanations { grid-template-columns: minmax(0, 1fr); }
	.vt-zone.vt-highlighted { outline: none; }
	.vt-trust-hero .vt-zone.vt-highlighted { background: #fff; box-shadow: none; }
	.vt-trust-hero .vt-environment.vt-highlighted { background: #f5f9fa; }
	.vt-trust-hero .vt-vau.vt-highlighted { background: #effaf7; }
	.vt-panel,
	.vt-profile-version { break-inside: avoid; }
}