/* --- 00-layers.css --- */
/* The cascade order for the whole app. Every rule below belongs to one of
   these layers, so specificity fights are decided here rather than by
   accident. Anything unlayered would win over all of it — so nothing is. */
@layer reset, tokens, base, layout, components, state, utilities;

/* --- 10-reset.css --- */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	body,
	h1, h2, h3, h4,
	p,
	figure,
	blockquote,
	dl, dd {
		margin: 0;
	}

	ul[role='list'],
	ol[role='list'] {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	img,
	picture,
	svg {
		max-width: 100%;
		display: block;
	}

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

	/* Long words (a Nynorsk compound, a shopping-list item) must wrap rather
	   than push the layout sideways. */
	p, h1, h2, h3, h4, li, dd {
		overflow-wrap: break-word;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

/* --- 20-tokens.css --- */
@layer tokens {
	/* Flokk's design system: a warm retro-pastel palette on cream paper.
	   Carried over unchanged from the previous app so the rebuild looks like
	   the same product. Nothing outside this file states a colour, a radius,
	   a shadow or a font — everything else refers to these names. */
	:root {
		/* ── base palette ── */
		--ink-900: #2b2118;
		--ink-700: #4a3b2c;
		--ink-500: #7a6a56;
		--ink-300: #c9bba4;
		--ink-100: #f2e9d8;
		--paper: #fbf3e1;

		--yellow-100: #fbeacb;
		--yellow-300: #f3d583;
		--yellow-500: #efc050;
		--yellow-700: #c99a2e;
		--yellow-900: #8c6c1b;
		--brick-100: #f3dcd2;
		--brick-300: #d68a6e;
		--brick-500: #a8462f;
		--brick-700: #832e1c;
		--brick-900: #5c2013;
		--pickle-100: #e3e8d5;
		--pickle-300: #a9b98b;
		--pickle-500: #6b7b4a;
		--pickle-700: #4f5e34;
		--pickle-900: #37421f;
		--teal-100: #d8e8e7;
		--teal-300: #7eacad;
		--teal-500: #367577;
		--teal-700: #24565a;
		--teal-900: #173b3e;

		/* ── roles ── */
		--bg: var(--paper);
		--surface: #fffdf7;
		--surface-2: var(--ink-100);
		--primary: var(--yellow-500);
		--primary-hover: var(--yellow-700);
		--primary-tint: var(--yellow-100);
		--on-primary: var(--ink-900);
		--text: var(--ink-900);
		--text-2: var(--ink-700);
		--text-3: var(--ink-500);
		--border: var(--ink-300);
		--green: var(--pickle-500);
		--green-bg: var(--pickle-100);
		--amber: var(--yellow-900);
		--amber-bg: var(--yellow-100);
		--danger: var(--brick-700);
		--danger-bg: var(--brick-100);
		--accent: var(--brick-500);
		--accent-tint: var(--brick-100);
		--info: var(--teal-500);
		--info-bg: var(--teal-100);
		--focus: var(--teal-500);

		/* ── shape ── */
		--radius-lg: 20px;
		--radius-xl: var(--radius-lg);
		--radius: 14px;
		--radius-sm: 8px;
		--radius-pill: 999px;

		--shadow-flat: 0 1px 2px rgba(43, 33, 24, 0.08), 0 1px 1px rgba(43, 33, 24, 0.04);
		--shadow-pop: 4px 4px 0 var(--ink-900);
		--shadow-pop-sm: 3px 3px 0 var(--ink-900);
		--shadow: var(--shadow-flat);
		--border-ink: 2px solid var(--ink-900);
		--border-hair: 1.5px solid var(--border);

		/* ── type ── */
		--font-display: 'Big Shoulders Display', 'Arial Narrow', system-ui, sans-serif;
		--font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
		--tracking-caps: 0.08em;

		/* ── space and rhythm ── */
		--space-1: 4px;
		--space-2: 8px;
		--space-3: 12px;
		--space-4: 16px;
		--space-5: 24px;
		--space-6: 32px;
		/* Nothing tappable may be smaller than this (NF-2: children's fingers). */
		--tap-target: 44px;

		/* ── motion ── */
		--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
		--duration-fast: 120ms;
		--duration-normal: 200ms;

		/* ── chrome ── */
		--nav-h: 56px;
		--sidebar-w: 200px;
		--safe-b: env(safe-area-inset-bottom, 0px);
		--nav-bg: rgba(251, 243, 225, 0.94);
	}

	/* The hallway display is the one deliberately dark surface; everything else
	   stays on the light paper palette, so this is opt-in per page rather than a
	   media query. */
	[data-theme='dark'] {
		--bg: var(--ink-900);
		--surface: var(--ink-700);
		--surface-2: #382a1d;
		--primary: var(--yellow-500);
		--primary-tint: #4a3b1f;
		--text: var(--paper);
		--text-2: var(--ink-300);
		--text-3: var(--ink-300);
		--border: var(--ink-500);
		--green: var(--pickle-300);
		--green-bg: var(--pickle-900);
		--amber: var(--yellow-300);
		--amber-bg: var(--yellow-900);
		--danger-bg: var(--brick-900);
		--shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.3);
		--nav-bg: rgba(43, 33, 24, 0.96);
	}
}

/* --- 30-base.css --- */
@layer base {
	html {
		height: 100%;
		background: var(--bg);
		-webkit-text-size-adjust: 100%;
	}

	body {
		min-height: 100%;
		background: var(--bg);
		color: var(--text);
		font-family: var(--font-body);
		font-size: 16px;
		line-height: 1.5;
		-webkit-font-smoothing: antialiased;
		-webkit-tap-highlight-color: transparent;
	}

	h1, h2, h3 {
		font-family: var(--font-display);
		font-weight: 700;
		line-height: 1.05;
		letter-spacing: 0.01em;
	}

	h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
	h2 { font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem); }
	h3 { font-size: 1.15rem; }

	a {
		color: inherit;
		text-underline-offset: 0.2em;
	}

	/* iOS zooms the page when a focused input is under 16px. */
	input,
	textarea,
	select {
		font-size: max(16px, 1em);
	}

	button {
		cursor: pointer;
	}

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

	/* Sprite icons: sized by the text around them, coloured by it too. */
	.icon {
		display: inline-flex;
		inline-size: 1em;
		block-size: 1em;
		vertical-align: -0.15em;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

/* --- 40-layout.css --- */
@layer layout {
	/* The app's own pages sit in a narrow column on a phone and a wider one
	   beside the sidebar on a desktop. Everything is sized in relation to the
	   content rather than to a list of breakpoints. */
	main {
		max-inline-size: 34rem;
		margin-inline: auto;
		padding-inline: var(--space-4);
		padding-block-end: calc(var(--nav-h) + var(--safe-b) + var(--space-5));
	}

	@media (min-width: 40rem) {
		main {
			max-inline-size: 52rem;
			padding-block-end: var(--space-6);
		}
	}

	/* Login and enrolment: one thing to do, centred, no navigation. */
	.entry {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
		text-align: center;
		min-block-size: 100dvh;
		justify-content: center;
		padding-block: var(--space-6);
	}

	.entry__logo {
		inline-size: 5rem;
		block-size: auto;
	}

	.entry__lead {
		color: var(--text-2);
		max-inline-size: 28rem;
	}

	.entry__help {
		color: var(--text-3);
		font-size: 0.875rem;
		max-inline-size: 28rem;
	}

	.entry .card {
		inline-size: min(100%, 22rem);
		text-align: start;
	}

	/* Two utility-ish layout primitives, used everywhere so that spacing is a
	   property of the container rather than of each child. */
	.stack {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.cluster {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
	}
}

/* --- 50-components.css --- */
@layer components {
	/* Card: the one surface everything sits on. */
	.card {
		background: var(--surface);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-flat);
		padding: var(--space-4);
	}

	/* Button. Every tappable thing is at least 44px tall (NF-2), because the
	   people using this app include a six-year-old on an iPad. */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		min-block-size: var(--tap-target);
		padding-inline: var(--space-4);
		border: var(--border-ink);
		border-radius: var(--radius-pill);
		background: var(--surface);
		color: var(--text);
		font-weight: 700;
		text-decoration: none;
		transition: transform var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-fast) var(--ease-out);
	}

	.btn:hover {
		box-shadow: var(--shadow-pop-sm);
		transform: translate(-1px, -1px);
	}

	.btn:active {
		box-shadow: none;
		transform: translate(1px, 1px);
	}

	.btn:disabled {
		opacity: 0.55;
		box-shadow: none;
		transform: none;
		cursor: not-allowed;
	}

	.btn--primary {
		background: var(--primary);
		color: var(--on-primary);
	}

	.btn--danger {
		background: var(--danger-bg);
		color: var(--danger);
	}

	.btn--quiet {
		border-color: transparent;
		background: transparent;
		font-weight: 600;
	}

	/* Field: a label, its control, and an optional hint, as one unit. */
	.field {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
	}

	.field label {
		font-size: 0.875rem;
		font-weight: 700;
		color: var(--text-2);
	}

	.field input,
	.field select,
	.field textarea {
		min-block-size: var(--tap-target);
		padding: var(--space-2) var(--space-3);
		border: var(--border-hair);
		border-radius: var(--radius);
		background: var(--surface);
	}

	.field__hint {
		font-size: 0.8125rem;
		color: var(--text-3);
	}

	/* Section label: the small caps heading above a group. */
	.sec-label {
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: var(--tracking-caps);
		text-transform: uppercase;
		color: var(--text-3);
	}
}

@layer state {
	/* Status line under a passkey button. Empty until something happens, so it
	   takes no room and announces itself through aria-live when it fills. */
	.entry__status:empty {
		display: none;
	}

	.entry__status {
		font-size: 0.875rem;
		color: var(--text-2);
	}

	.entry__status.is-error {
		color: var(--danger);
		font-weight: 600;
	}
}

@layer utilities {
	.visually-hidden {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* --- 55-rows.css --- */
@layer components {
	/* A list of things with a title, a bit of detail, and something to do with
	   them: passkeys, sessions, members, list items. One shape, used everywhere. */
	.rows {
		display: flex;
		flex-direction: column;
	}

	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding-block: var(--space-3);
		border-block-end: var(--border-hair);
	}

	.rows > .row:last-child {
		border-block-end: none;
	}

	.row__title {
		font-weight: 700;
	}

	.row__meta {
		font-size: 0.8125rem;
		color: var(--text-3);
	}

	/* An empty state says what would be here, rather than showing a blank box. */
	.empty {
		padding-block: var(--space-3);
		color: var(--text-3);
	}

	.notice {
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius);
		background: var(--amber-bg);
		color: var(--amber);
		font-weight: 600;
	}

	/* Checkbox lists: the tap target is the whole row, not the 16px box. */
	.checks {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
		gap: var(--space-1);
	}

	.check {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		min-block-size: var(--tap-target);
		padding-inline: var(--space-2);
		border-radius: var(--radius);
		font-weight: 600;
	}

	.check:hover {
		background: var(--surface-2);
	}

	.check input {
		inline-size: 1.25rem;
		block-size: 1.25rem;
		accent-color: var(--primary);
	}

	/* A link meant to be copied: it must wrap rather than run off the screen. */
	.linkbox {
		padding: var(--space-3);
		border-radius: var(--radius);
		background: var(--surface-2);
		font-family: ui-monospace, SFMono-Regular, monospace;
		font-size: 0.8125rem;
		overflow-wrap: anywhere;
	}

	fieldset {
		margin: 0;
		padding: 0;
		border: none;
	}

	legend {
		padding: 0;
	}
}

@layer components {
	/* A chore's icon, and the balance a child cares about most. */
	.chore__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		border-radius: var(--radius-pill);
		background: var(--primary-tint);
	}

	.chore__icon .icon {
		inline-size: 1.1rem;
		block-size: 1.1rem;
	}

	.allowance__sum {
		font-family: var(--font-display);
		font-size: clamp(2rem, 6vw, 3rem);
		font-weight: 800;
		line-height: 1;
	}
}

/* --- 60-nav.css --- */
@layer layout {
	/* One element, two shapes: a bar along the bottom of a phone, a sidebar on
	   anything wider. The markup does not change between them. */
	.nav {
		position: fixed;
		inset-block-end: 0;
		inset-inline: 0;
		z-index: 200;
		display: flex;
		align-items: stretch;
		block-size: calc(var(--nav-h) + var(--safe-b));
		padding-block-end: var(--safe-b);
		background: var(--nav-bg);
		backdrop-filter: blur(20px);
		border-block-start: 1px solid var(--border);
	}

	.nav__brand {
		display: none;
	}

	.nav__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-1);
		padding: 6px 2px;
		border: none;
		background: none;
		color: var(--text-3);
		text-decoration: none;
		transition: color var(--duration-fast) var(--ease-out);
	}

	.nav__item.is-active {
		color: var(--ink-900);
	}

	.nav__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 30px;
		block-size: 30px;
		border-radius: var(--radius-pill);
		transition: background var(--duration-fast) var(--ease-out);
	}

	.nav__icon .icon {
		inline-size: 20px;
		block-size: 20px;
	}

	.nav__item.is-active .nav__icon {
		background: var(--yellow-500);
	}

	.nav__item.is-active .nav__icon .icon {
		stroke-width: 2.5;
	}

	.nav__label {
		font-size: 9px;
		font-weight: 500;
		line-height: 1;
	}

	.nav__item.is-active .nav__label {
		font-weight: 800;
	}

	@media (min-width: 40rem) {
		.nav {
			inset-block: 0 auto;
			inset-inline: 0 auto;
			inline-size: var(--sidebar-w);
			block-size: 100dvh;
			flex-direction: column;
			align-items: stretch;
			justify-content: flex-start;
			padding-block: var(--space-5) var(--space-6);
			border-block-start: none;
			border-inline-end: 1px solid var(--border);
			overflow-y: auto;
		}

		.nav__brand {
			display: block;
			margin: var(--space-1) var(--space-5) var(--space-5);
		}

		.nav__item {
			flex: none;
			flex-direction: row;
			justify-content: flex-start;
			gap: var(--space-3);
			margin-inline: var(--space-2);
			padding: var(--space-2) var(--space-4);
			border-radius: var(--radius);
		}

		.nav__icon {
			inline-size: 26px;
			block-size: 26px;
		}

		.nav__icon .icon {
			inline-size: 16px;
			block-size: 16px;
		}

		.nav__label {
			font-size: 0.875rem;
		}

		body {
			padding-inline-start: var(--sidebar-w);
		}
	}
}

@layer components {
	/* Rotekassa: a native popover, so opening and closing it needs no script. */
	.drawer {
		position: fixed;
		inset: auto 0 calc(var(--nav-h) + var(--safe-b)) 0;
		inline-size: 100%;
		max-inline-size: 34rem;
		margin-inline: auto;
		padding: var(--space-4);
		border: none;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		background: var(--surface);
		box-shadow: 0 -8px 30px rgba(43, 33, 24, 0.18);
		color: var(--text);
	}

	.drawer::backdrop {
		background: rgba(43, 33, 24, 0.35);
	}

	.drawer__items {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
		gap: var(--space-2);
		margin-block: var(--space-3);
	}

	.drawer__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		min-block-size: 4.5rem;
		padding: var(--space-3);
		border-radius: var(--radius);
		background: var(--surface-2);
		text-decoration: none;
		font-size: 0.875rem;
		font-weight: 600;
	}

	.drawer__item .icon {
		inline-size: 22px;
		block-size: 22px;
	}

	.drawer__item.is-active {
		background: var(--primary-tint);
	}

	@media (min-width: 40rem) {
		.drawer {
			inset: auto auto var(--space-5) calc(var(--sidebar-w) + var(--space-4));
			max-inline-size: 26rem;
			border-radius: var(--radius-lg);
		}
	}

	/* The banner an adult sees while looking through a child's eyes. It has to be
	   impossible to miss, or someone will wonder why half the app is gone. */
	.viewas {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--space-3);
		padding: var(--space-2) var(--space-4);
		background: var(--info-bg);
		color: var(--teal-900);
		font-size: 0.875rem;
		text-align: center;
	}

	.switcher select {
		min-block-size: var(--tap-target);
		padding: var(--space-2) var(--space-3);
		border: var(--border-hair);
		border-radius: var(--radius);
		background: var(--surface);
	}
}

/* --- 70-calendar.css --- */
@layer components {
	.weeknav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
	}

	.weeknav__label {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 1.1rem;
		text-align: center;
	}

	/* One column of days on a phone; on a wider screen the week lays itself out
	   across as many columns as fit, without a breakpoint saying how many. */
	.week {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		gap: var(--space-3);
	}

	.day {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-flat);
	}

	/* Today is marked with a solid edge rather than a colour, so it still reads
	   as today for anyone who cannot tell the palette apart. */
	.day--today {
		border: var(--border-ink);
		box-shadow: var(--shadow-pop-sm);
	}

	.day__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-2);
		font-family: var(--font-display);
		font-size: 1.05rem;
	}

	.day__date {
		font-family: var(--font-body);
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--text-3);
	}

	.event {
		align-items: flex-start;
		gap: var(--space-3);
	}

	.event__body {
		flex: 1;
	}

	/* The dot repeats the calendar's colour. It is decoration: every event also
	   names its owner in the line underneath, so nothing depends on the colour. */
	.event__dot {
		flex: none;
		inline-size: 0.75rem;
		block-size: 0.75rem;
		margin-block-start: 0.35rem;
		border-radius: var(--radius-pill);
		background: var(--yellow-500);
	}

	.event__dot--gul { background: var(--yellow-500); }
	.event__dot--murstein { background: var(--brick-500); }
	.event__dot--pickle { background: var(--pickle-500); }
	.event__dot--teal { background: var(--teal-500); }

	.pill {
		display: inline-block;
		padding: 0.1em 0.6em;
		border-radius: var(--radius-pill);
		background: var(--info-bg);
		color: var(--teal-900);
		font-size: 0.75rem;
		font-weight: 700;
	}

	.row__meta--error {
		color: var(--danger);
	}
}

@layer components {
	/* The weather on the front page: the number, and what to put on. */
	.weather__now {
		display: flex;
		align-items: baseline;
		gap: var(--space-3);
	}

	.weather__icon .icon {
		inline-size: 2rem;
		block-size: 2rem;
	}

	.weather__temp {
		font-family: var(--font-display);
		font-size: 2.5rem;
		font-weight: 800;
		line-height: 1;
	}
}

/* --- 80-lists.css --- */
@layer components {
	.cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
		gap: var(--space-3);
	}

	.listcard {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		min-block-size: 4.5rem;
		padding: var(--space-4);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-flat);
		text-decoration: none;
	}

	.listcard:hover {
		box-shadow: var(--shadow-pop-sm);
	}

	.listcard__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border-radius: var(--radius-pill);
		background: var(--primary-tint);
	}

	.listcard__icon .icon {
		inline-size: 1.25rem;
		block-size: 1.25rem;
	}

	.listcard__name {
		display: block;
		font-weight: 700;
	}

	/* An item is a checkbox-sized target, its text, and the buttons that move or
	   remove it. Everything is a real button, so it all works without script. */
	.item {
		gap: var(--space-3);
	}

	.item__body {
		flex: 1;
	}

	.item--checked .row__title {
		text-decoration: line-through;
		color: var(--text-3);
	}

	.item__check {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: var(--tap-target);
		block-size: var(--tap-target);
		border: var(--border-ink);
		border-radius: var(--radius-pill);
		background: var(--surface);
	}

	.item--checked .item__check {
		background: var(--primary);
	}

	.item__check .icon {
		inline-size: 1.25rem;
		block-size: 1.25rem;
	}

	/* A square button for the arrows and the cross beside an item. */
	.btn--icon {
		inline-size: var(--tap-target);
		padding-inline: 0;
		font-size: 1.1rem;
	}

	.field--grow {
		flex: 1;
	}
}

@layer components {
	/* Diary photographs: as many across as fit, square, cropped to fill. */
	.photos {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
		gap: var(--space-2);
	}

	.photos img {
		inline-size: 100%;
		block-size: 100%;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: var(--radius);
		background: var(--surface-2);
	}

	/* A diary entry's own text keeps its line breaks without needing markup. */
	.prose {
		white-space: pre-wrap;
		line-height: 1.6;
	}
}

/* --- 90-kiosk.css --- */
@layer layout {
	/* The hallway display. Read from across a room, so everything is bigger and
	   the navigation is gone entirely — it is not a device you browse on. */
	.kiosk {
		max-inline-size: none;
		min-block-size: 100dvh;
		margin: 0;
		padding: var(--space-5);
		padding-block-end: var(--space-5);
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
		background: var(--bg);
		color: var(--text);
	}

	.kiosk__head {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--space-4);
	}

	.kiosk__clock {
		font-size: clamp(3rem, 10vw, 6rem);
		line-height: 1;
	}

	.kiosk__date {
		font-size: 1.25rem;
		color: var(--text-2);
	}

	.kiosk__weather {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--space-2);
		text-align: end;
		color: var(--text-2);
	}

	.kiosk__weather .weather__icon .icon {
		inline-size: 3rem;
		block-size: 3rem;
	}

	.kiosk__band {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.kiosk__big {
		font-family: var(--font-display);
		font-size: clamp(1.5rem, 3.5vw, 2.25rem);
		font-weight: 700;
		line-height: 1.1;
	}

	.kiosk .row {
		border-block-end-color: var(--border);
	}
}