/* ArcClause — wizard, matrix, and walls. Inherits tokens from style.css.
   Hero + steps-timeline styles mirror arcprice.css so the two tools match. */

.ac-main { max-width: 980px; margin: 0 auto; padding: 28px 20px 80px; }
.ac-hidden { display: none !important; }

/* Floating tooltip ([data-tip]) — mirrors arcprice.css so the two tools match. */
#bx-tooltip { position: fixed; z-index: 9999; max-width: 300px; background: #111318; color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; padding: 9px 12px; border-radius: 7px; box-shadow: 0 6px 24px rgba(0,0,0,.28); pointer-events: none; opacity: 0; transition: opacity .12s; }

/* ── Hero (same rules as ArcPrice — these classes are NOT in style.css) ── */
.tool-hero { background: var(--gray-50); border-bottom: 1px solid var(--gray-300); padding: clamp(48px,7vw,80px) var(--gutter) clamp(40px,5vw,64px); }
.tool-hero-inner { max-width: 860px; margin-inline: auto; }
.tool-hero-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 20px; }
.tool-meta-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gray-500); }
.tool-meta-badge svg { flex-shrink: 0; }
/* Agency-supplement pills under the hero lead — one chip per regulation we cover. */
.ac-supp-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }
.ac-supp-pill {
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--charcoal);
  background: #fff; border: 1.5px solid var(--gray-300); border-radius: 999px; padding: 3px 12px;
}
/* Hero supplements summary — one badge that expands the full (DOM-retained) list. */
.ac-supp-summary { margin-top: 14px; }
.ac-supp-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--charcoal);
  background: #fff; border: 1.5px solid var(--gray-300); border-radius: 999px; padding: 5px 14px;
  transition: border-color .12s, background .12s;
}
.ac-supp-toggle:hover { border-color: var(--gray-500); }
.ac-supp-toggle svg { color: #15803d; flex: 0 0 auto; }
.ac-supp-caret { font-size: 11px; color: var(--gray-500); transition: transform .15s; }
.ac-supp-toggle[aria-expanded="true"] .ac-supp-caret { transform: rotate(180deg); }
.ac-supp-list[hidden] { display: none; }
.tool-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-300); }

/* ── Phase tracker (ArcPrice steps-timeline, adapted to 4 phases) ── */
.ac-timeline { background: #fff; border-bottom: 1px solid var(--gray-200); padding: 16px 0; position: sticky; top: 65px; z-index: 100; } /* nav is 66px — tuck 1px under its border so no slit shows */
.ac-timeline-inner { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter, 20px); }
.ac-phases { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-phase { display: flex; align-items: center; gap: 8px; flex: 1; background: none; border: none; padding: 0; font-family: var(--font-body); cursor: default; }
.ac-phase-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--gray-100); border: 2px solid var(--gray-300); color: var(--gray-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; transition: all .15s;
}
.ac-phase-label { font-size: 13px; font-weight: 600; color: var(--gray-500); white-space: nowrap; }
.ac-phase-line { flex: 1; height: 2px; background: var(--gray-200); margin: 0 4px; }
.ac-phase.done { cursor: pointer; }
.ac-phase.done .ac-phase-num { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.ac-phase.done .ac-phase-label { color: var(--charcoal); }
.ac-phase.active .ac-phase-num { background: var(--red); border-color: var(--red); color: #fff; }
.ac-phase.active .ac-phase-label { color: var(--red); }

.ac-card {
  background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-md, 10px); padding: 28px;
  box-shadow: 0 1px 3px rgba(17, 19, 24, .06);
}

.ac-newbtn {
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 1.5px solid var(--gray-300); border-radius: 8px; padding: 9px 16px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--charcoal); cursor: pointer; flex-shrink: 0; margin-left: 20px;
  transition: border-color .15s, color .15s;
}
.ac-newbtn:hover { border-color: var(--red); color: var(--red); }

/* ── Wizard ── */
.ac-progress { height: 6px; background: var(--gray-100, #f3f4f6); border-radius: 3px; margin-bottom: 26px; overflow: hidden; }
.ac-progress-bar { height: 100%; width: 0; background: var(--red); border-radius: 3px; transition: width .25s ease; }

.ac-q-label { font-family: var(--font-display); font-size: 1.45rem; color: var(--charcoal); margin: 0 0 6px; }
.ac-q-helper { color: var(--gray-600); font-size: 14.5px; margin: 0 0 20px; max-width: 620px; }

/* grid-auto-rows: 1fr keeps every option box the same height even when one
   label wraps to two lines (e.g. "FP w/ Economic Price Adjustment"). */
.ac-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; grid-auto-rows: 1fr; }
.ac-option {
  border: 1.5px solid var(--gray-300); border-radius: 10px; padding: 14px 16px;
  cursor: pointer; background: #fff; text-align: left; font-family: var(--font-body);
  font-size: 14.5px; color: var(--charcoal); transition: border-color .12s, background .12s;
}
.ac-option:hover { border-color: var(--gray-500); }
.ac-option.selected { border-color: var(--red); background: #fff5f5; font-weight: 600; }
.ac-option small { display: block; color: var(--gray-500); font-weight: 400; margin-top: 3px; font-size: 12.5px; }

.ac-field { margin-bottom: 18px; max-width: 420px; }

/* Step 1 (agency): the three dropdowns stack vertically and fill the card width,
   matching the full-width upload banner above. Heading/helper stay left-justified.
   Full width (not the narrow 420px) keeps the column from looking lopsided. */
.ac-step-agency .ac-field-grid { display: flex; flex-direction: column; gap: 18px; }
.ac-step-agency .ac-field-grid .ac-field { max-width: none; margin-bottom: 0; }
.ac-field label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; color: var(--charcoal); }
.ac-field input, .ac-field select {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--gray-300); border-radius: 8px;
  font-family: var(--font-body); font-size: 15px; color: var(--charcoal); background: #fff;
}
.ac-field input:focus, .ac-field select:focus { outline: none; border-color: var(--red); }
.ac-field .ac-hint { font-size: 12.5px; color: var(--gray-500); margin-top: 5px; }

.ac-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--gray-100);
}
.ac-toggle-row:last-child { border-bottom: none; }
.ac-toggle-row .ac-t-label { font-size: 14.5px; font-weight: 600; }
.ac-toggle-row .ac-t-help { font-size: 12.5px; color: var(--gray-500); margin-top: 2px; max-width: 520px; }
.ac-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.ac-switch input { opacity: 0; width: 0; height: 0; }
.ac-switch .ac-slider {
  position: absolute; inset: 0; background: var(--gray-300); border-radius: 12px;
  cursor: pointer; transition: background .15s;
}
.ac-switch .ac-slider::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s;
}
.ac-switch input:checked + .ac-slider { background: var(--red); }
.ac-switch input:checked + .ac-slider::before { transform: translateX(20px); }

.ac-wizard-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }
.ac-step-count { color: var(--gray-500); font-size: 13px; }

/* ── Review screen ── */
.ac-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.ac-review-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--gray-100); font-size: 14px; }
.ac-review-row b { color: var(--gray-600); font-weight: 600; }
.ac-review-row button { background: none; border: none; color: var(--red); cursor: pointer; font-size: 13px; font-weight: 600; padding: 0; }
.ac-rfo-toggle { margin-top: 18px; padding: 14px 16px; background: var(--gray-50, #f9fafb); border: 1px solid var(--gray-200); border-radius: 10px; }

/* ── Matrix ── */
.ac-results-head { display: flex; justify-content: space-between; align-items: flex-start; margin: 6px 0 18px; gap: 16px; }

/* scroll-margin-top mirrors the sticky band-header offset (--ac-band-top, set at
   runtime by syncStickyOffsets) so collapsing a band re-anchors its header just
   below the sticky nav/timeline/summary stack rather than under it. Falls back to
   190px before the script runs / on mobile (where the var is cleared). */
.ac-band { margin-bottom: 26px; scroll-margin-top: calc(var(--ac-band-top, 190px) + 8px); }
.ac-band h3 {
  font-size: 14.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--charcoal); font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.ac-band h3 .ac-count { background: var(--gray-100); border-radius: 999px; padding: 1px 9px; font-size: 12px; color: var(--charcoal); }
/* Collapsible + sticky band headers — float under the nav (66px) + sticky timeline
   + summary strip so the section you're reading stays labelled through the long matrix.
   --ac-band-top is set at runtime by syncStickyOffsets() to (summary strip top + its
   measured height), so the header always lands just below the strip regardless of how
   tall the strip wraps (corpus filter row, count chips). Fallback covers the current
   strip height before the script runs. */
.ac-band-toggle {
  position: sticky; top: var(--ac-band-top, 226px); z-index: 49; cursor: pointer; user-select: none;
  background: #fff; border: 1px solid var(--gray-200); border-left: 4px solid var(--gray-300);
  border-radius: 8px; padding: 10px 13px;
}
.ac-band-toggle:hover { border-color: var(--gray-300); }
.ac-band.ac-collapsed .ac-band-toggle { margin-bottom: 0; }
.ac-band-chevron { display: inline-flex; color: var(--gray-500); transition: transform .15s; }
.ac-band.ac-collapsed .ac-band-chevron { transform: rotate(-90deg); }
.ac-band-note { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--gray-500); font-size: 12px; }

/* Category color-coding: left accent bar + count-badge tint so each band reads at a glance. */
.ac-band.tone-required .ac-band-toggle { border-left-color: #16a34a; }
.ac-band.tone-required .ac-count { background: #dcfce7; color: #15803d; }
.ac-band.tone-discretion .ac-band-toggle { border-left-color: #d97706; }
.ac-band.tone-discretion .ac-count { background: #fef3c7; color: #b45309; }
.ac-band.tone-muted .ac-band-toggle { border-left-color: var(--gray-300); }
.ac-band.tone-muted h3 { color: var(--gray-600); }

/* Summary strip — sticky overview + jump nav at the top of the matrix. */
.ac-summary {
  position: sticky; top: 125px; z-index: 50; display: flex; flex-wrap: wrap; gap: 8px;
  background: #fff; padding: 10px 0; margin-bottom: 14px; border-bottom: 1px solid var(--gray-100);
}
.ac-summary-chip {
  font-family: var(--font-body); font-size: 13px; cursor: pointer; padding: 6px 13px;
  border-radius: 999px; border: 1px solid var(--gray-200); background: var(--gray-50, #f9fafb);
  color: var(--charcoal); border-left-width: 4px; transition: filter .12s;
}
.ac-summary-chip:hover { filter: brightness(0.96); }
.ac-summary-chip b { font-weight: 700; }
/* Pills filled with the same category tints as the header count badges (green /
   amber / slate) so the strip color-codes 1:1 with the matrix headers. */
.ac-summary-chip.tone-required { background: #dcfce7; border-color: #bbf7d0; border-left-color: #16a34a; color: #15803d; }
.ac-summary-chip.tone-discretion { background: #fef3c7; border-color: #fde68a; border-left-color: #d97706; color: #b45309; }
.ac-summary-chip.tone-muted { background: var(--gray-100); border-color: var(--gray-200); border-left-color: var(--gray-400, #9ca3af); color: var(--gray-600); }

/* Matrix filter — two stacked multi-select dimensions (Regulation + UCF Section)
   under the count chips. Each dimension is its own labelled row of toggle pills. */
.ac-corpus-filter { flex-basis: 100%; display: flex; flex-direction: column; gap: 7px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gray-100); }
.ac-filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ac-corpus-filter-label { flex: 0 0 84px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500); }
.ac-fpill { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 4px 11px; border: 1.5px solid var(--gray-300); background: #fff; color: var(--gray-600); border-radius: 7px; transition: background .12s, color .12s, border-color .12s; }
.ac-fpill b { font-weight: 800; color: var(--charcoal, #111318); margin-right: 1px; }
.ac-fpill:hover { border-color: var(--gray-500); }
.ac-fpill.on { background: var(--charcoal, #111318); border-color: var(--charcoal, #111318); color: #fff; }
.ac-fpill.on b { color: #fff; }
.ac-fpill-unsec { font-style: italic; color: var(--gray-500); }
.ac-filter-clear { align-self: flex-start; margin-left: 84px; font-family: var(--font-body); font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 2px 4px; border: none; background: none; color: var(--gray-500); text-decoration: underline; }
.ac-filter-clear:hover { color: var(--charcoal, #111318); }
/* Filtered-out rows / emptied bands hidden by the matrix filter. */
.ac-row-filtered { display: none !important; }
.ac-band-empty { display: none; }

.ac-row {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 13px 16px; margin-bottom: 8px;
}
.ac-row-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ac-row-id { font-weight: 700; font-size: 14.5px; color: var(--charcoal); white-space: nowrap; }
.ac-row-title { font-size: 14px; color: var(--charcoal); flex: 1; min-width: 200px; }
.ac-row-tags { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.ac-tag.presc { background: var(--gray-100); color: var(--gray-600); }
a.ac-tag.presc { text-decoration: none; cursor: pointer; transition: background .12s, color .12s; }
a.ac-tag.presc:hover { background: #e5e7eb; color: var(--charcoal); }
.ac-tag.alt { background: #eef2ff; color: #4338ca; }
.ac-tag.review { background: #fff3e8; color: #b45309; }
.ac-tag.rfo { background: #fff3e8; color: #b45309; }
.ac-tag.consider { background: #fefce8; color: #a16207; }
/* Regulation source shown in front of each clause id (FAR vs agency supplement) */
.ac-row-corpus { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--gray-500); }
.ac-row-corpus.agency { color: #1d4ed8; }
.ac-row-rationale { font-size: 13px; color: var(--gray-600); margin-top: 6px; line-height: 1.5; }
.ac-row-failed { font-size: 12.5px; color: #b45309; margin-top: 6px; font-family: ui-monospace, monospace; }
.ac-row-actions { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ac-row-actions button, .ac-row-actions a {
  background: none; border: none; padding: 0; color: var(--red); font-size: 12.5px;
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.ac-explain-out { font-size: 13px; color: var(--charcoal); background: var(--gray-50, #f9fafb); border-radius: 8px; padding: 10px 12px; margin-top: 8px; line-height: 1.55; }

.ac-checklist-toggle { cursor: pointer; user-select: none; }
.ac-checklist { margin: 8px 0 0 14px; border-left: 2px solid var(--gray-200); padding-left: 14px; }

.ac-banner {
  background: #fff8eb; border: 1px solid #f1d59b; color: #8a5a06; border-radius: 10px;
  padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px;
}

.ac-upsell {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--charcoal, #111318); color: #fff; border-radius: 12px;
  padding: 22px 24px; margin: 30px 0 14px; flex-wrap: wrap;
}
.ac-upsell strong { font-size: 16px; }
.ac-upsell p { color: #b8bcc4 !important; }

.ac-footnote { color: var(--gray-500); font-size: 12px; line-height: 1.6; margin-top: 14px; }

/* ── ArcPrice-style modal (email-the-matrix uses the exact same design) ── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(17,19,24,.6); backdrop-filter: blur(4px);
  z-index: 600; display: none; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; transition: opacity .25s;
}
.modal-backdrop.visible { opacity: 1; display: flex; }
.modal-box {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14); width: 420px; max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px); padding: 32px; box-sizing: border-box;
  overflow-y: auto; display: flex; flex-direction: column; text-align: left;
  transform: translateY(20px); transition: transform .25s;
}
.modal-backdrop.visible .modal-box { transform: translateY(0); }
.modal-icon { width: 48px; height: 48px; background: var(--red-light, #fff0f0); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0; }
.modal-title { font-family: var(--font-display); font-size: 20px; color: var(--charcoal); margin-bottom: 6px; line-height: 1.2; }
.modal-body { font-size: 14px; color: var(--gray-500); line-height: 1.5; margin-bottom: 16px; overflow-wrap: break-word; }
.modal-input { width: 100%; font-family: var(--font-body); font-size: 15px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-md, 10px); padding: 12px 16px; margin-bottom: 12px; box-sizing: border-box; }
.modal-input:focus { outline: none; border-color: var(--red); }
.modal-error { font-size: 13px; color: var(--red); margin-top: 8px; display: none; }
.modal-error.visible { display: block; }
[hidden] { display: none !important; }

/* ── Walls + badge ── */
.ac-modal-backdrop {
  position: fixed; inset: 0; background: rgba(17, 19, 24, .55); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ac-modal { background: #fff; border-radius: 14px; padding: 28px; max-width: 440px; width: 100%; }
.ac-modal h3 { font-family: var(--font-display); margin: 0 0 8px; }
.ac-modal p { color: var(--gray-600); font-size: 14px; }
.ac-modal input[type="email"] {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--gray-300); border-radius: 8px;
  font-size: 15px; margin: 8px 0 6px;
}
.ac-optin { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--gray-600); margin-bottom: 14px; }
.ac-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.ac-modal-err { color: var(--red); font-size: 13px; margin-top: 8px; }

/* The bottom-right credit/access dock (#access-dock) mirrors ArcPrice and is
   styled inline in the markup; main.js mounts the master/guest badge into it. */
#access-dock[hidden] { display: none; }
/* Keep the dock a fixed bottom-right box on mobile too — consistent with ArcPrice
   and ArcScout, and so "Manage access" is always reachable (it previously dropped
   to the very bottom of the page in normal flow, effectively hiding it). The
   in-flow wizard "Next" button only overlaps the dock's corner at the very bottom
   of a step — same as the sibling tools, acceptable. */

/* ── Upload zone + extraction confirmation (spec §6) ── */
.ac-upload {
  border: 2px dashed var(--gray-300); border-radius: 12px; padding: 18px 20px;
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
  background: var(--gray-50, #f9fafb); cursor: pointer; transition: border-color .15s;
}
.ac-upload:hover, .ac-upload.drag { border-color: var(--red); }
.ac-upload-icon { flex-shrink: 0; color: var(--gray-500); }
/* Compact banner shown in place of the dropzone once a document is applied. */
.ac-doc-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 10px; padding: 10px 14px; margin-bottom: 24px; }
/* Normal inline text (NOT flex — flex collapses the spaces between words). */
.ac-doc-applied-msg { font-size: 13px; color: #1d4ed8; line-height: 1.55; }
.ac-doc-applied-msg svg { vertical-align: -1px; margin-right: 5px; }
.ac-reupload-link { background: none; border: none; padding: 0; font-family: var(--font-body); font-size: 12.5px;
  font-weight: 600; color: var(--red); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.ac-upload b { font-size: 14px; }
.ac-upload .ac-hint { margin-top: 2px; }
.ac-upload-status { display: none; }
/* Full-screen modal loading overlay — mirrors ArcPrice's #ai-overlay. */
.ac-upload-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(17, 19, 24, .55); backdrop-filter: blur(4px); }
.ac-upload-overlay.visible { display: flex; }
.ac-upload-overlay-box { background: #fff; border-radius: 14px; padding: 36px 40px; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); max-width: 360px; }
#ac-upload-overlay-msg { font-weight: 600; font-size: 15px; color: var(--charcoal); }
.ac-spinner-lg { width: 40px; height: 40px; border: 3px solid var(--gray-200); border-top-color: var(--red); border-radius: 50%; animation: ac-spin .7s linear infinite; margin: 0 auto 16px; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
.ac-dots::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: ac-dots 1.2s steps(4, jump-none) infinite; }
@keyframes ac-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: '...'; } }

.ac-confirm-row {
  border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 8px; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
}
.ac-confirm-row.lowconf { border-color: #f1d59b; background: #fffaf0; }
.ac-confirm-row.accepted { border-color: #bbf7d0; background: #f0fdf4; }
.ac-confirm-row .ac-cf-param { font-size: 13px; font-weight: 700; }
.ac-confirm-row .ac-cf-value { font-size: 14.5px; margin: 2px 0; }
.ac-confirm-row .ac-cf-evidence { font-size: 12px; color: var(--gray-500); font-style: italic; }
.ac-conf-badge { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.ac-conf-badge.hi { background: #dcfce7; color: #166534; }
.ac-conf-badge.lo { background: #fff3e8; color: #b45309; }
.ac-cf-accept { background: var(--red); color: #fff; border: none; border-radius: 7px; padding: 7px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ac-cf-accept[disabled] { background: #16a34a; cursor: default; }
.ac-confirm-row.rejected { border-color: var(--gray-300); background: var(--gray-50); }
.ac-confirm-row.rejected .ac-cf-value, .ac-confirm-row.rejected .ac-cf-evidence { text-decoration: line-through; color: var(--gray-400); }
.ac-cf-main { flex: 1; min-width: 0; }
.ac-cf-actions { display: flex; flex-direction: column; gap: 5px; align-items: stretch; flex-shrink: 0; }
.ac-confirm-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
/* "Not stated in your document" — a tidy pill list, not a comma run. */
.ac-miss { margin-top: 16px; }
.ac-miss-label { font-size: 12.5px; color: var(--gray-600); margin-bottom: 8px; }
.ac-miss-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-miss-chip { font-size: 12px; font-weight: 600; color: var(--gray-600); background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 999px; padding: 3px 11px; text-transform: capitalize; }
.ac-cf-edit, .ac-cf-reject { background: #fff; color: var(--gray-700); border: 1.5px solid var(--gray-300); border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ac-cf-edit:hover { border-color: var(--charcoal); }
.ac-cf-reject:hover { border-color: var(--red); color: var(--red); }
.ac-conf-badge.edited { background: #e0e7ff; color: #3730a3; }
.ac-cf-editor { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.ac-cf-editor.ac-hidden { display: none; }
.ac-cf-input { border: 1.5px solid var(--gray-300); border-radius: 7px; padding: 6px 9px; font-size: 13px; font-family: var(--font-body); min-width: 180px; max-width: 100%; }
.ac-cf-save { background: var(--red); color: #fff; border: none; border-radius: 7px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.ac-cf-cancel { background: none; border: none; font-size: 12px; font-weight: 600; color: var(--gray-500); cursor: pointer; }

/* ── M4 document assembly: row selection + incorporation toggle ── */
.ac-row-select { display: inline-flex; align-items: center; margin-right: 2px; }
.ac-row-select input { accent-color: var(--red); width: 15px; height: 15px; cursor: pointer; }
.ac-row.ac-deselected { opacity: .7; } /* dimmed but still legible — incl. the excluded band's prescription pills */
.ac-inc-toggle { display: inline-flex; border: 1.5px solid var(--gray-300); border-radius: 7px; overflow: hidden; }
.ac-inc-toggle button { background: #fff; border: none; padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--gray-500); cursor: pointer; font-family: var(--font-body); }
.ac-inc-toggle button + button { border-left: 1.5px solid var(--gray-300); }
.ac-inc-toggle button.on { background: #eef2ff; color: #4338ca; cursor: default; }
/* Locked incorporation: clauses the FAR mandates as full text (can't be by reference). */
.ac-inc-required { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  color: #4338ca; background: #eef2ff; border: 1.5px solid #c7d2fe; border-radius: 7px; padding: 4px 10px; cursor: help; }

/* ── M4: per-row fill-in panels + email-time warning modal ── */
.ac-fill-field { display: flex; flex-direction: column; gap: 3px; }
.ac-fill-field label { font-size: 12px; font-weight: 600; color: var(--gray-700); }
.ac-fill-input { border: 1.5px solid var(--gray-300); border-radius: 7px; padding: 7px 10px; font-size: 13.5px; font-family: var(--font-body); max-width: 420px; }
/* The per-clause action: brand-red outline so it reads as a button, not a
   status pill, and clearly stands out from the muted tags beside it. */
.ac-fill-btn { background: #fff; color: var(--red); border: 1.5px solid var(--red); border-radius: 7px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: var(--font-body); transition: background .12s, color .12s; }
.ac-fill-btn:hover { background: var(--red); color: #fff; }
.ac-fill-btn.done { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.ac-fill-btn.done:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
.ac-fillins-panel { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; padding: 12px 14px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 9px; }
.ac-fillins-panel.ac-hidden { display: none; }
.ac-fillins-note { font-size: 12.5px; color: var(--gray-600); line-height: 1.55; }
.ac-fill-btn.note { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ac-fill-btn.note:hover { background: #dbeafe; color: #1d4ed8; }
/* Inline fill-in-the-blank: the clause sentence with the input embedded where the blank sits. */
.ac-fill-snippet { font-size: 13.5px; line-height: 1.9; color: var(--charcoal); }
.ac-fill-snippet .ac-fill-input { display: inline-block; width: auto; min-width: 120px; max-width: 100%; margin: 0 2px; vertical-align: baseline; }
.ac-fill-label { font-size: 11.5px; color: var(--gray-500); margin-top: 3px; }
.ac-fill-label::before { content: '💡 '; }
.ac-fill-suggestbar { font-size: 11.5px; color: var(--gray-500); margin-top: 2px; }
.ac-fill-suggestbar a { color: #4338ca; font-weight: 700; cursor: pointer; }
/* Non-blocking validation hint — muted, never an error color. */
.ac-fill-note { font-size: 11.5px; color: var(--gray-500); margin-top: 2px; }
.ac-fill-note.ac-hidden { display: none; }

.ac-fillins-clause { border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.ac-fillins-clause h4 { font-size: 13px; margin: 0; color: var(--charcoal); }

/* ── M5: fill-in suggestions (wizard prefills + AI from uploaded document) ── */
.ac-suggest-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid #c7d2fe; background: #eef2ff; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.ac-suggest-bar > span { font-size: 12.5px; color: #3730a3; line-height: 1.5; flex: 1; min-width: 220px; }
.ac-suggest-bar .btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ac-fill-suggest { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: #3730a3; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 7px; padding: 5px 9px; max-width: 560px; }
.ac-fill-suggest i { color: var(--gray-500); }
.ac-fill-suggest button { background: #4338ca; color: #fff; border: none; border-radius: 5px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: var(--font-body); }
.ac-fill-suggest button[disabled] { background: #16a34a; cursor: default; }

/* "From your document" provenance — inline field tags */
.ac-doc-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 4px; padding: 1px 6px; vertical-align: 1px; white-space: nowrap; }
.ac-option .ac-doc-tag { margin-left: 8px; }

/* ── Mobile (mirrors arcprice.css breakpoints) ── */
@media (max-width: 768px) {
  .tool-hero { padding: 40px var(--gutter, 16px) 20px; }
  .tool-hero h1 { font-size: 28px; }
  .tool-hero p { font-size: 16px; }
  .tool-hero-meta { flex-direction: column; gap: 8px; align-items: flex-start; }
  .tool-meta-dot { display: none; }
  .ac-newbtn { padding: 8px 12px; font-size: 13px; margin-left: 12px; }

  .ac-timeline { top: 65px; padding: 12px 0; }
  /* Mobile: strip scrolls away (chips can wrap, space is tight); band headers stay sticky
     just under the shorter timeline (24px pills, 12px pad). */
  .ac-summary { position: static; }
  .ac-band { scroll-margin-top: 120px; }
  .ac-band-toggle { top: 113px; }
  .ac-phase-label { font-size: 11.5px; }
  .ac-phase-num { width: 24px; height: 24px; font-size: 12px; }
  .ac-phase-line { margin: 0 2px; }

  .ac-main { padding: 18px 12px 60px; }
  .ac-card { padding: 18px 16px; }
  .ac-q-label { font-size: 1.2rem; }
  .ac-options { grid-template-columns: 1fr; }
  .ac-review-grid { grid-template-columns: 1fr; }
  .ac-results-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .ac-row-top { gap: 6px; }
  .ac-upsell { flex-direction: column; align-items: flex-start; padding: 18px; }
  .ac-modal { padding: 22px 18px; max-width: 95vw; }
  /* Confirm-screen actions: Discard stacks UNDERNEATH Continue, full-width,
     across the whole mobile/tablet range (not just phones). */
  .ac-confirm-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
  .tool-hero { padding: 24px var(--gutter, 14px) 12px; }
  .tool-hero h1 { font-size: 24px; margin-bottom: 8px; }
  .tool-hero p { font-size: 14px; }
  .ac-phase-label { display: none; }
  .ac-phase.active .ac-phase-label { display: block; }
  .ac-wizard-nav { flex-wrap: wrap; gap: 8px; }
  .ac-toggle-row { gap: 10px; }
  /* Upload-confirm rows stack (value over its accept/edit/reject buttons). */
  .ac-confirm-row { flex-direction: column; gap: 8px; }
  .ac-cf-actions { flex-direction: row; flex-wrap: wrap; }
}

/* ── Clause Library lookup (reference search) — sits inside the Matrix view ── */
.ac-lookup-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--gray-200); }
.ac-lookup-block h3 { font-size: 1.05rem; font-weight: 600; color: var(--charcoal); }
.ac-lookup-bar { display: flex; gap: 10px; align-items: stretch; max-width: 620px; }
.ac-lookup-bar input {
  flex: 1; padding: 10px 12px; border: 1.5px solid var(--gray-300); border-radius: 8px;
  font-family: var(--font-body); font-size: 15px; color: var(--charcoal); background: #fff;
}
.ac-lookup-bar input:focus { outline: none; border-color: var(--red); }
.ac-lookup-bar .btn { flex-shrink: 0; }
#ac-lookup-results { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ac-lk-row { border: 1px solid var(--gray-200); border-radius: 9px; padding: 11px 14px; }
.ac-lk-id { font-size: 14px; font-weight: 700; color: var(--charcoal); display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ac-lk-kind { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: capitalize; }
.ac-lk-title { font-size: 13.5px; color: var(--gray-700, #374151); margin: 2px 0 6px; }
.ac-lk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; }
.ac-lk-presc { color: var(--gray-600); }
.ac-lk-meta a { color: var(--red); font-weight: 600; text-decoration: none; }
.ac-lk-meta a:hover { text-decoration: underline; }
.ac-lk-tag { font-size: 11px; font-weight: 700; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 2px 9px; }
.ac-lk-tag.muted { color: var(--gray-600); background: var(--gray-100); }