/* ENG-1507 design language v2 components (DESIGN-LANGUAGE.md, approved 24 Sep 2026).
   Rendered by modules/design-language.mjs. Every colour is a token. A component that varies
   by stage or status reads --tone-* from the `dl-tone-*` class tokens.css defines, so one
   rule serves every stage. */

.dl-eyebrow {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

.dl-icon { width: 1.375rem; height: 1.375rem; flex: none; }

/* Buttons. The hover rules restate colour because the global `a:hover` outranks a class. */
.dl-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: 0 var(--space-4);
  border: 1.5px solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.dl-button .dl-icon { width: 1.125rem; height: 1.125rem; }
.dl-button--primary { background: var(--accent); color: var(--accent-text); box-shadow: var(--accent-lift); }
.dl-button--primary:hover { background: var(--accent-hover); color: var(--accent-text); }
.dl-button--secondary { background: var(--bg-card-opaque); color: var(--accent); border-color: var(--accent); }
.dl-button--secondary:hover { background: var(--accent-soft); color: var(--accent); }
.dl-button--glass { background: var(--on-navy-fill); color: var(--on-navy-emphasis); border: 1px solid var(--on-navy-border-strong); font-weight: var(--fw-semibold); }
.dl-button--glass:hover { background: var(--on-navy-fill-track); color: var(--on-navy-emphasis); }
.dl-button--gold { background: var(--on-navy-gold); color: var(--on-gold-ink); }
.dl-button--gold:hover { color: var(--on-gold-ink); }

/* Page hero. */
.dl-page-hero {
  display: grid;
  gap: var(--space-6);
  padding: clamp(var(--space-6), 3.4vw, var(--space-12));
  border-radius: var(--radius-section);
  background: var(--page-hero-bg);
  box-shadow: var(--page-hero-shadow);
  color: var(--on-navy-emphasis);
}
.dl-page-hero :focus-visible { outline-color: var(--on-navy-emphasis); }
.dl-page-hero__main { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-10); }
.dl-page-hero__lead { flex: 1 1 24rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3-5); }
.dl-page-hero__lead > .dl-eyebrow { color: var(--chrome-accent-text); }
.dl-page-hero__title {
  margin: 0;
  color: inherit;
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.dl-page-hero__lede { margin: 0; max-width: 40rem; color: var(--on-navy-secondary); font-size: var(--fs-lede); line-height: var(--lh-body-card); }
.dl-page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2-5); }
.dl-page-hero__actions .dl-button { min-height: 3.125rem; padding: 0 var(--space-6); font-size: var(--fs-body-md); }
.dl-page-hero__actions .dl-button--primary { box-shadow: var(--accent-glow); }
.dl-page-hero__aside { flex: 0 1 30rem; min-width: min(100%, 16rem); display: flex; flex-direction: column; gap: var(--space-3); }
.dl-page-hero__band { display: grid; gap: var(--space-2-5); padding-top: var(--space-5); border-top: 1px solid var(--on-navy-border); }

.dl-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3); }
.dl-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--hero-metric-border);
  border-radius: var(--radius-card-lg);
  background: var(--hero-metric-bg);
}
.dl-stat__value { font-size: var(--fs-stat); font-weight: var(--fw-heavy); line-height: 1.1; letter-spacing: var(--tr-snug); font-variant-numeric: tabular-nums; }
.dl-stat__label { color: var(--on-navy-body); font-size: var(--fs-meta); }
/* A figure the page cannot give yet: a quiet glyph, the reason in caption type (ENG-1649). */
.dl-stat--unknown .dl-stat__value { color: var(--on-navy-secondary); font-weight: var(--fw-semibold); }
.dl-stat__note { color: var(--on-navy-secondary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.dl-stat--attention { border-color: var(--on-navy-gold-border); background: var(--on-navy-gold-fill); }
.dl-stat--attention .dl-stat__value { color: var(--on-navy-gold-text); }
.dl-stat--attention .dl-stat__label { color: var(--on-navy-gold-soft); }

/* Glass side card: one figure, the chip for what it leaves out, then label/value rows. */
.dl-glass-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  padding: var(--space-6);
  border: 1px solid var(--hero-metric-border);
  border-radius: var(--radius-tile);
  background: var(--hero-metric-bg);
  box-shadow: inset 0 1px 0 var(--on-navy-fill);
}
.dl-glass-card__eyebrow { color: var(--chrome-accent-text); }
.dl-glass-card__value { font-size: var(--fs-headline); font-weight: var(--fw-heavy); line-height: 1; letter-spacing: var(--tr-snug); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dl-glass-card__sub { color: var(--on-navy-body); font-size: var(--fs-body-sm); }
.dl-glass-card__chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--on-navy-gold);
  color: var(--on-gold-ink);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
}
.dl-glass-card__chip .dl-icon { width: 0.875rem; height: 0.875rem; }
.dl-glass-card__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3-5);
  border-top: 1px solid var(--on-navy-border);
}
.dl-glass-card__row { display: flex; flex-direction: column; gap: var(--space-0-5); }
.dl-glass-card__row dt { color: var(--on-navy-body); font-size: var(--fs-meta); }
.dl-glass-card__row dd { margin: 0; font-size: var(--fs-body-md); font-weight: var(--fw-bold); }

.dl-headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--on-navy-gold-border);
  border-radius: var(--radius-tile);
  background: var(--hero-metric-bg);
  box-shadow: inset 0 1px 0 var(--on-navy-fill);
}
.dl-headline__eyebrow { display: flex; align-items: center; gap: var(--space-2-5); color: var(--on-navy-gold-soft); }
.dl-headline__eyebrow::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--on-navy-gold);
  box-shadow: 0 0 0 5px var(--on-navy-gold-halo);
}
.dl-headline__figure { font-size: var(--fs-headline); font-weight: var(--fw-heavy); line-height: 1; letter-spacing: var(--tr-snug); font-variant-numeric: tabular-nums; }
.dl-headline__text { margin: 0; font-size: var(--fs-lede); font-weight: var(--fw-semibold); line-height: 1.45; }
.dl-headline__detail { margin: 0; color: var(--on-navy-body); font-size: var(--fs-body); line-height: var(--lh-body-snug); }
.dl-headline > .dl-button { margin-top: auto; align-self: flex-start; }

/* Hero band: the stage bar or stage track under a hairline. It sits where the glow is
   brightest, so its text uses --on-navy-secondary rather than the blue eyebrow. */
.dl-band-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  color: var(--on-navy-secondary);
  font-size: var(--fs-meta);
}
.dl-band-head .dl-eyebrow { font-size: var(--fs-caption); }

.dl-stage-bar { display: grid; gap: var(--space-2-5); }
.dl-stage-bar__track { display: block; height: 0.875rem; overflow: hidden; border-radius: var(--radius-pill); }
.dl-stage-bar__track svg { display: block; width: 100%; height: 100%; }
.dl-stage-bar__segment { fill: var(--tone-bright); }
.dl-stage-bar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--on-navy-secondary);
  font-size: var(--fs-meta);
}
.dl-stage-bar__legend li { display: flex; align-items: center; gap: var(--space-2); }
.dl-stage-bar__legend li::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 3px; background: var(--tone-bright); }

.dl-stage-track-wrap { display: grid; gap: var(--space-3); }
.dl-stage-track { display: flex; flex-wrap: wrap; gap: var(--space-2-5); margin: 0; padding: 0; list-style: none; }
.dl-stage-step {
  flex: 1 1 9rem;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3-5);
  border: 1px solid var(--on-navy-border);
  border-radius: var(--radius-card);
}
.dl-stage-step__marker {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 2px solid var(--tone-bright);
  border-radius: 50%;
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
}
.dl-stage-step__marker .dl-icon { width: 0.875rem; height: 0.875rem; stroke-width: 3; }
.dl-stage-step__text { min-width: 0; display: flex; flex-direction: column; }
.dl-stage-step__label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.dl-stage-step__detail { font-size: var(--fs-caption); }
.dl-stage-step--done { background: var(--hero-metric-bg); color: var(--on-navy-body); }
.dl-stage-step--next { border-style: dashed; border-color: var(--on-navy-border-strong); color: var(--on-navy-secondary); }
.dl-stage-step--done .dl-stage-step__marker { background: var(--tone-bright); color: var(--page-hero-start); }
.dl-stage-step--current {
  border-color: var(--on-navy-border-strong);
  background: var(--tone-solid);
  color: var(--on-solid);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--tone-solid) 55%, transparent);
}
.dl-stage-step--current .dl-stage-step__marker { border-color: var(--on-solid); background: var(--on-solid); color: var(--tone-solid); }
.dl-stage-step--current .dl-stage-step__label { font-weight: var(--fw-heavy); }

/* Panel: every section sits in one, with an icon badge. */
.dl-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--x-panel-border);
  border-radius: var(--radius-section);
  background: var(--bg-card-opaque);
  box-shadow: var(--panel-shadow);
}
.dl-panel__head { display: flex; align-items: center; gap: var(--space-3-5); padding: var(--space-6) var(--space-6) var(--space-5); }
.dl-panel__titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.dl-panel__title {
  margin: 0;
  color: var(--navy-solid);
  font-size: var(--fs-panel-title);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-snug);
}
.dl-panel__subtitle { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); }
.dl-panel__head > .dl-chip { flex: none; padding: var(--space-1-5) var(--space-3-5); border-radius: var(--radius-pill); font-size: var(--fs-meta); }
.dl-panel__body { flex: 1 1 auto; min-width: 0; overflow-x: auto; padding: 0 var(--space-6) var(--space-6); }
.dl-panel--band .dl-panel__head { padding-bottom: var(--space-6); border-bottom: 1px solid var(--tone-band-border); background: var(--tone-band); }
.dl-panel--band .dl-panel__body { padding-top: var(--space-5); }
.dl-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  border-radius: var(--radius-badge);
  background: var(--accent-soft);
  color: var(--accent);
}
.dl-panel--band .dl-badge { background: var(--tone-solid); color: var(--on-solid); }

/* Segmented control: the view switch sits directly above the view it switches. */
.dl-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1-5);
  border-radius: var(--radius-card-lg);
  background: var(--tray-bg);
  box-shadow: var(--tray-shadow);
}
.dl-segment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  min-height: 3rem;
  padding: 0 var(--space-5) 0 var(--space-3-5);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-slate);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.dl-segment:hover { color: var(--navy-solid); }
.dl-segment__icon { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: var(--radius-icon); background: var(--frost); }
.dl-segment__icon .dl-icon { width: 1rem; height: 1rem; }
.dl-segment__count { padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-pill); background: var(--frost-strong); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.dl-segment:is([aria-pressed="true"], [aria-current="page"]) { background: var(--bg-card-opaque); color: var(--navy-solid); font-weight: var(--fw-bold); box-shadow: var(--raised-shadow); }
.dl-segment:is([aria-pressed="true"], [aria-current="page"]) .dl-segment__icon { background: var(--accent); color: var(--accent-text); }
.dl-segment:is([aria-pressed="true"], [aria-current="page"]) .dl-segment__count { background: var(--accent-soft); color: var(--accent-ink); }

/* Chips: the word is always shown; colour only reinforces it. */
.dl-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-chip);
  background: var(--tone-soft);
  color: var(--tone-ink);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}
.dl-chip--solid { background: var(--tone-solid); color: var(--on-solid); font-weight: var(--fw-heavy); }
.dl-chip--label {
  padding: var(--space-0-5) var(--space-2-5);
  border-radius: var(--radius-pill);
  background: var(--tone-solid);
  color: var(--on-solid);
  font-size: var(--fs-label);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Board: one column per stage, equal height, cards lifted off a tinted body. A column is the
   containing block for its .sr-only count, so the count scrolls and clips with the board on a
   phone instead of widening the page (ENG-1649). */
.dl-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: stretch; gap: var(--space-4); }
.dl-board-column { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-tile); background: var(--tone-tint); }
.dl-board-column__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-0-5) var(--space-2);
  padding: var(--space-3-5) var(--space-4);
  background: var(--tone-solid);
  color: var(--on-solid);
}
.dl-board-column__label { margin: 0; color: inherit; font-size: var(--fs-meta); font-weight: var(--fw-heavy); line-height: var(--lh-tight); letter-spacing: 0.08em; text-transform: uppercase; }
.dl-board-column__count { padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-pill); background: var(--on-solid); color: var(--tone-solid); font-size: var(--fs-caption); font-weight: var(--fw-heavy); }
.dl-board-column__total { grid-column: 1 / -1; font-size: var(--fs-meta); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.dl-board-column__cards { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-3); list-style: none; }
.dl-board-column__hint {
  margin: var(--space-3);
  padding: var(--space-3-5);
  border: 2px dashed color-mix(in srgb, var(--tone-solid) 30%, transparent);
  border-radius: var(--radius-card);
  color: var(--tone-ink);
  font-size: var(--fs-meta);
  line-height: 1.45;
  text-align: center;
}
.dl-board-column__cards + .dl-board-column__hint { margin-top: 0; }

.dl-board-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3-5);
  border-radius: var(--radius-card);
  background: var(--bg-card-opaque);
  color: var(--text-primary);
  text-decoration: none;
  box-shadow: var(--card-shadow);
}
a.dl-board-card:hover { color: var(--text-primary); box-shadow: var(--raised-shadow); }
.dl-board-card--waiting,
a.dl-board-card--waiting:hover { box-shadow: 0 0 0 2px var(--attention-outline), var(--attention-lift); }
.dl-board-card__title { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.3; }
.dl-board-card__row { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-meta); }
.dl-board-card__client { color: var(--text-secondary); }
.dl-board-card__amount { color: var(--navy-solid); font-size: var(--fs-body-sm); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.dl-board-card > .dl-chip { align-self: flex-start; }
.dl-board-card__meta { padding-top: var(--space-2); border-top: 1px solid var(--x-hairline); color: var(--text-muted); font-size: var(--fs-caption); }

/* Register: filter chips with counts, then a navy header row. */
.dl-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dl-filter {
  min-height: 2.375rem;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--tone-soft);
  color: var(--tone-ink);
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.dl-filter[aria-pressed="true"] { background: var(--navy-solid); color: var(--on-solid); }
.dl-register { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.dl-register th {
  padding: var(--space-3) var(--space-6);
  background: var(--navy-solid);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}
.dl-register td { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--x-hairline); color: var(--text-body); vertical-align: middle; }
.dl-register__amount { text-align: right; font-variant-numeric: tabular-nums; }
.dl-register__row--attention > td { background: var(--attention-row); }