/* ============================================================================
   The app frame — a static copy of the real dashboard (apps/web/src/dashboard),
   checked against http://localhost:3000/ (the app itself) and the component
   stills in design-assets/app-stills. Same layout: SideMenu (240px) · Header
   (breadcrumb · search · date · vs prior · theme) · page. Below 900px the app
   swaps the sidebar for AppNavbar ("convertlyft · Page" + ≡ drawer) — so does
   this. Scaled ~0.8 to fit the 1120px column. Tokens = the app's light scheme
   (themePrimitives.jsx sources site.css). Mono chips are the app's own.
   Every figure inside is demo data, labeled in the header and in the caption.
   ========================================================================== */

.af {
  position: relative; margin-top: 30px; text-align: left; font-size: 12.5px; line-height: 1.45; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  overflow: hidden;
}
.af-i { width: 16px; height: 16px; fill: currentColor; flex: none; }
.af-mark { width: 18px; height: 18px; }

/* ---- AppNavbar (mobile only in the app; same here) ---- */
.af-appbar { display: none; align-items: center; gap: 8px; padding: 10px 12px; background: var(--white); border-bottom: 1px solid var(--line); }
.af-appbar .af-mark { width: 22px; height: 22px; }
.af-appbar b { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.af-appbar .af-page { font-size: 19px; color: var(--mute); margin-right: auto; }
.af-ibtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--mute); }
.af-menu { font: inherit; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--ink); cursor: pointer; }
.af-menu:focus-visible, .af-side button:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 1px; }

/* ---- SideMenu ---- */
.af-body { display: grid; grid-template-columns: 192px 1fr; }
.af-side { display: flex; flex-direction: column; background: var(--white); border-right: 1px solid var(--line); padding: 10px 8px 8px; max-height: 600px; overflow-y: auto; scrollbar-width: thin; }
.af-brand { display: flex; align-items: center; gap: 6px; padding: 2px 6px 8px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; }
.af-wsel { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.af-wsel .af-wav { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); color: var(--mute); }
.af-wsel b { display: block; font-size: 12.5px; font-weight: 500; }
.af-wsel small { display: block; font-size: 10.5px; color: var(--mute); }
.af-wsel .af-i { margin-left: auto; color: var(--mute); }
.af-sep { border-top: 1px solid var(--line-soft); margin: 2px -8px 4px; }
.af-group { font-family: var(--mono); font-size: 10px; color: var(--faint); padding: 8px 10px 3px; }
.af-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 4px 10px; border: 0; border-radius: var(--r-sm); background: transparent; font: inherit; font-size: 12.5px; color: var(--ink); }
.af-item .af-i { color: var(--mute); width: 15px; height: 15px; }
button.af-item { cursor: pointer; }
button.af-item:hover { background: var(--paper); }
.af-item[aria-current="page"] { background: var(--paper); font-weight: 600; }
.af-badge { margin-left: auto; min-width: 16px; text-align: center; line-height: 15px; font-size: 10px; padding: 0 5px; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); background: var(--white); }
.af-badge.broken { color: var(--broken); background: var(--broken-bg); border-color: transparent; }
.af-live { width: 6px; height: 6px; border-radius: 50%; background: var(--win); margin-left: auto; }
.af-live + .af-badge { margin-left: 0; }
.af-paid { margin: 10px 4px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); font-size: 11.5px; }
.af-paid b { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.af-paid p { margin: 0 0 8px; color: var(--mute); }
.af-obtn { display: block; text-align: center; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 11.5px; font-weight: 500; color: var(--ink); }
.af-who { display: flex; align-items: center; gap: 8px; margin: auto -8px 0; padding: 10px 12px 2px; border-top: 1px solid var(--line); font-size: 12px; }
.af-who i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); font-style: normal; font-size: 11px; font-weight: 500; }
.af-who span { flex: 1; min-width: 0; font-weight: 500; }
.af-who small { display: block; font-size: 10.5px; font-weight: 400; color: var(--mute); }
.af-who .af-i { color: var(--mute); }

/* ---- Header ---- */
.af-main { padding: 10px 18px 18px; height: 600px; overflow: auto; background: var(--bg); }
.af-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12.5px; color: var(--mute); }
.af-crumb { display: inline-flex; align-items: center; gap: 2px; margin-right: auto; }
.af-crumb u { text-underline-offset: 3px; }
.af-crumb b { color: var(--ink); font-weight: 600; }
.af-crumb .af-i { color: var(--faint); }
.af-search { display: inline-flex; align-items: center; gap: 8px; min-width: 190px; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--faint); font-size: 12px; }
.af-search .af-i { color: var(--ink); }
.af-search kbd { margin-left: auto; font-family: var(--mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--mute); }
.af-date { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--ink); font-size: 12px; white-space: nowrap; }
.af-chip { display: inline-block; vertical-align: middle; white-space: nowrap; font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); background: var(--white); }
.af-chip.warn { color: var(--leak); background: var(--leak-bg); border-color: hsl(45, 90%, 65%); }
.af-chip.broken { color: var(--broken); background: var(--broken-bg); border-color: hsl(0, 90%, 65%); }
.af-chip.win { color: var(--win); background: var(--win-bg); border-color: hsl(120, 61%, 77%); }
.af-chip.on { color: #fff; background: var(--brand-500); border-color: var(--brand-500); }
.af-chip.o { font-weight: 500; }

/* ---- page: cards and text ---- */
.af-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.af-h { font-size: 14px; font-weight: 600; margin: 2px 0 2px; }
.af-cap { font-size: 11px; color: var(--faint); margin-bottom: 10px; }
.af-cap.win { color: var(--win); }
.af-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.af-stack > * + * { margin-top: 12px; }
.af-tlink { font: inherit; font-size: 12px; color: var(--brand-500); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* What to do — InsightsCard / InsightRow */
.af-wtd .af-cap { display: inline; margin: 0 0 0 4px; }
.af-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; padding: 10px 0 8px; }
.af-row + .af-row { border-top: 1px solid var(--line-soft); }
.af-row .af-ttl { font-weight: 600; }
.af-row p { margin: 1px 0; }
.af-row p.af-fix { color: var(--mute); }
.af-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.af-acts { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 7px; }
.af-acts button { font: inherit; font-size: 11.5px; font-weight: 500; padding: 4px 9px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--brand-500); cursor: not-allowed; opacity: 0.7; }
.af-acts button.o { border-color: var(--line); color: var(--ink); }
.af-right { display: flex; gap: 6px; align-self: flex-start; white-space: nowrap; }
.af-right span { font-size: 11.5px; color: var(--brand-500); padding: 3px 6px; }

/* Home — StatCard / SessionsChart / PageViewsBarChart / DataGrid / TreeView / country pie */
.af-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.af-stat .af-t { font-size: 12px; font-weight: 500; }
.af-stat .af-v { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 0 1px; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.af-stat > .af-i { color: var(--mute); margin-bottom: 4px; }
.af-stat .af-in { font-size: 10.5px; color: var(--faint); }
.af-stat svg.af-sp { display: block; width: 100%; height: 40px; margin-top: 8px; }
.af-bbtn { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; padding: 5px 10px; border-radius: var(--r-sm); background: var(--brand-500); color: #fff; font-size: 11.5px; font-weight: 600; }
.af-cw { display: flex; gap: 6px; margin-top: 8px; }
.af-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: var(--faint); text-align: right; padding: 0 0 12px; }
.af-chart { display: block; flex: 1; width: 100%; height: 150px; }
.af-leg { font-size: 11px; color: var(--mute); }
.af-leg i { display: inline-block; width: 12px; height: 2px; vertical-align: 3px; margin: 0 3px 0 8px; }
.af-leg i.sq { width: 8px; height: 8px; vertical-align: -1px; }
.af-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.af-tbl th { font-family: var(--mono); font-weight: 500; font-size: 10px; color: var(--mute); text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.af-tbl td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.af-tbl th:first-child, .af-tbl td:first-child { text-align: left; }
.af-tbl svg { width: 96px; height: 18px; display: block; margin-left: auto; }
.af-tfoot { display: flex; justify-content: flex-end; gap: 14px; padding: 8px 10px 4px; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.af-pages { display: grid; grid-template-columns: 3fr 1fr; gap: 12px; margin-top: 12px; }
.af-tree { list-style: none; margin: 8px 0 0; padding: 0 0 0 6px; font-size: 11.5px; }
.af-tree li { padding: 3px 0 3px 14px; position: relative; }
.af-tree li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.af-tree li.ws { padding-left: 0; font-weight: 500; }
.af-tree li.ws::before { display: none; }
.af-donut { display: block; width: 130px; height: 130px; margin: 8px auto; }
.af-cty { font-size: 11px; margin-top: 4px; }
.af-cty div { display: flex; justify-content: space-between; margin-top: 6px; }
.af-cty b { display: block; height: 4px; border-radius: 2px; background: var(--line-soft); margin-top: 3px; }
.af-cty b i { display: block; height: 100%; border-radius: 2px; background: var(--faint); }

/* Funnels — FunnelChart.jsx */
.af-leak { margin: 8px 0 12px; padding: 7px 11px; border-radius: var(--r); font-weight: 600; color: var(--leak); background: var(--leak-bg); border: 1px solid hsl(45, 90%, 65%); }
.af-fun { display: flex; gap: 8px; align-items: flex-end; overflow-x: auto; }
.af-step { flex: 1 1 0; min-width: 110px; }
.af-step .af-pct { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.af-step .af-nm { font-size: 10.5px; color: var(--mute); margin-bottom: 4px; }
.af-step .af-track { height: 128px; background: var(--paper); border-radius: var(--r); display: flex; align-items: flex-end; }
.af-step .af-fill { width: 100%; background: var(--brand-500); border-radius: var(--r); }
.af-step .af-n { font-size: 12px; font-weight: 600; margin-top: 4px; }
.af-step .af-s { font-size: 10.5px; color: var(--mute); }
.af-step.weak .af-s { color: var(--leak); }
.af-gap { align-self: center; text-align: center; min-width: 58px; font-size: 10.5px; color: var(--mute); }
.af-gap.weak { color: var(--leak); font-weight: 600; }

/* Digests — DigestsGrid.jsx */
.af-dig .af-dh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.af-dig .af-dh b { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.af-dig .af-w { font-size: 11px; color: var(--faint); margin-top: 6px; }

/* Tasks — TasksGrid / TicketCard */
.af-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.af-col { padding: 10px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line-soft); }
.af-col.win { background: var(--win-bg); border-color: hsl(120, 61%, 85%); }
.af-col h4 { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; font-size: 13px; font-weight: 600; }
.af-col h4::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.af-col.win h4::before { background: var(--win); }
.af-tk { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.af-tk .af-ttl { font-weight: 600; line-height: 1.35; margin: 6px 0; }
.af-tk .af-m { font-size: 10.5px; color: var(--faint); }
.af-tk .af-m::before { content: "●"; font-size: 7px; margin-right: 6px; color: var(--faint); vertical-align: 1px; }
.af-col.win .af-tk .af-m::before { color: var(--win); }

/* ---- below 900px: the app's AppNavbar + drawer ---- */
@media (max-width: 900px) {
  .af-appbar { display: flex; }
  .af-body { grid-template-columns: 1fr; }
  .af-side { display: none; position: absolute; top: 0; left: 0; bottom: 0; width: 240px; z-index: 3; max-height: none; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18); }
  .af.side-open .af-side { display: flex; }
  .af-head { display: none; }
  .af-main { height: 520px; }
  .af-stats, .af-grid2, .af-pages { grid-template-columns: 1fr; }
  .af-board { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .af { margin-top: 26px; }
  .af-row { grid-template-columns: 1fr; gap: 4px; }
  .af-right { align-self: flex-end; }
}

/* ---- controls that work: evidence rows, device toggle, working buttons ---- */
.af-ev { display: grid; grid-template-columns: 170px 1fr; gap: 2px 12px; margin: 8px 0 2px; font-size: 11px; }
.af-ev b { font-weight: 400; color: var(--faint); }
button.af-chip { font: inherit; font-family: var(--mono); font-size: 10px; font-weight: 600; cursor: pointer; }
button.af-bbtn, button.af-ibtn { font: inherit; font-size: 11.5px; font-weight: 600; border: 0; cursor: pointer; }
button.af-ibtn { border: 1px solid var(--line); }
button.af-bbtn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.75; }
.af-acts button.af-copy { cursor: pointer; opacity: 1; }
.af-acts button.af-copy:hover { background: var(--paper); }
a.af-obtn { text-decoration: none; }
a.af-obtn:hover { background: var(--paper); }