/* Circles: the map's language for lists of projects, shares and classes.
   Flat, soft colour; the project circle, its progress arc and its people on an
   orbit; slow, wide movement. Used by v11-circles.js (Projects), v10-team.js
   (Shared) and v10-class.js (Classes). */
:root{
  --vc-b1:#1e86c8; --vc-b2:#ed0f68; --vc-b3:#00b9ad; --vc-b4:#f6b33a;
  --vc-ok:#1f9d63; --vc-warn:#d9900f; --vc-bad:#d4483b; --vc-idea:#8a63d2; --vc-calm:#7d8fa3;
  --vc-ink:#10233a; --vc-mix:80%;
  --vc-surface:var(--surface,#fff); --vc-text:var(--text,#1b2d42); --vc-muted:var(--muted,#62768b);
  --vc-line:var(--line,#dfe7ee); --vc-line2:var(--line2,#ecf1f5);
  --vc-ease:cubic-bezier(.22,.7,.18,1); --vc-slow:.9s; --vc-glide:cubic-bezier(.16,.84,.3,1);
  --vc-shadow:0 1px 2px rgba(20,55,95,.04),0 10px 30px rgba(20,55,95,.07);
}
:root[data-theme="dark"],html.v-universe[data-tone=dark]{--vc-ink:#ffffff;--vc-mix:55%;--vc-shadow:0 1px 2px rgba(0,0,0,.2),0 10px 30px rgba(0,0,0,.28)}
.vc-root,#projectGrid.vc-root{display:block!important;grid-template-columns:none!important;columns:auto!important;gap:0!important}

/* ------------------------------------------------------------ tiles */
.vc-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:6px 0 16px}
.vc-tile{display:flex;align-items:center;gap:14px;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:16px;padding:13px 15px;
  background:color-mix(in srgb,var(--k) 4%,var(--vc-surface));border:1px solid color-mix(in srgb,var(--k) 22%,var(--vc-line));border-top:3px solid color-mix(in srgb,var(--k) 70%,var(--vc-surface));
  transition:transform .8s var(--vc-ease),box-shadow .8s,background .6s}
.vc-tile:hover{transform:translateY(-4px);box-shadow:0 12px 26px color-mix(in srgb,var(--k) 12%,transparent)}
.vc-tile.on{background:color-mix(in srgb,var(--k) 10%,var(--vc-surface));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--k) 60%,transparent)}
.vc-tile .dot{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:800;
  color:color-mix(in srgb,var(--k) var(--vc-mix),var(--vc-ink));background:color-mix(in srgb,var(--k) 9%,var(--vc-surface));border:2px solid color-mix(in srgb,var(--k) 45%,var(--vc-surface));transition:transform .9s var(--vc-ease)}
.vc-tile:hover .dot{transform:scale(1.18)}
.vc-tile b{display:block;font-size:13px}
.vc-tile small{display:block;color:var(--vc-muted);font-size:12px;margin-top:2px;line-height:1.35}
.vc-tile[disabled]{cursor:default}
.vc-tile[disabled]:hover{transform:none;box-shadow:none}

/* ------------------------------------------------------------ toolbar */
.vc-tools{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.vc-seg{position:relative;display:flex;gap:3px;padding:4px;border-radius:999px;background:var(--vc-surface);border:1px solid var(--vc-line)}
.vc-seg button{position:relative;z-index:1;border:0;background:none;padding:7px 12px;border-radius:999px;font:inherit;font-weight:700;font-size:12.5px;color:var(--vc-muted);display:inline-flex;gap:6px;align-items:center;cursor:pointer;transition:color .5s}
.vc-seg button i{font-style:normal;font-size:11px;min-width:20px;height:20px;padding:0 4px;border-radius:999px;display:inline-grid;place-items:center;background:color-mix(in srgb,var(--vc-muted) 10%,transparent)}
.vc-seg button.on{color:color-mix(in srgb,var(--sc) var(--vc-mix),var(--vc-ink))}
.vc-seg button.on i{background:var(--vc-surface)}
.vc-seg .slide{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;background:color-mix(in srgb,var(--sc,#0e67b3) 14%,var(--vc-surface));border:1px solid color-mix(in srgb,var(--sc,#0e67b3) 32%,transparent);transition:left .7s var(--vc-ease),width .7s var(--vc-ease),background .7s}
.vc-search{flex:1;min-width:190px;height:40px;border-radius:999px;border:1px solid var(--vc-line);background:var(--vc-surface);padding:0 16px;color:var(--vc-text);font:inherit;outline:none;transition:box-shadow .4s,border-color .4s}
.vc-search:focus{border-color:var(--accent,#0e67b3);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#0e67b3) 14%,transparent)}
.vc-pills{display:flex;gap:3px;padding:4px;border-radius:999px;background:var(--vc-surface);border:1px solid var(--vc-line)}
.vc-pills button{border:0;background:none;padding:0 12px;height:30px;border-radius:999px;color:var(--vc-muted);font:inherit;font-weight:700;font-size:12.5px;cursor:pointer;transition:background .4s,color .4s}
.vc-pills button.on{background:color-mix(in srgb,var(--vc-muted) 11%,transparent);color:var(--vc-text)}

/* ------------------------------------------------------------ rings as sections */
.vc-zone[hidden],.vc-focus[hidden],.vc-empty[hidden]{display:none!important}
.vc-done.gone{display:none}
.vc-done.dim,.vc-focus.dim{opacity:.3;filter:grayscale(.55)}
.vc-ring{display:flex;align-items:center;gap:12px;margin:8px 0 14px}
.vc-ring .lbl{font-size:10.5px;font-weight:800;letter-spacing:.14em;padding:5px 12px;border-radius:999px;
  color:color-mix(in srgb,var(--rc) var(--vc-mix),var(--vc-ink));background:color-mix(in srgb,var(--rc) 11%,var(--vc-surface));border:1px solid color-mix(in srgb,var(--rc) 28%,transparent)}
.vc-ring h2{margin:0;font-size:15px}
.vc-ring .count{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:color-mix(in srgb,var(--rc) var(--vc-mix),var(--vc-ink));border:1.5px solid color-mix(in srgb,var(--rc) 40%,var(--vc-line));background:color-mix(in srgb,var(--rc) 8%,var(--vc-surface))}
.vc-ring small{color:var(--vc-muted);font-size:12.5px}
.vc-ring .line{flex:1;height:0;border-top:1.5px dashed color-mix(in srgb,var(--rc) 35%,var(--vc-line))}
.vc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-bottom:30px}

/* ------------------------------------------------------------ the circle */
.vc-map{position:relative;height:214px;background:radial-gradient(ellipse 70% 80% at 50% 45%,color-mix(in srgb,var(--pc) 10%,var(--vc-surface)),var(--vc-surface) 72%)}
.vc-sphere{position:absolute;border-radius:50%;display:grid;place-items:center;text-align:center;padding:14px;overflow:hidden;
  background:color-mix(in srgb,var(--pc) 7%,var(--vc-surface));border:2px solid color-mix(in srgb,var(--pc) 55%,var(--vc-surface));
  box-shadow:0 0 0 7px color-mix(in srgb,var(--pc) 7%,transparent);transition:transform var(--vc-slow) var(--vc-ease)}
.vc-sphere.img{background-size:cover;background-position:center}
.vc-sphere.img .nm{background:color-mix(in srgb,var(--vc-surface) 86%,transparent);padding:3px 8px;border-radius:9px}
/* width:100%: a centred grid item shrinks to its text, so a one-word name was measured against its own width, shrank to 9px and split ("Handov|er", 14 Oct) */
.vc-sphere>div{min-width:0;max-width:100%;width:100%}
.vc-sphere .nm{font-weight:850;line-height:1.12;letter-spacing:-.01em;color:var(--vc-text);overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance;max-width:88%;margin:0 auto;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.vc-sphere .st{margin-top:6px;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--pc) 10%,var(--vc-surface));color:color-mix(in srgb,var(--pc) var(--vc-mix),var(--vc-ink))}
.vc-halo{position:absolute;border-radius:50%;pointer-events:none;border:2px solid var(--pc);opacity:0}
.vc-orbit{position:absolute;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--pc) 32%,transparent);pointer-events:none;transition:border-color .8s}
.vc-links{position:absolute;top:0;left:50%;pointer-events:none}
.vc-links line{stroke:color-mix(in srgb,var(--pc) 30%,var(--vc-line));stroke-width:1.3;transition:stroke .8s,stroke-width .8s}
.vc-arc{position:absolute;pointer-events:none;transform:rotate(-90deg);overflow:visible}
.vc-arc .base{fill:none;stroke:color-mix(in srgb,var(--pc) 14%,transparent);stroke-width:3.4}
.vc-arc .val{fill:none;stroke-width:3.4;stroke-linecap:round;transition:stroke-dashoffset 2.2s var(--vc-ease)}
.vc-pct{position:absolute;font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 8px;white-space:nowrap;
  color:color-mix(in srgb,var(--pc) var(--vc-mix),var(--vc-ink));background:color-mix(in srgb,var(--pc) 10%,var(--vc-surface));border:1px solid color-mix(in srgb,var(--pc) 32%,var(--vc-surface));transform:translateX(-50%)}
.vc-chip{position:absolute;transform:translateX(-50%);font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:999px;
  color:color-mix(in srgb,var(--pc) var(--vc-mix),var(--vc-ink));background:color-mix(in srgb,var(--pc) 12%,var(--vc-surface));border:1px solid color-mix(in srgb,var(--pc) 30%,var(--vc-surface))}
.vc-person{position:absolute;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;transform:translate(-50%,-50%);
  color:color-mix(in srgb,var(--hc) var(--vc-mix),var(--vc-ink));background:color-mix(in srgb,var(--hc) 15%,var(--vc-surface));border:1.5px solid color-mix(in srgb,var(--hc) 38%,var(--vc-surface));
  transition:transform var(--vc-slow) var(--vc-ease)}
.vc-person.more{--hc:var(--vc-calm);font-size:9.5px}
.vc-person:hover{transform:translate(-50%,-50%) scale(1.4);z-index:5}
.vc-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;font-size:11.5px;font-weight:600;color:var(--vc-text);
  background:var(--vc-surface);border:1px solid var(--vc-line);border-radius:10px;padding:5px 9px;box-shadow:var(--vc-shadow);opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;z-index:6}
.vc-tip small{display:block;color:var(--vc-muted);font-weight:500;font-size:10.5px}
.vc-person:hover .vc-tip{opacity:1;transform:translateX(-50%)}
/* quick actions: white circles with a coloured icon, travelling out of the circle */
.vc-qa{position:absolute;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:inherit;font-size:14px;font-weight:800;cursor:pointer;padding:0;
  color:var(--qc);background:var(--vc-surface);border:1.5px solid color-mix(in srgb,var(--qc) 35%,var(--vc-surface));box-shadow:0 2px 6px rgba(20,55,95,.06);
  transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;transition:transform var(--vc-slow) var(--vc-ease),opacity .6s,background .4s}
.vc-qa svg{width:15px;height:15px}
.vc-qa:hover{background:color-mix(in srgb,var(--qc) 10%,var(--vc-surface))}
/* The quick buttons sit on the card's left edge: their labels open to the RIGHT,
   over the card, so the card's edge never cuts them off (live test, 5 Oct). */
.vc-qa .vc-tip{bottom:auto;right:auto;left:calc(100% + 8px);top:50%;transform:translate(-4px,-50%)}
.vc-qa:hover .vc-tip,.vc-qa:focus-visible .vc-tip{opacity:1;transform:translate(0,-50%)}

/* ------------------------------------------------------------ the card */
.vc-card{position:relative;background:var(--vc-surface);border:1px solid var(--vc-line);border-radius:24px;box-shadow:var(--vc-shadow);overflow:hidden;cursor:pointer;color:var(--vc-text);
  transition:transform 1s var(--vc-glide),box-shadow 1s var(--vc-glide),border-color .8s,opacity .7s,filter .7s;
  animation:vc-rise 1.1s var(--vc-ease) backwards;animation-delay:calc(var(--i,0) * 110ms)}
@keyframes vc-rise{from{opacity:0;transform:translateY(34px) scale(.97)}}
.vc-card:hover,.vc-card:focus-visible{transform:translateY(-7px);border-color:color-mix(in srgb,var(--pc) 42%,var(--vc-line));box-shadow:0 26px 50px color-mix(in srgb,var(--pc) 13%,transparent)}
.vc-card:focus-visible{outline:2px solid color-mix(in srgb,var(--pc) 60%,transparent);outline-offset:3px}
.vc-card:hover .vc-sphere{transform:scale(1.16)}
.vc-card:hover .vc-halo{animation:vc-breathe 3s ease-out infinite}
.vc-card:hover .vc-orbit{animation:vc-spin 32s linear infinite;border-color:color-mix(in srgb,var(--pc) 45%,transparent)}
.vc-card:hover .vc-links line{stroke:color-mix(in srgb,var(--pc) 70%,var(--vc-line));stroke-width:2}
.vc-card:hover .vc-qa,.vc-card:focus-within .vc-qa{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(1)}
.vc-card:hover .vc-qa:nth-of-type(2){transition-delay:.06s}
.vc-card:hover .vc-qa:nth-of-type(3){transition-delay:.12s}
@keyframes vc-breathe{0%{transform:scale(1);opacity:.35}75%{transform:scale(1.6);opacity:0}100%{opacity:0}}
@keyframes vc-spin{to{transform:rotate(360deg)}}
.vc-card.dim{opacity:.3;filter:grayscale(.55)}
.vc-card.gone{display:none}
.vc-card.later .vc-sphere,.vc-card.paused .vc-sphere{border-style:dashed}
.vc-card.later{background:color-mix(in srgb,var(--pc) 2%,var(--vc-surface))}
.vc-card.paused{background:color-mix(in srgb,var(--vc-calm) 4%,var(--vc-surface))}
.vc-tl{position:absolute;left:14px;top:12px;display:flex;gap:6px;z-index:2;flex-wrap:wrap;max-width:60%}
.vc-tr{position:absolute;right:14px;top:12px;z-index:2}
.vc-state{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap;
  color:color-mix(in srgb,var(--hc) var(--vc-mix),var(--vc-ink));background:color-mix(in srgb,var(--hc) 11%,var(--vc-surface));border:1px solid color-mix(in srgb,var(--hc) 28%,transparent)}
.vc-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hc)}
.vc-body{padding:4px 18px 16px}
.vc-sum{margin:0;color:var(--vc-muted);font-size:13px;line-height:1.5;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
.vc-nx{position:relative;display:flex;gap:10px;align-items:center;margin-top:12px;padding:9px 12px 9px 9px;border-radius:14px;font-weight:650;font-size:12.5px;line-height:1.4;
  background:color-mix(in srgb,var(--pc) 6%,var(--vc-surface));border:1px solid color-mix(in srgb,var(--pc) 22%,var(--vc-line));transition:background .6s,border-color .6s}
.vc-nx .lbl{flex:1;min-width:0}
.vc-nx .lbl small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--pc) var(--vc-mix),var(--vc-ink))}
.vc-nx .txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vc-nx.none{width:100%;text-align:left;font:inherit;font-size:12.5px;cursor:pointer;background:none;border-style:dashed;color:var(--vc-muted);font-weight:600}
.vc-nx.none:hover{border-color:color-mix(in srgb,var(--pc) 50%,var(--vc-line));color:var(--vc-text)}
.vc-flag,.vc-tick{position:relative;flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;padding:0;font:inherit;font-size:13px;font-weight:900}
.vc-flag{color:color-mix(in srgb,var(--pc) var(--vc-mix),var(--vc-ink));background:color-mix(in srgb,var(--pc) 12%,var(--vc-surface))}
.vc-flag svg{width:12px;height:12px}
.vc-tick{cursor:pointer;color:transparent;background:var(--vc-surface);border:2px solid color-mix(in srgb,var(--pc) 55%,var(--vc-line));transition:all .7s var(--vc-ease)}
.vc-tick:hover{color:color-mix(in srgb,var(--pc) 60%,transparent);border-color:var(--pc);transform:scale(1.1)}
.vc-nx.done{background:color-mix(in srgb,var(--vc-ok) 10%,var(--vc-surface));border-color:color-mix(in srgb,var(--vc-ok) 35%,var(--vc-line))}
.vc-nx.done .vc-tick{background:var(--vc-ok);border-color:var(--vc-ok);color:#fff}
.vc-nx.done .txt{text-decoration:line-through;color:var(--vc-muted)}
.vc-burst{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;animation:vc-pop 1.2s var(--vc-ease) forwards}
@keyframes vc-pop{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.vc-foot{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.vc-foot .end{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--vc-muted)}
.vc-fact{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--vc-surface);border:1px solid var(--vc-line);color:var(--vc-muted);white-space:nowrap}
.vc-fact svg{width:13px;height:13px}
.vc-fact.soon{color:color-mix(in srgb,var(--vc-warn) 85%,var(--vc-ink));border-color:color-mix(in srgb,var(--vc-warn) 35%,var(--vc-line));background:color-mix(in srgb,var(--vc-warn) 8%,var(--vc-surface))}
.vc-fact.late{color:color-mix(in srgb,var(--vc-bad) 85%,var(--vc-ink));border-color:color-mix(in srgb,var(--vc-bad) 32%,var(--vc-line));background:color-mix(in srgb,var(--vc-bad) 7%,var(--vc-surface))}
.vc-fact.idea{color:color-mix(in srgb,var(--vc-idea) var(--vc-mix),var(--vc-ink));border-color:color-mix(in srgb,var(--vc-idea) 30%,var(--vc-line));background:color-mix(in srgb,var(--vc-idea) 6%,var(--vc-surface))}
.vc-fact.team{color:color-mix(in srgb,var(--vc-b1) var(--vc-mix),var(--vc-ink));border-color:color-mix(in srgb,var(--vc-b1) 25%,var(--vc-line));background:color-mix(in srgb,var(--vc-b1) 7%,var(--vc-surface))}
.vc-fact.pink{color:color-mix(in srgb,var(--vc-b2) var(--vc-mix),var(--vc-ink));border-color:color-mix(in srgb,var(--vc-b2) 28%,var(--vc-line));background:color-mix(in srgb,var(--vc-b2) 6%,var(--vc-surface))}
.vc-fact.btn{cursor:pointer;font:inherit;font-size:11.5px;font-weight:700}
.vc-fact.btn:hover{border-color:color-mix(in srgb,var(--pc) 45%,var(--vc-line))}

/* ------------------------------------------------------------ the spotlight */
.vc-focus{position:relative;display:grid;grid-template-columns:340px minmax(0,1fr);align-items:center;gap:6px;border-radius:26px;margin-bottom:30px;overflow:hidden;cursor:pointer;color:var(--vc-text);
  background:radial-gradient(500px 300px at 18% 50%,color-mix(in srgb,var(--pc) 12%,transparent),transparent 70%),linear-gradient(110deg,color-mix(in srgb,var(--pc) 7%,var(--vc-surface)),var(--vc-surface) 70%);
  border:1px solid color-mix(in srgb,var(--pc) 24%,var(--vc-line));box-shadow:var(--vc-shadow);
  transition:transform 1s var(--vc-glide),box-shadow 1s var(--vc-glide),border-color .8s;animation:vc-rise 1.1s var(--vc-ease) backwards}
.vc-focus:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--pc) 40%,var(--vc-line));box-shadow:0 28px 54px color-mix(in srgb,var(--pc) 14%,transparent)}
.vc-focus:hover .vc-sphere{transform:scale(1.08)}
.vc-focus .vc-map{height:300px;background:none}
.vc-focus .vc-orbit{animation:vc-spin 60s linear infinite}
.vc-focus .vc-halo{animation:vc-breathe 4.8s ease-out infinite}
.vc-focus .copy{padding:26px 30px 26px 0}
.vc-focus .k{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px;
  color:color-mix(in srgb,var(--pc) var(--vc-mix),var(--vc-ink));background:color-mix(in srgb,var(--pc) 11%,var(--vc-surface));border:1px solid color-mix(in srgb,var(--pc) 28%,transparent)}
.vc-focus h2{margin:10px 0 6px;font-size:28px;letter-spacing:-.02em}
.vc-focus p{margin:0;color:var(--vc-muted);font-size:15px;line-height:1.5;max-width:560px}
.vc-focus .vc-nx{max-width:560px;font-size:13.5px}
.vc-focus .facts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.vc-open{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 18px;margin-top:16px;border-radius:999px;font:inherit;font-weight:800;font-size:13px;cursor:pointer;
  color:color-mix(in srgb,var(--pc) var(--vc-mix),var(--vc-ink));background:color-mix(in srgb,var(--pc) 12%,var(--vc-surface));border:1px solid color-mix(in srgb,var(--pc) 32%,var(--vc-surface));transition:transform .6s var(--vc-ease),background .6s}
.vc-open:hover{background:color-mix(in srgb,var(--pc) 18%,var(--vc-surface));transform:translateY(-3px)}

/* ------------------------------------------------------------ list view */
.vc-list{display:grid;gap:10px;margin-bottom:30px}
.vc-row{position:relative;display:grid;grid-template-columns:84px minmax(0,1.25fr) minmax(0,1.5fr) auto;gap:18px;align-items:center;padding:12px 20px 12px 14px;border-radius:20px;cursor:pointer;color:var(--vc-text);
  background:var(--vc-surface);border:1px solid var(--vc-line);box-shadow:var(--vc-shadow);
  transition:transform 1s var(--vc-glide),box-shadow 1s var(--vc-glide),border-color .8s,opacity .7s,filter .7s;animation:vc-rise 1s var(--vc-ease) backwards;animation-delay:calc(var(--i,0) * 70ms)}
.vc-row:hover,.vc-row:focus-visible{transform:translateX(7px);border-color:color-mix(in srgb,var(--pc) 42%,var(--vc-line));box-shadow:0 16px 34px color-mix(in srgb,var(--pc) 12%,transparent)}
.vc-row.dim{opacity:.3;filter:grayscale(.55)}
.vc-row.gone{display:none}
.vc-mini{position:relative;width:72px;height:72px}
.vc-mini .vc-sphere{inset:9px;padding:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 7%,transparent)}
.vc-mini .vc-sphere b{font-size:13px;font-weight:850;color:color-mix(in srgb,var(--pc) var(--vc-mix),var(--vc-ink))}
.vc-mini .vc-arc{left:0;top:0}
.vc-row:hover .vc-mini .vc-sphere{transform:scale(1.1)}
.vc-row.later .vc-sphere,.vc-row.paused .vc-sphere{border-style:dashed}
.vc-row h3{margin:0;font-size:15px;letter-spacing:-.01em;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vc-row h3 .vc-state{font-size:10.5px;padding:3px 8px}
.vc-row h3 .tag{font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:2px 8px;border-radius:999px;color:color-mix(in srgb,var(--pc) var(--vc-mix),var(--vc-ink));background:color-mix(in srgb,var(--pc) 12%,var(--vc-surface))}
.vc-row .vc-sum{text-align:left;min-height:0;margin-top:3px;-webkit-line-clamp:1}
.vc-row .vc-nx{margin:0}
.vc-row .vc-foot{margin:0;flex-wrap:nowrap;justify-content:flex-end}

/* ------------------------------------------------------------ finished: a shelf */
.vc-shelf{display:flex;gap:22px;flex-wrap:wrap;padding:20px 22px;background:var(--vc-surface);border:1px solid var(--vc-line);border-radius:24px;box-shadow:var(--vc-shadow);margin-bottom:30px}
.vc-done{display:flex;align-items:center;gap:12px;min-width:220px;cursor:pointer;border-radius:16px;padding:4px 10px 4px 4px;transition:background .6s}
.vc-done:hover{background:color-mix(in srgb,var(--pc) 6%,transparent)}
.vc-done .mini{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:900;
  color:color-mix(in srgb,var(--pc) var(--vc-mix),var(--vc-ink));background:color-mix(in srgb,var(--pc) 10%,var(--vc-surface));border:2px solid color-mix(in srgb,var(--pc) 45%,var(--vc-surface));transition:transform var(--vc-slow) var(--vc-ease)}
.vc-done:hover .mini{transform:scale(1.15)}
.vc-done b{display:block;font-size:13.5px}
.vc-done small{color:var(--vc-muted);font-size:12px}
.vc-empty{padding:28px;text-align:center;color:var(--vc-muted);background:var(--vc-surface);border:1px dashed var(--vc-line);border-radius:20px;margin-bottom:24px}
.vc-empty > b:first-child{display:block;color:var(--vc-text);font-size:15px;margin-bottom:4px}
.vc-empty .btn{margin-top:12px}

/* ------------------------------------------------------------ calm motion settings */
html[data-motion=off] .vc-card,html[data-motion=off] .vc-row,html[data-motion=off] .vc-focus{animation:none}
html[data-motion=off] .vc-orbit,html[data-motion=off] .vc-halo{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .vc-card,.vc-row,.vc-focus,.vc-orbit,.vc-halo,.vc-burst{animation:none!important}
  .vc-card,.vc-row,.vc-focus,.vc-sphere,.vc-qa,.vc-tile,.vc-arc .val{transition:none!important}
}
@media (hover:none){.vc-qa{display:none}}
@media (max-width:1100px){.vc-row{grid-template-columns:84px minmax(0,1fr) auto}.vc-row .vc-nx{display:none}}
@media (max-width:900px){.vc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.vc-focus{grid-template-columns:1fr}.vc-focus .copy{padding:0 22px 22px}}
@media (max-width:620px){.vc-row{grid-template-columns:72px minmax(0,1fr)}.vc-row .vc-foot{grid-column:2;justify-content:flex-start;flex-wrap:wrap}.vc-tiles{gap:8px}.vc-tile{padding:10px 12px}.vc-tile .dot{width:38px;height:38px;font-size:16px}}

/* quiet redraws (after a save or a live update): no arrival movement */
.vc-still .vc-card,.vc-still .vc-row,.vc-still .vc-focus,.vc-still.vc-focus{animation:none}
.vc-still .vc-arc .val{transition:none}
/* narrow screens: the stage switch scrolls within itself, never the page */
.vc-seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.vc-seg::-webkit-scrollbar{display:none}
.vc-seg button{flex:none}
.vc-root,.vc-tiles,.vc-tools{min-width:0;max-width:100%}
@media (max-width:620px){.vc-focus .vc-map{height:260px;overflow:hidden}.vc-grid{grid-template-columns:minmax(0,1fr)}.vc-card .vc-map{overflow:hidden}}

/* Cards in a row share one height: keep the buttons and facts on the bottom line,
   whether or not the card has a summary or next action (live test, 5 Oct). */
.vc-card{display:flex;flex-direction:column}
.vc-card>.vc-body{flex:1;display:flex;flex-direction:column}
.vc-card>.vc-body>.vc-foot{margin-top:auto;padding-top:12px}