/* =====================================================================
   public/app/home.css: Home (the Home redesign, 14 October 2026, from the approved design: design-v3/final)

   Four figures, the new leads of the last 14 days, this week's calendar, what needs the owner (one table) and
   the month's money. The page answers to its own width, not the window's (container queries on .hn): four columns
   when there is room; two under 940px of page, the chart right under the figures; under 700px the figures, then
   New leads, Calendar and Money side by side in one strip that swipes (named tabs above it), then Needs you
   (the owner, 14 October).

   Every rule is under .hn (or names a .hn- class). Every colour, shadow and size is a role or a token from
   shell.css and the sheets before it; nothing here is a raw value. Hover only where a pointer hovers; a press is
   0.96; motion is named property by property and stops for reduced motion.
   ===================================================================== */
.hn{container:hn / inline-size;max-width:1920px;margin:0 auto;padding-top:6px} /* the page fills the screen (the owner, 14 October); a cap only for very wide monitors */
.hn [hidden]{display:none!important}
.hn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;grid-template-areas:"k k k k" "c c c s" "n n n m"}
.hn-rail{display:contents}
.hn-rail-tabs{display:none}
.hn-kpis{grid-area:k;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hn-chart{grid-area:c}.hn-cal{grid-area:s}.hn-needs{grid-area:n}.hn-money{grid-area:m}
.hn.is-fresh .hn-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"n"}
.hn.is-fresh .hn-rail{display:none}
.hn:not(.is-fresh) .hn-grid:has(.hn-money[hidden]){grid-template-areas:"k k k k" "c c c s" "n n n n"} /* a plan without the CRM has no money card: Needs you takes its place */
.hn:not(.is-fresh) .hn-grid:has(.hn-cal[hidden]){grid-template-areas:"k k k k" "c c c c" "n n n m"} /* nor booking: no calendar, the chart takes its place */
.hn:not(.is-fresh) .hn-grid:has(.hn-cal[hidden]):has(.hn-money[hidden]){grid-template-areas:"k k k k" "c c c c" "n n n n"}
/* the list opened with View more: Money keeps its own height beside it (equal heights only while both are short) */
.hn-grid:has(.hn-more[aria-expanded="true"]) .hn-money{align-self:start}
.hn .notes{margin-bottom:20px}

/* ---------- cards ---------- */
.hn .hn-card{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-tile);background:var(--card-sheen);border:1px solid var(--card-edge);box-shadow:var(--card-lift)}
.hn-chart{padding:24px 24px 20px}.hn-cal{padding:24px 24px 18px}.hn-needs{padding:24px 24px 18px}.hn-money{padding:24px 24px 22px}
.hn-ch{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px 16px}
.hn-ch-t{min-width:0}
.hn-money .hn-ch,.hn-cal .hn-ch{flex-wrap:nowrap}
.hn-ch h2,.hn-nh h2{margin:0;font-size:var(--fs-lg);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.hn-nh h2:focus{outline:none}
.hn-nh h2:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-chip)}
.hn-sub{margin-top:4px;font-size:var(--fs-sm);line-height:1.4;color:var(--ink-3)}
/* ---------- This week (home.js homeWeek, the status-dots design): the week's figures at the top of the leads card ---------- */
.hn-week{container:week / inline-size;margin:-4px 0 18px;padding:0 0 16px;box-shadow:inset 0 -1px 0 var(--hair)}
.hn-week[hidden]{display:none}
.hn-week-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.hn-week-h h3{margin:0;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.hn-week-h span{font-size:var(--fs-meta);color:var(--ink-3)}
.hn-figs{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.hn-fig{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;row-gap:6px;padding:0 16px;min-width:0}
.hn-fig:first-child{padding-left:0}
.hn-fig:last-child{padding-right:0}
.hn-fig+.hn-fig{box-shadow:-1px 0 0 var(--hair)}
.hn-fig-l{grid-column:1 / -1;font-size:var(--fs-meta);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hn-fig-v{display:flex;align-items:baseline;gap:8px;min-width:0}
.hn-fig-v b{font-family:var(--display);font-size:var(--fs-figure);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--ink)}
/* plain zeros: the face's tabular zero is slashed (shell.css says the same), so these figures are plain */
.hn-fig-v b,.hn-chg{font-variant-numeric:normal;font-feature-settings:normal}
.hn-chg{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--tint-2,var(--select));font-size:var(--fs-meta);font-weight:500;color:var(--ink-2);white-space:nowrap}
.hn-bars{display:flex;align-items:flex-end;gap:3px;height:26px;align-self:end}
.hn-bars i{display:block;width:5px;height:var(--h);min-height:2px;border-radius:2px;background:var(--st-bars)}
.hn-bars i:last-child{background:var(--st-bars-now)}
@container week (max-width:560px){
  .hn-figs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .hn-fig{grid-template-columns:minmax(0,1fr);padding:0 12px} /* the bars drop under the figure: beside it there is no room for the change */
  .hn-bars{justify-self:start}
  .hn-fig:nth-child(odd){padding-left:0;box-shadow:none}
  .hn-fig:nth-child(even){padding-right:0}
  .hn-fig-v b{font-size:var(--fs-amount)}
  .hn-week-h span{display:none}
}
.hn-sub b{font-weight:600;color:var(--ink)}
.hn-empty{margin:14px 0 0;font-size:var(--fs-sm);color:var(--ink-3)}
.hn-open{position:relative;flex:none;width:44px;height:44px;margin:-12px -14px -12px -6px;border-radius:50%;color:var(--ink-3)}
.hn-open svg.i{width:18px;height:18px}
@media (hover:hover){.hn-open:hover{background:var(--icon-hover);color:var(--ink)}}

/* dots: a series, a kind of row, a state of money (beside their words, so they are marks, not the only sign) */
.hn .dot{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%}
.hn .dot.web{background:var(--lime);box-shadow:var(--glow-dot)}
.hn .dot.phone{background:var(--series-phone)}
.hn .dot.book{background:var(--series-3)}
.hn .dot.urgent{background:var(--err-solid)}
.hn .dot.leads{background:var(--dot-lead)}
.hn .dot.chats,.hn .dot.reminders{background:var(--ink-3)} /* amber marks what waits on the owner: new leads, and Said yes */
.hn .dot.quotes{background:var(--st-off)}
.hn .dot.visits{background:var(--st-ok)}
.hn .dot.paid{background:var(--ok-ink)}
.hn .dot.owed{background:var(--err-solid)}
.hn .dot.booked{background:var(--book-ink)}
.hn .dot.said_yes{background:var(--you-dot)}
.hn .dot.quoted{background:var(--info-ink)}
.hn-mo li.said_yes:not(.has) .dot{background:var(--ink-4)} /* nothing waiting: the dot goes quiet */

/* ---------- the four figures ---------- */
.hn-kpi{container:kpi / inline-size;position:relative;display:flex;flex-direction:column;min-width:0;padding:20px 24px;border-radius:var(--r-tile);background:var(--card-sheen);border:1px solid var(--card-edge);box-shadow:var(--card-lift);color:var(--ink);text-decoration:none;
  transition:border-color var(--duration-quick) var(--ease-out),background-color var(--duration-quick) var(--ease-out)}
.hn-kpi.is-lit{background:var(--hero-bg);border-color:var(--hero-edge);box-shadow:var(--hero-lift);color:var(--on-hero)}
@media (hover:hover){a.hn-kpi:hover{border-color:var(--line-2)}}
a.hn-kpi:active{background:var(--raise)}
.hn-kpi:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.hn-kh{display:flex;align-items:center;gap:9px;min-height:26px}
.hn-ki{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tint-1);box-shadow:inset 0 0 0 1px var(--tile-ring);color:var(--ink-2)}
.hn-ki svg.i{width:14px;height:14px;stroke-width:2}
.hn-kl{flex:1 1 auto;min-width:0;font-size:var(--fs-sm);font-weight:500;line-height:1.2;color:var(--ink-2)}
.is-lit .hn-ki{background:var(--hero-ico);box-shadow:inset 0 0 0 1px var(--hero-ico-ring);color:var(--on-hero-2)}
.is-lit .hn-kl{font-weight:600;color:var(--on-hero-2)}
.hn-go{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;margin:-7px -11px -7px 0;border-radius:50%;background:var(--btn-2);box-shadow:inset 0 0 0 1px var(--btn-2-ring);color:var(--ink-2);
  transition:translate var(--duration-quick) var(--ease-out),scale var(--duration-quick) var(--ease-out),background-color var(--duration-quick) var(--ease-out)}
.is-lit .hn-go{background:var(--hero-go);box-shadow:none;color:var(--on-hero-go)}
.hn-go svg.i{width:16px;height:16px;stroke-width:2}
@media (hover:hover){.hn-go:hover{translate:1px -1px}}
.hn-go:active{scale:.96}
.hn-go:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.is-lit .hn-go:focus-visible{outline-color:var(--on-hero)}
.hn-kb{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:14px}
.hn-kv{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.hn-kn{font:700 var(--fs-kpi)/.92 var(--display);letter-spacing:-.02em;white-space:nowrap;color:var(--ink)}
.hn-kn.is-xlong{font-size:var(--fs-kpi-xs)} /* a figure of ten characters or more ("$1,124,580"), at any width */
.is-lit .hn-kn{color:var(--on-hero)}
.hn-kpi[data-k="paid"].has .hn-kn{color:var(--ok-ink)}
.hn-kp{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--tile-ring);font-size:var(--fs-meta);font-weight:500;line-height:1;white-space:nowrap;color:var(--ink-2)}
.hn-kp .d{flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.hn-kp.hot{padding:0 10px 0 9px;font-weight:600;background:var(--err-solid);box-shadow:0 0 0 1.5px var(--hero-pill-ring);color:var(--on-err-solid)}
.hn-kp.owed{padding:0 10px 0 9px;font-weight:600;background:var(--err-bg-strong);box-shadow:none;color:var(--err-ink)}
.is-lit .hn-kp:not(.hot){background:var(--hero-ico);box-shadow:none;color:var(--on-hero-2)}
.hn-spark{flex:none;display:block;width:92px;height:42px;color:var(--spark-ink)}
.hn-spark svg{display:block;overflow:visible}
.hn-spark mask{mask-type:alpha} /* the fade is read by its alpha (home.js draws its stops in currentColor) */
.hn-spark .sp-l{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;filter:var(--glow-spark)}
.hn-spark .s0{stop-color:currentColor;stop-opacity:.2}
.hn-spark .s1{stop-color:currentColor;stop-opacity:0}
.hn-kpi[data-k="paid"] .hn-spark{color:var(--spark-ok)}
.hn-kpi[data-k="paid"] .sp-l{filter:var(--glow-spark-ok)}
.is-lit .hn-spark{color:var(--on-hero)}
.is-lit .hn-spark .sp-l{filter:none}
.is-lit .hn-spark .s0{stop-opacity:var(--hero-spark-fill)}
.hn-spark .sp-e{fill:var(--lime);stroke:var(--hero-go);stroke-width:1.75}
@container kpi (max-width:199px){.hn-spark{display:none}} /* the design: shown at 1440 (218 inside a tile), hidden at 1280 (178) */
@container kpi (max-width:200px){.hn-kn.is-long{font-size:var(--fs-kpi-xs)}.hn-kp.is-long .hn-kp-x{display:none}} /* seven characters or more ("$24,580") in a narrow tile: smaller, never past its edge; "$24,580 owed" */
.hn-kpis.is-skel .hn-kpi{gap:14px;min-height:150px}

/* ---------- the chart: website chat a lit line, phone a dotted one, today a column ---------- */
.hn-legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:-6px}
.hn-lg{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 12px;border-radius:var(--r-pill);background:var(--tint-1);box-shadow:inset 0 0 0 1px var(--tile-ring);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;color:var(--ink-2)}
.hn-lg b{font-weight:600;color:var(--ink)}
.hn-plot-wrap{flex:1 1 auto;display:flex;flex-direction:column;margin-top:26px}
.hn-plot{container:plot / inline-size;flex:1 1 auto;display:grid;grid-template-columns:16px minmax(0,1fr);grid-template-rows:minmax(170px,1fr) auto;column-gap:14px;row-gap:12px}
.hn-y{position:relative;font-size:var(--fs-meta);text-align:right;color:var(--ink-3)}
.hn-y span{position:absolute;right:0;top:var(--y);translate:0 -50%;line-height:1}
.hn-area-box{position:relative;min-height:170px;touch-action:pan-y}
.hn-gl,.hn-base{position:absolute;left:0;right:0;top:var(--y);border-top:1px dashed var(--chart-grid)}
.hn-base{top:auto;bottom:0;border-top:1px solid var(--chart-base)}
.hn-today{position:absolute;left:calc(var(--x) - 17px);width:34px;top:min(56px,calc(var(--y,100%) - 8px));bottom:0;border-radius:17px 17px 8px 8px;background:var(--today-col);box-shadow:var(--today-col-lift)}
.hn-sv{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hn-sv-a{-webkit-mask-image:linear-gradient(90deg,transparent 0%,currentColor 6%,currentColor 100%);mask-image:linear-gradient(90deg,transparent 0%,currentColor 6%,currentColor 100%)} /* a mask reads only the alpha */
.hn-sv-a .a0{stop-color:var(--chart-area)}
.hn-sv-a .a1{stop-color:var(--chart-area-mid)}
.hn-sv-a .a2{stop-color:transparent}
.hn-days line{stroke:var(--chart-day);stroke-width:1}
.hn-ph{fill:none;stroke:var(--series-phone);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 5}
.hn-sv-w{filter:var(--glow-line)}
.hn-web{fill:none;stroke:var(--lime);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.hn-mk{position:absolute;left:var(--x,96.43%);top:var(--y,100%);border-radius:50%;translate:-50% -50%;pointer-events:none}
.hn-mk.phone{width:9px;height:9px;background:var(--dot-hole);box-shadow:0 0 0 2px var(--series-phone)}
.hn-mk.web{width:12px;height:12px;background:var(--dot-hole);box-shadow:0 0 0 3px var(--lime);filter:var(--glow-line)} /* (a glow token can be none, so it is never put in a list) */
/* the bubble sits beside the column, never on it: the dots on a tall day stay in sight */
.hn-bub{position:absolute;z-index:1;left:calc(var(--x,96.43%) - 25px);top:-4px;translate:-100% 0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px 12px 9px;border-radius:var(--r-bubble);background:var(--tt-bg);box-shadow:var(--bubble-lift);color:var(--tt-fg);white-space:nowrap;pointer-events:none}
.hn-bub.is-left{left:calc(var(--x) + 25px);translate:0 0}
.hn-bub b{font:700 var(--fs-bubble)/1 var(--display);letter-spacing:-.02em}
.hn-bub small{font-size:var(--fs-badge);font-weight:500;color:var(--tt-sub)}
.hn-x{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));font-size:var(--fs-meta);text-align:center;color:var(--ink-3)}
.hn-x>*{justify-self:center;white-space:nowrap}
.hn-xt{margin-top:-3px;padding:3px 9px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--today-ring);font-weight:600;color:var(--ink)}
/* the column, the dots and the bubble slide to the day under the pointer */
.hn-today{transition:left var(--duration-fast) var(--ease-out),top var(--duration-fast) var(--ease-out)}
.hn-mk{transition:left var(--duration-fast) var(--ease-out),top var(--duration-fast) var(--ease-out)}
.hn-bub{transition:left var(--duration-fast) var(--ease-out),translate var(--duration-fast) var(--ease-out)}
.hn-plot.is-empty .hn-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0}
@container plot (max-width:519px){.hn-x span.x2:not(.x4){visibility:hidden}}
.hn-plot-sk{display:flex;align-items:flex-end;gap:10px;height:200px;margin-top:26px}
.hn-plot-sk .sk{flex:1}

/* ---------- Calendar: the week, a dot for each appointment (up to three), today on the hero colour; then today's ---------- */
.hn-cal{container:cal / inline-size}
.hn-cal-body{flex:1 1 auto;display:flex;flex-direction:column}
.hn-cal-wk{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin:16px -4px 14px}
.hn-cal-d{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:9px 0 10px;border:0;border-radius:var(--r-item);background:none;font:inherit;font-size:var(--fs-meta);font-weight:500;color:var(--ink-3);cursor:pointer;touch-action:manipulation;transition-property:scale,background-color;transition-duration:var(--duration-quick);transition-timing-function:var(--ease-out)}
.hn-cal-d:active{scale:.96}
@media (hover:hover){.hn-cal-d:not(.is-today):hover{background:var(--row-hover)}}
@media (prefers-reduced-motion:reduce){.hn-cal-d:active{scale:1}}
.hn-cal-d b{font:600 var(--fs-day)/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.hn-cal-d.is-past b{color:var(--ink-3)}
.hn-cal-d.is-today{background:var(--hero-bg);box-shadow:var(--hero-lift);font-weight:600;color:var(--on-hero-2)}
.hn-cal-d.is-today b{font-weight:700;color:var(--on-hero)}
.hn-cal-dots{display:flex;gap:2px;height:4px}
.hn-cal-dots i{width:4px;height:4px;border-radius:50%;background:var(--book-ink)}
.hn-cal-d.is-today .hn-cal-dots i{background:var(--on-hero)}
.hn-cal-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:4px}
.hn-cal-h b{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.hn-cal-h small{font-size:var(--fs-meta);color:var(--ink-3)}
.hn-cal-l{display:flex;flex-direction:column;margin:0 -10px;padding:0;list-style:none}
.hn-cal-l li+li{border-top:1px solid var(--hair)}
.hn-cal-r{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:3px;width:100%;min-height:var(--h-touch);padding:10px;border:0;border-radius:var(--r-item);background:none;font:inherit;text-align:left;color:inherit;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.hn-cal-r:hover{background:var(--row-hover)}}
.hn-cal-r:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.hn-cal-t{font-size:var(--fs-body);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.hn-cal-r :is(.chip,.sdot){justify-self:end}
.hn-cal-s{grid-column:1 / -1;min-width:0;overflow:hidden;font-size:var(--fs-meta);white-space:nowrap;text-overflow:ellipsis;color:var(--ink-3)}
.hn-cal-s span{color:var(--ink-2)}
.hn .hn-cal-go{align-self:flex-start;margin-top:12px}
.hn-cal-sk{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.hn-cal-sk .sk.lg{height:52px}
/* a narrow card: never squeeze the dates; fewer days, and the time on a line of its own */
@container cal (max-width:319px){
  .hn-cal-d:not(.in5){display:none}
  .hn-cal-r{grid-template-areas:"t t" "s p"}
  .hn-cal-t{grid-area:t;white-space:nowrap}
  .hn-cal-r :is(.chip,.sdot){grid-area:p}
  .hn-cal-s{grid-area:s;grid-column:auto;white-space:normal}
  .hn-cal-r :is(.chip,.sdot){align-self:start}
}
@container cal (max-width:169px){.hn-cal-d:not(.in3){display:none}}

/* ---------- Needs you: the pills, then one table ---------- */
.hn-needs{container:needs / inline-size}
.hn-nh{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 16px}
/* the pills stay one row at every width: beside the title when they fit, else a row of their own that scrolls
   sideways, its hidden end faded (home.js fadeMark). The padding keeps a focus ring inside the scrolling box. */
.hn-chips{display:flex;flex-wrap:nowrap;gap:6px;min-width:0;max-width:calc(100% + 12px);margin:-13px -6px;padding:6px;overflow-x:auto;scrollbar-width:none}
.hn-chips::-webkit-scrollbar{display:none}
.hn-chip{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;height:var(--h-filter);padding:0 12px;border-radius:var(--r-btn);background:var(--chip-off);box-shadow:inset 0 0 0 1px var(--chip-off-ring);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;color:var(--ink-2);
  transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out),scale var(--duration-quick) var(--ease-out)}
.hn-chip .dot{width:7px;height:7px}
.hn-cn{color:var(--ink-3)} /* proportional: the face's tabular zero is slashed, which a count beside a word does not need */
.hn-chip[aria-pressed="true"]{background:var(--chip-on);box-shadow:var(--chip-on-hi);font-weight:600;color:var(--on-chip-on)}
.hn-chip[aria-pressed="true"] .hn-cn{color:var(--chip-on-n)}
@media (hover:hover){.hn-chip[aria-pressed="false"]:hover{background:var(--chip-off-hover);color:var(--ink)}}
.hn-chip:active{scale:.96}
.hn-chip:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.hn-t{width:calc(100% + 28px);margin:24px -14px 0;border-collapse:separate;border-spacing:0;font-size:var(--fs-body);line-height:1.35}
.hn-t :where(thead) th{padding:0 12px 10px;border-bottom:8px solid transparent;box-shadow:inset 0 -1px 0 var(--hair-2);font-size:var(--fs-meta);font-weight:500;line-height:1.2;text-align:left;color:var(--ink-3)}
.hn-t :where(thead) th:first-child{padding-left:14px}
.hn-t :where(thead) th:last-child{padding-right:14px;text-align:right}
.hn-t th.hn-who{font-weight:inherit;text-align:left} /* each row's name is its header (a screen reader says whose button it is) */
/* (:where adds nothing to a rule's weight: these weigh what ".hn-t td" did, so the rules after them still win) */
.hn-t .hn-st-h,.hn-t .hn-act-h{width:1%;white-space:nowrap}
.hn-t :where(tbody) :is(td,th){padding:11px 12px;border-top:1px solid transparent;border-bottom:1px solid var(--hair);vertical-align:middle;transition:background-color var(--duration-quick) var(--ease-out)}
.hn-t :where(tbody) :is(td,th):first-child{padding-left:14px}
.hn-t :where(tbody) td:last-child{padding-right:14px;text-align:right}
.hn-t .hn-r.is-last :is(td,th){border-bottom-color:transparent}
.hn-t tr[data-go],.hn-t tr[data-hn-appt]{cursor:pointer}
@media (hover:hover){.hn-t .hn-r:not(.is-urgent) tr[data-go]:hover :is(td,th),.hn-t .hn-r:not(.is-urgent) tr[data-hn-appt]:hover :is(td,th){background:var(--row-hover);border-bottom-color:transparent}}
/* round ends, as the urgent row's (the owner, 15 Oct: a square hover looks boxy) */
@media (hover:hover){.hn-t .hn-r:not(.is-urgent) tr:is([data-go],[data-hn-appt]):hover>:first-child{border-radius:var(--r-row-tint) 0 0 var(--r-row-tint)}}
@media (hover:hover){.hn-t .hn-r:not(.is-urgent) tr:is([data-go],[data-hn-appt]):hover>:last-child{border-radius:0 var(--r-row-tint) var(--r-row-tint) 0}}
.hn-t .hn-r.is-urgent>tr:first-child :is(td,th){background:var(--urgent-row);border-top-color:var(--urgent-edge);border-bottom-color:var(--urgent-edge)}
.hn-t .hn-r.is-urgent>tr:first-child :is(td,th):first-child{padding-left:13px;border-left:1px solid var(--urgent-edge);border-radius:var(--r-row-tint) 0 0 var(--r-row-tint)}
.hn-t .hn-r.is-urgent>tr:first-child td:last-child{padding-right:13px;border-right:1px solid var(--urgent-edge);border-radius:0 var(--r-row-tint) var(--r-row-tint) 0}
.hn-whob{display:flex;align-items:center;gap:12px;min-width:0}
.hn-av{flex:none;display:grid;place-items:center;width:var(--av-list);height:var(--av-list);border-radius:50%;background:var(--avatar-row);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--tile-ring);font-size:var(--fs-meta);font-weight:600;letter-spacing:.02em;color:var(--avatar-ink)}
.hn-av svg.i{width:16px;height:16px;color:var(--ink-2)}
.hn-wt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.hn-name{position:relative;display:block;max-width:26ch;font:inherit;font-weight:600;text-align:left;text-decoration:none;color:var(--ink)}
.hn-name bdi{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.hn-name{padding:0;border:0;background:none;cursor:pointer}
@media (hover:hover){a.hn-name:hover,button.hn-name:hover{text-decoration:underline;text-underline-offset:3px}}
.hn-name:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-chip);text-decoration:underline;text-underline-offset:3px}
.hn-meta{font-size:var(--fs-meta);white-space:nowrap;color:var(--ink-3)}
.hn-t .is-urgent .hn-meta{color:var(--urgent-meta)}
.hn-what{color:var(--ink-body)}
.hn-what-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.hn-what-s{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--ink-3)}
.hn-st{white-space:nowrap}
.hn .hn-st .sdot{vertical-align:middle} /* the state as a dot and its word (status.css), as in every list */
.hn-acts{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.hn .hn-btn{gap:8px;min-width:var(--w-row-btn);height:var(--h-list-btn);padding:0 14px;border:0;border-radius:var(--r-btn);background:var(--btn-2);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--btn-2-ring);font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.hn .hn-btn svg.i{width:16px;height:16px;opacity:1}
@media (hover:hover){.hn .hn-btn:not(.btn-primary):hover{background:var(--btn-2-hover);border-color:transparent;color:var(--ink)}}
.hn .hn-btn.btn-primary{background:var(--lime);box-shadow:var(--edge-primary),var(--glow-btn);color:var(--night)}
@media (hover:hover){.hn .hn-btn.btn-primary:hover{background:var(--lime-hover)}}
.hn .hn-btn[aria-expanded="true"]{background:var(--btn-2-hover)}
.hn-dots{position:relative;flex:none;width:36px;height:36px;border-radius:50%;color:var(--ink-3)}
.hn-dots svg.i{width:18px;height:18px}
.hn-dots[aria-expanded="true"]{background:var(--icon-hover);color:var(--ink)}
@media (hover:hover){.hn-dots:hover{background:var(--icon-hover);color:var(--ink)}}
.hn-dots-gap{flex:none;width:36px}
@media (pointer:coarse){
  .hn .hn-btn{position:relative;height:var(--h-ctl)}
  .hn .hn-btn::after{content:"";position:absolute;inset:calc(50% - 22px) 0} /* 32 to see (Solid Glass), 44 to press */
  .hn .hn-dots::after{width:44px;height:44px}
  .hn-chip{height:40px}
  .hn-chip::after{content:"";position:absolute;inset:-2px 0}
  .hn-go::after{content:"";position:absolute;inset:-2px}
  .hn-name::after{content:"";position:absolute;inset:-13px -4px}
}
/* an answer to write, and the steps to go live, open under their row */
.hn-t .hn-acc-tr td,.hn-t .hn-extra-tr td{padding:0;border:0;text-align:left}
.hn-t .hn-r.t-acc:not([data-open="true"])>tr:first-child :is(td,th){border-bottom-color:var(--hair)}
.hn .teach-in{padding:0 14px 14px 64px}
.hn .hn-grow{flex:1}
.hn-t .hn-extra-tr td{padding:0 14px 14px 64px;border-bottom:1px solid var(--hair)}
.hn .nl-steps{margin:0;padding:0}
/* the rest, counted where they are listed */
.hn-t .hn-more-row td{padding:6px 14px;text-align:left}
.hn-tail{display:inline-flex;align-items:center;gap:6px;min-height:var(--h-touch);font-size:var(--fs-sm);font-weight:600;text-decoration:none;color:var(--ink-2);transition:color var(--duration-quick) var(--ease-out)}
.hn-tail svg.i{width:14px;height:14px}
@media (hover:hover){.hn-tail:hover{color:var(--ink)}}
.hn-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:auto;padding-top:10px}
.hn-foot-t{font-size:var(--fs-sm);color:var(--ink-3)}
.hn-more{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:var(--h-touch);margin:-6px 0;margin-inline-start:auto;font-size:var(--fs-sm);font-weight:600;color:var(--ink);transition:color var(--duration-quick) var(--ease-out),scale var(--duration-quick) var(--ease-out)}
.hn-more svg.i{width:16px;height:16px;transition:rotate var(--duration-fast) var(--ease-out)}
.hn-more[aria-expanded="true"] svg.i{rotate:180deg}
@media (hover:hover){.hn-more:hover{color:var(--lime)}}
.hn-more:active{scale:.96}
.hn-more:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-chip)}
.hn .caught{padding:28px 0 12px}
.hn-skel{margin-top:16px}

/* the row's menu (built on body, as crm.js's) */
.hn-menu{position:fixed;left:0;right:auto;top:0;bottom:auto;z-index:70;min-width:184px;width:max-content;max-width:calc(100vw - 16px)}
.hn-menu svg.i{color:var(--ink-3)}
@media (pointer:coarse){.hn-menu a,.hn-menu button{height:var(--h-touch)}}

/* ---------- the month's money: Paid first; the four are never added together ---------- */
.hn-money-body{flex:1 1 auto;display:flex;flex-direction:column}
.hn-split{display:flex;gap:3px;height:8px;margin-top:18px}
.hn-split span{min-width:10px;border-radius:var(--r-pill)}
.hn-split .s-paid{background:var(--ok-ink);box-shadow:var(--glow-ok-bar)}
.hn-split .s-owed{background:var(--err-solid);box-shadow:var(--glow-err-bar)}
.hn-split .s-booked{background:var(--book-ink);opacity:var(--bar-dim)}
.hn-split .s-said_yes{background:var(--you-dot);opacity:var(--bar-dim)}
.hn-split .s-quoted{background:var(--info-ink);opacity:var(--bar-dim)}
.hn-noamt{margin-top:18px}
.hn-mo{display:flex;flex-direction:column;margin:8px 0 18px;padding:0;list-style:none}
.hn-mo li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l a" "s s";align-items:center;column-gap:10px;row-gap:2px;padding:10px 0;border-top:1px solid var(--hair)}
.hn-mo li:first-child{border-top:0}
.hn-mo-l{grid-area:l;display:flex;align-items:center;gap:10px;min-width:0;font-size:var(--fs-body);color:var(--ink)}
.hn-mo-l b{font-weight:600}
.hn-amt{grid-area:a;font:700 var(--fs-amount)/1 var(--display);letter-spacing:-.02em;white-space:nowrap;color:var(--ink)}
.hn-mo li.paid.has .hn-amt{color:var(--ok-ink)}
.hn-mo li.owed.has .hn-amt{color:var(--err-ink)}
.hn-mo small{grid-area:s;padding-left:18px;font-size:var(--fs-sm);line-height:1.35;color:var(--ink-3)}
.hn .hn-remind{width:100%;height:var(--h-touch);margin-top:auto}
@media (max-width:720px){.hn .hn-remind{height:var(--h-ctl)}} /* a phone: 32 to see, 44 to press by its edge (app.css); a computer keeps its own */
.hn-mo-sk{display:flex;flex-direction:column;gap:14px;margin-top:18px}

/* ---------- the table as stacked rows: a name and its status, then what it is about and its button ----------
   (a wrapping row, not a grid: the button's width must not take room from the name above it) */
@container needs (max-width:640px){
  .hn-t{display:block;margin-top:12px}
  .hn-t caption{display:block}
  .hn-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hn-t tbody{display:block}
  .hn-t .hn-r:not(.hn-more-row)>tr:first-child{display:grid;grid-template-columns:var(--av-list) minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:12px;row-gap:4px;align-items:center;padding:16px 14px;border-bottom:1px solid var(--hair)}
  .hn-t .hn-r.is-last>tr:first-child{border-bottom-color:transparent}
  .hn-needs .hn-t .hn-r :is(td,th),.hn-needs .hn-t .hn-r :is(td,th):first-child,.hn-needs .hn-t .hn-r td:last-child,.hn-needs .hn-t .hn-r.is-urgent>tr:first-child :is(td,th){display:block;padding:0;border:0;border-radius:0;background:none;text-align:left}
  .hn-t .hn-r.is-urgent>tr:first-child{border-bottom-color:transparent;border-radius:var(--r-row-tint);background:var(--urgent-row)} /* round ends: a square tint looks boxy in a round card (the owner) */
  .hn-t .hn-r.is-urgent>tr:first-child{margin-top:8px} /* an 8px gap between the red cards: they touched (the owner, 15 Oct, with a phone picture) */
  /* the name's cell keeps its place as the row's header and lends its rows to the avatar, the name and the time */
  .hn-needs .hn-t .hn-r>tr:first-child>th.hn-who{display:grid;grid-column:1 / 3;grid-row:1 / 4;grid-template-columns:subgrid;grid-template-rows:subgrid;align-items:center}
  .hn-needs .hn-t .hn-whob,.hn-needs .hn-t .hn-wt{display:contents}
  .hn-needs .hn-t .hn-av{grid-column:1;grid-row:1}
  .hn-needs .hn-t .hn-name{grid-column:2;grid-row:1;min-width:0}
  .hn-needs .hn-t .hn-meta{grid-column:2;grid-row:3;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .hn-needs .hn-t .hn-st{grid-column:3;grid-row:1;justify-self:end}
  .hn-needs .hn-t .hn-what{grid-column:2 / 4;grid-row:2;min-width:0}
  .hn-needs .hn-t .hn-what-t{-webkit-line-clamp:2}
  .hn-needs .hn-t .hn-act{grid-column:3;grid-row:3;justify-self:end;margin-top:4px}
  .hn-t .hn-acc-tr,.hn-t .hn-extra-tr,.hn-t .hn-more-row tr{display:block}
  .hn-needs .hn-t .hn-extra-tr td{padding:0 14px 14px 64px}
  .hn-needs .hn-t .hn-more-row td{padding:4px 14px}
  .hn .teach-in{padding:0 14px 14px 64px}
  .hn .hn-t .hn-btn{position:relative;justify-content:center;gap:6px;width:var(--w-row-btn-sm);min-width:0;height:var(--h-list-btn);padding:0 10px}
  .hn .hn-t .hn-btn::after{content:"";position:absolute;inset:-5px 0} /* 34 + 2 x 5 = a 44px touch area */
  .hn-name{max-width:100%}
  /* the row lights up as one round-ended shape, its cells not on their own (the owner, 15 Oct: the hover showed as
     separate square boxes) */
  .hn-t .hn-r:not(.is-urgent)>tr:first-child{border-radius:var(--r-row-tint);transition:background-color var(--duration-quick) var(--ease-out)}
  @media (hover:hover){.hn-t .hn-r:not(.is-urgent) tr[data-go]:hover :is(td,th),.hn-t .hn-r:not(.is-urgent) tr[data-hn-appt]:hover :is(td,th){background:none}}
  @media (hover:hover){.hn-t .hn-r:not(.is-urgent) tr[data-go]:hover,.hn-t .hn-r:not(.is-urgent) tr[data-hn-appt]:hover{background:var(--row-hover);border-bottom-color:transparent}}
}

/* ---------- two columns: the chart right under the figures, then Needs you, then sources and money side by side ---------- */
@container hn (max-width:939px){
  .hn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;grid-template-areas:"k k" "c c" "n n" "s m"}
  .hn:not(.is-fresh) .hn-grid:has(.hn-money[hidden]){grid-template-areas:"k k" "c c" "n n" "s s"}
  .hn:not(.is-fresh) .hn-grid:has(.hn-cal[hidden]){grid-template-areas:"k k" "c c" "n n" "m m"}
  .hn:not(.is-fresh) .hn-grid:has(.hn-cal[hidden]):has(.hn-money[hidden]){grid-template-areas:"k k" "c c" "n n"}
  .hn-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
/* ---------- one column: the figures, the strip (New leads, Calendar, Money: the owner, 14 October), Needs you ---------- */
@container hn (max-width:699px){
  .hn-grid{grid-template-columns:minmax(0,1fr);gap:16px;grid-template-areas:"k" "t" "r" "n"}
  .hn:not(.is-fresh) .hn-grid:has(.hn-money[hidden]){grid-template-areas:"k" "t" "r" "n"}
  .hn-kpis{gap:16px}
  .hn-rail-tabs{grid-area:t;display:flex;align-items:center;gap:8px;margin-bottom:-4px}
  .hn-rail-n{margin-inline-start:auto;padding-inline-start:8px;font-size:var(--fs-meta);white-space:nowrap;color:var(--ink-3)}
  .hn-rail{grid-area:r;display:flex;align-items:stretch;gap:12px;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
  .hn-rail::-webkit-scrollbar{display:none}
  .hn-rail>.hn-card{flex:0 0 86%;scroll-snap-align:start}
  .hn-rail>.hn-card[hidden]{display:none}
  .hn-ch{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .hn-legend{grid-column:1 / -1;margin-top:0}
  .hn-plot-wrap{margin-top:20px}
}
/* the strip runs to the page's edges (its gutter: 16px on a phone, 24px beside the rail), its cards still lining up
   with the page */
@media (max-width:720px){@container hn (max-width:699px){
  .hn-rail{margin:0 -16px;padding:0 16px 2px;scroll-padding-inline:16px}
}}
@media (min-width:721px){@container hn (max-width:699px){
  .hn-rail{margin:0 -24px;padding:0 24px 2px;scroll-padding-inline:24px}
}}
/* ---------- a phone: smaller tiles and cards, the pills in one row that scrolls ---------- */
@container hn (max-width:559px){
  .hn-grid,.hn-kpis{gap:12px}
  .hn .hn-card{padding:20px 16px 16px;border-radius:var(--r-tile-sm)}
  .hn-kpi{padding:16px;border-radius:var(--r-tile-sm)}
  .hn-ki{display:none}
  .hn-kn{font-size:var(--fs-kpi-sm)}
  .hn-kb{margin-top:12px}
  .hn-kv{gap:10px}
  .hn-spark{display:none}
  .hn-plot{grid-template-rows:minmax(150px,1fr) auto}
  .hn-area-box{min-height:150px}
  .hn-today{left:calc(var(--x) - 12px);width:24px;top:min(36px,calc(var(--y,100%) - 8px))}
  .hn-bub{left:calc(var(--x,96.43%) - 18px);padding:7px 10px}
  .hn-bub.is-left{left:calc(var(--x) + 18px)}
  .hn-bub small{display:none}
  .hn-nh{gap:14px}
  .hn-chips{width:calc(100% + 32px);max-width:none;margin:-6px -16px;padding:6px 16px}
  .hn-t{width:calc(100% + 24px);margin:12px -12px 0}
  .hn-t .hn-r:not(.hn-more-row)>tr:first-child{padding:14px 12px}
  .hn .hn-t .hn-btn{width:var(--w-row-btn-xs);padding:0 8px}
  .hn-mo li{padding:6px 0;row-gap:0} /* five rows now: a phone keeps its card about as tall as before */
}

@media (prefers-reduced-motion:reduce){
  .hn-today,.hn-mk,.hn-bub,.hn-kpi,.hn-go,.hn-chip,.hn-t :where(tbody) :is(td,th),.hn-tail,.hn-more,.hn-more svg.i,.hn-cal-r{transition:none}
  .hn-go:active,.hn-chip:active,.hn-more:active{scale:1}
}