/* ==========================================================================
   M@B Consulting — CARS Act Assistant widget
   Self-contained. No framework, no build step, no external requests.

   Theming: override the custom properties below in your own stylesheet
   (or in a :root block after this file loads). Everything else follows.
   ========================================================================== */

.matb-a {
  --matb-ink:        #14161a;
  --matb-ink-soft:   #555d68;
  --matb-line:       #e2e5ea;
  --matb-surface:    #ffffff;
  --matb-surface-2:  #f6f7f9;
  --matb-accent:     #1f3a5f;
  --matb-accent-ink: #ffffff;
  --matb-focus:      #2f6fd0;
  --matb-danger:     #8c2f2f;
  --matb-radius:     10px;
  --matb-scrim:      rgba(16, 20, 28, .55);
  --matb-shadow:     0 12px 34px rgba(16, 20, 28, .16), 0 2px 6px rgba(16, 20, 28, .08);
  --matb-font:       system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  font-family: var(--matb-font);
  color: var(--matb-ink);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------------------------------------------------------------- launcher */

.matb-a__launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--matb-accent);
  color: var(--matb-accent-ink);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  box-shadow: var(--matb-shadow);
  transition: transform .16s ease, opacity .16s ease;
}
.matb-a__launcher:hover  { transform: translateY(-1px); }
.matb-a__launcher:active { transform: translateY(0); }
.matb-a__launcher:focus-visible {
  outline: 3px solid var(--matb-focus);
  outline-offset: 2px;
}
.matb-a__launcher[hidden] { display: none; }
.matb-a__launcher svg { width: 17px; height: 17px; flex: none; }

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

.matb-a__panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483001;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: calc(100vw - 32px);
  height: 620px;
  max-height: calc(100vh - 40px);
  background: var(--matb-surface);
  border: 1px solid var(--matb-line);
  border-radius: var(--matb-radius);
  box-shadow: var(--matb-shadow);
  overflow: hidden;
}
.matb-a__panel[hidden] { display: none; }

@media (max-width: 520px) {
  .matb-a__panel {
    right: 0; bottom: 0; left: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .matb-a__launcher { right: 16px; bottom: 16px; }
}

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

.matb-a__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 13px 16px;
  border-bottom: 1px solid var(--matb-line);
  background: var(--matb-surface-2);
}
.matb-a__title { flex: 1 1 auto; min-width: 0; }
.matb-a__title strong {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.matb-a__title span {
  display: block;
  font-size: 12.5px;
  color: var(--matb-ink-soft);
  margin-top: 1px;
}
.matb-a__close {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--matb-ink-soft);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}
.matb-a__close:hover { background: rgba(0,0,0,.06); color: var(--matb-ink); }
.matb-a__close:focus-visible { outline: 2px solid var(--matb-focus); outline-offset: 1px; }

/* ---------------------------------------------------------------- log */

.matb-a__log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
}

.matb-a__msg {
  max-width: 100%;
  /* A long unbroken string (URL, VIN, pasted token) must wrap, not overflow. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.matb-a__msg p { margin: 0 0 .65em; }
.matb-a__msg p:last-child { margin-bottom: 0; }
.matb-a__msg ul, .matb-a__msg ol { margin: 0 0 .65em; padding-left: 1.25em; }
.matb-a__msg li { margin-bottom: .28em; }
.matb-a__msg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--matb-surface-2);
  border: 1px solid var(--matb-line);
  border-radius: 4px;
  padding: 1px 4px;
}
.matb-a__msg a { color: var(--matb-accent); text-decoration: underline; }

.matb-a__msg--user {
  align-self: flex-end;
  max-width: 85%;
  background: var(--matb-accent);
  color: var(--matb-accent-ink);
  padding: 9px 13px;
  border-radius: 12px 12px 3px 12px;
}
.matb-a__msg--user a { color: inherit; }

.matb-a__msg--bot {
  align-self: flex-start;
  max-width: 95%;
}

.matb-a__msg--error {
  align-self: flex-start;
  max-width: 95%;
  color: var(--matb-danger);
  background: #fdf3f3;
  border: 1px solid #f0d9d9;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
}

/* typing indicator */
.matb-a__typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 10px 4px;
}
.matb-a__typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--matb-ink-soft);
  opacity: .35;
  animation: matb-bounce 1.1s infinite ease-in-out;
}
.matb-a__typing i:nth-child(2) { animation-delay: .16s; }
.matb-a__typing i:nth-child(3) { animation-delay: .32s; }
@keyframes matb-bounce {
  0%, 70%, 100% { transform: translateY(0);   opacity: .3; }
  35%           { transform: translateY(-4px); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .matb-a__typing i { animation: none; opacity: .5; }
  .matb-a__launcher { transition: none; }
}

/* ---------------------------------------------------------------- chips */

.matb-a__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}
.matb-a__chip {
  border: 1px solid var(--matb-line);
  background: var(--matb-surface);
  color: var(--matb-ink);
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.matb-a__chip:hover { background: var(--matb-surface-2); border-color: #cfd5dd; }
.matb-a__chip:focus-visible { outline: 2px solid var(--matb-focus); outline-offset: 1px; }

.matb-a__cta {
  display: inline-block;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--matb-accent);
}

/* ---------------------------------------------------------------- composer */

.matb-a__composer {
  flex: none;
  border-top: 1px solid var(--matb-line);
  padding: 10px 12px 8px;
  background: var(--matb-surface);
}
.matb-a__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.matb-a__input {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--matb-line);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  /* Must stay >= 16px: iOS Safari auto-zooms the page on focus below that. */
  font-size: 16px;
  line-height: 1.45;
  max-height: 132px;
  min-height: 40px;
  color: var(--matb-ink);
  background: var(--matb-surface);
}
.matb-a__input:focus {
  outline: none;
  border-color: var(--matb-focus);
  box-shadow: 0 0 0 3px rgba(47, 111, 208, .15);
}
.matb-a__send {
  flex: none;
  height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 8px;
  background: var(--matb-accent);
  color: var(--matb-accent-ink);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.matb-a__send:disabled { opacity: .45; cursor: default; }
.matb-a__send:focus-visible { outline: 3px solid var(--matb-focus); outline-offset: 2px; }

.matb-a__foot {
  margin: 7px 2px 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--matb-ink-soft);
}
.matb-a__foot a { color: inherit; text-decoration: underline; }

.matb-a__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- dark mode */

@media (prefers-color-scheme: dark) {
  .matb-a {
    --matb-ink:       #e8eaee;
    --matb-ink-soft:  #9aa3af;
    --matb-line:      #2b2f36;
    --matb-surface:   #16181c;
    --matb-surface-2: #1d2026;
    --matb-accent:    #4b7fc4;
    --matb-accent-ink:#0d1014;
    --matb-focus:     #6ea3e8;
    --matb-danger:    #e88b8b;
    /* Darker than the light scrim, not lighter: the box behind it is already
       near-black, so a translucent grey would read as haze rather than as a
       layer and the dialog would stop looking modal. */
    --matb-scrim:     rgba(0, 0, 0, .66);
  }
  .matb-a__msg--error { background: #2a1c1c; border-color: #4a2c2c; }
  .matb-a__close:hover { background: rgba(255,255,255,.08); }
  /* Same treatment for the export button beside it. */
  .matb-a__export:hover:not(:disabled) { background: rgba(255,255,255,.08); }
}

/* ---------------------------------------------------------------- balance */

.matb-a__balance {
  display: block;
  font-size: 12px;
  color: var(--matb-ink-soft);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.matb-a__balance:empty { display: none; }

/* ---------------------------------------------------------------- paywall */

.matb-a__paywall {
  align-self: stretch;
  border: 1px solid var(--matb-line);
  border-radius: 10px;
  background: var(--matb-surface-2);
  padding: 15px 15px 13px;
}

.matb-a__paywall-lede {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.5;
}

.matb-a__buy {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--matb-accent);
  color: var(--matb-accent-ink);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 14px;
  cursor: pointer;
  text-align: center;
}
.matb-a__buy:hover:not(:disabled) { filter: brightness(1.08); }
.matb-a__buy:disabled { opacity: .55; cursor: default; }
.matb-a__buy:focus-visible { outline: 3px solid var(--matb-focus); outline-offset: 2px; }

.matb-a__paywall-fine {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--matb-ink-soft);
}

/* The §1789.3 California consumer notice, on the checkout entry point.
   STRUCTURAL ONLY — a NEW component, which is the one thing this file is still
   for. Colour and type decisions live in the hub.css theme bridge. It is set
   smaller than the pitch and larger than nothing: a statutory notice rendered
   at 9px to get it out of the way is a notice we would rather not have
   delivered, which is the opposite of why it is here. */
.matb-a__paywall-notice {
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--matb-line);
  font-size: 11px;
  line-height: 1.5;
  color: var(--matb-ink-soft);
}

.matb-a__paywall-notice p { margin: 0; }

.matb-a__paywall-notice-h {
  font-weight: 600;
  margin-bottom: 3px !important;
}

.matb-a__paywall-alt {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--matb-line);
  font-size: 13.5px;
}
.matb-a__paywall-alt a { color: var(--matb-accent); text-decoration: none; }
.matb-a__paywall-alt a:hover { text-decoration: underline; }

/* Resume-by-phone entry point. A BUTTON that reads as a link, and it has to be
   a button: it opens an in-widget form rather than navigating, so an <a> would
   need a bogus href and would break middle-click and "open in new tab" in ways
   that promise a page which does not exist. This is the appearance reset that
   makes the element neutral — the COLOUR beside it is the same token the sibling
   <a> uses, so the two stay one decision rather than two. */
.matb-a__paywall-alt .matb-a__resume-link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--matb-accent);
  text-decoration: none;
}
.matb-a__paywall-alt .matb-a__resume-link:hover { text-decoration: underline; }

/* --- verified-lead gate ---------------------------------------------------
   Shares the paywall's card shape on purpose: both are the same kind of
   interruption — the conversation stopping until the visitor does something —
   and giving them two different visual languages would make the second one
   read as an error.

   Themed from css/hub.css like everything else here, via the variables above.
   These rules are STRUCTURE, not theme: without them the form is unreadable
   rather than merely unbranded, so they live with the widget that draws it. */
.matb-a__gate {
  align-self: stretch;
  border: 1px solid var(--matb-line);
  border-radius: 10px;
  background: var(--matb-surface-2);
  padding: 15px 15px 13px;
}

.matb-a__gate-why {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.5;
}

.matb-a__gate-form { display: block; }

.matb-a__gate-field { margin: 0 0 10px; }

.matb-a__gate-field label {
  display: block;
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--matb-ink);
}

.matb-a__gate-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid var(--matb-line);
  border-radius: 8px;
  background: var(--matb-surface);
  color: var(--matb-ink);
  font: inherit;
  font-size: 15px;   /* 16px or more avoids iOS zooming the page on focus; 15 is
                        the floor that still looks right, and the panel is not
                        zoom-locked, so this is a nicety rather than a trap */
}

.matb-a__gate-input:focus-visible,
.matb-a__gate-input:focus {
  outline: 2px solid var(--matb-focus);
  outline-offset: 1px;
  border-color: var(--matb-focus);
}

.matb-a__gate-code {
  letter-spacing: .35em;
  font-size: 18px;
  text-align: center;
}

.matb-a__gate-help {
  display: block;
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--matb-ink-soft);
}

/* The consent row. `align-items: start` rather than centre because this text is
   a DRAFT pending counsel and review routinely makes such text longer — at
   centre alignment a three-line consent floats the checkbox into the middle of
   the paragraph. */
.matb-a__gate-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--matb-ink-soft);
  cursor: pointer;
}
.matb-a__gate-consent input { margin: 2px 0 0; flex: 0 0 auto; }

.matb-a__gate-err {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--matb-danger);
}

.matb-a__gate-submit {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  border: 0;
  border-radius: 8px;
  background: var(--matb-accent);
  color: var(--matb-accent-ink);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 12px;
  cursor: pointer;
}
.matb-a__gate-submit:disabled { opacity: .6; cursor: default; }

.matb-a__gate-resend {
  display: block;
  width: 100%;
  margin: 9px 0 0;
  border: 0;
  background: none;
  color: var(--matb-accent);
  font: inherit;
  font-size: 13px;
  padding: 4px;
  cursor: pointer;
  text-decoration: underline;
}
.matb-a__gate-resend:disabled {
  color: var(--matb-ink-soft);
  cursor: default;
  text-decoration: none;
}

/* The optional name/email block on the code step (phone-first, 2026-08-07).
   Set apart by a rule and quieter type so it reads as a subordinate offer
   rather than as more of the form — the visitor must be able to tell at a
   glance that the button above the fold is reachable without touching any of
   it. Deliberately NOT collapsed behind a disclosure: a "add your details"
   toggle tests worse than visible-but-clearly-optional, and hiding fields is
   how you get people wondering what else is hidden. */
.matb-a__gate-optional {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--matb-line);
}

.matb-a__gate-optlede {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--matb-ink-soft);
}

/* Optional labels sit lighter than the code label above them. */
.matb-a__gate-optional .matb-a__gate-field label {
  font-weight: 500;
  color: var(--matb-ink-soft);
}

/* --- first-use legal disclaimer (DISCLAIMER_GATE_ENABLED, 2026-08-09) -------
   A modal over the widget's OWN panel, not over the page. `.matb-a__panel` is
   the containing block (it is `position: fixed`), so `position: absolute;
   inset: 0` covers the conversation and nothing else — the visitor can still
   read the page they were on, which is the whole reason this is not a
   page-level overlay.

   It also covers the suggestion chips, which are the one control the composer
   lock does not reach. The JS checks for the modal before sending anyway; this
   is what makes them unclickable rather than merely ineffective.

   These rules are STRUCTURE for a NEW component, not theme: without them the
   dialog is not a dialog. Colour, type and spacing still come from the
   variables above, which css/hub.css sets. */
.matb-a__disclaimer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--matb-scrim);
}

/* Scrolls INSIDE the box rather than growing the panel. The text is a draft and
   review routinely makes such text longer; at 100% it would push the agree
   button off the bottom of a 620px panel with no way to reach it. */
.matb-a__disclaimer-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  /* The BOX no longer scrolls as a whole — the body does (below). That is what
     keeps the actions group (links + accept button) pinned and always visible
     rather than at the bottom of a scroll. */
  overflow: hidden;
  box-sizing: border-box;
  padding: 16px 16px 14px;
  border: 1px solid var(--matb-line);
  border-radius: 10px;
  background: var(--matb-surface);
  box-shadow: var(--matb-shadow);
}

.matb-a__disclaimer-heading {
  margin: 0 0 10px;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--matb-ink);
}

.matb-a__disclaimer-body {
  /* The scroll region. min-height:0 is load-bearing in a flex column — without
     it the body refuses to shrink below its content and the actions group is
     pushed off the bottom instead of the text scrolling. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--matb-ink-soft);
}
.matb-a__disclaimer-body p { margin: 0 0 9px; }
.matb-a__disclaimer-body p:last-child { margin-bottom: 0; }

/* Pinned footer: links + accept button as one visual unit, always visible. The
   separator makes the boundary with the scrolling text unmistakable. */
.matb-a__disclaimer-actions {
  flex: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--matb-line);
}

.matb-a__disclaimer-links {
  margin: 0 0 2px;
  font-size: 12.5px;
}
/* Conspicuous, per the clickwrap condition: unmistakable links sitting with the
   button. Underlined and weighted, not just a colour shift — colour alone is
   not a reliable "this is a link" signal. Accent colour comes from the hub.css
   bridge token, so a designer tunes the hue there; the emphasis is structural
   and stays here. */
.matb-a__disclaimer-links a {
  color: var(--matb-accent);
  font-weight: 600;
  text-decoration: underline;
}

.matb-a__disclaimer-agree {
  display: block;
  width: 100%;
  flex: none;
  margin: 13px 0 0;
  border: 0;
  border-radius: 8px;
  background: var(--matb-accent);
  color: var(--matb-accent-ink);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 12px;
  cursor: pointer;
}
.matb-a__disclaimer-agree:disabled { opacity: .6; cursor: default; }
.matb-a__disclaimer-agree:focus-visible {
  outline: 3px solid var(--matb-focus);
  outline-offset: 2px;
}

/* --- "Save as PDF" export --------------------------------------------------
   The control, then the printed document.

   STRUCTURE AND PRINT BEHAVIOUR, NOT THEME, which is why it lives here rather
   than in css/hub.css's theme bridge: the widget has to export correctly on
   any host page, including one that never loads hub.css — tools/widget-
   harness.html is exactly that page. Colour and type decisions for the SCREEN
   still belong in the bridge; a printed compliance document is black on white
   by definition and has no palette to inherit.
   ------------------------------------------------------------------------- */

/* THE HEADER ACTIONS CLUSTER (2026-08-11). The export button moved here from
   the composer foot by request. It is affordable in the header only because it
   is icon-only: the title block's subtitle already wraps inside a 400px panel,
   and a labelled button would cost it a line in every session. Sized and shaped
   exactly like the close button beside it, so the pair reads as one cluster
   rather than as a control someone bolted on. */
.matb-a__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.matb-a__export {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--matb-ink-soft);
  cursor: pointer;
}
.matb-a__export:hover:not(:disabled) { background: rgba(0,0,0,.06); color: var(--matb-ink); }
.matb-a__export:focus-visible { outline: 2px solid var(--matb-focus); outline-offset: 1px; }
/* Needed because the rule above sets a display: `hidden` alone would lose. */
.matb-a__export[hidden] { display: none; }
.matb-a__export svg { width: 16px; height: 16px; }

/* Fetching 1.3MB of PDF library. Without a visible busy state the button looks
   inert and gets clicked repeatedly; `disabled` already blocks the repeat, this
   is what says so. */
.matb-a__export:disabled { cursor: default; opacity: .5; }
.matb-a__export[aria-busy="true"] svg { animation: matb-pulse 1s ease-in-out infinite; }
@keyframes matb-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .matb-a__export[aria-busy="true"] svg { animation: none; }
}

/* The print container is INERT ON SCREEN — never in the layout, never in the
   accessibility tree (it also carries aria-hidden). It is a direct child of
   <body> and deliberately OUTSIDE the widget root: nothing inside .matb-a can
   reach it, so the widget's own `prefers-color-scheme: dark` block cannot tint
   a document that has to be black on white. */
.matb-a-print { display: none; }

@media print {
  /* HIDE THE HOST PAGE AND THE LIVE WIDGET — and win on specificity, not on
     !important and not on load order. `html.matb-a-printing body > *:not(...)`
     is (0,2,2); the site's own rules on these elements are class selectors at
     (0,1,0)–(0,2,0), so this beats them wherever they sit. Load order would NOT
     have been enough: cars-act-readiness.html loads this file BEFORE hub.css,
     on purpose.

     GATED ON THE CLASS, which the export adds for the duration and takes away
     again. Ungated, every ordinary Ctrl-P of a page carrying the widget would
     come out blank. */
  html.matb-a-printing body > *:not(.matb-a-print) { display: none; }
  html.matb-a-printing .matb-a-print { display: block; }

  html.matb-a-printing,
  html.matb-a-printing body { background: #fff; color: #000; }

  /* THE HOST PAGE'S OWN BOX MUST NOT SHAPE THE DOCUMENT. hub.css pads the body
     by --nav-h to clear the fixed nav, and that padding survives into print as
     an inch of blank paper above the letterhead; the test harness constrains
     the body to 640px, which would column the document for no reason. Both are
     sensible screen rules and neither has any business here. (0,1,2) beats the
     bare `body` selectors that set them, so again no !important. */
  html.matb-a-printing body {
    margin: 0;
    padding: 0;
    max-width: none;
    width: auto;
  }

  /* Margins MUST come from @page: padding on the container reaches only the
     first and last page, so a three-page answer would lose its margins in the
     middle. ⚠️ @page cannot be scoped to a class, so this also widens an
     ordinary print of any page carrying the widget, from the browser default of
     roughly 10mm to 16mm. That is the price of correct pagination, it applies
     to one page of the site today, and it is a mild one. */
  @page { margin: 16mm; }

  .matb-a-print__doc {
    /* Stated rather than inherited from --matb-font: this container sits
       outside .matb-a, where that variable does not exist. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
  }

  .matb-a-print__head {
    border-bottom: 1.5pt solid #000;
    padding-bottom: 6pt;
    margin-bottom: 10pt;
  }
  .matb-a-print__wordmark {
    margin: 0;
    font-size: 17pt;
    font-weight: 700;
    letter-spacing: -.01em;
  }
  .matb-a-print__ident { margin: 2pt 0 0; font-size: 10pt; }

  .matb-a-print__meta {
    margin: 0 0 14pt;
    font-size: 9pt;
    line-height: 1.45;
  }

  .matb-a-print__turn { margin: 0 0 12pt; }

  /* A QUESTION IS SHORT — keep it whole on one page. AN ANSWER IS NOT, and must
     be free to run across as many pages as it needs: `break-inside: avoid` on
     the answer block is how you get a long answer either overflowing its page
     or clipped at the bottom of one. So the avoid-break sits on the answer's
     paragraphs and list items instead, which keeps individual thoughts intact
     while letting the whole flow. */
  .matb-a-print__turn--q { break-inside: avoid; page-break-inside: avoid; }
  .matb-a-print__turn--a { break-inside: auto; page-break-inside: auto; }
  .matb-a-print__turn--a p,
  .matb-a-print__turn--a li { break-inside: avoid; page-break-inside: avoid; }

  .matb-a-print__label {
    margin: 0 0 3pt;
    font-size: 8.5pt;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    /* Never strand a label at the foot of a page with its content overleaf. */
    break-after: avoid;
    page-break-after: avoid;
  }

  /* The chat-bubble look does not survive the trip and should not: print is a
     document, not a screenshot of a widget. The question reads as a heading
     for the answer under it. */
  .matb-a-print__turn--q .matb-a-print__content { font-weight: 600; }

  .matb-a-print__content p { margin: 0 0 6pt; }
  .matb-a-print__content p:last-child { margin-bottom: 0; }
  .matb-a-print__content ul,
  .matb-a-print__content ol { margin: 0 0 6pt; padding-left: 16pt; }
  .matb-a-print__content li { margin: 0 0 3pt; }
  .matb-a-print__content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
  }
  .matb-a-print__content a { color: #000; text-decoration: underline; }

  /* A printed link nobody can follow is a dead reference. renderMarkdown
     already refuses to make an anchor out of anything unsafe, so every href
     reaching this rule is one of ours, and the export rewrites site-relative
     ones to absolute before they get here. */
  .matb-a-print__content a[href]::after {
    content: " (" attr(href) ")";
    font-size: .88em;
    word-break: break-all;
  }

  .matb-a-print__disclaimer {
    margin: 14pt 0 0;
    padding-top: 6pt;
    border-top: .75pt solid #000;
    font-size: 9pt;
    line-height: 1.45;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* --- "want a copy first?" on close (2026-08-11) ----------------------------
   Shares the disclaimer modal's shape on purpose: both stop the panel until
   the visitor answers something, and giving them two visual languages would
   make the second read as an error rather than as a question.

   Unlike that one it is NOT a gate — every route out of it closes the panel,
   which is what the visitor asked for by clicking the X. It is a reminder with
   a button on it.
   ------------------------------------------------------------------------- */
.matb-a__closeask {
  position: absolute;
  inset: 0;
  z-index: 3;               /* above the disclaimer's 2, so it is never behind */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--matb-scrim);
}

.matb-a__closeask-box {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 14px;
  border: 1px solid var(--matb-line);
  border-radius: 10px;
  background: var(--matb-surface);
  box-shadow: var(--matb-shadow);
}

.matb-a__closeask-heading {
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.matb-a__closeask-body {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--matb-ink-soft);
}

.matb-a__closeask-save {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--matb-accent);
  color: var(--matb-accent-ink);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 12px;
  cursor: pointer;
}
.matb-a__closeask-save:focus-visible { outline: 3px solid var(--matb-focus); outline-offset: 2px; }

/* Quiet, but a real button and never hidden — closing must not be the harder
   of the two things on this card. */
.matb-a__closeask-go {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  border: 0;
  background: none;
  color: var(--matb-ink-soft);
  font: inherit;
  font-size: 13px;
  padding: 6px 4px;
  cursor: pointer;
  text-decoration: underline;
}
.matb-a__closeask-go:hover { color: var(--matb-ink); }
.matb-a__closeask-go:focus-visible { outline: 2px solid var(--matb-focus); outline-offset: 1px; }