/* ==========================================================================
   Contracts (CLM) — Create with AI

   Loaded after create.css. Everything is scoped under .clm .in so it
   cannot reach any other screen.

   THE FRAME
   Two columns above 1100px: the conversation and its decision log on the
   left, the record and its checks on the right. Below that they stack, the
   record first, because on a phone what the agent produced matters more
   than what you typed to produce it.

   THE BADGES
   Six sources, six tints, and one of them blocks. Each badge is a tint of
   its hue with a darker ink of the same hue for its text, which is the
   rule the rest of this module already follows: a 10px uppercase label set
   in the hue of its own tint fails 1.4.3.

   NOTHING HERE CARRIES MEANING BY COLOUR ALONE. Every badge says its
   source in words, the amber rows carry a callout in words, and the
   counters are labelled.
   ========================================================================== */

.clm .in { --in-gap: 12px; }

/* =============================================================== band === */

.clm .in-band {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 13px; padding: 15px 18px; border-radius: var(--r-lg);
  background: linear-gradient(105deg,
    oklch(0.32 0.11 285) 0%,
    oklch(0.42 0.14 288) 55%,
    oklch(0.50 0.15 292) 100%);
  color: oklch(0.98 0.005 285);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .clm .in-band {
    background: linear-gradient(105deg, oklch(0.26 0.09 285), oklch(0.34 0.12 290));
  }
}
:root[data-theme="dark"] .clm .in-band {
  background: linear-gradient(105deg, oklch(0.26 0.09 285), oklch(0.34 0.12 290));
}

.clm .in-band-ring { position: relative; flex: none; width: 52px; height: 52px; }
.clm .in-band-ring > svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.clm .in-ring-track { fill: none; stroke: oklch(0.98 0.005 285 / 0.24); stroke-width: 4; }
.clm .in-ring-fill {
  fill: none; stroke: oklch(0.98 0.005 285); stroke-width: 4; stroke-linecap: round;
  transition: stroke-dasharray .35s ease;
}
@media (prefers-reduced-motion: reduce) { .clm .in-ring-fill { transition: none; } }
.clm .in-band-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.clm .in-band-tx { flex: 1 1 320px; min-width: 0; }
.clm .in-band-t { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.clm .in-band-s {
  margin: 4px 0 0; font-size: 12px; line-height: 1.55; max-width: 86ch;
  color: oklch(0.98 0.005 285 / 0.88);
}

.clm .in-band-n {
  list-style: none; margin: 0; padding: 0; flex: none;
  display: flex; gap: 20px; flex-wrap: wrap;
}
.clm .in-band-n > li { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.clm .in-band-n b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.clm .in-band-n span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: oklch(0.98 0.005 285 / 0.82);
}
.clm .in-band-n > li[data-tone="eye"] b { color: oklch(0.88 0.15 85); }
.clm .in-band-n > li[data-tone="eye"] span { color: oklch(0.88 0.15 85); }
@media (max-width: 640px) { .clm .in-band-n { gap: 14px; } }

/* ============================================================== split === */

.clm .in-split { display: grid; gap: var(--in-gap); grid-template-columns: 1fr; padding-top: var(--in-gap); }
@media (min-width: 1100px) {
  .clm .in-split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start; }
}
.clm .in-col { min-width: 0; display: flex; flex-direction: column; gap: var(--in-gap); }
/* On a phone what the agent produced matters more than what you typed to
   produce it, so the record comes first. */
@media (max-width: 1099px) {
  .clm .in-col:last-child { order: -1; }
}

.clm .in-panel {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.clm .in-panel-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none;
  padding: 9px 13px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.clm .in-panel-t {
  margin: 0; flex: 1; min-width: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .in-panel-m { flex: none; font-size: 11px; color: var(--muted-foreground); }

/* ======================================================= conversation === */

.clm .in-talk-log {
  flex: 1; min-height: 240px; max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 13px; display: flex; flex-direction: column; gap: 13px;
}
.clm .in-talk-log:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.clm .in-turn { display: flex; flex-direction: column; gap: 4px; max-width: 86%; }
.clm .in-turn.is-you { margin-inline-start: auto; align-items: flex-end; }
.clm .in-turn-w {
  margin: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .in-turn-b {
  margin: 0; padding: 10px 13px; border-radius: var(--r-lg);
  font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere;
}
.clm .in-turn.is-ai .in-turn-b {
  background: color-mix(in oklab, var(--a-ai) 7%, var(--card));
  border: 1px solid color-mix(in oklab, var(--a-ai) 22%, var(--border));
  border-end-start-radius: var(--r-sm);
}
.clm .in-turn.is-you .in-turn-b {
  background: var(--secondary); border: 1px solid var(--border);
  border-end-end-radius: var(--r-sm);
}
.clm .in-turn-b.is-thinking { display: flex; align-items: center; gap: 9px; color: var(--muted-foreground); }
.clm .in-dots { display: inline-flex; gap: 3px; flex: none; }
.clm .in-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--a-ai-strong);
  animation: in-blink 1.2s ease-in-out infinite;
}
.clm .in-dots i:nth-child(2) { animation-delay: .18s; }
.clm .in-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes in-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .clm .in-dots i { animation: none; opacity: .7; } }

.clm .in-ask {
  flex: none; display: flex; flex-direction: column; gap: 7px;
  margin: 0 13px 13px; padding: 10px 11px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--input);
}
.clm .in-ask:focus-within { border-color: var(--area); box-shadow: 0 0 0 3px color-mix(in oklab, var(--area) 14%, transparent); }
.clm .in-ask-ta {
  width: 100%; min-height: 48px; max-height: 160px; resize: none; padding: 0;
  border: 0; background: none; color: var(--foreground);
  font: inherit; font-size: 12.5px; line-height: 1.6;
  overflow-y: auto; scrollbar-width: thin;
}
.clm .in-ask-ta:focus { outline: none; }
.clm .in-ask-ta::placeholder { color: var(--muted-foreground); }
.clm .in-ask-row { display: flex; align-items: center; gap: 7px; }
.clm .in-ask-hint { flex: 1; min-width: 0; font-size: 10.5px; color: var(--muted-foreground); }
.clm .in-mic { flex: none; }
.clm .in-mic.is-on {
  background: color-mix(in oklab, var(--destructive) 13%, var(--card));
  border-color: color-mix(in oklab, var(--destructive) 42%, var(--card));
}
.clm .in-mic.is-on > .ico { color: var(--destructive); }
.clm .in-rec {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-danger);
}
.clm .in-rec-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--destructive);
  animation: in-blink 1.3s ease-in-out infinite;
}

/* ======================================================= decision log === */

.clm .in-log {
  list-style: none; margin: 0; padding: 12px 13px;
  max-height: 36vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 0;
}
.clm .in-log:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .in-log-i { position: relative; padding: 0 0 13px 19px; }
.clm .in-log-i:last-child { padding-bottom: 0; }
/* The rail is drawn by the entries, so it starts at the first mark and
   stops at the last rather than running past both. */
.clm .in-log-i::before {
  content: ''; position: absolute; left: 4px; top: 12px; bottom: 0; width: 2px;
  background: var(--border); border-radius: 2px;
}
.clm .in-log-i:last-child::before { display: none; }
.clm .in-log-dot {
  position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--muted-foreground);
}
.clm .in-log-i[data-kind="matched"] .in-log-dot  { border-color: var(--success); }
.clm .in-log-i[data-kind="rule"] .in-log-dot     { border-color: var(--c4); }
.clm .in-log-i[data-kind="computed"] .in-log-dot { border-color: var(--c1); }
.clm .in-log-i[data-kind="drafted"] .in-log-dot  { border-color: var(--warning); }
.clm .in-log-i[data-kind="answered"] .in-log-dot { border-color: var(--area); }

.clm .in-log-t { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 12px; font-weight: 650; }
.clm .in-log-k {
  flex: none; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border);
}
.clm .in-log-i[data-kind="matched"] .in-log-k {
  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));
}
.clm .in-log-i[data-kind="rule"] .in-log-k {
  background: color-mix(in oklab, var(--c4) 13%, var(--card));
  color: var(--ink-violet); border-color: color-mix(in oklab, var(--c4) 32%, var(--card));
}
.clm .in-log-i[data-kind="computed"] .in-log-k {
  background: color-mix(in oklab, var(--c1) 13%, var(--card));
  color: var(--ink-blue); border-color: color-mix(in oklab, var(--c1) 32%, var(--card));
}
.clm .in-log-i[data-kind="drafted"] .in-log-k {
  background: color-mix(in oklab, var(--warning) 16%, var(--card));
  color: var(--ink-warning); border-color: color-mix(in oklab, var(--warning) 36%, var(--card));
}
.clm .in-log-w { margin: 4px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted-foreground); }

/* ============================================================= record === */

.clm .in-rec-empty {
  margin: auto; padding: 34px 22px; max-width: 58ch; text-align: center;
  font-size: 12.5px; line-height: 1.6; color: var(--muted-foreground);
}
.clm .in-rec-body { flex: 1; min-height: 0; overflow-y: auto; max-height: 72vh; }
@media (max-width: 1099px) { .clm .in-rec-body { max-height: none; } }

.clm .in-sec { border-top: 1px solid var(--border); }
.clm .in-rec-body > .in-sec:first-child { border-top: 0; }
.clm .in-sec-h {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 13px 8px; background: var(--card);
}
.clm .in-sec-n {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
  background: var(--secondary); color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.clm .in-sec-t {
  margin: 0; flex: 1; min-width: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .in-sec-needs {
  flex: none; font-size: 10.5px; font-weight: 700; color: var(--ink-warning);
}

.clm .in-row {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) auto;
  align-items: baseline; gap: 6px 12px; padding: 7px 13px;
}
.clm .in-row + .in-row { border-top: 1px solid color-mix(in oklab, var(--border) 55%, transparent); }
.clm .in-row:hover { background: var(--surface); }
.clm .in-row-l { font-size: 12px; color: var(--muted-foreground); min-width: 0; }
.clm .in-row-v { font-size: 12.5px; font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.clm .in-row-v.is-empty { font-weight: 400; font-style: italic; color: var(--muted-foreground); }
.clm .in-row[data-eye="1"] { background: color-mix(in oklab, var(--warning) 6%, var(--card)); }
@media (max-width: 560px) {
  .clm .in-row { grid-template-columns: minmax(0, 1fr) auto; }
  .clm .in-row-l { grid-column: 1 / -1; }
}

/* ---- a badge says its source in words, never by colour alone ---- */
.clm .in-badge {
  display: inline-flex; align-items: center; flex: none; justify-self: end;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border);
}
.clm .in-badge[data-tone="words"] {
  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));
}
.clm .in-badge[data-tone="master"] {
  background: color-mix(in oklab, var(--c3) 14%, var(--card));
  color: var(--ink-medium); border-color: color-mix(in oklab, var(--c3) 32%, var(--card));
}
.clm .in-badge[data-tone="rule"] {
  background: color-mix(in oklab, var(--c4) 13%, var(--card));
  color: var(--ink-violet); border-color: color-mix(in oklab, var(--c4) 32%, var(--card));
}
.clm .in-badge[data-tone="computed"] {
  background: color-mix(in oklab, var(--c1) 13%, var(--card));
  color: var(--ink-blue); border-color: color-mix(in oklab, var(--c1) 32%, var(--card));
}
.clm .in-badge[data-tone="eye"] {
  background: color-mix(in oklab, var(--warning) 17%, var(--card));
  color: var(--ink-warning); border-color: color-mix(in oklab, var(--warning) 40%, var(--card));
}

/* ---- the callout on a drafted value ---- */
.clm .in-callout {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin: 0 13px 9px; padding: 10px 12px; border-radius: var(--r-md);
  background: color-mix(in oklab, var(--warning) 9%, var(--card));
  border: 1px solid color-mix(in oklab, var(--warning) 34%, var(--card));
  border-inline-start: 3px solid var(--warning);
}
.clm .in-callout-t { margin: 0; flex: 1 1 260px; min-width: 0; font-size: 11.5px; line-height: 1.55; }
.clm .in-callout-a { display: flex; gap: 7px; flex-wrap: wrap; flex: none; }
@media (max-width: 520px) {
  .clm .in-callout-a { width: 100%; }
  .clm .in-callout-a .btn { flex: 1 1 auto; justify-content: center; }
}
/* The same callout under a field on the form, where it sits inside the
   field's own column and has no margin of its own. */
.clm .in-callout.is-field { margin: 6px 0 0; }

/* ---- the footer ---- */
.clm .in-rec-foot {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap; flex: none;
  padding: 11px 13px; border-top: 1px solid var(--border); background: var(--surface);
}
.clm .in-foot-n { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.clm .in-foot-n > li { display: flex; flex-direction: column; gap: 0; }
.clm .in-foot-n b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.clm .in-foot-n span {
  font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .in-foot-n > li[data-tone="eye"] b { color: var(--ink-warning); }
.clm .in-foot-n > li[data-tone="eye"] span { color: var(--ink-warning); }
.clm .in-foot-gap { flex: 1; }
.clm .in-foot-block { margin: 0; font-size: 11.5px; font-weight: 650; color: var(--ink-warning); }
@media (max-width: 640px) {
  .clm .in-foot-gap { display: none; }
  .clm .in-rec-foot > .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================= checks === */

.clm .in-check-l { list-style: none; margin: 0; padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; }
.clm .in-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.clm .in-check[data-tone="warn"] {
  background: color-mix(in oklab, var(--warning) 8%, var(--card));
  border-color: color-mix(in oklab, var(--warning) 32%, var(--card));
}
.clm .in-check-i { flex: none; margin-top: 1px; color: var(--muted-foreground); }
.clm .in-check[data-tone="warn"] .in-check-i { color: var(--ink-warning); }
.clm .in-check[data-tone="ok"] .in-check-i { color: var(--ink-ok); }
.clm .in-check-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.clm .in-check-t { font-size: 12px; font-weight: 700; line-height: 1.4; }
.clm .in-check-b { font-size: 11.5px; line-height: 1.55; color: var(--muted-foreground); }

/* ================================================ provenance, the form === */

.clm .cc-prov {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 13px; padding: 12px 15px; border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--a-ai) 6%, var(--card));
  border: 1px solid color-mix(in oklab, var(--a-ai) 24%, var(--border));
}
.clm .cc-prov-t { margin: 0; flex: 1 1 320px; min-width: 0; font-size: 12px; line-height: 1.55; }
@media (max-width: 640px) {
  .clm .cc-prov > .btn { width: 100%; justify-content: center; }
}

.clm .cc-stepprov { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none; }
.clm .cc-stepprov-n {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-foreground);
}
/* On the form the badge sits beside its label, so the label row becomes a
   row rather than a line. */
.clm .cc-f .clm-fld-l { display: inline-flex; align-items: center; }
.clm .cc-f .in-badge { margin-inline-start: 7px; vertical-align: middle; }
.clm .cc-f.is-eye .clm-in { border-color: color-mix(in oklab, var(--warning) 52%, var(--card)); }