/* AiB Platform — the free-tool PAGE grammar (the try-it canvas on
   /free-tools/<slug>/): the topbar, hero, honeypot, the answer block and
   its result shapes. Loaded by both free-tool frames (free_tool_detail.html
   and free_tool_canvas.html), after css/public/public.css. The widgets
   reuse the shared components (.card, .badge, .btn, .facts, .table-scroll,
   .doc-sheet — and the tool-form grammar in components/tool.css, which the
   portal's tool widgets share); this sheet holds only what is the public
   pages' alone. */

/* ---------- the page around the widget ---------- */
.tool-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.tool-back { display: inline-flex; }
/* the language switch of a multilingual tool: the codes, hairline-separated,
   the current one in ink — a control, not a headline */
.tool-langs { display: inline-flex; align-items: center; gap: 0; font-size: 12px; letter-spacing: 0.04em; }
.tool-lang { color: var(--grey); padding: 8px 10px; text-decoration: none; transition: color 0.3s; }
.tool-lang + .tool-lang { border-left: 1px solid var(--hairline-strong); }
.tool-lang:hover { color: var(--ink); }
.tool-lang.is-current { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; }
.public-hero--tool { margin-top: 18px; }
.public-hero--tool .eyebrow-row { justify-content: flex-start; gap: 14px; }
.public-hero--tool .public-statement { font-size: clamp(28px, 3.6vw, 44px); }
/* the sticky public band stays off the widget when the answer script scrolls here */
.tool-widget { scroll-margin-top: 76px; }

/* ---------- the form ---------- */
/* the form-control grammar (.tool-label / .tool-row / .tool-col /
   .tool-input / .opt / .verdict) lives in components/tool.css — shared
   with the portal's tool widgets. */

/* the bot trap — parked far off-canvas, invisible to humans */
.honeypot { position: absolute; left: -9999px; }

/* the under-form fine print */
.tool-note { margin: 8px 0 0; }

/* a fieldset that is pure grouping, no chrome (document generator) */
.tool-fieldset { border: 0; padding: 0; margin: 18px 0 0; }
.field .hint { margin-top: 6px; }

/* ---------- the answer ---------- */
/* Divider-topped; long tokens (filenames, VAT numbers, LEI codes) break
   instead of pushing a phone sideways. */
.tool-answer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  overflow-wrap: anywhere;
}
/* zero-specificity paragraph reset — any classed shape (.verdict,
   .answer-block, .tool-cta, .card-sub) outranks it by simply existing */
.tool-answer :where(p) { margin: 0; }
.tool-answer :where(p + p) { margin-top: 4px; }
/* the bold subject line under a verdict (.verdict: components/tool.css) */
.answer-lead { font-weight: 600; }
.answer-lead--big { font-size: 1.25em; }
.answer-quote { font-style: italic; }
.pre-line { white-space: pre-line; }

/* a paragraph-group / list / table block inside the answer */
.answer-block { margin-bottom: 14px; }
/* its divider-topped cousin (the VAT amount split) */
.answer-block--rule { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
/* one flagged clause (contract scanner) */
.flag-item { padding: 12px 0; border-top: 1px solid var(--hairline); }
.flag-item .verdict { margin-bottom: 6px; }

/* result columns: parties, route, details — fold to one on a phone */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 14px;
}

/* quiet key–value rows (VAT rates) */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin: 0; }
.kv dt, .kv dd { margin: 0; }

/* the holidays list */
.answer-list { margin: 0; padding-left: 18px; }
.answer-list li { margin: 0 0 2px; }

/* inline totals row */
.totals-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px; }

/* line-items table — lives inside a .table-scroll, scrolls itself */
.tool-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.tool-table tr { border-bottom: 1px solid var(--hairline); }
.tool-table th { font-weight: 400; text-align: left; }
.tool-table th, .tool-table td { padding: 6px 12px 6px 0; }
.tool-table th:last-child, .tool-table td:last-child { padding-right: 0; }
.tool-table .num { text-align: right; }

/* the closing line: the handoff to the paid tool */
.tool-cta { margin-top: 16px; }

/* ---------- phones: one frame, tool above the fold ---------- */
/* Three nested boxes (gutter + card padding + canvas padding) cost ~54px a
   side on a 430px screen. On phones the widget card yields its chrome and
   the canvas-frame is THE box; the hero eases down so the tool starts on
   the first screen. Everything stays inside the body clip (base.css). */
@media (max-width: 719px) {
  .tool-topbar { margin-bottom: 16px; }
  .public-hero--tool { margin-top: 8px; margin-bottom: 22px; }
  .public-hero--tool .public-statement { font-size: clamp(24px, 7.5vw, 32px); }
  .public-hero--tool .public-sub { font-size: 14px; margin-top: 10px; }

  .tool-widget > .card { border: 0; background: none; box-shadow: none; }
  .tool-widget > .card.card-pad { padding: 0; }
  .canvas-frame { padding: 16px 14px; }
  .tool-widget .trust-line { margin: 12px 4px 0; }
}