[hidden] { display: none !important; }
/* Map tool layout and components (loaded together with maplibre-gl.css). Sober scientific look: neutral greys, one teal-blue accent. */
.tm-page main.full { max-width: none; padding: 0; }
.tm-page footer.site { margin-top: 0; }
.tm-app { display: grid; grid-template-columns: 410px minmax(0, 1fr); height: calc(100vh - 50px); height: calc(100dvh - 50px); min-height: 560px; background: var(--card); }
.tm-stage { position: relative; order: 2; min-width: 0; background: #c9d3da; }
.tm-map { position: absolute; inset: 0; }
.tm-panel { order: 1; overflow-y: auto; padding: 14px 18px 24px; border-right: 1px solid var(--line); background: var(--card); }
.tm-panel [hidden] { display: none !important; }
.tm-h1 { font-size: 1.3rem; margin: .2rem 0 .4rem; }
.tm-h2 { font-size: 1.05rem; margin: 1.1rem 0 .4rem; }
.tm-panel p, .tm-panel li { max-width: none; }
.tm-links { margin-top: 1.2rem; font-size: .92rem; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--link); padding: 4px 10px; font-size: .92rem; }
.btn-ghost:hover { background: var(--accent-soft); }
.tm-back { margin-bottom: 4px; }

/* region list */
.tm-rlist { display: grid; gap: 4px; }
.tm-ritem { display: grid; grid-template-columns: 14px 1fr; grid-template-areas: "chip name" "chip meta"; column-gap: 10px; align-items: center; text-align: left; width: 100%; padding: 6px 10px; border-color: var(--line); background: #fff; }
.tm-ritem[aria-disabled="true"] { opacity: .5; }
.tm-chip { grid-area: chip; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .35); }
.tm-rname { grid-area: name; font-weight: 600; font-size: .95rem; }
.tm-rmeta { grid-area: meta; font-size: .8rem; color: var(--muted); }

/* map overlays */
.tm-legend { position: absolute; left: 10px; bottom: 50px; z-index: 3; background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; font-size: .78rem; max-width: min(330px, 70%); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.tm-leg-title { font-weight: 650; margin-bottom: 4px; }
.tm-leg-row { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.tm-leg-item { display: flex; align-items: center; gap: 5px; }
.tm-sw { display: inline-block; width: 16px; height: 12px; border: 1px solid rgba(0, 0, 0, .3); border-radius: 2px; }
.tm-sw-gap { background: repeating-linear-gradient(90deg, #4d555c 0 4px, transparent 4px 7px); height: 3px; border: 0; }
.tm-leg-note { margin-top: 5px; color: var(--muted); }
.tm-legend-result .tm-leg-row { display: grid; grid-template-columns: repeat(3, auto); }
.tm-hud { position: absolute; top: 10px; left: 10px; z-index: 4; display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 14px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.tm-hud button { padding: 4px 12px; border-radius: 999px; }
.tm-hud-mw { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tm-hud-n { color: var(--muted); font-size: .85rem; }
.tm-tip { position: absolute; z-index: 5; pointer-events: none; background: rgba(20, 32, 44, .94); color: #fff; padding: 7px 10px; border-radius: 6px; font-size: .8rem; line-height: 1.35; max-width: 240px; }
.tm-tip .k { color: #b9c7d3; }
.tm-tip .warn { color: #ffd68a; }
.tm-toast { position: absolute; z-index: 6; left: 50%; bottom: 40px; transform: translateX(-50%); background: rgba(20, 32, 44, .95); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: .88rem; max-width: 80%; text-align: center; }
.tm-noscript { position: absolute; z-index: 7; top: 10px; left: 10px; right: 10px; background: #fff; padding: 10px; border: 1px solid var(--line); }
.tm-gaplabel { display: none; font-size: 11px; font-style: italic; color: #3e464d; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; white-space: nowrap; pointer-events: none; }
.tm-zoomed .tm-gaplabel { display: block; }
.tm-celllabel { font-size: 12px; font-weight: 700; color: #1b1330; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; pointer-events: none; font-variant-numeric: tabular-nums; }
.tm-pin { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; background: #0c2f45; box-shadow: 0 0 0 1px #0c2f45; pointer-events: none; }
.tm-attrib { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: rgba(255, 255, 255, .86); font-size: 10px; line-height: 1.3; padding: 2px 8px; color: #33414d; }
.tm-attrib a { color: #0b4a6e; }
.tm-stage .maplibregl-ctrl-bottom-left, .tm-resstage .maplibregl-ctrl-bottom-left { bottom: 20px; }

/* tabs, tools, forms */
.tm-tabs { display: flex; gap: 0; margin: 12px 0 8px; border-bottom: 1px solid var(--line); }
.tm-tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; padding: 7px 10px; font-size: .92rem; color: var(--muted); }
.tm-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--fg); font-weight: 650; }
.tm-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 6px 0; }
.tm-tools button { border-radius: 0; margin-left: -1px; padding: 8px 4px; }
.tm-tools button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.tm-tools button:last-child { border-radius: 0 6px 6px 0; }
.tm-tools button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.tm-row { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: flex-end; }
.tm-row label { margin-top: 6px; }
.tm-row input[type=number] { width: 90px; }
.tm-row input[type=range], label input[type=range] { width: 100%; max-width: 240px; display: block; }
.tm-btnrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tm-btnrow button, .tm-btnrow .btn { padding: 6px 10px; font-size: .9rem; }
.tm-patch { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; background: var(--soft); }
.tm-details { margin: 8px 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; }
.tm-details summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.tm-presets { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 4px; }
.tm-presets button { width: 100%; text-align: left; }
.tm-details table input { width: 80px; padding: 3px 5px; }
.tm-readout { margin: 14px 0 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.tm-mw { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tm-dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; margin: 8px 0; }
.tm-dl dt { font-size: .76rem; color: var(--muted); margin: 0; }
.tm-dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-dl > div { min-width: 0; }
.tm-note { padding: 6px 10px; border-radius: 6px; font-size: .86rem; margin: 6px 0; border: 1px solid transparent; }
.tm-note:empty { display: none; }
.tm-note.err { background: var(--errbg); border-color: var(--errline); color: var(--err); }
.tm-note.warn { background: var(--warnbg); border-color: var(--warnline); color: var(--warn); }
.tm-note.ok { background: var(--okbg); border-color: var(--okline); color: var(--ok); }
.tm-note.hint { color: var(--muted); padding-left: 0; }
.tm-submit label { max-width: 220px; }
.tm-submit input[type=number] { width: 100px; }
.tm-job { margin-top: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.tm-job-status { font-weight: 650; }
.tm-job-status.done { color: var(--ok); } .tm-job-status.failed { color: var(--err); }
.tm-read { min-height: 2.6em; font-size: .9rem; }
.tm-dls { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; font-size: .9rem; }

/* review dialog */
.tm-dlg { border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; width: min(560px, calc(100vw - 24px)); box-shadow: 0 8px 40px rgba(0, 0, 0, .3); }
.tm-dlg::backdrop { background: rgba(15, 30, 45, .5); }
.tm-warnlist { padding-left: 18px; font-size: .9rem; }

/* tutorial overlay */
.tm-tour { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.tm-spot { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(12, 28, 40, .5), 0 0 0 3px #fff inset; pointer-events: none; }
.tm-tourcard { position: fixed; right: 24px; bottom: 24px; width: min(400px, calc(100vw - 24px)); background: #fff; border-radius: 12px; padding: 14px 18px; box-shadow: 0 6px 30px rgba(0, 0, 0, .35); pointer-events: auto; }
.tm-tourcard p { margin: 6px 0 10px; font-size: .94rem; }
.tm-dots { display: flex; gap: 6px; margin: 6px 0; }
.tm-dots span { width: 8px; height: 8px; border-radius: 50%; background: #c3ccd4; }
.tm-dots span.on { background: var(--accent); }

.tm-about { padding-top: 8px; }

/* phone and narrow windows: map on top (sticky), controls below */
@media (max-width: 900px) {
  .tm-app { display: block; height: auto; min-height: 0; }
  .tm-stage { position: sticky; top: 0; height: 52vh; height: 52svh; min-height: 280px; z-index: 5; }
  .tm-panel { overflow: visible; border-right: 0; padding: 12px 14px 28px; }
  .tm-legend { bottom: 48px; max-width: 80%; padding: 4px 7px; font-size: .66rem; }
  .tm-leg-title { margin-bottom: 2px; }
  .tm-sw { width: 13px; height: 10px; }
  .tm-legend-result .tm-leg-row { grid-template-columns: repeat(3, auto); }
  .tm-tourcard { right: 8px; left: 8px; bottom: 8px; width: auto; }
  .tm-tools button { padding: 11px 2px; }
  .tm-btnrow button, .tm-btnrow .btn { padding: 9px 11px; }
  .tm-tabs button { padding: 9px 7px; font-size: .86rem; }
  .tm-hud { top: 8px; left: 8px; }
  .tm-hud button { padding: 6px 12px; }
  .maplibregl-ctrl-group button { width: 36px; height: 36px; }
}
@media (max-width: 520px) { .tm-leg-note { display: none; } .tm-legend-result .tm-leg-row { gap: 1px 8px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* result page */
.tm-resbox { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; margin: 10px 0 16px; }
.tm-resstage { position: relative; height: min(68vh, 640px); min-height: 360px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #c9d3da; }
.tm-resctl { font-size: .92rem; }
@media (max-width: 760px) { .tm-resbox { grid-template-columns: 1fr; } .tm-resstage { height: 56vh; } }


/* ---- dynamic colour scale, colour bar, view switch, player (tm-view.js) */
.tm-legend-result { max-width: min(380px, 76%); }
.tm-cb { position: relative; margin: 6px 4px 20px; }
.tm-cb-bar { display: block; width: 100%; height: 14px; border: 1px solid rgba(0, 0, 0, .35); image-rendering: auto; }
.tm-cb-ticks { position: relative; height: 16px; }
.tm-cb-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 4px; }
.tm-cb-tick::before { content: ""; position: absolute; left: 50%; top: -1px; height: 5px; border-left: 1px solid #222; }
.tm-leg-unit { color: #222; margin-top: 2px; }
.tm-resctrl { margin: 6px 0 10px; }
.tm-seg { display: grid; grid-template-columns: 1fr; gap: 0; margin: 6px 0; }
.tm-segbtn { border-radius: 0; margin-top: -1px; padding: 7px 10px; text-align: left; font-size: .9rem; }
.tm-segbtn:first-child { border-radius: 6px 6px 0 0; margin-top: 0; }
.tm-segbtn:last-child { border-radius: 0 0 6px 6px; }
.tm-segbtn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.tm-segbtn:disabled { opacity: .5; }
.tm-segbtn[hidden] { display: none; }
.tm-animnote { margin: 4px 0; }
.tm-prog { width: 100%; height: 10px; }
.tm-scale { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px 8px; margin: 8px 0; }
.tm-scale legend { font-size: .82rem; color: var(--muted); padding: 0 4px; }
.tm-scale label.inline { margin-right: 14px; }
.tm-scalerow { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: flex-end; margin: 6px 0; }
.tm-scalerow input { width: 96px; }
.tm-unit { font-weight: 650; padding-bottom: 6px; }
.tm-maxrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0; font-size: .9rem; }
.tm-player { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin: 8px 0; background: var(--soft); }
.tm-playrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0; }
.tm-playrow input[type=range] { flex: 1 1 140px; min-width: 120px; max-width: none; width: auto; }
.tm-playbtn { min-width: 64px; }
.tm-time { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 7.5em; }
.tm-cmp { font-size: .9rem; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--soft); }
.tm-maxpin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; background: #b30000; box-shadow: 0 0 0 1px #3b0a3b; pointer-events: none; }
.tm-hud-anim { display: flex; align-items: center; gap: 4px; font-size: .82rem; margin: 0; color: var(--fg); white-space: nowrap; }
.tm-hud-anim input { width: auto; margin: 0; }
.tm-animopt { margin-top: 8px; display: block; }
.tm-animhint { margin: 2px 0 6px; }
.tm-job .tm-prog { margin: 6px 0; }

/* ---- selected cell card */
.tm-cellcard { border: 1px solid #0b4a9e; border-left-width: 4px; border-radius: var(--radius); padding: 8px 12px; margin: 10px 0; background: #fff; }
.tm-cc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tm-cc-dl { grid-template-columns: repeat(2, 1fr); font-size: .9rem; }
.tm-cc-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin: 6px 0; }
.tm-cc-edit label { margin: 0; }
.tm-cc-edit input[type=number] { width: 92px; }
.tm-cc-edit select { width: auto; min-width: 64px; padding: 6px 8px; }
.tm-cc-edit button { padding: 6px 11px; min-width: 36px; }

/* ---- model domain labels */
.tm-domlabel { background: rgba(255, 255, 255, .9); border: 1px solid #101820; border-radius: 4px; padding: 2px 6px; font-size: 11px; line-height: 1.25; color: #101820;
  pointer-events: none; max-width: 300px; }
.tm-domlabel-sp { background: rgba(39, 50, 61, .88); color: #fff; border-color: #27323d; }
@media (max-width: 900px) {
  .tm-domlabel { font-size: 9.5px; max-width: 190px; padding: 1px 4px; }
  .tm-hud-anim { display: none; }
  .tm-cb-tick { font-size: .64rem; }
}

.tm-painting .maplibregl-canvas-container, .tm-painting .maplibregl-canvas { touch-action: none !important; cursor: crosshair; }