/* ==================== ACTIVE ACCOUNTS ====================
   Prefix .aa-*. One page, one job: which accounts are trading, which are
   slipping, which have stopped.

   THE STATE COLOURS ARE STATUS COLOURS, NOT SERIES COLOURS. base.css reserves
   ok/warn/bad for state and --s1..--s6 for encoding; this page is entirely
   about state, so it uses the former and never the latter. A brand colour is
   never used for a state either — a company is not a condition.
   ================================================================ */

/* ---- the shell, scoped ----
   base.css owns .panel-head and every other page uses it, so it is restated
   HERE under the page id rather than being redefined globally — a feature
   stylesheet that restyles the shell is fault 3 in CLAUDE.md and it has already
   cost this project a silently dead hover state.

   flex-wrap is not cosmetic. .panel-head is a nowrap flex row, and panel 5's
   head carries a title, up to seven filter pills and a search box; past a
   certain count they simply ran off the right-hand edge of the card and took
   the whole PAGE into horizontal scroll, which is what pushed the rail out of
   view. min-width:0 is the other half — a flex item will not shrink below its
   content without it. */
#page-active-accounts .panel-head { flex-wrap: wrap; row-gap: .5rem; }
#page-active-accounts .panel-title { min-width: 0; }
#page-active-accounts .panel-body { padding: .9rem 1.05rem 1rem; }

/* ---- the company rail ---- */
.aa-corail { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.aa-co {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .85rem; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.aa-co:hover { border-color: var(--gold-400); transform: translateY(-1px); }
.aa-co.on { border-color: var(--gold-500); background: var(--accent-weak, var(--surface-2)); box-shadow: var(--lift-1); }
.aa-co .blogo { width: 104px; height: 26px; flex: 0 0 104px; }
.aa-co .blogo img { max-height: 22px; filter: none; opacity: 1; }
.aa-co-n { font-size: .74rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.aa-co.is-off { opacity: .5; cursor: not-allowed; }
.aa-co.is-off:hover { transform: none; border-color: var(--border); }

/* ---- the two banners ----
   AS-OF is neutral: nothing is wrong, the data is simply a snapshot.
   LIMIT is amber: something cannot be answered here, and the reader needs to
   know which states are dimmed downstream and why. Two boxes, because they say
   different things and one used to overwrite the other. */
.aa-asof, .aa-limit {
    display: flex; gap: .7rem; align-items: flex-start;
    border: 1px solid var(--border); border-left-width: 3px;
    background: var(--surface-2);
    border-radius: 10px; padding: .7rem .9rem; margin-bottom: .75rem;
    font-size: .82rem; line-height: 1.55; color: var(--text-soft);
}
.aa-asof { border-left-color: var(--text-dim); }
.aa-limit { border-color: var(--warn); border-left-width: 3px; background: var(--warn-weak, var(--surface-2)); }
.aa-asof .bi { color: var(--text-dim); font-size: 1rem; line-height: 1.3; flex: 0 0 auto; }
.aa-limit .bi { color: var(--warn); font-size: 1rem; line-height: 1.3; flex: 0 0 auto; }
.aa-asof b, .aa-limit b { color: var(--text); font-weight: 650; }
.aa-limit-l { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .78rem; line-height: 1.5; }
.aa-limit-l li + li { margin-top: .25rem; }

/* ---- the state tiles, which are also the filter ----
   Clickable on purpose: a number you cannot open is a number you have to go
   and look for somewhere else. */
.aa-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: .7rem; margin-bottom: .25rem;
}
.aa-k {
    position: relative; overflow: hidden;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface); padding: .85rem .95rem .8rem;
    cursor: pointer; text-align: left; width: 100%;
    transition: border-color .15s ease, box-shadow .18s ease, transform .12s ease;
}
.aa-k::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--text-dim); opacity: .55;
}
.aa-k:hover:not(.is-off) { transform: translateY(-2px); box-shadow: var(--lift-2); }
.aa-k.on { border-color: var(--gold-500); box-shadow: var(--lift-1); }
.aa-k-n {
    display: block; font-size: 1.5rem; font-weight: 780; letter-spacing: -.035em;
    line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--text);
}
.aa-k-l {
    display: block; font-size: .68rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-soft); margin-top: .18rem;
}
.aa-k-s { display: block; font-size: .68rem; color: var(--text-dim); margin-top: .25rem; }

.aa-k.s-active::before   { background: var(--ok); opacity: 1; }
.aa-k.s-new::before      { background: var(--s1, var(--ok)); opacity: 1; }
.aa-k.s-at_risk::before  { background: var(--bad); opacity: 1; }
.aa-k.s-lapsing::before  { background: var(--warn); opacity: 1; }
.aa-k.s-dormant::before  { background: var(--text-dim); opacity: 1; }
.aa-k.s-never::before    { background: var(--border); opacity: 1; }

/* A state this company cannot compute, for either of the two reasons. Dimmed
   and unclickable, with the reason on hover — the figure would be 0 and a 0
   here means "none", not "unknown". The accent bar goes flat grey whichever
   colour the state would have had, so the row of tiles reads at a glance as
   "these four are live, these two are not". */
.aa-k.is-off { opacity: .68; cursor: default; background: var(--surface-2); }
.aa-k.is-off .aa-k-n { color: var(--text-dim); }
.aa-k.is-off::before { background: var(--border) !important; opacity: 1; }
.aa-k-off {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-dim); background: var(--surface-3);
    border: 1px dashed var(--border); border-radius: 999px;
    padding: .1rem .45rem; margin-top: .3rem;
}

/* ---- a heading inside a panel body ----
   Panel 1 draws two different charts under one title. The trend answers "how
   many trade each month" and the histogram answers "how long since each one
   last did"; without a second heading the panel title described only the top
   half of its own card. */
.aa-sub-h {
    font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-dim); margin: 1.1rem 0 .55rem;
    padding-top: .9rem; border-top: 1px solid var(--border-soft);
}

/* ---- recency histogram ---- */
.aa-rec { display: flex; flex-direction: column; gap: .5rem; }
.aa-rec-r { display: grid; grid-template-columns: 76px minmax(0,1fr) 66px; gap: .6rem; align-items: center; }
.aa-rec-l { font-size: .74rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
/* Both are spans. The TRACK is a grid item so the grid blockifies it and its
   height applies; the FILL is an ordinary child of that track, stays inline,
   and an inline box ignores width and height entirely — so every bar rendered
   at zero size and the panel showed six empty rails. display:block is the
   whole fix, and it is the kind of thing that looks right in the source and is
   invisible until you look at the screen. */
.aa-rec-t { height: 12px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.aa-rec-b { display: block; height: 100%; border-radius: 999px; background: var(--gold-500);
            transition: width .5s cubic-bezier(.4,0,.2,1); }
.aa-rec-r.hot  .aa-rec-b { background: var(--ok); }
.aa-rec-r.warm .aa-rec-b { background: var(--warn); }
.aa-rec-r.cold .aa-rec-b { background: var(--text-dim); }
.aa-rec-v { font-size: .78rem; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
/* A bucket the extract is too short to reach. An empty rail beside a 0 says
   "nobody is here"; this says the question cannot be asked. */
.aa-rec-r.is-off .aa-rec-l { color: var(--text-dim); }
.aa-rec-r.is-off .aa-rec-v { color: var(--text-dim); font-weight: 400; }
.aa-rec-off {
    font-size: .64rem; font-style: italic; color: var(--text-dim);
    border-top: 1px dashed var(--border); padding-top: .1rem;
}
.aa-rec-note { font-size: .7rem; color: var(--text-dim); line-height: 1.5; margin-top: .7rem; }

/* ---- THE FLEXIBLE TRACK GOES WHERE IT EARNS ITS WIDTH ----
   Two wrong answers were tried before this one, and both are worth recording
   because each looked right in isolation.

   FIRST: every table gave its first column `1fr`. On a 2560px monitor that made
   the name column ~1,100px and stranded the figures at the far right, so
   reading one row meant travelling 2,000px from "Everstory Partners" to the 8
   rooftops of its that had gone quiet.

   SECOND: cap the name and add a trailing SPACER TRACK. That closed the gap and
   opened a bigger one — half of every card was empty, which is worse: the first
   version was at least using the screen.

   THE RULE: the slack goes to the column that is a PICTURE, never to a number,
   a name, or nothing at all. Panels 3 and 4 have a bar, so the bar takes it and
   physically bridges the name to its figures. Panels 2 and 5 have no bar, so the
   name keeps the slack and the figures sit on the card's right edge where the
   eye already expects a total — with a zebra tint on the long tables, which is
   what lets a row be tracked across 1,800px. */

/* ---- the at-risk board ---- */
.aa-risk-r {
    display: grid; grid-template-columns: minmax(0,1fr) 92px 92px 116px;
    gap: .7rem; align-items: center;
    padding: .6rem .35rem; border-bottom: 1px solid var(--border-soft);
    border-radius: 8px; cursor: pointer;
    transition: background .13s ease;
}
.aa-risk-r:hover { background: var(--surface-2); }
.aa-risk-r:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.aa-risk-r:last-of-type { border-bottom: 0; }
.aa-risk-n { min-width: 0; }
.aa-risk-n b {
    display: block; font-size: .84rem; font-weight: 650; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aa-risk-n span {
    display: block; font-size: .68rem; color: var(--text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aa-risk-d {
    font-size: .84rem; font-weight: 750; text-align: right;
    font-variant-numeric: tabular-nums; color: var(--bad);
}
.aa-risk-v { font-size: .8rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-soft); }
/* The projection is arithmetic — last activity plus the window — and the label
   says so. It is not a forecast and must never be dressed as one. */
.aa-risk-p { font-size: .7rem; text-align: right; color: var(--text-dim); line-height: 1.3; }
.aa-odds { color: var(--bad); }
/* The second line under a figure. It was three separate inline style="" runs,
   which a theme sweep cannot reach — CLAUDE.md fault 2, and it is exactly how
   one blue chip survived the whole retheme. */
.aa-sub {
    display: block; font-style: normal; font-weight: 400;
    font-size: .62rem; color: var(--text-dim); margin-top: .05rem;
}
.aa-risk-h {
    display: grid; grid-template-columns: minmax(0,1fr) 92px 92px 116px;
    gap: .7rem; padding: 0 .35rem .4rem;
    font-size: .62rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}
.aa-risk-h span:not(:first-child) { text-align: right; }

/* ---- the account list ---- */
.aa-filters { display: flex; gap: .3rem; flex-wrap: wrap; margin-left: auto; }
.aa-f {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .7rem; font-weight: 650; padding: .22rem .6rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
    cursor: pointer; transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.aa-f:hover { border-color: var(--gold-400); color: var(--text); }
.aa-f.on { background: var(--gold-100, var(--surface-3)); border-color: var(--gold-500); color: var(--gold-700, var(--text)); }
/* The count on a filter pill. It is the same figure as the tile above it and
   saves a glance back up the page. */
.aa-f em {
    font-style: normal; font-weight: 700; font-size: .64rem;
    color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.aa-f.on em { color: inherit; opacity: .8; }
.aa-f.is-rhy { text-transform: capitalize; }
.aa-f.is-clear { border-style: dashed; color: var(--text-dim); }
.aa-f.is-clear:hover { color: var(--bad); border-color: var(--bad); }

.aa-search-w { position: relative; display: inline-flex; align-items: center; margin-left: .5rem; }
.aa-search-w > .bi-search {
    position: absolute; left: .6rem; font-size: .78rem; color: var(--text-dim); pointer-events: none;
}
.aa-search { max-width: 230px; padding-left: 1.85rem; padding-right: 1.7rem; }
.aa-search-x {
    position: absolute; right: .35rem; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: 0; border-radius: 50%;
    background: var(--surface-3); color: var(--text-dim); font-size: .6rem; cursor: pointer;
}
.aa-search-x:hover { background: var(--bad); color: #fff; }

.aa-row {
    display: grid;
    grid-template-columns: 22px minmax(0,1fr) 120px 96px 96px 110px 20px;
    gap: .7rem; align-items: center;
    padding: .55rem .9rem; border-bottom: 1px solid var(--border-soft);
    font-size: .82rem; cursor: pointer;
    transition: background .12s ease;
}
/* A row 1,800px wide cannot be tracked from its name to its total on a white
   field. The tint is one step off the card and does the whole job; anything
   stronger turns a clean table into a ledger. */
.aa-row:nth-child(even) { background: var(--surface-2); }
.aa-row:hover { background: var(--accent-weak, var(--surface-3)); }
.aa-row:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
/* THE HEADER MUST REPEAT THE ROW'S GRID, not merely sit above it. Without
   these two lines the six spans are inline and run together as
   "ACCOUNTLAST TRADEDQUIET FORCHANGELIFETIME" — which is what shipped. A
   header that does not share its row's track list is not a header. */
.aa-row-h {
    display: grid;
    grid-template-columns: 22px minmax(0,1fr) 120px 96px 96px 110px 20px;
    gap: .7rem; align-items: center;
    font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-dim); background: var(--surface-2);
    border-bottom: 1px solid var(--border); padding: .5rem .9rem;
    position: sticky; top: 62px; z-index: 2;
}
.aa-row-h span:nth-child(n+3), .aa-row span:nth-child(n+3) { text-align: right; }
/* The change column needs a window of history BEFORE the active window to
   compare against. The Sage extract is 57 days and the window is 90, so the
   column is a wall of em-dashes 96px wide. It comes back on its own when the
   extract does — the class is set from span_days, never typed. */
.aa-list.no-change .aa-row, .aa-list.no-change .aa-row-h {
    grid-template-columns: 22px minmax(0,1fr) 120px 96px 110px 20px;
}
.aa-list.no-change .aa-row > :nth-child(5),
.aa-list.no-change .aa-row-h > :nth-child(5) { display: none; }
.aa-dot { width: 9px; height: 9px; border-radius: 50%; }
.aa-dot.s-active  { background: var(--ok); }
.aa-dot.s-new     { background: var(--s1, var(--ok)); }
.aa-dot.s-at_risk { background: var(--bad); }
.aa-dot.s-lapsing { background: var(--warn); }
.aa-dot.s-dormant { background: var(--text-dim); }
.aa-dot.s-never   { background: var(--border); border: 1px solid var(--text-dim); }
.aa-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.aa-nm em {
    font-style: normal; color: var(--text-dim); font-weight: 400;
    font-size: .72rem; margin-left: .4rem; text-transform: capitalize;
}
.aa-num { font-variant-numeric: tabular-nums; color: var(--text-soft); }
.aa-num.is-bad { color: var(--bad); font-weight: 700; }
.aa-chg { font-variant-numeric: tabular-nums; font-weight: 650; }
.aa-chg.dn { color: var(--bad); }
.aa-chg.up { color: var(--ok); }
.aa-chg.na { color: var(--text-dim); font-weight: 400; }
/* The row opens the account, and until this arrived nothing said so. A cursor
   change is not an affordance you can see without moving the mouse first. */
.aa-go { color: var(--text-dim); opacity: 0; transition: opacity .12s ease; text-align: right; }
.aa-row:hover .aa-go, .aa-row:focus-visible .aa-go { opacity: 1; }
.aa-more {
    display: flex; align-items: center; justify-content: center; gap: .9rem;
    padding: .8rem; flex-wrap: wrap;
}
.aa-list-foot { font-size: .72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.aa-more-of { font-weight: 400; opacity: .75; }

/* ---- the rules editor ---- */
.aa-rules-lede { font-size: .82rem; line-height: 1.6; color: var(--text-soft); margin: 0 0 1.1rem; }
.aa-rule {
    border: 1px solid var(--border); border-radius: 12px;
    padding: .85rem .95rem; margin-bottom: .7rem; background: var(--surface);
}
.aa-rule.is-off { background: var(--surface-2); opacity: .82; }
.aa-rule-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.aa-rule-h b { font-size: .92rem; font-weight: 700; }
.aa-rule-d { font-size: .76rem; line-height: 1.5; color: var(--text-dim); margin: 0 0 .6rem; }
.aa-rule-by { margin: .5rem 0 0; }
.aa-rule-why {
    font-size: .74rem; line-height: 1.55; color: var(--text-soft);
    background: var(--surface-3); border-left: 3px solid var(--warn);
    border-radius: 0 8px 8px 0; padding: .55rem .7rem; margin: 0;
}
/* A state with no live parameter of its own — dormant, new, never. Grey rather
   than amber: nothing is wrong, there is simply nothing to turn. */
.aa-rule-none { border-left-color: var(--border); }
.aa-rule-fields { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.aa-fld { display: flex; flex-direction: column; gap: .2rem; }
.aa-fld label {
    display: flex; align-items: center; gap: .25rem;
    font-size: .62rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-dim);
}
.aa-fld label .bi { cursor: help; opacity: .8; }
.aa-fld input { width: 96px; }
.aa-rule-save { margin-left: auto; }

.aa-rules-note { font-size: .74rem; color: var(--text-dim); margin-right: auto; }

/* Loading skeleton for the state tiles. An empty row where six numbers belong
   reads as "this company has none", which is a different and wrong statement. */
.aa-k.is-load {
    height: 86px; border-radius: 14px; border: 1px solid var(--border);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%; animation: aaShimmer 1.2s ease-in-out infinite;
    cursor: default; pointer-events: none;
}
.aa-k.is-load::before { display: none; }
@keyframes aaShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .aa-k.is-load { animation: none; } }

/* ==================== HOW THEY BUY ====================
   The bar track is CAPPED. Left as 1fr it grew to ~1,500px on a wide monitor —
   a single ratio drawn across most of the screen, which is a lot of ink for
   five numbers and left the counts stranded at the far right where nothing
   could be compared to them. */
.aa-rhy { display: flex; flex-direction: column; gap: .35rem; }
.aa-rhy-h, .aa-rhy-r {
    display: grid; grid-template-columns: 104px 84px minmax(0,1fr) 72px 90px;
    gap: .7rem; align-items: center; width: 100%; text-align: left;
}
.aa-rhy-h {
    padding: 0 .55rem .35rem; border-bottom: 1px solid var(--border);
    font-size: .62rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-dim);
}
.aa-rhy-h span:nth-child(n+4) { text-align: right; }
.aa-rhy-r {
    background: none; border: 1px solid transparent; border-radius: 9px;
    padding: .4rem .55rem; cursor: pointer;
    transition: background .13s ease, border-color .13s ease;
}
.aa-rhy-r:hover { background: var(--surface-2); border-color: var(--border); }
.aa-rhy-r.on { background: var(--gold-100, var(--surface-3)); border-color: var(--gold-500); }
.aa-rhy-l { font-size: .8rem; font-weight: 650; text-transform: capitalize; }
.aa-rhy-g { font-size: .7rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.aa-rhy-t { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.aa-rhy-b { display: block; height: 100%; border-radius: 999px; background: var(--gold-500); }
.aa-rhy-n { font-size: .8rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.aa-rhy-v { font-size: .74rem; color: var(--text-soft); text-align: right; font-variant-numeric: tabular-nums; }
.aa-rhy-note { font-size: .72rem; color: var(--text-dim); }

/* ==================== ONE ACCOUNT ==================== */
.aa-acct-head { align-items: flex-start; }
.aa-acct-head .modal-title { font-size: 1rem; line-height: 1.3; }
.aa-acct-sub { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.aa-acct-id { font-size: .68rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.aa-prof {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .7rem; margin-bottom: 1.2rem;
}
.aa-prof-s {
    border: 1px solid var(--border); border-radius: 12px;
    padding: .7rem .8rem; background: var(--surface-2);
}
.aa-prof-l {
    display: block; font-size: .62rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-dim);
}
.aa-prof-v {
    display: block; font-size: 1.15rem; font-weight: 750; letter-spacing: -.02em;
    margin-top: .15rem; font-variant-numeric: tabular-nums; text-transform: capitalize;
}
.aa-prof-sub { display: block; font-size: .68rem; color: var(--text-dim); margin-top: .1rem; }
.aa-prof-h {
    font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-dim); margin: 0 0 .5rem;
}
/* The month histogram. Bars are a fixed track height with a percentage fill, so
   a quiet month still shows a stub rather than vanishing — an absent bar and a
   zero bar say different things. */
.aa-spark {
    display: flex; align-items: flex-end; gap: 3px; height: 96px;
    padding-bottom: 1.1rem; position: relative; overflow-x: auto; margin-bottom: 1.2rem;
}
.aa-spark-c {
    flex: 1 1 0; min-width: 14px; height: 100%; position: relative;
    display: flex; align-items: flex-end;
}
.aa-spark-b {
    display: block; width: 100%; border-radius: 3px 3px 0 0;
    background: var(--gold-500); transition: height .4s ease;
}
.aa-spark-c:hover .aa-spark-b { background: var(--gold-600, var(--gold-500)); }
.aa-spark-c em {
    position: absolute; bottom: -1rem; left: 0; right: 0; text-align: center;
    font-style: normal; font-size: .55rem; color: var(--text-dim);
    white-space: nowrap; overflow: hidden;
}
/* The actual transactions. account_profile() has returned these twelve rows
   since migration 0137 and nothing had ever drawn them — they are the evidence
   every other figure in the dialog is derived from. */
.aa-txns { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 1.2rem; }
.aa-txn-h, .aa-txn {
    display: grid; grid-template-columns: minmax(0,1fr) 110px 110px;
    gap: .7rem; padding: .4rem .7rem; align-items: center;
}
.aa-txn-h {
    background: var(--surface-2); border-bottom: 1px solid var(--border);
    font-size: .6rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-dim);
}
.aa-txn-h span:not(:first-child) { text-align: right; }
.aa-txn { font-size: .78rem; border-bottom: 1px solid var(--border-soft); }
.aa-txn:last-child { border-bottom: 0; }
.aa-txn span:not(:first-child) { text-align: right; }

/* ==================== GROUPS & CONSOLIDATORS ==================== */
.aa-grp-h, .aa-grp-r {
    display: grid;
    grid-template-columns: minmax(0,26rem) 92px 86px 76px minmax(0,1fr) 104px;
    gap: .7rem; align-items: center;
}
.aa-grp-h {
    padding: 0 .35rem .4rem; border-bottom: 1px solid var(--border);
    font-size: .62rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-dim);
}
.aa-grp-h span:not(:first-child) { text-align: right; }
.aa-grp-r { padding: .55rem .35rem; border-bottom: 1px solid var(--border-soft); }
.aa-grp-r:nth-of-type(even) { background: var(--surface-2); }
.aa-grp-r:last-of-type { border-bottom: 0; }
/* Every one of the ten largest is drawn, so the ones that have a quiet rooftop
   have to be findable in the column. Filtering to quiet>0 instead left Thumbies
   with a single row under a caption reading "the ten largest groups". */
.aa-grp-r.has-quiet { box-shadow: inset 3px 0 0 var(--bad); }
.aa-grp-n { min-width: 0; }
.aa-grp-n b {
    display: block; font-size: .84rem; font-weight: 650;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aa-grp-n span {
    display: block; font-size: .68rem; color: var(--text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The share bar is the point of the panel: two silent rooftops out of three is
   a different problem from two out of three hundred, and only a proportion
   says which. Its base is the TRADING rooftops, and the column beside it shows
   that count so the division is visible rather than implied. */
.aa-grp-t { display: flex; align-items: center; gap: .45rem; }
.aa-grp-track {
    flex: 1 1 auto; height: 8px; border-radius: 999px;
    background: var(--surface-3); overflow: hidden;
}
.aa-grp-b {
    display: block; height: 100%; border-radius: 999px;
    background: var(--bad); min-width: 3px;
}
.aa-grp-t em {
    flex: 0 0 auto; width: 2.4rem; text-align: right;
    font-style: normal; font-size: .68rem; font-weight: 700; color: var(--bad);
    font-variant-numeric: tabular-nums;
}
.aa-grp-t.is-nil .aa-grp-b { min-width: 0; }
.aa-grp-t.is-nil em { color: var(--text-dim); font-weight: 400; }

/* ==================== THE TREND CHART ====================
   A real SVG, and the first actual chart on this page. It lives in panel 1
   above the recency bars, which is also what closed the 337px of dead space
   that card was carrying. */
.aa-tr-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.aa-tr-head b { font-size: 1.5rem; font-weight: 780; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.aa-tr-head span { font-size: .76rem; color: var(--text-soft); }
.aa-tr-head span em { font-style: normal; color: var(--text-dim); }
.aa-tr-yoy {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .72rem; font-weight: 700; margin-left: auto;
}
.aa-tr-yoy.up { color: var(--ok); }
.aa-tr-yoy.dn { color: var(--bad); }
/* A company with two months of data has no year-ago month to compare with, and
   an empty corner where a figure belongs reads as a figure that failed to
   load. The reason is on the chip. */
.aa-tr-yoy.na { color: var(--text-dim); font-weight: 500; font-style: italic; cursor: help; }
/* THE CAP IS WHAT WAS CENTRING THE CHART IN A POOL OF WHITE. The viewBox is
   720x190, so `max-height: 200px` stopped the SVG at ~758px wide; inside a
   col-xxl-7 card of ~1,050px that left ~150px of margin each side, with the
   recency bars directly underneath running the full width. preserveAspectRatio
   centres what is left, so the chart looked deliberately inset when it was
   simply capped. 260px lets it reach ~985px before it stops growing. */
.aa-tr-svg { width: 100%; display: block; max-height: 260px; }
.aa-tr-svg text { fill: var(--text-dim); font: 600 10px var(--bs-body-font-family); }
.aa-tr-grid { stroke: var(--border); stroke-width: 1; }
/* Where the data stops. Without it a two-month extract drew its gridlines the
   full width of the card and the bars read as a collapse at the right-hand end
   rather than as a short series. */
.aa-tr-edge { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
/* Every solid bar opens its month. */
.aa-tb { cursor: pointer; }
.aa-tb rect { transition: opacity .15s ease; }
.aa-tb:hover rect { opacity: .72; }
.aa-tb:focus { outline: none; }
.aa-tb:focus-visible rect { stroke: var(--text); stroke-width: 1.5; }

/* ---- THE PROJECTION IS DRAWN AS AN OUTLINE, NEVER AS A SOLID BAR ----
   A forecast that looks exactly like a measurement is the whole failure mode
   of putting one on a chart at all. It is hollow, its 80% band is drawn as a
   whisker, a dashed rule marks where measurement stops, and it carries no
   pointer cursor because there is nothing to open. */
.aa-tf rect { fill: var(--accent-weak, transparent); stroke: var(--gold-500);
              stroke-width: 1.5; stroke-dasharray: 3 2.5; }
/* The one sharing a slot with the hatched month-to-date bar must not paint over
   it — outline only, so both readings of that month stay visible at once. */
.aa-tf.is-over rect { fill: none; }
.aa-tf-w { stroke: var(--gold-600, var(--gold-500)); stroke-width: 1.2; opacity: .75; }
.aa-tf-x { fill: var(--text-dim); font-style: italic; }
.aa-tf-div { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }

.aa-fc {
    display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap;
    margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--border);
}
.aa-fc-k {
    display: flex; align-items: center; gap: .35rem; align-self: center;
    font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-dim); margin-right: .2rem;
}
.aa-fc-p {
    display: flex; flex-direction: column; min-width: 92px;
    border: 1px dashed var(--gold-400); border-radius: 10px;
    padding: .4rem .6rem; background: var(--accent-weak, var(--surface-2));
}
.aa-fc-p.is-now { border-style: solid; border-color: var(--gold-500); }
.aa-fc-p b { font-size: 1.05rem; font-weight: 780; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.aa-fc-p em { font-style: normal; font-size: .64rem; color: var(--text-dim); }
.aa-fc-p i { font-style: normal; font-size: .62rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.aa-fc-note b { color: var(--text); font-weight: 650; }
.aa-fc-off { display: flex; gap: .45rem; align-items: flex-start; }
.aa-fc-off .bi { flex: 0 0 auto; line-height: 1.5; }

/* ==================== ONE MONTH ==================== */
.aa-mix {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .6rem; margin-bottom: 1.1rem;
}
.aa-mx {
    border: 1px solid var(--border); border-left-width: 3px; border-radius: 12px;
    padding: .6rem .75rem; background: var(--surface-2);
}
.aa-mx-n { display: block; font-size: 1.3rem; font-weight: 780; letter-spacing: -.03em;
           font-variant-numeric: tabular-nums; line-height: 1.1; }
.aa-mx-l { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .06em;
           text-transform: uppercase; color: var(--text-soft); margin-top: .1rem; }
.aa-mx-h { display: block; font-size: .64rem; color: var(--text-dim); margin-top: .2rem; line-height: 1.4; }
.aa-mx.is-keep { border-left-color: var(--ok); }
.aa-mx.is-back { border-left-color: var(--s1, var(--ok)); }
.aa-mx.is-new  { border-left-color: var(--gold-500); }
.aa-mx.is-lost { border-left-color: var(--bad); }
/* A slot the extract is too short to fill. Grey and dashed, never a zero. */
.aa-mx.is-off { border-left-style: dashed; border-left-color: var(--border); opacity: .75; }
.aa-mx.is-off .aa-mx-n { color: var(--text-dim); }
.aa-mix-why { margin-bottom: 1.1rem; }

.aa-mtop-h, .aa-mtop {
    display: grid; grid-template-columns: minmax(0,1fr) 110px 110px;
    gap: .7rem; padding: .45rem .7rem; align-items: center;
}
.aa-mtop-h {
    background: var(--surface-2); border-bottom: 1px solid var(--border);
    font-size: .6rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-dim);
}
.aa-mtop-h span:not(:first-child) { text-align: right; }
.aa-mtop {
    font-size: .8rem; border-bottom: 1px solid var(--border-soft); cursor: pointer;
    transition: background .12s ease;
}
.aa-mtop:last-child { border-bottom: 0; }
.aa-mtop:hover { background: var(--surface-2); }
.aa-mtop:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.aa-mtop span:not(:first-child) { text-align: right; }
.aa-mtop-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.aa-mtop-n em {
    font-style: normal; font-size: .6rem; font-weight: 700; margin-left: .4rem;
    padding: .05rem .35rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em;
}
.aa-mtop-n em.is-new  { background: var(--accent-weak, var(--surface-3)); color: var(--gold-700, var(--text)); }
.aa-mtop-n em.is-back { background: var(--surface-3); color: var(--text-soft); }

/* ==================== RESPONSIVE ====================
   The four fixed columns on the right of each table are the first to go. Names
   and money stay to the end — those are what the page is for. */
@media (max-width: 1400px) {
    .aa-grp-h, .aa-grp-r { grid-template-columns: minmax(0,1fr) 74px 70px 62px minmax(0,14rem) 92px; }
}
@media (max-width: 1100px) {
    .aa-row, .aa-row-h { grid-template-columns: 22px minmax(0,1fr) 96px 90px 20px; }
    .aa-row > :nth-child(5), .aa-row > :nth-child(6),
    .aa-row-h > :nth-child(5), .aa-row-h > :nth-child(6) { display: none; }
    .aa-list.no-change .aa-row, .aa-list.no-change .aa-row-h {
        grid-template-columns: 22px minmax(0,1fr) 96px 90px 20px;
    }
    .aa-risk-r, .aa-risk-h { grid-template-columns: minmax(0,1fr) 82px 96px; }
    .aa-risk-r > :nth-child(4), .aa-risk-h > :nth-child(4) { display: none; }
    .aa-grp-h, .aa-grp-r { grid-template-columns: minmax(0,1fr) 62px 60px 104px 84px; }
    .aa-grp-h > :nth-child(3), .aa-grp-r > :nth-child(3) { display: none; }
    .aa-rhy-h, .aa-rhy-r { grid-template-columns: 92px 72px minmax(0,1fr) 62px 78px; }
}
@media (max-width: 768px) {
    .aa-search-w { margin-left: 0; width: 100%; }
    .aa-search { max-width: none; width: 100%; }
    .aa-rhy-h, .aa-rhy-r { grid-template-columns: 84px minmax(0,1fr) 56px; }
    .aa-rhy-h > :nth-child(2), .aa-rhy-r > :nth-child(2),
    .aa-rhy-h > :nth-child(5), .aa-rhy-r > :nth-child(5) { display: none; }
    .aa-txn-h, .aa-txn { grid-template-columns: minmax(0,1fr) 70px 84px; }
}