/* =====================================================
   HONESTLY, E — Companion Shells (the other 10)
   Quiet shells for Ellis, Ellie, Essie, Erik, Eddie, Ellen,
   Elias, Ezra, Elif, Ember. Mirrors the Emory/Esmé pattern
   but without the right-column specialty panel — these
   companions keep Standard Timeline (per Companion-as-Shell
   doc 2026-05-20).

   Canonical template per shell:
     1. Brand color tokens in :root
     2. .{key}-active::after — fixed right-edge stripe (5px)
     3. .{key}-active .content-area::before — optional bg tint

   Body-class dispatch is handled in js/companions.js
   (applyShellClass). Only one .{key}-active is set at a time.

   Background images are placeholders (radial-gradient tint).
   Swap to an image URL per the May 20 visual texture table
   when Desta has assets (Ellis contemplative, Ellie clear,
   Essie vibrant, Erik grounded, Eddie lived-in, Ellen photo-
   album, Elias library/parchment, Ezra linen/quilted, Elif
   hospital-clean-but-warm, Ember kitchen/paper/spice-warm).
   ===================================================== */

/* -----------------------------------------------------
   Brand tokens
   ----------------------------------------------------- */
:root {
    /* Ellis — philosophical depth, contemplative */
    --ellis-color: #3D4A7A;
    --ellis-tint: rgba(61, 74, 122, 0.06);

    /* Ellie — daily clarity, light */
    --ellie-color: #6B8E7F;
    --ellie-tint: rgba(107, 142, 127, 0.06);

    /* Essie — young voices, warm */
    --essie-color: #D97757;
    --essie-tint: rgba(217, 119, 87, 0.06);

    /* Erik — straightforward, grounded */
    --erik-color: #7A7268;
    --erik-tint: rgba(122, 114, 104, 0.05);

    /* Eddie — real talk, lived-in */
    --eddie-color: #A0593E;
    --eddie-tint: rgba(160, 89, 62, 0.06);

    /* Ellen — life story, archival */
    --ellen-color: #B07B7B;
    --ellen-tint: rgba(176, 123, 123, 0.06);

    /* Elias — quiet wisdom, library */
    --elias-color: #8B6F3A;
    --elias-tint: rgba(139, 111, 58, 0.06);

    /* Ezra — witness, linen */
    --ezra-color: #9C8F73;
    --ezra-tint: rgba(156, 143, 115, 0.07);

    /* Elif — medical, hospital-clean-but-warm */
    --elif-color: #6E9994;
    --elif-tint: rgba(110, 153, 148, 0.06);

    /* Ember — hospitality, kitchen-warm */
    --ember-color: #C26840;
    --ember-tint: rgba(194, 104, 64, 0.06);
}

/* -----------------------------------------------------
   Edge stripes — companion signature
   ----------------------------------------------------- */
.ellis-active::after,
.ellie-active::after,
.essie-active::after,
.erik-active::after,
.eddie-active::after,
.ellen-active::after,
.elias-active::after,
.ezra-active::after,
.elif-active::after,
.ember-active::after {
    content: '';
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    z-index: 9999;
    pointer-events: none;
}

.ellis-active::after { background: var(--ellis-color); }
.ellie-active::after { background: var(--ellie-color); }
.essie-active::after { background: var(--essie-color); }
.erik-active::after  { background: var(--erik-color); }
.eddie-active::after { background: var(--eddie-color); }
.ellen-active::after { background: var(--ellen-color); }
.elias-active::after { background: var(--elias-color); }
.ezra-active::after  { background: var(--ezra-color); }
.elif-active::after  { background: var(--elif-color); }
.ember-active::after { background: var(--ember-color); }

/* -----------------------------------------------------
   Content-area tints — radial wash per companion.
   Replace each background-image with a url(...) when
   real watermark assets are ready (May 20 texture table).
   ----------------------------------------------------- */
.ellis-active .content-area,
.ellie-active .content-area,
.essie-active .content-area,
.erik-active .content-area,
.eddie-active .content-area,
.ellen-active .content-area,
.elias-active .content-area,
.ezra-active .content-area,
.elif-active .content-area,
.ember-active .content-area {
    position: relative;
}

.ellis-active .content-area::before,
.ellie-active .content-area::before,
.essie-active .content-area::before,
.erik-active .content-area::before,
.eddie-active .content-area::before,
.ellen-active .content-area::before,
.elias-active .content-area::before,
.ezra-active .content-area::before,
.elif-active .content-area::before,
.ember-active .content-area::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* === LOAD-BEARING for ALL photo-based generalist shells (Ellis, Ellie,
   Essie, Erik, Eddie, Ellen). Same architectural fix as Ezra/Elif/Ember
   below: the shared rule sets `position: absolute; inset: 0` which would
   size each photo to the tall narrow content-area and either streak it
   (100% 100%) or pixel-zoom it (cover). Override to `position: fixed;
   inset: 0` so the image is sized to the VIEWPORT — recognizable scale,
   tactile presence. Cards have their own solid backgrounds and float
   cleanly. Per-companion texture choices:
     • Ellis  → bark            (philosophical depth, tree-leaning)
     • Ellie  → walkway         (daily clarity, the path forward)
     • Essie  → peonies         (young voices, warm — lilac/pink florals)
     • Erik   → cloudy day      (grounded thinker, contemplating sky)
     • Eddie  → wood-grain      (lived-in real-talk, dark bar / workshop)
     • Ellen  → Meritage wallpaper (THE ARCHIVIST — Easter-egg throughline
                                    to Meritage; NOT tiled, kept whole) */

.ellis-active .content-area::before {
    position: fixed;
    inset: 0;
    background-image: url("https://pub-bd1937786ce445ed93435b74610b5b73.r2.dev/bark.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
}

.ellie-active .content-area::before {
    position: fixed;
    inset: 0;
    background-image: url("https://pub-bd1937786ce445ed93435b74610b5b73.r2.dev/walkway.avif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
}

.essie-active .content-area::before {
    position: fixed;
    inset: 0;
    background-image: url("https://pub-bd1937786ce445ed93435b74610b5b73.r2.dev/peonies.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
}

.erik-active .content-area::before {
    position: fixed;
    inset: 0;
    background-image: url("https://pub-bd1937786ce445ed93435b74610b5b73.r2.dev/cloudyday.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
}

.eddie-active .content-area::before {
    position: fixed;
    inset: 0;
    background-image: url("https://pub-bd1937786ce445ed93435b74610b5b73.r2.dev/wood-grain.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Dark wood is bold — opacity tuned so cream journal cards stay legible. */
    opacity: 0.5;
}

.ellen-active .content-area::before {
    position: fixed;
    inset: 0;
    background-image: url("https://pub-88ff44fd8642488f9a1e7811cafbc3f1.r2.dev/wallpaper.png");
    /* DO NOT TILE — this is the Meritage wallpaper, intentional throughline
       Easter egg. Use as a whole photo (cover, viewport-fixed), kept subtle
       so it reads as "you've been in this room before" not "decorated". */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.45;
}

/* Elias — rub-el-hizb 8-point star tessellation, copied from
   deepenyourperspective.com (his own marketing page). Two overlapping
   squares (one rotated 45°) form each rub-el-hizb star; tiles at 5
   positions per 120×120 tile (center + 4 corners). Gold #C9A24B stroke
   at 0.22 opacity, layered over a deep charcoal backdrop so the gold
   offsets the same way it does on his site (gold-on-dark, not gold-on-
   cream). Journal entry cards retain their own backgrounds above this. */
.elias-active .content-area::before {
    background-color: #25252A;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' width='120' height='120'><g fill='none' stroke='%23C9A24B' stroke-width='0.55' stroke-opacity='0.22'><g transform='translate(60,60)'><rect x='-18' y='-18' width='36' height='36'/><rect x='-18' y='-18' width='36' height='36' transform='rotate(45)'/></g><g transform='translate(0,0)'><rect x='-18' y='-18' width='36' height='36'/><rect x='-18' y='-18' width='36' height='36' transform='rotate(45)'/></g><g transform='translate(120,0)'><rect x='-18' y='-18' width='36' height='36'/><rect x='-18' y='-18' width='36' height='36' transform='rotate(45)'/></g><g transform='translate(0,120)'><rect x='-18' y='-18' width='36' height='36'/><rect x='-18' y='-18' width='36' height='36' transform='rotate(45)'/></g><g transform='translate(120,120)'><rect x='-18' y='-18' width='36' height='36'/><rect x='-18' y='-18' width='36' height='36' transform='rotate(45)'/></g></g></svg>");
    background-size: 120px 120px;
    background-repeat: repeat;
    opacity: 0.92;
}

/* === LOAD-BEARING for the three photo-based shells (Ezra, Elif, Ember).
   The shared rule above sets `position: absolute; inset: 0` which sizes
   the pseudo-element to the content-area — a tall narrow column.
   Photos in that container get either streaked (100% 100%) or
   pixel-zoomed (cover) because the image must scale 3–5× to fill the
   column. Sizing to the VIEWPORT instead (`position: fixed`) shows the
   photo at recognizable scale; the sidebar / right column / journal
   cards each have their own solid backgrounds that visually cover the
   parts of the image that shouldn't show. Fifth-time fix 2026-06-05.
   NEVER revert to absolute; NEVER use background-size: 100% 100%. ===*/

/* Ezra — real quilt photograph. */
.ezra-active .content-area::before {
    position: fixed;
    inset: 0;
    background-image: url("https://pub-1948b1b1579d47bc8925ba58d337f804.r2.dev/VerticalQuilt.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
}

/* Elif — Health Journey. Real Istanbul photograph. */
.elif-active .content-area::before {
    position: fixed;
    inset: 0;
    background-image: url("https://pub-1948b1b1579d47bc8925ba58d337f804.r2.dev/Istanbul.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.62;
}

/* Ember — real kitchen photograph. */
.ember-active .content-area::before {
    position: fixed;
    inset: 0;
    background-image: url("https://pub-1948b1b1579d47bc8925ba58d337f804.r2.dev/kitchenbackground.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
}

.ellis-active .content-area > *,
.ellie-active .content-area > *,
.essie-active .content-area > *,
.erik-active .content-area > *,
.eddie-active .content-area > *,
.ellen-active .content-area > *,
.elias-active .content-area > *,
.ezra-active .content-area > *,
.elif-active .content-area > *,
.ember-active .content-area > * {
    position: relative;
    z-index: 1;
}