/* =============================================================================
   CSS LAYERS - Explicit cascade order
   ============================================================================= */

@layer reset, fonts, tokens, base, layout, components, utilities;

/* =============================================================================
   TODO: line-height and text alignment

   Line-height adds space above and below text, making precise alignment tricky.
   Current workaround uses negative margins (e.g., margin-block-start: -0.3em).

   Future solution - when browser support improves, use text-box-trim:
   https://caniuse.com/css-text-box-trim

   text-box-trim: both;
   text-box-edge: cap alphabetic;

   This trims line-height spacing from first/last lines while keeping readable
   line-height for multi-line text.
   ============================================================================= */

/* =============================================================================
   RESET LAYER - Browser fixes ONLY (no opinions)
   kudos: https://github.com/schalkneethling/css-community-reset

   A combination of the following resets:
   https://piccalil.li/blog/a-more-modern-css-reset/
   https://www.joshwcomeau.com/css/custom-css-reset/
   https://dbushell.com/2025/09/12/css-reset/
   ============================================================================= */

@layer reset {
	  /* Use a more-intuitive box-sizing model. */
	  *,
	*::before,
	*::after {
		  box-sizing: border-box;
	}

	  /* Prevent font size inflation */
	  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
	  /* https://caniuse.com/text-size-adjust */
	  html {
		    -moz-text-size-adjust: none;
		    -webkit-text-size-adjust: none;
		    text-size-adjust: none;
		    tab-size: 4;
	  }

	  /* Google Translate RTL support */
	  /* https://dbushell.com/2025/09/12/css-reset/#:~:text=translated%2Drtl */
	  html.translated-rtl {
		    direction: rtl;
	  }

	  /* Browsers add 8px margin */
	  body {
		    margin: 0;
	  }

	  /* Remove default margin in favour of better control in authored CSS */
	  body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	figure,
	blockquote,
	dl,
	dd {
		  margin-block: 0;
	}

	  ul,
	ol {
		  margin-block: 0;
	}

	  /* Remove built-in form typography styles */
	  input,
	button,
	textarea,
	select {
		  font: inherit;
	}

	  /* Chrome/Safari border inheritance bug */
	  table {
		    border-color: currentColor;
	  }

	  /* Weight varies 400-700 across browsers */
	  b,
	strong {
		  font-weight: bolder;
	}

	  /* Monospace font sizing bug - double declaration intentional */
	  code,
	kbd,
	samp,
	pre {
		  /* biome-ignore lint/suspicious/noDuplicateFontNames: Intentional fix for browser font sizing bug */
		  font-family: ui-monospace, monospace, monospace;
		  font-size: 1em;
	}

	  /* Line-height issues across browsers */
	  sub,
	sup {
		  font-size: 75%;
		  line-height: 0;
		  position: relative;
		  vertical-align: baseline;
	}

	  sub {
		    bottom: -0.25em;
	  }

	  sup {
		    top: -0.5em;
	  }

	  /* Dialog inconsistent padding/border across browsers */
	  dialog {
		    padding: 0;
		    border: none;
	  }

	  /* Firefox dims placeholder to 0.54 opacity */
	  ::placeholder {
		    opacity: 1;
	  }

	  /* Ensure [hidden] cannot be overridden */
	  [hidden] {
		    /* biome-ignore lint/complexity/noImportantStyles: Required to enforce hidden attribute */
		    display: none !important;
	  }

	  /* Respect user motion preferences - !important required for accessibility override */
	  @media (prefers-reduced-motion: reduce) {
		    *,
		*::before,
		*::after {
			  /* biome-ignore lint/complexity/noImportantStyles: A11y requirement to override all animations */
			  animation-duration: 0.01ms !important;
			  /* biome-ignore lint/complexity/noImportantStyles: A11y requirement */
			  animation-iteration-count: 1 !important;
			  /* biome-ignore lint/complexity/noImportantStyles: A11y requirement */
			  transition-duration: 0.01ms !important;
			  /* biome-ignore lint/complexity/noImportantStyles: A11y requirement */
			  scroll-behavior: auto !important;
		}
	  }
}

/* =============================================================================
   FONTS LAYER - @font-face declarations
   ============================================================================= */

@layer fonts {
	  @font-face {
		    font-family: InterVariable;
		    font-style: normal;
		    font-weight: 100 900;
		    font-display: swap;
		    src: url("/assets/fonts/InterVariable.woff2") format("woff2");
	  }

	  @font-face {
		    font-family: InterVariable;
		    font-style: italic;
		    font-weight: 100 900;
		    font-display: optional;
		    src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2");
	  }

	  /* Fallback font with metrics adjusted to match Inter, preventing CLS on font swap */
	  @font-face {
		    font-family: "Inter-fallback";
		    src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
		    size-adjust: 107%;
		    ascent-override: 96%;
		    descent-override: 24%;
		    line-gap-override: 0%;
	  }
}

/* =============================================================================
   TOKENS LAYER - Design tokens (custom properties)
   ============================================================================= */

@layer tokens {
	  :root {
		    /* Typography Scale — fixed, 4px grid */
		    --step--3: 0.625rem; /* 10px */
		    --step--2: 0.75rem; /* 12px */
		    --step--1: 0.875rem; /* 14px */
		    --step-0: 1rem; /* 16px */
		    --step-1: 1.125rem; /* 18px */
		    --step-2: 1.25rem; /* 20px */
		    --step-3: 1.5rem; /* 24px */
		    --step-4: 1.875rem; /* 30px */
		    --step-5: 2.5rem; /* 40px */

		    /* Spacing Scale — fixed, 4px grid */
		    --space-3xs: 0.25rem; /*  4px */
		    --space-2xs: 0.5rem; /*  8px */
		    --space-xs: 0.75rem; /* 12px */
		    --space-s: 1rem; /* 16px */
		    --space-m: 1.5rem; /* 24px */
		    --space-l: 2rem; /* 32px */
		    --space-xl: 3rem; /* 48px */
		    --space-2xl: 4rem; /* 64px */
		    --space-3xl: 6rem; /* 96px */

		    /* Grid */
		    --grid-max-width: 69.75rem; /* 1116px */
		    --grid-gutter: var(--space-m); /* 24px */
		    --grid-columns: 12;

		    /* Font stacks */
		    --font-body: "InterVariable", "Inter-fallback", system-ui, sans-serif;
		    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

		    /* Font Weights */
		    --weight-light: 300;
		    --weight-normal: 400;
		    --weight-medium: 500;
		    --weight-semibold: 600;
		    --weight-bold: 700;

		    /* Line Heights — grid-aligned
	   Each value targets a specific 4px-grid line-height.
	   "body" = used at 16px, "sm" = used at 14px, "xs" = used at 12px */
		    --leading-none: 1; /* 16px on 16px */
		    --leading-body: 1.5; /* 24px on 16px — body baseline */
		    --leading-sm: calc(24 / 14); /* 24px on 14px — reading text */
		    --leading-sm-compact: calc(20 / 14); /* 20px on 14px — UI chrome */
		    --leading-xs-compact: calc(20 / 12); /* 20px on 12px — UI chrome */
		    --leading-title: calc(48 / 40); /* 48px on 40px — hero/h1 titles */
		    --leading-heading: calc(32 / 24); /* 32px on 24px — h2/h3 headings */
		    --leading-interactive: 1.1; /* buttons, inputs — single-line UI */

		    /* Border Radius */
		    --radius-s: 0.25rem; /* 4px */
		    --radius-m: 0.5rem; /* 8px */
		    --radius-l: 1rem; /* 16px */
		    --radius-pill: 9999px;

		    /* Sizing */
		    --indicator-size: 1.5rem;
		    --icon-size-lg: 1.25em;
		    --touch-target-min: 44px;
		    --border-width: 1px;

		    /* Transitions */
		    --transition-fast: 0.15s ease;
		    --transition-normal: 0.25s ease;

		    /* Colors - Primitives
		   ========================================================================= */

		    /* Neutral scale */
		    --color-neutral-50: #fafafa;
		    --color-neutral-100: #f5f5f5;
		    --color-neutral-200: #e5e5e5;
		    --color-neutral-300: #d4d4d4;
		    --color-neutral-400: #a3a3a3;
		    --color-neutral-500: #737373;
		    --color-neutral-600: #525252;
		    --color-neutral-700: #404040;
		    --color-neutral-800: #262626;
		    --color-neutral-900: #171717;
		    --color-neutral-950: #0a0a0a;

		    --color-white: #fff;
		    --color-black: #000;

		    /* Brand */
		    --color-brand: #2b67f1;
		    --color-brand-dark: oklch(from var(--color-brand) calc(l - 0.1) c h);
		    --color-brand-alpha: oklch(from var(--color-brand) l c h / 0.2);

		    /* Colors - Semantic (Light Mode)
		   ========================================================================= */
		    color-scheme: light dark;

		    /* Body */
		    --body-foreground: var(--color-neutral-700);
		    --body-background: var(--color-white);
		    --body-muted: var(--color-neutral-600);
		    --body-lead: var(--color-neutral-700);

		    /* Surfaces */
		    --surface-raised: var(--color-white);
		    --surface-default: var(--color-white);
		    --surface-lowered: var(--color-white);
		    --surface-border: var(--color-neutral-200);
		    --surface-hover: var(--color-neutral-200);

		    /* Navigation */
		    --nav-background: var(--color-white);
		    --nav-foreground: var(--color-neutral-700);
		    --nav-foreground-active: var(--color-neutral-900);
		    --nav-border: var(--color-neutral-200);

		    /* Logo */
		    --logo-foreground: var(--color-neutral-700);
		    --logo-box-text: var(--color-white);
		    --logo-box-text-hover: var(--color-white);
		    --logo-box-bg: var(--color-brand);

		    /* Hero */
		    --hero-background: var(--color-white);
		    --hero-foreground: var(--color-neutral-700);
		    --hero-overlay-dark: oklch(0% 0 0 / 0.4);
		    --hero-overlay-light: oklch(100% 0 0 / 0.9);

		    /* Card */
		    --card-background: var(--color-white);
		    --card-border: var(--color-neutral-200);

		    /* Box */
		    --box-background: oklch(from var(--color-brand) 97% 0.02 h);

		    /* Focus */
		    --focus-ring: var(--color-brand);

		    /* Status colors */
		    --success-background: oklch(95% 0.05 145);
		    --success-foreground: oklch(35% 0.12 145);
		    --warning-background: oklch(95% 0.05 85);
		    --warning-foreground: oklch(35% 0.12 85);
		    --danger-background: oklch(92% 0.1 25);
		    --danger-foreground: oklch(45% 0.2 25);
		    --info-background: oklch(95% 0.05 260);
		    --info-foreground: oklch(35% 0.12 260);

		    /* Journal colors */
        --journal-menses:       oklch(49% 0.21 15 / 0.3);
        --journal-estradiol:    oklch(57% 0.17 301 / 0.3);
        --journal-rec-worse:    oklch(55% 0.20 25 / 0.5);
        --journal-rec-same:     oklch(75% 0.17 70 / 0.5);
        --journal-rec-better:   oklch(60% 0.20 131 / 0.5);
        --journal-weight-down:  oklch(62% 0.20 251 / 0.3);
        --journal-weight-up:    oklch(60% 0 0 / 0.3);
        --journal-chart-weight: oklch(34% 0 0);
        --journal-chart-median: oklch(34% 0 0 / 0.3);
        --journal-chart-trend:  oklch(50% 0.15 250 / 0.5);
        --journal-chart-gap:    oklch(34% 0 0 / 0.15);
        --journal-chart-target: oklch(55% 0.18 150);

	  }

	  /* Colors - Semantic (Dark Mode)
	   ========================================================================= */

	  /* Dark mode when explicitly set
	   Minimal palette: 300 (text), 400 (muted), 700 (borders), 900 (surfaces), 950 (background)
	   ========================================================================= */
	  [data-theme="dark"] {
		    color-scheme: dark;

		    /* Body */
		    --body-foreground: var(--color-neutral-300);
		    --body-background: var(--color-neutral-950);
		    --body-muted: var(--color-neutral-400);
		    --body-lead: var(--color-neutral-300);

		    /* Surfaces */
		    --surface-raised: var(--color-neutral-900);
		    --surface-default: var(--color-neutral-900);
		    --surface-lowered: var(--color-neutral-950);
		    --surface-border: var(--color-neutral-700);
		    --surface-hover: var(--color-neutral-700);

		    /* Navigation */
		    --nav-background: var(--color-neutral-950);
		    --nav-foreground: var(--color-neutral-300);
		    --nav-foreground-active: var(--color-neutral-100);
		    --nav-border: var(--color-neutral-700);

		    /* Logo */
		    --logo-foreground: var(--color-white);
		    --logo-box-text: var(--color-white);
		    --logo-box-text-hover: var(--color-neutral-950);
		    --logo-box-bg: var(--color-brand);

		    /* Hero */
		    --hero-background: var(--color-neutral-950);
		    --hero-foreground: var(--color-neutral-300);
		    --hero-overlay-dark: oklch(0% 0 0 / 0.6);
		    --hero-overlay-light: oklch(0% 0 0 / 0.7);

		    /* Card */
		    --card-background: var(--color-neutral-900);
		    --card-border: var(--color-neutral-700);

		    /* Box */
		    --box-background: oklch(from var(--color-brand) 25% 0.04 h);

		    /* Focus */
		    --focus-ring: var(--color-brand);

		    /* Status colors (slightly adjusted for dark backgrounds) */
		    --success-background: oklch(25% 0.05 145);
		    --success-foreground: oklch(75% 0.1 145);
		    --warning-background: oklch(25% 0.05 85);
		    --warning-foreground: oklch(75% 0.1 85);
		    --danger-background: oklch(25% 0.1 25);
		    --danger-foreground: oklch(75% 0.18 25);
		    --info-background: oklch(25% 0.05 260);
		    --info-foreground: oklch(75% 0.1 260);

		    /* Journal colors */
	      --journal-menses:       oklch(70% 0.21 15 / 0.5);
			  --journal-estradiol:    oklch(75% 0.17 301 / 0.5);
			  --journal-rec-worse:    oklch(60% 0.20 25 / 0.7);
			  --journal-rec-same:     oklch(75% 0.17 70 / 0.7);
			  --journal-rec-better:   oklch(60% 0.20 131 / 0.7);
			  --journal-weight-down:  oklch(75% 0.20 251 / 0.7);
			  --journal-weight-up:    oklch(70% 0 0 / 0.5);
			  --journal-chart-weight: oklch(78% 0 0);
			  --journal-chart-median: oklch(78% 0 0 / 0.3);
			  --journal-chart-trend:  oklch(65% 0.15 250);
			  --journal-chart-gap:    oklch(78% 0 0 / 0.15);
			  --journal-chart-target: oklch(65% 0.18 150);
	  }

	  /* Auto mode: follows OS preference
	   Identical to [data-theme="dark"] — both blocks must stay in sync.
	   ========================================================================= */
	  @media (prefers-color-scheme: dark) {
		    [data-theme="auto"] {
			      color-scheme: dark;

			      /* Body */
			      --body-foreground: var(--color-neutral-300);
			      --body-background: var(--color-neutral-950);
			      --body-muted: var(--color-neutral-400);
			      --body-lead: var(--color-neutral-300);

			      /* Surfaces */
			      --surface-raised: var(--color-neutral-900);
			      --surface-default: var(--color-neutral-900);
			      --surface-lowered: var(--color-neutral-950);
			      --surface-border: var(--color-neutral-700);
			      --surface-hover: var(--color-neutral-700);

			      /* Navigation */
			      --nav-background: var(--color-neutral-950);
			      --nav-foreground: var(--color-neutral-300);
			      --nav-foreground-active: var(--color-neutral-100);
			      --nav-border: var(--color-neutral-700);

			      /* Logo */
			      --logo-foreground: var(--color-white);
			      --logo-box-text: var(--color-white);
			      --logo-box-text-hover: var(--color-neutral-950);
			      --logo-box-bg: var(--color-brand);

			      /* Hero */
			      --hero-background: var(--color-neutral-950);
			      --hero-foreground: var(--color-neutral-300);
			      --hero-overlay-dark: oklch(0% 0 0 / 0.6);
			      --hero-overlay-light: oklch(0% 0 0 / 0.7);

			      /* Card */
			      --card-background: var(--color-neutral-900);
			      --card-border: var(--color-neutral-700);

			      /* Box */
			      --box-background: oklch(from var(--color-brand) 25% 0.04 h);

			      /* Focus */
			      --focus-ring: var(--color-brand);

			      /* Status colors (slightly adjusted for dark backgrounds) */
			      --success-background: oklch(25% 0.05 145);
			      --success-foreground: oklch(75% 0.1 145);
			      --warning-background: oklch(25% 0.05 85);
			      --warning-foreground: oklch(75% 0.1 85);
			      --danger-background: oklch(25% 0.05 25);
			      --danger-foreground: oklch(75% 0.12 25);
			      --info-background: oklch(25% 0.05 260);
			      --info-foreground: oklch(75% 0.1 260);

			      /* Journal colors */
			      --journal-menses:       oklch(70% 0.21 15 / 0.5);
			      --journal-estradiol:    oklch(75% 0.17 301 / 0.5);
			      --journal-rec-worse:    oklch(60% 0.20 25 / 0.8);
			      --journal-rec-same:     oklch(75% 0.17 70 / 0.8);
			      --journal-rec-better:   oklch(60% 0.20 131 / 0.8);
			      --journal-weight-down:  oklch(75% 0.20 251 / 0.7);
			      --journal-weight-up:    oklch(70% 0 0 / 0.6);
			      --journal-chart-weight: oklch(78% 0 0);
			      --journal-chart-median: oklch(78% 0 0 / 0.3);
			      --journal-chart-trend:  oklch(65% 0.15 250);
			      --journal-chart-gap:    oklch(78% 0 0 / 0.15);
			      --journal-chart-target: oklch(65% 0.18 150);
		    }
	  }
}

/* =============================================================================
   BASE LAYER - Element defaults with :where() for easy overrides
   ============================================================================= */

@layer base {
	  /* Body defaults */
	  :where(body) {
		    min-height: 100dvh;
		    display: flex;
		    flex-direction: column;
		    font-family: var(--font-body);
		    font-size: var(--step-0);
		    font-weight: var(--weight-normal);
		    line-height: var(--leading-body);
		    color: var(--body-foreground);
		    background-color: var(--body-background);
	  }

	  /* Headings */
	  :where(h1, h2, h3, h4, h5, h6) {
		    font-weight: var(--weight-semibold);
		    /* stylelint-disable-next-line plugin/use-baseline */
		    text-wrap: balance;
	  }

	  :where(h1) {
		    font-size: var(--step-4);
		    line-height: var(--leading-title);
	  }
	  :where(h2) {
		    font-size: var(--step-3);
		    line-height: var(--leading-heading);
	  }
	  :where(h3) {
		    font-size: var(--step-1);
		    line-height: var(--leading-heading);
	  }
	  :where(h4) {
		    font-size: var(--step-0);
		    line-height: var(--leading-body);
	  }
	  :where(h5) {
		    font-size: var(--step-1);
		    font-weight: var(--weight-bold);
		    line-height: var(--leading-sm-compact);
	  }
	  :where(h6) {
		    font-size: var(--step--2);
		    line-height: var(--leading-xs-compact);
	  }

	  /* Text elements */
	  :where(p) {
		    text-wrap: pretty;
	  }

	  :where(small) {
		    font-size: var(--step--1);
	  }

	  :where(strong) {
		    font-weight: var(--weight-semibold);
	  }

	  :where(strong em, em strong) {
		    font-weight: var(--weight-semibold);
	  }

	  /* Links */
	  :where(a) {
		    color: inherit;
		    text-decoration: underline;
		    transition: color var(--transition-fast);
	  }

	  :where(a:hover) {
		    color: var(--color-brand);
	  }

	  /* Media defaults */
	  :where(img, picture, video, canvas) {
		    display: block;
		    max-width: 100%;
		    height: auto;
	  }

	  :where(svg:not(.icon)) {
		    display: block;
		    max-width: 100%;
	  }

	  /* Nav list reset */
	  :where(nav ul, nav ol) {
		    list-style: none;
		    margin: 0;
		    padding: 0;
	  }

	  /* Lists */
	  :where(ul, ol) {
		    padding-inline-start: var(--space-s);
	  }

	  :where(li + li) {
		    margin-block-start: var(--space-2xs);
	  }

	  /* Focus styles */
	  :where(:focus-visible) {
		    outline: 2px solid var(--focus-ring);
		    outline-offset: 2px;
	  }

	  /* Anchor scroll offset */
	  :where(:target) {
		    scroll-margin-block: 5ex;
	  }

	  /* Summary cursor */
	  :where(summary) {
		    cursor: pointer;
	  }

	  /* Shorter line heights on interactive elements */
	  :where(button, input, label) {
		    line-height: var(--leading-interactive);
	  }

	  /* Make sure textareas without a rows attribute are not tiny */
	  :where(textarea:not([rows])) {
		    min-block-size: 10em;
	  }

	  /* Figure */
	  :where(figure) {
		    margin-block: var(--space-m);
		    margin-inline: 0;
	  }

	  :where(figcaption) {
		    margin-block-start: var(--space-2xs);
		    font-size: var(--step--1);
		    line-height: var(--leading-sm-compact);
		    color: var(--body-muted);
	  }

	  /* Blockquote */
	  :where(blockquote) {
		    margin-block: var(--space-m) 0;
		    margin-inline: 0;
		    padding: 0;
		    font-family: var(--font-body);
		    font-size: var(--step--1);
		    color: var(--body-foreground);
		    line-height: var(--leading-sm);
	  }

	  :where(blockquote:not(.review)) {
		    border-left: 3px solid var(--surface-border);
		    padding-left: var(--space-s);
	  }

	  :where(blockquote cite) {
		    display: block;
		    font-style: inherit;
		    margin-block-start: var(--space-3xs);
	  }

	  :where(blockquote cite::before) {
		    content: "— ";
	  }

	  /* HR */
	  :where(hr) {
		    width: 100%;
		    height: 0;
		    border: none;
		    border-top: solid 1px var(--surface-border);
	  }

	  /* Tables */
	  :where(table) {
		    width: 100%;
		    border-collapse: collapse;
	  }

	  :where(th, td) {
		    padding: var(--space-2xs) var(--space-xs);
		    text-align: start;
		    vertical-align: top;
	  }

	  :where(th) {
		    font-size: var(--step--1);
		    font-weight: var(--weight-semibold);
	  }

	  :where(tbody tr) {
		    border-top: solid 1px var(--surface-border);
	  }
}

/* =============================================================================
   LAYOUT LAYER - Structural patterns
   ============================================================================= */

@layer layout {
	  .container {
		    width: 100%;
		    max-width: var(--grid-max-width);
		    padding-inline: var(--grid-gutter);
		    margin-inline: auto;
	  }

	  /* Stack - vertical rhythm (every-layout.dev/layouts/stack/) */
	  .stack {
		    display: flex;
		    flex-direction: column;
		    justify-content: flex-start;
	  }

	  .stack:only-child {
		    block-size: 100%;
	  }

	  .stack > * + * {
		    margin-block-start: var(--stack-space, var(--space-s));
	  }

	  .stack > * + :is(h2, h3, h4, h5, h6) {
		    margin-block-start: var(--space-l);
		    margin-block-end: var(--space-3xs);
	  }

	  /* Must be in layout layer to override .stack > * + * */
	  .stack > hr {
		    margin-block-start: var(--space-m);
	  }

	  /* Grid - responsive auto-fit */
	  .grid {
		    display: grid;
		    gap: var(--grid-gutter);
		    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-column, 20ch)), 1fr));
	  }

	  /* Grid - explicit 2-column */
	  .grid-2 {
		    display: grid;
		    gap: var(--grid-gutter);
		    grid-template-columns: 1fr;
	  }

	  @media (width >= 40rem) {
		    .grid-2 {
			      grid-template-columns: repeat(2, 1fr);
		    }
	  }

	  /* Grid - explicit 3-column */
	  .grid-3 {
		    display: grid;
		    gap: var(--grid-gutter);
		    grid-template-columns: 1fr;
	  }

	  @media (width >= 40rem) {
		    .grid-3 {
			      grid-template-columns: repeat(2, 1fr);
		    }
	  }

	  @media (width >= 60rem) {
		    .grid-3 {
			      grid-template-columns: repeat(3, 1fr);
		    }
	  }

	  /* Grid - asymmetric 1:2 */
	  .grid-1-2 {
		    display: grid;
		    gap: var(--grid-gutter);
		    grid-template-columns: 1fr;
	  }

	  /* On mobile, show the main content (2fr column) first */
	  .grid-1-2 > :last-child {
		    order: -1;
	  }

	  @media (width >= 60rem) {
		    .grid-1-2 {
			      grid-template-columns: 1fr 2fr;
		    }

		    .grid-1-2 > :last-child {
			      order: 0;
		    }
	  }

	  /* Sync stack spacing with grid gutter when customized */
	  .grid-1-2 > .stack {
		    --stack-space: var(--grid-gutter);
	  }

	  /* Compact grid variant - tighter spacing */
	  .grid-compact {
		    --grid-gutter: var(--space-s);
	  }

	  /* Reset figure margins in grids - let gap handle spacing */
	  .grid figure,
	.grid-2 figure,
	.grid-3 figure {
		  margin-block: 0;
	}

	  /* Cluster - horizontal flex with wrap (every-layout.dev/layouts/cluster/) */
	  .cluster {
		    display: flex;
		    flex-wrap: wrap;
		    align-items: center;
		    gap: var(--cluster-space, var(--space-s));
	  }

	  .cluster-tight {
		    --cluster-space: var(--space-3xs);
	  }

	  .cluster-between {
		    justify-content: space-between;
	  }

	  /* Icon - inline icons that scale with text */
	  .icon {
		    display: inline-block;
		    width: 1em;
		    height: 1em;
		    vertical-align: -0.125em;
	  }

	  /* Split - sidebar + main (every-layout.dev/layouts/sidebar/) */
	  .split {
		    display: flex;
		    flex-wrap: wrap;
		    gap: var(--grid-gutter);
	  }

	  .split > :first-child {
		    flex-basis: var(--split-sidebar, 20rem);
		    flex-grow: 1;
	  }

	  .split > :last-child {
		    flex-basis: 0;
		    flex-grow: 999;
		    min-inline-size: 50%;
	  }
}

/* =============================================================================
   COMPONENTS LAYER - Reusable UI patterns
   ============================================================================= */

@layer components {
	  /* Site Banner */
	  .site-banner {
		    background: oklch(from var(--color-brand) l c h / 0.15);
		    color: var(--color-brand);
		    text-align: center;
		    padding-block: var(--space-3xs);
	  }

	  .site-banner p {
		    margin: 0;
		    font-family: var(--font-mono);
		    font-size: var(--step--2);
		    text-transform: uppercase;
		    letter-spacing: 0.05em;
	  }

	  /* Logo */
	  .logo {
		    font-weight: var(--weight-medium);
		    color: var(--logo-foreground);
	  }

	  .logo-box {
		    color: var(--logo-box-text);
		    background: var(--logo-box-bg);
		    padding-inline: 0.2em;
		    transition:
			      color var(--transition-fast),
			      background var(--transition-fast);
	  }

	  a:hover .logo-box {
		    color: var(--logo-box-text-hover);
		    background: var(--body-foreground);
	  }

	  /* Navigation */
	  .nav-site {
		    height: var(--space-xl);
		    background: var(--nav-background);
		    color: var(--nav-foreground);
		    border-bottom: solid 1px var(--nav-border);
	  }

	  .nav-site .container {
		    display: flex;
		    align-items: center;
		    height: 100%;
	  }

	  .nav-site a,
	.nav-site-toggle,
	.nav-site-close {
		  color: var(--body-muted);
		  transition: color var(--transition-fast);
		  text-decoration: none;
	}

	  .nav-site a:hover,
	.nav-site a[aria-current="page"],
	.nav-site-toggle:hover,
	.nav-site-close:hover {
		  color: var(--nav-foreground-active);
	}

	  .nav-site a:has(.logo) {
		    color: var(--nav-foreground);
	  }

	  .nav-site-toggle,
	.nav-site-close {
		  background: transparent;
		  border: none;
		  cursor: pointer;
	}

	  .nav-site-toggle {
		    margin-inline-start: auto;
	  }

	  .nav-site-links {
		    display: none;
		    margin-inline-start: auto;
	  }

	  .nav-site-dialog {
		    position: fixed;
		    inset: 0;
		    width: 100%;
		    height: 100%;
		    max-width: none;
		    max-height: none;
		    margin: 0;
		    padding-inline: var(--grid-gutter);
		    background: var(--nav-background);
		    color: var(--nav-foreground);
		    border-radius: 0;
		    box-shadow: none;
		    transform: none;
	  }

	  .nav-site-dialog-header {
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    height: var(--space-xl);
	  }

	  .nav-site-dialog .nav-site-links {
		    display: flex;
		    flex-direction: column;
		    align-items: flex-end;
		    gap: var(--space-s);
		    font-size: var(--step-1);
	  }

	  @media (width >= 72rem) {
		    .nav-site-links {
			      display: flex;
			      align-items: center;
			      gap: var(--space-s);
		    }

		    .nav-site-toggle {
			      display: none;
		    }
	  }

	  .nav-site-links li + li {
		    margin-block-start: 0;
	  }

	  /* Header Hero */
	  .header-hero {
		    padding-block: var(--space-l) var(--space-m);
		    background: var(--hero-background);
		    border-bottom: solid 1px var(--nav-border);
	  }

	  /* Header Hero with background image */
	  .header-hero--image {
		    position: relative;
		    padding-block: var(--space-3xl);
		    background:
			      linear-gradient(var(--hero-overlay-dark), var(--hero-overlay-dark)),
			      var(--hero-image) center / cover no-repeat;
		    border-bottom: none;
	  }

	  .header-hero--image .header-hero-title,
	.header-hero--image .header-hero-subtitle {
		  color: var(--color-white);
	}

	  .header-hero-caption {
		    position: absolute;
		    right: max(var(--grid-gutter), calc((100% - var(--grid-max-width)) / 2 + var(--grid-gutter)));
		    bottom: var(--space-xs);
		    font-size: var(--step--2);
		    color: var(--color-white);
		    opacity: 0.7;
	  }

	  .header-hero .stack {
		    --stack-space: var(--space-xs);
	  }

	  .header-hero-byline {
		    --stack-space: var(--space-s);
	  }

	  .header-hero-title {
		    color: var(--hero-foreground);
		    font-size: var(--step-5);
		    font-weight: var(--weight-bold);
		    line-height: var(--leading-title);
	  }

	  .header-hero-subtitle {
		    color: var(--hero-foreground);
		    font-size: var(--step-2);
		    font-weight: var(--weight-normal);
		    line-height: var(--leading-title);
	  }

	  /* Breadcrumb */
	  .breadcrumb {
		    font-size: var(--step--1);
		    line-height: var(--leading-sm-compact);
		    color: var(--body-muted);
	  }

	  .breadcrumb ol {
		    display: flex;
		    flex-wrap: wrap;
		    align-items: center;
		    gap: var(--space-2xs);
		    padding: 0;
	  }

	  .breadcrumb li {
		    display: flex;
		    align-items: center;
		    margin: 0;
	  }

	  .breadcrumb li:not(:last-child)::after {
		    content: "/";
		    margin-inline-start: var(--space-2xs);
		    line-height: 1;
	  }

	  .breadcrumb a,
	.breadcrumb span {
		  color: inherit;
		  text-decoration: none;
		  line-height: 1;
	}

	  .breadcrumb a:hover {
		    color: var(--nav-foreground-active);
	  }

	  .breadcrumb [aria-current="page"] {
		    color: var(--body-foreground);
	  }

	  /* Byline */
	  .byline {
		    display: flex;
		    flex-wrap: wrap;
		    align-items: center;
		    gap: var(--space-s);
		    font-size: var(--step--1);
		    line-height: var(--leading-sm-compact);
		    color: var(--body-muted);
	  }

	  .byline > * {
		    display: flex;
		    align-items: center;
		    gap: var(--space-3xs);
	  }

	  /* Main */
	  main {
		    flex: 1;
		    min-height: 50vh;
		    padding-block-start: var(--space-s);
		    background-color: var(--body-background);
	  }

	  /* Footer */
	  footer {
		    margin-block-start: var(--space-3xl);
		    padding-block: var(--space-m) var(--space-l);
		    font-size: var(--step--1);
		    border-top: solid 1px var(--nav-border);
	  }

	  footer .container {
		    align-items: center;
	  }

	  footer .footer-avatar {
		    width: 6rem;
		    height: 6rem;
		    border-radius: 50%;
		    flex-shrink: 0;
	  }

	  @media (width >= 60rem) {
		    footer .container {
			      flex-direction: row;
			      align-items: center;
		    }

		    footer .footer-avatar {
			      margin-inline-end: var(--space-m);
		    }
	  }

	  /* Theme Toggle */
	  .theme-toggle {
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    gap: var(--space-3xs);
		    padding: var(--space-3xs) var(--space-2xs);
		    font-size: var(--step--1);
		    color: var(--body-muted);
		    background: transparent;
		    border: solid 1px var(--surface-border);
		    border-radius: var(--radius-s);
		    cursor: pointer;
		    transition:
			      color var(--transition-fast),
			      border-color var(--transition-fast);
	  }

	  .theme-toggle:hover {
		    color: var(--body-foreground);
		    border-color: var(--body-muted);
	  }

	  .theme-toggle:focus-visible {
		    outline: 2px solid var(--focus-ring);
		    outline-offset: 2px;
	  }

	  .theme-toggle svg {
		    width: var(--icon-size-lg);
		    height: var(--icon-size-lg);
	  }

	  /* Show/hide icons based on theme */
	  .theme-toggle .icon-sun {
		    display: none;
	  }

	  .theme-toggle .icon-moon {
		    display: block;
	  }

	  .theme-toggle .icon-auto {
		    display: none;
	  }

	  /* Dark mode: show sun (to switch to light) */
	  [data-theme="dark"] .theme-toggle .icon-sun {
		    display: block;
	  }

	  [data-theme="dark"] .theme-toggle .icon-moon {
		    display: none;
	  }

	  /* Auto mode: show auto icon */
	  [data-theme="auto"] .theme-toggle .icon-sun {
		    display: none;
	  }

	  [data-theme="auto"] .theme-toggle .icon-moon {
		    display: none;
	  }

	  [data-theme="auto"] .theme-toggle .icon-auto {
		    display: block;
	  }

	  /* Footnotes */
	  .footnotes,
	.footnotes p,
	.footnotes li {
		  font-size: var(--step--1);
	}

	  /* Table of Contents */
	  .table-of-contents summary {
		    font-size: var(--step-1);
	  }

	  .table-of-contents {
		    font-size: var(--step--1);
		    border-inline-start: 2px solid var(--surface-border);
		    padding-inline-start: var(--space-s);
		    padding-block: var(--space-2xs);
	  }

	  .table-of-contents ul {
		    padding-inline-start: var(--space-s);
		    margin-block-start: var(--space-2xs);
		    list-style: none;
	  }

	  .table-of-contents > ul {
		    padding-inline-start: 0;
	  }

	  .table-of-contents a {
		    color: var(--body-muted);
		    text-decoration: none;
	  }

	  .table-of-contents a:hover {
		    color: var(--body-foreground);
	  }

	  /* TOC Scrollspy — active link highlight */
	  .table-of-contents a.is-active {
		    color: var(--body-foreground);
		    font-weight: var(--weight-medium);
	  }

	  /* Blockquote review variant */
	  blockquote.review {
		    display: grid;
		    grid-template-columns: auto 1fr;
		    gap: var(--space-2xs);
		    margin-block: var(--space-m) 0;
	  }

	  blockquote.review::before {
		    content: "";
		    width: 1.5em;
		    height: 1.5em;
		    background: var(--surface-border);
		    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z'/%3E%3Cpath d='M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z'/%3E%3C/svg%3E");
		    mask-size: contain;
		    mask-repeat: no-repeat;
	  }

	  blockquote.review p,
	blockquote.review cite {
		  grid-column: 2;
	}

	  blockquote.review cite::before {
		    content: "— ";
	  }

	  /* Box */
	  .box {
		    padding: var(--space-s);
		    background: var(--box-background);
		    border: solid 1px var(--card-border);
	  }

	  /* Card */
	  .card,
	.card-details {
		  --stack-space: var(--space-2xs);
		  padding: var(--space-s);
		  font-size: var(--step--1);
		  line-height: var(--leading-sm);
		  border: solid 1px var(--card-border);
	}

	  .card-header,
	.card-details summary {
		  display: flex;
		  align-items: center;
		  gap: var(--space-2xs);
	}

	  .card-header h3,
	.card-details summary h3 {
		  margin: 0;
		  flex: 1;
		  min-width: 0;
		  font-size: var(--step-0);
		  font-weight: var(--weight-semibold);
	}

	  .card-header .icon,
	.card-details summary .icon {
		  flex-shrink: 0;
		  width: var(--icon-size-lg);
		  height: var(--icon-size-lg);
		  color: inherit;
	}

	  /* Boxed icon variant - add .card-icon-boxed to .card or .card-details */
	  .card-icon-boxed .card-header .icon,
	.card-icon-boxed summary .icon {
		  width: 2em;
		  height: 2em;
		  padding: 0.3em;
		  background: var(--color-brand);
		  color: var(--color-white);
	}

	  .card-details summary {
		    list-style: none;
		    cursor: pointer;
	  }
	  .card-details summary::after {
		    content: "";
		    margin-inline-start: auto;
		    width: 1em;
		    height: 1em;
		    background: currentColor;
		    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
		    mask-size: contain;
		    transition: transform var(--transition-fast);
	  }
	  .card-details[open] summary::after {
		    transform: rotate(180deg);
	  }

	  .card-details[open] summary {
		    padding-block-end: var(--space-s);
		    border-bottom: solid 1px var(--card-border);
	  }

	  .card-details-item {
		    padding-block-start: var(--space-s);
	  }

	  .card-divided > * + * {
		    padding-block-start: var(--space-s);
		    margin-block-start: var(--space-s);
		    border-top: solid 1px var(--card-border);
	  }

	  /* Card link - stretched link makes the whole card clickable */
	  .card-link {
		    position: relative;
		    cursor: pointer;
	  }

	  .card-link a::after {
		    content: '';
		    position: absolute;
		    inset: 0;
		    z-index: 1;
	  }

	  .card-link:has(a:hover) {
		    border-color: var(--color-brand);
	  }

	  .card-link:has(a:focus-visible) {
		    outline: 2px solid var(--color-brand);
		    outline-offset: 2px;
	  }

	  .card-link a:focus-visible {
		    outline: none;
	  }


	  /* Button */
	  .btn {
		    display: inline-block;
		    width: fit-content;
		    padding: var(--space-2xs) var(--space-xs);
		    font-size: var(--step--1);
		    font-weight: var(--weight-medium);
		    line-height: var(--leading-interactive);
		    color: var(--body-foreground);
		    background: transparent;
		    border: solid 1px var(--surface-border);
		    text-decoration: none;
		    cursor: pointer;
		    transition:
			      background var(--transition-fast),
			      border-color var(--transition-fast),
			      color var(--transition-fast);
	  }

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

	  .btn-brand {
		    color: var(--color-white);
		    background: var(--color-brand);
		    border-color: var(--color-brand);
	  }

	  .btn-brand:hover {
		    color: var(--body-background);
		    background: var(--body-foreground);
		    border-color: var(--body-foreground);
	  }

	  .btn-secondary {
		    color: var(--body-muted);
		    background: transparent;
		    border-color: var(--surface-border);
		    font-size: var(--step--1);
	  }

	  .btn-secondary:hover {
		    color: var(--body-foreground);
		    background: var(--surface-hover);
	  }

	  .btn:disabled {
		    opacity: 0.6;
		    cursor: not-allowed;
	  }

	  .btn.loading {
		    position: relative;
		    color: transparent;
	  }

	  .btn.loading::after {
		    content: "";
		    position: absolute;
		    width: 1rem;
		    height: 1rem;
		    border: 2px solid transparent;
		    border-top-color: var(--color-white);
		    border-radius: var(--radius-pill);
		    animation: spin 0.6s linear infinite;
	  }

	  @keyframes spin {
		    to {
			      transform: rotate(360deg);
		    }
	  }

	  .btn-sm {
		    padding: var(--space-3xs) var(--space-2xs);
		    font-size: var(--step--2);
	  }

	  /* Callout */
	  .callout {
		    --callout-hue: 260;
		    --callout-fill: oklch(95% 0.03 var(--callout-hue));
		    --callout-accent: oklch(55% 0.15 var(--callout-hue));
		    display: flex;
		    align-items: center;
		    gap: var(--space-s);
		    padding: var(--space-s);
		    font-size: var(--step--1);
		    background: var(--callout-fill);
	  }

	  .callout .icon {
		    width: var(--icon-size-lg);
		    height: var(--icon-size-lg);
		    color: var(--callout-accent);
	  }

	  .callout p {
		    margin: 0;
		    color: var(--callout-accent);
	  }

	  .callout-tip {
		    --callout-hue: 145;
	  }
	  .callout-warning {
		    --callout-hue: 85;
	  }
	  .callout-danger {
		    --callout-hue: 25;
	  }
	  .callout-info {
		    --callout-hue: 260;
	  }

	  .callout-action {
		    --callout-fill: oklch(from var(--color-brand) 95% 0.03 h);
		    --callout-accent: var(--color-brand);
	  }

	  /* Journal entries */
	  #entries-body {
		    display: grid;
		    grid-template-columns: auto auto auto 1fr auto auto auto auto auto;
		    column-gap: var(--space-xs);
		    font-size: var(--step--1);
	  }

	  .entry-row {
		    display: grid;
		    grid-template-columns: subgrid;
		    grid-column: 1 / -1;
		    align-items: center;
		    padding: var(--space-2xs) var(--space-xs);
		    border-bottom: var(--border-width) solid var(--surface-border);
		    transition: background var(--transition-fast);
	  }

	  @media (hover: hover) {
		    .entry-row:not(.entry-row--header):hover {
			      background: var(--surface-lowered);
		    }
	  }

	  .entry-row--header {
		    font-weight: var(--weight-semibold);
		    font-size: var(--step--2);
		    color: var(--body-muted);
		    text-transform: uppercase;
		    letter-spacing: 0.05em;
		    margin-bottom: var(--space-3xs);
	  }

	  #empty-row {
		    grid-column: 1 / -1;
		    padding: var(--space-xs);
	  }

    .entry-row--empty {
		    color: var(--body-muted);
	  }

	  .entry-row__date {
		    font-weight: var(--weight-medium);
		    white-space: nowrap;
	  }

	  .entry-row__tags {
		    display: flex;
		    flex-wrap: wrap;
		    gap: var(--space-3xs);
		    font-size: var(--step--2);
	  }

	  .tag-chip {
		    border: var(--border-width) solid var(--surface-border);
		    box-sizing: content-box;
		    font-size: var(--step--3);
		    font-weight: var(--weight-medium);
	  }

	  .entry-row__weight,
	  .entry-row__event,
	  .entry-row__notes {
		    color: var(--body-muted);
	  }

	  .entry-row__event,
	  .entry-row__notes {
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
	  }

	  .entry-row__indicator {
		    width: 1rem;
		    text-align: center;
	  }

	  .entry-row__weight,
	  .entry-row__dc,
	  .entry-row__wm {
		    font-variant-numeric: tabular-nums;
	  }
	  .entry-row__weight {
		    white-space: nowrap;
	  }

	  .ql-weight-input {
		    width: 5rem;
		    font-size: var(--step--1);
	  }

	  .ql-notes-input {
		    width: 100%;
		    font-size: var(--step--1);
	  }

	  .entry-row__dc {
		    white-space: nowrap;
		    font-size: var(--step--2);
	  }
	  .entry-row__wm {
		    white-space: nowrap;
		    font-size: var(--step--2);
		    color: var(--body-muted);
	  }
	  .entry-row__action {
		    text-align: right;
	  }

	  #weight-chart-container {
		    margin-block: var(--space-s);
	  }

	  #weight-chart {
		    position: relative;
	  }

	  #weight-chart svg {
		    display: block;
		    border: var(--border-width) solid var(--surface-border);
		    background: var(--surface-raised);
	  }

	  #chart-tooltip {
		    position: absolute;
		    background: var(--surface-raised);
		    border: var(--border-width) solid var(--surface-border);
		    border-radius: var(--radius-s, 4px);
		    padding: 0.35rem 0.55rem;
		    font-size: var(--step--2);
		    pointer-events: none;
		    white-space: nowrap;
		    z-index: 10;
		    line-height: 1.5;
	  }

	  .chart-range-toggles {
		    display: flex;
		    gap: var(--space-3xs);
		    margin-block-end: var(--space-2xs);
	  }
	  .chart-range-btn {
		    font-size: var(--step--2);
		    padding: var(--space-3xs) var(--space-xs);
	  }
	  .chart-range-btn.active {
		    background: var(--color-brand);
		    color: var(--color-white);
		    border-color: var(--color-brand);
	  }

	  #load-more-container {
		    text-align: center;
		    margin-block-start: var(--space-m);
	  }

	  /* Table Utilities */
	  table.zebra-rows tbody tr:nth-child(odd) {
		    background-color: var(--surface-default);
	  }

	  @media (hover: hover) {
		    table.hover-rows tbody tr:hover {
			      background-color: var(--surface-lowered);
		    }
	  }

	  /* Badge */
	  .badge {
		    flex-shrink: 0;
		    padding: var(--space-3xs) var(--space-2xs);
		    font-size: var(--step--2);
		    font-weight: var(--weight-medium);
		    line-height: 1;
	  }

	  .badge-yellow {
		    background: var(--warning-background);
		    color: var(--warning-foreground);
	  }
	  .badge-blue {
		    background: var(--info-background);
		    color: var(--info-foreground);
	  }
	  .badge-green {
		    background: var(--success-background);
		    color: var(--success-foreground);
	  }

	  .badge-toggle {
		    cursor: pointer;
		    user-select: none;
		    border: var(--border-width) solid var(--surface-border);
		    transition:
			      background var(--transition-fast),
			      border-color var(--transition-fast),
			      color var(--transition-fast);
	  }
	  .badge-toggle input[type="checkbox"] {
		    position: absolute;
		    opacity: 0;
		    width: 0;
		    height: 0;
	  }
	  .badge-toggle:has(input:checked) {
		    background: var(--color-brand);
		    border-color: var(--color-brand);
		    color: var(--color-white);
	  }

	  /* Shared indicator base */
	  .indicator {
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    width: var(--indicator-size);
		    height: var(--indicator-size);
		    line-height: 1;
		    vertical-align: middle;
	  }

	  /* Weight Indicator */
	  .wi-1 { background: var(--journal-weight-down); }
	  .wi-2 { background: var(--body-background); }
	  .wi-3 { background: var(--journal-weight-up); }
	  .dc-down,
	  .dc-up,
	  .dc-zero {
		    width: auto;
		    padding-inline: var(--space-3xs);
	  }
	  .dc-down { background: var(--journal-weight-down); }
	  .dc-up   { background: var(--journal-weight-up); }
	  .dc-zero { background: var(--body-background); }

	  /* Recovery Indicator */
	  .entry-row__rec {
		    width: var(--indicator-size);
		    text-align: center;
	  }
	  .rec-worse  { background: var(--journal-rec-worse); }
	  .rec-same   { background: var(--journal-rec-same); }
	  .rec-better { background: var(--journal-rec-better); }

	  /* Estradiol Indicator */
	  .entry-row__est {
		    width: var(--indicator-size);
		    text-align: center;
	  }
	  .est-indicator {
		    background: var(--journal-estradiol);
	  }

	  /* Menses Indicator */
	  .entry-row__menses {
		    width: var(--indicator-size);
		    text-align: center;
	  }
	  .menses-indicator {
		    background: var(--journal-menses);
	  }
	  .badge-menses:has(input:checked) {
		    background: var(--journal-menses);
		    border-color: var(--journal-menses);
		    color: var(--color-white);
	  }

	  #entry-tags-list {
		    max-height: 6rem;
		    overflow-y: auto;
	  }

	  /* Form */
	  .form-profile {
		    display: flex;
		    flex-direction: column;
		    gap: var(--space-m);
		    font-size: var(--step--1);
	  }

	  fieldset {
		    margin: 0;
		    padding: var(--space-s);
		    border: var(--border-width) solid var(--surface-border);
		    background: var(--surface-raised);
	  }

	  legend {
		    padding: 0 var(--space-2xs);
		    font-size: var(--step-0);
		    font-weight: var(--weight-semibold);
	  }

	  fieldset > div + div {
		    margin-block-start: var(--space-s);
	  }

	  .form-stack {
		    display: flex;
		    flex-direction: column;
		    gap: var(--space-s);
	  }

	  .form-field {
		    display: flex;
		    flex-direction: column;
		    gap: var(--space-3xs);
	  }

	  .form-field label {
		    font-size: var(--step--1);
		    font-weight: var(--weight-medium);
		    color: var(--body-foreground);
	  }

	  .form-grid {
		    display: grid;
		    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		    gap: var(--space-s);
	  }

	  .form-grid-3 {
		    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	  }

	  /* Form controls */
	  input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="date"],
	input[type="number"],
	input:not([type]),
	select,
	textarea {
		  width: 100%;
		  padding: var(--space-2xs) var(--space-xs);
		  font-family: inherit;
		  font-size: var(--step--1);
		  color: var(--body-foreground);
		  background: var(--surface-raised);
		  border: var(--border-width) solid var(--surface-border);
		  border-radius: 0;
		  outline: none;
		  transition:
			    border-color var(--transition-fast),
			    box-shadow var(--transition-fast);
	}

	  :where(
			  input[type="text"],
			  input[type="email"],
			  input[type="tel"],
			  input[type="date"],
			  input[type="number"],
			  input:not([type]),
			  select,
			  textarea
		):where(:focus, :focus-visible) {
		    outline: none;
		    border-color: var(--color-brand);
		    box-shadow: 0 0 0 3px var(--color-brand-alpha);
	  }

	  input::placeholder,
	textarea::placeholder {
		  color: var(--body-muted);
	}

	  select {
		    cursor: pointer;
		    appearance: none;
		    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
		    background-repeat: no-repeat;
		    background-position: right var(--space-xs) center;
		    padding-right: var(--space-l);
	  }

	  textarea {
		    resize: vertical;
		    min-height: 5rem;
	  }

	  .required {
		    color: var(--danger-foreground);
	  }

	  .form-error {
		    color: var(--danger-foreground);
		    margin: 0;
	  }

	  [aria-invalid="true"] {
		    border-color: var(--danger-foreground);
	  }

	  /* Compact amount input for PWYW */
	  input[type="number"].input-amount {
		    width: 5rem;
	  }

	  /* PWYW Slider */
	  input[type="range"].input-slider,
	.slider-labels {
		  width: 50%;
	}

	  input[type="range"].input-slider {
		    height: 0.5rem;
		    border-radius: var(--radius-s);
		    background: var(--surface-border);
		    cursor: pointer;
		    accent-color: var(--color-brand);
	  }

	  input[type="range"].input-slider:focus {
		    outline: 2px solid var(--focus-ring);
		    outline-offset: 2px;
	  }

	  /* Form actions and button overrides */
	  .form-actions {
		    display: flex;
		    flex-wrap: wrap;
		    align-items: center;
		    gap: var(--space-xs);
		    margin-block-start: var(--space-s);
	  }

	  .form-profile .form-actions .btn {
		    margin-block-start: 0;
	  }

	  .form-profile .btn {
		    margin-block-start: var(--space-s);
	  }

	  #save-status {
		    margin-block-start: var(--space-2xs);
		    color: var(--body-muted);
		    font-style: italic;
	  }

	  /* Dialog */
	  dialog {
		    margin: auto;
		    max-width: min(90vw, 28rem);
		    width: 100%;
		    border: none;
		    box-shadow: 0 1rem 3rem oklch(0 0 0 / 0.2);
		    opacity: 0;
		    transform: translateY(0.5rem);
		    transition:
			      opacity var(--transition-fast),
			      transform var(--transition-fast),
			      overlay var(--transition-fast) allow-discrete,
			      display var(--transition-fast) allow-discrete;
	  }

	  dialog[open] {
		    opacity: 1;
		    transform: translateY(0);
	  }

	  @starting-style {
		    dialog[open] {
			      opacity: 0;
			      transform: translateY(0.5rem);
		    }
	  }

	  dialog::backdrop {
		    background: oklch(0 0 0 / 0);
		    transition:
			      background var(--transition-fast),
			      overlay var(--transition-fast) allow-discrete,
			      display var(--transition-fast) allow-discrete;
	  }

	  dialog[open]::backdrop {
		    background: oklch(0 0 0 / 0.5);
	  }

	  @starting-style {
		    dialog[open]::backdrop {
			      background: oklch(0 0 0 / 0);
		    }
	  }

	  .dialog-content {
		    padding: var(--space-m);
	  }

	  .dialog-content h3 {
		    margin: 0 0 var(--space-2xs) 0;
		    font-size: var(--step-1);
	  }


	  .dialog-content p {
		    margin: 0 0 var(--space-m) 0;
		    color: var(--body-muted);
	  }

	  .dialog-content .btn {
		    margin-block-start: 0;
	  }

	  .stack-sm {
		    --stack-space: var(--space-2xs);
	  }

	  /* Flush heading + text — removes gap between :is(h1–h6) and the next sibling */
	  .hgroup > * + * {
		    margin-block-start: 0;
	  }

	  /* CBT Model */
	  .cbt-model {
		    border: var(--border-width) solid var(--surface-border);
		    padding: var(--space-s);
		    margin-block: var(--space-m);
	  }
	  .cbt-model-title {
		    text-align: center;
		    font-weight: var(--weight-semibold);
		    font-size: var(--step-1);
		    letter-spacing: 0.1em;
		    margin-block-end: var(--space-s);
		    color: var(--body-muted);
	  }
	  .cbt-grid-desktop {
		    display: none;
	  }
	  .cbt-grid-mobile {
		    display: grid;
		    grid-template-columns: repeat(2, 1fr);
		    gap: var(--grid-gutter);
		    text-align: center;
	  }
	  @media (width >= 40rem) {
		    .cbt-grid-desktop {
			      display: grid;
			      grid-template-columns: repeat(3, 1fr);
			      gap: var(--grid-gutter);
			      text-align: center;
		    }
		    .cbt-grid-mobile {
			      display: none;
		    }
	  }
	  .cbt-card {
		    border: var(--border-width) solid var(--surface-border);
		    padding: var(--space-s);
		    display: flex;
		    flex-direction: column;
		    min-height: var(--space-3xl);
	  }
	  .cbt-card-title {
		    font-weight: var(--weight-semibold);
		    color: var(--body-foreground);
		    text-align: center;
	  }
	  .cbt-card-subtitle {
		    color: var(--body-muted);
		    text-align: center;
		    font-size: var(--step--1);
	  }
	  .cbt-card-body {
		    font-size: var(--step--1);
		    color: var(--body-muted);
		    margin-block-start: var(--space-2xs);
		    text-align: center;
		    flex: 1;
		    display: flex;
		    align-items: center;
		    justify-content: center;
	  }
	  .cbt-arrow-cell {
		    display: grid;
		    place-items: center;
	  }
	  .cbt-arrow-cell svg {
		    width: var(--space-3xl);
		    height: var(--space-3xl);
		    color: var(--body-muted);
	  }
	  .cbt-arrow-cell--center svg {
		    width: 9rem;
		    height: 9rem;
	  }
	  .cbt-footer {
		    font-size: var(--step--1);
		    color: var(--body-muted);
		    text-align: left;
		    padding-block-start: var(--space-m);
		    max-width: 36rem;
		    margin-inline: auto;
	  }
	  /* Mobile card adjustments */
	  .cbt-grid-mobile .cbt-card-title {
		    font-size: var(--step--1);
	  }
	  .cbt-grid-mobile .cbt-card-subtitle {
		    font-size: var(--step--2);
	  }
	  .cbt-grid-mobile .cbt-card-body {
		    font-size: var(--step--2);
	  }

	  /* ─── Mobile ──────────────────────────────────────────────────────────── */
	  @media (max-width: 40rem) {
		    /* Tap targets — only inside dialogs and forms */
		    dialog .btn,
		.form-profile .btn {
			  min-height: var(--touch-target-min);
			  display: inline-flex;
			  align-items: center;
			  justify-content: center;
		}
		    dialog .btn-sm,
		.form-profile .btn-sm {
			  min-height: var(--touch-target-min);
		}

		    /* Dialog → bottom sheet */
		    dialog {
			      position: fixed;
			      inset: auto 0 0;
			      margin: 0;
			      max-width: 100%;
			      max-height: 90dvh;
			      overflow-y: auto;
			      transform: translateY(100%);
			      border-radius: var(--space-s) var(--space-s) 0 0;
		    }

		    dialog[open] {
			      transform: translateY(0);
		    }

		    @starting-style {
			      dialog[open] {
				        transform: translateY(100%);
			      }
		    }

		/* Journal entries → card layout */
		#entries-body {
			display: block !important;
		}
		.entry-row--header {
			display: none;
		}
		.entry-row:not(.entry-row--header) {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			column-gap: var(--space-3xs);
			row-gap: var(--space-3xs);
			padding: var(--space-s) var(--space-xs);
		}
		.entry-row > :empty {
			display: none;
		}
		/* Force line break after date + action */
		.entry-row:not(.entry-row--header)::before {
			content: '';
			order: 3;
			flex-basis: 100%;
			height: 0;
		}
		/* Date + action on first line */
		.entry-row__date {
			order: 1;
			flex: 1;
		}
		.entry-row__action {
			order: 2;
			flex: 0 0 auto;
		}
		.entry-row__action .btn {
			min-height: var(--touch-target-min);
			min-width: var(--touch-target-min);
		}
		/* Weight + change inline */
		.entry-row__weight {
			order: 10;
		}
		.entry-row__dc {
			order: 11;
		}
		/* Indicators inline: weight, change, indicators */
		.entry-row__dc,
		.entry-row__rec,
		.entry-row__est,
		.entry-row__menses {
			width: auto;
			text-align: left;
		}
		.entry-row__est {
			order: 20;
		}
		.entry-row__menses {
			order: 21;
		}
		.entry-row__rec {
			order: 22;
		}
		/* Tags, event, notes — full width rows */
		.entry-row__tags {
			order: 30;
			flex-basis: 100%;
		}
		.entry-row__event {
			order: 40;
			flex-basis: 100%;
			white-space: normal;
		}
		.entry-row__notes {
			order: 50;
			flex-basis: 100%;
			white-space: normal;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
		/* Hide median on mobile */
		.entry-row__wm {
			display: none;
		}

	  }
}

/* =============================================================================
   UTILITIES LAYER - Helper classes (zero specificity with :where())
   ============================================================================= */

@layer utilities {
	  :where(.text-sm) {
		    font-size: var(--step--1);
	  }

	  :where(.text-muted) {
		    color: var(--body-muted);
	  }

	  :where(.text-lead) {
		    font-size: var(--step-1);
		    color: var(--body-lead);
	  }

	  :where(.text-label) {
		    font-size: var(--step--2);
		    font-weight: var(--weight-semibold);
		    text-transform: uppercase;
		    letter-spacing: 0.05em;
		    color: var(--body-muted);
	  }

	  :where(.text-info) {
		    color: var(--info-foreground);
	  }
	  :where(.text-success) {
		    color: var(--success-foreground);
	  }

	  :where(.text-warning) {
		    color: var(--warning-foreground);
	  }

	  :where(.text-danger) {
		    color: var(--danger-foreground);
	  }

	  :where(.truncate) {
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
	  }

	  :where(.u-visually-hidden) {
		    position: absolute;
		    width: 1px;
		    height: 1px;
		    clip: rect(0 0 0 0);
		    clip-path: inset(50%);
		    border: none;
		    overflow: hidden;
		    white-space: nowrap;
		    padding: 0;
	  }

	  :where(.flex-1) {
		    flex: 1;
	  }

	  :where(.list-none) {
		    padding-left: 0;
		    list-style: none;
	  }

	  /* Layout utility: block centred, fits its content */
	  :where(.u-center) {
		    margin-inline: auto;
		    width: fit-content;
		    margin-block-start: var(--space-l);
	  }

	  /* Stack spacing overrides */
	  :where(.stack-3xs) {
		    --stack-space: var(--space-3xs);
	  }

	  /* Width utilities */
	  :where(.w-4r) { width: 4rem; }
	  :where(.w-5r) { width: 5rem; }
	  :where(.w-7r) { width: 7rem; }
	  :where(.w-8r) { width: 8rem; }
	  :where(.w-full) { width: 100%; }

	  /* Cluster spacing overrides */
	  :where(.cluster-sm) {
		    align-items: center;
		    gap: 0.5rem;
	  }
	  :where(.cluster-xs) {
		    align-items: center;
		    gap: 0.25rem;
	  }
	  :where(.gap-sm) {
		    gap: 0.5rem;
	  }

	  /* Scrollable container capped at 200 px */
	  :where(.scroll-200) {
		    max-height: 200px;
		    overflow-y: auto;
	  }
}