/* ============================================================
   Build Intelligence Tracker (admin/staff) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen from elements.css.

   ADMIN page: system admins read this internal engineering + product
   decision log under the default light .app-screen palette. Surface,
   text, and border colours reference --t-* semantic tokens, which
   app/theme.css rebinds per theme, so the page reskins without markup
   changes. The decorative category hues (timeline status, journal /
   decision tags, entry-type and tier accents, the code block's syntax
   highlight) are token-only too — they use --mea-* colour primitives
   because they encode a fixed category, not a semantic state.
   The controller toggles only the .is-active state class on the tab
   buttons. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  .tracker { display: grid; gap: var(--mea-space-5); align-content: start; }

  /* Page heading. */
  .tracker__intro { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .tracker__title { margin: 0; }

  /* Summary: a responsive row of figures, stacking when cramped. */
  .tracker-summary { display: grid; gap: var(--mea-space-4); margin: 0;
                     grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .tracker-stat { display: grid; gap: var(--mea-space-1); align-content: start;
                  margin: 0; padding: var(--mea-space-4) var(--mea-space-5);
                  border-radius: var(--mea-radius-xl); }
  .tracker-stat__label, .tracker-stat__value, .tracker-stat__sub { margin: 0; }

  /* Tab strip: a wrapping row of real buttons. */
  .tracker-tabs { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); margin: 0; }
  .tracker-tab { display: inline-flex; align-items: center;
                 min-height: var(--t-target-min, 44px);
                 padding: var(--mea-space-2) var(--mea-space-4); border: 0;
                 border-radius: var(--mea-radius-pill); cursor: pointer; white-space: nowrap; }

  /* Tab body + multi-column tab layouts. */
  .tracker-body { display: grid; gap: var(--mea-space-4); min-inline-size: 0; }
  .tracker-overview-grid { display: grid; gap: var(--mea-space-4);
                           grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

  /* Reusable panel: an elevated card with optional header + body. */
  .tracker-panel { display: grid; align-content: start;
                   border-radius: var(--mea-radius-xl); overflow: hidden; }
  .tracker-panel__header { padding: var(--mea-space-4) var(--mea-space-5); }
  .tracker-panel__title { margin: 0; }
  .tracker-panel__body { padding: var(--mea-space-5); min-inline-size: 0; }
  .tracker-panel__body--flush { padding: 0; }
  .tracker-prose { min-inline-size: 0; }

  /* Section headers within a tab. */
  .tracker-section-header { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .tracker-section-title, .tracker-section-subtitle { margin: 0; }

  /* Timeline: an ordered list with a status dot beside each entry. */
  .tracker-timeline { display: grid; gap: var(--mea-space-4); margin: 0; padding: 0; list-style: none; }
  .tracker-timeline-item { display: grid; grid-template-columns: auto 1fr;
                           gap: var(--mea-space-4); align-items: start; }
  .tracker-timeline-dot { inline-size: .75rem; block-size: .75rem; margin-block-start: .35rem;
                          flex-shrink: 0; border-radius: var(--mea-radius-circle); }
  .tracker-timeline-content { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .tracker-timeline-date, .tracker-timeline-title, .tracker-timeline-desc { margin: 0; }

  /* Journal entries: stacked cards with a leading accent rail. */
  .tracker-journal-entry { border-inline-start-width: var(--mea-space-1);
                           border-inline-start-style: solid; }
  .tracker-journal-entry + .tracker-journal-entry { margin-block-start: var(--mea-space-4); }
  .tracker-journal-row { display: flex; flex-wrap: wrap; align-items: center;
                         gap: var(--mea-space-3); margin-block-end: var(--mea-space-3); }
  .tracker-journal-heading { margin: var(--mea-space-4) 0 var(--mea-space-2); }
  .tracker-journal-body, .tracker-journal-body-spaced { margin: 0; }
  .tracker-journal-body-spaced { margin-block-end: var(--mea-space-3); }

  /* Tags / badges (journal sessions, decision categories, roadmap status). */
  .tracker-tag { display: inline-flex; align-items: center; flex-shrink: 0;
                 padding: var(--mea-space-1) var(--mea-space-3);
                 border-radius: var(--mea-radius-pill); white-space: nowrap; }
  .tracker-tag--sm { padding: 0 var(--mea-space-2); }

  /* Bulleted / numbered lists inside journal + determinations. */
  .tracker-list { margin: var(--mea-space-2) 0 0; padding-inline-start: var(--mea-space-5);
                  display: grid; gap: var(--mea-space-2); }

  /* Decision log: a list of dated entries. */
  .tracker-decision-list { display: grid; gap: var(--mea-space-5); margin: 0; padding: 0; list-style: none; }
  .tracker-decision-meta { display: flex; flex-wrap: wrap; align-items: center;
                           gap: var(--mea-space-2); margin-block-end: var(--mea-space-2); }
  .tracker-decision-date { display: inline-flex; align-items: center; }
  .tracker-decision-title, .tracker-decision-body { margin: 0; }
  .tracker-decision-title { margin-block-end: var(--mea-space-1); }

  /* Eligibility-engine code block. */
  .tracker-pre { margin: 0; overflow-x: auto; white-space: pre;
                 padding: var(--mea-space-4) var(--mea-space-5); border-radius: var(--mea-radius-md); }

  /* Real data tables (charge lists, tier estimates). */
  .tracker-table { inline-size: 100%; border-collapse: collapse; }
  .tracker-table th, .tracker-table td { text-align: start;
                                         padding: var(--mea-space-3) var(--mea-space-5); }
  .tracker-table__num { text-align: end; white-space: nowrap; }
  .tracker-table__total-label { text-align: end; }

  /* Diversion entry-type cards. */
  .tracker-entry-grid { display: grid; gap: var(--mea-space-3); margin: 0; padding: 0; list-style: none;
                        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .tracker-entry { display: grid; gap: var(--mea-space-2); align-content: start;
                   padding: var(--mea-space-4); border-radius: var(--mea-radius-lg);
                   border-inline-start-width: var(--mea-space-1); border-inline-start-style: solid; }
  .tracker-entry__title, .tracker-entry__desc { margin: 0; }

  /* Roadmap feature lists. */
  .tracker-feature-list { display: grid; gap: var(--mea-space-2); margin: 0; padding: 0; list-style: none; }
  .tracker-feature { display: grid; grid-template-columns: auto 1fr auto;
                     gap: var(--mea-space-3); align-items: center; min-inline-size: 0; }
  .tracker-feature-name { min-inline-size: 0; }
  .tracker-feature-where { white-space: nowrap; }

  @container (max-width: 30rem) {
    .tracker-feature { grid-template-columns: auto 1fr; }
    .tracker-feature-where { grid-column: 2; }
  }
}

@layer design {
  .tracker__title, .tracker-section-title { font-family: var(--mea-font-citizen);
                    font-size: var(--mea-text-2xl); font-weight: var(--mea-w-bold); color: var(--t-text); }
  .tracker-section-title { font-size: var(--mea-text-xl); }
  .tracker-section-subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  /* Summary figures. */
  .tracker-stat { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                  box-shadow: var(--mea-shadow-sm); }
  .tracker-stat__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                         color: var(--t-text-muted); }
  .tracker-stat__value { font-size: var(--mea-text-3xl); font-weight: var(--mea-w-extrabold);
                         line-height: var(--mea-lh-tight); color: var(--t-text); }
  .tracker-stat-value--eligible { color: var(--t-success-text); }
  .tracker-stat__sub { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  /* Tab buttons. .is-active is toggled by the controller. */
  .tracker-tab { background: var(--t-bg-recessed); color: var(--t-text-secondary);
                 font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                 transition: background var(--mea-dur-fast), color var(--mea-dur-fast); }
  .tracker-tab:hover { background: var(--t-bg-active); }
  .tracker-tab.is-active { background: var(--t-accent); color: var(--t-accent-text); }

  /* Panels. */
  .tracker-panel { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                   box-shadow: var(--mea-shadow-sm); }
  .tracker-panel__header { border-block-end: 1px solid var(--t-border); }
  .tracker-panel__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                          font-weight: var(--mea-w-bold); color: var(--t-text); }
  .tracker-prose { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                   line-height: var(--mea-lh-relaxed); }
  .tracker-strong-dark { color: var(--t-text); font-weight: var(--mea-w-bold); }
  .tracker-strong-muted { color: var(--t-text-muted); font-weight: var(--mea-w-semibold); }
  .tracker-court-green { color: var(--mea-green-deep); }

  /* Timeline. Status modifiers recolour the dot only. */
  .tracker-timeline-date { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                           color: var(--t-text-muted); text-transform: uppercase;
                           letter-spacing: var(--mea-ls-wide); }
  .tracker-timeline-title { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .tracker-timeline-desc { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .tracker-timeline-dot { background: var(--t-text-muted); }
  .tracker-timeline-dot--done { background: var(--mea-green); }
  .tracker-timeline-dot--active { background: var(--mea-blue); }
  .tracker-timeline-dot--planned { background: var(--t-text-muted); }

  /* Journal entries. The leading rail colour encodes the session category. */
  .tracker-journal-entry { border-inline-start-color: var(--t-border); }
  .tracker-journal-entry--blue { border-inline-start-color: var(--mea-blue); }
  .tracker-journal-entry--green { border-inline-start-color: var(--mea-green); }
  .tracker-journal-entry--amber { border-inline-start-color: var(--mea-amber); }
  .tracker-journal-session { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .tracker-journal-heading { font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold);
                             text-transform: uppercase; letter-spacing: var(--mea-ls-wide);
                             color: var(--t-text-muted); }
  .tracker-journal-body, .tracker-journal-body-spaced { font-size: var(--mea-text-sm);
                          color: var(--t-text-secondary); line-height: var(--mea-lh-relaxed); }

  /* Tags. Category modifiers recolour the tag only. */
  .tracker-tag { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                 background: var(--t-bg-recessed); color: var(--t-text-secondary); }
  .tracker-tag--swift { background: var(--t-accent); color: var(--t-accent-text); }
  .tracker-tag--active { background: var(--t-success-bg); color: var(--t-success-text); }
  .tracker-tag--review { background: var(--t-warning-bg); color: var(--t-warning-text); }
  .tracker-tag--done { background: var(--t-success-bg); color: var(--t-success-text); }
  .tracker-tag--planned { background: var(--t-bg-active); color: var(--t-text-muted); }
  .tracker-tag--sm { font-size: var(--mea-text-xs); }

  .tracker-list { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }

  /* Decision log. */
  .tracker-decision-list { font-size: var(--mea-text-sm); }
  .tracker-decision-date { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                           color: var(--t-text-muted); }
  .tracker-decision-title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold); color: var(--t-text); }
  .tracker-decision-body { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                           line-height: var(--mea-lh-relaxed); }

  /* Code block + syntax highlight. */
  .tracker-pre { background: var(--t-bg-recessed); color: var(--t-text);
                 font-family: var(--mea-font-mono); font-size: var(--mea-text-xs);
                 line-height: var(--mea-lh-relaxed); }
  .tracker-code-cmt { color: var(--t-text-muted); }
  .tracker-code-kw { color: var(--mea-blue); font-weight: var(--mea-w-bold); }
  .tracker-code-op { color: var(--mea-violet); }
  .tracker-code-val { color: var(--mea-green-deep); }
  .tracker-code-err { color: var(--t-error-text); font-weight: var(--mea-w-bold); }

  /* Data tables. */
  .tracker-table { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .tracker-table th { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                      text-transform: uppercase; letter-spacing: var(--mea-ls-wide);
                      color: var(--t-text-muted); border-block-end: 1px solid var(--t-border); }
  .tracker-table td { border-block-end: 1px solid var(--t-border); }
  .tracker-table tbody tr:last-child td { border-block-end: 0; }
  .tracker-table__mono { font-family: var(--mea-font-mono); color: var(--t-text-muted); }
  .tracker-table__num { font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .tracker-table__growth { color: var(--t-error-text); }
  .tracker-table tfoot td { border-block-start: 1px solid var(--t-border); border-block-end: 0;
                            font-weight: var(--mea-w-bold); color: var(--t-text); }
  .tracker-table__total-value { color: var(--mea-green-deep); }
  .tracker-table__row--total td { border-block-start: 2px solid var(--t-border); font-weight: var(--mea-w-bold); }
  .tracker-table__num--total { color: var(--t-text); }
  .tracker-tier--green { color: var(--mea-green-deep); font-weight: var(--mea-w-semibold); }
  .tracker-tier--blue { color: var(--mea-blue); font-weight: var(--mea-w-semibold); }
  .tracker-tier--purple { color: var(--mea-violet); font-weight: var(--mea-w-semibold); }
  .tracker-tier--total { color: var(--t-text); font-weight: var(--mea-w-bold); }

  /* Diversion entry-type cards. Category modifiers recolour the rail + title. */
  .tracker-entry { background: var(--t-bg-recessed); border-inline-start-color: var(--t-border); }
  .tracker-entry--green { border-inline-start-color: var(--mea-green); }
  .tracker-entry--blue { border-inline-start-color: var(--mea-blue); }
  .tracker-entry--purple { border-inline-start-color: var(--mea-violet); }
  .tracker-entry__title { font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold); }
  .tracker-entry--green .tracker-entry__title { color: var(--mea-green-deep); }
  .tracker-entry--blue .tracker-entry__title { color: var(--mea-blue); }
  .tracker-entry--purple .tracker-entry__title { color: var(--mea-violet); }
  .tracker-entry__desc { font-size: var(--mea-text-xs); color: var(--t-text-secondary);
                         line-height: var(--mea-lh-relaxed); }

  /* Roadmap priority headings + feature rows. */
  .tracker-priority-title--p0 { color: var(--t-error-text); }
  .tracker-priority-title--p1 { color: var(--t-warning-text); }
  .tracker-priority-title--p2 { color: var(--t-text-muted); }
  .tracker-feature-name { font-size: var(--mea-text-sm); color: var(--t-text); }
  .tracker-feature-name--done { color: var(--t-text-muted); }
  .tracker-feature-where { font-size: var(--mea-text-xs); color: var(--t-text-muted); }
}