/* 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: the
   lightest text grey (AA). Never dimmed below it — the old opacity 0.6
   read 2.2:1, and whether a field may stay blank is essential text. */
.opt { color: var(--grey); }

/* 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; }

/* ---------- hairline tabs ---------- */
/* A compact switch of short codes — a page number, a view, a language:
   hairline-separated, the current one in ink and underlined. Current is
   aria-pressed="true" (a toggle in place), aria-current="true" (a link to
   this page) or .is-current. The strip sets the voice (.mono, or the
   free-tool topbar's 12px). A page's section tabs are .tabs (layout.css). */
.hairline-tabs { display: inline-flex; flex-wrap: wrap; align-items: center; }
.hairline-tabs[hidden] { display: none; }
.hairline-tab {
  padding: var(--space-2) 10px;
  border: 0;
  background: none;
  color: var(--grey);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-base);
}
.hairline-tab + .hairline-tab { border-left: 1px solid var(--hairline-strong); }
.hairline-tab:hover { color: var(--ink); }
.hairline-tab[aria-pressed="true"],
.hairline-tab[aria-current="true"],
.hairline-tab.is-current {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

/* ---------- 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; }
}