/*
 * Oseana design tokens — the single source of truth for every value in the system.
 *
 * Two switches select a theme. Put both attributes on the same element (normally <html>):
 *
 *   data-style = "feminine" | "neutral" | "masculine"     type, shape, palette family
 *   data-mode  = "light" | "dark"
 *
 * With no attributes the theme is feminine + light.
 *
 * Layers, in file order:
 *   1. Scale       identical in every theme: space, type sizes, weights, sizes, motion, z-index
 *   2. Aliases     tokens defined in terms of other tokens
 *   3. Style       one block per style: fonts, type treatment, corner radii, small shape details
 *   4. Colour      one block per style and mode: surfaces, text, primary, accent, feedback, shadows
 *
 * Rules:
 *   - Components read tokens only. A component never checks which style or mode is active.
 *   - Every theme block must define the same set of tokens (tools/check-tokens.mjs verifies this).
 *   - To add a token, add it to all three style blocks or all six colour blocks, then document it.
 */

/* ───────────────────────── 1. Scale ───────────────────────── */
:root,
[data-style] {
	/* Space: a 4px grid with 2px half steps. The number is the pixel value. */
	--os-space-0: 0px;
	--os-space-2: 2px;
	--os-space-4: 4px;
	--os-space-6: 6px;
	--os-space-8: 8px;
	--os-space-10: 10px;
	--os-space-12: 12px;
	--os-space-14: 14px;
	--os-space-16: 16px;
	--os-space-20: 20px;
	--os-space-24: 24px;
	--os-space-28: 28px;
	--os-space-32: 32px;
	--os-space-40: 40px;
	--os-space-48: 48px;
	--os-space-64: 64px;

	/* Text sizes for the sans (body) font. Body size itself is a style token. */
	--os-font-size-2xs: 10px;
	--os-font-size-xs: 11px;
	--os-font-size-sm: 12px;
	--os-font-size-md: 13px;

	--os-weight-regular: 400;
	--os-weight-medium: 500;
	--os-weight-semibold: 600;
	--os-weight-bold: 700;

	--os-leading-tight: 1.1;
	--os-leading-snug: 1.3;
	--os-leading-normal: 1.4;
	--os-leading-relaxed: 1.5;

	/* Letter spacing for the display (serif) font, by size */
	--os-tracking-stat: -0.02em;
	--os-tracking-title: -0.015em;
	--os-tracking-display: -0.01em;

	/* Control and avatar sizes */
	--os-control-height: 34px;
	--os-control-height-sm: 32px;
	/* Touch-sized controls: sign-in, client-facing forms, anything used on a phone */
	--os-control-height-lg: 44px;
	--os-icon-size: 17px;
	--os-icon-size-sm: 16px;
	--os-icon-size-lg: 28px;
	--os-avatar-xs: 20px;
	--os-avatar-sm: 26px;
	--os-avatar-md: 34px;
	--os-avatar-lg: 52px;
	--os-avatar-xl: 64px;
	/* Initials inside each avatar size */
	--os-avatar-font-xs: 8px;
	--os-avatar-font-sm: 10px;
	--os-avatar-font-md: 11px;
	--os-avatar-font-lg: 16px;
	--os-avatar-font-xl: 19px;

	/* Layout */
	--os-sidebar-width: 296px;
	--os-sidebar-width-collapsed: 76px;
	--os-sheet-inset: 14px;
	--os-content-max: 1200px;
	--os-wave-band-height: 72px;
	/* Room a scroller leaves at the sheet's foot, so its last item ends above the band and its fade */
	--os-wave-clear: 120px;
	/* Long-form layout: the section rail, and the measure of a form column */
	--os-rail-width: 208px;
	--os-form-max: 720px;
	/* Long text (policies, documentation) */
	--os-prose-max: 68ch;
	/* Overlays: three modal widths and the side panel */
	--os-modal-width-sm: 440px;
	--os-modal-width-md: 560px;
	--os-modal-width-lg: 760px;
	--os-modal-width-xl: 1040px;
	--os-panel-width: 460px;
	/* Dense table rows */
	--os-table-row-height: 48px;
	/* Frost behind a glass bar (the data table's sticky header) */
	--os-glass-blur: 16px;

	/* Code, IDs and keys */
	--os-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* The switch thumb is white in every theme */
	--os-switch-thumb: #ffffff;
	--os-shadow-switch-thumb: 0 1px 2px rgba(0, 0, 0, 0.25);

	/* Motion: never the browser default `ease` */
	--os-duration-fast: 120ms;
	--os-duration-normal: 200ms;
	--os-duration-slow: 280ms;
	--os-ease-out: cubic-bezier(0.17, 1, 0.32, 1);
	--os-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
	/* One move that closes one thing while it opens another (the sidebar's
	   section lists): a soft start and a long settle, shared by both sides */
	--os-duration-move: 700ms;
	--os-ease-move: cubic-bezier(0.4, 0, 0.2, 1);
	/* Leaving: starts and ends gently, so what closes does not snap shut */
	--os-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	/* Stacking */
	--os-z-sticky: 10;
	--os-z-overlay: 200;
	--os-z-modal: 210;
	/* Menus, select lists and calendars open from the topmost layer, so they
	   sit above a modal that opened them. They close on any outside interaction. */
	--os-z-dropdown: 220;
	--os-z-toast: 300;
	--os-z-tooltip: 400;

	/* Focus ring geometry (colour is --os-focus) */
	--os-focus-width: 2px;
	--os-focus-offset: 2px;
}

/* ───────────────────────── 2. Aliases ───────────────────────── */
:root,
[data-style] {
	--os-focus: var(--os-primary);
	--os-session-past-bg: var(--os-surface-inset);
	--os-input-bg: var(--os-surface-control);
	--os-input-border: var(--os-border-strong);
	--os-placeholder: var(--os-text-tertiary);
	--os-info: var(--os-primary);
	--os-info-soft: var(--os-primary-soft);
	/* Hover on a quiet control (quiet button, search, icon button on a control) */
	--os-surface-control-hover: color-mix(in srgb, var(--os-surface-control), var(--os-text) 6%);
	/* Hover and pressed tints over any surface (menu items, table rows, outline buttons) */
	--os-hover-tint: color-mix(in srgb, transparent, var(--os-text) 6%);
	--os-hover-tint-subtle: color-mix(in srgb, transparent, var(--os-text) 3%);
	/* Glass bar: the card surface let through, frosted, for a sticky bar that
	   content scrolls under (the data table's header) */
	--os-surface-glass-bar: color-mix(in srgb, var(--os-surface-card) 72%, transparent);
	/* Glass (the frost material): the card surface let through and frosted, edged by a hairline
	   with a faint highlight along its top. One layer only: glass never sits on glass. */
	--os-hairline: color-mix(in srgb, var(--os-text) 9%, transparent);
	--os-hairline-soft: color-mix(in srgb, var(--os-text) 6%, transparent);
	/* The sheet's edge: a hairline that parts the sheet from the canvas, in every theme */
	--os-sheet-edge: 0 0 0 1px color-mix(in srgb, var(--os-text) 5%, transparent);
	--os-surface-glass: color-mix(in srgb, var(--os-surface-card) 62%, transparent);
	--os-surface-glass-hover: color-mix(in srgb, var(--os-surface-card) 80%, transparent);
	--os-shadow-glass: inset 0 0 0 1px var(--os-hairline-soft), inset 0 1px 0 color-mix(in srgb, var(--os-surface-card) 90%, transparent), 0 1px 2px var(--os-hairline-soft);
	--os-shadow-glass-hover: inset 0 0 0 1px var(--os-hairline), inset 0 1px 0 color-mix(in srgb, var(--os-surface-card) 90%, transparent), 0 1px 2px var(--os-hairline-soft);
	/* A glass surface that floats (a ringed portrait) */
	--os-shadow-glass-lift: var(--os-shadow-glass), 0 14px 34px -20px color-mix(in srgb, var(--os-text) 26%, transparent);
	/* Focus on glass: a soft teal glow instead of a hard line */
	--os-glow-focus: inset 0 0 0 1px color-mix(in srgb, var(--os-primary) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--os-primary) 14%, transparent);
	/* The edge of a glass field on focus (the ripple ring sits outside it) */
	--os-glass-edge-focus: inset 0 0 0 1px color-mix(in srgb, var(--os-primary) 60%, transparent);
	--os-glass-field-blur: blur(10px) saturate(1.3);
	/* Fields: what every text-like control (input, select, text area, tags, rich text, phone)
	   is drawn with: glass (the frost material) everywhere,
	   the card colour let through and frosted, a hairline edge, a soft teal edge on focus. */
	--os-field-bg: var(--os-surface-glass);
	--os-field-bg-hover: var(--os-surface-glass-hover);
	--os-field-bg-focus: var(--os-surface-card);
	--os-field-edge: var(--os-shadow-glass);
	--os-field-edge-hover: var(--os-shadow-glass-hover);
	--os-field-edge-focus: var(--os-glass-edge-focus);
	--os-field-edge-invalid: inset 0 0 0 1px var(--os-danger);
	--os-field-radius: var(--os-radius-md);
	--os-field-blur: var(--os-glass-field-blur);
	/* The ripple ring: on focus a thin ring travels out from a field's edge and
	   settles a small gap away from it (the field-ring utility in theme.css) */
	--os-field-ring: color-mix(in srgb, var(--os-focus) 42%, transparent);
	--os-field-ring-invalid: color-mix(in srgb, var(--os-danger) 40%, transparent);
	--os-field-ring-width: 2px;
	--os-field-ring-gap: 3px;
	/* Small shapes are capped so the feminine style's large radii do not turn them into blobs */
	--os-radius-check: min(var(--os-radius-sm), 5px);
	--os-radius-tooltip: min(var(--os-radius-sm), 6px);
	/* Concentric radii: an item inside a padded container (outer radius minus the gap) */
	--os-radius-menu-item: max(calc(var(--os-radius-md) - var(--os-space-4)), 2px);
	--os-radius-cover: max(calc(var(--os-radius-lg) - var(--os-space-6)), 2px);
	--os-radius-segment: max(calc(var(--os-radius-control) - var(--os-space-2)), 2px);
	/* Week grid shapes are capped too: open-time lanes and the session blocks on them are tall,
	   narrow and packed side by side, where a large radius reads as a pill */
	--os-radius-lane: min(var(--os-radius-md), 6px);
	--os-radius-session: min(var(--os-radius-sm), 4px);
}

/* ───────────────────────── 3. Style ───────────────────────── */

/* Feminine (code name Shell): Newsreader with italic accents, Figtree, fully round shapes, soft sine waves */
:root:not([data-style]),
[data-style="feminine"] {
	--os-font-display: "Newsreader", Georgia, serif;
	--os-font-body: "Figtree", system-ui, sans-serif;
	--os-font-prose: var(--os-font-display);
	--os-font-size-body: 13.5px;
	--os-font-size-prose: 16px;

	/* Display (serif) sizes */
	--os-display-2xl: 36px;
	--os-display-xl: 30px;
	--os-display-lg: 22px;
	--os-display-md: 19px;
	--os-display-sm: 18px;
	/* Display weight depends on size: small serif needs more weight */
	--os-display-weight: 400;
	--os-display-weight-sm: 500;
	--os-display-weight-2xl: 400;
	/* The accent inside a heading (a year, a date, a unit) */
	--os-display-accent-style: italic;
	--os-display-accent-weight: 400;

	/* Labels: eyebrows, column headers, weekday names, category tags */
	--os-label-size: 12px;
	--os-label-weight: 500;
	--os-label-transform: none;
	--os-label-tracking: 0em;

	/* Corner radii */
	--os-radius-sm: 12px;
	--os-radius-md: 12px;
	--os-radius-lg: 20px;
	--os-radius-xl: 28px;
	--os-radius-control: 999px;
	--os-radius-badge: 999px;
	--os-radius-avatar: 50%;
	--os-radius-marker: 999px;

	/* Small shape details */
	--os-brand-size: 25px;
	--os-brand-weight: 500;
	--os-brand-tracking: -0.01em;
	--os-brand-transform: none;
	--os-now-marker-width: 8px;
	--os-now-marker-height: 8px;
	--os-now-marker-radius: 4px;
	--os-month-marker-width: 3px;
	--os-month-marker-height: 3px;
	--os-month-marker-radius: 2px;
	--os-progress-height: 3px;
	--os-progress-radius: 3px;

	--os-wave-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 72' width='88' height='72' fill='none' stroke='%23000' stroke-linejoin='round'%3E%3Cpath d='M-88 16q22 -8 44 0t44 0t44 0t44 0t44 0t44 0' stroke-opacity='0.64'/%3E%3Cpath d='M-88 38q22 -6 44 0t44 0t44 0t44 0t44 0t44 0' stroke-opacity='0.42'/%3E%3Cpath d='M-88 58q22 -4 44 0t44 0t44 0t44 0t44 0t44 0' stroke-opacity='0.24'/%3E%3C/svg%3E"); /* gen:wave:feminine */
}

/* Neutral (code name Harbor): upright Newsreader, Geist, medium radii, straight-flanked waves with round crests */
[data-style="neutral"] {
	--os-font-display: "Newsreader", Georgia, serif;
	--os-font-body: "Geist", system-ui, sans-serif;
	--os-font-prose: var(--os-font-body);
	--os-font-size-body: 13.5px;
	--os-font-size-prose: 13.5px;

	--os-display-2xl: 34px;
	--os-display-xl: 28px;
	--os-display-lg: 21px;
	--os-display-md: 18px;
	--os-display-sm: 17px;
	--os-display-weight: 500;
	--os-display-weight-sm: 500;
	--os-display-weight-2xl: 400;
	--os-display-accent-style: normal;
	--os-display-accent-weight: 400;

	--os-label-size: 12px;
	--os-label-weight: 500;
	--os-label-transform: none;
	--os-label-tracking: 0em;

	--os-radius-sm: 8px;
	--os-radius-md: 10px;
	--os-radius-lg: 14px;
	--os-radius-xl: 20px;
	--os-radius-control: 8px;
	--os-radius-badge: 6px;
	--os-radius-avatar: 50%;
	--os-radius-marker: 8px;

	--os-brand-size: 23px;
	--os-brand-weight: 500;
	--os-brand-tracking: -0.01em;
	--os-brand-transform: none;
	--os-now-marker-width: 8px;
	--os-now-marker-height: 8px;
	--os-now-marker-radius: 4px;
	--os-month-marker-width: 3px;
	--os-month-marker-height: 3px;
	--os-month-marker-radius: 2px;
	--os-progress-height: 3px;
	--os-progress-radius: 3px;

	--os-wave-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 72' width='88' height='72' fill='none' stroke='%23000' stroke-linejoin='round'%3E%3Cpath d='M-88 20L-62.48 15.36Q-44 12 -25.52 15.36L-18.48 16.64Q0 20 18.48 16.64L25.52 15.36Q44 12 62.48 15.36L69.52 16.64Q88 20 106.48 16.64L113.52 15.36Q132 12 150.48 15.36L176 20' stroke-opacity='0.64'/%3E%3Cpath d='M-88 41L-62.48 37.52Q-44 35 -25.52 37.52L-18.48 38.48Q0 41 18.48 38.48L25.52 37.52Q44 35 62.48 37.52L69.52 38.48Q88 41 106.48 38.48L113.52 37.52Q132 35 150.48 37.52L176 41' stroke-opacity='0.42'/%3E%3Cpath d='M-88 60L-62.48 57.68Q-44 56 -25.52 57.68L-18.48 58.32Q0 60 18.48 58.32L25.52 57.68Q44 56 62.48 57.68L69.52 58.32Q88 60 106.48 58.32L113.52 57.68Q132 56 150.48 57.68L176 60' stroke-opacity='0.24'/%3E%3C/svg%3E"); /* gen:wave:neutral */
}

/* Masculine (code name Fathom): Roboto Slab, Archivo, tracked capital labels, near-square shapes, straight-line waves */
[data-style="masculine"] {
	--os-font-display: "Roboto Slab", Georgia, serif;
	--os-font-body: "Archivo", system-ui, sans-serif;
	--os-font-prose: var(--os-font-body);
	--os-font-size-body: 13px;
	--os-font-size-prose: 13.5px;

	--os-display-2xl: 32px;
	--os-display-xl: 28px;
	--os-display-lg: 21px;
	--os-display-md: 17px;
	--os-display-sm: 16px;
	--os-display-weight: 600;
	--os-display-weight-sm: 600;
	--os-display-weight-2xl: 600;
	--os-display-accent-style: normal;
	--os-display-accent-weight: 500;

	--os-label-size: 11px;
	--os-label-weight: 600;
	--os-label-transform: uppercase;
	--os-label-tracking: 0.12em;

	--os-radius-sm: 4px;
	--os-radius-md: 6px;
	--os-radius-lg: 8px;
	--os-radius-xl: 12px;
	--os-radius-control: 6px;
	--os-radius-badge: 4px;
	--os-radius-avatar: 12%;
	--os-radius-marker: 4px;

	--os-brand-size: 16px;
	--os-brand-weight: 600;
	--os-brand-tracking: 0.2em;
	--os-brand-transform: uppercase;
	--os-now-marker-width: 2px;
	--os-now-marker-height: 12px;
	--os-now-marker-radius: 0px;
	--os-month-marker-width: 5px;
	--os-month-marker-height: 1.5px;
	--os-month-marker-radius: 0px;
	--os-progress-height: 4px;
	--os-progress-radius: 0px;

	--os-wave-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 72' width='56' height='72' fill='none' stroke='%23000' stroke-linejoin='round'%3E%3Cpath d='M-56 20L-31.85 13.1Q-28 12 -24.15 13.1L-3.85 18.9Q0 20 3.85 18.9L24.15 13.1Q28 12 31.85 13.1L52.15 18.9Q56 20 59.85 18.9L80.15 13.1Q84 12 87.85 13.1L112 20' stroke-opacity='0.64'/%3E%3Cpath d='M-56 41L-31.91 35.84Q-28 35 -24.09 35.84L-3.91 40.16Q0 41 3.91 40.16L24.09 35.84Q28 35 31.91 35.84L52.09 40.16Q56 41 59.91 40.16L80.09 35.84Q84 35 87.91 35.84L112 41' stroke-opacity='0.42'/%3E%3Cpath d='M-56 60L-31.96 56.57Q-28 56 -24.04 56.57L-3.96 59.43Q0 60 3.96 59.43L24.04 56.57Q28 56 31.96 56.57L52.04 59.43Q56 60 59.96 59.43L80.04 56.57Q84 56 87.96 56.57L112 60' stroke-opacity='0.24'/%3E%3C/svg%3E"); /* gen:wave:masculine */
}

/* ───────────────────────── 4. Colour ───────────────────────── */

/* Feminine · light: warm cream, teal, gold */
:root:not([data-style]),
[data-style="feminine"] {
	color-scheme: light;
	--os-bg: #f6f1e6;
	--os-bg-solid: #f6f1e6;
	--os-surface-sheet: #fdfbf6;
	--os-surface-card: #ffffff;
	--os-surface-control: #ffffff;
	--os-surface-selected: #ffffff;
	--os-surface-hover: rgba(255, 255, 255, 0.6);
	--os-surface-inset: #f3ede1;
	--os-surface-art: linear-gradient(160deg, #f5ead2, #d8ede6);
	--os-surface-overlay: #ffffff;
	--os-scrim: rgba(20, 48, 46, 0.32);
	/* TEMPORARY, removed with Mantine: the ground under a screen that has not been ported */

	--os-text: #14302e;
	--os-text-secondary: #5c706e;
	--os-text-tertiary: #9daba8;

	--os-border: #eae2d2;
	--os-border-subtle: rgba(110, 85, 35, 0.07);
	--os-border-strong: #9a8f78;

	--os-primary: #0b7a73;
	--os-primary-hover: #096861;
	--os-on-primary: #ffffff;
	--os-primary-soft: #d3eee7;

	--os-accent: #c99632;
	--os-accent-text: #b5852a;
	--os-attention: #c99632;
	--os-attention-text: #14302e;
	--os-art-line: #c99632;
	--os-brand-mark: #c99632;

	--os-button-bg: #0b7a73;
	--os-button-bg-hover: #096861;
	--os-button-text: #ffffff;
	--os-selected-bg: #14302e;
	--os-selected-text: #ffffff;
	--os-badge-bg: #d3eee7;
	--os-badge-text: #0b7a73;

	--os-session-bg: #ffffff;
	--os-session-text: #14302e;
	--os-session-meta: #5c706e;
	--os-session-shadow: 0 0 0 1px #eae2d2, 0 1px 2px rgba(110, 85, 35, 0.08), 0 8px 16px -10px rgba(110, 85, 35, 0.3);
	--os-session-past-text: #5c706e;
	--os-session-past-meta: #9daba8;
	--os-session-now-bg: #0b7a73;
	--os-session-now-text: #ffffff;
	--os-session-now-meta: rgba(255, 255, 255, 0.75);
	--os-session-now-shadow: 0 10px 20px -10px rgba(11, 122, 115, 0.7);
	--os-session-now-avatar: rgba(255, 255, 255, 0.2);

	--os-success: #267245;
	--os-success-soft: #dff1e4;
	--os-warning: #96550f;
	--os-warning-soft: #faebcf;
	--os-danger: #b23a34;
	--os-danger-hover: #9a2f2a;
	--os-danger-soft: #fbe4e1;
	--os-on-danger: #ffffff;

	--os-shadow-sheet: var(--os-sheet-edge), inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 30px 60px -36px rgba(110, 85, 35, 0.35);
	--os-shadow-card: 0 1px 2px rgba(110, 85, 35, 0.07);
	--os-shadow-overlay: 0 0 0 1px rgba(110, 85, 35, 0.08), 0 14px 32px -10px rgba(110, 85, 35, 0.32);
	--os-shadow-modal: 0 0 0 1px rgba(110, 85, 35, 0.08), 0 36px 80px -24px rgba(60, 45, 15, 0.45);
}

/* Feminine · dark: deep teal-black */
:root:not([data-style])[data-mode="dark"],
[data-style="feminine"][data-mode="dark"] {
	color-scheme: dark;
	--os-bg: radial-gradient(1000px 560px at 0% -14%, #0f4a55 0%, rgba(0, 0, 0, 0) 62%), radial-gradient(800px 500px at 110% 115%, #1a2c30 0%, rgba(0, 0, 0, 0) 60%), #05161a;
	--os-bg-solid: #05161a;
	--os-surface-sheet: rgba(255, 255, 255, 0.035);
	--os-surface-card: #17272b;
	--os-surface-control: rgba(255, 255, 255, 0.075);
	--os-surface-selected: rgba(255, 255, 255, 0.09);
	--os-surface-hover: rgba(255, 255, 255, 0.05);
	--os-surface-inset: rgba(92, 212, 218, 0.065);
	--os-surface-art: rgba(98, 217, 201, 0.06);
	--os-surface-overlay: #14272b;
	--os-scrim: rgba(0, 0, 0, 0.6);
	/* TEMPORARY, removed with Mantine: the ground under a screen that has not been ported */

	--os-text: #e8f4f1;
	--os-text-secondary: #9cbab5;
	--os-text-tertiary: #5e827d;

	--os-border: rgba(255, 255, 255, 0.09);
	--os-border-subtle: rgba(255, 255, 255, 0.045);
	--os-border-strong: rgba(255, 255, 255, 0.4);

	--os-primary: #5cd4da;
	--os-primary-hover: #7fdfe4;
	--os-on-primary: #05302c;
	--os-primary-soft: rgba(92, 212, 218, 0.14);

	--os-accent: #e6c272;
	--os-accent-text: #e6c272;
	--os-attention: #e6c272;
	--os-attention-text: #e6c272;
	--os-art-line: #e6c272;
	--os-brand-mark: #e6c272;

	--os-button-bg: #e8f4f1;
	--os-button-bg-hover: #ffffff;
	--os-button-text: #06302d;
	--os-selected-bg: #e8f4f1;
	--os-selected-text: #06302d;
	--os-badge-bg: rgba(92, 212, 218, 0.16);
	--os-badge-text: #5cd4da;

	--os-session-bg: rgba(92, 212, 218, 0.16);
	--os-session-text: #d4f7f0;
	--os-session-meta: #7cc9be;
	--os-session-shadow: 0 0 0 0 transparent;
	--os-session-past-text: #9cc0bb;
	--os-session-past-meta: #6b918c;
	--os-session-now-bg: #5cd4da;
	--os-session-now-text: #05302c;
	--os-session-now-meta: #1b6a62;
	--os-session-now-shadow: 0 8px 24px -8px rgba(92, 212, 218, 0.55);
	--os-session-now-avatar: rgba(5, 48, 44, 0.14);

	--os-success: #6fd39a;
	--os-success-soft: rgba(111, 211, 154, 0.14);
	--os-warning: #f2a65e;
	--os-warning-soft: rgba(242, 166, 94, 0.14);
	--os-danger: #f28b82;
	--os-danger-hover: #f6a39c;
	--os-danger-soft: rgba(242, 139, 130, 0.14);
	--os-on-danger: #3b0d09;

	--os-shadow-sheet: var(--os-sheet-edge);
	--os-shadow-card: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
	--os-shadow-overlay: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 16px 40px -8px rgba(0, 0, 0, 0.6);
	--os-shadow-modal: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 90px -20px rgba(0, 0, 0, 0.75);
}

/* Neutral · light: neutral off-white, mid teal, ochre */
[data-style="neutral"] {
	color-scheme: light;
	--os-bg: #ecf0ee;
	--os-bg-solid: #ecf0ee;
	--os-surface-sheet: #f9faf9;
	--os-surface-card: #ffffff;
	--os-surface-control: #ffffff;
	--os-surface-selected: #ffffff;
	--os-surface-hover: rgba(255, 255, 255, 0.6);
	--os-surface-inset: #e6edea;
	--os-surface-art: #e3ece8;
	--os-surface-overlay: #ffffff;
	--os-scrim: rgba(23, 32, 31, 0.36);
	/* TEMPORARY, removed with Mantine: the ground under a screen that has not been ported */

	--os-text: #17201f;
	--os-text-secondary: #535e5b;
	--os-text-tertiary: #86908d;

	--os-border: #dde3e0;
	--os-border-subtle: rgba(23, 32, 31, 0.06);
	--os-border-strong: #87928e;

	--os-primary: #0c7a70;
	--os-primary-hover: #0a685f;
	--os-on-primary: #ffffff;
	--os-primary-soft: #d3eae5;

	--os-accent: #be9030;
	--os-accent-text: #99731f;
	--os-attention: #be9030;
	--os-attention-text: #17201f;
	--os-art-line: #be9030;
	--os-brand-mark: #0c7a70;

	--os-button-bg: #0c7a70;
	--os-button-bg-hover: #0a685f;
	--os-button-text: #ffffff;
	--os-selected-bg: #17201f;
	--os-selected-text: #ffffff;
	--os-badge-bg: #d3eae5;
	--os-badge-text: #0c7a70;

	--os-session-bg: #ffffff;
	--os-session-text: #17201f;
	--os-session-meta: #535e5b;
	--os-session-shadow: 0 0 0 1px rgba(23, 32, 31, 0.07), 0 1px 2px rgba(23, 32, 31, 0.05);
	--os-session-past-text: #535e5b;
	--os-session-past-meta: #86908d;
	--os-session-now-bg: #0c7a70;
	--os-session-now-text: #ffffff;
	--os-session-now-meta: rgba(255, 255, 255, 0.76);
	--os-session-now-shadow: 0 6px 14px -8px rgba(12, 122, 112, 0.6);
	--os-session-now-avatar: rgba(255, 255, 255, 0.18);

	--os-success: #2a774a;
	--os-success-soft: #dcefe2;
	--os-warning: #92530f;
	--os-warning-soft: #f8e9cd;
	--os-danger: #b03833;
	--os-danger-hover: #982e29;
	--os-danger-soft: #f9e2df;
	--os-on-danger: #ffffff;

	--os-shadow-sheet: var(--os-sheet-edge), 0 26px 50px -34px rgba(23, 32, 31, 0.3);
	--os-shadow-card: 0 0 0 1px rgba(23, 32, 31, 0.06), 0 1px 2px rgba(23, 32, 31, 0.04);
	--os-shadow-overlay: 0 0 0 1px rgba(23, 32, 31, 0.08), 0 14px 32px -10px rgba(23, 32, 31, 0.28);
	--os-shadow-modal: 0 0 0 1px rgba(23, 32, 31, 0.08), 0 36px 80px -24px rgba(23, 32, 31, 0.45);
}

/* Neutral · dark: teal-black */
[data-style="neutral"][data-mode="dark"] {
	color-scheme: dark;
	--os-bg: radial-gradient(1000px 560px at 0% -14%, #114846 0%, rgba(0, 0, 0, 0) 62%), #081413;
	--os-bg-solid: #081413;
	--os-surface-sheet: rgba(150, 230, 215, 0.035);
	--os-surface-card: #11201e;
	--os-surface-control: rgba(150, 230, 215, 0.07);
	--os-surface-selected: rgba(150, 230, 215, 0.09);
	--os-surface-hover: rgba(150, 230, 215, 0.05);
	--os-surface-inset: rgba(150, 230, 215, 0.05);
	--os-surface-art: rgba(150, 230, 215, 0.04);
	--os-surface-overlay: #152624;
	--os-scrim: rgba(0, 0, 0, 0.6);
	/* TEMPORARY, removed with Mantine: the ground under a screen that has not been ported */

	--os-text: #e7efed;
	--os-text-secondary: #9cb1ad;
	--os-text-tertiary: #5f7672;

	--os-border: rgba(170, 230, 220, 0.09);
	--os-border-subtle: rgba(170, 230, 220, 0.045);
	--os-border-strong: rgba(170, 230, 220, 0.42);

	--os-primary: #4cd0c2;
	--os-primary-hover: #70dccf;
	--os-on-primary: #04241f;
	--os-primary-soft: rgba(76, 208, 194, 0.16);

	--os-accent: #dfb55a;
	--os-accent-text: #dfb55a;
	--os-attention: #dfb55a;
	--os-attention-text: #dfb55a;
	--os-art-line: #dfb55a;
	--os-brand-mark: #4cd0c2;

	--os-button-bg: #e7efed;
	--os-button-bg-hover: #ffffff;
	--os-button-text: #081413;
	--os-selected-bg: #e7efed;
	--os-selected-text: #081413;
	--os-badge-bg: rgba(76, 208, 194, 0.18);
	--os-badge-text: #4cd0c2;

	--os-session-bg: rgba(76, 208, 194, 0.15);
	--os-session-text: #dbf5f1;
	--os-session-meta: #80c5bc;
	--os-session-shadow: 0 0 0 0 transparent;
	--os-session-past-text: #93aaa6;
	--os-session-past-meta: #5f7672;
	--os-session-now-bg: #4cd0c2;
	--os-session-now-text: #04241f;
	--os-session-now-meta: #16645b;
	--os-session-now-shadow: 0 8px 20px -10px rgba(76, 208, 194, 0.5);
	--os-session-now-avatar: rgba(4, 36, 31, 0.14);

	--os-success: #6fd39a;
	--os-success-soft: rgba(111, 211, 154, 0.14);
	--os-warning: #f2a65e;
	--os-warning-soft: rgba(242, 166, 94, 0.14);
	--os-danger: #f28b82;
	--os-danger-hover: #f6a39c;
	--os-danger-soft: rgba(242, 139, 130, 0.14);
	--os-on-danger: #3b0d09;

	--os-shadow-sheet: var(--os-sheet-edge);
	--os-shadow-card: inset 0 0 0 1px rgba(170, 230, 220, 0.06);
	--os-shadow-overlay: 0 0 0 1px rgba(170, 230, 220, 0.1), 0 16px 40px -8px rgba(0, 0, 0, 0.6);
	--os-shadow-modal: 0 0 0 1px rgba(170, 230, 220, 0.1), 0 40px 90px -20px rgba(0, 0, 0, 0.75);
}

/* Masculine · light: warm stone, navy ink, petrol, brass */
[data-style="masculine"] {
	color-scheme: light;
	--os-bg: #e6dfd3;
	--os-bg-solid: #e6dfd3;
	--os-surface-sheet: #f8f5ef;
	--os-surface-card: #ffffff;
	--os-surface-control: #ffffff;
	--os-surface-selected: #ffffff;
	--os-surface-hover: rgba(255, 255, 255, 0.6);
	--os-surface-inset: #ede7dc;
	--os-surface-art: #ebe4d7;
	--os-surface-overlay: #ffffff;
	--os-scrim: rgba(22, 30, 38, 0.4);
	/* TEMPORARY, removed with Mantine: the ground under a screen that has not been ported */

	--os-text: #16202a;
	--os-text-secondary: #4f5358;
	--os-text-tertiary: #837f78;

	--os-border: #d9d1c3;
	--os-border-subtle: rgba(70, 52, 20, 0.075);
	--os-border-strong: #948b7c;

	--os-primary: #0d5263;
	--os-primary-hover: #0a4352;
	--os-on-primary: #ffffff;
	--os-primary-soft: #d5e4e4;

	--os-accent: #ad7a20;
	--os-accent-text: #8f6418;
	--os-attention: #ad7a20;
	--os-attention-text: #16202a;
	--os-art-line: #8f6418;
	--os-brand-mark: #ad7a20;

	--os-button-bg: #0d5263;
	--os-button-bg-hover: #0a4352;
	--os-button-text: #ffffff;
	--os-selected-bg: #16202a;
	--os-selected-text: #ffffff;
	--os-badge-bg: #0d5263;
	--os-badge-text: #ffffff;

	--os-session-bg: #ffffff;
	--os-session-text: #16202a;
	--os-session-meta: #4f5358;
	--os-session-shadow: 0 0 0 1px #dcd4c6, 0 1px 2px rgba(70, 52, 20, 0.06);
	--os-session-past-text: #4f5358;
	--os-session-past-meta: #837f78;
	--os-session-now-bg: #0d5263;
	--os-session-now-text: #ffffff;
	--os-session-now-meta: rgba(255, 255, 255, 0.76);
	--os-session-now-shadow: 0 0 0 0 transparent;
	--os-session-now-avatar: rgba(255, 255, 255, 0.16);

	--os-success: #27724a;
	--os-success-soft: #dcecdd;
	--os-warning: #8c500f;
	--os-warning-soft: #f6e7cb;
	--os-danger: #ad3530;
	--os-danger-hover: #942b27;
	--os-danger-soft: #f8e0dd;
	--os-on-danger: #ffffff;

	--os-shadow-sheet: var(--os-sheet-edge), 0 24px 48px -34px rgba(70, 52, 20, 0.42);
	--os-shadow-card: 0 0 0 1px #dcd4c6;
	--os-shadow-overlay: 0 0 0 1px rgba(70, 52, 20, 0.14), 0 14px 32px -10px rgba(70, 52, 20, 0.3);
	--os-shadow-modal: 0 0 0 1px rgba(70, 52, 20, 0.14), 0 36px 80px -24px rgba(50, 36, 12, 0.5);
}

/* Masculine · dark: warm charcoal with a petrol glow */
[data-style="masculine"][data-mode="dark"] {
	color-scheme: dark;
	--os-bg: radial-gradient(1100px 600px at 0% -16%, #12414d 0%, rgba(0, 0, 0, 0) 60%), radial-gradient(900px 520px at 108% 112%, #2a2114 0%, rgba(0, 0, 0, 0) 62%), #100f0d;
	--os-bg-solid: #100f0d;
	--os-surface-sheet: rgba(240, 222, 190, 0.04);
	--os-surface-card: #1b1a17;
	--os-surface-control: rgba(240, 222, 190, 0.075);
	--os-surface-selected: rgba(240, 222, 190, 0.09);
	--os-surface-hover: rgba(240, 222, 190, 0.05);
	--os-surface-inset: rgba(240, 222, 190, 0.055);
	--os-surface-art: rgba(240, 222, 190, 0.04);
	--os-surface-overlay: #22201c;
	--os-scrim: rgba(0, 0, 0, 0.6);
	/* TEMPORARY, removed with Mantine: the ground under a screen that has not been ported */

	--os-text: #f0ebe2;
	--os-text-secondary: #b5ada0;
	--os-text-tertiary: #7f786c;

	--os-border: rgba(240, 222, 190, 0.1);
	--os-border-subtle: rgba(240, 222, 190, 0.05);
	--os-border-strong: rgba(240, 222, 190, 0.42);

	--os-primary: #55bccd;
	--os-primary-hover: #7bcedb;
	--os-on-primary: #04181d;
	--os-primary-soft: rgba(85, 188, 205, 0.16);

	--os-accent: #ddaa4a;
	--os-accent-text: #ddaa4a;
	--os-attention: #ddaa4a;
	--os-attention-text: #ddaa4a;
	--os-art-line: #ddaa4a;
	--os-brand-mark: #ddaa4a;

	--os-button-bg: #f0ebe2;
	--os-button-bg-hover: #ffffff;
	--os-button-text: #100f0d;
	--os-selected-bg: #f0ebe2;
	--os-selected-text: #100f0d;
	--os-badge-bg: rgba(85, 188, 205, 0.18);
	--os-badge-text: #55bccd;

	--os-session-bg: rgba(85, 188, 205, 0.14);
	--os-session-text: #e0f1f4;
	--os-session-meta: #8cc0ca;
	--os-session-shadow: 0 0 0 0 transparent;
	--os-session-past-text: #a8a195;
	--os-session-past-meta: #7f786c;
	--os-session-now-bg: #55bccd;
	--os-session-now-text: #04181d;
	--os-session-now-meta: #165766;
	--os-session-now-shadow: 0 0 0 0 transparent;
	--os-session-now-avatar: rgba(4, 24, 29, 0.14);

	--os-success: #6fd39a;
	--os-success-soft: rgba(111, 211, 154, 0.14);
	--os-warning: #f2a65e;
	--os-warning-soft: rgba(242, 166, 94, 0.14);
	--os-danger: #f28b82;
	--os-danger-hover: #f6a39c;
	--os-danger-soft: rgba(242, 139, 130, 0.14);
	--os-on-danger: #3b0d09;

	--os-shadow-sheet: var(--os-sheet-edge);
	--os-shadow-card: inset 0 0 0 1px rgba(240, 222, 190, 0.07);
	--os-shadow-overlay: 0 0 0 1px rgba(240, 222, 190, 0.12), 0 16px 40px -8px rgba(0, 0, 0, 0.6);
	--os-shadow-modal: 0 0 0 1px rgba(240, 222, 190, 0.12), 0 40px 90px -20px rgba(0, 0, 0, 0.75);
}

/*
 * Oseana reference components.
 *
 * The reference implementation of every component in docs/design-system/components.md.
 * It reads css/tokens.css and nothing else: there is no rule here that checks the style or
 * the mode. If a component must differ between styles, the difference is a token.
 *
 * The app does not import this file. Use it as the exact spec when building the same
 * component in React/Mantine, and as the stylesheet for static mock-ups.
 *
 * Sections: base · layout · type · controls · forms · navigation · data display ·
 *           calendar · feedback and overlays
 */

/* ───────────────────────── Base ───────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
body {
	font-family: var(--os-font-body);
	font-size: var(--os-font-size-body);
	line-height: var(--os-leading-normal);
	color: var(--os-text);
	background: var(--os-bg);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "tnum" 1;
}
button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
}
a {
	color: inherit;
	text-decoration: none;
}
ul {
	list-style: none;
}
i[class^="ri-"] {
	line-height: 1;
}
:focus-visible {
	outline: var(--os-focus-width) solid var(--os-focus);
	outline-offset: var(--os-focus-offset);
}

/* ───────────────────────── Layout ───────────────────────── */

/* App frame: one sidebar, one sheet */
.os-app {
	display: grid;
	grid-template-columns: var(--os-sidebar-width) minmax(0, 1fr);
	height: 100%;
	overflow: hidden;
}
.os-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--os-space-24);
	padding: var(--os-space-24) var(--os-space-24) var(--os-space-20) var(--os-space-28);
	min-height: 0;
}
.os-sidebar__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--os-space-8);
}
.os-sidebar__foot .os-waves {
	margin: 0 calc(var(--os-space-24) * -1) 0 calc(var(--os-space-28) * -1);
}
.os-main {
	min-width: 0;
	min-height: 0;
	padding: var(--os-sheet-inset) var(--os-sheet-inset) var(--os-sheet-inset) 0;
	display: flex;
}

/* Sheet: the single surface that holds a screen's content */
.os-sheet {
	position: relative;
	isolation: isolate;
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--os-surface-sheet);
	border-radius: var(--os-radius-xl);
	box-shadow: var(--os-shadow-sheet);
}
.os-sheet--padded {
	padding: var(--os-space-20) var(--os-space-24) var(--os-space-24);
}
/* The wave band along the foot of a sheet. Drawn above the content, over a veil of the sheet's
   colour that dissolves the content under it (the app: wave-veil in theme.css). */
.os-sheet--waves::before {
	content: "";
	position: absolute;
	z-index: calc(var(--os-z-sticky) + 1);
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--os-wave-clear);
	border-radius: 0 0 var(--os-radius-xl) var(--os-radius-xl);
	background: linear-gradient(var(--os-surface-sheet), var(--os-surface-sheet)), var(--os-bg-solid);
	-webkit-mask-image: linear-gradient(to top, var(--os-text) var(--os-space-20), color-mix(in srgb, var(--os-text) 92%, transparent) calc(var(--os-wave-band-height) * 0.7), color-mix(in srgb, var(--os-text) 55%, transparent) calc(var(--os-wave-band-height) + var(--os-space-12)), transparent);
	mask-image: linear-gradient(to top, var(--os-text) var(--os-space-20), color-mix(in srgb, var(--os-text) 92%, transparent) calc(var(--os-wave-band-height) * 0.7), color-mix(in srgb, var(--os-text) 55%, transparent) calc(var(--os-wave-band-height) + var(--os-space-12)), transparent);
	pointer-events: none;
}
.os-sheet--waves::after {
	content: "";
	position: absolute;
	z-index: calc(var(--os-z-sticky) + 2);
	pointer-events: none;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--os-wave-band-height);
	border-radius: 0 0 var(--os-radius-xl) var(--os-radius-xl);
	background: var(--os-accent);
	-webkit-mask: var(--os-wave-band) left bottom repeat-x;
	mask: var(--os-wave-band) left bottom repeat-x;
}
/* The same band as a standalone element (sidebar foot, empty states) */
.os-waves {
	flex: none;
	height: var(--os-wave-band-height);
	background: var(--os-accent);
	-webkit-mask: var(--os-wave-band) left top repeat-x;
	mask: var(--os-wave-band) left top repeat-x;
}

/* Page header: eyebrow and title on the left, tools on the right */
.os-page-header {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--os-space-16);
	margin-bottom: var(--os-space-16);
}
.os-page-header__lead {
	display: flex;
	align-items: center;
	gap: var(--os-space-16);
	min-width: 0;
}
.os-page-header__tools {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--os-space-8);
}
.os-spacer {
	flex: 1;
}

/* ───────────────────────── Type ───────────────────────── */
.os-title {
	font-family: var(--os-font-display);
	font-size: var(--os-display-xl);
	font-weight: var(--os-display-weight);
	letter-spacing: var(--os-tracking-title);
	line-height: var(--os-leading-tight);
	white-space: nowrap;
}
.os-heading {
	font-family: var(--os-font-display);
	font-size: var(--os-display-md);
	font-weight: var(--os-display-weight);
	letter-spacing: var(--os-tracking-display);
	line-height: var(--os-leading-snug);
}
.os-heading--lg {
	font-size: var(--os-display-lg);
}
/* The gold accent inside a title or heading: a year, a date */
.os-accent {
	color: var(--os-accent-text);
	font-style: var(--os-display-accent-style);
	font-weight: var(--os-display-accent-weight);
}
.os-label {
	font-size: var(--os-label-size);
	font-weight: var(--os-label-weight);
	text-transform: var(--os-label-transform);
	letter-spacing: var(--os-label-tracking);
	color: var(--os-text-tertiary);
}
.os-label--primary {
	color: var(--os-primary);
}
.os-eyebrow {
	display: block;
	margin-bottom: var(--os-space-4);
}
.os-meta {
	font-size: var(--os-font-size-sm);
	color: var(--os-text-tertiary);
}
.os-text-secondary {
	color: var(--os-text-secondary);
}
.os-prose {
	font-family: var(--os-font-prose);
	font-size: var(--os-font-size-prose);
	line-height: var(--os-leading-relaxed);
}
.os-prose--quote {
	font-style: var(--os-display-accent-style);
}
.os-link {
	color: var(--os-primary);
	font-weight: var(--os-weight-medium);
}
.os-link:hover {
	color: var(--os-primary-hover);
	text-decoration: underline;
}

/* ───────────────────────── Controls ───────────────────────── */

/* Button */
.os-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--os-space-6);
	height: var(--os-control-height);
	padding: 0 var(--os-space-14);
	border-radius: var(--os-radius-control);
	background: var(--os-button-bg);
	color: var(--os-button-text);
	font-weight: var(--os-weight-semibold);
	white-space: nowrap;
	transition: background var(--os-duration-fast) var(--os-ease-out);
}
.os-btn:hover {
	background: var(--os-button-bg-hover);
}
.os-btn--quiet {
	background: none;
	color: var(--os-text);
	padding: 0 var(--os-space-10);
}
.os-btn--quiet:hover {
	background: var(--os-hover-tint);
}
/* Outline: a secondary action that needs a visible edge (a lone action on a card) */
.os-btn--outline {
	background: none;
	color: var(--os-text);
	box-shadow: inset 0 0 0 1px var(--os-border-strong);
}
.os-btn--outline:hover {
	background: color-mix(in srgb, transparent, var(--os-text) 5%);
}
.os-btn--plain {
	background: none;
	color: var(--os-primary);
	padding: 0 var(--os-space-8);
}
.os-btn--plain:hover {
	background: var(--os-primary-soft);
}
.os-btn--danger {
	background: var(--os-danger);
	color: var(--os-on-danger);
}
.os-btn--danger:hover {
	background: var(--os-danger-hover);
}
.os-btn--sm {
	height: var(--os-control-height-sm);
	font-size: var(--os-font-size-md);
}
.os-btn:disabled,
.os-btn[aria-disabled="true"],
.os-icon-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Icon button */
.os-icon-btn {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--os-control-height-sm);
	height: var(--os-control-height-sm);
	border-radius: var(--os-radius-control);
	color: var(--os-text-secondary);
	font-size: var(--os-icon-size);
	transition: background var(--os-duration-fast) var(--os-ease-out);
}
.os-icon-btn:hover {
	background: var(--os-surface-control);
}

/* Segmented control: tabs and filters. One item is selected. */
.os-segmented {
	display: flex;
	gap: var(--os-space-2);
}
.os-segmented__item {
	display: inline-flex;
	align-items: center;
	height: var(--os-control-height-sm);
	padding: 0 var(--os-space-12);
	border-radius: var(--os-radius-control);
	color: var(--os-text-secondary);
	font-size: var(--os-font-size-md);
	font-weight: var(--os-weight-medium);
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--os-duration-fast) var(--os-ease-out);
}
.os-segmented__item:hover {
	background: var(--os-surface-control);
}
.os-segmented__item[aria-selected="true"],
.os-segmented__item.is-selected {
	background: var(--os-selected-bg);
	color: var(--os-selected-text);
}

/* Search field, the soft well: bare at rest, a faint well and a filled glyph disc on
   hover, a raised control with a primary disc on focus */
.os-search {
	display: flex;
	align-items: center;
	gap: var(--os-space-8);
	width: 240px;
	height: var(--os-control-height);
	padding: 0 var(--os-space-4);
	border-radius: var(--os-radius-control);
	color: var(--os-placeholder);
	transition:
		background-color var(--os-duration-normal) var(--os-ease-out),
		box-shadow var(--os-duration-normal) var(--os-ease-out);
}
.os-search > i {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--os-avatar-sm);
	height: var(--os-avatar-sm);
	border-radius: var(--os-radius-avatar);
	font-size: var(--os-icon-size-sm);
	transition:
		background-color var(--os-duration-normal) var(--os-ease-out),
		color var(--os-duration-normal) var(--os-ease-out);
}
.os-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: none;
	font: inherit;
	color: var(--os-text);
}
.os-search input::placeholder {
	color: var(--os-placeholder);
}
.os-search:hover {
	background: var(--os-hover-tint-subtle);
}
.os-search:hover > i {
	background: var(--os-surface-inset);
	color: var(--os-text-secondary);
}
.os-search:focus-within {
	background: var(--os-surface-control);
	box-shadow:
		inset 0 0 0 1px var(--os-border),
		var(--os-shadow-card);
}
.os-search:focus-within > i {
	background: var(--os-primary-soft);
	color: var(--os-primary);
}

/* ───────────────────────── Forms ───────────────────────── */
.os-field {
	display: flex;
	flex-direction: column;
	gap: var(--os-space-6);
	min-width: 0;
}
.os-field__label {
	font-size: var(--os-label-size);
	font-weight: var(--os-label-weight);
	text-transform: var(--os-label-transform);
	letter-spacing: var(--os-label-tracking);
	color: var(--os-text-secondary);
}
.os-field__help {
	font-size: var(--os-font-size-sm);
	color: var(--os-text-secondary);
}
.os-field__error {
	display: flex;
	align-items: center;
	gap: var(--os-space-4);
	font-size: var(--os-font-size-sm);
	color: var(--os-danger);
}
.os-input,
.os-select,
.os-textarea {
	width: 100%;
	height: var(--os-control-height);
	padding: 0 var(--os-space-12);
	border: 0;
	border-radius: var(--os-field-radius);
	background: var(--os-field-bg);
	box-shadow: var(--os-field-edge);
	backdrop-filter: var(--os-field-blur);
	font: inherit;
	color: var(--os-text);
	transition: box-shadow var(--os-duration-normal) var(--os-ease-smooth);
}
.os-input::placeholder,
.os-textarea::placeholder {
	color: var(--os-placeholder);
}
.os-input:hover,
.os-select:hover,
.os-textarea:hover {
	box-shadow: var(--os-field-edge-hover);
}
/* The edge only: the app adds the ripple ring on a box around the control (components.md → Input) */
.os-input:focus,
.os-select:focus,
.os-textarea:focus {
	outline: 0;
	box-shadow: var(--os-field-edge-focus);
}
.os-input[aria-invalid="true"],
.os-select[aria-invalid="true"],
.os-textarea[aria-invalid="true"] {
	box-shadow: var(--os-field-edge-invalid);
}
.os-input:disabled,
.os-select:disabled,
.os-textarea:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
/* A text area is never a pill, whatever the control radius is */
.os-textarea {
	height: auto;
	min-height: 84px;
	padding: var(--os-space-8) var(--os-space-12);
	border-radius: var(--os-radius-md);
	line-height: var(--os-leading-relaxed);
	resize: vertical;
}
.os-select {
	appearance: none;
	padding-right: var(--os-space-32);
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 17px) 15px,
		calc(100% - 12px) 15px;
	background-size:
		5px 5px,
		5px 5px;
	background-repeat: no-repeat;
}

/* Checkbox, radio, switch: a native input styled in place */
.os-check,
.os-radio,
.os-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--os-space-8);
	cursor: pointer;
}
.os-check input,
.os-radio input {
	appearance: none;
	flex: none;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: min(var(--os-radius-sm), 5px);
	background: var(--os-input-bg);
	box-shadow: inset 0 0 0 1px var(--os-input-border);
	cursor: pointer;
	transition: background var(--os-duration-fast) var(--os-ease-out);
}
.os-radio input {
	border-radius: 50%;
}
.os-check input:checked,
.os-radio input:checked {
	background: var(--os-primary);
	box-shadow: none;
}
.os-check input:checked::after {
	content: "";
	width: 8px;
	height: 4px;
	margin-top: -2px;
	border-left: 2px solid var(--os-on-primary);
	border-bottom: 2px solid var(--os-on-primary);
	transform: rotate(-45deg);
}
.os-radio input:checked::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--os-on-primary);
}
.os-switch input {
	appearance: none;
	flex: none;
	position: relative;
	width: 34px;
	height: 20px;
	border-radius: var(--os-radius-control);
	background: var(--os-text-tertiary);
	cursor: pointer;
	transition: background var(--os-duration-normal) var(--os-ease-out);
}
.os-switch input::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: calc(var(--os-radius-control) - 2px);
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform var(--os-duration-normal) var(--os-ease-out);
}
.os-switch input:checked {
	background: var(--os-primary);
}
.os-switch input:checked::after {
	transform: translateX(14px);
}

/* ───────────────────────── Navigation ───────────────────────── */

/* Brand lockup: the logo mark and the wordmark. */
.os-brand {
	display: flex;
	align-items: center;
	gap: var(--os-space-12);
	font-family: var(--os-font-display);
	font-size: var(--os-brand-size);
	font-weight: var(--os-brand-weight);
	letter-spacing: var(--os-brand-tracking);
	text-transform: var(--os-brand-transform);
	line-height: var(--os-leading-normal);
}
.os-brand__mark {
	flex: none;
	width: 28px;
	height: 26px;
	color: var(--os-brand-mark);
}
.os-brand__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.os-nav {
	display: flex;
	flex-direction: column;
	gap: var(--os-space-2);
	margin: 0 calc(var(--os-space-12) * -1);
}
.os-nav__item {
	display: flex;
	align-items: center;
	gap: var(--os-space-12);
	min-height: 36px;
	padding: 0 var(--os-space-12);
	border-radius: var(--os-radius-md);
	color: var(--os-text-secondary);
	font-weight: var(--os-weight-medium);
	cursor: pointer;
	transition: background var(--os-duration-fast) var(--os-ease-out);
}
.os-nav__item i {
	font-size: var(--os-icon-size);
}
.os-nav__item:hover {
	background: var(--os-surface-hover);
}
.os-nav__item[aria-current="page"],
.os-nav__item.is-current {
	background: var(--os-surface-selected);
	color: var(--os-text);
	font-weight: var(--os-weight-semibold);
	box-shadow: var(--os-shadow-card);
}
.os-nav__item[aria-current="page"] i,
.os-nav__item.is-current i {
	color: var(--os-accent-text);
}
.os-nav__item .os-badge {
	margin-left: auto;
}

/* Count badge: the one small attention marker in the nav */
.os-badge {
	display: inline-grid;
	place-items: center;
	min-width: 19px;
	height: 19px;
	padding: 0 var(--os-space-6);
	border-radius: var(--os-radius-badge);
	background: var(--os-badge-bg);
	color: var(--os-badge-text);
	font-style: normal;
	font-size: var(--os-font-size-xs);
	font-weight: var(--os-weight-bold);
}

/* Section header: a serif heading with an optional accent, and a slot on the right */
.os-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--os-space-8);
	margin-bottom: var(--os-space-12);
}
.os-section-header__tools {
	display: flex;
	gap: var(--os-space-6);
	color: var(--os-text-tertiary);
	font-size: 16px;
}

/* Back link above a detail title */
.os-back {
	display: flex;
	align-items: center;
	gap: var(--os-space-4);
	cursor: pointer;
}
.os-back:hover {
	color: var(--os-text-secondary);
}

/* The signed-in user at the foot of the sidebar */
.os-user {
	display: flex;
	align-items: center;
	gap: var(--os-space-12);
}
.os-user b {
	display: block;
	font-weight: var(--os-weight-semibold);
}
.os-user small {
	font-size: var(--os-font-size-sm);
	color: var(--os-text-tertiary);
}
.os-user__more {
	margin-left: auto;
	color: var(--os-text-tertiary);
	font-size: var(--os-icon-size);
}

/* ───────────────────────── Data display ───────────────────────── */

/* Avatar: initials on a soft primary fill */
.os-avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--os-avatar-md);
	height: var(--os-avatar-md);
	border-radius: var(--os-radius-avatar);
	background: var(--os-primary-soft);
	color: var(--os-primary);
	font-style: normal;
	font-size: 11px;
	font-weight: var(--os-weight-bold);
	letter-spacing: 0.02em;
}
.os-avatar--xs {
	width: var(--os-avatar-xs);
	height: var(--os-avatar-xs);
	font-size: 8px;
}
.os-avatar--sm {
	width: var(--os-avatar-sm);
	height: var(--os-avatar-sm);
	font-size: 10px;
}
.os-avatar--lg {
	width: var(--os-avatar-lg);
	height: var(--os-avatar-lg);
	font-size: 16px;
}
.os-avatar--muted {
	background: var(--os-surface-selected);
	color: var(--os-text-tertiary);
}
/* The signed-in user: solid, with the one gold ring */
.os-avatar--self {
	background: var(--os-primary);
	color: var(--os-on-primary);
	box-shadow:
		0 0 0 2px var(--os-bg-solid),
		0 0 0 3px var(--os-accent);
}

/* Card */
.os-card {
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	padding: var(--os-space-20);
	border-radius: var(--os-radius-lg);
	background: var(--os-surface-card);
	box-shadow: var(--os-shadow-card);
}
.os-card__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--os-space-8);
	margin-bottom: var(--os-space-12);
}

/* Row list: one card per object, columns set with --os-row-columns */
.os-rows {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.os-row {
	flex: 1;
	max-height: 66px;
	min-height: 52px;
	display: grid;
	grid-template-columns: var(--os-row-columns, repeat(4, minmax(0, 1fr)));
	align-items: center;
	gap: var(--os-space-16);
	margin-top: var(--os-space-6);
	padding: 0 var(--os-space-16);
	border-radius: var(--os-radius-lg);
	background: var(--os-surface-card);
	box-shadow: var(--os-shadow-card);
	cursor: pointer;
}
.os-row > * {
	min-width: 0;
}
.os-row--header {
	flex: none;
	min-height: 0;
	height: 26px;
	margin: 0;
	background: none;
	box-shadow: none;
	cursor: default;
}
.os-row b {
	font-weight: var(--os-weight-semibold);
	white-space: nowrap;
}
.os-row small {
	display: block;
	font-size: var(--os-font-size-sm);
	color: var(--os-text-tertiary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.os-row__lead {
	display: flex;
	align-items: center;
	gap: var(--os-space-12);
}
.os-row .os-row__name {
	font-family: var(--os-font-display);
	font-size: var(--os-display-sm);
	font-weight: var(--os-display-weight-sm);
}
.os-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Plain table: dense reference data, no cards */
.os-table {
	width: 100%;
	border-collapse: collapse;
}
.os-table th {
	padding: var(--os-space-8) var(--os-space-12);
	text-align: left;
	font-size: var(--os-label-size);
	font-weight: var(--os-label-weight);
	text-transform: var(--os-label-transform);
	letter-spacing: var(--os-label-tracking);
	color: var(--os-text-tertiary);
}
.os-table td {
	padding: var(--os-space-10) var(--os-space-12);
	border-top: 1px solid var(--os-border);
}
.os-table tbody tr:hover td {
	background: color-mix(in srgb, transparent, var(--os-text) 3%);
}

/* Stat: label, big serif number with a small unit, one line of context */
.os-stat b {
	display: block;
	font-family: var(--os-font-display);
	font-size: var(--os-display-2xl);
	font-weight: var(--os-display-weight-2xl);
	letter-spacing: var(--os-tracking-stat);
	line-height: 1.25;
}
.os-stat b em {
	font-size: 0.5em;
	font-style: var(--os-display-accent-style);
	font-weight: var(--os-weight-regular);
	letter-spacing: 0;
	color: var(--os-text-tertiary);
}
.os-stat span {
	font-size: var(--os-font-size-sm);
	color: var(--os-text-secondary);
}

/* Progress */
.os-progress {
	display: flex;
	align-items: center;
	gap: var(--os-space-10);
}
.os-progress__bar {
	flex: 1;
	max-width: 84px;
	height: var(--os-progress-height);
	border-radius: var(--os-progress-radius);
	background: linear-gradient(90deg, var(--os-primary) var(--os-progress-value, 0%), var(--os-border) var(--os-progress-value, 0%));
}

/* Activity flag: a dot and a short phrase. `is-attention` is the only gold dot. */
.os-flag {
	display: flex;
	align-items: center;
	gap: var(--os-space-8);
	color: var(--os-text-secondary);
	white-space: nowrap;
}
.os-flag::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--os-border);
}
.os-flag.is-attention {
	color: var(--os-attention-text);
	font-weight: var(--os-weight-medium);
}
.os-flag.is-attention::before {
	background: var(--os-attention);
}
.os-new {
	margin-left: var(--os-space-8);
	color: var(--os-attention);
	font-weight: var(--os-weight-semibold);
}

/* Tag: a small status label */
.os-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--os-space-4);
	height: 20px;
	padding: 0 var(--os-space-8);
	border-radius: var(--os-radius-badge);
	background: var(--os-surface-inset);
	color: var(--os-text-secondary);
	font-size: var(--os-font-size-xs);
	font-weight: var(--os-weight-semibold);
	white-space: nowrap;
}
.os-tag--primary {
	background: var(--os-primary-soft);
	color: var(--os-primary);
}
.os-tag--success {
	background: var(--os-success-soft);
	color: var(--os-success);
}
.os-tag--warning {
	background: var(--os-warning-soft);
	color: var(--os-warning);
}
.os-tag--danger {
	background: var(--os-danger-soft);
	color: var(--os-danger);
}

/* Chip: a planned item (practice, journal prompt, session) */
.os-chip {
	padding: var(--os-space-6) var(--os-space-10);
	border-radius: var(--os-radius-sm);
	background: var(--os-primary-soft);
	line-height: var(--os-leading-snug);
}
.os-chip b {
	display: block;
	font-size: var(--os-font-size-md);
	font-weight: var(--os-weight-semibold);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.os-chip small {
	font-size: var(--os-font-size-xs);
	color: var(--os-text-secondary);
}
.os-chip.is-done {
	background: var(--os-surface-inset);
}
.os-chip.is-done b {
	font-weight: var(--os-weight-medium);
	color: var(--os-text-secondary);
}
.os-chip.is-done small::before {
	content: "✓ ";
	color: var(--os-primary);
}
.os-chip--session,
.os-chip--session.is-done {
	background: var(--os-primary);
}
.os-chip--session b,
.os-chip--session.is-done b {
	font-weight: var(--os-weight-semibold);
	color: var(--os-on-primary);
}
.os-chip--session small,
.os-chip--session.is-done small::before {
	color: var(--os-on-primary);
}
.os-chip.is-today {
	box-shadow: var(--os-session-now-shadow);
}

/* Note: a dated entry in a list (session note, journal entry) */
.os-note {
	padding: var(--os-space-12) 0;
	border-top: 1px solid var(--os-border);
}
.os-note time {
	font-size: var(--os-font-size-sm);
	color: var(--os-text-tertiary);
}
.os-note p {
	margin-top: var(--os-space-4);
}

/* Media card: line-art cover above a title block */
.os-media-card {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	border-radius: var(--os-radius-lg);
	background: var(--os-surface-card);
	box-shadow: var(--os-shadow-card);
	cursor: pointer;
}
.os-media-card__cover {
	flex: 1;
	min-height: 40px;
	position: relative;
	overflow: hidden;
	margin: var(--os-space-6) var(--os-space-6) 0;
	/* concentric with the card: card radius minus the inset */
	border-radius: max(calc(var(--os-radius-lg) - var(--os-space-6)), 2px);
	background: var(--os-surface-art);
	color: var(--os-art-line);
}
.os-media-card__cover svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	stroke: currentColor;
}
.os-media-card__body {
	flex: none;
	padding: var(--os-space-12) var(--os-space-16) var(--os-space-16);
}
.os-media-card__body .os-heading {
	display: block;
	margin: var(--os-space-2) 0;
}
.os-media-card__body p {
	font-size: var(--os-font-size-sm);
	color: var(--os-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.os-media-card__body .os-meta {
	display: block;
	margin-top: var(--os-space-8);
}

/* ───────────────────────── Calendar ───────────────────────── */

/* Week grid */
.os-week {
	--os-week-gutter: 60px;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}
.os-week__head,
.os-week__body {
	display: grid;
	grid-template-columns: var(--os-week-gutter) repeat(7, minmax(0, 1fr));
}
.os-week__head {
	flex: none;
}
.os-week__body {
	flex: 1;
	min-height: 0;
	position: relative;
}
.os-week__day {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--os-space-6);
	padding: var(--os-space-14) 0 var(--os-space-12);
}
.os-week__num {
	font-family: var(--os-font-display);
	font-size: var(--os-display-lg);
	font-weight: var(--os-display-weight);
	letter-spacing: var(--os-tracking-display);
}
.os-week__day.is-closed .os-week__num {
	color: var(--os-text-tertiary);
}
.os-week__day.is-today .os-label {
	color: var(--os-primary);
	font-weight: var(--os-weight-semibold);
}
.os-week__day.is-today .os-week__num {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--os-radius-marker);
	background: var(--os-primary);
	color: var(--os-on-primary);
	font-family: var(--os-font-body);
	font-size: 14px;
	font-weight: var(--os-weight-semibold);
	letter-spacing: 0;
}
.os-week__gutter {
	position: relative;
}
.os-week__gutter span {
	position: absolute;
	right: var(--os-space-12);
	transform: translateY(-50%);
	font-size: var(--os-font-size-xs);
	color: var(--os-text-tertiary);
	white-space: nowrap;
}
.os-week__col {
	position: relative;
	margin: 0 3px;
}
/* Open (bookable) time is a light lane edged by a hairline; closed time is left empty */
.os-week__open {
	position: absolute;
	left: 0;
	right: 0;
	border-radius: var(--os-radius-lane);
	background: var(--os-surface-control);
	box-shadow: inset 0 0 0 1px var(--os-border);
}
.os-week__line {
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--os-border-subtle);
}

/* Session block. Three states: upcoming, past (is-past), and upcoming today (is-now). */
.os-session {
	position: absolute;
	left: var(--os-space-4);
	right: var(--os-space-4);
	display: grid;
	grid-template-columns: var(--os-avatar-sm) minmax(0, 1fr);
	column-gap: var(--os-space-8);
	align-content: start;
	overflow: hidden;
	padding: var(--os-space-8);
	border-radius: var(--os-radius-session);
	background: var(--os-session-bg);
	color: var(--os-session-text);
	box-shadow: var(--os-session-shadow);
	font-size: var(--os-font-size-sm);
	line-height: var(--os-leading-snug);
}
.os-session .os-avatar {
	grid-row: span 2;
}
.os-session__name {
	grid-column: 2;
	font-weight: var(--os-weight-semibold);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.os-session__time {
	grid-column: 2;
	font-size: var(--os-font-size-xs);
	color: var(--os-session-meta);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 30 minutes or less: one line, name only */
.os-session--short {
	grid-template-columns: var(--os-avatar-xs) minmax(0, 1fr);
	align-content: center;
	padding-top: 0;
	padding-bottom: 0;
}
.os-session--short .os-avatar {
	grid-row: auto;
}
.os-session--short .os-session__time {
	display: none;
}
.os-session.is-past {
	background: var(--os-session-past-bg);
	color: var(--os-session-past-text);
	box-shadow: none;
}
.os-session.is-past .os-session__name {
	font-weight: var(--os-weight-medium);
}
.os-session.is-past .os-session__time {
	color: var(--os-session-past-meta);
}
.os-session.is-past .os-avatar {
	background: var(--os-surface-control);
	color: var(--os-text-tertiary);
}
.os-session.is-now {
	background: var(--os-session-now-bg);
	color: var(--os-session-now-text);
	box-shadow: var(--os-session-now-shadow);
}
.os-session.is-now .os-session__time {
	color: var(--os-session-now-meta);
}
.os-session.is-now .os-avatar {
	background: var(--os-session-now-avatar);
	color: var(--os-session-now-text);
}

/* Now line: the one gold line in the grid */
.os-now {
	position: absolute;
	z-index: 3;
	left: 3px;
	right: 3px;
	height: 2px;
	border-radius: var(--os-now-marker-radius);
	background: var(--os-accent);
}
.os-now::before {
	content: "";
	position: absolute;
	left: calc(var(--os-now-marker-width) / -2);
	top: calc((2px - var(--os-now-marker-height)) / 2);
	width: var(--os-now-marker-width);
	height: var(--os-now-marker-height);
	border-radius: var(--os-now-marker-radius);
	background: var(--os-accent);
}

/* Mini month */
.os-month {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	row-gap: var(--os-space-2);
}
.os-month__dow {
	padding-bottom: var(--os-space-8);
	text-align: center;
	font-size: var(--os-font-size-xs);
	font-weight: var(--os-label-weight);
	text-transform: var(--os-label-transform);
	letter-spacing: var(--os-label-tracking);
	color: var(--os-text-tertiary);
}
.os-month__day {
	position: relative;
	display: grid;
	place-items: center;
	height: 30px;
	font-size: var(--os-font-size-md);
}
.os-month__day.is-outside {
	color: var(--os-text-tertiary);
	opacity: 0.55;
}
/* the week on show is one band */
.os-month__day.is-week {
	background: var(--os-surface-selected);
}
.os-month__day.is-week-start {
	border-radius: var(--os-radius-marker) 0 0 var(--os-radius-marker);
}
.os-month__day.is-week-end {
	border-radius: 0 var(--os-radius-marker) var(--os-radius-marker) 0;
}
.os-month__day.is-busy::after {
	content: "";
	position: absolute;
	bottom: 2px;
	left: 50%;
	width: var(--os-month-marker-width);
	height: var(--os-month-marker-height);
	margin-left: calc(var(--os-month-marker-width) / -2);
	border-radius: var(--os-month-marker-radius);
	background: var(--os-accent);
	opacity: 0.9;
}
.os-month__day.is-selected span {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--os-radius-marker);
	background: var(--os-primary);
	color: var(--os-on-primary);
	font-weight: var(--os-weight-semibold);
}
.os-month__day.is-selected::after {
	display: none;
}

/* Agenda: the selected day's sessions as a list */
.os-agenda {
	display: flex;
	flex-direction: column;
}
.os-agenda__item {
	display: grid;
	grid-template-columns: var(--os-avatar-md) minmax(0, 1fr);
	column-gap: var(--os-space-12);
	align-items: center;
	padding: var(--os-space-6) 0;
}
.os-agenda__item .os-avatar {
	grid-row: span 2;
}
.os-agenda__item strong {
	display: block;
	font-size: var(--os-font-size-md);
	font-weight: var(--os-weight-semibold);
}
.os-agenda__item small {
	font-size: var(--os-font-size-sm);
	color: var(--os-text-tertiary);
	white-space: nowrap;
}
.os-agenda__item.is-past strong {
	color: var(--os-text-secondary);
	font-weight: var(--os-weight-medium);
}

/* ───────────────────────── Feedback and overlays ───────────────────────── */

/* Alert: an inline message inside a screen */
.os-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--os-space-10);
	padding: var(--os-space-12) var(--os-space-14);
	border-radius: var(--os-radius-md);
	background: var(--os-info-soft);
}
.os-alert > i {
	margin-top: 1px;
	font-size: var(--os-icon-size);
	color: var(--os-info);
}
.os-alert b {
	display: block;
	font-weight: var(--os-weight-semibold);
}
.os-alert p {
	color: var(--os-text-secondary);
}
.os-alert--success {
	background: var(--os-success-soft);
}
.os-alert--success > i {
	color: var(--os-success);
}
.os-alert--warning {
	background: var(--os-warning-soft);
}
.os-alert--warning > i {
	color: var(--os-warning);
}
.os-alert--danger {
	background: var(--os-danger-soft);
}
.os-alert--danger > i {
	color: var(--os-danger);
}

/* Toast: a short confirmation that floats above the screen */
.os-toast {
	display: inline-flex;
	align-items: center;
	gap: var(--os-space-10);
	min-height: 44px;
	padding: var(--os-space-8) var(--os-space-12) var(--os-space-8) var(--os-space-14);
	border-radius: var(--os-radius-md);
	background: var(--os-surface-overlay);
	box-shadow: var(--os-shadow-overlay);
}
.os-toast > i:first-child {
	font-size: var(--os-icon-size);
	color: var(--os-success);
}

/* Menu: a list of actions in a popover */
.os-menu {
	display: inline-flex;
	flex-direction: column;
	min-width: 180px;
	padding: var(--os-space-4);
	border-radius: var(--os-radius-md);
	background: var(--os-surface-overlay);
	box-shadow: var(--os-shadow-overlay);
}
.os-menu__item {
	display: flex;
	align-items: center;
	gap: var(--os-space-10);
	height: var(--os-control-height-sm);
	padding: 0 var(--os-space-10);
	/* concentric with the menu */
	border-radius: max(calc(var(--os-radius-md) - var(--os-space-4)), 2px);
	cursor: pointer;
}
.os-menu__item i {
	font-size: 16px;
	color: var(--os-text-secondary);
}
.os-menu__item:hover {
	background: color-mix(in srgb, transparent, var(--os-text) 6%);
}
.os-menu__item--danger,
.os-menu__item--danger i {
	color: var(--os-danger);
}
.os-menu__divider {
	height: 1px;
	margin: var(--os-space-4) 0;
	background: var(--os-border);
}

/* Tooltip */
.os-tooltip {
	display: inline-block;
	padding: var(--os-space-4) var(--os-space-8);
	border-radius: min(var(--os-radius-sm), 6px);
	background: var(--os-selected-bg);
	color: var(--os-selected-text);
	font-size: var(--os-font-size-xs);
	font-weight: var(--os-weight-medium);
}

/* Modal */
.os-scrim {
	position: fixed;
	z-index: var(--os-z-overlay);
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--os-scrim);
}
.os-modal {
	width: min(440px, calc(100% - var(--os-space-32)));
	padding: var(--os-space-24);
	border-radius: var(--os-radius-xl);
	background: var(--os-surface-overlay);
	box-shadow: var(--os-shadow-modal);
}
.os-modal__body {
	margin-top: var(--os-space-8);
	color: var(--os-text-secondary);
	line-height: var(--os-leading-relaxed);
}
.os-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--os-space-8);
	margin-top: var(--os-space-24);
}

/* Empty state */
.os-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--os-space-8);
	padding: var(--os-space-40) var(--os-space-24);
	text-align: center;
}
.os-empty > i {
	font-size: 28px;
	color: var(--os-text-tertiary);
}
.os-empty p {
	max-width: 36ch;
	color: var(--os-text-secondary);
}
.os-empty .os-btn {
	margin-top: var(--os-space-8);
}

/* Skeleton: a placeholder while content loads */
.os-skeleton {
	border-radius: var(--os-radius-sm);
	background: var(--os-surface-inset);
	animation: os-pulse 1.4s var(--os-ease-smooth) infinite alternate;
}
@keyframes os-pulse {
	to {
		opacity: 0.45;
	}
}
@media (prefers-reduced-motion: reduce) {
	.os-skeleton {
		animation: none;
	}
	* {
		transition-duration: 0.01ms !important;
	}
}

/*
 * oseana.ai marketing site.
 *
 * Loaded after docs/design-system/css/tokens.css and components.css (build.ts
 * joins the three into one file). Reads tokens only: a marketing page needs
 * larger type and wider spacing than the app, so its sizes are derived from
 * the tokens, never written as pixel values, and nothing tests the style or
 * the mode.
 */
:root {
	--mk-body: calc(var(--os-font-size-body) * 1.2);
	--mk-lead: calc(var(--os-font-size-body) * 1.45);
	--mk-display: clamp(
		calc(var(--os-display-2xl) * 1.1),
		5.6vw,
		calc(var(--os-display-2xl) * 1.95)
	);
	--mk-h2: clamp(
		var(--os-display-xl),
		3.4vw,
		calc(var(--os-display-2xl) * 1.25)
	);
	--mk-h3: var(--os-display-lg);
	--mk-gutter: clamp(var(--os-space-20), 5vw, var(--os-space-64));
	--mk-section: clamp(var(--os-space-64), 9vw, calc(var(--os-space-64) * 2));
}
html,
body {
	height: auto;
	min-height: 100%;
}
html {
	scroll-behavior: smooth;
}
ol {
	list-style: none;
}
body {
	font-size: var(--mk-body);
	line-height: var(--os-leading-relaxed);
}

/* Width and rhythm */
.mk-wrap {
	width: 100%;
	max-width: calc(var(--os-content-max) + var(--mk-gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--mk-gutter);
}
.mk-section {
	padding-top: var(--mk-section);
	padding-bottom: var(--mk-section);
}
.mk-rule {
	height: 1px;
	background: var(--os-hairline);
}

/* Type */
.mk-display {
	font-family: var(--os-font-display);
	font-size: var(--mk-display);
	font-weight: var(--os-display-weight-2xl);
	letter-spacing: var(--os-tracking-stat);
	line-height: var(--os-leading-tight);
	text-wrap: balance;
}
.mk-h2 {
	font-family: var(--os-font-display);
	font-size: var(--mk-h2);
	font-weight: var(--os-display-weight);
	letter-spacing: var(--os-tracking-title);
	line-height: var(--os-leading-tight);
	text-wrap: balance;
}
.mk-h3 {
	font-family: var(--os-font-display);
	font-size: var(--mk-h3);
	font-weight: var(--os-display-weight);
	letter-spacing: var(--os-tracking-display);
	line-height: var(--os-leading-snug);
}
.mk-lead {
	font-size: var(--mk-lead);
	color: var(--os-text-secondary);
	text-wrap: pretty;
}
.mk-muted {
	color: var(--os-text-secondary);
}
.mk-small {
	font-size: var(--os-font-size-body);
	color: var(--os-text-secondary);
}

/* Top bar */
.mk-nav {
	display: flex;
	align-items: center;
	gap: var(--os-space-24);
	padding-top: var(--os-space-20);
	padding-bottom: var(--os-space-20);
}
.mk-nav__links {
	display: flex;
	gap: var(--os-space-24);
	margin-left: var(--os-space-24);
	font-size: var(--os-font-size-body);
	font-weight: var(--os-weight-medium);
	color: var(--os-text-secondary);
}
.mk-nav__links a:hover {
	color: var(--os-text);
}
.mk-nav__tools {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--os-space-8);
}

/* A larger button for the page's main actions */
.mk-btn-lg {
	height: var(--os-control-height-lg);
	padding: 0 var(--os-space-20);
	font-size: var(--mk-body);
}
.mk-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--os-space-12);
}

/* Icon in a soft disc, for feature lists */
.mk-glyph {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--os-control-height-lg);
	height: var(--os-control-height-lg);
	border-radius: var(--os-radius-md);
	background: var(--os-primary-soft);
	color: var(--os-primary);
	font-size: var(--os-display-lg);
}

/* Sessions shown outside a calendar grid: a plain stacked day */
.mk-day {
	display: flex;
	flex-direction: column;
	gap: var(--os-space-6);
}
.mk-day .os-session {
	position: relative;
	left: auto;
	right: auto;
}

/* Footer */
.mk-footer {
	padding-top: var(--os-space-48);
	font-size: var(--os-font-size-body);
	color: var(--os-text-secondary);
}
.mk-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: var(--os-space-32);
	padding-bottom: var(--os-space-40);
}
.mk-footer__grid h2 {
	margin-bottom: var(--os-space-10);
}
.mk-footer__grid li {
	padding: var(--os-space-4) 0;
}
.mk-footer__grid a:hover {
	color: var(--os-text);
}
.mk-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--os-space-12);
	padding: var(--os-space-20) 0;
	border-top: 1px solid var(--os-hairline);
	font-size: var(--os-font-size-sm);
	color: var(--os-text-tertiary);
}

@media (max-width: 860px) {
	.mk-nav__links {
		display: none;
	}
	.mk-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Inline icon (layout.ts `icon`) */
.mk-icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
}
.mk-glyph .mk-icon {
	width: var(--os-display-lg);
	height: var(--os-display-lg);
}
.os-tag .mk-icon {
	width: 1em;
	height: 1em;
}
.mk-skip {
	position: absolute;
	left: var(--os-space-16);
	top: var(--os-space-16);
	z-index: var(--os-z-toast);
	padding: var(--os-space-8) var(--os-space-14);
	border-radius: var(--os-radius-control);
	background: var(--os-surface-overlay);
	box-shadow: var(--os-shadow-overlay);
	transform: translateY(-200%);
}
.mk-skip:focus {
	transform: none;
}
.mk-footer__about {
	max-width: 34ch;
	margin-top: var(--os-space-10);
}

/* Long text: the legal pages, support and the Zoom guide */
.mk-prose-sheet {
	margin-top: var(--os-space-16);
	padding: clamp(var(--os-space-24), 6vw, var(--os-space-64));
}
.mk-prose-head {
	display: flex;
	flex-direction: column;
	gap: var(--os-space-12);
	max-width: var(--os-form-max);
}
.mk-prose-head .mk-lead {
	margin-top: var(--os-space-8);
}
.mk-prose-head .mk-actions {
	margin-top: var(--os-space-16);
}
.mk-prose {
	max-width: var(--os-form-max);
	color: var(--os-text-secondary);
}
.mk-prose section {
	margin-top: var(--os-space-40);
}
.mk-prose h2 {
	margin-bottom: var(--os-space-12);
	font-family: var(--os-font-display);
	font-size: var(--mk-h3);
	font-weight: var(--os-display-weight);
	letter-spacing: var(--os-tracking-display);
	line-height: var(--os-leading-snug);
	color: var(--os-text);
}
.mk-prose p + p,
.mk-prose p + ul,
.mk-prose p + ol,
.mk-prose ul + p,
.mk-prose ol + p,
.mk-prose * + .mk-callout {
	margin-top: var(--os-space-12);
}
.mk-prose ul,
.mk-prose ol {
	padding-left: var(--os-space-24);
}
.mk-prose ul {
	list-style: disc;
}
.mk-prose ol {
	list-style: decimal;
}
.mk-prose li + li {
	margin-top: var(--os-space-6);
}
.mk-prose a {
	color: var(--os-primary);
	font-weight: var(--os-weight-medium);
	overflow-wrap: anywhere;
}
.mk-prose a:hover {
	color: var(--os-primary-hover);
	text-decoration: underline;
}
.mk-callout {
	padding: var(--os-space-16) var(--os-space-20);
	border-radius: var(--os-radius-md);
	background: var(--os-primary-soft);
	color: var(--os-text);
}

/* ───────────────────────── Home ───────────────────────── */
.home-hero {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--os-space-48);
	align-items: center;
	padding-top: var(--os-space-48);
	padding-bottom: var(--mk-section);
}
.home-hero .mk-display {
	margin: var(--os-space-12) 0 var(--os-space-20);
}
.home-hero .mk-lead {
	max-width: 46ch;
	margin-bottom: var(--os-space-28);
}
.home-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--os-space-8) var(--os-space-20);
	margin-top: var(--os-space-24);
	font-size: var(--os-font-size-body);
	color: var(--os-text-secondary);
}
.home-hero__points li {
	display: inline-flex;
	align-items: center;
	gap: var(--os-space-6);
}
.home-hero__points .mk-icon {
	color: var(--os-primary);
}
/* The app in miniature: a sheet holding a week */
.home-app {
	padding: var(--os-space-20);
	font-size: var(--os-font-size-body);
}
.home-app__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--os-space-16);
}
.home-week {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--os-space-6);
}
.home-week__day {
	text-align: center;
	padding-bottom: var(--os-space-8);
	color: var(--os-text-secondary);
	font-size: var(--os-font-size-sm);
}
.home-week__day b {
	display: block;
	font-family: var(--os-font-display);
	font-size: var(--os-display-md);
	font-weight: var(--os-display-weight);
	color: var(--os-text);
}
.home-week__col {
	position: relative;
	height: 340px;
	border-radius: var(--os-radius-lane);
	background: var(--os-surface-inset);
}
/* A narrow day column has no room for avatars: name and time only */
.home-week .os-session {
	grid-template-columns: minmax(0, 1fr);
}
.home-week .os-session__name,
.home-week .os-session__time {
	grid-column: 1;
}
/* Feature grid */
.home-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--os-space-20);
	margin-bottom: var(--os-space-32);
}
.home-head .mk-h2 {
	max-width: 22ch;
	margin-top: var(--os-space-8);
}
.home-head p {
	max-width: 44ch;
}
.home-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--os-space-16);
}
.home-grid .os-card {
	display: flex;
	flex-direction: column;
	gap: var(--os-space-10);
	padding: var(--os-space-24);
}
.home-span-2 {
	grid-column: span 2;
}
.home-span-3 {
	grid-column: span 3;
}
.home-span-4 {
	grid-column: span 4;
}
.home-demo {
	margin-top: auto;
	padding-top: var(--os-space-12);
	font-size: var(--os-font-size-body);
}
.home-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--os-space-12);
	padding: var(--os-space-8) 0;
	border-top: 1px solid var(--os-hairline-soft);
}
.home-line > span:first-child {
	display: flex;
	align-items: center;
	gap: var(--os-space-10);
	min-width: 0;
}
.home-slots {
	display: flex;
	flex-wrap: wrap;
	gap: var(--os-space-6);
}
/* Connections */
.home-connect {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--os-space-16);
}
.home-connect .os-card {
	display: flex;
	flex-direction: column;
	gap: var(--os-space-10);
	padding: var(--os-space-24);
}
.home-connect dl {
	margin-top: var(--os-space-6);
	font-size: var(--os-font-size-body);
}
.home-connect dt {
	margin-top: var(--os-space-10);
}
.home-connect dd {
	color: var(--os-text-secondary);
}
.home-note {
	max-width: 80ch;
	margin-top: var(--os-space-24);
	font-size: var(--os-font-size-body);
	color: var(--os-text-secondary);
}
/* Steps */
.home-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--os-space-32);
	counter-reset: step;
}
.home-steps li {
	counter-increment: step;
	padding-top: var(--os-space-16);
	border-top: 1px solid var(--os-border-strong);
}
.home-steps li::before {
	content: counter(step);
	display: block;
	margin-bottom: var(--os-space-8);
	font-family: var(--os-font-display);
	font-size: var(--os-display-2xl);
	font-weight: var(--os-display-weight-2xl);
	line-height: var(--os-leading-tight);
	color: var(--os-text-tertiary);
}
.home-steps p {
	margin-top: var(--os-space-6);
	color: var(--os-text-secondary);
}
/* Closing band */
.home-close {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--os-space-24);
	flex-direction: row;
	padding: var(--os-space-48);
}
.home-close .mk-h2 {
	max-width: 20ch;
}
@media (max-width: 960px) {
	.home-hero,
	.home-connect,
	.home-steps {
		grid-template-columns: minmax(0, 1fr);
	}
	.home-grid > * {
		grid-column: 1 / -1;
	}
}

/* Pieces the mock-up set inline */
.home-head .mk-h2,
.home-head .os-label {
	display: block;
}
.home-demo__label {
	margin-bottom: var(--os-space-8);
}
.home-line .mk-icon {
	color: var(--os-text-secondary);
}
.home-connect dt {
	font-weight: var(--os-weight-semibold);
}
.home-note {
	max-width: 80ch;
	margin-top: var(--os-space-24);
	font-size: var(--os-font-size-body);
	color: var(--os-text-secondary);
}
#product,
#connections,
#start {
	padding-top: 0;
	scroll-margin-top: var(--os-space-32);
}
/* A phone shows the last three days of the week, so names stay readable */
@media (max-width: 560px) {
	.home-week {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.home-week__day:nth-child(-n + 2),
	.home-week__col:nth-child(6),
	.home-week__col:nth-child(7) {
		display: none;
	}
	.home-app__head .os-meta {
		display: none;
	}
	.home-close {
		padding: var(--os-space-28);
	}
}