/* Responsive repairs for the four interactive RapiApp Lab demos. */
html{overflow-x:clip}body{overflow-x:clip}
@media(max-width:700px){
  /* Agent Control Room: let long scenario names wrap inside the available pane. */
  .agent-demo .app,.agent-demo .main,.agent-demo .content,.agent-demo .panel,.agent-demo .case-context{min-width:0}
  .agent-demo .top{height:auto;min-height:52px;gap:8px;flex-wrap:wrap;padding:8px 10px}
  .agent-demo .crumb{min-width:0;overflow-wrap:anywhere;font-size:9px}
  .agent-demo .topright{min-width:0;gap:8px;flex-wrap:wrap}
  .agent-demo .topright .home-link{min-height:38px;max-width:100%;white-space:normal;line-height:1.25}
  .agent-demo .titlebar{align-items:flex-start;flex-direction:column;gap:8px}
  .agent-demo .titlebar>div{min-width:0}
  .agent-demo .titlebar h1{font-size:clamp(26px,8vw,34px);line-height:1.02;overflow-wrap:anywhere}
  .agent-demo .demo{white-space:normal;line-height:1.35}
  .agent-demo .source-row{grid-template-columns:30px minmax(0,1fr) auto;gap:7px}
  .agent-demo .source-row>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
  .agent-demo .source-row b,.agent-demo .source-row small{overflow-wrap:anywhere}
  .agent-demo .event-log .log div{min-width:0;overflow-wrap:anywhere}
  .agent-demo .actions{flex-wrap:wrap}
  .agent-demo .actions button{min-height:40px}
  /* Atlas: move map controls below the map, rather than layering them over it. */
  .atlas-demo .frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:clamp(250px,72vw,330px) auto;gap:8px;height:auto;min-height:0;padding:43px 8px 9px;overflow:hidden}
  .atlas-demo .network-stage{position:relative;grid-column:1/-1;grid-row:1;inset:auto;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
  .atlas-demo .map-base{width:min(100%,560px);max-width:100%;height:auto}
  .atlas-demo .overlay,.atlas-demo .layerpanel{position:relative;inset:auto;align-self:stretch;width:auto;min-width:0;max-width:none;padding:8px;background:#101a17;border-color:#73897b}
  .atlas-demo .overlay{grid-column:1;grid-row:2}
  .atlas-demo .overlay b{display:block;font-size:10px;line-height:1.25;overflow-wrap:anywhere}
  .atlas-demo .overlay p{font-size:9px;line-height:1.35;overflow-wrap:anywhere}
  .atlas-demo .layerpanel{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:2px 6px}
  .atlas-demo .layerpanel strong{grid-column:1/-1;margin:0 0 2px;font-size:8px}
  .atlas-demo .layer{min-width:0;gap:4px;padding:2px 0;font-size:8px;line-height:1.2}
  .atlas-demo .layer input{flex:0 0 14px;width:14px;height:14px;margin:0}
  .atlas-demo .scale{right:5px;top:50%;bottom:auto;transform:translateY(-50%);gap:4px}
  .atlas-demo .scale button{width:34px;height:34px}
  .atlas-demo .hud.bl,.atlas-demo .hud.br{display:none}
  .atlas-demo .hud.tl,.atlas-demo .hud.tr{top:6px;font-size:8px;line-height:1.5}
  .atlas-demo .hud.tl{left:8px}.atlas-demo .hud.tr{right:8px}
  .atlas-demo .map-legend{bottom:2px;gap:6px;font-size:7px;white-space:normal}
  .atlas-demo .node span{max-width:74px;white-space:normal;font-size:6px;line-height:1.1}
  .atlas-demo .node .capacity-flag{font-size:6px}
  .atlas-demo .controls{grid-template-columns:minmax(0,1fr);gap:10px}
  .atlas-demo .chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .atlas-demo .chip{min-width:0;min-height:40px;padding:6px 4px;font-size:8px;line-height:1.15;overflow-wrap:anywhere}
  .atlas-demo .detail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .atlas-demo .detail div{min-width:0;padding:12px}
  .atlas-demo .detail b{font-size:16px;overflow-wrap:anywhere}
  .atlas-demo .table-scroll{overflow:visible}
  .atlas-demo table{display:block;width:100%;min-width:0;white-space:normal;font-size:11px}
  .atlas-demo thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .atlas-demo tbody,.atlas-demo tfoot{display:block}
  .atlas-demo tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;padding:11px 12px;border-bottom:1px solid #35483e}
  .atlas-demo tbody td{display:block;min-width:0;padding:0;border:0;white-space:normal;overflow-wrap:anywhere}
  .atlas-demo tbody td:first-child{grid-column:1/-1}
  .atlas-demo tbody td:not(:first-child)::before{display:block;margin-bottom:2px;color:#9db09e;font:7px var(--mono);letter-spacing:.06em;text-transform:uppercase;content:attr(data-label)}
  .atlas-demo .site-select{min-height:38px;padding:2px 4px;font-size:11px}
  .atlas-demo tfoot tr{display:grid;grid-template-columns:1fr auto;gap:5px;padding:10px 12px}
  .atlas-demo tfoot th,.atlas-demo tfoot td{padding:0;border:0;font-size:9px;white-space:normal}
  .atlas-demo tfoot th{grid-column:1/-1}
  /* Scroll World: retain the pinned narrative, but reserve room below the sticky header. */
  .scroll-demo .topbar{top:0;z-index:30}
  .scroll-demo .hero{min-width:0}
  .scroll-demo .hero h1{font-size:clamp(43px,13vw,78px);overflow-wrap:anywhere}
  .scroll-demo .hero-visual{min-width:0;max-width:100%;overflow:hidden}
  .scroll-demo .scatter i{max-width:40vw;overflow-wrap:anywhere}
  .scroll-demo .hero-note{max-width:90%;white-space:normal}
  .scroll-demo .sticky-map{position:sticky;top:60px;height:calc(100svh - 60px);height:calc(100dvh - 60px);min-height:430px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;z-index:3}
  .scroll-demo .map-side{grid-row:1;min-height:0;padding:22px 8px 8px}
  .scroll-demo .world{width:min(82vw,400px);height:min(53vw,270px);min-height:190px}
  .scroll-demo .world .world-card{width:clamp(88px,28vw,112px);padding:6px;font-size:7px;line-height:1.2}
  .scroll-demo .world .world-card strong{font-size:9px;overflow-wrap:anywhere}
  .scroll-demo .world-card.c1{left:1%;top:12%}.scroll-demo .world-card.c2{right:1%;top:12%}.scroll-demo .world-card.c3{left:31%;bottom:7%}
  .scroll-demo .world .hub{width:48px;height:36px;font-size:8px}
  .scroll-demo .sidecopy{grid-row:2;grid-template-columns:minmax(0,1fr) auto;gap:3px 9px;padding:10px 14px max(12px,env(safe-area-inset-bottom));}
  .scroll-demo .sidecopy h2{min-width:0;font-size:clamp(22px,7vw,28px);line-height:1.02;overflow-wrap:anywhere}
  .scroll-demo .sidecopy p{min-width:0;line-height:1.3;overflow-wrap:anywhere}
  .scroll-demo .sidecopy .statline{grid-column:2;grid-row:2/4;max-width:100px;font-size:9px;line-height:1.5}
  .scroll-demo .story-step{min-height:78svh;min-height:78dvh;padding:16px 14px;align-items:flex-end}
  .scroll-demo .story-card{width:min(100%,390px);max-height:72%;overflow:auto;padding:14px}
  .scroll-demo .story-card h3{font-size:clamp(25px,8vw,32px);overflow-wrap:anywhere}
  .scroll-demo .story-card p,.scroll-demo .story-card li{font-size:12px;line-height:1.45}
  .scroll-demo .closing{min-height:0;padding:40px 0}
  .scroll-demo .close-card{width:100%;min-width:0;padding:20px}
  .scroll-demo .close-card h2{font-size:clamp(32px,10vw,46px);overflow-wrap:anywhere}
  /* Workbench: prevent dense blueprint artifacts from forcing a wide canvas. */
  .workbench-demo .wrap,.workbench-demo main,.workbench-demo .workbench,.workbench-demo .wb-grid,.workbench-demo .input-pane,.workbench-demo .output-pane{min-width:0}
  .workbench-demo .top{align-items:center}
  .workbench-demo .top .home-link{white-space:normal;text-align:center;line-height:1.2}
  .workbench-demo .hero{min-width:0}
  .workbench-demo .hero h1{font-size:clamp(43px,14vw,68px);overflow-wrap:anywhere}
  .workbench-demo .hero-art{min-width:0;overflow:hidden}
  .workbench-demo .hero-label{max-width:48%;text-align:center;line-height:1.25}
  .workbench-demo .section-title h2{font-size:clamp(30px,9vw,42px);line-height:.98;overflow-wrap:anywhere}
  .workbench-demo .wb-grid{grid-template-columns:minmax(0,1fr)}
  .workbench-demo .input-pane,.workbench-demo .output-pane{padding:12px}
  .workbench-demo .presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workbench-demo .preset{min-width:0;min-height:56px;overflow-wrap:anywhere}
  .workbench-demo .preset strong,.workbench-demo .preset small{overflow-wrap:anywhere}
  .workbench-demo textarea{font-size:16px;line-height:1.4}
  .workbench-demo .output-top{align-items:flex-start;flex-wrap:wrap}
  .workbench-demo .output-top>div{min-width:0}
  .workbench-demo .output-tag{max-width:100%;white-space:normal;line-height:1.3}
  .workbench-demo .output-tabs{gap:4px}
  .workbench-demo .output-tab{min-height:40px;padding:7px 6px;font-size:8px}
  .workbench-demo .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workbench-demo .step{min-width:0;overflow-wrap:anywhere}
  .workbench-demo .step strong,.workbench-demo .step small{overflow-wrap:anywhere}
  .workbench-demo .spec-grid,.workbench-demo .screen-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workbench-demo .screen-greeting{align-items:flex-start;flex-wrap:wrap}
  .workbench-demo .screen-greeting h4{font-size:15px}
  .workbench-demo .screen-row{min-width:0;align-items:flex-start;flex-wrap:wrap;overflow-wrap:anywhere}
  .workbench-demo .screen-row span{min-width:0;overflow-wrap:anywhere}
  .workbench-demo .screen-row em{max-width:100%;white-space:normal}
  .workbench-demo .qa-item{min-width:0;overflow-wrap:anywhere}
  .workbench-demo .product-foot{align-items:flex-start;flex-wrap:wrap;line-height:1.4}
  .workbench-demo .about-card,.workbench-demo .about-card *{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:380px){
 .agent-demo .run{grid-template-columns:24px minmax(0,1fr)}
 .agent-demo .run .tag{grid-column:2;justify-self:start}
 .agent-demo .source-row{grid-template-columns:26px minmax(0,1fr)}
 .agent-demo .source-row>strong{grid-column:2}
 .atlas-demo .frame{grid-template-rows:250px auto}
 .atlas-demo .network-stage{inset:auto}
 .atlas-demo .layerpanel{grid-template-columns:1fr}
 .atlas-demo .layerpanel strong{grid-column:auto}
 .atlas-demo .layer{font-size:7px}
 .atlas-demo .node span{max-width:56px;font-size:5px}
 .atlas-demo .detail div{padding:10px 8px}
 .scroll-demo .sticky-map{min-height:410px}
 .scroll-demo .world{width:min(79vw,300px);height:195px}
 .scroll-demo .world .world-card{width:86px;padding:5px;font-size:6px}
 .scroll-demo .world .world-card strong{font-size:8px}
 .workbench-demo .top-note{max-width:115px}
 .workbench-demo .output-pane{padding:10px}
 .workbench-demo .output-tabs{gap:3px}
 .workbench-demo .output-tab{padding-inline:4px;font-size:7px}
}
@media(prefers-reduced-motion:reduce){.scroll-demo .world,.scroll-demo .world-card,.scroll-demo .hub{transition:none!important}}