/* Home — ENG-1502 "The business this week". Rendered by modules/home-pulse.mjs. Every colour
   is a token; a tile's accent comes from its dl-tone-* class. Bar widths, bar heights and the
   ring's arc are SVG attributes, because the shipped CSP blocks style attributes. */

/* On a phone the "Checked" pill drops under the title instead of squeezing it to one word a line. */
[data-home-pulse] .dl-panel__head { flex-wrap: wrap; }
[data-home-pulse] .dl-panel__titles { flex-basis: 12rem; }

.home-pulse__group { margin-bottom: var(--space-3); color: var(--text-secondary); font-size: var(--fs-caption); }

.home-pulse-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: var(--space-4);
}

.home-pulse-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-lg);
  background: var(--bg-card-opaque);
}
.home-pulse-tile--attention { border-color: var(--attention-outline); background: var(--attention-row); box-shadow: var(--attention-lift); }

.home-pulse-tile__title {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  margin: 0;
  color: var(--text-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
}
.home-pulse-tile__badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--tone-soft);
  color: var(--tone-ink);
}
.home-pulse-tile__badge .dl-icon { width: 1.05rem; height: 1.05rem; }
.home-pulse-tile--attention .home-pulse-tile__title { color: var(--attention-text); }

.home-pulse-tile__figure {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-figure);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-snug);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.home-pulse-tile__line { margin: 0; color: var(--text-body); font-size: var(--fs-body-sm); }
.home-pulse-tile__note { margin: 0; color: var(--text-secondary); font-size: var(--fs-caption); line-height: 1.45; }

/* Links meet the 44 px touch target without growing the tile's type. */
.home-pulse-tile__link,
.home-pulse-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-ink);
  font-weight: var(--fw-bold);
}
.home-pulse-tile__link { margin-top: auto; font-size: var(--fs-meta); }
.home-pulse-link { vertical-align: middle; }

/* Pipeline: priced against unpriced. */
.home-pulse-bar {
  display: block;
  width: 100%;
  height: 0.625rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft);
}
.home-pulse-bar__priced { fill: var(--tone-solid); }
.home-pulse-bar__unpriced { fill: var(--stage-draft-bright); }

/* Ready to send: one age chip per quote. */
.home-pulse-ages { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; }

/* With clients: Issued → Follow up → Expiry, top to bottom, so it never wraps mid-track in a
   narrow tile. The rail sits in the gap between pills. */
.home-pulse-track { display: grid; justify-items: start; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.home-pulse-track li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--tone-soft);
  color: var(--tone-ink);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.home-pulse-track li + li::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: var(--space-3);
  width: 2px;
  height: var(--space-2);
  background: var(--border-visible);
}
.home-pulse-track__count { font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }

/* Win rate: won as a share of decided, by count. */
.home-pulse-ring { display: block; width: 4rem; height: 4rem; }
.home-pulse-ring circle { fill: none; stroke-width: 5; }
.home-pulse-ring__track { stroke: var(--neutral-soft); }
.home-pulse-ring__won { stroke: var(--tone-solid); }
.home-pulse-ring text { fill: var(--text-primary); font-size: 0.45rem; font-weight: var(--fw-heavy); }

/* Brain this week: filings per day. */
.home-pulse-days { display: grid; gap: var(--space-1); }
.home-pulse-days svg { display: block; width: 100%; height: 2.875rem; }
.home-pulse-days__bar { fill: var(--tone-solid); }
.home-pulse-days__bar--none { fill: var(--border-visible); }
.home-pulse-days__labels { display: grid; grid-template-columns: repeat(7, 1fr); color: var(--text-muted); font-size: var(--fs-label); text-align: center; }

.home-pulse-floor { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--fs-meta); }

/* Delivery and money: named, not connected, never a zero. */
.home-pulse-delivery {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-lg);
  background: var(--neutral-soft);
}
.home-pulse-delivery__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.home-pulse-delivery__head .dl-eyebrow { color: var(--text-secondary); font-size: var(--fs-caption); }
.home-pulse-delivery__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3-5);
  margin: var(--space-3-5) 0 0;
  padding: 0;
  list-style: none;
}
.home-pulse-delivery__card { padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--bg-card-opaque); }
.home-pulse-delivery__card h4 { margin: 0 0 var(--space-1); color: var(--text-body); font-size: var(--fs-body); }
.home-pulse-delivery__card p { margin: 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.45; }

/* Your attention — ENG-1503. Rendered by modules/quote-needs-me.mjs. It sits beside Everywhere
   else; the two panels share one height and end on the same line, and the attention rows share
   out any spare height evenly (home/HOME.md → Layout rule). */
.home-attention-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}
.home-attention,
.home-places { display: flex; flex-direction: column; min-width: 0; }
.home-attention > .dl-panel,
.home-places > .dl-panel { flex: 1 1 auto; }
@media (max-width: 1100px) {
  .home-attention-row { grid-template-columns: minmax(0, 1fr); }
}

.home-attention .dl-panel__head { flex-wrap: wrap; }
.home-attention .dl-panel__titles { flex-basis: 12rem; }
.home-attention .dl-panel__body { display: flex; flex-direction: column; padding: 0; }

.home-attention__count {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--tone-solid);
  color: var(--on-solid);
  font-size: var(--fs-body);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;
}

.home-attention__rows { display: flex; flex: 1 1 auto; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.home-attention__row {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--x-panel-border);
}
.home-attention__row:last-child { border-bottom: 0; }

.home-attention__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: var(--radius-pill);
  background: var(--tone-soft);
  color: var(--tone-ink);
}
.home-attention__icon .dl-icon { width: 1.2rem; height: 1.2rem; }

.home-attention__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-1); min-width: 0; }
.home-attention__text p { margin: 0; overflow-wrap: anywhere; }
.home-attention__label { color: var(--tone-ink); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.home-attention__line { color: var(--text-primary); font-size: var(--fs-body-lg); font-weight: var(--fw-bold); line-height: 1.35; }
.home-attention__detail { color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: 1.45; }
.home-attention__open { flex: none; min-height: var(--touch); }

/* On a phone the button drops under the text at full width instead of squeezing it. */
@media (max-width: 640px) {
  .home-attention__row { flex-wrap: wrap; align-items: flex-start; padding: var(--space-4); }
  .home-attention__text { flex-basis: calc(100% - 2.625rem - var(--space-4)); }
  .home-attention__open { flex-basis: 100%; justify-content: center; }
}

.home-attention__clear { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-4); padding: var(--space-6); }
.home-attention__clear-title { color: var(--text-primary); font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.home-attention__clear-line { color: var(--text-body); font-size: var(--fs-body); line-height: 1.55; }
.home-attention__checked { color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }

.home-attention__floor { margin: 0; padding: var(--space-3) var(--space-6) var(--space-5); color: var(--text-secondary); font-size: var(--fs-meta); }

.home-attention__failed { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.home-attention__error { margin: 0; color: var(--text-body); font-size: var(--fs-body); }

.home-places .home-place-list { grid-template-columns: minmax(0, 1fr); }
.home-attention__floor-link { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--accent-ink); font-weight: var(--fw-bold); }

/* Where you left off — ENG-1505. Rendered by modules/home-left-off.mjs. Each card is one link to
   its quote; the stage track is the design language's, drawn light for a white panel. */
.home-left-off .dl-panel__body { display: flex; flex-direction: column; gap: var(--space-4); }
.home-left-off__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.home-left-off__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--bg-card-opaque);
}
.home-left-off__card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.home-left-off__card:focus-within { box-shadow: var(--focus-ring); }
.home-left-off__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.home-left-off__title { min-width: 0; color: var(--text-primary); font-size: var(--fs-body-lg); font-weight: var(--fw-bold); text-decoration: none; overflow-wrap: anywhere; }
.home-left-off__title:focus-visible { outline: none; }
/* The title's link covers the whole card, so every part of it opens the quote. */
.home-left-off__title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.home-left-off__value { color: var(--text-primary); font-size: var(--fs-figure-sm); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.home-left-off__meta { margin: 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.45; overflow-wrap: anywhere; }

.home-left-off .dl-band-head { display: none; }
.home-left-off .dl-stage-track { flex-wrap: nowrap; gap: var(--space-1-5); }
.home-left-off .dl-stage-step { flex: 1 1 auto; min-width: min-content; gap: var(--space-1-5); padding: var(--space-1-5) var(--space-2); border-color: var(--border-subtle); color: var(--text-secondary); box-shadow: none; }
.home-left-off .dl-stage-step__marker { width: 1.125rem; height: 1.125rem; border-width: 1.5px; border-color: var(--tone-solid); }
.home-left-off .dl-stage-step__label { font-size: var(--fs-caption); line-height: 1.2; overflow-wrap: normal; }
/* On a phone the numbers go, so four stages still fit one line. */
@media (max-width: 640px) {
  .home-left-off .dl-stage-step__marker { display: none; }
}
.home-left-off .dl-stage-step--done { background: var(--tone-soft); color: var(--tone-ink); }
.home-left-off .dl-stage-step--done .dl-stage-step__marker { background: var(--tone-solid); color: var(--on-solid); }
.home-left-off .dl-stage-step--current { border-color: var(--tone-solid); background: var(--tone-solid); color: var(--on-solid); }
.home-left-off .dl-stage-step--next { border-color: var(--border-subtle); }

.home-left-off__empty-title { margin: 0; color: var(--text-primary); font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.home-left-off__empty-line { margin: var(--space-1) 0 0; color: var(--text-body); font-size: var(--fs-body); line-height: 1.55; }
.home-left-off__count,
.home-left-off__floor { margin: 0; color: var(--text-secondary); font-size: var(--fs-meta); }
.home-left-off__failed { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.home-left-off__error { margin: 0; color: var(--text-body); font-size: var(--fs-body); }
.home-left-off__footer { margin: 0; }
.home-left-off__footer a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--accent-ink); font-weight: var(--fw-bold); }
.home-left-off__footer a::after { content: " →"; white-space: pre; }