/* /bridge: page sections on the shared Images/Voice/Models system. The hero keeps its own styles in bridge-brand.css. */
.bx{--bx-accent:var(--ip-accent,#00d4ff)}
/* Fill colours match the captures exactly, per theme (values come from scripts/bridge-page-frames.mjs). */
.bx-window{--bx-chat-bg:var(--bx-chat-light)}
.bx-phone{--bx-phone-bg:var(--bx-phone-light);--bx-phone-title-bg:var(--bx-phone-title-light)}
:root[data-theme=dark] .bx-window{--bx-chat-bg:var(--bx-chat-dark)}
:root[data-theme=dark] .bx-phone{--bx-phone-bg:var(--bx-phone-dark);--bx-phone-title-bg:var(--bx-phone-title-dark)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .bx-window{--bx-chat-bg:var(--bx-chat-dark)}:root:not([data-theme=light]) .bx-phone{--bx-phone-bg:var(--bx-phone-dark);--bx-phone-title-bg:var(--bx-phone-title-dark)}}
.bx .wrap{max-width:1232px;width:calc(100% - 48px);margin-inline:auto}
/* Beats the older .bridge-page main h2 rules so headings match the shared 36px/500 system. */
.bridge-page .bx h2{font-size:36px;font-weight:500;letter-spacing:-.02em;line-height:1.15!important;margin:0}
.bridge-page .bx .eyebrow{font-size:16px;color:var(--muted)}
.bx-stage,.bx-jobs,.bx-tiles,.bx-voice,.bx-private,.bx-desk,.bx-get{padding-block:96px 0}
.bx-stage{padding-top:24px}

/* The real desktop window. The chat plays over the conversation area of the capture. */
.bx-window{position:relative;max-width:1180px;margin-inline:auto;aspect-ratio:var(--ratio)}
.bx-window-shot,.bx-window-shot img{display:block;width:100%;height:auto}
.bx-window-chat{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);overflow:hidden;background:var(--bx-chat-bg)}

/* Chat lines (shared by the window and the phone), played by chat-session.js and styled like Bridge itself: a grey
   bubble for you, plain text for Bridge, grey work lines, and a card for each file it makes. Sizes follow the capture
   (--u is one app pixel at the size the capture is shown), so the text matches the real app at any width. */
.bx-window,.bx-phone{container-type:inline-size}
.bx-window{--u:calc(100cqw / 1180)}
.bx-phone{--u:calc(100cqw * 1206 / 1306 / 402)}
.bx .bx-chat{position:absolute;inset:0;overflow:hidden}
.bx .bx-chat .session-track{display:flex;flex-direction:column;justify-content:flex-start;gap:calc(14 * var(--u));min-height:100%;padding:calc(22 * var(--u)) calc(24 * var(--u));will-change:transform}
.bx .bx-chat.bx-chat-desktop .session-track{padding:calc(24 * var(--u)) calc(38 * var(--u)) calc(24 * var(--u)) calc(31 * var(--u))}
.bx .bx-chat.bx-chat-phone .session-track{justify-content:flex-end;gap:calc(16 * var(--u));padding:calc(16 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u))}
.bx .bx-chat p,.bx .bx-chat pre{margin:0;max-width:88%;font-size:calc(15 * var(--u));line-height:1.6;overflow-wrap:anywhere}
.bx .bx-chat.bx-chat-phone p,.bx .bx-chat.bx-chat-phone pre{font-size:calc(17 * var(--u));line-height:1.45;max-width:92%}
.bx .bx-chat .hc-user{align-self:flex-end;max-width:70%;padding:calc(10 * var(--u)) calc(15 * var(--u));border-radius:calc(18 * var(--u));background:var(--bx-bubble);color:var(--bx-ink)}
.bx .bx-chat.bx-chat-phone .hc-user{max-width:62%;padding:calc(12 * var(--u)) calc(16 * var(--u));border-radius:calc(22 * var(--u))}
.bx .bx-chat .hc-assistant{align-self:flex-start;color:var(--bx-ink)}
.bx .bx-chat .session-action{align-self:flex-start;display:flex;margin:0;padding:0;border:0;border-radius:0;background:none;line-height:1.5;align-items:center;gap:calc(6 * var(--u));color:var(--bx-dim);font-size:calc(14 * var(--u))}
.bx .bx-chat.bx-chat-phone .session-action{font-size:calc(16 * var(--u))}
.bx .bx-chat .session-action::after{content:'';flex:none;width:calc(6 * var(--u));height:calc(6 * var(--u));border:solid currentColor;border-width:1.2px 1.2px 0 0;transform:rotate(45deg);margin-left:calc(2 * var(--u))}
.bx .bx-chat .session-action[data-action-kind=created],.bx .bx-chat .session-action[data-action-kind=draft],.bx .bx-chat .session-action[data-action-kind=approval]{align-self:stretch;max-width:100%;gap:calc(12 * var(--u));padding:calc(12 * var(--u)) calc(14 * var(--u));border:1px solid var(--bx-edge);border-radius:calc(14 * var(--u));color:var(--bx-ink);font-weight:500}
.bx .bx-chat .session-action[data-action-kind=created]::after,.bx .bx-chat .session-action[data-action-kind=draft]::after,.bx .bx-chat .session-action[data-action-kind=approval]::after{display:none}
.bx .bx-chat .session-action[data-action-kind]::before{content:'';flex:none;display:none;width:calc(30 * var(--u));height:calc(30 * var(--u));border-radius:calc(8 * var(--u));background:var(--bx-bubble) no-repeat center/45% var(--bx-doc)}
.bx .bx-chat .session-action[data-action-kind=created]::before,.bx .bx-chat .session-action[data-action-kind=draft]::before{display:block}
.bx .bx-chat .session-action[data-action-kind=approval]{border-color:var(--bx-ink)}
.bx .bx-chat .session-diff{align-self:stretch;max-width:100%;display:flex;flex-direction:column;padding:calc(12 * var(--u)) calc(14 * var(--u));border:1px solid var(--bx-edge);border-radius:calc(12 * var(--u));background:transparent;color:var(--bx-ink);font:calc(12.5 * var(--u))/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap}
.bx .bx-chat .diff-add{color:#14833b}.bx .bx-chat .diff-remove{color:#c4322b;text-decoration:line-through;text-decoration-color:#c4322b80}
.bx-window,.bx-phone{--bx-ink:#0d0d0d;--bx-dim:#77777c;--bx-bubble:#f0f0f1;--bx-edge:#e6e6e8;--bx-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377777c' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 13h6M9 17h4'/%3E%3C/svg%3E")}
.bx-phone{--bx-bubble:#ececee}
:root[data-theme=dark] .bx-window,:root[data-theme=dark] .bx-phone{--bx-ink:#f2f2f2;--bx-dim:#8e8e93;--bx-bubble:#2a2a2c;--bx-edge:#2f2f31}
:root[data-theme=dark] .bx .diff-add{color:#4fc26d}:root[data-theme=dark] .bx .diff-remove{color:#ff7b72}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .bx-window,:root:not([data-theme=light]) .bx-phone{--bx-ink:#f2f2f2;--bx-dim:#8e8e93;--bx-bubble:#2a2a2c;--bx-edge:#2f2f31}:root:not([data-theme=light]) .bx .diff-add{color:#4fc26d}:root:not([data-theme=light]) .bx .diff-remove{color:#ff7b72}}

/* Jobs: tabs on the left, the real phone on the right */
.bx-jobs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:72px;align-items:center}
.bx-job-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:36px}
.bx-job-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:transparent;color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.bx-job-tabs button span{font-size:15px;font-weight:500}
.bx-job-tabs button small{font-size:12.5px;color:var(--muted)}
.bx-job-tabs button:hover{border-color:var(--muted)}
.bx-job-tabs button[aria-selected=true]{border-color:var(--fg);background:var(--surface)}
.bx-job-tabs button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
/* Job tabs (Mike, 2026-11-02): each tab has a short line in its own colour, as long as the name under its title. While the jobs play
   by themselves, the selected tab's line becomes a grey track that its colour fills as its chat runs, then the next tab
   takes over (bridge-page.js sets --bx-name and --bx-p, and data-running while nobody has picked a job). */
.bx-job-tabs button{position:relative}
.bx-job-tabs button::before,.bx-job-tabs button::after{content:"";position:absolute;left:16px;bottom:7px;height:2px;border-radius:2px}
.bx-job-tabs button::before{right:16px;background:var(--line);opacity:0;transition:opacity .2s ease}
.bx-job-tabs button::after{width:var(--bx-name,40px);background:var(--bx-tab,var(--bx-accent,#00d4ff));transform-origin:0 50%;transition:transform .2s linear}
/* A colour per job, in tab order: cyan, violet, amber, green, rose, blue (darker in light mode). */
.bx-job-tabs button:nth-child(6n+1){--bx-tab:#00d4ff}.bx-job-tabs button:nth-child(6n+2){--bx-tab:#a78bfa}.bx-job-tabs button:nth-child(6n+3){--bx-tab:#fbbf24}
.bx-job-tabs button:nth-child(6n+4){--bx-tab:#34d399}.bx-job-tabs button:nth-child(6n+5){--bx-tab:#fb7185}.bx-job-tabs button:nth-child(6n){--bx-tab:#60a5fa}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .bx-job-tabs button:nth-child(6n+1){--bx-tab:#0891b2}:root:not([data-theme=dark]) .bx-job-tabs button:nth-child(6n+2){--bx-tab:#7c3aed}:root:not([data-theme=dark]) .bx-job-tabs button:nth-child(6n+3){--bx-tab:#b45309}:root:not([data-theme=dark]) .bx-job-tabs button:nth-child(6n+4){--bx-tab:#059669}:root:not([data-theme=dark]) .bx-job-tabs button:nth-child(6n+5){--bx-tab:#e11d48}:root:not([data-theme=dark]) .bx-job-tabs button:nth-child(6n){--bx-tab:#2563eb}}
:root[data-theme=light] .bx-job-tabs button:nth-child(6n+1){--bx-tab:#0891b2}:root[data-theme=light] .bx-job-tabs button:nth-child(6n+2){--bx-tab:#7c3aed}:root[data-theme=light] .bx-job-tabs button:nth-child(6n+3){--bx-tab:#b45309}
:root[data-theme=light] .bx-job-tabs button:nth-child(6n+4){--bx-tab:#059669}:root[data-theme=light] .bx-job-tabs button:nth-child(6n+5){--bx-tab:#e11d48}:root[data-theme=light] .bx-job-tabs button:nth-child(6n){--bx-tab:#2563eb}
.bx-job-tabs[data-running] button[aria-selected=true]::before{opacity:1}
.bx-job-tabs[data-running] button[aria-selected=true]::after{width:auto;right:16px;transform:scaleX(var(--bx-p,0))}
.bx-jobs--steps .bx-job-tabs button::before,.bx-jobs--steps .bx-job-tabs button::after{display:none}
.bx-job-note{margin-top:18px;font-size:13px;color:var(--muted)}
.bx-phone{position:relative;width:100%;max-width:340px;justify-self:center;aspect-ratio:var(--ratio)}
.bx-phone-shot,.bx-phone-shot img{display:block;width:100%;height:auto}
.bx-phone-title{position:absolute;left:var(--title-x);top:var(--title-y);width:var(--title-w);height:var(--title-h);margin:0;display:flex;flex-direction:column;justify-content:center;gap:0;padding-left:calc(2 * var(--u));background:var(--bx-phone-title-bg,var(--bg));overflow:hidden}
.bx-phone-title b{font-size:calc(17 * var(--u));line-height:1.25;font-weight:600;color:var(--bx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-phone-title small{font-size:calc(13 * var(--u));line-height:1.25;color:var(--bx-dim);white-space:nowrap}
.bx-phone-chat{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);overflow:hidden;background:var(--bx-phone-bg,var(--bg))}
.bx .bx-chat.bx-chat-phone .session-diff{font-size:calc(13 * var(--u))}
.bx-phone[data-switching] .bx-chat-phone{opacity:0;transition:opacity .18s ease}
.bx-chat-phone{transition:opacity .25s ease}

/* Tiles (same geometry as the Voice tiles) */
.bx-tiles{padding-bottom:0}
.bx .vp-tile-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:44px}
.bx .vp-tile{grid-column:span 2;display:flex;flex-direction:column;min-height:380px;padding:30px 30px 0;border:1px solid var(--line);border-radius:var(--radius,22px);background:var(--surface);overflow:hidden}
.bx .vp-tile:nth-child(n+4){grid-column:span 3}
.bx .vp-tile h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.02em}
.bx .vp-tile>p{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--muted);max-width:440px}
.bx .vp-tile-art{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:26px 0 0;font-size:13px}
.bx-crop,.bx-crop img{display:block;width:100%;height:auto}
.bx-mini{border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;background:var(--bg);padding:16px 16px 20px}
.bx-mini-file{margin:0 0 10px;font-size:12px;color:var(--muted)}
.bx-mini-routine{display:grid;gap:0;padding-block:6px 10px}
.bx-mini-routine>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.bx-mini-routine>div:first-child{border-top:0}
.bx-mini-routine span{display:flex;flex-direction:column;min-width:0}
.bx-mini-routine b{font-weight:500;font-size:13px}
.bx-mini-routine small,.bx-mini-routine em{font-size:11.5px;color:var(--muted);font-style:normal}
.bx-switch{position:relative;width:26px;height:15px;border-radius:999px;background:var(--line)}
.bx-switch::after{content:'';position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--bg)}
.bx-switch.is-on{background:var(--bx-accent)}.bx-switch.is-on::after{left:auto;right:2px}
.bx-mini-files>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:12.5px}
.bx-mini-files em{font-style:normal;font-size:11.5px;color:var(--muted)}

/* Voice */
.bx-voice{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center}
.bx-voice-copy .ip-text-link{display:inline-block;margin-top:24px}
.bx-voice-chat{height:540px}
/* The conversation column from /products/voice (same rules as voice-page.css, scoped here; played by voice-page.js). */
.bx-voice-chat .vp-chat{display:flex;flex-direction:column;gap:16px;height:100%}
.bx-voice-chat .vp-chat-log{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 64px);mask-image:linear-gradient(to bottom,transparent,#000 64px)}
.bx-voice-chat .vp-msg{flex:none;margin:0;max-width:min(80%,440px);padding:12px 18px;border-radius:22px;font-size:16px;line-height:1.45;animation:vp-msg-in .4s cubic-bezier(.2,.8,.2,1) both}
.bx-voice-chat .vp-msg-user{align-self:flex-end;background:var(--surface2);color:var(--fg);border-bottom-right-radius:8px}
.bx-voice-chat .vp-msg-assistant{align-self:flex-start;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-bottom-left-radius:8px}
.bx-voice-chat .vp-msg-action{align-self:flex-start;padding:7px 14px;border:1px solid var(--line);border-radius:16px;color:var(--muted);font-size:13px}
.bx-voice-chat .vp-msg-action::before{content:'↳';margin-right:6px;color:var(--fg)}
.bx-voice-chat .vp-msg-action[data-kind=created]::before{content:'✓'}
.bx-voice-chat .vp-msg-action[data-kind=approval]{border-color:var(--muted);color:var(--fg)}
@keyframes vp-msg-in{from{opacity:0;transform:translateY(10px) scale(.97)}}
.bx-voice-chat .vp-chat-orb{flex:none;display:grid;justify-items:center;gap:8px}
.bx-voice-chat .vp-chat-orb>.portal-orb{width:112px;height:112px;-webkit-mask-image:radial-gradient(closest-side,#000 calc(100% - 2px),transparent);mask-image:radial-gradient(closest-side,#000 calc(100% - 2px),transparent)}
.bx-voice-chat .vp-chat-state{margin:0;min-height:1.4em;font-size:13px;color:var(--muted)}
.bx-voice-chat .vp-chat-pills{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.bx-voice-chat .vp-chat-pills button{font:inherit;font-size:14px;padding:8px 14px;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer;transition:color .2s ease,background-color .2s ease}
.bx-voice-chat .vp-chat-pills button:hover{color:var(--fg)}
.bx-voice-chat .vp-chat-pills button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.bx-voice-chat .vp-chat-pills button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

/* Private by architecture */
.bx-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:40px}
.bx-principles h3{margin:0;font-size:17px;font-weight:500}
.bx-principles p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.bx-boundary{margin-top:32px;font-size:13px;color:var(--muted)}
.bx-boundary a{color:var(--fg)}

/* Desktop and phone, same chat */
.bx-desk-pair{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.24fr);gap:28px;align-items:end;margin-top:44px}
.bx-desk-shot img,.bx-desk-phone img{display:block;width:100%;height:auto}

/* Downloads */
.bx-get-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px}
.bx-get-tile{display:flex;flex-direction:column;padding:26px 26px 28px;border:1px solid var(--line);border-radius:var(--radius,22px);background:var(--surface)}
.bx-get-tile h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.02em}
.bx-get-tile p{margin:10px 0 22px;font-size:15px;line-height:1.5;color:var(--muted)}
/* The buttons sit on one line along the bottom, however the text above them wraps (Mike, 2026-11-02). */
.bx-get-tile .button{margin-top:auto;align-self:flex-start}
.bx-get-note{margin-top:28px;font-size:14px;color:var(--muted)}
.bx-get-note a{color:var(--fg)}
.bx-faq{margin-top:96px}
.bx-faq .ip-section-heading a{color:var(--fg)}

/* Buttons follow the shared system: black main button, outlined second button. */
.bx .bp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;font-size:14px;text-decoration:none;border:1px solid var(--line);color:var(--fg);background:transparent}
.bx .bp-btn--primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* The closing Download button matches the hero's (the shared .ip .button:not(.primary) rule would outline it). */
.bx .bx-close .bp-btn.bp-btn--primary{background:#111;color:#fff;border-color:#111}
:root[data-theme=dark] .bx .bx-close .bp-btn.bp-btn--primary{background:#fff;color:#030309;border-color:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .bx .bx-close .bp-btn.bp-btn--primary{background:#fff;color:#030309;border-color:#fff}}
.bx .bp-hero .bp-btn--primary{background:var(--hero-primary-bg,#fff);color:var(--hero-primary-fg,#080808);border-color:transparent}

@media(max-width:1100px){.bx-get-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1023px){
 .bx-jobs,.bx-voice{grid-template-columns:minmax(0,1fr);gap:44px}
 .bx-voice-chat{height:480px}
 .bx .vp-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bx .vp-tile,.bx .vp-tile:nth-child(n+4){grid-column:span 1}.bx .vp-tile:nth-child(3){grid-column:span 2}
 .bx-principles{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media(max-width:760px){
 .bridge-page .bx h2{font-size:30px}
 .bx-stage,.bx-jobs,.bx-tiles,.bx-voice,.bx-private,.bx-desk,.bx-get{padding-top:64px}
 .bx-stage{padding-top:12px}
 .bx-job-tabs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .bx .vp-tile-grid{grid-template-columns:minmax(0,1fr)}.bx .vp-tile,.bx .vp-tile:nth-child(n+4),.bx .vp-tile:nth-child(3){grid-column:auto;min-height:0}
 .bx .vp-tile{padding:24px 24px 0}
 .bx-desk-pair{grid-template-columns:minmax(0,1fr);justify-items:center}
 .bx-desk-phone{width:min(260px,70%)}
 .bx-get-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){.bx-voice-chat .vp-msg{font-size:15px;max-width:86%}.bx-voice-chat .vp-chat-orb>.portal-orb{width:88px;height:88px}}
@media(prefers-reduced-motion:reduce){.bx-chat .session-track{transition:none!important}.bx-voice-chat .vp-msg{animation:none}.bx-phone[data-switching] .bx-chat-phone{transition:none}}

/* "You stay in charge" tiles (Mike, 2026-11-02): app windows with Mac buttons, in colour, sitting on the bottom edge of
   each tile (scripts/bridge-page.mjs). bridge-tiles.js plays them; the classes it sets are noted below. */
.bx-tiles{--c-cyan:var(--bx-accent,#00d4ff);--c-violet:#a78bfa;--c-amber:#fbbf24;--c-green:#34d399;--c-red:#fb7185}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .bx-tiles{--c-cyan:#0891b2;--c-violet:#7c3aed;--c-amber:#b45309;--c-green:#059669;--c-red:#e11d48}}
:root[data-theme=light] .bx-tiles{--c-cyan:#0891b2;--c-violet:#7c3aed;--c-amber:#b45309;--c-green:#059669;--c-red:#e11d48}
.bx-c-cyan{--c:var(--c-cyan)}.bx-c-violet{--c:var(--c-violet)}.bx-c-amber{--c:var(--c-amber)}.bx-c-green{--c:var(--c-green)}
.bx-tiles .bx-tile-art:has(>.bx-win){align-items:stretch;justify-content:flex-end;padding-bottom:0}
.bx-win{border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;background:var(--bg);overflow:hidden;text-align:left}
.bx-win-bar{display:grid;grid-template-columns:minmax(52px,auto) minmax(0,1fr) minmax(52px,auto);align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.bx-win-dots{display:flex;gap:5px}
.bx-win-dots i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.bx-win-dots i:nth-child(2){background:#febc2e}
.bx-win-dots i:nth-child(3){background:#28c840}
.bx-win-title{display:block;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-win-title svg{margin-right:6px;vertical-align:-2px;color:var(--c-cyan)}
.bx-win-bar em{justify-self:end;font-style:normal;font-size:11.5px;white-space:nowrap}
.bx-win-stat{display:flex;gap:6px}.bx-win-stat b{font-weight:500;color:var(--c-green)}.bx-win-stat s{text-decoration:none;color:var(--c-red)}
.bx-win-body{padding:14px 16px 18px;font-size:12.5px}
/* Approvals ([data-bx-ask]: Bridge's Approve tile, the phone on the solution pages): the request and its two buttons.
   is-hover and is-press press the main one; is-run swaps the buttons for the working line; is-done marks it done. */
.bx-ask{display:grid;gap:10px}
:is(.bx-win,.bx-phone-mini) .bx-ask p{margin:0}
:is(.bx-win,.bx-phone-mini) .bx-ask-kind{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.bx-ask-kind svg{color:var(--c-cyan)}
:is(.bx-win,.bx-phone-mini) .bx-ask-q{font-size:13.5px;line-height:1.35;font-weight:500;color:var(--fg)}
.bx-ask code{display:block;padding:8px 10px;border-radius:8px;background:var(--surface2);font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--c-amber)}
/* The buttons and the line that replaces them share one place, so the window or phone keeps its size (Mike, 2026-11-02). */
.bx-ask-act{display:grid}
.bx-ask-act>*{grid-area:1/1}
.bx-ask-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bx-ask-buttons span{display:flex;align-items:center;justify-content:center;gap:6px;height:34px;border-radius:999px;font-size:12.5px;font-weight:500;transition:transform .15s ease,box-shadow .2s ease}
.bx-ask-alt{background:var(--surface2);color:var(--fg)}
.bx-ask-main{background:var(--fg);color:var(--bg)}
.bx-ask.is-hover .bx-ask-main{box-shadow:0 0 0 3px color-mix(in srgb,var(--c-cyan) 50%,transparent)}
.bx-ask.is-press .bx-ask-main{transform:scale(.95)}
:is(.bx-win,.bx-phone-mini) .bx-ask .bx-ask-status{display:flex;visibility:hidden;align-self:start;align-items:center;gap:8px;height:34px;font-size:12.5px;color:var(--fg)}
.bx-ask-status i{width:8px;height:8px;border-radius:50%;background:var(--c-amber);animation:bx-blink 1s ease-in-out infinite}
.bx-ask-ok{display:none}
.bx-ask.is-run .bx-ask-buttons{visibility:hidden}
.bx-ask.is-run .bx-ask-status{visibility:visible}
.bx-ask.is-done .bx-ask-run{display:none}
.bx-ask.is-done .bx-ask-ok{display:inline}
.bx-ask.is-done .bx-ask-status i{background:var(--c-green);animation:none}
@keyframes bx-blink{50%{opacity:.3}}
/* Diff: removed and added lines tinted red and green. */
.bx-win-diff pre{margin:0 -16px;display:flex;flex-direction:column;font:11.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;overflow:hidden}
.bx-d{padding-inline:16px}
.bx-d-add{background:color-mix(in srgb,var(--c-green) 12%,transparent);color:var(--c-green)}
.bx-d-del{background:color-mix(in srgb,var(--c-red) 12%,transparent);color:var(--c-red)}
.bx-win .bx-pass{margin:12px 0 0;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg)}
.bx-pass i{width:8px;height:8px;border-radius:50%;background:var(--c-green)}
/* Routines: a colour per project; the second switch turns on once (is-on). */
.bx-win-routine .bx-win-body{padding-block:4px 10px}
.bx-routine{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.bx-routine:first-child{border-top:0}
.bx-dot{width:8px;height:8px;border-radius:50%;background:var(--c)}
.bx-routine span{display:flex;flex-direction:column;min-width:0}
.bx-routine b{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-routine small,.bx-routine em{font-size:11.5px;font-style:normal;color:var(--muted);white-space:nowrap}
.bx-routine .bx-switch{transition:background-color .25s ease}
.bx-routine .bx-switch::after,.bx-routine .bx-switch.is-on::after{left:2px;right:auto;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.bx-routine .bx-switch.is-on::after{transform:translateX(11px)}
/* Slides: four slides of the deck; the one being shown is outlined (is-on) and its chart draws in. */
.bx-deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bx-slide{position:relative;aspect-ratio:16/10;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:flex;flex-direction:column;gap:6px;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease}
.bx-slide b{font-size:12px;font-weight:500;line-height:1.3}
.bx-slide>small{position:absolute;right:10px;bottom:7px;font-size:10px;color:var(--muted)}
.bx-slide.is-on{border-color:var(--c-cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-cyan) 22%,transparent)}
.bx-bars{flex:1;min-height:0;display:flex;align-items:flex-end;gap:5px;padding-right:18px}
.bx-bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--c) 55%,transparent);transform-origin:50% 100%}
.bx-bars i:last-child{background:var(--c)}
.bx-big{margin-top:auto;font-size:30px;font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--c)}
.bx-big span{font-size:16px}
.bx-meter{height:5px;margin-right:18px;border-radius:3px;background:var(--surface2);overflow:hidden}
.bx-meter i{display:block;width:92%;height:100%;background:var(--c);transform-origin:0 50%}
.bx-line{flex:1;min-height:0;width:calc(100% - 18px)}
.bx-line path{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.bx-cover{flex:1;margin:-2px -12px -10px;background:radial-gradient(120% 90% at 85% 100%,color-mix(in srgb,var(--c) 55%,transparent),transparent 70%)}
.bx-slide.is-on .bx-bars i{animation:bx-grow .6s cubic-bezier(.22,1,.36,1) backwards}
.bx-slide.is-on .bx-bars i:nth-child(2){animation-delay:60ms}.bx-slide.is-on .bx-bars i:nth-child(3){animation-delay:120ms}.bx-slide.is-on .bx-bars i:nth-child(4){animation-delay:180ms}.bx-slide.is-on .bx-bars i:nth-child(5){animation-delay:240ms}
.bx-slide.is-on .bx-meter i{animation:bx-fill .8s cubic-bezier(.22,1,.36,1) backwards}
.bx-slide.is-on .bx-line{animation:bx-wipe .9s ease backwards}
@keyframes bx-grow{from{transform:scaleY(0)}}
@keyframes bx-fill{from{transform:scaleX(0)}}
@keyframes bx-wipe{from{clip-path:inset(0 100% 0 0)}}
/* Files: the project folder on this Mac; Bridge's review appears beside the original (is-waiting holds it back). */
.bx-win .bx-crumb{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:6px;font-size:11.5px;color:var(--muted)}
.bx-crumb span{opacity:.6}
.bx-file{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:12.5px;transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.bx-file svg{color:var(--k,var(--muted))}
.bx-file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-file em{font-size:11.5px;font-style:normal;color:var(--muted);white-space:nowrap}
.bx-file.is-new svg{color:var(--c-cyan)}
.bx-file.is-new em{padding:2px 8px;border-radius:999px;color:var(--c-cyan);background:color-mix(in srgb,var(--c-cyan) 13%,transparent)}
.bx-win-files.is-waiting .bx-file.is-new{opacity:0;transform:translateY(-6px)}
.bx-win .bx-files-foot{margin:10px 0 0;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.bx-files-foot svg{color:var(--c-green)}
@media(prefers-reduced-motion:reduce){.bx-slide.is-on :is(.bx-bars i,.bx-meter i,.bx-line),.bx-ask-status i{animation:none}.bx-file,.bx-routine .bx-switch,.bx-routine .bx-switch::after,.bx-ask-buttons span{transition:none}}

/* "A direct path" diagrams (Mike, 2026-11-02; scripts/bridge-page.mjs beamsDiagram): your devices or team, Alluqi
   Bridge, and your model, joined by curved lines that bridge-beams.js draws and runs light along (cyan out, violet
   back), lighting each card (.bx-node-hit) and Bridge's ring (.bx-hub-ring) as the light arrives. */
.bx-private{--c-cyan:var(--bx-accent,#00d4ff);--c-violet:#a78bfa}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .bx-private{--c-cyan:#0891b2;--c-violet:#7c3aed}}
:root[data-theme=light] .bx-private{--c-cyan:#0891b2;--c-violet:#7c3aed}
.bx-beams{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(56px,8vw,120px);margin:44px 0 0;padding:52px clamp(24px,5vw,72px);border-radius:22px;background:var(--surface)}
.bx-beams-lines{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}
.bx-beams-col{display:flex;flex-direction:column;gap:12px}
.bx-beams-you{align-items:flex-end}
.bx-beams-model{align-items:flex-start}
.bx-beams .bx-beams-label{margin:0 0 2px;display:flex;flex-direction:column;font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.bx-beams-label small{font-size:12px;font-weight:400;color:var(--muted)}
.bx-beams-you .bx-beams-label{width:min(100%,232px)}
.bx-node{position:relative;display:flex;align-items:center;gap:12px;width:min(100%,232px);padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.bx-node>svg{flex:none;color:var(--c-cyan)}
.bx-node span{display:flex;flex-direction:column;min-width:0}
.bx-node b{font-size:14px;font-weight:500}
.bx-node small{font-size:12px;color:var(--muted)}
.bx-node-hit{position:absolute;inset:-1px;border:1px solid var(--c-cyan);border-radius:inherit;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-cyan) 22%,transparent);opacity:0;pointer-events:none}
.bx-beams-hub{display:flex;flex-direction:column;align-items:center;gap:12px}
.bx-hub{position:relative;display:grid;place-items:center;width:132px;height:132px;border-radius:50%;background:var(--bg);border:1px solid color-mix(in srgb,var(--c-cyan) 40%,var(--line));box-shadow:0 0 48px -8px color-mix(in srgb,var(--c-cyan) 45%,transparent)}
.bx-hub-ring{position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--c-cyan);opacity:0;pointer-events:none}
.bx-hub-ring.is-back{border-color:var(--c-violet)}
.bx-beams .bx-hub .bridge-live-mark{--bridge-logo-size:96px;margin:0}
.bx-hub-logo{width:96px;height:96px}
.bx-hub-light{display:none}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .bx-hub-dark{display:none}:root:not([data-theme=dark]) .bx-hub-light{display:block}}
:root[data-theme=light] .bx-hub-dark{display:none}:root[data-theme=light] .bx-hub-light{display:block}
.bx-beams .bx-beams-hub .bx-beams-label{margin:0;align-items:center;text-align:center;color:var(--fg)}
.bx-beam-base{fill:none;stroke:var(--line);stroke-width:1.5}
.bx-beam-go,.bx-beam-back{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:.16 1.3;opacity:0}
.bx-beam-go{stroke:var(--c-cyan);filter:drop-shadow(0 0 4px var(--c-cyan))}
.bx-beam-back{stroke:var(--c-violet);filter:drop-shadow(0 0 4px var(--c-violet))}
@media(max-width:760px){
 .bx-beams{grid-template-columns:1fr;gap:56px;padding:32px 20px}
 .bx-beams-col{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch}
 .bx-beams .bx-beams-label,.bx-beams-you .bx-beams-label{width:100%;align-items:center;text-align:center}
 .bx-beams-model .bx-beams-label{order:3;margin:2px 0 0}
 .bx-node{width:auto;flex:1 1 140px;max-width:220px;padding:10px 12px}
}

/* Solution page tiles (Mike, 2026-11-02; scripts/solution-page.mjs). Files and folders coloured by kind; the phone's
   approval, Approve on top; whether the model fits each machine (bar: 18 GB needed against its memory). */
.bx-k-folder{--k:var(--c-amber)}.bx-k-md{--k:var(--c-cyan)}.bx-k-csv{--k:var(--c-green)}.bx-k-file{--k:var(--c-violet)}
.bx-tiles .bx-tile-art:has(>.bx-phone-mini){align-items:center;justify-content:flex-end;padding-bottom:0}
.bx-phone-mini{width:min(100%,264px);padding:12px 16px 20px;border:1px solid var(--line);border-bottom:0;border-radius:32px 32px 0 0;background:var(--bg)}
.bx-tiles .bx-phone-mini-top{margin:0 0 14px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--fg)}
.bx-phone-mini-top i{width:62px;height:18px;border-radius:999px;background:var(--surface2)}
.bx-phone-mini-top::after{content:"";width:22px}

.bx-ask-wait i{width:7px;height:7px;border-radius:50%;background:var(--c-amber);animation:bx-blink 1.2s ease-in-out infinite}
.bx-ask-stack{grid-template-columns:1fr}
.bx-phone-mini .bx-ask code{color:var(--c-cyan)}
.bx-model{margin:0 0 6px;display:flex;flex-direction:column;font-size:18px;font-weight:450;letter-spacing:-.02em;color:var(--fg)}
.bx-model small{font-size:11.5px;letter-spacing:0;color:var(--muted)}
.bx-fit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.bx-fit span{display:flex;flex-direction:column;min-width:0}
.bx-fit b{font-size:13px;font-weight:500}
.bx-fit small{font-size:11.5px;color:var(--muted)}
.bx-fit em{font-style:normal;font-size:11.5px;padding:2px 8px;border-radius:999px;color:var(--c-green);background:color-mix(in srgb,var(--c-green) 13%,transparent)}
.bx-fit i{grid-column:1/-1;height:5px;border-radius:3px;background:linear-gradient(var(--c),var(--c)) 0 0/var(--f) 100% no-repeat,var(--surface2)}
@media(prefers-reduced-motion:reduce){.bx-ask-wait i{animation:none}}

/* Windows on any page carry the colours they use. Approval notes (a new host, outside the workspace), the deny variant
   (Deny is pressed and the dot turns red) and the Connections window: is-hover / is-press on Add or Revoke access,
   then the code (is-code), the paired iPhone (is-paired) or the removed message (is-gone). */
.bx-win,.bx-phone-mini{--c-cyan:var(--bx-accent,#00d4ff);--c-violet:#a78bfa;--c-amber:#fbbf24;--c-green:#34d399;--c-red:#fb7185}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) :is(.bx-win,.bx-phone-mini){--c-cyan:#0891b2;--c-violet:#7c3aed;--c-amber:#b45309;--c-green:#059669;--c-red:#e11d48}}
:root[data-theme=light] :is(.bx-win,.bx-phone-mini){--c-cyan:#0891b2;--c-violet:#7c3aed;--c-amber:#b45309;--c-green:#059669;--c-red:#e11d48}
.bx-win .bx-ask-note{display:flex;gap:8px;padding:8px 10px;border-radius:8px;font-size:11.5px;line-height:1.45;color:var(--muted);background:color-mix(in srgb,var(--c-cyan) 10%,transparent)}
.bx-ask-note svg{flex:none;margin-top:1px;color:var(--c-cyan)}
.bx-ask-note b{font-weight:500;color:var(--fg)}
.bx-win .bx-ask-note.is-warn{background:color-mix(in srgb,var(--c-amber) 12%,transparent)}
.bx-ask-note.is-warn svg,.bx-ask-note.is-warn b{color:var(--c-amber)}
.bx-ask--deny.is-hover .bx-ask-main{box-shadow:none}
.bx-ask--deny.is-hover .bx-ask-alt{box-shadow:0 0 0 3px color-mix(in srgb,var(--c-red) 45%,transparent)}
.bx-ask--deny.is-press .bx-ask-main{transform:none}
.bx-ask--deny.is-press .bx-ask-alt{transform:scale(.95)}
.bx-ask--deny.is-done .bx-ask-status i{background:var(--c-red)}
.bx-win-conn p{margin:0}
.bx-win-conn .bx-win-body{display:grid;gap:10px}
.bx-win-conn .bx-conn-tabs{display:flex;gap:4px;font-size:11px;line-height:1.4;color:var(--muted)}
.bx-conn-tabs span{padding:4px 9px;border-radius:999px}
.bx-conn-tabs .is-on{color:var(--fg);background:var(--surface2)}
.bx-win-conn .bx-conn-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;line-height:1.4;color:var(--fg)}
.bx-conn-head b{font-weight:500}
.bx-conn-add{padding:3px 12px;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--bg);background:var(--fg);transition:transform .15s ease,box-shadow .2s ease}
.bx-conn-box{display:grid;align-content:start;min-height:84px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bx-win-conn .bx-conn-box>p{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line);font-size:12px;line-height:1.4;color:var(--fg)}
.bx-conn-box>p:first-child{border-top:0}
.bx-conn-row{justify-content:space-between}
.bx-conn-row b,.bx-conn-dev b{font-weight:500}
.bx-conn-code{justify-content:space-between;color:var(--muted)}
.bx-conn-code b{font:500 14px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:var(--c-cyan)}
.bx-conn-dev svg{flex:none;color:var(--c-cyan)}
.bx-conn-dev span{display:flex;flex-direction:column;flex:1;min-width:0}
.bx-conn-dev small{font-size:11px;color:var(--muted)}
.bx-conn-dev em{font-style:normal;font-size:11.5px;color:var(--c-red);padding:3px 8px;border-radius:999px;transition:transform .15s ease,box-shadow .2s ease}
.bx-win-conn .bx-conn-box>.bx-conn-empty{color:var(--muted)}
/* Revoke: the iPhone shows until Revoke access is pressed, then the removed message. Pair: the empty list, then Add,
   the code, and the paired iPhone. The still picture is the end of each. The three rows share one place under Allow
   connections, so the window keeps its size as they swap. */
.bx-win-conn .bx-conn-box>p:not(.bx-conn-row){grid-area:2/1}
.bx-win-conn[data-bx-conn=revoke] .bx-conn-box>.bx-conn-code,.bx-win-conn[data-bx-conn=revoke]:not(.is-gone) .bx-conn-box>.bx-conn-empty,.bx-win-conn[data-bx-conn=revoke].is-gone .bx-conn-box>.bx-conn-dev{visibility:hidden}
[data-bx-conn=revoke].is-hover .bx-conn-dev em{box-shadow:0 0 0 3px color-mix(in srgb,var(--c-red) 40%,transparent)}
[data-bx-conn=revoke].is-press .bx-conn-dev em{transform:scale(.94)}
.bx-win-conn[data-bx-conn=pair] .bx-conn-box>.bx-conn-empty,.bx-win-conn[data-bx-conn=pair]:not(.is-code) .bx-conn-box>.bx-conn-code,.bx-win-conn[data-bx-conn=pair].is-empty .bx-conn-box>.bx-conn-dev,.bx-win-conn[data-bx-conn=pair].is-code .bx-conn-box>.bx-conn-dev{visibility:hidden}
.bx-win-conn[data-bx-conn=pair].is-empty .bx-conn-box>.bx-conn-empty{visibility:visible}
[data-bx-conn=pair].is-hover .bx-conn-add{box-shadow:0 0 0 3px color-mix(in srgb,var(--c-cyan) 50%,transparent)}
[data-bx-conn=pair].is-press .bx-conn-add{transform:scale(.92)}
[data-bx-conn=pair] .bx-conn-dev em{color:var(--muted)}
.dp-step-art .bx-win,.sc-control-art .bx-win{width:100%;border-bottom:1px solid var(--line);border-radius:14px}

/* Long paths and web addresses wrap inside the window rather than widening it (phones). */
.bx-win,.bx-win-body,.bx-ask,.sc-control-art,.dp-step-art{min-width:0}
.bx-ask code{overflow-wrap:anywhere}

/* One-path diagrams in the /security and /deployment tabs: one card each side; a node outside your network (a hosted
   model, the web) has an amber dashed outline; the relay's hub shows a lock. */
.dp-panel .bx-beams{margin-top:0}
.bx-beams--one{padding-block:40px}
.bx-node.is-outside{border:1px dashed color-mix(in srgb,var(--c-amber,#fbbf24) 70%,var(--line))}
.bx-node.is-outside>svg{color:var(--c-amber,#fbbf24)}
.bx-beams{--c-cyan:var(--bx-accent,#00d4ff);--c-violet:#a78bfa;--c-amber:#fbbf24}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .bx-beams{--c-cyan:#0891b2;--c-violet:#7c3aed;--c-amber:#b45309}}
:root[data-theme=light] .bx-beams{--c-cyan:#0891b2;--c-violet:#7c3aed;--c-amber:#b45309}
.bx-hub-lock{color:var(--c-cyan)}