/* ================= TEAM INSIGHTS → USER ENGAGEMENT — this view's own clothes ================
   Every selector is prefixed `ti-eng-` — the whole ownership contract. `ti-`/`ti-ov-` belong to
   the shell/Overview, `ti-launch-`/`ti-aud-` to the launcher/audit trail; five files load onto
   one page, so css-class-collision-check.py fails the build if two declare the same bare class.
   Nothing here redeclares a bare `.a-search`/`.a-input`/`.a-sr`/`.a-admin-table`/
   `.a-admin-tscroll` rule — only `.ti-eng-*` compounds of them.
   The table markup carries `.a-admin-table`/`.a-admin-tscroll` as LABELS, not a dependency —
   this view's only host (team_board.html) never loads CSS/alt/alt-admin.css, so every rule the
   table needs is declared below under `.ti-eng-table`/`.ti-eng-tscroll`; the console class
   names stay on the markup only as a harmless label for a future host that might load that
   sheet.
   No colour literal anywhere — every colour/radius/spacing/duration is an `--a-*` token, which
   is what makes light, dark and a team's custom accent all correct with no override block.
   The fallback rules (`.ti-eng-panel-fallback`, `.ti-eng-tile-fallback`, `.ti-eng-state`) draw
   only when team-insights-shell.js's own primitives have not yet loaded — a plain, correct
   rendering of the same information, not a second design.
   Nothing may scroll the dialog sideways: the member table has its own `.ti-eng-tscroll`
   container, the tiles row wraps with `minmax(0,…)` tracks. Selection/state is never colour
   alone (design-system §20) — the status badge carries its word as text and changes border
   style too. */

/* ---------- the view's own container ----------
   A named container of its own, not an assumed ancestor's class — team-insights-shell.js owns
   the overlay chrome and this view only assumes it's handed a host element to render into. */
.alt-app .ti-eng{
  container: ti-eng-pane / inline-size;
  display:flex; flex-direction:column; gap:var(--a-4); min-width:0;
}

/* ---------- the four tiles ----------
   Auto-fit, not a fixed column count, so the row reflows at any width — including 200% zoom,
   where a fixed four-across grid would force the sideways scroll this file avoids. */
.alt-app .ti-eng-tiles{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:var(--a-3); min-width:0;
}

/* The fallback tile, drawn only when tiMetricTile() has not loaded. Same shape as the shell's
   own will be: a panel-toned card, the figure first and largest, the label beneath it. */
.alt-app .ti-eng-tile-fallback{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  padding:var(--a-4); border:1px solid var(--a-line); border-radius:var(--a-r-lg);
  background:var(--a-panel);
}
.alt-app .ti-eng-tile-fallback-v{
  font-family:var(--a-display); font-size:28px; font-weight:700; line-height:1.1;
  color:var(--a-text); font-variant-numeric:tabular-nums;
}
.alt-app .ti-eng-tile-fallback-l{
  font-size:12px; color:var(--a-dim); font-weight:600;
}
.alt-app .ti-eng-tile-fallback-d{ font-size:12px; font-weight:700; margin-top:2px; }
.alt-app .ti-eng-tile-fallback-d.is-up{ color:var(--a-green); }
.alt-app .ti-eng-tile-fallback-d.is-down{ color:var(--a-red); }
.alt-app .ti-eng-tile-fallback-d.is-flat{ color:var(--a-dim); }

/* ---------- the fallback panel, drawn only when tiPanel() has not loaded ---------- */
.alt-app .ti-eng-panel-fallback{
  display:flex; flex-direction:column; gap:var(--a-3); min-width:0;
  padding:var(--a-4); border:1px solid var(--a-line); border-radius:var(--a-r-lg);
  background:var(--a-panel);
}
.alt-app .ti-eng-panel-fallback-head{ min-width:0; }
.alt-app .ti-eng-panel-fallback-title{
  margin:0; font-family:var(--a-display); font-size:15px; font-weight:700; color:var(--a-text);
}
.alt-app .ti-eng-panel-fallback-body{
  display:flex; flex-direction:column; gap:var(--a-3); min-width:0;
}

/* ---------- the horizon note ----------
   Prominent on purpose — the sentence that stops the table above reading as a complete account
   of who did what. Amber, not red: a coverage caveat, not a failure. */
.alt-app .ti-eng-horizon{
  margin:0; padding:var(--a-3); min-width:0;
  border:1px solid var(--a-amber); border-left-width:3px; border-radius:var(--a-r);
  background:var(--a-amber-soft); color:var(--a-text);
  font-size:12px; line-height:1.55; font-weight:600; overflow-wrap:anywhere;
}
/* The same note, more weight, never a second wording — drawn at the very top of the view, only
   when the read is person-scoped, since the per-person figures a User/Group filter narrows to
   are most likely to be mistaken for a complete account of one person. Same amber role as
   `.ti-eng-horizon`, just louder (heavier rule, larger size, a soft-raised background). */
.alt-app .ti-eng-horizon.is-elevated{
  border-left-width:4px; border-radius:var(--a-r-lg);
  font-size:13px; font-weight:700; box-shadow:var(--a-shadow-sm);
}

/* ---------- the filter scope note ----------
   The GOLD role, not amber — the same role `.ti-ov-scope` (alt-team-insights.css) uses for "this
   describes something other than you'd assume". This is that register applied to a filtered
   read: a caveat about POPULATION, not time coverage (amber's job) — one vocabulary across all
   three Team Insights views. */
.alt-app .ti-eng-scope{
  margin:0; padding:var(--a-2) var(--a-3); min-width:0;
  border-inline-start:3px solid var(--a-gold); border-radius:var(--a-r-sm);
  background:var(--a-gold-soft); color:var(--a-text);
  font-size:12px; line-height:1.6; overflow-wrap:anywhere;
}

/* ---------- the four states (fallback only — see the file header) ---------- */
.alt-app .ti-eng-state{
  padding:var(--a-4); min-width:0;
  font-size:12px; line-height:1.6; color:var(--a-dim); text-align:center;
  overflow-wrap:anywhere;
}
.alt-app .ti-eng-state[data-state="error"],
.alt-app .ti-eng-state.is-err{ color:var(--a-red); font-weight:600; }
.alt-app .ti-eng-state[data-state="loading"]{ color:var(--a-faint); }
.alt-app .ti-eng-state .btn{ margin-top:var(--a-2); }

/* ---------- the search box ----------
   `.a-search`/`.a-input` are the suite's own chrome; this modifier only caps the width so the
   box doesn't stretch the full panel — a layout opinion the shared class deliberately omits. */
.alt-app .ti-eng-search{ max-width:360px; min-width:0; }

/* The search box needs air under the horizon banner — `.ti-panel-b` is `display:block` with no
   gap and every child carries zero margin, so the banner's border and the input's sat flush
   (measured: 0px). Adjacent-sibling, not a blanket top margin: the banner is CONDITIONAL, so a
   margin on the search itself would leave a stray gap on every team whose record already covers
   the period — the common case. */
.alt-app .ti-eng-horizon + .ti-eng-search{ margin-top:var(--a-4); }

/* ---------- the member table ----------
   The markup also carries `.a-admin-table`/`.a-admin-tscroll` as a harmless label (see the file
   header) — every rule this table needs is declared here under this view's own prefix, with
   identical property values to the console's, so there's nothing for the two to disagree about
   if a future host does load alt-admin.css (css-tokens-check.py). */
.alt-app .ti-eng-tscroll{ overflow-x:auto; min-width:0; }
.alt-app .ti-eng-table{
  border-collapse:collapse; width:100%; min-width:640px; font-size:12px;
}
.alt-app .ti-eng-table th{
  text-align:left; padding:6px var(--a-3) 6px 0; white-space:nowrap;
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--a-dim); border-bottom:1px solid var(--a-line-soft);
}
.alt-app .ti-eng-table td{
  padding:7px var(--a-3) 7px 0; border-bottom:1px solid var(--a-line-soft);
  color:var(--a-text); font-variant-numeric:tabular-nums;
  /* Explicit, not assumed — a future long value in any cell must not be able to push the
     numbers beside it out of line with the row's name and status. */
  vertical-align:middle;
}
.alt-app .ti-eng-table tr:last-child td{ border-bottom:none; }
/* Right-aligned figures under right-aligned headers — the same pair, so a header and its
   column cannot drift apart the way a centred header over a left-aligned column would. */
.alt-app .ti-eng-table td.num,
.alt-app .ti-eng-table th.num{ text-align:right; padding-right:var(--a-3); }
/* One line, always — this cell was measured wrapping mid-timestamp before the year was dropped
   from the format (JS/features/team-insights-engagement.js); this floor holds even if a
   locale's shorter format is still long. */
.alt-app .ti-eng-table td.ti-eng-lastactive{ white-space:nowrap; }
.alt-app .ti-eng-table-host{ min-width:0; }

/* A status badge whose meaning is never the colour alone. The text inside says what it is; the
   border style changes too (solid vs. dashed) so the two states are told apart without relying
   on hue. */
.alt-app .ti-eng-pill{
  display:inline-block; padding:1px 8px; max-width:100%;
  border:1px solid var(--a-line); border-radius:var(--a-r-pill);
  background:var(--a-raised); color:var(--a-dim);
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.alt-app .ti-eng-pill.is-active{
  border-color:var(--a-green); background:var(--a-green-soft); color:var(--a-text);
}
.alt-app .ti-eng-pill.is-inactive{ border-style:dashed; }

/* ---------- narrow dialogs ----------
   Matches the suite's own breakpoint for a full-width drawer step (alt-user-traffic.css) —
   below it the tiles stack two-by-two instead of forcing a scrollbar via four-across. */
@container ti-eng-pane (max-width: 639px){
  .alt-app .ti-eng-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .alt-app .ti-eng-search{ max-width:none; }
}

/* ================= THE CONTENT-TYPE BREAKDOWN ==============================================
   Fifteen columns instead of seven, made scannable by three things: a two-row header chunking
   verbs under their module, a sticky name column, and a per-group tint so the eye can tell where
   Tasks ends and OKRs begins without re-reading the header. The tint is decoration only — every
   column's meaning is in its heading text and `title` (design-system §20).
   Nothing below applies to the original seven-column table — `.is-grouped` is added only when
   the breakdown actually loaded, so a failed read draws the original table unchanged. */

/* ---------- the two-row header ----------
   The group row's separator is a left border on each group cell, not a background block — a
   filled band over the numbers would compete with the figures for attention. */
.alt-app .ti-eng-table.is-grouped tr.ti-eng-grouprow > th{
  /* The whole row shares one ground (including spanning cells with no group of their own), so
     the module headings read as one band, not four tinted islands with gaps between them. */
  background:var(--a-raised);
}
.alt-app .ti-eng-table.is-grouped th.ti-eng-g{
  text-align:center; padding:4px var(--a-2) 5px;
  border-bottom:1px solid var(--a-line);
  border-inline-start:1px solid var(--a-line);
  font-size:10px; letter-spacing:.08em; color:var(--a-text);
}
/* The verb row sits on the panel ground, not the band above it — that contrast is what makes
   the two rows read as heading and sub-heading rather than one three-line header. */
.alt-app .ti-eng-table.is-grouped tr.ti-eng-leafrow > th{ background:var(--a-panel); }
.alt-app .ti-eng-table.is-grouped th.ti-eng-leaf{
  /* The verbs sit tighter than a standalone header, read as part of the group above them. */
  padding-top:5px; padding-bottom:5px; letter-spacing:.05em;
}
/* The group's own left rule continues all the way down, so a module boundary is one line from
   header to last row. `.ti-eng-gstart` is put on the FIRST cell of each group — the leaf header
   and every body cell in that column — by JS/features/team-insights-engagement.js, because
   which column starts a group depends on which groups the reader has switched off.
   This replaced a tint that never worked: the first version used `background:var(--a-row)`, a
   SIZING token (44px) rather than a colour — a valid-looking declaration that resolved and was
   silently dropped, so the groups had no separation at all. No suite could see it (a DOM shim
   has no styles); a browser measurement caught two cells that should have differed and didn't. */
.alt-app .ti-eng-table.is-grouped th.ti-eng-gstart,
.alt-app .ti-eng-table.is-grouped td.ti-eng-gstart{
  border-inline-start:1px solid var(--a-line);
}
/* The spanning headers — User, Comments, Total, Last Active, Status — sit across both rows and
   need their own bottom rule, since they have no leaf row beneath them to draw one. */
.alt-app .ti-eng-table.is-grouped thead th[rowspan]{
  vertical-align:bottom; border-bottom:1px solid var(--a-line);
}

/* ---------- the sticky member name ----------
   The 390px answer, and the same rule at every width — a fifteen-column table scrolled sideways
   with the name gone is a grid of anonymous numbers. An opaque background is not optional: a
   transparent sticky cell lets the scrolled columns render underneath it. */
.alt-app .ti-eng-table.is-grouped th.ti-eng-name,
.alt-app .ti-eng-table.is-grouped td.ti-eng-name{
  position:sticky; inset-inline-start:0; z-index:1;
  background:var(--a-panel);
  padding-inline-end:var(--a-3);
  /* A rule on the trailing edge rather than a shadow, so the boundary reads the same whether or
     not the table is currently scrolled, and costs no repaint while it is being scrolled. */
  border-inline-end:1px solid var(--a-line);
  min-width:150px; max-width:220px;
}
/* The header's own cell sits above the body's, or a scrolled row would paint over it at the
   corner where the two sticky axes meet. */
.alt-app .ti-eng-table.is-grouped th.ti-eng-name{ z-index:2; }
/* The group row and the leaf row must agree about the corner — both are `thead` cells over the
   same sticky column, and without this the leaf row's background is the one that shows. */
.alt-app .ti-eng-table.is-grouped thead th.ti-eng-name{ background:var(--a-panel); }

/* The grouped table is wider than the original and says so — 640px was the floor for seven
   columns, fifteen need room to stay tabular. The dialog is 1440px wide at its widest
   (alt-team-insights.css), fitting this without a scrollbar on a normal desktop. */
.alt-app .ti-eng-table.is-grouped{ min-width:1040px; }
.alt-app .ti-eng-table.is-grouped td.num,
.alt-app .ti-eng-table.is-grouped th.num{ padding-inline:var(--a-2); }

/* No per-group tint — the boundary rule plus the heading band is separation enough, and it
   survives both themes and a custom team accent without a second colour decision. */

/* A figure that does not exist is not a zero. The em dash is dimmed so it reads as "nothing
   recorded" rather than as a value; the cell's `title` says which metric and why. */
.alt-app .ti-eng-table.is-grouped td.ti-eng-unrecorded{ color:var(--a-faint); }

/* ---------- the content-type toggles ----------
   Real buttons, not chips that look like buttons — pressed state is `aria-pressed` drawn from
   the attribute itself, so the visual and announced state cannot drift apart. */
.alt-app .ti-eng-groups{
  display:flex; align-items:center; gap:var(--a-2); flex-wrap:wrap; min-width:0;
  margin-top:var(--a-3);
}
.alt-app .ti-eng-groups-l{
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--a-dim); flex:0 0 auto;
}
.alt-app .ti-eng-groups-list{ display:flex; gap:var(--a-1); flex-wrap:wrap; min-width:0; }
.alt-app .ti-eng-chip{
  appearance:none; cursor:pointer; min-width:0;
  padding:3px 10px; border:1px solid var(--a-line-strong); border-radius:var(--a-r-pill);
  background:var(--a-blue-soft); color:var(--a-blue-text);
  font-family:inherit; font-size:11px; font-weight:700; white-space:nowrap;
  transition:background var(--a-quick) var(--a-ease), color var(--a-quick) var(--a-ease);
}
.alt-app .ti-eng-chip:hover{ border-color:var(--a-blue); }
.alt-app .ti-eng-chip:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
/* Off is not just a paler on. The border goes dashed as well, so "hidden" survives for a reader
   who cannot tell the two fills apart — the same rule `.ti-eng-pill` already follows. */
.alt-app .ti-eng-chip[aria-pressed="false"]{
  background:transparent; color:var(--a-dim);
  border-color:var(--a-line); border-style:dashed;
}

/* ---------- the per-column caveats ----------
   The amber coverage role, exactly as `.ti-eng-horizon` — one sentence per column instead of
   one for the table, as a list since a reader checks the column they're looking at. */
.alt-app .ti-eng-caveats{
  margin:0; padding:var(--a-3); min-width:0;
  border:1px solid var(--a-amber); border-left-width:3px; border-radius:var(--a-r);
  background:var(--a-amber-soft); color:var(--a-text);
  font-size:12px; line-height:1.55; overflow-wrap:anywhere;
}
.alt-app .ti-eng-caveats-l{ margin:0 0 var(--a-2); font-weight:700; }
.alt-app .ti-eng-caveats-list{
  margin:0; padding-inline-start:var(--a-4);
  display:flex; flex-direction:column; gap:var(--a-1);
}
.alt-app .ti-eng-caveats-list li{ margin:0; }
/* The same air the horizon banner already earns above the search box, for the same reason:
   the panel body is `display:block` with no gap and every child carries zero margin. */
.alt-app .ti-eng-caveats + .ti-eng-search,
.alt-app .ti-eng-absent + .ti-eng-search,
.alt-app .ti-eng-caveats + .ti-eng-absent{ margin-top:var(--a-4); }

/* A note about what is missing from the view, not an error about the view. The figures beside
   it are complete, so this takes the gold "this means something other than you would assume"
   role `.ti-eng-scope` already carries — never the red one. */
.alt-app .ti-eng-absent{
  margin:0; padding:var(--a-2) var(--a-3); min-width:0;
  border-inline-start:3px solid var(--a-gold); border-radius:var(--a-r-sm);
  background:var(--a-gold-soft); color:var(--a-text);
  font-size:12px; line-height:1.6; overflow-wrap:anywhere;
}

/* ---------- narrow dialogs, for the grouped table ----------
   The toggles are the narrow strategy and the sticky name is its floor — no separate phone
   layout. Only the name column gives up width to the figures, and the toggle row gets room to
   wrap without squeezing its label off the front. */
@container ti-eng-pane (max-width: 639px){
  .alt-app .ti-eng-table.is-grouped th.ti-eng-name,
  .alt-app .ti-eng-table.is-grouped td.ti-eng-name{ min-width:112px; max-width:132px; }
  .alt-app .ti-eng-groups{ align-items:flex-start; }
  .alt-app .ti-eng-groups-l{ width:100%; }
}