/* Dark mode (2026-11-06). Follows the system setting until someone picks Light or Dark in the sidebar. */
[data-theme=dark]{color-scheme:dark;--ink:#ededea;--gray:#a3a39e;--gray-light:#77776f;--paper:#121212;--off:#1a1a19;--line:#2c2c2a;--accent-text:#111;--pos:#4ade80;--neg:#f87171;--info:#60a5fa;--warn:#fbbf24}
[data-theme=dark] body{background:var(--paper)}
/* Solid ink surfaces carry dark text now that ink is light */
[data-theme=dark] .btn,[data-theme=dark] .count-badge,[data-theme=dark] .ico-fallback,[data-theme=dark] .toast,[data-theme=dark] .skip{color:#111}
[data-theme=dark] .btn:hover{color:var(--accent-text)}
[data-theme=dark] .btn.secondary,[data-theme=dark] .btn.secondary:hover,[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea,[data-theme=dark] .ops-setup code,[data-theme=dark] .empty-ico{background-color:#181818;color:var(--ink)}
[data-theme=dark] .toast-dot{box-shadow:0 0 0 1px rgba(0,0,0,.2)}
/* Lime and pastel fills keep dark text */
[data-theme=dark] .avatar,[data-theme=dark] .clear-chip,[data-theme=dark] .secret-steps li::before,[data-theme=dark] .nav a.active .count-badge,[data-theme=dark] .p-tabs button.on .tab-count,[data-theme=dark] .launch-row .open-link:hover,[data-theme=dark] .open-link:hover{color:#111}
[data-theme=dark] .clear-chip .check{background:#111}
/* Greys that were hard-coded for white */
[data-theme=dark] .nav a,[data-theme=dark] .attn li a{color:#c9c9c4}
[data-theme=dark] .nav a:hover{background:rgba(255,255,255,.05)}
[data-theme=dark] .nav a.active,[data-theme=dark] .nav-pill,[data-theme=dark] .seg-ctl button.on{background:#222220;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
[data-theme=dark] .about{color:#d6d6d1}
[data-theme=dark] .auth-foot{color:#8a8a84}
[data-theme=dark] .sep{background:#4a4a46}
[data-theme=dark] .search-btn:hover,[data-theme=dark] .launch-row:hover{border-color:#3d3d3a}
/* Tinted chips and notes */
[data-theme=dark] .attn-block,[data-theme=dark] .note.warn{background:#26230f}
[data-theme=dark] .sev-chip.p0,[data-theme=dark] .age-chip.stale,[data-theme=dark] .band.risk{background:rgba(248,113,113,.14)}
[data-theme=dark] .sev-chip.p1,[data-theme=dark] .age-chip.aging,[data-theme=dark] .band.watch{background:rgba(251,191,36,.14)}
[data-theme=dark] .sev-chip.p2,[data-theme=dark] .sev-chip.p3,[data-theme=dark] .age-chip{background:#262624}
[data-theme=dark] .band.healthy{background:rgba(74,222,128,.13)}
[data-theme=dark] .wait-row:hover{background:#1d1d1b}
[data-theme=dark] .wait-row.urgent{background:rgba(248,113,113,.1)}
[data-theme=dark] .ops-clear{background:rgba(231,250,72,.08)}
@keyframes flash-dark{0%,30%{background:rgba(231,250,72,.16)}100%{background:transparent}}
[data-theme=dark] .flash{animation-name:flash-dark}
/* Feature tile stays a dark card with a lime edge */
[data-theme=dark] .launch:first-of-type .launch-row:first-child{background-color:#1b1b19;border-color:rgba(231,250,72,.32);color:var(--ink)}
[data-theme=dark] .launch:first-of-type .launch-row:first-child .open-link{color:#111}
/* Logos and icons that were drawn black */
[data-theme=dark] .side .logo,[data-theme=dark] .topbar img,[data-theme=dark] .auth-logo{filter:none}
[data-theme=dark] .ico svg>rect:first-child[fill="#111111"],[data-theme=dark] .ico svg>rect:first-child[fill="#111"],[data-theme=dark] .lock-tile{stroke:rgba(255,255,255,.14);stroke-width:2}
[data-theme=dark] [style*="background:#111111"]{background:#ededea!important}
/* Shadows read as glow on dark, so soften them */
[data-theme=dark] .modal .card,[data-theme=dark] .palette{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
[data-theme=dark] .aurora{opacity:.4}
/* The sidebar theme switch */
.theme-btn{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:100px;background:transparent;color:var(--gray);font:inherit;font-size:13px;cursor:pointer;transition:color .15s,border-color .15s}
.theme-btn:hover{color:var(--ink);border-color:var(--ink)}
.theme-btn .orb{width:16px;height:16px;border-radius:50%;background:var(--ink);box-shadow:inset -5px -2px 0 0 var(--paper);transition:box-shadow .4s var(--ease-spring),transform .4s var(--ease-spring)}
[data-theme=dark] .theme-btn .orb{background:var(--accent);box-shadow:inset 0 0 0 0 var(--paper);transform:rotate(180deg)}
html.theme-fade,html.theme-fade *{transition:background-color .3s,color .3s,border-color .3s!important}
/* Vault: the shackle lifts open on unlock, and a wrong passphrase shakes the form */
.focus-icon svg{overflow:visible}
.focus-icon .shackle{transition:transform .45s var(--ease-spring)}
.focus-icon.unlocking .shackle{transform:translate(9px,-4px) rotate(18deg);transform-origin:29px 22px;transform-box:view-box}
.focus-icon.unlocking svg{animation:unlock-pop .62s var(--ease-spring)}
@keyframes unlock-pop{40%{transform:scale(1.12)}100%{transform:scale(1)}}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* Team: the person just invited slides in */
.team-row.just-added{animation:row-in .6s var(--ease-spring) both;box-shadow:inset 3px 0 0 var(--accent)}
@keyframes row-in{from{opacity:0;transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.focus-icon.unlocking .shackle,.shake,.team-row.just-added{animation:none;transition:none}}

/* Sidebar footer (2026-11-06): the theme pill sat jammed against the underlined Sign out link, off-center. Email on
   its own line, then the pill on the left and Sign out on the right, centered on one row, under a hairline. */
.side-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 10px 4px;border-top:1px solid var(--line)}
.side-foot .who{flex:1 0 100%}
.side-foot .theme-btn{order:1;margin:0}
.side-foot #side-signout{order:2;margin:0 0 0 auto !important;font-size:13px}