/* ETCH Pro app screens.
   Layout and components follow the ETCH Pro app prototype (ProLnkAPP: header, offer card, offer detail, jobs timeline, earnings, standing),
   skinned with the locked ETCH Pro tokens: ink headers and tab bar, panel cards, ground page, Copper for actions and money,
   Michroma for headlines 20px and up, Public Sans for UI, IBM Plex Mono for every figure. Each screen is a fixed 390x844 frame. */
.etp{--ink:#15181C;--ground:#F4F2EE;--panel:#FBFAF7;--line:#D6D1C7;--muted:#5D6168;--cu:#A84F28;--cul:#D98A5F;
  --display:Michroma,Eurostile,"Arial Black",sans-serif;--ui:"Public Sans","Helvetica Neue",system-ui,sans-serif;--data:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  position:relative;width:390px;height:844px;overflow:hidden;background:var(--ground);color:var(--ink);font:400 14px/20px var(--ui);-webkit-font-smoothing:antialiased;text-align:left}
.etp *{box-sizing:border-box}
.etp p,.etp h1,.etp h2,.etp h3{margin:0}
.etp .m{font-family:var(--data);font-variant-numeric:tabular-nums}

/* status bar, always light text: Pro headers are ink */
.etp .sb{position:absolute;top:0;left:0;right:0;height:52px;display:flex;justify-content:flex-end;align-items:center;gap:6px;padding:0 26px;z-index:9;color:var(--ground)}
.etp .sb::before{content:"";position:absolute;left:50%;top:11px;width:118px;height:33px;margin-left:-59px;border-radius:20px;background:#000}
.etp .sb svg{display:block}

/* header (Header in the prototype) */
.etp .hdr{background:var(--ink);color:var(--ground);padding:52px 18px 16px;position:relative;z-index:5}
.etp .hdr .row1{display:flex;align-items:center;gap:12px}
.etp .hdr .bk{flex:none;width:34px;height:34px;border-radius:4px;background:rgba(244,242,238,.12);display:grid;place-items:center}
.etp .hdr .ttlw{flex:1;min-width:0}
.etp .hdr .sub{font:600 11px/16px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,242,238,.62);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etp .hdr .ttl{font:400 20px/28px var(--display);color:var(--ground)}
.etp .hdr .ava{flex:none;width:36px;height:36px;border-radius:4px;background:var(--cu);color:#fff;display:grid;place-items:center;font:600 13px var(--data)}
.etp .hdr .bell{flex:none;position:relative;width:36px;height:36px;border-radius:4px;background:rgba(244,242,238,.12);display:grid;place-items:center}
.etp .hdr .bell i{position:absolute;top:5px;right:5px;min-width:16px;height:16px;border-radius:2px;background:var(--cu);color:#fff;font:600 10px/16px var(--data);text-align:center;font-style:normal;padding:0 3px}
.etp .hdr .lk{height:13px;width:auto;display:block;margin-bottom:12px}
.etp .chips{display:flex;gap:6px;margin-top:14px}
.etp .chips span{padding:7px 12px;border-radius:2px;font:600 12px var(--ui);background:rgba(244,242,238,.1);color:rgba(244,242,238,.8)}
.etp .chips span.on{background:var(--ground);color:var(--ink)}

/* body */
.etp .bd{padding:14px 16px 0}
.etp .lbl{font:600 11px/16px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px;display:flex;justify-content:space-between}
.etp .lbl:first-child{margin-top:2px}
.etp .card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:14px}
.etp .card + .card{margin-top:10px}
.etp .kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.etp .kv:last-child{border-bottom:0}
.etp .kv span{color:var(--muted)}
.etp .kv b{font-weight:600;text-align:right}
.etp .card.kvs{padding:2px 14px}

/* badges, countdown, trade chip */
.etp .bdg{display:inline-flex;align-items:center;gap:5px;font:600 10.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:2px;border:1px solid var(--line);color:var(--ink);background:var(--ground);white-space:nowrap}
.etp .bdg.cu{background:var(--cu);border-color:var(--cu);color:#fff}
.etp .bdg.ink{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.etp .bdg.out{background:transparent;border-color:var(--cu);color:var(--cu)}
.etp .cd{display:inline-flex;align-items:center;gap:5px;font:600 12px/1 var(--data);color:var(--cu);background:var(--ground);border:1px solid var(--line);padding:5px 8px;border-radius:2px;white-space:nowrap}
.etp .tc{display:inline-flex;align-items:center;gap:7px;font:600 12.5px var(--ui);color:var(--ink)}
.etp .tc::before{content:"";width:7px;height:7px;background:var(--cu);border-radius:50%}

/* offer card (OfferCard) */
.etp .oc{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.etp .oc + .oc{margin-top:10px}
.etp .oc .strip{background:var(--ink);color:var(--cul);font:600 10.5px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;display:flex;align-items:center;gap:6px}
.etp .oc .in{padding:14px}
.etp .oc .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.etp .oc h3{font:600 16.5px/22px var(--ui);letter-spacing:-.01em;margin-bottom:6px}
.etp .oc .sc{color:var(--muted);font-size:13.5px;line-height:19px;margin-bottom:12px}
.etp .oc .meta{display:flex;gap:12px;font:500 12px var(--data);color:var(--muted);margin-bottom:12px}
.etp .oc .val{display:flex;justify-content:space-between;align-items:flex-end;padding-top:12px;border-top:1px solid var(--line)}
.etp .oc .val small{display:block;font:600 10.5px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.etp .oc .val b{font:600 21px/1 var(--data);letter-spacing:-.01em}
.etp .oc .val em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:4px}
.etp .oc .act{display:grid;grid-template-columns:1fr 2fr;gap:8px;padding:0 14px 14px}

/* summary banner */
.etp .ban{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--cu);border-radius:4px;padding:12px 14px;margin-bottom:12px}
.etp .ban b{display:block;font-size:14.5px;font-weight:700}
.etp .ban span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.etp .ban .r{text-align:right;flex:none}
.etp .ban .r b{font:600 17px var(--data);color:var(--cu)}
.etp .ban .r span{font:600 10px var(--ui);letter-spacing:.14em;text-transform:uppercase}
.etp .storm{display:flex;gap:12px;align-items:center;background:var(--ink);color:var(--ground);border-radius:4px;padding:12px 14px;margin-bottom:12px}
.etp .storm .ic{flex:none;width:36px;height:36px;border-radius:4px;background:rgba(244,242,238,.12);display:grid;place-items:center}
.etp .storm b{display:block;font-size:14px}
.etp .storm span{display:block;font-size:12px;color:rgba(244,242,238,.7);margin-top:1px}

/* buttons */
.etp .btn{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:4px;background:var(--cu);color:#fff;font:600 15px var(--ui);white-space:nowrap}
.etp .btn.out{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.etp .btn.ink{background:var(--ink);color:var(--ground)}
.etp .bar{position:absolute;left:0;right:0;bottom:0;padding:12px 16px 30px;background:var(--panel);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:8px;z-index:6}
.etp .bar.one{grid-template-columns:1fr}

/* photos */
.etp .ph{position:relative;border-radius:4px;overflow:hidden;background:#cfcac1}
.etp .ph img{display:block;width:100%;height:100%;object-fit:cover}
.etp .ph .pc{position:absolute;left:8px;bottom:8px;background:var(--ink);color:var(--ground);border-radius:2px;padding:4px 7px;font:600 10px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.etp .phs{display:flex;gap:8px;margin-bottom:14px}
.etp .phs .ph{height:104px;flex:1}

/* list rows */
.etp .li{display:flex;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.etp .li:last-child{border-bottom:0}
.etp .li .ic{flex:none;width:32px;height:32px;border-radius:4px;background:var(--ground);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink)}
.etp .li .ic.cu{background:var(--cu);border-color:var(--cu);color:#fff}
.etp .li .ic.ink{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.etp .li .tx{flex:1;min-width:0}
.etp .li b{display:block;font-size:14px;font-weight:600;line-height:19px}
.etp .li span{display:block;font-size:12px;color:var(--muted);line-height:16px}
.etp .li .r{flex:none;text-align:right}
.etp .li .r.m{font-weight:600;font-size:14px}

/* jobs timeline (Active Jobs) */
.etp .tl{list-style:none;margin:0;padding:4px 0 0}
.etp .tl li{position:relative;padding:0 0 14px 28px;font-size:14px;font-weight:600}
.etp .tl li small{display:block;font:500 12px var(--data);color:var(--muted)}
.etp .tl li::before{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--ink)}
.etp .tl li::after{content:"";position:absolute;left:8px;top:18px;bottom:0;width:2px;background:var(--line)}
.etp .tl li:last-child::after{display:none}
.etp .tl li.now::before{background:var(--cu)}
.etp .tl li.next{color:var(--muted)}
.etp .tl li.next::before{background:var(--panel);border:2px solid var(--line);width:12px;height:12px}

/* earnings hero (ink slab) */
.etp .slab{background:var(--ink);color:var(--ground);padding:52px 20px 20px}
.etp .slab .k{display:flex;justify-content:space-between;align-items:center;font:600 11px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,242,238,.62)}
.etp .slab .k .bdg{background:transparent;border-color:var(--cul);color:var(--cul)}
.etp .slab .v{font:600 42px/1 var(--data);letter-spacing:-.02em;margin:14px 0 4px;color:var(--ground)}
.etp .slab .s{font-size:13px;color:rgba(244,242,238,.62)}
.etp .slab .spk{display:block;margin-top:12px}
.etp .st3{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:4px;background:var(--line);gap:1px;overflow:hidden;margin-bottom:4px}
.etp .st3 div{background:var(--panel);padding:12px 10px}
.etp .st3 small{display:block;font:600 10px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.etp .st3 b{font:600 15px var(--data)}
.etp .stream{display:flex;height:10px;border-radius:2px;overflow:hidden;margin:2px 0 12px}

/* standing */
.etp .score{display:flex;align-items:center;gap:14px}
.etp .score .n{font:600 44px/1 var(--data);letter-spacing:-.02em}
.etp .score .n small{font:500 14px var(--data);color:var(--muted);letter-spacing:0}
.etp .meter{height:8px;background:var(--line);border-radius:2px;overflow:hidden;margin:12px 0 4px}
.etp .meter i{display:block;height:100%;background:var(--cu)}
.etp .ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:10px}
.etp .ladder span{font:600 9.5px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:7px 2px;border:1px solid var(--line);border-radius:2px;color:var(--muted);background:var(--ground)}
.etp .ladder span.on{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.etp .pts div{display:grid;grid-template-columns:1fr 86px 44px;gap:8px;align-items:center;padding:6px 0;font-size:12.5px}
.etp .pts span{color:var(--muted)}
.etp .pts i{height:5px;background:linear-gradient(90deg,var(--ink) calc(var(--v)*1%),var(--line) 0);border-radius:1px}
.etp .pts b{font:600 12px var(--data);text-align:right}

/* note */
.etp .note{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:17px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:10px 12px;margin-top:10px}
.etp .note svg{flex:none;margin-top:1px}

/* tab bar, ink */
.etp .tabs{position:absolute;left:0;right:0;bottom:0;height:84px;background:var(--ink);display:flex;justify-content:space-around;padding-top:10px;z-index:7}
.etp .tabs div{display:flex;flex-direction:column;align-items:center;gap:4px;font:600 10.5px var(--ui);color:rgba(244,242,238,.55)}
.etp .tabs .on{color:var(--cul)}
.etp .hi{position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:9px;background:rgba(244,242,238,.75);z-index:8}

/* camera */
.etp.cam{background:#000}
.etp.cam .vf{position:absolute;inset:0}
.etp.cam .vf img{width:100%;height:100%;object-fit:cover;object-position:46% 40%}
.etp.cam .tp{position:absolute;top:64px;left:0;right:0;display:flex;justify-content:center}
.etp.cam .tp span{background:var(--ink);color:var(--ground);border-radius:2px;padding:8px 12px;font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase}
.etp.cam .fr{position:absolute;left:30px;right:30px;top:140px;bottom:236px}
.etp.cam .fr i{position:absolute;width:28px;height:28px;border:2px solid var(--ground)}
.etp.cam .fr i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.etp.cam .fr i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.etp.cam .fr i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.etp.cam .fr i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.etp.cam .btm{position:absolute;left:0;right:0;bottom:0;height:200px;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:16px;padding-bottom:40px;color:rgba(244,242,238,.8);font-size:13px}
.etp.cam .sh{width:70px;height:70px;border-radius:50%;border:3px solid var(--ground);display:grid;place-items:center}
.etp.cam .sh::after{content:"";width:54px;height:54px;border-radius:50%;background:var(--cu)}
.etp .stream i{display:block;height:100%}

/* license scan viewfinder */
.etp.cam .vf.doc{background:radial-gradient(120% 90% at 50% 40%,#6A5848,#3B3129 70%,#221C17)}
.etp.cam .vf.doc .lic{position:absolute;left:44px;right:44px;top:330px;height:190px;background:#F4F2EE;border-radius:10px;box-shadow:0 18px 40px -12px rgba(0,0,0,.6);display:grid;grid-template-columns:96px 1fr 40px;gap:16px;align-items:center;padding:20px;transform:rotate(-3deg)}
.etp.cam .vf.doc .lic .ph{display:block;width:96px;height:120px;border-radius:4px;background:linear-gradient(160deg,#C9C2B8,#9E978D)}
.etp.cam .vf.doc .lic .l{display:block;height:9px;border-radius:2px;background:#C9C2B8;margin:0 0 12px}
.etp.cam .vf.doc .lic .w70{width:90%}.etp.cam .vf.doc .lic .w50{width:62%}.etp.cam .vf.doc .lic .w60{width:76%}.etp.cam .vf.doc .lic .w40{width:48%}
.etp.cam .vf.doc .lic .seal{display:block;width:40px;height:40px;border-radius:50%;border:3px solid #A84F28;align-self:end}
.etp.cam .found{position:absolute;left:22px;right:22px;top:548px;z-index:3;display:flex;gap:10px;align-items:flex-start;background:var(--panel);color:var(--ink);border-left:3px solid var(--cu);border-radius:4px;padding:12px 14px}
.etp.cam .found svg{flex:none;margin-top:2px;color:var(--cu)}
.etp.cam .found b{display:block;font-size:14px}
.etp.cam .found span{display:block;font-size:12px;color:var(--muted)}

/* ProPass card */
.etp .pass{background:var(--ink);color:var(--ground);border-radius:4px;padding:16px;margin-bottom:4px}
.etp .pass .pt{display:flex;align-items:center;gap:12px}
.etp .pass .pt i{flex:none;width:50px;height:50px;border-radius:4px;background:var(--cu);color:#fff;display:grid;place-items:center;font-size:16px;font-style:normal;font-weight:600}
.etp .pass .pt b{display:block;font:400 19px/1.2 var(--display)}
.etp .pass .pt span{display:block;font-size:12.5px;color:rgba(244,242,238,.65)}
.etp .pass .pt img{margin-left:auto;width:34px;height:34px;border-radius:8px}
.etp .pass .p3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(244,242,238,.14);border-radius:4px;overflow:hidden;margin-top:14px}
.etp .pass .p3 div{background:#1E2328;padding:9px 6px;text-align:center}
.etp .pass .p3 b{display:block;font:600 13px var(--data);color:var(--cul)}
.etp .pass .p3 small{display:block;font:600 9.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:rgba(244,242,238,.55);margin-top:2px}
.etp .pass .pq{display:flex;gap:12px;align-items:center;margin-top:12px}
.etp .pass .pq span{flex:none;width:72px;height:72px;background:var(--ground);border-radius:4px;padding:6px}
.etp .pass .pq span svg{display:block;width:100%;height:100%}
.etp .pass .pq p{font-size:12px;color:rgba(244,242,238,.7);line-height:16px}
.etp .pass .pq p b{display:block;font-size:13.5px;color:var(--ground);margin-bottom:2px}

/* homeowner view (ETCH Home) */
.etp.home .sb{color:var(--ink)}
.etp .hdr.lt{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line)}
.etp .hdr.lt .sub{color:var(--muted)}
.etp .hdr.lt .ttl{color:var(--ink)}
.etp.home .hi{background:rgba(21,24,28,.5)}
.etp .vchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.etp .vchips span{display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--ui);padding:6px 8px;border-radius:2px;background:#E6EFE9;color:#1E5C3F}

/* service area: toggle, ZIP grid, works-in line */
.etp .card.tgrow{display:flex;align-items:center;gap:12px;padding:12px 14px}
.etp .card.tgrow .tx{flex:1;min-width:0}
.etp .card.tgrow b{display:block;font-size:14px;font-weight:600;line-height:19px}
.etp .card.tgrow span{display:block;font-size:12px;color:var(--muted);line-height:16px}
.etp .tog{flex:none;position:relative;width:44px;height:26px;border-radius:13px;background:var(--line);display:block!important;font-size:0!important}
.etp .tog::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.etp .tog.on{background:var(--cu)}
.etp .tog.on::after{left:21px}
.etp .zgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.etp .zgrid span{font:600 12.5px/1 var(--data);text-align:center;padding:11px 0;border:1px solid var(--line);border-radius:2px;background:var(--panel);color:var(--muted);letter-spacing:.02em}
.etp .zgrid span.on{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.etp .pass .pz{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(244,242,238,.14)}
.etp .pass .pz small{font:600 9.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,238,.55);white-space:nowrap}
.etp .pass .pz b{font:600 12px var(--data);color:var(--ground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.etp .bdg.ok{background:#1E7A55;border-color:#1E7A55;color:#fff}
.etp .av,.av{display:block;width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:50% 30%;background:#DDD8CF;flex:none}
.etp .li .ic.av,.etp .li .av.lg{display:block;width:32px;height:32px;border-radius:6px;border:1px solid var(--line);padding:0}
.etp .li .av.lg{width:48px;height:48px;border-radius:10px}
.etp .pass .pt .av{width:56px;height:56px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(244,242,238,.35),0 0 0 1px rgba(0,0,0,.4)}
.etp .hdr .av.sm{width:36px;height:36px;border-radius:8px;margin-right:10px;box-shadow:inset 0 0 0 1px rgba(244,242,238,.35)}
.etp .hdr .row1 .ttlw{display:flex;align-items:center}
.etp .hdr .row1 .ttlw>div{min-width:0}
.etp .match{display:flex;gap:8px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:12px;line-height:15px;color:#5D6168}
.etp .match img{width:22px;height:22px;border-radius:5px}