/* =============================================================================
   ECOSOUND · THE CLIENT PORTAL'S WORKSPACE  (mock D, built 2026-10-09)

   One workspace whose stage changes with the batch. The ink bar, Lab Paper,
   square white cards on hairlines, the journey rail · stage · context aside,
   filled with what the batch needs now: on delivery the rail becomes the ink
   proof strip and the results open as tabs. Reference: design/portal-mocks/
   d-merged; contract: .impeccable/surfaces/portal.md.

   Everything is prefixed `wk-` so it never collides with the older `ecs-`
   portal components it replaced. Tokens only; no new colours.
   ============================================================================= */

.wk-screen {
  --wk-max: 1320px;
  --wk-rail: 216px;
  --wk-aside: 304px;
  --wk-gap: 20px;
  background: var(--ecs-paper);
  color: var(--ecs-text);
  font: 400 15px/1.5 var(--ecs-font-body);
}
.wk-screen a { color: var(--ecs-green-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wk-screen code { font: 500 12px var(--ecs-font-mono); }
.wk-scroll { flex: 1; overflow-y: auto; scrollbar-color: var(--ecs-line-strong) var(--ecs-paper); }
.wk-screen ::selection { background: var(--ecs-green-300); color: var(--ecs-ink); }

/* ---- the ink bar ------------------------------------------------------------- */
.wk-bar { position: relative; z-index: 30; flex: none; height: 64px; background: var(--ecs-forest-900); color: #fff; }
.wk-bar__in { max-width: var(--wk-max); height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 22px; box-sizing: border-box; }
.wk-bar__brand { display: inline-flex; line-height: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.wk-crumbs { display: flex; align-items: center; gap: 9px; min-width: 0; white-space: nowrap; font: 500 14px var(--ecs-font-display); color: var(--ecs-on-dark-4); }
.wk-crumbs button { padding: 6px 2px; border: 0; background: none; font: inherit; color: var(--ecs-on-dark-2); cursor: pointer; }
.wk-crumbs button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.wk-crumbs [aria-current] { color: #fff; }
.wk-crumbs code { color: #fff; font-size: 12.5px; }
.wk-crumbs span[aria-current] { overflow: hidden; text-overflow: ellipsis; }
.wk-bar__sp { flex: 1; }
.wk-bar__org { font-size: 13px; color: var(--ecs-on-dark-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28ch; }
.wk-bar__admin { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.28); font: 500 11px var(--ecs-font-mono); letter-spacing: 0.08em; color: #fff; }
.wk-userwrap { position: relative; }
.wk-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: var(--ecs-green-400); color: var(--ecs-forest-900); font: 700 12px/1 var(--ecs-font-display); cursor: pointer; transition: box-shadow var(--ecs-dur-fast) var(--ecs-ease); }
.wk-avatar:hover, .wk-avatar.is-open { box-shadow: 0 0 0 3px rgba(141, 189, 131, 0.35); }
.wk-bar .ecs-usermenu { top: calc(100% + 12px); right: 0; color: var(--ecs-ink); }
.wk-bar :focus-visible { outline: 2px solid var(--ecs-focus-on-dark); outline-offset: 2px; box-shadow: none; }

/* ---- page and head ---------------------------------------------------------------- */
.wk-page { max-width: var(--wk-max); margin: 0 auto; padding: 28px 24px 96px; box-sizing: border-box; }
.wk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.wk-head__main { min-width: 0; }
.wk-title { margin: 0; font: 700 30px/1.15 var(--ecs-font-display); letter-spacing: -0.01em; color: var(--ecs-ink); text-wrap: balance; }
.wk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; font: 500 12px var(--ecs-font-mono); color: var(--ecs-text-muted); }
.wk-meta code { color: var(--ecs-green-600); }
.wk-status { margin: 10px 0 0; max-width: 72ch; font-size: 15px; color: var(--ecs-text-2); text-wrap: pretty; }
.wk-status b { color: var(--ecs-ink); font-weight: 500; }
.wk-head__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex-shrink: 0; }
.wk-btn-md { min-height: 38px; padding: 0 18px; font-size: 14px; gap: 8px; white-space: nowrap; text-decoration: none; }
.wk-btn-sm { min-height: 34px; padding: 0 13px; font-size: 13px; gap: 7px; white-space: nowrap; text-decoration: none; }
.wk-screen .ecs-btn--primary.wk-btn-md, .wk-screen .ecs-btn--primary.wk-btn-sm { border: 1px solid var(--ecs-forest-500); color: #fff; }
.wk-screen a.ecs-btn--ghost { color: var(--ecs-ink); }

.wk-quiet { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none; cursor: pointer; font: 500 14px var(--ecs-font-display); color: var(--ecs-green-600); text-decoration: none; white-space: nowrap; }
.wk-quiet:hover { color: var(--ecs-forest-600); text-decoration: underline; text-underline-offset: 3px; }
.wk-quiet svg { transition: transform var(--ecs-dur-fast) var(--ecs-ease-out); }
.wk-quiet:hover svg { transform: translateX(2px); }
.wk-quiet:disabled { color: var(--ecs-text-muted); cursor: default; text-decoration: none; }

/* ---- grids ---------------------------------------------------------------------- */
.wk-work { display: grid; gap: var(--wk-gap); align-items: start; }
.wk-work--3 { grid-template-columns: var(--wk-rail) minmax(0, 1fr) var(--wk-aside); }
.wk-work--rail { grid-template-columns: var(--wk-rail) minmax(0, 1fr); }
.wk-work--2 { grid-template-columns: minmax(0, 1fr) var(--wk-aside); }
.wk-stage, .wk-main, .wk-aside, .wk-peek { display: grid; gap: 16px; min-width: 0; align-content: start; }
.wk-grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
/* The overview's two plots share three rows — headline, plot, note — so a
   wrapping title or a longer note cannot shove one baseline off the other. */
.wk-grid2--charts {
  grid-template-rows: auto auto auto;
  row-gap: 0;
  column-gap: 16px;
}
.wk-grid2--charts > .wk-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
}
.wk-grid2--charts > .wk-card > .ecs-chart-scroll {
  display: flex;
  align-items: flex-end;
  min-width: 0;
}
.wk-grid2--charts > .wk-card > .ecs-chart-scroll > .ecs-chart-svg { width: 100%; }
.wk-grid2--wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.wk-grid2--sites { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.wk-grid2--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.wk-grid2--even > div { display: grid; gap: 16px; align-content: start; }

/* ---- cards ------------------------------------------------------------------------ */
.wk-card { min-width: 0; background: var(--ecs-surface); border: 1px solid var(--ecs-line); padding: 22px 24px; }
.wk-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 14px; }
.wk-card__head h2 { margin: 0; font: 700 16px/1.3 var(--ecs-font-display); color: var(--ecs-ink); }
.wk-card__head h2 span { margin-left: 7px; font-weight: 400; color: var(--ecs-text-muted); }
.wk-card__meta { display: flex; align-items: center; gap: 10px; font: 500 12px var(--ecs-font-mono); color: var(--ecs-text-muted); }
.wk-card__meta .ecs-chartdl { margin-left: 2px; }
.wk-card__sub { margin: -6px 0 16px; max-width: 70ch; font-size: 14px; color: var(--ecs-text-muted); }
.wk-card__sub code { color: var(--ecs-ink); }
.wk-card__head .wk-card__sub { margin: 0; }
.wk-note { margin: 12px 0 0; font-size: 13px; color: var(--ecs-text-muted); }
.wk-note a, .wk-note button { font: inherit; }
.wk-empty { margin: 0; padding: 14px 0 2px; font-size: 14px; color: var(--ecs-text-muted); }
.wk-words { font: 400 13px var(--ecs-font-body); color: var(--ecs-text-muted); }
.wk-card .ecs-callout { margin: 0 0 14px; }

/* the summary list: key left, value right */
.wk-sum { display: grid; margin: 0; }
.wk-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; border-top: 1px solid var(--ecs-line-4); }
.wk-sum > div:first-child { border-top: 0; padding-top: 0; }
.wk-sum dt { font-size: 13px; color: var(--ecs-text-muted); }
.wk-sum dd { margin: 0; text-align: right; font: 500 12px var(--ecs-font-mono); color: var(--ecs-ink); overflow-wrap: anywhere; }
.wk-sum dd.is-text { font: 400 13px var(--ecs-font-body); color: var(--ecs-ink); }
.wk-sum--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-top: 14px; }
.wk-sum--wide > div:nth-child(2) { border-top: 0; padding-top: 0; }

/* ---- home: the four groups, as filters ------------------------------------------ */
.wk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; background: var(--ecs-surface); border: 1px solid var(--ecs-line); }
.wk-stat { position: relative; appearance: none; border: 0; border-left: 1px solid var(--ecs-line); background: transparent; padding: 18px 22px; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background var(--ecs-dur-fast) var(--ecs-ease); }
.wk-stat:first-child { border-left: 0; }
.wk-stat b { display: block; margin: 10px 0 6px; font: 700 36px/1 var(--ecs-font-display); letter-spacing: -0.03em; color: var(--ecs-ink); font-variant-numeric: tabular-nums; }
.wk-stat small { display: block; font-size: 13px; color: var(--ecs-text-muted); }
.wk-stat:hover { background: var(--ecs-surface-2); }
.wk-stat.is-attn b { color: var(--ecs-warn-ink); }
.wk-stat.is-on { background: var(--ecs-surface-pick); box-shadow: inset 0 -2px 0 var(--ecs-forest-500); }
.wk-stat.is-on small { color: var(--ecs-green-600); }
.wk-stat:focus-visible { outline-offset: -4px; box-shadow: none; }

.wk-find { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wk-find__n { font: 500 12px var(--ecs-font-mono); color: var(--ecs-text-muted); }
.wk-search { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: min(380px, 100%); min-height: 38px; padding: 0 12px; background: var(--ecs-surface); border: 1px solid var(--ecs-line-field); border-radius: var(--ecs-radius-ctl); color: var(--ecs-text-muted); transition: border-color var(--ecs-dur-fast), box-shadow var(--ecs-dur-fast); }
.wk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px var(--ecs-font-body); color: var(--ecs-ink); }
.wk-search input::placeholder { color: var(--ecs-text-muted); }
.wk-search:focus-within { border-color: var(--ecs-forest-500); box-shadow: 0 0 0 3px var(--ecs-focus-halo); }
.wk-search input:focus-visible { outline: none; box-shadow: none; }
.wk-search--sm { min-height: 34px; width: 100%; }

/* the new-batch form, inline under the head */
.wk-newbatch { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin-bottom: 20px; border-color: var(--ecs-green-400); }
.wk-newbatch > div { flex: 1 1 320px; min-width: 0; }
.wk-newbatch .ecs-label { margin-bottom: 6px; }
.wk-newbatch .ecs-callout { flex-basis: 100%; margin: 0; }
.wk-newbatch__acts { display: flex; gap: 8px; }

/* batch groups and rows */
.wk-rows { margin: 0 -24px -22px; border-top: 1px solid var(--ecs-line); }
.wk-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr) auto; gap: 20px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--ecs-line-4); cursor: pointer; transition: background var(--ecs-dur-fast) var(--ecs-ease); }
.wk-row:last-child { border-bottom: 0; }
.wk-row:hover { background: var(--ecs-surface-2); }
.wk-row.is-attn { background: var(--ecs-warn-bg); }
.wk-row.is-attn:hover { background: var(--ecs-warn-bg-2); }
.wk-row__id { min-width: 0; }
.wk-row__id a { font: 500 15px/1.3 var(--ecs-font-display); color: var(--ecs-ink); text-decoration: none; overflow-wrap: anywhere; }
.wk-row__id a:hover { color: var(--ecs-green-600); text-decoration: underline; }
.wk-row__id code { display: block; margin-top: 4px; font-weight: 400; color: var(--ecs-text-muted); }
.wk-row__mid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: 13.5px; color: var(--ecs-text-muted); }
.wk-row__mid b { font-weight: 500; color: var(--ecs-ink); }
.wk-row__acts { display: flex; justify-content: flex-end; gap: 8px; }

.wk-across__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 16px 0 12px; }
.wk-across__head h2 { margin: 0; font: 700 19px/1.3 var(--ecs-font-display); letter-spacing: -0.01em; color: var(--ecs-ink); }
.wk-across__head p { margin: 0; font: 500 12px var(--ecs-font-mono); color: var(--ecs-text-muted); }

/* the first batch: one sentence, one button, the four steps */
.wk-first { padding: 36px 32px; }
.wk-first h2 { margin: 0 0 8px; font: 700 22px/1.25 var(--ecs-font-display); letter-spacing: -0.015em; color: var(--ecs-ink); }
.wk-first > p { margin: 0 0 20px; max-width: 60ch; font-size: 16px; color: var(--ecs-text-2); }

/* the staff table, kept plain */
.wk-staff { width: 100%; border-collapse: collapse; }
.wk-staff th { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--ecs-line); }
.wk-staff td { padding: 10px 12px; border-bottom: 1px solid var(--ecs-line-4); font-size: 13px; }
.wk-staff tr[data-action] { cursor: pointer; }
.wk-staff tr[data-action]:hover td { background: var(--ecs-surface-2); }

/* ---- aside ----------------------------------------------------------------------- */
.wk-side { background: var(--ecs-surface); border: 1px solid var(--ecs-line); padding: 18px 20px; }
.wk-side__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.wk-side__head h2 { margin: 0; font: 700 14px/1.3 var(--ecs-font-display); color: var(--ecs-ink); }
.wk-side__meta { font: 500 11px var(--ecs-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ecs-text-muted); }
.wk-side__note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ecs-text-muted); }
.wk-side__foot { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--ecs-line-4); font-size: 13px; color: var(--ecs-text-muted); }
.wk-side__foot svg { flex: none; margin-top: 2px; }
.wk-side__foot b { font-weight: 500; color: var(--ecs-ink); overflow-wrap: anywhere; }
.wk-side__link { margin-top: 8px; }
.wk-side .ecs-aside-more { margin-top: 8px; }
.wk-price { margin: 0 0 12px; font: 700 26px/1 var(--ecs-font-display); letter-spacing: -0.02em; color: var(--ecs-ink); font-variant-numeric: tabular-nums; }
.wk-side--dark { background: var(--ecs-forest-900); border-color: var(--ecs-forest-900); color: #fff; }
.wk-side--dark h2 { color: var(--ecs-green-400); }
.wk-side--dark p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--ecs-on-dark-2); }
.wk-side--dark .wk-side__small { margin: 0; font-size: 13px; color: var(--ecs-on-dark-3); }

.wk-mails { list-style: none; margin: 0; padding: 0; }
.wk-mails li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--ecs-line-4); font-size: 13px; }
.wk-mails li:first-child { border-top: 0; padding-top: 0; }
.wk-mails time { font: 500 11px/1.75 var(--ecs-font-mono); color: var(--ecs-text-muted); white-space: nowrap; }
.wk-mails b, .wk-mails button { display: block; padding: 0; border: 0; background: none; text-align: left; font: 500 13px/1.45 var(--ecs-font-body); color: var(--ecs-ink); }
.wk-mails button { cursor: pointer; }
.wk-mails button:hover { color: var(--ecs-green-600); text-decoration: underline; text-underline-offset: 3px; }
.wk-mails span { display: block; margin-top: 1px; line-height: 1.45; color: var(--ecs-text-muted); }

/* ---- the journey rail -------------------------------------------------------- */
.wk-rail { position: sticky; top: 20px; padding: 16px 0 10px; background: var(--ecs-surface); border: 1px solid var(--ecs-line); }
.wk-rail__head { padding: 0 18px 10px; }
.wk-rail__it { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; width: 100%; box-sizing: border-box; padding: 10px 18px; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; }
button.wk-rail__it { cursor: pointer; transition: background var(--ecs-dur-fast) var(--ecs-ease); }
button.wk-rail__it:hover { background: var(--ecs-surface-2); }
.wk-rail__it.is-picked { background: var(--ecs-surface-pick); }
.wk-rail__it:focus-visible { outline-offset: -3px; box-shadow: none; }
.wk-rail__it:not(:last-child)::after { content: ""; position: absolute; left: 29px; top: 38px; bottom: -6px; width: 2px; background: var(--ecs-line); }
.wk-rail__it.is-done::after { background: var(--ecs-forest-500); }
.wk-rail__mk { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px; border-radius: 999px; border: 2px solid var(--ecs-line-field); background: var(--ecs-surface); font: 500 11px var(--ecs-font-mono); color: var(--ecs-text-muted); }
.is-done > .wk-rail__mk { background: var(--ecs-forest-500); border-color: var(--ecs-forest-500); color: #fff; }
.is-now > .wk-rail__mk { border-color: var(--ecs-forest-500); box-shadow: 0 0 0 4px var(--ecs-green-200); }
.wk-rail__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ecs-forest-500); }
.wk-rail__tx { min-width: 0; }
.wk-rail__lb { display: block; font: 500 14px/1.3 var(--ecs-font-display); color: var(--ecs-ink); }
.is-todo .wk-rail__lb { color: var(--ecs-text-muted); }
.wk-rail__sb { display: block; font-size: 13px; line-height: 1.35; color: var(--ecs-text-muted); }
.wk-rail__st { display: block; margin-top: 3px; font: 500 10.5px var(--ecs-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ecs-text-muted); }
.is-done .wk-rail__st { color: var(--ecs-green-600); }
.is-now .wk-rail__st { color: var(--ecs-warn-ink); }
@keyframes wk-pulse { 50% { opacity: 0.35; } }

/* ---- draft: add recordings, upload ------------------------------------------- */
.wk-stage .ecs-dropzone { margin: 0; border-radius: 0; }
.wk-drop-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.wk-drop-alt p { margin: 0; max-width: 52ch; font-size: 13px; color: var(--ecs-text-muted); }
.wk-drop-alt code { color: var(--ecs-ink); }
.wk-next { counter-reset: n; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.wk-next li { counter-increment: n; position: relative; padding: 12px 0 12px 36px; border-top: 1px solid var(--ecs-line-4); font-size: 14px; color: var(--ecs-text-2); }
.wk-next li::before { content: counter(n); position: absolute; left: 0; top: 12px; box-sizing: border-box; width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid var(--ecs-line-strong); font: 500 11px/21px var(--ecs-font-mono); text-align: center; color: var(--ecs-text-muted); }
.wk-next b { font-weight: 500; color: var(--ecs-ink); }

.wk-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; font: 700 60px/1 var(--ecs-font-display); letter-spacing: -0.035em; color: var(--ecs-ink); font-variant-numeric: tabular-nums; }
.wk-big small { font: 500 18px/1.2 var(--ecs-font-display); letter-spacing: -0.01em; color: var(--ecs-text-muted); }
.wk-lead { margin: 14px 0 0; max-width: 54ch; font-size: 16px; line-height: 1.55; color: var(--ecs-text-2); text-wrap: pretty; }
.wk-lead b { font-weight: 500; color: var(--ecs-ink); }
.wk-lead em { font-style: italic; }

/* the upload run, in the stage */
.wk-upcard .ecs-upwrap { margin: 0; }
.wk-upcard .ecs-uprun { padding: 0; border: 0; background: transparent; }

/* the quote's working phases: the bar, then the steps it sums up */
.wk-runbar { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.wk-runbar__track { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.wk-runbar__track i { position: relative; display: block; height: 4px; overflow: hidden; background: var(--ecs-line-3); }
.wk-runbar__track i.is-done { background: var(--ecs-forest-500); }
.wk-runbar__track i.is-now { background-color: var(--ecs-green-200); }
.wk-runbar__track b { position: absolute; inset: 0; background: var(--ecs-forest-500); transform: scaleX(var(--part, 0)); transform-origin: left; transition: transform var(--ecs-dur-base) var(--ecs-ease-out); }
.wk-runbar__step { font: 500 11px/1 var(--ecs-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ecs-text-muted); white-space: nowrap; }
/* Work under way, amount unknown: a block that crosses its segment and comes
   round again. It rests off the segment, so reduced motion, which cuts the
   animation short, leaves the segment's tint alone. */
@keyframes wk-sweep { from { background-position: -67% 0; } to { background-position: 167% 0; } }
.wk-runbar__track i.is-working,
.wk-timeline.is-working .wk-tl.is-now::before { background-image: linear-gradient(var(--wk-sweep), var(--wk-sweep)); background-size: 40% 100%; background-position: -67% 0; background-repeat: no-repeat; animation: wk-sweep 1.5s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.wk-runbar__track i.is-working { --wk-sweep: var(--ecs-green-500); }
.wk-phases { list-style: none; margin: 0; padding: 0; }
.wk-phases li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--ecs-line-4); font: 500 14px/1.35 var(--ecs-font-display); color: var(--ecs-ink); }
.wk-phases li:first-child { border-top: 0; padding-top: 2px; }
.wk-phases li.is-todo { color: var(--ecs-text-muted); }
.wk-phases small { display: block; margin-top: 2px; font: 400 13px/1.45 var(--ecs-font-body); color: var(--ecs-text-muted); }
.wk-phases__ring { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 18px; height: 18px; margin-top: 1px; border-radius: 999px; border: 1.5px solid var(--ecs-line-strong); color: #fff; }
.is-done .wk-phases__ring { background: var(--ecs-forest-500); border-color: var(--ecs-forest-500); }
.is-now .wk-phases__ring { border-color: var(--ecs-forest-500); box-shadow: 0 0 0 4px var(--ecs-green-200); animation: wk-pulse 1.1s ease-in-out infinite; }

/* ---- the quote: the sample, the ledger, accept ---------------------------------- */
.wk-quote__in { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 32px; align-items: start; }
.wk-quote__in--solo { grid-template-columns: minmax(0, 1fr); }
.wk-sample { margin: 0; }
.wk-sample__grid { display: grid; grid-template-columns: repeat(20, 11px); gap: 2px; }
.wk-sample__grid i { display: block; width: 11px; height: 11px; background: var(--ecs-green-200); }
.wk-sample__grid i.is-bat { background: var(--ecs-forest-500); }
.wk-sample figcaption { margin-top: 12px; max-width: 34ch; font-size: 13.5px; color: var(--ecs-text-muted); }
.wk-sample figcaption b { font-weight: 500; color: var(--ecs-ink); }

.wk-led { border-top: 1px solid var(--ecs-line); }
.wk-led__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; box-sizing: border-box; padding: 10px 6px 10px 0; border: 0; border-bottom: 1px solid var(--ecs-line-4); background: transparent; text-align: left; font: inherit; color: inherit; }
.wk-led__op { font: 500 17px/1 var(--ecs-font-mono); color: var(--ecs-text-muted); }
.wk-led__term { min-width: 0; font-size: 14.5px; color: var(--ecs-ink); }
.wk-led__term b { font-weight: 500; }
.wk-led__term small { display: block; margin-top: 2px; font-size: 13px; color: var(--ecs-text-muted); }
.wk-led__amt { text-align: right; white-space: nowrap; font: 500 14px var(--ecs-font-mono); color: var(--ecs-ink); font-variant-numeric: tabular-nums; }
.wk-led__row.is-sub { border-top: 1px solid var(--ecs-ink); }
.wk-led__row.is-sub .wk-led__op { color: var(--ecs-ink); }
.wk-led__row.is-total { padding-top: 12px; border-top: 2px solid var(--ecs-ink); border-bottom: 0; }
.wk-led__row.is-total .wk-led__op { color: var(--ecs-ink); }
.wk-led__row.is-total .wk-led__amt { font-size: 26px; }
.wk-led__opt { cursor: pointer; transition: background var(--ecs-dur-fast); }
.wk-led__opt:hover:not(:disabled) { background: var(--ecs-surface-2); }
.wk-led__opt.is-on { background: var(--ecs-surface-pick); }
.wk-led__opt:not(.is-on) .wk-led__amt { color: var(--ecs-text-muted); }
.wk-led__opt:disabled { cursor: default; }
.wk-led__opt:focus-visible { outline-offset: -2px; box-shadow: none; }
.wk-check { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
.wk-check__box { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 16px; height: 16px; border: 1.5px solid var(--ecs-line-strong); border-radius: var(--ecs-radius-ctl); background: var(--ecs-surface); color: #fff; }
.is-on .wk-check__box { background: var(--ecs-forest-500); border-color: var(--ecs-forest-500); }
.wk-check em { margin-left: 2px; font: 500 12px var(--ecs-font-mono); font-style: normal; color: var(--ecs-text-muted); }
.wk-accept { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.wk-accept .ecs-btn { align-self: flex-start; }
.wk-accept p { margin: 0; max-width: 54ch; font-size: 13px; color: var(--ecs-text-muted); }
.wk-accept .ecs-confirm-chip { align-self: flex-start; }
.wk-pay { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ecs-line); }
.wk-pay__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wk-pay .ecs-label { margin-bottom: 6px; }
.wk-buys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.wk-buys li { display: grid; gap: 10px; font-size: 14px; color: var(--ecs-text-muted); }
.wk-buys svg { color: var(--ecs-forest-500); }
.wk-buys b { font-weight: 500; color: var(--ecs-ink); }
.wk-buys code { color: var(--ecs-ink); }
.wk-list { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ecs-text-muted); }

/* ---- with us: the statement and the timeline ----------------------------------- */
.wk-state h2 { margin: 0 0 10px; font: 700 22px/1.25 var(--ecs-font-display); letter-spacing: -0.015em; color: var(--ecs-ink); text-wrap: balance; }
.wk-state > p { margin: 0 0 24px; max-width: 62ch; font-size: 16px; color: var(--ecs-text-2); text-wrap: pretty; }
.wk-state > p b { font-weight: 500; color: var(--ecs-ink); }
.wk-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.wk-tl { position: relative; padding-top: 12px; border-top: 2px solid var(--ecs-line-2); }
.wk-tl.is-done { border-top-color: var(--ecs-forest-500); }
.wk-tl.is-now { border-top-color: var(--ecs-warn); }
.wk-timeline.is-working .wk-tl.is-now::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 2px; --wk-sweep: var(--ecs-warn-ink); }
.wk-tl time { display: block; margin-bottom: 6px; font: 500 12px var(--ecs-font-mono); color: var(--ecs-text-muted); }
.wk-tl.is-done time { color: var(--ecs-green-600); }
.wk-tl.is-now time { color: var(--ecs-warn-ink); }
.wk-tl b { display: block; margin-bottom: 4px; font: 500 15px/1.3 var(--ecs-font-display); color: var(--ecs-ink); }
.wk-tl.is-todo b { color: var(--ecs-text-muted); }
.wk-tl p { margin: 0; font-size: 13.5px; color: var(--ecs-text-muted); }
.wk-events { list-style: none; margin: 0; padding: 0; }
.wk-events li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--ecs-line-4); font-size: 14px; color: var(--ecs-text-muted); }
.wk-events li:first-child { border-top: 0; padding-top: 0; }
.wk-events time { font: 500 11.5px/1.9 var(--ecs-font-mono); color: var(--ecs-text-muted); }
.wk-events b { font-weight: 500; color: var(--ecs-ink); }
.wk-back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 0; border: 0; background: none; cursor: pointer; font: 500 14px var(--ecs-font-display); color: var(--ecs-green-600); }
.wk-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.wk-paid { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--ecs-surface-pick); border: 1px solid var(--ecs-line-mint); color: var(--ecs-text-mint); font-size: 14px; }
.wk-paid svg { flex: none; color: var(--ecs-forest-500); margin-top: 1px; }
.wk-paid b { display: block; margin-bottom: 2px; font: 500 15px var(--ecs-font-display); color: var(--ecs-ink); }

/* ---- delivered: the proof the rail became --------------------------------------- */
.wk-proof { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px 26px; margin-bottom: 18px; padding: 16px 24px; background: var(--ecs-forest-900); color: #fff; }
.wk-proof__ic { display: inline-flex; color: var(--ecs-green-400); }
.wk-proof__tx b { display: block; font: 500 16px/1.3 var(--ecs-font-display); }
.wk-proof__tx span { display: block; margin-top: 2px; font-size: 14px; color: var(--ecs-on-dark-2); }
.wk-proof__dl { display: flex; gap: 24px; margin: 0; }
.wk-proof__dl dt { font: 500 10.5px var(--ecs-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ecs-on-dark-3); }
.wk-proof__dl dd { display: flex; align-items: center; gap: 4px; margin: 4px 0 0; font: 500 13px var(--ecs-font-mono); color: #fff; }
.wk-copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 26px; height: 26px; margin: -4px 0; padding: 0 4px; border: 0; border-radius: var(--ecs-radius-ctl); background: transparent; font: 500 11px var(--ecs-font-mono); color: var(--ecs-on-dark-2); cursor: pointer; }
.wk-copy:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.wk-copy.is-done { color: var(--ecs-green-400); }
.wk-proof__link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; white-space: nowrap; font: 500 14px var(--ecs-font-display); color: var(--ecs-green-400); cursor: pointer; }
.wk-proof__link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.wk-proof :focus-visible { outline: 2px solid var(--ecs-focus-on-dark); outline-offset: 2px; box-shadow: none; }

/* tabs */
.wk-tabs { display: flex; gap: 2px; margin-bottom: 18px; overflow-x: auto; border-bottom: 1px solid var(--ecs-line-strong); scrollbar-width: none; }
.wk-tabs button { display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: 12px 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; white-space: nowrap; font: 500 14px var(--ecs-font-display); color: var(--ecs-text-muted); cursor: pointer; transition: color var(--ecs-dur-fast), background var(--ecs-dur-fast); }
.wk-tabs button span { font: 500 12px var(--ecs-font-mono); color: var(--ecs-text-muted); }
.wk-tabs button:hover { color: var(--ecs-ink); background: rgba(255, 255, 255, 0.7); }
.wk-tabs button[aria-selected="true"] { color: var(--ecs-ink); border-bottom-color: var(--ecs-forest-500); }
.wk-tabs button[aria-selected="true"] span { color: var(--ecs-green-600); }
.wk-tabs button:focus-visible { outline-offset: -3px; box-shadow: none; }

/* the lens: all bats, or one species, for every figure under it */
.wk-lens { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.wk-lens__sel { display: flex; align-items: center; gap: 10px; font: 500 13px var(--ecs-font-display); color: var(--ecs-text-muted); }
.wk-lens .ecs-select { min-width: 280px; }
.wk-lens__hint { font-size: 13px; color: var(--ecs-text-muted); }
.wk-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--ecs-line-mint); border-radius: var(--ecs-radius-ctl); background: var(--ecs-green-200); font: 500 13px var(--ecs-font-display); color: var(--ecs-green-600); cursor: pointer; }
.wk-chip:hover { background: var(--ecs-green-300); }

/* the summary: headline, findings, composition */
.wk-summary { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); padding: 0; }
.wk-summary__lead { padding: 26px 28px 24px; }
.wk-summary__comp { padding: 22px 24px; border-left: 1px solid var(--ecs-line); }
.wk-findings { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ecs-line); }
.wk-findings button { display: grid; grid-template-columns: 118px minmax(0, 1fr) 16px; gap: 14px; align-items: baseline; width: 100%; padding: 11px 4px 11px 0; border: 0; border-bottom: 1px solid var(--ecs-line-4); background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background var(--ecs-dur-fast); }
.wk-findings button:hover { background: var(--ecs-surface-2); }
.wk-findings .ecs-th { padding-top: 2px; }
.wk-findings__v { font-size: 14.5px; color: var(--ecs-text-2); }
.wk-findings__v b { font-weight: 500; color: var(--ecs-ink); }
.wk-findings__v em { font-style: italic; color: var(--ecs-text-muted); }
.wk-findings__go { align-self: center; display: inline-flex; color: var(--ecs-green-600); opacity: 0; transform: translateX(-3px); transition: opacity var(--ecs-dur-fast), transform var(--ecs-dur-fast) var(--ecs-ease-out); }
.wk-findings button:hover .wk-findings__go, .wk-findings button:focus-visible .wk-findings__go { opacity: 1; transform: none; }
.wk-findings button:focus-visible { outline-offset: -2px; box-shadow: none; }

.wk-comp .ecs-rank__row[role="button"] { margin: 0 -8px; padding-left: 8px; padding-right: 8px; cursor: pointer; transition: background var(--ecs-dur-fast), opacity var(--ecs-dur-fast); }
.wk-comp .ecs-rank__row[role="button"]:hover { background: var(--ecs-surface-2); }
.wk-comp .ecs-rank__row:focus-visible { outline-offset: -2px; box-shadow: none; }
.wk-comp.has-pick .ecs-rank__row:not(.is-pick) { opacity: 0.5; }
.wk-comp.has-pick .ecs-rank__row:not(.is-pick):hover { opacity: 1; }
.wk-comp .ecs-rank__row.is-pick { background: var(--ecs-surface-pick); }
.wk-comp .ecs-rank__row.is-pick .ecs-rank__bar { background: var(--ecs-forest-500); }

/* chart cards */
.wk-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: -4px 0 12px; }
/* Above the overview pair, not inside one card: the page grid already
   separates it from the plots, so the card's negative margin would pull it
   into the summary. */
.wk-main > .wk-tools--pair { margin: 0; }
.wk-tools .ecs-chart-key { margin: 0; }
.wk-tools .ecs-seg { margin-left: auto; }
.wk-card rect.ecs-chart-bar[data-action]:not(.is-zero), .wk-card rect.ecs-chart-seg[data-action] { cursor: pointer; }
.wk-card rect.ecs-chart-bar[data-action]:not(.is-zero):not(.is-max):hover { fill: var(--ecs-forest-500); }
.wk-card rect.ecs-chart-bar.is-max[data-action]:hover { fill: var(--ecs-forest-700); }
.wk-card rect.ecs-chart-seg[data-action]:hover { opacity: 0.8; }
.wk-card .ecs-heat-scroll { max-height: 420px; }
.wk-card .ecs-heat-foot { margin-top: 12px; }

/* species table */
.wk-sp .ecs-td-latin { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 400; }
.wk-sp .ecs-td-name { white-space: nowrap; }
.wk-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.wk-sort:hover, .wk-sort.is-on { color: var(--ecs-ink); }
.wk-sort i { width: 10px; font-style: normal; }
.ecs-td-num .wk-sort { justify-content: flex-end; width: 100%; }
.wk-sp__row { cursor: pointer; }
.wk-sp__row.is-open td, .wk-sp__row.is-open th { background: var(--ecs-surface-pick); }
.wk-sp__row:focus-visible { outline-offset: -2px; box-shadow: none; }
.wk-sp__detail > td { padding: 0 !important; background: var(--ecs-surface-pick); }
.wk-sp__in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; padding: 14px 16px 18px; white-space: normal; }
.wk-sp__in .ecs-th { display: block; margin-bottom: 8px; }
.wk-sp__in.has-rec { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 0.9fr); }
.wk-sp__sites { margin: 0 0 14px; padding: 0; list-style: none; }
.wk-sp__sites li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--ecs-line-mint); font-size: 13.5px; color: var(--ecs-ink); }
.wk-sp__sites b { font: 500 12px var(--ecs-font-mono); }
.wk-sp__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* a real pass, as the reviewer saw it (the landing's spectrogram signature) */
.wk-rec { margin: 0; min-width: 0; }
.wk-rec__plot { position: relative; background: #172419; }
.wk-rec__plot img { display: block; width: 100%; height: auto; }
.wk-rec__over { position: absolute; inset: 0; }
.wk-rec__khz { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255, 255, 255, 0.14); }
.wk-rec__khz span { position: absolute; left: 8px; bottom: 3px; font: 500 11px/1 var(--ecs-font-mono); letter-spacing: 0.04em; color: var(--ecs-on-dark-3); }
.wk-rec__call { position: absolute; box-sizing: border-box; border: 1.5px solid rgba(255, 255, 255, 0.78); }
.wk-rec__call.is-tagged { border-color: #fff; }
.wk-rec__tag { position: absolute; left: -1.5px; bottom: 100%; padding: 3px 6px 2px; background: #fff; color: var(--ecs-ink); font: 500 11px/1.2 var(--ecs-font-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.wk-rec__time { position: absolute; top: 8px; right: 10px; font: 500 11px/1 var(--ecs-font-mono); letter-spacing: 0.04em; color: var(--ecs-on-dark-2); }
.wk-rec__scale { position: absolute; left: 8px; bottom: 8px; padding-top: 5px; border-top: 1.5px solid rgba(255, 255, 255, 0.62); text-align: center; font: 500 11px/1 var(--ecs-font-mono); color: var(--ecs-on-dark-3); }
.wk-rec figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; font-size: 14px; color: var(--ecs-text-2); }
.wk-rec__code { padding: 1px 6px; border: 1px solid var(--ecs-line-strong); font: 500 11px/1.4 var(--ecs-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ecs-ink); }
.wk-recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* sites: the map, the ranking, the picked site */
.wk-map { margin: 0; }
.wk-map .ecs-map { height: 560px; border: 1px solid var(--ecs-line); border-radius: 0; }
.wk-map figcaption { margin-top: 10px; font-size: 13px; color: var(--ecs-text-muted); }
/* The heat key: what the glow's tint counts, and the two ends of its scale. */
.wk-heatkey { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; color: var(--ecs-text-2); }
.wk-heatkey__scale { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--ecs-font-mono); font-variant-numeric: tabular-nums; }
.wk-heatkey__ramp { display: inline-flex; }
.wk-heatkey__ramp i { width: 18px; height: 8px; }
.wk-heatkey__ramp .is-1 { background: var(--ecs-green-350); }
.wk-heatkey__ramp .is-2 { background: var(--ecs-green-400); }
.wk-heatkey__ramp .is-3 { background: var(--ecs-green-500); }
.wk-heatkey__ramp .is-4 { background: var(--ecs-forest-500); }
.wk-heatkey__ramp .is-5 { background: var(--ecs-green-600); }
.wk-mapnone { display: grid; place-items: center; min-height: 240px; padding: 24px; background: var(--ecs-surface-2); border: 1px dashed var(--ecs-line-strong); text-align: center; font-size: 14px; color: var(--ecs-text-muted); }
.wk-sitebox { margin-top: 14px; padding: 14px 16px; background: var(--ecs-surface-pick); border: 1px solid var(--ecs-line-mint); }
.wk-sitebox__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wk-sitebox__head b { font: 700 16px var(--ecs-font-display); color: var(--ecs-ink); }
.wk-sitebox p { margin: 6px 0 0; font-size: 13.5px; color: var(--ecs-text-mint); }
.wk-sitebox p b { font-weight: 500; color: var(--ecs-ink); }
.wk-sitebox .wk-sum + p { margin-top: 10px; }
.wk-sitebox .wk-sum > div { border-color: var(--ecs-line-mint); }
.wk-sitebox .wk-sum dt { color: var(--ecs-text-mint); }
.wk-sitebox .wk-quiet { margin-top: 8px; }
.wk-siterank .ecs-rank__row { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 -10px; padding: 18px 10px 17px; cursor: pointer; transition: background var(--ecs-dur-fast); }
/* Name and its nights on one line, the nights at the row's end so they read
   down the list as a column, then the two bars. */
.wk-siterank .ecs-rank__label { display: flex; align-items: center; line-height: 1.3; }
.wk-siterank .ecs-rank__label em { flex: none; margin-left: auto; padding-left: 14px; font: 400 13px/1.3 var(--ecs-font-body); font-style: normal; color: var(--ecs-text-muted); font-variant-numeric: tabular-nums; }
.wk-siterank__bars { display: grid; grid-template-columns: minmax(0, 1fr) 3.4em; align-items: center; gap: 6px 12px; }
.wk-siterank .ecs-rank__track { height: 10px; }
.wk-siterank .ecs-rank__value { line-height: 1; }
.wk-siterank .ecs-rank__value { text-align: right; }
.wk-siterank .ecs-rank__bar.is-rate { background: var(--ecs-ink); }
/* The key over the list: which bar is which, in the bars' own colours. */
.wk-rankkey { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 4px; font: 400 12.5px/1.2 var(--ecs-font-body); color: var(--ecs-text-muted); }
.wk-rankkey span { display: inline-flex; align-items: center; gap: 7px; }
.wk-rankkey span::before { content: ''; width: 12px; height: 8px; background: var(--ecs-green-500); }
.wk-rankkey .wk-rankkey__rate::before { background: var(--ecs-ink); }
.wk-siterank .ecs-rank__row:hover { background: var(--ecs-surface-2); }
.wk-siterank .ecs-rank__row.is-pick { background: var(--ecs-surface-pick); }
.wk-siterank .ecs-rank__row:focus-visible { outline-offset: -2px; box-shadow: none; }
.wk-siterank .ecs-rank__label { white-space: normal; font-weight: 500; }
.wk-tier { display: inline-flex; align-items: center; gap: 6px; vertical-align: -3px; color: var(--ecs-green-600); font: 500 13px/1 var(--ecs-font-body); }
.wk-tier--offset { color: var(--ecs-warn-ink); }
.wk-tier--label_only, .wk-tier--none { color: var(--ecs-text-muted); }
.wk-tier svg { flex: none; }
.wk-siterank .ecs-rank__label .wk-tier { margin-left: 8px; }
.wk-sitebox__head .wk-tier { vertical-align: 0; }
.wk-pin { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 999px; background: var(--ecs-ink); color: #fff; font: 500 11px/1 var(--ecs-font-mono); vertical-align: 1px; }
.wk-pin.is-empty { background: var(--ecs-line-3); color: var(--ecs-text-muted); }

/* detections */
.wk-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--ecs-line); }
.wk-filter { display: flex; flex-direction: column; gap: 6px; }
.wk-filter .ecs-select { min-width: 150px; }
.wk-filter--q { flex: 1; min-width: 180px; }
.wk-detbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 10px; }
.wk-detbar p { margin: 0; font-size: 13.5px; color: var(--ecs-text-muted); }
.wk-detbar p b { font-weight: 500; color: var(--ecs-ink); }
.wk-detbar > div { display: flex; align-items: center; gap: 12px; }
.wk-more { display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--ecs-line-4); }
.wk-more span { font: 500 12px var(--ecs-font-mono); color: var(--ecs-text-muted); }

/* the batch record */
.wk-journal { margin: 0; padding: 0; list-style: none; }
.wk-journal li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding-bottom: 16px; }
.wk-journal li:last-child { padding-bottom: 0; }
.wk-journal li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; background: var(--ecs-forest-500); }
.wk-journal__mk { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--ecs-forest-500); color: #fff; }
.wk-journal b { margin-right: 8px; font: 500 15px var(--ecs-font-display); color: var(--ecs-ink); }
.wk-journal time { font: 500 12px var(--ecs-font-mono); color: var(--ecs-green-600); }
.wk-journal p { margin: 3px 0 0; font-size: 13.5px; color: var(--ecs-text-muted); }

/* the download, in the aside */
.wk-files ul { margin: 0; padding: 0; list-style: none; }
.wk-files li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 30px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--ecs-line-4); }
.wk-files li:first-child { border-top: 0; padding-top: 0; }
.wk-files li.is-shut { grid-template-columns: 36px minmax(0, 1fr); }
.wk-files li.is-shut > div { opacity: 0.7; }
.wk-files__k { display: inline-flex; align-items: center; justify-content: center; height: 30px; background: var(--ecs-info-bg); font: 500 10px var(--ecs-font-mono); letter-spacing: 0.06em; color: var(--ecs-info-ink); }
.wk-files__k.is-zip { background: var(--ecs-green-200); color: var(--ecs-green-600); }
.wk-files li > div { min-width: 0; }
.wk-files li > div > b { display: block; font: 500 14px/1.3 var(--ecs-font-display); color: var(--ecs-ink); }
.wk-files li > div > span { display: block; margin-top: 1px; font-size: 13px; line-height: 1.4; color: var(--ecs-text-muted); overflow-wrap: anywhere; }
.wk-files li > div > span code { font-size: 11.5px; color: var(--ecs-text-muted); white-space: nowrap; }
.wk-icbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--ecs-line); border-radius: var(--ecs-radius-ctl); background: var(--ecs-surface); color: var(--ecs-ink); cursor: pointer; transition: background var(--ecs-dur-fast), border-color var(--ecs-dur-fast); }
.wk-screen a.wk-icbtn { color: var(--ecs-ink); }
.wk-icbtn:hover { background: var(--ecs-green-200); border-color: var(--ecs-green-500); }
.wk-window { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ecs-line); }
.wk-window > p:first-child { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 13.5px; }
.wk-window > p:first-child b { font-weight: 500; color: var(--ecs-ink); }
.wk-window > p:first-child span { font: 500 12px var(--ecs-font-mono); color: var(--ecs-text-muted); }
.wk-window__bar { position: relative; display: block; height: 3px; background: var(--ecs-line-3); }
.wk-window__bar i { position: absolute; inset: 0 auto 0 0; background: var(--ecs-green-500); }
.wk-window.is-closed > p:first-child b { color: var(--ecs-text-muted); }
.wk-window .ecs-confirm-chip, .wk-window .ecs-btn { margin-top: 10px; }

/* states that are not the data */
.wk-wait { padding: 32px; }
.wk-wait h2 { margin: 0 0 8px; font: 700 20px/1.3 var(--ecs-font-display); color: var(--ecs-ink); }
.wk-wait p { margin: 0 0 16px; max-width: 60ch; font-size: 15px; color: var(--ecs-text-2); }
.wk-skel { display: grid; gap: 16px; }
.wk-skel i { display: block; height: 120px; background: var(--ecs-surface); border: 1px solid var(--ecs-line); animation: wk-pulse 1.4s ease-in-out infinite; }
.wk-skel i:first-child { height: 220px; }

/* ---- responsive -------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .wk-screen { --wk-aside: 284px; --wk-rail: 204px; }
  .wk-summary { grid-template-columns: minmax(0, 1fr); }
  .wk-summary__comp { border-left: 0; border-top: 1px solid var(--ecs-line); }
}
/* The rail becomes a strip of six across the top. */
@media (max-width: 1120px) {
  .wk-work--3 { grid-template-columns: minmax(0, 1fr) var(--wk-aside); }
  .wk-work--rail { grid-template-columns: minmax(0, 1fr); }
  .wk-work--3 .wk-rail, .wk-work--rail .wk-rail { grid-column: 1 / -1; position: static; display: flex; overflow-x: auto; padding: 0; }
  .wk-rail__head { display: none; }
  .wk-rail__it { flex: 1 0 168px; padding: 12px 14px; border-left: 1px solid var(--ecs-line); }
  .wk-rail__it:nth-child(2) { border-left: 0; }
  .wk-rail__it:not(:last-child)::after { display: none; }
  .wk-quote__in { grid-template-columns: minmax(0, 1fr); }
  .wk-sp__in.has-rec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wk-sp__in.has-rec > :first-child { grid-column: 1 / -1; }
  .wk-buys { grid-template-columns: minmax(0, 1fr); }
  .wk-buys li { grid-template-columns: 22px minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .wk-work--3, .wk-work--2 { grid-template-columns: minmax(0, 1fr); }
  .wk-grid2, .wk-grid2--wide, .wk-grid2--sites, .wk-grid2--even { grid-template-columns: minmax(0, 1fr); }
  .wk-grid2--charts { grid-template-rows: none; row-gap: 16px; }
  .wk-grid2--charts > .wk-card { display: block; grid-row: auto; }
  .wk-proof { grid-template-columns: auto minmax(0, 1fr); }
  .wk-proof__dl, .wk-proof__link { grid-column: 2; }
  .wk-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-row { grid-template-columns: minmax(0, 1fr) auto; }
  .wk-row__mid { grid-column: 1 / -1; grid-row: 2; }
  .wk-row__acts { grid-row: 1; grid-column: 2; }
}
@media (max-width: 640px) {
  .wk-page { padding: 20px 16px 72px; }
  .wk-bar__in { gap: 14px; padding: 0 16px; }
  .wk-bar__org { display: none; }
  .wk-crumbs { flex: 1; overflow: hidden; }
  .wk-crumbs > :not(:first-child) { display: none; }
  .wk-bar__sp { display: none; }
  .wk-lens__hint { display: none; }
  .wk-tabs { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .wk-recs { grid-template-columns: minmax(0, 1fr); }
  .wk-head { flex-direction: column; align-items: stretch; gap: 16px; }
  .wk-head__acts .ecs-btn { flex: 1 1 auto; }
  .wk-title { font-size: 22px; }
  .wk-big { font-size: 44px; }
  .wk-stats { grid-template-columns: 1fr 1fr; }
  .wk-stat { padding: 14px 16px; }
  .wk-stat:nth-child(3) { border-left: 0; }
  .wk-stat:nth-child(n + 3) { border-top: 1px solid var(--ecs-line); }
  .wk-stat b { font-size: 30px; }
  .wk-card { padding: 18px 16px; }
  .wk-rows { margin: 0 -16px -18px; }
  .wk-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 16px; }
  .wk-row__mid, .wk-row__acts { grid-column: 1; grid-row: auto; }
  .wk-row__acts { justify-content: flex-start; }
  .wk-find { flex-wrap: wrap; }
  .wk-summary__lead { padding: 20px 16px; }
  .wk-summary__comp { padding: 18px 16px; }
  .wk-findings button { grid-template-columns: minmax(0, 1fr) 16px; gap: 4px 10px; }
  .wk-findings .ecs-th { grid-column: 1 / -1; }
  .wk-findings__go { opacity: 1; transform: none; grid-column: 2; grid-row: 2; }
  .wk-timeline, .wk-next, .wk-sum--wide, .wk-sp__in, .wk-sp__in.has-rec { grid-template-columns: minmax(0, 1fr); }
  .wk-sum--wide > div:nth-child(2) { border-top: 1px solid var(--ecs-line-4); padding-top: 7px; }
  .wk-proof { padding: 14px 16px; gap: 10px 14px; }
  .wk-proof__dl { flex-wrap: wrap; gap: 10px 20px; }
  .wk-lens__sel, .wk-lens .ecs-select-wrap { flex: 1; min-width: 0; }
  .wk-lens .ecs-select { min-width: 0; width: 100%; }
  .wk-filter { flex: 1 1 140px; }
  .wk-filter .ecs-select { min-width: 0; }
  .wk-sample__grid { grid-template-columns: repeat(20, minmax(0, 11px)); }
  .wk-map .ecs-map { height: 300px; }
  .wk-pay__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .wk-screen *, .wk-screen *::before, .wk-screen *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- the folder, the sites, the upload, in the workspace's own make ----------------- */
.wk-stage .ecs-dropzone { display: block; padding: 32px 24px; border: 1.5px dashed var(--ecs-line-strong); border-radius: 0; background: var(--ecs-surface-2); }
.wk-stage .ecs-dropzone:hover, .wk-stage .ecs-dropzone.is-active { border-color: var(--ecs-forest-500); background: var(--ecs-surface-pick); }
.wk-stage .ecs-dropzone__icon { border-radius: 999px; }
.ecs-dropzone__title { margin-bottom: 5px; font: 500 16px var(--ecs-font-display); color: var(--ecs-ink); }
.ecs-dropzone__sub { font-size: 13px; color: var(--ecs-text-muted); }
.ecs-dropzone__browse { font-weight: 500; color: var(--ecs-green-600); }
.ecs-dropzone__mono { margin-top: 9px; font: 400 12px var(--ecs-font-mono); color: var(--ecs-text-muted); }
.wk-stage .ecs-dropzone--sm { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-align: left; }
.ecs-dropzone--sm .ecs-dropzone__icon { width: 40px; height: 40px; margin: 0; flex: none; }
.ecs-dropzone--sm .ecs-dropzone__title { font-size: 14px; margin-bottom: 2px; }
.wk-assign { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.wk-assign .ecs-label { margin: 0; }
.wk-assign .ecs-select-wrap { flex: 0 1 260px; }
.wk-deps { display: flex; flex-direction: column; gap: 8px; }
.wk-card .ecs-projgrid { margin-bottom: 10px; }
.wk-card .ecs-dep { border-radius: 0; }
.wk-card .ecs-callout { border-radius: 0; }
.wk-stage > .ecs-callout { margin: 0; border-radius: 0; }
.wk-siteslist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ecs-line); }
.wk-siteslist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ecs-line-4); font-size: 14px; }
.wk-siteslist b { font-weight: 500; color: var(--ecs-ink); }
.wk-siteslist code { color: var(--ecs-text-muted); }
.wk-up { border-top: 1px solid var(--ecs-line); }
.wk-up__row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 96px; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ecs-line-4); font-size: 14px; }
.wk-up__row b { font-weight: 500; color: var(--ecs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-up__bar { position: relative; display: block; height: 6px; overflow: hidden; background: var(--ecs-line-3); }
.wk-up__bar i { position: absolute; inset: 0 auto 0 0; background: var(--ecs-forest-500); }
.wk-up__n { text-align: right; font: 500 12.5px var(--ecs-font-mono); color: var(--ecs-green-600); white-space: nowrap; }
.wk-quote__led { min-width: 0; }
.wk-pay .ecs-callout { margin: 0; }
.wk-pay .ecs-toggle-row { margin: 0; }

/* the heat grid's nights open their detections */
.ecs-heat__rowbtn { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.ecs-heat__rowbtn:hover { color: var(--ecs-green-600); text-decoration: underline; text-underline-offset: 3px; }

/* older cards the workspace still hosts (correction history, organiser) sit square */
.wk-stage > .ecs-card, .wk-main > .ecs-card { margin: 0 !important; border-radius: 0; }

/* numbers line up on their right edge, headers with them */
.wk-card .ecs-table td.ecs-td-num, .wk-card .ecs-table th.ecs-td-num { text-align: right; }

/* The site × night grid, read-only in the workspace: a narrower site column and
   night columns, the per-night count only once (in the foot row), and a fade at
   the right edge so a survey longer than the stage reads as one that scrolls. */
/* The fade follows the grid's own scroll (a scroll-driven animation): it shows
   only while there is more to the right, and is gone at the end or on a grid
   that fits. Where scroll timelines are unsupported there is no fade, only the
   scrollbar. */
.wk-card .ecs-projgrid { position: relative; timeline-scope: --wk-grid; }
.wk-card .ecs-projgrid .ecs-matrix-wrap { scroll-timeline: --wk-grid x; }
.wk-card .ecs-projgrid::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 28px; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--ecs-surface)); pointer-events: none; opacity: 0; animation: wk-grid-fade linear both; animation-timeline: --wk-grid; }
@keyframes wk-grid-fade { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
.wk-card .ecs-matrix.is-readonly .ecs-matrix__corner, .wk-card .ecs-matrix.is-readonly .ecs-matrix__rowh { width: 128px; min-width: 128px; }
/* the site rows under the grid state each site's nights, so the grid keeps only its files total */
.wk-card .ecs-matrix.is-readonly .is-nights,
.wk-card .ecs-matrix.is-readonly .ecs-matrix__rangeh,
.wk-card .ecs-matrix.is-readonly .ecs-matrix__range,
.wk-card .ecs-matrix.is-readonly .is-range { display: none; }
.wk-card .ecs-matrix.is-readonly .ecs-matrix__colh { min-width: 46px; padding: 8px 4px 6px; }
.wk-card .ecs-matrix.is-readonly .ecs-matrix__coltot { display: none; }

/* A numeric column's header is a header first: the cell rule's mono size must not
   reach it (it is !important there, so it is here too). */
.wk-card .ecs-table thead th.ecs-td-num { font: var(--ecs-th-font) !important; letter-spacing: var(--ecs-th-tracking); text-transform: uppercase; color: var(--ecs-th-ink); }
.wk-card .ecs-table thead th .wk-sort { font: inherit; letter-spacing: inherit; }

/* a species row's name is its control */
.wk-sp__name { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.wk-sp__name:hover { color: var(--ecs-green-600); text-decoration: underline; text-underline-offset: 3px; }
.wk-sp__row th { font-weight: var(--ecs-fw-medium); text-align: left; }

/* =============================================================================
   PHONES (640px and below). The workspace held in a hand: one column, the
   thing this step is about inside the first screen, nothing that scrolls the
   page sideways, and a thumb-sized target on every control. Everything here
   sits under the one query, so the desktop and tablet layouts above are
   exactly as they were (user direction, 2026-10-13).
   ============================================================================= */
@media (max-width: 640px) {
  /* ---- targets a thumb can hit: 44px, the visible mark unchanged ---------- */
  .wk-bar__brand { padding: 9px 0; }
  .wk-crumbs button { min-height: 44px; padding: 0 6px; }
  .wk-avatar { position: relative; }
  .wk-avatar::after { content: ""; position: absolute; inset: -5px; }
  .wk-screen .ecs-btn, .wk-screen .wk-btn-md, .wk-screen .wk-btn-sm { min-height: 44px; }
  .wk-screen .wk-quiet, .wk-screen .wk-back, .wk-proof__link { min-height: 44px; }
  /* A quiet link wraps rather than pushing the page sideways: Portuguese runs
     about a quarter longer than the English it was sized for. */
  .wk-screen .wk-quiet { white-space: normal; text-align: left; }
  .wk-tabs button { padding: 14px; }
  .wk-screen .ecs-seg__btn { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .wk-icbtn { width: 44px; height: 44px; }
  .wk-files li { grid-template-columns: 36px minmax(0, 1fr) 44px; }
  .wk-screen .ecs-chartdl { margin: -12px -12px -12px 0; }
  .wk-screen .ecs-chartdl__btn { width: 44px; height: 44px; }
  .wk-copy { min-width: 40px; height: 40px; margin: -12px 0; }
  .wk-screen .ecs-disclose > summary { padding: 12px 0; }
  /* The site × night grid's night ticks and site names: a 44px reach round a
     16px box and a line of text, so a neighbouring cell is not hit instead. */
  .wk-screen .ecs-matrix__tick, .wk-screen .ecs-site-open { position: relative; }
  .wk-screen .ecs-matrix__tick::after { content: ""; position: absolute; inset: -14px; }
  .wk-screen .ecs-site-open::after { content: ""; position: absolute; inset: -13px -4px; }

  /* Fields at 16px: below it, iOS zooms the page into a field on focus and
     leaves it zoomed. */
  .wk-screen .ecs-input, .wk-screen .ecs-select, .wk-search input { font-size: 16px; }
  .wk-screen .ecs-select, .wk-search { min-height: 44px; }
  .wk-screen .ecs-input--inline { min-height: 40px; }

  /* ---- the journey: six marks in one row, the words of the one in view ---- */
  /* The strip of six scrolled sideways and showed two and a half stages. Now
     every stage is a mark, the connectors run mark to mark (Grove behind a
     done stage), and the words of the stage on screen sit under the row: the
     now stage, or the done one picked to look back at. The other stages keep
     their words for a screen reader. */
  .wk-work--3 .wk-rail, .wk-work--rail .wk-rail {
    position: relative;
    top: auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    overflow: visible;
    padding: 4px 4px 44px;
  }
  .wk-rail .wk-rail__it,
  .wk-rail button.wk-rail__it:hover,
  .wk-rail .wk-rail__it.is-picked {
    --wk-in: var(--ecs-line);
    --wk-out: var(--ecs-line);
    position: static;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    border-left: 0;
    background:
      linear-gradient(var(--wk-in), var(--wk-in)) left 21px / 50% 2px no-repeat,
      linear-gradient(var(--wk-out), var(--wk-out)) right 21px / 50% 2px no-repeat;
  }
  .wk-rail .wk-rail__it.is-done { --wk-in: var(--ecs-forest-500); --wk-out: var(--ecs-forest-500); }
  .wk-rail .wk-rail__it.is-now { --wk-in: var(--ecs-forest-500); }
  .wk-rail .wk-rail__it:nth-child(2) { --wk-in: transparent; }
  .wk-rail .wk-rail__it:last-child { --wk-out: transparent; }
  .wk-rail .wk-rail__it.is-done.is-picked > .wk-rail__mk { box-shadow: 0 0 0 3px var(--ecs-surface), 0 0 0 5px var(--ecs-forest-500); }
  .wk-rail__tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wk-rail .wk-rail__it.is-picked .wk-rail__tx {
    left: 16px; right: 16px; bottom: 12px;
    display: flex; align-items: baseline; gap: 8px;
    width: auto; height: auto; overflow: visible; clip-path: none;
    text-align: left;
  }
  .wk-rail .is-picked .wk-rail__lb { flex: none; font-size: 15px; }
  .wk-rail .is-picked .wk-rail__sb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wk-rail .is-picked .wk-rail__st { flex: none; margin: 0 0 0 auto; }

  /* ---- the stage leads with what the batch needs now ---------------------- */
  /* A finished upload is history once the quote is in: it follows the quote
     instead of standing between the visitor and it. */
  .wk-stage > .wk-upcard.is-done { order: 1; }
  /* The quote's answer before its working: the ledger and Accept, then the
     sample it was priced from. */
  .wk-quote__in > .wk-sample { order: 1; }

  /* ---- the intake: panels become bands across the card -------------------- */
  /* A panel inside a card lost 40px of a 358px column to two insets. On a
     phone it runs edge to edge of the card, parted by its hairlines. */
  .wk-card .ecs-intake { margin-left: -16px; margin-right: -16px; padding: 18px 16px 20px; border-left: 0; border-right: 0; border-radius: 0; }
  .wk-card .ecs-intake .ecs-intake-bar { margin-left: -16px; margin-right: -16px; padding: 12px 16px; gap: 10px; border-radius: 0; }
  .wk-card .ecs-intake-bar__cta { width: 100%; }
  .wk-card .ecs-intake-bar__cta .ecs-btn { flex: 1 1 auto; }
  .wk-screen .ecs-matrix__colday { white-space: normal; }

  /* The coordinates table, one site at a time: the site, its two numbers side
     by side, its privacy, then what can be done to it. Four columns of 817px
     left a phone with the site's name and half a latitude. */
  .ecs-coordtable, .ecs-coordtable tbody { display: block; }
  .ecs-coordtable thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ecs-coordtable tr.ecs-site-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; }
  .ecs-coordtable tr.ecs-site-row.is-placing { padding-left: 12px; padding-right: 12px; }
  .ecs-coordtable tr.ecs-site-row > td { padding: 0 !important; text-align: left !important; white-space: normal !important; }
  .ecs-coordtable tr.ecs-site-row > td:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
  .ecs-coordtable .ecs-coord-pair { gap: 8px; }
  .ecs-coordtable .ecs-input--num { flex: 1 1 0; min-width: 0; max-width: none; }
  .ecs-paste-row #ecs-paste-coords { max-width: none !important; flex: 1 1 100%; }

  /* ---- results ------------------------------------------------------------ */
  /* The phone's own drawing of each chart (resultsView.js), in place of the
     desktop one scrolled sideways. */
  .wk-screen .ecs-chart-svg.is-phone { display: block; min-width: 0; }
  .wk-screen .ecs-chart-svg.is-phone + .ecs-chart-svg { display: none; }

  /* Ranked bars: the name over its bar, so a long common name is read whole
     instead of cut at "Morcego-hortelão-cla…". */
  .wk-screen .ecs-rank__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track"; row-gap: 7px; padding-top: 10px; padding-bottom: 10px; }
  .wk-screen .ecs-rank__label { grid-area: label; white-space: normal; }
  .wk-screen .ecs-rank__label em { white-space: normal; }
  .wk-screen .ecs-rank__track { grid-area: track; }
  .wk-screen .ecs-rank__value { grid-area: value; align-self: start; }
  /* The sites list lays its own rows out (name, nights, two bars), phone or not. */
  .wk-screen .wk-siterank .ecs-rank__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; row-gap: 10px; padding: 14px 10px 13px; }
  .wk-screen .wk-siterank .ecs-rank__label, .wk-screen .wk-siterank .ecs-rank__track, .wk-screen .wk-siterank .ecs-rank__value { grid-area: auto; align-self: auto; }

  /* The Total / By species switch above its key, and the key across the width. */
  .wk-tools { flex-direction: column; align-items: flex-start; }
  .wk-tools .ecs-seg { order: -1; margin-left: 0; }
  .wk-tools .ecs-chart-key { flex: none; width: 100%; }

  /* Species: one row per species. The name, and its records on the right;
     under them the code and the counts, each with its column's name. The
     header becomes the row of sorts, scrolling if it must. */
  .wk-sp, .wk-sp thead, .wk-sp tbody { display: block; }
  .wk-sp thead tr { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  .wk-sp thead th { flex: none; padding: 0 !important; border: 0 !important; background: none; }
  .wk-sp .wk-sort { min-height: 36px; padding: 0 10px; border: 1px solid var(--ecs-line-field); border-radius: var(--ecs-radius-ctl); background: var(--ecs-surface); white-space: nowrap; }
  .wk-sp .wk-sort.is-on { border-color: var(--ecs-ink); }
  .wk-sp tr.wk-sp__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 12px 0; border-top: 1px solid var(--ecs-line-4); }
  .wk-sp tr.wk-sp__row.is-open { padding-left: 12px; padding-right: 12px; background: var(--ecs-surface-pick); }
  .wk-sp tr.wk-sp__row > * { padding: 0 !important; border: 0 !important; background: none !important; }
  .wk-sp tr.wk-sp__row > th { flex: 1 1 calc(100% - 110px); min-width: 0; white-space: normal; }
  .wk-sp tr.wk-sp__row > td:nth-child(3) { order: 1; flex: none; font-size: 15px; text-align: right; }
  .wk-sp tr.wk-sp__row > td:nth-child(3)::after { content: attr(data-label); display: block; margin-top: 2px; font: 500 10.5px var(--ecs-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ecs-text-muted); }
  .wk-sp tr.wk-sp__row > td.ecs-td-code { order: 2; }
  .wk-sp tr.wk-sp__row > td:nth-child(5) { order: 3; }
  .wk-sp tr.wk-sp__row > td:nth-child(6) { order: 4; }
  .wk-sp tr.wk-sp__row > td:nth-child(4) { order: 5; }
  .wk-sp tr.wk-sp__row > td.ecs-td-zero { display: none; }
  .wk-sp tr.wk-sp__row > td.ecs-td-range { order: 6; }
  .wk-sp tr.wk-sp__row > td:nth-child(n + 4)[data-label]::before { content: attr(data-label); margin-right: 6px; font: 500 10.5px var(--ecs-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ecs-text-muted); }
  .wk-sp tr.wk-sp__detail { display: block; }
  .wk-sp tr.wk-sp__detail > td { display: block; }

  /* Detections: each row on two lines, what was heard first. The species and
     what the reviewer found; then the night, the time, the site and how long. */
  .wk-dets .ecs-table, .wk-dets tbody { display: block; }
  .wk-dets thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wk-dets tbody tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) fit-content(42%); grid-template-areas: "sp sp sp set" "night time site dur"; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--ecs-line-4); }
  .wk-dets tbody tr > * { padding: 0 !important; border: 0 !important; }
  .wk-dets tbody tr > :nth-child(1) { grid-area: night; white-space: nowrap; }
  .wk-dets tbody tr > :nth-child(2) { grid-area: time; }
  .wk-dets tbody tr > :nth-child(3) { grid-area: site; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .wk-dets tbody tr > :nth-child(4) { grid-area: sp; }
  .wk-dets tbody tr > :nth-child(5) { grid-area: set; text-align: right; }
  .wk-dets tbody tr > :nth-child(5) .ecs-td-code { white-space: normal; }
  .wk-dets tbody tr > :nth-child(6) { grid-area: dur; text-align: right; }

  /* Bat passes per site and night: a true grid, so it keeps scrolling inside
     its card, with the night held at the left edge so a row is never read
     without it. */
  .wk-nightsites th:first-child { position: sticky; left: 0; z-index: 1; background: var(--ecs-surface); box-shadow: 1px 0 0 var(--ecs-line-4); }
}