/* ==========================================================================
   /learning-journal/
   Hero: a journal entry writes itself, three phrases lift out and become
   question cards. Then the example-entry gallery, the entry builder, the
   "why it works" cards and the prompt groups.
   The final state of the animation is the default; JS adds .is-armed and
   .is-playing, so no-JS and reduced-motion visitors see the finished picture.
   ========================================================================== */

/* ---------- Hero animation ---------- */

.lj-hero { margin: 0 0 2.2em; }
.lj-stage {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); gap: 18px; align-items: center;
    padding: clamp(16px, 2vw, 22px);
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
}

.lj-sheet {
    --rule: 30px;
    position: relative;
    padding: 12px 18px 16px 34px;
    border-radius: 18px; border: 1px solid var(--line-strong);
    background-color: var(--surface);
    background-image:
        linear-gradient(90deg, transparent 21px, rgba(245, 96, 154, 0.35) 21px, rgba(245, 96, 154, 0.35) 22px, transparent 22px),
        repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rule) - 1px), var(--line) calc(var(--rule) - 1px), var(--line) var(--rule));
    background-position: 0 0, 0 12px;
    font-size: 16px; line-height: var(--rule); color: var(--text); letter-spacing: -0.01em;
}
.lj-sheet p { margin: 0; }
.lj-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-3); font-weight: 600; }
.lj-meta span:last-child { color: var(--text-2); text-align: right; }

/* The highlight covers the words only: no padding or negative margin bleeding into the space before */
.lj-sheet mark {
    white-space: nowrap; color: inherit; padding: 0; margin: 0; border-radius: 2px;
    background: linear-gradient(var(--mc), var(--mc)) no-repeat 0 85% / 100% 42%;
}
.lj-sheet mark[data-k='1'] { --mc: rgba(123, 108, 246, 0.45); }
.lj-sheet mark[data-k='2'] { --mc: rgba(255, 162, 51, 0.4); }
.lj-sheet mark[data-k='3'] { --mc: rgba(44, 200, 211, 0.4); }

.lj-arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-3); }
.lj-arrow span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.lj-arrow::after {
    content: ''; width: 34px; height: 10px;
    background:
        linear-gradient(currentColor, currentColor) no-repeat 0 50% / 30px 1.5px,
        linear-gradient(45deg, transparent 45%, currentColor 45%, currentColor 60%, transparent 60%) no-repeat 100% 0 / 8px 5px,
        linear-gradient(-45deg, transparent 45%, currentColor 45%, currentColor 60%, transparent 60%) no-repeat 100% 100% / 8px 5px;
}

.prose .lj-qs { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.prose .lj-qs li + li { margin-top: 0; }
.lj-q {
    --qc: var(--violet);
    position: relative;
    padding: 9px 14px 10px; border-radius: 14px;
    background: var(--surface-2); border: 1px solid var(--line-strong);
}
.lj-q[data-q='2'] { --qc: var(--orange); }
.lj-q[data-q='3'] { --qc: var(--cyan); }
.lj-q span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--qc); margin-bottom: 2px; }
.lj-q b { display: block; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
/* The empty slot outline, shown before a card fills in */
.lj-q::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit;
    border: 1px dashed rgba(255, 255, 255, 0.2); opacity: 0; pointer-events: none;
}

.lj-chip {
    position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
    padding: 0 8px; border-radius: 999px; font-size: 15px; line-height: 26px; font-weight: 500; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--cc);
}
.lj-chip[data-k='1'] { --cc: var(--violet); }
.lj-chip[data-k='2'] { --cc: var(--orange); }
.lj-chip[data-k='3'] { --cc: var(--cyan); }

/* The finished picture is the default (no JS, reduced motion).
   .is-armed = waiting to start: page words hidden, cards shown as faint empty slots.
   .is-playing = CSS animations run from that start state; their delays come from the script. */
.lj-stage.is-armed:not(.is-playing) .lj-meta,
.lj-stage.is-armed:not(.is-playing) .lj-w,
.lj-stage.is-armed:not(.is-playing) .lj-arrow,
.lj-stage.is-armed:not(.is-playing) .lj-q b { opacity: 0; }
.lj-stage.is-armed:not(.is-playing) mark { background-size: 0% 42%; }
.lj-stage.is-armed:not(.is-playing) .lj-q { background-color: transparent; border-color: transparent; }
.lj-stage.is-armed:not(.is-playing) .lj-q span { opacity: 0.4; }
.lj-stage.is-armed:not(.is-playing) .lj-q::before { opacity: 1; }

.lj-stage.is-playing .lj-meta { animation: lj-fade 0.5s ease both; }
.lj-stage.is-playing .lj-w { animation: lj-fade 0.35s ease both; animation-delay: calc(var(--d) * 1ms); }
.lj-stage.is-playing mark { animation: lj-mark 0.5s var(--ease) both; animation-delay: calc(var(--md) * 1ms); }
.lj-stage.is-playing .lj-arrow { animation: lj-fade 0.5s ease both; animation-delay: calc(var(--ad) * 1ms); }
.lj-stage.is-playing .lj-q { animation: lj-card 0.5s ease both; animation-delay: calc(var(--qd) * 1ms); }
.lj-stage.is-playing .lj-q::before { animation: lj-slot 0.5s ease both; animation-delay: calc(var(--qd) * 1ms); }
.lj-stage.is-playing .lj-q span { animation: lj-label 0.5s ease both; animation-delay: calc(var(--qd) * 1ms); }
.lj-stage.is-playing .lj-q b { animation: lj-q 0.55s var(--ease) both; animation-delay: calc(var(--qd) * 1ms + 80ms); }

@keyframes lj-fade { from { opacity: 0; } }
@keyframes lj-mark { from { background-size: 0% 42%; } }
@keyframes lj-card { from { background-color: transparent; border-color: transparent; } }
@keyframes lj-slot { from { opacity: 1; } to { opacity: 0; } }
@keyframes lj-label { from { opacity: 0.4; } }
@keyframes lj-q { from { opacity: 0; transform: translateY(5px); } }
.lj-w { display: inline; }

.lj-app-card { margin: 1.4em 0; }

/* ---------- Example entries ---------- */

.lj-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.lj-entry {
    display: flex; flex-direction: column;
    padding: 18px 20px 18px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--line);
    font-size: 15.5px; color: #d2d2d7;
}
.lj-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lj-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--c); }
.lj-entry time { font-size: 13px; color: var(--text-3); }
.prose .lj-entry-src { margin: 6px 0 8px; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text); letter-spacing: -0.012em; }
.lj-entry-body {
    --rule: 26px;
    line-height: var(--rule);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rule) - 1px), var(--line) calc(var(--rule) - 1px), var(--line) var(--rule));
}
.lj-entry-body p { margin: 0; }
.lj-entry-body b { color: var(--text-3); font-weight: 600; }
.prose .lj-entry-q { color: var(--text); }
.prose .lj-entry-q b { color: var(--c); }
.prose .lj-why { margin-top: auto; padding-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.lj-why::before { content: ''; display: block; border-top: 1px dashed var(--line-strong); margin-bottom: 12px; }
.prose .lj-why b { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text); }

/* ---------- Entry builder ---------- */

.lb-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.lb-pick legend { font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 10px; padding: 0; }
.lb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-chips label { position: relative; cursor: pointer; }
.lb-chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lb-chips span {
    display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--surface-2);
    font-size: 15px; font-weight: 600; color: var(--text-2);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lb-chips label:hover span { border-color: rgba(255, 255, 255, 0.24); color: var(--text); }
.lb-chips input:checked + span { background: var(--text); border-color: var(--text); color: #000; }
.lb-chips input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.lb-set { display: grid; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.lb-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text-2); }
.lb-field--q label { color: var(--cyan); }
.lb textarea.tool-input { height: auto; min-height: 72px; padding: 11px 14px; line-height: 1.45; resize: vertical; }

/* ---------- Why it works ---------- */

.lj-why-grid { display: grid; gap: 12px; }
.lj-mech {
    display: grid; grid-template-columns: 34px 1fr; gap: 0 14px;
    padding: 18px 20px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--line);
    font-size: 16.5px; line-height: 1.55;
}
.lj-mech > span {
    grid-row: span 2; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; border: 1.5px solid var(--c); color: var(--c); font-size: 15px; font-weight: 700;
}
.prose .lj-mech h3 { margin: 4px 0 6px; font-size: 19px; }
.prose .lj-mech p { margin: 0; }

/* ---------- Prompt groups ---------- */

.lj-prompts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.lj-pgroup { padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.prose .lj-pgroup h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; letter-spacing: 0.02em; color: var(--c); }
.lj-pgroup h3::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.prose .lj-pgroup ul { list-style: none; padding: 0; margin: 0; }
.prose .lj-pgroup li { margin: 0; padding: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.prose .lj-pgroup li + li { margin-top: 8px; border-top: 1px solid var(--line); }

/* ---------- Wide screens: keep the whole hero in the first screen ---------- */

@media (min-width: 721px) {
    .lj-hero { margin-top: -10px; }
    .lj-stage { padding: 16px 18px; }
    .lj-sheet { --rule: 29px; padding-bottom: 12px; }
    .prose .lj-qs { gap: 7px; }
    .lj-q { padding: 8px 14px 9px; }
    .lj-q span { margin-bottom: 1px; line-height: 1.3; }
    .lj-q b { font-size: 14.5px; }
}

/* ---------- Narrow screens ---------- */

@media (max-width: 720px) {
    .lj-stage { grid-template-columns: 1fr; gap: 14px; }
    .lj-arrow { flex-direction: row; justify-content: center; }
    .lj-arrow::after { transform: rotate(90deg); width: 20px; }
}
@media (max-width: 480px) {
    .lj-sheet { padding-left: 30px; padding-right: 14px; font-size: 15.5px; }
    .lj-sheet { background-position: -3px 0, 0 12px; }
    .lj-mech { grid-template-columns: 1fr; }
    .lj-mech > span { grid-row: auto; margin-bottom: 8px; }
}