/* ══════════════════════════════════════════════════════════════════════════════════════════════
   [120500]  ESTIMATE PAGE

   ⚠ #estimate-view NEEDS THE SCROLL RULE. app.css:24 makes body a 100vh flex column with
   overflow:hidden, so a top-level view has to opt IN to scrolling or everything past the first
   screenful is unreachable. History and Ideas were added without it and both were unusable
   until 118500 — this view carries it from the start. min-height:0 is load-bearing: without it
   the flex item grows past the viewport instead of scrolling inside it.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
#estimate-view{ display:none; flex:1 1 0; min-height:0; overflow-y:auto; }
#estimate-view .inner{ max-width:900px; margin:0 auto; padding:30px 24px 80px; }

#estimate-view .est-title{ font-size:25px; font-weight:800; letter-spacing:-.01em; }
#estimate-view .est-sub{ font-size:12.5px; color:var(--tsec); margin-top:6px; line-height:1.55; }

#estimate-view .est-setup{
  background:var(--card); border:1px solid var(--card-bd); border-radius:12px;
  padding:26px 22px; margin-top:22px; font-size:13px; color:var(--tsec);
}
#estimate-view code{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px;
  background:var(--well); border:1px solid var(--well-bd); border-radius:4px;
  padding:1px 5px; color:var(--tprimary);
}

.est-card{
  background:var(--card); border:1px solid var(--card-bd); border-radius:12px;
  padding:20px 22px; margin-top:22px;
}
.est-ch{
  font-size:9.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tmut); margin-bottom:14px;
}

/* ── the label row ── */
.est-lbl{ display:flex; gap:10px; margin-bottom:18px; }
.est-lbl input{
  flex:1; background:var(--well); border:1px solid var(--well-bd); border-radius:7px;
  padding:10px 12px; color:var(--tprimary); font-family:var(--font); font-size:13px;
}
.est-lbl input:last-child{ max-width:250px; }
.est-lbl input::placeholder{ color:var(--place); }
.est-lbl input:focus{ outline:none; border-color:var(--value); }

/* ── the item table ── */
.est-tbl{ width:100%; border-collapse:collapse; }
.est-tbl thead th{
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tmut); text-align:left; padding:0 0 9px; border-bottom:1px solid var(--divider);
}
.est-tbl thead th.r{ text-align:right; }
.est-tbl tbody td{ padding:9px 0; border-bottom:1px solid var(--divider); font-size:13.5px; vertical-align:middle; }
.est-tbl tbody tr:last-child td{ border-bottom:0; }
.est-item{ font-weight:600; }
.est-unit{ color:var(--tmut); font-size:11px; width:44px; }
.est-tbl td.r{ text-align:right; }

.est-num{
  width:92px; background:var(--well); border:1px solid var(--well-bd); border-radius:6px;
  padding:7px 9px; color:var(--tprimary); font-family:var(--font); font-size:13px;
  text-align:right; -moz-appearance:textfield;
}
.est-num::-webkit-outer-spin-button,.est-num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.est-num:focus{ outline:none; border-color:var(--value); }
.est-num.est-rate{ width:80px; color:var(--tsec); }
.est-amt{ font-variant-numeric:tabular-nums; font-weight:600; min-width:92px; display:inline-block; }
.est-amt.zero{ color:var(--tmut); font-weight:400; }
/* a rate nobody derived says so on the row, not only on the card */
.est-man{
  font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tmut); border:1px solid var(--well-bd); border-radius:9px;
  padding:2px 6px; margin-left:8px; vertical-align:1px;
}

/* ── a one-off looks nothing like a priced item, on purpose ── */
.est-addrow td{ padding-top:13px; }
.est-oo{ display:flex; align-items:center; gap:9px; padding:5px 0; }
.est-ootext{
  flex:1; background:none; border:0; border-bottom:1px dashed var(--well-bd);
  color:var(--tprimary); font-family:var(--font); font-size:12.5px; padding:5px 2px;
}
.est-ootext::placeholder{ color:var(--place); font-style:italic; }
.est-ootext:focus{ outline:none; border-bottom-color:var(--value); }
.est-oox{ background:none; border:0; color:var(--tmut); cursor:pointer; font-size:15px; padding:0 4px; }
.est-oox:hover{ color:#e0736f; }
.est-add{
  background:none; border:1px dashed var(--well-bd); border-radius:7px; color:var(--tmut);
  font-family:var(--font); font-size:11.5px; font-weight:600; padding:6px 12px; cursor:pointer;
}
.est-add:hover{ color:var(--value); border-color:var(--value); }

/* ── pours ── */
.est-jc{ margin-top:20px; padding-top:16px; border-top:1px solid var(--divider); }
.est-pour{ display:flex; align-items:center; gap:11px; padding:4px 0 2px; }
.est-pour .est-nm{ flex:1; font-size:13px; font-weight:600; }
.est-pour .est-nm small{
  display:block; color:var(--tmut); font-size:10.5px; font-weight:400; margin-top:3px;
}

/* ── the result ── */
.est-res{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--divider); flex-wrap:wrap;
}
.est-spread{ display:flex; align-items:center; gap:9px; }
.est-spread label{ font-size:11px; color:var(--tsec); }
.est-pm{ display:flex; gap:4px; }
.est-pm button{
  background:var(--well); border:1px solid var(--well-bd); border-radius:14px; color:var(--tsec);
  font-family:var(--font); font-size:11px; font-weight:600; padding:5px 12px; cursor:pointer;
}
.est-pm button.on{ background:var(--value); border-color:var(--value); color:#0d0d0d; }
.est-out{ text-align:right; flex:1; min-width:270px; }
.est-out .k{ font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--tmut); }
.est-range{
  font-size:30px; font-weight:800; color:var(--value); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; margin-top:4px; line-height:1.15;
}
.est-mid{ font-size:11.5px; color:var(--tsec); margin-top:5px; }

.est-acts{ display:flex; gap:12px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.est-btn{
  background:var(--value); border:0; border-radius:7px; color:#0d0d0d; font-family:var(--font);
  font-size:12.5px; font-weight:700; padding:10px 18px; cursor:pointer;
}
.est-btn.ghost{ background:none; border:1px solid var(--well-bd); color:var(--tsec); }
.est-btn.ghost:hover{ color:var(--tprimary); border-color:var(--tsec); }
.est-btn:disabled{ opacity:.55; cursor:default; }
.est-note{ font-size:11px; color:var(--tmut); line-height:1.6; flex:1; min-width:260px; }

/* ── the rate card ── */
.est-rc{ width:100%; border-collapse:collapse; }
.est-rc thead th{
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tmut); text-align:left; padding:0 0 9px; border-bottom:1px solid var(--divider);
}
.est-rc thead th.r{ text-align:right; }
.est-rc td{ padding:10px 0; border-bottom:1px solid var(--divider); font-size:13px; }
.est-rc tr:last-child td{ border-bottom:0; }
.est-rc td.r{ text-align:right; }
.est-rcrate{ font-variant-numeric:tabular-nums; font-weight:600; }
.est-u{ color:var(--tmut); font-size:10.5px; margin-left:4px; }
.est-sp{ color:var(--tmut); font-size:11px; font-variant-numeric:tabular-nums; }
.est-why{ color:var(--tmut); font-size:10.5px; margin-top:3px; line-height:1.45; }
.est-src{
  font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  border-radius:11px; padding:3px 9px; border:1px solid rgba(111,207,127,.5);
  color:#8edc9b; background:rgba(111,207,127,.12);
}
/* an honest warning, not a decoration: two observations is not a rate */
.est-src.thin{ color:#e8bd6a; border-color:rgba(224,163,58,.5); background:rgba(224,163,58,.14); }
.est-src.man{ color:var(--tmut); border-color:var(--well-bd); background:var(--well); }

/* ── saved ── */
.est-saved{ width:100%; border-collapse:collapse; }
.est-saved td{ padding:11px 0; border-bottom:1px solid var(--divider); font-size:13px; }
.est-saved tr:last-child td{ border-bottom:0; }
.est-saved .s-site{ font-weight:600; }
.est-saved .s-when{ color:var(--tmut); font-size:11px; margin-top:2px; }
.est-saved .s-amt{ text-align:right; font-variant-numeric:tabular-nums; color:var(--tsec); }
.est-saved .s-job{ text-align:right; width:130px; }
.est-jchip{
  font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  border-radius:11px; padding:3px 9px; border:1px solid var(--well-bd); color:var(--tmut);
}
.est-jchip.on{ color:#8edc9b; border-color:rgba(111,207,127,.5); background:rgba(111,207,127,.12); }

/* light mode: the vars carry most of it, these are the hard-coded few */
body.light .est-src.man{ color:#6b6b66; }
body.light #estimate-view code{ background:#f1f1ee; color:#1a1a18; border-color:rgba(0,0,0,.12); }

/* [121500] the working, shown under the pours input */
.est-calc{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  margin-top:12px; padding:10px 12px; background:var(--well);
  border:1px solid var(--well-bd); border-radius:8px; font-size:12px; color:var(--tsec);
}
.est-calc b{ color:var(--tprimary); font-variant-numeric:tabular-nums; font-weight:700; margin-right:10px; }
.est-calc i{ flex-basis:100%; font-style:normal; color:var(--tmut); font-size:10.5px; margin-top:3px; }

/* the prelims model on the rate card */
.est-prelimsbox{
  margin-top:16px; padding:14px 15px; border:1px solid var(--well-bd);
  border-radius:9px; background:rgba(90,169,240,.07);
}
.est-formula{ font-size:13.5px; color:var(--tsec); }
.est-formula b{ color:var(--value); font-variant-numeric:tabular-nums; }
.est-prelimsbox .est-why{ margin-top:7px; max-width:620px; }

/* [121800] a saved estimate reopens for editing */
.est-srow{ cursor:pointer; }
.est-srow:hover .s-site{ color:var(--value); }

/* [121900] loading is not the same as "not set up" */
#estimate-view .est-loading{ color:var(--tmut); font-style:italic; }

/* [122000] the all-in column is the one people read; the other two are the working */
.est-rcall{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--value); }
.est-prelimsbox .est-formula{ font-size:13px; }