/* ── Fonts (self-hosted, Polish glyphs in latin-ext) ─────────────────────── */
@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --font-display: "Bricolage", ui-rounded, system-ui, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, sans-serif;

  --ink-0: oklch(13.5% 0.022 268);
  --ink-1: oklch(17.5% 0.026 268);
  --ink-2: oklch(21% 0.03 268);
  --ink-3: oklch(27% 0.034 268);
  --line: oklch(100% 0 0 / 0.07);
  --line-strong: oklch(100% 0 0 / 0.13);

  --text: oklch(96% 0.012 268);
  --text-2: oklch(77% 0.025 268);
  --text-3: oklch(59% 0.03 268);
  --on-color: oklch(19% 0.03 268);

  --moon: oklch(87% 0.06 272);
  --moon-strong: oklch(76% 0.11 274);
  --ember: oklch(80% 0.15 62);
  --ember-deep: oklch(69% 0.18 42);
  --free: oklch(80% 0.15 152);
  --maybe: oklch(87% 0.14 94);
  --busy: oklch(69% 0.16 24);
  --danger: oklch(69% 0.19 26);

  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 22px;
  --shadow: 0 14px 34px -16px oklch(0% 0 0 / 0.7), 0 2px 6px -2px oklch(0% 0 0 / 0.35);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: linear(0, 0.013 0.6%, 0.05 1.2%, 0.2 2.6%, 0.43 4.3%, 0.75 6.8%, 0.96 9.2%, 1.07 11.6%, 1.1 13.6%, 1.09 16.2%, 1.03 20.4%, 0.99 25.8%, 1 36%, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --tabbar-h: 66px;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink-0);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100dvh;
  font: 400 16px/1.5 var(--font-body);
  color: var(--text);
  background: var(--ink-0);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  font-variant-numeric: tabular-nums;
}

/* Night sky: aurora glow + sparse stars. Fixed pseudo-elements, because iOS ignores background-attachment: fixed. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 22px 38px, oklch(100% 0 0 / 0.55), transparent),
    radial-gradient(1px 1px at 140px 92px, oklch(100% 0 0 / 0.35), transparent),
    radial-gradient(1.5px 1.5px at 210px 20px, oklch(100% 0 0 / 0.5), transparent),
    radial-gradient(1px 1px at 82px 160px, oklch(100% 0 0 / 0.3), transparent),
    radial-gradient(1px 1px at 250px 180px, oklch(100% 0 0 / 0.4), transparent);
  background-size: 280px 220px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 45%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(110% 55% at 88% -12%, oklch(42% 0.1 290 / 0.42), transparent 62%),
    radial-gradient(80% 45% at -12% -4%, oklch(40% 0.08 225 / 0.32), transparent 58%),
    radial-gradient(90% 40% at 50% 115%, oklch(32% 0.07 50 / 0.18), transparent 70%),
    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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; -webkit-tap-highlight-color: transparent; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.haptic {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0.01;
  pointer-events: none;
}

/* ── App frame ──────────────────────────────────────────────────────────── */
.app {
  max-width: 34rem;
  min-height: 100dvh;
  margin-inline: auto;
  padding:
    calc(var(--safe-top) + 10px)
    max(16px, var(--safe-right))
    calc(var(--safe-bottom) + var(--tabbar-h) + 32px)
    max(16px, var(--safe-left));
}
.app[data-screen="login"], .app[data-screen="boot"] { padding-bottom: calc(var(--safe-bottom) + 16px); }

@media (min-width: 48rem) {
  .app { max-width: 40rem; padding-inline: 28px; padding-top: calc(var(--safe-top) + 28px); }
}

.boot { display: grid; place-items: center; min-height: 80dvh; }
.boot__icon { width: 44px; height: 44px; fill: none; stroke: var(--moon); stroke-width: 1.6; animation: breathe 1.8s ease-in-out infinite; }

.rise { animation: rise 0.7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* ── Motion ─────────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes breathe { 50% { opacity: 0.45; transform: scale(0.92); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes pulse-ring { from { box-shadow: 0 0 0 0 var(--pulse, oklch(80% 0.15 152 / 0.5)); } to { box-shadow: 0 0 0 8px transparent; } }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(0); } 40% { transform: scale(1.06) rotate(-3deg); } 70% { transform: scale(0.97) rotate(2deg); } }
@keyframes vt-fade-out { to { opacity: 0; transform: translateY(-6px) scale(0.99); } }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(12px) scale(0.99); } }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-18%); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(18%); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-18%); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(18%); } }

::view-transition-group(*) { animation-duration: 0.38s; animation-timing-function: var(--ease-out); }
.view { view-transition-name: view; }
::view-transition-old(view) { animation: 0.16s var(--ease-out) both vt-fade-out; }
::view-transition-new(view) { animation: 0.36s var(--ease-out) 0.04s both vt-fade-in; }

/* In-view changes (month, mode): keep the page still and animate only the calendar board. */
html[data-vt-dir]::view-transition-old(view) { display: none; }
html[data-vt-dir]::view-transition-new(view) { animation: none; }

html[data-vt-dir="next"]::view-transition-old(month) { animation: 0.22s var(--ease-out) both vt-out-left; }
html[data-vt-dir="next"]::view-transition-new(month) { animation: 0.34s var(--ease-out) both vt-in-right; }
html[data-vt-dir="prev"]::view-transition-old(month) { animation: 0.22s var(--ease-out) both vt-out-right; }
html[data-vt-dir="prev"]::view-transition-new(month) { animation: 0.34s var(--ease-out) both vt-in-left; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after,
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}