/* Keep the map dominant. One contextual card occupies each corner at a time. */
:root{font-family:var(--font-ui);color:#edf1f0;background:#0b1318;--ui-bg:rgba(13,21,26,.95);--ui-border:#415157;--ui-muted:#aebec0;--ui-accent:#83b9b8}
.shade{background:linear-gradient(90deg,rgba(6,12,16,.39),transparent 45%),linear-gradient(0deg,rgba(6,12,16,.18),transparent 26%)}
.panel{top:16px;left:16px;bottom:78px;width:min(318px,calc(100vw - 32px));background:var(--ui-bg);border-color:var(--ui-border);border-radius:11px;box-shadow:0 14px 36px #0006}
.head{padding:17px 18px 13px;border-color:#334249}
.eyebrow{font:600 10px/1.4 var(--font-ui);letter-spacing:.06em;color:#a4c1c0}
.head h1{font-size:19px;line-height:1.3;margin:6px 0 4px;font-weight:650}
.sub{font-size:11px;line-height:1.5;color:#b5c3c4}
.stages,.panel.deep-detail .stages{flex:0 1 auto;min-height:150px;max-height:36%;padding:8px;scrollbar-width:thin;scrollbar-color:#425e6a transparent}
.stages::-webkit-scrollbar,.detail::-webkit-scrollbar{width:5px}
.stages::-webkit-scrollbar-thumb,.detail::-webkit-scrollbar-thumb{background:#425e6a;border-radius:5px}
.stage{gap:8px;padding:5px 7px;margin:1px 0;border-radius:6px;color:#b4c4ca}
.stage:hover{background:#25363b}
.stage.active{background:#2a4043;border-color:#668887;color:#f4f7f5}
.num{width:21px;height:21px;border-radius:5px;background:#293a3e;color:#b6c8c7;font:600 10px/1 var(--font-ui)}
.stage.active .num{background:var(--ui-accent);color:#112225}
.stage b{font-size:11px;font-weight:550;line-height:1.2}
.stage small{display:none}
.detail,.panel.deep-detail .detail{flex:1;min-height:0;max-height:none;padding:12px 16px 16px;border-color:#334249;scrollbar-width:thin;scrollbar-color:#4b6265 transparent}
.detail h2{font-size:13px;line-height:1.4;margin:0 0 5px;font-weight:650}
.detail p{font-size:11px;line-height:1.55;margin:0 0 6px;color:#c0cccb}
.stat,.phase{font:500 11px/1.5 var(--font-ui);color:#bdd6d2;margin:6px 0}
.phase{color:#e4c897}
.warning{font-size:10px!important;color:#c9b896!important}
.control,.zoom-tools button,.generation-buttons button,.util-chapters button,.port-tabs button,.world-nav button,.world-reveal button{background:#23363b;border:1px solid #4b656a;border-radius:6px;color:#e6eeee}
.control:hover,.zoom-tools button:hover,.generation-buttons button:hover,.world-nav button:hover{background:#344c50}
.control.primary{background:#4e7778;border-color:#78a6a6}
.bottom{left:350px;right:16px;bottom:16px;min-height:47px;background:var(--ui-bg);border-color:var(--ui-border);border-radius:9px;padding:6px 9px;gap:7px}
.bottom .control{padding:7px 11px;font-size:11px}
.scrub{accent-color:var(--ui-accent)}
.stepread{font:500 10px var(--font-ui);color:#9fb5bf}
.map-caption,.badge{display:none}
.legend{top:16px;right:16px;min-width:145px;max-width:220px;padding:9px 11px;background:var(--ui-bg);border-color:var(--ui-border);border-radius:8px;font-size:10px;line-height:1.9;color:#d0dcda}
.legend:empty{display:none}
.sw{width:8px;height:8px;margin-right:6px}
.generation-card,.util-card{top:16px;right:16px;width:264px;padding:13px 15px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:9px;box-shadow:0 10px 30px #0005}
.generation-card h2{font-size:16px;line-height:1.35;margin:6px 0}
.generation-card p,.util-card p{font-size:11px;line-height:1.5;margin:6px 0;color:#c2cfce}
.generation-card .generation-metric{padding:5px 0;margin:0;background:none;border-top:1px solid #374b4e;color:#e6ebe8;font-size:10px;font-weight:550}
.generation-card .generation-metric:empty{display:none}
.generation-card small{display:none;font-size:10px;color:#9eb4bd;line-height:1.45;margin-top:6px}
.util-card .eyebrow{font-size:10px}
.util-card h2{font-size:27px;line-height:1.2;margin:6px 0}
.util-card small{font-size:10px;color:#9eb4bd;margin-top:6px}
.util-card time{margin-top:7px;font-size:10px}
.evidence,.segment-guide{background:#1a2a2e;border-color:#466066;border-radius:6px;padding:8px}
.evidence-flow{display:none}
.evidence b{margin-bottom:4px}
.evidence-flow span,.generation-buttons button,.util-chapters button{border-radius:5px}
.evidence-flow span.active,.generation-buttons button.active,.util-chapters button.active{background:#3a5e61;border-color:#87b7b5}
.port-tabs button.active{background:#83b9b8;border-color:#83b9b8;color:#102124}
.util-chip.inside{background:rgba(181,154,203,.18);border-color:#b59acb;color:#e2d3ec}
.zoom-tools{gap:5px;margin:7px 0}
.zoom-tools button{font-size:10px;padding:5px 6px}
.world-nav{top:12px;left:306px;right:auto;width:max-content;max-width:calc(100% - 570px);background:var(--ui-bg);border-color:var(--ui-border);border-radius:8px;box-shadow:0 8px 22px #0005}
.world-nav strong{display:none}
.world-nav button{border-color:#4a6975}
.world-note{left:306px;bottom:12px;max-width:370px;background:var(--ui-bg);border-color:var(--ui-border);color:#b5c3c4}
.world-reveal{right:16px;bottom:74px;width:auto;padding:5px;background:var(--ui-bg);border-color:var(--ui-border);border-radius:8px;box-shadow:0 9px 26px #0006}
.world-reveal small,.world-reveal b,.world-reveal span{display:none}
.world-reveal button{margin:0;padding:6px 9px;font-size:11px}
body.region-inspecting>.legend,body.region-inspecting>.generation-card,body.region-inspecting>.util-card,body.region-inspecting>.globe-quality{display:none!important}
body.region-inspecting>.region-info.story{top:16px;right:16px;max-height:calc(100vh - 96px)}
body>.region-info.story{background:rgba(13,21,26,.98);border-radius:9px;box-shadow:0 10px 30px #0006}
body>.globe-quality.story,body.generation-mode>.globe-quality,body.util-mode>.globe-quality{top:auto;bottom:76px;right:16px;background:var(--ui-bg);border-color:var(--ui-border)}
@media(max-width:1100px){.generation-card,.util-card{width:224px;padding:11px 12px}.generation-card h2{font-size:15px}.util-card h2{font-size:25px}}
@media(max-width:800px){.panel,.util-mode .panel{width:min(290px,calc(100vw - 32px));min-width:0}.bottom{left:16px;right:16px}.generation-card,.util-card{top:16px;right:16px;width:190px}.world-nav{left:12px;right:12px;max-width:calc(100% - 24px)}.world-note{left:12px;bottom:12px}.world-reveal{width:min(260px,calc(100vw - 24px));right:12px}.legend{display:none}}
@media(max-width:540px){.panel,.util-mode .panel{top:auto;left:10px;right:10px;bottom:66px;width:auto;height:min(42vh,330px)}.head{padding:9px 12px}.head h1{font-size:15px;margin:2px 0}.head .sub{display:none}.stages,.panel.deep-detail .stages{display:flex;flex:0 0 41px;min-height:41px;max-height:41px;overflow:auto;padding:3px 7px;scrollbar-width:none}.stage{width:auto;flex:none;padding:4px 6px}.stage b,.stage small{display:none}.detail,.panel.deep-detail .detail{padding:8px 12px}.detail h2{font-size:12px}.detail p{font-size:10px}.bottom{left:10px;right:10px;bottom:10px;min-height:45px}.bottom .control{padding:7px;font-size:10px}.generation-card,.util-card{display:none}.world-nav{max-height:96px;overflow:auto}.world-note{max-width:calc(100vw - 24px)}body.region-inspecting>.region-info.story{top:12px;right:12px;max-height:calc(58vh - 20px)}body>.globe-quality.story,body.generation-mode>.globe-quality,body.util-mode>.globe-quality{bottom:calc(min(42vh,330px) + 76px);right:10px}}
@media(max-width:800px){.world-reveal{width:auto}.world-note{display:none}}

/* Story console: dark glass, quiet telemetry, and a single clear active step. */
.panel{
  width:min(326px,calc(100vw - 32px));
  bottom:auto;
  max-height:calc(100vh - 94px);
  background:rgba(8,12,20,.83);
  border:1px solid rgba(191,224,235,.18);
  border-radius:12px;
  box-shadow:0 22px 60px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.head{padding:17px 18px 16px;border-bottom:1px solid rgba(194,219,229,.12);background:linear-gradient(155deg,rgba(29,51,65,.32),transparent 70%)}
.head-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.head .eyebrow{display:flex;align-items:center;gap:8px;font:650 10px/1.2 var(--font-ui);letter-spacing:.16em;color:#79c6d4}
.status-dot,.detail-label-dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:#5fdfdf;box-shadow:0 0 8px rgba(95,223,223,.55)}
.head-count{font:600 10px/1.2 var(--font-ui);letter-spacing:.1em;color:#b6c9d1;font-variant-numeric:tabular-nums}
.head h1{font-size:19px;line-height:1.3;font-weight:650;letter-spacing:-.035em;margin:11px 0 4px;color:#f1f6f8}
.head .sub{font-size:11px;color:#a8bac2;line-height:1.35}
.flow-nav{flex:none;padding:11px 18px 10px;border-bottom:1px solid rgba(194,219,229,.12)}
.flow-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;font:600 9px/1.2 var(--font-ui);letter-spacing:.12em;color:#8b9ea8}
.flow-meta button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 0 2px 8px;border:0;background:transparent;color:#a8ced4;font:500 10px/1.2 var(--font-ui);letter-spacing:0;text-align:right}
.flow-meta button::after{content:" →";color:#70cfdb}
.flow-meta button:hover{color:#f0fcff}
.panel .flow-nav .stages,.panel.deep-detail .flow-nav .stages{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;flex:none;min-height:22px;max-height:22px;margin:0;padding:0;overflow:visible}
.panel .flow-nav .stage{position:relative;display:block;width:100%;min-width:0;min-height:22px;height:22px;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.panel .flow-nav .stage::before,.panel .flow-nav .stage::after{content:"";position:absolute;left:0;top:10px;height:3px;border-radius:4px;pointer-events:none}
.panel .flow-nav .stage::before{right:0;background:rgba(146,178,190,.27)}
.panel .flow-nav .stage::after{width:var(--fill,0%);background:#65d2df;transition:width .14s linear}
.panel .flow-nav .stage.done::after{background:#5a9fad}
.panel .flow-nav .stage.active::after{box-shadow:0 0 8px rgba(101,210,223,.5)}
.panel .flow-nav .stage:hover::before{background:rgba(179,218,228,.55)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.detail,.panel.deep-detail .detail{flex:0 1 auto;min-height:0;max-height:none;overflow:auto;border-top:0;padding:17px 18px 18px;background:linear-gradient(180deg,rgba(24,38,49,.2),transparent 110px);scrollbar-color:rgba(145,183,197,.28) transparent}
.detail.scene-enter{animation:scene-arrive .32s ease-out both}
@keyframes scene-arrive{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.detail-label{display:flex;align-items:center;gap:8px;margin-bottom:10px;font:600 9px/1.2 var(--font-ui);letter-spacing:.16em;color:#85a3af}
.detail-label-dot{width:5px;height:5px;box-shadow:none}
.detail h2{font-size:17px;line-height:1.35;margin:0 0 8px;font-weight:620;color:#f2f7f8;letter-spacing:-.025em}
.detail p{font-size:12px;line-height:1.55;color:#bdcbd0;margin:0 0 9px}
.panel .stat{display:block;margin:12px 0 0;padding:8px 0 0;border-top:1px solid rgba(180,212,224,.12);font:550 11px/1.5 var(--font-ui);color:#82cdd6;font-variant-numeric:tabular-nums}
.panel .phase{position:relative;margin:9px 0;padding-left:12px;color:#d4dfe2;font-size:11px;line-height:1.45}
.panel .phase:not(:empty)::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;border-radius:50%;background:#6ccbd5}
.panel .phase:empty{display:none}
.panel .evidence{background:transparent;border:0;border-top:1px solid rgba(148,192,204,.18);border-radius:0;padding:11px 0 0;margin-top:13px}
.panel .segment-guide{background:rgba(46,70,80,.2);border:1px solid rgba(148,192,204,.2);border-left:2px solid #65b7c7;border-radius:5px;padding:10px 11px}
.segment-live{margin-top:8px;padding-top:9px;border-top:1px solid #8cb6c32b}
.segment-live header{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#a9c6d4}
.segment-live strong{color:#e4faff;font:600 18px var(--font-ui);font-variant-numeric:tabular-nums}
.segment-live progress{display:block;width:100%;height:4px;margin:9px 0 6px;border:0;border-radius:4px;overflow:hidden;appearance:none;background:#234452;accent-color:#89e2ef}
.segment-live progress::-webkit-progress-bar{background:#234452}
.segment-live progress::-webkit-progress-value{background:#89e2ef}
.segment-live progress::-moz-progress-bar{background:#89e2ef}
#segment-activity{font-size:10px;color:#b1dce5}
#segment-replay{margin:7px 0 2px;padding:7px 9px;border:1px solid #79c4d14d;border-radius:5px;background:#23445166;color:#dbf6fb;font-size:10px;text-align:left}
#segment-replay:hover{background:#2d647888}
#segment-replay:focus-visible{outline:2px solid #89e2ef;outline-offset:2px}
.panel .evidence b{font-size:10px;color:#dcebed}
.panel .evidence-main{font-size:11px;line-height:1.5;color:#e7f0f1}
.panel .evidence-source{color:#91aab5}
.panel .data-details,.generation-card .generation-data{margin:12px 0 2px;padding-top:8px;border-top:1px solid rgba(170,202,212,.17)}
.panel .data-details summary,.generation-card .generation-data summary{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;cursor:pointer;color:#9cbcc5;font-size:10.5px;line-height:1.5}
.panel .data-details summary::-webkit-details-marker,.generation-card .generation-data summary::-webkit-details-marker{display:none}
.panel .data-details summary::after,.generation-card .generation-data summary::after{content:"+";font:500 15px/1 var(--font-ui);color:#88b9c3}
.panel .data-details[open] summary::after,.generation-card .generation-data[open] summary::after{content:"−"}
.panel .data-details summary:hover,.generation-card .generation-data summary:hover{color:#e8f4f5}
.panel .data-details .stat{margin:6px 0 0;padding:4px 0 0;border-top:0;color:#aecbd0}
.panel .data-details .evidence{margin-top:7px}
.generation-card .generation-data .generation-metric:first-of-type{margin-top:8px}
.generation-card .generation-data small{display:block}
.panel .zoom-tools button,.panel .generation-buttons button,.panel .util-chapters button,.panel .port-tabs button,.panel .control{background:rgba(67,96,108,.2);border-color:rgba(152,192,204,.24);color:#d7e7eb}
.panel .zoom-tools button:hover,.panel .generation-buttons button:hover,.panel .util-chapters button:hover,.panel .port-tabs button:hover,.panel .control:hover{background:rgba(80,155,172,.22)}
.panel .generation-buttons button.active,.panel .util-chapters button.active,.panel .port-tabs button.active{background:rgba(61,177,198,.26);border-color:rgba(105,211,226,.62);color:#f5fbfc}
.panel :is(button,input):focus-visible{outline:2px solid #a3e2eb;outline-offset:2px}
.panel summary:focus-visible,.generation-card summary:focus-visible{outline:2px solid #a3e2eb;outline-offset:2px}
.panel.is-playing .status-dot{animation:record-pulse 1.8s ease-in-out infinite}
@keyframes record-pulse{50%{opacity:.42;box-shadow:0 0 2px rgba(95,223,223,.2)}}
@media(prefers-reduced-motion:reduce){.detail.scene-enter,.panel.is-playing .status-dot{animation:none}.panel .flow-nav .stage::after{transition:none}}
@media(max-width:800px){.panel,.util-mode .panel{width:min(306px,calc(100vw - 32px))}}
@media(max-width:540px){
  .panel,.util-mode .panel{top:auto;bottom:66px;width:auto;height:min(42vh,330px);max-height:none}
  .head{padding:9px 12px 8px}
  .head h1{font-size:15px;margin:5px 0 0}
  .head-count{font-size:9px}
  .flow-nav{padding:7px 12px 5px}
  .flow-meta{margin-bottom:3px}
  .panel .flow-nav .stages,.panel.deep-detail .flow-nav .stages{min-height:18px;max-height:18px}
  .panel .flow-nav .stage{min-height:18px;height:18px}
  .panel .flow-nav .stage::before,.panel .flow-nav .stage::after{top:8px}
  .detail,.panel.deep-detail .detail{padding:10px 12px 13px}
  .detail-label{margin-bottom:5px;font-size:8px}
  .detail h2{font-size:13px;margin-bottom:5px}
  .detail p{font-size:10.5px}
  .panel .stat{margin-top:7px;padding-top:6px;font-size:10px}
}

/* A short briefing beside the globe; the active scene carries the detail. */
.panel,.util-mode .panel{width:min(294px,calc(100vw - 32px));max-height:calc(100vh - 90px);background:rgba(7,14,22,.78);border-color:rgba(183,210,217,.17);box-shadow:0 16px 46px rgba(0,0,0,.34)}
.head{padding:15px 16px 12px;background:none}
.head h1{font-size:17px;margin:8px 0 3px}
.head .sub{font-size:10px}
.flow-nav{padding:11px 15px 9px}
.panel .flow-nav .stages,.panel.deep-detail .flow-nav .stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;max-height:none;min-height:0;margin:0 0 9px;padding:0;overflow:visible}
.panel .flow-nav .chapter{position:relative;min-width:0;min-height:34px;padding:3px 2px 8px;color:#829ba5;background:transparent;border:0;border-bottom:1px solid rgba(153,188,199,.3);border-radius:0;font:550 10px/1.3 var(--font-ui);white-space:nowrap}
.panel .flow-nav .chapter:hover{color:#d8edf0;border-bottom-color:#85c6cf}
.panel .flow-nav .chapter.active{color:#effbfd;border-bottom:2px solid #74d4df}
.panel .flow-nav .chapter.done{color:#a7cbd0;border-bottom-color:#6d9da6}
.flow-meta{margin:0;letter-spacing:0;font:500 10px/1.35 var(--font-ui);color:#9db7be}
.flow-meta button{font-size:10px;max-width:85px}
.detail,.panel.deep-detail .detail{padding:14px 16px 15px;background:none}
.detail-label{margin-bottom:7px;font-size:8px}
.detail h2{font-size:17px;margin-bottom:6px}
.detail p{font-size:11px;line-height:1.5}
.panel .phase{margin:10px 0 0;color:#afd6da}
.panel .generation-card,.panel .util-card{position:static;display:block;width:auto;max-width:none;margin:10px 0 0;padding:10px 0 0;background:transparent;border:0;border-top:1px solid rgba(161,194,204,.18);border-radius:0;box-shadow:none}
.panel .generation-card[hidden],.panel .util-card[hidden]{display:none}
.panel .generation-card .eyebrow,.panel .generation-card h2{display:none}
.panel .generation-card p{margin:0;color:#d5e4e6;font-size:11px}
.panel .generation-data{display:none;margin:8px 0 0;padding:0;border:0}
.generation-mode .panel .generation-data{display:block}
.panel .generation-data summary{display:none}
.panel .generation-data .generation-metric{padding:4px 0;margin:0;color:#b8cbd1;font-size:10px;background:none;border:0}
.panel .generation-data small{display:block;margin-top:5px;color:#8ea9b2;font-size:9px;line-height:1.4}
.panel .generation-note{display:none;margin-top:9px;color:#91a9b1;font-size:9px}
.generation-mode .panel .generation-note{display:block}
.panel .scene-picker,.panel .event-log{margin:9px 0 0;padding:8px 0 0;border-top:1px solid rgba(170,202,212,.14)}
.panel .scene-picker summary,.panel .event-log summary{color:#a9c5cc;font-size:10px}
.panel .scene-picker .generation-buttons{margin-top:9px}
.panel .event-log .util-events{margin-top:8px}
.panel .util-card .eyebrow,.panel .util-card small{display:none}
.panel .util-card h2{display:inline-block;margin:0 6px 4px 0;font-size:17px;color:#e9f6f7}
.panel .util-card p{font-size:10.5px;margin:4px 0;color:#b5c9cf}
.panel .util-card time{margin-top:5px;font-size:9px}
.panel .util-card .util-chip{padding:2px 5px;font-size:9px}
.legend,.generation-mode .legend,.util-mode .legend{display:block;top:16px;right:16px;min-width:0;max-width:175px;padding:7px 10px;background:rgba(7,14,22,.75);border-color:rgba(183,210,217,.15);box-shadow:none;font-size:10px;line-height:1.65}
.legend:empty,.generation-mode .legend:empty,.util-mode .legend:empty{display:none}
.badge{display:none}
.map-caption{background:rgba(7,14,22,.66);box-shadow:none}
@media(max-width:800px){.panel,.util-mode .panel{width:min(294px,calc(100vw - 32px))}.legend,.generation-mode .legend,.util-mode .legend{display:none}}
@media(max-width:540px){
  .panel,.util-mode .panel{top:auto;left:10px;right:10px;bottom:66px;width:auto;height:min(46vh,355px);max-height:none}
  .head{padding:9px 12px 8px}
  .head h1{font-size:14px;margin:3px 0 0}
  .flow-nav{padding:7px 12px}
  .panel .flow-nav .stages,.panel.deep-detail .flow-nav .stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:0;max-height:none;margin-bottom:4px}
  .panel .flow-nav .chapter{min-height:25px;padding:2px 1px 5px;font-size:9px}
  .detail,.panel.deep-detail .detail{padding:9px 12px 12px}
  .panel .generation-card,.panel .util-card{display:block}
  .panel .generation-card[hidden],.panel .util-card[hidden]{display:none}
  body>.globe-quality.story,body.generation-mode>.globe-quality,body.util-mode>.globe-quality{bottom:calc(min(46vh,355px) + 84px)}
  body.generation-mode .panel{height:min(31vh,250px)}
  body.generation-mode>.globe-quality.story{bottom:calc(min(31vh,250px) + 84px)}
}