/* EquiScape Job Estimator — page styles layered on site.css tokens.
   Light-yellow boxes = the only things you type in. Everything else calculates. */

:root { --input-bg: #FFF9DD; --input-border: #E4CF7E; --input-ink: #3A3A3A; --gap-bg: #FBEDEA; --gap-ink: #A33A2A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --input-bg: #2A2615; --input-border: #6E5E26; --input-ink: #F2EBD0; --gap-bg: #2E1A16; --gap-ink: #F08A76; }
}
:root[data-theme="dark"] { --input-bg: #2A2615; --input-border: #6E5E26; --input-ink: #F2EBD0; --gap-bg: #2E1A16; --gap-ink: #F08A76; }

.est-hero .hero-actions { align-items: center; }
.yellow-key { display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--input-bg); border: 1px solid var(--input-border); color: var(--input-ink); font-weight: 600; }

/* ---------- top: where the money goes ---------- */
.est-section { padding-top: var(--space-8); }
.est-top { display: grid; gap: var(--space-3); }
.est-top > * { min-width: 0; }
.est-top-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.est-top-head h2 { font-size: clamp(20px, 2.6vw, 24px); }
.est-top-head .muted { font-size: 14px; }
.est-bar { height: 40px; font-size: 14px; }
.est-bar > span { padding-inline: 8px; transition: width .25s ease; text-overflow: ellipsis; }
@media (max-width: 520px) { .est-bar { font-size: 12px; } .est-bar > span { padding-inline: 4px; } }
.est-bar .split-cost:only-child, .est-bar .split-profit:only-child { border-radius: var(--radius-sm); }
.est-gap { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight: 600; font-size: 15px; line-height: 1.45; }
.est-gap.is-gap { background: var(--gap-bg); color: var(--gap-ink); }
.est-gap.is-ok { background: var(--surface-mint); color: var(--brand); border: 1px solid var(--brand); }
.est-gap.is-empty { background: var(--surface-card); color: var(--ink-muted); border: 1px dashed var(--border-strong); font-weight: 500; }

/* ---------- job details ---------- */
.est-job { margin-top: var(--space-6); }
.est-job .qgrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---------- layout ---------- */
.est-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; margin-top: var(--space-8); }
.est-grid > * { min-width: 0; }
.est-col-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.est-col-head h2 { font-size: clamp(20px, 2.6vw, 24px); }
.est-col-head .btns { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- cost lines ---------- */
.est-lines { display: grid; gap: var(--space-2); }
.est-lines-head, .est-line { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 78px 112px; align-items: center; gap: var(--space-3); }
.est-lines-head { padding: 0 var(--space-4); }
.est-lines-head .r, .est-line .r { text-align: right; }
.est-lines-head .c, .est-line .c { text-align: center; }
.est-line { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px var(--space-4); }
.est-line .line-name { font-size: 17px; }
.est-line .line-desc { font-size: 14px; line-height: 20px; color: var(--ink); }
.est-line .line-price { font-size: 18px; }
.est-mk { display: grid; gap: 0; justify-items: center; font-variant-numeric: tabular-nums; }
.est-mk b { font-size: 15px; font-weight: 700; color: var(--ink); }
.est-mk span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.est-line.is-zero .line-price { color: var(--ink-muted); }
.est-line-labor { background: var(--surface-mint); border: 2px solid var(--brand); }
.est-line-labor .est-labor-cost { display: grid; justify-items: end; text-align: right; }
.est-line-labor .est-labor-cost b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.est-line-labor .est-labor-cost span { font-size: 12px; line-height: 16px; color: var(--ink-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.est-labor-in { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: var(--space-3); }
.est-labor-in .kpi-label { display: block; margin-bottom: 4px; }
[hidden] { display: none !important; }
.share-out { width: 100%; font-size: 13px !important; }

/* light-yellow input with prefix / suffix */
.ein { display: flex; align-items: center; gap: 4px; background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: var(--radius-sm); padding: 0 10px; min-height: 44px; color: var(--input-ink); }
.ein:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.ein > span { font-weight: 600; font-size: 14px; color: var(--input-ink); opacity: .8; white-space: nowrap; }
.ein input[type="text"] { border: 0; background: transparent; padding: 10px 0; text-align: right; font-weight: 700; color: var(--input-ink); min-width: 0; width: 100%; outline: none; }
.ein input[type="text"]:focus { outline: none; }
.ein-text input[type="text"] { text-align: left; font-weight: 600; }
.field .ein { width: 100%; }

/* less-common lines */
.est-rare { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); background: transparent; padding: 0; }
.est-rare > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; padding: 14px var(--space-4); font-weight: 700; color: var(--brand); }
.est-rare > summary::-webkit-details-marker { display: none; }
.est-rare > summary::after { content: "Show"; font-weight: 600; color: var(--ink); font-size: 14px; }
.est-rare[open] > summary::after { content: "Hide"; }
.est-rare .est-lines { padding: 0 var(--space-2) var(--space-2); }

/* markups + targets */
.est-settings { margin-top: var(--space-6); display: grid; gap: var(--space-6); }
.est-mk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.est-mk-grid .field label, .est-targets .field label { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.est-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.est-settings .group-label { margin: 0 0 var(--space-3); }
.est-settings .hint { font-size: 13px; color: var(--ink-muted); margin-top: var(--space-2); }

/* ---------- the bid (right column) ---------- */
.est-bid { position: sticky; top: 132px; display: grid; gap: var(--space-2); }
.bid-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 14px var(--space-4) 14px var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); min-width: 0; }
.bid-row > div { min-width: 0; }
.bid-name { font-weight: 700; font-size: 17px; line-height: 22px; }
.bid-desc { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.bid-val { font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bid-total { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.bid-total .bid-desc, .bid-total .bid-name { color: var(--on-brand); }
.bid-total .bid-val { font-size: clamp(24px, 3vw, 30px); }
.bid-gp { background: var(--surface-mint); border: 2px solid var(--brand); }
.bid-gp .bid-name, .bid-gp .bid-val, .bid-gp .bid-desc { color: var(--brand); }
.bid-gm { background: var(--surface-cream); border: 1.5px dashed var(--gold); }
.bid-gm .bid-name, .bid-gm .bid-val, .bid-gm .bid-desc { color: var(--gold-text); }
.bid-gm .pill { margin-top: 6px; }
.bid-gm.is-ok { background: var(--surface-mint); border: 2px solid var(--brand); }
.bid-gm.is-ok .bid-name, .bid-gm.is-ok .bid-val, .bid-gm.is-ok .bid-desc { color: var(--brand); }
.est-bid .group-label { margin: var(--space-4) 0 var(--space-1); }
.rate-hero { background: var(--surface-mint); border: 2px solid var(--brand); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4) var(--space-4); display: grid; gap: 4px; }
.rate-hero .tile-value { color: var(--brand); }
.rate-hero.is-low { background: var(--surface-cream); border: 1.5px dashed var(--gold); }
.rate-hero.is-low .tile-value { color: var(--gold-text); }
.rate-hero .pill { justify-self: start; margin-top: 4px; }
.est-rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.est-rates .tile-value { font-size: 22px; line-height: 28px; }
.bid-unit .ein { width: 140px; flex: none; }

/* actions */
.est-actions { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.est-actions .btn { width: 100%; justify-content: center; }
.est-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.est-status { font-size: 14px; font-weight: 600; color: var(--brand); min-height: 1px; }
.est-status:empty { display: none; }

/* saved estimates */
.est-saved { display: grid; gap: var(--space-2); }
.est-saved ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.est-saved li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-card); font-size: 14px; }
.est-saved li b { display: block; color: var(--ink); }
.est-saved li span { color: var(--ink-muted); font-size: 12px; }
.est-saved li .btns { display: flex; gap: 6px; flex: none; }
.btn-xs { padding: 4px 10px; font-size: 12px; }

/* key idea */
.est-key { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: 15px; }
.est-key b { color: var(--brand); }
.est-key .phone { font-weight: 700; color: var(--ink-heading); }

/* how it works */
.est-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.est-how .card { padding: var(--space-6); gap: var(--space-3); }
.est-how .formula { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.mm-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.mm-table th, .mm-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); text-align: right; }
.mm-table th:first-child, .mm-table td:first-child { text-align: left; }
.mm-table th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.mm-table tr.hl td { color: var(--brand); font-weight: 700; }

/* mobile sticky summary */
.est-dock { display: none; }

@media (max-width: 1080px) {
  .est-grid { grid-template-columns: minmax(0, 1fr); }
  .est-bid { position: static; }
  .est-mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .est-how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .est-lines-head { display: none; }
  .est-line { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "cat name price" "cat in mk"; row-gap: var(--space-2); }
  .est-line > .cat { grid-area: cat; align-self: start; }
  .est-line > .est-what { grid-area: name; }
  .est-line > .line-price { grid-area: price; align-self: start; }
  .est-line > .est-cost-in { grid-area: in; }
  .est-line > .est-mk { grid-area: mk; justify-items: end; }
  .est-line-labor { grid-template-areas: "cat name price" "cat cost mk" "lin lin lin"; }
  .est-line-labor > .est-labor-in { grid-area: lin; }
  .est-line-labor > .est-labor-cost { grid-area: cost; justify-items: start; text-align: left; }
  .est-labor-in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .est-labor-in .kpi-label { min-height: 28px; }
  .est-labor-in .ein { padding: 0 8px; }
  .est-line .line-desc { font-size: 13px; }
  .est-mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bid-row { padding-left: var(--space-4); }
  .est-dock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; justify-content: space-between; align-items: center; gap: var(--space-3);
    padding: 10px max(16px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-panel); }
  .est-dock b { font-size: 20px; font-variant-numeric: tabular-nums; }
  .est-dock span { font-size: 12px; display: block; opacity: .9; }
  .est-dock a { color: var(--on-brand); font-size: 14px; }
  .est-dock .pill { background: var(--on-brand); color: var(--brand); border-color: var(--on-brand); }
  .est-dock .pill.pill-alert { background: var(--alert); color: var(--on-alert); border-color: var(--on-brand); }
  body.has-dock .site-footer { padding-bottom: 72px; }
  html:has(body.has-dock) { scroll-padding-bottom: 88px; }
  .est-actions-row { grid-template-columns: minmax(0, 1fr); }
}

/* print: the worksheet on paper */
@media print {
  .site-header, .site-footer, .est-hero .hero-actions, .est-actions, .est-saved, .est-dock, #review, .est-how-section, .calc-band, .tip, .est-col-head .btns { display: none !important; }
  body { background: #fff; }
  .page-hero { padding-block: 12px; }
  .est-grid { grid-template-columns: 1.5fr 1fr; }
  .est-bid { position: static; }
  .est-rare:not([open]) { display: none; }
  .ein { background: #fff; border-color: #bbb; }
}

/* ---------- revenue vs. cost vs. gross profit color code ----------
   Teal = revenue (what the customer pays), clay = cost (what you pay), green = gross profit (what's left). */
:root { --rev: #1F5F7E; --rev-bg: #E8F1F5; --on-rev: #FFFFFF; --cost: #94532A; --cost-bg: #F8EEE6; --on-cost: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --rev: #86C1DD; --rev-bg: #15232B; --on-rev: #0E1A20; --cost: #E3A578; --cost-bg: #2A1E16; --on-cost: #1E140D; }
}
:root[data-theme="dark"] { --rev: #86C1DD; --rev-bg: #15232B; --on-rev: #0E1A20; --cost: #E3A578; --cost-bg: #2A1E16; --on-cost: #1E140D; }

/* top: revenue − job cost = gross profit */
.est-eq { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-2); align-items: stretch; }
.eq-box { display: grid; gap: 2px; align-content: start; padding: 12px 16px; border-radius: var(--radius-md); border: 2px solid; min-width: 0; }
.eq-k { font-size: 11px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.eq-box b { font-size: clamp(22px, 2.8vw, 30px); line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; }
.eq-box small { font-size: 13px; line-height: 18px; color: var(--ink-muted); font-weight: 500; }
.eq-rev { background: var(--rev-bg); border-color: var(--rev); color: var(--rev); }
.eq-cost { background: var(--cost-bg); border-color: var(--cost); color: var(--cost); }
.eq-gp { background: var(--surface-mint); border-color: var(--brand); color: var(--brand); }
.eq-gp.is-neg { background: var(--gap-bg); border-color: var(--alert); color: var(--alert); }
.eq-op { align-self: center; font-size: 30px; line-height: 1; font-weight: 800; color: var(--ink-heading); padding-inline: 2px; }
@media (max-width: 640px) {
  .est-eq { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .eq-op { justify-self: center; font-size: 22px; }
  .eq-box { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k b" "s b"; align-items: center; column-gap: var(--space-3); padding: 10px 14px; }
  .eq-k { grid-area: k; } .eq-box b { grid-area: b; font-size: 22px; } .eq-box small { grid-area: s; }
}

/* the whole bar is revenue */
.rev-brace { position: relative; height: 12px; margin: 22px 0 6px; border: 2px solid var(--rev); border-bottom: 0; border-radius: 6px 6px 0 0; }
.rev-brace span { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); background: var(--surface); padding: 0 10px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--rev); white-space: nowrap; }
.est-bar .split-cost { background: var(--cost); color: var(--on-cost); }

/* lines: cost column vs. price column */
.est-legend { font-size: 14px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 var(--space-3); }
.lg-cost, .lg-rev { font-weight: 700; padding: 1px 8px; border-radius: var(--radius-full); }
.lg-cost { background: var(--cost-bg); color: var(--cost); }
.lg-rev { background: var(--rev-bg); color: var(--rev); }
.est-lines-head .h-cost, .est-lines-head .h-rev { display: grid; justify-items: end; line-height: 1.25; }
.est-lines-head .h-cost { color: var(--cost); }
.est-lines-head .h-rev { color: var(--rev); }
.est-lines-head small { font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600; opacity: .9; }
.est-cost-in .ein { border-left: 5px solid var(--cost); }
.est-line-labor .est-labor-cost b { color: var(--cost); }
.est-line .line-price { color: var(--rev); background: var(--rev-bg); padding: 4px 8px; border-radius: var(--radius-sm); justify-self: end; }
.est-line.is-zero .line-price { color: var(--ink-muted); background: transparent; }

/* totals row */
.est-line-total { margin-top: var(--space-3); border: 2px solid var(--ink-heading); }
.est-line-total .cat { background: var(--ink-heading); color: var(--surface-card); font-size: 18px; }
.est-line-total .line-name { color: var(--ink-heading); }
.tot-cost, .tot-rev { display: grid; justify-items: end; text-align: right; gap: 2px; }
.tot-cost b, .tot-rev b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tot-cost span, .tot-rev span { font-size: 11px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.tot-cost { color: var(--cost); }
.tot-rev { color: var(--rev); }

/* the bid: revenue − cost = gross profit */
.bid-formula { font-weight: 700; font-size: 15px; margin: 0 0 var(--space-1); color: var(--ink-heading); }
.t-rev { color: var(--rev); } .t-cost { color: var(--cost); } .t-gp { color: var(--brand); }
.bid-rev, .bid-cost, .bid-gp, .bid-gm { padding-left: var(--space-3); }
.bid-rev > div, .bid-cost > div, .bid-gp > div, .bid-gm > div { flex: 1 1 auto; }
.bid-op { flex: none; width: 30px; height: 30px; border-radius: var(--radius-full); display: grid; place-items: center; font-weight: 800; font-size: 18px; line-height: 1; }
.bid-rev { background: var(--rev-bg); border: 2px solid var(--rev); }
.bid-rev .bid-name, .bid-rev .bid-val { color: var(--rev); }
.bid-rev .bid-val { font-size: clamp(22px, 2.6vw, 28px); }
.bid-rev .bid-op { background: var(--rev); color: var(--on-rev); }
.bid-cost { background: var(--cost-bg); border: 2px solid var(--cost); }
.bid-cost .bid-name, .bid-cost .bid-val { color: var(--cost); }
.bid-cost .bid-op { background: var(--cost); color: var(--on-cost); }
.bid-gp .bid-op { background: var(--brand); color: var(--on-brand); }
.bid-gm .bid-op { border: 1.5px dashed currentColor; font-size: 14px; }
.bid-parts { display: grid; gap: 4px; margin: -2px 0 2px 26px; padding: 4px 12px 4px 16px; border-left: 2px solid var(--rev); }
.bid-parts div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: 14px; }
.bid-parts small { display: block; font-size: 12px; color: var(--ink-muted); }
.bid-parts b { color: var(--rev); font-variant-numeric: tabular-nums; }
.bid-rule { border-top: 4px double var(--ink-heading); margin: 2px var(--space-2); }

@media (max-width: 700px) {
  .est-line-total > .tot-cost { grid-area: in; justify-items: start; text-align: left; }
  .est-line-total > .tot-rev { grid-area: price; }
  .est-cost-in::before, .est-line-labor .est-labor-cost::before, .est-line > .line-price::before {
    display: block; font-size: 10px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
  .est-cost-in::before { content: "Cost · you pay"; color: var(--cost); margin-bottom: 2px; }
  .est-line-labor .est-labor-cost::before { content: "Cost · you pay"; color: var(--cost); }
  .est-line > .line-price::before { content: "Price"; text-align: right; }
}
/* labor is a cost line: keep it neutral so green only ever means profit */
.est-line-labor { background: var(--surface-card); border: 2px solid var(--border-strong); }

/* ---------- markup steppers beside each line's cost ---------- */
.est-lines-head, .est-line { grid-template-columns: 40px minmax(0, 1fr) 128px 132px 112px; }
.est-lines-head .c { display: grid; justify-items: center; line-height: 1.25; }
.est-step { gap: 4px; }
.step { display: flex; align-items: stretch; height: 40px; border: 1.5px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); overflow: hidden; }
.step-btn { flex: none; width: 32px; border: 0; padding: 0; background: transparent; color: var(--brand); font: 800 19px/1 var(--font-sans); cursor: pointer; }
.step-btn:hover { background: var(--surface-mint); }
.step-btn:active { background: var(--border); }
.step-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.step-val { display: flex; align-items: center; justify-content: center; gap: 1px; flex: 1 1 auto; min-width: 0; border-inline: 1px solid var(--input-border); cursor: text; }
.step-val:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.step-val input { width: 40px; min-width: 0; border: 0; padding: 0; background: transparent; outline: none; text-align: right; font: 700 15px var(--font-sans); color: var(--input-ink); font-variant-numeric: tabular-nums; }
.est-mk .step-val span { font-size: 14px; font-weight: 700; color: var(--input-ink); letter-spacing: 0; text-transform: none; }
.est-mk .step-m { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
@media (max-width: 700px) {
  .est-line > .est-step { justify-items: end; }
  .step { height: 42px; }
  .step-btn { width: 38px; }
}
@media print { .step-btn { display: none; } .step { border: 0; background: none; } .step-val { border: 0; } }
@media (max-width: 700px) {
  /* phones: name, then cost × markup side by side, then the price */
  .est-line { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cat name name" "cat in mk" "cat price price"; }
  .est-line-labor { grid-template-areas: "cat name name" "cat cost mk" "cat price price" "lin lin lin"; }
  .est-line > .line-price, .est-line-total > .tot-rev { justify-self: end; }
  .est-line > .est-step { align-self: end; justify-items: stretch; }
  .est-line > .est-step .step-m { text-align: center; }
  .step-btn { width: 34px; }
  .est-line-total > .tot-cost { align-self: end; }
  .est-line-total > .est-mk { align-self: end; }
}