/* worthly.si — appraisal card: dial gauge, sold strip, comparable cards.
   Replaces the flat range bar. Everything is transform/opacity, no libraries. */

.appr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap}
.appr-title{font-size:17px;margin:0}
.appr-sub{color:var(--muted);font-size:12.5px;margin:4px 0 0}
.appr-badges{display:flex;gap:8px;flex-wrap:wrap}
.appr-h4{font-size:14px;margin:var(--sp-6) 0 var(--sp-2)}

/* sold: the strongest fact on the card, so it sits at the top with a green badge */
.sold-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 2px;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(16,163,74,.34);background:linear-gradient(135deg,rgba(16,163,74,.10),rgba(16,163,74,.02))}
.sold-badge{font:700 10.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#06331B;background:#5FE3A1;
  padding:5px 10px;border-radius:999px;white-space:nowrap}
.sold-badge.sm{padding:3px 8px;font-size:10px}
.sold-dom{font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap}
.sold-price{font:700 22px/1 var(--sans);color:var(--ink);white-space:nowrap}
.sold-meta{color:var(--muted);font-size:12.5px}
.sold-tag{margin-left:auto;color:var(--muted);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}

/* dial */
.dial-wrap{display:grid;grid-template-columns:minmax(240px,330px) minmax(0,1fr);gap:var(--sp-6);align-items:center;margin-top:var(--sp-5)}
.dial{position:relative;max-width:330px}
.dial svg{display:block;width:100%;height:auto;cursor:crosshair;touch-action:pan-y}
.dial .dial-lab{font:600 12px var(--mono);fill:#8296BF}
.dial .needle{transform-box:view-box;transform-origin:160px 152px;transition:none}
.dial-cap{margin:6px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.dial-cap b{color:var(--ink);font-weight:700}
.dial-side{min-width:0}
.dial-read{color:var(--ink-2);font-size:13.5px;margin:0 0 4px}
.dial-out{display:block;font:700 clamp(30px,4vw,42px)/1.05 var(--sans);letter-spacing:-.03em;color:var(--brand-700)}
.dial-legend{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.dial-legend li{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.dial-legend .sw{width:16px;height:8px;border-radius:3px;flex:0 0 auto}
.dial-legend .sw.band{background:linear-gradient(90deg,#3D77FF,#22D3EE)}
.dial-legend .sw.mid{background:#0A1230}
.dial-legend .sw.edge{background:#DDE5F5;border:1px solid #C9D5EA}

/* The appraise form: field and button must read as two separate controls, not one merged box. */
.checker-x .input-group{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  border:1px solid var(--line);border-radius:14px;background:#fff;padding:8px 8px 8px 16px;
  box-shadow:0 1px 2px rgba(16,32,80,.04)}
.checker-x .input-group:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-050)}
.checker-x .input-group input{grid-column:1;grid-row:1;min-width:0;border:0;outline:0;height:46px;
  font:500 17px var(--sans);color:var(--ink);background:none}
.checker-x .input-group .suffix{grid-column:2;grid-row:1;justify-self:end;color:var(--muted);font:600 15px var(--mono)}
.checker-x .input-group .btn{grid-column:1/-1;grid-row:2;width:100%;min-height:50px;border-radius:12px}
@media(min-width:700px){
  .checker-x .input-group{grid-template-columns:minmax(0,1fr) auto auto}
  .checker-x .input-group .btn{grid-column:3;grid-row:1;width:auto;padding:0 28px}
}

/* comparables as sold cards instead of a table */
.comps{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:12px;margin-top:var(--sp-3)}
.comp{display:flex;flex-direction:column;gap:6px;padding:15px 16px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#F8FAFF);text-decoration:none;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.comp:hover,.comp:focus-visible{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--brand-100);outline:0}
.comp .sold-badge{align-self:flex-start}
.comp-dom{font-size:14.5px;font-weight:600;color:var(--ink);word-break:break-all}
.comp-price{font:700 22px/1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.comp-meta{color:var(--muted);font-size:12px}
@media(max-width:760px){.dial-wrap{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}.comps{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
@media(prefers-reduced-motion:reduce){.comp{transition:none}.dial .needle{transition:none!important}}