/* input-actions.css — where the buttons that act on a text-input box go.
   Shared by every tool. Load AFTER tokens.css and BEFORE the page's own <style>.

   There are TWO patterns, and which one applies is decided by the BOX'S ROLE, not by taste:

   ── A. THE WORKING AREA — .action-bar ────────────────────────────────────────────────────────────
   The box IS the thing the user is working in: full width, and its output appears directly beneath it
   (a table, a staged import, a parsed schedule). The actions go in a row BELOW the box, LEFT-ALIGNED,
   primary first.

   Why left, not right: in a single-column panel the fields and the box share a left edge, the eye
   travels down that edge, and the button belongs where the gaze lands. Right-alignment is a DIALOG
   convention — the action sits at the end of the reading path, next to where the eye exits. Inside a
   panel there is no such exit, so a right-aligned button is simply further from the input.

   ── B. THE FEEDER — .dump-row + .dump-row-actions ────────────────────────────────────────────────
   The box is a scratch pad whose output lands SOMEWHERE ELSE on the page — paste a snippet, then drag
   the amounts it found onto cells in a grid beside it. The box is deliberately NARROWED and the
   actions stack in the gutter that narrowing creates, to the box's right.

   This is not a lesser version of A. The box is auxiliary, so it should not claim the full width, and
   a vertical stack takes four buttons (Import / Reset / Current-YA only / Upload) far better than a
   row below would, which would wrap.

   ── THE MODAL EXCEPTION — .action-bar.is-end ─────────────────────────────────────────────────────
   A modal IS a dialog, so it takes the dialog convention: right-aligned, primary LAST (rightmost),
   and the cancel pulled to the far left so a mis-click lands on nothing. Declared here so it reads as
   the deliberate exception it is rather than as a row someone aligned differently by accident.

   ── ORDER, IN BOTH PATTERNS ──────────────────────────────────────────────────────────────────────
   primary → quiet/destructive → status text. The primary is always the one the eye reaches first
   (leftmost in A, topmost in B, rightmost in a .is-end modal). Never give the primary action and a
   Clear/Reset the same visual weight: one of them discards the user's work.

   Colour vars carry fallbacks because the apps do not share a token set — CIT and PIT define
   --grid-border/--accent/--ink-soft, the rem-based apps do not. Layout here is token-free, so the
   placement rules apply everywhere even where the colours fall back.

   ── BEFORE WIRING THIS INTO CIT, READ THIS ───────────────────────────────────────────────────────
   CIT is a gated BUILD. Its source of truth is
     Russolutions/Corporate Tax Calculator/CIT Tax Computation.html
   and apps/cit/index.html + apps/cit/static/app.<hash>.css are OUTPUTS — an edit made to them is
   discarded by the next build. The CIT rules below (.dump-row, .dump-row-actions) are therefore
   duplicated in that source file until someone links this sheet from it and deletes them there.

   And when that happens: deploy-cit.sh stages a HAND-MAINTAINED allow-list, and its closure check
   verifies the JS require graph only — it cannot see a <link>. So a CIT build that references
   /input-actions.css while this file is unstaged/uncommitted ships a dangling stylesheet and the
   deploy still reports success. Commit this file first, or add it to the allow-list.
   ────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── A. the working area ── */
.action-bar {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
  flex-wrap: wrap;
  /* No justify-content: flex-start is the default and IS the rule. Do not add one — see the header. */
}
.action-bar .status,
.action-bar .hint { font-size: 10pt; color: var(--ink-soft, #4A5568); }
/* Trailing text must not push the buttons around: it wraps in place rather than flexing to fill.
   (A flex:1 hint is what shoves a primary button to the far right of an otherwise left-aligned row.) */
.action-bar .status,
.action-bar .hint { flex: 0 1 auto; min-width: 0; }

/* ── B. the feeder ── */
.dump-row { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; }
/* 70%: the narrowing IS the gutter the actions sit in. Change one and you must change the other. */
.dump-row .paste-textarea { flex: 0 1 70%; max-width: 70%; margin: 0; }
.dump-row-actions,
.dump-row .action-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  padding-top: 2px;
}

/* ── the modal exception ── */
.action-bar.is-end { justify-content: flex-end; }
.action-bar.is-end .btn-cancel,
.action-bar.is-end .modal-cancel { margin-right: auto; order: -1; }

/* ── the box itself ──
   Auto-grows to fit what was pasted, between a floor and a ceiling, with no JS (field-sizing, Chrome
   123+). Browsers without it fall back to the min-height plus manual resize. white-space:pre because
   a pasted ledger is columnar and re-wrapping it makes it unreadable. */
.paste-textarea {
  width: 100%;
  field-sizing: content; min-height: 82px; max-height: 300px;
  font-family: 'Consolas', 'Courier New', monospace; font-size: 10pt; line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--grid-border, #CBD5E0);
  background: #fff; color: var(--ink, #1B2A4A);
  border-radius: 0; resize: vertical; white-space: pre;
}
.paste-textarea:focus {
  outline: none;
  border-color: var(--accent, #1B2A4A);
  box-shadow: 0 0 0 1px var(--accent, #1B2A4A);
}