/* ===================================================================
   THE FLOW DASHBOARD — the new shell's layer (FLOW_DASHBOARD,
   docs/flow-dashboard-ui.md), on top of app.css (flow-mono's design
   system, copied in). From the prototype's app.css
   (docs/design/dashboard/, in this repo), scoped under .flow
   (the <body>), with the dialogs from flow-mono's site.css. Colours and
   sizes only from app.css's tokens. Nothing here loads from another
   origin: the fonts are app.css's, served by observe.
   =================================================================== */

.flow [hidden] { display: none !important; }

/* ---------- one type scale (the user, 13 Oct 2026): page title, section
   heading 22 px, card title 19 px, item title 15 px semibold, body ---------- */
.flow .pagehead h1 { font: 500 clamp(1.75rem, 2.6vw, 2.25rem)/1.15 var(--head); letter-spacing: -.02em; }
.flow .section-title { font: 500 1.375rem/1.25 var(--head); letter-spacing: -.01em; margin: 40px 0 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.flow .section-title:first-child { margin-top: 0; }
.flow section + section > .section-title:first-child { margin-top: 40px; }
.flow .section-title a:not(.btn) { font: 500 .8125rem/1 var(--font); color: var(--info); }
.flow .section-title .linkbtn { font: 500 .8125rem/1 var(--font); color: var(--info); text-decoration: none; }
.flow .section-title .count { font: 500 .875rem/1 var(--font); color: var(--ink-3); margin-left: 6px; }
.flow .card__title { font-size: 1.1875rem; letter-spacing: -.01em; }
.flow .card__title a { color: inherit; text-decoration: none; }
.flow .card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.flow .issue__title, .flow .itemtitle, .flow .agentrow b { font: 600 .9375rem/1.4 var(--font); letter-spacing: 0; }

/* ---------- the shell: the top bar, the rail slot, the page ---------- */
.flow .shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.flow .shell__frame { flex: 1; min-height: 0; display: flex; }
.flow .shell__rail { flex: none; width: 56px; position: relative; z-index: 50; }
.flow .shell__body { flex: 1; min-width: 0; }
.flow .phase { padding: 6px 20px; background: var(--brand-mist); color: var(--brand-sky-deep); font-size: var(--fs-xs); font-weight: 500; text-align: center; box-shadow: 0 1px 0 var(--line); }
.flow .apptop { gap: 8px; }
/* the path: workspace / agent */
.flow .ws-switch { gap: 6px; color: var(--ink-2); }
.flow .crumbsep { color: var(--ink-4); font-size: 1.125rem; margin: 0 -4px; }
.flow .menuwrap { position: relative; }
/* menus: the agent switcher and the account */
.flow .menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; width: 280px; padding: 8px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--lift); display: grid; gap: 2px; }
.flow .menu--left { left: 0; right: auto; width: 240px; }
.flow .menu__who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: .8125rem; color: var(--ink-3); }
.flow .menu__who b { display: block; color: var(--ink); font-weight: 600; font-size: .875rem; margin-top: 2px; overflow-wrap: anywhere; }
.flow .menu a, .flow .menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font: 500 .875rem/1 var(--font); color: var(--ink-2); cursor: pointer; text-align: left; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow .menu a:hover, .flow .menu button:hover { background: var(--hover); color: var(--ink); }
.flow .menu a[aria-current] { color: var(--ink); font-weight: 600; }
.flow .menu a svg { color: var(--ink-3); }
.flow .menu__rule { margin: 6px 0; }
.flow .menu__group { display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.flow .menu__label { padding: 4px 12px; font-size: .75rem; color: var(--ink-3); }
.flow .menu .menu__phone { display: none; }
@media (max-width: 860px) { .flow .menu .menu__phone { display: flex; } }
/* search (a placeholder for now), Docs, the account */
.flow .cmdk { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border: 0; border-radius: 999px; background: var(--tile); color: var(--ink-3); font: 500 .8125rem/1 var(--font); cursor: pointer; }
.flow .cmdk kbd { font: 500 .6875rem/1 var(--font); padding: 3px 6px; border-radius: 6px; background: var(--surface); box-shadow: var(--ring-soft); color: var(--ink-2); }
.flow .cmdk:hover { color: var(--ink); }
.flow .apptop__docs { text-decoration: none; }
.flow .acct-btn { background: var(--brand-lavender); color: var(--ink); font: 600 .8125rem/1 var(--font); }
.flow .acct-btn:hover { background: var(--brand-lavender); box-shadow: var(--ring); }

/* the rails: separators, and on wide screens open with their labels (round 1:
   testers could not find pages from icons alone) */
.flow .bot-rail__sep { flex: none; height: 1px; margin: 6px 4px; background: var(--line); }
.flow .bot-rail__item { text-decoration: none; }
.flow .rail-more { display: none; }
@media (min-width: 1280px) and (hover: hover) {
  .flow .shell__rail { width: 184px; }
  .flow .bot-rail { width: 184px; }
  .flow .bot-rail .bot-rail__label { opacity: 1; }
  .flow .bot-rail:hover { box-shadow: 1px 0 0 var(--line); }
}

/* phones: the bottom bar keeps the four daily places and More */
@media (max-width: 860px) {
  .flow .shell { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .flow .shell__rail { width: 0; }
  .flow .apptop { padding: 0 12px; gap: 6px; }
  .flow .cmdk span, .flow .cmdk kbd, .flow .apptop__docs { display: none; }
  .flow .cmdk { padding: 0 11px; }
  .flow .bot-rail .rail-secondary { display: none; }
  .flow .bot-rail .rail-more { display: flex; }
  .flow .bot-rail__sep { display: none; }
  .flow .switcher { max-width: 150px; padding: 0 6px; font-size: .875rem; }
}
@media (max-width: 560px) {
  .flow .apptop:has(.proj-crumb:not([hidden])) .ws-switch span { display: none; }
  .flow .crumbsep { margin: 0 -6px; }
  .flow .menu { position: fixed; left: 12px; right: 12px; top: calc(var(--app-h) - 4px); width: auto; }
}

/* ---------- dashboard v3 (menu B, 22 Oct 2026): the project's rail, its
   groups and connections with status dots, Switch project, the phone's More
   sheet. From the prototype's v2.css and dash.css (dashboard-api-path-v3).
   The dots' colours are the status colours below. ---------- */

/* ---------- status colours (docs/flow-dashboard-ui.md, "Status colours"): one family
   per meaning, each a mark colour (dots, bars, ticks; never small text), a soft tint and
   the text colour for that tint. app.css's palette has no red, so --bad is the one red
   (#b42318). Solid --bad with white text is the primary verdict (.v--wrong, .v--unsafe,
   .pf--fail); --bad-soft with --bad-ink is every secondary mention (.v--soft, .pf--soft,
   .tag--bad, .cpill--red, .inline-error, a failed tool call). Contrast, text on its
   background: white on --bad 6.6:1, --bad on white 6.6:1, --bad-ink on --bad-soft 7.4:1,
   --good-ink on --good-soft 5.3:1 (6.2:1 on white), --warn-ink on --warn-soft 5.9:1,
   --neutral-ink on --neutral-soft 6.4:1. The dashboard is light only. ---------- */
.flow {
  --bad: #b42318;
  --bad-soft: color-mix(in srgb, var(--bad) 10%, #fff);
  --bad-ink: #912018;
  --good: var(--ok);
  --good-soft: color-mix(in srgb, var(--brand-sage) 45%, #fff);
  --good-ink: color-mix(in srgb, var(--ok) 75%, var(--ink));
  --warn: #E0A21B;
  --warn-soft: color-mix(in srgb, var(--warn) 18%, #fff);
  --warn-ink: #7A5408;
  --neutral: rgba(28, 26, 23, 0.32);
  --neutral-soft: var(--tile);
  --neutral-ink: var(--ink-2);
  --st-green: var(--good); --st-yellow: var(--warn); --st-red: var(--bad); --st-none: var(--neutral);
}
.flow .sd { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st-none); }
.flow .sd--green { background: var(--st-green); }
.flow .sd--yellow { background: var(--st-yellow); }
.flow .sd--red { background: var(--st-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-red) 22%, transparent); }
.flow .sd--none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-none); }
.flow .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* the top bar: workspace / project (with its worst dot), search in the middle */
.flow .projcrumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 36px; padding: 0 10px; margin-left: -6px; border: 0; border-radius: 10px; background: none; font: 600 .9375rem/1 var(--font); color: var(--ink); white-space: nowrap; cursor: pointer; }
.flow .projcrumb > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.flow .projcrumb > svg { flex: none; color: var(--ink-3); }
.flow .projcrumb:hover, .flow .projcrumb[aria-expanded="true"] { background: var(--hover); }
/* the organization's name is its own menu (27 Oct 2026) */
.flow .orgcrumb[aria-expanded="true"] { background: var(--hover); }
.flow .orgcrumb > span { overflow: hidden; text-overflow: ellipsis; }
.flow .projmenu { left: 0; right: auto; }
.flow .projmenu .projpick { min-height: 40px; padding: 0 12px; }
/* the owner's Delete at a project row's end: over the link's right padding (no shift), shown on the row's hover or focus, always in the Tab order */
.flow .projrow { position: relative; }
.flow .projmenu .projrow .projpick { padding-right: 44px; }
.flow .menu .projrow__del { position: absolute; top: 6px; right: 6px; justify-content: center; gap: 0; width: 28px; height: 28px; padding: 0; border-radius: 8px; color: var(--ink-3); opacity: 0; }
.flow .projrow:hover .projrow__del, .flow .projrow:focus-within .projrow__del { opacity: 1; }
.flow .projrow:hover .projpick:not([aria-current]) { background: var(--hover); color: var(--ink); }
.flow .menu .projrow__del:hover { background: var(--bad-soft); color: var(--bad-ink); }
.flow .menu .projrow__del:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.flow .projcrumb__dot { display: inline-flex; }
.flow .projcrumb__dot:empty { display: none; }
.flow .topsearch { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
/* the rail: a scrolling list of groups, and a pinned foot */
.flow .proj-rail { gap: 0; padding-block: 8px; }
/* the phase note above the frame: the rail still ends at the window's bottom, so its foot shows */
@media (min-width: 861px) { .flow .shell:has(> .phase) .proj-rail { height: calc(100dvh - var(--app-h) - 30px); } }
.flow .proj-rail .bot-rail__item { height: 34px; }
.flow .proj-rail .rail-conn { height: 40px; }
.flow .rail-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; margin: 0 -8px; padding: 0 8px 6px; }
.flow .rail-scroll::-webkit-scrollbar { display: none; }
.flow .rail-grp { display: flex; flex-direction: column; gap: 1px; flex: none; }
.flow .rail-foot { flex: none; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px 0; margin: 0 -8px; box-shadow: 0 -1px 0 var(--line); }
.flow .rail-label { flex: none; display: flex; align-items: center; height: 22px; padding: 0 10px; margin-top: 8px; font: 500 .6875rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.flow .rail-label span { opacity: 0; transition: opacity .12s ease; }
.flow .bot-rail:has(:focus-visible) .rail-label span { opacity: 1; }
@media (hover: hover) { .flow .bot-rail:hover .rail-label span { opacity: 1; } }
.flow .conn-ic { position: relative; display: grid; place-items: center; flex: none; width: 20px; height: 20px; }
.flow .conn-ic .sd { position: absolute; right: -3px; top: -2px; box-shadow: 0 0 0 2px var(--bg); }
.flow .conn-ic .sd--none { box-shadow: inset 0 0 0 1.5px var(--st-none), 0 0 0 2px var(--bg); background: var(--bg); }
.flow .bot-rail__item[aria-current="page"] .conn-ic .sd { box-shadow: 0 0 0 2px var(--ink); }
.flow .conn-ic .hollow { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.flow .rail-conn .bot-rail__label { display: grid; gap: 2px; min-width: 0; line-height: 1.15; }
.flow .rail-conn .bot-rail__label small { font-size: .6875rem; font-weight: 500; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.flow .rail-conn[aria-current="page"] .bot-rail__label small { color: rgba(255,255,255,.7); }
.flow .rail-add, .flow .rail-add svg { color: var(--ink-3); }
.flow .rail-add[aria-current="page"], .flow .rail-add[aria-current="page"] svg { color: #fff; }
.flow .rail-off { cursor: default; opacity: .6; }
.flow .rail-off:hover { background: none; color: var(--ink-3); }
.flow .proj-rail .rail-off { height: auto; min-height: 40px; padding-block: 5px; }
.flow .rail-off .bot-rail__label small { white-space: normal; line-height: 1.2; }
.flow .rail-more .conn-ic .sd { right: -4px; top: -3px; }
@media (min-width: 1280px) and (hover: hover) {
  .flow .rail-label span { opacity: 1; }
  /* a quiet fade says the list goes on when the window is short */
  .flow .rail-scroll { -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent); }
}
/* Switch project */
.flow .projpicks { display: grid; gap: 4px; }
.flow .projpick { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.flow .projpick:hover { background: var(--hover); }
.flow .projpick[aria-current] { background: var(--sel); }
.flow .projpick b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow .projpick__dot { display: inline-flex; flex: none; }
/* the phone's More sheet: the rail's groups as lists */
.flow .dialog__foot:empty { display: none; }
.flow .dialog--sheet .dialog__body { gap: 4px; }
.flow .sheetgrp { display: grid; }
.flow .sheetlabel { padding: 10px 12px 4px; font: 500 .6875rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.flow .sheetlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.flow .sheetlist a, .flow .sheetlist button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: 500 .9375rem/1.3 var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.flow .sheetlist a:hover, .flow .sheetlist button:hover { background: var(--hover); }
.flow .sheetlist a[aria-current] { background: var(--sel); font-weight: 600; }
.flow .sheetlist svg { color: var(--ink-3); flex: none; }
.flow .sheetlist small, .flow .sheetoff small { display: block; color: var(--ink-3); font-size: .75rem; font-weight: 500; }
.flow .sheetlist > li > span:last-child, .flow .sheetlist a > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.flow .sheetlist--foot { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 6px; }
.flow .sheetoff { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--ink-3); opacity: .6; }
/* Home: a line per red connection, and number tiles that are links */
.flow .redlines { margin-bottom: 16px; }
.flow .redlines:empty { display: none; }
.flow .redline { align-items: baseline; gap: 10px; }
.flow a.stat--link { color: inherit; text-decoration: none; }
.flow a.stat--link:hover { box-shadow: var(--ring); }
/* More from Flow: a prompt wraps (it is prose), and a row's second line */
.flow pre.code.prompt { white-space: pre-wrap; overflow-wrap: anywhere; }
.flow .morelink__sub { display: block; font-weight: 400; }
/* a bare page (the first sign-in's picker): the top bar only */
.flow .shell--bare .shell__rail { display: none; }
@media (max-width: 860px) {
  .flow .shell--bare { padding-bottom: 0; }
  .flow .topsearch { flex: 0 1 auto; justify-content: flex-end; }
  .flow .projcrumb { font-size: .875rem; max-width: 160px; }
  /* the bottom bar: Home · Chats · Insights · More; the rest is in the sheet */
  .flow .rail-scroll, .flow .rail-foot, .flow .rail-grp { display: contents; }
  .flow .proj-rail .bot-rail__item { height: 50px; }
  .flow .proj-rail .bot-rail__item:not(.rail-tab):not(.rail-more), .flow .proj-rail .rail-label { display: none !important; }
}

/* ---------- page pieces ---------- */
.flow .appmain { max-width: 1200px; }
.flow .narrow { max-width: 760px; }
.flow .gap-top { margin-top: 16px; }
.flow .lead-note { margin: -8px 0 16px; }
.flow .muted { color: var(--ink-3); }
.flow .stack-4 { display: grid; gap: 4px; }
.flow .stack-8 { display: grid; gap: 8px; }
.flow .stack-12 { display: grid; gap: 12px; }
.flow .stack-16 { display: grid; gap: 16px; }
.flow .split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .flow .split { grid-template-columns: minmax(0, 1fr); } }
.flow .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.flow .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8125rem; color: var(--ink-3); margin-bottom: 10px; }
.flow .crumbs a { color: var(--ink-3); text-decoration: none; }
.flow .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.flow .subnav { margin: -8px 0 24px; }
.flow .loading { padding: 24px 20px; color: var(--ink-3); font-size: var(--fs-sm); }
.flow .appmain.loading { padding: 48px 24px; }
.flow .empty { display: grid; justify-items: center; gap: 10px; padding: 40px 24px; text-align: center; color: var(--ink-2); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--ring-soft); }
.flow .empty b { font: 500 1.0625rem/1.3 var(--head); color: var(--ink); }
.flow .card__head--flush { margin: 0; padding-bottom: 4px; }
.flow .card__head--tight { margin-bottom: 8px; }
.flow .card__empty { padding: 16px 24px 22px; color: var(--ink-3); font-size: var(--fs-sm); }
.flow .inline-error { color: var(--bad-ink); background: var(--bad-soft); border-radius: 8px; padding: 6px 10px; font-size: var(--fs-sm); }
.flow .tags-row { display: flex; flex-wrap: wrap; gap: 4px; }
.flow .note .tags-row { margin-top: 6px; }
.flow .tbl tbody tr.row-link { cursor: pointer; }
.flow .tbl td .tag { height: 20px; padding: 0 8px; font-size: .6875rem; }
.flow .more { display: flex; justify-content: center; padding: 16px 0 0; }
/* Conversations and Home's Recent conversations (30 Oct 2026): Person | Last message | counts | Replies */
.flow .convtbl { table-layout: fixed; }
.flow .convtbl th, .flow .convtbl td { padding: 14px 16px; }
.flow .convtbl th { padding-top: 12px; padding-bottom: 12px; }
.flow .convtbl .c-person { width: 27%; }
.flow .convtbl .c-messages { width: 10%; }
.flow .convtbl .c-firstreply { width: 11%; }
.flow .convtbl .c-replies { width: 13%; }
/* the founders' Annoyance column (4 Nov 2026): the Annoyed mark, its cause under it */
.flow .convtbl .c-annoyance { width: 15%; }
.flow .cannoy__cause { margin-top: 4px; font-size: .75rem; line-height: 18px; color: var(--ink-2); }
.flow .cannoy-filter__n { margin-left: 2px; color: var(--ink-3); }
.flow .conv-span { gap: 2px; padding-right: 4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.flow .conv-span__x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; color: var(--ink-3); }
.flow .conv-span__x:hover { background: var(--hover); color: var(--ink); }
.flow .chip--on .cannoy-filter__n { color: inherit; opacity: .72; }
.flow .convtbl--short .c-person { width: 32%; }
.flow .cperson { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.flow .cperson__chan { display: inline-flex; flex: none; gap: 2px; height: 20px; align-items: center; }
.flow .cperson__body { min-width: 0; }
.flow .cperson__line { display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; line-height: 20px; }
.flow .cperson__name { font-weight: 600; color: var(--ink); }
.flow .cperson__who { font-weight: 600; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.flow .cperson__name + .cperson__who { font-weight: 400; color: var(--ink-2); }
.flow .cperson__who:hover { text-decoration: underline; text-underline-offset: 3px; }
.flow .linkbtn.cperson__show { font-size: .75rem; line-height: 20px; text-decoration: none; }
.flow .linkbtn.cperson__show:hover, .flow .linkbtn.cperson__show:focus-visible { text-decoration: underline; }
.flow .cperson__when, .flow .clast__sub { margin-top: 2px; font-size: .75rem; line-height: 18px; color: var(--ink-3); }
.flow .cperson__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.flow .clast { min-width: 0; }
.flow .clast__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 20px; color: var(--ink-2); }
.flow .clast__from { color: var(--ink-3); }
.flow .convtbl .c-unit { display: none; }
@media (max-width: 640px) {
  .flow .convtbl-wrap { overflow: visible; }
  .flow .convtbl, .flow .convtbl tbody { display: block; }
  .flow .convtbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .flow .convtbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .flow .convtbl tr:last-child { border-bottom: 0; }
  .flow .convtbl tbody tr:hover td { background: none; }
  .flow .convtbl tbody td, .flow .convtbl tbody td.c-person, .flow .convtbl tbody td.c-messages, .flow .convtbl tbody td.c-firstreply, .flow .convtbl tbody td.c-replies, .flow .convtbl tbody td.c-annoyance { display: block; width: auto; padding: 0; border: 0; min-width: 0; text-align: left; }
  .flow .convtbl tbody td.c-person { grid-column: 1; grid-row: 1; }
  .flow .convtbl tbody td.c-replies, .flow .convtbl tbody td.c-annoyance { grid-column: 2; grid-row: 1; text-align: right; }
  .flow .convtbl tbody td.c-annoyance:empty { display: none; }
  .flow .convtbl tbody td.c-lastmessage { grid-column: 1 / -1; grid-row: 2; padding-left: 28px; }
  .flow .convtbl tbody td.c-messages, .flow .convtbl tbody td.c-firstreply { grid-row: 3; font-size: .75rem; line-height: 18px; color: var(--ink-3); }
  .flow .convtbl tbody td.c-messages { grid-column: 1; padding-left: 28px; }
  .flow .convtbl tbody td.c-firstreply { grid-column: 2; text-align: right; }
  .flow .convtbl .c-unit { display: inline; }
}
.flow .stagingline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 20px; color: var(--ink); font-size: .875rem; }
.flow .stat__v { overflow-wrap: anywhere; }

/* the honest "coming next" state: what the page will hold, never sample data */
.flow .soon { display: grid; justify-items: start; gap: 10px; padding: 28px 28px 30px; max-width: 760px; }
.flow .soon__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tile); color: var(--ink-2); }
.flow .soon__title { font: 500 1.1875rem/1.3 var(--head); letter-spacing: -.01em; }
.flow .soon__what { color: var(--ink-2); max-width: 62ch; }
.flow .soon__more { display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--ink-3); }

/* verdict labels: one shape, told apart by words and the status colours. Solid red is
   the verdict on the reply in front of you; .v--soft is the same verdict mentioned in a
   list (an issue's row). Unsafe is the deeper red. */
.flow .v { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.flow .v--good { background: var(--good-soft); color: var(--good-ink); }
.flow .v--wrong { background: var(--bad); color: #fff; }
.flow .v--unhelpful { background: var(--warn-soft); color: var(--warn-ink); }
.flow .v--unsafe { background: var(--bad-ink); color: #fff; }
.flow .v--pending { background: var(--neutral-soft); color: var(--neutral-ink); }
.flow .v--soft.v--wrong, .flow .v--soft.v--unsafe { background: var(--bad-soft); color: var(--bad-ink); }

/* issues */
.flow .issue { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 16px 24px; align-items: start; }
.flow .inspector__body > .btn, .flow .stack-12 > .btn { justify-self: start; }
.flow .issue + .issue { border-top: 1px solid var(--line); }
.flow .issue__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px; font-size: .8125rem; color: var(--ink-3); }
.flow .issue--full { padding: 20px 22px; gap: 12px 20px; }
.flow .issue__evidence { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-sm); }
.flow .issue__label { font: 500 .75rem/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.flow .issue__fix { grid-column: 1 / -1; display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--brand-paper); box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem; color: var(--ink-2); }
.flow .issue__fix b { color: var(--ink); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.flow .issue__fixtext { color: var(--ink); white-space: pre-wrap; }
.flow .issue__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.flow .issue .inline-error { grid-column: 1 / -1; }
.flow .issue__trend { display: grid; justify-items: end; gap: 4px; }
.flow .issue__trend .spark { width: 120px; height: 28px; }
.flow .issue__trend .spark > i { background: color-mix(in srgb, var(--ink) 70%, #fff); }

/* one conversation: the transcript and the inspector */
.flow .convmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--fs-sm); }
.flow .convmeta .mono { color: var(--ink-3); font-size: .75rem; }
.flow .convo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .flow .convo { grid-template-columns: minmax(0, 1fr); } }
.flow .transcript { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.flow .turn { display: flex; flex-direction: column; gap: 6px; }
.flow .turn--agent { align-items: flex-start; }
.flow .turn--person { align-items: flex-end; }
.flow .turn .msg { max-width: min(86%, 560px); }
.flow .msg--person { background: var(--brand-sage); border-bottom-right-radius: 6px; }
.flow .msg--agent { background: var(--surface); box-shadow: var(--ring-soft); border-bottom-left-radius: 6px; }
.flow button.msg { display: grid; gap: 6px; border: 0; text-align: left; cursor: pointer; font: inherit; font-size: .9375rem; color: inherit; }
.flow button.msg:hover { box-shadow: var(--ring); }
.flow button.msg[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.flow .turn--focus button.msg { box-shadow: 0 0 0 3px var(--brand-sky-deep); }
.flow .turn--focus { scroll-margin-top: calc(var(--app-h) + 16px); }
.flow .msg__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.flow .msg__text mark { background: var(--bad-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.flow .msg__gone { font-style: italic; color: var(--ink-3); }
.flow .msg__none { color: var(--ink-3); }
.flow .msg__media { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.flow .turn__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .75rem; color: var(--ink-3); }
.flow .daysep { align-self: center; font-size: .75rem; color: var(--ink-3); padding: 4px 10px; border-radius: 999px; background: var(--tile); }
/* the conversation's chat view (flow/chatview.ts): each conversation as its chat app shows it.
   The bubbles, their tails, ticks and separators use the apps' own colours (as the test run's
   Phone view does, not the palette), in the dashboard's type; everything under and beside a
   bubble (grade chips, the tools indicator and its popover, timing) is the dashboard's own.
   One grid: rows run the card's full width (so a selected reply's band does), bubbles and what
   is under them share one edge, 8px in from the card's padding to leave room for the tail. */
.flow .cv {
  --cv-bg: var(--surface); --cv-in: var(--bg); --cv-in-ink: var(--ink); --cv-out: color-mix(in srgb, var(--brand-sage) 50%, #fff); --cv-out-ink: var(--ink);
  --cv-in-ring: inset 0 0 0 1px var(--line); --cv-out-ring: none; --cv-meta: var(--ink-3); --cv-out-meta: var(--ink-3); --cv-read: var(--brand-sky-deep);
  --cv-link: var(--info); --cv-out-link: var(--info); --cv-btn: var(--info); --cv-line: var(--line); --cv-radius: 16px;
  --cv-sel: var(--hover); --cv-hover: color-mix(in srgb, var(--hover) 60%, transparent); --cv-focus: color-mix(in srgb, var(--brand-sky) 28%, transparent);
  --cv-under: var(--ink-3); --cv-edge: 8px;
}
.flow .transcript.cv { gap: 0; padding: 12px 20px 20px; background: var(--cv-bg); }
.flow .cv.cv--whatsapp {
  --cv-bg: #efeae2; --cv-in: #fff; --cv-in-ink: #111b21; --cv-out: #d9fdd3; --cv-out-ink: #111b21; --cv-in-ring: 0 1px .5px rgba(11, 20, 26, .13); --cv-out-ring: var(--cv-in-ring);
  --cv-meta: #667781; --cv-out-meta: #667781; --cv-read: #53bdeb; --cv-link: #027eb5; --cv-out-link: #027eb5; --cv-btn: #027eb5; --cv-line: rgba(11, 20, 26, .1); --cv-radius: 8px;
  --cv-sel: rgba(0, 168, 132, .12); --cv-hover: rgba(11, 20, 26, .035); --cv-under: var(--ink-2);
}
.flow .cv.cv--imessage {
  --cv-bg: #fff; --cv-in: #e9e9eb; --cv-in-ink: #000; --cv-out: #0a84ff; --cv-out-ink: #fff; --cv-in-ring: none; --cv-out-ring: none;
  --cv-meta: #8e8e93; --cv-out-meta: #8e8e93; --cv-link: #0a84ff; --cv-out-link: #fff; --cv-btn: #0a84ff; --cv-line: rgba(0, 0, 0, .1); --cv-radius: 18px;
  --cv-sel: rgba(10, 132, 255, .09); --cv-hover: rgba(0, 0, 0, .025);
}
.flow .cv.cv--telegram {
  --cv-bg: #d6e3ec; --cv-in: #fff; --cv-in-ink: #000; --cv-out: #effdde; --cv-out-ink: #000; --cv-in-ring: 0 1px 1px rgba(0, 0, 0, .1); --cv-out-ring: var(--cv-in-ring);
  --cv-meta: #8b9aa5; --cv-out-meta: #4fae4e; --cv-read: #4fae4e; --cv-link: #168acd; --cv-out-link: #168acd; --cv-btn: #fff; --cv-line: rgba(0, 0, 0, .08); --cv-radius: 12px;
  --cv-sel: rgba(36, 129, 204, .14); --cv-hover: rgba(0, 0, 0, .03); --cv-under: var(--ink-2);
}
.flow .cv-hint { margin: 4px 0 8px; }

/* separators: a day, a version change, a change of channel */
.flow .cv-sep { display: flex; justify-content: center; margin: 12px 0 8px; }
.flow .cv-sep > span { padding: 4px 10px; border-radius: var(--r-pill); background: var(--tile); color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.4; }
.flow .cv--whatsapp .cv-sep > span { padding: 5px 12px; border-radius: 8px; background: #fff; color: #54656f; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.flow .cv--telegram .cv-sep > span { background: rgba(60, 90, 112, .42); color: #fff; font-weight: 500; }
.flow .cv--imessage .cv-sep > span { padding: 0; background: none; color: #8e8e93; }
.flow .cv--imessage .cv-sep b { font-weight: 600; }

/* rows: the full width, so a selected or focused reply's band does too */
.flow .cv-row { display: flex; margin: 0 -20px; padding: 1px calc(20px + var(--cv-edge)); scroll-margin-top: calc(var(--app-h) + 16px); scroll-margin-bottom: 16px; }
.flow .cv-row.is-first { margin-top: 8px; }
.flow .cv-row--out { justify-content: flex-end; }
.flow .cv-row--out:hover { background: var(--cv-hover); }
.flow .cv-row[data-selected="true"] { background: var(--cv-sel); }
.flow .cv-row.is-focus { background: var(--cv-focus); }
.flow .cv-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: min(76%, 560px); }
.flow .cv-row--out .cv-col { align-items: flex-end; }
.flow .cv-line { display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; min-width: 0; max-width: 100%; }

/* bubbles */
.flow .cv-bubble {
  position: relative; isolation: isolate; width: fit-content; max-width: 100%; min-width: 0; padding: 6px 9px 7px;
  border-radius: var(--cv-radius); background: var(--cv-in); color: var(--cv-in-ink); box-shadow: var(--cv-in-ring);
  font-size: .9375rem; line-height: 1.4; text-align: left;
}
.flow .cv-row--out .cv-bubble { background: var(--cv-out); color: var(--cv-out-ink); box-shadow: var(--cv-out-ring); cursor: pointer; }
.flow .cv-row--out .cv-bubble:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.flow .cv--imessage .cv-bubble { padding: 7px 12px; }
.flow .cv--plain .cv-bubble { padding: 8px 12px; }
.flow .cv-row.is-reaction .cv-bubble { padding: 2px 8px; font-size: 1.375rem; line-height: 1.3; }
.flow .cv-body { position: relative; min-width: 0; }
.flow .cv-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.flow .cv-text mark { background: var(--warn-bg); color: var(--ink); border-radius: 3px; padding: 0 1px; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ink) 30%, transparent); }
.flow .cv-text b { font-weight: 600; }
.flow .cv-code, .flow .cv-pre { font-family: var(--mono); font-size: .8125rem; }
.flow .cv-code { padding: 1px 4px; border-radius: 4px; background: rgba(11, 20, 26, .07); }
.flow .cv-pre { display: block; margin: 2px 0; white-space: pre-wrap; }
.flow .cv-spoiler { border-radius: 3px; background: rgba(11, 20, 26, .1); }
.flow .cv-link { color: var(--cv-link); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.flow .cv-row--out .cv-link { color: var(--cv-out-link); }
.flow .cv-note { font-style: italic; color: var(--cv-meta); }
.flow .cv-row--out .cv-note { color: inherit; opacity: .75; }
.flow .cv-header { display: block; margin-bottom: 2px; font-weight: 600; overflow-wrap: anywhere; }
.flow .cv-footer { display: block; margin-top: 6px; color: var(--cv-meta); font-size: .8125rem; overflow-wrap: anywhere; }

/* WhatsApp and Telegram write the time (and ticks) at the bubble's bottom right, beside the
   text's last line when it fits: a spacer after the text keeps room for it */
.flow .cv-meta { position: absolute; right: -2px; bottom: -3px; display: inline-flex; align-items: center; gap: 3px; color: var(--cv-meta); font-size: 11px; line-height: 15px; white-space: nowrap; }
.flow .cv-row--out .cv-meta { color: var(--cv-out-meta); }
.flow .cv-text::after, .flow .cv-note::after { content: ""; display: inline-block; width: 0; }
.flow .cv--whatsapp .cv-text::after, .flow .cv--telegram .cv-text::after,
.flow .cv--whatsapp .cv-note::after, .flow .cv--telegram .cv-note::after { width: 60px; }
.flow .cv--whatsapp .cv-row--out .cv-text::after, .flow .cv--telegram .cv-row--out .cv-text::after,
.flow .cv--whatsapp .cv-row--out .cv-note::after, .flow .cv--telegram .cv-row--out .cv-note::after { width: 78px; }
.flow .cv-body:not(:has(.cv-text)):has(.cv-meta) { min-height: 15px; min-width: 64px; }

/* A WhatsApp template send (flow-notes template-bubbles-mockup, 31 Oct 2026): a tag above the
   bubble, "Template · name" (outside it: the bubble is what the person saw), "Template" before
   the time, and the values it was sent with marked as the Templates page's preview marks them
   (ph-fill a filled value, ph-chip an unrecorded one). */
.flow .cv-tpl {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .72); color: #3b4a54; box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  font: 600 .6875rem/1 var(--font); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.flow .cv-tpl svg { flex: none; }
.flow .cv-row--out .cv-tpl { margin-right: 0; }
.flow .cv-tpl__sep { color: #8696a0; font-weight: 400; }
.flow .cv-tpl__name { font: 500 .6875rem/1 var(--mono); color: #667781; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.flow .cv-meta__tpl { margin-right: 3px; font-style: italic; }
.flow .cv-text .ph-fill { cursor: help; background: rgba(0, 128, 105, .09); box-shadow: 0 0 0 1px rgba(0, 128, 105, .12); }
.flow .cv-text .ph-chip { font-weight: 500; color: #667781; background: rgba(11, 20, 26, .06); }
/* Room for the longer footer beside the text's last line. */
.flow .cv--whatsapp .cv-row--out .cv-bubble--tpl .cv-text::after { width: 136px; }
.flow .cv-ticks { display: inline-flex; color: var(--cv-out-meta); }
.flow .cv-ticks.is-read { color: var(--cv-read); }
.flow .cv-ticks svg { display: block; }
.flow .cv-ticks--failed { width: 14px; height: 14px; place-items: center; justify-content: center; border-radius: 50%; background: var(--bad); color: #fff; font: 700 10px/14px var(--font); }

/* tails: WhatsApp's on the first bubble of a run, at the top; iMessage's and Telegram's on the last, at the bottom */
.flow .cv--whatsapp .cv-row.is-first .cv-bubble::before { content: ""; position: absolute; z-index: -1; top: 0; width: 8px; height: 13px; background: inherit; }
.flow .cv--whatsapp .cv-row--in.is-first .cv-bubble { border-top-left-radius: 0; }
.flow .cv--whatsapp .cv-row--in.is-first .cv-bubble::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.flow .cv--whatsapp .cv-row--out.is-first .cv-bubble { border-top-right-radius: 0; }
.flow .cv--whatsapp .cv-row--out.is-first .cv-bubble::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.flow .cv--imessage .cv-row.is-last .cv-bubble::before,
.flow .cv--telegram .cv-row.is-last .cv-bubble::before { content: ""; position: absolute; z-index: -1; bottom: 0; width: 15px; height: 18px; background: inherit; }
.flow .cv--imessage .cv-row--out.is-last .cv-bubble { border-bottom-right-radius: 8px; }
.flow .cv--imessage .cv-row--out.is-last .cv-bubble::before { right: -6px; clip-path: path("M0 0H9C9 8 10 14 15 18C9 18.6 5 17.4 2.5 15.5L0 18Z"); }
.flow .cv--imessage .cv-row--in.is-last .cv-bubble { border-bottom-left-radius: 8px; }
.flow .cv--imessage .cv-row--in.is-last .cv-bubble::before { left: -6px; clip-path: path("M15 0H6C6 8 5 14 0 18C6 18.6 10 17.4 12.5 15.5L15 18Z"); }
.flow .cv--telegram .cv-row--out.is-last .cv-bubble { border-bottom-right-radius: 0; }
.flow .cv--telegram .cv-row--out.is-last .cv-bubble::before { right: -7px; width: 12px; height: 14px; clip-path: path("M0 0H5C5 7 7 11 12 14H0Z"); }
.flow .cv--telegram .cv-row--in.is-last .cv-bubble { border-bottom-left-radius: 0; }
.flow .cv--telegram .cv-row--in.is-last .cv-bubble::before { left: -7px; width: 12px; height: 14px; clip-path: path("M12 0H7C7 7 5 11 0 14H12Z"); }

/* media: observe keeps a file's kind and size, never the file: a tile says what it was */
.flow .cv-tile { display: grid; place-items: center; align-content: center; gap: 6px; width: 100%; min-width: min(240px, 100%); aspect-ratio: 4 / 3; margin: 0 0 6px; border-radius: calc(var(--cv-radius) - 3px); color: var(--cv-meta); font-size: var(--fs-xs); text-align: center;
  background: repeating-linear-gradient(135deg, rgba(11, 20, 26, .05) 0 8px, rgba(11, 20, 26, .09) 8px 16px); }
.flow .cv-row--out .cv-tile { color: inherit; }
.flow .cv-tile--header { aspect-ratio: 1.91 / 1; }
.flow .cv-file { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 8px 10px; border-radius: 6px; background: rgba(11, 20, 26, .05); font-size: .8125rem; }
.flow .cv--imessage .cv-row--out .cv-file { background: rgba(255, 255, 255, .18); }

/* media (pictures-carousels mockup, 5 Nov 2026): where the API sends a file's observe path, the
   file itself in Flow's own players, one family drawn in each app's look; <audio>/<video> sit
   underneath with controls off, so nothing native shows. Without a path: the tile above. */
.flow .cv { --mx-accent: var(--brand-sky-deep); --mx-on-accent: #fff; --mx-bar: color-mix(in srgb, var(--ink) 22%, transparent); --mx-soft: color-mix(in srgb, var(--brand-mist) 70%, #fff); }
.flow .cv--whatsapp { --mx-accent: #00a884; --mx-bar: rgba(11, 20, 26, .2); }
.flow .cv--telegram .cv-row--in { --mx-accent: #3a9fe0; --mx-bar: rgba(58, 159, 224, .32); }
.flow .cv--telegram .cv-row--out { --mx-accent: #5fba5d; --mx-bar: rgba(95, 186, 93, .38); }
.flow .cv--imessage .cv-row--in { --mx-accent: #000; --mx-on-accent: #000; --mx-bar: rgba(0, 0, 0, .28); }
.flow .cv--imessage .cv-row--out { --mx-accent: #fff; --mx-on-accent: #fff; --mx-bar: rgba(255, 255, 255, .45); }

/* photo: at most 280 × 320, the file's own shape; today's tile holds its place until it loads */
.flow .mx-photo { display: block; width: fit-content; max-width: 100%; margin: 0 0 6px; padding: 0; border: 0; border-radius: calc(var(--cv-radius) - 3px); overflow: hidden; background: none; cursor: zoom-in; }
.flow .mx-photo img { display: block; max-width: min(280px, calc(100vw - 112px)); max-height: 320px; width: auto; height: auto; }
.flow .mx-photo.is-loading { width: 240px; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, rgba(11, 20, 26, .05) 0 8px, rgba(11, 20, 26, .09) 8px 16px); }
.flow .mx-photo.is-loading img { width: 100%; height: 100%; opacity: 0; }
.flow .mx-photo:focus-visible, .flow .mx-cardbtn:focus-visible, .flow .mx-file:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
/* a carousel card's picture fills the card's top, as the app shows it */
.flow .mx-cardbtn { display: block; width: 100%; padding: 0; border: 0; background: var(--mx-soft); cursor: zoom-in; }
.flow .cv-card .mx-cardimg { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* sticker: small, with no bubble, as the apps show it */
.flow .mx-sticker { display: block; width: 120px; height: 120px; object-fit: contain; }
.flow .cv-bubble:has(> .mx-sticker):not(:has(.cv-text)) { padding: 0; background: none; box-shadow: none; }
.flow .cv-bubble:has(> .mx-sticker):not(:has(.cv-text))::before { display: none; }
.flow .cv-bubble:has(> .mx-sticker):not(:has(.cv-text)) .cv-meta { position: static; display: inline-flex; margin-top: 2px; padding: 0 6px; border-radius: var(--r-pill); background: var(--cv-in); }
.flow .cv-bubble:has(> .mx-sticker):not(:has(.cv-text)) .cv-body { min-height: 0; min-width: 0; }
/* the bubble's time sits on a media-only bubble's foot, under a pin card or contact card */
.flow .cv-body:has(> :is(.mx-place, .mx-contact) + .cv-meta) { padding-bottom: 12px; }

/* voice note and audio: ▶ · waveform · length (elapsed while playing) · speed */
.flow .mx-voice { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 232px; max-width: 100%; margin: 0 0 4px; }
.flow .mx-vplay { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--mx-accent); color: var(--mx-on-accent); cursor: pointer; }
.flow .mx-vplay svg { width: 16px; height: 16px; }
.flow .mx-vplay .mx-i-pause, .flow .mx-fbtn .mx-i-play, .flow .is-playing .mx-vplay .mx-i-play { display: none; }
.flow .is-playing .mx-vplay .mx-i-pause, .flow .mx-vid:not(.is-playing) .mx-fbtn .mx-i-play { display: block; }
.flow .mx-vid:not(.is-playing) .mx-fbtn .mx-i-pause { display: none; }
.flow .mx-vplay:focus-visible, .flow .mx-speed:focus-visible, .flow .mx-vbig:focus-visible, .flow .mx-fbtn:focus-visible, .flow .mx-scrub:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
/* iMessage: the glyph alone, no disc, as Messages draws it */
.flow .cv--imessage .mx-voice .mx-vplay { width: 24px; height: 24px; background: none; }
.flow .cv--imessage .mx-voice { grid-template-columns: 24px minmax(0, 1fr) auto; }
.flow .mx-wave { display: flex; align-items: center; gap: 2px; height: 28px; min-width: 0; overflow: hidden; cursor: pointer; }
.flow .mx-wave i { flex: 1 0 2px; max-width: 3px; border-radius: 2px; background: var(--mx-bar); }
.flow .mx-wave i.is-on { background: var(--mx-accent); }
.flow .mx-wave i.h1 { height: 12%; } .flow .mx-wave i.h2 { height: 24%; } .flow .mx-wave i.h3 { height: 36%; } .flow .mx-wave i.h4 { height: 48%; }
.flow .mx-wave i.h5 { height: 60%; } .flow .mx-wave i.h6 { height: 72%; } .flow .mx-wave i.h7 { height: 86%; } .flow .mx-wave i.h8 { height: 100%; }
.flow .mx-vside { display: grid; justify-items: end; gap: 2px; min-width: 34px; }
.flow .mx-vtime { min-height: 1em; color: var(--cv-meta); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.flow .cv--imessage .cv-row--out .mx-vtime { color: rgba(255, 255, 255, .85); }
.flow .mx-speed { visibility: hidden; height: 18px; padding: 0 6px; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--mx-accent) 16%, transparent); color: var(--cv-meta); font: 600 .6875rem/18px var(--font); cursor: pointer; }
.flow .cv--imessage .cv-row--out .mx-speed { background: rgba(255, 255, 255, .22); color: #fff; }
.flow .mx-voice:hover .mx-speed, .flow .mx-voice:focus-within .mx-speed, .flow .mx-voice.is-playing .mx-speed { visibility: visible; }
.flow .mx-voice audio { display: none; }
/* a voice note's transcript: a quiet link under the player */
.flow .mx-vwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; width: 232px; max-width: 100%; }
.flow .mx-tr { margin: 0 0 2px; font-size: .8125rem; }
.flow .mx-tr > summary { width: fit-content; list-style: none; color: var(--cv-link); cursor: pointer; }
.flow .mx-tr > summary::-webkit-details-marker { display: none; }
.flow .mx-tr > p { margin: 4px 0 0; }
.flow .cv-row--out .mx-tr > summary { color: var(--cv-out-link); }

/* video: the soft palette tile (never black), a ▶ on a translucent disc, the length bottom left */
.flow .mx-vid { position: relative; display: block; width: 280px; max-width: 100%; aspect-ratio: 16 / 9; margin: 0 0 6px; border-radius: calc(var(--cv-radius) - 3px); overflow: hidden; background: var(--mx-soft); }
.flow .mx-vid video { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; background: var(--mx-soft); }
.flow .mx-vid.is-started video { display: block; }
.flow .mx-vbig { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.flow .mx-vbig span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 32%, transparent); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.flow .mx-vbig svg { width: 20px; height: 20px; margin-left: 3px; }
.flow .mx-vdur { position: absolute; left: 8px; bottom: 8px; padding: 1px 7px; border-radius: var(--r-pill); background: rgba(28, 26, 23, .42); color: #fff; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
/* once played: inline, one thin bar of play/pause · scrub line · time; full screen only on hover or focus */
.flow .mx-vbar { position: absolute; left: 6px; right: 6px; bottom: 6px; display: none; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--r-pill); background: rgba(28, 26, 23, .42); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.flow .mx-vid.is-started .mx-vbar { display: grid; }
.flow .mx-vid.is-started .mx-vbig, .flow .mx-vid.is-started .mx-vdur { display: none; }
.flow .mx-fbtn { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.flow .mx-fbtn svg { width: 14px; height: 14px; }
.flow .mx-fbtn--full { visibility: hidden; }
.flow .mx-vid:hover .mx-fbtn--full, .flow .mx-vid:focus-within .mx-fbtn--full, .flow .mx-vid:fullscreen .mx-fbtn--full { visibility: visible; }
.flow .mx-scrub { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; height: 3px; margin: 0; border-radius: 2px; background: linear-gradient(#fff, #fff) 0 0 / var(--p, 0%) 100% no-repeat, rgba(255, 255, 255, .35); cursor: pointer; }
.flow .mx-scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 10px; border: 0; border-radius: 50%; background: #fff; opacity: 0; }
.flow .mx-scrub::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #fff; opacity: 0; }
.flow .mx-scrub::-moz-range-track { background: transparent; }
.flow .mx-vid:hover .mx-scrub::-webkit-slider-thumb, .flow .mx-scrub:focus-visible::-webkit-slider-thumb { opacity: 1; }
.flow .mx-vid:hover .mx-scrub::-moz-range-thumb, .flow .mx-scrub:focus-visible::-moz-range-thumb { opacity: 1; }
.flow .mx-vid:fullscreen { width: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; background: #000; }
.flow .mx-vid:fullscreen video { object-fit: contain; background: #000; }

/* document: the same round button (it downloads), then the name, kind and size */
.flow .mx-file { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; width: 260px; max-width: 100%; margin: 0 0 6px; color: inherit; text-decoration: none; }
.flow .mx-file .mx-vplay svg { width: 18px; height: 18px; }
.flow .cv--imessage .mx-file .mx-vplay { background: color-mix(in srgb, var(--mx-accent) 14%, transparent); color: var(--mx-accent); }
.flow .mx-file__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 500; }
.flow .mx-file__sub { display: block; color: var(--cv-meta); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.flow .cv--imessage .cv-row--out .mx-file__sub { color: rgba(255, 255, 255, .85); }

/* location: a pin card, no map tiles */
.flow .mx-place { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; width: 280px; max-width: 100%; margin: 0 0 6px; padding: 10px; border-radius: 6px; background: rgba(11, 20, 26, .05); }
.flow .mx-place__pin { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--info); box-shadow: inset 0 0 0 1px var(--line); }
.flow .mx-place__name { display: block; font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.flow .mx-place__sub { display: block; color: var(--cv-meta); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.flow .mx-place__geo { display: block; color: var(--cv-meta); font: var(--fs-xs) / 1.5 var(--mono); }
.flow .mx-place__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--info); font-size: .8125rem; font-weight: 500; }
.flow .cv--imessage .cv-row--out .mx-place { background: rgba(255, 255, 255, .18); }
.flow .cv--imessage .cv-row--out :is(.mx-place__sub, .mx-place__geo, .mx-contact__sub) { color: rgba(255, 255, 255, .85); }
.flow .cv--imessage .cv-row--out .mx-place__link { color: #fff; }

/* contact card: the name only; observe never keeps a number */
.flow .mx-contact { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; width: 240px; max-width: 100%; margin: 0 0 6px; padding: 8px 10px; border-radius: 6px; background: rgba(11, 20, 26, .05); }
.flow .mx-contact__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-sky); color: var(--ink); font-size: .8125rem; font-weight: 600; }
.flow .mx-contact__name { display: block; font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.flow .mx-contact__sub { display: block; color: var(--cv-meta); font-size: var(--fs-xs); }

/* the fallbacks: today's tile, with one line under its words */
.flow .mx-why { display: block; color: var(--cv-meta); font-size: var(--fs-xs); }
.flow .cv-row--out .mx-why { color: inherit; opacity: .85; }
.flow .mx-retry { padding: 0; border: 0; background: none; color: var(--info); font: inherit; font-size: var(--fs-xs); font-weight: 500; cursor: pointer; }
.flow .mx-dlline { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--info); font-size: var(--fs-xs); font-weight: 500; }
.flow .cv-tile.mx-tile-s { width: 152px; min-width: 0; aspect-ratio: 1; padding: 8px 4px; }
.flow .mx-file-fail { align-items: flex-start; }
.flow .mx-file-fail__what { display: block; }

/* the larger view: observe's dialog, the picture at most 70% of the window */
.flow dialog.dialog.mx-view { width: min(760px, calc(100vw - 32px)); max-width: 760px; }
@media (max-width: 560px) { .flow dialog.dialog.mx-view { width: 100%; max-width: 100%; } }
.flow .mx-view .dialog__body { place-items: center; padding-top: 8px; }
.flow .mx-view__img { display: block; max-width: 100%; max-height: min(70vh, 640px); border-radius: var(--r-card); background: var(--hover); }
.flow .mx-view__meta { justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; color: var(--ink-3); font-size: .875rem; font-variant-numeric: tabular-nums; }

/* buttons: WhatsApp's inside the bubble, each its full width; Telegram's as a keyboard under it;
   iMessage's as the numbered text Flow sends; the plain look's as chips */
.flow .cv-btns { display: flex; flex-direction: column; margin: 6px -9px -7px; }
.flow .cv-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 38px; padding: 0 12px; border-top: 1px solid var(--cv-line); color: var(--cv-btn); font-size: .875rem; font-weight: 500; }
.flow .cv-btn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow .cv-list > summary { list-style: none; cursor: pointer; }
.flow .cv-list > summary::-webkit-details-marker { display: none; }
.flow .cv-list[open] > summary { margin-bottom: 0; }
.flow .cv-sheet { display: grid; margin: 7px -9px -7px; padding: 4px 12px 8px; border-top: 1px solid var(--cv-line); }
.flow .cv-sheet__section { padding: 8px 0 2px; color: #008069; font-size: .8125rem; font-weight: 500; }
.flow .cv-sheet__row { display: grid; padding: 6px 0; border-bottom: 1px solid var(--cv-line); }
.flow .cv-sheet__row:last-child { border-bottom: 0; }
.flow .cv-sheet__sub { color: var(--cv-meta); font-size: .8125rem; }
.flow .cv-numbered { margin: 6px 0 0; padding-left: 20px; }
.flow .cv-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 2px; align-self: stretch; }
.flow .cv-keys .cv-btn { height: 34px; border: 0; border-radius: 8px; background: rgba(60, 90, 112, .42); color: #fff; font-size: .8125rem; }
.flow .cv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.flow .cv-row--out .cv-chips { justify-content: flex-end; }
.flow .cv-chips .tag { height: auto; min-height: 24px; white-space: normal; overflow-wrap: anywhere; }
.flow .cv-cards { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px 2px 4px; }
.flow .cv-card { flex: 0 0 200px; display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; border-radius: var(--cv-radius); background: var(--cv-in); color: var(--cv-in-ink); box-shadow: var(--cv-in-ring); overflow: hidden; font-size: .875rem; line-height: 1.4; }
.flow .cv-card .cv-tile { width: 100%; aspect-ratio: 16 / 10; margin: 0; border-radius: 0; }
.flow .cv-card__text { flex: 1; padding: 6px 9px 8px; }
.flow .cv-card .cv-btns { margin: 0; }

/* under a bubble: the dashboard's own chips and words, on the bubble's edge */
.flow .cv-under { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 22px; color: var(--cv-under); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.flow .cv-row--out .cv-under { justify-content: flex-end; }
.flow .cv-receipt { font-weight: 600; }
.flow .cv-why, .flow .cv-err { max-width: 100%; margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--cv-under); overflow-wrap: anywhere; }
.flow .cv-row--out .cv-why, .flow .cv-row--out .cv-err { text-align: right; }
.flow .cv-err { color: var(--bad); }
.flow .cv-receipt--bad { color: var(--bad); }
/* "Not delivered" under a reply: the word is a button; the error is its tooltip (.infotip's look),
   under the word, its right edge on the reply's */
.flow .cv-ndtip { position: relative; display: inline-flex; }
.flow .cv-ndtip__btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--bad); cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.flow .cv-ndtip__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.flow .cv-ndtip .cv-ndtip__tip { left: auto; right: 0; top: calc(100% + 6px); display: grid; gap: 4px; max-width: min(300px, calc(100vw - 48px)); text-align: left; font-variant-numeric: normal; }
.flow .cv-ndtip .cv-ndtip__tip[hidden] { display: none; }
.flow .cv-ndtip__code { font: 400 .6875rem/1.4 var(--mono); color: var(--ink-3); }

/* the tools a turn ran: a small indicator beside the reply, its list in a popover */
.flow .cv-toolswrap { position: relative; display: inline-flex; flex: none; margin-bottom: 4px; }
.flow .cv-tools { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--ring-soft); color: var(--ink-2); font: 600 var(--fs-xs)/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.flow .cv-tools:hover, .flow .cv-tools[aria-expanded="true"] { color: var(--ink); box-shadow: var(--ring); }
.flow .cv-tools:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.flow .cv-tools.is-failed { background: var(--bad-soft); color: var(--bad-ink); }
.flow .cv-pop { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; display: grid; gap: 8px; width: 280px; max-width: calc(100vw - 32px); padding: 12px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--lift); color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.35; text-align: left; cursor: default; }
.flow .cv-pop[hidden] { display: none; }
.flow .cv-pop__head { display: flex; justify-content: space-between; gap: 12px; color: var(--ink); font-weight: 600; font-size: .8125rem; }
.flow .cv-pop__list { display: grid; margin: 0; padding: 0; list-style: none; }
.flow .cv-pop__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.flow .cv-pop__name { font-family: var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.flow .cv-pop__ms { color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 400; white-space: nowrap; }
.flow .cv-pop__err { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flow .cv-pop__err .tag { height: 20px; padding: 0 8px; font-size: .6875rem; }
.flow .cv-pop__foot { display: flex; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .flow .transcript.cv { padding: 8px 12px 16px; }
  .flow .cv-row { margin: 0 -12px; padding: 1px calc(12px + var(--cv-edge)); }
  .flow .cv-col { max-width: 86%; }
  .flow .cv-pop { right: auto; left: 0; }
}
@media (prefers-reduced-motion: no-preference) { .flow .cv-row { transition: background-color .12s ease; } }
.flow .inspector { position: sticky; top: calc(var(--app-h) + 16px); }
.flow .inspector .tabs { padding: 0 12px; }
.flow .inspector__body { padding: 16px 20px 20px; display: grid; gap: 14px; }
.flow .why { font-size: .875rem; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 1080px) { .flow .inspector { position: static; } }
/* long rule ids (allergen_claims_must_cite_menu) wrap instead of widening the
   page on a phone */
.flow .inspector dd { min-width: 0; }
.flow .inspector .tag.mono, .flow .note .tag.mono { white-space: normal; overflow-wrap: anywhere; max-width: 100%; height: auto; min-height: 24px; padding-block: 2px; }

/* the trace waterfall: metadata only */
.flow .spans { display: grid; gap: 6px; font-size: .75rem; }
.flow .span { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr) 56px; gap: 10px; align-items: center; }
.flow .span__name { font-family: var(--mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow .span__bar { position: relative; height: 14px; border-radius: 4px; background: var(--tile); }
.flow .span__bar i { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: 4px; background: var(--brand-sky-deep); }
.flow .span__bar i.is-model { background: var(--brand-sky); }
.flow .span__bar i.is-tool { background: var(--brand-sage-deep); }
.flow .span__bar i.is-agent { background: var(--ink-3); }
.flow .span__bar i.is-other { background: var(--ink-4); }
.flow .span__bar i.is-error { box-shadow: 0 0 0 2px var(--bad); }
.flow .span__ms { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* the workspace page */
.flow .agentlist .agentrow:first-child { border-top: 0; }
.flow .agentrow { display: grid; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.flow .agentrow:hover { background: var(--hover); }
.flow .agentrow__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flow .agentrow__desc { font-size: .875rem; color: var(--ink-2); }
.flow .agentrow__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.flow .agentrow__nums div { display: grid; gap: 2px; }
.flow .agentrow__nums b { font: 500 1.125rem/1.2 var(--head); }
.flow .agentrow__nums span { font-size: .75rem; color: var(--ink-3); }
.flow .monthcard, .flow .glance { display: grid; gap: 12px; text-decoration: none; color: inherit; }
.flow .monthcard:hover, .flow .glance:hover { box-shadow: var(--lift); }
.flow .monthcard__big { display: flex; align-items: baseline; gap: 8px; }
.flow .monthcard__big b { font: 500 2rem/1 var(--head); }
.flow .monthcard__big span { font-size: .875rem; color: var(--ink-3); }
.flow .bars > i { align-self: stretch; }
.flow .bars--mini { height: 56px; gap: 3px; }
.flow .usage-bars { gap: 3px; height: 160px; }
.flow .monthpick { display: inline-flex; align-items: center; gap: 4px; }
.flow .monthpick__label { min-width: 132px; text-align: center; font-weight: 500; }

/* phones: More's list */
.flow .morelist { padding: 0 20px; }
.flow .morelink { gap: 12px; color: var(--ink); text-decoration: none; font-weight: 500; }

/* an agent's keys (Developers): one compact list, a row per active key;
   workspace settings: one line per agent; the add form */
.flow .keycard { display: grid; gap: 12px; }
.flow .keylist { list-style: none; margin: 0; padding: 0; }
.flow .keyline { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 14.5rem) minmax(0, 1fr) minmax(4.5rem, auto); grid-template-areas: "id env meta act"; gap: 6px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: .875rem; }
.flow .keylist > .keyline:first-child { border-top: 0; }
.flow .keyline:focus { outline: none; }
.flow .keyline:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.flow .keyline__id { grid-area: id; display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.flow .keyline .envchip { justify-self: start; }
.flow .keyline__id .tag { height: 20px; padding: 0 8px; font-size: .6875rem; }
.flow .keyline .envchip { grid-area: env; }
.flow .keyline__meta { grid-area: meta; min-width: 0; overflow-wrap: break-word; }
.flow .keyline__act { grid-area: act; justify-self: end; text-align: right; }
.flow .keyline--empty { display: block; color: var(--ink-2); }
.flow .keyline.is-revoked { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); grid-template-areas: "id meta"; }
.flow .keyline.is-revoked .mono { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
@media (max-width: 640px) {
  .flow .keyline { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id act" "env env" "meta meta"; }
  .flow .keyline .envchip { justify-self: start; }
  .flow .keyline.is-revoked { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "meta"; }
}
/* A Flow key's row opens in place into its tile (4 Nov 2026): hover, keyboard focus, or a tap on
   a phone (.is-open, one at a time). Collapsed, it is today's row to the pixel: one more grid area
   under it, 0 high, and row-gap 0 so that area adds no gap. The tint is a layer behind the row,
   12px wider each side, so the row's own line never moves; only the rows below ease down. */
.flow .keyline--tile { grid-template-areas: "id env meta act" "more more more more"; row-gap: 0; position: relative; isolation: isolate; cursor: default; }
.flow .keyline--tile::before { content: ""; position: absolute; inset: 0 -12px; z-index: -1; border-radius: 10px; background: transparent; transition: background-color .15s; }
.flow .keyline--tile:hover::before, .flow .keyline--tile:focus-within::before, .flow .keyline--tile.is-open::before { background: var(--hover); }
.flow .keyline--tile:focus-visible { outline: none; }
.flow .keyline--tile:focus-visible::before { box-shadow: inset 0 0 0 2px var(--ink); }
@media (max-width: 640px) {
  /* the row stacks; its 6px between lines come back as margins, so the collapsed row is today's height */
  .flow .keyline--tile { grid-template-areas: "id act" "env env" "meta meta" "more more"; }
  .flow .keyline--tile .envchip, .flow .keyline--tile .keyline__meta { margin-top: 6px; }
}
.flow .keytile__more { grid-area: more; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .18s ease; }
.flow .keytile__more > div { min-height: 0; overflow: hidden; visibility: hidden; }
.flow .keyline--tile:hover .keytile__more, .flow .keyline--tile:focus-within .keytile__more, .flow .keyline--tile.is-open .keytile__more { grid-template-rows: 1fr; }
.flow .keyline--tile:hover .keytile__more > div, .flow .keyline--tile:focus-within .keytile__more > div, .flow .keyline--tile.is-open .keytile__more > div { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .flow .keytile__more, .flow .keyline--tile::before { transition: none; } }
/* hover opens a tile only where the pointer hovers; a phone taps */
@media (hover: none) {
  .flow .keyline--tile:hover:not(.is-open) .keytile__more { grid-template-rows: 0fr; }
  .flow .keyline--tile:hover:not(.is-open) .keytile__more > div { visibility: hidden; }
  .flow .keyline--tile:hover:not(.is-open):not(:focus-within)::before { background: transparent; }
}
/* the tile's body: the checklist on the left, the key's facts (.kv) on the right */
.flow .keytile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 32px; padding: 12px 0 6px; margin-top: 10px; border-top: 1px solid var(--line); }
.flow .keytile .kv { grid-template-columns: minmax(0, 92px) minmax(0, 1fr); gap: 8px 12px; align-content: start; }
.flow .keytile .kv dd small { display: block; color: var(--ink-3); font-size: .75rem; }
.flow .keytile__grant { display: block; }
.flow .keytile__grant + .keytile__grant { margin-top: 6px; }
.flow .keytile--one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .flow .keytile { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
/* the checklist: one line per capability, the mark and the words in two aligned columns */
.flow .keycheck { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: var(--fs-sm); }
.flow .keycheck li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 4px 0; }
.flow .keycheck__mark { display: grid; place-items: center; width: 16px; height: 20px; }
.flow .keycheck .is-yes .keycheck__mark { color: var(--good); }
.flow .keycheck .is-no .keycheck__mark { color: var(--neutral); }
.flow .keycheck .is-yes .keycheck__what { color: var(--ink); }
.flow .keycheck .is-no .keycheck__what { color: var(--ink-3); }
.flow .keycheck__what small { color: var(--ink-3); }
.flow .keycheck__cmd { grid-column: 2; margin-top: 1px; font: 400 .6875rem/1.4 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.flow .envchip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 2px 2px 8px; border-radius: 6px; background: var(--tile); }
.flow .envchip code { font: .75rem/1.4 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.flow .envchip__copy { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 6px; border: 0; border-radius: 5px; background: none; color: var(--info); font: 500 .75rem/1 var(--font); cursor: pointer; }
.flow .envchip__copy:hover { background: var(--hover); }
.flow .linkbtn { display: inline; padding: 0; border: 0; background: none; color: var(--info); font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.flow .keyfoot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.flow .keyfoot__item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flow .keywhere { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.flow .keyrevoked { display: grid; gap: 6px; font-size: .875rem; }
.flow .keyrevoked .linkbtn { justify-self: start; }
.flow .keyrevoked .keylist { padding-top: 2px; }
.flow .secretline { display: flex; align-items: center; gap: 10px; }
.flow .secretline code { flex: 1; min-width: 0; }
.flow .secretline .btn { flex: none; }
.flow .agentkeys { list-style: none; margin: 0; padding: 0; }
.flow .agentkeys li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); font-size: .875rem; }
.flow .agentkeys li:first-child { border-top: 0; }
.flow .agentkeys__name { display: grid; gap: 2px; min-width: 0; }
.flow .agentkeys__name a { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.flow .agentkeys__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .flow .agentkeys li { grid-template-columns: minmax(0, 1fr) auto; } .flow .agentkeys li > .link { grid-column: 1 / -1; } }
.flow .secret { padding: 12px 14px; border-radius: 10px; background: var(--brand-paper); box-shadow: inset 0 0 0 1px var(--line); font: .8125rem/1.5 var(--mono); }
.flow .secret__value { overflow-wrap: anywhere; user-select: all; }
.flow .fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.flow .fieldset legend { margin-bottom: 6px; }
.flow .choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.flow .choice label { position: relative; display: grid; align-content: start; gap: 6px; padding: 16px 18px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--ring-soft); cursor: pointer; }
.flow .choice label:has(input:checked) { box-shadow: 0 0 0 2px var(--ink); }
.flow .choice label:has(input:disabled) { opacity: .5; cursor: default; }
.flow .choice label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.flow .choice input { position: absolute; opacity: 0; pointer-events: none; }
.flow .choice b { font: 600 .9375rem/1.3 var(--font); }
.flow .choice span:not(.hint) { font-size: .875rem; color: var(--ink-2); }   /* a .hint (a secondary line) stays quieter */

/* dialogs (flow-mono's site.css), on the native <dialog> */
.flow dialog.dialog { width: min(100% - 32px, 560px); max-height: calc(100vh - 48px); padding: 0; border: 0; overflow: auto; background: var(--surface); color: var(--ink); border-radius: var(--r-xl); box-shadow: var(--lift); }
.flow dialog.dialog::backdrop { background: rgba(28,26,23,.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.flow .dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 0; }
.flow .dialog__title { font: 500 1.375rem/1.2 var(--head); letter-spacing: -.01em; }
.flow .dialog__body { padding: 16px 24px 24px; display: grid; gap: 16px; }
.flow .dialog__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .flow dialog.dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 92vh; } }

/* what just happened, after an action */
.flow .toast { position: fixed; z-index: 200; left: 50%; bottom: 24px; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px; background: var(--ink); color: #fff; font-size: .875rem; box-shadow: var(--lift); }
@media (max-width: 860px) { .flow .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

/* versions: in the conversation list, the transcript and Deployments */
.flow .versep { background: var(--brand-mist); color: var(--brand-sky-deep); }
.flow .versep .mono { font-size: .75rem; }
.flow .envcard { display: grid; gap: 14px; align-content: start; }
.flow .envcard > .btn, .flow .envcard .hstack { justify-self: start; }
.flow .envcard__ver { display: grid; gap: 2px; min-width: 0; }
.flow .envcard__name { font: 500 1.25rem/1.3 var(--head); color: var(--ink); overflow-wrap: anywhere; }
.flow .envcard .card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flow .pipeline { position: relative; }
@media (min-width: 761px) { .flow .pipeline::after { content: "→"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); box-shadow: var(--ring-soft); color: var(--ink-3); font-size: .875rem; } }
@media (max-width: 760px) { .flow .grid2.pipeline { grid-template-columns: minmax(0, 1fr); } }

/* a command to copy, on one line */
.flow .copyline { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--brand-paper); box-shadow: inset 0 0 0 1px var(--line); }
.flow .copyline code { flex: 1; min-width: 0; font-size: .8125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.flow .copyline .btn { flex: none; }
.flow .numsteps > li > span { min-width: 0; }
.flow .numsteps .btn { justify-self: start; }
.flow pre.code { margin: 0; max-width: 100%; white-space: pre; }
.flow .nextnote__tag { justify-self: start; }

/* tests (docs/flow-dashboard-ui.md, "Tests"): the prototype's #s-tests and #s-run */
.flow .pf { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* .pf--fail is the verdict of the run or scenario in front of you (solid); .pf--soft
   with it is a mention in a list (a scenario row, a check) */
.flow .pf--pass { background: var(--good-soft); color: var(--good-ink); }
.flow .pf--fail { background: var(--bad); color: #fff; }
.flow .pf--soft.pf--fail { background: var(--bad-soft); color: var(--bad-ink); }
.flow .pf--run { background: var(--brand-mist); color: var(--brand-sky-deep); }
.flow .pf--off { background: var(--neutral-soft); color: var(--neutral-ink); }
.flow .testhead { align-items: flex-start; }
.flow .testhead__act { display: grid; gap: 6px; justify-items: start; max-width: 340px; }
/* the Run buttons' note: a small muted line (not the page head's 16 px subtitle) */
.flow .testhead__act .hint { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }
/* Tests (31 Oct 2026 mockup): one row, the title and its (i) at the start, the Run split
   button at the end. Centred on the h1's line box, the controls sit about half a pixel under
   the middle of the title's capitals (measured at 1440 and 390), so they move up by that. */
.flow .testhead--row { align-items: center; flex-wrap: nowrap; gap: 16px; }
.flow .testhead--row .titlewrap { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.flow .testhead--row .titlewrap h1 { white-space: nowrap; }
.flow .testhead--row .infobtn, .flow .testhead--row .testhead__end { flex: none; transform: translateY(-.5px); }
/* a run's page: the split button and Compare at the top, centred on the title's first line */
.flow .testhead__runend { margin-top: calc(clamp(2rem, 3.2vw, 2.75rem) * .525 - 17.5px); }
/* the (i): a 28px .icon-btn, quiet until hovered or focused; its popover has .ptrend__tip's look */
.flow .infobtn { width: 28px; height: 28px; color: var(--ink-3); }
.flow .infobtn:hover, .flow .infobtn[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.flow .infobtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.flow .infotip { position: absolute; z-index: 130; left: 0; top: calc(100% + 8px); width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 10px 12px; border-radius: 10px; background: var(--surface); box-shadow: var(--lift); font: 400 .8125rem/1.45 var(--font); letter-spacing: 0; color: var(--ink-2); }
.flow .infotip[hidden] { display: none; }
.flow .infotip b { color: var(--ink); font-weight: 600; }
/* the split button: two .btn--dark .btn--sm halves in one pill, a hairline between */
.flow .splitbtn { display: inline-flex; align-items: stretch; border-radius: var(--r-pill); }
.flow .splitbtn > .btn { border-radius: 0; }
.flow .splitbtn > .btn:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); padding-right: 12px; }
.flow .splitbtn > .splitbtn__more { width: 34px; padding: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0; box-shadow: inset 1px 0 0 rgba(255,255,255,.22); }
.flow .splitbtn > .splitbtn__more[aria-expanded="true"] { background: #000; }
.flow .splitbtn > .splitbtn__more svg { transition: transform .15s; }
.flow .splitbtn > .splitbtn__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.flow .splitbtn > .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; z-index: 1; }
/* its menu: the shell's .menu, two-line items, the laptop note last; anchored under the
   button at every width (the shell's own menus span the screen on phones) */
.flow .runmenu { width: 300px; }
@media (max-width: 560px) { .flow .runmenu { position: absolute; left: auto; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 32px)); } }
.flow .runmenu.menu--start { left: 0; right: auto; }
.flow .runmenu .runmenu__item { height: auto; min-height: 40px; padding: 9px 12px; display: grid; gap: 3px; white-space: normal; line-height: 1.3; }
.flow .runmenu .runmenu__item b { font-weight: 500; color: var(--ink); }
.flow .runmenu .runmenu__item small { font-size: .75rem; color: var(--ink-3); }
.flow .runmenu__note { display: flex; gap: 8px; margin: 2px 0 0; padding: 10px 12px 6px; border-top: 1px solid var(--line); font-size: .75rem; line-height: 1.45; color: var(--ink-3); }
.flow .runmenu__note[hidden] { display: none; }
.flow .runmenu__note svg { flex: none; margin-top: 1px; }
.flow .hstack--wrap { flex-wrap: wrap; }
.flow .runtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.flow .runtitle .pf, .flow .runtitle .tag { font-family: var(--font); letter-spacing: normal; }
.flow .runcell { display: inline-flex; align-items: center; gap: 8px; }
/* a run off the main line (another branch, a pull request, local): its result
   in plain grey words, never the red chip, and its row's figures in grey */
.flow .runstat--quiet { font-size: .8125rem; color: var(--ink-3); }
.flow .tbl tr.row-quiet td { color: var(--ink-3); }
.flow .runtitle .runstat--quiet { font: 500 1.0625rem/1.3 var(--font); letter-spacing: normal; }
.flow .gap-bottom { margin-bottom: 16px; }
.flow .cmp { margin-top: 24px; }
.flow .tbl td.persona { min-width: 200px; }
/* numeric columns of any .tbl: the header and its cells right-aligned, tabular figures */
.flow .tbl th.num, .flow .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* The Runs list's Passed cell: the count on its own line, what was not counted beneath it */
.flow .tbl td.passcell { min-width: 16rem; }
.flow .passcell__main { white-space: nowrap; }
.flow .passcell__note { display: block; margin-top: 2px; }
.flow .tbl tr.is-worse td { background: var(--bad-soft); }
/* The Runs list (29 Oct 2026, the founders' mockup): fixed columns so nothing runs
   past the card's edge; the run's pill with its time or quiet chips under it; the
   branch as one monospace chip ending in "…"; the version cut to 7 with an
   "uncommitted" tag; Passed as "p / t" over a thin bar. Main: no Branch column, a
   "vs previous on main" column, and the summary strip above (numbers only: the
   Pass rate chart draws the runs). */
.flow .runtbl { table-layout: fixed; }
.flow .runtbl th { white-space: normal; }
.flow .runtbl td { vertical-align: middle; }
.flow .runtbl th:nth-child(1) { width: 28%; }
.flow .runtbl th:nth-child(2) { width: 25%; }
.flow .runtbl th:nth-child(3) { width: 18%; }
.flow .runtbl th:nth-child(4) { width: 11%; }
.flow .runtbl th:nth-child(5), .flow .runtbl th:nth-child(6) { width: 9%; }
.flow .runtbl--main th:nth-child(1) { width: 30%; }
.flow .runtbl--main th:nth-child(2) { width: 19%; }
.flow .runtbl--main th:nth-child(3) { width: 14%; }
.flow .runtbl--main th:nth-child(4) { width: 17%; }
.flow .runtbl--main th:nth-child(5), .flow .runtbl--main th:nth-child(6) { width: 10%; }
.flow .runtbl .runcell { flex-wrap: wrap; row-gap: 4px; }
.flow .runtbl .runcell .link { font-weight: 600; }
.flow .runsub { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow .runchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.flow .runtbl td .runchips .tag { height: 20px; padding: 0 7px; font-weight: 500; color: var(--ink-2); }
.flow .branchchip { display: inline-block; max-width: 100%; vertical-align: middle; padding: 2px 7px; border-radius: 6px; background: var(--tile); color: var(--ink); font: .75rem/1.4 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow .tbl tr.row-quiet .branchchip { color: var(--ink-2); }
.flow .runver { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.flow .runver__sha { font: .78125rem/1.4 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.flow .runver__tag { flex: none; padding: 1px 6px; border-radius: 5px; background: var(--warn-soft); color: var(--warn-ink); font-size: .6875rem; line-height: 1.4; }
.flow .runbar { display: block; width: 72px; max-width: 100%; height: 4px; margin: 6px 0 0 auto; border-radius: 2px; background: var(--line); overflow: hidden; }
.flow .runbar > i { display: block; height: 100%; border-radius: 2px; }
.flow .runbar--pass > i { background: var(--good); }
.flow .runbar--fail > i { background: var(--bad); }
.flow .runbar--off > i { background: var(--neutral); }
.flow .rundelta { font-size: .8125rem; }
.flow .rundelta--up { color: var(--good-ink); }
.flow .rundelta--down { color: var(--bad-ink); }
.flow .rundelta--same, .flow .rundelta--partial, .flow .rundelta--none { color: var(--ink-3); }
/* Main's Runs list: each run's bar in its level's colour (--lv, the levels below) */
.flow .runtbl--main .runbar { display: block; width: 110px; height: 5px; border-radius: 3px; }
.flow .runtbl--main .runbar > i { min-width: 0; border-radius: 3px; }
.flow .runbar--level > i { background: var(--lv, var(--neutral)); }
/* the pass-rate chart: a 0/50/100% axis, a bar per run across the card's width
   (geometry from trendLayout), a thin divider with a small marker above the plot
   where the scenarios changed, one tooltip beside the hovered or focused run */
.flow .ptrend { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: 18px 128px 22px; margin-top: 12px; }
.flow .ptrend__marks { grid-column: 2; grid-row: 1; position: relative; }
.flow .ptrend__y { grid-column: 1; grid-row: 2; position: relative; font-size: .6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.flow .ptrend__y span { position: absolute; right: 8px; line-height: 1; transform: translateY(-50%); }
.flow .ptrend__y .at-100 { top: 0; }
.flow .ptrend__y .at-50 { top: 50%; }
.flow .ptrend__y .at-0 { top: 100%; }
.flow .ptrend__plot { grid-column: 2; grid-row: 2; position: relative; }
.flow .ptrend__grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); pointer-events: none; }
.flow .ptrend__grid.at-100 { top: 0; }
.flow .ptrend__grid.at-50 { top: 50%; }
.flow .ptrend__grid.at-0 { bottom: 0; background: var(--ink-4); }
.flow .ptrend__x { grid-column: 2; grid-row: 3; position: relative; font-size: .6875rem; color: var(--ink-3); }
.flow .ptrend__x span { position: absolute; top: 6px; line-height: 1; white-space: nowrap; }
.flow .ptrend__slot { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.flow .ptrend__slot.is-on { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.flow .ptrend__slot:focus-visible { outline: 2px solid var(--info); outline-offset: -1px; }
.flow .ptrend__bar { position: absolute; bottom: 0; border-radius: 4px 4px 0 0; background: var(--brand-sage-deep); }
.flow .ptrend__bar.is-subset { background: color-mix(in srgb, var(--brand-sage-deep) 45%, var(--surface)); }
.flow .ptrend__bar.is-none { background: var(--ink-4); }
/* a session that broke off: a dashed mark on the baseline, never a bar */
.flow .ptrend__bar.is-broken { height: 8px; background: transparent; border: 1.5px dashed var(--ink-3); border-radius: 2px; }
.flow .ptrend__slot.is-on .ptrend__bar:not(.is-broken) { background: color-mix(in srgb, var(--brand-sage-deep) 75%, var(--ink)); }
.flow .ptrend__slot.is-on .ptrend__bar.is-subset { background: color-mix(in srgb, var(--brand-sage-deep) 60%, var(--surface)); }
.flow .ptrend__slot.is-on .ptrend__bar.is-broken { border-color: var(--ink); }
/* a bar coloured by its level (--lv), lighter for a run of part of the suite */
.flow .ptrend__bar[class*=" lv-"] { background: var(--lv); }
.flow .ptrend__bar.is-subset[class*=" lv-"] { background: color-mix(in srgb, var(--lv) 45%, var(--surface)); }
.flow .ptrend__slot.is-on .ptrend__bar[class*=" lv-"]:not(.is-broken) { background: color-mix(in srgb, var(--lv) 75%, var(--ink)); }
.flow .ptrend__slot.is-on .ptrend__bar.is-subset[class*=" lv-"] { background: color-mix(in srgb, var(--lv) 60%, var(--surface)); }
.flow .ptrend__div { position: absolute; top: -2px; bottom: 0; border-left: 1px dashed var(--ink-4); pointer-events: none; }
.flow .ptrend__mark { position: absolute; bottom: 2px; width: 14px; height: 14px; margin-left: -7px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink-4); color: var(--ink-3); cursor: default; }
.flow .ptrend__mark::before { content: ""; position: absolute; inset: -5px; }
.flow .ptrend__mark:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.flow .ptrend__tip { position: absolute; z-index: 5; display: grid; gap: 2px; width: max-content; max-width: 220px; padding: 8px 10px; border-radius: 10px; background: var(--surface); box-shadow: var(--lift); font-size: var(--fs-xs); line-height: 1.35; color: var(--ink-2); pointer-events: none; }
.flow .ptrend__tip[hidden] { display: none; }
.flow .ptrend__tipv { font: 600 .9375rem/1.2 var(--font); color: var(--ink); }
.flow .ptrend__tipl { display: grid; gap: 1px; }
.flow .ptrend__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-3); }
.flow .ptrend__legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow .ptrend__key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.flow .ptrend__key.is-subset { background: color-mix(in srgb, var(--brand-sage-deep) 45%, var(--surface)); }
.flow .ptrend__key.is-broken { border: 1.5px dashed var(--ink-3); }
@media (max-width: 640px) {
  .flow .ptrend { grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: 18px 112px 22px; }
}
.flow .rerun:empty { display: none; }
.flow .rerun__box { margin: 0 0 16px; }
/* the scenarios' last runs */
.flow .dots { display: inline-flex; gap: 4px; align-items: center; }
.flow .dots__d { width: 10px; height: 10px; border-radius: 50%; }
.flow .dots__d.is-pass { background: var(--good); }
.flow .dots__d.is-fail { background: var(--bad); }
/* a run stopped by test credit or a test cloud error: hollow, not counted */
.flow .dots__d.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
/* a scenario's pass rate, with Flaky and what did not count */
.flow .ratecell { display: grid; gap: 2px; justify-items: start; }
.flow .rates__head { padding: 16px 20px 0; margin-bottom: 8px; }
/* one run, in three tabs (the 26 Oct 2026 redesign): Overview, Scenarios, Speed and cost.
   Built from the dashboard's own pieces (card, stat, tile, kv, tabs, seg, tag, check-row,
   irows, tbl, dots, psplit); these rules only add what they lack. */
.flow .dots__d.is-retry { background: var(--warn); }
.flow .dots__d.is-now { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.flow .runtabs__n { margin-left: 6px; font-weight: 400; }
.flow .runverdict { font: 500 1.5rem/1.2 var(--head); letter-spacing: -.01em; }
/* the verdict's bar: passed, passed on retry, failed, not judged */
.flow .runbar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line); }
.flow .runbar > i { min-width: 4px; }
.flow .runbar__passed { background: var(--good); }
.flow .runbar__retry { background: var(--warn); }
.flow .runbar__failed { background: var(--bad); }
.flow .runbar__not_judged { background: var(--neutral); }
.flow .legend--wrap { flex-wrap: wrap; row-gap: 6px; }
.flow .tile--bad { background: var(--bad-soft); }
.flow .tile--bad, .flow .tile--bad .stat__n { color: var(--bad-ink); }
.flow .stat--warn { background: var(--warn-soft); }
.flow .runchanges { gap: 8px; }
.flow .runchanges .stat { padding: 12px 16px; }
.flow .runchanges .stat__v { font-size: 1.5rem; }
.flow .runkv { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); }
.flow .runkv dd { min-width: 0; overflow-wrap: anywhere; }
/* Worth a look: a check-row with its Open button at the end */
.flow .worthlist { list-style: none; margin: 0; padding: 0; }
.flow .worthlist > .check-row { grid-template-columns: 120px minmax(0, 1fr) auto; align-items: start; }
.flow .worthlist > .check-row:first-child { border-top: 0; padding-top: 0; }
.flow .worthlist > .check-row > .tag { justify-self: start; }
/* the whole item opens it (rowclick.ts): a hover band 12px past the text, its rule kept to the
   text's width, the title underlined as on the Tests pages' rows */
.flow .worthlist > .check-row.row-link { margin-inline: -12px; padding-inline: 12px; border-top: 0; border-radius: 8px; cursor: pointer;
  background: linear-gradient(var(--line), var(--line)) 12px 0 / calc(100% - 24px) 1px no-repeat; }
.flow .worthlist > .check-row.row-link:first-child { background-image: none; padding-top: 12px; margin-top: -12px; }
.flow .worthlist > .check-row.row-link:hover { background-color: var(--hover); }
.flow .worthlist > .check-row.row-link:hover .link--strong { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* its title on one line, cut with "…" (the whole title in the hover text) */
.flow .worthlist .check-row__top { min-width: 0; max-width: 100%; }
.flow .worth__line { color: var(--ink-2); }
.flow .worth__line b { font-weight: 600; color: var(--ink); }
/* Scenarios: groups of rows that open in place (Insights' irows) */
.flow .runsearch { flex: 1 1 260px; max-width: 420px; }
.flow .rungroup .section-title { margin-bottom: 4px; }
.flow .runcompare:empty { display: none; }
.flow .runtab > *, .flow .rungroup > * { min-width: 0; }
.flow .runov > .card { align-content: start; }
.flow .runrows .irow__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 16px; }
.flow .rungroup__sub { margin-bottom: 12px; }
.flow .runrow__title { align-items: flex-start; }
.flow .runrow__name { display: grid; gap: 2px; min-width: 0; }
.flow .runrow__sub { font-size: .75rem; color: var(--ink-3); overflow-wrap: anywhere; }
.flow .runrows .irow__facts { align-self: flex-start; padding-top: 2px; }
.flow .runrow__dots { display: inline-flex; justify-content: flex-end; min-width: 76px; }
@media (max-width: 560px) {
  .flow .runkv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .flow .runkv dd + dt { margin-top: 10px; }
  .flow .worthlist > .check-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .flow .worthlist > .check-row > .btn { justify-self: start; }
  .flow .runrow__dots { min-width: 0; }
  .flow .runrows .irow__main { grid-template-columns: minmax(0, 1fr); }
  .flow .runrows .irow__facts { gap: 12px; }
  .flow .runchanges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.flow .check-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); font-size: .875rem; }
.flow .card__head + .check-row { border-top: 0; }
.flow .check-row__body { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.flow .check-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.flow .check-row__top b { overflow-wrap: anywhere; }
.flow .check-row__top .tag { height: 20px; padding: 0 8px; font-size: .6875rem; }
.flow .check-row p { color: var(--ink-3); font-size: .8125rem; overflow-wrap: anywhere; }
/* Judge feedback (judgefeedbackui.ts): under a failed check or a reply's failed grade, two
   small buttons; "wrong" opens a short form in place (the page's lighter ground, a soft ring);
   once saved, one muted line (who · "why" · "note" · when · Undo). */
.flow .jf { display: grid; gap: 8px; justify-self: stretch; min-width: 0; margin-top: 4px; }
.flow .jf__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flow .jf-meta { font-size: .8125rem; line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }
.flow .jf-meta .linkbtn { font-size: inherit; }
.flow .jf-form { display: grid; gap: 12px; padding: 16px 18px; border-radius: var(--r-card); background: var(--bg); box-shadow: var(--ring-soft); }
.flow .jf-reasons { display: grid; gap: 10px; }
.flow .jf-reasons legend { padding: 0; }
.flow .jf-q { display: block; margin: 0 0 2px; font: 600 .875rem/1.3 var(--font); color: var(--ink); }
.flow .jf-opt { color: var(--ink); cursor: pointer; line-height: 1.35; }
.flow .jf-opt input { flex: none; margin: 2px 0 0; accent-color: var(--ink); }
.flow .jf-opt > span { display: grid; gap: 2px; min-width: 0; }
.flow .jf-opt .hint { font-size: .75rem; line-height: 1.4; }
.flow .jf-form .textarea { min-height: 64px; font-size: .875rem; }
.flow .check-row .jf-foot, .flow .jf-foot { margin: 0; font-size: .75rem; line-height: 1.4; color: var(--ink-3); }
@media (max-width: 640px) { .flow .jf-form { padding: 14px; } }
.flow .replay__phone { display: flex; justify-content: center; min-width: 0; }
.flow .replay__lines[hidden], .flow .replay__phone[hidden] { display: none; }
.flow .phone {
  --ph-bg: #efeae2; --ph-bar: #008069; --ph-bar-ink: #fff; --ph-in: #fff; --ph-out: #d9fdd3; --ph-ink: #111b21;
  --ph-meta: #667781; --ph-btn: #027eb5; --ph-line: rgba(11, 20, 26, .1); --ph-read: #53bdeb; --ph-quote: #06cf9c;
  width: 360px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden;
  border: 8px solid #1c1c1e; background: var(--ph-bg); color: var(--ph-ink);
  font: 14.2px/19px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.flow .phone--telegram { --ph-bg: #9bb8cf; --ph-bar: #517da2; --ph-in: #fff; --ph-out: #effdde; --ph-meta: #8b9aa5; --ph-btn: #fff; --ph-read: #4fae4e; --ph-quote: #3a8bd6; }
.flow .phone--sms { --ph-bg: #fff; --ph-bar: #f2f2f7; --ph-bar-ink: #111; --ph-in: #e9e9eb; --ph-out: #1f8ef1; --ph-meta: #8e8e93; --ph-btn: #1f8ef1; --ph-read: #8e8e93; }
.flow .phone__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ph-bar); color: var(--ph-bar-ink); }
.flow .phone__avatar { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .25); font-weight: 600; }
.flow .phone--sms .phone__avatar { background: #c7c7cc; color: #fff; }
.flow .phone__who { display: grid; min-width: 0; line-height: 1.2; }
.flow .phone__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; }
.flow .phone__who span { font-size: 12px; opacity: .8; }
.flow .phone__chat { display: flex; flex-direction: column; gap: 3px; padding: 10px 8px 14px; min-height: 420px; min-width: 0; }
.flow .phone__day { align-self: center; margin: 4px 0 8px; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .9); color: var(--ph-meta); font-size: 12px; }
.flow .phone--sms .phone__day { background: none; }
.flow .phone__row-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; margin-top: 4px; }
.flow .phone__row-msg.is-mine { align-items: flex-end; }
.flow .phone__bubble { position: relative; width: fit-content; max-width: 82%; min-width: 0; padding: 6px 7px 8px 9px; border-radius: 8px; background: var(--ph-in); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.flow .is-mine > .phone__bubble { background: var(--ph-out); }
.flow .phone--sms .phone__bubble { border-radius: 18px; box-shadow: none; padding: 7px 12px; }
.flow .phone--sms .is-mine > .phone__bubble { color: #fff; }
.flow .phone__bubble.has-photo { padding-top: 3px; padding-left: 3px; padding-right: 3px; }
.flow .phone__bubble.has-photo > .phone__body, .flow .phone__bubble.has-photo > .phone__header, .flow .phone__bubble.has-photo > .phone__footer { padding: 0 6px; }
.flow .phone__bubble.has-photo > .phone__body { padding-top: 4px; }
.flow .phone__bubble.has-buttons { padding-bottom: 0; }
.flow .phone__body { position: relative; min-width: 0; }
.flow .phone__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.flow .phone__text::after { content: ""; display: inline-block; width: 46px; }
.flow .is-mine .phone__text::after { width: 64px; }
.flow .phone__body--meta { min-height: 16px; min-width: 50px; }
.flow .phone__meta { position: absolute; right: 0; bottom: -4px; display: inline-flex; gap: 3px; color: var(--ph-meta); font-size: 11px; line-height: 15px; white-space: nowrap; }
.flow .phone--sms .is-mine .phone__meta { color: rgba(255, 255, 255, .8); }
.flow .phone__ticks { letter-spacing: -4px; padding-right: 4px; }
.flow .phone__ticks.is-read { color: var(--ph-read); }
.flow .phone__mono, .flow .phone__code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.flow .phone__code { padding: 0 3px; border-radius: 4px; background: rgba(11, 20, 26, .07); }
.flow .phone__url { color: var(--ph-btn); text-decoration: underline; }
.flow .phone--telegram .phone__url { color: #168acd; }
.flow .phone__header { display: block; margin-bottom: 2px; font-weight: 600; overflow-wrap: anywhere; }
.flow .phone__footer { display: block; margin-top: 6px; color: var(--ph-meta); font-size: 13px; overflow-wrap: anywhere; }
.flow .phone__quote { display: block; margin: 0 0 4px; padding: 4px 8px; border-left: 4px solid var(--ph-quote); border-radius: 6px; background: rgba(11, 20, 26, .05); color: var(--ph-meta); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.flow .phone__img { display: block; max-width: 100%; border-radius: 6px; object-fit: cover; background: rgba(11, 20, 26, .08); }
.flow .phone__img--msg { width: 300px; aspect-ratio: 4 / 3; }
.flow .phone__img--card { width: 100%; aspect-ratio: 16 / 10; border-radius: 6px 6px 0 0; }
.flow .phone__tile { display: grid; place-items: center; padding: 8px; color: var(--ph-meta); font-size: 12px; text-align: center; overflow-wrap: anywhere; background: repeating-linear-gradient(135deg, rgba(11, 20, 26, .06) 0 8px, rgba(11, 20, 26, .1) 8px 16px); }
.flow .phone__tile.phone__img--msg { width: 300px; max-width: 100%; border-radius: 6px; }
.flow .phone__btns { display: flex; flex-direction: column; margin: 6px -7px 0 -9px; }
.flow .phone__bubble.has-photo > .phone__btns { margin-left: -3px; margin-right: -3px; }
.flow .phone__btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 38px; padding: 0 12px; border-top: 1px solid var(--ph-line); color: var(--ph-btn); font-weight: 500; font-size: 14px; }
.flow .phone__btnlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow .phone__btnicon { font-size: 13px; }
.flow .phone__list > summary { list-style: none; cursor: pointer; }
.flow .phone__list > summary::-webkit-details-marker { display: none; }
.flow .phone__sheet { display: grid; margin: 0 -7px 0 -9px; padding: 8px 12px; border-top: 1px solid var(--ph-line); background: #fff; }
.flow .phone__sheethead { padding-bottom: 6px; font-weight: 600; }
.flow .phone__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ph-line); }
.flow .phone__row > span:first-child { display: grid; min-width: 0; overflow-wrap: anywhere; }
.flow .phone__rowsub { color: var(--ph-meta); font-size: 13px; }
.flow .phone__radio { flex: 0 0 18px; height: 18px; border: 2px solid var(--ph-meta); border-radius: 50%; }
.flow .phone__reactions { position: absolute; left: 8px; bottom: -14px; padding: 0 5px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(11, 20, 26, .2); font-size: 14px; line-height: 22px; }
.flow .is-mine .phone__reactions { left: auto; right: 8px; }
.flow .phone__row-msg:has(.phone__reactions) { margin-bottom: 14px; }
.flow .phone__keys { display: grid; gap: 2px; width: min(82%, 300px); }
.flow .phone__keys .phone__btn { height: 34px; border: 0; border-radius: 8px; background: rgba(46, 74, 98, .35); color: #fff; font-size: 13.5px; }
.flow .phone--sms .phone__keys .phone__btn { background: none; color: var(--ph-btn); border: 1px solid var(--ph-line); }
.flow .phone__carousel { display: flex; gap: 6px; align-self: stretch; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px 2px 6px; min-width: 0; contain: inline-size; }
.flow .phone__card { flex: 0 0 236px; display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; border-radius: 8px; background: var(--ph-in); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); overflow: hidden; }
.flow .phone__card .phone__tile { aspect-ratio: 16 / 10; }
.flow .phone__cardtext { padding: 6px 9px 8px; flex: 1; }
.flow .phone__cardtext .phone__text::after { display: none; }
.flow .phone__card .phone__btns { margin: 0; }
.flow .phone__warn, .flow .phone__note { max-width: 82%; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; }
.flow .phone__warn { background: #fff4e5; color: #8a4b00; }
.flow .phone__note { background: rgba(255, 255, 255, .7); color: var(--ph-meta); }
.flow .phone__bubble.is-undelivered { opacity: .7; }
.flow .phone__undelivered { display: block; margin-top: 4px; color: var(--bad); font-size: 12px; }
.flow .is-carrier > .phone__bubble { background: #f0f0f0; }
.flow .phone .turn--focus > .phone__bubble { box-shadow: 0 0 0 3px var(--brand-sky-deep); }
.flow .phone .turn--focus { scroll-margin-top: 16px; }
@media (max-width: 520px) { .flow .phone { width: 100%; border-width: 0; border-radius: 12px; } .flow .phone__img--msg { width: 240px; } }
/* pending invitations to other workspaces, under the top bar (flow/invitations.ts) */
.flow .invites { display: grid; gap: 8px; padding: 12px 20px; box-shadow: 0 1px 0 var(--line); }
.flow .invite { align-items: center; flex-wrap: wrap; }
.flow .invite .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.flow .invite p { margin: 0; }
.flow .invite__err { margin-top: 4px; color: var(--bad-ink); font-weight: 500; }
.flow .invites__why { margin: 0; }
/* the first sign-in's invitations, before any workspace (invitationScreen) */
.flow .invited { max-width: 640px; margin: 48px auto 0; }
.flow .invited .invites { width: 100%; padding: 8px 0 0; box-shadow: none; text-align: left; }
.flow .linkfield { display: flex; align-items: center; gap: 8px; min-width: 0; }
.flow .linkfield__url { flex: 1; min-width: 0; font-size: .8125rem; }
.flow .linkfield .btn { flex: none; }
.flow .list > li.list__wrap { flex-wrap: wrap; }
.flow .list__more { flex-basis: 100%; }
.flow .list__more:empty { display: none; }

/* The Playground page: the agent's playground in a sandboxed frame, as tall as the window allows. */
.flow .playground__frame { display: block; width: 100%; height: calc(100vh - 260px); min-height: 520px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.flow .playground__past { margin-top: 32px; }

/* Tool traffic shares the dashboard's fields; filters wrap without widening the page. */

/* Tool activity: summary first, one browsable table, and details on demand. */
.flow .tool-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.flow .tool-controls .select { width: auto; min-width: 140px; }
.flow .tool-filters { display: grid; gap: 0; padding: 0; margin-bottom: 20px; min-width: 0; }
.flow .tool-filters .check { flex: none; padding: 10px 0; font-size: .8125rem; }
.flow .tool-activity { overflow: hidden; min-width: 0; }
.flow .tool-activity > .tabs { padding: 4px 12px 0; }
.flow .tool-activity .tbl td { vertical-align: middle; }
.flow .tool-activity .tbl td:first-child { min-width: 190px; }
.flow .tool-activity .tbl th:last-child { width: 1%; }
.flow .tool-cell { display: grid; gap: 4px; }
.flow .tool-cell code { color: var(--ink); font-size: .8125rem; font-weight: 500; }
.flow .tool-cell .hint { font-size: .75rem; }
.flow .tool-pagination { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.flow .tool-pagination .hint { font-size: .75rem; }
.flow dialog.tool-inspector { width: min(100% - 32px, 720px); }
.flow .tool-metadata { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px 16px; font-size: .8125rem; }
.flow .tool-metadata dt { color: var(--ink-3); }
.flow .tool-metadata dd { margin: 0; overflow-wrap: anywhere; }
.flow .tool-content-prompt { display: grid; justify-items: start; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.flow .tool-content-prompt h3, .flow .tool-content h3 { font: 600 .875rem/1.4 var(--font); }
.flow .tool-content pre { padding: 14px; border-radius: 10px; background: var(--tile); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75rem; max-height: 360px; overflow: auto; margin-top: 8px; }
@media (max-width: 600px) {
  .flow .tool-controls { width: 100%; justify-content: space-between; }
  .flow .tool-controls .seg a { padding: 0 10px; }
  .flow .tool-controls .select { min-width: 0; }
  .flow .tool-activity #tool-recent .tbl { min-width: 0; display: block; }
  .flow #tool-recent .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .flow #tool-recent .tbl tbody { display: block; }
  .flow #tool-recent .tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 16px; border-bottom: 1px solid var(--line); }
  .flow #tool-recent .tbl td { padding: 0; border: 0; min-width: 0; }
  .flow #tool-recent .tbl td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .flow #tool-recent .tbl td:nth-child(2) { grid-column: 1; grid-row: 2 / 4; }
  .flow #tool-recent .tbl td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; color: var(--ink-3); font-size: .75rem; }
  .flow #tool-recent .tbl td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  .flow #tool-recent .tbl td:nth-child(5) { grid-column: 2; grid-row: 3; text-align: right; }
  .flow #tool-recent .tbl tr:hover td { background: none; }
  .flow dialog.tool-inspector { width: 100%; }
}

/* Shared platform glyphs, with names available on hover and keyboard focus. */
.flow .tool-source-bar { position: relative; display: flex; align-items: center; gap: 5px; overflow-x: auto; padding: 12px 14px; scrollbar-width: thin; }
.flow .tool-source-choice, .flow .tool-source-token { display: inline-flex; flex: none; align-items: center; gap: 0; min-height: 38px; padding: 8px; border-radius: 10px; color: var(--ink-2); text-decoration: none; white-space: nowrap; max-width: 100%; }
.flow .tool-source-choice:hover, .flow .tool-source-choice:focus-visible, .flow .tool-source-choice[aria-current], .flow .tool-source-token:hover, .flow .tool-source-token:focus-visible { background: var(--tile); color: var(--ink); gap: 8px; }
.flow .tool-source-choice[aria-current] { box-shadow: var(--ring-soft); background: var(--brand-paper); }
.flow .tool-source-label { display: block; max-width: 0; opacity: 0; overflow: hidden; text-overflow: ellipsis; transition: max-width .16s ease, opacity .16s ease; font-size: .8125rem; }
.flow .tool-source-choice:hover .tool-source-label, .flow .tool-source-choice:focus-visible .tool-source-label, .flow .tool-source-choice[aria-current] .tool-source-label, .flow .tool-source-token:hover .tool-source-label, .flow .tool-source-token:focus-visible .tool-source-label { max-width: 170px; opacity: 1; }
.flow .tool-source-choice:focus-visible, .flow .tool-source-token:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.flow .tool-platform { display: inline-flex; position: relative; align-items: center; justify-content: center; flex: none; }
.flow .tool-platform svg { flex: none; }
.flow .tool-platform--whatsapp { color: #16a35b; }
.flow .tool-platform--web { color: #4679d8; }
.flow .tool-platform--sms, .flow .tool-platform--mms { color: #3578e5; }
.flow .tool-platform--imessage { color: #32bc4c; }
.flow .tool-platform--telegram { color: #3390ec; }
.flow .tool-platform--plugin { color: #8e63b8; }
.flow .tool-platform-badge { display: grid; place-items: center; position: absolute; right: -5px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface); box-shadow: var(--ring-soft); }
.flow .tool-filter-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.flow .tool-search { display: flex; align-items: center; gap: 10px; flex: 1 1 180px; color: var(--ink-3); min-width: 0; }
.flow .tool-search .input { width: 100%; min-width: 0; }
.flow .tool-filter-fields .check { padding: 8px 0; }
.flow .tool-filter-fields .icon-btn { flex: none; width: 36px; height: 36px; border-radius: 10px; text-decoration: none; }
.flow .tool-filter-apply { background: var(--ink); color: var(--surface); }
.flow .tool-filter-apply:hover { background: var(--ink-2); color: var(--surface); }
.flow .tool-origin { display: grid; justify-items: start; gap: 2px; }
.flow .tool-client-name { max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .75rem; }
.flow #tool-recent .tbl { table-layout: fixed; }
.flow #tool-recent .tbl th:nth-child(1) { width: 28%; }
.flow #tool-recent .tbl th:nth-child(2) { width: 30%; }
.flow #tool-recent .tbl th:nth-child(3) { width: 18%; }
.flow #tool-recent .tbl th:nth-child(4) { width: 14%; }
.flow #tool-recent .tbl th:nth-child(5) { width: 10%; }
.flow .tool-result { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; }
.flow .tool-result.is-ok { color: var(--good-ink); background: var(--good-soft); }
.flow .tool-result.is-error { color: var(--bad-ink); background: var(--bad-soft); }
.flow .tool-inspector .tool-result { width: auto; height: auto; gap: 6px; padding: 4px 8px; border-radius: 8px; font-size: .8125rem; }
.flow .tool-inspector .tool-result::after { content: attr(aria-label); }
.flow .tool-inspector .tool-source-token { gap: 8px; padding: 0; min-height: 0; }
.flow .tool-inspector .tool-source-label { max-width: none; opacity: 1; }
@media (max-width: 600px) {
  .flow .tool-source-bar { padding: 10px; }
  .flow .tool-filter-fields { gap: 10px; padding: 12px; }
  .flow .tool-search { flex-basis: calc(50% - 10px); }
  .flow .tool-search > svg { display: none; }
  .flow .tool-filter-fields .check { margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) { .flow .tool-source-label { transition: none; } }

.flow .tool-channel-group { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
@media (max-width: 600px) {
  /* Touch targets stay still; the selected or keyboard-focused icon supplies the name. */
  .flow .tool-source-choice:not([aria-current]):not(:focus-visible):hover { gap: 0; }
  .flow .tool-source-choice:not([aria-current]):not(:focus-visible):hover .tool-source-label { max-width: 0; opacity: 0; }
}

/* Usage is the primary Tools view; individual calls remain available on demand. */
.flow .tool-analytics { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(330px, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.flow .tool-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 22px 16px; }
.flow .tool-section-head h2 { font: 600 1rem/1.4 var(--font); margin: 0; }
.flow .tool-section-head p { margin: 6px 0 0; }
.flow .tool-section-head > .hint { font-size: .75rem; white-space: nowrap; }
.flow .tool-ranking { min-width: 0; overflow: hidden; }
.flow .tool-ranking-labels, .flow .tool-ranked-row { display: grid; grid-template-columns: minmax(140px, .9fr) minmax(90px, 1.2fr) 46px; gap: 14px; align-items: center; padding: 0 22px; }
.flow .tool-ranking-labels { padding-top: 12px; padding-bottom: 12px; border-block: 1px solid var(--line); font-size: .6875rem; color: var(--ink-3); }
.flow .tool-ranking-labels > :last-child { text-align: right; }
.flow .tool-ranked-list { list-style: none; padding: 0; margin: 0; }
.flow .tool-ranked-row { min-height: 49px; border-bottom: 1px solid var(--line); }
.flow .tool-ranked-row:hover { background: var(--tile); }
.flow .tool-ranked-name { display: flex; gap: 12px; align-items: center; min-width: 0; text-decoration: none; color: var(--ink); }
.flow .tool-ranked-name code { font-size: .75rem; overflow-wrap: anywhere; }
.flow .tool-ranked-name:hover code { text-decoration: underline; text-underline-offset: 3px; }
.flow .tool-rank { color: var(--ink-3); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.flow .tool-ranked-count { font-size: .8125rem; text-align: right; font-variant-numeric: tabular-nums; }
.flow .tool-usage-track { display: flex; align-items: stretch; height: 16px; min-width: 0; border-radius: 4px; background: var(--tile); }
.flow .tool-usage-segment { display: block; flex: none; height: 100%; background: var(--platform-color); border-right: 1px solid var(--surface); }
.flow .tool-usage-segment:first-child { border-radius: 4px 0 0 4px; }
.flow .tool-usage-segment:last-child { border-radius: 0 4px 4px 0; border-right: 0; }
.flow .tool-usage-segment:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; z-index: 1; }
.flow .tool-ranking-note { padding: 14px 22px; margin: 0; font-size: .6875rem; line-height: 1.6; }
.flow .tool-trend-column { display: grid; gap: 16px; min-width: 0; }
.flow .tool-usage-chart { min-width: 0; padding-bottom: 16px; }
/* "Usage over time" (tools.ts usageChart): a time axis that moves like a map. The head has the
   presets' dropdown at its end; then the span line with − and +; then the bars across the card's
   width (drawn at its width, never scrolled). A drag, a sideways swipe or scroll moves it
   (touch-action pan-y: a vertical swipe still scrolls the page), a pinch zooms; the tooltip is
   the pass-rate chart's, beside the hovered bar. */
.flow .tool-chart__head { align-items: center; padding-bottom: 8px; }
.flow .tool-chart__preset { gap: 4px; height: 30px; padding: 0 8px 0 12px; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.flow .tool-chart__preset svg { color: var(--ink-3); }
.flow .tool-chart__menu { width: 168px; }
.flow .tool-chart__menu button { justify-content: space-between; }
.flow .tool-chart__menu button svg { color: var(--ink); visibility: hidden; }
.flow .tool-chart__menu button[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.flow .tool-chart__menu button[aria-checked="true"] svg { visibility: visible; }
@media (max-width: 560px) { .flow .tool-chart__menu { position: absolute; left: auto; right: 0; top: calc(100% + 8px); width: 168px; } }
.flow .tool-chart__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; margin: 0 22px 8px; }
.flow .tool-chart__span { font-size: .8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.flow .tool-chart__zoom { flex: none; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; }
.flow .tool-chart__zoombtn { width: 28px; height: 28px; }
.flow .tool-chart__zoombtn:disabled { opacity: .35; cursor: default; background: transparent; }
.flow .tool-chart { position: relative; margin: 0 14px; color: var(--ink-3); touch-action: pan-y; overscroll-behavior-x: contain; cursor: grab; user-select: none; -webkit-user-select: none; transition: opacity .15s; }
.flow .tool-chart.is-over-bar { cursor: pointer; }
.flow .tool-chart.is-moving { cursor: grabbing; }
.flow .tool-chart:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 8px; }
.flow .tool-chart > svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow .tool-chart__band { fill: color-mix(in srgb, var(--ink) 8%, transparent); }
.flow .tool-usage-chart[aria-busy="true"] .tool-chart { opacity: .45; }
.flow .tool-chart__tip { min-width: 150px; pointer-events: none; }
.flow .tool-chart__tiprow { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.flow .tool-chart__tiprow i { width: 8px; height: 8px; border-radius: 2px; background: var(--platform-color); }
.flow .tool-chart__tiprow b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.flow .tool-chart__tiptotal { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
.flow .tool-chart__tiptotal i { background: none; }
.flow .tool-chart__tip.is-pinned { pointer-events: auto; }
.flow .tool-chart__tiplink { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--info); font-weight: 600; text-decoration: none; }
.flow .tool-chart__tip.is-pinned .tool-chart__tiplink { min-height: 32px; }
.flow .tool-chart__tiplink:hover { text-decoration: underline; text-underline-offset: 3px; }
.flow .tool-counts-details td:first-child a { color: var(--ink); text-decoration: none; }
.flow .tool-counts-details td:first-child a:hover { color: var(--info); text-decoration: underline; text-underline-offset: 3px; }
/* The assistant's ✦ button (fixed, bottom right: right 20px + 52px) never covers the counts
   table's Total column or the Platforms counts: on a wide screen the Tools page keeps the same
   88px right gutter as a page with a fix bar (the fix-bar rule, .ann-fbar). */
@media (min-width: 861px) { .flow .appmain:has(.tool-usage-chart) { padding-right: 88px; } }
.flow .tool-chart-note { font-size: .6875rem; line-height: 1.6; min-height: 1.6em; margin: 8px 22px; }
.flow .tool-counts-details .tbl th, .flow .tool-counts-details .tbl td { padding: 8px 10px; vertical-align: middle; white-space: nowrap; }
.flow .tool-counts-details .tbl td:not(:first-child), .flow .tool-counts-details .tbl th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.flow .tool-counts-mark { display: inline-flex; vertical-align: middle; }
.flow .tool-counts-details { font-size: .75rem; margin: 12px 22px 0; }
.flow .tool-counts-details summary { cursor: pointer; color: var(--ink-2); }
.flow .tool-counts-details .tbl-wrap { max-height: 260px; margin-top: 12px; }
.flow .tool-platform-card { padding: 20px 22px; }
.flow .tool-platform-card h3 { margin: 0 0 14px; font: 600 .8125rem/1.4 var(--font); }
.flow .tool-platform-legend { display: grid; gap: 3px; }
.flow .tool-platform-key { display: flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; color: var(--ink-2); font-size: .75rem; }
.flow .tool-platform-key::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--platform-color); flex: none; }
.flow .tool-platform-key b { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.flow .tool-platform-key:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.flow .tool-failure-note { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--ink-2); text-decoration: none; padding: 0 4px; }
.flow .tool-call-details > summary { padding: 18px 22px; cursor: pointer; color: var(--ink-2); font-size: .8125rem; font-weight: 500; }
.flow .tool-call-details[open] > summary { border-bottom: 1px solid var(--line); }
@media (max-width: 1100px) {
  .flow .tool-analytics { grid-template-columns: minmax(0, 1fr); }
  .flow .tool-trend-column { grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); }
}
@media (max-width: 650px) {
  .flow .tool-trend-column { grid-template-columns: minmax(0, 1fr); }
  .flow .tool-ranking-labels, .flow .tool-ranked-row { grid-template-columns: minmax(115px, 1fr) minmax(70px, 1fr) 30px; gap: 8px; padding-inline: 14px; }
  .flow .tool-ranked-name { gap: 6px; }
  .flow .tool-rank { display: none; }
  .flow .tool-section-head { padding: 18px 14px 14px; }
  .flow .tool-section-head > .hint { display: none; }
  .flow .tool-chart__bar, .flow .tool-chart-note, .flow .tool-counts-details { margin-inline: 14px; }
  .flow .tool-chart { margin-inline: 6px; }
  .flow .tool-ranking-note { padding-inline: 14px; }
  .flow .tool-ranking-labels { font-size: .625rem; }
}

/* The workspace's Get started card (flow/pages/getstarted.ts): the numbered steps, a done one ticked. */
.flow .getstarted { margin-bottom: 24px; }
.flow .gs-body { margin-top: 16px; }
.flow .gs-body p { margin: 0; }
.flow .gs-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 440px; }
.flow .gs-add .input { flex: 1; min-width: 160px; height: 36px; }
.flow .gs-prompt summary { cursor: pointer; font-size: var(--fs-sm); }
.flow .gs-prompt pre { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Tests: cost and latency (task 20). The list's up/down marker against the
   previous run that ended normally: up is worse for cost and latency. */
.flow .pmark { display: inline-block; margin-left: 6px; font-size: .625rem; line-height: 1; vertical-align: 1px; color: var(--ink-3); }
.flow .pmark--up { color: var(--ink); }
.flow .pmark--down { color: var(--brand-sage-deep); }
/* cost per run and p95 first reply over the last sessions */
.flow .spark__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; }
.flow .spark__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.flow .spark { display: flex; align-items: flex-end; gap: 2px; height: 44px; border-bottom: 1px solid var(--line); }
.flow .spark__bar { flex: 1 1 0; min-width: 2px; max-width: 16px; border-radius: 2px 2px 0 0; background: var(--brand-sky-deep); }
.flow .spark__bar:hover, .flow .spark__bar:focus-visible { background: var(--ink); outline: none; }
/* where a session's turns spent their time: model, tools (simulated), the agent */
.flow .psplit { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line); max-width: 360px; }
.flow .psplit__model { background: var(--brand-sky); }
.flow .psplit__tools { background: var(--brand-sage-deep); }
.flow .psplit__agent { background: var(--ink-4); }
.flow .legend i.psplit__model { background: var(--brand-sky); }
.flow .legend i.psplit__tools { background: var(--brand-sage-deep); }
.flow .legend i.psplit__agent { background: var(--ink-4); }

/* ---------- dashboard v3: Connections, a connection, Templates, Developers (Webhooks,
   Usage, Messaging keys), and Conversations' sender and delivery status. The dots
   themselves are the shell's .sd rules; the status colours are its --st-* tokens. ---------- */
.flow .cpill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--tile); font-size: .8125rem; font-weight: 600; white-space: nowrap; color: var(--ink-2); }
.flow .cpill--green { background: var(--good-soft); color: var(--good-ink); }
.flow .cpill--yellow { background: var(--warn-soft); color: var(--warn-ink); }
.flow .cpill--red { background: var(--bad-soft); color: var(--bad-ink); }
.flow .turn__meta .cpill { height: 20px; padding: 0 8px; font-size: .6875rem; gap: 5px; }
.flow .connlist, .flow .tpllist, .flow .hooklist { list-style: none; margin: 0; padding: 0; }
.flow .connlist > li + li, .flow .tpllist > li + li, .flow .hooklist > li + li { border-top: 1px solid var(--line); }
.flow .connrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 20px; color: inherit; text-decoration: none; }
.flow .connrow:hover { background: var(--hover); }
.flow .connrow__main, .flow .tplrow__main, .flow .hookrow__main { display: grid; gap: 3px; min-width: 0; }
.flow .connrow__main > * , .flow .tplrow__main > * { overflow-wrap: anywhere; }
.flow .connrow__why { color: var(--ink); }
.flow .connrow__end, .flow .tplrow__end, .flow .hookrow__end { display: grid; justify-items: end; gap: 4px; }
.flow .xsmall { font-size: .75rem; }
.flow .lineicon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--tile); color: var(--ink-2); }
.flow .connhead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.flow .connhead h1, .flow .connhead p { overflow-wrap: anywhere; }
.flow .connwhy { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--ring-soft); font-size: var(--fs-sm); margin-bottom: 16px; }
.flow .connwhy .sd { margin-top: 5px; }
.flow .connwhy--red { background: var(--bad-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 30%, transparent); }
.flow .connwhy--yellow { background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 35%, transparent); }
.flow .connsplit .kv dd { min-width: 0; overflow-wrap: anywhere; }
.flow .connsplit > *, .flow .connsplit .stack-16 > * { min-width: 0; }
.flow .dotrules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink-2); }
.flow .dotrules li { display: flex; gap: 10px; align-items: flex-start; }
.flow .dotrules li .sd { margin-top: 5px; }
.flow .dotrules li.is-cur { color: var(--ink); font-weight: 500; }
.flow .errrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.flow .errrow code { font: 600 .8125rem var(--mono); }
.flow .addkinds { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; border: 0; }
.flow .addkind { align-items: flex-start; }
.flow .addkind > span { display: grid; gap: 2px; }
.flow .lims { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 14px; }
.flow .lim { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; font-size: var(--fs-sm); }
.flow .lim__l { color: var(--ink-2); }
.flow .lim__v { font-weight: 600; white-space: nowrap; }
.flow .lim__bar { grid-column: 1 / -1; }
.flow .lim__bar.is-full > i { background: var(--bad); }
/* Usage's Problems card (devusage.ts refusalsCard): failed deliveries and refused calls: each reason in words, its names small. */
.flow .refs__slot:not(:empty) { margin-top: 16px; }
.flow .refs + .refs { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.flow .refs__total { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.flow .refs__total b { color: var(--ink); font-weight: 600; }
.flow .refs__list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 14px; }
.flow .refs__row { display: grid; gap: 2px; font-size: var(--fs-sm); }
.flow .refs__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.flow .refs__head b { font-weight: 600; color: var(--ink); }
.flow .refs__n { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow .refs__code { font: 500 .75rem/1.4 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.flow .refs__fix { margin: 2px 0 0; }
.flow .refs__when { color: var(--ink-3); }
/* The Problems card's parts: a mode's name, each part's heading. */
.flow .refs__mode { margin: 12px 0 0; font-size: var(--fs-sm); }
.flow .refs__h { margin: 14px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.flow .refs__head .tag { margin-left: 6px; vertical-align: 1px; }
.flow .hookrow { display: grid; gap: 10px; padding: 14px 20px; }
.flow .hookrow__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; }
.flow .hookrow__url { overflow-wrap: anywhere; }
.flow .hookevents { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.flow .whochip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--tile); font-size: .6875rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; align-self: flex-start; }
.flow .whochip--agent { background: color-mix(in srgb, var(--brand-sky) 45%, #fff); color: var(--ink); }
.flow .turn__err { color: var(--bad-ink); align-self: flex-start; max-width: 46ch; }
/* why a reply was graded down: a short line under it, and per rule in the Grade tab */
.flow .turn__why { color: var(--ink-2); align-self: flex-start; max-width: 52ch; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.flow .rulewhy { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--bad) 5%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 20%, transparent); }
.flow .rulewhy__name { font-weight: 600; color: var(--ink); }
.flow .rulewhy__text { font-size: .875rem; color: var(--ink); line-height: 1.5; margin: 0; }
.flow .rulewhy__none { font-size: .8125rem; color: var(--ink-3); margin: 0; }
.flow .rulewhy__l { font: 500 .6875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bad-ink); margin-top: 2px; }
.flow .rulewhy q { font-size: .875rem; color: var(--ink); quotes: "\201C" "\201D"; overflow-wrap: anywhere; }
.flow .rulewhy code { font: 500 .6875rem var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.flow .revealline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
@media (max-width: 600px) {
  .flow .connrow { grid-template-columns: auto minmax(0, 1fr); padding: 12px 16px; }
  .flow .connrow__end { grid-column: 2; justify-items: start; }
  .flow .hookrow__top { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; }
  .flow .hookrow__end { justify-items: start; }
  .flow .hookrow { padding-inline: 16px; }
  .flow .errrow { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; }
}

/* ---------- Insights (Watch → Insights): finding cards, then topics as bars ---------- */
.flow .insights { display: grid; gap: 8px; container: insights / inline-size; }
/* Issues and Topics: stacked, Issues first; side by side from 1100 px of content
   (the founder, 24 Oct 2026: both in view without scrolling) */
.flow .insights__cols { display: grid; gap: 0 32px; align-items: start; }
@container insights (min-width: 1100px) {
  .flow .insights__cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .flow .insights__cols > section + section > .section-title:first-child { margin-top: 0; }
}
/* an issue: one compact row that opens in place */
.flow .irows { list-style: none; margin: 0; padding: 4px 0; }
.flow .irow + .irow { border-top: 1px solid var(--line); }
.flow .irow__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; width: 100%; padding: 12px 20px 12px 16px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.flow .irow__head:hover { background: var(--hover); }
.flow .irow__head:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; border-radius: 6px; }
.flow .irow__main { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; }
.flow .irow__chev { width: 12px; padding-top: 5px; color: var(--ink-3); font-size: .875rem; line-height: 1; transition: transform .15s; }
.flow .irow__head[aria-expanded="true"] .irow__chev { transform: rotate(90deg); }
.flow .irow__title { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; max-width: 100%; }
.flow .irow__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .9375rem/1.4 var(--font); }
.flow .irow__title .tag { flex: none; height: 20px; padding: 0 8px; font-size: .6875rem; }
.flow .irow__facts { display: flex; align-items: baseline; gap: 10px; flex: none; margin-left: auto; font-size: .8125rem; color: var(--ink-3); white-space: nowrap; }
.flow .irow__panel { display: grid; gap: 12px; padding: 2px 20px 16px 40px; }
/* The kind of issue, small and quiet: "Reply" (the grader's) or "Conversation" (Insights'). */
.flow .irow__kind { align-self: center; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; font-size: .6875rem; line-height: 18px; color: var(--ink-2); letter-spacing: .02em; }
.flow .insights__source { margin: 0 0 8px; }
.flow .irow__panel .issue__meta { margin-top: 0; }
.flow .irow__panel .issue__evidence { grid-column: auto; }
.flow .irows__more { padding: 4px 12px 10px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .flow .irow__chev { transition: none; } }
/* Feedback (below Issues and Topics): what callers left with the agent's MCP server or CLI,
   tagged Tooling (sky) or Product (sage), its text as written, where it came from and when */
.flow .insights__feedback { margin-top: 8px; }
.flow .feedback__controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.flow .feedback { list-style: none; margin: 0; padding: 4px 0; }
.flow .feedback__item { display: grid; gap: 6px; padding: 14px 24px; }
.flow .feedback__item + .feedback__item { border-top: 1px solid var(--line); }
.flow .feedback__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .8125rem; color: var(--ink-3); }
.flow .feedback__head .tag { height: 20px; padding: 0 8px; font-size: .6875rem; }
.flow .feedback__source { min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.flow .feedback__time { margin-left: auto; white-space: nowrap; }
.flow .feedback__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font-size: .9375rem; line-height: 1.5; }
@media (max-width: 640px) { .flow .feedback__item { padding-inline: 16px; } .flow .feedback__time { margin-left: 0; } }
.flow .insights__collecting .meter { width: min(240px, 100%); }
.flow .insight__examples { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0; }
.flow .insights__closed { margin-top: 16px; }
.flow .insights__closed > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); padding: 6px 0 10px; }
.flow .insights__closed > summary:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 6px; }
.flow .topics { list-style: none; margin: 0; padding: 4px 0; }
.flow .topic { display: grid; gap: 8px; padding: 14px 24px; }
.flow .topic + .topic { border-top: 1px solid var(--line); }
.flow .topic__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.flow .topic__name { padding: 0; border: 0; background: none; color: var(--ink); font: 600 .9375rem/1.4 var(--font); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.flow .topic__name:hover { text-decoration-color: currentColor; }
.flow .topic__name:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 4px; }
.flow .topic__name::after { content: " ▸"; color: var(--ink-3); font-weight: 400; }
.flow .topic__name[aria-expanded="true"]::after { content: " ▾"; }
.flow .topic__count { font-size: var(--fs-sm); color: var(--ink-2); }
/* a change on the week (or window) before: ▲/▼ and a percentage. Its tone, not its
   direction, picks the colour: topics up are good, issues up are bad. The status
   colours' text pair on white: --bad (6.6:1 on white, 6.3:1 on the page) and
   --good-ink (sage-deep alone is 4.4:1 on white, under AA for 13 px text). */
.flow { --trend-good: var(--good-ink); --trend-bad: var(--bad); }
.flow .delta { font: 600 .8125rem/1.2 var(--font); white-space: nowrap; font-variant-numeric: tabular-nums; cursor: default; }
.flow .delta--good { color: var(--trend-good); }
.flow .delta--bad { color: var(--trend-bad); }
.flow .delta--neutral { color: var(--ink-3); font-weight: 500; }
.flow .topic__bar { height: 10px; border-radius: 999px; background: var(--tile); overflow: hidden; }
.flow .topic__bar > i { display: block; height: 100%; border-radius: inherit; background: var(--brand-sky-deep); }
.flow .topic__outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--ink-2); }
.flow .topic__split { display: inline-flex; width: 120px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--tile); }
.flow .topic__split > i { display: block; height: 100%; }
.flow .topic__split > i.is-well { background: var(--brand-sage-deep); }
.flow .topic__split > i.is-gaveup { background: var(--ink); }
.flow .topic__split > i.is-open { background: var(--brand-peach); }
.flow .topic__convs { padding: 4px 0 2px; }
.flow .topic__list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.flow .topic__list li { display: flex; flex-wrap: wrap; gap: 4px 12px; }
@media (max-width: 600px) {
  .flow .topic { padding: 14px 16px; }
  .flow .irow__head { padding: 10px 14px 10px 12px; }
  .flow .irow__facts { margin-left: 0; flex-wrap: wrap; row-gap: 2px; white-space: normal; min-width: 0; flex-shrink: 1; }
  .flow .irow__panel { padding: 2px 14px 14px 32px; }
  .flow .irow__panel .issue__actions .btn { flex: 1; }
}

/* ---------- Onboarding (dashboard v3 stage 4): /welcome's picker, the API path's setup, the agent path ---------- */
.flow .onb { max-width: 760px; margin: 0 auto; padding: 8px 0 48px; display: grid; gap: 14px; align-content: start; }
.flow .onb--pick { max-width: 880px; }
.flow .onb__back { justify-self: start; }
.flow .onb__hello { justify-self: start; margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--ring-soft); font-size: .8125rem; color: var(--ink-2); }
.flow .onb__h { margin: 0; font: 500 clamp(1.75rem, 4vw, 2.5rem)/1.12 var(--head); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.flow .onb__sub { margin: 0; color: var(--ink-2); font-size: 1.0625rem; max-width: 60ch; }
.flow .pick2s { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.flow .pick2 { position: relative; display: grid; align-content: start; gap: 6px; min-height: 200px; padding: 24px 24px 56px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: var(--ring); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.flow .pick2:hover, .flow .pick2[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.flow .pick2:focus-visible { outline: 2px solid var(--brand-sky-deep); outline-offset: 3px; }
.flow .pick2[aria-busy="true"] { cursor: progress; opacity: .7; }
.flow .pick2__ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 14px; background: var(--brand-mist); color: var(--brand-sky-deep); }
.flow .pick2:nth-child(2) .pick2__ic { background: var(--brand-gradient); color: var(--ink); }
.flow .pick2__star { font-size: 1.375rem; }
.flow .pick2__t { font: 500 1.375rem/1.2 var(--head); letter-spacing: -.01em; }
.flow .pick2__d { font-size: .9375rem; color: var(--ink-2); }
.flow .pick2__go { position: absolute; left: 24px; bottom: 20px; color: var(--ink-3); }
.flow .pick2:hover .pick2__go { color: var(--ink); }
.flow .onb-bar { display: grid; gap: 10px; margin-top: 8px; }
.flow .onb-bar__l { margin: 0; font: 500 1.0625rem/1.35 var(--font); color: var(--ink); }
.flow .onb-bar__l b { font-weight: 600; color: var(--ink-3); font-size: .875rem; }
.flow .onb-bar__segs { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.flow .onb-bar__segs li { height: 6px; border-radius: 999px; background: var(--tile); }
.flow .onb-bar__segs li.is-done { background: var(--ok); }
.flow .onb-bar__segs li.is-doing { background: var(--brand-sky-deep); }   /* a whole segment: a part-filled one read as two */
.flow .onb-card { min-width: 0; }
.flow .onb-card .body { margin: 0; }
.flow .onb-wait { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--tile); color: var(--ink-2); font-size: var(--fs-sm); }
.flow .onb-wait__spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand-sky-deep); animation: spin 1s linear infinite; }
.flow .onb-ok { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 12%, #fff); }
.flow .onb-ok > svg { flex: none; color: var(--ok); }
.flow .onb-join { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--brand-mist); min-width: 0; }
.flow .onb-join__code { font: 600 1.25rem/1.3 var(--mono); overflow-wrap: anywhere; margin-bottom: 8px; background: none; }
.flow .onb-join__to { font-size: 1.0625rem; font-weight: 600; margin-bottom: 10px; overflow-wrap: anywhere; }
.flow .onb-join__main { display: grid; gap: 4px; min-width: 0; }
.flow .onb-join--qr { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.flow .onb-join__qr { display: grid; justify-items: center; gap: 6px; margin: 0; }
.flow .onb-join__qrimg { display: block; width: 148px; height: 148px; border-radius: 10px; background: #fff; box-shadow: var(--ring-soft); }
.flow .onb-join__qr .hint { margin: 0; text-align: center; }
.flow pre.code.onb-prompt { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font); font-size: .875rem; margin: 0; }
.flow .onb-curl { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.flow .onb-details > summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-sm); }
.flow .onb-details[open] > summary { margin-bottom: 10px; }
.flow .onb-byhand { display: grid; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); min-width: 0; }
.flow .onb-byhand__h { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--ink-3); }
.flow .onb-byhand .copyline, .flow .onb-join .copyline { min-width: 0; max-width: 100%; }
.flow .onb-byhand .copyline code { overflow-wrap: anywhere; white-space: normal; min-width: 0; }
.flow .onb-next { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-2); }
@media (max-width: 640px) {
  .flow .pick2s { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 10px; }
  .flow .pick2 { min-height: 0; padding: 20px 20px 48px; }
  .flow .pick2__go { left: 20px; bottom: 16px; }
  .flow .onb-join__code { font-size: 1.0625rem; }
  .flow .onb-join--qr { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .flow .onb-join__qr { justify-items: start; }
}

/* ---------- search: the top bar's middle, ⌘K (searchbar.ts); never a model ---------- */
.flow .srch { position: relative; width: min(440px, 100%); }
.flow .srch__open { display: none; }
.flow .srch__box { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--ring-soft); color: var(--ink-3); cursor: text; }
.flow .srch__box:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.flow .srch__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 .9375rem/1 var(--font); color: var(--ink); }
.flow .srch__input::-webkit-search-cancel-button { display: none; }
.flow .srch__box kbd { flex: none; padding: 3px 7px; border-radius: 6px; background: var(--tile); font: 600 .6875rem/1 var(--font); color: var(--ink-3); }
.flow .srch__drop { position: absolute; z-index: 110; left: 0; right: 0; top: calc(100% + 8px); max-height: min(70vh, 520px); overflow: auto; padding: 6px; border-radius: 16px; background: var(--surface); box-shadow: var(--lift); }
.flow .srch__drop[hidden] { display: none; }
.flow .srch__g + .srch__g { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.flow .srch__gl { display: block; padding: 8px 10px 4px; font: 500 .6875rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.flow .srch__r { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.flow .srch__r:hover, .flow .srch__r[aria-selected="true"] { background: var(--sel); }
.flow .srch__r svg { color: var(--ink-3); margin-top: 2px; }
.flow .srch__r b { display: block; font-weight: 500; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow .srch__r small { display: block; font-size: .75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow .srch__r mark { background: var(--brand-sage); color: inherit; border-radius: 3px; padding: 0 1px; }
.flow .srch__none { display: block; width: 100%; padding: 14px 12px; border: 0; background: none; color: var(--ink-3); font: 400 .875rem/1.3 var(--font); text-align: left; cursor: pointer; border-radius: 10px; }
.flow .srch__none:hover, .flow .srch__none:focus-visible { color: var(--ink-2); background: var(--hover); }
@media (max-width: 860px) {
  .flow .srch { width: auto; position: static; }
  .flow .srch__open { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--tile); color: var(--ink-2); cursor: pointer; }
  .flow .srch__box { display: none; }
  .flow .srch.is-active .srch__box { display: flex; position: fixed; z-index: 120; left: 12px; right: 12px; top: calc((var(--app-h) - 38px) / 2); box-shadow: 0 0 0 2px var(--ink), var(--lift); }
  .flow .srch__box kbd { display: none; }
  .flow .srch__drop { position: fixed; left: 12px; right: 12px; top: calc(var(--app-h) + 4px); max-height: calc(100dvh - var(--app-h) - 80px); }
}

/* ---------- the assistant: ✦ bubble bottom right, a side chat (assistant.ts) ---------- */
.asst__fab { position: fixed; right: 20px; bottom: 20px; z-index: 96; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--brand-gradient); box-shadow: var(--lift); color: var(--ink); font-size: 1.375rem; cursor: pointer; }
.asst__fab:hover, .asst__fab:focus-visible { box-shadow: var(--lift), 0 0 0 2px var(--ink); }
.asst__fab[hidden], .asst[hidden] { display: none; }
.asst { position: fixed; right: 0; top: var(--app-h); bottom: 0; z-index: 95; width: 380px; max-width: 100vw; display: flex; flex-direction: column; background: var(--surface); box-shadow: -1px 0 0 var(--line), -12px 0 32px rgba(28,26,23,.08); font-family: var(--font); color: var(--ink); }
.asst__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.asst__head .icon-btn { margin-left: auto; }
.asst__mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-gradient); }
.asst__body { flex: 1; overflow: auto; padding: 16px; display: grid; gap: 14px; align-content: start; }
.asst__thread { display: grid; gap: 14px; }
.asst__q { justify-self: end; max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: #fff; font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.asst__a { display: grid; gap: 10px; }
.asst__a p { margin: 0; }
.asst__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.asst__steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 12px; background: var(--brand-paper); box-shadow: inset 0 0 0 1px var(--line); }
.asst__steps .wi { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 .75rem/1 var(--font); }
.asst__steps b { display: block; font-weight: 600; font-size: .9375rem; }
.asst__steps .hint { display: block; font-size: .8125rem; margin: 2px 0 8px; }
.asst__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.asst__btns .btn { text-decoration: none; }
.asst__sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.asst__sugg .chip { white-space: normal; height: auto; min-height: 28px; padding: 6px 12px; text-align: left; line-height: 1.3; }
.asst__in { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.asst__in .input { flex: 1; min-width: 0; }
.asst__foot { margin: 0; padding: 0 16px 12px; font-size: .75rem; color: var(--ink-3); }
@media (max-width: 860px) {
  .asst__fab { right: 14px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; }
  .asst { width: auto; left: 0; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .flow .appmain { padding-bottom: 140px; }
}
/* a bare page (no bottom bar) keeps the bubble in the corner */
body:has(.shell--bare) .asst__fab { bottom: 20px; }
body:has(.shell--bare) .asst { bottom: 0; }
/* Home: the platforms as square cards */
.flow .platgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.flow .platcard { display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: 18px; color: var(--ink); text-decoration: none; }
.flow a.platcard:hover { box-shadow: var(--ring); }
.flow .platcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.flow .platcard__ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tile); color: var(--ink); }
.flow .platcard__name { font-weight: 600; }
.flow .platcard__line { flex: 1; }
.flow .platcard__nums { display: flex; gap: 20px; }
.flow .platcard__nums b { font: 500 1.5rem/1.1 var(--head); font-variant-numeric: tabular-nums; margin-right: 4px; }
.flow .platcard__nums small { color: var(--ink-3); font-size: .8125rem; }
.flow .platcard__end { margin-top: auto; }
.flow .launch .stack-8 { display: grid; gap: 8px; }
.flow .chip--on, .flow .chip--on:hover { color: #fff; }
.flow .seg [aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--ring-soft); }
.flow .launch .seg, .flow .dialog .seg { justify-self: start; align-self: flex-start; }
/* Colour: each platform's own (pc--<platform>), on its cards, chips and rail rows */
.flow .pc--imessage { --pc: #32bc4c; } .flow .pc--whatsapp { --pc: #16a35b; } .flow .pc--telegram { --pc: #3390ec; }
.flow .pc--sms { --pc: #3578e5; } .flow .pc--mcp { --pc: #1c1a17; } .flow .pc--chatgpt { --pc: #000; }
.flow .pc--claude { --pc: #d97757; } .flow .pc--cli { --pc: #7c4dcc; } .flow .pc--agent { --pc: #0e8fb5; } .flow .pc--messaging { --pc: #e0a01b; }
.flow [class*="pc--"] { color: var(--pc); }
.flow .platcard__ic[class*="pc--"] { background: color-mix(in srgb, var(--pc) 13%, transparent); }
.flow .chip--on [class*="pc--"] { color: inherit; }
.flow .chip > span[class*="pc--"] { display: inline-flex; }
.flow .bot-rail__item[aria-current="page"] .conn-ic { color: inherit; }
.flow button.bot-rail__item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.flow .pickgroups .hint { font-weight: 400; }
.flow button.platcard--add { border: 1px dashed var(--line); background: none; box-shadow: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.flow button.platcard--add:hover { background: var(--hover); }
.flow .platicon { display: inline-flex; vertical-align: middle; margin-right: 10px; }
.flow .setupsteps { display: grid; gap: 10px; margin: 0; padding-left: 20px; }
.flow .pathopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.flow .pathopt { position: relative; display: grid; gap: 6px; padding: 10px 10px 16px; border: 0; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--ring); text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.flow .pathopt:hover { box-shadow: var(--lift); }
.flow .pathopt[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink), var(--lift); }
.flow .pathopt > .pathopt__t, .flow .pathopt > .pathopt__d { padding: 0 8px; }
.flow .pathopt__check { position: absolute; top: 18px; right: 18px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; opacity: 0; transform: scale(.8); transition: opacity .15s ease, transform .15s ease; }
.flow .pathopt[aria-pressed="true"] .pathopt__check { opacity: 1; transform: none; }
.flow .pathopt__t { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.flow .pathopt__d { font-size: .875rem; color: var(--ink-3); }
.flow .hstack--between { justify-content: space-between; }
/* The two build paths' illustrations: HTML, on the brand's gradients */
.flow .art { display: flex; align-items: center; justify-content: center; gap: 0; min-height: 168px; margin-bottom: 8px; padding: 20px 16px; border-radius: 16px; overflow: hidden; }
/* its parts at their natural width, never cropped: scaled down to fit a narrower card (platformui.ts, art) */
.flow .art__fit { flex: none; display: flex; align-items: center; transform-origin: center; }
.flow .art--fw { background: var(--brand-gradient); }
.flow .art--api { background: var(--brand-aurora-diag); }
.flow .art-link { flex: none; width: 28px; height: 2px; background-image: linear-gradient(90deg, var(--ink-3) 50%, transparent 50%); background-size: 6px 2px; }
.flow .art-phone { flex: none; display: grid; gap: 6px; width: 128px; padding: 14px 10px; border-radius: 20px; background: var(--surface); box-shadow: var(--lift); }
.flow .art-bub { white-space: nowrap; max-width: none; padding: 6px 9px; border-radius: 14px; font-size: .6875rem; line-height: 1.25; }
.flow .art-bub--in { justify-self: start; background: #e9e9eb; color: var(--ink); border-bottom-left-radius: 4px; }
.flow .art-bub--out { justify-self: end; background: #32bc4c; color: #fff; border-bottom-right-radius: 4px; }
.flow .art-panel { flex: none; display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .78); box-shadow: var(--lift); }
.flow .art-panel__h { display: flex; align-items: center; gap: 6px; font: 600 .6875rem/1 var(--font); color: var(--ink-2); }
.flow .art-agent { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: #fff; font: 600 .75rem/1 var(--font); }
.flow .art-agent__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-sage); }
.flow .art-parts { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; }
.flow .art-part { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; background: var(--surface); box-shadow: var(--ring-soft); font: 500 .6875rem/1 var(--font); color: var(--ink-2); }
.flow .art-part svg { color: var(--ink-3); }
.flow .art-code { flex: none; white-space: nowrap; display: grid; gap: 4px; padding: 10px 12px 12px; border-radius: 12px; background: var(--tile-dark); color: #f4f1ea; font: 500 .6875rem/1.35 var(--mono); box-shadow: var(--lift); }
.flow .art-code b { color: var(--brand-sage); font-weight: 700; }
.flow .art-code__dim { color: rgba(244, 241, 234, .6); }
.flow .art-code__bar { display: flex; gap: 4px; margin-bottom: 4px; }
.flow .art-code__bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 241, 234, .3); }
.flow .art-chs { flex: none; display: grid; gap: 6px; }
.flow .art-ch { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--surface); box-shadow: var(--ring); font: 600 .6875rem/1 var(--font); color: var(--ink); }
.flow .art-ch--imessage svg { color: #32bc4c; } .flow .art-ch--whatsapp svg { color: #16a35b; } .flow .art-ch--telegram svg { color: #3390ec; }
.flow .setupcard, .flow .platcol { max-width: 880px; }   /* a platform page's column (its cards, the WhatsApp connect steps) */

/* ===================================================================
   flow-site's look (25 Oct 2026): the dashboard takes flow.engineer's
   own components (flow-site src/styles: notch.css's nav, story.css's
   web-app mock .sw__*, nx.css's tiles .nn__*). Later rules win.
   =================================================================== */
/* the top bar: the site nav's white bar and soft drop shadow */
.flow .apptop { background: #fff; box-shadow: 0 8px 24px -12px rgba(28,26,23,.18), 0 1px 0 rgba(28,26,23,.04); -webkit-backdrop-filter: none; backdrop-filter: none; }
.flow .projcrumb { font: 500 .9375rem/1 var(--nav-font); }
.flow .ws-switch { font: 500 .9375rem/1 var(--nav-font); color: var(--ink-3); }
.flow .acct-btn { background: var(--brand-peach); }
.flow .acct-btn:hover { background: var(--brand-peach); }

/* the rail: the site's web-app sidebar (.sw__nav): warm paper, hairline, lavender for the page */
.flow .bot-rail { background: #FBFAF9; box-shadow: 1px 0 0 var(--line); }
.flow .proj-rail .bot-rail__item { height: 34px; border-radius: 8px; color: var(--ink-2); font: 500 .875rem/1 var(--font); }
.flow .proj-rail .bot-rail__item svg { color: var(--ink-3); }
.flow .proj-rail .bot-rail__item:hover { background: rgba(28,26,23,.05); color: var(--ink); }
.flow .proj-rail .bot-rail__item[aria-current="page"] { background: var(--brand-lavender); color: var(--ink); font-weight: 600; }
.flow .proj-rail .bot-rail__item[aria-current="page"] svg { color: var(--ink); }
.flow .proj-rail .bot-rail__item[aria-current="page"] [class*="pc--"] svg { color: var(--pc); }
/* phones: the bottom bar's items keep their 50px and small labels (the 34px rows above are the
   wide rail's and came later in this file, so the labels were cut at the bottom) */
@media (max-width: 860px) {
  .flow .proj-rail .bot-rail__item { height: 50px; font-size: .6875rem; }
  .flow .proj-rail .bot-rail__label, .flow .proj-rail .bot-rail__short { line-height: 1.3; }
}
.flow .rail-label { margin-top: 14px; font: 500 .6875rem/1 var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.flow .rail-foot { box-shadow: 0 -1px 0 var(--line); }

/* the page: the site's type */
.flow .appmain { padding-top: 40px; }
.flow .pagehead { margin-bottom: 32px; }
.flow .pagehead h1 { font: 500 clamp(2rem, 3.2vw, 2.75rem)/1.05 var(--head); letter-spacing: -.035em; }
.flow .pagehead p { margin-top: 10px; font: 500 1rem/1.4 var(--font); letter-spacing: -.01em; color: var(--ink-3); }
.flow .section-title { font: 500 1.25rem/1.25 var(--head); letter-spacing: -.01em; margin: 48px 0 16px; }
/* a section drawn into its own box later (Deployments' CLI): its heading keeps the page's spacing */
.flow .latesec > .section-title:first-child { margin-top: 48px; }
.flow .card { border-radius: var(--r-lg); }
.flow .card__title { font: 500 1.125rem/1.3 var(--head); letter-spacing: -.005em; }

/* tables: the site's deal table (.sw__table) */
.flow .tbl-wrap, .flow .card:has(> .tbl) { border-radius: 12px; }
.flow .tbl th { padding: 10px 14px; background: #FBFAF9; font: 500 .75rem/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.flow .tbl td { padding: 12px 14px; }
.flow .tbl tbody tr:hover td { background: var(--brand-mist); }

/* tags: the table's pastel pills */
.flow .tag { height: 22px; padding: 0 9px; font: 600 .6875rem/1 var(--font); }
.flow .tag--sky { background: #EAF1D2; color: var(--brand-sage-deep); }
.flow .tag--line { background: var(--brand-lavender); box-shadow: none; color: var(--brand-sky-deep); }
/* status tags, always the soft tint: failed, warning, good */
.flow .tag--bad { background: var(--bad-soft); color: var(--bad-ink); }
.flow .tag--warn { background: var(--warn-soft); color: var(--warn-ink); }
.flow .tag--sage { background: var(--good-soft); color: var(--good-ink); }
/* waiting on someone else (in review, coming next): never the good green */
.flow .tag--neutral { background: var(--neutral-soft); color: var(--neutral-ink); }

/* Home's platforms: the nav menu's tiles (.nn__tile, .nn__ic); picked ones on white */
.flow .platgrid { gap: 12px; }
.flow .platcard { min-height: 188px; padding: 18px; border-radius: 18px; background: var(--tile); box-shadow: none; transition: background .15s, box-shadow .15s; }
.flow .platcard:hover { background: #EDEAE6; }
.flow .platcard--live { background: #fff; box-shadow: var(--ring); }
.flow .platcard--live:hover { background: #fff; box-shadow: var(--lift); }
.flow .platcard__ic, .flow .platcard__ic[class*="pc--"] { width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: var(--ring-soft); }
.flow .platcard__name { margin-top: auto; font: 500 1rem/1.25 var(--head); }
.flow .platcard__line { flex: none; font-size: .8125rem; line-height: 1.35; color: var(--ink-3); }
/* a channel in use (homecards.ts): a line per environment, each its connection's page */
.flow .platgrid--chan { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
.flow .platcard--chan { min-height: 0; gap: 4px; }
.flow .platcard--chan:hover { box-shadow: var(--ring); }
.flow .platcard--chan .platcard__name { margin-top: 0; }
.flow .platlines { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
.flow .platlines > li + li { border-top: 1px solid var(--line); }
.flow .platline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; margin: 0 -10px; padding: 12px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.flow a.platline:hover { background: var(--hover); }
.flow .platline__main { display: grid; gap: 4px; min-width: 0; }
.flow .platline .platcard__nums { gap: 14px; }
.flow .platline .platcard__nums b { font-size: 1.25rem; }
/* A card's one block (31 Oct 2026): its conversations in the last 7 days, the number and its words on one baseline. */
.flow .platline--one { align-items: baseline; }
.flow .platline--one .platline__main { gap: 0; }
.flow .platlines__note { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-3); text-decoration: none; }
.flow .platlines__note:hover { color: var(--ink); }

/* the picker and the path cards: the site's card on a canvas */
.flow .launch { padding: 32px; border-radius: var(--r-xl); box-shadow: var(--lift); }
.flow .launch .card__title { font: 500 clamp(1.5rem, 2.2vw, 1.875rem)/1.15 var(--head); letter-spacing: -.025em; }
.flow .launch .label { font: 500 .6875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.flow .launch .chip, .flow .pickgroups .chip { height: 36px; padding: 0 14px; font: 500 .875rem/1 var(--font); color: var(--ink); }
.flow .pathopt__t { font: 500 1.0625rem/1.2 var(--head); }
.flow .setupsteps { gap: 12px; font-size: .9375rem; color: var(--ink-2); }
.flow .hint .setupsteps { margin-top: 6px; gap: 4px; font-size: inherit; color: inherit; }
/* the picker's platforms: the nav menu's tiles, picked ones on white with a check */
.flow .picktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.flow .picktile { position: relative; display: grid; align-content: start; gap: 4px; min-height: 132px; padding: 16px; border: 0; border-radius: 18px; background: var(--tile); text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: background .15s, box-shadow .15s; }
.flow .picktile:hover { background: #EDEAE6; }
.flow .picktile[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 2px var(--ink), var(--lift); }
.flow .picktile__ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; background: #fff; box-shadow: var(--ring-soft); }
.flow .picktile b { font: 500 1rem/1.25 var(--head); }
.flow .picktile small { font-size: .8125rem; line-height: 1.35; color: var(--ink-3); }
.flow .picktile .pathopt__check { top: 14px; right: 14px; width: 20px; height: 20px; }
.flow .picktile[aria-pressed="true"] .pathopt__check { opacity: 1; transform: none; }
/* the picker's tiles, horizontal: icon left, name and line right */
.flow .picktiles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.flow .picktile { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; align-content: center; min-height: 0; padding: 12px 36px 12px 12px; border-radius: 14px; }
.flow .picktile__ic { grid-row: 1 / span 2; margin: 0; }
.flow .picktile b { grid-column: 2; align-self: end; }
.flow .picktile small { grid-column: 2; align-self: start; }
/* the picker's select circle: an empty ring top right, filled with a check once picked */
.flow .picktile .pathopt__check { top: 10px; right: 10px; margin-top: 0; width: 18px; height: 18px; opacity: 1; transform: none; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink-4); color: transparent; }
.flow .picktile[aria-pressed="true"] .pathopt__check { background: var(--ink); box-shadow: none; color: #fff; }
.flow .picktile .pathopt__check svg { width: 11px; height: 11px; }
/* the framework art's phone: as wide as its bubbles (they never spill out); iMessage blue */
.flow .art-phone { width: auto; padding: 12px; }
.flow .art-bub--out { background: #0a84ff; }
.flow .art-agent__chs { display: inline-flex; gap: 4px; margin-left: auto; padding-left: 10px; }
.flow .art-agent__ch { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #fff; }
.flow .proj-rail .bot-rail__item [class*="pc--"] svg { color: var(--pc); }

/* ---------- WhatsApp templates (the 25 Oct 2026 mockup): the WhatsApp page's
   Templates section, the New template form, each template's page ---------- */
.flow .tplsec { margin-bottom: 40px; }
.flow .tplsec .section-title { flex-wrap: wrap; align-items: center; }
.flow .tplsec .section-title > span + span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flow .tplsec .lead-line { margin: -6px 0 16px; max-width: 70ch; }
.flow .seg--sm button, .flow .seg--sm a { height: 26px; padding: 0 11px; font-size: .8125rem; }
.flow .opt { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.flow .linkbtn.small { font-size: .875rem; }
.flow .stack-20 { display: grid; gap: 20px; }
.flow .pitch { max-width: 760px; }
.flow .pitch .card__title { font-size: 1.1875rem; }

/* status words: In review, Approved, Rejected (pills, never dots) */
.flow .cpill--review { background: var(--brand-lavender); color: var(--brand-sky-deep); }
.flow .tbl .cpill { height: 22px; padding: 0 9px; font-size: .6875rem; }

/* the Templates table: rows that open */
.flow .tpltbl td { vertical-align: middle; }
.flow .tpltbl tbody tr { cursor: pointer; }
.flow .tpltbl .tname { display: grid; gap: 3px; min-width: 0; color: inherit; text-decoration: none; }
.flow .tpltbl .tname b { font: 600 .8125rem/1.3 var(--mono); color: var(--ink); }
.flow .tpltbl .tname span { color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 62ch; }
.flow .tpltbl .tname .why { color: var(--bad-ink); -webkit-line-clamp: 2; }
.flow .tpltbl .tname .warnline { color: var(--warn-ink); -webkit-line-clamp: 2; }
.flow .tpltbl td.nowrap { white-space: nowrap; }
.flow .tpltbl th:last-child, .flow .tpltbl td:last-child { text-align: right; }
@media (max-width: 760px) {
  .flow .tpltbl thead { display: none; }
  .flow .tpltbl, .flow .tpltbl tbody { display: block; }
  .flow .tpltbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .flow .tpltbl tr:last-child { border-bottom: 0; }
  .flow .tpltbl td { padding: 0; border: 0; }
  .flow .tpltbl td.c-name { grid-column: 1; grid-row: 1; }
  .flow .tpltbl td.c-status { grid-column: 2; grid-row: 1; text-align: right; }
  .flow .tpltbl td.c-cat { grid-column: 1 / -1; color: var(--ink-3); font-size: .8125rem; }
  .flow .tpltbl td.c-lang, .flow .tpltbl td.c-made { display: none; }
  .flow .tpltbl .tname span { -webkit-line-clamp: 2; }
  .flow .tpltbl tbody tr:hover td { background: none; }
}

/* a template's page and the form: the work on the left, the phone on the right */
.flow .mono-h { overflow-wrap: anywhere; }
.flow .tplsplit { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 24px; align-items: start; }
.flow .tplsplit > * { min-width: 0; }
.flow .tplpreview { position: sticky; top: calc(var(--app-h) + 24px); display: grid; gap: 16px; }
@media (max-width: 1100px) { .flow .tplsplit { grid-template-columns: minmax(0, 1fr); } .flow .tplpreview { position: static; } }
.flow .tplpreview .phone { width: 100%; }
.flow .tplpreview .phone__chat { min-height: 230px; }
.flow .tplpreview .card__head { margin-bottom: 0; align-items: center; }
/* the template's bubble is the chat view's (chatview.ts templateContent), in the phone's chat */
.flow .tplcv .cv-row { margin: 0; padding: 1px 0 1px var(--cv-edge); }
.flow .tplcv .cv-col { max-width: 88%; }
.flow .tplphone .phone__bar .phone__avatar { background: #fff; color: #008069; font-weight: 700; }
.flow .phone__biz { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: #b3f0e1; }
.flow .phone__biz svg path:last-child { stroke: #008069; }
/* the preview's values: a sample filled in, or the placeholder itself */
.flow .ph-fill { border-radius: 3px; background: rgba(0, 128, 105, .1); box-shadow: 0 0 0 1px rgba(0, 128, 105, .1); }
.flow .ph-chip { padding: 0 3px; border-radius: 4px; background: rgba(11, 20, 26, .08); font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #3b4a54; }
.flow .ph-chip.is-missing { background: #fff4e5; color: #8a4b00; }

/* what happens next */
.flow .steps li span.when { color: var(--ink-3); margin-left: 6px; font-size: .875rem; }
.flow .steps li.is-done { color: var(--ink); }
.flow .meta-reason { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--bad) 6%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 24%, transparent); }
.flow .meta-reason__l, .flow .thefix__l { font: 500 .6875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.flow .meta-reason__l { color: var(--bad-ink); }
.flow .meta-reason q { font-size: .9375rem; color: var(--ink); quotes: "\201C" "\201D"; }
.flow .meta-reason code { font: 500 .75rem var(--mono); color: var(--ink-3); }
.flow .thefix { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--brand-sage) 28%, #fff); }
.flow .thefix__l { color: var(--good-ink); }
.flow .thefix p { color: var(--ink); }
.flow pre.code.snippet { white-space: pre; overflow-x: auto; font-size: .78rem; line-height: 1.65; }
.flow .kvcard .kv { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); }
.flow .kvcard .kv dd { overflow-wrap: anywhere; }
.flow .kvcard .kv__id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }

/* templates synced from WhatsApp Manager (30 Oct 2026): the sync line, where each was made, the Variables table */
.flow .tplsync { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 14px; color: var(--ink-3); font-size: .8125rem; }
.flow .tplsync.is-failed { color: var(--warn-ink); }
.flow .tplsync .btn { height: 26px; }
.flow .tpltbl td.c-made > span { display: block; }
.flow .tpltbl .tplsrc { margin-top: 2px; font-size: .75rem; }
.flow .tpltbl .tplsrc b { font-weight: 500; color: var(--ink-2); }
.flow .tpltbl .tplsrc-sm { display: none; }
.flow .vartbl td { vertical-align: middle; }
.flow .vartbl td.c-sample { overflow-wrap: anywhere; }
.flow .vartbl td.c-send { white-space: nowrap; }
@media (max-width: 760px) {
  .flow .tpltbl .tplsrc-sm { display: inline; }
  .flow .vartbl thead { display: none; }
  .flow .vartbl, .flow .vartbl tbody { display: block; }
  .flow .vartbl tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .flow .vartbl tr:last-child { border-bottom: 0; }
  .flow .vartbl td { padding: 0; border: 0; }
  .flow .vartbl td.c-var { grid-column: 1; grid-row: 1; }
  .flow .vartbl td.c-where { grid-column: 2; grid-row: 1; color: var(--ink-3); font-size: .8125rem; }
  .flow .vartbl td.c-send { grid-column: 3; grid-row: 1; }
  .flow .vartbl td.c-sample { grid-column: 1 / -1; grid-row: 2; }
  .flow .vartbl tbody tr:hover td { background: none; }
}

/* the form */
.flow .tplform .grid2 { align-items: start; }
.flow .tplform fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.flow .tplform legend { padding: 0; margin-bottom: 6px; }
.flow .catopts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.flow .catopt { position: relative; display: grid; align-content: start; gap: 4px; padding: 12px 34px 12px 14px; border-radius: 14px; background: var(--tile); cursor: pointer; transition: background .15s, box-shadow .15s; }
.flow .catopt:hover { background: #EDEAE6; }
.flow .catopt input { position: absolute; opacity: 0; pointer-events: none; }
.flow .catopt b { font: 500 .9375rem/1.25 var(--head); }
.flow .catopt small { font-size: .8125rem; line-height: 1.35; color: var(--ink-3); }
.flow .catopt__check { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.flow .catopt:has(input:checked) { background: #fff; box-shadow: 0 0 0 2px var(--ink), var(--lift); }
.flow .catopt:has(input:checked) .catopt__check { background: var(--ink); box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 6px #fff; }
.flow .catopt:has(input:focus-visible) { outline: 2px solid var(--brand-sky-deep); outline-offset: 2px; }
.flow .bodytools { margin-top: 2px; }
.flow .samples, .flow .btnrow { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: var(--brand-paper); box-shadow: inset 0 0 0 1px var(--line); }
.flow .samplerow { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.flow .samplerow .fielderr { grid-column: 2; }
.flow .phtag { justify-self: start; padding: 4px 7px; border-radius: 6px; background: var(--brand-mist); color: var(--brand-sky-deep); font: 600 .75rem/1 var(--mono); }
.flow .btnrow__top { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.flow .btnrow__top > .btnrow__value { grid-column: 1 / -1; grid-row: 2; }
.flow .btnrow__top .input[hidden] { display: none; }
.flow .linkend { display: grid; gap: 6px; }
.flow .linkend__in { display: flex; align-items: center; height: 44px; padding-left: 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(28,26,23,.16); }
.flow .linkend__in:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.flow .linkend__in .pre { flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); font: .8125rem var(--mono); white-space: nowrap; }
.flow .linkend__in input { flex: 1; min-width: 0; height: 100%; padding: 0 14px 0 0; border: 0; outline: 0; background: none; font: .8125rem var(--mono); }
.flow .linkend__in[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--bad); background: color-mix(in srgb, var(--bad) 4%, #fff); }
.flow .fielderr { display: flex; gap: 6px; align-items: flex-start; color: var(--bad-ink); font-size: .8125rem; line-height: 1.4; }
.flow .fielderr:empty { display: none; }
.flow .fielderr svg { flex: none; margin-top: 1px; }
.flow .fielderrs { display: grid; gap: 4px; }
.flow .fielderrs:empty { display: none; }
.flow .tplform .input[aria-invalid="true"], .flow .tplform .textarea[aria-invalid="true"], .flow .tplform .select[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--bad); background: color-mix(in srgb, var(--bad) 4%, #fff); }
.flow .tplform .select { -webkit-appearance: none; appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%231C1A17' stroke-opacity='.56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; }
.flow .tplform__foot { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.flow .fixsum { color: var(--bad-ink); font-size: .875rem; font-weight: 500; }
.flow .fixsum:empty { display: none; }
@media (max-width: 760px) {
  .flow .catopts { grid-template-columns: minmax(0, 1fr); }
  .flow .tplform .grid2 { grid-template-columns: minmax(0, 1fr); }
  .flow .btnrow__top { grid-template-columns: minmax(0, 1fr) auto; }
  .flow .btnrow__top > .select { grid-column: 1; }
  .flow .btnrow__top > .btnrow__text { grid-column: 1 / -1; grid-row: 2; }
  .flow .btnrow__top > .btnrow__value { grid-column: 1 / -1; grid-row: 3; }
  .flow .btnrow__top > button { grid-column: 2; grid-row: 1; }
}

/* Connect your own WhatsApp number (pages/whatsappconnect.ts): the checklist, the webhook steps and the live check. */
.flow .wacheck { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.flow .wacheck__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.flow .wacheck__item p, .flow .wacheck__item ul { margin: 0; }
.flow .wacheck__item ul { padding-left: 18px; }
.flow .wacheck__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .8125rem; font-weight: 600; color: var(--ink-2); background: var(--brand-paper); box-shadow: inset 0 0 0 1px var(--line); }
.flow .wacheck__n.is-done { background: var(--st-green); color: #fff; box-shadow: none; }
.flow .wacheck__n.is-doing { box-shadow: inset 0 0 0 2px var(--st-yellow); }
.flow .wacheck code, .flow .wasetup code, .flow .wasetup li { overflow-wrap: anywhere; }

/* The operator's launch page (pages/operatorlaunch.ts): two bar charts, the funnel's table with a meter per step, the sign-ups list. */
.flow .launch__charts { align-items: stretch; }
.flow .launch__bars { height: 120px; gap: 3px; }
.flow .launch__bars > i { align-self: flex-end; border-radius: 3px 3px 0 0; }
.flow .launch__bars > i.launch__bar--zero { background: var(--line); }
.flow .launch__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow .launch__meter { width: 28%; min-width: 80px; vertical-align: middle; }
.flow .launch__funnel td { vertical-align: middle; }
.flow .launch__foot { padding: 12px 16px; margin: 0; border-top: 1px solid var(--line); }
.flow .launch__when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.flow .launch__email { overflow-wrap: anywhere; }
.flow .section-title .seg { font-size: .875rem; }
.flow .launch .section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.flow .launch, .flow .launch > * { min-width: 0; }
@media (max-width: 760px) {
  .flow .launch__charts { grid-template-columns: minmax(0, 1fr); }
  .flow .launch__meter, .flow .launch__opt { display: none; }
}

/* The operator pages' tab row (opnav.ts), and the operator's Overview (pages/operatoroverview.ts):
   the launch page's panel and classes, plus these. On phones the panel's padding is 16px, so its
   tables fit 390px with no sideways scroll; columns marked ov__opt hide there and ov__ph shows. */
.flow .opnav { margin: -8px 0 24px; }
.flow .launch.ov .stack-16, .flow .launch.ov .stack-16 > *, .flow .launch.ov section { min-width: 0; }
.flow .ov__prod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 761px) { .flow .ov__mail { white-space: nowrap; } }
.flow .ov__src { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); }
.flow .ov__src b { font-weight: 600; color: var(--ink-2); }
.flow .ov__src--gap { margin-top: 16px; }
.flow .ov__ph { display: none; margin-top: 6px; }
.flow .ov__who b { display: block; font-weight: 600; }
.flow .ov__why { min-width: 16rem; }
.flow .ov__why .tag { margin-bottom: 4px; }
.flow .ov__rules { margin: 0; padding: 0 16px 0 36px; display: grid; gap: 8px; font-size: .875rem; color: var(--ink-2); }
.flow .ov__rules b { color: var(--ink); font-weight: 600; }
.flow .ov__total td { font-weight: 600; border-top: 1px solid var(--line); }
.flow .ov__chev { color: var(--ink-4); text-align: right; width: 24px; }
.flow .ov__kv { grid-template-columns: minmax(0, 1fr) auto; }
.flow .ov__kv dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.flow .ov__kv dd small { display: block; font-weight: 500; color: var(--ink-3); font-size: .75rem; }
.flow .launch .card__title.ov__title { font: 500 1.125rem/1.2 var(--head); letter-spacing: -.01em; }
.flow .ov__cardhead { padding: 20px 20px 0; margin-bottom: 12px; align-items: baseline; flex-wrap: wrap; row-gap: 4px; }
.flow .ov__cardnote { margin: 0 16px 16px; }
.flow .ov__hidden { margin: 0; }
.flow .ov__linkbtn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.flow .ov__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.flow .ov__tiles .stat { align-content: start; }
.flow .ov__dlg .dialog__foot { flex-wrap: wrap; }
.flow .ov__tellhead { font: 600 .875rem/1.3 var(--font); margin: 0 0 6px; }
.flow .ov__tell { margin: 0 0 4px; color: var(--ink-2); overflow-wrap: anywhere; }
/* Refused API calls: a reason's own names small under its words, the 14-day sparkline, a
   customer's group row. */
.flow .ov__reason { min-width: 18rem; }
.flow .ov__reason .ov__tell { margin: 6px 0 0; }
.flow .ov__code { font: 500 .75rem/1.4 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.flow .ov__spark { display: flex; align-items: flex-end; gap: 1px; width: 84px; height: 22px; }
.flow .ov__spark > i { flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--brand-sky); }
.flow .ov__spark > i:last-child { background: var(--brand-sky-deep); }
.flow .ov__spark > i.ov__spark--zero { background: var(--line); }
.flow .ov__group td { background: var(--hover); font-weight: 600; }
.flow .ov__group td .muted { font-weight: 500; }
.flow .ov__seghead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.flow dialog.dialog.ov__dlg { max-width: 920px; width: min(920px, calc(100vw - 32px)); }
@media (max-width: 560px) {
  .flow dialog.dialog.ov__dlg { width: 100%; max-width: 100%; }
  .flow .ov__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow .ov__dlg .dialog__foot { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .flow .launch.ov { padding: 16px; }
  .flow .ov__opt { display: none; }
  .flow .ov__ph { display: block; }
  .flow .ov__why, .flow .ov__reason { min-width: 0; }
  .flow .ov__prod { grid-template-columns: minmax(0, 1fr); }
  .flow .pagehead .hstack { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 420px) {
  .flow .launch.ov .stat { padding: 14px; }
  .flow .launch.ov .stat__v { font-size: 1.625rem; }
}

/* ---- Buying (28 Oct 2026; plans.ts, plansui.ts): the top bar's plan pill, the one Plans dialog
   (the site's pricing switch and cards: flow-site global.css #pricing), and the slots where buying
   helps (the iMessage page's line card, Home's strip, the Usage rows, Your plans). ---- */
.flow .planpill-slot[hidden] { display: none; }
.flow .planpill { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 5px 0 14px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--ring-soft); font-size: .8125rem; color: var(--ink-2); white-space: nowrap; }
.flow .planpill b { color: var(--ink); font-weight: 600; }
.flow .planpill--warn { background: var(--warn-bg); }
.flow .planpill__m { width: 56px; }
.flow .planpill .btn { height: 26px; padding: 0 12px; }
/* quiet (paid, nothing to fix; 28 Oct 2026): the plan's name only, the whole pill a plain link, as btn--light */
.flow .planpill--quiet { padding: 0 14px; border: 0; font-family: var(--font); text-decoration: none; cursor: pointer; transition: box-shadow .15s; }
.flow .planpill--quiet:hover { box-shadow: var(--ring); color: var(--ink); }
.flow .planpill--quiet:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 960px) { .flow .planpill__m { display: none; } }
@media (max-width: 760px) {
  .flow .planpill__t { display: none; }
  .flow .planpill { padding: 0 4px; background: none; box-shadow: none; }
  /* a quiet pill keeps its name on a phone (no button to fall back on), as btn--ghost */
  .flow .planpill--quiet { padding: 0 10px; }
  .flow .planpill--quiet .planpill__t { display: inline; }
  .flow .planpill--quiet .planpill__rest { display: none; }
  .flow .planpill--quiet:hover { box-shadow: none; background: var(--hover); }
}

.flow dialog.dialog.plans { max-width: 1000px; width: min(1000px, calc(100vw - 32px)); }
.flow .plans__form { display: block; }
.flow .plans__tabs { position: relative; display: flex; width: max-content; max-width: 100%; margin: 0 auto 16px; padding: 4px; border: 0; border-radius: var(--r-pill); background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); }
.flow .plans__tabs label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 20px; border-radius: var(--r-pill); font: 500 .9375rem/1.2 var(--font); color: var(--ink-2); cursor: pointer; }
.flow .plans__tabs label:hover { color: var(--ink); }
.flow .plans__tabs input:checked + label { background: #fff; color: var(--ink); box-shadow: var(--ring-soft), 0 1px 3px rgba(0,0,0,.08); }
.flow .plans__tabs input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.flow .plans__tabnote { font: 500 .75rem/1 var(--font); color: var(--brand-sage-deep); background: color-mix(in srgb, var(--brand-sage) 45%, #fff); padding: 4px 8px; border-radius: var(--r-pill); }
.flow .plans__lead { text-align: center; color: var(--ink-3); font-size: .875rem; margin: 0 0 16px; }
.flow .plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.flow .plans__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-inline: auto; }
.flow .plans__sum { font-size: .875rem; color: var(--ink-2); }
.flow .plans__sum b { color: var(--ink); }
.flow .prc { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--ring); padding: 24px 22px; cursor: pointer; }
.flow .prc > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.flow .prc:has(> input[type=radio]:checked) { box-shadow: inset 0 0 0 2px var(--ink), var(--lift); }
.flow .prc:has(> input[type=radio]:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.flow .prc.is-current { background: var(--canvas-soft); cursor: default; }
.flow .prc.is-off { cursor: default; }
.flow .prc.is-off:not(.is-current) .prc__price, .flow .prc.is-off:not(.is-current) .prc__body { color: var(--ink-3); }
.flow .prc__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.flow .prc__name { font: 500 .8125rem/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.flow .prc__badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--brand-white); color: var(--ink); font: 500 .75rem/1 var(--font); box-shadow: var(--ring-soft); white-space: nowrap; }
.flow .prc__badge--deal { background: var(--brand-sage); box-shadow: none; }
.flow .prc__badge--current { background: var(--brand-mist); color: var(--brand-sky-deep); box-shadow: none; }
.flow .prc__price { margin-top: 14px; font: 500 2.25rem/1 var(--head); letter-spacing: -.02em; color: var(--ink); }
.flow .prc__price span { font: 400 .9375rem/1 var(--font); letter-spacing: 0; color: var(--ink-3); }
.flow .prc__was { margin-right: 6px; font: 400 1.25rem/1 var(--head); color: var(--ink-4); text-decoration: line-through; }
.flow .prc__body { margin-top: 12px; color: var(--ink); font-size: .9375rem; font-weight: 500; min-height: 2.6em; }
.flow .prc__list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.flow .prc__list li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); }
.flow .prc__list li:last-child { border-bottom: 0; }
.flow .prc__list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 18px; height: 18px; border-radius: 50%; background: var(--tile); }
.flow .prc__list li::after { content: ''; position: absolute; left: 6.5px; top: 14.5px; width: 4px; height: 8px; border: solid var(--ink); border-width: 0 1.8px 1.8px 0; transform: rotate(42deg); }
.flow .prc__opt { margin-top: auto; padding-top: 14px; display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; color: var(--ink-2); cursor: pointer; }
.flow .prc__opt b { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) {
  .flow .plans__grid, .flow .plans__grid--2 { grid-template-columns: minmax(0, 1fr); }
  .flow .plans__tabs { width: 100%; }
  .flow .plans__tabs label { flex: 1 1 0; padding: 0 10px; font-size: .875rem; }
  .flow .prc__body { min-height: 0; }
}

.flow .note--mid { align-items: center; }
.flow .ownline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.flow .ownline--warn { background: var(--warn-bg); }
@media (max-width: 760px) { .flow .ownline { grid-template-columns: minmax(0, 1fr); } }
.flow .lim__act { grid-column: 1 / -1; font-size: .8125rem; color: var(--ink-3); }
.flow .myplans { display: grid; margin-top: 8px; }
.flow .myplans__row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.flow .myplans__row:first-child { border-top: 0; }
.flow .myplans__k { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.flow .myplans__v b { display: block; font-size: 1.0625rem; color: var(--ink); }
.flow .myplans__v span { font-size: .875rem; color: var(--ink-3); }
.flow .myplans__bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.flow .myplans__bar .meter { width: 160px; }
@media (max-width: 760px) { .flow .myplans__row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* Settings → Domains (src/flow/pages/domains.ts): the Flow address with its action on the right,
   each domain's row (hostname, Primary or Extra, the status in words), its records. */
.flow .domrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.flow .domrow__main { display: grid; gap: 6px; flex: 1; min-width: 0; }
.flow .domrow > .btn { flex: none; }
.flow .domlist { border-top: 1px solid var(--line); }
.flow .domitem { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.flow .domitem:last-child { border-bottom: 0; padding-bottom: 0; }
.flow .domitem__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.flow .domitem__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.flow .domitem__name b { overflow-wrap: anywhere; }
.flow .domstatus { font-size: .8125rem; color: var(--ink-2); }
.flow .domrecs td { vertical-align: middle; }
.flow .domrecs td:first-child { width: 64px; }
.flow .seg [aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--ring-soft); }

/* Tests: a scenario's page (src/flow/pages/testscenario.ts; 29 Oct 2026), and the Playground's
   past conversations (playground.ts): a row's name is a strong link, its cells link through. */
.flow .link--strong { color: var(--ink); font-weight: 600; text-decoration: none; }
.flow .link--strong:hover, .flow .tbl tr.row-link:hover .link--strong { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.flow .cell-link { display: inline-block; color: inherit; text-decoration: none; }
.flow .cell-link:hover .dots, .flow .cell-link:hover .ratecell { opacity: .8; }
.flow .scencell .mono, .flow .convcell { overflow-wrap: anywhere; }
.flow .scentbl .scencell { min-width: 220px; }
/* Scenario titles stay on one line, cut with "…" (the whole title in the hover text): a
   cell of max-width 0 takes its column's share instead of its text's width. */
.flow .scentbl td.scencell { width: 36%; max-width: 0; }
.flow .scentbl td, .flow .convtbl td, .flow .playtbl td { vertical-align: top; }
.flow .scenhead { margin-bottom: 20px; }
.flow .scenhead > .stack-8 { flex: 1 1 100%; min-width: 0; }
.flow .scenhead h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: .08em; }
.flow .scenhead .scenhead__about { margin-top: 0; max-width: 72ch; }
.flow .scenhead__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.flow .scenhead__rate { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.flow .scenhead__rate .ratecell { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; }
.flow .scenhead__path { overflow-wrap: anywhere; }
/* A scenario's page (testscenario.ts, the 31 Oct 2026 scenario-page mockup): the run picker,
   one dot per run oldest first, each a 24px target around the 10px dot (.dots__d, .is-now
   for the picked run), its tooltip the pass-rate chart's; the picked run's play as a run's
   page opens it (.playhead, .playconvo), without the row's indent; "The scenario" under it. */
.flow .runpick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.flow .runpick__label { flex: none; }
.flow .runpick__dots { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0 -7px; }
.flow .runpick__b { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.flow .runpick__b:hover .dots__d:not(.is-now) { outline: 1.5px solid var(--ink-4); outline-offset: 2px; }
.flow .runpick__b:focus-visible { outline: 2px solid var(--info); outline-offset: 0; }
.flow .runpick__tip { bottom: 28px; white-space: nowrap; }
.flow .runpick__hint { margin-left: auto; }
.flow .scenplay__panel { display: grid; gap: 12px; }
.flow .scenplay__run { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-right: 8px; }
.flow .scenplay__run b { font-weight: 600; }
.flow .section-title.scenspec__h { margin-top: 40px; margin-bottom: 0; }
@media (max-width: 640px) {
  .flow .runpick__hint { margin-left: 0; flex-basis: 100%; }
  /* the run on its own line, so "Tries:" stays beside its switch */
  .flow .scenplay__run { flex-basis: 100%; margin-right: 0; }
}
.flow .pf--warn { background: var(--warn-soft); color: var(--warn-ink); }
/* Test health (testhealth.ts): five levels from the status tokens. Good sits between
   good and warn (olive); Fair is the neutral pill. The card heads the Tests page over
   Runs | Scenarios; the tile is Home's. */
.flow .pf--good { background: color-mix(in srgb, var(--good-soft) 55%, var(--warn-soft)); color: color-mix(in srgb, var(--good-ink) 75%, var(--warn-ink)); }
.flow .thslot:empty { display: none; }
.flow .thslot { margin-bottom: 16px; }
.flow .thealth { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 18px 22px; }
.flow .thealth__score { display: grid; gap: 2px; }
.flow .thealth__big { font: 650 2.125rem/1.05 var(--font); letter-spacing: -.01em; color: var(--ink); }
.flow .thealth__sub, .flow .thealth__meta { font-size: .8125rem; color: var(--ink-2); }
.flow .thealth__meta { margin: 0; flex: 1 1 260px; min-width: 0; }
.flow .thealth__meta b { color: var(--ink); font-weight: 600; }
.flow .thspark { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-left: auto; flex: none; }
.flow .thspark__bar { display: block; width: 8px; border-radius: 2px; background: var(--neutral-soft); }
.flow .thspark__bar.is-excellent { background: color-mix(in srgb, var(--good) 55%, #fff); }
.flow .thspark__bar.is-good { background: color-mix(in srgb, color-mix(in srgb, var(--good) 60%, var(--warn)) 50%, #fff); }
.flow .thspark__bar.is-fair { background: color-mix(in srgb, var(--neutral) 70%, #fff); }
.flow .thspark__bar.is-needs_work { background: color-mix(in srgb, var(--warn) 50%, #fff); }
.flow .thspark__bar.is-poor { background: color-mix(in srgb, var(--bad) 45%, #fff); }
/* each level's colour as --lv, for the bars that take it (the Runs list's, the pass-rate chart's) */
.flow .lv-excellent { --lv: var(--good); }
.flow .lv-good { --lv: color-mix(in srgb, color-mix(in srgb, var(--good) 75%, var(--warn)) 75%, #fff); }
.flow .lv-fair { --lv: var(--neutral); }
.flow .lv-needs_work { --lv: var(--warn); }
.flow .lv-poor { --lv: var(--bad); }
/* the card's facts row: main's cost per run, first reply p95 and typical run */
.flow .thealth__factslot { flex: 1 0 100%; }
.flow .thealth__factslot:empty { display: none; }
.flow .thealth__facts { display: flex; flex-wrap: wrap; gap: 12px 34px; padding-top: 14px; border-top: 1px solid var(--line); }
.flow .thealth__fact { display: grid; gap: 2px; }
.flow .thealth__fact b { font: 600 1.125rem/1.2 var(--font); color: var(--ink); }
.flow .thealth__fact span { font-size: .8125rem; color: var(--ink-2); }
.flow .thtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.flow .thtile { display: grid; justify-items: start; gap: 4px; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.flow .thtile:hover { box-shadow: var(--ring); }
.flow .thtile__t { font-size: .8125rem; color: var(--ink-2); }
.flow .thtile__v { font: 650 1.375rem/1.2 var(--font); margin-bottom: 2px; }
/* A channel's badge in a row: its icon on the text's first line, not padded down. */
.flow .convtbl td > .tool-channel-group, .flow .playtbl td > .tool-source-token, .flow .scenhead__facts .tool-channel-group { margin: -8px 0 -8px -8px; }
.flow .scengrid { align-items: stretch; }
.flow .scenp__who { font-weight: 600; color: var(--ink); }
.flow .scenkv { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); }
.flow .scenlist { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.flow .scensteps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.flow .scensteps li { display: grid; gap: 6px; justify-items: start; }
.flow .scenquote { display: block; max-width: 100%; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--tile); color: var(--ink); overflow-wrap: anywhere; }
.flow .scenquote::before, .flow .scenquote::after { content: none; }
.flow .scencheck { grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
.flow .scencheck > .tag { justify-self: start; }
.flow .scentag { margin-left: 6px; height: 18px; padding: 0 6px; font-size: .6875rem; }
.flow .scenworld { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.flow .playwhy { min-width: 220px; max-width: 420px; overflow-wrap: anywhere; }
.flow .playwhy b { font-weight: 600; }
.flow .convcell { min-width: 240px; }
.flow .convcell__topic, .flow .convcell__when { margin-top: 2px; }
/* .rowfacts: a row's other columns folded into its first cell, on phones only (.rowwide hide). */
.flow .rowfacts { display: none; }
@media (max-width: 860px) { .flow .scengrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .flow .convtbl .rowwide, .flow .playtbl .rowwide, .flow .scentbl .rowwide, .flow .runtbl .rowwide { display: none; }
  .flow .runtbl { table-layout: auto; }
  .flow .runtbl th:nth-child(1) { width: auto; }
  .flow .scentbl .scencell { min-width: 0; }
  .flow .scentbl .rowfacts.small { display: block; margin-top: 4px; }
  .flow .convtbl .rowfacts, .flow .playtbl .rowfacts, .flow .scentbl .rowfacts, .flow .runtbl .rowfacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
  .flow .playtbl .rowfacts.small { display: block; white-space: normal; }
  .flow .convcell, .flow .playtbl td { min-width: 0; white-space: normal; }
  .flow .runtbl .rowfacts .branchchip { max-width: 60vw; }
}
@media (max-width: 560px) {
  .flow .scencheck { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* A workspace that moved to another region (moved.ts): the banner under the top bar, every page. */
.flow .moved-banner { padding: 12px 20px; box-shadow: 0 1px 0 var(--line); }
.flow .moved-banner .note { margin: 0; }

/* Scenario themes (31 Oct 2026 Tests mockup, flow-notes scenario-themes-mockup): Tests →
   Scenarios as one block per theme (tests.ts themedTable), a run's Scenarios tab as one
   section per theme (testrun.ts scenariosTab), and an opened play as the Conversations page
   shows a conversation. Tokens only from the palette. */
/* ---- Tests → Scenarios: a header row per theme inside the one table ---- */
.flow .scentbl tbody.thgrp + tbody.thgrp > tr.themerow > td { border-top: 1px solid var(--line); }
.flow .scentbl tr.themerow > td { padding-top: 10px; padding-bottom: 10px; background: var(--hover); vertical-align: middle; }
.flow .scentbl tbody tr.themerow:hover td { background: #f0efec; }
.flow .scentbl tr.themerow { cursor: pointer; }
.flow .themebtn { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.flow .themebtn:focus-visible { outline: 2px solid var(--info); outline-offset: 4px; border-radius: 4px; }
.flow .themebtn__name { font: 600 .9375rem/1.4 var(--font); }
.flow .themebtn__n { font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.flow .themerate { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.flow .themerate .num { font-variant-numeric: tabular-nums; }
.flow .themerow .pf { height: 20px; padding: 0 8px; font-size: .625rem; }
.flow .scentbl tr.is-hidden, .flow .scentbl tbody.is-hidden { display: none; }
/* The theme's facts on a phone: right of its name, on the same line. */
.flow .themecell__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flow .themecell__facts { display: none; }
@media (max-width: 640px) {
  .flow .themecell__facts { display: inline-flex; }
  .flow .themecell__facts .num { font-size: .8125rem; color: var(--ink-2); }
}

/* The toolbar over the table: find, Main | All branches, collapse all. */
.flow .themetools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.flow .themetools .runsearch { flex: 1 1 260px; max-width: 420px; }
.flow .themetools__end { margin-left: auto; font-size: .8125rem; }
.flow .themetools .linkbtn { font-size: .8125rem; }
@media (max-width: 640px) { .flow .themetools .runsearch { max-width: none; flex-basis: 100%; } }

/* ---- A run's Scenarios tab ---- */
.flow .runrow__line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.flow .runrow__line .irow__name { flex: 0 1 auto; }
/* B: a status tag on a row of a theme group. */
.flow .stattag { flex: none; height: 20px; padding: 0 8px; font-size: .6875rem; }
.flow .rungroup .section-title .themeh { display: inline-flex; align-items: baseline; gap: 0; }
.flow .rungroup .section-title .themeh__btn { display: inline-flex; align-items: baseline; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.flow .rungroup .section-title .themeh__btn .irow__chev { align-self: center; padding-top: 0; transform: rotate(90deg); }
.flow .rungroup .section-title .themeh__btn[aria-expanded="false"] .irow__chev { transform: none; }
.flow .rungroup .section-title .themeh__sum { font: 500 .8125rem/1 var(--font); color: var(--ink-3); }
.flow .rungroup .section-title .themeh__sum b { font-weight: 600; color: var(--bad-ink); }
.flow .rungroup.is-folded .card, .flow .rungroup.is-folded .gap-top { display: none; }
.flow .rungroup.is-folded .section-title { margin-bottom: 0; }
.flow .runthemes > .rungroup + .rungroup .section-title { margin-top: 28px; }
.flow .runthemes > .rungroup.is-folded + .rungroup.is-folded .section-title { margin-top: 16px; }


/* ---- An opened scenario in a run: the Conversations page's view (testrun.ts playView) ----
   The chat (.transcript.cv.cv--whatsapp) and the side panel (.card.inspector) are the
   Conversations page's own classes; only the Tries row's tag and the spacing are new. */
.flow .playhead { align-items: center; }
.flow .playhead__tag { margin-left: auto; height: 22px; padding: 0 9px; font-size: .75rem; }
.flow .playconvo { margin-top: 12px; }
.flow .playconvo .inspector { top: calc(var(--app-h) + 16px); }
.flow .playchecks > .check-row:first-child { border-top: 0; padding-top: 0; }
.flow .playchecks { display: grid; }
.flow .playchecks > p { margin: 10px 0 0; }

/* ---- Theme hierarchy (31 Oct 2026): each theme a block, its scenarios children ----
   Still one table, so Pass rate and Last 5 line up between a theme and its scenarios; the
   column heads show once, on the page, above the first block. Each block is a card made of
   its cells (separate borders, corner radii on the corner cells), 12px apart. */
.flow .tbl-wrap:has(> .scentbl.is-blocks) { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.flow .scentbl.is-blocks { border-collapse: separate; border-spacing: 0; }
.flow .scentbl.is-blocks thead th { border-bottom: 0; padding-top: 0; padding-bottom: 8px; }
/* The title column a little narrower than the flat table's (its rows are indented 44px), so the
   pass rate and its Flaky chip stay on one line at 1440. */
.flow .scentbl.is-blocks td.scencell { width: 30%; }
.flow .scentbl.is-blocks tbody.thgrp td { background: var(--surface); }
.flow .scentbl.is-blocks tbody.thgrp td:first-child { border-left: 1px solid var(--line); }
.flow .scentbl.is-blocks tbody.thgrp td:last-child { border-right: 1px solid var(--line); }
.flow .scentbl.is-blocks tbody.thgrp tr.themerow > td { border-top: 1px solid var(--line); }
.flow .scentbl.is-blocks tbody.thgrp tr.themerow > td:first-child { border-top-left-radius: 12px; }
.flow .scentbl.is-blocks tbody.thgrp tr.themerow > td:last-child { border-top-right-radius: 12px; }
.flow .scentbl.is-blocks tbody.thgrp tr.is-blocklast > td:first-child { border-bottom-left-radius: 12px; }
.flow .scentbl.is-blocks tbody.thgrp tr.is-blocklast > td:last-child { border-bottom-right-radius: 12px; }
.flow .scentbl.is-blocks tbody.thgap td { height: 12px; padding: 0; border: 0; background: none; }
.flow .scentbl.is-blocks tbody.thgap tr:hover td { background: none; }
.flow .scentbl.is-blocks tbody.thgrp + tbody.thgrp > tr.themerow > td { border-top: 1px solid var(--line); }

/* The theme's header: the parent. A tinted band, a bigger name, a real chevron. */
.flow .scentbl.is-blocks tr.themerow > td { padding-top: 14px; padding-bottom: 14px; background: var(--hover); }
.flow .scentbl.is-blocks tbody tr.themerow:hover > td { background: #f0efec; }
.flow .scentbl.is-blocks .themebtn { gap: 8px; }
.flow .scentbl.is-blocks .themebtn__name { font: 600 1.0625rem/1.3 var(--font); letter-spacing: -.005em; }
.flow .scentbl.is-blocks .themebtn__n { margin-left: 2px; }
.flow .themechev { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--ink-2); transition: transform .15s; }
.flow .themebtn[aria-expanded="false"] .themechev { transform: rotate(-90deg); }
.flow tr.themerow:hover .themechev { background: rgba(28, 26, 23, .06); }
@media (prefers-reduced-motion: reduce) { .flow .themechev { transition: none; } }
.flow .scentbl.is-blocks tr.themerow .themerate .num { font-weight: 600; color: var(--ink); }

/* Its scenarios: the children. The title column indented 28px, under a 2px rule in the
   theme's level colour that runs down from the chevron. */
.flow .scentbl.is-blocks tr.themechild > td:first-child { position: relative; padding-left: 44px; }
.flow .scentbl.is-blocks tr.themechild > td:first-child::before { content: ""; position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; background: var(--lvl, var(--line)); }
.flow .scentbl.is-blocks tr.themechild.is-blocklast > td:first-child::before { bottom: 14px; border-radius: 0 0 2px 2px; }
.flow .scentbl.is-blocks tbody[data-level="excellent"] { --lvl: color-mix(in srgb, var(--good) 55%, transparent); }
.flow .scentbl.is-blocks tbody[data-level="good"] { --lvl: color-mix(in srgb, var(--good) 40%, var(--warn) 25%); }
.flow .scentbl.is-blocks tbody[data-level="fair"] { --lvl: var(--neutral); }
.flow .scentbl.is-blocks tbody[data-level="needs_work"] { --lvl: color-mix(in srgb, var(--warn) 75%, transparent); }
.flow .scentbl.is-blocks tbody[data-level="poor"] { --lvl: color-mix(in srgb, var(--bad) 65%, transparent); }

/* Phone: only the first column shows, so it carries both edges. */
@media (max-width: 640px) {
  .flow .scentbl.is-blocks tbody.thgrp td:first-child { border-right: 1px solid var(--line); }
  .flow .scentbl.is-blocks tbody.thgrp tr.themerow > td:first-child { border-top-right-radius: 12px; }
  .flow .scentbl.is-blocks tbody.thgrp tr.is-blocklast > td:first-child { border-bottom-right-radius: 12px; }
  .flow .scentbl.is-blocks thead { display: none; }
  .flow .scentbl.is-blocks tr.themechild > td:first-child { padding-left: 40px; }
}
/* A child's divider starts at the indent, so the rule reads as one line down the block. */
.flow .scentbl.is-blocks tr.themechild:not(.is-blocklast) > td:first-child { border-bottom-color: transparent; background: linear-gradient(var(--line), var(--line)) no-repeat left 44px bottom / calc(100% - 44px) 1px, var(--surface); }
.flow .scentbl.is-blocks tbody tr.themechild:not(.is-blocklast):hover > td:first-child { background: linear-gradient(var(--line), var(--line)) no-repeat left 44px bottom / calc(100% - 44px) 1px, var(--hover); }
@media (max-width: 640px) {
  .flow .scentbl.is-blocks tr.themechild:not(.is-blocklast) > td:first-child { background: linear-gradient(var(--line), var(--line)) no-repeat left 40px bottom / calc(100% - 40px) 1px, var(--surface); }
}

/* ---- A run's Scenarios tab (B): the same hierarchy. The theme is the card's header band
   (the tests table's theme row look), its scenarios indented under a rule in the theme's
   colour: red with a failure, amber with a pass on retry, green when all passed. ---- */
.flow .runthemes > .rungroup.runblock + .rungroup.runblock { margin-top: 16px; }
.flow .runthemes > .rungroup.runblock + .rungroup.runblock .section-title { margin-top: 0; }
.flow .rungroup.runblock.is-folded .card { display: block; }
.flow .runblock.is-folded .runrows { display: none; }
.flow .runblock .card { overflow: hidden; }
.flow .runblock__head { padding: 14px 20px 14px 16px; background: var(--hover); cursor: pointer; }
.flow .runblock__head:hover { background: #f0efec; }
.flow .runblock:not(.is-folded) .runblock__head { border-bottom: 1px solid var(--line); }
.flow .runblock .section-title { margin: 0; align-items: center; font: 600 1.0625rem/1.3 var(--font); letter-spacing: -.005em; }
.flow .runblock .section-title .themeh__btn { align-items: center; gap: 8px; }
.flow .runblock .section-title .count { margin-left: 8px; font-weight: 400; font-size: .8125rem; }
.flow .runblock .themeh__btn[aria-expanded="false"] .themechev { transform: rotate(-90deg); }
.flow .runblock__head:hover .themechev { background: rgba(28, 26, 23, .06); }
.flow .runblock .irow { position: relative; }
.flow .runblock .irow::before { content: ""; position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: var(--lvl, var(--line)); }
.flow .runblock .irow:last-child::before { bottom: 14px; border-radius: 0 0 2px 2px; }
.flow .runblock .irow + .irow { border-top: 0; }
.flow .runblock .irow + .irow::after { content: ""; position: absolute; top: 0; left: 40px; right: 0; height: 1px; background: var(--line); }
.flow .runblock .irow__head { padding-left: 40px; }
.flow .runblock .irow__panel { padding-left: 64px; }
.flow .runblock[data-state="failed"] { --lvl: color-mix(in srgb, var(--bad) 65%, transparent); }
.flow .runblock[data-state="retry"] { --lvl: color-mix(in srgb, var(--warn) 75%, transparent); }
.flow .runblock[data-state="passed"] { --lvl: color-mix(in srgb, var(--good) 55%, transparent); }
@media (max-width: 640px) {
  .flow .runblock__head { padding: 12px 14px 12px 12px; }
  .flow .runblock .irow::before { left: 23px; }
  .flow .runblock .irow + .irow::after { left: 34px; }
  .flow .runblock .irow__head { padding-left: 34px; }
  .flow .runblock .irow__panel { padding-left: 34px; }
  .flow .runblock .section-title { flex-wrap: wrap; row-gap: 2px; }
}

/* Home's delivery chart (deliverychart.ts): two compact charts side by side over the same 14 days
   (stacked on a phone), Delivered on the left and Not delivered on the right, each on its own
   scale; Not delivered stacks each day by reason, 2px of surface between reasons. The reason hues
   (--dlv-r0..2, a red family checked with the dataviz validator: all pairs ΔE ≥ 17 for red-green
   colour blindness, ≥ 3:1 on white) then grey for "Other reasons". A day is a button, tinted when
   open on both charts; the tooltip is the pass-rate chart's; the open day's failures below in the
   Problems card's rows. */
.flow .dlv { margin-top: 24px; --dlv-r0: var(--bad); --dlv-r1: #DD7A30; --dlv-r2: #7A2E8C; --dlv-other: var(--neutral); --dlv-h: 96px; --dlv-lab: 16px; }
.flow .dlv__bad { color: var(--bad-ink); font-weight: 600; }
.flow .dlv__charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; margin-top: 16px; }
.flow .dlv__chart { min-width: 0; }
.flow .dlv__ph { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.flow .dlv__ph b { font-weight: 600; color: var(--ink); }
.flow .dlv__max { color: var(--ink-3); }
.flow .dlv__plot { position: relative; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 0 3px; margin-top: 8px; border-bottom: 1px solid var(--ink-4); }
.flow .dlv__day { display: grid; grid-template-rows: calc(var(--dlv-lab) + var(--dlv-h)); padding: 0; border: 0; border-radius: 6px 6px 0 0; background: none; cursor: pointer; font: inherit; }
.flow .dlv__day:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.flow .dlv__day.is-on { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.flow .dlv__day:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.flow .dlv__cell { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: calc(var(--dlv-lab) + var(--dlv-h)); padding-top: var(--dlv-lab); }
.flow .dlv__cell > .dlv__bar, .flow .dlv__cell > .dlv__stack { flex: none; }
.flow .dlv__bar { display: block; width: min(72%, 28px); border-radius: 4px 4px 0 0; }
.flow .dlv__bar--ok { background: var(--good); }
.flow .dlv__stack { display: flex; flex-direction: column-reverse; gap: 2px; width: min(72%, 28px); border-radius: 4px 4px 0 0; overflow: hidden; }
.flow .dlv__seg { display: block; flex: 1 1 0; min-height: 2px; }
.flow .dlv__seg--r0, .flow .dlv__key--r0, .flow .dlv__key--bad { background: var(--dlv-r0); }
.flow .dlv__seg--r1, .flow .dlv__key--r1 { background: var(--dlv-r1); }
.flow .dlv__seg--r2, .flow .dlv__key--r2 { background: var(--dlv-r2); }
.flow .dlv__seg--other, .flow .dlv__key--other { background: var(--dlv-other); }
.flow .dlv__n { flex: none; font: 600 .6875rem/var(--dlv-lab) var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow .dlv__key { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 2px; }
.flow .dlv__key--ok { background: var(--good); }
.flow .dlv__tip { top: -8px; transform: translateY(-100%); }
.flow .dlv__tipr { display: flex; align-items: center; gap: 6px; }
.flow .dlv__axis { margin-top: 6px; }
.flow .dlv__none { display: grid; place-items: center; height: calc(var(--dlv-lab) + var(--dlv-h)); margin: 8px 0 0; padding: 0 16px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }
.flow .dlv__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--ink-2); }
.flow .dlv__legend li { display: inline-flex; align-items: center; gap: 6px; }
.flow .dlv__legend .tag { height: 18px; padding: 0 6px; font-size: .6875rem; }
.flow .dlv__lc { color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* A day before the delivered counts began: a dotted stub on the baseline, no bar (not a zero). */
.flow .dlv__nc { display: block; width: min(72%, 28px); border-top: 2px dotted var(--ink-4); }
.flow .dlv__since { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.flow .dlv__hint { margin: 16px 0 0; }
.flow .dlv__detail { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.flow .dlv__dh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--fs-sm); }
.flow .dlv__dh b { font-weight: 600; color: var(--ink); }
.flow .dlv__reasons .refs__head b .dlv__key { margin-right: 8px; vertical-align: 1px; }
.flow .dlv__why { margin: 2px 0 0; color: var(--ink-2); }
.flow .dlv__convs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); }
.flow .dlv__conv { height: 24px; padding: 0 10px; font-size: var(--fs-xs); text-decoration: none; font-variant-numeric: tabular-nums; }
.flow .dlv__conv:hover { color: var(--ink); }
@media (max-width: 760px) {
  .flow .dlv__charts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .flow .dlv { --dlv-h: 80px; }
  .flow .dlv__plot { gap: 0 2px; }
  .flow .dlv__n { font-size: .625rem; }
}

/* A Dedicated line's contact card in Messages, "Name and logo" (src/flow/linecardui.ts; flow-notes
   dedicated-line-contact-card-2026-11-03): the row on the iMessage page's line card, Line details'
   "Contact card" row, and the dialog with its phone preview. */
.flow .cc-row .sep::before, .flow .cc-dd .sep::before, .flow .cc-up .sep::before { content: '·'; margin: 0 6px; color: var(--ink-4); }
.flow .ownline .cc-row { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.flow .cc-row__t { display: grid; gap: 4px; min-width: 0; }
.flow .cc-row__t b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 .9375rem/1.35 var(--font); }
.flow .cc-row__t .tag { height: 20px; padding: 0 8px; font-size: .6875rem; }
.flow .cc-row .tag--sage { color: var(--good-ink, #5a6628); }
.flow .cc-row__btns { justify-content: flex-end; }
.flow .ownline .cc-row--off { grid-template-columns: auto minmax(0, 1fr); }
.flow .cc-lock { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tile); color: var(--ink-2); }
.flow .cc-mini { display: grid; justify-items: center; gap: 4px; width: 132px; padding: 10px 8px 8px; border-radius: 14px; background: #f2f2f7; box-shadow: inset 0 0 0 1px var(--line); }
.flow .cc-mini .cc-nm { font-size: 11px; max-width: 116px; }
.flow .cc-av { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: #fff; }
.flow .cc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flow .cc-av--grey { background: linear-gradient(180deg, #a7a7ad, #85858b); color: #fff; }
.flow .cc-av--grey svg { margin-top: 8px; }
.flow .cc-av--sm { width: 40px; height: 40px; }
.flow .cc-av--sm.cc-av--grey svg { margin-top: 6px; }
.flow .cc-av--sm .cc-ini { font-size: 15px; }
.flow .cc-ini { font: 600 19px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: .02em; }
.flow .cc-nm { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; font-size: 12px; line-height: 1.2; color: #111; }
.flow .cc-nm > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow .cc-chev { color: #8e8e93; font-size: 14px; }
@media (max-width: 560px) {
  .flow .ownline .cc-row { grid-template-columns: auto minmax(0, 1fr); }
  .flow .ownline .cc-row > .btn { grid-column: 1 / -1; justify-self: stretch; }
  .flow .ownline .cc-row > .cc-row__btns { grid-column: 1 / -1; justify-content: flex-start; }
  .flow .cc-mini { width: 104px; }
  .flow .cc-mini .cc-nm { max-width: 90px; }
}
/* Line details' row */
.flow .cc-kvrow { display: contents; }
.flow .cc-dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.flow .cc-dd .sep::before { margin: 0; }
.flow .cc-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: none; }
.flow .cc-dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flow .cc-dot.cc-av--grey svg { margin-top: 4px; }
/* the dialog */
.flow dialog.dialog.cc-dlg { width: min(760px, calc(100vw - 32px)); max-width: 760px; }
@media (max-width: 560px) { .flow dialog.dialog.cc-dlg { width: 100%; max-width: 100%; } .flow .cc-dlg .dialog__foot { flex-wrap: wrap; } .flow .cc-foothint { flex-basis: 100%; } }
.flow .cc-foothint { margin-right: auto; align-self: center; }
.flow .cc { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; align-items: start; }
@media (max-width: 760px) { .flow .cc { grid-template-columns: minmax(0, 1fr); } .flow .cc-prev { max-width: 320px; } }
.flow .cc-logo { display: flex; align-items: center; gap: 16px; }
.flow .cc-tile { position: relative; display: grid; place-items: center; flex: none; width: 88px; height: 88px; border-radius: 18px; overflow: hidden; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); }
.flow .cc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flow .cc-tile--empty { background: var(--bg); box-shadow: none; outline: 1.5px dashed var(--ink-4); outline-offset: -1.5px; }
.flow .cc-tile--busy img { opacity: .35; }
.flow .cc-up { flex: 1; min-width: 0; max-width: 320px; }
.flow .cc-names { align-items: start; }
@media (max-width: 560px) { .flow .cc-names { grid-template-columns: minmax(0, 1fr); } }
.flow .cc-warn { margin-bottom: 4px; }
.flow .cc-cropwrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 6px 0 4px; }
.flow .cc-crop { position: relative; width: 210px; max-height: 210px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.flow .cc-crop--tall { width: auto; height: 180px; }
.flow .cc-crop img { display: block; width: 100%; height: 100%; object-fit: fill; }
.flow .cc-crop::before, .flow .cc-crop::after { content: ''; position: absolute; background: rgba(28,26,23,.5); }
.flow .cc-crop--wide::before, .flow .cc-crop--wide::after { top: 0; bottom: 0; width: var(--cc-edge, 16.667%); }
.flow .cc-crop--wide::before { left: 0; }
.flow .cc-crop--wide::after { right: 0; }
.flow .cc-crop--tall::before, .flow .cc-crop--tall::after { left: 0; right: 0; height: var(--cc-edge, 16.667%); }
.flow .cc-crop--tall::before { top: 0; }
.flow .cc-crop--tall::after { bottom: 0; }
.flow .cc-crop__box { position: absolute; inset: 0; box-shadow: inset 0 0 0 2px #fff; border-radius: 2px; }
.flow .cc-crop--wide .cc-crop__box { left: var(--cc-edge, 16.667%); right: var(--cc-edge, 16.667%); }
.flow .cc-crop--tall .cc-crop__box { top: var(--cc-edge, 16.667%); bottom: var(--cc-edge, 16.667%); }
.flow .cc-arrow { color: var(--ink-3); }
.flow .cc-cropres { display: grid; justify-items: center; gap: 6px; }
.flow .cc-round { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.flow .cc-round img, .flow .cc-av--mid { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.flow .cc-dlg .input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--bad); background: color-mix(in srgb, var(--bad) 4%, #fff); }
/* the phone's Messages header: the round picture over the name, as Messages draws it */
.flow .cc-prev { margin: 0; display: grid; gap: 8px; }
.flow .cc-phone { width: 100%; border-width: 7px; border-radius: 26px; box-shadow: var(--ring); }
.flow .cc-top { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: start; padding: 10px 8px 8px; background: var(--ph-bar); border-bottom: 1px solid rgba(0,0,0,.08); }
.flow .cc-back { color: #1f8ef1; font-size: 30px; line-height: 40px; text-align: center; }
.flow .cc-vid { color: #1f8ef1; display: grid; place-items: center; height: 40px; }
.flow .cc-who { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.flow .cc-chat { min-height: 0; padding-bottom: 16px; }
.flow .cc-chat .phone__day { text-align: center; line-height: 1.35; font-size: 11px; }
.flow .cc-chat .phone__text { white-space: normal; }
.flow .cc-chat .phone__text::after { display: none; }
/* The founders' annoyance labels (pages/operatorlabels.ts; docs/labels.md): the grader
   review's card (flow-notes insights-eval-review-2026-11-03.html) in the dashboard's tokens. The
   conversation on the left, the detector's answers on the right: the boxes to answer in the
   selected colour, the pre-filled ones grey, a changed one in ink. On phones one column. */
.flow .lb__prog { margin: 0 0 12px; display: grid; gap: 10px; }
.flow .lb__progline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.flow .lb__progline b { color: var(--ink); }
.flow .lb__pbar { width: 160px; height: 6px; border-radius: 99px; background: var(--tile); overflow: hidden; }
.flow .lb__pbar span { display: block; height: 100%; width: 0; background: var(--ok); }
.flow .lb__dots { display: flex; flex-wrap: wrap; gap: 4px; }
.flow .lb__dots button { width: 14px; height: 14px; padding: 0; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.flow .lb__dots button.is-both { border-color: var(--info); }
.flow .lb__dots button.is-done { background: var(--ok); border-color: var(--ok); }
.flow .lb__dots button.is-cur { outline: 2px solid var(--ink); outline-offset: 1px; }
.flow .lb__cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 20px; }
.flow .lb__ctop { margin: 0 0 10px; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* the conversation is the chat view's (chatview.ts labelTranscript); a question still to answer, or
   the reply to label, ringed */
.flow .lb__turns.cv { border-radius: var(--r-card); }
.flow .cv-row.lb-ring .cv-bubble { box-shadow: 0 0 0 2px var(--info); }
.flow .lb__q { position: sticky; top: 72px; }
.flow .lb__qstep { margin: 0 0 4px; font-size: .78125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.flow .lb__qh { margin: 0; font: 500 1.3125rem/1.3 var(--head); letter-spacing: -.01em; }
.flow .lb__def { margin: 6px 0 0; color: var(--ink-2); font-size: var(--fs-sm); }
.flow .lb__drows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.flow .lb__drow { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); }
.flow .lb__drow.is-open { border-color: var(--info); background: var(--sel); }
.flow .lb__drow.is-locked { background: var(--tile); border-color: transparent; }
.flow .lb__pill:disabled { cursor: default; }
.flow .lb__pill:disabled:not([aria-pressed=true]) { color: var(--ink-3); }
.flow .lb__grow--mine { color: var(--ink); }
.flow .lb__grow--mine input { accent-color: var(--ink); }
.flow .lb__grow.is-locked { cursor: default; }
.flow .lb__edit { margin-top: 8px; }
.flow .lb__judge { margin-top: 16px; padding: 12px 14px 10px; border-radius: 12px; background: var(--tile); }
.flow .lb__jsum { margin: 0; font: 500 1.0625rem/1.3 var(--head); }
.flow .lb__jagree { margin: 4px 0 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--ok); }
.flow .lb__jagree.is-diff { color: var(--warn-ink); }
.flow .lb__cmp { display: grid; margin-bottom: 8px; }
.flow .lb__crow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 5px 6px; font-size: var(--fs-sm); border-top: 1px solid var(--line); }
.flow .lb__crow--head { border-top: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.flow .lb__crow.is-diff { background: var(--warn-bg); border-radius: 6px; border-top-color: transparent; font-weight: 600; }
.flow .lb__cnote { display: block; font-weight: 400; }
.flow .lb__drow--col { flex-direction: column; align-items: stretch; }
.flow .lb__drow select, .flow .lb__grow--sel select { font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; max-width: 100%; }
.flow .lb__dtext { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; }
.flow .lb__dtext > span { display: flex; flex-direction: column; }
.flow .lb__hint { font-size: .78125rem; color: var(--ink-3); font-weight: 400; }
.flow .lb__pills { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.flow .lb__pills--col { flex-direction: column; }
.flow .lb__pill { min-width: 64px; min-height: 40px; padding: 6px 12px; font: 600 .875rem/1.2 var(--font); color: var(--ink); border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; }
.flow .lb__pill--wide { display: grid; gap: 2px; text-align: left; min-height: 36px; }
.flow .lb__pill[aria-pressed=true] { background: var(--tile-dark); color: #fff; border-color: var(--tile-dark); }
.flow .lb__pill[aria-pressed=true] .lb__hint { color: #fff; opacity: .8; }
.flow .lb__grow { display: flex; gap: 8px; align-items: center; padding: 4px 2px; font-size: var(--fs-sm); color: var(--ink-3); cursor: pointer; }
.flow .lb__grow input { accent-color: var(--ink-3); margin: 0; }
.flow .lb__grow kbd, .flow .lb__kpad { opacity: .6; min-width: 1.6em; display: inline-block; }
.flow .lb__started, .flow .lb__overall { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.flow .lb__why { display: block; width: 100%; margin-top: 12px; font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; resize: vertical; }
.flow .lb__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.flow .lb__spacer { flex: 1; }
.flow .lb__submit kbd { background: transparent; color: inherit; box-shadow: 0 0 0 1px currentColor; }
.flow .lb__submit:disabled { opacity: .35; cursor: default; }
.flow .lb__status { min-height: 1.5em; margin: 8px 0 0; font-size: var(--fs-sm); color: var(--ok); }
.flow .lb__loading { padding: 20px; }
@media (max-width: 900px) {
  .flow .lb__cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .flow .lb__q { position: static; }
}
@media (max-width: 600px) {
  .flow .lb__cols { padding: 14px; }
  .flow .lb__drow { flex-direction: column; align-items: stretch; }
  .flow .lb__pill { flex: 1; }
  .flow .lb__dots { gap: 3px; }
  .flow .lb__dots button { width: 10px; height: 10px; border-radius: 3px; }
}
.flow .lb__need { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
.flow .lb__grow--sel { flex-wrap: wrap; }
.flow .lb__grow--sel select { width: auto; min-width: 0; max-width: min(22rem, 100%); }
.flow .lb__q b { font-weight: 600; }
.flow .lb__card kbd, .flow .lb__keys kbd { display: inline-block; min-width: 1.5em; padding: 1px 5px; border-radius: 5px; background: var(--surface); box-shadow: var(--ring-soft); color: var(--ink-2); font: 500 .75rem/1.4 var(--font); text-align: center; }
.flow .lb__sub { display: block; max-width: 72ch; }
.flow .lb__keys { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
/* The Replies tab (pages/operatorreplylabels.ts): the reply being labelled ringed, the tool turns
   the grader read folded under their plain name, each tab's own progress in grey. */
.flow .lb__tool { align-self: stretch; margin: 0 4%; font-size: var(--fs-xs); color: var(--ink-3); }
.flow .lb__tool summary { cursor: pointer; padding: 2px 0; }
.flow .lb__tooltext { margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--tile); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow-y: auto; }
.flow .lb__tabcount { margin-left: 6px; color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.flow .lb__pill kbd { margin-right: 2px; }

/* ---------- The founders' Insights (annoyance design, 3 Nov 2026; pages/insightsann.ts,
   pages/insightissue.ts, annoyanceui.ts): Rough patches and Other issues as rows that are
   links, Topics as links, Causes as tabs with a chat and the fix bar, the issue page's list
   beside its open chat. Ported from the mockup's own rules (mk- there, ann- here). ---------- */
.flow .ann-scol { display: grid; gap: 32px; }
@container insights (min-width: 1000px) { .flow .ann-scol { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; } }
.flow .ann-scol > *, .flow .ann-issues > *, .flow .ann-ssec { min-width: 0; }
.flow .ann-issues { display: grid; gap: 32px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.flow .ann-shead { display: block; margin-bottom: 12px; }
.flow .ann-shead .section-title { margin: 0; display: flex; align-items: center; justify-content: flex-start; }
.flow .ann-shead__t { display: inline-flex; align-items: center; gap: 4px; }
.flow .ann-secsub { margin: 2px 0 0; font-size: .875rem; color: var(--ink-2); }
.flow .ann-sec { margin-top: 40px; margin-bottom: 40px; }
.flow .ann-lcard { padding: 0; overflow: hidden; }
.flow .ann-lcard .irows { margin: 0; }
.flow .ann-lrow { padding: 0; }
.flow .ann-rowlink { display: flex; align-items: center; gap: 8px 16px; width: 100%; padding: 12px 16px; color: inherit; text-decoration: none; min-height: 48px; box-sizing: border-box; }
.flow .ann-lrow__main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.flow .ann-lrow .irow__name { font-weight: 500; white-space: normal; overflow: visible; text-overflow: clip; }
.flow .ann-topic { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); font-size: .75rem; line-height: 1.5; white-space: nowrap; }
.flow .ann-lrow__facts { flex: none; display: inline-flex; align-items: center; gap: 10px; }
.flow .ann-num { font-size: .8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow .ann-arrow { display: inline-block; width: 10px; min-width: 10px; text-align: center; font-size: .75rem; }
.flow .ann-tgo { color: var(--ink-3); font-weight: 600; width: 10px; text-align: center; transition: transform .12s; }
.flow .ann-rowlink:hover { background: var(--hover); }
.flow .ann-rowlink:hover .irow__name { text-decoration: underline; text-underline-offset: 3px; }
.flow .ann-rowlink:hover .ann-tgo, .flow .ann-tlink:hover .ann-tgo { color: var(--ink); transform: translateX(2px); }
.flow .ann-rowlink:focus-visible, .flow .ann-tlink:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
.flow .ann-lmore { padding: 6px 8px; border-top: 1px solid var(--line); list-style: none; }
.flow .ann-checked { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 12px 16px 4px; border-top: 1px solid var(--line); font-size: .75rem; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; }
.flow .ann-checked__sub { font-weight: 400; letter-spacing: 0; }
.flow .ann-muted .irow__name, .flow .ann-muted .ann-num, .flow .ann-muted .ann-topic, .flow .ann-muted .ann-arrow { color: var(--ink-3); }
@media (max-width: 560px) { .flow .ann-rowlink { align-items: flex-start; } .flow .ann-lrow__facts { padding-top: 2px; } }

.flow .ann-stopic { padding: 0; }
.flow .ann-tlink { display: grid; gap: 8px; padding: 14px 16px; color: inherit; text-decoration: none; border-radius: inherit; }
.flow .ann-tlink .topic__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; }
.flow .ann-tlink .topic__bar { display: block; }
.flow .ann-tname { font-weight: 500; flex: 1 1 0; min-width: 0; }
.flow .ann-stopic .topic__count { white-space: nowrap; }
.flow .ann-tlink:hover { background: var(--hover); }
.flow .ann-tlink:hover .ann-tname { text-decoration: underline; text-underline-offset: 3px; }

/* Causes: tabs, the line under them, the causes beside the top example's chat */
.flow .ann-where { min-width: 0; }
.flow .ann-wcard { display: block; padding: 0; overflow: hidden; min-width: 0; }
.flow .ann-wtabs { padding: 0 4px; max-width: 100%; overflow-x: auto; }
.flow .ann-wtabs button { white-space: nowrap; }
.flow .ann-wtabs button:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
.flow .ann-tabn { margin-left: 8px; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.flow .ann-wtabs [aria-selected="true"] .ann-tabn { color: var(--ink-2); }
.flow .ann-wone { display: flex; align-items: baseline; margin: 0; padding: 14px 16px 0; font-size: 1rem; font-weight: 500; line-height: 1.3; }
.flow .ann-wsub { margin: 0; padding: 12px 16px 14px; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.flow .ann-w2 { display: grid; gap: 16px; padding: 0 16px 16px; }
@container insights (min-width: 1000px) { .flow .ann-w2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }
.flow .ann-w2 > * { min-width: 0; }
.flow .ann-wlist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.flow .ann-w + .ann-w { border-top: 1px solid var(--line); }
.flow .ann-w__head { display: flex; width: 100%; align-items: baseline; gap: 12px; padding: 10px 16px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.flow .ann-w__head:hover { background: var(--hover); }
.flow .ann-w__head:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
.flow .ann-w__head[aria-pressed="true"] { background: var(--hover); box-shadow: inset 3px 0 0 var(--ink); }
.flow .ann-w__head[aria-pressed="true"] .ann-w__name { font-weight: 500; }
.flow .ann-w__name { flex: 1 1 auto; min-width: 0; font-size: .875rem; }
.flow .ann-w__n { font-size: .8125rem; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.flow .ann-wchat { padding: 0; overflow: hidden; scroll-margin-top: 72px; }
.flow .ann-wchat .ann-fbar { position: static; }

/* an open chat: its head, the bubbles, the marked message, the fix bar */
.flow .ann-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flow .ann-tags b { font-weight: 600; }
.flow .ann-pane { padding: 0; display: flex; flex-direction: column; overflow: visible; }
.flow .ann-pane__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.flow .ann-cvbody { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.flow .ann-withheld { padding: 24px 16px; }
.flow .cv-row.ann-hit { background: color-mix(in srgb, var(--warn-bg) 55%, transparent); }
.flow .ann-hitinfo { display: inline-grid; gap: 1px; margin-top: 4px; font-size: .75rem; line-height: 1.35; font-weight: 500; color: var(--warn-ink); }
.flow .ann-hitsub { font-weight: 400; color: var(--ink-2); }
.flow .cv-row--out .ann-hitinfo { align-self: flex-end; text-align: right; }
.flow .ann-iw { position: relative; display: inline-flex; vertical-align: middle; }
.flow .ann-iw--end .infotip { left: auto; right: 0; }
.flow .ann-fbar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: var(--surface); box-shadow: 0 -4px 12px rgba(0,0,0,.04); }
.flow .ann-fbar__t { flex: 1 1 240px; min-width: 0; margin: 0; font-size: .875rem; line-height: 1.45; }
.flow .ann-fbar__t b { font-weight: 600; }
.flow .ann-fbar__end { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flow .ann-fbar__s { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 500; white-space: nowrap; }
/* The assistant's ✦ button (fixed, bottom right) never covers the bar: on a wide screen the page
   keeps a right gutter wider than the button (right 20px + 52px) while a fix bar is on it; on a
   phone the bar sits flush on the bottom bar (46px + its bottom padding) and keeps the button's
   corner free (right 14px + 46px, the bar's own edge at least 16px in, plus a 12px gap). */
@media (min-width: 861px) { .flow .appmain:has(.ann-fbar) { padding-right: 88px; } }
@media (max-width: 860px) { .flow .ann-fbar { bottom: calc(46px + max(4px, env(safe-area-inset-bottom, 0px))); padding-right: 56px; border-radius: 0; } .flow .ann-fbar__t { flex-basis: 100%; } .flow .ann-fbar__end { margin-left: 0; } }
/* a conversation's own page (the founders'): the bar spans the transcript card's foot */
.flow .transcript.cv > .cv-fbar { margin: 16px -20px -20px; }
@media (max-width: 760px) { .flow .transcript.cv > .cv-fbar { margin: 12px -12px -16px; } }

/* the issue page: the list beside the open conversation */
.flow .ann-isub { display: inline-flex; align-items: center; gap: 6px; }
.flow .ann-isub .ann-arrow { width: auto; font-size: .875rem; }
.flow .ann-isec .section-title { display: flex; align-items: center; justify-content: flex-start; margin-top: 24px; }
.flow .ann-fd { display: grid; gap: 16px; align-items: start; }
@container insights (min-width: 1000px) { .flow .ann-fd { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } }
.flow .ann-fd > * { min-width: 0; }
.flow .ann-clist { margin: 0; padding: 0; overflow: hidden; }
.flow .ann-clist .irow { padding: 0; }
.flow .ann-crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; width: 100%; padding: 12px 16px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.flow .ann-crow:hover { background: var(--hover); }
.flow .ann-crow[aria-pressed="true"] { background: var(--hover); box-shadow: inset 3px 0 0 var(--ink); }
.flow .ann-crow:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
.flow .ann-crow__who { font-weight: 600; font-size: .9375rem; line-height: 1.4; }
.flow .ann-crow__when { font-size: .8125rem; color: var(--ink-3); white-space: nowrap; padding-top: 2px; }
.flow .ann-crow__said { grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--ink-2); }
.flow .ann-crow__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.flow .ann-crow__tags .tag { height: 22px; padding: 0 8px; font-size: .75rem; }
.flow .ann-b { color: var(--ink); }
.flow .ann-b--reasoning { background: var(--brand-lavender); }
.flow .ann-b--gap { background: var(--brand-blush); }
.flow .ann-b--service { background: var(--brand-mist); }

/* Conversations filtered to a topic: the head's ✕ and how they ended */
.flow .ann-ch1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flow .ann-clear { width: 32px; height: 32px; color: var(--ink-2); }
.flow .ann-clear:hover { background: var(--hover); color: var(--ink); }
.flow .ann-csplit { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.flow .ann-csplit > span { display: inline-flex; align-items: center; gap: 6px; }
.flow .ann-k { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.flow .ann-k.is-well { background: var(--good); }
.flow .ann-k.is-open { background: var(--warn); }
.flow .ann-k.is-gaveup { background: var(--ink-3); }

/* Test drafts (4 Nov 2026; ~/Desktop/flow-notes/test-drafts-mockup-2026-11-04): Tests → Drafts,
   a draft's page (its pull bar pinned at the foot, as the fix bar) and Make a test. */
.flow .draftsrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: -8px; }
.flow .draftsrow .why { flex: 1 1 320px; margin: 0; }
.flow .draftsrow + .draftnote { margin: 0; }
.flow .drafttbl td.rowwide { color: var(--ink-2); }
.flow .drafttbl tr.is-muted td, .flow .drafttbl tr.is-muted .link { color: var(--ink-3); }
.flow .drafttbl tr.is-muted .link--strong { font-weight: 500; }
.flow .drafttbl tr.draftdiv td { padding: 14px 12px 8px; font: 500 .75rem/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--bg); }
.flow .scenhead.drafthead > .stack-8 { flex: 1 1 480px; }
.flow .scenhead.drafthead h1 { white-space: normal; }
.flow .draftnote { margin: 0 0 8px; }
.flow .draftnote + .stack-16 > .section-title { margin-top: 16px; }
.flow .draftbar { border: 1px solid var(--line); border-radius: var(--r-card); }
.flow .draftfile pre.code { margin: 0 20px 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.flow .draftfile summary .mono { margin-left: 8px; }
.flow .draftcopy, .flow .maketest { display: inline-flex; align-items: center; }
.flow .maketest__s { color: var(--ink-2); }
.flow .maketest__note:empty { display: none; }
@media (max-width: 860px) { .flow .draftbar { border-left: 0; border-right: 0; border-radius: 0; margin: 0 -16px; } }

/* WhatsApp: your own number through Meta's window (8 Nov 2026; pages/whatsappown.ts, the
   storyboard ~/Desktop/flow-notes/whatsapp-flows-storyboard-2026-11-08). The card is a .platcol
   card; the choices are .choice, the connecting rows .wacheck, the state a .cpill. */
.flow .wagives { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .875rem; color: var(--ink-2); }
.flow .wagives li { display: flex; gap: 8px; align-items: flex-start; }
.flow .wagives svg { flex: none; margin-top: 3px; color: var(--good); }
.flow fieldset.wachoice { border: 0; margin: 0; padding: 0; min-width: 0; }
.flow .waact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.flow .waact .btn svg { margin-right: 2px; }
.flow .wawait .linkbtn { font-size: inherit; }
.flow .wanum { display: flex; align-items: center; gap: 12px; }
.flow .wanum__id { flex: 1 1 auto; min-width: 0; }
.flow .wanum .card__sub { margin-top: 0; }
.flow .wanum .platicon { margin-right: 0; }
.flow .wanum .cpill { flex: none; }
.flow .wakv { grid-template-columns: minmax(0, 132px) minmax(0, 1fr); align-items: baseline; }
.flow .wakv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.flow .wakv .tag { height: 22px; padding: 0 8px; font-size: .75rem; }
.flow .wakv__sub { flex-basis: 100%; margin: 0; }
.flow .wameta { padding-top: 12px; border-top: 1px solid var(--line); }
.flow .waqr { justify-items: start; margin-top: 6px; }
.flow .waqr .onb-join__qrimg { width: 120px; height: 120px; }
.flow .waquiet { color: var(--ink-3); }
.flow .waext { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.flow .wafoot { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.flow .wafoot p { margin: 0; }
.flow .wafoot .btn { justify-self: start; }
.flow .wanowrap { white-space: nowrap; }
.flow .waown .wacheck .link { white-space: nowrap; }
.flow .wapersonal__t { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.flow .wapersonal .hint { margin: 2px 0 0; }
.flow .waroutes { list-style: none; margin: 0; padding: 0; display: grid; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); }
.flow .waroutes li { display: grid; gap: 2px; padding: 10px 14px; font-size: .8125rem; color: var(--ink-2); }
.flow .waroutes li + li { border-top: 1px solid var(--line); }
.flow .waroutes b { color: var(--ink); font-size: .875rem; font-weight: 600; }
.flow .btn--danger { background: var(--bad); }
.flow .btn--danger:hover { background: var(--bad-ink); }
@media (max-width: 560px) {
  .flow .wakv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .flow .wakv dd { margin-bottom: 10px; }
  .flow .waqr { display: none; }
}
/* Deployments' History (27 Oct 2026): each row's one button, then its ⋯ menu
   (ui.ts rowMenu, a popover over the shell's .menu look); rows without a menu
   keep its slot, so the buttons line up */
.flow .histtbl th.rowacts, .flow .histtbl td.rowacts { width: 1%; text-align: right; }
.flow .histtbl td.rowacts { padding-top: 8px; padding-bottom: 8px; }
.flow .histtbl tr:focus { outline: none; }
.flow .rowacts__in { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.flow .rowacts__btn { display: inline-flex; }
.flow .rowmenu__wrap { display: inline-flex; flex: none; width: 28px; }
.flow .rowmenu__btn { width: 28px; padding: 0; justify-content: center; }
.flow .rowmenu__btn[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.flow .menu.rowmenu { position: fixed; inset: auto; margin: 0; width: 248px; border: 0; color: var(--ink); overflow: visible; }
.flow .menu.rowmenu:not(:popover-open) { display: none; }
.flow .menu.rowmenu .rowmenu__item { height: auto; min-height: 40px; padding: 8px 12px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; white-space: normal; }
.flow .menu.rowmenu a.rowmenu__item { flex-direction: row; align-items: center; justify-content: space-between; }
.flow .rowmenu__why { font-size: .75rem; line-height: 1.35; font-weight: 400; color: var(--ink-3); }
.flow .menu.rowmenu .rowmenu__item[aria-disabled="true"] { color: var(--ink-3); cursor: not-allowed; }
.flow .menu.rowmenu .rowmenu__item[aria-disabled="true"]:hover { background: none; }
.flow .menu.rowmenu .rowmenu__item:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
.flow .histfoot { display: flex; align-items: center; gap: 12px; }
/* on a narrow screen the table scrolls sideways; its actions stay in view at its end */
@media (max-width: 760px) {
  .flow .histtbl th.rowacts, .flow .histtbl td.rowacts { position: sticky; right: 0; background: var(--surface); box-shadow: -10px 0 10px -10px rgba(28,26,23,.18); }
  .flow .histtbl th.rowacts { background: #FBFAF9; }
}

/* a deploy's logs and why it did not go live, in a wide dialog */
@media (min-width: 561px) { .flow dialog.dialog.dialog--wide { width: min(100% - 32px, 880px); } }
.flow .dialog__sub { font: 600 .9375rem/1.3 var(--font); color: var(--ink); }
.flow .logview { max-height: 46vh; overflow: auto; padding: 10px 12px; border-radius: 10px; background: var(--brand-paper); box-shadow: inset 0 0 0 1px var(--line); font: .75rem/1.6 var(--mono); }
.flow .logview > p { font-family: var(--font); font-size: var(--fs-sm); }
.flow .logline { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.flow .logline__time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.flow .logline__text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.flow .logline--bad .logline__text { color: var(--bad); }
.flow .logline--warn .logline__text { color: var(--warn-ink); }
.flow .findings { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }

/* Developers → API keys: the agent's API endpoint on Flow's cloud */
.flow .endpoint { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.flow .endpoint__env { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.flow .endpoint__paths { display: grid; gap: 10px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; }
.flow .endpoint__paths li { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.flow .endpoint__paths code { font-size: .8125rem; color: var(--ink); }
@media (max-width: 560px) {
  .flow .endpoint { grid-template-columns: minmax(0, 1fr) auto; }
  .flow .endpoint > div { grid-column: 1 / -1; grid-row: 2; }
  .flow .endpoint__paths li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}