/* ============================================================
   UDYOT — CONFIRMATION LETTER
   The plugin's own stylesheet. Self-contained: it reads and
   writes only --udyot-plugin-* custom properties and only
   .udyot_plugin_* classes, so nothing in
   wp-content/themes/udyot-erp can reach it.

   Layout of this file:

     1. Design tokens          — a frozen copy of the values the plugin needs
     2. Vendored components    — the handful of theme primitives it uses, renamed
     3. Control panel + bar    — the fill form, then the Back / Reset / Download row with the page setup
     4. Letter stage           — A4 sheet, scaled to fit
     5. Letter sheet           — the printable document
     6. Responsive + print

   Sections 1 and 2 were copied from the udyot-erp theme and
   re-namespaced rather than left to cascade in. Two reasons:
   the plugin must not inherit a theme edit, and a theme class
   of the same name must not be able to reach into the letter.
   ============================================================ */

:root {
  /* ---- Design tokens (frozen copy) ----
     Deliberately duplicated from the theme's tokens.css. If the
     theme changes a value, this letter must not move. */
  --udyot-plugin-ink: #0a0f1e;
  --udyot-plugin-ink-2: #1c2340;
  --udyot-plugin-ink-3: #3a4265;
  --udyot-plugin-mist: #f4f6fb;
  --udyot-plugin-mist-2: #e8ecf5;
  --udyot-plugin-white: #ffffff;
  --udyot-plugin-blue: #1b4fd8;
  --udyot-plugin-blue-light: #2563eb;
  --udyot-plugin-blue-pale: #eef3ff;
  --udyot-plugin-amber: #f59e0b;
  --udyot-plugin-amber-pale: #fffbeb;
  --udyot-plugin-green: #059669;
  --udyot-plugin-green-pale: #ecfdf5;
  --udyot-plugin-red: #dc2626;
  --udyot-plugin-red-pale: #fef2f2;

  --udyot-plugin-font-display:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --udyot-plugin-font-body:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --udyot-plugin-shadow-sm:
    0 1px 3px rgba(10, 15, 30, 0.08), 0 1px 2px rgba(10, 15, 30, 0.05);
  --udyot-plugin-shadow-md:
    0 4px 16px rgba(10, 15, 30, 0.1), 0 2px 6px rgba(10, 15, 30, 0.06);
  --udyot-plugin-shadow-lg:
    0 12px 40px rgba(10, 15, 30, 0.14), 0 4px 12px rgba(10, 15, 30, 0.08);
  --udyot-plugin-shadow-blue: 0 8px 32px rgba(27, 79, 216, 0.28);

  --udyot-plugin-r-sm: 8px;
  --udyot-plugin-r-md: 12px;
  --udyot-plugin-r-lg: 20px;

  /* Two values, because the theme has two. `.section` is the tall one;
     `.sub-hero` is deliberately tighter, because a hero sits above the fold
     and the full section padding pushes the page content off the screen. */
  --udyot-plugin-section-py: clamp(3rem, 7vw, 6.25rem);
  --udyot-plugin-hero-py: clamp(2.5rem, 5vw, 3.75rem);

  /* ---- Letter page geometry (mm, user-editable) ----
     Written at runtime by Udyot.applyMargins(). */
  --udyot-plugin-letter-padding-top: 12mm;
  --udyot-plugin-letter-padding-right: 14mm;
  --udyot-plugin-letter-padding-bottom: 12mm;
  --udyot-plugin-letter-padding-left: 14mm;

  /* ---- Table row metrics ----

     The row's height is carried by SYMMETRIC vertical padding, never by
     line-height and never by vertical-align.

     Two earlier attempts failed here, and the reason matters:

       1. padding + vertical-align: middle — the browser centres the text,
          html2canvas does not reproduce vertical-align for cells in a
          border-collapsed table, so the PDF stayed off-centre.
       2. line-height: 1.75rem with padding: 0 — correct on screen, still
          wrong in the PDF, because a line box taller than its glyphs puts
          the extra room in the *half-leading*, and html2canvas does not
          implement half-leading either. It draws a text node at its
          natural font height inside the cell's content box, so the whole
          13.6px of extra line height collapsed to one side and the text
          sat against the bottom border.

     With symmetric padding the content box is exactly one line box tall,
     so there is no leading for a renderer to mishandle. html2canvas's
     residual error is bounded by half the vertical padding (~1.5px)
     instead of half the extra line height (~7px), and the text is
     centred by construction in the browser.

     vertical-align is pinned to top rather than middle for the same
     reason: with symmetric padding, top-of-content-box IS the centre, and
     top is a position every renderer agrees on. It also keeps the label
     and the amount on one baseline in rows whose font sizes differ. */
  --udyot-plugin-row-pad-y: 6px;
  --udyot-plugin-row-pad-x: 0.8rem;
  /* A px line-height, not a ratio. Cells in the same row carry different
     font sizes (.udyot_plugin_letter_col_value is 0.88rem,
     .udyot_plugin_letter_row_closing is 0.95rem), so a ratio would give each
     cell a slightly different line box and their line boxes would no longer
     start at the same y. Fixed px means every cell in every row has an
     identical line box, so identical text position relative to the row.
     6 + 16 + 6 = 28px, the same row height the previous version produced, so
     the letter's layout is unchanged. */
  --udyot-plugin-row-line: 16px;

  --udyot-plugin-stamp-w: 22mm;
  --udyot-plugin-stamp-h: 22mm;
  --udyot-plugin-sign-w: 38mm;
  --udyot-plugin-sign-h: 16mm;

  /* On-screen scale of the A4 sheet. 1 = true size. Narrow screens get
     a smaller value from Udyot.fitSheet(); the sheet is never reflowed,
     only scaled, so the preview always matches the exported PDF. */
  --udyot-plugin-sheet-scale: 1;

  /* ---- Letter typography (document look, not site look) ---- */
  --udyot-plugin-font-letter: "Times New Roman", Times, serif;
  --udyot-plugin-font-mono: "Courier New", Courier, monospace;
}

/* ============================================================
   2. VENDORED COMPONENTS
   Renamed copies of the udyot-erp primitives this page needs.
   Nothing here has to match the theme any more.
   ============================================================ */

/* The theme's reset is global (`* { box-sizing }`, and a `font-family: inherit`
   on button/input/textarea/select). The plugin scopes the same guarantees to its
   own subtree so it stands alone. Without the font reset, a bare <input> falls
   back to the browser's default UI font instead of the letter's. */
.udyot_plugin_hero,
.udyot_plugin_hero *,
.udyot_plugin_section,
.udyot_plugin_section *,
.udyot_plugin_letter,
.udyot_plugin_letter * {
  box-sizing: border-box;
}

.udyot_plugin_section button,
.udyot_plugin_section input,
.udyot_plugin_section textarea,
.udyot_plugin_section select,
.udyot_plugin_letter button,
.udyot_plugin_letter input,
.udyot_plugin_letter textarea,
.udyot_plugin_letter select {
  font-family: inherit;
}

.udyot_plugin_section {
  padding: var(--udyot-plugin-section-py) 0;
}

/* Mirrors the theme's .sub-hero: its own, smaller padding — not the section's —
   plus the two descendant rules the theme applies to the hero's children. */
.udyot_plugin_hero {
  padding: var(--udyot-plugin-hero-py) 0;
  background: linear-gradient(135deg, #f0f4ff 0%, #fafbff 100%);
  text-align: center;
}

.udyot_plugin_hero .udyot_plugin_display_2 {
  margin: 1rem 0;
}

.udyot_plugin_hero .udyot_plugin_body_lg {
  max-width: 37.5rem;
  margin: 0 auto;
}

.udyot_plugin_container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Base classes mirror the theme's .display-2 / .body-lg, which carry type
   only. The margin and max-width the theme applies to them live on the
   .sub-hero descendant selector, not here. */
.udyot_plugin_display_2 {
  font-family: var(--udyot-plugin-font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.udyot_plugin_body_lg {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--udyot-plugin-ink-3);
}

.udyot_plugin_body_sm {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--udyot-plugin-ink-3);
}

.udyot_plugin_text_ink_3 {
  color: var(--udyot-plugin-ink-3);
}

.udyot_plugin_mt_4 {
  margin-top: 4px;
}

.udyot_plugin_h2 {
  font-family: var(--udyot-plugin-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.udyot_plugin_label_tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--udyot-plugin-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--udyot-plugin-blue);
  background: var(--udyot-plugin-blue-pale);
  padding: 5px 12px;
  border-radius: 100px;
}

.udyot_plugin_card {
  background: var(--udyot-plugin-white);
  border: 1px solid var(--udyot-plugin-mist-2);
  border-radius: var(--udyot-plugin-r-lg);
  padding: 2rem;
  box-shadow: var(--udyot-plugin-shadow-sm);
  transition: all 0.25s ease;
}

.udyot_plugin_card:hover {
  box-shadow: var(--udyot-plugin-shadow-md);
  transform: translateY(-2px);
  border-color: transparent;
}

.udyot_plugin_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--udyot-plugin-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.812rem 1.75rem;
  border-radius: var(--udyot-plugin-r-sm);
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: -0.01em;
}

.udyot_plugin_btn_primary {
  background: var(--udyot-plugin-blue);
  color: var(--udyot-plugin-white);
  box-shadow: var(--udyot-plugin-shadow-blue);
}

.udyot_plugin_btn_primary:hover {
  background: var(--udyot-plugin-blue-light);
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(27, 79, 216, 0.36);
}

.udyot_plugin_btn_secondary {
  background: var(--udyot-plugin-white);
  color: var(--udyot-plugin-ink);
  border: 2px solid var(--udyot-plugin-mist-2);
  box-shadow: var(--udyot-plugin-shadow-sm);
}

.udyot_plugin_btn_secondary:hover {
  border-color: var(--udyot-plugin-ink-3);
  transform: translateY(-1px);
}

.udyot_plugin_btn_sm {
  padding: 0.562rem 1.25rem;
  font-size: 0.82rem;
}

.udyot_plugin_form_group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

/* Label row: the name on the left, the character counter on the right, so
   the two never push each other off a narrow box. */
.udyot_plugin_form_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.udyot_plugin_form_label {
  font-family: var(--udyot-plugin-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--udyot-plugin-ink);
  min-width: 0;
}

/* The required marker. Red, and never a screen-reader announcement in its
   own right — the label carries a visually hidden "required" too. */
.udyot_plugin_req {
  color: var(--udyot-plugin-red);
  font-weight: 700;
  margin-left: 0.1rem;
}

.udyot_plugin_counter {
  flex: 0 0 auto;
  font-family: var(--udyot-plugin-font-mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--udyot-plugin-ink-3);
}

.udyot_plugin_counter.udyot_plugin_is_full {
  color: var(--udyot-plugin-red);
  font-weight: 700;
}

.udyot_plugin_hint {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--udyot-plugin-ink-3);
}

.udyot_plugin_form_control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--udyot-plugin-mist-2);
  border-radius: var(--udyot-plugin-r-sm);
  font-size: 0.95rem;
  color: var(--udyot-plugin-ink);
  background: var(--udyot-plugin-white);
  transition: border-color 0.2s;
}

.udyot_plugin_form_control:focus {
  border-color: var(--udyot-plugin-blue);
  outline: none;
}

/* Two different rejections, two different classes.
   .udyot_plugin_is_invalid  — a required field left blank by validateRequired()
   .udyot_plugin_is_badvalue — a B.S. date shaped like a date but impossible */
.udyot_plugin_form_control.udyot_plugin_is_invalid,
#udyot_plugin_field_date_bs.udyot_plugin_is_badvalue {
  border-color: var(--udyot-plugin-red);
  background: var(--udyot-plugin-red-pale);
}

.udyot_plugin_form_control::placeholder {
  color: #9ca3af;
}

.udyot_plugin_form_control:disabled {
  cursor: not-allowed;
}

textarea.udyot_plugin_form_control {
  resize: vertical;
  min-height: 8.125rem;
}

/* `hidden` is what keeps the preview view out of sight until the user asks for
   it. Both views stay in the DOM, so going back never loses what was typed. */
[hidden] {
  display: none !important;
}

/* ============================================================
   3. CONTROL PANEL
   ============================================================ */

/* ---------- SPLIT LAYOUT ----------
   There is no preview step: the details and the sheet are on the page at the
   same time. One column by default — details first, sheet below — and two
   from the large breakpoint, where the panel becomes a sidebar beside the
   letter rather than something you scroll past to reach it. */
.udyot_plugin_split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* The panel card. It no longer needs a width cap of its own: the grid track
   does the capping, and a max-width here would fight it. */
.udyot_plugin_panel {
  padding: 1.125rem 1.25rem;
  min-width: 0;
}

.udyot_plugin_pane {
  min-width: 0;
}

/* On a wide screen the panel is the left column and the letter the right.
   The sidebar sticks so the sheet stays in view while the long form scrolls,
   and is allowed to scroll itself once it outgrows the viewport. */
@media (min-width: 1200px) {
  .udyot_plugin_split {
    grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr);
  }

  .udyot_plugin_pane_form {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* A scrollbar inside the sidebar must not eat width the grid handed out,
   or the letter reflows by a few pixels every time the panel gains a scroll
   bar. */
.udyot_plugin_pane_form {
  scrollbar-gutter: stable;
}

/* The status line. It sits on its own full-width line above the actions, so
   a long message can never push the buttons off the row. */
.udyot_plugin_bar_status {
  margin: 0.5rem 0 0;
  padding: 0.375rem 0.625rem;
  border-radius: var(--udyot-plugin-r-sm);
  background: var(--udyot-plugin-mist);
  border-left: 3px solid var(--udyot-plugin-green, #16a34a);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--udyot-plugin-ink-2);
}

.udyot_plugin_bar_status.udyot_plugin_is_error {
  background: var(--udyot-plugin-red-pale);
  border-left-color: var(--udyot-plugin-red);
  color: var(--udyot-plugin-red);
}

/* The panel has its own status line, directly under its heading. Uploads are
   rejected and required fields are flagged while this view is on screen, so
   a message printed only in the preview bar would never be seen. */
.udyot_plugin_form_status {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--udyot-plugin-r-sm);
  background: var(--udyot-plugin-green-pale);
  border-left: 3px solid var(--udyot-plugin-green);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--udyot-plugin-ink-2);
}

.udyot_plugin_form_status.udyot_plugin_is_error {
  background: var(--udyot-plugin-red-pale);
  border-left-color: var(--udyot-plugin-red);
  color: var(--udyot-plugin-red);
}

/* ---------- PAGE SETUP ----------
   The four margins are <fieldset>s whose <legend> floats over the top
   border of its own box, so each name sits ON its field instead of
   claiming a row above it. The outer fieldset carries a screen-reader-only
   legend instead of a visible "Page Setup" heading — the block summary above
   already names the group. */

/* Visible to assistive tech, invisible on screen. */
.udyot_plugin_sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.udyot_plugin_margins {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.udyot_plugin_field {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0.55rem 0.5rem 0.3rem;
  border: 2px solid var(--udyot-plugin-mist-2);
  border-radius: var(--udyot-plugin-r-sm);
  background: var(--udyot-plugin-white);
  transition: border-color 0.2s;
}

.udyot_plugin_field:focus-within {
  border-color: var(--udyot-plugin-blue);
}

.udyot_plugin_field_legend {
  position: absolute;
  top: 0;
  left: 0.5rem;
  max-width: calc(100% - 1rem);
  padding: 0 0.2rem;
  margin: 0;
  transform: translateY(-50%);
  background: var(--udyot-plugin-white);
  font-family: var(--udyot-plugin-font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--udyot-plugin-ink-3);
  pointer-events: none;
}

.udyot_plugin_field:focus-within .udyot_plugin_field_legend {
  color: var(--udyot-plugin-blue);
}

/* Value at the full body size on every device — a margin number is a
   real number, so it does not get a smaller treatment than the rest of
   the page. */
.udyot_plugin_field .udyot_plugin_input {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 1.7rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: right;
  font-family: var(--udyot-plugin-font-mono);
  font-size: 1rem;
  line-height: 1.4;
}

.udyot_plugin_field .udyot_plugin_input:focus {
  outline: 0;
  box-shadow: none;
}

/* Reserves the right gutter the value is right-aligned away from, so
   the two never collide at any width. */
.udyot_plugin_field .udyot_plugin_unit {
  right: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ---------- PANEL ---------- */

/* Keep the panel card from lifting on hover — it is a tool surface, not a link
   target. Its width is the grid track's business; see SPLIT LAYOUT above. */
.udyot_plugin_panel:hover {
  transform: none;
  box-shadow: var(--udyot-plugin-shadow-sm);
}

.udyot_plugin_panel_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  margin-bottom: 0.875rem;
  border-bottom: 1px solid var(--udyot-plugin-mist-2);
}

.udyot_plugin_panel_head .udyot_plugin_h2 {
  font-size: 1.15rem;
  margin: 0;
}

.udyot_plugin_panel_head .udyot_plugin_body_sm {
  font-size: 0.75rem;
  margin-top: 0.2rem !important;
}

/* .udyot_plugin_margins is defined with the preview bar above. */

.udyot_plugin_field_control {
  position: relative;
}

/* ---------- COLLAPSIBLE BLOCK ----------
   Native <details>, so it works with no JS and stays keyboard
   accessible. Used for Amounts and Images to keep the panel short. */
.udyot_plugin_block {
  margin-top: 0.75rem;
  border: 1px solid var(--udyot-plugin-mist-2);
  border-radius: var(--udyot-plugin-r-sm);
  background: var(--udyot-plugin-white);
}

.udyot_plugin_block_summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: var(--udyot-plugin-r-sm);
}

.udyot_plugin_block_summary::-webkit-details-marker {
  display: none;
}

.udyot_plugin_block_summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--udyot-plugin-ink-3);
  border-bottom: 2px solid var(--udyot-plugin-ink-3);
  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
  transition: transform 0.2s ease;
}

.udyot_plugin_block[open]>.udyot_plugin_block_summary::after {
  transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}

.udyot_plugin_block_summary:hover {
  background: var(--udyot-plugin-mist);
}

.udyot_plugin_block_title {
  font-family: var(--udyot-plugin-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* color: var(--udyot-plugin-ink-2); */
  color: var(--udyot-plugin-blue);
}

.udyot_plugin_block_meta {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--udyot-plugin-ink-3);
  text-align: right;
}

.udyot_plugin_block_body {
  /* The 1px negative margin makes the border collapse into the
     summary's bottom edge instead of doubling up. */
  margin-top: -1px;
  padding: 0.75rem;
  border-top: 1px solid var(--udyot-plugin-mist-2);
}

/* ---------- DETAILS ----------
   A fixed column count per block, never `auto-fit`: with auto-fit the last row
   re-flows into wider or narrower tracks, which is what made the boxes come
   out at different widths.

   Each block states its own track count because the markup is shaped
   differently in each one — see the rules below. The counts here are the
   medium-device values; the large and small ones are in the responsive
   section at the end of this file.

   Large screens drop most of these to two columns: the panel is a sidebar
   beside the letter there, so a track is roughly half of what it is in the
   stacked layout and three of them would be unusable. */
.udyot_plugin_details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem 0.75rem;
}

/* From: company name and address on one line, Tel and PAN/VAT on the next. */
.udyot_plugin_details_from {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* To: party name, address and VAT/PAN are three short single-line boxes, so
   they sit three across on a medium screen rather than leaving a gap. */
.udyot_plugin_details_to {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.udyot_plugin_details_wide {
  grid-column: 1 / -1;
}

/* Every control in the grid is forced to the same box, whatever the
   browser's native rendering (date pickers are the usual offender). */
.udyot_plugin_details .udyot_plugin_form_control {
  min-height: 2.5rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.9rem;
}

.udyot_plugin_details textarea.udyot_plugin_form_control {
  height: auto;
  min-height: 3.5rem;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  line-height: 1.4;
  resize: vertical;
}

/* ---------- AMOUNTS ----------
   Two rows per line on medium and large screens, one on small. */
.udyot_plugin_amounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4375rem 0.625rem;
}

.udyot_plugin_amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--udyot-plugin-mist-2);
  border-radius: var(--udyot-plugin-r-sm);
  background: var(--udyot-plugin-white);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.udyot_plugin_amount.udyot_plugin_is_on {
  border-color: var(--udyot-plugin-blue);
  background: var(--udyot-plugin-mist);
}

.udyot_plugin_amount_toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  cursor: pointer;
  margin: 0;
}

.udyot_plugin_amount_check {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--udyot-plugin-blue);
  cursor: pointer;
}

.udyot_plugin_amount_label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--udyot-plugin-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.udyot_plugin_amount.udyot_plugin_is_on .udyot_plugin_amount_label {
  color: var(--udyot-plugin-ink);
}

.udyot_plugin_amount .udyot_plugin_field_control {
  flex: 0 0 7.5rem;
}

.udyot_plugin_amount .udyot_plugin_unit {
  right: 0.5rem;
  font-size: 0.68rem;
}

.udyot_plugin_amount input.udyot_plugin_input {
  padding: 0.375rem 1.85rem 0.375rem 0.5rem;
  font-size: 0.8rem;
}

.udyot_plugin_amount input.udyot_plugin_input:disabled {
  background: var(--udyot-plugin-mist);
  color: var(--udyot-plugin-ink-3);
  cursor: not-allowed;
}

/* The "mm" suffix sits inside the control, exactly like the
   theme's select chevron on .udyot_plugin_form_control. */
.udyot_plugin_unit {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--udyot-plugin-font-mono);
  font-size: 0.78rem;
  color: var(--udyot-plugin-ink-3);
  pointer-events: none;
}

input.udyot_plugin_input {
  padding-right: 2.75rem;
  text-align: right;
  font-family: var(--udyot-plugin-font-mono);
  font-size: 0.875rem;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* The native spinner would sit under the "mm" suffix. */
input.udyot_plugin_input::-webkit-outer-spin-button,
input.udyot_plugin_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- ACTIONS ----------
   Reset and Download share one row of two equal columns. Equal tracks, not
   `auto`: the primary button is the one the user is reaching for, and two
   buttons of different widths in the same row read as two unrelated
   controls. */
.udyot_plugin_actions_split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.udyot_plugin_actions_split .udyot_plugin_btn {
  width: 100%;
  justify-content: center;
}

/* ---------- UPLOADS ----------
   Each box is a small card: what it is, what it accepts, the file, and a
   thumbnail. The two badges are the rule the gate actually enforces, so
   the limit is visible before a file is chosen and not only after one is
   rejected.

   A fixed count again, not auto-fit — see DETAILS above. Three across on a
   medium screen, two on a large one where the panel is a sidebar, one on a
   small one. */
.udyot_plugin_uploads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.udyot_plugin_upload {
  background: var(--udyot-plugin-mist);
  border: 1px solid var(--udyot-plugin-mist-2);
  border-radius: var(--udyot-plugin-r-sm);
  padding: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.udyot_plugin_upload_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.udyot_plugin_upload_title {
  font-family: var(--udyot-plugin-font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--udyot-plugin-ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "PNG · JPG · PDF" and "max 800 KB". */
.udyot_plugin_upload_badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: -0.15rem;
}

.udyot_plugin_upload_badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.35rem;
  border-radius: 100px;
  background: var(--udyot-plugin-white);
  border: 1px solid var(--udyot-plugin-mist-2);
  font-family: var(--udyot-plugin-font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--udyot-plugin-ink-3);
  white-space: nowrap;
}

.udyot_plugin_upload_badge_size {
  background: var(--udyot-plugin-blue-pale);
  border-color: transparent;
  color: var(--udyot-plugin-blue);
}

/* Native file input is replaced by .udyot_plugin_upload_choose */
.udyot_plugin_upload input[type="file"] {
  display: none;
}

.udyot_plugin_upload_row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  width: 100%;
}

.udyot_plugin_upload_choose {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  font-family: var(--udyot-plugin-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--udyot-plugin-blue);
  background: var(--udyot-plugin-white);
  border: 2px solid var(--udyot-plugin-mist-2);
  border-radius: var(--udyot-plugin-r-sm);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: all 0.2s ease;
}

.udyot_plugin_upload_choose:hover {
  border-color: var(--udyot-plugin-blue);
}

.udyot_plugin_upload_name {
  font-size: 0.68rem;
  color: var(--udyot-plugin-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.udyot_plugin_upload_clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
  padding: 0;
  font-size: 0.65rem;
  line-height: 1;
  font-weight: 700;
  color: var(--udyot-plugin-red);
  background: var(--udyot-plugin-white);
  border: 1px solid var(--udyot-plugin-red);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.udyot_plugin_upload_clear:hover {
  background: var(--udyot-plugin-red-pale);
}

/* The type + size readout for the chosen file. Grey and inert until there
   is a file, then it carries the file's own type and weight. */
.udyot_plugin_upload_meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.udyot_plugin_upload_chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.35rem;
  border-radius: var(--udyot-plugin-r-sm);
  background: var(--udyot-plugin-mist-2);
  font-family: var(--udyot-plugin-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--udyot-plugin-ink-3);
  white-space: nowrap;
}

.udyot_plugin_upload_meta.udyot_plugin_has_file .udyot_plugin_upload_chip {
  background: var(--udyot-plugin-blue-pale);
  color: var(--udyot-plugin-blue);
}

.udyot_plugin_upload_meta.udyot_plugin_has_file .udyot_plugin_upload_chip_size {
  background: var(--udyot-plugin-white);
  border: 1px solid var(--udyot-plugin-mist-2);
  color: var(--udyot-plugin-ink-2);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
}

.udyot_plugin_upload_preview {
  width: 100%;
  height: 3.25rem;
  background: var(--udyot-plugin-white);
  border: 2px dashed var(--udyot-plugin-mist-2);
  border-radius: var(--udyot-plugin-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.65rem;
  font-weight: 500;
  color: #9ca3af;
}

.udyot_plugin_upload:hover .udyot_plugin_upload_preview {
  border-color: var(--udyot-plugin-blue);
}

.udyot_plugin_upload_preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ============================================================
   4. LETTER STAGE
   The sheet is a fixed A4 box. It is never reflowed at any width —
   on a narrow screen it is scaled down with a transform so the user
   sees the real page, just smaller.
   ============================================================ */
.udyot_plugin_stage_meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.625rem;
  font-size: 0.7rem;
  color: var(--udyot-plugin-ink-3);
}

.udyot_plugin_stage_tag {
  font-family: var(--udyot-plugin-font-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--udyot-plugin-ink-2);
}

.udyot_plugin_stage_zoom {
  white-space: nowrap;
}

.udyot_plugin_stage {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}

/* Reserves the SCALED footprint. Without this the flex row would
   still be asked to hold the full unscaled 210mm and the sheet
   would overflow instead of shrinking. */
.udyot_plugin_sheet {
  flex: 0 0 auto;
  width: calc(210mm * var(--udyot-plugin-sheet-scale));
  height: calc(297mm * var(--udyot-plugin-sheet-scale));
  margin: 0 0.5rem;
}

.udyot_plugin_stage_hint {
  max-width: 45rem;
  margin: 1rem auto 0;
  text-align: center;
  font-size: 0.75rem;
}

/* ============================================================
   5. LETTER — the printable document
   ============================================================ */
.udyot_plugin_letter {
  width: 210mm;
  height: 297mm;
  /* No max-width / aspect-ratio overrides anywhere: the box is A4 at
     every breakpoint. Only the on-screen scale changes. */
  transform: scale(var(--udyot-plugin-sheet-scale));
  transform-origin: top left;
  background: var(--udyot-plugin-white);
  padding: var(--udyot-plugin-letter-padding-top) var(--udyot-plugin-letter-padding-right) var(--udyot-plugin-letter-padding-bottom) var(--udyot-plugin-letter-padding-left);
  box-shadow: var(--udyot-plugin-shadow-lg);
  border: 1px solid var(--udyot-plugin-mist-2);
  position: relative;
  overflow: hidden;
  font-family: var(--udyot-plugin-font-letter);
  color: #000000;
  line-height: 1.35;
}

.udyot_plugin_pad {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
  display: none;
}

.udyot_plugin_pad.udyot_plugin_is_active {
  display: block;
}

.udyot_plugin_content,
.udyot_plugin_letter_bottom {
  position: relative;
  z-index: 1;
}

.udyot_plugin_content {
  padding-bottom: 42mm;
}

/* ---------- HEADER ----------
   Two independent columns: the issuing company on the left, the two dates
   on the right. Neither is given a width — each is sized by its own text and
   the row simply pushes them apart — so a long company name grows leftwards
   into the gap instead of squeezing the dates. */
.udyot_plugin_letter_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6mm;
  /* margin-bottom: 0.1rem; */
  margin-bottom: 0.80rem;

}

.udyot_plugin_letter_header_left {
  font-size: 0.85rem;
  line-height: 1.42;
  min-width: 0;
}

.udyot_plugin_letter_from_name {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin-bottom: 0.1rem;
  overflow-wrap: break-word;
}

/* pre-line, so an address that arrives with line breaks in it — a filter
   supplying from_address, say — keeps them instead of running on as one
   paragraph. The panel's own boxes are single-line text inputs now, so a
   typed address never carries one. */
.udyot_plugin_letter_from_address,
.udyot_plugin_letter_from_contact {
  font-size: 16px;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.udyot_plugin_letter_from_contact {
  margin-top: 0.18rem;
}

.udyot_plugin_letter_from_pan {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.18rem;
  overflow-wrap: break-word;
}

.udyot_plugin_letter_header_right {
  flex: 0 0 auto;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* ---------- TO BLOCK ----------
   "To," then one row per detail. The label column is fixed so the values
   line up, and the value column is free to wrap — addresses are often two
   lines long and must not be truncated to keep them on one. */
.udyot_plugin_letter_to {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0.7rem 0 0.9rem;
}

.udyot_plugin_letter_to_head {
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.udyot_plugin_letter_to_row {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  font-size: 16px;
}

.udyot_plugin_letter_to_label {
  flex: 0 0 auto;
  font-weight: 700;
}

.udyot_plugin_letter_to_value {
  min-width: 0;
  white-space: pre-line;
  overflow-wrap: break-word;
  font-weight: 700;
}

/* ---------- DIVIDERS ---------- */
.udyot_plugin_letter_rule_thick {
  border: 0;
  border-top: 2px solid #000000;
  margin: 0.8 rem 0 0 0;
}

.udyot_plugin_letter_rule_thin {
  border: 0;
  border-top: 1px solid #000000;
  margin: 0.18rem 0 0.9rem 0;
}

/* ---------- SUBJECT ---------- */
.udyot_plugin_letter_subject {
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  text-align: center;
}

.udyot_plugin_letter_subject_label {
  margin-right: 0.15rem;
}

/* ---------- BODY ---------- */
.udyot_plugin_letter_salutation {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.udyot_plugin_letter_intro {
  font-size: 0.95rem;
  text-align: justify;
  margin-bottom: 1rem;
}

/* ---------- TABLE ---------- */
.udyot_plugin_letter_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  border: 1px solid #000000;
  table-layout: fixed;
}

.udyot_plugin_letter_table thead th {
  background: var(--udyot-plugin-white);
  color: #000000;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Symmetric padding carries the row height — see --udyot-plugin-row-pad-y. */
  padding: var(--udyot-plugin-row-pad-y) var(--udyot-plugin-row-pad-x);
  line-height: var(--udyot-plugin-row-line);
  text-align: left;
  vertical-align: top;
  border: 1px solid #000000;
}

.udyot_plugin_letter_table thead th:last-child {
  text-align: right;
}

.udyot_plugin_letter_table td {
  border: 1px solid #000000;
  /* Equal top and bottom padding is what centres the text. The content
     box is then exactly one line box tall, so there is no half-leading
     for html2canvas to lose — it can only be off by half the padding. */
  padding: var(--udyot-plugin-row-pad-y) var(--udyot-plugin-row-pad-x);
  line-height: var(--udyot-plugin-row-line);
  vertical-align: top;
  background: var(--udyot-plugin-white);
}

.udyot_plugin_letter_table .udyot_plugin_letter_col_label {
  text-align: left;
  font-weight: 600;
  width: 62%;
  letter-spacing: 0.01em;
}

.udyot_plugin_letter_table .udyot_plugin_letter_col_value {
  text-align: right;
  font-weight: 600;
  width: 38%;
  white-space: nowrap;
  font-family: var(--udyot-plugin-font-mono);
  font-size: 0.88rem;
}

.udyot_plugin_letter_table .udyot_plugin_letter_dr_cr {
  font-family: var(--udyot-plugin-font-letter);
  font-weight: 700;
  font-size: 0.84rem;
  margin-left: 0.1rem;
}

.udyot_plugin_letter_table .udyot_plugin_letter_row_opening td {
  font-weight: 700;
  border-top: 1.5px solid #000000;
}

.udyot_plugin_letter_table .udyot_plugin_letter_row_subtotal td {
  font-weight: 700;
  border-top: 1px solid #000000;
}

.udyot_plugin_letter_table .udyot_plugin_letter_row_closing td {
  font-weight: 700;
  font-size: 0.95rem;
  border-top: 1.5px solid #000000;
}

/* ---------- REQUEST ---------- */
.udyot_plugin_letter_request {
  font-size: 0.95rem;
  text-align: justify;
  margin-bottom: 0.7rem;
}

.udyot_plugin_letter_request .udyot_plugin_strong {
  font-weight: 700;
}

.udyot_plugin_letter_urgent {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

.udyot_plugin_letter_thanks {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1.6rem;
}

/* ============================================================
   ---------- SIGNATURE BLOCK ----------
   Spans the FULL letter width and applies the user margins as its own padding,
   so the right-hand block can sit flush to the inner right edge.

   Two blocks, bottom-aligned: the issuer's stamp + signature ruled off above
   "From: <company>", and the same rule above "To : <recipient>" on the right.
   Both labels are centred on their own name.

   Neither block has a width of its own. Each is sized by its own text, so a
   company name of any length widens its own rule and nothing else, and the
   two rules stay correctly centred over their own labels no matter how the
   names differ in length. `max-width` is the only constraint: past it the name
   wraps instead of running the two blocks together. */
.udyot_plugin_letter_bottom {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding-left: var(--udyot-plugin-letter-padding-left);
  padding-right: var(--udyot-plugin-letter-padding-right);
  padding-bottom: var(--udyot-plugin-letter-padding-bottom);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6mm;
  pointer-events: none;
}

.udyot_plugin_letter_party {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 46%;
}

.udyot_plugin_letter_party_left {
  align-items: center;
}

.udyot_plugin_letter_party_right {
  align-items: center;
  margin-left: auto;
}

/* Full width of the block, which is the width of its own label. */
.udyot_plugin_letter_party_line {
  width: 100%;
  max-width: 170px;
  min-width: 169px;
  border-top: 1.2px solid #000000;
  margin-bottom: 0.3rem;
  opacity: 0.3;
}

.udyot_plugin_letter_party_label {
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  color: #333333;
  overflow-wrap: break-word;
}

.udyot_plugin_letter_party_left .udyot_plugin_letter_party_label,
.udyot_plugin_letter_party_right .udyot_plugin_letter_party_label {
  text-align: center;
}

.udyot_plugin_letter_party_role {
  letter-spacing: 0.05em;
  /* text-transform: uppercase; */
  margin-right: 0.2rem;
}

.udyot_plugin_letter_slot_images {
  display: flex;
  align-items: flex-end;
  gap: 4mm;
  margin-bottom: 0.35rem;
  min-height: calc(var(--udyot-plugin-stamp-h) + 2mm);
  max-width: 100%;
}

/* ----- STAMP ----- */
.udyot_plugin_letter_stamp {
  width: var(--udyot-plugin-stamp-w);
  height: var(--udyot-plugin-stamp-h);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.udyot_plugin_letter_stamp img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ----- SIGNATURE ----- */
.udyot_plugin_letter_signature {
  width: var(--udyot-plugin-sign-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.udyot_plugin_letter_signature_image {
  width: 100%;
  height: var(--udyot-plugin-sign-h);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.udyot_plugin_letter_signature_image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ============================================================
   6. RESPONSIVE — panel

   Three tiers, and each block states its own track count in each of them:

              small      medium     large
              (<=720px)  (<=1199px) (>=1200px)
   From        1          2          2
   To          1          3          2
   Dates       1          2          2
   Amounts     1          2          1
   Images      1          3          2
   Margins     2          4          2

   The medium values are the base rules earlier in this file, so only the
   small and large tiers are stated again here.

   Large drops most of these because the panel is a narrow sidebar beside the
   letter: a track there is about half what it is in the stacked layout, so
   three across stops being readable. Amounts go to one for the same reason —
   each row is a label plus a number box and needs the width.

   Nothing inside .udyot_plugin_sheet is touched in any tier — the A4 layout
   is the same on every device, and only the on-screen scale changes. */

/* ---------- LARGE (>= 1200px): panel is a sidebar ---------- */
@media (min-width: 1200px) {

  .udyot_plugin_details_to,
  .udyot_plugin_uploads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .udyot_plugin_amounts {
    grid-template-columns: 1fr;
  }

  .udyot_plugin_margins {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- SMALL (<= 720px) ---------- */
@media (max-width: 720px) {

  .udyot_plugin_details,
  .udyot_plugin_details_to,
  .udyot_plugin_amounts,
  .udyot_plugin_uploads {
    grid-template-columns: 1fr;
  }

  /* Two margin boxes across still fit a 320px screen; one across would make
     the row four screens tall. */
  .udyot_plugin_margins {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 720px: panel chrome ----------
   The letter is NOT touched here. It stays a 210 × 297 mm box and is scaled
   down by Udyot.fitSheet() instead, so its layout on a phone is identical to
   its layout on a desktop. */
@media (max-width: 720px) {
  .udyot_plugin_panel {
    padding: 0.875rem 1rem;
  }

  .udyot_plugin_amount {
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
  }

  .udyot_plugin_amount .udyot_plugin_field_control {
    flex: 1 1 auto;
  }

  .udyot_plugin_amount input.udyot_plugin_input {
    padding-right: 1.85rem;
  }
}

/* ---------- 480px ----------
   Panel chrome only. Nothing inside .udyot_plugin_sheet is restyled: the A4
   layout must be identical to what the PDF contains. */
@media (max-width: 480px) {
  .udyot_plugin_panel {
    padding: 0.75rem 0.875rem;
  }

  .udyot_plugin_panel_head .udyot_plugin_h2 {
    font-size: 1rem;
  }

  .udyot_plugin_block_meta {
    display: none;
  }

  /* The legend shrinks a little on small screens, but the value and its
     unit stay at the full 1rem / 0.9rem so a margin number is as
     readable as any other number on the page. */
  .udyot_plugin_field_legend {
    font-size: 0.62rem;
  }

  .udyot_plugin_field {
    padding: 0.55rem 0.4rem 0.3rem;
  }

  .udyot_plugin_field .udyot_plugin_input {
    padding: 0 1.6rem 0 0;
  }
}

/* ============================================================
   7. PRINT — only the A4 sheet reaches the printer
   The details pane is hidden and the letter pane is promoted to the top of
   the page, so a printed copy is the letter alone at true A4.
   ============================================================ */
@page {
  size: A4;
  margin: 0;
}

@media print {

  html,
  body {
    background: var(--udyot-plugin-white) !important;
    margin: 0;
    padding: 0;
  }

  /* The first four are theme chrome, not plugin markup. The plugin owns no
     part of them, so it cannot style them — but the letter is rendered inside
     the theme's page and a navbar printed onto an A4 confirmation letter is
     worse than an over-broad selector. If the theme renames its own chrome,
     these are the four selectors to update. */
  #navbar,
  #footer,
  .scroll-top,
  .cookie-consent,

  .udyot_plugin_hero,
  .udyot_plugin_pane_form,
  .udyot_plugin_stage_meta,
  .udyot_plugin_stage_hint {
    display: none !important;
  }

  /* The split is a screen layout only: on paper the letter takes the whole
     page, and the sticky sidebar has nothing to sit beside. */
  .udyot_plugin_split {
    display: block;
  }

  .udyot_plugin_workspace {
    padding: 0 !important;
  }

  .udyot_plugin_workspace .udyot_plugin_container {
    max-width: none;
    padding: 0;
  }

  .udyot_plugin_stage {
    display: block;
    padding: 0;
  }

  /* Paper is A4 — undo the on-screen fit scaling. */
  .udyot_plugin_sheet {
    width: 210mm;
    height: 297mm;
    margin: 0 auto;
  }

  .udyot_plugin_letter {
    transform: none;
    box-shadow: none;
    border: none;
    width: 210mm;
    height: 297mm;
    margin: 0 auto;
  }
}