/* Chapter 14 only: execution history, retries and product perspective. */
#runs.runs-reference { position:relative; isolation:isolate; overflow:hidden; padding:0; color:#111c34; background:radial-gradient(ellipse at 14% 46%,#eaf3fc88,transparent 60%),linear-gradient(120deg,#fcfdfd,#f6faff 75%,#fcfdff); }
#runs .rn-shell { max-width:2000px; margin:auto; padding:48px clamp(32px,5vw,100px) 30px; }
#runs .rn-header { display:flex; align-items:start; justify-content:space-between; gap:50px; margin-bottom:32px; padding-inline:16px; }
#runs .section-label { font-size:12px; line-height:1.7; letter-spacing:.07em; color:#576d8a; margin-bottom:14px; }
#runs h2 { max-width:none; font-size:clamp(32px,2.85vw,55px); line-height:1.4; letter-spacing:-.025em; font-weight:700; text-wrap:initial; }
#runs h2 > span { color:#2376ed; text-decoration:underline; text-decoration-color:#d5e7ff; text-decoration-thickness:4px; text-underline-offset:8px; }
#runs .rn-intro { font-size:clamp(15px,1.15vw,21px); line-height:1.85; color:#516888; margin-top:20px; max-width:55ch; }
#runs .rn-handwriting { position:relative; font-family:'KaiTi','STKaiti','楷体',serif; color:#7188a8; font-size:clamp(24px,2.1vw,37px); letter-spacing:.08em; line-height:1.5; transform:rotate(-9deg); }
#runs .rn-header > .rn-handwriting { margin:32px 20px 0; white-space:nowrap; }
#runs .rn-handwriting > svg { display:block; width:240px; height:65px; margin-top:-12px; opacity:.7; }
#runs .rn-workspace { display:grid; grid-template-columns:.95fr 1.05fr; gap:18px; }
#runs .rn-panel { padding:24px; background:#ffffffde; border:1px solid #edf2f8; border-radius:12px; box-shadow:0 12px 30px #afc8e01a; min-width:0; }
#runs h3 { font-size:25px; line-height:1.5; font-weight:650; letter-spacing:-.02em; }
#runs .rn-panel h3 { font-size:23px; }
#runs .rn-panel h3 > span { color:#677d9c; font-size:15px; font-weight:400; margin-left:12px; letter-spacing:0; }
#runs .rn-tools { display:flex; align-items:center; gap:15px; margin:20px 0; }
#runs .rn-search { display:flex; align-items:center; gap:9px; border:1px solid #dfe7f2; border-radius:7px; padding:10px 12px; flex:1; min-width:0; }
#runs .rn-search svg { width:17px; height:17px; color:#637b9e; flex:0 0 auto; }
#runs input { min-width:0; width:100%; background:transparent; border:0; outline:0; padding:0; font:inherit; font-size:13px; color:#284468; }
#runs input::placeholder { color:#5c7394; opacity:1; }
#runs .rn-search:focus-within { outline:2px solid #2d7df1; outline-offset:2px; }
#runs select { background:#fcfdff; border:1px solid #dfe7f2; border-radius:7px; padding:10px 12px; font:inherit; font-size:13px; color:#425e84; }
#runs .rn-table-scroll { overflow-x:auto; }
#runs table { width:100%; min-width:540px; border-collapse:collapse; text-align:left; font-size:13px; line-height:1.6; }
#runs th { color:#5e7391; font-size:12px; font-weight:500; background:#f6f9fc; padding:11px 9px; white-space:nowrap; }
#runs td { padding:14px 9px; border-bottom:1px solid #eaf0f7; color:#536b8c; }
#runs td:nth-child(2) { color:#142641; font-weight:600; }
#runs tr.rn-selected td { background:#f1f7ff; }
#runs table button { border:0; padding:5px 0; background:transparent; font:inherit; font-size:12px; color:#166cda; cursor:pointer; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
#runs table button:hover { color:#054997; }
#runs button:focus-visible,#runs select:focus-visible,#runs summary:focus-visible,#runs .rn-table-scroll:focus-visible { outline:2px solid #2376ed; outline-offset:3px; }
#runs .rn-badge { display:inline-block; padding:5px 12px; border-radius:8px; font-size:12px; line-height:1.5; white-space:nowrap; font-weight:500; }
#runs .rn-complete { color:#00775f; background:#def7ee; }
#runs .rn-running { color:#0863d0; background:#e5f1ff; }
#runs .rn-partial { color:#ac5e10; background:#fff2df; }
#runs .rn-failed { color:#ae2747; background:#ffebef; }
#runs figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 14px; margin-top:14px; color:#596f8e; font-size:10px; line-height:1.7; }
#runs .rn-empty { padding:28px 15px; font-size:14px; color:#526c91; }
#runs [hidden] { display:none!important; }
#runs .rn-scroll-hint { display:none; }
#runs .rn-detail-heading { display:flex; align-items:center; gap:18px; }
#runs .rn-detail-heading h3 { flex:1; min-width:0; }
#runs #rn-id { font-size:12px; color:#586f91; }
#runs .rn-task { display:flex; align-items:center; gap:20px; padding:20px 0 16px; border-bottom:1px solid #e6edf7; }
#runs .rn-product-icon { display:grid; place-items:center; width:58px; height:64px; flex:0 0 auto; border-radius:15px; background:linear-gradient(130deg,#edf5ff,#f8fbff); color:#2e82ed; }
#runs .rn-product-icon svg { width:39px; height:46px; }
#runs .rn-task > div:nth-child(2) { flex:1; min-width:0; }
#runs h4 { font-size:18px; font-weight:650; line-height:1.5; }
#runs .rn-task p { font-size:12px; line-height:1.75; color:#586f90; margin-top:4px; }
#runs .rn-meta { flex:0 0 auto; }
#runs .rn-meta p { display:flex; align-items:center; gap:8px; font-size:11px; }
#runs .rn-meta svg { width:16px; height:16px; flex:0 0 auto; }
#runs .rn-timeline { list-style:none; margin:0; padding:0; }
#runs .rn-timeline > li { display:flex; align-items:start; gap:14px; position:relative; padding:0 0 0 12px; }
#runs .rn-timeline > li:not(:last-child)::before { content:''; position:absolute; top:31px; bottom:-22px; left:24px; width:1px; background:#b6e5d9; }
#runs .rn-step-state { display:grid; place-items:center; width:25px; height:25px; flex:0 0 auto; border-radius:50%; background:#06ae92; color:#fff; box-shadow:0 3px 8px #cbeee6; position:relative; z-index:1; margin-top:12px; }
#runs .rn-step-state svg { width:16px; height:16px; }
#runs .rn-timeline details { min-width:0; flex:1; border-bottom:1px solid #edf1f7; }
#runs .rn-timeline summary { display:grid; grid-template-columns:125px minmax(0,1fr) 48px 57px; align-items:center; gap:12px; cursor:pointer; padding:13px 0; list-style:none; }
#runs .rn-timeline summary::-webkit-details-marker { display:none; }
#runs .rn-step-name { display:flex; gap:8px; align-items:center; }
#runs .rn-step-name small { color:#697f9e; font-size:11px; }
#runs .rn-step-name strong { font-size:13px; font-weight:600; }
#runs .rn-step-desc { color:#596f90; font-size:12px; line-height:1.65; }
#runs .rn-stage-label { color:#587191; font-size:11px; }
#runs .rn-inspect { color:#146fdd; font-size:11px; white-space:nowrap; }
#runs .rn-timeline details[open] .rn-inspect { text-decoration:underline; text-underline-offset:3px; }
#runs .rn-timeline details > p { padding:0 14px 17px; color:#416087; font-size:12px; line-height:1.8; }
#runs .rn-timeline [data-state="pending"] .rn-step-state { background:#e8eef5; color:#697d99; box-shadow:none; }
#runs .rn-timeline [data-state="pending"] .rn-step-state svg,#runs .rn-timeline [data-state="active"] .rn-step-state svg,#runs .rn-timeline [data-state="failed"] .rn-step-state svg,#runs .rn-timeline [data-state="blocked"] .rn-step-state svg { display:none; }
#runs .rn-timeline [data-state="pending"] .rn-step-state::after { content:'·'; }
#runs .rn-timeline [data-state="active"] .rn-step-state { background:#2580f3; }
#runs .rn-timeline [data-state="active"] .rn-step-state::after { content:'•'; }
#runs .rn-timeline [data-state="failed"] .rn-step-state,#runs .rn-timeline [data-state="blocked"] .rn-step-state { background:#e86b83; box-shadow:none; }
#runs .rn-timeline [data-state="failed"] .rn-step-state::after,#runs .rn-timeline [data-state="blocked"] .rn-step-state::after { content:'!'; font-size:14px; }
#runs .rn-detail-empty { display:none; padding:60px 20px; color:#526c91; font-size:14px; line-height:1.8; }
#runs .rn-no-selection .rn-detail-content { display:none; }
#runs .rn-no-selection .rn-detail-empty { display:block; }
#runs .rn-retry { display:grid; grid-template-columns:.92fr 1.3fr; gap:20px 55px; margin:34px 16px 0; padding:26px 0 20px; border-top:1px solid #bdcee2; }
#runs .rn-kicker { color:#536e93; font-size:12px; line-height:1.7; margin-bottom:17px; letter-spacing:.03em; }
#runs .rn-retry-copy h3 { font-size:30px; line-height:1.5; }
#runs .rn-retry-copy > p:not(.rn-kicker) { color:#516a8e; font-size:16px; line-height:1.9; margin-top:17px; }
#runs .rn-attempts { margin-top:15px; font-size:12px; color:#466b9c; line-height:1.8; }
#runs .rn-attempts summary { cursor:pointer; }
#runs .rn-attempts p { margin-top:8px; color:#506c90; }
#runs .rn-retry-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:center; gap:44px; list-style:none; padding:0; margin:0; }
#runs .rn-retry-flow > li { position:relative; text-align:center; padding:18px 10px 20px; border-radius:15px; background:linear-gradient(130deg,#edf5ff,#f3f9ff); }
#runs .rn-retry-flow > li:not(:last-child)::after { content:'→'; position:absolute; right:-33px; top:47%; color:#408ef6; font-size:24px; line-height:1; }
#runs .rn-retry-flow > li > span { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 12px; border-radius:50%; background:#e0efff; color:#2b87ff; }
#runs .rn-retry-flow svg { width:31px; height:31px; }
#runs .rn-retry-flow h4 { font-size:17px; }
#runs .rn-retry-flow p { color:#597391; font-size:12px; line-height:1.9; margin-top:12px; }
#runs .rn-retry-flow .rn-retry-issue { background:#fcf0f4; }
#runs .rn-retry-issue > span { color:#e54d66!important; background:#ffe1e9!important; }
#runs .rn-retry-flow .rn-retry-again { background:#eaf8f6; }
#runs .rn-retry-again > span { color:#00ac8b!important; background:#d7f3ec!important; }
#runs .rn-disclosure { grid-column:1/-1; font-size:11px; color:#5c7595; line-height:1.7; }
#runs .rn-boundary { display:flex; align-items:center; gap:30px; margin-inline:16px; padding:15px 0; border-top:1px solid #d8e3ef; border-bottom:1px solid #bdcee2; }
#runs .rn-boundary strong { font-size:19px; font-weight:600; color:#223c5f; }
#runs .rn-boundary p { font-size:13px; line-height:1.8; color:#526c90; }
#runs .rn-perspective { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px; margin:28px 16px 0; min-height:235px; }
#runs .rn-perspective > div:first-child { z-index:1; }
#runs .rn-perspective h3 { font-size:clamp(28px,2.4vw,44px); line-height:1.35; font-weight:500; letter-spacing:-.015em; }
#runs .rn-perspective-copy { margin-top:18px; color:#526a8e; font-size:17px; line-height:1.8; }
#runs .rn-landscape { position:relative; align-self:stretch; min-height:235px; }
#runs .rn-landscape > svg { position:absolute; width:125%; height:100%; right:-10%; bottom:-25px; }
#runs .rn-landscape .rn-handwriting { position:absolute; right:16%; top:0; z-index:1; font-size:27px; }
#runs .rn-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:1500px) { #runs .rn-panel { padding:20px; } #runs .rn-task { gap:12px; flex-wrap:nowrap; } #runs .rn-meta { display:block; width:auto; } #runs .rn-meta p { margin:0; } #runs .rn-timeline summary { grid-template-columns:104px minmax(0,1fr) 42px 12px; gap:8px; } #runs .rn-inspect { font-size:0; } #runs .rn-inspect::after { content:"⌄"; font-size:15px; } #runs .rn-step-name { gap:6px; } #runs .rn-step-name strong { font-size:12px; } #runs .rn-retry { gap:20px 30px; } #runs .rn-retry-flow { gap:27px; } #runs .rn-retry-flow > li:not(:last-child)::after { right:-23px; font-size:20px; } #runs .rn-retry-flow h4 { font-size:15px; } #runs .rn-panel h3 { font-size:21px; } #runs .rn-panel h3 > span { font-size:13px; margin-left:8px; } #runs table { min-width:0; font-size:12px; } #runs th,#runs td { padding-inline:7px; } }
@media(max-width:1150px) { #runs table { min-width:500px; } #runs .rn-inspect { font-size:11px; } #runs .rn-inspect::after { display:none; } #runs .rn-shell { padding:34px 5vw 28px; } #runs .rn-header { padding:0; } #runs .rn-header > .rn-handwriting { display:none; } #runs .rn-intro { max-width:65ch; } #runs .rn-workspace { grid-template-columns:1fr; } #runs .rn-task { flex-wrap:nowrap; } #runs .rn-meta { display:block; width:auto; } #runs .rn-meta p { margin-top:4px; } #runs .rn-timeline summary { grid-template-columns:125px minmax(0,1fr) 48px 60px; } #runs .rn-inspect { display:initial; } #runs .rn-retry { grid-template-columns:1fr; margin-inline:0; gap:24px; } #runs .rn-retry-flow { gap:35px; } #runs .rn-retry-flow > li:not(:last-child)::after { right:-28px; } #runs .rn-boundary { margin-inline:0; } #runs .rn-perspective { margin-inline:0; } #runs .rn-landscape .rn-handwriting { font-size:23px; right:5%; } }
@media(max-width:700px) { #runs .rn-shell { padding:28px 5vw; } #runs h2 { font-size:clamp(26px,6vw,36px); } #runs .rn-intro { font-size:14px; margin-top:16px; } #runs .rn-header { margin-bottom:24px; } #runs .rn-panel { padding:16px 12px; } #runs .rn-panel h3 { font-size:20px; } #runs .rn-panel h3 > span { font-size:12px; } #runs .rn-tools { gap:8px; margin:15px 0; } #runs .rn-search { padding:10px 8px; } #runs input,#runs select { font-size:12px; } #runs select { padding:10px 5px; } #runs .rn-scroll-hint { display:block; font-size:11px; color:#597293; margin-top:10px; } #runs .rn-detail-heading { gap:10px; flex-wrap:wrap; } #runs .rn-detail-heading h3 { flex-basis:100%; } #runs .rn-task { flex-wrap:wrap; gap:12px; padding:18px 0; } #runs .rn-product-icon { width:48px; height:58px; } #runs .rn-product-icon svg { width:27px; height:34px; } #runs h4 { font-size:16px; } #runs .rn-task > div:nth-child(2) { flex-basis:calc(100% - 60px); } #runs .rn-meta { width:100%; display:flex; flex-wrap:wrap; gap:4px 15px; } #runs .rn-timeline > li { gap:10px; padding-left:0; } #runs .rn-timeline > li:not(:last-child)::before { left:12px; } #runs .rn-timeline summary { grid-template-columns:1fr auto; gap:5px 8px; padding:18px 0; } #runs .rn-step-name strong { font-size:13px; } #runs .rn-step-desc { grid-column:1/-1; grid-row:2; font-size:12px; } #runs .rn-inspect { grid-column:1/-1; grid-row:3; font-size:11px; } #runs .rn-stage-label { grid-column:2; grid-row:1; } #runs .rn-timeline details > p { padding-left:0; font-size:13px; } #runs .rn-retry { margin-top:28px; padding-top:24px; } #runs .rn-retry-copy h3 { font-size:25px; } #runs .rn-retry-copy > p:not(.rn-kicker) { font-size:14px; } #runs .rn-retry-flow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } #runs .rn-retry-flow > li:not(:last-child)::after { display:none; } #runs .rn-retry-flow > li { padding:16px 8px; } #runs .rn-retry-flow > li > span { width:48px; height:48px; } #runs .rn-retry-flow p { font-size:12px; } #runs .rn-boundary { display:block; padding:14px 0; } #runs .rn-boundary p { margin-top:5px; } #runs .rn-perspective { grid-template-columns:1fr; margin-top:28px; gap:12px; } #runs .rn-perspective h3 { font-size:28px; } #runs .rn-perspective-copy { font-size:14px; } #runs .rn-landscape { min-height:220px; } #runs .rn-landscape .rn-handwriting { top:12px; right:30%; font-size:24px; } }