/* The host dashboard's own pieces: Home (the "Your site" card, countdowns, to-do, glance and
   the newest answers), the day-of card, and More's cards. The frame, rows, buttons and fields
   are the product shell (brand/shell.css); colors and fonts come from brand.css only. */
.plan-adds{margin:0; padding:12px 16px 12px 36px; border-top:1px solid var(--brand-rule)}
.plan-adds li{margin:0 0 4px}
.plan-note{margin:0; padding:12px 16px}
.url{word-break:break-all; user-select:all; font-size:var(--brand-text)}
.qr-box svg{display:block; width:min(100%, 220px); height:auto; background:var(--brand-card); border:1px solid var(--brand-line); border-radius:var(--brand-radius); padding:10px; margin:12px 0}
.ks-wrap{position:relative; margin-top:12px; border-radius:var(--brand-radius-md); box-shadow:inset 0 0 0 1px var(--brand-line); overflow:hidden; background:var(--brand-card)}
.ks-wrap iframe{display:block; width:100%; height:min(70vh, 640px); border:0}
.ks-wait{position:absolute; inset:0; display:grid; place-items:center; background:var(--brand-card)}

/* invitation files: a card each, two across from 900px */
.file-list{display:grid; gap:16px; margin-top:12px}
.file-card{display:flex; flex-direction:column; gap:12px; padding:16px; background:var(--brand-card); box-shadow:inset 0 0 0 1px var(--brand-line); border-radius:var(--brand-radius-md)}
.file-pic{display:block; align-self:center; width:auto; max-width:100%; height:auto; max-height:min(52vh, 420px); border:1px solid var(--brand-line); border-radius:4px}
.file-name{font:400 24px/1.2 var(--brand-font-body); margin:0}
.file-about .small{margin:4px 0 0}
.file-about .btns{margin:10px 0 0}
@media (min-width:900px){ .file-list{grid-template-columns:1fr 1fr} }

/* referral code */
.ref-code{font:500 32px/1.2 var(--brand-font-ui); letter-spacing:.2em; margin:8px 0 16px; user-select:all; font-variant-numeric:tabular-nums}

/* Home: hello, then her site on the left and the numbers on the right (from 900px) */
.hello{margin:0 0 20px}
.hello .screen-title{margin:8px 0 0}
.home-grid{display:grid; gap:24px}
.home-side > :last-child{margin-bottom:0}
@media (min-width:900px){ .home-grid{grid-template-columns:minmax(320px, 400px) minmax(0, 1fr); gap:28px; align-items:start} .yoursite{position:sticky; top:96px} }

/* the "Your site" card: her real page in a little phone on the linen band */
.yoursite{border-radius:var(--brand-radius-lg); overflow:hidden; background:var(--brand-card); box-shadow:var(--brand-shadow)}
.ys-band{height:236px; overflow:hidden}
.ys-phone{position:absolute; left:50%; top:24px; width:150px; height:300px; transform:translateX(-50%); border-radius:22px; overflow:hidden;
  background:var(--brand-card); box-shadow:0 0 0 5px var(--brand-frame), var(--brand-shadow)}
.ys-phone iframe{display:block; width:390px; height:780px; border:0; transform:scale(.3846); transform-origin:0 0; pointer-events:none}
.ys-body{padding:18px 20px 20px}
.ys-title{font:400 26px/1.2 var(--brand-font-body); margin:0}
.ys-url{color:var(--brand-ink-2); margin:2px 0 0; overflow-wrap:anywhere}
.ys-acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.ys-acts .dbtn{flex:1 1 0; min-width:max-content; padding:10px 14px; gap:8px; white-space:nowrap}
.ys-body .dmsg{margin:10px 0 0; min-height:0}
.ys-body .dmsg:empty{display:none}
@media (min-width:900px){
  .ys-band{height:290px}
  .ys-phone{width:170px; height:340px}
  .ys-phone iframe{transform:scale(.4359)}
}

/* the to-do card */
.todo{display:flex; align-items:center; gap:14px; padding:16px 18px; margin:0 0 24px; border-radius:var(--brand-radius-md); background:var(--brand-panel); color:inherit; text-decoration:none}
.todo .row-text{gap:2px}
.todo .row-label{font-weight:500}
.todo-go{color:var(--brand-accent); font-weight:500; white-space:nowrap; display:flex; align-items:center; flex:none}
.todo-go .icon{width:20px; height:20px}

/* at a glance: a number per section that keeps answers */
.tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); margin:0 -1px -1px 0}
.tile{display:flex; flex-direction:column; gap:2px; min-height:100px; padding:14px 16px; background:var(--brand-card); color:inherit; text-decoration:none; box-shadow:inset -1px -1px 0 var(--brand-rule)}
.tile-top{display:flex; align-items:center; justify-content:space-between; color:var(--brand-ink-2)}
.tile-top .icon{width:20px; height:20px}
.tile-top b{font:400 32px/1 var(--brand-font-body); color:var(--brand-ink); font-variant-numeric:tabular-nums}
.tile-label{font-weight:500; margin-top:6px}
.tile small{color:var(--brand-ink-2); font-size:var(--brand-text); line-height:1.3}

/* the day-of card: big buttons, one-handed */
.day-btns{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); margin:0 -1px -1px 0}
.day-btn{display:flex; align-items:center; gap:12px; min-height:72px; padding:12px 16px; background:var(--brand-card); color:inherit; text-decoration:none; font-weight:500; font-size:19px; box-shadow:inset -1px -1px 0 var(--brand-rule)}
.day-btn .icon{width:28px; height:28px; flex:none; color:var(--brand-ink)}

/* "You're live" (live.js): the fabric band, her link, then her files */
.live{margin:-22px calc(-1 * max(18px, env(safe-area-inset-left, 0px))) 0}
.live-top{padding:40px 22px 34px; text-align:center}
.live-title{margin:12px 0 0; font:400 50px/1.05 var(--brand-font-body); letter-spacing:-.015em}
.live-link{display:inline-flex; margin:18px 0 22px; padding:12px 18px; border-radius:999px; background:color-mix(in srgb, var(--brand-card) 92%, transparent); font-weight:500; overflow-wrap:anywhere}
.live-acts{display:grid; gap:10px; max-width:360px; margin:0 auto}
.live-sect{padding:28px 20px 14px}
.live-head{margin:6px 0 0; font:400 26px/1.2 var(--brand-font-body)}
.live .screen-body{padding:0 20px}
.tlink{display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:12px 0 6px; border-bottom:1px solid currentColor; color:var(--brand-ink); font-weight:500; text-decoration:none}
.tlink .icon{width:16px; height:16px}
@media (min-width:900px){
  .live{margin:0}
  .live-top{padding:64px 22px 48px; border-radius:var(--brand-radius-lg)}
  .live-title{font-size:72px}
  .live-sect, .live .screen-body{padding-left:0; padding-right:0}
}