/* The small flat cartridges of the demo shelf (cart3d.js writes them), and the frost tokens the 3D cartridge reads.
   Shared by landing.html, tapes-cartridge-02.html and player.html (the empty deck). Needs the colour and type
   tokens of landing.css or studio.css. */

/* The frost's tint, shared by the 3D cartridge (cartridge.js reads these) and the small flat ones. Warm in light
   mode, so the clear plastic picks up the beige page around it; neutral and smoky in dark mode. --cart-edge is
   an r,g,b triplet for the rims and seams. --cart-milk: how much the 3D frost glows its own colour, so it can read
   whiter than the page seen through it (light mode only). */
:root { --cart-frost: #F8F6F2; --cart-frost-deep: #D9D1C3; --cart-edge: 112, 100, 82; --cart-milk: .16; }
:root[data-theme="dark"] { --cart-frost: #D9DADB; --cart-frost-deep: #73777C; --cart-edge: 70, 74, 80; --cart-milk: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cart-frost: #D9DADB; --cart-frost-deep: #73777C; --cart-edge: 70, 74, 80; --cart-milk: 0; } }

/* ---- the demo tapes: small flat cartridges, the same design as the big one ----
   Placed in % of the shell, from the 3D model's 4 x 3 units; type in cqw. The works show twice:
   blurred under the frost, and sharp through the window (a copy offset to line up exactly). */
/* .mshelf, not .shelf: landing.css has a .shelf of its own, whose phone breakpoints pushed this one off screen */
.mshelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 40px; }
@media (max-width: 960px) { .mshelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mshelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
/* one column, as wide as the cell: otherwise the unwrapped caption sets a min width and pushes the grid off a phone */
.mc-pick { --c: var(--orange); display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink-3); transition: transform .2s var(--ease-out); }
.mc-pick:hover { transform: translateY(-4px) rotate(-.6deg); }
.mc-pick:active { transform: translateY(1px); }
/* a little 3D: each cartridge tilts toward the pointer (cartridge.js sets --rx / --ry) with a glare that follows */
.mc-pick { perspective: 700px; }
.mc-pick .mc { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease-out), box-shadow .2s; }
.mc-pick:hover .mc { transition: transform .08s linear, box-shadow .2s; }
.mc-pick .mc::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.35), transparent 55%); }
.mc-pick:hover .mc::after { opacity: 1; }
/* Frosted like the 3D shell: it shows the page behind it (so it follows the theme), milky and tinted by --cart-frost,
   with everything inside blurred and washed out. Only the window is clear: through it the works are sharp,
   on the frosted back plate, framed by the cut edge of the walls. */
.mc {
  --rim: inset 0 0 0 1px rgba(var(--cart-edge), .45), inset 0 0 0 2.5px rgba(255,255,255,.5), inset 0 0 1.4cqw rgba(255,255,255,.3);
  position: relative; display: block; aspect-ratio: 4 / 3; container-type: inline-size; border-radius: 2.5% / 3.3%; overflow: hidden;
  background:
    linear-gradient(150deg, rgba(255,255,255,var(--mc-sheen)), rgba(255,255,255,calc(var(--mc-sheen) / 5)) 45%, color-mix(in srgb, var(--cart-frost-deep) 25%, transparent)),
    color-mix(in srgb, var(--desk) var(--mc-page), var(--cart-frost));
  box-shadow: var(--rim), 0 1px 0 rgba(0,0,0,.15), 0 14px 22px -12px rgba(20,30,40,.45), 0 4px 8px -4px rgba(20,30,40,.2);
  transition: box-shadow .2s;
}
/* the hollow shell's inner wall, seen through the frost */
/* how much of the page shows through the frost, and how much sheen: on a dark page the plastic reads smoky */
.mshelf, .rig-tape { --mc-page: 46%; --mc-sheen: .62; --mc-milk: 1; }
:root[data-theme="dark"] .mshelf, :root[data-theme="dark"] .rig-tape { --mc-page: 80%; --mc-sheen: .16; --mc-milk: .3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mshelf, :root:not([data-theme="light"]) .rig-tape { --mc-page: 80%; --mc-sheen: .16; --mc-milk: .3; } }
.mc::before { content: ""; position: absolute; inset: 3.6% 3.2%; border-radius: 1.6% / 2.2%; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 .5cqw rgba(var(--cart-edge), .14), 0 0 0 .3cqw rgba(255,255,255,.18); }
.mc-pick[aria-pressed="true"] .mc { box-shadow: var(--rim), 0 0 0 3px var(--desk), 0 0 0 5px var(--c), 0 14px 22px -12px rgba(20,30,40,.45); }
.mc-works { position: absolute; inset: 0; }
/* under the frost (roughness 0.48 in 3D): shapes only, softened and paled */
.mc-works.blur { filter: blur(1.5cqw) saturate(.55) contrast(.8); opacity: .55; }
.mc-frost { position: absolute; inset: 0; pointer-events: none; opacity: var(--mc-milk);   /* the milky wash and grain: lighter on a dark page */
  background:
    linear-gradient(118deg, rgba(255,255,255,.45), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 58%, rgba(255,255,255,.18) 64%, rgba(255,255,255,0) 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .4 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    color-mix(in srgb, var(--cart-frost) 30%, transparent); }
/* the window: x 10.5%..80.5%, y 16.67%..56.67%; its sharp copy of the works is the whole shell, shifted back.
   Behind the works: the frosted back plate. Round the edge: the lip outside, the wall's cut face inside. */
.mc-win { position: absolute; left: 10.5%; width: 70%; top: 16.667%; height: 40%; border-radius: 4cqw / 9%; overflow: hidden; z-index: 2;
  background: color-mix(in srgb, var(--desk) calc(var(--mc-page) + 14%), var(--cart-frost));
  box-shadow: 0 0 0 .7cqw rgba(255,255,255,.42), 0 0 0 .95cqw rgba(var(--cart-edge), .25); }
.mc-win .mc-works { left: -15%; top: -41.667%; width: 142.857%; height: 250%; }
.mc-win::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit;
  box-shadow: inset 0 0 0 .55cqw color-mix(in srgb, var(--cart-frost) 50%, transparent), inset 0 .9cqw 1.3cqw rgba(30,40,50,.16); }
.mc-win::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.32) 35%, transparent 44%); }
/* spools at (26%, 36.7%) and (65%, 36.7%); a radius of r units is r * 50% of the width across */
.mc-pack, .mc-hub { position: absolute; top: 36.7%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; }
.mc-pack { width: calc(var(--r) * 50%);
  background: radial-gradient(circle closest-side, transparent 0 95%, rgba(0,0,0,.4) 96% 100%), repeating-radial-gradient(circle, #3c3e42 0 .3cqw, #303236 .3cqw .6cqw);
  /* a ring, not a disc: hollow inside the hub (radius 0.44 of r), so the hub's windows show through the reel */
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(44% / var(--r)), #000 calc(44% / var(--r) + .5%));
          mask: radial-gradient(circle closest-side, transparent calc(44% / var(--r)), #000 calc(44% / var(--r) + .5%)); }
.mc-hub { width: 23%;
  background: radial-gradient(circle closest-side, transparent 0 14%, rgba(0,0,0,.28) 15% 18%, transparent 19%),
    radial-gradient(circle closest-side, #f3f2ee 0 39%, transparent 40% 84%, #f3f2ee 85% 100%),
    repeating-conic-gradient(from 25deg, #f3f2ee 0 13deg, transparent 13deg 120deg);
  box-shadow: 0 0 .3cqw rgba(0,0,0,.25); }
.mc .l { left: 26%; } .mc .r { left: 65%; }
@keyframes mcspin { to { rotate: 360deg; } }
.mc-pick:hover .mc-hub { animation: mcspin 1.6s linear infinite; }
.mc-tape { position: absolute; height: .5cqw; background: #2b2d30; transform-origin: 0 50%; }
.mc-pin { position: absolute; width: 3.5%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle at 35% 30%, #fff, #b9bec4 45%, #7a8088); }
.mc-roller { position: absolute; left: 82.5%; top: 82.7%; width: 12%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle closest-side, #9aa3ab 0 40%, #c2c9cf 42% 100%); }
/* outside: door, slit, screws, write-protect flip, label */
/* parts on the outside of the shell sit above the frost, the inner wall and the window */
.mc-door, .mc-screw, .mc-flip, .mc-label { z-index: 3; }
.mc-door { position: absolute; left: 93.4%; right: 0; top: 7.3%; bottom: 7.3%; border-radius: .8cqw 0 0 .8cqw;
  background: linear-gradient(90deg, #2b2e33, #4a4e55 45%, #24272b); box-shadow: inset .3cqw 0 0 rgba(255,255,255,.12); }
.mc-door::after { content: ""; position: absolute; left: 35%; right: 35%; top: 41.7%; height: 16.6%; border-radius: 2cqw; background: #08090a; }
.mc-screw { position: absolute; width: 3.8%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle at 35% 30%, #f4f5f6, #a9aeb4 55%, #6e737a); box-shadow: 0 0 0 .3cqw rgba(140,150,160,.4); }
/* write-protect flip: a dark slot right after the label, the light tab flipped up */
.mc-flip { position: absolute; left: 81.25%; top: 76%; width: 4.25%; height: 13.33%; translate: -50% -50%; border-radius: 1cqw; background: #2a2d31; }
.mc-flip::after { content: ""; position: absolute; left: 12%; right: 12%; top: 6%; height: 42%; border-radius: .7cqw; background: linear-gradient(#eef0f2, #c9ced3); box-shadow: 0 .3cqw .4cqw rgba(0,0,0,.35); }
.mc-label {
  position: absolute; left: 11.25%; width: 63.75%; top: 62.67%; height: 26.67%; border-radius: .9cqw;
  background: linear-gradient(#1a1b1d, #0d0e0f); color: #EDE6D3; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; align-content: center; column-gap: 2cqw; row-gap: .6cqw; padding: 0 3cqw 0 4cqw;
  box-shadow: 0 .3cqw .6cqw rgba(0,0,0,.3);
}
.mc-label::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.4cqw; background: var(--c); }
.mc-label .k { font: 700 2.1cqw/1 var(--f-mono); letter-spacing: .2em; color: var(--c); }
.mc-label .n { grid-row: 1 / 3; grid-column: 2; align-self: center; font-family: var(--f-dot); font-weight: 900; font-size: 5.6cqw; line-height: 1; color: var(--c); }
.mc-label b { font-size: 4.6cqw; line-height: 1.1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mc-foot { display: flex; justify-content: space-between; gap: 8px; padding: 0 2px; font: 700 10px/1 var(--f-mono); letter-spacing: .1em; }
.mc-foot span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-foot span:last-child { flex: none; color: color-mix(in srgb, var(--c) 72%, var(--ink)); }

/* the real 3D cartridge in place of the flat one (cartridge.js: shelf3D), where there's WebGL */
.mc-3d { display: block; width: 100%; aspect-ratio: 4 / 3; }
.mc-3d-on .mc { display: none; }
.mc-3d-on .mc-pick:hover { transform: translateY(-3px); }   /* it turns toward the pointer itself; just a lift */
.mc-3d { border-radius: 3%; }
/* the loaded one: a thick border in a gradient that turns, the tape's colour and its neighbour round the wheel
   (pink → violet, orange → red, blue → cyan), with a soft glow in the same colours */
@property --ring-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.mc-3d-on .mc-pick { position: relative; --c2: oklch(from var(--c) l c calc(h - 45)); }
.mc-3d-on .mc-pick::before { content: ""; position: absolute; z-index: 1; left: -6px; right: -6px; top: -6px; aspect-ratio: 4 / 3; border-radius: 12px; padding: 4px; pointer-events: none;
  background: conic-gradient(from var(--ring-a), var(--c), var(--c2), var(--c), var(--c2), var(--c));
  -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 exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 55%, transparent));
  opacity: 0; transition: opacity .3s; animation: ring-turn 3.2s linear infinite; }
.mc-3d-on .mc-pick[aria-pressed="true"]::before { opacity: 1; }
@keyframes ring-turn { to { --ring-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .mc-3d-on .mc-pick::before { animation: none; } }