/* ChimpVibe front-page and game-tree-page components (Design tab only). Uses tokens.css only: no raw colours, sizes from tokens.
   Each state also has an .is-* class so the specimen pages can show it without a pointer. */

/* ---------- buttons ---------- */
.cv-btn{appearance:none;border:0;margin:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font:var(--weight-regular) var(--text-control)/1 var(--font-display);letter-spacing:var(--tracking-display);
  height:47px;padding:0 var(--space-5);border-radius:var(--radius-cap);
  background:var(--material-primary);color:var(--color-on-primary);box-shadow:var(--elevation-cap-primary);
  margin-bottom:var(--size-floor);
  transition:transform var(--duration-sink) var(--ease-standard),box-shadow var(--duration-sink) var(--ease-standard),background var(--duration-fade) var(--ease-standard)}
.cv-btn:hover,.cv-btn.is-hover{transform:translateY(-2px);box-shadow:var(--elevation-cap-primary-hover)}
.cv-btn:active,.cv-btn.is-active{transform:translateY(var(--lift-press));box-shadow:var(--elevation-cap-pressed);transition-duration:var(--duration-press)}
.cv-btn:focus-visible,.cv-btn.is-focus{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-btn:disabled,.cv-btn.is-disabled{cursor:not-allowed;transform:none;background:var(--material-disabled);color:var(--color-disabled-text);box-shadow:var(--elevation-cap-disabled)}
.cv-btn--take{background:var(--material-take);color:var(--color-on-take);box-shadow:var(--elevation-cap-take)}
.cv-btn--take:hover,.cv-btn--take.is-hover{box-shadow:var(--elevation-cap-take-hover)}
.cv-btn--take:active,.cv-btn--take.is-active{box-shadow:0 0 0 var(--color-take-edge)}

/* secondary (quiet): flat tone, no floor */
.cv-btn--quiet{font:var(--weight-medium) var(--text-control-quiet)/1 var(--font-body);letter-spacing:0;
  height:46px;padding:0 var(--space-5) 0 20px;border-radius:var(--radius-md);margin-bottom:0;
  background:var(--material-raised);color:var(--color-primary-strong);box-shadow:none}
.cv-btn--quiet:hover,.cv-btn--quiet.is-hover{transform:translateY(-2px);background:var(--material-raised-hover);box-shadow:none}
.cv-btn--quiet:active,.cv-btn--quiet.is-active{transform:none;background:var(--material-low);box-shadow:none}
.cv-btn--quiet:disabled,.cv-btn--quiet.is-disabled{background:var(--material-low);color:var(--color-disabled-text);box-shadow:none}
.cv-btn--small{height:38px;padding:0 var(--space-4);border-radius:var(--radius-sm);font-size:var(--text-small)}
.cv-btn__arrow{width:14px;height:14px;flex:none;fill:currentColor}

/* ghost / text button: mint-bright label on a 2px mint-deep bar */
.cv-link{appearance:none;background:none;border:0;padding:0 0 4px;margin:0;cursor:pointer;text-decoration:none;
  font:var(--weight-medium) var(--text-small)/1.2 var(--font-body);color:var(--color-link);
  box-shadow:inset 0 -2px 0 var(--color-link-underline);transition:box-shadow var(--duration-quick) var(--ease-standard),color var(--duration-quick) var(--ease-standard)}
.cv-link:hover,.cv-link.is-hover{box-shadow:inset 0 -2px 0 var(--color-primary)}
.cv-link:active,.cv-link.is-active{color:var(--color-primary);box-shadow:inset 0 -2px 0 var(--color-primary)}
.cv-link:focus-visible,.cv-link.is-focus{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:var(--radius-xs)}
.cv-link:disabled,.cv-link.is-disabled{cursor:not-allowed;color:var(--color-disabled-text);box-shadow:inset 0 -2px 0 var(--color-surface-raised)}

/* ---------- tag, dots, counts, chips ---------- */
.cv-tag{appearance:none;border:0;margin:0;cursor:copy;display:inline-flex;align-items:center;
  font:var(--weight-regular) 18px/1 var(--font-display);letter-spacing:var(--tracking-tag);
  padding:.66em .9em;border-radius:var(--radius-tag);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;background:var(--material-tag);color:var(--color-take);
  transition:background var(--duration-press) var(--ease-standard)}
.cv-tag:hover,.cv-tag.is-hover{background:var(--material-tag-hover)}
.cv-tag:focus-visible,.cv-tag.is-focus{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-tag--sm{font-size:var(--text-small)}
.cv-tag--lg{font-size:20px}

.cv-dot{display:inline-block;width:9px;height:9px;border-radius:var(--radius-pill);background:var(--color-idle);flex:none}
.cv-dot--live{background:var(--color-live);box-shadow:0 0 0 4px var(--color-live-halo)}

.cv-count{display:inline-flex;align-items:center;gap:6px;font:var(--weight-regular) var(--text-card-title)/1 var(--font-display);color:var(--color-text)}
.cv-count svg{width:18px;height:18px;fill:currentColor}

.cv-chip{display:inline-flex;align-items:center;gap:var(--space-2);height:44px;padding:0 var(--space-4);border-radius:var(--radius-pill);
  background:var(--material-low);color:var(--color-text);font:var(--weight-regular) 20px/1 var(--font-display);border:0;cursor:pointer;
  transition:background var(--duration-fade) var(--ease-standard)}
.cv-chip:hover,.cv-chip.is-hover{background:var(--material-low-hover)}
.cv-chip[aria-pressed="true"],.cv-chip.is-selected{background:var(--color-primary-tint);color:var(--color-primary-strong)}
.cv-chip:focus-visible,.cv-chip.is-focus{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

.cv-eyebrow{font:var(--weight-semibold) var(--text-eyebrow)/1 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-primary)}
.cv-eyebrow--arcade{font:var(--weight-regular) 18px/1 var(--font-display);letter-spacing:.17em;color:var(--color-accent)}

.cv-progress{display:flex;gap:6px;align-items:center}
.cv-progress i{width:9px;height:9px;border-radius:var(--radius-pill);background:var(--color-primary-edge)}
.cv-progress i.on{background:var(--color-primary)}
.cv-progress i.open{background:var(--color-surface-raised)}

/* ---------- game card ---------- */
.cv-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);align-content:start;min-width:0;color:inherit;text-decoration:none}
.cv-card__capture{grid-column:1/-1;display:block;width:100%;aspect-ratio:var(--ratio-capture);object-fit:cover;border-radius:var(--radius-lg);
  background:var(--color-surface-sunken);box-shadow:var(--elevation-capture);margin-bottom:var(--space-2);
  transition:transform var(--duration-hover) var(--ease-standard)}
.cv-card:hover .cv-card__capture,.cv-card.is-hover .cv-card__capture{transform:translateY(var(--lift-hover))}
.cv-card:focus-visible,.cv-card.is-focus{outline:none}
.cv-card:focus-visible .cv-card__capture,.cv-card.is-focus .cv-card__capture{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-card__name{display:flex;align-items:center;gap:10px;min-width:0;margin:0;font:var(--weight-regular) var(--text-card-title)/1.15 var(--font-display);letter-spacing:0;color:var(--color-text)}
.cv-card__name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-card__author{font:var(--weight-regular) var(--text-meta)/1.3 var(--font-body);color:var(--color-text-muted);padding-left:19px}
.cv-card__end{justify-self:end;align-self:center}
.cv-card__tag{grid-column:1/-1;margin-top:var(--space-2)}
.cv-card--slot .cv-card__capture{display:grid;place-items:center;color:var(--color-text-muted);font:var(--weight-regular) var(--text-card-title)/1 var(--font-display)}
.cv-card--slot .cv-card__name{color:var(--color-text-muted)}

/* grid: captures in columns, gap from the spacing scale */
.cv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:var(--space-6) var(--space-5)}

/* ---------- Specimen Wall (front page, default): capture with its tree beside it, 3 columns ---------- */
.cv-wall{display:grid;grid-template-columns:repeat(var(--wall-columns),minmax(0,1fr));gap:var(--space-5) var(--space-6)}
.cv-wall__item{position:relative;min-width:0}
.cv-wall__item .cv-card{grid-template-columns:minmax(0,1fr) var(--size-wall-tree);column-gap:var(--space-3)}
.cv-wall__item .cv-card__capture{grid-column:1;grid-row:1}
.cv-wall__item .cv-card__name{grid-column:1;grid-row:2}
.cv-wall__item .cv-card__author{grid-column:1;grid-row:3}
.cv-wall__item .cv-count.cv-card__end{grid-column:2;grid-row:2}
.cv-wall__item .cv-card__end:last-child{grid-column:2;grid-row:3}
/* the game's real tree (site code, unchanged): only sized and placed here; every other one leans like the site's index panes */
.cv-tree,.cv-wall__tree,.cv-orchard__tree{display:block;object-fit:contain;object-position:50% 100%}
.cv-wall__tree{position:absolute;top:0;right:0;width:var(--size-wall-tree);aspect-ratio:1}
.cv-wall__item:nth-child(3n+2) .cv-wall__tree{transform:rotate(-5deg)}
.cv-wall__item:nth-child(3n) .cv-wall__tree{transform:rotate(4deg)}
@media (max-width:900px){.cv-wall{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}}

/* ---------- Hi-Score view (separate ranking page; wrap it in data-view="hi-score") ---------- */
.cv-eyebrow--accent{font:var(--weight-regular) var(--text-eyebrow-accent)/1 var(--font-display);letter-spacing:var(--tracking-eyebrow-accent);color:var(--color-accent)}

/* metric switcher: a tablist of flat pills; the selected metric is mint on a mint tint (no coin: it is not something to take) */
.cv-metrics{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:var(--space-1);border-radius:var(--radius-pill);background:var(--color-surface-sunken);width:max-content;max-width:100%}
.cv-metric{appearance:none;border:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2);
  height:var(--size-tab);padding:0 var(--space-5);border-radius:var(--radius-pill);background:transparent;
  font:var(--weight-medium) var(--text-control-quiet)/1 var(--font-body);color:var(--color-text-muted);
  transition:background var(--duration-fade) var(--ease-standard),color var(--duration-fade) var(--ease-standard)}
.cv-metric svg{width:18px;height:18px;fill:currentColor;flex:none}
.cv-metric:hover,.cv-metric.is-hover{background:var(--color-surface);color:var(--color-text)}
.cv-metric[aria-selected="true"],.cv-metric.is-selected{background:var(--color-primary-tint);color:var(--color-primary-strong)}
.cv-metric:active,.cv-metric.is-active{background:var(--color-surface-raised)}
.cv-metric:focus-visible,.cv-metric.is-focus{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-metric:disabled,.cv-metric.is-disabled{cursor:not-allowed;background:transparent;color:var(--color-disabled-text);opacity:.6}
.cv-metric__added{font:var(--weight-medium) var(--text-eyebrow)/1 var(--font-body);color:var(--color-accent)}

/* ranking table: header row + ranked rows share one column grid */
.cv-rank{display:grid;gap:var(--space-2)}
.cv-rank[hidden]{display:none}
.cv-row,.cv-row__head{display:grid;grid-template-columns:48px 144px minmax(0,1fr) 120px 96px 104px 128px;gap:var(--space-4);align-items:center;padding-right:var(--space-6)}
.cv-row{min-height:var(--size-row);border-radius:var(--radius-lg);background:var(--material-low);
  transition:background var(--duration-fade) var(--ease-standard)}
.cv-row:hover,.cv-row.is-hover,.cv-row.is-selected{background:var(--material-low-hover)}
.cv-row:focus-visible,.cv-row.is-focus{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-row__rank{font:var(--weight-regular) var(--text-rank)/1 var(--font-display);color:var(--color-text-muted);text-align:right}
.cv-row--first .cv-row__rank{color:var(--color-text)}
.cv-row__capture{width:144px;height:90px;object-fit:cover;border-radius:var(--radius-card)}
.cv-row__tree{display:grid;place-items:center;width:var(--size-row);height:var(--size-row);padding:var(--space-1);border-radius:var(--radius-lg);background:var(--material-raised)}
.cv-row__tree .cv-tree{width:100%;height:100%}
.cv-row .cv-count{font-size:var(--text-row-count)}
.cv-row .cv-count--minor{font-size:var(--text-row-count-minor)}
.cv-row__when{font:var(--weight-regular) var(--text-lead)/1 var(--font-display);color:var(--color-text)}
.cv-row__head{padding-block:var(--space-2);font:var(--weight-regular) var(--text-small)/1 var(--font-body);color:var(--color-text-muted)}
.cv-row__head > :first-child{text-align:right}
/* the column the list is ranked by: ink label with a mint bar under it */
.cv-row__head .is-sorted{color:var(--color-text);font-weight:var(--weight-medium);box-shadow:inset 0 -2px 0 var(--color-primary);padding-bottom:var(--space-1);justify-self:start}
/* loading: flat placeholder blocks in the row's own grid */
.cv-row--loading .cv-skel{display:block;height:18px;border-radius:var(--radius-xs);background:var(--color-surface)}
.cv-row--loading .cv-row__capture,.cv-row--loading .cv-row__tree{background:var(--color-surface)}
@media (prefers-reduced-motion:no-preference){.cv-row--loading .cv-skel{animation:cv-pulse var(--duration-glow) var(--ease-standard) infinite alternate}}
@keyframes cv-pulse{to{background:var(--color-surface-raised)}}
/* empty: no game scores on this metric yet */
.cv-rank-empty{display:grid;justify-items:start;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface-sunken)}
.cv-rank-empty__title{margin:0;font:var(--weight-regular) var(--text-lead)/1.2 var(--font-display);color:var(--color-text)}
.cv-rank-empty p{margin:0;color:var(--color-text-muted);max-width:52ch}
.cv-rank-foot{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between}
.cv-rank .cv-chip{height:var(--size-chip);font-size:var(--text-chip)}

/* ---------- Night Orchard profile widget "My games orchard" (wrap it in data-widget="orchard") ---------- */
.cv-orchard{display:grid;gap:var(--space-5);padding:var(--space-6) 0 var(--space-5);border-radius:var(--radius-lg);background:var(--color-bg);overflow:hidden}
.cv-orchard__head{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:baseline;justify-content:space-between;padding:0 var(--space-6)}
.cv-orchard__title{margin:0;font:var(--weight-regular) var(--text-heading)/var(--leading-heading) var(--font-display);letter-spacing:var(--tracking-heading)}
.cv-orchard__sum{margin:0;display:flex;gap:var(--space-3);align-items:baseline;font:var(--weight-regular) var(--text-lead)/1.3 var(--font-body);color:var(--color-text-muted)}
.cv-orchard__sum b{font:var(--weight-regular) var(--text-stat)/1 var(--font-display);color:var(--color-take)}
.cv-orchard__sum strong{font-weight:var(--weight-medium);color:var(--color-text)}
/* the row of trees on one ground band, captures below; scrolls sideways when the owner has many games */
.cv-orchard__row{display:grid;grid-auto-flow:column;grid-auto-columns:var(--size-orchard-capture);gap:var(--space-5) var(--space-8);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--space-6);padding:0 var(--space-6) var(--space-2);
  scrollbar-width:none;  /* no native scrollbar: the arrows and progress dots below drive it; trackpad, drag and arrow keys still scroll */
  background:linear-gradient(var(--color-orchard-ground),var(--color-orchard-ground)) 0 var(--size-orchard-tree)/100% var(--size-orchard-ground) no-repeat local}
.cv-orchard__row::-webkit-scrollbar{display:none}
.cv-orchard__row:focus-visible{outline:var(--focus-ring);outline-offset:calc(-1 * var(--focus-offset))}
/* more games past the right (or left) edge: the row fades out there instead of a hard cut */
.cv-orchard__row.is-more-end{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--space-9)),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - var(--space-9)),#0000)}
.cv-orchard__row.is-more-start{-webkit-mask-image:linear-gradient(90deg,#0000,#000 var(--space-9));mask-image:linear-gradient(90deg,#0000,#000 var(--space-9))}
.cv-orchard__row.is-more-start.is-more-end{-webkit-mask-image:linear-gradient(90deg,#0000,#000 var(--space-9),#000 calc(100% - var(--space-9)),#0000);mask-image:linear-gradient(90deg,#0000,#000 var(--space-9),#000 calc(100% - var(--space-9)),#0000)}
.cv-orchard__item{--hill:var(--size-orchard-hill);position:relative;display:grid;grid-template-rows:var(--size-orchard-tree) var(--size-orchard-ground) auto;scroll-snap-align:start;min-width:0}
/* rolling ground: one continuous wave. Each tree's slice of ground (its width plus the gap) rises in a smooth swell to a
   crest under the tree and falls to a valley that meets the next slice at the band, so the hills run into each other
   with no flat ground between. As in the concept, the hill sits BEHIND the tree: the trunk runs down in front of it and
   stands in the flat ground band (--size-orchard-root below the band's top), its own shadow on the ground. The mask is shape only; the fill is the ground token. Crests sit centred under each tree and vary in height. */
.cv-orchard__item::before{content:"";position:absolute;left:calc(-.5 * var(--space-8));width:calc(100% + var(--space-8));
  top:calc(var(--size-orchard-tree) - var(--hill));height:calc(var(--hill) + 2px);background:var(--color-orchard-ground);pointer-events:none;z-index:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C25 100 28 0 50 0S75 100 100 100Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C25 100 28 0 50 0S75 100 100 100Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.cv-orchard__item:nth-child(3n+2){--hill:var(--size-orchard-hill-low)}
.cv-orchard__item:nth-child(3n){--hill:calc((var(--size-orchard-hill) + var(--size-orchard-hill-low)) / 2)}
.cv-orchard__item--plot::before{content:none}
.cv-orchard__tree{position:relative;z-index:1;align-self:end;justify-self:center;width:100%;height:calc(var(--size-orchard-tree) - var(--space-3));margin-bottom:calc(-1 * var(--size-orchard-root))}
.cv-orchard__tree--sprout{height:96px;width:96px}
.cv-orchard__item .cv-card{grid-row:3}
.cv-orchard .cv-card__name{grid-column:1/-1}
.cv-orchard .cv-card__name .cv-count{flex:none}
.cv-orchard__foot{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;padding:0 var(--space-6)}
.cv-orchard__nav{display:flex;align-items:center;gap:var(--space-3)}
.cv-scroll-btn{appearance:none;border:0;margin:0;cursor:pointer;display:inline-grid;place-items:center;flex:none;
  width:var(--size-scroll-btn);height:var(--size-scroll-btn);border-radius:var(--radius-pill);background:var(--material-raised);color:var(--color-primary-strong);
  transition:background var(--duration-fade) var(--ease-standard),transform var(--duration-sink) var(--ease-standard)}
.cv-scroll-btn svg{width:18px;height:18px;fill:currentColor}
.cv-scroll-btn:hover,.cv-scroll-btn.is-hover{background:var(--material-raised-hover);transform:translateY(-2px)}
.cv-scroll-btn:active,.cv-scroll-btn.is-active{background:var(--material-low);transform:none}
.cv-scroll-btn:focus-visible,.cv-scroll-btn.is-focus{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-scroll-btn:disabled,.cv-scroll-btn.is-disabled{cursor:default;transform:none;background:var(--material-low);color:var(--color-disabled-text)}
.cv-orchard__note{font:var(--weight-regular) var(--text-small)/1 var(--font-body);color:var(--color-text-muted)}
/* few games: no scrolling, no progress dots; the empty ground keeps one open plot to plant the next game */
.cv-orchard--few .cv-orchard__row{overflow:visible}
.cv-orchard__plot{grid-row:3;display:grid;place-items:center;aspect-ratio:var(--ratio-capture);border-radius:var(--radius-lg);background:var(--color-surface-sunken);
  color:var(--color-text-muted);font:var(--weight-regular) var(--text-small)/1.3 var(--font-body);text-align:center;text-decoration:none;padding:var(--space-4)}
/* empty: the bare ground line with a sapling and one quiet call to action */
.cv-orchard__empty{display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-6) 0;text-align:center}
.cv-orchard__empty-ground{position:relative;width:100%;height:var(--size-orchard-ground);background:var(--color-orchard-ground)}
.cv-orchard__empty-ground::before{content:"";position:absolute;left:50%;top:calc(-1 * var(--size-orchard-hill));width:min(100%,420px);height:calc(var(--size-orchard-hill) + 2px);translate:-50% 0;background:inherit;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C25 100 28 0 50 0S75 100 100 100Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C25 100 28 0 50 0S75 100 100 100Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.cv-orchard__empty .cv-orchard__tree--sprout{z-index:1;height:96px;margin-bottom:calc(-1 * var(--size-orchard-root))}
.cv-orchard__empty p{margin:0;color:var(--color-text-muted);max-width:44ch}
.cv-orchard__empty-title{font:var(--weight-regular) var(--text-lead)/1.2 var(--font-display);color:var(--color-text)}

/* ---------- header / masthead ---------- */
.cv-masthead{display:grid;gap:var(--space-5);max-width:600px}
.cv-wordmark{display:inline-flex;align-items:center;gap:0}
.cv-wordmark img{height:76px;width:auto;display:block}
.cv-wordmark__cursor{width:28px;height:62px;border-radius:var(--radius-xs);background:var(--color-primary);margin-left:calc(-1 * var(--space-5));animation:cv-blink 1.1s steps(1) infinite}
@keyframes cv-blink{50%{opacity:0}}
.cv-lead{margin:0;font:var(--weight-regular) var(--text-lead)/var(--leading-lead) var(--font-body);color:var(--color-text-muted);max-width:40ch}
.cv-lead b{font-weight:var(--weight-medium);color:var(--color-text)}
.cv-lead em{font-style:normal;color:var(--color-primary)}
.cv-stat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-6);align-items:center}
.cv-stat__n{font:var(--weight-regular) var(--text-stat)/.8 var(--font-display);letter-spacing:var(--tracking-stat);color:var(--color-take)}
.cv-stat__say{margin:0;font:var(--weight-regular) 22px/1.4 var(--font-body);color:var(--color-text)}
.cv-actions{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-start}
.cv-section-head{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);align-items:center;justify-content:space-between}
.cv-section-title{margin:0;font:var(--weight-regular) var(--text-heading)/var(--leading-heading) var(--font-display);letter-spacing:var(--tracking-heading)}
.cv-steps{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);align-items:center;margin:0;padding:0;list-style:none;
  font:var(--weight-regular) 17px/1.2 var(--font-body);color:var(--color-text)}
.cv-steps li{display:inline-flex;align-items:center;gap:var(--space-2)}
.cv-steps svg{width:24px;height:24px}
.cv-steps .cv-steps__arrow{width:16px;height:16px;fill:var(--color-text-muted)}

/* ---------- footer ---------- */
.cv-footer{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);align-items:center;justify-content:space-between;
  padding:var(--space-6) 0;font:var(--weight-regular) var(--text-xs)/1.4 var(--font-body);color:var(--color-text-muted)}
.cv-footer nav{display:flex;flex-wrap:wrap;gap:var(--space-5)}
.cv-footer .cv-link{font-size:var(--text-xs)}
/* the made-with-AI note: its own quiet line under the footer text, in the footer's muted colour (it will become a link to the terms of use) */
.cv-footer__ai-note{display:block;margin-top:var(--space-1)}

/* ---------- game tree page (/<slug>/tree): the head, the fruit list and its rows, status badges, the count line, the
   empty and loading states, the fruit card and the copy toast. The tree itself is the site's own drawing (specimens/trees/*.svg
   here); the page's grid and sizes live in the site's /tree.css. Same rules as the site's shared/cv-components.css, unscoped. ---------- */

/* the head: the bare tree mark centred, the game's name in caps with a small mint PLAY link */
.cv-tree-head{display:grid;justify-items:center;gap:var(--space-2)}
.cv-tree-head__mark{display:inline-block;border-radius:var(--radius-xs)}
.cv-tree-head__mark img{display:block;width:clamp(4rem,9vw,6rem);max-height:2.5rem;object-fit:contain}
.cv-tree-head__mark:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-tree-head__name{margin:0;font:var(--weight-regular) clamp(28px,2.4vw,40px)/1.05 var(--font-display);letter-spacing:.04em;text-align:center;text-transform:uppercase;color:var(--color-text)}
.cv-tree-head__name a{display:inline-flex;align-items:baseline;gap:var(--space-3);color:var(--color-text);text-decoration:none;border-radius:var(--radius-xs);transition:color var(--duration-quick) var(--ease-standard)}
.cv-tree-head__play{padding-bottom:3px;font:var(--weight-semibold) var(--text-eyebrow)/1 var(--font-body);letter-spacing:var(--tracking-eyebrow);color:var(--color-primary);box-shadow:inset 0 -2px 0 var(--color-primary-edge);transition:box-shadow var(--duration-quick) var(--ease-standard),color var(--duration-quick) var(--ease-standard)}
.cv-tree-head__name a:hover,.cv-tree-head__name a.is-hover{color:var(--color-primary-strong)}
.cv-tree-head__name a:hover .cv-tree-head__play,.cv-tree-head__name a.is-hover .cv-tree-head__play{color:var(--color-primary-strong);box-shadow:inset 0 -2px 0 var(--color-primary)}
.cv-tree-head__name a:focus-visible,.cv-tree-head__name a.is-focus{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* status badge: a variant of the tag (its flat tint and display face) as small caps on a pill, and not a control.
   New is the tag's own coin; Playing now is neon (the running version's blue); Start is quiet; In progress is orange. */
.cv-tag--badge,.cv-tag--badge:hover,.cv-tag--badge.is-hover{padding:5px 8px;border-radius:var(--radius-pill);font-size:11px;line-height:1;letter-spacing:.06em;text-transform:uppercase;cursor:default;
  background:var(--cv-badge-tint,var(--material-tag));color:var(--cv-badge-ink,var(--color-take))}
.cv-tag--live{--cv-badge-tint:var(--color-accent-tint);--cv-badge-ink:var(--color-accent)}
.cv-tag--start{--cv-badge-tint:var(--color-surface-raised);--cv-badge-ink:var(--color-text-muted)}
.cv-tag--busy{--cv-badge-tint:color-mix(in srgb,var(--color-in-progress) 14%,transparent);--cv-badge-ink:var(--color-in-progress)}

/* the count line: the big coin number inline, with words beside it (the orchard widget's 34px stat) */
.cv-stat--inline{display:flex;align-items:baseline;gap:var(--space-2);margin:0}
.cv-stat--inline .cv-stat__n{font-size:clamp(26px,1.8vw,34px);line-height:1}
.cv-stat--inline .cv-stat__say{font:var(--weight-regular) var(--text-body)/1.3 var(--font-body);color:var(--color-text-muted)}
.cv-stat--inline .cv-stat__say strong{font-weight:var(--weight-medium);color:var(--color-text)}

/* empty state: the ranking table's empty box; --inset sits one tone up inside a panel, with smaller words */
.cv-rank-empty--inset{gap:var(--space-2);padding:var(--space-4);background:var(--color-surface)}
.cv-rank-empty--inset p{font-size:var(--text-xs);line-height:var(--leading-body)}
.cv-rank-empty--inset .cv-rank-empty__title{font-size:var(--text-lead);line-height:1.2;color:var(--color-text)}

/* the fruit list: a flat sunken panel; its head stays put and only the list scrolls, fading at both ends */
.cv-fruit-list{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:var(--radius-xl);background:var(--color-surface-sunken)}
.cv-fruit-list [hidden]{display:none}
.cv-fruit-list__head{display:grid;gap:var(--space-3);padding:var(--space-5) var(--space-5) var(--space-3)}
.cv-fruit-list__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.cv-fruit-list__title{margin:0}
.cv-fruit-list__order{font:var(--weight-regular) var(--text-eyebrow)/1 var(--font-body);color:var(--color-text-muted)}
.cv-fruit-list__list{flex:1 1 auto;min-height:0;margin:0;padding:0 var(--space-3) var(--space-3);list-style:none;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--color-surface-raised) transparent;
  -webkit-mask-image:linear-gradient(#0000,#000 var(--space-3),#000 calc(100% - var(--space-6)),#0000);mask-image:linear-gradient(#0000,#000 var(--space-3),#000 calc(100% - var(--space-6)),#0000)}
.cv-fruit-list__list li+li{margin-top:2px}

/* one fruit: dot · title · status, then who · when · #n and the lines it changed. A button: it opens the fruit's card */
.cv-fruit-row{appearance:none;display:grid;grid-template-columns:10px minmax(0,1fr) auto;grid-template-areas:"dot what badges" ". meta diff";column-gap:var(--space-3);row-gap:3px;align-items:center;
  width:100%;margin:0;padding:var(--space-3);border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text);font:inherit;text-align:left;cursor:pointer;
  transition:background var(--duration-fade) var(--ease-standard),box-shadow var(--duration-fade) var(--ease-standard)}
.cv-fruit-row:hover,.cv-fruit-row.is-hover{background:var(--material-low-hover)}
.cv-fruit-row:focus-visible,.cv-fruit-row.is-focus{outline:var(--focus-ring);outline-offset:-3px}
/* the fruit whose card is open: one tone up, with a bar in the tree's own fruit colour (neon for the running one) */
.cv-fruit-row.is-current{background:var(--color-surface);box-shadow:inset 3px 0 0 var(--t3,var(--color-primary))}
.cv-fruit-row.is-current.is-live{box-shadow:inset 3px 0 0 var(--color-accent)}
/* the dot is the fruit: the tree's fruit colour with its glow; neon for the version playing now; orange while someone
   builds on it (on the running fruit only its ring turns orange, as on the tree) */
.cv-fruit-row__dot{grid-area:dot;width:10px;height:10px;border-radius:var(--radius-pill);background:var(--t3,var(--color-primary));box-shadow:0 0 8px var(--t3,var(--color-primary))}
.cv-fruit-row.is-live .cv-fruit-row__dot{background:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-tint),0 0 10px var(--color-accent)}
.cv-fruit-row.is-busy .cv-fruit-row__dot{background:var(--color-in-progress);box-shadow:0 0 8px var(--color-in-progress)}
.cv-fruit-row.is-live.is-busy .cv-fruit-row__dot{background:var(--color-accent);box-shadow:0 0 0 3px var(--color-in-progress)}
.cv-fruit-row__what{grid-area:what;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--weight-medium) var(--text-xs)/1.3 var(--font-body);color:var(--color-text)}
.cv-fruit-row__badges{grid-area:badges;display:inline-flex;gap:var(--space-1);justify-self:end}
.cv-fruit-row__meta{grid-area:meta;display:flex;align-items:baseline;gap:var(--space-2);min-width:0;overflow:hidden;white-space:nowrap;font:var(--weight-regular) 13px/1.35 var(--font-body);color:var(--color-text-muted)}
.cv-fruit-row__meta>*+*::before{content:"·";margin-right:var(--space-2);color:var(--color-text-muted);opacity:.45}
.cv-fruit-row__meta>:not(.cv-fruit-row__who){flex:none}
.cv-fruit-row__who{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:var(--weight-medium);color:var(--color-text)}
.cv-fruit-row__who--unknown{font-weight:var(--weight-regular);font-style:italic;color:var(--color-text-muted)}
.cv-fruit-row.is-nodiff .cv-fruit-row__meta{grid-column:2/-1}
.cv-fruit-row .diff{grid-area:diff;justify-self:end;font:var(--weight-regular) 13px/1.35 var(--font-body);white-space:nowrap}
.cv-fruit-row .diff__add{color:var(--color-primary)}
.cv-fruit-row .diff__del{color:var(--color-danger)}
/* narrow (one column, a phone): no room for a one-line title beside a badge, so up to two lines */
.cv-fruit-list--narrow .cv-fruit-row__what{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;align-self:start;white-space:normal}
.cv-fruit-list--narrow .cv-fruit-row__dot{align-self:start;margin-top:5px}
.cv-fruit-list--narrow .cv-fruit-row__badges{align-self:start}
/* loading: flat placeholder bars in the row's own grid (as the ranking table's loading rows) */
.cv-fruit-row--loading,.cv-fruit-row--loading:hover{cursor:default;background:transparent}
.cv-fruit-row--loading .cv-fruit-row__dot{background:var(--color-surface);box-shadow:none}
.cv-fruit-row--loading .cv-skel{display:block;height:12px;border-radius:var(--radius-xs);background:var(--color-surface)}
.cv-fruit-row--loading .cv-fruit-row__what{width:72%;height:14px}
.cv-fruit-row--loading .cv-fruit-row__meta{grid-column:2/-1;width:44%}
@media (prefers-reduced-motion:no-preference){.cv-fruit-row--loading .cv-skel{animation:cv-pulse var(--duration-glow) var(--ease-standard) infinite alternate}}

/* the fruit card, design-system look: a flat raised surface, no outline, Rubik and Russo One, the coin tag button.
   A modifier on the shared .card: /shared/card.css keeps its placement, tip, pinning and bloom. Only an element that
   carries .cv-fruit-card changes (the public tree page's card), so the operator app's cards keep their look. */
.cv-fruit-card{--card-accent:var(--t3,var(--color-primary));width:min(320px,calc(100vw - 16px));padding:var(--space-4);border:0;border-radius:var(--radius-lg);
  background:var(--color-surface-raised);color:var(--color-text);font:var(--weight-regular) var(--text-xs)/var(--leading-body) var(--font-body);box-shadow:none}
.cv-fruit-card [hidden]{display:none}
.cv-fruit-card.card--pinned{box-shadow:inset 0 -4px 0 var(--card-accent)}
.cv-fruit-card .card__eyebrow{margin:0 0 var(--space-2);font:var(--weight-semibold) var(--text-eyebrow)/1 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-text-muted)}
.cv-fruit-card .card__author{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2);padding-right:var(--space-6);font:var(--weight-medium) var(--text-small)/1.2 var(--font-body);letter-spacing:0;text-transform:none;color:var(--color-text)}
.cv-fruit-card .card__laurel{width:18px;height:18px;object-fit:contain;flex:none}
.cv-fruit-card .card__author-name{min-width:0;overflow-wrap:anywhere}
.cv-fruit-card .card__badges{display:flex;align-items:center;gap:6px;margin-left:auto}
/* NEW (coin) and ACTIVE (neon: the version playing now): the status badge's flat tints */
.cv-fruit-card .card__author :is(.badge--new,.badge--active){position:static;display:inline-flex;margin-left:0;padding:5px 8px;border:0;border-radius:var(--radius-pill);font:var(--weight-regular) var(--text-eyebrow)/1 var(--font-display);letter-spacing:var(--tracking-display);box-shadow:none}
.cv-fruit-card .card__author .badge--new{background:var(--color-take-tint);color:var(--color-take)}
.cv-fruit-card .card__author .badge--active{background:var(--color-accent-tint);color:var(--color-accent)}
.cv-fruit-card .card__title,.cv-fruit-card:hover .card__title,.cv-fruit-card:focus-within .card__title{margin:0 0 var(--space-2);font:var(--weight-regular) var(--text-meta)/var(--leading-snug) var(--font-display);letter-spacing:var(--tracking-heading);color:var(--color-text)}
.cv-fruit-card .card__blurb{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;margin:0 0 var(--space-2);font:var(--weight-regular) var(--text-xs)/var(--leading-body) var(--font-body);color:var(--color-text-muted)}
.cv-fruit-card .card__blurb.card__blurb--open{display:block;max-height:40vh;overflow-y:auto;-webkit-line-clamp:none}
.cv-fruit-card .card__build,.cv-fruit-card .card__meta{margin:0 0 var(--space-1);font:var(--weight-regular) var(--text-eyebrow)/1.4 var(--font-body);color:var(--color-text-muted);overflow-wrap:anywhere}
.cv-fruit-card .card__build-label{opacity:.7}
.cv-fruit-card .diff{font-family:var(--font-body);white-space:nowrap}
.cv-fruit-card .card__meta .diff{margin-left:6px}
.cv-fruit-card .diff__add{color:var(--color-primary)}
.cv-fruit-card .diff__del{color:var(--color-danger)}
/* "More": the design system's text link, small */
.cv-fruit-card .card__more{display:block;width:fit-content;margin:0 0 var(--space-2);padding:0 0 2px;border:0;background:none;font:var(--weight-medium) var(--text-eyebrow)/1.2 var(--font-body);letter-spacing:0;text-transform:none;color:var(--color-link);box-shadow:inset 0 -2px 0 var(--color-link-underline);cursor:pointer;transform:none}
.cv-fruit-card .card__more:hover,.cv-fruit-card .card__more.is-hover,.cv-fruit-card .card__more:focus-visible{color:var(--color-link);text-decoration:none;box-shadow:inset 0 -2px 0 var(--color-primary);transform:none}
.cv-fruit-card .card__more:focus-visible{outline:var(--focus-ring);outline-offset:2px}
/* close: a small round quiet button (shows once the card is pinned) */
.cv-fruit-card .card__close{position:absolute;top:var(--space-3);right:var(--space-3);display:none;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--radius-pill);
  background:var(--color-surface);color:var(--color-primary-strong);font:var(--weight-medium) var(--text-meta)/1 var(--font-body);cursor:pointer;box-shadow:none;transform:none}
.cv-fruit-card.card--pinned .card__close{display:grid}
.cv-fruit-card .card__close:hover{background:var(--color-surface-sunken);color:var(--color-primary-strong)}
.cv-fruit-card .card__close:focus-visible{outline:var(--focus-ring);outline-offset:2px}
/* the tag: the design system's coin tag, full width; the only coin text on the card */
.cv-fruit-card .card__tag{margin-top:var(--space-3);min-width:0}
.cv-fruit-card .tag{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:44px;padding:.66em .9em;border:0;border-radius:var(--radius-tag);
  background:var(--color-take-tint);color:var(--color-take);font:var(--weight-regular) var(--text-small)/1.2 var(--font-display);letter-spacing:var(--tracking-tag);text-transform:none;text-align:center;
  cursor:copy;box-shadow:none;transform:none;transition:background var(--duration-press) var(--ease-standard)}
.cv-fruit-card .tag :is(.tag__prefix,.tag__name){color:var(--color-take)}
.cv-fruit-card .tag__name{min-width:0;overflow-wrap:anywhere}
.cv-fruit-card button.tag:hover,.cv-fruit-card button.tag.is-hover,.cv-fruit-card button.tag:active{background:var(--color-take-tint-hover);border:0;box-shadow:none;transform:none}
.cv-fruit-card button.tag:focus-visible,.cv-fruit-card button.tag.is-focus{outline:var(--focus-ring);outline-offset:var(--focus-offset);box-shadow:none}
.cv-fruit-card button.tag--copied,.cv-fruit-card button.tag--copied:hover{background:var(--color-take);color:var(--color-on-take)}
.cv-fruit-card .tag--copied .tag__copied{color:var(--color-on-take)}
.cv-fruit-card .tag--none{cursor:default;color:var(--color-text-muted);background:var(--color-surface-sunken);font-family:var(--font-body);font-size:var(--text-xs)}
.cv-fruit-card .card__hint{margin:var(--space-2) 0 0;font:var(--weight-regular) var(--text-eyebrow)/1.4 var(--font-body);color:var(--color-text-muted);text-align:center}
/* who is building on this fruit (the live activity section) */
.cv-fruit-card .card__activity{display:grid;gap:var(--space-2);max-height:44vh;overflow-y:auto;margin:var(--space-2) 0 0;padding-top:var(--space-2);border-top:0;scrollbar-width:thin;scrollbar-color:var(--color-surface) transparent}
.cv-fruit-card .card__section{display:grid;gap:6px;min-width:0}
.cv-fruit-card .card__section-title{display:flex;align-items:center;gap:6px;margin:0;font:var(--weight-semibold) var(--text-eyebrow)/1 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-text-muted)}
.cv-fruit-card .card__section--progress .card__section-title{color:var(--color-in-progress)}
.cv-fruit-card .card__section--progress .card__section-title::before{content:"";width:8px;height:8px;flex:none;border:2px solid var(--color-in-progress);border-right-color:transparent;border-radius:var(--radius-pill)}
.cv-fruit-card .card__section-count{margin-left:auto;color:var(--color-text-muted);letter-spacing:0}
.cv-fruit-card .card__row{margin:0;font:var(--weight-regular) var(--text-xs)/1.4 var(--font-body);color:var(--color-text);overflow-wrap:anywhere}
.cv-fruit-card .card__who{font-weight:var(--weight-medium)}
/* narrow screens: in flow under the tree (shared/card.js), the full width of the tree column */
.cv-fruit-card.card--inline{width:100%;max-width:none;margin:var(--space-4) 0 0}

/* the game page bar (concept A, "Slim bar"): mark · game name · coin version tag (click to copy) · TREE and INDEX text
   links. One thin row over a full-bleed game. The site: shared/cv-components.css (.cv-game-bar) and site/public/game.css
   (the tag, the "new version" notice). Under 600px the tag hides and the bar is 56px. */
.cv-game-bar{display:flex;align-items:center;gap:var(--space-4);height:60px;padding:0 var(--space-5);border-bottom:1px solid var(--color-surface-raised);background:var(--color-bg)}
.cv-game-bar__mark{display:inline-flex;flex:none;border-radius:var(--radius-xs)}
.cv-game-bar__mark img{display:block;width:auto;height:30px}
.cv-game-bar__mark:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.cv-game-bar__name{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--weight-regular) 24px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text)}
.cv-game-bar .cv-tag{flex:none;max-width:40vw;font-size:13px;padding:.55em .8em}
.cv-game-bar__links{display:flex;flex:none;align-items:center;gap:var(--space-5);margin-left:auto}
.cv-game-bar__link{text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);font-weight:var(--weight-semibold);font-size:var(--text-eyebrow)}
.cv-game-bar--phone{gap:var(--space-3);height:56px;padding:0 var(--space-3)}
.cv-game-bar--phone .cv-game-bar__name{font-size:19px}
.cv-game-bar--phone .cv-tag{display:none}
.cv-game-bar--phone .cv-game-bar__links{gap:var(--space-4)}
@media (max-width:600px){.cv-game-bar{gap:var(--space-3);height:56px;padding:0 var(--space-3)}.cv-game-bar__name{font-size:19px}.cv-game-bar .cv-tag{display:none}.cv-game-bar__links{gap:var(--space-4)}}

/* the start card: drawn inside the game frame by the shared player shell, the same for every game. SPEC ONLY: the play
   origin serves its own copy (game-evolve/client/shell.css, on the shell's element ids), so change both. Eyebrow,
   title, one line, the orange alert (only after a try that did not get in), the name box, Play (the cap button), "Just
   watch" (quiet), and the quiet progress line. Over a running game a spectator sees the HUD pill and the waiting banner. */
.cv-start-card{display:flex;flex-direction:column;box-sizing:border-box;width:380px;max-width:100%;padding:var(--space-6);border-radius:var(--radius-xl);background:var(--color-surface);border:1px solid var(--color-surface-raised)}
.cv-start-card .cv-eyebrow{display:block;margin-bottom:var(--space-3)}
.cv-start-card__title{margin:0 0 var(--space-2);font:var(--weight-regular) 40px/1.05 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text);overflow-wrap:anywhere}
.cv-start-card__say{margin:0 0 var(--space-5);color:var(--color-text-muted);font-size:var(--text-small)}
.cv-start-card__alert{display:flex;gap:var(--space-3);align-items:flex-start;margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-in-progress) 12%,transparent);color:var(--color-text);font-size:var(--text-small)}
.cv-start-card__alert .cv-dot{margin-top:7px;background:var(--color-in-progress)}
.cv-start-card__field{display:block;box-sizing:border-box;width:100%;height:48px;margin:0 0 var(--space-3);padding:0 var(--space-4);border:1px solid var(--color-surface-raised);border-radius:var(--radius-md);background:var(--color-surface-sunken);color:var(--color-text);font:var(--weight-medium) 16px/1 var(--font-body);outline:none}
.cv-start-card__field:focus,.cv-start-card__field.is-focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-tint)}
.cv-start-card .cv-btn{width:100%}
.cv-start-card__watch{margin-top:var(--space-3)}
.cv-start-card__watch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cv-start-card__status{margin:var(--space-4) 0 0;color:var(--color-text-muted);font-size:var(--text-xs)}
.cv-start-card__private{align-self:flex-start;margin:0 0 var(--space-3);padding:5px 8px;border-radius:var(--radius-pill);background:var(--color-primary-tint);color:var(--color-primary);font:var(--weight-semibold) 11px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.cv-start-card--preview{border-color:var(--color-primary-edge)}
.cv-start-card--embed{width:300px;padding:var(--space-5) 20px;border-radius:var(--radius-lg)}
.cv-start-card--embed .cv-start-card__title{margin-bottom:var(--space-4);font-size:28px}
.cv-start-card--phone{padding:var(--space-5)}
.cv-start-card--phone .cv-start-card__title{font-size:32px}
.cv-watch-hud{display:inline-flex;align-items:center;gap:var(--space-3);padding:5px 5px 5px var(--space-4);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-bg) 78%,transparent);border:1px solid var(--color-surface-raised);backdrop-filter:blur(8px)}
.cv-watch-hud__live{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--weight-semibold) var(--text-eyebrow)/1 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-primary)}
.cv-watch-hud select{appearance:none;height:34px;padding:0 var(--space-6) 0 var(--space-4);border:0;border-radius:var(--radius-pill);background:var(--material-raised);color:var(--color-text);font:var(--weight-medium) var(--text-small)/1 var(--font-body)}
.cv-watch-banner{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4) var(--space-2) 14px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-bg) 78%,transparent);border:1px solid var(--color-surface-raised);color:var(--color-text);font-size:var(--text-xs)}
.cv-watch-banner .cv-dot{background:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-tint)}

/* the copy toast: shown only when the browser refuses to copy a tag ("select + copy"); shared/card.js places it */
.cv-toast{position:fixed;z-index:40;left:var(--toast-left,50%);top:var(--toast-top,8px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);margin:0;padding:var(--space-3) var(--space-5);
  border:0;border-radius:var(--radius-pill);background:var(--color-surface-raised);color:var(--color-text);font:var(--weight-regular) var(--text-small)/1.3 var(--font-body);text-align:center;
  opacity:0;pointer-events:none;transition:opacity var(--duration-fade) var(--ease-standard)}
.cv-toast.toast--shown,.cv-toast.is-shown{opacity:1}

@media (prefers-reduced-motion:reduce){
  .cv-btn,.cv-card__capture,.cv-link,.cv-tag,.cv-chip,.cv-row,.cv-metric,.cv-scroll-btn{transition:none}
  .cv-fruit-row,.cv-fruit-card .tag,.cv-toast,.cv-tree-head__name a,.cv-tree-head__play{transition:none}
  .cv-wordmark__cursor{animation:none}
}