/* Peta Komando Karhutla — Musimpanen Intelligence Lab (dark). Fire colours are functional, not brand accents. */
:root {
  --fire-new: #FFF6C8;
  --fire-day: #FFD25A;
  --fire-mid: #FF9A2E;
  --fire-old: #E0442B;
  --fire-cold: #8E1B12;
  --panel-w: 360px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-head); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
.app { position: relative; height: 100vh; overflow: hidden; }

/* map + effects canvas */
.map { position: absolute; inset: 0 var(--panel-w) 0 0; background: var(--bg); }
.fx { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 450; }
.leaflet-container { background: var(--bg); font-family: var(--font-head); }
.leaflet-control-attribution { background: rgba(0,0,0,.75) !important; color: var(--text-2) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--text-2) !important; }
.leaflet-bar a { background: var(--surface); color: var(--text); border-color: var(--border); }
.leaflet-bar a:hover { background: var(--border); }
.city { font: 600 11px/1 var(--font-mono); color: var(--text-2); white-space: nowrap; text-shadow: 0 1px 3px #000; }
.city b { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--text-2); vertical-align: 1px; }
.city.is-smoke { color: var(--accent); }
.city.is-smoke b { background: var(--accent); box-shadow: 0 0 0 3px rgba(61,123,255,.3); }
.city .tag { margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: var(--accent-fill); color: var(--on-accent); }
.zone-label { background: rgba(0,0,0,.85); border: 1px solid var(--alert); color: var(--text); font: 600 10px/1 var(--font-mono); padding: 3px 6px; border-radius: 4px; box-shadow: none; white-space: nowrap; }
.zone-label::before { display: none; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); }
.leaflet-popup-content { margin: 12px 14px; font: 500 12px/1.55 var(--font-mono); }
.leaflet-popup-content b { color: var(--accent); font-weight: 600; }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-2); }

/* Musimpanen Intelligence lockup (links to the main site) */
.chip { position: absolute; z-index: 600; top: 16px; right: calc(var(--panel-w) + 16px); display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 9px; border-radius: 99px; background: rgba(0,0,0,.82); border: 1px solid var(--border); color: var(--text); text-decoration: none; font: 450 14px/1 var(--font-head); letter-spacing: -.03em; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chip b { font-weight: 700; }
.chip svg { width: 20px; height: 20px; flex: none; }
.chip:hover { border-color: var(--text-3); }
/* Lab account button (filled by id.musimpanen.id/chip.js when signed in); the logo chip moves left to make room */
.acct { position: absolute; z-index: 700; top: 16px; right: calc(var(--panel-w) + 16px); }
.lab-signed-in .chip { right: calc(var(--panel-w) + 62px); }

/* side panel */
.panel { position: absolute; z-index: 600; top: 0; right: 0; bottom: 0; width: var(--panel-w); overflow-y: auto; padding: 22px 22px 18px; background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 18px; }
.panel__head h1 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -.035em; }
.panel__head h1 em { font-style: normal; color: var(--text-2); font-weight: 500; }
.warn { margin: 10px 0 0; padding: 8px 10px; border-radius: var(--r-small); background: rgba(255,90,79,.12); border: 1px solid rgba(255,90,79,.45); font-size: 12.5px; line-height: 1.4; color: var(--text); }
.warn a { color: var(--text); text-decoration: underline; }
.stat__label { margin: 0; font: 600 13px/1 var(--font-head); color: var(--text-2); letter-spacing: -.005em; }
.stat__num { margin: 8px 0 0; display: flex; align-items: baseline; gap: 10px; font: 500 56px/1 var(--font-head); letter-spacing: -.045em; color: var(--text); }
.stat__num small { font: 600 15px/1 var(--font-mono); letter-spacing: 0; }
.stat__num small.up { color: var(--alert); }
.stat__num small.down { color: var(--success); }
.stat__sub { margin: 6px 0 0; font-size: 13px; color: var(--text-2); }
.block h2 { margin: 0 0 10px; font: 600 12.5px/1 var(--font-head); letter-spacing: -.005em; color: var(--text-2); }
.block--row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.big { margin: 0; font: 600 30px/1 var(--font-mono); color: var(--text); }
.smoke { margin: 0; font-size: 13px; line-height: 1.35; color: var(--accent); }
.smoke__peat { display: block; margin-top: 4px; font-size: 12px; color: var(--peat); }
.top { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.top li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 14px; }
.top li span:last-child { font: 600 13px/1 var(--font-mono); color: var(--text-2); }
.top li .bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
.top li .bar i { display: block; height: 100%; background: var(--fire-mid); border-radius: inherit; }
.toggles { display: grid; gap: 8px; font-size: 13px; color: var(--text-2); }
.toggles input { accent-color: #0A5CFF; margin-right: 6px; }
.todo { padding: 12px 14px; border: 1.5px dashed var(--border); border-radius: var(--r-card); background: rgba(164,167,154,.06); color: var(--text-2); font-size: 13px; }
.todo p { margin: 0; }
.todo p + p { margin-top: 4px; }
.todo b { color: var(--text); font-weight: 700; }
.foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; line-height: 1.5; color: var(--text-2); }
.foot p { margin: 0 0 6px; }
.foot .fetched { font-family: var(--font-mono); color: var(--text); }
.credits { opacity: .8; }
.foot .note { color: var(--text-3); }

/* land: peat + permits */
.land__peat { margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text-2); }
.land__peat b { font: 600 30px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--peat); letter-spacing: -.02em; }
.land__bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--border); }
.land__bar i { display: block; height: 100%; }
.land__bar .c0, .land__legend .c0 { background: #4A4A52; }
.land__bar .c1, .land__legend .c1 { background: var(--hti); }
.land__bar .c2, .land__legend .c2 { background: var(--kebun); }
.land__legend { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-2); }
.land__legend li { display: flex; align-items: center; gap: 6px; }
.land__legend li b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.land__legend i, .lyr .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.lyr { display: flex; align-items: center; gap: 0; }
.lyr .sw { margin-right: 6px; }
.lyr .sw + * { margin: 0; }
.sw--peat { background: var(--peat); }
.sw--kebun { background: var(--kebun); margin-left: 4px; }
.sw--hti { background: transparent; border: 1.5px dashed var(--hti); }
.legend .lg-peat { background: var(--peat); }

/* 7-day outlook */
.forecast__head { margin: 0 0 10px; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--text); }
.forecast__chart svg { display: block; overflow: visible; }
.forecast__legend { margin: 6px 0 0; display: flex; align-items: center; gap: 6px; font: 500 11px/1 var(--font-mono); color: var(--text-2); }
.forecast__legend i { width: 10px; height: 10px; border-radius: 2px; margin-left: 6px; }
.forecast__legend i:first-child { margin-left: 0; }
.lg-obs { background: #FF9A2E; }
.lg-fc { background: repeating-linear-gradient(45deg, #FF9A2E 0 2px, rgba(255,154,46,.18) 2px 5px); outline: 1px solid #FF9A2E; }
.lg-rain { background: var(--code); }
.forecast__note { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--text-2); }

/* forecast mode */
.fc-banner { display: none; position: absolute; z-index: 600; top: 16px; left: 50%; transform: translateX(calc(-50% - var(--panel-w) / 2)); padding: 8px 14px; border-radius: 99px; background: rgba(0,0,0,.9); border: 1px dashed var(--accent); font: 600 12px/1 var(--font-mono); color: var(--text-2); white-space: nowrap; }
.fc-banner b { color: var(--accent); margin-right: 6px; }
.is-forecast .fc-banner { display: block; }
.stat__num small.fc { color: var(--text-2); }
.is-forecast .stat__label { color: var(--accent); }
.lg-fc-set { display: none; align-items: center; gap: 6px; }
.lg-obs-set { display: inline-flex; align-items: center; gap: 6px; }
.is-forecast .lg-fc-set { display: inline-flex; }
.is-forecast .lg-obs-set { display: none; }
.legend .l4 { background: transparent; border: 1.5px solid var(--fire-day); width: 11px; height: 11px; }
.legend .l5 { background: var(--code); opacity: .8; }
.time__track { position: relative; }
.nowmark { position: absolute; top: 18px; bottom: 16px; width: 0; border-left: 1.5px dashed var(--accent); pointer-events: none; }
.nowmark b { position: absolute; left: 6px; top: -16px; font: 600 10px/1 var(--font-mono); color: var(--accent); white-space: nowrap; }
.days span.fc { color: var(--accent); opacity: .8; }

/* time bar */
.time { position: absolute; z-index: 600; left: 16px; right: calc(var(--panel-w) + 16px); bottom: 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--r-card); background: rgba(18,18,20,.92); border: 1px solid var(--border); box-shadow: var(--shadow); }
.play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent-fill); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; transition: transform var(--dur-fast) var(--ease); }
.play:active { transform: scale(.94); }
.play svg { width: 20px; height: 20px; fill: currentColor; }
.play .i-pause { display: none; }
.play.is-playing .i-play { display: none; }
.play.is-playing .i-pause { display: block; }
.time__track { min-width: 0; }
.time__meta { display: flex; justify-content: space-between; gap: 12px; font: 600 12px/1 var(--font-mono); color: var(--text); margin-bottom: 8px; }
.legend { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 500; }
.legend i { width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; }
.legend .l1 { background: var(--fire-new); box-shadow: 0 0 6px var(--fire-day); }
.legend .l2 { background: var(--fire-mid); }
.legend .l3 { background: var(--fire-old); }
#slider { width: 100%; accent-color: #0A5CFF; margin: 0; }
.days { position: relative; height: 14px; margin-top: 4px; font: 500 10px/1 var(--font-mono); color: var(--text-2); }
.days span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.speed { display: flex; gap: 4px; }
.speed button { min-width: 38px; height: 32px; border-radius: var(--r-small); border: 1px solid var(--border); background: transparent; color: var(--text-2); font: 600 12px/1 var(--font-mono); cursor: pointer; }
.speed button.is-on { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }

/* phones */
@media (max-width: 760px) {
  :root { --panel-w: 0px; }
  .map { inset: 0 0 46vh 0; }
  .panel { top: auto; height: 46vh; width: 100%; border-left: 0; border-top: 1px solid var(--border); }
  .time { left: 8px; right: 8px; bottom: calc(46vh + 8px); grid-template-columns: auto 1fr; padding: 10px 12px; }
  .speed { display: none; }
  .legend { display: none; }
  .chip { right: 12px; top: 12px; }
  .acct { right: 12px; top: 12px; }
  .lab-signed-in .chip { right: 56px; }
  .days span:nth-child(even) { display: none; }
  .fc-banner { top: 60px; font-size: 10.5px; padding: 6px 10px; }
}

/* ---------------- reel layout: 1080 × 1920, safe zone x 33–1047, y 420–1500 (x ≤ 950 below y 1150) */
body.reel { width: 1080px; height: 1920px; overflow: hidden; }
.reel .app { width: 1080px; height: 1920px; }
.reel .map { inset: 0; }
.reel .leaflet-control-zoom { display: none; }
.reel .chip { top: 436px; right: 80px; padding: 12px 22px 12px 16px; font-size: 25px; gap: 12px; }
.reel .chip svg { width: 36px; height: 36px; }
.reel .panel { top: 520px; left: 60px; right: 60px; bottom: auto; width: auto; height: auto; overflow: visible; padding: 24px 28px; border: 1px solid var(--border); border-radius: var(--r-card); background: rgba(0,0,0,.88); box-shadow: var(--shadow); display: grid; grid-template-columns: auto 1fr; column-gap: 34px; row-gap: 14px; }
.reel .land { display: none; }
.reel .panel__head, .reel .toggles, .reel .todo, .reel .foot, .reel .block--row, .reel .forecast { display: none; }
.reel .stat__label { font-size: 24px; }
.reel .stat__num { font-size: 104px; margin-top: 12px; }
.reel .stat__num small { font-size: 28px; }
.reel .stat__sub { font-size: 24px; margin-top: 10px; }
.reel .block h2 { font-size: 20px; margin-bottom: 12px; }
.reel .top { gap: 9px; }
.reel .top li { font-size: 25px; }
.reel .top li span:last-child { font-size: 22px; }
.reel .top li:nth-child(n+4) { display: none; }
.reel .time { left: 60px; right: 130px; bottom: auto; top: 1330px; padding: 18px 22px; gap: 18px; }
.reel .play { width: 64px; height: 64px; }
.reel .play svg { width: 28px; height: 28px; }
.reel .time__meta { font-size: 22px; margin-bottom: 12px; }
.reel .legend { display: none; }
.reel .days { height: 22px; font-size: 16px; margin-top: 8px; }
.reel .speed { display: none; }
.reel .reel-zone { position: absolute; z-index: 600; left: 60px; top: 1214px; display: flex; gap: 14px; align-items: center; padding: 12px 18px; border-radius: var(--r-card); background: rgba(0,0,0,.88); border: 1px solid var(--alert); font: 600 22px/1 var(--font-mono); }
.reel .reel-zone b { color: var(--text); font-size: 30px; }
.reel .city { font-size: 19px; }
.reel .city .tag { padding: 3px 7px; }
.reel .city b { width: 10px; height: 10px; }
.reel .zone-label { font-size: 17px; padding: 5px 9px; }
.reel .leaflet-control-attribution { font-size: 12px; }
.reel .fc-banner { top: 770px; left: 60px; transform: none; font-size: 22px; padding: 12px 20px; }
.reel .nowmark { top: 24px; bottom: 26px; }
.reel .nowmark b { display: none; }
.reel .reel-note { position: absolute; z-index: 600; left: 60px; top: 1286px; max-width: 890px; padding: 6px 10px; border-radius: var(--r-small); background: rgba(0,0,0,.85); font: 500 15px/1.3 var(--font-mono); color: var(--text-2); }
.qa-safe::after { content: ""; position: absolute; z-index: 9999; left: 33px; top: 420px; width: 1014px; height: 1080px; border: 2px dashed #ff00ff; pointer-events: none; }
.qa-safe::before { content: ""; position: absolute; z-index: 9999; left: 950px; top: 1150px; width: 97px; height: 350px; background: rgba(255,0,255,.18); pointer-events: none; }

/* Lab sign-in bar (shown when the 7-day data is locked) */
.lab-unlock {
  position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 1200;
  display: flex; align-items: center; gap: 16px; max-width: min(640px, calc(100vw - 24px));
  padding: 12px 12px 12px 18px; border-radius: 14px;
  background: rgba(16, 17, 14, .92); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #EDEDE6; font-size: 14px; line-height: 1.4; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.lab-unlock p { margin: 0; }
.lab-unlock b { color: #fff; }
.lab-unlock__btn {
  flex: none; padding: 10px 14px; border-radius: 9px; background: #0A5CFF; color: #fff;
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.lab-unlock__btn:hover { background: #2E74FF; }
@media (max-width: 640px) {
  .lab-unlock { bottom: 96px; flex-direction: column; align-items: stretch; text-align: left; }
  .lab-unlock__btn { text-align: center; }
}