/* planz.ae features: the tabbed bento, filled with live app UI instead of screenshots.
   Tokens and the shared app pieces (.venue, .pill, .mom-bar, .app-eyebrow) come from hero.css. */
.fx{padding-block:var(--space-9) calc(var(--space-9) + 12px)}
.fx h2{max-width:17ch}
.fx .cell__vis{align-items:center;padding-bottom:var(--space-6)}
.fx .cell--a .cell__vis{padding-bottom:calc(var(--space-6) + 14px)}

.ui-card{position:relative;width:100%;max-width:380px;padding:16px;border-radius:24px;background:#fff;color:var(--app-ink);font-family:var(--font-sans);letter-spacing:-.4px;text-align:left;box-shadow:0 30px 60px -30px rgba(23,10,64,.35),0 0 0 1px rgba(23,10,64,.05)}
.ui-card .hx-ic{width:18px;height:18px}
.ui-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ui-head b{font:600 17px/22px var(--font-sans)}
.ui-status{display:inline-grid;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:rgba(198,115,30,.12);color:var(--app-warm);font:600 12px/1 var(--font-sans);letter-spacing:0;white-space:nowrap;transition:background .4s,color .4s}
.ui-status>span,.ui-status--go{display:inline-flex;align-items:center;gap:5px}
.ui-status .hx-ic{width:13px;height:13px}
.ui-status--go,.fx-st.locked{background:var(--app-mint);color:#0A5A33}
.ui-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 12px;font:400 14px/18px var(--font-sans);color:var(--app-2)}
.ui-meta span{display:inline-flex;align-items:center;gap:6px}
.ui-meta .hx-ic{width:16px;height:16px}

/* plans: the venue, tapped */
.fx-venue .venue{margin:0}
.fx-venue .venue-a span{transition:transform .18s cubic-bezier(.2,.8,.2,1),background .25s}
.fx-venue .venue-a span.tap{transform:scale(.94);background:var(--app-soft)}
.ui-toast{width:max-content;max-width:calc(100% - 16px);position:absolute;left:50%;bottom:-20px;display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;background:var(--ink);color:var(--on-ink);font:500 14px/1 var(--font-sans);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 18px 30px -14px rgba(23,10,64,.6);opacity:0;transform:translate(-50%,8px);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.ui-toast.show{opacity:1;transform:translate(-50%,0)}
.ui-toast .hx-ic{color:var(--lime)}

/* plans: seats filling until it locks */
.fx-st{display:inline-grid}
.fx-st>span{grid-area:1/1;transition:opacity .3s}
.fx-st-p,.fx-st.locked .fx-st-n{opacity:0}
.fx-st.locked .fx-st-p{opacity:1}
.fx-dots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0 14px}
.fx-dots i{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--app-mint);font:500 13px/1 var(--font-sans);font-style:normal;color:var(--app-ink);transition:background .3s,color .3s,box-shadow .3s,transform .45s cubic-bezier(.34,1.8,.5,1)}
.fx-dots i.fx-new{background:transparent;color:transparent;box-shadow:inset 0 0 0 1.5px rgba(9,23,50,.18);transform:scale(.86)}
.fx-dots i.fx-new.on{background:var(--app-mint);color:var(--app-ink);box-shadow:none;transform:none}
.fx-seat-f{display:flex;justify-content:space-between;font:400 14px/18px var(--font-sans);color:var(--app-2)}
.fx-seat-f b{font-weight:600;color:var(--app);font-variant-numeric:tabular-nums}
.fx-left{font-weight:500;color:var(--app)}
.fx-seats .mom-bar{margin-top:10px}
.fx-seats .mom-bar i{width:calc(var(--n,7) * 10%);transition:width .6s cubic-bezier(.34,1.4,.5,1)}

/* plans: quick actions */
.fx-qa{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fx-qa span{display:grid;justify-items:center;gap:6px;padding:12px 2px;border-radius:18px;border:1px solid var(--app-line);font:500 12.5px/16px var(--font-sans);text-align:center}
.fx-qa .hx-ic{width:20px;height:20px;color:var(--app)}
.fx-qa em{font-style:normal}
.fx-cal-b{display:none}
.fx-cal.done{border-color:transparent;background:var(--app-mint)}
.fx-cal.done .fx-cal-a{display:none}
.fx-cal.done .fx-cal-b{display:block;color:#0A5A33}

/* nudges */
.fx-v-b,.set .fx-v-a{display:none}
.set .fx-v-b{display:inline}
.fx-flex{margin-top:10px;flex-wrap:wrap;overflow:visible}
.fx-flex .fx-sw{gap:6px}
.fx-flex i{font-style:normal}
.fx-nudge.set .fx-sw{background:var(--app-mint);border-color:transparent;color:#0A5A33}
.fx-nudge.set .fx-sw .hx-ic{color:#0A5A33}
.fx-nudge .app-eyebrow{margin:16px 0 8px}
.fx-people{display:flex;gap:8px}
.fx-people i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--app-mint);font:500 14px/1 var(--font-sans);font-style:normal;color:var(--app-ink);transition:background .3s,color .3s,box-shadow .3s,transform .45s cubic-bezier(.34,1.8,.5,1)}
.fx-people i.fx-new{background:transparent;color:transparent;box-shadow:inset 0 0 0 1.5px rgba(9,23,50,.18);transform:scale(.86)}
.fx-people i.fx-new.on{background:var(--app-mint);color:var(--app-ink);box-shadow:none;transform:none}
.fx-foot{display:grid;margin:14px 0 12px;font:400 14px/19px var(--font-sans);color:var(--app-2);min-height:38px}
.fx-foot span{grid-area:1/1;transition:opacity .35s}
.fx-foot .fx-f-b,.fx-foot .fx-f-c,.fx-nudge.met .fx-f-a,.fx-nudge.set .fx-f-b{opacity:0}
.fx-nudge.met .fx-f-b{opacity:1;color:var(--app)}
.fx-nudge.set .fx-f-c{opacity:1;color:#0A5A33}
.fx-nudge.set .fx-f-b{opacity:0}
.fx-lock{width:100%;flex:none;height:46px;font-size:16px;opacity:.35;transition:opacity .3s,transform .15s}
.fx-nudge.met .fx-lock{opacity:1}
.fx-nudge.set .fx-lock{opacity:.35}
.fx-lock.pressed{transform:scale(.96)}
.fx-fade .app-eyebrow{margin:0 0 10px}
.fx-hrow{display:flex;align-items:center;gap:12px;padding:10px 0;transition:opacity .8s}
.fx-hrow+.fx-hrow{border-top:1px solid var(--app-line)}
.fx-hrow div{min-width:0;flex:1}
.fx-hrow b{display:block;font:500 16px/21px var(--font-sans)}
.fx-hrow div span{display:block;font:400 13px/17px var(--font-sans);color:var(--app-2)}
.fx-hrow em{font-style:normal}
.fx-hrow.fx-dim.set{opacity:.42}
.fx-maybe .mom-bar{margin-top:14px}
.fx-maybe .mom-bar i{width:calc(var(--n,3) * 25%);transition:width .6s cubic-bezier(.34,1.4,.5,1)}
.fx-m-f{margin-top:10px}
.fx-m-f i{font-style:normal}
.fx-maybe.set .fx-left{color:#0A5A33}

/* circles */
.fx-c-top{display:grid;justify-items:center;gap:3px;margin:4px 0 14px;text-align:center}
.fx-c-top b{font:500 24px/28px var(--font-sans);letter-spacing:-.6px}
.fx-c-top>span{font:400 13px/16px var(--font-sans);color:var(--app-2)}
.fx-avs{display:flex;margin-top:8px}
.fx-avs i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--app-mint);box-shadow:0 0 0 2px #fff;font:500 12px/1 var(--font-sans);font-style:normal}
.fx-avs i+i{margin-left:-8px}
.fx-avs .fx-more{background:var(--app-surface);color:var(--app-2)}
.fx-float{width:100%;flex:none;height:46px;font-size:16px}
.fx-circle .app-eyebrow{margin:16px 0 8px}
.fx-active{padding:14px;border-radius:20px;background:var(--app-surface)}
.fx-active .ui-head b{font-size:16px}
.fx-note{margin:0 0 12px;font:400 14px/18px var(--font-sans);color:var(--app-2)}
.fx-btns{display:flex;gap:6px}
.fx-btns .pill{height:42px;font-size:15px;transition:transform .15s}
.fx-btns .pill.pressed{transform:scale(.94)}
.fx-stat-row{display:grid;grid-template-columns:repeat(3,1fr)}
.fx-stat-row span{display:grid;justify-items:center;gap:4px;text-align:center;font:400 13px/16px var(--font-sans);color:var(--app-2)}
.fx-stat-row span+span{border-left:1px solid var(--app-line)}
.fx-stat-row b{font:500 26px/30px var(--font-sans);letter-spacing:-.6px;color:var(--app-ink);font-variant-numeric:tabular-nums}
.fx-stats .app-eyebrow{margin:0 0 12px}
.fx-choose{display:grid;gap:8px;padding:12px}
.fx-opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--app-surface);transition:background .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.fx-opt.hot{background:var(--app-soft);transform:translateX(4px)}
.fx-ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--t);color:var(--c)}
.fx-ico .hx-ic{width:22px;height:22px}
.fx-opt div{min-width:0}
.fx-opt b{display:block;font:500 17px/22px var(--font-sans)}
.fx-opt div span{display:block;font:400 13px/17px var(--font-sans);color:var(--app-2)}
.fx-go{margin-left:auto;flex:none;color:var(--app)}

/* chat */
.fx-msg{width:max-content;max-width:85%;margin-top:8px;padding:9px 13px;border-radius:18px 18px 18px 6px;background:var(--app-surface);font:400 15px/20px var(--font-sans)}
.fx-msg b{display:block;font:600 12px/16px var(--font-sans);color:var(--app)}
.fx-chips{display:flex;gap:6px;margin-top:14px;overflow:hidden}
.fx-chips span{display:inline-flex;align-items:center;gap:5px;flex:none;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--app-line);font:500 13px/1 var(--font-sans);white-space:nowrap}
.fx-chips .hx-ic{width:15px;height:15px;color:var(--app)}
.fx-compose{display:flex;align-items:center;justify-content:space-between;height:44px;margin-top:10px;padding:0 6px 0 16px;border-radius:999px;background:var(--app-surface);font:400 15px/1 var(--font-sans);color:var(--app-3)}
.fx-compose i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--app);color:#fff}
.fx-compose .hx-ic{width:16px;height:16px}
.fx-chat-h{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--app-line)}
.fx-chat-h b{font:500 16px/20px var(--font-sans)}
.fx-pillmsg{width:max-content;margin:12px auto 10px;padding:6px 12px;border-radius:999px;background:var(--app-soft);color:var(--app);font:500 13px/1.2 var(--font-sans)}
.fx-bub{width:max-content;max-width:80%;margin-left:auto;padding:10px 14px;border-radius:18px 18px 6px 18px;background:var(--ink);color:#fff;font:400 15px/20px var(--font-sans)}
.fx-sug{display:grid;gap:3px;margin-top:12px;padding:14px;border-radius:20px;border:1px solid var(--app-line)}
.fx-tag{display:inline-flex;width:max-content;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:var(--app-soft);color:var(--app);font:500 12px/1 var(--font-sans);letter-spacing:0}
.fx-tag .hx-ic{width:13px;height:13px}
.fx-sug>b,.fx-vote>b,.fx-poll>b{margin-top:6px;font:500 20px/26px var(--font-sans);letter-spacing:-.5px}
.fx-by{font:400 13px/16px var(--font-sans);color:var(--app-2)}
.fx-votes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fx-votes>span{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--app-line);font:500 15px/1 var(--font-sans)}
.fx-votes .fx-add{border-color:transparent;background:var(--app-surface);color:var(--app-2);font-size:14px}
.fx-votes .fx-add .hx-ic{width:15px;height:15px}
.fx-up{transition:transform .35s cubic-bezier(.34,1.8,.5,1),background .3s}
.fx-up.bump{transform:scale(1.08);background:var(--lime);border-color:transparent}
.fx-vote,.fx-poll{display:grid;gap:4px}
.fx-opt2{position:relative;display:flex;justify-content:space-between;align-items:center;height:48px;margin-top:8px;padding:0 14px;border-radius:14px;border:1px solid var(--app-line);overflow:hidden;font:400 15px/1 var(--font-sans)}
.fx-opt2 i{position:absolute;inset:0 auto 0 0;width:0;background:var(--app-soft);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.fx-poll.on .fx-opt2 i{width:var(--w)}
.fx-opt2 span,.fx-opt2 em{position:relative}
.fx-opt2 em{font-style:normal;color:var(--app-2);font-variant-numeric:tabular-nums}

@media (max-width:899px){
  .fx{padding-block:var(--space-8)}
  .ui-card{padding:14px}
  .fx-qa span{font-size:11.5px}
  .ui-toast{font-size:13px;padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){.ui-card *{transition:none!important}}