/* HOME — the portfolio's money on one page. Drawn by js/home.js off
   home_overview(); every class is .hm-*.

   COLOUR. The money flow is a BRAND chart, so each company keeps one hue the
   owner chose for his own "How We Make Money" graphic: slate Messenger, rose
   Thumbies, green Express, taupe CemSites, violet JustDigital. They are five
   distinct hue families (no two blue), and every ribbon, block and bar is still
   labelled with the company's logo or name — colour reinforces identity, it
   never carries it. Gold stays chrome: the pillar edge, rules, controls.

   TYPE. One family, the app's Inter, set the way every other page sets its big
   figures (bold, tracked -.02em). A serif was tried for the flow title, pillar
   and footer figures after the owner's graphic, and he asked for it out: the
   home page must read in the same voice as the rest of the platform. */

/* ===== SERIES ===== */
.hm {
    --hm-messenger: var(--brand-messenger);
    --hm-thumbies: var(--brand-thumbies);
    --hm-eff: var(--brand-eff);
    --hm-cemsites: var(--brand-cemsites);
    --hm-justdigital: var(--brand-justdigital);
    --d: 0ms;   /* per-element entrance delay, set inline by home.js */
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
/* dark values live on the --brand-* tokens in base.css, declared twice there */
.hm .c-eff         { --hm-c: var(--hm-eff); }
.hm .c-messenger   { --hm-c: var(--hm-messenger); }
.hm .c-thumbies    { --hm-c: var(--hm-thumbies); }
.hm .c-cemsites    { --hm-c: var(--hm-cemsites); }
.hm .c-justdigital { --hm-c: var(--hm-justdigital); }
/* badges take the deeper badge hue and its ink, so initials clear 4.5:1 in both themes */
.hm .c-eff         { --hm-cb: var(--brand-badge-eff); }
.hm .c-messenger   { --hm-cb: var(--brand-badge-messenger); }
.hm .c-thumbies    { --hm-cb: var(--brand-badge-thumbies); }
.hm .c-cemsites    { --hm-cb: var(--brand-badge-cemsites); }
.hm .c-justdigital { --hm-cb: var(--brand-badge-justdigital); }
/* THE BACKGROUND FORM of each company colour: the solid hue, except CemSites,
   whose identity is its green-to-blue gradient. Every CSS background below
   reads --hm-cf; SVG fills cannot take a CSS gradient, so the CemSites shapes
   point at the <linearGradient>s home.js defines (hmFillCem in the flow,
   hmFillCemT in the trend chart). */
.hm .c-eff         { --hm-cf: var(--brand-fill-eff); }
.hm .c-messenger   { --hm-cf: var(--brand-fill-messenger); }
.hm .c-thumbies    { --hm-cf: var(--brand-fill-thumbies); }
.hm .c-cemsites    { --hm-cf: var(--brand-fill-cemsites); }
.hm .c-justdigital { --hm-cf: var(--brand-fill-justdigital); }
.hm .c-cemsites .hm-stub, .hm .c-cemsites .hm-block { fill: url(#hmFillCem); }
.hm-bar.c-cemsites:not(.partial) { fill: url(#hmFillCemT); }

@keyframes hm-rise   { from { opacity: 0; transform: translateY(10px); } }
@keyframes hm-fade   { from { opacity: 0; } }
@keyframes hm-grow-x { from { transform: scaleX(0); } }
@keyframes hm-grow-y { from { transform: scaleY(0); } }

/* ===== THE PAGE ARRIVES ONCE, AND THEN IT IS QUIET =====================
   home.js puts .hm-quiet on the ten regions _render() paints, for every
   paint after the first. Fee/gross and the period control rebuild all ten,
   and a CSS animation runs whenever an element carrying one is inserted - so
   before this rule a single fee/gross press started ~113 animations: 49
   hm-grow-y, 26 hm-rise, 15 hm-stub, 11 hm-grow-x and four `enter` from
   motion.css's .card-panel. Those controls have to feel INSTANT.

   `*`, NOT A LIST. The first cut of this gate named the elements it wanted
   still and was wrong by a hundred; a list of what must not move cannot be
   incomplete if it is spelled `*`. !important because the entrances are
   declared across three files - this one, base.css and motion.css, which
   loads last - and a feature stylesheet restating each of them one by one
   is the fault this project records as number 3.

   IT IS OFF FOR THE WAIT. _waiting() clears it before it draws skeletons,
   because a skeleton whose shimmer is off reads as a panel that FAILED
   rather than one still arriving. TRANSITIONS ARE UNTOUCHED: hover, focus
   and the ribbon's opacity are state, not arrival. And SMIL is out of
   reach of any stylesheet - the flow's one <animate> entrance is gated in
   _flow() on the same flag, and the ribbon shine beside it deliberately is
   not, being a standing loop rather than an arrival. */
.hm-quiet, .hm-quiet * { animation: none !important; }

.hm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hm-cf, var(--hm-c, var(--text-dim))); flex: 0 0 9px; display: inline-block; }

/* ===== WELCOME ===== */
.hm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.5rem;
    animation: hm-rise .5s var(--ease-out) backwards;
}
.hm-hello-k { font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); font-weight: var(--fw-bold); }
.hm-hello { font-size: var(--fs-4xl); font-weight: var(--fw-bold); color: var(--text); line-height: 1.1; margin: .15rem 0 .2rem; letter-spacing: -.01em; }
.hm-tag { font-size: var(--fs-sm); color: var(--text-soft); }
.hm-tag b { color: var(--accent-ink); font-weight: var(--fw-bold); }
.hm-top-r { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.hm-date { text-align: right; padding-right: 1.6rem; border-right: 1px solid var(--border); }
.hm-date small { display: block; font-size: var(--fs-xs); color: var(--text-soft); }
.hm-date b { font-size: var(--fs-lg); color: var(--text); font-weight: var(--fw-bold); }

/* the light segmented control */
.hm-seg {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: var(--r-pill);
    background: var(--inset);
    border: 1px solid var(--border-soft);
}
.hm-seg-l { font-size: var(--fs-2xs); color: var(--text-soft); padding: 0 .5rem 0 .6rem; white-space: nowrap; }
.hm-seg button {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-soft);
    padding: .36rem .85rem; border-radius: var(--r-pill); white-space: nowrap;
    transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.hm-seg button:hover { color: var(--text); }
.hm-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: var(--fw-bold); }
.hm-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* the same control on the dark flow header */
.hm-seg.on-dark { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.hm-seg.on-dark .hm-seg-l { color: rgba(255,255,255,.66); }
.hm-seg.on-dark button { color: rgba(255,255,255,.78); }
.hm-seg.on-dark button:hover { color: #fff; background: rgba(255,255,255,.08); }
.hm-seg.on-dark button.on { background: var(--gold-400); color: #141310; box-shadow: none; }
.hm-seg.on-dark button:focus-visible { outline-color: var(--gold-300); }

/* ===== KPI CARDS ===== */
.hm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.hm-kpi {
    padding: 1rem 1.15rem 1rem;
    display: flex; flex-direction: column;
    animation: hm-rise .5s var(--ease-out) backwards;
    animation-delay: var(--d);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hm-kpi:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.hm-kpi-h { display: flex; align-items: center; gap: .6rem; }
.hm-kpi-ico {
    width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px;
    display: grid; place-items: center; font-size: 1.05rem;
    background: var(--accent-weak); color: var(--accent-ink);
}
.hm-kpi-l { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-soft); line-height: var(--lh-snug); }
.hm-kpi-m { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-top: .6rem; }
.hm-kpi-v { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hm-chip {
    display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap;
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    padding: .16rem .5rem; border-radius: var(--r-pill);
    background: var(--inset); color: var(--text-soft);
}
.hm-chip.up { background: var(--ok-weak); color: var(--ok-ink); }
.hm-chip.down { background: var(--bad-weak); color: var(--bad-ink); }
.hm-meter { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-3); margin-top: .85rem; gap: 2px; }
.hm-meter i { display: block; height: 100%; background: var(--hm-cf, var(--hm-c, var(--accent))); transform-origin: left; }
.hm-meter i { animation: hm-grow-x .32s var(--ease-out) backwards; animation-delay: calc(var(--d) + 200ms); }
.hm-kpi-f { display: flex; justify-content: space-between; gap: .6rem; margin-top: .45rem; font-size: var(--fs-xs); color: var(--text-soft); line-height: var(--lh-snug); }
.hm-kpi-f b { color: var(--text); font-weight: var(--fw-medium); white-space: nowrap; }
/* the companies a figure covers, as overlapping avatars */
.hm-marks { display: inline-flex; align-items: center; vertical-align: middle; }
.hm-marks .bbadge + .bbadge { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.hm-marked { display: inline-flex; flex-wrap: wrap; gap: .25rem .7rem; align-items: center; }
.hm-marked > span { display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; color: var(--text); }

/* ===== THE MONEY FLOW ===== */
.hm-flowcard {
    border-radius: var(--r);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    animation: hm-rise .6s var(--ease-out) backwards;
    animation-delay: 120ms;
}
.hm-flow-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 1.05rem 1.6rem;
    background: var(--shell-800);
    color: #fff;
}
.hm-flow-t {
    font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin: 0; line-height: 1.15;
    letter-spacing: -.02em; color: #fff;
}
.hm-flow-s {
    display: inline-block;
    margin-top: .35rem; padding-bottom: .35rem;
    font-size: var(--fs-2xs); letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.78);
    border-bottom: 2px solid var(--gold-400);
}
.hm-flow-tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
:root[data-theme="dark"] .hm-flow-head, :root[data-theme="dark"] .hm-flow-foot { background: var(--shell-700); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hm-flow-head,
    :root:not([data-theme="light"]) .hm-flow-foot { background: var(--shell-700); }
}

.hm-flow-body { position: relative; padding: .6rem 1.2rem .4rem; }
.hm-flow { position: relative; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.hm-flow svg { display: block; overflow: visible; }
/* Drawn at the box's measured width; if a scrollbar arrives after the measure
   (the page grows taller than the window) the box narrows by a few pixels, and
   a fixed-width drawing would scroll sideways by exactly that much. It scales
   to fit instead. Below 1100px it keeps its size and the box scrolls. */
.hm-flow svg.fit { max-width: 100%; height: auto; }

/* THE MONEY FLOW AS A LIST, PARKED OFF SCREEN.
   home.js fills this with one line per company and per stream, so the figures
   the drawing carries exist in the accessible tree without a pointer. It is
   the only place that list exists, so it must stay IN the tree: `hidden` and
   `display: none` would take it out.
   OFF SCREEN RATHER THAN Bootstrap's .visually-hidden, and the reason is
   measurable: .visually-hidden is a 1px box with overflow:hidden, which is
   indistinguishable from a real clipping fault - the browser guards reported
   "511px hidden below a 1px box" over a list doing exactly its job. A real box
   parked at a negative offset reads identically and is not a shape any guard
   has to be taught to excuse.
   The offsets were inline on the element in home.html while home.css belonged
   to another lane; they belong here, where a sweep of this file can see them. */
#hmFlowText { position: absolute; left: -10000px; top: 0; width: 22rem; }

/* company bands */
.hm-band-bg { fill: transparent; transition: fill .25s var(--ease); cursor: pointer; }
.hm-grp.on .hm-band-bg, .hm-grp:hover .hm-band-bg { fill: var(--inset); fill-opacity: .55; }
.hm-sep { stroke: var(--border); stroke-width: 1; }
.hm-logo-plate { fill: transparent; }
.hm-logo { transition: opacity .25s var(--ease); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hm-logo-plate { fill: #F4F2EC; }
}
:root[data-theme="dark"] .hm-logo-plate { fill: #F4F2EC; }
/* A PLAIN <img> LOGO TAKES THE DARK ARTWORK, NOT A LIGHT PLATE (2026-09-17).
   base.css swaps <name>.png for <name>-dark.png on a dark ground - dark ink
   turned near-white, the EFF green and the CemSites gradient kept - so these
   need no plate and no inversion, and they follow the theme TOGGLE live.
   The flow's rail logos are SVG <image> elements, which CSS cannot swap and
   which home.js writes once, so those keep .hm-logo-plate: a logo that stops
   matching the theme the moment somebody flips the toggle would be worse. */
.hm-co-name { font-size: 12px; fill: var(--text-soft); }

.hm-s-name { font-size: 13px; fill: var(--text); }
.hm-s-val { font-size: 13px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.hm-stub { fill: var(--hm-c); transform-box: fill-box; transform-origin: left center; animation: hm-grow-x .5s var(--ease-out) backwards; animation-delay: var(--d); transition: opacity .3s var(--ease); }
.hm-ribbon { transition: opacity .3s var(--ease); }
.hm-shine { pointer-events: none; }
.hm-block { fill: var(--hm-c); transform-box: fill-box; transform-origin: center; animation: hm-grow-y .6s var(--ease-out) backwards; animation-delay: var(--d); transition: opacity .3s var(--ease); }
.hm-block-v { font-size: 17px; font-weight: 700; fill: #fff; font-variant-numeric: tabular-nums; pointer-events: none; }
.hm-inline-v { font-size: 17px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.hm-ghost { fill: none; stroke: var(--hm-c); stroke-opacity: .6; stroke-width: 1.5; stroke-dasharray: 5 6; }
.hm-ghost-stub { fill: none; stroke: var(--hm-c); stroke-width: 1.5; stroke-dasharray: 4 4; }
/* The sentence sits ON the dashed line (home.js draws the path first), so it
   carries a halo in the card surface - the same device as .hm-inline-v - and
   the line reads as passing behind the words instead of striking them through. */
.hm-ghost-t { font-size: 13px; font-weight: 600; fill: var(--text-soft); paint-order: stroke; stroke: var(--surface); stroke-width: 6px; stroke-linejoin: round; }

/* the pillar */
.hm-pillar { transform-box: fill-box; transform-origin: center; animation: hm-grow-y .8s var(--ease-out) backwards; animation-delay: 250ms; }
.hm-pillar-body { fill: #121110; }
.hm-pillar-edge { fill: url(#hmGold); }
.hm-pillar-t { font-weight: 700; letter-spacing: -.02em; fill: #F4EFE3; }
/* PEOPLE / PRODUCTS / POSSIBILITIES, at the floor rather than under it. This
   was a flat 10.5px, and the flow SVG is drawn at width=W viewBox="0 0 W H" -
   scale 1.000 - so 10.5 was the painted size, below the 11px floor base.css
   sets. The browser type-floor guard cannot see it: it skips SVG <text>,
   correctly in general, because an SVG's own coordinate system usually scales
   independently of CSS px. Here it does not, which is what makes this the one
   case the exemption was wrong about.

   THE TOKEN, NOT max(10.5px, var(--fs-3xs)). base.css guards `code` that way
   because its first term is a RELATIVE .875em that should keep winning inside
   body text; 10.5px is flat and can never beat an 11.04px floor at any root,
   so a max() here would be a declaration that looks like it does something and
   does not. Measured before taking the token: "POSSIBILITIES" is the longest
   of the three and goes 110.3px -> 116.0px at this tracking, inside a 176px
   pillar, and 145px at the 20px root above 1920px - so the layout holds at
   both ends. */
.hm-pillar-k { font-size: var(--fs-3xs); letter-spacing: .28em; fill: rgba(255,255,255,.78); }
.hm-pillar-rule { stroke: var(--gold-400); stroke-width: 1.5; }
.hm-cons-l { font-size: 15px; font-weight: 500; fill: var(--text-soft); }
.hm-cons-v { font-size: 36px; font-weight: 700; letter-spacing: -.02em; fill: var(--text); font-variant-numeric: tabular-nums; }
.hm-out-t { font-size: 13px; font-weight: 700; fill: var(--text); }
.hm-out-s { font-size: 12px; fill: var(--text-soft); }

/* focus: a hovered or selected company dims the rest */
.hm-flow svg.is-focus .hm-grp:not(.on) .hm-ribbon,
.hm-flow svg.is-focus .hm-grp:not(.on) .hm-stub,
.hm-flow svg.is-focus .hm-grp:not(.on) .hm-block { opacity: .16; }
.hm-flow svg.is-focus .hm-grp:not(.on) .hm-logo,
.hm-flow svg.is-focus .hm-grp:not(.on) text { opacity: .45; }
.hm-flow svg .hm-srow.dim .hm-ribbon, .hm-flow svg .hm-srow.dim .hm-stub { opacity: .28; }

/* the panel beside (or under) the flow */
.hm-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-md);
    padding: 1.05rem 1.1rem;
    display: flex; flex-direction: column; gap: .75rem;
    min-width: 0;
    animation: hm-fade .35s var(--ease-out) backwards;
}
.hm-flow-body.has-side .hm-panel { position: absolute; top: var(--panel-top, 22px); right: 1.6rem; width: var(--panel-w, 360px); max-height: calc(100% - var(--panel-top, 22px) - 14px); overflow-y: auto; }
.hm-flow-body:not(.has-side) .hm-panel { margin: .4rem 0 .8rem; }
.hm-panel.is-ghost { background: var(--surface); box-shadow: none; border: 1.5px dashed var(--border); }
.hm-panel-h { display: flex; align-items: center; gap: .7rem; }
.hm-panel-logo { height: 34px; min-height: var(--brand-logo-min); max-width: 160px; object-fit: contain; object-position: left center; }
.hm-panel-src { font-size: var(--fs-2xs); color: var(--text-soft); margin-top: .15rem; }
.hm-panel-x { margin-left: auto; appearance: none; border: 0; background: var(--inset); color: var(--text-soft); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex: 0 0 30px; }
.hm-panel-x:hover { color: var(--text); background: var(--surface-3); }
.hm-panel-l { font-size: var(--fs-xs); color: var(--text-soft); }
.hm-panel-v { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text); line-height: 1.05; font-variant-numeric: tabular-nums; }
.hm-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .9rem; padding: .7rem 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.hm-panel-grid b { display: block; font-size: var(--fs-md); color: var(--text); font-variant-numeric: tabular-nums; }
.hm-panel-grid span { display: block; font-size: var(--fs-2xs); color: var(--text-soft); }
.hm-panel-note { font-size: var(--fs-xs); color: var(--text-soft); line-height: var(--lh-snug); margin: 0; }
.hm-panel-go { display: flex; gap: 1rem; flex-wrap: wrap; }
.hm-panel-go a { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent-ink); text-decoration: none; }
.hm-panel-go a:hover { text-decoration: underline; }
.hm-bars { display: flex; flex-direction: column; gap: .45rem; }
.hm-bars .r { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; row-gap: .2rem; font-size: var(--fs-xs); color: var(--text); }
.hm-bars .r > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-bars .r > .hm-bars-co { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.hm-bars .r > span:nth-child(2) { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.hm-bars .t { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.hm-bars .t i { display: block; height: 100%; border-radius: 3px; background: var(--hm-cf, var(--hm-c)); transform-origin: left; animation: hm-grow-x .7s var(--ease-out) backwards; }
.hm-ghost-card-t { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text); display: flex; align-items: center; gap: .5rem; margin: 0; }
.hm-ghost-card-t i { color: var(--accent-ink); }

.hm-flow-foot {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--shell-800); color: #fff;
    padding: 1rem 1.6rem;
}
.hm-fstat { display: flex; align-items: center; gap: 1rem; padding: .2rem 1.4rem; min-width: 0; }
.hm-fstat:first-child { padding-left: 0; }
.hm-fstat + .hm-fstat { border-left: 1px solid rgba(201,165,95,.45); }
.hm-fstat i { font-size: 2rem; color: var(--gold-400); flex: 0 0 auto; }
.hm-fstat b { display: block; font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -.02em; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hm-fstat span { display: block; font-size: var(--fs-sm); color: rgba(255,255,255,.72); line-height: var(--lh-snug); }
.hm-flow-note { font-size: var(--fs-xs); color: var(--text-soft); padding: 0 1.6rem .9rem; margin: 0; line-height: var(--lh-snug); }

/* ===== CARDS ===== */
.hm-card { padding: 1.1rem 1.2rem 1.15rem; min-width: 0; animation: hm-rise .55s var(--ease-out) backwards; animation-delay: var(--d); }
.hm-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.hm-card-t { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); margin: 0; }
/* A card about one company: its lockup stands in for the company's name. */
.hm-card-t-co { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hm-t-logo { height: 26px; min-height: var(--brand-logo-min); width: auto; max-width: 170px; object-fit: contain; object-position: left center; }
.hm-card-s { font-size: var(--fs-xs); color: var(--text-soft); margin: .15rem 0 0; }
.hm-link { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.hm-link:hover { text-decoration: underline; }
.hm-foot { font-size: var(--fs-xs); color: var(--text-soft); margin: .8rem 0 0; line-height: var(--lh-snug); }
.hm-row   { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.1rem; align-items: stretch; }
.hm-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ===== TREND ===== */
.hm-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
.hm-legend span { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--text-soft); }
.hm-trend { position: relative; }
.hm-trend svg { display: block; width: 100%; height: auto; overflow: visible; }
.hm-bar { fill: var(--hm-c); transform-box: fill-box; transform-origin: bottom; animation: hm-grow-y .7s var(--ease-out) backwards; animation-delay: var(--d); transition: opacity .2s var(--ease); }
.hm-bar.partial { fill: url(#hmHatch); stroke: var(--hm-c); stroke-width: 1.2; }
.hm-trend svg.is-hover .hm-bar:not(.on) { opacity: .35; }
.hm-col-hit { fill: transparent; cursor: default; }
.hm-axis { font-size: 11px; fill: var(--text-dim); }
.hm-grid { stroke: var(--border-soft); stroke-width: 1; }
.hm-grid.zero { stroke: var(--border); }

/* ===== REVENUE BY COMPANY ===== */
.hm-cos { display: flex; flex-direction: column; gap: .15rem; }
.hm-co {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .85rem; align-items: center;
    padding: .65rem .55rem; border-radius: var(--r-sm); cursor: pointer;
    transition: background .2s var(--ease);
    animation: hm-rise .45s var(--ease-out) backwards; animation-delay: var(--d);
}
.hm-co:hover, .hm-co.on { background: var(--inset); }
.hm-co.off { cursor: default; }
.hm-co.off:hover { background: none; }
/* The company leads its row with its lockup, not its name. min-height keeps the
   house floor; the box is never a fixed height, so the floor can win. */
.hm-co-logo { height: 32px; min-height: var(--brand-logo-min); width: auto; max-width: 190px; object-fit: contain; object-position: left center; display: block; }
.hm-co.off .hm-co-logo { opacity: .55; }
.hm-co-top { display: flex; justify-content: space-between; gap: .6rem; align-items: center; min-width: 0; }
.hm-co-top b { font-size: var(--fs-sm); color: var(--text); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-co-top strong { font-size: var(--fs-md); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-co-bar { height: 7px; border-radius: 4px; background: var(--surface-3); margin: .35rem 0 .3rem; overflow: hidden; }
.hm-co-bar i { display: block; height: 100%; border-radius: 4px; background: var(--hm-cf, var(--hm-c)); min-width: 3px; transform-origin: left; }
.hm-co-bar i { animation: hm-grow-x .32s var(--ease-out) backwards; animation-delay: var(--d); }
.hm-co-sub { font-size: var(--fs-2xs); color: var(--text-soft); display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.hm-co-r { text-align: right; min-width: 78px; }
.hm-co-r b { display: block; font-size: var(--fs-md); color: var(--text); font-variant-numeric: tabular-nums; }
.hm-co-r .hm-chip { margin-top: .2rem; }
.hm-asof { display: inline-block; font-size: var(--fs-2xs); color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: .02rem .45rem; white-space: nowrap; }
.hm-asof.is-live { color: var(--ok-ink); background: var(--ok-weak); border-color: var(--ok-line); }

/* ===== PIPELINE ===== */
.hm-pipe { display: flex; flex-direction: column; gap: .55rem; }
.hm-pipe-r { display: grid; grid-template-columns: 24px minmax(0, 170px) minmax(0, 1fr) 54px; gap: .6rem; align-items: center; animation: hm-rise .45s var(--ease-out) backwards; animation-delay: var(--d); }
.hm-pipe-r .k { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-3xs); font-weight: var(--fw-bold); background: var(--accent-weak); color: var(--accent-ink); }
.hm-pipe-r .l { font-size: var(--fs-xs); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-pipe-r .t { height: 12px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.hm-pipe-r .t i { display: block; height: 100%; min-width: 3px; border-radius: 6px; background: linear-gradient(90deg, var(--gold-300), var(--gold-500)); transform-origin: left; animation: hm-grow-x .8s var(--ease-out) backwards; animation-delay: var(--d); }
.hm-pipe-r .n { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* ===== ACTIVITY ===== */
.hm-act { display: flex; flex-direction: column; }
.hm-act-r {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center;
    padding: .55rem .4rem; border-bottom: 1px solid var(--border-soft); text-decoration: none; color: inherit;
    border-radius: var(--r-sm); transition: background .2s var(--ease);
    animation: hm-rise .45s var(--ease-out) backwards; animation-delay: var(--d);
}
.hm-act-r:last-child { border-bottom: 0; }
.hm-act-r:hover { background: var(--inset); }
.hm-act-marks { display: inline-flex; }
.hm-act-marks .bbadge + .bbadge { margin-left: -7px; box-shadow: 0 0 0 2px var(--surface); }
.hm-act-t { min-width: 0; }
.hm-act-t b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-act-t small { display: block; font-size: var(--fs-2xs); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-act-w { font-size: var(--fs-2xs); color: var(--text-dim); white-space: nowrap; }

/* ===== QUICK ACTIONS ===== */
.hm-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.hm-q {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem;
    padding: 1rem .6rem .9rem; border-radius: var(--r); border: 1px solid var(--border);
    background: var(--surface); text-decoration: none; color: var(--text);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
    animation: hm-rise .45s var(--ease-out) backwards; animation-delay: var(--d);
}
.hm-q:hover { transform: translateY(-3px); box-shadow: var(--lift-2); border-color: var(--accent-line); }
.hm-q i { font-size: 1.35rem; color: var(--accent-ink); }
.hm-q b { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.hm-q span { font-size: var(--fs-2xs); color: var(--text-soft); line-height: var(--lh-snug); }

/* ===== TOOLTIP ===== */
.hm-tip {
    position: fixed; z-index: 1080; pointer-events: none; max-width: 300px;
    background: var(--shell-800); color: #fff;
    border-radius: var(--r-sm); padding: .55rem .7rem;
    font-size: var(--fs-xs); line-height: var(--lh-snug);
    box-shadow: var(--shadow-lg);
}
.hm-tip b { color: #fff; }
.hm-tip .m { color: rgba(255,255,255,.72); }
.hm-tip .r { display: flex; justify-content: space-between; gap: 1.2rem; align-items: center; }
.hm-tip .r .hm-dot { margin-right: .4rem; }

.hm-empty { font-size: var(--fs-sm); color: var(--text-soft); padding: 1rem 0; }

/* ===== THE WAIT =====
   Drawn by Home._waiting() before home_overview answers. Each skeleton mirrors
   the block it stands in for, so nothing jumps when the figures land, and it
   reuses base.css's gold .skeleton sweep; the dark footer band cannot take a
   surface-coloured sweep, so its bars are white-alpha on the shared
   m1BandShimmer keyframe rather than a second animation. */
.hm-sk-kpi { pointer-events: none; }
.hm-sk-kpi .hm-sk-ico { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px; }
.hm-sk-kpi .hm-sk-l { width: 46%; height: 12px; }
.hm-sk-kpi .hm-sk-v { width: 38%; height: 30px; border-radius: 8px; }
.hm-sk-kpi .hm-sk-chip { width: 54px; height: 20px; border-radius: var(--r-pill); }
.hm-sk-kpi .hm-sk-f { display: block; width: 58%; height: 10px; }
.hm-sk-kpi .hm-meter { background: var(--surface-3); }
.hm-sk-rows { display: flex; flex-direction: column; gap: .7rem; padding: .35rem 0 .2rem; }
.hm-sk-rows .skeleton { display: block; height: 12px; }
.hm-sk-rows .skeleton.is-tall { height: 34px; border-radius: 8px; }
.hm-sk-stat .hm-sk-b { display: block; border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.07) 100%);
    background-size: 200% 100%; animation: m1BandShimmer 1.2s ease-in-out infinite; }
.hm-sk-stat .hm-sk-ico { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; }
.hm-sk-stat .hm-sk-v { width: 96px; height: 22px; margin-bottom: .45rem; }
.hm-sk-stat .hm-sk-f { width: 180px; height: 10px; }
@media (prefers-reduced-motion: reduce) { .hm-sk-stat .hm-sk-b { animation: none; } }

/* ===== RESPONSIVE ===== */
@media (max-width: 1399.98px) {
    .hm-row-3 { grid-template-columns: 1fr 1fr; }
    .hm-row-3 > :last-child { grid-column: 1 / -1; }
    .hm-row-3 > :last-child .hm-quick { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1199.98px) {
    .hm-row { grid-template-columns: 1fr; }
    .hm-kpis { grid-template-columns: 1fr 1fr; }
    .hm-flow-foot { grid-template-columns: 1fr; gap: .6rem; }
    .hm-fstat { padding-left: 0; }
    .hm-fstat + .hm-fstat { border-left: 0; border-top: 1px solid rgba(201,165,95,.35); padding-top: .7rem; }
    .hm-row-3 > :last-child .hm-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .hm-row-3 { grid-template-columns: 1fr; }
    .hm-kpis { grid-template-columns: 1fr; }
    .hm-date { border-right: 0; padding-right: 0; text-align: left; }
    .hm-hello { font-size: var(--fs-3xl); }
    .hm-flow-t { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-top, .hm-kpi, .hm-meter i, .hm-flowcard, .hm-stub, .hm-block, .hm-pillar, .hm-panel,
    .hm-bars .t i, .hm-card, .hm-bar, .hm-co, .hm-co-bar i, .hm-pipe-r, .hm-pipe-r .t i,
    .hm-act-r, .hm-q { animation: none; }
    .hm-kpi:hover, .hm-q:hover { transform: none; }
}