/* =========================================================================
   CRM 3 — Sales Desk
   The page opens on numbers, not on prose: a six-tile KPI band in three
   labelled groups — how I'm doing, what I must do, what I expect — then the
   house tab strip (My Desk / My Team), then the panels.
   Rows are tables wherever a row is a record, so a row is ONE line and the
   shared .data-table vocabulary does the reading work. Page-specific only;
   card, kpi, badge, data-table, chip, switch and avatar come from app.css.
   ========================================================================= */

/* ---- No green on this page: the success state and the Hot heat bars read a
   lighter blue. Page-only — app.css keeps its green for every other page. ---- */
:root {
  --color-success: #4A9BE0; --color-success-50: #E5F1FB; --color-success-ink: #2369A8;
  --wm-active: var(--color-success);
}
[data-theme="evening"] { --color-success: #7CC0FF; --color-success-50: #13263A; --color-success-ink: #7CC0FF; }
[data-theme="elegant"] { --color-success: #7CC0FF; --color-success-50: #1E2A36; --color-success-ink: #7CC0FF; }

/* ---- Page header ---- */
.c3-head { align-items: flex-start; }
.c3-head .page-actions { align-items: center; }
/* The role groups nest inside the actions row so the gear can outlive them. A
   nested group is a run of buttons, not a row of its own: it must never claim
   the full basis the phone rule hands the outer row, or the gear wraps off the
   end of the line it belongs on. */
.c3-head .page-actions .page-actions { flex: none; flex-basis: auto; }

/* Whose desk this is, on the find row rather than beside the title. The label is
   the same small caps crm.html puts in front of its own Recent chips. */
.c3-recent { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.c3-recent[hidden] { display: none; }
/* THE 1px IS AN OPTICAL CORRECTION, NOT A LAYOUT FIX. Measured against the chip
   beside it, this label is already right: both words' ink boxes centre on the same
   line and their baselines agree to within a third of a pixel. It still reads high,
   and the reason is case. This word is all caps, so its ink fills the whole cap
   height; the chip's label is mostly lowercase, whose ink packs into the shorter
   x-height band sitting on the baseline. Centre the two ink boxes and the lowercase
   word's VISIBLE mass still lands about a pixel lower than this one's.

   No alignment mode corrects that — `baseline` moves it a third of a pixel, which
   is the part that was never the problem — so the pixel is taken by hand. It is
   whole rather than fractional because a subpixel offset on 11px text is paid for
   in blur. */
/* 12px, AND THE POINT OF IT IS THE CAP HEIGHT. This word read as sitting above the
   chip beside it, and the row was not the reason: measured on screen at 1:1 the two
   already shared a baseline exactly, both landing on the same pixel row.

   What was off was size. At 11px this label's capitals stood 8px against the chip
   label's 9, so a short all-caps word floated beside a taller one and the eye read
   the gap under it as a drop. At 12px the capitals are 9px, the same as the chip's,
   and the two words now occupy exactly the same rows top and bottom.

   A pixel of `top` was tried first and is the wrong tool — it moves a word that is
   already level, and a whole pixel visibly overshoots into sagging while half a
   pixel is paid for in blur. This is a step UP the ladder, which needs no earning;
   the label stays quiet on weight and colour instead. */
.c3-recent__l {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-subtle);
}

/* A row the page search has narrowed away. Its own class, not `hidden`, because
   most of these tables already own `hidden` for a filter of their own and a
   search that cleared it would bring rows back that were never on show. */
.c3-nomatch { display: none; }
/* THE AVATAR NEEDS ROOM TO BE A CIRCLE. At 2px the 28px face sat 3px off the
   chip's edge once the border is counted, and a circle that close to a corner
   reads as crushed into it rather than held by it — a square would have got away
   with it, a round thing does not.

   4px, which is 5px of clearance with the border. It also squares the chip with
   the row it stands on: the chip was 34px beside a 38px search field, and 28 + 4
   + 4 + 2 is exactly 38. The right side keeps its 10px, because the inset a chip
   gives a word is not the inset it gives a face. */
.c3-idchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; font-size: 13px; font-weight: 500;
  background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: 5px;
}
.c3-idchip .avatar { width: 28px; height: 28px; font-size: 11px; }
/* The chip is a link now — each one opens its client. It keeps the page's ink and
   its own box and takes no underline (memory.md), so what says it is clickable is
   the border firming under the pointer, the way every other chip on this page
   answers. */
a.c3-idchip { color: inherit; text-decoration: none; }
a.c3-idchip:hover { border-color: var(--color-border-strong); }
a.c3-idchip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.c3-chipbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 500;
  color: var(--color-text); background: var(--color-control);
  border: 1px solid var(--color-control-border); border-radius: 5px; cursor: pointer; white-space: nowrap;
}
.c3-chipbtn svg { width: 14px; height: 14px; }
.c3-chipbtn:hover { border-color: var(--color-border-strong); background: var(--color-surface); }

/* ---- The KPI band: three labelled groups of two tiles ----
   SIX TILES, ONE HEIGHT. Each group used to be its own little grid, so rows
   only lined up INSIDE a group: the one tile carrying a target meter made its
   own group 20px taller, its neighbour stretched to match, and the four tiles
   in the other two groups stayed short. Three groups, two heights, one ragged
   band.

   The fix is height, not structure. `grid-auto-rows: 1fr` makes every row of
   groups one height — the tallest — and each group passes that height straight
   down: it is a flex column whose tiles block takes the space the label does
   not, and inside that block the tile rows are `1fr` too. So every tile in the
   band ends up the same height, at every width, and adding a meter to a
   seventh tile can never step the others again.

   The label deliberately does NOT become a row of the band's own grid. It did
   for one draft, and the band's 18px column gap then applied between every
   label and the tiles under it, which is a gap three times the 6px this label
   has always had. It stays in the group's flow, where its own margin sets that
   distance and nothing else does. */
.c3-kpis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  grid-auto-rows: 1fr;
}
.c3-kpigroup { min-width: 0; display: flex; flex-direction: column; }
.c3-kpigroup__label {
  margin-bottom: 6px; padding-left: 1px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-text-subtle);
}
/* `flex: 1` takes the height the group was given; `grid-auto-rows: 1fr` shares
   it evenly, which also matters on a phone, where the pair stacks and the
   meter tile would otherwise stand taller than the one under it. */
.c3-kpigroup__tiles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  grid-auto-rows: 1fr; flex: 1;
}
.c3-kpis .kpi { gap: 3px; }
.c3-kpis .kpi .meta { font-size: 11px; line-height: 1.35; flex-wrap: wrap; }
.c3-kpis .kpi[role="button"] { cursor: pointer; }
.c3-kpis .kpi[role="button"]:hover { border-color: var(--color-primary); }
.c3-kpi--act .value { color: var(--color-danger-ink); }
.c3-kpi--act.is-clear .value { color: var(--color-text); }

/* The tiles that carry a target: a slim meter between value and meta. */
.c3-meter { position: relative; height: 6px; margin: 3px 0 2px; background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: 5px; }
.c3-meter__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--color-primary); transition: width 300ms ease; }
.c3-meter__pace { position: absolute; top: -3px; bottom: -3px; left: 0; width: 2px; background: var(--color-text); }

/* ---- Tab strip: the house strip, attached to the panels it controls ---- */
/* No margins of its own. The 14/12 this used to set overrode .tabs--attached's own
   0 / -1px and held the strip a clear 12px above the panel — which is the whole of
   what "attached" removes. Quotes, Stock and Catalog set nothing here either. */
.c3-tabs .tab { font-size: 14px; padding: 10px 14px; }
.c3-tabs .tab .badge { margin-left: 4px; }

/* ---- Whose numbers: Me · All · one rep ----
   It stands on the page's own grey, so the track takes the white and the hairline
   the search beside the title has (memory.md §13). Me and All are scopes, not
   people: they take the control ground and a rule after All, so the names read as
   a second group. The chosen wash still wins on them — hence :not(.active). */
.c3-scope { background: var(--color-surface); border-color: var(--color-control-border); }
.c3-scope .subtab { padding-block: 9px; }
.c3-scope .c3-scope__me:not(.active), .c3-scope .c3-scope__all:not(.active) { background: var(--color-control); }
.c3-scope .c3-scope__all,
.c3-scope .c3-scope__me:has(+ .c3-scope__all[hidden]) { border-right: 1px solid var(--color-control-border); }
.c3-play { color: var(--color-primary); }
.c3-tabs .c3-scope { margin-left: auto; align-self: center; flex: none; }
.c3-scope .c3-scope__rep svg { width: 14px; height: 14px; }
/* The rep list: the page's popover with a search on top, and a list that scrolls
   inside it so a team of twenty never runs off the screen. */
.c3-reppick { width: 250px; }
.c3-reppick .search { display: flex; width: 100%; min-width: 0; max-width: none; margin-bottom: 6px; }
.c3-reppick .search .input { width: 100%; }
.c3-reppick__list { max-height: 288px; overflow-y: auto; }
.c3-reppick__list .c3-popover__item[aria-selected="true"] { background: color-mix(in oklab, var(--color-primary) 20%, var(--color-surface)); color: var(--color-text); }
.c3-reppick__empty { padding: 8px 10px; }

/* Another rep's desk is read, not worked (owner ruling 2026-09-15): every control
   that would act on it goes, and everything it says stays. */
.page.c3-readonly [data-role-actions="rep"],
.page.c3-readonly #view-rep :is([data-verb], [data-reply], [data-snooze], button[data-queue], .c3-check) { display: none; }

/* A rep's target is set from the line that states it, so the pencil rides the end
   of that line rather than taking a column of its own. */
.c3-target-edit { width: 22px; height: 22px; margin-left: 4px; vertical-align: middle; }
.c3-target-edit svg { width: 13px; height: 13px; }
.c3-rt-note { margin-top: 14px; }

/* ---- Views: two columns of panels, the wide ones spanning both ---- */
/* THE WHITE ON THIS PAGE IS THE PANELS'. Owner ruling 2026-09-10.

   `.tab-shell` (app.css) exists to give an attached tab strip a white box to land
   on where a tab opens on a GRID and there is no single card to attach to. Taking
   that white put the platform's other half in force — nothing inside a white panel
   may be white (memory.md 13) — so these six panels had to be painted, and every
   non-white the platform owns is a blue-grey. At chip size that tint is a hint; at
   panel size, six times over, it is simply the colour of the page. The screen went
   blue, and no shade of the ground was going to fix that, because the ground was
   never the thing that should have moved.

   So the SHELL stands down instead. It keeps its job — it is still the box the
   strip attaches to, still carries the platform's one lead-in under a strip — and
   gives up the paint: the page's own ground shows through, in the gutters between
   the panels and around them, and the panels are white cards on it, which is what
   this page looked like before the shell arrived and what a dashboard of cards
   should look like anyway (a card you click through is a piece of paper, not a
   tinted field). Nothing repeats a colour: page ground → white card → control.

   ALL of the padding goes with the paint, the top included. The sides were
   insetting the panels 16px from a white edge that is no longer drawn, which
   left this grid narrower than the KPI band above it. The top was the platform's
   lead-in under a tab strip — but that lead-in is the distance from the strip to
   the first CONTENT, and on every other tabbed page it is drawn INSIDE the white
   the strip lands on. Here the white moved down to the panels, so the 10px was
   left outside all of it: nine visible pixels of page between the active tab's
   open bottom edge and the panel it is drawn to merge into, which read as the
   tab being cut off. At zero the strip's own -1px pulls the tab's bottom over
   the panel's top border and the two whites become one, the way they do when a
   strip attaches straight to a card. The panel's own top padding is the lead-in
   from there, exactly as it is everywhere else. */
.tab-shell {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
/* And the panels take the white back, with the card chrome the rest of the portal
   draws them in. */
.tab-shell .c3-view .card {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.c3-view[hidden] { display: none; }
.c3-view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--page-gap); align-items: start; }
.c3-wide { grid-column: 1 / -1; }
/* A column that packs its own height. The grid gives it a track; what goes down
   it is a flex stack, so the second panel starts where the first one ended and
   not where the OTHER column's first panel ended. `min-width: 0` or a wide table
   inside pushes the track past its share. My Desk uses these; the manager view
   is still panels straight onto the grid. */
.c3-col { display: flex; flex-direction: column; gap: var(--page-gap); min-width: 0; }

/* ---- Card chrome shared by the panels ---- */
.card-header.c3-cardhead { flex-wrap: wrap; gap: 8px 12px; }
.c3-cardhead__title { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.c3-cardhead__title h3 { margin: 0; white-space: nowrap; }
.c3-cardhead__right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.c3-note { font-size: 11px; color: var(--color-text-subtle); }
.c3-sub { flex-basis: 100%; font-size: 12px; color: var(--color-text-subtle); }
.c3-link { font-size: 12px; font-weight: 500; color: var(--color-primary-700); }
.c3-link:hover { text-decoration: underline; }
.c3-body { padding: 0; }

/* ---- Filter chips ---- */
.c3-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.c3-chip {
  padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 500; line-height: 1.4;
  color: var(--color-text-muted); background: var(--color-control);
  border: 1px solid var(--color-control-border); border-radius: 5px; cursor: pointer; white-space: nowrap;
}
.c3-chip:hover { color: var(--color-primary-700); border-color: var(--color-border-strong); }
/* Chosen goes deeper than the platform wash (app.css, `.subtab.active`): these chips
   sit inside a table header, where a 20% tint read as barely lit. The label takes the
   same hue so fill, border and text all say the one colour. Weight stays at the chip's
   resting 500: the chip is already raised and already coloured. */
.c3-chip[aria-pressed="true"],
.c3-chip.active {
  background: color-mix(in oklab, var(--status-hue, var(--color-primary)) 34%, var(--color-surface));
  border-color: color-mix(in oklab, var(--status-hue, var(--color-primary)) 72%, var(--color-border));
  color: color-mix(in oklab, var(--status-hue, var(--color-primary)) 45%, var(--color-text));
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.10);
}
/* app.js builds the save icon into the row itself, so it is the row's last cell
   and lands at the right-hand end of the header it sits in. */
.c3-chips .save-default { align-self: center; }

/* ---- Marks used inside rows ---- */
/* The source of a row is one word in the sub-line, so it carries its meaning in
   colour alone. Filled, five of them in a column read as five buttons. */
.c3-src {
  /* A word among words, so it is laid out as one. As an inline-flex box it
     carried its own baseline out of its own line box, which is what left it
     sitting a fraction above the sentence it is part of; it holds nothing but
     text, so the flex box was doing no work to pay for that. */
  display: inline; margin-right: 7px; margin-left: 6px;
  /* ONE TYPE FOR THE WHOLE LINE. Owner ruling 2026-09-11. This word was set a
     step smaller than the words either side of it and given half a pixel of
     tracking on top, which is the usual way of making caps sit quietly beside
     lowercase — but on a line this short the eye reads the size change before
     it reads the word, and the line stops looking set and starts looking
     patched. Same size, same tracking, same line height as the sentence it is
     in; the colour and the weight are what mark it, and they are enough. */
  font-size: inherit; font-weight: 700; text-transform: uppercase;
  letter-spacing: normal; line-height: inherit;
  /* No nudge. It was lifted 1px to optically centre 10px caps against 12px
     text, and against a plain sentence that reads as a typo: the word sits
     visibly above the line it is on, and the eye catches the step long before
     it reads the word. Baseline, like every other word on the line. */
  cursor: help;
}
.c3-src--attention { color: var(--color-info-ink); }
.c3-src--quote     { color: var(--color-primary-700); }
.c3-src--showroom  { color: var(--color-success-ink); }
.c3-src--signal    { color: var(--color-warn-ink); }
.c3-src--stock     { color: var(--color-text-muted); }
.c3-tag {
  display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px;
  font-size: 11px; line-height: 1.5; color: var(--color-text-muted);
  background: var(--color-control); border: 1px solid var(--color-control-border);
}
/* The client type is a word beside the name, not a second chip competing with
   the badges that carry state. */
.c3-tag--plain { background: none; border: 0; padding: 0 0 0 2px; color: var(--color-text-subtle); }
.c3-tag--warn { background: var(--color-warn-50); border-color: transparent; color: var(--color-warn-ink); }
.c3-tag--danger { background: var(--color-danger-50); border-color: transparent; color: var(--color-danger-ink); }
.c3-done-mark { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-text-subtle); white-space: nowrap; }
.c3-done-mark svg { width: 13px; height: 13px; }
.c3-ink-danger { color: var(--color-danger-ink); }
.c3-ink-success { color: var(--color-success-ink); }
.c3-empty { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 26px 16px; text-align: center; color: var(--color-text-muted); }
.c3-empty[hidden] { display: none; }
.c3-empty svg { width: 30px; height: 30px; color: var(--color-text-subtle); margin-bottom: 3px; }
.c3-empty__t { font-weight: 600; color: var(--color-text); }
.c3-empty__s { font-size: 12px; max-width: 340px; }
@keyframes c3-flash { 0%, 100% { background: transparent; } 30% { background: var(--color-primary-50); } }
.is-flash { animation: c3-flash 1.2s ease-out; }

/* ---- Checkbox ---- */
.c3-check { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; cursor: pointer; flex: none; }
.c3-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* A tick, not a box. An empty checkbox beside a task reads as "not selected";
   a faint check mark reads as "tick this off", which is what it does. */
.c3-check__box { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; color: var(--color-text-subtle); background: none; border: 0; }
.c3-check__box svg { width: 17px; height: 17px; opacity: .4; stroke-width: 2.5; }
.c3-check:hover .c3-check__box { color: var(--color-success); background: var(--color-control); }
.c3-check:hover .c3-check__box svg { opacity: .85; }
.c3-check input:checked + .c3-check__box { color: var(--color-success); background: none; }
.c3-check input:checked + .c3-check__box svg { opacity: 1; }
.c3-check input:focus-visible + .c3-check__box { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- Five-segment gauge ---- */
.c3-gauge { display: inline-flex; gap: 2px; vertical-align: middle; }
.c3-gauge i { display: block; width: 7px; height: 6px; border-radius: 1px; background: var(--color-border-strong); }
.c3-gauge[data-level="1"] i:nth-child(-n+1),
.c3-gauge[data-level="2"] i:nth-child(-n+2),
.c3-gauge[data-level="3"] i:nth-child(-n+3),
.c3-gauge[data-level="4"] i:nth-child(-n+4),
.c3-gauge[data-level="5"] i:nth-child(-n+5) { background: var(--color-primary); }

/* ---- Sparkline ---- */
.c3-spark { display: block; color: var(--color-primary); }
.c3-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.c3-spark--down { color: var(--color-danger); }
.c3-spark--flat { color: var(--color-text-subtle); }

/* ---- Tables: one line per row, every column addressed by class ---- */
.c3-table .table-wrap { border: 0; border-radius: 0; }
.c3-table .data-table { table-layout: auto; }
.c3-table td { vertical-align: middle; }
.c3-table td.col-do, .c3-table th.col-do { text-align: right; white-space: nowrap; width: 1%; }
.c3-table .c3-do { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.c3-table .c3-do .icon-btn { width: 28px; height: 28px; }
.c3-table .c3-do .icon-btn svg { width: 15px; height: 15px; }
.c3-table tr[hidden] { display: none; }
.c3-owner { color: var(--color-text-muted); }

/* Today's Sales Actions */
/* Same reason as Active Quotes: the action line is an ellipsised single line, but
   under auto layout a table still widens to fit it whole, so a long client name
   pushed the row past the card. Declared widths keep the give in the one column
   that can take it. */
/* The tick column is the tick and 10px either side, nothing more. */
/* The controls column is the widest verb pair and nothing more — clock, gap, Reply
   comes to 104px, so 128px is that plus the cell's own padding either side. Any
   wider and the short verbs (Call, Open) leave a hole between themselves and the
   tick, which is the only thing to the right of them. */
.c3-qtable { --q-do: 128px; --q-done: 46px; }
.c3-qtable .data-table { table-layout: fixed; }
.c3-qtable col.col-action { width: auto; }
.c3-qtable col.col-do { width: var(--q-do); }
.c3-qtable col.col-done { width: var(--q-done); }
.c3-qtable .data-table tbody td.col-done { padding-inline: 10px; text-align: right; }
/* EVERY CELL IN THIS TABLE STARTS AT THE TOP OF ITS ROW, so the action text,
   the controls and the tick all begin on one line rather than being centred
   against the tallest cell and sinking away from the group heading above. */
.c3-qtable tbody td { vertical-align: top; }
/* SNOOZE READS BEFORE THE VERB, on one line with it and anchored left. The pair
   then makes two clean columns down the card — every clock at one x, every verb
   starting at the next — which four verbs of four different lengths cannot do
   when the pair is banked against the right edge instead. The done tick is
   untouched: it is the row's own column and keeps the right edge it shares with
   every other last column on the platform. */
.c3-qtable .c3-do { flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; }
.c3-qtable td.col-do { text-align: left; }

/* The row boundary is one mark per column, and the tick's would be a 16px stub
   against the right edge. It is dropped into its neighbour instead, so the
   boundary is the two marks it should be — one under the text, left-anchored,
   one under the controls. */
.c3-qtable tbody td.col-do::after { content: none; }
.c3-qtable tbody td.col-done::after { left: calc(-1 * (var(--q-do) - var(--table-pad-x))); }
.c3-qtable td.col-action .main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A GROUP HEADING LEANS ON THE ROWS IT HEADS. Air above it, almost none below,
   or it floats between its own rows and the ones before them and stops saying
   which it belongs to. That was written here from the start and never took
   effect: the house rule for a table cell is `.data-table tbody td`, which
   outweighs a single class, so the heading kept an even 10/10 band and sat a
   clear step away from its first row. Matched through the table to outweigh it.
   The fold is vertical-align: middle for the same reason — as an inline button
   it sat on the text baseline and hung the line's descender space under the
   heading, which is height nothing was using. */
.c3-table .data-table tbody tr.c3-grouprow td {
  padding-top: 13px; padding-bottom: 3px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted);
  background: transparent;
}
.c3-groupfold { vertical-align: middle; }
.c3-table .data-table tbody tr.c3-grouprow td::after { content: none; }
/* The group cell spans the row, so it is also the LAST cell, and the house rule that
   right-aligns a last column was throwing the group name to the far edge. A group
   header reads from the left. Matched on :last-child to out-weigh that rule. */
.c3-table .c3-grouprow td:last-child { text-align: left; }
.c3-grouprow[hidden] { display: none; }
.c3-qtable tr.is-done td.col-action { text-decoration: line-through; color: var(--color-text-subtle); }
.c3-qtable tr.is-done .c3-do { visibility: hidden; }
.c3-donefold { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 500; color: var(--color-text-muted); cursor: pointer; }
.c3-donefold[aria-expanded="true"] svg { transform: rotate(90deg); }
.c3-donetable[hidden] { display: none; }
.c3-donetable td { color: var(--color-text-subtle); }
.c3-donetable td.col-action { text-decoration: line-through; }
/* The group header is the control that folds its rows away. It keeps the row's own
   type — .c3-donefold would impose its 12px on a line that is 11px uppercase — and
   borrows only the chevron that turns, which is how every fold on this page reads. */
.c3-groupfold { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; }
.c3-groupfold[aria-expanded="true"] svg { transform: rotate(90deg); }
.c3-groupfold:hover { color: var(--color-text); }

/* THE CHEVRON IS A CONTROL, SO IT IS GIVEN A CONTROL'S GROUND. Both folds wore a
   bare 12–14px glyph sitting straight on the card, which is the one thing on the
   platform nothing is allowed to do — it read as a stray mark rather than the
   thing that hides and shows the rows under it, and at 12px it was barely worth
   aiming at. A 15px chevron on a 21px rounded ground is a target, and it says
   before it is pressed that it does something. Both folds take it, because they
   are the same act on the same card and one of them looking built and the other
   drawn on would be worse than either. */
.c3-groupfold svg, .c3-donefold svg {
  width: 15px; height: 15px;
  padding: 3px; box-sizing: content-box;
  border-radius: 6px;
  background: var(--color-control);
  color: var(--color-text-muted);
  transition: transform 150ms, background-color 150ms, color 150ms;
}
.c3-groupfold:hover svg, .c3-donefold:hover svg { color: var(--color-text); }

/* Active Quotes */
/* House quote numbers (QUO-2026-0035) are twice the width of the short ids this
   table used to carry, and .c3-table puts the page's tables back on auto layout,
   so the quote column grew with the data until the row ran past the card. The
   widths are declared as a share of the table instead: it resizes with the
   window, never with what lands in it. */
.c3-quotes .data-table { table-layout: fixed; }
/* The likelihood reads under the value it qualifies, so the two share one
   column. It is a fixed gauge plus a percentage, so the column is measured in
   pixels like the action column rather than as a share. */
.c3-quotes th.col-value { width: 108px; }
/* The action cell holds buttons, which do not scale with the window, so it is
   the one column measured in pixels; the quote column takes whatever is left
   and ellipsises, which is what should give when the window narrows. */
.c3-quotes th.col-do { width: 170px; }
.c3-quotes th.col-est { width: auto; }
.c3-quotes td.col-value, .c3-quotes th.col-value { text-align: right; white-space: nowrap; }
.c3-quotes td.col-value > .cell-stack { align-items: flex-end; }
/* Right-aligned content takes the mirrored row mark, the way every right-aligned
   column on the platform does. */
.c3-quotes tbody td.col-value::after { background: var(--row-mark-right); }
.c3-quotes td.col-est .main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c3-quotes tr.is-ready td.col-est { box-shadow: inset 3px 0 0 var(--color-primary); }
.c3-stage { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.c3-stage__dots { display: inline-flex; align-items: center; gap: 4px; }
.c3-stage__dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-border-strong); }
.c3-stage[data-step="1"] .c3-stage__dots i:nth-child(-n+1),
.c3-stage[data-step="2"] .c3-stage__dots i:nth-child(-n+2),
.c3-stage[data-step="3"] .c3-stage__dots i:nth-child(-n+3),
.c3-stage[data-step="4"] .c3-stage__dots i:nth-child(-n+4),
.c3-stage[data-step="5"] .c3-stage__dots i:nth-child(-n+5) { background: var(--color-primary); }
.c3-stage[data-step="5"] { color: var(--color-success-ink); }
.c3-like { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: help; }

/* Hot Clients */
.c3-hot td.col-heat, .c3-hot th.col-heat { width: 1%; white-space: nowrap; }
.c3-heat { display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.c3-heat__n { min-width: 24px; text-align: right; font-size: 15px; font-weight: 700; }
.c3-heat__bars { display: flex; flex-direction: column-reverse; gap: 1px; }
.c3-heat__bars i { display: block; width: 12px; height: 3px; border-radius: 1px; background: var(--color-border-strong); }
.c3-heat[data-band="hot"]  i:nth-child(-n+5) { background: var(--wm-active); }
.c3-heat[data-band="warm"] i:nth-child(-n+4) { background: var(--wm-engaged); }
.c3-heat[data-band="cool"] i:nth-child(-n+3) { background: var(--wm-contacted); }
.c3-heat[data-band="cold"] i:nth-child(-n+2) { background: var(--wm-new); }
/* THE SIGNALS COLUMN TAKES THE SLACK. Under auto layout the spare width was
   being shared out between the client name and the signals, so a six-letter name
   sat in a column three times its length and the chips ended nowhere near the
   controls they belong to. The name is sized to itself and the signals get
   everything left over, which puts the whole row on one side and one gap where
   there were two.

   THE PANEL TOOK THE RIGHT-HAND COLUMN ON 2026-09-22, and this rule is what
   makes half width survivable: the name is not the column that gives, so the
   signals absorb the loss by wrapping inside their own cell. Above ~1450px
   every row still reads on one line. BETWEEN 1201px AND ~1450px a two-signal
   row wraps to two, and it can break mid-phrase ("Volume / Pricing"), because
   the tags are written with no whitespace between them and so offer the line
   no break opportunity of their own. Measured, not guessed: at 1280px the
   signals cell is 147px and row one wraps. It is cosmetic — nothing is
   clipped and nothing scrolls — and the three fixes that suggest themselves
   are all worse: white-space:nowrap on the tag makes the whole run
   unbreakable and pushes the table 20px past its wrapper, so the Do column
   goes behind a horizontal scrollbar; display:inline-block collapses the
   column to 137px and stacks a three-signal row three high; width:100% on the
   table does not shrink it. The real fix, if the owner wants one, is
   structural: move the signals under the client name as the row's sub-line,
   the way every other panel in this column renders a client and its reason.
   Below 1200px the view is a single column and none of this applies. */
.c3-hot td.col-client, .c3-hot th.col-client { width: 1%; white-space: nowrap; }
.c3-hot td.col-signals { color: var(--color-text-muted); }
/* SIGNALS ARE READINGS, NOT BUTTONS. Owner ruling 2026-09-11. Three boxed chips
   per row, six rows down the panel, put eighteen filled rectangles on screen to
   carry eighteen short phrases — and a box says "press me", which none of these
   do. Boxed, they also cost more room than the words inside them and spread a
   tint across the widest panel on the page. Set as words on the row's own
   ground, separated by the house dot, they read as one line about the client:
   viewed six times, wishlisted twice, back three days ago. The two that mean
   something urgent keep their colour and take weight instead of fill, which is
   the same trade the age reading makes two panels up. */
.c3-hot td.col-signals .c3-tag {
  display: inline; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: none; font-size: inherit; line-height: inherit;
  color: var(--color-text-muted);
}
.c3-hot td.col-signals .c3-tag + .c3-tag::before {
  content: "·"; margin: 0 6px; color: var(--color-border-strong);
}
.c3-hot td.col-signals .c3-tag--warn { color: var(--color-warn-ink); font-weight: 600; }
.c3-hot td.col-signals .c3-tag--danger { color: var(--color-danger-ink); font-weight: 600; }

/* Showroom Activity */
.c3-live td.col-when, .c3-live th.col-when { width: 1%; white-space: nowrap; color: var(--color-text-subtle); }
.c3-live td.col-client { white-space: nowrap; }
.c3-live td.col-mat { color: var(--color-text-muted); max-width: 250px; }
.c3-live tr.is-idle td { color: var(--color-text-muted); }
.c3-pulse { position: relative; display: inline-block; }
.c3-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--color-info); animation: c3-ring 1.6s ease-out infinite; }
.c3-pulse.is-paused::after { display: none; }
@keyframes c3-ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .c3-pulse::after { display: none; } }
.c3-vip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  background: var(--color-primary-50); border-radius: 5px;
  font-size: 12px; font-weight: 500; color: var(--color-primary-700);
}
.c3-vip svg { width: 14px; height: 14px; }
.c3-vip:hover { color: var(--color-primary-700); text-decoration: underline; }

/* ---- Manager: Team Sales Performance ---- */
.c3-team td.col-rep, .c3-team th.col-rep { white-space: nowrap; }
.c3-repbtn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--color-primary-700); cursor: pointer; }
.c3-repbtn:hover { text-decoration: underline; }
.c3-team td.col-att { min-width: 168px; }
.c3-team td.col-att .c3-meter { margin: 0 0 4px; }
.c3-team td.col-att .sub { font-size: 11px; color: var(--color-text-subtle); white-space: nowrap; }
.c3-team td.col-gap, .c3-team th.col-gap,
.c3-team td.col-orders, .c3-team th.col-orders,
.c3-team td.col-avg, .c3-team th.col-avg { text-align: right; white-space: nowrap; }
.c3-team td.col-gap { font-weight: 500; }
.c3-team tr.is-total td { font-weight: 600; background: var(--color-surface-alt); }
.c3-team tr.is-total td.col-att .sub { font-weight: 400; }

/* ---- Manager: Pipeline by Sales Rep ---- */
.c3-pipe { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.c3-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--color-text-muted); }
.c3-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.c3-piperow { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.c3-piperow__rep { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.c3-piperow__bar { display: flex; height: 14px; border-radius: 5px; overflow: hidden; background: var(--color-control); width: 100%; transition: width 300ms ease; }
.c3-piperow__seg { display: block; height: 100%; border: 0; padding: 0; cursor: pointer; transition: width 300ms ease, opacity 150ms; }
.c3-piperow__seg:hover { opacity: .8; }
.c3-piperow__seg.is-on { outline: 2px solid var(--color-text); outline-offset: -2px; }
.c3-piperow.is-dim .c3-piperow__bar { opacity: .35; }
.c3-stage-draft { background: var(--color-neutral); }
.c3-stage-shared { background: var(--color-info-50); }
.c3-stage-review { background: var(--color-info); }
.c3-stage-partial { background: var(--color-primary); }
.c3-stage-approved { background: var(--color-success); }
.c3-piperow__total { font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; color: var(--color-primary-700); border: 0; background: none; font-family: inherit; padding: 0; cursor: pointer; }
.c3-piperow__sub { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -8px; font-size: 11px; color: var(--color-text-subtle); }

/* ---- Manager: Follow-Up Accountability ---- */
.c3-fu { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.c3-furow { background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: 5px; }
.c3-furow__main { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; }
.c3-furow__name { font-size: 13px; font-weight: 500; }
.c3-furow__stats { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 3px; font-size: 11px; color: var(--color-text-subtle); }
.c3-furow__stat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.c3-furow__stat b { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.c3-furow__stat .badge { padding: 0 6px; }
.c3-fuitems { border-top: 1px solid var(--color-control-border); padding: 4px 10px 8px 52px; }
.c3-fuitems[hidden] { display: none; }
.c3-fuitem { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 5px 0; font-size: 12px; border-top: 1px dashed var(--color-control-border); }
.c3-fuitem:first-child { border-top: 0; }
.c3-furow .icon-btn svg { transition: transform 150ms; }
.c3-furow[data-open="true"] [data-fu-expand] svg { transform: rotate(180deg); }

/* ---- Manager: At-Risk ---- */
.c3-risk td.col-value, .c3-risk th.col-value { text-align: right; white-space: nowrap; font-weight: 700; }
.c3-risk td.col-value small { display: block; font-size: 10px; font-weight: 500; color: var(--color-text-subtle); }
.c3-risk td.col-why { color: var(--color-text-muted); }
.c3-risk td.col-rep, .c3-risk th.col-rep { width: 1%; }
.c3-risk td.col-trend, .c3-risk th.col-trend { width: 1%; }
.c3-risk td.col-quote { white-space: nowrap; }
.c3-risk tr.is-handled { opacity: .65; }
.c3-risk .avatar { width: 26px; height: 26px; font-size: 10px; }

/* ---- Manager: Sales Rep Activity ---- */
.c3-act td.col-n, .c3-act th.col-n { text-align: center; }
.c3-act td.col-rep { white-space: nowrap; }
.c3-heatcell { cursor: pointer; }
.c3-heatcell .val { display: block; font-size: 14px; font-weight: 500; }
.c3-heatcell .delta { display: block; font-size: 11px; color: var(--color-text-subtle); }
.c3-heatcell[data-heat="1"] { background: var(--color-info-50); }
.c3-heatcell[data-heat="2"] { background: color-mix(in oklab, var(--color-primary) 22%, var(--color-surface)); }
.c3-heatcell[data-heat="3"] { background: color-mix(in oklab, var(--color-primary) 40%, var(--color-surface)); }
.c3-heatcell.is-low { background: var(--color-warn-50); }
.c3-act tr.is-median td { color: var(--color-text-muted); font-style: italic; background: var(--color-surface-alt); }
.c3-act td.col-score { white-space: nowrap; }
.c3-score { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: help; }

/* ---- Manager: Sales Meeting View ---- */
.c3-present { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-text-muted); }
.c3-present .icon-btn { width: 28px; height: 28px; }
.c3-present .icon-btn svg { width: 15px; height: 15px; }
.c3-lanetabs { display: none; }
.c3-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; }
.c3-lane { display: flex; flex-direction: column; min-height: 170px; background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: 5px; }
.c3-lane__head { padding: 8px 10px; border-bottom: 1px solid var(--color-control-border); }
.c3-lane__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text); }
.c3-lane__q { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.c3-lane__tot { font-size: 10px; color: var(--color-text-muted); margin-top: 3px; }
.c3-lane__body { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.c3-lane.is-flash .c3-lane__head { animation: c3-flash 1.2s ease-out; }
.c3-lane__empty { font-size: 11px; color: var(--color-text-subtle); text-align: center; padding: 12px 6px; }
.c3-lane__empty[hidden] { display: none; }
.c3-bcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 5px; box-shadow: var(--shadow-sm); }
.c3-bcard[hidden] { display: none; }
.c3-bcard .avatar { width: 24px; height: 24px; font-size: 10px; }
.c3-bcard .c3-check { width: 24px; height: 24px; }
.c3-bcard__main { font-size: calc(13px * var(--board-scale, 1)); font-weight: 500; line-height: 1.3; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.c3-bcard__val { font-weight: 600; white-space: nowrap; }
.c3-bcard__sub { font-size: calc(11px * var(--board-scale, 1)); color: var(--color-text-subtle); margin-top: 2px; line-height: 1.35; }
.c3-bcard__foot { margin-top: 6px; }
.c3-bcard.is-done .c3-bcard__main, .c3-bcard.is-done .c3-bcard__sub { text-decoration: line-through; color: var(--color-text-subtle); }
.c3-bcard.is-new .c3-bcard__main::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-info); align-self: center; }
.c3-board.is-solo .c3-bcard > .avatar { display: none; }
.c3-proves { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font: inherit; font-size: 11px; font-weight: 600; color: var(--color-primary-700); background: var(--color-primary-50); border: 1px solid transparent; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.c3-proves svg { width: 12px; height: 12px; }
.c3-proves:hover { border-color: var(--color-primary); }
.c3-proves span { font-weight: 400; color: var(--color-text-muted); }

/* Meeting Mode — the board is the page, everything else waits. */
.page.c3-meeting { --board-scale: 1.15; }
.page.c3-meeting .c3-kpis, .page.c3-meeting .c3-tabs { display: none; }
.page.c3-meeting .c3-view { grid-template-columns: 1fr; }
.page.c3-meeting .c3-view > :not(.c3-meetingcard) { display: none; }
/* THE WAY OUT HAS TO SURVIVE THIS RULE, AND IT DID NOT. Meeting Mode strips the
   action row down to its one button, and this hid every child that was not that
   button — but the button is a GRANDchild: the row nests a group per role, and
   Exit sits inside the manager one. So the group went, and the only way out of
   Meeting Mode went with it, while the button itself still reported `hidden=false`
   and a display of its own. It measured 0×0 on screen, which is the only check
   that would have caught it.

   `:has()` keeps whatever CONTAINS the button as well as the button, so the rule
   reaches through the group instead of over it. The group is itself a
   `.page-actions`, so the same rule runs again inside it and clears the buttons
   standing beside Exit. One rule, both levels. */
.page.c3-meeting .page-actions > :not([data-exit-meeting]):not(:has([data-exit-meeting])) { display: none; }
.page.c3-meeting .c3-lane { min-height: 320px; }

/* ---- Overlays: one drawer, one popover ---- */
.c3-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, .35); }
.c3-backdrop[hidden] { display: none; }
.c3-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 210; width: min(400px, 92vw); display: flex; flex-direction: column; background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: var(--shadow-lg); animation: c3-slide 180ms ease-out; }
.c3-drawer[hidden] { display: none; }
@keyframes c3-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.c3-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
.c3-drawer__head h2 { margin: 0; font-size: 17px; }
.c3-drawer__body { flex: 1; overflow: auto; padding: 16px; font-size: 13px; }
.c3-drawer__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--color-border); }
.c3-drawer__foot[hidden] { display: none; }
.c3-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; margin: 0 0 14px; }
.c3-kv dt { color: var(--color-text-muted); text-align: right; }
.c3-kv dd { margin: 0; font-weight: 500; }
.c3-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.c3-field label { font-size: 12px; color: var(--color-text-muted); }
.c3-field .input, .c3-field .textarea { width: 100%; }
.c3-field .textarea { min-height: 84px; resize: vertical; }
.c3-field--short .select, .c3-field--short .input { width: auto; min-width: 190px; }
.c3-drawer .switch-field { margin-bottom: 12px; }
.c3-drawer .grid-2 { gap: 8px; margin-bottom: 14px; }
.c3-drawer .kpi { background: var(--color-control); border-color: var(--color-control-border); }
.c3-list { display: flex; flex-direction: column; gap: 6px; }
.c3-list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: 5px; font-size: 12px; }
.c3-list__row .sub { display: block; font-size: 11px; color: var(--color-text-subtle); }
.c3-popover { position: fixed; z-index: 220; min-width: 170px; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 5px; box-shadow: var(--shadow-lg); }
.c3-popover[hidden] { display: none; }
.c3-popover__label { padding: 4px 10px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.c3-popover__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; background: none; font: inherit; font-size: 13px; color: var(--color-text); text-align: left; cursor: pointer; }
.c3-popover__item:hover { background: var(--color-primary-50); color: var(--color-primary-700); }
.c3-popover__item .avatar { width: 22px; height: 22px; font-size: 10px; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1400px) {
  .c3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .c3-kpigroup:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1200px) {
  .c3-view { grid-template-columns: 1fr; }
  .c3-board { grid-template-columns: repeat(5, minmax(170px, 1fr)); overflow-x: auto; }
}
@media (max-width: 768px) {
  .c3-head { flex-wrap: wrap; }
  .c3-head .page-actions { flex-basis: 100%; margin-left: 0; flex-wrap: wrap; }
  .c3-head .page-actions .btn, .c3-idchip, .c3-chipbtn { min-height: 44px; }
  .c3-kpis { grid-template-columns: 1fr; }
  .c3-kpigroup:last-child { grid-column: auto; }
  .c3-cardhead__right { margin-left: 0; flex-basis: 100%; }
  .c3-tabs .tab, .c3-chip, .subtab, .c3-check, .btn-sm, .c3-proves, .c3-donefold, .c3-piperow__total, .c3-popover__item, .c3-table .c3-do .icon-btn { min-height: 44px; }
  .c3-table .c3-do .icon-btn, .c3-target-edit { width: 44px; height: 44px; }
  .c3-check { width: 44px; }
  /* Touch sizing grows the clock to 44px, so the pair needs the old width back. */
  .c3-qtable { --q-do: 150px; --q-done: 64px; }
  .c3-view .switch::before, .c3-drawer .switch::before { content: ""; position: absolute; inset: -12px -6px; }
  .c3-live th.col-mat, .c3-live td.col-mat,
  .c3-hot th.col-signals, .c3-hot td.col-signals { display: none; }
  .c3-team th.col-rep, .c3-team td.col-rep, .c3-act th.col-rep, .c3-act td.col-rep { position: sticky; left: 0; z-index: 2; background: var(--color-surface); }
  .c3-team thead th.col-rep, .c3-act thead th.col-rep { background: var(--color-table-head); z-index: 3; }
  .c3-act .c3-heatcell .delta { display: none; }
  .c3-piperow { grid-template-columns: minmax(0, 1fr); }
  .c3-piperow__bar { height: 28px; }
  .c3-piperow__total { text-align: left; }
  .c3-piperow__sub { grid-column: 1 / 2; margin-top: 0; }
  .c3-furow__stat[data-stat="ontime"] .c3-gauge { display: none; }
  .c3-lanetabs { display: flex; flex-wrap: nowrap; width: fit-content; max-width: calc(100% - 32px); margin: 14px 16px 0; overflow-x: auto; }
  .c3-lanetabs .subtab { flex: none; }
  .c3-board { grid-template-columns: 1fr; overflow: visible; }
  .c3-board .c3-lane { display: none; }
  .c3-board .c3-lane.is-shown { display: flex; }
}
@media (max-width: 480px) {
  .c3-kpigroup__tiles { grid-template-columns: 1fr; }
  .c3-idchip__name { display: none; }
  .c3-team th.col-orders, .c3-team td.col-orders,
  .c3-team th.col-avg, .c3-team td.col-avg,
  .c3-team th.col-trend, .c3-team td.col-trend,
  .c3-risk th.col-trend, .c3-risk td.col-trend { display: none; }
}

/* The table's own header row carries the selector. The column name sits at the
   bar's left edge and the chips bank right; the bar wraps rather than crushing
   either. It spans every column, so the widths come from a colgroup instead. */
.c3-table th.c3-thcell { text-align: left; padding-top: 7px; padding-bottom: 7px; }
.c3-thbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px 12px; flex-wrap: wrap;
}
.c3-thbar__t { margin-right: auto; }
.c3-thbar .c3-chips { flex-wrap: wrap; justify-content: flex-end; }
.c3-thbar .btn-sm { text-transform: none; letter-spacing: 0; }

/* The target reading banks right against the pace pill, so the two sit on one
   line instead of the caption wrapping under it and adding two lines of height
   to every tile in the row. */
.c3-metaright { margin-left: auto; white-space: nowrap; }
.kpi .meta > span { white-space: nowrap; }

/* On this card the queue state reads before the verb, on one line with it, so the
   verb keeps the right edge. Queue and Queued share the place, so pressing Queue
   does not move the verb. */
.c3-quotes .c3-do { flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; }
.c3-quotes .c3-do > .c3-done-mark { order: -1; }

/* The age leads every row, so it is read as a word, not worn as a chip: three of
   them stacked down a card turned into a column of buttons. It keeps the colour
   that carries the urgency and takes the weight instead of the fill. */
.c3-age {
  background: none; border: 0; padding: 0; border-radius: 0;
  font-weight: 700; white-space: nowrap;
  /* And laid out as a word too. It is a .badge underneath, so it was still an
     inline-flex box: its two runs ("4d" and "Late") were flex items centred in
     a box with its own baseline, which is both why the pair sat a hair off the
     line and why the gap between them was never quite a space. Inline, it is
     three words on one line with nothing between them but spaces. */
  display: inline;
}
/* THE SUB-LINE IS A SENTENCE, NOT THREE COLUMNS. Owner ruling 2026-09-11. The
   age and the source were each given the width of the longest of their kind so
   the three readings would line up straight down the card — but a column is
   only read as a column when the eye has a reason to scan down it, and nobody
   scans a list of nine one-off errands that way. What it actually produced was
   a ragged gap after every short age and every short source, on a line whose
   three parts are meant to be read across in one breath: 4d Late, Attention,
   what was promised. They run one after another now, a single space apart.
   The space before the source is the one in the markup and the space after it
   is this margin, so the margin is sized to match it — otherwise the word ends
   up with a wider gap on one side than the other, which is the same ragged
   reading in miniature. */
.c3-qtable .c3-src { margin-left: 0; margin-right: 3px; }
.c3-src + .c3-age, .c3-age + .c3-src { margin-left: 0; }

/* =========================================================================
   PERFORMANCE — the tab that is read rather than worked

   THE STYLESHEET OWNS THE BOXES; ECHARTS OWNS WHAT IS INSIDE THEM. Every rule
   here is layout — how tall a chart's box is and how the nine cards fall into
   the grid. Not one colour is set on a chart, because js/crm3-perf.js reads
   this file's custom properties at build time and paints from them; a colour
   written here as well would be the same decision in two places, and the two
   would part company at the first theme.

   HEIGHTS ARE DECLARED, NOT DISCOVERED. A chart container with no height is
   zero pixels tall, and ECharts measures its box exactly once. Every one of
   these is sized by what its shape needs: a gauge is nearly square, a sankey
   needs room for four rows of labels either side, a treemap stops being
   readable under about 260px.
   ========================================================================= */
/* TWELVE COLUMNS, BECAUSE TWO WERE SIZING THE BOXES BY THE GRID RATHER THAN BY
   THE CHART. Owner ruling 2026-09-11. Half the page is an enormous frame around
   a gauge that is one number and a funnel that is four bands; the other charts
   genuinely want the run. On twelve columns each card asks for what its shape
   needs, and the cards are ordered so the rows fill exactly:

     4 4 4     pace, funnel, holds — the three quick reads
     6 6       quoted-against-won, price realization — the two over time
     6 6       the mix, the clients — the two breakdowns
     12        the sankey, which is four nodes in and four out

   The order is the reading order too: how am I doing, then over what time,
   then made of what, then coming from where. Nothing is placed by `dense`
   auto-flow — a grid that reflows cards to plug its own holes puts the reading
   order at the mercy of the window width. */
.c3-perf { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.c3-perf .c3-pcard { min-width: 0; }
.c3-perf .c3-sp4 { grid-column: span 4; }
.c3-perf .c3-sp6 { grid-column: span 6; }
.c3-perf .c3-sp12 { grid-column: span 12; }

/* The house card body, plus two pixels at the foot: a chart's last row of ink
   sits on its own edge where a table's last row has a cell's padding under it. */
.c3-pbody { padding: 14px 16px 16px; }
/* Heights come down with the widths. A chart in a quarter-width card that kept
   its half-width height would be a tall thin box with a small drawing adrift in
   it — which is the same complaint in the other direction. */
.c3-chart { width: 100%; height: 214px; }
.c3-chart--gauge { height: 214px; }
.c3-chart--tree { height: 260px; }
.c3-chart--clients { height: 236px; }

/* Three quick reads cannot pair up without leaving a hole, so below 1240 they
   go single file, and the half-width cards follow only when even a half is too
   narrow for an axis. */
@media (max-width: 1240px) {
  .c3-perf .c3-sp4 { grid-column: span 12; }
}
@media (max-width: 820px) {
  .c3-perf .c3-sp6 { grid-column: span 12; }
}

/* ---- The ratio band ------------------------------------------------------
   Six equal columns that fall to three and then to two, never to a scroll. The
   ring is a chart and needs a declared box; everything under it is markup, so
   the fraction stays selectable, stays sharp at any zoom, and costs nothing to
   draw. */
.c3-rings { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.c3-ring { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.c3-ring__dial { width: 100%; height: 92px; }
.c3-ring__l { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--color-text); }
.c3-ring__s { margin-top: 2px; font-size: 11px; color: var(--color-text-subtle); }
/* The direction of travel, not the level. Green is favourable whichever way the
   number moved — the discount ring improves by falling, and a rule that painted
   every minus red would call that a loss. */
.c3-delta { font-weight: 700; }
.c3-delta.is-up { color: var(--color-success-ink); }
.c3-delta.is-down { color: var(--color-danger-ink); }

@media (max-width: 1240px) { .c3-rings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 640px)  { .c3-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Page Settings: the card chooser ------------------------------------
   One switch a card, grouped by the tab the card sits on. The rows need real
   space between them or twenty-two of them read as a wall of text; the group
   label is the same small caps the gear menu uses above it. */
.c3-cardpick__g + .c3-cardpick__g { margin-top: 16px; }
.c3-cardpick .dropdown-section-label { padding: 0 0 6px; }
.c3-cardpick .switch-field { display: flex; padding: 5px 0; }