/* ============== TEAM INSIGHTS — THE OVERLAY, ITS NAVIGATION AND THE OVERVIEW ==============
   Two prefixes: `ti-` is the shell (overlay, header, date range, left nav, the three states,
   shared panel/tile/bar primitives), `ti-ov-` the Overview's own; Engagement and Audit bring
   `ti-eng-`/`ti-aud-`. One page loads all four — css-class-collision-check.py reports any shared
   bare class two of them declare, the same split Admin (`ut-`/`utc-`) and Storage (`sx-`/`sxc-`)
   use. */

/* No z-index anywhere — JS/core/layers.js assigns it at runtime one step above whatever is
   top-most (z-scale-check.py polices this), since Team Insights can open over the team settings
   dialog and an authored guess here is exactly what buried "Create objective" once. No theme
   literals either: every colour is an `--a-*` role, including the three chart series (aliased
   once at the top of the Overview section). */

/* The wide things scroll inside themselves — `.ti-ov-chartwrap` is the only overflow box here,
   so a ninety-day chart widens itself, never the overlay (which would scroll the whole dialog). */

/* ================= THE OVERLAY ================= */

.alt-app .ti-overlay{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:var(--a-4);
  /* Scrim composited from the page's own ground, not a black literal, so light dims towards its
     own paper. The plain declaration first is not decoration — an engine without color-mix()
     discards the whole line, and without a fallback this overlay would have no background. */
  background:var(--a-bg);
  background:color-mix(in srgb, var(--a-bg) 72%, transparent);
  /* Prefixed property first, not optional — pre-18 Safari (every non-updated iOS device) only
     knows `-webkit-backdrop-filter` and renders no blur without this line; an engine knowing
     both takes the later standard one. Written the same way in alt-shared-dialogs.css. */
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
/* `display:flex` beats the user agent's `[hidden]{display:none}`, which is how an overlay that
   is supposed to be shut stays on screen. */
.alt-app .ti-overlay[hidden]{ display:none; }

/* 1440px is a ceiling, not a size — `width:100%` still governs, so a narrower viewport gets a
   card smaller than this rather than clipped. PRODUCT OWNER: "You can make the view wider too
   so you can include these other content types across the system," after the member table grew
   from seven columns to fifteen. The grouped table's own 1040px floor
   (alt-team-insights-engagement.css) sits comfortably inside it. */
.alt-app .ti-card{
  display:flex; flex-direction:column; min-width:0;
  width:100%; max-width:1440px; max-height:100%;
  background:var(--a-panel);
  border:1px solid var(--a-line);
  border-radius:var(--a-r-lg);
  box-shadow:var(--a-shadow-lg);
  overflow:hidden;
}

/* ---------- the header row ---------- */

.alt-app .ti-head{
  display:flex; align-items:center; gap:var(--a-4);
  flex-wrap:wrap; flex:0 0 auto;
  padding:var(--a-4) var(--a-5);
  border-bottom:1px solid var(--a-line-soft);
  background:var(--a-raised);
}
.alt-app .ti-title{
  margin:0; min-width:0; flex:1 1 auto;
  font-family:var(--a-display); font-size:20px; font-weight:600; line-height:1.25;
  color:var(--a-text);
  /* A long team name wraps rather than pushing the close button off the row. */
  overflow-wrap:anywhere;
}
/* The view's name is a qualifier on the title, not part of it — quieter, and it changes while
   the rest does not. */
.alt-app .ti-title-view{ color:var(--a-dim); font-weight:500; }

.alt-app .ti-head-end{
  display:flex; align-items:center; gap:var(--a-2);
  flex-wrap:wrap; min-width:0;
}
.alt-app .ti-range{ display:flex; align-items:center; gap:var(--a-2); flex-wrap:wrap; min-width:0; }
.alt-app .ti-range-sel{ max-width:180px; }
.alt-app .ti-custom{ display:flex; align-items:center; gap:var(--a-2); flex-wrap:wrap; min-width:0; }
.alt-app .ti-custom[hidden]{ display:none; }
.alt-app .ti-custom-f{ display:flex; align-items:center; gap:var(--a-1); min-width:0; }
.alt-app .ti-custom-l{
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--a-dim);
}
.alt-app .ti-custom-in{ max-width:150px; }
.alt-app .ti-close{ flex:0 0 auto; }

/* ---------- the filter bar ----------
   Its own band under the header, not five controls sharing the title's row — four selects plus
   Clear filters is ~900–1100px, which would overflow `.ti-head` at 1024/900 or break into
   something unscannable. `flex-wrap:wrap` + `min-width:0` on every child is what makes "wrap
   rather than scroll" true — a flex item's default min-width refuses to shrink below content. */
.alt-app .ti-filters{
  display:flex; align-items:flex-end; flex-wrap:wrap; gap:var(--a-2) var(--a-3);
  flex:0 0 auto; min-width:0;
  padding:var(--a-3) var(--a-5);
  border-bottom:1px solid var(--a-line-soft);
  background:var(--a-panel);
}
.alt-app .ti-filters[hidden]{ display:none; }
/* A NARROWED SURFACE LOOKS NARROWED. The accent is the same one the horizon banner uses, because
   it carries the same kind of meaning: what is below this is qualified. */
.alt-app .ti-filters.is-filtered{
  border-inline-start:3px solid var(--a-blue);
  background:var(--a-raised);
}

.alt-app .ti-f{ display:flex; flex-direction:column; gap:var(--a-1); min-width:0; flex:0 1 auto; }
.alt-app .ti-f[hidden]{ display:none; }
/* The same caption tier the custom-range labels use, so the two rows of controls are labelled in
   one voice rather than two. */
.alt-app .ti-f-l{
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--a-dim);
}
.alt-app .ti-f-sel{ max-width:180px; min-width:0; }
.alt-app .ti-f-clear{ flex:0 0 auto; }
.alt-app .ti-f-clear[hidden]{ display:none; }
.alt-app .ti-f-err{
  margin:0; min-width:0; flex:1 1 auto;
  font-size:12px; line-height:1.6; color:var(--a-dim);
}
.alt-app .ti-f-err[hidden]{ display:none; }
/* What an OKR area selection covers gets its own line, not a fifth item in the control row —
   `flex:1 1 100%` forces the wrap rather than hoping for it. Same size/weight/colour as
   `.ti-f-err`: both are the bar speaking about itself. */
.alt-app .ti-f-note{
  margin:0; min-width:0; flex:1 1 100%;
  font-size:12px; line-height:1.6; color:var(--a-dim);
}
.alt-app .ti-f-note[hidden]{ display:none; }
.alt-app .ti-ico{ display:inline-flex; flex:0 0 auto; }
.alt-app .ti-ico > svg{ width:15px; height:15px; }

/* ---------- the body: navigation beside the content ---------- */

/* Sidebar is 224px because the longest label is 22 characters — measured in a real browser: that
   string needs ~145px at this size/weight, more than 200px leaves once padding, icon and gap are
   taken out. A clipped label is worse than a wide sidebar, so wrapping (below) is the belt to
   this brace rather than ellipsis. */
.alt-app .ti-body{
  display:grid; grid-template-columns:224px minmax(0, 1fr);
  min-height:0; min-width:0; flex:1 1 auto;
}
.alt-app .ti-nav{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--a-3); min-width:0;
  border-right:1px solid var(--a-line-soft);
  background:var(--a-bg);
  overflow:auto;
}
/* min-height RATHER THAN height, so a label that wraps grows its item instead of spilling out of
   it. The pill still reads as one control because the vertical padding centres whatever is in
   it, and three items of unequal height is not a defect — a clipped label is. */
.alt-app .ti-nav-item{
  display:flex; align-items:center; gap:var(--a-2);
  width:100%; min-width:0; padding:var(--a-2) var(--a-3);
  min-height:var(--a-ctl-lg);
  border:1px solid transparent; border-radius:var(--a-r-pill);
  background:transparent; color:var(--a-dim);
  font-family:var(--a-body); font-size:13px; font-weight:600; line-height:1.3;
  text-align:left; cursor:pointer;
}
.alt-app .ti-nav-item:hover{ background:var(--a-raised); color:var(--a-text); }
.alt-app .ti-nav-item:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
/* The filled pill the wireframe draws — `aria-current` carries the same fact for a reader who
   can't see it. `#fff` is the one colour literal here and it's the established one:
   `.a-btn.primary` and `.a-btn.on` both use white on `--a-blue-fill`, saturated in every theme
   including light, so a theme-following token would still have to resolve to white everywhere. */
.alt-app .ti-nav-item.is-on{
  background:var(--a-blue-fill); border-color:transparent; color:#fff;
}
/* No ellipsis, ever, on a navigation label — three items is not a list long enough for
   truncation to buy anything, and the destination's own name must be readable in full before a
   reader presses it. */
.alt-app .ti-nav-l{ min-width:0; white-space:normal; overflow-wrap:break-word; }

.alt-app .ti-content{
  min-width:0; min-height:0; overflow:auto;
  padding:var(--a-5);
}
.alt-app .ti-content:focus{ outline:none; }
.alt-app .ti-content:focus-visible{ outline:2px solid var(--a-ring); outline-offset:-4px; }

/* ================= THE THREE STATES =================
   Three different boxes for three different sentences. A loading state drawn with the empty
   state's markup makes "still reading" and "there is nothing here" one screen. */

.alt-app .ti-state{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--a-2);
  padding:var(--a-5); min-width:0;
  border:1px solid var(--a-line-soft); border-radius:var(--a-r);
  background:var(--a-bg);
}
.alt-app .ti-state.is-empty{ border-style:dashed; border-color:var(--a-line); }
.alt-app .ti-state.is-error{ border-color:var(--a-amber); background:var(--a-amber-soft); }
.alt-app .ti-state-t{ margin:0; font-weight:600; color:var(--a-text); }
.alt-app .ti-state-d{ margin:0; font-size:12px; line-height:1.6; color:var(--a-dim); max-width:70ch; }
.alt-app .ti-state-btn{ margin-top:var(--a-1); }

/* THE SKELETON. Shapes with no figures in them — the whole point is that nothing here can be
   mistaken for a measurement while the read is still in flight. */
.alt-app .ti-skel{ display:flex; flex-direction:column; gap:var(--a-2); width:100%; min-width:0; }
.alt-app .ti-skel-b{
  display:block; height:12px; border-radius:var(--a-r-sm);
  background:linear-gradient(90deg, var(--a-line-soft), var(--a-raised), var(--a-line-soft));
  background-size:200% 100%;
  animation:ti-skel-shimmer 1.4s linear infinite;
}
.alt-app .ti-skel-0{ width:62%; }
.alt-app .ti-skel-1{ width:88%; }
.alt-app .ti-skel-2{ width:74%; }
.alt-app .ti-skel-3{ width:45%; }
@keyframes ti-skel-shimmer{
  from{ background-position:200% 0; }
  to{ background-position:-200% 0; }
}
/* Somebody who asked for less movement gets less movement. alt-tokens.css zeroes the durations
   this experience transitions with; an @keyframes animation is not a transition and has to be
   answered on its own. */
@media (prefers-reduced-motion: reduce){
  .alt-app .ti-skel-b{ animation:none; }
}

/* ================= THE SHARED PRIMITIVES ================= */

.alt-app .ti-panel{
  min-width:0;
  background:var(--a-panel);
  border:1px solid var(--a-line-soft);
  border-radius:var(--a-r-lg);
  padding:var(--a-4);
}
.alt-app .ti-panel-t{
  margin:0 0 var(--a-3);
  font-family:var(--a-display); font-size:15px; font-weight:600; line-height:1.3;
  color:var(--a-text);
}
.alt-app .ti-panel-b{ min-width:0; }

/* ---------- a metric tile ---------- */

.alt-app .ti-tile{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  padding:var(--a-4);
  background:var(--a-panel);
  border:1px solid var(--a-line-soft);
  border-radius:var(--a-r-lg);
}
.alt-app .ti-tile-v{
  font-family:var(--a-display); font-size:30px; font-weight:600; line-height:1.1;
  color:var(--a-text); font-variant-numeric:tabular-nums;
}
.alt-app .ti-tile-l{ font-size:12px; color:var(--a-dim); }
/* THE COMPARISON ROW EXISTS ONLY WHEN THERE IS A COMPARISON. There is no "empty" or "unknown"
   modifier here on purpose: the element is not created at all when tiDelta() returns null, and a
   style for a placeholder would be the first step towards drawing one. */
.alt-app .ti-tile-d{
  display:flex; align-items:center; gap:var(--a-1);
  margin-top:var(--a-1); font-size:13px; font-weight:600;
}
.alt-app .ti-tile-d.is-up{ color:var(--a-green); }
.alt-app .ti-tile-d.is-down{ color:var(--a-red); }
.alt-app .ti-tile-d.is-flat{ color:var(--a-dim); }
/* WHAT THIS FIGURE IS LIMITED TO, ON THE TILE. Like the comparison row above it, it exists only
   when there is something to say — there is no styled placeholder, because a permanent caption
   slot is how "attributable only" comes to be printed under a figure that is complete. 11px is
   the caption tier this application already uses; there is no half-step in the scale. */
.alt-app .ti-tile-n{
  margin:var(--a-1) 0 0; min-width:0;
  font-size:11px; line-height:1.5; color:var(--a-dim);
}

/* ---------- one bar row ---------- */

.alt-app .ti-bar{
  display:grid; grid-template-columns:minmax(0, 11em) minmax(60px, 1fr) auto;
  align-items:center; gap:var(--a-3);
  min-width:0; padding:var(--a-1) 0;
}
.alt-app .ti-bar-l{
  min-width:0; font-size:13px; color:var(--a-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.alt-app .ti-bar-track{
  display:block; height:10px; min-width:0;
  border-radius:var(--a-r-pill);
  background:var(--a-line-soft); overflow:hidden;
}
.alt-app .ti-bar-fill{
  display:block; height:100%; width:var(--ti-v, 0%);
  border-radius:var(--a-r-pill);
  background:var(--a-blue-fill);
}
.alt-app .ti-bar-v{
  font-size:13px; font-weight:600; color:var(--a-text);
  font-variant-numeric:tabular-nums; text-align:right; min-width:4ch;
}

/* ================= THE OVERVIEW =================

   THE THREE SERIES COLOURS, ALIASED ONCE. These are not literals and not new tokens: they are
   three roles CSS/alt/alt-tokens.css already defines and has contrast figures for, named here so
   the chart's marks, its lines and its legend all read the same three values from one place.
   Blue, green and purple are also what the wireframe's own key shows. */
.alt-app .ti-ov{
  --ti-ov-s1:var(--a-blue);
  --ti-ov-s2:var(--a-green);
  --ti-ov-s3:var(--a-purple);
  display:flex; flex-direction:column; gap:var(--a-4); min-width:0;
}

/* ---------- the four tiles ---------- */

/* The track minimum is 168px so four tiles stay a row of four — measured in a browser at 1024:
   190px needs 796px of content box, but the box beside the 224px sidebar is only ~730, breaking
   to an orphan tile below three. 168 fits four at 1024 and wraps to two-and-two below that. */
.alt-app .ti-ov-tiles{
  display:grid; gap:var(--a-3); min-width:0;
  grid-template-columns:repeat(auto-fit, minmax(168px, 1fr));
}
/* A state block inside the tile grid has to span it, or "reading the summary" sits in one column
   beside three empty tracks and reads as one tile that failed. */
.alt-app .ti-ov-tiles > .ti-state{ grid-column:1 / -1; }
/* 11px, the caption tier, not 11.5 — there is no half-step in this type scale (10/11/12/…/20),
   and responsive-layout.test.js forbids one on screen: a fractional size rounds differently per
   device pixel ratio, losing the hierarchy it was meant to express. `--a-dim`, not `--a-faint`,
   is what permits 11px at all — the same suite forbids anything smaller in the faint tier. */
.alt-app .ti-ov-tiles-note{
  grid-column:1 / -1; margin:0;
  font-size:11px; line-height:1.6; color:var(--a-dim); max-width:80ch;
}

/* The attribution horizon, when the window reaches further back than the record does. A banner
   rather than a footnote: it qualifies the two per-person figures above it. */
.alt-app .ti-ov-horizon{
  margin:0; padding:var(--a-2) var(--a-3);
  border:1px solid var(--a-line); border-inline-start:3px solid var(--a-blue);
  border-radius:var(--a-r-sm);
  background:var(--a-raised); color:var(--a-text);
  font-size:12px; line-height:1.6; max-width:90ch;
}
.alt-app .ti-ov-horizon[hidden]{ display:none; }

/* ---------- the two-up row ---------- */

.alt-app .ti-ov-two{
  display:grid; gap:var(--a-4); align-items:start; min-width:0;
  grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr);
}
.alt-app .ti-ov-two > *{ min-width:0; }

/* ---------- the chart ---------- */

.alt-app .ti-ov-legend{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--a-2) var(--a-4);
  margin-bottom:var(--a-3); min-width:0;
}
.alt-app .ti-ov-lg{ display:inline-flex; align-items:center; gap:var(--a-2); font-size:12px; color:var(--a-dim); }
/* THE KEY CARRIES THE MARKER'S SHAPE AS WELL AS ITS COLOUR, because the chart does — a legend of
   three identical dots in three colours is useless to the reader the shapes are there for. */
.alt-app .ti-ov-lg-m{ display:inline-block; width:10px; height:10px; background:currentColor; }
.alt-app .ti-ov-lg-m.is-circle{ border-radius:50%; }
.alt-app .ti-ov-lg-m.is-square{ border-radius:2px; }
.alt-app .ti-ov-lg-m.is-triangle{
  width:0; height:0; background:none;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:10px solid currentColor;
}
.alt-app .ti-ov-lg-m.ti-ov-s1{ color:var(--ti-ov-s1); }
.alt-app .ti-ov-lg-m.ti-ov-s2{ color:var(--ti-ov-s2); }
.alt-app .ti-ov-lg-m.ti-ov-s3{ color:var(--ti-ov-s3); }

/* THE ONE OVERFLOW BOX ON THIS SURFACE. A long window is a wide chart, and it scrolls here
   rather than widening the overlay. */
.alt-app .ti-ov-chartwrap{ overflow-x:auto; overflow-y:hidden; min-width:0; }
.alt-app .ti-ov-chart{ display:block; width:100%; height:auto; }
.alt-app .ti-ov-gridline{ stroke:var(--a-line-soft); stroke-width:1; }
.alt-app .ti-ov-axis{ fill:var(--a-dim); font-family:var(--a-body); font-size:11px; }
.alt-app .ti-ov-line{ fill:none; stroke-width:2; }
.alt-app .ti-ov-mark{ stroke:none; }
.alt-app .ti-ov-s1 .ti-ov-line{ stroke:var(--ti-ov-s1); }
.alt-app .ti-ov-s1 .ti-ov-mark{ fill:var(--ti-ov-s1); }
.alt-app .ti-ov-s2 .ti-ov-line{ stroke:var(--ti-ov-s2); }
.alt-app .ti-ov-s2 .ti-ov-mark{ fill:var(--ti-ov-s2); }
.alt-app .ti-ov-s3 .ti-ov-line{ stroke:var(--ti-ov-s3); }
.alt-app .ti-ov-s3 .ti-ov-mark{ fill:var(--ti-ov-s3); }

/* ---------- the bar panels ---------- */

.alt-app .ti-ov-bars{ display:flex; flex-direction:column; gap:2px; min-width:0; }
/* The caption tier again — see the note on .ti-ov-tiles-note above for why it is 11 and not
   11.5, and why --a-dim rather than --a-faint is what permits 11 at all. */
.alt-app .ti-ov-note{
  margin:var(--a-3) 0 0;
  font-size:11px; line-height:1.6; color:var(--a-dim); max-width:80ch;
}
/* THE SENTENCE THAT KEEPS TASK OUTCOMES HONEST, above the figures rather than under them —
   every other number on this screen is windowed and these four are not. Given the weight of a
   caption rather than of a footnote for exactly that reason. */
.alt-app .ti-ov-scope{
  margin:0 0 var(--a-3); padding:var(--a-2) var(--a-3);
  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; max-width:90ch;
}
.alt-app .ti-ov-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--a-3);
  margin:var(--a-2) 0 0; padding-top:var(--a-2);
  border-top:1px solid var(--a-line-soft);
  font-size:13px; color:var(--a-text);
}
.alt-app .ti-ov-total-l{ font-weight:600; }
.alt-app .ti-ov-total-v{ font-weight:600; font-variant-numeric:tabular-nums; }
/* The table alternative is carried by `.a-sr`; this only keeps a stray border rule from any
   ancestor table styling out of it. */
.alt-app .ti-ov-table{ border-collapse:collapse; }

/* ================= NARROW =================

   THE SIDEBAR BECOMES A STRIP ABOVE THE CONTENT, following the steps already in
   CSS/alt/alt-responsive.css. Nothing may overflow horizontally at any width: the nav strip
   scrolls inside itself, the chart scrolls inside its own box, and the panels stack. */

@media (max-width:1023px){
  .alt-app .ti-ov-two{ grid-template-columns:minmax(0, 1fr); }
}

@media (max-width:820px){
  .alt-app .ti-overlay{ padding:0; }
  .alt-app .ti-card{ max-width:none; height:100%; max-height:none; border-radius:0; border:0; }
  .alt-app .ti-head{ padding:var(--a-3) var(--a-4); }
  .alt-app .ti-filters{ padding:var(--a-2) var(--a-4); }
  .alt-app .ti-title{ font-size:17px; }
  .alt-app .ti-body{ grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); }
  .alt-app .ti-nav{
    flex-direction:row; gap:var(--a-2);
    padding:var(--a-2) var(--a-3);
    border-right:0; border-bottom:1px solid var(--a-line-soft);
    overflow-x:auto;
  }
  .alt-app .ti-nav-item{ width:auto; flex:0 0 auto; }
  /* THE STRIP IS THE ONE PLACE THE LABEL STAYS ON ONE LINE. Wrapping inside a horizontal row
     would make three items of three different heights sitting side by side; the strip scrolls
     instead, so nothing is clipped and nothing is truncated — the label simply runs past the
     edge and the reader can reach it. */
  .alt-app .ti-nav-l{ white-space:nowrap; }
  .alt-app .ti-content{ padding:var(--a-4); }
}

@media (max-width:639px){
  .alt-app .ti-head{ gap:var(--a-2); }
  .alt-app .ti-head-end{ width:100%; }
  .alt-app .ti-range-sel{ max-width:none; flex:1 1 auto; }
  /* TWO UP, THEN TWO UP, rather than four stubs on one line. Each control keeps its label above
     it, so the pair reads as a pair; the Clear button takes the full width under them because a
     104px button wedged beside a select is the thing a thumb misses. */
  .alt-app .ti-f{ flex:1 1 44%; }
  .alt-app .ti-f-sel{ max-width:none; }
  .alt-app .ti-f-clear{ flex:1 1 100%; }
  .alt-app .ti-bar{ grid-template-columns:minmax(0, 1fr) auto; }
  /* THE TRACK GOES UNDER ITS OWN LABEL rather than being squeezed to a stub. The figure stays
     beside the label, because the figure is the data and the bar is the comparison. */
  .alt-app .ti-bar-track{ grid-column:1 / -1; }
}