/* Kalender design tokens for the signed-in app and the public account pages.
   Same palette and type as the landing page (landing.css): graphite ink on a light
   desk, dark cards in dark mode, calendar red only on date marks, amber only for
   "check this", the highlighter only for what the AI found. The system decides
   the theme unless the visitor picked one (theme.js sets html[data-theme]). */
:root {
  color-scheme: light;
  --desk: #f1f2f4;
  --bar: rgb(241 242 244 / .88);
  --surface: #ffffff;
  --surface-2: #f6f7f8;
  --field: #ffffff;
  --hover: rgb(29 32 38 / .06);
  --ink: #1d2026;
  --pencil: #585f6a;
  --rule: #d8dbe0;
  --control-edge: #80878f;
  --mark-bg: #ffe45e;
  --mark-text: inherit;
  --red: #d4352b;
  --on-red: #ffffff;
  --check: #8a4f00;
  --check-bg: #fff3d1;
  --ok: #1f6f3c;
  --ok-bg: #e3f4e8;
  --error: #b42318;
  --error-bg: #fdecea;
  --button: #1d2026;
  --button-text: #ffffff;
  --button-hover: #363a43;
  --focus: #2f6feb;
  --shadow-card: 0 0 0 1px rgb(29 32 38 / .07), 0 1px 2px rgb(29 32 38 / .05);
  --shadow-pop: 0 0 0 1px rgb(29 32 38 / .06), 0 24px 60px -20px rgb(29 32 38 / .35);
  --backdrop: rgb(29 32 38 / .45);

  --display: Bahnschrift, "DIN Alternate", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --narrow: Bahnschrift, "DIN Condensed", "Arial Narrow", sans-serif;
  --text: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --desk: #131519; --bar: rgb(19 21 25 / .85); --surface: #1e2228; --surface-2: #262b32; --field: #181b20;
    --hover: rgb(255 255 255 / .06); --ink: #eceef1; --pencil: #a3aab5; --rule: #2c3139; --control-edge: #6b7380;
    --mark-bg: rgb(255 214 10 / .22); --mark-text: #ffe27a;
    --check: #f0b35e; --check-bg: #2e2a22; --ok: #7fd49a; --ok-bg: #1f2e25; --error: #ff8f80; --error-bg: #3a2220;
    --button: #eceef1; --button-text: #15171b; --button-hover: #ffffff; --focus: #7fa6ff;
    --shadow-card: 0 0 0 1px rgb(255 255 255 / .06), 0 1px 2px rgb(0 0 0 / .4);
    --shadow-pop: 0 0 0 1px rgb(255 255 255 / .08), 0 24px 60px -20px rgb(0 0 0 / .7);
    --backdrop: rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --desk: #131519; --bar: rgb(19 21 25 / .85); --surface: #1e2228; --surface-2: #262b32; --field: #181b20;
  --hover: rgb(255 255 255 / .06); --ink: #eceef1; --pencil: #a3aab5; --rule: #2c3139; --control-edge: #6b7380;
  --mark-bg: rgb(255 214 10 / .22); --mark-text: #ffe27a;
  --check: #f0b35e; --check-bg: #2e2a22; --ok: #7fd49a; --ok-bg: #1f2e25; --error: #ff8f80; --error-bg: #3a2220;
  --button: #eceef1; --button-text: #15171b; --button-hover: #ffffff; --focus: #7fa6ff;
  --shadow-card: 0 0 0 1px rgb(255 255 255 / .06), 0 1px 2px rgb(0 0 0 / .4);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / .08), 0 24px 60px -20px rgb(0 0 0 / .7);
  --backdrop: rgb(0 0 0 / .6);
}

/* Subject colours: light hue by default, the brighter dark hue in dark mode.
   Elements get --c (light) and --cd (dark) from their subject. */
[style*="--c:"] { --cal: var(--c); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [style*="--c:"] { --cal: var(--cd, var(--c)); } }
:root[data-theme="dark"] [style*="--c:"] { --cal: var(--cd, var(--c)); }

/* Shared base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--desk); color: var(--ink); font: 400 14px/1.5 var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
input, textarea, select, button { font: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
mark { color: var(--mark-text); background: var(--mark-bg); padding: 0 .12em; border-radius: .2em; }

/* The theme toggle, as on the landing page */
.theme-toggle { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pencil); cursor: pointer; visibility: hidden; }
[data-theme-ready] .theme-toggle { visibility: visible; }
.theme-toggle::before { content: ""; position: absolute; inset: -4px; }
.theme-toggle:hover { background: var(--hover); color: var(--ink); }
.theme-toggle[aria-pressed="true"] { color: var(--ink); }
.theme-toggle[aria-pressed="true"] path { fill: currentColor; }

/* The language switch (i18n.js): ET | EN */
.lang-switch { display: inline-flex; align-items: center; gap: .125rem; }
.lang-switch button, .lang-switch a { min-width: 2rem; padding: .3rem .4rem; border: 0; border-radius: 6px; background: transparent; color: var(--pencil); font: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; line-height: 1; text-align: center; text-decoration: none; cursor: pointer; }
.lang-switch button:hover, .lang-switch a:hover { background: var(--hover); color: var(--ink); }
.lang-switch [aria-current="true"] { color: var(--ink); background: var(--hover); cursor: default; }
/* A page shown in Estonian stays hidden until its static English text is replaced. */
html[data-i18n-pending] body { visibility: hidden; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }