/* ==========================================================================
   Contracts (CLM) — module stylesheet

   Every selector is scoped under .clm. Area colors live in clm-tokens.css,
   which loads first.

   The shell's core/components.css owns the shared vocabulary: .card, .btn,
   .badge, .chip, .tbl, .toolbar. This file adds what CLM needs on top and
   never copies what core already says.

   Three things drove this revision.

   1  Everything lives inside the contract. Nine screens that were menu
      destinations are now tabs on the Contract Workspace, in two modes.
      The menu holds six places; the contract holds the work.

   2  AI is a layer, not a tab. It sits on every tab, and every AI output
      is a proposal carrying its confidence and the span it cites, with a
      human decision that starts at pending.

   3  Compact and colorful. The old header left a band of white between the
      top bar and the title. The workspace header now starts flush against
      the bar, runs edge to edge, and is tinted by the area you are in.

   Responsive intent, stated once:
     below 768    one column. Tabs become a sheet listing every tab at
                  once, because a horizontal scroller hides most of them.
     768 to 1023  two columns where a pair fits. Tab strip visible.
     1024 and up  findings beside the document.
     1600 and up  wider measure, six figure columns.
   ========================================================================== */


/* --------------------------------------------------------- color note --
   Revised 17 September 2026 after review: the first cut was too loud.
   Area color now appears in four places only, and nowhere else:

     the icon chip beside a title
     the active tab and the active mode
     a lead panel's left edge, where a screen marks one panel as the point
     the header wash, at 40 percent rather than a full field

   Figure cards, tiles, panel heads, row hover, avatars and chips are
   neutral. Semantic color (success, warning, danger) is untouched,
   because it carries meaning rather than identity, and AI cyan is
   untouched, because a person must always be able to tell what a machine
   proposed from what a person decided.
   ----------------------------------------------------------------------- */

/* ---------------------------------------------------------------- base -- */

.clm { display: flex; flex-direction: column; gap: 10px; }

/* Full bleed. #main carries a gutter; a band that should touch the window
   edges cancels it and puts it back as its own padding. */
.clm .clm-bleed {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

/* The first element sits flush against the top bar. #main pads 16px and
   that gap read as unexplained white space. */
.clm > .clm-wshead:first-child,
.clm > .clm-dhead:first-child,
.clm > .clm-hd:first-child { margin-top: -16px; }

.clm .clm-rule {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-foreground); margin: 6px 0 0;
}
.clm .clm-rule::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}

/* ------------------------------------------------------- section chip --- */

.clm .clm-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--area-soft); color: var(--area);
  border: 1px solid var(--area-line);
}
.clm .clm-chip-sm { width: 24px; height: 24px; border-radius: 7px; }
.clm .clm-chip-lg { width: 38px; height: 38px; border-radius: 11px; }

/* ------------------------------------------------------- screen header -- */
/* For the six menu destinations. Compact, tinted, flush to the top bar. */

.clm .clm-hd {
  background: linear-gradient(180deg, var(--area-soft), var(--card) 44%);
  border-bottom: 1px solid var(--border);
  padding-block: 12px 11px;
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap;
}
.clm .clm-hd-text { min-width: 0; flex: 1 1 280px; display: flex; gap: 11px; align-items: flex-start; }
.clm .clm-hd-titles { min-width: 0; }
.clm .clm-hd-title {
  margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.025em;
  line-height: 1.18; text-wrap: balance;
}
@media (min-width: 1024px) { .clm .clm-hd-title { font-size: 25px; } }
.clm .clm-hd-desc { margin: 3px 0 0; font-size: 12.5px; color: var(--muted-foreground); max-width: 74ch; line-height: 1.45; }
.clm .clm-hd-acts { display: flex; gap: 7px; flex: none; flex-wrap: wrap; }
@media (max-width: 560px) {
  .clm .clm-hd-acts { width: 100%; }
  .clm .clm-hd-acts .btn { flex: 1; justify-content: center; }
}

/* --------------------------------------------------- workspace header -- */

.clm .clm-wshead {
  background: linear-gradient(180deg, var(--area-soft), var(--card) 40%);
  border-bottom: 1px solid var(--border);
  padding-block: 9px 0;
  display: flex; flex-direction: column; gap: 9px;
}
.clm .clm-ws-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clm .clm-back {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 3px 5px 3px 0;
  font: inherit; font-size: 11.5px; font-weight: 650; color: var(--area);
  border-radius: var(--r-sm); min-height: 28px;
}
.clm .clm-back:hover { text-decoration: underline; }
.clm .clm-back:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.clm .clm-ws-top {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap;
}
.clm .clm-ws-id { min-width: 0; flex: 1 1 300px; display: flex; gap: 11px; align-items: flex-start; }
.clm .clm-ws-titles { min-width: 0; }
.clm .clm-ws-meta1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.clm .clm-ws-title {
  margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.022em;
  line-height: 1.2; text-wrap: balance;
}
@media (min-width: 1024px) { .clm .clm-ws-title { font-size: 22px; } }
.clm .clm-ws-meta2 { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 12px; color: var(--muted-foreground); }
.clm .clm-ws-meta2 > span + span::before { content: '\00b7'; margin: 0 7px; color: var(--border); }
.clm .clm-ws-acts { display: flex; gap: 7px; flex: none; flex-wrap: wrap; }
@media (max-width: 560px) {
  .clm .clm-ws-acts { width: 100%; }
  .clm .clm-ws-acts .btn { flex: 1; justify-content: center; }
}

.clm .clm-reserved {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 650; padding: 3px 9px; border-radius: 999px;
  background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning);
}

/* ---------------------------------------------------------- mode swap -- */

.clm .clm-modes {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--secondary); border: 1px solid var(--border); border-radius: 999px;
}
.clm .clm-mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; min-height: 34px; border: 1px solid transparent; background: none;
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 650;
  color: var(--muted-foreground); border-radius: 999px; white-space: nowrap;
}
.clm .clm-mode:hover { color: var(--foreground); }
.clm .clm-mode:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .clm-mode[aria-selected="true"] {
  background: var(--card); color: var(--area);
  box-shadow: var(--shadow-panel); border-color: var(--area-line);
}
.clm .clm-mode-n {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: var(--muted); color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.clm .clm-mode[aria-selected="true"] .clm-mode-n { background: var(--area-soft); color: var(--area); }
@media (hover: none) { .clm .clm-mode { min-height: 44px; } }
@media (max-width: 560px) {
  .clm .clm-modes { width: 100%; }
  .clm .clm-mode { flex: 1; justify-content: center; padding-inline: 8px; }
}

/* -------------------------------------------------------------- tabs --- */

.clm .clm-tabs {
  display: none; gap: 2px; border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.clm .clm-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .clm .clm-tabs { display: flex; } }

.clm .clm-tab {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 9px 12px; min-height: 40px;
  font-size: 12.5px; font-weight: 650; color: var(--muted-foreground);
  text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; white-space: nowrap;
}
.clm .clm-tab:hover { color: var(--foreground); background: var(--secondary); }
.clm .clm-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .clm-tab[aria-current="page"] {
  color: var(--area); border-bottom-color: var(--area); background: var(--area-soft);
}
.clm .clm-tab-n {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 999px;
  background: var(--muted); color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.clm .clm-tab[aria-current="page"] .clm-tab-n { background: var(--area); color: var(--on-strong); }
.clm .clm-tab-alert { color: var(--destructive); display: inline-flex; }

/* The phone control: shows where you are, opens the sheet. */
.clm .clm-tabpick {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 12px; min-height: 46px; cursor: pointer; font: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel); text-align: left;
}
@media (min-width: 768px) { .clm .clm-tabpick { display: none; } }
.clm .clm-tabpick:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .clm-tabpick-t { flex: 1; min-width: 0; }
.clm .clm-tabpick-l {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.clm .clm-tabpick-v { display: block; font-size: 13.5px; font-weight: 700; color: var(--area); }
.clm .clm-tabpick-c { flex: none; color: var(--muted-foreground); }

/* ------------------------------------------------------------- sheet --- */

.clm-sheet-scrim { position: fixed; inset: 0; z-index: 80; background: oklch(0.2 0.03 258 / .45); border: 0; padding: 0; }
.clm-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
  max-height: 88vh; overflow-y: auto;
  background: var(--card); border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-pop);
  padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
}
.clm-sheet-grab { width: 38px; height: 4px; border-radius: 2px; background: var(--border); margin: 6px auto 8px; }
.clm-sheet-h {
  margin: 12px 0 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted-foreground);
}
.clm-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
@media (min-width: 420px) { .clm-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.clm-sheet-item {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 10px; min-height: 70px; cursor: pointer; font: inherit; text-align: left;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
}
.clm-sheet-item:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm-sheet-item[aria-current="page"] { border-color: var(--area); background: var(--area-soft); }
.clm-sheet-name { font-size: 12px; font-weight: 650; line-height: 1.25; }
.clm-sheet-item[aria-current="page"] .clm-sheet-name { color: var(--area); }
.clm-sheet-close { width: 100%; margin-top: 14px; min-height: 46px; justify-content: center; }

/* ------------------------------------------------------------ figures -- */

.clm .clm-figs { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .clm .clm-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .clm .clm-figs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.clm .clm-fig {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  text-align: left; padding: 10px 11px; min-width: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-panel);
  border-top: 3px solid transparent;
}
.clm .clm-fig-top { display: flex; align-items: center; gap: 7px; }
.clm .clm-fig-label {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-foreground); font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clm .clm-fig-figure {
  font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--foreground);
}
.clm .clm-fig-meta { font-size: 11px; color: var(--muted-foreground); line-height: 1.35; }
.clm button.clm-fig { cursor: pointer; font: inherit; width: 100%; transition: box-shadow .12s ease, border-color .12s ease; }
.clm button.clm-fig:hover { box-shadow: var(--shadow-raised); border-color: var(--area-line); }
.clm button.clm-fig:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .clm button.clm-fig { transition: none; } }

.clm .clm-fig[data-tone="danger"]  { border-top-color: var(--destructive); }
.clm .clm-fig[data-tone="warning"] { border-top-color: var(--warning); }
.clm .clm-fig[data-tone="success"] { border-top-color: var(--success); }
.clm .clm-fig[data-tone="danger"]  .clm-fig-figure { color: var(--destructive); }
.clm .clm-fig[data-tone="warning"] .clm-fig-figure { color: var(--warning); }
.clm .clm-fig[data-tone="success"] .clm-fig-figure { color: var(--success); }
.clm .clm-fig[data-tone="danger"]  .clm-chip { background: var(--destructive-soft); color: var(--destructive); border-color: var(--destructive); }
.clm .clm-fig[data-tone="warning"] .clm-chip { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.clm .clm-fig[data-tone="success"] .clm-chip { background: var(--success-soft); color: var(--success); border-color: var(--success); }

/* --------------------------------------------------------------- panel -- */

.clm .clm-panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-panel); overflow: hidden;
}
.clm .clm-panel-lead { border-left: 3px solid var(--area); }
.clm .clm-panel-head {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 10px 13px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.clm .clm-panel-headtext { min-width: 0; display: flex; align-items: center; gap: 10px; }
.clm .clm-panel-title { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.008em; }
.clm .clm-panel-sub { margin: 1px 0 0; font-size: 11.5px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; }
.clm .clm-panel-body { padding: 13px; }
.clm .clm-panel-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; padding: 9px 13px; border-top: 1px solid var(--border);
  background: var(--surface); font-size: 11.5px; color: var(--muted-foreground);
}

.clm .clm-sub { padding: 13px 0; border-top: 1px solid var(--border); }
.clm .clm-sub:first-child { border-top: 0; padding-top: 0; }
.clm .clm-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.clm .clm-sub-title { margin: 0; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.clm .clm-sub-note { font-size: 11px; color: var(--muted-foreground); }

/* ----------------------------------------------------------------- AI -- */

.clm .clm-ai {
  background: linear-gradient(180deg, var(--a-ai-soft), var(--card) 70%);
  border: 1px solid var(--a-ai-line); border-radius: var(--r-lg); overflow: hidden;
}
.clm .clm-ai-head { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-bottom: 1px solid var(--a-ai-line); }
.clm .clm-ai-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 8px; background: var(--a-ai); color: var(--on-strong);
}
.clm .clm-ai-title { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--a-ai-strong); flex: 1; min-width: 0; }
/* Screens pass a sentence here, not a word, so it has to wrap. nowrap made
   a 353px badge sit inside a 320px column. */
.clm .clm-ai-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 10px; border: 1px solid var(--a-ai-line);
  background: var(--card); color: var(--a-ai-strong);
  line-height: 1.35; max-width: 28ch; text-align: right;
}
@media (max-width: 560px) {
  .clm .clm-ai-head { flex-wrap: wrap; }
  .clm .clm-ai-badge { max-width: 100%; text-align: left; }
}
.clm .clm-ai-body { padding: 12px 13px; font-size: 12.5px; line-height: 1.55; }
.clm .clm-ai-acts { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 13px 12px; }
@media (max-width: 420px) { .clm .clm-ai-acts .btn { flex: 1 1 100%; justify-content: center; } }

.clm .clm-prop {
  border: 1px solid var(--a-ai-line); border-left: 3px solid var(--a-ai);
  border-radius: var(--r-md); background: var(--card); overflow: hidden;
}
.clm .clm-prop + .clm-prop { margin-top: 8px; }
.clm .clm-prop-head { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; }
.clm .clm-prop-main { flex: 1; min-width: 0; }
.clm .clm-prop-title { font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.clm .clm-prop-sub { font-size: 11.5px; color: var(--muted-foreground); margin-top: 2px; line-height: 1.45; }
.clm .clm-conf {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  border: 1px solid; white-space: nowrap;
}
.clm .clm-conf-high { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.clm .clm-conf-med  { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.clm .clm-conf-low  { color: var(--destructive); border-color: var(--destructive); background: var(--destructive-soft); }
.clm .clm-prop-cite {
  font-size: 11.5px; line-height: 1.55; padding: 8px 10px; margin: 0 12px 10px;
  border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border);
  color: var(--muted-foreground);
}
.clm .clm-prop-cite b { color: var(--foreground); font-weight: 650; }
.clm .clm-prop-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 11px; }
.clm .clm-prop-decided { padding: 8px 12px; font-size: 11.5px; font-weight: 650; border-top: 1px solid var(--border); background: var(--surface); }
@media (max-width: 420px) { .clm .clm-prop-acts .btn { flex: 1 1 calc(50% - 3px); justify-content: center; } }

.clm .btn-ai-draft { background: var(--a-ai); color: var(--on-strong); border: 1px solid var(--a-ai); }
.clm .btn-ai-draft:hover { background: var(--a-ai-strong); border-color: var(--a-ai-strong); color: var(--on-strong); }

/* ------------------------------------------------------------- notice -- */

.clm .clm-notice { display: flex; gap: 11px; padding: 12px 14px; border: 1px solid; border-left-width: 3px; border-radius: var(--r-lg); }
.clm .clm-notice-ico { flex: none; margin-top: 1px; }
.clm .clm-notice-body { min-width: 0; flex: 1; }
.clm .clm-notice-title { margin: 0; font-size: 13px; font-weight: 700; }
.clm .clm-notice-text { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; }
.clm .clm-notice-acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
@media (max-width: 420px) { .clm .clm-notice-acts .btn { flex: 1 1 100%; justify-content: center; } }
.clm .clm-notice-danger  { border-color: var(--destructive); background: var(--destructive-soft); }
.clm .clm-notice-danger  .clm-notice-ico, .clm .clm-notice-danger .clm-notice-title { color: var(--destructive); }
.clm .clm-notice-warning { border-color: var(--warning); background: var(--warning-soft); }
.clm .clm-notice-warning .clm-notice-ico, .clm .clm-notice-warning .clm-notice-title { color: var(--warning); }
.clm .clm-notice-success { border-color: var(--success); background: var(--success-soft); }
.clm .clm-notice-success .clm-notice-ico, .clm .clm-notice-success .clm-notice-title { color: var(--success); }
.clm .clm-notice-info    { border-color: var(--info); background: var(--info-soft); }
.clm .clm-notice-info    .clm-notice-ico, .clm .clm-notice-info .clm-notice-title { color: var(--info); }
.clm .clm-notice-ai      { border-color: var(--a-ai-line); background: var(--a-ai-soft); }
.clm .clm-notice-ai      .clm-notice-ico, .clm .clm-notice-ai .clm-notice-title { color: var(--a-ai-strong); }

/* --------------------------------------------------------------- flag -- */

.clm .clm-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  border: 1px solid; white-space: nowrap;
}
.clm .clm-flag-danger  { color: var(--destructive); border-color: var(--destructive); background: var(--destructive-soft); }
.clm .clm-flag-warning { color: var(--warning);     border-color: var(--warning);     background: var(--warning-soft); }
.clm .clm-flag-success { color: var(--success);     border-color: var(--success);     background: var(--success-soft); }
.clm .clm-flag-info    { color: var(--info);        border-color: var(--info);        background: var(--info-soft); }
.clm .clm-flag-ai      { color: var(--a-ai-strong); border-color: var(--a-ai-line);   background: var(--a-ai-soft); }
.clm .clm-flag-area    { color: var(--area);        border-color: var(--area-line);   background: var(--area-soft); }
.clm .clm-flag-neutral { color: var(--muted-foreground); border-color: var(--border); background: var(--secondary); }
.clm .clm-flagrow { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------------------------------------------------------- grid -- */

.clm .clm-cols { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .clm .clm-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clm .clm-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clm .clm-cols-21 { grid-template-columns: 2fr 1fr; }
  .clm .clm-cols-12 { grid-template-columns: 1fr 2fr; }
}
@media (min-width: 640px) and (max-width: 899px) { .clm .clm-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------- facts list -- */

.clm .clm-facts { display: grid; gap: 0; margin: 0; }
@media (min-width: 640px)  { .clm .clm-facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@media (min-width: 1024px) { .clm .clm-facts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } }
.clm .clm-fact { display: flex; gap: 14px; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--border); min-width: 0; }
.clm .clm-fact:last-child { border-bottom: 0; }
.clm .clm-fact dt { font-size: 12px; color: var(--muted-foreground); flex: none; max-width: 52%; }
.clm .clm-fact dd { margin: 0; font-size: 12.5px; font-weight: 650; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.clm .clm-fact dd.mono { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- table -- */

.clm .clm-tbl td.wrap { white-space: normal; line-height: 1.45; }
.clm .clm-row-go { cursor: pointer; }
.clm .clm-row-go:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm table.tbl thead th { background: var(--surface); }

/* -------------------------------------------------------------- queue -- */

.clm .clm-queue { display: flex; flex-direction: column; }
.clm .clm-qrow { display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px; border-top: 1px solid var(--border); cursor: pointer; position: relative; }
.clm .clm-queue > .clm-qrow:first-child { border-top: 0; }
.clm .clm-qrow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.clm .clm-qrow[data-tone="danger"]::before  { background: var(--destructive); }
.clm .clm-qrow[data-tone="warning"]::before { background: var(--warning); }
.clm .clm-qrow[data-tone="success"]::before { background: var(--success); }
.clm .clm-qrow:hover { background: var(--secondary); }
.clm .clm-qrow:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .clm-qrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clm .clm-qrow-title { font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.clm .clm-qrow-ref { font-size: 10.5px; }
.clm .clm-qrow-sub { font-size: 11.5px; color: var(--muted-foreground); line-height: 1.45; }
.clm .clm-qrow-why { font-size: 11.5px; color: var(--muted-foreground); font-style: italic; line-height: 1.45; }
.clm .clm-qrow-side { display: flex; align-items: center; gap: 9px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.clm .clm-qrow-amt { font-size: 12.5px; font-weight: 700; }
.clm .clm-qrow-age { font-size: 11px; color: var(--muted-foreground); min-width: 60px; text-align: right; }
.clm .clm-qrow-acts { display: flex; gap: 6px; flex: none; }
@media (max-width: 767px) {
  .clm .clm-qrow { flex-wrap: wrap; }
  .clm .clm-qrow-side { width: 100%; padding-left: 33px; justify-content: flex-start; }
  .clm .clm-qrow-age { min-width: 0; text-align: left; }
  .clm .clm-qrow-acts { width: 100%; padding-left: 33px; }
  .clm .clm-qrow-acts .btn { flex: 1; justify-content: center; min-height: 40px; }
}

/* -------------------------------------------------------------- meter -- */

.clm .clm-meter { display: flex; flex-direction: column; gap: 5px; padding: 6px 0; }
.clm .clm-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.clm .clm-meter-label { font-size: 12px; min-width: 0; }
.clm .clm-meter-val { font-size: 12.5px; font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.clm .clm-meter-track { height: 8px; border-radius: 5px; background: var(--muted); overflow: hidden; }
.clm .clm-meter-fill { height: 100%; border-radius: 5px; background: var(--area); }
.clm .clm-meter-fill.is-success { background: var(--success); }
.clm .clm-meter-fill.is-warning { background: var(--warning); }
.clm .clm-meter-fill.is-danger  { background: var(--destructive); }
.clm .clm-meter-fill.is-info    { background: var(--info); }
.clm .clm-meter-note { margin: 1px 0 0; font-size: 11px; color: var(--muted-foreground); }

/* --------------------------------------------------------------- bars -- */

.clm .clm-bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 18px; }
.clm .clm-bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.clm .clm-bar { width: 100%; max-width: 44px; border-radius: 4px 4px 0 0; min-height: 3px; background: var(--c1); }
.clm .clm-bar-col:nth-child(6n+2) .clm-bar { background: var(--c2); }
.clm .clm-bar-col:nth-child(6n+3) .clm-bar { background: var(--c3); }
.clm .clm-bar-col:nth-child(6n+4) .clm-bar { background: var(--c4); }
.clm .clm-bar-col:nth-child(6n+5) .clm-bar { background: var(--c5); }
.clm .clm-bar-col:nth-child(6n+6) .clm-bar { background: var(--c6); }
.clm .clm-bar.is-danger  { background: var(--destructive); }
.clm .clm-bar.is-warning { background: var(--warning); }
.clm .clm-bar.is-success { background: var(--success); }
.clm .clm-bar-val { font-size: 10.5px; font-weight: 700; order: -1; font-variant-numeric: tabular-nums; }
.clm .clm-bar-lab { font-size: 10px; color: var(--muted-foreground); text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
@media (max-width: 520px) { .clm .clm-bars { height: 136px; gap: 3px; } }

.clm .clm-donut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.clm .clm-legend { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 140px; }
.clm .clm-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.clm .clm-legend-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.clm .clm-legend-v { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ two up --- */

.clm .clm-two { display: grid; gap: 10px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) {
  .clm .clm-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .clm .clm-two-b { position: sticky; top: calc(var(--topbar-h) + 10px); }
}
@media (min-width: 1600px) { .clm .clm-two { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.clm .clm-doc { font-size: 12.5px; line-height: 1.68; max-height: 68vh; overflow-y: auto; padding: 16px 18px; background: var(--card); }
.clm .clm-doc h3 { margin: 16px 0 5px; font-size: 13px; font-weight: 700; }
.clm .clm-doc h3:first-child { margin-top: 0; }
.clm .clm-doc p { margin: 0 0 9px; }
.clm .clm-doc mark { background: var(--warning-soft); color: var(--foreground); border-bottom: 2px solid var(--warning); padding: 1px 0; border-radius: 2px; }
.clm .clm-doc-title { text-align: center; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.clm .clm-doc-sub { text-align: center; font-size: 11.5px; color: var(--muted-foreground); margin-bottom: 14px; }
@media (max-width: 1023px) { .clm .clm-doc { max-height: 400px; } }

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

.clm .clm-find { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.clm .clm-find + .clm-find { margin-top: 8px; }
.clm .clm-find.on { border-color: var(--area); box-shadow: 0 0 0 1px var(--area); }
.clm .clm-find-btn { display: flex; gap: 10px; width: 100%; text-align: left; padding: 11px 13px; background: none; border: 0; cursor: pointer; font: inherit; align-items: flex-start; }
.clm .clm-find-btn:hover { background: var(--secondary); }
.clm .clm-find-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .clm-find-sev { flex: none; width: 4px; align-self: stretch; border-radius: 2px; }
.clm .clm-find-sev.is-critical { background: var(--destructive); }
.clm .clm-find-sev.is-high     { background: oklch(0.60 0.16 40); }
.clm .clm-find-sev.is-medium   { background: var(--warning); }
.clm .clm-find-sev.is-low      { background: var(--info); }
.clm .clm-find-main { flex: 1; min-width: 0; }
.clm .clm-find-top { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; }
.clm .clm-find-title { font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.clm .clm-find-sub { font-size: 11.5px; color: var(--muted-foreground); line-height: 1.5; margin-top: 3px; }
.clm .clm-find-body { padding: 0 13px 13px; border-top: 1px solid var(--border); }
.clm .clm-find-lang { font-size: 12px; line-height: 1.6; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); margin: 8px 0; }
.clm .clm-find-lang.is-preferred { border-left: 3px solid var(--success); background: var(--success-soft); }
.clm .clm-find-lang.is-fallback  { border-left: 3px solid var(--warning); background: var(--warning-soft); }
.clm .clm-find-lang.is-drafted   { border-left: 3px solid var(--destructive); background: var(--destructive-soft); }
.clm .clm-find-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
@media (max-width: 520px) { .clm .clm-find-acts .btn { flex: 1 1 calc(50% - 3px); justify-content: center; } }

/* --------------------------------------------------------- disclosure -- */

.clm .clm-reveal { border-top: 1px solid var(--border); }
.clm .clm-reveal:first-child { border-top: 0; }
.clm .clm-reveal-sum { display: flex; align-items: center; gap: 9px; padding: 10px 2px; cursor: pointer; font-size: 12.5px; font-weight: 650; list-style: none; min-height: 42px; }
.clm .clm-reveal-sum::-webkit-details-marker { display: none; }
.clm .clm-reveal-sum:hover { color: var(--area); }
.clm .clm-reveal-sum:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--r-sm); }
.clm .clm-reveal-chev { flex: none; color: var(--muted-foreground); transition: transform .14s ease; display: inline-flex; }
.clm .clm-reveal[open] > .clm-reveal-sum > .clm-reveal-chev { transform: rotate(90deg); }
.clm .clm-reveal-meta { margin-left: auto; font-size: 11px; color: var(--muted-foreground); font-weight: 500; }
.clm .clm-reveal-body { padding: 0 2px 12px; font-size: 12.5px; line-height: 1.6; color: var(--muted-foreground); }
@media (prefers-reduced-motion: reduce) { .clm .clm-reveal-chev { transition: none; } }

/* -------------------------------------------------------------- steps -- */

.clm .clm-steps { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; scrollbar-width: none; }
.clm .clm-steps::-webkit-scrollbar { display: none; }
.clm .clm-step { display: flex; gap: 9px; align-items: flex-start; padding: 9px 12px 9px 0; position: relative; }
.clm .clm-step::after { content: ''; position: absolute; left: 11px; top: 30px; bottom: -2px; width: 1px; background: var(--border); }
.clm .clm-step:last-child::after { display: none; }
@media (min-width: 640px) {
  .clm .clm-steps { flex-direction: row; overflow-x: auto; }
  .clm .clm-step { flex: 1; min-width: 128px; }
  .clm .clm-step::after { left: 30px; top: 20px; right: 8px; bottom: auto; width: auto; height: 1px; }
}
.clm .clm-step-dot { flex: none; width: 23px; height: 23px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); z-index: 1; }
.clm .clm-step.is-done .clm-step-dot { background: var(--success); border-color: var(--success); color: var(--on-strong); }
.clm .clm-step.is-now  .clm-step-dot { background: var(--area); border-color: var(--area); color: var(--on-strong); }
.clm .clm-step-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.clm .clm-step-name { font-size: 12px; font-weight: 650; line-height: 1.3; }
.clm .clm-step.is-todo .clm-step-name { color: var(--muted-foreground); }
.clm .clm-step-state { font-size: 10.5px; color: var(--muted-foreground); }
.clm .clm-step.is-now .clm-step-state { color: var(--area); font-weight: 650; }

/* ---------------------------------------------------------- authority -- */

.clm .clm-auth { display: grid; gap: 14px; }
@media (min-width: 640px) { .clm .clm-auth { grid-template-columns: 1fr 1fr; } }
.clm .clm-auth-h { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--success); }
.clm .clm-auth-h-no { color: var(--destructive); }
.clm .clm-auth-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.clm .clm-auth-list li { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; line-height: 1.45; }
.clm .clm-auth-list li > svg { flex: none; margin-top: 2px; color: var(--success); }
.clm .clm-auth-no li > svg { color: var(--destructive); }

.clm .clm-plan-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.clm .clm-plan-lines li { font-size: 12.5px; line-height: 1.5; padding-left: 13px; position: relative; }
.clm .clm-plan-lines li::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--area); }

/* ------------------------------------------------------------- people -- */

.clm .clm-av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--secondary); color: var(--muted-foreground); font-size: 9.5px; font-weight: 700; }
.clm .clm-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.clm .clm-who-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clm .clm-cref { font: inherit; font-size: 11px; padding: 2px 7px; min-height: 26px; border: 1px solid var(--border); background: var(--secondary); color: var(--foreground); border-radius: var(--r-sm); cursor: pointer; }
.clm .clm-cref:hover { border-color: var(--area); color: var(--area); }
.clm .clm-cref:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
@media (hover: none) { .clm .clm-cref { min-height: 32px; } }

/* -------------------------------------------------- checklist, element -- */

.clm .clm-check { display: flex; flex-direction: column; }
.clm .clm-check-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.clm .clm-check-row:first-child { border-top: 0; }
.clm .clm-check-mark { flex: none; margin-top: 1px; }
.clm .clm-check-mark.is-done { color: var(--success); }
.clm .clm-check-mark.is-open { color: var(--muted-foreground); }
.clm .clm-check-mark.is-missing { color: var(--destructive); }
.clm .clm-check-text { flex: 1; min-width: 0; }
.clm .clm-check-note { display: block; font-size: 11px; color: var(--muted-foreground); margin-top: 1px; }
.clm .clm-check-state { flex: none; font-size: 10.5px; font-weight: 700; }

.clm .clm-el { display: flex; flex-direction: column; }
.clm .clm-el-row { display: grid; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--border); grid-template-columns: 20px 1fr auto; }
.clm .clm-el-row:first-child { border-top: 0; }
.clm .clm-el-ico { grid-row: span 2; margin-top: 1px; }
.clm .clm-el-ico.is-pass { color: var(--success); }
.clm .clm-el-ico.is-fail { color: var(--destructive); }
.clm .clm-el-name { font-size: 12.5px; font-weight: 650; min-width: 0; }
.clm .clm-el-sev { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.clm .clm-el-sev.is-material { color: var(--destructive); }
.clm .clm-el-sev.is-advisory { color: var(--muted-foreground); }
.clm .clm-el-detail { grid-column: 2 / -1; font-size: 11.5px; color: var(--muted-foreground); line-height: 1.5; }

/* ------------------------------------------------------------- tiles --- */

.clm .clm-tiles { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .clm .clm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .clm .clm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .clm .clm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.clm .clm-tile { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: left; padding: 13px 14px; cursor: pointer; font: inherit; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-panel); min-width: 0; }
.clm .clm-tile:hover { border-color: var(--area-line); box-shadow: var(--shadow-raised); }
.clm .clm-tile:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .clm-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.clm .clm-tile-name { font-size: 13px; font-weight: 700; line-height: 1.3; min-width: 0; }
.clm .clm-tile-fig { font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--area); }
.clm .clm-tile-sub { font-size: 11.5px; color: var(--muted-foreground); }
.clm .clm-tile-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.clm .clm-tile-chip { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border); white-space: nowrap; }

/* --------------------------------------------------------------- tree -- */

.clm .clm-tree { display: flex; flex-direction: column; }
.clm .clm-tree-node { border-top: 1px solid var(--border); }
.clm .clm-tree-node:first-child { border-top: 0; }
.clm .clm-tree-row { display: flex; gap: 10px; align-items: center; padding: 10px 14px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; }
.clm .clm-tree-row:hover { background: var(--secondary); }
.clm .clm-tree-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .clm-tree-row.is-child { padding-left: 42px; position: relative; }
.clm .clm-tree-row.is-child::before { content: ''; position: absolute; left: 24px; top: 0; bottom: 50%; width: 1px; background: var(--area-line); }
.clm .clm-tree-row.is-child::after  { content: ''; position: absolute; left: 24px; top: 50%; width: 10px; height: 1px; background: var(--area-line); }
@media (max-width: 520px) {
  .clm .clm-tree-row.is-child { padding-left: 32px; }
  .clm .clm-tree-row.is-child::before, .clm .clm-tree-row.is-child::after { left: 16px; }
}
.clm .clm-tree-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.clm .clm-tree-name { font-size: 12.5px; font-weight: 650; }
.clm .clm-tree-sub { font-size: 11px; color: var(--muted-foreground); }
.clm .clm-tree-side { flex: none; display: flex; align-items: center; gap: 10px; }
@media (max-width: 640px) { .clm .clm-tree-side .clm-tree-val { display: none; } }

/* ------------------------------------------------------------- empty --- */

.clm .clm-empty { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 30px 20px; text-align: center; }
.clm .clm-empty-ico { color: var(--muted-foreground); opacity: .5; }
.clm .clm-empty-title { margin: 0; font-size: 13px; font-weight: 650; }
.clm .clm-empty-body { margin: 0; font-size: 12px; color: var(--muted-foreground); max-width: 46ch; }

/* -------------------------------------------------------------- toast -- */

.clm-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 90; display: flex; align-items: flex-start; gap: 9px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 11px 16px; border-radius: var(--r-lg);
  background: var(--navy); color: var(--navy-foreground);
  box-shadow: var(--shadow-pop); font-size: 12.5px; line-height: 1.45;
}
.clm-toast-ico { flex: none; color: oklch(0.82 0.14 155); margin-top: 1px; }
@media (max-width: 767px) { .clm-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottomnav-h) + 12px); } }

/* -------------------------------------------------- 320px and phones --- */

@media (max-width: 380px) {
  .clm .btn { white-space: normal; text-align: left; line-height: 1.35; height: auto; min-height: 36px; padding-block: 8px; }
  .clm .clm-hd-acts, .clm .clm-ws-acts, .clm .clm-notice-acts,
  .clm .clm-find-acts, .clm .clm-prop-acts, .clm .clm-ai-acts { width: 100%; }
  .clm .clm-hd-acts > .btn, .clm .clm-ws-acts > .btn, .clm .clm-notice-acts > .btn,
  .clm .clm-find-acts > .btn, .clm .clm-prop-acts > .btn,
  .clm .clm-ai-acts > .btn { flex: 1 1 100%; justify-content: flex-start; }
  .clm .clm-figs { grid-template-columns: 1fr; }
}


/* -------------------------------------------- Contract Intelligence --- */
/* A conversation, not a hero. A list of conversations beside a thread with
   the composer pinned under it.

   The list is a <details>. On a phone it is a drawer the person opens; from
   1024px up it is always open and its control is hidden, so one piece of
   markup serves both without the list ever being display:none. A sidebar
   that disappears on a small screen takes every past conversation with it,
   which is the failure this avoids.

   Area on this screen is `ai`, so var(--area) is the reserved cyan and no
   rule here names a color literal. */

.clm .clm-ci { display: grid; gap: 10px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1024px) {
  .clm .clm-ci { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
}

.clm .clm-ci-nav {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.clm .clm-ci-navsum {
  display: flex; align-items: center; gap: 9px; min-height: 46px;
  padding: 8px 12px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 700;
}
.clm .clm-ci-navsum::-webkit-details-marker { display: none; }
.clm .clm-ci-navsum:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .clm-ci-navsum-t { flex: 1; min-width: 0; }
.clm .clm-ci-navsum-c { flex: none; color: var(--muted-foreground); display: inline-flex; transition: transform .14s ease; }
.clm .clm-ci-nav[open] .clm-ci-navsum-c { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .clm .clm-ci-navsum-c { transition: none; } }

.clm .clm-ci-navbody { padding: 10px 10px 12px; }

/* From 1024px the list is always open, whether or not the element carries
   the open attribute, and its control is hidden. */
@media (min-width: 1024px) {
  .clm .clm-ci-navsum { display: none; }
  .clm .clm-ci-nav:not([open]) > .clm-ci-navbody { display: block; }
  .clm .clm-ci-nav::details-content { content-visibility: visible; block-size: auto; }
  .clm .clm-ci-navbody { max-height: min(72vh, 100%); overflow-y: auto; scrollbar-width: thin; }
}

.clm .clm-ci-navtop { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.clm .clm-ci-navtop .btn { width: 100%; justify-content: center; }
.clm .clm-ci-navtop .filter-input { width: 100%; }

.clm .clm-ci-group {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted-foreground); margin: 12px 0 5px;
}
.clm .clm-ci-group:first-child { margin-top: 0; }
.clm .clm-ci-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }

.clm .clm-ci-item {
  position: relative; display: flex; flex-direction: column; gap: 1px;
  width: 100%; text-align: left; padding: 8px 10px; min-height: 44px;
  background: none; border: 0; cursor: pointer; font: inherit; border-radius: var(--r-md);
}
.clm .clm-ci-item:hover { background: var(--area-soft); }
.clm .clm-ci-item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
/* Current is marked by an edge and a weight as well as a color. */
.clm .clm-ci-item[aria-current="page"] { background: var(--area-soft); padding-inline-start: 13px; }
.clm .clm-ci-item[aria-current="page"]::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 2px; background: var(--area);
}
.clm .clm-ci-item[aria-current="page"] .clm-ci-item-t { color: var(--area); font-weight: 700; }
.clm .clm-ci-item-t {
  font-size: 12.5px; font-weight: 650; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clm .clm-ci-item-m { font-size: 11px; color: var(--muted-foreground); }

.clm .clm-ci-main {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
@media (min-width: 1024px) {
  .clm .clm-ci-main { height: min(72vh, 760px); min-height: 520px; }
}
.clm .clm-ci-head {
  flex: none; padding: 11px 14px; border-bottom: 1px solid var(--border);
  background: var(--area-soft);
}
.clm .clm-ci-h { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }

.clm .clm-ci-thread { flex: 1; min-height: 0; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) { .clm .clm-ci-thread { overflow-y: auto; } }

/* A turn differs by alignment, border and ground, never by color alone,
   and each carries a written label above it. */
.clm .clm-ci-turn { max-width: 68ch; border-radius: var(--r-lg); }
.clm .clm-ci-turn.is-user {
  margin-inline-start: auto; background: var(--secondary);
  border: 1px solid var(--border); border-end-end-radius: var(--r-sm);
}
.clm .clm-ci-turn.is-ai {
  margin-inline-end: auto; background: var(--card);
  border: 1px solid var(--a-ai-line); border-inline-start: 3px solid var(--a-ai);
}
@media (max-width: 560px) { .clm .clm-ci-turn { max-width: 100%; margin-inline: 0; } }

.clm .clm-ci-who {
  display: flex; align-items: center; gap: 7px; margin-bottom: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .clm-ci-who.is-user { justify-content: flex-end; }
.clm .clm-ci-text { padding: 10px 13px; font-size: 12.5px; line-height: 1.6; }
.clm .clm-ci-text p { margin: 0; }
.clm .clm-ci-text p + p { margin-top: 8px; }
.clm .clm-ci-rows { margin: 8px 13px 12px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }

.clm .clm-ci-composer {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px; row-gap: 6px; padding: 11px 14px;
  border-top: 1px solid var(--border); background: var(--surface);
}
@media (min-width: 1024px) { .clm .clm-ci-composer { position: sticky; bottom: 0; } }
@media (max-width: 420px) {
  .clm .clm-ci-composer { grid-template-columns: 1fr; }
  .clm .clm-ci-composer .btn { width: 100%; justify-content: center; }
}
.clm .clm-ci-ta {
  width: 100%; min-height: 44px; resize: vertical;
  font: inherit; font-size: 12.5px; line-height: 1.5; padding: 9px 11px;
  border: 1px solid var(--input); border-radius: var(--r-md);
  background: var(--card); color: var(--foreground);
}
.clm .clm-ci-ta:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.clm .clm-ci-verify { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.45; color: var(--muted-foreground); }

.clm .clm-ci-welcome { display: flex; flex-direction: column; gap: 10px; padding: 20px 16px; max-width: 62ch; margin-inline: auto; }
.clm .clm-ci-suggs { display: grid; gap: 7px; grid-template-columns: 1fr; }
@media (min-width: 1280px) { .clm .clm-ci-suggs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.clm .clm-ci-sugg {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; min-height: 52px; cursor: pointer; font: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.clm .clm-ci-sugg:hover { border-color: var(--area-line); box-shadow: var(--shadow-raised); }
.clm .clm-ci-sugg:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .clm-ci-sugg-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; line-height: 1.4; }

/* ----------------------------------------------------------- printing -- */

@media print {
  .clm .clm-tabs, .clm .clm-tabpick, .clm .clm-modes, .clm .clm-ws-acts,
  .clm .clm-back, .clm .clm-hd-acts, .clm .toolbar { display: none; }
  .clm .clm-two { grid-template-columns: 1fr; }
  .clm .clm-doc { max-height: none; overflow: visible; }
  .clm .clm-reveal-body { display: block; }
  .clm .clm-panel { break-inside: avoid; }
}