.yv-metal-wrap {
  transition: opacity 150ms ease-out;
  contain: layout;
  vertical-align: top;
}
.yv-metal-wrap > :not(.metal-fx-root) {
  position: relative;
}
.yv-metal-wrap:has(> :disabled) {
  opacity: 0.5;
}
.yv-metal-wrap > :disabled {
  opacity: 1;
}
.yv-metal-wrap .metal-fx-root.yv-metal {
  position: absolute;
  inset: -3px;
  z-index: 0;
  background: var(--text-primary);
  pointer-events: none;
}
.yv-metal-wrap .metal-fx-root.yv-metal > .metal-fx-content {
  height: 100%;
}
/* Thin live band: original MetalFx material, concentric source geometry. */
.yv-metal-wrap.yv-metal-live .metal-fx-root.yv-metal{inset:calc(-1 * var(--metal-band-base,1.5px))}
.yv-metal-wrap.yv-metal-live .metal-fx-inner{inset:var(--metal-band-base,1.5px);border-radius:calc(var(--mfx-radius,20px) - var(--metal-band-base,1.5px))}
/* Light theme: the band's ground is the PAGE (cream), not the ink of the
   button — measured on /lab/glass 2026-09-16: with ink behind it the
   silver merged into the ink pill and read as a plain dark outline; on
   cream the chrome rim shows. (`MetalRing` also flips the library to its
   light metal here; `data-force-dark` scopes stay on the dark recipe.) */
[data-theme="light"] .yv-metal-wrap .metal-fx-root.yv-metal:not([data-force-dark] *) {
  background: var(--surface-base);
}
/* Touch devices: the ring is pure CSS (Erman 2026-09-16, Yonder Mobil r34).
   WebGL's frozen single frame left a cream smear beside the control on iOS
   (first-frame / measure race); with no motion on touch anyway, the same 3px
   silver band is a conic-gradient — no measurement, no race, no glow spill. */
/* The band's width is ONE number: the prop (`--metal-band-base`, inline
   from MetalRing) or the library's 3px. On a 1x screen a band under 2px is
   a single anti-aliased pixel — measured 2026-09-27 on the Space's 1.5px
   card ring: one pixel at 97 luminance on the edge, fainter still around
   the corner where two curved edges blur into each other — so it is
   floored to 2px there (the media block below; a tiny badge may lower
   that floor with `--metal-band-floor`). Retina keeps the prop.
   A canvas that zooms (the Space) publishes `--metal-zoom` and a cap: the
   band grows in canvas pixels as the view pulls back so it holds its width
   ON SCREEN, never past the cap. Outside a canvas the zoom is 1 and the cap
   is the base, so the width is exactly the prop. Still one derivation: the
   base arrives inline from the component and would override a zoom folded
   into it, so the zoom lives here. */
.yv-metal-wrap[data-metal="css"] {
  --metal-band: clamp(var(--metal-band-base, 3px), calc(var(--metal-band-base, 3px) / var(--metal-zoom, 1)), var(--metal-band-cap, var(--metal-band-base, 3px)));
}
@media (max-resolution: 1.5dppx) {
  .yv-metal-wrap[data-metal="css"] {
    --metal-band: clamp(max(var(--metal-band-base, 3px), var(--metal-band-floor, 2px)), calc(var(--metal-band-base, 3px) / var(--metal-zoom, 1)), max(var(--metal-band-cap, var(--metal-band-base, 3px)), var(--metal-band-floor, 2px)));
  }
}
/* The silver: the conic light of the library's still frame under a bevel
   that lights the upper-left and shades the lower-right (soft-light) — a
   rim that catches light, not a grey line (Erman 2026-09-27, Image 48:
   "metalik gibi değil"). Neutral greys only, no warm colour. */
.yv-metal-wrap[data-metal="css"]::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--metal-band));
  z-index: 0;
  border-radius: 9999px;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.34) 100%),
    conic-gradient(
      from 200deg at 50% 50%,
      #ecece6 0deg,
      #8a8a85 35deg,
      #f7f7f2 70deg,
      #9d9d97 120deg,
      #5f5f5b 165deg,
      #e6e6e0 210deg,
      #8f8f89 260deg,
      #f2f2ec 300deg,
      #a7a7a1 335deg,
      #ecece6 360deg
    );
  background-blend-mode: soft-light, normal;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4);
}
.yv-metal-wrap[data-metal="css"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 9999px;
  pointer-events: none;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.45);
}
/* Light theme: the same silver a step darker. The dark recipe's greys sit
   at 230-247 luminance — on the cream page (244) the band vanished but for
   its darkest stops (measured 2026-09-27: the edge read as one 166 pixel
   on 244). These stops keep the highlights just under the page and the
   shadows well below it, so the rim reads on cream as it does on ink. */
[data-theme="light"] .yv-metal-wrap[data-metal="css"]:not([data-force-dark] *)::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.26) 100%),
    conic-gradient(
      from 200deg at 50% 50%,
      #c4c4be 0deg,
      #74746f 35deg,
      #e2e2dc 70deg,
      #85857f 120deg,
      #52524d 165deg,
      #bcbcb6 210deg,
      #7c7c76 260deg,
      #dadad4 300deg,
      #8e8e88 335deg,
      #c4c4be 360deg
    );
  box-shadow: 0 0 0 0.75px rgba(26, 26, 23, 0.45);
}
.yv-metal-host {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
}
/* A CARD's ring (2026-09-23 — the popular plan: "o paketin etrafı full
   metalik, dikkat çekici olsun"; `MetalRing variant="card"`). A plan card is
   GLASS, not solid light, so the pill recipe above cannot hold: it paints a
   whole filled shape behind the control and lets the solid control cover the
   middle — behind a translucent card that fill would show through. On touch
   the conic band is masked to a 3px BAND at the card's radius; on desktop
   MetalRing hands the library root `background: transparent` inline and the
   ring's radius explicitly. The card's own radius comes as
   `--metal-inner-radius` and the band's base as `--metal-band-base`, set by
   MetalRing; the outer radius is derived below. */
.yv-metal-wrap[data-metal-shape="card"][data-metal="css"]::before {
  /* Outer radius = the card's own + the band, computed HERE so a floored
     band (the 1x screen above) keeps the corner concentric: the mask's
     content box takes the card's radius by the box model, the outer edge
     this one — the band is the same width all the way round. */
  border-radius: calc(var(--metal-inner-radius) + var(--metal-band));
  padding: var(--metal-band);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* A card's rims (2026-09-27, Erman: "kenarlarda inceliyor"): the mask above
   clips the pill's outer hairline away, and the old inner hairline sat under
   the card; the band had no edge and read as a soft grey line that faded
   round the corner. The rims live on ::after at the band's OUTER box: a dark
   hairline outside, a light one just inside — the bevel every still frame of
   the library has. The band's inner edge is the card's own glass hairline. */
.yv-metal-wrap[data-metal-shape="card"][data-metal="css"]::after {
  inset: calc(-1 * var(--metal-band));
  border-radius: calc(var(--metal-inner-radius) + var(--metal-band));
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.55),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.42);
}
  .role-pill[data-role-color="orange"] {
    background-color: #E85D24;
    border-color: #E85D24;
    color: #0D0D0D;
  }
  .role-pill[data-role-color="amber"] {
    background-color: #FFC444;
    border-color: #FFC444;
    color: #0D0D0D;
  }
  .role-pill[data-role-color="blue"] {
    background-color: #0064CE;
    border-color: #0064CE;
    color: #FFFEF8;
  }
  .role-pill[data-role-color="mint"] {
    background-color: #1AF29C;
    border-color: #1AF29C;
    color: #0D0D0D;
  }
  .role-pill[data-role-color="gray"] {
    background-color: #4A4A43;
    border-color: #4A4A43;
    color: #FFFEF8;
  }
  .role-pill[data-role-color="custom"] {
    background-color: var(--role-color);
    border-color: var(--role-color);
    color: #0D0D0D;
  }
  /* red / white / default UserIdentity token'larında VARDI ama burada YOKTU
     → solid flip almayıp outline'a düşüyorlardı (Erman: "Red eski stroke
     kalmış"). Token seti ile hizalandı — hepsi solid. */
  .role-pill[data-role-color="red"] {
    background-color: #FF3B30;
    border-color: #FF3B30;
    color: #FFFEF8;
  }
  .role-pill[data-role-color="white"] {
    background-color: #FAF9EE;
    border-color: #FAF9EE;
    color: #0D0D0D;
  }
  .role-pill[data-role-color="default"] {
    background-color: #6B6B62;
    border-color: #6B6B62;
    color: #FFFEF8;
  }
.glass-outline {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition:
    background-color 75ms ease-out,
    color 150ms ease-out;
}
.glass-outline:hover {
  background: rgba(255, 255, 255, 0.04);
}
.glass-outline:active {
  background: rgba(255, 255, 255, 0.08);
}
.glass-outline[data-selected="true"],
.glass-outline[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .glass-outline:not([data-force-dark] *) {
  box-shadow: inset 0 0 0 1px rgba(26, 26, 23, 0.18);
}
[data-theme="light"] .glass-outline:not([data-force-dark] *):hover {
  background: rgba(26, 26, 23, 0.05);
}
[data-theme="light"] .glass-outline:not([data-force-dark] *):active {
  background: rgba(26, 26, 23, 0.1);
}
[data-theme="light"] .glass-outline:not([data-force-dark] *)[data-selected="true"],
[data-theme="light"] .glass-outline:not([data-force-dark] *)[aria-pressed="true"] {
  background: rgba(26, 26, 23, 0.12);
}
/* Original source static metal fill for audio asset covers. */
  .yv-metal-glyph {
    --metal-glyph-1: #F7F7F2;
    --metal-glyph-2: #8A8A85;
    --metal-glyph-3: #ECECE6;
    --metal-glyph-4: #5F5F5B;
    --metal-glyph-5: #D8D8D2;
  }
  [data-theme="light"] .yv-metal-glyph:not([data-force-dark] *) {
    --metal-glyph-1: #4A4A43;
    --metal-glyph-2: #161614;
    --metal-glyph-3: #6B6B62;
    --metal-glyph-4: #272723;
    --metal-glyph-5: #4A4A43;
  }