/* ==========================================================================
   Blackfire construction calculators — page layout (css/calc.css)
   Loaded after css/style.css and css/bf-tools.css on the calculator pages only.
   ========================================================================== */

/* two columns that never grow wider than the page (RS-04: the 1fr track grew to the table's
   min-content width and pushed the cost page to 648 px on phones) */
.calc { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 36px; }
.calc > * { min-width: 0; }
.calc--stack { grid-template-columns: minmax(0, 1fr); }
.calc--stack .calc-out, .calc--long .calc-out { position: static; }
.calc-out:empty::before { content: none; }

.calc-intro { margin: 0 0 14px; font-size: 15px; color: var(--stone); }
.calc-fs { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.calc-fs > legend, .calc-legend {
  display: block; width: 100%; margin: 0 0 10px; padding: 0 0 6px;
  font-size: 17px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--rule);
}
.calc-fs .field-grid { margin-bottom: 10px; }
.calc-hint { margin: -4px 0 12px; font-size: 14px; color: var(--stone); }
.calc .field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calc .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc .field { min-width: 0; }
.calc .field--wide { grid-column: span 2; }
.calc .field input, .calc .field select { min-width: 0; }
.calc .field.check { min-height: 44px; padding-bottom: 0; align-self: center; }
.calc [hidden] { display: none !important; }

/* scope matrix (paint: which surfaces get paint, primer, putty) */
.calc-scope { border-collapse: collapse; margin: 0 0 12px; font-size: 15px; }
.calc-scope th, .calc-scope td { padding: 4px 14px 4px 0; text-align: left; }
.calc-scope thead th { font-size: 13px; font-weight: 500; color: var(--stone); }
.calc-scope td label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.calc-scope input { width: 20px; height: 20px; accent-color: var(--accent); }

/* result card extras */
.calc-sub { margin: 18px 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
.calc-note { margin: 10px 0 0; font-size: 14px; color: var(--stone); }
.calc-batch { margin: 0 0 12px; padding: 10px 12px; background: var(--ash); font-size: 15px; }
.calc-cutlist, .calc-pbs { margin: 6px 0 12px; font-size: 14px; }
.calc-cutlist summary, .calc-pbs summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--ink); }
.calc-cutlist summary:focus-visible, .calc-pbs summary:focus-visible, .calc-scope input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.calc-pbs ul { margin: 6px 0 0; padding-left: 18px; }
.calc-cta { margin: 16px 0 0; }
.calc-cta .btn { display: inline-flex; align-items: center; min-height: 44px; }
.bf-qty td.num strong { font-size: 16px; }
.calc-boq th[scope="row"] { color: var(--ink); font-weight: 500; }
.calc-boq tr.calc-group th { padding-top: 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); border-bottom-color: var(--ink); }
.calc-boq tr.calc-subtotal th, .calc-boq tr.calc-subtotal td { font-weight: 600; background: var(--ash); }
.calc-boq tr.calc-unpriced td { color: var(--stone); }
.calc-missing { font-size: 13px; color: #8a4b00; font-weight: 600; }
.calc-rates td { font-size: 14px; }
.calc-layer { font-weight: 600; }
.calc-layer--sample { color: #8a4b00; }
.calc-layer--yours { color: #1f6b3a; }
.calc-layer--supplier { color: #2f4a6b; }

/* detailed cost: the item column of the cost lines gets the room */
@media (min-width: 641px) {
  [data-bf-rows="lines"] .bf-rows td:first-child { width: 40%; }
  [data-bf-rows="lines"] .bf-rows td:nth-child(2) { width: 17%; }
  [data-bf-rows="lines"] .bf-rows td:nth-child(4) { width: 12%; }
}

/* result tables with four columns (detailed cost lines, plot-cost rates): on phones each row
   becomes a small card — item on top, then labelled quantity / rate / amount — so the Amount
   column is never pushed off the side of the card */
@media (max-width: 640px) {
  .calc-stack, .calc-stack tbody, .calc-stack tr, .calc-stack th, .calc-stack td { display: block; }
  .calc-stack thead { display: none; }
  .calc-stack tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px;
    padding: 9px 0; border-bottom: 1px solid var(--rule);
  }
  .calc-stack tbody tr > th, .calc-stack tbody tr > td { border: 0; padding: 0; }
  .calc-stack tbody tr > th { grid-column: 1 / -1; }
  .bf-table.calc-stack tbody tr > td { text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .bf-table.calc-stack tbody tr > td:last-child { text-align: right; }
  .calc-stack td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--stone); font-weight: 400; }
  .bf-table.calc-stack tbody tr > th[colspan] + td { grid-column: 1 / -1; text-align: right; font-size: 16px; }
  .calc-stack tr.calc-group { padding-top: 16px; }
  .calc-stack tr.bf-total { border-bottom: 2px solid var(--ink); }
  .calc-stack tr.bf-total > th, .calc-stack tr.bf-total > td { border: 0; }
  /* detailed cost: a wider Amount column so "PKR 1,152,000" stays on one line at 360 px */
  .calc-boq.calc-stack tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); }
  /* plot-cost rates: quantity and amount side by side, the rate and its source underneath */
  .calc-rates.calc-stack tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-rates.calc-stack .calc-c-qty { grid-row: 2; grid-column: 1; }
  .calc-rates.calc-stack .calc-c-amt { grid-row: 2; grid-column: 2; }
  .calc-rates.calc-stack .calc-c-rate { grid-row: 3; grid-column: 1 / -1; }
}

/* plot cost: load state, rate overrides */
.calc-load { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--rule); background: var(--ash); font-size: 15px; }
.calc-load--error { border-left-color: var(--bf-error, #b3261e); color: var(--bf-error, #b3261e); font-weight: 500; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 16px; }
.calc-actions .btn { min-height: 44px; }
.calc-plan-note { margin: 8px 0 0; font-size: 14px; color: var(--graphite); background: var(--ash); padding: 8px 10px; }
.sample-banner.calc-sample { margin: 0 0 16px; }

/* tools hub: guide feature without a photo (RS-13: the hotlinked stock photos were removed) */
.feature.feature--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

/* tools hub: the new tool cards */
.tool-list .tool-new { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 2px; vertical-align: middle; }

/* phones: shorter page title so the first input is near the top; one-column fields below 420 px */
@media (max-width: 1024px) {
  .calc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .calc .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .page-tools .page-title { padding: 24px 0 18px; }
  .page-tools .page-title .logo-panel { display: none; }
  .page-tools .page-title .lead { font-size: 17px; margin-bottom: 10px; }
  .page-tools .tool { padding-top: 28px; }
  .page-tools .tool-head { margin-bottom: 16px; }
  .page-tools .tool-head p { font-size: 16px; }
}
@media (max-width: 520px) {
  .page-tools .page-title .lead { display: none; }   /* the tool's own introduction follows */
  .page-tools .page-title h1 { margin-bottom: 8px; }
}
@media (max-width: 420px) {
  .calc .field-grid, .calc .field-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 12px; }
  .calc .field span { font-size: 13.5px; }
}
@media (max-width: 359px) {
  .calc .field-grid, .calc .field-grid.two { grid-template-columns: minmax(0, 1fr); }
  .calc .field--wide { grid-column: auto; }
}

@media print {
  .page-tools .page-title, .page-tools .tool-nav, .calc-cta, .calc-actions { display: none !important; }
  .calc { grid-template-columns: 1fr; }
  .calc-cutlist, .calc-pbs { display: block; }
  .calc-cutlist > *, .calc-pbs > * { display: block; }
}