/* Smaller pages (messages, viewing, owner profile, legal, offline, listing + area pages). Builds on ph.css tokens. Pages use and the shared header/footer. */ body.sub{min-height:100vh;display:flex;flex-direction:column} body.sub>main,body.sub>.wrap,body.sub>#app{flex:1} .sub-main{max-width:760px;margin:0 auto;padding:44px 20px 80px;width:100%} .sub-main.wide{max-width:1240px} .sub h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.4vw,2.8rem);letter-spacing:-.02em;line-height:1.1;color:var(--heading);margin:0 0 10px;text-align:center} .sub h2{font-family:var(--serif);font-weight:500;font-size:1.35rem;color:var(--heading);margin:36px 0 10px} .sub h3{font-weight:600;color:var(--heading)} .sub p,.sub li{color:var(--text);line-height:1.7} .sub a{color:var(--link)} .sub .sub-lead,.sub .sub,.sub .upd,.sub .meta-top{color:var(--muted);text-align:center;margin:0 auto 26px;max-width:36rem} .sub .card,.sub .box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;margin:12px 0} .sub .muted{color:var(--muted)} .sub .empty{color:var(--muted);text-align:center;padding:40px 16px} .sub .err{color:var(--danger);font-size:.86rem;margin-top:8px} .sub .safe{margin-top:16px;font-size:.84rem;color:var(--on-accent-soft);background:var(--accent-soft);border-radius:var(--r-md);padding:12px 14px;line-height:1.5} .sub .pill,.sub .st{display:inline-flex;font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:var(--pill);background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);white-space:nowrap} .sub .pill.warn,.sub .st{background:var(--accent-soft);color:var(--on-accent-soft)} .sub .st.confirmed{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)} .sub .pill.off,.sub .st.declined,.sub .st.cancelled{background:var(--surface-2);color:var(--muted)} .sub button,.sub a.btn,.sub .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:var(--pill);border:1px solid transparent;background:var(--primary);color:var(--on-primary);font:600 .9rem var(--sans);cursor:pointer;text-decoration:none} .sub button:disabled{opacity:.6} .sub textarea,.sub input{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;font:inherit;background:var(--bg);color:var(--ink);outline:0} .sub textarea:focus,.sub input:focus{border-color:var(--accent)} .sub table{border-collapse:collapse;width:100%;font-size:.9rem;margin:12px 0} .sub th,.sub td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;color:var(--text)} .sub th{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600} .sub-foot{border-top:1px solid var(--line);padding:26px 20px 100px;text-align:center;font-size:.84rem;color:var(--muted)} .sub-foot a{color:var(--muted);margin:0 8px} .sub-foot b{font-family:var(--serif);font-weight:400;color:var(--heading)} /* messages */ .page-messages .item{display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;color:inherit} .page-messages .item b{color:var(--heading)} .page-messages .item small{color:var(--muted)} .page-messages .listing{display:flex;justify-content:space-between;gap:10px;align-items:flex-start} .page-messages .listing a{font-weight:600;font-size:.86rem;text-decoration:none;white-space:nowrap} .page-messages .bubbles{display:flex;flex-direction:column;gap:8px;margin:14px 0} .page-messages .bub{max-width:80%;padding:10px 14px;border-radius:16px 16px 16px 4px;font-size:.93rem;line-height:1.5;white-space:pre-line;background:var(--surface-2);color:var(--ink);align-self:flex-start} .page-messages .bub.tenant{align-self:flex-end;background:var(--primary);color:var(--on-primary);border-radius:16px 16px 4px 16px} .page-messages .bub span{display:block;font-size:.7rem;opacity:.65;margin-top:3px} .page-messages .compose{position:sticky;bottom:0;background:var(--bg);padding:10px 0;display:flex;gap:8px} .page-messages textarea{flex:1;resize:none;min-height:48px;border-radius:24px} .page-messages h1{text-align:center} /* viewing */ .page-viewing .card{text-align:center;padding:30px 26px} .page-viewing .when{font-family:var(--serif);font-size:1.4rem;color:var(--heading);margin:16px 0 4px} .page-viewing .row{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;justify-content:center} .page-viewing .row>*{flex:1} .page-viewing .row button{background:var(--surface);color:var(--danger);border-color:var(--line-2)} /* owner profile */ .page-owner .profile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin-bottom:34px} .page-owner .avatar{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--on-accent-soft);font:400 2rem var(--serif);overflow:hidden} .page-owner .avatar img{width:100%;height:100%;object-fit:cover} .page-owner .name{font-family:var(--serif);font-size:2rem;color:var(--heading)} .page-owner .count{color:var(--muted);font-size:.86rem} .page-owner .count b{font-family:var(--serif);font-weight:400;font-size:1.4rem;color:var(--heading);margin-right:6px} .page-owner h2{text-align:center} .lgrid,.page-owner .grid,.sub .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:34px 26px;margin:18px 0} .page-owner .card{display:block;padding:0;border:0;background:none;text-decoration:none;color:inherit;margin:0} .page-owner .photo{aspect-ratio:4/3.1;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)} .page-owner .photo img{width:100%;height:100%;object-fit:cover} .page-owner .body{padding:12px 4px 0} .page-owner .price{font-weight:600;color:var(--heading)} .page-owner .title{font-family:var(--serif);font-size:1.1rem;color:var(--heading);margin:2px 0} .page-owner .area{font-size:.86rem;color:var(--muted)} /* legal */ .page-legal main{max-width:760px;margin:0 auto;padding:44px 20px 80px} .page-legal .upd{margin-bottom:10px} /* offline */ .page-offline .b{max-width:380px;margin:auto;text-align:center;padding:24px} /* server-rendered listing + area pages */ .sub .lcard{display:block;text-decoration:none;color:inherit} .sub .lcard .ph{aspect-ratio:4/3.1;border-radius:var(--r-lg);background:var(--surface-2) center/cover no-repeat} .sub .lcard .bd{padding:12px 4px 0} .sub .lcard .t{font-family:var(--serif);font-size:1.1rem;color:var(--heading);line-height:1.3} .sub .price{font-weight:600;color:var(--heading);font-size:1rem} .sub .meta{font-size:.86rem;color:var(--muted);margin-top:2px} .sub .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 18px} .sub .chips a{padding:8px 16px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);color:var(--text);text-decoration:none;font-size:.86rem} .sub .chips a.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .sub .links{font-size:.86rem;color:var(--muted);margin-top:44px;border-top:1px solid var(--line);padding-top:22px;text-align:center;line-height:2} .sub .links a{margin:0 6px;white-space:nowrap;display:inline-block;color:var(--text);text-decoration:none} .sub .links a:hover{color:var(--link)} .sub .ctarow{text-align:center;margin:24px 0} .lp-hero{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1200/630;background:var(--surface-2);margin-bottom:26px} .lp-hero img{width:100%;height:100%;object-fit:cover;display:block} .lp-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:-16px 0 26px} .lp-gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block} .lp-kv{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;margin:14px 0} .lp-kv div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem} .lp-kv span{color:var(--muted)} .lp-kv b{font-weight:500;color:var(--heading)} .lp-price{font-family:var(--serif);font-size:1.9rem;color:var(--heading);text-align:center} .crumbs{font-size:.8rem;color:var(--muted);text-align:center;margin-bottom:14px} .crumbs a{color:var(--muted);text-decoration:none} @media (max-width:700px){ .sub-main{padding:28px 18px 60px} .lp-gal{grid-template-columns:repeat(3,1fr)}.lp-gal img:nth-child(4){display:none} .lp-kv{grid-template-columns:1fr} .lgrid,.page-owner .grid,.sub .grid{grid-template-columns:1fr;gap:26px} }