/* The web version: the login page, the file chooser that stands in for the desktop's dialogs, and the light/dark choice. */
.weblogin { display: grid; place-items: center; height: 100vh; overflow: auto; }
.login-card { width: min(380px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px; box-shadow: var(--shadow); }
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card p { margin: 0 0 16px; color: var(--muted); }
.login-card input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); outline: none; }
.login-card input:focus { border-color: var(--accent); }
.login-card .btn { width: 100%; margin-top: 12px; }
.login-card .ferr { margin-top: 10px; }

.web-pick-list { border: 1px solid var(--line); border-radius: 6px; max-height: 280px; overflow: auto; margin: 8px 0; }
.web-pick-list .recent-item { display: flex; gap: 10px; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
.web-pick-list .recent-item:last-child { border-bottom: 0; }
.web-pick-list .recent-item:hover { background: var(--panel2); }
.web-pick-list .n { flex: 1; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-pick-list .p { color: var(--muted); white-space: nowrap; }
.web-note { color: var(--muted); margin: 6px 0; }
.web-input { width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); outline: none; font: 12px var(--mono); }
.web-input:focus { border-color: var(--accent); }

/* the theme buttons work through data-theme, since a web page cannot change the colour scheme of the browser */
html[data-theme="light"] { color-scheme: light; --bg: #f4f5f7; --panel: #ffffff; --panel2: #eef0f3; --panel3: #e3e6ea; --line: #d7dbe0; --text: #1c2128; --muted: #5d6673; --faint: #8b94a1; --strong: #0b0f14; --accent: #2563eb; --accent-soft: #dbe7ff; --accent-text: #ffffff; --danger: #d1242f; --danger-soft: #fde8ea; --warn: #9a6700; --warn-soft: #fff4d6; --ok: #1a7f37; --ok-soft: #dff5e5; --null: #9aa3af; --num: #0a5bd6; --blob: #8a3ffc; --key: #b7791f; --shadow: 0 8px 30px rgba(0, 0, 0, .18); }
html[data-theme="dark"] { color-scheme: dark; --bg: #14171c; --panel: #1b1f26; --panel2: #232831; --panel3: #2c323d; --line: #333a46; --text: #dfe3ea; --muted: #a2abb8; --faint: #7a8494; --strong: #ffffff; --accent: #4c8dff; --accent-soft: #1d3157; --accent-text: #0b1220; --danger: #ff6b73; --danger-soft: #3a1d21; --warn: #e3b341; --warn-soft: #3a2f12; --ok: #56d364; --ok-soft: #14301c; --null: #6b7482; --num: #79b0ff; --blob: #c29bff; --key: #e3b341; --shadow: 0 8px 30px rgba(0, 0, 0, .5); }