/* ==========================================================================
   Contracts (CLM) — the contract workspace

   Loaded after clm.css and dash.css. Everything is scoped under .clm .ws so
   it cannot reach any other screen.

   RESPONSIVE, NOT SHRUNK
   The two-pane screens are two panes down to 1040px. Below that the
   document pane is not made narrower, it is taken off and reached by a
   control, because a legal clause in a 320px column is not a smaller
   version of the same screen.

   CONTRAST
   No text is ever painted on a saturated fill. A severity, a state and a
   kind are each a tinted chip with the full color as its text and border,
   which clears 4.5:1 in both themes on one rule rather than per hue.
   ========================================================================== */

/* ============================================================ header ==== */

/* The header and the tab strip are ONE band with ONE rule under the whole
   of it. Two rules with the tabs trapped between them read as a gap that
   somebody forgot to close, and the space above and below never matches
   because each rule belongs to a different box. */
.clm .ws-head {
  background: var(--card); padding-block: 9px 8px; margin-top: -16px;
}
.clm .ws-head-top { display: flex; align-items: center; gap: 8px 11px; flex-wrap: wrap; }
.clm .ws-back { flex: none; align-self: flex-start; margin-top: 1px; }
/* The number is a label ON the title, so it sits above it rather than
   competing with it for the same line. A long title then wraps under
   itself instead of pushing the number and the state chip onto lines of
   their own, which is what made the three read as misaligned. */
.clm .ws-head-id { flex: 1 1 210px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.clm .ws-num {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted-foreground);
  align-self: flex-start;
}
/* Centered, not baseline aligned. A bordered pill carries padding above
   its text, so on a shared baseline it rides visibly high against a 20px
   title. */
.clm .ws-titlerow { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.clm .ws-title {
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3;
  min-width: 0; overflow-wrap: anywhere;
}
@media (min-width: 900px) { .clm .ws-title { font-size: 19.5px; } }

.clm .ws-state {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border);
}
.clm .ws-state[data-state="active"]      { background: color-mix(in oklab, var(--success) 13%, var(--card));     color: var(--ink-ok);     border-color: color-mix(in oklab, var(--success) 34%, var(--card)); }
.clm .ws-state[data-state="expiring"]    { background: color-mix(in oklab, var(--warning) 15%, var(--card));     color: var(--ink-warning);     border-color: color-mix(in oklab, var(--warning) 36%, var(--card)); }
.clm .ws-state[data-state="expired"],
.clm .ws-state[data-state="terminated"]  { background: color-mix(in oklab, var(--destructive) 13%, var(--card)); color: var(--ink-danger); border-color: color-mix(in oklab, var(--destructive) 34%, var(--card)); }
.clm .ws-state[data-state="closeout"]    { background: color-mix(in oklab, var(--c4) 13%, var(--card));          color: var(--ink-violet);          border-color: color-mix(in oklab, var(--c4) 34%, var(--card)); }
.clm .ws-state[data-state="in-approval"] { background: color-mix(in oklab, var(--c1) 13%, var(--card));          color: var(--ink-blue);          border-color: color-mix(in oklab, var(--c1) 34%, var(--card)); }

.clm .ws-head-acts { display: flex; align-items: center; gap: 7px; flex: none; }
/* The two controls keep their own width on a narrow window rather than
   being stretched across it. Stretched, they read as the most important
   thing on a contract, and they take a whole row to say it. */
@media (max-width: 720px) { .clm .ws-head-acts { width: 100%; flex-wrap: wrap; } }
@media (max-width: 380px) { .clm .ws-head-acts > .btn { flex: 1 1 auto; justify-content: center; } }

.clm .ws-facts {
  display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 4px 0 0;
  padding-left: 40px;
}
@media (max-width: 720px) { .clm .ws-facts { padding-left: 0; margin-top: 7px; } }
.clm .ws-facts > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.clm .ws-facts dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-foreground); flex: none;
}
.clm .ws-facts dd { margin: 0; font-size: 12px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------- the strip --- */

.clm .ws-tabs {
  background: var(--card); border-bottom: 1px solid var(--border);
  position: sticky; top: var(--topbar-h); z-index: 6;
}
/* Equal padding above and below, so the strip sits centered on its own
   rule rather than pressed against it. */
.clm .ws-tabs-in {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; padding-block: 5px;
}
.clm .ws-tabs-in::-webkit-scrollbar { display: none; }
.clm .ws-tab {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 6px 9px; min-height: 32px; scroll-snap-align: start;
  background: none; border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--muted-foreground); white-space: nowrap;
}
.clm .ws-tab:hover { background: var(--secondary); color: var(--foreground); }
.clm .ws-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .ws-tab-i { flex: none; opacity: .85; }
.clm .ws-tab-n {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 999px;
  background: var(--secondary); color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.clm .ws-tab[aria-selected="true"] { background: var(--area); color: var(--card); border-color: var(--area); }
.clm .ws-tab[aria-selected="true"] .ws-tab-n {
  background: color-mix(in oklab, var(--card) 26%, transparent); color: var(--card);
}

.clm .ws-body { display: flex; flex-direction: column; gap: 11px; padding-top: 11px; }

/* Fifteen tabs do not fit one row at 1440, and a row that runs off the
   window edge cuts its last tab mid-word. On a wide window they wrap onto
   a second row instead: nothing is hidden, nothing is cut, and the strip
   ends where its content ends rather than at the window edge.

   Below that they scroll rather than wrap, because wrapping fifteen tabs
   on a phone is a five row strip, and a sheet would hide which tab you are
   on, which on a fifteen tab screen is the one thing it has to keep
   saying. */
@media (min-width: 1100px) {
  .clm .ws-tabs-in { flex-wrap: wrap; overflow-x: visible; row-gap: 3px; }
}

/* ------------------------------------------------------ the row menu --- */

.clm .ws-menu {
  position: absolute; z-index: 61; top: calc(100% + 6px); right: 0;
  min-width: 238px; padding: 5px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -12px color-mix(in oklab, var(--foreground) 30%, transparent);
}
.clm .ws-menu-i {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px;
  padding: 7px 10px; border: 0; border-radius: var(--r-md); background: none;
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; color: var(--foreground);
}
.clm .ws-menu-i > .ico { flex: none; color: var(--muted-foreground); }
.clm .ws-menu-i:hover { background: var(--secondary); }
.clm .ws-menu-i:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .ws-menu-i.is-danger { color: var(--destructive); }
.clm .ws-menu-i.is-danger > .ico { color: var(--destructive); }

/* ============================================================== tags ==== */
/* One shape for severity, category, kind and state. The fill is a tint and
   the text is the full color, so nothing is ever painted on a saturated
   ground and one rule holds the contrast for every hue. */

/* The fill is a tint of the hue; the text is a darker ink of the same hue,
   not the hue itself. A 10px uppercase label set in --warning measures
   3.25:1 on its own tint, which fails 1.4.3. These inks are all near L 0.42
   in light and near L 0.86 in dark, so every tag clears 4.5:1 on one rule
   rather than six exceptions. */
.clm .ws {
  --ink-danger:  oklch(0.44 0.160 25);
  --ink-warning: oklch(0.43 0.110 68);
  --ink-medium:  oklch(0.43 0.110 62);
  --ink-blue:    oklch(0.44 0.140 255);
  --ink-violet:  oklch(0.43 0.150 300);
  --ink-ok:      oklch(0.41 0.110 152);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .clm .ws {
    --ink-danger:  oklch(0.86 0.090 25);
    --ink-warning: oklch(0.88 0.090 68);
    --ink-medium:  oklch(0.88 0.090 62);
    --ink-blue:    oklch(0.86 0.080 255);
    --ink-violet:  oklch(0.86 0.090 300);
    --ink-ok:      oklch(0.87 0.080 152);
  }
}
:root[data-theme="dark"] .clm .ws {
  --ink-danger:  oklch(0.86 0.090 25);
  --ink-warning: oklch(0.88 0.090 68);
  --ink-medium:  oklch(0.88 0.090 62);
  --ink-blue:    oklch(0.86 0.080 255);
  --ink-violet:  oklch(0.86 0.090 300);
  --ink-ok:      oklch(0.87 0.080 152);
}

.clm .ws-tag {
  display: inline-flex; align-items: center; flex: none;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border);
  white-space: nowrap;
}
.clm .ws-tag[data-sev="critical"],
.clm .ws-tag[data-kind="missing"] {
  background: color-mix(in oklab, var(--destructive) 12%, var(--card));
  color: var(--ink-danger); border-color: color-mix(in oklab, var(--destructive) 32%, var(--card));
}
.clm .ws-tag[data-sev="high"] {
  background: color-mix(in oklab, var(--warning) 16%, var(--card));
  color: var(--ink-warning); border-color: color-mix(in oklab, var(--warning) 38%, var(--card));
}
.clm .ws-tag[data-sev="medium"],
.clm .ws-tag[data-kind="modified"] {
  background: color-mix(in oklab, var(--c3) 14%, var(--card));
  color: var(--ink-medium); border-color: color-mix(in oklab, var(--c3) 34%, var(--card));
}
.clm .ws-tag[data-sev="low"] {
  background: color-mix(in oklab, var(--c1) 12%, var(--card));
  color: var(--ink-blue); border-color: color-mix(in oklab, var(--c1) 32%, var(--card));
}
.clm .ws-tag[data-kind="cat"] {
  background: color-mix(in oklab, var(--c4) 12%, var(--card));
  color: var(--ink-violet); border-color: color-mix(in oklab, var(--c4) 32%, var(--card));
}
.clm .ws-tag[data-kind="ok"] {
  background: color-mix(in oklab, var(--success) 13%, var(--card));
  color: var(--ink-ok); border-color: color-mix(in oklab, var(--success) 32%, var(--card));
}

/* ========================================================== overview ==== */

/* Two rows, not five stacked panels. The summary and the profile are the
   reading of the contract; the four fact panels are the record it was read
   from. Keeping those two jobs on two rows is what makes the tab short
   enough to take in without scrolling on a laptop. */
.clm .ws-ovtop { display: grid; gap: 11px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) {
  .clm .ws-ovtop { grid-template-columns: minmax(0, 1.6fr) minmax(290px, 1fr); }
}
.clm .ws-ovtop > .clm-panel { display: flex; flex-direction: column; }
.clm .ws-ovtop > .clm-panel > .clm-panel-body { flex: 1; }

.clm .ws-ovfacts { display: grid; gap: 11px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .clm .ws-ovfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .clm .ws-ovfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.clm .ws-ovfacts > .clm-panel { display: flex; flex-direction: column; min-width: 0; }
.clm .ws-ovfacts > .clm-panel > .clm-panel-body { flex: 1; padding: 11px 12px; }

.clm .ws-sum, .clm .ws-sug-wrap {
  padding: 14px 15px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, color-mix(in oklab, var(--a-ai) 7%, var(--card)), var(--card) 62%);
  border: 1px solid color-mix(in oklab, var(--a-ai) 24%, var(--border));
}
.clm .ws-sum-head { display: flex; align-items: flex-start; gap: 11px; flex-wrap: wrap; }
.clm .ws-sum-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--card); border: 1px solid color-mix(in oklab, var(--a-ai) 30%, var(--border));
  color: var(--a-ai-strong);
}
.clm .ws-sum-t { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.01em; flex: 1 1 260px; min-width: 0; }
.clm .ws-sum-badge {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--card); color: var(--a-ai-strong);
  border: 1px solid color-mix(in oklab, var(--a-ai) 30%, var(--border));
}
.clm .ws-sum-lead { margin: 10px 0 0; font-size: 13.5px; font-weight: 650; line-height: 1.5; }
.clm .ws-sum-body { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 92ch; }
.clm .ws-sum-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.clm .ws-ovtop > .ws-sum { display: flex; flex-direction: column; }
@media (max-width: 560px) { .clm .ws-sum-acts .btn { flex: 1 1 auto; justify-content: center; } }

/* A headline, so the panel says something before the ladder is read. Four
   findings that all land in one band is a real result, not a broken
   chart, and the figure is what makes that legible. */
.clm .ws-prof-top { display: flex; align-items: baseline; gap: 9px; margin: 0 0 12px; }
.clm .ws-prof-fig { font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.clm .ws-prof-figl { font-size: 11.5px; line-height: 1.45; color: var(--muted-foreground); min-width: 0; }
.clm .ws-prof-figl > b { color: var(--foreground); text-transform: capitalize; }
.clm .ws-prof-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin: 11px 0 0; }
.clm .ws-prof-kind {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--secondary); border: 1px solid var(--border); color: var(--muted-foreground);
}
.clm .ws-prof-kind > b { color: var(--foreground); font-variant-numeric: tabular-nums; }
.clm .ws-prof { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.clm .ws-prof-r { display: grid; grid-template-columns: 58px minmax(0, 1fr) 42px; align-items: center; gap: 10px; }
.clm .ws-prof-l { font-size: 11.5px; font-weight: 650; color: var(--muted-foreground); }
.clm .ws-prof-t { display: block; height: 9px; border-radius: 999px; background: var(--secondary); overflow: hidden; }
.clm .ws-prof-f { display: block; height: 100%; border-radius: 999px; background: var(--border); }
.clm .ws-prof-n { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.clm .ws-prof-r:not([data-on="1"]) .ws-prof-n { font-size: 10.5px; font-weight: 650; color: var(--muted-foreground); }
.clm .ws-prof-r[data-on="1"][data-sev="critical"] .ws-prof-f { background: var(--destructive); }
.clm .ws-prof-r[data-on="1"][data-sev="high"]     .ws-prof-f { background: var(--warning); }
.clm .ws-prof-r[data-on="1"][data-sev="medium"]   .ws-prof-f { background: var(--c3); }
.clm .ws-prof-r[data-on="1"][data-sev="low"]      .ws-prof-f { background: var(--c1); }
.clm .ws-prof-note { margin: 11px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted-foreground); }

.clm .ws-dl { margin: 0; display: flex; flex-direction: column; }
.clm .ws-dl-r {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 12px;
  padding: 6px 0; border-top: 1px solid var(--border); align-items: baseline;
}
/* Four panels across means a quarter width column. Below that the label
   and the value stop competing for the same line and stack instead. */
@media (min-width: 1180px) and (max-width: 1420px) {
  .clm .ws-ovfacts .ws-dl-r { grid-template-columns: 1fr; gap: 1px; }
  .clm .ws-ovfacts .ws-dl dd { text-align: left; }
}
.clm .ws-dl-r:first-child { border-top: 0; padding-top: 0; }
.clm .ws-dl dt { font-size: 11px; line-height: 1.45; color: var(--muted-foreground); }
.clm .ws-dl dd { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.45; text-align: right; overflow-wrap: anywhere; }
.clm .ws-dl dd.is-empty { font-weight: 400; color: var(--muted-foreground); font-style: italic; }
@media (max-width: 420px) {
  .clm .ws-dl-r { grid-template-columns: 1fr; }
  .clm .ws-dl dd { text-align: left; }
}

/* ====================================================== the two panes === */

.clm .ws-split { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1040px) {
  .clm .ws-split { grid-template-columns: 216px minmax(0, 1fr) minmax(320px, 0.85fr); }
  .clm .ws-split-docs { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr); }
  .clm .ws-split-3 { grid-template-columns: 230px minmax(0, 1.1fr) minmax(300px, 0.8fr); }
}
@media (min-width: 1040px) and (max-width: 1320px) {
  .clm .ws-split { grid-template-columns: 200px minmax(0, 1fr); }
  .clm .ws-split .ws-viewer { grid-column: 1 / -1; }
  .clm .ws-split-3 { grid-template-columns: 210px minmax(0, 1fr); }
}
.clm .ws-split-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* ------------------------------------------------------------ the rail -- */

.clm .ws-rail {
  display: flex; flex-direction: column; gap: 13px; min-width: 0;
  padding: 11px 10px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
/* The rail stays put while the middle column scrolls. A filter that
   scrolls away is a filter you have to go and find again. */
@media (min-width: 1040px) {
  .clm .ws-rail {
    position: sticky; top: calc(var(--topbar-h) + 54px);
    max-height: calc(100vh - var(--topbar-h) - 76px); overflow: auto;
  }
}
@media (max-width: 1039px) {
  .clm .ws-rail { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
  .clm .ws-rail-g { flex: 1 1 230px; min-width: 0; }
}
.clm .ws-rail-h {
  margin: 0 0 6px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .ws-rail-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
/* One grid, so the counts line up down a single edge whatever the label
   length, and the severity marks line up down another. */
.clm .ws-rail-b {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 26px; align-items: center; gap: 8px; width: 100%;
  min-height: 30px; padding: 4px 8px; border: 0; border-radius: var(--r-md);
  background: none; font: inherit; font-size: 12px; cursor: pointer;
  color: var(--muted-foreground); text-align: left;
}
.clm .ws-rail-b:hover { background: var(--secondary); color: var(--foreground); }
.clm .ws-rail-b:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .ws-rail-b[aria-pressed="true"] { background: var(--area); color: var(--card); font-weight: 650; }
.clm .ws-rail-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clm .ws-rail-n { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
/* A zero is made quiet by weight, not by opacity. Fading the row takes
   its label under 4.5:1, and fading only the count takes the count under
   it: the count measured 1.58:1 at 55 percent. Weight costs no contrast. */
.clm .ws-rail-b.is-empty:not([aria-pressed="true"]) .ws-rail-n { font-weight: 400; }
.clm .ws-rail-b.is-empty:not([aria-pressed="true"]) .ws-rail-dot { opacity: .45; }
.clm .ws-rail-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--border); }
.clm .ws-rail-dot[data-sev="critical"] { border-color: var(--destructive); }
.clm .ws-rail-dot[data-sev="high"]     { border-color: var(--warning); }
.clm .ws-rail-dot[data-sev="medium"]   { border-color: var(--c3); }
.clm .ws-rail-dot[data-sev="low"]      { border-color: var(--c1); }
.clm .ws-rail-dot[data-sev="all"]      { border-color: var(--muted-foreground); }
.clm .ws-rail-b[aria-pressed="true"] .ws-rail-dot { border-color: var(--card); opacity: 1; }
.clm .ws-rail-note { margin: 0; font-size: 11px; line-height: 1.5; color: var(--muted-foreground); }

/* ------------------------------------------------------- the findings -- */

.clm .ws-count { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted-foreground); }
.clm .ws-lead { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--muted-foreground); max-width: 94ch; }
.clm .ws-h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }

.clm .ws-finds, .clm .ws-agents, .clm .ws-clauses, .clm .ws-notes, .clm .ws-ms, .clm .ws-sugs, .clm .ws-docs {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
}
.clm .ws-find {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  border-left: 3px solid var(--border); overflow: hidden;
}
.clm .ws-find[data-sev="critical"] { border-left-color: var(--destructive); }
.clm .ws-find[data-sev="high"]     { border-left-color: var(--warning); }
.clm .ws-find[data-sev="medium"]   { border-left-color: var(--c3); }
.clm .ws-find[data-sev="low"]      { border-left-color: var(--c1); }
.clm .ws-find[data-open="1"] { box-shadow: var(--shadow-raised); }

.clm .ws-find-head {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: start; gap: 10px;
  width: 100%; padding: 12px 13px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.clm .ws-find-head:hover { background: var(--surface); }
.clm .ws-find-head:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .ws-find-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--border); }
.clm .ws-find[data-sev="medium"] .ws-find-dot { background: var(--c3); }
.clm .ws-find[data-sev="high"] .ws-find-dot { background: var(--warning); }
.clm .ws-find[data-sev="critical"] .ws-find-dot { background: var(--destructive); }
.clm .ws-find-no { font-size: 12px; font-weight: 700; color: var(--muted-foreground); min-width: 34px; }
.clm .ws-find-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.clm .ws-find-t { font-size: 13px; font-weight: 700; line-height: 1.35; }
.clm .ws-find-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.clm .ws-find-chev { color: var(--muted-foreground); flex: none; margin-top: 2px; }

.clm .ws-find-body { padding: 0 13px 13px; display: flex; flex-direction: column; gap: 10px; }

.clm .ws-quote { border-radius: var(--r-md); padding: 10px 12px; border-left: 3px solid var(--border); background: var(--surface); }
.clm .ws-quote[data-tone="drafted"] {
  background: color-mix(in oklab, var(--destructive) 6%, var(--card));
  border-left-color: color-mix(in oklab, var(--destructive) 46%, var(--card));
}
.clm .ws-quote[data-tone="missing"] {
  background: color-mix(in oklab, var(--warning) 8%, var(--card));
  border-left-color: color-mix(in oklab, var(--warning) 48%, var(--card));
}
.clm .ws-quote[data-tone="preferred"] {
  background: color-mix(in oklab, var(--success) 7%, var(--card));
  border-left-color: color-mix(in oklab, var(--success) 46%, var(--card));
}
.clm .ws-quote[data-tone="why"] { background: var(--surface); border-left-color: var(--border); }
.clm .ws-quote-h {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .ws-quote-h > .ico { color: var(--muted-foreground); }
.clm .ws-quote-b {
  font-size: 9.5px; padding: 2px 7px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border); letter-spacing: .04em;
}
.clm .ws-quote-go {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 26px;
  border: 0; background: none; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--area); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.clm .ws-quote-go:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .ws-quote > p { margin: 0; font-size: 12.5px; line-height: 1.65; }

.clm .ws-find-fall { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--muted-foreground); }
.clm .ws-find-acts { display: flex; gap: 7px; flex-wrap: wrap; }
@media (max-width: 480px) { .clm .ws-find-acts .btn { flex: 1 1 auto; justify-content: center; } }

/* -------------------------------------------------------- the clauses -- */

.clm .ws-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.clm .ws-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--input); color: var(--muted-foreground);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; max-width: 100%;
}
.clm .ws-chip:hover { background: var(--secondary); color: var(--foreground); }
.clm .ws-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .ws-chip[aria-selected="true"] { background: var(--area); border-color: var(--area); color: var(--card); }
.clm .ws-chip[aria-selected="true"] .clm-stab-n {
  background: color-mix(in oklab, var(--card) 26%, transparent); color: var(--card);
}
.clm .ws-chip.is-empty:not([aria-selected="true"]) { opacity: .6; }
.clm .ws-chip-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }

.clm .ws-subtabs {
  display: flex; gap: 3px; border-bottom: 1px solid var(--border);
  padding-block: 0 6px; margin-bottom: 2px;
}
.clm .ws-subtab {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 12px;
  background: none; border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-size: 13px; font-weight: 650; color: var(--muted-foreground); cursor: pointer;
}
.clm .ws-subtab:hover { background: var(--secondary); color: var(--foreground); }
.clm .ws-subtab:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .ws-subtab[aria-selected="true"] { background: var(--area); color: var(--card); border-color: var(--area); }
.clm .ws-subtab[aria-selected="true"] .clm-stab-n {
  background: color-mix(in oklab, var(--card) 26%, transparent); color: var(--card);
}

/* The selected clause is marked by a rule down its edge as well as a tint.
   A tint on its own is a color-only distinction, which 1.4.1 does not
   allow. */
.clm .ws-clause {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  border-left: 3px solid var(--border); padding: 10px 12px;
}
.clm .ws-clause[data-sev="critical"] { border-left-color: color-mix(in oklab, var(--destructive) 58%, var(--card)); }
.clm .ws-clause[data-sev="high"]     { border-left-color: color-mix(in oklab, var(--warning) 62%, var(--card)); }
.clm .ws-clause[data-sev="medium"]   { border-left-color: color-mix(in oklab, var(--c3) 58%, var(--card)); }
.clm .ws-clause[data-on="1"] {
  border-color: var(--area); border-left-color: var(--area);
  background: color-mix(in oklab, var(--area) 4%, var(--card)); box-shadow: var(--shadow-raised);
}
/* One grid, so the number gutter, the title and the tags line up down the
   whole list instead of every row wrapping wherever its own title ends. */
.clm .ws-clause-head {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; width: 100%;
  background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; min-height: 26px;
}
.clm .ws-clause-head:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
.clm .ws-clause-no { font-size: 11.5px; font-weight: 700; color: var(--muted-foreground); line-height: 1.5; }
.clm .ws-clause-t { font-size: 12.5px; font-weight: 700; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.clm .ws-clause-tags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.clm .ws-clause-quiet { font-size: 10.5px; color: var(--muted-foreground); white-space: nowrap; }
/* Two lines while the clause is closed, the whole extract once it is the
   one being read. */
.clm .ws-clause-x {
  margin: 6px 0 0; padding-left: 52px; font-size: 11.5px; line-height: 1.6; color: var(--muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clm .ws-clause-x[data-full="1"] { display: block; }
.clm .ws-clause-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 7px 0 0 52px; min-height: 28px;
  border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; font-weight: 650;
  color: var(--destructive); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.clm .ws-clause-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* On a phone the tags take their own line under the title and start at
   the left with it, and the number gutter collapses on a clause that has
   no number rather than indenting its title past nothing. */
@media (max-width: 560px) {
  .clm .ws-clause-head { grid-template-columns: auto minmax(0, 1fr); }
  .clm .ws-clause-tags { grid-column: 1 / -1; justify-content: flex-start; }
  .clm .ws-clause-x { padding-left: 0; }
  .clm .ws-clause-link { margin-left: 0; }
}

/* ------------------------------------------------------- the document -- */

.clm .ws-viewer {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  max-height: 72vh;
}
@media (max-width: 1039px) { .clm .ws-viewer { max-height: 56vh; } }
.clm .ws-viewer-head {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.clm .ws-viewer-f { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 650; min-width: 0; }
.clm .ws-viewer-f .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clm .ws-viewer-f > .ico { flex: none; color: var(--muted-foreground); }
.clm .ws-viewer-v { font-size: 11px; color: var(--muted-foreground); }
.clm .ws-viewer-x { margin-left: auto; }
.clm .ws-viewer-cap {
  margin: 0; padding: 7px 11px; font-size: 11px; line-height: 1.5;
  color: var(--muted-foreground); background: var(--card); border-bottom: 1px solid var(--border);
}
.clm .ws-viewer-body { overflow: auto; padding: 14px 15px; flex: 1; min-height: 0; }
.clm .ws-viewer-body:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.clm .ws-doc-head {
  margin: 0 0 4px; font-size: 12px; font-weight: 700; text-align: center;
  letter-spacing: .02em; text-transform: uppercase;
}
.clm .ws-doc-h2 {
  margin: 16px 0 7px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.clm .ws-doc-p, .clm .ws-doc-c {
  margin: 0 0 9px; font-size: 12px; line-height: 1.7; text-align: justify; hyphens: auto;
}
.clm .ws-doc-c.is-hl {
  background: color-mix(in oklab, var(--destructive) 14%, var(--card));
  outline: 2px solid color-mix(in oklab, var(--destructive) 44%, var(--card));
  border-radius: 3px; padding: 5px 7px; margin-inline: -7px; scroll-margin-top: 12px;
}

/* ====================================================== ai reasoning ==== */

.clm .ws-agent { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.clm .ws-agent[data-open="1"] { box-shadow: var(--shadow-raised); border-color: color-mix(in oklab, var(--a-ai) 30%, var(--border)); }
.clm .ws-agent-head {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.clm .ws-agent-head:hover { background: var(--surface); }
.clm .ws-agent-head:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .ws-agent-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 8px;
  background: color-mix(in oklab, var(--a-ai) 10%, var(--card));
  border: 1px solid color-mix(in oklab, var(--a-ai) 28%, var(--border));
  color: var(--a-ai-strong);
}
.clm .ws-agent-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clm .ws-agent-t { font-size: 13px; font-weight: 700; }
.clm .ws-agent-s { font-size: 11.5px; color: var(--muted-foreground); }
.clm .ws-agent-state {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in oklab, var(--success) 13%, var(--card));
  color: var(--ink-ok); border: 1px solid color-mix(in oklab, var(--success) 32%, var(--card));
}
.clm .ws-agent-n {
  flex: none; font-size: 11px; font-weight: 700; min-width: 22px; text-align: center;
  padding: 2px 7px; border-radius: 999px; background: var(--secondary); font-variant-numeric: tabular-nums;
}
.clm .ws-agent-chev { flex: none; color: var(--muted-foreground); }
@media (max-width: 560px) { .clm .ws-agent-state { display: none; } }

.clm .ws-agent-body { padding: 0 13px 13px; display: flex; flex-direction: column; gap: 10px; }
.clm .ws-qa { display: grid; gap: 10px; align-items: stretch; grid-template-columns: 1fr; }
@media (min-width: 760px) { .clm .ws-qa { grid-template-columns: 1fr auto 1fr; } }
.clm .ws-qa-arrow { display: none; align-self: center; color: var(--muted-foreground); }
@media (min-width: 760px) { .clm .ws-qa-arrow { display: inline-flex; } }

.clm .ws-step {
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface);
  border-left: 3px solid var(--border);
}
.clm .ws-step[data-step="1"] { border-left-color: var(--c1); }
.clm .ws-step[data-step="2"] { border-left-color: var(--success); }
.clm .ws-step[data-step="c"] { border-left-color: var(--c3); }
.clm .ws-step[data-step="m"] { border-left-color: var(--c4); }
.clm .ws-step-h {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .ws-step-n {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 18px; height: 18px; border-radius: 5px; font-size: 10px;
  background: var(--card); border: 1px solid var(--border); color: var(--foreground);
}
.clm .ws-step > p { margin: 0; font-size: 12.5px; line-height: 1.6; }
.clm .ws-run {
  display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto;
  font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--muted-foreground);
}
.clm .ws-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.clm .ws-steps > li { font-size: 12.5px; line-height: 1.6; }

.clm .ws-ctx { display: flex; gap: 5px; flex-wrap: wrap; margin: 0; }
.clm .ws-ctx-c {
  font-size: 10.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in oklab, var(--c3) 12%, var(--card));
  color: var(--ink-medium); border: 1px solid color-mix(in oklab, var(--c3) 30%, var(--card));
}

.clm .ws-detect { padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); }
.clm .ws-detect-t { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.clm .ws-detect-b { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--muted-foreground); }
.clm .ws-detect-m { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 9px 0 0; font-size: 11px; color: var(--muted-foreground); }
.clm .ws-helpful { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted-foreground); }

.clm .ws-raw > summary { cursor: pointer; list-style: none; }
.clm .ws-raw > summary::-webkit-details-marker { display: none; }
.clm .ws-raw-s {
  display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px;
  font-size: 11.5px; font-weight: 650; color: var(--muted-foreground);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card);
}
.clm .ws-raw > summary:hover .ws-raw-s { color: var(--foreground); background: var(--secondary); }
.clm .ws-raw > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .ws-raw-b { margin-top: 9px; display: flex; flex-direction: column; gap: 4px; }
.clm .ws-raw-b h5 {
  margin: 7px 0 0; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.clm .ws-pre {
  margin: 0; padding: 10px 11px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ======================================================== obligations === */

.clm .ws-src { font-size: 11px; color: var(--muted-foreground); }
.clm .ws-srcbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; max-width: 100%;
  padding: 3px 8px 3px 6px; border-radius: var(--r-md);
  background: var(--secondary); border: 1px solid var(--border);
  font: inherit; font-size: 11px; font-weight: 650; color: var(--area);
  cursor: pointer; text-align: left;
}
.clm .ws-srcbtn > .ico { flex: none; }
.clm .ws-srcbtn > span { min-width: 0; overflow-wrap: anywhere; }
.clm .ws-srcbtn:hover { background: var(--card); border-color: var(--area); }
.clm .ws-srcbtn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .ws-fig-sm { font-size: 14px; letter-spacing: 0; line-height: 1.4; }

.clm .ws-prop {
  display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left;
  padding: 9px 10px; border: 1px solid transparent; border-radius: var(--r-md);
  background: none; font: inherit; cursor: pointer;
}
.clm .ws-prop:hover { background: var(--secondary); }
.clm .ws-prop:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .ws-prop.is-on { background: var(--surface); border-color: var(--area); }
.clm .ws-prop-t { font-size: 12px; font-weight: 650; line-height: 1.4; }
.clm .ws-prop-m { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 10.5px; color: var(--muted-foreground); }

.clm .ws-ob { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px 14px; }
.clm .ws-ob-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clm .ws-ob-t { margin: 0; font-size: 14px; font-weight: 700; flex: 1 1 220px; min-width: 0; }
.clm .ws-ob-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.clm .ws-ob-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 11px 0 0; padding: 9px 11px;
  border-radius: var(--r-md); font-size: 12px; line-height: 1.55;
  background: color-mix(in oklab, var(--a-ai) 7%, var(--card));
  border: 1px solid color-mix(in oklab, var(--a-ai) 24%, var(--border));
}
.clm .ws-ob-note > .ico { flex: none; color: var(--a-ai-strong); margin-top: 1px; }
.clm .ws-ob .ws-quote { margin-top: 11px; }

.clm .ws-of-grid { display: grid; gap: 10px 14px; grid-template-columns: 1fr; margin-top: 12px; }
@media (min-width: 620px) { .clm .ws-of-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.clm .ws-of-wide { grid-column: 1 / -1; }
.clm .ws-of { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.clm .ws-of-l { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-foreground); }
.clm .ws-of-v { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.clm .ws-of-v.is-empty { font-weight: 400; font-style: italic; color: var(--muted-foreground); }
.clm .ws-of-h { font-size: 11px; line-height: 1.5; color: var(--muted-foreground); }

.clm .ws-ob-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--border);
}
.clm .ws-ob-src { font-size: 11px; color: var(--muted-foreground); }
.clm .ws-ob-btns { display: flex; gap: 7px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .clm .ws-ob-btns { width: 100%; }
  .clm .ws-ob-btns .btn { flex: 1 1 auto; justify-content: center; }
}

.clm .ws-rem { margin: 14px 0 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.clm .ws-rem-l { padding: 0 5px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-foreground); }
.clm .ws-rem-h { margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--muted-foreground); }
.clm .ws-rem-r {
  display: grid; gap: 7px; align-items: end; margin-bottom: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .clm .ws-rem-r { grid-template-columns: 84px 100px 142px 158px minmax(0, 1fr) auto; } }
.clm .ws-rem-r .clm-in-sm { width: 100%; min-width: 0; }
.clm .ws-rem-r > .clm-icobtn { margin-bottom: 4px; }

/* A panel clips its own corners, which is right for a table and wrong for
   a row menu: with one row the panel is one row tall, so the menu opens
   into clipped space and simply is not there. These panels stop clipping,
   and the first and last rows round themselves instead. */
.clm .clm-panel.has-menus { overflow: visible; }
.clm .clm-panel.has-menus > ul > li:first-child { border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.clm .clm-panel.has-menus > ul > li:last-child  { border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); }
.clm .clm-panel.has-menus > ul > li:only-child  { border-radius: calc(var(--r-lg) - 1px); }

/* ========================================================== approvals === */

/* A chain, not a row of boxes. Each step carries a connector back to the
   one before it, and the connector takes the state of the step behind it,
   so the route reads in a single pass. */
.clm .ws-chain { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.clm .ws-chain-s { position: relative; padding: 0 0 18px 0; }
.clm .ws-chain-s:last-child { padding-bottom: 0; }
/* the connector: down the page on a narrow window */
.clm .ws-chain-s::after {
  content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px;
  background: var(--border); border-radius: 2px;
}
.clm .ws-chain-s:last-child::after { display: none; }
.clm .ws-chain-s[data-state="done"]::after { background: var(--success); }

.clm .ws-chain-b {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px;
  width: 100%; min-height: 44px; padding: 7px 11px 7px 7px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--card); font: inherit; text-align: left; cursor: pointer;
}
.clm .ws-chain-b:hover { background: var(--secondary); }
.clm .ws-chain-b:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .ws-chain-s[data-on="1"] .ws-chain-b {
  border-color: var(--area); border-width: 2px; padding: 6px 10px 6px 6px;
  background: color-mix(in oklab, var(--area) 4%, var(--card)); box-shadow: var(--shadow-panel);
}
.clm .ws-chain-n {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%; font-size: 12.5px; font-weight: 700;
  background: var(--card); color: var(--muted-foreground); border: 2px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.clm .ws-chain-s[data-state="done"] .ws-chain-n {
  background: color-mix(in oklab, var(--success) 14%, var(--card));
  border-color: var(--success); color: var(--ink-ok);
}
.clm .ws-chain-s[data-state="live"] .ws-chain-n {
  background: color-mix(in oklab, var(--warning) 16%, var(--card));
  border-color: var(--warning); color: var(--ink-warning);
}
.clm .ws-chain-s[data-on="1"] .ws-chain-n { border-color: var(--area); color: var(--area); }
.clm .ws-chain-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.clm .ws-chain-t { font-size: 12.5px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.clm .ws-chain-st {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .ws-chain-s[data-state="done"] .ws-chain-st { color: var(--ink-ok); }
.clm .ws-chain-s[data-state="live"] .ws-chain-st { color: var(--ink-warning); }

/* across the page once there is room for it */
@media (min-width: 760px) {
  .clm .ws-chain { flex-direction: row; align-items: stretch; }
  .clm .ws-chain-s { flex: 1 1 0; min-width: 0; padding: 0 0 0 22px; }
  .clm .ws-chain-s:first-child { padding-left: 0; }
  .clm .ws-chain-s::after {
    left: auto; right: calc(100% + 3px); top: 50%; bottom: auto;
    width: 16px; height: 2px; transform: translateY(-50%);
  }
  .clm .ws-chain-s:last-child::after { display: block; }
  .clm .ws-chain-s:first-child::after { display: none; }
  .clm .ws-chain-b { height: 100%; align-items: center; }
}

/* A panel title here can be a file name with no spaces in it. Left alone
   it runs past the card edge and is clipped by it. */
.clm .ws .clm-panel-title { overflow-wrap: anywhere; }
.clm .ws .clm-panel-sub { overflow-wrap: anywhere; white-space: normal; }

.clm .ws-stage { padding: 11px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.clm .ws-stage-h { margin: 0 0 5px; font-size: 12.5px; font-weight: 700; }
.clm .ws-stage-b { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted-foreground); }

/* One footnote in place of three panels of explanation. */
.clm .ws-foot { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 96ch; }
.clm .ws-step-note { margin: 9px 0 0; font-size: 11px; line-height: 1.55; color: var(--muted-foreground); }

/* =========================================================== documents == */

.clm .ws-doc { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.clm .ws-docs > .ws-doc:first-child { border-top: 0; }
.clm .ws-doc.is-on { background: var(--surface); }
.clm .ws-doc-main {
  display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0;
  padding: 11px 13px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.clm .ws-doc-main.is-static { cursor: default; }
.clm .ws-doc-main:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .ws-doc-i {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border);
}
.clm .ws-doc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clm .ws-doc-n { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }
.clm .ws-doc-m { font-size: 11px; color: var(--muted-foreground); }

/* The four actions people reach for sit on the row; the rest stay in the
   menu. On a phone the row actions drop to their own line under the file
   name rather than squeezing it, because a file list whose file names are
   cut is not a file list. */
.clm .ws-doc-acts { display: flex; align-items: center; gap: 2px; flex: none; }
@media (max-width: 620px) {
  .clm .ws-doc-acts { width: 100%; justify-content: flex-end; padding: 0 0 8px 13px; margin-top: -4px; }
}
.clm .ws-doc-act > .ico { color: var(--muted-foreground); }
.clm .ws-doc-act:hover > .ico { color: var(--foreground); }

/* ================================================================ chat == */

/* The wrapper owns the height, the transcript owns the scroll, the
   composer owns nothing but its own place at the bottom. A composer that
   scrolls with the transcript ends up below the fold on the first long
   answer, and then the only way to ask a second question is to scroll
   back down past the first. */
.clm .ws-chatwrap {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel); overflow: hidden;
  /* A starting height only. The real one is measured and written by
     CAPP.fitChat on every render and resize, because how far down this
     wrapper starts depends on how the header wrapped and whether the tab
     strip took one row or two. */
  height: calc(100dvh - var(--topbar-h) - var(--bottomnav-h, 0px) - 250px);
  min-height: 360px;
}

.clm .ws-chat-head {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.clm .ws-chat-headtx { flex: 1; min-width: 0; }
.clm .ws-chat-headt { margin: 0; font-size: 13px; font-weight: 700; }
.clm .ws-chat-heads {
  margin: 1px 0 0; font-size: 11px; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.clm .ws-chat-log {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 14px 13px; display: flex; flex-direction: column; gap: 14px;
}
.clm .ws-chat-log:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* ---- empty state ---- */
.clm .ws-chat-empty {
  margin: auto; padding: 8px 2px; text-align: center; max-width: 52ch;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.clm .ws-chat-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: color-mix(in oklab, var(--a-ai) 11%, var(--card));
  border: 1px solid color-mix(in oklab, var(--a-ai) 30%, var(--border));
  color: var(--a-ai-strong);
}
.clm .ws-chat-emptyt { margin: 13px 0 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.clm .ws-chat-emptyb { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted-foreground); }
.clm .ws-chat-sug {
  list-style: none; margin: 15px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px; width: 100%;
}
.clm .ws-sug {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px;
  padding: 8px 13px; border-radius: var(--r-lg); text-align: left;
  background: var(--card); border: 1px solid var(--input); color: var(--foreground);
  font: inherit; font-size: 12px; cursor: pointer;
}
.clm .ws-sug > .ico { flex: none; color: var(--a-ai-strong); }
.clm .ws-sug > span { min-width: 0; }
.clm .ws-sug:hover { background: var(--secondary); border-color: var(--area); }
.clm .ws-sug:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---- turns ---- */
.clm .ws-turn { display: flex; gap: 9px; max-width: 100%; }
.clm .ws-turn.is-me { justify-content: flex-end; }
.clm .ws-turn-q {
  margin: 0; max-width: min(78%, 62ch); padding: 9px 13px; border-radius: 14px 14px 3px 14px;
  background: var(--area); color: var(--card); font-size: 12.5px; line-height: 1.55;
  overflow-wrap: anywhere;
}
.clm .ws-turn-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 9px;
  background: color-mix(in oklab, var(--a-ai) 10%, var(--card));
  border: 1px solid color-mix(in oklab, var(--a-ai) 28%, var(--border));
  color: var(--a-ai-strong);
}
.clm .ws-turn-a { min-width: 0; max-width: min(88%, 82ch); display: flex; flex-direction: column; gap: 9px; }
.clm .ws-turn-t {
  margin: 0; padding: 10px 13px; border-radius: 14px 14px 14px 3px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.65; overflow-wrap: anywhere;
}
.clm .ws-turn-tbl { margin: 0; }
.clm .ws-turn-cites { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.clm .ws-turn-citel {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .ws-cite {
  display: inline-flex; align-items: center; gap: 5px; min-height: 26px; max-width: 100%;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--input);
  font: inherit; font-size: 11px; font-weight: 650; color: var(--area); cursor: pointer;
}
.clm .ws-cite > .ico { flex: none; }
.clm .ws-cite > span { min-width: 0; overflow-wrap: anywhere; }
.clm .ws-cite:hover { background: var(--secondary); border-color: var(--area); }
.clm .ws-cite:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .ws-turn-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0;
  font-size: 11px; color: var(--muted-foreground);
}
.clm .ws-turn-act {
  display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 8px 2px 6px;
  border: 1px solid transparent; border-radius: var(--r-md); background: none;
  font: inherit; font-size: 11px; font-weight: 650; color: var(--muted-foreground); cursor: pointer;
}
.clm .ws-turn-act > .ico { flex: none; }
.clm .ws-turn-act:hover { background: var(--secondary); color: var(--foreground); border-color: var(--border); }
.clm .ws-turn-act:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---- the composer ---- */
.clm .ws-chat-bar {
  flex: none; padding: 10px 12px 11px; border-top: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; gap: 7px;
}
.clm .ws-chat-row { display: flex; align-items: flex-end; gap: 7px; }
.clm .ws-chat-in {
  flex: 1; min-width: 0; resize: none; min-height: 40px; max-height: 128px;
  line-height: 1.5; padding-top: 10px; padding-bottom: 10px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.clm .ws-chat-mic { flex: none; }
.clm .ws-chat-mic.is-on {
  background: color-mix(in oklab, var(--destructive) 13%, var(--card));
  border-color: color-mix(in oklab, var(--destructive) 42%, var(--card));
  color: var(--ink-danger);
}
.clm .ws-chat-mic.is-on > .ico { color: var(--ink-danger); }
.clm .ws-chat-send { flex: none; }
.clm .ws-chat-note { margin: 0; font-size: 10.5px; line-height: 1.5; color: var(--muted-foreground); }

/* Voice mode announces itself in text as well as color, so it is not a
   red dot and nothing else. */
.clm .ws-rec {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 11px;
  border-radius: var(--r-md); font-size: 11.5px; font-weight: 650;
  background: color-mix(in oklab, var(--destructive) 9%, var(--card));
  border: 1px solid color-mix(in oklab, var(--destructive) 34%, var(--card));
  color: var(--ink-danger);
}
.clm .ws-rec-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--destructive);
  animation: ws-pulse 1.4s ease-in-out infinite;
}
@keyframes ws-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .clm .ws-rec-dot { animation: none; } }

/* ========================================================== milestones == */

.clm .ws-m { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.clm .ws-m-rail { width: 3px; border-radius: 999px; background: var(--border); }
.clm .ws-m[data-state="Met"] .ws-m-rail { background: var(--success); }
.clm .ws-m[data-state="Due"] .ws-m-rail { background: var(--warning); }
.clm .ws-m[data-state="Missed"] .ws-m-rail { background: var(--destructive); }
.clm .ws-m[data-state="Ahead"] .ws-m-rail { background: var(--c1); }
.clm .ws-m-body { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 12px; }
/* Title, dates and state on one line, so a milestone costs three lines
   rather than five. */
.clm .ws-m-t { display: flex; align-items: baseline; gap: 5px 10px; flex-wrap: wrap; margin: 0; }
.clm .ws-m-title { font-size: 12.5px; font-weight: 700; }
.clm .ws-m-d { font-size: 11px; font-weight: 650; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.clm .ws-m-n { margin: 5px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted-foreground); }
.clm .ws-m-w { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 7px 0 0; font-size: 11px; color: var(--muted-foreground); }
.clm .ws-ms { gap: 6px; }

/* =============================================================== tasks == */

/* Closed, the suggestions are one bar. Open, the bar is the header of the
   section it opened, so the control that opens a thing stays attached to
   the thing it opened. */
.clm .ws-sug-wrap.is-closed { padding: 0; }
.clm .ws-sugbar {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 48px;
  padding: 10px 13px; border: 0; border-radius: var(--r-lg);
  background: none; font: inherit; text-align: left; cursor: pointer;
}
.clm .ws-sug-wrap:not(.is-closed) .ws-sugbar { padding: 0 0 11px; border-radius: 0; }
.clm .ws-sugbar:hover { background: color-mix(in oklab, var(--a-ai) 5%, transparent); }
.clm .ws-sugbar:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .ws-sugbar-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clm .ws-sugbar-t { font-size: 13px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.clm .ws-sugbar-s { font-size: 11.5px; line-height: 1.5; color: var(--muted-foreground); }
.clm .ws-sugbar-chev { flex: none; color: var(--muted-foreground); }
.clm .ws-sug-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clm .ws-sug-meta .ws-ctx { flex: 1 1 260px; }
@media (max-width: 520px) { .clm .ws-sug-meta > .btn { width: 100%; justify-content: center; } }
.clm .ws-sugs { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 12px; align-items: stretch; }
@media (min-width: 640px)  { .clm .ws-sugs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .clm .ws-sugs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .clm .ws-sugs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.clm .ws-sugc {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 13px;
}
.clm .ws-sugc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.clm .ws-sugc-c { font-size: 10.5px; color: var(--muted-foreground); }
.clm .ws-sugc-t { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.4; }
.clm .ws-sugc-src {
  margin: 0; padding: 8px 10px; border-radius: var(--r-md);
  background: var(--surface); border-left: 3px solid var(--border);
  font-size: 11.5px; line-height: 1.6; color: var(--muted-foreground);
}
.clm .ws-sugc-dl { margin: 0; display: flex; flex-direction: column; gap: 7px; padding: 9px 10px; border-radius: var(--r-md); background: var(--surface); }
.clm .ws-sugc-dl > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 9px; }
.clm .ws-sugc-dl dt { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); }
.clm .ws-sugc-dl dd { margin: 0; font-size: 12px; font-weight: 650; min-width: 0; }
.clm .ws-sugc-dl dd > span { display: block; margin-top: 2px; font-weight: 400; font-size: 11px; line-height: 1.5; color: var(--muted-foreground); }
.clm .ws-sugc-why { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--muted-foreground); }
.clm .ws-sugc-form { display: flex; flex-direction: column; gap: 9px; padding: 10px; border-radius: var(--r-md); background: var(--surface); }
.clm .ws-sugc-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.clm .ws-sugc-acts .btn { flex: 1 1 auto; justify-content: center; }

.clm .ws-who { display: inline-flex; align-items: center; gap: 6px; }

/* ================================================================ team == */

.clm .clm-avatar, .clm .ws-who .clm-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--secondary); border: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); letter-spacing: .02em;
}

/* One grid for the header and every row, so the columns line up down the
   list. Below 720px the grid collapses to two columns and the level and
   the remove control move under the name rather than squeezing it. */
/* A member list does not need 1400px. Capped, the four columns sit close
   enough to read across a row without the eye crossing an empty run. */
.clm .ws-teamp { max-width: 1020px; }
.clm .ws-team { list-style: none; margin: 0; padding: 0; }
.clm .ws-team-h, .clm .ws-mem {
  display: grid; align-items: center; gap: 8px 12px; padding: 9px 13px;
  grid-template-columns: minmax(0, 1fr) 104px 128px 34px;
}
.clm .ws-team-h {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-foreground); background: var(--surface);
  border-bottom: 1px solid var(--border); padding-block: 7px;
}
.clm .ws-mem { border-top: 1px solid var(--border); }
.clm .ws-team > .ws-mem:first-of-type { border-top: 0; }
.clm .ws-mem:hover { background: var(--surface); }
.clm .ws-mem-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.clm .ws-mem-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.clm .ws-mem-n { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }
.clm .ws-mem-e {
  display: inline-flex; align-items: center; min-height: 24px;
  font-size: 11px; color: var(--area); text-underline-offset: 2px; overflow-wrap: anywhere;
}
.clm .ws-mem-e:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .ws-mem-since { font-size: 11.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
/* On a wide window the column header says what this date is. Once the
   header row is gone the date has to say so itself. */
.clm .ws-mem-sincel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.clm .ws-mem-lvl { min-width: 0; }
.clm .ws-mem-lvl .clm-in-sm { width: 100%; }
.clm .ws-mem-x { justify-self: end; }

@media (max-width: 720px) {
  .clm .ws-team-h { display: none; }
  .clm .ws-mem { grid-template-columns: minmax(0, 1fr) 34px; padding: 11px 13px; }
  .clm .ws-mem-who { grid-column: 1; }
  .clm .ws-mem-x { grid-column: 2; grid-row: 1; align-self: start; }
  .clm .ws-mem-since { grid-column: 1 / -1; order: 3; }
  .clm .ws-mem-sincel {
    position: static; width: auto; height: auto; clip-path: none;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 10px;
  }
  .clm .ws-mem-sincel::after { content: ' · '; }
  .clm .ws-mem-lvl { grid-column: 1 / -1; order: 4; max-width: 180px; }
}

/* =============================================================== notes == */

.clm .ws-note { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 13px; }
.clm .ws-note-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.clm .ws-note-t { margin: 0; font-size: 13px; font-weight: 700; min-width: 0; }
.clm .ws-note-m { font-size: 11px; color: var(--muted-foreground); margin-left: auto; }
.clm .clm-member-r > a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--area); text-underline-offset: 2px;
}
.clm .clm-member-r > a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.clm .ws-note-b { margin: 8px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--muted-foreground); }

/* ============================================================= history == */

.clm .ws-day { display: flex; flex-direction: column; gap: 0; }
.clm .ws-day-h {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .ws-day-n { font-size: 10.5px; font-weight: 650; letter-spacing: 0; text-transform: none; }

.clm .ws-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
/* The rail is drawn by the entries themselves, so it starts at the first
   mark and stops at the last rather than running past both. */
.clm .ws-hist-i {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px;
  padding: 0 0 12px 0;
}
.clm .ws-hist-i::before {
  content: ''; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px;
  background: var(--border); border-radius: 2px;
}
.clm .ws-hist > .ws-hist-i:last-child { padding-bottom: 0; }
.clm .ws-hist > .ws-hist-i:last-child::before { display: none; }

.clm .ws-hist-dot {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; z-index: 1;
  background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border);
}
.clm .ws-hist-i[data-kind="create"] .ws-hist-dot {
  background: color-mix(in oklab, var(--success) 13%, var(--card));
  color: var(--ink-ok); border-color: color-mix(in oklab, var(--success) 34%, var(--card));
}
.clm .ws-hist-i[data-kind="upload"] .ws-hist-dot {
  background: color-mix(in oklab, var(--c1) 12%, var(--card));
  color: var(--ink-blue); border-color: color-mix(in oklab, var(--c1) 32%, var(--card));
}
.clm .ws-hist-i[data-kind="state"] .ws-hist-dot {
  background: color-mix(in oklab, var(--c4) 12%, var(--card));
  color: var(--ink-violet); border-color: color-mix(in oklab, var(--c4) 32%, var(--card));
}

.clm .ws-hist-b {
  min-width: 0; padding: 10px 12px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.clm .ws-hist-t { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; margin: 0; }
.clm .ws-hist-what { font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }
.clm .ws-hist-time { font-size: 11px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.clm .ws-hist-who {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 7px 0 0;
  font-size: 11.5px; font-weight: 650;
}
.clm .ws-hist-who .clm-avatar { width: 22px; height: 22px; font-size: 9px; }
.clm .ws-hist-mail { font-weight: 400; font-size: 11px; color: var(--muted-foreground); overflow-wrap: anywhere; }

/* What it was, what it became. A pair, not a table whose third column is
   usually empty. */
.clm .ws-diffs {
  list-style: none; margin: 9px 0 0; padding: 9px 0 0; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.clm .ws-diff-r { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 4px 11px; align-items: start; }
@media (max-width: 560px) { .clm .ws-diff-r { grid-template-columns: 1fr; } }
.clm .ws-diff-f {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-foreground); padding-top: 3px;
}
.clm .ws-diff-p { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
/* A short change reads across. A long one, such as a list of nine owner
   addresses, reads down, with the arrow turned to match. Side by side it
   would be two paragraphs the eye has to measure against each other. */
.clm .ws-diff-p[data-long="1"] { flex-direction: column; align-items: stretch; gap: 4px; }
.clm .ws-diff-p[data-long="1"] .ws-diff-arrow { transform: rotate(90deg); align-self: center; }
.clm .ws-diff-arrow { flex: none; color: var(--muted-foreground); }
.clm .ws-diff-old, .clm .ws-diff-new {
  font-size: 11px; line-height: 1.5; padding: 3px 8px; border-radius: var(--r-md);
  min-width: 0; overflow-wrap: anywhere; max-width: 100%;
}
.clm .ws-diff-old {
  background: color-mix(in oklab, var(--destructive) 8%, var(--card));
  border: 1px solid color-mix(in oklab, var(--destructive) 26%, var(--card));
  text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--destructive) 55%, transparent);
}
.clm .ws-diff-new {
  background: color-mix(in oklab, var(--success) 9%, var(--card));
  border: 1px solid color-mix(in oklab, var(--success) 28%, var(--card));
  font-weight: 650;
}

/* ------------------------------------------------------- flex sheets --- */

.clm .ws-fsbar { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: flex-end; flex: 0 1 auto; min-width: 0; }
.clm .ws-fsbar .clm-fld { min-width: 0; flex: 0 1 auto; }
.clm .ws-fsq { flex: 0 1 260px; min-width: 150px; }
.clm .ws-fsbar .clm-in-sm { width: 100%; min-width: 0; }
@media (max-width: 560px) { .clm .ws-fsbar > .clm-fld { flex: 1 1 140px; } }

.clm .ws-rowacts { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }

/* ============================================================ dialogs === */

.clm .ws-chk { align-items: flex-start; padding: 12px 0 0; }
.clm .ws-chk-h { display: block; margin-top: 2px; font-size: 11px; color: var(--muted-foreground); }