/* ==========================================================================
   Contracts (CLM) — Create contract

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

   THE FRAME
   A rail and a panel. On a wide window the rail is a column of six steps
   down the left, each saying what it is for and whether it has been
   reached. Below 1000px the rail becomes a bar: the step you are on, a
   meter, and the six as a scrolling strip. Neither state hides where you
   are, because a wizard that does is a wizard people abandon.

   THE DOCUMENT
   Step five is the builder beside the document it produces. Below 1180px
   the document moves under the builder rather than being squeezed: a legal
   sentence in a 300px column is not a smaller version of the same thing.

   CONTRAST
   No text sits on a saturated fill. A step marker, a required mark and an
   error all take an ink token defined in contract.css, which clears 4.5:1
   in both themes on one rule.
   ========================================================================== */

.clm .cc { display: flex; flex-direction: column; gap: 0; }

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

.clm .cc-head { background: var(--card); border-bottom: 1px solid var(--border); padding-block: 11px 12px; margin-top: -16px; }
.clm .cc-head-top { display: flex; align-items: flex-start; gap: 11px; flex-wrap: wrap; }
.clm .cc-head-top > .clm-icobtn { flex: none; margin-top: 2px; }
.clm .cc-head-tx { flex: 1 1 280px; min-width: 0; }
.clm .cc-head-t { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
@media (min-width: 900px) { .clm .cc-head-t { font-size: 22px; } }
.clm .cc-head-s { margin: 3px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted-foreground); }
.clm .cc-head-acts { display: flex; align-items: center; gap: 7px; flex: none; flex-wrap: wrap; }
@media (max-width: 640px) {
  .clm .cc-head-acts { width: 100%; }
  .clm .cc-head-acts > .btn { flex: 1 1 auto; justify-content: center; }
}

/* =============================================================== start === */

.clm .cc-start { padding: 26px 0 6px; max-width: 1100px; margin-inline: auto; }
.clm .cc-start-t { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.clm .cc-start-s { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-foreground); }
.clm .cc-start-g { display: grid; gap: 11px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 900px) { .clm .cc-start-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.clm .cc-start-c.is-ai {
  background: linear-gradient(180deg, color-mix(in oklab, var(--a-ai) 7%, var(--card)), var(--card) 62%);
  border-color: color-mix(in oklab, var(--a-ai) 26%, var(--border));
}
.clm .cc-start-c.is-ai > .clm-chip { color: var(--a-ai-strong); border-color: color-mix(in oklab, var(--a-ai) 30%, var(--border)); }
.clm .cc-start-c.is-ai:hover { border-color: var(--a-ai-strong); }
.clm .cc-start-c {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
  gap: 4px 12px; align-items: start; text-align: left; width: 100%;
  padding: 16px 15px; cursor: pointer; font: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.clm .cc-start-c:hover { border-color: var(--area); box-shadow: var(--shadow-raised); }
.clm .cc-start-c:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .cc-start-c > .clm-chip { grid-row: 1 / span 2; }
.clm .cc-start-ct { grid-column: 2; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.clm .cc-start-cs { grid-column: 2; font-size: 12px; line-height: 1.6; color: var(--muted-foreground); }
.clm .cc-start-go { grid-column: 3; grid-row: 1; color: var(--muted-foreground); }

/* ============================================================= stepper === */

.clm .cc-steps {
  margin-top: 14px; padding: 13px 14px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.clm .cc-steps-l {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0;
}
.clm .cc-step { position: relative; min-width: 0; }

/* The connector carries the state of the step behind it, so the run of
   green stops exactly where the work stopped. */
.clm .cc-step::before {
  content: ''; position: absolute; top: 15px; right: calc(50% + 20px); left: calc(-50% + 20px);
  height: 2px; border-radius: 2px; background: var(--border);
}
.clm .cc-step:first-child::before { display: none; }
.clm .cc-step[data-state="done"]::before,
.clm .cc-step[data-state="live"]::before { background: var(--success); }

.clm .cc-step-b {
  display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%;
  padding: 1px 6px 4px; border: 0; border-radius: var(--r-md);
  background: none; font: inherit; text-align: center; cursor: pointer; color: var(--foreground);
}
.clm .cc-step-b.is-ahead { cursor: default; }
.clm .cc-step-b:not(.is-ahead):hover .cc-step-n { border-color: var(--area); }
.clm .cc-step-b:not(.is-ahead):hover .cc-step-l { color: var(--area); }
.clm .cc-step-b:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

.clm .cc-step-n {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%; font-size: 13px; font-weight: 700;
  background: var(--card); border: 2px solid var(--border); color: var(--muted-foreground);
  font-variant-numeric: tabular-nums; position: relative; z-index: 1;
}
.clm .cc-step[data-state="done"] .cc-step-n {
  background: color-mix(in oklab, var(--success) 15%, var(--card));
  border-color: var(--success); color: var(--ink-ok);
}
.clm .cc-step[data-state="live"] .cc-step-n {
  background: var(--area); border-color: var(--area); color: var(--card);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--area) 16%, transparent);
}
.clm .cc-step-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; width: 100%; }
.clm .cc-step-l { font-size: 12px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.clm .cc-step[data-state="live"] .cc-step-l { font-weight: 700; color: var(--area); }
.clm .cc-step[data-state="ahead"] .cc-step-l { color: var(--muted-foreground); }
.clm .cc-step-h { font-size: 10.5px; line-height: 1.4; color: var(--muted-foreground); }
@media (max-width: 1200px) { .clm .cc-step-h { display: none; } }

/* The compact readout is the stepper on a narrow window and redundant on a
   wide one, where the labels say the same thing. */
.clm .cc-steps-now { display: none; align-items: baseline; gap: 8px; margin: 11px 0 0; }
.clm .cc-steps-nowl {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-foreground); flex: none;
}
.clm .cc-steps-nowt { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; min-width: 0; }
.clm .cc-steps-meter { display: none; height: 5px; margin-top: 7px; border-radius: 999px; background: var(--secondary); overflow: hidden; }
.clm .cc-steps-fill { display: block; height: 100%; border-radius: 999px; background: var(--area); }

/* Six labels cannot share a line below 900px. The nodes stay, the labels
   go, and the one that matters is spelled out under them. A screen reader
   still gets every name, because each node carries one. */
@media (max-width: 899px) {
  .clm .cc-steps-now, .clm .cc-steps-meter { display: flex; }
  .clm .cc-steps-meter { display: block; }
  .clm .cc-step-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .clm .cc-step-b { padding: 1px 2px 2px; }
  .clm .cc-step::before { right: calc(50% + 18px); left: calc(-50% + 18px); top: 14px; }
  .clm .cc-step-n { width: 30px; height: 30px; font-size: 12.5px; }
}

/* ================================================================ frame === */

.clm .cc-frame { display: grid; gap: 12px; grid-template-columns: 1fr; padding-top: 12px; }

/* ================================================================= main === */

.clm .cc-main {
  min-width: 0; display: flex; flex-direction: column; gap: 13px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 18px 17px;
}
.clm .cc-head2 { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.clm .cc-head2-tx { flex: 1 1 200px; min-width: 0; }
.clm .cc-head2-t { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.clm .cc-head2-t:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
.clm .cc-head2-s { margin: 2px 0 0; font-size: 12px; color: var(--muted-foreground); }

/* A FORM HAS A MEASURE
   A field that runs the width of a 1920px window is a field nobody can
   scan back along: the label is at one end of the screen and the value is
   at the other. The form is capped, and inside it every field declares how
   many of twelve columns it takes, so a date is short, a title is long and
   the eye has a rhythm to follow instead of a wall.

   Below 900px the twelve become six, so a three column field and a four
   column field both become a half. Below 620px everything is one column,
   because two fields side by side on a phone are two fields nobody can
   read. */

.clm .cc-form { display: flex; flex-direction: column; gap: 4px; max-width: 1180px; }
.clm .cc-wide { display: flex; flex-direction: column; gap: 13px; }

.clm .cc-group { padding: 15px 0 3px; border-top: 1px solid var(--border); }
.clm .cc-group:first-child { padding-top: 2px; border-top: 0; }
.clm .cc-group-h {
  margin: 0 0 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.clm .cc-group-g { display: grid; gap: 14px 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }

.clm .cc-f { min-width: 0; grid-column: span 12; }
@media (min-width: 620px) {
  .clm .cc-s3  { grid-column: span 6; }
  .clm .cc-s4  { grid-column: span 6; }
  .clm .cc-s5  { grid-column: span 6; }
  .clm .cc-s6  { grid-column: span 6; }
  .clm .cc-s8  { grid-column: span 12; }
  .clm .cc-s12 { grid-column: span 12; }
}
@media (min-width: 900px) {
  .clm .cc-s3  { grid-column: span 3; }
  .clm .cc-s4  { grid-column: span 4; }
  .clm .cc-s5  { grid-column: span 5; }
  .clm .cc-s6  { grid-column: span 6; }
  .clm .cc-s8  { grid-column: span 8; }
  .clm .cc-s12 { grid-column: span 12; }
}

/* A control never runs past what its content needs, whatever cell it is
   in. A date is a date wide. */
.clm .cc-f .clm-in[type="date"],
.clm .cc-f .clm-in[type="number"] { max-width: 220px; }
.clm .cc-ta { resize: vertical; min-height: 76px; line-height: 1.55; max-width: 82ch; }
.clm .cc-req { color: var(--ink-danger); font-weight: 700; }
.clm .cc-f.is-bad .clm-in { border-color: var(--destructive); }
.clm .cc-bad { margin: 3px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink-danger); font-weight: 650; }
.clm .cc-filled {
  display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0;
  font-size: 10.5px; line-height: 1.45; color: var(--a-ai-strong);
}
.clm .cc-filled > .ico { flex: none; margin-top: 1px; }

.clm .cc-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.clm .cc-radio {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  padding: 6px 13px 6px 11px; border-radius: var(--r-md); cursor: pointer;
  background: var(--card); border: 1px solid var(--input); font-size: 12.5px;
}
.clm .cc-radio:hover { background: var(--secondary); }
.clm .cc-radio:has(input:checked) {
  border-color: var(--area); background: color-mix(in oklab, var(--area) 7%, var(--card)); font-weight: 650;
}
.clm .cc-radio:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }

.clm .cc-money { display: flex; gap: 7px; max-width: 320px; }
.clm .cc-money > .clm-in:first-child { flex: 1; min-width: 0; }
.clm .cc-cur { flex: none; width: 84px; }

/* ---- the error summary ---- */
.clm .cc-errs {
  padding: 11px 13px; border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--destructive) 8%, var(--card));
  border: 1px solid color-mix(in oklab, var(--destructive) 34%, var(--card));
}
.clm .cc-errs:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .cc-errs-t {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12.5px; font-weight: 700; color: var(--ink-danger);
}
.clm .cc-errs-t > .ico { flex: none; }
.clm .cc-errs-l { margin: 7px 0 0; padding-left: 28px; display: flex; flex-direction: column; gap: 4px; }
.clm .cc-errs-l > li { font-size: 12px; }
.clm .cc-errs-l a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--ink-danger); font-weight: 650; text-underline-offset: 2px;
}
.clm .cc-errs-l a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---- the footer ---- */
.clm .cc-foot {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding-top: 13px; border-top: 1px solid var(--border);
}
.clm .cc-foot-gap { flex: 1; }
@media (max-width: 560px) {
  .clm .cc-foot-gap { display: none; }
  .clm .cc-foot > .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================ step five, the document === */

.clm .cc-split { display: grid; gap: 13px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1180px) {
  .clm .cc-split { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr); }
}
.clm .cc-build { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.clm .cc-build-doc { display: grid; gap: 11px 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .clm .cc-build-doc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.clm .cc-secs-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-top: 3px; }
.clm .cc-secs-h { margin: 0; font-size: 13px; font-weight: 700; }
.clm .cc-secs-n { margin: 0; font-size: 11.5px; color: var(--muted-foreground); }

.clm .cc-secs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.clm .cc-sec { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); }
.clm .cc-sec[data-open="1"] { border-color: var(--area); box-shadow: var(--shadow-raised); }
.clm .cc-sec-head { display: flex; align-items: center; gap: 4px; padding-right: 7px; }
.clm .cc-sec-main {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 46px;
  padding: 8px 4px 8px 11px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.clm .cc-sec-main:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .cc-sec-n {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 7px; font-size: 11.5px; font-weight: 700;
  background: var(--secondary); color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.clm .cc-sec[data-open="1"] .cc-sec-n { background: var(--area); color: var(--card); }
.clm .cc-sec-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }
.clm .cc-sec-c { flex: none; font-size: 11px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.clm .cc-sec-chev { flex: none; color: var(--muted-foreground); }
.clm .cc-sec-acts { display: flex; align-items: center; gap: 1px; flex: none; }
@media (max-width: 520px) {
  .clm .cc-sec-head { flex-wrap: wrap; }
  .clm .cc-sec-acts { width: 100%; justify-content: flex-end; padding: 0 0 7px 11px; }
  .clm .cc-sec-c { display: none; }
}

.clm .cc-sec-body { padding: 0 11px 11px; display: flex; flex-direction: column; gap: 9px; }
.clm .cc-cls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.clm .cc-cl { padding: 9px 11px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.clm .cc-cl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clm .cc-cl-t { font-size: 12.5px; font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.clm .cc-cl-code { font-size: 10.5px; color: var(--muted-foreground); }
.clm .cc-cl-head > .clm-icobtn { margin-left: auto; }
.clm .cc-vars { display: grid; gap: 9px 12px; grid-template-columns: 1fr; margin-top: 9px; }
@media (min-width: 620px) { .clm .cc-vars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.clm .cc-cl-none { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--muted-foreground); }
.clm .cc-cl-add {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 38px;
  padding: 8px 12px; border-radius: var(--r-md); cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 650; color: var(--area);
  background: none; border: 1px dashed var(--input);
}
.clm .cc-cl-add:hover { background: var(--secondary); border-color: var(--area); }
.clm .cc-cl-add:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---- the preview ---- */
.clm .cc-preview {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 1180px) { .clm .cc-preview { position: sticky; top: calc(var(--topbar-h) + 12px); } }
.clm .cc-preview-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.clm .cc-preview-t { display: inline-flex; align-items: center; gap: 7px; flex: 1; font-size: 11.5px; font-weight: 700; }
.clm .cc-preview-t > .ico { color: var(--muted-foreground); }
.clm .cc-preview-live {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; 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 .cc-preview-body {
  padding: 16px 18px; overflow: auto; max-height: 62vh; min-height: 260px;
  background: var(--card);
}
.clm .cc-preview-body.is-sum { max-height: 56vh; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.clm .cc-preview-body:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.clm .cc-doc-run {
  display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground);
}
.clm .cc-doc-head {
  margin: 0 0 6px; font-size: 13px; font-weight: 700; text-align: center;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px;
}
.clm .cc-doc-sub { margin: 0 0 12px; font-size: 11.5px; text-align: center; color: var(--muted-foreground); }
.clm .cc-doc-h2 { margin: 15px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.clm .cc-doc-h3 { margin: 10px 0 4px; font-size: 11.5px; font-weight: 700; }
.clm .cc-doc-p { margin: 0 0 8px; font-size: 11.5px; line-height: 1.7; text-align: justify; hyphens: auto; }
.clm .cc-doc-empty { margin: 0 0 8px; font-size: 11px; font-style: italic; color: var(--muted-foreground); }
/* A filled variable reads as part of the sentence and is still visibly a
   variable. An unfilled one is a rule the eye catches, never a silent gap. */
.clm .cc-doc-v {
  font-weight: 700; padding: 0 2px; border-radius: 3px;
  background: color-mix(in oklab, var(--success) 15%, var(--card));
}
.clm .cc-doc-blank {
  display: inline-block; min-width: 82px; font-weight: 700; letter-spacing: .08em;
  color: var(--ink-warning); background: color-mix(in oklab, var(--warning) 15%, var(--card));
  border-radius: 3px; padding: 0 3px;
}

/* ============================================================== summary === */

.clm .cc-sum { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px)  { .clm .cc-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .clm .cc-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.clm .cc-sumg {
  min-width: 0; padding: 12px 13px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.clm .cc-sumg-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.clm .cc-sumg-t { margin: 0; flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }

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

.clm .cc-drop {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 13px;
  padding: 15px 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px dashed var(--input);
}
.clm .cc-drop.is-on {
  border-style: solid; border-color: var(--success);
  background: color-mix(in oklab, var(--success) 7%, var(--card));
}
.clm .cc-drop-i {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground);
}
.clm .cc-drop.is-on .cc-drop-i { color: var(--ink-ok); border-color: var(--success); }
.clm .cc-drop-tx { flex: 1 1 180px; min-width: 0; }
.clm .cc-drop-t { margin: 0; font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }
.clm .cc-drop-s { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted-foreground); }
/* The input sits inside its label, so the label is the control, the target
   and the accessible name in one, and nothing has to associate them. The
   input keeps the focus, and lends its ring to the label so a keyboard
   user can see where they are. */
.clm .cc-drop-b { flex: none; cursor: pointer; }
.clm .cc-drop-b:has(.cc-file:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .cc-drop-note {
  display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0;
  font-size: 11px; line-height: 1.55; color: var(--muted-foreground);
}
.clm .cc-drop-note > .ico { flex: none; margin-top: 1px; color: var(--a-ai-strong); }

.clm .cc-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.clm .cc-pick-r {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 11px 12px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--border);
}
.clm .cc-pick-tx { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.clm .cc-pick-t { font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }
.clm .cc-pick-m { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 10.5px; color: var(--muted-foreground); }
.clm .cc-pick-v {
  font-weight: 650; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in oklab, var(--warning) 14%, var(--card)); color: var(--ink-warning);
}
.clm .cc-pick-b { font-size: 11px; line-height: 1.55; color: var(--muted-foreground); }
.clm .cc-pick-on {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 11px; 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));
}