/* Copyright (c) 2026 Macleod Labs FZ-LLC. Proprietary and confidential. */
/* The landing (index.html, js/home.mjs, U46): the hero (title, intro, one call to action), then
   the evolution of RAG on the read-only run view: a caption box of fixed size, the question line, the code box, the
   diagram and the run's answer (layout D, owner 2026-10-31). */
.hero{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px;border-bottom:1px solid var(--rule)}
.home-run .wrap{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.home-run .wrap>*{min-width:0}
/* The hero: the title on one line where it fits, then Start the course left of the intro, centred on it. */
.hcol{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"err err" "title title" "next intro";column-gap:16px;row-gap:4px;align-items:center;padding:0 0 6px}
.hcol #landErr{grid-area:err}
.hcol .eh1{grid-area:title}
.hcol .intro{grid-area:intro}
.hcol .next{grid-area:next}
/* The code box (owner 2026-10-31), beside the caption while the run plays: the example code the run's current step
   runs (home.code_box.lines lines), that line marked and the rest dimmed. As tall as the left column, never sized by
   its content (contain:size); nothing to scroll, select or click. */
.codebox{contain:size;min-width:0;overflow:hidden;padding:4px 8px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);font:11px/1.4 var(--mono);user-select:none;pointer-events:none}
.codehead{display:flex;gap:8px;height:16px;margin-bottom:2px;color:var(--muted);white-space:nowrap}
.codestage{flex:none;color:var(--ink);font-weight:600}
.codepath{min-width:0;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}   /* the path's start is cut, its file name and line kept */
.codelines{margin:0;font:inherit;white-space:pre;overflow:hidden;color:var(--muted)}
.codelines span{opacity:.6}
.codelines .on{opacity:1;color:var(--ink);background:color-mix(in srgb,var(--amber) 22%,transparent)}
.codebox:empty{visibility:hidden}
/* A run's error line lies over the caption under the hero, so showing it moves nothing (fail loud, in place). */
.hcol #askErr{position:absolute;left:0;right:0;top:100%;z-index:7;margin:4px 0 0;padding:4px 8px;background:var(--ground);border:1px solid var(--live);border-radius:6px}
.eh1{font-family:var(--display);font-weight:700;font-size:min(30px,2.15vw);line-height:1.05;letter-spacing:-.025em;margin:0}
.intro{max-width:80ch;font-size:14.5px;line-height:1.42;margin:0}
.askerr{margin:8px 0 0;font-size:13px;color:var(--live);font-weight:600}
.askerr:empty{display:none}
/* the call to action: one solid button */
.next{display:flex;align-items:center}
.golearn{font-size:17px;padding:0 24px;min-height:42px}

/* The run view on the landing: the diagram only. The shared markup stays (one RunView); the inspector cards, the trace
   and the summary are not shown (owner U46: no Code, Cache or Config cards, no knobs). */
.home-run{padding-top:0}
.home-run #insp,.home-run #trace,.home-run #esum{display:none}
.home-run .legend,.home-run #iaway{display:none}
/* The stage cards: the stage's name and what it did on this run only. Its kind, code and config line and the cache
   entries are the Engine page's (owner U46: no code or cache detail on the landing). */
.home-run .co .kind,.home-run .co code,.home-run .co .centry,.home-run .cfgv{display:none}
.home-run .co{padding:5px 9px;min-height:0}
/* The write-back arc's room under the boxes is held from the start, so the housing never grows mid-run. */
.home-run .cut{--card-lines:2}
.home-run .cut:not(.stack) .chamber{margin-bottom:92px;height:76px}
/* The pipeline view (plan V4): js/home.mjs draws it in #cut (#pipe) in place of the run view's diagram, which still
   plays the run but is not shown. Wider than the box at the minimum scale (a phone), it scrolls sideways inside. */
.home-run .cut>:not(.pipeview):not(.cutmsg){display:none}
/* Opaque over the hero art so the diagram reads (owner 2026-11-01); no padding, so the fit's clientWidth is the drawing's. */
.home-run .pipeview{grid-column:1 / -1;display:flex;align-items:center;min-width:0;overflow-x:auto;overflow-y:hidden;background:var(--paper);border:1px solid var(--rule);border-radius:8px}
.home-run .pipeview svg{display:block;flex:none}

/* Layout D (owner 2026-10-31), wide screens: the page body is a grid of two columns, the right one 38%. Row 1 the hero
   across both; row 2 the controls, question and caption (left) and the code box (right); row 3 the diagram across both.
   When the run answers (.home-run[data-read], js/home.mjs) the diagram shrinks by home.evolution.read_scale into the
   left column under the caption, and the answer takes the right column from the controls to the diagram's foot in the
   code box's place. Transforms and opacity only, so the rows keep their height and nothing below moves; at once under
   reduced motion. The next version's run takes it back. */
.evotop{display:contents}
.evoleft{display:flex;flex-direction:column;gap:4px;min-width:0}
@media (min-width:821px){
  .home-run .wrap{grid-template-columns:minmax(0,1fr) minmax(0,38%);column-gap:12px}
  .home-run .wrap>*{grid-column:1 / -1}
  .home-run .hcol{grid-row:1}
  .home-run .evoleft{grid-column:1;grid-row:2;margin:0 0 2px}
  .home-run .codebox{grid-column:2;grid-row:2;align-self:stretch;margin:0 0 2px}
  .home-run .ans{grid-column:2;grid-row:2 / 4;align-self:stretch;position:relative;z-index:3}
  .home-run .cut{grid-row:3;transform-origin:0 0;transition:transform .3s ease}
  .home-run .codebox,.home-run .ans{transition:opacity .3s ease,visibility .3s}
  .home-run:not([data-read]) .ans,.home-run[data-read] .codebox{opacity:0;visibility:hidden}
  .home-run[data-read] .cut{transform:scale(var(--read-scale,.6))}
}
@media (min-width:821px) and (prefers-reduced-motion:reduce){ .home-run .cut,.home-run .codebox,.home-run .ans{transition:none} }
.evoctl{display:flex;gap:4px}
.evoctl button{flex:none;white-space:nowrap;font:500 12.5px var(--sans);min-height:28px;padding:0 10px;border:1px solid var(--rule);border-radius:6px;background:var(--ground);color:var(--ink);cursor:pointer}
.evoctl button[data-a="toggle"]{min-width:64px}   /* Pause and Play take the same width */
.evoctl button:hover{border-color:var(--ink)}
/* The run-on dropdown (owner 2026-11-01): last on the controls' row, right-justified; on a phone its own full row. The
   buttons keep their width and one line; the dropdown takes what is left, up to 320px, cutting its text first. */
.evoctl{align-items:center}
.evoctl select{margin-left:auto;flex:0 1 320px;min-width:0;max-width:320px;font:500 12.5px var(--sans);min-height:28px;padding:0 6px;border:1px solid var(--rule);border-radius:6px;background:var(--ground);color:var(--ink);cursor:pointer}
.evoctl select:hover{border-color:var(--ink)}
/* A saved pick the landing has no runs for: the default plays and this line says so, as the preferences' own line does. */
.evorunwarn{width:fit-content;max-width:100%;margin:4px 0 0 auto;padding:2px 6px;border-radius:4px;background:var(--ground);font-size:12.5px;color:var(--live)}
.evorunwarn[hidden]{display:none}

/* The caption: version n of N and the title; the three phases, the current one marked; one box of text whose height is
   fixed (two lines, four on a phone), so a phase or version change moves nothing. Longer text scrolls inside. */
.evo{--evo-lines:2;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pos name" "phases phases" "text text";align-items:center;gap:2px 12px;padding:5px 12px 7px;border:1px solid var(--rule);border-left:4px solid var(--amber);border-radius:8px;background:var(--paper)}
.evopos{grid-area:pos}
.evoname{grid-area:name}
.evophases{grid-area:phases}
.evotext{grid-area:text}
.evopos{font:600 12px var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.evoname{min-width:0;margin:0;font-family:var(--display);font-weight:700;font-size:18px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evophases{list-style:none;display:flex;gap:4px 16px;margin:0;padding:0;font:600 11.5px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.evophases li[aria-current]{color:var(--ink);text-decoration:underline 3px var(--amber);text-underline-offset:5px}
.evo[data-phase="fails"] .evophases li[aria-current]{text-decoration-color:var(--live)}
.evotext{margin:0;font-size:15px;line-height:1.45;height:calc(var(--evo-lines) * 1.45em);overflow:auto}
.evo[data-phase="fails"]{border-left-color:var(--live)}
/* The caption's divider (U45): over the box's bottom edge, so it takes no layout space; a grip line on hover and focus. */
.evosep{position:absolute;left:12px;right:12px;bottom:-6px;height:12px;cursor:row-resize;touch-action:none;border-radius:6px}
.evosep::after{content:"";position:absolute;left:50%;top:4px;width:48px;height:4px;margin-left:-24px;border-radius:2px;background:var(--rule)}
.evosep:hover::after,.evosep:focus-visible::after{background:var(--amber)}
.evosep:focus-visible{outline:2px solid var(--amber);outline-offset:1px}

/* The question line: one line, the question cut with an ellipsis (the whole of it on hover), so a new version never
   shifts the diagram. */
.home-run .pline{display:flex;align-items:baseline;gap:8px;height:1.6em;overflow:hidden;white-space:nowrap;margin:0;padding:0 8px;border-radius:6px;background:var(--ground)}
.home-run .pline q{min-width:0;overflow:hidden;text-overflow:ellipsis}
.home-run .pline span{flex:none}

/* The answer as the engine wrote it (js/home.mjs renderAnswer): paragraphs with their line breaks, code as written,
   tables; a wide table or code block scrolls sideways inside, never the page. The whole answer on hover. contain:size:
   the rows size it, never its content, so a long answer moves nothing; it scrolls inside. */
.ans{--answer-lines:6;contain:size;display:flex;flex-direction:column;min-width:0;padding:5px 12px 7px;border:1px solid var(--rule);border-radius:8px;background:var(--paper)}
.anslabel{flex:none;margin:0 0 3px;font:600 11.5px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ansbody{flex:1 1 0;min-height:0;overflow:auto;font-size:14px;line-height:1.45}
.ansbody p{margin:0 0 .5em;white-space:pre-wrap;overflow-wrap:anywhere}
.ansbody .answait{color:var(--muted)}
.anssrc{flex:none;margin:4px 0 0;font-size:11.5px;line-height:1.35;color:var(--muted)}
.anssrc a{color:inherit;text-decoration:underline}
.ansbody pre{margin:0 0 .5em;padding:6px 8px;overflow-x:auto;font:12.5px/1.45 var(--mono);background:var(--ground);border:1px solid var(--rule);border-radius:6px}
.anstable{overflow-x:auto;margin:0 0 .5em}
.ansbody table{border-collapse:collapse;font-size:13px;line-height:1.35}
.ansbody th,.ansbody td{padding:3px 8px;border:1px solid var(--rule);text-align:left;vertical-align:top}
.ansbody th{background:var(--ground);font-weight:600}
.ansbody>:last-child{margin-bottom:0}

/* Phone: the hero stacks; one column: the controls (full width), the question, the caption with four lines of text, the
   diagram, then the answer, which shows from the first run's answer on, --answer-lines (home.evolution.answer_lines)
   tall. */
@media (max-width:820px){
  .hcol{grid-template-columns:minmax(0,1fr);grid-template-areas:"err" "title" "intro" "next";row-gap:6px;padding:4px 0 8px}
  .codebox{display:none}   /* no room on a phone: the diagram, then the answer */
  .eh1{font-size:25px}
  .intro{font-size:14px}
  .golearn{min-height:44px;font-size:16px;padding:0 16px}
  .evo{--evo-lines:4;gap:4px 10px;padding:6px 10px}
  .evoname{font-size:16px}
  .evoctl{flex-wrap:wrap}
  .evoctl button{flex:1 1 auto;min-height:30px;padding:0 6px;white-space:nowrap}
  .evoctl select{flex:1 0 100%;max-width:none;min-height:30px}
  .evophases{gap:4px 10px;font-size:10.5px}
  .evotext{font-size:14px}
  .home-run .cut{margin-top:4px}
  .ans{contain:none;order:1;margin:8px 0 0}
  .ans:not([data-ready]){display:none}
  .ansbody{flex:none;height:calc(var(--answer-lines) * 1.45em)}
}
footer.site{font-size:13px;color:var(--muted);padding:28px 0 44px;border-top:1px solid var(--rule)}
footer.site a{color:var(--muted)}
.embed .hero,.embed footer.site{display:none}