:root{--paper:#141619;--ink:#eef1f4;--muted:#a3acb7;--line:#30343b;--green:#a78bfa;--red:#ff9d9d;--yellow:#e9bd73;--white:#1c1f24;--mint:#302642;--blue:#7db7e3}body{background:var(--paper)}button,input:not([type=checkbox]),textarea{background:#22262c;color:var(--ink);border-color:#424853}button:hover{background:#31303b;border-color:#9583ba}button.primary{background:#7c3aed;color:white;border-color:#8b5cf6}.sidebar{background:#111316;border-color:#30343b}.brand{font-size:23px}.brand>span{color:#a78bfa}.word-office{color:#e4e8ef;font-size:20px}.sidebar footer .dot{background:#34c69a}.nav-label{color:#818b98}.sidebar nav button.active,.sidebar nav a.active{background:#302642;color:#ded0ff}.topbar{min-height:64px}.heading{padding:25px 0 20px}.eyebrow{color:#a78bfa}h1{font-size:30px}.metrics{margin-bottom:18px}.metric .value{font-size:27px}.badge{background:#343942;color:#d4dbe4}.badge.OK,.badge.APPROVED,.badge.LIVE,.badge.DRAFT_VERIFIED,.badge.success{background:#1b3d34;color:#91e4c2}.badge.RED,.badge.EXPIRED,.badge.failed,.badge.error,.badge.crashed{background:#4c2c32;color:#ffb5b6}.badge.HELD,.badge.ATTENTION,.badge.waiting{background:#443725;color:#edcd98}.badge.STALE,.badge.UNKNOWN{background:#34343e;color:#c6c6d8}.badge.running{background:#253e48;color:#99d9ee}.notice{background:#383022;color:#e6cfa9}.post .reason{color:#d5b783}.datebox{background:#282e37}.datebox small{color:#b4bbc7}.tabs button.active{background:#a78bfa;color:#17131e}.day{background:#1b1f24}.day button{background:#2d293a}.room-directory>button:hover{background:#25242e}.room-directory>button>div{min-height:35px;align-items:center}.room-directory{gap:0 15px}#office-world{background:#171c23;height:560px;margin:0}.office-toolbar{padding:6px 0 14px}.office-toolbar>span{color:#bdc6d1}.office-toolbar button{background:#23272e}.office-summary{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:24px 0}.office-summary h2{font-size:16px;margin-bottom:14px}.run-row{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:12px;align-items:start;padding:13px 0;border-bottom:1px solid var(--line)}.run-dot{width:7px;height:7px;background:#8593a3;border-radius:50%;margin-top:7px}.run-dot.success{background:#37c6a1}.run-dot.error,.run-dot.crashed{background:#f38484}.run-dot.running{background:#70cee6}.run-row h3{font-size:13px}.run-row p{font-size:11px;color:var(--muted);margin-top:4px}.run-row>small{font-size:10px;color:var(--muted);text-align:right}.work-controls{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}.work-controls input{max-width:360px;margin:0}.work-controls select{padding:9px;background:#22262c;border:1px solid #424853;border-radius:6px;color:var(--ink)}.work-count{margin-bottom:12px;color:var(--muted);font-size:12px}.job-status{font-size:10px;color:#a3acb7}.work-controls+div table td:first-child{max-width:290px}.room-directory small{display:block;margin-top:5px}dialog{background:#1d2127}fieldset{border-color:#424853}.table-wrap{scrollbar-color:#59616e #20252c}#editor-error{color:#ffb5b6}.mode{color:#c4bad8}.source a{color:#baa1f5}.office-mode .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.office-mode .heading{padding:19px 0 20px}.office-mode .metric{padding:13px}.office-mode .metric .value{font-size:25px}.office-mode main{max-width:none}.office-mode .room-directory{grid-template-columns:repeat(3,minmax(0,1fr))}.login{background:#141619}.login-panel{color:#eef1f4}.login-panel .primary{background:#7c3aed}@media(min-width:1500px){#office-world{height:680px}}@media(max-width:700px){#office-world{height:450px}.office-summary{grid-template-columns:1fr;gap:20px}.room-directory,.office-mode .room-directory{grid-template-columns:repeat(2,minmax(0,1fr))}.office-mode .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.office-mode .metric{padding:10px 6px;border-top:0;border-right:1px solid var(--line)}.office-mode .metric:last-child{border-right:0}.office-mode .metric .label{font-size:10px}.office-mode .metric .hint{font-size:9px}.office-mode .metric .value{font-size:23px}.heading p:not(.eyebrow){font-size:12px}.work-controls input{width:100%;max-width:none}.room-directory>button>div{min-height:52px;align-content:start;gap:3px}.brand{font-size:22px}.sidebar{padding-bottom:11px}} /* --- KPI semantics ------------------------------------------------------- Every metric value used to render identical white, so a healthy number and a number bleeding money looked the same. Tone is passed per-metric from office.js; `dead` is auto-applied to non-values (?, Unknown) so an unwired source reads as absent rather than as a real reading of zero. */ .metric .value{transition:color .2s ease} /* Staleness must not look like health. STALE was the same grey chip as everything else, on every tab, which is why the whole office read as "fine". */ .badge.STALE{background:#43331f;color:#f0b968} .badge.UNKNOWN{background:#2b2f36;color:#7d8792} .badge.OK,.badge.ACTIVE{background:#16362e;color:#4ade9f} /* Approval is the one thing the office asks of you; the plan specifies amber. */ .mode{border-color:#6b4f22;color:#f0b968;background:#2a2115;font-weight:600} /* Scene status: collecting/working/idle must be distinguishable at a glance, and idle must not look like failure — it is a true and normal state. */ #office-live{font-weight:600} #office-live.live-collecting{color:#7dd3fc} #office-live.live-working{color:#4ade9f} #office-live.live-idle{color:#98a2ae} #office-live.live-collecting::before,#office-live.live-working::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;background:currentColor;animation:pulse 2s ease-in-out infinite} #office-live.live-idle::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;background:#5b6470} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} @media(prefers-reduced-motion:reduce){#office-live::before{animation:none!important}} /* Headquarters: full-bleed scene, compact operational chrome. */ :root{--paper:#10111b;--white:#191b29;--line:#303044;--muted:#a7adbf} .sidebar{background:#10111c;border-color:#2b293c} .sidebar nav button.active,.sidebar nav a.active{background:#2d2046;box-shadow:inset 3px 0 #bb83ff} .sidebar nav button:hover,.sidebar nav a:hover{background:#201e31} .topbar{background:#10111b} .office-mode .heading{padding:18px 0 14px} .office-mode h1{font-size:25px} .office-mode .eyebrow{margin-bottom:6px} .office-mode .metrics{margin-bottom:8px} .office-mode .heading p:not(.eyebrow){margin-top:5px} #office-world{height:700px;background:#0d0e18} .office-toolbar{min-height:48px;padding:6px 0;font-size:11px} .office-mode .room-directory>button{padding:14px 10px} .office-mode main{padding-left:25px;padding-right:25px} .office-mode .room-directory p{font-size:11px} .office-mode .room-directory small{font-size:9px} dialog{color:var(--ink);border-color:#52506d;background:#191b2b;box-shadow:0 24px 100px #0009} .operator-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:1px solid var(--line);padding:14px 0} .operator-strip button{text-align:left;display:grid;gap:5px;background:#191b2a;padding:12px;min-width:0} .operator-strip button>span:not(.badge){font-size:11px;color:var(--muted)} .operator-strip .badge{justify-self:start} .operator-output{white-space:pre-wrap;font-size:13px;line-height:1.8;overflow-wrap:anywhere;border-top:1px solid var(--line);padding:18px 0} #operator-error{color:var(--red)} @media(max-width:700px){.operator-strip{gap:5px}.operator-strip button{padding:8px 6px;font-size:12px}.operator-strip button>span:not(.badge){font-size:9px}.operator-strip .badge{font-size:8px}} button:focus-visible,a:focus-visible{outline:2px solid #c391ff;outline-offset:3px} @media(min-width:1650px){#office-world{height:790px}} @media(max-width:700px){ .office-mode main{padding:0 12px} #office-world{height:500px;margin-left:-12px;width:calc(100% + 24px)} .office-toolbar>span{max-width:calc(100% - 125px)} .office-mode h1{font-size:24px} .office-mode .metrics .value{font-size:20px} .office-mode .room-directory{grid-template-columns:1fr 1fr} } /* ============================================================================ ORBIT HEADQUARTERS — neon skin (Builder B, office-v2.css) ---------------------------------------------------------------------------- Every colour below resolves from the --hq-* token block at the very END of this file (build contract §1). Nothing here invents a hue, and no colour is defined only inside a media query. Honesty rules this stylesheet enforces visually: · [data-tone="dead"] and .drawer-empty render as an explicit ABSENCE — dead grey, dashed/hatched, never the confident colour of a real reading. · [data-stale="true"] and [data-state="EXPIRED"] are always amber. Stale can never look healthy. · disabled chrome (#new-task, #drawer-chat, #drawer-redirect, #drawer-pause) is flattened: no gradient, no glow, not-allowed cursor. ========================================================================== */ /* -- 1. Legacy variable bridge ------------------------------------------- office.css + the earlier blocks in this file are written against --paper / --ink / --line / --muted / --green / etc. Re-pointing them at the HQ tokens re-skins every inherited component (tables, dialogs, calendar, posts) in one move instead of restating hundreds of rules. */ :root{ color-scheme:dark; --paper:var(--hq-ground); --ink:var(--hq-text); --muted:var(--hq-muted); --line:var(--hq-line); --white:var(--hq-surface); --mint:var(--hq-surface-2); --green:var(--hq-violet-bright); --red:var(--hq-red); --yellow:var(--hq-amber); --blue:var(--hq-cyan); } /* The drawer parks off-canvas at translateX(100%); clip keeps that from ever producing a horizontal scrollbar. overflow-x:clip is the one value that may pair with a visible y axis, so vertical scrolling is untouched. */ html{overflow-x:clip} body{background:var(--hq-ground);color:var(--hq-text);-webkit-font-smoothing:antialiased} body.office-mode{padding-bottom:var(--hq-ticker-h)} ::selection{background:color-mix(in srgb,var(--hq-violet) 45%,transparent);color:var(--hq-text)} *{scrollbar-color:var(--hq-line) transparent;scrollbar-width:thin} button:focus-visible,a:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--hq-violet-bright);outline-offset:3px;border-radius:var(--hq-radius-sm)} /* -- 2. Shell: sidebar, headings, generic controls ----------------------- */ .sidebar{ background:linear-gradient(180deg,var(--hq-ground-2) 0%,var(--hq-ground) 100%); border-right:1px solid var(--hq-line-soft); padding-bottom:20px; } .brand{color:var(--hq-text);letter-spacing:-.02em} .brand>span{color:var(--hq-violet-bright)} .word-office{color:var(--hq-text-dim)} .nav-label{color:var(--hq-muted);letter-spacing:.16em;margin-top:34px} .sidebar nav button,.sidebar nav a{border-radius:var(--hq-radius-sm);color:var(--hq-text-dim);text-decoration:none;transition:background .16s ease,color .16s ease} .sidebar nav button:hover,.sidebar nav a:hover{background:var(--hq-surface);color:var(--hq-text)} .sidebar nav button.active,.sidebar nav a.active{ background:color-mix(in srgb,var(--hq-violet) 24%,var(--hq-surface)); color:var(--hq-text);font-weight:700; box-shadow:inset 3px 0 var(--hq-violet-bright),0 0 0 1px color-mix(in srgb,var(--hq-violet) 34%,transparent); } .sidebar footer{color:var(--hq-muted);border-top:1px solid var(--hq-line-soft);padding-top:14px;margin-top:22px} .sidebar footer .dot{background:var(--hq-teal);box-shadow:var(--hq-glow-teal)} button{border-radius:var(--hq-radius-sm);border-color:var(--hq-line);background:var(--hq-surface);color:var(--hq-text-dim);transition:background .16s ease,border-color .16s ease,color .16s ease} button:hover{background:var(--hq-surface-2);border-color:color-mix(in srgb,var(--hq-violet) 55%,var(--hq-line));color:var(--hq-text)} button:disabled,button:disabled:hover{background:var(--hq-surface);border-color:var(--hq-line-soft);color:var(--hq-dead);cursor:not-allowed;box-shadow:none;opacity:1} button.primary{background:var(--hq-grad-violet);border-color:transparent;color:#fff;box-shadow:var(--hq-glow-violet)} input:not([type=checkbox]),textarea,select{background:var(--hq-ground-2);border-color:var(--hq-line);color:var(--hq-text);border-radius:var(--hq-radius-sm)} input::placeholder{color:var(--hq-muted)} .eyebrow{color:var(--hq-violet-bright);letter-spacing:.18em} h1{letter-spacing:-.025em} .office-mode h1{font-size:27px} .heading p:not(.eyebrow){color:var(--hq-text-dim)} .mode{border-color:color-mix(in srgb,var(--hq-amber) 45%,transparent);color:var(--hq-amber);background:color-mix(in srgb,var(--hq-amber) 12%,var(--hq-surface));letter-spacing:.09em} .source,.page-footer{color:var(--hq-muted)} .source a{color:var(--hq-violet-bright)} .notice{background:color-mix(in srgb,var(--hq-amber) 13%,var(--hq-surface));color:var(--hq-amber);border-left-color:var(--hq-amber)} dialog{background:var(--hq-surface);border:1px solid var(--hq-line);border-radius:var(--hq-radius);color:var(--hq-text);box-shadow:0 40px 120px rgba(0,0,0,.7)} dialog::backdrop{background:color-mix(in srgb,var(--hq-ground) 78%,transparent)} .metrics,.list,.room-directory,table td,table th,.waiting-item,.account,.run-row{border-color:var(--hq-line-soft)} .day{background:var(--hq-ground-2);border-color:var(--hq-line-soft)} .datebox{background:var(--hq-surface-2)} #office-world{background:var(--hq-ground);border-radius:var(--hq-radius);border:1px solid var(--hq-line-soft)} /* -- 3. Top bar ---------------------------------------------------------- office.css styles `.topbar>div` (0,1,1), so every override here is written at .topbar + class (0,2,0) or on the id to actually win the cascade. */ /* Two deliberate rows rather than an accidental wrap: identity + tools on top, the KPI rail as a full-width band beneath it. Four pills plus a search field, two buttons, an avatar and a clock never fit one line at a real width, so the break is designed instead of discovered. */ .topbar,#topbar{ min-height:0;display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"greet tools" "kpis kpis"; align-items:center;column-gap:24px;row-gap:14px; padding:16px 0 18px;border-bottom:1px solid var(--hq-line-soft); background:var(--hq-ground);color:var(--hq-text-dim); } .topbar .topbar-greet{grid-area:greet;min-width:0;display:grid;gap:4px} #greeting{font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--hq-text)} #greeting-sub{font-size:12px;color:var(--hq-muted);letter-spacing:.01em} #greeting-sub:empty{display:none} .topbar .kpi-rail{ grid-area:kpis;display:flex;align-items:stretch;gap:10px;min-width:0; overflow-x:auto;overflow-y:hidden;padding:2px;scrollbar-width:none; } .topbar .kpi-rail::-webkit-scrollbar{display:none} .kpi{ --hq-tone:var(--hq-muted); position:relative;flex:1 1 0;min-width:150px; display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto; column-gap:9px;row-gap:1px;align-items:center; padding:11px 14px 10px;border-radius:var(--hq-radius); background:linear-gradient(180deg,color-mix(in srgb,#fff 4%,var(--hq-surface)) 0%,var(--hq-surface) 68%); border:1px solid var(--hq-line-soft); transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; } .kpi:hover{border-color:color-mix(in srgb,var(--hq-tone) 52%,var(--hq-line));box-shadow:0 0 0 1px color-mix(in srgb,var(--hq-tone) 18%,transparent),0 10px 30px rgba(0,0,0,.35)} .kpi[data-tone="good"]{--hq-tone:var(--hq-teal)} .kpi[data-tone="warn"]{--hq-tone:var(--hq-amber)} .kpi[data-tone="bad"]{--hq-tone:var(--hq-red)} .kpi[data-tone="neutral"]{--hq-tone:var(--hq-violet-bright)} .kpi[data-tone="dead"]{--hq-tone:var(--hq-dead)} .kpi-dot{ grid-row:1;grid-column:1;width:9px;height:9px;border-radius:50%; background:var(--hq-tone);box-shadow:0 0 12px var(--hq-tone); } .kpi[data-tone="dead"] .kpi-dot{box-shadow:none;background:transparent;border:1.5px dashed var(--hq-dead)} /* Fixed line box so the label and note baselines line up across all four pills even when one of them is rendering `Unavailable` at caption size. */ .kpi-value{ grid-row:1;grid-column:2;font-size:24px;font-weight:700;line-height:28px; letter-spacing:-.03em;color:var(--hq-text);font-variant-numeric:tabular-nums; } /* Contract §2.1: `Unavailable` must never be able to read as a real zero. */ .kpi[data-tone="dead"] .kpi-value{color:var(--hq-muted);font-size:14px;font-weight:600;letter-spacing:0;line-height:28px} .kpi-label{grid-row:2;grid-column:2;font-size:11px;font-weight:600;color:var(--hq-text-dim);line-height:1.35} .kpi-note{grid-row:3;grid-column:2;font-size:10px;color:var(--hq-muted);line-height:1.45;margin-top:2px} .kpi-note:empty{display:none} /* Staleness is never allowed to look healthy. */ .kpi[data-stale="true"]{--hq-tone:var(--hq-amber);border-color:color-mix(in srgb,var(--hq-amber) 48%,transparent)} .kpi[data-stale="true"]::after{ content:'';position:absolute;inset:0 0 auto;height:2px;border-radius:var(--hq-radius) var(--hq-radius) 0 0; background:linear-gradient(90deg,var(--hq-amber),color-mix(in srgb,var(--hq-amber) 10%,transparent)); } .kpi[data-stale="true"] .kpi-note{color:var(--hq-amber)} .topbar .topbar-tools{grid-area:tools;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:flex-end} .searchbox{ position:relative;display:flex;align-items:center;gap:8px; background:var(--hq-ground-2);border:1px solid var(--hq-line-soft); border-radius:999px;padding:0 10px 0 12px;height:36px;min-width:0;flex:0 1 230px; transition:border-color .16s ease,box-shadow .16s ease; } .searchbox:focus-within{border-color:color-mix(in srgb,var(--hq-violet) 62%,transparent);box-shadow:var(--hq-glow-violet)} .searchbox svg{width:14px;height:14px;color:var(--hq-muted);flex:0 0 auto} #omnisearch{ flex:1 1 auto;min-width:0;background:none;border:0;padding:0;margin:0; color:var(--hq-text);font-size:12px;height:100%; } #omnisearch:focus{outline:none} #omnisearch::-webkit-search-cancel-button{filter:grayscale(1) opacity(.6)} .kbd-hint{ flex:0 0 auto;font-size:9.5px;font-weight:600;letter-spacing:.04em; color:var(--hq-muted);background:var(--hq-surface-2); border:1px solid var(--hq-line);border-radius:5px;padding:2px 5px;line-height:1.3; } .icon-btn{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;padding:0;flex:0 0 auto; border-radius:50%;background:var(--hq-ground-2);border:1px solid var(--hq-line-soft);color:var(--hq-text-dim); } .icon-btn:hover{background:var(--hq-surface-2);color:var(--hq-text)} .icon-btn svg{width:16px;height:16px} .bell-count{ position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px; display:grid;place-items:center;border-radius:999px; background:var(--hq-amber);color:var(--hq-ground); font-size:9.5px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums; box-shadow:0 0 12px color-mix(in srgb,var(--hq-amber) 60%,transparent); } /* No data ⇒ no badge. An empty badge must not read as a count. */ .bell-count:empty{display:none} #waiting-shortcut,#refresh{ height:36px;padding:0 13px;font-size:11.5px;font-weight:600;white-space:nowrap; border-radius:999px;background:var(--hq-ground-2);border:1px solid var(--hq-line-soft);color:var(--hq-text-dim); } #waiting-shortcut:hover,#refresh:hover{background:var(--hq-surface-2);color:var(--hq-text);border-color:color-mix(in srgb,var(--hq-violet) 45%,var(--hq-line))} #waiting-shortcut b{ margin-left:7px;color:var(--hq-amber);font-variant-numeric:tabular-nums; background:color-mix(in srgb,var(--hq-amber) 15%,transparent); border-radius:6px;padding:2px 6px;font-size:11px; } .topbar-avatar,.avatar-sm{ flex:0 0 auto;display:grid;place-items:center;border-radius:50%; background:var(--hq-grad-violet);color:#fff;font-weight:800; box-shadow:var(--hq-glow-violet);letter-spacing:0; } .topbar-avatar{width:34px;height:34px;font-size:13px} .avatar-sm{width:30px;height:30px;font-size:12px} .topbar-clock{display:grid;gap:1px;text-align:right;flex:0 0 auto;line-height:1.35;padding-left:4px} .topbar-clock #date{font-size:11px;font-weight:600;color:var(--hq-text-dim);white-space:nowrap} .topbar-clock #clock{font-size:10px;color:var(--hq-muted);font-variant-numeric:tabular-nums} /* -- 4. Sidebar additions ------------------------------------------------ */ .sidebar-promo{ position:relative;overflow:hidden;margin-top:auto; display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center; padding:14px;border-radius:var(--hq-radius); background:var(--hq-grad-violet); box-shadow:0 12px 34px color-mix(in srgb,var(--hq-violet) 30%,transparent); } .sidebar-promo::after{ content:'';position:absolute;inset:auto -30% -70% auto;width:150px;height:150px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,#fff 26%,transparent) 0%,transparent 70%); } .promo-emoji{font-size:19px;line-height:1;position:relative;z-index:1} .sidebar-promo p{position:relative;z-index:1;font-size:11.5px;font-weight:600;line-height:1.45;color:#fff} /* .sidebar-promo takes margin-top:auto so the block sits above the footer; the footer keeps its own margin-top:auto in office.css harmlessly. */ .sidebar .sidebar-newtask{width:100%;margin-top:10px;justify-content:center} .btn-primary{ display:flex;align-items:center;justify-content:center;gap:7px; padding:11px 14px;border:1px solid transparent;border-radius:var(--hq-radius-sm); background:var(--hq-grad-violet);color:#fff;font-weight:700;font-size:12.5px; box-shadow:var(--hq-glow-violet); } .btn-primary:hover{filter:brightness(1.1);background:var(--hq-grad-violet);border-color:transparent;color:#fff} /* Chrome for a capability that does not exist must never look clickable. */ .btn-primary:disabled,.btn-primary:disabled:hover{ background:var(--hq-surface);color:var(--hq-dead);border-color:var(--hq-line-soft); box-shadow:none;filter:none;cursor:not-allowed; } .sidebar-user{ display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px; border-radius:var(--hq-radius-sm);background:var(--hq-surface);border:1px solid var(--hq-line-soft); } .sidebar-user>div{display:grid;line-height:1.35;min-width:0} .sidebar-user strong{font-size:12.5px;color:var(--hq-text)} .sidebar-user small{font-size:10px;color:var(--hq-muted)} /* -- 5. Right agent drawer ----------------------------------------------- */ .drawer{ position:fixed;top:0;right:0;bottom:0;z-index:60; width:min(var(--hq-drawer-w),100vw); display:flex;flex-direction:column;margin:0;padding:0; background:linear-gradient(180deg,var(--hq-surface) 0%,var(--hq-ground-2) 100%); border-left:1px solid var(--hq-line); box-shadow:-30px 0 90px rgba(0,0,0,.62); transform:translateX(100%);pointer-events:none; transition:transform .32s cubic-bezier(.22,.85,.32,1); } body.drawer-open .drawer{transform:none;pointer-events:auto} .drawer[aria-hidden="true"]{display:none} #room-focus{min-width:0;max-width:220px;padding:8px 10px;background:var(--hq-surface);border:1px solid var(--hq-line);border-radius:6px;color:var(--hq-text);font-size:12px;letter-spacing:0} #task-composer{width:min(560px,calc(100vw - 24px));max-height:90vh;padding:24px;color:var(--hq-text);border:1px solid var(--hq-line);border-radius:8px} #task-form{display:grid;gap:16px}#task-form label{display:grid;gap:7px;font-size:13px}#task-form select{width:100%;min-width:0;background:var(--hq-surface);color:var(--hq-text);padding:10px;border:1px solid var(--hq-line);border-radius:6px}#task-form textarea{width:100%;resize:vertical}#task-form .task-consent{display:flex;align-items:flex-start;line-height:1.5}#task-error{color:var(--hq-red);font-size:13px} @media(max-width:700px){.office-toolbar{flex-wrap:wrap}.office-toolbar>span{flex-basis:100%}#room-focus{flex:1}} .chip-row>.chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;flex-wrap:wrap;white-space:normal} .chip-row>.chip>button{white-space:normal;overflow-wrap:anywhere} .drawer-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding:18px 18px 14px 20px;border-bottom:1px solid var(--hq-line-soft);flex:0 0 auto; background:color-mix(in srgb,var(--hq-violet) 8%,transparent); } .drawer-eyebrow{display:block;font-size:9px;font-weight:800;letter-spacing:.2em;color:var(--hq-violet-bright)} #drawer-name{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-top:3px;color:var(--hq-text)} .drawer-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 30px;display:grid;gap:16px;align-content:start} .drawer-identity{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center} .drawer-avatar{ width:52px;height:52px;border-radius:16px;display:grid;place-items:center; font-size:20px;font-weight:800;color:#fff; background:var(--hq-grad-violet);box-shadow:var(--hq-glow-violet); } .drawer-avatar[data-agent="maya"]{background:linear-gradient(135deg,var(--hq-violet-deep) 0%,var(--hq-magenta) 100%);box-shadow:0 0 22px color-mix(in srgb,var(--hq-magenta) 42%,transparent)} .drawer-avatar[data-agent="nova"]{background:linear-gradient(135deg,var(--hq-violet) 0%,var(--hq-cyan) 100%);box-shadow:var(--hq-glow-cyan)} .drawer-avatar[data-agent="atlas"]{background:var(--hq-grad-violet);box-shadow:var(--hq-glow-violet)} .drawer-identity-copy{display:grid;gap:4px;min-width:0;justify-items:start} .drawer-agent-name{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--hq-text)} .drawer-role{font-size:11.5px;color:var(--hq-muted)} /* Status pills — all eight states in the contract vocabulary. */ .status-pill{ --hq-tone:var(--hq-muted); display:inline-flex;align-items:center;gap:6px; font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; padding:4px 9px 4px 8px;border-radius:999px;white-space:nowrap; color:var(--hq-tone); background:color-mix(in srgb,var(--hq-tone) 14%,var(--hq-surface)); border:1px solid color-mix(in srgb,var(--hq-tone) 38%,transparent); } .status-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--hq-tone);flex:0 0 auto} .status-pill[data-state="WORKING"]{--hq-tone:var(--hq-teal);box-shadow:var(--hq-glow-teal)} .status-pill[data-state="ON_CALL"]{--hq-tone:var(--hq-cyan);box-shadow:var(--hq-glow-cyan)} .status-pill[data-state="QUEUED"]{--hq-tone:var(--hq-violet-bright)} .status-pill[data-state="IDLE"]{--hq-tone:var(--hq-text-dim)} .status-pill[data-state="FAILED"]{--hq-tone:var(--hq-red)} /* Stale/expired observations are amber, always. */ .status-pill[data-state="EXPIRED"]{--hq-tone:var(--hq-amber)} /* Absence reads as absence: dead grey, dashed, no fill, no glow. */ .status-pill[data-state="NOT_CONNECTED"],.status-pill[data-state="UNKNOWN"]{ --hq-tone:var(--hq-muted);background:transparent;border-style:dashed;box-shadow:none; } .status-pill[data-state="NOT_CONNECTED"]::before,.status-pill[data-state="UNKNOWN"]::before{ background:transparent;border:1.5px dashed var(--hq-dead);width:7px;height:7px; } .status-pill[data-state="WORKING"]::before,.status-pill[data-state="ON_CALL"]::before{ animation:hq-pulse 2.2s ease-in-out infinite; } .drawer-block{ background:var(--hq-surface);border:1px solid var(--hq-line-soft); border-radius:var(--hq-radius);padding:14px 15px;display:grid;gap:10px; } /* The work ledger: on the Agents page as a table, in the operator drawer as recent rows. */ .ledger{margin-bottom:22px} .team-exchanges{margin:16px 0 24px;border-top:1px solid var(--hq-line-soft);padding-top:16px;min-width:0} .team-exchanges h2{font-size:16px;letter-spacing:0} .team-exchange{border-bottom:1px solid var(--hq-line-soft);padding:12px 0;min-width:0} .team-exchange summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:12px} .team-exchange summary span,.team-exchange small{color:var(--hq-muted)} .team-exchange p{font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;max-width:85ch} .team-primary{grid-template-columns:repeat(4,minmax(0,1fr))} .team-coordinator{display:grid;gap:5px;min-width:0;padding:12px;border:1px solid var(--hq-line-soft);border-radius:8px;background:var(--hq-surface);text-decoration:none;color:var(--hq-text)} .team-coordinator span{font-size:11px;color:var(--hq-muted)} @media(max-width:700px){.team-primary{grid-template-columns:repeat(2,minmax(0,1fr))}.team-coordinator{padding:8px 6px;font-size:12px}.team-exchange summary{align-items:flex-start;flex-direction:column}} .ledger-table td{vertical-align:middle} .ledger-table td:first-child{min-width:0;white-space:nowrap} .ledger-result{font-size:11.5px;color:var(--hq-text-dim);margin-top:4px;max-width:70ch} .ledger-error{font-size:11px;color:var(--hq-red);margin-top:4px;max-width:70ch} .ledger-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--hq-line-soft)} .ledger-row .ledger-title{font-size:12.5px;font-weight:600;color:var(--hq-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ledger-row small{font-size:10.5px;color:var(--hq-muted);white-space:nowrap} .btn-approve{padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--hq-teal);color:#06231b;border:0;cursor:pointer} .btn-approve:disabled{opacity:.5;cursor:not-allowed} /* A proposed reel's priced generation request, and the one button that approves the credits. */ .spend-quote:empty{display:none} .spend-quote{margin:14px 0 4px;padding:14px 16px;border:1px dashed color-mix(in srgb,var(--hq-amber) 55%,var(--hq-line));border-radius:var(--hq-radius-sm);background:var(--hq-ground-2)} .spend-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .spend-head strong{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--hq-amber)} .spend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 18px} .spend-quote .actions{align-items:center;gap:12px} .spend-quote .actions .source{margin:0} /* The attached media in the review modal: every slide, in order, at the card's own 4:5. */ .post-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0 4px} .post-media figure{margin:0;min-width:0} .video-proposal .post-media{grid-template-columns:minmax(0,1fr);margin:18px 0} .video-proposal .post-media img{aspect-ratio:9/16;max-height:58vh;object-fit:contain;background:transparent;border:0} .video-proposal .post-media figcaption{white-space:normal} /* contain, never cover: a 1:1 card in a 4:5 box is letterboxed on the card's own navy. Cropping a review thumbnail hides the very words being approved. */ .post-media img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;border-radius:6px;border:1px solid var(--hq-line-soft);background:#0F172A} .post-media figcaption{font-size:10px;line-height:1.4;color:var(--hq-muted);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .drawer-block-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .drawer-block-head h4{margin:0;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--hq-muted)} .drawer-elapsed{font-size:12px;font-weight:700;color:var(--hq-text-dim);font-variant-numeric:tabular-nums} /* The explicit unavailable state: a dashed, dead-toned well so it can never be mistaken for content. The TEXT is --hq-muted, not --hq-dead, because --hq-dead measures 2.8:1 on --hq-ground-2 and this is a sentence a person has to read; the dashed border and the well carry the "absent" signal instead. */ .drawer-empty{ font-size:11.5px;line-height:1.6;color:var(--hq-muted); background:var(--hq-ground-2); border:1px dashed color-mix(in srgb,var(--hq-dead) 60%,var(--hq-line)); border-radius:var(--hq-radius-sm);padding:12px 13px; } .drawer-empty::before{content:'—— ';color:var(--hq-dead);font-weight:700} .task-title{margin:0;font-size:14px;font-weight:650;line-height:1.4;color:var(--hq-text);overflow-wrap:anywhere} .task-desc{margin:0;font-size:11px;color:var(--hq-muted)} .chip-row{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:2px 0 0;padding:0} .chip{ font-size:10px;font-weight:600;letter-spacing:.03em; color:var(--hq-text-dim);background:var(--hq-surface-2); border:1px solid var(--hq-line);border-radius:999px;padding:3px 9px;white-space:nowrap; } .timeline{list-style:none;margin:0;padding:0;display:grid;gap:0} .timeline-row{ --hq-tone:var(--hq-muted); display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center; padding:9px 0;border-bottom:1px solid var(--hq-line-soft); } .timeline-row:last-child{border-bottom:0;padding-bottom:0} .timeline-dot{width:7px;height:7px;border-radius:50%;background:var(--hq-tone);box-shadow:0 0 9px var(--hq-tone)} .timeline-dot[data-tone="good"]{--hq-tone:var(--hq-teal)} .timeline-dot[data-tone="warn"]{--hq-tone:var(--hq-amber)} .timeline-dot[data-tone="bad"]{--hq-tone:var(--hq-red)} .timeline-dot[data-tone="neutral"]{--hq-tone:var(--hq-violet-bright)} .timeline-dot[data-tone="dead"]{--hq-tone:var(--hq-dead);box-shadow:none} .timeline-text{font-size:11.5px;color:var(--hq-text-dim);overflow-wrap:anywhere;line-height:1.45} .timeline-time{font-size:10px;color:var(--hq-muted);white-space:nowrap;font-variant-numeric:tabular-nums} .drawer-actions{display:grid;gap:8px} .btn-row{display:flex;gap:8px} .btn-row>button{flex:1 1 0;min-width:0} .btn-ghost{ display:flex;align-items:center;justify-content:center; padding:10px 12px;font-size:11.5px;font-weight:600; background:var(--hq-surface-2);border:1px solid var(--hq-line);color:var(--hq-text-dim); border-radius:var(--hq-radius-sm); } .btn-ghost:hover{background:var(--hq-surface);border-color:color-mix(in srgb,var(--hq-violet) 50%,var(--hq-line));color:var(--hq-text)} .btn-ghost:disabled,.btn-ghost:disabled:hover{background:transparent;border-color:var(--hq-line-soft);border-style:dashed;color:var(--hq-dead);cursor:not-allowed} /* #drawer-stop is destructive and is the only red control in the drawer. */ #drawer-stop{color:var(--hq-red);border-color:color-mix(in srgb,var(--hq-red) 40%,transparent)} #drawer-stop:hover{background:color-mix(in srgb,var(--hq-red) 14%,var(--hq-surface));border-color:var(--hq-red);color:var(--hq-red)} /* Not an approval control — it navigates to the amber "Waiting on you" desk, so it carries the waiting hue rather than the brand violet. */ .btn-approve{ display:flex;align-items:center;justify-content:center; padding:11px 14px;font-size:12.5px;font-weight:700;border-radius:var(--hq-radius-sm); color:var(--hq-amber); background:color-mix(in srgb,var(--hq-amber) 13%,var(--hq-surface)); border:1px solid color-mix(in srgb,var(--hq-amber) 45%,transparent); } .btn-approve:hover{background:color-mix(in srgb,var(--hq-amber) 22%,var(--hq-surface));border-color:var(--hq-amber);color:var(--hq-amber);box-shadow:0 0 18px color-mix(in srgb,var(--hq-amber) 28%,transparent)} #drawer-error{font-size:11.5px;color:var(--hq-red);line-height:1.5;margin:0} #drawer-error:empty{display:none} .drawer-note{ margin:0;font-size:10.5px;line-height:1.6;color:var(--hq-muted); border-left:2px solid var(--hq-line);padding-left:9px; } #drawer-stats{gap:12px} .stat-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:baseline} .stat-label{font-size:11px;color:var(--hq-muted)} .stat-value{font-size:12px;font-weight:700;color:var(--hq-text);text-align:right;font-variant-numeric:tabular-nums} .stat-bar{grid-column:1/-1;height:5px;border-radius:999px;background:var(--hq-surface-2);overflow:hidden;display:block;margin-top:3px} .stat-fill{display:block;height:100%;width:calc(var(--pct,0) * 1%);border-radius:999px;background:var(--hq-grad-violet);box-shadow:var(--hq-glow-violet)} /* No source ⇒ a hatched dead track, never an empty track that could read as 0%. */ .stat-bar[data-unavailable="true"]{ background:repeating-linear-gradient(135deg,var(--hq-line-soft) 0 5px,transparent 5px 10px); box-shadow:inset 0 0 0 1px var(--hq-line-soft); } .stat-bar[data-unavailable="true"] .stat-fill{background:none;box-shadow:none} .stat-row:has(.stat-bar[data-unavailable="true"]) .stat-value, .stat-value[data-tone="dead"]{color:var(--hq-muted);font-weight:600} .drawer-source{ margin:0;font-size:10px;line-height:1.6;color:var(--hq-muted); border-top:1px solid var(--hq-line-soft);padding-top:11px;overflow-wrap:anywhere; } /* -- 6. Bottom live ticker ----------------------------------------------- */ .ticker{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:40; height:var(--hq-ticker-h);align-items:center;gap:16px; padding:0 22px; background:linear-gradient(180deg,var(--hq-ground-2) 0%,var(--hq-ground) 100%); border-top:1px solid var(--hq-line); box-shadow:0 -18px 44px rgba(0,0,0,.45); } body.office-mode .ticker{display:flex} .ticker-head{display:flex;align-items:center;gap:8px;flex:0 0 auto} /* Static grey by default. It only animates when Builder A sets data-tone="good" from a real live signal (see return notes). */ .ticker-dot{width:8px;height:8px;border-radius:50%;background:var(--hq-dead);flex:0 0 auto} .ticker-dot[data-tone="good"]{background:var(--hq-teal);box-shadow:var(--hq-glow-teal);animation:hq-pulse 2s ease-in-out infinite} .ticker-label{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--hq-text-dim);white-space:nowrap} .ticker-items{ list-style:none;margin:0;padding:0;flex:1 1 auto;min-width:0; display:flex;align-items:center;gap:10px;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;height:100%; } .ticker-items::-webkit-scrollbar{display:none} .ticker-item{ --hq-tone:var(--hq-muted); flex:0 0 auto;max-width:300px; display:flex;align-items:center;gap:9px; padding:8px 12px;border-radius:999px; background:var(--hq-surface);border:1px solid var(--hq-line-soft); } .ticker-icon{ flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center; color:var(--hq-tone);background:color-mix(in srgb,var(--hq-tone) 16%,transparent); } .ticker-icon svg{width:12px;height:12px} .ticker-item[data-tone="good"],.ticker-icon[data-tone="good"]{--hq-tone:var(--hq-teal)} .ticker-item[data-tone="warn"],.ticker-icon[data-tone="warn"]{--hq-tone:var(--hq-amber)} .ticker-item[data-tone="bad"],.ticker-icon[data-tone="bad"]{--hq-tone:var(--hq-red)} .ticker-item[data-tone="neutral"],.ticker-icon[data-tone="neutral"]{--hq-tone:var(--hq-cyan)} .ticker-item[data-tone="dead"],.ticker-icon[data-tone="dead"]{--hq-tone:var(--hq-dead)} .ticker-copy{display:grid;gap:1px;min-width:0} .ticker-title{font-size:11.5px;font-weight:650;color:var(--hq-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ticker-sub{font-size:10px;color:var(--hq-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ticker-time{font-size:10px;color:var(--hq-muted);white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums} /* No observations ⇒ say so plainly, don't draw an empty rail. */ .ticker-empty{ flex:1 1 auto;max-width:none;display:flex;justify-content:flex-start; background:transparent;color:var(--hq-muted);font-size:11px; border:1px dashed color-mix(in srgb,var(--hq-dead) 60%,var(--hq-line)); } .ticker-all{ flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;white-space:nowrap; height:34px;padding:0 13px;border-radius:999px;font-size:11px;font-weight:650; background:transparent;border:1px solid var(--hq-line);color:var(--hq-text-dim); } .ticker-all:hover{background:var(--hq-surface-2);border-color:color-mix(in srgb,var(--hq-violet) 55%,var(--hq-line));color:var(--hq-text)} .ticker-all svg{width:13px;height:13px} /* -- 7. Existing departments, re-toned ----------------------------------- The legacy .metric tones and .badge vocabulary stay wired; they just move onto the HQ palette so one office speaks one language. */ .metric.good .value{color:var(--hq-teal)} .metric.warn .value{color:var(--hq-amber)} .metric.bad .value{color:var(--hq-red)} .metric.dead .value{color:var(--hq-muted);font-weight:600;font-size:17px;line-height:2.2} .metric.dead .label{color:var(--hq-muted)} .metric .label{color:var(--hq-muted)} .metric .hint{color:var(--hq-muted)} .metric .value{font-variant-numeric:tabular-nums;letter-spacing:-.025em} .badge{background:var(--hq-surface-2);color:var(--hq-text-dim);border-radius:999px;padding:3px 8px;font-weight:650;letter-spacing:.03em} .badge.OK,.badge.ACTIVE,.badge.APPROVED,.badge.LIVE,.badge.DRAFT_VERIFIED,.badge.success{background:color-mix(in srgb,var(--hq-teal) 16%,var(--hq-surface));color:var(--hq-teal)} .badge.RED,.badge.EXPIRED,.badge.failed,.badge.error,.badge.crashed{background:color-mix(in srgb,var(--hq-red) 16%,var(--hq-surface));color:var(--hq-red)} .badge.HELD,.badge.ATTENTION,.badge.waiting,.badge.STALE{background:color-mix(in srgb,var(--hq-amber) 16%,var(--hq-surface));color:var(--hq-amber)} .badge.UNKNOWN{background:transparent;border:1px dashed var(--hq-line);color:var(--hq-muted)} .badge.running{background:color-mix(in srgb,var(--hq-cyan) 16%,var(--hq-surface));color:var(--hq-cyan)} .run-dot{background:var(--hq-muted)} .run-dot.success{background:var(--hq-teal);box-shadow:var(--hq-glow-teal)} .run-dot.error,.run-dot.crashed{background:var(--hq-red)} .run-dot.running{background:var(--hq-cyan);box-shadow:var(--hq-glow-cyan)} .run-row p,.run-row>small{color:var(--hq-muted)} .room-directory>button{border-bottom-color:var(--hq-line-soft);border-radius:var(--hq-radius-sm);transition:background .16s ease,box-shadow .16s ease} .room-directory>button:hover{background:var(--hq-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hq-violet) 30%,transparent)} .room-directory small{color:var(--hq-muted)} .office-toolbar{color:var(--hq-muted)} .office-toolbar button{background:var(--hq-surface);border-color:var(--hq-line-soft)} .office-toolbar>span{color:var(--hq-text-dim)} .operator-strip{border-top-color:var(--hq-line-soft)} .operator-strip button{ background:var(--hq-surface);border:1px solid var(--hq-line-soft);border-radius:var(--hq-radius); padding:13px;position:relative;overflow:hidden; } .operator-strip button::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--hq-violet)} .operator-strip button:nth-child(1)::before{background:var(--hq-magenta)} .operator-strip button:nth-child(2)::before{background:var(--hq-cyan)} .operator-strip button:nth-child(3)::before{background:var(--hq-violet)} .operator-strip button:hover{background:var(--hq-surface-2);border-color:color-mix(in srgb,var(--hq-violet) 45%,var(--hq-line))} .operator-strip button>span:not(.badge){color:var(--hq-muted)} .operator-output{border-top-color:var(--hq-line-soft)} #operator-error,#editor-error,#error{color:var(--hq-red)} #office-live.live-collecting{color:var(--hq-cyan)} #office-live.live-working{color:var(--hq-teal)} #office-live.live-idle{color:var(--hq-muted)} #office-live.live-idle::before{background:var(--hq-dead)} @keyframes hq-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}} /* -- 8. Responsive: holds at 1440, 430 and 390 --------------------------- */ /* Below this the tools no longer fit beside the greeting: stack all three bands and let the tool row wrap onto itself. */ @media(max-width:1080px){ .topbar,#topbar{grid-template-columns:minmax(0,1fr);grid-template-areas:"greet" "tools" "kpis";row-gap:12px} .topbar .topbar-tools{flex-wrap:wrap;justify-content:flex-start} .searchbox{flex:1 1 180px;max-width:340px} } @media(max-width:900px){ .kbd-hint{display:none} .topbar-clock{display:none} } @media(max-width:700px){ .topbar,#topbar{min-height:0;gap:12px;padding:12px 0} .topbar .kpi-rail,.topbar .topbar-tools,.topbar .topbar-greet{width:auto;max-width:100%} .topbar .topbar-tools{display:flex} #greeting{font-size:17px} .topbar .topbar-tools{gap:6px} .topbar button{font-size:11px} .searchbox{flex:1 1 100%;order:2;max-width:none} #waiting-shortcut,#refresh{height:32px;padding:0 10px;font-size:10.5px} .icon-btn{width:32px;height:32px} .topbar-avatar{display:none} /* The rail was a horizontally-scrolling flex row here, so the 3rd KPI ('Needs you') sat half off the right edge with no visual affordance that more existed off-screen — it read as clipped, not scrollable. A 2-column grid shows all four, wrapped, with nothing cut off. */ .topbar .kpi-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow-x:visible} .kpi{min-width:0;padding:9px 12px 9px} .kpi-value{font-size:20px} /* Sidebar is a horizontal strip at this width; the promo block, the disabled New Task button and the user chip are desktop chrome. */ .sidebar{border-right:0;border-bottom:1px solid var(--hq-line-soft);padding-bottom:11px;background:var(--hq-ground-2)} .sidebar-promo,.sidebar .sidebar-newtask,.sidebar-user{display:none} .drawer{width:min(var(--hq-drawer-w),calc(100vw - 28px))} .ticker{padding:0 12px;gap:10px} .ticker-label{display:none} .ticker-all{display:none} .ticker-item{max-width:230px;padding:7px 10px} /* office.css bleeds the world edge-to-edge here (negative margin), so the frame would sit on the screen edge. Drop it and keep the ground colour. */ #office-world{border:0;border-radius:0} } @media(max-width:430px){ .kpi{min-width:130px} .drawer-body{padding:14px 14px 26px} .drawer-head{padding:14px 12px 12px 16px} .drawer-avatar{width:46px;height:46px;border-radius:14px;font-size:18px} } /* -- 9. Motion escape hatch --------------------------------------------- Contract §7.10: every animation added here has an off switch. */ @media(prefers-reduced-motion:reduce){ .drawer{transition:none} .ticker-dot[data-tone="good"], .status-pill[data-state="WORKING"]::before, .status-pill[data-state="ON_CALL"]::before{animation:none} .kpi,button,.searchbox,.room-directory>button{transition:none} /* These beat the bare `button` selector on specificity, so the line above never reached them. */ .sidebar nav button,.sidebar nav a,.seg>button,.model-row,.file-chip,.metric .value{transition:none} } /* ============================================================================ DESIGN TOKENS — build contract §1, verbatim, last :root wins. ========================================================================== */ :root{ /* ground + surfaces */ --hq-ground:#0d0a14; /* page + scene clear colour */ --hq-ground-2:#12101e; /* wells, ticker bed */ --hq-surface:#171528; /* KPI pills, cards, drawer body */ --hq-surface-2:#1e1b32; /* raised: chips, stat tracks, hover */ --hq-line:#2e2a45; --hq-line-soft:#241f38; /* neon accents */ --hq-violet:#8b5cf6; /* primary brand / buttons / hub */ --hq-violet-bright:#a78bfa; /* text on violet grounds, focus */ --hq-violet-deep:#6d28d9; /* gradient stop */ --hq-magenta:#e152c8; /* marketing */ --hq-cyan:#3ad7f0; /* infrastructure / orbit hub */ --hq-teal:#2fd6a8; /* good / online / client fleet */ --hq-amber:#f2b544; /* waiting / stale / attention */ --hq-red:#ff6b7f; /* failure */ /* type */ --hq-text:#f2effc; --hq-text-dim:#c3bcd8; --hq-muted:#8e87a6; --hq-dead:#5f5977; /* unavailable / not connected */ /* effects */ --hq-glow-violet:0 0 22px rgba(139,92,246,.42); --hq-glow-cyan:0 0 22px rgba(58,215,240,.35); --hq-glow-teal:0 0 18px rgba(47,214,168,.35); --hq-grad-violet:linear-gradient(135deg,#6d28d9 0%,#8b5cf6 55%,#c084fc 100%); /* layout constants — all three builders assume these */ --hq-drawer-w:360px; --hq-ticker-h:74px; --hq-radius:14px; --hq-radius-sm:9px; } /* -- Layout regression fix (verified 2026-09-11) -------------------------- The new 201px topbar plus the fixed bottom ticker pushed the 3D canvas centre 93px below a 720p viewport: only ~26% of it was reachable, elementFromPoint at its centre returned null, and the camera-persistence test could not drag it. Two causes, two fixes. First, the .metrics strip now duplicates the topbar KPI rail in office mode — Committed MRR / Waiting on you / Content held appear in both — so it is redundant chrome costing ~90px above the fold. Second, the scene had a fixed height that ignored both the viewport and the ticker. */ body.office-mode .metrics{display:none} body.office-mode main{padding-bottom:calc(var(--hq-ticker-h) + 20px)} body.office-mode #office-world{height:clamp(280px,calc(100vh - 440px),680px)} @media(min-width:1500px){body.office-mode #office-world{height:clamp(360px,calc(100vh - 420px),760px)}} /* Give the headquarters the viewport, rather than three stacked header bands. */ body.office-mode .heading{padding:10px 0} body.office-mode .heading .eyebrow,body.office-mode #subtitle{display:none} body.office-mode h1{font-size:18px} body.office-mode #office-world{border:0;border-radius:0} #greeting,.kpi-value,#greeting-sub{letter-spacing:0} @media(min-width:1280px){ body.office-mode #topbar{grid-template-columns:160px minmax(0,1fr) 250px;grid-template-areas:"greet kpis tools";column-gap:12px;padding:10px 0} body.office-mode #greeting{font-size:16px} body.office-mode #greeting-sub{font-size:10px} body.office-mode .kpi{min-width:105px;padding:7px 9px;border-radius:6px;column-gap:6px} body.office-mode .kpi-value{font-size:20px} body.office-mode .kpi-label{font-size:10px} body.office-mode .topbar-clock,body.office-mode .topbar-avatar,body.office-mode #waiting-shortcut{display:none} body.office-mode #omnisearch{width:140px} body.office-mode .omnisearch{max-width:150px} body.office-mode #refresh{width:34px;height:34px;font-size:0;padding:7px;flex-shrink:0} body.office-mode #refresh span{display:none} body.office-mode #refresh svg{width:18px;height:18px} body.office-mode #office-world{height:clamp(320px,calc(100svh - 280px),1000px)} } /* The sidebar is a flex column; with ten nav items plus the promo, New Task button, user chip and footer it overflows on shorter viewports and flex compresses the bottom blocks — the promo card was clipping its own text and Sign out fell off the end. Let the column scroll and stop the fixed blocks from being squeezed. */ .sidebar{overflow-y:auto;overscroll-behavior:contain} .sidebar-promo,.sidebar .sidebar-newtask,.sidebar-user,.sidebar footer{flex:0 0 auto} .sidebar-promo p{overflow-wrap:anywhere} /* -- Agents department ---------------------------------------------------- The management surface for the Hermes operators — assign work, watch it run, read every draft. Built so the owner can act without opening a terminal. */ .agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:26px} .agent-card{ display:flex;flex-direction:column;gap:10px;padding:18px; border:1px solid var(--hq-line-soft);border-radius:var(--hq-radius); background:linear-gradient(180deg,color-mix(in srgb,#fff 4%,var(--hq-surface)) 0%,var(--hq-surface) 70%); } .agent-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .agent-card h3{font-size:16px;font-weight:700;letter-spacing:-.01em} .agent-role{font-size:11px;color:var(--hq-muted);margin-top:2px} .agent-latest{font-size:13px;line-height:1.5;overflow-wrap:anywhere} .agent-latest strong{font-weight:600} .agent-card .muted,.muted{color:var(--hq-muted)} .agent-card .btn-row{margin-top:auto;padding-top:4px} .agent-history{margin-top:2px;border-top:1px solid var(--hq-line-soft);padding-top:10px} .agent-history summary{font-size:11px;color:var(--hq-muted);cursor:pointer;list-style:none} .agent-history summary::-webkit-details-marker{display:none} .agent-history summary::before{content:'▸ ';color:var(--hq-violet)} .agent-history[open] summary::before{content:'▾ '} .run-line{ display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:10px;align-items:center; width:100%;text-align:left;background:none;border:0;padding:8px 0;cursor:pointer; border-bottom:1px solid var(--hq-line-soft);color:inherit; } .run-line:last-child{border-bottom:0} .run-line:hover{background:color-mix(in srgb,var(--hq-violet) 8%,transparent)} .run-line-title{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .run-line small{font-size:10px;color:var(--hq-muted);white-space:nowrap} #run-output{width:min(760px,94vw);max-height:88dvh} #run-output .operator-output{ max-height:58dvh;overflow:auto;white-space:pre-wrap;font-size:13px;line-height:1.65; padding:14px;border-radius:8px;background:var(--hq-ground-2);border:1px solid var(--hq-line-soft); } @media(max-width:700px){.agent-grid{grid-template-columns:1fr}} /* -- Agent chat --------------------------------------------------------- A private conversation with one operator. Each turn is a real run row on the 'chat' channel with its own Hermes session, so an overnight brief never replaces the context of your conversation. */ #agent-chat{width:min(680px,94vw);max-height:88dvh;display:flex;flex-direction:column;padding:0;overflow:hidden} #agent-chat[open]{display:flex} .chat-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--hq-line-soft);background:var(--hq-ground-2)} .chat-heading h2{font-size:17px;font-weight:700;letter-spacing:-.01em} .chat-heading p{font-size:11px;color:var(--hq-muted);margin-top:2px} .chat-heading button{background:none;border:0;color:var(--hq-muted);cursor:pointer;padding:6px;border-radius:8px} .chat-heading button:hover{background:color-mix(in srgb,var(--hq-violet) 12%,transparent);color:var(--hq-text)} #chat-history{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;padding:16px 20px;display:flex;flex-direction:column;gap:14px;min-height:180px;max-height:52dvh} .chat-turn{display:flex;flex-direction:column;gap:10px} .chat-message{max-width:88%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap} .chat-message strong{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;opacity:.75} .chat-message time{display:block;font-size:10px;color:var(--hq-muted);margin-top:6px} .chat-message.owner{align-self:flex-end;background:linear-gradient(180deg,color-mix(in srgb,var(--hq-violet) 34%,var(--hq-surface)),color-mix(in srgb,var(--hq-violet) 20%,var(--hq-surface)));border:1px solid color-mix(in srgb,var(--hq-violet) 45%,transparent)} .chat-message.agent{align-self:flex-start;background:var(--hq-surface);border:1px solid var(--hq-line-soft)} .chat-message.pending{align-self:flex-start;color:var(--hq-muted);font-style:italic;border:1px dashed var(--hq-line)} .chat-empty{color:var(--hq-muted);font-size:13px;text-align:center;padding:24px 0} #chat-form{padding:12px 20px 16px;border-top:1px solid var(--hq-line-soft);background:var(--hq-ground-2);display:grid;gap:8px} #chat-form label[for=chat-message]{font-size:11px;color:var(--hq-muted)} #chat-message{width:100%;resize:vertical;min-height:64px} #chat-form .task-consent{font-size:11px;color:var(--hq-muted);display:flex;gap:8px;align-items:center} .chat-footer{display:flex;align-items:center;justify-content:space-between;gap:12px} #chat-state{font-size:11px;color:var(--hq-muted)} #chat-send{width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:12px} #chat-send svg{width:16px;height:16px} #chat-error{color:var(--hq-warn,#f0b968);font-size:12px;min-height:1em} @media(max-width:700px){#agent-chat{width:100vw;max-height:100dvh;border-radius:0}#chat-history{max-height:none}} /* -- Model selection ---------------------------------------------------- One button per operator card shows exactly which model funds that operator; the picker is the only place that changes it. Provider colour: Claude amber, ChatGPT cyan, Kimi violet. */ .model-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--hq-violet-bright);box-shadow:0 0 10px color-mix(in srgb,var(--hq-violet-bright) 70%,transparent)} .model-dot[data-tone=amber]{background:var(--hq-amber);box-shadow:0 0 10px color-mix(in srgb,var(--hq-amber) 70%,transparent)} .model-dot[data-tone=cyan]{background:var(--hq-cyan);box-shadow:0 0 10px color-mix(in srgb,var(--hq-cyan) 70%,transparent)} .model-pick{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:var(--hq-radius-sm);border:1px solid var(--hq-line-soft);background:color-mix(in srgb,#fff 3%,var(--hq-surface));color:var(--hq-text);cursor:pointer;transition:border-color .16s ease,background .16s ease} .model-pick:hover{border-color:var(--hq-line);background:color-mix(in srgb,var(--hq-violet) 10%,var(--hq-surface))} .model-pick-label{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto} .model-pick-label strong{font-size:12.5px;font-weight:650;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .model-pick-effort{font-size:10.5px;color:var(--hq-muted);text-transform:capitalize} .model-pick-warn{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hq-amber);white-space:nowrap} .model-pick-chevron{color:var(--hq-muted);flex:0 0 auto} .link-btn{background:none;border:0;padding:0;color:var(--hq-violet-bright);cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:2px} .chat-model{display:inline-block;margin-left:8px;font-weight:600;letter-spacing:.02em;text-transform:none;opacity:.7} #model-picker{width:min(640px,94vw);max-height:90dvh;padding:0;overflow:auto;display:flex;flex-direction:column} #model-picker[open]{display:flex} .picker-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--hq-line-soft);background:var(--hq-ground-2);position:sticky;top:0;z-index:1} .picker-heading h2{font-size:17px;font-weight:700;letter-spacing:-.01em} .picker-heading p{font-size:11px;color:var(--hq-muted);margin-top:2px} .picker-heading button{background:none;border:0;color:var(--hq-muted);cursor:pointer;padding:6px;border-radius:8px} .picker-heading button:hover{background:color-mix(in srgb,var(--hq-violet) 12%,transparent);color:var(--hq-text)} .picker-block{padding:14px 20px 4px} .picker-block h3{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hq-muted);margin:0 0 8px} .seg{display:flex;gap:6px;flex-wrap:wrap} .seg>button{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--hq-line-soft);background:var(--hq-surface);color:var(--hq-text-dim);font-size:12.5px;font-weight:600;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease;text-transform:capitalize} .seg>button:hover{border-color:var(--hq-line);color:var(--hq-text)} .seg>button.on{background:color-mix(in srgb,var(--hq-violet) 26%,var(--hq-surface));border-color:color-mix(in srgb,var(--hq-violet) 60%,transparent);color:var(--hq-text);box-shadow:var(--hq-glow-violet)} .seg-sub{font-size:10px;font-weight:600;color:var(--hq-muted);text-transform:none;letter-spacing:.02em} .seg>button.on .seg-sub{color:var(--hq-text-dim)} .seg-effort>button{min-width:70px;justify-content:center} .model-list{display:grid;gap:6px} .model-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--hq-radius-sm);border:1px solid var(--hq-line-soft);background:var(--hq-surface);color:var(--hq-text);cursor:pointer;text-align:left;transition:background .14s ease,border-color .14s ease,color .14s ease} .model-row:hover{border-color:var(--hq-line);background:color-mix(in srgb,#fff 3%,var(--hq-surface))} .model-row.on{border-color:color-mix(in srgb,var(--hq-violet) 60%,transparent);background:color-mix(in srgb,var(--hq-violet) 16%,var(--hq-surface))} .model-row-name{font-size:13.5px;font-weight:650} .model-row-id{font-size:11px;color:var(--hq-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .model-row-state{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hq-muted)} .model-row-state.proven{color:var(--hq-teal)} .picker-warn{margin:8px 0 0;font-size:12px;color:var(--hq-amber)} .picker-hint{margin:10px 0 0;font-size:11.5px;color:var(--hq-muted);line-height:1.5} .picker-footer{padding:14px 20px 18px;border-top:1px solid var(--hq-line-soft);margin-top:10px;background:var(--hq-ground-2);position:sticky;bottom:0} .picker-footer .btn-row{justify-content:flex-end} .picker-footer .btn-row>button{flex:0 0 auto;min-width:120px} #picker-error{color:var(--hq-red);font-size:12px;min-height:1em;margin:0 0 8px} @media(max-width:700px){#model-picker{width:100vw;max-height:100dvh;border-radius:0}.model-row{grid-template-columns:1fr auto}.model-row-id{display:none}} /* -- Deliverables --------------------------------------------------------- Files an operator produced in a run. Chips open a viewer; media renders inline, text as-is. */ .deliverables{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px} .deliverables-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hq-muted);margin-right:4px} .file-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:6px 10px;border-radius:999px;border:1px solid var(--hq-line-soft);background:var(--hq-surface);color:var(--hq-text);font-size:12px;font-weight:600;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease} .file-chip:hover{border-color:var(--hq-line);background:color-mix(in srgb,var(--hq-violet) 12%,var(--hq-surface))} .file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px} .file-kind{width:8px;height:8px;border-radius:2px;background:var(--hq-muted);flex:0 0 auto} .file-kind[data-kind=image]{background:var(--hq-teal)}.file-kind[data-kind=video]{background:var(--hq-magenta)}.file-kind[data-kind=text]{background:var(--hq-violet-bright)}.file-kind[data-kind=pdf]{background:var(--hq-amber)} .file-flag{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hq-amber)} .chat-message .deliverables{margin-top:8px} #file-viewer{width:min(960px,96vw);max-height:92dvh;padding:0;display:flex;flex-direction:column;overflow:hidden} #file-viewer[open]{display:flex} #file-viewer .picker-heading .btn-row{gap:8px;align-items:center} #file-viewer .picker-heading .btn-row>a{flex:0 0 auto;padding:6px 12px;font-size:12px;text-decoration:none} .file-body{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;padding:16px 20px 20px;background:var(--hq-ground)} .file-body img,.file-body video{max-width:100%;max-height:74dvh;display:block;margin:0 auto;border-radius:var(--hq-radius-sm)} .file-body audio{width:100%} .file-body iframe{width:100%;height:76dvh;border:0;border-radius:var(--hq-radius-sm);background:#fff} .file-text{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--hq-text);margin:0} @media(max-width:700px){#file-viewer{width:100vw;max-height:100dvh;border-radius:0}.file-name{max-width:160px}} /* -- Activity feed -------------------------------------------------------- One reverse-chronological stream of the whole team's work. Everything here is observed: a tool chip means that call completed, a file chip means that file exists on disk. */ .activity-filter{margin:0 0 16px} .feed{list-style:none;margin:0;padding:0;display:grid;gap:10px} .feed-row{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px 16px;border-radius:var(--hq-radius); border:1px solid var(--hq-line-soft);background:linear-gradient(180deg,color-mix(in srgb,#fff 3%,var(--hq-surface)) 0%,var(--hq-surface) 70%); border-left:3px solid var(--hq-line)} .feed-row[data-tone=good]{border-left-color:var(--hq-teal)} .feed-row[data-tone=running]{border-left-color:var(--hq-cyan)} .feed-row[data-tone=warn]{border-left-color:var(--hq-amber)} .feed-row[data-tone=bad]{border-left-color:var(--hq-red)} .feed-row[data-tone=waiting]{border-left-color:var(--hq-muted)} .feed-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto; font-size:14px;font-weight:700;color:var(--hq-text);background:var(--hq-grad-violet);box-shadow:var(--hq-glow-violet)} .feed-body{min-width:0} .feed-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .feed-head strong{font-size:13.5px;font-weight:700} .feed-head time{margin-left:auto;font-size:11px;color:var(--hq-muted);white-space:nowrap} .feed-tag{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hq-cyan); border:1px solid color-mix(in srgb,var(--hq-cyan) 45%,transparent);border-radius:999px;padding:1px 7px} .feed-title{font-size:13.5px;line-height:1.5;margin:6px 0 0;overflow-wrap:anywhere} .feed-meta{font-size:11px;color:var(--hq-muted);margin:3px 0 0} .tool-trail{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px} .tool-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--hq-text-dim); background:var(--hq-surface-2);border:1px solid var(--hq-line-soft);border-radius:6px;padding:2px 7px} .tool-chip>em{font-style:normal;color:var(--hq-muted)} .feed-open{margin-top:10px;font-size:12px;padding:6px 12px} @media(max-width:700px){.feed-row{grid-template-columns:1fr}.feed-avatar{display:none}.feed-head time{margin-left:0}} .tool-chip>.tool-arg{color:var(--hq-text);opacity:.85;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tool-chip>.tool-arg::before{content:'·';margin:0 5px;color:var(--hq-muted);opacity:.7} .tool-chip.more{color:var(--hq-muted);font-family:inherit;font-weight:600} @media(max-width:700px){.tool-chip>.tool-arg{max-width:150px}} /* ── Four pages: the tab bar inside Team and Business, and the Review list ────────────────── */ .subnav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px} .subnav button{font-size:12px;padding:7px 12px;border-radius:999px;background:#1c1f24;border:1px solid #30343b;color:#a3acb7} .subnav button:hover{background:#25242e;color:#eef1f4} .subnav button.on{background:#302642;color:#ded0ff;border-color:#7c3aed} .review-list{border-top:1px solid var(--line)} .review-card{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)} .review-kind{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#a3acb7} .review-main h3{font-size:14px;margin:0 0 4px;font-weight:600} .review-main p{font-size:12px;color:var(--muted);margin:0} .review-main code{display:block;margin-top:6px;font-size:11px;color:#c6c6d8} .review-held{margin-top:26px}.review-held summary{cursor:pointer;color:var(--muted);font-size:13px;padding:8px 0} .office-summary .review-card{grid-template-columns:100px minmax(0,1fr) auto;padding:12px 0} @media(max-width:700px){.review-card,.office-summary .review-card{grid-template-columns:1fr;gap:8px}.review-act{justify-self:start}} /* ── Saying what you think about a draft ──────────────────────────────────────────────────── */ .review-say label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px} .review-say textarea{width:100%;margin:0 0 10px} .ref-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ref-add{display:inline-block;cursor:pointer;font-size:12px;padding:7px 12px;border:1px solid #424853;border-radius:6px;background:#22262c;color:var(--ink);margin:0} .ref-add:hover{background:#31303b;border-color:#9583ba} .ref-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .ref-chip{position:relative;width:74px} .ref-chip img{width:74px;height:74px;object-fit:cover;border-radius:6px;border:1px solid #424853;display:block} .ref-chip .ref-doc{width:74px;height:74px;border-radius:6px;border:1px solid #424853;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);background:#22262c} .ref-chip small{display:block;font-size:9px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ref-chip button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;padding:0;line-height:1;border-radius:50%;font-size:12px} .ref-chip[data-on=true] img,.ref-chip[data-on=true] .ref-doc{border-color:#a78bfa;box-shadow:0 0 0 2px #7c3aed} /* ── Office page layout: 'Needs you' near the top, a right rail on desktop ─────────────────── OFFICE-AUDIT-2026-09-25.md #37. Two DOM children only — .office-col-main and .office-rail — so the visual order can flip per breakpoint with a single `order`, instead of juggling six separately-placed pieces. Mobile-first: stacked, rail first (Needs you sits right under the greeting instead of ~2,500px down). Desktop: a real two-column layout, scene ~2/3 wide. */ .office-layout{display:flex;flex-direction:column;gap:22px} .office-rail{order:-1;display:flex;flex-direction:column;gap:16px;min-width:0} /* The Titus/Maya/Nova/Atlas strip's 4-column grid was sized for the old full-width placement. The rail is 280-360px wide, where 4 columns clip a status pill like 'FAILED'; 2 columns fit comfortably at every rail width down to the 700px breakpoint where it already drops to 2. */ .office-rail .team-primary{grid-template-columns:repeat(2,minmax(0,1fr))} .office-col-main{display:flex;flex-direction:column;gap:0;min-width:0} .office-col-main>.office-panel{margin-top:22px} .office-panel h2{font-size:16px;margin-bottom:14px} .office-panel .review-card{grid-template-columns:100px minmax(0,1fr) auto;padding:12px 0} @media(max-width:700px){.office-panel .review-card{grid-template-columns:1fr;gap:8px}.office-panel .review-act{justify-self:start}} @media(min-width:1280px){ .office-layout{flex-direction:row;align-items:flex-start;gap:26px} .office-rail{order:0;flex:1 1 300px;min-width:280px;max-width:360px;position:sticky;top:16px} .office-col-main{flex:2 1 0} body.office-mode #office-world{max-height:62vh} } /* Mobile: the canvas no longer needs to carry the whole page — Needs you and the operator strip already surfaced above it — so it is capped rather than eating most of the viewport. */ @media(max-width:700px){body.office-mode #office-world{height:min(360px,52vh)}} /* Vignette: a flat 3D canvas with nothing behind it reads as a diagram, not a place. A soft radial darkening at the margins is depth without touching the renderer (no extra draw calls). */ #office-world{position:relative;overflow:hidden} #office-world::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2; background:radial-gradient(ellipse at 50% 55%,transparent 58%,rgba(3,4,10,.4) 100%); border-radius:inherit} /* Room directory: 8 rooms, so repeat(4) at a width wide enough to hold 2 rows of 4 with no empty cell. Measured against the actual rendered width, not the viewport: once the two-column office layout is active (>=1280px) the main column is only ~66% of the viewport, so this activates a little above that rather than at the 1100px a full-bleed layout would use. At 1440px wide (this project's required test width) the main column measures ~750-940px, comfortably 4-up. */ @media(min-width:1300px){.room-directory,.office-mode .room-directory{grid-template-columns:repeat(4,minmax(0,1fr))}} /* ── Topbar: office-mode's single-row layout at >=1280px gave the greeting a fixed 160px column, which clipped 'Good afternoon, Tyler' against the KPI rail. Below 1600px, give the KPI rail its own full-width row (the same two-row shape the non-office pages already use); only at 1600px and up is there room for one tight row. */ @media(min-width:1280px) and (max-width:1599px){ body.office-mode #topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"greet tools" "kpis kpis";column-gap:16px;row-gap:8px;padding:10px 0} body.office-mode .topbar-greet{min-width:0} body.office-mode #greeting{font-size:16px} body.office-mode .kpi{min-width:120px} } @media(min-width:1600px){ body.office-mode #topbar{grid-template-columns:160px minmax(0,1fr) 250px} } /* #refresh's icon+label used to sit in a plain inline-block button, which is why the icon-only 1280px+ variant (width/height:34px, font-size:0) never actually centered the glyph inside it. */ #refresh{display:inline-flex;align-items:center;justify-content:center;gap:6px} #refresh svg{flex:0 0 auto} /* ── Reels in the review editor (#36): the CSP (style-src 'self') drops every inline style= that used to size the