/* ============================================================================
   Vibe Check (board push-0927 honest, s1-s9): the owner screens that vibe-tab.js
   draws in the app (#vibe, #vibe=share, #vibe=results) and the friend's page at
   /vibe?c=<id> (vibe.html + vibe.js). Everything else on these screens is the
   tabs.css family (.m-*, .k-*), so this holds only the `vc-*` parts the board
   added. Scoped to body.has-tabs like tabs.css; vibe.html wears that class too.
   No "i" circles anywhere (Chris, 2026-09-28): what the board folded behind one
   is either said in the open or gone.
   ========================================================================== */

/* the friend's page: no tab bar, so none of the room tabs.css keeps for it */
body.has-tabs.vc-page{padding-bottom:0}
body.has-tabs.vc-page .m-screen{padding-bottom:40px}
/* the close cross sits where the pair pill does, so the pill steps aside on these screens */
body.has-tabs:has(.vc-owner) .m-pair{display:none}

body.has-tabs a.k-btn{text-decoration:none}
body.has-tabs .vc-center{text-align:center}
body.has-tabs .vc-nw{white-space:nowrap}
body.has-tabs .mt36{margin-top:36px}

/* the card on Today and Play */
body.has-tabs .vc-card{display:flex;gap:14px;align-items:center}
body.has-tabs .vc-card .e{font-size:40px;line-height:1;flex:none}
body.has-tabs .vc-card .k-title{margin:0}

/* s3: the three sets, each one big button */
body.has-tabs .vc-sets .k-card{display:flex;gap:14px;align-items:center;width:100%;padding:14px 16px;text-align:left;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
body.has-tabs .vc-sets .k-card + .k-card{margin-top:18px}
body.has-tabs .vc-sets .e{font-size:34px;line-height:1;flex:none}
body.has-tabs .vc-sets .k-title,body.has-tabs .vc-sets .k-tease{display:block}
body.has-tabs .vc-sets .k-title{margin:0}
body.has-tabs .vc-sets .k-tease{margin-top:2px}
body.has-tabs .vc-sets .k-card.pick{border-color:var(--pink);box-shadow:6px 7px 0 var(--pink)}
body.has-tabs .vc-sets .k-card:focus-visible{outline:2px solid var(--lemon);outline-offset:3px}

/* s5: one question at a time */
body.has-tabs .vc-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
body.has-tabs .vc-top .m-brand{margin-top:0}
body.has-tabs .vc-flag{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1.5px solid rgba(255,244,236,.4);
  background:0;font:800 13px/1 var(--body);color:var(--cream);cursor:pointer;-webkit-appearance:none;appearance:none}
body.has-tabs .vc-dots{display:flex;gap:6px;margin-top:18px}
body.has-tabs .vc-dots i{flex:1;height:6px;border-radius:9px;background:rgba(255,244,236,.2)}
body.has-tabs .vc-dots i.on{background:var(--pink)}
body.has-tabs .vc-q{font-family:var(--display);font-size:34px;line-height:1.1;color:var(--cream);margin-top:26px;overflow-wrap:anywhere}
body.has-tabs .vc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
body.has-tabs .vc-ch{background:var(--plum2);border:2px solid rgba(255,244,236,.45);border-radius:20px;padding:20px 10px 16px;text-align:center;
  font:inherit;color:var(--cream);cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
body.has-tabs .vc-ch .e{display:block;font-size:44px;line-height:1}
body.has-tabs .vc-ch b{display:block;margin-top:10px;font-size:17px;font-weight:800;color:var(--cream)}
body.has-tabs .vc-ch.on{background:var(--pink);border-color:var(--cream);box-shadow:5px 6px 0 var(--lemon)}
body.has-tabs .vc-ch.on b{color:#fff}
body.has-tabs .vc-ch:focus-visible{outline:2px solid var(--lemon);outline-offset:3px}
body.has-tabs .vc-anon{margin-top:22px;text-align:center;font-size:14px;font-weight:700;color:var(--soft)}
body.has-tabs .vc-in{animation:vc-in .28s ease-out both}
@keyframes vc-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.has-tabs .vc-in{animation:none}}

/* s6 */
body.has-tabs .m-hero.vc-sent{font-size:52px;text-align:center;rotate:-1deg}

/* s4: the story picture, drawn on a canvas and shown at phone size */
body.has-tabs .vc-story{display:block;width:220px;aspect-ratio:9/16;margin:22px auto 0;border-radius:22px;border:2px solid var(--cream);
  background:var(--plum);box-shadow:8px 9px 0 var(--lav);object-fit:cover}
body.has-tabs .vc-2{display:flex;gap:12px;margin-top:22px}
body.has-tabs .vc-2 .k-btn{flex:1}
body.has-tabs .k-btn:not(.sm) + .k-btn:not(.sm).vc-side{margin-top:0}
body.has-tabs .vc-ends{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;font-size:14px;font-weight:700;color:var(--soft)}
body.has-tabs .vc-act{background:0;border:0;padding:10px 0;font:800 15px/1 var(--body);color:var(--pink);cursor:pointer}

/* s7 and s8 */
body.has-tabs .vc-slots{display:flex;justify-content:center;gap:16px;margin-top:26px}
body.has-tabs .vc-slots i{width:62px;height:62px;border-radius:50%;border:2px dashed rgba(255,244,236,.5);display:grid;place-items:center;font-size:28px;font-style:normal;color:var(--cream)}
body.has-tabs .vc-slots i.on{border:2px solid var(--cream);background:var(--pink)}
body.has-tabs .vc-more{text-align:center;font-size:17px;font-weight:800;color:var(--blush)}
body.has-tabs .vc-bar{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:15px;font-weight:800}
body.has-tabs .vc-bar .l{width:132px;flex:none;line-height:1.2;overflow-wrap:anywhere}
body.has-tabs .vc-bar .t{flex:1;height:14px;border-radius:9px;background:rgba(255,244,236,.12);overflow:hidden}
body.has-tabs .vc-bar .t i{display:block;height:100%;background:var(--pink);border-radius:9px}
body.has-tabs .vc-bar .n{width:22px;text-align:right;flex:none}
body.has-tabs .vc-win{font-size:16px;font-weight:800;color:var(--cream)}

/* s9: the report sheet, over everything including the tab bar */
body.has-tabs .vc-dim{position:fixed;inset:0;background:rgba(10,3,7,.72);z-index:60}
body.has-tabs .vc-sheet{position:fixed;left:50%;bottom:0;translate:-50% 0;width:100%;max-width:480px;z-index:61;background:var(--plum2);
  border:2px solid var(--cream);border-bottom:0;border-radius:26px 26px 0 0;padding:14px 22px calc(30px + env(safe-area-inset-bottom));color:var(--cream)}
body.has-tabs .vc-grab{width:44px;height:5px;border-radius:9px;background:rgba(255,244,236,.4);margin:0 auto 16px}
body.has-tabs .vc-opt{display:flex;align-items:center;gap:12px;width:100%;padding:14px 0;border:0;border-top:1px solid rgba(255,244,236,.16);background:0;
  font:700 16px/1.3 var(--body);color:var(--cream);text-align:left;cursor:pointer}
body.has-tabs .vc-opt:first-child{border-top:0}
body.has-tabs .vc-opt .r{width:22px;height:22px;border-radius:50%;border:2px solid var(--soft);flex:none}
body.has-tabs .vc-opt .r.on{border:6px solid var(--pink)}
body.has-tabs .vc-mail{text-align:center;font-size:14px;font-weight:700;color:var(--soft);margin-top:16px}
body.has-tabs .vc-mail a{color:var(--cream);font-weight:800;text-decoration:none}