/* /funnel — Chris's read of the site. One panel on the site's auth look; every value is a theme.css token via site.css. */
.panel.funnel{max-width:860px;padding:32px}
.panel.funnel .head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.panel.funnel h1{margin-bottom:0}
.range{display:inline-flex;gap:0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow:hidden}
.range .btn{border:0;border-radius:0;height:38px;padding:0 14px;font-size:var(--text-small);font-weight:600;color:var(--ink-soft);background:var(--ground)}
.range .btn+.btn{border-left:1px solid var(--line-strong)}
.range .btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.range .btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.state{font-size:var(--text-body-md);color:var(--ink-soft)}
#signedout .btn.primary{width:auto;margin-top:16px;height:44px;padding:0 22px}
/* the two rates — the one loud thing on the page: the desk's accent tile at the hero stop */
.rates{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rate{border:1.5px solid var(--accent);background:var(--accent-soft);border-radius:var(--radius);padding:18px 20px 16px;min-width:0}
.rate b{display:block;font-size:var(--text-hero);font-weight:var(--font-weight-hero);letter-spacing:var(--tracking-hero);line-height:1;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.rate span{display:block;margin-top:8px;font-size:var(--text-small);font-weight:400;color:var(--accent-ink)}
.rate b.none{font-weight:400;color:var(--ink-faint)}
/* the six counts, in the funnel's order */
.counts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:12px}
.counts div{border:1px solid var(--line);border-radius:var(--radius);padding:12px;min-width:0}
.counts b{display:block;font-size:var(--text-headline);font-weight:var(--font-weight-headline);letter-spacing:var(--tracking-headline);line-height:1.1;font-variant-numeric:tabular-nums}
.counts span{display:block;margin-top:4px;font-size:var(--text-small);font-weight:400;color:var(--ink-soft)}
/* three short lists, name / count rows */
.lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.list{min-width:0}
.list h2{font-size:var(--text-body-md);font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--line-strong)}
.list ul{list-style:none}
.list li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--text-small);color:var(--ink-soft);min-width:0}
.list li span{overflow-wrap:anywhere}
.list li b{font-size:var(--text-body-md);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
.list li.none{color:var(--ink-faint)}
/* per day, newest first; the box scrolls on a phone, never the page */
.days{margin-top:28px;border:1px solid var(--line);border-radius:var(--radius);overflow:auto}
.days table{width:100%;border-collapse:collapse;font-size:var(--text-small);font-variant-numeric:tabular-nums}
.days th,.days td{text-align:right;padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.days thead th{font-size:var(--text-small);font-weight:600;color:var(--ink-soft);background:var(--surface)}
.days th[scope="row"],.days th:first-child{text-align:left;font-weight:600;color:var(--ink)}
.days tbody tr:last-child th,.days tbody tr:last-child td{border-bottom:0}
@media (min-width:2000px){.panel.funnel{max-width:960px}}
@media (max-width:760px){
 .panel.funnel{padding:24px 20px}
 .panel.funnel .head{margin-bottom:16px}
 .range .btn{height:44px;padding:0 16px}
 .rates{gap:10px}
 .rate{padding:14px 14px 12px}
 .rate b{font-size:var(--text-display-phone)}
 .counts{grid-template-columns:1fr 1fr;gap:10px}
 .counts b{font-size:var(--text-headline-phone)}
 .lists{grid-template-columns:1fr;gap:20px;margin-top:24px}
 .days{margin-top:24px;max-height:280px}
 .days th,.days td{padding:9px 10px}
 .days thead th{white-space:normal;vertical-align:bottom}
}