/* Reports: the tab bar with its controls, report cards, the sample data foot, and the documentation page. */

.reportbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.reportbar .subnav { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.reportbar-controls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.rep { display: grid; gap: 16px; }
.rep-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.rep-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.rep-head .rh-t { min-width: 0; }
.rep-head h3 { font-size: var(--fs-m); font-weight: 600; }
.rep-head .rh-s { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-4); }
.rep-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.rep-why {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-m); background: var(--panel-2);
  font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3);
}
.rep-why b { color: var(--ink-2); }
.rep-donut { width: 170px; flex: none; }
table.data .col-progress { width: 180px; }

/* Under a report that shows sample data: why, and the way to the real thing. */
.tierfoot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px;
  border-top: 1px solid var(--line); border-radius: 0 0 var(--r-l) var(--r-l); background: var(--panel-2);
  font-size: var(--fs-xs); color: var(--ink-3);
}
.tierfoot svg { width: 14px; height: 14px; flex: none; color: var(--brand-text); }
.tierfoot .right { margin-left: auto; }

/* ---------- Documentation: a sticky contents list next to the sections ---------- */
.docs { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.docs-toc {
  position: sticky; top: calc(var(--topbar) + var(--banner-h, 0px) + 18px); display: flex; flex-direction: column; gap: 2px; padding: 12px 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-card);
}
.docs-toc .toc-title { margin: 0 10px 8px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); }
.docs-toc a {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-s);
  color: var(--ink-3); font-size: var(--fs-s); transition: background .15s ease, color .15s ease;
}
.docs-toc a svg { width: 14px; height: 14px; color: var(--brand-text); }
.docs-toc a:hover { background: var(--panel-3); color: var(--ink); }
.docs-toc a.on { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.docs-toc a.on svg { color: var(--brand-text); }
.docs-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.doc-section { scroll-margin-top: calc(var(--topbar) + var(--banner-h, 0px) + 18px); }
.doc-section .card-head h3 { display: flex; align-items: center; gap: 8px; }
.doc-section .card-head h3 svg { color: var(--brand-text); }
.doc-lead { max-width: 780px; margin: 0 0 16px; font-size: var(--fs-m); line-height: 1.65; color: var(--ink-3); }
.doc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.doc-block { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel-2); }
.doc-block h4 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: var(--fs-2xs); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4);
}
.doc-block h4 svg { width: 14px; height: 14px; color: var(--brand-text); }
.doc-block ul { margin: 0; padding-left: 18px; font-size: var(--fs-s); line-height: 1.55; color: var(--ink-2); }
.doc-block li + li { margin-top: 5px; }
.doc-metrics { margin: 0; }
.doc-metric { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-s); }
.doc-metric:first-child { border-top: 0; }
.doc-metric dt { font-weight: 600; color: var(--ink); }
.doc-metric dd { margin: 0; line-height: 1.55; color: var(--ink-3); }
.doc-subtitle { margin: 18px 0 6px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); }

/* ---------- Motion ----------
   A report rises in when its tab opens, the kpis one after another; documentation sections fade up on scroll. */
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reportbar, .docs-toc { animation: rise-in .4s var(--ease) both; }
.rpanel.on > * { animation: rise-in .5s var(--ease) both; }
.rpanel.on > *:nth-child(2) { animation-delay: .06s; }
.rpanel.on > *:nth-child(3) { animation-delay: .12s; }
.rpanel.on > *:nth-child(4) { animation-delay: .18s; }
.rpanel.on > *:nth-child(n+5) { animation-delay: .24s; }
.rpanel.on .kpis .kpi { animation: rise-in .45s var(--ease) both; }
.rpanel.on .kpis .kpi:nth-child(2) { animation-delay: .05s; }
.rpanel.on .kpis .kpi:nth-child(3) { animation-delay: .1s; }
.rpanel.on .kpis .kpi:nth-child(4) { animation-delay: .15s; }
.docs.reveal .doc-section { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.docs.reveal .doc-section.in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .doc-cols { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .rep-2 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .reportbar-controls { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .docs { grid-template-columns: 1fr; }
  .docs-toc { position: static; flex-direction: row; flex-wrap: nowrap; gap: 4px; overflow-x: auto; }
  .docs-toc .toc-title { display: none; }
  .docs-toc a { white-space: nowrap; }
  .doc-metric { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 860px) {
  .tierfoot .right { margin-left: 0; }
}