/* Brightwork Office components on top of studio.css: typeset documents, search theatre, formats. Shared by /office and the demonstration pages. */
/* Brightwork Office. Typeset documents take the place of Creative's photographs; everything else is the studio system. */
.sheet{position:relative;background:var(--surface);color:var(--fg);font:14px/1.55 var(--font-body);text-align:left;padding:26px 28px 30px;box-shadow:0 1px 0 color-mix(in oklch,var(--fg) 6%,transparent),0 22px 44px -24px color-mix(in oklch,var(--fg) 55%,transparent)}
.sheet h4{font:650 15px/1.3 var(--font-display);letter-spacing:-.01em;margin:16px 0 6px}
.sheet h4:first-child,.sheet .sheet-head+h4{margin-top:0}
.sheet p,.sheet li{margin:0 0 7px;max-width:72ch}
.sheet ul,.sheet ol{margin:0 0 10px;padding-left:20px}
.sheet hr{border:0;border-top:1px solid var(--border);margin:14px 0}
.sheet-head{display:flex;justify-content:space-between;gap:12px;font:11px/1.4 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:16px}
.sheet.is-source{background:color-mix(in oklch,var(--surface) 90%,var(--bg))}
.sheet.is-notes{font:13px/1.6 var(--font-mono)}
.sheet .ts{font:12px var(--font-mono);color:var(--muted);margin-right:6px}
.sheet .review,.dialog-body>.review{border-left:3px solid var(--accent);background:color-mix(in oklch,var(--accent) 7%,var(--surface));padding:12px 14px;margin:0 0 18px;font-size:13px}
.sheet .review strong,.dialog-body>.review strong{display:block;font:600 12px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;color:var(--accent)}
.sheet .review ul{margin:4px 0 0;padding-left:18px}
.sheet .review li{margin:0 0 4px}
.dialog-body>.review ul{margin:4px 0 0;padding-left:18px;color:var(--fg);font-size:14px}
.sheet .review.is-clean,.dialog-body>.review.is-clean{border-left-color:var(--muted);background:color-mix(in oklch,var(--fg) 4%,var(--surface))}
.sheet .review.is-clean strong,.dialog-body>.review.is-clean strong{color:var(--muted)}
/* Hero: the lease on the desk, the summary writing itself over it. */
.office-hero .hero-media{background:var(--fg)}
.desk-stage{position:absolute;inset:0;overflow:hidden}
.desk-stage .sheet{position:absolute;overflow:hidden}
.desk-lease{width:31%;height:82%;right:calc(var(--gutter) + 22%);top:9%;transform:rotate(-4deg);opacity:.5;font-size:12px}
.desk-summary{width:36%;height:80%;right:var(--gutter);top:13%;transform:rotate(1.2deg);font-size:13.5px}
.desk-summary .typed{min-height:100%}
.desk-summary::after,.desk-lease::after{content:'';position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--surface));pointer-events:none}
.desk-lease::after{background:linear-gradient(transparent,color-mix(in oklch,var(--surface) 90%,var(--bg)))}
.caret{display:inline-block;width:.5em;height:1.05em;margin-left:1px;background:var(--accent);vertical-align:-2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media(max-width:920px){
 .office-hero .hero-media{aspect-ratio:4/5;width:100%}
 .desk-lease{width:70%;height:62%;left:4%;right:auto;top:4%}
 .desk-summary{width:78%;height:70%;right:4%;top:26%}
 .office-hero .hero-media::after{display:none}
}
/* Carousel visuals: two sheets on a tinted ground per document set. */
.doc-scene{position:relative;width:100%;height:100%;overflow:hidden;background:var(--scene,var(--accent))}
.doc-scene .sheet{position:absolute;overflow:hidden;font-size:12.5px}
.doc-scene .sheet::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,var(--surface));pointer-events:none}
.doc-scene .sheet.is-source::after{background:linear-gradient(transparent,color-mix(in oklch,var(--surface) 90%,var(--bg)))}
.doc-scene .scene-a{width:46%;height:84%;left:8%;top:10%;transform:rotate(-3deg)}
.doc-scene .scene-b{width:46%;height:86%;right:7%;top:6%;transform:rotate(2deg)}
.doc-scene .scene-badge{position:absolute;left:12px;bottom:12px;padding:5px 8px;background:var(--fg);color:var(--surface);font:11px/1.3 var(--font-mono);letter-spacing:.05em}
.doc-scene .sheet .review{font-size:11.5px;padding:9px 11px}
.doc-scene .scene-label{position:absolute;left:24px;bottom:18px;font:12px/1.4 var(--font-mono);letter-spacing:.07em;color:var(--surface);text-transform:uppercase}
.doc-scene[data-set="first-draft"]{--scene:color-mix(in oklch,var(--fg) 82%,var(--accent))}
.doc-scene[data-set="open-file"]{--scene:color-mix(in oklch,var(--accent) 55%,var(--fg))}
.doc-scene[data-set="on-the-record"]{--scene:color-mix(in oklch,var(--fg) 92%,var(--surface))}
.doc-scene[data-set="plain-english"]{--scene:color-mix(in oklch,var(--accent) 80%,var(--surface))}
@media(max-width:920px){.doc-scene .scene-a{width:78%;height:58%;left:5%;top:5%}.doc-scene .scene-b{width:80%;height:64%;right:5%;top:31%}}
/* Who it's for: a page thumbnail instead of a photograph. */
.rail-img .doc-scene{aspect-ratio:7/4}
.rail-img .doc-scene .sheet{font-size:11px;padding:16px 18px}
.rail-img .doc-scene .scene-b{width:62%;height:120%;right:10%;top:12%}
.rail-img .doc-scene .scene-a{display:none}
/* Candidate workflows: a typographic tile, never a faked document. */
.type-tile{aspect-ratio:7/4;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:20px 22px;background:color-mix(in oklch,var(--fg) 90%,var(--accent));color:var(--surface)}
.type-tile .tile-from{font:12px/1.4 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:color-mix(in oklch,var(--surface) 70%,var(--fg))}
.type-tile .tile-to{font:650 clamp(22px,2vw,30px)/1.1 var(--font-display);letter-spacing:-.02em}
/* Playground */
.doc-frame{display:block!important;background:color-mix(in oklch,var(--fg) 7%,var(--bg))!important;overflow:hidden;position:relative}
.featured-art.doc-frame .sheet{position:absolute;inset:18px 18px 0;overflow:auto;padding-bottom:40px;scrollbar-width:thin}
.featured-art.doc-frame .sheet:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.supporting-art .doc-frame .sheet{position:absolute;inset:10px 10px 0;overflow:hidden;font-size:9.5px;padding:12px 14px;pointer-events:none}
.supporting-art .doc-frame .sheet .sheet-head{font-size:8.5px;padding-bottom:6px;margin-bottom:8px}
.supporting-art .doc-frame .sheet .review{display:none}
.supporting-art .doc-frame .sheet h4{font-size:11px}
.supporting-art .doc-frame::after{content:''!important;display:block!important;position:absolute;left:0;right:0;bottom:0;height:40px;border:0!important;inset:auto 0 0 0;background:linear-gradient(transparent,color-mix(in oklch,var(--fg) 7%,var(--bg)))}
.audio-sheet audio{width:100%;margin:6px 0 14px}
.review-flag{display:inline-block;margin-left:8px;color:var(--accent)}
/* Control: documents side by side or alone. */
.compare-docs{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;padding:56px 22px 0;height:100%}
.compare-docs .sheet{overflow:auto;max-height:100%;padding-bottom:34px}
.compare-docs .arrow{align-self:center;font:28px var(--font-mono);color:var(--muted)}
.compare-docs[data-mode="before"] .after-doc,.compare-docs[data-mode="before"] .arrow,.compare-docs[data-mode="after"] .before-doc,.compare-docs[data-mode="after"] .arrow{display:none}
.compare-docs[data-mode="before"],.compare-docs[data-mode="after"]{grid-template-columns:minmax(0,820px);justify-content:center}
.compare-stage.doc-compare{aspect-ratio:auto;height:min(72svh,640px);background:color-mix(in oklch,var(--fg) 6%,var(--bg))}
.compare-stage.doc-compare .label{position:absolute;top:16px;z-index:2;padding:8px 10px;background:var(--fg);color:var(--surface);font:12px/1.5 var(--font-mono);letter-spacing:.06em}
.compare-stage.doc-compare .label.before{left:22px}
.compare-stage.doc-compare .label.after{right:22px}
.compare-docs[data-mode="before"]~.label.after,.compare-docs[data-mode="after"]~.label.before{display:none}
@media(max-width:920px){
 .compare-stage.doc-compare{height:auto}
 .compare-docs{grid-template-columns:1fr;padding:54px 12px 12px}
 .compare-docs .arrow{transform:rotate(90deg);justify-self:center}
 .compare-docs .sheet{max-height:62svh}
}
/* Search theatre */
.qa-screen{background:color-mix(in oklch,var(--fg) 94%,var(--surface));border:1px solid color-mix(in oklch,var(--surface) 22%,var(--fg));padding:clamp(18px,3vw,36px);min-height:420px;display:flex;flex-direction:column;gap:22px}
.qa-q{align-self:flex-end;max-width:min(560px,90%);background:var(--surface);color:var(--fg);padding:14px 18px;font-size:17px;line-height:1.45}
.qa-q small{display:block;font:12px var(--font-mono);color:var(--muted);margin-bottom:4px;letter-spacing:.06em;text-transform:uppercase}
.qa-a{max-width:68ch;color:var(--surface);font-size:16px;line-height:1.6}
.qa-a h4{font:600 16px/1.3 var(--font-display);margin:14px 0 6px}
.qa-a p,.qa-a li{margin:0 0 8px}
.qa-a ul,.qa-a ol{padding-left:20px;margin:0 0 10px}
.qa-a strong{color:var(--surface)}
.qa-a .review{border-left:3px solid var(--surface);background:color-mix(in oklch,var(--surface) 8%,var(--fg));padding:12px 14px;margin:0 0 18px;font-size:13px;line-height:1.5}
.qa-a .review strong{display:block;font:600 12px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.qa-a .review ul{margin:4px 0 0;padding-left:18px}
.qa-a ul ul,.qa-a ol ul,.sheet ol ul,.sheet ul ul{margin:6px 0 4px}
.qa-meta{margin-top:auto;font:12px/1.5 var(--font-mono);color:color-mix(in oklch,var(--surface) 70%,var(--fg));letter-spacing:.03em}
.passages{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.passages li{border:1px solid color-mix(in oklch,var(--surface) 22%,var(--fg));padding:12px 14px;font-size:13px;line-height:1.45;color:color-mix(in oklch,var(--surface) 80%,var(--fg))}
.passages li:first-child{border-color:var(--surface)}
.passages b{display:flex;justify-content:space-between;gap:10px;font:12px/1.4 var(--font-mono);letter-spacing:.05em;color:var(--surface);font-weight:400;margin-bottom:6px;text-transform:uppercase}
.passages strong{color:var(--surface);font-weight:600}
.passages p{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.film-strip.ask-strip{grid-template-columns:repeat(5,minmax(0,1fr))}
.film-strip.ask-strip button{flex-direction:column;justify-content:space-between;text-align:left;font-size:14px;line-height:1.35}
@media(max-width:1100px){.film-strip.ask-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.film-strip.ask-strip{grid-template-columns:1fr}.qa-screen{min-height:0}}
/* Payoff: one call, three formats. */
.format-frame{display:block!important;padding:0!important;overflow:hidden;position:relative;background:color-mix(in oklch,var(--fg) 7%,var(--bg))!important}
.format-frame::before,.format-frame::after{display:none!important}
.format-frame .sheet{position:absolute;inset:16px 16px 0;overflow:hidden;font-size:12px}
.format-frame .sheet::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,var(--surface))}
.mail-card .sheet-head{text-transform:none;letter-spacing:0;font-size:12px;display:grid;gap:2px}
.phone{text-align:left;font-family:var(--font-body);
 position:absolute;inset:14px 10% 0;border:2px solid var(--fg);border-bottom:0;border-radius:26px 26px 0 0;background:var(--surface);padding:34px 14px 14px;display:flex;flex-direction:column;justify-content:flex-start;gap:10px}
.phone::before{content:'';position:absolute;top:12px;left:50%;width:46px;height:5px;margin-left:-23px;border-radius:3px;background:var(--border)}
.phone small{font:11px var(--font-mono);color:var(--muted);text-align:center}
.bubble{align-self:flex-start;max-width:92%;background:color-mix(in oklch,var(--fg) 8%,var(--surface));padding:10px 12px;border-radius:14px 14px 14px 4px;font-size:13px;line-height:1.45}
/* Sourced difference and seat calculator reuse Creative's classes. */
.office-note{font-size:14px;color:var(--muted);max-width:65ch}
.dialog-body .sheet{box-shadow:none;border:1px solid var(--border)}
.dialog-body pre{white-space:pre-wrap;font:13px/1.55 var(--font-mono);background:color-mix(in oklch,var(--fg) 4%,var(--surface));padding:14px 16px;margin:0;color:var(--fg)}
@media(max-width:920px){
 .featured-art.doc-frame{aspect-ratio:auto!important;height:min(72svh,540px)}
 .compare-stage.doc-compare .label{display:none}
 .compare-docs{padding-top:12px}
 .theatre .motion-side{display:block}
 .theatre .motion-side .eyebrow{margin-top:20px}
}
@media(max-width:600px){
 #formats .campaign-spread{grid-template-columns:1fr}
 #formats .campaign-spread figure:first-child{grid-column:auto}
 #formats .campaign-spread figure:nth-child(3){max-width:none;justify-self:stretch}
 #formats .campaign-spread figure:nth-child(2) .ph-img,#formats .campaign-spread figure:nth-child(3) .ph-img{aspect-ratio:4/5}
 #formats .campaign-spread figure:first-child .ph-img{aspect-ratio:4/5}
}
@media(prefers-reduced-motion:reduce){.caret{animation:none}}
/* Further demonstrations (17 Oct 2026): tables, code, scans, raw JSON and right-to-left text inside a sheet. */
.sheet .table-wrap{overflow-x:auto;max-width:100%;margin:6px 0 14px}
.sheet table{border-collapse:collapse;width:100%;font-size:inherit}
.sheet th,.sheet td{text-align:left;vertical-align:top;padding:6px 12px 6px 0;border-bottom:1px solid var(--border)}
.sheet thead th{font:600 .82em/1.35 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sheet table.kv th{width:28%;font-weight:600;white-space:nowrap}
.sheet pre.code{overflow-x:auto;max-width:100%;margin:6px 0 14px;padding:12px 14px;background:color-mix(in oklch,var(--fg) 5%,var(--surface));font:.92em/1.5 var(--font-mono);white-space:pre}
.sheet code{font-family:var(--font-mono);font-size:.94em}
.sheet figure.scan{margin:0}.sheet figure.scan img{display:block;width:100%;height:auto;border:1px solid var(--border)}
.sheet details.raw{margin-top:14px;border-top:1px solid var(--border);padding-top:8px}.sheet details.raw summary{cursor:pointer;font-weight:600}
.sheet [dir=rtl]{text-align:right}.sheet [dir=rtl] ul,.sheet [dir=rtl] ol{padding-left:0;padding-right:20px}
.rail-card .rail-more{display:inline-flex;gap:8px;margin-top:10px;font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:4px}
.rail .sheet ul,.rail .sheet ol{display:block;overflow:visible;margin:0 0 8px;padding:0 0 0 18px;gap:0;scroll-snap-type:none}
.rail .sheet ul{list-style:disc}.rail .sheet ol{list-style:decimal}
/* Rail thumbnails show the start of each output: tables keep the columns that fit the card (three on wide cards, two below 1267px, where cards are narrower), and long lines wrap. */
.rail .sheet .table-wrap{overflow:hidden}.rail .sheet table:not(.kv){table-layout:fixed}.rail .sheet thead th,.rail .sheet table.kv th{white-space:normal}.rail .sheet th,.rail .sheet td{padding-right:8px}
.rail .sheet table:not(.kv) th:nth-child(n+4),.rail .sheet table:not(.kv) td:nth-child(n+4){display:none}
@media(max-width:1266px){.rail .sheet table:not(.kv) th:nth-child(n+3),.rail .sheet table:not(.kv) td:nth-child(n+3){display:none}}
.rail .sheet pre.code{white-space:pre-wrap;overflow:hidden}.rail .sheet p,.rail .sheet li,.rail .sheet td,.rail .sheet pre.code{overflow-wrap:break-word}