/* Stage layout (Nov 11). Loaded last. The card keeps its own column (wide screens) or
   band (narrow screens); js/stage-fit.js places the scene in the space that is left,
   so characters, routes and the house never pass under the card or the footer. */

/* The same sky and park continue beyond the fitted world, so moving the world
   never shows a seam. Positions come from js/stage-fit.js. */
.hero[data-fit] .scene-frame::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url(../assets/scene/park.webp),url(../assets/scene/sky.webp);
  background-size:var(--world-w) var(--world-h);
  background-position:var(--world-x) calc(var(--world-y) - var(--world-h) * .0666667),var(--world-x) var(--world-y);
  background-repeat:repeat-x;filter:saturate(1.4) contrast(1.08)}

/* ---------- Card column on wide screens ---------- */
@media(min-width:761px){
  #home .hero-panel{width:clamp(350px,31vw,480px)!important;padding:22px 22px 16px;max-height:calc(100% - 150px);overflow-y:auto}
  #home .role-picker button{padding:6px 11px}
}

/* ---------- Narration log ---------- */
.simulation-log{list-style:none;margin:0 0 6px;padding:0 4px 0 0;font-size:13.5px;line-height:1.4;
  height:calc(5 * 1.4em + 5 * 4px);overflow-y:auto;overscroll-behavior:contain}
.simulation-copy:not([data-phase=steps]):not([data-phase=done]) .simulation-log{display:none}
.simulation-log li{display:flex;align-items:flex-start;gap:8px;margin:0 0 4px;color:var(--muted)}
.simulation-log li:last-child{color:var(--ink);font-weight:600}
.step-mark{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;margin-top:.5px;
  font:600 11px/1 var(--pixel);border-radius:4px;background:rgba(31,58,51,.08);color:var(--ink)}
.simulation-log li[data-status=yes] .step-mark{background:#f0d9cd;color:#7d292e}
.simulation-log li[data-status=gated] .step-mark,.simulation-log li[data-status=unknown] .step-mark{background:#eee0bd;color:#574224}
.simulation-log li[data-status=no] .step-mark{background:#e2e9d9;color:#2f4d38}
/* While steps run, the current line lives in the log; the status line stays for screen readers. */
.simulation-copy[data-phase=steps] .simulation-message{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hero .simulation-copy[data-phase=done] .simulation-message{margin-top:4px}

@media(max-width:760px){
  .simulation-log{font-size:12.5px;height:calc(4 * 1.4em + 4 * 4px)}
  .step-mark{width:16px;height:16px;font-size:10px}
}
@media(min-width:761px) and (max-height:760px){
  .simulation-log{font-size:13px;height:calc(4 * 1.4em + 4 * 4px)}
  .hero .simulation-message{font-size:16px}
  .hero .simulation-detail{font-size:12.5px}
}

/* ---------- Nov 12: explain the two parts ---------- */
/* Three steps of the repository check, one compact line under the deck. */
.how-steps{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;list-style:none;margin:10px 0 0;padding:0;
  font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.how-steps li{display:inline-flex;align-items:center;white-space:nowrap}
.how-steps li+li::before{content:'→';margin:0 7px;color:var(--amber);font-weight:500}
.has-result .how-steps,.hero.is-running .how-steps{display:none}
#home #check-form{margin-top:14px!important}

/* The AI part: a separate entry, under the repository check. */
.hero .shortcuts{flex-direction:column;align-items:flex-start;gap:4px}
.shortcuts-title{margin:0;font-size:12.5px;line-height:1.35;color:var(--muted)}
.shortcuts-title strong{color:var(--ink);font-weight:650}
.shortcuts-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* Scene legend: part of the footer, so the fitted scene never sits under it. */
.hero-footer{flex-wrap:wrap;row-gap:6px}
.scene-legend{flex-basis:100%;order:-1;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:4px 14px;margin:0;
  font-size:11.5px;line-height:1.3;color:var(--muted);pointer-events:none}
.scene-legend span{display:inline-flex;align-items:center;gap:5px;background:var(--glass);border:1px solid var(--glass-line);border-radius:99px;padding:3px 9px}
.scene-legend i{display:inline-block;flex:none;font-style:normal}
.legend-door{width:8px;height:11px;background:#c27a5c;border:1.5px solid var(--ink);border-bottom:0;border-radius:1px 1px 0 0}
.legend-vault{width:11px;height:11px;background:#2f4d48;border:1.5px solid var(--ink);border-radius:2px;box-shadow:inset 0 0 0 2px #2f4d48,inset 0 0 0 3px #d9a441}
.legend-unknown{font:600 10px/12px var(--pixel);width:13px;height:13px;text-align:center;background:#eee0bd;color:#574224;border-radius:3px}
@media(max-width:760px){
  .hero-footer{display:flex!important;flex-direction:column;align-items:center;gap:4px}
  .scene-legend{flex-basis:auto;justify-content:center;flex-wrap:nowrap;font-size:10px;gap:8px;white-space:nowrap;
    background:var(--glass);border:1px solid var(--glass-line);border-radius:99px;padding:2px 10px}
  .scene-legend span{padding:0;gap:3px;background:none;border:0}
  .legend-door{width:6px;height:9px}.legend-vault{width:9px;height:9px}.legend-unknown{width:11px;height:11px;line-height:10px}
  .how-steps{font-size:11.5px;margin-top:8px}
  .shortcuts-title{font-size:11.5px}
}

/* End of the repository check: the summary and the report link stand out in the card. */
.hero .simulation-copy[data-phase=done] .simulation-message{font-size:19px;padding:8px 0 8px 12px;border-left:4px solid var(--amber);margin-top:6px}
.hero[data-result=reachable] .simulation-copy[data-phase=done] .simulation-message{border-left-color:#b8483e}
.hero[data-result=blocked] .simulation-copy[data-phase=done] .simulation-message{border-left-color:#4f7a52}
.hero[data-result=unknown] .simulation-copy[data-phase=done] .simulation-message,.hero[data-result=approval] .simulation-copy[data-phase=done] .simulation-message{border-left-color:#b9772a}
.hero .simulation-actions .report-link{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;
  background:var(--ink);color:#fffdf3!important;text-decoration:none;font-size:14px;font-weight:650;box-shadow:0 6px 16px -8px rgba(18,40,34,.6)}
.hero .simulation-actions .report-link:hover{background:#2c4d43}
.hero .simulation-actions .report-link[hidden]{display:none}
@media(min-width:761px) and (max-height:760px){
  .hero .simulation-copy[data-phase=done] .simulation-message{font-size:17px;padding:5px 0 5px 10px}
  .hero .simulation-actions .report-link{padding:7px 14px}
}
@media(max-width:760px){
  .hero .simulation-copy[data-phase=done] .simulation-message{font-size:16px;padding:4px 0 4px 10px}
  .hero .simulation-actions .report-link{padding:7px 13px;font-size:13px}
}