/* ==========================================================================
   Blackfire shared calculator UI — css/bf-tools.css
   Load after css/style.css; uses its tokens (--accent, --ink, --rule, --stone, --ash, Barlow).
   Pairs with js/bf-ui.js. Contract: docs/oct-2026/CORE_API.md
   ========================================================================== */

:root {
  --bf-error: #b3261e;           /* same red as .guide .warn in style.css */
  --bf-error-bg: #fff6f5;
  --bf-accent-strong: #bf3b16;   /* darker logo fire: white text on it is 5.45:1 (the --fire accent is 4.12:1) */
  /* Clearance kept around a focused control so it never ends up under the sticky site header
     (76 px) and tool-nav (bottom at about 133 px), with room for the 5 px focus ring, or under the
     fixed chat button (16 px from the bottom, about 48 px tall). */
  --bf-clear-top: 150px;
  --bf-clear-bottom: 84px;
}

/* Keyboard focus is never hidden (WCAG 2.4.11): the browser scrolls a focused control into view
   with these margins, instead of leaving it behind the sticky header or the chat button. */
.bf-form input, .bf-form select, .bf-form textarea, .bf-form button, .bf-form summary, .bf-form a,
.bf-out button, .bf-out summary, .bf-out a, .bf-out [tabindex] {
  scroll-margin-top: var(--bf-clear-top);
  scroll-margin-bottom: var(--bf-clear-bottom);
}

/* never let a calculator push the page sideways on a phone */
.bf-form, .bf-form > *, .bf-out, .bf-out > * { min-width: 0; }
.bf-form input, .bf-form select, .bf-form textarea { max-width: 100%; }

/* ---- inline field errors ---------------------------------------------- */
.bf-field-error {
  display: block;
  margin-top: 4px;
  padding-left: 9px;
  border-left: 3px solid var(--bf-error);
  color: var(--bf-error);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}
.bf-field-error[hidden] { display: none !important; }
.bf-form [aria-invalid="true"] {
  border-color: var(--bf-error);
  box-shadow: inset 0 0 0 1px var(--bf-error);
  background-color: var(--bf-error-bg);
}
.bf-form [aria-invalid="true"]:focus { outline-color: var(--bf-error); }

/* ---- result card --------------------------------------------------------- */
.bf-result {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
  padding: 18px 20px 16px;
  color: var(--ink);
}
.bf-result > :last-child { margin-bottom: 0; }
.bf-result:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bf-result-empty { margin: 0; color: var(--stone); font-size: 16px; }
.bf-result-invalid { color: var(--bf-error); font-weight: 500; }
.bf-result-errors { margin: 6px 0 0; padding-left: 20px; color: var(--bf-error); font-size: 15px; font-weight: 500; }
.bf-result-errors li + li { margin-top: 2px; }
.bf-result[data-state="invalid"], .bf-result[data-state="error"] { border-top-color: var(--rule); }

.bf-headline {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bf-headline .bf-sub, .bf-sub {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--stone);
}

.bf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 14px; }
.bf-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.bf-table th, .bf-table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--rule);
  background: none;
}
.bf-table th:last-child, .bf-table td:last-child { padding-right: 0; }
.bf-table thead th { font-size: 13px; font-weight: 600; color: var(--stone); border-bottom-color: var(--ink); }
.bf-table tbody th { font-weight: 500; color: var(--stone); }
.bf-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bf-table tr.bf-total th, .bf-table tr.bf-total td { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--ink); }
.bf-nowrap { white-space: nowrap; }
.bf-exact { display: block; font-size: 13px; color: var(--stone); font-weight: 400; }

.bf-priced {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--ash);
  border-left: 3px solid var(--accent);
  font-size: 15px;
}
.bf-priced--partial { border-left-color: #8a4b00; }
.bf-priced-missing { display: block; margin-top: 2px; color: var(--graphite); font-size: 14px; }

.bf-assumptions { margin: 14px 0 0; font-size: 14px; color: var(--graphite); border-top: 1px solid var(--rule); }
.bf-assumptions summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}
.bf-assumptions summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bf-table--assumptions { font-size: 14px; }
.bf-table--assumptions tbody th { color: var(--ink); width: 34%; }

.bf-exclusions { margin-top: 12px; font-size: 14px; color: var(--stone); }
.bf-exclusions-h { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.bf-exclusions ul { margin: 0; }

.bf-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.bf-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.4;
  text-transform: uppercase;
}
.bf-badge--sample       { color: #8a4b00; background: #fff4e0; }
.bf-badge--stale        { color: #735400; background: #fff8d9; }
.bf-badge--expired      { color: var(--bf-error); background: #fdecea; }
.bf-badge--offline      { color: var(--graphite); background: var(--ash); }
.bf-badge--illustration { color: #2f4a6b; background: #eaf1f8; }

/* ---- toolbar ------------------------------------------------------------- */
.bf-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 15px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bf-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bf-btn[disabled] { opacity: .45; cursor: not-allowed; }
.bf-btn--wa { background: var(--ink); border-color: var(--ink); color: #fff; }
/* style.css colours every a:hover with the accent: on the dark WhatsApp button that is 4.44:1, so
   its text stays white in every state (a tap on a touch screen leaves :hover set). */
.bf-btn--wa:hover, .bf-btn--wa:focus, .bf-btn--wa:active { color: #fff; }
/* Hover only where there is a real pointer (on touch screens it would stick after a tap). */
@media (hover: hover) {
  .bf-btn:hover { background: var(--ink); color: #fff; }
  .bf-btn[disabled]:hover { background: var(--paper); color: var(--ink); }
  .bf-btn--wa:hover { background: var(--bf-accent-strong); border-color: var(--bf-accent-strong); color: #fff; }
}

.bf-status { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; color: var(--stone); }
.bf-saved { font-size: 14px; color: var(--stone); }
.bf-saved--error { color: var(--bf-error); font-weight: 500; }

.bf-print-only { display: none; }

/* visually hidden, still read by screen readers */
.bf-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bf-result-pending { color: var(--graphite); }
.bf-result[data-state="pending"] { border-top-color: var(--rule); }
.bf-result { scroll-margin-top: var(--bf-clear-top); }

/* ---- editable row tables (rooms, openings, routes, bar lists, cost lines) ---- */
.bf-rows-wrap { max-width: 100%; }
.bf-rows { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 8px; }
.bf-rows th { text-align: left; font-weight: 500; color: var(--stone); font-size: 13px; padding: 4px 6px 6px; vertical-align: bottom; }
.bf-rows th:first-child, .bf-rows td:first-child { padding-left: 0; }
.bf-rows td { padding: 3px 6px; vertical-align: top; }
.bf-rows .bf-unit { white-space: nowrap; }
.bf-rows input, .bf-rows select { width: 100%; min-width: 0; padding: 7px 8px; font-size: 15px; }
.bf-rows input[type="number"] { min-width: 4.5em; }
.bf-rows .bf-row-act { width: 44px; padding-right: 0; text-align: right; }
.bf-row-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  font: inherit; font-size: 22px; line-height: 1; color: var(--stone);
  background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
}
.bf-row-del:hover { color: var(--bf-error); border-color: var(--rule); }
.bf-row-del:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.bf-row-del[disabled] { opacity: .3; cursor: not-allowed; }
.bf-row-err td { padding: 0 0 8px; }
.bf-row-err .bf-field-error { margin-top: 0; }
.bf-rows [aria-invalid="true"] { border-color: var(--bf-error); box-shadow: inset 0 0 0 1px var(--bf-error); background-color: var(--bf-error-bg); }
.bf-row-add { margin: 2px 0 6px; }
.bf-rows [hidden] { display: none !important; }

/* ---- "See result" link: phones only, sticky above the chat button --------- */
.bf-jump { display: none; }
@media (max-width: 1024px) {
  .bf-jump:not([hidden]) {
    position: sticky;
    bottom: 76px;                 /* clears the chat button (16 px + 48 px) */
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 18px 0 0;
    padding: 10px 16px;
    background: var(--ink);
    color: #fff;
    border-radius: 3px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  }
  .bf-jump.bf-jump--off { visibility: hidden; }
  .bf-jump:hover, .bf-jump:focus, .bf-jump:active { color: #fff; }
  .bf-jump:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .bf-jump::after { content: " \2193"; }
  .bf-form input, .bf-form select, .bf-form textarea, .bf-form button { scroll-margin-bottom: 140px; }
}

/* ---- phones: wrap the toolbar, 44 px tap targets ------------------------- */
@media (max-width: 760px), (pointer: coarse) {
  .bf-btn { min-height: 44px; min-width: 44px; }
  .bf-form input[type="number"], .bf-form input[type="text"], .bf-form select { min-height: 44px; }
}
/* row tables become one card per row on narrow screens */
@media (max-width: 640px) {
  .bf-rows, .bf-rows tbody, .bf-rows tr, .bf-rows td { display: block; }
  .bf-rows thead { display: none; }
  .bf-rows tr[data-bf-row] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    padding: 10px 0 12px;
    border-top: 1px solid var(--rule);
    position: relative;
  }
  .bf-rows td { padding: 0; }
  .bf-rows td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    color: var(--stone);
  }
  .bf-rows td:first-child { grid-column: 1 / -1; padding-right: 52px; }
  .bf-rows .bf-row-act { position: absolute; top: 6px; right: 0; width: auto; }
  .bf-rows .bf-row-del { width: 44px; height: 44px; }
  .bf-rows input, .bf-rows select { min-height: 44px; }
  .bf-row-err td { padding: 0 0 10px; }
}
@media (max-width: 520px) {
  .bf-toolbar .bf-btn { flex: 1 1 calc(50% - 4px); }
  .bf-toolbar .bf-btn--wa { flex-basis: 100%; }
  .bf-result { padding: 16px 14px 14px; }
  .bf-headline { font-size: 21px; }
  .bf-table { font-size: 14.5px; }
}

/* ---- print: title, date, inputs, result, assumptions ---------------------- */
@media print {
  .bf-print-only { display: block !important; }
  .site-header, .site-footer, nav, .nav, .nav-toggle, .tool-nav, .tool-list, .tool-list-big,
  .faq, .bf-bot, .bf-toolbar, .bf-status, .bf-print-hide, .bf-no-print,
  details.bf-assumptions { display: none !important; }

  /* Print button: only this calculator (bf-ui marks the path from <body> to its output) */
  body.bf-print-scoped > :not(.bf-print-path):not(.bf-print-target),
  body.bf-print-scoped .bf-print-path > :not(.bf-print-path):not(.bf-print-target) { display: none !important; }
  body.bf-print-scoped .bf-print-path { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }

  .bf-out, .calc-out { position: static !important; }
  .bf-print-head { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #000; }
  .bf-print-brand { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
  .bf-print-title { margin: 2px 0; font-size: 22px; }
  .bf-print-date { margin: 0; font-size: 12px; }
  .bf-print-inputs h3, .bf-print-assumptions h3 { font-size: 15px; margin: 12px 0 4px; }
  /* a long card (detailed cost, plot cost) may run over a page: keep its pieces whole instead of
     pushing the whole card to a new page and leaving the first one half empty */
  .bf-result { border: 1px solid #999; border-top: 3px solid #000; padding: 10px 12px; break-inside: auto; }
  .bf-headline, .bf-priced, .bf-badges, .bf-exclusions, .bf-table tr { break-inside: avoid; }
  .bf-print-inputs h3, .bf-print-assumptions h3, .bf-result h3 { break-after: avoid; }
  .bf-table-wrap { overflow: visible; }
  .bf-table { font-size: 12px; }
  .bf-table th, .bf-table td { padding: 4px 8px 4px 0; }
  .bf-badge { border-color: #000; color: #000 !important; background: none !important; }
  .bf-priced { background: none; border-left-color: #000; }
}