/* Contract Lifecycle Management — module styles.
   Builds only on existing design tokens (app.css :root vars), so it inherits
   light/dark automatically. Nothing here redefines a global. */

/* --- progress bars (pipeline / analytics) ------------------------------- */
.clm-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  overflow: hidden;
}
.clm-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-600) 100%);
}
.clm-bar__fill--muted { background: var(--border-strong); }

.clm-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .5rem 0;
}
.clm-row__label { color: var(--text); font-size: .92rem; font-weight: 500; }
.clm-row__val { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: .9rem; white-space: nowrap; }

/* --- lifecycle timeline (contract detail) ------------------------------- */
.clm-timeline { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.clm-timeline__step { display: flex; align-items: center; gap: 0; }
.clm-timeline__dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text-subtle);
  font-size: .8rem; font-weight: 700;
  flex: 0 0 auto;
}
.clm-timeline__step.is-done .clm-timeline__dot {
  border-color: var(--ok); background: var(--ok); color: #fff;
}
.clm-timeline__step.is-current .clm-timeline__dot {
  border-color: var(--brand); background: var(--brand); color: #fff;
  box-shadow: 0 0 0 4px var(--ring);
}
.clm-timeline__bar { width: 46px; height: 2px; background: var(--border-strong); }
.clm-timeline__step.is-done + .clm-timeline__step .clm-timeline__bar,
.clm-timeline__step.is-done .clm-timeline__bar { background: var(--ok); }
.clm-timeline__label {
  font-size: .72rem; color: var(--text-subtle); text-align: center;
  margin-top: .4rem; letter-spacing: .02em;
}
.clm-timeline__cell { display: flex; flex-direction: column; align-items: center; }

/* --- clause library (two-pane) ------------------------------------------ */
.clm-split { display: grid; grid-template-columns: 360px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .clm-split { grid-template-columns: 1fr; } }
.clm-list { display: flex; flex-direction: column; gap: .5rem; }
.clm-list__item {
  text-align: left; width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  cursor: pointer;
  display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start;
  transition: border-color .12s, background .12s;
}
.clm-list__item:hover { border-color: var(--border-strong); }
.clm-list__item.is-active { border-color: var(--brand); background: var(--brand-50); }
.clm-list__name { font-weight: 600; font-size: .92rem; color: var(--text); }
.clm-list__meta { font-size: .76rem; color: var(--text-subtle); margin-top: .2rem; }

/* --- filter pills -------------------------------------------------------- */
.clm-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.clm-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .7rem; border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-muted);
  font-size: .8rem; font-weight: 500; text-decoration: none; cursor: pointer;
}
.clm-chip:hover { color: var(--text); border-color: var(--text-subtle); }
.clm-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- wizard stepper ------------------------------------------------------ */
.clm-steps { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.clm-steps__item {
  flex: 1; display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem; color: var(--text-subtle); font-size: .88rem; font-weight: 500;
  background: var(--bg-elev-2); border-right: 1px solid var(--border);
}
.clm-steps__item:last-child { border-right: 0; }
.clm-steps__item.is-active { background: var(--bg-elev); color: var(--text); }
.clm-steps__item.is-done { color: var(--ok); }
.clm-steps__num {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--border-strong); color: var(--text); font-size: .76rem; font-weight: 700; flex: 0 0 auto;
}
.clm-steps__item.is-active .clm-steps__num { background: var(--brand); color: #fff; }
.clm-steps__item.is-done .clm-steps__num { background: var(--ok); color: #fff; }

.clm-modecard {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-elev); padding: 1.5rem; text-align: center; cursor: pointer;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.clm-modecard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.clm-modecard.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.clm-modecard__icon { width: 44px; height: 44px; margin: 0 auto .8rem; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--brand-50); color: var(--brand); }

/* --- streamed AI output --------------------------------------------------
   The live box holds RENDERED Markdown now, not raw tokens (see
   clm/partials/_stream_js.html), so it drops the monospace/pre-wrap treatment
   and inherits .answer-md prose instead. .clm-stream is the positioning
   context for the jump-to-latest button, which only appears once the reader
   has scrolled away from the bottom. */
.clm-stream { position: relative; }
.clm-stream__out {
  color: var(--text); max-height: 60vh; overflow-y: auto;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
  /* Smooth for the button; the per-frame follow flips this to auto so it
     cannot lag a stream arriving faster than the animation. */
  scroll-behavior: smooth;
}
.clm-stream__out > :first-child { margin-top: 0; }
.clm-stream__out > :last-child { margin-bottom: 0; }
.clm-stream__bottom {
  position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 2;
  padding: .3rem .7rem; border-radius: 999px; cursor: pointer;
  font-size: .75rem; font-weight: 600; line-height: 1.4;
  color: #fff; background: var(--brand); border: 1px solid var(--brand);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.clm-stream__bottom.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .clm-stream__out { scroll-behavior: auto; }
  .clm-stream__bottom { transition: none; }
}

/* --- deadlines calendar -------------------------------------------------- */
.clm-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.clm-cal__head { text-align: center; font-size: .72rem; color: var(--text-subtle); font-weight: 600; padding: .3rem 0; }
.clm-cal__day {
  aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  padding: .35rem .45rem; font-size: .8rem; color: var(--text-muted); min-height: 44px;
}
.clm-cal__day.is-empty { border-color: transparent; }
.clm-cal__day.is-today { border-color: var(--brand); color: var(--text); font-weight: 700; }
.clm-cal__day.has-deadline { border-color: var(--warn); }
.clm-cal__day.has-overdue { border-color: var(--err); }
.clm-cal__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-top: auto; }
.clm-cal__dot--overdue { background: var(--err); }

/* --- misc ---------------------------------------------------------------- */
.clm-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.clm-deadline-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; background: var(--bg-elev);
}
.clm-deadline-card.is-overdue { border-color: var(--err); }
.clm-deadline-card.is-soon { border-color: var(--warn); }
.clm-eyebrow-sm { font-size: .75rem; font-weight: 700; letter-spacing: .01em; text-transform: none; }

/* --- edit affordances (metadata / parties / merge fields) ---------------- */
/* The unfilled-variables pill doubles as the button that opens the merge-field
   modal, so it needs to shed the default button chrome and keep the pill look. */
.pill--button {
  border: 0; font: inherit; cursor: pointer; appearance: none;
}
.pill--button:hover { filter: brightness(1.08); }

/* Party rows reveal their edit/remove controls on hover, so the sidebar stays
   calm when you are only reading it. */
.clm-party-row > div:first-child { min-width: 0; }
.clm-party-row form { display: inline; margin: 0; }
.clm-party-row .btn-ghost { opacity: 0; transition: opacity .12s ease; }
.clm-party-row:hover .btn-ghost,
.clm-party-row:focus-within .btn-ghost { opacity: 1; }
@media (hover: none) {
  .clm-party-row .btn-ghost { opacity: 1; }
}

/* Template picker in the new-contract wizard. */
.clm-template-pick { max-height: 320px; overflow-y: auto; }
.clm-template-pick label {
  display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
}
.clm-template-pick label + label { margin-top: .4rem; }
.clm-template-pick input:checked + span { font-weight: 600; }
.clm-template-pick label:hover { border-color: var(--accent); }

/* --- collapsible card ------------------------------------------------------
   A .surface card whose heading row folds it away. The contract hub is one very
   long column - Document alone can be tens of pages - so the sections below it
   were unreachable without scrolling the whole contract.

   Native <details>/<summary>, because that is this codebase's universal
   collapse (~54 uses) and it needs no JS: Bootstrap's collapse is loaded but
   used exactly nowhere, and a JS collapse would have to be re-bound after every
   hx-boost body swap. Modelled on .cax-panel (case-analytics.css), which had
   already solved the rotating marker and the right-aligned count slot.

   Always ship these OPEN by default - the house rule, stated in
   setup/_variables.html. */
.clm-fold > summary {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; list-style: none; margin: 0;
}
.clm-fold > summary::-webkit-details-marker { display: none; }
.clm-fold > summary::before {
  content: ""; width: 0; height: 0; flex: 0 0 auto;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  opacity: .55; transition: transform .18s ease;
}
.clm-fold[open] > summary::before { transform: rotate(90deg); }
/* The heading and its controls sit on the summary row. Clicks on a control
   must not fold the card, so interactive children stop the toggle - see
   contract_detail.html. */
.clm-fold__title { min-width: 0; margin: 0; }
.clm-fold__aside { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.clm-fold__body { margin-top: 1rem; }

/* The bulk-action bar above the comment list. Mirrors the data-table bulkbar
   (templates/partials/_data_table_body.html) - hidden until something is
   ticked, so it costs nothing when nobody is selecting. */
.clm-bulkbar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .5rem .75rem; margin-bottom: .75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev);
}

/* --- shared document frame ------------------------------------------------
   One treatment for the contract wherever it is shown to be worked on: the
   Variables step, the Redlines page and the contract hub. The QA sheet asked
   for the same three things on all of them - the whole document, properly
   formatted, and a way to make it full screen - so it is defined once.

   The body is deliberately TALL. Every previous version of these screens
   capped the contract at 22rem / 60vh / calc(100vh - 6.5rem), and every one of
   them came back on a sheet as "the contract is not rendered" or "only a few
   lines are displayed". A contract is a document; give it a page. */
.clm-docframe { display: flex; flex-direction: column; min-width: 0; }
.clm-docframe__bar {
  display: flex; align-items: center; gap: .5rem;
  justify-content: flex-end; flex-wrap: wrap; margin-bottom: .5rem;
}
.clm-docframe__body { min-height: 60vh; }

/* Scoped to the frame ON PURPOSE. `.mira-editor { height:100% }` and
   `.mira-editor .answer-md { overflow-y:auto }` (app.css) are global rules
   written for the MIRA chat canvas, which is a fixed-height panel. Here the
   document must grow to its natural height and let the PAGE scroll, so both
   are neutralised - inside this frame only. Never change them at source:
   ai_mira/chat.html depends on the panel behaviour. */
.clm-docframe .mira-editor { height: auto; }
.clm-docframe .mira-editor .answer-md { overflow-y: visible; }

/* Maximise: fill the viewport in place. Not the Fullscreen API - this keeps
   the app's own chrome and, more importantly, keeps the editor mounted, so an
   unsaved edit is never stranded by entering or leaving. Esc exits. */
.clm-docframe.is-maximised {
  position: fixed; inset: 0; z-index: 1080;
  background: var(--bg, #fff);
  padding: 1rem 1.25rem; overflow-y: auto;
}
.clm-docframe.is-maximised .clm-docframe__body { min-height: calc(100vh - 6rem); }
.clm-docframe.is-maximised .answer-md { max-width: 92ch; margin-inline: auto; }

/* The full-page document view (clm:contract_document). */
.clm-docpage { max-width: 100%; }
.clm-docpage .answer-md { max-width: 92ch; margin-inline: auto; }

/* --- redline / track changes -------------------------------------------- */
/* Reuses the Draft surface's .trk-ins/.trk-del vocabulary so a redline reads
   the same in both places, but here the markup is persisted, not in-session. */
.clm-redline__ctx {
  margin: 0; padding: .5rem .75rem; white-space: pre-wrap; word-break: break-word;
  color: var(--text-subtle); font-size: .86rem; border-left: 2px solid var(--border);
}
.clm-redline__change {
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius);
  padding: .75rem; margin: .5rem 0; background: var(--bg-elev);
}
.clm-redline__change.is-pending  { border-left-color: var(--warn); }
.clm-redline__change.is-accepted { border-left-color: var(--ok); }
.clm-redline__change.is-rejected { border-left-color: var(--border); opacity: .65; }
.clm-redline__change form { display: inline; margin: 0; }
.clm-redline__change del.trk-del,
.clm-redline__change ins.trk-ins {
  display: block; white-space: pre-wrap; word-break: break-word; padding: .25rem 0;
}
.clm-redline__change del.trk-del { color: var(--err); text-decoration: line-through; }
.clm-redline__change ins.trk-ins { color: var(--ok); text-decoration: none; }

/* --- version / redline diff rows ----------------------------------------- */
/* Shared by the version-compare screen and the redline conflict screen, which
   shows the same "what you would lose" diff. */
.clm-diff { margin:0; white-space:pre-wrap; word-break:break-word; font-size:.82rem; line-height:1.5; }
.clm-diff__row { display:block; padding:0 .4rem; border-radius:3px; }
.clm-diff__row--add { background:rgba(34,197,94,.14); color:var(--ok); }
.clm-diff__row--del { background:rgba(239,68,68,.14); color:var(--err); }
.clm-diff__row--meta { color:var(--text-subtle); opacity:.7; }
.clm-diff__row--ctx { color:var(--text-muted); }

/* --- creation wizard ------------------------------------------------------ */
/* The step strip is now a set of links (the contract exists from step 1), so it
   needs the anchor resets the old static divs didn't. */
a.clm-steps__item { text-decoration: none; }
a.clm-steps__item:hover { background: var(--bg-elev); color: var(--text); }

/* Selecting a starting option has to be unmistakable. It used to be a 3px ring
   on a card whose only other consequence lived on the next (hidden) step, which
   read as "the click did nothing". */
button.clm-modecard {
  position: relative; width: 100%; display: block;
  font: inherit; color: inherit; text-align: center;
}
.clm-modecard__title { display: block; font-weight: 600; }
.clm-modecard__sub { display: block; margin-top: .25rem; font-size: .82rem; color: var(--text-subtle); }
.clm-modecard__check {
  position: absolute; top: .6rem; right: .6rem;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: .72rem; font-weight: 700;
  opacity: 0; transform: scale(.7); transition: opacity .14s, transform .14s;
}
.clm-modecard.is-active { background: var(--brand-50); }
.clm-modecard.is-active .clm-modecard__check { opacity: 1; transform: scale(1); }
.clm-modecard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.clm-modepanel { border-top: 1px solid var(--border); padding-top: 1.25rem; }

.clm-resume {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: inherit; margin-bottom: .5rem;
}
.clm-resume:hover { border-color: var(--brand); background: var(--bg-elev-2); }
.clm-resume-banner { border-left: 3px solid var(--brand); }

/* "Not in the list?" free-text escapes on the two fixed vocabularies. */
.clm-addnew { margin-top: .4rem; }
.clm-addnew > summary {
  cursor: pointer; font-size: .8rem; color: var(--text-subtle);
  list-style: none; user-select: none;
}
.clm-addnew > summary::-webkit-details-marker { display: none; }
.clm-addnew > summary::before { content: "+ "; color: var(--brand); font-weight: 700; }
.clm-addnew > summary:hover { color: var(--text); }

.clm-rowtable th { font-size: .78rem; text-transform: none; letter-spacing: .01em; color: var(--text-subtle); }

/* --- contract page: the three long-running phases ------------------------- */
.clm-phase {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-elev); padding: 1.1rem;
  display: flex; flex-direction: column; align-items: flex-start;
}
.clm-phase__head { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; }
.clm-phase__num {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--border-strong); color: var(--text); font-size: .74rem; font-weight: 700;
}
.clm-phase .btn { margin-top: auto; }

.clm-doctools {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding-bottom: .9rem; border-bottom: 1px solid var(--border);
}

.clm-comment { padding: .7rem 0; border-bottom: 1px solid var(--border); }
.clm-comment.is-resolved { opacity: .62; }
.clm-comment__anchor {
  margin-top: .3rem; padding-left: .6rem; border-left: 2px solid var(--border-strong);
  color: var(--text-subtle); font-size: .84rem;
}
.clm-comment__reply {
  margin: .5rem 0 0 1.2rem; padding-left: .7rem;
  border-left: 2px solid var(--border);
}

.clm-envelope { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.clm-envelope__row { padding-left: .9rem; border-left: 2px solid var(--border); margin-top: .35rem; }

.clm-flow { padding: .8rem 0; border-bottom: 1px solid var(--border); }
.clm-flow__steps { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--text-subtle); font-size: .88rem; }

/* --- risk analysis -------------------------------------------------------- */
.clm-finding { padding: .8rem 0; border-bottom: 1px solid var(--border); }
.clm-finding:last-child { border-bottom: 0; }
.clm-finding.is-resolved { opacity: .68; }
.clm-finding__fix {
  padding: .5rem .7rem; border-radius: var(--radius);
  background: var(--brand-50); color: var(--text); font-size: .86rem;
}
.clm-juris { padding: .45rem 0; border-bottom: 1px solid var(--border); }
.clm-juris:last-child { border-bottom: 0; }
.clm-juris__mark { font-weight: 700; line-height: 1.4; }

/* --- analytics ------------------------------------------------------------ */
.clm-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.clm-chip {
  padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text-subtle);
  font-size: .84rem; text-decoration: none;
}
.clm-chip:hover { border-color: var(--border-strong); color: var(--text); }
.clm-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* The "By status" labels are pills, which need more room than the 130px the
   default row label column gives them. */
.clm-row--wide { grid-template-columns: 210px 1fr auto; }
.clm-cardtotal {
  margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border);
  font-size: .86rem; color: var(--text-subtle);
}

/* --- deadlines: calendar sync -------------------------------------------- */
.clm-synrow:last-of-type { border-bottom: 0 !important; }
.clm-synrow__logo { display: inline-flex; width: 18px; height: 18px; }

/* --- wizard: the document on the Variables step --------------------------
   Two panes side by side, each scrolling on its own. Stacked in one column the
   step grew with the number of merge fields, so placing a field meant scrolling
   the document off the top of the screen to reach its input and back down to
   see where it landed. Both panes stay put instead; insert-at-caret works
   because the caret and the button are on screen together.

   Sticky rather than fixed, so the pane still scrolls with the page once the
   rail is longer than the viewport, and the wizard's own save bar is reachable
   at the bottom. */
.clm-vars__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.clm-vars__doc,
.clm-vars__fields { min-width: 0; }
.clm-vars__pane {
  position: sticky;
  /* Clears the app header; the panes must not slide under it. */
  top: 4.5rem;
  max-height: calc(100vh - 6.5rem);
  overflow-y: auto;
  margin-bottom: 0;
}
/* The FIELDS pane stays sticky and scrolls with the viewport - it is a
   reference list you consult while editing. The DOCUMENT pane must not: a
   viewport-capped scroller wrapping an editor that has its own overflow gives
   a scroller inside a scroller, which reads as "the contract is cut off" and
   is horrible to drive. The document scrolls the page, like a document. */
.clm-vars__doc .clm-vars__pane {
  position: static;
  max-height: none;
  overflow-y: visible;
}

.clm-vars__group > summary { cursor: pointer; list-style: none; }
.clm-vars__group > summary::-webkit-details-marker { display: none; }
.clm-vars__group > summary::before { content: "▾"; margin-right: .4rem; opacity: .6; }
.clm-vars__group:not([open]) > summary::before { content: "▸"; }
.clm-vars__fallback { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

/* Below lg the panes would each be half a phone wide, which is worse than the
   scrolling they were meant to fix. One column, and nothing sticky. */
@media (max-width: 991.98px) {
  .clm-vars__grid { grid-template-columns: minmax(0, 1fr); }
  .clm-vars__pane {
    position: static;
    max-height: none;
    overflow-y: visible;
    margin-bottom: 1rem;
  }
  /* No height cap on the document. There used to be a 22rem one here, which
     is 11-12 lines at the doc line-height - so below 992px (a split window, a
     tablet, or 125-150% browser zoom on a 1366px laptop) the contract showed
     as a dozen lines in a tiny scroller. That is the QA sheet's "on click of
     Edit only a few lines of contract is displayed". The document sets its own
     height through .clm-docframe below. */
}

/* Retained: the detail-page variables modal still renders .clm-varsdoc. */
.clm-varsdoc {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  background: var(--surface, transparent);
}
/* The same document, in the detail page's merge-field dialog. It keeps a cap
   because a dialog that grows with the contract is unusable - but 22rem is
   eleven lines, the identical complaint the setup step drew. A dialog gets
   most of the window. */
.clm-varsdoc [contenteditable] { max-height: 65vh; overflow-y: auto; }


/* Slide-over holding the half-built contracts (clm/partials/_resume_drawer.html).
   Its own chrome rather than .lib-modal's, because that one is a centred dialog
   and this has to come in from the edge without covering the wizard behind it. */
.clm-drawer { position: fixed; inset: 0; z-index: 1055; }
.clm-drawer[hidden] { display: none; }
.clm-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .38);
}
.clm-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(30rem, 100%);
  display: flex; flex-direction: column;
  background: var(--bg-elev-1, #fff);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(15, 23, 42, .14);
  animation: clm-drawer-in .16s ease-out;
}
@keyframes clm-drawer-in { from { transform: translateX(1.5rem); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .clm-drawer__panel { animation: none; }
}
.clm-drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
}
.clm-drawer__body { padding: 1rem 1.25rem 1.5rem; overflow-y: auto; }

/* Sample-brief chips under the "draft from scratch" box. */
.clm-briefchips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

/* Set by the step-1 submit guard when Continue is pressed with no template
   picked -- the old guard used alert(), which said nothing about WHERE. */
.clm-template-pick.is-invalid {
  border-radius: var(--radius);
  box-shadow: 0 0 0 2px var(--err, #dc2626);
}