/* Page CSS: only what sits inside a visual and the kit lacks, plus one --p-h per card group. */

/* ---- the hero collage's pieces (sized in % of the collage, text in container units) ---- */
.ly-collage { container-type: inline-size; }
.ly-collage .ly-piece {
  background: #1c1d20; color: #f2f2f0; border: 1px solid rgb(255 255 255 / .12);
  border-radius: 10px; box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 22px 48px -22px rgb(0 0 0 / .7);
  font: 400 max(13px, 2.1cqw)/1.45 var(--font-mono); overflow: hidden;
}
.pc-head { display: flex; gap: 2cqw; align-items: center; padding: 1.6cqw 2.4cqw; border-bottom: 1px solid rgb(255 255 255 / .08); color: #a6a6a6; }
.pc-head b { color: #f2f2f0; font-weight: 500; }
.pc-head .pc-chip { margin-left: auto; padding: .2cqw 1.4cqw; border-radius: 99px; background: rgb(184 227 255 / .14); color: var(--p-accent); }
.pc-body { padding: 2cqw 2.4cqw; display: grid; gap: .6cqw; white-space: pre; }
.pc-body .k { color: #c7c7c7; } .pc-body .f { color: var(--p-accent); } .pc-body .n { color: #e9b98c; } .pc-body .c { color: #8a8a8a; }
.pc-bars { padding: 2cqw 2.4cqw 2.6cqw; display: grid; gap: 1.4cqw; }
.pc-bar { display: grid; grid-template-columns: 5cqw 1fr 7cqw; align-items: center; gap: 1.6cqw; }
.pc-bar i { display: block; height: 2.2cqw; width: calc(var(--w) * 100%); background: #e8e8e6; border-radius: 2px; }
.pc-bar.is-top i { background: var(--p-accent); }
.pc-bar span:last-child { text-align: right; color: #a6a6a6; }
.pc-doc { padding: 3cqw; display: grid; gap: 1.6cqw; font-family: var(--font-text); }
.pc-doc h4 { margin: 0; font: 500 4.2cqw/1.1 var(--font-display); letter-spacing: -0.02em; }
.pc-doc p { margin: 0; font-size: max(13px, 2.2cqw); color: #c9c9c7; }
.pc-doc .pc-math { font: 400 max(13px, 2.3cqw)/1.4 var(--font-mono); color: #f2f2f0; padding: 1.6cqw 2cqw; background: rgb(255 255 255 / .05); border-radius: 6px; }
.pc-rows { display: grid; }
.pc-rows div { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2cqw; padding: 1.3cqw 2.4cqw; border-top: 1px solid rgb(255 255 255 / .07); }
.pc-rows div:first-child { border-top: 0; color: #8f8f8f; }
.pc-rows .is-top { color: var(--p-accent); }

/* ---- 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; }
}

/* ---- card groups ---- */
#standards .panel { --p-h: 300px; }
@media (max-width: 639px) { #standards .panel { --p-h: 168px; } }

/* ---- inner heroes: the lit ground under each window before its effect draws (and without WebGL) ---- */
.hero__window, .hero__art, .hero__media[data-fx] { background:
    radial-gradient(70% 60% at 18% 12%, color-mix(in oklab, var(--ground-surface) 80%, white), transparent 70%),
    var(--ground-bg); }
.hero__media > .stage { position: absolute; inset: 0; }

/* ---- the small result card over the collage hero's window (layout.css places it) ---- */
.d-card { background: #fff; color: #16181a; border-radius: 12px; padding: 14px 16px; font: 400 14px/1.4 var(--font-text);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 18px 44px -20px rgb(0 0 0 / .45); }
.d-card h5 { margin: 0 0 4px; font: 600 14px/1.3 var(--font-text); }
.d-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 13px; font-weight: 500; background: #e7f4ec; color: #176b3f; }
.d-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 2; }
.d-note__line { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: #3d4247; border-top: 1px solid rgb(0 0 0 / .06); }
.d-note__line i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #e7f4ec; color: #17673f; font-style: normal; font-size: 13px; font-weight: 700; }
.d-note__line b { font-weight: 500; color: #16181a; }
.hero__proof { font-size: var(--t-small); color: var(--muted); }
@media (max-width: 1023px) { .hero__art > .ly-piece--note { left: var(--s-4); bottom: var(--s-4); width: 270px; } }

/* ---- card groups on inner pages ---- */
#ways .panel { --p-h: 300px; }
@media (max-width: 639px) { #ways .panel { --p-h: 200px; } }

/* ---- a diagram on the lit ground takes that ground's ink (as the kit's .frame--lit does) ---- */
:is(.panel, .frame):has(> .dg) {
  color: var(--ground-ink); --ink: var(--ground-ink); --muted: var(--ground-muted);
  --bg: var(--ground-surface); --surface: var(--ground-surface);
  --line: color-mix(in oklab, var(--ground-ink) 14%, transparent); --line-strong: color-mix(in oklab, var(--ground-ink) 28%, transparent);
}

/* ---- the hero collage on a phone: the collage is 342 wide, so set one's pieces take more of it ---- */
@media (max-width: 639px) {
  .ly-collage__set.is-on > .ly-piece:nth-child(1) { left: 4% !important; width: 92% !important; }
  .ly-collage__set.is-on > .ly-piece:nth-child(2) { left: 22% !important; width: 74% !important; top: 54% !important; }
  .ly-collage__set > .ly-piece:nth-child(3) { display: none; }
}

/* ---- the project screens (built from src/data/projects.json) ---- */
.project-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }

/* ---- a lit hero ground: its focus ring and pause button take the ground's ink, so they show on the sand ---- */
:is(.hero__window, .hero__art, .hero__media[data-fx], .ly-collage) { --action: var(--ground-ink); }
.hero--centred .hero__lead { color: var(--ink); }
.project__head { display: flex; align-items: center; gap: var(--s-3); }
.project__head .tag { font: 500 var(--t-label)/1 var(--font-mono); padding: 4px 8px; border-radius: 99px; background: color-mix(in oklab, var(--p-accent) 16%, transparent); color: var(--p-accent); }
:is(.hero__window, .hero__art, .hero__media[data-fx], .ly-collage, .frame--lit) :is(.loop-pause, .ui-pause) { --ink: var(--ground-ink); }
/* a fragment on a lit frame is a white surface in the ground's ink, as the kit draws UI on its lit grounds */
.frame--lit { --frag: #ffffff; }
.project__status { color: var(--p-accent); }

/* the |q⟩ mark is two-tone inline SVG (ink q, accent bracket), so it opts out of the mask */
.mark--ket { background: none; -webkit-mask: none; mask: none; }

/* a section as tall as its content, for short ones (a few cards, a FAQ, one statement) that would leave
   most of a fixed one-screen section empty; listed after system.css, so it wins at equal weight */
main > .section.section--fit { height: auto; min-height: 0; padding-block: var(--padb); }
main > .section.section--fit > .wrap { height: auto; }
main > .section.section--fit > .wrap > .fill { flex: none; }
.section--fit + .section--fit { padding-top: 0; }

/* the home page's project list: one card per project, then the open slot for the next one */
.project-list { display: grid; gap: var(--card-gap, 16px); }
.project-card { display: grid; gap: var(--s-3, 12px); padding: var(--s-6, 32px); border-radius: var(--r-lg, 16px); background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color .2s ease; }
.project-card:hover { background: color-mix(in oklab, var(--surface) 88%, var(--ink)); }
.project-card h3 { font-size: var(--t-h3, 28px); }
.project-card code { font: 400 var(--t-small, 14px)/1 var(--font-mono); color: var(--accent); }
.project-card .project-card__go { color: var(--accent); }
.project-card--open { background: none; border: 1px dashed color-mix(in oklab, var(--ink) 28%, transparent); }
.project-card--open:hover { background: var(--surface); }

/* articles (src/articles/*.mdx): one readable column, the index a list of rows */
.article__col { max-width: 720px; display: grid; gap: var(--s-5, 24px); }
.article__col > h1 { font-size: clamp(40px, 5vw, 64px); }
.article__by { color: var(--muted); }
.prose { font-size: 19px; line-height: 1.7; display: grid; gap: 1.1em; margin-top: var(--s-5, 24px); }
.prose h2 { font-size: var(--t-h3, 24px); margin-top: .8em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .4em; }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 1em; color: var(--muted); }
.prose code { font: .9em var(--font-mono); }
.prose .signoff { margin-top: .6em; color: var(--muted); }
.article-list { display: grid; margin-top: var(--s-6, 32px); border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); }
.article-item { display: grid; gap: var(--s-2, 8px); padding: var(--s-6, 32px) 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); color: var(--ink); text-decoration: none; }
.article-item h2 { font-size: var(--t-h3, 24px); }
.article-item:hover h2 { color: var(--accent); }
/* first on its page (an article, the articles list): clear the fixed nav as a full section would */
main > .section.section--fit:first-child { padding-top: calc(var(--padt) + var(--s-7, 48px)); }
.article__crumb a { color: inherit; text-decoration: none; }
.article__crumb a:hover { color: var(--accent); }