/* the weather-service pages (/warnings /rivers /typhoon /farm /air /heat /sea; static/mpage.js), light and dark */
:root{--bg:#f4f6fa;--card:#fff;--ink:#1b2430;--mut:#5d6b7d;--line:#dde3ec;--acc:#2a78d6}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f141c;--card:#18202b;--ink:#e6ebf2;--mut:#93a1b3;--line:#2a3442;--acc:#5aa0ef}}:root[data-theme=dark]{--bg:#0f141c;--card:#18202b;--ink:#e6ebf2;--mut:#93a1b3;--line:#2a3442;--acc:#5aa0ef}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Khmer",sans-serif}
/* the header (22 October 2026, the user: "menu is not right too messy"; "this menu is matching phone and look good with small icon
   on top"; "if on mobile no need text to save space, but in computer can see text"): the site's menu (static/sitenav.js) is a
   column down the left on a computer and a row of small icons on top on a phone; then the page's title and the language */
header{display:flex;align-items:center;gap:4px 10px;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--card)}
header h1{flex:1;min-width:0;font-size:17px;line-height:1.6;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header #mpLang{flex:none;color:var(--acc);background:none;border:1px solid var(--line);border-radius:9px;padding:5px 12px;font:inherit;
  font-size:13px;cursor:pointer}
@media (max-width:760px){header{padding:6px 10px}header h1{font-size:16px}}
.wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;height:calc(100vh - var(--hh,54px))}     /* --hh: the header, mpage.js */
@media (max-width:900px){.wrap{grid-template-columns:1fr;height:auto}#map{height:58vh}}
#map{height:100%;min-height:320px}
/* the map with the data line under it (source, how often fetched, last, next) */
.mapcol{display:flex;flex-direction:column;min-height:0;height:100%}.mapcol #map{flex:1;height:auto}
.mpstatus{font-size:12px;color:var(--mut);padding:6px 12px;border-top:1px solid var(--line);background:var(--card);line-height:1.45}
.mpstatus a{color:var(--acc)}.mpstatus b{color:var(--ink)}
@media (max-width:900px){.mapcol{height:auto}.mapcol #map{height:58vh;flex:none}}
/* pages whose controls choose what the map shows: the controls first on a phone */
@media (max-width:900px){.wrap.ctlfirst aside{order:-1;border-left:0;border-bottom:1px solid var(--line)}}
aside{overflow:auto;border-left:1px solid var(--line);padding:12px 14px;background:var(--card)}
main.cards{max-width:1200px;margin:0 auto;padding:14px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.card h3{margin:0 0 4px;font-size:15px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.note{color:var(--mut);font-size:12px;margin:6px 0}
.lg{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0;font-size:12px}.lg span{display:inline-flex;align-items:center;gap:5px}
.lg i{width:12px;height:12px;border-radius:3px;display:inline-block}
.row{border:1px solid var(--line);border-radius:10px;padding:7px 9px;margin:6px 0}
.row.click{cursor:pointer}.row.click:hover{border-color:var(--acc)}
.row h4{margin:0;font-size:13.5px;display:flex;justify-content:space-between;gap:6px;align-items:center}.row p{margin:2px 0 0;font-size:12px;color:var(--mut)}
.badge{border-radius:999px;padding:1px 8px;font-size:11.5px;color:#fff;white-space:nowrap}
.big{font-size:26px;font-weight:700;line-height:1.1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}.grid2 div{border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.grid2 small{display:block;color:var(--mut);font-size:11.5px}.grid2 b{font-size:16px}
table.t{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}table.t td,table.t th{padding:3px 4px;border-bottom:1px solid var(--line);text-align:right}
table.t td:first-child,table.t th:first-child{text-align:left}table.t th{color:var(--mut);font-weight:600;font-size:11.5px}
select,input{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:4px 7px;font:inherit}
.chart{color:var(--ink)}
.src{color:var(--mut);font-size:11.5px;margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.src a{color:var(--acc)}
/* the history bar under the map (MP.hist, mpage.js): the view, the day and hour, step, play, speed; the legend and the source under it */
.mphist{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 10px;border-top:1px solid var(--line);background:var(--card);font-size:12.5px}
.mphist button{color:var(--acc);background:none;border:1px solid var(--line);border-radius:8px;padding:3px 9px;font:inherit;cursor:pointer}
.mphist .hbtn.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.mphist select,.mphist input{padding:3px 6px}
.mphist .htime{font-size:13px;margin-left:4px}
.hlegend{display:flex;flex-wrap:wrap;gap:3px 10px;width:100%;font-size:11.5px}.hlegend span{display:inline-flex;align-items:center;gap:4px}
.hlegend i{width:12px;height:12px;border-radius:2px;display:inline-block}.hlegend .hunit{color:var(--mut)}
.hnote{width:100%;color:var(--mut);font-size:11.5px;line-height:1.4}.hnote b{color:var(--ink)}
/* the time range (the owner, 24 October 2026: "build time range history also"): its controls on one line that scrolls sideways
   (phones first), the slider with the missing steps in red under it, the step's own line; a class absent from the step is dimmed */
.mphist .hrow{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;flex:1 1 0;min-width:0;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.mphist .hrow>*{flex:0 0 auto}.mphist .hlab{color:var(--mut)}
.mphist .hslide{width:100%;display:flex;flex-direction:column;gap:1px}
.mphist .hslide input[type=range]{width:100%;margin:0;padding:0;border:0;background:none;accent-color:var(--acc)}
.mphist .hgaps{width:100%;height:4px;display:block}
.mphist .hsl{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.mphist .hsl .htime{margin-left:0}
.mphist .hcount{color:var(--mut);font-size:11.5px;white-space:nowrap}
.hstat{width:100%;font-size:12px;line-height:1.5}.hstat .hmiss{color:#d62f2f}
.hstat .hdot{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:3px;vertical-align:-1px}
.hlegend em{font-style:normal;color:var(--mut)}.hlegend .nil{opacity:.4}
.leaflet-image-layer.px{image-rendering:pixelated;image-rendering:crisp-edges}
/* a phone: less padding, more room for the weather (the user, 22 October 2026: "padding make it small as phone screen small") */
@media (max-width:760px){aside{padding:10px 8px}main.cards{padding:8px;gap:8px}.card{padding:10px;border-radius:12px}
  .mphist{padding:6px 8px}.row{padding:6px 8px}.grid2 div{padding:5px 7px}}

/* a phone: every row of choices (chips, tabs, segments) on one line that scrolls sideways (the user, 24 October 2026: "make it to 1
   line only") */
@media (max-width:760px){
  .chips,.tabs,.seg{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar,.tabs::-webkit-scrollbar,.seg::-webkit-scrollbar{display:none}
  .chips > *,.tabs > *,.seg > *{flex:none;white-space:nowrap}
  .chips button,.tabs button{font-size:12px;padding:3px 9px}
}