/* 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, #E06B60); }
.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; }
}
@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); }
}