/* Chapter 10 only. Every rule is scoped to one of this chapter's scenes. Shared rules live in deck.css. */
.scene[aria-label="Lane or Shipwright"] .ch10-expect { display: grid; grid-template-columns: 430px 1fr; gap: 30px; padding: 26px 0; border-top: 1px solid var(--panel-rule); align-items: baseline; }
.scene[aria-label="Lane or Shipwright"] .ch10-x-label { font: 700 40px/1.2 var(--display); }
.scene[aria-label="Lane or Shipwright"] .ch10-x-value { font: 500 48px/1.2 var(--display); }
.scene[aria-label="Lane or Shipwright"] .ch10-x-sub { margin-top: 12px; font: 400 32px/1.3 var(--body); color: var(--text-soft); }

/* Real messages. */
.scene[aria-label="One real request"] .ch10-msg .m-head,
.scene[aria-label="A posted message"] .ch10-msg .m-head { flex-wrap: wrap; column-gap: 18px; row-gap: 2px; }
.scene[aria-label="One real request"] .ch10-msg .m-head span,
.scene[aria-label="A posted message"] .ch10-msg .m-head span { white-space: nowrap; }
.scene[aria-label="One real request"] .ch10-rich,
.scene[aria-label="A posted message"] .ch10-rich { white-space: normal; }
.scene[aria-label="One real request"] .ch10-rich ul,
.scene[aria-label="A posted message"] .ch10-rich ul { margin: 6px 0 12px; padding: 0 0 0 28px; list-style: "- "; }
.scene[aria-label="One real request"] .ch10-rich li,
.scene[aria-label="A posted message"] .ch10-rich li { margin-top: 5px; }
.scene[aria-label="A posted message"] .ch10-rich b { font-weight: 600; }
.scene[aria-label="One real request"] .ch10-big .m-text { font-size: 48px; }
.scene[aria-label="One real request"] .ch10-big .m-head { font-size: 30px; }
.scene[aria-label="One real request"] .ch10-small { padding: 16px 22px 18px; }
.scene[aria-label="One real request"] .ch10-small .m-text { font-size: 26px; line-height: 1.28; margin-top: 8px; }
.scene[aria-label="One real request"] .ch10-small .m-head { font-size: 24px; }

.scene[aria-label="A posted message"] .ch10-mid .m-text { font-size: 32px; line-height: 1.35; }
.scene[aria-label="A posted message"] .ch10-g28 { padding: 20px 28px 24px; }
.scene[aria-label="A posted message"] .ch10-g28 .m-text { font-size: 28px; line-height: 1.29; }
/* One flow in two columns, so the message keeps its order and both columns end level. */
.scene[aria-label="A posted message"] .ch10-cols { columns: 2; column-gap: 44px; }
.scene[aria-label="A posted message"] .ch10-cols li { break-inside: avoid; }
.scene[aria-label="A posted message"] .ch10-skip { list-style: none; color: var(--text-soft); }
.scene[aria-label="A posted message"] .ch10-nb { white-space: nowrap; }
.scene[aria-label="A posted message"] .ch10-u { background: linear-gradient(var(--tai-amber), var(--tai-amber)) no-repeat 0 100% / calc(var(--u, 0) * 100%) 4px; padding-bottom: 3px; }
.scene[aria-label="A posted message"] .ch10-tag { font: 600 28px/1.2 var(--body); color: var(--tai-amber); }

/* The sequence. */
.scene[aria-label="One real request"] .ch10-date { font: 500 30px/1.2 var(--display); color: var(--text-soft); }
.scene[aria-label="One real request"] .ch10-lane { position: absolute; left: 0; right: 0; height: 132px; border-top: 1px solid #3a3a3d; padding-top: 12px; font: 700 26px/1.15 var(--display); }
.scene[aria-label="One real request"] .ch10-lane span { display: block; width: 145px; }
.scene[aria-label="One real request"] .ch10-lane small { display: block; width: 142px; margin-top: 6px; font: 400 24px/1.12 var(--body); color: var(--text-soft); }
.scene[aria-label="One real request"] .ch10-lane-end { position: absolute; left: 0; right: 0; border-top: 1px solid #3a3a3d; }
.scene[aria-label="One real request"] .ch10-note-lit { padding: 0; background: var(--tai-black); font: 400 24px/1.12 var(--body); color: var(--tai-amber); }
.scene[aria-label="One real request"] .ch10-back { background: var(--tai-black); }
.scene[aria-label="One real request"] .ch10-band,
.scene[aria-label="What Tina saw"] .ch10-band { font: 400 30px/1.2 var(--body); color: #e7e7e8; }

.scene[aria-label="One real request"] .ch10-event,
.scene[aria-label="What Tina saw"] .ch10-event { padding: 8px 8px 6px; background: var(--panel); }
.scene[aria-label="One real request"] .ch10-event.human { background: var(--tai-red); }
.scene[aria-label="One real request"] .ch10-time,
.scene[aria-label="What Tina saw"] .ch10-time { font: 400 24px/1.1 var(--body); color: var(--text-soft); }
.scene[aria-label="One real request"] .ch10-event .b-title,
.scene[aria-label="What Tina saw"] .ch10-event .b-title { margin-top: 5px; font-size: 24px; line-height: 1.12; }
.scene[aria-label="One real request"] .ch10-event.human .ch10-time { color: var(--tai-void); }
.scene[aria-label="One real request"] .ch10-event code { font-size: 24px; letter-spacing: -0.035em; }

/* Inside a PR: a close-up over the sequence. */
.scene:is([aria-label="Inside a PR"], [aria-label="A posted message"]) .ch10-cover { background: var(--tai-black); }
.scene[aria-label="Inside a PR"] .ch10-left { font: 500 36px/1.2 var(--display); }
.scene[aria-label="Inside a PR"] .ch10-note { font: 500 40px/1.2 var(--display); }
.scene[aria-label="Inside a PR"] .ch10-count { font: 700 84px/1.1 var(--display); letter-spacing: -0.01em; }
.scene[aria-label="Inside a PR"] .ch10-count b { color: var(--tai-amber); font-variant-numeric: tabular-nums; font-weight: 700; }
.scene[aria-label="Inside a PR"] .ch10-block { display: grid; grid-template-columns: repeat(16, 44px); gap: 7px 5px; }
.scene[aria-label="Inside a PR"] .ch10-block i { display: block; height: 18px; background: #6d6d70; }
.scene[aria-label="Inside a PR"] .ch10-block i.done { background: var(--tai-amber); }
.scene[aria-label="Inside a PR"] .t-row > div:nth-child(3) { font-family: var(--mono); font-size: 27px; }

/* The request's two loops, over the dimmed sequence: the condition reads on black where it crosses a dimmed line. */
.scene[aria-label="Two loops"] { background: transparent; }
.scene[aria-label="Two loops"] .loop-until { padding: 2px 8px; background: var(--tai-black); }

.scene[aria-label="What Tina saw"] { background: rgba(0, 0, 0, 0.76); }
.scene[aria-label="What Tina saw"] .ch10-lit { border: 2px solid var(--tai-void); background: #1c1c1e; }
.scene[aria-label="What Tina saw"] .ch10-lit .ch10-time { color: var(--tai-void); }
.scene[aria-label="One real request"] .ch10-band code { font-family: var(--mono); font-size: 0.95em; }

/* The inner loop's tag sits under its frame, in the empty Runtime cell: the condition flows on from "loop" and wraps in the column, as on the ch01 map. */
.scene[aria-label="Two loops"] .loop-label.ch10-innertag { display: block; white-space: normal; }
.scene[aria-label="Two loops"] .ch10-innertag .loop-tag { display: inline-block; margin-right: 10px; padding: 4px 10px; vertical-align: 2px; }
.scene[aria-label="Two loops"] .ch10-innertag .loop-until { padding: 0; background: none; line-height: 1.3; }