/* Website estimator (the approved v3 mock). Every selector is est- prefixed: home.css already owns .note and friends. */

.est { background: var(--night); color: var(--on-night); padding: var(--section) 0; }
.est .eyebrow { color: var(--on-night-3); }
.est h3 { color: var(--on-night); }
.est p { max-width: none; }
.est [hidden] { display: none !important; }
.est-h { font-size: var(--t-2xl); line-height: 1.05; letter-spacing: -0.03em; margin: 8px 0 16px; max-width: 18ch; color: var(--on-night); }
.est-lead { color: var(--on-night-2); font-size: var(--t-md); max-width: 52ch; margin: 0 0 var(--s-7); }
.est-lead a { color: var(--on-night); }
.est-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-areas: 'head price' 'body price'; column-gap: var(--s-7); align-items: start; }
.est-head { grid-area: head; }
.est-body { grid-area: body; }
.est-price { grid-area: price; }
.est-label { font: 500 var(--t-xs)/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-night-3); margin: 0 0 var(--s-3); }
.est-block { margin-bottom: var(--s-7); }
.est-elsewhere { color: var(--on-night-2); font-size: var(--t-md); }
.est-elsewhere a { color: var(--on-night); }

/* Inputs drawn as pills keep the real control, visually hidden, so keyboard and forms behave natively */
.est-txt input, .est-pills input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.est-txt:has(:focus-visible), .est-pills label:has(:focus-visible), .est-concept:has(:focus-visible) img { outline: 2px solid var(--green); outline-offset: 3px; }

/* Editable ledger */
.est-ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-night); }
.est-ledger li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 9px 0; border-bottom: 1px solid var(--line-night); font-size: var(--t-sm); }
.est-ledger input[type=checkbox] { accent-color: var(--green); width: 17px; height: 17px; margin: 0; }
.est-name { display: flex; align-items: baseline; gap: 10px; min-width: 0; cursor: pointer; }
.est-name b { font-weight: 450; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-path { font: 400 var(--t-xs) var(--font-mono); color: var(--on-night-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-tag { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-bright); }
.est-ledger li:has(.est-keep:not(:checked)) b { color: var(--on-night-3); text-decoration: line-through; }
.est-ledger li:has(.est-keep:not(:checked)) .est-txt { visibility: hidden; }
.est-txt { position: relative; font-size: var(--t-xs); color: var(--on-night-3); border: 1px solid var(--line-night); border-radius: var(--r-pill); padding: 4px 10px; white-space: nowrap; cursor: pointer; }
.est-txt:has(:checked) { color: var(--night); background: var(--on-night); border-color: var(--on-night); }
.est-txt:has(:checked) .est-txt__off, .est-txt:not(:has(:checked)) .est-txt__on { display: none; }
.est-show-all { display: none; }
.est-add { display: flex; gap: 8px; margin-top: var(--s-4); }
.est-add input { flex: 1; min-width: 0; background: transparent; color: var(--on-night); border: 1px solid var(--line-night); border-radius: var(--r-sm); padding: 10px 12px; font: inherit; font-size: var(--t-sm); }
.est-add input::placeholder { color: var(--on-night-3); }
.est-add button { background: transparent; color: var(--on-night); border: 1px solid var(--on-night-3); border-radius: var(--r-sm); padding: 0 16px; font: inherit; font-size: var(--t-sm); cursor: pointer; }
.est-add button:disabled { opacity: 0.4; cursor: default; }
.est-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.est-chips button { font: inherit; font-size: var(--t-xs); color: var(--on-night-2); background: transparent; border: 1px dashed var(--line-night); border-radius: var(--r-pill); padding: 5px 11px; cursor: pointer; }
.est-chips button:hover { color: var(--on-night); border-color: var(--on-night-3); }
.est-note { font-size: var(--t-xs); color: var(--on-night-3); margin: 10px 0 0; }

/* Features / also on your site */
.est-rows { border-top: 1px solid var(--line-night); }
.est-row { display: grid; grid-template-columns: 22px 1fr auto; gap: var(--s-3); align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line-night); font-size: var(--t-sm); cursor: pointer; }
.est-row input { accent-color: var(--green); width: 17px; height: 17px; margin: 2px 0 0; }
.est-row small { display: block; color: var(--on-night-3); font-size: var(--t-xs); margin-top: 2px; }
.est-row b { font-weight: 500; color: var(--on-night-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.est-row--top { border-top: 1px solid var(--line-night); }
.est-row:has(input:disabled) { cursor: default; color: var(--on-night-3); }
.est-row--num { grid-template-columns: 1fr 76px auto; align-items: center; cursor: default; }
.est-row--num input { width: 100%; height: auto; margin: 0; background: transparent; color: var(--on-night); border: 1px solid var(--line-night); border-radius: var(--r-sm); padding: 7px 8px; font: inherit; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.est-found { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-bright); margin-left: 6px; }

/* Price card */
.est-price { background: var(--night-2); border: 1px solid var(--line-night); border-radius: var(--r-lg); padding: var(--s-6); }
.est-price__tier { font: 500 var(--t-xs) var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--on-night-3); margin: 0; }
.est-price__num { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin: 10px 0 6px; color: var(--green-bright); font-variant-numeric: tabular-nums; }
.est-price__num--words { font-size: var(--t-2xl); color: var(--on-night); }
.est-price__fixed { color: var(--on-night-2); font-size: var(--t-sm); margin: 0 0 var(--s-5); }
.est-receipt { list-style: none; padding: 0; margin: 0 0 var(--s-5); font-size: var(--t-sm); border-top: 1px solid var(--line-night); }
.est-receipt:empty { display: none; }
.est-receipt li { display: flex; justify-content: space-between; gap: var(--s-4); padding: 9px 0; border-bottom: 1px solid var(--line-night); color: var(--on-night-2); font-variant-numeric: tabular-nums; }
.est-receipt li span:last-child { color: var(--on-night); white-space: nowrap; }
.est-receipt .est-receipt__total { border-bottom: 0; padding-top: 12px; font-weight: 600; font-size: var(--t-lg); color: var(--on-night); }
.est-receipt .est-receipt__month { font-size: var(--t-xs); }
.est-inc { list-style: none; padding: 0; margin: 0; font-size: var(--t-xs); color: var(--on-night-2); }
.est-inc li { padding: 4px 0 4px 18px; position: relative; }
.est-inc li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 8px; height: 4px; border: solid var(--green-bright); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.est-price__basis { font-size: var(--t-xs); color: var(--on-night-3); margin: var(--s-4) 0 0; line-height: 1.5; }

/* The look */
.est-look { margin-top: var(--s-8); border-top: 1px solid var(--line-night); padding-top: var(--s-7); }
.est-look__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: var(--s-5); }
.est-look__head h3 { font-size: var(--t-xl); letter-spacing: -0.02em; margin: 0; }
.est-look__head span { color: var(--on-night-3); font-size: var(--t-sm); }
.est-concepts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-6); }
.est-concept { position: relative; display: block; cursor: pointer; }
.est-concept img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: top; border-radius: var(--r-sm); display: block; border: 1px solid var(--line-night); }
.est-concept:has(:checked) img { outline: 2px solid var(--green-bright); outline-offset: 3px; }
.est-concept:has(:checked)::after { content: "Closest"; position: absolute; top: 8px; left: 8px; font: 500 11px var(--font-mono); text-transform: uppercase; background: var(--green-bright); color: var(--night); padding: 3px 7px; border-radius: 4px; }
.est-concept span { display: block; font-size: var(--t-xs); color: var(--on-night-3); margin-top: 6px; }
.est-look__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.est-lab { display: block; font-size: var(--t-sm); margin-bottom: 8px; color: var(--on-night); }
.est-lab span { color: var(--on-night-3); }
.est-field input[type=text], .est-field input[type=email], .est-field textarea { display: block; width: 100%; background: transparent; color: var(--on-night); border: 1px solid var(--line-night); border-radius: var(--r-sm); padding: 12px 13px; font: inherit; font-size: var(--t-sm); margin-bottom: 8px; }
.est-field textarea { resize: vertical; min-height: 48px; line-height: 1.5; }
.est-field input::placeholder, .est-field textarea::placeholder { color: var(--on-night-3); }
.est input[type=text]:focus, .est input[type=email]:focus, .est input[type=number]:focus, .est textarea:focus { border-color: var(--on-night-3); }
.est [aria-invalid="true"] { border-color: #ff9b9b; }
.est-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.est-pills label { position: relative; border: 1px solid var(--line-night); border-radius: var(--r-pill); padding: 8px 14px; font-size: var(--t-sm); color: var(--on-night-2); cursor: pointer; }
.est-pills label:hover { color: var(--on-night); }
.est-pills label:has(:checked) { border-color: var(--on-night); color: var(--on-night); }
.est-yn { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: 8px 0; font-size: var(--t-sm); }
.est-yn .est-pills { margin: 0; }

/* Ask + send */
.est-ask { margin-top: var(--s-8); border-top: 1px solid var(--line-night); padding-top: var(--s-7); display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s-7); }
.est-ask h3 { font-size: var(--t-xl); letter-spacing: -0.02em; margin: 0 0 8px; }
.est-ask > div > p { color: var(--on-night-2); margin: 0; font-size: var(--t-sm); }
.est-ask__fields { display: grid; gap: var(--s-5); }
.est-ask__fields input[type=text], .est-ask__fields input[type=email], .est-ask__fields textarea { margin-bottom: 0; }
.est-ask__fields .est-pills { margin-bottom: 0; }
.est-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.est-send-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.est-send-row .btn { padding: 15px 26px; }
.est-send-row .btn:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
.est-send-row small { color: var(--on-night-3); font-size: var(--t-xs); max-width: 40ch; line-height: 1.5; text-wrap: pretty; }
.est-status { color: var(--on-night); font-size: var(--t-sm); margin: 0; }
.est-status:empty { display: none; }
.est-status a { color: var(--green-bright); }
.est-noscript { max-width: var(--wrap); margin: 0 auto; padding: var(--s-8) var(--gutter); }

/* Mobile total bar */
.est-bar { display: none; }
@media (max-width: 860px) {
  .est { padding-bottom: calc(var(--section) + 56px); }
  .est-grid { grid-template-columns: 1fr; grid-template-areas: 'head' 'price' 'body'; }
  .est-price { padding: var(--s-5); margin-bottom: var(--s-7); }
  .est-ask, .est-look__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .est-concepts { grid-template-columns: 1fr 1fr; }
  .est-path { display: none; }
  .est-ledger--short li:nth-child(n+6) { display: none; }
  .est-show-all { display: block; margin-top: var(--s-3); background: none; border: 0; padding: 4px 0; color: var(--on-night); font: inherit; font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .est-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; justify-content: space-between; align-items: center; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--night-2); border-top: 1px solid var(--line-night); color: var(--on-night); font-size: var(--t-sm); }
  .est-bar b { font-size: var(--t-lg); color: var(--green-bright); font-variant-numeric: tabular-nums; }
  .est-bar span { color: var(--on-night-3); font-size: var(--t-xs); }
}
@media (max-width: 520px) {
  .est-pair { grid-template-columns: 1fr; }
}