/* Generated by tools/build_site.py - edit there, not here. */

:root {
  /* Dawn, from Theme.kt */
  --surface: #FDFDFD;
  --raise:   #E4E5E2;
  --veil:    #DCDEDA;
  --line:    #C5C4BD;
  --outline: #ACACA5;
  --ink:     #1E1B18;
  --ink-mid: #514A43;
  --state:   #435B7A;
  --fill:    #596F8B;
  --on-fill: #FFFFFF;

  /* Arc - the dial's sweep, night to dawn */
  --night: #2F4260;
  --dusk:  #4E6480;
  --ember: #B2622D;
  --dawn:  #F6A06B;

  --body: "Figtree", "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wrap: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dawn"]) {
    --surface: #20242A;
    --raise:   #2F353D;
    --veil:    #383E46;
    --line:    #49505A;
    --outline: #61666E;
    --ink:     #EAEBED;
    --ink-mid: #C7CDD7;
    --state:   #B0C3E0;
    --fill:    #566479;
    --on-fill: #DDE9FF;
  }
}

:root[data-theme="dusk"] {
  --surface: #20242A;
  --raise:   #2F353D;
  --veil:    #383E46;
  --line:    #49505A;
  --outline: #61666E;
  --ink:     #EAEBED;
  --ink-mid: #C7CDD7;
  --state:   #B0C3E0;
  --fill:    #566479;
  --on-fill: #DDE9FF;
}

* { box-sizing: border-box; }

/* The base size goes on the ROOT, not on body. Every other size here is in rem,
   and rem resolves against the root - so with 17px on body and 16px still on
   html, `h3 { font-size: 1rem }` meant "the same as body" and rendered 16px
   against body's 17px: a feature title SMALLER than its own paragraph. */
html { scroll-behavior: smooth; font-size: 17px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ── chrome ── */

/* THE BAR SHARES THE CONTENT COLUMN'S EDGES. It was 62rem against main's 46rem,
   so the language switcher sat a clear 8rem to the right of the text it was
   meant to line up with, and the mark the same distance to the left. One width
   for both, and the masthead reads as the top of the page rather than as a
   separate strip laid over it. */
.bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; row-gap: .9rem;
  max-width: var(--wrap); margin: 0 auto; padding: 1.6rem 1.5rem .35rem;
}
/* The brand IS the lockup now - the app's mark at a size the crescent is
   visible in, and the name at headline weight. It used to be 38px and 1.2rem
   sitting next to a 2.7rem tagline, which is how the page came to introduce
   itself in the smallest type on the screen. */
.brand {
  display: flex; align-items: center; gap: clamp(.55rem, 2vw, .85rem);
  font-weight: 800; font-size: clamp(1.25rem, 4.4vw, 2.2rem);
  letter-spacing: -.03em; line-height: 1;
  color: var(--ink); text-decoration: none;
}
.brand img {
  width: clamp(38px, 9vw, 62px); height: clamp(38px, 9vw, 62px); flex: none;
}
/* The masthead now has TWO things competing for one row, and on a 360px phone -
   which is as common a width as any - the mark, the name, three language
   buttons and the theme button do not all fit. Measured at 375px: they fit with
   the 16px gap and NOTHING to spare, so the next narrower phone is over the
   edge. `.brand` cannot shrink below its icon plus the word "Gloaming", so with
   wrap on, the switcher drops to a line of its own and stays right-aligned
   rather than the two being squashed into each other. Costs nothing at any
   width where they do fit. */
.bar-end { margin-left: auto; display: flex; align-items: center; gap: .4rem; }

.langs { display: flex; gap: .15rem; }
.langs a, .theme {
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--ink-mid); background: none; border: 1px solid transparent;
  border-radius: 6px; padding: .3rem .55rem; text-decoration: none; cursor: pointer;
}
.langs a:hover, .theme:hover { color: var(--ink); border-color: var(--line); }
.langs a[aria-current="page"] { color: var(--on-fill); background: var(--fill); }
.langs a:focus-visible, .theme:focus-visible {
  outline: 2px solid var(--state); outline-offset: 2px;
}
.theme { display: inline-flex; align-items: center; gap: .35rem; }
.theme svg { width: 15px; height: 15px; }

/* The switcher says the language's OWN NAME where there is room, and falls back
   to a code where there is not - measured at 375px, where "English Українська
   Русский" clipped and pushed the theme button off the screen entirely. The
   theme button loses its word at the same breakpoint for the same reason:
   «Як у системі» is wider than all three languages together. */
.sm { display: none; }
@media (max-width: 34rem) {
  .lg { display: none; }
  .sm { display: inline; }
  .theme .theme-name { display: none; }
}

/* The masthead misses ONE ROW BY THREE PIXELS on the phone it was tested on.
   The Honor is 1256px at density 560, so 359 CSS px, and mark + name + three
   language buttons + the theme button came to 362 - the switcher dropped to a
   line of its own, correct and ugly, for the sake of 3px. Everything here gives
   back a little: the gap, the brand's floor, and the buttons' side padding,
   which is where the room actually is - .55rem either side of three buttons is
   53px of nothing. The horizontal PADDING is untouchable, because it is what
   holds the bar on the text column's edges. */
@media (max-width: 26rem) {
  .bar { gap: .7rem; }
  .bar-end { gap: .3rem; }
  .langs a, .theme { padding: .3rem .42rem; }
  .brand { font-size: 1.2rem; gap: .5rem; }
  .brand img { width: 36px; height: 36px; }
}

/* ── layout ── */

main { max-width: var(--wrap); margin: 0 auto; padding: 1.5rem 1.5rem 5rem; }
section { margin-top: 3.25rem; }

/* Smaller than it was - 2.7rem/2rem - and the floor is what matters. The root
   is 17px, so the old 2rem floor drew the headline at 34px, and «конфиденциальности»
   measures 369px there against a 311px column on a 359px phone: the Russian
   privacy title ran off the screen. 1.6rem puts that word at 295px. break-word
   is the backstop for a 320px screen, where no headline size that is still a
   headline will fit it. */
h1 {
  font-size: clamp(1.6rem, 6vw, 2.35rem); font-weight: 700;
  line-height: 1.12; letter-spacing: -.02em; margin: 0;
  text-wrap: balance; overflow-wrap: break-word;
}
h2 {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 .9rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  text-wrap: balance;
}
h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; }
p { margin: 0 0 1rem; color: var(--ink-mid); }
.lead { font-size: 1.1rem; color: var(--ink); margin-top: 1rem; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--state); text-underline-offset: 2px; }

/* ── hero ── */

.hero { padding-top: 1rem; }
.sweep {
  height: 7px; border-radius: 4px; margin: 1.75rem 0 0;
  background: linear-gradient(90deg, var(--night) 0%, var(--dusk) 42%,
                                     var(--ember) 76%, var(--dawn) 100%);
}
.cta { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.75rem; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .6rem 1.15rem; border-radius: 8px;
  background: var(--fill); color: var(--on-fill); border: 1px solid var(--fill);
}
.btn.ghost { background: none; color: var(--ink); border-color: var(--line); }
.btn:focus-visible { outline: 2px solid var(--state); outline-offset: 2px; }

/* ── screenshots ── */

.shots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem;
  margin-top: 2.5rem;
}
.shot {
  padding: 0; border: 1px solid var(--line); border-radius: 10px;
  background: none; cursor: zoom-in; overflow: hidden; display: block;
}
.shot img { width: 100%; display: block; }
.shot:focus-visible { outline: 2px solid var(--state); outline-offset: 2px; }

/* One theme's shots at a time, on the same three-state rule as the colours:
   bare :root is light, the media query covers "system", the stamp wins. */
.shot.dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dawn"]) .shot.light { display: none; }
  :root:not([data-theme="dawn"]) .shot.dark { display: block; }
}
:root[data-theme="dusk"] .shot.light { display: none; }
:root[data-theme="dusk"] .shot.dark { display: block; }
:root[data-theme="dawn"] .shot.light { display: block; }
:root[data-theme="dawn"] .shot.dark { display: none; }

@media (max-width: 34rem) { .shots { grid-template-columns: repeat(2, 1fr); } }

/* ── the viewer ── */

.viewer {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .82);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem; cursor: zoom-out;
}
.viewer img {
  max-width: min(92vw, 420px); max-height: 92vh;
  border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
/* FIT-TO-HEIGHT STOPS BEING AN ENLARGEMENT ON A SHORT WINDOW. These are phone
   screenshots at 1:2.24, and the thumbnail is ~233px wide on any viewport past
   --wrap - so 92vh only beats it above ~570px of window, and at 460px, which is
   what a docked browser pane gives you, clicking to enlarge made the picture
   SMALLER than the one clicked. Measured, not reasoned about. Below the point
   where fitting the height still buys a third again, size by WIDTH and let the
   overlay scroll; flex-start rather than centre, or the overflowing top is
   unreachable. */
@media (max-height: 780px) {
  .viewer { align-items: flex-start; overflow: auto; }
  .viewer img { max-height: none; }
}
.viewer[hidden] { display: none; }

/* The arrows are position:FIXED, not absolute. The overlay scrolls on a short
   window - see the media query above - and absolute children scroll away with
   the picture, which puts the controls somewhere off-screen exactly when the
   picture is too big to see at once. Fixed inside a fixed parent anchors to the
   viewport, so they hold still. Nothing here may carry a transform or that
   stops being true. */
.vnav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .13); color: #fff;
  border: 1px solid rgba(255, 255, 255, .26);
}
.vnav svg { width: 22px; height: 22px; }
.vnav:hover { background: rgba(255, 255, 255, .24); }
.vnav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* The picture is centred and rarely wider than 420px, so an arrow pinned to the
   VIEWPORT edge sits half a screen away from the thing it pages through. The
   script measures the image and sets --vnav-x to put them just off its edges;
   the clamp is what they fall back to before that runs. One variable does both
   sides, because a centred image has the same inset either way. */
.vnav.prev { left: var(--vnav-x, clamp(.5rem, 4vw, 2.5rem)); }
.vnav.next { right: var(--vnav-x, clamp(.5rem, 4vw, 2.5rem)); }
.viewer.solo .vnav, .viewer.solo .vcount { display: none; }
/* A PILL, not bare text. The counter is fixed and the picture scrolls under it
   whenever the picture is taller than the window - which on a phone is always -
   so "1 / 3" was landing on top of whatever the screenshot happened to say
   there. Seen on the Honor: it sat across the app's own "Bedtime starts the day
   before." Its own background is the only thing that makes it legible over an
   image it cannot predict. */
.vcount {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.1rem;
  margin: 0; z-index: 2; width: max-content;
  padding: .2rem .65rem; border-radius: 999px;
  background: rgba(0, 0, 0, .62); backdrop-filter: blur(2px);
  color: rgba(255, 255, 255, .92);
  font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ── feature list ── */

.feats { display: flex; flex-direction: column; gap: 0; }
.feat { padding: .95rem 0; border-bottom: 1px solid var(--veil); }
.feat:last-child { border-bottom: 0; }
.feat p { margin: 0; }

/* ── notes ── */

.note {
  background: var(--raise); border-radius: 9px; padding: 1.1rem 1.25rem;
}
.note p:last-child { margin-bottom: 0; }

ul { padding-left: 1.15rem; margin: 0 0 1rem; }
li { color: var(--ink-mid); margin-bottom: .5rem; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .86em; background: var(--raise); color: var(--ink);
  padding: .1em .35em; border-radius: 3px;
}

footer {
  max-width: var(--wrap); margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-mid);
}
footer a { color: var(--state); }