/* Data workspaces (Revenue Radar, Matches, Sequences, Appointments, Inventory, Leads, Activity, Settings) — v3, layered on
   /styles.css. Same anatomy as the Overview (app.png): page header, stat cards, cards with a section label, title and
   subtitle, quiet tables with mono headers and hairline rows, honest empty states. Tables fold into stacked rows on narrow
   cards (container queries on .ws-card), so nothing scrolls sideways and row menus are never clipped. */

/* ── Page header: eyebrow caps at y=69, H1 caps at y=88, subtitle at y=125, first card at y=156 (1536 × 1024), exactly where
   the Overview's sit, so switching tabs never shifts the page ── */
.ws-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 24px; }
.ws-head-text { min-width: 0; }
.ws-eyebrow { margin-top: 3px; }
.ws-title { margin-top: 1px; overflow-wrap: anywhere; }
.ws-sub { margin-top: 2px; text-wrap: pretty; }
/* Same header type as the Overview (app.png): eyebrow, 32.5px title, 14.5px subtitle. */
.ws-head .ws-eyebrow { color: var(--text-3); letter-spacing: .085em; }
.ws-head .page-title { color: #fbfcfb; font-size: 32.5px; line-height: 37px; letter-spacing: 0; }
.ws-head .page-sub { color: #dadddc; font-size: 14.5px; line-height: 21px; }
.ws-head-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 7px; }
/* While a tab shows its main empty state, that state's own buttons are the actions. */
.ws-is-empty .ws-head-actions { display: none; }

/* ── Body: stat cards, then cards ── */
.ws-body, .ws-settings { margin-top: 15px; }
.ws-body { container: wsbody / inline-size; display: grid; gap: 16px; min-width: 0; }
.ws-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ws-stat { min-width: 0; padding: 15px 13px 14px 16px; }
/* Stat cards use the Overview KPI card's type (app.png): 11.75px label and unit, 26px regular figure. */
.ws-stat .kpi-label, .ws-stat .kpi-unit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-stat .kpi-label { color: #c6c9c8; font-size: 11.75px; line-height: 16px; }
.ws-stat .kpi-value { overflow: hidden; margin-top: 12px; color: #fbfcfb; font-size: 26px; font-weight: 400; line-height: 26px; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.ws-stat .kpi-unit { margin-top: 8px; color: #e2e4e3; font-size: 11.75px; line-height: 14px; }

/* Cards hold their own container so tables can fold by the card's width, not the window's. */
.ws-card { container: ws / inline-size; min-width: 0; }
.ws-card-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.ws-card-heading { min-width: 0; max-width: 100%; }
/* The section label is its own 14px row (no inline strut), so the title lands where app.png's card titles do. */
.ws-card-heading > .section-label, .ws-set-card .card-head > .section-label { display: flex; width: max-content; max-width: 100%; }
.ws-card-heading .card-sub { margin-top: 3px; overflow-wrap: anywhere; }
.ws-card-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; max-width: 100%; margin-bottom: -3px; }

/* Filter chips with counts (aria-pressed marks the active one). */
.ws-chips { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.ws-chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-2); background: transparent; color: var(--text-3); font-size: var(--fs-sm); white-space: nowrap; transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.ws-chip:hover { background: rgb(255 255 255 / .03); color: var(--text); }
.ws-chip[aria-pressed="true"] { border-color: var(--line-strong); background: var(--raised); color: var(--text); }
.ws-chip-n { color: var(--text-4); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ws-chip[aria-pressed="true"] .ws-chip-n { color: var(--text-3); }
/* Unit filter set from Revenue Radar ("View matches for this unit"). */
.ws-unit-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-2); color: var(--text); font-size: var(--fs-sm); }
.ws-unit-chip > .icon { width: 14px; height: 14px; color: var(--text-3); }
.ws-unit-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-unit-chip button { display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--r-1); background: transparent; color: var(--text-3); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.ws-unit-chip button:hover { background: rgb(255 255 255 / .06); color: var(--text); }
.ws-unit-chip button .icon { width: 13px; height: 13px; }

/* ── Empty, unavailable and filtered-empty states ── */
.ws-card .ws-empty { padding: 42px 16px 2px; }
/* app.png's empty state: 21px title-to-text baseline step, 17px from the last line to the button. */
.ws-card .ws-empty .empty-text { max-width: 380px; margin-top: 2px; text-wrap: balance; }
.ws-card .ws-empty .empty-action { margin-top: 12px; }
/* A tab's main empty state fills a full-width card: app.png's large-card variant (the Overview's Revenue Radar card). */
.ws-card .ws-empty-main .empty-icon { width: 40px; height: 40px; margin-bottom: 0; color: #7c807f; stroke-width: 1.05; }
.ws-card .ws-empty-main .empty-title { margin-top: 10px; font-size: 16.1px; line-height: 20px; }
.ws-card .ws-empty-main .empty-text { margin-top: 3px; color: #b3b7b6; font-size: 13.3px; line-height: 18px; }
.ws-card .ws-empty-main .empty-action { margin-top: 17px; }
.ws-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* app.png's empty-state button: 172 × 33 for "Import inventory →" (28px sides, 12px to the arrow). */
.ws-empty .btn { --h: 33px; gap: 11px; padding: 0 27px; }
/* Revenue Radar's map line-art (decorative), beside the empty state on wide cards. */
.ws-has-art { overflow: hidden; }
.ws-art { position: absolute; right: 0; bottom: 0; width: 342px; height: 278px; pointer-events: none; fill: none; stroke-linecap: round; -webkit-mask-image: radial-gradient(ellipse 64% 72% at 58% 54%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 64% 72% at 58% 54%, #000 45%, transparent 100%); }
.ws-art-grid { stroke: rgb(255 255 255 / .035); stroke-width: 1; }
.ws-art-block { stroke: rgb(255 255 255 / .085); stroke-width: 1; }
.ws-art-river { stroke: rgb(255 255 255 / .11); stroke-width: 1; }
.ws-art-road { stroke: rgb(255 255 255 / .07); stroke-width: 1; }
.ws-art-lot { fill: rgb(255 255 255 / .07); stroke: rgb(255 255 255 / .12); stroke-width: 1; }
.ws-art-target { stroke: rgb(255 255 255 / .72); stroke-width: 1.25; }
.ws-art-core { fill: rgb(255 255 255 / .05); }
.ws-art-dot { fill: rgb(255 255 255 / .92); }
@container ws (min-width: 900px) {
  .ws-has-art .ws-empty { position: relative; z-index: 1; padding-right: 220px; }
}
@container ws (max-width: 899px) {
  .ws-art { display: none; }
}
.ws-state .ws-empty { padding: 46px 16px 26px; }
.ws-state-inline .ws-empty, .ws-state-inline .empty-state { padding: 36px 16px 20px; }
.ws-none td { padding: 0 !important; }
.ws-none-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 16px 30px; color: var(--text-3); font-size: var(--fs-base); text-align: center; }

/* ── Tables: full-bleed inside the card, mono headers, hairline rows ── */
.ws-table-wrap { margin: 18px -20px 0; }
.ws-table { table-layout: fixed; }
.ws-table th { padding: 11px 12px 10px; border-top: 1px solid var(--line-faint); }
.ws-table td { height: 54px; padding: 9px 12px; color: var(--text-2); line-height: 1.35; }
.ws-table th:first-child, .ws-table td:first-child { padding-left: 20px; }
.ws-table th:last-child, .ws-table td:last-child { padding-right: 20px; }
.ws-table td > * { max-width: 100%; }
.ws-table .num { font-variant-numeric: tabular-nums; }
.ws-table .c-act { text-align: right; }
.ws-table tbody tr:last-child td { border-bottom: 0; }
.ws-quiet { color: var(--text-4); }
.ws-money { color: var(--text); }
.ws-ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.ws-fold, .ws-table .ws-fold-block, .ws-table :is(.ws-fold-pri, .ws-fold-due, .ws-fold-rep) { display: none; }

/* Pager ("Show more"): a footer row under the table. */
.ws-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 -20px -20px; padding: 11px 20px 12px; border-top: 1px solid var(--line-faint); }
.ws-pager-text { color: var(--text-4); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.ws-pager .btn .icon { width: 13px; height: 13px; }

/* Cells */
.ws-unit { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ws-thumb { width: 40px; height: 30px; }
.ws-thumb.thumb-fallback .icon { width: 16px; height: 16px; stroke-width: 1.5; }
.ws-unit-text, .ws-person { min-width: 0; }
.ws-unit-text strong, .ws-person strong, .ws-two strong { display: block; overflow: hidden; color: var(--text); font-size: var(--fs-base); font-weight: 400; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ws-unit-text small, .ws-person small, .ws-two small { display: block; margin-top: 2px; overflow: hidden; color: var(--text-4); font-size: var(--fs-xs); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ws-owner { display: block; overflow: hidden; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.ws-badge { max-width: 100%; }
.ws-score { display: inline-flex; align-items: baseline; flex: none; min-width: 34px; color: var(--text-2); font-family: var(--mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ws-score i { color: var(--text-4); font-style: normal; font-size: var(--fs-label); }
.ws-score.is-hot { color: var(--text); }
.ws-score.is-low { color: var(--text-4); }
.ws-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ws-best-more { display: block; margin-top: 3px; color: var(--text-4); font-size: var(--fs-xs); }
/* Latest recorded reply under the buyer's name (Matches). */
.ws-person .ws-reply { display: flex; align-items: baseline; gap: 6px; min-width: 0; margin-top: 4px; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.4; }
.ws-person .ws-reply-tag { flex: none; color: var(--text-3); }
.ws-person .ws-reply.is-interested .ws-reply-tag { color: var(--ok); }
.ws-person .ws-reply.is-not .ws-reply-tag { color: var(--danger); }
.ws-person .ws-reply-text { min-width: 0; overflow: hidden; color: var(--text-3); text-overflow: ellipsis; white-space: nowrap; }
.ws-top > span:last-child { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
/* Days in stock on a 0–180 day scale: neutral, brighter at 60+, amber at 90+, red at 120+. */
.ws-age { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.ws-age > span { color: var(--text-2); }
.ws-age > i { position: relative; flex: 0 1 34px; min-width: 14px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line-strong); }
.ws-age > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--text-5); }
.ws-age.is-aging > i::after { background: var(--text-3); }
.ws-age.is-warn > i::after { background: var(--warn); }
.ws-age.is-danger > i::after { background: var(--danger); }
.ws-two { min-width: 0; }
.ws-due-now { color: var(--warn) !important; }
/* Three-step progress meter. */
.ws-progress { display: grid; gap: 6px; }
.ws-progress small { color: var(--text-4); font-size: var(--fs-xs); }
.ws-steps { display: inline-flex; gap: 3px; }
.ws-steps i { width: 18px; height: 3px; border-radius: 1px; background: var(--line-strong); }
.ws-steps i.is-done { background: var(--text-3); }
.ws-steps i.is-current { background: var(--accent); }
.ws-steps.is-stopped i.is-current { background: var(--text-5); }
/* Text buttons inside cells. */
.ws-link, .ws-match-link { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--text); font-size: var(--fs-base); text-align: left; text-decoration: underline; text-decoration-color: var(--line-hover); text-underline-offset: 3px; transition: text-decoration-color var(--dur-2) var(--ease-out); }
.ws-link:hover, .ws-match-link:hover { text-decoration-color: var(--text-3); }
.ws-match-link { text-decoration: none; }
.ws-match-link > span:last-child { overflow: hidden; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-hover); text-underline-offset: 3px; text-overflow: ellipsis; white-space: nowrap; transition: color var(--dur-2) var(--ease-out), text-decoration-color var(--dur-2) var(--ease-out); }
.ws-match-link:hover > span:last-child { color: var(--text); text-decoration-color: var(--text-3); }

/* Row actions: a small button and/or a kebab, each with a design-system menu. */
.ws-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ws-menu-anchor { display: inline-flex; text-align: left; }
.ws-menu-anchor .menu { min-width: 230px; }
.ws-drop .chevron { width: 13px; height: 13px; margin-right: -3px; color: var(--text-3); transition: rotate var(--dur-2) var(--ease-out); }
.ws-drop[aria-expanded="true"] { border-color: var(--line-hover); background: rgb(255 255 255 / .035); }
.ws-drop[aria-expanded="true"] .chevron { rotate: 180deg; }
/* Menu notes carry people's names ("Top match · Ella Abernathy · 94%"), so they keep their case (unlike .menu-label). */
.ws-menu-note { max-width: 280px; color: var(--text-3); font-family: var(--font); font-size: var(--fs-xs); letter-spacing: 0; line-height: 1.4; text-transform: none; overflow-wrap: anywhere; white-space: normal; }
.menu button[disabled] { cursor: not-allowed; opacity: .45; }
.menu button[disabled]:hover { background: transparent; color: var(--text-2); }

/* Column widths (table-layout: fixed; unsized columns share the rest). */
.ws-t-radar th.c-age { width: 96px; } .ws-t-radar th.c-price { width: 104px; } .ws-t-radar th.c-buyers { width: 76px; }
.ws-t-radar th.c-top { width: 196px; } .ws-t-radar th.c-trigger { width: 156px; } .ws-t-radar th.c-pri { width: 110px; } .ws-t-radar th.c-act { width: 206px; }
.ws-t-matches th.c-score { width: 78px; } .ws-t-matches th.c-unit { width: 25%; } .ws-t-matches th.c-owner { width: 132px; }
.ws-t-matches th.c-status { width: 138px; } .ws-t-matches th.c-act { width: 126px; }
/* Filtered to one unit (the chip names it), the Unit column would repeat it on every row. */
.ws-by-unit .ws-t-matches .c-unit { display: none; }
.ws-t-seq th.c-progress { width: 124px; } .ws-t-seq th.c-due { width: 172px; } .ws-t-seq th.c-status { width: 136px; } .ws-t-seq th.c-act { width: 206px; }
.ws-t-appts th.c-when { width: 196px; } .ws-t-appts th.c-rep { width: 150px; } .ws-t-appts th.c-status { width: 120px; } .ws-t-appts th.c-act { width: 64px; }
.ws-t-inv th.c-cat { width: 120px; } .ws-t-inv th.c-price { width: 112px; } .ws-t-inv th.c-days { width: 150px; } .ws-t-inv th.c-buyers { width: 84px; }
.ws-t-inv th.c-status { width: 118px; } .ws-t-inv th.c-rec { width: 132px; }
.ws-t-sold th.c-buyer { width: 30%; } .ws-t-sold th.c-date { width: 140px; } .ws-t-sold th.c-rec { width: 140px; }
.ws-t-leads th.c-budget { width: 112px; } .ws-t-leads th.c-last { width: 128px; } .ws-t-leads th.c-best { width: 23%; }
.ws-table :is(.c-price, .c-rec, .c-budget) { text-align: right; }
.ws-table th:is(.c-price, .c-rec, .c-budget) + th, .ws-table td:is(.c-price, .c-rec, .c-budget) + td { padding-left: 24px; }

/* Medium cards (1280 × 800 and similar): fold the lowest-priority columns into the row's sub-lines. */
@container ws (max-width: 1180px) {
  .ws-t-radar .c-trigger { display: none; }
  .ws-t-radar .ws-fold { display: inline; }
  .ws-t-radar th.c-age { width: 88px; } .ws-t-radar th.c-price { width: 96px; } .ws-t-radar th.c-buyers { width: 66px; }
  .ws-t-radar th.c-top { width: 172px; } .ws-t-radar th.c-pri { width: 100px; } .ws-t-radar th.c-act { width: 176px; }
  .ws-t-matches .c-why, .ws-t-matches .c-owner { display: none; }
  /* Filtered to one unit, the freed Unit column makes room for why each buyer matched. */
  .ws-by-unit .ws-t-matches .c-why { display: table-cell; }
  .ws-t-matches th.c-unit { width: auto; }
  .ws-t-matches .ws-owner-sub { display: block; margin-top: 5px; overflow: hidden; color: var(--text-4); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
  .ws-t-seq th.c-lead { width: 17%; } .ws-t-seq th.c-progress { width: 116px; } .ws-t-seq th.c-due { width: 140px; }
  .ws-t-seq th.c-status { width: 132px; } .ws-t-seq th.c-act { width: 190px; }
  .ws-t-inv .c-cat { display: none; }
  .ws-t-leads .c-email, .ws-t-leads .ws-sub-wide { display: none; }
  .ws-t-leads .ws-fold-block { display: block; margin-top: 2px; overflow: hidden; color: var(--text-4); font-size: var(--fs-xs); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .ws-t-leads th.c-best { width: 28%; }
}

/* Narrow cards (≈ 740–940px: the 1024–1150px windows): a second fold level keeps real tables instead of stacked cards. */
@container ws (max-width: 940px) {
  .ws-t-radar .c-pri { display: none; }
  .ws-t-radar .ws-fold-pri { display: inline; }
  .ws-t-radar th.c-age { width: 78px; } .ws-t-radar th.c-price { width: 90px; } .ws-t-radar th.c-buyers { width: 66px; }
  .ws-t-radar th.c-top { width: 132px; } .ws-t-radar th.c-act { width: 174px; }
  .ws-t-radar .ws-age { gap: 7px; } .ws-t-radar .ws-age > i { flex-basis: 22px; }
  .ws-t-seq .c-due { display: none; }
  .ws-t-seq .ws-fold-due { display: block; margin-top: 5px; overflow: hidden; color: var(--text-4); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
  .ws-t-seq .ws-fold-due.ws-due-now { color: var(--warn); }
  .ws-t-seq th.c-lead { width: 20%; } .ws-t-seq th.c-progress { width: 108px; } .ws-t-seq th.c-status { width: 140px; }
  .ws-t-appts .c-rep { display: none; }
  .ws-t-appts .ws-fold-rep { display: block; margin-top: 2px; overflow: hidden; color: var(--text-4); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
  .ws-t-appts th.c-when { width: 170px; } .ws-t-appts th.c-status { width: 110px; }
  .ws-t-inv th.c-price { width: 100px; } .ws-t-inv th.c-days { width: 120px; } .ws-t-inv th.c-rec { width: 116px; }
  .ws-t-leads .c-budget { display: none; }
  .ws-by-unit .ws-t-matches .c-why { display: none; }
}

/* Stacked rows (workspace.js sets .ws-stacked on a table that is narrower than its columns need — tablets, phones, narrow
   windows): every row becomes a block — the record on top, labelled values in as many columns as fit (two on phones),
   actions underneath. Column headers fold into the labels. */
.ws-table-wrap.ws-stacked { margin-top: 14px; border-top: 1px solid var(--line-faint); }
.ws-stacked .ws-table, .ws-stacked .ws-table tbody { display: block; }
.ws-stacked .ws-table thead { display: none; }
.ws-stacked .ws-table tbody tr { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); grid-auto-flow: row dense; gap: 13px 16px; padding: 15px 20px 16px; border-bottom: 1px solid var(--line-faint); }
.ws-stacked .ws-table tbody tr:last-child { border-bottom: 0; }
.ws-stacked .ws-table td { display: block; height: auto; min-width: 0; padding: 0 !important; border: 0; text-align: left !important; }
.ws-stacked .ws-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 5px; color: var(--text-4); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); line-height: 1.4; text-transform: uppercase; }
.ws-stacked .ws-table td:is(.c-unit, .c-lead, .c-name, .c-when):first-child, .ws-stacked .ws-table td.c-act { grid-column: 1 / -1; }
.ws-stacked .ws-table td.c-act:has(.ws-actions:empty) { display: none; }
.ws-stacked .ws-table .ws-actions { justify-content: flex-start; flex-wrap: wrap; }
.ws-stacked .ws-table .ws-menu-anchor .menu { right: auto; left: 0; }
.ws-stacked .ws-table .ws-actions > .ws-menu-anchor:last-child:not(:first-child) .menu { right: 0; left: auto; }
.ws-stacked .ws-table td:is(.c-trigger, .c-why, .c-owner, .c-cat, .c-email) { display: none; }
.ws-stacked .ws-table .ws-fold { display: inline; }
.ws-stacked .ws-table :is(.ws-fold-pri, .ws-fold-due, .ws-fold-rep) { display: none; }
.ws-stacked .ws-table td:is(.c-pri, .c-due, .c-rep, .c-budget) { display: block; }
.ws-stacked .ws-table .ws-sub-wide { display: none; }
.ws-stacked .ws-table :is(.ws-owner-sub, .ws-fold-block) { display: block; margin-top: 3px; overflow: hidden; color: var(--text-4); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.ws-stacked .ws-table .ws-owner-sub { margin-top: 6px; }
.ws-stacked .ws-table .ws-none, .ws-stacked .ws-table .ws-none td { display: block; padding: 0; }
/* Wide values take two columns (the whole row on phones). */
.ws-stacked .ws-table td:is(.c-top, .c-best, .c-interest, .c-buyer), .ws-stacked :is(.ws-t-matches, .ws-t-seq, .ws-t-appts) td.c-unit { grid-column: span 2; }
/* The score (Matches) and the row menu (Appointments) sit at the record's top right. */
.ws-stacked .ws-t-matches td.c-lead { grid-column: 1 / -1; padding-right: 52px !important; }
.ws-stacked .ws-t-matches td.c-score { position: absolute; top: 15px; right: 20px; }
.ws-stacked .ws-t-matches td.c-score::before { display: none; }
.ws-stacked .ws-t-appts td.c-when { padding-right: 40px !important; }
.ws-stacked .ws-t-appts td.c-act { position: absolute; top: 11px; right: 14px; }
/* Nothing recovered yet: leave the empty value out of the stacked row. */
.ws-stacked .ws-t-inv td.c-rec:has(> .ws-quiet:only-child) { display: none; }
.ws-stacked + .ws-pager { padding: 12px 20px 13px; }

/* ── Activity feed ── */
.ws-feed-wrap { margin-top: 18px; }
.ws-day + .ws-day { margin-top: 22px; }
.ws-day-label { padding-bottom: 9px; border-bottom: 1px solid var(--line-faint); color: var(--text-4); font-size: var(--fs-label); font-weight: 400; }
.ws-feed { margin: 0; padding: 0; list-style: none; }
.ws-event { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 54px; padding: 9px 0; border-bottom: 1px solid var(--line-faint); }
.ws-event:last-child { border-bottom: 0; }
.ws-event-icon { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-2); color: var(--text-3); }
.ws-event-icon .icon { width: 14px; height: 14px; }
.ws-event-text { min-width: 0; }
.ws-event-text strong { display: block; color: var(--text); font-size: var(--fs-base); font-weight: 400; line-height: 1.35; }
.ws-event-text span { display: block; margin-top: 2px; overflow: hidden; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ws-event time { color: var(--text-4); font-size: var(--fs-xs); white-space: nowrap; }
.ws-card:has(.ws-feed-wrap) .ws-pager { margin-top: 0; }

/* ── Settings ── */
.ws-settings { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ws-set-side { display: grid; gap: 16px; min-width: 0; }
.ws-set-card .card-head { min-height: 14px; }
.ws-set-card .card-sub, .ws-card-heading .card-sub { text-wrap: pretty; }
.ws-form { margin-top: 22px; }
.ws-fieldset { display: grid; gap: 18px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ws-fieldset:disabled { opacity: .55; }
.ws-field label { color: var(--text-2); font-size: var(--fs-sm); }
.ws-field input[aria-invalid="true"] { border-color: rgb(var(--danger-rgb) / .6); }
.ws-hint { color: var(--text-4); font-size: var(--fs-xs); line-height: 1.4; }
.ws-form-error { margin-top: 14px; color: var(--danger); font-size: var(--fs-base); }
.ws-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 22px -20px -20px; padding: 14px 20px 16px; border-top: 1px solid var(--line-faint); }
.ws-form-foot .btn { margin-left: auto; }
.ws-form-note { color: var(--text-4); font-size: var(--fs-sm); }
.ws-set-missing { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid rgb(var(--warn-rgb) / .3); border-radius: var(--r-2); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.ws-set-missing[hidden] { display: none; }
.ws-set-missing .icon { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--warn); }
.ws-form-note:empty { display: none; }
.ws-cols-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-faint); }
.ws-cols ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; }
.ws-cols li { padding: 3px 7px; border: 1px solid var(--line); border-radius: var(--r-1); color: var(--text-2); font-size: var(--fs-xs); line-height: 1.3; white-space: nowrap; }
.ws-set-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ws-set-actions .btn { max-width: 100%; }
.ws-set-actions .btn > span { overflow: hidden; text-overflow: ellipsis; }
#wsAccountText { overflow-wrap: anywhere; }

.ws-connections { display: grid; gap: 0; margin-top: 16px; border-top: 1px solid var(--line-faint); }
.ws-connection { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 66px; padding: 11px 0; border-bottom: 1px solid var(--line-faint); }
.ws-connection:last-child { border-bottom: 0; }
.ws-connection-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.ws-connection-main > div { min-width: 0; }
.ws-connection-main strong { display: block; color: var(--text); font-size: var(--fs-base); font-weight: 500; }
.ws-connection-main small { display: block; margin-top: 3px; overflow: hidden; color: var(--text-4); font-size: var(--fs-xs); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.ws-connection-actions { display: flex; flex: none; gap: 6px; }
/* The result of Test: what the read-only call returned, and its Composio log ID. */
.ws-connection-main .ws-connection-result { margin-top: 6px; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.45; overflow-wrap: anywhere; white-space: normal; }
.ws-connection-main .ws-connection-result.is-error { color: var(--danger); }
.ws-connection-result[hidden] { display: none; }
.ws-connection-empty { display: grid; gap: 8px; padding: 15px 0 2px; }
.ws-connection-empty strong { color: var(--text); font-size: var(--fs-base); font-weight: 500; }
.ws-connection-empty small { color: var(--text-4); font-size: var(--fs-sm); line-height: 1.5; }
.ws-connection-empty .btn { width: max-content; margin-top: 3px; }
@media (max-width: 560px) {
  .ws-connection { grid-template-columns: minmax(0,1fr); }
  .ws-connection-main { align-items: flex-start; }
  .ws-connection-actions .btn { width: 100%; }
}

/* ── Loading frame (replaced on load) ── */
.ws-skel-card { gap: 0; }
.ws-skel-card .skel { margin-top: 2px; }
.ws-skel-card .ws-skel-num { width: 36px; height: 26px; margin-top: 12px; }
.ws-skel-card .skel:last-child { margin-top: 12px; }
.ws-skel-head { display: grid; gap: 12px; }
.ws-skel-rows { margin: 22px -20px -20px; border-top: 1px solid var(--line-faint); }
.ws-skel-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 90px; align-items: center; gap: 12px; height: 54px; padding: 0 20px; border-bottom: 1px solid var(--line-faint); }
.ws-skel-row:last-child { border-bottom: 0; }
.ws-skel-row span { display: grid; gap: 7px; }
.ws-skel-thumb { width: 40px; height: 30px; }
.ws-skel-end { height: 24px; }

/* ── Responsive (window) ── */
@media (max-width: 1180px) {
  .ws-stats { gap: 12px; }
}
@media (max-width: 1100px) {
  .ws-settings { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .ws-head-actions { padding-top: 4px; }
}
/* Four stat cards need ~820px; narrower bodies (tablets, the 1024px window) take them two by two. */
@container wsbody (max-width: 820px) {
  .ws-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 760px) {
  .ws-stats { gap: 10px; }
  .ws-head { flex-direction: column; }
  .ws-head-actions { justify-content: flex-start; padding-top: 0; }
}
/* Touch screens and phones: row and toolbar controls grow to 40px (WCAG 2.5.8 passes on spacing alone; this is the
   comfortable size). The buyer-count link keeps its look and gains an invisible 40px hit area. */
@media (max-width: 560px), (pointer: coarse) {
  .ws .btn-sm { --h: 40px; }
  .ws .kebab { width: 40px; height: 40px; }
  .ws-chip, .ws-unit-chip { height: 40px; }
  .ws-unit-chip button { width: 34px; height: 34px; }
  .ws-link.num { position: relative; }
  .ws-link.num::after { content: ""; position: absolute; inset: -12px -14px; }
}
@media (max-width: 560px) {
  .ws-head .page-title, .ws-title { font-size: 26px; line-height: 31px; }
  .ws-head .page-sub { font-size: 13.5px; line-height: 20px; }
  .ws-card.card-pad { padding: 14px 16px 18px; }
  .ws-table-wrap, .ws-skel-rows { margin-left: -16px; margin-right: -16px; }
  .ws-table th:first-child, .ws-table td:first-child { padding-left: 16px; }
  .ws-table th:last-child, .ws-table td:last-child { padding-right: 16px; }
  .ws-pager, .ws-form-foot { margin-left: -16px; margin-right: -16px; margin-bottom: -18px; padding-left: 16px; padding-right: 16px; }
  .ws-skel-rows { margin-bottom: -18px; }
  .ws-skel-row { padding: 0 16px; }
  .ws-stat.kpi { min-height: 96px; padding: 13px 12px 12px 14px; }
  .ws-stat .kpi-value { font-size: 24px; }
  .ws-cols-grid { grid-template-columns: minmax(0, 1fr); }
  .ws-card-tools { justify-content: flex-start; width: calc(100% + 32px); max-width: none; margin: 0 -16px -3px; }
  .ws-chips { flex-wrap: nowrap; overflow-x: auto; padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .ws-chips::-webkit-scrollbar { display: none; }
  .ws-chip { flex: none; }
  .ws-unit-chip { margin: 0 16px; max-width: calc(100% - 32px); }
  .ws-event { align-items: start; }
  .ws-event-icon { margin-top: 1px; }
  .ws-event-text span { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
  .ws-stacked .ws-table tbody tr { padding: 14px 16px 15px; }
  .ws-stacked .ws-t-matches td.c-score { top: 14px; right: 16px; }
  .ws-stacked .ws-t-appts td.c-act { top: 10px; right: 10px; }
}