/* Free Job Estimate Calculator — tool styles.
   Every value comes from a design token (§4.2). Scoped to .ftb-tool-je. */

/* ---------------------------------------------------------------- inputs */

.ftb-tool-je .ftb-je-set{margin:0 0 var(--ftb-space-5);padding:var(--ftb-space-5);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);
  background:var(--ftb-surface)}
.ftb-tool-je .ftb-je-set legend{padding:0 var(--ftb-space-2);
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);
  letter-spacing:var(--ftb-ls-tight);color:var(--ftb-text)}

/* Auto-fit rather than a fixed column count: the fieldsets hold two, three and
   five controls, and one rule that adapts beats four that do not. */
.ftb-tool-je .ftb-je-row{display:grid;gap:var(--ftb-space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.ftb-tool-je .ftb-je-row + .ftb-je-row{margin-top:var(--ftb-space-4)}
.ftb-tool-je .ftb-je-row .ftb-field{margin-bottom:0;min-width:0}
.ftb-tool-je .ftb-je-narrow{max-width:100%}
.ftb-tool-je .ftb-je-set .ftb-tool-stat{margin-top:var(--ftb-space-2)}

.ftb-tool-je .ftb-je-actions{margin-bottom:var(--ftb-space-6)}

/* -------------------------------------------------------------- headline */

.ftb-tool-je .ftb-je-result{margin-top:var(--ftb-space-2)}

.ftb-tool-je .ftb-je-headline{padding:var(--ftb-space-5);margin-bottom:var(--ftb-space-5);
  background:var(--ftb-surface-2);border:1px solid var(--ftb-border);
  border-radius:var(--ftb-radius-lg);text-align:center}
.ftb-tool-je .ftb-je-headline-label{margin:0;font-size:var(--ftb-text-sm);
  color:var(--ftb-text-muted);text-transform:uppercase;letter-spacing:.06em}
/* Reserved height so the number appearing never shifts the page (§10, CLS). */
.ftb-tool-je .ftb-je-total{margin:var(--ftb-space-2) 0 0;min-height:1.2em;
  font-size:var(--ftb-text-3xl);font-weight:var(--ftb-fw-bold);
  line-height:1.15;letter-spacing:var(--ftb-ls-tight);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ftb-tool-je .ftb-je-headline-sub{margin:var(--ftb-space-2) 0 0;min-height:1.4em;
  font-size:var(--ftb-text-sm);color:var(--ftb-text-muted)}
.ftb-tool-je .ftb-je-headline[data-state=loss]{background:var(--ftb-error-soft);
  border-color:var(--ftb-error)}
.ftb-tool-je .ftb-je-headline[data-state=loss] .ftb-je-total{color:var(--ftb-error)}
.ftb-tool-je .ftb-je-headline[data-state=breakeven]{background:var(--ftb-warning-soft);
  border-color:var(--ftb-warning)}

/* --------------------------------------------------------------- the table */

.ftb-tool-je .ftb-je-table{width:100%;border-collapse:collapse;
  font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug)}
.ftb-tool-je .ftb-je-table th,
.ftb-tool-je .ftb-je-table td{padding:var(--ftb-space-3);
  border-bottom:1px solid var(--ftb-border);vertical-align:top}
.ftb-tool-je .ftb-je-table th{text-align:left;font-weight:var(--ftb-fw-medium)}
.ftb-tool-je .ftb-je-table td{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ftb-tool-je .ftb-je-table .ftb-je-note{display:block;font-size:var(--ftb-text-sm);
  font-weight:var(--ftb-fw-normal);color:var(--ftb-text-muted);white-space:normal}
/* Subtotal rows carry the weight, so the eye finds the three numbers that
   matter without needing a colour to do it. */
.ftb-tool-je .ftb-je-table tr[data-kind=sub] th,
.ftb-tool-je .ftb-je-table tr[data-kind=sub] td{font-weight:var(--ftb-fw-semi);
  background:var(--ftb-surface-2)}
.ftb-tool-je .ftb-je-table tr[data-kind=total] th,
.ftb-tool-je .ftb-je-table tr[data-kind=total] td{font-weight:var(--ftb-fw-bold);
  border-top:2px solid var(--ftb-border-strong);border-bottom:none;
  font-size:var(--ftb-text-base)}
.ftb-tool-je .ftb-je-table tr[data-kind=credit] td{color:var(--ftb-text-muted)}
.ftb-tool-je .ftb-je-table tr[data-kind=spacer] td,
.ftb-tool-je .ftb-je-table tr[data-kind=spacer] th{border-bottom:none;height:var(--ftb-space-3);padding:0}

/* ------------------------------------------------------------- the panels */

.ftb-tool-je .ftb-je-insight{margin-top:var(--ftb-space-5);padding:var(--ftb-space-5);
  border:1px solid currentColor;border-left-width:4px;border-radius:var(--ftb-radius)}
/* These pairs are the ones core.css already uses for tool messages, so they
   are contrast-checked in both themes. Do not substitute a raw colour. */
.ftb-tool-je .ftb-je-insight--discount{background:var(--ftb-warning-soft);color:var(--ftb-warning)}
.ftb-tool-je .ftb-je-insight--headroom{background:var(--ftb-success-soft);color:var(--ftb-success)}
.ftb-tool-je .ftb-je-insight h3{margin:0;font-size:var(--ftb-text-base);
  letter-spacing:var(--ftb-ls-tight);color:inherit}
.ftb-tool-je .ftb-je-insight-lead{margin:var(--ftb-space-2) 0 0;
  font-size:var(--ftb-text-base);line-height:var(--ftb-lh-snug);color:var(--ftb-text)}
.ftb-tool-je .ftb-je-insight-lead strong{color:inherit}

.ftb-tool-je .ftb-je-dl{display:grid;gap:var(--ftb-space-3) var(--ftb-space-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));
  margin:var(--ftb-space-4) 0 0}
.ftb-tool-je .ftb-je-dl > div{min-width:0}
.ftb-tool-je .ftb-je-dl dt{font-size:var(--ftb-text-sm);color:var(--ftb-text-muted)}
.ftb-tool-je .ftb-je-dl dd{margin:0;font-size:var(--ftb-text-lg);
  font-weight:var(--ftb-fw-semi);color:var(--ftb-text);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.ftb-tool-je .ftb-je-warnings{margin-top:var(--ftb-space-5);padding:var(--ftb-space-4) var(--ftb-space-5);
  background:var(--ftb-surface-2);border-radius:var(--ftb-radius)}
.ftb-tool-je .ftb-je-warnings ul{margin:0;padding-left:var(--ftb-space-5);
  font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug);color:var(--ftb-text)}
.ftb-tool-je .ftb-je-warnings li + li{margin-top:var(--ftb-space-2)}

/* --------------------------------------------------------------- method */

.ftb-tool-je .ftb-je-method{margin-top:var(--ftb-space-5);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);
  background:var(--ftb-surface)}
.ftb-tool-je .ftb-je-method summary{padding:var(--ftb-space-3) var(--ftb-space-4);
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);cursor:pointer;
  min-height:var(--ftb-tap);display:flex;align-items:center}
.ftb-tool-je .ftb-je-method summary:focus-visible{outline:2px solid var(--ftb-primary);
  outline-offset:-2px}
.ftb-tool-je .ftb-je-steps{margin:0;padding:0 var(--ftb-space-5) var(--ftb-space-4) calc(var(--ftb-space-5) + var(--ftb-space-4));
  font-family:var(--ftb-mono);font-size:var(--ftb-text-code);
  line-height:1.9;color:var(--ftb-text-muted)}
.ftb-tool-je .ftb-je-steps li{overflow-wrap:anywhere}
.ftb-tool-je .ftb-je-steps strong{color:var(--ftb-text);font-weight:var(--ftb-fw-semi)}

/* Print-only furniture stays out of the way on screen. */
.ftb-tool-je .ftb-je-printhead,
.ftb-tool-je .ftb-je-printfoot{display:none}

.ftb-tool-je .ftb-tool-disclaimer{margin:var(--ftb-space-6) 0 0;padding:var(--ftb-space-5);
  background:var(--ftb-surface-2);border-radius:var(--ftb-radius);
  font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug);color:var(--ftb-text-muted)}

/* ------------------------------------------------------------ narrow UI */

@media (max-width:479px){
  .ftb-tool-je .ftb-je-set{padding:var(--ftb-space-4)}
  .ftb-tool-je .ftb-je-total{font-size:var(--ftb-text-2xl)}
  .ftb-tool-je .ftb-je-table th,
  .ftb-tool-je .ftb-je-table td{padding:var(--ftb-space-2)}
  .ftb-tool-je .ftb-je-actions .ftb-btn{flex:1 1 auto}
}

/* ==========================================================================
   PRINT
   The first @media print rule on the site. The brief asked for a print-friendly
   result, and the honest reading of that is a sheet a contractor can hand to a
   customer — not a screenshot of a web app with a nav bar on it.
   Everything outside .ftb-je-print is removed, including the site chrome, the
   form, and the tool's own buttons.
   ========================================================================== */

@media print{
  /*
   * Force the light palette. A dark-mode user printing this would otherwise
   * get white text on a background the printer does not render — a blank
   * sheet of paper.
   *
   * The selector list and the !important are both load-bearing, and the naive
   * version of this rule DOES NOT WORK. core.css sets its dark tokens under
   * `@media (prefers-color-scheme: dark) { :root:not([data-ftb-theme="light"]) }`,
   * which is specificity (0,2,0). A bare `:root` here is (0,1,0) and loses,
   * so someone whose OS is in dark mode — with no manual toggle set, which is
   * the default state — prints white on white. Verified by reading the
   * computed colour under these rules, not by assuming.
   *
   * !important overriding an otherwise unreachable theme rule is the case
   * §4.2 explicitly allows.
   */
  :root,
  :root:not([data-ftb-theme=light]),
  :root[data-ftb-theme=dark]{
    --ftb-bg:#fff !important; --ftb-surface:#fff !important; --ftb-surface-2:#fff !important;
    --ftb-text:#000 !important; --ftb-text-muted:#333 !important; --ftb-text-subtle:#555 !important;
    --ftb-border:#bbb !important; --ftb-border-strong:#666 !important;
    --ftb-warning-soft:#fff !important; --ftb-success-soft:#fff !important; --ftb-error-soft:#fff !important;
    --ftb-warning:#000 !important; --ftb-success:#000 !important; --ftb-error:#000 !important;
  }

  body *{visibility:hidden}
  .ftb-je-print, .ftb-je-print *{visibility:visible}
  .ftb-je-print{position:absolute;left:0;top:0;width:100%;margin:0;padding:0}

  .ftb-tool-je .ftb-je-printhead{display:block;margin-bottom:1.5rem;
    padding-bottom:.75rem;border-bottom:2px solid #000}
  .ftb-tool-je .ftb-je-printtitle{margin:0;font-size:1.5rem;font-weight:700;
    letter-spacing:-.01em}
  .ftb-tool-je .ftb-je-printmeta{margin:.25rem 0 0;font-size:.9rem;color:#333}

  .ftb-tool-je .ftb-je-headline{border:none;padding:0 0 1rem;text-align:left;
    background:none;margin-bottom:1rem}
  .ftb-tool-je .ftb-je-total{font-size:2rem}

  .ftb-tool-je .ftb-je-table{font-size:.95rem}
  .ftb-tool-je .ftb-je-table tr[data-kind=sub] th,
  .ftb-tool-je .ftb-je-table tr[data-kind=sub] td{background:none}
  /* A scroll container is meaningless on paper and would clip the table. */
  .ftb-tool-je .ftb-table-scroll{overflow:visible !important}

  .ftb-tool-je .ftb-je-insight{border-width:1px;border-left-width:3px;
    page-break-inside:avoid;break-inside:avoid}
  .ftb-tool-je .ftb-je-dl dd{font-size:1rem}

  /* The method is a <details> — open it so the arithmetic prints whether or
     not the person expanded it on screen. */
  .ftb-tool-je .ftb-je-method{border:none}
  .ftb-tool-je .ftb-je-method summary{display:none}
  .ftb-tool-je .ftb-je-steps{padding-left:1.5rem;line-height:1.6}

  .ftb-tool-je .ftb-je-printfoot{display:block;margin-top:1.5rem;
    padding-top:.75rem;border-top:1px solid #bbb;font-size:.8rem;color:#333}

  @page{margin:16mm}
}