/* ============================================================
   jv-memories-date-navigation — GLOBAL PLACEHOLDER STYLESHEET
   Include this file in memories.php (global scope, not shadow).
   Provides everything needed to paint the server-rendered
   placeholder before the web component upgrades.
   ============================================================ */

/* ---- host element ---- */
jv-memories-date-navigation {
    display: block;
    width: 100%;
}

/* ---- design tokens (fallbacks if not on :root elsewhere) ---- */
:root {
    --jnm-bg: #f5f3ef;
    --jnm-surface: #fff;
    --jnm-soft: #faf9f7;
    --jnm-text: #242321;
    --jnm-muted: #77736d;
    --jnm-border: #e7e3dd;
    --jnm-border-strong: #d9d4cc;
    --jnm-accent: #242321;
    --jnm-accent-soft: #ece9e3;
    --jnm-media: #e9e6e0;

    --jnm-warm-border: rgb(230, 217, 201);
    --jnm-warm-ink: rgb(58, 47, 38);
    --jnm-warm-soft: rgb(250, 247, 243);
    --jnm-warm-muted: rgb(122, 106, 90);

    --jnm-shadow-sm:
            0 1px 2px rgba(15, 23, 42, .04),
            0 10px 28px -18px rgba(15, 23, 42, .30);
}

/* ============================================================
   PLACEHOLDER CARD SHELL
   Mirrors the real .jv-lifecal card so the server-rendered
   placeholder looks identical to the final render.
   ============================================================ */
jv-memories-date-navigation > .jv-lifecal {
    padding: 20px 18px 16px;
    border: 1px solid var(--jnm-border);
    border-radius: 18px;
    background:
            radial-gradient(
                    120% 90% at 100% 0%,
                    rgba(168, 85, 247, .07) 0%,
                    rgba(168, 85, 247, 0) 62%
            ),
            var(--jnm-surface);
    box-shadow: var(--jnm-shadow-sm);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}
jv-memories-date-navigation > .jv-lifecal *,
jv-memories-date-navigation > .jv-lifecal *::before,
jv-memories-date-navigation > .jv-lifecal *::after {
    box-sizing: border-box;
}

/* hidden accessible heading (present but not painted) */
jv-memories-date-navigation > .jv-lifecal > .jv-lifecal-heading-title[hidden] {
    display: none;
}

/* ============================================================
   SHIMMER BASE
   ============================================================ */
@keyframes jv-lifecal-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

jv-memories-date-navigation .jv-lifecal-placeholder-bar,
jv-memories-date-navigation .jv-lifecal-placeholder-block {
    --jnp-base: #ece8e1;
    --jnp-hi:   #f7f4ef;
    display: block;
    background-color: var(--jnp-base);
    background-image: linear-gradient(
            90deg,
            var(--jnp-base) 0%,
            var(--jnp-hi)   45%,
            var(--jnp-base) 90%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: jv-lifecal-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-bar   { height: 12px; }
jv-memories-date-navigation .jv-lifecal-placeholder-block { border-radius: 12px; }

/* ============================================================
   HEADING + RANGE + SUMMARY
   ============================================================ */
jv-memories-date-navigation .jv-lifecal-placeholder-heading {
    width: 132px;
    height: 14px;
    margin-bottom: 16px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-range {
    width: min(220px, 62%);
    height: 26px;
    border-radius: 10px;
    margin-bottom: 10px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-summary {
    width: min(262px, 78%);
    height: 12px;
    margin-bottom: 16px;
}

/* ============================================================
   DENSITY RAIL
   ============================================================ */
jv-memories-date-navigation .jv-lifecal-placeholder-rail {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 40px;
    margin: 0 0 7px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-rail-bar {
    flex: 1 1 0;
    min-width: 2px;
    border-radius: 999px;
    --jnp-base: #e7e1f6;
    --jnp-hi:   #f3eefe;
}

jv-memories-date-navigation .jv-lifecal-placeholder-rail-caption {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 16px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-rail-caption
.jv-lifecal-placeholder-bar {
    height: 10px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-rail-caption
.jv-lifecal-placeholder-bar:first-child {
    width: 96px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-rail-caption
.jv-lifecal-placeholder-bar:last-child {
    width: 78px;
}

/* ============================================================
   DECADE SCROLL BODY
   ============================================================ */
jv-memories-date-navigation .jv-lifecal-placeholder-scroll {
    max-height: clamp(230px, 34vh, 350px);
    overflow: hidden;
    margin: 0 -8px;
    padding: 2px 8px 4px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-decade
+ .jv-lifecal-placeholder-decade {
    margin-top: 14px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-decade-label {
    width: 54px;
    height: 10px;
    margin: 0 0 8px 2px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-chip {
    height: 42px;
    border-radius: 11px;
}

/* ============================================================
   FOOTER
   ============================================================ */
jv-memories-date-navigation .jv-lifecal-placeholder-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--jnm-border);
}

jv-memories-date-navigation .jv-lifecal-placeholder-foot
.jv-lifecal-placeholder-bar {
    height: 12px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-foot
.jv-lifecal-placeholder-bar:first-child {
    width: 132px;
}

jv-memories-date-navigation .jv-lifecal-placeholder-jump {
    width: 84px;
    height: 28px;
    border-radius: 999px;
    --jnp-base: #ddd5ca;
    --jnp-hi:   #ece5db;
}

/* ============================================================
   RETIRE PLACEHOLDER ONCE COMPONENT SIGNALS READY
   (Belt-and-braces — render() also replaces the innerHTML.)
   ============================================================ */
jv-memories-date-navigation[data-jn-ready] > .jv-lifecal {
    display: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    jv-memories-date-navigation .jv-lifecal-placeholder-scroll {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 640px) {
    jv-memories-date-navigation .jv-lifecal-placeholder-range {
        height: 22px;
    }
    jv-memories-date-navigation .jv-lifecal-placeholder-rail {
        height: 34px;
    }
    jv-memories-date-navigation .jv-lifecal-placeholder-chip {
        height: 38px;
    }
}

@media (max-width: 420px) {
    jv-memories-date-navigation .jv-lifecal-placeholder-grid {
        gap: 5px;
    }
    jv-memories-date-navigation .jv-lifecal-placeholder-chip {
        height: 34px;
        border-radius: 10px;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    jv-memories-date-navigation .jv-lifecal-placeholder-bar,
    jv-memories-date-navigation .jv-lifecal-placeholder-block {
        animation: none;
        background-image: none;
        background-color: #e9e4dc;
    }
}

/* ============================================================
   SKELETON CARDS (grid loading state)
   ============================================================ */
@keyframes mem-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.mem-skeleton-card {
    position: relative;
    min-width: 0;
    background: #fff;
    border-radius: 0.8rem;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.04);
}

.mem-skeleton-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: #ece8e1;
    background-image: linear-gradient(
            90deg,
            #ece8e1 0%,
            #f7f4ef 45%,
            #ece8e1 90%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: mem-skeleton-shimmer 1.5s ease-in-out infinite;
}

.mem-skeleton-body {
    padding: 0.8rem 0.9rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mem-skeleton-bar {
    display: block;
    height: 10px;
    border-radius: 6px;
    background-color: #ece8e1;
    background-image: linear-gradient(
            90deg,
            #ece8e1 0%,
            #f7f4ef 45%,
            #ece8e1 90%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: mem-skeleton-shimmer 1.5s ease-in-out infinite;
}

.mem-skeleton-title { width: 82%; height: 14px; }
.mem-skeleton-meta  { width: 58%; }
.mem-skeleton-tag   { width: 40%; height: 9px; margin-top: 0.15rem; }

@media (max-width: 599px) {
    .mem-skeleton-media { aspect-ratio: 3 / 4; }
    .mem-skeleton-body  { padding: 0.75rem 0.7rem 0.8rem; }
    .mem-skeleton-title { width: 88%; height: 12px; }
    .mem-skeleton-meta  { width: 62%; height: 9px; }
    .mem-skeleton-tag   { width: 44%; height: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .mem-skeleton-media,
    .mem-skeleton-bar {
        animation: none;
        background-image: none;
        background-color: #e9e4dc;
    }
}



jv-memories { display: block; width: 100%; }

jv-memories[data-jn-ready] > .mem-php-placeholder { display: none; }

@keyframes mem-php-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.mem-php-bar,
.mem-php-avatar,
.mem-php-media {
    background-color: #ece8e1;
    background-image: linear-gradient(90deg, #ece8e1 0%, #f7f4ef 45%, #ece8e1 90%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: mem-php-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.mem-php-placeholder { padding: 0.75rem 1rem; background: #f1f5f9; }

.mem-php-header {
    display: flex; align-items: center; gap: 20px;
    padding: 24px 0; border-bottom: 1px solid #dbe3ec;
}
.mem-php-avatar { width: 92px; height: 92px; flex: 0 0 92px; border-radius: 50%; }
.mem-php-copy   { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.mem-php-title  { width: min(280px, 45%); height: 26px; }
.mem-php-meta   { width: min(360px, 62%); height: 14px; }

.mem-php-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 12px;
}
@media (min-width: 600px) {
    .mem-php-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
}
@media (min-width: 1024px) {
    .mem-php-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}

.mem-php-card {
    background: #fff;
    border-radius: 0.8rem;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding-bottom: 0.9rem;
}
.mem-php-media      { width: 100%; aspect-ratio: 16 / 10; border-radius: 0; }
.mem-php-card-title { width: 82%; height: 14px; margin: 0.8rem 0.9rem 0; }
.mem-php-card-meta  { width: 58%; height: 10px; margin: 0.4rem 0.9rem 0; }

@media (max-width: 599px) {
    .mem-php-media { aspect-ratio: 3 / 4; }
}

@media (prefers-reduced-motion: reduce) {
    .mem-php-bar, .mem-php-avatar, .mem-php-media {
        animation: none; background-image: none; background-color: #e9e4dc;
    }
}

/* ============================================================
   LIFE IN NUMBERS — card + placeholder
   ============================================================ */
jv-life-in-numbers {
    display: block;
    width: 100%;
    margin-top: 20px;
}
jv-life-in-numbers:first-child { margin-top: 0; }

jv-life-in-numbers[data-jn-ready] .jv-life-in-numbers-placeholder { display: none; }

.jv-life-in-numbers-placeholder { display: block; width: 100%; }

/* card — same visual for placeholder and real component */
.jn-journal-numbers {
    padding: 16px;
    border: 1px solid var(--jnm-border, #e7e3dd);
    border-radius: 16px;
    background:
            radial-gradient(
                    120% 90% at 100% 0%,
                    rgba(16, 185, 129, .07) 0%,
                    rgba(16, 185, 129, 0) 62%
            ),
            var(--jnm-surface, #ffffff);
    box-shadow:
            0 1px 2px rgba(15, 23, 42, .04),
            0 10px 28px -18px rgba(15, 23, 42, .30);
}

.jn-journal-numbers .jn-journal-card-heading::before {
    background: linear-gradient(180deg, #10b981, #14b8a6);
}

.jn-journal-numbers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.jn-journal-numbers-tile {
    padding: 13px 14px 12px;
    border: 1px solid var(--jnm-border, #e7e3dd);
    border-radius: 14px;
    background: var(--jnm-soft, #faf9f7);
}

.jn-journal-numbers-value {
    display: block;
    font-size: 22px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--jnm-text, #242321);
}

.jn-journal-numbers-value small {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    color: var(--jnm-muted, #77736d);
    margin-left: 2px;
}

.jn-journal-numbers-label {
    display: block;
    margin-top: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #a9a29a;
}

/* placeholder skeleton bars */
.jv-life-in-numbers-heading { width: 130px; height: 13px; border-radius: 6px; margin-bottom: 14px; }
.jv-life-in-numbers-value   { width: 46px;  height: 20px; border-radius: 6px; margin-bottom: 8px; }
.jv-life-in-numbers-label   { width: 76px;  height: 9px;  border-radius: 4px; }