/* Follow the device preference, including changes while the page is open. */
:root { color-scheme:light dark; }
@media (prefers-color-scheme:dark) {
  :root {
    --bg:#181818; --surface:#212121; --text:#f3f3f3; --muted:#b4b4b4;
    --border:#414141; --hairline:#383838; --separator:#383838;
    --fill:#2c2c2c; --fill-border:#414141; --border-card:#383838;
    --avatar-fill:#333; --disclosure:#aaa; --accent:#f3f3f3; --accent-ink:#181818;
    --danger:#ff8583;
    --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23aaaaaa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --sheet-material:rgb(33 33 33 / 92%);
    --seat-free-bg:#17382b; --seat-free-ink:#8bdfb1;
    --tone-edge-767676:#777777;
    --tone-edge-8f8f8f:#777777;
    --tone-edge-b6b6bc:#383838;
    --tone-edge-bdbdbd:#383838;
    --tone-edge-cdcdcd:#383838;
    --tone-edge-d4d4d4:#383838;
    --tone-edge-d8d8dd:#383838;
    --tone-edge-d9d9d9:#383838;
    --tone-edge-dfdfdf:#383838;
    --tone-edge-e2e2e7:#383838;
    --tone-edge-e5e5e5:#383838;
    --tone-edge-e9e9e9:#383838;
    --tone-edge-eaeaea:#383838;
    --tone-edge-ededed:#383838;
    --tone-edge-f0f0f0:#383838;
    --tone-edge-f4f4f4:#383838;
    --tone-edge-f6f6f8:#383838;
    --tone-edge-ffffff:#383838;
    --tone-fill-afafaf:#555555;
    --tone-fill-cdcdcd:#383838;
    --tone-fill-d4d4d4:#383838;
    --tone-fill-dce2e6:#2c2c2c;
    --tone-fill-dfdfdf:#383838;
    --tone-fill-dfdfe4:#383838;
    --tone-fill-e2e2e8:#2c2c2c;
    --tone-fill-e4e4ea:#2c2c2c;
    --tone-fill-e5e5e5:#2c2c2c;
    --tone-fill-e7e7ec:#2c2c2c;
    --tone-fill-ededed:#2c2c2c;
    --tone-fill-eef1f9:#181818;
    --tone-fill-eef3f7:#181818;
    --tone-fill-eef9f4:#181818;
    --tone-fill-f0f0f0:#2c2c2c;
    --tone-fill-f0f0f3:#181818;
    --tone-fill-f0f6f4:#181818;
    --tone-fill-f2f2f7:#181818;
    --tone-fill-f3f3f3:#181818;
    --tone-fill-f5f5f5:#181818;
    --tone-fill-f9f9f9:#181818;
    --tone-fill-fafafa:#212121;
    --tone-fill-ffffff:#212121;
    --tone-ink-0d0d0d:#f3f3f3;
    --tone-ink-171717:#f3f3f3;
    --tone-ink-181818:#f3f3f3;
    --tone-ink-1c1c1e:#f3f3f3;
    --tone-ink-333333:#f3f3f3;
    --tone-ink-404040:#f3f3f3;
    --tone-ink-48484a:#f3f3f3;
    --tone-ink-525252:#f3f3f3;
    --tone-ink-5d5d5d:#b4b4b4;
    --tone-ink-737373:#b4b4b4;
    --tone-ink-767676:#b4b4b4;
    --tone-ink-777777:#b4b4b4;
    --tone-ink-85858b:#b4b4b4;
    --tone-ink-88878d:#b4b4b4;
    --tone-ink-8f8f8f:#b4b4b4;
    --tone-ink-a3a3a3:#888888;
    --tone-ink-aaaaaa:#888888;
    --tone-ink-b9b9b9:#888888;
    --tone-ink-bfbfc0:#888888;
    --tone-ink-c4c4cc:#888888;
  }
  body .card:not(.group-switcher):not(.journey-layout),
  body .journey-layout .journey-panel, body .journey-layout .journey-chat,
  body :is(.card,.sheet,.create-group-page,.account-profile,.admin-page) :is(input,select,textarea) {
    border-color:var(--border);
  }
  html body :is(.card,.sheet,.create-group-page,.account-profile,.admin-page) input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.edit-seat-stepper input),
  html body :is(.card,.sheet,.create-group-page,.account-profile,.admin-page) :is(select,textarea) { border-color:#555; background-color:#262626; }
  html body .card .chat-compose textarea { background:transparent; border:0; }
  /* The new-ride message panel sits outside the shared card/sheet form selectors. */
  html body .journey-create .create-message textarea { border-color:#767676; background-color:#262626; color:var(--text); }
  html body .journey-create .create-message textarea:focus { border-color:#b4b4b4; }
  html[data-input-mode=pointer] body .journey-create .create-message textarea:focus { border-color:#767676; }
  body .create-group-page .create-audience-list .audience-option input:checked { border-color:var(--text); }
  body .create-group-page .create-audience-list .audience-option input:checked::after { background:var(--text); }
  body .group-picker .group-picker-radio:checked { border-color:var(--text); background:radial-gradient(circle,var(--text) 0 5px,var(--surface) 5.5px); }
  body .admin-page { --accent:#f3f3f3; }
  body .card .chat-compose textarea:focus { caret-color:var(--text); }
  body .card .chat-compose:focus-within { border-color:#aaa; }
  body .admin-page .segment label:has(input:checked) span { background:var(--surface); }
  body .flash.success { background:#17382b; color:#8bdfb1; border-color:#315641; }
  body .flash.error { background:#3b2424; color:#ffaaa7; border-color:#593333; }
  body .flash.info { background:#172c40; color:#8ac5ff; border-color:#27435e; }
  body .admin-page .invite-tip { background:#172c40; color:#8ac5ff; border-color:#27435e; }
  body .about-logo-tile img { mix-blend-mode:normal !important; }
  body .sched-item .occasion-change-alert { background:#172c40; color:#8ac5ff; box-shadow:inset 0 0 0 1px #27435e; }
  body .sched-item .occasion-cancelled-alert { background:#3b2424; color:#ffaaa7; box-shadow:inset 0 0 0 1px #593333; }
  :is(.btn.primary,.admin-logo-upload,.chat-send) { --button-bg:#f3f3f3; --button-ink:#181818; }
  :is(.btn.danger,.admin-logo-remove,.avboka-korning) { --button-bg:#4b2929; --button-ink:#ffaaa7; }
  :is(.btn.danger-solid,.btn.confirm-ok) { --button-bg:#c12b28; --button-ink:#fff; }
  :is(.btn,.chat-send):disabled { --button-bg:#303030; --button-ink:#929292; }
  html body .back-fab, html body :is(.sheet-close,.reaction-sheet-close,.install-x) {
    background:#333 !important; color:#f3f3f3 !important;
  }
  body .switch input:checked + .track, body .account-profile .switch input:checked + .track,
  body .login-form .switch input:checked + .track, body .journey-create .own-child input.create-switch:checked { background:#f3f3f3; }
  body .switch input:checked + .track::after, body .journey-create .own-child input.create-switch:checked::after { background:#181818; }
  body .switch input:not(:checked):not(:disabled) + .track::after,
  body .journey-create .own-child input.create-switch:not(:checked):not(:disabled)::after { background:#b4b4b4; }
  @media (hover:hover) and (pointer:fine) and (min-width:768px) {
    :is(.btn.primary,.admin-logo-upload,.chat-send):hover:not(:disabled) { --button-bg:#d4d4d4; }
    :is(.btn.danger,.admin-logo-remove,.avboka-korning):hover:not(:disabled) { --button-bg:#623232; }
    :is(.btn.danger-solid,.btn.confirm-ok):hover:not(:disabled) { --button-bg:#a52422; }
    html body .back-fab:hover { background:#444 !important; }
  }
}