/* Southport Signal: w7-reports.css (created by S0, owned by S5 (The Month: web/src/views/reports.js)).
 *
 * Page rules for The Month: the four counts, the trails, team use, coverage, who we lost to.
 * Everything shared (rows, kickers, the call block, the case, the sheet, sample
 * marks, freshness, the one-line notes) lives in w7.css and is not repeated here.
 * Tokens only (web/styles/tokens.css); no shadows on panels; the phone number
 * stays the largest text on every call block; nothing a rep reads on a phone
 * under 12px. Prefix every class w7 and the page's own letter, so the page's
 * rules never collide with the kit's or another page's. */

/* DISPLAY §4.7 / §6.2: exactly one 1440 x 900 screen. §9 check 22 measures
 * scrollHeight <= 900 at 1440 x 900 on .w7r-page. */
.w7r-page { max-width: 1440px; margin: 0 auto; padding: 10px 28px 10px; }

.w7r-tabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid var(--line, #E2E7EC); }
.w7r-tabs a { padding: 5px 4px 6px; margin-right: 18px; font-size: 13.5px; font-weight: 650; color: var(--mute, #6C7B86); text-decoration: none; border-bottom: 2px solid transparent; }
.w7r-tabs a.on { color: var(--ink, #101C26); border-bottom-color: var(--found, #176ac2); }
.w7r-tabs a:hover { color: var(--ink, #101C26); }

.w7r-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 8px; }
.w7r-dateline { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute, #6C7B86); }
.w7r-h1 { font-size: 23px; line-height: 1.18; letter-spacing: -.4px; margin: 4px 0 2px; font-weight: 700; color: var(--ink, #101C26); }
.w7r-sub { font-size: 14px; line-height: 1.35; color: var(--ink2, #3B4A55); margin: 0; max-width: 900px; }
.w7r-hdactions { flex: none; }

/* -- the four counts, joined by arrows (DISPLAY §4.7) --------------------- */
.w7r-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line, #E2E7EC); border-radius: 12px; background: var(--card, #fff); overflow: hidden; }
.w7r-kpi { padding: 8px 18px 8px; position: relative; }
.w7r-kpi + .w7r-kpi { border-left: 1px solid var(--line, #E2E7EC); }
.w7r-kl { font-size: 12.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--mute, #6C7B86); }
.w7r-kn { font-family: var(--font-num, 'Rajdhani', 'Inter', system-ui, sans-serif); font-weight: 700; font-size: 34px; line-height: 1.05; color: var(--ink, #101C26); margin-top: 2px; }
.w7r-kn.na { font-size: 26px; color: var(--mute, #6C7B86); line-height: 1.3; }
.w7r-ks { font-size: 13px; color: var(--ink2, #3B4A55); line-height: 1.3; }
.w7r-kw { font-size: 12.5px; color: var(--mute, #6C7B86); margin-top: 3px; line-height: 1.3; }
.w7r-kw.reason { color: var(--guard, #936313); }
.w7r-arr { position: absolute; right: -9px; top: 26px; width: 18px; height: 18px; border-radius: 50%; background: var(--card, #fff); border: 1px solid var(--line, #E2E7EC); display: grid; place-items: center; z-index: 2; color: var(--mute, #6C7B86); }
.w7r-arr svg { width: 11px; height: 11px; }

/* -- sample preview on the Sold tile (SAMPLE-DATA §4-5) -------------------- */
.w7r-sample { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding: 6px 12px; font-size: 12.5px; line-height: 1.3; color: var(--ink2, #3B4A55); border-left: 2px dashed var(--sample, #a0338a); background: var(--sample-tint, #fbeef8); border-radius: 0 8px 8px 0; }
.w7r-samplabel { font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--sample, #a0338a); }
.w7r-samplive { color: var(--mute, #6C7B86); }

/* -- the three-column grid: examples | team use | coverage ---------------- */
.w7r-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; margin-top: 8px; align-items: start; }
.w7r-box { background: var(--card, #fff); border: 1px solid var(--line, #E2E7EC); border-radius: 12px; padding: 0 14px 8px; }
.w7r-boxh { display: flex; align-items: baseline; gap: 10px; padding: 8px 0 6px; border-bottom: 1px solid var(--line2, #EDF1F4); }
.w7r-boxh h2 { font-size: 14.5px; font-weight: 700; margin: 0; color: var(--ink, #101C26); }
.w7r-aside { margin-left: auto; font-size: 12.5px; color: var(--mute, #6C7B86); }

/* -- Business we would have missed: real trails, dashed = not yet --------- */
.w7r-ex { padding: 6px 0; border-top: 1px solid var(--line2, #EDF1F4); }
.w7r-examples .w7r-boxh + .w7r-ex { border-top: none; }
.w7r-exhd { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.w7r-exhd b { font-size: 14px; color: var(--ink, #101C26); }
.w7r-exmeta { font-size: 12.5px; color: var(--mute, #6C7B86); }
.w7r-extext { font-size: 13px; line-height: 1.35; margin-top: 2px; color: var(--ink2, #3B4A55); }
.w7r-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; }
.w7r-trail span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.w7r-trail span.y { background: var(--found-tint, #edf5ff); border: 1px solid var(--found-line, #cfe2fb); color: var(--found, #176ac2); }
.w7r-trail span.p { border: 1px dashed var(--line, #E2E7EC); color: var(--mute, #6C7B86); }
.w7r-trail svg { width: 11px; height: 11px; color: var(--mute, #6C7B86); flex: none; }

/* -- Is the team using it? -------------------------------------------------- */
.w7r-teamp { margin: 0 0 6px; font-size: 13px; line-height: 1.35; color: var(--ink2, #3B4A55); }
.w7r-hbar { display: grid; grid-template-columns: 58px minmax(0, 1fr) 32px; gap: 8px; align-items: center; font-size: 13px; margin: 3px 0; }
.w7r-hn { color: var(--ink2, #3B4A55); }
.w7r-ht { height: 10px; border-radius: 5px; background: var(--line2, #EDF1F4); overflow: hidden; }
.w7r-ht i { display: block; height: 100%; background: var(--found, #176ac2); }
.w7r-hv { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink, #101C26); }

/* -- How much of the market do we know? / Who we lost to ------------------- */
.w7r-cov { display: grid; grid-template-columns: 172px minmax(0, 1fr) 50px; gap: 6px 10px; align-items: center; font-size: 13.5px; }
.w7r-covl { font-size: 13.5px; color: var(--ink2, #3B4A55); }
.w7r-covbar { height: 12px; border-radius: 6px; background: var(--line2, #EDF1F4); position: relative; overflow: hidden; }
.w7r-covbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--found, #176ac2); opacity: .85; border-radius: 6px; }
.w7r-covbar.zero i { background: var(--others, #b9c6d3); }
.w7r-covv { font-variant-numeric: tabular-nums; text-align: right; font-weight: 650; color: var(--ink, #101C26); }
.w7r-lost-label { margin-top: 8px; font-size: 12px; color: var(--mute, #6C7B86); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.w7r-losttext { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink2, #3B4A55); }

/* -- freshness ---------------------------------------------------------- */
.w7r-fresh { font-size: 12px; color: var(--mute, #6C7B86); margin-top: 5px; line-height: 1.4; }
.w7r-freshfoot { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line, #E2E7EC); }

@media (max-width: 900px) {
  .w7r-grid { grid-template-columns: 1fr; }
  .w7r-kpis { grid-template-columns: repeat(2, 1fr); }
  .w7r-kpi + .w7r-kpi:nth-child(3) { border-left: none; }
}