/* shared/card.css — the fruit card and the fruit it points at: one look for the public tree page and the operator's
   tree and nursery. shared/card.js drives it through --card-left/--card-top/--tip-x/--tip-y, the card--<side>
   classes, card--enter/--moving/--pinned, and .is-current/.lit on the fruit. Page stylesheets add only what is
   theirs (the operator's actions, the public page's name link). Load it after the page's own stylesheet. */

/* The fruit someone is building on. One orange for the public tree and the operator's (the site is dark-only, so
   there is a single value); it is a role of its own, not any palette's, so it never reads as a tree colour. */
:root { --in-progress: #ff9f43; }

/* ---- the fruit (hosts marked .fruit-tree): a hover lift, a steady mark on the fruit the card is about, a pulse
   when the card opens. The glow follows the tree's fruit colour; the fruit the game is running wears the blue. ---- */
.fruit-tree svg .node {
  --glow: var(--t3, var(--fruit, var(--mint)));
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 4px var(--glow)) drop-shadow(0 0 10px color-mix(in srgb, var(--glow) 45%, transparent));
  transition: transform var(--t-base) var(--pop), filter var(--t-base) var(--ease);
}
.fruit-tree svg .node--live { --glow: var(--neon); }
/* In progress: the fruit's face turns orange and carries a turning ring, so it is not colour alone (shared/tree-grow.js
   adds the class and the spinner; on the running fruit only the outer ring turns orange). */
.fruit-tree svg .node--busy:not(.node--live) { --glow: var(--in-progress); }
.fruit-tree svg .node--busy:not(.node--live) .node__body { fill: var(--in-progress); stroke: color-mix(in srgb, var(--in-progress) 55%, white); }
/* the running fruit keeps its blue face and glow, so "live" still reads; its halo becomes a solid orange ring instead */
.fruit-tree svg .node--busy.node--live .node__halo { fill: var(--in-progress); opacity: 1; }
.fruit-tree svg .node__busy { stroke: var(--ground); transform-box: fill-box; transform-origin: center; animation: busy-spin 2.8s linear infinite; pointer-events: none; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
.fruit-tree svg .node:hover,
.fruit-tree svg .node:focus-visible,
.fruit-tree svg .node.is-current {
  outline: none;
  box-shadow: none;
  transform: scale(1.35);
  filter: drop-shadow(0 0 7px var(--glow)) drop-shadow(0 0 18px color-mix(in srgb, var(--glow) 80%, transparent));
}
/* the fruit the card is about keeps a thin light ring, so the pair reads as one thing even across a gap */
.fruit-tree svg .node.is-current {
  filter: drop-shadow(0 0 1.5px var(--mint-bright)) drop-shadow(0 0 7px var(--glow)) drop-shadow(0 0 18px color-mix(in srgb, var(--glow) 80%, transparent));
}
.fruit-tree svg .node.lit { animation: fruit-pulse var(--t-slow) var(--ease) 1; }
.fruit-tree svg .node:active { transform: scale(1.1); transition-duration: var(--t-fast); }
@keyframes fruit-pulse { 45% { transform: scale(1.55); } }

/* ---- the card ---- */
.card {
  --card-accent: var(--t3, var(--fruit, var(--mint)));
  position: fixed;
  left: var(--card-left, 0);
  top: var(--card-top, 0);
  z-index: 50;
  display: block;
  box-sizing: border-box;
  width: min(300px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: visible;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--raised);
  color: var(--ink);
  font: var(--s-2)/1.4 var(--f-body);
  filter: none;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ground) 80%, transparent),
    0 0 0 1px color-mix(in srgb, var(--card-accent) 40%, transparent);
}
.card[hidden] { display: none; }
/* it fades in from the side it sits on, and an open card glides to its next fruit rather than blinking there */
.card--enter { animation: card-in var(--t-base) var(--ease); }
.card--right { --card-in-x: -6px; } .card--left { --card-in-x: 6px; } .card--below { --card-in-y: -6px; } .card--above { --card-in-y: 6px; }
@keyframes card-in { from { opacity: 0; translate: var(--card-in-x, 0) var(--card-in-y, 0); } }
.card--moving { transition: left var(--t-base) var(--ease), top var(--t-base) var(--ease); }

.card__eyebrow { margin: 0 0 4px; color: var(--dim); font: 600 var(--s-1)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.card__author { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-1); margin: 0 0 6px; padding-right: 22px; color: var(--ink); font: 600 var(--s-3)/1.15 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; text-shadow: none; }
.card__author-name { min-width: 0; overflow-wrap: anywhere; }
.card__laurel, .card__author .card__laurel { width: 18px; height: 18px; object-fit: contain; flex: none; }
.card__title { margin: 0 0 6px; color: var(--mint); font: 600 var(--s-2)/1.3 var(--f-body); transition: color var(--t-base) var(--ease); }
.card__blurb { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; margin: 0 0 var(--gap-1); color: var(--dim); font: 13px/1.45 var(--f-body); }
.card__build { margin: 0 0 var(--gap-1); color: var(--dim); font: 11px/1.4 var(--f-mono); overflow-wrap: anywhere; }
.card__build-label { opacity: .7; }
.card__meta { margin: 0 0 var(--gap-1); color: var(--dim); font: 11px/1.4 var(--f-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.card__state { margin: var(--gap-1) 0; color: var(--dim); font: var(--s-1)/1.4 var(--f-body); }
.card__blurb.card__blurb--open { display: block; max-height: 40vh; overflow-y: auto; -webkit-line-clamp: none; }
.card .card__more { display: block; min-width: 0; min-height: 0; margin: calc(-1 * var(--gap-1) + 2px) 0 var(--gap-1); padding: 0; border: 0; background: none; box-shadow: none; color: var(--mint); font: 600 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transform: none; }
.card .card__more:hover, .card .card__more:focus-visible { color: var(--mint-bright); border: 0; box-shadow: none; transform: none; text-decoration: underline; }
.card .card__more:active { transform: none; }
.card__blurb[hidden], .card__more[hidden], .card__state[hidden], .card__author .badge[hidden] { display: none; }
.card:hover .card__title, .card:focus-within .card__title { color: var(--mint-bright); }

/* NEW (coin) and ACTIVE (the running fruit's blue) ride in one box at the end of the author row */
.card__author .card__badges { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.card__author :is(.badge--new, .badge--active) { position: static; display: inline-flex; min-width: 0; height: auto; margin-left: auto; padding: 3px 7px; border: 1px solid var(--coin); border-radius: var(--r-pill); background: var(--coin); color: var(--ground); font: 600 10px/1 var(--f-display); letter-spacing: .1em; box-shadow: 0 0 12px var(--glow-coin); }
.card__author .card__badges .badge { margin-left: 0; }
.card__author .badge--active { border-color: var(--neon); background: var(--neon); box-shadow: 0 0 12px color-mix(in srgb, var(--neon) 40%, transparent); }
.card__author :is(.badge--new, .badge--active)::before { display: none; }

/* ---- the card's optional activity section: who is building on this fruit ---- */
.card__activity { display: grid; gap: var(--gap-1); max-height: 44vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; margin: var(--gap-1) 0 0; padding-top: var(--gap-1); border-top: 1px solid var(--line); overscroll-behavior: contain; }
.card__section { display: grid; gap: 6px; min-width: 0; }
.card__section-title { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--dim); font: 600 var(--s-1)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.card__section--progress .card__section-title { color: var(--in-progress); }
.card__section--progress .card__section-title::before { content: ""; width: 8px; height: 8px; flex: none; border: 2px solid var(--in-progress); border-right-color: transparent; border-radius: var(--r-pill); }
.card__section-count { margin-left: auto; color: var(--dim); letter-spacing: 0; }
.card__row { margin: 0; color: var(--ink); font: 13px/1.4 var(--f-body); overflow-wrap: anywhere; }
.card__who { font-weight: 600; }

/* the tether: a pointer on the edge facing the fruit, in the fruit's colour, placed at the fruit's own centre */
.card__tip { position: absolute; top: var(--tip-y, 1rem); width: 0; height: 0; margin-top: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; pointer-events: none; }
.card__tip[hidden] { display: none; }
.card--right .card__tip { left: -10px; border-right: 10px solid var(--card-accent); }
.card--left .card__tip { right: -10px; border-left: 10px solid var(--card-accent); }
.card--below .card__tip, .card--above .card__tip { left: var(--tip-x, 1rem); margin-top: 0; margin-left: -10px; border-right: 10px solid transparent; border-left: 10px solid transparent; }
.card--below .card__tip { top: -10px; border-top: 0; border-bottom: 10px solid var(--card-accent); }
.card--above .card__tip { top: auto; bottom: -10px; border-top: 10px solid var(--card-accent); border-bottom: 0; }
.card--moving .card__tip { transition: top var(--t-base) var(--ease), left var(--t-base) var(--ease); }

/* a clicked fruit pins its card: hover no longer moves it, and it says how to let go */
.card__close { position: absolute; top: 8px; right: 8px; display: none; place-items: center; width: 24px; height: 24px; min-width: 0; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--dim); font: 600 15px/1 var(--f-body); cursor: pointer; }
.card--pinned .card__close { display: grid; }
.card__close:hover, .card__close:focus-visible { color: var(--ink); border-color: var(--mint); }
.card--pinned { box-shadow: 0 14px 34px color-mix(in srgb, var(--ground) 80%, transparent), 0 0 0 1px var(--card-accent); }

/* narrow screens: in flow under the tree, its tip pointing up at the fruit */
.card.card--inline { position: relative; left: auto; top: auto; inset: auto; width: min(320px, calc(100% - 16px)); max-height: none; margin: 16px auto 8px; }

/* ---- the tag chip: the card's primary control. It wraps rather than spill out of the card on a long name. ---- */
.card__tag { margin-top: var(--gap-2); min-width: 0; }
.tag { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; box-sizing: border-box; max-width: 100%; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--surface); color: var(--mint); font: 600 13px/1.3 var(--f-mono); letter-spacing: 0; text-transform: none; text-align: center; cursor: pointer; transition: transform var(--t-base) var(--pop), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.tag__prefix { color: var(--coin); }
.tag__name { min-width: 0; color: var(--mint); overflow-wrap: anywhere; }
button.tag:hover { transform: translateY(-2px); border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint), 0 0 26px var(--glow); }
button.tag:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--mint-bright), 0 0 26px var(--glow); }
button.tag:active { transform: translateY(1px) scale(.985); box-shadow: none; background: var(--mint-deep); transition-duration: var(--t-fast); }
button.tag--copied { background: var(--mint); color: var(--ground); border-color: var(--mint); animation: tag-pop var(--t-slow) var(--pop); }
.tag__copied { color: var(--ground); }
.tag.tag--reset { transition: none !important; animation: none !important; }
.tag:active .tag__prefix, .tag:active .tag__name, .tag.is-active .tag__prefix, .tag.is-active .tag__name { color: var(--ink); }
@keyframes tag-pop { from { transform: scale(.97); } 55% { transform: scale(1.025); } to { transform: scale(1); } }
.tag--none { cursor: default; color: var(--dim); font-size: var(--s-1); border-style: dashed; }
.card__hint { margin: 6px 0 0; color: var(--dim); font: 11px/1.5 var(--f-mono); text-align: center; }
.copy-buffer { position: fixed; left: 0; top: 0; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }

/* ---- the diff score beside a ref ---- */
.diff { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__meta .diff { margin-left: 6px; }
.diff__add { color: var(--mint); }
.diff__del { color: var(--danger); }

/* ---- the bloom behind the fruit the card opened on (parked in the fruit's host by card.js) ---- */
.bloom { position: absolute; left: var(--bloom-x, 50%); top: var(--bloom-y, 50%); z-index: 0; width: 96px; height: auto; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.65); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--pop); }
.bloom--shown { opacity: .75; transform: translate(-50%, -50%) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .fruit-tree svg .node, .fruit-tree svg .node:is(:hover, :focus-visible, .is-current, .lit, :active),
  .fruit-tree svg .node__busy,
  .card, .card--enter, .card--moving, .card--moving .card__tip, .tag, button.tag:is(:hover, :active), .tag--copied, .bloom, .bloom--shown {
    transform: none !important; animation: none !important; translate: none !important;
    transition-property: box-shadow, filter, border-color, color, fill, background, opacity !important;
  }
  .bloom, .bloom--shown { transform: translate(-50%, -50%) !important; }
}