/* ==========================================================================
   fid-tabs.css — persistent My View tab bar
   Agent Experience brief Revision 2 §4.1, P0.1.

   Kept in its own file rather than injected from JS so it is cacheable, and
   so the tab bar still looks right for the fraction of a second before
   fid-tabs.js runs. Tokens come from fid-tokens.css; nothing here invents a
   colour, because a hard-coded one would not follow the theme.
   ========================================================================== */

.fid-mvtabs {
  position: sticky;
  /* Sits directly beneath the global FID header (§4.1 "the tab bar remains
     visible directly beneath the global FID header while navigating My
     View"). 0 is correct here because the pane scrolls, not the header. */
  top: 0;
  z-index: 20;
  display: flex;
  gap: 2px;
  align-items: stretch;
  margin: 0 0 14px;
  padding: 4px;
  background: var(--fid-surface, #fff);
  border: 1px solid var(--fid-line, #E6ECF5);
  border-radius: 10px;
  /* Mobile/tablet: one horizontally scrollable row rather than four stacked
     destinations (§4.1, criterion 23). */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fid-mvtabs::-webkit-scrollbar { display: none; }

.fid-mvtab {
  position: relative;
  flex: 1 1 auto;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--fid-text-2, #5A6A8A);
  font-family: inherit;
  font-size: var(--fid-fs-md, 12px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.fid-mvtab:hover { background: var(--fid-surface-2, #F4F7FC); color: var(--fid-text, #02123A); }
.fid-mvtab:focus-visible {
  outline: 2px solid var(--fid-brand-btn, #CF4B00);
  outline-offset: -2px;
}
/* --fid-brand-btn, NOT --fid-accent. The raw brand orange behind white text
   measures 3.1:1 against a 4.5:1 requirement — fid-tokens.css already carries
   a darkened token for exactly this reason ("Brand orange behind white text.
   See .fid-btn.primary."). The first version of this file used the raw accent
   and failed the contrast suite. */
.fid-mvtab[aria-selected="true"] {
  background: var(--fid-brand-btn, #CF4B00);
  color: #fff;
}
.fid-mvtab[aria-selected="true"]:hover {
  background: #B33F00;
  color: #fff;
}

.fid-mvtab-icon { font-size: 13px; line-height: 1; }

/* Full labels on desktop, short ones on narrow screens. Both are always in the
   DOM so the accessible name never changes between breakpoints. */
.fid-mvtab-short { display: none; }
@media (max-width: 720px) {
  .fid-mvtab-full  { display: none; }
  .fid-mvtab-short { display: inline; }
  .fid-mvtab       { flex: 0 0 auto; padding: 9px 12px; }
}

/* ── Badges ───────────────────────────────────────────────────────────────
   §4.1: "Badges show actionable work only. They are not generic unread-content
   counters." The styling is deliberately restrained — a count of things you
   must do is information, not an alarm. */
.fid-mvtab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--fid-bad-bg, #FDECEA);
  color: var(--fid-bad-fg, #C0392B);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fid-mvtab[aria-selected="true"] .fid-mvtab-badge {
  background: #fff;
  color: var(--fid-brand-btn, #CF4B00);
}

/* ── Today's compact performance snapshot (§13.1) ─────────────────────── */
.fid-snap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}
.fid-snap-cell {
  padding: 10px 12px;
  border: 1px solid var(--fid-line, #E6ECF5);
  border-radius: 9px;
  background: var(--fid-surface, #fff);
}
.fid-snap-k {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fid-text-3, #8A97B0);
}
.fid-snap-v {
  margin-top: 3px;
  font-size: 20px;
  font-weight: 800;
  color: var(--fid-text, #02123A);
  font-variant-numeric: tabular-nums;
}
.fid-snap-sub { margin-top: 2px; font-size: 10px; color: var(--fid-text-2, #5A6A8A); }

/* Direction is coloured by whether the movement is GOOD, never by whether the
   number went up (§13.1: "for AHT/Hold, upward movement is not visually
   positive merely because the number increased"). */
.fid-snap-dir.good { color: var(--fid-good-fg, #1A7A4A); font-weight: 700; }
.fid-snap-dir.bad  { color: var(--fid-bad-fg,  #C0392B); font-weight: 700; }
.fid-snap-dir.flat { color: var(--fid-text-3,  #8A97B0); }

@media (max-width: 720px) {
  .fid-snap { grid-template-columns: repeat(2, 1fr); }
}

/* ── Feedback's compact secondary filter (brief §6, P1.1) ─────────────────
   A filter row inside one tab, deliberately not a second navigation layer:
   it narrows what is already on this tab rather than introducing new
   destinations to learn. */
.fid-mvfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
@media (max-width: 720px) {
  .fid-mvfilters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .fid-mvfilters::-webkit-scrollbar { display: none; }
  .fid-mvfilters .fid-btn { flex: 0 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MY PERFORMANCE — stat tiles and trend charts (brief §8, P2)
   Thin marks, hairline grid, recessive chrome. The data colours live in
   fid-perf.js next to the validator note that justifies them.
   ══════════════════════════════════════════════════════════════════════════ */

.fid-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.fid-tile {
  border: 1px solid var(--fid-line, #E1E9F5);
  border-radius: 9px;
  background: var(--fid-surface, #fff);
  overflow: hidden;
}
.fid-tile.open { grid-column: 1 / -1; }

.fid-tile-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "k     spark"
    "v     spark"
    "sub   sub"
    "sub2  sub2"
    "more  more";
  gap: 2px 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* The whole tile is the hit target, comfortably past the 24px minimum. */
  min-height: 92px;
}
.fid-tile-btn:hover { background: var(--fid-surface-2, #F8FAFD); }
.fid-tile-btn:focus-visible {
  outline: 2px solid var(--fid-brand-btn, #CF4B00);
  outline-offset: -2px;
}

.fid-tile-k {
  grid-area: k;
  font-size: 9px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--fid-text-3, #606D85);
}
/* Proportional figures on a stat-tile value; tabular-nums is for columns. */
.fid-tile-v {
  grid-area: v;
  font-size: 22px; font-weight: 700; line-height: 1.1;
  color: var(--fid-text, #17233A);
}
.fid-tile-spark { grid-area: spark; align-self: center; }
.fid-tile-sub:nth-of-type(1) { grid-area: sub; }
.fid-tile-sub:nth-of-type(2) { grid-area: sub2; }
.fid-tile-sub {
  font-size: 10px; line-height: 1.45; color: var(--fid-text-2, #4A5568);
}
.fid-tile-more {
  grid-area: more;
  margin-top: 4px;
  font-size: 10px; font-weight: 700;
  color: var(--fid-info-fg, #1B4E8F);
}
.fid-spark { display: block; }

.fid-tile-body {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--fid-line, #E1E9F5);
}
/* Sized to include the x-axis band, so the card never grows a nested scroll. */
.fid-chart { margin: 8px 0 4px; }
/* Scale from the viewBox. A fixed height alongside width:100% letterboxes —
   the plot shrinks to fit the height and sits in the middle of two empty side
   gutters, which is what the first version did. */
.fid-chart svg { display: block; width: 100%; height: auto; }
.fid-chart-tick { font-size: 9px; fill: var(--fid-text-3, #606D85); }
.fid-chart-label { font-size: 11px; font-weight: 700; fill: var(--fid-text, #17233A); }

.fid-chart-table { margin-top: 6px; }
.fid-chart-table summary {
  font-size: 10px; font-weight: 700; cursor: pointer;
  color: var(--fid-info-fg, #1B4E8F);
}
.fid-tbl {
  width: 100%; margin-top: 6px; border-collapse: collapse;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.fid-tbl th, .fid-tbl td {
  padding: 3px 6px; text-align: left;
  border-bottom: 1px solid var(--fid-line, #E1E9F5);
  color: var(--fid-text, #17233A);
}
.fid-tbl th { color: var(--fid-text-3, #606D85); font-size: 9px;
  text-transform: uppercase; letter-spacing: .05em; }

.fid-hit { cursor: crosshair; }
.fid-hit:focus-visible { outline: 2px solid var(--fid-brand-btn, #CF4B00); }
.fid-chart-read {
  min-height: 14px;
  font-size: 11px; font-weight: 700;
  color: var(--fid-text, #17233A);
  font-variant-numeric: tabular-nums;
}