/* THE BACK ROOMS' SKIN: the television (her pick, 2026-10-24, night; brief in private/briefs/skin-television.md).
   ONE STRUCTURE, MANY SKINS: tv.css and boombox.css (with mixtape.css) are the structure and never change for a look.
   This file is loaded after them on a page whose <html> carries data-skin="television", and every rule in it starts with
   that attribute, so it can only recolour and decorate. The same file sits beside each of the two back rooms, in the
   soup and in the foundry; keep the two copies the same.
   This skin: the whole room is seen through a 1950s set. Greys and silvers, bakelite and chrome instead of walnut and
   brass, grain over everything, faint scan lines, a bright band that drifts down the glass, and a picture that rolls
   once when you arrive. Colour stays in one chosen thing per room: in the television room, the door with music coming
   through it; in the boom box room, the needle on the dial. The television's own screen keeps whatever it shows.
   Under reduced motion nothing rolls, flickers or drifts; the grain stands still. Her pictures still go under things
   by file drop as before. */

/* the one scheme, in grey: every colour the shared theme names, read through the set */
[data-skin="television"] { --plum: #27272b; --plum-2: #333338; --blush: #d9d9de; --foxglove: #a0a0a8; --sage: #8e8e95; --gold: #b9b9c1; --teal: #e6e6ea; --ink: #121215; }
[data-skin="television"] body { color: #d9d9de;
  background: radial-gradient(ellipse at 50% 0%, #5c5c63 0%, transparent 60%), repeating-linear-gradient(90deg, #2b2b30 0 38px, #26262a 38px 76px); }

/* the glass: a vignette like the corner of a tube, a highlight where the room's light catches it, scan lines, and a
   bright band that drifts down the picture the way a badly held one did */
[data-skin="television"]::before { content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 58%, #000000b4 100%),
    radial-gradient(ellipse at 22% 8%, #ffffff14 0, transparent 38%),
    repeating-linear-gradient(0deg, transparent 0 2px, #00000030 2px 3px),
    linear-gradient(180deg, transparent 0, #ffffff09 40%, #ffffff12 50%, #ffffff09 60%, transparent 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 36vh;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0, 0 -40vh;
  animation: tv-hum 11s linear infinite; }
@keyframes tv-hum { to { background-position: 0 0, 0 0, 0 0, 0 110vh; } }
/* the grain: a sheet of noise over the whole picture, shifted a few times a second so it crawls */
[data-skin="television"]::after { content: ""; position: fixed; inset: 0; z-index: 9001; pointer-events: none; opacity: .14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
  animation: tv-grain .5s steps(1) infinite; }
@keyframes tv-grain { 0% { background-position: 0 0; } 20% { background-position: -37px 61px; } 40% { background-position: 83px -22px; } 60% { background-position: -11px -90px; } 80% { background-position: 58px 44px; } }
/* the roll: the picture arrives from below, slips past, and the hold catches it */
[data-skin="television"] body { animation: tv-roll 1.4s cubic-bezier(.25, .8, .3, 1) 1; }
@keyframes tv-roll { 0% { transform: translateY(40%); } 55% { transform: translateY(-4%); } 70% { transform: translateY(1.5%); } 84% { transform: translateY(-.6%); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  [data-skin="television"] body, [data-skin="television"]::before, [data-skin="television"]::after { animation: none; }
}

/* doors and the prototype tag, the same in both rooms */
[data-skin="television"] .door { border-color: #b9b9c1; background: linear-gradient(180deg, #5a5a62, #2c2c31); }
[data-skin="television"] .door:hover, [data-skin="television"] .door:focus-visible { box-shadow: 0 0 28px #ffffff55; }
[data-skin="television"] #proto-tag, [data-skin="television"] #proto-say, [data-skin="television"] #proto-foot, [data-skin="television"] #proto-card { background: #d9d9de; color: #121215; border-color: #8f8f97; }
[data-skin="television"] #proto-say:hover, [data-skin="television"] #proto-foot:hover { background: #ececf0; }
/* the purse and the maker's line walk with the visitor, but in here they are seen through the set like everything else;
   the painted line along the top and the paint on the doors keep their colours, because that paint says which place you
   are in and where a door goes, on every site */
[data-skin="television"] #coinpurse { filter: grayscale(1) drop-shadow(0 6px 8px #000a); }
[data-skin="television"] #coinpurse-in, [data-skin="television"] .cp-veil { filter: grayscale(1); }
[data-skin="television"] #cp-made-in { background: #27272bd9; color: #d9d9de; border-left-color: #8f8f97; }
[data-skin="television"] #cp-made a { color: #f6f6f8; }

/* THE TELEVISION ROOM: the set is bakelite and chrome; the screen is left alone */
[data-skin="television"] .cabinet-tv { border-color: #121215; background: linear-gradient(180deg, #8a8a92, #55555d 55%, #3b3b42);
  box-shadow: 0 22px 50px #000c, inset 0 0 0 3px #ffffff1c, inset 0 -18px 30px #0007; }
[data-skin="television"] .tube { border-color: #cfcfd6; box-shadow: inset 0 0 40px #000, 0 0 0 3px #121215, 0 0 0 4px #6a6a72; }
[data-skin="television"] .ear::before { background: linear-gradient(90deg, #6a6a72, #e8e8ee, #6a6a72); }
[data-skin="television"] .ear::after { background: #d9d9de; }
[data-skin="television"] .ear.held::after { box-shadow: 0 0 10px #fff; }
[data-skin="television"] .ear-base { background: linear-gradient(180deg, #5a5a62, #1a1a1e); border-color: #0d0d10; }
[data-skin="television"] .plate, [data-skin="television"] .plate:visited { border-color: #2a2a2e; background: linear-gradient(180deg, #f2f2f5, #b4b4bc 55%, #5e5e66); }
[data-skin="television"] .numbers span { color: #bdbdc4; }
[data-skin="television"] .numbers span.here { color: #fff; text-shadow: 0 0 6px #fff; }
[data-skin="television"] .knob-tv { border-color: #121215; background: radial-gradient(circle at 35% 30%, #f6f6f8, #a9a9b2 60%, #4a4a52); }
[data-skin="television"] .knob-tv span { background: #121215; }
[data-skin="television"] .grille { border-color: #121215; background: repeating-linear-gradient(0deg, #121215 0 4px, #b4b4bc 4px 6px); }
[data-skin="television"] .legs i { background: linear-gradient(90deg, #26262a, #55555d); }
[data-skin="television"] .power .lamp { background: #2a2a2e; border-color: #121215; }
[data-skin="television"] .power.on .lamp { background: #f6f6f8; box-shadow: 0 0 9px #f6f6f8, 0 0 2px #fff inset; }
[data-skin="television"] .power .rocker { border-color: #121215; background: linear-gradient(90deg, #15151a 0 50%, #d9d9de 50% 100%); }
[data-skin="television"] .power.on .rocker { background: linear-gradient(90deg, #d9d9de 0 50%, #15151a 50% 100%); }
/* the one thing in colour here: the door the music comes through */
[data-skin="television"] .door.small.humming { border-color: #ffd1e6; background: linear-gradient(180deg, #ff9ecb, #c4477a); box-shadow: 0 0 18px #ff9ecb66; }
[data-skin="television"] .door.small.humming .knob { background: #fff0f7; }

/* THE BOOM BOX ROOM: the radio is explicit grey, piece by piece, so the needle can keep its colour */
[data-skin="television"] .handle { border-color: #9a9aa2; }
[data-skin="television"] .body { border-color: #0d0d10; background: linear-gradient(180deg, #c6c6cc, #8f8f97 40%, #58585f); }
[data-skin="television"] .speaker { border-color: #0d0d10; background: repeating-radial-gradient(circle, #15151a 0 3px, #2c2c32 3px 6px); box-shadow: inset 0 0 0 6px #3a3a41, inset 0 6px 14px #000a; }
[data-skin="television"] .speaker i { border-color: #0d0d10; background: radial-gradient(circle at 35% 30%, #4a4a52, #0d0d10); box-shadow: 0 0 0 5px #1c1c21; }
[data-skin="television"] .tuner { border-color: #0d0d10; background: #121215; }
[data-skin="television"] .scale { background: linear-gradient(180deg, #ececf0, #a9a9b2); }
[data-skin="television"] .scale b { background: #121215; }
[data-skin="television"] .scale em { color: #121215; }
[data-skin="television"] .scale u.hers { background: #ffffffaa; }
/* the one thing in colour here: the needle, where you are on the dial */
[data-skin="television"] .needle { background: #ff6fb1; box-shadow: 0 0 5px #ff6fb1, 0 0 12px #ff6fb188; }
[data-skin="television"] .slide { border-color: #0d0d10; background: #2a2a30; }
[data-skin="television"] .slide .w { color: #d9d9de; }
[data-skin="television"] .slide .nub { border-color: #0d0d10; background: linear-gradient(180deg, #e2e2e7, #8f8f97); }
[data-skin="television"] .slide .lamp { background: #2a2a2e; border-color: #0d0d10; }
[data-skin="television"] .on .slide .lamp { background: #f6f6f8; box-shadow: 0 0 8px #f6f6f8; }
[data-skin="television"] .boombox:not(.on) #power { animation-name: tv-breathe; }
@keyframes tv-breathe { 50% { box-shadow: 0 0 0 4px #ffffff44, 0 0 12px #ffffff77; } }
[data-skin="television"] .readout { color: #f6f6f8; text-shadow: 0 0 6px #ffffff88; }
[data-skin="television"] .bigknob { border-color: #0d0d10; background: radial-gradient(circle at 35% 30%, #f6f6f8, #a9a9b2 60%, #4a4a52); box-shadow: 0 3px 0 #0d0d10, 0 5px 8px #0008; }
[data-skin="television"] .bigknob span { background: #121215; }
[data-skin="television"] .seek button, [data-skin="television"] .favs button { border-color: #0d0d10; background: linear-gradient(180deg, #e2e2e7, #a9a9b2); color: #121215; }
[data-skin="television"] .favs button:active, [data-skin="television"] .favs button.in { background: #8f8f97; }
[data-skin="television"] .favs button.set::after { background: #f6f6f8; box-shadow: 0 0 4px #fff; }
[data-skin="television"] .cassette-window { border-color: #0d0d10; background: #0d0d10; }
[data-skin="television"] .cassette-window iframe { filter: grayscale(1) contrast(1.1); }
[data-skin="television"] .cassette { background: #d9d9de; border-color: #2a2a30; }
[data-skin="television"] .reel { border-color: #2a2a30; background: repeating-conic-gradient(#2a2a30 0 30deg, #d9d9de 30deg 60deg); }
[data-skin="television"] .label { color: #3a3a44; }
[data-skin="television"] .transport button { border-color: #0d0d10; background: linear-gradient(180deg, #4a4a52, #15151a); color: #d9d9de; }
[data-skin="television"] .transport button:active, [data-skin="television"] .transport button.down { background: #0d0d10; }
/* everything on the floor and under the radio (the recorder, the tapes, the mailer, the strip, her banner, the station's
   tags, the shoebox and the blank tape) is seen through the set as one picture: the colour is drained out of the lot */
[data-skin="television"] .beside, [data-skin="television"] .playing, [data-skin="television"] .dialcard, [data-skin="television"] .stationdoors, [data-skin="television"] .shoebox { filter: grayscale(1) contrast(1.06); }