/* previews.css — product-surface facsimiles used inside the feature deck.
   Themed through --pv-* variables; each version sets them from its own tokens. */
:root{
  --pv-bg: #FFFFFF; --pv-ink: #16130F; --pv-muted: #6B645C; --pv-line: #E2DCD2; --pv-accent: #0F4436; --pv-cta: #B23A2B;
  --pv-wash: #F6F3EE; --pv-brass: #B58A32; --pv-r: 10px;
}
.pv{
  font-family: var(--pv-font, inherit); color: var(--pv-ink); background: var(--pv-bg);
  border: 1px solid var(--pv-line); border-radius: var(--pv-r); overflow: hidden;
  width: 100%; max-width: 440px; font-size: 12.5px; line-height: 1.4; box-shadow: var(--pv-shadow, 0 12px 24px rgba(22,19,15,.08), 0 2px 6px rgba(22,19,15,.06));
  text-align: left; -webkit-font-smoothing: antialiased;
}
.pv *{ box-sizing: border-box; margin: 0 }
.pv b{ font-weight: 600 } .pv small{ display:block; color: var(--pv-muted); font-size: 11px; line-height: 1.35 }
.pv p{ font-size: 12.5px; line-height: 1.45 }
.pv-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; background: var(--pv-accent); color:#F2EDE4 }
.pv-bar__brand{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.02em }
.pv-bar__door{ width:9px; height:12px; background: var(--pv-cta); border-radius: 5px 5px 0 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35) }
.pv-bar__title{ text-align:right; font-size:11px; font-weight:500; opacity:.95 } .pv-bar__title small{ color: rgba(242,237,228,.7); font-size:10px }
.pv-av{ flex:0 0 auto; width:26px; height:26px; border-radius:999px; display:inline-grid; place-items:center; font-size:10px; font-weight:600; letter-spacing:.02em; background: var(--pv-wash); color: var(--pv-accent); border:1px solid var(--pv-line) }
.pv-av.green{ background: var(--pv-accent); color:#fff; border-color: transparent }
.pv-av.brass{ background: var(--pv-brass); color:#fff; border-color: transparent }
.pv-av.ink{ background: var(--pv-ink); color:#fff; border-color: transparent }
.pv-btn{ flex:0 0 auto; font: inherit; line-height:1.3; font-size:11px; font-weight:600; padding:6px 10px; border-radius:6px; border:1px solid var(--pv-line); background: var(--pv-bg); color: var(--pv-ink); display:inline-flex; align-items:center; gap:5px; cursor:default }
.pv-btn.is-cta{ background: var(--pv-cta); color:#fff; border-color: transparent }
.pv-btn.is-on{ background: var(--pv-wash); color: var(--pv-accent); border-color: var(--pv-line) }
.pv-chip{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:2px 7px; border-radius:4px; background: var(--pv-wash); color: var(--pv-muted); border:1px solid var(--pv-line) }
.pv-chip.is-ok{ color: var(--pv-accent) } .pv-chip.is-warn{ color: var(--pv-cta); background: color-mix(in oklab, var(--pv-cta) 10%, var(--pv-bg)); border-color: color-mix(in oklab, var(--pv-cta) 25%, var(--pv-line)) }
.pv-tabs{ display:flex; gap:14px; padding:8px 12px 0; border-bottom:1px solid var(--pv-line); font-size:11px; color: var(--pv-muted); font-weight:500 }
.pv-tabs span{ padding-bottom:7px; border-bottom:2px solid transparent; white-space:nowrap } .pv-tabs .on{ color: var(--pv-ink); border-bottom-color: var(--pv-cta) }
.pv-search{ display:flex; align-items:center; gap:8px; margin:10px 12px 0; padding:7px 10px; border:1px solid var(--pv-line); border-radius:7px; color: var(--pv-muted); font-size:11.5px; background: var(--pv-wash) }
.pv-list{ list-style:none; padding:4px 0 }
.pv-list li{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--pv-line) } .pv-list li:last-child{ border-bottom:0 } .pv-list li > div{ flex:1; min-width:0 }

/* feed */
.pv-composer{ display:flex; align-items:center; gap:9px; padding:10px 12px; color: var(--pv-muted); font-size:12px; border-bottom:1px solid var(--pv-line) } .pv-composer span{ flex:1 } .pv-composer b{ color: var(--pv-muted); display:inline-flex }
.pv-posts{ max-height: 300px; overflow:hidden; position:relative }
.pv-post{ display:flex; gap:9px; padding:10px 12px; border-bottom:1px solid var(--pv-line); transition: opacity 380ms ease, transform 380ms ease }
.pv-post > div{ flex:1; min-width:0 } .pv-post b em{ font-style:normal; font-weight:500; color: var(--pv-accent); font-size:10px; margin-left:6px; display:inline-flex; align-items:center; gap:3px }
.pv-post p{ margin-top:3px } .pv-post.is-pinned{ background: var(--pv-wash) }
.pv-post__meta{ display:flex; align-items:center; gap:4px; margin-top:6px; font-size:11px; color: var(--pv-muted) } .pv-post__meta i{ font-style:normal; color: var(--pv-accent) }
.pv-post__meta svg{ vertical-align:-2px }
.pv-photo{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:14px 12px; width:100%; border-radius:6px; background: var(--pv-wash); color: var(--pv-muted); font-size:11px; border:1px dashed var(--pv-line) }
.tick-out{ opacity:0; transform: translateY(-6px) } .tick-in{ animation: pv-in 420ms ease }
@keyframes pv-in{ from{ opacity:0; transform: translateY(8px) } }

/* groups */
.pv-groupfeed{ margin:6px 12px 12px; padding:9px 10px; border-radius:7px; background: var(--pv-wash); border:1px solid var(--pv-line) }
.pv-groupfeed p{ margin-top:2px }

/* events */
.pv-week{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; padding:10px 12px 6px; text-align:center }
.pv-week span{ padding:5px 0; border-radius:6px; position:relative } .pv-week span small{ font-size:9.5px } .pv-week span b{ display:block; font-size:12px }
.pv-week span.on{ background: var(--pv-accent); color:#fff } .pv-week span.on small{ color: rgba(255,255,255,.75) }
.pv-week span.has::after{ content:""; position:absolute; left:50%; bottom:2px; width:4px; height:4px; border-radius:99px; background: var(--pv-cta); transform: translateX(-50%) }
.pv-event{ display:flex; gap:10px; padding:10px 12px; border-top:1px solid var(--pv-line) } .pv-event > div:last-child{ flex:1; min-width:0 }
.pv-event__d{ flex:0 0 38px; text-align:center; border:1px solid var(--pv-line); border-radius:7px; padding:4px 0; background: var(--pv-wash) } .pv-event__d b{ display:block; font-size:15px; line-height:1.1 } .pv-event__d small{ font-size:9.5px }
.pv-event__row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px }
.pv-avs{ display:inline-flex; align-items:center } .pv-avs .pv-av{ width:20px; height:20px; font-size:8px; margin-right:-6px; border:2px solid var(--pv-bg) } .pv-avs i{ font-style:normal; margin-left:12px; font-size:11px; color: var(--pv-muted) }
.pv-score{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color: var(--pv-muted) } .pv-score i{ width:9px; height:9px; border-radius:2px; display:inline-block } .pv-score .r{ background:#B23A2B } .pv-score .g{ background:#2E6B3E } .pv-score .b{ background:#1F6B8C }

/* neighbors */
.pv-split{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; padding:10px 12px; border-top:1px solid var(--pv-line) }
.pv-pets{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px } .pv-pets span{ font-size:10.5px; padding:2px 7px; border-radius:99px; border:1px solid var(--pv-line); background: var(--pv-wash) }
.pv-split p{ margin-top:4px; font-size:11.5px }
.pv-dm{ display:flex; flex-direction:column; gap:5px; padding:10px 12px; border-top:1px solid var(--pv-line); background: var(--pv-wash) }
.pv-dm span{ max-width:82%; padding:6px 10px; border-radius:12px; font-size:11.5px } .pv-dm__a{ align-self:flex-start; background: var(--pv-bg); border:1px solid var(--pv-line) } .pv-dm__b{ align-self:flex-end; background: var(--pv-accent); color:#fff }

/* clubhouse */
.pv-cal{ display:grid; grid-template-columns: repeat(5, 1fr); gap:6px; padding:10px 12px; height:132px }
.pv-cal__col{ position:relative; overflow:hidden; border-left:1px solid var(--pv-line); padding-left:5px; background: repeating-linear-gradient(to bottom, transparent 0 17px, var(--pv-line) 17px 18px) } .pv-cal__col small{ font-size:9.5px; background: var(--pv-bg); display:inline-block }
.pv-cal__blk{ position:absolute; left:5px; right:2px; top: calc(18px + var(--t) * 18px); height: calc(var(--h) * 18px); border-radius:5px; padding:3px 5px; font-size:9.5px; font-weight:600; background: var(--pv-wash); border:1px solid var(--pv-line); color: var(--pv-muted); overflow:hidden }
.pv-cal__blk.is-mine{ background: var(--pv-cta); color:#fff; border-color:transparent } .pv-cal__blk.is-board{ background: var(--pv-accent); color:#fff; border-color:transparent }
.pv-book{ display:grid; grid-template-columns: 1fr auto; gap:8px 14px; align-items:center; padding:10px 12px; border-top:1px solid var(--pv-line) }
.pv-book dl{ display:grid; grid-template-columns: auto auto; gap:2px 10px; font-size:11px } .pv-book dt{ color: var(--pv-muted) } .pv-book dd{ font-weight:600; font-variant-numeric: tabular-nums } .pv-book dd i{ font-style:normal; font-weight:400; color: var(--pv-muted) }
.pv-book .pv-btn{ grid-column: 1 / -1; justify-content:center }

/* requests */
.pv-tickets{ list-style:none } .pv-tickets li{ display:flex; gap:10px; padding:10px 12px; border-bottom:1px solid var(--pv-line) } .pv-tickets li > div{ flex:1; min-width:0 } .pv-tickets li.is-active{ background: var(--pv-wash) }
.pv-tk__n{ font-family: var(--pv-mono, ui-monospace, monospace); font-size:10.5px; color: var(--pv-muted); padding-top:2px; flex:0 0 auto }
.pv-tickets small svg{ vertical-align:-3px }
.pv-status{ display:flex; align-items:center; gap:3px; margin-top:6px; font-size:10.5px; color: var(--pv-muted) } .pv-status i{ width:18px; height:4px; border-radius:2px; background: var(--pv-line) } .pv-status i.done{ background: var(--pv-accent) } .pv-status i.now{ background: var(--pv-cta) } .pv-status span{ margin-left:5px }
.pv-tickets .pv-chip{ margin-top:5px }
.pv-suggest{ padding:10px 12px } .pv-sug{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 0; border-top:1px solid var(--pv-line); font-size:12px } .pv-sug:first-of-type{ border-top:0 }
.pv-votes{ flex:0 0 auto; min-width:34px; text-align:center; padding:3px 6px; border-radius:6px; border:1px solid var(--pv-line); font-weight:600; font-variant-numeric: tabular-nums; background: var(--pv-bg) }

/* announcements */
.pv-ann{ padding:10px 12px; border-bottom:1px solid var(--pv-line) } .pv-ann small svg{ vertical-align:-3px }
.pv-read{ display:flex; align-items:center; gap:8px; margin-top:7px; font-size:10.5px; color: var(--pv-muted) } .pv-read i{ flex:1; height:6px; border-radius:3px; background: var(--pv-line); position:relative; overflow:hidden } .pv-read i::after{ content:""; position:absolute; inset:0; width: var(--p); background: var(--pv-accent) }
.pv-poll{ padding:10px 12px; border-bottom:1px solid var(--pv-line) } .pv-poll b{ display:block; margin:2px 0 7px }
.pv-poll__row{ display:grid; grid-template-columns: 30px 1fr 34px; align-items:center; gap:8px; font-size:11px; margin-bottom:4px } .pv-poll__row i{ height:8px; border-radius:4px; background: var(--pv-line); position:relative; overflow:hidden } .pv-poll__row i::after{ content:""; position:absolute; inset:0; width: var(--p); background: var(--pv-accent) } .pv-poll__row em{ font-style:normal; font-weight:600; font-variant-numeric: tabular-nums; text-align:right }
.pv-docs{ list-style:none; padding:8px 12px 10px } .pv-docs li{ display:flex; align-items:center; gap:7px; padding:5px 0; font-size:11.5px; color: var(--pv-ink) } .pv-docs li svg{ color: var(--pv-muted) }

/* admin */
.pv-kpis{ display:grid; grid-template-columns: repeat(4, 1fr); gap:6px; padding:10px 12px } .pv-kpis div{ padding:7px 8px; border:1px solid var(--pv-line); border-radius:7px; background: var(--pv-wash) } .pv-kpis b{ display:block; font-size:16px; font-variant-numeric: tabular-nums; line-height:1.1 } .pv-kpis small{ font-size:9.5px }
.pv-comms{ list-style:none } .pv-comms li{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-top:1px solid var(--pv-line) } .pv-comms li > div{ flex:1; min-width:0 }
.sw{ width:12px; height:12px; border-radius:3px; background: var(--c); display:inline-block; flex:0 0 auto }
.pv-mod{ padding:10px 12px; border-top:1px solid var(--pv-line); background: var(--pv-wash) } .pv-mod small svg{ vertical-align:-3px } .pv-mod p{ margin-top:4px; font-size:11.5px }
.pv-mod__btns{ display:flex; gap:6px; margin-top:7px }
.pv-brand{ display:flex; align-items:center; gap:6px; padding:9px 12px; border-top:1px solid var(--pv-line); font-size:11px } .pv-brand small{ margin-right:4px } .pv-brand em{ font-style:normal; color: var(--pv-muted); margin-left:4px } .pv-brand b{ margin-left:auto; font-size:10.5px; color: var(--pv-accent) }