/* ==========================================================================
   Client portal styles.

   Loaded after main.css and additive only — it defines new classes and never
   redefines a base class from main.css. Same reasoning as the modifier-class
   rule in CLAUDE.md §4: the marketing site and the portal share a stylesheet,
   so a change made here for the portal must not reach into the public pages.
   ========================================================================== */

.portal__account {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.portal__whoami {
  font-size: 0.875rem;
  color: var(--ink-70);
  /* On a narrow screen a long email would push the sign-out button off the
     edge. Truncating is better than wrapping the nav onto three lines. */
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn--small {
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  min-height: 40px;
}

.portal__muted { color: var(--ink-70); font-size: 0.9375rem; }

/* Fixture-mode warning. Amber border, cream fill — amber stays an accent and
   never becomes a background (docs/04). */
.portal__banner {
  border: 1px solid var(--gold);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  background: #fdf6f1;
}

/* ------------------------------------------------------------- lead list */

.lead-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.lead__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.lead__name { margin: 0; font-size: 1.125rem; }

.lead__time { font-size: 0.875rem; color: var(--ink-70); white-space: nowrap; }

.lead__meta {
  display: grid;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.125rem;
  font-size: 0.9375rem;
}
@media (min-width: 34rem) {
  .lead__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lead__meta div { display: flex; gap: 0.5rem; min-width: 0; }
.lead__meta dt { color: var(--ink-70); flex-shrink: 0; }
.lead__meta dd {
  margin: 0;
  min-width: 0;
  /* Email addresses are long and unbreakable; without this they overflow the
     card on a phone. This is the same class of bug mobile QA caught on the
     Start-page form. */
  overflow-wrap: anywhere;
}

.lead__block { margin-top: 1rem; }

.lead__block h4 {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-70);
}

.lead__block p {
  margin: 0;
  /* Replies contain real newlines. Preserving them keeps the reply looking like
     the email that was actually sent, rather than one run-on paragraph. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The reply is the product's output — set it apart from the customer's own
   words so the two are never confused at a glance. */
.lead__block--reply {
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
}

/* ==========================================================================
   Monthly report — /portal/report.html

   Modifier-scoped per CLAUDE.md §4: everything here is a new `.report__*`
   class, so nothing a shared class does on the dashboard changes because of
   this page.
   ========================================================================== */

.report__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin: 1.5rem 0;
}

.report__monthpick {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--ink-70);
}

.report__monthpick select {
  font: inherit;
  font-size: 1rem;
  color: var(--navy);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

/* Mobile-first (CLAUDE.md §10/§12): one stat per row by default, so a long
   label never squeezes a number onto two lines on a phone. */
.report__stats {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 34rem) {
  .report__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.report__stat {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.report__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--navy);
}

.report__stat-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--ink-70);
}

.report__note {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-70);
}

.report__back { margin-top: 1.5rem; }

/* Printing is the PDF story (functions/_lib/report.js explains why there is no
   generated PDF). What prints has to be the report itself — not the site
   chrome, not a dropdown the reader cannot use on paper. */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .report__controls,
  .report__back {
    display: none !important;
  }

  body { background: #fff; }

  .report__stat,
  .lead .card {
    background: #fff;
    /* Page backgrounds are commonly not printed; a border keeps the cards
       legible when the fill is dropped. */
    border: 1px solid #ccc;
    box-shadow: none;
  }

  /* Never split a lead across a page break — half an enquiry on one sheet and
     half on the next is the sort of thing that makes a report look cheap. */
  .lead { break-inside: avoid; page-break-inside: avoid; }
}