/*
 * Alchemysterium dark-mode standard: Obsidian & Brass.
 * New pages should consume these tokens rather than defining their own palette.
 */
html { color-scheme:dark; }
html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#000000;
  --panel:#101010;
  --panel-2:#191919;
  --panel2:#191919;
  --surface:#101010;
  --surface-raised:#191919;
  --ink:#eee9dd;
  --text:#eee9dd;
  --muted:#aaa89e;
  --line:#383838;
  --gold:#c8aa6a;
  --accent:#c8aa6a;
  --accent-2:#c8aa6a;
  --primary:#d4c49d;
  --primary-ink:#151713;
  --danger:#c98278;
  --shadow:0 24px 70px rgba(0,0,0,.42);
}
html[data-theme="dark"] body { background:var(--bg) !important; color:var(--ink) !important; }
html[data-theme="dark"] .alchemysterium-site-bar { background:var(--bg); border-color:var(--line); }
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .quote-card,
html[data-theme="dark"] .user-card,
html[data-theme="dark"] .editor-card,
html[data-theme="dark"] .profile-view,
html[data-theme="dark"] .entry,
html[data-theme="dark"] .item,
html[data-theme="dark"] .note { background:var(--panel); border-color:var(--line); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background:var(--bg); color:var(--ink); border-color:var(--line); }
html select {
  appearance:none;
  -webkit-appearance:none;
  padding-right:50px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1.5 8 8.5l7-7' fill='none' stroke='%23eee9dd' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 22px center !important;
  background-size:16px 10px !important;
}
html[data-theme="dark"] .notice:not(.error) { background:rgba(200,170,106,.11); color:#d8c79f; }
html[data-theme="dark"] .account-popover { background:var(--panel); border-color:var(--line); }
html[data-theme="dark"] .theme-icon { color:var(--primary); background:var(--bg); border-color:var(--line); }
html[data-theme="dark"] a { accent-color:var(--gold); }
html[data-theme="dark"] .experience-card,
html[data-theme="dark"] .draw-panel,
html[data-theme="dark"] .instrument-sidebar,
html[data-theme="dark"] .control-group,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .search-toolbar { background:var(--panel) !important; border-color:#3d423b !important; }
html[data-theme="dark"] .experience-card { box-shadow:inset 0 1px rgba(255,255,255,.025); }
html[data-theme="dark"] a.experience-card:hover,
html[data-theme="dark"] a.experience-card:focus-visible { border-color:var(--gold) !important; background:#191919 !important; }
html[data-theme="dark"] .mark,
html[data-theme="dark"] .site-icon { border-color:var(--gold) !important; background:var(--bg) !important; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus { border-color:var(--gold) !important; outline:3px solid rgba(200,170,106,.13); }
html[data-theme="dark"] .control-label,
html[data-theme="dark"] .kicker,
html[data-theme="dark"] .modal-kicker,
html[data-theme="dark"] .instrument-settings-kicker,
html[data-theme="dark"] .meaning-summary-title,
html[data-theme="dark"] .meta { color:var(--gold) !important; }
html[data-theme="dark"] .meaning-summary,
html[data-theme="dark"] .modal-row,
html[data-theme="dark"] .modaltext p,
html[data-theme="dark"] .reading { border-left-color:var(--gold) !important; background:var(--panel-2) !important; }
html[data-theme="dark"] .draw-button,
html[data-theme="dark"] #draw,
html[data-theme="dark"] #drawButton,
html[data-theme="dark"] .button:not(.secondary),
html[data-theme="dark"] .button-primary,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] .filters button,
html[data-theme="dark"] .search-toolbar button,
html[data-theme="dark"] .toolbar button,
html[data-theme="dark"] .save-bar button,
html[data-theme="dark"] .add-quote-button { color:var(--primary-ink) !important; background:var(--primary) !important; border-color:var(--primary) !important; box-shadow:none !important; }
html[data-theme="dark"] .save-reading-button { color:var(--ink) !important; background:rgba(200,170,106,.1) !important; border-color:#75643d !important; }
html[data-theme="dark"] .save-reading-button:hover,
html[data-theme="dark"] .save-reading-button:focus-visible { background:rgba(200,170,106,.18) !important; border-color:var(--gold) !important; }
html[data-theme="light"] {
  color-scheme:light;
  --bg:#eeece8;
  --panel:#e4e1db;
  --panel-2:#d8d4cc;
  --panel2:#d8d4cc;
  --surface:#e4e1db;
  --surface-raised:#d8d4cc;
  --ink:#252422;
  --text:#252422;
  --muted:#625f58;
  --line:rgba(37,36,34,.22);
  --gold:#755d26;
  --accent:#755d26;
  --accent-2:#49635b;
  --primary:#755d26;
  --primary-ink:#fffdf8;
  --danger:#a2362b;
  --shadow:none;
}
html[data-theme="light"] body { background:#eeece8 !important; color:#252422 !important; }
html[data-theme="light"] .alchemysterium-site-bar { background:#eeece8; }
html[data-theme="light"] .auth-card,
html[data-theme="light"] aside,
html[data-theme="light"] .control-group,
html[data-theme="light"] .modaltext,
html[data-theme="light"] .modal-copy,
html[data-theme="light"] .quote-card { background:#e4e1db !important; color:#252422 !important; box-shadow:none !important; }
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select { background-color:#f8f7f4 !important; color:#252422 !important; border-color:rgba(37,36,34,.3) !important; }
html[data-theme="light"] select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1.5 8 8.5l7-7' fill='none' stroke='%23252422' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html[data-theme="light"] button:not(.theme-toggle):not(.account-avatar),
html[data-theme="light"] .button { box-shadow:none !important; }
html[data-theme="light"] .experience-card { background:#e4e1db !important; border-color:rgba(37,36,34,.24) !important; }
html[data-theme="light"] .mark { background:#dedad2 !important; }
html[data-theme="light"] header { background-color:transparent !important; }
html[data-theme="light"] .draw-panel { background-color:var(--panel) !important; }
html[data-theme="light"] .account-popover { background:#f4f2ee; border-color:rgba(37,36,34,.22); box-shadow:0 18px 48px rgba(45,42,37,.16); }
html[data-theme="light"] .menu-link,
html[data-theme="light"] .menu-button,
html[data-theme="light"] .theme-toggle { color:#252422; }

/* Light surfaces and paired action colors also cover page-local legacy styles. */
html[data-theme="light"] .stage-wrap { border-color:var(--line); box-shadow:0 12px 32px rgba(45,42,37,.14); }
html[data-theme="light"] :is(.instrument-settings-panel, .card-meaning-overlay, .save-panel, .settings-panel, .modal-panel, .modal-copy, .session, .tagged-quote) {
  background:var(--panel);
  color:var(--ink);
  border-color:var(--line);
}
html[data-theme="light"] :is(.draw-button, #draw, #drawButton, .button:not(.secondary):not(.button-secondary), .button-primary, button.primary, .filters button, .search-toolbar button, .toolbar button, .save-bar button, .add-category button, .add-quote-button, .inline-edit-actions button, .quote-form .quote-actions button:not(.cancel-button), .reading-save-submit, .reading-share-actions button:first-child, .save-download, .profile-actions a.primary, .actions button:not(.delete)) {
  background:var(--primary) !important;
  color:var(--primary-ink) !important;
  border-color:var(--primary) !important;
}
html[data-theme="light"] :is(.save-reading-button, .share-reading-button, .generate-password, .button-secondary, .buttons button:not(.primary)) {
  background:var(--panel);
  color:var(--ink);
  border-color:var(--gold);
}
html[data-theme="light"] :is(.save-reading-button, .share-reading-button, .generate-password, .buttons button:not(.primary)):hover {
  background:var(--panel-2);
}
html[data-theme="light"] :is(.reading-save-dialog, .reading-share-dialog) {
  color:var(--ink);
  box-shadow:0 18px 48px rgba(45,42,37,.16);
}
html[data-theme="light"] :is(.reading-save-close, .reading-share-close, .account-avatar, .profile-avatar, .theme-icon, .account-link-primary) {
  color:var(--ink);
  background:var(--panel-2);
  border-color:var(--line);
}
html[data-theme="light"] :is(.control-group label, .tagged-quote blockquote) { color:var(--ink); }
html[data-theme="light"] :is(.reading-save-form label, .subject-sidebar h2, .tagged-author, .author, .load-more, .alchemysterium-home-link .back-arrow) { color:var(--gold); }
html[data-theme="light"] :is(.interpretation, .note p, .reading-save-status, .subject-link, .subject-status, .tagged-header p, .quote-source, .tagged-note, .action-note, .shell .intro, .shell .back, .shell .empty, .account-identity small, header p, footer) { color:var(--muted); }
html[data-theme="light"] :is(.quote-action, .tagged-actions button, .container .quote-actions button) { color:var(--ink); }
html[data-theme="light"] :is(.subject-link.active, .subject-link:hover, .quote-action:hover, .quote-action.unheart, .tagged-actions button:hover, .tagged-actions button.is-favorite, .container .quote-actions button:hover, .favorite-button.is-favorite) { color:var(--gold); }
html[data-theme="light"] :is(.subject-count, .author) { opacity:1; }
html[data-theme="light"] :is(.subject-sidebar, .favorite, .shell .empty, .load-more) { border-color:var(--line); }
html[data-theme="light"] :is(.alert, .notice.error) { background:#f5dfda; border-color:#b8756c; color:var(--danger); }
html[data-theme="light"] :is(.success, .notice:not(.error)) { background:#e0e9dd; border-color:#84987d; color:#35532f; }
html[data-theme="light"] :is(.reading-save-status.is-error, .reading-share-status.is-error, .actions .delete, .status.suspended, .icon-button.delete:hover, .action.delete:hover) { color:var(--danger); }
html[data-theme="light"] :is(input, textarea)::placeholder { color:var(--muted); opacity:1; }
html[data-theme="light"] :is(input, textarea, select):focus {
  border-color:var(--gold) !important;
  outline:2px solid var(--gold);
  outline-offset:2px;
}
html[data-theme="light"] :is(button, a, summary):focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
html[data-theme="light"] :is(a.experience-card:hover, a.experience-card:focus-visible) { background:var(--panel-2) !important; border-color:var(--gold) !important; }
html[data-theme="light"] ::selection { background:#755d26; color:#fffdf8; -webkit-text-fill-color:#fffdf8; text-shadow:none; }

.site-account { position:absolute; z-index:2; top:50%; right:max(18px,env(safe-area-inset-right)); transform:translateY(-50%); display:flex; align-items:center; gap:7px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
.site-account .account-link { display:inline-flex; min-height:36px; padding:8px 12px; align-items:center; border:1px solid transparent; border-radius:8px; color:var(--muted,#aaa89e); font-size:.78rem; font-weight:650; text-decoration:none; }
.site-account .account-link-primary { color:inherit; border-color:var(--line,#343832); }
.account-menu { position:relative; }
.account-menu summary { list-style:none; cursor:pointer; }
.account-menu summary::-webkit-details-marker { display:none; }
.account-avatar { display:grid; place-items:center; width:40px; height:40px; padding:0; overflow:hidden; border:1px solid var(--line,#343832); border-radius:50%; color:var(--gold,#c8aa6a); background:var(--panel,#121614); font:600 .78rem/1 Cinzel,Georgia,serif; cursor:pointer; }
.account-avatar img { width:100%; height:100%; object-fit:cover; }
.account-popover { position:absolute; top:calc(100% + 9px); right:0; width:210px; padding:7px; border:1px solid var(--line,#343832); border-radius:8px; color:var(--ink,#eee9dd); background:var(--panel,#121614); box-shadow:0 18px 48px rgba(0,0,0,.42); }
.account-identity { padding:9px 10px 10px; border-bottom:1px solid rgba(128,128,128,.25); }
.account-identity strong,.account-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-identity strong { font:650 .84rem/1.2 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
.account-identity small { margin-top:4px; color:#888b86; font-size:.7rem; }
.menu-link,.menu-button,.theme-toggle { display:flex; width:100%; min-height:40px; padding:9px 10px; gap:10px; align-items:center; border:0; border-radius:8px; color:var(--ink,#eee9dd); background:transparent; font:600 .82rem/1 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; text-align:left; text-decoration:none; cursor:pointer; }
.menu-link:hover,.menu-button:hover,.theme-toggle:hover { background:rgba(128,128,128,.12); }
.account-popover form { margin:0; }
.theme-icon { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border:1px solid var(--line,#343832); border-radius:50%; color:var(--primary,#d4c49d); background:var(--bg,#090b0a); }
.theme-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:680px) { .site-account { right:max(8px,env(safe-area-inset-right)); } .site-account .account-link:not(.account-link-primary) { display:none; } .account-popover { position:fixed; top:58px; right:8px; } }

.coffee-cta { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; gap:8px; min-height:40px; margin:0; padding:8px 12px; border:1px solid var(--gold,#c8aa6a); border-radius:8px; color:var(--gold,#c8aa6a); background:var(--panel,#121614); font:650 .78rem/1.2 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:normal; text-transform:none; white-space:nowrap; cursor:pointer; }
.site-account .coffee-cta,.account-nav .coffee-cta { width:auto; min-width:0; }
.site-account:has(.coffee-cta) .account-menu { flex-shrink:0; }
.coffee-cta svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.coffee-cta:hover { background:var(--panel-2,#171b18); }
.coffee-cta:focus-visible,.coffee-close:focus-visible { outline:2px solid var(--gold,#c8aa6a); outline-offset:3px; }
.coffee-dialog { box-sizing:border-box; position:fixed; inset:0; width:min(420px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); margin:auto; padding:28px 24px 24px; overflow:auto; border:1px solid var(--line,#343832); border-radius:16px; color:var(--ink,#eee9dd); background:var(--panel,#121614); box-shadow:var(--shadow); text-align:center; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.coffee-dialog::backdrop { background:rgba(0,0,0,.72); }
.coffee-dialog h2 { margin:12px 20px; color:inherit; font:400 1.7rem/1.2 Georgia,serif; letter-spacing:normal; text-transform:none; }
.coffee-dialog p { margin:0 0 18px; color:var(--muted,#aaa89e); font-size:.9rem; line-height:1.5; }
.coffee-dialog .coffee-close { position:absolute; top:6px; right:6px; display:grid; place-items:center; width:36px; height:36px; min-height:0; margin:0; padding:0; border:0; border-radius:8px; color:var(--ink,#eee9dd); background:transparent; font:400 26px/1 system-ui,sans-serif; cursor:pointer; }
.coffee-dialog .coffee-close { min-width:0; }
.coffee-dialog .coffee-qr { display:block; width:100%; height:auto; margin:0 auto; border-radius:8px; background:white; }
@media (max-width:1300px) {
  :root:has(.alchemysterium-site-bar .coffee-cta) { --alchemysterium-header-height:150px; }
  .alchemysterium-site-bar:has(.coffee-cta) { height:150px; padding-top:60px; }
  .alchemysterium-site-bar .site-account:has(.coffee-cta) { top:10px; transform:none; }
  .alchemysterium-site-bar:has(.coffee-cta) .back-arrow { top:auto; bottom:24px; transform:none; }
  .account-nav:has(.coffee-cta) + main { padding-top:70px; }
}
@media (max-width:680px) {
  :root:has(.alchemysterium-site-bar .coffee-cta) { --alchemysterium-header-height:116px; }
  .alchemysterium-site-bar:has(.coffee-cta) { height:116px; padding-top:58px; }
  .alchemysterium-site-bar:has(.coffee-cta) .back-arrow { bottom:16px; }
  .account-nav:has(.coffee-cta) + main { padding-top:8px; }
}

/* Keep selected text readable in page content and editable fields. */
html[data-theme="dark"] ::selection {
  background:#c8aa6a;
  color:#101210;
  -webkit-text-fill-color:#101210;
  text-shadow:none;
}
html[data-theme="dark"] input::selection,
html[data-theme="dark"] textarea::selection {
  background:#c8aa6a;
  color:#101210;
  -webkit-text-fill-color:#101210;
}

/* Keep the shared coffee button at the homepage dimensions on every instrument. */
.site-account button.coffee-cta,
.account-nav button.coffee-cta {
  box-sizing:border-box !important;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  margin:0 !important;
  padding:8px !important;
  gap:8px !important;
  border-width:1px !important;
  border-radius:8px !important;
  font:650 .78rem/1.2 Inter,ui-sans-serif,system-ui,sans-serif !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}
.coffee-cta svg { flex:0 0 20px; width:20px !important; height:20px !important; }

.coffee-qr-link { display:block; border-radius:8px; }
.coffee-qr-link:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }

.popup-card-download { display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:0; min-height:36px; margin:8px 0; padding:8px 12px; border:1px solid var(--gold,#c8aa6a); border-radius:8px; color:var(--ink,#eee9dd); background:var(--panel,#131817); font:600 .8rem/1.2 Inter,system-ui,sans-serif; text-decoration:none; cursor:pointer; justify-self:start; }
.popup-image-download { position:absolute; top:12px; left:12px; z-index:121; }
.full-rune-actions #downloadRune { width:auto; padding:8px 12px; font:600 .8rem/1.2 Inter,system-ui,sans-serif; }

.coffee-dialog { width:min(600px,calc(100vw - 12px)); padding-inline:8px; }
.coffee-dialog .coffee-feedback-form button[type="submit"] { display:inline-flex; align-items:center; justify-content:center; justify-self:start; width:auto!important; min-width:0!important; height:34px!important; min-height:34px!important; margin:0!important; padding:6px 12px!important; font:600 .78rem/1.2 Inter,system-ui,sans-serif!important; }

.coffee-dialog .coffee-qr-link { width:min(270px,75%); max-width:none; }
.coffee-dialog .coffee-qr { width:100%; max-width:none; }

.account-nav .theme-toolbar,.site-account .theme-toolbar{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 40px;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;margin:0!important;padding:8px!important;border:0!important;border-radius:8px;background:transparent!important;color:var(--muted,#aaa89e);box-shadow:none!important}.theme-toolbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.site-delete-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 32px));padding:28px;border:1px solid var(--gold,#c8aa6a);border-radius:14px;background:var(--panel,#151a18);color:var(--ink,#eee9dd);box-shadow:0 20px 70px #0006;text-align:left}
.site-delete-dialog::backdrop{background:#0009;backdrop-filter:blur(3px)}
.site-delete-dialog h2{margin:0 28px 16px 0;font:400 1.8rem/1.2 Georgia,serif}
.site-delete-dialog p{margin:0 0 24px;font:400 1rem/1.6 system-ui,sans-serif;color:var(--ink,#eee9dd)}
.site-delete-dialog .delete-dialog-close{position:absolute;top:10px;right:10px;width:32px;height:32px;min-height:0;padding:0;border:0;background:transparent;color:inherit;font:24px/1 system-ui;cursor:pointer}
.site-delete-dialog .delete-dialog-actions{display:flex;justify-content:flex-end;gap:10px}
.site-delete-dialog .delete-dialog-actions button{width:auto;min-height:40px;padding:8px 18px;border:1px solid var(--gold,#c8aa6a);border-radius:8px;font:600 .9rem/1.3 system-ui,sans-serif;cursor:pointer}
.site-delete-dialog .delete-cancel{background:transparent;color:var(--ink,#eee9dd)}
.site-delete-dialog .delete-confirm{background:var(--gold,#c8aa6a);color:#101210}
.site-delete-dialog button:focus-visible{outline:2px solid var(--gold,#c8aa6a);outline-offset:3px}

/* Ivory homepage artwork: one unchanged image in both themes. */
.home-page .mark {
  filter:none;
  mix-blend-mode:normal;
  opacity:1;
  border-radius:10px;
}
html[data-theme="dark"] .home-page .experience-card {
  background:#080808 !important;
  border-color:#33302b !important;
}
html[data-theme="dark"] .home-page .experience-card:is(:hover,:focus-visible) {
  background:#151310 !important;
  border-color:#c8b48e !important;
}
html[data-theme="dark"] .home-page .mark {
  background:#000 !important;
  border-color:#645a48 !important;
}
html[data-theme="light"] .home-page {
  --muted:#655c4f;
  --gold:#765d38;
  background:#f0ebe1 !important;
  color:#2c2822 !important;
}
html[data-theme="light"] .home-page .experience-card {
  background:#faf6ed !important;
  border-color:#cfc3af !important;
  box-shadow:0 3px 12px rgba(60,45,25,.06);
}
html[data-theme="light"] .home-page .experience-card:is(:hover,:focus-visible) {
  background:#eae0ce !important;
  border-color:#8b7350 !important;
}
html[data-theme="light"] .home-page .mark {
  background:#000 !important;
  border:1px solid #75664f !important;
  box-shadow:0 0 0 3px #e1d5c0,0 3px 8px rgba(36,29,20,.15);
  filter:none;
}
html[data-theme="light"] .home-page .wordmark-text { fill:#514637; }
html[data-theme="light"] .home-page .wordmark-mobile { color:#514637; }
html[data-theme="light"] .home-page header p,
html[data-theme="light"] .home-page footer { color:#655c4f; }
@media (max-width:680px) {
  .home-page .experience-card { grid-template-columns:72px minmax(0,1fr) auto; gap:14px; padding:16px; }
  .home-page .experience-mark,
  .home-page .mark { width:72px; height:72px; }
}
@media (max-width:380px) {
  .home-page .experience-card { gap:10px; padding:12px; }
  .home-page .copy strong { font-size:1.25rem; }
}