/* Looks (#25): four visual skins of the same product.

   A look changes typography, color, texture and decoration. It never changes layout, features,
   accessibility or interaction. Everything a look can change is either a token below or one of the
   marked overrides, so a new look is one token block plus a few surface rules.

   Each token block applies to the page (:root) and to that look's preview card in the picker, so a
   preview always draws in its own look. Every block sets every dial, so nothing leaks from the page's
   current look into a preview. "initial" on a dial means "use the built-in Collage value".

   Dials:  --tilt  multiplies every card/label rotation (0 = square)
           --hard  multiplies every hard offset shadow (0 = none)
           --shadow-ink / --ink-rgb / --accent-rgb  shadow color, ink and accent as r g b
           --heading  display face for headings;  --hand  the "handwritten note" face
           --tone-1..8  the eight Favorites tile colors,  --tint-*  small highlight fills */

/* ---- Studio cutouts: playful editorial paper shapes, not a corkboard. ---------------------- */
:root[data-look="collage"], .look-preview[data-look="collage"] {
  --bg:#f5f1e8; --paper:#fffdf8; --navy:#14224a; --ink:#1d294f; --muted:#66708d; --line:#d8d5ce;
  --pink:#f06b3f; --pink-soft:#ffe4d7; --cyan:#2f66d8; --cyan-soft:#dfe9ff; --lime:#e8db58;
  --violet:#8167c8; --violet-soft:#e9e3f8; --coral:#ef7c58; --yellow:#f5d95e;
  --display:"Space Grotesk", ui-rounded, system-ui, sans-serif;
  --heading:"Fraunces", "Iowan Old Style", Georgia, serif;
  --hand:"Patrick Hand", "Comic Sans MS", cursive;
  --tilt:.38; --hard:.7;
  --shadow-ink:rgb(20 34 74 / .16); --ink-rgb:20 34 74; --accent-rgb:240 107 63;
  --text2:#4a5578; --note-ink:#2759bc; --tint-lime:#f3edb7; --tint-warm:#fff0d8; --tint-cool:#e8efff;
  --tint-hover:#f7efe1; --tint-pink:#ffe5dc; --tint-red:#ffd9cf; --tint-lilac:#eee9fb; --on-lime:#524b11;
  --accent-text:#c94f2b; --faint:#66708d; --on-pink:#8e3219; --warn:#a94534;
  --tone-1:#ffd8ca; --tone-2:#dbe7ff; --tone-3:#ebe1fb; --tone-4:#f4edaa; --tone-5:#ffe3b7; --tone-6:#d9e3f4; --tone-7:#f7d1c4; --tone-8:#e5ebcf;
  --pv-surface:#f1eadb; --pv-card:#fffdf8; --pv-border:1.5px; --pv-radius:14px;
}

/* ---- Clean editorial: warm, polished, type-first. The starting point. ----------------------- */
:root[data-look="editorial"], .look-preview[data-look="editorial"] {
  --bg:#faf7f2; --paper:#ffffff; --navy:#25211c; --ink:#2f2a24; --muted:#635c52; --line:#e5dfd3;
  --pink:#a9472f; --pink-soft:#f5e4dd; --cyan:#3f6f6c; --cyan-soft:#e2edeb; --lime:#ecdca0;
  --violet:#6e5f8f; --violet-soft:#ebe6f2; --coral:#c26a52; --yellow:#efdc9c;
  --display:"Space Grotesk", ui-rounded, system-ui, sans-serif;
  --heading:"Newsreader", "Iowan Old Style", Georgia, serif;
  --hand:"Newsreader", "Iowan Old Style", Georgia, serif;
  --tilt:0; --hard:0;
  --shadow-ink:transparent; --ink-rgb:37 33 28; --accent-rgb:169 71 47;
  --text2:#4a443b; --note-ink:#7a4a38; --tint-lime:#f3ecc6; --tint-warm:#f8f1e0; --tint-cool:#eaf1ef;
  --tint-hover:#f4efe6; --tint-pink:#f7e9e3; --tint-red:#f3dbd3; --tint-lilac:#eeeaf3; --on-lime:#5d5320;
  --accent-text:#a9472f; --faint:#615b51; --on-pink:#7a2c19; --warn:#9a3f34;
  --tone-1:#f6e8e1; --tone-2:#e6eeec; --tone-3:#eee9f2; --tone-4:#f1eccf; --tone-5:#f5ead6; --tone-6:#e7ebf1; --tone-7:#f3e2dc; --tone-8:#e8eedd;
  --pv-surface:#faf7f2; --pv-card:#fff; --pv-border:1px; --pv-radius:8px;
}

/* ---- Night ledger: dark frame, cream paper, restrained cinema-club details. ---------------- */
:root[data-look="analog"], .look-preview[data-look="analog"] {
  --bg:#141b2a; --paper:#fbf5e8; --navy:#18233a; --ink:#202a3c; --muted:#5d5952; --line:#cfc4ad;
  --pink:#8d3034; --pink-soft:#f1d9d5; --cyan:#506b78; --cyan-soft:#dce7e9; --lime:#c1ad66;
  --violet:#665a78; --violet-soft:#e4dfea; --coral:#a44d3f; --yellow:#d6bc6a;
  --display:"Space Grotesk", ui-rounded, system-ui, sans-serif;
  --heading:"Newsreader", "Iowan Old Style", Georgia, serif;
  --hand:"Newsreader", "Iowan Old Style", Georgia, serif;
  --tilt:0; --hard:.25;
  --shadow-ink:rgb(7 12 24 / .2); --ink-rgb:24 35 58; --accent-rgb:141 48 52;
  --text2:#4f5661; --note-ink:#7f3436; --tint-lime:#ebe2bf; --tint-warm:#f5ead2; --tint-cool:#e2eaeb;
  --tint-hover:#f5ecdc; --tint-pink:#efddd6; --tint-red:#e9cbc2; --tint-lilac:#e6e1e8; --on-lime:#514721;
  --accent-text:#8d3034; --faint:#5d5952; --on-pink:#6d2529; --warn:#8d3034;
  --tone-1:#ebd9d1; --tone-2:#dde5e2; --tone-3:#e4dfe8; --tone-4:#e9e0bd; --tone-5:#eee0c4; --tone-6:#dce1e8; --tone-7:#e7d0c8; --tone-8:#dfe4d0;
  --pv-surface:#172033; --pv-card:#fbf5e8; --pv-border:1px; --pv-radius:5px;
}

/* ---- Bold graphic: high contrast, big type, flat blocks of color. --------------------------- */
:root[data-look="graphic"], .look-preview[data-look="graphic"] {
  --bg:#fffbea; --paper:#ffffff; --navy:#0b0b0b; --ink:#0b0b0b; --muted:#2e2e2e; --line:#0b0b0b;
  --pink:#ff3b1f; --pink-soft:#ffd2c9; --cyan:#1fb5ff; --cyan-soft:#c9efff; --lime:#c6ff3d;
  --violet:#5b3dff; --violet-soft:#ddd6ff; --coral:#ff6a4d; --yellow:#ffd400;
  --display:"Space Grotesk", ui-rounded, system-ui, sans-serif;
  --heading:"Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --hand:"Space Grotesk", ui-rounded, system-ui, sans-serif;
  --tilt:0; --hard:1.35;
  --shadow-ink:#0b0b0b; --ink-rgb:11 11 11; --accent-rgb:255 59 31;
  --text2:#1c1c1c; --note-ink:#1f2bd6; --tint-lime:#dfff8a; --tint-warm:#fff2b0; --tint-cool:#d6f3ff;
  --tint-hover:#fff4c2; --tint-pink:#ffd6cf; --tint-red:#ffb8ab; --tint-lilac:#ddd6ff; --on-lime:#1f2a00;
  --accent-text:#b01800; --faint:#1c1c1c; --on-pink:#8a1200; --warn:#a01400;
  --tone-1:#ffb3d1; --tone-2:#8fe8f0; --tone-3:#c4b5ff; --tone-4:#d9f75a; --tone-5:#ffc861; --tone-6:#a9b9ff; --tone-7:#ff9a85; --tone-8:#a6f0a0;
  --pv-surface:#ffd83d; --pv-card:#fff; --pv-border:3px; --pv-radius:3px;
}

/* ---- Shared: headings use the look's heading face. (Zero specificity, so components can still override.) */
:where(h1, h2, h3, h4, .brand-word) { font-family:var(--heading, var(--display)); }

/* ========================================================================================== */
/* Page + board surface + decoration, per look                                                */
/* ========================================================================================== */

/* ---- Clean editorial ---- */
:root[data-look="editorial"] body { background:#faf7f2; }
:root[data-look="editorial"] :is(.favorites-screen, .profile-screen, .recommendations-screen, .bookmarks-screen, .library-screen, .browse-screen) {
  --gutter:clamp(14px, 2.6vw, 36px);
  --band:clamp(18px, 2.6vw, 32px);
  border:1px solid var(--line);
  border-radius:16px;
  background:#fffdf9;
  box-shadow:0 1px 2px rgb(60 40 20 / .05), 0 14px 34px rgb(60 40 20 / .06);
}
:root[data-look="editorial"] .sticker-field { display:none; }
:root[data-look="editorial"] :is(.blind-card, .bookmark-card, .favorite-tile, .library-card, .profile-map-aside, .rec-progress-card, .refresh-banner, .editorial-rec, .rec-surprise, .why-popover, .search-dialog, .taste-map, .taste-map-node, .map-detail) {
  box-shadow:0 1px 2px rgb(60 40 20 / .06), 0 6px 18px rgb(60 40 20 / .05);
}
:root[data-look="editorial"] :is(.favorite-tile, .library-card, .bookmark-card, .editorial-rec) { border-width:1px; }
:root[data-look="editorial"] .favorite-tile::before { display:none; }
:root[data-look="editorial"] .favorite-tape { display:none; }
:root[data-look="editorial"] :is(.brand-tagline, .topbar-note, .footer-note, .progress-note, .favorites-side-note, .profile-aside-note, .prototype-next-step) { font-style:italic; font-weight:400; }
:root[data-look="editorial"] .note-arrow { display:none; }
:root[data-look="editorial"] h1 { letter-spacing:-.03em; font-weight:600; }
:root[data-look="editorial"] :is(h2, h3) { letter-spacing:-.02em; font-weight:600; }
:root[data-look="editorial"] .brand-word { font-weight:600; letter-spacing:-.04em; }
:root[data-look="editorial"] .brand::after { height:2px; transform:none; }
:root[data-look="editorial"] .marker-word::after { height:.14em; transform:none; opacity:.85; }

/* ---- Warm analog ---- */
:root[data-look="analog"] body {
  background-color:#efe7d6;
  background-image:radial-gradient(rgb(90 60 30 / .07) 1px, transparent 1.5px);
  background-size:16px 16px;
}
:root[data-look="analog"] :is(.favorites-screen, .profile-screen, .recommendations-screen, .bookmarks-screen, .library-screen, .browse-screen) {
  border:1px solid #cdbf9f;
  border-radius:8px;
  background-color:#f5ecd9;
  background-image:radial-gradient(rgb(90 60 30 / .08) 1px, transparent 1.6px), linear-gradient(180deg, rgb(255 255 255 / .35), transparent 40%);
  background-size:14px 14px, 100% 100%;
  box-shadow:0 1px 0 rgb(255 255 255 / .6) inset, 0 12px 28px rgb(70 45 25 / .14);
}
/* Quieter sticker set: paper things only (tape, tickets, tags, stamps, notes), muted like old paper. */
:root[data-look="analog"] :is(.st-neon, .st-star, .st-heart, .st-bolt, .st-flower, .st-rainbow, .st-cloud, .st-cherry, .st-sparkle-lime, .st-sparkle-pink, .st-sparkle-yellow, .st-squiggle, .st-doodle-arrow) { display:none; }
:root[data-look="analog"] .sticker { filter:sepia(.32) saturate(.62) drop-shadow(0 2px 2px rgb(70 45 25 / .25)); }
:root[data-look="analog"] :is(.favorite-tile, .library-card, .bookmark-card, .editorial-rec) { border-width:1.5px; }
:root[data-look="analog"] .favorite-tile::before { border-color:rgb(90 60 30 / .08); }
:root[data-look="analog"] h1 { font-weight:700; letter-spacing:-.02em; word-spacing:.05em; }
:root[data-look="analog"] :is(h2, h3) { font-weight:700; letter-spacing:-.01em; word-spacing:.03em; }
:root[data-look="analog"] .brand-word { font-weight:700; letter-spacing:-.04em; }
:root[data-look="analog"] .brand::after { height:3px; }

/* ---- Bold graphic ---- */
:root[data-look="graphic"] body { background:#fffbea; }
:root[data-look="graphic"] :is(.favorites-screen, .profile-screen, .recommendations-screen, .bookmarks-screen, .library-screen, .browse-screen) {
  --gutter:clamp(22px, 3.6vw, 56px);
  --band:clamp(26px, 3.4vw, 46px);
  border:3px solid #0b0b0b;
  border-radius:6px;
  background:#ffd83d;
  box-shadow:8px 8px 0 #0b0b0b;
}
:root[data-look="graphic"] .sticker-field { display:none; }
/* Flat color blocks in the reserved frame (never over content). */
:root[data-look="graphic"] :is(.favorites-screen, .profile-screen, .recommendations-screen, .bookmarks-screen, .library-screen, .browse-screen)::before,
:root[data-look="graphic"] :is(.favorites-screen, .profile-screen, .recommendations-screen, .bookmarks-screen, .library-screen, .browse-screen)::after {
  content:"";
  position:absolute;
  z-index:0;
  border:3px solid #0b0b0b;
  pointer-events:none;
}
:root[data-look="graphic"] :is(.favorites-screen, .profile-screen, .recommendations-screen, .bookmarks-screen, .library-screen, .browse-screen)::before {
  left:calc(var(--gutter) * .2);
  top:calc(var(--band) * 1.1);
  bottom:calc(var(--band) * 1.1);
  width:calc(var(--gutter) * .4);
  background:var(--pink);
  border-radius:99px;
}
:root[data-look="graphic"] :is(.favorites-screen, .profile-screen, .recommendations-screen, .bookmarks-screen, .library-screen, .browse-screen)::after {
  right:calc(var(--gutter) * .2);
  top:calc(var(--band) * 1.1);
  height:calc(var(--gutter) * .4);
  width:calc(var(--gutter) * .4);
  background:var(--violet);
  border-radius:50%;
}
:root[data-look="graphic"] h1 { font-weight:900; letter-spacing:-.04em; word-spacing:.08em; line-height:.92; }
:root[data-look="graphic"] :is(h2, h3) { font-weight:800; letter-spacing:-.03em; }
:root[data-look="graphic"] .brand { white-space:nowrap; }
:root[data-look="graphic"] .brand-tagline { font-size:13px; line-height:1.05; font-weight:500; white-space:normal; max-width:172px; }
:root[data-look="graphic"] .brand-word { font-weight:900; letter-spacing:-.045em; font-size:clamp(26px, 2.5vw, 36px); }
:root[data-look="graphic"] :is(.favorite-tile, .library-card, .bookmark-card, .editorial-rec, .rec-progress-card, .taste-map-node) { border-width:3px; }
/* #103 item 5: the thicker Bold Graphic border was eating into the compact Library card's fixed
   64px/24px columns, squeezing long titles ("The Storm Riders") and metadata. Keep the compact
   collection cards at the base 2px border; the thick border still reads on every other card type. */
:root[data-look="graphic"] .library-card-compact { border-width:2px; }
:root[data-look="graphic"] .favorite-tile::before { border-color:rgb(11 11 11 / .14); }
:root[data-look="graphic"] .button { border-width:3px; }
:root[data-look="graphic"] .brand::after { height:6px; transform:none; border-radius:0; }
:root[data-look="graphic"] .marker-word::after { height:.3em; transform:none; border-radius:0; }

/* ========================================================================================== */
/* Picker previews: a little decoration per look (the mini card itself uses the tokens above)   */
/* ========================================================================================== */
.look-preview[data-look="collage"] {
  background-image:radial-gradient(rgb(85 55 34 / .18) 1px, transparent 1.6px), radial-gradient(rgb(255 255 255 / .28) 1px, transparent 1.8px);
  background-size:12px 12px, 17px 17px;
}
.look-preview[data-look="collage"] .pv-deco-a { display:block; left:7%; top:21%; width:34%; height:8%; background:repeating-linear-gradient(-45deg, var(--pink) 0 4px, #fff 4px 8px); transform:rotate(-7deg); }
.look-preview[data-look="collage"] .pv-deco-b { display:block; right:7%; top:9%; width:14%; aspect-ratio:1; background:#ffe36e; clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.look-preview[data-look="collage"] .pv-deco-c { display:block; right:3%; bottom:4%; width:26%; height:15%; background:#111a4b; border-radius:4px; box-shadow:inset 0 0 0 2px #20d9e8; transform:rotate(3deg); }
.look-preview[data-look="collage"] .pv-brand { font-weight:700; }

.look-preview[data-look="editorial"] .pv-brand { font-weight:600; letter-spacing:-.03em; }
.look-preview[data-look="editorial"] .pv-title { font-weight:600; font-size:5.8cqw; }
.look-preview[data-look="editorial"] .pv-deco-a { display:block; left:12%; top:21%; width:14%; height:2px; background:var(--pink); }
.look-preview[data-look="editorial"] .pv-chip { background:transparent; padding-left:0; color:var(--pink); }
.look-preview[data-look="editorial"] .pv-card { box-shadow:0 1px 2px rgb(60 40 20 / .08), 0 5px 14px rgb(60 40 20 / .07); }

.look-preview[data-look="analog"] {
  background-image:radial-gradient(rgb(90 60 30 / .12) 1px, transparent 1.6px);
  background-size:10px 10px;
}
.look-preview[data-look="analog"] .pv-brand { font-weight:700; letter-spacing:-.04em; }
.look-preview[data-look="analog"] .pv-title { font-weight:700; }
.look-preview[data-look="analog"] .pv-deco-a { display:block; left:8%; top:21%; width:30%; height:8%; background:rgb(220 200 150 / .85); transform:rotate(-4deg); }
.look-preview[data-look="analog"] .pv-deco-b { display:block; right:8%; top:12%; width:15%; height:18%; background:#e8d8b0; border:1px solid #b9a678; border-radius:3px 3px 6px 6px; transform:rotate(6deg); }
.look-preview[data-look="analog"] .pv-deco-c { display:block; right:5%; bottom:5%; width:15%; aspect-ratio:1; border:2px dashed var(--pink); border-radius:50%; opacity:.7; transform:rotate(-10deg); }

.look-preview[data-look="graphic"] .pv-brand { font-weight:900; letter-spacing:-.05em; }
.look-preview[data-look="graphic"] .pv-title { font-weight:900; font-size:5.8cqw; }
.look-preview[data-look="graphic"] .pv-chip { background:var(--lime); border:1.5px solid #0b0b0b; }
.look-preview[data-look="graphic"] .pv-deco-a { display:block; left:-6%; bottom:-10%; width:34%; aspect-ratio:1; background:var(--pink); border:3px solid #0b0b0b; border-radius:50%; }
.look-preview[data-look="graphic"] .pv-deco-b { display:block; right:6%; top:9%; width:13%; aspect-ratio:1; background:var(--violet); border:3px solid #0b0b0b; }

/* ---- Readability fixes found by the every-look contrast sweep (scripts/qa/layout-check.js) ---- */
/* white on the vermilion accent is 3.6:1; black on it is 5.8:1 */
:root[data-look="graphic"] .rating-button[aria-pressed="true"][data-rating="more"] { color:#0b0b0b; }


/* #82 replacement skin surfaces */
:root[data-look="collage"] body {
  background:
    linear-gradient(135deg, rgb(47 102 216 / .06) 0 18%, transparent 18% 100%),
    radial-gradient(circle at 88% 12%, rgb(240 107 63 / .13), transparent 22rem),
    #f5f1e8;
}
:root[data-look="collage"] :is(.favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen) {
  border:1px solid #d8d5ce;
  border-radius:22px 8px 20px 10px;
  background:#fffdf8;
  box-shadow:0 18px 40px rgb(20 34 74 / .09);
}
:root[data-look="collage"] .sticker { filter:saturate(.82) drop-shadow(0 2px 1px rgb(20 34 74 / .14)); }
:root[data-look="collage"] :is(.st-cherry,.st-rainbow,.st-flower,.st-cloud,.st-heart,.st-squiggle) { display:none; }
:root[data-look="collage"] :is(.editorial-rec,.bookmark-card,.library-card,.starter-card):nth-child(3n+1) { border-radius:18px 5px 14px 7px; }
:root[data-look="collage"] :is(.editorial-rec,.bookmark-card,.library-card,.starter-card):nth-child(3n+2) { border-radius:6px 20px 8px 14px; }
:root[data-look="collage"] :is(.button,.domain-filter-button) { border-radius:999px; }

:root[data-look="analog"] body {
  background:
    radial-gradient(circle at 18% 5%, rgb(214 188 106 / .08), transparent 26rem),
    #141b2a;
}
:root[data-look="analog"] .topbar {
  margin-top:4px;
  padding:12px 18px;
  border:1px solid #cdbf9f;
  border-radius:8px;
  background:#fbf5e8;
  box-shadow:0 10px 30px rgb(4 8 18 / .24);
}
:root[data-look="analog"] :is(.favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen,.mine-screen,.setup-screen,.look-screen) {
  border:1px solid #bba975;
  border-radius:6px;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgb(24 35 58 / .035) 31px 32px),
    #fbf5e8;
  box-shadow:0 20px 50px rgb(4 8 18 / .28);
}
:root[data-look="analog"] :is(.sticker-field,.favorite-tape,.bookmark-tape,.library-tape) { display:none; }
:root[data-look="analog"] :is(.editorial-rec,.bookmark-card,.library-card,.starter-card,.rec-progress-card,.refresh-banner) {
  border-width:1px;
  border-color:#9f8f67;
  border-radius:4px;
  box-shadow:0 4px 12px rgb(24 35 58 / .08);
}
:root[data-look="analog"] .button { border-radius:4px; box-shadow:none; }
:root[data-look="analog"] .kicker { letter-spacing:.18em; }
:root[data-look="analog"] .footer-note { font-style:italic; }

:root[data-look="analog"] .library-inline-remove { color:var(--ink); }


/* #82 refinement: Studio Cutouts is editorial/tactile, not a sticker sheet. */
:root[data-look="collage"] { --tilt:.12; --hard:.28; }
:root[data-look="collage"] body {
  background:
    linear-gradient(90deg, rgb(47 102 216 / .045) 0 1px, transparent 1px),
    linear-gradient(rgb(240 107 63 / .035) 0 1px, transparent 1px),
    #f4f0e8;
  background-size:28px 28px;
}
:root[data-look="collage"] :is(.favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen) {
  --gutter:clamp(24px,3.2vw,48px);
  --band:clamp(28px,3.4vw,48px);
  border:1px solid #d2cec6;
  border-radius:18px 7px 18px 7px;
  background:#fffdf8;
  box-shadow:0 14px 34px rgb(20 34 74 / .075);
}
:root[data-look="collage"] .sticker-field,
:root[data-look="collage"] :is(.favorite-tape,.bookmark-tape,.library-tape) { display:none; }
:root[data-look="collage"] :is(.favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen)::before {
  content:"";
  position:absolute;
  z-index:1;
  top:14px;
  left:clamp(18px,2.2vw,34px);
  width:clamp(54px,7vw,92px);
  height:7px;
  border-radius:999px;
  background:#2f66d8;
  transform:rotate(-1.5deg);
  pointer-events:none;
}
:root[data-look="collage"] :is(.favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen)::after {
  content:"";
  position:absolute;
  z-index:1;
  right:clamp(18px,2.2vw,34px);
  bottom:14px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#f06b3f;
  pointer-events:none;
}
:root[data-look="collage"] :is(.editorial-rec,.bookmark-card,.library-card,.starter-card,.favorite-tile) {
  border-radius:14px;
  box-shadow:0 5px 14px rgb(20 34 74 / .07);
  filter:none;
}
:root[data-look="collage"] :is(.editorial-rec,.bookmark-card,.library-card,.starter-card):nth-child(n) { border-radius:14px; }
:root[data-look="collage"] .editorial-rec::before { display:none; }
:root[data-look="collage"] .favorite-tile { transform:none; }
:root[data-look="collage"] .favorite-tile:hover { transform:translate(-1px,-1px); }
:root[data-look="collage"] :is(.button,.domain-filter-button) { border-radius:10px; }

.look-preview[data-look="collage"] {
  background:#f4f0e8;
  background-image:linear-gradient(90deg, rgb(47 102 216 / .06) 0 1px, transparent 1px);
  background-size:18px 18px;
}
.look-preview[data-look="collage"] .pv-deco-a {
  display:block;
  left:8%;
  top:17%;
  width:22%;
  height:4%;
  border-radius:999px;
  background:#2f66d8;
  transform:rotate(-2deg);
}
.look-preview[data-look="collage"] :is(.pv-deco-b,.pv-deco-c) { display:none; }

/* #82 refinement: Night Ledger is a dark, restrained cinema/record ledger. */
:root[data-look="analog"] {
  --bg:#0d1420; --paper:#f7f0df; --navy:#172235; --ink:#202839; --muted:#646056; --line:#c8b994;
  --pink:#9b3d3f; --pink-soft:#ead6cf; --cyan:#536e77; --cyan-soft:#dce5e4; --lime:#b89c4d;
  --violet:#625b72; --violet-soft:#e1dce6; --coral:#a85643; --yellow:#c6a952;
  --tilt:0; --hard:.12;
  --shadow-ink:rgb(2 7 15 / .26); --accent-text:#853235; --faint:#666158;
}
:root[data-look="analog"] body {
  background:
    radial-gradient(circle at 50% -10%, rgb(194 161 83 / .11), transparent 34rem),
    linear-gradient(180deg,#0d1420,#121b2a 68%,#0b111b);
}
:root[data-look="analog"] .topbar {
  margin-top:10px;
  padding:14px 18px;
  border:1px solid #61583f;
  border-radius:3px;
  background:#111a29;
  color:#f7f0df;
  box-shadow:0 12px 34px rgb(0 0 0 / .24);
}
:root[data-look="analog"] .topbar :is(.brand,.brand-word,.brand-tagline,.step,.topbar-note) { color:#f7f0df; }
:root[data-look="analog"] .topbar .step span { color:#b8ad94; }
:root[data-look="analog"] .topbar .step.is-active { background:#2a2630; }
:root[data-look="analog"] .topbar .prototype-label { border-color:#61583f; background:#182235; color:#d8caa7; }
:root[data-look="analog"] :is(.favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen,.mine-screen,.setup-screen,.look-screen) {
  border:1px solid #887954;
  border-radius:3px;
  background:
    linear-gradient(90deg, transparent 0 52px, rgb(155 61 63 / .12) 52px 53px, transparent 53px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgb(23 34 53 / .045) 39px 40px),
    #f7f0df;
  box-shadow:0 24px 60px rgb(0 0 0 / .34);
}
:root[data-look="analog"] :is(.sticker-field,.favorite-tape,.bookmark-tape,.library-tape) { display:none; }
:root[data-look="analog"] :is(.editorial-rec,.bookmark-card,.library-card,.starter-card,.favorite-tile,.rec-progress-card,.refresh-banner,.setup-card) {
  border-width:1px;
  border-color:#9f906b;
  border-radius:2px;
  background:#fffaf0;
  box-shadow:0 4px 12px rgb(23 34 53 / .07);
  filter:none;
}
:root[data-look="analog"] :is(.button,.domain-filter-button,.setup-field input,.setup-choice span,.setup-style > span) { border-radius:2px; }
:root[data-look="analog"] .button { box-shadow:none; }
:root[data-look="analog"] .kicker { color:#853235; letter-spacing:.19em; }
:root[data-look="analog"] :is(h1,h2,h3,.brand-word) { letter-spacing:-.025em; }
:root[data-look="analog"] .marker-word::after { height:.1em; background:#c6a952; opacity:.75; transform:none; }
:root[data-look="analog"] .editorial-rec::before { display:none; }

.look-preview[data-look="analog"] {
  background:
    linear-gradient(90deg, transparent 0 18%, rgb(155 61 63 / .18) 18% 18.5%, transparent 18.5%),
    #111a29;
}
.look-preview[data-look="analog"] .pv-deco-a {
  display:block;
  left:8%;
  top:12%;
  width:24%;
  height:3%;
  background:#c6a952;
  transform:none;
}
.look-preview[data-look="analog"] .pv-deco-b {
  display:block;
  right:8%;
  top:10%;
  width:10%;
  height:10%;
  border:1px solid #c6a952;
  border-radius:50%;
  background:transparent;
  transform:none;
}
.look-preview[data-look="analog"] .pv-deco-c { display:none; }


/* ==========================================================================================
   Sep 24 final look replacements. These intentionally override the retired Studio Cutouts and
   Night Ledger rules above while keeping their internal ids stable.
   ========================================================================================== */

/* Soft Circuit: cool, rounded, airy UI. Distinct from Clean Editorial's warm paper/type feel. */
:root[data-look="collage"], .look-preview[data-look="collage"] {
  --bg:#eaf1f8; --paper:#f9fcff; --navy:#17304f; --ink:#203550; --muted:#586b82; --line:#c7d6e6;
  --pink:#ff6b7f; --pink-soft:#ffe2e8; --cyan:#3f78ff; --cyan-soft:#dce8ff; --lime:#b8efda;
  --violet:#7459db; --violet-soft:#e9e4ff; --coral:#ee7664; --yellow:#f6d978;
  --display:"Space Grotesk",ui-rounded,system-ui,sans-serif;
  --heading:"Space Grotesk",ui-rounded,system-ui,sans-serif;
  --hand:"Space Grotesk",ui-rounded,system-ui,sans-serif;
  --tilt:0; --hard:.08;
  --shadow-ink:rgb(31 70 112 / .12); --ink-rgb:23 48 79; --accent-rgb:63 120 255;
  --text2:#405a75; --note-ink:#315fc9; --tint-lime:#dff7ee; --tint-warm:#f3f0ff; --tint-cool:#e2edff;
  --tint-hover:#edf5fc; --tint-pink:#ffe6ec; --tint-red:#ffe0de; --tint-lilac:#ebe8ff; --on-lime:#245843;
  --accent-text:#315fc9; --faint:#586b82; --on-pink:#923248; --warn:#a34343;
  --tone-1:#ffe5eb; --tone-2:#dcecff; --tone-3:#ece7ff; --tone-4:#def7ec; --tone-5:#fff0cb; --tone-6:#e0e9f6; --tone-7:#ffe2dd; --tone-8:#e1f2ea;
  --pv-surface:#e8f1fa; --pv-card:#f9fcff; --pv-border:1px; --pv-radius:18px;
}
:root[data-look="collage"] body {
  background:
    linear-gradient(rgb(49 95 201 / .045) 1px,transparent 1px),
    linear-gradient(90deg,rgb(49 95 201 / .045) 1px,transparent 1px),
    #eaf1f8;
  background-size:32px 32px;
}
:root[data-look="collage"] .topbar {
  border:1px solid #c7d6e6;
  border-radius:20px;
  background:rgb(249 252 255 / .9);
  box-shadow:0 10px 30px rgb(31 70 112 / .08);
}
:root[data-look="collage"] :is(.favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen,.mine-screen,.setup-screen,.look-screen) {
  --gutter:clamp(22px,3vw,44px);
  --band:clamp(24px,3vw,42px);
  border:1px solid #c7d6e6;
  border-radius:28px;
  background:rgb(249 252 255 / .94);
  box-shadow:0 18px 50px rgb(31 70 112 / .10);
}
:root[data-look="collage"] :is(.sticker-field,.favorite-tape,.bookmark-tape,.library-tape) { display:none; }
:root[data-look="collage"] :is(.favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen)::before,
:root[data-look="collage"] :is(.favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen)::after { display:none; content:none; }
:root[data-look="collage"] :is(.editorial-rec,.bookmark-card,.library-card,.starter-card,.starter-placeholder,.favorite-tile,.rec-progress-card,.refresh-banner,.setup-card,.profile-map-aside) {
  border:1px solid #bfd0e2;
  border-radius:20px;
  background:#fbfdff;
  box-shadow:0 8px 22px rgb(31 70 112 / .08);
  filter:none;
  transform:none;
}
:root[data-look="collage"] :is(.button,.domain-filter-button,.setup-field input,.setup-choice span,.setup-style > span) { border-radius:999px; box-shadow:none; }
:root[data-look="collage"] :is(h1,h2,h3,.brand-word) { letter-spacing:-.035em; }
:root[data-look="collage"] .marker-word::after { height:.18em; background:#79a3ff; opacity:.55; transform:none; }
.look-preview[data-look="collage"] {
  background:
    linear-gradient(rgb(49 95 201 / .08) 1px,transparent 1px),
    linear-gradient(90deg,rgb(49 95 201 / .08) 1px,transparent 1px),
    #eaf1f8;
  background-size:18px 18px;
}
.look-preview[data-look="collage"] .pv-card { box-shadow:0 5px 14px rgb(31 70 112 / .12); }
.look-preview[data-look="collage"] .pv-chip { background:#dce8ff; color:#315fc9; }
.look-preview[data-look="collage"] .pv-deco-a { display:block; left:7%; bottom:7%; top:auto; width:22%; height:7%; border-radius:999px; background:#b8efda; transform:none; }
.look-preview[data-look="collage"] .pv-deco-b { display:block; right:7%; top:10%; width:12%; aspect-ratio:1; border-radius:50%; background:#ff6b7f; clip-path:none; }
.look-preview[data-look="collage"] .pv-deco-c { display:none; }

/* Electric Night: deep indigo shell with bright floating panels. */
:root[data-look="analog"], .look-preview[data-look="analog"] {
  --bg:#111225; --paper:#f4f2ff; --navy:#19192d; --ink:#22213a; --muted:#5c5a73; --line:#bdb9d8;
  --pink:#ff668f; --pink-soft:#ffdce7; --cyan:#55dce0; --cyan-soft:#d8f6f6; --lime:#b9ef70;
  --violet:#7367ff; --violet-soft:#e1dfff; --coral:#ff836a; --yellow:#f5dd67;
  --display:"Space Grotesk",ui-rounded,system-ui,sans-serif;
  --heading:"Space Grotesk",ui-rounded,system-ui,sans-serif;
  --hand:"Space Grotesk",ui-rounded,system-ui,sans-serif;
  --tilt:0; --hard:.22;
  --shadow-ink:rgb(2 3 14 / .34); --ink-rgb:25 25 45; --accent-rgb:255 102 143;
  --text2:#46445f; --note-ink:#4f46c7; --tint-lime:#e6f8ce; --tint-warm:#eeeaff; --tint-cool:#dcf6f7;
  --tint-hover:#e9e7fb; --tint-pink:#ffe0e8; --tint-red:#ffdcd7; --tint-lilac:#e5e2ff; --on-lime:#314e16;
  --accent-text:#c93564; --faint:#5c5a73; --on-pink:#8f2446; --warn:#a33c4d;
  --tone-1:#f9dce6; --tone-2:#d7f1f2; --tone-3:#e0ddff; --tone-4:#e2f3c5; --tone-5:#f8e7bf; --tone-6:#dbdff3; --tone-7:#f6d9d3; --tone-8:#d9ebe2;
  --pv-surface:#15172c; --pv-card:#f4f2ff; --pv-border:1px; --pv-radius:10px;
}
:root[data-look="analog"] body {
  background:
    radial-gradient(circle at 18% 0%,rgb(115 103 255 / .22),transparent 28rem),
    radial-gradient(circle at 90% 18%,rgb(85 220 224 / .12),transparent 24rem),
    #111225;
}
:root[data-look="analog"] .topbar {
  margin-top:8px;
  padding:13px 18px;
  border:1px solid #393858;
  border-radius:14px;
  background:#17182d;
  color:#f6f4ff;
  box-shadow:0 12px 36px rgb(0 0 0 / .28);
}
:root[data-look="analog"] .topbar :is(.brand,.brand-word,.brand-tagline,.step,.topbar-note) { color:#f6f4ff; }
:root[data-look="analog"] .topbar .step span { color:#aaa7ca; }
:root[data-look="analog"] .topbar .step.is-active { background:#2a2948; }
:root[data-look="analog"] .topbar .prototype-label { border-color:#555275; background:#22233d; color:#d8d4ff; }
:root[data-look="analog"] :is(.favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen,.mine-screen,.setup-screen,.look-screen) {
  border:1px solid #494761;
  border-radius:16px;
  background:#f4f2ff;
  background-image:none;
  box-shadow:0 26px 70px rgb(0 0 0 / .34);
}
:root[data-look="analog"] :is(.sticker-field,.favorite-tape,.bookmark-tape,.library-tape) { display:none; }
:root[data-look="analog"] :is(.editorial-rec,.bookmark-card,.library-card,.starter-card,.starter-placeholder,.favorite-tile,.rec-progress-card,.refresh-banner,.setup-card,.profile-map-aside) {
  border:1px solid #aaa6c8;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 18px rgb(25 25 45 / .10);
  filter:none;
  transform:none;
}
:root[data-look="analog"] :is(.button,.domain-filter-button,.setup-field input,.setup-choice span,.setup-style > span) { border-radius:8px; box-shadow:none; }
:root[data-look="analog"] .button-primary { background:#7367ff; border-color:#19192d; color:#fff; }
:root[data-look="analog"] .kicker { color:#b52f59; letter-spacing:.14em; }
:root[data-look="analog"] .marker-word::after { height:.13em; background:#55dce0; opacity:.72; transform:none; }
:root[data-look="analog"] :is(h1,h2,h3,.brand-word) { letter-spacing:-.035em; }
.look-preview[data-look="analog"] {
  background:
    radial-gradient(circle at 12% 8%,rgb(115 103 255 / .55),transparent 32%),
    #15172c;
}
.look-preview[data-look="analog"] .pv-card { box-shadow:0 7px 18px rgb(0 0 0 / .32); }
.look-preview[data-look="analog"] .pv-chip { background:#d8f6f6; color:#243b52; }
.look-preview[data-look="analog"] .pv-deco-a { display:block; left:6%; top:13%; width:18%; height:4%; border-radius:999px; background:#55dce0; transform:none; }
.look-preview[data-look="analog"] .pv-deco-b { display:block; right:6%; top:9%; width:11%; aspect-ratio:1; border-radius:4px; border:0; background:#ff668f; transform:rotate(8deg); }
.look-preview[data-look="analog"] .pv-deco-c { display:none; }

/* Bold Graphic stays. Fix the favorite-card proportions instead of redesigning the skin. */
:root[data-look="graphic"] .starter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
:root[data-look="graphic"] .starter-card { min-height:280px; padding:20px; }
:root[data-look="graphic"] .starter-card.has-artwork {
  grid-template-columns:minmax(110px,30%) minmax(0,1fr);
  column-gap:22px;
  align-items:start;
}
:root[data-look="graphic"] .starter-artwork { width:100%; max-width:150px; justify-self:start; }
:root[data-look="graphic"] .starter-card h3 { margin-top:8px; font-size:clamp(22px,2.25vw,34px); line-height:1.02; overflow-wrap:anywhere; }
:root[data-look="graphic"] .starter-card p {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:6;
  overflow:hidden;
  font-size:14px;
  line-height:1.45;
}
:root[data-look="graphic"] .starter-actions { grid-column:1 / -1 !important; width:100%; margin-top:10px; }
@media (max-width:700px) {
  :root[data-look="graphic"] .starter-grid { grid-template-columns:1fr; }
  :root[data-look="graphic"] .starter-card.has-artwork { grid-template-columns:96px minmax(0,1fr); column-gap:16px; }
}


/* Mobile: keep Bold Graphic's color/type personality without letting desktop frame decoration
   compete with the narrow content column. */
@media (max-width:620px) {
  :root[data-look="graphic"] :is(.favorites-screen, .profile-screen, .recommendations-screen, .bookmarks-screen, .library-screen, .browse-screen) {
    --gutter:14px;
    --band:18px;
    border-width:3px;
    border-radius:8px;
    box-shadow:5px 5px 0 #0b0b0b;
  }
  :root[data-look="graphic"] :is(.favorites-screen, .profile-screen, .recommendations-screen, .bookmarks-screen, .library-screen, .browse-screen)::before,
  :root[data-look="graphic"] :is(.favorites-screen, .profile-screen, .recommendations-screen, .bookmarks-screen, .library-screen, .browse-screen)::after {
    display:none;
  }
  :root[data-look="graphic"] h1 {
    font-size:clamp(34px,10vw,40px);
    line-height:.96;
    word-spacing:.02em;
  }
  :root[data-look="graphic"] .button {
    border-width:2.5px;
    box-shadow:3px 3px 0 #0b0b0b;
  }
  :root[data-look="graphic"] .filter-band {
    border-width:2px;
    box-shadow:2px 2px 0 rgb(11 11 11 / .18);
  }
  :root[data-look="graphic"] .refresh-banner {
    border-width:2.5px;
    box-shadow:3px 3px 0 #0b0b0b;
  }
}

/* Portfolio back link sits on the page background, which is dark in Electric Night. */
:root[data-look="analog"] .portfolio-link { color:#d9d6f2; }
:root[data-look="analog"] .portfolio-link:is(:hover,:focus-visible) { color:#ffffff; }