/* Treatments: candidate directions for the shared components, tried in the theme lab (/theme-lab)
   and, when someone turns one on there, on every shell page. Served at /treatments.css; copied from
   src/tokens/treatments.css by scripts/assets.mjs. The list and its labels live in
   src/lib/treatments.ts; keep the two in step.

   Rules for a treatment, so the frame (<ritual-layout>) stays exactly the same:
   - Override component tokens (the :root, [data-treatment] block in tokens.css) and style r-*
     classes. Never override the semantic tokens the layout reads (--bg, --surface*, --fg*,
     --border*, --accent-*, --radius-*, --shadow-*, --font-sans, --font-mono, --text-*).
   - Token blocks stay unlayered so they beat the defaults on :root; component rules go in
     @layer ritual-ui so app and Tailwind styles still win over them.
   - Don't reference --accent-* from a token: a card can carry its own hue (.r-hue), and a token
     resolves where it's declared. Accent colors go in component rules, which resolve per element.
   - Scheme-specific rules use [data-treatment="…"][data-scheme="…"]: the shell and the lab set
     both attributes on the same element. */

@font-face {
  font-family: "Inter Display";
  src: url("/fonts/inter-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("/fonts/unbounded-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================== tightened
   Today's look with every inconsistency settled: one card radius, the spec's 20px padding,
   Inter's display cut for headlines and figures, accent text that reads in light mode. */
[data-treatment="tightened"] {
  --font-display: "Inter Display", var(--font-sans);
  --font-figure: "Inter Display", var(--font-sans);
  --title-tracking: -0.022em;
  --display-tracking: -0.032em;
  --figure-tracking: -0.035em;
  --card-pad: var(--space-5);
  --card-head-gap: var(--space-4);
  --media-card-radius: var(--radius-md);
  --media-tile-size: 44px;
  --media-title-font: "Inter Display", var(--font-sans);
  --media-lift: -3px;
  --media-zoom: 1.03;
  --grid-gap: var(--space-5);
  --card-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}
[data-treatment="tightened"][data-scheme="light"] {
  --card-shadow: 0 1px 2px rgb(28 25 23 / 0.05);
}

@layer ritual-ui {
  [data-treatment="tightened"] .r-card__title {
    letter-spacing: -0.01em;
  }
  [data-treatment="tightened"] .r-media-card__cta {
    color: var(--accent-fg);
  }
  [data-treatment="tightened"] .r-media-card.is-link:hover {
    border-color: color-mix(in oklch, var(--accent-500) 35%, transparent);
    box-shadow:
      0 20px 40px -24px rgb(0 0 0 / 0.5),
      0 0 0 1px color-mix(in oklch, var(--accent-500) 20%, transparent);
  }
  [data-treatment="tightened"] .r-btn--primary {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.18),
      0 1px 2px rgb(0 0 0 / 0.25);
  }
  [data-treatment="tightened"] :is(.r-pill, .r-table td) {
    font-variant-numeric: tabular-nums;
  }
}

/* ==================================================================== bento
   Soft tiles instead of boxes: no borders, 24px corners, pictures inset in their own rounded
   frame, heavy display headlines, pill controls. Tight gaps make a page one composed grid. */
[data-treatment="bento"] {
  --font-display: "Inter Display", var(--font-sans);
  --font-figure: "Inter Display", var(--font-sans);
  --title-size: var(--text-4xl);
  --title-leading: var(--leading-4xl);
  --title-weight: 700;
  --title-tracking: -0.035em;
  --display-size: var(--text-6xl);
  --display-leading: var(--leading-6xl);
  --display-weight: 700;
  --display-tracking: -0.045em;
  --eyebrow-weight: 600;
  --figure-size: var(--text-6xl);
  --figure-leading: var(--leading-6xl);
  --figure-weight: 700;
  --figure-tracking: -0.05em;
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-radius: var(--radius-full);
  --control-pad-x: var(--space-4);
  --control-primary-pad-x: var(--space-5);
  --card-radius: 24px;
  --card-pad: var(--space-6);
  --card-head-gap: var(--space-5);
  --card-title-font: "Inter Display", var(--font-sans);
  --card-title-size: var(--text-lg);
  --card-title-leading: var(--leading-lg);
  --card-title-weight: 650;
  --card-border-color: transparent;
  --card-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  --media-card-radius: 24px;
  --media-card-pad: var(--space-5);
  --media-inset: var(--space-2);
  --media-radius: 18px;
  --media-ratio: 4 / 3;
  --media-tile-size: 44px;
  --media-tile-radius: 14px;
  --media-tile-overlap: 30px;
  --media-title-font: "Inter Display", var(--font-sans);
  --media-title-size: var(--text-xl);
  --media-title-leading: var(--leading-xl);
  --media-title-weight: 650;
  --media-lift: -4px;
  --media-zoom: 1.05;
  --pill-h: 26px;
  --pill-pad-x: 11px;
  --grid-gap: var(--space-3);
  --section-gap: var(--space-16);
  --control-bg: color-mix(in oklch, var(--fg) 8%, transparent);
  --input-bg: color-mix(in oklch, var(--fg) 5%, transparent);
}
[data-treatment="bento"][data-scheme="light"] {
  --card-shadow:
    0 1px 2px rgb(28 25 23 / 0.04),
    0 12px 32px -16px rgb(28 25 23 / 0.14);
}

@layer ritual-ui {
  [data-treatment="bento"][data-scheme="light"] .r-page {
    background: var(--color-stone-100);
  }
  [data-treatment="bento"] .r-btn {
    border-color: transparent;
  }
  [data-treatment="bento"] .r-btn:not(.r-btn--primary):hover:not(:disabled) {
    background: color-mix(in oklch, var(--fg) 13%, transparent);
    color: var(--fg);
  }
  [data-treatment="bento"] .r-btn--primary {
    box-shadow: 0 8px 20px -10px var(--accent-500);
  }
  [data-treatment="bento"] .r-input {
    border-color: transparent;
    border-radius: 14px;
  }
  [data-treatment="bento"] .r-input:focus {
    border-color: var(--accent-500);
  }
  [data-treatment="bento"] .r-page-header {
    align-items: center;
    padding-bottom: var(--space-4);
    border-bottom: 0;
  }
  [data-treatment="bento"] .r-page-header__actions {
    align-self: center;
  }
  [data-treatment="bento"] .r-page-header__icon {
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 18px;
    box-shadow: var(--card-shadow);
  }
  [data-treatment="bento"] .r-section-head {
    padding-bottom: 0;
    border-bottom: 0;
  }
  [data-treatment="bento"] .r-section-head__title {
    font-family: "Inter Display", var(--font-sans);
    font-size: var(--text-2xl);
    line-height: var(--leading-2xl);
    font-weight: 700;
    letter-spacing: -0.03em;
  }
  [data-treatment="bento"] .r-media-card__shade {
    display: none;
  }
  [data-treatment="bento"] .r-media-card.is-link:hover {
    border-color: transparent;
    box-shadow:
      0 0 0 2px color-mix(in oklch, var(--accent-500) 75%, transparent),
      0 28px 56px -28px var(--accent-500);
  }
  [data-treatment="bento"] .r-media-card__status {
    top: var(--space-3);
    right: var(--space-3);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  }
  [data-treatment="bento"] .r-media-card__foot {
    padding-top: var(--space-4);
  }
  [data-treatment="bento"] .r-media-card__cta {
    padding: 6px var(--space-4);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--fg) 8%, transparent);
    color: var(--fg);
    font-weight: 600;
    transition-property: background-color, color;
    transition-duration: 200ms;
  }
  [data-treatment="bento"] .r-media-card.is-link:hover .r-media-card__cta {
    transform: none;
    background: var(--accent-500);
    color: var(--accent-ink);
  }
  [data-treatment="bento"] .r-notice {
    border-color: transparent;
    border-radius: 18px;
  }
  [data-treatment="bento"] .r-notice:not(.r-notice--success, .r-notice--warning, .r-notice--danger) {
    background: color-mix(in oklch, var(--fg) 5%, transparent);
  }
  [data-treatment="bento"] .r-empty {
    border: 0;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--card-shadow);
  }
  [data-treatment="bento"] .r-empty__icon {
    background: color-mix(in oklch, var(--fg) 7%, transparent);
    box-shadow: none;
  }
}

/* ==================================================================== darkroom
   The work is the interface: poster-shaped cards with the caption printed on the picture,
   surfaces that recede, mono readouts, and the accent used like a safelight. */
[data-treatment="darkroom"] {
  --font-display: "Bricolage Grotesque", var(--font-sans);
  --font-label: var(--font-mono);
  --font-figure: var(--font-mono);
  --title-size: var(--text-4xl);
  --title-leading: var(--leading-4xl);
  --title-tracking: -0.03em;
  --display-size: var(--text-6xl);
  --display-leading: var(--leading-6xl);
  --display-weight: 650;
  --display-tracking: -0.04em;
  --eyebrow-size: var(--text-xs);
  --eyebrow-case: uppercase;
  --eyebrow-tracking: 0.14em;
  --label-case: uppercase;
  --label-tracking: 0.08em;
  --figure-weight: 500;
  --figure-tracking: -0.04em;
  --control-radius: var(--radius-full);
  --control-pad-x: var(--space-4);
  --control-primary-pad-x: var(--space-5);
  --card-bg: color-mix(in oklch, var(--surface) 55%, transparent);
  --card-border-color: color-mix(in oklch, var(--fg) 7%, transparent);
  --media-card-radius: var(--radius-md);
  --media-ratio: 4 / 5;
  --media-title-font: "Bricolage Grotesque", var(--font-sans);
  --media-title-size: var(--text-xl);
  --media-title-leading: var(--leading-xl);
  --media-tile-size: 32px;
  --media-tile-radius: var(--radius-full);
  --media-lift: 0px;
  --media-zoom: 1.06;
  --grid-gap: var(--space-3);
}

@layer ritual-ui {
  [data-treatment="darkroom"] .r-page {
    background: oklch(9.5% 0.004 50);
  }
  [data-treatment="darkroom"][data-scheme="light"] .r-page {
    background: var(--color-stone-200);
  }
  [data-treatment="darkroom"] .r-media-card {
    aspect-ratio: var(--media-ratio);
    justify-content: flex-end;
    border: 0;
    background: #0c0a09;
    color: white;
  }
  [data-treatment="darkroom"] .r-media-card__media {
    position: absolute;
    inset: 0;
    margin: 0;
    aspect-ratio: auto;
  }
  [data-treatment="darkroom"] .r-media-card__shade {
    background: linear-gradient(to top, rgb(0 0 0 / 0.88), rgb(0 0 0 / 0.25) 45%, transparent 70%);
  }
  [data-treatment="darkroom"] .r-media-card__glow {
    mix-blend-mode: normal;
    background: radial-gradient(120% 70% at 50% 115%, color-mix(in oklch, var(--accent-500) 50%, transparent), transparent 65%);
  }
  [data-treatment="darkroom"] .r-media-card.is-link:hover {
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--accent-500) 60%, transparent),
      0 30px 60px -30px var(--accent-500);
  }
  [data-treatment="darkroom"] .r-media-card__body {
    flex: none;
  }
  [data-treatment="darkroom"] .r-media-card__tile {
    margin-top: 0;
    margin-bottom: var(--space-1);
    background: rgb(255 255 255 / 0.14);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
    backdrop-filter: blur(12px);
  }
  [data-treatment="darkroom"] .r-media-card__tile > span {
    width: 16px !important;
    height: 16px !important;
  }
  [data-treatment="darkroom"] .r-media-card__title {
    margin-top: var(--space-2);
  }
  [data-treatment="darkroom"] .r-media-card__desc {
    color: rgb(255 255 255 / 0.72);
  }
  [data-treatment="darkroom"] .r-media-card__meta {
    color: rgb(255 255 255 / 0.6);
  }
  [data-treatment="darkroom"] .r-media-card__foot {
    padding-top: var(--space-3);
  }
  [data-treatment="darkroom"] .r-media-card__cta {
    color: white;
  }
  [data-treatment="darkroom"] .r-media-card__status {
    left: var(--space-4);
    right: auto;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  [data-treatment="darkroom"] .r-page-header {
    border-bottom-color: transparent;
  }
  [data-treatment="darkroom"] .r-page-header__icon {
    border-radius: var(--radius-full);
  }
  [data-treatment="darkroom"] .r-btn--primary:hover:not(:disabled) {
    box-shadow: 0 0 28px -6px var(--accent-500);
  }
  [data-treatment="darkroom"] .r-section-head {
    border-bottom-color: transparent;
  }
  [data-treatment="darkroom"] .r-section-head__title {
    font-family: "Bricolage Grotesque", var(--font-sans);
    font-size: var(--text-2xl);
    line-height: var(--leading-2xl);
    letter-spacing: -0.02em;
  }
}

/* ==================================================================== signal
   Precise and lit: hairline edges with a highlight on top, headlines that fade from white, a faint
   grid under an accent glow, and cards whose edge lights up in their color when pointed at. */
[data-treatment="signal"] {
  --font-display: "Inter Display", var(--font-sans);
  --font-figure: "Inter Display", var(--font-sans);
  --title-size: var(--text-4xl);
  --title-leading: var(--leading-4xl);
  --title-tracking: -0.032em;
  --display-size: var(--text-6xl);
  --display-leading: var(--leading-6xl);
  --display-tracking: -0.045em;
  --eyebrow-size: var(--text-xs);
  --eyebrow-tracking: 0.01em;
  --figure-size: var(--text-6xl);
  --figure-leading: var(--leading-6xl);
  --figure-tracking: -0.05em;
  --control-h: 34px;
  --control-h-sm: 28px;
  --control-radius: 8px;
  --control-pad-x: var(--space-3);
  --control-primary-pad-x: var(--space-4);
  --card-title-font: "Inter Display", var(--font-sans);
  --card-bg: color-mix(in oklch, var(--fg) 2.5%, var(--bg));
  --card-border-color: color-mix(in oklch, var(--fg) 9%, transparent);
  --card-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 1px 2px rgb(0 0 0 / 0.4);
  --media-card-bg: color-mix(in oklch, var(--fg) 2.5%, var(--bg));
  --media-card-radius: var(--radius-md);
  --media-ratio: 16 / 10;
  --media-title-font: "Inter Display", var(--font-sans);
  --media-zoom: 1.03;
  --pill-h: 22px;
  --pill-pad-x: 8px;
  --pill-radius: 6px;
  --control-bg: color-mix(in oklch, var(--fg) 4%, var(--bg));
  --input-bg: color-mix(in oklch, var(--fg) 2%, var(--bg));
}
[data-treatment="signal"][data-scheme="light"] {
  --card-bg: #ffffff;
  --media-card-bg: #ffffff;
  --card-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.8),
    0 1px 2px rgb(28 25 23 / 0.05);
  --control-bg: #ffffff;
  --input-bg: #ffffff;
}

@layer ritual-ui {
  [data-treatment="signal"] .r-page {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }
  [data-treatment="signal"] .r-page::before,
  [data-treatment="signal"] .r-page::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    pointer-events: none;
  }
  [data-treatment="signal"] .r-page::before {
    height: 640px;
    background-image:
      linear-gradient(color-mix(in oklch, var(--fg) 5%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in oklch, var(--fg) 5%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(70% 100% at 50% 0%, black, transparent 75%);
  }
  [data-treatment="signal"] .r-page::after {
    height: 520px;
    background: radial-gradient(50% 70% at 50% -20%, color-mix(in oklch, var(--accent-500) 30%, transparent), transparent 70%);
  }
  [data-treatment="signal"][data-scheme="light"] .r-page::after {
    background: radial-gradient(50% 70% at 50% -20%, color-mix(in oklch, var(--accent-500) 14%, transparent), transparent 70%);
  }
  [data-treatment="signal"] :is(.r-title, .r-display, .r-figure) {
    background: linear-gradient(180deg, var(--fg) 35%, color-mix(in oklch, var(--fg) 58%, transparent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  [data-treatment="signal"] .r-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--fg-muted);
  }
  [data-treatment="signal"] .r-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--accent-500);
    box-shadow:
      0 0 0 3px color-mix(in oklch, var(--accent-500) 20%, transparent),
      0 0 10px var(--accent-500);
  }
  [data-treatment="signal"] .r-btn {
    border-color: color-mix(in oklch, var(--fg) 11%, transparent);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.05),
      0 1px 2px rgb(0 0 0 / 0.3);
  }
  [data-treatment="signal"] .r-btn--ghost {
    border-color: transparent;
    box-shadow: none;
  }
  [data-treatment="signal"] .r-btn--primary {
    border-color: transparent;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.3),
      0 0 0 1px var(--accent-600),
      0 6px 20px -6px color-mix(in oklch, var(--accent-500) 70%, transparent);
  }
  [data-treatment="signal"] .r-input {
    border-color: color-mix(in oklch, var(--fg) 11%, transparent);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.2);
  }
  [data-treatment="signal"][data-scheme="light"] .r-input {
    box-shadow: inset 0 1px 1px rgb(28 25 23 / 0.05);
  }
  [data-treatment="signal"] .r-input:focus {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-500) 22%, transparent);
  }
  [data-treatment="signal"] :is(.r-page-header, .r-section-head) {
    border-bottom-color: color-mix(in oklch, var(--fg) 8%, transparent);
  }
  [data-treatment="signal"] .r-page-header__icon {
    border-color: color-mix(in oklch, var(--fg) 11%, transparent);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
  }
  [data-treatment="signal"] .r-section-head__title {
    font-family: "Inter Display", var(--font-sans);
    letter-spacing: -0.015em;
  }
  [data-treatment="signal"] .r-media-card.is-link:hover {
    border-color: transparent;
    background:
      linear-gradient(var(--media-card-bg), var(--media-card-bg)) padding-box,
      linear-gradient(
          150deg,
          var(--accent-400),
          color-mix(in oklch, var(--accent-500) 12%, transparent) 40%,
          color-mix(in oklch, var(--accent-500) 12%, transparent) 70%,
          var(--accent-600)
        )
        border-box;
    box-shadow: 0 20px 50px -24px color-mix(in oklch, var(--accent-500) 70%, transparent);
  }
  [data-treatment="signal"] .r-media-card__status {
    background: rgb(0 0 0 / 0.5);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  }
  [data-treatment="signal"] .r-media-card__cta {
    color: var(--fg-muted);
    transition-property: transform, color;
  }
  [data-treatment="signal"] .r-media-card.is-link:hover .r-media-card__cta {
    color: var(--accent-fg);
  }
  [data-treatment="signal"] .r-pill {
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--fg) 8%, transparent);
  }
  [data-treatment="signal"] .r-pill--accent {
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent-500) 35%, transparent);
  }
  [data-treatment="signal"] .r-notice {
    border-radius: 10px;
  }
  [data-treatment="signal"] .r-empty {
    border-color: color-mix(in oklch, var(--fg) 12%, transparent);
    background: radial-gradient(60% 80% at 50% 0%, color-mix(in oklch, var(--accent-500) 9%, transparent), transparent);
  }
  [data-treatment="signal"] .r-empty__icon {
    background: var(--card-bg);
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--fg) 11%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 0.06);
  }
}

/* ==================================================================== contact-sheet
   For people looking through a lot of output: small tight frames, numbered like a contact sheet,
   mono labels and figures, 4px corners, and one line of description. */
[data-treatment="contact-sheet"] {
  --font-label: var(--font-mono);
  --font-figure: var(--font-mono);
  --title-size: var(--text-2xl);
  --title-leading: var(--leading-2xl);
  --title-tracking: -0.01em;
  --display-size: var(--text-4xl);
  --display-leading: var(--leading-4xl);
  --display-tracking: -0.02em;
  --eyebrow-size: var(--text-xs);
  --eyebrow-case: uppercase;
  --eyebrow-tracking: 0.06em;
  --label-case: uppercase;
  --label-tracking: 0.04em;
  --figure-size: var(--text-4xl);
  --figure-leading: var(--leading-4xl);
  --figure-weight: 500;
  --figure-tracking: -0.04em;
  --control-h: 32px;
  --control-h-sm: 28px;
  --control-radius: 4px;
  --control-pad-x: 10px;
  --control-primary-pad-x: var(--space-3);
  --card-radius: 4px;
  --card-pad: var(--space-4);
  --card-head-gap: var(--space-3);
  --card-title-size: var(--text-sm);
  --card-title-leading: var(--leading-sm);
  --media-card-radius: 4px;
  --media-card-pad: var(--space-3);
  --media-ratio: 3 / 2;
  --media-title-size: var(--text-sm);
  --media-title-leading: var(--leading-sm);
  --media-lift: 0px;
  --media-zoom: 1;
  --pill-h: 20px;
  --pill-pad-x: 6px;
  --pill-radius: 3px;
  --grid-gap: var(--space-2);
  --grid-min: 200px;
  --section-gap: var(--space-8);
}

@layer ritual-ui {
  [data-treatment="contact-sheet"] :is(.r-media-card__tile, .r-media-card__shade, .r-media-card__glow, .r-media-card__foot) {
    display: none;
  }
  [data-treatment="contact-sheet"] .r-grid {
    counter-reset: frame;
  }
  [data-treatment="contact-sheet"] .r-media-card {
    counter-increment: frame;
  }
  [data-treatment="contact-sheet"] .r-media-card__media::after {
    content: counter(frame, decimal-leading-zero);
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 0 var(--space-1);
    border-radius: 2px;
    background: rgb(0 0 0 / 0.6);
    color: white;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
  }
  [data-treatment="contact-sheet"] .r-media-card__status {
    top: 6px;
    right: 6px;
    padding: 0 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  [data-treatment="contact-sheet"] .r-media-card__desc {
    -webkit-line-clamp: 1;
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
  }
  [data-treatment="contact-sheet"] .r-media-card__meta {
    margin-top: var(--space-2);
  }
  [data-treatment="contact-sheet"] .r-media-card.is-link:hover {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 1px var(--accent-500);
  }
  [data-treatment="contact-sheet"] .r-card__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  [data-treatment="contact-sheet"] .r-card__icon {
    width: 14px !important;
    height: 14px !important;
  }
  [data-treatment="contact-sheet"] .r-page-header {
    gap: var(--space-3);
    padding-bottom: var(--space-4);
  }
  [data-treatment="contact-sheet"] .r-page-header__icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
  }
  [data-treatment="contact-sheet"] .r-page-header__icon > span {
    width: 16px !important;
    height: 16px !important;
  }
  [data-treatment="contact-sheet"] .r-table td {
    padding-block: 6px;
  }
  [data-treatment="contact-sheet"] .r-notice {
    padding: var(--space-2) var(--space-3);
    border-radius: 4px;
  }
  [data-treatment="contact-sheet"] .r-section-head {
    padding-bottom: var(--space-2);
  }
  [data-treatment="contact-sheet"] .r-section-head__title {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  [data-treatment="contact-sheet"] .r-empty {
    padding: var(--space-10) var(--space-6);
    border-radius: 4px;
  }
}

/* ==================================================================== glass
   Each app's banner, blurred, behind frosted surfaces: every app gets its own atmosphere while
   the parts stay the same. Lit edges, inset pictures, gradient primary. */
[data-treatment="glass"] {
  --font-display: "Inter Display", var(--font-sans);
  --font-figure: "Inter Display", var(--font-sans);
  --title-size: var(--text-4xl);
  --title-leading: var(--leading-4xl);
  --title-tracking: -0.025em;
  --figure-tracking: -0.035em;
  --control-radius: var(--radius-md);
  --card-radius: var(--radius-lg);
  --card-bg: color-mix(in oklch, var(--surface) 55%, transparent);
  --card-border-color: color-mix(in oklch, var(--fg) 12%, transparent);
  --card-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 24px 48px -28px rgb(0 0 0 / 0.6);
  --media-card-bg: color-mix(in oklch, var(--surface) 55%, transparent);
  --media-card-radius: var(--radius-lg);
  --media-inset: var(--space-2);
  --media-radius: var(--radius-md);
  --media-tile-overlap: 28px;
  --media-title-font: "Inter Display", var(--font-sans);
  --control-bg: color-mix(in oklch, var(--surface-raised) 50%, transparent);
  --input-bg: color-mix(in oklch, var(--bg) 40%, transparent);
}
[data-treatment="glass"][data-scheme="light"] {
  --card-bg: color-mix(in oklch, var(--surface) 62%, transparent);
  --media-card-bg: color-mix(in oklch, var(--surface) 62%, transparent);
  --card-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    0 24px 48px -28px rgb(28 25 23 / 0.35);
}

@layer ritual-ui {
  [data-treatment="glass"] .r-page {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }
  [data-treatment="glass"] .r-page::before,
  [data-treatment="glass"] .r-page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
  [data-treatment="glass"] .r-page::before {
    background: var(--ritual-app-banner, url("/banners/store.jpg")) center 30% / cover no-repeat;
    filter: blur(56px) saturate(1.4);
    opacity: 0.6;
    transform: scale(1.15);
  }
  [data-treatment="glass"] .r-page::after {
    background:
      radial-gradient(70% 50% at 15% 0%, color-mix(in oklch, var(--accent-500) 28%, transparent), transparent 70%),
      linear-gradient(to bottom, color-mix(in oklch, var(--bg) 35%, transparent), var(--bg) 85%);
  }
  [data-treatment="glass"] :is(.r-card, .r-media-card, .r-notice, .r-empty, .r-page-header__icon) {
    backdrop-filter: blur(24px) saturate(1.4);
  }
  [data-treatment="glass"] .r-media-card__shade {
    display: none;
  }
  [data-treatment="glass"] .r-media-card.is-link:hover {
    border-color: color-mix(in oklch, var(--accent-400) 45%, transparent);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.14),
      0 30px 60px -30px var(--accent-500);
  }
  [data-treatment="glass"] .r-media-card__cta {
    color: var(--accent-fg);
  }
  [data-treatment="glass"] .r-btn {
    backdrop-filter: blur(12px);
  }
  [data-treatment="glass"] .r-btn--primary {
    background-color: var(--accent-500);
    background-image: linear-gradient(180deg, var(--accent-400), var(--accent-600));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.28),
      0 8px 20px -8px var(--accent-500);
  }
  [data-treatment="glass"] .r-btn--primary:hover:not(:disabled) {
    background-color: var(--accent-500);
    filter: brightness(1.08);
  }
  [data-treatment="glass"] :is(.r-page-header, .r-section-head) {
    border-bottom-color: color-mix(in oklch, var(--fg) 12%, transparent);
  }
  [data-treatment="glass"] .r-empty {
    background: var(--card-bg);
  }
  /* Subtle text washes out over the banner's warm or bright regions. */
  [data-treatment="glass"] .r-eyebrow {
    color: var(--fg-muted);
  }
}

/* ==================================================================== committed
   The app's color, all the way: an accent field behind the header, Unbounded headlines, pill
   controls, pictures toned in the accent until you point at them. The hardest test for the
   light hues. */
[data-treatment="committed"] {
  --font-display: "Unbounded", var(--font-sans);
  --font-figure: "Unbounded", var(--font-sans);
  --title-size: var(--text-4xl);
  --title-leading: var(--leading-4xl);
  --title-tracking: -0.02em;
  --display-size: var(--text-6xl);
  --display-leading: var(--leading-6xl);
  --display-weight: 700;
  --display-tracking: -0.03em;
  --eyebrow-size: var(--text-xs);
  --eyebrow-weight: 700;
  --eyebrow-case: uppercase;
  --eyebrow-tracking: 0.1em;
  --figure-tracking: -0.03em;
  --control-h: 40px;
  --control-radius: var(--radius-full);
  --control-pad-x: var(--space-4);
  --control-primary-pad-x: var(--space-5);
  --card-radius: var(--radius-lg);
  --card-title-font: "Unbounded", var(--font-sans);
  --media-card-radius: var(--radius-lg);
  --media-tile-size: 56px;
  --media-tile-radius: var(--radius-lg);
  --media-title-font: "Unbounded", var(--font-sans);
  --pill-h: 28px;
  --pill-pad-x: var(--space-3);
}

@layer ritual-ui {
  [data-treatment="committed"] .r-page {
    background: radial-gradient(90% 40% at 50% -5%, color-mix(in oklch, var(--accent-500) 16%, transparent), transparent 70%);
  }
  [data-treatment="committed"] .r-page-header {
    padding: var(--space-8);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
  }
  [data-treatment="committed"] .r-page-header__icon {
    border: 0;
    background: var(--accent-500);
    color: var(--accent-ink);
  }
  [data-treatment="committed"] .r-eyebrow,
  [data-treatment="committed"] .r-card__icon,
  [data-treatment="committed"] .r-table th {
    color: var(--accent-fg);
  }
  [data-treatment="committed"] :is(.r-card, .r-media-card) {
    border-color: color-mix(in oklch, var(--accent-500) 22%, var(--border));
  }
  [data-treatment="committed"] .r-media-card__glow {
    opacity: 0.6;
    mix-blend-mode: color;
    background: var(--accent-500);
  }
  [data-treatment="committed"] .r-media-card.is-link:hover .r-media-card__glow {
    opacity: 0;
  }
  [data-treatment="committed"] .r-media-card__cta {
    padding: 6px var(--space-4);
    border-radius: var(--radius-full);
    background: var(--accent-500);
    color: var(--accent-ink);
    font-weight: 600;
  }
  [data-treatment="committed"] .r-section-head {
    border-bottom-color: var(--accent-500);
  }
  [data-treatment="committed"] .r-section-head__title {
    font-family: "Unbounded", var(--font-sans);
  }
  [data-treatment="committed"] .r-pill--accent {
    background: var(--accent-500);
    color: var(--accent-ink);
  }
  [data-treatment="committed"] .r-btn--primary {
    box-shadow: 0 10px 24px -12px var(--accent-500);
  }
  [data-treatment="committed"] .r-empty {
    border-color: color-mix(in oklch, var(--accent-500) 40%, transparent);
    background: var(--accent-soft);
  }
  [data-treatment="committed"] .r-empty__icon {
    background: var(--accent-500);
    color: var(--accent-ink);
    box-shadow: none;
  }
}