/* ============================================================================
   The Vault System — modal anatomy (D-4)
   DESIGN_SYSTEM.md §Signature 4: "orange status dot + title + countdown pill
   header; key-value rows; context wash panel; decision pair footer.
   Security-sensitive modals (password/2FA) use the same anatomy with a navy
   header band."

   Tokens only. A literal themed colour in this file is a review-blocker (§1b).

   TWO LAYERS, same as D-3's vault.css:

   1. Base overrides of `.modal-*` so EVERY modal in the portal — including the
      ones still living inside page markup that D-5/D-6 have not reached — gets
      the Vault shell instead of FlatLab's.
   2. `.fb-modal-*` anatomy classes for the parts: status dot, header pill,
      key-value rows, context panel, decision-pair footer. New markup opts in.

   SPECIFICITY — the rules being beaten, stated so the next person can check:
     • `bootstrap-reset.css` .modal-header      (0,1,0) background #00A8B3
     • `bootstrap-reset.css` .modal-content     (0,1,0) border:none
     • `style.css` .modal-header h4.modal-title (0,1,2) font-weight 300/Open Sans
     • `style.css` .modal-body label            (0,1,1) Open Sans
   layout.js appends this sheet AFTER the page's own <link>s and after
   vault.css, so a rule that merely TIES on specificity still wins. The
   .modal-title rule below matches style.css's shape outright rather than
   relying on order, because that one is (0,1,2) and would otherwise beat us.

   THE × CLOSE BUTTON IS NOT COMING BACK HERE.
   `style.css` hides it with `display:none !important` at (0,2,0) and has since
   before this design existed — "modals must dismiss via explicit Cancel/Close
   buttons in the footer". That is a deliberate house rule, not a bug, so the
   anatomy below puts dismissal in the footer and never draws a glyph that a
   stylesheet two files away would silently swallow.

   THE INVARIANT (§1b): orange = a decision is pending, green = approved /
   protected. The decision pair is green approve vs considered-NEUTRAL deny.
   A destructive modal therefore gets a NAVY band with a denied status dot —
   not a red header. The weight belongs on the button you have to press, not
   on the whole window; a red band shouts before the reader has read anything.
   ========================================================================= */

/* ── Shell ───────────────────────────────────────────────────────────────
   Radius 14 (card), 1px line, and the overlay shadow — the one place the
   system uses a shadow at all. */

.modal-content,
.fb-modal .modal-content {
  background: var(--fb-surface);
  color: var(--fb-ink);
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-radius-card);
  box-shadow: var(--fb-shadow-overlay);
}

/* ── Header ──────────────────────────────────────────────────────────────
   Default: surface ground, ink title, a line underneath. The dot and the pill
   are optional slots — a plain modal just has a title. */

.modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  background: var(--fb-surface);
  color: var(--fb-ink);
  border-bottom: 1px solid var(--fb-line);
  border-radius: var(--fb-radius-card) var(--fb-radius-card) 0 0;
}

/* Matches style.css's own shape (0,1,2) so this wins on specificity rather
   than on load order. `.modal-title` alone would lose. */
.modal-header h4.modal-title,
.modal-header .modal-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--fb-font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}

.modal-header .modal-title i { font-size: 15px; opacity: .85; }

/* The brand band — security-sensitive modals only (password, 2FA, anything
   that changes how someone signs in). It is a signal, so it has to stay rare:
   if every modal has a band, the band says nothing.
   E-1: was --fb-navy, which the Split System retires. The spec names the
   replacement outright — §Signature 4, "Security modals share the anatomy
   with a --fb-raised header band" — and --fb-on-solid reads on it in both
   themes (6.98 light, 12.21 dark). */
.modal-header.fb-modal-band,
.fb-modal-band {
  background: var(--fb-raised);
  color: var(--fb-on-solid);
  border-bottom-color: var(--fb-raised);
}

.modal-header.fb-modal-band .modal-title,
.modal-header.fb-modal-band h4.modal-title { color: var(--fb-on-solid); }

/* The dismiss ✕. D-6 addition: none of D-4's own modals carry one — they all
   close from a footer button — so a banded modal WITH an ✕ (login-report's
   session detail is the first) got Bootstrap's default dark glyph on the navy
   band, i.e. an invisible close control. Pushed to the right so the flex
   header does not leave it beside the title, and given a hit area rather than
   a bare glyph. Matched at `.modal-header .close` (0,2,0) to beat
   bootstrap-reset's own `.close` rule on specificity rather than order. */
.modal-header .close {
  margin-left: auto;
  padding: 4px 8px;
  background: none;
  border: none;
  color: var(--fb-muted);
  font-size: 22px;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  cursor: pointer;
}

.modal-header .close:hover { color: var(--fb-ink); }

.modal-header.fb-modal-band .close { color: var(--fb-on-solid); opacity: .75; }
.modal-header.fb-modal-band .close:hover { color: var(--fb-on-solid); opacity: 1; }

/* §Shape's ring, with the band's own exception: on .fb-modal-band the ground
   IS --fb-raised, which in light is the same Harbor as --fb-brand — a brand
   ring there would be invisible. The banded case takes --fb-on-solid, which
   is the ink the band already proves it can carry (6.98:1 light, 12.21:1
   dark). Same reasoning as the sidebar's ring in vault-chrome.css. */
.modal-header .close:focus-visible {
  /* A <button> — !important cancels bootstrap-reset.css line 138; see the
     focus block at the top of css/vault.css. */
  outline: 2px solid var(--fb-brand) !important;
  outline-offset: 2px;
  border-radius: var(--fb-radius-control);
  box-shadow: none;
}

.modal-header.fb-modal-band .close:focus-visible {
  outline-color: var(--fb-on-solid) !important;
}

/* Status dot. The colour IS the statement — see the invariant. */
.fb-modal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--fb-brand);
}

.fb-modal-dot.is-pending  { background: var(--fb-alert); }
.fb-modal-dot.is-verified { background: var(--fb-verified); }
.fb-modal-dot.is-denied   { background: var(--fb-denied); }

/* Header pill — the countdown slot on a review modal, and a quiet label
   ("Authenticator app", "Email") everywhere else. Mono + tabular so a ticking
   value does not change width digit by digit. */
.fb-modal-pill {
  margin-left: auto;
  padding: 4px 11px;
  font-family: var(--fb-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .3px;
  border-radius: var(--fb-radius-pill);
  background: var(--fb-neutral-wash);
  color: var(--fb-muted);
  white-space: nowrap;
}

/* On the navy band the neutral wash disappears, so the pill carries its own
   translucent ground rather than a second opaque colour. */
.fb-modal-band .fb-modal-pill {
  background: var(--fb-on-band-wash);
  color: var(--fb-on-solid);
}

/* A pending countdown is the one thing allowed to be orange. */
.fb-modal-pill.is-pending {
  background: var(--fb-alert-wash);
  color: var(--fb-alert-ink);
}

/* D-11: --fb-on-alert, not --fb-on-solid. White on #fe6901 is 2.90:1 in both
   themes — one of the four numbers vault-tokens.css cites as retiring the
   blanket on-solid. --fb-on-alert (ink) is 5.92:1. */
.fb-modal-band .fb-modal-pill.is-pending {
  background: var(--fb-alert);
  color: var(--fb-on-alert);
}

/* ── Body ────────────────────────────────────────────────────────────── */

.modal-body {
  padding: 18px;
  color: var(--fb-ink);
  font-family: var(--fb-font-ui);
  font-size: 13.5px;
}

/* style.css sets `.modal-body label` to Open Sans (0,1,1) — a family this
   portal no longer loads, so it was resolving to a system fallback that
   disagreed with every other label on the page. Matched shape, not order. */
.modal-body label,
.modal-body .fb-field-label {
  font-family: var(--fb-font-ui);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--fb-ink);
}

/* A long modal scrolls its body, never the page behind it. */
.fb-modal-scroll {
  max-height: 70vh;
  overflow-y: auto;
}

.modal-body p { color: var(--fb-ink); }
.modal-body hr { border-top: 1px solid var(--fb-line); margin: 16px 0; }

/* Section heading inside a modal body. */
.fb-modal-section + .fb-modal-section { margin-top: 26px; }

.fb-modal-section > h5,
h5.fb-modal-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--fb-line);
  font: 600 13px/1.2 var(--fb-font-ui);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--fb-muted);
}

.fb-modal-hint {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fb-muted);
}

/* ── Key-value rows ──────────────────────────────────────────────────────
   For the facts a modal states rather than collects. A value you cannot edit
   should not be dressed as a disabled input — that reads as "broken field",
   not as "this is what it is". */

.fb-kv { display: block; }

.fb-kv-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--fb-row-line);
}

.fb-kv-row:last-child { border-bottom: none; }

.fb-kv-key {
  flex: none;
  min-width: 118px;
  font: 600 11px/1.4 var(--fb-font-ui);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fb-muted);
}

.fb-kv-val {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--fb-ink);
  overflow-wrap: anywhere;
}

/* Anything a human might read back digit by digit. */
.fb-kv-val.fb-mono {
  font-family: var(--fb-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Context panel ───────────────────────────────────────────────────────
   The wash block that explains why you are being asked. Neutral by default;
   the semantic variants exist so a panel can carry meaning WITHOUT a second
   component. */

.fb-modal-context {
  padding: 13px 15px;
  margin-bottom: 14px;
  background: var(--fb-neutral-wash);
  border-radius: var(--fb-radius-control);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fb-ink);
}

.fb-modal-context:last-child { margin-bottom: 0; }

.fb-modal-context.is-pending {
  background: var(--fb-alert-wash);
  color: var(--fb-alert-ink);
}

.fb-modal-context.is-verified {
  background: var(--fb-verified-wash);
  color: var(--fb-verified-ink);
}

.fb-modal-context.is-denied {
  background: var(--fb-denied-wash);
  color: var(--fb-denied);
}

.fb-modal-context.is-brand {
  background: var(--fb-brand-wash);
  color: var(--fb-ink);
}

/* ── Footer / decision pair ──────────────────────────────────────────────
   Actions right-aligned, primary last, quiet cancel beside it. `.fb-modal-aux`
   pushes a tertiary action (Remove photo, Reset to defaults) to the far left
   so it cannot be mistaken for part of the pair. */

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  background: var(--fb-surface);
  border-top: 1px solid var(--fb-line);
  border-radius: 0 0 var(--fb-radius-card) var(--fb-radius-card);
}

/* Bootstrap 4 puts margins on every direct child of .modal-footer, which
   fights the gap above and leaves uneven spacing. */
.modal-footer > * { margin: 0; }

/* Ties `.modal-footer > *` above on specificity (0,1,0) and comes later, so
   the auto margin wins without reaching for !important. */
.fb-modal-aux { margin-right: auto; }

/* ── Sub-modal stacking ──────────────────────────────────────────────────
   security-modal.js opens sub-modals on top of the main one and raises them in
   JS. The backdrop z-index is set there too; this only guarantees the shadow
   still reads when two overlays stack. */
.modal.fb-modal-stacked .modal-content { box-shadow: var(--fb-shadow-overlay); }

/* ── Security modal ──────────────────────────────────────────────────────
   These rules used to be a <style> block that security-modal.js injected into
   <head> at runtime, carrying eleven literal hexes. Moved here so the modal is
   themed by the same file as everything else, and so a hardcoded colour in it
   is visible to review instead of buried in a JS template string. */

#securityModal .secm-tfa-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  margin-bottom: 10px;
  background: var(--fb-surface);
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-radius-control);
  transition: border-color .2s ease, background .2s ease;
}

/* An enabled 2FA method IS the "protected" state (§Signature 3), so green
   here is the invariant being used correctly rather than an exception to it. */
#securityModal .secm-tfa-card.active {
  border-color: var(--fb-verified);
  background: var(--fb-verified-wash);
}

#securityModal .secm-tfa-card.is-unavailable { opacity: .55; }

#securityModal .secm-tfa-card .method-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#securityModal .secm-tfa-card .method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fb-brand-wash);
  color: var(--fb-brand);
  font-size: 17px;
}

#securityModal .secm-tfa-card.active .method-icon {
  background: var(--fb-verified-wash);
  color: var(--fb-verified);
}

#securityModal .secm-tfa-card .method-name {
  font: 600 13.5px/1.3 var(--fb-font-ui);
  color: var(--fb-ink);
}

#securityModal .secm-tfa-card .method-desc {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--fb-muted);
}

/* ── Password rule list ──────────────────────────────────────────────────
   Green = this requirement is met (protected); red = it is not. Same two
   meanings the rest of the system uses.

   Shared by the security modal and the login page's forced-change modal, which
   had two independent copies with different colours and different markup — one
   drew ticks with ::before, the other with a Font Awesome icon it swapped by
   overriding the glyph in CSS. D-5 made it one component; password-reset.html
   will be the third caller when D-6 reaches it. Both markup shapes are
   supported so neither page had to be rewritten to adopt it. */

.fb-pw-rules,
#securityModal .pw-rules { margin: 10px 0 14px; padding: 0; list-style: none; }

.fb-pw-rules li,
#securityModal .pw-rules li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--fb-muted);
  transition: color .2s ease;
}

.fb-pw-rules li.rule-pass,
#securityModal .pw-rules li.rule-pass { color: var(--fb-verified-ink); }

.fb-pw-rules li.rule-fail,
#securityModal .pw-rules li.rule-fail { color: var(--fb-denied); }

/* Markup shape A (security modal): no icon element — the tick is a ::before. */
#securityModal .pw-rules li.rule-pass::before { content: '\2713\00a0'; }
#securityModal .pw-rules li.rule-fail::before { content: '\2717\00a0'; }

/* Markup shape B (login): the page ships an <i class="fa fa-circle-o"> and
   swaps the glyph by content. Keeping that means the login JS, which toggles
   only the li class, needs no change. */
.fb-pw-rules li > .fa { width: 14px; font-size: 11px; text-align: center; }
.fb-pw-rules li.rule-pass > .fa::before { content: '\f058'; }
.fb-pw-rules li.rule-fail > .fa::before { content: '\f057'; }

/* The title is a SIBLING of the list, not a child — both sit inside the
   context panel — so this cannot be scoped under .fb-pw-rules. */
.rule-title {
  margin-bottom: 8px;
  font: 600 11px/1.2 var(--fb-font-ui);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fb-muted);
}

/* Linked SSO providers. */
#secm-linked-providers { display: flex; flex-direction: column; gap: 8px; }

.fb-provider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--fb-surface);
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-radius-control);
}

.fb-provider-id { display: flex; align-items: center; gap: 10px; min-width: 0; }

.fb-provider-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fb-brand-wash);
  color: var(--fb-brand);
}

.fb-provider-name { font: 600 12.5px/1.3 var(--fb-font-ui); color: var(--fb-ink); }

.fb-provider-email {
  font-size: 11.5px;
  color: var(--fb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.fb-provider-empty {
  padding: 12px 14px;
  border: 1px dashed var(--fb-line);
  border-radius: var(--fb-radius-control);
  font-size: 12.5px;
  color: var(--fb-muted);
}

/* ── One-time-code input ─────────────────────────────────────────────────
   Mono, wide tracking, centred. Used by 2FA setup and the email-change step. */

.fb-code-input.form-control {
  max-width: 190px;
  height: 46px;
  margin: 0 auto 12px;
  font-family: var(--fb-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 21px;
  letter-spacing: 6px;
  text-align: center;
  color: var(--fb-ink);
}

/* ── Codes & secrets ─────────────────────────────────────────────────────
   Backup codes and the TOTP manual-entry key: mono, on a context wash, sized
   to be transcribed by a human without misreading a character. */

.fb-code-block {
  display: inline-block;
  padding: 14px 18px;
  background: var(--fb-neutral-wash);
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-radius-control);
  text-align: left;
}

.fb-code-line {
  font-family: var(--fb-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1.75;
  color: var(--fb-ink);
}

.fb-code-inline {
  display: inline-block;
  padding: 5px 12px;
  background: var(--fb-neutral-wash);
  border-radius: var(--fb-radius-control);
  font-family: var(--fb-font-mono);
  font-variant-numeric: tabular-nums;   /* E-2: its sibling .fb-code-line had it */
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--fb-ink);
}

/* The QR code is artwork the app has to scan — it needs a white ground in
   BOTH themes, so this one is deliberately not themed. --fb-on-solid is white
   in both, which is exactly the guarantee wanted here. */
.fb-qr {
  max-width: 200px;
  padding: 8px;
  background: var(--fb-on-solid);
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-radius-control);
}

.fb-center { text-align: center; }

/* ── Outcome panel ───────────────────────────────────────────────────────
   The "you are now protected" step. Green, and it has earned it. */

.fb-modal-outcome { padding: 18px 8px; text-align: center; }

.fb-modal-outcome .fb-outcome-icon { font-size: 46px; color: var(--fb-verified); }

.fb-modal-outcome h4 {
  margin: 12px 0 6px;
  font: 600 17px/1.3 var(--fb-font-display);
  color: var(--fb-verified-ink);
}

.fb-modal-outcome p { margin: 0; font-size: 13px; color: var(--fb-muted); }

/* ── Countdown (DESIGN_SYSTEM.md §Signature 1) ───────────────────────────
   "Mono numerals, alert-orange progress bar on --fb-row-line track, caption."
   One component, portal + phone — D-8 builds the app's from this anatomy, and
   D-5's review modal reuses it here. The portal's only countdown today is the
   session-expiry warning in js/session.js.

   IT STAYS ORANGE ALL THE WAY DOWN. The old session modal turned red under 30
   seconds, and red in this system means denied or destructive. A session
   running out is a DECISION STILL PENDING — the most orange thing there is.
   Urgency is carried by the bar draining, which is information rather than a
   second colour saying something the system reserves for another meaning.

   E-6 / Q-34 — WHICH orange. The NUMERALS take --fb-alert-INK; the BAR keeps
   --fb-alert. Composed-page QA measured `--fb-alert` numerals at 2.90:1 on
   this modal's own --fb-surface ground (and 2.40:1 / 1.41:1 on the app's
   sibling) — under 3:1, so they missed even the large-text floor, on the one
   number the customer has to read before money moves. --fb-alert-ink is the
   alert family derived to pass as TEXT: 5.39:1 light, 7.52:1 dark. The
   invariant is that orange MEANS a pending decision; it was never that a
   particular hex is allowed to be unreadable. Reviewer's ruling; DESIGN_SYSTEM
   §Signature 1 carries the amendment note. The bar below is a graphic and is
   unchanged — see the note on the track. */

.fb-countdown-value {
  font-family: var(--fb-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 1px;
  color: var(--fb-alert-ink);
}

/* E-6 / Q-34, the bar's half — MEASURED, and it does not fully pass.
   §Signature 1 names this track (`--fb-row-line`) and the reviewer's ruling is
   "fix the TRACK if any pairing misses 3:1, never the orange". Every pairing,
   read off the rendered component:

     bar --fb-alert vs track --fb-row-line   2.49:1 light · 5.23:1 dark
     bar --fb-alert vs --fb-surface ground   2.90:1 light · 5.63:1 dark
     track vs its ground                     1.17:1 light · 1.08:1 dark

   Dark passes. **Light cannot be fixed by changing the track**, and that is
   arithmetic rather than taste: `#FE6901` has relative luminance 0.312, so a
   3:1 partner needs luminance ≤ 0.0707 (about `#3F4348`, darker than
   --fb-muted and near --fb-ink) or ≥ 1.036, which is brighter than white and
   therefore does not exist. No plausible Harbor Light track reaches 3:1, and
   the one value that does — --fb-ink — would put a near-black rail under an
   orange bar on a paper ground, which is a different design, not a fix.

   So the light-theme residual is held as a QUANTIFIED, fails-if-it-ever-passes
   exception in scripts/check-contrast.mjs (the Q-11 machinery), pinned at
   2.49:1: if anyone re-values --fb-alert or --fb-row-line and the number
   moves, the build says so. The orange is not touched. Filed as Q-37 for the
   reviewer with the two options that would actually close it (a bordered
   track, or a spec amendment naming a different light track). */
.fb-countdown-track {
  width: 100%;
  height: 4px;
  margin: 12px 0 14px;
  border-radius: var(--fb-radius-pill);
  background: var(--fb-row-line);
  overflow: hidden;
}

.fb-countdown-bar {
  height: 100%;
  width: 100%;
  border-radius: var(--fb-radius-pill);
  background: var(--fb-alert);
}

.fb-countdown-caption {
  font-size: 12px;
  color: var(--fb-muted);
}

/* ── Confirm dialog (js/fb-confirm.js) ───────────────────────────────────
   The shared replacement for window.confirm(), which cannot be themed, cannot
   be read by the design system, and looks like the browser rather than the
   product. Same anatomy as everything above: band header, context body,
   decision-pair footer. */

#fbConfirmModal .modal-dialog { max-width: 460px; }

#fbConfirmModal .fb-confirm-message {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fb-ink);
}

#fbConfirmModal .fb-confirm-detail {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fb-muted);
}

/* Optional note (FBConfirm.withNote): a plain labelled textarea. */
#fbConfirmModal .fb-confirm-note { margin-top: 14px; }
#fbConfirmModal .fb-confirm-note[hidden] { display: none; }
#fbConfirmModal .fb-confirm-note label {
  display: block;
  margin-bottom: 5px;
  font: 600 12px/1.4 var(--fb-font-ui);
  color: var(--fb-muted);
}
#fbConfirmModal .fb-confirm-note textarea { resize: vertical; min-height: 76px; font-size: 13.5px; }
#fbConfirmModal .fb-confirm-note-foot { display: flex; justify-content: space-between; gap: 10px; }
#fbConfirmModal .fb-confirm-note-foot .fb-field-error:empty { display: none; }
#fbConfirmModal .fb-confirm-note-count {
  margin-left: auto;
  margin-top: 5px;
  font: 400 11.5px/1.4 var(--fb-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fb-muted);
}