/* LanceTek page CSS: only what sits inside a visual (the hero collage pieces, the app frame, the
   journal tiles) and the few rules the references call page CSS. Tokens come from system.css and the
   :root block each page carries from start.mjs. */

/* ---------- hero collage pieces (triptych): drawn in the page's own tokens ---------- */
.ly-collage { container-type: inline-size; }
.ly-collage .pc { color: var(--ink); background: #f7f6f3; padding: 4cqw; display: grid; align-content: start; gap: 2cqw;
  font: 400 max(13px, 2.1cqw)/1.4 var(--font-text); }
.ly-collage .pc b { font-weight: 500; }
.ly-collage .pc .lbl { font: 500 max(13px, 1.8cqw)/1.2 var(--font-mono); color: #3f3d36; }
.ly-collage .pc .ttl { font: 500 max(15px, 3.6cqw)/1.15 var(--font-display); letter-spacing: -0.02em; }
.ly-collage .pc .ln { display: flex; justify-content: space-between; gap: 2cqw; padding-top: 1.6cqw; border-top: 1px solid rgb(38 37 30 / .12); }
.ly-collage .pc .ln span:last-child { color: var(--muted); white-space: nowrap; }
.ly-collage .pc .ok { color: #1f7a45; }
.ly-collage .pc .acc { color: var(--accent); }
.ly-collage .pc-code { background: #1f1e19; color: #e6e4dc; font: 400 max(13px, 1.9cqw)/1.6 var(--font-mono); padding: 3.4cqw 4cqw; white-space: pre; }
.ly-collage .pc-code .k { color: #9fb7ff; } .ly-collage .pc-code .s { color: #c9d98f; } .ly-collage .pc-code .c { color: #8d8a7e; }
.ly-collage .pc-btn { justify-self: start; margin-top: 1cqw; padding: 1.2cqw 2.4cqw; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); font-weight: 500; }

/* ---------- app frame (sections-library.md, app-frame: the whole recipe) ---------- */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* ---------- journal tiles: the tool's real mark on the lit panel ---------- */
.jr-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; display: grid; place-items: center;
  background: #fff; border-radius: var(--r-md); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 14px 30px -16px rgb(0 0 0 / .35); }
.jr-mark img { width: 64px; height: auto; max-height: 56px; }
.jr-meta { display: flex; gap: var(--s-4); font: 500 var(--t-label)/1.3 var(--font-mono); color: var(--muted); }

/* ---------- article rows on the Journal page ---------- */
.jr-list { list-style: none; margin: 0; padding: 0; }
.jr-list > li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px; gap: var(--s-5); align-items: stretch; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.jr-list .jr-ic { width: 56px; height: 56px; display: grid; place-items: center; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); }
.jr-list .jr-ic img { width: 32px; height: 32px; }
.jr-list h3 { font-size: var(--t-card); margin: 0 0 var(--s-1); }
.jr-list p { margin: 0; max-width: 62ch; }
.jr-list .jr-meta { padding-top: 4px; }
@media (max-width: 639px) { .jr-list > li { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); } .jr-list .jr-ic { width: 44px; height: 44px; } .jr-list .jr-ic img { width: 26px; height: 26px; } .jr-list .jr-meta { grid-column: 2; } }

/* ---------- stack icons (About) ---------- */
.stack-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter, 24px); list-style: none; margin: 0; padding: 0; }
.stack-grid li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-4); background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--r-lg); }
.stack-grid .ic { width: 48px; height: 48px; display: grid; place-items: center; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); }
.stack-grid .ic img { width: 28px; height: 28px; }
.stack-grid b { display: block; font-weight: 500; }
.stack-grid span span { color: var(--muted); font-size: var(--t-small); }
@media (max-width: 1023px) { .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .stack-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .stack-grid li { padding: var(--s-3); } }

/* ---------- price rows (Services) ---------- */
.price-rows { list-style: none; margin: 0; padding: 0; }
.price-rows > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter, 24px); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); align-items: stretch; }
.price-rows .price-rows__n { grid-column: 1 / span 4; margin: 0; font-size: var(--t-card); font-weight: 500; }
.price-rows p { grid-column: 5 / span 5; margin: 0; }
.price-rows .price-rows__v { grid-column: 10 / span 3; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .price-rows .price-rows__n { grid-column: 1 / span 12; } .price-rows p { grid-column: 1 / span 8; margin-top: var(--s-2); } .price-rows .price-rows__v { grid-column: 9 / span 4; } }
@media (max-width: 639px) { .price-rows p, .price-rows .price-rows__v { grid-column: 1 / -1; text-align: left; } }

/* ---------- plain steps beside a frame ---------- */
.plain-steps { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
.plain-steps > p { margin: 0; }
.plain-steps b { font-weight: 500; }

/* a collage piece too wide in words for the phone's collage waits for a wider screen */
@media (max-width: 639px) { .ly-collage .pc-wide { display: none; } }

/* ---------- the result card over the proposal (services hero) ---------- */
.hero__art > .pc-note { left: var(--s-6); bottom: var(--s-6); width: min(300px, calc(100% - 2 * var(--s-6))); display: grid; gap: var(--s-2);
  padding: var(--s-4); background: #fff; color: var(--ink); border-radius: var(--r-md); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 18px 40px -18px rgb(0 0 0 / .32); font-size: 14px; line-height: 1.4; z-index: 2; }
.pc-note__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.pc-note__row b { font-weight: 500; font-size: 15px; }
.pc-note__chip { font: 500 13px/1 var(--font-text); padding: 5px 8px; border-radius: var(--r-sm); background: #e3ecff; color: #1d46ad; }
.pc-note__line { display: flex; gap: var(--s-2); align-items: baseline; }
.pc-note__line i { font-style: normal; color: #1f7a45; }

/* ---------- pinned-chapters step pictures: a drawn card on the lit ground ---------- */
.pcv { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--s-6); background: var(--ground-bg, #cdd6c6); }
[data-moment="pinned-chapters"].is-live .mo-pc__visual > .pcv { width: 100%; height: 100%; aspect-ratio: auto; }
.pcv__card { width: min(380px, 100%); display: grid; gap: var(--s-3); padding: var(--s-5); background: #fff; color: var(--ink); border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 18px 40px -18px rgb(0 0 0 / .3); font-size: 15px; line-height: 1.4; }
.pcv__card .lbl { font: 500 13px/1.2 var(--font-mono); color: #3f3d36; }
.pcv__card .ttl { font: 500 22px/1.2 var(--font-display); letter-spacing: -0.02em; }
.pcv__card .ln { display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-3); border-top: 1px solid rgb(38 37 30 / .12); }
.pcv__card .ln span:last-child { color: #3f3d36; text-align: right; }
@media (max-width: 639px) { .pcv { padding: var(--s-4); } .pcv__card { padding: var(--s-4); } }
@media (max-width: 639px) {
  .ly-collage .pc-a { width: 92% !important; }
  .ly-collage .pc-ph { left: 4% !important; top: 62% !important; width: 92% !important; height: 34% !important; }
}

/* ======================================================================================
   Polish pass (step 2). Fixes from the critique and audit; see NOTES.md.
   ====================================================================================== */

/* P0: above 1279px the kit fixed every section at exactly N screens, so on a short laptop window
   (1366x680) content ran over the next section. Sections now keep at least their screens and grow
   past them, as they already did from 640 to 1279. */
@media (min-width: 1280px) {
  main > :is(section, .section):not(.hero, .section--hero), footer.closing {
    height: auto; min-height: calc(var(--h, 1) * 100vh); min-height: calc(var(--h, 1) * 100svh);
  }
  :where(main > :is(section, .section):not(.hero, .section--hero), footer.closing) { display: flex; flex-direction: column; }
  main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container), footer.closing > .wrap { flex: 1 0 auto; height: auto; min-height: 0; }
}

/* Short sections: a statement or a short list no longer sits in a full screen of empty ground. */
main > .section.is-short { min-height: 0 !important; height: auto !important; }

/* The tool icons are LanceTek's own line drawings now (not the tools' logos): sit them on a plain tile. */
.jr-mark img { width: 48px; max-height: 48px; }
.jr-list .jr-ic img, .stack-grid .ic img { width: 26px; height: 26px; }

/* Contrast: muted text inside the UI mocks measured 3.4 to 4.4:1. Darken it to the page's muted ink. */
.ui-chat__ph, .ui-win__st, .ui-diff__hunk span, .ui-pipe__cmd, .ui-pipe__run { color: #5a5850 !important; }
.ui-win__st.is-done { color: #4d4b44 !important; }

/* Browser surfaces in the palette */
::selection { background: #2456d6; color: #fff; }
html { accent-color: #2456d6; caret-color: #2456d6; }

/* Contact form: firmer field edges on the card, and the note under the button */
.form-card :is(input, textarea, select) { background: #f7f6f3; border-color: rgb(38 37 30 / .32); }
.form-note { margin-top: var(--s-4); color: var(--muted); font-size: var(--t-small); max-width: 52ch; }
.form-note a { color: var(--ink); text-underline-offset: 3px; }
.field .opt { color: var(--muted); font-weight: 400; }

/* Home hero: the call to action sits under the lead, with prices beside it */
.hero__lead + .btn-row { margin-top: var(--s-6); }
@media (min-width: 1280px) {
  .hero--triptych .hero__grid { grid-template-rows: 1fr auto 1fr; }
  .hero--triptych .hero__grid > :first-child { grid-column: 1 / span 4; grid-row: 1; align-self: end; }
  .hero--triptych .ly-collage { grid-column: 6 / span 7; grid-row: 1 / span 3; }
  .hero--triptych .hero__cta { grid-column: 1 / span 4; grid-row: 2; justify-content: flex-start; align-self: start; margin-top: var(--s-6); }
  .hero--triptych .hero__cta .btn { height: 56px; font-size: var(--t-body); }
}
.hero--triptych .hero__cta { gap: var(--s-5); align-items: center; flex-wrap: wrap; }
@media (max-width: 1023px) { .hero--triptych .hero__cta .link { align-self: center; } .hero--triptych .hero__cta { flex-direction: column; } }