/*
 * Dark mode for the app and the sign-in pages (owner 2026-10-06, design change
 * note: "enable dark mode for all"). html[data-theme="dark"] is set before the
 * page draws by a small script in <head> (choice saved on the device: Light /
 * Dark / Match my device; default Match my device). No green.
 *
 * Surfaces and text flip; the deep accents become lighter so they read as text
 * on dark cards. Light-colored blocks and solid accent fills are "islands" that
 * keep their light-mode colors (generated list at the end — run
 * `node tools/app-dark.mjs` after changing app.css or signhub.css).
 */
html[data-theme="dark"] {
	--sh-ink: #ECE8F4;
	--sh-ink-soft: #B4AAC6;
	--sh-paper: #14101C;
	--sh-card: #1E1829;
	--sh-line: #342B45;
	--sh-neutral: #2A2238;
	--sh-violet-deep: #B39CF5;
	--sh-violet-text: #CDBEF8;
	--sh-amber-deep: #F2BE73;
	--sh-amber-text: #5C3A05; /* Only used on amber blocks (islands). */
	--sh-pink-deep: #F0A7C4;
	--sh-danger: #F2967E;
	--sh-ink-btn: #4A3B66;
	--sh-t-violet: rgba(179, 156, 245, 0.16);
	--sh-t-amber: rgba(246, 169, 62, 0.18);
	--sh-t-pink: rgba(240, 167, 196, 0.18);
	--sh-danger-tint: rgba(242, 150, 126, 0.16);
	--sh-shadow: rgba(0, 0, 0, 0.45);
	color-scheme: dark;
}
html[data-theme="dark"] body.sh-body { background: var(--sh-paper); color: var(--sh-ink); }
html[data-theme="dark"] .sh-field input::placeholder,
html[data-theme="dark"] .sh-in::placeholder { color: #7D7290; }

/* Logo: the dark-mode logo when there is one, else the normal logo on a small white card. */
.sh-logo .sh-logo-d { display: none; }
html[data-theme="dark"] .sh-logo.has-dark .sh-logo-l { display: none; }
html[data-theme="dark"] .sh-logo.has-dark .sh-logo-d { display: block; }
html[data-theme="dark"] .sh-logo:not(.has-dark) img { background: #fff; border-radius: 14px; padding: 8px 12px; }
.sh-logo-app .sh-logo-d { display: none; }
html[data-theme="dark"] .sh-logo-app.has-dark { background: transparent; }
html[data-theme="dark"] .sh-logo-app.has-dark .sh-logo-l { display: none; }
html[data-theme="dark"] .sh-logo-app.has-dark .sh-logo-d { display: block; }

/* The app's start-up screen. */
html[data-theme="dark"] .sh-splash-spin { border-color: rgba(236, 232, 244, 0.18); border-top-color: #ECE8F4; }

/* Photos and videos keep their own colors; soften very bright pictures a little. */
html[data-theme="dark"] .sh-body img:not(.sh-logo-l):not(.sh-logo-d) { filter: brightness(0.94); }
/* ===== generated by tools/app-dark.mjs — do not edit below ===== */

/* Islands: light-colored blocks keep light-mode colors (240 selectors). */
:where(html[data-theme="dark"]) :where(
	.sh-affcode-big,
	.sh-affhero,
	.sh-att-btn.is-no.is-on,
	.sh-att-btn.is-yes.is-on,
	.sh-badge,
	.sh-badge-ic,
	.sh-badge-ic.is-amber,
	.sh-bell-n,
	.sh-bell-n.is-cart,
	.sh-best,
	.sh-bhero,
	.sh-bhero .sh-tag,
	.sh-bhero.is-amber,
	.sh-bhero.is-pink,
	.sh-block.is-amber,
	.sh-block.is-pink,
	.sh-block.is-violet,
	.sh-blogo,
	.sh-board,
	.sh-board.is-amber,
	.sh-board.is-pink,
	.sh-bottombar,
	.sh-breaking,
	.sh-breaking-done,
	.sh-breaking-done:hover,
	.sh-breaking-tag,
	.sh-btn-danger,
	.sh-btn-google,
	.sh-btn-light,
	.sh-btn-light:hover:not([disabled]),
	.sh-btn-trial,
	.sh-btn-trial:hover,
	.sh-btn-violet,
	.sh-bub.is-mine,
	.sh-cam,
	.sh-cart-thumb,
	.sh-cart-thumb.is-amber,
	.sh-cart-thumb.is-pink,
	.sh-cat.is-amber,
	.sh-cat.is-pink,
	.sh-cat.is-violet,
	.sh-cert-ic,
	.sh-cert-seal,
	.sh-certificate,
	.sh-certificate.is-amber,
	.sh-certificate.is-violet,
	.sh-choice input:checked + span::before,
	.sh-choice input[type=checkbox]:checked + span::before,
	.sh-choice span::before,
	.sh-cl-thumb,
	.sh-cl-thumb.is-event,
	.sh-coming-ic,
	.sh-course-actions .sh-btn-trial,
	.sh-course-actions .sh-btn-trial:hover,
	.sh-course-actions .sh-cart-add,
	.sh-course-actions .sh-cart-add.is-in,
	.sh-course.is-amber,
	.sh-course.is-amber .sh-track div,
	.sh-course.is-pink,
	.sh-course.is-pink .sh-track div,
	.sh-course.is-violet,
	.sh-cover-badge,
	.sh-cover-play,
	.sh-credit:hover,
	.sh-dayb .sh-dot,
	.sh-dayb.is-on .sh-dot,
	.sh-dboard,
	.sh-dboard.is-amber,
	.sh-dboard.is-pink,
	.sh-dot.is-done,
	.sh-dots span.is-used,
	.sh-drive-link,
	.sh-drive-link:hover,
	.sh-ds-cover.is-book,
	.sh-ds-cover.is-exercise,
	.sh-ds-cover.is-lesson,
	.sh-ds-done,
	.sh-ds-line.is-on .sh-ds-watch,
	.sh-ds-opt.is-right,
	.sh-ds-star,
	.sh-ds-steps li.is-done .sh-ds-stepdot,
	.sh-ds-steps li.is-now .sh-ds-stepdot,
	.sh-ds-watch,
	.sh-dtopic.is-amber,
	.sh-dtopic.is-pink,
	.sh-dtopic.is-violet,
	.sh-empty .sh-big,
	.sh-evcover,
	.sh-evcover.is-amber,
	.sh-exam-info,
	.sh-exam-score.is-fail,
	.sh-exam-score.is-pass,
	.sh-exam-state.is-booked,
	.sh-exam-state.is-error,
	.sh-exam-state.is-pending,
	.sh-ff-bar i,
	.sh-ff-dot.is-done b,
	.sh-ff-dot.is-on b,
	.sh-field:focus-within .sh-fi,
	.sh-fpill.is-on,
	.sh-fprog div,
	.sh-group-hero.is-amber,
	.sh-hblock.is-any,
	.sh-hblock.is-busy,
	.sh-hblock.is-course,
	.sh-hblock.is-interp,
	.sh-hero,
	.sh-hero .sh-tag,
	.sh-imembers,
	.sh-install,
	.sh-install-ic,
	.sh-invite-org,
	.sh-invite-org.is-amber,
	.sh-invite-org.is-pink,
	.sh-ithumb,
	.sh-ithumb > .sh-i,
	.sh-ithumb.is-amber,
	.sh-ithumb.is-pink,
	.sh-kind.is-event,
	.sh-kind.is-workshop,
	.sh-leadcard,
	.sh-leadcard-ic,
	.sh-leadcard.is-urgent,
	.sh-legend i,
	.sh-livedot,
	.sh-logo-app,
	.sh-mark,
	.sh-mc-dot,
	.sh-mc-dot.is-amber,
	.sh-mc-dot.is-pink,
	.sh-meter i,
	.sh-mini-prog i,
	.sh-msg-kind.is-amber,
	.sh-msg-kind.is-violet,
	.sh-msg-n,
	.sh-msg-vbtn,
	.sh-msg-vbtn.is-on,
	.sh-note-card,
	.sh-note.is-new .sh-note-dot,
	.sh-onsite-tag,
	.sh-opt.is-right .sh-opt-dot,
	.sh-pass,
	.sh-pill input:checked + span,
	.sh-pillnav a[aria-current="page"],
	.sh-place-ic,
	.sh-plan-n.is-late,
	.sh-plan-n.is-paid,
	.sh-pushbanner,
	.sh-pushbanner .sh-pushbanner-on,
	.sh-pushbanner.is-done,
	.sh-pushbanner.is-done .sh-pushbanner-ic,
	.sh-pushbanner.is-warn,
	.sh-qbar i,
	.sh-qbtn,
	.sh-quick.is-pink,
	.sh-quick.is-violet,
	.sh-rec-dot,
	.sh-rec-ic,
	.sh-remind-hero.is-amber,
	.sh-remind-hero.is-violet,
	.sh-result-ring.is-ok,
	.sh-savebar i,
	.sh-scan-chip.is-on,
	.sh-scan-hint,
	.sh-scan-list,
	.sh-scancard,
	.sh-scancard-ic,
	.sh-score.is-amber,
	.sh-score.is-violet,
	.sh-seg button.is-on,
	.sh-side a[aria-current="page"],
	.sh-sign,
	.sh-sign .sh-pl,
	.sh-slot.is-on,
	.sh-sosact.is-video,
	.sh-sosbigk-btn.is-help,
	.sh-soscancel,
	.sh-soscomm-tile.is-amber,
	.sh-soscomm-tile.is-pink,
	.sh-soscomm-tile.is-violet,
	.sh-sosdot,
	.sh-sosfull.is-text .sh-btn-dark,
	.sh-sosfull.is-text .sh-btn-light,
	.sh-sosinfo-ic,
	.sh-soslocked,
	.sh-sosonboard-hero,
	.sh-sossafe,
	.sh-sossign-ic,
	.sh-sossteps li.is-now span,
	.sh-sostool.is-amber .sh-sostool-ic,
	.sh-sostool.is-pink .sh-sostool-ic,
	.sh-sostool.is-violet .sh-sostool-ic,
	.sh-soswho,
	.sh-soswho-btn,
	.sh-soswho-btn.is-me,
	.sh-star-pick button.is-on,
	.sh-stop-ic,
	.sh-storage-bar i,
	.sh-strobe-stop,
	.sh-switch i,
	.sh-switch.is-on,
	.sh-tag,
	.sh-tag.is-amber,
	.sh-tag.is-pink,
	.sh-tcal-day.has,
	.sh-tcal-day.is-off,
	.sh-tcal-dots i,
	.sh-tcal-dots i.is-assignment,
	.sh-tcal-dots i.is-quiz,
	.sh-tcal-key .is-off::before,
	.sh-tcal-key i,
	.sh-tcal-key i.is-assignment,
	.sh-tcal-key i.is-quiz,
	.sh-tf .sh-opt.is-false.is-picked,
	.sh-tf-ic,
	.sh-ti,
	.sh-tile.is-amber,
	.sh-tile.is-pink,
	.sh-tile.is-violet,
	.sh-toast .sh-ok,
	.sh-track div,
	.sh-trialbar,
	.sh-trialbox,
	.sh-tv,
	.sh-tv-day,
	.sh-tv-day.is-breaking,
	.sh-tv-day.is-breaking .sh-live,
	.sh-tv-empty,
	.sh-vbar i,
	.sh-vcolor i,
	.sh-vcolor.is-amber i,
	.sh-vcolor.is-pink i,
	.sh-vhero.is-amber,
	.sh-vhero.is-pink,
	.sh-video,
	.sh-video-ph,
	.sh-vlogo,
	.sh-vlogo.is-amber,
	.sh-vlogo.is-pink,
	.sh-vseats .sh-vbar
) {
	--sh-ink: #241933; --sh-ink-soft: #6E647E; --sh-paper: #F7F5FB; --sh-card: #FFFFFF; --sh-line: #EAE6F2; --sh-neutral: #EFECF4;
	--sh-violet-deep: #5B3FA0; --sh-violet-text: #3E2A73; --sh-amber-deep: #7A4E0A; --sh-pink-deep: #8C3A5B; --sh-danger: #A5482F;
	--sh-ink-btn: #1C1526; --sh-t-violet: rgba(92, 63, 160, 0.12); --sh-t-amber: rgba(246, 169, 62, 0.2); --sh-t-pink: rgba(246, 191, 212, 0.35);
	--sh-danger-tint: rgba(200, 93, 69, 0.14);
}

/* Islands without their own text color: dark text, as in light mode. */
:where(html[data-theme="dark"]) :where(
	.sh-affhero,
	.sh-badge,
	.sh-bhero,
	.sh-bhero .sh-tag,
	.sh-bhero.is-amber,
	.sh-bhero.is-pink,
	.sh-board.is-amber,
	.sh-board.is-pink,
	.sh-bottombar,
	.sh-btn-light:hover:not([disabled]),
	.sh-btn-trial:hover,
	.sh-bub.is-mine,
	.sh-certificate,
	.sh-certificate.is-amber,
	.sh-certificate.is-violet,
	.sh-choice span::before,
	.sh-course-actions .sh-btn-trial,
	.sh-course-actions .sh-btn-trial:hover,
	.sh-course-actions .sh-cart-add,
	.sh-course-actions .sh-cart-add.is-in,
	.sh-credit:hover,
	.sh-dayb.is-on .sh-dot,
	.sh-dboard.is-amber,
	.sh-dboard.is-pink,
	.sh-drive-link:hover,
	.sh-ds-done,
	.sh-dtopic.is-amber,
	.sh-dtopic.is-pink,
	.sh-dtopic.is-violet,
	.sh-exam-info,
	.sh-exam-score.is-fail,
	.sh-exam-score.is-pass,
	.sh-field:focus-within .sh-fi,
	.sh-group-hero.is-amber,
	.sh-hero,
	.sh-ithumb > .sh-i,
	.sh-leadcard,
	.sh-leadcard-ic,
	.sh-leadcard.is-urgent,
	.sh-logo-app,
	.sh-mc-dot.is-amber,
	.sh-pass,
	.sh-pushbanner.is-done .sh-pushbanner-ic,
	.sh-quick.is-pink,
	.sh-quick.is-violet,
	.sh-rec-ic,
	.sh-scancard,
	.sh-soscomm-tile.is-pink,
	.sh-soscomm-tile.is-violet,
	.sh-sosdot,
	.sh-soswho-btn.is-me,
	.sh-stop-ic,
	.sh-switch i,
	.sh-tcal-day.has,
	.sh-tcal-day.is-off,
	.sh-tcal-dots i.is-quiz,
	.sh-tcal-key .is-off::before,
	.sh-tcal-key i.is-quiz,
	.sh-tf-ic,
	.sh-ti,
	.sh-trialbar,
	.sh-trialbox,
	.sh-tv,
	.sh-tv-day.is-breaking .sh-live,
	.sh-vcolor i,
	.sh-vcolor.is-amber i,
	.sh-vcolor.is-pink i,
	.sh-vhero.is-amber,
	.sh-vhero.is-pink,
	.sh-vseats .sh-vbar
) { color: var(--sh-ink); }