/* YDO Connect demo: the record (a10-record; round two b6-record) — the client portal's Dashboard and Improve Your Bot,
   in the demo's tokens. Mirrors public/client/index.html: the gradient sidebar with its sections and items, the topbar
   ("Your bot is on duty", the last conversation, LIVE), the funnel strip with its conversion pills, the open-rate band,
   "When customers chat", the 30-day pulse, Recent Activity, the two 7-day charts, the gap cards.
   Width classes come from record.js (on #dc-record): data-w="xl" (>= 980 px: side nav, six-across funnel), "wide"
   (760–979: side nav, three across) — both with the queue beside the learned answers — "mid" (540–759: the nav becomes
   a strip on top), "narrow" (< 540: the six figures three across, the conversation straight after them).
   Motion is opacity / transform / colour only; hover rules live in (hover:hover); sizes sit on the 4 px grid. */

.dc-rec { display: flex; min-height: 100%; background: var(--app-canvas); color: var(--navy); font-family: var(--ff); font-size: var(--fs-ui); line-height: 1.45; }
.dc-rec [hidden] { display: none !important; }
.dc-rec h2, .dc-rec h3, .dc-rec h4 { margin: 0; font-weight: 700; color: var(--navy); }
.dc-rec-title:focus { outline: none; }

/* ---------- the side nav (the portal's gradient sidebar, navy here); it stays put while the page scrolls ---------- */
.dc-rec-side { flex: 0 0 200px; min-width: 0; background: var(--navy); color: var(--surface); }
.dc-rec-sidein { position: sticky; top: 0; display: flex; flex-direction: column; height: var(--rec-h, auto); padding: 0 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 60%); }
.dc-rec-brand { flex: none; height: 60px; display: flex; align-items: center; padding: 0 8px; }
.dc-rec-word { font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: var(--surface); }
.dc-rec-nav { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-bottom: 8px; }
.dc-rec-sec { padding: 12px 12px 4px; font-size: 10.5px; font-weight: 700; line-height: 16px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--navy-meta); }
.dc-rec-tab { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; margin: 2px 0; padding: 0 12px;
  border: 0; border-radius: var(--r-control); background: transparent; color: var(--navy-body);
  font-size: 13.5px; font-weight: 700; text-align: left; white-space: nowrap; }
.dc-rec-tab svg { flex: none; }
/* the two buttons take a 44 px press; their size never changes */
button.dc-rec-tab { transition: background-color var(--t-hover) var(--ease-std), color var(--t-hover) var(--ease-std); }
button.dc-rec-tab::before { content: ''; position: absolute; inset: -4px 0; }
/* the portal's other items, as labels: a shade quieter than the two that open something here */
.dc-rec-item { color: var(--navy-meta); font-weight: 400; cursor: default; }
.dc-rec-item svg { opacity: .8; }
.dc-rec-tab.dc-on { background: rgba(255, 255, 255, .12); color: var(--surface); box-shadow: inset 3px 0 0 var(--connect); }
#dc-record .dc-rec-tab:focus-visible { outline-color: var(--orange); }   /* on navy: the bright ring (tokens.css sets the ink one for light surfaces) */
.dc-rec-tab.dc-pressed { --dc-press-ink: rgba(255, 255, 255, .12); }
.dc-rec[data-short] .dc-rec-foot { display: none; }
.dc-rec-foot { flex: none; padding: 12px 8px; border-top: 1px solid var(--navy-line); font-size: 11.5px; line-height: 16px; color: var(--navy-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the main column: the topbar, then the page ---------- */
.dc-rec-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dc-rec-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 60px; padding: 0 24px; background: var(--navy); color: var(--surface); box-shadow: 0 1px 0 var(--navy-line); }
.dc-rec-bot { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dc-rec-botx { min-width: 0; }
.dc-rec-duty { font-size: 16px; font-weight: 900; line-height: 20px; white-space: nowrap; }
.dc-rec-status { font-size: 12px; line-height: 16px; color: var(--navy-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 600ms var(--ease-std); }
.dc-rec-status.dc-rec-flash { color: var(--connect-bright); transition: none; }
.dc-rec-live { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); font-size: 12.5px; font-weight: 700; line-height: 1; }
.dc-rec-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--connect-bright); animation: dc-rec-blink 1.6s ease-in-out infinite; }
@keyframes dc-rec-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dc-rec-live::before { animation: none; } }
.dc-rec-ws { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--navy-body); }
.dc-rec-body { padding: 20px 24px 24px; }
.dc-rec-panel { min-width: 0; }

/* ---------- the Dashboard grid: the portal's order (funnel, open rate, when + pulse), then this session's
   conversation beside Recent Activity, then the two 7-day charts ---------- */
.dc-rec-dash { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: stretch;
  grid-template-areas: "funnel funnel funnel funnel funnel funnel" "rate rate rate rate rate rate" "heat heat heat pulse pulse pulse"
    "conv conv conv acts acts acts" "act7 act7 act7 traffic traffic traffic"; }
.dc-rec-dash[hidden] { display: none; }
[data-dc-rec-area="funnel"] { grid-area: funnel; }
[data-dc-rec-area="rate"] { grid-area: rate; }
[data-dc-rec-area="heat"] { grid-area: heat; }
[data-dc-rec-area="pulse"] { grid-area: pulse; }
[data-dc-rec-area="conv"] { grid-area: conv; }
[data-dc-rec-area="acts"] { grid-area: acts; }
[data-dc-rec-area="act7"] { grid-area: act7; }
[data-dc-rec-area="traffic"] { grid-area: traffic; }

.dc-rec-card { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.dc-rec-chead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.dc-rec-chead h3 { font-size: 14px; line-height: 20px; }
.dc-rec-range { flex: none; font-size: 12px; line-height: 16px; color: var(--meta); }
.dc-rec-corner { position: absolute; top: 10px; right: 14px; font-size: 11px; }

/* tones: one colour per series, everywhere it is drawn */
.dc-rec-tone-navy, .dc-rec-tone-visitors, [data-dc-rec-key="visitors"] { --rec-tone: var(--navy); }
.dc-rec-tone-green, .dc-rec-tone-conversations, [data-dc-rec-key="conversations"] { --rec-tone: var(--connect-ink); }
.dc-rec-tone-opened, [data-dc-rec-key="opened"] { --rec-tone: var(--navy-ctl); }
[data-dc-rec-key="leads"] { --rec-tone: var(--connect); }
[data-dc-rec-key="handoffs"] { --rec-tone: var(--navy-meta); }
[data-dc-rec-key="bookings"] { --rec-tone: var(--connect-bright); }

/* ---------- the funnel strip (renderMissionControl's stages + conversion pills) ---------- */
.dc-rec-fcard { padding: 24px 20px 16px; }
.dc-rec-funnel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.dc-rec-stage { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dc-rec-lbl { font-size: 10px; font-weight: 700; line-height: 16px; text-transform: uppercase; letter-spacing: .5px; color: var(--meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-rec-vrow { display: flex; align-items: center; gap: 6px; min-height: 32px; min-width: 0; }
.dc-rec-val { font-size: 26px; font-weight: 900; line-height: 32px; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-rec-plus { flex: none; display: inline-block; padding: 0 6px; border: 1px solid var(--connect-tint-line); border-radius: var(--r-pill);
  background: var(--connect-tint); color: var(--connect-ink); font-size: 11.5px; font-weight: 700; line-height: 18px; }
.dc-rec-bar { display: block; height: 8px; margin-top: 2px; }
.dc-rec-fill { display: block; height: 100%; border-radius: var(--r-bar); background: var(--rec-tone, var(--navy)); transform-origin: left center; transform: scaleX(0);
  transition: transform var(--t-count) var(--ease-out); }
.dc-rec-snap .dc-rec-fill { transition: none; }
.dc-rec-conv { display: flex; align-items: flex-start; gap: 6px; min-height: 32px; margin-top: 4px; }
.dc-rec-pct { flex: none; padding: 1px 8px; border-radius: var(--r-pill); background: var(--connect); color: var(--navy); font-size: 12px; font-weight: 900; line-height: 18px; }
.dc-rec-clbl { min-width: 0; padding-top: 2px; font-size: 11px; line-height: 14px; color: var(--meta); }

/* ---------- the open-rate band (renderOpenRateBand) ---------- */
.dc-rec-rate { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; padding: 14px 24px; }
.dc-rec-rlbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--meta); }
.dc-rec-rrange { margin-left: 4px; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--meta); }
.dc-rec-rval { font-size: 28px; font-weight: 900; line-height: 32px; color: var(--navy); }
.dc-rec-rval.dc-low { color: var(--meta); }
.dc-rec-rdelta { font-size: 12.5px; font-weight: 700; color: var(--meta); }
.dc-rec-rdelta.dc-up { color: var(--ok); }
.dc-rec-rdelta.dc-down { color: var(--error); }
.dc-rec-rcounts { margin-left: auto; font-size: 12.5px; color: var(--meta); }
.dc-rec-rcounts b { font-weight: 900; color: var(--navy); }

/* ---------- When customers chat + the 30-day pulse ---------- */
.dc-rec-mc { display: flex; flex-direction: column; padding: 16px 20px; }
.dc-rec-mc h3 { margin-bottom: 12px; font-size: 14px; line-height: 20px; }
/* the portal centres a short card's content under its heading (.mc-card > h3 + * / > *:last-child) */
.dc-rec-mc > h3 + * { margin-top: auto; }
.dc-rec-mc > *:last-child { margin-bottom: auto; }
.dc-rec-heat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.dc-rec-heat i { display: block; aspect-ratio: 1; max-height: 36px; border-radius: var(--r-bar); background: var(--connect-ink); }
.dc-rec-hlabels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; line-height: 14px; color: var(--meta); }
.dc-rec-hnote { margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--meta); }
.dc-rec-hnote b { color: var(--navy); }
.dc-rec-srow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.dc-rec-srow:first-child { padding-top: 0; border-top: 0; }
.dc-rec-slbl { flex: 0 0 96px; font-size: 12.5px; font-weight: 700; line-height: 16px; }
.dc-rec-spark { flex: 1 1 auto; min-width: 0; height: 26px; }
.dc-rec-spark rect { fill: var(--rec-tone, var(--navy)); transform-box: fill-box; transform-origin: 50% 100%; transition: transform var(--t-count) var(--ease-out); }
.dc-rec-sval { flex: 0 0 48px; text-align: right; font-size: 16px; font-weight: 900; line-height: 20px; font-variant-numeric: tabular-nums; }

/* ---------- the conversation + Recent Activity ---------- */
.dc-rec-acts, .dc-rec-qas { list-style: none; margin: 0; padding: 0 20px 4px; }
.dc-rec-act { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.dc-rec-act:last-child, .dc-rec-qa:last-child { border-bottom: 0; }
.dc-rec-act.dc-rec-own, .dc-rec-qa.dc-rec-own { margin: 0 -20px; padding: 12px 20px; background: var(--connect-tint); border-bottom-color: var(--connect-tint-line); }
.dc-rec-aicon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--surface); }
.dc-rec-ai-lead { background: var(--connect-ink); }
.dc-rec-ai-booking { background: var(--navy-2); }
.dc-rec-ai-handoff { background: var(--navy-ctl); }
.dc-rec-atext { min-width: 0; display: flex; flex-direction: column; }
.dc-rec-atitle { font-size: 13.5px; font-weight: 700; line-height: 20px; color: var(--navy); }
.dc-rec-adetail { font-size: 12.5px; line-height: 18px; color: var(--body); overflow-wrap: anywhere; }
.dc-rec-atime { font-size: 11.5px; line-height: 16px; color: var(--meta); }

.dc-rec-qa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.dc-rec-qmain { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dc-rec-q { font-size: 14px; font-style: italic; line-height: 20px; color: var(--navy); overflow-wrap: anywhere; }
.dc-rec-qtime { flex: none; font-size: 11.5px; line-height: 20px; color: var(--meta); white-space: nowrap; }
.dc-rec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-rec-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 10px; border: 1px solid transparent;
  border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; line-height: 16px; }
.dc-rec-chip svg { flex: none; }
.dc-rec-chip-page { background: var(--surface-2); border-color: var(--line); color: var(--body); }
.dc-rec-chip-person, .dc-rec-chip-lead, .dc-rec-chip-booking { background: var(--st-sent-bg); color: var(--navy); }
.dc-rec-chip-learned { background: var(--ok-tint); border-color: var(--ok-line); color: var(--ok); }
.dc-rec-chip-needs { position: relative; background: var(--recall-tint); border-color: var(--recall-line); color: var(--recall);
  transition: border-color var(--t-hover) var(--ease-std); }
.dc-rec-chip-needs::before { content: ''; position: absolute; inset: -11px -4px; }   /* a 44 px target, the chip's size unchanged */

/* ---------- the two 7-day charts (inline SVG) ---------- */
.dc-rec-ccard { display: flex; flex-direction: column; }
.dc-rec-cbody { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 12px 16px 14px; }
.dc-rec-chart { min-width: 0; }
.dc-rec-csvg { display: block; width: 100%; height: auto; overflow: visible; }
.dc-rec-grid { stroke: var(--line-2); stroke-width: 1; }
.dc-rec-tick { fill: var(--meta); font-family: var(--ff); font-size: 10.5px; }
.dc-rec-dl { fill: var(--rec-tone); font-family: var(--ff); font-size: 10.5px; font-weight: 700; }
.dc-rec-line { fill: none; stroke: var(--rec-tone); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dc-rec-area { fill: var(--rec-tone); stroke: none; opacity: .07; }
.dc-rec-pt, .dc-rec-barf { fill: var(--rec-tone); }
.dc-rec-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 11px; line-height: 16px; color: var(--body); }
.dc-rec-legend li { display: inline-flex; align-items: center; gap: 6px; }
.dc-rec-ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--rec-tone); }

/* ---------- Improve Your Bot (renderGapClusters / renderGapClusterCard) ---------- */
.dc-rec-icard { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.dc-rec-ih { font-size: 16px; line-height: 24px; }
/* the heading row holds the confirmation's height (12 + 20 + 12 + its hairlines) whether or not it is showing */
.dc-rec-ihead { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 46px; }
.dc-rec-ihead .dc-rec-alert { min-width: 0; }
.dc-rec[data-w="narrow"] .dc-rec-ihead { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 78px; }
.dc-rec-ih:focus, .dc-rec-sub:focus { outline: none; }
/* by keyboard, where focus landed after Teach / Not relevant is shown (i2) */
.dc-rec-ih:focus-visible, .dc-rec-sub:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
.dc-rec-alert { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); color: var(--navy); font-size: 13.5px; line-height: 20px; }
.dc-rec-alert.dc-ok { border-color: var(--ok-line); background: var(--ok-tint); color: var(--ok); }
.dc-rec-icols { display: flex; flex-direction: column; gap: 20px; }
.dc-rec-icol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dc-rec-gaps { display: flex; flex-direction: column; gap: 12px; }
.dc-rec .dc-rec-sub { margin: 4px 0 0; font-size: 11.5px; line-height: 16px; text-transform: uppercase; letter-spacing: .5px; color: var(--meta); }
.dc-rec-gap { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  transition: border-color 600ms var(--ease-std), background-color 600ms var(--ease-std); }
.dc-rec-gap.dc-rec-landed { border-color: var(--connect); background: var(--connect-tint); transition: none; }
.dc-rec-ghead { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.dc-rec-gtitle { display: flex; flex-direction: column; min-width: 0; }
.dc-rec-gtitle h4 { font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.dc-rec-asked { font-size: 12px; line-height: 16px; color: var(--meta); }
.dc-rec-badge { flex: none; max-width: 100%; padding: 2px 12px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; line-height: 16px; }
.dc-rec-badge-needs { background: var(--recall-tint); color: var(--recall); }
.dc-rec-badge-drafted { background: var(--st-sent-bg); color: var(--navy-2); }
.dc-rec-badge-unsat { background: var(--st-declined-bg); color: var(--st-declined-fg); }
.dc-rec-badge-ok { background: var(--ok-tint); color: var(--ok); }
.dc-rec-badge-off { background: var(--line-2); color: var(--meta); }
.dc-rec-examples { display: flex; flex-direction: column; gap: 2px; }
.dc-rec-example { font-size: 13px; font-style: italic; line-height: 20px; color: var(--meta); overflow-wrap: anywhere; }
.dc-rec-ta { display: block; width: 100%; min-height: 88px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); color: var(--navy); font-size: 14px; line-height: 20px; resize: vertical;
  transition: border-color var(--t-hover) var(--ease-std); }
.dc-rec-ta::placeholder { color: var(--app-ph); }
.dc-rec-ta:focus-visible { border-color: var(--navy-ctl); }
.dc-rec-ta.dc-rec-typing { border-color: var(--connect-ink); }
.dc-rec-gacts { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-rec-btn { min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-control); font-size: 13.5px; font-weight: 700; white-space: nowrap;
  transition: background-color var(--t-state) var(--ease-std), color var(--t-state) var(--ease-std), border-color var(--t-state) var(--ease-std); }
.dc-rec-primary { background: var(--navy); color: var(--surface); }
/* Teach is not drawn until there is an answer: its place is held, so nothing beside it moves when it springs in */
.dc-rec-primary.dc-rec-off { visibility: hidden; }
.dc-rec-primary.dc-pressed { --dc-press-ink: transparent; background: var(--navy-2); }
.dc-rec-secondary { border-color: var(--line); background: var(--surface); color: var(--navy); }
.dc-rec-learned { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dc-rec-when { font-size: 12px; color: var(--meta); }
.dc-rec-answer { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--app-canvas);
  color: var(--navy); font-size: 13.5px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-rec-dnote { margin-top: -4px; font-size: 12px; line-height: 16px; color: var(--navy-ctl); }
.dc-rec-remove { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--error);
  font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dc-rec-gap-off { flex-direction: row; align-items: center; justify-content: space-between; background: var(--surface-2); }
.dc-rec-gtopic { min-width: 0; font-size: 14px; color: var(--meta); overflow-wrap: anywhere; }

@media (hover: hover) {
  button.dc-rec-tab:hover { background: rgba(255, 255, 255, .06); color: var(--surface); }
  button.dc-rec-tab.dc-on:hover { background: rgba(255, 255, 255, .12); }
  .dc-rec-chip-needs:hover { border-color: var(--recall); }
  .dc-rec-primary:not(:disabled):hover { background: var(--navy-2); }
  .dc-rec-secondary:hover { border-color: var(--navy-ctl); }
  .dc-rec-remove:hover { color: var(--st-declined-fg); }
}

/* ---------- xl + wide: the queue to review beside the answers already learned (a taught card lands in sight) ---------- */
.dc-rec[data-w="xl"] .dc-rec-icols, .dc-rec[data-w="wide"] .dc-rec-icols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; }

/* ---------- wide: the six figures three across, two equal columns below ---------- */
.dc-rec[data-w="wide"] .dc-rec-side { flex-basis: 184px; }
.dc-rec[data-w="wide"] .dc-rec-funnel, .dc-rec[data-w="mid"] .dc-rec-funnel, .dc-rec[data-w="narrow"] .dc-rec-funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* three across on a phone: a label may take two lines; both are held, so every figure and bar sits on one line */
.dc-rec[data-w="narrow"] .dc-rec-lbl { min-height: 26px; white-space: normal; line-height: 13px; overflow: visible; }
.dc-rec[data-w="wide"] .dc-rec-dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "funnel funnel" "rate rate" "heat pulse" "conv conv" "acts acts" "act7 traffic"; }

/* ---------- mid + narrow: the nav becomes a strip on top; one column, the conversation straight after the figures ---------- */
.dc-rec[data-w="mid"], .dc-rec[data-w="narrow"] { flex-direction: column; }
.dc-rec[data-w="mid"] .dc-rec-side, .dc-rec[data-w="narrow"] .dc-rec-side { flex: none; }
.dc-rec[data-w="mid"] .dc-rec-sidein, .dc-rec[data-w="narrow"] .dc-rec-sidein { position: static; height: auto; flex-direction: row; align-items: center; gap: 12px; padding: 4px 12px; }
.dc-rec[data-w="mid"] .dc-rec-brand { height: 44px; }
.dc-rec[data-w="mid"] .dc-rec-nav, .dc-rec[data-w="narrow"] .dc-rec-nav { display: flex; gap: 4px; min-width: 0; padding: 0; overflow: visible; }
.dc-rec[data-w="mid"] .dc-rec-sec, .dc-rec[data-w="narrow"] .dc-rec-sec,
.dc-rec[data-w="mid"] .dc-rec-item, .dc-rec[data-w="narrow"] .dc-rec-item,
.dc-rec[data-w="mid"] .dc-rec-foot, .dc-rec[data-w="narrow"] .dc-rec-foot,
.dc-rec[data-w="narrow"] .dc-rec-brand { display: none; }
.dc-rec[data-w="mid"] .dc-rec-tab, .dc-rec[data-w="narrow"] .dc-rec-tab { width: auto; height: 40px; margin: 0; }
.dc-rec[data-w="mid"] .dc-rec-tab.dc-on, .dc-rec[data-w="narrow"] .dc-rec-tab.dc-on { box-shadow: inset 0 -3px 0 var(--connect); }
.dc-rec[data-w="mid"] .dc-rec-top, .dc-rec[data-w="narrow"] .dc-rec-top { position: static; }
.dc-rec[data-w="mid"] .dc-rec-dash, .dc-rec[data-w="narrow"] .dc-rec-dash { grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "funnel" "rate" "conv" "acts" "heat" "pulse" "act7" "traffic"; }

.dc-rec[data-w="narrow"] .dc-rec-top { height: 56px; padding: 0 16px; }
.dc-rec[data-w="narrow"] .dc-rec-ws { display: none; }
.dc-rec[data-w="narrow"] .dc-rec-body { padding: 16px; }
.dc-rec[data-w="narrow"] .dc-rec-tab { gap: 8px; padding: 0 10px; }
/* m4: the six figures three across, numbers first, the session's conversation straight under them */
.dc-rec[data-w="narrow"] .dc-rec-fcard { padding: 28px 16px 12px; }
.dc-rec[data-w="narrow"] .dc-rec-funnel { gap: 12px; }
.dc-rec[data-w="narrow"] .dc-rec-lbl { letter-spacing: .3px; }
.dc-rec[data-w="narrow"] .dc-rec-val { font-size: 24px; line-height: 28px; }
.dc-rec[data-w="narrow"] .dc-rec-vrow { min-height: 28px; gap: 4px; }
.dc-rec[data-w="narrow"] .dc-rec-conv { flex-direction: column; gap: 2px; min-height: 36px; }
.dc-rec[data-w="narrow"] .dc-rec-rate { padding: 12px 16px; }
.dc-rec[data-w="narrow"] .dc-rec-rcounts { margin-left: 0; }
.dc-rec[data-w="narrow"] .dc-rec-chead, .dc-rec[data-w="narrow"] .dc-rec-acts, .dc-rec[data-w="narrow"] .dc-rec-qas { padding-left: 16px; padding-right: 16px; }
.dc-rec[data-w="narrow"] .dc-rec-act.dc-rec-own, .dc-rec[data-w="narrow"] .dc-rec-qa.dc-rec-own { margin: 0 -16px; padding: 12px 16px; }
.dc-rec[data-w="narrow"] .dc-rec-qa { flex-direction: column; gap: 4px; }
.dc-rec[data-w="narrow"] .dc-rec-mc { padding: 16px; }
.dc-rec[data-w="narrow"] .dc-rec-icard { padding: 16px; }
.dc-rec[data-w="narrow"] .dc-rec-ta { font-size: 16px; }   /* no zoom on a phone's focus */
@media (pointer: coarse) { .dc-rec-ta { font-size: 16px; } }