/* Pullstring — vinyl material layer.
   1970s Shōwa girls' toys: clear, glossy, heat-welded vinyl (pencil cases, jelly bags, doll-house carry cases).
   Every surface is tinted see-through vinyl with a hard top shine, a welded seam just inside the edge and a soft
   coloured glow underneath. Skins choose the three vinyl colours; this file only describes the material.
     --v1  main vinyl (chips, cards, labels)        default: hot pink
     --v2  second vinyl (buttons, eye chips)         default: lime
     --v3  third vinyl (list buttons, spec sheet)    default: lemon yellow
     --v-ink  text on a solid vinyl                  default: deep magenta */

:root {
  --v1: var(--accent); --v2: var(--ink); --v3: var(--soft); --v-ink: var(--ink);
  --shine: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.35) 38%, rgba(255,255,255,0) 39%, rgba(255,255,255,0) 82%, rgba(255,255,255,0.28) 100%);
  --seam: 1.5px dashed rgba(255,255,255,0.85);
}

/* the material, as a reusable recipe: set --vt (vinyl tint) on the element */
.chip, .btn, .listbtn, .eye, .spec, .filters, .search, .brand, .top-nav a, .card-img, .photo, .badge, .card-add,
.results-head select, .photo-strip button, .auth, .tabbar, .search-clear, .swatch, .shelf-doll .boxlabel {
  --vt: var(--v1);
  background: var(--shine), color-mix(in srgb, var(--vt) 22%, rgba(255,255,255,0.55));
  border: 2px solid color-mix(in srgb, var(--vt) 75%, #fff);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.32),
    inset 0 -8px 14px -6px color-mix(in srgb, var(--vt) 55%, transparent),
    0 8px 18px -10px color-mix(in srgb, var(--vt) 90%, #000);
  backdrop-filter: saturate(1.4) blur(2px);
  -webkit-backdrop-filter: saturate(1.4) blur(2px);
}
/* welded seam just inside the edge (outline follows border-radius) */
.chip, .btn, .listbtn, .eye, .spec, .filters, .brand, .card-img, .photo, .auth, .swatch {
  outline: var(--seam); outline-offset: -7px;
}
.chip:focus-visible, .btn:focus-visible, .listbtn:focus-visible { outline: 3px solid var(--v-ink); outline-offset: 2px; }

/* colours per part */
.btn, .eye, .card-add, .search-clear { --vt: var(--v2); }
.listbtn, .spec, .brand, .badge, .shelf-doll .boxlabel { --vt: var(--v3); }
.filters, .auth, .photo, .search, .results-head select, .photo-strip button, .tabbar { --vt: var(--v1); }
.filters, .photo, .auth, .spec { background: var(--shine), color-mix(in srgb, var(--vt) 12%, rgba(255,255,255,0.7)); }

/* pressed / chosen = solid vinyl, like a filled pouch */
.chip[aria-pressed="true"], .chip.on, .listbtn.on, .card-add.on, .photo-strip button.on, .top-nav a[aria-current="page"], .swatch.on {
  background: var(--shine), color-mix(in srgb, var(--vt) 88%, #fff);
  border-color: color-mix(in srgb, var(--vt) 80%, #000);
  color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.listbtn.on { --vt: var(--v1); }
.chip { color: var(--v-ink); font-weight: 600; border-width: 2px; }
.btn { color: var(--v-ink); text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.btn.ghost { --vt: var(--v3); }
.listbtn { color: var(--v-ink); }
.top-nav a { color: var(--v-ink); --vt: var(--v1); }
.brand { color: var(--v-ink); }
.brand-title { text-shadow: 0 2px 0 rgba(255,255,255,0.9), 0 3px 0 color-mix(in srgb, var(--v1) 40%, transparent); }
.doll-body h1, .h2 { color: var(--v-ink); text-shadow: 0 2px 0 color-mix(in srgb, var(--v2) 55%, transparent); }

/* header: a strip of clear vinyl laid over the box print, welded at the bottom */
.top { position: relative; box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--v1) 55%, transparent), inset 0 -7px 0 rgba(255,255,255,0.6); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; border-bottom: var(--seam); pointer-events: none; }

/* the ground: pale tinted vinyl with a scatter of glitter and bubbles, so the clear parts read as clear */
body {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.95) 0 1.5px, transparent 2.5px) 0 0/58px 58px,
    radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--v1) 18%, transparent) 0 1.5px, transparent 2.5px) 0 0/86px 86px,
    radial-gradient(circle at 40% 60%, color-mix(in srgb, var(--v2) 22%, transparent) 0 1.5px, transparent 2.5px) 0 0/72px 72px,
    var(--ground);
}
/* reading areas sit on a clearer sheet so text never runs over glitter */
.doll-body > :not(.listbtns):not(.eyes):not(.spec):not(h1):not(.panel):not(.panel-like), .prose:not(.panel-like) { background: color-mix(in srgb, var(--ground) 80%, transparent); border-radius: 10px; }
.search { background: var(--shine), rgba(255,255,255,0.88); }
.search input::placeholder { color: color-mix(in srgb, var(--v-ink) 55%, #888); }

/* doll photos sit behind clear vinyl: a soft sheen across the top */
.card-img::after, .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0) 31%); pointer-events: none; border-radius: inherit; }
.card-img img, .photo img { mix-blend-mode: multiply; }
.photo img { background: transparent; }

/* tab bar: a vinyl pouch along the bottom */
.tabbar { border-radius: 22px 22px 0 0; border-bottom: 0; }
.tabbar a[aria-current="page"] { color: var(--v-ink); }

@media (prefers-reduced-transparency: reduce) {
  .chip, .btn, .listbtn, .eye, .spec, .filters, .search, .brand, .top-nav a, .card-img, .photo, .auth, .tabbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* sign-in card and text fields: a vinyl pouch with clear inset windows */
.auth { padding: 18px 20px 20px; border-radius: 22px; }
.auth input, #acct input, .copy input, .copy textarea, .copy select {
  border: 2px solid color-mix(in srgb, var(--v1) 45%, #fff); border-radius: 14px; padding: 10px 14px; font-size: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--v1) 10%, #fff) 0%, #fff 60%);
  box-shadow: inset 0 2px 4px color-mix(in srgb, var(--v1) 25%, transparent);
}
.auth input:focus, #acct input:focus, .copy input:focus { outline: 3px solid color-mix(in srgb, var(--v2) 70%, #fff); outline-offset: 1px; }