/* Shared CompanyOS shell. A light page is the default in every browser. */
:root:root,:root:root[data-os-theme="light"]{color-scheme:light;--bg:#FAFBFC;--card:#FFFFFF;--ink:#202C39;--muted:#586574;--line:#E0E5EB;--field-line:#A6B0BD;--chip:#F0F3F6;--info-bg:#F0F3F6;--side:#FFFFFF;--side-ink:#202C39;--side-muted:#586574;--side-line:#E0E5EB;--side-hover:#F0F3F6;--nav-on-bg:#F0F3F6;--nav-on-ink:#202C39;--logo-chip:transparent;--shadow:0 2px 8px rgba(20,30,45,.04);--font-body:'Segoe UI Variable','Segoe UI',system-ui,sans-serif;--font-display:var(--font-body)}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55}
.top{background:#FFF;color:var(--ink);border-bottom:1px solid var(--line);box-shadow:none}
.top .bar{max-width:1160px;margin:auto;min-height:76px}.top .brand{color:var(--ink);gap:14px}
.top .brand img{max-height:36px;width:auto;object-fit:contain}.top .tabs{max-width:1160px;margin:auto;gap:4px}
.tabs a{color:var(--muted);border:0;border-radius:999px;padding:7px 14px;margin:6px 0 10px}
.tabs a:hover{color:var(--ink);background:var(--chip)}
.tabs a[aria-current=page]{color:var(--ink);background:var(--chip)}
main{max-width:1100px;margin:auto;padding:40px 24px 100px}h1{font-size:34px;letter-spacing:-.025em;font-weight:650}h2{font-size:21px;font-weight:650}h3{font-size:18px}
.card,.section{border-radius:12px;box-shadow:none}.grid{gap:16px}.card{padding:24px;background:#FFF;border:1px solid var(--line)}
button,.btn{border-radius:999px;font:600 14px var(--font-body);min-height:38px}button.primary,.btn.primary{background:var(--button,var(--accent));color:var(--on-button,var(--on-accent));border-color:transparent}
.eyebrow{letter-spacing:.08em;font-size:12px;font-weight:650;color:var(--muted)}.status{color:var(--muted)}
.hq-heading{margin-bottom:24px}.section{margin-bottom:28px}.section>h2{margin:0 0 12px}
dialog{background:#FFF;color:var(--ink);border:1px solid var(--line);box-shadow:0 16px 70px rgba(20,30,45,.16);border-radius:14px}dialog::backdrop{background:rgba(30,40,55,.25)}
input,textarea,select{background:#FFF;color:var(--ink);border:1px solid var(--field-line);border-radius:6px}
@media(max-width:600px){main{padding:26px 18px 90px}.top .bar{padding:12px 18px}.top .tabs{padding:0 12px;gap:2px}.top .brand img{max-width:110px}h1{font-size:29px}.card{padding:20px}.hq-heading{align-items:start;gap:14px;flex-wrap:wrap}}

.hq-embedded .top>.bar{display:none}.hq-embedded .tabs a[href="/hq"],.hq-embedded .topbar a[href="/hq"]{display:none}

/* CompanyOS embedded app. Keep this block equal in each app copy. */
html.hq-embedded{color-scheme:light;--bg:#f8fafc;--card:#fff;--ink:#202c39;--ink2:#475569;--muted:#586574;--line:#e0e5eb;--line2:#e0e5eb;--side:#fff;--chip:#f0f3f6;--font-display:var(--font-body,system-ui)}
.hq-embedded body{background:var(--bg);color:var(--ink)}
.hq-embedded .top>.bar,.hq-embedded .side>.brand,.hq-embedded .side>.foot,.hq-embedded .sidebar>.brand,.hq-embedded .sidebar-footer{display:none}
.hq-embedded .tabs a[href="/hq"],.hq-embedded .topbar a[href="/hq"]{display:none}
.hq-embedded .top .tabs{max-width:none;min-height:44px;gap:8px;padding:0 20px}
.hq-embedded .top .tabs a{padding:12px 8px;font-size:13px}
.hq-embedded body>main:not(.shell){max-width:none;padding:20px 24px 32px}
.hq-embedded .shell>main{max-width:none;padding:20px 24px 32px}
.hq-embedded .side{padding-top:12px;background:#fff}
.hq-embedded h1{font-size:26px;line-height:1.25;margin-top:0}
.hq-embedded .page-head,.hq-embedded .pagehead{margin-bottom:16px}
.hq-embedded #app>header.top{display:none}
.hq-embedded #app>nav.tabs{max-width:none;margin:0;padding:8px 20px;gap:4px;align-items:center;background:#fff;border-bottom:1px solid var(--line)}
.hq-embedded #app>nav.tabs #add{margin-left:auto;min-height:36px;padding:6px 12px;font-size:13px}
.hq-embedded #app>.wrap{max-width:none;padding:16px 24px 32px}
.hq-embedded #app>.wrap>.subnav{margin-bottom:12px;gap:6px}
.hq-embedded body[data-hq-chat]>header.top{display:none}
.hq-embedded main.shell#app{height:100dvh}
.hq-embedded .shell .side #open-settings{font-size:12px;margin-bottom:12px}
.hq-embedded .setup{margin:24px auto}
@media(max-width:600px){.hq-embedded body>main:not(.shell),.hq-embedded .shell>main,.hq-embedded #app>.wrap{padding:16px 12px 24px}.hq-embedded #app>nav.tabs{padding:6px 8px}.hq-embedded #app>nav.tabs .tab{font-size:12px;padding:8px}.hq-embedded .top .tabs{padding:0 8px;gap:0}.hq-embedded .conversation{height:68dvh}}