/* Virtualix.ai Rev 4.0, 01-brand/design-system.md */
@font-face{font-family:Archivo;src:url('/brand/archivo-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url('/brand/inter-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:light;--ink:#101319;--ink-soft:#454b57;--muted:var(--ink-soft);--bg:#f7f8f9;--bg-2:#eef0f3;--surface:#fff;--surface-2:#fafbfc;--accent:#df0628;--accent-text:#c10522;--metal:#97a0ae;--line:rgba(16,19,25,.12);--nav:#0b0c0f;--dark-raised:#191c23;--dark-line:rgba(244,245,247,.14);--on-dark:#f4f5f7;--on-dark-soft:#c4c8d0;--mono:ui-monospace,'Cascadia Code',Consolas,monospace;font-family:Inter,Arial,sans-serif;font-size:15px;font-variant-numeric:tabular-nums}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{outline-offset:4px}
button{cursor:pointer;color:inherit}
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
aside{background:var(--nav);color:var(--on-dark);padding:30px 19px;display:flex;flex-direction:column;gap:24px}
.brand{display:flex;align-items:center;gap:11px;color:white;text-decoration:none;font-size:21px;letter-spacing:-.8px}
.space,aside label{font-size:13px;color:var(--on-dark-soft)}
.space{border-top:1px solid var(--dark-line);padding-top:21px}
.space:empty{display:none}
aside select{display:block;width:100%;margin-top:8px;color:white;background:var(--dark-raised);border:1px solid var(--metal);border-radius:6px;padding:9px}
nav{display:grid;gap:5px}
nav button{text-align:left;background:transparent;border:0;border-radius:6px;color:var(--on-dark-soft);padding:10px 12px}
nav button[aria-current=page]{background:var(--dark-raised);color:var(--on-dark);font-weight:650}
.foot{margin-top:auto;display:grid;gap:9px;font-size:13px;color:var(--on-dark-soft)}
.foot a{color:inherit}
main{max-width:1540px;width:100%;margin:auto;padding:clamp(16px,3vw,46px);align-self:start;margin-top:0}
header,.dlghead,.row,.actions,#monthNav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#context{color:var(--muted);font-size:14px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2rem,4.2vw,3.3rem);letter-spacing:-.018em;line-height:1.04;margin:6px 0 14px}
h2{font-size:21px;letter-spacing:-.6px}
h3{font-size:16px}
#monthNav,.card,.calendar,.emptyState,.metric,dialog{background:white;border:1px solid var(--line);border-radius:10px}
#monthNav{padding:4px;gap:2px}
#monthNav button,.dlghead button{border:0;background:transparent;font-size:23px;padding:2px 8px}
#month{border:0;width:150px;background:white}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:14px 0 22px}
.metric{padding:18px}
.metric b{display:block;font-size:29px;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.metric span,.sub,#status{font-size:13px;color:var(--muted)}
#status:empty{display:none}
#status{margin:10px 0}
#status.error{background:var(--surface);color:var(--ink);padding:12px;border-radius:6px}
.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:hidden}
.weekday,.day{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px}
.weekday{font-size:12px;color:var(--muted);text-align:center;background:var(--bg-2)}
.day{min-height:95px}
.day.empty{background:var(--bg)}
.number{font-weight:600;display:block;font-size:13px}
.post{width:100%;text-align:left;border:1px solid var(--line);border-left:3px solid var(--metal);background:var(--surface-2);border-radius:6px;padding:7px;margin-top:6px;font-size:12px;overflow-wrap:anywhere}
.post b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post small{display:block;margin-top:5px;color:var(--muted)}
.post.pending_approval{background:var(--bg-2);border-color:var(--ink-soft)}
.card,.emptyState{padding:22px;margin:12px 0}
.card p:last-child{margin-bottom:0}
.btn{border:1px solid var(--line);border-radius:6px;background:white;padding:9px 15px;font-weight:600}
.primary{background:var(--accent);color:white;border-color:var(--accent)}
.btn:disabled{opacity:.55;cursor:wait}
.settings{max-width:720px}
.field{display:block;margin:14px 0}
.field input:not([type=checkbox]),textarea{display:block;width:100%;border:1px solid var(--metal);border-radius:6px;padding:10px;margin-top:5px}
.check{display:flex;align-items:center;gap:9px;margin:14px 0}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.state{background:var(--bg-2);border-radius:99px;padding:4px 10px;font-size:12px}
.dlghead{margin-bottom:18px}
.dlghead button{border-radius:50%;background:var(--bg-2)}
.media{display:block;width:auto;max-width:100%;max-height:42vh;border-radius:10px;margin:14px auto;background:var(--nav)}
dialog{color:var(--ink);padding:22px;width:min(550px,95vw);max-height:90vh;box-shadow:0 25px 100px rgba(16,19,25,.16)}
dialog::backdrop{background:rgba(16,19,25,.6)}
dialog h2{font-size:24px;margin:10px 0}
.caption{white-space:pre-line;line-height:1.55;overflow-wrap:anywhere}
.actions{justify-content:flex-start;margin-top:15px}
#story textarea{min-height:68px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{text-align:right;padding:9px 3px;border-bottom:1px solid var(--line);font-size:13px}
th:first-child,td:first-child{text-align:left}
.link{overflow-wrap:anywhere;color:var(--accent)}
.login{max-width:450px;margin:10vh auto}
[hidden]{display:none!important}
@media(max-width:830px){.shell{grid-template-columns:178px minmax(0,1fr)}
aside{padding:20px 13px}
.day{padding:5px}
.stats{gap:7px}
.metric{padding:12px}
}
@media(max-width:680px){.shell{display:block}
aside{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px}
.space{display:none}
.brand{font-size:19px}
nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px}
nav button{padding:7px 9px;font-size:13px}
.foot{grid-column:1/-1;display:flex;justify-content:space-between}
.calendar{display:block}
.weekday,.day.empty,.day:not(.hasPost){display:none}
.day.hasPost{display:grid;grid-template-columns:45px 1fr;gap:6px;min-height:0;padding:10px}
.number{align-self:center}
.post{margin:0}
.post b{font-size:14px}
.stats{grid-template-columns:repeat(2,1fr)}
.settings .btn{width:100%}
main{padding:18px 13px}
}


.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.clientTile,.reviewItem{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;text-align:left;gap:9px;flex-direction:column;align-items:flex-start;transition:box-shadow .15s,border-color .15s}
.clientTile:hover,.reviewItem:hover{border-color:var(--metal);box-shadow:0 4px 16px rgba(16,19,25,.12)}
.initials{display:grid;place-items:center;width:42px;height:42px;background:var(--bg-2);color:var(--ink);border-radius:6px;font:560 15px var(--mono);margin-bottom:8px}
.search{border-radius:6px;border:1px solid var(--line);background:var(--surface);padding:11px 14px;width:min(380px,100%);margin:9px 0 20px}
.reviewItem{width:100%;margin:8px 0}
@media(max-width:680px){.clients{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.clientTile{padding:14px}
.initials{margin-bottom:3px}
}


h1,h2,h3,.metric b{font-family:Archivo,Arial,sans-serif;font-weight:660;text-wrap:balance}
.brand{flex-wrap:wrap;gap:8px 12px;width:fit-content}
.brand img,.landingWordmark{width:120px;height:auto;display:block}
.brand span,.space,#context{font:500 .74rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase}
#context:not(:empty)::before{content:'+';margin-right:8px;color:var(--accent-text)}
.landingWordmark{margin-bottom:20px}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--accent-text)}
aside :focus-visible{outline-color:#ff5468}
::selection{background:var(--accent);color:white}
.changeRequest{border-left:3px solid var(--metal);background:var(--bg-2);padding:14px 16px;margin:12px 0}
.changeRequest p{margin:6px 0;overflow-wrap:anywhere}
.link{color:var(--accent-text)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
.languageSwitch{display:inline-flex;align-items:center;justify-self:start;align-self:start;width:max-content;padding:2px;gap:2px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2)}
.languageSwitch button{font:560 .82rem/1.3 Inter,Arial,sans-serif;padding:6px 9px;border:0;border-radius:4px;color:var(--ink-soft);background:transparent}
.languageSwitch button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px var(--line)}
aside .languageSwitch{background:var(--nav);border-color:var(--dark-line)}
aside .languageSwitch button{color:var(--on-dark-soft)}
aside .languageSwitch button[aria-pressed=true]{background:var(--dark-raised);color:var(--on-dark)}
.login>.languageSwitch{margin-bottom:12px}
.pilotBadge{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;padding:.65rem 1.1rem;background:var(--bg-2);font-size:.82rem;color:var(--ink)}
.pilotBadge a{color:var(--accent-text);text-underline-offset:.2em}