/* 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 front desk's additions to the crew office's stylesheet (style.css, shipped beside it unchanged). */

/* First paint (R10): the landmark still sits under the canvas, so the bell is there before the 3D arrives, and the live
   scene fades in over the same composition. Reduced motion and the no-WebGL fallback show the dawn summary moment. */
:root{--c-page:#f6f2ec}
.world{--fallback:url('./still.jpg');background-color:#16171e}
@media(max-width:850px){.world{--fallback:url('./still-phone.jpg')}}
@media(prefers-reduced-motion:reduce){.world{--fallback:url('./still-result.jpg')}}
@media(prefers-reduced-motion:reduce) and (max-width:850px){.world{--fallback:url('./still-result-phone.jpg')}}
.world.static-world{--fallback:url('./still-result.jpg')}
/* Before the still decodes, the stage is the still's own top colour (loading spec L3): the lobby's dark surround (room polish), or the dawn result's. */
@media(prefers-reduced-motion:reduce){.world{background-color:#201c20}}
.world.static-world{background-color:#201c20}
@media(max-width:850px){.world.static-world{--fallback:url('./still-result-phone.jpg')}}
.world canvas{opacity:0;transition:opacity .3s cubic-bezier(.2,.8,.2,1)}
.webgl-ready .world canvas{opacity:1}
.webgl-ready .world:not(.static-world){background-image:var(--fallback)}

/* The opening caption shows from first paint (loading spec L4, which replaces plan section 3's wordless landmark; the
   page script is render-blocking, so the first frame already has it). With no script the caption has no words: hidden. */
.caption{transition:opacity .4s var(--ease-standard,ease)}
.caption:has(#caption-title:empty){opacity:0;pointer-events:none}

/* The illustration line: one quiet glass capsule beside the room's name (the shell's markup, R12). */
.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;margin:0;padding:8px 16px;border-radius:999px;background:rgba(255,253,249,.74);-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,.94)}}
@media(min-width:851px){.experience[data-doc=shown] .room-disclosure{max-width:calc(100% - var(--doc-w) - 2 * var(--doc-inset) - var(--caption-left) - 16px)}}
@media(min-width:851px) and (max-width:1319px){.experience[data-doc=shown] .room-disclosure{max-width:calc(100% - var(--doc-w-compact) - 2 * var(--doc-inset) - var(--caption-left) - 16px)}}
.room-disclosure strong{color:var(--c-ink);font-weight:600}

/* Name chips: the same glass, so the room reads before the labels. */
.fd-chip{left:0;top:0;translate:none;pointer-events:none;min-height:0}
.fd-chip span{background:rgba(255,253,249,.8);-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}

/* The choice: two option cards, each showing its outcome. One tap draws the check; the other dims. */
.fd-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fd-option{display:flex;align-items:flex-start;gap:12px;min-height:56px;padding:12px 14px;border-radius:14px;background:var(--c-page);box-shadow:inset 0 0 0 1px var(--c-hairline);text-align:left;color:var(--c-ink);transition:box-shadow .2s var(--ease-standard),opacity .3s var(--ease-standard),background-color .2s var(--ease-standard)}
.fd-option:hover,.fd-option:focus-visible{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#7c45d6 55%,transparent)}
.fd-option[data-chosen]{background:color-mix(in srgb,#7c45d6 7%,var(--c-surface));box-shadow:inset 0 0 0 1.5px #7c45d6}
.fd-option[data-dim]{opacity:.45}
.fd-option-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.fd-option-text strong{font-size:15px;line-height:20px;font-weight:600}
.fd-option-text small{font-size:13px;line-height:18px;color:var(--c-muted)}
.fd-check{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--c-hairline);background:var(--c-surface)}
.fd-check svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16}
.fd-option[data-chosen] .fd-check{background:#7c45d6;box-shadow:none}
.fd-option[data-chosen] .fd-check svg{stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--ease)}

/* While the night plays: a hairline progress bar and the running tally. */
.fd-progress{margin-top:10px;display:flex;align-items:center;gap:12px}
.fd-bar{flex:1 1 auto;max-width:180px;height:3px;border-radius:999px;background:var(--c-hairline);overflow:hidden}
.fd-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--c-ink);transform-origin:left;transform:scaleX(var(--done,0));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fd-tally{font-size:13px;line-height:18px;color:var(--c-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.fd-note{margin-top:8px;font-size:13px;line-height:18px;color:var(--c-muted)}

/* The ending's actions on a computer (plan 2026-11-02-demo-picker.md 5.9, the lead desk's rule): Book a call and the
   two text links, plus the summary's reopen once it is closed. They wrap rather than run behind the summary panel at
   narrow desktop widths; the text links carry no inline padding, so a wrapped link starts flush with Book a call and
   spacing comes from the gap. Their hover is an underline, as a tint would hug the words. */
@media(min-width:851px){
 .experience[data-phase=end] .caption[data-layout=stack] .caption-actions{flex-wrap:wrap;gap:4px 24px}
 .experience[data-phase=end] .caption[data-layout=stack] .caption-actions .text-button{padding-inline:0;border-radius:0}
 .experience[data-phase=end] .caption[data-layout=stack] .caption-actions .text-button:hover{background:none;text-decoration:underline;text-underline-offset:.2em}
}

/* The morning summary. */
.fd-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)}
.fd-section span:last-child{font-variant-numeric:tabular-nums;letter-spacing:0}
.fd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px}
.fd-main{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.fd-main .fd-words,.fd-main .fd-question{color:var(--c-ink)}
.fd-row[data-tone=urgent] .fd-status{color:#6a3fb8;font-weight:600}
.fd-side{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.fd-number{font-size:14px!important;line-height:21px!important;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fd-number[data-none]{font-weight:400;color:var(--c-muted)}
.fd-row .fd-toggle{min-height:44px;margin:-6px -12px -12px 0;font-size:14px;white-space:nowrap}
.fd-pill{display:inline-flex;margin-top:2px;padding:3px 10px;border-radius:999px;background:var(--c-held-wash);font-size:12px;line-height:16px;color:var(--c-held);white-space:nowrap}
.fd-dropped .fd-pill{background:var(--c-page);color:var(--c-muted);box-shadow:inset 0 0 0 1px var(--c-hairline)}
.fd-call{margin-top:4px;font-size:13px;line-height:18px}
.fd-call summary{display:inline-flex;align-items:center;min-height:32px;color:var(--c-accent);font-weight:400;cursor:pointer;list-style:none}
.fd-call summary::-webkit-details-marker{display:none}
.fd-call[open] summary{color:var(--c-muted)}
.fd-line{margin:4px 0 0;padding-left:10px;border-left:2px solid var(--c-hairline);color:var(--c-ink)}
.fd-line span{display:block;font-size:11px;line-height:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.fd-line[data-desk]{border-left-color:color-mix(in srgb,#7c45d6 40%,transparent)}
.fd-list{margin:8px 0 0;padding-left:22px;font-size:14px;line-height:21px}
.fd-list-row{padding:6px 0;border-bottom:1px solid var(--c-hairline)}
.fd-list-row .fd-why{display:block;color:var(--c-muted);font-size:13px;line-height:18px}
.fd-honest{font-size:13px;line-height:18px}
.doc-sources .doc-rows{padding-bottom:4px}
.doc-sources .doc-row:last-child{border-bottom:0}
.fd-rules{margin:10px 0;padding-left:20px;font-size:15px;line-height:23px;color:var(--c-muted)}
.fd-rules li{margin:6px 0}
.fd-subhead{margin:18px 0 0;font-size:15px;line-height:22px;font-weight:600}

@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}
 .fd-chip span{padding:3px 10px;font-size:12px;line-height:16px}
 .fd-progress{margin-top:8px}
 .fd-choices{grid-template-columns:1fr;gap:8px;margin-top:10px}
 .fd-option{border-radius:16px}
 /* The phone drops the loop line for room; the honest line stays beside Book a call (review fix 6). */
 .fd-note-loop{display:none}
 .fd-note{margin-top:6px;font-size:12px;line-height:16px}
}
@media(prefers-reduced-motion:reduce){.world canvas,.fd-bar i,.fd-option,.fd-check svg,.caption{transition:none!important}}

/* The crawlable facts block is visually hidden; its text wraps like any paragraph (sr-only sets nowrap). With no
   JavaScript it becomes a visible reading column. */
#desk-facts *{white-space:normal}
@media(scripting:none){
 #desk-facts{position:relative!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important;margin:0!important;max-width:680px;padding:24px;z-index:9;background:var(--c-surface);color:var(--c-ink);border-radius:20px;margin:80px auto 24px!important;font-size:15px;line-height:23px}
 #desk-facts h2{font-size:22px;line-height:28px;margin:0 0 12px}#desk-facts h3{font-size:16px;margin:18px 0 6px}#desk-facts ul{padding-left:20px}
 .experience{overflow:auto}.caption{display:none}
 noscript p{position:relative;z-index:9;max-width:680px;margin:12px auto;padding:0 24px;color:var(--c-ink)}
}

/* The approval stamp drops in once when a person approves (as the lead desk's). A stamp already seen stays still. */
@keyframes fd-stamp-in{from{scale:1.3;opacity:0}to{scale:1;opacity:1}}
.stamp{animation:fd-stamp-in var(--t-stamp) var(--ease) both}
.stamp[data-settled]{animation:none}
@media(prefers-reduced-motion:reduce){.stamp{animation:none}}

/* Loading (spec 2026-11-01, L1 to L6; the same block in every room). One glass capsule like the street view's: three
   crew cubes that bob on the compositor (transform only, so they keep moving while the room builds), then the
   existing words in ink. Phone: centred at the foot of the stage; computer: bottom right, level with the caption.
   It fades out over 200 ms as the room goes live (reduced motion cuts) and is gone at once on the still path. */
.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}}
/* This room's phone still has a cube's face and the bell at the foot of the stage: the capsule sits in the dusk sky,
   just under the illustration line, instead. */
@media(max-width:850px){.world-loader{inset:52px 0 auto}}
.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}
/* An early tap (L5): the primary keeps its place and size, takes the pressed colour, and its label gives way to the
   same three cubes (the script 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}

/* 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)}