/* Sample runs: replicas of the Echorb app (Original theme) playing a short, made-up run.
   Layout, columns, cards, chips and worker panes follow the app at d9746408c:
   ralph_screen / ralph_kanban_board / ralph_worker_instances, graph_board / graph_node_card,
   spec_driven_gate_bar. Colours follow the app's dark Original theme.
   Motion contract: html[data-motion="still"] = Reduce motion. Runs then show their finished state. */
.sr {
  --a-bg: #0a0d14; --a-side: #0d121b; --a-pan: #111722; --a-pan2: #151c29; --a-line: #202a3a; --a-ink: #e7ecf6; --a-mute: #8e9ab0;
  --a-blue: #2f6bff; --a-blue2: #5b8dff; --a-green: #2fd07a; --a-amber: #f5a524; --a-red: #ef5350; --a-term: #06080d; --a-mag: #c46bff;
  position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--a-bg); color: var(--a-ink);
  border: 1px solid rgba(0, 212, 255, .38); text-align: left;
  box-shadow: 0 0 0 1px rgba(255, 0, 255, .08), 0 22px 60px rgba(0, 0, 0, .6), 0 0 44px rgba(0, 212, 255, .12);
  font: 400 13px/1.35 'Inter', system-ui, sans-serif;
}
.sr *, .sr *::before, .sr *::after { box-sizing: border-box; }
/* title bar like the app's */
.a-title { display: flex; align-items: center; gap: .55rem; height: 40px; padding: 0 .8rem; background: #0b0f17; border-bottom: 1px solid var(--a-line); font-size: 12px; color: var(--a-mute); }
.a-title i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.a-title i:nth-child(1) { background: #ff5f56; } .a-title i:nth-child(2) { background: #ffbd2e; } .a-title i:nth-child(3) { background: #27c93f; }
.a-title b { color: var(--a-ink); font-weight: 600; margin-left: .3rem; }
.a-title .crumb { color: var(--a-mute); } .a-title .crumb b { margin: 0; }
.sr-chip { margin-left: auto; font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .09em; text-transform: uppercase; color: #04120a; background: #2fe07f; border-radius: 99px; padding: .36rem .62rem; white-space: nowrap; }
.sr-replay { min-height: 28px; min-width: 56px; padding: 0 .7rem; font: 600 11px 'Inter', sans-serif; color: var(--a-blue2); background: transparent; border: 1px solid #2b3d66; border-radius: 7px; cursor: pointer; }
.sr-replay:hover, .sr-replay:focus-visible { background: rgba(47, 107, 255, .16); outline: 2px solid var(--a-blue2); outline-offset: 1px; }
html[data-motion="still"] .sr-replay { display: none; }
.a-head { display: flex; align-items: baseline; gap: .7rem; padding: .7rem 1rem .5rem; }
.a-head h4 { margin: 0; font: 700 18px 'Inter', sans-serif; color: var(--a-ink); letter-spacing: 0; text-transform: none; }
.a-head span { color: var(--a-mute); font-size: 12px; }
.sr-cap { display: flex; gap: .6rem; padding: .6rem 1rem; border-top: 1px solid var(--a-line); background: #0b0f17; font-size: 13px; line-height: 1.4; min-height: 2.9rem; color: var(--a-ink); }
.sr-cap::before { content: "\203A"; font: 700 14px/1.3 'JetBrains Mono', monospace; color: #2fe07f; flex: 0 0 auto; }
.sr-cap .sr-step::before { content: ''; }

/* coordinator column + terminals */
.a-body { display: grid; grid-template-columns: 250px 1fr; min-height: 300px; border-top: 1px solid var(--a-line); }
.a-coord { background: var(--a-side); border-right: 1px solid var(--a-line); padding: .6rem .7rem; min-width: 0; }
.a-who { display: flex; gap: .55rem; align-items: center; margin-bottom: .5rem; }
.a-face { width: 34px; height: 34px; border-radius: 9px; background: radial-gradient(circle at 50% 40%, #f0d84a 0 55%, #7a6a10 100%); border: 1px solid #2a3b2a; position: relative; flex: 0 0 auto; }
.a-face::before, .a-face::after { content: ''; position: absolute; top: 12px; width: 4px; height: 5px; border-radius: 50%; background: #1a1a1a; }
.a-face::before { left: 10px; } .a-face::after { right: 10px; }
.a-face.p { background: radial-gradient(circle at 50% 40%, #f2a0ff 0 55%, #6b2a7a 100%); border-color: #4a2a5a; }
.a-who b { display: block; font-size: 13px; } .a-who small { color: var(--a-mute); font-size: 11px; }
.a-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--a-green); margin-left: .3rem; vertical-align: middle; }
.term { font: 400 11px/1.55 'JetBrains Mono', monospace; color: #cdd6e6; background: var(--a-term); overflow: hidden; word-break: break-word; }
.term .ln { display: block; padding-left: 12px; position: relative; animation: ln-in .35s ease both; min-height: 1.55em; }
.term .ln.b::before { content: '\25CF'; position: absolute; left: 0; color: #8a94a8; font-size: 8px; }
.term .ln.i { padding-left: 24px; color: #9eaac0; }
.term .g { color: #4de39a; } .term .r { color: #ff7a7a; } .term .y { color: #ffc766; } .term .bl { color: #7fb0ff; } .term .m { color: #8e9ab0; }
@keyframes ln-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.a-coord .term { border-radius: 8px; padding: .5rem; min-height: 200px; }

/* kanban */
.a-main { min-width: 0; padding: .6rem .7rem .7rem; }
.a-bar { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.a-pill { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--a-line); background: var(--a-pan); border-radius: 7px; padding: .28rem .55rem; font-size: 11.5px; color: var(--a-ink); white-space: nowrap; }
.a-pill.ok { border-color: #1f6b46; color: #6df0b0; background: rgba(47, 208, 122, .08); }
.a-pill.bl { border-color: #2d4a8c; color: #8db0ff; background: rgba(47, 107, 255, .1); }
.a-kan { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; align-items: start; }
.a-col { background: var(--a-pan); border: 1px solid var(--a-line); border-radius: 9px; padding: .45rem; min-height: 190px; min-width: 0; }
.a-col h5 { margin: 0 0 .45rem; font: 700 10.5px 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #aab4c8; display: flex; align-items: center; gap: .35rem; }
.a-col h5 u { text-decoration: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.a-col h5 em { font-style: normal; background: #1a2230; border-radius: 99px; padding: 0 .4rem; font-size: 10px; color: var(--a-mute); }
.a-card { background: var(--a-pan2); border: 1px solid var(--a-line); border-radius: 8px; padding: .45rem .5rem; margin-bottom: .4rem; font-size: 12px; line-height: 1.3; transition: border-color .3s, box-shadow .3s; }
.a-card b { display: block; font-weight: 600; margin-bottom: .3rem; }
.a-card .meta { color: var(--a-mute); font-size: 10.5px; margin-top: .3rem; }
.a-card.live { border-color: var(--a-blue); box-shadow: 0 0 0 1px rgba(47, 107, 255, .4); }
.a-card.hot { border-color: var(--a-red); }
.pri { display: inline-block; font-size: 10.5px; font-weight: 600; padding: .05rem .4rem; border-radius: 5px; border: 1px solid; }
.pri.critical { color: #ff8b8b; border-color: #7a2a2a; background: rgba(239, 83, 80, .12); }
.pri.high { color: #ffc766; border-color: #6a4a12; background: rgba(245, 165, 36, .12); }
.pri.medium { color: #8db0ff; border-color: #2d4a8c; background: rgba(47, 107, 255, .12); }
.pri.low { color: #aab4c8; border-color: #2c3547; background: rgba(170, 180, 200, .08); }
.note { display: block; font-size: 10.5px; margin-top: .25rem; color: var(--a-mute); min-height: 1em; }
.note.r { color: #ff8b8b; } .note.g { color: #6df0b0; }

/* controls bar */
.a-ctl { display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem; border-top: 1px solid var(--a-line); background: #0b0f17; font-size: 12px; flex-wrap: wrap; }
.a-ctl .state { font: 600 11px 'JetBrains Mono', monospace; padding: .25rem .55rem; border-radius: 6px; background: rgba(47, 107, 255, .16); color: #8db0ff; border: 1px solid #2d4a8c; }
.a-ctl .state.done { background: rgba(47, 208, 122, .12); color: #6df0b0; border-color: #1f6b46; }
.a-ctl .txt { color: var(--a-mute); font: 400 11px 'JetBrains Mono', monospace; }
.a-ctl .prog { flex: 1; min-width: 90px; display: flex; align-items: center; gap: .5rem; color: var(--a-mute); font-size: 11px; }
.a-ctl .prog span { flex: 1; height: 6px; border-radius: 99px; background: #1a2230; overflow: hidden; }
.a-ctl .prog i { display: block; height: 100%; width: 0; background: var(--a-blue); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.a-btn { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--a-line); border-radius: 7px; padding: .25rem .6rem; font-size: 11.5px; color: var(--a-ink); background: var(--a-pan); }
.a-btn.stop { color: #ff8b8b; border-color: #7a2a2a; }
.a-btn.go { background: var(--a-blue); border-color: var(--a-blue); color: #fff; font-weight: 600; }
.a-btn.off { opacity: .45; }
.a-btn.press { box-shadow: 0 0 0 3px rgba(47, 107, 255, .4); transform: scale(.96); }

/* worker panes */
.a-wk { border-top: 1px solid var(--a-line); background: #0b0f17; padding: .5rem .8rem .8rem; }
.a-wk h6 { margin: 0 0 .45rem; font: 700 10.5px 'Inter', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #aab4c8; }
.a-wkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.pane { border: 1px solid var(--a-line); border-radius: 8px; overflow: hidden; background: var(--a-term); min-width: 0; transition: opacity .35s, border-color .3s; }
.pane.live { border-color: var(--a-blue); }
.pane.gone { opacity: 0; }
.pane.empty { border-style: dashed; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--a-mute); min-height: 132px; font-size: 12px; }
.pane header { display: flex; align-items: center; gap: .45rem; padding: .35rem .6rem; background: #0e131c; border-bottom: 1px solid var(--a-line); font-size: 11.5px; }
.pane header b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pane header .d { width: 7px; height: 7px; border-radius: 50%; background: var(--a-blue); flex: 0 0 auto; }
.pane header .it { margin-left: auto; font: 400 10px 'JetBrains Mono', monospace; color: var(--a-mute); border: 1px solid #263044; border-radius: 5px; padding: 0 .35rem; flex: 0 0 auto; }
.pane .term { padding: .4rem .6rem; height: 96px; }

/* graph */
.g-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; position: relative; }
.g-lane h5 { margin: 0 0 .45rem; font: 700 10.5px 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #aab4c8; display: flex; justify-content: space-between; }
.g-lane h5 em { font-style: normal; color: var(--a-mute); }
.g-node { background: var(--a-pan2); border: 1px solid var(--a-line); border-radius: 9px; padding: .5rem .55rem; margin-bottom: .5rem; position: relative; z-index: 1; transition: border-color .3s, box-shadow .3s, background .3s; }
.g-node b { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: .3rem; }
.g-node .nrow { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.g-node .meta { color: var(--a-mute); font-size: 10.5px; margin-top: .3rem; }
.chip { display: inline-flex; align-items: center; gap: .25rem; font-size: 10.5px; font-weight: 600; border-radius: 5px; padding: .08rem .4rem; border: 1px solid #263044; color: #aab4c8; background: rgba(170, 180, 200, .06); }
.chip.pend { color: #aab4c8; } .chip.run { color: #5fe0ff; border-color: #1f6a80; background: rgba(0, 200, 255, .1); }
.chip.ver { color: #c9a0ff; border-color: #5a3a8c; background: rgba(150, 90, 255, .12); }
.chip.done { color: #6df0b0; border-color: #1f6b46; background: rgba(47, 208, 122, .1); }
.g-node.run { border-color: #1f9bb8; box-shadow: 0 0 0 1px rgba(0, 200, 255, .3); }
.g-node.ver { border-color: #7a52c9; }
.g-node.done { border-color: #1f6b46; }
.g-prog { height: 3px; border-radius: 99px; background: #1a2230; margin-top: .4rem; overflow: hidden; }
.g-prog i { display: block; height: 100%; width: 0; background: var(--a-blue); transition: width .8s linear; }
.g-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.g-svg path { fill: none; stroke: #2a3550; stroke-width: 1.5; transition: stroke .4s; }
.g-svg path.on { stroke: #3d6bd6; }
.g-strip { display: flex; gap: 1rem; flex-wrap: wrap; padding: .45rem .9rem; border-top: 1px solid var(--a-line); background: #0b0f17; font-size: 11.5px; color: var(--a-mute); }
.g-strip b { color: var(--a-ink); font-weight: 600; }
.g-act { display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--a-line); background: #0b0f17; }
.g-act .list { padding: .5rem .8rem; border-right: 1px solid var(--a-line); }
.g-act h6 { margin: 0 0 .4rem; font: 700 10.5px 'Inter', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #aab4c8; }
.g-act .item { border: 1px solid var(--a-line); border-radius: 7px; padding: .35rem .5rem; margin-bottom: .35rem; font-size: 11.5px; background: var(--a-pan); }
.g-act .wk { padding: .5rem .8rem .7rem; min-width: 0; }

/* spec-driven */
.s-steps { display: flex; margin: .2rem 0 .7rem; }
.s-st { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: 11px; color: var(--a-mute); position: relative; }
.s-st::before { content: ''; position: absolute; top: 12px; right: 50%; width: 100%; height: 2px; background: #243049; z-index: 0; }
.s-st:first-child::before { display: none; }
.s-st i { z-index: 1; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #2d3a56; background: var(--a-bg); font: 700 11px/22px 'Inter', sans-serif; font-style: normal; text-align: center; color: var(--a-mute); transition: all .3s; }
.s-st.done i { border-color: var(--a-green); color: var(--a-green); } .s-st.done::before { background: var(--a-green); }
.s-st.now i { border-color: var(--a-blue); color: #fff; background: var(--a-blue); box-shadow: 0 0 0 4px rgba(47, 107, 255, .25); } .s-st.now::before { background: var(--a-green); }
.s-st.now, .s-st.done { color: var(--a-ink); }
.s-view { display: none; } .s-view.show { display: block; animation: ln-in .4s ease both; }
.s-doc { border: 1px solid var(--a-line); border-radius: 9px; background: var(--a-pan); padding: .65rem .8rem; font-size: 12.5px; line-height: 1.5; min-height: 118px; }
.s-doc b { font-size: 14px; display: block; margin-bottom: .2rem; }
.s-doc .m { color: var(--a-mute); font-size: 11px; }
.s-gate { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding: .6rem .1rem 0; font-size: 12px; color: var(--a-mute); }
.s-gate .lbl { min-width: 6.5rem; }
.s-gate .spacer { flex: 1; }
.s-msg { border: 1px solid #2d4a8c; background: rgba(47, 107, 255, .08); border-radius: 9px; padding: .65rem .8rem; font-size: 12.5px; line-height: 1.45; }
.s-msg.ok { border-color: #1f6b46; background: rgba(47, 208, 122, .08); }
.s-table { width: 100%; border-collapse: collapse; margin-top: .55rem; font-size: 11.5px; }
.s-table th, .s-table td { border: 1px solid var(--a-line); padding: .22rem .5rem; text-align: left; } .s-table th { color: var(--a-mute); font-weight: 600; }
.a-btn.sel { border-color: var(--a-blue); color: #8db0ff; background: rgba(47, 107, 255, .12); }

/* nav tabs for loop modes */
.lm-tabs { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: 1.4rem 0 1rem; }
.lm-tab { appearance: none; background: rgba(10, 4, 32, .6); color: var(--light-gray, #c8d0e0); border: 1px solid rgba(0, 212, 255, .3); border-radius: 12px; padding: .65rem 1rem; min-height: 44px; font: 600 .86rem 'Orbitron', 'Inter', sans-serif; letter-spacing: .5px; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; transition: border-color .2s, background .2s; }
.lm-tab:hover, .lm-tab:focus-visible { border-color: rgba(255, 0, 255, .6); outline: none; }
.lm-tab[aria-selected="true"] { background: rgba(0, 212, 255, .16); border-color: #00d4ff; color: #fff; }
.lm-tab .mode-tag { margin-left: .2rem; }
.lm-panel { display: none; } .lm-panel.on { display: block; animation: ln-in .35s ease both; }
.lm-copy { max-width: 760px; margin: 0 auto 1.2rem; text-align: center; color: var(--light-gray, #c8d0e0); }
.lm-gap { border: 2px dashed rgba(255, 176, 32, .7); border-radius: 14px; padding: 1.2rem; color: #ffb020; font: 500 .82rem/1.5 'JetBrains Mono', monospace; text-align: center; background: rgba(255, 176, 32, .06); display: flex; align-items: center; justify-content: center; min-height: 280px; }

html[data-motion="still"] .sr *, html[data-motion="still"] .lm-panel { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .sr *, html:not([data-motion="full"]) .lm-panel { transition: none !important; animation: none !important; } }

@media (max-width: 991.98px) {
  .a-body { grid-template-columns: 1fr; } .a-coord { display: none; }
  .a-kan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-svg { display: none; }
  .g-act { grid-template-columns: 1fr; } .g-act .list { border-right: 0; border-bottom: 1px solid var(--a-line); }
  .a-col { min-height: 0; }
}
@media (max-width: 575.98px) {
  .a-wkgrid { grid-template-columns: 1fr; }
  .a-title .crumb { display: none; }
  .pane .term { height: 84px; }
  .g-lanes { grid-template-columns: 1fr; }
}
/* keep each run the same height from first frame to last */
@media (min-width: 992px) { #lm-ralph .a-col { min-height: 640px; } .s-view { min-height: 262px; } .a-coord .term { min-height: 270px; } }

/* ===== Drop 4: match the real captures (73fcae7d1) ===== */
.a-search { margin: 0 auto; width: 34%; min-width: 120px; border: 1px solid var(--a-line); border-radius: 8px; padding: .22rem .6rem; font-size: 11.5px; color: var(--a-mute); background: #0e131c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-title .sr-chip { margin-left: 0; }
.a-app { display: grid; grid-template-columns: 168px minmax(0, 1fr); }
.a-nav { background: var(--a-side); border-right: 1px solid var(--a-line); padding: .55rem .5rem; font-size: 12px; color: #b4bed0; }
.a-nav small { display: block; font: 600 9.5px 'Inter', sans-serif; letter-spacing: .08em; color: #6f7b92; margin: .7rem .35rem .25rem; }
.a-nav div { padding: .38rem .55rem; border-radius: 7px; }
.a-nav div.on { background: rgba(47, 107, 255, .2); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--a-blue); }
.a-nav .who { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 700; padding: .2rem .35rem; }
.a-nav .who .a-face { width: 26px; height: 26px; border-radius: 7px; }
.a-nav .who .a-face::before, .a-nav .who .a-face::after { top: 9px; width: 3px; height: 4px; } .a-nav .who .a-face::before { left: 7px; } .a-nav .who .a-face::after { right: 7px; }
.a-pane { min-width: 0; }
.a-head h4 { font-size: 20px; }
.term .ln.p { padding-left: 0; } .term .ln.p.i { padding-left: 14px; color: #aab4c8; }
.term .ln.p.g { color: #4de39a; } .term .ln.p.r { color: #ff7a7a; }
.a-card .ct { display: flex; justify-content: space-between; gap: .4rem; align-items: flex-start; }
.a-card .ct b { margin-bottom: .35rem; } .a-card .ct i { font-style: normal; color: var(--a-mute); }
.a-card .chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.a-card .lease { display: none; font-size: 10.5px; color: #6df0b0; border: 1px solid #1f6b46; background: rgba(47, 208, 122, .1); border-radius: 5px; padding: .05rem .4rem; }
.a-card.live .lease { display: inline-block; }
.a-card .meta { color: var(--a-mute); font-size: 10.5px; margin-top: .35rem; }
.a-runrow { padding: .45rem .8rem; border-top: 1px solid var(--a-line); background: #0b0f17; font-size: 12px; color: var(--a-mute); }
.a-runrow .a-pill { margin-left: .3rem; }
.a-ctl .state { background: rgba(47, 107, 255, .16); } .a-ctl .state:empty { display: none; }
.a-ctl .prog { margin-left: auto; max-width: 340px; }
.a-ctl .txt { flex: 0 0 auto; }
.a-btn.go { background: var(--a-blue); }
.g-note { border: 1px solid #2d4a8c; background: rgba(47, 107, 255, .1); border-radius: 8px; padding: .4rem .65rem; margin-bottom: .55rem; font-size: 11.5px; }
.g-badge { margin-left: .3rem; } .g-badge.parked { color: #ffc766; } .g-badge.integrating { color: #c9a0ff; } .g-badge.completed { color: #6df0b0; }
.g-node b { font-size: 12.5px; } .g-node .nrow { display: flex; gap: .3rem; flex-wrap: wrap; margin: .25rem 0; }
.g-node .meta { margin-top: .25rem; }
.bar-g { height: 4px; background: #16202b; } .bar-g i { display: block; height: 100%; width: 0; background: var(--a-blue); transition: width .6s; }
.g-lab { font: 700 10px 'Inter', sans-serif; letter-spacing: .08em; color: #8e9ab0; }
.g-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.g-terms-empty { color: var(--a-mute); font-size: 12px; padding: 1rem 0; }
.g-terms .pane header b { font-size: 11px; } .g-terms .pane .term { height: 108px; }
.s-doc b.s2 { display: block; font-size: 13px; margin: .55rem 0 .1rem; } .s-doc .m2 { color: var(--a-mute); font-size: 11.5px; }
.s-msg .s-gate { padding-top: .5rem; }
.a-pill.bl { border-color: #2d4a8c; color: #8db0ff; }
@media (min-width: 992px) { #lm-ralph .a-col { min-height: 640px; } .s-view { min-height: 300px; } .a-coord .term { min-height: 280px; } }
@media (max-width: 991.98px) { .a-app { grid-template-columns: 1fr; } .a-nav { display: none; } .a-search { display: none; } .g-terms { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .a-title .crumb { display: none; } .a-ctl .prog { margin-left: 0; max-width: none; } }
/* fixed heights, so a run never moves the page below it */
@media (min-width: 992px) { #lm-ralph .a-col { min-height: 680px; } .s-view { min-height: 330px; } .g-act .list { min-height: 210px; } .g-act .wk { min-height: 210px; } .g-lanes { min-height: 330px; } }
.sr { display: flex; flex-direction: column; } .sr .a-app { flex: 1 1 auto; } .sr .sr-cap { margin-top: auto; }
@media (min-width: 992px) { .sr[data-sr="ralph"] { min-height: 1132px; } .sr[data-sr="graph"] { min-height: 866px; } .sr[data-sr="spec"] { min-height: 838px; } }