/* Forecast Replay · Maps. Light only; tokens from fr.css. */
.mp-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--fr-paper-2)}
.mono{font-family:var(--fr-font-mono)}

.mp-head{background:var(--fr-paper);border-bottom:1px solid var(--fr-rule);display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:8px 16px;min-height:56px}
.mp-logo{display:inline-flex;background:var(--fr-guide-green);border-radius:6px;padding:3px;text-decoration:none}
.mp-logo>span{display:inline-flex;align-items:center;gap:7px;border:2px solid #fff;border-radius:4px;padding:4px 10px 2px 8px;color:#fff;font-weight:800;font-size:13px;letter-spacing:.06em}
.mp-crumb{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}

.mp-main{flex:1 1 auto;display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;padding:20px;max-width:1880px;width:100%;margin:0 auto;align-items:start}

/* control rail */
.mp-rail{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding:2px 4px 16px 2px}
.mp-intro{display:flex;flex-direction:column;gap:4px;padding:0 2px 2px}
.mp-kicker{font-family:var(--fr-font-mono);font-weight:700;font-size:11.5px;letter-spacing:.14em;color:var(--fr-guide-green)}
.mp-intro h1{margin:0;font-weight:900;font-size:34px;line-height:1;letter-spacing:-.025em}
.mp-group{margin:0;border:1px solid var(--fr-rule);border-radius:8px;background:var(--fr-card);padding:10px 12px 12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.mp-group>legend{float:left;width:100%;padding:0;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fr-ink-muted)}
.mp-group>legend+*{clear:both}
.mp-lbl{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:var(--fr-ink-2);min-width:0}
.mp-lbl small{font-weight:600;color:var(--fr-ink-muted);font-size:11.5px}
.mp-sel{font-size:15px;font-weight:600;padding:8px 10px 6px;border:1.5px solid var(--fr-ink);border-radius:6px;background:#fff;color:var(--fr-ink);min-height:40px;width:100%;min-width:0}
.mp-sel.sm{min-height:32px;padding:4px 6px 2px;font-size:13px;width:auto}
.mp-area{font-family:var(--fr-font-mono);font-size:13.5px;line-height:1.45;resize:vertical}
.mp-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px}
.mp-help{margin:0;font-size:12.5px;line-height:1.45;color:var(--fr-ink-3)}
.mp-help code{font-family:var(--fr-font-mono);font-size:12px;background:var(--fr-paper-2);padding:1px 4px;border-radius:3px}

.mp-seg{display:flex;border:1.5px solid var(--fr-ink);border-radius:6px;overflow:hidden;background:#fff}
.mp-seg button{flex:1 1 auto;border:0;padding:8px 8px 6px;font-weight:700;font-size:13.5px;min-height:38px;background:#fff;color:var(--fr-ink)}
.mp-seg button+button{border-left:1px solid var(--fr-ink)}
.mp-seg button[aria-checked="true"]{background:var(--fr-ink);color:#fff}
.mp-seg button:disabled{opacity:.4}
.mp-seg-wrap{flex-wrap:wrap}
.mp-seg-wrap button{flex:1 1 30%}
.mp-seg-wrap button:nth-child(4){border-left:0}
.mp-seg-wrap button:nth-child(n+4){border-top:1px solid var(--fr-ink)}

.mp-step{display:flex;gap:6px}
.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:6px;padding:8px 12px 6px;font-weight:700;font-size:13.5px;min-height:38px;background:#fff;color:var(--fr-ink);border:1.5px solid var(--fr-ink);text-decoration:none;white-space:nowrap}
.mp-btn:hover{background:var(--fr-paper)}
.mp-btn.sm{flex:1 1 0;padding:6px 4px 4px;min-height:34px;font-family:var(--fr-font-mono);font-size:12.5px}
.mp-btn.sq{width:40px;min-width:40px;padding:0}
.mp-primary{width:100%;background:var(--fr-guide-green);color:#fff;border:0;border-radius:6px;padding:12px 20px 10px;font-weight:800;font-size:16px;min-height:46px;box-shadow:var(--fr-shadow-hard)}
.mp-primary:hover{background:var(--fr-guide-green-dark)}
.mp-go{position:sticky;bottom:0;padding:6px 0 2px;background:linear-gradient(transparent,var(--fr-paper-2) 30%)}

.mp-toggles{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.mp-toggles label,.mp-checks label{display:inline-flex;align-items:center;gap:8px;min-height:30px}
.mp-toggles input,.mp-checks input{width:18px;height:18px;accent-color:var(--fr-guide-green)}
.mp-checks{display:flex;gap:14px;font-family:var(--fr-font-mono);font-weight:700;font-size:13.5px}
.mp-chips{display:flex;flex-wrap:wrap;gap:6px}
.mp-chips button{border:1px solid var(--fr-rule-strong);background:var(--fr-paper);border-radius:999px;padding:6px 12px 4px;font-size:13px;font-weight:700;min-height:34px}
.mp-chips button:hover{border-color:var(--fr-ink);background:#fff}

/* stage */
.mp-stage{display:flex;flex-direction:column;gap:12px;min-width:0}
.mp-titlebar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.mp-titlebar h2{margin:0;font-size:24px;font-weight:900;letter-spacing:-.01em}
.mp-titlebar p{margin:4px 0 0;font-size:13px;font-weight:600;color:var(--fr-ink-3)}
.mp-actions{display:flex;gap:8px}
.mp-figure{margin:0}
.mp-pic{position:relative;aspect-ratio:16 / 9;border:2px solid var(--fr-ink);border-radius:8px;overflow:hidden;background:#fbfaf6;box-shadow:var(--fr-shadow-hard-green)}
.mp-pic img{display:block;width:100%;height:100%;object-fit:contain;background:#fbfaf6}
.mp-pic img[src=""],.mp-pic img:not([src]){visibility:hidden}
.mp-picstatus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--fr-ink);color:#fff;font-weight:700;font-size:15px;padding:12px 18px 10px;border-radius:6px;box-shadow:var(--fr-shadow-hard-green);max-width:80%;text-align:center;line-height:1.4}
.mp-picstatus:empty{display:none}
.mp-picstatus.err{box-shadow:var(--fr-shadow-hard-red)}

.mp-transport{display:flex;align-items:center;gap:8px;background:var(--fr-card);border:1px solid var(--fr-rule);border-radius:8px;padding:8px 10px}
.mp-play{background:var(--fr-ink);color:#fff}
.mp-play:hover{background:var(--fr-ink-2)}
.mp-transport input[type=range]{flex:1 1 auto;accent-color:var(--fr-guide-green);min-width:80px;height:28px}
.mp-framelabel{min-width:150px;text-align:right;font-weight:700;font-size:14px}
.mp-speed{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--fr-ink-muted)}
.mp-strip-wrap{overflow-x:auto;border-radius:8px}
.mp-strip{display:flex;gap:6px;padding-bottom:4px}
.mp-strip button{flex:0 0 auto;display:flex;flex-direction:column;gap:3px;align-items:stretch;border:1px solid var(--fr-rule);border-radius:6px;background:#fff;padding:3px 3px 4px;width:136px}
.mp-strip button[aria-current="true"]{border:2px solid var(--fr-ink);padding:2px 2px 3px}
.mp-strip img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:3px;background:var(--fr-paper-2)}
.mp-strip img:not([src]){visibility:hidden}
.mp-strip span{font-family:var(--fr-font-mono);font-size:11.5px;font-weight:700;text-align:center}
.mp-strip .pending{opacity:.55}

.mp-panels{background:var(--fr-card);border:1px solid var(--fr-rule);border-radius:8px;overflow:hidden}
.mp-tabs{display:flex;border-bottom:1px solid var(--fr-rule);background:var(--fr-paper)}
.mp-tabs button{border:0;background:transparent;padding:12px 16px 10px;font-weight:700;font-size:14px;color:var(--fr-ink-muted);min-height:44px}
.mp-tabs button[aria-selected="true"]{color:var(--fr-ink);box-shadow:inset 0 -3px 0 var(--fr-natgeo-yellow);background:#fff}
.mp-panel{padding:14px 16px 16px}
.mp-scriptbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mp-script{margin:0;font-family:var(--fr-font-mono);font-variant-ligatures:none;font-size:13px;line-height:1.55;background:#fbfaf6;border:1px solid var(--fr-rule);border-radius:6px;padding:12px 14px;max-height:420px;overflow:auto;white-space:pre;color:var(--fr-ink)}
.mp-script .c{color:#5f6a50}
.mp-script .k{color:var(--fr-rest-area-blue);font-weight:700}
.mp-script .d{color:var(--fr-wrong-way-red);font-weight:700}
.mp-export{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:10px}
.mp-export .mp-lbl{width:220px}

/* cases / analogs */
.mp-cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mp-case{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--fr-rule);border-radius:6px;background:#fff;padding:7px 10px 6px;font-size:13px;font-weight:700;min-height:44px}
.mp-case:hover{border-color:var(--fr-ink)}
.mp-case small{font-family:var(--fr-font-mono);font-weight:600;font-size:11.5px;color:var(--fr-ink-muted)}
.mp-case .r{font-family:var(--fr-font-mono);color:var(--fr-guide-green)}
.mp-analog{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center}
.mp-analog b{font-family:var(--fr-font-mono);font-size:13px}
.mp-empty{margin:0;font-size:14px;color:var(--fr-ink-3);line-height:1.5}

@media (max-width:1100px){
  .mp-main{grid-template-columns:minmax(0,1fr)}
  .mp-rail{position:static;max-height:none;order:2}
  .mp-stage{order:1}
}

/* The engine's own report, shown in the picture's place when grads3 is not installed here
   (see maps.js, "the engine is not here"). */
.mp-off .mp-rail{opacity:.45;filter:saturate(.3)}
.mp-off .mp-go{display:none}
.mp-engine{border:2px solid var(--fr-ink);border-radius:8px;background:var(--fr-card);padding:16px 18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--fr-shadow-hard)}
.mp-engine-lead{margin:0;font-size:17px;font-weight:700;line-height:1.45}
.mp-engine-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.mp-engine-list li{display:flex;gap:10px;align-items:baseline;border-top:1px solid var(--fr-rule);padding-top:10px}
.mp-engine-list li:first-child{border-top:0;padding-top:0}
.mp-engine-mark{flex:none;width:18px;font-weight:800;font-size:15px;text-align:center;color:var(--fr-ink-muted)}
.mp-engine-list li[data-state="ok"] .mp-engine-mark{color:var(--fr-guide-green)}
.mp-engine-list li[data-state="missing"] .mp-engine-mark{color:#b3261e}
.mp-engine-list li[data-state="partial"] .mp-engine-mark{color:#7a4a1e}
.mp-engine-what{display:flex;flex-direction:column;gap:3px;min-width:0}
.mp-engine-what b{font-size:14.5px}
.mp-engine-what .mono{font-size:12.5px;color:var(--fr-ink-3);overflow-wrap:anywhere}
.mp-engine-what code{font-family:var(--fr-font-mono);font-size:12px;background:var(--fr-paper-2);border:1px solid var(--fr-rule);border-radius:4px;padding:4px 6px;overflow-wrap:anywhere}