/* OpenWorldEngineer: plume dispersion forecast (artifacts-plume.html, assets/art/plume.js). Builds on styles.css
   (tokens, .card, .seg, .select, .btn, .note, .tip); adds only pl- classes.
   Concentration is one sequential blue ramp (light to dark in light mode, dark to light in dark mode; steps from the
   reference palette, validated as an ordinal ramp against the sheet). The grader's "within x1.2" is an ink ring, not a
   colour. The terrain is a neutral hillshade with 50 m contours. The accent is only focus and the selected receptor. */

.pl {
  container-type: inline-size;
  --pl-c0: #86B6EF; --pl-c1: #5598E7; --pl-c2: #2A78D6; --pl-c3: #1C5CAB; --pl-c4: #0D366B;
  --pl-edge: rgba(21, 23, 26, 0.62);     /* outline of every receptor dot */
  --pl-quiet: #8A9098;                   /* hollow dot: under 0.1 ug/m3 */
  --pl-hit: var(--ink);                  /* within x1.2 ring */
  --pl-band: rgba(21, 23, 26, 0.11);     /* truth x/÷1.2 band in the hour chart */
  --pl-truth: #8A9098;
  --pl-night: rgba(21, 23, 26, 0.045);
  --pl-cell-0: #F2F3F5;                  /* matrix cell under 0.1 */
  --pl-t-lit: #FFFFFF; --pl-t-flat: #F3F4F6; --pl-t-dark: #A3A9B1;
  --pl-ct: rgba(21, 23, 26, 0.10); --pl-ct-i: rgba(21, 23, 26, 0.24);
  --pl-halo: rgba(255, 255, 255, 0.86);
  display: grid; gap: 16px; min-width: 0; color: var(--ink); font-size: var(--fs-ui);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pl {
    --pl-c0: #184F95; --pl-c1: #256ABF; --pl-c2: #3987E5; --pl-c3: #86B6EF; --pl-c4: #CDE2FB;
    --pl-edge: rgba(242, 243, 245, 0.55); --pl-quiet: #7A8089; --pl-band: rgba(242, 243, 245, 0.13); --pl-truth: #8B9098;
    --pl-night: rgba(242, 243, 245, 0.045); --pl-cell-0: #222428;
    --pl-t-lit: #44484E; --pl-t-flat: #26282C; --pl-t-dark: #0B0C0D;
    --pl-ct: rgba(242, 243, 245, 0.08); --pl-ct-i: rgba(242, 243, 245, 0.2); --pl-halo: rgba(24, 25, 28, 0.86);
  }
}
:root[data-theme="dark"] .pl {
  --pl-c0: #184F95; --pl-c1: #256ABF; --pl-c2: #3987E5; --pl-c3: #86B6EF; --pl-c4: #CDE2FB;
  --pl-edge: rgba(242, 243, 245, 0.55); --pl-quiet: #7A8089; --pl-band: rgba(242, 243, 245, 0.13); --pl-truth: #8B9098;
  --pl-night: rgba(242, 243, 245, 0.045); --pl-cell-0: #222428;
  --pl-t-lit: #44484E; --pl-t-flat: #26282C; --pl-t-dark: #0B0C0D;
  --pl-ct: rgba(242, 243, 245, 0.08); --pl-ct-i: rgba(242, 243, 245, 0.2); --pl-halo: rgba(24, 25, 28, 0.86);
}

.pl-head p { max-width: 78ch; }
.pl-quiet-msg { margin: 0; padding: 18px 0; color: var(--muted); }
.pl-note { margin: 0; max-width: 84ch; }

/* controls */
.pl-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.pl-pick label { font-size: var(--fs-small); color: var(--muted); }
.pl-pick .select { min-width: 0; max-width: 100%; }
.pl-field { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }

/* cards */
.pl-card { position: relative; padding: 16px; min-width: 0; }
.pl-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.pl-title { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.02em; }
.pl-h { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; }
.pl-link { font-size: var(--fs-small); white-space: nowrap; }
.pl-sum { margin: 6px 0 0; color: var(--ink-2); line-height: 1.5; max-width: 84ch; }
.pl-sum b { font-weight: 640; color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-sub { margin: 4px 0 0; max-width: 84ch; }

/* hour row */
.pl-hour { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; margin-top: 14px; }
.pl-play { min-width: 74px; justify-content: center; }
.pl-range { width: 100%; min-width: 0; margin: 0; accent-color: var(--ink); }
.pl-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 0; }
.pl-hinfo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-hinfo b { color: var(--ink); font-weight: 650; }
.pl-tag { display: inline-block; padding: 0 7px; border-radius: 0; background: var(--hover); border: 1px solid var(--rule); color: var(--ink-2); font-size: 0.75rem; line-height: 1.5; }

/* maps */
.pl-maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 12px; }
.pl-fig { margin: 0; min-width: 0; }
.pl-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 6px; font-size: 0.8125rem; }
.pl-cap b { font-weight: 650; color: var(--ink); }
.pl-cap span { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.pl-map { position: relative; aspect-ratio: 5 / 3; border-radius: 0; overflow: hidden; background: var(--pl-t-flat); box-shadow: inset 0 0 0 1px var(--rule); }
.pl-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pl-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; cursor: crosshair; }
.pl-map svg:focus { outline: none; }
.pl-map:has(svg:focus-visible) { box-shadow: inset 0 0 0 1px var(--rule), 0 0 0 2px var(--accent); }
.pl-r { stroke: var(--pl-edge); stroke-width: 1; }
.pl-r.is-q { fill: var(--pl-t-lit); fill-opacity: 0.75; stroke: var(--pl-quiet); stroke-width: 1.25; }
.pl-hit { fill: none; stroke: var(--pl-hit); stroke-width: 1.75; }
.pl-sel { fill: none; stroke: var(--accent); stroke-width: 2; }
.pl-lab { font-size: 11px; font-weight: 650; fill: var(--ink); paint-order: stroke; stroke: var(--pl-halo); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.pl-stack { fill: var(--ink); stroke: var(--pl-halo); stroke-width: 1.5; }
.pl-tower { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }
.pl-wind-bg { fill: var(--pl-halo); stroke: var(--rule-strong); stroke-width: 1; }
.pl-wind-tick { stroke: var(--muted); stroke-width: 1; }
.pl-wind-n { font-size: 9px; font-weight: 650; fill: var(--muted); text-anchor: middle; }
.pl-w10 { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.pl-w10h { fill: var(--ink); }
.pl-w60 { stroke: var(--ink-2); stroke-width: 1.25; fill: none; stroke-linecap: round; }
.pl-w60h { fill: var(--sheet); stroke: var(--ink-2); stroke-width: 1.25; }
.pl-wind-t { font-size: 9.5px; fill: var(--ink-2); font-family: var(--font-mono); }

/* legend */
.pl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; font-size: 0.75rem; color: var(--muted); }
.pl-lk { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pl-ramp { display: inline-grid; grid-template-columns: auto auto auto; align-items: center; gap: 0 8px; }
.pl-ramp-bar { display: block; width: 150px; height: 10px; border-radius: 0; }
.pl-ramp-t { position: relative; grid-column: 2; width: 150px; height: 13px; font-family: var(--font-mono); font-size: 10px; }
.pl-ramp-t span { position: absolute; top: 1px; transform: translateX(-50%); white-space: nowrap; }
.pl-ramp-t span:first-child { transform: none; }
.pl-ramp-t span:last-child { transform: translateX(-100%); }
.pl-ramp-u { grid-column: 3; grid-row: 1; }
.pl-sw { display: inline-block; box-sizing: border-box; flex: none; }
.pl-sw.q { width: 11px; height: 11px; border-radius: 50%; border: 1.25px solid var(--pl-quiet); }
.pl-sw.hit { width: 15px; height: 15px; border-radius: 50%; border: 1.75px solid var(--pl-hit); background: radial-gradient(circle, var(--pl-c2) 0 4.5px, transparent 5px); }
.pl-sw.stack { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--ink); }
.pl-sw.tower { width: 9px; height: 9px; border: 1.5px solid var(--ink); background: var(--sheet); }
.pl-sw.band { width: 16px; height: 10px; border-radius: 0; background: var(--pl-band); border-top: 1.5px solid var(--pl-truth); }
.pl-sw.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.pl-sw.odot { width: 9px; height: 9px; border-radius: 50%; border: 1.75px solid var(--ink); background: var(--sheet); }
.pl-sw.night { width: 14px; height: 10px; border-radius: 0; background: var(--hover); border: 1px solid var(--rule); }
.pl-sw.ct { width: 16px; height: 0; border-top: 1px solid var(--pl-ct-i); }

/* receptor chart */
.pl-chart { position: relative; margin-top: 10px; min-width: 0; }
.pl-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pl-chart svg:focus { outline: none; }
.pl-chart svg:focus-visible .pl-c-focus { stroke: var(--accent); }
.pl-c-focus { fill: none; stroke: transparent; stroke-width: 2; }
.pl-c-grid { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.pl-c-axis { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.pl-c-t { fill: var(--muted); font-size: 11px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pl-c-night { fill: var(--pl-night); }
.pl-c-band { fill: var(--pl-band); }
.pl-c-truth { fill: none; stroke: var(--pl-truth); stroke-width: 1.5; stroke-linejoin: round; }
.pl-c-att { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.pl-c-dot { fill: var(--ink); stroke: var(--sheet); stroke-width: 1.5; }
.pl-c-odot { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }
.pl-c-now { fill: var(--hover); }
.pl-c-nowl { stroke: var(--accent); stroke-width: 1.5; stroke-opacity: 0.7; }
.pl-c-col { fill: transparent; cursor: pointer; }
.pl-c-wind { stroke: var(--ink-2); stroke-width: 1.25; fill: none; stroke-linecap: round; }
.pl-c-windh { fill: var(--ink-2); }
.pl-c-lab { font-size: 11px; fill: var(--muted); }
.pl-c-lab.is-ink { fill: var(--ink); font-weight: 600; }

/* matrices */
.pl-mx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 12px; }
.pl-mx-fig { margin: 0; min-width: 0; }
.pl-mx-fig svg { display: block; width: 100%; height: auto; overflow: visible; cursor: pointer; }
.pl-mx-fig svg:focus { outline: none; }
.pl-mx-fig svg:focus-visible .pl-m-frame { stroke: var(--accent); stroke-width: 2; }
.pl-m-frame { fill: none; stroke: transparent; }
.pl-m-q { fill: var(--pl-cell-0); }
.pl-m-dot { pointer-events: none; }
.pl-m-row, .pl-m-colsel { fill: none; stroke: var(--ink); stroke-width: 1.25; pointer-events: none; shape-rendering: crispEdges; }
.pl-m-colsel { stroke: var(--accent); stroke-width: 1.5; }
.pl-m-t { fill: var(--muted); font-size: 9.5px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pl-m-t.is-sel { fill: var(--ink); font-weight: 700; }

/* attempts list */
.pl-atts { display: grid; gap: 2px; margin-top: 10px; }
.pl-a-head, .pl-a {
  display: grid; grid-template-columns: minmax(0, 11rem) 6.5rem 4.5rem minmax(0, 1fr) 5.5rem; align-items: center; gap: 10px;
}
.pl-a-head { padding: 0 8px 4px; font-size: 0.75rem; color: var(--muted); border-bottom: 1px solid var(--rule-strong); }
.pl-a-head .r, .pl-a .r { text-align: right; }
.pl-a {
  width: 100%; min-height: 34px; padding: 4px 8px; margin: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-2); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
}
.pl-a:hover { background: var(--hover); color: var(--ink); }
.pl-a[aria-checked="true"] { background: var(--hover); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.pl-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pl-a-n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-a-n.is-med { font-weight: 450; color: var(--muted); }
.pl-a-med { display: none; }
.pl-a-r { font-family: var(--font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.pl-a-r b { color: var(--ink); font-weight: 600; }
.pl-a-bar { position: relative; height: 12px; border-radius: 0; background: var(--hover); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.pl-a-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0; background: var(--pl-truth); }
.pl-a[aria-checked="true"] .pl-a-bar i { background: var(--ink-2); }
.pl-a-w { display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem; align-items: center; gap: 8px; min-width: 0; }

@container (max-width: 760px) {
  .pl-mx { grid-template-columns: minmax(0, 1fr); }
  .pl-a-head, .pl-a { grid-template-columns: minmax(0, 1fr) 4.2rem minmax(0, 1fr) 3.4rem; }
  .pl-a-head .pl-a-role, .pl-a .pl-a-role { display: none; }
  .pl-a-med { display: inline; }
}
@container (max-width: 640px) {
  .pl-maps { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 420px) {
  .pl-card { padding: 12px; }
  .pl-pick .pl-field { flex: 1 1 100%; }
  .pl-pick .select { flex: 1; }
  .pl-pick .seg { display: flex; flex: 1; }
  .pl-pick .seg button { flex: 1; padding-inline: 6px; }
  .pl-a-head, .pl-a { grid-template-columns: minmax(0, 1fr) 3.2rem 4.4rem 3rem; gap: 6px; padding-left: 6px; padding-right: 6px; }
  .pl-a-w { grid-template-columns: minmax(0, 1fr); }
  .pl-a-w .pl-a-bar { display: none; }
  .pl-a-w .pl-a-r { text-align: right; }
  .pl-a-wh { text-align: right; }
  .pl-a-long { display: none; }
  .pl-ramp-bar, .pl-ramp-t { width: 120px; }
}