/* WeatherLabs — the Explorer: a full-viewport app below the fixed bar, with
   a pop-out drawer for a place's forecast. */

.page-explorer {
  /* chart series: validated pair (blue / orange) + a neutral for cloud */
  --ch-1: #1f6fc4; --ch-2: #e0612e; --ch-3: #6f7f90;
  --ex-panel: var(--bg2);
}
html[data-theme='dark'] .page-explorer { --ch-1: #3b8fe6; --ch-2: #df6d36; --ch-3: #8e9aa8; --ex-panel: #0f0f12; }

.ex {
  position: relative;
  margin-top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  min-height: 600px;
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: 'rail top' 'rail meta' 'rail map' 'rail time';
  background: var(--bg);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

/* ---------- segmented controls ---------- */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 11px; background: var(--bg3); box-shadow: inset 0 0 0 1px var(--line); flex: none; max-width: 100%; }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--text2); white-space: nowrap; transition: background .2s var(--ease), color .2s, box-shadow .2s; }
.seg button:hover:not(:disabled) { color: var(--text); }
.seg button[aria-pressed='true'] { background: var(--bg2); color: var(--accent); box-shadow: 0 0 0 1px var(--line2), 0 4px 14px -8px rgba(20, 20, 30, .35); }
html[data-theme='dark'] .seg button[aria-pressed='true'] { background: var(--bg4); box-shadow: 0 0 0 1px var(--accent-ring), 0 6px 18px -10px var(--accent-glow); }
.seg button:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; }
.seg button .ic { width: 14px; height: 14px; }
.seg-sub { color: var(--text3); font-weight: 400; }
.seg button[aria-pressed='true'] .seg-sub { color: inherit; opacity: .75; }
.seg--sm button { min-height: 30px; padding: 0 10px; font-size: 13px; }
.seg--scroll { overflow-x: auto; scrollbar-width: none; }
.seg--scroll::-webkit-scrollbar { display: none; }
.seg button:focus-visible { outline-offset: -2px; }

.ex-ctl { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ex-ctl-label { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text3); }

/* ---------- top bar ---------- */
.ex-top { grid-area: top; display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; padding: 12px 20px; background: var(--ex-panel); border-bottom: 1px solid var(--line); min-width: 0; }
.ex-h1 { font-family: var(--serif); font-size: 1.85rem; font-weight: 300; line-height: 1; letter-spacing: .005em; white-space: nowrap; margin-right: auto; }
.ex-h1 em { font-style: italic; color: var(--accent); }
.ex-ctl--region { min-width: 0; }

.places { position: relative; }
.places-btn .ic { width: 16px; height: 16px; }
.places-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 300px; max-height: min(440px, 62vh); overflow-y: auto; list-style: none; padding: 6px; border-radius: 14px; background: var(--glass2); border: 1px solid var(--line2); box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.places-list li[role='option'] { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: 9px; cursor: pointer; font-size: 14.5px; color: var(--text); }
.places-list .pl-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.places-list .pl-name .ic { color: var(--accent); }
.places-list .pl-sub { font-size: 12px; color: var(--text3); text-align: right; }
.places-list li[aria-selected='true'] { background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.places-list .pl-sep { padding: 12px 12px 6px; font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text3); border-top: 1px solid var(--line); margin-top: 6px; }

/* ---------- status strip ---------- */
.ex-meta { grid-area: meta; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding: 8px 20px; background: var(--ex-panel); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); min-width: 0; }
.ex-meta b { color: var(--text2); font-weight: 500; }
.ex-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 500; }
.ex-badge.is-sample { color: var(--amber); }
.ex-badge.is-sample .dot { background: var(--amber); }
.ex-note { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; text-transform: none; letter-spacing: .02em; font-size: .7rem; color: var(--text2); }
.ex-note .ic { width: 14px; height: 14px; color: var(--accent); }

/* ---------- rail ---------- */
.ex-rail { grid-area: rail; display: flex; flex-direction: column; gap: 20px; padding: 20px 16px 28px; background: var(--ex-panel); border-right: 1px solid var(--line); overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.ex-rail-label { padding: 0 6px; margin-bottom: -10px; }
.ex-rail-label span { color: var(--accent); }
.ex-layers { display: grid; gap: 3px; }
.layer-btn { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 46px; padding: 6px 10px 6px 6px; border-radius: 11px; text-align: left; color: var(--text2); transition: background .2s, color .2s, box-shadow .2s; }
.layer-btn .lic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line2); color: var(--text2); transition: all .25s var(--ease); }
.layer-btn .lic .ic { width: 17px; height: 17px; }
.layer-btn .ln { display: grid; min-width: 0; }
.layer-btn .ln-name { font-size: 14.5px; font-weight: 500; line-height: 1.25; }
.layer-btn .ln-sub { font-size: 11.5px; color: var(--text3); line-height: 1.3; }
.layer-btn .lu { font-family: var(--mono); font-size: .66rem; color: var(--text3); letter-spacing: .04em; }
.layer-btn:hover { background: var(--accent-dim); color: var(--text); }
.layer-btn[aria-checked='true'] { background: var(--accent-dim); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.layer-btn[aria-checked='true'] .lic { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px -8px var(--accent-glow); }
.layer-btn[aria-checked='true'] .lu { color: var(--accent); }
.layer-btn.is-spread .lic { color: #6347ba; }
html[data-theme='dark'] .layer-btn.is-spread .lic { color: #a996f0; }
.layer-btn.is-spread[aria-checked='true'] .lic { background: #6347ba; color: #fff; box-shadow: 0 6px 18px -8px rgba(99, 71, 186, .7); }
.layer-btn:focus-visible { outline-offset: 1px; }

/* contour lines: toggles with a line key and a switch; colours match LINE_STYLE in explorer.js */
.ex-lines { display: grid; gap: 3px; }
.ex-lines > .label { padding: 0 6px; margin-bottom: 4px; }
.line-btn { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 46px; padding: 6px 10px 6px 6px; border-radius: 11px; text-align: left; color: var(--text2); transition: background .2s, color .2s; }
.line-btn:hover:not(:disabled) { background: var(--accent-dim); color: var(--text); }
.line-btn[aria-pressed='true'] { color: var(--text); }
.line-btn:disabled { opacity: .5; cursor: not-allowed; }
.line-btn:focus-visible { outline-offset: 1px; }
.line-btn .ln { display: grid; min-width: 0; }
.line-btn .ln-name { font-size: 14.5px; font-weight: 500; line-height: 1.25; }
.line-btn .ln-sub { font-size: 11.5px; color: var(--text3); line-height: 1.3; }
.line-key { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line2); }
.line-key--isobars { color: #141822; }
.line-key--heights { color: #6b2fa0; }
html[data-theme='dark'] .line-key--isobars { color: #eeece6; }
html[data-theme='dark'] .line-key--heights { color: #d4b3ff; }
.line-sw { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--bg4); box-shadow: inset 0 0 0 1px var(--line2); transition: background .2s; }
.line-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg2); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s var(--ease); }
.line-btn[aria-pressed='true'] .line-sw { background: var(--accent); box-shadow: none; }
.line-btn[aria-pressed='true'] .line-sw::after { transform: translateX(12px); }
.ex-lines-level { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 0 52px; font-size: 13px; color: var(--text2); white-space: nowrap; }
.ex-lines-level .ex-select { min-height: 34px; font-size: 13.5px; }
.ex-hover small { font-size: .62rem; color: var(--text2); letter-spacing: .02em; }

.lg { display: grid; gap: 8px; padding: 14px 14px 12px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.lg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text2); font-weight: 500; }
.lg-head span:last-child { font-family: var(--mono); letter-spacing: .06em; text-transform: none; color: var(--text3); }
.lg-bar { height: 10px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line); background-color: var(--bg3); }
.lg-ticks { position: relative; height: 14px; font-family: var(--mono); font-size: .62rem; color: var(--text3); }
.lg-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.lg-ticks span.is-start { transform: none; }
.lg-ticks span.is-end { transform: translateX(-100%); }
.lg-stats { font-family: var(--mono); font-size: .64rem; color: var(--text3); letter-spacing: .02em; }
.lg-stats b { color: var(--text); font-weight: 500; }

.ex-about { display: grid; gap: 10px; padding: 0 6px; }
.ab-blurb { font-size: 14px; color: var(--text2); line-height: 1.6; font-weight: 300; }
.ab-apps { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-apps a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line2); color: var(--text2); font-size: 13px; transition: all .2s; }
.ab-apps a:hover { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-dim); }
.ab-apps .ic { width: 14px; height: 14px; }
.ex-modelnote { display: grid; gap: 6px; margin: auto 6px 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--text3); font-weight: 300; }

/* ---------- map ---------- */
.ex-mapwrap { grid-area: map; position: relative; min-height: 0; min-width: 0; overflow: hidden; }
.ex-map { position: absolute; inset: 0; background: #e2e7ec; cursor: crosshair; }
html[data-theme='dark'] .ex-map { background: #0c0f14; }
.ex-map:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 0; }
.ex-map.wlmap-dragging { cursor: grabbing; }
/* the globe (globe-map.js): space around it, matching THEME.*.globe in explorer.js */
.ex-map--globe { background: #eef1f5; }
html[data-theme='dark'] .ex-map--globe { background: #05070b; }
/* Flat / Globe, and the globe's night side */
.ex-shape { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 6px; }
.ex-shape .seg { background: var(--glass); box-shadow: inset 0 0 0 1px var(--line2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ex-night, .ex-fullbtn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--glass); border: 1px solid var(--line2); color: var(--text3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color .2s, background .2s; }
.ex-night .ic, .ex-fullbtn .ic { width: 16px; height: 16px; }
.ex-night:hover, .ex-fullbtn:hover { color: var(--text); }
.ex-night[aria-pressed='true'] { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-ring); }
.ex-night:focus-visible, .ex-fullbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the full-screen button shows the way in, or the way out */
.ex-fullbtn > span { display: grid; place-items: center; }
.ex-fullbtn .i-collapse, .ex-fullbtn[aria-pressed='true'] .i-expand { display: none; }
.ex-fullbtn[aria-pressed='true'] .i-collapse { display: grid; }
.ex-zoom { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 4; display: grid; border-radius: 10px; overflow: hidden; background: var(--glass); border: 1px solid var(--line2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ex-zoom button { width: 44px; height: 44px; border: 0; background: none; color: var(--text); font: 400 20px/1 var(--sans); cursor: pointer; }
.ex-zoom button + button { border-top: 1px solid var(--line2); }
.ex-zoom button:hover { background: var(--line); }
.ex-zoom button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.ex-loading { position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 5; overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none; }
.ex-loading.is-on { opacity: 1; }
.ex-loading::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: ex-scan 1.1s linear infinite; }
@keyframes ex-scan { from { left: -30%; } to { left: 100%; } }
.ex-flags { position: absolute; top: 12px; left: 12px; right: 280px; z-index: 4; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.ex-frame, .ex-sample, .ex-hint { padding: 6px 10px; border-radius: 8px; background: var(--glass); border: 1px solid var(--line2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); }
.ex-sample { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.ex-hint { position: absolute; right: 12px; bottom: 12px; z-index: 4; pointer-events: none; color: var(--text3); }
.ex-hover { position: absolute; z-index: 6; pointer-events: none; display: grid; gap: 1px; padding: 9px 12px; border-radius: 10px; background: var(--glass2); border: 1px solid var(--line2); box-shadow: var(--shadow); font-family: var(--mono); font-size: .66rem; color: var(--text3); white-space: nowrap; letter-spacing: .02em; }
.ex-hover b { font-family: var(--sans); font-size: 16px; color: var(--text); font-weight: 500; letter-spacing: 0; }
.ex-hover em { font-style: normal; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: 2px; }
/* the legend over the map: on phones, where the rail's legend is hidden, and in full screen */
.ex-legend-float { display: none; position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; pointer-events: none; }
.ex-legend-float .lg { padding: 8px 12px 6px; gap: 5px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: var(--line2); }
.ex-legend-float .lg-stats { display: none; }
.ex-legend-float .lg-bar { height: 8px; }

.ex-pin { margin: -10px 0 0 -10px; width: 20px; height: 20px; }
.ex-pin i { position: absolute; inset: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff, 0 0 14px var(--accent-glow); }
.ex-pin::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--accent); animation: ex-ping 2.2s var(--ease) infinite; }
@keyframes ex-ping { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- timeline ---------- */
.ex-time { grid-area: time; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 'play scrub scrub scrub' 'read read step now'; align-items: center; gap: 4px 16px; padding: 10px 20px 12px; background: var(--ex-panel); border-top: 1px solid var(--line); }
.ex-play { grid-area: play; }
.ex-read { grid-area: read; }
.ex-scrub { grid-area: scrub; }
.ex-ctl--step { grid-area: step; }
.ex-now { grid-area: now; }
.ex-play, .pf-play { display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 1px var(--accent-ring) inset, 0 8px 26px -10px var(--accent-glow); transition: transform .15s var(--ease), background .2s, box-shadow .25s; }
.ex-play { width: 46px; height: 46px; }
.ex-play:hover, .pf-play:hover { background: var(--accent-hover); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 10px 34px -6px var(--accent-glow); }
.ex-play:active, .pf-play:active { transform: scale(.96); }
.ex-play .ic { width: 18px; height: 18px; }
.ex-play .i-play .ic, .pf-play .i-play .ic { fill: currentColor; }
.ex-play .i-pause .ic, .pf-play .i-pause .ic { stroke-width: 2.4; }
.ex-play .i-pause, .pf-play .i-pause, .ex-play[aria-pressed='true'] .i-play, .pf-play[aria-pressed='true'] .i-play { display: none; }
.ex-play[aria-pressed='true'] .i-pause, .pf-play[aria-pressed='true'] .i-pause { display: grid; }
.ex-play > span, .pf-play > span { display: grid; place-items: center; }
.ex-read { min-width: 0; display: flex; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; }
.ex-read-utc { font-family: var(--mono); font-size: 13.5px; color: var(--text2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ex-read-utc b { color: var(--text); font-weight: 500; }
.ex-read-local { font-family: var(--mono); font-size: .68rem; color: var(--text3); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ex-scrub { position: relative; padding-bottom: 18px; min-width: 0; }
.ex-scrub input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 0; cursor: pointer; display: block; }
.ex-scrub input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) 0 var(--p, 0%), var(--bg4) var(--p, 0%)); }
.ex-scrub input[type='range']::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) 0 var(--p, 0%), var(--bg4) var(--p, 0%)); }
.ex-scrub input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--bg2); border: 4px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-dim), 0 4px 14px -4px var(--accent-glow); transition: box-shadow .2s; }
.ex-scrub input[type='range']::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--bg2); border: 4px solid var(--accent); }
.ex-scrub input[type='range']:focus-visible { outline: none; }
.ex-scrub input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--accent-ring); }
.ex-ticks { position: absolute; left: 10px; right: 10px; bottom: 0; height: 15px; pointer-events: none; }
.ex-ticks span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: .62rem; color: var(--text3); white-space: nowrap; }
.ex-ticks span::before { content: ''; position: absolute; left: 50%; top: -9px; width: 1px; height: 6px; background: var(--line3); }
.ex-ticks .is-now { color: var(--accent); font-weight: 500; }
.ex-ticks .is-now::before { background: var(--accent); height: 8px; top: -10px; }
.ex-now:disabled { opacity: .45; }

/* ---------- point drawer: Signal's pop-out, House materials ---------- */
.ex-drawer { position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; width: min(480px, 100%); display: flex; flex-direction: column; background: var(--bg2); border-left: 1px solid var(--line2); box-shadow: -30px 0 70px -40px rgba(20, 20, 30, .45); transform: translateX(104%); opacity: .4; transition: transform .5s var(--ease), opacity .35s var(--ease); }
html[data-theme='dark'] .ex-drawer { box-shadow: -40px 0 80px -30px rgba(0, 0, 0, .85); }
.ex-drawer.is-open { transform: none; opacity: 1; }
.ex-drawer:focus { outline: none; }
.pf-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; padding: 14px 20px 10px; border-bottom: 1px solid var(--line); }
.pf-head .pf-zone { grid-column: 1 / -1; }
.pf-id { display: grid; gap: 3px; min-width: 0; }
.pf-kicker { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.pf-id h2 { font-family: var(--serif); font-size: 2rem; font-weight: 300; line-height: 1.05; overflow-wrap: anywhere; }
.pf-id h2:focus { outline: none; }
.pf-id h2:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 4px; border-radius: 6px; }
.pf-coords { font-family: var(--mono); font-size: .66rem; color: var(--text3); letter-spacing: .04em; }
.pf-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 20px 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; overscroll-behavior: contain; }
.pf-sec { min-width: 0; }
.ex-drawer.is-open .pf-sec { animation: pf-in .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + 120ms); }
@keyframes pf-in { from { opacity: 0; transform: translateY(12px); } }
.pf-loading { display: grid; gap: 12px; }
.pf-loading .skeleton { display: block; height: 128px; border-radius: var(--r); }

.pf-h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text2); font-weight: 500; }
.pf-h3 span { font-family: var(--mono); letter-spacing: .04em; text-transform: none; color: var(--text3); font-weight: 400; }

.pf-zone { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; min-height: 36px; }
.pf-zone-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text2); }
.pf-zone-label b { color: var(--text); font-weight: 500; }
.pf-zone-label .ic { color: var(--accent); flex: none; }

.pf-frame { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 -8px; padding: 8px 12px 8px 8px; border-radius: var(--r); background: var(--glass2); border: 1px solid var(--line2); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pf-play { width: 38px; height: 38px; }
.pf-frame-k { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text3); font-weight: 500; font-family: var(--sans); }
.pf-frame-t { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-frame-v { font-size: 13px; color: var(--text2); margin-top: 1px; }
.pf-frame-v b { color: var(--text); font-weight: 500; }
.pf-frame-text { min-width: 0; }
.pf-key-play, .pf-key-ghost { display: inline-block; width: 14px; height: 0; vertical-align: middle; border-top: 2px solid var(--text); }
.pf-key-ghost { border-top: 1.5px dashed var(--text3); }

.pf-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 8px; }
.pf-now > div { padding: 8px 12px 9px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); min-width: 0; }
.pf-now > div:nth-child(3n + 1) { border-left: 0; }
.pf-now > div:nth-child(-n + 3) { border-top: 0; }
.pf-now dt { display: flex; align-items: center; gap: 6px; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text3); font-weight: 500; }
.pf-now dt .ic { color: var(--accent); flex: none; }
.pf-now dd { margin-top: 2px; font-family: var(--serif); font-size: 1.6rem; font-weight: 400; line-height: 1; color: var(--text); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.pf-now dd small { font-family: var(--sans); font-size: 12px; color: var(--text3); margin-left: 3px; font-weight: 400; }
.pf-now p { margin-top: 2px; font-family: var(--mono); font-size: .62rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pf-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line2); font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; color: var(--text2); white-space: nowrap; }
.pf-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.pf-badge--ens i { background: #6347ba; }
html[data-theme='dark'] .pf-badge--ens i { background: #a996f0; }
.pf-badge.is-sample { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.pf-badge.is-sample i { background: var(--amber); }
.pf-badge--ms { color: var(--text3); }

.pf-five { display: grid; gap: 10px; }
.pf-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pf-charts { display: grid; gap: 12px; }
.pf-chart { display: grid; gap: 4px; padding: 12px 12px 4px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.pf-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.pf-chart-head h4 { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--text); }
.pf-keys { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--text3); }
.pf-keys span { display: inline-flex; align-items: center; gap: 6px; }
.pf-keys i { display: inline-block; flex: none; }
.k-line { width: 14px; height: 2px; border-radius: 2px; }
.k-band { width: 14px; height: 9px; border-radius: 2px; opacity: .3; }
.k-bar { width: 4px; height: 10px; border-radius: 1px; }
.pf-keys .k1, .ch-tip i.k1 { background: var(--ch-1); }
.pf-keys .k2 { background: var(--ch-2); }
.pf-keys .k3 { background: var(--ch-3); }

.pf-table .tw { overflow: auto; max-height: 420px; border-radius: var(--r); border: 1px solid var(--line); }
.pf-table .tw:focus-visible { outline-offset: 2px; }
.pf-table table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pf-table th, .pf-table td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.pf-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg3); color: var(--text3); font-weight: 500; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.pf-table tbody th { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--bg2); color: var(--text); font-weight: 500; }
.pf-table thead th:first-child { left: 0; z-index: 3; text-align: left; }
.pf-table td { color: var(--text2); }
.pf-table td.ens, .pf-table th.ens { color: var(--text3); }
.pf-table tr.is-now th::after { content: 'now'; margin-left: 6px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); border: 1px dashed var(--line3); border-radius: 4px; padding: 0 4px; }
.pf-table tr.is-play td, .pf-table tr.is-play th { background: var(--accent-dim); color: var(--text); }
.pf-table tr.is-play th { box-shadow: inset 2px 0 0 var(--accent); }
.pf-table .pf-note { margin-top: 8px; }

.pf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.pf-acct { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; font-size: 14px; font-weight: 500; }
.pf-acct .ic { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.pf-acct:hover .ic { transform: translateX(3px); }
.pf-apps { display: grid; gap: 10px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip { gap: 7px; padding: 0 13px 0 11px; font-size: 13.5px; color: var(--text); }
.pf-chip .ic { width: 15px; height: 15px; color: var(--accent); }
.pf-chip-why { color: var(--text3); font-size: 12.5px; }
.pf-chip-st { font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); border: 1px solid var(--line2); border-radius: 99px; padding: 1px 6px; }
.pf-chip:hover { background: var(--accent-dim); }
.pf-note { font-size: 12.5px; color: var(--text3); line-height: 1.6; }
.pf-note .pf-key-play, .pf-note .pf-key-ghost { margin: 0 2px 2px; }
.pf-honest { padding-top: 14px; border-top: 1px solid var(--line); }

/* toast with a link (site.js toasts are text-only) */
.toast.ex-toast { pointer-events: auto; line-height: 1.5; }
.toast.ex-toast a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; white-space: nowrap; }

/* ---------- charts ---------- */
.ch { position: relative; width: 100%; border-radius: 6px; cursor: crosshair; }
.ch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ch svg { display: block; overflow: visible; max-width: none; }
.ch-hline { stroke: var(--line); stroke-width: 1; }
.ch-base { stroke: var(--line3); stroke-width: 1; }
.ch-vline { stroke: var(--line); stroke-width: 1; }
.ch-tick { stroke: var(--line3); stroke-width: 1; }
.ch-ylab, .ch-xlab, .ch-unit, .ch-ghost-lab, .ch-play-lab { font-family: var(--mono); font-size: 9.5px; fill: var(--text3); letter-spacing: .02em; }
.ch-xlab { fill: var(--text2); }
.ch-unit { fill: var(--text3); }
.ch-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ch-line.ch-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ch-draw 1.1s var(--ease) forwards; }
@keyframes ch-draw { to { stroke-dashoffset: 0; } }
.ch-area { opacity: .12; }
.ch-band { opacity: .17; }
html[data-theme='dark'] .ch-band { opacity: .24; }
.ch-band-edge { fill: none; stroke-width: 1; opacity: .35; }
.ch-bar { opacity: .9; }
.ch-in { animation: ch-fade .8s var(--ease) both .25s; }
.ch-area.ch-in { animation-name: ch-fade-area; }
@keyframes ch-fade { from { opacity: 0; } }
@keyframes ch-fade-area { from { opacity: 0; } to { opacity: .12; } }
.ch-ghost-line { stroke: var(--text3); stroke-width: 1.25; stroke-dasharray: 3 3; opacity: .75; }
.ch-ghost-lab { fill: var(--text3); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.ch-play-line { stroke: var(--text); stroke-width: 1.5; }
.ch-play-dot { fill: var(--text); stroke: var(--bg); stroke-width: 2; }
.ch-play-lab { fill: var(--text); font-weight: 500; }
.ch-cross { stroke: var(--text3); stroke-width: 1; opacity: .7; }
.ch-dot { stroke: var(--bg); stroke-width: 2; }
.ch-tip { position: absolute; top: 4px; z-index: 3; min-width: 168px; padding: 8px 10px; border-radius: 9px; background: var(--glass2); border: 1px solid var(--line2); box-shadow: var(--shadow); pointer-events: none; font-size: 12px; color: var(--text2); }
.ch-tip p { font-family: var(--mono); font-size: 10.5px; color: var(--text3); margin-bottom: 4px; }
.ch-tip div { display: flex; align-items: center; gap: 8px; }
.ch-tip i { width: 10px; height: 2px; border-radius: 2px; flex: none; }
.ch-tip i.k-band { height: 8px; opacity: .35; }
.ch-tip span { flex: 1; white-space: nowrap; }
.ch-tip b { color: var(--text); font-weight: 500; font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }

/* ---------- responsive ---------- */
@media (max-width: 1520px) {
  .ex-top .ex-ctl-label { display: none; }
  .ex-top { gap: 10px 16px; }
}
/* keep the timeline's controls clear of the design-review pen (review tooling only, bottom right) */
@media (min-width: 961px) {
  body:has([data-review-pen]) .ex-time { grid-template-columns: auto minmax(0, 1fr) auto auto 264px; grid-template-areas: 'play scrub scrub scrub scrub' 'read read step now .'; padding-bottom: 16px; }
}
@media (max-width: 1220px) {
  .ex { grid-template-columns: 252px minmax(0, 1fr); }
}

.ex-credit { display: none; }

@media (max-width: 960px) {
  .ex-credit:not(:empty) { display: block; order: 6; margin: 0; padding: 4px var(--gutter) 14px; font-size: 12px; line-height: 1.45; color: var(--text3); }
  .ex-credit a { color: inherit; }
  .ex { height: auto; min-height: 0; display: flex; flex-direction: column; overflow: visible; }
  .ex-top { order: 1; padding: 12px var(--gutter); }
  .ex-h1 { font-size: 1.7rem; }
  .ex-ctl--region { order: 3; flex: 1 1 auto; }
  .ex-ctl--region .seg { flex: 1 1 auto; }
  .places { order: 4; }
  .ex-meta { order: 2; padding: 8px var(--gutter); }
  .ex-note { margin-left: 0; }
  .ex-rail { order: 3; flex-direction: row; padding: 10px var(--gutter); border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; gap: 6px; scrollbar-width: none; }
  .ex-rail::-webkit-scrollbar { display: none; }
  .ex-rail-label, .ex-legend, .ex-about, .ex-modelnote { display: none; }
  .ex-layers { display: flex; gap: 6px; flex: none; }
  .layer-btn { flex: none; grid-template-columns: 28px auto; gap: 8px; min-height: 44px; padding: 4px 14px 4px 6px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line2); white-space: nowrap; }
  .layer-btn .lic { width: 30px; height: 30px; border-radius: 50%; }
  .layer-btn .lic .ic { width: 15px; height: 15px; }
  .layer-btn .lu, .layer-btn .ln-sub { display: none; }
  .layer-btn .ln-name { font-size: 14px; }
  .ex-lines { display: flex; align-items: center; gap: 6px; flex: none; }
  .ex-lines > .label { display: none; }
  .line-btn { flex: none; grid-template-columns: 28px auto auto; gap: 8px; min-height: 44px; padding: 4px 12px 4px 6px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line2); white-space: nowrap; }
  .line-btn .line-key { width: 30px; height: 30px; border-radius: 50%; }
  .line-btn .ln-sub { display: none; }
  .line-btn .ln-name { font-size: 14px; }
  .ex-lines-level { flex: none; padding: 0 0 0 4px; white-space: nowrap; }
  .ex-lines-level .ex-select { min-height: 44px; }
  .ex-mapwrap { order: 4; height: min(62vh, 600px); min-height: 380px; flex: none; }
  .ex-time { order: 5; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'play read now' 'scrub scrub scrub' 'step step step'; gap: 10px 14px; padding: 12px var(--gutter) 16px; }
  .ex-read { display: block; }
  .ex-read-local { margin-top: 2px; }
  .ex-ctl--step { justify-self: start; }
  .ex-hint { display: none; }
  .ex-legend-float { display: block; }

  .ex-drawer { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 86vh; max-height: 86dvh; border-left: 0; border-top: 1px solid var(--line2); border-radius: 20px 20px 0 0; box-shadow: 0 -30px 80px -30px rgba(20, 20, 30, .5); transform: translateY(104%); z-index: 120; }
  .pf-head { position: relative; padding: 22px var(--gutter) 12px; }
  .pf-head::before { content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--line3); }
  .pf-body { padding: 14px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  .ex-top { gap: 10px; }
  .ex-top > .ex-ctl:first-of-type { order: 2; width: 100%; }
  .ex-top > .ex-ctl:first-of-type .seg { width: 100%; }
  .ex-top > .ex-ctl:first-of-type .seg button { flex: 1; }
  .seg button { min-height: 40px; }
  .seg--sm button { min-height: 40px; padding: 0 14px; }
  .ex-ctl--region { width: calc(100% - 118px); }
  .places-btn { --h: 46px; }
  .places-list { width: min(320px, calc(100vw - 32px)); }
  .ex-meta { font-size: .6rem; gap: 4px 12px; }
  .ex-note { font-size: .66rem; }
  .ex-mapwrap { height: 56vh; min-height: 340px; }
  .ex-flags { top: 10px; left: 10px; right: 198px; }
  .ex-shape { top: 10px; right: 10px; }
  .ex-shape-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ex-night, .ex-fullbtn { width: 44px; height: 44px; }
  .ex-frame { font-size: .58rem; }
  .ex-read-utc { font-size: 12.5px; }
  .ex-read-local { white-space: normal; }
  .ex-ticks span { font-size: .56rem; }
  .ex-now { --h: 44px; }
  .pf-id h2 { font-size: 1.8rem; }
  .pf-now dd { font-size: 1.7rem; }
  .pf-now > div { padding: 10px; }
  .pf-chip-why { display: none; }
  .pf-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 400px) {
  .pf-now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-now > div:nth-child(3n + 1) { border-left: 1px solid var(--line); }
  .pf-now > div:nth-child(2n + 1) { border-left: 0; }
  .pf-now > div:nth-child(3) { border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .ex-pin::after { animation: none; }
}

/* ---- model and field pickers ------------------------------------------------- */
.ex-select { min-height: 38px; padding: 6px 34px 6px 12px; font-size: 14px; border-radius: 9px; max-width: 100%;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text2) 50%), linear-gradient(135deg, var(--text2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
#model { min-width: 190px; }
.ex-field { display: grid; gap: 6px; margin: 14px 0 4px; }
.ex-field .ex-select { width: 100%; }
.model-attr { font-size: .8rem; color: var(--text3); margin-top: 6px; }
@media (max-width: 640px) { .ex-select { min-height: 44px; } #model { min-width: 0; width: 100%; } }
/* the phone rail is one scrolling row: the field picker keeps its width (its label
   is for screen readers) and nothing stretches the row's pills */
@media (max-width: 960px) {
  .ex-rail { position: relative; align-items: center; }
  .ex-field { flex: none; margin: 0; }
  .ex-field > .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ex-field .ex-select { min-height: 44px; }
}

/* ---------- full screen: the map and the timeline, nothing else ----------
   #full adds .is-full to the Explorer (and ex-full to the body) and asks the
   browser for its own full screen where a page can have it; iPhones have none,
   so this layout alone fills their screen. Esc, or the button again, leaves.
   What stays on the map: the frame's time, the legend, zoom and the button. */
body.ex-full { overflow: hidden; }
body.ex-full > nav, body.ex-full .wl-notice, body.ex-full #footer-slot { display: none; }
.ex.is-full { position: fixed; inset: 0; z-index: 200; margin: 0; height: 100vh; height: 100dvh; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: 'map' 'time'; border-top: 0; overflow: hidden; }
.ex.is-full .ex-top, .ex.is-full .ex-meta, .ex.is-full .ex-rail, .ex.is-full .ex-credit, .ex.is-full .ex-shape .seg, .ex.is-full .ex-night, .ex.is-full .ex-hint, .ex.is-full .ex-ctl--step, .ex.is-full .ex-now { display: none; }
.ex.is-full .ex-mapwrap { height: auto; min-height: 0; }
.ex.is-full .ex-flags { right: 66px; }
.ex.is-full .ex-legend-float { display: block; }
/* one row of timeline (play, the time, the slider) and the legend in a corner; a
   narrow phone stacks the slider under the time and keeps its legend across the map */
.ex.is-full .ex-time { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: 'play read scrub'; gap: 0 16px; padding: 8px 20px; }
.ex.is-full .ex-read { display: block; max-width: 320px; }
.ex.is-full .ex-read-local { margin-top: 2px; }
@media (min-width: 641px) {
  .ex.is-full .ex-legend-float { left: 12px; right: auto; bottom: 12px; width: 320px; }
}
@media (max-width: 640px) {
  .ex.is-full .ex-time { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'play read' 'scrub scrub'; gap: 10px 14px; padding: 12px var(--gutter) 16px; }
  .ex.is-full .ex-read { max-width: none; }
}