/* Dark edition of the editorial control room. The unmodified light tokens in
   studio.css remain the default; only an explicit saved choice enters here. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f0eee6;
  --ink-2: #bbb9b0;
  --paper: #151714;
  --paper-2: #1e211d;
  --rule: #3b4039;
  --irule: rgba(247,245,241,.18);
  --signal-text: #65df9d;
  --signal-tint: #173625;
  --sent-c: #6bccf6;
  --held-c: #f0bd59;
  --failed-c: #ff8793;
  --amber-tint: #392d19;
  --err-tint: #3c2228;
  --info-tint: #1c3140;
  --ink-panel: #242821;
  --on-ink-2: #c5c2ba;
  --on-ink-3: #a5a39b;
  --track: #292d27;
  --nav-bg: #181b17;

  --card: #151714;
  --card2: #1e211d;
  --mut: #bbb9b0;
  --faint: #a5a39b;
  --line: #3b4039;
  --line2: #666c61;
  --signal-deep: #65df9d;
  --signal-soft: #244b33;
  --signal-faint: #173625;
  --grove-deep: #65df9d;
  --grove-soft: #244b33;
  --grove-faint: #173625;
  --warn: #f0bd59;
  --warn-soft: #392d19;
  --info: #80cbfa;
  --info-soft: #1c3140;
  --hot: #ff8793;
  --bg-soft: #1e211d;
  --gacc-soft: #173625;
}

/* The app rail and mobile chrome stay ink in both themes. The shared --ink
   token now means foreground on the page, so these inverse regions are pinned. */
html[data-theme="dark"] .sb,
html[data-theme="dark"] .m-top,
html[data-theme="dark"] .m-panel { background: #0a0a0a; color: #c5c2ba; }
html[data-theme="dark"] .sb .brand,
html[data-theme="dark"] .m-top .brand,
html[data-theme="dark"] .sb-projhead b,
html[data-theme="dark"] .userrow b,
html[data-theme="dark"] .sb .nav-item.on,
html[data-theme="dark"] .m-panel .nav-item.on { color: #f7f5f1; }
html[data-theme="dark"] .sb .nav-item:hover,
html[data-theme="dark"] .m-panel .nav-item:hover { color: #f7f5f1; }
html[data-theme="dark"] .sb .brandmark,
html[data-theme="dark"] .m-top .brandmark,
html[data-theme="dark"] .ws-brand .brandmark,
html[data-theme="dark"] .login-brand .brandmark { background: #0a0a0a; }
html[data-theme="dark"] .sb-ws select,
html[data-theme="dark"] .sb-ws .wsname,
html[data-theme="dark"] .userrow .av { color: #c5c2ba; }
html[data-theme="dark"] .topbar .crumbs .sep { color: #8f9389; }
html[data-theme="dark"] .btn-sig:hover,
html[data-theme="dark"] .btn-ink:hover { background: #d8d5ca; color: #151714; }
html[data-theme="dark"] .login-ink { background: #0a0a0a; color: #f7f5f1; }
html[data-theme="dark"] .login-ink .login-wordmark { color: #f7f5f1; }
html[data-theme="dark"] .login-ink .login-card { color: var(--ink); }
html[data-theme="dark"] .login-ink .login-note a:hover { color: #f7f5f1; }
html[data-theme="dark"] .login-theme-toggle:hover { color: #f7f5f1; }
html[data-theme="dark"] .m-top .menu { color: #f7f5f1; }
html[data-theme="dark"] .composer-actions { background: rgba(21,23,20,.97); box-shadow: none; }
html[data-theme="dark"] .account-danger>.account-section-head h2,
html[data-theme="dark"] .account-delete-trigger,
html[data-theme="dark"] .account-delete-trigger:hover,
html[data-theme="dark"] .account-delete-disclosure[open]>.account-delete-trigger,
html[data-theme="dark"] .account-delete-form small { color: var(--failed-c); }
html[data-theme="dark"] .account-delete-button { color: #fff; }
html[data-theme="dark"] .composer-section-head p,
html[data-theme="dark"] .composer-ai-title span,
html[data-theme="dark"] .composer-help,
html[data-theme="dark"] .composer-language-context p { color: var(--ink-2); }
html[data-theme="dark"] .ea-submit,
html[data-theme="dark"] .ea-fallback,
html[data-theme="dark"] .ea-submit:hover,
html[data-theme="dark"] .ea-fallback:hover { color: #0a0a0a; }
html[data-theme="dark"]:has(body.login-ink) { background: #0a0a0a; }
html[data-theme="dark"] ::selection { background: #245238; color: #f7f5f1; }
html[data-theme="dark"] :focus-visible { outline-color: #d8f6e3; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { color-scheme: dark; caret-color: var(--ink); }
html[data-theme="dark"] .ws-popover { border-color: var(--line2); }
html[data-theme="dark"] .ws-avatar { background: #f0eee6; color: #151714; }

.theme-toggle { width: 100%; text-align: left; }
.theme-toggle[aria-pressed="true"]::after { content: "On"; margin-left: auto; color: var(--signal-text); font: 600 10px/1 var(--mono); }
.sb-account-menu .theme-toggle { display: flex; align-items: center; }
.m-panel .theme-toggle { display: flex; align-items: center; border: 0; background: transparent; }
.login-theme-toggle { width: auto; margin-top: 14px; color: var(--on-ink-2); font: 500 11px/1.4 var(--mono); }
.login-theme-toggle:hover { color: var(--paper); }
.login-theme-toggle[aria-pressed="true"]::after { margin-left: 8px; }
.invite-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.invite-card { width: min(100%, 450px); padding: 25px; }
.invite-card h1 { margin: 24px 0 9px; font-size: 25px; }
.invite-card .sub { line-height: 1.55; }
.invite-card .btn { margin-top: 20px; }
.invite-card form { margin: 0; }
.invite-card .login-brand { justify-content: flex-start; }
.ws-member-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-member-grid { grid-template-columns: minmax(180px,1.35fr) minmax(160px,1fr) 86px minmax(150px,1fr) 124px 160px; }
@media (max-width: 980px) and (min-width: 681px) {
  .ws-member-grid { grid-template-columns: minmax(180px,1fr) minmax(150px,1fr) 84px minmax(145px,1fr) 160px; }
}
@media (max-width: 680px) { .ws-member-grid { grid-template-columns: 1fr; } }