/* laravel.php - the page's own pictures. The shared hero, section rhythm and closing band come
   from svc-pages.css; everything here is a shape only this page has: a release session in a
   terminal with a numbered gutter, a five-stop rail with a failure branch, a three-group ledger,
   a runbook of ticks beside a release tree, and two link rows. */

.lv-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.lv-actions.is-center { justify-content: center; }

/* ── 1. The session ──────────────────────────────────────────────────────────
   A terminal is a dark object in BOTH themes, like the real thing, so its colours are pinned
   here and never read --bg/--surface (those flip to paper in the light theme). */
.lv-session { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

.lv-tty {
    --tty-bg: #15121E; --tty-edge: rgba(255, 255, 255, .12); --tty-ink: #E4DFEE; --tty-ink-2: #ADA3C8;
    --tty-dim: #9891AD; --tty-copper: #FF7A45; --tty-patina: #6FCBBB;
    margin: 0; min-width: 0;
}
.lv-tty-bar { direction: ltr;
    display: flex; align-items: center; gap: 7px; padding: 12px 16px;
    background: #1D1928; border: 1px solid var(--tty-edge); border-bottom: 0; border-radius: 16px 16px 0 0;
}
.lv-tty-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.lv-tty-bar span { margin-inline-start: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--tty-ink-2); }
.lv-tty-body {
    margin: 0; padding: 18px 0 20px; background: var(--tty-bg); color: var(--tty-ink);
    border: 1px solid var(--tty-edge); border-radius: 0 0 16px 16px;
    box-shadow: var(--shadow-2, 0 20px 50px rgba(0, 0, 0, .48));
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; font-feature-settings: 'zero' 1;
    overflow-x: auto; overscroll-behavior-x: contain; text-align: left; direction: ltr;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.lv-tty-body code { font: inherit; word-break: normal; display: block; min-width: max-content; }
.lv-tty-body .tl { display: block; white-space: pre; padding-inline-end: 20px; }
.lv-tty-body .tl.is-cmd { color: #FFFFFF; }
/* the gutter: a number on each command, matched by the notes beside the terminal */
.t-n { display: inline-block; width: 42px; padding-inline-start: 14px; box-sizing: border-box; font-weight: 400; color: var(--tty-copper); opacity: .9; user-select: none; }
.t-host { color: var(--tty-patina); }
.t-path { color: var(--tty-ink-2); }
.t-pr { color: var(--tty-copper); }
.t-dim { color: var(--tty-dim); }
.t-ok { color: var(--tty-patina); }
.t-ok-b { color: #12101A; background: var(--tty-patina); padding: 0 5px; border-radius: 3px; font-weight: 600; }
.t-info { color: #12101A; background: var(--tty-ink-2); padding: 0 5px; border-radius: 3px; font-weight: 600; }

/* Plays once: each line fades up in turn. Armed only by the script, only off-screen, never
   under reduced motion - so with no script every line is simply there. */
@keyframes lv-line { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lv-tty.is-armed .tl { opacity: 0; }
.lv-tty.is-armed.is-run .tl { animation: lv-line 200ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i) * 55ms); }

.lv-cap { margin: 12px 4px 0; font-size: 12.5px; color: var(--text-muted); }

.lv-notes { list-style: none; margin: 0; padding: 0; }
.lv-notes li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.lv-notes li:last-child { border-bottom: 1px solid var(--line); }
.lv-notes-n { font-family: var(--font-mono); font-size: 12.5px; color: var(--copper-ink); padding-top: 2px; font-feature-settings: 'zero' 1; }
.lv-notes h3 { font-size: 16px; margin: 0 0 4px; color: var(--text-strong); line-height: 1.3; }
.lv-notes p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* ── 2. The rail ───────────────────────────────────────────────────────────── */
.lv-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lv-rail li { position: relative; padding: 28px 0 0; padding-inline-end: 22px; border-top: 1px solid var(--line-strong, var(--line)); }
.lv-rail li:last-child { padding-inline-end: 0; }
/* a stop on the rail, and a small arrow head where it meets the next one */
.lv-rail li::before { content: ''; position: absolute; top: -6px; inset-inline-start: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-alt); border: 1.5px solid var(--copper-ink); box-sizing: border-box; }
.lv-rail li:last-child::before { background: var(--patina-ink); border-color: var(--patina-ink); }
.lv-rail li:not(:last-child)::after { content: ''; position: absolute; top: -4px; inset-inline-end: 8px; width: 7px; height: 7px; border-top: 1.5px solid var(--text-muted); border-right: 1.5px solid var(--text-muted); transform: rotate(45deg); }
html[dir="rtl"] .lv-rail li:not(:last-child)::after { transform: rotate(-135deg); }
.lv-rail-k { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--copper-ink); margin-bottom: 12px; }
.lv-chip { display: inline-block; max-width: 100%; font-family: var(--font-mono); font-size: 12px; line-height: 1.45; padding: 5px 9px; border-radius: 8px; background: var(--well); border: 1px solid var(--line); color: var(--text-strong); margin-bottom: 14px; overflow-wrap: anywhere; word-break: normal; }
.lv-chip.is-fail { color: var(--danger-ink, #E8817A); }
.lv-rail h3 { font-size: 17px; line-height: 1.3; margin: 0 0 8px; color: var(--text-strong); }
.lv-rail p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }

/* the failure branch hangs under the worker stop (the fourth of five: 60% along) */
.lv-branch { position: relative; margin-top: 34px; margin-inline-start: 60%; max-width: 40%; padding: 18px 0 0; padding-inline-start: 22px; border-inline-start: 1px dashed var(--line-strong, var(--line)); }
.lv-branch::before { content: ''; position: absolute; top: -34px; inset-inline-start: -1px; height: 34px; border-inline-start: 1px dashed var(--line-strong, var(--line)); }
.lv-branch .lv-rail-k { color: var(--text-muted); }
.lv-branch p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }

/* ── 3. The ledger ────────────────────────────────────────────────────────── */
.lv-ledger { border-top: 1px solid var(--line-strong, var(--line)); }
.lv-group { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding: clamp(26px, 3.5vw, 40px) 0; border-bottom: 1px solid var(--line); }
.lv-group-h { align-self: start; position: sticky; top: 96px; }
.lv-group-h h3 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 10px; color: var(--text-strong); }
html[dir="rtl"] .lv-group-h h3 { letter-spacing: 0; line-height: 1.2; }
.lv-group-h p { margin: 0; color: var(--text-muted); font-size: 15px; }
.lv-group dl { margin: 0; }
.lv-group dl > div { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 8px 28px; padding: 16px 0; border-top: 1px solid var(--line); }
.lv-group dl > div:first-child { border-top: 0; padding-top: 4px; }
.lv-group dt { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; color: var(--copper-ink); padding-top: 2px; }
html[dir="rtl"] .lv-group dt:not([translate="no"]) { font-family: inherit; font-size: 15px; }
.lv-group dd { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--text); }

/* ── 4. Day one ───────────────────────────────────────────────────────────── */
.lv-day { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.lv-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.lv-check li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
.lv-box { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--patina-ink); display: grid; place-items: center; margin-top: 1px; }
.lv-box svg { width: 14px; height: 14px; fill: none; stroke: var(--patina-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lv-check-t { font-size: 15px; line-height: 1.5; color: var(--text-strong); }
.lv-check-t code { display: block; width: fit-content; max-width: 100%; margin-top: 6px; font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; word-break: normal; }
html[dir="rtl"] .lv-check-t code { margin-inline-start: 0; }

.lv-tree { margin: 0; padding: clamp(20px, 2.6vw, 28px); border: 1px solid var(--line); border-radius: 18px; background: var(--bg); }
.lv-tree-k { margin: 0 0 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--copper-ink); }
html[dir="rtl"] .lv-tree-k { letter-spacing: 0; text-transform: none; font-size: 13px; font-family: inherit; }
.lv-tree pre { margin: 0 0 16px; padding: 16px; background: var(--well); border-radius: 12px; font-size: 13px; line-height: 1.7; overflow-x: auto; text-align: left; direction: ltr; }
.lv-tree pre code { font: inherit; font-family: var(--font-mono); color: var(--text); word-break: normal; white-space: pre; }
.lv-tree pre b { color: var(--copper-ink); font-weight: 600; }
.lv-tree figcaption { font-size: 14px; line-height: 1.6; color: var(--text-2); }

/* ── 5. Link rows ─────────────────────────────────────────────────────────── */
.lv-links { border-top: 1px solid var(--line); }
.lv-link { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; align-items: center; gap: 10px 28px; padding: 24px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.lv-link-k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
html[dir="rtl"] .lv-link-k, html[dir="rtl"] .lv-rail-k { letter-spacing: 0; text-transform: none; font-size: 13px; font-family: inherit; }
.lv-link-t { font-size: 16px; color: var(--text-strong); }
.lv-link-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--copper-ink); white-space: nowrap; }
.lv-link-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
html[dir="rtl"] .lv-link-go svg { transform: scaleX(-1); }
.lv-link:focus-visible { outline: 2px solid var(--copper-ink); outline-offset: 4px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
    .lv-link:hover .lv-link-go svg { transform: translateX(4px); }
    html[dir="rtl"] .lv-link:hover .lv-link-go svg { transform: scaleX(-1) translateX(4px); }
}

/* ── widths ───────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .lv-session { grid-template-columns: minmax(0, 1fr); }
    .lv-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
    .lv-notes li:last-child { border-bottom: 0; }
    .lv-day { grid-template-columns: minmax(0, 1fr); }
    .lv-tree { max-width: 560px; }
}
@media (max-width: 900px) {
    /* the rail turns upright: a line down the start edge, a stop at each step, the branch last */
    .lv-rail { grid-template-columns: minmax(0, 1fr); border-inline-start: 1px solid var(--line-strong, var(--line)); margin-inline-start: 5px; }
    .lv-rail li { border-top: 0; padding: 0 0 28px; padding-inline: 24px 0; }
    .lv-rail li::before { top: 2px; inset-inline-start: -6px; }
    .lv-rail li:not(:last-child)::after { display: none; }
    .lv-branch { margin: 0; margin-inline-start: 5px; max-width: none; padding: 0 0 0; padding-inline-start: 24px; border-inline-start: 1px dashed var(--line-strong, var(--line)); }
    .lv-branch::before { display: none; }
    .lv-group { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .lv-group-h { position: static; }
    .lv-link { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 640px) {
    .lv-notes { grid-template-columns: minmax(0, 1fr); }
    .lv-notes li:last-child { border-bottom: 1px solid var(--line); }
    .lv-group dl > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .lv-check { grid-template-columns: minmax(0, 1fr); }
    .lv-tty-body { font-size: 12px; }
    .t-n { width: 34px; padding-inline-start: 10px; }
    /* the session is 630px wide and a phone shows 358 with no scrollbar, so every line simply ended
       at the card's edge as if cut. Wrapping it doubled the terminal to 1263px, so it keeps its
       lines and scrolls, and the edge now says so: the text fades into the terminal there. */
    .lv-tty-view { position: relative; }
    .lv-tty-view::after { content: ""; position: absolute; top: 1px; bottom: 1px; right: 1px; width: 40px; border-radius: 0 0 15px 0; background: linear-gradient(to right, rgba(21, 18, 30, 0), var(--tty-bg)); pointer-events: none; }
}
@media (max-width: 720px) {
    .lv-actions .btn { width: 100%; justify-content: center; }
}

@media print { .lv-tty.is-armed .tl { opacity: 1; animation: none; } }
@media (prefers-reduced-motion: reduce) {
    .lv-tty.is-armed .tl { opacity: 1; animation: none; }
    .lv-link-go svg { transition: none; }
    .lv-link:hover .lv-link-go svg { transform: none; }
    html[dir="rtl"] .lv-link:hover .lv-link-go svg { transform: scaleX(-1); }
}