/* Lifts poster page + status page. Sits on top of /style.css (tokens, .wrap,
   .field, .btn, .cap). Everything here is mobile-first: the poster is standing
   in a driveway holding a phone. */
.post-page{ background:var(--paper); }
/* Class display rules below would otherwise beat the UA's [hidden] rule. */
.post-page [hidden]{ display:none !important; }
.post-wrap{ max-width:560px; padding-bottom:48px; }
.post-hero{ padding:28px 0 10px; }
.post-hero h1{ font-family:var(--font-display); font-weight:400; font-size:38px; line-height:1.05; margin:8px 0 12px; }
.post-hero h1 em, .post-done h2 em{ font-style:italic; color:var(--mute); }
.post-hero p{ font-size:16px; line-height:1.5; color:var(--ink); margin:0 0 10px; }
.post-area{ display:inline-block; background:var(--acc); color:var(--ink); padding:6px 10px; border-radius:var(--r-pill); }

.post-form{ display:flex; flex-direction:column; gap:14px; margin-top:12px; }
.pf-block{ border:1px solid var(--line); background:#fff; border-radius:var(--r-card); padding:16px; margin:0; display:flex; flex-direction:column; gap:10px; }
.pf-block legend{ padding:0 6px; }
.pf-row{ display:flex; gap:8px; }
.pf-row .field{ flex:1; min-width:0; }
.pf-note{ font-size:13px; color:var(--mute); margin:0; line-height:1.45; }
.pf-legal{ text-align:center; }
.pf-legal a{ color:var(--ink); }
.pf-err{ color:var(--warn); font-weight:600; margin:0; }

.pf-photos{ display:block; border:2px dashed var(--line); border-radius:var(--r-tile); padding:26px 12px; text-align:center; cursor:pointer; background:var(--cream); }
.pf-photos:active{ border-color:var(--ink); }
.pf-photos-cta{ font-weight:700; font-size:17px; }
.pf-photos-cta small{ display:block; font-weight:500; color:var(--mute); font-size:13px; margin-top:4px; }
.pf-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.pf-thumbs:empty{ display:none; }
.pf-thumb{ position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#eee; }
.pf-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-thumb button{ position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; border:0; background:var(--ink); color:#fff; font-size:14px; line-height:24px; padding:0; }

.pf-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ border:1.5px solid var(--line); background:#fff; border-radius:var(--r-pill); padding:9px 13px; font-size:14px; font-weight:600; color:var(--ink); }
.chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

.pf-seg{ display:flex; gap:8px; }
.seg{ flex:1; text-align:center; border:1.5px solid var(--line); border-radius:var(--r-tile); padding:11px 8px; font-weight:600; font-size:14px; cursor:pointer; background:#fff; }
.seg.on{ background:var(--acc); border-color:var(--acc-deep); }
.seg input{ display:none; }
.pf-window{ display:flex; flex-direction:column; gap:8px; }
.pf-window label{ font-size:13px; color:var(--mute); display:flex; flex-direction:column; gap:4px; }

.pf-check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.4; }
.pf-check input{ width:22px; height:22px; flex:0 0 auto; margin-top:1px; accent-color:var(--ink); }

.btn-big{ width:100%; padding:16px; font-size:17px; }
.btn[disabled]{ opacity:.6; }

.post-done{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:22px; margin-top:16px; }
.post-done h2{ font-family:var(--font-display); font-weight:400; font-size:30px; line-height:1.1; margin:6px 0 12px; }
.post-done p{ font-size:15px; line-height:1.5; margin:0 0 12px; }
.post-footer{ padding:24px 0; text-align:center; }

/* status page */
.status-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:20px; margin-top:16px; }
.status-pill{ display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-pill); background:var(--cream); color:var(--mute); }
.status-pill.live{ background:var(--acc); color:var(--ink); }
.status-pill.warn{ background:#f6d9cf; color:var(--warn); }
.status-pill.pos{ background:#d6efe0; color:var(--pos); }
.status-card h1{ font-family:var(--font-display); font-weight:400; font-size:32px; line-height:1.1; margin:10px 0 6px; }
.status-photos{ display:flex; gap:8px; overflow-x:auto; margin:10px 0; }
.status-photos img{ width:96px; height:96px; object-fit:cover; border-radius:10px; border:1px solid var(--line); flex:0 0 auto; }
.timeline{ list-style:none; padding:0; margin:14px 0; display:flex; flex-direction:column; gap:8px; }
.timeline li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.4; }
.timeline .dot{ width:10px; height:10px; border-radius:50%; background:var(--line); margin-top:5px; flex:0 0 auto; }
.timeline li.done .dot{ background:var(--ink); }
.timeline li.now .dot{ background:var(--acc-deep); box-shadow:0 0 0 4px #eef7a8; }
.timeline .t{ color:var(--mute); font-size:12px; font-family:var(--font-mono); margin-left:auto; white-space:nowrap; }
.actions{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.countdown{ font-family:var(--font-mono); font-weight:700; }
.stars{ display:flex; gap:6px; margin:8px 0; }
.stars button{ font-size:30px; line-height:1; background:none; border:0; color:var(--line); padding:2px; }
.stars button.on{ color:var(--acc-deep); }
.hauler-line{ font-size:15px; margin:6px 0; }
.hauler-line b{ font-weight:700; }
.muted{ color:var(--mute); font-size:13px; }