/* The living logo and its card (4 Nov 2026). See vx-mark.js and vx-wave.js. */
.vxm{display:block;width:100%;height:100%;overflow:visible;-webkit-user-select:none;user-select:none}
.vxm .vxm-hit{touch-action:none;cursor:grab}
.vxm .vxm-hit:active{cursor:grabbing}
.vxm .vxm-hub{cursor:pointer;touch-action:manipulation}
.vxm text{font:700 4px Outfit,ui-sans-serif,system-ui,sans-serif;fill:currentColor;opacity:.6}

/* ---- the small logos, in the menu and the bar. They take the old picture's place exactly. */
html body .vxm-btn{-webkit-appearance:none;appearance:none;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0;min-height:0!important;min-width:0!important;
  position:relative;display:block;flex:none;cursor:pointer;border-radius:50%;color:inherit;transform:none}
html body .vxm-btn::before{content:"";position:absolute;inset:-7px}             /* a comfortable place to tap */
/* the menu's logo stands on its own: bigger, beside the wordmark rather than inside it (5 Nov) */
.vxm-brandrow{display:flex;align-items:center;gap:6px}
.vxm-brandrow .brand-identity{flex:1 1 auto;min-width:0;width:auto;margin:-4px 0}
html body .vxm-btn.vxm-side{width:44px;height:44px;margin:0}
/* room for the word and the badge at the menu's usual width: the word never gets squeezed into the badge */
#sidebar .vxm-brandrow .brand-wordline{gap:0}
#sidebar .vxm-brandrow .brand-wordline strong{flex:none}
#sidebar .vxm-brandrow .brand-pro{flex:none;margin-left:7px}
#sidebar .vxm-brandrow .brand-wordmark{margin-left:0;margin-right:0}
#sidebar .vxm-brandrow .brand-title{margin-left:0;padding-left:0}
/* its own hover: a soft circle round the logo only */
html body .vxm-btn{transition:background-color .5s cubic-bezier(.16,.84,.3,1),box-shadow .5s cubic-bezier(.16,.84,.3,1)}
@media (hover:hover){
  html body .vxm-btn:hover{background-color:color-mix(in srgb,var(--v-accent,#1E86C8) 16%,transparent)!important;
    box-shadow:0 0 0 5px color-mix(in srgb,var(--v-accent,#1E86C8) 16%,transparent)!important}
}
.vxm-btn:focus-visible{outline:2px solid var(--v-accent,#1E86C8);outline-offset:3px}
/* something is waiting: in the one corner of the mark with no dot of its own */
html body .vxm-btn.has-due::after{content:"";position:absolute;right:-3px;bottom:-3px;width:10px;height:10px;border-radius:50%;background:#e03131;
  box-shadow:0 0 0 2px var(--surface,#fff);pointer-events:none;animation:vxm-due 2.4s cubic-bezier(.16,.84,.3,1) 3}
html body .vxm-btn.vxm-side.has-due::after{right:-3px;bottom:-3px;width:12px;height:12px}
html body .vxm-btn.vxm-top.has-due::after{right:-5px;bottom:-4px;width:8px;height:8px}
@keyframes vxm-due{from{box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 2px rgba(224,49,49,.55)}to{box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 13px rgba(224,49,49,0)}}
@media (prefers-reduced-motion:reduce){html body .vxm-btn.has-due::after{animation:none}}

/* ---- the card, with the logo looking over its top edge. Under any window (100). */
.vxw{position:fixed;right:28px;bottom:28px;width:360px;max-width:calc(100vw - 24px);z-index:95;box-sizing:border-box;color:var(--text,#16233a);
  opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.16,.84,.3,1),transform .9s cubic-bezier(.16,.84,.3,1)}
.vxw.is-in{opacity:1;transform:none}
.vxw.is-out{opacity:0;transform:translateY(14px);transition-duration:.6s;pointer-events:none}
.vxw.is-still,.vxw.is-still .vxw-mark{transition:none!important}
.vxw-mark{position:absolute;right:26px;top:-62px;width:86px;height:86px;z-index:0;color:var(--muted,#5b6d7e);
  transform:translateY(70px);transition:transform 1.1s cubic-bezier(.3,1.25,.5,1) .15s}
.vxw.is-in .vxw-mark{transform:none}
.vxw.is-out .vxw-mark{transform:translateY(70px);transition:transform .45s cubic-bezier(.16,.84,.3,1)}
.vxw-card{position:relative;z-index:1;border-radius:20px;padding:18px 18px 12px;background:var(--surface,#fff);
  box-shadow:0 24px 60px -18px rgba(16,30,60,.45),0 0 0 1px color-mix(in srgb,var(--text,#16233a) 10%,transparent)}
.vxw-body{max-height:min(66vh,520px);overflow-y:auto;overflow-x:hidden;padding-right:2px}
.vxw-x{position:absolute;right:8px;top:8px;z-index:2;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:none;cursor:pointer;
  font:400 22px/1 system-ui,sans-serif;color:var(--muted,#5b6d7e)}
.vxw-x:hover{background:color-mix(in srgb,var(--text,#16233a) 8%,transparent)}
.vxw p{margin:0}
.vxw-kick{font-size:13px;line-height:1.35;font-weight:600;color:var(--muted,#5b6d7e);padding-right:30px;overflow-wrap:anywhere}
.vxw-title{font-size:17px;line-height:1.3;font-weight:750;margin-top:2px!important;padding-right:26px;overflow-wrap:anywhere}
.vxw-sub{font-size:14px;line-height:1.4;color:var(--muted,#5b6d7e);margin-top:4px!important;display:flex;flex-wrap:wrap;gap:2px 12px;overflow-wrap:anywhere}
.vxw-proj{display:inline-flex;align-items:baseline;gap:6px;min-width:0;overflow-wrap:anywhere}
.vxw-dot{flex:none;width:9px;height:9px;border-radius:50%;display:inline-block;align-self:center}
.vxw-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
html body .vxw-btn{font:inherit;font-size:14.5px;font-weight:650;min-height:40px;padding:8px 14px;border-radius:12px;border:0;cursor:pointer;
  color:var(--text,#16233a);background:color-mix(in srgb,var(--v-accent,#1E86C8) 14%,var(--surface,#fff));box-shadow:none;width:auto}
html body .vxw-btn.primary{color:var(--v-accent-ink,#fff);background:var(--v-accent,#1E86C8);font-weight:750}
html body .vxw-btn.vxw-link{background:none;min-height:34px;padding:4px 2px;font-size:13.5px;font-weight:600;color:var(--v-accent,#1E86C8);text-decoration:underline;text-underline-offset:2px;border-radius:6px}
.vxw-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px;margin-top:6px}
.vxw-next{order:2}
.vxw-undo{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13.5px;font-weight:600;color:var(--muted,#5b6d7e)}
.vxw-form{margin-top:8px}
.vxw-ticks{display:grid;gap:1px}
.vxw-tick{display:flex;gap:10px;align-items:flex-start;padding:7px 4px;border-radius:9px;cursor:pointer;margin:0;font-weight:400}
.vxw-tick:hover{background:color-mix(in srgb,var(--text,#16233a) 5%,transparent)}
html body .vxw-tick input{flex:none;width:19px!important;height:19px!important;min-height:0;margin:1px 0 0;padding:0;accent-color:var(--v-accent,#1E86C8)}
.vxw-tick span{display:grid;min-width:0}
.vxw-tick b{font-size:14.5px;line-height:1.3;font-weight:650}
.vxw-tick small{font-size:12.5px;line-height:1.3;color:var(--muted,#5b6d7e)}
.vxw-note{font-size:12.5px;line-height:1.35;color:var(--muted,#5b6d7e);margin:10px 0 6px!important}
@media (max-width:700px){
  .vxw{left:12px;right:12px;width:auto;max-width:none;bottom:calc(66px + env(safe-area-inset-bottom))}
  .vxw-body{max-height:calc(100dvh - 240px)}
  .vxw-mark{width:76px;height:76px;top:-54px;right:22px}
}
@media (prefers-reduced-motion:reduce){.vxw,.vxw-mark{transition:none}.vxw{transform:none}.vxw-mark{transform:none}}
@media print{.vxw{display:none!important}}
.presentation-mode .vxw{display:none}

/* ---- sign-in: the logo at the top of the card */
.vxm-auth{width:84px;height:84px;margin:6px 0 14px 4px;color:#5b6d7e}
/* ---- landing: the end of the story */
.vxm-end{position:absolute;left:50%;top:0;transform:translateX(-50%);width:clamp(84px,11vw,130px);aspect-ratio:1;pointer-events:auto}
.vxm-end[hidden]{display:none}
.vxm-brand{display:inline-block;width:30px;height:30px;flex:none;vertical-align:middle}