/* Caliph Open Sky, for the web.
   The phone app's design language (product/mobile/lib/theme/caliph_tokens.dart) as CSS, for the landing
   page and the task website. Colours, radii, sizes and shadows are the phone app's numbers, and
   tests/design-system.test.mjs checks them against that file. Light by default; the task website sets
   data-theme="dark" on <html>. The Morning Sage tokens (tokens.css) stay as they are for the extension. */

:root {
	/* Colour */
	--sky-bg-top: #e3ede3;
	--sky-bg-mid: #f2f6f1;
	--sky-bg-bottom: #f7f8f2;
	--sky-surface: #fbfcf9;
	--sky-surface-raised: #fbfcf9;
	--sky-inset: #f2f6f1;
	--sky-tint: #eef3ec;
	--sky-on-tint: #3d6550;
	--sky-ring-track: #dce7da;
	--sky-primary: #3d6550;
	--sky-primary-pressed: #315640;
	--sky-on-primary: #fbfcf9;
	--sky-accent: #3d6550;
	--sky-ink: #243b31;
	--sky-secondary: #526257;
	--sky-control: #718975;
	--sky-hairline: #eaf0e8;
	--sky-edge: transparent;
	--sky-edge-subtle: transparent;
	--sky-selected: #243b31;
	--sky-on-selected: #fbfcf9;
	--sky-danger: #a8261d;
	--sky-danger-tint: #f8e9e7;
	--sky-notice: #7a5c1e;
	--sky-notice-tint: #f4eedf;
	--sky-notice-dot: #b08a3e;
	--sky-neutral-tint: rgb(36 59 49 / 6%);
	--sky-check-fill: #3d6550;
	--sky-check-tick: #ffffff;
	--sky-bar-focused: rgb(61 101 80 / 85%);
	--sky-bar-now: #243b31;
	--sky-bar-remaining: #c3d3c2;
	--sky-bar-outside: rgb(201 213 200 / 60%);

	/* Shapes. Every pill and circle is fully rounded. */
	--sky-radius-checkbox: 6px;
	--sky-radius-field: 16px;
	--sky-radius-group: 24px;
	--sky-radius-layer-back: 26px;
	--sky-radius-layer-mid: 28px;
	--sky-radius-card: 30px;
	--sky-radius-sheet: 34px;
	--sky-radius-pill: 999px;

	/* Sizes */
	--sky-size-button-large: 56px;
	--sky-size-button-medium: 52px;
	--sky-size-button-small: 48px;
	--sky-size-text-button: 44px;
	--sky-size-circle-nav: 48px;
	--sky-size-filter-chip: 36px;
	--sky-size-context-chip: 38px;
	--sky-size-checkbox: 22px;
	--sky-size-field: 52px;

	/* Elevation: float for chips, pills and fields; raised for side buttons; card for the big card;
	   group for lists; primary for the green pill. In dark, a 1px edge replaces most shadows. */
	--sky-shadow-float: 0 0 0 1px var(--sky-edge), 0 1px 2px rgb(36 59 49 / 5%), 0 10px 24px -12px rgb(36 59 49 / 30%);
	--sky-shadow-raised: 0 0 0 1px var(--sky-edge), 0 1px 2px rgb(36 59 49 / 5%), 0 14px 30px -14px rgb(36 59 49 / 34%);
	--sky-shadow-card: 0 0 0 1px var(--sky-edge-subtle), 0 1px 2px rgb(36 59 49 / 4%), 0 22px 46px -22px rgb(36 59 49 / 30%);
	--sky-shadow-group: 0 0 0 1px var(--sky-edge-subtle), 0 1px 2px rgb(36 59 49 / 4%), 0 18px 40px -24px rgb(36 59 49 / 26%);
	--sky-shadow-bar: 0 0 0 1px var(--sky-edge), 0 1px 2px rgb(36 59 49 / 5%), 0 18px 38px -16px rgb(36 59 49 / 34%);
	--sky-shadow-primary: 0 12px 24px -14px rgb(61 101 80 / 70%);
	--sky-shadow-accent-circle: 0 18px 34px -14px rgb(61 101 80 / 60%);
	--sky-shadow-stack-layer: 0 14px 30px -20px rgb(36 59 49 / 30%);

	/* Type: serif for every title, system sans for everything else. */
	--sky-font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
	--sky-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Motion */
	--sky-press: 100ms ease;
	--sky-state: 200ms ease;
	--sky-appear: 500ms ease;
	--sky-press-scale: 0.98;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--sky-bg-top: #16261e;
	--sky-bg-mid: #0f1a15;
	--sky-bg-bottom: #0d1712;
	--sky-surface: #18261f;
	--sky-surface-raised: #1d2c25;
	--sky-inset: #0f1a15;
	--sky-tint: rgb(168 199 173 / 12%);
	--sky-on-tint: #a8c7ad;
	--sky-ring-track: #2a3b33;
	--sky-primary: #dce7da;
	--sky-primary-pressed: #cad8c8;
	--sky-on-primary: #1e3328;
	--sky-accent: #a8c7ad;
	--sky-ink: #e9efe7;
	--sky-secondary: #a3b2a7;
	--sky-control: #6f8a77;
	--sky-hairline: rgb(233 239 231 / 7%);
	--sky-edge: rgb(233 239 231 / 7%);
	--sky-edge-subtle: rgb(233 239 231 / 5%);
	--sky-selected: #e9efe7;
	--sky-on-selected: #0f1a15;
	--sky-danger: #e58a80;
	--sky-danger-tint: rgb(229 138 128 / 14%);
	--sky-notice: #d9b66e;
	--sky-notice-tint: rgb(217 182 110 / 14%);
	--sky-notice-dot: #d9b66e;
	--sky-neutral-tint: rgb(233 239 231 / 6%);
	--sky-check-fill: #a8c7ad;
	--sky-check-tick: #0f1a15;
	--sky-bar-focused: rgb(168 199 173 / 85%);
	--sky-bar-now: #e9efe7;
	--sky-bar-remaining: #2e4238;
	--sky-bar-outside: rgb(42 59 51 / 60%);

	--sky-shadow-float: 0 0 0 1px var(--sky-edge), 0 10px 24px -12px rgb(0 0 0 / 60%);
	--sky-shadow-raised: 0 0 0 1px var(--sky-edge);
	--sky-shadow-card: 0 0 0 1px var(--sky-edge-subtle), 0 22px 46px -22px rgb(0 0 0 / 70%);
	--sky-shadow-group: 0 0 0 1px var(--sky-edge-subtle);
	--sky-shadow-bar: 0 0 0 1px var(--sky-edge), 0 18px 38px -16px rgb(0 0 0 / 70%);
	--sky-shadow-primary: none;
	--sky-shadow-accent-circle: 0 18px 34px -14px rgb(0 0 0 / 70%);
	--sky-shadow-stack-layer: none;
}

/* Components. A page that uses Tailwind imports this file into its components layer
   (@import "open-sky.css" layer(components)), so utilities still win over them. */
/* The page background: the gradient behind the sky. */
.sky-page {
	background: linear-gradient(to bottom, var(--sky-bg-top) 0, var(--sky-bg-mid) 48%, var(--sky-bg-bottom) 100%);
}

/* Cards float. A card never creates a stacking context of its own (no z-index, transform or
   isolation), so the stack layers can sit behind it. */
.sky-card {
	position: relative;
	background: var(--sky-surface);
	border-radius: var(--sky-radius-card);
	box-shadow: var(--sky-shadow-card);
}
.sky-card--stack::before,
.sky-card--stack::after {
	content: "";
	position: absolute;
	height: 60px;
	background: var(--sky-surface);
	box-shadow: var(--sky-shadow-stack-layer);
	pointer-events: none;
}
.sky-card--stack::before {
	z-index: -2;
	inset-inline: 28px;
	bottom: -20px;
	border-radius: var(--sky-radius-layer-back);
	opacity: 0.5;
}
.sky-card--stack::after {
	z-index: -1;
	inset-inline: 14px;
	bottom: -10px;
	border-radius: var(--sky-radius-layer-mid);
	opacity: 0.8;
}

/* A group is a list on one surface. Hairlines go between rows, never after the last. */
.sky-group {
	background: var(--sky-surface);
	border-radius: var(--sky-radius-group);
	box-shadow: var(--sky-shadow-group);
	padding-inline: 16px;
}
.sky-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-block: 14px;
}
.sky-row + .sky-row {
	border-top: 1px solid var(--sky-hairline);
}

/* Buttons are pills. The 48px size is the default; large is 56 (a screen's main action), medium 52 (inside a card). */
.sky-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--sky-size-button-small);
	padding: 0 20px;
	border: 0;
	border-radius: var(--sky-radius-pill);
	background: var(--sky-surface-raised);
	color: var(--sky-accent);
	font: 500 15px/1.2 var(--sky-font-sans);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--sky-state), color var(--sky-state), transform var(--sky-press);
}
.sky-button:active {
	transform: scale(var(--sky-press-scale));
}
.sky-button:disabled,
.sky-button[aria-disabled="true"] {
	opacity: 0.45;
	box-shadow: none;
	cursor: default;
	transform: none;
}
.sky-button--large {
	min-height: var(--sky-size-button-large);
	padding-inline: 28px;
	font-size: 16px;
	letter-spacing: -0.01em;
}
.sky-button--medium {
	min-height: var(--sky-size-button-medium);
	padding-inline: 24px;
	font-size: 16px;
	letter-spacing: -0.01em;
}
.sky-button--primary {
	background: var(--sky-primary);
	color: var(--sky-on-primary);
	font-weight: 600;
	box-shadow: var(--sky-shadow-primary);
}
.sky-button--primary:hover:not(:disabled) {
	background: var(--sky-primary-pressed);
}
.sky-button--tonal {
	background: var(--sky-tint);
	color: var(--sky-on-tint);
}
.sky-button--tonal:hover:not(:disabled) {
	background: var(--sky-ring-track);
}
.sky-button--float {
	background: var(--sky-surface-raised);
	color: var(--sky-accent);
	box-shadow: var(--sky-shadow-float);
}
.sky-button--float:hover:not(:disabled) {
	color: var(--sky-ink);
}
.sky-button--text {
	min-height: var(--sky-size-text-button);
	padding-inline: 12px;
	background: transparent;
	color: var(--sky-accent);
	font-size: 14px;
}
.sky-button--text:hover:not(:disabled) {
	color: var(--sky-ink);
}
.sky-button--compact {
	min-height: 36px;
	padding-inline: 14px;
	font-size: 13px;
	font-weight: 600;
}
.sky-button--ink {
	color: var(--sky-ink);
}
.sky-button--danger {
	color: var(--sky-danger);
}
/* Circle buttons: navigation 48, or a tonal 52. */
.sky-button--circle {
	width: var(--sky-size-circle-nav);
	padding: 0;
	box-shadow: var(--sky-shadow-float);
}
.sky-button--circle.sky-button--tonal {
	width: 52px;
	min-height: 52px;
	box-shadow: none;
}
.sky-button svg {
	flex: none;
}

/* Filter chips. Selection is ink, never green. */
.sky-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--sky-size-filter-chip);
	padding: 0 16px;
	border: 0;
	border-radius: var(--sky-radius-pill);
	background: var(--sky-surface-raised);
	color: var(--sky-secondary);
	box-shadow: var(--sky-shadow-float);
	font: 500 13px/1 var(--sky-font-sans);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--sky-state), color var(--sky-state), transform var(--sky-press);
}
/* A 44px target around the 36px chip. */
.sky-chip::after {
	content: "";
	position: absolute;
	inset: -4px;
}
.sky-chip:hover {
	color: var(--sky-ink);
}
.sky-chip:active {
	transform: scale(var(--sky-press-scale));
}
.sky-chip[aria-pressed="true"],
.sky-chip[aria-current="true"],
.sky-chip.is-selected {
	background: var(--sky-selected);
	color: var(--sky-on-selected);
	font-weight: 600;
	box-shadow: none;
}

/* A pill that states something: "You were opening YouTube", "Pauses on". */
.sky-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--sky-size-context-chip);
	padding: 0 16px;
	border-radius: var(--sky-radius-pill);
	background: var(--sky-surface-raised);
	color: var(--sky-secondary);
	box-shadow: var(--sky-shadow-float);
	font: 500 13px/1.2 var(--sky-font-sans);
}
.sky-pill svg {
	flex: none;
	color: var(--sky-accent);
}
.sky-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sky-accent);
}

/* Small status words: a list chip, and the four status pills. */
.sky-list-chip,
.sky-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: var(--sky-radius-pill);
	background: var(--sky-tint);
	color: var(--sky-on-tint);
}
.sky-list-chip {
	min-height: 26px;
	padding: 0 11px;
	font: 500 12px/1 var(--sky-font-sans);
}
.sky-status {
	min-height: 30px;
	padding: 0 12px;
	font: 600 12px/1 var(--sky-font-sans);
}
.sky-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sky-accent);
}
.sky-status--off {
	background: var(--sky-neutral-tint);
	color: var(--sky-secondary);
}
.sky-status--off::before {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--sky-secondary);
}
.sky-status--notice {
	background: var(--sky-notice-tint);
	color: var(--sky-notice);
}
.sky-status--notice::before {
	background: var(--sky-notice-dot);
}
.sky-status--danger {
	background: var(--sky-danger-tint);
	color: var(--sky-danger);
}
.sky-status--danger::before {
	background: var(--sky-danger);
}

/* Checkbox: 22px, radius 6. */
.sky-checkbox {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	display: grid;
	place-content: center;
	width: var(--sky-size-checkbox);
	height: var(--sky-size-checkbox);
	margin: 0;
	border: 1.5px solid var(--sky-control);
	border-radius: var(--sky-radius-checkbox);
	background: transparent;
	cursor: pointer;
	transition: background-color var(--sky-state), border-color var(--sky-state);
}
.sky-checkbox::after {
	content: "";
	width: 11px;
	height: 6px;
	border: solid var(--sky-check-tick);
	border-width: 0 0 2px 2px;
	transform: translateY(-1px) rotate(-45deg);
	opacity: 0;
	transition: opacity var(--sky-state);
}
.sky-checkbox:checked {
	background: var(--sky-check-fill);
	border-color: var(--sky-check-fill);
}
.sky-checkbox:checked::after {
	opacity: 1;
}

/* Fields: 52px, radius 16, floating. Focus is a 2px accent ring, an error a 2px danger ring. */
.sky-field {
	width: 100%;
	min-height: var(--sky-size-field);
	padding: 0 16px;
	border: 0;
	border-radius: var(--sky-radius-field);
	background: var(--sky-surface-raised);
	color: var(--sky-ink);
	box-shadow: var(--sky-shadow-float);
	font: 400 16px/1.4 var(--sky-font-sans);
}
textarea.sky-field {
	padding-block: 14px;
}
.sky-field--compact {
	min-height: 44px;
	font-size: 14px;
}
/* Inside a card or a sheet the field takes the inset fill, as the phone's sheet rows do. */
.sky-field--inset {
	background: var(--sky-inset);
	box-shadow: none;
}
.sky-field::placeholder {
	color: var(--sky-secondary);
}
.sky-field:focus {
	outline: 2px solid var(--sky-accent);
	outline-offset: 0;
}
.sky-field[aria-invalid="true"] {
	outline: 2px solid var(--sky-danger);
	outline-offset: 0;
}
.sky-label {
	display: block;
	margin-bottom: 8px;
	color: var(--sky-secondary);
	font: 500 13px/1.3 var(--sky-font-sans);
}

/* Switch, as the phone's: 51 by 31, green when on. */
.sky-switch {
	--knob: #fff;
	position: relative;
	flex: none;
	width: 51px;
	height: 31px;
	padding: 0;
	border: 0;
	border-radius: var(--sky-radius-pill);
	background: var(--sky-ring-track);
	cursor: pointer;
	transition: background-color var(--sky-state);
}
.sky-switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: var(--knob);
	box-shadow: 0 3px 8px rgb(0 0 0 / 15%), 0 1px 1px rgb(0 0 0 / 16%);
	transition: transform var(--sky-state), background-color var(--sky-state);
}
.sky-switch[aria-checked="true"] {
	background: var(--sky-primary);
}
.sky-switch[aria-checked="true"]::after {
	transform: translateX(20px);
}
:root[data-theme="dark"] .sky-switch {
	--knob: var(--sky-secondary);
}
.sky-switch[aria-checked="true"],
:root[data-theme="dark"] .sky-switch[aria-checked="true"] {
	--knob: var(--sky-on-primary);
}
.sky-switch:focus-visible {
	outline: 2px solid var(--sky-accent);
	outline-offset: 3px;
}

/* Type. Titles are serif; the eyebrow is small caps-style sans. */
.sky-eyebrow {
	margin: 0;
	color: var(--sky-secondary);
	font: 600 11px/1.4 var(--sky-font-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.sky-title,
.sky-title-card,
.sky-title-prompt {
	margin: 0;
	color: var(--sky-ink);
	font-family: var(--sky-font-serif);
	font-weight: 400;
}
.sky-title {
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: -0.04em;
}
.sky-title-card {
	font-size: 26px;
	line-height: 1.18;
	letter-spacing: -0.025em;
}
.sky-title-prompt {
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.sky-clock {
	color: var(--sky-ink);
	font: 600 84px/1 var(--sky-font-sans);
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
}
.sky-meta {
	margin: 0;
	color: var(--sky-secondary);
	font: 400 13px/1.4 var(--sky-font-sans);
}

/* Keyboard focus: a 2px accent ring. */
.sky-button:focus-visible,
.sky-chip:focus-visible,
.sky-checkbox:focus-visible {
	outline: 2px solid var(--sky-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.sky-button,
	.sky-chip,
	.sky-checkbox,
	.sky-checkbox::after,
	.sky-switch,
	.sky-switch::after {
		transition: none;
	}
	.sky-button:active,
	.sky-chip:active {
		transform: none;
	}
}

@media (forced-colors: active) {
	.sky-button,
	.sky-chip,
	.sky-pill {
		border: 1px solid ButtonText;
	}
}