/* The palette and the themes, and the look panel that changes them.
   One of the stylesheets index.html loads IN ORDER: a rule here may rely on coming
   after the files before it. */

/* A palette of our own rather than the client's colours. Inheriting --tg-theme-* made the
   app look different on every device: on a phone the background was pure black (OLED) and
   the cards vanished into it, on the desktop it was grey and everything looked different
   again. Now there are two schemes of our own, and exactly one fact is taken from Telegram:
   whether the person's theme is dark or light (app.js puts data-theme on <html>).

   The rule for every colour below: --ink and --on-accent are what lies ON TOP of the
   background and on top of the accent. Without them the light theme breaks in small ways,
   like a white tick on a teal button. */
:root {
  color-scheme: dark;
  --bg: #15161a;            /* not pure black: the cards are visible against it */
  --surface: #1e2026;
  --raised: #2b2e36;        /* a plate floating OVER the cards (the «saved» strip) */
  --text: #f2f3f5;
  --hint: #8b9099;
  --line: rgba(140, 145, 155, .16);
  --accent: #3ec9c0;
  --accent-ink: #3ec9c0;    /* the accent as TEXT on its own soft tint */
  --on-accent: #0d1013;     /* the text and the icons on the accent */
  --ink: #ffffff;           /* the strongest contrast to the background: a picked bar */
  --up: #ff6b6b;            /* spending has gone up */
  --down: #35c759;          /* spending has gone down */
  --warm: #f0a060;          /* past a limit: noticeable, not an alarm */
  --shadow: rgba(0, 0, 0, .45);

  /* Material of the app, in three tokens.

     `--ambient` is the ground: a flat fill makes every card look pasted on, a
     wide glow behind the top of the screen gives the same cards somewhere to
     lie. It is painted by the body and scrolls away with the header it belongs
     to — no fixed attachment, which mobile Safari renders unevenly.

     Its first layer is a strip of the plain background over the top 120px. The
     webview starts right under the Telegram header, so without it the brightest
     row of the glow lies against that header and the glow reads as a band cut
     off with a ruler. The mask makes it swell out of the header instead.

     `--edge` and `--lift` are the two halves of «a card, not a rectangle»: a
     hairline that separates it from the ground and a shadow that puts it above.
     Both go into box-shadow, so nothing moves by a pixel when they are added. */
  --bg-0: rgba(21, 22, 26, 0);   /* the same --bg with zero opacity */
  --ambient:
    linear-gradient(180deg, var(--bg) 0, var(--bg-0) 120px),
    radial-gradient(132% 74% at 50% 6%,
      /* The glow is the accent's own: it follows the colour chosen in the profile. */
      color-mix(in srgb, var(--accent) 17%, transparent) 0%,
      color-mix(in srgb, var(--accent) 9%, transparent) 36%,
      color-mix(in srgb, var(--accent) 4%, transparent) 62%,
      transparent 90%);
  --tray: #0a0b0e;               /* the layer UNDER a card: deeper than the background */
  --edge: inset 0 0 0 1px var(--line);
  --lift: 0 10px 24px -16px var(--shadow);
  /* The accent as a material: the same paint, lighter at the top, deeper below. */
  --accent-face: linear-gradient(155deg, #4ad9cf 0%, #2fb0a8 100%);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* The corner radii as one family. The rule is simple: a nested radius = the outer one
     minus the gap between them. Then the corners of nested elements run parallel to the
     card's corners rather than arguing with them — and that is what the eye catches on in a
     tidy interface. */
  --r-sheet: 22px;   /* a sheet */
  --r-card: 16px;    /* a list row, a full-width button */
  --r-field: 14px;   /* an input field, a key */
  --r-inner: 10px;   /* an icon inside a row: 16 − 6 of padding */
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f3f6;
  --surface: #ffffff;
  --raised: #ffffff;
  --text: #16181d;
  --hint: #6c717b;
  --line: rgba(20, 22, 28, .10);
  --accent: #0f9d94;        /* darker than the dark version: white on it must reach 3:1 */
  --accent-ink: #0a736c;    /* text on the soft tint: #12a79e there is only 2.7:1 */
  --on-accent: #ffffff;
  --ink: #16181d;
  --up: #e0483f;
  --down: #1f9d4d;
  --warm: #b85a22;
  --shadow: rgba(20, 25, 40, .16);
  --bg-0: rgba(242, 243, 246, 0);
  --ambient:
    linear-gradient(180deg, var(--bg) 0, var(--bg-0) 120px),
    radial-gradient(132% 74% at 50% 6%,
      color-mix(in srgb, var(--accent) 20%, transparent) 0%,
      color-mix(in srgb, var(--accent) 10%, transparent) 36%,
      color-mix(in srgb, var(--accent) 5%, transparent) 62%,
      transparent 90%);
  --tray: #dcdfe6;
  --accent-face: linear-gradient(155deg, #17bdb2 0%, #0d9089 100%);
}

/* The colours above are the defaults, painted when nothing else is known. The person's
   choice — the accent, the second colour, the ground of each theme — is computed by
   palette.js and set as the same variables on <html> (settings.js, look.js). */
/* The look panel (settings.js, openLook): low, over the live screen, three stages turned
   by a swipe sideways. The screen behind is not dimmed — it is what is being judged. */
/* Doubled class: this sits above the base rule, which would otherwise win the tie. */
.sheet__backdrop.sheet__backdrop--clear.is-open { background: transparent; }
.sheet--look {
  /* With no dimming, the panel needs its own edge against the screen above it. */
  box-shadow: 0 -14px 34px -18px var(--shadow), 0 -1px 0 var(--line), 0 60px 0 0 var(--surface);
}
.sheet--look .sheet__title { padding-bottom: 12px; }
/* Three equal columns, each name centred in its own: the middle stage sits exactly in
   the middle of the panel. As one centred group the names are uneven («Фон» is short,
   «Сигнал» long), and the middle one — and the whole row with it — looked shifted left. */
.look__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sheet--look .sheet__titletext { overflow: visible; }
.look__stage {
  position: relative;
  justify-self: center;
  white-space: nowrap;
  padding: 4px 0 6px;
  border: 0;
  background: none;
  color: var(--hint);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  transition: color .2s ease;
}
.look__stage.is-current { color: var(--text); }
/* Where you are: a short stroke of the accent under the stage's name. */
.look__stage.is-current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 16px;
  height: 3px;
  margin-left: -8px;
  border-radius: 2px;
  background: var(--accent);
}
.look__undo.is-hidden { visibility: hidden; pointer-events: none; }
.look__viewport {
  overflow: hidden;
  transition: height .25s ease;
}
/* The gap keeps a page's edge clear of its neighbour: the ring around a chosen square
   reaches 4px outside it and showed as a stray bar at the edge of the page in view. */
.look__track {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1);
}
/* The rows and the sliders set their own display — `hidden` must still win. */
.look__page [hidden] { display: none; }
.look__page {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 2px;
}
/* Dark · Auto · Light — «Auto» in the middle, between the two it switches between. */
/* Doubled class: `.seg` (flex) comes later in the file and would win the tie. */
.seg.look__themes { display: grid; grid-template-columns: 35fr 30fr 35fr; }
.look__themes .seg__item { min-width: 0; padding: 8px 0; font-size: 14px; }
.look__label { font-size: 12px; color: var(--hint); margin: 0 2px 6px; }
.look__own { display: flex; flex-direction: column; gap: 10px; }
/* A limit overspent: where the signal colour goes — on the main screen it is nowhere. */
.look__sample {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  padding: 10px 12px 12px;
  border-radius: var(--r-field);
  background: var(--bg);
  font-size: 14px;
}
.look__samplesum { color: var(--hint); font-variant-numeric: tabular-nums; }
.look__samplesum b { color: var(--warm); font-weight: 600; }
.look__samplebar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--warm); }
/* Equal cells across the panel: the same square size in every row, whatever the width. */
.accent-swatches {
  display: grid;
  grid-template-columns: repeat(var(--cells, 6), minmax(0, 1fr));
  gap: 4px;
}
.accent-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
  border: 0;
  background: none;
  color: var(--hint);
  font: inherit;
  min-width: 0;
}
.accent-swatch,
.ground-swatch {
  position: relative;
  width: 100%;
  max-width: 40px;
  aspect-ratio: 1;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
  transition: transform .12s ease, box-shadow .12s ease;
}
/* The tone for the light theme and the one for the dark, split along the diagonal. */
.accent-swatch {
  background: linear-gradient(135deg, var(--sw-light, #0f9d94) 50%, var(--sw-dark, #3ec9c0) 50%);
}
/* «Your own» before it is chosen: every hue at once, and a plus. */
.accent-swatch.is-own {
  background: conic-gradient(from 200deg, #ff5f6d, #ffc371, #b5e655, #36d1c4, #5b86e5, #b06ab3, #ff5f6d);
}
.accent-swatch.is-own::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
/* A ground: the page with a card lying on it. */
/* The edge is stronger than a colour square's: a dark ground on the dark card, or a white
   one on the white, would otherwise melt into the card around it. */
.ground-swatch {
  overflow: hidden;
  background: var(--gs-bg, #15161a);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent);
}
.ground-swatch::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 30%;
  height: 40%;
  border-radius: 5px;
  background: var(--gs-card, #1e2026);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.accent-cell.is-current .accent-swatch,
.accent-cell.is-current .ground-swatch {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
}
.accent-cell:active .accent-swatch,
.accent-cell:active .ground-swatch { transform: scale(.92); }
/* No ellipsis: «Эспре…» names nothing. The longest names («Оранжевый» in bold) run a
   pixel or two into the gap between cells — measured at 375px, the narrowest phone
   in use; below that the type steps down. */
.accent-name {
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 359px) { .accent-name { font-size: 9px; } }
.accent-cell.is-current .accent-name { color: var(--text); font-weight: 600; }

/* The sliders of one's own colour: hue and saturation (settings.js, slider). */
.picker__rail {
  --x: 0;
  position: relative;
  height: 28px;
  border-radius: 14px;
  touch-action: none;           /* the finger moves the knob, not the page or the sheet */
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
}
.picker__rail:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.picker__knob {
  position: absolute;
  top: 0;
  left: calc(14px + (100% - 28px) * var(--x));
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff, 0 1px 4px rgba(0, 0, 0, .5);
  pointer-events: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  /* manipulation removes the double tap as a zoom gesture (and the 300 ms delay before a
     click along with it). The meta tag is not enough: WebKit does not obey it everywhere. */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  /* clearance at the bottom for the tab bar and the «+» button above it */
  padding: 0 0 calc(150px + var(--safe-bottom));
  font: 15px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg);
  background-image: var(--ambient);
  background-repeat: no-repeat;
  background-size: 100% 640px;
  color: var(--text);
  overscroll-behavior-y: contain;   /* so the scroll does not drag the app itself */
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }