/* Suppli mini-app — the stats screen.
 *
 * Theme: Telegram declares its palette as CSS variables on the document
 * root, so the whole light/dark story is plain CSS with no JS. EVERY
 * variable carries a fallback — older clients do not declare all of them,
 * and an unset one means black text on black (features/MINIAPP.md §4.0.1d).
 *
 * System font stack only: no @font-face, no @import. A web font is a
 * third-party request carrying the viewer's IP and the URL of a health
 * page (§5.3).
 */

:root {
	color-scheme: light dark;

	--fg: var(--tg-theme-text-color, #000000);
	--bg: var(--tg-theme-bg-color, #ffffff);
	--hint: var(--tg-theme-hint-color, #707579);
	--accent: var(--tg-theme-button-color, #2481cc);
	--accent-fg: var(--tg-theme-button-text-color, #ffffff);
	--panel: var(--tg-theme-secondary-bg-color, #f1f1f1);
}

/* The fallbacks have to move TOGETHER, not just exist. Telegram added
   these variables across several Bot API versions (bg/text in 6.0,
   secondary_bg in 6.1), so on an older client in a dark theme --bg and
   --fg arrive dark from Telegram while --panel keeps its light default:
   near-white on white, and the first thing it ruins is .notice — the
   error screen, i.e. the one moment the user needs to read something.
   Per-variable fallbacks cannot fix that; only a matching dark set can. */
@media (prefers-color-scheme: dark) {
	:root {
		--fg: var(--tg-theme-text-color, #ffffff);
		--bg: var(--tg-theme-bg-color, #17212b);
		--hint: var(--tg-theme-hint-color, #7d8b99);
		--accent: var(--tg-theme-button-color, #5288c1);
		--accent-fg: var(--tg-theme-button-text-color, #ffffff);
		--panel: var(--tg-theme-secondary-bg-color, #232e3c);
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 16px 16px calc(32px + env(safe-area-inset-bottom, 0px));
	font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: var(--bg);
	color: var(--fg);
	-webkit-text-size-adjust: 100%;
}

.shell {
	max-width: 640px;
	margin: 0 auto;
}

.head {
	margin-bottom: 12px;
}

.title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
}

.range {
	margin: 2px 0 0;
	color: var(--hint);
	font-size: 13px;
}

/* Period switcher. Horizontally scrollable rather than wrapped: three
   chips fit on any phone, but a longer label in another language must not
   push the layout into two ragged lines. */
.periods {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin: 0 0 16px;
	padding-bottom: 2px;
	scrollbar-width: none;
}

.periods::-webkit-scrollbar {
	display: none;
}

.chip {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 6px 16px;
	border: 0;
	border-radius: 16px;
	background: var(--panel);
	color: var(--fg);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.chip[aria-pressed="true"] {
	background: var(--accent);
	color: var(--accent-fg);
}

.chip[data-locked="true"] {
	opacity: 0.6;
}

.rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.row {
	padding: 10px 0;
	border-bottom: 1px solid var(--panel);
}

.row:last-child {
	border-bottom: 0;
}

.name {
	display: block;
	margin-bottom: 6px;
	word-break: break-word;
}

.dose {
	color: var(--hint);
}

.meter {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Width arrives from JS as the --pct custom property.
   NOT for CSP reasons: style-src governs <style> blocks and style
   attributes in markup, while CSSOM assignment from a script is allowed —
   el.style.width would have worked too. The custom property is here so the
   geometry (what "percent" means, clamping, the transition if one is ever
   added) stays in this file, and JS only supplies a number. */
.track {
	position: relative;
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: var(--panel);
	overflow: hidden;
}

.fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--pct, 0%);
	background: var(--accent);
}

.figure {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: var(--hint);
}

.total {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 2px solid var(--panel);
	font-weight: 600;
}

.motivation {
	margin-top: 10px;
	color: var(--hint);
	font-size: 13px;
}

.notice {
	margin-top: 20px;
	padding: 14px;
	border-radius: 10px;
	background: var(--panel);
}

.notice-text {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
}

.link {
	margin-top: 10px;
	min-height: 44px;
	padding: 10px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--accent);
	color: var(--accent-fg);
	font: inherit;
	cursor: pointer;
}

/* Skeleton: shape without content. No animation by default — a pulsing
   screen on a 1-2s cold start is noise, and prefers-reduced-motion users
   would have to be excluded from it anyway. */
.skeleton .bar {
	display: block;
	height: 14px;
	border-radius: 4px;
	background: var(--panel);
}

.skeleton:nth-child(2) .bar {
	width: 72%;
}

.skeleton:nth-child(3) .bar {
	width: 54%;
}

/* Legal footer: the 18+ line and both policy links (features/MINIAPP.md
   §4.6). Quiet — hint colour, small — but never hidden behind a tap: the
   whole point of the block is that the two policies are visible on the
   screen itself, so it sits in the flow at the bottom rather than in a
   collapsed section. */
.legal {
	margin-top: 28px;
	padding-top: 12px;
	border-top: 1px solid var(--panel);
	color: var(--hint);
	font-size: 12px;
}

.legal-age {
	margin: 0;
}

.legal-links {
	margin: 6px 0 0;
}

/* Each link on its own line: the two titles are long in both languages
   ("Политика обработки данных о здоровье"), and side by side they wrap
   into an unreadable run. min-height keeps the tap target usable. */
.legal-link {
	display: block;
	min-height: 24px;
	color: var(--accent);
}

[hidden] {
	display: none !important;
}