:root{--nav:#162c30;--ink:#173439;--muted:#768485;--line:#e3e9e7;--teal:#23665d;--bg:#f4f6f4;--orange:#bf754d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 "Segoe UI","Microsoft YaHei",sans-serif}button,input,select{font:inherit}a{color:inherit}button,a,input,select,summary{outline-offset:4px}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}.rail{position:fixed;inset:0 auto 0 0;width:214px;background:var(--nav);color:#e5eeea;padding:32px 22px;display:flex;flex-direction:column}.brand{text-decoration:none;display:flex;gap:11px;align-items:center;font-size:15px;letter-spacing:1.7px;font-weight:700;line-height:1.25}.brand-light{display:block;font-size:12px;color:#9bb7af;font-weight:400;letter-spacing:3px;margin-top:4px}.brand-icon{font:38px Georgia,serif;position:relative;color:#dbe9d8}.brand-icon span{position:absolute;background:#da996b;width:7px;height:7px;border-radius:50%;right:-1px;bottom:7px}.workspace-label{color:#88a09b;font-size:11px;letter-spacing:2px;margin:64px 10px 15px}.nav-item{display:flex;gap:13px;padding:12px 14px;margin:4px 0;color:#afc2bd;text-decoration:none;border-radius:7px}.nav-item.active{background:#2b4647;color:white}.nav-item span{width:18px}.rail-bottom{margin-top:auto;color:#c1d1c9;font-size:12px}.rail-bottom p{color:#8aa39e;font-size:11px;margin:7px 0 0 13px}.status-dot{display:inline-block;width:6px;height:6px;background:#86ad80;border-radius:50%;margin-right:6px;vertical-align:middle}main{margin-left:214px;padding:0 42px;max-width:1600px}.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#6b7c7b}.slash{margin:0 15px;color:#bdc6c1}.version{font-size:11px;letter-spacing:1px}.heading{display:flex;align-items:center;justify-content:space-between;padding:33px 0 26px;gap:20px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.2px;color:var(--teal);margin:0 0 10px}h1{font-size:27px;font-weight:600;letter-spacing:.1px;line-height:1.5;margin:0}.subtitle{font-size:12px;color:#71807f;margin:8px 0 0}.local-badge{font-size:11px;white-space:nowrap;border:1px solid #dbe5db;background:#edf3ea;border-radius:20px;padding:6px 12px;color:#597257}.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);background:#fff;border-radius:9px;margin-bottom:24px;padding:18px 0}.summary>div{border-right:1px solid var(--line);padding:0 24px}.summary>div:last-child{border:0}.summary span{display:block;color:var(--muted);font-size:11px}.summary strong{display:block;font-size:26px;line-height:1.3;margin-top:6px;font-weight:500}.workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:24px;align-items:start}.card{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden}.card-header{min-height:72px;border-bottom:1px solid var(--line);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:8px}.card-header>div{display:flex;gap:10px;align-items:center}.section-index{color:var(--orange);font-size:11px;font-family:monospace}h2{font-size:16px;font-weight:600;margin:0}.muted{font-size:10px;color:var(--muted)}form{padding:24px}fieldset{border:0;padding:0;margin:0 0 24px;min-width:0}legend{font-weight:600;font-size:12px;margin-bottom:12px;width:100%}.legend-note{float:right;color:var(--teal);font-size:11px;font-weight:400}.day-picker label{position:relative;cursor:pointer}.day-picker input{position:absolute;width:1px;height:1px;opacity:0}.day-picker input:focus-visible+span{outline:2px solid var(--orange);outline-offset:3px}.field-hint{font-size:10px;color:var(--muted);margin:9px 0 0;line-height:1.8}.region-fields{margin-top:0}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 14px}.field-grid label{font-size:11px;color:#526765}.field-grid label>span{float:right;color:#97a39d}.field-grid input,select{display:block;width:100%;margin-top:6px;padding:9px 11px;border:1px solid #dce4df;border-radius:5px;background:#fff;color:var(--ink);min-width:0;font-size:13px}.field-grid input:focus,select:focus{outline:1px solid var(--teal);border-color:var(--teal)}.day-picker{display:flex;gap:9px}.day-picker label{flex:1}.day-picker span{display:block;text-align:center;border:1px solid #dce4df;border-radius:5px;padding:9px;font-size:15px}.day-picker input:checked+span{color:var(--teal);background:#edf5ef;border-color:var(--teal);font-weight:600}.day-picker small{font-size:10px;margin-left:4px;font-weight:400}.submit-button{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--teal);color:#fff;border:0;padding:13px 18px;border-radius:6px;font-size:13px}.submit-button:hover{background:#194f47}.submit-button>span:last-child{font-size:18px}.text-button{color:var(--teal);border:0;background:none;font-size:11px;padding:3px 0}.task-body{padding:24px}.empty-state{text-align:center;padding:55px 10px 65px}.empty-icon{font-size:48px;color:#9db5aa;font-weight:300;height:82px;width:82px;margin:0 auto 24px;background:#f0f5f0;border-radius:50%;line-height:70px}.empty-state h3{font-size:16px;font-weight:500}.empty-state p{font-size:12px;color:var(--muted);line-height:1.9}.output-tags{display:flex;gap:7px;justify-content:center;margin-top:24px;flex-wrap:wrap}.output-tags span{font-size:10px;color:#728077;border:1px solid #e3e9e2;border-radius:5px;padding:4px 9px}.workflow-note{margin:0 24px 24px;border-top:1px solid var(--line);padding-top:20px}.workflow-note b{font-size:11px;font-weight:500}.workflow-note p{font-size:10px;color:var(--muted);margin:7px 0 0}.job-list{display:flex;flex-direction:column;gap:8px;max-height:310px;overflow-y:auto}.job-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e1e7e1;background:#fff;border-radius:6px;padding:12px;text-align:left;color:var(--ink);width:100%}.job-item.selected{border-color:#94b2a2;background:#f3f8f3}.job-item strong{font-size:12px;font-weight:500;display:block}.job-item small{font-size:10px;color:var(--muted)}.badge{font-size:10px;background:#f1f2ed;color:#7c8173;border-radius:20px;padding:3px 8px;white-space:nowrap}.badge.running{background:#edf3fb;color:#5073a0}.badge.completed{background:#eaf3eb;color:#4c7f59}.badge.failed{background:#fbedeb;color:#ac6558}.job-detail{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}.detail-heading{display:flex;justify-content:space-between;align-items:center}.detail-heading h3{font-size:13px;margin:0}.detail-meta{font-size:11px;color:var(--muted);white-space:pre-line}.progress-heading{display:flex;justify-content:space-between;font-size:11px;margin:20px 0 8px}.progress-track{height:5px;background:#edf1eb;border-radius:5px;overflow:hidden}.progress-track>div{background:var(--teal);height:100%;width:0;transition:width .4s}.downloads{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.download-link{border:1px solid #dfe7de;border-radius:5px;padding:8px 10px;text-decoration:none;font-size:11px;background:#fafcf8;max-width:100%;overflow-wrap:anywhere}.download-link:hover{border-color:var(--teal)}.notice{background:#edf4f0;border:1px solid #d5e3da;border-radius:6px;color:#46645a;padding:12px 14px;font-size:12px;margin-bottom:16px;overflow-wrap:anywhere}.notice.error{background:#fff2ee;border-color:#efd2c5;color:#9d4a37}@media(min-width:1500px){main{padding:0 60px}}@media(max-width:1100px){.rail{width:180px;padding:28px 18px}main{margin-left:180px;padding:0 24px}.workspace{grid-template-columns:1fr}.tasks-card{order:2}.local-badge{display:none}.empty-state{padding:35px 10px}.muted{font-size:10px}}@media(max-width:650px){.rail{position:static;width:auto;height:auto;flex-direction:row;padding:14px 18px;align-items:center;justify-content:space-between}.brand{font-size:12px}.brand-icon{font-size:29px}.brand-light{font-size:9px}.workspace-label,.rail-bottom,.rail .nav-item{display:none}main{margin:0;padding:0 16px}.topbar{height:52px}.version{display:none}.heading{padding:25px 0 20px}h1{font-size:22px}.subtitle{font-size:11px} .summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:18px 0}.summary>div{padding:0 12px}.summary strong{font-size:22px}.card-header{padding:17px}.card-header .muted{display:none}form,.task-body{padding:18px}.field-grid{gap:12px}.day-picker span{padding:8px}.workflow-note{margin:0 18px 20px}.job-item{padding:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
:root { --map-border: #dce5df; }
.task-stop-hint { margin: 0 0 14px; color: #768485; font-size: 11px; line-height: 1.8; }
.job-item { padding: 0 12px; }
.job-select { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 12px 0; border: 0; background: transparent; color: inherit; text-align: left; }
.job-info { min-width: 0; overflow-wrap: anywhere; }
.job-select:focus-visible { border-radius: 3px; }
.stop-button { flex-shrink: 0; padding: 5px 10px; border: 1px solid #dbb8a8; border-radius: 5px; background: #fff8f4; color: #9a5138; font-size: 11px; white-space: nowrap; }
.stop-button:hover:not(:disabled) { border-color: #ad6146; background: #ffede4; }
.stop-button:disabled { opacity: 1; border-color: #e3e7e3; background: #f6f7f5; color: #8a9690; cursor: default; }
.badge.stopping { background: #fff0da; color: #90652f; }
.badge.stopped { background: #f0eeeb; color: #766b60; }
.detail-heading { gap: 12px; flex-wrap: wrap; }
.detail-actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 650px) { .job-item { padding: 0 10px; } .job-select { flex-wrap: wrap; gap: 5px 8px; } }
.map-card { margin-top: 24px; overflow: hidden; }
.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 24px 0; }
.map-toolbar label { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.map-toolbar button, .map-toolbar select { border: 1px solid var(--map-border); border-radius: 6px; padding: 8px 12px; background: white; color: #23665d; cursor: pointer; }
.map-toolbar button:disabled { opacity: .5; cursor: default; }
.map-ass { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border: 1px solid #cfe1db; border-radius: 6px; background: #f1f7f4; color: #23665d; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
#map-status, .map-hint { padding: 0 24px; }
#risk-map { height: 560px; width: 100%; background: #e3eef0; z-index: 0; }
.map-canvas { position: relative; }
.map-reset { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 8px 12px; border: 1px solid #d5dfdc; border-radius: 6px; background: rgba(255,255,255,.96); color: #23665d; font: inherit; font-size: 12px; box-shadow: 0 1px 4px rgba(20,45,40,.18); cursor: pointer; }
.map-reset:hover { border-color: #8ba9a0; background: #f4f8f6; }
.map-reset:focus-visible { outline: 2px solid #23665d; outline-offset: 2px; }
.map-legend { display: flex; gap: 16px; padding: 16px 24px; flex-wrap: wrap; }
.map-legend span { display: flex; align-items: center; gap: 5px; }
.map-legend i { display: inline-block; width: 33px; height: 21px; border: 1px solid #aab5b0; }
@media (max-width: 650px) { #risk-map { height: 420px; } .map-toolbar { gap: 10px; } }

/* Compact task cards and horizontally browsable workflow steps. */
.tasks-card .card-header { min-height: 56px; padding: 14px 18px; }
.tasks-card .task-body { padding: 14px 16px 16px; }
.tasks-card .task-stop-hint { margin-bottom: 9px; font-size: 10px; }
.tasks-card .job-list { max-height: 230px; gap: 6px; }
.tasks-card .job-item { border-radius: 7px; }
.tasks-card .job-select { padding: 8px 0; }
.tasks-card .job-info strong { font-size: 11px; }
.tasks-card .job-info small { font-size: 9px; }
.tasks-card .job-detail { margin-top: 14px; padding-top: 13px; }
.tasks-card .detail-heading h3 { font-size: 12px; }
.tasks-card #detail-region { margin: 7px 0 10px; font-size: 10px; line-height: 1.65; }
.workflow-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 12px 0 6px; }
.workflow-heading strong { font-size: 11px; font-weight: 600; }
.workflow-heading span { color: var(--teal); font-size: 10px; }
.workflow-strip { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 5px 2px 9px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #bdcbc5 #f1f4f2; }
.workflow-strip::-webkit-scrollbar { height: 5px; }
.workflow-strip::-webkit-scrollbar-track { background: #f1f4f2; border-radius: 5px; }
.workflow-strip::-webkit-scrollbar-thumb { background: #bdcbc5; border-radius: 5px; }
.workflow-step { display: grid; flex: 0 0 clamp(108px, 20%, 240px); min-height: 70px; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; column-gap: 7px; padding: 9px 10px; border: 1px solid #e0e7e3; border-radius: 7px; background: #fff; scroll-snap-align: start; }
.workflow-marker { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #f0f3f1; color: #798a83; font-size: 8px; font-weight: 700; }
.workflow-step strong { min-width: 0; overflow-wrap: anywhere; color: #526765; font-size: 10px; font-weight: 500; line-height: 1.4; }
.workflow-step small { grid-column: 2; color: #899692; font-size: 9px; line-height: 1.3; }
.workflow-step.is-complete { border-color: #d4e4d9; background: #f5faf6; }
.workflow-step.is-complete .workflow-marker { background: #dceee2; color: #34724f; font-size: 12px; }
.workflow-step.is-current { border: 1.5px solid #398574; background: #edf7f2; box-shadow: 0 2px 8px rgba(35,102,93,.12); }
.workflow-step.is-current .workflow-marker { background: var(--teal); color: #fff; }
.workflow-step.is-current strong { color: #174c44; font-size: 12px; font-weight: 700; }
.workflow-step.is-current small { color: #23665d; font-weight: 600; }
.workflow-step.is-failed { border-color: #d8927e; background: #fff6f3; }
.workflow-step.is-failed .workflow-marker { background: #b65f4b; color: white; }
.workflow-step.is-stopped, .workflow-step.is-stopping { border-color: #e7d8bd; background: #fffbf3; }
@media (max-width: 650px) {
  .tasks-card .task-body { padding: 12px; }
  .tasks-card .job-list { max-height: 210px; }
  .workflow-step { flex-basis: 116px; }
}

/* Keep the task queue and selected task visible side by side on wide screens. */
.tasks-card .task-body {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1.25fr);
  align-items: start;
  column-gap: 20px;
}
.tasks-card #empty-state,
.tasks-card .task-stop-hint,
.tasks-card #task-action-error { grid-column: 1 / -1; }
.tasks-card #job-list { grid-column: 1; min-width: 0; height: 360px; max-height: 360px; }
.tasks-card #job-list:empty { display: none; }
.tasks-card #job-detail {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 360px;
  overflow: hidden;
  margin: 0;
  padding: 0 0 0 18px;
  border-top: 0;
  border-left: 1px solid var(--line);
}
.tasks-card .task-stop-hint { font-size: 11px; }
.tasks-card .job-info strong { font-size: 13px; }
.tasks-card .job-info small { font-size: 10px; }
.tasks-card .badge { font-size: 11px; }
.tasks-card .stop-button { font-size: 12px; }
.tasks-card .detail-heading h3 { font-size: 14px; }
.tasks-card #detail-region { font-size: 12px; }
.tasks-card .workflow-heading strong { font-size: 13px; }
.tasks-card .workflow-heading span { font-size: 12px; }
.tasks-card .workflow-step strong { font-size: 12px; }
.tasks-card .workflow-step.is-current strong { font-size: 14px; }
.tasks-card .workflow-step small { font-size: 10px; }
.tasks-card #detail-region { margin: 4px 0 8px; line-height: 1.5; flex: 0 0 auto; }
.tasks-card .detail-heading,
.tasks-card .workflow-heading,
.tasks-card #job-error,
.tasks-card #job-stop-notice,
.tasks-card .downloads { flex: 0 0 auto; }
.tasks-card .workflow-heading { margin: 6px 0 4px; }
.tasks-card .downloads { gap: 6px; margin-top: 8px; }
.tasks-card .download-link { padding: 6px 8px; font-size: 12px; }
@media (max-width: 900px) {
  .tasks-card .task-body { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .tasks-card #job-list,
  .tasks-card #job-detail { grid-column: 1; }
  .tasks-card #job-list { height: auto; max-height: 230px; }
  .tasks-card #job-detail {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
    margin-top: 14px;
    padding: 13px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

/* Browse workflow stages vertically; keep a few compact stages in view. */
.tasks-card .workflow-strip {
  flex-direction: column;
  gap: 7px;
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 8px 4px 2px;
  margin: 0;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #bdcbc5 #f1f4f2;
}
.tasks-card .workflow-strip::-webkit-scrollbar { width: 6px; height: auto; }
.tasks-card .workflow-strip::-webkit-scrollbar-track { background: #f1f4f2; border-radius: 6px; }
.tasks-card .workflow-strip::-webkit-scrollbar-thumb { background: #bdcbc5; border-radius: 6px; }
.tasks-card .workflow-step {
  display: grid;
  flex: 0 0 auto;
  width: 100%;
  min-height: 42px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  column-gap: 9px;
  padding: 7px 10px;
  scroll-snap-align: start;
}
.tasks-card .workflow-step small {
  grid-column: 3;
  justify-self: end;
  font-size: 11px;
}
@media (max-width: 900px) {
  .tasks-card .workflow-strip { flex: none; max-height: 220px; }
}

.map-canvas {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 78px;
  grid-template-rows: 26px auto 26px;
  grid-template-areas: ". longitude-top ." "latitude-left plot latitude-right" ". longitude-bottom .";
  align-items: stretch;
  min-width: 0;
}
.map-plot { grid-area: plot; position: relative; height: clamp(380px, 55vh, 560px); min-width: 0; overflow: hidden; }
.dashboard-grid .map-plot #risk-map { width: 100%; height: 100%; min-height: 0; }
.coordinate-axis { position: relative; min-width: 0; }
.axis-horizontal { height: 26px; }
.axis-top { grid-area: longitude-top; border-bottom: 1px solid var(--map-border); }
.axis-bottom { grid-area: longitude-bottom; border-top: 1px solid var(--map-border); }
.axis-vertical { width: 78px; }
.axis-left { grid-area: latitude-left; border-right: 1px solid var(--map-border); }
.axis-right { grid-area: latitude-right; border-left: 1px solid var(--map-border); }
.coordinate-tick {
  position: absolute;
  padding: 1px 3px;
  color: #314d4b;
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
}
.axis-horizontal .coordinate-tick { top: 50%; transform: translate(-50%, -50%); }
.axis-left .coordinate-tick { right: 6px; transform: translateY(-50%); text-align: right; }
.axis-right .coordinate-tick { left: 6px; transform: translateY(-50%); text-align: left; }
.map-reset { top: 12px; z-index: 4; }
.map-selection { position: absolute; z-index: 3; border: 2px solid #ec5c62; background: rgba(236, 92, 98, .14); box-shadow: 0 0 0 1px rgba(255,255,255,.75); pointer-events: none; }
.map-selection-cancel { position: absolute; top: 2px; right: 2px; display: grid; width: 25px; height: 25px; place-items: center; padding: 0; border: 1px solid #d84b52; border-radius: 50%; background: rgba(255,255,255,.96); color: #c83e46; font-size: 19px; font-weight: 600; line-height: 1; box-shadow: 0 1px 4px rgba(24,44,42,.24); cursor: pointer; pointer-events: auto; }
.map-selection-cancel:hover { background: #fff1f1; color: #a92e36; }
.map-selection-area { position: absolute; top: 4px; left: 4px; max-width: calc(100% - 38px); padding: 3px 6px; border-radius: 3px; background: rgba(255,255,255,.95); color: #963b40; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; box-shadow: 0 1px 3px rgba(24,44,42,.12); }
.map-selection-cancel:focus-visible { outline: 2px solid #a92e36; outline-offset: 2px; }
@media (max-width: 650px) {
  .map-canvas { grid-template-columns: 68px minmax(0, 1fr) 68px; grid-template-rows: 24px auto 24px; }
  .map-plot { height: 420px; }
  .axis-horizontal { height: 24px; }
  .axis-vertical { width: 68px; }
  .coordinate-tick { padding: 1px 2px; font-size: 9px; }
}

/* Reclaim horizontal space for the analysis and risk map panels. */
@media (min-width: 651px) {
  .rail { width: 180px; padding-left: 18px; padding-right: 18px; }
  main { margin-left: 180px; padding-left: 28px; padding-right: 28px; }
  .workspace { gap: 20px; }
}
@media (min-width: 651px) and (max-width: 1100px) {
  main { padding-left: 18px; padding-right: 18px; }
}
@media (min-width: 1500px) {
  main { padding-left: 36px; padding-right: 36px; }
}