/* Chapter 04 only: every rule is scoped to its scenes. Shared rules live in deck.css. */
.scene[aria-label^="ch04-"] .c4-dot { background: var(--tai-void); }
.scene[aria-label="ch04-git"] .c4-dot.c4-new { background: var(--tai-amber); }
.scene[aria-label^="ch04-"] .c4-rule { background: var(--panel-rule); }
.scene[aria-label^="ch04-"] .c4-dim { background: rgba(0, 0, 0, 0.62); }
.scene[aria-label^="ch04-"] .c4-mono code { font-family: var(--mono); }
.scene[aria-label^="ch04-"] .c4-key { font: 600 28px/1.2 var(--mono); white-space: nowrap; }
.scene[aria-label^="ch04-"] .c4-key code { font-weight: 600; }
.scene[aria-label="ch04-git"] .c4-key.c4-path { font-size: 27px; font-weight: 400; }
.scene[aria-label^="ch04-"] .c4-right { text-align: right; }
.scene[aria-label^="ch04-"] .body.c4-lane { font: 700 32px/1.2 var(--display); color: var(--tai-void); }
.scene[aria-label^="ch04-"] .body.c4-state { font: 600 32px/1.2 var(--body); color: var(--tai-void); }
.scene[aria-label^="ch04-"] .body.c4-note { font-size: 30px; line-height: 1.25; }
.scene[aria-label^="ch04-"] .body.c4-wait { font: 600 26px/1.2 var(--body); color: var(--tai-amber); }
.scene[aria-label^="ch04-"] .body.c4-go { font: 600 26px/1.2 var(--body); color: var(--tai-void); }
.scene[aria-label^="ch04-"] .body.c4-today { font: 700 32px/1.1 var(--display); color: var(--tai-void); }
.scene[aria-label^="ch04-"] .body.c4-under { font: 700 72px/1.15 var(--display); color: var(--tai-void); text-decoration: underline; text-decoration-color: var(--text-soft, #c9c9cb); text-decoration-thickness: 5px; text-underline-offset: 16px; }
.scene[aria-label^="ch04-"] .dbox.c4-big .b-title { font-size: 40px; }
.scene[aria-label^="ch04-"] .dbox.c4-big .b-detail { font-size: 30px; }
.scene[aria-label^="ch04-"] .dbox .b-detail code { font-family: var(--mono); font-size: 0.95em; }
.scene[aria-label^="ch04-"] .dbox.c4-job { padding: 10px 14px; }
.scene[aria-label^="ch04-"] .dbox.c4-job .b-title { font-size: 28px; }
.scene[aria-label^="ch04-"] .dbox.c4-job .b-detail { margin-top: 4px; }
.scene[aria-label^="ch04-"] .dbox.c4-step { display: flex; align-items: center; }
.scene[aria-label^="ch04-"] .dbox.c4-step .b-title { font-size: 30px; }
.scene[aria-label^="ch04-"] .dbox.off.c4-off { color: #a9a9ad; background: var(--tai-black); }
.scene[aria-label^="ch04-"] .dbox.c4-frame { background: transparent; border: 2px dashed var(--frame-dash); }
.scene[aria-label^="ch04-"] .dbox.c4-track { border-color: var(--tai-amber); }
.scene[aria-label^="ch04-"] .dbox.c4-list .b-detail { font-size: 30px; line-height: 1.5; }
.scene[aria-label^="ch04-"] .c4-mark { border: 2px solid var(--tai-amber); }
.scene[aria-label^="ch04-"] .c4-chip { padding: 12px 16px; border: 2px solid var(--panel-rule); background: var(--panel); font: 600 32px/1.2 var(--mono); text-align: center; }
.scene[aria-label^="ch04-"] .c4-chip code { font-weight: 600; }
.scene[aria-label^="ch04-"] .body.c4-prrow { display: flex; align-items: center; padding: 0 16px; border-top: 1px solid var(--panel-rule); font-size: 28px; }
.scene[aria-label="ch04-check"] .body.c4-status { display: flex; align-items: center; padding: 0 16px; border: 2px solid var(--tai-amber); font-size: 28px; font-weight: 600; }
.scene[aria-label="ch04-env"] .c4-rulechip { display: flex; align-items: center; padding: 0 18px; border: 2px solid var(--panel-rule); font: 600 28px/1.2 var(--body); color: var(--tai-void); }
.scene[aria-label="ch04-env"] .c4-rulechip.c4-lit { border-color: var(--tai-amber); }
/* A loop's condition crosses the lifelines of the sequence it frames: its label sits on black so they pass behind it. */
.scene[aria-label="ch04-review"] .loop-label, .scene[aria-label="ch04-promo"] .loop-label { padding-right: 10px; background: var(--tai-black); }
.scene[aria-label="ch04-path"] .dbox.c4-hand .b-title { font-size: 32px; }
/* The github form's panel draws the same job graph as ch04-forms, so its job boxes get the same treatment. */
.panel-content[aria-label="panel-ch04-github-form"] .dbox.c4-job { padding: 10px 14px; }
.panel-content[aria-label="panel-ch04-github-form"] .dbox.c4-job .b-title { font-size: 28px; }
.panel-content[aria-label="panel-ch04-github-form"] .dbox.c4-job .b-detail { margin-top: 4px; }
.panel-content[aria-label="panel-ch04-github-form"] code { font-family: var(--mono); }
/* What each service in the OIDC exchange is for: a label across its lifeline, on black so the line passes behind it. */
.scene[aria-label="ch04-oidc"] .c4-for { text-align: center; }
.scene[aria-label="ch04-oidc"] .c4-for span { padding: 0 8px; background: var(--tai-black); }
.scene[aria-label="ch04-oidc"] .dbox.c4-mid { display: flex; align-items: center; }
.scene[aria-label="ch04-flows"] .dbox.c4-flowjob { display: flex; align-items: center; }
.scene[aria-label="ch04-platform"] .body.c4-soft { font: 600 26px/1.2 var(--body); color: var(--text-soft); }
/* The AWS job graphs: names never break at their hyphens, at a size the job boxes hold. */
.scene:is([aria-label="ch04-flows"], [aria-label="ch04-deploy"], [aria-label="ch04-platform"]) .dbox code, .scene[aria-label="ch04-platform"] .c4-nb { white-space: nowrap; }
.scene:is([aria-label="ch04-flows"], [aria-label="ch04-deploy"], [aria-label="ch04-platform"]) .dbox.c4-big .b-title code { font-size: 32px; }
.scene[aria-label="ch04-deploy"] .dbox.c4-big .b-detail code { font-size: 0.9em; }