/* Nous site: page CSS shared by every page. Only what sits inside a visual (mock UI pieces, the
   architecture diagram, the terminal) plus the kit recipes' own page-CSS blocks (app-frame).
   Loaded after the kit's stylesheets and the :root palette block. */

/* ---------------------------------------------------------------- a mock's text: mono for ids, tool names */
.nx code { font-family: var(--font-mono); font-size: .92em; }

/* ---------------------------------------------------------------- hero collage pieces (triptych):
   sized in % of the collage, their text in container units, so a phone shows the same picture smaller */
.ly-collage { container-type: inline-size; }
.ly-collage .ly-piece.nx { background: #fff; color: #141414; padding: 3.2cqw 3.6cqw; display: grid; align-content: start;
  gap: 1.6cqw; font: 400 max(13px, 2cqw)/1.35 var(--font-text); }
.nx .pc-lbl { color: #565b6e; font-size: max(13px, 1.75cqw); display: flex; justify-content: space-between; gap: 2cqw; }
.nx .pc-title { font: 500 max(14px, 2.9cqw)/1.2 var(--font-display); letter-spacing: -0.01em; }
.nx .pc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; padding-top: 1.4cqw; border-top: 1px solid #e3e6ea; }
.nx .pc-row > span:last-child { color: #565b6e; white-space: nowrap; }
.nx .pc-tag { display: inline-block; padding: .3cqw 1.2cqw; border-radius: 4px; background: #e6eef3; color: #0f5257; font-weight: 500; font-size: max(13px, 1.7cqw); white-space: nowrap; }
.nx .pc-tag--warn { background: #fbe9e4; color: #9a2f17; }
.nx .pc-tag--ok { background: #e3f1ea; color: #1d6440; }
.nx .pc-meter { height: 1cqw; min-height: 6px; border-radius: 99px; background: #e3e6ea; overflow: hidden; }
.nx .pc-meter > i { display: block; height: 100%; width: calc(var(--v) * 100%); background: #0f5257; }
.ly-collage .ly-piece.nx-dark { background: #141414; color: #e8eef2; font-family: var(--font-mono); font-size: max(13px, 1.9cqw); line-height: 1.55; gap: .6cqw; }
.nx-dark .t-cmd::before { content: "$ "; color: #7fb3b8; }
.nx-dark .t-out { color: #a9b3bc; }
.nx-dark .t-ok { color: #8fd1a6; }

/* ---------------------------------------------------------------- app-frame (sections-library.md, app-frame: the recipe's page CSS) */
.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; }
}

/* ---------------------------------------------------------------- the decision record (Nous's own record view, drawn) */
.rec { padding: 20px 24px; display: grid; gap: 14px; font-size: 13px; line-height: 1.45; color: var(--u-ink); }
.rec__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--u-muted); font-size: 12px; }
.rec__title { font: 500 18px/1.3 var(--font-display); letter-spacing: -0.01em; margin: 0; }
.rec__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rec__cell { border: 1px solid var(--u-line-2); border-radius: var(--u-r2); padding: 10px 12px; display: grid; gap: 6px; }
.rec__cell b { font-weight: 500; font-size: 15px; }
.rec__k { color: var(--u-muted); font-size: 12px; }
.rec__bar { height: 6px; border-radius: 99px; background: var(--u-fill-3); overflow: hidden; }
.rec__bar > i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--u-accent); }
.rec__h { color: var(--u-muted); font-size: 12px; margin: 4px 0 0; }
.rec__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rec__list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--u-line); }
.rec__list li > span:first-child { color: var(--u-muted); font-size: 12px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; background: var(--u-fill-2); color: var(--u-text-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip--acc { background: var(--u-tint); color: var(--u-accent-text); }
.chip--ok { background: #e3f1ea; color: #1d6440; }
.chip--warn { background: #fbe9e4; color: #9a2f17; }
@media (max-width: 639px) {
  /* a phone shows the record whole: the mock grows to its content (no fill height, no fade) and drops the deliberation trail */
  #record > .wrap > .app.ui.fill { flex: none; }
  .app > .app__pane { overflow: visible; }
  .app > .app__pane::after { display: none; }
  .rec .rec__more { display: none; }
}
@media (max-width: 639px) { .rec { padding: 16px; } .rec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rec__grid > :nth-child(3) { display: none; } .rec__list li { grid-template-columns: 76px minmax(0, 1fr); } }

/* ---------------------------------------------------------------- small mock panels in feature cards */
.mini { width: 100%; padding: 16px 18px; display: grid; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--u-ink); background: var(--u-bg);
  border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow-sm); }
.mini__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--u-muted); font-size: 12px; }
.mini__q { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--u-line-2); border-radius: var(--u-r2); font-family: var(--font-mono); font-size: 12px; }
.mini__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 8px; border-top: 1px solid var(--u-line); }
.mini__row > span:first-child { min-width: 0; }
.mini__row small { display: block; color: var(--u-muted); font-size: 12px; }
.mini code { font-family: var(--font-mono); font-size: 12px; }

/* ---------------------------------------------------------------- the terminal block (real commands, copied from the quickstart) */
.term { margin: 0; padding: 20px 24px; background: #141414; color: #e8eef2; border-radius: var(--r-lg); font: 400 14px/1.75 var(--font-mono);
  overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.term .c { color: #8a98a3; }
.term .p { color: #7fb3b8; user-select: none; }
.term .ok { color: #8fd1a6; }
@media (max-width: 639px) { .term { font-size: 13px; padding: 16px; } }

/* ---------------------------------------------------------------- the comparison table */
.cmp { display: grid; margin-top: var(--s-7); }
.cmp__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); padding-block: 12px; border-bottom: 1px solid var(--line, color-mix(in oklab, var(--ink) 14%, transparent)); }
.cmp__row > :nth-child(1) { grid-column: span 2; font-weight: 500; }
.cmp__row > :nth-child(2) { grid-column: span 4; color: var(--muted); }
.cmp__row > :nth-child(3) { grid-column: 7 / span 6; }
.cmp__row--head { border-bottom: 0; }
.cmp__row--head > * { font-size: var(--t-label); font-weight: 500; color: var(--ink) !important; }
/* the comparison in two screens: its picture (one turn of a typical agent over one turn of Nous) beside the
   heading, then the table. The two turns sit in the lit frame at their own height (the stage only lends its
   palette), so nothing is cut */
.cmp__visual { margin-top: var(--s-7); }
.frame.cmp__visual { padding: var(--s-6); }
.group > .cmp__visual.fill { flex: 1 1 auto; }
.cmp__visual > .stage { position: relative; inset: auto; width: min(100%, 920px); }
.cmp__visual .turns { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
@media (min-width: 1024px) { #compare .cmp { margin-top: 0; } }
@media (min-width: 1280px) {
  #compare .cmp__row { padding-block: 26px; }
  /* the two turns at a size that holds the frame: larger type and rows, the frame's ground round them */
  .cmp__visual > .stage { width: min(100%, 1040px); }
  .cmp__visual .turns { gap: var(--s-6); }
  .cmp__visual .mini { padding: 22px 26px; gap: 14px; font-size: 15px; }
  .cmp__visual .mini__head { font-size: 13px; }
  .cmp__visual .mini__row { padding-top: 12px; }
  .cmp__visual .mini__row small { font-size: 14px; margin-top: 2px; }
}
@media (max-width: 1279px) { .cmp__visual { --ratio: 0px; } }
@media (max-width: 767px) { .cmp__visual .turns { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) {
  .frame.cmp__visual { padding: var(--s-4); }
  .cmp__visual { margin-top: var(--s-6); }
  #compare .cmp__row { padding-block: 6px; }
}
/* the FAQ's picture: a still hub of what Nous runs on and talks through, drawn like the architecture diagram
   (inline SVG lines under HTML nodes with the site's real icons) */
.hub { position: relative; margin-top: var(--s-4); min-height: var(--p-h); }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub__ln { stroke: color-mix(in oklab, var(--ink) 30%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hub__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px 0 9px; border-radius: 6px; background: #fff; color: var(--ink); white-space: nowrap;
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); box-shadow: 0 1px 2px color-mix(in oklab, var(--ink) 12%, transparent);
  font: 500 13px/1 var(--font-text); }
.hub__node > img { display: block; width: 18px; height: 18px; }
.hub__node--core { height: 40px; padding: 0 16px; background: var(--ink); color: var(--bg); border-color: var(--ink); font-size: 14px; }
@media (max-width: 639px) { .hub { --p-h: 216px; } .hub__node:not(.hub__node--core) { padding: 0 7px; } .hub__label { display: none; } }
@media (max-width: 1023px) { .cmp__row > :nth-child(1) { grid-column: span 3; } .cmp__row > :nth-child(2) { grid-column: span 4; } .cmp__row > :nth-child(3) { grid-column: 8 / span 5; } }
@media (max-width: 639px) {
  .cmp__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: 10px; }
  .cmp__row > * { grid-column: 1 / -1 !important; }
  .cmp__row--head { display: none; }
  .cmp__row > :nth-child(2) { display: none; }
}

/* ---------------------------------------------------------------- the architecture diagram (inline SVG, two drawings: wide and tall) */
.arch { margin-top: var(--s-7); }
.arch svg { display: block; width: 100%; height: auto; }
.arch .arch__tall { display: none; }
@media (max-width: 767px) { .arch .arch__wide { display: none; } .arch .arch__tall { display: block; max-width: 420px; margin-inline: auto; } }
.arch .box { fill: var(--surface, #d0e0eb); stroke: color-mix(in oklab, var(--ink) 40%, transparent); stroke-width: 1.2; }
.arch .box--ink { fill: var(--ink); stroke: none; }
.arch .box--acc { fill: #fff; stroke: var(--action); stroke-width: 1.6; }
.arch .ln { fill: none; stroke: color-mix(in oklab, var(--ink) 55%, transparent); stroke-width: 1.4; }
.arch .ln--dash { stroke-dasharray: 5 5; }
.arch .t { fill: var(--ink); font: 500 17px/1 var(--font-display); }
.arch .t--inv { fill: var(--bg); }
.arch .s { fill: var(--muted); font: 400 14px/1 var(--font-text); }
.arch .m { fill: var(--ink); font: 400 13px/1 var(--font-mono); }
.arch .ah { fill: color-mix(in oklab, var(--ink) 55%, transparent); }

/* ---------------------------------------------------------------- home: small layout pieces inside sections */
.hero__more { margin-top: var(--s-4); }
.run__stats { margin-top: var(--s-8); }
.run__stats .t-small { margin-top: var(--s-2); }
@media (max-width: 639px) { .run__stats { margin-top: var(--s-6); } }
.stackrow { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.stackrow li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-small); font-weight: 500; }
@media (max-width: 1279px) { .stackrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the triptych's big button takes the page's one button size, so the main action has one look */
.hero--triptych .hero__cta .btn { height: var(--btn-h); font-size: var(--t-body); padding-inline: var(--s-6); }
@media (max-width: 639px) {
  .ly-collage .nx-dark .t-out { display: none; }
  #features .card:not(:first-child) > .panel { display: none; }
}
.close__word { flex-shrink: 0; line-height: 1.1; }
.trace .mini__row small { font-size: 13px; }

/* ---------------------------------------------------------------- architecture page */
.wv { padding: 20px 24px; }
.wv__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
@media (max-width: 639px) { .wv__cols { grid-template-columns: minmax(0, 1fr); } .wv__cols > :last-child { display: none; } }
.soc__quote { margin: 0; }
.soc__quote .muted { display: block; margin-top: var(--s-2); font-size: var(--t-small); }
.mini b { font-weight: 500; }
.statement .t-lead { max-width: 52ch; margin-top: var(--s-6); }
/* a split frame holding a drawn list takes most of the screen, so the section is not half empty */
@media (min-width: 1024px) { main > .section .frame--split.frame--lit { min-height: min(700px, calc(100vh - 200px)); } }
.hero--centred .hero__lead { color: var(--ink); }
@media (max-width: 639px) { .soc__map .mini__row:nth-of-type(n+5) { display: none; } }

/* ---------------------------------------------------------------- memory page: the hero collage's two pieces */
.hero__art > .ly-piece.mem { padding-right: var(--ly-cut-room); }
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 300px; box-shadow: var(--u-shadow); }
@media (max-width: 639px) { .ly-piece.mem .mini__row:nth-of-type(n+4) { display: none; } }

/* ---------------------------------------------------------------- capabilities page */
.hero__media--ui { background: var(--ground-bg, #d9ccb7); }
.hero__media--ui > .plan { position: absolute; left: var(--s-7); right: var(--s-7); top: var(--s-7); width: auto; }
@media (max-width: 639px) { .hero__media--ui > .plan { left: var(--s-4); right: var(--s-4); top: var(--s-4); } .hero__media--ui .ly-float { display: none; } }
.caps { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.caps li { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.caps b { font-weight: 500; display: block; }
.icons__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding-top: 8px; }
.icons__grid > span { display: flex; align-items: center; gap: 10px; font-size: 13px; }
main .statement .mo-la__sub { color: var(--ink); }

/* ---------------------------------------------------------------- get-started page: terminals as the steps' pictures */
[data-moment="pinned-chapters"] .mo-pc__visual > .term { min-height: 100%; font-size: 13px; }
#containers .term { box-shadow: var(--u-shadow); }
.ly-collage .ly-piece.nx-dark > span { overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .icons .mini__head > span:last-child { display: none; }
  .icons__grid > span { font-size: 12px; gap: 8px; min-width: 0; }
  .icons__grid .ic-tile--40 { --tile: 32px; }
}