/* T2 Fiscal Year Review (staff) — see public/t2Review.js.
 *
 * Ported from the standalone dashboard in keap-opportunity-analysis. Two
 * things changed in the port and both matter:
 *
 *   - The dark theme is gone, all of it, along with the theme toggle. This
 *     app is light only (index.html: "this app has no theme switcher —
 *     light theme only"), and a half-ported dark block would be dead CSS
 *     that nothing can reach but everything has to be read around.
 *
 *   - Every colour now comes from the portal's own tokens (--bg, --surface,
 *     --border, --text, --text-muted, --text-dim, --indigo, --success,
 *     --amber) rather than the standalone page's private palette. The three
 *     SERIES colours are the exception: --t2-s1/2/3 are the same validated
 *     categorical hues the portal's own GIFI_COLOR uses, so they are
 *     declared here as literal hexes exactly as GIFI_COLOR declares them,
 *     and t2Review.js reads them back through getComputedStyle for Chart.js
 *     (which cannot resolve a var()).
 *
 * Everything new is prefixed t2- so nothing leaks into the other screens.
 * The shared classes this screen reuses instead of reinventing live in
 * index.html: .gifi-dash-card, .gifi-dash-chart-wrap, table.fu-table,
 * .status-pill, .empty-note, .spinner.
 */

/* Six tabs of wide tables need more room than the 880px every other screen
   uses — the same opt-out invoices.css takes. */
main:has(#screen-t2review.active) { max-width: 1360px; }

/* Declared on :root, not on #screen-t2review, because the drill-down dialog
   lives outside that element (see the markup comment on #t2Drill) and uses
   the same series colours. t2- prefixed so nothing collides with the
   portal's own tokens. */
:root {
  /* Series identity. Slots 1-3 of the portal's validated categorical
     palette — the same three hues GIFI_COLOR already uses, declared here as
     literal hexes for the same reason it does: t2Review.js reads them back
     through getComputedStyle for Chart.js, which cannot resolve a var().
     The earlier fiscal year is slot 1, the later one slot 2, a third
     manager slot 3. Never more than three at once, because there are only
     three validated slots. */
  --t2-s1: #2a78d6;
  --t2-s2: #eb6834;
  --t2-s3: #1baf7a;
  --t2-good-ink: #15803D;
  --t2-bad-ink: #B02A2A;
  --t2-warn-ink: #92400E;
}

.t2-mono { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.t2-low { color: var(--text-dim); }

/* --- head, year control, tab strip ------------------------------------ */
.t2-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.t2-head .subtitle { margin-bottom: 0; }

.t2-seg { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.t2-seg button {
  appearance: none; background: none; border: 0; font: 600 12.5px 'Inter', sans-serif;
  color: var(--text-muted); padding: 7px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.t2-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(32, 23, 23, .09); }
.t2-seg button:hover { color: var(--text); }

.t2-tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border); margin: 18px 0 20px;
}
.t2-tabs::-webkit-scrollbar { display: none; }
.t2-tabs button {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  font: 500 13.5px 'Inter', sans-serif; color: var(--text-muted); padding: 10px 14px; cursor: pointer;
  white-space: nowrap; margin-bottom: -1px;
}
.t2-tabs button:hover { color: var(--text); }
.t2-tabs button[aria-selected="true"] { color: var(--text); font-weight: 600; border-color: var(--indigo); }

.t2-chip {
  appearance: none; font: 500 12.5px 'Inter', sans-serif; padding: 6px 13px; border-radius: 999px;
  cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  white-space: nowrap;
}
.t2-chip:hover { border-color: var(--text-dim); color: var(--text); }
.t2-chip[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); font-weight: 600; }
.t2-chip .t2-sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; }
.t2-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.t2-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.t2-filters select, .t2-filters input[type="search"] {
  font: 400 12.5px 'Inter', sans-serif; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  width: auto; margin: 0; max-width: 100%;
}
.t2-filters input[type="search"] { min-width: min(250px, 100%); }
.t2-hint { font-size: 12px; color: var(--text-dim); max-width: 46ch; }

/* A hidden grid or flex box would otherwise stay visible: its display rule
   beats the hidden attribute. Scoped to this screen so nothing else changes. */
#screen-t2review [hidden] { display: none !important; }
.t2-block { margin-top: 28px; }
.t2-blockhead { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.t2-blockhead h2 { font: 600 17px 'Space Grotesk', sans-serif; margin: 0; letter-spacing: -.01em; }
.t2-note { color: var(--text-muted); font-size: 13px; max-width: 76ch; margin: 0 0 14px; }
.t2-lede { color: var(--text-muted); font-size: 13.5px; max-width: 76ch; margin: 0; }
.t2-prov { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: var(--text-dim); margin: 7px 0 0; }

.t2-key { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.t2-kd { display: inline-flex; align-items: center; gap: 7px; }
.t2-kd i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.t2-kd.t2-ghosted { opacity: .55; }

/* --- grids ------------------------------------------------------------- */
/* Every collapsed track carries an explicit zero minimum: a bare 1fr is
   minmax(auto, 1fr) and refuses to shrink below its content's min-content
   width, which is how a chart card pushed a dashboard sideways before
   (tests/unit/dashboardMobileLayout.test.js). Nothing here sets its columns
   in an inline style attribute, for the same reason. */
.t2-grid { display: grid; gap: 13px; }
.t2-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t2-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t2-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .t2-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t2-g3, .t2-g2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .t2-g4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- stat tiles -------------------------------------------------------- */
.t2-tile { padding: 16px 16px 14px; min-width: 0; }
.t2-tile .t2-lab { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.t2-tile .t2-pair { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.t2-tile .t2-was { font-size: 18px; color: var(--text-dim); font-weight: 500; }
.t2-tile .t2-arrow { color: var(--text-dim); font-size: 13px; }
.t2-tile .t2-now { font: 700 30px 'Space Grotesk', sans-serif; letter-spacing: -.02em; line-height: 1; }
.t2-tile .t2-unit { font-size: 12.5px; color: var(--text-dim); font-weight: 500; }
.t2-tile .t2-foot { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }

.t2-delta {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
.t2-delta.t2-up { background: var(--success-light); color: var(--t2-good-ink); }
.t2-delta.t2-down { background: var(--indigo-light); color: var(--t2-bad-ink); }
.t2-delta.t2-flat { background: var(--bg); color: var(--text-muted); }

.t2-spark { display: block; margin-top: 11px; width: 100%; height: 28px; overflow: visible; }

/* --- finding cards ---------------------------------------------------- */
.t2-find { padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.t2-find .t2-mk {
  flex: 0 0 auto; width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center;
  font: 700 12.5px 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
.t2-find.t2-ok .t2-mk { background: var(--success-light); color: var(--t2-good-ink); }
.t2-find.t2-care .t2-mk { background: var(--amber-light); color: var(--t2-warn-ink); }
.t2-find.t2-neutral .t2-mk { background: var(--bg); color: var(--text-muted); }
.t2-find.t2-bad .t2-mk { background: var(--indigo-light); color: var(--t2-bad-ink); }
.t2-find h3 { font: 600 14px 'Space Grotesk', sans-serif; margin: 0 0 3px; }
.t2-find p { font-size: 13.5px; color: var(--text-muted); margin: 0; }
.t2-find .t2-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; color: var(--text); font-weight: 500; }

/* --- charts ----------------------------------------------------------- */
/* Chart.js draws into a canvas sized by its wrapper (responsive: true,
   maintainAspectRatio: false), so the height lives here, never in the
   config. .gifi-dash-chart-wrap from index.html is the 220px default; these
   are the two sizes this screen also needs. */
.t2-chart-wrap-tall { position: relative; height: 280px; }
.t2-chart-wrap-short { position: relative; height: 170px; }
.t2-chart-note { font-size: 12px; color: var(--text-dim); margin: -4px 0 10px; }
.t2-chart-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; }

svg.t2-chart { display: block; width: 100%; height: auto; overflow: visible; }
.t2-axis-t { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; fill: var(--text-dim); }
.t2-dlab { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 500; }
.t2-gl { stroke: var(--border); stroke-width: 1; }
.t2-dot { stroke: var(--surface); stroke-width: 2; }
.t2-f1 { fill: var(--t2-s1); }
.t2-f2 { fill: var(--t2-s2); }
.t2-f3 { fill: var(--t2-s3); }
.t2-k1 { stroke: var(--t2-s1); }
.t2-k2 { stroke: var(--t2-s2); }
.t2-k3 { stroke: var(--t2-s3); }
.t2-ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.t2-ln.t2-ghost { stroke-width: 1.5; opacity: .38; }
.t2-dumb { display: block; width: 118px; height: 16px; overflow: visible; }

/* --- tables ----------------------------------------------------------- */
/* table.fu-table carries the look; these are the numeric/sticky bits the
   wide comparison tables need on top of it. */
.t2-tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.fu-table.t2-table th, table.fu-table.t2-table td { text-align: right; white-space: nowrap; }
table.fu-table.t2-table th:first-child, table.fu-table.t2-table td:first-child { text-align: left; }
table.fu-table.t2-table caption { text-align: left; font-size: 12px; color: var(--text-dim); padding: 0 0 10px; }
table.fu-table.t2-table td.t2-n, table.fu-table.t2-table th.t2-n {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums;
}
/* 200, not 240: at 240 the seven columns of the drill-down overflowed its
   960px dialog by ~27px, and the column that fell off the edge was FY —
   the one that tells you which year a row belongs to. Titles wrap, so
   the narrower minimum costs a line, not a word. */
table.fu-table.t2-table td.t2-wrap { white-space: normal; min-width: 200px; }
table.fu-table.t2-table th button {
  appearance: none; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0;
  letter-spacing: inherit; text-transform: inherit;
}
table.fu-table.t2-table th button:hover, table.fu-table.t2-table th[aria-sort] button { color: var(--text); }
table.fu-table.t2-table .t2-vsgap { border-left: 2px solid var(--border) !important; padding-left: 14px !important; }
.t2-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 5px;
  background: var(--bg); color: var(--text-muted); text-transform: uppercase;
}
.t2-badge.t2-badge-ok { background: var(--success-light); color: var(--t2-good-ink); }
.t2-badge.t2-badge-warn { background: var(--amber-light); color: var(--t2-warn-ink); }
.t2-linkish {
  appearance: none; background: none; border: 0; font: inherit; color: var(--text); cursor: pointer;
  text-align: left; padding: 0; border-bottom: 1px solid var(--border);
}
.t2-linkish:hover { border-color: var(--text); }
.t2-keap { color: var(--t2-s1); text-decoration: none; border-bottom: 1px solid transparent; }
.t2-keap:hover { border-bottom-color: var(--t2-s1); }

/* A figure you can open: click it for the files behind it. */
.t2-drill {
  appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  border-bottom: 1px dotted var(--text-dim); font-variant-numeric: tabular-nums;
}
.t2-drill:hover { border-bottom-color: var(--text); color: var(--text); }

/* --- head to head (HTML and CSS, not a chart) ------------------------- */
.t2-h2h-head, .t2-h2h-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, auto) minmax(0, 1fr);
  gap: 10px; align-items: center;
}
.t2-h2h-head { align-items: baseline; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.t2-h2h-head .t2-nm { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; min-width: 0; }
.t2-h2h-head .t2-nm.t2-r { justify-content: flex-end; }
.t2-h2h-head .t2-nm i { width: 10px; height: 10px; border-radius: 3px; display: block; flex: 0 0 auto; }
.t2-h2h-row { padding: 9px 0; border-bottom: 1px solid var(--border); }
.t2-h2h-row:last-child { border-bottom: 0; }
.t2-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.t2-side.t2-l { justify-content: flex-end; }
.t2-side .t2-v {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.t2-side .t2-track { position: relative; flex: 1; height: 13px; min-width: 0; }
.t2-side .t2-fill { position: absolute; top: 0; height: 100%; border-radius: 3px; min-width: 2px; }
.t2-side.t2-l .t2-fill { right: 0; border-radius: 3px 0 0 3px; }
.t2-side.t2-r .t2-fill { left: 0; border-radius: 0 3px 3px 0; }
.t2-side .t2-tick { position: absolute; top: -4px; width: 2px; height: 21px; background: var(--text-dim); border-radius: 1px; }
.t2-markkey { display: flex; align-items: center; gap: 7px; justify-content: center; font-size: 11.5px; color: var(--text-dim); margin-top: 12px; }
.t2-markkey i { width: 2px; height: 13px; background: var(--text-dim); border-radius: 1px; display: block; }
.t2-mid { text-align: center; min-width: 0; }
.t2-mid .t2-lab { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.t2-mid .t2-win { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-dim); }
.t2-mid .t2-win.t2-a { color: var(--t2-s1); }
.t2-mid .t2-win.t2-b { color: var(--t2-s2); }
.t2-verdict { font-size: 14.5px; line-height: 1.5; color: var(--text); margin: 0 0 18px; max-width: 76ch; }
@media (max-width: 620px) {
  .t2-h2h-row, .t2-h2h-head { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .t2-side.t2-l { justify-content: flex-start; flex-direction: row-reverse; }
  .t2-mid { text-align: left; }
  .t2-h2h-head .t2-nm.t2-r { justify-content: flex-start; }
}

/* --- folds and method notes ------------------------------------------- */
details.t2-fold { margin-top: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
details.t2-fold summary {
  cursor: pointer; padding: 13px 17px; font: 600 14px 'Space Grotesk', sans-serif; list-style: none;
  display: flex; align-items: center; gap: 9px;
}
details.t2-fold summary::-webkit-details-marker { display: none; }
details.t2-fold summary::after {
  content: ""; width: 7px; height: 7px; border-right: 1.6px solid var(--text-dim);
  border-bottom: 1.6px solid var(--text-dim); transform: rotate(45deg); margin-left: auto; transition: transform .2s;
}
details.t2-fold[open] summary::after { transform: rotate(225deg); }
.t2-foldbody { padding: 0 17px 17px; }
.t2-method { padding: 4px 0 0; font-size: 13.5px; color: var(--text-muted); display: grid; gap: 11px; }
.t2-method b { color: var(--text); font-weight: 600; }
.t2-method code {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12.5px;
  background: var(--bg); padding: 1px 5px; border-radius: 4px;
}

/* --- the drill-down sheet -------------------------------------------- */
/* Reuses .modal-overlay / .modal-dialog / .modal-title from index.html, so
   it inherits the open/close transition and the sidebar offset every other
   dialog here gets. Only the wide scrolling body is new.
 *
 * Qualified with .modal-dialog rather than left as a lone class, and that
 * is not cosmetic: this stylesheet is <link>ed in the head BEFORE
 * index.html's own <style> block, so a lone .t2-drill-dialog ties with
 * .modal-dialog on specificity and loses on source order — the dialog came
 * out at .modal-dialog's 520px with seven columns of files squeezed into
 * it. Specificity does not care which file came first. Any other rule here
 * that overrides an index.html class needs the same treatment. */
.modal-dialog.t2-drill-dialog {
  max-width: 960px; width: 100%; padding: 0; text-align: left;
  display: flex; flex-direction: column; max-height: 85vh; overflow: hidden;
}
.t2-drill-head {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.t2-drill-body { overflow: auto; padding: 14px 16px 18px; flex: 1; }
.t2-x {
  appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer; font-size: 16px; line-height: 1; flex: 0 0 auto;
}
.t2-x:hover { border-color: var(--text-dim); color: var(--text); }

/* --- the empty state -------------------------------------------------- */
/* A snapshot has to be pushed before this screen shows anything, so say so
   plainly rather than looking broken. */
.t2-empty { padding: 36px 24px; text-align: center; color: var(--text-muted); }
.t2-empty h3 { font: 600 16px 'Space Grotesk', sans-serif; margin: 0 0 8px; color: var(--text); }
.t2-empty p { margin: 0 auto; max-width: 56ch; font-size: 13.5px; }
.t2-empty code {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12.5px;
  background: var(--bg); padding: 1px 5px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  #screen-t2review * { transition-duration: 0s !important; animation: none !important; }
}

/* ---------------------------------------------------------------------
   Client NPS
   --------------------------------------------------------------------- */
/* A client scoring under NPS_LOW, in a file list. The same red the rest of
   the page uses for a figure that wants attention. */
.t2-npslow {
  background: var(--amber-light); color: var(--t2-warn-ink);
  border-radius: 5px; padding: 1px 6px; font-weight: 600;
}

/* "8.6 (109)" — the average, then how many of its files carried a score.
   Coverage is only about half, so the count travels with every figure. */
.t2-sub { color: var(--text-dim); font-size: .82em; font-weight: 400; font-variant-numeric: tabular-nums; }
.t2-arr { color: var(--text-dim); margin: 0 5px; font-weight: 400; }

/* The Overview strip: its own full-width row under the four-across
   scoreboard, because this figure needs room to say what it covers. */
.t2-npsstrip { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding: 15px 17px; }
.t2-npsstrip .t2-lab { font-size: 12.5px; color: var(--text-muted); margin-bottom: 3px; }
.t2-npsnote { flex: 1 1 260px; min-width: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* The overlay's key entry: a dashed rule rather than a solid swatch, so the
   legend says which line is the second measure before you look at the
   chart. */
.t2-kd.t2-npskey i {
  height: 3px; border-radius: 2px; margin-bottom: 2px;
  background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 8px);
}

/* The files drill now carries nine columns, two of them free text, so the
   shared 200px .t2-wrap minimum makes it wider than even the wide dialog and
   a column is cut off. Qualified with the table's own class so it BEATS the
   shared rule instead of tying with it and losing on source order. */
table.fu-table.t2-table.t2-drill-wide td.t2-wrap { min-width: 104px; }
/* Every cell in this table is nowrap, so a full name like "CPA4IT Customer
   Service" held the manager column at 181px and pushed the ninth column off
   the end. It is the one column with room to break. */
table.fu-table.t2-table.t2-drill-wide td.t2-drill-am { white-space: normal; min-width: 88px; }
/* And the headers, for the same reason: "Account manager" on one line held
   that column at 144px by itself, whatever the cells below it did. */
table.fu-table.t2-table.t2-drill-wide th { white-space: normal; }