/* Illustrated sequence, adapted from jongcoding.github.io; see docs/asset-sources.md */
.page-platform #architecture { padding-top: 44px; }
#architecture > .container > .section-heading { margin-bottom: 16px; }
.workflow-film { --font-display: var(--font); --workflow-duration: 3000ms; margin: 16px 0 32px; }
.workflow-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr); gap: 36px; align-items: center; padding: 0 0 18px; min-height: 356px; }
.workflow-role { color: #e7c99f; font-size: 14px; margin: 0 0 10px; }
.page-platform .workflow-copy h3 { font: 700 clamp(30px, 3.4vw, 44px)/1.3 var(--font); letter-spacing: -.045em; text-wrap: balance; }
.workflow-description { color: #ded5c7; font-size: 17px; line-height: 1.75; margin-top: 16px; max-width: 34ch; }
.workflow-source { display: inline-block; color: var(--accent); margin-top: 18px; font-size: 13px; border-bottom: 1px solid #e0bc8655; }
.workflow-visual { min-width: 0; }
.workflow-film .pipeline-drawing { display: block; width: 100%; height: auto; max-height: 356px; margin: 0 auto; }
.workflow-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; }
.workflow-tabs button { position: relative; border: 0; border-top: 2px solid var(--line); background: none; text-align: left; padding: 14px 0; color: #c7bcab; font-size: 16px; }
.workflow-tabs button > span { color: #bba68a; margin-right: 8px; font-size: 12px; }
.workflow-tabs button[aria-selected="true"] { color: var(--fg); border-top-color: var(--accent); }
.workflow-tabs button > i { position: absolute; height: 2px; background: #fff0d6; top: -2px; left: 0; width: 0; }
.workflow-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #c2b4a0; font-size: 12px; }
.workflow-play { background: #e0bc860a; border: 1px solid #a78b6355; border-radius: 4px; color: #f0d2aa; padding: 8px 14px; min-height: 40px; min-width: 104px; font-size: 13px; }
.workflow-play span { font-size: 10px; margin-left: 7px; }
.workflow-film .cleanup-drawing .scheduled-container { opacity: 0; }
.workflow-film .cleanup-drawing .namespace-boundary:first-child { opacity: .3; }
.workflow-film[data-animated="true"] .workflow-panel:not([hidden]) .image-layer,
.workflow-film[data-animated="true"] .workflow-panel:not([hidden]) .provider-node,
.workflow-film[data-animated="true"] .workflow-panel:not([hidden]) .scheduled-container { animation: workflow-rise .7s ease both; }
.workflow-film[data-animated="true"] .dependency-layer,
.workflow-film[data-animated="true"] .provider-node:nth-of-type(2) { animation-delay: .12s !important; }
.workflow-film[data-animated="true"] .application-layer,
.workflow-film[data-animated="true"] .db-container,
.workflow-film[data-animated="true"] .provider-node:nth-of-type(3) { animation-delay: .24s !important; }
.workflow-film[data-animated="true"] .workflow-panel:not([hidden]) .transport-active { animation: workflow-route 1.1s ease both; }
.workflow-film[data-animated="true"] .cleanup-drawing .scheduled-container { animation: workflow-remove .9s ease both !important; }
.workflow-film[data-animated="true"] [aria-selected="true"] > i { animation: workflow-progress var(--workflow-duration) linear both; }
.workflow-film[data-playing="false"] * { animation-play-state: paused !important; }
@keyframes workflow-rise { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes workflow-remove { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-22px); } }
@keyframes workflow-route { from { stroke-dasharray: 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100; stroke-dashoffset: 0; } }
@keyframes workflow-progress { to { width: 100%; } }
@media (max-width: 760px) {
 .page-platform #architecture { padding-top: 32px; }
 .workflow-panel { grid-template-columns: 1fr; grid-template-rows: minmax(166px,auto) 230px; gap: 12px; min-height: 0; align-content: start; padding-bottom: 16px; }
 .workflow-copy { align-self: start; }
 .workflow-role { font-size: 12px; margin-bottom: 7px; }
 .page-platform .workflow-copy h3 { font-size: 31px; }
 .workflow-description { max-width: 42ch; font-size: 15px; margin-top: 10px; }
 .workflow-source { margin-top: 10px; }
 .workflow-visual { align-self: center; }
 .workflow-film .pipeline-drawing { max-height: 230px; }
 .workflow-tabs { gap: 8px; }
 .workflow-tabs button { font-size: 14px; text-align: center; padding-block: 12px; }
 .workflow-tabs button > span { margin-right: 4px; font-size: 11px; }
 .workflow-caption { margin-top: 4px; }
}
@media(max-width:370px) {
 .workflow-panel { grid-template-rows: minmax(174px,auto) 198px; }
 .workflow-film .pipeline-drawing { max-height: 198px; }
 .workflow-role { font-size: 11px; }
 .workflow-tabs button > span { display: none; }
}
@media(max-width:760px) and (max-height:740px) {
 .page-platform #architecture { padding-top: 24px; }
 .workflow-panel { grid-template-rows: minmax(150px,auto) 180px; gap: 8px; }
 .workflow-film .pipeline-drawing { max-height: 180px; }
 .page-platform .workflow-copy h3 { font-size: 28px; }
 .workflow-description { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .workflow-film * { animation: none !important; } }
@media print { .workflow-panel[hidden] { display: grid !important; } .workflow-controls { display: none; } }

.workflow-film .pipeline-drawing .object-shadow { fill: #344b6210; filter: blur(3px); }
.workflow-film .source-shadow { fill: #394c5610; }
.workflow-film .source-paper { fill: #fff; stroke: #b4bfc5; stroke-width: 1.4; }
.workflow-film .source-fold { fill: #e8edf0; stroke: #b4bfc5; stroke-width: 1.3; }
.workflow-film .object-label { fill: #674820; font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.workflow-film .code-line { fill: none; stroke: #8ca2b3; stroke-width: 4; }
.workflow-film .manifest-line { fill: none; stroke: #a7b6bf; stroke-width: 3; }
.workflow-film .drawing-caption { font-family: var(--font); font-size: 22px; font-weight: 600; fill: #f2d8b1; letter-spacing: 0; }
.workflow-film .muted-caption { fill: #d3c4ae; }
.workflow-film .transport-guide { fill: none; stroke: #625343; stroke-width: 1.7; }
.workflow-film .transport-active { fill: none; stroke: #d6ac71; stroke-width: 2.1; stroke-linecap: round; }
.workflow-film .transport-active[pathLength] { stroke-dasharray: 100; stroke-dashoffset: 0; }
.workflow-film .layer-top { fill: #d8e6f0; stroke: #7396ae; stroke-width: 1.3; }
.workflow-film .layer-side { fill: #7197b3; stroke: #6589a3; stroke-width: 1.3; }
.workflow-film .layer-seam { fill: none; stroke: #a2bfd2; stroke-width: 1.2; }
.workflow-film .base-layer .layer-top { fill: #b9cedd; }
.workflow-film .dependency-layer .layer-top { fill: #c9dce8; }
.workflow-film .application-layer .layer-top { fill: #e2edf4; }
.workflow-film .registry-wall { fill: #d2dce3; stroke: #8ba0af; stroke-width: 1.4; }
.workflow-film .registry-top { fill: #f0f4f6; stroke: #8ba0af; stroke-width: 1.4; }
.workflow-film .registry-line { stroke: #95a9b8; fill: none; stroke-width: 1.5; }
.workflow-film .build-packet, .workflow-film .publish-packet { opacity: 0; }
.workflow-film .tool-caption { fill: #d0ddbc; font-family: var(--font); font-size: 16px; font-weight: 600; }
.workflow-film .image-scan { fill: none; stroke: #7caa9b; stroke-width: 5; stroke-linecap: round; opacity: 0; }
.workflow-film .rack-top { fill: #e1e8ec; stroke: #93a6b4; stroke-width: 1.2; }
.workflow-film .rack-side { fill: #9daeba; stroke: #889eae; stroke-width: 1.2; }
.workflow-film .rack-front { fill: #c4d0d8; stroke: #92a6b4; stroke-width: 1.3; }
.workflow-film .rack-vents { fill: none; stroke: #7c94a5; stroke-width: 2; }
.workflow-film .rack-meter { fill: none; stroke: #eff6f7; stroke-width: 4; }
.workflow-film .selected-provider .rack-front { fill: #7e9eb5; stroke: #5d809b; }
.workflow-film .selected-provider .rack-top { fill: #cfdfeb; stroke: #7294af; }
.workflow-film .selected-provider .rack-side { fill: #577d9a; stroke: #577d9a; }
.workflow-film .selected-provider .rack-vents { stroke: #e8eff4; }
.workflow-film .selected-provider .rack-meter { stroke: #dce8ce; }
.workflow-film .reservation-label { font-size: 23px; fill: #a97e42; font-weight: 600; letter-spacing: 2px; }
.workflow-film .queue-back { fill: #d9e2e8; stroke: #a6b6c0; stroke-width: 1.2; }
.workflow-film .queue-mid { fill: #e7edf0; stroke: #b3c1ca; stroke-width: 1.2; }
.workflow-film .queue-lines { fill: none; stroke: #8ea5b5; stroke-width: 3; }
.workflow-film .reservation-receipt rect { fill: #eef3f6; stroke: #b5c5cf; stroke-width: 1; }
.workflow-film .reservation-receipt text { font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: .5px; fill: #886333; }
.workflow-film .receipt-held { opacity: 0; }
.workflow-film .reservation-receipt .receipt-committed { fill: #4c7661; }
.workflow-film .runtime-box .iso-front { fill: #799fbb; stroke: #527d9f; stroke-width: 1.3; }
.workflow-film .runtime-box .iso-side { fill: #456f90; stroke: #3d6481; stroke-width: 1.3; }
.workflow-film .runtime-box .iso-top { fill: #d5e6f1; stroke: #7297b2; stroke-width: 1.3; }
.workflow-film .container-ribs { stroke: #bed3e1; stroke-width: 2; fill: none; }
.workflow-film .database-container .iso-front { fill: #97b0a0; stroke: #6b8f7a; }
.workflow-film .database-container .iso-side { fill: #648675; stroke: #587963; }
.workflow-film .database-container .iso-top { fill: #d8e5d9; stroke: #8cac93; }
.workflow-film .database-container .container-ribs { stroke: #dce8dd; }
.workflow-film .host-object .iso-top { fill: #eef2f3; stroke: #a1b1bb; stroke-width: 1.3; }
.workflow-film .host-object .iso-front { fill: #a5b4bf; stroke: #8299aa; stroke-width: 1.3; }
.workflow-film .host-object .iso-side { fill: #8299aa; stroke: #6f899c; stroke-width: 1.3; }
.workflow-film .other-container .iso-top { fill: #e0e6e8; stroke: #b2bfc7; stroke-width: 1.2; }
.workflow-film .other-container .iso-front { fill: #bfccd3; stroke: #a4b5c0; stroke-width: 1.2; }
.workflow-film .other-container .iso-side { fill: #a3b4bf; stroke: #9aafbd; stroke-width: 1.2; }
.workflow-film .other-container .container-ribs { stroke: #dce4e8; }
.workflow-film .namespace-boundary { fill: #dce8ec50; stroke: #7ea0b6; stroke-width: 1.4; stroke-dasharray: 5 4; }

/* Independent monitoring; arrows show status data and results. */
.monitoring-flow { border-top: 1px solid var(--line); margin: 38px 0 36px; padding-top: 30px; }
.monitoring-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-platform .monitoring-heading h3 { font: 650 23px/1.35 var(--font); letter-spacing: -.025em; }
.monitoring-heading .text-link { font-size: 13px; }
.monitoring-route { display: grid; grid-template-columns: minmax(0,1fr) 52px minmax(0,.92fr) 52px minmax(0,1fr); align-items: center; }
.monitoring-route ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-rows: repeat(3,90px); }
.monitoring-route li { display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid #4a453d88; gap: 7px; }
.monitoring-route li:last-child { border-bottom: 0; }
.monitoring-route strong { color: var(--fg); font-size: 16px; font-weight: 600; }
.monitoring-route li span { color: var(--muted); font-size: 13px; line-height: 1.65; }
.monitoring-center { text-align: center; border: 1px solid #ae86514d; border-radius: 8px; padding: 26px 12px; background: #e0bc8606; }
.monitoring-center strong { display: block; font-size: clamp(17px,1.8vw,23px); margin: 8px 0 14px; }
.monitoring-cadence { color: var(--accent); font-size: 12px; }
.monitoring-center p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.monitoring-arrow { width: 52px; height: 270px; fill: none; stroke: #a78b63; stroke-width: 1.2; }
.monitoring-note { color: #a89c89; font-size: 12px; margin-top: 16px; }
@media(max-width:760px) {
 .monitoring-heading { margin-bottom: 16px; }
 .page-platform .monitoring-heading h3 { font-size: 21px; }
 .monitoring-route { grid-template-columns: 1fr; }
 .monitoring-route ul { grid-template-rows: auto; }
 .monitoring-route li { min-height: 78px; padding: 12px 0; display: grid; grid-template-columns: 115px 1fr; gap: 12px; align-items: center; }
 .monitoring-route strong { font-size: 15px; }
 .monitoring-arrow { display: none; }
 .monitoring-center { margin: 32px 0; position: relative; padding: 20px 16px; }
 .monitoring-center::before,.monitoring-center::after { content: '↓'; position: absolute; font-size: 19px; color: var(--accent); left: 50%; transform: translateX(-50%); }
 .monitoring-center::before { top: -30px; }
 .monitoring-center::after { bottom: -30px; }
 .monitoring-center strong { font-size: 22px; margin: 6px 0; }
 .monitoring-note { font-size: 11px; }
}