/* ==========================================================================
 * theme.css — dark mode + animated theme toggle. Loaded after tokens.css / shell.css.
 * Dark values live ONLY here, keyed on html[data-theme="dark"] (higher specificity than any page's :root override).
 * Palette: neutral true-black greys (no blue/purple tint), brand red lifted slightly for contrast.
 * ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --vx-bg: #111111;
  --vx-page: #0a0a0a;
  --vx-card: #171717;
  --vx-hover: #1f1f1f;
  --vx-sel: #262626;
  --vx-sel-series: #1d1d1d;
  --vx-track: #222222;
  --vx-pill-bg: #262626;

  --vx-text: #ececec;
  --vx-title: #e0e0e0;
  --vx-title-2: #cfcfcf;
  --vx-pill-text: #bdbdbd;
  --vx-muted: #9b9b9b;
  --vx-muted-2: #7d7d7d;
  --vx-muted-3: #636363;

  --vx-border: #2a2a2a;
  --vx-border-btn: #363636;
  --vx-border-card: #303030;
  --vx-row-border: #262626;
  --vx-divider: #272727;
  --vx-bar: #3a3a3a;
  --vx-dot: #8d8d8d;

  --vx-red: #e0243a;
  --vx-red-dk: #b5122a;
  --vx-fill: #c2182f;
  --vx-green: #2fd197;
  --vx-att-bg: rgba(132, 214, 52, .14);
  --vx-att-bd: rgba(132, 214, 52, .32);
  --vx-att-tx: #a6e65f;

  /* locked / plan-gated: recessed, never brighter than the active control next to it */
  --vx-lock-title: #6a6a6a;
  --vx-lock-desc: #5c5c5c;
  --vx-lock-btn-fill: #0e0e0e;
  --vx-lock-btn-stroke: #222222;
  --vx-lock-btn-icon: #4a4a4a;
  --vx-lock-btn-icon-sect: #4a4a4a;
  --vx-lock-dl-fill: #0e0e0e;
  --vx-lock-dl-stroke: #262626;
  --vx-lock-card-stroke: #202020;
  --vx-lock-attempt-fill: #3a151c;
  --vx-lock-attempt-stroke-mock: #4d1f28;
  --vx-lock-attempt-stroke-sect: #4d1f28;
  --vx-lock-attempt-icon: #c9979f;
  --vx-lock-link: #6e444b;
  --vx-lock-badge-bg: #1f1f1f;
  --vx-lock-badge-icon: #5c5c5c;
}

/* smooth cross-fade when the user flips the switch (class is added/removed by theme.js for ~450ms only) */
html.vx-theme-anim, html.vx-theme-anim *:not(.vx-theme-btn):not(.vx-theme-btn *), html.vx-theme-anim *:not(.vx-theme-btn *)::before, html.vx-theme-anim *:not(.vx-theme-btn *)::after {
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, fill .4s ease, stroke .4s ease, box-shadow .4s ease !important;
}

/* ---------- surfaces that hard-code light colours ---------- */
html[data-theme="dark"] body { background: var(--vx-page); }
html[data-theme="dark"] .vx-dock,
html[data-theme="dark"] #vx-sb .p { background: var(--vx-bg); color: var(--vx-text); box-shadow: 0 0 28px rgba(0,0,0,.55); }
html[data-theme="dark"] #vx-sb .wm,
html[data-theme="dark"] #vx-sb .nm .n { color: var(--vx-title); }
html[data-theme="dark"] #vx-sb .sr { border-color: var(--vx-border-btn); color: var(--vx-muted); }
html[data-theme="dark"] #vx-sb .k { background: var(--vx-card); color: var(--vx-text); }
html[data-theme="dark"] #vx-sb .it,
html[data-theme="dark"] #vx-sb .bk,
html[data-theme="dark"] #vx-sb .cg { color: var(--vx-pill-text); }
html[data-theme="dark"] #vx-sb .it.a { background: var(--vx-sel); color: var(--vx-text); }
html[data-theme="dark"] #vx-sb .it .ch { color: var(--vx-muted); }
html[data-theme="dark"] #vx-sb .it:active,
html[data-theme="dark"] #vx-sb .bk:active { background: var(--vx-hover); }
html[data-theme="dark"] #vx-sb .ln { background: var(--vx-divider); }
html[data-theme="dark"] .vx-dock .dk-sr { color: var(--vx-muted); }
html[data-theme="dark"] .vx-dock .dk-sr kbd { color: var(--vx-muted); border-color: var(--vx-border-btn); }
html[data-theme="dark"] .vx-dock .dk-cg { color: var(--vx-pill-text); }
html[data-theme="dark"] .vx-dock .dk-u,
html[data-theme="dark"] #vx-sb .nm .u { color: #9aa5ff; }
html[data-theme="dark"] .vx-dock .dk-wm { color: var(--vx-title); }

/* dashboard / shared cards */
html[data-theme="dark"] .db-greet { color: var(--vx-title); }
html[data-theme="dark"] .db-search,
html[data-theme="dark"] .pill { box-shadow: 0 2px 10px rgba(0,0,0,.45); }
html[data-theme="dark"] .nt-card { background: var(--vx-card); border-color: var(--vx-border-card); }
html[data-theme="dark"] .nt-title { color: var(--vx-title); }
html[data-theme="dark"] .nt-tag { background: rgba(224,36,58,.16); color: #ff6b7c; }
html[data-theme="dark"] .nt-desc { color: var(--vx-pill-text); }
html[data-theme="dark"] #vx-notif-stack .nt-card { box-shadow: 0 3px 12px rgba(0,0,0,.5); }
html[data-theme="dark"] #vx-notif-stack .nt-card:not(:first-child) { background: #131313; }
html[data-theme="dark"] .nt-x { color: #ff5a5a; }
@media (max-width: 1024px) {
  html[data-theme="dark"] .nt-card { border-color: var(--vx-border-card); box-shadow: 0 2px 12px rgba(0,0,0,.45); }
  html[data-theme="dark"] .nt-open { background: rgba(47,209,151,.14); }
  html[data-theme="dark"] .nt-x { background: rgba(255,90,90,.14); }
}

/* generic safety nets for common white / light-grey surfaces used across pages */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background-color: var(--vx-card); color: var(--vx-text); border-color: var(--vx-border-btn); }
html[data-theme="dark"] ::placeholder { color: var(--vx-muted-2); }
html[data-theme="dark"] hr { border-color: var(--vx-divider); }
html[data-theme="dark"] table { color: var(--vx-text); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] ::selection { background: rgba(224,36,58,.35); }
/* logos / avatars drawn on light artwork keep their own colours; images get a faint dim so white PNGs don't glare */
html[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(.92); }
html[data-theme="dark"] img[src*="favicon"], html[data-theme="dark"] img[src*="vertex-logo"] { filter: none; }

/* ==========================================================================
 * THEME BUTTON — plain icon in the top bar (sun ⇄ moon), sits left of the bell. Sizing / colour match the other
 * .vx-icons glyphs; the swap is a rotate + scale morph with a small stagger on the rays.
 * ========================================================================== */
.vx-theme-btn {
  --tg-ease: cubic-bezier(.5, 0, .2, 1);
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 0 -8px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--vx-text, #2f2f2f); cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .25s ease, transform .2s ease;
}
.vx-theme-btn svg { width: 20px; height: 20px; overflow: visible; display: block; }
@media (hover: hover) { .vx-theme-btn:hover { background: var(--vx-hover, #f3f3f3); } }
.vx-theme-btn:active { transform: scale(.88); }
.vx-theme-btn:focus-visible { box-shadow: 0 0 0 2px var(--vx-bg, #fff), 0 0 0 4px var(--vx-red, #bf0016); }

.vx-theme-btn .tg-sun, .vx-theme-btn .tg-moon, .vx-theme-btn .tg-star { transform-box: view-box; transform-origin: 12px 12px; }
.vx-theme-btn .tg-sun  { transition: transform .6s var(--tg-ease), opacity .35s ease; }
.vx-theme-btn .tg-moon { opacity: 0; transform: rotate(-70deg) scale(.4); transition: transform .6s var(--tg-ease), opacity .35s ease; }
.vx-theme-btn .tg-ray  { transform-box: view-box; transform-origin: 12px 12px; transition: transform .45s var(--tg-ease), opacity .3s ease; }
.vx-theme-btn .tg-core { transition: transform .5s var(--tg-ease); transform-box: view-box; transform-origin: 12px 12px; }
.vx-theme-btn .tg-star { opacity: 0; transform: scale(0); transition: opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }

/* day → night: rays pull in one after another, the sun spins away, the crescent turns in, stars pop */
html[data-theme="dark"] .vx-theme-btn .tg-sun  { transform: rotate(90deg) scale(.3); opacity: 0; }
html[data-theme="dark"] .vx-theme-btn .tg-ray  { transform: scale(.2); opacity: 0; }
html[data-theme="dark"] .vx-theme-btn .tg-core { transform: scale(1.1); }
html[data-theme="dark"] .vx-theme-btn .tg-moon { opacity: 1; transform: none; transition-delay: .08s; }
html[data-theme="dark"] .vx-theme-btn .tg-star { opacity: .95; transform: scale(1); transition-delay: .35s; }
html[data-theme="dark"] .vx-theme-btn .tg-s2 { transition-delay: .45s; }
/* night → day (default state): the sun returns with its rays unfolding in sequence */
.vx-theme-btn .tg-ray:nth-of-type(2) { transition-delay: .03s; }
.vx-theme-btn .tg-ray:nth-of-type(3) { transition-delay: .06s; }
.vx-theme-btn .tg-ray:nth-of-type(4) { transition-delay: .09s; }
.vx-theme-btn .tg-ray:nth-of-type(5) { transition-delay: .12s; }
.vx-theme-btn .tg-ray:nth-of-type(6) { transition-delay: .15s; }
.vx-theme-btn .tg-ray:nth-of-type(7) { transition-delay: .18s; }
.vx-theme-btn .tg-ray:nth-of-type(8) { transition-delay: .21s; }
html[data-theme="dark"] .vx-theme-btn .tg-ray { transition-delay: 0s; }
html[data-theme="dark"] .vx-theme-btn .tg-star { animation: vxTwinkle 3s ease-in-out 1s infinite; }
html[data-theme="dark"] .vx-theme-btn .tg-s2 { animation-duration: 3.7s; animation-delay: 1.6s; }
@keyframes vxTwinkle { 0%,100% { opacity: .95; } 50% { opacity: .25; } }

/* hover: a gentle hint of the other state (sun's rays turn a little / moon tilts) */
@media (hover: hover) {
  .vx-theme-btn:hover .tg-sun { transform: rotate(22deg); }
  html[data-theme="dark"] .vx-theme-btn:hover .tg-sun { transform: rotate(90deg) scale(.3); }
  html[data-theme="dark"] .vx-theme-btn:hover .tg-moon { transform: rotate(-14deg); }
}

/* compact: same 44px touch-target rhythm as the other top-bar icons */
@media (max-width: 1024px) {
  .vx-theme-btn { width: 44px; height: 44px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-theme-btn, .vx-theme-btn *, html.vx-theme-anim, html.vx-theme-anim * { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
}

/* ---- generated: neutral greys → matte dark equivalents (light values live as var() fallbacks in the source) ---- */
html[data-theme="dark"] {
  --vx-bd-bebebe: #565656;
  --vx-bd-cecece: #444444;
  --vx-bd-cfcfcf: #434343;
  --vx-bd-d6d9de: #383838;
  --vx-bd-dcdcdc: #343434;
  --vx-bd-dcdce0: #333333;
  --vx-bd-dedede: #323232;
  --vx-bd-e2e2e2: #2e2e2e;
  --vx-bd-e2e4e8: #2c2c2c;
  --vx-bd-e3e3e3: #2d2d2d;
  --vx-bd-e3e3e6: #2c2c2c;
  --vx-bd-e4e4e4: #2c2c2c;
  --vx-bd-e5e5e5: #2b2b2b;
  --vx-bd-e6e6e6: #2a2a2a;
  --vx-bd-e7e7ea: #272727;
  --vx-bd-e9e9e9: #262626;
  --vx-bd-eaeaea: #252525;
  --vx-bd-ececef: #222222;
  --vx-bd-eceef1: #212121;
  --vx-bd-eeeeee: #212121;
  --vx-bd-efefef: #202020;
  --vx-bd-ffffff: #0e0e0e;
  --vx-bg-cccccc: #454545;
  --vx-bg-cfcfcf: #424242;
  --vx-bg-d9dce1: #363636;
  --vx-bg-dadada: #383838;
  --vx-bg-e5e7eb: #2d2d2d;
  --vx-bg-e6e6e9: #2d2d2d;
  --vx-bg-e7e7ea: #2c2c2c;
  --vx-bg-ebebeb: #292929;
  --vx-bg-ececec: #282828;
  --vx-bg-ececee: #282828;
  --vx-bg-ececef: #272727;
  --vx-bg-eceef1: #262626;
  --vx-bg-ededed: #272727;
  --vx-bg-eef0f3: #242424;
  --vx-bg-efefef: #252525;
  --vx-bg-f0faf3: #212121;
  --vx-bg-f1f1f1: #242424;
  --vx-bg-f1f1f3: #242424;
  --vx-bg-f1f2f4: #232323;
  --vx-bg-f2f2f2: #232323;
  --vx-bg-f2f2f5: #222222;
  --vx-bg-f3f3f3: #222222;
  --vx-bg-f3f3f5: #222222;
  --vx-bg-f5f5f5: #202020;
  --vx-bg-f7f7f7: #1e1e1e;
  --vx-bg-f8f8f8: #1d1d1d;
  --vx-bg-fafafa: #1c1c1c;
  --vx-bg-ffffff: #171717;
  --vx-tx-0d0d0f: #f2f2f2;
  --vx-tx-111111: #f0f0f0;
  --vx-tx-1b1b1f: #eaeaea;
  --vx-tx-1f1f1f: #e8e8e8;
  --vx-tx-2f2f2f: #e0e0e0;
  --vx-tx-2f2f33: #e0e0e0;
  --vx-tx-303030: #e0e0e0;
  --vx-tx-3a3a3a: #dbdbdb;
  --vx-tx-3a3a3f: #dadada;
  --vx-tx-3e3e3e: #d9d9d9;
  --vx-tx-3f3f3f: #d8d8d8;
  --vx-tx-444444: #d6d6d6;
  --vx-tx-44444a: #d5d5d5;
  --vx-tx-4a4a4a: #d3d3d3;
  --vx-tx-4b4b4b: #d2d2d2;
  --vx-tx-4f4f4f: #d0d0d0;
  --vx-tx-555555: #cecece;
  --vx-tx-5a5a5a: #cbcbcb;
  --vx-tx-5a5a60: #cacaca;
  --vx-tx-5f5f5f: #c8c8c8;
  --vx-tx-6b6b6b: #c2c2c2;
  --vx-tx-6b6b70: #c2c2c2;
  --vx-tx-6f6f6f: #c0c0c0;
  --vx-tx-707070: #c0c0c0;
  --vx-tx-76767c: #bcbcbc;
  --vx-tx-7f7f7f: #b8b8b8;
  --vx-tx-8a8a8a: #969696;
  --vx-tx-8a8a92: #949494;
  --vx-tx-8f8f8f: #939393;
  --vx-tx-9a9a9a: #8d8d8d;
  --vx-tx-9a9aa0: #8c8c8c;
  --vx-tx-9a9aa2: #8c8c8c;
  --vx-tx-9f9f9f: #8a8a8a;
  --vx-tx-a0a0a0: #898989;
  --vx-tx-a9a9a9: #848484;
  --vx-tx-aaaaaa: #848484;
  --vx-tx-aeaeae: #828282;
  --vx-tx-bebebe: #797979;
  --vx-tx-c8c8c8: #737373;
  --vx-tx-c9c9c9: #737373;
  --vx-tx-cfcfcf: #707070;
  --vx-tx-d0d0d6: #6e6e6e;
}

/* ==========================================================================
 * MATTE FINISH (dark) — flat, non-reflective surfaces: no specular highlights, no glossy gradients,
 * low-sheen soft shadows, images/covers slightly de-glared, and a barely-there paper grain over everything.
 * ========================================================================== */
html[data-theme="dark"]::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(.9) contrast(.96) saturate(.92); }
html[data-theme="dark"] img[src*="favicon"], html[data-theme="dark"] img[src*="vertex-logo"] { filter: none; }
html[data-theme="dark"] .db-search, html[data-theme="dark"] .pill, html[data-theme="dark"] .nt-card { box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 6px 18px -8px rgba(0,0,0,.7); }

/* ---------- Booklets (dark): a real bookcase in a dim room — warm walnut planks, a back wall lit from above, shadows that fall
   from each plank onto the books and wall below it, paper that stays paper-coloured, and books that actually stand on the wood. ---------- */
html[data-theme="dark"] .bk-case { background: linear-gradient(180deg, #17110c, #231911); }
html[data-theme="dark"] .bk-back {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 205, 150, .075), rgba(255, 205, 150, 0) 62%),          /* light from above */
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 9%, rgba(0,0,0,0) 91%, rgba(0,0,0,.55)),         /* inner side walls of the case */
    linear-gradient(180deg, #1c1611, #14100c);                                                            /* back panel */
}
html[data-theme="dark"] .bk-base { background: linear-gradient(180deg, #2a2017, #120d09); border-top: 1px solid rgba(255, 220, 180, .07); }

/* the shadow of the plank above falls onto this shelf's wall and the tops of the books */
html[data-theme="dark"] .bk-books { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 54px, rgba(0,0,0,0) 64%, rgba(0,0,0,.34)); }
html[data-theme="dark"] .bk-shelf:first-child .bk-books { background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0) 54px, rgba(0,0,0,0) 64%, rgba(0,0,0,.34)); }

/* plank: wood top face (light catches the front edge), darker front face with a bevel, and a soft shadow thrown onto the wall below */
html[data-theme="dark"] .bk-plank i {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, rgba(0,0,0,0) 2px 9px),
    linear-gradient(180deg, #5c4634, #4b3a2b 48%, #382b20);
  box-shadow: inset 0 1px 0 rgba(255, 224, 190, .14);
}
html[data-theme="dark"] .bk-plank b {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, rgba(0,0,0,0) 2px 11px),
    linear-gradient(180deg, #3b2d21, #1f1710);
  border-top: 1px solid rgba(255, 220, 180, .16);
  border-bottom: 1px solid rgba(0,0,0,.6);
  box-shadow: 0 16px 20px -8px rgba(0,0,0,.85);
}

/* books: warm contact shadow on the wood, a faint wall shadow behind, brighter spine edge on hover */
html[data-theme="dark"] .bk { filter: drop-shadow(5px 4px 5px rgba(0,0,0,.55)); }
@media (hover: hover) { html[data-theme="dark"] .bk:hover { filter: drop-shadow(8px 11px 10px rgba(0,0,0,.65)); } }
html[data-theme="dark"] .bk-gs { background: radial-gradient(ellipse at center, rgba(0,0,0,.78), rgba(0,0,0,0) 70%); }
html[data-theme="dark"] .bk-top  { background: linear-gradient(90deg, #8c8474, #766f60); }                     /* page block seen from above: dim cream paper */
html[data-theme="dark"] .bk-side {
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px), linear-gradient(90deg, #6f6859, #4f493d);
}
html[data-theme="dark"] .bk-cv { background: #1c1815; filter: brightness(.86) contrast(.96) saturate(.88); }   /* printed cover, lit by a dim room */
html[data-theme="dark"] .bk-sh { background: linear-gradient(90deg, rgba(0,0,0,.4) 0, rgba(255,255,255,.04) 2.5%, rgba(0,0,0,0) 8%), rgba(0,0,0,.05); }

/* "coming soon": plain card-board cover */
html[data-theme="dark"] .bk-soonface { background: linear-gradient(160deg, #272019, #1d1812); border-color: #342b22; }
html[data-theme="dark"] .bk-soonface b { color: #8a7f70; }
html[data-theme="dark"] .bk-soonface em { color: #6a6054; }
html[data-theme="dark"] .bk-soonface::before { opacity: .8; }