/**
 * Emailtrol — unified design tokens (3 axes: style × family × font).
 * Maps to --jt-* / --et-* via app.css. Shared schema: contactrol_user_settings.
 */
@import url("trol-theme-core.css");
@import url("ron-burgundy-tokens.css");
:root,
html {
  color-scheme: dark;
  --et-woodgrain-oak: none;
  --et-woodgrain-honey: none;
  --et-woodgrain-walnut: none;
  --et-woodgrain-ash: none;
  --et-woodgrain-teak: none;
  --et-woodgrain-burl: none;
  --et-woodgrain-exotic: none;
  --et-woodgrain-layer: none;
  --et-wood-bezel-layer: none;
  --et-woodgrain-opacity: 0.55;
  --et-wood-bezel-opacity: 0.55;
  --et-wood-hue-rotate: -12deg;
  --et-wood-saturate: 1.14;
  --et-wood-sepia: 0.22;
  --et-wood-contrast: 1.18;
  --et-wood-filter: sepia(var(--et-wood-sepia, 0.22)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.14)) contrast(var(--et-wood-contrast, 1.18));
  --et-leather-layer: none;
  --et-leather-opacity: 1;
  --surface-base: #1c1410;
  --surface-card: linear-gradient(180deg, #251a13 0%, #1c1410 100%);
  --surface-elev: #2a1d14;
  --text-strong: #f5e9d5;
  --text: #e8d9bf;
  --text-muted: #c9ad86;
  --border: rgba(212, 165, 116, 0.18);
  --border-soft: rgba(212, 165, 116, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 220, 170, 0.06);
  --shadow-elev: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --row-hover: rgba(212, 165, 116, 0.08);
  --input-bg: rgba(0, 0, 0, 0.25);
  --surface-texture: none;
  --family: #10b981;
  --family-bright: #22c55e;
  --family-soft: color-mix(in srgb, var(--family) 14%, transparent);
  --family-on: #0a0d12;
  --font-body: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-heading: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  /* Suite lock-in: inset leather/surface mats where panels meet wood gutter (10px) */
  --trol-panel-radius: 10px;
  --et-panel-radius: var(--trol-panel-radius);
}

/* --- Axis A: surface style --- */
html[data-style="ron-burgundy"] {
  color-scheme: dark;
  --surface-base: #261a14;
  --surface-card: linear-gradient(180deg, #302218 0%, #261a14 100%);
  --surface-elev: #342418;
  --text-strong: #f5e9d5;
  --text: #e8d9bf;
  --text-muted: #c9ad86;
  --border: rgba(212, 165, 116, 0.18);
  --border-soft: rgba(212, 165, 116, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 220, 170, 0.06);
  --shadow-elev: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --row-hover: rgba(212, 165, 116, 0.08);
  --input-bg: rgba(0, 0, 0, 0.25);
  --surface-texture: var(--et-leather-layer);
  --et-leather-opacity: 1;
  --et-leather-grain-opacity: 0.62;
  --et-leather-layer:
    radial-gradient(ellipse 95% 70% at 12% 8%, color-mix(in srgb, #a07040 24%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 80% 65% at 88% 92%, color-mix(in srgb, #1a1008 14%, transparent) 0%, transparent 52%),
    radial-gradient(ellipse 55% 45% at 48% 42%, color-mix(in srgb, #4a3020 20%, transparent) 0%, transparent 68%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.18' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.055 0 0 0 0 0.04 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --et-woodgrain-teak: url("/assets/textures/wood-teak.svg");
  --et-woodgrain-burl: url("/assets/textures/wood-burl.svg");
  --et-woodgrain-exotic: url("/assets/textures/wood-exotic.svg");
  --et-woodgrain-mahogany: url("/assets/textures/wood-mahogany.svg");
  --et-woodgrain-tigerwood: url("/assets/textures/wood-tigerwood.svg");
  --et-woodgrain-walnut: url("/assets/textures/wood-walnut.svg");
  --et-woodgrain-cherry: url("/assets/textures/wood-cherry.svg");
  --et-woodgrain-rosewood: url("/assets/textures/wood-rosewood.svg");
  --et-woodgrain-oak: var(--et-woodgrain-teak);
  --et-woodgrain-honey: var(--et-woodgrain-burl);
  --et-woodgrain-ash: var(--et-woodgrain-teak);
  --et-woodgrain-layer: var(--et-woodgrain-burl);
  --et-wood-bezel-layer: var(--et-woodgrain-layer);
}

/* Ron Burgundy — burl cabinet grain by default (suite parity with species picker). */
html[data-style="ron-burgundy"][data-et-woodgrain-species="teak"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-teak);
  --et-wood-bezel-layer: var(--et-woodgrain-teak);
}

html[data-style="ron-burgundy"][data-et-woodgrain-species="burl"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-burl);
  --et-wood-bezel-layer: var(--et-woodgrain-burl);
}

html[data-style="ron-burgundy"][data-et-woodgrain-species="exotic"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-exotic);
  --et-wood-bezel-layer: var(--et-woodgrain-exotic);
}

html[data-style="ron-burgundy"][data-et-woodgrain-species="mahogany"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-mahogany);
  --et-wood-bezel-layer: var(--et-woodgrain-mahogany);
}

html[data-style="ron-burgundy"][data-et-woodgrain-species="tigerwood"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-tigerwood);
  --et-wood-bezel-layer: var(--et-woodgrain-tigerwood);
}

html[data-style="ron-burgundy"][data-et-woodgrain-species="walnut"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-walnut);
  --et-wood-bezel-layer: var(--et-woodgrain-walnut);
}

html[data-style="ron-burgundy"][data-et-woodgrain-species="cherry"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-cherry);
  --et-wood-bezel-layer: var(--et-woodgrain-cherry);
}

html[data-style="ron-burgundy"][data-et-woodgrain-species="rosewood"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-rosewood);
  --et-wood-bezel-layer: var(--et-woodgrain-rosewood);
}

html[data-style="modern-light"] {
  color-scheme: light;
  --surface-base: #f1f5f9;
  --surface-card: #ffffff;
  --surface-elev: #e8eef4;
  --text-strong: #0f172a;
  --text: #1e293b;
  --text-muted: #475569;
  --border: #cbd5e1;
  --border-soft: #e2e8f0;
  --shadow-inset: none;
  --shadow-elev: 0 1px 3px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --row-hover: rgba(15, 23, 42, 0.05);
  --input-bg: #ffffff;
  --surface-texture: none;
}

html[data-style="soft-cream"] {
  color-scheme: light;
  --surface-base: #f5efe3;
  --surface-card: #fffaf0;
  --surface-elev: #fffdf7;
  --text-strong: #2c1810;
  --text: #3d2817;
  --text-muted: #5c4a38;
  --border: #d9c9a8;
  --border-soft: #ebdfc8;
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-elev: 0 2px 8px rgba(60, 40, 20, 0.06);
  --row-hover: rgba(140, 115, 85, 0.06);
  --input-bg: #fffaf0;
  --surface-texture: none;
}

/* Royal Cream — leather flat surfaces, veneer wood bezels only */
html[data-style="royal-cream"] {
  color-scheme: dark;
  --surface-base: #322a22;
  --surface-card: linear-gradient(180deg, #443c32 0%, #322a22 100%);
  --surface-elev: #4e463a;
  --text-strong: #faf5e8;
  --text: #ede2cc;
  --text-muted: #d4c4a8;
  --border: rgba(139, 108, 72, 0.32);
  --border-soft: rgba(139, 108, 72, 0.2);
  --shadow-inset: inset 0 1px 0 rgba(255, 235, 200, 0.08);
  --shadow-elev: 0 4px 18px rgba(20, 14, 8, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --row-hover: rgba(180, 145, 100, 0.1);
  --input-bg: rgba(0, 0, 0, 0.18);
  --surface-texture: var(--et-leather-layer);
  --et-leather-opacity: 1;
  --et-leather-grain-opacity: 0.58;
  --et-leather-layer:
    radial-gradient(ellipse 100% 75% at 14% 10%, color-mix(in srgb, #a88858 16%, transparent) 0%, transparent 56%),
    radial-gradient(ellipse 85% 70% at 86% 90%, color-mix(in srgb, #1e140c 18%, transparent) 0%, transparent 54%),
    radial-gradient(ellipse 50% 40% at 50% 48%, color-mix(in srgb, #4a3a2a 12%, transparent) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.14' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --et-woodgrain-teak: url("/assets/textures/wood-teak.svg");
  --et-woodgrain-burl: url("/assets/textures/wood-burl.svg");
  --et-woodgrain-exotic: url("/assets/textures/wood-exotic.svg");
  --et-woodgrain-mahogany: url("/assets/textures/wood-mahogany.svg");
  --et-woodgrain-tigerwood: url("/assets/textures/wood-tigerwood.svg");
  --et-woodgrain-walnut: url("/assets/textures/wood-walnut.svg");
  --et-woodgrain-cherry: url("/assets/textures/wood-cherry.svg");
  --et-woodgrain-rosewood: url("/assets/textures/wood-rosewood.svg");
  --et-woodgrain-layer: var(--et-woodgrain-teak);
  --et-wood-bezel-layer: var(--et-woodgrain-layer);
}

html[data-style="royal-cream"][data-et-woodgrain-species="burl"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-burl);
  --et-wood-bezel-layer: var(--et-woodgrain-burl);
}

html[data-style="royal-cream"][data-et-woodgrain-species="exotic"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-exotic);
  --et-wood-bezel-layer: var(--et-woodgrain-exotic);
}

html[data-style="royal-cream"][data-et-woodgrain-species="mahogany"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-mahogany);
  --et-wood-bezel-layer: var(--et-woodgrain-mahogany);
}

html[data-style="royal-cream"][data-et-woodgrain-species="tigerwood"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-tigerwood);
  --et-wood-bezel-layer: var(--et-woodgrain-tigerwood);
}

html[data-style="royal-cream"][data-et-woodgrain-species="walnut"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-walnut);
  --et-wood-bezel-layer: var(--et-woodgrain-walnut);
}

html[data-style="royal-cream"][data-et-woodgrain-species="cherry"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-cherry);
  --et-wood-bezel-layer: var(--et-woodgrain-cherry);
}

html[data-style="royal-cream"][data-et-woodgrain-species="rosewood"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-rosewood);
  --et-wood-bezel-layer: var(--et-woodgrain-rosewood);
}

html[data-style="royal-cream"][data-family="amber"]:not([data-ui-theme])[data-et-woodgrain-species="teak"] {
  --et-woodgrain-layer: var(--et-woodgrain-burl);
  --et-wood-bezel-layer: var(--et-woodgrain-burl);
}

html[data-style="royal-cream"][data-family="purple"]:not([data-ui-theme])[data-et-woodgrain-species="teak"] {
  --et-woodgrain-layer: var(--et-woodgrain-exotic);
  --et-wood-bezel-layer: var(--et-woodgrain-exotic);
}

html[data-style="royal-cream"][data-family="blue"]:not([data-ui-theme])[data-et-woodgrain-species="teak"] {
  --et-woodgrain-layer: var(--et-woodgrain-exotic);
  --et-wood-bezel-layer: var(--et-woodgrain-exotic);
}

html[data-style="midnight"] {
  color-scheme: dark;
  --surface-base: #000000;
  --surface-card: #0a0a0a;
  --surface-elev: #141414;
  --text-strong: #fafafa;
  --text: #e5e5e5;
  --text-muted: #a3a3a3;
  --border: rgba(255, 255, 255, 0.1);
  --border-soft: rgba(255, 255, 255, 0.07);
  --shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-elev: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 14px color-mix(in srgb, var(--family) 28%, transparent);
  --row-hover: rgba(255, 255, 255, 0.04);
  --input-bg: #0a0a0a;
  --surface-texture: none;
}

html[data-style="slate"] {
  color-scheme: dark;
  --surface-base: #0f172a;
  --surface-card: #1e293b;
  --surface-elev: #334155;
  --text-strong: #f8fafc;
  --text: #cbd5e1;
  --text-muted: #b6c2d1;
  --border: rgba(148, 163, 184, 0.22);
  --border-soft: rgba(148, 163, 184, 0.12);
  --shadow-inset: none;
  --shadow-elev: 0 4px 12px rgba(0, 0, 0, 0.3);
  --row-hover: rgba(148, 163, 184, 0.08);
  --input-bg: #0f172a;
  --surface-texture: none;
}

/* Stone desk themes — speckled granite / veined marble / galaxy flecks */
html[data-style="polished-granite"] {
  color-scheme: light;
  --surface-base: #c5cad2;
  --surface-card: linear-gradient(168deg, #d8dde4 0%, #bcc3cc 48%, #b0b8c2 100%);
  --surface-elev: #b4bcc6;
  --text-strong: #1a2332;
  --text: #2d3748;
  --text-muted: #5a6578;
  --border: rgba(80, 95, 115, 0.24);
  --border-soft: rgba(80, 95, 115, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --shadow-elev: 0 2px 10px rgba(45, 55, 72, 0.12), 0 0 0 1px rgba(45, 55, 72, 0.06);
  --row-hover: rgba(45, 55, 72, 0.06);
  --input-bg: #e8ecf0;
  --et-stone-tile-size: 128px;
  --et-stone-granite: url("/assets/textures/stone-granite.svg");
  --et-stone-layer:
    radial-gradient(ellipse 120% 80% at 18% 12%, color-mix(in srgb, #fff 38%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 82% 88%, color-mix(in srgb, #6b7a8c 18%, transparent) 0%, transparent 52%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.48 0 0 0 0 0.52 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"),
    var(--et-stone-granite);
  --surface-texture: var(--et-stone-layer);
}

html[data-style="carrara-marble"] {
  color-scheme: light;
  --surface-base: #f2f0eb;
  --surface-card: linear-gradient(175deg, #faf8f4 0%, #f0ece6 52%, #e8e4dc 100%);
  --surface-elev: #fffdf9;
  --text-strong: #2a2824;
  --text: #3d3a36;
  --text-muted: #6b6560;
  --border: rgba(120, 115, 108, 0.22);
  --border-soft: rgba(120, 115, 108, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-elev: 0 2px 12px rgba(60, 55, 50, 0.08), 0 0 0 1px rgba(60, 55, 50, 0.04);
  --row-hover: rgba(90, 85, 78, 0.05);
  --input-bg: #fffdf9;
  --et-stone-tile-size: 140px;
  --et-stone-marble: url("/assets/textures/stone-marble.svg");
  --et-stone-layer:
    linear-gradient(118deg, transparent 32%, color-mix(in srgb, #9a9590 22%, transparent) 46%, transparent 58%),
    linear-gradient(72deg, transparent 38%, color-mix(in srgb, #b8b4ae 16%, transparent) 50%, transparent 64%),
    linear-gradient(165deg, transparent 55%, color-mix(in srgb, #8a8680 12%, transparent) 62%, transparent 72%),
    var(--et-stone-marble);
  --surface-texture: var(--et-stone-layer);
}

html[data-style="black-galaxy"] {
  color-scheme: dark;
  --surface-base: #12100e;
  --surface-card: linear-gradient(165deg, #1e1a16 0%, #12100e 55%, #0a0908 100%);
  --surface-elev: #242018;
  --text-strong: #f5ecd8;
  --text: #e0d4bc;
  --text-muted: #a89880;
  --border: rgba(212, 175, 95, 0.2);
  --border-soft: rgba(212, 175, 95, 0.1);
  --shadow-inset: inset 0 1px 0 rgba(255, 220, 160, 0.06);
  --shadow-elev: 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 12px color-mix(in srgb, var(--family) 22%, transparent);
  --row-hover: rgba(212, 175, 95, 0.08);
  --input-bg: #0e0c0a;
  --et-stone-tile-size: 120px;
  --et-stone-galaxy: url("/assets/textures/stone-galaxy.svg");
  --et-stone-layer:
    radial-gradient(ellipse 70% 55% at 22% 18%, color-mix(in srgb, #d4af37 26%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 78% 72%, color-mix(in srgb, #8a7048 14%, transparent) 0%, transparent 52%),
    radial-gradient(ellipse 40% 35% at 55% 40%, color-mix(in srgb, #c9a227 8%, transparent) 0%, transparent 48%),
    var(--et-stone-galaxy);
  --surface-texture: var(--et-stone-layer);
}

/* --- Axis B: brand family (style themes only — classic palettes use theme-palettes.css) --- */
html[data-family="green"]:not([data-ui-theme]) {
  --family: #0c8a62;
  --family-bright: #10966a;
  --family-soft: color-mix(in srgb, #0c8a62 14%, transparent);
  --family-on: #0a0d12;
}

html[data-family="amber"]:not([data-ui-theme]) {
  --family: #e06810;
  --family-bright: #f07828;
  --family-soft: color-mix(in srgb, #e06810 14%, transparent);
  --family-on: #0a0d12;
}

html[data-family="purple"]:not([data-ui-theme]) {
  --family: #9333ea;
  --family-bright: #a855f7;
  --family-soft: color-mix(in srgb, #9333ea 14%, transparent);
  --family-on: #0a0d12;
}

html[data-family="blue"]:not([data-ui-theme]) {
  --family: #2563eb;
  --family-bright: #3b82f6;
  --family-soft: color-mix(in srgb, #2563eb 14%, transparent);
  --family-on: #0a0d12;
}

/* Re-sync accent when family axis changes (app.css --et-accent reads --jt-accent). */
html[data-family]:not([data-ui-theme]) {
  --jt-accent: var(--family);
  --jt-accent-hover: var(--family-bright);
  --jt-link: var(--family-bright);
  --jt-link-hover: color-mix(in srgb, var(--family-bright) 82%, #fff);
  --ct-accent: var(--family);
  --ct-primary: var(--family);
  --lux-gold: var(--family);
  --lux-gold-foil: var(--family-bright);
  --etx-primary: var(--family);
}

/* --- Axis C: typography --- */
html[data-font="system"] {
  --font-body: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-heading: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

html[data-font="inter"] {
  --font-body: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

html[data-font="playfair-lora"] {
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
}

html[data-font="oswald"] {
  --font-heading: "Oswald", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

html[data-font="roboto"] {
  --font-heading: "Roboto", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-body: "Roboto", -apple-system, system-ui, "Segoe UI", sans-serif;
}
html[data-font="open-sans"] {
  --font-heading: "Open Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-body: "Open Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
}
html[data-font="poppins"] {
  --font-heading: "Poppins", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-body: "Poppins", -apple-system, system-ui, "Segoe UI", sans-serif;
}
html[data-font="montserrat"] {
  --font-heading: "Montserrat", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-body: "Montserrat", -apple-system, system-ui, "Segoe UI", sans-serif;
}
html[data-font="lato"] {
  --font-heading: "Lato", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-body: "Lato", -apple-system, system-ui, "Segoe UI", sans-serif;
}
html[data-font="nunito-sans"] {
  --font-heading: "Nunito Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-body: "Nunito Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
}

/* --- Apply tokens to page chrome --- */
body {
  font-family: var(--font-body);
  background-color: var(--et-bg, var(--ct-bg, var(--surface-base)));
}

/* Ron Burgundy + Royal Cream — leather flat surfaces, wood veneer bezels only */
html[data-style="ron-burgundy"],
html[data-style="royal-cream"] {
  /* normal = undeniably visible on dark leather; sliders still tune opacity/hue */
  --et-woodgrain-blend: normal;
}

/* Bezel grain + tint. Adopted Contactrol's exact wood filter values 2026-05-26 — user
   confirmed Contactrol's wood reads right, so milder sepia (0.24) + smaller hue-rotate
   (-12deg) + higher saturation (1.24) gives the rich mahogany look. Earlier Emailtrol-only
   values (sepia 0.32, hue-rotate -18deg) were too aggressive and pushed amber to orange. */
html[data-style="ron-burgundy"]:not([data-ui-theme]) {
  --et-wood-bezel-opacity: 0.72;
  --et-woodgrain-opacity: var(--et-wood-bezel-opacity);
  --et-wood-hue-rotate: -12deg;
  --et-wood-saturate: 1.24;
  --et-wood-sepia: 0.24;
  --et-wood-contrast: 1.18;
  --et-wood-filter: sepia(var(--et-wood-sepia, 0.24)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.24)) contrast(var(--et-wood-contrast, 1.18));
  --et-wood-bezel-h: 22px;
  --et-wood-top-trim: var(--et-wood-bezel-h);
  --et-wood-right-trim: var(--et-wood-bezel-h);
  --et-wood-gutter-w: var(--et-wood-bezel-h);
  --et-wood-folder-gutter-w: var(--et-wood-bezel-h);
  --et-reader-leather-bg: color-mix(in srgb, #2e1c12 46%, var(--surface-base, #261a14));
  /* Cabinet base matches Contactrol's value — near-black with a touch of the surface base.
     This pairs with the milder filter above (sepia 0.24 + hue-rotate -12deg) to read as
     rich mahogany the way Contactrol's wood does. */
  --et-wood-cabinet-base: color-mix(in srgb, #0e0804 90%, var(--surface-base, #120c08));
  --et-wood-cabinet-edge: color-mix(in srgb, #080504 62%, var(--family-bright, #c4a574));
  --et-wood-mat-inset: inset 0 4px 22px rgba(0, 0, 0, 0.54), inset 0 1px 3px rgba(0, 0, 0, 0.34), inset 0 0 0 1px color-mix(in srgb, var(--family-bright, #c4a574) 12%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 3%, transparent);
}

/* Royal Cream — warm teak/chocolate bezels (negative hue; never greenward) */
html[data-style="royal-cream"]:not([data-ui-theme]) {
  --et-wood-bezel-opacity: 0.75;
  --et-woodgrain-opacity: var(--et-wood-bezel-opacity);
  --et-wood-hue-rotate: -12deg;
  --et-wood-saturate: 1.22;
  --et-wood-sepia: 0.28;
  --et-wood-contrast: 1.16;
  --et-wood-filter: sepia(var(--et-wood-sepia, 0.28)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.22)) contrast(var(--et-wood-contrast, 1.16));
  --et-wood-bezel-h: 22px;
  --et-wood-top-trim: var(--et-wood-bezel-h);
  --et-wood-right-trim: var(--et-wood-bezel-h);
  --et-wood-gutter-w: var(--et-wood-bezel-h);
  --et-wood-folder-gutter-w: var(--et-wood-bezel-h);
  --et-reader-leather-bg: color-mix(in srgb, #2a1e14 68%, var(--surface-base, #322a22));
  --et-wood-cabinet-base: color-mix(in srgb, #5c4428 76%, var(--surface-base, #322a22));
  --et-wood-cabinet-edge: color-mix(in srgb, #3a2814 48%, var(--family-bright, #c4a574));
  --et-wood-mat-inset: inset 0 3px 16px rgba(0, 0, 0, 0.46), inset 0 0 0 1px color-mix(in srgb, var(--family-bright, #c4a574) 14%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}

/* Legacy pill fallback before JS hydrates */
html[data-style="ron-burgundy"][data-et-woodgrain-intensity="low"]:not([data-et-woodgrain-amount]) {
  --et-woodgrain-opacity: 0.38;
  --et-wood-bezel-opacity: 0.38;
}

html[data-style="ron-burgundy"][data-et-woodgrain-intensity="medium"]:not([data-et-woodgrain-amount]) {
  --et-woodgrain-opacity: 0.72;
  --et-wood-bezel-opacity: 0.72;
}

html[data-style="ron-burgundy"][data-et-woodgrain-intensity="rich"]:not([data-et-woodgrain-amount]) {
  --et-woodgrain-opacity: 0.7;
  --et-wood-bezel-opacity: 0.7;
}

html[data-style="royal-cream"][data-et-woodgrain-intensity="low"]:not([data-et-woodgrain-amount]) {
  --et-woodgrain-opacity: 0.42;
  --et-wood-bezel-opacity: 0.42;
}

html[data-style="royal-cream"][data-et-woodgrain-intensity="medium"]:not([data-et-woodgrain-amount]) {
  --et-woodgrain-opacity: 0.75;
  --et-wood-bezel-opacity: 0.75;
}

html[data-style="royal-cream"][data-et-woodgrain-intensity="rich"]:not([data-et-woodgrain-amount]) {
  --et-woodgrain-opacity: 0.76;
  --et-wood-bezel-opacity: 0.76;
}

/* --- Mail dash shell — Contactrol v54 .ctx-shell parity (Ron / Royal only) --- */
html[data-style="ron-burgundy"]:not([data-ui-theme]),
html[data-style="royal-cream"]:not([data-ui-theme]) {
  --et-shell-inset-pad: 16px;
  /* Leather mat inset (panels) vs wood cabinet bezel (shell padding) — do not collapse Y bezel to 0.48rem */
  --et-panel-mat-inset: 0.48rem;
  /* Equalize wood trim on all sides — X and Y both track bezel-h so the cabinet frame is square */
  --et-shell-inset-pad-y: var(--et-wood-bezel-h, 22px);
  --et-shell-inset-pad-x: var(--et-wood-bezel-h, 22px);
  --et-shell-panel-inset-shadow: var(--et-wood-mat-inset, inset 0 2px 12px rgba(0, 0, 0, 0.38));
}

/* Cmdbar tall enough to fit 32px buttons with breathing room. The earlier 22px (=wood bezel)
   squished the buttons against the wood and left a visible sliver between the panels and
   the bar. Shell padding-bottom auto-follows --et-cmdbar-h. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]),
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) {
  --et-cmdbar-h: 48px;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body {
  background-color: var(--et-wood-cabinet-base, var(--surface-base));
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-folders-panel {
  position: relative;
  isolation: isolate;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-folders-panel,
/* 2026-05-27: dropped the brass border + inset wood-mat shadow from .et-messages-panel
   in ron-burgundy / royal-cream. User wants the floating island rows to sit on bare
   wood with NO frame/rim/shadow around the panel area. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-mail-main .et-messages-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-mail-main .et-messages-panel {
  border: 0;
  box-shadow: none;
  z-index: 1;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel {
  border-right: none;
  box-shadow: none;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel::after,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel::after,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel::after,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel::after {
  content: none;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel > *,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel > *,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel > *,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel > * {
  position: relative;
  z-index: 1;
}

/* Stone desk — flat stone mats on mail chrome (no wood gutters / bezels) */
html[data-et-app="mail"][data-style="polished-granite"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="polished-granite"]:not([data-ui-theme]) .et-mail-main .et-messages-panel,
html[data-et-app="mail"][data-style="carrara-marble"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="carrara-marble"]:not([data-ui-theme]) .et-mail-main .et-messages-panel,
html[data-et-app="mail"][data-style="black-galaxy"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="black-galaxy"]:not([data-ui-theme]) .et-mail-main .et-messages-panel {
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px));
}

html[data-et-app="mail"][data-style="polished-granite"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="polished-granite"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="polished-granite"]:not([data-ui-theme]) .et-folders-panel #et-folders.et-stub-list,
html[data-et-app="mail"][data-style="polished-granite"]:not([data-ui-theme]) .et-messages-panel,
html[data-et-app="mail"][data-style="polished-granite"]:not([data-ui-theme]) .et-messages-panel #et-messages.et-stub-list,
html[data-et-app="mail"][data-style="carrara-marble"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="carrara-marble"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="carrara-marble"]:not([data-ui-theme]) .et-folders-panel #et-folders.et-stub-list,
html[data-et-app="mail"][data-style="carrara-marble"]:not([data-ui-theme]) .et-messages-panel,
html[data-et-app="mail"][data-style="carrara-marble"]:not([data-ui-theme]) .et-messages-panel #et-messages.et-stub-list,
html[data-et-app="mail"][data-style="black-galaxy"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="black-galaxy"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="black-galaxy"]:not([data-ui-theme]) .et-folders-panel #et-folders.et-stub-list,
html[data-et-app="mail"][data-style="black-galaxy"]:not([data-ui-theme]) .et-messages-panel,
html[data-et-app="mail"][data-style="black-galaxy"]:not([data-ui-theme]) .et-messages-panel #et-messages.et-stub-list {
  background-color: var(--jt-bg-sidebar, var(--surface-base));
  background-image: var(--surface-texture, none);
  background-repeat: no-repeat, repeat;
  background-size: cover, var(--et-stone-tile-size, 140px) var(--et-stone-tile-size, 140px);
  background-blend-mode: soft-light, multiply;
}

html[data-et-app="mail"][data-style="polished-granite"]:not([data-ui-theme]) .et-messages-panel,
html[data-et-app="mail"][data-style="polished-granite"]:not([data-ui-theme]) .et-messages-panel #et-messages.et-stub-list,
html[data-et-app="mail"][data-style="carrara-marble"]:not([data-ui-theme]) .et-messages-panel,
html[data-et-app="mail"][data-style="carrara-marble"]:not([data-ui-theme]) .et-messages-panel #et-messages.et-stub-list,
html[data-et-app="mail"][data-style="black-galaxy"]:not([data-ui-theme]) .et-messages-panel,
html[data-et-app="mail"][data-style="black-galaxy"]:not([data-ui-theme]) .et-messages-panel #et-messages.et-stub-list {
  background-color: var(--et-list-bg, var(--jt-list-bg, var(--surface-elev)));
}

html[data-et-app="mail"][data-style="polished-granite"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage,
html[data-et-app="mail"][data-style="carrara-marble"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage {
  background-color: var(--jt-reader-bg, var(--surface-elev));
  background-image: var(--surface-texture, none);
  background-repeat: no-repeat, repeat;
  background-size: cover, var(--et-stone-tile-size, 140px) var(--et-stone-tile-size, 140px);
  background-blend-mode: soft-light, multiply;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px));
  margin: 0.25rem 0.55rem 0.55rem;
  padding: 0.45rem 0.5rem 0.55rem;
  box-shadow: var(--shadow-elev);
}

html[data-et-app="mail"][data-style="black-galaxy"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage {
  background-color: color-mix(in srgb, #1e1a16 88%, var(--surface-base));
  background-image: var(--surface-texture, none);
  background-repeat: no-repeat, repeat;
  background-size: cover, var(--et-stone-tile-size, 120px) var(--et-stone-tile-size, 120px);
  background-blend-mode: overlay, normal;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px));
  margin: 0.25rem 0.55rem 0.55rem;
  padding: 0.45rem 0.5rem 0.55rem;
  box-shadow: var(--shadow-elev);
}

/* Mail TV-cabinet — rounded inset mats where leather meets wood gutters (Contactrol --ctx-panel-radius parity) */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-mail-main .et-messages-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-mail-main .et-messages-panel {
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px));
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell {
  padding: var(--et-shell-inset-pad-y, var(--et-shell-inset-pad, 16px)) var(--et-shell-inset-pad-x, var(--et-shell-inset-pad, 16px)) !important;
  border-radius: calc(var(--et-panel-radius, var(--trol-panel-radius, 10px)) + 2px);
  overflow: visible;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--family-bright, #c4a574) 12%, transparent),
    inset 0 3px 14px rgba(0, 0, 0, 0.35);
}

/* Wood cabinet — grain on shell + mail-main (gutters); leather panels stay opaque on top.
   2026-05-27: Removed #et-mail-main from this rule. mail-main had isolation:isolate +
   z-index:1, which created a new compositing layer. The shell's ::before wood pseudo
   (background-attachment: fixed + opacity 0.72) renders DIFFERENTLY when sampled through
   an isolated layer than outside one — the composited layer shows the wood at slightly
   darker effective intensity. THAT was the panel-shaped halo the user kept calling out.
   mail-main no longer has its own wood pseudo (killed in v45/v46), so it doesn't need
   its own stacking context anyway. Shell keeps isolation. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell {
  position: relative;
  isolation: isolate;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell > .et-folders-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell > .et-folders-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell > .et-folder-split,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell > .et-folder-split {
  position: relative;
  z-index: 1;
}
/* Belt-and-suspenders: force mail-main to NOT create its own stacking context. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main {
  isolation: auto !important;
  z-index: auto !important;
  position: relative;
}

/* 2026-05-27: Strip the leather overlay from folders + reader panels so they
   show the shell wood through, matching the column splitters (which are the
   only zones that show bare wood). User feedback: "everything else has that
   darker overlay, it's even above the reader pane". Folders + reader had
   4-layer radial-gradient leather + dark mat bg + isolation:isolate. All
   nuked so wood is consistent across the whole shell. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel #et-folders.et-stub-list,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel #et-folders.et-stub-list {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  isolation: auto !important;
  z-index: auto !important;
}

/* 2026-05-27 v50: Match contactrol's column adjuster recipe. Contactrol uses
   .ctx-resize-handle with background-color:transparent — the shell ::before wood
   shows through. Emailtrol's splitters were painting their OWN wood image at
   opacity 0.72, which doubled up wood vs the panels (compound effect = splitters
   read brighter/warmer than panels). User wants the contactrol model: one source
   of wood (the shell ::before), nothing else paints over it. Splitters become
   transparent passthrough, panels are transparent passthrough — perfectly uniform.
   Hover/focus accent strip on ::before still works as a thin column-resize hint. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split {
  background-color: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split::before {
  background-color: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  box-shadow: none !important;
}
/* Keep the contactrol-style hover/focus accent strip — thin brass line so the
   user can still see and grab the resize handle. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split:hover::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split:focus-visible::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split:hover::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split:focus-visible::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split:hover::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split:focus-visible::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split:hover::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split:focus-visible::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 3px !important;
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  background-color: color-mix(in srgb, var(--family-bright, #c4a574) 55%, transparent) !important;
  background-image: none !important;
  box-shadow: 0 0 6px color-mix(in srgb, var(--family-bright, #c4a574) 38%, transparent) !important;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-shell.et-mail-shell,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-shell.et-mail-shell {
  padding: 14px !important;
  border-radius: calc(var(--et-panel-radius, var(--trol-panel-radius, 10px)) + 2px);
  background-color: var(--surface-base);
  background-image: var(--et-leather-layer, none);
  background-repeat: no-repeat, repeat;
  background-size: cover, 256px 256px;
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.28);
}

/* Leather — toolbar + folder panel + list interiors. The messages-panel was
   pulled OUT of this group 2026-05-27 so floating island rows sit on bare wood
   with no mat / no chip outline / no leather wrap at all. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-folders-panel #et-folders.et-stub-list,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-folders-panel #et-folders.et-stub-list {
  background-image: var(--et-leather-layer, none);
  background-repeat: no-repeat, repeat;
  background-size: cover, 256px 256px;
  background-blend-mode: overlay, normal;
  opacity: 1;
}

/* Belt-and-suspenders: kill EVERY frame-like decoration on the messages panel
   and its header — no border, no hairline, no mat, no chip outline. The user
   wants the messages list to be bare wood + floating island rows, nothing else. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-mail-main .et-messages-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-mail-main .et-messages-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-messages-panel #et-messages.et-stub-list,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-messages-panel #et-messages.et-stub-list,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-messages-panel > h2,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-messages-panel > h2,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-messages-panel .et-msgs-panel-head,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-messages-panel .et-msgs-panel-head {
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-messages-panel::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-messages-panel::after,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-messages-panel::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-messages-panel::after,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-mail-main.et-mail-main::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-mail-main.et-mail-main::before {
  content: none !important;
  display: none !important;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-folders-panel #et-folders.et-stub-list,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-folders-panel #et-folders.et-stub-list {
  background-color: var(--jt-bg-sidebar, var(--surface-base));
}

/* The "million dollar" effect (2026-05-26): leather row cards float on the shell wood —
   panel + list backgrounds go fully transparent so the wood ::before pseudo behind them
   peeks through the gaps between rows as the user scrolls. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list {
  background-color: transparent !important;
  background-image: none !important;
}

/* The ISLAND (2026-05-27, named by Ed): each mail row floats on the wood as its own leather
   card, framed by a real metallic brass border, anchored by a soft bottom-right drop shadow
   so each island looks like it's casting light from the upper-left. Deeper leather BG, no
   inset hairline (replaced by the real border), no heavy all-around shadow.
   #et-messages added to match specificity of rule at line 714 (background-image: none). */
/* 2026-05-27: Unified "luxury leather" island recipe shared by emailtrol mail rows
   and contactrol contact rows. Warmer base (#1f1410 vs old pure #0e0806) lifted to
   50% mix lets the leather gradient/noise layer read clearly. Soft-light blend pops
   the leather texture vs. the previous all-multiply darkening. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list li.et-msg-row,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list li.et-msg-row {
  background-color: color-mix(in srgb, #1f1410 50%, var(--et-list-bg, var(--et-panel-bg-b))) !important;
  background-image: var(--et-leather-layer, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: cover, 256px 256px !important;
  background-blend-mode: soft-light, normal !important;
  margin: 0 6px 10px !important;
  padding: 0.42rem 0.55rem 0.42rem 0.6rem !important;
  border-radius: 8px !important;
  border: none !important;
  /* 2026-05-28 v68: proper "hovering above wood" drop shadow stack — 3 layers,
     light source upper-left so shadow falls bottom-right. Form (close+tight)
     defines the edge; Mid spreads the silhouette; Ambient is the far soft halo
     (large negative spread keeps it tight on top so it doesn't pool above
     adjacent rows). Inset highlight on top simulates sunlight catching the
     leather edge. */
  box-shadow:
    3px 4px 6px -1px rgba(0, 0, 0, 0.36),
    6px 9px 14px -3px rgba(0, 0, 0, 0.28),
    12px 18px 28px -8px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent) !important;
}

/* Selected island — brass HIGHLIGHT RING via box-shadow (no border, keeps the "no encasement"
   look the user wants on unselected islands). Glow makes it unmistakable which one is open. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list li.et-msg-row.et-active,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list li.et-msg-row.et-active {
  border: none !important;
  padding-left: 0.6rem !important;
  /* Active row: same 3-layer hover stack PLUS brass highlight ring + glow */
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--family-bright, #c4a574) 80%, transparent),
    0 0 22px color-mix(in srgb, var(--family-bright, #c4a574) 42%, transparent),
    3px 4px 6px -1px rgba(0, 0, 0, 0.36),
    6px 9px 14px -3px rgba(0, 0, 0, 0.28),
    12px 18px 28px -8px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent) !important;
}

/* Drop the brass metallic divider — the transparent margin gap IS the divider now,
   and the shell wood underneath provides the contrast. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel .et-stub-list li.et-msg-row::after,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel .et-stub-list li.et-msg-row::after {
  content: none !important;
}

/* Other woodgrain themes keep the original solid panel background */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-messages-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-messages-panel #et-messages.et-stub-list,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-messages-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-messages-panel #et-messages.et-stub-list {
  background-color: var(--et-list-bg, var(--et-panel-bg-b));
}

/* Reader stage = dark leather reading mat (white paper card on content-host below) */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage {
  background-color: var(--et-reader-leather-bg, color-mix(in srgb, #0e0806 72%, var(--surface-base)));
  background-image: var(--et-leather-layer, none);
  background-repeat: no-repeat, repeat;
  background-size: cover, 256px 256px;
  background-blend-mode: overlay, normal;
  margin: 0.25rem 0.55rem 0.55rem;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px));
  padding: 0.45rem 0.5rem 0.55rem;
  overflow: hidden;
  box-shadow: var(--et-wood-mat-inset, inset 0 2px 12px rgba(0, 0, 0, 0.38));
  --et-reader-body-pad-y: 1.5rem;
  --et-reader-body-pad-x: 2rem;
  --et-reader-body-pad-b: 1.75rem;
  --et-reader-mat-y: 1rem;
  --et-reader-mat-x: 1.1rem;
}

/* Rows — no per-row wood tile; inherit panel leather */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-messages-panel #et-messages.et-stub-list li.et-msg-row,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-folders-panel #et-folders.et-stub-list li.et-folder-row,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-messages-panel #et-messages.et-stub-list li.et-msg-row,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-folders-panel #et-folders.et-stub-list li.et-folder-row {
  background-image: none;
  background-blend-mode: normal;
}

/* Formal desk — leather reader shell. Top wood trim removed so reader leather aligns with messages-list leather top (user feedback 2026-05-26). */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-panel {
  position: relative;
  isolation: isolate;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px));
  background-color: var(--et-reader-leather-bg, color-mix(in srgb, #0e0806 72%, var(--surface-base)));
  background-image: var(--et-leather-layer, none);
  background-repeat: no-repeat, repeat;
  background-size: cover, 256px 256px;
  background-blend-mode: overlay, normal;
  padding-top: 0;
  padding-right: 0;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--family-bright, #c4a574) 10%, transparent);
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel {
  background-clip: content-box;
  box-shadow: var(--et-wood-mat-inset);
}

/* Reader-panel top wood trim removed so the reader leather aligns with messages-list leather (user feedback 2026-05-26). */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel::before {
  content: none;
}

/* Reader-panel right wood trim removed for the same reason — reader is now pure leather with rounded corners, matching the messages list. The shell padding handles the cabinet frame on the outside. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel::after,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel::after {
  content: none;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-reader-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-reader-panel {
  padding-top: 0;
  padding-right: 0;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-statusrail,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-statusrail {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background-color: var(--jt-bg-topbar, var(--et-surface, var(--surface-base)));
  background-image: var(--et-leather-layer, none);
  background-repeat: no-repeat, repeat;
  background-size: cover, 256px 256px;
  background-blend-mode: overlay, normal;
  border-bottom-color: color-mix(in srgb, var(--family-bright, #c4a574) 28%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--family-bright, #c4a574) 18%, transparent);
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-statusrail::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-statusrail::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-statusrail::after,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-statusrail::after {
  content: none;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-statusrail > *,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-statusrail > * {
  position: relative;
  z-index: 2;
}

/* Status rail + account toolbar = leather only (no wood trim; wood stays on mail shell gutters) */

/* Reader chrome on leather mat (meta + toolbar below wood top trim) */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-chrome,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-chrome {
  position: relative;
  z-index: 4;
  margin: 0.3rem 0.55rem 0.22rem;
  padding: 0.35rem 0.5rem 0.42rem;
  border-radius: calc(var(--et-panel-radius, var(--trol-panel-radius, 10px)) - 2px);
  background: transparent;
  box-shadow: none;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-chrome > *,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-chrome > * {
  position: relative;
  z-index: 1;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-chrome::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-chrome::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-chrome::after,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-chrome::after {
  content: none;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-meta-compact,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-meta-compact,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-toolbar-compact,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-toolbar-compact {
  background: color-mix(in srgb, var(--et-reader-leather-bg, var(--surface-base)) 88%, #000);
  border: 1px solid color-mix(in srgb, var(--family-bright, #c4a574) 14%, transparent);
}

/* Inter-panel wood gutters — folder | messages (12px) + messages | reader (22px) */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell:has(> .et-folder-split),
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell:has(> .et-folder-split) {
  grid-template-columns: var(--et-folder-col-w, minmax(140px, 200px)) var(--et-wood-folder-gutter-w, 12px) minmax(0, 1fr) !important;
}

/* Cabinet base — outer .et-shell only. #et-mail-main was previously included here,
   which painted ITS OWN dark mahogany background + inset brass 1px rim + inset
   shadow inside the shell — that's what created the "frame" inside the shell that
   the user kept pointing at. Removed mail-main from this group; the shell's wood
   pseudo already covers the mail-main area. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell {
  background-color: var(--et-wood-cabinet-base, color-mix(in srgb, #0e0804 90%, var(--surface-base)));
  /* Wood image moved to ::before so filter can apply without tinting leather children */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--family-bright, #c4a574) 10%, transparent),
    inset 0 2px 12px rgba(0, 0, 0, 0.42);
}

/* Belt-and-suspenders: force mail-main transparent + no frame so the shell wood
   shows through cleanly. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Shell wood pseudo — opacity 0.72 (via --et-wood-bezel-opacity) is what mixes the wood image down into the dark cabinet base so the wood reads as mahogany. Opacity 1 was the "too orange" bug.
   2026-05-27: Removed #et-mail-main.et-mail-main::before from this group — it was painting a SECOND wood layer on top of the shell pseudo (both at 72% opacity), which is what created the "darker inside the panel area than outside" frame illusion the user kept calling out. Shell wood already covers the whole mail-main area. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-color: var(--et-wood-cabinet-base, color-mix(in srgb, #0e0804 90%, var(--surface-base)));
  background-image: var(--et-wood-bezel-layer, var(--et-woodgrain-layer));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: var(--et-wood-bezel-opacity, var(--et-woodgrain-opacity, 0.72));
  filter: var(--et-wood-filter, sepia(var(--et-wood-sepia, 0.24)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.24)) contrast(var(--et-wood-contrast, 1.18)));
  mix-blend-mode: var(--et-woodgrain-blend, normal);
}

/* Leather panel children must sit ABOVE the shell wood pseudo.
   Desktop-scoped: on mobile (<=900px) app.css sets `.et-shell > .et-folders-panel { position: absolute }`
   and the panels must stay absolutely positioned to fill the shell, so do NOT force `position: relative` there. */
@media (min-width: 901px) {
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell > *,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell > *,
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main > *,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main > * {
    position: relative;
    z-index: 1;
  }
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split {
  flex: 0 0 var(--et-wood-folder-gutter-w, 12px);
  width: var(--et-wood-folder-gutter-w, 12px);
  /* Unified wood recipe — opacity 0.72 (via bezel-opacity) mixes wood image down into cabinet base for the mahogany look */
  background-color: var(--et-wood-cabinet-base, color-mix(in srgb, #0e0804 90%, var(--surface-base)));
  background-image: var(--et-wood-bezel-layer, var(--et-woodgrain-layer));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: var(--et-wood-bezel-opacity, var(--et-woodgrain-opacity, 0.72));
  filter: var(--et-wood-filter, sepia(var(--et-wood-sepia, 0.24)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.24)) contrast(var(--et-wood-contrast, 1.18)));
  mix-blend-mode: var(--et-woodgrain-blend, normal);
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split {
  flex: 0 0 var(--et-wood-gutter-w, 22px);
  width: var(--et-wood-gutter-w, 22px);
  /* Unified wood recipe — opacity 0.72 (via bezel-opacity) mixes wood image down into cabinet base for the mahogany look */
  background-color: var(--et-wood-cabinet-base, color-mix(in srgb, #0e0804 90%, var(--surface-base)));
  background-image: var(--et-wood-bezel-layer, var(--et-woodgrain-layer));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: var(--et-wood-bezel-opacity, var(--et-woodgrain-opacity, 0.72));
  filter: var(--et-wood-filter, sepia(var(--et-wood-sepia, 0.24)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.24)) contrast(var(--et-wood-contrast, 1.18)));
  mix-blend-mode: var(--et-woodgrain-blend, normal);
}

/* Leather panels flush to wood gutters — no flat brown hairline between columns */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel {
  border-right: none;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split::before {
  left: 0;
  transform: none;
  width: 100%;
  /* Unified wood recipe — split drag handle wood matches all other wood surfaces */
  background-color: transparent;
  background-image: var(--et-wood-bezel-layer, var(--et-woodgrain-layer));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: var(--et-wood-bezel-opacity, var(--et-woodgrain-opacity, 0.72));
  filter: var(--et-wood-filter, sepia(var(--et-wood-sepia, 0.24)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.24)) contrast(var(--et-wood-contrast, 1.18)));
  mix-blend-mode: var(--et-woodgrain-blend, normal);
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--family-bright, #c4a574) 28%, transparent),
    inset -1px 0 0 color-mix(in srgb, #0a0604 40%, transparent);
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split:hover::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split:focus-visible::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split:hover::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split:focus-visible::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split:hover::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folder-split:focus-visible::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split:hover::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-split:focus-visible::before {
  background: color-mix(in srgb, var(--et-accent, var(--family)) 18%, transparent);
  background-image: var(--et-wood-bezel-layer, var(--et-woodgrain-layer));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--et-accent, var(--family)) 45%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--family-bright, #c4a574) 35%, transparent),
    inset -1px 0 0 color-mix(in srgb, #0a0604 40%, transparent);
}

/* Bottom cmdbar — wood, same recipe as the shell frame so the bottom blends into one
   continuous piece of wood with the buttons floating on top. Wood image lives on the
   ::before pseudo at 0.72 opacity so it does not tint the cmdbar buttons. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > .et-cmdbar,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > #et-cmdbar,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > .et-cmdbar,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > #et-cmdbar {
  position: fixed;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--et-cmdbar-h, 48px);
  background-color: var(--et-wood-cabinet-base, color-mix(in srgb, #0e0804 90%, var(--surface-base)));
  background-image: none;
  filter: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--family-bright, #c4a574) 12%, transparent),
    0 -2px 8px rgba(0, 0, 0, 0.35);
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > .et-cmdbar::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > #et-cmdbar::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > .et-cmdbar::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > #et-cmdbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--et-wood-bezel-layer, var(--et-woodgrain-layer));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: var(--et-wood-bezel-opacity, var(--et-woodgrain-opacity, 0.72));
  filter: var(--et-wood-filter, sepia(var(--et-wood-sepia, 0.24)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.24)) contrast(var(--et-wood-contrast, 1.18)));
  mix-blend-mode: var(--et-woodgrain-blend, normal);
}

/* Pull the two button groups close to center: spacer is now a fixed 32px gap. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > #et-cmdbar .et-cmdbar-spacer,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > #et-cmdbar .et-cmdbar-spacer {
  flex: 0 0 32px !important;
  width: 32px;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > .et-cmdbar > *,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > #et-cmdbar > *,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > .et-cmdbar > *,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body > #et-cmdbar > * {
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4,
.ct-main > h1,
.ct-card h2,
.ct-sheet-title {
  font-family: var(--font-heading);
}

html[data-style="midnight"] h1,
html[data-style="midnight"] h2,
html[data-style="midnight"] h3,
html[data-style="midnight"] h4,
html[data-style="midnight"] .ct-main > h1,
html[data-style="midnight"] .ct-card h2,
html[data-style="midnight"] .ct-sheet-title {
  text-shadow: 0 0 6px color-mix(in srgb, var(--family) 42%, transparent);
}

/* --- Legacy --ct-* / --lux-* / --etx-* / --et-* shim ---
   app.css and mail chrome reference these legacy variables from the old
   theme-palettes era. New styles (Modern Light, Soft Cream, etc.) never set
   them, so without this shim text can resolve empty and #fff fallbacks paint
   white-on-white.

   Re-asserted under html[data-style] below (same specificity as app.css's
   html[data-ui-theme] bridge but later source order) so light themes win. */
:root {
  --ct-font: var(--font-body);
  --ct-radius: 10px;
  --ct-bg: var(--surface-base);
  --ct-surface: var(--surface-card);
  --ct-border: var(--border);
  --ct-text: var(--text);
  --ct-muted: var(--text-muted);
  --ct-accent: var(--family);
  --ct-heading: var(--text-strong);
  --ct-input-bg: var(--input-bg);
  --ct-row-hover: var(--row-hover);
  --ct-primary: var(--family);
  --ct-card: var(--surface-elev);

  /* Lux ink (text intensity ramp used by mail list / reader chrome) */
  --lux-ink: var(--text-strong);
  --lux-ink-soft: var(--text);
  --lux-ink-faint: var(--text-muted);

  /* Lux gold (accent + decorative highlights) */
  --lux-gold: var(--family);
  --lux-gold-foil: var(--family-bright);
  --lux-gold-rim: color-mix(in srgb, var(--family) 50%, transparent);

  /* etx-* (alternate legacy names) */
  --etx-bg: var(--surface-base);
  --etx-card: var(--surface-card);
  --etx-text: var(--text);
  --etx-muted: var(--text-muted);
  --etx-border: var(--border);
  --etx-primary: var(--family);

  /* --et-* aliases used by some rules with var(--et-text-strong, #fff) fallbacks */
  --et-text-strong: var(--text-strong);
  --et-text-soft: var(--text);
  --et-text-faint: var(--text-muted);
}

/* Classic / Teams / Metallic palettes (theme-palettes.css --jt-* → unified tokens) */
html[data-ui-theme] {
  --surface-base: var(--jt-bg-page);
  --surface-elev: var(--jt-bg-elevated);
  --surface-card: var(--jt-bg-card);
  --text-strong: var(--jt-text-heading);
  --text: var(--jt-text);
  --text-muted: var(--jt-text-muted);
  --border: var(--jt-border);
  --border-soft: var(--jt-border-soft);
  --input-bg: var(--jt-bg-input);
  --row-hover: var(--jt-bg-row-hover);
  --surface-texture: none;
  --surface-list-mat: var(--jt-bg-elevated);
  --surface-main-mat: var(--jt-bg-page);

  --ct-font: var(--font-body);
  --ct-bg: var(--jt-bg-page);
  --ct-surface: var(--jt-bg-sidebar);
  --ct-border: var(--jt-border);
  --ct-text: var(--jt-text);
  --ct-muted: var(--jt-text-muted);
  --ct-accent: var(--jt-link);
  --ct-heading: var(--jt-text-heading);
  --ct-input-bg: var(--jt-bg-input);
  --ct-row-hover: var(--jt-bg-row-hover);
  --ct-primary: var(--jt-link);
  --ct-card: var(--jt-bg-card);

  --lux-ink: var(--jt-text-heading);
  --lux-ink-soft: var(--jt-text);
  --lux-ink-faint: var(--jt-text-muted);
  --lux-gold: var(--jt-link);
  --lux-gold-foil: var(--jt-link-hover);
  --lux-gold-rim: color-mix(in srgb, var(--jt-link) 50%, transparent);

  --etx-bg: var(--jt-bg-page);
  --etx-card: var(--jt-bg-card);
  --etx-text: var(--jt-text);
  --etx-muted: var(--jt-text-muted);
  --etx-border: var(--jt-border);
  --etx-primary: var(--jt-link);

  --et-text-strong: var(--jt-text-heading);
  --et-text-soft: var(--jt-text);
  --et-text-faint: var(--jt-text-muted);
}

/* --- Emailtrol / Jobtrol --jt-* bridge (style themes only) --- */
html[data-style]:not([data-ui-theme]) {
  --jt-bg-page: var(--surface-base);
  --jt-bg-elevated: var(--surface-elev);
  --jt-bg-sidebar: var(--surface-base);
  --jt-bg-topbar: var(--surface-base);
  --jt-bg-card: var(--surface-elev);
  --jt-bg-input: var(--input-bg);
  --jt-bg-table-head: var(--input-bg);
  --jt-bg-hover: var(--row-hover);
  --jt-bg-row-hover: var(--row-hover);
  --jt-border: var(--border);
  --jt-border-soft: var(--border-soft);
  --jt-text: var(--text);
  --jt-text-muted: var(--text-muted);
  --jt-text-faint: color-mix(in srgb, var(--text-muted) 55%, var(--text));
  --jt-chrome-muted: var(--text-muted);
  --jt-rail-muted: var(--text-muted);
  --jt-text-heading: var(--text-strong);
  --jt-link: var(--family-bright);
  --jt-link-hover: color-mix(in srgb, var(--family-bright) 82%, #fff);
  --jt-accent: var(--family);
  --jt-accent-hover: var(--family-bright);
  --jt-on-accent: var(--family-on);
  --jt-scroll-track: var(--input-bg);
  --jt-scroll-thumb1: color-mix(in srgb, var(--family) 55%, var(--surface-elev));
  --jt-scroll-thumb2: color-mix(in srgb, var(--family) 38%, var(--surface-base));
  --jt-badge-green-bg: color-mix(in srgb, var(--family) 22%, var(--surface-base));
  --jt-badge-red-bg: color-mix(in srgb, #ef4444 18%, var(--surface-base));
  --jt-badge-yellow-bg: color-mix(in srgb, #f59e0b 18%, var(--surface-base));
  --jt-badge-gray-bg: var(--surface-elev);
  --jt-badge-blue-bg: color-mix(in srgb, #3b82f6 18%, var(--surface-base));
  --jt-badge-orange-bg: color-mix(in srgb, #f97316 18%, var(--surface-base));
  --jt-pin-bg: var(--surface-elev);
  --jt-pin-border: var(--border-soft);
  --jt-pin-hover-bg: var(--row-hover);
  --jt-pin-on-surface: var(--text);
  --jt-pin-muted: color-mix(in srgb, var(--text-muted) 55%, transparent);
  --jt-pin-checked-bg: color-mix(in srgb, var(--family) 24%, var(--surface-base));
  --jt-pin-checked-label: var(--family-bright);
  --jt-pin-drag-bg: color-mix(in srgb, var(--family) 16%, var(--surface-elev));
  --jt-list-bg: var(--surface-elev);
  --jt-reader-bg: var(--surface-card);
  --jt-list-text: var(--text);
  --jt-reader-text: var(--text);
  --jt-list-muted: var(--text-muted);
  --jt-reader-muted: var(--text-muted);

  /* Re-assert legacy shims when a unified style is active (theme-tokens loads after app.css). */
  --ct-font: var(--font-body);
  --ct-bg: var(--surface-base);
  --ct-surface: var(--surface-card);
  --ct-border: var(--border);
  --ct-text: var(--text);
  --ct-muted: var(--text-muted);
  --ct-accent: var(--family);
  --ct-heading: var(--text-strong);
  --ct-input-bg: var(--input-bg);
  --ct-row-hover: var(--row-hover);
  --ct-primary: var(--family);
  --ct-card: var(--surface-elev);

  --lux-ink: var(--text-strong);
  --lux-ink-soft: var(--text);
  --lux-ink-faint: var(--text-muted);
  --lux-gold: var(--family);
  --lux-gold-foil: var(--family-bright);
  --lux-gold-rim: color-mix(in srgb, var(--family) 50%, transparent);

  --etx-bg: var(--surface-base);
  --etx-card: var(--surface-card);
  --etx-text: var(--text);
  --etx-muted: var(--text-muted);
  --etx-border: var(--border);
  --etx-primary: var(--family);

  --et-text-strong: var(--text-strong);
  --et-text-soft: var(--text);
  --et-text-faint: var(--text-muted);
  --et-text-muted: var(--text-muted);
  --et-surface-2: color-mix(in srgb, var(--text) 4%, var(--surface-base));
}

/* --- Mail chrome contrast (per unified style; not classic palettes) --- */
html[data-style="modern-light"]:not([data-ui-theme]) {
  --jt-chrome-muted: #475569;
  --jt-rail-muted: #64748b;
  --jt-text-faint: #64748b;
  --jt-bg-topbar: #e2e8f0;
  --jt-bg-sidebar: #f1f5f9;
  --jt-bg-card: #f8fafc;
  --jt-bg-elevated: #e8eef4;
  --jt-list-bg: #e8eef4;
  --jt-reader-bg: #ffffff;
  --jt-list-muted: #475569;
  --jt-reader-muted: #475569;
  --jt-border: #cbd5e1;
  --jt-border-soft: #e2e8f0;
}

html[data-style="soft-cream"]:not([data-ui-theme]) {
  --jt-chrome-muted: #5c4a38;
  --jt-rail-muted: #6b5344;
  --jt-text-faint: #6b5344;
  --jt-bg-topbar: #ebdfc8;
  --jt-bg-sidebar: #f5efe3;
  --jt-bg-card: #fffdf7;
  --jt-bg-elevated: #fffaf0;
  --jt-list-bg: #fffaf0;
  --jt-reader-bg: #fffdf7;
  --jt-list-muted: #5c4a38;
  --jt-reader-muted: #5c4a38;
}

html[data-style="midnight"]:not([data-ui-theme]) {
  --jt-chrome-muted: #b0b0b0;
  --jt-rail-muted: #949494;
  --jt-text-faint: #949494;
  --jt-list-muted: #b4b4b4;
  --jt-reader-muted: #b4b4b4;
  --jt-border: rgba(255, 255, 255, 0.1);
  --jt-border-soft: rgba(255, 255, 255, 0.07);
}

html[data-style="slate"]:not([data-ui-theme]) {
  --jt-chrome-muted: #b6c2d1;
  --jt-rail-muted: #94a3b8;
  --jt-text-faint: #a3b0c2;
  --jt-list-muted: #b6c2d1;
  --jt-reader-muted: #b6c2d1;
  --jt-border: rgba(148, 163, 184, 0.22);
  --jt-border-soft: rgba(148, 163, 184, 0.12);
}

html[data-style="polished-granite"]:not([data-ui-theme]) {
  --jt-chrome-muted: #5a6578;
  --jt-rail-muted: #6b7788;
  --jt-text-faint: #6b7788;
  --jt-bg-topbar: #b8c0ca;
  --jt-bg-sidebar: #c5cad2;
  --jt-bg-card: #d4d9e0;
  --jt-bg-elevated: #bcc3cc;
  --jt-list-bg: #bcc3cc;
  --jt-reader-bg: #e8ecf0;
  --jt-list-muted: #5a6578;
  --jt-reader-muted: #5a6578;
  --jt-border: rgba(80, 95, 115, 0.24);
  --jt-border-soft: rgba(80, 95, 115, 0.14);
}

html[data-style="carrara-marble"]:not([data-ui-theme]) {
  --jt-chrome-muted: #6b6560;
  --jt-rail-muted: #7a746e;
  --jt-text-faint: #7a746e;
  --jt-bg-topbar: #ebe6de;
  --jt-bg-sidebar: #f2f0eb;
  --jt-bg-card: #fffdf9;
  --jt-bg-elevated: #f5f2ec;
  --jt-list-bg: #f5f2ec;
  --jt-reader-bg: #fffdf9;
  --jt-list-muted: #6b6560;
  --jt-reader-muted: #6b6560;
  --jt-border: rgba(120, 115, 108, 0.22);
  --jt-border-soft: rgba(120, 115, 108, 0.12);
}

html[data-style="black-galaxy"]:not([data-ui-theme]) {
  --jt-chrome-muted: #b8a890;
  --jt-rail-muted: #9a8870;
  --jt-text-faint: #9a8870;
  --jt-list-muted: #b8a890;
  --jt-reader-muted: #b8a890;
  --et-list-from-read: color-mix(in srgb, var(--text) 68%, var(--text-muted) 32%);
  --et-list-subject-read: color-mix(in srgb, var(--text) 78%, var(--text-muted) 22%);
  --et-list-snippet-read: color-mix(in srgb, var(--text) 68%, var(--text-muted) 32%);
  --jt-border: rgba(212, 175, 95, 0.2);
  --jt-border-soft: rgba(212, 175, 95, 0.1);
}

html[data-style="ron-burgundy"]:not([data-ui-theme]) {
  /* Message list — ~10–12% lighter than shell; woodgrain/sidebar stay on surface-base */
  --et-list-bg: color-mix(in srgb, var(--surface-elev) 84%, var(--text-strong) 16%);
  --et-list-row-bg: color-mix(in srgb, var(--et-list-bg) 94%, var(--text-strong) 6%);
  --et-list-row-hover: color-mix(in srgb, var(--et-list-bg) 72%, var(--family-bright) 28%);
  --jt-list-bg: var(--et-list-bg);
  --et-list-hover: var(--et-list-row-hover);
  --jt-list-text: var(--text);
  --jt-chrome-muted: #dcc8a8;
  --jt-rail-muted: #c4ad88;
  --jt-text-faint: #c4ad88;
  --jt-list-muted: #dcc8a8;
  --jt-reader-muted: #dcc8a8;
  --et-list-from-read: color-mix(in srgb, var(--text-strong) 62%, var(--text) 38%);
  --et-list-subject-read: color-mix(in srgb, var(--text) 82%, var(--text-muted) 18%);
  --et-list-snippet-read: color-mix(in srgb, var(--text) 72%, var(--text-muted) 28%);
  --et-list-subject-unread: color-mix(in srgb, var(--text-strong) 88%, var(--text) 12%);
  --et-list-snippet-unread: color-mix(in srgb, var(--text) 86%, var(--text-muted) 14%);
  --jt-border: rgba(212, 165, 116, 0.18);
  --jt-border-soft: rgba(212, 165, 116, 0.12);
}

html[data-style="royal-cream"]:not([data-ui-theme]) {
  --et-list-bg: color-mix(in srgb, var(--surface-elev) 78%, var(--text-strong) 22%);
  --et-list-row-bg: color-mix(in srgb, var(--et-list-bg) 90%, var(--text-strong) 10%);
  --et-list-row-hover: color-mix(in srgb, var(--et-list-bg) 65%, var(--family-bright) 35%);
  --jt-list-bg: var(--et-list-bg);
  --et-list-hover: var(--et-list-row-hover);
  --jt-list-text: var(--text);
  --jt-chrome-muted: #e0d0b8;
  --jt-rail-muted: #c8b898;
  --jt-text-faint: #c8b898;
  --jt-list-muted: #e0d0b8;
  --jt-reader-muted: #e0d0b8;
  --et-list-from-read: color-mix(in srgb, var(--text-strong) 58%, var(--text) 42%);
  --et-list-subject-read: color-mix(in srgb, var(--text) 80%, var(--text-muted) 20%);
  --et-list-snippet-read: color-mix(in srgb, var(--text) 70%, var(--text-muted) 30%);
  --et-list-subject-unread: color-mix(in srgb, var(--text-strong) 86%, var(--text) 14%);
  --et-list-snippet-unread: color-mix(in srgb, var(--text) 84%, var(--text-muted) 16%);
  --jt-border: rgba(139, 108, 72, 0.32);
  --jt-border-soft: rgba(139, 108, 72, 0.2);
}

/* Light styles — ghost toolbar/prefs chips (app.css --et-toolbar-btn-* on mail chrome) */
html[data-et-app="mail"][data-style="modern-light"]:not([data-ui-theme]) .et-statusrail,
html[data-et-app="mail"][data-style="modern-light"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="soft-cream"]:not([data-ui-theme]) .et-statusrail,
html[data-et-app="mail"][data-style="soft-cream"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="polished-granite"]:not([data-ui-theme]) .et-statusrail,
html[data-et-app="mail"][data-style="polished-granite"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="carrara-marble"]:not([data-ui-theme]) .et-statusrail,
html[data-et-app="mail"][data-style="carrara-marble"]:not([data-ui-theme]) .et-toolbar {
  --et-toolbar-btn-bg: var(--jt-bg-card);
  --et-toolbar-btn-fg: var(--jt-text);
  --et-toolbar-btn-border: var(--jt-border);
  --et-toolbar-btn-hover-bg: color-mix(in srgb, var(--jt-accent) 10%, var(--jt-bg-card));
  --et-toolbar-btn-hover-fg: var(--jt-text-heading);
  --et-topbar-btn-bg: var(--et-toolbar-btn-bg);
  --et-topbar-btn-fg: var(--et-toolbar-btn-fg);
  --et-topbar-btn-border: var(--et-toolbar-btn-border);
  --et-topbar-btn-hover-bg: var(--et-toolbar-btn-hover-bg);
  --et-topbar-btn-hover-fg: var(--et-toolbar-btn-hover-fg);
  --et-sidebar-btn-bg: color-mix(in srgb, var(--jt-text) 4%, var(--jt-bg-sidebar));
  --et-sidebar-btn-fg: var(--jt-chrome-muted);
  --et-sidebar-btn-border: var(--jt-border);
  --et-sidebar-btn-hover-bg: color-mix(in srgb, var(--jt-accent) 12%, var(--jt-bg-sidebar));
  --et-sidebar-btn-hover-fg: var(--jt-text-heading);
}

/* Dark styles — ghost toolbar/sidebar chips */
html[data-et-app="mail"][data-style="midnight"]:not([data-ui-theme]) .et-statusrail,
html[data-et-app="mail"][data-style="midnight"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="slate"]:not([data-ui-theme]) .et-statusrail,
html[data-et-app="mail"][data-style="slate"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="black-galaxy"]:not([data-ui-theme]) .et-statusrail,
html[data-et-app="mail"][data-style="black-galaxy"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-statusrail,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-toolbar,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-statusrail,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-toolbar {
  --et-toolbar-btn-bg: color-mix(in srgb, var(--jt-text) 6%, var(--jt-bg-topbar));
  --et-toolbar-btn-fg: var(--jt-chrome-muted);
  --et-toolbar-btn-border: var(--jt-border-soft);
  --et-toolbar-btn-hover-bg: color-mix(in srgb, var(--jt-accent) 14%, var(--jt-bg-topbar));
  --et-toolbar-btn-hover-fg: var(--jt-text-heading);
  --et-topbar-btn-bg: var(--et-toolbar-btn-bg);
  --et-topbar-btn-fg: var(--et-toolbar-btn-fg);
  --et-topbar-btn-border: var(--et-toolbar-btn-border);
  --et-topbar-btn-hover-bg: var(--et-toolbar-btn-hover-bg);
  --et-topbar-btn-hover-fg: var(--et-toolbar-btn-hover-fg);
  --et-sidebar-btn-bg: color-mix(in srgb, var(--jt-text) 5%, var(--jt-bg-sidebar));
  --et-sidebar-btn-fg: var(--jt-chrome-muted);
  --et-sidebar-btn-border: var(--jt-border-soft);
  --et-sidebar-btn-hover-bg: color-mix(in srgb, var(--jt-accent) 12%, var(--jt-bg-sidebar));
  --et-sidebar-btn-hover-fg: var(--jt-text-heading);
}

/* --- Mail UI breathing room — classic/team palettes (Bronze, Hawks, etc.) --- */
@media (min-width: 901px) {
  html[data-et-app="mail"][data-ui-theme] .et-messages-panel .et-stub-list li.et-msg-row,
  html[data-et-app="mail"][data-palette] .et-messages-panel .et-stub-list li.et-msg-row {
    padding: 0.875rem 0.95rem;
  }

  html[data-et-app="mail"][data-ui-theme] .et-messages-panel .et-stub-list li.et-msg-row.et-active,
  html[data-et-app="mail"][data-palette] .et-messages-panel .et-stub-list li.et-msg-row.et-active {
    padding-left: calc(0.95rem - 2px);
  }

  html[data-et-app="mail"][data-ui-theme] .et-stub-list li.et-msg-row.et-active.et-msg-unread,
  html[data-et-app="mail"][data-palette] .et-stub-list li.et-msg-row.et-active.et-msg-unread {
    padding-left: calc(0.95rem - 3px);
  }

  html[data-et-app="mail"][data-ui-theme] .et-folders-panel #et-folders.et-stub-list li.et-folder-row,
  html[data-et-app="mail"][data-palette] .et-folders-panel #et-folders.et-stub-list li.et-folder-row {
    padding: 0.65rem 0.78rem;
  }

  html[data-et-app="mail"][data-ui-theme] #et-folders.et-stub-list li.et-folder-row.et-active,
  html[data-et-app="mail"][data-ui-theme] #et-folders.et-stub-list li.et-folder-row.active,
  html[data-et-app="mail"][data-ui-theme] #et-folders.et-stub-list li.et-folder-row.is-active,
  html[data-et-app="mail"][data-ui-theme] #et-folders.et-stub-list li.et-folder-row[aria-selected="true"],
  html[data-et-app="mail"][data-palette] #et-folders.et-stub-list li.et-folder-row.et-active,
  html[data-et-app="mail"][data-palette] #et-folders.et-stub-list li.et-folder-row.active,
  html[data-et-app="mail"][data-palette] #et-folders.et-stub-list li.et-folder-row.is-active,
  html[data-et-app="mail"][data-palette] #et-folders.et-stub-list li.et-folder-row[aria-selected="true"] {
    padding-left: calc(0.78rem - 3px);
  }

  html[data-et-app="mail"][data-ui-theme] .et-reader-body,
  html[data-et-app="mail"][data-ui-theme] #et-reader-body.et-reader-body,
  html[data-et-app="mail"][data-ui-theme] .et-reader-html:not(.et-reader-html--framed),
  html[data-et-app="mail"][data-palette] .et-reader-body,
  html[data-et-app="mail"][data-palette] #et-reader-body.et-reader-body,
  html[data-et-app="mail"][data-palette] .et-reader-html:not(.et-reader-html--framed) {
    padding: 1.5rem 2rem 1.75rem;
  }

  html[data-et-app="mail"][data-ui-theme] .et-reader-html.et-reader-html--framed,
  html[data-et-app="mail"][data-palette] .et-reader-html.et-reader-html--framed {
    padding: 1.5rem 2rem 1.75rem;
  }

  html[data-et-app="mail"][data-ui-theme] #et-reader-content-host,
  html[data-et-app="mail"][data-palette] #et-reader-content-host {
    margin: 0 0.75rem 0.6rem;
  }

  html[data-et-app="mail"][data-ui-theme] .et-reader-chrome,
  html[data-et-app="mail"][data-palette] .et-reader-chrome {
    margin: 0 0.65rem 0.42rem;
  }

  html[data-et-app="mail"][data-ui-theme] .et-reader-meta-compact,
  html[data-et-app="mail"][data-palette] .et-reader-meta-compact {
    padding: 0.38rem 0.55rem 0.32rem;
  }

  html[data-et-app="mail"][data-ui-theme] .et-reader-toolbar-compact,
  html[data-et-app="mail"][data-palette] .et-reader-toolbar-compact {
    padding: 0.42rem 0.52rem;
  }

  /* Style themes — moderate bump (Ron Burgundy reader gets separate grain accent) */
  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) .et-messages-panel .et-stub-list li.et-msg-row {
    padding: 0.625rem 0.72rem;
  }

  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) .et-messages-panel .et-stub-list li.et-msg-row.et-active {
    padding-left: calc(0.72rem - 2px);
  }

  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) .et-stub-list li.et-msg-row.et-active.et-msg-unread {
    padding-left: calc(0.72rem - 3px);
  }

  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) .et-folders-panel #et-folders.et-stub-list li.et-folder-row {
    padding: 0.52rem 0.62rem;
  }

  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) #et-folders.et-stub-list li.et-folder-row.et-active,
  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) #et-folders.et-stub-list li.et-folder-row.active,
  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) #et-folders.et-stub-list li.et-folder-row.is-active,
  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) #et-folders.et-stub-list li.et-folder-row[aria-selected="true"] {
    padding-left: calc(0.62rem - 3px);
  }

  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) .et-reader-body,
  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) #et-reader-body.et-reader-body,
  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) .et-reader-html:not(.et-reader-html--framed) {
    padding: 1.35rem 1.75rem 1.65rem;
  }

  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) .et-reader-html.et-reader-html--framed {
    padding: 1.35rem 1.75rem 1.65rem;
  }

  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) #et-reader-content-host {
    margin: 0 0.65rem 0.55rem;
  }

  /* Leather stationery — generous mat + inner card on Ron Burgundy / Royal Cream */
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-body:not(.et-hidden),
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-body:not(.et-hidden),
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-html:not(.et-reader-html--framed),
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-body:not(.et-hidden),
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-body:not(.et-hidden),
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-html:not(.et-reader-html--framed) {
    padding: 1.5rem 2rem 1.75rem;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-html.et-reader-html--framed,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-html.et-reader-html--framed {
    padding: 1.5rem 2rem 1.75rem;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-content-host,
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-content-host,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-content-host,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-content-host {
    padding: 1rem 1.15rem 1.15rem;
    margin: 0 0.75rem 0.6rem;
  }

  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) .et-reader-chrome {
    margin: 0 0.52rem 0.35rem;
  }

  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) .et-reader-meta-compact {
    padding: 0.28rem 0.42rem 0.24rem;
  }

  html[data-et-app="mail"][data-style]:not([data-ui-theme]):not([data-palette]) .et-reader-toolbar-compact {
    padding: 0.32rem 0.4rem;
  }
}

/* Reader content — dark leather mat; white paper card inset (no wood inside reader) */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-content-host,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-content-host,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-content-host,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-content-host {
  position: relative;
  isolation: isolate;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px));
  background-color: var(--et-reader-leather-bg, color-mix(in srgb, #0e0806 72%, var(--surface-base)));
  background-image: var(--et-leather-layer, none);
  background-repeat: no-repeat, repeat;
  background-size: cover, 256px 256px;
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--family-bright, #c4a574) 12%, transparent);
  padding: 1rem 1.15rem 1.15rem;
  margin: 0 0.55rem 0.45rem;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-html:not(.et-reader-html--framed),
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-html:not(.et-reader-html--framed) {
  background-color: var(--et-reader-paper-bg, #fffdf8);
  background-image: none;
  color: #1c1410;
  border: 1px solid color-mix(in srgb, #000 8%, var(--et-reader-paper-bg, #fffdf8));
  box-shadow:
    0 1px 5px rgba(0, 0, 0, 0.2),
    0 0 0 1px color-mix(in srgb, var(--family-bright, #c4a574) 8%, transparent);
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-html.et-reader-html--framed,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-html.et-reader-html--framed {
  background-color: var(--et-reader-paper-bg, #fffdf8);
  background-image: none;
  color: #1c1410;
  border: 1px solid color-mix(in srgb, #000 8%, var(--et-reader-paper-bg, #fffdf8));
  box-shadow:
    0 1px 5px rgba(0, 0, 0, 0.2),
    0 0 0 1px color-mix(in srgb, var(--family-bright, #c4a574) 8%, transparent);
}

html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-html:not(.et-reader-html--framed),
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-html.et-reader-html--framed {
  color: #2a1e12;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-reader-content-host::after,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="on"] #et-reader-content-host::after,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-content-host::after,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="on"] .et-reader-content-host::after,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-reader-content-host::after,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="on"] #et-reader-content-host::after,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-content-host::after,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="on"] .et-reader-content-host::after,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-reader-content-host::before,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="on"] #et-reader-content-host::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-reader-content-host::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="on"] #et-reader-content-host::before {
  content: none;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-reader-content-host > *,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="on"] #et-reader-content-host > *,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-content-host > *,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="on"] .et-reader-content-host > *,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-reader-content-host > *,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="on"] #et-reader-content-host > *,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-content-host > *,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="on"] .et-reader-content-host > * {
  position: relative;
  z-index: 2;
}

/* Ron Burgundy — message list readability on leather */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-msg-from {
  color: var(--et-text-strong, var(--text-strong));
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-msg-row.et-msg-unread .et-msg-subject {
  color: var(--et-list-subject-unread, color-mix(in srgb, var(--et-text-strong, var(--text-strong)) 88%, var(--et-text-soft, var(--text))));
  font-weight: 500;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-msg-row:not(.et-msg-unread) .et-msg-subject {
  color: var(--et-list-subject-read, color-mix(in srgb, var(--et-text-soft, var(--text)) 80%, var(--jt-list-muted, var(--text-muted))));
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-msg-row:not(.et-msg-unread) .et-msg-from {
  color: var(--et-list-from-read, color-mix(in srgb, var(--et-text-strong, var(--text-strong)) 62%, var(--et-text-soft, var(--text))));
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-msg-snippet,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-msg-date {
  color: var(--et-list-snippet-read, color-mix(in srgb, var(--et-text-soft, var(--text)) 72%, var(--jt-list-muted, var(--text-muted))));
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-msg-row.et-msg-unread .et-msg-snippet,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-msg-row.et-msg-unread .et-msg-date {
  color: var(--et-list-snippet-unread, color-mix(in srgb, var(--et-text-soft, var(--text)) 86%, var(--jt-list-muted, var(--text-muted))));
  opacity: 1;
}

/* Royal Cream — message list readability on leather */
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-msg-from {
  color: var(--et-text-strong, var(--text-strong));
}

html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-msg-row.et-msg-unread .et-msg-subject {
  color: color-mix(in srgb, var(--et-text-strong, var(--text-strong)) 82%, var(--et-text-soft, var(--text)));
  font-weight: 500;
}

html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-msg-row:not(.et-msg-unread) .et-msg-subject {
  color: color-mix(in srgb, var(--et-text-soft, var(--text)) 72%, var(--jt-list-muted, var(--text-muted)));
}

@media (max-width: 900px) {
  html[data-et-app="mail"] #et-reader-body.et-reader-body,
  html[data-et-app="mail"] .et-reader-body,
  html[data-et-app="mail"] .et-reader-html:not(.et-reader-html--framed),
  html[data-et-app="mail"] .et-reader-html.et-reader-html--inline {
    padding: 0.85rem 0.85rem 1rem;
  }

  /* Mobile panels — rounded all four corners (was border-radius: 0). Shell stays square
     since it fills the viewport; the panels float inside it with a wood-visible inset. */
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-folders-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-folders-panel,
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-mail-main .et-messages-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-mail-main .et-messages-panel,
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-mail-main .et-reader-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-mail-main .et-reader-panel {
    border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px)) !important;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell {
    border-radius: 0 !important;
  }

  /* Inset the panels 6px on every side so the shell wood ::before pseudo shows as a thin
     wood frame all around each leather card. Reader-panel gets the same treatment so the
     READ view is consistent with the list view. */
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell > .et-folders-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell > .et-folders-panel,
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell > #et-mail-main,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell > #et-mail-main {
    /* Reduced mobile wood frame from 6px → 3px (user feedback 2026-05-26: less wood) */
    left: 3px !important;
    right: 3px !important;
    top: 3px !important;
    bottom: calc(var(--et-mobile-tabbar-h, 3.35rem) + env(safe-area-inset-bottom, 0px) + 3px) !important;
    /* Bumped corners on mobile (user feedback: more rounded everything) */
    border-radius: 16px !important;
    overflow: hidden;
  }

  html[data-et-app="mail"] .et-reader-html.et-reader-html--framed {
    padding: 0.85rem 0.85rem 1rem;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage {
    margin: 0.2rem 0.35rem 0.35rem;
    padding: 0.35rem 0.45rem 0.45rem;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-content-host,
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-content-host,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-content-host,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-content-host {
    padding: 0.5rem 0.55rem 0.55rem;
    margin: 0 0.35rem 0.3rem;
  }

  /* READ tab: strip desktop leather mat — full-width white card */
  html.et-mobile-view-reader[data-et-app="mail"] #et-reader-stage.et-reader-stage,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage {
    margin: 0 !important;
    padding: 0 4px 4px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.et-mobile-view-reader[data-et-app="mail"] #et-reader-content-host,
  html.et-mobile-view-reader[data-et-app="mail"] .et-reader-content-host,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-content-host,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-content-host,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-content-host,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-content-host {
    padding: 0 !important;
    margin: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  html.et-mobile-view-reader[data-et-app="mail"] #et-reader-content-host::before,
  html.et-mobile-view-reader[data-et-app="mail"] #et-reader-content-host::after,
  html.et-mobile-view-reader[data-et-app="mail"] .et-reader-content-host::before,
  html.et-mobile-view-reader[data-et-app="mail"] .et-reader-content-host::after {
    content: none !important;
    display: none !important;
  }

  /* Mobile READ — no internal wood trims; rounded leather panel; tight bottom */
  html.et-mobile-view-reader[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel::before,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel::before,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel::after,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel::after {
    content: none !important;
    display: none !important;
  }

  html.et-mobile-view-reader[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    /* Bumped to 18px for the more-rounded look on mobile (user feedback 2026-05-26) */
    border-radius: 18px !important;
    background-color: var(--et-reader-leather-bg, color-mix(in srgb, #0e0806 72%, var(--surface-base))) !important;
    background-image: var(--et-leather-layer, none) !important;
  }

  /* READ view: drop the 3px wood frame at the bottom of mail-main + reader-panel — the
     wasted wood-colored space below the email body was just the bottom inset showing through.
     Reader panel now extends all the way down to the tabbar (2026-05-27 user feedback). */
  html.et-mobile-view-reader[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell > #et-mail-main,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell > #et-mail-main {
    bottom: calc(var(--et-mobile-tabbar-h, 3.35rem) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Reader content host fills the remaining panel height (flex: 1) so the white email card
     doesn't leave dark dead-space between its bottom and the tabbar. Scrolls inside itself. */
  html.et-mobile-view-reader[data-et-app="mail"] #et-reader-content-host,
  html.et-mobile-view-reader[data-et-app="mail"] .et-reader-content-host {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }


  /* Swipe edge strips above wood trim pseudo-element (z-index 5) */
  html.et-mobile-view-reader[data-et-app="mail"] #et-reader-panel > .et-reader-swipe-edge,
  html.et-mobile-view-reader[data-et-app="mail"] .et-reader-swipe-edge {
    z-index: 9999 !important;
    pointer-events: auto !important;
  }

  html.et-mobile-view-reader[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-reader-stage.et-reader-stage,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-reader-stage.et-reader-stage {
    /* Tight leather padding (less leather visible per user feedback 2026-05-26) */
    margin: 0 !important;
    padding: 0 2px 2px !important;
    /* Rounded inner stage — 14px so it nests inside the 18px panel */
    border-radius: 14px !important;
    box-shadow: none !important;
    background-image: none !important;
  }

  html.et-mobile-view-reader[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-chrome,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-chrome {
    margin: 0.12rem 0.28rem 0.1rem !important;
    padding: 0.28rem 0.38rem 0.34rem !important;
    border-radius: calc(var(--et-panel-radius, var(--trol-panel-radius, 10px)) - 2px) !important;
    background: transparent !important;
  }

  html.et-mobile-view-reader[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-mobile-topbar,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-mobile-topbar {
    background-color: var(--et-reader-leather-bg, color-mix(in srgb, #0e0806 72%, var(--surface-base)));
    background-image: var(--et-leather-layer, none);
    background-repeat: no-repeat, repeat;
    background-size: cover, 256px 256px;
    background-blend-mode: soft-light, normal;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--family-bright, #c4a574) 14%, transparent);
  }

  html.et-mobile-view-reader[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-actions.et-reader-toolbar-compact,
  html.et-mobile-view-reader[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-actions.et-reader-toolbar-compact {
    background: color-mix(in srgb, var(--et-reader-leather-bg, var(--surface-base)) 88%, #000) !important;
  }
}

html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-msg-row:not(.et-msg-unread) .et-msg-from {
  color: var(--et-list-from-read, color-mix(in srgb, var(--et-text-strong, var(--text-strong)) 58%, var(--jt-list-muted, var(--text-muted))));
}

/* 20260525-panel-align-dark-wood-v1 — level leather mat tops + deeper punch (Ron / Royal, woodgrain on) */
@media (min-width: 901px) {
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell {
    align-items: stretch;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell > .et-folders-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell > .et-folders-panel,
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main {
    align-self: stretch;
    margin-top: 0;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel,
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel {
    padding-top: 0;
    padding-right: var(--et-panel-mat-inset, 0.48rem);
    padding-bottom: var(--et-panel-mat-inset, 0.48rem);
    padding-left: var(--et-panel-mat-inset, 0.48rem);
    margin-top: 0;
    box-shadow: var(--et-wood-mat-inset);
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel .et-folders-head,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel .et-folders-head,
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel > .et-msgs-panel-head,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel > .et-msgs-panel-head {
    margin-top: 0;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-reader-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-reader-panel {
    margin-top: 0;
    padding-bottom: var(--et-panel-mat-inset, 0.48rem);
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    box-shadow: var(--et-wood-mat-inset);
  }
}

/* ================================================================== *
 * TASK 1 (2026-05-30): theme-agnostic 3D raised islands
 * When 3D Effects is ON (data-trol-3d="on"), non-wood / non-stone themes get
 * the floating-island treatment: the mail panels (folders + reader) read as
 * raised above a recessed shell backdrop. Wood styles keep their leather
 * cabinet; stone styles keep their slab backdrop (both excluded). 3D defaults
 * OFF for classic themes, so OFF = flat panes, ON = raised islands. Shadow
 * soft on light themes, deeper on dark themes.
 * ================================================================== */
:root { --trol-island-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 8px 22px rgba(0,0,0,0.14); }
html[data-ui-theme="dark"],
html[data-ui-theme="sage"],
html[data-ui-theme="dusk"],
html[data-ui-theme="contactrol"],
html[data-ui-theme="gold-dark"],
html[data-ui-theme="copper-dark"],
html[data-ui-theme="silver-dark"],
html[data-ui-theme="steelers"],
html[data-style="midnight"]:not([data-ui-theme]),
html[data-style="slate"]:not([data-ui-theme]) {
  --trol-island-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 10px 28px rgba(0,0,0,0.42);
}

html[data-trol-3d="on"][data-et-app="mail"]:not([data-style="ron-burgundy"]):not([data-style="royal-cream"]):not([data-style="polished-granite"]):not([data-style="carrara-marble"]):not([data-style="black-galaxy"]) .et-folders-panel,
html[data-trol-3d="on"][data-et-app="mail"]:not([data-style="ron-burgundy"]):not([data-style="royal-cream"]):not([data-style="polished-granite"]):not([data-style="carrara-marble"]):not([data-style="black-galaxy"]) .et-reader-panel,
html[data-trol-3d="on"][data-et-app="mail"]:not([data-style="ron-burgundy"]):not([data-style="royal-cream"]):not([data-style="polished-granite"]):not([data-style="carrara-marble"]):not([data-style="black-galaxy"]) .et-messages-panel {
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px));
  box-shadow: var(--trol-island-shadow);
}

/* ================================================================== *
 * TASK 2 / P2a (2026-05-30): texture / skins library — calm skins
 * STYLE THEMES ONLY (data-trol-texture set only in style mode). The skin
 * paints the page BACKDROP (behind the mail panels) or the ISLAND panels.
 * Texture rides a ::after layer / opaque panel fill — never under body text
 * (contrast safeguard §P2.6). Island role falls back to backdrop when 3D off.
 * Wood styles keep the locked cabinet for the "wood" skin; a non-wood skin on
 * a wood style suppresses the cabinet and paints the chosen skin.
 * ================================================================== */
:root {
  --trol-skin-texture: none;
  --trol-skin-opacity: 0.42;
  /* Picker strength knobs (v78) — user-driven via the theme modal sliders */
  --trol-skin-amount: 1;
  --trol-skin-saturate: 1;
  --trol-skin-depth: 1;
  --trol-skin-opacity-cap: 1;
  --trol-skin-filter: ;
}
html[data-trol-texture="wood"] {
  --trol-skin-texture: url("/assets/textures/skin-wood.svg");
  --trol-skin-opacity: 0.5;
}
html[data-trol-texture="leather"] {
  --trol-skin-texture:
    radial-gradient(ellipse 95% 70% at 12% 8%, color-mix(in srgb, #a07040 24%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 80% 65% at 88% 92%, color-mix(in srgb, #1a1008 16%, transparent) 0%, transparent 52%),
    radial-gradient(ellipse 55% 45% at 48% 42%, color-mix(in srgb, #4a3020 20%, transparent) 0%, transparent 68%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.18' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.055 0 0 0 0 0.04 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --trol-skin-opacity: 0.55;
}
html[data-trol-texture="stone"] {
  --trol-skin-texture: url("/assets/textures/skin-stone.svg");
  --trol-skin-opacity: 0.45;
}
html[data-trol-texture="marble"] {
  --trol-skin-texture: url("/assets/textures/skin-marble.svg");
  --trol-skin-opacity: 0.5;
}
html[data-trol-texture="granite"] {
  --trol-skin-texture: url("/assets/textures/skin-granite.svg");
  --trol-skin-opacity: 0.58;
}
html[data-trol-texture="teak"] {
  --trol-skin-texture: url("/assets/textures/wood-teak.svg");
  --trol-skin-opacity: 0.5;
}
html[data-trol-texture="burl"] {
  --trol-skin-texture: url("/assets/textures/wood-burl.svg");
  --trol-skin-opacity: 0.5;
}
html[data-trol-texture="exotic"] {
  --trol-skin-texture: url("/assets/textures/wood-exotic.svg");
  --trol-skin-opacity: 0.5;
}
html[data-trol-texture="mahogany"] {
  --trol-skin-texture: url("/assets/textures/wood-mahogany.svg");
  --trol-skin-opacity: 0.5;
}
html[data-trol-texture="tigerwood"] {
  --trol-skin-texture: url("/assets/textures/wood-tigerwood.svg");
  --trol-skin-opacity: 0.5;
}
html[data-trol-texture="walnut"] {
  --trol-skin-texture: url("/assets/textures/wood-walnut.svg");
  --trol-skin-opacity: 0.5;
}
html[data-trol-texture="cherry"] {
  --trol-skin-texture: url("/assets/textures/wood-cherry.svg");
  --trol-skin-opacity: 0.5;
}
html[data-trol-texture="rosewood"] {
  --trol-skin-texture: url("/assets/textures/wood-rosewood.svg");
  --trol-skin-opacity: 0.5;
}
html[data-trol-texture="turf-green"] {
  --trol-skin-texture: url("/assets/textures/skin-turf-green.svg");
  --trol-skin-opacity: 0.5;
  --trol-skin-opacity-cap: 0.62;
}
html[data-trol-texture="turf-blue"] {
  --trol-skin-texture: url("/assets/textures/skin-turf-blue.svg");
  --trol-skin-opacity: 0.5;
  --trol-skin-opacity-cap: 0.62;
}
html[data-trol-texture="turf-red"] {
  --trol-skin-texture: url("/assets/textures/skin-turf-red.svg");
  --trol-skin-opacity: 0.5;
  --trol-skin-opacity-cap: 0.62;
}

/* Lift shell children above the backdrop texture layer. */
html[data-et-app="mail"][data-trol-texture]:not([data-ui-theme]) .et-shell.et-mail-shell { position: relative; isolation: isolate; }
html[data-et-app="mail"][data-trol-texture]:not([data-ui-theme]) .et-shell.et-mail-shell > * { position: relative; z-index: 1; }

/* Backdrop layer (role=backdrop, or island role while 3D is off → falls back). */
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="backdrop"]:not([data-ui-theme]) .et-shell.et-mail-shell::after,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"]:not([data-trol-3d="on"]):not([data-ui-theme]) .et-shell.et-mail-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--trol-skin-texture, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: min(var(--trol-skin-opacity-cap, 1), calc(var(--trol-skin-opacity, 0.42) * var(--trol-skin-amount, 1)));
  filter: saturate(var(--trol-skin-saturate, 1)) contrast(var(--trol-skin-depth, 1)) var(--trol-skin-filter, );
}
/* Wood style + "wood" skin (auto default): keep the locked cabinet — no extra layer. */
html[data-et-app="mail"][data-style="ron-burgundy"][data-trol-texture="wood"]:not([data-ui-theme]) .et-shell.et-mail-shell::after,
html[data-et-app="mail"][data-style="royal-cream"][data-trol-texture="wood"]:not([data-ui-theme]) .et-shell.et-mail-shell::after {
  background-image: none;
  opacity: 0;
}
/* Non-wood skin: skin rides ::after above native wood ::before (v213 — never zero wood). */

/* Island role + 3D on: texture on ::before behind content (trolx filter/opacity hit texture only).
   Wood/stone styles keep their own panel rules. */
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"]:not([data-style="ron-burgundy"]):not([data-style="royal-cream"]):not([data-style="polished-granite"]):not([data-style="carrara-marble"]):not([data-style="black-galaxy"]):not([data-ui-theme]) .et-folders-panel,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"]:not([data-style="ron-burgundy"]):not([data-style="royal-cream"]):not([data-style="polished-granite"]):not([data-style="carrara-marble"]):not([data-style="black-galaxy"]):not([data-ui-theme]) .et-reader-panel,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"]:not([data-style="ron-burgundy"]):not([data-style="royal-cream"]):not([data-style="polished-granite"]):not([data-style="carrara-marble"]):not([data-style="black-galaxy"]):not([data-ui-theme]) .et-messages-panel {
  position: relative;
  isolation: isolate;
  background-image: none;
}
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"]:not([data-style="ron-burgundy"]):not([data-style="royal-cream"]):not([data-style="polished-granite"]):not([data-style="carrara-marble"]):not([data-style="black-galaxy"]):not([data-ui-theme]) .et-folders-panel::before,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"]:not([data-style="ron-burgundy"]):not([data-style="royal-cream"]):not([data-style="polished-granite"]):not([data-style="carrara-marble"]):not([data-style="black-galaxy"]):not([data-ui-theme]) .et-reader-panel::before,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"]:not([data-style="ron-burgundy"]):not([data-style="royal-cream"]):not([data-style="polished-granite"]):not([data-style="carrara-marble"]):not([data-style="black-galaxy"]):not([data-ui-theme]) .et-messages-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--trol-skin-texture, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: soft-light;
}
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"]:not([data-style="ron-burgundy"]):not([data-style="royal-cream"]):not([data-style="polished-granite"]):not([data-style="carrara-marble"]):not([data-style="black-galaxy"]):not([data-ui-theme]) .et-folders-panel > *,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"]:not([data-style="ron-burgundy"]):not([data-style="royal-cream"]):not([data-style="polished-granite"]):not([data-style="carrara-marble"]):not([data-style="black-galaxy"]):not([data-ui-theme]) .et-reader-panel > *,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"]:not([data-style="ron-burgundy"]):not([data-style="royal-cream"]):not([data-style="polished-granite"]):not([data-style="carrara-marble"]):not([data-style="black-galaxy"]):not([data-ui-theme]) .et-messages-panel > * {
  position: relative;
  z-index: 1;
}

/* ================================================================== *
 * TASK 2 / P2b (2026-05-30): expanded catalog + textures on ALL themes
 * New calm stone skins (travertine, carrara) + busy organics
 * (tiger/leopard/zebra/alligator/lizard/ostrich). Style-only gate REMOVED —
 * textures paint on palette themes too (additive [data-ui-theme] rules).
 * Busy organics get an opacity cap + light blur (scrim); texture always rides a
 * ::after BEHIND the shell content / under a soft-light panel fill, so text stays
 * AA-legible on any theme.
 * ================================================================== */
html[data-trol-texture="travertine"] {
  --trol-skin-texture: url("/assets/textures/skin-travertine.svg");
  --trol-skin-opacity: 0.46;
}
html[data-trol-texture="carrara"] {
  --trol-skin-texture: url("/assets/textures/skin-carrara.svg");
  --trol-skin-opacity: 0.52;
}
html[data-trol-texture="tiger"] { --trol-skin-texture: url("/assets/textures/skin-tiger.svg"); }
html[data-trol-texture="leopard"] { --trol-skin-texture: url("/assets/textures/skin-leopard.svg"); }
html[data-trol-texture="zebra"] { --trol-skin-texture: url("/assets/textures/skin-zebra.svg"); }
html[data-trol-texture="alligator"] { --trol-skin-texture: url("/assets/textures/skin-alligator.svg"); }
html[data-trol-texture="lizard"] { --trol-skin-texture: url("/assets/textures/skin-lizard.svg"); }
html[data-trol-texture="ostrich"] { --trol-skin-texture: url("/assets/textures/skin-ostrich.svg"); }
html[data-trol-texture-busy="1"] {
  --trol-skin-opacity: 0.18;
  --trol-skin-opacity-cap: 0.34;
  --trol-skin-filter: saturate(0.9) blur(0.5px);
}

/* ── Textures on PALETTE themes (P2b — every theme coverage) ─────────────────── */
html[data-et-app="mail"][data-ui-theme][data-trol-texture] .et-shell.et-mail-shell { position: relative; isolation: isolate; }
html[data-et-app="mail"][data-ui-theme][data-trol-texture] .et-shell.et-mail-shell > * { position: relative; z-index: 1; }
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="backdrop"] .et-shell.et-mail-shell::after,
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="island"]:not([data-trol-3d="on"]) .et-shell.et-mail-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--trol-skin-texture, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: min(var(--trol-skin-opacity-cap, 1), calc(var(--trol-skin-opacity, 0.42) * var(--trol-skin-amount, 1)));
  filter: saturate(var(--trol-skin-saturate, 1)) contrast(var(--trol-skin-depth, 1)) var(--trol-skin-filter, );
}
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"] .et-folders-panel,
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"] .et-reader-panel,
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"] .et-messages-panel {
  position: relative;
  isolation: isolate;
  background-image: none;
  box-shadow: var(--trol-island-shadow) !important;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px)) !important;
}
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"] .et-folders-panel::before,
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"] .et-reader-panel::before,
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"] .et-messages-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--trol-skin-texture, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: soft-light;
}
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"] .et-folders-panel > *,
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"] .et-reader-panel > *,
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="island"][data-trol-3d="on"] .et-messages-panel > * {
  position: relative;
  z-index: 1;
}

/* v209 — palette + texture: transparent folders shell + folder row islands. */
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="backdrop"] .et-folders-panel,
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="backdrop"] .et-folders-panel #et-folders.et-stub-list,
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="island"]:not([data-trol-3d="on"]) .et-folders-panel,
html[data-et-app="mail"][data-ui-theme][data-trol-texture][data-trol-texture-role="island"]:not([data-trol-3d="on"]) .et-folders-panel #et-folders.et-stub-list {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-et-app="mail"][data-ui-theme][data-trol-texture] .et-folders-panel #et-folders.et-stub-list li.et-folder-row {
  background-color: var(--et-list-bg, var(--et-panel-bg-b, var(--surface-elev, #222))) !important;
  background-image: none !important;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px)) !important;
  box-shadow: var(--trol-island-shadow) !important;
  margin: 0 6px 10px !important;
}

/* ================================================================== *
 * FIX 2026-06-01 v207/v208: block fixed-backdrop bleed WITHOUT list slabs.
 * v206 used --et-wood-cabinet-base (#0e0804) on list/reader → flat charcoal.
 * v207 restored leather tokens + --trol-island-shadow on reader/folders but
 * re-painted .et-messages-panel opaque → one dark slab (user v207 nope).
 * v208: transparent list shell; opaque li.et-msg-row islands; reader leather
 * chrome + opaque paper. Wood stays in shell gutters only. */

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]),
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) {
  --trol-island-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.42);
}

/* Palette + texture backdrop: transparent list interior; rows are the mats. */
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="backdrop"] .et-messages-panel,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="backdrop"] .et-messages-panel #et-messages.et-stub-list,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"]:not([data-trol-3d="on"]) .et-messages-panel,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"]:not([data-trol-3d="on"]) .et-messages-panel #et-messages.et-stub-list {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="backdrop"] .et-reader-panel,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="backdrop"] #et-reader-stage.et-reader-stage,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="backdrop"] #et-reader-content-host,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="backdrop"] .et-reader-content-host,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"]:not([data-trol-3d="on"]) .et-reader-panel,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"]:not([data-trol-3d="on"]) #et-reader-stage.et-reader-stage,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"]:not([data-trol-3d="on"]) #et-reader-content-host,
html[data-et-app="mail"][data-trol-texture][data-trol-texture-role="island"]:not([data-trol-3d="on"]) .et-reader-content-host {
  background-color: var(--et-reader-bg, var(--et-panel-bg-c, var(--surface-card, #262626))) !important;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px)) !important;
  box-shadow: var(--trol-island-shadow) !important;
}

/* Wood cabinet — Ron Burgundy / Royal Cream: three raised leather islands on wood. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel #et-folders.et-stub-list,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel #et-folders.et-stub-list {
  background-color: var(--jt-bg-sidebar, var(--surface-base)) !important;
  background-image: var(--et-leather-layer, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: cover, 256px 256px !important;
  background-blend-mode: soft-light, normal !important;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px)) !important;
  box-shadow: var(--trol-island-shadow) !important;
}
/* Ron Burgundy list column — transparent shell; wood shows between row islands. */
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel > h2,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel > h2,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel .et-msgs-panel-head,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel .et-msgs-panel-head,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel {
  background-color: var(--et-reader-leather-bg, color-mix(in srgb, #2e1c12 46%, var(--surface-base, #261a14))) !important;
  background-image: var(--et-leather-layer, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: cover, 256px 256px !important;
  background-blend-mode: soft-light, normal !important;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px)) !important;
  box-shadow: var(--trol-island-shadow) !important;
  background-clip: border-box !important;
  position: relative;
  z-index: 1;
}
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-reader-stage.et-reader-stage,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-reader-stage.et-reader-stage,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-reader-content-host,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-reader-content-host,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-content-host,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-content-host {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-mail-main .et-messages-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-mail-main .et-messages-panel,
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-messages-panel #et-messages.et-stub-list,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-messages-panel #et-messages.et-stub-list {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-reader-panel,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-reader-panel {
  background-color: var(--et-reader-leather-bg, color-mix(in srgb, #2e1c12 46%, var(--surface-base))) !important;
  background-image: var(--et-leather-layer, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: cover, 256px 256px !important;
  background-blend-mode: soft-light, normal !important;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px)) !important;
  box-shadow: var(--trol-island-shadow) !important;
}

/* v208 — row islands block fixed backdrop; list shell stays transparent. */
html[data-et-app="mail"][data-trol-texture] .et-messages-panel .et-stub-list li.et-msg-row,
html[data-et-app="mail"][data-ui-theme][data-trol-texture] .et-messages-panel .et-stub-list li.et-msg-row,
html[data-et-app="mail"][data-palette][data-trol-texture] .et-messages-panel .et-stub-list li.et-msg-row {
  background-color: var(--et-list-bg, var(--et-panel-bg-b, var(--surface-elev, #222))) !important;
  background-image: none !important;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px)) !important;
  box-shadow: var(--trol-island-shadow) !important;
  margin: 0 6px 10px !important;
}
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list li.et-msg-row,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list li.et-msg-row {
  background-color: color-mix(in srgb, #1f1410 50%, var(--et-list-bg, var(--et-panel-bg-b))) !important;
  background-image: var(--et-leather-layer, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: cover, 256px 256px !important;
  background-blend-mode: soft-light, normal !important;
  margin: 0 6px 10px !important;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px)) !important;
  border: none !important;
  box-shadow: var(--trol-island-shadow) !important;
}
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list li.et-msg-row.et-active,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list li.et-msg-row.et-active {
  border-left: 2px solid var(--et-accent, var(--family-bright, #c4a574)) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--family-bright, #c4a574) 80%, transparent),
    0 0 22px color-mix(in srgb, var(--family-bright, #c4a574) 42%, transparent),
    var(--trol-island-shadow) !important;
}
html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-messages-panel #et-messages.et-stub-list li.et-msg-row,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme])[data-et-woodgrain="off"] .et-messages-panel #et-messages.et-stub-list li.et-msg-row {
  background-color: var(--et-list-bg, var(--et-panel-bg-b)) !important;
  background-image: var(--et-leather-layer, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: cover, 256px 256px !important;
  background-blend-mode: soft-light, normal !important;
  margin: 0 6px 10px !important;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px)) !important;
  box-shadow: var(--trol-island-shadow) !important;
}
html[data-et-app="mail"][data-trol-texture] .et-reader-body,
html[data-et-app="mail"][data-trol-texture] #et-reader-body.et-reader-body,
html[data-et-app="mail"][data-trol-texture] .et-reader-html:not(.et-reader-html--framed),
html[data-et-app="mail"][data-ui-theme][data-trol-texture] .et-reader-body,
html[data-et-app="mail"][data-ui-theme][data-trol-texture] #et-reader-body.et-reader-body,
html[data-et-app="mail"][data-ui-theme][data-trol-texture] .et-reader-html:not(.et-reader-html--framed),
html[data-et-app="mail"][data-palette][data-trol-texture] .et-reader-body,
html[data-et-app="mail"][data-palette][data-trol-texture] #et-reader-body.et-reader-body,
html[data-et-app="mail"][data-palette][data-trol-texture] .et-reader-html:not(.et-reader-html--framed) {
  background-color: var(--et-reader-surface, var(--et-reader-paper-bg, #fffdf8)) !important;
  background-image: none !important;
}

/* ================================================================== *
 * v210 — desktop scroll + opaque reader paper + slim reader wood-mat   *
 * (2026-06-01) Fixes theme-standardize/v208 regressions at ≥901px.   */

@media (min-width: 901px) {
  /* Fix 1 belt-and-suspenders: v208 transparent list must still scroll on desktop. */
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-messages-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-messages-panel #et-messages.et-stub-list {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  /* Fix 2 — opaque paper on Ron Burgundy / Royal Cream (block fixed wood bleed through iframe/HTML). */
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-body:not(.et-hidden),
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-body:not(.et-hidden),
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-html,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-body:not(.et-hidden),
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-body:not(.et-hidden),
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-html {
    background-color: var(--et-reader-surface, var(--et-reader-paper-bg, #fffdf8)) !important;
    background-image: none !important;
    isolation: isolate;
    position: relative;
    z-index: 1;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-html .et-reader-mail-frame,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-html .et-reader-mail-frame {
    background-color: var(--et-reader-surface, var(--et-reader-paper-bg, #fffdf8)) !important;
  }

  /* Fix 3 — slimmer reader wood-mat: more shell wood visible in the gutter (desktop only). */
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-reader-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-mail-main .et-reader-panel {
    padding: 0.18rem 0.24rem !important;
    box-shadow:
      inset 0 2px 8px rgba(0, 0, 0, 0.36),
      inset 0 0 0 1px color-mix(in srgb, var(--family-bright, #c4a574) 10%, transparent) !important;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage {
    margin: 0.1rem 0.2rem 0.22rem;
    padding: 0.18rem 0.22rem 0.24rem;
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.26);
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-content-host,
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-content-host,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-content-host,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-content-host {
    padding: 0.42rem 0.48rem 0.5rem;
    margin: 0 0.32rem 0.28rem;
  }
}

/* ================================================================== *
 * v211 — skin backdrop in wood gutters ONLY (2026-06-01)
 *
 * ROOT CAUSE: `.et-shell.et-mail-shell::after` paints `--trol-skin-texture` with
 * `background-attachment:fixed` at z-index:0 (~2171-2186). Ron Burgundy ~664-675
 * forces `.et-folders-panel` / `.et-reader-panel` transparent for native wood;
 * v208 restores leather on panels but leaves `#et-reader-stage` +
 * `#et-reader-content-host` transparent (~2369-2377). With a non-wood skin the fixed
 * ::after bleeds through those interiors — golden wash over folders + email HTML.
 * Island+3D panel skin rules exclude wood styles (~2202); bundle default for
 * ron-burgundy is textureRole=backdrop (~STYLE_TEXTURE_DEFAULTS).
 *
 * FIX: opaque panel chrome (--et-leather-layer / theme sidebar, never
 * --trol-skin-texture on panels). Opaque reader mat + paper above shell ::after.
 * Messages list stays transparent (v208/v210 scroll); row islands stay opaque.
 * ================================================================== */

html[data-et-app="mail"][data-trol-texture][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel,
html[data-et-app="mail"][data-trol-texture][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel,
html[data-et-app="mail"][data-trol-texture][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel #et-folders.et-stub-list,
html[data-et-app="mail"][data-trol-texture][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-folders-panel #et-folders.et-stub-list {
  background-color: var(--jt-bg-sidebar, var(--surface-base)) !important;
  background-image: var(--et-leather-layer, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: cover, 256px 256px !important;
  background-blend-mode: soft-light, normal !important;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px)) !important;
  box-shadow: var(--trol-island-shadow) !important;
  isolation: isolate !important;
  position: relative;
  z-index: 1;
}

html[data-et-app="mail"][data-trol-texture][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel,
html[data-et-app="mail"][data-trol-texture][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-reader-panel {
  background-color: var(--et-reader-leather-bg, color-mix(in srgb, #2e1c12 46%, var(--surface-base, #261a14))) !important;
  background-image: var(--et-leather-layer, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: cover, 256px 256px !important;
  background-blend-mode: soft-light, normal !important;
  background-clip: border-box !important;
  border-radius: var(--et-panel-radius, var(--trol-panel-radius, 10px)) !important;
  box-shadow: var(--trol-island-shadow) !important;
  isolation: isolate !important;
  position: relative;
  z-index: 1;
}

html[data-et-app="mail"][data-trol-texture][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage,
html[data-et-app="mail"][data-trol-texture][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-stage.et-reader-stage,
html[data-et-app="mail"][data-trol-texture][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-content-host,
html[data-et-app="mail"][data-trol-texture][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-content-host,
html[data-et-app="mail"][data-trol-texture][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-content-host,
html[data-et-app="mail"][data-trol-texture][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-content-host {
  background-color: var(--et-reader-leather-bg, color-mix(in srgb, #0e0806 72%, var(--surface-base))) !important;
  background-image: var(--et-leather-layer, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: cover, 256px 256px !important;
  background-blend-mode: overlay, normal !important;
  isolation: isolate !important;
  position: relative;
  z-index: 1;
}

html[data-et-app="mail"][data-trol-texture][data-style="ron-burgundy"]:not([data-ui-theme]) #et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-trol-texture][data-style="royal-cream"]:not([data-ui-theme]) #et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-trol-texture][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-trol-texture][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-trol-texture][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-html,
html[data-et-app="mail"][data-trol-texture][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-html,
html[data-et-app="mail"][data-trol-texture][data-style="ron-burgundy"]:not([data-ui-theme]) .et-reader-html .et-reader-mail-frame,
html[data-et-app="mail"][data-trol-texture][data-style="royal-cream"]:not([data-ui-theme]) .et-reader-html .et-reader-mail-frame {
  background-color: var(--et-reader-surface, var(--et-reader-paper-bg, #fffdf8)) !important;
  background-image: none !important;
  isolation: isolate;
  position: relative;
  z-index: 2;
}

/* Palette + texture — opaque reader chrome/paper (skin stays in shell gutters). */
html[data-et-app="mail"][data-ui-theme][data-trol-texture] .et-reader-panel,
html[data-et-app="mail"][data-palette][data-trol-texture] .et-reader-panel,
html[data-et-app="mail"][data-ui-theme][data-trol-texture] #et-reader-stage.et-reader-stage,
html[data-et-app="mail"][data-palette][data-trol-texture] #et-reader-stage.et-reader-stage,
html[data-et-app="mail"][data-ui-theme][data-trol-texture] #et-reader-content-host,
html[data-et-app="mail"][data-palette][data-trol-texture] #et-reader-content-host,
html[data-et-app="mail"][data-ui-theme][data-trol-texture] .et-reader-content-host,
html[data-et-app="mail"][data-palette][data-trol-texture] .et-reader-content-host {
  background-color: var(--et-reader-bg, var(--et-panel-bg-c, var(--surface-card, #262626))) !important;
  background-image: none !important;
  isolation: isolate !important;
  position: relative;
  z-index: 1;
}

html[data-et-app="mail"][data-ui-theme][data-trol-texture] #et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-palette][data-trol-texture] #et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-ui-theme][data-trol-texture] .et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-palette][data-trol-texture] .et-reader-body:not(.et-hidden),
html[data-et-app="mail"][data-ui-theme][data-trol-texture] .et-reader-html,
html[data-et-app="mail"][data-palette][data-trol-texture] .et-reader-html,
html[data-et-app="mail"][data-ui-theme][data-trol-texture] .et-reader-html .et-reader-mail-frame,
html[data-et-app="mail"][data-palette][data-trol-texture] .et-reader-html .et-reader-mail-frame {
  background-color: var(--et-reader-surface, var(--et-reader-paper-bg, #fffdf8)) !important;
  background-image: none !important;
  isolation: isolate;
  position: relative;
  z-index: 2;
}

html[data-et-app="mail"][data-ui-theme][data-trol-texture] .et-folders-panel #et-folders.et-stub-list li.et-folder-row,
html[data-et-app="mail"][data-palette][data-trol-texture] .et-folders-panel #et-folders.et-stub-list li.et-folder-row {
  background-color: var(--et-list-bg, var(--et-panel-bg-b, var(--surface-elev, #222))) !important;
  background-image: none !important;
}

@media (min-width: 901px) {
  html[data-et-app="mail"][data-trol-texture] #et-reader-body:not(.et-hidden),
  html[data-et-app="mail"][data-trol-texture] .et-reader-body:not(.et-hidden),
  html[data-et-app="mail"][data-trol-texture] .et-reader-html,
  html[data-et-app="mail"][data-trol-texture] .et-reader-html .et-reader-mail-frame {
    background-color: var(--et-reader-surface, var(--et-reader-paper-bg, #fffdf8)) !important;
    background-image: none !important;
    isolation: isolate;
    position: relative;
    z-index: 2;
  }
}

/* ================================================================== *
 * v212 — mobile reader uniform mat (2026-06-01)
 *
 * ROOT CAUSE: app.css "v2 mobile scroll" block reintroduced
 * `padding-bottom: calc(tabbar-h + safe-area)` on #et-reader-panel with !important.
 * Panel is absolute/inset:0 inside #et-mail-main whose bottom: already clears the tab bar
 * → ~54px dead zone + thick bottom vs thin 4px side mat on #et-reader-stage.
 *
 * FIX: panel padding-bottom 0; stage mat 0 4px 4px (bottom == sides). v211 opaque paper kept.
 * ================================================================== */

@media (max-width: 900px) {
  html.et-mobile-view-reader[data-et-app="mail"] #et-reader-panel.et-reader-panel {
    padding-bottom: 0 !important;
  }

  html.et-mobile-view-reader[data-et-app="mail"] #et-reader-stage.et-reader-stage,
  html.et-mobile-view-reader[data-et-app="mail"][data-style] #et-reader-stage.et-reader-stage {
    padding: 0 4px 4px !important;
  }

  html.et-mobile-view-reader[data-et-app="mail"] #et-reader-content-host,
  html.et-mobile-view-reader[data-et-app="mail"] .et-reader-content-host {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ================================================================== *
 * v213 — restore wood cabinet gutters + desktop island insets (2026-06-01)
 *
 * ROOT CAUSE: ~2193-2198 zeroed `.et-shell.et-mail-shell::before` whenever
 * `data-trol-texture` was not `wood`, leaving only `--et-wood-cabinet-base`
 * (flat charcoal) in shell gutters + message row gaps. Cmdbar ::before kept
 * its own wood layer → thin grain strip at bottom only. v211 opaque panel
 * chrome was correct; v208 row islands + v210 scroll stay. Desktop ~2036-2046
 * padded leather mats full-bleed inside column tracks — no wood channel at
 * panel edges.
 *
 * FIX: native wood ::before ALWAYS on for woodgrain-on (skin stacks ::after).
 * Shell/mail-main transparent; folders + reader are margin-inset leather islands;
 * messages column stays transparent with floating row cards.
 * ================================================================== */

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell::before,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-color: var(--et-wood-cabinet-base, color-mix(in srgb, #0e0804 90%, var(--surface-base)));
  background-image: var(--et-wood-bezel-layer, var(--et-woodgrain-layer)) !important;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: var(--et-wood-bezel-opacity, var(--et-woodgrain-opacity, 0.72)) !important;
  filter: var(--et-wood-filter, sepia(var(--et-wood-sepia, 0.24)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.24)) contrast(var(--et-wood-contrast, 1.18)));
  mix-blend-mode: var(--et-woodgrain-blend, normal);
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell {
  background-image: none !important;
}

html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main,
html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main {
  background-color: transparent !important;
  background-image: none !important;
}

@media (min-width: 901px) {
  /* Island insets — wood peeks around leather panels; flush to wood gutter columns. */
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell > .et-folders-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell > .et-folders-panel {
    margin: var(--et-panel-mat-inset, 0.48rem) 0 var(--et-panel-mat-inset, 0.48rem) var(--et-panel-mat-inset, 0.48rem) !important;
    padding: 0 !important;
    box-shadow: var(--trol-island-shadow) !important;
    align-self: stretch;
    min-height: 0;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main .et-messages-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main .et-messages-panel {
    margin: var(--et-panel-mat-inset, 0.48rem) 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main .et-reader-panel,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main .et-reader-panel {
    margin: var(--et-panel-mat-inset, 0.48rem) var(--et-panel-mat-inset, 0.48rem) var(--et-panel-mat-inset, 0.48rem) 0 !important;
    padding: 0.18rem 0.24rem !important;
    box-shadow: var(--trol-island-shadow) !important;
    align-self: stretch;
    min-height: 0;
  }

  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell > .et-folder-split,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .et-shell.et-mail-shell > .et-folder-split,
  html[data-et-app="mail"][data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main > .et-mail-split,
  html[data-et-app="mail"][data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) #et-mail-main.et-mail-main > .et-mail-split {
    align-self: stretch;
    margin-top: var(--et-panel-mat-inset, 0.48rem);
    margin-bottom: var(--et-panel-mat-inset, 0.48rem);
  }
}