/* Copyright (c) 2026 Macleod Labs FZ-LLC. Proprietary and confidential. */
/* The landing (index.html, js/home.mjs, U46): the hero (title, intro, one primary call to action and one secondary), then
   the evolution of RAG on the read-only run view: a caption box of fixed size, the question line and the diagram. */
.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, on the right (the background's detail is on the left): the title, the intro, then the two links. */
.hcol{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px);grid-template-areas:"err err" ". title" ". intro" ". next";column-gap:20px;row-gap:6px;align-items:start;padding:2px 0 8px}
.hcol #landErr{grid-area:err}
.hcol .eh1{grid-area:title}
.hcol .intro{grid-area:intro}
.hcol .next{grid-area:next}
/* 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:clamp(28px,2.4vw,36px);line-height:1.05;letter-spacing:-.025em;margin:0}
.intro{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 two links: one solid button, one outlined; the line under them says where the course starts */
.next{display:flex;align-items:center;gap:6px 16px}
.ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.golearn{font-size:17px;padding:0 24px;min-height:46px}
.golink{font-size:15px;min-height:46px;background:var(--ground)}
.ctasub{margin:0;max-width:30ch;font-size:13px;line-height:1.35;color:var(--muted)}

/* 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}
.home-run .cut:not(.stack) .tap{height:60px}

/* The caption: version n of N, the title, the controls; 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;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"pos name phases ctl" "text text text text";align-items:center;gap:4px 14px;margin:2px 0 6px;padding:6px 12px 8px;border:1px solid var(--rule);border-left:4px solid var(--amber);border-radius:8px;background:var(--paper)}
.evohead{display:contents}
.evopos{grid-area:pos}
.evoname{grid-area:name}
.evoctl{grid-area:ctl}
.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}
.evoctl{display:flex;gap:4px}
.evoctl button{font:500 12.5px var(--sans);min-height:30px;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)}
.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. */
.evo{position:relative}
.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 0 2px;padding:0 8px;border-radius:6px;background:color-mix(in srgb,var(--ground) 88%,transparent)}
.home-run .pline q{min-width:0;overflow:hidden;text-overflow:ellipsis}
.home-run .pline span{flex:none}

/* Phone: the hero stacks; the caption keeps four lines of text; the controls go under the title. */
@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}
  .eh1{font-size:25px}
  .intro{font-size:14px}
  .golearn,.golink{min-height:44px}
  .golearn{font-size:16px;padding:0 16px}
  .golink{padding:0 14px}
  .ctasub{display:none}
  .next{flex-wrap:wrap}
  .evo{--evo-lines:4;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pos name" "phases phases" "text text" "ctl ctl";gap:4px 10px;padding:6px 10px}
  .evoname{font-size:16px}
  .evoctl button{flex:1 1 0}
  .evophases{gap:4px 10px;font-size:10.5px}
  .evotext{font-size:14px}
  .home-run .cut{margin-top:4px}
}
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}