/* Direction B. Every number below comes from direction.js through custom properties that app.js
   writes on :root at startup (applyDirection). The 850px and 1320px breakpoints mirror
   direction.phoneMaxWidth and the documentWidthCompact rule; media queries cannot read variables. */
@font-face{font-family:Geist;src:url('./Geist-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
/* Crew clarity visual system (2026-11-06): glass surfaces (72% white, blur 32px saturate 180%, a hairline, one broad
   soft shadow), radius scale 6 / 16 / 24 / 30 / 999, two weights (400, 600), one accent, tabular figures on money,
   13px minimum text (12 at 320). Buttons carry no shadow. */
:root{color-scheme:light;font-family:Geist,'Helvetica Neue',Arial,sans-serif;color:var(--c-ink);background:var(--c-page);--header-bg:#fbf8f3;--shadow-soft:0 8px 24px rgba(34,29,38,.10);--shadow-panel:0 18px 48px rgba(34,29,38,.14)}
/* Crew clarity (2026-11-06): this stylesheet is shared with the nine district demos, which must not change in this lane.
   Every crew clarity rule is therefore scoped with :where([data-app=crew]) (only experiments/crew-world/index.html
   carries data-app="crew" on <html>) and sits right after the shared rule it adjusts, so the crew office's cascade is
   the restyled one and every district keeps the shared rule as it was. :where() adds no specificity. */
:root:where([data-app=crew]){--shadow-soft:0 12px 32px rgba(40,28,14,.10);--shadow-panel:0 30px 70px rgba(40,28,14,.16);--glass:rgba(255,255,255,.72);--glass-filter:blur(32px) saturate(180%);--glass-edge:inset 0 0 0 .5px rgba(255,255,255,.7),0 0 0 .5px rgba(0,0,0,.05);--r-xs:6px;--r-md:16px;--r-lg:24px;--r-xl:30px;--r-pill:999px}
:where([data-app=crew]) .num{font-variant-numeric:tabular-nums}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--c-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,dl,dd{margin:0}
button,a{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{cursor:pointer;border:0;background:none;padding:0;text-align:inherit}
a{text-decoration:none}
:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
[tabindex="-1"]:focus-visible{outline:3px solid var(--c-accent);outline-offset:4px;border-radius:4px}
:where([data-app=crew]) [tabindex="-1"]:focus-visible{border-radius:var(--r-xs)}
/* The anchored labels (.cubie, .inbox-item, .room-label) position with the individual translate property, so this transform cannot knock them off their anchor. */
button:active{transform:scale(.98)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-100px;z-index:50;padding:12px 16px;border-radius:12px;background:var(--c-surface);box-shadow:var(--shadow-soft)}
:where([data-app=crew]) .skip{border-radius:var(--r-pill);box-shadow:none}
/* A hairline edge drawn as an outline (no shadow on controls); the keyboard focus ring replaces it. */
:where([data-app=crew]) .skip:not(:focus-visible),:where([data-app=crew]) .inbox-item:not(:focus-visible),:where([data-app=crew]) .room-label:not(:focus-visible){outline:1px solid var(--c-hairline);outline-offset:-1px}
.skip:focus{top:8px}
/* Header: light, one hairline, text controls, Book a call becomes a pill once a document lands. */
.topbar{position:relative;z-index:30;height:var(--header-h,56px);display:flex;align-items:center;gap:4px;padding:0 16px 0 20px;background:var(--header-bg);border-bottom:1px solid var(--c-hairline)}
:where([data-app=crew]) .topbar{box-shadow:0 .5px 0 var(--c-hairline);border-bottom:0}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;min-width:44px;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand img{width:30px;height:30px;display:block}
/* The shared demo bar (2026-11-08, plan 2026-11-08-demo-bar.md): the switcher names the demo you are in and opens the
   menu of every demo, a native popover (demo-bar.js adds Escape, focus and the panel's left edge). Desktop: a panel
   under the bar. Phone: a bottom sheet. Hidden unless it is an open popover, so a browser without popover support
   never shows it (it drops the :popover-open rule and keeps display:none). */
.demo-switch{min-height:44px;min-width:72px;max-width:280px;display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding:0 12px 0 14px;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--c-ink);transition:background-color .18s var(--ease-standard)}
.demo-switch::before{content:'';width:1px;height:20px;margin:0 12px 0 -14px;background:var(--c-hairline)}
.demo-switch-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-chevron{flex:none;color:var(--c-muted);transition:transform .2s var(--ease-standard)}
.demo-switch[aria-expanded=true] .demo-chevron{transform:rotate(180deg)}
.demo-menu{display:none;position:fixed;inset:auto;top:calc(var(--header-h,56px) + 6px);left:var(--menu-left,12px);width:min(320px,calc(100vw - 24px));max-height:calc(100svh - var(--header-h,56px) - 24px);margin:0;padding:8px;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:20px;background:var(--c-surface);color:var(--c-ink);box-shadow:0 0 0 .5px rgba(0,0,0,.08),var(--shadow-panel)}
.demo-menu:popover-open{display:flex;flex-direction:column;animation:menu-in .2s var(--ease-standard)}
.demo-menu-eyebrow{padding:8px 12px 6px;font-size:13px;font-weight:500;color:var(--c-muted)}
.demo-menu-list{margin:0;padding:0;list-style:none}
.demo-item{min-height:44px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:12px;font-size:15px;line-height:20px;color:var(--c-ink)}
.demo-cube{flex:none;display:block}
.demo-item-name{flex:1;min-width:0}
.demo-item[aria-current=page]{font-weight:600;background:color-mix(in srgb,var(--c-accent) 8%,transparent)}
.demo-check{flex:none;color:var(--c-accent)}
.demo-menu-foot{display:flex;gap:4px;margin-top:6px;padding-top:6px;border-top:1px solid var(--c-hairline)}
.demo-menu-all{flex:1;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border-radius:12px;font-size:14px;font-weight:500;color:var(--c-accent);white-space:nowrap}
/* The crew office's type uses two weights (400, 600); its bar and menu follow. */
:where([data-app=crew]) .demo-switch,:where([data-app=crew]) .demo-menu-eyebrow,:where([data-app=crew]) .demo-menu-all{font-weight:400}
/* The "?" About button sits right after the switcher; the About box (a room's #dialog) reads "What you get", "What the
   AI does", the helpers and one closing line (Addendum A). */
.demo-about{margin-left:2px;color:var(--c-ink)}
.demo-question{display:block}
.about-label{margin:18px 0 4px;font-size:13px;font-weight:500;color:var(--c-muted)}
.about-get{font-size:17px;line-height:24px;font-weight:600;color:var(--c-ink)}
.about-list{margin:4px 0 0;padding-left:18px}
.about-list li{margin:4px 0}
.about-closing{margin-top:16px;font-size:13px;color:var(--c-muted)}
.about-note{margin-top:6px;font-size:13px;color:var(--c-muted)}
:where([data-app=crew]) .about-label{font-weight:400}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:2px}
.quiet{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;border-radius:12px;font-size:14px;font-weight:500;white-space:nowrap;color:var(--c-ink);transition:background-color .18s var(--ease-standard)}
:where([data-app=crew]) .quiet{border-radius:var(--r-pill);font-weight:400}
.icon{width:44px;padding:0;font-size:15px}
.icon-glyph{display:block;width:16px;height:16px;fill:currentColor}
/* V8: one Book a call, one shape for the whole visit: the filled pill from the first frame (the city caption no longer repeats it). */
.book{min-height:44px;display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:0 18px;border-radius:999px;background:var(--c-primary);color:var(--c-on-primary);font-size:14px;font-weight:500;white-space:nowrap;transition:background-color .2s var(--ease-standard)}
:where([data-app=crew]) .book{font-weight:400}
/* Stage: full bleed under the header. The scene positions every label inside .world. */
/* Fallbacks mirror direction.js layout.headerHeight (56 desktop, 48 phone) and sceneShare (.66) so the stage and
   its loader have size before app.js writes the variables. */
.experience{position:relative;height:calc(100svh - var(--header-h,56px));overflow:hidden;background:var(--c-page)}
.world{position:absolute;inset:0;overflow:hidden;background:var(--c-page) var(--fallback,none) center/cover no-repeat}
.webgl-ready .world:not(.static-world){background-image:none}
.world canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity var(--t-street-fade) var(--ease-standard)}
/* First paint on the street: the sky gradient to 60 percent, then the page colour; the live canvas fades in
   once .street-ready lands. The overview still is only the no-WebGL fallback, never the street pre-paint. */
.experience[data-view=street] .world:not(.static-world){background-image:linear-gradient(var(--c-sky-top),var(--c-sky-bottom) 60%,var(--c-page) 60%)}
.experience[data-view=street] .world.static-world{background-image:var(--still-overview)}
.experience[data-view=street] .world:not(.street-ready) canvas,.experience[data-view=street] .world:not(.street-ready) #paper-tags{opacity:0}
#paper-tags{transition:opacity var(--t-street-fade) var(--ease-standard)}
.static-world canvas{display:none}
.labels{position:absolute;inset:0;pointer-events:none}
.labels>*{pointer-events:auto}
.world-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.static-world .world-status{width:auto;height:auto;clip:auto;right:16px;top:16px;z-index:3;padding:6px 10px;border-radius:999px;background:var(--c-surface);font-size:12px;color:var(--c-muted)}
:where([data-app=crew]) .static-world .world-status{font-size:13px}
/* Loader: painted by the HTML before any module arrives (app.js sets the direction variables later, so every
   colour has a first-paint fallback). app.js names each real milestone and hides it once the first scene is drawn.
   On arrival three cubes of the approved cast (vendor/cast.js on-screen colours: Cubsy, Maya, Nora) wait on the
   street's horizon, the 60% line the street pre-paint draws and the 3D street fades in on, with the stage named on
   the pavement below. Over a drawn scene (a room being built later) the same line sits on a translucent surface. */
.world-loader{position:absolute;inset:0;z-index:4;display:grid;grid-template-rows:60% auto auto 1fr;justify-items:center;padding:0 24px;pointer-events:none;text-align:center}
/* Arrival only (the street has not drawn yet): the loader's own backdrop softens the pre-paint's hard 60% horizon
   into a warm band and lights the spot where the cubes stand. It leaves with the loader, as the 3D street appears. */
.experience[data-view=street] .world:not(.street-ready) .world-loader{background:radial-gradient(ellipse 46% 30% at 50% 60%,rgba(255,224,182,.6),rgba(255,224,182,0) 72%),linear-gradient(var(--c-sky-top,#4a93ee) 0%,var(--c-sky-bottom,#cfe6fb) 52%,var(--c-page,#f5f2ec) 68%,color-mix(in srgb,var(--c-page,#f5f2ec) 92%,#b4a38f) 100%)}
.world-loader-crew{align-self:end;display:flex;gap:12px}
.world-loader-crew i{display:block;width:36px;height:36px;border-radius:8px;background:var(--crew,#5b95f2);box-shadow:0 10px 12px -8px rgba(34,29,38,.4);animation:world-loader-bob 1.6s cubic-bezier(.45,0,.55,1) infinite}
:where([data-app=crew]) .world-loader-crew i{border-radius:var(--r-xs)}
.world-loader-crew i:nth-child(2){--crew:#a59cf2;animation-delay:.18s}
.world-loader-crew i:nth-child(3){--crew:#e9773f;animation-delay:.36s}
@keyframes world-loader-bob{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-8px)}}
.world-loader-text{margin-top:16px;max-width:320px;color:var(--c-ink,#221d26);font-size:15px;line-height:20px;font-weight:400}
.street-ready .world-loader-text{padding:8px 16px;border-radius:999px;background:color-mix(in srgb,var(--c-surface,#fffdf9) 80%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.world-loader-actions{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;pointer-events:auto}
.world-loader-actions .quiet{padding:0 20px;border-radius:999px;font-size:15px;font-weight:400;background:color-mix(in srgb,var(--c-surface,#fffdf9) 80%,transparent)}
.world-loader-actions .world-loader-primary{background:var(--c-primary,#221d26);color:var(--c-on-primary,#fff)}
.world-loader.is-failed .world-loader-crew i{animation:none;opacity:.45}
@media(scripting:none){.world-loader{display:none}}
/* Name tags: all three between runs, only the active one during beats (the scene sets visibility). */
.cubie{position:absolute;z-index:2;translate:-50% -100%;min-height:44px;min-width:44px;padding:0 4px;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
.webgl-ready .cubie{opacity:1;pointer-events:auto}
.cubie span{display:inline-flex;padding:5px 12px;border-radius:999px;background:var(--c-surface);color:var(--c-ink);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;box-shadow:0 2px 10px rgba(34,29,38,.12)}
:where([data-app=crew]) .cubie span{border-radius:var(--r-pill);background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);font-weight:400;box-shadow:var(--glass-edge)}
:where([data-app=crew]) .cubie[data-active] span{background:var(--c-primary);color:var(--c-on-primary);box-shadow:none}
.cubie[aria-pressed=true] span{background:var(--c-primary);color:var(--c-on-primary)}
.static-world #crew{inset:auto;left:16px;top:16px;display:flex;gap:6px}
.static-world .cubie{position:static;translate:none;opacity:1;visibility:visible!important;pointer-events:auto}
/* R3: none while a landed document is shown (app.js sets data-tags); this beats the scene's inline visibility. */
.experience[data-tags=hidden] .world:not(.static-world) .cubie{visibility:hidden!important}
/* Scene-anchored chips start hidden; world.projectLabels() places them and makes them visible. */
.inbox-item,.room-label{position:absolute;z-index:3;translate:-50% -50%;visibility:hidden;min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;background:var(--c-surface);color:var(--c-ink);font-size:14px;line-height:20px;white-space:nowrap;box-shadow:0 4px 16px rgba(34,29,38,.14)}
:where([data-app=crew]) .inbox-item,:where([data-app=crew]) .room-label{box-shadow:none}
/* R7: city chips are cityChip.height tall with cityChip.fontSize text; a pseudo-element keeps the 44px hit area. */
.inbox-item{min-height:0;height:var(--chip-h);padding:0 var(--chip-pad);font-size:var(--chip-font);line-height:18px}
.inbox-item::before{content:'';position:absolute;inset:calc((var(--chip-h) - 44px) / 2) 0}
.inbox-item strong{font-weight:600}
.inbox-item span{color:var(--c-muted)}
.static-world #inbox{inset:16px 16px auto 16px;display:flex;flex-wrap:wrap;gap:6px}
.static-world .inbox-item{position:relative;translate:none;visibility:visible!important}
/* The tag hangs 10px below its sheet's bottom-centre anchor; the phone street pill sits above the envelope. */
.paper-tag{position:absolute;z-index:2;transform:translate(-50%,10px);visibility:hidden;max-width:240px;padding:8px 12px;border-radius:12px;background:var(--c-surface);box-shadow:0 4px 16px rgba(34,29,38,.12);font-size:13px;line-height:18px;pointer-events:none}
:where([data-app=crew]) .paper-tag{border-radius:var(--r-md)}
/* R4: the pill's bottom edge sits envelope.phoneTagGap above its anchor, the envelope's top-most projected point. */
.paper-tag[data-paper=request]{transform:translate(-50%,calc(-100% - var(--envelope-gap)))}
.paper-tag span{display:block;color:var(--c-muted)}
.work-object{position:absolute;transform:translate(-50%,-50%);visibility:hidden}
/* The active chip sits just above the caption bar's top-left corner while beats run. */
.beat-chip{position:absolute;z-index:7;left:var(--caption-left);bottom:calc(var(--caption-bottom) + var(--caption-live-h,var(--caption-h)) + 10px);max-width:calc(100% - 2 * var(--caption-left));padding:7px 14px;border-radius:999px;background:var(--c-surface);color:var(--c-ink);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--shadow-soft);pointer-events:none}
:where([data-app=crew]) .beat-chip{font-weight:400}
/* Caption bar: one caption, at most two actions. One 76px row that never resizes during a beat (the copy
   is capped to fit); decision and result captions stack (data-layout=stack). Text wraps, never ellipsis. */
/* V10: fallbacks mirror direction.js layout.desktop (captionLeft 24, captionBottom 24, captionWidth 720, captionHeight 76,
   captionRadius 18), so the bar is already in place on the first frame instead of jumping there when app.js runs. */
.caption{position:absolute;z-index:8;left:var(--caption-left,24px);bottom:var(--caption-bottom,24px);width:min(var(--caption-w,720px),calc(100% - 2 * var(--caption-left,24px)));min-height:var(--caption-h,76px);display:flex;align-items:center;gap:16px;padding:12px 14px 12px 24px;border-radius:var(--caption-r,18px);background:color-mix(in srgb,var(--c-surface) 94%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-soft)}
:where([data-app=crew]) .caption{border-radius:var(--r-lg);background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--glass-edge),var(--shadow-soft)}
.experience[data-doc=shown] .caption{width:min(var(--caption-w),calc(100% - var(--doc-w) - 2 * var(--doc-inset) - var(--caption-left) - 16px))}
.caption-text{flex:1 1 220px;min-width:0}
.caption-eyebrow{display:none}
#caption-title{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere;text-wrap:balance}
.caption-detail{margin-top:2px;font-size:14px;line-height:20px;color:var(--c-muted);overflow-wrap:anywhere}
.caption-actions{flex:none;display:flex;align-items:center;gap:4px;margin-left:auto}
@media(min-width:851px){
 .caption[data-layout=stack]{flex-direction:column;align-items:stretch;gap:12px;padding:16px 14px 14px 24px}
 .caption[data-layout=stack] .caption-text{flex:none}
 .caption[data-layout=stack] .caption-actions{margin-left:0}
}
.caption-actions:empty{display:none}
.caption-actions[data-decision]>*{animation:rise-in var(--t-caption) var(--ease-standard) var(--t-decision) both}
@keyframes rise-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:none}}
.primary{min-height:var(--btn-h);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:999px;background:var(--c-primary);color:var(--c-on-primary);font-size:15px;line-height:20px;font-weight:500;white-space:nowrap;transition:background-color .18s var(--ease-standard)}
:where([data-app=crew]) .primary{padding:0 24px;border-radius:var(--r-pill);font-size:16px;font-weight:400}
.text-button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 12px;border-radius:12px;font-size:15px;line-height:20px;font-weight:500;color:var(--c-accent);white-space:nowrap;transition:background-color .18s var(--ease-standard)}
:where([data-app=crew]) .text-button{border-radius:var(--r-pill);font-weight:400}
.art-button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding:8px 0;border-top:1px solid var(--c-hairline);font-size:14px;line-height:20px;color:var(--c-accent);text-align:left}
/* Document panel (desktop): appears only when a document exists, slides in from the right. */
.document{position:absolute;z-index:8;top:var(--doc-inset);right:var(--doc-inset);bottom:var(--doc-inset);width:var(--doc-w);display:flex;flex-direction:column;border-radius:var(--doc-r);background:var(--c-surface);box-shadow:var(--shadow-panel);overflow:hidden}
:where([data-app=crew]) .document{border-radius:var(--r-xl);background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--glass-edge),var(--shadow-panel)}
@media(max-width:1319px){.document{width:var(--doc-w-compact)}.experience[data-doc=shown] .caption{width:min(var(--caption-w),calc(100% - var(--doc-w-compact) - 2 * var(--doc-inset) - var(--caption-left) - 16px))}}
.doc-head{position:relative;flex:none;padding:28px 28px 16px}
.doc-kicker{padding-right:72px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
:where([data-app=crew]) .doc-kicker{font-size:13px;font-weight:600;letter-spacing:.07em}
.doc-head h2{margin-top:8px;font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.doc-tab{display:inline-block;margin-top:10px;padding:3px 10px;border-radius:999px;font-size:13px;line-height:18px;font-weight:500;color:var(--c-accent);background:color-mix(in srgb,var(--c-accent) 8%,transparent)}
:where([data-app=crew]) .doc-tab{font-weight:400}
.doc-tab[data-status=held],.doc-tab[data-status=blocked],.doc-tab[data-status=pending]{color:var(--c-held);background:var(--c-held-wash)}
.doc-tab[data-status=approved]{color:var(--stamp-color);background:var(--c-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--stamp-color) 35%,transparent)}
.doc-close{position:absolute;top:16px;right:14px;font-size:14px}
.doc-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 28px 24px;scrollbar-width:thin}
/* R6: the panel body softens over documentFade px above the footer, so a line cut there reads as "more below".
   Nothing is hidden: at the end of the scroll the body's bottom padding sits under the fade. */
.document .doc-body{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--doc-fade)),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--doc-fade)),transparent)}
.doc-subtitle{padding-bottom:12px;border-bottom:1px solid var(--c-hairline);font-size:14px;line-height:20px;color:var(--c-muted)}
.doc-rows{list-style:none;margin:0;padding:0}
.doc-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 0;border-bottom:1px solid var(--c-hairline)}
.doc-row strong{display:block;font-size:15px;line-height:21px;font-weight:600}
.doc-row small{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--c-muted)}
.doc-row b{font-size:15px;line-height:21px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.doc-row[data-state=held] strong,.doc-row[data-state=held] b{color:var(--c-held)}
.doc-row[data-state=removed] strong,.doc-row[data-state=removed] b{color:var(--c-muted);font-weight:500;text-decoration:line-through}
:where([data-app=crew]) .doc-row[data-state=removed] strong,:where([data-app=crew]) .doc-row[data-state=removed] b{font-weight:400}
.doc-summary{position:relative;padding:12px 0 4px}
.doc-totals div{display:flex;justify-content:space-between;gap:16px;padding:2px 0;font-size:14px;line-height:20px;color:var(--c-muted)}
.doc-totals div:first-child{padding-bottom:6px;font-size:20px;line-height:26px;font-weight:600;color:var(--c-ink)}
.doc-totals dd{font-variant-numeric:tabular-nums}
/* F15: the impression sits in its own space under the totals, right-aligned beneath the figures, so no
   amount is ever covered (desktop panel, 1200 compact panel, phone sheet at 390 and 320). The -8 degree
   turn adds about 10px above and below and 4px at the right: the 20px top margin clears the Held row,
   the 6px right margin keeps the turned corner inside the scroller (no sideways scroll on the phone). */
.stamp{width:var(--stamp-w);min-height:var(--stamp-h);display:grid;place-items:center;margin:20px 6px 8px auto;padding:6px 10px;border:4px double var(--stamp-color);border-radius:10px;color:var(--stamp-color);font-size:13px;line-height:16px;font-weight:700;letter-spacing:.04em;text-align:center;rotate:var(--stamp-angle);background:color-mix(in srgb,var(--c-surface) 70%,transparent)}
:where([data-app=crew]) .stamp{border-radius:var(--r-xs)}
/* The stamp reads on one line ("Approved · v2 · by you"); it grows past the scene stamp size rather than break mid-phrase. */
.stamp{width:max-content;min-width:var(--stamp-w);max-width:100%;white-space:nowrap}
.stamp[data-settled]{animation:none}
.doc-note{margin-top:12px;font-size:14px;line-height:20px;color:var(--c-muted)}
.desk-checked{margin-top:12px;font-size:15px;line-height:22px}
.desk-heading{margin-top:20px;font-size:15px;line-height:21px;font-weight:600}
.request-note{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--c-held-wash);color:var(--c-ink)}
:where([data-app=crew]) .request-note{border-radius:var(--r-md)}
.request-note p{font-size:14px;line-height:20px}
.request-note-head{margin-bottom:6px;color:var(--c-held)}
.request-note-foot{margin-top:6px;color:var(--c-muted)}
.doc-sources{margin-top:16px;border-top:1px solid var(--c-hairline)}
.doc-sources summary,.source summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:14px;font-weight:500;list-style:none}
:where([data-app=crew]) .doc-sources summary,:where([data-app=crew]) .source summary{font-weight:400}
.doc-sources summary{color:var(--c-accent)}
.doc-sources summary::-webkit-details-marker,.source summary::-webkit-details-marker{display:none}
.doc-sources summary::after,.source summary::after{content:'+';color:var(--c-accent)}
.doc-sources[open] summary::after,.source[open] summary::after{content:'−'}
.doc-replay{margin-top:16px}
.doc-sources+.doc-replay{margin-top:0}
.doc-actions{flex:none;display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 20px 18px 28px;border-top:1px solid var(--c-hairline);background:var(--c-surface)}
:where([data-app=crew]) .doc-actions{background:transparent}
.doc-peek{display:none}
/* Dialogs (How this works, the demo note, directory, mission review) and the phone sheet. */
dialog{width:min(720px,calc(100% - 40px));max-height:min(860px,90svh);padding:28px;border:0;border-radius:24px;background:var(--c-surface);color:var(--c-ink);box-shadow:0 30px 90px rgba(34,29,38,.28)}
:where([data-app=crew]) dialog{border-radius:var(--r-xl);box-shadow:var(--shadow-panel)}
dialog[open]{display:flex;flex-direction:column;overflow:hidden}
dialog::backdrop{background:rgba(34,29,38,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#dialog-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:4px}
/* V3: the dialog's one close is a header row at the top right, as on an iPhone sheet (Escape still closes). It is
   outside the scroller, so content never slides under it, and there is no Close row under the content. Its text ends on
   the content's right edge (the 12px padding reaches into the dialog's). One selector strong enough to beat
   "dialog .quiet", so no later rule leaves this one dead (review fix 8). */
dialog .quiet.dialog-close{order:-1;flex:none;align-self:flex-end;margin:-12px -12px 4px 0;padding:0 12px;border-radius:12px;background:none;color:var(--c-accent);font-size:15px;line-height:20px;font-weight:500}
:where([data-app=crew]) dialog .quiet.dialog-close{border-radius:var(--r-pill);font-weight:400}
dialog h2{margin-bottom:12px;font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.015em}
dialog p{margin:10px 0;font-size:15px;line-height:23px;color:var(--c-muted)}
dialog .quiet{margin:4px 4px 0 0;background:var(--c-page)}
.document-sheet .doc-head h2{margin:8px 0 0}
.document-sheet p.doc-kicker,.document-sheet p.doc-subtitle,.document-sheet p.doc-note,.document-sheet .request-note p{margin:0}
.document-sheet p.doc-note{margin-top:12px}
.document-sheet p.desk-checked{margin:12px 0 0;color:var(--c-ink)}
.eyebrow{margin-bottom:8px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
:where([data-app=crew]) .eyebrow{font-size:13px;font-weight:600;letter-spacing:.07em}
.dialog-meta{margin-bottom:12px;font-size:13px;color:var(--c-muted)}
.artifact{margin:12px 0;padding:16px 18px;border-radius:14px;background:var(--c-page);color:var(--c-ink);font:14px/22px Geist,'Helvetica Neue',Arial,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
:where([data-app=crew]) .artifact{border-radius:var(--r-md)}
.checks{list-style:none;margin:12px 0;padding:0}
.checks li{margin:6px 0;font-size:14px;line-height:21px;color:var(--c-matched)}
.checks li::before{content:'✓ '}
.source{border-top:1px solid var(--c-hairline)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0}
.detail-grid h3{font-size:13px;font-weight:600}
.detail-grid p{margin:4px 0 0;font-size:13px;line-height:20px;color:var(--c-muted)}
.dialog-footer{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.dialog-footer small{font-size:13px;line-height:18px;color:var(--c-muted)}
.dialog-footer>div{display:flex;align-items:center;gap:8px}
.directory{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:12px 0}
.department-card{min-height:76px;padding:12px 14px;border-radius:14px;background:var(--c-page);text-align:left}
:where([data-app=crew]) .department-card{border-radius:var(--r-md)}
.department-card strong{display:block;font-size:15px;line-height:21px;font-weight:600}
.department-card p{margin:4px 0 0;font-size:13px;line-height:18px}
.neighbor{display:flex;justify-content:space-between;align-items:center;min-height:56px;border-top:1px solid var(--c-hairline);font-size:15px}
.neighbor small{font-size:12px;color:var(--c-muted)}
:where([data-app=crew]) .neighbor small{font-size:13px}
.support-documents{margin:8px 0 16px}
.evidence-document{width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-hairline);font-size:15px;line-height:21px;text-align:left}
.evidence-document small{display:block;font-size:13px;line-height:18px;color:var(--c-muted)}
.missing-source{margin:12px 0;padding:16px;border-radius:14px;background:var(--c-held-wash)}
:where([data-app=crew]) .missing-source{border-radius:var(--r-md)}
.missing-source h3{font-size:15px;color:var(--c-held)}
.missing-source p{margin:6px 0 0;font-size:14px;line-height:20px}
.invoice-document{margin:12px 0;padding:16px;border-radius:14px;background:var(--c-page);white-space:normal}
:where([data-app=crew]) .invoice-document{border-radius:var(--r-md)}
.paper-heading{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--c-hairline)}
.paper-heading>span{font-size:12px;font-weight:600;letter-spacing:.06em}
:where([data-app=crew]) .paper-heading>span{font-size:13px}
.paper-heading small{font-size:12px;color:var(--c-muted)}
:where([data-app=crew]) .paper-heading small{font-size:13px}
.invoice-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--c-hairline)}
.invoice-row strong{display:block;font-size:14px;font-weight:600}
.invoice-row small{display:block;font-size:12px;color:var(--c-muted)}
:where([data-app=crew]) .invoice-row small{font-size:13px}
.invoice-row>b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.receipt-hold{display:block;font-weight:400;color:var(--c-held)!important}
.paper-total{display:flex;justify-content:space-between;align-items:center;padding-top:10px}
.paper-total span{font-size:13px;color:var(--c-muted)}
.paper-total strong{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.invoice-record>p,.invoice-split,.invoice-change{margin:4px 0 10px;font-size:13px;line-height:19px;color:var(--c-muted)}
.receipt-document h3{margin-top:12px}
dialog.review-sheet[open]{height:min(900px,90svh)}
.review-sheet .dialog-footer{margin-top:12px}
/* Phone: header, the scene at sceneShare of the viewport, then one bottom panel that never scrolls the page. */
@media(max-width:850px){
 .topbar{height:var(--p-header-h,48px);gap:0;padding:0 16px}
 .brand>span{display:none}
 .brand img{width:28px;height:28px}
 .quiet{padding:0 10px}
 .book{margin-left:4px;padding:0 14px}
 body:has(#stop-work:not([hidden])) .brand{display:none}
 /* Phone: the switcher reads "Demos" (CSS text, so crawlers and the accessible name keep the one real label, "Demos,
    current: <name>"), so it never truncates; the current demo is the checked row in the sheet. */
 .demo-switch{flex:none;min-width:0;margin-left:2px;padding:0 8px 0 10px;gap:4px}
 .demo-switch::before{content:'Demos';width:auto;height:auto;margin:0;background:none}
 .demo-switch-name{display:none}
 /* A full-width panel dropping from the bar, not a bottom sheet: iOS Safari's floating toolbar covers the bottom of a
    fixed sheet (iPhone simulator, 2026-11-08), and 100svh is the height left with the toolbars shown. */
 .demo-menu{inset:auto 0;top:var(--p-header-h,48px);left:0;width:100%;max-height:calc(100svh - var(--p-header-h,48px) - 12px);padding:4px 8px 8px;border-radius:0 0 24px 24px}
 .demo-menu::backdrop{background:rgba(29,27,32,.28)}
 .demo-menu-eyebrow{padding:10px 12px 6px}
 .demo-item{min-height:48px}
 .experience{height:calc(100svh - var(--p-header-h,48px));display:flex;flex-direction:column}
 .world{position:relative;inset:auto;flex:0 1 var(--p-scene,66svh);min-height:140px}
 .beat-chip{left:12px;bottom:12px;max-width:calc(100% - 24px)}
 .inbox-item span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 /* R7: names only, plus a 6px dot in the tab colour once the room's document has landed. */
 .inbox-item[data-landed]::after{content:'';flex:none;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--c-accent)}
 .inbox-item[data-status=held]::after,.inbox-item[data-status=blocked]::after,.inbox-item[data-status=pending]::after{background:var(--c-held)}
 .inbox-item[data-status=approved]::after{background:var(--stamp-color)}
 .caption{position:relative;left:auto;bottom:auto;width:auto;height:auto;min-height:0;order:3;flex:1 0 auto;flex-direction:column;align-items:stretch;justify-content:space-between;gap:12px;padding:16px var(--p-pad) calc(12px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;background:var(--c-surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
 :where([data-app=crew]) .caption{border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--glass-edge)}
 /* The phone caption is a glass sheet resting over the scene's lower edge. */
 :where([data-app=crew]) .experience:not([data-doc=shown]):not([data-view=city]) .caption{margin-top:-24px;z-index:9}
 .experience[data-doc=shown] .caption{width:auto;padding-top:12px;border-radius:0}
 .caption[data-kind=decision]{flex-wrap:nowrap;padding-block:16px calc(12px + env(safe-area-inset-bottom))}
 .caption-text{flex:none;min-height:calc(var(--p-caption-h) - 32px)}
 .caption-eyebrow{display:block;margin-bottom:4px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.02em;color:var(--c-muted)}
 :where([data-app=crew]) .caption-eyebrow{font-size:13px;font-weight:400}
 .caption-actions{flex-direction:column;align-items:stretch;gap:0;margin-left:0}
 .caption-actions .primary{width:100%;min-height:var(--p-btn-h);border-radius:16px;font-size:17px}
 :where([data-app=crew]) .caption-actions .primary{border-radius:var(--r-pill)}
 .caption-actions .text-button{width:100%}
 /* R4: while beats run, Skip to the result fills the primary slot as a tonal button; the secondary slot stays empty. */
 .caption-actions:has(.phone-tonal){justify-content:flex-start;min-height:calc(var(--p-btn-h) + 44px)}
 .caption-actions .phone-tonal{min-height:var(--p-btn-h);border-radius:16px;background:color-mix(in srgb,var(--c-accent) 8%,transparent);color:var(--c-accent);font-size:17px;font-weight:600}
 :where([data-app=crew]) .caption-actions .phone-tonal{border-radius:var(--r-pill);font-weight:400}
 .document{position:relative;inset:auto;z-index:auto;order:2;flex:none;width:auto;padding:12px var(--p-pad) 0;border-radius:20px 20px 0 0;background:var(--c-surface);box-shadow:none;overflow:visible}
 :where([data-app=crew]) .document{border-radius:var(--r-lg) var(--r-lg) 0 0}
 .document>:not(.doc-peek){display:none}
 .doc-peek{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:var(--p-peek);padding:10px 14px 8px;border-radius:14px;background:var(--c-page);text-align:left}
 :where([data-app=crew]) .doc-peek{border-radius:var(--r-md)}
 .peek-grabber{position:absolute;top:4px;left:50%;width:32px;height:4px;border-radius:2px;background:rgba(34,29,38,.16);translate:-50% 0}
 :where([data-app=crew]) .peek-grabber{border-radius:var(--r-pill)}
 .peek-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
 .peek-text strong{max-width:100%;font-size:15px;line-height:20px;font-weight:600}
 .peek-text .doc-tab{margin:0;padding:2px 8px;font-size:12px;line-height:16px}
 :where([data-app=crew]) .peek-text .doc-tab{font-size:13px}
 .doc-peek>b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
 dialog{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;height:var(--p-sheet);max-height:var(--p-sheet);padding:6px var(--p-pad) calc(12px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0}
 :where([data-app=crew]) dialog{border-radius:var(--r-lg) var(--r-lg) 0 0}
 dialog[open]{animation:sheet-in var(--t-sheet) var(--ease-standard) both}
 dialog::before{content:'';order:-2;flex:none;align-self:center;width:36px;height:5px;margin:4px 0 14px;border-radius:3px;background:rgba(34,29,38,.18)}
 :where([data-app=crew]) dialog::before{border-radius:var(--r-pill)}
 dialog::backdrop{background:rgba(34,29,38,.4)}
 dialog.review-sheet[open]{height:var(--p-sheet)}
 /* On the sheet the close row sits a little under the drag handle, never beside it. */
 dialog .quiet.dialog-close{margin:-10px -12px 0 0}
 dialog h2{font-size:22px;line-height:28px}
 /* The sheet scrolls only its body; the header and the footer (Download, Approve) sit outside the
    scroller, as in the desktop panel, so no footer ever covers a row, a source or a focused control. */
 .document-sheet #dialog-body{display:flex;flex-direction:column;overflow:hidden;padding-right:0}
 .document-sheet .doc-head{padding:0 0 12px}
 .document-sheet .doc-body{flex:1 1 auto;min-height:0;padding:0 0 16px;overflow:auto}
 .document-sheet .doc-body :is(.art-button,.evidence-document):focus-visible{outline-offset:-3px}
 /* V3: the sheet's actions share one row when they fit and wrap whole (never squeezed) when they do not. */
 .document-sheet .doc-actions{padding:12px 0;justify-content:stretch;flex-wrap:wrap}
 .document-sheet .doc-actions>*{flex:1 1 auto;white-space:nowrap}
 .document-sheet .doc-close{display:none}
 .detail-grid{grid-template-columns:1fr}
 .dialog-footer{flex-direction:column;align-items:stretch}
 .dialog-footer>div{flex-direction:column-reverse;align-items:stretch}
}
@media(max-width:850px) and (max-height:600px){.caption-detail{display:none}.caption-text{min-height:0}.caption{flex:1 1 auto;min-height:0;overflow-y:auto}}
/* L2: below 360 the Book pill keeps only its first word so the header fits with Stop shown. */
@media(max-width:360px){.book .book-rest{display:none}}
/* Demo bar (2026-11-08): the crew office's bar also carries Rooms, so on phones its Book keeps one word, and at 360 and
   below the logo steps aside (as it already does while Stop shows) so Demos, Rooms, pause and Book fit. */
@media(max-width:430px){:where([data-app=crew]) .book .book-rest{display:none}}
@media(max-width:360px){:where([data-app=crew]) .brand{display:none}}
/* Crew phones carry Rooms as well: its bar's text controls tighten so the logo, Demos, ?, Rooms, pause and Book fit. */
@media(max-width:430px){:where([data-app=crew]) .demo-switch{padding:0 6px 0 8px;font-size:14px}:where([data-app=crew]) #map{padding:0 8px}:where([data-app=crew]) .book{padding:0 12px}}
/* At 360 and below every room's bar tightens its sides and its switcher, so logo, Demos, ?, pause and Book fit. */
@media(max-width:360px){.topbar{padding:0 12px}.demo-switch{padding:0 6px 0 8px}}
/* While crew work or a tour runs (Stop shows), the switcher stays: Rooms steps aside on phones (Stop already ends the
   run), the "?" steps aside only for the guided tour's longer "Stop the tour", and at 360 and below the switcher keeps
   only its chevron. */
@media(max-width:430px){body:has(#stop-work:not([hidden])) #map{display:none}body:has(#stop-work[data-tour]:not([hidden])) #demo-info{display:none}}
@media(max-width:360px){body:has(#stop-work:not([hidden])) .demo-switch{min-width:44px;justify-content:center;padding:0}body:has(#stop-work:not([hidden])) .demo-switch::before{content:none}}
/* ---------- Crew clarity (2026-11-06): the Finance room ---------- */
/* The caption parts every Finance state can use: a slim progress line, the working helper (portrait, job name, Step n
   of N), the opening's team row, and on the phone one money line (the bill list's total, or the held bill). */
:where([data-app=crew]) .caption-line,:where([data-app=crew]) .caption-progress,:where([data-app=crew]) .caption-who,:where([data-app=crew]) .caption-team{display:none}
:where([data-app=crew]) .portrait{position:relative;display:block;flex:none;overflow:hidden;width:100px;height:100px;border-radius:var(--r-lg);background:#efe7da}
:where([data-app=crew]) .portrait img{display:block;width:100%;height:100%;object-fit:cover}
:where([data-app=crew]) .portrait-small{width:44px;height:44px;border-radius:var(--r-md)}
:where([data-app=crew]) .portrait-you{display:grid;place-items:center;background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--glass-edge),var(--shadow-soft);font-size:19px;line-height:24px;font-weight:600;color:var(--c-ink)}
:where([data-app=crew]) .caption-progress:not([hidden]){display:flex;gap:6px;margin-bottom:20px}
:where([data-app=crew]) .caption-progress i{display:block;width:32px;height:3px;border-radius:var(--r-pill);background:rgba(34,29,38,.14)}
:where([data-app=crew]) .caption-progress i[data-state=done]{background:rgba(34,29,38,.4)}
:where([data-app=crew]) .caption-progress i[data-state=current]{background:var(--c-ink)}
:where([data-app=crew]) .caption-who:not([hidden]){display:flex;align-items:center;gap:12px;margin-bottom:16px}
:where([data-app=crew]) .who-text{display:flex;flex-direction:column;min-width:0}
:where([data-app=crew]) .who-text strong{font-size:15px;line-height:20px;font-weight:600}
:where([data-app=crew]) .who-text span{font-size:13px;line-height:18px;color:var(--c-muted)}
:where([data-app=crew]) .caption-line b,:where([data-app=crew]) .caption-line s{font-variant-numeric:tabular-nums}
:where([data-app=crew]) .title-line{display:block}
/* The city caption carries the longer approved title beside the ending's three links: a wider card keeps it to two
   lines, so the card stays low and clear of the inbox chips. */
@media(min-width:851px){
 :where([data-app=crew]) .experience[data-view=city] .caption{width:min(880px,calc(100% - 2 * var(--caption-left,24px)))}
}
/* Desktop: the Finance caption is large type on the scene over a soft bottom fade, no card. */
@media(min-width:851px){
 :where([data-app=crew]) .caption[data-style=open]{left:0;right:0;bottom:0;width:auto;min-height:0;display:block;padding:120px 64px 48px;border-radius:0;background:linear-gradient(to bottom,rgba(246,242,236,0),rgba(246,242,236,.86) 46%,rgba(246,242,236,.97));-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;pointer-events:none}
 :where([data-app=crew]) .caption[data-style=open]>*{pointer-events:auto}
 :where([data-app=crew]) .experience[data-doc=shown] .caption[data-style=open]{width:auto;right:calc(var(--doc-w) + var(--doc-inset))}
 :where([data-app=crew]) .caption[data-style=open] .caption-text{max-width:600px}
 :where([data-app=crew]) .caption[data-style=open] .caption-eyebrow{display:block;margin-bottom:12px;font-size:13px;line-height:16px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--c-muted)}
 :where([data-app=crew]) .caption[data-style=open][data-warm] .caption-eyebrow{color:var(--c-held)}
 :where([data-app=crew]) .caption[data-style=open] #caption-title{font-size:46px;line-height:1.08;letter-spacing:-.01em;font-weight:600;text-wrap:balance}
 :where([data-app=crew]) .caption[data-style=open] .caption-detail{margin-top:12px;max-width:560px;font-size:17px;line-height:24px;color:var(--c-muted)}
 :where([data-app=crew]) .caption[data-style=open] .caption-actions{justify-content:flex-start;gap:16px;margin:24px 0 0}
 :where([data-app=crew]) .caption[data-style=open] .caption-actions .primary{min-height:50px;padding:0 28px;font-size:17px}
 :where([data-app=crew]) .caption[data-style=open] .caption-actions .text-button{font-size:17px}
 :where([data-app=crew]) .caption[data-style=open] .caption-actions:has(.primary) .text-button{padding:0 16px}
 :where([data-app=crew]) .caption[data-stage=opening] #caption-title{font-size:64px;line-height:1.02;letter-spacing:-.009em}
 :where([data-app=crew]) .caption[data-stage=opening] .caption-detail{margin-top:16px;max-width:520px;font-size:21px;line-height:29px}
 :where([data-app=crew]) .caption[data-stage=opening] .caption-actions{margin-top:32px}
 :where([data-app=crew]) .caption[data-stage=opening] .caption-team:not([hidden]){position:absolute;right:64px;bottom:52px;display:flex;gap:20px}
 :where([data-app=crew]) .caption-team .member{display:flex;flex-direction:column;width:100px;font-size:15px;line-height:20px;font-weight:600}
 :where([data-app=crew]) .caption-team .member .portrait{margin-bottom:12px;box-shadow:var(--shadow-soft)}
 :where([data-app=crew]) .experience[data-doc=shown] .caption[data-stage=opening] .caption-team{display:none}
}
@media(min-width:851px) and (max-width:1439px){
 :where([data-app=crew]) .caption[data-stage=opening] #caption-title{font-size:56px;line-height:1.04;letter-spacing:-.006em}
}
@media(min-width:851px) and (max-width:1199px){
 :where([data-app=crew]) .caption[data-style=open]{padding:96px 40px 40px}
 :where([data-app=crew]) .caption[data-stage=opening] #caption-title{font-size:46px;line-height:1.06;letter-spacing:0}
 :where([data-app=crew]) .caption[data-style=open] #caption-title{font-size:40px;line-height:1.1;letter-spacing:0}
 :where([data-app=crew]) .caption[data-stage=opening] .caption-team:not([hidden]){right:40px;bottom:44px;gap:12px}
 :where([data-app=crew]) .caption-team .member{width:80px;font-size:13px;line-height:18px}
 :where([data-app=crew]) .caption-team .member .portrait{width:80px;height:80px}
}
@media(min-width:851px) and (max-width:999px){
 :where([data-app=crew]) .caption[data-stage=opening] #caption-title{font-size:40px;line-height:1.1}
 :where([data-app=crew]) .caption[data-stage=opening] .caption-team:not([hidden]){display:none}
}
/* Phone: the same parts, stacked in the glass sheet. */
@media(max-width:850px){
 :where([data-app=crew]) .caption[data-style=open]{justify-content:flex-start;gap:0;padding-top:20px}
 :where([data-app=crew]) .caption[data-style=open] .caption-text{min-height:0}
 :where([data-app=crew]) .caption[data-style=open] .caption-eyebrow{margin-bottom:8px;font-size:13px;line-height:16px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
 :where([data-app=crew]) .caption[data-style=open][data-warm] .caption-eyebrow{color:var(--c-held)}
 :where([data-app=crew]) .caption[data-style=open] #caption-title{font-size:30px;line-height:1.1;font-weight:600;letter-spacing:0}
 :where([data-app=crew]) .caption[data-stage=opening] #caption-title{font-size:34px;line-height:1.06}
 :where([data-app=crew]) .caption[data-style=open] .caption-detail{margin-top:8px;font-size:16px;line-height:22px}
 :where([data-app=crew]) .caption[data-style=open] .caption-actions{margin-top:16px}
 :where([data-app=crew]) .caption-line:not([hidden]){display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--c-hairline);font-size:13px;line-height:18px;color:var(--c-muted)}
 :where([data-app=crew]) .caption-line .line-figures{white-space:nowrap}
 :where([data-app=crew]) .caption-line s{margin-right:6px}
 :where([data-app=crew]) .caption-line b{font-size:22px;line-height:26px;font-weight:600;color:var(--c-ink)}
 :where([data-app=crew]) .caption-line[data-warm] b{color:var(--c-held)}
 :where([data-app=crew]) .caption-progress:not([hidden]){margin-bottom:16px}
 :where([data-app=crew]) .caption-progress i{flex:1;width:auto}
 :where([data-app=crew]) .caption-who:not([hidden]){margin-bottom:12px}
 :where([data-app=crew]) .portrait-small{width:40px;height:40px}
 :where([data-app=crew]) .caption[data-stage=opening] .caption-team:not([hidden]){display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
 :where([data-app=crew]) .caption-team .member{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;font-size:13px;line-height:16px;font-weight:600;text-align:center}
 :where([data-app=crew]) .caption-team .portrait{width:100%;height:auto;aspect-ratio:1;border-radius:var(--r-md)}
 :where([data-app=crew]) .caption-team .portrait-you{font-size:17px}
}
@media(max-width:360px){
 :where([data-app=crew]) .caption[data-stage=opening] #caption-title{font-size:30px}
 :where([data-app=crew]) .caption[data-style=open] #caption-title{font-size:26px}
 :where([data-app=crew]) .caption-team .member,:where([data-app=crew]) .caption-line{font-size:12px}
}
/* A short phone (landscape or a 568px screen): no team row, progress segments, money line or helper portrait, and a
   smaller headline, so the actions stay in view; the helper's name and Step n of N stay as real, readable text. */
@media(max-width:850px) and (max-height:600px){
 :where([data-app=crew]) .caption[data-stage=opening] .caption-team:not([hidden]),:where([data-app=crew]) .caption[data-style=open] .caption-progress:not([hidden]),:where([data-app=crew]) .caption[data-style=open] .caption-line:not([hidden]){display:none}
 :where([data-app=crew]) .caption[data-style=open] #caption-title,:where([data-app=crew]) .caption[data-stage=opening] #caption-title{font-size:24px;line-height:28px}
 :where([data-app=crew]) .caption[data-style=open]{padding-top:16px}
 :where([data-app=crew]) .caption[data-style=open] .caption-actions{margin-top:8px}
 :where([data-app=crew]) .caption[data-style=open] .caption-who .portrait{display:none}
 :where([data-app=crew]) .caption[data-style=open] .caption-who:not([hidden]){margin-bottom:6px}
}
/* The bill list: the live panel during a run and the landed Finance document share it. */
:where([data-app=crew]) .bills{list-style:none;margin:0;padding:0}
:where([data-app=crew]) .bill{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;margin:0 -10px;padding:12px 10px;border-bottom:1px solid var(--c-hairline);transition:background-color .24s var(--ease-standard)}
:where([data-app=crew]) .bill-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-pill);font-size:13px;line-height:1;font-weight:600;box-shadow:inset 0 0 0 1.5px rgba(34,29,38,.18)}
:where([data-app=crew]) .bill[data-state=matched] .bill-mark{background:var(--c-ink);color:#fff;box-shadow:none}
:where([data-app=crew]) .bill[data-state=matched] .bill-mark::before{content:'✓'}
:where([data-app=crew]) .bill[data-state=held] .bill-mark,:where([data-app=crew]) .bill[data-state=review] .bill-mark{background:var(--c-held-wash);color:var(--c-held);box-shadow:none}
:where([data-app=crew]) .bill[data-state=held] .bill-mark::before{content:'?'}
:where([data-app=crew]) .bill[data-state=review] .bill-mark::before{content:'!'}
:where([data-app=crew]) .bill[data-state=removed] .bill-mark{background:color-mix(in srgb,var(--c-accent) 12%,transparent);color:var(--c-accent);box-shadow:none}
:where([data-app=crew]) .bill[data-state=removed] .bill-mark::before{content:'−'}
:where([data-app=crew]) .bill-text{min-width:0}
:where([data-app=crew]) .bill strong{display:block;font-size:15px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
:where([data-app=crew]) .bill small{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--c-muted);overflow-wrap:anywhere}
:where([data-app=crew]) .bill>b{font-size:15px;line-height:20px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
:where([data-app=crew]) .bill[data-state=held] small,:where([data-app=crew]) .bill[data-state=review] small{color:var(--c-held)}
:where([data-app=crew]) .bill[data-state=compare]{background:color-mix(in srgb,var(--c-accent) 7%,transparent)}
:where([data-app=crew]) .bill[data-state=compare] small,:where([data-app=crew]) .bill[data-state=removed] small{color:var(--c-accent)}
:where([data-app=crew]) .bill[data-state=removed] strong,:where([data-app=crew]) .bill[data-state=removed]>b{color:var(--c-muted);font-weight:400;text-decoration:line-through}
:where([data-app=crew]) .bill[data-lift]{position:relative;z-index:1;background:var(--c-held-wash);border-radius:var(--r-md);border-bottom-color:transparent}
:where([data-app=crew]) .bill-total{flex:none;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:16px 28px 20px;border-top:1px solid var(--c-hairline)}
:where([data-app=crew]) .bill-total-label{display:flex;flex-direction:column;min-width:0;font-size:14px;line-height:20px;color:var(--c-muted)}
:where([data-app=crew]) .bill-total-label small{font-size:13px;line-height:18px}
:where([data-app=crew]) .bill-total-figures{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
:where([data-app=crew]) .bill-total-figures s{font-size:13px;line-height:18px;color:var(--c-muted);font-variant-numeric:tabular-nums}
:where([data-app=crew]) .bill-total-figures strong{font-size:34px;line-height:40px;font-weight:600;letter-spacing:-.004em;font-variant-numeric:tabular-nums}
:where([data-app=crew]) .document[data-mode=preview] .doc-body{-webkit-mask-image:none;mask-image:none}
:where([data-app=crew]) .document[data-department=finance] .doc-head h2{font-size:24px;line-height:30px}
:where([data-app=crew]) .document-sheet .bill-total{padding:16px 0 4px}
/* The sheet body has no side padding, so its rows keep their own edges (no sideways scroll at 320). */
:where([data-app=crew]) .document-sheet .bill{margin:0;padding-inline:0}
:where([data-app=crew]) .document-sheet .bill[data-lift]{padding-inline:10px}
/* Callouts at the scene's papers (aria-hidden; the caption carries the same facts). */
:where([data-app=crew]) .paper-tag[data-anchor=top]{transform:translate(-50%,calc(-100% - 8px))}
:where([data-app=crew]) .paper-tag.callout{padding:7px 14px;border-radius:var(--r-pill);background:var(--c-primary);box-shadow:var(--shadow-soft)}
:where([data-app=crew]) .paper-tag.callout span{color:var(--c-on-primary);font-size:13px;line-height:18px;font-weight:600;white-space:nowrap}
:where([data-app=crew]) .paper-tag.callout[data-tone=held]{background:var(--c-held)}
/* The Finance finish: one full-screen result over a frosted veil. */
:where([data-app=crew]) .finish{position:absolute;inset:0;z-index:12;display:grid;place-items:center;overflow:auto;overscroll-behavior:contain;padding:48px 24px;background:rgba(246,242,236,.66);-webkit-backdrop-filter:blur(28px) saturate(160%);backdrop-filter:blur(28px) saturate(160%)}
:where([data-app=crew]) .finish-inner{width:min(640px,100%);text-align:center}
:where([data-app=crew]) .finish-trio{display:inline-flex;justify-content:center;margin-bottom:16px;padding-left:10px}
:where([data-app=crew]) .finish-trio .portrait{width:56px;height:56px;margin-left:-10px;border-radius:var(--r-md);box-shadow:0 0 0 3px rgba(255,255,255,.9),var(--shadow-soft)}
:where([data-app=crew]) .finish-eyebrow{font-size:13px;line-height:16px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--c-muted)}
:where([data-app=crew]) #finish-title{margin-top:12px;font-weight:600}
:where([data-app=crew]) .finish-hero{display:block;font-size:128px;line-height:1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
:where([data-app=crew]) .finish-hero.finish-hero-text{font-size:56px;line-height:1.06;letter-spacing:-.006em;white-space:normal;overflow:visible;text-wrap:balance}
:where([data-app=crew]) .finish-sub{display:block;margin-top:12px;font-size:21px;line-height:29px;font-weight:400;color:var(--c-ink)}
:where([data-app=crew]) .finish-facts{display:grid;grid-template-columns:1fr 1fr;margin:40px 0 0;border-top:1px solid var(--c-hairline);border-bottom:1px solid var(--c-hairline);text-align:left}
:where([data-app=crew]) .finish-facts>div{padding:20px 24px}
:where([data-app=crew]) .finish-facts>div+div{box-shadow:inset 1px 0 0 var(--c-hairline)}
:where([data-app=crew]) .finish-facts dt{font-size:24px;line-height:30px;font-weight:600}
:where([data-app=crew]) .finish-facts dd{margin:6px 0 0;font-size:14px;line-height:20px;color:var(--c-muted)}
:where([data-app=crew]) .finish-link{display:inline;color:var(--c-accent);font:inherit;text-align:left;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--c-accent) 35%,transparent);text-underline-offset:3px}
:where([data-app=crew]) .finish-read{margin-top:24px;font-size:15px;line-height:20px}
:where([data-app=crew]) .finish-ask{margin-top:32px;font-size:17px;line-height:24px}
:where([data-app=crew]) .finish-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:16px}
:where([data-app=crew]) .finish-actions .primary{min-height:50px;padding:0 28px;font-size:17px}
:where([data-app=crew]) .finish-actions .text-button{font-size:17px}
:where([data-app=crew]) .finish-links{display:flex;justify-content:center;flex-wrap:wrap;gap:0 8px;margin-top:4px}
:where([data-app=crew]) .finish-links .text-button{font-size:15px;color:var(--c-muted)}
:where([data-app=crew]) .finish-foot{margin-top:16px;font-size:13px;line-height:18px;color:var(--c-muted)}
@media(max-width:850px){
 :where([data-app=crew]) .finish{place-items:start center;padding:32px var(--p-pad) calc(24px + env(safe-area-inset-bottom))}
 :where([data-app=crew]) .finish-hero{font-size:88px}
 :where([data-app=crew]) .finish-hero.finish-hero-text{font-size:34px}
 :where([data-app=crew]) .finish-sub{font-size:17px;line-height:24px}
 :where([data-app=crew]) .finish-facts{grid-template-columns:1fr;margin-top:28px}
 :where([data-app=crew]) .finish-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;flex-direction:row-reverse}
 :where([data-app=crew]) .finish-facts>div+div{box-shadow:inset 0 1px 0 var(--c-hairline)}
 :where([data-app=crew]) .finish-facts dt{font-size:20px;line-height:26px;white-space:nowrap}
 :where([data-app=crew]) .finish-facts dd{margin:0;font-size:13px;line-height:18px}
 :where([data-app=crew]) .finish-ask{margin-top:24px}
 :where([data-app=crew]) .finish-actions{flex-direction:column;align-items:stretch;gap:0}
 :where([data-app=crew]) .finish-actions .primary{width:100%}
}
@media(max-width:360px){
 :where([data-app=crew]) .finish-hero{font-size:72px}
 :where([data-app=crew]) .finish-facts dd{font-size:12px}
}
/* V7: every hover tint lives here, only for a pointer that can hover. A test scans this file: no :hover outside it. */
@media(hover:hover){
 .demo-switch:hover,.demo-item:hover:not([aria-current]),.demo-menu-all:hover{background:var(--c-hairline)}
 .quiet:hover{background:var(--c-hairline)}
 .book:hover{background:color-mix(in srgb,var(--c-primary) 80%,var(--c-accent));color:var(--c-on-primary)}
 .cubie:hover span{color:var(--c-accent)}
 .inbox-item:hover,.room-label:hover{box-shadow:0 0 0 2px var(--c-accent),0 4px 16px rgba(34,29,38,.14)}
 :where([data-app=crew]) .inbox-item:hover,:where([data-app=crew]) .room-label:hover{box-shadow:inset 0 0 0 2px var(--c-accent)}
 .primary:hover{background:color-mix(in srgb,var(--c-primary) 80%,var(--c-accent))}
 .text-button:hover{background:color-mix(in srgb,var(--c-accent) 8%,transparent)}
 .art-button:hover{color:var(--c-ink)}
 .department-card:hover{background:color-mix(in srgb,var(--c-accent) 8%,var(--c-page))}
 .evidence-document:hover{color:var(--c-accent)}
 .scan-source-link:hover{color:var(--c-accent);text-decoration-color:currentColor}
 .scan-toggle:hover{background:color-mix(in srgb,var(--c-accent) 8%,transparent)}
}
/* V7: touch has no hover. A press gets a brief tint instead, through :active. */
.quiet:active{background:var(--c-hairline)}
.text-button:active,.scan-toggle:active{background:color-mix(in srgb,var(--c-accent) 12%,transparent)}
.primary:active,.book:active{background:color-mix(in srgb,var(--c-primary) 80%,var(--c-accent))}
.department-card:active{background:color-mix(in srgb,var(--c-accent) 8%,var(--c-page))}
.inbox-item:active,.room-label:active{box-shadow:0 0 0 2px var(--c-accent),0 4px 16px rgba(34,29,38,.14)}
:where([data-app=crew]) .inbox-item:active,:where([data-app=crew]) .room-label:active{box-shadow:inset 0 0 0 2px var(--c-accent)}
.cubie:active span{color:var(--c-accent)}
.demo-switch:active,.demo-item:active:not([aria-current]),.demo-menu-all:active{background:var(--c-hairline)}
@keyframes sheet-in{from{transform:translateY(24%);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Optional business context uses the existing sheet, never an overlay over running work. */
.business-label{display:block;margin:20px 0 8px;font-weight:600;font-size:14px}
.business-field{display:block;box-sizing:border-box;width:100%;font:inherit;line-height:1.5;color:inherit;background:#fffefa;border:1px solid #c9c5bc;border-radius:12px;padding:12px;min-height:48px}
:where([data-app=crew]) .business-field{border-radius:var(--r-md)}
.business-field:focus-visible{outline:3px solid #456d6a;outline-offset:3px}
#business-form .primary,.business-manual button{margin-top:16px;min-height:48px}
/* V4: one filled button at a time. While "Describe it instead" is open its Choose examples is the primary and
   Read website steps down to a quiet tonal button. */
#business-form:has(~.business-manual[open]) #business-read{background:color-mix(in srgb,var(--c-accent) 8%,transparent);color:var(--c-accent)}
.business-manual{margin-top:24px}
/* V5: the two disclosures use the document's +/- marker, not the browser triangle. */
.business-manual summary,.business-evidence summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0;cursor:pointer;list-style:none;font-size:15px;font-weight:500;color:var(--c-ink)}
:where([data-app=crew]) .business-manual summary,:where([data-app=crew]) .business-evidence summary{font-weight:400}
.business-manual summary::-webkit-details-marker,.business-evidence summary::-webkit-details-marker{display:none}
.business-manual summary::after,.business-evidence summary::after{content:'+';color:var(--c-accent);font-size:17px}
.business-manual[open] summary::after,.business-evidence[open] summary::after{content:'−'}
.business-manual,.business-evidence{border-top:1px solid var(--c-hairline)}
.business-boundary{font-size:13px;line-height:1.5;color:#5b605b;margin:20px 0}
.business-actions{display:flex;gap:16px;margin-top:24px}
.business-error{color:#973e2e;font-size:14px;line-height:1.5;padding:12px;border-radius:8px;background:#fff0e9}
:where([data-app=crew]) .business-error{border-radius:var(--r-xs)}
.business-evidence{margin-top:8px}
.business-evidence-source{font-size:13px;line-height:1.5;font-weight:600;color:#5b605b;margin:0 0 8px}
.business-evidence-quote{margin:0 0 8px;padding:0 0 0 16px;border-left:1px solid #c9c5bc;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.business-evidence-note{font-size:13px;line-height:1.5;color:#5b605b;margin:8px 0 0}
.business-unclear{margin:8px 0 0}
.business-unclear p{margin:0 0 4px}
/* The deep scan's budget is spent: one plain line with the walkthrough as an inline link, in the accent like every
   other action, so the sheet keeps one filled button. */
.business-scanner{margin:8px 0 0}
.business-scanner a{color:var(--c-accent);font-weight:500;text-underline-offset:2px}
:where([data-app=crew]) .business-scanner a{font-weight:400}
.business-unclear .text-button:focus-visible{outline-offset:-3px}
/* Scan loader (scan-loader.js): a thin bar and one calm stat card while the office is written.
   Sits inside #dialog-body, so the dialog's own padding frames it. 8px rhythm; the card is 20px
   inside the 24px dialog; its height is fixed so the bar and the Pause button never move. */
.scan-loader{--scan-ease:cubic-bezier(.2,.8,.2,1);--scan-card-h:224px;--scan-num:48px;--scan-num-lh:56px;display:flex;flex-direction:column}
.scan-loader p{margin:0}
.scan-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.scan-loader .scan-label{min-height:24px;margin:0 0 8px;font-size:15px;line-height:24px;color:var(--c-ink)}
.scan-track{height:4px;border-radius:2px;background:var(--c-hairline);overflow:hidden}
:where([data-app=crew]) .scan-track{border-radius:var(--r-pill)}
.scan-fill{height:100%;border-radius:inherit;background:var(--c-accent);transform:scaleX(0);transform-origin:left center;transition:transform 600ms var(--scan-ease);will-change:transform}
.scan-card{box-sizing:border-box;height:var(--scan-card-h);margin:24px 0 0;padding:24px;border-radius:20px;background:var(--c-page);display:flex;flex-direction:column;overflow:hidden}
:where([data-app=crew]) .scan-card{border-radius:var(--r-lg)}
.scan-number{font-size:var(--scan-num);line-height:var(--scan-num-lh);font-weight:600;letter-spacing:-.003em;font-variant-numeric:tabular-nums;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan-loader .scan-line{margin-top:8px;font-size:17px;line-height:24px;color:var(--c-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.scan-source{margin-top:auto;padding-top:16px;font-size:13px;line-height:18px;color:var(--c-muted)}
.scan-source-link{display:inline-block;padding:13px 0;margin:-13px 0;color:var(--c-muted);text-decoration:underline;text-decoration-color:var(--c-hairline);text-underline-offset:3px;transition:color .2s var(--scan-ease)}
.scan-card-in{animation:scan-in 280ms var(--scan-ease) both}
.scan-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin-top:8px}
.scan-footer{font-size:13px;line-height:18px;color:var(--c-muted)}
.scan-toggle{flex:none;min-height:44px;min-width:44px;padding:0 12px;margin-right:0;border-radius:12px;font-size:15px;line-height:20px;color:var(--c-accent);transition:background-color .2s var(--scan-ease)}
:where([data-app=crew]) .scan-toggle{border-radius:var(--r-pill)}
.scan-toggle[hidden]{display:none}
.scan-loader[data-stage=failed] .scan-fill{background:var(--c-muted)}
@keyframes scan-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:850px){
 .scan-loader{--scan-card-h:216px;--scan-num:40px;--scan-num-lh:48px}
 .scan-card{padding:20px;border-radius:16px}
 :where([data-app=crew]) .scan-card{border-radius:var(--r-md)}
}
@media(prefers-reduced-motion:reduce){.scan-fill,.scan-card-in{transition:none;animation:none}}

/* The review desk's additions to the crew office's stylesheet (style.css, shipped beside it unchanged). */

/* First paint: a still of the opening shot sits under the canvas (the landmark, desktop or phone), so the room is
   there before the 3D arrives, and the live scene fades in over the same composition. Reduced motion and no WebGL
   use the still of the result instead, and the canvas replaces it with a cut. --c-page is written by app.js; its
   value is here too so the still paints before (or without) the script. */
:root{--c-page:#f6f2ec;--rd-gold:#d9a03a;--rd-star-off:#e2dbd1}
.world{--fallback:url('./still.jpg')}
@media(max-width:850px){.world{--fallback:url('./still-landmark-phone.jpg')}}
@media(prefers-reduced-motion:reduce){.world{--fallback:url('./still-result-desktop.jpg')}}
@media(prefers-reduced-motion:reduce) and (max-width:850px){.world{--fallback:url('./still-result-phone.jpg')}}
.world.static-world{--fallback:url('./still-result-desktop.jpg')}
@media(max-width:850px){.world.static-world{--fallback:url('./still-result-phone.jpg')}}
.world canvas{opacity:0;transition:opacity .4s cubic-bezier(.2,.8,.2,1)}
.webgl-ready .world canvas{opacity:1}
.webgl-ready .world:not(.static-world){background-image:var(--fallback)}

/* Loading (docs/superpowers/specs/2026-11-01-loading-screen-spec.md, L1 to L6; the same block in every room, with the
   front desk's values). L3: until the still decodes, the stage is that still's own colours (its top colour, then three
   bands measured from the picture), so the gap reads as the same scene; the still paints over it once decoded. */
.world{--wash:linear-gradient(#6f5644,#695e50 37.5%,#7f716a 62.5%,#80685a 87.5%);background-color:#6f5644;background-image:var(--fallback),var(--wash)}
@media(max-width:850px){.world{--wash:linear-gradient(#1d1d1a,#7a7465 37.5%,#a29c9d 62.5%,#af938b 87.5%);background-color:#1d1d1a}}
@media(prefers-reduced-motion:reduce){.world{--wash:linear-gradient(#343830,#79777b 37.5%,#a08986 62.5%,#9b786e 87.5%);background-color:#343830}}
@media(prefers-reduced-motion:reduce) and (max-width:850px){.world{--wash:linear-gradient(#44362d,#7a7365 37.5%,#9e9493 62.5%,#c59f96 87.5%);background-color:#44362d}}
.world.static-world{--wash:linear-gradient(#343830,#79777b 37.5%,#a08986 62.5%,#9b786e 87.5%);background-color:#343830}
@media(max-width:850px){.world.static-world{--wash:linear-gradient(#44362d,#7a7365 37.5%,#9e9493 62.5%,#c59f96 87.5%);background-color:#44362d}}
/* L1, L2: one light glass capsule (the street view's, style.css .street-ready .world-loader-text) holding the three crew
   cubes and the existing words in ink: centred at the foot of the stage on a phone, bottom right level with the caption
   on a computer, never over the still's own cubes. The cubes bob on transform only, so they keep moving while the room
   builds. L6: it fades out over 200 ms as the room goes live (reduced motion cuts: style.css stops every transition);
   on the still path it goes at once, as before. */
.world-loader{inset:auto 0 16px;width:max-content;max-width:calc(100% - 32px);height:auto;margin:0 auto;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 14px;border-radius:999px;background:color-mix(in srgb,var(--c-surface,#fffdf9) 80%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 0 0 1px rgba(34,29,38,.06);transition:opacity .2s cubic-bezier(.2,.8,.2,1),visibility 0s linear .2s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.world-loader{background:rgba(255,253,249,.94)}}
@media(min-width:851px){.world-loader{inset:auto var(--caption-left,24px) var(--caption-bottom,24px) auto;margin:0}}
/* style.css hides any [hidden] with display:none!important, which would cut the fade: the loader keeps its box while
   it fades, then visibility takes it out. */
.world-loader[hidden],.webgl-ready .world-loader{display:flex!important;opacity:0;visibility:hidden}
.static-world .world-loader{display:none!important}
.world-loader-crew{display:flex;align-self:center;gap:4px}
.world-loader-crew i{width:12px;height:12px;border-radius:3px;box-shadow:none;animation:ld-bob .8s cubic-bezier(.37,0,.63,1) infinite alternate}
.world-loader-crew i:nth-child(2){animation-delay:-.27s}
.world-loader-crew i:nth-child(3){animation-delay:-.53s}
@keyframes ld-bob{from{transform:translateY(2.5px)}to{transform:translateY(-2.5px)}}
.world-loader-text{margin:0;padding:0;max-width:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--c-ink,#221d26);font-size:15px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* L5: a Start pressed before the room is live keeps its place and size, takes the pressed colour, and its label gives
   way to the same three cubes (app.js sets aria-busy only; the accessible name is unchanged). */
.caption-actions .primary[aria-busy=true]{position:relative;color:transparent;background:color-mix(in srgb,var(--c-primary) 80%,var(--c-accent));cursor:progress}
.caption-actions .primary[aria-busy=true]::before,.caption-actions .primary[aria-busy=true]::after{content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:2px;background:#a59cf2;animation:ld-bob .45s cubic-bezier(.37,0,.63,1) infinite alternate}
.caption-actions .primary[aria-busy=true]::before{margin-left:-16px;background:#5b95f2;box-shadow:24px 0 #e9773f;animation-delay:-.45s}

/* The illustration line: one quiet glass capsule beside the room's name. */
.room-disclosure{position:absolute;z-index:4;left:var(--caption-left,24px);top:16px;max-width:min(820px,calc(100% - 48px));display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:8px 16px;border-radius:999px;background:rgba(255,253,249,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 0 0 1px rgba(34,29,38,.06);font-size:13px;line-height:18px;color:var(--c-muted)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.room-disclosure{background:rgba(255,253,249,.92)}}
.room-disclosure strong{color:var(--c-ink);font-weight:600}

/* Name chips: the same glass, so the room reads before the labels. None over the landmark, while a beat runs or
   while the replies are on the lectern (the crew office's tag rule). */
.rd-chip-name{left:0;top:0;translate:none;pointer-events:none;min-height:0}
.rd-chip-name span{background:rgba(255,253,249,.78);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);box-shadow:inset 0 0 0 1px rgba(34,29,38,.06);font-weight:600;letter-spacing:0}
.experience:is([data-phase=landmark],[data-phase=beat],[data-phase=result],[data-phase=document],[data-phase=approve],[data-phase=payoff]) .world:not(.static-world) #crew{visibility:hidden}

/* Star shapes: decorative (aria-hidden), the honey gold accent on the filled ones; the reader hears the phrase. */
.stars{display:inline-flex;gap:2px;margin-left:6px;vertical-align:-1px}
.stars i{display:block;width:12px;height:12px;background:var(--rd-star-off);clip-path:polygon(50% 2%,62% 36%,98% 37%,69% 58%,80% 93%,50% 72%,20% 93%,31% 58%,2% 37%,38% 36%)}
.stars[data-n="1"] i:nth-child(-n+1),.stars[data-n="2"] i:nth-child(-n+2),.stars[data-n="3"] i:nth-child(-n+3),.stars[data-n="4"] i:nth-child(-n+4),.stars[data-n="5"] i:nth-child(-n+5){background:var(--rd-gold)}

/* The caption's three shapes: text, the voice picker, and the beat card. */
.caption-body:empty{display:none}
.caption[data-kind=picker],.caption[data-kind=beat]{align-items:stretch}
.caption[data-kind=picker]{flex-direction:column;gap:12px;padding:16px 16px 16px 24px}
.caption[data-kind=picker] .caption-text{flex:none}
.caption[data-kind=picker] .caption-actions{display:none}
.voice-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.voice-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:84px;padding:12px 14px;border-radius:10px;background:var(--c-page);box-shadow:inset 0 0 0 1px var(--c-hairline);text-align:left;transition:opacity .2s var(--ease-standard),box-shadow .2s var(--ease-standard),background-color .2s var(--ease-standard)}
.voice-tile:hover{background:color-mix(in srgb,var(--c-page) 70%,var(--c-surface))}
.voice-tile:hover,.voice-tile:focus-visible{box-shadow:inset 0 0 0 1px rgba(34,29,38,.18)}
.voice-name{font-size:13px;line-height:16px;font-weight:600;color:var(--c-ink)}
.voice-preview{font-size:14px;line-height:20px;color:var(--c-muted)}
.voice-check{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;opacity:0;background:var(--c-primary);transition:opacity .2s var(--ease-standard)}
.voice-check::after{content:'';position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid var(--c-on-primary);border-width:0 2px 2px 0;rotate:45deg}
.voice-tile[aria-pressed=true]{background:var(--c-surface);box-shadow:inset 0 0 0 1.5px var(--c-ink)}
.voice-tile[aria-pressed=true] .voice-check{opacity:1}
.voice-picker[data-picked] .voice-tile[aria-pressed=false]{opacity:.5}

.caption[data-kind=beat]{min-height:156px;padding:16px 14px 14px 24px}
.caption[data-kind=beat] .caption-actions{align-self:flex-end}
.beat-card{display:flex;flex-direction:column;gap:6px;min-height:118px;outline-offset:6px;border-radius:6px}
.beat-who{display:flex;align-items:center;font-size:15px;line-height:20px}
.beat-who strong{font-weight:600}
.beat-quote{font-size:15px;line-height:21px;color:var(--c-ink);text-wrap:pretty}
.beat-quote::before{content:'“'}.beat-quote::after{content:'”'}
.beat-quote mark,.rd-quote mark{padding:0 2px;border-radius:3px;background:#ffe7a3;color:inherit}
.beat-reply{font-size:14px;line-height:20px;color:var(--c-ink)}
.beat-label,.rd-label{margin-right:6px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;color:var(--c-muted)}
.beat-line{font-size:13px;line-height:18px;color:var(--c-muted)}
.beat-progress{margin-top:12px;max-width:200px;height:3px;border-radius:999px;background:var(--c-hairline);overflow:hidden}
.beat-progress i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--c-ink);transform-origin:left;transform:scaleX(var(--done,0))}

/* The replies document. */
.document:not([hidden]){animation:rd-doc-in 420ms var(--ease) both}
@keyframes rd-doc-in{from{opacity:0;translate:28px 0}to{opacity:1;translate:none}}
.voice-control{display:flex;align-items:center;gap:4px;margin:14px 0 2px;padding:4px;border-radius:14px;background:var(--c-page)}
.voice-control-label{padding:0 8px 0 10px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;color:var(--c-muted)}
.voice-control button{flex:1 1 0;min-height:36px;padding:0 10px;border-radius:10px;font-size:14px;line-height:20px;font-weight:500;color:var(--c-ink);transition:background-color .18s var(--ease-standard)}
.voice-control button:hover{background:color-mix(in srgb,var(--c-surface) 70%,transparent)}
.voice-control button[aria-pressed=true]{background:var(--c-surface);box-shadow:0 1px 3px rgba(34,29,38,.12),inset 0 0 0 1px var(--c-hairline);font-weight:600}
.rd-section{display:flex;justify-content:space-between;margin-top:22px;padding-bottom:6px;border-bottom:1px solid var(--c-hairline);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.rd-section span:last-child{font-variant-numeric:tabular-nums;letter-spacing:0}
.rd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px}
.rd-main{min-width:0;display:flex;flex-direction:column;gap:4px}
/* The crew dialog spaces every paragraph 10px apart; inside a row the gap above sets the rhythm instead. */
#dialog-body .rd-main p,#dialog-body .rd-ask{margin:0}
#dialog-body .rd-ask{margin-top:8px}
.rd-who{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:14px;line-height:20px}
.rd-who .stars{margin-left:0}
.rd-who small{margin:0!important;font-size:13px;line-height:18px;color:var(--c-muted)}
.rd-quote{font-size:13px;line-height:19px;color:var(--c-muted)}
.rd-quote:not(:has(.rd-nowords))::before{content:'“'}.rd-quote:not(:has(.rd-nowords))::after{content:'”'}
.rd-nowords{font-style:italic}
.rd-reply{font-size:14px;line-height:21px;color:var(--c-ink)}
.rd-label{display:block;margin:2px 0 1px}
.rd-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.rd-chip,.rd-pill{display:inline-flex;padding:2px 9px;border-radius:999px;background:var(--c-page);box-shadow:inset 0 0 0 1px var(--c-hairline);font-size:12px;line-height:16px;color:var(--c-muted);white-space:nowrap}
.rd-pill{align-self:center}
.rd-reason{font-size:14px;line-height:20px;color:var(--c-held)}
.rd-next{font-size:13px;line-height:19px;color:var(--c-ink)}
.rd-next span{font-weight:600}
.doc-row[data-state=report] .rd-reason{color:var(--c-muted)}
.doc-row[data-state=held] strong{color:var(--c-ink)}
.rd-ask{margin-top:8px;font-size:13px;line-height:19px;color:var(--c-muted)}
.rd-row .rd-toggle{min-height:44px;margin:-6px -12px -12px 0;font-size:14px}
.rd-rules{margin:10px 0;padding-left:20px;font-size:14px;line-height:21px;color:var(--c-muted)}
.rd-rules li{margin:6px 0}
dialog .rd-rules{font-size:15px;line-height:23px}

/* The approval stamp drops in once when a person approves; a stamp already seen carries data-settled and stays
   still; reduced motion gets no drop. */
@keyframes rd-stamp-in{from{scale:1.3;opacity:0}to{scale:1;opacity:1}}
.stamp{animation:rd-stamp-in var(--t-stamp) var(--ease) both}
.stamp[data-settled]{animation:none}

@media(max-width:850px){
 .room-disclosure{left:16px;top:10px;max-width:calc(100% - 32px);padding:7px 14px;border-radius:16px;font-size:12px;line-height:16px}
 .rd-chip-name span{padding:3px 10px;font-size:12px;line-height:16px}
 .caption[data-kind=picker]{padding:16px var(--p-pad) calc(12px + env(safe-area-inset-bottom))}
 .voice-picker{grid-template-columns:1fr;gap:6px;margin-top:10px}
 .voice-tile{display:grid;grid-template-columns:64px minmax(0,1fr) 18px;align-items:center;gap:8px;min-height:52px;padding:8px 12px}
 .voice-check{position:static}
 .caption[data-kind=beat]{min-height:0;padding:14px var(--p-pad) calc(12px + env(safe-area-inset-bottom))}
 .caption[data-kind=beat] .caption-actions{align-self:stretch}
 .beat-card{min-height:136px}
 .beat-progress{margin-top:10px}
}

/* The crawlable facts block is visually hidden; its text wraps like any paragraph (sr-only sets nowrap). */
#desk-facts *{white-space:normal}

@media(prefers-reduced-motion:reduce){.world canvas,.voice-tile,.voice-check,.beat-progress i{transition:none}.stamp,.document:not([hidden]){animation:none}}

/* Decorative glyphs (the pause and play mark, the link arrow) are drawn from data-t, as on the rest of the site
   (src/site/site.css), so crawlers and AI readers never read them as words. */
[data-t]::before{content:attr(data-t)}