/*
 * Life OS. Section 9.
 *
 * Plain CSS, custom properties, no build step. Every colour comes from a token
 * emitted by Lifeos_Theme. The only literal here is the neutral shadow on the
 * toast, which is a shadow rather than a colour; keep it that way.
 *
 * Layout: dark canvas, ivory cards, 12px radius, sidebar on desktop, bottom tab
 * bar on mobile. Breakpoints 480, 768, 1200.
 */

/* ---------- reset ---------------------------------------------------- */

.los *,
.los *::before,
.los *::after { box-sizing: border-box; }

.los { margin: 0; }

.los h1, .los h2, .los h3, .los p, .los ul, .los figure, .los fieldset {
	margin: 0;
	padding: 0;
}

.los ul,
.los ol { list-style: none; }

/* Named again on the lists that carry interface furniture rather than prose.
   The reset above should cover them; this is here because it did not, once. */
.los-habits,
.los-priorities,
.los-quick,
.los-tags,
.los-bars,
.los-schedule,
.los-counts,
.los-axis,
.los-stats { list-style: none; margin: 0; padding: 0; }
.los fieldset { border: 0; }
.los img, .los svg { max-width: 100%; }

/* ---------- page ------------------------------------------------------ */

body.los {
	background: var(--canvas);
	color: var(--card);
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	min-height: 100vh;
}

.los-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--brand);
	color: var(--on-brand);
	padding: 12px 16px;
	z-index: 100;
}
.los-skip:focus { left: 0; }

.los-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.los-main {
	flex: 1 1 auto;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px 16px calc(84px + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ---------- navigation ------------------------------------------------ */

.los-rail { display: none; }

.los-tabs {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	background: color-mix(in srgb, var(--ink) 92%, transparent);
	border-top: 1px solid color-mix(in srgb, var(--card) 12%, transparent);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	backdrop-filter: blur(12px);
}

.los-tabs__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 4px 12px;
	font-size: 11px;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: color-mix(in srgb, var(--card) 62%, transparent);
}

.los-tabs__link.is-current { color: var(--brand-lift); }

.los-tabs__link.is-current .los-icon { stroke: var(--brand-lift); }

.los-icon {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.los-icon--sm { width: 14px; height: 14px; }

/* ---------- headings -------------------------------------------------- */

.los-page__head { padding: 4px 4px 0; }

.los-eyebrow {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--card) 55%, transparent);
}

.los-display {
	font-family: var(--font-display);
	font-size: clamp(28px, 7vw, 40px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin-top: 6px;
}

.los-sub {
	margin-top: 6px;
	color: color-mix(in srgb, var(--card) 60%, transparent);
	font-size: 14px;
}

/* ---------- cards ----------------------------------------------------- */

.los-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.los-card {
	position: relative;
	background: var(--card);
	color: var(--ink);
	border-radius: 12px;
	padding: 20px;
	overflow: hidden;
}

/* One tint per module, so a card is recognisable by colour before it is read. */
.los-card[style*="--tint"]::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 4px;
	background: var(--tint, var(--slate));
}

.los-card__title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.005em;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.los-card__lead { margin-top: 10px; font-size: 15px; }

.los-card__note,
.los-card__pending {
	margin-top: 10px;
	font-size: 13px;
	color: var(--muted);
}

.los-card__pending {
	display: inline-block;
	background: var(--brand-soft);
	color: var(--brand-text);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
}

.los-empty { text-align: start; }
.los-empty p { margin-top: 8px; color: var(--muted); font-size: 14px; }

.los-note {
	background: var(--brand-soft);
	color: var(--brand-text);
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 14px;
}

/* ---------- controls -------------------------------------------------- */

.los-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 11px 18px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--card-pure);
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.los-btn:hover { border-color: var(--muted); }

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

.los-btn--primary:hover {
	background: var(--brand-deep);
	border-color: var(--brand-deep);
}

.los-btn:focus-visible,
.los-form input:focus-visible,
.los-form select:focus-visible,
.los-tabs__link:focus-visible,
.los-rail__link:focus-visible {
	outline: 2px solid var(--brand-lift);
	outline-offset: 2px;
}

.los-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 4px;
}

.los-chip {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--card) 18%, transparent);
	color: color-mix(in srgb, var(--card) 72%, transparent);
	font-size: 13px;
	text-decoration: none;
}

.los-chip.is-current {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--on-brand);
}

/* ---------- forms ----------------------------------------------------- */

.los-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.los-field { display: block; margin-top: 16px; }

.los-field__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.los-field__help {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--muted);
}

.los-field--row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.los-field--row > label { flex: 1 1 140px; }

/* Scoped to .los-form, not .los-card: the capture screens style their own
   inputs, and a card-wide rule outranked them on specificity. */
.los-form input[type="text"],
.los-form input[type="url"],
.los-form input[type="number"],
.los-form input[type="time"],
.los-form select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--card-pure);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
}

.los-form select,
.los-fields__item select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 49%, var(--muted) 50%), linear-gradient(-45deg, transparent 49%, var(--muted) 50%);
	background-size: 6px 6px, 6px 6px;
	background-position: right 18px center, right 12px center;
	background-repeat: no-repeat;
	padding-inline-end: 34px;
}

.los-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	font-size: 15px;
}

.los-check input { width: 20px; height: 20px; accent-color: var(--brand); }

.los-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 0 4px;
}

.los-actions .los-btn { margin-top: 0; }

.los-actions__status {
	font-size: 13px;
	color: color-mix(in srgb, var(--card) 70%, transparent);
}

.los-actions__status[data-state="error"] { color: var(--brand-lift); }

.los-readout {
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--brand-soft);
	color: var(--brand-text);
	font-size: 13px;
}

.los-counts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 12px;
}

.los-counts li { font-size: 13px; color: var(--muted); }
.los-counts strong { display: block; font-size: 20px; color: var(--ink); }

/* ---------- appearance screen ----------------------------------------- */

.los-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin-top: 14px;
}

/* A colour row is a hex field first. The native swatch is a convenience next
   to it, not the control: a colour can be typed, pasted, or read off a brand
   sheet without a colour picker in the way. */
.los-swatch {
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: 10px;
}

.los-swatch.is-overridden { border-color: var(--brand); }

.los-swatch__picker {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: none;
	cursor: pointer;
}

.los-swatch__field { display: block; min-width: 0; }

.los-swatch__name {
	display: block;
	font-size: 11px;
	font-family: var(--font-mono);
	color: var(--muted);
	margin-bottom: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.los-hex__row {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px 8px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--card-pure);
}

.los-hex__hash {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--muted);
}

.los-hex__input {
	width: 8ch;
	border: 0;
	padding: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.los-hex__input:focus { outline: none; }
.los-hex__row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.los-hex__input.is-invalid { color: var(--bad); }
.los-hex__row:has(.is-invalid) { border-color: var(--bad); }

.los-hex--accent { display: block; margin-top: 18px; }

.los-hex--accent .los-hex__row {
	margin-top: 6px;
	padding: 6px 10px;
	gap: 4px;
}

.los-hex--accent .los-hex__input { width: 9ch; font-size: 15px; }
.los-hex--accent .los-btn { margin: 0; margin-inline-start: 8px; padding: 7px 14px; }

.los-preview__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.los-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
}

.los-pill--ok   { background: color-mix(in srgb, var(--ok) 16%, transparent);   color: var(--ok); }
.los-pill--warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.los-pill--bad  { background: color-mix(in srgb, var(--bad) 14%, transparent);  color: var(--bad); }

/* ---------- toast ------------------------------------------------------ */

.los-toast {
	position: fixed;
	inset-inline: 16px;
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	z-index: 40;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--card);
	color: var(--ink);
	font-size: 14px;
	box-shadow: 0 8px 30px rgb(0 0 0 / 35%);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 160ms ease, transform 160ms ease;
	pointer-events: none;
}

.los-toast.is-visible { opacity: 1; transform: translateY(0); }
.los-toast[data-state="error"] { border-inline-start: 4px solid var(--bad); }

/* ---------- breakpoints ------------------------------------------------ */

@media (min-width: 480px) {
	.los-main { padding-inline: 24px; }
}

@media (min-width: 768px) {
	.los-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.los-card--greeting { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
	.los-shell { flex-direction: row; }

	.los-tabs { display: none; }

	.los-rail {
		display: flex;
		flex-direction: column;
		gap: 24px;
		position: sticky;
		top: 0;
		align-self: flex-start;
		height: 100vh;
		width: 220px;
		flex: 0 0 220px;
		padding: 24px 16px;
		border-inline-end: 1px solid color-mix(in srgb, var(--card) 10%, transparent);
	}

	.los-rail__mark {
		font-family: var(--font-display);
		font-size: 24px;
		width: 40px;
		height: 40px;
		display: grid;
		place-items: center;
		border-radius: 10px;
		background: var(--brand);
		color: var(--on-brand);
	}

	.los-rail__nav { display: flex; flex-direction: column; gap: 2px; }

	.los-rail__link {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 12px;
		border-radius: 10px;
		font-size: 14px;
		text-decoration: none;
		color: color-mix(in srgb, var(--card) 68%, transparent);
	}

	.los-rail__link:hover { background: color-mix(in srgb, var(--card) 7%, transparent); }

	.los-rail__link.is-current {
		background: var(--brand-dim);
		color: var(--brand-lift);
	}

	.los-rail__foot { margin-top: auto; }

	.los-main {
		padding: 32px 32px 48px;
		gap: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.los-toast { transition: none; }
}

/* ======================================================================
   Capture components. Phase 1.
   Tap targets are 44px minimum: this screen is used twice a day on a phone,
   half of it in the dark.
   ====================================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.los-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.los-page__actions .los-btn { margin-top: 0; }

/* ---------- day navigation --------------------------------------------- */

.los-daynav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.los-daynav__step {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	color: color-mix(in srgb, var(--card) 70%, transparent);
	border: 1px solid color-mix(in srgb, var(--card) 14%, transparent);
}

.los-daynav__step:hover { color: var(--brand-lift); border-color: var(--brand); }

.los-day {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ---------- habits ------------------------------------------------------ */

.los-habits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.los-habit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px 8px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card-pure);
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.los-habit__tick {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	color: transparent;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.los-habit.is-done {
	border-color: var(--tint, var(--brand));
	background: color-mix(in srgb, var(--tint, var(--brand)) 12%, var(--card-pure));
}

.los-habit.is-done .los-habit__tick {
	background: var(--tint, var(--brand));
	border-color: var(--tint, var(--brand));
	color: var(--on-brand);
}

.los-habit.is-unexpected { opacity: 0.62; }

.los-habit__note {
	font-size: 11px;
	color: var(--muted);
}

.los-habits--large .los-habit {
	width: 100%;
	justify-content: flex-start;
	min-height: 52px;
	border-radius: 12px;
	font-size: 16px;
}

.los-habits--large { flex-direction: column; }
.los-habits--large > li { width: 100%; }

/* ---------- priorities --------------------------------------------------- */

.los-priorities { margin-top: 14px; }

.los-priority {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--line);
}

.los-priority:last-child { border-bottom: 0; }

.los-priority__check input {
	width: 24px;
	height: 24px;
	accent-color: var(--brand);
}

.los-priority__text,
.los-focus__input {
	flex: 1 1 auto;
	width: 100%;
	min-height: 44px;
	padding: 8px 2px;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: 16px;
}

.los-priority__text:focus,
.los-focus__input:focus {
	outline: none;
	border-bottom-color: var(--brand);
}

.los-priority.is-done .los-priority__text {
	text-decoration: line-through;
	color: var(--muted);
}

.los-focus__input { margin-top: 8px; font-size: 17px; }

/* ---------- scales and ranges -------------------------------------------- */

.los-scale { margin-top: 18px; }

.los-scale__row {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.los-scale__row--wide { flex-wrap: wrap; gap: 6px; }

.los-scale__dot {
	flex: 1 1 0;
	min-width: 44px;
	min-height: 44px;
	display: grid;
	place-items: center;
	gap: 2px;
	padding: 6px 4px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--card-pure);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}

.los-scale__dot.is-set {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--on-brand);
}

.los-scale__caption { font-size: 10px; color: var(--muted); }
.los-scale__dot.is-set .los-scale__caption { color: inherit; opacity: 0.85; }

.los-range { display: block; margin-top: 18px; }

.los-range .los-field__label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.los-range__value { font-variant-numeric: tabular-nums; color: var(--brand-text); }

.los-range input[type="range"] {
	width: 100%;
	accent-color: var(--brand);
	height: 32px;
}

/* ---------- typed fields --------------------------------------------------- */

.los-fields {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
	margin-top: 14px;
}

.los-fields__item { display: block; }

.los-fields__item input[type="number"],
.los-fields__item input[type="text"],
.los-fields__item input[type="date"],
.los-fields__item input[type="time"],
.los-fields__item select,
.los-fields__item textarea,
.los-question textarea,
.los-note-field textarea,
.los-inline-input input {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--card-pure);
	color: var(--ink);
	font: inherit;
	font-size: 16px;
}

.los-fields__item input:focus,
.los-fields__item select:focus,
.los-fields__item textarea:focus,
.los-question textarea:focus,
.los-note-field textarea:focus,
.los-inline-input input:focus {
	outline: 2px solid var(--brand);
	outline-offset: 1px;
	border-color: var(--brand);
}

.los-field__unit {
	font-weight: 400;
	color: var(--muted);
	font-size: 12px;
}

.los-question { display: block; margin-top: 16px; }
.los-note-field, .los-inline-input { display: block; margin-top: 12px; }

/* ---------- readouts -------------------------------------------------------- */

.los-card__count {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 10px;
}

.los-card__count strong {
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 1;
	font-weight: 500;
}

.los-card__count span { color: var(--muted); font-size: 13px; }

.los-progress {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 14px;
}

.los-progress__dial { flex: 0 0 84px; width: 84px; }

.los-stats {
	display: grid;
	gap: 8px;
	flex: 1 1 auto;
}

.los-stats dt { font-size: 12px; color: var(--muted); }
.los-stats dd { font-size: 16px; font-variant-numeric: tabular-nums; }

.los-meter {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
	margin-top: 10px;
}

.los-meter > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--tint, var(--brand));
}

.los-bars { margin-top: 14px; display: grid; gap: 10px; }

.los-bars__row {
	display: grid;
	grid-template-columns: minmax(72px, 1fr) 2fr auto;
	align-items: center;
	gap: 10px;
}

.los-bars__label { font-size: 13px; }
.los-bars__value { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.los-bars .los-meter { margin-top: 0; }

/* ---------- charts ---------------------------------------------------------- */

.los-chart__figure { margin: 14px 0 0; }

.los-chart { width: 100%; height: auto; display: block; }
.los-chart--bar, .los-chart--line { height: 72px; }
.los-chart--donut { height: auto; }

.los-chart__centre {
	font-family: var(--font-ui);
	font-size: 8px;
	font-weight: 600;
	fill: var(--ink);
}

.los-chart__empty { margin-top: 12px; font-size: 13px; color: var(--muted); }

.los-chart__data { margin-top: 8px; font-size: 12px; color: var(--muted); }
.los-chart__data summary { cursor: pointer; }
.los-chart__data table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.los-chart__data th, .los-chart__data td { text-align: start; padding: 3px 0; font-weight: 400; }
.los-chart__data td { text-align: end; font-variant-numeric: tabular-nums; }

.los-heat {
	display: grid;
	grid-template-columns: repeat(var(--heat-columns, 7), 1fr);
	gap: 4px;
	margin-top: 12px;
}

.los-heat__cell {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	min-height: 18px;
}

.los-axis {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-size: 10px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- schedule, tags, quick actions ------------------------------------ */

.los-schedule { margin-top: 14px; display: grid; gap: 2px; }

.los-schedule__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	border-inline-start: 3px solid var(--tint, var(--slate));
	background: color-mix(in srgb, var(--tint, var(--slate)) 8%, transparent);
	font-size: 14px;
}

.los-schedule__row.is-now {
	border-inline-start-color: var(--brand);
	background: var(--brand-soft);
}

.los-schedule__time {
	font-variant-numeric: tabular-nums;
	color: var(--muted);
	font-size: 13px;
	min-width: 42px;
}

.los-schedule__label { flex: 1 1 auto; }

.los-schedule__now {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-text);
}

.los-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.los-tag {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--tint, var(--slate)) 14%, transparent);
	font-size: 12px;
}

.los-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.los-quick__link {
	display: inline-block;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	text-decoration: none;
	font-size: 13px;
}

.los-quick__link:hover { border-color: var(--brand); color: var(--brand-text); }

/* ---------- sticky save row ---------------------------------------------------- */

.los-actions--sticky {
	position: sticky;
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	z-index: 10;
	padding: 12px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--ink) 92%, transparent);
	backdrop-filter: blur(10px);
}

@media (min-width: 1200px) {
	.los-actions--sticky { bottom: 20px; }
	.los-fields { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

.los-card__title a { color: inherit; text-decoration: none; }
.los-card__title a:hover { color: var(--brand-text); }
.los-card__note a { color: var(--brand-text); }


/* ======================================================================
   The colour panel. Reachable from every screen: the rail on desktop, a
   floating button on mobile. Colours are per user.
   ====================================================================== */

.los-theme-fab {
	position: fixed;
	inset-inline-end: 16px;
	bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	z-index: 25;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--card) 16%, transparent);
	border-radius: 50%;
	background: var(--ink);
	color: var(--brand-lift);
	cursor: pointer;
}

.los-theme-fab:hover { border-color: var(--brand); }

.los-theme-open {
	width: 100%;
	border: 0;
	background: none;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.los-panel { position: fixed; inset: 0; z-index: 60; }

.los-panel__scrim {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 55%);
}

.los-panel__sheet {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	background: var(--card);
	color: var(--ink);
	border-radius: 16px 16px 0 0;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.los-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 12px;
	border-bottom: 1px solid var(--line);
}

.los-panel__head h2 { font-size: 16px; font-weight: 600; }

.los-panel__close {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--card-pure);
	color: var(--ink);
	cursor: pointer;
}

.los-panel__body { padding: 16px 20px 20px; overflow-y: auto; }

.los-accents { border: 0; }

.los-accents__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.los-accent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 6px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card-pure);
	color: var(--ink);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.los-accent__chip {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgb(0 0 0 / 12%);
}

.los-accent.is-current {
	border-color: var(--brand);
	box-shadow: inset 0 0 0 1px var(--brand);
}

.los-panel__advanced { margin-top: 18px; }

.los-panel__advanced summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 0;
}

.los-panel__group {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 14px;
}

.los-panel__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.los-panel__actions .los-btn { margin-top: 0; }
.los-panel__actions .los-actions__status { color: var(--muted); }

body.los-panel-open { overflow: hidden; }

@media (min-width: 768px) {
	.los-panel__sheet {
		inset-inline-start: auto;
		inset-inline-end: 20px;
		bottom: 20px;
		top: 20px;
		width: 380px;
		max-height: none;
		border-radius: 14px;
	}
}

@media (min-width: 1200px) {
	.los-theme-fab { display: none; }
}


/* ======================================================================
   Right to left.

   The layout above is written with logical properties, so a Dari interface
   mirrors on its own. These are the four places a physical direction is
   unavoidable.
   ====================================================================== */

/* 1. The select arrow is a background image, and background-position is
      physical. */
[dir="rtl"] .los-form select,
[dir="rtl"] .los-fields__item select {
	background-position: left 18px center, left 12px center;
	padding-inline-end: 12px;
	padding-inline-start: 34px;
}

/* 2. Previous and next point the other way when the page reads the other way.
      The glyphs are drawn, not typed, so the flip has to be explicit. Only
      directional glyphs flip: a tick is a tick in both directions. */
[dir="rtl"] .los-daynav__step .los-icon {
	transform: scaleX(-1);
}

/* 3. Bar and line charts run oldest to newest along the reading direction, so
      the drawing mirrors while the data table underneath stays in order. The
      donut is deliberately left alone: a progress arc is not a sequence. */
[dir="rtl"] .los-chart--bar,
[dir="rtl"] .los-chart--line {
	transform: scaleX(-1);
}

/* 4. Numbers stay numbers. Latin digits, units and hex codes are read left to
      right inside an otherwise right to left line. */
[dir="rtl"] .los-swatch__name,
[dir="rtl"] .los-hex__input,
[dir="rtl"] .los-schedule__time,
[dir="rtl"] .los-bars__value,
[dir="rtl"] .los-range__value {
	direction: ltr;
	text-align: start;
}

/* ======================================================================
   The credit line, and the signed-out sign-up page.
   ====================================================================== */

.los-credit {
	padding: 22px 16px calc(96px + env(safe-area-inset-bottom, 0px));
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.01em;
	color: color-mix(in srgb, var(--card) 42%, transparent);
}

.los-credit__name { color: color-mix(in srgb, var(--card) 62%, transparent); }

@media (min-width: 1200px) {
	.los-credit { padding-bottom: 28px; }
}

/* ---------- sign-up ------------------------------------------------------ */

.los-gate {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px 16px;
	background: var(--canvas);
}

.los-gate__card {
	width: 100%;
	max-width: 420px;
	background: var(--card);
	color: var(--ink);
	border-radius: 14px;
	padding: 28px 24px;
}

.los-gate__langs {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	margin-bottom: 18px;
}

.los-gate__lang {
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12px;
	text-decoration: none;
	color: var(--muted);
}

.los-gate__lang.is-current {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--on-brand);
}

.los-gate__title {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.los-gate__intro {
	margin-top: 8px;
	font-size: 14px;
	color: var(--muted);
}

.los-gate__message {
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
}

.los-gate__message.is-ok {
	background: color-mix(in srgb, var(--ok) 14%, transparent);
	color: var(--ok);
}

.los-gate__message.is-error {
	background: color-mix(in srgb, var(--bad) 12%, transparent);
	color: var(--bad);
}

.los-gate__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 20px;
}

.los-gate__field { display: block; }

.los-gate__field input,
.los-gate__field select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--card-pure);
	color: var(--ink);
	font: inherit;
	font-size: 16px;
}

.los-gate__field input:focus,
.los-gate__field select:focus {
	outline: 2px solid var(--brand);
	outline-offset: 1px;
	border-color: var(--brand);
}

/* Off screen for people, present for anything filling in every field. */
.los-gate__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.los-gate__submit { margin-top: 4px; width: 100%; justify-content: center; }

.los-gate__alt {
	margin-top: 18px;
	font-size: 13px;
	color: var(--muted);
	text-align: center;
}

.los-gate__alt a { color: var(--brand-text); }

.los-gatepage .los-credit { padding-bottom: 0; }

/* ---------- the connection check ------------------------------------------ */

.los-check {
	margin-top: 16px;
	display: grid;
	gap: 6px;
	font-size: 13px;
}

.los-check__row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 9px 12px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--ink) 5%, transparent);
	color: var(--ink);
}

.los-check__row::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: 7px;
	border-radius: 50%;
	background: var(--muted);
}

.los-check__row.is-ok::before { background: var(--ok); }

.los-check__row.is-bad {
	background: color-mix(in srgb, var(--bad) 10%, transparent);
	color: var(--bad);
	font-weight: 500;
}

.los-check__row.is-bad::before { background: var(--bad); }