/* Founder OS — Agents Office styles. Uses the app's theme tokens (--bg, --card, --text, --jade = gold
   accent, --purple = maroon, --border, --display, --mono) so every skin stays consistent. */
.of-root{--of-gold:var(--jade);--of-glass:color-mix(in srgb,var(--card) 78%,transparent);--of-line:color-mix(in srgb,var(--text) 12%,transparent)}
.of-tabs{margin-bottom:10px}
.of-badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--of-gold,var(--jade));color:var(--on-accent);font-size:11px;font-weight:700;line-height:18px}
.of-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border:1px solid var(--of-line);border-radius:14px;background:var(--of-glass);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.of-top-l,.of-top-c,.of-top-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.of-brand{font-family:var(--display);font-size:20px;letter-spacing:.01em}
.of-muted{color:var(--muted)}
.of-warn{color:color-mix(in srgb,var(--amber) 72%,var(--text))}
.of-err{color:var(--red)}
.of-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.of-live i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:ofPulse 2s infinite}
.of-live.off{color:var(--faint)}.of-live.off i{animation:none}
@keyframes ofPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.of-clock{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:70px;text-align:right}
.of-cta{border:1px solid color-mix(in srgb,var(--jade) 70%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--jade) 92%,#fff 8%),var(--jade));color:var(--on-accent);border-radius:999px;padding:8px 16px;font-weight:700;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease}
.of-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px color-mix(in srgb,var(--jade) 35%,transparent)}
.of-cta.sm{padding:5px 12px;font-size:12px}
.of-kill{border:1px solid color-mix(in srgb,var(--red) 60%,transparent);background:transparent;color:var(--red);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:12px}
.of-kill.on{background:var(--red);color:#fff}
/* The office uses the full window width (the app caps other pages at 1200 px). */
body.of-wide #view{max-width:none!important;padding-left:clamp(12px,2vw,28px);padding-right:clamp(12px,2vw,28px)}
.of-grid{display:grid;grid-template-columns:minmax(240px,290px) minmax(0,1fr) minmax(260px,320px);gap:12px;align-items:stretch}
.of-stage{min-height:min(76vh,860px)}
@media (max-width:1180px){.of-grid{grid-template-columns:1fr}.of-stage{min-height:420px}.of-panel{max-height:none;overflow:visible}}
.of-panel{border:1px solid var(--of-line);border-radius:16px;background:var(--of-glass);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);padding:14px;max-height:74vh;overflow:auto;animation:ofIn .35s ease both}
@keyframes ofIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.of-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}
.of-big{font-family:var(--display);font-size:26px;margin:6px 0 8px}.of-big b{font-size:34px}
.of-counts{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:6px 0}
.of-counts b{color:var(--text);font-size:15px;margin-left:4px}
.of-wait{width:100%;margin:8px 0;border:1px solid color-mix(in srgb,var(--amber) 70%,transparent);background:color-mix(in srgb,var(--amber) 16%,transparent);color:color-mix(in srgb,var(--amber) 72%,var(--text));border-radius:10px;padding:8px;font-weight:700;cursor:pointer;animation:ofGlow 2.4s ease-in-out infinite}
@keyframes ofGlow{50%{box-shadow:0 0 18px color-mix(in srgb,var(--amber) 35%,transparent)}}
.of-lead{display:flex;align-items:center;gap:10px;margin:12px 0 4px}
.of-lead svg{border-radius:50%;flex:none}
.of-lead-n{font-family:var(--display);font-size:17px}
.of-mission{color:var(--muted);line-height:1.5}
.of-stream{margin-top:10px;border-top:1px solid var(--of-line);padding-top:8px}
.of-sline{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;padding:4px 0;line-height:1.35}
.of-col{flex:none;width:7px;height:7px;border-radius:50%;margin-top:5px;background:var(--faint)}
.of-col.c-in-progress,.of-card.c-in-progress .of-ring{background:#2f8f6a;color:#fff}
.of-col.c-waiting{background:var(--amber)}.of-col.c-done{background:var(--green)}.of-col.c-scheduled,.of-col.c-backlog{background:#6f8fd8}
.of-ask{display:flex;gap:6px;margin-top:10px}
.of-ask input,.of-newtask input,.of-newtask select,.of-pbar input{flex:1;min-width:0;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--of-line);border-radius:10px;padding:8px 10px;color:var(--text)}
.of-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.of-stage{position:relative;min-height:540px;border-radius:18px;overflow:hidden;border:1px solid var(--of-line);background:var(--bg);box-shadow:inset 0 0 120px color-mix(in srgb,#000 30%,transparent)}
.of-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.of-stage canvas:active{cursor:grabbing}
.of-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.of-stage-hint{position:absolute;left:12px;bottom:10px;color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;pointer-events:none}
.of-loading{position:absolute;inset:auto 0 46% 0;text-align:center;color:var(--muted);font-family:var(--mono);font-size:12px}
.of-label{position:absolute;left:0;top:0;transform:translate(-9999px,-9999px);will-change:transform;white-space:nowrap;transition:opacity .25s ease;font-size:11px;line-height:1.3}
.of-l-isl{padding:4px 8px 5px;border-radius:8px;font-size:9.5px;line-height:1.28;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:color-mix(in srgb,var(--card) 78%,transparent);backdrop-filter:blur(8px) saturate(130%);-webkit-backdrop-filter:blur(8px) saturate(130%);box-shadow:0 4px 14px color-mix(in srgb,#000 16%,transparent);display:flex;flex-direction:column;gap:1px;translate:0 calc(-100% - 9px)}
.of-l-isl::after,.of-l-zone::after{content:'';position:absolute;left:-1px;bottom:-10px;width:1px;height:9px;background:color-mix(in srgb,var(--text) 40%,transparent)}
.of-l-isl b{font-family:var(--display);font-size:12.5px;letter-spacing:.01em}
.of-label.collide{opacity:.15!important}
.of-label.collide:hover,.of-label.collide:focus-visible{opacity:1!important;z-index:6}.of-l-isl span{color:var(--muted)}
.of-l-isl .of-l-row i{font-style:normal;color:var(--text);font-weight:700;margin:0 5px 0 2px}
.of-l-isl em,.of-l-zone em,.of-l-ag em{font-style:normal;color:var(--amber);font-weight:700}
.of-l-isl:hover{border-color:var(--jade)}
button.of-label{font:inherit;color:inherit;text-align:left;margin:0;-webkit-appearance:none;appearance:none}
button.of-label.of-l-isl,button.of-label.of-l-zone{font-size:10.5px;line-height:1.28}
button.of-label:focus-visible{outline:2px solid var(--jade);outline-offset:2px;opacity:1!important}
.of-l-hub{text-align:center;translate:-50% -100%;display:flex;flex-direction:column;align-items:center;gap:1px}
.of-l-hub b{font-family:var(--display);font-size:13.5px;color:var(--jade);text-shadow:0 1px 2px color-mix(in srgb,var(--bg) 85%,transparent),0 0 10px color-mix(in srgb,var(--bg) 70%,transparent)}.of-l-hub span{color:var(--muted);font-family:var(--mono);font-size:9.5px;text-shadow:0 1px 2px color-mix(in srgb,var(--bg) 90%,transparent)}
.of-l-zone{padding:4px 8px 5px;border-radius:8px;font-size:9.5px;line-height:1.28;background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 14px color-mix(in srgb,#000 14%,transparent);display:flex;flex-direction:column;translate:0 calc(-100% - 9px)}
.of-l-zone b{font-size:12px}.of-l-zone span{color:var(--muted)}.of-l-zone:hover{border-color:var(--jade)}
.of-l-ag{translate:-50% -100%;padding:2px 7px;border-radius:7px;background:color-mix(in srgb,var(--card) 82%,transparent);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);box-shadow:0 3px 10px color-mix(in srgb,#000 14%,transparent);display:flex;flex-direction:column;align-items:center;font-size:10px;line-height:1.25}
.of-l-ag span{color:var(--muted);font-size:9.5px;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.of-l-ag.quiet{opacity:0!important;pointer-events:none!important}
.of-l-ag.quiet.hover,.of-l-ag.hover{opacity:1!important;z-index:5;border-color:var(--jade)}
@media (max-width:760px){.of-l-isl,.of-l-zone,button.of-label.of-l-isl,button.of-label.of-l-zone{font-size:9px;padding:3px 6px 4px}.of-l-isl b,.of-l-zone b{font-size:10.5px}.of-l-isl .of-l-row,.of-l-hub span{display:none}.of-l-hub b{font-size:11px}.of-l-ag{font-size:9px}}
.of-newtask{display:flex;gap:6px;margin-bottom:10px}.of-newtask select{flex:0 0 96px}
.of-fchips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.of-fchip{border:1px solid var(--of-line);background:transparent;color:var(--muted);border-radius:999px;padding:3px 9px;font-size:11px;cursor:pointer}
.of-fchip.on{background:color-mix(in srgb,var(--jade) 20%,transparent);color:var(--text);border-color:color-mix(in srgb,var(--jade) 60%,transparent)}
.of-cards{display:flex;flex-direction:column;gap:7px}
.of-card{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border:1px solid var(--of-line);border-radius:12px;background:color-mix(in srgb,var(--card) 60%,transparent);animation:ofIn .3s ease both}
.of-card.c-waiting{border-color:color-mix(in srgb,var(--amber) 55%,transparent);background:color-mix(in srgb,var(--amber) 9%,transparent)}
.of-ring{flex:none;min-width:44px;text-align:center;padding:3px 4px;border-radius:999px;font-family:var(--mono);font-size:9.5px;font-weight:700;background:color-mix(in srgb,var(--text) 10%,transparent)}
.of-card.c-done .of-ring{background:color-mix(in srgb,var(--green) 25%,transparent);color:var(--green)}
.of-card.c-waiting .of-ring{background:var(--amber);color:#1a1206}
.of-ct{font-size:12.5px;line-height:1.35}.of-cm{color:var(--muted);font-size:11px;margin-top:2px}
.of-bar{height:4px;border-radius:3px;background:color-mix(in srgb,var(--text) 10%,transparent);margin-top:6px;overflow:hidden}
.of-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--jade));transition:width .6s ease}
.of-empty{color:var(--muted);padding:16px;text-align:center;border:1px dashed var(--of-line);border-radius:12px}
.of-pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:10.5px;font-family:var(--mono);letter-spacing:.04em;border:1px solid var(--of-line);color:var(--muted);margin:2px 4px 0 0}
.of-pill.st-working{color:var(--green);border-color:color-mix(in srgb,var(--green) 50%,transparent)}
.of-pill.st-waiting{color:color-mix(in srgb,var(--amber) 72%,var(--text));border-color:color-mix(in srgb,var(--amber) 60%,transparent)}
.of-pill.st-queued{color:color-mix(in srgb,#5f7fd6 75%,var(--text))}
.of-pill.acc-connected{color:var(--green)}.of-pill.acc-needs-attention{color:var(--red)}.of-pill.acc-disabled{opacity:.6}
.of-divlist{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.of-divrow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 8px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer}
.of-divrow:hover{border-color:var(--of-line);background:color-mix(in srgb,var(--text) 4%,transparent)}
.of-divrow span:nth-child(2){flex:1}
.of-swatch{width:12px;height:12px;border-radius:4px;flex:none}
.of-brief-mini{margin-top:12px;padding:10px;border-radius:12px;border:1px solid color-mix(in srgb,var(--jade) 40%,transparent);background:color-mix(in srgb,var(--jade) 7%,transparent)}
.of-kv{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:4px 0;border-bottom:1px dashed var(--of-line)}.of-kv span{color:var(--muted)}.of-kv b{text-align:right;font-weight:600}
.of-list{margin:4px 0 0 16px;padding:0;font-size:12.5px;line-height:1.45}
.of-tags{display:flex;flex-wrap:wrap;gap:4px}.of-tags span{font-size:11px;padding:2px 7px;border-radius:7px;background:color-mix(in srgb,var(--text) 7%,transparent)}
.of-now{margin:10px 0;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--green) 9%,transparent);font-size:12.5px}
.of-memline{font-size:12px;color:var(--muted);padding:3px 0}
.of-brief{margin-top:4px}
.of-headline{font-family:var(--display);font-size:22px;line-height:1.25;margin:6px 0 10px;text-transform:none;letter-spacing:0}
.of-rules{font-size:12.5px;color:var(--muted)}.of-rules ul{margin:4px 0 0 16px}
.of-decide{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.of-bsec{margin-top:16px}.of-bsec h3{font-family:var(--display);font-size:18px;margin-bottom:8px}
.of-bcard{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:10px;border:1px solid var(--of-line);border-radius:14px;margin-bottom:8px;background:var(--of-glass)}
.of-bcard.go{border-left:3px solid var(--green)}.of-bcard.hold{border-left:3px solid var(--amber)}.of-bcard.nogo{border-left:3px solid var(--red)}
.of-bmedia img{width:140px;height:180px;object-fit:cover;border-radius:10px;background:color-mix(in srgb,var(--text) 6%,transparent)}
.of-nomedia{width:140px;height:90px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--faint);font-size:11px}
.of-bmeta{font-size:12px;color:var(--muted);margin-bottom:6px}
.of-btext{white-space:pre-wrap;font-size:13px;line-height:1.5;max-height:180px;overflow:auto}
.of-reasons{margin-top:6px;font-size:12px;color:color-mix(in srgb,var(--amber) 72%,var(--text))}
.of-bcard.nogo .of-reasons{color:var(--red)}
.of-checks{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.of-chk{font-size:10.5px;font-family:var(--mono);padding:1px 6px;border-radius:6px;border:1px solid var(--of-line)}
.of-chk.pass,.of-chk.PASS{color:var(--green)}.of-chk.warn,.of-chk.needs-tap,.of-chk.unknown,.of-chk.UNKNOWN{color:var(--amber)}.of-chk.fail,.of-chk.BLOCKED{color:var(--red)}
.of-bact{display:flex;gap:6px;margin-top:8px}
.of-kanban{display:grid;grid-template-columns:repeat(6,minmax(180px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px}
.of-kcol{border:1px solid var(--of-line);border-radius:14px;padding:8px;background:var(--of-glass);min-height:200px}
.of-kh{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between}
.of-kcard{padding:8px;border-radius:10px;border:1px solid var(--of-line);margin-bottom:6px;background:color-mix(in srgb,var(--card) 70%,transparent);animation:ofIn .3s ease both}
.of-pbar{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.of-pdept h3{font-family:var(--display);font-size:17px;margin:14px 0 8px}
.of-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.of-pcard{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:10px;border-radius:12px;border:1px solid var(--of-line);background:var(--of-glass);color:var(--text);cursor:pointer;transition:transform .15s ease,border-color .15s}
.of-pcard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--jade) 60%,transparent)}
.of-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px}
@media (max-width:980px){.of-grid2{grid-template-columns:1fr}}
.of-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}.of-table th,.of-table td{text-align:left;padding:6px;border-bottom:1px solid var(--of-line);vertical-align:top}
.of-cov{display:grid;grid-template-columns:150px 1fr 34px;gap:8px;align-items:center;font-size:11.5px;margin:3px 0}.of-cov i{height:6px;border-radius:3px;background:var(--jade);display:block}
.of-hit{padding:8px 0;border-bottom:1px solid var(--of-line)}.of-hit mark{background:color-mix(in srgb,var(--jade) 35%,transparent);color:inherit}
.of-pre{white-space:pre-wrap;font-family:var(--mono);font-size:12px;background:color-mix(in srgb,var(--text) 6%,transparent);padding:10px;border-radius:10px;max-height:260px;overflow:auto}
.of-risk{border-color:color-mix(in srgb,var(--amber) 55%,transparent);background:color-mix(in srgb,var(--amber) 8%,transparent);font-size:13px;line-height:1.5}
.of-bhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}.of-bhead h3{font-family:var(--display);font-size:18px;margin:0}
.of-sw{display:inline-block;width:16px;height:16px;border-radius:4px;margin-left:3px;border:1px solid var(--of-line)}
/* ---- added 10 Oct 2026: greeting, goal, setup, pairing, decisions rail, dialogs, phone layout ---- */
.of-live.busy{color:var(--amber)}.of-live.busy i{animation:none}
.of-hello h2{font-family:var(--display);font-size:22px;margin:0 0 4px}.of-hello p{font-size:13px;line-height:1.5;margin:0 0 8px}
.of-goal{margin:12px 0;padding:10px;border-radius:12px;border:1px solid var(--of-line);background:color-mix(in srgb,var(--text) 3%,transparent)}
.of-goal-n{font-family:var(--display);margin:4px 0}.of-goal-n b{font-size:20px}.of-goal-n span{color:var(--muted);font-size:13px}
.of-goal-bar{height:6px}
.of-setup{margin:10px 0;padding:10px;border-radius:12px;border:1px solid color-mix(in srgb,var(--jade) 45%,transparent);background:color-mix(in srgb,var(--jade) 6%,transparent)}
.of-steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.of-steps li{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:start;font-size:12.5px}
.of-steps li.done{opacity:.7}
.of-stepdot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--of-line);display:grid;place-items:center;font-size:11px;color:var(--green)}
.of-steps li.done .of-stepdot{border-color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent)}
.of-railtabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.of-deptchips{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0}
.of-dhead{font-size:13px;line-height:1.4;margin-bottom:8px}
.of-approve-all{width:100%;margin:4px 0 6px}
.of-dcard{padding:9px 10px;border:1px solid var(--of-line);border-radius:12px;margin-top:6px;background:color-mix(in srgb,var(--card) 60%,transparent)}
.of-dcard.go{border-left:3px solid var(--green)}.of-dcard.hold{border-left:3px solid var(--amber)}.of-dcard.nogo{border-left:3px solid var(--red);opacity:.85}
.of-dcard.held,.of-bcard.held{opacity:.6;border-style:dashed}
.of-details{margin-top:6px}.of-details summary{cursor:pointer;color:var(--muted)}.of-details[open] summary{margin-bottom:4px}
.of-why{margin-top:6px;flex-basis:100%}
.of-bact{flex-wrap:wrap}
.of-bact .btn[disabled]{opacity:.45;cursor:not-allowed}
.of-feed{display:flex;flex-direction:column;gap:6px}
.of-fline{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--of-line)}
.of-col.c-failed{background:var(--red)}
.of-count{font-family:var(--mono);color:var(--text)}
.of-stage-ctl{position:absolute;right:10px;bottom:8px;display:flex;gap:6px}
.of-stage-ctl .of-fchip{background:color-mix(in srgb,var(--card) 85%,transparent);color:var(--text)}
.of-stage-off{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:160px!important;text-align:center;padding:16px}
.of-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.of-acts{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.of-acts .btn[disabled]{opacity:.45;cursor:not-allowed}
.of-chk.NA{display:none}
/* in-app dialog (replaces the browser's confirm/prompt) */
.of-dlg{font-size:14px;line-height:1.5}.of-dlg p{margin:6px 0}
.of-dlg .of-btext{max-height:160px;padding:8px;border-radius:8px;background:color-mix(in srgb,var(--text) 5%,transparent)}
.of-dlist{margin:6px 0 8px 18px;padding:0;max-height:220px;overflow:auto;font-size:13px}
.of-dlg-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}
.of-dlg-foot .of-kill{padding:8px 16px;font-weight:700;font-size:13px}
/* phone: one column, no sideways scroll, page scrolls over the 3D canvas */
@media (max-width:760px){
  body.of-wide #view{padding-left:10px;padding-right:10px}
  .of-tabs{display:flex;flex-wrap:wrap;gap:4px;overflow:visible}
  .of-tabs .tab{flex:1 1 auto;min-width:0;padding:7px 8px;font-size:12.5px}
  .of-top{padding:8px 10px;gap:8px}.of-top-c{width:100%;gap:8px;font-size:11px}
  .of-top .of-cta{width:100%;text-align:center}
  .of-clock{display:none}
  .of-panel{max-height:none;overflow:visible}
  .of-stage{min-height:300px}
  .of-stage canvas{touch-action:pan-y}
  .of-stage-hint{display:none}
  .of-bcard{grid-template-columns:1fr}
  .of-bmedia img{width:100%;height:auto;max-height:340px}
  .of-nomedia{width:100%;height:48px}
  .of-decide .of-cta,.of-decide .btn{flex:1 1 100%;text-align:center;padding:12px}
  .of-bact .btn,.of-acts .btn{padding:9px 12px}
  .of-kanban{grid-template-columns:repeat(6,minmax(220px,80vw));scroll-snap-type:x mandatory}.of-kcol{scroll-snap-align:start}
  .of-newtask{flex-wrap:wrap}.of-newtask select{flex:1 1 100%}
  .of-pbar{flex-wrap:wrap}
  .of-cov{grid-template-columns:110px 1fr 30px}
}
/* ---- talk (CEO / Chief of Staff chat), proposals, functions ---- */
.of-talk{display:flex;flex-direction:column;gap:8px}
.of-thread{display:flex;flex-direction:column;gap:10px;max-height:min(62vh,640px);overflow:auto;padding:6px 2px;scroll-behavior:smooth}
.of-msg{display:flex;gap:8px;align-items:flex-end;max-width:min(720px,92%)}
.of-msg.me{align-self:flex-end;flex-direction:row-reverse}
.of-msg-av svg{border-radius:50%;display:block}
.of-msg-b{padding:9px 12px;border-radius:14px;border:1px solid var(--of-line);background:color-mix(in srgb,var(--card) 70%,transparent)}
.of-msg.me .of-msg-b{background:color-mix(in srgb,var(--jade) 14%,transparent);border-color:color-mix(in srgb,var(--jade) 40%,transparent)}
.of-msg-t{white-space:pre-wrap;font-size:13.5px;line-height:1.5}
.of-msg-time{color:var(--muted);margin-top:4px}
.of-icard{margin-top:6px;padding:7px 9px;border-radius:10px;border:1px solid var(--of-line);font-size:12.5px;background:color-mix(in srgb,var(--text) 3%,transparent)}
.of-icard.task{border-left:3px solid var(--green)}.of-icard.prop{border-left:3px solid var(--amber)}.of-icard.dropped{color:var(--muted);border-style:dashed}
.of-chatform{align-items:flex-end}.of-chatform textarea{flex:1;min-width:0;resize:vertical;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--of-line);border-radius:10px;padding:8px 10px;color:var(--text);font:inherit}
.of-pcardx{padding:10px 12px;border:1px solid var(--of-line);border-left:3px solid var(--amber);border-radius:14px;margin-bottom:8px;background:var(--of-glass)}
.of-pcardx.feature{border-left-color:var(--jade)}.of-pcardx.hire{border-left-color:#6f8fd8}
.of-dcard.prop{border-left:3px solid var(--jade)}
.of-spark{width:60px;height:20px;color:var(--jade);vertical-align:middle}
.of-up{color:var(--green);font-weight:600}.of-down{color:var(--red);font-weight:600}
.of-better{margin:4px 0 8px;color:var(--muted)}
@media (max-width:760px){.of-thread{max-height:none}.of-msg{max-width:100%}}
.of-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:6px 0}.of-kpi{padding:8px 10px;border:1px solid var(--of-line);border-radius:10px;background:color-mix(in srgb,var(--card) 70%,transparent)}.of-kpi b{font-family:var(--display);font-size:20px}.of-kpi.warn{border-left:3px solid var(--amber)}
@media (prefers-reduced-motion:reduce){.of-panel,.of-card,.of-kcard{animation:none}.of-live i,.of-wait{animation:none}}
/* Accessibility (gates 10 Oct 2026, row 22). Faint text inside the office meets WCAG AA (>= 4.5:1) on every
   background of every skin (page, cards, glass panels): the app's --faint is too light for text (2.5-3.6:1). */
.of-root{--faint:#948C7C}
[data-theme="noir"] .of-root{--faint:#8EA5BE}
[data-theme="bone"] .of-root{--faint:#696179}
[data-theme="light"] .of-root{--faint:#6E6553}
.of-tabs [role="tab"]:focus-visible,.of-railtabs [role="tab"]:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
/* plain warning with the technical detail folded away (M1 review 2, U8) */
.of-tech{margin-top:4px}.of-tech summary{cursor:pointer;text-decoration:underline}