/* web/modules/custom/easytax_documents/css/components/easytax-bsgen.css
   Balance Sheet Generator — screen UI (Form API). Not for mPDF.

   STRICTLY SCOPED: every selector begins with .etd-bsgen-form (the <form>) or
   .etd-bsgen (the tool-page wrapper). Nothing here can touch the header,
   footer, sidebars or any global/Bootstrap element. No full-bleed breakout. */

/* ===================================================================== */
/* DESIGN TOKENS — scoped to our wrapper only (never :root)                */
/* ===================================================================== */
.etd-bsgen,
.etd-bsgen-form {
  /* Brand (locked — referenced, never redefined) */
  --etd-navy:         var(--et-navy, #1C3557);
  --etd-accent:       var(--et-green, #3CB944);
  --etd-accent-2:     var(--et-green-2, #1D9E75);
  --etd-accent-press: #2E9A3B;
  --etd-on-accent:    #FFFFFF;

  /* Text ramp */
  --etd-heading: var(--et-navy, #1C3557);
  --etd-ink:     #0B1220;
  --etd-text:    #434A57;
  --etd-muted:   #6B7482;
  --etd-faint:   #9AA2AF;

  /* Surfaces (navy-biased neutrals) */
  --etd-bg:          #F5F7FA;
  --etd-surface:     #FFFFFF;
  --etd-surface-2:   #F3F6F9;
  --etd-tint:        rgba(60, 185, 68, .06);
  --etd-tint-strong: rgba(60, 185, 68, .12);

  /* Borders */
  --etd-border:        rgba(20, 33, 61, .09);
  --etd-border-strong: rgba(20, 33, 61, .16);
  --etd-ring:          rgba(60, 185, 68, .22);

  /* Elevation (two-layer) */
  --etd-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --etd-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 10px -4px rgba(16, 24, 40, .08);
  --etd-shadow:    0 1px 2px rgba(16, 24, 40, .05), 0 10px 24px -8px rgba(16, 24, 40, .12);
  --etd-shadow-lg: 0 2px 4px rgba(16, 24, 40, .06), 0 22px 40px -12px rgba(16, 24, 40, .18);

  /* Radii */
  --etd-r-lg:   16px;
  --etd-r-md:   12px;
  --etd-r-sm:   9px;
  --etd-r-pill: 9999px;

  /* Type */
  --etd-font:             'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --etd-label-tracking:   .005em;
  --etd-eyebrow-tracking: .09em;
}

/* ===================================================================== */
/* 0. Localized reset — ONLY inside our own form/wrapper                   */
/* ===================================================================== */
.etd-bsgen-form,
.etd-bsgen-form *,
.etd-bsgen-form *::before,
.etd-bsgen-form *::after,
.etd-bsgen,
.etd-bsgen *,
.etd-bsgen *::before,
.etd-bsgen *::after {
  box-sizing: border-box !important;
}
.etd-bsgen-form {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.55;
  color: var(--et-body-color, #45464F);
  max-width: 56rem;
  margin: 0 auto;
}
.etd-bsgen-form h2, .etd-bsgen-form h3, .etd-bsgen-form h4 { margin: 0; padding: 0; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--et-navy, #1C3557); }
.etd-bsgen-form p { margin: 0; }
.etd-bsgen-form fieldset { border: 0 !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; }
.etd-bsgen-form legend { padding: 0 !important; margin: 0 !important; width: auto !important; float: none !important; }
.etd-bsgen-form .fieldset-wrapper { padding: 0 !important; }
/* Neutralise the theme's per-.form-item margins — grid gap handles spacing. */
.etd-bsgen-form .form-item,
.etd-bsgen-form .js-form-item { margin: 0 !important; }

/* ===================================================================== */
/* 1. Cards                                                                */
/* ===================================================================== */
.etd-bsgen-form .etd-card {
  display: block;
  background: #fff;
  border: 1px solid var(--et-hairline, rgba(28, 53, 87, .10));
  border-radius: var(--et-radius-lg, 16px);
  box-shadow: var(--et-shadow-rest, 0 8px 24px rgba(16, 32, 58, .06));
  padding: var(--et-space-6, 24px);
  margin: 0 0 var(--et-space-5, 20px) 0;
}
.etd-bsgen-form .etd-card__hd { display: flex; align-items: center; gap: var(--et-space-3, 12px); margin-bottom: var(--et-space-1, 4px); }
.etd-bsgen-form .etd-card__hd h2 { font-size: 1.1875rem; margin: 0; }
.etd-bsgen-form .etd-card__ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--etd-r-sm, 9px); background: var(--etd-tint-strong); color: var(--etd-accent-2); display: flex; align-items: center; justify-content: center; }
.etd-bsgen-form .etd-card__sub { color: var(--et-body-color, #45464F); font-size: 0.875rem; line-height: 1.5; margin: var(--et-space-1, 4px) 0 var(--et-space-4, 16px) 0; }

/* ===================================================================== */
/* 2. Field grid + inputs                                                  */
/* ===================================================================== */
.etd-bsgen-form .etd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--et-space-4, 16px) var(--et-space-5, 20px); }
.etd-bsgen-form .etd-grid .etd-fld--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .etd-bsgen-form .etd-grid { grid-template-columns: 1fr; } }

.etd-bsgen-form .etd-fld { display: flex; flex-direction: column; gap: var(--et-space-2, 8px); margin: 0; }
.etd-bsgen-form .etd-card > .etd-fld { margin-bottom: var(--et-space-4, 16px); }

/* Labels — small, muted, quiet: they recede so the value leads. */
.etd-bsgen-form .etd-fld > label,
.etd-bsgen-form .etd-card label {
  font-size: 0.8125rem; font-weight: 600;
  color: var(--etd-muted) !important;
  letter-spacing: var(--etd-label-tracking); margin: 0;
}

/* Inputs — near-black value, hairline rest border, 12px radius. */
.etd-bsgen-form .etd-inp,
.etd-bsgen-form input.etd-inp,
.etd-bsgen-form input[type="text"].etd-inp,
.etd-bsgen-form input[type="number"].etd-inp,
.etd-bsgen-form textarea.etd-inp {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  font: inherit !important;
  font-size: 0.9375rem !important;
  line-height: 1.4 !important;
  color: var(--etd-ink) !important;
  background: var(--etd-surface) !important;
  border: 1px solid var(--etd-border-strong) !important;
  border-radius: var(--etd-r-md) !important;
  padding: var(--et-space-3, 12px) !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.etd-bsgen-form .etd-inp::placeholder { color: var(--etd-faint); }
/* Tabular numerals wherever digits line up. */
.etd-bsgen-form input[type="number"].etd-inp { font-variant-numeric: tabular-nums; }
/* Focus — quiet: 1px accent border + soft ring, not a bright bloom. */
.etd-bsgen-form .etd-inp:focus {
  outline: none !important;
  border-color: var(--etd-accent) !important;
  box-shadow: 0 0 0 3px var(--etd-ring) !important;
}
.etd-bsgen-form textarea.etd-inp { min-height: 5rem !important; resize: vertical !important; }

/* ₹ prefix — a proper inline input group. Grid: label spans the top row, then
   [prefix | input] join as one control. The prefix cell stretches to the
   input's height (grid stretch) so ₹ is always vertically centred — no magic
   pixels, no absolute positioning. */
.etd-bsgen-form .etd-fld--money {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: var(--et-space-2, 8px) 0;
}
.etd-bsgen-form .etd-fld--money > label { grid-column: 1 / -1; }
.etd-bsgen-form .etd-fld--money .field-prefix {
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px 0 12px;
  border: 1px solid var(--etd-border-strong); border-right: 0;
  border-radius: var(--etd-r-md) 0 0 var(--etd-r-md);
  background: var(--etd-surface);
  color: var(--etd-muted); font-weight: 600; font-size: 0.9375rem;
}
.etd-bsgen-form .etd-fld--money .etd-inp {
  border-left: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding-left: 6px !important;
}
/* Focus the whole group together. */
.etd-bsgen-form .etd-fld--money:focus-within .field-prefix { border-color: var(--etd-accent); }
.etd-bsgen-form .etd-fld--money:focus-within .etd-inp { border-color: var(--etd-accent) !important; box-shadow: 0 0 0 3px var(--etd-ring) !important; }

/* ===================================================================== */
/* 3. Quick/Detailed visibility + radio-as-card (mode + format)            */
/* ===================================================================== */
.etd-bsgen-form[data-mode="quick"] .etd-detail-only { display: none !important; }
.etd-bsgen-form[data-mode="detailed"] .etd-quick-only { display: none !important; }

/* The radios render as fieldset > legend + .fieldset-wrapper > div > .form-item.
   Grid the INNER div that actually holds the radio items. */
.etd-bsgen-form .etd-modes .fieldset-wrapper > div,
.etd-bsgen-form .etd-fmt-cards .fieldset-wrapper > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--et-space-4, 16px);
}
@media (max-width: 640px) {
  .etd-bsgen-form .etd-modes .fieldset-wrapper > div,
  .etd-bsgen-form .etd-fmt-cards .fieldset-wrapper > div { grid-template-columns: 1fr; }
}
/* Card base — white surface, hairline, subtle shadow. Padding lives on the
   label so the WHOLE card is a click target. */
.etd-bsgen-form .etd-modes .form-item,
.etd-bsgen-form .etd-fmt-cards .form-item {
  position: relative;
  margin: 0 !important;
  padding: 0;
  border: 1px solid var(--etd-border-strong);
  border-radius: var(--etd-r-md);
  background: var(--etd-surface);
  box-shadow: var(--etd-shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.etd-bsgen-form .etd-modes .form-item:hover,
.etd-bsgen-form .etd-fmt-cards .form-item:hover { border-color: var(--etd-accent); box-shadow: var(--etd-shadow); }
/* Selected — subtle accent ring + elevate. No green wash. */
.etd-bsgen-form .etd-modes .form-item.is-on,
.etd-bsgen-form .etd-fmt-cards .form-item.is-on {
  border-color: var(--etd-accent);
  box-shadow: var(--etd-shadow-lg), 0 0 0 3px var(--etd-ring);
  background: var(--etd-surface);
}
/* Keyboard focus is visible on the card. */
.etd-bsgen-form .etd-modes .form-item:focus-within,
.etd-bsgen-form .etd-fmt-cards .form-item:focus-within {
  border-color: var(--etd-accent);
  box-shadow: var(--etd-shadow), 0 0 0 3px var(--etd-ring);
}
/* Native radio hidden; the label (for=) carries selection and fills the card. */
.etd-bsgen-form .etd-modes input[type="radio"],
.etd-bsgen-form .etd-fmt-cards input[type="radio"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0 !important; pointer-events: none;
}
.etd-bsgen-form .etd-modes label,
.etd-bsgen-form .etd-fmt-cards label {
  display: block; margin: 0 !important; cursor: pointer;
  padding: var(--et-space-4, 16px) var(--et-space-10, 40px) var(--et-space-4, 16px) var(--et-space-4, 16px);
  font-size: 0.9375rem; font-weight: 800; color: var(--etd-heading); letter-spacing: -0.01em;
}
/* Custom selection indicator — top-right ring that fills with an animated check. */
.etd-bsgen-form .etd-modes .form-item::after,
.etd-bsgen-form .etd-fmt-cards .form-item::after {
  content: ""; position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--etd-border-strong);
  background: var(--etd-surface) center / 12px 12px no-repeat;
  transition: border-color .18s ease, background-color .18s ease;
}
.etd-bsgen-form .etd-modes .form-item.is-on::after,
.etd-bsgen-form .etd-fmt-cards .form-item.is-on::after {
  border-color: var(--etd-accent);
  background-color: var(--etd-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  animation: etd-check-pop .24s ease;
}
@keyframes etd-check-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Rich content inside a format card. */
.etd-bsgen-form .etd-fmt-cards .etd-fmt__name { display: block; font-size: 0.9375rem; font-weight: 800; color: var(--etd-heading); }
.etd-bsgen-form .etd-fmt-cards .etd-fmt__desc { display: block; margin-top: var(--et-space-1, 4px); font-size: 0.8125rem; font-weight: 500; color: var(--etd-text); line-height: 1.45; }
/* Preview affordance — a proper chip with an eye icon. */
.etd-bsgen-form .etd-fmt-cards .etd-fmt__preview {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--et-space-3, 12px);
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--etd-border-strong); border-radius: var(--etd-r-pill);
  background: var(--etd-surface); color: var(--etd-muted);
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.etd-bsgen-form .etd-fmt-cards .etd-fmt__preview::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 14px;
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7482' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/><circle cx='12' cy='12' r='3'/></svg>");
}
.etd-bsgen-form .etd-fmt-cards .etd-fmt__preview:hover {
  border-color: var(--etd-accent); color: var(--etd-accent-press); background: var(--etd-tint);
}

/* ===================================================================== */
/* 4. Document dropzone (Phase 3) — neutral card, restrained dashed inner    */
/*    zone; accent appears ONLY on the drag/hover state.                    */
/* ===================================================================== */
/* The card is a normal neutral surface now — no green box. */
.etd-bsgen-form .etd-ai--multi {
  border: 1px solid var(--etd-border) !important;
  background: var(--etd-surface) !important;
  box-shadow: var(--etd-shadow) !important;
  cursor: default;
}
/* The dashed inner drop zone: subtle sunken fill + hairline dashes, centred. */
.etd-bsgen-form .etd-ai--multi .form-managed-file {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--et-space-2, 8px);
  border: 1.5px dashed var(--etd-border-strong);
  background: var(--etd-surface-2);
  border-radius: var(--etd-r-md);
  padding: var(--et-space-5, 20px) var(--et-space-6, 24px);
  margin: 0;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
/* A muted upload glyph above the control. */
.etd-bsgen-form .etd-ai--multi .form-managed-file::before {
  content: ""; width: 32px; height: 32px; margin-bottom: var(--et-space-1, 4px);
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA2AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 15V3m0 0L8 7m4-4l4 4'/><path d='M20 16.5A4.5 4.5 0 0 0 17.5 8H16A6 6 0 1 0 5 13'/></svg>");
}
/* Hide the native file input entirely (kept visually-hidden, still clickable
   via JS). A CSS-generated "Browse files" chip is the affordance — no fragile
   IDs and no Form API markup change needed. */
.etd-bsgen-form .etd-ai--multi input[type="file"] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important;
}
/* Translatable "Browse files" chip — a REAL <span> (not a CSS pseudo), so its
   text runs through Drupal's translation system. Clicking it opens the picker
   via the whole-zone click handler. */
.etd-bsgen-form .etd-ai__browse {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--et-space-3, 12px);
  padding: var(--et-space-2, 8px) var(--et-space-4, 16px) var(--et-space-2, 8px) var(--et-space-3, 12px);
  border: 1px solid var(--etd-border-strong); border-radius: var(--etd-r-sm);
  background: var(--etd-surface); color: var(--etd-heading);
  font-size: 0.8125rem; font-weight: 700; cursor: pointer;
  box-shadow: var(--etd-shadow-xs);
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.etd-bsgen-form .etd-ai__browse::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 15px;
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7482' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5'/><path d='M12 12v5m-2.5-2.5h5'/></svg>");
}
.etd-bsgen-form .etd-ai--multi:hover .etd-ai__browse,
.etd-bsgen-form .etd-ai--multi.is-dragover .etd-ai__browse {
  border-color: var(--etd-accent); color: var(--etd-accent-press);
}
/* Drag state — the ONLY place accent enters the zone. */
.etd-bsgen-form .etd-ai--multi.is-dragover { box-shadow: var(--etd-shadow-lg) !important; }
.etd-bsgen-form .etd-ai--multi.is-dragover .form-managed-file {
  border-style: solid; border-color: var(--etd-accent); background: var(--etd-tint);
}
/* Hide Drupal's confusing select-to-remove checkbox (its "Remove" stays). */
.etd-bsgen-form .etd-ai--multi .form-type-checkbox,
.etd-bsgen-form .etd-ai--multi .js-form-type-checkbox,
.etd-bsgen-form .etd-ai--multi .form-item--checkbox,
.etd-bsgen-form .etd-ai--multi input[type="checkbox"] { display: none !important; }
/* "Read documents" — refined accent button. Higher specificity (via the
   .etd-ai--multi ancestor) so it wins without touching the buttons phase. */
.etd-bsgen-form .etd-ai--multi .etd-ai__btn {
  background: var(--etd-accent) !important; color: var(--etd-on-accent) !important;
  border-radius: var(--etd-r-md) !important; box-shadow: var(--etd-shadow-xs) !important;
  padding: var(--et-space-3, 12px) var(--et-space-5, 20px) !important;
  font-weight: 700 !important; margin-top: var(--et-space-4, 16px) !important;
  transition: background .16s ease, box-shadow .16s ease, transform .06s ease;
}
.etd-bsgen-form .etd-ai--multi .etd-ai__btn:hover { background: var(--etd-accent-press) !important; box-shadow: var(--etd-shadow-sm) !important; }
.etd-bsgen-form .etd-ai--multi .etd-ai__btn:active { transform: translateY(1px); }
/* Status line + AI badge (tint, not full wash). */
.etd-bsgen-form .etd-ai__status { margin-top: var(--et-space-3, 12px); font-weight: 600; font-size: 0.8125rem; }
.etd-bsgen-form .etd-ai__status--ok { color: var(--etd-accent-2); }
.etd-bsgen-form .etd-ai__status--warn { color: #8A5A00; }

/* ---- Attached-files state -------------------------------------------------
   Once a file has finished uploading, the dashed prompt becomes a calm green
   "ready" surface, the cloud glyph flips to a check, and the uploaded file
   name(s) + their Remove control read as clean rows. Driven by the .has-files
   class the dropzone JS toggles from the managed_file's fids value. */
.etd-bsgen-form .etd-ai--multi.has-files .form-managed-file {
  border-style: solid;
  border-color: var(--etd-accent);
  background: var(--etd-tint);
  align-items: stretch;
  text-align: left;
}
.etd-bsgen-form .etd-ai--multi.has-files .form-managed-file::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233CB944' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
}
/* Uploaded file name(s): readable, wrapping, left-aligned. */
.etd-bsgen-form .etd-ai--multi .form-managed-file .file,
.etd-bsgen-form .etd-ai--multi .form-managed-file a {
  color: var(--etd-heading);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  word-break: break-word;
}
.etd-bsgen-form .etd-ai--multi .form-managed-file .file {
  display: inline-flex; align-items: center; gap: var(--et-space-2, 8px);
  padding: var(--et-space-1, 4px) 0;
}
/* Per-file "Remove" control — a small, quiet ghost button. */
.etd-bsgen-form .etd-ai--multi .form-managed-file .js-form-submit[name*="remove"] {
  background: var(--etd-surface) !important;
  color: var(--etd-muted) !important;
  border: 1px solid var(--etd-border-strong) !important;
  border-radius: var(--etd-r-sm) !important;
  padding: var(--et-space-1, 4px) var(--et-space-3, 12px) !important;
  font-size: 0.75rem !important; font-weight: 700 !important;
  margin: 0 !important; box-shadow: none !important;
}
.etd-bsgen-form .etd-ai--multi .form-managed-file .js-form-submit[name*="remove"]:hover {
  border-color: #C0392B !important; color: #C0392B !important;
}
/* "Read documents" stays disabled until a file is actually attached, so it can
   never be clicked before the async upload registers. */
.etd-bsgen-form .etd-ai--multi .etd-ai__btn:disabled,
.etd-bsgen-form .etd-ai--multi .etd-ai__btn.is-disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}
.etd-bsgen-form .etd-badge--ai {
  display: inline-block; font-size: 0.6875rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: var(--etd-r-pill);
  background: var(--etd-tint-strong); color: var(--etd-accent-2);
  border: 1px solid rgba(60, 185, 68, .28); margin-left: var(--et-space-2, 8px);
}

/* ===================================================================== */
/* 5. Buttons + messages                                                   */
/* ===================================================================== */
.etd-bsgen-form .etd-ai__btn,
.etd-bsgen-form .etd-submit {
  -webkit-appearance: none !important; appearance: none !important; border: 0 !important;
  background: var(--et-green, #3CB944) !important; color: #fff !important;
  font-family: inherit !important; font-weight: 700 !important; cursor: pointer;
  border-radius: var(--et-radius-pill, 9999px) !important; text-transform: none !important; box-shadow: none !important;
}
.etd-bsgen-form .etd-ai__btn { padding: var(--et-space-3, 12px) var(--et-space-6, 24px) !important; font-size: 0.9375rem !important; }
.etd-bsgen-form .etd-submit { display: block !important; width: 100% !important; padding: var(--et-space-4, 16px) var(--et-space-8, 32px) !important; font-size: 1rem !important; margin: var(--et-space-2, 8px) 0 0 0 !important; }
.etd-bsgen-form .etd-ai__btn:hover,
.etd-bsgen-form .etd-submit:hover { background: var(--et-green-2, #1D9E75) !important; }
.etd-bsgen-form .form-actions { margin: var(--et-space-4, 16px) 0 0 0 !important; padding: 0 !important; }
.etd-bsgen-form #etd-messages:not(:empty) { margin: 0 0 var(--et-space-4, 16px) 0; }

/* ===================================================================== */
/* 6. Tool-page ground + HERO (Phase 3). Scoped under .etd-bsgen, added to  */
/*    the tool-page wrapper. Uses the real template classes.               */
/* ===================================================================== */
/* Cool ground so the white cards read as elevated surfaces. */
.etd-bsgen { background: var(--etd-bg); }

/* Open, editorial header — no boxed green wash; a hairline divides it from
   the form. (Overrides the old .etd-hero gradient in easytax-documents.css.) */
.etd-bsgen .etd-hero {
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--etd-border) !important;
  border-radius: 0 !important;
  padding: var(--et-space-10, 40px) 0 var(--et-space-8, 32px) !important;
  margin: 0 0 var(--et-space-8, 32px) 0 !important;
}
.etd-bsgen .etd-hero__inner { max-width: 56rem; margin: 0 auto; padding: 0 var(--et-space-6, 24px); }

/* Eyebrow / breadcrumb */
.etd-bsgen .etd-hero__crumb {
  display: inline-flex; align-items: center; gap: var(--et-space-2, 8px);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--etd-eyebrow-tracking); color: var(--etd-muted) !important;
  margin-bottom: var(--et-space-4, 16px);
}
.etd-bsgen .etd-hero__crumb span { color: var(--etd-faint) !important; margin: 0 2px; }
.etd-bsgen .etd-hero__crumb strong { color: var(--etd-accent-2) !important; font-weight: 700; }

/* Title — tight, confident, balanced */
.etd-bsgen .etd-hero__title {
  font-family: var(--etd-font);
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.5rem) !important;
  font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -0.03em !important;
  color: var(--etd-heading) !important; margin: 0 0 var(--et-space-3, 12px) 0 !important;
  text-wrap: balance;
}
/* Lead — muted, readable measure */
.etd-bsgen .etd-hero__lead {
  font-size: 1.0625rem !important; line-height: 1.6 !important;
  color: var(--etd-text) !important; max-width: 46rem; margin: 0 !important;
}
@media (max-width: 640px) {
  .etd-bsgen .etd-hero { padding-top: var(--et-space-8, 32px) !important; }
}

/* ===================================================================== */
/* 7. Accessibility                                                        */
/* ===================================================================== */
.etd-bsgen-form input:focus-visible,
.etd-bsgen-form textarea:focus-visible,
.etd-bsgen-form select:focus-visible { outline: none !important; border-color: var(--et-navy, #1C3557) !important; }
.etd-bsgen-form :is(button, a):focus-visible { outline: 2px solid var(--et-navy, #1C3557) !important; outline-offset: 2px !important; }
@media (prefers-reduced-motion: reduce) {
  .etd-bsgen-form .etd-inp,
  .etd-bsgen-form .etd-modes .form-item,
  .etd-bsgen-form .etd-fmt-cards .form-item,
  .etd-bsgen-form .etd-submit { transition: none !important; }
  .etd-bsgen-form .etd-modes .form-item.is-on::after,
  .etd-bsgen-form .etd-fmt-cards .form-item.is-on::after { animation: none !important; }
}

/* ===================================================================== */
/* 8. Phase 4 — Generate CTA, Results dashboard, Mobile polish            */
/* ===================================================================== */

/* ---- The CTA: solid, confident, tactile (no consumer pill) ---- */
.etd-bsgen-form .etd-submit {
  width: 100% !important;
  border: 1px solid var(--etd-accent-press) !important;
  border-radius: var(--etd-r-md) !important;
  padding: var(--et-space-4, 16px) var(--et-space-8, 32px) !important;
  font-size: 1rem !important; font-weight: 700 !important; letter-spacing: .01em !important;
  color: var(--etd-on-accent) !important;
  background-color: var(--etd-accent) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%) !important;
  box-shadow: var(--etd-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  transition: background-color .16s ease, box-shadow .16s ease, transform .06s ease !important;
}
.etd-bsgen-form .etd-submit:hover { background-color: var(--etd-accent-press) !important; box-shadow: var(--etd-shadow), inset 0 1px 0 rgba(255, 255, 255, .18) !important; }
.etd-bsgen-form .etd-submit:active { background-color: var(--etd-accent-press) !important; background-image: none !important; transform: translateY(1px) !important; box-shadow: var(--etd-shadow-xs) !important; }

/* ---- Unbalanced-sheet warning ---- */
.etd-bsgen-form .etd-warning {
  background: #FFF6E5 !important; border: 1px solid rgba(183, 121, 31, .28) !important;
  color: #8A5A00 !important; padding: var(--et-space-3, 12px) var(--et-space-4, 16px) !important;
  border-radius: var(--etd-r-md) !important; font-size: 0.875rem !important; font-weight: 600 !important;
  margin-bottom: var(--et-space-5, 20px) !important;
}

/* ---- Dashboard stat cards ---- */
.etd-bsgen-form .etd-results { margin-top: var(--et-space-8, 32px); }
.etd-bsgen-form .etd-dashboard {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--et-space-4, 16px) !important; margin-bottom: var(--et-space-6, 24px) !important;
}
.etd-bsgen-form .etd-stat {
  background: var(--etd-surface) !important;
  border: 1px solid var(--etd-border) !important;
  border-top: 3px solid var(--etd-navy) !important;
  border-radius: var(--etd-r-md) !important;
  box-shadow: var(--etd-shadow-sm) !important;
  padding: var(--et-space-5, 20px) !important;
  transition: box-shadow .18s ease;
}
.etd-bsgen-form .etd-stat::before { display: none !important; }
.etd-bsgen-form .etd-stat:hover { box-shadow: var(--etd-shadow) !important; }
.etd-bsgen-form .etd-stat--green { border-top-color: var(--etd-accent) !important; }
.etd-bsgen-form .etd-stat--amber { border-top-color: #B7791F !important; }
.etd-bsgen-form .etd-stat__label {
  font-size: 0.6875rem !important; font-weight: 700 !important; text-transform: uppercase;
  letter-spacing: var(--etd-eyebrow-tracking); color: var(--etd-muted) !important;
}
.etd-bsgen-form .etd-stat__value {
  font-size: 1.5rem !important; font-weight: 800 !important; color: var(--etd-heading) !important;
  margin-top: var(--et-space-2, 8px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}

/* ---- Provenance panel ---- */
.etd-bsgen-form .etd-prov {
  background: var(--etd-surface) !important; border: 1px solid var(--etd-border) !important;
  border-radius: var(--etd-r-lg) !important; box-shadow: var(--etd-shadow-sm) !important;
  padding: var(--et-space-6, 24px) !important; margin-bottom: var(--et-space-6, 24px) !important;
}
.etd-bsgen-form .etd-prov__title { font-size: 1rem !important; font-weight: 800 !important; color: var(--etd-heading) !important; }
.etd-bsgen-form .etd-prov__hint { font-size: 0.8125rem !important; color: var(--etd-muted) !important; line-height: 1.5; }
.etd-bsgen-form .etd-prov__row { background: var(--etd-surface-2) !important; border: 1px solid var(--etd-border) !important; border-radius: var(--etd-r-sm) !important; }
.etd-bsgen-form .etd-prov__label { color: var(--etd-heading) !important; }
.etd-bsgen-form .etd-prov__value { color: var(--etd-ink) !important; font-variant-numeric: tabular-nums; }

/* ---- Paper preview (the "sheet" floats on a subtle desk) ---- */
.etd-bsgen-form .etd-paper {
  background: var(--etd-surface-2) !important; border: 1px solid var(--etd-border) !important;
  border-radius: var(--etd-r-lg) !important; box-shadow: var(--etd-shadow) !important;
  padding: var(--et-space-6, 24px) !important;
}
.etd-bsgen-form .etd-preview { background: #fff !important; border-radius: 8px !important; box-shadow: var(--etd-shadow-lg) !important; }

/* ---- Download bar ---- */
.etd-bsgen-form .etd-fab {
  display: flex !important; align-items: center; gap: var(--et-space-3, 12px); flex-wrap: wrap;
  margin-top: var(--et-space-5, 20px) !important; padding: var(--et-space-4, 16px) !important;
  background: var(--etd-surface) !important; border: 1px solid var(--etd-border) !important;
  border-radius: var(--etd-r-md) !important; box-shadow: var(--etd-shadow-sm) !important;
}
.etd-bsgen-form .etd-fab__label {
  font-size: 0.75rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--etd-muted) !important; margin-right: auto;
}
.etd-bsgen-form .etd-download {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--et-space-2, 8px) var(--et-space-4, 16px) !important; border-radius: var(--etd-r-sm) !important;
  font-size: 0.8125rem; font-weight: 700; text-decoration: none;
  border: 1px solid var(--etd-border-strong) !important; background: var(--etd-surface) !important;
  color: var(--etd-heading) !important;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.etd-bsgen-form .etd-download:hover { border-color: var(--etd-accent) !important; color: var(--etd-accent-press) !important; background: var(--etd-tint) !important; }
.etd-bsgen-form .etd-download--pdf { background-color: var(--etd-accent) !important; border-color: var(--etd-accent-press) !important; color: var(--etd-on-accent) !important; }
.etd-bsgen-form .etd-download--pdf:hover { background-color: var(--etd-accent-press) !important; color: var(--etd-on-accent) !important; }

/* ===================================================================== */
/* 9. Mobile polish                                                        */
/* ===================================================================== */
@media (max-width: 760px) {
  .etd-bsgen-form .etd-dashboard { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .etd-bsgen-form { padding-left: var(--et-space-4, 16px) !important; padding-right: var(--et-space-4, 16px) !important; }
  .etd-bsgen .etd-hero__inner { padding: 0 var(--et-space-4, 16px); }
  .etd-bsgen-form .etd-card { padding: var(--et-space-5, 20px) var(--et-space-4, 16px); }
  .etd-bsgen-form .etd-stat__value { font-size: 1.25rem !important; }
  .etd-bsgen-form .etd-fab { flex-direction: column; align-items: stretch; }
  .etd-bsgen-form .etd-fab__label { margin: 0 0 var(--et-space-1, 4px); }
  .etd-bsgen-form .etd-download { justify-content: center; }
}
@media (max-width: 420px) {
  .etd-bsgen-form .etd-dashboard { grid-template-columns: 1fr !important; }
}

/* ===================================================================== */
/* 10. Page-scoped refinements (hero, IA/typography, FAQ, completeness)    */
/*                                                                         */
/* SAFETY: this stylesheet is attached ONLY by BalanceSheetForm, and the   */
/* body-class selector below is gated by 'body.etd-tool-balance-sheet'     */
/* (added only on this route via hook_preprocess_html). Both gates mean    */
/* NOTHING here can touch any other page.                                  */
/* ===================================================================== */

/* 10.1 Hide the theme's full-bleed photo hero on this page only. Our own
   .etd-hero (title + breadcrumb, clean, below the nav) replaces it. */
body.etd-tool-balance-sheet .page-title,
body.etd-tool-balance-sheet .page-title.centred { display: none !important; }

/* Keep the tool comfortably centred and aligned with the form width. */
.etd-bsgen .etd-page__content,
.etd-bsgen .etd-faq {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}
.etd-bsgen .etd-page__content { margin-top: var(--et-space-12, 48px); }

/* 10.2 "What this tool produces" — bold heads, muted body copy (the
   text-gray-600 equivalent), left-aligned per brand rules. */
.etd-bsgen .etd-prose { margin-bottom: var(--et-space-8, 32px); }
.etd-bsgen .etd-prose__heading {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--etd-heading, #0A0A0A);
  margin: 0 0 var(--et-space-3, 12px);
}
.etd-bsgen .etd-prose__p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--etd-muted, #6B7280);
  margin: 0 0 var(--et-space-3, 12px);
  text-align: left;
}
.etd-bsgen .etd-prose__p:last-child { margin-bottom: 0; }

/* 10.3 FAQ — minimalist accordion with a rotating chevron. Native <details>,
   no JS, list marker removed. */
.etd-bsgen .etd-faq { margin-top: var(--et-space-12, 48px); }
.etd-bsgen .etd-faq__title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--etd-heading, #0A0A0A);
  margin: 0 0 var(--et-space-4, 16px);
}
.etd-bsgen .etd-faq__item {
  border: 1px solid var(--etd-border, #E5E7EB);
  border-radius: var(--etd-r-md, 12px);
  background: var(--etd-surface, #FFF);
  margin-bottom: var(--et-space-2, 8px);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.etd-bsgen .etd-faq__item[open] {
  border-color: var(--etd-border-strong, #D1D5DB);
  box-shadow: var(--etd-shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.05));
}
.etd-bsgen .etd-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--et-space-3, 12px);
  padding: var(--et-space-4, 16px) var(--et-space-5, 20px);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--etd-heading, #0A0A0A);
}
.etd-bsgen .etd-faq__q::-webkit-details-marker { display: none; }
.etd-bsgen .etd-faq__q::after {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: center / contain no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  transition: transform .2s ease;
}
.etd-bsgen .etd-faq__item[open] .etd-faq__q::after { transform: rotate(180deg); }
.etd-bsgen .etd-faq__q:focus-visible {
  outline: 2px solid var(--etd-accent, #3CB944);
  outline-offset: 2px;
  border-radius: var(--etd-r-sm, 8px);
}
.etd-bsgen .etd-faq__a {
  padding: 0 var(--et-space-5, 20px) var(--et-space-4, 16px);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--etd-muted, #6B7280);
}

/* 10.4 Completed-section cue — a green check appears at the right of a data
   card's header once any figure inside it is filled (toggled by JS). Only
   data cards carrying .etd-inp fields are ever marked, so mode/format/upload
   cards never show it. */
.etd-bsgen-form .etd-card.is-complete .etd-card__hd::after {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-left: auto;
  border-radius: 9999px;
  background: var(--etd-accent, #3CB944) center / 12px 12px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>");
  animation: etd-check-pop .22s ease;
}