/* AiB Platform — the tool-widget grammar: form rows, role-sized inputs and
   the verdict strip a tool's canvas is built from. Shared by BOTH surfaces
   that render tool widgets — the free-tool frames (/free-tools/<slug>/,
   via public/tools.css's page grammar around it) and the portal's tool
   pages (a deployment's PAGE_WIDGET, e.g. the specimen generator) — so it
   lives in the component library, not in a surface sheet (promoted out of
   public/tools.css 2026-09-01, when the first portal widget went naked
   without it). */

.tool-label { display: block; margin-bottom: 8px; }
/* a label opening a second row breathes off the row before it (the sibling
   must be named: csrf/honeypot precede the FIRST label, which stays flush) */
.tool-row + .tool-label { margin-top: 14px; }
/* the quiet "— optional" aside, in a label or a field caption */
.opt { opacity: 0.6; }

/* the input row: fields and button share a line, wrap on narrow screens */
.tool-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tool-row + .tool-row { margin-top: 14px; }
/* labels ride inside columns — the button aligns to the input bottoms */
.tool-row--end { align-items: flex-end; }
/* a control row after prose (downloads, Copy/Print) */
.tool-row--gap { margin-top: 14px; }
/* labeled columns inside a row (date pairs, category/document pickers) */
.tool-col { flex: 1 1 150px; min-width: 0; }
.tool-col--wide { flex: 1 1 220px; }
.tool-col--main { flex: 2 1 260px; }
.tool-col .tool-input { width: 100%; }

/* the tool input pill — hand-tuned for the canvas, not a .field clone.
   Shrinkable (min-width 0) and capped (max-width 100%): on a 320px phone
   the field narrows before the page ever widens, even where the native
   control's intrinsic width is huge (iOS file pickers). */
.tool-input {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, monospace);
}
/* role-sized fields */
.tool-input--amount { flex: 0 1 130px; }
.tool-input--code { flex: 0 1 90px; text-transform: uppercase; }
.tool-input--date { flex: 0 1 170px; width: 170px; max-width: 100%; }
.tool-input--fit { flex: 0 1 auto; min-width: min(200px, 100%); }

/* the verdict: badge + subject, wrapping as a phone demands */
.verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 10px; }

/* ---------- touch: zoom-proof tool inputs ---------- */
/* same iOS focus-zoom guard as components/forms.css — under 16px Safari
   zooms in on focus and the page pans sideways from then on */
@media (pointer: coarse) {
  .tool-input { font-size: 16px; }
}

/* ---------- phones ---------- */
@media (max-width: 719px) {
  /* the file picker owns its line; a wrapped action button takes the width
     it lands on — rows read as stacked, never squeezed */
  .tool-row > input[type="file"] { flex: 1 1 100%; }
  .tool-row > .btn { flex: 1 1 auto; }
}