/* ==========================================================================
   shelf - Discover + My lists (both looks)
   Covers: Marquee = flat poster wall (.mosaic), Soft Stack = card fan (.fan).
   ========================================================================== */

/* full-width pages inside the old <main> */
body.page-full main#view { padding-left: 0; padding-right: 0; }
body.page-full.no-head main#view { padding-top: 0; }
.pagebar { padding-top: calc(6px + env(safe-area-inset-top, 0px)); height: auto; min-height: calc(var(--appbar-h) + env(safe-area-inset-top, 0px)); }
.disc-page, .lists-page, .ldetail, .ddetail { padding-bottom: 24px; color: var(--text); }
.disc-loading { padding: 80px 0; }

/* buttons used here */
.btn-sm { height: 40px; min-height: 40px; padding: 0 16px; font-size: 14px; gap: 6px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.btn-quiet:hover { background: var(--surface-2); }
.btn .ic, .btn span > .ic { display: block; }
[data-look="marquee"] .btn-quiet.dd-save, [data-look="marquee"] .lists-page .btn-quiet { background: none; box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---------- covers ------------------------------------------------------ */
.mosaic { display: grid; gap: 2px; overflow: hidden; background: var(--surface-2); }
.mosaic img, .mosaic-ph { width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); min-height: 0; }
.mosaic.m1 { grid-template-columns: 1fr; }
.mosaic.m4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaic.m6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.mosaic.m12 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }

.fan { position: relative; height: 170px; }
.fan-card {
  position: absolute; left: 50%; bottom: 6%; height: 84%; aspect-ratio: 2 / 3;
  border-radius: 14px; overflow: hidden; background: var(--surface-2);
  box-shadow: 0 10px 22px -10px rgba(20, 10, 40, .55);
  transform-origin: 50% 100%;
}
.fan-card img { width: 100%; height: 100%; object-fit: cover; }
.fan-card.f0 { z-index: 5; transform: translateX(-50%); }
.fan-card.f1 { z-index: 4; transform: translateX(-108%) translateY(4%) rotate(-9deg) scale(.86); }
.fan-card.f2 { z-index: 4; transform: translateX(8%) translateY(4%) rotate(9deg) scale(.86); }
.fan-card.f3 { z-index: 3; transform: translateX(-150%) translateY(9%) rotate(-15deg) scale(.74); }
.fan-card.f4 { z-index: 3; transform: translateX(50%) translateY(9%) rotate(15deg) scale(.74); }
.fan-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.fan.art-thumb { height: 56px; width: 56px; flex: none; }
.fan.art-thumb .fan-card { height: 88%; bottom: 4%; border-radius: 8px; }
.fan.art-thumb .f3, .fan.art-thumb .f4 { display: none; }

/* ---------- shared bits -------------------------------------------------- */
.shelf-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface); color: var(--text); width: max-content; }
.shelf-pill-mark svg, .shelf-pill-mark { width: 13px; height: auto; display: block; color: var(--accent); }
[data-look="marquee"] .shelf-pill { background: rgba(10, 10, 12, .72); color: #fff; }

.mcounts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mcount { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.mcount b { font-weight: 700; }
[data-look="soft"] .mcount { height: 28px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); }
[data-look="marquee"] .mcounts { gap: 10px; }
.mcounts.icons-only b { display: none; }
.mcounts.icons-only { gap: 4px; color: var(--muted); }

.section-h .btn { flex: none; }
.section-h h2 .count { margin-left: 4px; }

.saved-badge { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: middle; }
.saved-badge .shelf-pill-mark, .saved-badge .shelf-pill-mark svg { width: 11px; }
[data-look="marquee"] .saved-badge { background: var(--text); color: var(--bg); width: 22px; padding: 0; justify-content: center; }
[data-look="marquee"] .saved-badge .shelf-pill-mark { color: var(--accent); }
[data-look="marquee"] .saved-badge.edited { width: auto; padding: 0 7px; background: none; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); }
[data-look="marquee"] .saved-badge.edited .shelf-pill-mark { color: var(--text); }
[data-look="soft"] .saved-badge { background: var(--surface); color: var(--text); height: 24px; padding: 0 9px; box-shadow: 0 2px 8px -4px rgba(0,0,0,.3); }
[data-look="soft"] .saved-badge.edited .ic { color: var(--accent); }
.saved-badge.on-art { position: absolute; top: 8px; left: 8px; z-index: 6; }
.saved-flag { position: absolute; top: 8px; right: 8px; z-index: 6; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-fill); color: var(--on-accent); }
[data-look="marquee"] .saved-flag { background: var(--text); color: var(--bg); }

.part-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.part-chip { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
[data-look="soft"] .part-chip { background: var(--tone); }
[data-look="marquee"] .part-chip { box-shadow: inset 0 0 0 1.5px var(--line); }

.lists-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px var(--gutter); text-align: center; color: var(--muted); }
.lists-empty p { margin: 0; font-size: 15px; }
.lists-empty-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--text); }

/* ---------- tiles (Discover grid, Soft My lists grid) --------------------- */
.ltiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 var(--gutter); }
.ltile { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; color: var(--text); cursor: pointer; }
.ltile-art { position: relative; display: block; overflow: hidden; }
.ltile-name { font-size: 15px; font-weight: 700; margin-top: 6px; }
.ltile-sub { font-size: 13px; color: var(--muted); }
.ltile-sub b { font-family: var(--font-display); font-size: 18px; color: var(--text); }
.ltile.wide { grid-column: 1 / -1; }

[data-look="soft"] .ltile { background: var(--surface); border-radius: var(--radius-card); padding: 10px 10px 14px; box-shadow: var(--shadow-card); }
[data-look="soft"] .ltile-name, [data-look="soft"] .ltile-sub { padding: 0 4px; }
[data-look="soft"] .ltile-art { height: 150px; border-radius: 18px; background: var(--tone); }
[data-look="soft"] .ltile-art .fan { height: 150px; }
[data-look="soft"] .ltile.group { flex-direction: row; align-items: center; gap: 14px; }
[data-look="soft"] .ltile.group .ltile-art { width: 42%; flex: none; }
[data-look="soft"] .ltile.group .part-chips { flex-wrap: nowrap; }
[data-look="soft"] .group-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[data-look="soft"] .group-body .ltile-name { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 0; }
[data-look="soft"] .group-body .part-chips { margin-top: 10px; }
[data-look="soft"] .ltile-new { align-items: center; justify-content: center; gap: 10px; min-height: 220px; background: none; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); font-weight: 600; }
.ltile-new-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--tone); color: var(--text); display: inline-flex; align-items: center; justify-content: center; }

[data-look="marquee"] .ltile-art { height: 176px; border-radius: var(--radius-art); }
[data-look="marquee"] .ltile-art .mosaic { position: absolute; inset: 0; }
[data-look="marquee"] .ltile.banner .ltile-art { height: 124px; }
[data-look="marquee"] .ltile.banner .mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }
[data-look="marquee"] .ltile.banner .ltile-art::after { content: ''; position: absolute; inset: 0; background: var(--hero-scrim); }
[data-look="marquee"] .ltile.banner .ltile-name { position: absolute; left: 14px; bottom: 12px; z-index: 2; margin: 0; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: .9; text-transform: uppercase; }
[data-look="marquee"] .ltile.banner { position: relative; }
[data-look="marquee"] .ltile.banner .ltile-sub { position: absolute; right: 14px; bottom: 10px; z-index: 2; color: #fff; }
[data-look="marquee"] .ltile.banner .ltile-sub b { color: #fff; font-size: 34px; }
[data-look="marquee"] .ltile.banner .ltile-sub span > :not(b) { display: none; }
[data-look="marquee"] .ltile.group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
[data-look="marquee"] .group-body { display: flex; flex-direction: column; gap: 6px; }
[data-look="marquee"] .group-body .ltile-name { margin: 0; }
[data-look="marquee"] .group-body .part-chips { margin-top: 6px; }

/* Marquee big-number banner (lists of 40+) */
.dbig { grid-column: 1 / -1; position: relative; display: flex; align-items: stretch; min-height: 150px; padding: 16px; overflow: hidden; text-align: left; border-radius: var(--radius-art); background: #0E0E10; color: #fff; cursor: pointer; }
.dbig-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; max-width: 60%; }
.dbig-num { font-family: var(--font-display); font-weight: 800; font-size: 76px; line-height: .85; }
.dbig-title { font-weight: 700; font-size: 16px; }
.dbig small { color: rgba(255,255,255,.7); font-size: 12px; }
.dbig .dbig-fan { position: absolute; right: -10px; bottom: -14px; width: 52%; height: 160px; }
.dbig .fan-card { border-radius: 4px; }

/* ---------- Discover featured ------------------------------------------- */
.dhero { position: relative; display: block; width: calc(100% - 2 * var(--gutter)); margin: 4px var(--gutter) 6px; text-align: left; overflow: hidden; cursor: pointer; }
.dhero > .shelf-pill { position: absolute; top: 14px; left: 14px; z-index: 6; }
.dhero-body { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 6; }
.dhero-title { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--display-tracking); line-height: var(--display-leading); text-transform: var(--display-transform); text-wrap: balance; }
.dhero-foot { display: flex; align-items: center; gap: 8px; }
.pill-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.pill-stat b { font-weight: 700; }
[data-look="soft"] .dhero { padding: 14px 18px 18px; border-radius: var(--radius-card); background: var(--tone); }
[data-look="soft"] .dhero .fan { height: 220px; margin: 18px -4px 14px; }
[data-look="soft"] .dhero .fan-card { border-radius: 16px; }
[data-look="soft"] .dhero-title { font-size: 30px; color: var(--text); }
[data-look="soft"] .pill-stat { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface); }
.dhero-go { margin-left: auto; width: 50px; height: 50px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-fill); color: var(--on-accent); }
[data-accent-kind="textured"] .dhero-go .ic { background: var(--accent-plate); color: var(--on-plate); border-radius: 50%; padding: 6px; width: 34px; height: 34px; }
[data-look="marquee"] .dhero { height: 370px; border-radius: var(--radius-art); background: #111; color: #fff; }
[data-look="marquee"] .dhero > .mosaic { position: absolute; inset: 0; }
[data-look="marquee"] .dhero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--hero-scrim); }
[data-look="marquee"] .dhero-body { position: absolute; left: 16px; right: 16px; bottom: 16px; }
[data-look="marquee"] .dhero-title { font-size: 52px; color: #fff; }
[data-look="marquee"] .dhero-foot { justify-content: space-between; color: rgba(255,255,255,.85); }
[data-look="marquee"] .pill-stat b { font-family: var(--font-display); font-size: 30px; line-height: 1; color: #fff; margin-right: 4px; }

/* ---------- My lists ---------------------------------------------------- */
.lists-top { display: flex; align-items: center; gap: 8px; padding: 6px var(--gutter) 14px; }
.chipbar { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chipbar-chip { height: var(--subtab-h); padding: 0 16px; border-radius: var(--radius-chip); background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; }
.chipbar-chip[aria-selected="true"] { background: var(--text); color: var(--bg); font-weight: 700; }

.lhero { position: relative; display: block; width: calc(100% - 2 * var(--gutter)); margin: 0 var(--gutter) 12px; text-align: left; overflow: hidden; cursor: pointer; color: var(--text); }
.lhero-body { display: flex; flex-direction: column; gap: 8px; }
.lhero-name { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; letter-spacing: var(--display-tracking); line-height: var(--display-leading); text-transform: var(--display-transform); }
.lhero-num { position: absolute; right: 16px; bottom: 14px; font-family: var(--font-display); font-weight: 800; line-height: .9; }
[data-look="soft"] .lhero { padding: 10px 10px 16px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
[data-look="soft"] .lhero .fan { height: 200px; border-radius: 20px; background: var(--tone); overflow: hidden; margin-bottom: 12px; }
[data-look="soft"] .lhero .fan-card { height: 90%; bottom: -4%; }
[data-look="soft"] .lhero-body { padding: 0 6px; }
[data-look="soft"] .lhero-name { font-size: 22px; padding-right: 48px; }
[data-look="soft"] .lhero-num { font-size: 34px; color: var(--muted); right: 20px; bottom: 18px; }
[data-look="marquee"] .lhero { height: 200px; border-radius: var(--radius-art); background: #111; color: #fff; }
[data-look="marquee"] .lhero > .mosaic { position: absolute; inset: 0; }
[data-look="marquee"] .lhero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--hero-scrim); }
[data-look="marquee"] .lhero-body { position: absolute; z-index: 2; left: 16px; right: 80px; bottom: 14px; }
[data-look="marquee"] .lhero-name { font-size: 40px; color: #fff; }
[data-look="marquee"] .lhero .mcount { color: rgba(255,255,255,.9); }
[data-look="marquee"] .lhero-num { z-index: 2; font-size: 64px; color: #fff; }

.lrows { display: flex; flex-direction: column; }
.lrow { display: flex; align-items: center; gap: 14px; padding: 10px 4px 10px var(--gutter); cursor: pointer; }
.lrow > .mosaic, .lrow > .fan { width: 96px; height: 96px; flex: none; border-radius: var(--radius-art); }
.lrow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lrow-name { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; min-width: 0; }
.lrow-line { display: flex; align-items: center; gap: 8px; }
.lrow-num { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; }
.lrow-meta, .lrow-sub { font-size: 13px; color: var(--muted); }
.lrow-prog { height: 3px; margin-top: 6px; gap: 3px; max-width: 200px; }
.lrow-prog i { background: var(--line); }
.lrow-more { color: var(--muted); flex: none; }
.lists-legend { margin: 14px var(--gutter) 0; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--muted); }
.lists-legend > div { display: flex; align-items: center; gap: 10px; }

.import-row { display: flex; align-items: center; gap: 12px; width: calc(100% - 2 * var(--gutter)); margin: 16px var(--gutter) 0; text-align: left; color: var(--text); cursor: pointer; }
.import-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.import-text b { font-size: 15px; }
.import-text small { font-size: 12px; color: var(--muted); }
.import-ic { display: inline-flex; align-items: center; justify-content: center; }
[data-look="soft"] .import-row { min-height: 64px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--surface-2); }
[data-look="soft"] .import-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); }
[data-look="marquee"] .import-row { justify-content: center; height: 52px; border-radius: var(--radius-control); box-shadow: none; border: 1.5px dashed var(--line); }
[data-look="marquee"] .import-text { flex: none; }

/* ---------- one list ---------------------------------------------------- */
.ld-bar { justify-content: space-between; padding-right: var(--gutter); }
.ld-bar-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.ld-mode { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ld-head { position: relative; display: flex; align-items: center; gap: 14px; margin: 4px var(--gutter) 14px; }
.ld-head-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ld-title { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; letter-spacing: var(--display-tracking); line-height: var(--display-leading); text-transform: var(--display-transform); }
.ld-sub { margin: 0; font-size: 13px; color: var(--muted); }
[data-look="soft"] .ld-head > .fan { width: 88px; height: 88px; flex: none; }
[data-look="soft"] .ld-head > .fan .fan-card { height: 86%; border-radius: 10px; }
[data-look="soft"] .ld-head > .fan .f3, [data-look="soft"] .ld-head > .fan .f4 { display: none; }
[data-look="soft"] .ld-title { font-size: 28px; }
[data-look="marquee"] .ld-head { height: 170px; align-items: flex-end; padding: 14px; overflow: hidden; border-radius: var(--radius-art); background: #111; color: #fff; }
[data-look="marquee"] .ld-head > .mosaic { position: absolute; inset: 0; }
[data-look="marquee"] .ld-head::after { content: ''; position: absolute; inset: 0; background: var(--hero-scrim); }
[data-look="marquee"] .ld-head-body { position: relative; z-index: 2; flex: 1; }
[data-look="marquee"] .ld-title { font-size: 40px; color: #fff; }
[data-look="marquee"] .ld-sub, [data-look="marquee"] .ld-head .mcount { color: rgba(255,255,255,.85); }
.ld-num { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: .85; color: #fff; }
.ld-add { display: flex; align-items: center; gap: 12px; width: calc(100% - 2 * var(--gutter)); height: 52px; margin: 0 var(--gutter) 12px; padding: 0 14px 0 6px; border-radius: 999px; text-align: left; font-size: 15px; color: var(--muted); cursor: pointer; }
.ld-add > span:nth-child(2) { flex: 1; }
.ld-add-plus { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
[data-look="soft"] .ld-add { background: var(--surface-2); }
[data-look="soft"] .ld-add-plus { background: var(--tone); }
[data-look="marquee"] .ld-add { box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---------- title rows (list detail + Discover detail) -------------------- */
.drows { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; flex-direction: column; }
.drow { display: flex; align-items: center; gap: 12px; min-height: 66px; touch-action: pan-y; }
.drow-num { flex: none; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.drow-tap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.drow-art { width: 42px; height: 62px; flex: none; object-fit: cover; border-radius: var(--radius-art); background: var(--surface-2); }
.drow-noart { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.drow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drow-title { font-size: 15px; font-weight: 700; }
.drow-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.drow-flag { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.drow-flag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.drow-act { flex: none; min-width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.drow-act.busy { opacity: .5; }
.drow-check { display: inline-flex; align-items: center; justify-content: center; }
.drow-chip { font-size: 12px; font-weight: 700; }
.drow-grip { flex: none; width: 36px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: grab; touch-action: none; }
.drow-remove { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.drow.dragging { position: relative; z-index: 3; background: var(--surface); box-shadow: var(--shadow-sheet); }

[data-look="marquee"] .drows { padding: 0; }
[data-look="marquee"] .drow { padding: 4px var(--gutter); }
[data-look="marquee"] .drow-num { width: 26px; font-family: var(--font-display); font-weight: 700; font-size: 26px; }
[data-look="marquee"] .drow-act { width: 44px; box-shadow: inset 0 0 0 1.5px var(--line); }
[data-look="marquee"] .drow-act.on { background: var(--text); color: var(--bg); box-shadow: none; }
[data-look="marquee"] .drow[data-state="added"] { background: var(--surface); }
[data-look="marquee"] .drow-remove { order: -1; color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--danger); }

[data-look="soft"] .drows { gap: 8px; }
[data-look="soft"] .drow { padding: 6px 6px 6px 14px; border-radius: 22px; background: var(--surface); }
[data-look="soft"] .drow-num { width: 16px; font-size: 13px; font-weight: 700; }
[data-look="soft"] .drow-art { width: 40px; height: 58px; border-radius: 10px; }
[data-look="soft"] .drow-act { width: 50px; height: 50px; background: var(--tone); }
[data-look="soft"] .drow[data-state="added"] { background: var(--tone); box-shadow: inset 0 0 0 2px var(--accent); }
[data-look="soft"] .drow[data-state="added"] .drow-act { background: var(--accent-fill); color: var(--on-accent); }
[data-look="soft"] .drow[data-state="lib"] .drow-act { width: auto; height: 36px; padding: 0 12px 0 4px; }
[data-look="soft"] .drow[data-state="lib"] .drow-check { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); }
[data-look="soft"] .drow[data-state="lib"] .drow-check .ic { width: 15px; height: 15px; }
[data-look="soft"] .drows.editing .drow { padding-left: 4px; }
[data-look="soft"] .drow-grip { order: -1; }
[data-look="soft"] .drow-remove { background: var(--surface-2); color: var(--text); margin-right: 6px; }
[data-look="soft"][data-accent-kind="textured"] .drow-act .drow-check .ic,
[data-look="soft"][data-accent-kind="textured"] .drow[data-state="added"] .drow-act .ic { background: var(--accent-plate); color: var(--on-plate); border-radius: 50%; padding: 4px; width: 26px; height: 26px; }

/* ---------- Discover detail -------------------------------------------- */
.ddetail { position: relative; }
.dd-hero { position: relative; overflow: hidden; }
.dd-hero .detail-topbar { z-index: 7; }
.dd-head { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; padding: 0 var(--gutter); }
.dd-head .detail-title { text-wrap: balance; }
.dd-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 0 0; }
.dd-body > :not(.drows) { margin-left: var(--gutter); margin-right: var(--gutter); }
.dd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dd-actions .btn { height: 50px; min-height: 50px; padding: 0 12px; font-size: 14px; }
.dd-progress { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.dd-progress .progress { flex: 1; }

[data-look="soft"] .dd-hero { height: 320px; background: var(--tone); }
[data-look="soft"] .dd-hero .fan { position: absolute; left: 0; right: 0; bottom: 44px; height: 240px; }
[data-look="soft"] .dd-hero .fan-card { border-radius: 16px; }
[data-look="soft"] .dd-head { margin-top: -28px; padding-top: 18px; background: var(--bg); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; }
[data-look="soft"] .dd-head .detail-title { font-size: 34px; }
[data-look="soft"] .dd-progress .progress { height: 8px; }
[data-look="marquee"] .dd-hero { height: 430px; background: #111; }
[data-look="marquee"] .dd-hero > .mosaic { position: absolute; inset: 0; }
[data-look="marquee"] .dd-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 40%, var(--bg) 100%); }
[data-look="marquee"] .dd-head { margin-top: -190px; }
[data-look="marquee"] .dd-head .detail-title { font-size: 58px; }
[data-look="marquee"] .dd-head .stat-band { margin-top: 4px; }
[data-look="marquee"] .dd-head .stat .mcounts { margin-top: 4px; }
[data-look="marquee"] .dd-head .mcounts.icons-only b { display: inline; }
[data-look="marquee"] .dd-progress .progress { height: 6px; }
[data-look="marquee"] .dd-progress .progress i.next { background: var(--accent-fill) var(--seg-pos) / var(--seg-size) no-repeat; }

/* ---------- bottom sheet ------------------------------------------------ */
.overlay.bsheet-ov { align-items: flex-end; padding: 0; background: var(--scrim); -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 150; }
.bsheet {
  width: min(430px, 100%); margin: 0 auto; padding: 8px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); color: var(--text); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: var(--shadow-sheet); animation: bsheet-in var(--dur-sheet) var(--ease-sheet);
}
@keyframes bsheet-in { from { transform: translate3d(0, 40px, 0); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } }
/* Sheets scroll inside themselves; the layer behind never scrolls. While a sheet slides
   up it starts 40px below the screen, and a scrollable layer there made phones nudge it
   sideways at the end of the slide. */
.bsheet { max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; will-change: transform; }
.overlay.bsheet-ov { overflow: hidden; }
.bsheet-grip { display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: var(--line); }
.bsheet-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.bsheet-head > .mosaic { width: 52px; height: 52px; flex: none; border-radius: var(--radius-art); }
.bsheet-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: var(--display-tracking); text-transform: var(--display-transform); }
.bsheet-sub { font-size: 13px; color: var(--muted); }
.bsheet-rows { display: flex; flex-direction: column; }
.bsheet-row { display: flex; align-items: center; gap: 14px; min-height: 54px; font-size: 16px; font-weight: 600; text-align: left; }
.bsheet-ic { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
[data-look="soft"] .bsheet-ic { background: var(--surface-2); }
[data-look="marquee"] .bsheet-ic { width: 28px; }
.bsheet-row.danger { color: var(--danger); }
[data-look="soft"] .bsheet-row.danger .bsheet-ic { background: color-mix(in oklab, var(--danger) 14%, var(--surface)); }
.bsheet-sep { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.bsheet-cancel { margin-top: 10px; }
[data-look="marquee"] .lhero .saved-badge.edited, [data-look="marquee"] .ld-head .saved-badge.edited { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
[data-look="marquee"] .lhero .saved-badge.edited .shelf-pill-mark, [data-look="marquee"] .ld-head .saved-badge.edited .shelf-pill-mark { color: #fff; }
[data-look="marquee"] .lhero .saved-badge:not(.edited), [data-look="marquee"] .ld-head .saved-badge:not(.edited) { background: #fff; color: #0E0E10; }
[data-look="soft"] .ld-head > .fan { margin: 0 6px 0 14px; }
.bsheet-head > .fan { margin: 0 4px 0 10px; }
.disc-skel { padding: 8px var(--gutter); }

/* ---------- Ratings filter chips: the selected chip slides (chipOrb in index.html) ---------- */
.rt-filter { position: relative; isolation: isolate; view-transition-name: rt-chips; }
.rt-filter .chip-orb { position: absolute; left: 0; top: 0; width: 0; z-index: -1; border-radius: var(--radius-chip); background: var(--text); pointer-events: none;
  transition: transform var(--dur-pill) var(--ease-pill), width var(--dur-pill) var(--ease-pill); }
.rt-filter.has-orb .chipbar-chip { position: relative; background: none; transition: color var(--dur-pill) ease; }
[data-look="soft"] .rt-filter.has-orb .chipbar-chip::before { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--surface-2); }
[data-look] .rt-filter.has-orb .chipbar-chip[aria-selected="true"] { background: none; box-shadow: none; }
/* during the row morph the chip bar is shown live, so its chip just slides */
::view-transition-group(rt-chips), ::view-transition-new(rt-chips) { animation: none; }
::view-transition-old(rt-chips) { display: none; }

/* ---------- pop-up menu (three dots on detail pages) ---------- */
.overlay.pop-ov { display: block; padding: 0; overflow: hidden; z-index: 150; background: rgba(10, 6, 20, .14); -webkit-backdrop-filter: none; backdrop-filter: none; animation: pop-dim .18s ease both; }
@keyframes pop-dim { from { background: rgba(10, 6, 20, 0); } }
.pop-menu { position: fixed; min-width: 216px; max-width: calc(100vw - 32px); padding: 6px; border-radius: 22px; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--line); animation: pop-in .26s var(--ease-pill) both; will-change: transform; }
.pop-menu.out { animation: pop-out .14s ease-in both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes pop-out { to { opacity: 0; transform: scale(.85); } }
.pop-row { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 14px; border-radius: 16px; font-size: 15px; font-weight: 600; color: var(--text); text-align: left; }
.pop-row:active { background: var(--surface-2); }
.pop-row.danger { color: var(--danger); }
.pop-ic { display: inline-flex; width: 20px; justify-content: center; color: var(--muted); }
.pop-row.danger .pop-ic { color: var(--danger); }
.pop-sep { border: 0; height: 1px; margin: 4px 10px; background: var(--line); }
.round-btn.menu-open { transform: scale(.92); transition: transform .2s var(--ease-pill); }
/* Marquee: flat and square - hairline edge, 3px corners, full-width rows, no bounce */
[data-look="marquee"] .pop-menu { padding: 4px 0; border-radius: var(--radius-card); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .4), 0 0 0 1px var(--line); }
[data-look="marquee"] .pop-row { border-radius: 0; padding: 0 18px; }
[data-look="marquee"] .pop-ic { color: var(--text); }
[data-look="marquee"] .pop-sep { margin: 4px 0; }
@media (prefers-reduced-motion: reduce) { .pop-menu, .pop-menu.out, .overlay.pop-ov { animation: none; } }