/* ── Landing (signed out): the Logbook direction (docs/design/logbook, spec logbook-design-system) ──
   Left-aligned on a 1240 px sheet. Surfaces are tone steps: Leaf rows on the Ledger ground with a 2 px gap, Band for heads and
   bands; no cards, no lines, no shadows. The hero is the logbook of the example run (`.lb`, Components/Shared/LandingLogbookView). */

.lp { --lp-pad: max(16px, calc((100% - 1240px) / 2 + 32px)); width: 100%; background: var(--bg); color: var(--text); }
.lp > section, .lp > footer { padding-left: var(--lp-pad); padding-right: var(--lp-pad); }
.lp h1, .lp h2, .lp h3 { text-wrap: balance; }
.lp-label { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.lp-cta { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.lp .muted { color: var(--text-3); }
.lp-textlink { display: inline-flex; align-items: center; min-height: 44px; font-size: 15.5px; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lp-textlink:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 3px; }

/* Hero */
.lp-hero { display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); gap: 40px; align-items: start; padding-top: 36px; padding-bottom: 56px; }
.lp-hero h1 { font-size: clamp(44px, 5.4vw, 76px); font-weight: 650; font-stretch: 75%; letter-spacing: -0.01em; line-height: 0.98; margin: 0 0 22px; max-width: 11ch; }
.lp-lede { font-size: 17px; line-height: 1.55; color: var(--text); margin: 0 0 26px; max-width: 44ch; }
.lp-fine { margin: 14px 0 0; font-size: 14px; color: var(--text-2); }
.lp-fine.lp-trial-fine { max-width: 46ch; }

/* The same run, in the chat: three strips */
.lp-chat { margin-top: 34px; font-size: 14.5px; line-height: 1.5; max-width: 46ch; }
.lp-chat-head { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.lp-bubble { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); }
.lp-bubble.user { background: var(--surface-3); }
.lp-bubble.model { background: var(--surface); margin-top: 2px; }
.lp-tool { margin: 2px 0 0; padding: 6px 14px; border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); font-size: 13.5px; }

/* The logbook: the example run, steps as columns, moves as rows (newest first), the path drawn down the rows. */
.lb { --col: 22px; --row: 52px; min-width: 0; }
.lb-head { background: var(--surface-3); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 14px 18px 12px; }
.lb-head h2 { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 650; font-stretch: 85%; letter-spacing: -0.01em; }
.lb-head p { margin: 2px 0 0; color: var(--text-2); font-size: 14px; }
.lb-readouts { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0 0; }
.lb-readouts div { background: var(--surface-3); padding: 8px 14px 9px; flex: 1 1 auto; }
.lb-readouts div:first-child { border-radius: 0 0 0 var(--radius-sm); }
.lb-readouts div:last-child { border-radius: 0 0 var(--radius-sm) 0; flex-grow: 2; }
.lb-readouts dt { font-size: 12.5px; color: var(--text-2); }
.lb-readouts dd { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
.lb-state::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); margin-right: 7px; vertical-align: 1px; }

.lb-rows { margin-top: 2px; }
.lb-row { display: grid; grid-template-columns: 56px calc(var(--stations) * var(--col)) minmax(0, 1fr) 64px; height: var(--row); align-items: stretch;
  background: var(--surface); margin-bottom: 2px; border-radius: var(--radius-sm); }
.lb-row > * { min-width: 0; }
.lb-time { display: flex; align-items: center; padding-left: 14px; font-size: 14px; color: var(--text-2); }
.lb-strip { display: block; position: relative; }
.lb-strip svg { display: block; overflow: visible; }
.lb-entry { display: flex; flex-direction: column; justify-content: center; padding: 0 8px 0 14px; font-size: 14px; line-height: 1.4; overflow: hidden; }
.lb-entry b { font-weight: 600; font-size: 15px; }
.lb-note { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.lb-who { font-size: 12.5px; font-weight: 600; background: var(--surface-3); padding: 0 6px; border-radius: var(--radius-sm); }
.lb-mins { display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; font-size: 15px; font-weight: 600; font-stretch: 80%; }
.lb-mobile-mins { display: none; }

.lb-stations { height: auto; background: var(--surface-3); align-items: end; }
.lb-stations .lb-time, .lb-stations .lb-entry, .lb-stations .lb-mins { padding-top: 8px; padding-bottom: 8px; font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.lb-stations .lb-strip { display: grid; grid-template-columns: repeat(var(--stations), var(--col)); }
.lb-stations .lb-strip span { text-align: center; padding: 8px 0; font-size: 13px; font-weight: 600; font-stretch: 80%; color: var(--text); }

.lb-ways { height: var(--h); background: transparent; }
.lb-ways .lb-entry { justify-content: flex-start; padding-top: 7px; color: var(--text-2); }
.lb-ways .lb-entry b { display: block; line-height: 20px; color: var(--text); }
.lb-way { display: block; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-way i { font-style: normal; }
.lb-long { margin-left: 0.35em; }
.lb-back-short { display: none; }
.lb-way.blocked { color: var(--text-3); }
.lb-live { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); }
.lb-live .lb-time { color: var(--text); }
.lb-live .lb-note { color: var(--text); }

.lb-lane { fill: var(--text); opacity: 0.045; }
.lb-path { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.lb-path-live { stroke: var(--brand); stroke-width: 2.5; }
.lb-option { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 3 4; }
.lb-option.blocked { opacity: 0.7; }
.lb-stop { fill: var(--text); }
.lb-stop.by-you { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.lb-maybe { fill: var(--bg); stroke: var(--text-2); stroke-width: 1.5; }
.lb-maybe.blocked { opacity: 0.7; stroke-dasharray: 2 2.5; }
.lb-ring { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 3; }
.lb-ring-hole { fill: var(--brand); }

.lb-foot { padding: 8px 2px 0; color: var(--text-2); font-size: 13.5px; }
.lb-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 18px; }
.lb-key b { font-weight: 600; font-stretch: 80%; color: var(--text); margin-right: 2px; }
.lb-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; }
.lb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lb-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--text); }
.lb-legend i.you { background: var(--surface); box-shadow: inset 0 0 0 2px var(--text); }
.lb-legend i.now { background: var(--brand); }

/* The trace draws itself once, oldest move first, then the ring settles; with reduced motion everything is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .lb-path { stroke-dasharray: 1; animation: lb-draw 0.22s linear both; }
  .lb-stop, .lb-option, .lb-maybe { animation: lb-appear 0.3s ease-out both; }
  .lb-ring, .lb-ring-hole { transform-box: fill-box; transform-origin: center; animation: lb-ring 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
}
@keyframes lb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lb-appear { from { opacity: 0; } }
@keyframes lb-ring { from { opacity: 0; transform: scale(0.4); } }

/* Works with */
.lp-works { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; padding-top: 16px; padding-bottom: 16px; background: var(--surface-3); }
.lp-works .lp-label { font-size: 14.5px; }
.lp-works ul { list-style: none; margin: 0; padding: 0; display: contents; }
.lp-works li { font-size: 18px; font-weight: 600; font-stretch: 85%; }
.lp-works li.muted { font-size: 15px; font-weight: 400; font-stretch: 100%; }

/* Sections */
.lp-part { padding-top: 72px; padding-bottom: 8px; }
.lp-title { font-size: clamp(32px, 3.6vw, 46px); font-weight: 650; font-stretch: 75%; line-height: 1.02; letter-spacing: -0.01em; margin: 0 0 12px; max-width: 22ch; }
.lp-intro { max-width: 60ch; margin: 0 0 28px; font-size: 17px; color: var(--text); }

/* Why: the long prompt and what the model sees */
.lp-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.lp-side { background: var(--surface); padding: 22px 24px 24px; }
.lp-side:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.lp-side:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.lp-side h3 { margin: 0 0 14px; font-size: 18px; font-weight: 650; font-stretch: 85%; }
.lp-prompt { margin: 0; padding: 0; list-style: none; font-size: 15px; }
.lp-prompt li { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 15ch); gap: 0 10px; padding: 3px 0; }
.lp-prompt .n { color: var(--text-2); text-align: right; }
.lp-prompt .note { font-size: 13.5px; color: var(--red); line-height: 1.35; padding-top: 2px; }
.lp-prompt li.flag > span:nth-child(2) { text-decoration: underline wavy var(--red) 1px; text-underline-offset: 4px; }
.lp-points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.lp-points li { padding-left: 18px; position: relative; }
.lp-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--text); }
.lp-seen { background: var(--bg); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 15px; }
.lp-seen .head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lp-seen .head b { font-size: 17px; font-weight: 650; }
.lp-seen .head span { color: var(--text-2); font-size: 13.5px; }
.lp-seen p { margin: 6px 0 10px; }
.lp-todo { display: block; padding: 3px 0; }
.lp-todo::before { content: ""; display: inline-block; width: 6px; height: 6px; border: 1.5px solid var(--text); border-radius: 2px; margin-right: 7px; vertical-align: 1px; }
.lp-todo.done::before { width: 8px; height: 8px; border: 0; background: var(--green); }
.lp-todo em { font-style: normal; color: var(--text-2); font-size: 13.5px; margin-left: 6px; }
.lp-ways { margin-top: 10px; display: grid; gap: 2px; }
.lp-ways div { background: var(--surface); padding: 6px 10px; border-radius: var(--radius-sm); font-size: 14px; }
.lp-ways .blocked { color: var(--text-2); }
.lp-ways b { font-weight: 600; }

/* What you get: a spec sheet */
.lp-spec { display: grid; gap: 2px; margin: 0; }
.lp-spec > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 24px; background: var(--surface); padding: 16px 20px; border-radius: var(--radius-sm); }
.lp-spec dt { font-weight: 650; font-size: 19px; font-stretch: 85%; line-height: 1.25; }
.lp-spec dd { margin: 0; max-width: 66ch; }

/* How it works: a real sequence */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.lp-steps li { background: var(--surface); padding: 18px 22px 22px; }
.lp-steps li:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.lp-steps li:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.lp-steps .n { display: block; margin-bottom: 10px; font-size: 44px; line-height: 1; font-stretch: 75%; font-weight: 650; }
.lp-steps h3 { margin: 0 0 6px; font-size: 19px; font-weight: 650; font-stretch: 85%; }
.lp-steps p { margin: 0; }

/* Trial band */
.lp > .lp-trial { padding-top: 56px; padding-bottom: 8px; }
.lp-trial-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-trial-list li { padding-left: 18px; position: relative; }
.lp-trial-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.lp-trial-note { margin: 14px 0 0; font-size: 14px; color: var(--text-2); max-width: 60ch; }
.lp-trial .lp-cta { margin-top: 18px; }

/* FAQ: rows that open */
.lp-faq { display: grid; gap: 2px; }
.lp-faq details { background: var(--surface); border-radius: var(--radius-sm); }
.lp-faq summary { cursor: pointer; padding: 14px 20px; font-weight: 600; font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "Open"; font-weight: 400; color: var(--text-2); font-size: 14px; }
.lp-faq details[open] summary::after { content: "Close"; }
.lp-faq details[open] { background: var(--surface-3); }
.lp-faq summary:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; border-radius: var(--radius-sm); }
.lp-faq details p { margin: 0; padding: 0 20px 16px; max-width: 70ch; }

/* The last call, a Band */
.lp-final { margin-top: 72px; background: var(--surface-3); padding-top: 44px; padding-bottom: 48px; }
.lp-final h2 { margin: 0 0 8px; font-size: clamp(32px, 3.6vw, 46px); font-weight: 650; font-stretch: 75%; line-height: 1.02; letter-spacing: -0.01em; }
.lp-final p { margin: 0 0 22px; }

.lp-footer { display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 40px; font-size: 14px; color: var(--text-2); }
.lp-brand { font-weight: 650; font-stretch: 85%; color: var(--text); font-size: 18px; display: inline-flex; align-items: center; gap: 8px; }
.lp-footer nav { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.lp-footer a { color: var(--text-2); text-decoration: none; }
.lp-footer a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.lp-footer .muted { margin-left: auto; }

html:has(.lp) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.lp) { scroll-behavior: auto; } }

/* Narrow screens */
@media (max-width: 1080px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-hero h1 { max-width: 13ch; }
  .lp-chat { display: none; }
}
@media (max-width: 760px) {
  .lp-hero { padding-top: 18px; }
  .lp-lede { font-size: 16px; }
  .lp-hero .lp-cta > a:first-child { flex: 1 1 100%; justify-content: center; }
  .lb-readouts div { flex: 1 1 40%; border-radius: 0 !important; }
  .lb-row { grid-template-columns: 40px calc(var(--stations) * var(--col)) minmax(0, 1fr); }
  .lb-time { padding-left: 8px; font-size: 13px; }
  .lb-mins { display: none; }
  .lb-entry { padding-left: 10px; font-size: 13.5px; }
  .lb-note { font-size: 13px; }
  .lb-mobile-mins { display: inline; }
  .lb-stations .lb-entry { font-size: 12px; }
  .lb-long { display: none; }
  .lp-versus, .lp-steps { grid-template-columns: minmax(0, 1fr); }
  .lp-side, .lp-steps li { border-radius: var(--radius-sm) !important; }
  .lp-prompt li { grid-template-columns: 22px minmax(0, 1fr); }
  .lp-prompt .note { grid-column: 2; }
  .lp-spec > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 16px; }
  .lp-part { padding-top: 56px; }
  .lp-footer .muted { margin-left: 0; }
}

/* A phone (spec logbook-design-system AC21): the showcase runs edge to edge and its lanes shrink as one picture (rows, dots and curves at four fifths),
   so every step title and its second line fit; the shorter ", back" replaces the long wording. */
@media (max-width: 480px) {
  .lp-stage { margin-left: calc(var(--lp-pad) * -1); margin-right: calc(var(--lp-pad) * -1); }
  .lb { --z: 0.8; --col: calc(22px * var(--z)); --row: calc(52px * var(--z)); }
  .lb-head, .lb-row, .lb-readouts div { border-radius: 0 !important; }
  .lb-strip svg { zoom: var(--z); }
  .lb-ways { height: calc(var(--h) * var(--z)); }
  .lb-ways .lb-entry { padding-top: 5px; }
  .lb-ways .lb-entry b, .lb-way { line-height: 16px; }
  .lb-row { grid-template-columns: 36px calc(var(--stations) * var(--col)) minmax(0, 1fr); }
  .lb-time { padding-left: 6px; font-size: 12.5px; }
  .lb-entry { padding: 0 6px 0 8px; line-height: 1.3; }
  .lb-entry b { font-size: 14px; }
  .lb-who { font-size: 11.5px; padding: 0 4px; }
  .lb-note, .lb-way { font-size: 12.5px; }
  .lb-back-long { display: none; }
  .lb-back-short { display: inline; }
}