/* Shared theme tokens cover Content, Ads, account health, Automations and their drawers. */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#111722;--rail:#151d2a;--panel:#1a2332;--panel-2:#1e293a;--hover:#263347;--sel:#304059;
  --ink:#edf2f9;--ink-2:#cbd5e3;--muted:#a4b1c4;--line:#334156;--line-2:#46566e;--line-3:#657892;
  --navy:#cbd7e9;--navy-2:#e5edf9;
  --red:#f5696c;--red-ink:#ff9c9f;--red-wash:#38252e;
  --ok:#82d7aa;--ok-wash:#1d352e;--warn:#e9bf79;--warn-wash:#312b21;--warn-line:#635036;
  --info:#9bc2ff;--info-wash:#1c304d;--plum:#cfb1e8;--focus:#a6caff;
}
/* The legacy light styles have a few literal surfaces and white-on-navy controls. */
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .wk-pick select,
:root[data-theme="dark"] .acct-menu,
:root[data-theme="dark"] .searchbox,
:root[data-theme="dark"] .conflict pre{background-color:var(--panel)}
:root[data-theme="dark"] .field input[readonly]{background:var(--panel-2)}
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .wk-pick select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a4b1c4' stroke-width='1.6'/%3E%3C/svg%3E")}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{color:var(--muted);opacity:1}
:root[data-theme="dark"] input[type="checkbox"],
:root[data-theme="dark"] input[type="radio"]{accent-color:var(--info)}
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] .av,
:root[data-theme="dark"] .skip,
:root[data-theme="dark"] .ah-status-switch button[aria-pressed="true"],
:root[data-theme="dark"] .toast{color:#131e2d}
:root[data-theme="dark"] .toast.err{background:#53292d;color:#ffe2e3}
:root[data-theme="dark"] .badge{background:#b72732;color:#fff}
:root[data-theme="dark"] .warn-note,
:root[data-theme="dark"] .alert{color:var(--warn)}
:root[data-theme="dark"] .alert-more{text-decoration-color:var(--warn-line)}
:root[data-theme="dark"] .conflict{border-color:#78434d}
:root[data-theme="dark"] .pframe,
:root[data-theme="dark"] .dimg{background:var(--panel-2)}
:root[data-theme="dark"] .plat.p-claude{--pc:#e79b7e}
:root[data-theme="dark"] .plat.p-codex{--pc:#cbd7e9}
:root[data-theme="dark"] .plat.p-chatgpt{--pc:#82d7aa}
:root[data-theme="dark"] .drawer::backdrop{background:rgba(0,6,16,.65)}
:root[data-theme="dark"] .drawer{box-shadow:-24px 0 48px -24px rgba(0,0,0,.65)}
:root[data-theme="dark"] .acct-menu{box-shadow:0 12px 32px -12px rgba(0,0,0,.6)}
/* Keep the public-page preview true to the published site; only its loading state is themed. */
:root[data-theme="dark"] .pv-frame:not(.loaded){background:var(--panel)}
:root[data-theme="dark"] .ads-subnav a[aria-current="page"]{border-color:var(--ink)}

.theme-control{flex:none;margin-top:9px;padding:8px 0 0;border-top:1px solid var(--line)}
.theme-toggle{display:flex;align-items:center;gap:9px;width:100%;min-height:38px;padding:7px 8px;border:0;border-radius:var(--r-action);background:transparent;color:var(--ink-2);text-align:left;font-size:12.5px;font-weight:600}
@media (hover:hover) and (pointer:fine){.theme-toggle:hover{background:var(--hover);color:var(--ink)}}
.theme-toggle>.i{width:16px;height:16px;color:var(--muted)}
.theme-toggle>span:not(.theme-track){flex:1}
.theme-track{position:relative;display:block;flex:none;width:30px;height:18px;border:1px solid var(--line-3);border-radius:12px;background:var(--panel-2)}
.theme-track::after{position:absolute;content:"";top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:var(--muted);transition:transform .12s ease}
.theme-toggle[aria-checked="true"] .theme-track{background:var(--info);border-color:var(--info)}
.theme-toggle[aria-checked="true"] .theme-track::after{transform:translateX(12px);background:#132033}
@media(max-width:899px){
  /* The page scrolls inside the space above this reserved bottom bar. */
  body:has(.shell){overflow:hidden}
  .shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh;min-height:0;padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .shell>.top{position:relative;top:auto}
  .shell>#main{min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding-bottom:16px}
  .top>.theme-control{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:flex-start;height:calc(68px + env(safe-area-inset-bottom));margin:0;padding:11px 12px calc(12px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:0;background:var(--rail);box-shadow:none;z-index:21}
  .theme-toggle{width:auto;min-height:44px;gap:8px;padding:8px 11px}
  .theme-toggle>.theme-track{width:26px;height:16px}
  .theme-track::after{top:2px;left:2px}
  .theme-toggle[aria-checked="true"] .theme-track::after{transform:translateX(10px)}
  .toasts{bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.theme-track::after{transition:none}}
/* Let short screens scroll the header away instead of trapping the workspace. */
@media(max-width:899px) and (max-height:500px){
  body:has(.shell){overflow:auto}
  .shell{display:block;height:auto;min-height:100svh}
  .shell>#main{overflow:visible}
}