/* Analytics. The two-column page, rows and foot lines are shared with Sacred (css/modules/sacred.css). Charts are grey steps with Crimson
   on the one series or stage that needs attention, drawn to scale (a width is a share of a stated maximum). Semantic tokens only. */
.an-layout .an-h { margin-bottom: var(--s-2); }
.an-r { text-align: right; }

/* Target Meter */
.an-target { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-4); }
.an-target-v { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-1) 0 var(--s-2); }
.an-target-n { font-size: 4rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.an-target-of { font-size: var(--fs-h3); font-weight: 700; color: var(--text-2); }
.an-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-3) 0 var(--s-2); }
.an-facts dt { font-size: var(--fs-caption); font-weight: 600; color: var(--text-3); }
.an-facts dd { font-size: var(--fs-h2); font-weight: 800; color: var(--text); }
.an-meter > i { height: 28px; }
@media (max-width: 899px) { .an-target { grid-template-columns: minmax(0, 1fr); padding: var(--s-3); } .an-target-n { font-size: 3rem; } }

/* KPI tiles */
.an-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.an-stat .stat-v { font-size: 2rem; }
.an-stat .stat-v.is-none { min-height: 2rem; font-size: var(--fs-cell); }
.an-asof { display: block; color: var(--text-3); }

/* shared bar track: a grey track, a fill from zero */
.an-track { position: relative; display: flex; align-items: center; min-width: 0; height: 14px; background: var(--chart-track); border-radius: var(--r-button); overflow: hidden; }
.an-track > i { display: block; height: 100%; background: var(--chart-2); border-radius: var(--r-button); }
.an-track > i.focal { background: var(--chart-focal); }
.an-track > i.c1 { background: var(--chart-1); }
.an-track > i.c2 { background: var(--chart-2); }
.an-track > i.c3 { background: var(--chart-3); }
.an-none { position: absolute; left: var(--s-2); font-size: var(--fs-caption); color: var(--text-3); }
.an-sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--chart-2); }
.an-sw.focal { background: var(--chart-focal); }
.an-sw.c2 { background: var(--chart-2); }

/* Funnel */
.an-fn-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.an-fn-tools .caption { max-width: 32rem; }
.an-fn { display: flex; flex-direction: column; }
.an-fn-head, .an-fn-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 3.5rem 3.25rem; align-items: center; column-gap: var(--s-2); }
.an-fn-head { padding: 0 var(--s-1) var(--s-1); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.an-fn-row { min-height: 40px; padding: 0 var(--s-1); border-top: 1px solid var(--line); border-radius: var(--r-button); }
.an-fn-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.an-fn-l { font-size: var(--fs-cell); font-weight: 600; color: var(--text); }
.an-fn-v { font-weight: 700; color: var(--text); }
.an-fn-c { font-size: var(--fs-caption); color: var(--text-3); }
.an-fn-row.is-drop .an-fn-c { color: var(--text); font-weight: 700; }

/* Bars */
.an-bars { display: flex; flex-direction: column; }
.an-bar-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 2.5rem; align-items: center; column-gap: var(--s-2); min-height: 36px; }
.an-bar-l { font-size: var(--fs-cell); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bar-v { font-weight: 700; color: var(--text); }

/* Comparator */
.an-cmp { display: flex; flex-direction: column; gap: var(--s-3); }
.an-cmp-key { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--fs-caption); color: var(--text-2); }
.an-cmp-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem; align-items: center; column-gap: var(--s-2); }
.an-cmp-l { font-size: var(--fs-cell); font-weight: 600; color: var(--text); }
.an-cmp-bars { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.an-cmp .an-track { background: transparent; overflow: visible; }
.an-cmp .an-track > i { flex: none; min-width: 2px; }
.an-cmp .an-track > b { margin-left: var(--s-2); font-size: var(--fs-caption); font-weight: 700; color: var(--text); }
.an-cmp-d { font-size: var(--fs-caption); font-weight: 700; color: var(--text-2); text-align: right; }

/* Definitions */
.an-kv { grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); }
@media (max-width: 639px) {
  .an-kv { grid-template-columns: minmax(0, 1fr); }
  .an-bar-row { grid-template-columns: 6rem minmax(0, 1fr) 2rem; }
  .an-cmp-row { grid-template-columns: minmax(0, 1fr) 4rem; grid-template-areas: "l d" "bars bars"; row-gap: var(--s-1); }
  .an-cmp-row > .an-cmp-l { grid-area: l; }
  .an-cmp-row > .an-cmp-bars { grid-area: bars; }
  .an-cmp-row > .an-cmp-d { grid-area: d; }
}

/* Attribution: the source table has five columns, so it takes the wider column; the connector list is short */
@media (min-width: 1100px) { .sc-cols.an-attr { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* Attribution (P7 M11): a row's sub is several short lines, never one long run; the rule is prose above two counted rows */
.at-rule { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); }
.at-rule .prose { margin: 0; max-width: var(--measure); font-size: var(--fs-cell); color: var(--text-2); }
.ctr-in .at-rule + .at-list { border-top: 1px solid var(--line); }