/* Version 3, lists (D6). Loaded by templates/v3/base.html only when v3 is on. Scoped under .v3-mls (market.css
   holds the shared components and says why). */
/* lists */
body.v3 .v3-mls .v3-lcard{cursor:pointer}
body.v3 .v3-mls .v3-lcard .v3-lt{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
body.v3 .v3-mls .v3-lcard .v3-ln{font-weight:750;font-size:16px;letter-spacing:-.02em}
body.v3 .v3-mls .v3-lcard .v3-lf{font-size:13.5px;color:var(--grey);margin-top:2px}
body.v3 .v3-mls .v3-lthumbs{display:flex;gap:6px;margin-top:12px}
body.v3 .v3-mls .v3-lthumbs div{width:64px;height:48px;border-radius:10px;overflow:hidden;background:var(--sunken)}
body.v3 .v3-mls .v3-lthumbs svg{width:100%;height:100%;display:block}
body.v3 .v3-mls .v3-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
body.v3 .v3-mls .v3-stats div{background:var(--sunken);border-radius:12px;padding:10px 12px}
body.v3 .v3-mls .v3-stats b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em}
body.v3 .v3-mls .v3-stats span{font-size:12px;color:var(--grey)}
body.v3 .v3-mls .v3-steps{display:flex;gap:4px;margin:14px 0 4px}
body.v3 .v3-mls .v3-steps i{flex:1;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
body.v3 .v3-mls .v3-steps i.on{background:var(--ink)}
body.v3 .v3-mls .v3-phone{width:300px;height:600px;border-radius:44px;background:var(--ink);padding:10px;margin:0 auto;box-shadow:0 30px 60px -30px color-mix(in srgb,var(--ink) 70%,transparent)}
body.v3 .v3-mls .v3-phone .v3-scr{width:100%;height:100%;border-radius:35px;overflow:hidden;background:var(--white);overflow-y:auto;scrollbar-width:none}
body.v3 .v3-mls .v3-phone .v3-scr::-webkit-scrollbar{display:none}
body.v3 .v3-mls .v3-cp{font-size:13px}
body.v3 .v3-mls .v3-cp .v3-cph{padding:22px 18px 14px;text-align:center}
body.v3 .v3-mls .v3-cp .v3-cph small{display:block;color:var(--grey);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
body.v3 .v3-mls .v3-cp .v3-cph b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;margin-top:6px;line-height:1.15}
body.v3 .v3-mls .v3-cp .v3-cph span{display:block;color:var(--grey-d);margin-top:4px}
body.v3 .v3-mls .v3-cp .v3-img{height:200px;background:var(--sunken)}
body.v3 .v3-mls .v3-cp .v3-img svg{width:100%;height:100%;display:block}
body.v3 .v3-mls .v3-cp .v3-cpb{padding:14px 18px}
body.v3 .v3-mls .v3-cp .v3-cpb .v3-pr{font-size:18px;font-weight:800}
body.v3 .v3-mls .v3-cp .v3-cpb .v3-nt{background:var(--sunken);border-radius:12px;padding:10px 12px;margin-top:10px;color:var(--grey-d)}
body.v3 .v3-mls .v3-cp .v3-int{margin:12px 18px 0;height:46px;border-radius:99px;background:var(--ink);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;width:calc(100% - 36px)}
body.v3 .v3-mls .v3-cp .v3-int.on{background:var(--green);color:var(--ink)}
body.v3 .v3-mls .v3-cp .v3-foot{padding:14px 18px 22px;color:var(--grey);font-size:11px;line-height:1.5;border-top:1px solid var(--line-soft);margin-top:16px}


@media (min-width:900px){
body.v3 .v3-mls .v3-lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.v3 .v3-mls .v3-lgrid>.v3-card+.v3-card{margin-top:0}
body.v3 .v3-mls .v3-builder{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start}
body.v3 .v3-mls .v3-builder .v3-phone{position:sticky;top:0}
}
@media (min-width:1600px){
body.v3 .v3-mls .v3-lgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){
body.v3 .v3-mls .v3-lgrid>*+*{margin-top:10px}
body.v3 .v3-mls .v3-builder .v3-phone{margin-top:20px}
}

/* ── the builder and the client page in its frame ── */
body.v3 .v3-mls .v3-bnav{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
/* what stops a list going out, and its fix as the prototype's .isyou card does its answer: a pill under the line */
body.v3 .v3-mls .v3-bfix{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
body.v3 .v3-mls .v3-phone iframe{width:100%;height:100%;border:0;display:block;background:var(--white)}
body.v3 .v3-mls textarea.v3-field.v3-short{min-height:90px}
body.v3 .v3-mls .v3-who .v3-li{cursor:pointer}
body.v3 .v3-mls .v3-who input[type=radio],body.v3 .v3-mls .v3-li input[type=checkbox]{accent-color:var(--ink);width:20px;height:20px;flex:none}
body.v3 .v3-mls .v3-whosec{padding:0 16px 14px}
/* Who is it for? as the prototype draws it: three rows, the chosen one checked. Each radio covers its row unseen (the row
   is the control: a tap anywhere picks it, the keyboard still reaches it), and a row's section opens only once it is
   chosen. */
body.v3 .v3-mls .v3-who .v3-li{position:relative}
body.v3 .v3-mls .v3-who .v3-li>input[type=radio]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
body.v3 .v3-mls .v3-who .v3-li:has(>input:focus-visible){outline:2px solid var(--ink);outline-offset:-2px}
body.v3 .v3-mls .v3-who .v3-ck{display:none;color:var(--grey);flex:none}
body.v3 .v3-mls .v3-who .v3-li:has(>input:checked)>.v3-ck{display:flex}
body.v3 .v3-mls .v3-who .v3-whosec{display:none}
body.v3 .v3-mls .v3-who .v3-li:has(>input[value=clients]:checked)+.v3-whosec[data-who-sec=clients],
body.v3 .v3-mls .v3-who .v3-li:has(>input[value=new]:checked)+.v3-whosec[data-who-sec=new]{display:block}
body.v3 .v3-mls .v3-pick{max-height:260px;overflow-y:auto;margin-top:8px;border-radius:12px;background:var(--sunken)}
body.v3 .v3-mls .v3-ph-desk,body.v3 .v3-mls .v3-desk{display:none!important}
@media (min-width:900px){
  body.v3 .v3-mls .v3-ph-desk{display:block!important}
  body.v3 .v3-mls .v3-desk{display:inline-flex!important}
  body.v3 .v3-mls .v3-ph-phone{display:none}
}