/* ============================================================
   VISIONA VARAUS — oma ajanvaraus (korvaa Calendly-upotuksen)
   Design system: ~/aivot/visiona/design-system (tokenit alla paikallisesti,
   jotta komponentti toimii myös sivuilla, joilla tokenit puuttuvat).
   Liike vain transform/opacity. Valot ja rae ovat staattisia kerroksia,
   jotka piirretään kerran eivätkä animoidu.
============================================================ */
.vb{
  --vb-text:#E7EDFB;
  --vb-dim:#9BA6C6;
  --vb-mute:#5F6989;          /* vain disabled-tilat */
  --vb-soft:#8B96B8;          /* pieni toissijainen teksti, AA 4,5:1 tummalla pinnalla */
  --vb-line:rgba(255,255,255,0.06);
  --vb-line-strong:rgba(255,255,255,0.11);
  --vb-line-blue:rgba(143,168,255,0.22);
  --vb-blue:#3D6EF0;
  --vb-glow:#8AB1FF;
  --vb-red:#FF6E7E;
  --vb-ease:cubic-bezier(0.22,0.61,0.36,1);
  --vb-ease-strong:cubic-bezier(0.23,1,0.32,1);
  --vb-ease-drawer:cubic-bezier(0.32,0.72,0,1);
  position:relative;
  max-width:1060px;
  margin:0 auto 48px;
  text-align:left;
  color:var(--vb-text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  letter-spacing:-0.014em;
  -webkit-font-smoothing:antialiased;
  isolation:isolate;
}
.vb *,.vb *::before,.vb *::after{ box-sizing:border-box }
.vb p,.vb h3,.vb h4,.vb figure,.vb ul,.vb ol{ margin:0; max-width:none; text-align:left; text-shadow:none }
.vb button{ font:inherit; color:inherit; letter-spacing:inherit }
.vb .tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }
.vb svg{ display:block }

/* Ambient light behind the card: one static radial gradient, no filter.
   Varausosio leikkaa vaakasuunnan, ettei valo koskaan levennä sivua. */
.booking:has(.vb){ overflow-x:clip }
.vb::before{
  content:"";
  position:absolute;
  left:-12%; right:-12%; top:-90px; bottom:-120px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(48% 42% at 62% 40%, rgba(61,110,240,0.20), rgba(61,110,240,0) 70%),
    radial-gradient(30% 30% at 22% 70%, rgba(91,200,255,0.07), rgba(91,200,255,0) 70%);
}

/* Card */
.vb-card{
  position:relative;
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  border-radius:30px;
  border:1px solid transparent;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(46,92,235,0.16), rgba(46,92,235,0) 60%) padding-box,
    linear-gradient(180deg, #0A1233 0%, #050A1E 100%) padding-box,
    linear-gradient(165deg, rgba(170,195,255,0.40) 0%, rgba(255,255,255,0.07) 32%, rgba(255,255,255,0.05) 70%, rgba(61,110,240,0.30) 100%) border-box;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 50px 100px -60px rgba(61,110,240,0.55),
    0 40px 70px -50px rgba(0,0,0,0.75);
  overflow:hidden;
  isolation:isolate;
}
/* Fine grain, static tile (no blend mode, no fixed positioning) */
.vb-card::after{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
.vb-aside,.vb-main{ position:relative; z-index:1 }

/* ---------- Aside ---------- */
.vb-aside{
  padding:38px 32px 34px;
  border-right:1px solid var(--vb-line);
  display:flex;
  flex-direction:column;
  gap:30px;
  background:linear-gradient(180deg, rgba(110,150,255,0.035) 0%, rgba(110,150,255,0) 55%), rgba(2,5,16,0.35);
}
.vb .vb-kicker{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 12px;
  font-size:13px; font-weight:500;
  color:var(--vb-glow);
}
.vb-kicker svg{ width:16px; height:16px }
.vb .vb-title{
  margin:0;
  font-family:"Inter Display","Inter",system-ui,sans-serif;
  font-size:27px;
  line-height:1.12;
  font-weight:600;
  letter-spacing:-0.024em;
  color:#fff;
  text-wrap:balance;
}
.vb-swap{ display:grid; margin-top:22px }
.vb-swap > *{ grid-area:1 / 1 }
.vb-meta[hidden]{ display:none !important }
.vb-meta{ list-style:none; padding:0; display:grid; gap:12px; align-content:start; transition:opacity .2s var(--vb-ease), transform .3s var(--vb-ease) }
.vb-meta li{ display:flex; align-items:center; gap:12px; font-size:15px; line-height:1.35; color:var(--vb-dim) }
.vb-meta svg{ width:18px; height:18px; flex:none; color:var(--vb-glow) }

/* Ticket: the chosen time, lands here from the slot (FLIP) */
.vb-ticket,.vb .vb-picked-inline{
  display:flex; align-items:stretch; gap:14px;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(61,110,240,0.16), rgba(61,110,240,0.06));
  border:1px solid rgba(138,177,255,0.32);
  box-shadow:0 1px 0 rgba(255,255,255,0.07) inset;
}
.vb-ticket{
  align-self:start;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .38s var(--vb-ease-strong), transform .46s var(--vb-ease-drawer);
}
.vb-aside.picked-on .vb-ticket{ opacity:1; transform:none }
.vb-aside.picked-on .vb-meta{ opacity:0; transform:translateY(-6px); pointer-events:none }
.vb-ticket-date{
  flex:none;
  width:58px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-radius:12px;
  background:linear-gradient(180deg, #4C7BF4 0%, #2F5BDD 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.25) inset;
  color:#fff;
}
.vb-ticket-wd{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.85 }
.vb-ticket-d{ font-size:24px; font-weight:600; line-height:1; letter-spacing:-0.02em }
.vb-ticket-body{ min-width:0; display:flex; flex-direction:column; justify-content:center; padding:4px 0 }
.vb .vb-ticket-label{ font-size:12px; font-weight:500; color:var(--vb-soft); margin-bottom:3px }
.vb .vb-ticket-day{ font-size:15.5px; font-weight:600; color:#fff; line-height:1.25 }
.vb .vb-ticket-time{ font-size:14.5px; color:var(--vb-glow); margin-top:2px }

/* Host */
.vb-host{ margin-top:auto; padding-top:24px; border-top:1px solid var(--vb-line) }
.vb-host-row{ display:flex; align-items:center; gap:16px }
.vb-host-av{
  width:84px; height:84px; border-radius:50%;
  object-fit:cover; object-position:50% 18%;
  display:block; flex:none;
  border:1px solid var(--vb-line-strong);
  box-shadow:0 0 0 4px rgba(61,110,240,0.12), 0 14px 30px -14px rgba(61,110,240,0.6);
  background:#1a2140;
}
.vb-host figcaption{ display:flex; flex-direction:column; gap:1px }
.vb .vb-host-name{ font-size:15px; font-weight:600; color:#fff }
.vb .vb-host-role{ font-size:13px; color:var(--vb-soft) }
.vb .vb-host-txt{ margin-top:16px; font-size:14px; line-height:1.55; color:var(--vb-dim) }

/* ---------- Main ---------- */
.vb-main{ padding:34px 42px 38px; min-height:460px; display:flex; flex-direction:column }
.vb-stage{ position:relative; flex:1 }
.vb-step{ transition:opacity .3s var(--vb-ease), transform .44s var(--vb-ease-strong) }
.vb-step[hidden]{ display:none }
.vb-step.vb-enter-fwd{ opacity:0; transform:translate3d(22px,0,0) }
.vb-step.vb-enter-back{ opacity:0; transform:translate3d(-22px,0,0) }

/* Progress */
.vb .vb-progress{
  list-style:none; padding:0;
  display:flex; align-items:center; gap:10px;
  margin:0 0 30px;
  max-width:460px;
}
.vb-progress li[data-p]{ display:flex; align-items:center; gap:8px; flex:none; font-size:13px; font-weight:500; color:var(--vb-soft); transition:color .25s ease }
.vb-progress-dot{
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  font-size:11.5px; font-weight:600;
  border:1px solid var(--vb-line-strong);
  color:var(--vb-soft);
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.vb-progress li.on{ color:#fff }
.vb-progress li.on .vb-progress-dot{ background:var(--vb-blue); border-color:var(--vb-blue); color:#fff }
.vb-progress li.done .vb-progress-dot{ border-color:rgba(138,177,255,0.5); color:var(--vb-glow); background:rgba(61,110,240,0.12) }
.vb-progress-dot svg{ display:none; width:12px; height:12px }
.vb-progress li.done .vb-pn{ display:none }
.vb-progress li.done .vb-progress-dot svg{ display:block }
.vb-progress-line{ flex:1; min-width:16px; height:1px; background:var(--vb-line-strong); position:relative; overflow:hidden }
.vb-progress-line span{
  position:absolute; inset:0;
  background:var(--vb-glow);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--vb-ease-drawer);
}
.vb-progress-line.done span{ transform:none }

.vb .vb-h{
  margin:0;
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.014em;
  color:#fff;
  outline:none;
}
.vb .vb-h-lg{ font-family:"Inter Display","Inter",system-ui,sans-serif; font-size:22px; letter-spacing:-0.02em }
.vb .vb-sub{ margin:4px 0 0; font-size:14px; color:var(--vb-soft) }
.vb .vb-lead{ font-size:15px; line-height:1.55; margin-top:8px; color:var(--vb-dim) }

/* Week header */
.vb-weekbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px }
.vb .vb-month{ font-size:14px; color:var(--vb-dim) }
.vb-nav{ display:flex; gap:8px }
.vb-nav[hidden]{ display:none }
.vb-iconbtn{
  width:44px; height:44px;
  display:inline-grid; place-items:center;
  border-radius:999px;
  border:1px solid var(--vb-line-strong);
  background:rgba(61,110,240,0.06);
  cursor:pointer;
  transition:transform .16s var(--vb-ease), border-color .2s ease, background-color .2s ease, opacity .2s ease;
}
.vb-iconbtn svg{ width:16px; height:16px }
.vb-iconbtn:disabled{ opacity:.3; cursor:default }
.vb-iconbtn:not(:disabled):active{ transform:scale(0.95) }
@media (hover:hover) and (pointer:fine){
  .vb-iconbtn:not(:disabled):hover{ border-color:var(--vb-line-blue); background:rgba(61,110,240,0.10) }
}

/* Week slider: one week (Mon–Fri) per page, track moves with transform only */
.vb-weeks{
  position:relative;
  margin:0 -6px;
  padding:6px 0 14px;
  overflow:hidden;
  touch-action:pan-y;
  -webkit-user-select:none; user-select:none;
}
.vb-weeks.is-drag{ cursor:grabbing }
.vb-track{
  position:relative;
  display:flex;
  will-change:transform;
  transition:transform .5s var(--vb-ease-drawer);
}
.vb-week{
  flex:0 0 100%;
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:8px;
  padding:0 6px;
}
.vb-weekhead{ min-width:0 }
.vb .vb-weeklabel{ display:flex; align-items:baseline; gap:10px; margin-top:4px; font-size:14px }
.vb-wk-nro{ color:#fff; font-weight:500 }
.vb-wk-vali{ color:var(--vb-dim) }
.vb-dots{ display:flex; justify-content:center; gap:6px; margin-top:2px }
.vb-dot{ width:18px; height:3px; border-radius:2px; background:var(--vb-glow); opacity:.22; transition:opacity .3s ease }
.vb-dot.on{ opacity:1 }
.vb-day{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:15px 4px 14px;   /* aikamäärä pois (Joel 7.10.) */
  border-radius:16px;
  border:1px solid var(--vb-line);
  background:rgba(61,110,240,0.055);
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .16s var(--vb-ease), border-color .2s ease, background-color .2s ease;
}
.vb-day-wd{ font-size:12px; font-weight:500; color:var(--vb-soft); text-transform:uppercase; letter-spacing:.08em; transition:color .2s ease }
.vb-day-num{ font-size:25px; font-weight:600; line-height:1.1; color:#fff; letter-spacing:-0.02em }
.vb-day-count{ font-size:12px; color:var(--vb-glow); transition:color .2s ease }
.vb-day:disabled{ cursor:default; background:transparent; border-color:var(--vb-line); opacity:.55 }
.vb-day:disabled .vb-day-num,.vb-day:disabled .vb-day-count{ color:var(--vb-mute) }
.vb-day:not(:disabled):active{ transform:scale(0.96) }
.vb-day[aria-pressed="true"]{ background:transparent; border-color:transparent }
.vb-day[aria-pressed="true"] .vb-day-wd{ color:rgba(255,255,255,0.82) }
.vb-day[aria-pressed="true"] .vb-day-count{ color:rgba(255,255,255,0.9) }
@media (hover:hover) and (pointer:fine){
  .vb-day:not(:disabled):not([aria-pressed="true"]):hover{ border-color:var(--vb-line-blue); background:rgba(61,110,240,0.08) }
}
/* Selected-day plate slides between days (transform only, painted once) */
.vb-day-ind{
  position:absolute; left:0; top:0; z-index:0;
  width:74px; height:84px;
  border-radius:16px;
  background:linear-gradient(180deg, #4A79F3 0%, #2C57D8 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.28) inset, 0 14px 26px -16px rgba(61,110,240,0.9);
  opacity:0;
  will-change:transform;
  transition:transform .46s var(--vb-ease-drawer), opacity .2s ease;
  pointer-events:none;
}

/* Slots */
.vb-slots-head{ margin:28px 0 12px; display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.vb .vb-slots-day{ margin:0; color:var(--vb-dim) }
.vb-slots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px }
.vb-slots[data-n="3"]{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.vb-slots[data-n="2"],.vb-slots[data-n="4"]{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.vb-slot{
  position:relative;
  height:56px;
  display:flex; align-items:center; gap:6px;
  padding:0 16px 0 18px;
  border-radius:14px;
  border:1px solid var(--vb-line-blue);
  background:rgba(61,110,240,0.07);
  color:#fff;
  cursor:pointer;
  text-align:left;
  touch-action:manipulation;
  white-space:nowrap;
  transition:transform .16s var(--vb-ease), border-color .2s ease, background-color .2s ease;
}
.vb-slot-txt{ display:inline-flex; align-items:baseline }
.vb-slot-t{ font-size:17px; font-weight:600; letter-spacing:-0.01em }
.vb-slot-end{ font-size:14px; color:var(--vb-soft); margin-left:1px }
.vb-slot-go{ margin-left:auto; color:var(--vb-glow); opacity:.55; transition:transform .25s var(--vb-ease), opacity .2s ease }
.vb-slot-go svg{ width:16px; height:16px }
.vb-slot:active{ transform:scale(0.97) }
.vb-slot.is-picked{ border-color:rgba(138,177,255,0.75); background:rgba(61,110,240,0.20) }
.vb-slot.is-picked .vb-slot-go{ opacity:1 }
@media (hover:hover) and (pointer:fine){
  .vb-slot:hover{ border-color:rgba(138,177,255,0.6); background:rgba(61,110,240,0.17) }
  .vb-slot:hover .vb-slot-go{ opacity:1; transform:translateX(3px) }
}
.vb-slots-in > *{ opacity:0; transform:translateY(6px); animation:vbIn .34s var(--vb-ease-strong) forwards }
.vb-slots-in > *:nth-child(2){ animation-delay:.04s }
.vb-slots-in > *:nth-child(3){ animation-delay:.08s }
.vb-slots-in > *:nth-child(4){ animation-delay:.12s }
.vb-slots-in > *:nth-child(n+5){ animation-delay:.16s }
@keyframes vbIn{ to{ opacity:1; transform:none } }

.vb .vb-empty{
  padding:20px;
  border-radius:16px;
  border:1px dashed var(--vb-line-strong);
  color:var(--vb-dim);
  font-size:15px;
  line-height:1.5;
}
.vb .vb-empty a{ color:var(--vb-glow); text-decoration:none }
.vb .vb-alert{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border:1px solid rgba(233,185,73,0.45); background:rgba(233,185,73,0.08); color:var(--vb-text); margin-bottom:20px; outline:none }
.vb-alert svg{ width:18px; height:18px; flex:none; margin-top:2px; color:#E9B949 }

.vb .vb-tz{ margin:24px 0 0; font-size:13px; color:var(--vb-soft); display:flex; align-items:center; gap:8px }
.vb .vb-tz svg{ width:14px; height:14px }

/* Empty / error state */
.vb-state{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:34px 8px 10px }
.vb-state-ic{
  width:52px; height:52px; border-radius:16px;
  display:grid; place-items:center;
  color:var(--vb-glow);
  background:rgba(61,110,240,0.10);
  border:1px solid var(--vb-line-blue);
  margin-bottom:20px;
}
.vb-state-ic svg{ width:24px; height:24px }
.vb .vb-state-h{ font-family:"Inter Display","Inter",system-ui,sans-serif; font-size:21px; letter-spacing:-0.02em; text-align:center }
.vb .vb-state-txt{ margin:10px auto 0; max-width:400px; font-size:15px; line-height:1.55; color:var(--vb-dim); text-align:center }
.vb-contactrow{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:22px }
.vb-chip{
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding:0 18px;
  border-radius:999px;
  border:1px solid var(--vb-line-strong);
  background:rgba(61,110,240,0.07);
  color:#fff; text-decoration:none;
  font-size:15px;
  transition:transform .16s var(--vb-ease), border-color .2s ease, background-color .2s ease;
}
.vb-chip svg{ width:16px; height:16px; color:var(--vb-glow) }
.vb-chip:active{ transform:scale(0.97) }
@media (hover:hover) and (pointer:fine){
  .vb-chip:hover{ border-color:var(--vb-line-blue); background:rgba(61,110,240,0.10) }
}
.vb-actions-center{ justify-content:center }
.vb-state .vb-actions{ margin-top:14px }

/* Skeleton (static, no looping animation) */
.vb-skel{ background:rgba(255,255,255,0.04); border-color:transparent; cursor:default; min-height:84px }
.vb-skel-slot{ height:56px; border-radius:14px; background:rgba(255,255,255,0.035) }

/* Back link */
.vb-back{
  display:inline-flex; align-items:center; gap:8px;
  margin:-12px 0 12px -8px;
  padding:0 8px;
  min-height:44px;
  border:0; background:none;
  font-size:14px; color:var(--vb-dim);
  cursor:pointer; border-radius:8px;
  transition:color .2s ease;
}
.vb-back svg{ width:16px; height:16px; transition:transform .2s var(--vb-ease) }
@media (hover:hover) and (pointer:fine){
  .vb-back:hover{ color:#fff }
  .vb-back:hover svg{ transform:translateX(-3px) }
}

/* Form */
.vb-form{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:16px 16px }
.vb-field{ display:flex; flex-direction:column; gap:7px; min-width:0 }
.vb-field.full{ grid-column:1 / -1 }
.vb-field label{ font-size:13.5px; font-weight:500; color:var(--vb-dim) }
.vb-field label .opt{ color:var(--vb-soft); font-weight:400 }
.vb-input{
  width:100%;
  height:52px;
  padding:0 16px;
  border-radius:13px;
  border:1px solid var(--vb-line-strong);
  background:rgba(3,6,16,0.5);
  box-shadow:0 1px 0 rgba(255,255,255,0.03);
  color:#fff;
  font:inherit;
  font-size:16px;
  letter-spacing:-0.01em;
  outline:none;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
textarea.vb-input{ height:auto; min-height:100px; padding:14px 16px; resize:none; line-height:1.5 }
.vb-input::placeholder{ color:#5A6488 }
.vb-input:focus{ border-color:rgba(138,177,255,0.75); box-shadow:0 0 0 4px rgba(61,110,240,0.18); background:rgba(3,6,16,0.65) }
.vb-input[aria-invalid="true"]{ border-color:rgba(255,110,126,0.75) }
.vb-input[aria-invalid="true"]:focus{ border-color:rgba(255,110,126,0.9); box-shadow:0 0 0 4px rgba(255,110,126,0.16) }
.vb-err{ font-size:13px; color:var(--vb-red) }
.vb-err:empty{ display:none }
.vb-hp{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden }

.vb-actions{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:6px }
.vb .vb-note{ margin:0; font-size:13px; color:var(--vb-soft); line-height:1.5; max-width:340px }
.vb .vb-note a{ color:var(--vb-dim); text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(155,166,198,0.4) }
.vb .vb-formerr{ grid-column:1 / -1; margin:0; font-size:14px; color:var(--vb-red) }
.vb .vb-formerr:empty{ display:none }

/* Primary button (brand: dark fill, blue gradient hairline) */
.vb-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  height:54px;
  padding:0 28px;
  border-radius:999px;
  border:1px solid transparent;
  background:linear-gradient(180deg, #1A2445 0%, #0C1224 100%) padding-box,
             linear-gradient(135deg, #5BC8FF 0%, #3D6EF0 55%, #1E3FB8 100%) border-box;
  color:#fff;
  font-size:16px;
  font-weight:500;
  cursor:pointer;
  box-shadow:0 18px 40px -18px rgba(61,110,240,0.7), 0 1px 0 rgba(255,255,255,0.08) inset;
  transition:transform .16s var(--vb-ease);
  white-space:nowrap;
  isolation:isolate;
  touch-action:manipulation;
}
/* Hover-hehku valmiiksi piirrettynä kerroksena, vain opacity animoituu */
.vb-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  box-shadow:0 24px 50px -16px rgba(61,110,240,0.75);
  opacity:0; transition:opacity .3s var(--vb-ease);
}
.vb-btn svg{ width:16px; height:16px }
.vb-btn .vb-arrow{ color:var(--vb-glow); transition:transform .3s var(--vb-ease) }
.vb-btn:active{ transform:scale(0.97) }
@media (hover:hover) and (pointer:fine){
  .vb-btn:hover{ transform:translateY(-1px) }
  .vb-btn:hover::after{ opacity:1 }
  .vb-btn:hover .vb-arrow{ transform:translateX(4px) }
}
.vb-btn[disabled]{ cursor:progress; opacity:.75 }
.vb-btn-ghost{
  background:rgba(255,255,255,0.04);
  border-color:var(--vb-line-strong);
  box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .vb-btn-ghost:hover{ background:rgba(255,255,255,0.08) }
  .vb-btn-ghost:hover::after,.vb-btn-danger:hover::after{ opacity:0 }
}
.vb-btn-danger{ border-color:rgba(255,110,126,0.45); background:rgba(255,110,126,0.08); box-shadow:none }
.vb-spin{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.25); border-top-color:#fff;
  animation:vbSpin .7s linear infinite;
}
@keyframes vbSpin{ to{ transform:rotate(360deg) } }

/* ---------- Done ---------- */
.vb-done{ display:flex; flex-direction:column; align-items:stretch; padding-top:4px; max-width:560px }
.vb-done-head{ display:flex; align-items:center; gap:14px; margin-bottom:24px }
.vb-check{
  width:44px; height:44px; border-radius:50%;
  flex:none;
  display:grid; place-items:center;
  background:linear-gradient(180deg, #4A79F3 0%, #2C57D8 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 12px 26px -12px rgba(61,110,240,0.9);
  color:#fff;
  transition:transform .5s var(--vb-ease-drawer) .12s, opacity .3s ease .12s;
}
.vb-check svg{ width:22px; height:22px }
.vb-check.vb-check-in{ opacity:0; transform:scale(0.6) }
.vb-done .vb-big{
  margin:0;
  font-family:"Inter Display","Inter",system-ui,sans-serif;
  font-size:clamp(26px, 3vw, 32px);
  font-weight:600;
  letter-spacing:-0.024em;
  line-height:1.12;
  color:#fff;
  outline:none;
}
/* Meeting pass */
.vb-pass{
  display:flex; align-items:stretch;
  border-radius:22px;
  border:1px solid rgba(138,177,255,0.30);
  background:linear-gradient(180deg, rgba(61,110,240,0.14), rgba(61,110,240,0.04));
  box-shadow:0 1px 0 rgba(255,255,255,0.07) inset, 0 30px 60px -40px rgba(61,110,240,0.8);
  overflow:hidden;
  transition:opacity .4s var(--vb-ease), transform .55s var(--vb-ease-drawer);
}
.vb-pass.vb-pass-in{ opacity:0; transform:translateY(14px) scale(0.98) }
.vb-pass-date{
  flex:none; width:104px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:18px 0;
  background:linear-gradient(180deg, #4A79F3 0%, #2C57D8 100%);
  color:#fff;
}
.vb-pass-wd{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; opacity:.85 }
.vb-pass-d{ font-family:"Inter Display","Inter",system-ui,sans-serif; font-size:42px; font-weight:600; line-height:1; letter-spacing:-0.03em }
.vb-pass-m{ font-size:13px; opacity:.85 }
.vb-pass-body{ min-width:0; padding:20px 22px; display:flex; flex-direction:column; justify-content:center }
.vb .vb-pass-title{ font-size:13px; color:var(--vb-soft); font-weight:500 }
.vb .vb-when{ margin-top:6px; font-size:19px; line-height:1.3; font-weight:600; color:#fff }
.vb .vb-pass-time{ margin-top:2px; font-size:17px; color:var(--vb-glow); font-weight:500 }
.vb .vb-pass-meta{ margin-top:12px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--vb-dim) }
.vb-pass-meta svg{ width:16px; height:16px; color:var(--vb-glow) }
.vb-pm{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap }
.vb-pm + .vb-pm{ padding-left:14px; margin-left:6px; border-left:1px solid var(--vb-line-strong) }
.vb-next{ list-style:none; padding:0; margin-top:22px !important; display:grid; gap:12px }
.vb-next li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--vb-dim) }
.vb-next svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--vb-glow) }
.vb-next strong{ color:var(--vb-text); font-weight:500; overflow-wrap:anywhere }
.vb-done .vb-actions{ margin-top:28px }
/* tapaaminen.html käyttää näitä edelleen */
.vb-done p.vb-txt{ margin:18px 0 0; font-size:16px; line-height:1.55; color:var(--vb-dim); max-width:520px }

.vb .vb-mocknote{
  margin:22px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--vb-soft);
  display:flex; align-items:flex-start; gap:8px;
}
.vb .vb-mocknote::before{ content:""; margin-top:7px; width:6px; height:6px; border-radius:50%; background:#E9B949; flex:none }
.vb-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* Siirtotila (hallintasivu): yksipalstainen, ylempi kortti kertoo tapaamisen */
.vb-siirto{ max-width:640px }
.vb-siirto .vb-card{ grid-template-columns:1fr }
.vb-siirto .vb-aside{ display:none }
.vb-siirto .vb-main{ min-height:0 }
.vb-siirto .vb-picked-inline{ display:flex }

/* Focus */
.vb button:focus-visible,.vb a:focus-visible{ outline:2px solid var(--vb-glow); outline-offset:3px }
.vb-day:focus-visible{ outline-offset:2px }

.vb .vb-picked-inline{ display:none; margin:0 0 22px; padding:10px }
.vb-picked-inline .vb-ticket-date{ width:52px; padding:8px 0 }
.vb-picked-inline .vb-ticket-d{ font-size:21px }
.vb-picked-inline{ transition:opacity .38s var(--vb-ease-strong), transform .46s var(--vb-ease-drawer) }

/* ---------- Tablet / mobile ---------- */
@media (max-width:960px){
  .vb-card{ grid-template-columns:290px minmax(0,1fr) }
  .vb-main{ padding:30px 30px 34px }
  .vb-aside{ padding:32px 26px 30px }
}
@media (max-width:820px){
  .vb{ margin-bottom:36px }
  .vb::before{ left:0; right:0 }   /* ei yli näytön: -30 % levensi mobiilin asettelun 476 px:iin (Joel 7.10.) */
  .vb-card{ grid-template-columns:minmax(0,1fr); border-radius:26px }
  .vb-aside-top,.vb-main,.vb-host{ min-width:0 }
  .vb-aside{ display:contents }
  .vb-aside-top{ order:0; padding:26px 22px 20px; border-bottom:1px solid var(--vb-line); background:rgba(4,7,18,0.28) }
  .vb-main{ order:1; padding:22px 18px 26px; min-height:0 }
  .vb-host{ order:2; margin:0; padding:20px 22px 24px; border-top:1px solid var(--vb-line); background:rgba(4,7,18,0.28) }
  .vb .vb-kicker{ margin-bottom:8px }
  .vb .vb-title{ font-size:23px }
  .vb-swap{ margin-top:14px }
  .vb-meta{ gap:8px }
  .vb-meta li{ font-size:14.5px; gap:10px }
  .vb-meta svg{ width:17px; height:17px }
  .vb-ticket{ display:none }
  .vb-aside.picked-on .vb-meta{ opacity:1; transform:none }
  .vb-host-av{ width:64px; height:64px }
  .vb .vb-host-txt{ margin-top:12px; font-size:14px }
  .vb .vb-progress{ margin-bottom:24px; gap:8px; max-width:none }
  .vb-progress li[data-p]{ font-size:12.5px; gap:6px }
  .vb-week{ gap:6px }
  .vb-day{ padding:14px 2px 13px; border-radius:15px }
  .vb-day-ind{ border-radius:15px }
  .vb-day-num{ font-size:22px }
  .vb-day-wd,.vb-day-count{ font-size:11.5px }
  .vb-slots-head{ margin-top:22px }
  .vb-slots{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px }
  .vb-slot{ height:56px; padding:0 14px }
  .vb-slots[data-n="3"],.vb-slots[data-n="5"]{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .vb-slots[data-n="3"] .vb-slot,.vb-slots[data-n="5"] .vb-slot{ height:66px; padding:0 6px; justify-content:center }
  .vb-slots[data-n="3"] .vb-slot-txt,.vb-slots[data-n="5"] .vb-slot-txt{ flex-direction:column; align-items:center; gap:1px }
  .vb-slots[data-n="3"] .vb-slot-end,.vb-slots[data-n="5"] .vb-slot-end{ margin:0; font-size:13px }
  .vb-slots[data-n="3"] .vb-slot-go,.vb-slots[data-n="5"] .vb-slot-go{ display:none }
  .vb-form{ grid-template-columns:1fr; gap:14px }
  .vb-actions{ flex-direction:column; align-items:stretch }
  .vb-btn{ width:100% }
  .vb .vb-note{ max-width:none }
  .vb .vb-picked-inline{ display:flex }
  .vb-pass-date{ width:84px }
  .vb-pass-d{ font-size:36px }
  .vb-pass-body{ padding:16px 16px }
  .vb .vb-when{ font-size:17px }
  .vb .vb-pass-time{ font-size:16px }
  .vb-done-head{ margin-bottom:18px }
  .vb-done .vb-big{ font-size:25px }
  .vb-pm + .vb-pm{ padding-left:0; margin-left:6px; border-left:0 }
  .vb .vb-pass-title{ display:none }
  .vb .vb-when{ margin-top:0 }
  .vb .vb-pass-meta{ gap:4px 10px }
  .vb-state{ padding:22px 0 6px }
  .vb-contactrow{ flex-direction:column; align-items:stretch }
  .vb-chip{ justify-content:center }
}
@media (max-width:360px){
  .vb-slot{ padding:0 12px; gap:4px }
  .vb-slot-t{ font-size:16px }
  .vb-slot-end{ font-size:13px }
  .vb-slot-go{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .vb-step,.vb-ticket,.vb-meta,.vb-pass,.vb-check,.vb-picked-inline{ transition:opacity .2s ease !important }
  .vb-step.vb-enter-fwd,.vb-step.vb-enter-back,.vb-pass.vb-pass-in,.vb-check.vb-check-in{ transform:none }
  .vb-ticket,.vb-aside.picked-on .vb-meta{ transform:none }
  .vb-day-ind,.vb-progress-line span,.vb-track{ transition:none }
  .vb-slots-in > *{ animation:vbFade .2s ease forwards; transform:none }
  @keyframes vbFade{ to{ opacity:1 } }
}