/* Rudrapur City · "धूप" (sunshine) design system (docs/SPEC-V3.md §1). Components use tokens only; no external requests.
   Warm white ground, one sun-yellow brand, six pastel tones used systematically by category, rounded everything,
   soft warm depth, Baloo 2 for display and Noto Sans Devanagari for reading. Light and dark designed with equal care. */
@layer reset, tokens, base, layout, components, utilities;
/* Metric fallbacks so text keeps its line breaks when the web fonts swap in. Noto Sans Devanagari is also the local
   Devanagari face on Android and macOS, so the body fallback needs no size correction. Baloo 2 is a little wider and
   rounder than Noto Bold, so the display fallback is nudged up. A local() name that is not installed is skipped. */
@font-face{font-family:'Noto Fallback';font-weight:400 700;size-adjust:100%;src:local('NotoSansDevanagari-Regular'),local('Noto Sans Devanagari Regular'),local('KohinoorDevanagari-Regular'),local('Kohinoor Devanagari Regular'),local('Nirmala UI'),local('NirmalaUI')}
@font-face{font-family:'Baloo Fallback';font-weight:700 800;size-adjust:104%;src:local('NotoSansDevanagari-Bold'),local('Noto Sans Devanagari Bold'),local('KohinoorDevanagari-Bold'),local('Kohinoor Devanagari Bold'),local('Nirmala UI Bold'),local('NirmalaUI-Bold'),local('NotoSansDevanagari-Regular')}
/* reset */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul[class], ol[class], nav ul { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
img, video, canvas { display: block; max-inline-size: 100%; block-size: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
}
/* tokens (docs/SPEC-V3.md §1.1) */
@layer tokens {
:root {
 color-scheme: light;
 --ground: #FFFDF7; --surface: #FFFFFF; --surface-2: #FFF4D6;
 --ink: #1F1B12; --ink-2: #4A4436; --muted: #7A7260; --line: #EFE6CC;
 --sun: #FFC700; --sun-deep: #F5A800; --sun-ink: #1F1B12;
 --sky: #DFF1FF; --sky-ink: #0F5FA8; --mint: #DDF5E8; --mint-ink: #0B7A4B; --peach: #FFE7DA; --peach-ink: #C24B21;
 --lilac: #ECE8FF; --lilac-ink: #5B3FD1; --rose: #FFE3EE; --rose-ink: #C2285C;
 --red: #D6382E; --on-red: #FFFFFF; --focus: #0F5FA8;
 --on-ink: #FFFFFF; --scrim: rgb(31 27 18 / .5); --disc: rgb(255 255 255 / .62);
 /* derived names older views still use */
 --green: var(--mint-ink); --orange: var(--peach-ink); --link: var(--sky-ink);
 --board: var(--sun); --board-ink: var(--sun-ink); --rule: var(--line);
 --shadow: 0 8px 24px rgb(80 60 0 / .08); --shadow-lift: 0 14px 32px rgb(80 60 0 / .14); --shadow-up: 0 -8px 24px rgb(80 60 0 / .1);
 --r-card: 16px; --r-img: 14px; --r-input: 12px; --r-pill: 999px;

 --font-display: 'Baloo 2', 'Baloo Fallback', 'Noto Sans Devanagari', system-ui, sans-serif;
 --font-body: 'Noto Sans Devanagari', 'Noto Fallback', 'Nirmala UI', 'Kohinoor Devanagari', system-ui, sans-serif;
 --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
 --t-xs: 13px; --t-sm: 15px; --t-md: 17px; --t-lg: 20px; --t-xl: 24px; --t-2xl: 30px;
 --t-3xl: clamp(32px, 7vw, 46px); --t-hero: clamp(30px, 8vw, 44px);

 --gutter: 16px; --max: 1180px; --head-h: 60px; --tab-h: 68px;
 --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
 --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
 --pad-l: max(var(--gutter), var(--safe-l)); --pad-r: max(var(--gutter), var(--safe-r)); --pad-r-tool: max(calc(var(--gutter) - 8px), var(--safe-r));
 --wrap: calc(var(--max) + 2 * var(--gutter));
}
@media (min-width: 480px) { :root { --gutter: 20px; } }
@media (min-width: 1024px) { :root { --head-h: 68px; } }
@media (prefers-color-scheme: dark) {
 :root:not([data-theme="light"]) { color-scheme: dark; --ground: #17140E; --surface: #211D14; --surface-2: #2B2517; --ink: #FBF6E8; --ink-2: #D9D1BD; --muted: #A79E88; --line: #3A3221; --sky: #12304A; --sky-ink: #8CCBFF; --mint: #11342A; --mint-ink: #6FE0A8; --peach: #3E2418; --peach-ink: #FFA07A; --lilac: #2A2547; --lilac-ink: #C3B5FF; --rose: #40202D; --rose-ink: #FF9BC0; --red: #FF7B70; --on-red: #1F1B12; --focus: #FFC700; --on-ink: #17140E; --scrim: rgb(0 0 0 / .66); --disc: rgb(0 0 0 / .28); --shadow: 0 8px 24px rgb(0 0 0 / .32); --shadow-lift: 0 14px 32px rgb(0 0 0 / .45); --shadow-up: 0 -8px 24px rgb(0 0 0 / .4); }
}
:root[data-theme="dark"] { color-scheme: dark; --ground: #17140E; --surface: #211D14; --surface-2: #2B2517; --ink: #FBF6E8; --ink-2: #D9D1BD; --muted: #A79E88; --line: #3A3221; --sky: #12304A; --sky-ink: #8CCBFF; --mint: #11342A; --mint-ink: #6FE0A8; --peach: #3E2418; --peach-ink: #FFA07A; --lilac: #2A2547; --lilac-ink: #C3B5FF; --rose: #40202D; --rose-ink: #FF9BC0; --red: #FF7B70; --on-red: #1F1B12; --focus: #FFC700; --on-ink: #17140E; --scrim: rgb(0 0 0 / .66); --disc: rgb(0 0 0 / .28); --shadow: 0 8px 24px rgb(0 0 0 / .32); --shadow-lift: 0 14px 32px rgb(0 0 0 / .45); --shadow-up: 0 -8px 24px rgb(0 0 0 / .4); }
/* the six tones: a tile, chip or badge sets one class and reads --tone / --tone-ink */
.tone-sun { --tone: var(--sun); --tone-ink: var(--sun-ink); }
.tone-sky { --tone: var(--sky); --tone-ink: var(--sky-ink); }
.tone-mint { --tone: var(--mint); --tone-ink: var(--mint-ink); }
.tone-peach { --tone: var(--peach); --tone-ink: var(--peach-ink); }
.tone-lilac { --tone: var(--lilac); --tone-ink: var(--lilac-ink); }
.tone-rose { --tone: var(--rose); --tone-ink: var(--rose-ink); }
.tone-red { --tone: var(--red); --tone-ink: var(--on-red); }
.tone-ink { --tone: var(--ink); --tone-ink: var(--on-ink); }
/* inlined artwork keeps its sun-yellow accent, except on a sun tile where it would vanish: there it turns warm white */
.tone-sun { --art-accent: #FFFDF7; }
}
/* base */
@layer base {
html { background: var(--ground); scroll-padding-block-start: calc(var(--head-h) + var(--safe-t) + 16px); }
body { min-block-size: 100dvh; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: var(--t-md); line-height: 1.6; font-weight: 400; padding-block-end: calc(var(--tab-h) + var(--safe-b) + 8px); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
@media (min-width: 1024px) { body { font-size: 18px; padding-block-end: 0; } }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.3; text-wrap: balance; }
p, li, dd, dt { text-wrap: pretty; }
strong, b { font-weight: 700; }
time, .mono { font-variant-numeric: tabular-nums; }
::selection { background: var(--sun); color: var(--sun-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
main:focus { outline: none; }
.icon { display: inline-block; flex: none; vertical-align: -0.2em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: absolute; z-index: 100; inset-inline-start: 8px; inset-block-start: -200px; padding: 10px 16px; background: var(--ink); color: var(--on-ink); font-weight: 700; border-radius: var(--r-pill); }
.skip-link:focus { inset-block-start: calc(8px + var(--safe-t)); }
.display { font-family: var(--font-display); font-weight: 800; }
}
/* layout */
@layer layout {
.container { inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--pad-l) var(--pad-r); }
.page { padding-block: 20px 48px; }
.section { margin-block-start: 32px; }
.section:first-child { margin-block-start: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.split-main, .split-aside { min-inline-size: 0; }
@media (min-width: 1024px) {
 .page { padding-block: 28px 64px; }
 .section { margin-block-start: 40px; }
 .split { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: start; }
}
/* sticky aside only where it fits: on 800 px laptops a nested scroll box would hide the weather card. The home aside
   (numbers, weather, poll, follow) runs about as long as its main column, so it never sticks. */
@media (min-width: 1024px) and (min-height: 940px) {
 .split-aside:not(.home-aside) { position: sticky; inset-block-start: calc(var(--head-h) + 20px); max-block-size: calc(100dvh - var(--head-h) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 4px; margin: -4px; }
}
/* masthead: warm white, hairline, the sun dot before the wordmark */
.masthead { position: sticky; inset-block-start: 0; z-index: 30; padding-block-start: var(--safe-t); background: var(--ground); border-block-end: 1px solid var(--line); }
.masthead-bar { display: flex; align-items: center; gap: 6px; block-size: var(--head-h); max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--pad-l) var(--pad-r-tool); }
.wordmark { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; margin-inline-end: auto; font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.wordmark::before { content: ''; flex: none; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px var(--surface-2); }
.wordmark-hi { font-size: 22px; line-height: 1.25; padding-block-start: 2px; white-space: nowrap; }
.wordmark-en { display: none; }
.topnav { display: none; }
.masthead-tools { display: flex; align-items: center; gap: 4px; }
.wx-chip { display: none; align-items: center; gap: 4px; min-block-size: 40px; padding-inline: 10px 12px; border-radius: var(--r-pill); background: var(--sky); color: var(--sky-ink); font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1; }
@media (min-width: 400px) { .wx-chip { display: inline-flex; } }
/* language toggle (docs/SPEC-V3.md §1.6): a segmented pill, the full words, no JS needed */
/* the segments are 40 px pills inside a 44 px track; each link's box is the full 44 px (a transparent border that the
   fill does not paint), so the tap target meets the 44 px guideline while the toggle keeps its 40 px look */
.lang-toggle { display: inline-flex; align-items: center; flex: none; block-size: 44px; background: var(--surface-2); border-radius: var(--r-pill); }
.lang-link { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 48px; block-size: 44px; padding: 0 12px; border: 2px solid transparent; background-clip: padding-box; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1; color: var(--ink-2); white-space: nowrap; }
.lang-link[aria-current="true"] { background: var(--ink); color: var(--on-ink); }
.lang-toggle--block { block-size: 48px; }
.lang-toggle--block .lang-link { block-size: 48px; min-inline-size: 96px; font-size: 16px; }
.footer-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.menu-btn, .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-inline-size: 44px; min-block-size: 44px; border-radius: var(--r-pill); color: var(--ink); }
.menu-btn { background: var(--surface-2); }
.menu-btn-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1024px) {
 .wordmark { margin-inline-end: 24px; gap: 10px; }
 .wordmark::before { inline-size: 18px; block-size: 18px; }
 .wordmark-hi { font-size: 26px; }
 .wordmark-en { display: block; font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: .22em; color: var(--muted); }
 .topnav { display: block; margin-inline-end: auto; }
 .topnav ul { display: flex; gap: 2px; }
 .topnav-link { display: flex; align-items: center; min-block-size: 44px; padding: 0 16px; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink-2); }
 .topnav-link:hover { background: var(--surface-2); color: var(--ink); }
 .topnav-link.is-active { background: var(--sun); color: var(--sun-ink); }
 .menu-btn { padding-inline: 12px 16px; }
 .menu-btn-label { position: static; inline-size: auto; block-size: auto; clip-path: none; font-weight: 700; font-size: 16px; }
}
.site-notice { background: var(--ink); color: var(--on-ink); --focus: var(--sun); }
.site-notice-inner { display: flex; align-items: center; gap: 10px; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--pad-l) var(--pad-r-tool); font-size: var(--t-sm); line-height: 1.45; }
.site-notice p { flex: 1; padding-block: 10px; font-weight: 600; }
.site-notice .icon-btn { color: var(--on-ink); }
/* floating bottom tab bar: rounded top, a sun pill that slides to the active tab */
.tabbar { position: fixed; z-index: 30; inset-inline: 0; inset-block-end: 0; background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-up); padding: 6px var(--safe-r) calc(6px + var(--safe-b)) var(--safe-l); }
.tabbar-track { position: relative; max-inline-size: 560px; margin-inline: auto; padding-inline: 6px; }
.tab-pill { position: absolute; inset-block: 0; inset-inline-start: 6px; inline-size: calc((100% - 12px) / 5); padding: 2px 3px; pointer-events: none; transform: translateX(calc(var(--tab-i, 0) * 100%)); }
.tab-pill::before { content: ''; display: block; block-size: 100%; border-radius: var(--r-pill); background: var(--sun); }
.tabbar ul { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-block-size: 56px; padding-block: 6px 5px; border-radius: var(--r-pill); color: var(--ink-2); font-size: 12px; line-height: 1.3; font-weight: 600; }
.tab.is-active { color: var(--sun-ink); font-weight: 700; }
.tab.is-active .icon { stroke-width: 2.6; }
.tab:focus-visible { outline-offset: -3px; }
@media (min-width: 1024px) { .tabbar { display: none; } }
.site-footer { margin-block-start: 40px; background: var(--surface-2); border-radius: 28px 28px 0 0; }
.footer-inner { display: grid; gap: 28px; max-inline-size: var(--wrap); margin-inline: auto; padding: 32px var(--pad-r) 28px var(--pad-l); }
.footer-brand { display: grid; gap: 12px; justify-items: start; align-content: start; }
.footer-mark { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.2; }
.footer-mark-en { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: .22em; color: var(--muted); line-height: 1.4; }
.footer-tagline { color: var(--ink-2); font-weight: 600; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.footer-head { font-family: var(--font-display); font-weight: 800; font-size: var(--t-md); color: var(--ink); margin-block-end: 4px; }
.footer-nav a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; font-weight: 500; color: var(--ink-2); }
.footer-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.footer-legal { font-size: var(--t-xs); color: var(--muted); padding-block-start: 16px; border-block-start: 1px solid var(--line); }
@media (min-width: 720px) {
 .footer-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
 .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .footer-legal { grid-column: 1 / -1; }
}
/* sheets: bottom sheet on mobile, centred dialog on desktop */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: var(--scrim); }
.sheet-panel { position: relative; inline-size: 100%; max-block-size: calc(100dvh - var(--safe-t) - 24px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--ink); border-radius: 24px 24px 0 0; padding: 8px var(--pad-r) calc(20px + var(--safe-b)) var(--pad-l); }
.sheet-panel::before { content: ''; display: block; inline-size: 44px; block-size: 5px; margin: 4px auto 0; border-radius: var(--r-pill); background: var(--line); }
.sheet-panel:focus { outline: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 56px; margin-inline-end: -8px; }
.sheet-title { font-size: var(--t-xl); }
.sheet-lead { color: var(--ink-2); margin-block: 0 16px; }
.sheet-actions { display: grid; gap: 8px; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block: 4px 16px; }
.menu-link { display: flex; align-items: center; gap: 12px; min-block-size: 60px; padding: 8px 14px; background: var(--surface-2); border-radius: var(--r-card); font-weight: 700; line-height: 1.35; }
.menu-link .icon { color: var(--sun-deep); }
.install-steps { margin-block-end: 16px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-card); }
.install-os { font-family: var(--font-display); font-weight: 800; font-size: var(--t-sm); color: var(--sun-deep); }
.install-step { font-size: var(--t-lg); font-weight: 600; line-height: 1.5; }
@media (min-width: 720px) {
 .sheet { align-items: center; padding: 24px; }
 .sheet-panel { inline-size: min(480px, 100%); max-block-size: calc(100dvh - 48px); border-radius: 24px; box-shadow: var(--shadow-lift); padding: 8px 24px 24px; }
 .sheet-panel::before { display: none; }
}
.offline-banner { position: fixed; z-index: 35; inset-inline: 12px; inset-block-end: calc(var(--tab-h) + var(--safe-b) + 8px); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: var(--ink); color: var(--on-ink); border-radius: var(--r-card); font-size: var(--t-sm); font-weight: 600; line-height: 1.4; box-shadow: var(--shadow-lift); }
@media (min-width: 1024px) { .offline-banner { inset-block-end: 16px; inset-inline: auto 16px; } }
}
/* components */
@layer components {
/* tiles, chips, badges, buttons ------------------------------------------------------------------------------ */
.tile { display: grid; place-items: center; flex: none; inline-size: 88px; aspect-ratio: 1; border-radius: var(--r-img); background: var(--tone, var(--surface-2)); color: var(--tone-ink, var(--ink)); overflow: hidden; }
.tile > svg, .tile > img { inline-size: 74%; block-size: 74%; display: block; }
.tile--sm { inline-size: 56px; border-radius: 12px; }
.tile--xs { inline-size: 44px; border-radius: 12px; }
.tile--lg { inline-size: 112px; border-radius: 20px; }
.tile--wide { inline-size: 100%; aspect-ratio: 3 / 1; max-block-size: 180px; border-radius: var(--r-card); }
.tile--wide > svg { inline-size: auto; block-size: 76%; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; }
.card--lift { border: 0; box-shadow: var(--shadow); }
.list { display: grid; gap: 8px; }
.list-row { display: flex; align-items: center; gap: 12px; min-block-size: 56px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.timetable { display: grid; gap: 8px; }
.label-en { font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.sep { color: var(--muted); }
/* a middle dot travels with the part after it, so a wrapped meta line never ends in "·" */
.mp { display: inline-flex; align-items: center; column-gap: inherit; min-inline-size: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; padding: 0 22px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); font-family: var(--font-body); font-size: var(--t-md); font-weight: 700; line-height: 1.25; text-align: center; cursor: pointer; touch-action: manipulation; }
.btn-primary { background: var(--sun); color: var(--sun-ink); }
.btn-dark { background: var(--ink); color: var(--on-ink); }
.btn-ghost { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-sm { min-block-size: 44px; padding-inline: 16px; gap: 6px; font-size: var(--t-sm); }
.btn-block { display: flex; inline-size: 100%; }
.btn-lg { min-block-size: 56px; padding-inline: 26px; font-size: 18px; }
.btn[aria-pressed="true"] { background: var(--mint); color: var(--mint-ink); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; transform: none; box-shadow: none; }
.btn--soon { background: var(--surface-2); color: var(--muted); }
.app-hero .btn--soon { background: rgb(255 255 255 / .45); color: var(--sun-ink); opacity: .75; }
.app-hero .btn-primary { background: var(--sun-ink); color: var(--sun); }
.app-hero .btn-ghost { background: var(--surface); color: var(--ink); box-shadow: none; }
@media (hover: hover) {
 .btn:hover { box-shadow: var(--shadow); }
 .btn-primary:hover { background: var(--sun-deep); }
 .btn-dark:hover { background: var(--ink-2); }
 .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
}
.share { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 44px; padding: 0 16px; background: var(--surface-2); color: var(--ink); border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 700; line-height: 1.2; }
.share--compact { inline-size: 44px; padding: 0; }
.badge, .tag { display: inline-flex; align-items: center; gap: 4px; min-block-size: 26px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.badge { background: var(--surface-2); color: var(--ink-2); }
.badge--verified, .badge--official, .badge--national, .badge--call { background: var(--mint); color: var(--mint-ink); }
.badge--unverified { background: var(--peach); color: var(--peach-ink); }
.badge--tentative { background: var(--surface-2); color: var(--ink-2); }
.badge--new { background: var(--sun); color: var(--sun-ink); }
.badge--ended { background: var(--surface-2); color: var(--muted); }
.badge--cancelled { background: var(--rose); color: var(--rose-ink); }
.badge--pinned { background: var(--ink); color: var(--on-ink); }
.badge--live { background: var(--mint); color: var(--mint-ink); }
.badge--live::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.tag { background: var(--surface-2); color: var(--ink-2); }
.tag--local { background: var(--sun); color: var(--sun-ink); }
.tag--tone { background: var(--tone, var(--surface-2)); color: var(--tone-ink, var(--ink-2)); }
.tag--ai { background: var(--lilac); color: var(--lilac-ink); }
.chips { margin-inline: calc(-1 * var(--pad-l)) calc(-1 * var(--pad-r)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips-list { display: flex; gap: 8px; inline-size: max-content; padding: 4px var(--pad-r) 6px var(--pad-l); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 16px; background: var(--surface-2); color: var(--ink-2); border-radius: var(--r-pill); font-size: 16px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.chip:hover { color: var(--ink); box-shadow: var(--shadow); }
.chip.is-active { background: var(--sun); color: var(--sun-ink); }
.chip-count { display: inline-grid; place-items: center; min-inline-size: 22px; block-size: 22px; padding-inline: 6px; border-radius: var(--r-pill); background: var(--disc); font-family: var(--font-display); font-size: 13px; font-weight: 800; line-height: 1; }
@media (min-width: 1024px) {
 .chips { margin-inline: 0; overflow: visible; }
 .chips-list { inline-size: auto; flex-wrap: wrap; padding: 0; }
}
/* heads ------------------------------------------------------------------------------------------------------ */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 14px; }
.section-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; font-size: var(--t-xl); line-height: 1.3; }
.section-en { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.section-link { display: inline-flex; align-items: center; gap: 4px; flex: none; min-block-size: 44px; padding: 0 8px 0 14px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.section-link:hover { background: var(--sun); color: var(--sun-ink); }
.page-head { margin-block-end: 24px; }
.page-head::after { content: ''; display: block; inline-size: 56px; block-size: 8px; margin-block-start: 12px; border-radius: var(--r-pill); background: var(--sun); }
.page-title { font-size: var(--t-3xl); line-height: 1.25; }
.page-en { margin-block-start: 2px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.page-sub { margin-block-start: 10px; max-inline-size: 62ch; color: var(--ink-2); }
.page-alt { margin-block-start: 6px; font-size: var(--t-lg); font-weight: 600; line-height: 1.4; color: var(--ink-2); }
/* home hero: greeting on sun, weather on sky, counters underneath ------------------------------------------- */
.hero { padding-block-start: 16px; }
.hero-card { display: grid; gap: 16px; padding: 20px; background: var(--sun); color: var(--sun-ink); border-radius: 24px; box-shadow: var(--shadow); --focus: var(--sun-ink); }
.hero-date { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; font-weight: 600; font-size: var(--t-sm); line-height: 1.5; }
.hero-date .sep { color: inherit; opacity: .6; }
.hero-greet { font-size: var(--t-hero); line-height: 1.22; }
.hero-wx { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 2px; padding: 14px 16px; background: var(--sky); color: var(--sky-ink); border-radius: 18px; --focus: var(--sky-ink); }
.hero-wx-art { grid-row: 1 / span 2; inline-size: 72px; block-size: 72px; }
.hero-temp { display: flex; align-items: flex-start; gap: 6px; font-family: var(--font-display); font-weight: 800; font-size: 42px; line-height: 1; }
.hero-temp small { font-size: 18px; font-weight: 700; line-height: 1; margin-block-start: 6px; }
.hero-cond { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; font-weight: 700; font-size: var(--t-md); line-height: 1.4; }
/* One fact per line: how many fit on a line depends on the font, so a web font arriving late would re-wrap the hero and push the page down (CLS). */
.hero-cond span { flex-basis: 100%; font-weight: 600; font-size: var(--t-sm); opacity: .85; white-space: nowrap; }
.hero-wx--empty { color: var(--sky-ink); font-weight: 600; }
.counters { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }
.count-pill { display: inline-flex; align-items: center; gap: 8px; flex: none; min-block-size: 46px; padding: 4px 16px 4px 12px; border-radius: var(--r-pill); background: var(--tone); color: var(--tone-ink); font-weight: 700; font-size: var(--t-sm); line-height: 1.2; white-space: nowrap; }
.count-num { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; }
.count-sub { font-weight: 600; font-size: 12px; opacity: .8; }
@media (min-width: 720px) {
 .hero { padding-block-start: 24px; }
 .hero-card { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: center; padding: 28px 28px 24px; gap: 24px; }
 .hero-greet { font-size: clamp(36px, 4vw, 48px); }
 .hero-temp { font-size: 52px; }
}
/* app banner (docs/SPEC-V3.md §3) */
.app-banner { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 44px; gap: 12px 14px; align-items: center; padding: 14px 14px 14px 16px; background: var(--surface); border: 2px solid var(--sun); border-radius: 20px; box-shadow: var(--shadow); }
.app-banner-icon { inline-size: 52px; block-size: 52px; border-radius: 14px; overflow: hidden; }
.app-banner-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.25; }
.app-banner-sub { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.4; }
/* Phones: the two buttons always share one row (the label wraps inside the pill instead), so the row count never
   depends on which font has arrived yet — a late web font must not push the page down. */
.app-banner-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.app-banner-hint { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--muted); }
@media (min-width: 720px) {
 .app-banner-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; }
 .app-banner-actions .btn { flex: none; }
 .app-banner-hint { flex-basis: auto; }
}
/* news cards ---------------------------------------------------------------------------------------------- */
.news-title a:hover, .section-link:hover .section-hi, .tt-row:hover .tt-title, .strip:hover .strip-title, .alert-card-title a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.news-item { position: relative; display: grid; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.news-item.is-pinned { border-color: var(--sun); box-shadow: inset 0 0 0 1px var(--sun); }
.news-title, .job-title, .alert-card-title, .blood-title { font-family: var(--font-body); font-weight: 600; }
.news-title { font-size: 18px; line-height: 1.45; text-wrap: pretty; }
.news-title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-card); }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-xs); line-height: 1.4; color: var(--muted); }
.news-source { color: var(--ink-2); font-weight: 700; }
.news-also { font-size: var(--t-xs); color: var(--muted); }
.news-item.is-compact { padding: 10px 12px; gap: 4px; }
.news-item.has-thumb { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "thumb main"; column-gap: 14px; align-items: start; padding: 12px; }
.news-item.has-thumb > .tile, .news-item.has-thumb > .card-thumb { grid-area: thumb; }
.news-item.has-thumb > .news-main { grid-area: main; display: grid; gap: 6px; align-content: start; min-block-size: 88px; }
.news-item.is-compact.has-thumb { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; }
.news-item.is-compact.has-thumb > .tile { inline-size: 56px; border-radius: 12px; }
.news-item.is-compact.has-thumb > .news-main { min-block-size: 56px; }
:is(.news-item, .job-card, .place-card, .tt-row, .strip, .explore-tile, .num-tile, .count-pill, .app-banner) { transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) {
 :is(.news-item, .job-card, .place-card, .tt-row, .strip, .explore-tile, .num-tile):hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
}
/* event rows: a big date badge in the kind's pastel, today in sun ------------------------------------------ */
.tt-row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "when main"; column-gap: 14px; align-items: center; min-block-size: 88px; padding: 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); }
.tt-when { grid-area: when; display: flex; flex-direction: column; align-items: center; justify-content: center; inline-size: 64px; min-block-size: 64px; padding: 6px 2px; border-radius: var(--r-img); background: var(--tone, var(--surface-2)); color: var(--tone-ink, var(--ink)); text-align: center; }
.tt-day { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; }
.tt-mon, .tt-date { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; margin-block-start: 3px; }
.tt-time { font-size: 12px; font-weight: 700; line-height: 1.3; margin-block-start: 4px; }
.tt-when.is-time .tt-day { font-size: 22px; }
.tt-when .tt-allday { font-size: 15px; line-height: 1.2; }
.tt-period { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }
.tt-row.is-today .tt-when { --tone: var(--sun); --tone-ink: var(--sun-ink); }
.tt-main { grid-area: main; display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.tt-title { font-weight: 600; font-size: 18px; line-height: 1.4; }
.tt-meta { display: flex; flex-wrap: wrap; column-gap: 6px; font-size: var(--t-sm); line-height: 1.45; color: var(--muted); }
.tt-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-kind { align-self: flex-start; }
.tt-row.is-cancelled .tt-title { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tt-row:focus-visible { outline-offset: -3px; }
.tt-row.is-compact { grid-template-columns: 56px minmax(0, 1fr); min-block-size: 72px; padding: 10px; column-gap: 12px; }
.tt-row.is-compact .tt-when { inline-size: 56px; min-block-size: 56px; border-radius: 12px; }
.tt-row.is-compact .tt-day { font-size: 22px; }
:is(.tt-row, .news-item).is-compact :is(.tt-title, .news-title) { font-size: 17px; }
.tt-row.has-thumb { grid-template-columns: 64px 48px minmax(0, 1fr); grid-template-areas: "when pic main"; }
.tt-row.has-thumb > .media { grid-area: pic; align-self: center; inline-size: 48px; border-radius: 12px; }
/* jobs ------------------------------------------------------------------------------------------------------ */
.job-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.job-head { display: flex; align-items: flex-start; gap: 12px; }
.job-mark { display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; border-radius: 12px; background: var(--peach); color: var(--peach-ink); }
.job-head > .media { inline-size: 44px; flex: none; border-radius: 12px; }
.job-title { flex: 1; min-inline-size: 0; font-weight: 700; font-size: 18px; line-height: 1.4; }
.job-head .badge { flex: none; margin-block-start: 8px; }
.job-title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-card); }
.job-company { color: var(--ink-2); font-weight: 600; line-height: 1.4; }
.job-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.job-facts li { display: inline-flex; align-items: center; gap: 5px; }
.job-facts .icon { color: var(--muted); }
.job-salary { color: var(--mint-ink); font-weight: 700; }
.job-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-block-start: 4px; padding-block-start: 8px; border-block-start: 1px solid var(--line); font-size: var(--t-xs); color: var(--muted); }
.job-meta .is-closing { color: var(--peach-ink); font-weight: 700; }
:is(.news-item, .job-card):has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
:is(.news-title, .job-title) a:focus-visible { outline: none; }
/* alerts: rounded strips in their colour, cards with a tinted head ------------------------------------------ */
.strip, .alert-card { --tone: var(--sky); --tone-ink: var(--sky-ink); }
.strip--critical, .alert-card--critical { --tone: var(--red); --tone-ink: var(--on-red); }
.strip--warning, .alert-card--warning { --tone: var(--peach); --tone-ink: var(--peach-ink); }
.strip { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; column-gap: 12px; align-items: center; min-block-size: 72px; padding: 12px 12px 12px 14px; background: var(--tone); color: var(--tone-ink); border-radius: var(--r-card); --focus: var(--tone-ink); }
.strip + .strip { margin-block-start: 8px; }
.strip-block { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--disc); }
.strip--critical .strip-block { background: rgb(255 255 255 / .22); }
.strip-sev { order: -1; display: inline-flex; align-items: center; min-block-size: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--disc); font-size: 12px; font-weight: 700; }
.strip-body { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-inline-size: 0; }
.strip-title { font-weight: 700; font-size: 17px; line-height: 1.4; }
.strip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-size: 13px; line-height: 1.4; opacity: .92; }
.strip-meta .badge { background: var(--disc); color: inherit; }
.strip-go { display: grid; place-items: center; opacity: .8; }
.alert-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.alert-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.alert-card-block { display: inline-flex; align-items: center; gap: 6px; min-block-size: 30px; padding: 0 12px 0 9px; border-radius: var(--r-pill); background: var(--tone); color: var(--tone-ink); font-size: 14px; font-weight: 700; line-height: 1.2; }
.alert-card-kind { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.alert-card-title { font-weight: 700; font-size: var(--t-lg); line-height: 1.4; }
.alert-card-body { color: var(--ink-2); }
.alert-card-meta, .alert-card-source { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-sm); line-height: 1.45; color: var(--muted); }
.ac-part { display: inline-flex; align-items: flex-start; gap: 4px; }
.ac-part .icon { margin-block-start: 3px; }
.alert-card-source a { font-weight: 700; }
:is(.alert-card-title, .alert-card-source, .kv dd) a { display: inline-block; padding-block: 9px; margin-block: -9px; }
.src-link { min-block-size: 44px; min-inline-size: 44px; margin-block: -9px; }
.alert-card.is-ended { --tone: var(--surface-2); --tone-ink: var(--muted); background: var(--ground); }
.alert-card.is-ended :is(.alert-card-title, .alert-card-body) { color: var(--muted); }
/* weather card ---------------------------------------------------------------------------------------------- */
.wx { display: grid; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.wx-now { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 12px 14px; background: var(--sky); color: var(--sky-ink); border-radius: var(--r-img); }
.wx-art { inline-size: 56px; block-size: 56px; }
.wx-temp { display: flex; align-items: flex-start; font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; }
.wx-deg { margin: 4px 0 0 2px; font-size: 16px; font-weight: 700; }
.wx-label { font-weight: 700; line-height: 1.35; }
.wx-facts > span { white-space: nowrap; }
.wx-facts { display: flex; flex-wrap: wrap; column-gap: 6px; font-size: 13px; line-height: 1.5; opacity: .9; }
.wx-days { display: grid; gap: 2px; padding-inline: 4px; }
.wx-day { display: grid; grid-template-columns: 44px 26px minmax(0, 1fr) 46px 72px; align-items: center; column-gap: 8px; min-block-size: 44px; font-size: var(--t-sm); line-height: 1.35; }
.wx-day + .wx-day { border-block-start: 1px solid var(--line); }
.wx-day-name { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.wx-day-art { inline-size: 26px; block-size: 26px; }
.wx-day-label { color: var(--ink-2); }
.wx-day-rain { display: inline-flex; align-items: center; gap: 3px; color: var(--sky-ink); font-size: 13px; font-weight: 700; }
.wx-day-temp { text-align: end; font-weight: 700; white-space: nowrap; }
.wx-min { margin-inline-start: 6px; color: var(--muted); font-weight: 400; }
.wx-foot > span { display: inline-flex; flex-wrap: wrap; column-gap: 6px; }
.wx-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding-inline: 4px; font-size: var(--t-xs); line-height: 1.5; color: var(--muted); }
.wx-foot a, .footer-legal a { display: inline-block; padding-block: 12px; margin-block: -12px; text-decoration: underline; text-underline-offset: .2em; }
.wx--empty { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 16px; color: var(--ink-2); }
.wx-empty-title { font-weight: 700; line-height: 1.4; }
/* numbers --------------------------------------------------------------------------------------------------- */
.num-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, calc(50% - 4px)), 1fr)); gap: 8px; }
.num-tile { display: flex; flex-direction: column; gap: 4px; min-block-size: 116px; padding: 14px 14px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); }
.num-tile-num { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.num-tile-name { flex: 1; font-weight: 600; font-size: var(--t-sm); line-height: 1.35; }
.num-tile-cta { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; min-block-size: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--mint); color: var(--mint-ink); font-size: var(--t-xs); font-weight: 700; }
.num-tile.is-emergency { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 18px; align-items: center; min-block-size: 112px; background: var(--sun); color: var(--sun-ink); border: 0; box-shadow: var(--shadow); --focus: var(--sun-ink); }
.num-tile.is-emergency .num-tile-num { grid-row: 1 / span 2; font-size: 72px; line-height: 1; }
.num-tile.is-emergency .num-tile-name { align-self: end; flex: none; font-size: var(--t-md); font-weight: 700; }
.num-tile.is-emergency .num-tile-cta { align-self: start; background: var(--sun-ink); color: var(--sun); }
.num-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.num-row-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.num-row-name { font-weight: 600; line-height: 1.4; }
.num-row-en { font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--muted); line-height: 1.35; }
.num-row-number { margin-block-start: 3px; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.3; }
.num-row-note { font-size: var(--t-sm); color: var(--ink-2); }
.num-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-block-start: 6px; }
.num-row-meta .sep { display: none; }
.num-row-call { flex: none; }
.src-link, .alert-card-source a { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); text-decoration: underline; text-underline-offset: .2em; }
/* places ---------------------------------------------------------------------------------------------------- */
.place-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-block-size: 80px; padding: 12px 10px 12px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); }
.place-card > .media { inline-size: 56px; border-radius: 12px; }
.place-icon { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 12px; background: var(--tone, var(--surface-2)); color: var(--tone-ink, var(--ink-2)); }
.place-main { display: flex; flex-direction: column; min-inline-size: 0; }
.place-name { font-weight: 700; line-height: 1.4; }
.place-en { font-size: var(--t-xs); line-height: 1.35; color: var(--muted); }
.place-meta { display: flex; flex-wrap: wrap; column-gap: 6px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.place-go { color: var(--muted); }
.place-photo-card { border: 1px solid var(--line); overflow: hidden; }
/* blood ----------------------------------------------------------------------------------------------------- */
.blood-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.blood-group { display: grid; place-items: center; inline-size: 72px; block-size: 72px; border-radius: var(--r-img); background: var(--rose); color: var(--rose-ink); font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; }
.blood-main { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.blood-title { font-weight: 700; font-size: 18px; line-height: 1.4; }
.blood-meta { display: flex; flex-wrap: wrap; column-gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.blood-meta strong { color: var(--rose-ink); }
.blood-note { font-size: var(--t-sm); color: var(--muted); }
.blood-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-xs); color: var(--muted); }
.blood-actions { margin-block-start: 6px; }
/* poll ------------------------------------------------------------------------------------------------------ */
.poll { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.poll-eyebrow { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-block-size: 28px; padding: 0 12px 0 9px; border-radius: var(--r-pill); background: var(--lilac); color: var(--lilac-ink); font-size: var(--t-xs); font-weight: 700; }
.poll-q { font-size: 22px; line-height: 1.3; }
.poll-options { display: grid; gap: 8px; }
.poll-opt { display: flex; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 52px; padding: 6px 8px 6px 6px; text-align: start; background: var(--surface-2); border-radius: var(--r-pill); font-weight: 600; line-height: 1.35; }
.poll-opt-key { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--surface); color: var(--lilac-ink); font-family: var(--font-display); font-size: 16px; font-weight: 800; }
@media (hover: hover) {
 .poll-opt:hover { background: var(--lilac); color: var(--lilac-ink); }
 .poll-opt:hover .poll-opt-key { background: var(--surface); }
}
.poll-results { display: grid; gap: 12px; }
.poll-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-weight: 600; line-height: 1.35; }
.poll-result-pct { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.poll-bar { grid-column: 1 / -1; block-size: 10px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.poll-bar > span { display: block; block-size: 100%; border-radius: var(--r-pill); background: var(--lilac-ink); }
.poll-result.is-mine .poll-bar > span { background: var(--sun); }
.poll-note { font-size: var(--t-xs); color: var(--muted); }
.poll-status { padding: 10px 14px; border-radius: 12px; background: var(--mint); color: var(--mint-ink); font-weight: 600; line-height: 1.4; }
/* messages -------------------------------------------------------------------------------------------------- */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 18px; background: var(--surface-2); border-radius: 20px; }
.empty-icon { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 14px; background: var(--sun); color: var(--sun-ink); margin-block-end: 2px; }
.empty-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.3; }
.empty-body { color: var(--ink-2); max-inline-size: 58ch; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 6px; }
.notice { --tone: var(--sky); --tone-ink: var(--sky-ink); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; background: var(--tone); color: var(--ink); border-radius: var(--r-card); }
.notice--warn { --tone: var(--peach); --tone-ink: var(--peach-ink); }
.notice--danger { --tone: var(--rose); --tone-ink: var(--rose-ink); }
.notice-icon { margin-block-start: 3px; color: var(--tone-ink); }
.notice-title { font-weight: 700; line-height: 1.45; color: var(--tone-ink); }
.notice-body { color: var(--ink-2); line-height: 1.5; }
.notice-actions { display: flex; flex-wrap: wrap; column-gap: 16px; }
.notice-action { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 700; color: var(--tone-ink); text-decoration: underline; text-underline-offset: .22em; }
.fee-warning { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; background: var(--peach); color: var(--ink); border-radius: var(--r-card); line-height: 1.5; --focus: var(--peach-ink); }
.fee-warning .icon { margin-block-start: 1px; color: var(--peach-ink); }
.fee-warning strong { display: block; font-size: 18px; line-height: 1.4; color: var(--peach-ink); }
.fee-warning a { font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.trust-line { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.trust-line .icon { margin-block-start: 2px; color: var(--mint-ink); }
/* follow / install card: sun yellow, big pills */
.follow { display: grid; justify-items: start; gap: 6px; padding: 20px 18px 18px; background: var(--sun); color: var(--sun-ink); border-radius: 22px; box-shadow: var(--shadow); --focus: var(--sun-ink); }
.follow-eyebrow { display: inline-flex; align-items: center; min-block-size: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--sun-ink); color: var(--sun); font-size: var(--t-xs); font-weight: 700; }
.follow-title { font-size: 26px; line-height: 1.25; }
.follow-body { max-inline-size: 46ch; font-weight: 500; }
.follow-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 10px; }
.follow .btn-primary { background: var(--sun-ink); color: var(--sun); }
.follow .btn-dark { background: var(--surface); color: var(--ink); }
.follow .btn-ghost { background: rgb(255 255 255 / .55); color: var(--sun-ink); box-shadow: none; }
/* explore grid: four colourful tiles */
.explore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.explore-tile { display: grid; grid-template-rows: auto 1fr; gap: 10px; min-block-size: 132px; padding: 16px; border-radius: 20px; background: var(--tone); color: var(--tone-ink); --focus: var(--tone-ink); }
.explore-tile > svg { inline-size: 40px; block-size: 40px; }
.explore-name { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.2; }
.explore-sub { display: block; margin-block-start: 2px; font-family: var(--font-body); font-size: var(--t-xs); font-weight: 600; opacity: .85; }
@media (min-width: 720px) { .explore { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* the /app landing page */
.app-hero { display: grid; gap: 16px; padding: 24px 20px; background: var(--sun); color: var(--sun-ink); border-radius: 24px; box-shadow: var(--shadow); --focus: var(--sun-ink); }
.app-hero-icon { inline-size: 72px; block-size: 72px; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.app-hero h1 { font-size: var(--t-hero); line-height: 1.22; }
.app-hero p { max-inline-size: 48ch; font-weight: 500; }
.app-get { display: grid; gap: 8px; }
.app-get .btn { justify-content: flex-start; padding-inline: 18px; }
.app-get .btn small { margin-inline-start: auto; font-size: 13px; font-weight: 600; opacity: .8; }
.app-shots { display: flex; gap: 12px; margin-inline: calc(-1 * var(--pad-l)) calc(-1 * var(--pad-r)); padding: 4px var(--pad-r) 12px var(--pad-l); overflow-x: auto; scrollbar-width: none; }
.app-shots::-webkit-scrollbar { display: none; }
.app-shot { flex: none; inline-size: min(240px, 66vw); border-radius: 22px; overflow: hidden; border: 6px solid var(--ink); background: var(--ink); box-shadow: var(--shadow); }
.app-shot img { inline-size: 100%; block-size: auto; border-radius: 16px; }
.app-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.app-feat { display: grid; gap: 8px; padding: 16px; border-radius: 20px; background: var(--tone); color: var(--tone-ink); }
.app-feat > svg { inline-size: 40px; block-size: 40px; }
.app-feat strong { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.25; }
.app-feat span { font-size: var(--t-sm); opacity: .9; }
@media (min-width: 720px) {
 .app-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: center; padding: 32px; }
 .app-shots { margin-inline: 0; padding-inline: 0; overflow: visible; justify-content: center; }
 .app-feats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* images (docs/SPEC-V2.md §1.3): every box is reserved with aspect-ratio AND the img carries width/height ---- */
.media { position: relative; display: block; overflow: hidden; background: var(--surface-2); border-radius: var(--r-img); }
.media > img, .media > svg { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
.media--wide { aspect-ratio: 16 / 9; }
.media--thumb { aspect-ratio: 4 / 3; }
.media--square { aspect-ratio: 1 / 1; }
.media--art { background: var(--tone, var(--surface-2)); color: var(--tone-ink, var(--ink)); }
.media--art > img { object-fit: contain; padding: 10%; }
.art-mark { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.card-thumb { flex: none; inline-size: 88px; }
.media-credit { display: block; margin-block-start: 6px; font-size: var(--t-xs); line-height: 1.45; color: var(--muted); }
.media-credit a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.media-figure { display: block; margin: 0; }
.media-figure > .media { border-radius: var(--r-card); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .media > img { filter: brightness(.93); } }
:root[data-theme="dark"] .media > img { filter: brightness(.93); }
.kv { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.kv-row { display: grid; grid-template-columns: minmax(104px, 32%) minmax(0, 1fr); gap: 2px 14px; padding: 12px 16px; }
.kv-row + .kv-row { border-block-start: 1px solid var(--line); }
.kv dt { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-sm); font-weight: 600; line-height: 1.55; color: var(--muted); }
.kv dt .icon { margin-block-start: 3px; color: var(--sun-deep); }
.kv dd { min-inline-size: 0; font-weight: 500; line-height: 1.55; }
.kv dd a { color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 379px) { .kv-row { grid-template-columns: minmax(0, 1fr); } }
}
/* utilities */
@layer utilities {
.form { display: grid; gap: 20px; max-inline-size: 640px; }
.field { display: grid; gap: 6px; min-inline-size: 0; }
.field-label { font-weight: 700; line-height: 1.4; }
.field-help { font-size: var(--t-sm); line-height: 1.45; color: var(--muted); }
.field-error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--t-sm); font-weight: 700; line-height: 1.45; color: var(--red); }
.input, .textarea, .select { display: block; inline-size: 100%; min-block-size: 50px; padding: 11px 14px 9px; background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: var(--r-input); font-size: var(--t-md); line-height: 1.45; }
.textarea { min-block-size: 132px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.input:focus, .textarea:focus, .select:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
:is(.input, .textarea, .select)[aria-invalid="true"] { border-color: var(--red); }
:is(.input, .textarea, .select):disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.checkbox, .radio { display: flex; align-items: flex-start; gap: 12px; min-block-size: 44px; padding-block: 9px; line-height: 1.45; cursor: pointer; }
.checkbox input, .radio input { flex: none; inline-size: 22px; block-size: 22px; margin: 1px 0 0; accent-color: var(--sun-deep); }
:is(#form-errors, #form-notice):focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.prose { max-inline-size: 68ch; line-height: 1.7; }
.prose > * + * { margin-block-start: 1em; }
.prose h2 { margin-block-start: 1.8em; font-size: var(--t-xl); }
.prose h3 { margin-block-start: 1.4em; font-size: var(--t-lg); }
.prose :is(ul, ol) { padding-inline-start: 1.3em; }
.prose li + li { margin-block-start: .35em; }
.prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.stack-lg { display: flex; flex-direction: column; gap: 32px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.row-between { justify-content: space-between; }
.grid-2, .grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hscroll { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; padding-block-end: 6px; }
.hscroll > * { flex: none; scroll-snap-align: start; }
.jobs-scroll > li { display: grid; inline-size: min(300px, 82vw); }
@media (min-width: 1024px) { .jobs-scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); overflow: visible; padding-block-end: 0; } .jobs-scroll > li { inline-size: auto; } }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-variant-ligatures: none; }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* toast (public/js/app.js) slides up */
.rc-toast { position: fixed; z-index: 999; inset-inline: 16px; max-inline-size: 28rem; margin-inline: auto; padding: 12px 18px; background: var(--ink); color: var(--on-ink); border-radius: var(--r-card); box-shadow: var(--shadow-lift); font-weight: 600; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1); }
.rc-toast.is-on { opacity: 1; transform: none; }
/* motion: a lift on hover, a press on tap, the pill slide — nothing under reduced motion */
@media (prefers-reduced-motion: no-preference) {
 .tab-pill { transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
 :where(.btn, .chip, .tab, .count-pill, .num-tile, .strip, .tt-row, .place-card, .menu-link, .poll-opt, .share, .wx-chip, .menu-btn, .icon-btn, .explore-tile, .lang-link, .news-item, .job-card):active { transform: scale(.98); }
 .sheet-panel { animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; } }
/* print: content only */
@media print {
 .masthead, .tabbar, .sheet, .offline-banner, .site-notice, .skip-link, .share, .follow, .menu-btn, .footer-nav, .poll, .chips, .app-banner, .counters, [data-install], [data-push] { display: none !important; }
 body { padding: 0; background: #fff; color: #000; font-size: 11pt; }
 .split { display: block; }
 .split-aside { position: static; max-block-size: none; overflow: visible; }
 .hero-card, .hero-wx, .tile, .tt-when, .strip { background: #fff !important; color: #000 !important; border: 1px solid #000; box-shadow: none; }
 :is(.news-item, .tt-row, .job-card, .alert-card, .strip, .num-row, .blood-card, .kv-row, .wx) { break-inside: avoid; }
 .media--art, .art-mark, .tile > svg { display: none !important; }
 .media { background: none; border: 1px solid #000; break-inside: avoid; }
 .media > img { max-block-size: 6cm; object-fit: contain; filter: none; }
 .media-credit { color: #000; }
 .lang-toggle { display: none !important; }
 .site-footer { margin: 0; border: 0; background: none; }
}
}