/* Import Decoder (public/decoder.js). Mobile first, same look as the Buyer brief. */
.dec{min-width:0}
.dec p{margin:0}
.dec-lede{color:var(--smoke);max-width:62ch;font-size:.95rem;line-height:1.6}
.dec-sub{font-size:.76rem;line-height:1.5;color:var(--dim)}
.dec-top{display:grid;gap:16px;min-width:0}
.dec-form{display:grid;gap:12px;padding:16px 14px;border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:6px;background:var(--pit);min-width:0}
.dec-form input[type=text]{min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--pit2);width:100%}
.dec-go{justify-self:stretch}
.dec-drop{display:grid;gap:10px;padding:10px;border:1.5px dashed var(--line);border-radius:10px;background:var(--pit2);min-width:0}
.dec-pick{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px;border-radius:8px;cursor:pointer;color:var(--chalk)}
.dec-pick:hover{background:var(--pit3)}
.dec-pick:focus-within{outline:2px solid var(--brass);outline-offset:2px}
.dec-pick svg{flex:0 0 auto;color:var(--brass)}
.dec-pick>span{display:grid;gap:2px}
.dec-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dec-thumb{position:relative;margin:0;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--pit);aspect-ratio:3/4}
.dec-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dec-rm{position:absolute;top:4px;right:4px;width:32px;height:32px;border-radius:999px;border:0;background:rgba(0,0,0,.62);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer}
.dec-side{display:grid;gap:12px;align-content:start;min-width:0}
.dec-how{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--pit2)}
.dec-how h3,.dec-box h3{font-family:var(--body);font-size:.95rem;font-weight:700;letter-spacing:0;color:var(--chalk);margin:0}
.dec-how ol{margin:0;padding-inline-start:20px;display:grid;gap:6px;font-size:.88rem;line-height:1.55}
.dec-how li::marker{color:var(--brass);font-weight:700}
.dec-busy{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--pit)}

.dec-out{display:grid;gap:16px;min-width:0}
.dec-yours{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;align-content:start;min-width:0}
.dec-yours .dec-sub{grid-column:1/-1}
.dec-yimg{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--pit2)}
.dec-yimg img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain}
.dec-result{display:grid;gap:14px;min-width:0;outline:0}
.dec-label{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:8px;background:var(--pit2);border:1px solid var(--line);font-size:.82rem;font-weight:600;line-height:1.45;color:var(--chalk)}
.dec-label svg{flex:0 0 auto;color:var(--brass);margin-top:1px}

.dec-grades{display:grid;gap:10px}
.dec-grade{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--pit)}
.dec-gv{flex:0 0 auto;min-width:56px;font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--brass);text-align:center}
.dec-gt{display:grid;gap:4px;min-width:0;justify-items:start}
.dec-gt p{font-size:.9rem;line-height:1.5}
.dec-gk{display:block;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.dec-conf{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--pit3);color:var(--smoke);vertical-align:middle;white-space:nowrap}
.dec-conf.dec-high{background:color-mix(in srgb,var(--go) 16%,transparent);color:var(--go)}
.dec-conf.dec-medium{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.dec-conf.dec-low{background:color-mix(in srgb,var(--live) 14%,transparent);color:var(--live)}

.dec-box{display:grid;gap:10px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--pit2);min-width:0}
.dec-bh{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.dec-dl{display:grid;gap:8px;margin:0}
.dec-f{display:grid;grid-template-columns:minmax(96px,36%) 1fr;gap:10px;align-items:baseline;padding-top:8px;border-top:1px solid var(--line);min-width:0}
.dec-f:first-child{border-top:0;padding-top:0}
.dec-f dt{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.dec-f dd{margin:0;font-size:.9rem;line-height:1.45;overflow-wrap:anywhere}
.dec-v{font-weight:700;font-variant-numeric:tabular-nums}

.dec-odo{border-color:var(--brass-deep)}
.dec-odo.dec-ok{border-left:3px solid var(--go)}
.dec-odo.dec-diff{border-left:3px solid var(--amber)}
.dec-odorow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dec-odorow>div{display:grid;gap:2px;align-content:start;justify-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--pit);min-width:0}
.dec-odorow b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.dec-odotext{font-size:.9rem;line-height:1.55;font-weight:600}

.dec-mapgrid{display:grid;gap:14px;align-items:start}
.dec-car{width:100%;max-width:240px;height:auto;justify-self:center;display:block}
.dec-shell{fill:var(--pit);stroke:var(--smoke);stroke-width:2}
.dec-line{fill:none;stroke:var(--line);stroke-width:1.5}
.dec-glass{fill:var(--pit3);stroke:var(--smoke);stroke-width:1.2}
.dec-roof{fill:var(--pit2);stroke:var(--line);stroke-width:1.2}
.dec-wheel{fill:var(--smoke)}
.dec-front{font:700 9px var(--body);letter-spacing:.2em;fill:var(--dim)}
.dec-pin rect{fill:var(--brass);stroke:var(--pit);stroke-width:2}
.dec-pin text{font:800 11px var(--body);fill:var(--on-brass)}
.dec-pin-bad rect{fill:var(--live)}
.dec-pin-bad text{fill:var(--pit)}
.dec-pin-unk rect{fill:var(--smoke)}
.dec-codes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dec-codes li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;line-height:1.45}
.dec-code{flex:0 0 auto;min-width:40px;text-align:center;font-weight:800;font-size:.8rem;padding:3px 8px;border-radius:999px;background:var(--brass);color:var(--on-brass)}
.dec-code.dec-unk{background:var(--smoke);color:var(--pit)}
.dec-none{font-size:.86rem;color:var(--smoke)}
.dec-notes{margin:0;padding-inline-start:20px;display:grid;gap:8px}
.dec-notes li{font-size:.9rem;line-height:1.5}
.dec-notes li::marker{color:var(--brass);font-weight:700}
.dec-orig{display:block;font-size:.76rem;color:var(--dim)}
.dec-checks{background:var(--pit);border-color:var(--brass-deep);border-top:3px solid var(--brass)}
.dec-checks ul{margin:0;padding-inline-start:20px;display:grid;gap:8px}
.dec-checks li{font-size:.9rem;line-height:1.55}
.dec-checks li::marker{color:var(--brass)}
.dec a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}

.dec-guide{display:grid;gap:10px;min-width:0}
.dec-ggrid{display:grid;gap:12px}
.dec-legend{display:grid;gap:8px;margin:0}
.dec-legend div{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:baseline;padding-top:8px;border-top:1px solid var(--line)}
.dec-legend div:first-child{border-top:0;padding-top:0}
.dec-legend dt{font-weight:800;color:var(--brass)}
.dec-legend dd{margin:0;font-size:.86rem;line-height:1.5}
.dec-h3b{margin-top:8px!important}

/* the hero and brief links */
.shero-dec{margin-top:4px;font-size:.82rem}
.shero-dec a{color:var(--smoke);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.shero-dec a:hover{color:var(--chalk);text-decoration-color:currentColor}
.bb-dec{font-size:.82rem;color:var(--smoke)}

@media (min-width:760px){
 .dec-top{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
 .dec-form{padding:20px}
 .dec-go{justify-self:start}
 .dec-out{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);align-items:start}
 .dec-yours{position:sticky;top:84px;grid-template-columns:1fr}
 .dec-grades{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
 .dec-mapgrid{grid-template-columns:220px 1fr}
 .dec-ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}