/* =============================================================================
   ECOSOUND · FLOW LAYOUTS
   Screen-level composition for the entry flows (chooser, split auth panels,
   upload / quote / payment steps, processing, dashboard shell).
   ============================================================================= */

/* ---- Generic scroll body for step screens ------------------------------ */
.ecs-flowbody {
  flex: 1;
  overflow-y: auto;
  padding: 32px 56px 96px;
}
.ecs-flow-narrow { max-width: var(--ecs-content-md); margin: 0 auto; }
.ecs-flow-wide { max-width: var(--ecs-content-wide); margin: 0 auto; }

.ecs-step-eyebrow {
  font-family: var(--ecs-font-mono);
  font-weight: var(--ecs-fw-semi);
  font-size: var(--ecs-fs-3xs);
  letter-spacing: var(--ecs-tracking-wider);
  text-transform: uppercase;
  color: var(--ecs-green-500);
  margin-bottom: 10px;
}
.ecs-step-title { font-size: var(--ecs-fs-h3); font-weight: var(--ecs-fw-bold); letter-spacing: -0.01em; margin: 0 0 6px; }
.ecs-step-sub { font-size: var(--ecs-fs-base); line-height: 1.55; color: var(--ecs-text-muted); margin: 0 0 22px; }

/* ---- Entry topbar ------------------------------------------------------- */
.ecs-topbar {
  height: var(--ecs-topbar-h);
  flex-shrink: 0;
  border-bottom: 1px solid var(--ecs-line-2);
  background: var(--ecs-paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}
.ecs-topbar__right {
  font-family: var(--ecs-font-mono);
  font-weight: var(--ecs-fw-medium);
  font-size: var(--ecs-fs-2xs);
  color: var(--ecs-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ecs-topbar__right .ecs-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ecs-green-500);
}

/* ---- Signed-in topbar: brand tag · storage · account chip + menu ---------- */
.ecs-topbar__brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ecs-topbar__tag {
  font: var(--ecs-fw-medium) var(--ecs-fs-3xs) var(--ecs-font-mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ecs-text-faint); padding-top: 2px; white-space: nowrap;
}
.ecs-topbar__acct { display: flex; align-items: center; gap: 12px; min-width: 0; }

.ecs-storagepill {
  display: flex; align-items: center; gap: 10px;
  background: var(--ecs-surface); border: 1px solid var(--ecs-line);
  border-radius: var(--ecs-radius-pill); padding: 7px 14px; white-space: nowrap;
}
.ecs-storagepill__label {
  font: var(--ecs-fw-medium) var(--ecs-fs-3xs) var(--ecs-font-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ecs-text-faint);
}
.ecs-storagepill__bar {
  width: 74px; height: 5px; border-radius: 0; background: var(--ecs-line-3);
  overflow: hidden; display: block;
}
.ecs-storagepill__bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--ecs-forest-500), var(--ecs-green-500));
}
.ecs-storagepill__num { font: var(--ecs-fw-semi) var(--ecs-fs-2xs) var(--ecs-font-mono); color: var(--ecs-text); }
.ecs-storagepill__num em { font-style: normal; font-weight: 400; color: var(--ecs-text-faint); }

.ecs-userwrap { position: relative; }
.ecs-userchip {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px 5px 6px; border-radius: var(--ecs-radius-md);
  background: transparent; border: none; cursor: pointer; font: inherit;
  text-align: left; max-width: 260px;
  transition: background var(--ecs-dur-fast) var(--ecs-ease);
}
.ecs-userchip:hover, .ecs-userchip.is-open { background: var(--ecs-line-3); }
.ecs-userchip__avatar {
  width: 32px; height: 32px; border-radius: var(--ecs-radius-md); flex-shrink: 0;
  background: var(--ecs-green-500); color: var(--ecs-forest-900);
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--ecs-fw-bold) 12px var(--ecs-font-display); letter-spacing: 0.02em;
}
.ecs-userchip__id { display: flex; flex-direction: column; min-width: 0; }
.ecs-userchip__name {
  font: var(--ecs-fw-semi) var(--ecs-fs-xs) var(--ecs-font-display); color: var(--ecs-text);
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecs-userchip__org {
  font: 400 var(--ecs-fs-2xs) var(--ecs-font-body); color: var(--ecs-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecs-userchip__chev { flex-shrink: 0; transition: transform var(--ecs-dur-fast) var(--ecs-ease); }
.ecs-userchip.is-open .ecs-userchip__chev { transform: rotate(180deg); }

.ecs-usermenu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 240px; background: var(--ecs-surface);
  border: 1px solid var(--ecs-line-2); border-radius: var(--ecs-radius-md);
  box-shadow: 0 22px 44px -24px rgba(var(--ecs-ink-rgb), 0.45);
  padding: 6px; animation: ecs-fade-up var(--ecs-dur-base) var(--ecs-ease-out);
}
.ecs-usermenu__head { padding: 9px 10px 10px; border-bottom: 1px solid var(--ecs-line-4); margin-bottom: 6px; }
.ecs-usermenu__name {
  font: var(--ecs-fw-semi) 13px var(--ecs-font-display); color: var(--ecs-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecs-usermenu__mail {
  font: 400 var(--ecs-fs-2xs) var(--ecs-font-mono); color: var(--ecs-text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecs-usermenu__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font: var(--ecs-fw-semi) var(--ecs-fs-xs) var(--ecs-font-body); color: var(--ecs-text);
  background: transparent; border: none; border-radius: 0;
  padding: 9px 10px; cursor: pointer; text-align: left;
  transition: background var(--ecs-dur-fast) var(--ecs-ease);
}
.ecs-usermenu__item:hover { background: var(--ecs-surface-2); }
.ecs-usermenu__item svg { color: var(--ecs-text-muted); flex-shrink: 0; }
.ecs-usermenu__item--out { color: var(--ecs-alert); }
.ecs-usermenu__item--out svg { color: var(--ecs-alert); }

/* ---- Account page --------------------------------------------------------- */
.ecs-account-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: 16px; align-items: start;
}
.ecs-account-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ecs-account-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ecs-account-email { display: flex; align-items: center; gap: 10px; }
.ecs-account-email .ecs-input { flex: 1; min-width: 0; color: var(--ecs-text-muted); background: var(--ecs-surface-2); }
.ecs-account-email .ecs-pill { flex-shrink: 0; }
.ecs-account-plan-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ecs-account-plan-key {
  width: 108px; flex-shrink: 0;
  font: var(--ecs-fw-medium) var(--ecs-fs-3xs) var(--ecs-font-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ecs-text-faint);
}
.ecs-account-storagebar {
  height: 7px; border-radius: 0; background: var(--ecs-line-3); overflow: hidden;
}
.ecs-account-storagebar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--ecs-forest-500), var(--ecs-green-500));
}

/* =============================================================================
   CHOOSER
   ============================================================================= */
.ecs-chooser { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ecs-paper); }
.ecs-chooser__bg { position: absolute; inset: 0; opacity: 0.10; pointer-events: none; }
.ecs-chooser__head { position: relative; padding: 44px 56px 26px; }
.ecs-chooser__brandrow { display: flex; align-items: center; gap: 11px; margin-bottom: 34px; }
.ecs-chooser__co {
  font-family: var(--ecs-font-mono);
  font-weight: var(--ecs-fw-medium);
  font-size: var(--ecs-fs-2xs);
  letter-spacing: var(--ecs-tracking-wide);
  color: var(--ecs-text-muted);
  margin-left: 6px;
  padding-top: 2px;
}
.ecs-chooser__title { font-size: var(--ecs-fs-hero); line-height: 1.06; letter-spacing: var(--ecs-tracking-tight); font-weight: var(--ecs-fw-bold); margin: 0 0 12px; max-width: 760px; }
.ecs-chooser__lede { font-size: var(--ecs-fs-md); line-height: 1.6; color: var(--ecs-text-2); margin: 0; max-width: 640px; }
.ecs-chooser__cards {
  position: relative;
  flex: 1;
  display: flex;
  gap: 22px;
  padding: 6px 56px 80px;
  align-items: stretch;
}
.ecs-choice {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--ecs-radius-3xl);
  padding: 32px 32px 28px;
  position: relative;
  overflow: hidden;
}
.ecs-choice__badges { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; position: relative; }
.ecs-choice__title { font-size: var(--ecs-fs-h4); font-weight: var(--ecs-fw-bold); letter-spacing: -0.01em; margin: 0 0 10px; position: relative; }
.ecs-choice__desc { font-size: var(--ecs-fs-base); line-height: 1.55; margin: 0 0 22px; max-width: 440px; position: relative; }
.ecs-choice__spacer { margin-top: auto; }
.ecs-choice__wave { position: absolute; right: -30px; top: -20px; width: 260px; height: 120px; opacity: 0.4; }

/* =============================================================================
   SPLIT AUTH SCREENS (invite / start / login)
   ============================================================================= */
.ecs-split { position: absolute; inset: 0; display: flex; }
.ecs-split__panel {
  width: var(--ecs-split-panel);
  flex-shrink: 0;
  background: var(--ecs-forest-900);
  position: relative;
  overflow: hidden;
  padding: 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ecs-split__spectro { position: absolute; inset: 0; opacity: 0.5; }
.ecs-split__scrim { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(var(--ecs-ink-rgb), 0.3), rgba(var(--ecs-ink-rgb), 0.94)); }
.ecs-split__panel > * { position: relative; }
.ecs-split__logo-badge {
  width: 36px; height: 36px;
  border-radius: var(--ecs-radius-md);
  background: var(--ecs-green-400);
  display: flex; align-items: center; justify-content: center;
}
.ecs-split__headline { font-size: var(--ecs-fs-h1); line-height: 1.1; letter-spacing: var(--ecs-tracking-tight); color: var(--ecs-on-dark); margin: 0 0 14px; max-width: 400px; }
.ecs-split__tagline { font-size: var(--ecs-fs-base); line-height: 1.6; color: var(--ecs-on-dark-2); margin: 0; max-width: 360px; }
.ecs-split__foot { font-family: var(--ecs-font-mono); font-weight: var(--ecs-fw-medium); font-size: var(--ecs-fs-2xs); color: var(--ecs-on-dark-4); letter-spacing: 0.05em; }
.ecs-split__main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.ecs-split__form { width: var(--ecs-content-narrow); }

.ecs-benefits { display: flex; flex-direction: column; gap: 11px; }
.ecs-benefit { display: flex; align-items: center; gap: 11px; }
.ecs-benefit__mark {
  width: 22px; height: 22px;
  border-radius: var(--ecs-radius-sm);
  background: var(--ecs-green-200);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ecs-benefit span:last-child { font-size: var(--ecs-fs-sm); color: var(--ecs-text); }

/* Centered form screen (set password) */
.ecs-centered { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px; }

/* =============================================================================
   QUOTE / ESTIMATE
   ============================================================================= */
.ecs-sample {
  background: var(--ecs-forest-900);
  border-radius: 0;
  padding: 24px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.ecs-sample__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ecs-sample__grid { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.ecs-sample__thumb { aspect-ratio: 16 / 10; border-radius: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); }
.ecs-estimate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ecs-bignum { font-family: var(--ecs-font-display); font-weight: var(--ecs-fw-bold); font-size: var(--ecs-fs-hero); letter-spacing: var(--ecs-tracking-tight); line-height: 1; }

/* =============================================================================
   PAYMENT
   ============================================================================= */
.ecs-pay-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
.ecs-summary { position: sticky; top: 0; }
.ecs-summary__rows { display: flex; flex-direction: column; gap: 11px; font-size: var(--ecs-fs-sm); color: var(--ecs-text); }
.ecs-summary__row { display: flex; justify-content: space-between; }
.ecs-summary__row .k { color: var(--ecs-text-muted); }
.ecs-summary__row .v { font-family: var(--ecs-font-mono); font-weight: var(--ecs-fw-medium); font-size: var(--ecs-fs-xs); }
.ecs-summary__total {
  border-top: 1px solid var(--ecs-line-3);
  margin: 16px 0;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ecs-summary__total .v { font-family: var(--ecs-font-display); font-weight: var(--ecs-fw-bold); font-size: var(--ecs-fs-title); color: var(--ecs-forest-500); }

.ecs-method {
  display: flex;
  gap: 13px;
  align-items: center;
  background: var(--ecs-surface);
  border: 1.5px solid var(--ecs-forest-500);
  border-radius: var(--ecs-radius-xl);
  padding: 18px 20px;
}

/* =============================================================================
   PROCESSING (pipeline steps)
   ============================================================================= */
.ecs-pipeline { display: flex; flex-direction: column; }
.ecs-pipe-step { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; }
.ecs-pipe-step__dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* =============================================================================
   DASHBOARD SHELL (shared landing)
   ============================================================================= */
.ecs-dash { position: absolute; inset: 0; display: flex; }
.ecs-dash__aside {
  width: 248px;
  flex-shrink: 0;
  background: var(--ecs-forest-900);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
}
.ecs-dash__brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 22px; }
.ecs-dash__project {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ecs-radius-lg);
  padding: 12px 13px;
  margin-bottom: 20px;
}
.ecs-dash__seclabel {
  font-family: var(--ecs-font-mono);
  font-weight: var(--ecs-fw-medium);
  font-size: var(--ecs-fs-3xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ecs-on-dark-3);
  padding: 0 8px 8px;
}
.ecs-nav { display: flex; flex-direction: column; gap: 3px; }
.ecs-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ecs-radius-md);
  font-family: var(--ecs-font-display);
  font-weight: var(--ecs-fw-medium);
  font-size: var(--ecs-fs-sm);
  color: var(--ecs-on-dark-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ecs-dur-fast) var(--ecs-ease), color var(--ecs-dur-fast) var(--ecs-ease);
}
.ecs-nav__item:hover { background: rgba(var(--ecs-accent-rgb), 0.08); }
.ecs-nav__item.is-active {
  font-weight: var(--ecs-fw-semi);
  color: var(--ecs-on-dark);
  background: rgba(var(--ecs-accent-rgb), 0.14);
  border-color: rgba(var(--ecs-accent-rgb), 0.22);
}
.ecs-nav__badge {
  font-family: var(--ecs-font-mono);
  font-weight: var(--ecs-fw-semi);
  font-size: var(--ecs-fs-2xs);
  border-radius: var(--ecs-radius-pill);
  padding: 1px 7px;
  background: var(--ecs-alert);
  color: var(--ecs-on-dark);
}
.ecs-nav__badge.is-active { background: var(--ecs-green-400); color: var(--ecs-forest-900); }

.ecs-dash__main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ecs-dash__header {
  height: 70px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--ecs-line-2);
  background: var(--ecs-paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}
.ecs-dash__body { flex: 1; overflow-y: auto; padding: 24px 32px 40px; }
.ecs-welcome {
  background: linear-gradient(135deg, var(--ecs-forest-600), var(--ecs-forest-900));
  border-radius: var(--ecs-radius-2xl);
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ecs-on-dark);
  position: relative;
  overflow: hidden;
}
.ecs-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.ecs-kpi__label {
  font-family: var(--ecs-font-mono);
  font-weight: var(--ecs-fw-medium);
  font-size: var(--ecs-fs-3xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ecs-text-muted);
}
.ecs-kpi__value { font-family: var(--ecs-font-display); font-weight: var(--ecs-fw-bold); font-size: var(--ecs-fs-h2); letter-spacing: -0.01em; line-height: 1; }
.ecs-dash__cols { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.ecs-comp-bar { display: flex; height: 14px; border-radius: var(--ecs-radius-sm); overflow: hidden; margin-bottom: 18px; }
.ecs-comp-list { display: flex; flex-direction: column; gap: 12px; }
.ecs-comp-row { display: flex; align-items: center; gap: 11px; }
.ecs-comp-row__sw { width: 11px; height: 11px; border-radius: 0; flex-shrink: 0; }

/* =============================================================================
   CLIENT PORTAL WORKSPACE  (P0-CLIENT-UX)
   The signed-in project page: journey rail on top, one stage panel plus a
   context sidebar underneath. Home rows, quote choices and the status tracker
   share the vocabulary. All colors come from the tokens.
   ============================================================================= */

/* Wider page for the workspace; wizard/organiser content re-centres inside. */
.ecs-flow-work { max-width: 1220px; margin: 0 auto; }
.ecs-work-narrow { max-width: var(--ecs-content-wide); margin: 0 auto; }

/* Three columns, as in the comp: journey rail · the stage you are on · the
   batch's context. The rail is a column rather than a banner so the step you
   are on stays beside its panel however far the panel scrolls. */
.ecs-work {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 316px;
  gap: 20px;
  align-items: start;
}
/* The intake wizard and the organiser own the middle column outright. */
.ecs-work--wide { grid-template-columns: 280px minmax(0, 1fr); }
.ecs-work__aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; }
.ecs-work__rail { position: sticky; top: 0; }

.ecs-aside-card { background: var(--ecs-surface); border: 1px solid var(--ecs-line); border-radius: 0; padding: 16px 18px; }
.ecs-aside-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.ecs-aside-card__eyebrow {
  font: var(--ecs-fw-semi) var(--ecs-fs-3xs) var(--ecs-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ecs-text-faint);
}
.ecs-aside-card--dark { background: var(--ecs-forest-900); border-color: var(--ecs-forest-900); }
.ecs-aside-card--dark .ecs-kicker { margin-bottom: 9px; }
/* ---- Journey rail ---------------------------------------------------------
   The GOV.UK task list: one milestone per row, a numbered marker, and the
   status word right-aligned. The step you are on is the only tinted row and
   carries the green edge, so "you are here" survives a squint. */
.ecs-rail { background: var(--ecs-surface); border: 1px solid var(--ecs-line); }
.ecs-rail__head { padding: 14px 16px; border-bottom: 1px solid var(--ecs-line); }
.ecs-rail__item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--ecs-line-3);
}
.ecs-rail__item:last-child { border-bottom: none; }
.ecs-rail__item.is-current { background: var(--ecs-green-200); border-left-color: var(--ecs-forest-500); }
.ecs-rail__circle {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--ecs-line-strong);
  background: var(--ecs-surface);
  color: var(--ecs-text-faint);
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--ecs-fw-medium) var(--ecs-fs-2xs) var(--ecs-font-mono);
}
.ecs-rail__circle.is-done {
  background: var(--ecs-forest-500); border-color: var(--ecs-forest-500); color: var(--ecs-on-dark);
}
.ecs-rail__circle.is-current { border-color: var(--ecs-green-600); color: var(--ecs-green-600); background: transparent; }
.ecs-rail__label { flex: 1; min-width: 0; font: 500 13px var(--ecs-font-display); color: var(--ecs-ink); }
.ecs-rail__label.is-todo { color: var(--ecs-text-faint); }
.ecs-rail__state {
  font: var(--ecs-fw-medium) var(--ecs-fs-3xs) var(--ecs-font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ecs-text-faint); white-space: nowrap;
}
.ecs-rail__state.is-done { color: var(--ecs-green-600); }
.ecs-rail__state.is-current { color: var(--ecs-warn-ink); }
@keyframes ecsRailPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--ecs-accent-rgb), 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(var(--ecs-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--ecs-accent-rgb), 0); }
}

/* ---- Home: lifecycle band + batch table (P1 polish B) ---------------------
   One table for dozens of batches: mono uppercase headers that sort, figures
   right-aligned in tabular mono, hairline rows 44px tall, no zebra. The only
   tinted row is a quote waiting on the client — one accent for the region. */
.ecs-stats { margin-bottom: 20px; }
.ecs-home-kpis .ecs-statband__num {
  font-family: var(--ecs-font-mono);
  font-weight: var(--ecs-fw-medium);
  font-variant-numeric: tabular-nums;
}
/* The warn ink, not the #C08A2D dot colour: amber on white misses 3:1 at this
   size, and this number is the one on the page that asks for something. */
.ecs-statband__num.is-warn { color: var(--ecs-warn-ink); }

.ecs-home-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ecs-line);
}
.ecs-fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.ecs-fchip {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--ecs-ctl-h-sm); padding: 0 12px;
  background: var(--ecs-surface);
  border: 1px solid var(--ecs-line-field);
  border-radius: var(--ecs-radius-ctl);
  font: var(--ecs-fw-medium) var(--ecs-fs-2xs) var(--ecs-font-body);
  color: var(--ecs-text-muted);
  transition: background var(--ecs-dur-fast) var(--ecs-ease),
              border-color var(--ecs-dur-fast) var(--ecs-ease),
              color var(--ecs-dur-fast) var(--ecs-ease);
}
.ecs-fchip:hover { background: var(--ecs-surface-2); color: var(--ecs-ink); }
.ecs-fchip.is-on {
  background: var(--ecs-green-200);
  border-color: var(--ecs-line-mint);
  color: var(--ecs-green-600);
}
.ecs-fchip__n {
  font: var(--ecs-fw-medium) var(--ecs-fs-2xs) var(--ecs-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ecs-text-muted);
}
.ecs-fchip.is-on .ecs-fchip__n { color: var(--ecs-green-600); }
.ecs-home-search { width: 240px; max-width: 100%; }

/* Wide tables scroll inside the card, never the page. */
.ecs-home-scroll { overflow-x: auto; }
.ecs-home-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 var(--ecs-fs-sm) var(--ecs-font-body);
  color: var(--ecs-text);
}
/* Every header cell carries the header font itself, so a sort button and a
   plain label share one line box — a numeric column's mono cell style used to
   set its header on a different baseline, 2.6px above its neighbours. */
.ecs-home-table th {
  font: var(--ecs-th-font);
  letter-spacing: var(--ecs-th-tracking);
  text-transform: uppercase;
  color: var(--ecs-th-ink);
  padding: 0 12px;
  height: 36px;
  text-align: left;
  vertical-align: middle;
  background: var(--ecs-surface-2);
  border-bottom: 1px solid var(--ecs-line);
  white-space: nowrap;
}
.ecs-home-table th:first-child,
.ecs-home-table td:first-child { padding-left: 16px; }
.ecs-home-table th:last-child,
.ecs-home-table td:last-child { padding-right: 16px; }
.ecs-home-table td {
  padding: 0 12px;
  height: 44px;
  border-top: 1px solid var(--ecs-line-3);
  vertical-align: middle;
  white-space: nowrap;
}
.ecs-home-table tbody tr:first-child td { border-top: none; }
.ecs-home-table .is-num { text-align: right; }
.ecs-home-table td.is-num {
  font-family: var(--ecs-font-mono);
  font-size: var(--ecs-fs-xs);
  font-variant-numeric: tabular-nums;
}
.ecs-home-table th.is-num .ecs-home-sort { flex-direction: row-reverse; }
.ecs-home-table .is-none { color: var(--ecs-text-faint); }

.ecs-home-sort {
  appearance: none; background: none; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  /* By its middle, not its baseline: a right-aligned header puts the arrow
     first, and an SVG's synthesised baseline is its bottom edge. */
  vertical-align: middle;
  font: var(--ecs-th-font);
  letter-spacing: var(--ecs-th-tracking);
  text-transform: uppercase;
  color: var(--ecs-th-ink);
}
.ecs-home-sort:hover,
.ecs-home-sort.is-on { color: var(--ecs-ink); }
.ecs-home-sort__dir { flex-shrink: 0; transition: transform var(--ecs-dur-fast) var(--ecs-ease); }
.ecs-home-sort__dir.is-asc { transform: rotate(180deg); }
.ecs-home-sort__dir.is-idle { opacity: 0; }
.ecs-home-sort:hover .ecs-home-sort__dir.is-idle,
.ecs-home-sort:focus-visible .ecs-home-sort__dir.is-idle { opacity: 1; }

.ecs-home-row {
  cursor: pointer;
  transition: background var(--ecs-dur-fast) var(--ecs-ease);
}
.ecs-home-row:hover { background: var(--ecs-surface-2); }
.ecs-home-row.is-actionable { background: var(--ecs-surface-flag); }
.ecs-home-row.is-actionable:hover { background: var(--ecs-surface-pick); }
.ecs-home-row__code a {
  font: var(--ecs-fw-medium) var(--ecs-fs-xs) var(--ecs-font-mono);
  color: var(--ecs-green-600);
  text-decoration: none;
}
.ecs-home-row:hover .ecs-home-row__code a { text-decoration: underline; text-underline-offset: 3px; }
.ecs-home-row__title {
  font: var(--ecs-fw-medium) var(--ecs-fs-sm) var(--ecs-font-display);
  color: var(--ecs-ink);
  max-width: 320px;
  overflow: hidden; text-overflow: ellipsis;
}
.ecs-home-row__sub { display: none; }
.ecs-home-row__date {
  font: 400 var(--ecs-fs-xs) var(--ecs-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ecs-text-muted);
}
.ecs-home-none td {
  height: 64px;
  font: 400 var(--ecs-fs-sm) var(--ecs-font-body);
  color: var(--ecs-text-muted);
  white-space: normal;
}
.ecs-home-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--ecs-line);
}
.ecs-home-foot__count {
  font: 400 var(--ecs-fs-2xs) var(--ecs-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ecs-text-muted);
}
.ecs-home-results { margin-top: 32px; }

/* The empty home: one sentence, one button, then the three steps in order. */
.ecs-home-empty { text-align: center; padding: 24px 8px; }
.ecs-home-empty__title {
  font: var(--ecs-fw-bold) var(--ecs-fs-title) var(--ecs-font-display);
  letter-spacing: -0.01em;
  color: var(--ecs-ink);
  margin: 0 0 8px;
}
.ecs-home-empty__sub {
  font: 400 var(--ecs-fs-sm)/1.6 var(--ecs-font-body);
  color: var(--ecs-text-muted);
  margin: 0 auto 20px;
  max-width: 56ch;
}
.ecs-home-steps {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.ecs-home-step {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px;
  align-content: start;
  padding: 16px;
  background: var(--ecs-green-200);
}
.ecs-home-step__icon {
  grid-row: span 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1.5px solid var(--ecs-forest-500);
  border-radius: var(--ecs-radius-pill);
}
.ecs-home-step__title {
  font: var(--ecs-fw-bold) var(--ecs-fs-sm) var(--ecs-font-display);
  color: var(--ecs-ink);
}
.ecs-home-step__sub {
  font: 400 var(--ecs-fs-xs)/1.5 var(--ecs-font-body);
  color: var(--ecs-text-2);
}

/* The project aside's folded site list. */
.ecs-aside-more {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 8px;
  font: 400 var(--ecs-fs-2xs) var(--ecs-font-body);
  color: var(--ecs-text-muted);
}
.ecs-aside-more .ecs-chip--btn { margin-left: auto; }

.ecs-chip {
  display: inline-flex; align-items: center;
  font: var(--ecs-fw-medium) 12px var(--ecs-font-body);
  color: var(--ecs-text-muted); white-space: nowrap;
}
.ecs-chip--action { color: var(--ecs-green-600); }

/* ---- Quote: phase checklist (dark) ---------------------------------------- */
.ecs-qphases { display: flex; flex-direction: column; }
.ecs-qphase { display: flex; gap: 13px; align-items: flex-start; }
.ecs-qphase__rail { display: flex; flex-direction: column; align-items: center; width: 20px; flex-shrink: 0; align-self: stretch; }
.ecs-qphase__line { width: 2px; flex: 1; min-height: 14px; background: rgba(255, 255, 255, 0.12); margin: 3px 0; }
.ecs-qphase__line.is-done { background: rgba(var(--ecs-accent-rgb), 0.45); }
.ecs-qphase:last-child .ecs-qphase__line { visibility: hidden; }
.ecs-qphase__dot {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.22);
  display: inline-flex; align-items: center; justify-content: center;
}
.ecs-qphase__dot.is-done { background: var(--ecs-green-400); border-color: var(--ecs-green-400); }
.ecs-qphase__dot.is-current { border-color: var(--ecs-green-400); }
.ecs-qphase__dot.is-current::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ecs-green-400);
  animation: ecsRailPulse 1.6s var(--ecs-ease) infinite;
}
.ecs-qphase__body { padding-bottom: 14px; min-width: 0; }
.ecs-qphase__title { font: var(--ecs-fw-semi) var(--ecs-fs-sm) var(--ecs-font-display); color: var(--ecs-on-dark-3); }
.ecs-qphase__title.is-done { color: var(--ecs-green-300); }
.ecs-qphase__title.is-current { color: var(--ecs-on-dark); font-weight: var(--ecs-fw-bold); }
.ecs-qphase__sub { font: 400 var(--ecs-fs-2xs)/1.5 var(--ecs-font-body); color: var(--ecs-on-dark-3); margin-top: 2px; }

/* ---- Quote: estimate tiles, choices, breakdown ----------------------------- */
.ecs-tilegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.ecs-tile { background: var(--ecs-surface-2); border: 1px solid var(--ecs-line-3); border-radius: 0; padding: 15px 17px; }
.ecs-tile--mint { background: var(--ecs-green-100); border-color: var(--ecs-line-mint); }
.ecs-tile__label {
  font: 500 var(--ecs-fs-3xs) var(--ecs-font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ecs-text-faint); margin-bottom: 7px;
}
.ecs-tile--mint .ecs-tile__label { color: var(--ecs-green-500); }
.ecs-tile__value { font: var(--ecs-fw-bold) var(--ecs-fs-title) var(--ecs-font-display); letter-spacing: -0.02em; line-height: 1; }
.ecs-tile__sub { font: 400 var(--ecs-fs-2xs) var(--ecs-font-body); color: var(--ecs-text-muted); margin-top: 5px; }

.ecs-choices { border: 1px solid var(--ecs-line-3); border-radius: 0; padding: 16px 18px; margin-bottom: 16px; }
.ecs-choices.is-locked { opacity: 0.6; }
.ecs-choice-row {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--ecs-line-3); background: var(--ecs-surface);
  border-radius: 0; padding: 12px 15px;
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color var(--ecs-dur-fast) var(--ecs-ease), background var(--ecs-dur-fast) var(--ecs-ease);
}
.ecs-choice-row + .ecs-choice-row { margin-top: 9px; }
.ecs-choice-row.is-on { border-color: var(--ecs-line-mint); background: var(--ecs-green-100); }
.ecs-choice-row:disabled { cursor: not-allowed; }
.ecs-switch {
  width: 40px; height: 22px; border-radius: var(--ecs-radius-pill);
  background: var(--ecs-line-strong); flex-shrink: 0; position: relative;
  transition: background var(--ecs-dur-fast) var(--ecs-ease);
}
.ecs-switch.is-on { background: var(--ecs-forest-500); }
.ecs-switch__knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform var(--ecs-dur-fast) var(--ecs-ease);
}
.ecs-switch.is-on .ecs-switch__knob { transform: translateX(18px); }
.ecs-choice-row__pct {
  font: var(--ecs-fw-semi) var(--ecs-fs-2xs) var(--ecs-font-mono);
  padding: 3px 8px; border-radius: var(--ecs-radius-pill); white-space: nowrap;
}

.ecs-breakdown { background: var(--ecs-surface-2); border: 1px solid var(--ecs-line-3); border-radius: 0; padding: 16px 19px; }
.ecs-breakdown__row { display: flex; justify-content: space-between; gap: 12px; font: 500 var(--ecs-fs-xs) var(--ecs-font-mono); color: var(--ecs-text); }
.ecs-breakdown__row + .ecs-breakdown__row { margin-top: 7px; }
.ecs-breakdown__row.is-muted { font-weight: 400; font-size: var(--ecs-fs-2xs); color: var(--ecs-text-faint); }
.ecs-breakdown__row.is-good { color: var(--ecs-forest-500); }
.ecs-breakdown__row.is-warn { color: var(--ecs-warn-ink); }
.ecs-breakdown__total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--ecs-line); margin-top: 11px; padding-top: 11px;
}
.ecs-breakdown__total .v { font: var(--ecs-fw-bold) 22px var(--ecs-font-display); letter-spacing: -0.01em; }

.ecs-trust { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ecs-line-4); }
.ecs-trust__item { display: flex; gap: 9px; align-items: center; font: 400 12px var(--ecs-font-body); color: var(--ecs-text-2); }

/* ---- Status tracker meta ---------------------------------------------------- */
.ecs-timeline__meta {
  font: 500 var(--ecs-fs-2xs) var(--ecs-font-mono);
  color: var(--ecs-text-faint);
  margin-left: 8px;
}
.ecs-timeline__now {
  font: var(--ecs-fw-semi) var(--ecs-fs-3xs) var(--ecs-font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ecs-green-200); color: var(--ecs-forest-500);
  padding: 2px 8px; border-radius: var(--ecs-radius-pill); margin-left: 8px;
}

/* ---- Results: bundle hero ---------------------------------------------------- */
.ecs-bundle-hero {
  background: var(--ecs-forest-900);
  border-radius: 0; padding: 20px 22px;
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 14px; position: relative; overflow: hidden;
}
.ecs-bundle-hero__wave { position: absolute; right: -20px; bottom: -24px; width: 280px; height: 110px; opacity: 0.25; }

/* 1024-class laptops are common. The rail is the first column to go: it is a
   summary of the panel beside it, so losing it costs the least. */
@media (max-width: 1320px) {
  .ecs-work { grid-template-columns: 248px minmax(0, 1fr) 280px; gap: 16px; }
  .ecs-work--wide { grid-template-columns: 248px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  /* The rail stops being a column and becomes a strip above the work (U-09).
     It used to be hidden outright, so on a laptop and on every phone the batch
     lost the one thing that says where it is — and a client following a slow
     enterprise batch has nothing else to read. Horizontal, compact, still the
     same six milestones with the current one tinted. */
  .ecs-work { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
  .ecs-work--wide { grid-template-columns: minmax(0, 1fr); }
  .ecs-work__rail { position: static; grid-column: 1 / -1; }
  .ecs-rail { display: flex; overflow-x: auto; scrollbar-width: thin; }
  .ecs-rail__head { display: none; }
  .ecs-rail__item {
    flex: 1 0 auto;
    gap: 9px;
    min-width: 0;
    padding: 11px 14px;
    border-left: none;
    border-bottom: none;
    border-top: 3px solid transparent;
    border-right: 1px solid var(--ecs-line-3);
  }
  .ecs-rail__item:last-child { border-right: none; }
  .ecs-rail__item.is-current { border-left-color: transparent; border-top-color: var(--ecs-forest-500); }
  /* Only the milestone you are on needs its name spelled out across a narrow
     screen; the rest are numbered markers and keep the strip readable. */
  .ecs-rail__label { flex: 0 1 auto; white-space: nowrap; }
  .ecs-rail__item:not(.is-current) .ecs-rail__label,
  .ecs-rail__state { display: none; }
  .ecs-rail__item.is-current .ecs-rail__state { display: inline; }
  .ecs-home-table .ecs-home-hide-md { display: none; }
}
@media (max-width: 940px) {
  .ecs-work { grid-template-columns: minmax(0, 1fr); }
  .ecs-work__aside { position: static; }
  .ecs-account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ecs-home-table .ecs-home-hide-sm { display: none; }
  .ecs-home-row__title { max-width: 180px; }
  .ecs-home-search { width: 100%; }
  .ecs-home-steps { grid-template-columns: 1fr; }
  .ecs-statband { grid-auto-flow: row; }
  .ecs-statband > div { border-right: none; border-bottom: 1px solid var(--ecs-line-3); }
  .ecs-statband > div:last-child { border-bottom: none; }
}
@media (max-width: 640px) {
  .ecs-account-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ecs-home-table .ecs-home-hide-xs { display: none; }
  .ecs-home-row__code { padding-top: 8px; padding-bottom: 8px; }
  .ecs-home-row__sub {
    display: block;
    max-width: 190px;
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: var(--ecs-fw-medium) var(--ecs-fs-sm) var(--ecs-font-display);
    color: var(--ecs-ink);
  }
}

/* ---- The storage explorer, /app/storage (P1 · E3) --------------------------
   Operate mode: hairline boxes, no shadow, one accent per pane, every figure
   in tabular mono. The mint ramp appears on the usage bar and the selection
   fill and nowhere else. The chevron's turn and the selection fill are the
   only things that move, and neither does under reduced motion. */

/* The pill is the way in, so it is a real button now. */
button.ecs-storagepill {
  appearance: none; cursor: pointer; font: inherit; color: inherit;
  transition: border-color var(--ecs-dur-fast) var(--ecs-ease),
              background var(--ecs-dur-fast) var(--ecs-ease);
}
button.ecs-storagepill:hover { border-color: var(--ecs-line-mint); background: var(--ecs-green-100); }

.ecs-stor-screen .ecs-kicker { margin-bottom: 8px; }
.ecs-stor-title { margin: 0 0 16px; }
.ecs-stor-where {
  margin: 24px 0 0;
  font: 400 var(--ecs-fs-2xs) / 1.5 var(--ecs-font-body);
  color: var(--ecs-text-muted);
}
.ecs-stor-loading {
  font: 400 var(--ecs-fs-sm) var(--ecs-font-body);
  color: var(--ecs-text-muted);
}

/* Usage band */
.ecs-stor-usage { margin-bottom: 24px; max-width: 640px; }
.ecs-stor-usage__line,
.ecs-stor-usage__cap {
  margin: 0;
  font: var(--ecs-fw-medium) var(--ecs-fs-xs) / 1.5 var(--ecs-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ecs-ink);
}
.ecs-stor-usage__cap { margin-top: 8px; font-weight: 400; color: var(--ecs-text-muted); }
.ecs-stor-usage__note { display: inline-block; font-family: var(--ecs-font-body); color: var(--ecs-text-muted); margin-left: 8px; }
.ecs-stor-bar {
  display: flex;
  height: 10px;
  margin-top: 8px;
  border: 1px solid var(--ecs-line);
  border-radius: 0;
  background: var(--ecs-surface);
  overflow: hidden;
}
.ecs-stor-bar__seg { display: block; height: 100%; flex: none; }
.ecs-stor-bar__seg--audio { background: var(--ecs-forest-500); }
.ecs-stor-bar__seg--results { background: var(--ecs-green-400); }
.ecs-stor-bar__seg--free { background: var(--ecs-green-100); flex: 1 1 auto; }
.ecs-stor-usage.is-low .ecs-stor-bar__seg--audio,
.ecs-stor-usage.is-low .ecs-stor-bar__seg--results { background: var(--ecs-warn); }
.ecs-stor-usage__low {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 0;
  font: var(--ecs-fw-medium) var(--ecs-fs-xs) / 1.5 var(--ecs-font-body);
  color: var(--ecs-warn-ink);
}

/* Two panes */
.ecs-stor {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.ecs-stor-disclose { display: none; }

/* Left: the tree */
.ecs-stor-tree {
  border: 1px solid var(--ecs-line);
  background: var(--ecs-surface);
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overscroll-behavior: contain;
  position: sticky;
  top: 0;
}
.ecs-stor-root,
.ecs-stor-row {
  --lvl: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px 0 calc(8px + (var(--lvl) - 1) * 14px);
  border: none;
  border-bottom: 1px solid var(--ecs-line-3);
  box-shadow: inset 2px 0 0 transparent;
  background-color: var(--ecs-surface);
  cursor: pointer;
  transition: background-color var(--ecs-dur-fast) var(--ecs-ease),
              box-shadow var(--ecs-dur-fast) var(--ecs-ease);
}
.ecs-stor-root {
  appearance: none; width: 100%;
  justify-content: space-between;
  padding-left: 12px;
  font: var(--ecs-fw-semi) var(--ecs-fs-3xs) var(--ecs-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ecs-text-muted);
  background-color: var(--ecs-surface-2);
}
.ecs-stor-row:hover,
.ecs-stor-root:hover { background-color: var(--ecs-surface-2); }
.ecs-stor-row.is-selected,
.ecs-stor-root.is-selected {
  background-color: var(--ecs-green-100);
  box-shadow: inset 2px 0 0 var(--ecs-forest-500);
}
/* Children hang off a hairline rule, one step in per level. */
.ecs-stor-row[aria-level="2"],
.ecs-stor-row[aria-level="3"],
.ecs-stor-row--skel,
.ecs-stor-row--failed {
  background-image: linear-gradient(var(--ecs-line), var(--ecs-line));
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: calc(17px + (var(--lvl) - 2) * 14px) 0;
}
.ecs-stor-row__chev {
  flex: none;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ecs-text-muted);
}
.ecs-stor-row__chev svg { transition: transform var(--ecs-dur-toggle) var(--ecs-ease); }
.ecs-stor-row__chev.is-open svg { transform: rotate(90deg); }
.ecs-stor-row__chev.is-leaf { visibility: hidden; }
.ecs-stor-row__label {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  overflow: hidden;
}
.ecs-stor-row__code {
  font: var(--ecs-fw-medium) var(--ecs-fs-2xs) var(--ecs-font-mono);
  color: var(--ecs-ink);
  white-space: nowrap;
}
.ecs-stor-row__label .ecs-pill { letter-spacing: 0.04em; gap: 5px; padding: 2px 5px; flex: none; }
.ecs-stor-row__name {
  font: var(--ecs-fw-medium) var(--ecs-fs-sm) var(--ecs-font-body);
  color: var(--ecs-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecs-stor-row--night .ecs-stor-row__name { font: 400 var(--ecs-fs-xs) var(--ecs-font-mono); }
.ecs-stor-row--night .ecs-stor-row__name.is-unknown { color: var(--ecs-warn-ink); }
.ecs-stor-row__meta {
  font: 400 var(--ecs-fs-2xs) var(--ecs-font-mono);
  color: var(--ecs-text-muted);
  white-space: nowrap;
}
.ecs-stor-row__num {
  flex: none;
  font: 400 var(--ecs-fs-2xs) var(--ecs-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ecs-text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.ecs-stor-pane .is-unknown { color: var(--ecs-warn-ink); }
/* A level still on its way: one quiet bar, not a spinner. */
.ecs-stor-row--skel { cursor: default; min-height: 32px; }
.ecs-stor-row--skel span {
  display: block; height: 8px; width: 55%;
  margin-left: 28px;
  background: var(--ecs-surface-3);
}
.ecs-stor-row--failed {
  cursor: default;
  justify-content: space-between;
  padding-left: calc(36px + (var(--lvl) - 2) * 14px);
  font: 400 var(--ecs-fs-2xs) var(--ecs-font-body);
  color: var(--ecs-alert-ink);
}
.ecs-stor-retry {
  appearance: none; background: none; border: none; padding: 4px;
  font: var(--ecs-fw-medium) var(--ecs-fs-2xs) var(--ecs-font-body);
  color: var(--ecs-green-600); cursor: pointer; text-decoration: underline;
}

/* Right: the node */
.ecs-stor-pane {
  min-width: 0;
  border: 1px solid var(--ecs-line);
  background: var(--ecs-surface);
  padding: 16px 24px 24px;
}
.ecs-stor-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; margin: 0 0 12px; padding: 0;
  font: 400 var(--ecs-fs-2xs) var(--ecs-font-mono);
  color: var(--ecs-text-muted);
}
.ecs-stor-crumbs li + li::before { content: '\00B7'; margin: 0 8px; color: var(--ecs-text-faint); }
.ecs-stor-crumbs button {
  appearance: none; background: none; border: none; padding: 2px 0; cursor: pointer;
  font: inherit; color: var(--ecs-green-600);
}
.ecs-stor-crumbs button:hover { text-decoration: underline; text-underline-offset: 3px; }
.ecs-stor-crumbs [aria-current] { color: var(--ecs-ink); }
.ecs-stor-pane__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0;
  font: var(--ecs-fw-bold) 22px / 1.25 var(--ecs-font-display);
  letter-spacing: -0.01em;
  color: var(--ecs-ink);
}
.ecs-stor-pane__meta {
  font: 400 var(--ecs-fs-xs) var(--ecs-font-mono);
  color: var(--ecs-text-muted);
  letter-spacing: 0;
}
.ecs-stor-figs {
  display: flex; flex-wrap: wrap; gap: 4px 0;
  margin: 8px 0 16px;
  font: 400 var(--ecs-fs-xs) / 1.5 var(--ecs-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ecs-text-muted);
}
.ecs-stor-figs__sep { margin: 0 8px; color: var(--ecs-text-faint); }

.ecs-stor-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
/* A flex row, so the field alone sets the label's height: the in-flow
   screen-reader name (.ecs-sr-only) opened a line box above the field and the
   icon centred on the pair, 10px high. */
.ecs-stor-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 360px; color: var(--ecs-text-muted); }
.ecs-stor-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ecs-stor-search .ecs-input { flex: 1; min-width: 0; padding-left: 32px; }
.ecs-stor-sort {
  display: flex; align-items: center; gap: 8px;
  font: var(--ecs-fw-medium) var(--ecs-fs-3xs) var(--ecs-font-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ecs-text-muted);
}
.ecs-stor-sort .ecs-select {
  width: auto;
  padding-right: 38px;
  text-transform: none; letter-spacing: 0;
}
/* One height for the row: a search field and a select that differ by 2px read
   as drift, not as a toolbar. */
.ecs-stor-tools .ecs-input,
.ecs-stor-tools .ecs-select { height: 40px; padding-top: 0; padding-bottom: 0; }
.ecs-stor-shown {
  margin: 0 0 4px;
  font: 400 var(--ecs-fs-2xs) var(--ecs-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ecs-text-muted);
}

/* Descending tables: batch → sites, site → nights. */
.ecs-stor-tablewrap { overflow-x: auto; border: 1px solid var(--ecs-line); }
.ecs-stor-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 var(--ecs-fs-sm) var(--ecs-font-body);
  color: var(--ecs-text);
}
.ecs-stor-table th {
  height: 32px; padding: 0 12px;
  text-align: left; white-space: nowrap;
  background: var(--ecs-surface-2);
  border-bottom: 1px solid var(--ecs-line);
  font: var(--ecs-th-font);
  letter-spacing: var(--ecs-th-tracking);
  text-transform: uppercase;
  color: var(--ecs-th-ink);
}
.ecs-stor-table th.is-num { text-align: right; }
.ecs-stor-table td {
  height: 44px; padding: 0 12px;
  border-top: 1px solid var(--ecs-line-3);
  white-space: nowrap; vertical-align: middle;
}
.ecs-stor-table tbody tr:first-child td { border-top: none; }
/* The name is the one cell allowed to wrap: a long site label takes a second
   line rather than pushing the figures off the side of the pane. */
.ecs-stor-table td:first-child { white-space: normal; min-width: 120px; padding-top: 4px; padding-bottom: 4px; }
.ecs-stor-table td.is-num {
  text-align: right;
  font-family: var(--ecs-font-mono);
  font-size: var(--ecs-fs-xs);
  font-variant-numeric: tabular-nums;
}
.ecs-stor-table .is-act { text-align: right; }
.ecs-stor-trow { cursor: pointer; transition: background-color var(--ecs-dur-fast) var(--ecs-ease); }
.ecs-stor-trow:hover { background-color: var(--ecs-surface-2); }
.ecs-stor-link {
  appearance: none; background: none; border: none; padding: 4px 0; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: var(--ecs-fw-medium) var(--ecs-fs-sm) var(--ecs-font-body);
  color: var(--ecs-green-600);
  text-align: left;
}
.ecs-stor-trow:hover .ecs-stor-link { text-decoration: underline; text-underline-offset: 3px; }
.ecs-stor-link__code { font: var(--ecs-fw-medium) var(--ecs-fs-xs) var(--ecs-font-mono); }
.ecs-stor-link__sub {
  display: block;
  font: 400 var(--ecs-fs-2xs) var(--ecs-font-body);
  color: var(--ecs-text-muted);
  max-width: 280px; overflow: hidden; text-overflow: ellipsis;
}
.ecs-stor-kind { display: block; font-weight: var(--ecs-fw-medium); color: var(--ecs-ink); }
.ecs-stor-mono,
.ecs-stor-range {
  font: 400 var(--ecs-fs-2xs) var(--ecs-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ecs-text-muted);
}

/* The file list: the shared windowed component, plus a download control that
   surfaces on hover but is always in the DOM and always focusable. */
.ecs-wlist--stor { margin-top: 0; }
.ecs-stor-dl {
  appearance: none; cursor: pointer;
  width: 30px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--ecs-radius-ctl);
  color: var(--ecs-green-600);
  opacity: 0;
  transition: opacity var(--ecs-dur-fast) var(--ecs-ease);
}
/* `:focus`, not `:focus-visible`: a control a keyboard has reached has to be
   on screen. */
.ecs-wlist__row:hover .ecs-stor-dl,
.ecs-stor-dl:focus { opacity: 1; }
.ecs-stor-dl:hover { border-color: var(--ecs-line-mint); background: var(--ecs-green-100); }
.ecs-stor-chip {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--ecs-line);
  border-radius: var(--ecs-radius-tag);
  font: var(--ecs-fw-medium) var(--ecs-fs-3xs) / 1.3 var(--ecs-font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ecs-text-muted);
  white-space: nowrap;
}
.ecs-stor-chip--gone { border-color: var(--ecs-alert-line); background: var(--ecs-alert-bg); color: var(--ecs-alert-ink); }
.ecs-stor-gone-sm { display: none; color: var(--ecs-alert); }
.ecs-stor-sm { display: none; }
.ecs-stor-chip--warn { border-color: var(--ecs-warn-line); background: var(--ecs-warn-bg); color: var(--ecs-warn-ink); }

.ecs-stor-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--ecs-line);
  font: 400 var(--ecs-fs-sm) / 1.5 var(--ecs-font-body);
  color: var(--ecs-text-muted);
}
.ecs-stor-note--error { border-color: var(--ecs-alert-line); color: var(--ecs-alert-ink); }
.ecs-stor-note--warn { margin: 0 0 8px; border-color: var(--ecs-warn-line); color: var(--ecs-warn-ink); }
.ecs-stor-textlink {
  appearance: none; background: none; border: none; padding: 2px 0; cursor: pointer;
  font: var(--ecs-fw-medium) var(--ecs-fs-xs) var(--ecs-font-body);
  color: var(--ecs-green-600);
}
.ecs-stor-textlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.ecs-stor-reissue { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.ecs-stor-reissue__err { font: 400 var(--ecs-fs-2xs) var(--ecs-font-body); color: var(--ecs-alert-ink); }

.ecs-stor-skel { display: grid; gap: 8px; }
.ecs-stor-skel span { display: block; height: 32px; background: var(--ecs-surface-2); border: 1px solid var(--ecs-line-3); }

.ecs-stor-empty { max-width: 560px; border-radius: 0; }
.ecs-stor-empty h2 { margin: 0 0 8px; font: var(--ecs-fw-bold) 16px var(--ecs-font-display); color: var(--ecs-ink); }
.ecs-stor-empty p { margin: 0 0 16px; font: 400 var(--ecs-fs-sm) / 1.5 var(--ecs-font-body); color: var(--ecs-text-muted); }

/* The deletion request and a draft's remove: a hairline card at the foot of
   the pane, rust only on the button, never beside a download. */
.ecs-stor-danger {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--ecs-line);
  background: var(--ecs-surface);
}
.ecs-stor-danger.is-open { display: block; border-color: var(--ecs-alert-line); }
.ecs-stor-danger__text { flex: 1 1 320px; min-width: 0; }
.ecs-stor-danger h3 {
  margin: 0 0 4px;
  font: var(--ecs-fw-bold) 16px / 1.3 var(--ecs-font-display);
  color: var(--ecs-ink);
}
.ecs-stor-danger p,
.ecs-stor-danger__q {
  margin: 0;
  font: 400 var(--ecs-fs-sm) / 1.5 var(--ecs-font-body);
  color: var(--ecs-text-muted);
}
.ecs-stor-danger__q { color: var(--ecs-ink); }
.ecs-stor-danger .ecs-stor-chip--asked { margin: 4px 0 8px; }
.ecs-stor-danger__covers {
  margin: 4px 0 16px !important;
  font-family: var(--ecs-font-mono) !important;
  font-size: var(--ecs-fs-xs) !important;
  font-variant-numeric: tabular-nums;
  color: var(--ecs-ink) !important;
}
.ecs-stor-danger__reason { width: 100%; max-width: 560px; resize: vertical; min-height: 72px; font: 400 var(--ecs-fs-sm) / 1.5 var(--ecs-font-body); }
.ecs-stor-danger__hint { margin-top: 4px !important; font-size: var(--ecs-fs-2xs) !important; }
.ecs-stor-danger__rule { margin-top: 12px !important; color: var(--ecs-ink) !important; }
.ecs-stor-danger__err { margin-top: 8px !important; color: var(--ecs-alert-ink) !important; }
.ecs-stor-danger__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ecs-stor-chip--asked {
  display: inline-flex; align-items: center; gap: 6px;
  border-color: var(--ecs-alert-line); background: var(--ecs-alert-bg); color: var(--ecs-alert-ink);
}
.ecs-stor-row__flag { display: inline-flex; flex: none; color: var(--ecs-alert); }

/* One focus treatment for everything the explorer can reach. */
.ecs-stor-row:focus-visible,
.ecs-stor-root:focus-visible,
.ecs-stor-link:focus-visible,
.ecs-stor-dl:focus-visible,
.ecs-stor-crumbs button:focus-visible,
.ecs-stor-textlink:focus-visible,
.ecs-stor-retry:focus-visible,
.ecs-stor-disclose:focus-visible {
  outline: var(--ecs-focus-width) solid var(--ecs-focus-ring);
  outline-offset: calc(-1 * var(--ecs-focus-width));
  box-shadow: 0 0 0 5px var(--ecs-green-300);
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .ecs-stor { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ecs-stor-disclose {
    appearance: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 12px;
    border: 1px solid var(--ecs-line); background: var(--ecs-surface);
    font: var(--ecs-fw-medium) var(--ecs-fs-sm) var(--ecs-font-body);
    color: var(--ecs-ink);
  }
  .ecs-stor-disclose__n {
    margin-left: auto;
    font: 400 var(--ecs-fs-2xs) var(--ecs-font-mono);
    color: var(--ecs-text-muted);
  }
  .ecs-stor-disclose__chev { transition: transform var(--ecs-dur-toggle) var(--ecs-ease); }
  .ecs-stor-disclose__chev.is-open { transform: rotate(90deg); }
  .ecs-stor-tree { display: none; position: static; max-height: 60vh; }
  .ecs-stor-tree.is-open { display: block; }
  .ecs-stor-pane { padding: 16px; }
  /* Status goes on a phone; name, time, size and the download stay. */
  .ecs-wlist--stor .is-wide { display: none; }
  .ecs-wlist--stor .ecs-wlist__head,
  .ecs-wlist--stor .ecs-wlist__row { grid-template-columns: minmax(0, 1fr) 52px 60px 40px; }
  .ecs-stor-date { display: none; }
  .ecs-stor-sm { display: inline; }
  .ecs-stor-gone-sm { display: inline-flex; }
  .ecs-stor-table .is-wide { display: none; }
}
@media (hover: none) {
  .ecs-stor-dl { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ecs-stor-row, .ecs-stor-root, .ecs-stor-trow, .ecs-stor-dl,
  .ecs-stor-row__chev svg, .ecs-stor-disclose__chev { transition: none; }
  .ecs-stor-dl { opacity: 1; }
}

/* =============================================================================
   RESPONSIVE — the design targets desktop; below tablet we relax the fixed
   split/columns so nothing clips. Fidelity is preserved at >= 1100px.
   ============================================================================= */
@media (max-width: 900px) {
  /* Kept, not hidden (U-09): "how much of my quota is left" is exactly the
     question a phone gets asked, right before someone tries to upload. The
     label and the bar go; the numbers, which are the answer, stay. */
  .ecs-storagepill__label,
  .ecs-storagepill__bar { display: none; }
  .ecs-storagepill { padding-left: 0; padding-right: 0; border: none; background: none; }
}
@media (max-width: 700px) {
  .ecs-topbar__tag { display: none; }
  .ecs-userchip__id { display: none; }
}

@media (max-width: 1100px) {
  .ecs-flowbody { padding: 28px 28px 96px; }
  .ecs-chooser__head,
  .ecs-chooser__cards { padding-left: 28px; padding-right: 28px; }
  .ecs-pay-grid { grid-template-columns: 1fr; }
  .ecs-summary { position: static; }
  .ecs-dash__cols { grid-template-columns: 1fr; }
  .ecs-kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .ecs-chooser__cards { flex-direction: column; }
  .ecs-split { flex-direction: column; }
  .ecs-split__panel { width: 100%; min-height: 220px; padding: 32px; }
  .ecs-estimate-grid { grid-template-columns: 1fr; }
  .ecs-dash__aside { display: none; }
}

@media (max-width: 560px) {
  .ecs-flowbody { padding: 20px 16px 96px; }
  .ecs-kpis { grid-template-columns: 1fr; }
  .ecs-sample__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Where the page title takes its 22px phone step (components.css), the pane
   title under it steps down to 16 — two 22px headings read as one level. */
@media (max-width: 600px) {
  .ecs-stor-pane__title { font-size: var(--ecs-fs-md); }
}