/* ════════════════════════════════════════════════════════════════════
   Counseling Journey — "wellbeing journal" aesthetic
   Warm parchment · forest-teal ink · growth spine (seed → bloom)
   Display: Fraunces (serif) · Body: Hanken Grotesk (humanist sans)
   ════════════════════════════════════════════════════════════════════ */

.cj-wrap {
    --cj-parchment: #fbf6ec;
    --cj-paper: #fffdf8;
    --cj-ink: #1e3a34;
    --cj-ink-soft: #547069;
    --cj-seed: #3f8e7b;
    --cj-leaf: #5ba88c;
    --cj-honey: #e0a33e;
    --cj-bloom: #d9744b;
    --cj-sage: #9fbca8;
    --cj-edge: #ece3d2;

    --cj-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --cj-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

    font-family: var(--cj-sans);
    color: var(--cj-ink);
    padding: 18px;
    border-radius: 20px;
    background-color: var(--cj-parchment);
    background-image: radial-gradient(rgba(30, 58, 52, .045) 1px, transparent 1px);
    background-size: 18px 18px;
    box-shadow: inset 0 0 0 1px var(--cj-edge);
}

/* ── Header ───────────────────────────────────────────────────────── */
.cj-head {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    margin-bottom: 26px;
    border-radius: 16px;
    color: #f6efe1;
    background: radial-gradient(140% 120% at 0% 0%, #285048 0%, #1e3a34 55%, #16302a 100%);
    box-shadow: 0 16px 38px rgba(22, 48, 42, .34);
}

.cj-head-contour {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    pointer-events: none;
}

.cj-head-contour path {
    fill: none;
    stroke: rgba(224, 163, 62, .22);
    stroke-width: 1.5;
}

.cj-head-main {
    position: relative;
    z-index: 1;
}

.cj-kicker {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--cj-honey);
    margin-bottom: 4px;
}

.cj-title {
    font-family: var(--cj-serif);
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 1.9rem;
    line-height: 1.05;
    margin: 0;
    letter-spacing: -.01em;
}

.cj-metrics {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cj-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 92px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(251, 246, 236, .10);
    border: 1px solid rgba(251, 246, 236, .18);
    backdrop-filter: blur(3px);
    transition: transform .25s ease, background .25s ease;
}

.cj-metric:hover {
    transform: translateY(-3px);
    background: rgba(251, 246, 236, .18);
}

.cj-metric-num {
    font-family: var(--cj-serif);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.1;
    color: #fdfaf3;
}

.cj-metric-cap {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cj-sage);
    margin-top: 3px;
}

/* ── Timeline ─────────────────────────────────────────────────────── */
.cj-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cj-row {
    display: flex;
    gap: 18px;
}

.cj-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 46px;
    flex: 0 0 46px;
}

.cj-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cj-paper);
    border: 2.5px solid var(--cj-leaf);
    box-shadow: 0 4px 12px rgba(30, 58, 52, .14);
    z-index: 1;
    transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .28s ease;
}

.cj-node-num {
    font-family: var(--cj-serif);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--cj-ink);
}

.cj-node-glyph {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: .66rem;
    color: #fff;
    box-shadow: 0 2px 5px rgba(30, 58, 52, .25);
}

.cj-node-start {
    border-color: var(--cj-seed);
    box-shadow: 0 4px 12px rgba(63, 142, 123, .28), 0 0 0 5px rgba(63, 142, 123, .10);
}

.cj-node-start .cj-node-glyph {
    background: linear-gradient(135deg, #4caf8e, var(--cj-seed));
}

.cj-node-mid {
    border-color: var(--cj-leaf);
}

.cj-node-latest {
    border-color: var(--cj-bloom);
    box-shadow: 0 4px 14px rgba(217, 116, 75, .30), 0 0 0 5px rgba(217, 116, 75, .12);
}

.cj-node-latest .cj-node-num {
    color: var(--cj-bloom);
}

.cj-node-latest .cj-node-glyph {
    background: linear-gradient(135deg, var(--cj-honey), var(--cj-bloom));
}

.cj-row:hover .cj-node {
    transform: scale(1.12) rotate(-4deg);
    box-shadow: 0 8px 20px rgba(30, 58, 52, .24), 0 0 0 6px rgba(91, 168, 140, .16);
}

.cj-line {
    flex: 1 1 auto;
    width: 3px;
    min-height: 34px;
    margin: 4px 0;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--cj-seed), var(--cj-leaf) 45%, var(--cj-honey) 80%, var(--cj-bloom));
}

/* ── Card ─────────────────────────────────────────────────────────── */
.cj-card {
    position: relative;
    flex: 1 1 auto;
    margin-bottom: 18px;
    padding: 16px 18px 16px 20px;
    border: 1px solid var(--cj-edge);
    border-radius: 16px;
    background: var(--cj-paper);
    box-shadow: 0 3px 10px rgba(30, 58, 52, .06);
    transition: box-shadow .28s ease, transform .28s ease;
}

.cj-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 4px;
    background: var(--cj-leaf);
    transition: top .28s ease, bottom .28s ease;
}

.cj-card-start::before { background: linear-gradient(180deg, #4caf8e, var(--cj-seed)); }
.cj-card-mid::before { background: linear-gradient(180deg, var(--cj-leaf), var(--cj-seed)); }
.cj-card-latest::before { background: linear-gradient(180deg, var(--cj-honey), var(--cj-bloom)); }

.cj-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(30, 58, 52, .16);
}

.cj-card:hover::before {
    top: 6px;
    bottom: 6px;
}

.cj-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.cj-session-badge {
    display: inline-flex;
    align-items: center;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cj-ink);
    padding: 4px 12px;
    border-radius: 999px;
    background: #eef3ec;
    border: 1px solid #dde7da;
}

.cj-card-start .cj-session-badge { color: #2c6356; background: #e4f1ea; border-color: #c9e3d4; }
.cj-card-latest .cj-session-badge { color: #a64c2c; background: #fae8df; border-color: #f3d2c2; }

.cj-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .64rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cj-chip-start { color: #2c6356; background: #dff0e6; }
.cj-chip-latest { color: #fff; background: linear-gradient(135deg, var(--cj-honey), var(--cj-bloom)); box-shadow: 0 3px 8px rgba(217, 116, 75, .30); }

.cj-card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

/* Date — editorial serif plate (distinct from counselor) */
.cj-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 16px 8px 14px;
    border-radius: 12px;
    background: linear-gradient(160deg, #fbf6ec, #f3ece0);
    border: 1px solid var(--cj-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

.cj-date-day {
    font-family: var(--cj-serif);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1;
    color: var(--cj-ink);
}

.cj-date-rest {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.cj-date-mon {
    font-family: var(--cj-serif);
    font-weight: 600;
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cj-seed);
}

.cj-date-yr {
    font-size: .74rem;
    font-weight: 600;
    color: var(--cj-ink-soft);
}

.cj-date-time {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    align-self: flex-end;
    margin-bottom: 2px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--cj-ink-soft);
}

.cj-date-time i {
    font-size: .8rem;
    opacity: .7;
}

/* Counselor — warm, person-coloured (distinct from the date plate) */
.cj-counselor {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.cj-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-family: var(--cj-sans);
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg,
        hsl(var(--cj-av-hue, 150) 52% 58%),
        hsl(calc(var(--cj-av-hue, 150) + 24) 56% 42%));
    box-shadow: 0 4px 10px hsla(var(--cj-av-hue, 150) 50% 40% / .35);
    border: 2px solid var(--cj-paper);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.cj-counselor:hover .cj-avatar {
    transform: scale(1.1) rotate(4deg);
}

.cj-counselor-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.cj-counselor-label {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    color: var(--cj-sage);
}

.cj-counselor-name {
    font-family: var(--cj-serif);
    font-weight: 600;
    font-style: italic;
    font-size: 1.04rem;
    /* Vivid, per-counsellor colour (matches the avatar hue) so the name never reads
       as dull and stays high-contrast on the light card in both light and dark mode. */
    color: hsl(var(--cj-av-hue, 150) 55% 34%);
}

/* Gap connector */
.cj-gap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.cj-gap-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cj-honey);
    box-shadow: 0 0 0 3px rgba(224, 163, 62, .18);
}

.cj-gap-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    color: #8a5a1f;
    background: #fcf2db;
    border: 1px dashed #eccf95;
    transition: background .25s ease, transform .25s ease;
}

.cj-gap-pill i {
    font-size: 1rem;
    transition: transform .25s ease;
}

.cj-card:hover .cj-gap-pill {
    background: #f8e6c2;
    transform: translateX(2px);
}

.cj-card:hover .cj-gap-pill i {
    transform: translateY(2px);
}

/* ── Action / empty state ─────────────────────────────────────────── */
.cj-actions {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.cj-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--cj-sans);
    font-weight: 600;
    font-size: .9rem;
    color: #fdfaf3;
    padding: 10px 22px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f6a5c, #1e3a34);
    box-shadow: 0 8px 20px rgba(30, 58, 52, .30);
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.cj-add-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 12px 26px rgba(30, 58, 52, .40);
}

.cj-add-btn:active {
    transform: translateY(0);
}

.cj-empty {
    text-align: center;
    padding: 40px 20px;
    border-radius: 20px;
    background-color: var(--cj-parchment);
    background-image: radial-gradient(rgba(30, 58, 52, .045) 1px, transparent 1px);
    background-size: 18px 18px;
    box-shadow: inset 0 0 0 1px var(--cj-edge);
}

.cj-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 16px;
    border-radius: 50%;
    font-size: 2rem;
    color: var(--cj-seed);
    background: radial-gradient(circle at 30% 25%, #e9f4ee, #d9ebe0);
    box-shadow: inset 0 0 0 1px #cfe5d7, 0 6px 16px rgba(63, 142, 123, .18);
}

.cj-empty-title {
    font-family: var(--cj-serif);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--cj-ink);
    margin-bottom: 4px;
}

.cj-empty-sub {
    font-size: .9rem;
    color: var(--cj-ink-soft);
    max-width: 30rem;
    margin: 0 auto 18px;
}

/* ── Entrance (staggered) ─────────────────────────────────────────── */
.cj-in {
    opacity: 0;
    transform: translateY(16px);
    animation: cjIn .55s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes cjIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cj-in {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .cj-card,
    .cj-node,
    .cj-avatar,
    .cj-add-btn {
        transition: none;
    }
}