/* THE REALITY CAPSULE — canonical styles, paired with capsule.mjs (sync both together).
   The capsule is GLASS filled with the reality's own two colours. Only these knobs exist:
   the two colours come from the plugged reality, FILL says how much of the accent shows
   through, GLOSS scales every highlight and shade together. Everything else is derived,
   so an orange or blue reality renders identically without retuning.
   Fill/stroke gradients are carried as per-instance SVG attributes (unique ids), never as
   url(#…) in CSS — a fixed id would paint every capsule on a page with the first's colours.
   Fonts assumed: Poppins (name) + Inter — loaded by the host page. */
:root {
  --cap-accent: #38ff38;     /* the reality's main colour   (overridden per reality) */
  --cap-dark: #161616;       /* the reality's second colour (overridden per reality) */
  --cap-rgb: 56,255,56;      /* accent as a triplet for the glows (set with --cap-accent) */
  --cap-fill: .5;            /* how much accent shows through the glass */
  --cap-gloss: 1;            /* strength of every glass highlight and shade */
  --slot-stroke: .5;         /* the slot's outline */
}

/* ---- the SLOT + CAPSULE: both are single continuous key silhouettes (capsule.mjs
   keyPath), the capsule inset by the rim so an even sliver of slot shows all the way
   round — head included. The bay draws NOTHING itself; the SVG is the shape. ---- */
.cap-bay {
  position: relative;
  min-height: 62px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.key-shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 62px;
  overflow: visible;
}
.k-slot {
  stroke: rgba(0,0,0,var(--slot-stroke));
  stroke-width: 1;
}
/* the capsule casts two shadows: a black contact shadow to lift it out of the slot, and
   the reality's own accent glow (scaled by the fill knob) so the card carries its colour */
.k-cap-group {
  filter:
    drop-shadow(0 4px 9px rgba(0,0,0,.75))
    drop-shadow(0 10px 20px rgba(var(--cap-rgb),calc(.26 * var(--cap-fill) * 3)));
}
/* stroked wide and clipped to the shape, so only the inner half shows: a lit top edge and
   a shaded base that follow the silhouette instead of a flat top-to-bottom ramp */
.k-cap-bevel {
  fill: none;
  stroke-width: 5;
}
.k-cap {
  fill: none;
  stroke: rgba(255,255,255,calc(.22 * var(--cap-gloss)));
  stroke-width: 1;
}
/* the glass fill: the reality's accent mixed into its dark, one formula for any brand */
.key-t0 { stop-color: color-mix(in srgb, var(--cap-accent) calc(var(--cap-fill) * 100%), var(--cap-dark)); }
.key-t1 { stop-color: color-mix(in srgb, var(--cap-accent) calc(var(--cap-fill) * 32%), var(--cap-dark)); }
.key-t2 { stop-color: color-mix(in srgb, var(--cap-accent) calc(var(--cap-fill) * 74%), var(--cap-dark)); }
.key-w0 { stop-color: rgba(255,255,255,calc(.24 * var(--cap-gloss))); }
.key-w1 { stop-color: rgba(255,255,255,calc(.05 * var(--cap-gloss))); }
.key-s0 { stop-color: rgba(255,255,255,calc(.34 * var(--cap-gloss))); }
.key-s1 { stop-color: rgba(255,255,255,calc(.06 * var(--cap-gloss))); }
.key-b0 { stop-color: rgba(255,255,255,calc(.42 * var(--cap-gloss))); }
.key-b1 { stop-color: rgba(0,0,0,calc(.70 * var(--cap-gloss))); }
.cap-bay.is-vacant .k-cap-group,
.cap-bay.is-vacant .k-cap { display: none; }

/* selected/plugged (pickers): the capsule's outline and glow answer in the accent */
.cap-bay.is-on .k-cap { stroke: rgba(var(--cap-rgb),.75); }
.cap-bay.is-on .k-cap-group {
  filter:
    drop-shadow(0 4px 9px rgba(0,0,0,.75))
    drop-shadow(0 10px 24px rgba(var(--cap-rgb),calc(.42 * var(--cap-fill) * 3)));
}

/* the capsule element carries only the CONTENT — the logo head and the name */
.id-capsule {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  height: 62px;
  padding: 0 24px 0 70px;      /* the name clears the head */
}
/* the logo IS the key's round head — no ring, no collar: the capsule's own outline
   (drawn by the SVG path behind it) is what encircles it */
.cap-logo {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 5px;
  display: grid;
  width: 52px;
  height: 52px;
  flex: none;
  overflow: hidden;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #06090a;
  transform: translateY(-50%);
  box-shadow: 0 0 18px -8px rgba(var(--cap-rgb),.55);
}
.cap-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.cap-logo-fallback { font-size: 24px; line-height: 1; }
.cap-logo-empty {
  cursor: default;
  box-shadow: none;
  color: rgba(255,255,255,.40);
}
.cap-name {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  color: #eaf3ea;
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
}

/* vacant: the keyhole's own round end IS the seat — only the label naming the empty slot */
.cap-bay.is-vacant::after {
  content: "No reality plugged";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 78px;
  color: rgba(255,255,255,.62);
  font-family: "Poppins", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(-50%);
  text-shadow: 0 1px 2px rgba(0,0,0,1);
}