/* BRIDGE Town: the Workshop runs (spec docs/superpowers/specs/2026-10-15-workshop-runs-design.md). Its own file, loaded after
   town.css: the layout A/C, the output sheet and the folder come with Task 5; the pieces inside each output are below. */
/* Workshop runs (spec 2026-10-15): A on desktop, room left and the work right; C on phones, room on top */
.run-caption { display: none; }
body.run-on .demo-strip { display: none; }
body.run-on .run-caption { display: block; margin: 0; font: 600 18px/1.35 Rubik, system-ui, sans-serif; color: #17171b; }
body.run-on .demo-panel { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: var(--run-panel-w, 44vw); height: auto; max-height: none; border-radius: 0; margin: 0; padding: 12px 16px 12px; background: #f6f6f2; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; box-shadow: none; transform: translateZ(0); }
/* The caption is a child of the panel, and the panel carries transform: translateZ(0) (its own paint layer), so position: fixed on the
   caption is measured from the panel's padding box, not the screen. left and bottom below therefore subtract the panel's own origin
   (100vw - panel width, its left border --run-bl, its bottom border --run-bb) to land the caption on the room, bottom left. Without that
   it sat on the panel footer and hid Approve, Revise and Try another. pointer-events: none keeps it from ever taking a click. */
body.run-on { --run-bl: 4px; --run-bb: 4px; }
body.run-on .run-caption { position: fixed; padding: 12px 16px; background: #fff; border: 2px solid #17171b; border-radius: 10px; box-shadow: 0 3px 0 rgba(23,23,27,.25); z-index: 5; pointer-events: none; }
body.run-on .demo-body { overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.run-prog { margin: 0 0 6px; font: 400 14px/1.3 Rubik, system-ui, sans-serif; color: #4a4a52; }
.run-sheet { overflow: auto; min-height: 0; overscroll-behavior: contain; background: #fff; border-radius: 10px; border: 1px solid rgba(0,0,0,.08); box-shadow: none; transform: translateZ(0); }
/* layout C (runcam.js sets body.run-c): the room on top, the work below; the panel keeps clear of the home bar */
body.run-on.run-c .demo-panel { top: var(--run-room-h, 40vh); left: 0; right: 0; width: auto; padding: 0 calc(12px + var(--sa-r, 0px)) calc(10px + var(--sa-b, 0px)) calc(12px + var(--sa-l, 0px)); border-top: 3px solid #17171b; overflow-y: auto; box-shadow: none; transform: translateZ(0); }
/* Enlarged captions and wrapped buttons may exceed the space below the room: the panel scrolls, the sheet keeps a readable height. */
body.run-on.run-c .demo-body { min-height: 140px; }
body.run-on.run-c .run-caption { position: static; width: auto; padding: 10px 2px; border: 0; box-shadow: none; background: transparent; font-size: 17px; }
body.run-on:not(.run-c) .demo-panel { padding-top: calc(12px + var(--sa-t, 0px)); padding-right: calc(16px + var(--sa-r, 0px)); padding-bottom: calc(12px + var(--sa-b, 0px)); }
body.run-on:not(.run-c) .run-caption { left: calc(16px + var(--sa-l, 0px) + var(--run-panel-w, 44vw) - 100vw - var(--run-bl)); bottom: calc(16px + var(--sa-b, 0px) - var(--run-bb)); width: calc(100vw - var(--run-panel-w, 44vw) - 32px - var(--sa-l, 0px)); }
/* the output sheet: a document, not a dashboard */
.run-doc { font-family: Charter, "Iowan Old Style", Georgia, serif; color: #17171b; padding: 20px 22px 24px; }
.run-doc header { border-bottom: 2px solid #17171b; padding-bottom: 10px; margin-bottom: 8px; }
.run-doc .kind { font: 600 12px/1 Rubik, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #4a4a52; margin: 0 0 6px; }
.run-doc h2 { font: 700 23px/1.2 Charter, Georgia, serif; margin: 0 0 6px; }
.run-doc .req { font-size: 16px; margin: 0 0 4px; }
.run-doc h3 { font: 600 15px/1.25 Rubik, system-ui, sans-serif; margin: 0 0 6px; }
.run-doc p, .run-doc li { font-size: 16px; line-height: 1.5; }
.run-doc .sec { position: relative; padding: 12px 0 10px; border-bottom: 1px solid #e2e2dc; }
.run-doc .sec.pending h3, .run-doc .pend { color: #8b8d96; }
.run-doc .pend { font: 400 14px/1.3 Rubik, system-ui, sans-serif; margin: 0; }
.run-doc .pend::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #cfd0d4; margin-right: 7px; vertical-align: 1px; }
.run-doc .sec.is-fresh::before { content: ""; position: absolute; inset: 0 -12px; background: #fff3b0; border-radius: 4px; pointer-events: none; z-index: -1; animation: run-fresh 1.8s ease-out forwards; will-change: opacity; }
@keyframes run-fresh { from { opacity: 1; } to { opacity: 0; } }
.run-doc .sec.is-back { border-left: 4px solid #c42b2b; box-shadow: none; padding-left: 12px; }
.run-doc .struck { text-decoration: line-through; text-decoration-color: #c42b2b; text-decoration-thickness: 2px; color: #7a2a2a; }
.run-doc .mnote { display: block; margin: 8px 0 4px; padding: 8px 10px; background: #fdeceb; border: 1.5px solid #c42b2b; border-radius: 8px; font: 400 14px/1.35 Rubik, system-ui, sans-serif; color: #5b1414; }
.run-doc .mnote b { display: block; font-weight: 600; color: #c42b2b; margin-bottom: 2px; }
.run-doc .mnote.ok { display: inline-block; background: #e9f5ec; border-color: #9cd0ad; color: #1f7a43; padding: 3px 9px; }
.run-doc .mnote.ok b { display: inline; color: #1f7a43; margin: 0; font-weight: 500; }
.run-doc .by { margin: 6px 0 0; }
.run-doc .who { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 Rubik, system-ui, sans-serif; white-space: nowrap; margin-right: 10px; }
.run-doc .who i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #888); }
.run-doc .who small { font-weight: 400; color: #4a4a52; font-size: 12px; }
.run-doc .credits { margin-top: 16px; padding: 14px 16px; background: #f3f4f7; border-radius: 10px; font-family: Rubik, system-ui, sans-serif; }
.run-doc .credits ul { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; }
.run-doc .credits li { display: grid; grid-template-columns: minmax(170px, auto) 1fr; gap: 10px; font-size: 14px; align-items: baseline; }
@media (max-width: 480px) { .run-doc { padding: 14px 12px 18px; } .run-doc .credits li { grid-template-columns: 1fr; gap: 2px; } }
.run-doc .fine { font: 400 13px/1.4 Rubik, system-ui, sans-serif; color: #4a4a52; margin: 4px 0 0; }
.run-doc figure { margin: 6px 0 8px; } .run-doc svg { width: 100%; height: auto; display: block; }
/* the folder in a walker's hands (closed; a red tab when it is going back) */
/* sized from its own width (runview.js sets font-size to it), so the flap, tab and border keep the folder's proportions
   at every size; it sits on the paper the carry frame draws in the hands (folderBox) */
.run-folder { position: absolute; left: 0; top: 0; box-sizing: border-box; background: #e9c46a; border: max(1px, .08em) solid #6b4a12; border-radius: .08em .12em .12em .12em; box-shadow: 0 max(1px, .06em) 0 rgba(0,0,0,.25); pointer-events: none; z-index: 3; will-change: transform; }
.run-folder::before { content: ""; position: absolute; left: max(-1px, -.08em); top: -.3em; width: 45%; height: .26em; background: #e9c46a; border: max(1px, .08em) solid #6b4a12; border-bottom: 0; border-radius: .12em .12em 0 0; box-sizing: border-box; }
.run-folder.tab::after { content: ""; position: absolute; right: 12%; top: -.42em; width: 28%; height: .42em; background: #d23b3b; border: max(1px, .08em) solid #7a1414; border-bottom: 0; border-radius: .08em .08em 0 0; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .run-doc .sec.is-fresh::before, .run-doc .sec.is-fresh { animation-duration: .01s; } }
/* Workshop runs: the pieces inside each output (content/runs/*.js) */
.run-doc .struck figure, .run-doc .struck .run-phone { outline: 3px solid #c42b2b; outline-offset: 2px; }
.run-doc .struck figure, .run-doc .struck figure * { text-decoration: none; }
.run-ans { display: grid; grid-template-columns: 28px 1fr; gap: 10px; margin: 0 0 10px; }
.run-ans > b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #1c1e2c; color: #fff; font: 600 14px/1 Rubik, system-ui, sans-serif; }
.run-ans p { margin: 0 0 4px; }
.run-ans.is-sealed p { color: #8b8d96; font: 400 14px/1.4 Rubik, system-ui, sans-serif; }
.run-crit { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.run-crit li b { font: 600 13px/1 Rubik, system-ui, sans-serif; margin-right: 6px; }
.run-tally { display: grid; gap: 6px; font: 400 14px/1.2 Rubik, system-ui, sans-serif; }
.run-tally-row { display: grid; grid-template-columns: 20px 1fr 64px; gap: 8px; align-items: center; }
.run-tally-row em { grid-column: 2 / 4; font-style: normal; color: #4a4a52; font-size: 13px; margin-top: -2px; }
.run-tally-row em:empty { display: none; }
.run-tally-bar { height: 10px; background: #eceef2; border-radius: 5px; overflow: hidden; }
.run-tally-bar i { display: block; height: 100%; background: #1c1e2c; }
.run-verdict { font-size: 19px !important; font-weight: 700; margin: 0 0 6px; }
.run-dissent { background: #f3f4f7; padding: 8px 10px; border-radius: 8px; font: 400 15px/1.45 Rubik, system-ui, sans-serif !important; }
.run-qs { padding-left: 22px; margin: 6px 0 4px; } .run-qs li { margin: 0 0 6px; }
.run-vo { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.run-vo li { display: grid; grid-template-columns: 42px 1fr; gap: 8px; }
.run-vo li > span { font: 500 13px/1.6 Rubik, system-ui, sans-serif; color: #4a4a52; }
.run-vo li p { margin: 0; }
.run-doc .parts { display: block; }
.run-doc [data-sec="frames"] .parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1100px) { .run-doc [data-sec="frames"] .parts { grid-template-columns: repeat(2, 1fr); } }
.run-frame { margin: 0; }
.run-frame svg, .run-frame.is-empty div { border: 1px solid #d6d6cf; border-radius: 4px; aspect-ratio: 16 / 9; display: block; width: 100%; }
.run-frame.is-empty div { background: repeating-linear-gradient(45deg, #f3f3ef 0 8px, #ececE6 8px 16px); }
.run-frame figcaption { font: 400 12px/1.3 Rubik, system-ui, sans-serif; color: #4a4a52; margin-top: 3px; }
.run-timeline { font: 400 13px/1.2 Rubik, system-ui, sans-serif; display: grid; gap: 6px; margin: 4px 0 8px; }
.run-track { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; }
.run-track > span { display: flex; gap: 2px; }
.run-track i { font-style: normal; background: #dfe6f3; border-radius: 3px; padding: 4px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.run-track i.is-voice { background: #e6efe0; text-align: left; } .run-track i.is-gap { background: transparent; }
.run-track i.is-music { background: #f3e6d6; text-align: left; } .run-track i.up { background: #ecd2b4; }
.run-ticks { display: flex; justify-content: space-between; margin-left: 66px; color: #8b8d96; font-size: 12px; }
.run-swatches { display: flex; gap: 8px; margin: 2px 0 8px; flex-wrap: wrap; }
.run-swatches span { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 Rubik, system-ui, sans-serif; }
.run-swatches span::before { content: ""; width: 22px; height: 22px; border-radius: 4px; background: var(--s); border: 1px solid #bbb; }
.run-browser { border: 1px solid #d6d6cf; border-radius: 8px; overflow: hidden; margin: 4px 0 6px; }
.run-browser-bar { display: flex; align-items: center; gap: 5px; padding: 6px 8px; background: #eceae4; font: 400 12px/1 Rubik, system-ui, sans-serif; color: #4a4a52; }
.run-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfccc4; }
.run-browser-bar span { margin-left: 8px; }
.run-browser-page { background: #f5f1e8; padding: 16px; font-family: Rubik, system-ui, sans-serif; }
.run-doc .run-site-hero { font: 700 21px/1.2 Rubik, system-ui, sans-serif; color: #1b1b1f; margin: 0 0 8px; }
.run-doc .run-site-sub { font: 400 14px/1.45 Rubik, system-ui, sans-serif; color: #1b1b1f; margin: 0 0 10px; }
.run-doc .run-site-btn { display: inline-block; background: #c4512b; color: #fff; font: 600 14px/1 Rubik, system-ui, sans-serif; padding: 9px 14px; border-radius: 6px; margin: 2px 0 0; }
.run-cards { display: grid; gap: 8px; margin: 0 0 10px; }
.run-cards.is-row { grid-template-columns: repeat(3, 1fr); }
.run-card { background: #fff; border: 1px solid #ddd6c8; border-radius: 6px; padding: 8px; font: 400 12.5px/1.35 Rubik, system-ui, sans-serif; display: grid; gap: 4px; }
.run-card b { font-weight: 600; font-size: 13px; }
.run-card-pic { display: block; height: 34px; border-radius: 4px; background: linear-gradient(135deg, #f0d8cc, #e7c1ae); }
.run-phone { margin: 6px auto 4px; width: 210px; max-width: 100%; }
.run-phone-screen { width: 210px; height: 300px; border: 8px solid #1b1b1f; border-radius: 22px; background: #f5f1e8; padding: 12px 10px; overflow: hidden; font-family: Rubik, system-ui, sans-serif; }
.run-phone.is-fixed .run-phone-screen { overflow-y: auto; }
.run-phone-screen:focus-visible { outline: 3px solid #c4512b; outline-offset: 2px; }
.run-phone .run-site-hero { font-size: 15px; }
.run-phone.is-broken .run-cards { width: 330px; }
.run-phone figcaption { font: 400 13px/1.35 Rubik, system-ui, sans-serif; color: #4a4a52; margin-top: 6px; text-align: center; }
.run-sides { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.run-sides li b { font-weight: 600; margin-right: 6px; }
.run-round { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 6px 0; border-top: 1px dashed #e2e2dc; }
.run-round:first-child { border-top: 0; }
.run-round > b { font: 600 13px/1.6 Rubik, system-ui, sans-serif; color: #4a4a52; }
.run-round p { margin: 0 0 4px; }
.run-round .run-round-h { font: 600 15px/1.4 Rubik, system-ui, sans-serif; }
.run-round.is-empty p { color: #8b8d96; font: 400 14px/1.4 Rubik, system-ui, sans-serif; }
/* a struck picture (the phone check) is outlined in red; its text stays readable */
.run-doc .struck:has(figure) { text-decoration: none; color: inherit; }
/* desktop and iPad: the run panel sits on the right, so MENU/sound step aside; phones: city bar and all corner buttons step aside */
body.run-on .hud-right { display: none !important; }
body.run-on.run-c #citybar, body.run-on.run-c .hud, body.run-on.run-short #citybar, body.run-on.run-short .hud { display: none !important; }
/* the film's cut never runs off a phone's edge */
.run-track { grid-template-columns: 52px minmax(0, 1fr); }
.run-track > span { min-width: 0; overflow: hidden; }
@media (max-width: 480px) { .run-track i { padding: 4px 1px; font-size: 11.5px; } }
/* a voice-over line that was sent back or fixed keeps its note in the text column */
.run-vo li > :not(:first-child) { grid-column: 2; justify-self: start; }