/* OpenWorldEngineer: Sentinel-2 gap filling (artifacts-sentinel2.html, assets/art/sentinel2.js). Builds on styles.css
   (tokens, .card, .seg, .note); adds only s2- classes.

   Colour: NDVI error is diverging (model minus truth): blue where the model is too low, orange-red where it is too
   high, grey within ±0.02, the same steps as the CAD deviation map. Uncertainty (80% half-width) is one violet hue,
   light to dark (dark to light in dark mode). Hatching (135°) marks pixels with no clear view. */

.s2 {
  container-type: inline-size;
  --s2-err-mid: #CACCD0;
  --s2-err-neg-1: #72AAE9; --s2-err-neg-2: #4687D8; --s2-err-neg-3: #245BAB;
  --s2-err-pos-1: #EF9369; --s2-err-pos-2: #E25C26; --s2-err-pos-3: #AF2E13;
  --s2-unc-0: #F1ECFA; --s2-unc-1: #C4AEEB; --s2-unc-2: #8A5FD0; --s2-unc-3: #4A2789;
  --s2-hatch-bg: var(--hover); --s2-hatch-fg: var(--rule-strong);
  --s2-hatch: repeating-linear-gradient(135deg, var(--s2-hatch-bg) 0 4px, var(--s2-hatch-fg) 4px 5px);
  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"]) .s2 {
    --s2-err-mid: #5E6165;
    --s2-err-neg-1: #5185C7; --s2-err-neg-2: #67A5EA; --s2-err-neg-3: #9ECDF9;
    --s2-err-pos-1: #C46446; --s2-err-pos-2: #F5793A; --s2-err-pos-3: #FFB578;
    --s2-unc-0: #231C33; --s2-unc-1: #4D3A7E; --s2-unc-2: #8B67D4; --s2-unc-3: #D6C6FA;
  }
}
:root[data-theme="dark"] .s2 {
  --s2-err-mid: #5E6165;
  --s2-err-neg-1: #5185C7; --s2-err-neg-2: #67A5EA; --s2-err-neg-3: #9ECDF9;
  --s2-err-pos-1: #C46446; --s2-err-pos-2: #F5793A; --s2-err-pos-3: #FFB578;
  --s2-unc-0: #231C33; --s2-unc-1: #4D3A7E; --s2-unc-2: #8B67D4; --s2-unc-3: #D6C6FA;
}
.s2-head p { max-width: 74ch; }
.s2.is-loading .s2-card { opacity: 0.6; }

.s2-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
.s2-field { display: grid; gap: 4px; min-width: 0; }
.s2-field-k { font-size: 0.75rem; font-weight: 600; color: var(--muted); }

.s2-card { display: grid; gap: 12px; min-width: 0; padding: 14px 16px 16px; }
.s2-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
.s2-h { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 640; line-height: 1.3; }
.s2-sub, .s2-key { font-size: var(--fs-small); color: var(--muted); }
.s2-key { display: inline-flex; align-items: center; gap: 7px; }
.s2-sw-hatch { display: inline-block; width: 16px; height: 12px; border-radius: 0; background: var(--s2-hatch); box-shadow: inset 0 0 0 1px var(--rule); }
.s2-note { margin: 0; }
.s2-status:empty { display: none; }

/* the 12 dates */
.s2-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px 6px; }
.s2-date { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.s2-date { cursor: pointer; border-radius: 0; }
.s2-thumb { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 0; background: var(--s2-hatch); box-shadow: inset 0 0 0 1px var(--rule); }
.s2-thumb canvas, .s2-pan canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.s2-date-l { display: grid; font-size: 0.75rem; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s2-date-w { font-size: 0.6875rem; font-weight: 600; color: var(--accent-ink); }
button.s2-date .s2-thumb { box-shadow: inset 0 0 0 1px var(--rule), 0 0 0 1px var(--rule-strong); }
button.s2-date:hover .s2-thumb { box-shadow: 0 0 0 2px var(--rule-strong); }
button.s2-date.is-on .s2-thumb { box-shadow: 0 0 0 2px var(--accent); }
button.s2-date.is-on .s2-date-l > span:first-child { color: var(--ink); font-weight: 600; }
button.s2-date:focus-visible { outline-offset: 3px; }

/* truth and models for the selected date: a column each, rows aligned by subgrid */
/* --s2-cols (sentinel2.js): truth + up to 7 models a band; with more models (14 on the hidden tiles) the columns wrap
   into a second band of the same width, under a rule */
.s2-grid { display: grid; grid-template-columns: repeat(var(--s2-cols, 8), minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto; grid-auto-rows: auto; gap: 8px 10px; }
.s2-col.is-band2 .s2-col-head { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.s2-col { display: grid; grid-row: span 5; grid-template-rows: subgrid; min-width: 0; }
.s2-col-head { display: grid; gap: 2px; align-content: end; min-width: 0; }
.s2-col-name { font-size: 0.8125rem; font-weight: 640; line-height: 1.25; color: var(--ink); }
.s2-pick { justify-self: start; padding: 0 0 3px; border: 0; background: none; text-align: left; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; }
.s2-pick:hover { box-shadow: inset 0 -2px 0 var(--rule-strong); }
.s2-pick[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
.s2-col-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.s2-traj { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-2); }
.s2-dot { color: var(--rule-strong); }
.s2-cell { min-width: 0; }
.s2-pan { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 0; background: var(--s2-hatch); box-shadow: inset 0 0 0 1px var(--rule); cursor: crosshair; }
.s2-pan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.s2-mark {
  position: absolute; width: 11px; height: 11px; transform: translate(-50%, -50%); pointer-events: none;
  border: 2px solid #FFFFFF; border-radius: 0; box-shadow: 0 0 0 1px rgba(11, 12, 14, 0.8), inset 0 0 0 1px rgba(11, 12, 14, 0.8);
}
.s2-col-foot { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 0.75rem; color: var(--muted); min-width: 0; }
.s2-stat b { font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.s2-stat.is-none { font-style: normal; }
.s2-cell-legend { display: grid; align-content: center; }
.s2-ramp { display: grid; gap: 3px; min-width: 0; }
.s2-ramp-h { font-size: 0.75rem; font-weight: 640; color: var(--ink-2); }
.s2-ramp-bar { display: block; height: 10px; border-radius: 0; }
.s2-ramp-t { display: flex; justify-content: space-between; gap: 4px; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s2-ramp-n { font-size: 0.6875rem; line-height: 1.3; color: var(--muted); }

/* the pixel chart */
.s2-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.75rem; color: var(--ink-2); }
.s2-lk { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.s2-lk i { display: inline-block; box-sizing: border-box; }
.s2-lk-obs { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.s2-lk-wh { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sheet); }
.s2-lk-sel { width: 16px; height: 10px; border-radius: 0; background: linear-gradient(transparent 4px, var(--accent) 4px 6px, transparent 6px), color-mix(in srgb, var(--accent) 16%, transparent); }
.s2-lk-oth { width: 16px; height: 2px; background: var(--line-on); opacity: 0.7; }
.s2-chart { min-width: 0; }
.s2-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.s2-c-grid { stroke: var(--rule); stroke-width: 1; }
.s2-c-zero { stroke: var(--rule-strong); stroke-width: 1; }
.s2-c-tick { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.s2-c-tick.is-w { fill: var(--accent-ink); font-weight: 600; }
.s2-c-date { fill: var(--hover); }
.s2-c-oth { fill: none; stroke: var(--line-on); stroke-opacity: 0.55; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.s2-c-band { fill: var(--accent); fill-opacity: 0.14; stroke: none; }
.s2-c-sel { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.s2-c-obs { fill: var(--ink); stroke: var(--sheet); stroke-width: 2; }
.s2-c-wh { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; }
.s2-c-cross { stroke: var(--muted); stroke-width: 1; pointer-events: none; }
.s2-details summary { cursor: pointer; font-size: var(--fs-small); color: var(--muted); width: max-content; }
.s2-details summary:hover { color: var(--ink); }
.s2-table-wrap { overflow-x: auto; margin-top: 8px; }
.s2-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.s2-table th { text-align: left; padding: 6px 8px; font-weight: 560; color: var(--muted); font-size: 0.75rem; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.s2-table td { padding: 6px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.s2-table .r { text-align: right; }
.s2-table tr.is-w td:first-child { color: var(--accent-ink); }

/* narrower: dates in two rows; then one row per model with its three panels side by side */
@container (max-width: 760px) {
  .s2-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .s2-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 14px; }
  .s2-col { grid-row: auto; grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; }
  .s2-col-head, .s2-col-foot { grid-column: 1 / -1; }
  .s2-col-head { grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; }
  .s2-col.is-truth .s2-col-foot { display: none; }
  .s2-col.is-band2 .s2-col-head { margin-top: 0; padding-top: 0; border-top: 0; }
}
@container (max-width: 420px) {
  .s2-card { padding: 12px; }
  .s2-controls .s2-field { flex: 1 1 100%; }
  .s2-controls .seg { display: flex; }
  .s2-controls .seg button { flex: 1; padding-inline: 6px; }
  .s2-col-head { grid-template-columns: minmax(0, 1fr); }
}
.s2-haze { margin: -4px 0 0; }
.s2-haze[hidden] { display: none; }

/* in a task page's frame: one model, so truth, fill, error and uncertainty sit in a row (two by two when narrow) */
.embed .s2-grid.s2-one { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; gap: 12px 12px; }
.s2-one-p { display: grid; gap: 6px; align-content: start; min-width: 0; }
.s2-one-p .s2-ramp-h { display: none; }
.s2-one > .s2-col-foot { grid-column: 1 / -1; }
@container (max-width: 760px) { .embed .s2-grid.s2-one { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } }