/* ===========================================================================
   The estimate sheet — on screen, and on paper.

   The same markup serves both. The @media print block at the end strips the
   page around it so what prints is the document alone, at A4/Letter width.
   =========================================================================== */

/* the dialog the sheet previews in */
#est-dlg{
  border:none;padding:0;background:transparent;
  max-width:min(940px,94vw);width:100%;
}
#est-dlg::backdrop{background:rgba(16,28,48,.55);backdrop-filter:blur(3px)}
.est-bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:13px 18px;background:var(--ink);border-radius:12px 12px 0 0;
}
.est-bar p{margin:0;color:rgba(255,255,255,.74);font-size:13.5px}
.est-bar b{color:#fff}
.est-acts{display:flex;gap:9px;flex:none}
.est-btn{
  padding:9px 17px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  background:transparent;color:#fff;font-family:var(--disp);font-size:12px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.est-btn.pri{background:#fff;color:var(--ink);border-color:#fff}
.est-scroll{
  background:var(--bg-2);border-radius:0 0 12px 12px;
  padding:26px;max-height:76vh;overflow:auto;
}

/* ------------------------------------------------------------- the sheet */
/* Scoped to #est-sheet. This file is loaded on the main page now, where a bare
   .q collided with the theme section's quotation marks and rendered them as
   white sheets of paper. Keep every generic selector in here scoped. */
#est-sheet .q{
  background:#fff;color:#12171F;
  max-width:760px;margin:0 auto;padding:46px 52px 40px;
  font-family:var(--body);font-size:14px;line-height:1.62;
  box-shadow:0 8px 34px rgba(16,28,48,.14);
}
.q-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding-bottom:20px;border-bottom:2px solid #12171F;
}
.q-brand{display:flex;gap:13px;align-items:center}
.q-brand img{flex:none}
.q-brand b{
  display:block;font-family:var(--disp);font-size:16px;font-weight:900;
  letter-spacing:-.02em;line-height:1.2;
}
.q-brand span{font-size:12.5px;color:#49515C}
.q-meta{text-align:right;flex:none}
.q-meta div{margin-bottom:5px}
.q-meta span{
  display:block;font-family:var(--disp);font-size:9px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#69717C;
}
.q-meta b{font-family:var(--disp);font-size:13px;font-weight:800;
  font-variant-numeric:tabular-nums}

.q-h1{
  font-family:var(--disp);font-size:31px;font-weight:900;letter-spacing:-.035em;
  margin:26px 0 3px;
}
.q-lede{margin:0 0 26px;color:#0047BB;font-family:var(--disp);
  font-size:14.5px;font-weight:700}

/* --------------------------------------------------------------- the table */
.q-tbl{width:100%;border-collapse:collapse;margin-bottom:30px}
.q-tbl th{
  font-family:var(--disp);font-size:9.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:#69717C;text-align:left;
  padding:0 0 9px;border-bottom:1px solid #CBD4DE;
}
.q-tbl td{padding:15px 0;border-bottom:1px solid #E3E8EE;vertical-align:top}
.q-tbl td b{font-family:var(--disp);font-size:15px;font-weight:800;display:block}
#est-sheet .ta-r{text-align:right}
.q-when{
  display:block;font-family:var(--disp);font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:#69717C;margin-top:2px;
}
.q-sub{display:block;font-size:12.5px;color:#49515C;margin-top:5px;max-width:50ch}
.q-amt{font-family:var(--disp);font-size:16px;font-weight:800;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.q-tbl tfoot td{border-bottom:none;border-top:2px solid #12171F;padding-top:15px}
.q-tot{font-family:var(--disp);font-size:29px;font-weight:900;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ------------------------------------------------------------ what varies */
.q-vary{
  background:#F7F9FB;border-left:3px solid #F42736;
  padding:20px 24px;margin-bottom:26px;
}
.q-vary h2,.q-next h2{
  font-family:var(--disp);font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 9px;
}
.q-vary-l{margin:0 0 14px;font-size:13px;color:#49515C}
.q-vary dl{margin:0;display:grid;grid-template-columns:126px 1fr;gap:7px 16px}
.q-vary dt{font-family:var(--disp);font-size:12.5px;font-weight:800}
.q-vary dd{margin:0;font-size:12.5px;color:#49515C}

/* --------------------------------------------------------------- what next */
.q-next{margin-bottom:28px}
.q-next ol{margin:0;padding-left:19px;font-size:13px;color:#49515C}
.q-next li{margin-bottom:5px}
.q-next li::marker{color:#0047BB;font-weight:700}
.q-help{
  margin:14px 0 0;padding:12px 15px;background:#EDF3FC;border-radius:8px;
  font-size:12.5px;color:#12171F;
}

.q-foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:15px;border-top:1px solid #E3E8EE;
  font-size:11px;color:#69717C;
}

/* ============================================================ ON PAPER ====
   Everything but the sheet is removed, so the print is the document alone.
   Page margins come from @page; the sheet drops its own padding to suit. */

/* ------------------------------------------------------------ on a phone
   The sheet is a printed document, sized for a page: a 760px column with
   52px of padding, inside a dialog that adds 26px more. On a 390px screen
   that left 211px of usable width, so every line wrapped to two words and
   the header's two columns collapsed on top of each other.

   On screen the sheet stops pretending to be paper: the padding comes down,
   the header and the estimate/date block stack, and the table drops its
   description column so the figures stay readable. The @media print block
   below is untouched, so what actually prints is unchanged. */
@media screen and (max-width:620px){
  .est-bar{
    padding:11px 14px;gap:10px;flex-wrap:wrap;
  }
  .est-bar p{font-size:12px;flex:1 1 100%;order:1;margin:0}
  .est-acts{order:2;flex:1 1 100%;display:flex;gap:9px}
  .est-btn{flex:1;text-align:center;padding:10px 12px;font-size:11.5px}

  .est-scroll{padding:0;max-height:82vh;border-radius:0 0 12px 12px}

  #est-sheet .q{
    max-width:none;padding:24px 18px 26px;font-size:13.5px;box-shadow:none;
  }

  /* brand over reference, rather than side by side in 100px each */
  .q-top{flex-direction:column;gap:14px;padding-bottom:15px}
  .q-meta{text-align:left;display:flex;gap:22px}
  .q-meta div{margin-bottom:0}

  .q-h1{font-size:30px;line-height:1.05}
  .q-lede{font-size:13.5px}

  /* the per-item description is the first thing to go: the name, the dates
     and the amount are what a phone reader needs */
  .q-sub{display:none}
  .q-tbl td{padding:12px 0}
  .q-tbl td b{font-size:14px}
  .q-tot{font-size:22px}
  .q-amt{font-size:14px}

  .q-vary{padding:14px 15px}
  .q-vary dl{grid-template-columns:1fr;gap:2px}
  .q-vary dt{margin-top:12px}
  .q-vary dt:first-of-type{margin-top:0}
  .q-foot{flex-direction:column;gap:5px;align-items:flex-start}
}

@media print{
  @page{size:A4;margin:14mm 13mm}

  /* the page behind the dialog, and the dialog's own chrome */
  body > *:not(#est-dlg){display:none !important}
  #est-dlg{
    display:block !important;position:static;max-width:none;width:auto;
    border:none;padding:0;margin:0;background:#fff;
  }
  #est-dlg::backdrop{display:none}
  .est-bar{display:none !important}
  .est-scroll{
    background:#fff;padding:0;max-height:none;overflow:visible;border-radius:0;
  }

  #est-sheet .q{
    box-shadow:none;max-width:none;margin:0;padding:0;
    font-size:10.5pt;line-height:1.5;
  }
  .q-h1{font-size:22pt;margin:16pt 0 2pt}
  .q-lede{font-size:11pt;margin-bottom:16pt}
  .q-tbl{margin-bottom:18pt}
  .q-tot{font-size:20pt}
  .q-amt{font-size:12pt}
  .q-sub{font-size:9pt}
  .q-vary,.q-next{break-inside:avoid}
  .q-vary{background:#F7F9FB !important;margin-bottom:16pt;padding:12pt 14pt}
  .q-foot{margin-top:10pt}

  /* backgrounds and the red rule are meaningful here, so ask for them */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}