/* ---------- Dark theme: "night coastline" ----------
   Same coastline, same blue; the shore goes deep navy. Active when <html data-theme="dark">, which an inline
   script sets before paint from the visitor's choice (localStorage) or, without a choice, from the system. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0a1420;   /* page */
  --mist: #111e2e;     /* tinted band, cards, fields */
  --surface-2: #17283c;
  --line: #22344a;
  --ink: #e9eff6;      /* 16:1 on ground */
  --ink-2: #a7b6c8;    /* 9:1 on ground, 8:1 on mist */
  --blue-deep: #4fb3e8; /* the interactive blue lightens on dark: 7.7:1 as text */
  --primary-shadow: rgba(0, 0, 0, 0.55);
  --prose: #c9d5e3;
}

/* text selection and things drawn in solid white on the light theme */
:root[data-theme="dark"] ::selection { background: #1b4f73; color: #fff; }
:root[data-theme="dark"] .skip { background: var(--ink); color: var(--ground); }

/* the splashes go a deep ocean blue, slightly see-through over the navy ground (Blaž picked it) */
:root[data-theme="dark"] .intro__blob path,
:root[data-theme="dark"] .call__blob path { fill: #033557d4; }
:root[data-theme="dark"] .call__panel { background-color: transparent; }
@media (max-width: 700px) { :root[data-theme="dark"] .call__panel { background: #033557d4; } }

/* logo: white wordmark on navy */
.logo-dark { display: none !important; }
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }

/* header: dark glass after scroll, ink panel for the mobile menu */
:root[data-theme="dark"] .bar::before { background: rgba(10, 20, 32, 0.76); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 32px -20px rgba(0, 0, 0, 0.8); }
:root[data-theme="dark"] .bar__nav { background: transparent; }
@media (max-width: 1199px) {
  :root[data-theme="dark"] .bar__nav { background: var(--mist); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -20px rgba(0, 0, 0, 0.8); }
  :root[data-theme="dark"] .lang { border-top-color: var(--line); }
}
:root[data-theme="dark"] .lang { border-left-color: var(--line); }
@media (hover: hover) and (pointer: fine) { :root[data-theme="dark"] .menu-toggle:hover { background: rgba(255, 255, 255, 0.08); } }

/* cards and panels */
:root[data-theme="dark"] .pillars__card {
  background: rgba(17, 30, 46, 0.86);
  outline-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
:root[data-theme="dark"] .drop--octopus { background: var(--surface-2); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8); }
:root[data-theme="dark"] .drop-chip { background: rgba(10, 20, 32, 0.72); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px -10px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .post .drop, :root[data-theme="dark"] .post-row .drop { background: var(--surface-2); }
:root[data-theme="dark"] .cover { background: var(--surface-2); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 30px 60px -28px rgba(0, 0, 0, 0.9); }
:root[data-theme="dark"] .share a, :root[data-theme="dark"] .share button { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }

/* light-blue fills carry dark numbers, not white ones */
:root[data-theme="dark"] .rows li.is-current .rows__n { color: var(--ground); }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .rows li:hover .rows__n { color: var(--ground); }
  :root[data-theme="dark"] .button--outline:hover { color: var(--ground); }
}
:root[data-theme="dark"] .button--white { color: #1b72a6; }

/* article text */
:root[data-theme="dark"] .prose p, :root[data-theme="dark"] .prose ul, :root[data-theme="dark"] .prose ol { color: var(--prose); }

/* dialog and form */
:root[data-theme="dark"] .dialog { background: var(--mist); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -24px rgba(0, 0, 0, 0.9); }
:root[data-theme="dark"] .dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
:root[data-theme="dark"] .dialog__close { background: var(--surface-2); }
:root[data-theme="dark"] .field input, :root[data-theme="dark"] .field textarea { background: var(--ground); border-color: var(--line); }
:root[data-theme="dark"] .field input:focus-visible, :root[data-theme="dark"] .field textarea:focus-visible { background: var(--ground); border-color: var(--blue-deep); }
:root[data-theme="dark"] .field__error, :root[data-theme="dark"] .form__status { color: #ff8a80; }
:root[data-theme="dark"] .field[data-invalid] input, :root[data-theme="dark"] .field[data-invalid] textarea { border-color: #ff8a80; }

/* the soft light patch under the pillars card (a white radial in the light theme) */
:root[data-theme="dark"] .pillars::before { opacity: 0.25; }

/* ---------- Theme switch: a 44px sun/moon button beside the menu ---------- */
.theme-toggle {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: color 220ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}
.theme-toggle:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { background: rgba(14, 27, 44, 0.06); } }
:root[data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.theme-toggle svg { position: absolute; width: 22px; height: 22px; transition: transform 300ms var(--ease-out), opacity 200ms ease; }
.theme-toggle .i-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root[data-theme="dark"] .theme-toggle .i-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
/* white on the blue blob / splash, ink on the glass bar */
.bar:not(.is-scrolled) .theme-toggle { color: #fff; }
@media (hover: hover) and (pointer: fine) { .bar:not(.is-scrolled) .theme-toggle:hover { background: rgba(255, 255, 255, 0.14); } }
.bar:not(.is-scrolled) .theme-toggle:focus-visible { outline-color: #fff; }

/* placement: in the menu next to the language pill from 1200px, beside the hamburger below that */
.theme-toggle--nav { display: none; }
@media (min-width: 1200px) {
  .theme-toggle--bar { display: none; }
  .theme-toggle--nav { display: inline-grid; margin-left: -14px; }
  .bar.is-scrolled .theme-toggle--nav { color: var(--ink); }
}
@media (max-width: 1199px) { .theme-toggle--bar { order: 3; margin-left: 8px; } .menu-toggle { order: 4; margin-left: 0; } .bar__nav { order: 5; } }
@media (max-width: 520px) { .theme-toggle--bar { margin-left: auto; } }

/* the colour change itself: a short cross-fade, never on first paint */
:root.theme-anim, :root.theme-anim *, :root.theme-anim *::before { transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease, fill 260ms ease, box-shadow 260ms ease !important; }
@media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: opacity 160ms ease; transform: none !important; } }