/* v8b dense in-phone screens — tokens/components from /workspace/app_mockups/src/app.css. min text 14px x k(.82) ≈ 11.5px at 390 */
.a-phone{--k:.82;--ink:#0D0D0F;--y:#FCF567;--cream:#FFF8E8;--mute:#6a6a72;--line:rgba(13,13,15,.12);display:inline-block;padding:9px;background:var(--ink);border-radius:calc(50px * var(--k) + 9px);box-shadow:0 40px 70px -40px rgba(13,13,15,.5);text-align:left}
@media (min-width:860px){.a-phone{--k:.9}}
@media (min-width:1000px){.a-phone.hero{--k:.94}}
.a-vp{width:calc(393px * var(--k));height:calc(852px * var(--k));overflow:hidden;border-radius:calc(50px * var(--k));position:relative}
.a-scr{position:absolute;top:0;left:0;width:393px;height:852px;background:var(--cream);transform:scale(var(--k));transform-origin:0 0;font-family:Onest,system-ui,sans-serif;color:var(--ink);font-size:15px;line-height:1.3;overflow:hidden}
.a-scr *{box-sizing:border-box}
.a-scr img{display:block}
.a-scr p{margin:0}
.a-sb{position:absolute;top:0;left:0;right:0;height:54px;display:flex;justify-content:space-between;align-items:center;padding:6px 32px 0 44px;z-index:50;font:600 17px/1 -apple-system,"SF Pro Text",Onest,sans-serif}
.a-sb .r{display:flex;gap:6px;align-items:center}
.a-isl{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:124px;height:36px;border-radius:20px;background:#000;z-index:60}
.a-hi{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:138px;height:5px;border-radius:9px;background:var(--ink);z-index:60}
.a-body{position:absolute;inset:0;padding:60px 18px 0}
.a-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.a-top>img{height:21px;width:auto}
.a-top .r{display:flex;gap:8px;align-items:center}
.a-me{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--ink)}
.a-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 13px;font-size:15px;font-weight:700;white-space:nowrap;flex:none}
.a-pill.line{background:#fff;border:1.5px solid var(--ink)}
.a-pill.y{background:var(--y);border:1.5px solid var(--ink)}
.a-pill.ink{background:var(--ink);color:#fff;border:1.5px solid var(--ink)}
.a-pill.g{background:rgba(13,13,15,.55);color:#fff;backdrop-filter:blur(10px)}
.a-h{font-family:"Archivo Black",Onest,sans-serif;font-weight:400;font-size:36px;letter-spacing:-.03em;line-height:.98;margin:0 0 12px;color:var(--ink)}
.a-h.w{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45);margin:0}
.a-h.sm{font-size:30px;margin:0}
.a-sec{font-size:15px!important;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:0 0 8px!important}
.a-chips{display:flex;gap:7px;margin:0 -18px 12px 0;overflow:hidden}
.a-chips span{flex:none;padding:8px 13px;border:1.5px solid #d4d4d9;border-radius:999px;font-weight:600;font-size:15px;background:#fff;white-space:nowrap}
.a-chips span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.a-search{display:flex;gap:10px;align-items:center;background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:6px 6px 6px 16px;font-size:16px;margin-bottom:12px;box-shadow:0 4px 0 var(--ink)}
.a-search span{color:var(--mute);flex:1}
.a-search i{font-style:normal;font-weight:700;font-size:15px;background:var(--y);border:1.5px solid var(--ink);border-radius:999px;padding:7px 15px}
/* city card */
.a-card{background:#fff;border:1.5px solid var(--ink);border-radius:24px;overflow:hidden}
.a-ph{position:relative;height:178px;background:#222}
.a-ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.6))}
.a-tags{position:absolute;left:12px;top:12px;display:flex;gap:6px;z-index:2}
.a-tags span{font-size:15px;font-weight:700;padding:5px 11px;border-radius:999px;background:rgba(13,13,15,.55);color:#fff;backdrop-filter:blur(10px)}
.a-tags span.y,.a-ytag{background:var(--y);color:var(--ink);border:1.5px solid var(--ink)}
.a-ytag{position:absolute;right:12px;top:12px;z-index:2;font-size:15px;font-weight:700;padding:4px 11px;border-radius:999px}
.a-pt{position:absolute;left:16px;bottom:12px;z-index:2;color:#fff;display:flex;align-items:baseline;gap:9px}
.a-pt h3{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:32px;letter-spacing:-.03em;margin:0;line-height:1}
.a-pt span{font-size:15px;font-weight:700}
.a-cb{padding:12px 14px 14px}
.a-mt{display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden;margin-bottom:12px}
.a-mt span{flex:none;font-size:15px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--cream);border:1px solid var(--line)}
.a-go{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.a-go b{font-size:15px}
.a-avs{display:flex;flex:none}
.a-avs img,.a-u{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--ink);margin-left:-9px}
.a-avs>:first-child,.a-u:not(.on)+img{margin-left:0}
.a-u{display:none;background:var(--ink);color:#fff;font:400 13px "Archivo Black",sans-serif;place-items:center}
.a-u.on{display:grid;animation:pop .5s ease}
.a-btn{display:flex;align-items:center;justify-content:center;width:100%;font:700 17px Onest,sans-serif;border-radius:999px;padding:13px 20px;border:1.5px solid var(--ink);background:var(--y);color:var(--ink);cursor:pointer}
.a-scr .inv-next{display:block;text-align:center;margin-top:10px;font-size:15px;font-weight:700;color:var(--ink)}
.a-card.peek{margin-top:12px}
/* tab bar */
.a-tab{position:absolute;left:14px;right:14px;bottom:24px;height:66px;border-radius:33px;background:rgba(13,13,15,.94);display:flex;justify-content:space-around;align-items:center;z-index:40}
.a-tab a{display:flex;flex-direction:column;align-items:center;gap:3px;color:rgba(255,255,255,.55);font-size:15px;font-weight:600;width:72px}
.a-tab svg{width:23px;height:23px}
.a-tab a.on{color:var(--y)}
/* city list */
.a-cl{list-style:none;margin:0 0 12px;padding:0;background:#fff;border:1.5px solid var(--ink);border-radius:22px;overflow:hidden}
.a-cl li{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:11px 14px 11px 11px}
.a-cl li+li{border-top:1px solid var(--line)}
.a-th{width:56px;height:56px;border-radius:15px;object-fit:cover;border:1.5px solid var(--ink)}
.a-ct{min-width:0}
.a-ct>b{display:block;font-family:"Archivo Black",sans-serif;font-weight:400;font-size:19px;letter-spacing:-.02em;line-height:1.05}
.a-prev{display:block;font-size:15px;color:#3a3a40;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.a-prev b{font-weight:700;color:var(--ink)}
.a-mini{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:15px;color:var(--mute);font-weight:600;white-space:nowrap}
.a-mini .a-avs img{width:22px;height:22px;margin-left:-7px;border-width:1.5px;box-shadow:0 0 0 1px var(--ink)}
.a-mini .a-avs img:first-child{margin-left:0}
.a-dot{width:14px;height:14px;border-radius:50%;background:var(--y);border:1.5px solid var(--ink);margin-right:6px}
/* members */
.a-pin{display:flex;gap:12px;align-items:center;background:var(--ink);color:#fff;border-radius:18px;padding:12px 14px;margin-bottom:14px}
.a-pin b{display:block;font-size:15.5px}
.a-pin span:not(.a-chk){display:block;font-size:14px;color:rgba(255,255,255,.7);margin-top:2px}
.a-chk{width:24px;height:24px;border-radius:50%;background:var(--y);display:grid;place-items:center;flex:none}
.a-chk svg{width:14px;height:14px}
.a-ml{list-style:none;margin:0;padding:0;background:#fff;border:1.5px solid var(--ink);border-radius:22px;overflow:hidden}
.a-ml li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 14px 10px 12px}
.a-ml li+li{border-top:1px solid var(--line)}
.a-ml img,.a-plus{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--ink)}
.a-ml b{display:block;font-size:16.5px;font-weight:800}
.a-ml div span{display:block;font-size:15px;color:var(--mute);margin-top:1px}
.a-tgs{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.a-t{font-size:15px;font-weight:700;padding:3px 10px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;white-space:nowrap}
.a-t.ink{background:var(--ink);color:#fff}
.a-plus{display:grid;place-items:center;background:var(--y);font:400 22px "Archivo Black",sans-serif;border:0}
.a-ml li.add{background:#fffdf3}
/* nav */
.a-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.a-back{width:42px;height:42px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:19px;font-weight:700;flex:none}
.a-back.g{background:rgba(13,13,15,.55);color:#fff;border:0}
/* chat */
.a-hero{position:absolute;top:0;left:0;right:0;height:232px}
.a-hero>img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.a-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,0) 35%,rgba(0,0,0,.65))}
.a-nav.on-ph{position:absolute;top:58px;left:16px;right:16px;z-index:3}
.a-ht{position:absolute;left:18px;bottom:40px;z-index:3;color:#fff}
.a-ht span{display:block;font-size:15px;font-weight:700;margin-top:6px}
.a-sheet{position:absolute;top:206px;left:0;right:0;bottom:0;background:var(--cream);border-radius:24px 24px 0 0;padding:14px 16px 0;z-index:4}
.a-chat{display:grid;gap:9px}
.a-m{display:flex;gap:8px;align-items:flex-end}
.a-m>img{width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--ink);border:1.5px solid #fff;flex:none}
.a-m.r{justify-content:flex-end}
.a-bub{padding:9px 13px;border-radius:20px;font-size:15.5px;max-width:82%;line-height:1.28}
.a-bub.l{background:var(--ink);color:#fff;border-bottom-left-radius:6px}
.a-bub.r{background:#fff;border:1.5px solid var(--ink);border-bottom-right-radius:6px}
.a-bub b{display:block;font-size:15px;color:var(--y);margin-bottom:1px}
.a-input{position:absolute;left:16px;right:16px;bottom:34px;display:flex;justify-content:space-between;align-items:center;background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:7px 7px 7px 18px;font-size:16px}
.a-input span{color:var(--mute)}
.a-input i{width:42px;height:42px;border-radius:50%;background:var(--y);border:1.5px solid var(--ink);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:18px}
/* profile */
.a-ph-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.a-pav{width:70px;height:70px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 0 0 2px var(--ink);flex:none}
.a-sub{display:block;font-size:15px;color:var(--mute);margin-top:4px}
.a-pr{display:flex;gap:8px;margin-bottom:12px}
.a-pr .a-pill{font-size:15px;padding:9px 15px}
.a-strip{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:6px;margin-bottom:12px}
.a-strip img{width:100%;height:120px;object-fit:cover;border-radius:16px;border:1.5px solid var(--ink)}
.a-inv{display:flex;gap:12px;align-items:center;background:#fff;border:1.5px solid var(--ink);border-radius:18px;padding:10px 14px 10px 10px;margin-bottom:10px}
.a-inv img{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--ink);border:2px solid #fff}
.a-inv div{flex:1}
.a-inv b{display:block;font-size:16px}
.a-inv div span{display:block;font-size:15px;color:var(--mute)}
.a-arrow{font-weight:700;font-size:18px}
.a-box{background:#fff;border:1.5px solid var(--ink);border-radius:18px;padding:10px 12px;margin-bottom:10px;display:grid;gap:8px}
.a-kv{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;overflow:hidden}
.a-kv i{font-style:normal;font-size:15px;font-weight:700;color:var(--mute);width:86px;flex:none}
.a-kv span{flex:none;font-size:15px;font-weight:600;padding:4px 10px;border-radius:999px;border:1.5px solid #d4d4d9}
.a-coc{background:var(--ink);color:#fff;border-radius:18px;padding:11px 14px;display:grid;gap:7px}
.a-coc .a-sec{color:rgba(255,255,255,.6);margin:0!important}
.a-coc div{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:600}
.a-coc .a-chk{width:20px;height:20px}
.a-coc .a-chk svg{width:12px;height:12px}
.a-u{font-size:15px}
.a-kv i{width:80px}
.a-strip img{height:128px}
.a-coc{gap:9px;padding:13px 14px}
.a-coc div{font-size:15.5px}
/* v8c: light bubbles + light pinned cards (ink only for small tags/buttons) */
.a-bub.l{background:#fff;color:var(--ink);border:1.5px solid var(--ink);border-bottom-left-radius:6px}
.a-bub.r{background:var(--y);color:var(--ink);border:1.5px solid var(--ink)}
.a-bub b{color:var(--ink);opacity:1;font-weight:800}
.a-pin{background:#FFFBD6;color:var(--ink);border:1.5px solid var(--ink)}
.a-pin span:not(.a-chk){color:var(--mute)}
.a-pin .a-chk{border:1.5px solid var(--ink)}
.a-coc{background:#FFFBD6;color:var(--ink);border:1.5px solid var(--ink)}
.a-coc .a-sec{color:var(--mute)}
.a-coc .a-chk{border:1.5px solid var(--ink)}
/* v9: fit phones to width (bezel 8px), min text 15px => >=12px at k>=.8 */
.a-phone{padding:8px;border-radius:calc(50px * var(--k) + 8px)}
@media (max-width:389px){.a-phone{--k:.8}}
@media (max-width:374px){.a-phone{--k:.7}}
@media (max-width:349px){.a-phone{--k:.64}}
.a-chips span{padding:8px 12px}
.a-mt span{padding:5px 9px}