/* =============================================================================
ads.css — ONLY what TKATI Ads adds.
The shell is office.css: rail, grid, view, card, table, chip, meter. This
file holds the three things that screen does not already have — the
attention queue, the client health matrix and the pacing bar — and nothing
else. Anything here that could have been a .ofc- class is a second
definition of something that already exists, and two definitions of one
thing are how two screens stop looking like one product.
============================================================================= */
.ads-head__tools { display:flex; align-items:flex-end; gap:16px; }
.ads-window { display:flex; flex-direction:column; gap:2px; }
.ads-window select {
font: inherit; padding:4px 8px; border-radius:6px;
border:1px solid var(--o-line-3); background:var(--paper-2); color:var(--ink);
}
/* ---- the attention queue -------------------------------------------------
IT IS A LIST, NOT A GRID OF CARDS. Six alerts as six boxes is six things of
equal weight, and the whole job of this component is to say which one to
look at first. A list has an order and reads top to bottom, which is what
ranking by consequence is for. */
.ads-q { display:flex; flex-direction:column; gap:1px; background:var(--bone-line); }
.ads-q__i {
display:grid; grid-template-columns:4px 1fr auto; gap:0 14px;
padding:12px 16px; background:var(--paper); align-items:start;
}
.ads-q__i::before { content:""; grid-row:1 / -1; align-self:stretch; border-radius:2px; }
.ads-q__i--critical::before { background:var(--o-bad-mark); }
.ads-q__i--warning::before { background:var(--o-warn); }
.ads-q__i--info::before { background:var(--bone-line); }
.ads-q__h { font-weight:600; }
.ads-q__client { color:var(--stone); font-weight:400; }
.ads-q__d { color:var(--stone); font-size:.9em; margin-top:2px; }
/* THE NUMBER THAT CAUSED THE ALERT, shown rather than summarised. An alert
that cannot say what it saw is one people learn to dismiss. */
.ads-q__ev { font-variant-numeric:tabular-nums; color:var(--ink); font-size:.9em; margin-top:2px; }
.ads-q__impact { color:var(--stone); font-size:.85em; margin-top:4px; font-style:italic; }
.ads-q__act { align-self:center; white-space:nowrap; }
.ads-q__none { padding:20px 16px; color:var(--stone); background:var(--paper); }
/* ---- the client health matrix -------------------------------------------
Four signals per client, each its own column, because "is this client fine"
is four questions and one traffic light throws away the part that says what
to do about it. */
.ads-m__sig { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.ads-m__dot { width:8px; height:8px; border-radius:2px; flex:0 0 auto; }
/* THE OFFICE'S OWN STATE COLOURS, not new ones. Healthy was the purple accent
while the palette had no green; it has one now (--o-ok, tkati.com's own),
and the accent is white, which is not a state. So healthy is the green
MARK, the same green .ofc-chip--ok uses for a healthy anything on the
Office screen; attention is the amber pair, blocked the red mark.
Names lie — --teal was violet, --aqua lilac, and both are white now. Read
the token. And the word is always printed beside the dot: the three hues
sit 1.41-1.60:1 apart in luminance and are legible only because they are
also written down. */
.ads-m__dot--healthy { background:var(--o-ok-mark); }
.ads-m__dot--attention { background:var(--o-warn-ink); }
.ads-m__dot--at-risk { background:var(--o-warn); }
.ads-m__dot--blocked { background:var(--o-bad-mark); }
/* UNKNOWN IS HOLLOW, NOT GREY-GREEN. It has to be visibly a different KIND of
answer from the other four: not "a bit healthy" but "nobody has measured
this", which on a dashboard is the more dangerous state of the two. */
.ads-m__dot--unknown { background:transparent; box-shadow:inset 0 0 0 1.5px var(--bone-mute); }
/* Colour is never the only signal — the state is also written, every time. */
.ads-m__label { font-size:.85em; color:var(--stone); }
/* ---- the pacing bar ------------------------------------------------------
Spend against the flight, with the expected position marked. A bar with no
marker says how much was spent; a bar with one says whether that is the
right amount, which is the only question worth a graphic. */
.ads-pace { display:flex; flex-direction:column; gap:4px; min-width:150px; }
.ads-pace__track {
position:relative; height:8px; border-radius:4px;
background:var(--paper-3, rgba(0,0,0,.06)); overflow:visible;
}
.ads-pace__fill { height:100%; border-radius:4px; background:var(--stone); }
/* COLOUR-ONLY STATE MODIFIERS — THE REGISTER.
A class whose whole job is a background colour carries meaning that a
colour-blind reader, a greyscale print and a screen reader all miss. WCAG
2.1 SC 1.4.1, Level A. The rule this codebase follows is stated in
page-ads.mjs's signal(): "Colour is never the only carrier: the word is
always there too."
Six such classes exist, and each one is paired here with the code that
writes its word. tools/ads-check.mjs asserts this list matches the
stylesheet exactly, so a seventh cannot be added without someone saying
where its word comes from.
.ads-m__dot--healthy signal() appends ads-m__label
.ads-m__dot--attention signal() appends ads-m__label
.ads-m__dot--at-risk signal() appends ads-m__label
.ads-m__dot--blocked signal() appends ads-m__label
.ads-pace__fill--over paceBar() appends "· ahead of plan"
.ads-pace__fill--under paceBar() appends "· behind plan"
The pace pair had no word at all until 2026-09-22: the line beside the bar
read "$4,100 of $6,000 · 9d left" whether spend was ahead of plan, behind
it, or exactly on it. The client-facing screen had always said it in
words; the agency screen, where the decision is actually made, had not. */
.ads-pace__fill--over { background:var(--o-warn); }
.ads-pace__fill--under { background:var(--o-neutral); }
.ads-pace__mark {
position:absolute; top:-3px; bottom:-3px; width:2px;
background:var(--ink); border-radius:1px;
}
.ads-pace__n { font-variant-numeric:tabular-nums; font-size:.85em; color:var(--stone); }
/* ---- provenance ----------------------------------------------------------
§110 on screen. Every figure that came from a platform rather than from the
business says so, in the place it is read, not in a footnote nobody reaches.
It is deliberately plain and small: this is a qualifier, not a badge. */
.ads-src {
font-size:.75em; letter-spacing:.02em; text-transform:uppercase;
color:var(--bone-mute); margin-left:6px; white-space:nowrap;
}
/* ---- a flag, which is the OPPOSITE of a provenance tag -------------------
.ads-src recedes on purpose. Four cells had reached for it to mean "look
at this" — a creative 96 days old, an approval stalled nine days, a change
somebody made outside TKATI — which rendered the alarming thing as the
quietest mark on the row and shrank a number into a micro-label.
A flag keeps the cell's own size and alignment and changes only colour and
weight. --o-warn-ink is the TEXT member of the warn family (10.3:1); the
MARK colour --o-warn is 3.1:1 and would fail here. Colour is never the
only carrier: every flagged cell also says a word — "chase", "aging",
"outside TKATI" — and carries a title with the sentence behind it. */
/* Both selectors, and that is not belt-and-braces. `.ofc-table td` sets a
colour at (0,1,1); a bare utility class is (0,1,0) and loses to it no
matter which stylesheet comes last. Every one of these is used BOTH on a
inside a cell — where the plain class is right — and as the class
of the itself, where it needs the table-scoped twin or it silently
renders as an ordinary dim cell. That is exactly how the flags shipped
looking like everything else: measured at rgb(139,147,152), which is
--o-dim, not the warn ink the rule asked for. */
.ads-flag, .ofc-table td.ads-flag { color:var(--o-warn-ink); font-weight:600; }
/* ---- a disclosure that opens a form -------------------------------------
The is not a field grid; the |