/* The colours of the web interface, for each theme. Generated from what the CSS used before it was themed (a colour is named for what it colours: --bg-, --fg-, --bd- and its hex), and the
   dark values are worked out from the light ones (backgrounds that are light become dark, text that is dark becomes light, accents stay). Write new colours as one of these, or add one here
   with both values: a hard-coded colour in a stylesheet stays the same in both themes. The surface colours that were already variables (--ink, --muted ...) are set by hand below. */

:root {
    color-scheme: light;
    --knob: #ffffff;
    --pie-free: #e8eef7;
    --pie-other: #9aa7b8;
    --bd-3979ee: #3979ee;
    --bd-4b7ed740: #4b7ed740;
    --bd-72a8ff: #72a8ff;
    --bd-76a6ff: #76a6ff;
    --bd-9fc0fb: #9fc0fb;
    --bd-b3bfcf: #b3bfcf;
    --bd-b8d0ff: #b8d0ff;
    --bd-bcd3fa: #bcd3fa;
    --bd-bdcbdc: #bdcbdc;
    --bd-c6dafa: #c6dafa;
    --bd-c9d6e8: #c9d6e8;
    --bd-cfe0fb: #cfe0fb;
    --bd-dbe4f0: #dbe4f0;
    --bd-dce4ee: #dce4ee;
    --bd-dce5f0: #dce5f0;
    --bd-dce6f3: #dce6f3;
    --bd-dfe7f1: #dfe7f1;
    --bd-e0605f: #e0605f;
    --bd-e3eaf3: #e3eaf3;
    --bd-e7edf4: #e7edf4;
    --bd-edf1f6: #edf1f6;
    --bd-edf1f7: #edf1f7;
    --bd-eef2f7: #eef2f7;
    --bd-efb4b3: #efb4b3;
    --bd-f0f3f7: #f0f3f7;
    --bd-f0f3f8: #f0f3f8;
    --bd-f1cf9b: #f1cf9b;
    --bd-ffffff25: #ffffff25;
    --bd-ffffff2e: #ffffff2e;
    --bd-ffffff35: #ffffff35;
    --bd-ffffff45: #ffffff45;
    --bd-ffffffad: #ffffffad;
    --bd-ffffffb0: #ffffffb0;
    --bd-ffffffc9: #ffffffc9;
    --bd-ffffffd0: #ffffffd0;
    --bd-ffffffd9: #ffffffd9;
    --bd-ffffffde: #ffffffde;
    --bg-0c203a33: #0c203a33;
    --bg-0c203a65: #0c203a65;
    --bg-10274432: #10274432;
    --bg-132d5555: #132d5555;
    --bg-17253b: #17253b;
    --bg-17263be8: #17263be8;
    --bg-1996c1: #1996c1;
    --bg-199d7c: #199d7c;
    --bg-284f82: #284f82;
    --bg-2f6cdb: #2f6cdb;
    --bg-3674e8: #3674e8;
    --bg-3979ee: #3979ee;
    --bg-3c82ee: #3c82ee;
    --bg-46dfae: #46dfae;
    --bg-4a83e933: #4a83e933;
    --bg-4a83e9aa: #4a83e9aa;
    --bg-4b7ed71c: #4b7ed71c;
    --bg-4b83ed: #4b83ed;
    --bg-4b86ef: #4b86ef;
    --bg-4c88ef: #4c88ef;
    --bg-4c9bff: #4c9bff;
    --bg-4d91ff: #4d91ff;
    --bg-537db4: #537db4;
    --bg-54d6e5: #54d6e5;
    --bg-54d9b0: #54d9b0;
    --bg-596d88: #596d88;
    --bg-6aa6ff: #6aa6ff;
    --bg-74d8f0: #74d8f0;
    --bg-7bc7e9a0: #7bc7e9a0;
    --bg-7d61d9: #7d61d9;
    --bg-8e72e9: #8e72e9;
    --bg-8fb9df: #8fb9df;
    --bg-9aaac0: #9aaac0;
    --bg-b19aff: #b19aff;
    --bg-c4d9f1: #c4d9f1;
    --bg-cbd4e1: #cbd4e1;
    --bg-d3f0e1: #d3f0e1;
    --bg-d5e3f7: #d5e3f7;
    --bg-dbe3ef: #dbe3ef;
    --bg-dbe9f8: #dbe9f8;
    --bg-dbe9ff: #dbe9ff;
    --bg-dce7f6: #dce7f6;
    --bg-dce9ff: #dce9ff;
    --bg-dde8f7: #dde8f7;
    --bg-e0f8ee: #e0f8ee;
    --bg-e1edff: #e1edff;
    --bg-e2f8ef: #e2f8ef;
    --bg-e3f6ec: #e3f6ec;
    --bg-e4eeff: #e4eeff;
    --bg-e5484d: #e5484d;
    --bg-e5ebf3: #e5ebf3;
    --bg-e5edff: #e5edff;
    --bg-e6edf6: #e6edf6;
    --bg-e6efff: #e6efff;
    --bg-e6f1ff: #e6f1ff;
    --bg-e7edf6: #e7edf6;
    --bg-e7efff: #e7efff;
    --bg-e88b36: #e88b36;
    --bg-e8eef7: #e8eef7;
    --bg-e8eff8: #e8eff8;
    --bg-e8f0ff: #e8f0ff;
    --bg-e9f1ff: #e9f1ff;
    --bg-eaf3ff: #eaf3ff;
    --bg-edf1f6: #edf1f6;
    --bg-edf3fc: #edf3fc;
    --bg-edf4ff: #edf4ff;
    --bg-eef3fa: #eef3fa;
    --bg-eef4ff: #eef4ff;
    --bg-eff6ffb8: #eff6ffb8;
    --bg-f1f4f8: #f1f4f8;
    --bg-f1f7ff: #f1f7ff;
    --bg-f4f8ff: #f4f8ff;
    --bg-f6f9ff: #f6f9ff;
    --bg-f7f9fc: #f7f9fc;
    --bg-f7faff: #f7faff;
    --bg-f7faffed: #f7faffed;
    --bg-f8faff: #f8faff;
    --bg-f8fbfff2: #f8fbfff2;
    --bg-f8fcff88: #f8fcff88;
    --bg-fde7e7: #fde7e7;
    --bg-fdeaea: #fdeaea;
    --bg-ffc66f: #ffc66f;
    --bg-ffe58a: #ffe58a;
    --bg-ffe9e8: #ffe9e8;
    --bg-ffebeb: #ffebeb;
    --bg-fff0dc: #fff0dc;
    --bg-fff1f0: #fff1f0;
    --bg-fff3da: #fff3da;
    --bg-fff6e6: #fff6e6;
    --bg-fff6f6: #fff6f6;
    --bg-fff8df: #fff8df;
    --bg-ffffff: #ffffff;
    --bg-ffffff10: #ffffff10;
    --bg-ffffff12: #ffffff12;
    --bg-ffffff24: #ffffff24;
    --bg-ffffff25: #ffffff25;
    --bg-ffffff8c: #ffffff8c;
    --bg-ffffff9c: #ffffff9c;
    --bg-ffffffdc: #ffffffdc;
    --fg-15946f: #15946f;
    --fg-15956f: #15956f;
    --fg-169e77: #169e77;
    --fg-17253b: #17253b;
    --fg-1b9a77: #1b9a77;
    --fg-1eae82: #1eae82;
    --fg-24344a: #24344a;
    --fg-243650: #243650;
    --fg-26364b: #26364b;
    --fg-2f66c7: #2f66c7;
    --fg-2f6fed: #2f6fed;
    --fg-35465e: #35465e;
    --fg-354f70: #354f70;
    --fg-355f9f: #355f9f;
    --fg-365c9d: #365c9d;
    --fg-3674e8: #3674e8;
    --fg-3979ee: #3979ee;
    --fg-3f78df: #3f78df;
    --fg-4079dc: #4079dc;
    --fg-41536c: #41536c;
    --fg-43320b: #43320b;
    --fg-467de3: #467de3;
    --fg-477fe2: #477fe2;
    --fg-4b7ed7: #4b7ed7;
    --fg-4f6280: #4f6280;
    --fg-53647b: #53647b;
    --fg-536782: #536782;
    --fg-60748f: #60748f;
    --fg-61738b: #61738b;
    --fg-6a7788: #6a7788;
    --fg-6d7f96: #6d7f96;
    --fg-6f8097: #6f8097;
    --fg-708199: #708199;
    --fg-75849a: #75849a;
    --fg-78889d: #78889d;
    --fg-7c8796: #7c8796;
    --fg-7c8ba0: #7c8ba0;
    --fg-7d8aa0: #7d8aa0;
    --fg-8191a7: #8191a7;
    --fg-8193ab: #8193ab;
    --fg-8292a7: #8292a7;
    --fg-8493a8: #8493a8;
    --fg-8997ab: #8997ab;
    --fg-8a5b12: #8a5b12;
    --fg-8a6d1a: #8a6d1a;
    --fg-8d9db2: #8d9db2;
    --fg-92a0b2: #92a0b2;
    --fg-94a1b1: #94a1b1;
    --fg-97a3b2: #97a3b2;
    --fg-98a6b8: #98a6b8;
    --fg-9aa7b8: #9aa7b8;
    --fg-a12a2a: #a12a2a;
    --fg-a19797: #a19797;
    --fg-a3afc0: #a3afc0;
    --fg-aab5c4: #aab5c4;
    --fg-b3a1a1: #b3a1a1;
    --fg-b97318: #b97318;
    --fg-c0392b: #c0392b;
    --fg-c23b3b: #c23b3b;
    --fg-d68a28: #d68a28;
    --fg-d8e4f6: #d8e4f6;
    --fg-d94d4d: #d94d4d;
    --fg-e0a21a: #e0a21a;
    --fg-f1f8ff: #f1f8ff;
    --fg-ffffff: #ffffff;
    --bg-12233d: #12233d;
    --bg-1e4c7d: #1e4c7d;
    --bg-eaf2ff: #eaf2ff;
    --bg-f3f5f8: #f3f5f8;
    --fg-c0d2e8: #c0d2e8;
    /* What an app's own icon colour is mixed with to make its gradient: the same in both themes, since the colour itself does not follow the theme (desktop.css .app-icon.custom). */
    --icon-mix-light: #ffffff;
    --icon-mix-dark: #000000;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --knob: #ffffff;
    --pie-free: #2a3441;
    --pie-other: #6b7a90;
    --ink: #e4ebf5;
    --muted: #92a2b8;
    --line: #2a3443;
    --panel: rgba(23, 29, 40, .96);
    --shadow: 0 22px 70px #00000080, 0 2px 8px #00000040;
    --bd-3979ee: #3979ee;
    --bd-4b7ed740: #4b7ed740;
    --bd-72a8ff: #72a8ff;
    --bd-76a6ff: #76a6ff;
    --bd-9fc0fb: #9fc0fb;
    --bd-b3bfcf: #4b545f;
    --bd-b8d0ff: #b8d0ff;
    --bd-bcd3fa: #32415c;
    --bd-bdcbdc: #434e5b;
    --bd-c6dafa: #303f58;
    --bd-c9d6e8: #3a4657;
    --bd-cfe0fb: #2e3d55;
    --bd-dbe4f0: #343f4e;
    --bd-dce4ee: #36404d;
    --bd-dce5f0: #343f4e;
    --bd-dce6f3: #303e50;
    --bd-dfe7f1: #333e4c;
    --bd-e0605f: #874948;
    --bd-e3eaf3: #323c4a;
    --bd-e7edf4: #313c48;
    --bd-edf1f6: #313944;
    --bd-edf1f7: #2f3845;
    --bd-eef2f7: #2f3944;
    --bd-efb4b3: #633635;
    --bd-f0f3f7: #313842;
    --bd-f0f3f8: #2f3643;
    --bd-f1cf9b: #6b583a;
    --bd-ffffff25: #2f323725;
    --bd-ffffff2e: #2f32372e;
    --bd-ffffff35: #2f323735;
    --bd-ffffff45: #2f323745;
    --bd-ffffffad: #2f3237ad;
    --bd-ffffffb0: #2f3237b0;
    --bd-ffffffc9: #2f3237c9;
    --bd-ffffffd0: #2f3237d0;
    --bd-ffffffd9: #2f3237d9;
    --bd-ffffffde: #2f3237de;
    --bg-0c203a33: #0c203a33;
    --bg-0c203a65: #0c203a65;
    --bg-10274432: #10274432;
    --bg-132d5555: #132d5555;
    --bg-17253b: #17253b;
    --bg-17263be8: #17263be8;
    --bg-1996c1: #1996c1;
    --bg-199d7c: #199d7c;
    --bg-284f82: #284f82;
    --bg-2f6cdb: #2f6cdb;
    --bg-3674e8: #3674e8;
    --bg-3979ee: #3979ee;
    --bg-3c82ee: #3c82ee;
    --bg-46dfae: #46dfae;
    --bg-4a83e933: #4a83e933;
    --bg-4a83e9aa: #4a83e9aa;
    --bg-4b7ed71c: #4b7ed71c;
    --bg-4b83ed: #4b83ed;
    --bg-4b86ef: #4b86ef;
    --bg-4c88ef: #4c88ef;
    --bg-4c9bff: #4c9bff;
    --bg-4d91ff: #4d91ff;
    --bg-537db4: #537db4;
    --bg-54d6e5: #54d6e5;
    --bg-54d9b0: #54d9b0;
    --bg-596d88: #596d88;
    --bg-6aa6ff: #6aa6ff;
    --bg-74d8f0: #74d8f0;
    --bg-7bc7e9a0: #7bc7e9a0;
    --bg-7d61d9: #7d61d9;
    --bg-8e72e9: #8e72e9;
    --bg-8fb9df: #8fb9df;
    --bg-9aaac0: #515a66;
    --bg-b19aff: #b19aff;
    --bg-c4d9f1: #2e4055;
    --bg-cbd4e1: #3c444f;
    --bg-d3f0e1: #2c4839;
    --bg-d5e3f7: #253245;
    --bg-dbe3ef: #2c3440;
    --bg-dbe9f8: #233140;
    --bg-dbe9ff: #202b3b;
    --bg-dce7f6: #233041;
    --bg-dce9ff: #202a3b;
    --bg-dde8f7: #222f3f;
    --bg-e0f8ee: #213d31;
    --bg-e1edff: #1e2837;
    --bg-e2f8ef: #203b30;
    --bg-e3f6ec: #223a2e;
    --bg-e4eeff: #1d2635;
    --bg-e5484d: #e5484d;
    --bg-e5ebf3: #262d37;
    --bg-e5edff: #1c2435;
    --bg-e6edf6: #222b37;
    --bg-e6efff: #1c2534;
    --bg-e6f1ff: #1c2634;
    --bg-e7edf6: #222a36;
    --bg-e7efff: #1c2333;
    --bg-e88b36: #e88b36;
    --bg-e8eef7: #212935;
    --bg-e8eff8: #1f2936;
    --bg-e8f0ff: #1b2333;
    --bg-e9f1ff: #1b2332;
    --bg-eaf3ff: #1a2431;
    --bg-edf1f6: #222830;
    --bg-edf3fc: #1a2431;
    --bg-edf4ff: #19222f;
    --bg-eef3fa: #1c2531;
    --bg-eef4ff: #19212e;
    --bg-eff6ffb8: #19222eb8;
    --bg-f1f4f8: #20252c;
    --bg-f1f7ff: #18212c;
    --bg-f4f8ff: #171e2a;
    --bg-f6f9ff: #161c29;
    --bg-f7f9fc: #191f28;
    --bg-f7faff: #161d28;
    --bg-f7faffed: #161d28ed;
    --bg-f8faff: #151b28;
    --bg-f8fbfff2: #151d28f2;
    --bg-f8fcff88: #15202888;
    --bg-fde7e7: #351c1c;
    --bg-fdeaea: #331b1b;
    --bg-ffc66f: #ffc66f;
    --bg-ffe58a: #ffe58a;
    --bg-ffe9e8: #331c1b;
    --bg-ffebeb: #301a1a;
    --bg-fff0dc: #3b2f20;
    --bg-fff1f0: #2d1a18;
    --bg-fff3da: #3c3320;
    --bg-fff6e6: #342b1c;
    --bg-fff6f6: #291616;
    --bg-fff8df: #39331f;
    --bg-ffffff: #181a1e;
    --bg-ffffff10: #181a1e10;
    --bg-ffffff12: #181a1e12;
    --bg-ffffff24: #181a1e24;
    --bg-ffffff25: #181a1e25;
    --bg-ffffff8c: #181a1e8c;
    --bg-ffffff9c: #181a1e9c;
    --bg-ffffffdc: #181a1edc;
    --fg-15946f: #1ed39e;
    --fg-15956f: #1ed49e;
    --fg-169e77: #1fdda6;
    --fg-17253b: #dfe4ec;
    --fg-1b9a77: #26d7a6;
    --fg-1eae82: #37ddaa;
    --fg-24344a: #e0e5eb;
    --fg-243650: #e0e4eb;
    --fg-26364b: #e0e5eb;
    --fg-2f66c7: #638eda;
    --fg-2f6fed: #719cf3;
    --fg-35465e: #aeb8c6;
    --fg-354f70: #a2b1c3;
    --fg-355f9f: #849abd;
    --fg-365c9d: #8599bc;
    --fg-3674e8: #76a0ef;
    --fg-3979ee: #7ba6f4;
    --fg-3f78df: #7ca3e9;
    --fg-4079dc: #7ca3e7;
    --fg-41536c: #a4aebb;
    --fg-43320b: #f0eadb;
    --fg-467de3: #84a9ec;
    --fg-477fe2: #85aaec;
    --fg-4b7ed7: #85a8e4;
    --fg-4f6280: #959faf;
    --fg-53647b: #98a1ad;
    --fg-536782: #939eac;
    --fg-60748f: #8d97a5;
    --fg-61738b: #8e97a4;
    --fg-6a7788: #9198a1;
    --fg-6d7f96: #8f98a3;
    --fg-6f8097: #8f98a3;
    --fg-708199: #8f97a3;
    --fg-75849a: #9097a2;
    --fg-78889d: #8f98a3;
    --fg-7c8796: #9298a0;
    --fg-7c8ba0: #8f97a3;
    --fg-7d8aa0: #8f97a3;
    --fg-8191a7: #8e97a4;
    --fg-8193ab: #8d97a5;
    --fg-8292a7: #8e98a4;
    --fg-8493a8: #8f97a3;
    --fg-8997ab: #8f97a3;
    --fg-8a5b12: #c9851a;
    --fg-8a6d1a: #c69c25;
    --fg-8d9db2: #8d97a5;
    --fg-92a0b2: #8e98a4;
    --fg-94a1b1: #8f98a3;
    --fg-97a3b2: #9098a2;
    --fg-98a6b8: #8e98a4;
    --fg-9aa7b8: #8e98a4;
    --fg-a12a2a: #ce4444;
    --fg-a19797: #8f97a3;
    --fg-a3afc0: #8e97a4;
    --fg-aab5c4: #8e97a4;
    --fg-b3a1a1: #9f9393;
    --fg-b97318: #e59834;
    --fg-c0392b: #da6559;
    --fg-c23b3b: #d47171;
    --fg-d68a28: #e2ab63;
    --fg-d8e4f6: #7391bf;
    --fg-d94d4d: #e68888;
    --fg-e0a21a: #ebbd56;
    --fg-f1f8ff: #f1f8ff;
    --fg-ffffff: #ffffff;
    --bg-12233d: #12233d;
    --bg-1e4c7d: #1e4c7d;
    --bg-eaf2ff: #1a2331;
    --bg-f3f5f8: #20242a;
    --fg-c0d2e8: #c0d2e8;
    --error-bg: #3b1d22;
    --error-ink: #ff9d9d;
    /* What an app's own icon colour is mixed with to make its gradient: the same in both themes, since the colour itself does not follow the theme (desktop.css .app-icon.custom). */
    --icon-mix-light: #ffffff;
    --icon-mix-dark: #000000;
}

/* ---- The built-in wallpaper in the dark theme: made for it, not worked out from the light one ---- */

:root[data-theme="dark"]:not(.has-wallpaper) .wallpaper {
    background:
        radial-gradient(ellipse at 75% 22%, #3a64a53a 0, transparent 42%),
        radial-gradient(ellipse at 22% 82%, #1d6c8a40 0, transparent 44%),
        linear-gradient(130deg, #0c1420 0%, #111e32 38%, #152a49 74%, #0d1a2e 100%);
}

/* ---- The person's own wallpaper (wallpaper.js), and the change of theme ---- */

html.has-wallpaper .wallpaper {
    background: var(--wallpaper) center / cover no-repeat;
}

html.has-wallpaper .wallpaper::after {
    background: none;
    backdrop-filter: none;
}

/* A picture of their own is darkened in the dark theme when they asked for that. The built-in wallpaper is already made for each theme (its colours are in the lists above). */
html[data-theme="dark"].has-wallpaper.wallpaper-dim .wallpaper::after {
    background: rgba(6, 10, 18, .5);
}

/* A wallpaper that is fading in (or the old one fading away): wallpaper.js puts one picture over the desktop for the length of the fade. */
.wallpaper-fade {
    position: fixed;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity .7s ease;
}

.wallpaper-fade.shown {
    opacity: 1;
}

html[data-theme="dark"].wallpaper-dim .wallpaper-fade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(6, 10, 18, .5);
}

/* The change from one theme to the other is a cross-fade of the whole page (theme.js), a little slower than the browser's own. */
::view-transition-group(root) {
    animation-duration: .4s;
}

.no-animations ::view-transition-group(root) {
    animation-duration: 0s;
}

/* User settings */
/* Wider than the other text boxes: an address is long. The box takes up to 280px of the row and gives way when the window is narrow, so the words of the setting keep at least 45% of the row
   (as the theme's do), instead of being squeezed beside a box that is wider than it needs to be. */
.setting-card.email-card > :first-child {
    min-width: 45%;
}

.setting-card.email-card .field-stack {
    flex: 0 1 280px;
    min-width: 0;
    align-items: stretch;
}

.setting-card.email-card input.user-email:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    max-width: none;
}

.field-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.setting-card.wide .field-stack {
    align-items: flex-start;
    min-width: 0;
}

/* A chosen picture's name can be longer than the row: the picker takes the row's width, so its name is cut with an ellipsis instead of running out of the group. */
.setting-card.wide .field-stack > .file-picker {
    align-self: stretch;
    min-width: 0;
}

.wallpaper-state {
    color: var(--muted);
    font-size: 10px;
}

.theme-detected {
    color: var(--muted);
    font-size: 10px;
}