/* Revonix: Dark Case Study (case-ui.css) with a touch of Jelly Glass for buttons and cards (Davis, 2026-10-05).
   The jelly touch: the one primary button per screen is a jelly capsule, and the few highlight cards ("needs you
   now", a spec site) are jelly cards: colour lit inside frosted glass (frost-glass.css .fg.color), white text.
   Dense data stays on flat Dark Case cards. Tokens only; no hex values in screens. */

:root {
  /* jelly fields: deep amber, rose and copper, deep enough for white text (checked by check.js) */
  --rx-j1: #8C4416;
  --rx-j2: #94344E;
  --rx-j3: #B4621F;
  --rx-j-veil: .05;
  --rx-col: 300px;                      /* a board column */
  --rx-sheet: min(560px, 100vw);
}

/* ---- jelly capsule: the primary button --------------------------------------------------------- */
.rx-cta {
  --c1: var(--rx-j1); --c2: var(--rx-j2); --c3: var(--rx-j3); --fg-r: 999px; --fg-veil: var(--rx-j-veil);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: max(var(--hit), 40px); padding: 0 var(--s5); border-radius: 999px; border: 0; cursor: pointer;
  font: 500 var(--t-small)/1 var(--f-ui); letter-spacing: -0.005em; color: #fff; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), filter var(--t) var(--ease);
}
.rx-cta:hover { filter: brightness(1.08) saturate(1.05); }
.rx-cta:active { transform: scale(.97); }
.rx-cta:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 2px; }
.rx-cta:disabled, .rx-cta[aria-busy="true"] { filter: grayscale(.6) brightness(.85); cursor: progress; }
.rx-cta svg.i { width: 18px; height: 18px; }
.rx-cta.lg { min-height: 52px; padding: 0 var(--s6); font-size: 1rem; }

/* ---- jelly card: highlight cards only ------------------------------------------------------------- */
.rx-jelly {
  --c1: var(--rx-j1); --c2: var(--rx-j2); --c3: var(--rx-j3); --fg-r: var(--r-card); --fg-veil: var(--rx-j-veil);
  border-radius: var(--r-card); padding: var(--s6); color: #fff;
}
.rx-jelly .dc-cap, .rx-jelly .dc-csub, .rx-jelly .label, .rx-jelly .dc-meta { color: rgba(255,255,255,.86); }
.rx-jelly .dc-body { color: rgba(255,255,255,.92); }
.rx-jelly .dc-num, .rx-jelly .dc-ctitle, .rx-jelly .dc-stmt, .rx-jelly .dc-stmt .hl { color: #fff; }
.rx-jelly .dc-num .lo, .rx-jelly .dc-num .unit { color: rgba(255,255,255,.78); }
.rx-jelly .dc-btn.ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.rx-jelly .dc-btn.ghost:hover { background: rgba(255,255,255,.12); }
.rx-jelly a { color: #fff; }
.rx-jelly .fg-dots { inset: 8px; }

/* ---- page frame ----------------------------------------------------------------------------------- */
.rx-view { display: grid; gap: var(--s6); padding-bottom: calc(var(--s16, 64px) + 40px); min-width: 0; }
@media (min-width: 1024px) { .rx-view { padding-bottom: var(--s10, 40px); } }
.rx-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4) var(--s6); }
.rx-head .dc-stmt { margin: 0; }
.rx-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.rx-loading { min-height: 40vh; display: grid; place-items: center; color: var(--ink-3); font: 400 var(--t-meta)/1 var(--f-mono); }
.rx-err { padding: var(--s6); }
.rx-muted { color: var(--ink-3); }
.rx-mono { font-family: var(--f-mono); }
.rx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (min-width: 1024px) { .rx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); } }
.rx-kpis .dc-card, .rx-kpis .rx-jelly { display: grid; gap: var(--s4); align-content: space-between; min-height: 140px; }
.rx-kpis .dc-num { font-size: clamp(1.9rem, 1.6rem + 1vw, 2.6rem); }
.rx-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }

/* sidebar extras: workspace switcher and counts */
.rx-ws { display: flex; flex-direction: column; align-items: flex-start; height: auto; flex: none; gap: 2px; padding: var(--s3); border-radius: var(--r-tile); background: var(--card); color: var(--ink); text-align: left; width: 100%;
  border: 0; cursor: pointer; font: inherit; min-height: var(--hit); }
.rx-ws .k { font: 400 var(--t-axis)/1.2 var(--f-mono); color: var(--ink-3); }
.rx-ws .rx-ws-name { font: 400 var(--t-small)/1.2 var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-ws:hover { background: var(--card-2); }
.rx-ws:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 2px; }
.rx-dot { display: inline-block; width: 6px; height: 6px; background: var(--acc); margin-left: auto; }

/* ---- board (kanban) -------------------------------------------------------------------------------- */
.rx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, var(--rx-col)); gap: var(--s4);
  overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--s4); scroll-snap-type: x proximity; min-width: 0; }
.rx-col { display: grid; grid-template-rows: auto 1fr; gap: var(--s3); min-width: 0; scroll-snap-align: start; }
.rx-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); padding: 0 var(--s1); }
.rx-col-head .t { font: 400 var(--t-small)/1.2 var(--f-ui); color: var(--ink); }
.rx-col-head .m { font: 400 var(--t-meta)/1 var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.rx-col-head .sq { width: 6px; height: 6px; background: var(--ink-3); display: inline-block; margin-right: 8px; vertical-align: middle; }
.rx-col[data-outcome="won"] .rx-col-head .sq { background: var(--ok); border-radius: 50%; }
.rx-col[data-outcome="lost"] .rx-col-head .sq { background: var(--ink-3); transform: rotate(45deg); }
.rx-drop { display: grid; align-content: start; gap: var(--s2); min-height: 160px; padding: var(--s2); border-radius: var(--r-card); background: color-mix(in srgb, var(--card) 55%, transparent); }
.rx-drop.over { outline: 1.5px dashed var(--ink-3); outline-offset: -4px; }
.rx-lead { display: grid; gap: 6px; padding: var(--s3) var(--s4); border-radius: var(--r-tile); background: var(--card); color: var(--ink); cursor: grab;
  border: 0; text-align: left; font: inherit; width: 100%; min-height: var(--hit); transition: background var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.rx-lead:hover { background: var(--card-2); }
.rx-lead:active { transform: scale(.985); }
.rx-lead:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 2px; }
.rx-lead.dragging { opacity: .45; }
.rx-lead .nm { font: 400 var(--t-small)/1.25 var(--f-ui); color: var(--ink); overflow-wrap: anywhere; }
.rx-lead .co { font: 400 var(--t-cap)/1.3 var(--f-ui); color: var(--ink-3); overflow-wrap: anywhere; }
.rx-lead .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font: 400 var(--t-axis)/1.2 var(--f-mono); color: var(--ink-3); }
.rx-lead .meta .due { color: var(--acc-text, var(--acc)); }
.rx-lead .meta .val { color: var(--ink-2); }

/* ---- lists ------------------------------------------------------------------------------------------ */
.rx-list { display: grid; }
.rx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s4); align-items: center; padding: var(--s3) 0;
  border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none; min-height: var(--hit); }
.rx-row:first-child { border-top: 0; }
a.rx-row:hover .t, button.rx-row:hover .t { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--hair-2); }
button.rx-row { background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; text-align: left; width: 100%; cursor: pointer; }
.rx-row .t { font: 400 var(--t-small)/1.3 var(--f-ui); overflow-wrap: anywhere; }
.rx-row .s { display: block; font: 400 var(--t-cap)/1.35 var(--f-ui); color: var(--ink-3); overflow-wrap: anywhere; }
.rx-row .r { font: 400 var(--t-meta)/1.2 var(--f-mono); color: var(--ink-2); text-align: right; white-space: nowrap; }
.rx-row .r.due { color: var(--acc-text, var(--acc)); }

/* timeline */
.rx-tl { display: grid; gap: 0; }
.rx-tl .ev { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px dashed var(--hair); }
.rx-tl .ev:first-child { border-top: 0; }
.rx-tl .ev .sq { width: 6px; height: 6px; margin-top: 7px; background: var(--ink-3); }
.rx-tl .ev.note .sq { background: var(--ink); }
.rx-tl .ev.moved .sq, .rx-tl .ev.outcome .sq { background: var(--acc); }
.rx-tl .ev .w { font: 400 var(--t-small)/1.4 var(--f-ui); color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.rx-tl .ev .when { font: 400 var(--t-axis)/1.4 var(--f-mono); color: var(--ink-3); }

/* ---- sheets and dialogs ------------------------------------------------------------------------------ */
dialog.rx-sheet, dialog.rx-dialog { border: 0; padding: 0; color: var(--ink); background: var(--ground); max-height: 100dvh; }
dialog.rx-sheet::backdrop, dialog.rx-dialog::backdrop { background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.rx-sheet { margin: 0 0 0 auto; height: 100dvh; width: var(--rx-sheet); max-width: 100vw; border-radius: 0; }
dialog.rx-sheet[open] { animation: rx-in-right var(--t) var(--ease); }
@media (max-width: 639px) {
  /* rests on the bottom edge and is as tall as what's in it (a modal dialog is pinned top and bottom by default,
     which stretched a three-field form to the full screen) */
  dialog.rx-sheet { margin: auto 0 0; inset-block-start: auto; height: auto; max-height: 94dvh; width: 100vw; border-radius: 18px 18px 0 0; }
  dialog.rx-sheet[open] { animation: rx-in-up var(--t) var(--ease); }
}
dialog.rx-dialog { width: min(520px, calc(100vw - 32px)); border-radius: 18px; margin: auto; }
dialog.rx-dialog[open] { animation: dc-pop var(--t) var(--ease); }
.rx-sheet-in, .rx-dialog-in { display: grid; gap: var(--s5); padding: var(--s6); overflow: auto; max-height: 100dvh; }
@media (max-width: 639px) { .rx-sheet-in { max-height: 94dvh; padding: var(--s5) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom)); } }
.rx-sheet-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.rx-form { display: grid; gap: var(--s4); }
.rx-form .two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 560px) { .rx-form .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rx-form textarea.dc-input { min-height: 96px; padding: var(--s3) var(--s4); line-height: 1.45; resize: vertical; }
.rx-form .msg.err { color: var(--bad); font: 400 var(--t-cap)/1.4 var(--f-ui); }
@keyframes rx-in-right { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rx-in-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* contact actions on a lead: real links (tel:, mailto:, sms:) */
.rx-reach { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* auth pages */
.rx-auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--s6) var(--s4); }
.rx-auth .box { width: min(440px, 100%); display: grid; gap: var(--s6); }
.rx-auth .rx-jelly { padding: var(--s8, 32px) var(--s6); }

@media (prefers-reduced-motion: reduce) {
  dialog.rx-sheet[open], dialog.rx-dialog[open] { animation: none; }
  .rx-lead, .rx-cta { transition: none; }
}
@media (prefers-reduced-transparency: reduce) { .rx-cta, .rx-jelly { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* layout helpers the template kept inline */
.dc-topbar .grow { flex: 1; min-width: 0; }
@media (min-width: 1024px) { .phone-only { display: none !important; } }
@media (max-width: 1023px) { .desk-only { display: none !important; } }
.fg-pill.on { background: #F4F5F6; color: #111315; }
@media (prefers-color-scheme: light) { .fg-pill.on { background: #0D0D0D; color: #fff; } }

/* Jelly in both appearances: a deep base under the colour fields (so the light page never shows through
   at the edges) and a faint veil and edge haze, so white text keeps 4.5:1 (check.js, 2026-10-05). */
.rx-cta.fg.color, .rx-jelly.fg.color {
  --fg-tint: color-mix(in srgb, var(--rx-j1) 88%, #000);
  --fg-veil: .03;
  --fg-haze: rgba(255,255,255,.07);
  --fg-sat: 110%;
}
/* small links inside lists still get a desktop-sized target */
.rx-tl .dc-btn.text, .rx-row .dc-btn.text { min-height: var(--hit); }
:where(.rx-board, .dc-table-wrap, .rx-view):focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 2px; }

/* Prospect Finder: the progress line inside the live search card, row checkboxes, and compact facts. */
.rx-meter { height: 6px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; }
.rx-meter > span { display: block; height: 100%; border-radius: inherit; background: #fff; transition: width .6s var(--ease); }
.rx-check { width: 22px; height: 22px; margin: 11px; accent-color: var(--ink); cursor: pointer; }
.rx-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s5); margin: 0; }
.rx-facts dt { font: 400 var(--t-cap)/1.5 var(--f-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.rx-facts dd { margin: 0; font-size: var(--t-small); color: var(--ink); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .rx-meter > span { transition: none; } }

/* Prospect results: a row per business. Wide screens line the parts up in columns; phones stack them. */
.rx-plist ul { list-style: none; margin: 0; padding: 0; }
.rx-prow { display: grid; align-items: center; gap: var(--s2) var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--hair);
  grid-template-columns: minmax(0, 1.3fr) 150px minmax(0, 1.5fr) 48px var(--act, 168px); grid-template-areas: "who tel why score act"; }
.rx-plist.sel .rx-prow { grid-template-columns: 44px minmax(0, 1.3fr) 150px minmax(0, 1.5fr) 48px var(--act, 168px); grid-template-areas: "sel who tel why score act"; }
.rx-prow.head .score { font-family: var(--f-ui); font-size: var(--t-cap); }
.rx-prow.head { border-top: 0; padding: 0 0 var(--s2); font: 400 var(--t-cap)/1.2 var(--f-ui); color: var(--ink-3);
  background: linear-gradient(90deg, var(--hair-2) 0 40%, transparent 40%) 0 100% / 8px 1px repeat-x; }
.rx-prow .sel { grid-area: sel; display: flex; }
.rx-prow .who { grid-area: who; min-width: 0; }
.rx-prow .who .name { padding: 0; min-height: var(--hit); text-align: left; font-size: var(--t-small); color: var(--ink); justify-content: flex-start; }
.rx-prow .sub { display: block; font: 400 var(--t-cap)/1.4 var(--f-ui); color: var(--ink-3); overflow-wrap: anywhere; }
.rx-prow .tel { grid-area: tel; white-space: nowrap; font: 400 var(--t-small)/1.2 var(--f-mono); }
.rx-prow .tel a { color: var(--ink); text-decoration-color: var(--hair-2); text-underline-offset: .2em; display: inline-flex; align-items: center; min-height: var(--hit); }
.rx-prow .why { grid-area: why; margin: 0; font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); min-width: 0; }
.rx-prow .score { grid-area: score; text-align: right; font: 400 var(--t-small)/1 var(--f-mono); color: var(--ink-2); }
.rx-prow .act { grid-area: act; justify-self: end; }
@media (max-width: 760px) {
  .rx-prow.head { display: none; }
  .rx-prow, .rx-plist.sel .rx-prow { padding: var(--s4) 0; gap: var(--s1) var(--s3);
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who score" "tel tel" "why why" "act act"; }
  .rx-plist.sel .rx-prow { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "sel who score" ". tel tel" ". why why" ". act act"; }
  .rx-prow .sel { align-self: start; }
  .rx-prow .act { justify-self: start; margin-top: var(--s2); }
}
.rx-hint { margin: 0; font-size: var(--t-cap); line-height: 1.5; color: var(--ink-2); }
/* While a search runs, its card leads on phones and tablets (one column), above the search form. */
@media (max-width: 1023px) { .rx-live-on { order: -1; } }
a.fg-pill { text-decoration: none; }
.rx-prow .why a { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--ink); text-underline-offset: .2em; text-decoration-color: var(--hair-2); }
/* Anything marked hidden stays hidden, whatever layout class it carries (forms and lists set display). */
[hidden] { display: none !important; }
.rx-hint a, .rx-facts a { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--ink); text-underline-offset: .2em; }

/* ---- Motion -------------------------------------------------------------------------------------------
   Quick, quiet, and only on arrival: a screen rises into place, its lists settle in one after another, the
   selected tab's line grows in, buttons give under a press, sheets slide in and out. Re-renders while you work
   (typing in a search, a filter) don't animate. Everything stops for "reduce motion" (the .dc rule in
   case-ui.css plus the block at the end). Only opacity and transform move, so nothing reflows. */
@keyframes rx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rx-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rx-out-right { to { transform: translateX(24px); opacity: 0; } }
@keyframes rx-out-down { to { transform: translateY(24px); opacity: 0; } }
@keyframes rx-pop-out { to { transform: scale(.97); opacity: 0; } }
@keyframes rx-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes rx-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.rx-fresh > * { animation: rx-rise 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.rx-fresh .rx-plist ul > li, .rx-fresh .rx-list > *, .rx-fresh .rx-kpis > *, .rx-fresh .rx-col .rx-lead, .rx-fresh .dc-table tbody tr {
  animation: rx-rise 380ms var(--ease) both; animation-delay: calc(140ms + var(--j, 0) * 32ms); }
.dc-tabs [role="tab"][aria-selected="true"]::after { transform-origin: left center; animation: rx-grow-x 260ms var(--ease) both; }
.dc-btn:active, .fg-pill:active, .dc-ibtn:active { transform: scale(.97); }
a.dc-card:hover, button.dc-card:hover { transform: translateY(-2px); }
dialog.rx-sheet.rx-closing { animation: rx-out-right 160ms var(--ease-io) both; }
dialog.rx-dialog.rx-closing { animation: rx-pop-out 140ms var(--ease-io) both; }
dialog.rx-sheet[open]::backdrop, dialog.rx-dialog[open]::backdrop { animation: rx-fade 220ms var(--ease) both; }
@media (max-width: 767px) { dialog.rx-sheet.rx-closing { animation-name: rx-out-down; } }
.rx-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: middle; animation: rx-pulse 1.6s ease-in-out infinite; }
.rx-loading { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ink) 6%, transparent) 50%, transparent 100%) 0 0 / 200% 100%; animation: rx-shimmer 1.4s linear infinite; border-radius: 12px; }
.rx-lead.dragging, .rx-lead[aria-grabbed="true"] { transform: rotate(-1.2deg) scale(1.02); box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) {
  .rx-fresh > *, .rx-fresh .rx-plist ul > li, .rx-fresh .rx-list > *, .rx-fresh .rx-kpis > *, .rx-fresh .rx-col .rx-lead, .rx-fresh .dc-table tbody tr,
  .dc-tabs [role="tab"]::after, dialog.rx-closing, dialog::backdrop, .rx-live-dot, .rx-loading { animation: none !important; }
  .dc-btn:active, .fg-pill:active, .dc-ibtn:active, a.dc-card:hover, button.dc-card:hover, .rx-lead.dragging { transform: none; }
}

/* Team: two weeks of sign-ins as small bars (taller = more sign-ins that day). */
.rx-spark { display: inline-flex; gap: 3px; align-items: flex-end; height: 22px; }
.rx-spark i { width: 6px; height: calc(4px + var(--h, 0) * 4.5px); border-radius: 2px; background: color-mix(in srgb, var(--ink) calc(16% + var(--h, 0) * 21%), transparent); }

/* Calendar: five weeks as a grid of days, each with dots for what's on. */
.rx-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.rx-dow { font: 400 var(--t-cap)/1 var(--f-mono); color: var(--ink-2); text-align: center; padding: 4px 0 8px; }
.rx-day { min-height: 64px; border: 0; border-radius: 12px; background: var(--card-2); color: var(--ink); display: grid; align-content: space-between; justify-items: start; padding: 8px 10px; cursor: pointer; font: inherit; text-align: left;
  transition: background-color var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.rx-day:hover { background: var(--card-3); }
.rx-day .d { font: 400 var(--t-small)/1 var(--f-mono); }
.rx-day.past { color: var(--ink-2); }
.rx-day.today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.rx-day .dots { display: flex; gap: 4px; }
.rx-day .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.rx-day .dots i.callback { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.rx-agenda + .rx-agenda { margin-top: var(--s5); }
@media (max-width: 640px) { .rx-day { min-height: 48px; padding: 6px; border-radius: 10px; } .rx-month { gap: 4px; } }

/* Question and answer, stacked (check-ins): long questions never squeeze the answer. */
.rx-qa { display: grid; gap: var(--s1); margin: var(--s2) 0 0; }
.rx-qa dt { font: 400 var(--t-cap)/1.4 var(--f-ui); color: var(--ink-2); }
.rx-qa dd { margin: 0 0 var(--s2); font-size: var(--t-small); line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Facts: the label column never takes more than 40%, so a long label can't crush its value. */
.rx-facts { grid-template-columns: fit-content(40%) minmax(0, 1fr); }
.rx-facts dt { overflow-wrap: anywhere; }
@media (max-width: 640px) { .rx-month-card { padding: 10px; } .rx-month { gap: 2px; } }

/* Revenue: a simple bar per month. */
.rx-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; height: 180px; }
.rx-bars .bar { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; }
.rx-bars .bar span { align-self: end; height: calc(var(--v) * 100%); min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--ink); opacity: .85; transform-origin: bottom; animation: rx-grow-y 600ms var(--ease) both; }
.rx-bars .bar em { font: 400 var(--t-cap)/1 var(--f-mono); font-style: normal; color: var(--ink-2); text-align: center; }
@keyframes rx-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .rx-bars .bar span { animation: none; } }
.rx-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.rx-plan { display: flex; flex-direction: column; } .rx-plan button { margin-top: auto; }
.rx-plan.rx-jelly { padding: var(--s5); border-radius: 22px; }
.rx-jelly .rx-hint { color: rgba(255, 255, 255, .9); }

/* The assistant: a conversation with bubbles, an approval card, and the ask box at the bottom. */
.rx-convo { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s4); min-height: min(70vh, 720px); }
.rx-thread { display: grid; align-content: start; gap: var(--s3); overflow-y: auto; max-height: 62vh; padding-right: 4px; }
.rx-msg { display: flex; } .rx-msg.you { justify-content: flex-end; } .rx-msg.act { justify-content: center; }
.rx-msg .bubble { max-width: min(640px, 88%); padding: var(--s3) var(--s4); border-radius: 18px; background: var(--card-2); font-size: var(--t-small); line-height: 1.55; color: var(--ink); }
.rx-msg.you .bubble { background: var(--ink); color: var(--ground); border-bottom-right-radius: 6px; }
.rx-msg.bot .bubble { border-bottom-left-radius: 6px; }
.rx-msg .bubble p { margin: 0 0 .5em; } .rx-msg .bubble p:last-child { margin: 0; }
.rx-msg .bubble ul { margin: .3em 0 .5em; padding-left: 1.2em; } .rx-msg .bubble li { margin: .15em 0; }
/* The card sits on a plain panel with nothing behind it to blur, so the smoke is deepened until white reads on it. */
.rx-confirm { max-width: min(560px, 92%); padding: var(--s4); border-radius: 18px; color: #fff; }
.rx-confirm.fg.smoke { --fg-tint: rgba(20, 21, 23, .9); }
.rx-confirm .dc-cap { color: rgba(255, 255, 255, .85); } .rx-confirm ul { margin: 0 0 var(--s3); padding-left: 1.2em; font-size: var(--t-small); line-height: 1.5; }
.rx-confirm .dc-btn.quiet { color: #fff; background: rgba(255, 255, 255, .14); }
.rx-confirm .dc-btn.quiet:hover { background: rgba(255, 255, 255, .22); }
.rx-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: end; }
.rx-ask textarea { resize: none; min-height: 52px; }
.rx-chats .rx-row[aria-current="page"] .t { font-weight: 500; }
.rx-chats .rx-row[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ink); padding-left: var(--s3); }
/* Desktop: the thread scrolls inside the card, so its top edge fades instead of cutting a line in half. */
.rx-thread { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px); mask-image: linear-gradient(to bottom, transparent 0, #000 20px); padding-top: 12px; }
/* Phones and tablets: the page scrolls the chat, and the ask box rides just above the floating tab bar (64px tall, 12px up). */
@media (max-width: 1023px) {
  .rx-convo { min-height: 0; }
  .rx-thread { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-top: 0; }
  .rx-msg { scroll-margin-bottom: 190px; }
  .rx-ask { position: sticky; z-index: 2; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px); margin: 0 calc(-1 * var(--s3)); padding: var(--s3); border-radius: 20px; background: var(--card); box-shadow: 0 -10px 24px -14px rgba(0, 0, 0, .35); }
}
.rx-msg { animation: rx-rise 260ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .rx-msg { animation: none; } }
/* Sign out sits quietly under the person in the sidebar. */
.rx-signout { justify-self: start; padding-inline: var(--s3); }
/* The phone tab bar floats over the page: thick enough smoke that what scrolls under it never competes with its labels. */
.dc .dc-tabbar.fg.smoke { --fg-tint: rgba(18, 19, 21, .86); }
@media (prefers-color-scheme: light) { .dc .dc-tabbar.fg.smoke { --fg-tint: rgba(250, 250, 250, .9); } }
/* A phone on its side: keep the page clear of the notch at either edge. */
.dc-main { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
/* Small pills (callback quick picks, filters) are mouse-sized on a computer; a thumb gets the full 44px. */
@media (max-width: 1023px), (pointer: coarse) { .dc .fg-pill.sm { min-height: 44px; } }
/* A stacked table with many columns (Past searches) reads as a record on a phone: the title across the top, the
   short facts in two even columns, the long one across the bottom. */
@media (max-width: 639px) {
  .dc-table.stack.stack-rec tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dc-table.stack.stack-rec td:first-child, .dc-table.stack.stack-rec td.wide { grid-column: 1 / -1; }
}
/* "Show every step" on a found business: the checks in order, in plain words. */
.rx-steps { margin: var(--s2) 0 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
/* On a phone the column titles are hidden, so each number carries its own ("Seen 2", "Leads 3", "Score 77"). */
@media (max-width: 760px) { .rx-prow .score[data-label]::before { content: attr(data-label) " "; font: 400 var(--t-cap)/1 var(--f-ui); color: var(--ink-3); } }
/* the lead owner on a pipeline card: a small person mark, so "$1,500 Dana" reads as a value and a person */
.rx-lead .meta .who { display: inline-flex; align-items: center; gap: 3px; } .rx-lead .meta .who svg.i { width: 12px; height: 12px; }
/* tab rows on a phone: one line that slides sideways, never a lone tab wrapped onto a second line */
@media (max-width: 760px) {
  .dc-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  /* faded at the right only while there is more to slide to (set by revealChosen) */
  .dc-tabs.rx-more, .mx-chips.rx-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .mx-chips.rx-more::after { content: ""; flex: 0 0 28px; }
  .dc-tabs::-webkit-scrollbar { display: none; }
  .dc-tabs [role="tab"] { flex: none; white-space: nowrap; }
  .dc-tabs [role="tab"]:last-child { margin-right: 28px; }
}
/* the one button on a screen that cannot be undone reads differently from its gentle neighbour ("Take it offline") */
.dc-btn.text.rx-danger, .dc-btn.text.rx-danger:hover { color: var(--bad); }
/* names shown as text buttons or links in lists: a long real name ("Brito Marketing | Advertising Agency | Agencia de
   Publicidad") wraps instead of pushing the page sideways, and a short one ("JW") still gets a full-size tap area */
.dc-btn.text { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: left; justify-content: flex-start; line-height: 1.3; min-width: var(--hit); }
.who > a.name { min-width: var(--hit); overflow-wrap: anywhere; }

/* ---- Dark glass (Davis, 2026-10-09: "the dark case study with some see-through glass, and colour slowly moving in
   the background"). Two slow fields of the palette's own light drift behind everything; cards turn to smoky glass that
   the light glows through. The field is soft enough that the cards need no live blur (no backdrop-filter), so the
   motion costs one composited layer, not a re-blur per card per frame. Only transform moves (never blur). */
:root {
  --amb-a: color-mix(in srgb, var(--rx-j3) 30%, transparent);           /* amber: the jelly cards' own three colours, */
  --amb-b: color-mix(in srgb, var(--rx-j2) 32%, transparent);           /* rose,   so the light behind and the jelly */
  --amb-c: color-mix(in srgb, var(--rx-j1) 34%, transparent);           /* ember   in front read as one family */
  --amb-d: color-mix(in srgb, var(--p-dark) 70%, transparent);          /* the palette's dark, for depth */
  --glass-card: color-mix(in srgb, var(--card) 60%, transparent);
  --glass-card-2: color-mix(in srgb, var(--card-2) 64%, transparent);
  --glass-veil: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.012) 46%, rgba(255,255,255,.022) 100%);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 22px 2px rgba(255,255,255,.028);
  /* greys one step brighter: they now sit on moving light, not flat black. Sized for the brightest the light can get
     (one glow at its centre plus another's edge): statement grey 3.0:1 there, small grey 5.2:1, on bare ground. */
  --grey: #7A7A7A;
  --ink-3: #A3A3A3;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --amb-a: color-mix(in srgb, var(--rx-j3) 16%, transparent);
    --amb-b: color-mix(in srgb, var(--rx-j2) 12%, transparent);
    --grey: #707070;      /* a step deeper: the tint darkens the light ground (3.3:1 at the darkest moment) */
    --ink-3: #565656;     /* 4.9:1 at the darkest moment */
    --amb-c: color-mix(in srgb, var(--p-light-2) 90%, transparent);
    --amb-d: color-mix(in srgb, var(--p-light) 80%, transparent);
    --glass-card: color-mix(in srgb, #fff 64%, transparent);
    --glass-card-2: color-mix(in srgb, var(--card-2) 70%, transparent);
    --glass-veil: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.28) 100%);
    --glass-edge: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 20px 2px rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.03);
  }
}
body.dc::before, body.dc::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; inset: -30vmax;
  will-change: transform; transform-origin: 50% 50%;
}
body.dc::before {
  background:
    radial-gradient(36vmax 28vmax at 26% 24%, var(--amb-a), transparent 72%),
    radial-gradient(30vmax 26vmax at 74% 36%, var(--amb-b), transparent 70%);
  animation: rx-drift-a 46s ease-in-out infinite alternate;
}
body.dc::after {
  background:
    radial-gradient(42vmax 32vmax at 62% 74%, var(--amb-c), transparent 72%),
    radial-gradient(34vmax 30vmax at 22% 70%, var(--amb-d), transparent 70%);
  animation: rx-drift-b 63s ease-in-out infinite alternate;
}
@keyframes rx-drift-a { from { transform: translate3d(-5%, -4%, 0) rotate(-4deg) scale(1); } to { transform: translate3d(6%, 5%, 0) rotate(10deg) scale(1.14); } }
@keyframes rx-drift-b { from { transform: translate3d(5%, 3%, 0) rotate(6deg) scale(1.1); } to { transform: translate3d(-6%, -5%, 0) rotate(-8deg) scale(.96); } }

/* cards: smoky glass the light glows through (no outline: a hairline of light on top, haze inside the edge) */
.dc-card { background: var(--glass-veil), var(--glass-card); box-shadow: var(--glass-edge); }
.dc-card.inset { background: var(--glass-veil), var(--glass-card-2); }
.dc-card.bare { background: none; box-shadow: none; }
a.dc-card:hover, button.dc-card:hover { background: var(--glass-veil), var(--glass-card-2); }
.dc-card svg.chart { --halo: color-mix(in srgb, var(--card) 88%, transparent); }

/* still is still: no drift for reduced motion; solid cards when transparency is reduced or contrast raised */
@media (prefers-reduced-motion: reduce) { body.dc::before, body.dc::after { animation: none; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body.dc::before, body.dc::after { display: none; }
  .dc-card { background: var(--card); } .dc-card.inset { background: var(--card-2); }
}
@media (prefers-contrast: more) { .dc-card { box-shadow: inset 0 0 0 1px var(--ink-3); } }
@media print { body.dc::before, body.dc::after { display: none; } }