/* Home hero: the clickable sample of Buzzlist. Loaded after styles.css on the home page only.
   Sizing follows the stage (a size container), not the viewport, so the same rules hold in the
   two column hero, the one column tablet layout and on phones. Every view is stacked in one grid
   cell, so switching tabs, searching or revealing never changes the height of the page. */

.x-hero-stage.x-demo{container:xstage/inline-size;padding:0;display:block}
.x-demo button{font:inherit;color:inherit;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.x-demo :is(button,a,textarea):focus-visible{outline:2.5px solid var(--v-ink);outline-offset:2px}
.x-demo .x-app{overflow:hidden}
.x-demo .v-app-body{padding:16px 16px 26px}

/* App bar and tabs */
.x-demo .v-app-bar{gap:14px;flex-wrap:nowrap}
.x-demo .x-app .v-app-tabs{display:flex;gap:4px;min-width:0}
.x-demo .v-app-tabs button{border:0;background:none;font-size:14px;font-weight:600;color:var(--v-muted);padding:7px 12px;border-radius:9px;white-space:nowrap;transition:background-color .2s,color .2s}
.x-demo .v-app-tabs button:hover{background:var(--v-sunk);color:var(--v-ink)}
.x-demo .v-app-tabs button.on{background:var(--v-ink);color:#fff}
.x-demo .x-app .v-app-bar img.x-logo{display:block}

/* Views share one cell; the tallest sets the height for all of them */
.x-views{display:grid}
.x-views>.x-view,.x-view[hidden]{grid-area:1/1;display:block;min-width:0;transition:opacity .28s var(--v-ease),transform .35s var(--v-ease),visibility 0s}
.x-view[hidden],.x-send-sub[hidden]{visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.x-view:focus{outline:0}
#xd-send{display:grid}
#xd-send>*{grid-area:1/1;min-width:0}
.x-send-sub,.x-send-sub[hidden]{display:block;transition:opacity .28s var(--v-ease),transform .35s var(--v-ease),visibility 0s}

/* Search box */
.x-demo .v-q{padding:12px 12px 12px 16px;transition:box-shadow .25s}
.x-demo .v-q:focus-within{box-shadow:0 0 0 5px #ffc53d59;border-color:var(--v-honey-2)}
.x-demo .v-q-top label{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--v-faint)}
.x-demo .v-seg button{border:0;background:none;font-size:13px;font-weight:650;padding:4px 10px;border-radius:7px;color:var(--v-muted);transition:background-color .2s,color .2s,box-shadow .2s}
.x-demo .v-seg button.on{background:#fff;color:var(--v-ink);box-shadow:var(--v-e1)}
.x-demo .v-seg button:not(.on):hover{color:var(--v-ink)}
.x-demo .v-q-row{align-items:center;gap:12px}
.x-demo .x-q{flex:1;min-width:0;min-height:0;display:block;border:0;border-radius:0;outline:0;resize:none;background:transparent;padding:0;margin:0;font:inherit;font-size:17px;line-height:1.35;height:2.7em;font-weight:640;letter-spacing:-.01em;color:var(--v-ink);overflow:hidden}
.x-demo .x-q::placeholder{color:var(--v-faint);font-weight:500}
.x-demo .v-go{position:relative;min-width:118px;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .25s,background-color .2s}
.x-demo .v-go:hover{background:#ffcf5c;box-shadow:0 8px 18px -8px #d9981acc}
.x-demo .v-go:active{transform:scale(.97)}
.x-demo .v-go.is-busy{pointer-events:none}
.x-demo .v-go.is-busy span{opacity:0}
.x-demo .v-go.is-busy:after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2.5px solid #241a0033;border-top-color:#241a00;animation:xd-spin .7s linear infinite}
@keyframes xd-spin{to{transform:rotate(360deg)}}
.x-sugs{display:flex;flex-wrap:nowrap;gap:6px;margin-top:10px;overflow:hidden}
.x-sug{flex:none;border:1px solid var(--v-line);background:var(--v-sunk);color:var(--v-ink-2);font-size:12.5px;font-weight:620;padding:4px 10px;border-radius:999px;white-space:nowrap;transition:background-color .2s,border-color .2s}
.x-sug:hover{background:#fff;border-color:var(--v-honey-2)}
.x-sug.on{background:var(--v-honey-soft);border-color:#f0d185;color:var(--v-honey-ink)}

/* Meta line and counter */
.x-demo .v-meta{margin:12px 2px 8px;flex-wrap:nowrap}
.x-demo .v-meta>span{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.x-demo .v-meta em{font-style:normal;color:var(--v-faint)}
.x-demo [data-free]{display:inline-block;color:var(--v-green)}
.x-demo [data-free].is-tick{animation:xd-tick .6s var(--v-ease)}
@keyframes xd-tick{0%{transform:translateY(-8px);opacity:0}100%{transform:none;opacity:1}}

/* Results table: wide layout first */
.x-demo .v-table{position:relative}
.x-demo .x-app .v-tr{grid-template-columns:minmax(0,1.3fr) minmax(0,1.25fr) minmax(0,1fr) 58px;gap:10px;padding:10px 12px;font-size:14px}
.x-demo .x-app .v-tr.is-head{display:grid;padding-block:8px;font-size:12px}
.x-demo .x-app .v-td{min-height:44px;display:flex;flex-direction:column;justify-content:center}
.x-demo .x-app .v-td.is-phone{display:flex;grid-column:auto;grid-row:auto;text-align:left}
.x-demo .x-app .v-td:not(.is-phone){grid-column:auto}
.x-demo .x-app .v-fit{grid-row:auto;grid-column:auto;justify-self:end;font-size:12.5px;padding:4px 9px}
.x-demo .v-av{width:32px;height:32px;font-size:12.5px}
.x-demo .v-person{gap:9px}
.x-demo .v-person>div{min-width:0}
.x-demo .v-reveal{cursor:pointer;align-self:flex-start;transition:background-color .2s,border-color .2s,box-shadow .2s}
.x-demo .v-reveal:hover{border-color:var(--v-honey-2);background:var(--v-honey-soft);box-shadow:0 0 0 4px #ffc53d26}
.x-demo .v-tr.is-new{animation:xd-row .5s var(--v-ease) both}
.x-demo .v-tr.is-new:nth-child(3){animation-delay:.08s}.x-demo .v-tr.is-new:nth-child(4){animation-delay:.16s}
@keyframes xd-row{from{opacity:0;transform:translateY(8px)}}
.x-demo .v-td .x-in{animation:xd-in .55s var(--v-ease) both}
.x-demo .v-td small.x-in{animation-delay:.08s}
@keyframes xd-in{from{opacity:0;transform:translateY(6px);filter:blur(3px)}}
.x-demo .v-table.is-searching .v-tr:not(.is-head){opacity:.35;transition:opacity .2s}
.x-demo .v-table.is-searching:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#fff0 30%,#fffc 50%,#fff0 70%);background-size:220% 100%;animation:xd-sweep 1s linear infinite;pointer-events:none}
@keyframes xd-sweep{from{background-position:120% 0}to{background-position:-100% 0}}

/* Export row */
.x-demo .x-export{margin-top:12px;gap:8px}
.x-demo .x-export button{font-size:13px;font-weight:650;padding:6px 11px;border-radius:8px;background:var(--v-sunk);color:var(--v-ink-2);border:1px solid var(--v-line);white-space:nowrap;transition:background-color .2s,border-color .2s}
.x-demo .x-export button:first-child{background:var(--v-ink);color:#fff;border-color:var(--v-ink)}
.x-demo .x-export button:hover{border-color:var(--v-honey-2)}
.x-demo .x-export button:first-child:hover{background:#17394a}

/* Status line: the one place changes are announced. Two lines are reserved. */
.x-demo-status{margin:12px 2px 0;min-height:2.8em;font-size:13.5px;line-height:1.4;color:var(--v-muted)}
.x-demo-status a{color:var(--v-ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--v-honey-2);text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap}
.x-demo-status.is-new{animation:xd-status .45s var(--v-ease)}
@keyframes xd-status{from{opacity:0;transform:translateY(4px)}}

/* Shared small parts for the other views */
.x-v-k{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--v-faint)}
.x-v-k .v-chip{font-size:11.5px;padding:2px 8px;letter-spacing:0;text-transform:none}
.x-v-h{margin:0 0 4px;font-size:26px;line-height:1.1;letter-spacing:-.035em;color:var(--v-ink)}
.x-v-p{margin:0 0 14px;font-size:15px;color:var(--v-ink-2)}
.x-v-foot{margin:14px 0 0;font-size:13px;color:var(--v-muted)}
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--v-line-2);background:#fff;color:var(--v-ink);font-size:14px;font-weight:700;padding:8px 14px;border-radius:10px;white-space:nowrap;transition:background-color .2s,border-color .2s,box-shadow .25s,transform .15s}
.x-btn:hover{border-color:var(--v-honey-2);box-shadow:0 0 0 4px #ffc53d26}
.x-btn:active{transform:scale(.97)}
.x-btn.is-go{background:var(--v-honey);border-color:#e3a520;color:#241a00}
.x-btn.is-go:hover{background:#ffcf5c}
.x-btn.is-done,.x-btn.is-done:hover{background:var(--v-green-bg);border-color:#b5dfc6;color:var(--v-green);box-shadow:none;cursor:default}
.x-btn.is-done:before{content:"";width:14px;height:14px;border-radius:50%;background:var(--v-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.x-btn.is-busy{opacity:.7;pointer-events:none}

/* Home */
.x-home-card{display:flex;align-items:center;gap:10px;padding:12px 14px;margin:0 0 14px;border-radius:12px;background:#fffbef;border:1px solid #f3e2b3}
.x-home-card b{display:block;color:var(--v-ink);font-size:15px}
.x-home-card small{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px;color:var(--v-ink-2)}
.x-home-card .v-chip{font-size:11.5px;padding:2px 8px}

/* Buzz Send lineup */
.x-lu-now{position:relative;padding:12px 14px 16px;border-radius:12px;border:1px solid #f0d185;background:linear-gradient(160deg,#fff9ea,#fff);overflow:hidden}
.x-lu-now>small,.x-lu-k{display:block;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--v-honey-ink);margin-bottom:8px}
.x-lu-k{color:var(--v-faint);margin:14px 0 6px}
.x-lu-row{display:flex;align-items:center;gap:10px}
.x-lu-row b{display:block;color:var(--v-ink);font-size:15px}
.x-typing{display:inline-flex;align-items:center;gap:3px;font-size:13.5px;color:var(--v-muted)}
.x-typing i{width:5px;height:5px;border-radius:50%;background:var(--v-honey-2);animation:xd-dot 1.2s ease-in-out infinite}
.x-typing i:first-of-type{margin-left:4px}.x-typing i:nth-of-type(2){animation-delay:.15s}.x-typing i:nth-of-type(3){animation-delay:.3s}
@keyframes xd-dot{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.x-lu-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--v-honey);transform-origin:0 50%;animation:xd-write 4s var(--v-ease) infinite}
@keyframes xd-write{0%{transform:scaleX(.05)}80%,100%{transform:scaleX(.92)}}
.x-lu-next{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.x-lu-next li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;border:1px solid var(--v-line);font-size:14px}
.x-lu-next li b{color:var(--v-ink)}
.x-lu-next li span:last-child{margin-left:auto;color:var(--v-muted);font-size:13px}
.x-lu-next .v-av{width:28px;height:28px;font-size:11.5px}

/* Reply thread */
.x-back{border:0;background:none;padding:0;font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--v-faint)}
.x-back:before{content:"\2190";margin-right:6px}
.x-back:hover{color:var(--v-ink)}
.x-msg{padding:10px 14px;border-radius:12px;margin:0 0 10px;font-size:14.5px;line-height:1.45}
.x-msg b{display:block;font-size:12.5px;margin-bottom:2px}
.x-msg p{margin:0}
.x-msg.is-them{background:var(--v-sunk);margin-right:14%;color:var(--v-ink)}
.x-msg.is-buzz{background:#fff9ea;border:1px solid #f0d185;margin-left:8%;color:var(--v-ink-2)}
.x-msg.is-buzz b{color:var(--v-honey-ink)}
.x-th-acts{display:flex;gap:8px;align-items:center}

/* Floating cards: they sit below the app and overlap only its empty bottom padding */
.x-demo .x-floats{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;margin:-10px 10px 0}
.x-demo .x-float{position:relative;inset:auto;width:auto;margin:0;animation:none}
.x-demo .x-reply{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:10px;row-gap:6px;align-self:start;text-align:left;border:0;border-left:3px solid var(--v-green);padding:12px 14px;border-radius:14px;background:#fff;box-shadow:var(--v-e3);opacity:1;transform:none;pointer-events:auto;transition:opacity .45s var(--v-ease),transform .6s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background-color .2s}
.x-demo .x-reply:hover{background:#fbfffd;box-shadow:0 2px 6px #0c253014,0 30px 70px -24px #0c253066,0 0 0 1px #177a4b33}
.x-demo .x-reply .x-rp-t{min-width:0;flex:1}
.x-demo .x-reply b{display:block;font-size:13.5px;line-height:1.3;color:var(--v-ink)}
.x-demo .x-reply small{display:block;font-size:12.5px;line-height:1.35;min-height:2.7em;color:var(--v-muted)}
.x-demo .x-reply .v-chip{grid-column:2;justify-self:start;font-size:11px;padding:2px 7px}
.x-demo .x-open-float{right:auto;bottom:auto;left:auto;top:auto;padding:14px 16px}
.x-demo .x-open-float p{margin:0 0 10px;font-size:14.5px}
.x-demo .x-open-float p b{min-width:0}
.x-demo .x-of-row{align-items:flex-start;font-size:13.5px;line-height:1.4}
.x-demo .x-of-go{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
.x-demo .x-of-go small{display:block;font-size:12.5px;line-height:1.35;min-height:2.7em;display:flex;align-items:center;color:var(--v-muted)}
.x-demo .x-of-go small.is-note{color:var(--v-ink-2);font-weight:600}
.x-demo .x-bee{display:none}

/* Loop frames: hide the reply until the loop reaches it; with no loop it simply shows */
.x-demo[data-step="0"] .x-reply,.x-demo[data-step="1"] .x-reply,.x-demo[data-step="2"] .x-reply{opacity:0;transform:translateY(14px) scale(.96)}
.x-demo[data-step="4"]:not([data-live]) .x-of-go .x-btn{animation:m4-pulse 1.4s ease-in-out 2}
.x-demo[data-step] .x-of-go span{animation:none}

/* Medium stage: the table folds to two lines per person */
@container xstage (max-width:539px){
  .x-demo .x-app .v-tr{grid-template-columns:minmax(0,1fr) auto;row-gap:4px;column-gap:12px}
  .x-demo .x-app .v-tr.is-head{display:none}
  .x-demo .x-app .v-person{grid-column:1;grid-row:1}
  .x-demo .x-app .v-fit{grid-column:2;grid-row:1}
  .x-demo .x-app .v-td:not(.is-phone){grid-column:1;grid-row:2;padding-left:41px}
  .x-demo .x-app .v-td.is-phone{grid-column:2;grid-row:2;align-items:flex-end;text-align:right}
  .x-demo .x-app .v-td.is-phone .v-reveal{align-self:flex-end}
}
/* Narrow stage (phones): one card column, compact bar, labels trimmed */
@container xstage (max-width:519px){
  .x-demo .x-floats{grid-template-columns:1fr;margin:12px 0 0;gap:10px}
  .x-demo .x-reply{align-self:stretch}
  .x-demo .x-app,.x-demo .x-float{translate:none!important}
  .x-demo .v-app-body{padding:12px 12px 14px}
  .x-demo .v-app-bar{padding:10px 10px;gap:8px}
  .x-demo .x-app .v-app-bar img.x-logo{display:none}
  .x-demo .x-bee{display:block}
  .x-demo .v-app-tabs button{font-size:13px;padding:6px 9px}
  .x-demo .v-app-bar .v-chip{font-size:11px;padding:3px 7px;letter-spacing:.06em}
  .x-demo .v-q-row{flex-direction:column;align-items:stretch;gap:10px}
  .x-demo .x-q{font-size:16px;height:4.05em}
  .x-demo .v-go{width:100%;padding:9px 16px}
  .x-demo .v-meta{flex-direction:column;gap:2px;font-size:13px}
  .x-sugs{flex-wrap:wrap;height:66px;align-content:flex-start}
  .x-sug:nth-child(3){display:none}
  .x-demo-status{min-height:4.2em}
  .x-v-h{font-size:22px}
}
@container xstage (max-width:389px){
  .x-demo .v-q{padding:10px 10px 10px 12px}
  .x-demo .v-q-top label{font-size:11.5px;letter-spacing:.06em}
  .x-demo .v-seg button{font-size:12px;padding:4px 7px}
  .x-sug{font-size:12px;padding:4px 8px}
  .x-demo .x-app .v-tr{padding:10px}
  .x-demo .x-app .v-td:not(.is-phone){grid-column:1/-1;padding-left:41px;min-height:44px}
  .x-demo .x-app .v-td.is-phone{grid-column:1/-1;grid-row:3;padding-left:41px;align-items:flex-start;text-align:left;min-height:44px}
  .x-demo .x-app .v-td.is-phone .v-reveal{align-self:flex-start}
  .x-demo .x-app .v-td small{display:none}
  .x-demo .x-export button{font-size:12.5px;padding:6px 9px}
  .x-demo .x-open-float{padding:12px 14px}
}

@media (prefers-reduced-motion:reduce){
  .x-demo *,.x-demo *:before,.x-demo *:after{animation:none!important;transition:none!important}
  .x-demo .v-go.is-busy span{opacity:1}
}

/* Phone pass: chips scroll in one row with a soft edge, rows stay tight, the export row is three even buttons, and both cards always show (no empty gap while the loop runs). */
@container xstage (max-width:519px){
  .x-sugs{flex-wrap:nowrap;height:auto;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 24px 2px 0;margin-right:-12px;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .x-sugs::-webkit-scrollbar{display:none}
  .x-sug:nth-child(3){display:inline-flex}
  .x-sug{min-height:44px;display:inline-flex;align-items:center}
  .x-demo .x-app .v-tr{row-gap:2px}
  .x-demo .x-app .v-td:not(.is-phone),.x-demo .x-app .v-td.is-phone{min-height:0}
  .x-demo .x-app .v-td b{line-height:1.3}
  .x-demo .x-export{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .x-demo .x-export button{min-height:44px;padding:6px 4px;font-size:12px;white-space:normal;line-height:1.2;text-align:center}
  .x-demo-status{min-height:0;margin-top:10px}
  .x-demo[data-step] .x-reply,.x-demo[data-step] .x-open-float{opacity:1;transform:none}
  .x-demo .x-floats{margin-top:12px}
  .x-demo .x-reply small,.x-demo .x-of-go small{min-height:0}
  .x-demo .x-btn{min-height:44px}
}
@container xstage (max-width:389px){
  .x-demo .x-app .v-td:not(.is-phone),.x-demo .x-app .v-td.is-phone{min-height:0}
  .x-demo .x-app .v-td.is-phone .v-reveal{min-height:44px}
}