/* ============================================================
   The agency Home: every client (a click opens their CRM) and
   the money. The monthly figure is the stamp.
   ============================================================ */

.home { padding: var(--s6) clamp(var(--s4), 3vw, var(--s8)) var(--s10); }
.home-grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); align-items: start; max-width: 1240px; }

.home-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s5); border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--lift-1); min-width: 0; }
.home-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.home-panel-head h2 { font-size: var(--t-21); font-weight: 650; letter-spacing: var(--track-title); }
.home-empty { font-size: var(--t-13); padding: var(--s3) 0; }

/* Find a client: the first thing the cursor is in. */
.home-find { position: relative; display: block; }
.home-find svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.home-find .input { width: 100%; height: 46px; padding-left: 42px; font-size: var(--t-15); border-radius: var(--r-control); }

/* The clients: a row is one click into their CRM. */
.home-clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.home-client { display: flex; align-items: center; gap: var(--s2); min-width: 0; border-top: 1px solid var(--line); }
.home-client:first-child { border-top: 0; }
.home-client-open {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s3); text-align: left;
  padding: var(--s3) var(--s3); margin: 2px 0; border-radius: var(--r-control);
  transition: background var(--fast) var(--ease);
}
.home-client-open:hover, .home-client-open:focus-visible { background: var(--surface-2); }
.home-client-open:hover .home-go { color: var(--accent); transform: translateX(2px); }
.home-avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: var(--t-13); font-weight: 700; }
.home-client-text { min-width: 0; }
.home-client-text strong { font-size: var(--t-15); font-weight: 600; }
.home-client-text .faint { font-size: var(--t-13); }
.home-go { flex: none; color: var(--text-3); transition: color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.home-details { flex: none; }

.home-status { flex: none; font-size: var(--t-12); font-weight: 600; padding: 4px 9px; border-radius: var(--r-chip); white-space: nowrap; }
.home-status.is-go { color: var(--won-text); background: var(--won-soft); }
.home-status.is-gold { color: var(--booked-text); background: var(--booked-soft); }
.home-status.is-bad { color: var(--attention-text); background: var(--attention-soft); }
.home-status.is-muted { color: var(--text-2); background: var(--surface-3); }

/* Money */
.home-money { position: sticky; top: var(--s4); }
.home-stamp {
  text-align: left; display: grid; gap: 4px; padding: var(--s5); clip-path: var(--chamfer);
  background: var(--frame-grad); color: var(--rail-text); transition: transform var(--fast) var(--ease);
}
.home-stamp:hover { transform: translateY(-1px); }
.home-fig-label { font-size: var(--t-11); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--rail-text-3); }
.home-fig-value { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.home-fig-sub { font-size: var(--t-13); color: var(--rail-text-2); }
.home-goal { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.home-goal-bar { flex: 1 1 auto; height: 6px; border-radius: var(--r-full); background: rgba(239, 233, 224, 0.14); overflow: hidden; }
.home-goal-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: #74aecb; }
.home-pace { font-size: var(--t-11); font-weight: 600; color: #8fd0a8; white-space: nowrap; }
.home-pace.is-behind { color: #f0a07e; }

.home-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: 0; }
.home-facts div { padding: var(--s3); border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--line); }
.home-facts dt { font-size: var(--t-12); color: var(--text-2); }
.home-facts dd { margin: 4px 0 0; font-size: var(--t-21); font-weight: 650; letter-spacing: -0.02em; }

.home-attention { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.home-attention-row { width: 100%; display: flex; align-items: center; gap: var(--s3); text-align: left; padding: var(--s3); border-radius: var(--r-control); background: var(--attention-soft); color: var(--text); }
.home-attention-row strong { font-size: var(--t-14); font-weight: 600; }
.home-attention-row .faint { font-size: var(--t-12); }
.home-attention-row svg { color: var(--attention-text); flex: none; }
.home-money-go { width: 100%; justify-content: center; }
.home-money-actions { display: grid; gap: var(--s2); }

@media (max-width: 1080px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-money { position: static; }
}
@media (max-width: 560px) {
  .home { padding: var(--s4) var(--s3) calc(var(--tabbar-h) + var(--s8)); }
  .home-panel { padding: var(--s4); }
  .home-details { display: none; }
  .home-client-open { padding: var(--s3) var(--s2); }
}

/* The goal, and changing it */
.home-goal-edit { width: 100%; justify-content: space-between; gap: var(--s3); height: auto; padding: var(--s2) var(--s3); font-weight: 500; color: var(--text-2); text-align: left; white-space: normal; }
.home-goal-change { color: var(--accent-text); font-weight: 600; flex: none; }
.home-goal-form { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--line); }
.home-goal-fields { display: grid; gap: var(--s3); grid-template-columns: 1.2fr 0.8fr 1.2fr; }
.home-goal-fields .input { width: 100%; }
.home-goal-note { font-size: var(--t-12); }
@media (max-width: 560px) { .home-goal-fields { grid-template-columns: 1fr 1fr; } .home-goal-fields .field:last-child { grid-column: 1 / -1; } }