/* reneos-kit-v2.css: reneOS Design System v2 (Graphite + the Apple layer), built 2026-11-01 from reneos-site/design/{tokens.css,typography.css,motion.css,glass.css,graphite.css,graphite-watch.css}.
   Generated by build_kit.py. Do not edit here. */
/* ---- tokens.css ---- */
/* reneOS design tokens (Design System v1, sections 03, 12, 13, 22, 34, 36).
   The single place colours, spacing, radius, layout and motion are defined.
   Pages use these variables; they do not invent their own values. */
:root {
  /* colour */
  --rene-black: #05080C;
  --rene-black-soft: #080D13;
  --rene-surface: #0B1118;
  --rene-surface-raised: #101821;

  --rene-white: #F5F7FA;
  --rene-white-soft: #D9E0E7;
  --rene-muted: #93A0AD;
  --rene-dim: #66727F;

  --rene-blue: #7ECFFF;
  --rene-blue-bright: #A9E0FF;
  --rene-blue-deep: #4B9FE8;

  --rene-gold: #E9C78D;
  --rene-gold-bright: #FFF0D1;
  --rene-gold-deep: #B98645;

  --rene-line: rgba(255, 255, 255, 0.13);
  --rene-line-soft: rgba(255, 255, 255, 0.08);
  --rene-glass: rgba(255, 255, 255, 0.035);
  --rene-glass-hover: rgba(255, 255, 255, 0.055);

  /* functional states only, never brand colour */
  --rene-error: #E77C7C;
  --rene-success: #82C7A5;

  /* product accents */
  --party-pink: #F06AA9;
  --party-blue: #73B8FF;

  /* spacing, 8px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  /* radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* layout */
  --rene-max-width: 1440px;

  /* motion */
  --rene-ease: cubic-bezier(.2, .8, .2, 1);
  --rene-transition: 240ms var(--rene-ease);
  --rene-transition-slow: 500ms var(--rene-ease);

  /* type */
  --rene-font: Inter, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

/* per-product accents: put the class on a page or a card */
.accent-calista, .accent-housewatch, .accent-studio { --accent-primary: #8FD4FF; --accent-secondary: #E9C78D; }
.accent-sound { --accent-primary: #8FD4FF; --accent-secondary: #DCE8F2; }
.accent-at-home { --accent-primary: #E9C78D; --accent-secondary: #8FD4FF; }
.accent-lume { --accent-primary: #A9E0FF; --accent-secondary: #E9C78D; }
.accent-power-hour { --accent-primary: #E9C78D; --accent-secondary: #FFF0D1; }
.accent-party { --accent-primary: #F06AA9; --accent-secondary: #73B8FF; }
.accent-marquee { --accent-primary: #A57CFF; --accent-secondary: #FFC66D; }

/* the page: atmosphere felt before it is noticed */
.rene-page {
  min-height: 100vh;
  color: var(--rene-white);
  font-family: var(--rene-font);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 18% 15%, rgba(50, 110, 155, 0.15), transparent 34%),
    radial-gradient(circle at 82% 25%, rgba(205, 160, 95, 0.08), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(50, 80, 110, 0.08), transparent 42%),
    var(--rene-black);
  background-attachment: fixed;
}
@supports (-webkit-touch-callout: none) { .rene-page { background-attachment: scroll; } }

.rene-container {
  width: min(calc(100% - 48px), var(--rene-max-width));
  margin-inline: auto;
}

/* ---- typography.css ---- */
/* reneOS typography (Design System v1, section 06). Inter, restrained weights.
   Load Inter 300/400/500 on the page (Google Fonts). */
.rene-display { font-size: clamp(3rem, 7vw, 7rem); font-weight: 300; letter-spacing: -0.045em; line-height: 0.95; }
.rene-h1 { font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1; }
.rene-h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); font-weight: 400; letter-spacing: -0.025em; }
.rene-h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.rene-body { font-size: 0.95rem; font-weight: 400; line-height: 1.6; color: var(--rene-muted); }
.rene-eyebrow { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rene-muted); }

/* the engraved label: what a physical control would have printed under it */
.rene-label { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rene-white); }

/* ---- motion.css ---- */
/* reneOS motion (Design System v1, sections 18-19). Hardware, not cartoons:
   opacity, a few pixels of travel, 0.985 on press. No bounce. */
.rene-rise { animation: rene-rise 500ms var(--rene-ease) both; }
@keyframes rene-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- glass.css ---- */
/* reneOS material (Design System v1, sections 04, 10, 14-16, 24).
   Architectural smoked glass: 0.02 to 0.08 opacity, never white. */
.rene-glass {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 20px 60px rgba(0, 0, 0, 0.20);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  backdrop-filter: blur(28px) saturate(120%);
}
.rene-glass-raised {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 70px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(32px) saturate(125%);
  backdrop-filter: blur(32px) saturate(125%);
}

/* the application card */
.rene-experience-card {
  position: relative;
  min-height: 220px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  color: var(--rene-white);
  text-decoration: none;
  transition: transform 300ms var(--rene-ease), border-color 300ms ease, background 300ms ease;
}
.rene-experience-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border-color: rgba(255, 255, 255, 0.20);
}
.rene-experience-card:active { transform: translateY(-1px) scale(0.985); }

/* icons */
rene-icon { display: inline-block; width: 64px; height: 64px; line-height: 0; flex: none; }
rene-icon svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(126, 207, 255, 0.22)); }
rene-icon[glow="gold"] svg { filter: drop-shadow(0 0 6px rgba(233, 199, 141, 0.18)); }
rene-icon[glow="none"] svg { filter: none; }

/* buttons */
.rene-button-primary, .rene-button-secondary {
  font: inherit; font-size: 0.85rem; font-weight: 500; border-radius: 14px; padding: 12px 20px; cursor: pointer;
  transition: background var(--rene-transition), border-color var(--rene-transition), transform var(--rene-transition);
}
.rene-button-primary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(220, 230, 238, 0.88));
  color: #071019; border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20);
}
.rene-button-secondary { background: rgba(255, 255, 255, 0.035); color: var(--rene-white); border: 1px solid rgba(255, 255, 255, 0.14); }
.rene-button-secondary:hover { background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.22); }
.rene-button-primary:active, .rene-button-secondary:active { transform: scale(0.985); }
.rene-button-primary:disabled, .rene-button-secondary:disabled { opacity: 0.45; cursor: default; }

.rene-field {
  font: inherit; font-size: 0.85rem; color: var(--rene-white); background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 11px 14px; outline: none;
  transition: border-color var(--rene-transition);
}
.rene-field:focus { border-color: rgba(143, 212, 255, 0.55); }

/* navigation surface */
.rene-nav { background: rgba(5, 8, 12, 0.62); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* dividers */
.rene-divider { height: 1px; background: rgba(255, 255, 255, 0.09); border: 0; }
.rene-divider-gold { height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(233, 199, 141, 0.55), transparent); }

/* focus, everywhere */
.rene-page a:focus-visible, .rene-page button:focus-visible, .rene-page input:focus-visible {
  outline: 1px solid rgba(143, 212, 255, 0.70); outline-offset: 3px;
}

/* ---- graphite.css ---- */
/* reneOS Graphite + the Apple layer (kit v2, 2026-11-01, Rene picked direction B).
   Loaded AFTER tokens/typography/motion/glass: it re-points the --rene-* tokens at
   Apple's dark (true black, layered greys, pastel tints) so every page that already
   reads the kit turns Graphite, then adds the shared Apple pieces (materials, grouped
   lists, bars, sheets, switches, segmented control, springs). Only pages that link
   reneos-kit-v2.css get this; reneos-kit.css (v1) stays as it was. */
:root {
  /* ground and layers: true black (OLED pixels off), then Apple's grouped greys */
  --rene-black: #000000;
  --rene-black-soft: #0A0A0B;
  --rene-surface: #1C1C1E;
  --rene-surface-raised: #2C2C2E;
  --rene-surface-high: #3A3A3C;

  /* labels: the Watch page's off-white, secondary and tertiary greys (frozen reference) */
  --rene-white: #F5F5F7;
  --rene-white-soft: #E5E5EA;
  --rene-muted: #A1A1A8;
  --rene-dim: #6C6C72;

  /* tints, pastel (Rene's register: if it would look at home on a neon sign, mute it) */
  --rene-blue: #9CCBFF;
  --rene-blue-bright: #C4E0FF;
  --rene-blue-deep: #6AAEF5;
  --rene-gold: #F2CF8E;
  --rene-gold-bright: #FFE8C2;
  --rene-gold-deep: #C9A15F;

  --rene-line: rgba(255, 255, 255, 0.12);
  --rene-line-soft: rgba(255, 255, 255, 0.07);
  --rene-separator: rgba(84, 84, 88, 0.55);
  --rene-fill: rgba(118, 118, 128, 0.24);
  --rene-fill-soft: rgba(118, 118, 128, 0.14);
  --rene-glass: rgba(255, 255, 255, 0.06);
  --rene-glass-hover: rgba(255, 255, 255, 0.09);

  /* functional states only */
  --rene-error: #FF7B72;
  --rene-warning: #FFC37A;
  --rene-success: #7FDBA0;

  --party-pink: #FF9FC4;
  --party-blue: #9CCBFF;

  /* per-app tints (Graphite) */
  --tint-calista: #9CCBFF;
  --tint-at-home: #F2CF8E;
  --tint-music: #FF9FB8;
  --tint-guard: #A8B3C2;
  --tint-games: #C3B1FF;
  --tint-party: #FF9FC4;
  --tint-marquee: #B79CFF;
  --tint-day: #8FE0C2;
  --tint-trip: #7FD6E8;
  --tint-town: #FFD58A;

  /* shape: the Watch page's radii (frozen reference, Rene 2026-11-01): tiles 12, cards 20, sheet 28, buttons 14 */
  --radius-sm: 8px;
  --radius-md: 12px;   /* art tiles */
  --radius-lg: 20px;   /* cards and panels */
  --radius-xl: 28px;

  /* type: the system font first (SF on Apple devices), Inter elsewhere */
  --rene-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  --rene-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif;
  --ios-large: 700 34px/41px var(--rene-font-display);
  --ios-title1: 700 28px/34px var(--rene-font-display);
  --ios-title2: 700 22px/28px var(--rene-font-display);
  --ios-title3: 600 20px/25px var(--rene-font-display);
  --ios-headline: 600 17px/22px var(--rene-font);
  --ios-body: 400 17px/22px var(--rene-font);
  --ios-callout: 400 16px/21px var(--rene-font);
  --ios-sub: 400 15px/20px var(--rene-font);
  --ios-foot: 400 13px/18px var(--rene-font);
  --ios-cap: 500 12px/16px var(--rene-font);

  /* motion: the Watch page's spring (frozen reference) */
  --rene-spring: linear(0, .06 2%, .23 5%, .5 10%, .73 16%, .87 23%, .95 32%, .985 44%, 1);
  --rene-ease: cubic-bezier(.2, .8, .2, 1);
  --rene-transition: 240ms var(--rene-ease);
  --rene-transition-spring: 520ms var(--rene-spring);
  --rene-transition-snap: 520ms var(--rene-spring);

  /* materials (glass over content) */
  --mat-thin: rgba(30, 30, 32, 0.52);
  --mat-regular: rgba(30, 30, 32, 0.68);
  --mat-thick: rgba(28, 28, 30, 0.84);
  --mat-edge: rgba(255, 255, 255, 0.08);
  --blur-thin: blur(20px) saturate(160%);
  --blur-regular: blur(30px) saturate(180%);
}

/* the product accent classes, Graphite */
.accent-calista, .accent-housewatch, .accent-studio { --accent-primary: var(--tint-calista); --accent-secondary: var(--rene-gold); }
.accent-sound { --accent-primary: var(--tint-music); --accent-secondary: #E5E5EA; }
.accent-at-home { --accent-primary: var(--tint-at-home); --accent-secondary: var(--tint-calista); }
.accent-lume { --accent-primary: #C4E0FF; --accent-secondary: var(--rene-gold); }
.accent-party { --accent-primary: var(--tint-party); --accent-secondary: var(--party-blue); }
.accent-games { --accent-primary: var(--tint-games); --accent-secondary: var(--tint-party); }
.accent-marquee { --accent-primary: var(--tint-marquee); --accent-secondary: #FFD58A; }
.accent-guard { --accent-primary: var(--tint-guard); --accent-secondary: var(--tint-calista); }
.accent-day { --accent-primary: var(--tint-day); --accent-secondary: var(--rene-gold); }
.accent-trip { --accent-primary: var(--tint-trip); --accent-secondary: var(--rene-gold); }
.accent-town { --accent-primary: var(--tint-town); --accent-secondary: var(--tint-party); }

/* the page: plain true black, no atmosphere glow */
.rene-page { background: var(--rene-black); font-family: var(--rene-font); }

/* reads as iOS, not web (Mac review 2026-11-01) */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
* { -webkit-tap-highlight-color: transparent; }
button, [role="button"], [role="switch"], [role="tab"], .ios-row, .ios-seg, .ios-tabbar, .ios-card, .ios-arr {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.ios-switch, .ios-seg > *, .ios-tabbar > * { cursor: default; }

/* glass: Apple materials instead of the v1 smoked gradient */
.rene-glass, .ios-material {
  background: var(--mat-regular); border: 0.5px solid var(--mat-edge); box-shadow: none;
  -webkit-backdrop-filter: var(--blur-regular); backdrop-filter: var(--blur-regular);
}
.rene-glass-raised, .ios-material-thick {
  background: var(--mat-thick); border: 0.5px solid var(--mat-edge); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: var(--blur-regular); backdrop-filter: var(--blur-regular);
}
.ios-material-thin { background: var(--mat-thin); -webkit-backdrop-filter: var(--blur-thin); backdrop-filter: var(--blur-thin); }
.rene-experience-card {
  background: var(--rene-surface); border: 0; box-shadow: none; border-radius: var(--radius-lg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform var(--rene-transition-spring), background var(--rene-transition);
}
@media (hover: hover) and (pointer: fine) { .rene-experience-card:hover { transform: translateY(-2px); background: var(--rene-surface-raised); } }
.rene-experience-card:active { transform: scale(0.98); }
.rene-nav { background: var(--mat-regular); border-bottom: 0.5px solid var(--rene-separator);
  -webkit-backdrop-filter: var(--blur-regular); backdrop-filter: var(--blur-regular); }

/* buttons: filled tint (primary), grey fill (secondary) */
.rene-button-primary, .rene-button-secondary { border-radius: 14px; min-height: 44px; padding-inline: 20px; font-size: 1rem; font-weight: 600;
  transition: transform 180ms var(--rene-ease), filter 180ms var(--rene-ease), background var(--rene-transition); }
.rene-button-primary { background: var(--accent-primary, var(--rene-blue)); color: #0B0B0C; border: 0; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .rene-button-primary:hover { filter: brightness(1.06); } }
.rene-button-secondary { background: var(--rene-fill); color: var(--rene-white); border: 0; }
@media (hover: hover) and (pointer: fine) { .rene-button-secondary:hover { background: rgba(118, 118, 128, 0.32); border: 0; } }
.rene-button-primary:active, .rene-button-secondary:active { transform: scale(0.97); filter: brightness(0.92); }
.rene-field { background: var(--rene-fill-soft); border: 0; border-radius: 10px; font-size: 1rem; min-height: 44px; }
.rene-field:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary, var(--rene-blue)) 60%, transparent); }
.rene-divider { background: var(--rene-separator); height: 0.5px; }
.rene-page a:focus-visible, .rene-page button:focus-visible, .rene-page input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-primary, var(--rene-blue)) 80%, transparent); outline-offset: 2px;
}
rene-icon svg { filter: none; }

/* ---------- the Apple pieces ---------- */
.ios-large-title { font: var(--ios-large); letter-spacing: normal; color: var(--rene-white); padding-top: env(safe-area-inset-top); }
/* section titles like the Watch shelves: sentence case, 22/28 bold */
.ios-section-label { font: var(--ios-title2); text-transform: none; letter-spacing: normal; color: var(--rene-white); padding: 0 16px 10px; }

/* inset grouped list: rows inside one rounded cell, hairline separators inset past the icon */
.ios-group { background: var(--rene-surface); border-radius: var(--radius-md); overflow: hidden; }
.ios-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); width: 100%;
  color: var(--rene-white); text-align: left; text-decoration: none; position: relative;
  transition: background 350ms ease-out; }
.ios-row + .ios-row::before { content: ""; position: absolute; top: 0; right: 16px; left: var(--sep-inset, 56px);
  height: 1px; background: var(--rene-separator); }
.ios-row:active { background: var(--rene-surface-raised); transition: none; }
.ios-row .ios-value { margin-left: auto; color: var(--rene-muted); }
.ios-tile { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: color-mix(in srgb, var(--tile, var(--accent-primary, var(--rene-blue))) 22%, transparent); color: var(--tile, var(--accent-primary, var(--rene-blue))); }

/* bars */
/* the Watch top bar: always frosted, sticky, 52px, hairline under it */
.ios-navbar { position: sticky; top: 0; z-index: 20; min-height: 52px; padding-top: env(safe-area-inset-top); background: var(--mat-regular);
  -webkit-backdrop-filter: var(--blur-regular); backdrop-filter: var(--blur-regular); border-bottom: 0.5px solid var(--rene-separator); }
/* the Watch phone tab bar: full width, frosted, hairline on top */
.ios-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around;
  padding: 7px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--mat-regular);
  -webkit-backdrop-filter: var(--blur-regular); backdrop-filter: var(--blur-regular); border-top: 0.5px solid var(--rene-separator); }
.ios-tabbar > * { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 44px;
  justify-content: center; min-width: 64px; font: 500 10px/12px var(--rene-font); color: var(--rene-dim); text-decoration: none; }
.ios-tabbar > .on, .ios-tabbar > [aria-current="page"] { color: var(--accent-primary, var(--rene-blue)); }
body.has-ios-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* sheet: slides up on a spring; add .open */
.ios-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 92vh; overflow: auto;
  background: var(--rene-surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); transform: translateY(105%);
  transition: transform var(--rene-transition-spring); }
.ios-sheet.open { transform: none; }
.ios-sheet::before { content: ""; display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--rene-dim); margin: 0 auto 14px; }
.ios-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity var(--rene-transition-spring); }
.ios-scrim.open { opacity: 1; pointer-events: auto; }

/* switch: <button class="ios-switch" role="switch" aria-checked="true"> */
.ios-switch { position: relative; width: 51px; height: 31px; border-radius: 16px; border: 0; padding: 0; flex: none; cursor: pointer;
  background: var(--rene-fill); transition: background 180ms var(--rene-ease); }
.ios-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); transition: transform var(--rene-transition-snap); }
.ios-switch[aria-checked="true"] { background: var(--accent-primary, var(--rene-success)); }
.ios-switch[aria-checked="true"]::after { transform: translateX(20px); }

/* segmented control: <div class="ios-seg"><button aria-pressed="true"> */
.ios-seg { display: inline-flex; background: var(--rene-fill); border-radius: 9px; padding: 2px; gap: 2px; }
.ios-seg > * { font: 500 13px/18px var(--rene-font); padding: 6px 14px; min-height: 32px; border-radius: 7px; border: 0;
  background: none; color: var(--rene-white); cursor: pointer; transition: background 180ms var(--rene-ease); }
.ios-seg > [aria-pressed="true"], .ios-seg > [aria-selected="true"], .ios-seg > .on {
  background: var(--rene-surface-high); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); }

/* Reduce Transparency (iOS setting) and slow devices: solid instead of glass */
@media (prefers-reduced-transparency: reduce) {
  .rene-glass, .rene-glass-raised, .ios-material, .ios-material-thick, .ios-material-thin, .rene-nav, .ios-navbar, .ios-tabbar {
    background: var(--rene-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html.rene-solid .rene-glass, html.rene-solid .rene-glass-raised, html.rene-solid .ios-material, html.rene-solid .ios-material-thick,
html.rene-solid .ios-material-thin, html.rene-solid .rene-nav, html.rene-solid .ios-navbar, html.rene-solid .ios-tabbar {
  background: var(--rene-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- graphite-watch.css ---- */
/* ---------- the Watch-page patterns (Rene, 2026-11-01: "make everything feel that way") ----------
   Lifted from PartyStarter HQ /videos + /watch so every app shares one copy. Part of kit v2
   (build_kit.py appends this after graphite.css). Behaviour helpers: /design/rene-shelf.js
   (RS.art for generated cover art, RS.wire for shelf arrows). */

/* featured banner: full-bleed art, dark fade, big title, one tint button + one glass button.
   <section class="ios-hero"><div class="ios-art">..</div><div class="ios-hero-txt"><p class="ios-eyebrow">..</p><h1>..</h1><p>..</p><div class="ios-hero-row">..</div></div></section> */
.ios-hero { position: relative; height: min(62vh, 520px); min-height: 360px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.ios-hero > .ios-art, .ios-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ios-hero > .ios-art .ios-art-name { display: none; }
.ios-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0, rgba(0, 0, 0, .3) 48%, transparent 72%), linear-gradient(0deg, var(--rene-black) 0, transparent 38%); }
.ios-hero-txt { position: relative; z-index: 2; max-width: 560px; padding: 0 max(40px, env(safe-area-inset-left)) 44px; }
.ios-hero-txt .ios-eyebrow { font: var(--ios-cap); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-primary, var(--rene-blue)); margin-bottom: 8px; }
.ios-hero-txt h1 { font: 700 clamp(34px, 4.6vw, 56px)/1.02 var(--rene-font-display); letter-spacing: -.03em; margin-bottom: 12px; text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.ios-hero-txt p { font-size: 16px; color: rgba(245, 245, 247, .78); line-height: 1.45; margin-bottom: 22px; }
.ios-hero-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 720px) {
  .ios-hero { height: auto; min-height: 0; aspect-ratio: 4 / 3.4; margin: 0 16px; border-radius: var(--radius-lg); }
  .ios-hero::after { background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0, rgba(0, 0, 0, .2) 55%, transparent 75%); }
  .ios-hero-txt { padding: 0 18px 18px; }
  .ios-hero-txt h1 { font-size: 26px; margin-bottom: 4px; }
  .ios-hero-txt p { font-size: 13px; margin-bottom: 12px; }
}
/* the glass button that sits beside the tint button on art */
.ios-btn-glass { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 14px;
  font: var(--ios-headline); color: #fff; text-decoration: none; border: 0.5px solid rgba(255, 255, 255, .16); cursor: pointer;
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: var(--blur-regular); backdrop-filter: var(--blur-regular);
  transition: transform 180ms var(--rene-ease), filter 180ms var(--rene-ease); }
.ios-btn-glass:active { transform: scale(.97); filter: brightness(.92); }

/* sideways shelf, Apple TV style.
   <section class="ios-shelf"><h2>Title <small>12</small> <a>See all</a></h2><div class="ios-shelf-wrap"><button class="ios-arr l">..</button><div class="ios-scroller">cards</div><button class="ios-arr r">..</button></div></section> */
.ios-shelf { margin-top: 30px; }
.ios-shelf > h2 { font: var(--ios-title2); margin: 0 0 12px; padding: 0 var(--shelf-pad, 40px); display: flex; align-items: baseline; gap: 8px; }
.ios-shelf > h2 small { font: 500 15px/20px var(--rene-font); color: var(--rene-muted); }
.ios-shelf > h2 a { margin-left: auto; font: var(--ios-body); color: var(--accent-primary, var(--rene-blue)); text-decoration: none; }
.ios-shelf-wrap { position: relative; }
.ios-scroller { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--shelf-pad, 40px) 8px;
  scroll-padding: 0 var(--shelf-pad, 40px); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ios-scroller::-webkit-scrollbar { display: none; }
.ios-scroller::after { content: ""; flex: 0 0 1px; }
.ios-scroller > * { scroll-snap-align: start; }
@media (max-width: 720px) { .ios-shelf { --shelf-pad: 16px; } .ios-scroller { gap: 12px; } }
.ios-arr { position: absolute; top: calc(50% - 40px); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; z-index: 3; cursor: pointer;
  color: var(--rene-white); background: var(--mat-regular); border: 0.5px solid var(--mat-edge); box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: var(--blur-regular); backdrop-filter: var(--blur-regular); opacity: 0; transition: opacity .2s; }
.ios-arr.l { left: 14px; } .ios-arr.r { right: 14px; }
.ios-shelf-wrap:hover .ios-arr:not([disabled]) { opacity: 1; }
.ios-arr[disabled] { pointer-events: none; }
@media (hover: none) { .ios-arr { display: none; } }

/* 16:9 art card: art, title, one grey line. .ios-card-square / .ios-card-tall for other shapes. */
.ios-card { flex: 0 0 auto; width: clamp(220px, 22vw, 300px); color: var(--rene-white); display: block; text-decoration: none; border-radius: var(--radius-md);
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; }
.ios-card > .ios-art, .ios-card > img { display: block; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius-md); object-fit: cover; transition: transform var(--rene-transition-spring); }
.ios-card-square > .ios-art, .ios-card-square > img { aspect-ratio: 1; }
.ios-card-tall > .ios-art, .ios-card-tall > img { aspect-ratio: 2 / 3; }
@media (hover: hover) and (pointer: fine) { .ios-card:hover > .ios-art, .ios-card:hover > img { transform: scale(1.03); } }
.ios-card:active > .ios-art, .ios-card:active > img { transform: scale(.97); filter: brightness(.92); }
.ios-card-t { font: 600 15px/20px var(--rene-font); margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-card-s { font: var(--ios-foot); color: var(--rene-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px 18px; }
.ios-grid .ios-card { width: auto; }
@media (max-width: 720px) { .ios-card { width: 200px; } .ios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }

/* cover art. A real picture: <div class="ios-art pic"><img></div>. None: RS.art() paints a steady
   gradient from the item's id with a faint diagonal stripe and the name in bold, never an empty grey box. */
.ios-art { position: relative; overflow: hidden; background: var(--rene-surface-raised); color: #fff; }
.ios-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ios-art-name { position: absolute; left: 14px; right: 14px; bottom: 12px; font: 700 20px/1.05 var(--rene-font-display); letter-spacing: -.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ios-art.gen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(var(--sa, 115deg), rgba(255, 255, 255, .05) 0 2px, transparent 2px 14px); }
.ios-art.pic .ios-art-name { display: none; }
.ios-art-badge { position: absolute; top: 10px; left: 10px; z-index: 2; font: 700 12px/16px var(--rene-font); letter-spacing: .02em; padding: 3px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .4); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* thin progress bar on a card (Continue Watching): <span class="ios-prog"><i style="width:40%"></i></span> inside .ios-art */
.ios-prog { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .32); z-index: 2; }
.ios-prog > i { display: block; height: 100%; border-radius: 2px; background: #fff; }

/* iOS search field: <label class="ios-search"><svg>magnifier</svg><input type="search"><button>clear</button></label> */
.ios-search { flex: 1; max-width: 420px; height: 38px; border-radius: 10px; background: var(--rene-fill); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--rene-muted); }
.ios-search input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; color: var(--rene-white); min-width: 0; height: 100%; font-family: inherit; }
.ios-search input::placeholder { color: var(--rene-muted); }
.ios-search input::-webkit-search-cancel-button { display: none; }
.ios-search button { color: var(--rene-muted); display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: none; cursor: pointer; }
.ios-plain { color: var(--accent-primary, var(--rene-blue)); background: none; border: 0; font: var(--ios-body); cursor: pointer; text-decoration: none; min-height: 44px; }

/* live, glanceable state: a playing indicator <span class="ios-eq"><i></i><i></i><i></i></span> and a status pill */
.ios-eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 12px; color: var(--accent-primary, var(--rene-blue)); }
.ios-eq > i { flex: 1; background: currentColor; border-radius: 1px; animation: ios-eq 1s ease-in-out infinite; }
.ios-eq > i:nth-child(2) { animation-delay: -.35s; }
.ios-eq > i:nth-child(3) { animation-delay: -.7s; }
@keyframes ios-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.ios-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 13px/18px var(--rene-font);
  background: color-mix(in srgb, var(--accent-primary, var(--rene-blue)) 16%, transparent); color: var(--accent-primary, var(--rene-blue)); }
@media (prefers-reduced-motion: reduce) { .ios-eq > i { animation: none; height: 70%; } }
@media (prefers-reduced-transparency: reduce) {
  .ios-arr, .ios-btn-glass, .ios-art-badge { background: var(--rene-surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html.rene-solid .ios-arr, html.rene-solid .ios-btn-glass, html.rene-solid .ios-art-badge { background: var(--rene-surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }